/*
Theme Name: Kiyokawa Shoji 2026
Theme URI: https://example.com/
Description: 有限会社キヨカワ商事 コーポレートサイト用オリジナルテーマ。静的サイト（web_2026）から変換。
Author: Kiyokawa Shoji
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kiyokawa
*/

/* 外部CSS（glightbox 等） */
@import url('https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css');

/* =====================================================
   共通＋TOPページ（旧 style.css）
===================================================== */
:root {
  --color-blue-01: #229bc9;
  --color-blue-02: #67c9dd;
  --color-blue-03: #ecfbfb;
  --color-blue-04: #d8f2f0;
  --color-navy: #0e5270;
  --color-text: #173f50;
  --color-text-light: #406270;
  --color-white: #ffffff;
  --shadow: 0 18px 40px rgba(34, 155, 201, 0.12);
  --inner: min(1120px, calc(100% - 40px));
  --inner-narrow: min(860px, calc(100% - 40px));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 68px; }

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
  -webkit-text-size-adjust: 100%;
}

p {
  color: var(--color-text);
}

.page_hero p {
  color: var(--color-white);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }

.inner { width: var(--inner); margin-inline: auto; }
.narrow { width: var(--inner-narrow); margin-inline: auto; }
main { overflow: hidden; }

/* 表示切替（.sp_v: スマホのみ表示 / .pc_v: PCのみ表示） */
@media (min-width: 769px) {
  .sp_v { display: none !important; }
}
@media (max-width: 768px) {
  .pc_v { display: none !important; }
}

/* Header */
.site_header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.site_header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.site_header.is-scrolled .header_nav__list a,
.site_header.is-scrolled .header_tel {
  color: var(--color-text);
}

.site_header.is-scrolled .header_tel__label {
  color: var(--color-text-light);
  opacity: 1;
}

.site_header.is-scrolled .header_btn_recruit {
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.site_header.is-scrolled .btn_white {
  background: var(--color-blue-01);
  color: var(--color-white);
}

.header_inner {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 0;
  width: min(1440px, calc(100% - 80px));
}

.site_logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site_logo img {
  display: block;
  width: auto;
  height: 62px;
}

.site_logo .logo_black { display: none; }

.is-scrolled .site_logo .logo_white { display: none; }
.is-scrolled .site_logo .logo_black { display: block; }

.header_nav {
  margin-left: auto;
}

.header_nav__list {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header_nav__list a {
  color: var(--color-white);
  font-size: 0.88rem;
  font-weight: 500;
  transition: opacity .3s;
  white-space: nowrap;
}

.header_nav__list a:hover { opacity: .72; }

.header_cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 28px;
}

.header_cta .btn {
  min-width: auto;
  min-height: 40px;
  padding: 9px 20px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.header_tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-white);
  line-height: 1.25;
  white-space: nowrap;
}

.header_tel__label {
  color: var(--color-white);
  font-size: 0.65rem;
  letter-spacing: .16em;
  opacity: 1;
  text-align: center;
  width: 100%;
}

.header_tel__number {
  font-family: "Montserrat", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: transform .3s, opacity .3s, background .3s, color .3s, border-color .3s;
}

.btn:hover { transform: translateY(-2px); }

.btn_primary {
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-blue-01), var(--color-blue-02));
  box-shadow: var(--shadow);
}

.btn_line {
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}

.btn_white {
  color: var(--color-blue-01);
  background: var(--color-white);
}

.btn_navy {
  color: var(--color-white);
  background: var(--color-navy);
}

.link_more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: gap .3s, border-color .3s, opacity .3s;
}

.link_more::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='163.916,0 92.084,71.822 276.258,255.996 92.084,440.178 163.916,512 419.916,255.996' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='163.916,0 92.084,71.822 276.258,255.996 92.084,440.178 163.916,512 419.916,255.996' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .3s;
}

.link_more:hover {
  opacity: .8;
  gap: 14px;
  border-color: rgba(255,255,255,0.9);
}

.link_more:hover::after {
  transform: translateX(3px);
}

.link_more--dark {
  color: var(--color-navy);
  border-bottom-color: rgba(14, 82, 112, 0.3);
}

.link_more--dark:hover {
  opacity: 1;
  color: var(--color-blue-01);
  border-bottom-color: var(--color-blue-01);
}

.btn_white_blue {
  color: var(--color-blue-01);
  background: var(--color-white);
}

.btn_white_line {
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,.8);
  background: transparent;
}

.btn_line_blue {
  color: var(--color-blue-01);
  border: 1px solid #bde5e8;
  background: var(--color-white);
}

/* Common heading */
.section_heading { margin-bottom: 48px; }
.section_heading.center { text-align: center; }

.section_heading__sub {
  margin-bottom: 10px;
  color: var(--color-blue-01);
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.section_heading__title {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.section_heading_white .section_heading__sub,
.section_heading_white .section_heading__title {
  color: var(--color-white);
}

.section_button {
  margin-top: 40px;
  text-align: center;
}

/* FV */
.fv {
  position: relative;
  min-height: 920px;
  padding: 160px 0 220px;
  color: var(--color-white);
  background: #83cfdb;
}

.fv_media,
.fv_overlay,
.fv_wave {
  position: absolute;
  inset: 0;
}

.fv_media { z-index: 1; }
.fv_bg { width: 100%; height: 100%; object-fit: cover; }

.fv_overlay {
  z-index: 2;
  background: linear-gradient(120deg, rgba(7,46,68,.72) 0%, rgba(16,92,116,.45) 45%, rgba(77,156,183,.2) 100%);
}

.fv_inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}

.fv_content { max-width: 720px; padding-top: 60px; }

.fv_label {
  margin-bottom: 18px;
  font-family: "Montserrat", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .16em;
  color:var(--color-blue-03);
}

.fv_title {
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .04em;
}

.fv_text {
  max-width: 620px;
  margin-top: 26px;
  font-size: 1.05rem;
}

.fv_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.fv_card {
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  color: var(--color-text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.fv_recruit_card {
  position: absolute;
  z-index: 5;
  bottom: 210px;
  right: max(20px, calc((100% - 1120px) / 2));
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .25s, transform .25s;
}

.fv_recruit_card:hover {
  background: rgba(255,255,255,1);
  transform: translateY(-2px);
}

.fv_recruit_card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-blue-01);
  color: #fff;
}

.fv_recruit_card__icon svg {
  width: 18px;
  height: 18px;
}

.fv_recruit_card__text {
  flex: 1;
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-text);
}

.fv_recruit_card__label {
  font-family: "Montserrat", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: .08em;
}

.fv_wave {
  z-index: 4;
  top: auto;
  bottom: -1px;
  height: 180px;
}

.fv_wave svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--color-white);
}

/* Intro */
.intro {
  position: relative;
  padding: 90px 0 120px;
  background: var(--color-white);
}

.intro_box {
  position: relative;
  z-index: 2;
  padding: 46px 42px;
  border-radius: 30px;
  text-align: center;
}

.intro_box p { line-height: 2.25; }
.intro_box p + p { margin-top: 18px; }
.intro_box .btn { margin-top: 60px; }

.intro .section_heading { margin-bottom: 25px; }

.deco_loop {
  position: absolute;
  z-index: 1;
  border: 10px solid rgba(77,156,183,.18);
  border-radius: 50%;
  pointer-events: none;
}

.deco_loop_left {
  left: -180px;
  top: 90px;
  width: 560px;
  height: 280px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-14deg);
}

.deco_loop_right {
  right: -130px;
  bottom: 18px;
  width: 420px;
  height: 220px;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(8deg);
}

/* Common sections */
.problems,
.strengths,
.works,
.news {
  padding: 110px 0;
}

/* Problems */
.problem_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.problem_card {
  position: relative;
  padding: 36px 24px 72px;
  text-align: center;
  background: #e8edf3;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 50% 100%, 0 calc(100% - 48px));
}

.problem_card h3 {
  margin-bottom: 14px;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.problem_card p {
  color: #7a8fa0;
  font-size: .86rem;
  line-height: 1.75;
}

/* Bridge */
.problem_bridge {
  position: relative;
  margin: 56px 0 44px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: .08em;
}

/* Solution */
.solution_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.solution_card {
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  border: 1px solid #d9eff0;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 8px 24px rgba(34,155,201,.06);
}

.solution_card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--color-blue-03);
  color: var(--color-blue-01);
}

.solution_card__icon svg {
  width: 28px;
  height: 28px;
}

.solution_card h3 {
  margin-bottom: 16px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.6;
}

.solution_card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.solution_card__list li {
  position: relative;
  padding-left: 1.4em;
  font-size: .84rem;
  color: var(--color-text-light);
  line-height: 1.65;
}

.solution_card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23229bc9'/%3E%3Cpolyline points='4,8.5 7,11.5 12,5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Strengths */
.strengths {
  background: var(--color-white);
}

.strengths_inner {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 56px;
  align-items: center;
}

.strengths_lead__sub {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--color-blue-01);
  font-family: "Montserrat", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.strengths_lead__title {
  color: var(--color-text);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.4;
}

.strengths_list {
  display: flex;
  flex-direction: column;
}

.strength_item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #e4ecf3;
}

.strength_item:first-child { border-top: 1px solid #e4ecf3; }

.strength_item__img {
  flex-shrink: 0;
  width: 240px;
  height: 240px;
  border-radius: 20px;
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strength_item__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.strength_item__body__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.strength_item__num {
  flex-shrink: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-blue-01);
  letter-spacing: .02em;
  line-height: 1;
}

.strength_item__body h3 {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
}

.strength_item__body p {
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

/* Service */
.section_blue {
  padding: 110px 0;
  background: linear-gradient(135deg, #2ca5ce 0%, #6fd0dd 100%);
}

.service_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

.service_item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44% 1fr;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 45px rgba(14,82,112,.18);
}

.service_item.reverse {
  grid-template-columns: 1fr 44%;
}

.service_item.reverse .service_item__image { order: 2; }
.service_item.reverse .service_item__body { order: 1; }

.service_item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service_item__body { padding: 46px 42px; }

.service_item--simple {
  grid-column: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(14,82,112,.12);
}

.service_item--simple .service_item__body { padding: 34px 32px; }

.service_item__label {
  margin-bottom: 10px;
  color: var(--color-blue-01);
  font-family: "Montserrat", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.service_item h3 {
  margin-bottom: 18px;
  color: var(--color-navy);
  font-size: 1.8rem;
  line-height: 1.45;
}

.service_item--simple h3 {
  margin-bottom: 14px;
  font-size: 1.4rem;
}

.service_item p:not(.service_item__label) {
  color: var(--color-text-light);
}

.service_item--simple .link_more { margin-top: 22px; }

/* Works */
.works_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.works .works_grid .works_card:nth-child(n+4) { display: none; }

.works_card {
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: var(--shadow);
}

.works_card__image img {
  width: 100%;
  aspect-ratio: 4 / 2.7;
  object-fit: cover;
}

.works_card__body {
  padding: 24px 22px 28px;
}

.works_card__cat {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-blue-03);
  color: var(--color-blue-01);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
}

.works_card h3 {
  margin-bottom: 12px;
  color: var(--color-navy);
  font-size: 1.15rem;
  line-height: 1.6;
}

.works_card p:not(.works_card__cat) {
  color: var(--color-text-light);
  font-size: .95rem;
}

/* Area */
.section_light {
  padding: 110px 0;
  background: linear-gradient(180deg, #eefafa 0%, #fbfefe 100%);
}

.area_panel {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: 42px;
  align-items: center;
}

.area_map_card {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 34px 28px;
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
}

.area_map_badge {
  position: relative;
  z-index: 1;
  align-self: center;
  margin-bottom: 18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-blue-01);
  color: var(--color-white);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
}

.area_map_image {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 365px;
  margin: 0 auto;
  border-radius: 18px;
}

.area_region_list {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  color: var(--color-navy);
  font-size: .92rem;
  font-weight: 800;
}

.area_region_list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.area_region_dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.area_region_dot--toyo { background: #2ab8da; }
.area_region_dot--chuyo { background: #5db430; }
.area_region_dot--nanyo { background: #ffb810; }

.area_content {
  padding: 8px 0;
}

.area_content__label {
  margin-bottom: 14px;
  color: var(--color-blue-01);
  font-family: "Montserrat", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.area_content h3 {
  margin-bottom: 18px;
  color: var(--color-navy);
  font-size: 2rem;
  line-height: 1.45;
}

.area_content p:not(.area_content__label) {
  color: var(--color-text-light);
  font-size: 1rem;
}

.area_points {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.area_points li {
  position: relative;
  padding-left: 28px;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.7;
}

.area_points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-blue-01);
  box-shadow: inset 0 0 0 4px var(--color-blue-03);
}

.area_content p.area_note {
  margin-top: 22px;
  padding-left: 1em;
  text-indent: -1em;
  font-size: .88rem;
  line-height: 1.8;
}

/* News */
.news_list { border-top: 1px solid #d8eeee; }

.news_item {
  display: grid;
  grid-template-columns: 130px 110px 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #d8eeee;
  transition: background .3s;
}

.news_item:hover { background: #f7fdfd; }

.news_item__date {
  color: var(--color-text-light);
  font-size: .92rem;
  font-weight: 500;
}

.news_item__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-blue-03);
  color: var(--color-blue-01);
  font-size: .82rem;
  font-weight: 700;
}

.news_item__title {
  color: var(--color-navy);
  font-weight: 500;
}

/* CTA */
.cta {
  padding: 0 0 120px;
  background: var(--color-white);
}

.cta_box {
  padding: 56px 64px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--color-blue-01), var(--color-blue-02));
  box-shadow: 0 22px 50px rgba(34,155,201,.2);
  color: var(--color-white);
  text-align: center;
}

.cta_box__sub {
  display: inline-block;
  margin-bottom: 14px;
  color: rgba(255,255,255,.75);
  font-family: "Montserrat", sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.cta_box__title {
  margin-bottom: 12px;
  color: var(--color-white);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .08em;
}

.cta_box__desc {
  margin-bottom: 40px;
  color: rgba(255,255,255,.85);
  font-size: 1.1rem;
  font-weight: 500;
}

.cta_box__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
}

.cta_box__cta_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 44px;
  border-radius: 50px;
  font-size: 1.05rem;
  background: var(--color-white);
  color: var(--color-blue-01);
  font-weight: 700;
}

.cta_box__cta_btn:hover { opacity: .9; }

.cta_box__tel { text-align: center; }

.cta_box__tel__number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

.cta_box__tel__icon {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.cta_box__tel__hours {
  margin-top: 0;
  color: rgba(255,255,255,.75);
  font-size: .88rem;
}

/* Recruit */
.recruit {
  padding: 110px 0;
  background: linear-gradient(180deg, #ffffff 0%, #effafa 100%);
}

.recruit_lead {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--color-text-light);
  font-size: 1rem;
}

.recruit_top {
  display: grid;
  grid-template-columns: 44% 1fr;
  overflow: hidden;
  border-radius: 16px;
}

.recruit_top__image {
  position: relative;
}

.recruit_top__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit_top__image_label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

.recruit_top__body { padding: 46px 42px; }

.recruit_top__label {
  margin-bottom: 10px;
  color: var(--color-blue-01);
  font-family: "Montserrat", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.recruit_top__body h3 {
  margin-bottom: 18px;
  color: var(--color-navy);
  font-size: 2rem;
  line-height: 1.45;
}

.recruit_top__body p:not(.recruit_top__label) {
  color: var(--color-text-light);
}

.recruit_top__body .btn { margin-top: 26px; }

.recruit_block {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 48px 48px 56px;
  border-radius: 28px;
  background: var(--color-white);
  box-shadow: var(--shadow);
}

.recruit_divider {
  border: none;
  border-top: 1px solid #e4ecf3;
  margin: 0;
}

.recruit_support .section_heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.recruit_support .section_heading__sub {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.recruit_support .section_heading__title {
  font-size: 1.3rem;
}

.recruit_point_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 0;
}

.recruit_point_card {
  padding: 20px 24px;
}

.recruit_point_card + .recruit_point_card { border-left: 1px solid #e4ecf3; }

.recruit_point_card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.recruit_point_card__num {
  flex-shrink: 0;
  color: var(--color-blue-01);
  font-family: "Montserrat", sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.recruit_point_card h3 {
  margin-bottom: 0;
  color: var(--color-navy);
  font-size: 1.16rem;
  line-height: 1.5;
}

.recruit_point_card p {
  color: var(--color-text-light);
  font-size: .95rem;
}

.recruit_job {
  margin-top: 28px;
  padding: 38px 34px;
  border-radius: 28px;
  background: linear-gradient(135deg, #2ca5ce 0%, #6fd0dd 100%);
  box-shadow: 0 20px 45px rgba(14,82,112,.18);
}

.recruit_job__head {
  margin-bottom: 24px;
  color: var(--color-white);
  text-align: center;
}

.recruit_job__sub {
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.recruit_job__head h3 {
  font-size: 2rem;
  line-height: 1.4;
}

.recruit_job__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.recruit_job_card {
  padding: 26px 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.95);
}

.recruit_jobCard h4 {}

.recruit_job_card h4 {
  margin-bottom: 10px;
  color: var(--color-navy);
  font-size: 1.08rem;
  line-height: 1.5;
}

.recruit_job_card p {
  color: var(--color-text-light);
  font-size: .94rem;
}

.recruit_cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 36px 34px;
  border-radius: 28px;
  background: #f8fdfd;
  border: 1px solid #d8f2f0;
}

.recruit_cta__sub {
  margin-bottom: 8px;
  color: var(--color-blue-01);
  font-family: "Montserrat", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.recruit_cta__body h3 {
  margin-bottom: 10px;
  color: var(--color-navy);
  font-size: 1.5rem;
  line-height: 1.5;
}

.recruit_cta__body p:not(.recruit_cta__sub) {
  color: var(--color-text-light);
}

.recruit_cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

/* Footer */
.site_footer {
  position: relative;
  background: #f4f8fb;
  color: var(--color-text);
}

.footer_wave {
  width: 100%;
  height: 110px;
  line-height: 0;
}

.footer_wave svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--color-white);
}

.footer_inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 0 28px;
}

.footer_logo {
  margin-bottom: 14px;
}

.footer_logo img {
  display: block;
  width: auto;
  height: 58px;
}

.footer_text {
  color: var(--color-text-light);
  font-size: .95rem;
}

.footer_association_link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 20px;
  padding: 12px 18px;
  border: 1px solid #b8cbd8;
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(15, 56, 82, .07);
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.footer_association_link::after {
  content: "↗";
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 1rem;
}

.footer_association_link:hover,
.footer_association_link:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(15, 56, 82, .14);
}

.footer_association_link:hover::after,
.footer_association_link:focus-visible::after {
  color: currentColor;
}

.footer_nav ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 32px;
}

.footer_nav a {
  color: var(--color-text);
  font-size: .95rem;
}

.copyright {
  padding: 14px 20px 24px;
  color: var(--color-text-light);
  font-size: .82rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .header_nav { display: none; }

  .fv {
    min-height: auto;
    padding: 150px 0 180px;
  }

  .fv_inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .fv_card { max-width: 360px; }

  .strengths_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .strengths_lead__title { font-size: 1.9rem; }

  .problem_grid,
  .solution_grid,
  .works_grid,
  .recruit_job__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .area_panel {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .service_item,
  .service_item.reverse,
  .recruit_top {
    grid-template-columns: 1fr;
  }

  .service_item.reverse .service_item__image,
  .service_item.reverse .service_item__body {
    order: initial;
  }

  .recruit_cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta_box__actions { gap: 32px; }

  .recruit_cta__buttons {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .footer_inner { flex-direction: column; }
}

@media (max-width: 768px) {
  :root {
    --inner: min(100% - 40px, 100%);
    --inner-narrow: min(100% - 36px, 100%);
  }

  body { line-height: 1.7; }

  section[id] { scroll-margin-top: 58px; }

  .site_header { height: 58px; }
  .site_logo img { height: 50px; }

  .header_cta .btn {
    min-width: 120px;
    min-height: 40px;
    padding: 8px 14px;
    font-size: .8rem;
  }

  .header_tel__number { font-size: 1rem; }

  .fv { padding: 130px 0 120px; }
  .fv_title { font-size: 2.2rem; }
  .fv_text { font-size: .96rem; }

  .fv_buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
    min-width: 0;
  }

  .fv_card {
    max-width: none;
    padding: 22px 20px;
  }

  .section_heading { margin-bottom: 34px; }
  .section_heading__sub { font-size: .78rem; }
  .section_heading__title { font-size: 1.6rem; line-height: 1.85; }

  .intro,
  .problems,
  .strengths,
  .section_blue,
  .works,
  .recruit,
  .section_light,
  .news {
    padding: 80px 0;
  }

  .intro_box {
    padding: 32px 22px;
    border-radius: 22px;
    text-align: left;
  }

  .deco_loop_left {
    left: -170px;
    top: 50px;
    width: 370px;
    height: 180px;
    border-width: 7px;
  }

  .deco_loop_right {
    right: -120px;
    bottom: 0;
    width: 300px;
    height: 150px;
    border-width: 7px;
  }

  .problem_grid,
  .solution_grid,
  .works_grid,
  .recruit_point_grid,
  .recruit_job__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .problem_card {
    padding: 28px 16px 64px;
    border-radius: 0;
  }

  .recruit_point_card,
  .recruit_job_card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .area_panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .area_map_card {
    min-height: 280px;
    padding: 18px;
    border-radius: 22px;
  }

  .area_map_card::before {
    inset: 14px;
    border-radius: 18px;
  }

  .area_content h3 {
    font-size: 1.55rem;
  }

  .strengths_lead__title { font-size: 1.65rem; }

  /* 強み: 画像240px固定の横並びを縦積みに */
  .strength_item {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 0;
  }

  .strength_item__img {
    width: min(240px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

  .strength_item__num { font-size: 2rem; }
  .strength_item__body h3 { font-size: 1.15rem; }

  .service_list { grid-template-columns: 1fr; }

  .service_item,
  .recruit_top {
    border-radius: 20px;
  }

  .service_item__body,
  .recruit_top__body {
    padding: 28px 20px;
  }

  .service_item h3 { font-size: 1.45rem; }
  .service_item--simple h3 { font-size: 1.3rem; }
  .recruit_top__body h3 { font-size: 1.55rem; }

  .works_card__body { padding: 20px 18px 24px; }

  .recruit_job {
    padding: 28px 20px;
    border-radius: 20px;
  }

  .recruit_job__head h3 { font-size: 1.55rem; }

  /* 採用ブロック: 白カードの左右48pxを縮めて本文幅を確保 */
  .recruit_block {
    gap: 40px;
    padding: 32px 20px 40px;
    border-radius: 22px;
  }

  /* 働く環境: 縦積み時は左罫線を上罫線の区切りに変更 */
  .recruit_point_grid { gap: 0; }

  .recruit_point_card { padding: 20px 4px; }

  .recruit_point_card + .recruit_point_card {
    border-left: none;
    border-top: 1px solid #e4ecf3;
  }

  .recruit_cta {
    margin-top: 20px;
    padding: 28px 20px;
    border-radius: 20px;
  }

  .recruit_cta__body h3 { font-size: 1.3rem; }

  .news_item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0;
  }

  .cta { padding-bottom: 80px; }

  .cta_box {
    padding: 40px 28px;
    border-radius: 24px;
  }

  .cta_box__title { font-size: 1.45rem; }

  .cta_box__actions {
    flex-direction: column;
    gap: 32px;
  }

  .cta_box__tel__number { font-size: 1.9rem; }

  .recruit_cta__buttons {
    flex-direction: column;
  }

  .footer_inner { padding: 30px 0 24px; }
  .footer_logo img { height: 48px; }

  .footer_nav ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =====================================================
   下層ページ共通（Page Hero・ヘッダー配色）
===================================================== */
.page_hero {
  position: relative;
  padding: 140px 0 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-01) 100%);
  color: var(--color-white);
  overflow: hidden;
}

.page_hero__breadcrumb {
  margin-bottom: 32px;
  font-size: 0.82rem;
  opacity: 0.95;
  letter-spacing: 0.04em;
}

.page_hero__breadcrumb a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page_hero__sub {
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.95;
}

.page_hero__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  padding-bottom: 56px;
}

.page_hero__wave {
  display: block;
  line-height: 0;
}

.page_hero__wave svg {
  width: 100%;
  height: 80px;
  display: block;
}

.site_header.is-scrolled .header_nav__list a {
  color: var(--color-text);
}

.site_header.is-scrolled .header_nav__list a.is-active {
  color: var(--color-blue-01);
  font-weight: 700;
}

/* =====================================================
   私たちについて (about)（旧 about.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* Header override for about page (always scrolled state) */
/* ===========================
   代表挨拶
=========================== */
.css-about .about_message {
  padding: 100px 0;
  background: var(--color-white);
}

.css-about .about_message_inner {
  max-width:800px;
  margin-inline: auto;
}

.css-about .about_message__image {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.css-about .about_message__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.css-about .about_message__body {
  text-align: center;
}

.css-about .about_message__body .section_heading__sub {
  margin-bottom: 16px;
}

.css-about .about_message__body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 2.0;
  color: var(--color-navy);
  margin-bottom: 24px;
}

.css-about .about_message__body p {
  font-size:16px;
  color: var(--color-text-light);
  line-height: 3.0;
  letter-spacing: 0.06em;
}

.css-about .about_message__body p + p {

}

.css-about .about_message__sign {
  margin-top: 32px !important;
  color: var(--color-text) !important;
  font-size: 1.25rem;
  text-align: center;
}

.css-about .about_message__sign strong {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ===========================
   理念・方針
=========================== */
.css-about .about_philosophy {
  padding: 100px 0;
  background: var(--color-blue-03);
}

.css-about .philosophy_list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-about .philosophy_item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 48px;
  align-items: start;
  padding: 52px 0;
  border-bottom: 1px solid rgba(34,155,201,.15);
}

.css-about .philosophy_item:first-child {
  border-top: 1px solid rgba(34,155,201,.15);
}

.css-about .philosophy_item__num_wrap {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.css-about .philosophy_item__num {
  font-family: "Montserrat", sans-serif;
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-blue-01);
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.35;
}

.css-about .philosophy_item__body h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.5;
  margin-bottom: 16px;
}

.css-about .philosophy_item__body p {
  color: var(--color-text-light);
  line-height: 2;
  letter-spacing: 0.04em;
  max-width: 640px;
}

/* ===========================
   取り組み
=========================== */
.css-about .about_initiatives {
  padding: 100px 0;
}

.css-about .initiative_list {
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.css-about .initiative_card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
  min-height: 380px;
  padding: 56px 0 56px 64px;
  isolation: isolate;
}

.css-about .initiative_card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82%;
  background: var(--color-white);
  z-index: -2;
}

.css-about .initiative_card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 110px;
  background: linear-gradient(100deg, rgba(34, 155, 201, 0) 0 22%, rgba(34, 155, 201, 0.15) 22% 100%);
  z-index: -1;
}

.css-about .initiative_card__body {
  position: relative;
  z-index: 1;
}

.css-about .initiative_card__body h3 {
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 32px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.css-about .initiative_card__body p {
  max-width: 480px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 2.05;
  letter-spacing: 0.05em;
}

.css-about .initiative_card__image {
  position: relative;
  z-index: 1;
  height: 390px;
  overflow: hidden;
  border-radius: 18px 0 0 0;
  background: #fff;
}

.css-about .initiative_card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.css-about .initiative_card__image img.contain {
  object-fit: contain;
  padding: 28px;
  background: #fff;
}

/* ===========================
   会社概要
=========================== */
.css-about .about_company {
  padding: 100px 0;
  background: var(--color-white);
}

.css-about .company_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.css-about .company_table tr {
  border-bottom: 1px solid #e4ecf3;
}

.css-about .company_table tr:first-child {
  border-top: 1px solid #e4ecf3;
}

.css-about .company_table th {
  width: 200px;
  padding: 20px 24px 20px 0;
  color: var(--color-navy);
  font-weight: 700;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.css-about .company_table td {
  padding: 20px 0;
  color: var(--color-text-light);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ===========================
   有資格者・許可認定
=========================== */
.css-about .about_credentials {
  padding: 100px 0;
}

.css-about .credentials_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.css-about .credentials_block {
  padding: 42px 40px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: var(--shadow);
}

.css-about .credentials_block__heading {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4ecf3;
}

.css-about .credentials_block__heading .section_heading__sub {
  margin-bottom: 6px;
}

.css-about .credentials_block__heading h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-navy);
}

.css-about .credentials_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.css-about .credentials_list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.css-about .credentials_list li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue-01);
}

/* ===========================
   沿革
=========================== */
.css-about .about_history {
  padding: 100px 0;
  background: var(--color-white);
}

.css-about .history_list {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.css-about .history_list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 72px;
  width: 1px;
  background: linear-gradient(to bottom, var(--color-blue-01), var(--color-blue-02));
  opacity: 0.3;
}

.css-about .history_item {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  position: relative;
}

.css-about .history_item::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 68px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-blue-01);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-blue-01);
}

.css-about .history_item__year {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-blue-01);
  letter-spacing: 0.02em;
  padding-top: 2px;
}

.css-about .history_item__body {
  padding-top: 4px;
}

.css-about .history_item__era {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

.css-about .history_item__body p {
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* ===========================
   アクセス
=========================== */
.css-about .about_access {
  padding: 100px 0;
}

.css-about .access_inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 56px;
  margin-top: 100px;
  align-items: start;
}

.css-about .access_dl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-about .access_dl__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #e4ecf3;
}

.css-about .access_dl__row:first-child {
  border-top: 1px solid #e4ecf3;
}

.css-about .access_dl__row dt {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.css-about .access_dl__row dd {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.css-about .access_map {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  line-height: 0;
}

.css-about .access_map iframe {
  width: 100%;
  height: 400px;
  display: block;
}

/* ===========================
   CTA
=========================== */
.css-about .about_cta {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-01) 100%);
}

.css-about .about_cta_inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}

.css-about .about_cta__body .section_heading__sub {
  color: rgba(255,255,255,.7);
  margin-bottom: 12px;
}

.css-about .about_cta__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.4;
  margin-bottom: 14px;
}

.css-about .about_cta__body p {
  color: rgba(255,255,255,.8);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.css-about .about_cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.css-about .about_cta__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-white);
  line-height: 1.3;
}

.css-about .about_cta__tel_heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: 6px;
}

.css-about .about_cta__mail_btn {
  width: 100%;
  justify-content: center;
}

.css-about .about_cta__tel_num {
  font-family: "Montserrat", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.css-about .about_cta__tel_label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  opacity: 0.95;
  margin-top: 4px;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
  .css-about .about_message_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .css-about .about_message__image {
    max-height: 420px;
    overflow: hidden;
  }

  .css-about .philosophy_item {
    grid-template-columns: 80px 1fr;
    gap: 28px;
  }

  .css-about .philosophy_item__num {
    font-size: 2.8rem;
  }

  .css-about .initiative_card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px;
  }

  .css-about .initiative_card::before {
    height: 100%;
  }

  .css-about .initiative_card__image {
    height: 340px;
    border-radius: 16px;
  }

  .css-about .about_cta_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .css-about .about_cta__buttons {
    flex-direction: row;
    justify-content: flex-start;
  }

}

@media (max-width: 768px) {
  .css-about .page_hero {
    padding: 110px 0 0;
  }

  .css-about .page_hero__title {
    padding-bottom: 40px;
  }

  .css-about .about_message,
.css-about .about_philosophy,
.css-about .about_initiatives,
.css-about .about_company,
.css-about .about_credentials,
.css-about .about_history,
.css-about .about_access,
.css-about .about_cta {
    padding: 72px 0;
  }

  .css-about .access_inner {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 48px;
  }

  .css-about .access_map iframe {
    height: 300px;
  }

  .css-about .initiative_list,
.css-about .credentials_grid {
    grid-template-columns: 1fr;
  }

  .css-about .initiative_list {
    gap: 48px;
  }

  .css-about .initiative_card {
    padding: 28px 20px;
  }

  .css-about .initiative_card::after {
    height: 72px;
    width: 58%;
  }

  .css-about .initiative_card__image {
    height: 260px;
  }

  .css-about .initiative_card__image img.contain {
    padding: 18px;
  }

  .css-about .company_table th {
    width: 120px;
    font-size: 0.88rem;
  }

  .css-about .company_table td {
    font-size: 0.88rem;
  }

  .css-about .philosophy_item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 36px 0;
  }

  .css-about .philosophy_item__num_wrap {
    justify-content: flex-start;
  }

  .css-about .philosophy_item__num {
    font-size: 2.2rem;
  }

  .css-about .history_list::before {
    display: none;
  }

  .css-about .history_item {
    grid-template-columns: 80px 1fr;
    gap: 20px;
  }

  .css-about .history_item::before {
    display: none;
  }

  .css-about .history_item__year {
    font-size: 1.15rem;
  }

  .css-about .about_cta__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .css-about .about_cta__buttons .btn {
    text-align: center;
  }

  .css-about .about_cta__tel {
    align-items: center;
  }

  .css-about .about_cta__tel_num {
    font-size: 1.9rem;
  }

}

/* =====================================================
   事業内容 (service)（旧 service.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* Header override for service page */
/* ===========================
   リード
=========================== */
.css-service .service_lead {
  padding: 72px 0 56px;
  background: var(--color-white);
  text-align: center;
}

.css-service .service_lead p {
  color: var(--color-text-light);
  font-size: 1.05rem;
  line-height: 2.25;
  letter-spacing: 0.08em;
}

/* ===========================
   サービスナビ
=========================== */
.css-service .service_nav {
  background: var(--color-white);
  padding-bottom: 0;
  border-bottom: 1px solid #e4ecf3;
  position: sticky;
  top: 68px;
  z-index: 20;
}

.css-service .service_nav__list {
  display: flex;
  justify-content: center;
  gap: 0;
}

.css-service .service_nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 32px;
  position: relative;
  transition: color 0.2s;
  border-bottom: 3px solid transparent;
}

.css-service .service_nav__item:hover {
  color: var(--color-blue-01);
  border-bottom-color: var(--color-blue-01);
}

.css-service .service_nav__en {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-blue-01);
  opacity: 0.8;
}

.css-service .service_nav__ja {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
}

/* ===========================
   各サービスセクション
=========================== */
.css-service .sv_section {
  padding: 100px 0;
  background: var(--color-white);
}

.css-service .sv_inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.css-service .sv_section--alt .sv_inner {
  direction: rtl;
}

.css-service .sv_section--alt .sv_inner > * {
  direction: ltr;
}

.css-service .sv_image {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}

.css-service .sv_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.css-service .sv_body__en {
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-blue-01);
  margin-bottom: 10px;
}

.css-service .sv_body__title {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.4;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-blue-03);
}

.css-service .sv_body__desc {
  color: var(--color-text-light);
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.css-service .sv_body__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.css-service .sv_body__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.css-service .sv_body__list li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue-01);
  margin-top: 7px;
}

/* ===========================
   給排水衛生設備・電気設備（控えめ表示）
=========================== */
.css-service .sv_section--simple {
  padding: 80px 0;
}

.css-service .sv_simple_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.css-service .sv_simple_card {
  padding: 36px 34px;
  scroll-margin-top: 140px;
}

.css-service .sv_simple_card .sv_body__en {
  font-size: 0.75rem;
  margin-bottom: 8px;
}

.css-service .sv_simple_card .sv_body__title {
  font-size: 1.35rem;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom-color: #d8eaf2;
}

.css-service .sv_simple_card .sv_body__desc {
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: 20px;
}

.css-service .sv_simple_card .sv_body__list {
  gap: 8px;
}

.css-service .sv_simple_card .sv_body__list li {
  font-size: 0.9rem;
}

/* ===========================
   対応の流れ
=========================== */
.css-service .sv_flow {
  padding: 100px 0;
  background: var(--color-blue-03);
}

.css-service .flow_list {
  max-width: 700px;
  margin: 72px auto 0;
  position: relative;
}

.css-service .flow_list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 5px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-blue-01), var(--color-blue-02));
  opacity: 0.25;
}

.css-service .flow_item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(34,155,201,.12);
  position: relative;
}

.css-service .flow_item:first-child {
  border-top: 1px solid rgba(34,155,201,.12);
}

.css-service .flow_item__marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-blue-01);
  box-shadow: 0 0 0 4px rgba(34,155,201,.15);
  margin-top: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.css-service .flow_item__step {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.css-service .flow_item__content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.css-service .flow_item__content p {
  color: var(--color-text-light);
  font-size: 0.93rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ===========================
   よくある質問
=========================== */
.css-service .sv_faq {
  padding: 100px 0;
}

.css-service .faq_list {
  max-width: 800px;
  margin: 72px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-service .faq_item {
  border-bottom: 1px solid #d8eaf2;
}

.css-service .faq_item:first-child {
  border-top: 1px solid #d8eaf2;
}

.css-service .faq_item__q {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.css-service .faq_item__q::-webkit-details-marker {
  display: none;
}

.css-service .faq_item__a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 0 0 24px;
}

.css-service .faq_item__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
}

.css-service .faq_item__icon--q {
  background: var(--color-blue-01);
  color: var(--color-white);
}

.css-service .faq_item__icon--a {
  background: var(--color-blue-03);
  color: var(--color-blue-01);
}

.css-service .faq_item__q span:nth-child(2) {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.css-service .faq_item__a span:last-child {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.9;
  letter-spacing: 0.04em;
  padding-top: 6px;
}

.css-service .faq_item__toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--color-blue-01);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}

.css-service .faq_item__toggle::before,
.css-service .faq_item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--color-blue-01);
  transform: translate(-50%, -50%);
  transition: transform 0.25s;
}

.css-service .faq_item__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.css-service .faq_item.is-open .faq_item__toggle {
  background: var(--color-blue-01);
}

.css-service .faq_item.is-open .faq_item__toggle::before,
.css-service .faq_item.is-open .faq_item__toggle::after {
  background: var(--color-white);
}

.css-service .faq_item.is-open .faq_item__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.css-service .faq_item__a {
  display: none;
}

.css-service .faq_item.is-open .faq_item__a {
  display: grid;
}

/* ===========================
   CTA
=========================== */
.css-service .sv_cta {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-01) 100%);
}

.css-service .sv_cta_inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}

.css-service .sv_cta__body .section_heading__sub {
  color: rgba(255,255,255,.7);
  margin-bottom: 12px;
}

.css-service .sv_cta__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.4;
  margin-bottom: 14px;
}

.css-service .sv_cta__body p {
  color: rgba(255,255,255,.8);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.css-service .sv_cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.css-service .sv_cta__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-white);
  line-height: 1.3;
}

.css-service .sv_cta__tel_heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: 6px;
}

.css-service .sv_cta__tel_num {
  font-family: "Montserrat", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.css-service .sv_cta__tel_label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  opacity: 0.95;
  margin-top: 4px;
}

.css-service .sv_cta__mail_btn {
  width: 100%;
  justify-content: center;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
  .css-service .sv_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .css-service .sv_section--alt .sv_inner {
    direction: ltr;
  }

  .css-service .sv_cta_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .css-service .sv_cta__buttons {
    flex-direction: row;
    justify-content: flex-start;
  }

  .css-service .service_nav__item {
    padding: 14px 20px;
  }

}

@media (max-width: 768px) {
  .css-service .page_hero {
    padding: 110px 0 0;
  }

  .css-service .page_hero__title {
    padding-bottom: 40px;
  }

  .css-service .service_lead,
.css-service .sv_section,
.css-service .sv_flow,
.css-service .sv_cta {
    padding: 72px 0;
  }

  .css-service .service_lead p {
    max-width: 480px;
    padding-inline: 18px;
    box-sizing: border-box;
    text-align: left;
  }

  /* モバイルはヘッダー高58pxに合わせて追従位置を調整 */
  .css-service .service_nav {
    top: 58px;
  }

  .css-service .service_nav__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* 追従ナビ（2段）＋ヘッダーに隠れないようアンカー位置を確保 */
  .css-service .sv_section,
.css-service .sv_section--simple {
    scroll-margin-top: 150px;
  }

  .css-service .sv_simple_card {
    scroll-margin-top: 160px;
  }

  .css-service .service_nav__item {
    padding: 12px 16px;
  }

  .css-service .service_nav__en {
    display: none;
  }

  .css-service .service_nav__ja {
    font-size: 0.82rem;
  }

  .css-service .sv_simple_grid {
    grid-template-columns: 1fr;
  }

  .css-service .sv_simple_card {
    padding: 28px 20px;
  }

  .css-service .flow_list::before {
    display: none;
  }

  .css-service .flow_item {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .css-service .sv_cta__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .css-service .sv_cta__buttons .btn {
    text-align: center;
  }

  .css-service .sv_cta__tel {
    align-items: center;
  }

  .css-service .sv_cta__tel_num {
    font-size: 1.9rem;
  }

}

/* =====================================================
   施工実績一覧 (works)（旧 works.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* ===========================
   フィルター
=========================== */
.css-works .works_archive {
  padding: 80px 0 100px;
  background: var(--color-white);
}

.css-works .works_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 56px;
}

.css-works .works_filter__btn {
  padding: 8px 22px;
  border-radius: 999px;
  border: 1.5px solid #d0dde5;
  background: var(--color-white);
  color: var(--color-text-light);
  font-size: 0.88rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.css-works .works_filter__btn:hover {
  border-color: var(--color-blue-01);
  color: var(--color-blue-01);
}

.css-works .works_filter__btn.is-active {
  background: var(--color-blue-01);
  border-color: var(--color-blue-01);
  color: var(--color-white);
}

/* ===========================
   実績グリッド
=========================== */
.css-works .works_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.css-works .works_card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(14, 82, 112, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}

.css-works .works_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(14, 82, 112, 0.14);
}

.css-works .works_card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.css-works .works_card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.css-works .works_card:hover .works_card__image img {
  transform: scale(1.04);
}

.css-works .works_card__body {
  padding: 20px 22px 24px;
}

.css-works .works_card__cat {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.css-works .works_card__body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.css-works .works_card__client {
  font-size: 0.82rem;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
}

/* ===========================
   CTA
=========================== */
.css-works .works_cta {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-01) 100%);
}

.css-works .works_cta_inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}

.css-works .works_cta__body .section_heading__sub {
  color: rgba(255,255,255,.7);
  margin-bottom: 12px;
}

.css-works .works_cta__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.4;
  margin-bottom: 14px;
}

.css-works .works_cta__body p {
  color: rgba(255,255,255,.8);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.css-works .works_cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.css-works .works_cta__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-white);
  line-height: 1.3;
}

.css-works .works_cta__tel_heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: 6px;
}

.css-works .works_cta__tel_num {
  font-family: "Montserrat", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.css-works .works_cta__tel_label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  opacity: 0.95;
  margin-top: 4px;
}

.css-works .works_cta__mail_btn {
  width: 100%;
  justify-content: center;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
  .css-works .works_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .css-works .works_cta_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .css-works .works_cta__buttons {
    flex-direction: row;
    justify-content: flex-start;
  }

}

@media (max-width: 768px) {
  .css-works .page_hero {
    padding: 110px 0 0;
  }

  .css-works .page_hero__title {
    padding-bottom: 40px;
  }

  .css-works .works_archive,
.css-works .works_cta {
    padding: 72px 0;
  }

  .css-works .works_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .css-works .works_filter {
    gap: 8px;
    margin-bottom: 36px;
  }

  .css-works .works_filter__btn {
    padding: 7px 16px;
    font-size: 0.82rem;
  }

  .css-works .works_cta__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .css-works .works_cta__buttons .btn {
    text-align: center;
  }

  .css-works .works_cta__tel {
    align-items: center;
  }

  .css-works .works_cta__tel_num {
    font-size: 1.9rem;
  }

}

/* =====================================================
   施工実績詳細 (works-detail)（旧 works-detail.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* ===========================
   詳細レイアウト
=========================== */
.css-works-detail .wd_section {
  padding: 80px 0 120px;
  background: var(--color-white);
}

.css-works-detail .wd_layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: start;
}

/* ===========================
   メインコンテンツ
=========================== */
.css-works-detail a.glightbox {
  display: block;
}

.css-works-detail a.glightbox .wd_main_image,
.css-works-detail a.glightbox .wd_gallery__item {
  cursor: zoom-in;
}

.css-works-detail .wd_main_image {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 36px;
  aspect-ratio: 4 / 3;
}

.css-works-detail .wd_main_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.css-works-detail .wd_article__header {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e4ecf3;
}

.css-works-detail .wd_cat {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(34, 155, 201, 0.12);
  color: var(--color-blue-01);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.css-works-detail .wd_article__title {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.6;
  letter-spacing: 0.03em;
}

/* ===========================
   工事概要テーブル
=========================== */
.css-works-detail .wd_info {
  background: var(--color-blue-03);
  border-radius: 16px;
  padding: 32px 36px;
  margin-bottom: 40px;
}

.css-works-detail .wd_info__heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.css-works-detail .wd_info__dl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-works-detail .wd_info__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(34,155,201,.12);
}

.css-works-detail .wd_info__row:last-child {
  border-bottom: none;
}

.css-works-detail .wd_info__row dt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
}

.css-works-detail .wd_info__row dd {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* ===========================
   本文
=========================== */
.css-works-detail .wd_body {
  margin-bottom: 40px;
}

.css-works-detail .wd_body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 3px solid var(--color-blue-01);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.css-works-detail .wd_body p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 1.2em;
}

.css-works-detail .wd_body p:last-child {
  margin-bottom: 0;
}

/* ===========================
   ギャラリー
=========================== */
.css-works-detail .wd_gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 56px;
}

.css-works-detail .wd_gallery__item {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.css-works-detail .wd_gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.css-works-detail .wd_gallery__item:hover img {
  transform: scale(1.04);
}

/* ===========================
   前後ナビ
=========================== */
.css-works-detail .wd_pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid #e4ecf3;
}

.css-works-detail .wd_pager__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}

.css-works-detail .wd_pager__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.css-works-detail .wd_pager__item:hover {
  opacity: 0.7;
}

.css-works-detail .wd_pager__index {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-light);
  padding: 8px 20px;
  border: 1.5px solid #d0dde5;
  border-radius: 999px;
  letter-spacing: 0.06em;
  transition: border-color 0.2s, color 0.2s;
}

.css-works-detail .wd_pager__index:hover {
  border-color: var(--color-blue-01);
  color: var(--color-blue-01);
}

/* ===========================
   サイドバー
=========================== */
.css-works-detail .wd_sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 88px;
}

.css-works-detail .wd_sidebar__block {
  background: var(--color-blue-03);
  border-radius: 16px;
  padding: 24px 22px;
}

.css-works-detail .wd_sidebar__title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(34,155,201,.15);
}

.css-works-detail .wd_sidebar__cat_list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-works-detail .wd_sidebar__cat_list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(34,155,201,.1);
  font-size: 0.88rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.css-works-detail .wd_sidebar__cat_list li:last-child a {
  border-bottom: none;
}

.css-works-detail .wd_sidebar__cat_list li a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-blue-01);
  flex-shrink: 0;
}

.css-works-detail .wd_sidebar__cat_list li a:hover {
  color: var(--color-blue-01);
}

/* 関連実績 */
.css-works-detail .wd_sidebar__related {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-works-detail .wd_sidebar__related li a {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(34,155,201,.1);
  transition: color 0.2s;
}

.css-works-detail .wd_sidebar__related li:last-child a {
  border-bottom: none;
}

.css-works-detail .wd_sidebar__related li a:hover .wd_sidebar__related_title {
  color: var(--color-blue-01);
}

.css-works-detail .wd_sidebar__related_img {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}

.css-works-detail .wd_sidebar__related_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.css-works-detail .wd_sidebar__related_body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.css-works-detail .wd_sidebar__related_cat {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.css-works-detail .wd_sidebar__related_title {
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

/* CTA */
.css-works-detail .wd_sidebar__cta {
  display: block;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-01) 100%);
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
  transition: opacity 0.2s;
}

.css-works-detail .wd_sidebar__cta:hover {
  opacity: 0.88;
}

.css-works-detail .wd_sidebar__cta_label {
  font-size: 0.78rem;
  color: rgba(255,255,255,.75);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.css-works-detail .wd_sidebar__cta_btn {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.06em;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
  .css-works-detail .wd_layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .css-works-detail .wd_sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .css-works-detail .wd_sidebar__cta {
    grid-column: 1 / -1;
  }

}

@media (max-width: 768px) {
  .css-works-detail .page_hero {
    padding: 110px 0 0;
  }

  .css-works-detail .page_hero__title {
    padding-bottom: 40px;
  }

  .css-works-detail .wd_section {
    padding: 56px 0 80px;
  }

  .css-works-detail .wd_info {
    padding: 24px 20px;
  }

  .css-works-detail .wd_info__row {
    grid-template-columns: 80px 1fr;
  }

  .css-works-detail .wd_gallery {
    grid-template-columns: 1fr 1fr;
  }

  .css-works-detail .wd_sidebar {
    grid-template-columns: 1fr;
  }

  .css-works-detail .wd_pager {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

}

/* =====================================================
   お知らせ一覧 (news)（旧 news.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* ===========================
   お知らせアーカイブ
=========================== */
.css-news .news_archive {
  padding: 80px 0 120px;
}

/* フィルター */
.css-news .news_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}

.css-news .news_filter__btn {
  padding: 8px 22px;
  border-radius: 999px;
  border: 1.5px solid #d0dde5;
  background: var(--color-white);
  color: var(--color-text-light);
  font-size: 0.88rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.css-news .news_filter__btn:hover {
  border-color: var(--color-blue-01);
  color: var(--color-blue-01);
}

.css-news .news_filter__btn.is-active {
  background: var(--color-blue-01);
  border-color: var(--color-blue-01);
  color: var(--color-white);
}

/* リスト */
.css-news .news_list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
}

.css-news .news_item {
  display: grid;
  grid-template-columns: 120px auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  border-bottom: 1px solid #e8f0f5;
  transition: background 0.2s;
}

.css-news .news_item:last-child {
  border-bottom: none;
}

.css-news .news_item:hover {
  background: var(--color-blue-03);
}

.css-news .news_item__date {
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.css-news .news_item__cat {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.css-news .news_item__cat--news {
  background: rgba(34, 155, 201, 0.12);
  color: var(--color-blue-01);
}

.css-news .news_item__cat--works {
  background: rgba(14, 82, 112, 0.1);
  color: var(--color-navy);
}

.css-news .news_item__cat--recruit {
  background: rgba(34, 155, 201, 0.08);
  color: var(--color-text-light);
}

.css-news .news_item__title {
  font-size: 0.97rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.css-news .news_item__arrow {
  display: flex;
  align-items: center;
  color: var(--color-blue-01);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

.css-news .news_item__arrow svg {
  width: 18px;
  height: 18px;
}

.css-news .news_item:hover .news_item__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 768px) {
  .css-news .page_hero {
    padding: 110px 0 0;
  }

  .css-news .page_hero__title {
    padding-bottom: 40px;
  }

  .css-news .news_archive {
    padding: 60px 0 80px;
  }

  .css-news .news_filter {
    gap: 8px;
    margin-bottom: 28px;
  }

  .css-news .news_filter__btn {
    padding: 7px 16px;
    font-size: 0.82rem;
  }

  .css-news .news_item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 20px 20px;
  }

  .css-news .news_item__date {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.82rem;
  }

  .css-news .news_item__cat {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .css-news .news_item__title {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.92rem;
  }

  .css-news .news_item__arrow {
    display: none;
  }

}

/* =====================================================
   お知らせ詳細 (news-detail)（旧 news-detail.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* ===========================
   詳細レイアウト
=========================== */
.css-news-detail .news_detail_section {
  padding: 80px 0 120px;
}

.css-news-detail .news_detail_layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: start;
}

/* ===========================
   記事本文
=========================== */
.css-news-detail .news_article {
  background: var(--color-white);
  border-radius: 20px;
  padding: 56px;
}

.css-news-detail .news_article__header {
  padding-bottom: 32px;
  border-bottom: 1px solid #e4ecf3;
  margin-bottom: 40px;
}

.css-news-detail .news_article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.css-news-detail .news_article__date {
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

.css-news-detail .news_article__cat {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.css-news-detail .news_article__cat--news {
  background: rgba(34, 155, 201, 0.12);
  color: var(--color-blue-01);
}

.css-news-detail .news_article__cat--works {
  background: rgba(14, 82, 112, 0.1);
  color: var(--color-navy);
}

.css-news-detail .news_article__cat--recruit {
  background: rgba(34, 155, 201, 0.08);
  color: var(--color-text-light);
}

.css-news-detail .news_article__title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.6;
  letter-spacing: 0.03em;
}

/* 本文スタイル */
.css-news-detail .news_article__body {
  color: var(--color-text-light);
  line-height: 2;
  letter-spacing: 0.04em;
}

.css-news-detail .news_article__body p {
  margin-bottom: 1.4em;
}

.css-news-detail .news_article__body p:last-child {
  margin-bottom: 0;
}

.css-news-detail .news_article__body h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-navy);
  margin: 2em 0 0.8em;
  padding-left: 14px;
  border-left: 3px solid var(--color-blue-01);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.css-news-detail .news_article__body ul {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.css-news-detail .news_article__body ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.97rem;
}

.css-news-detail .news_article__body ul li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue-01);
  margin-top: 9px;
}

/* ===========================
   前後ナビ
=========================== */
.css-news-detail .news_pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #e4ecf3;
}

.css-news-detail .news_pager__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}

.css-news-detail .news_pager__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.css-news-detail .news_pager__item:hover {
  opacity: 0.7;
}

.css-news-detail .news_pager__index {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-light);
  padding: 8px 20px;
  border: 1.5px solid #d0dde5;
  border-radius: 999px;
  letter-spacing: 0.06em;
  transition: border-color 0.2s, color 0.2s;
}

.css-news-detail .news_pager__index:hover {
  border-color: var(--color-blue-01);
  color: var(--color-blue-01);
}

/* ===========================
   サイドバー
=========================== */
.css-news-detail .news_sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 88px;
}

.css-news-detail .news_sidebar__block {
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px 24px;
}

.css-news-detail .news_sidebar__title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4ecf3;
}

.css-news-detail .news_sidebar__cat_list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-news-detail .news_sidebar__cat_list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f5f8;
  font-size: 0.9rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.css-news-detail .news_sidebar__cat_list li:last-child a {
  border-bottom: none;
}

.css-news-detail .news_sidebar__cat_list li a:hover {
  color: var(--color-blue-01);
}

.css-news-detail .news_sidebar__cat_list span {
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.css-news-detail .news_sidebar__recent {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-news-detail .news_sidebar__recent li a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f5f8;
  transition: color 0.2s;
}

.css-news-detail .news_sidebar__recent li:last-child a {
  border-bottom: none;
}

.css-news-detail .news_sidebar__recent li a:hover {
  color: var(--color-blue-01);
}

.css-news-detail .news_sidebar__recent time {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

.css-news-detail .news_sidebar__recent span {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
  .css-news-detail .news_detail_layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .css-news-detail .news_sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 768px) {
  .css-news-detail .page_hero {
    padding: 110px 0 0;
  }

  .css-news-detail .page_hero__title {
    padding-bottom: 40px;
  }

  .css-news-detail .news_detail_section {
    padding: 56px 0 80px;
  }

  .css-news-detail .news_article {
    padding: 32px 24px;
  }

  .css-news-detail .news_sidebar {
    grid-template-columns: 1fr;
  }

  .css-news-detail .news_pager {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

}

/* =====================================================
   採用情報 (recruit)（旧 recruit.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* ===========================
   採用担当者メッセージ
=========================== */
.css-recruit .rc_message_section {
  padding: 80px 0 100px;
  background: var(--color-white);
}

.css-recruit .rc_message_inner {

}

.css-recruit .rc_message__eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-blue-01);
  margin-bottom: 12px;
}

.css-recruit .rc_message__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.55;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.css-recruit .rc_message__body {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 2;
  letter-spacing: 0.04em;
}

.css-recruit .rc_message__body p {
  margin-bottom: 1.2em;
}

.css-recruit .rc_message__body p:last-child {
  margin-bottom: 0;
}

.css-recruit .rc_message__sign {
  margin-top: 24px;
  font-size: 0.88rem;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
  font-weight: 700;
}

.css-recruit .rc_message__sign strong {
  display: block;
  font-size: 1.05rem;
  color: var(--color-navy);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.css-recruit .rc_message__photo {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-blue-03);
  display: flex;
  align-items: center;
  justify-content: center;
}

.css-recruit .rc_message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.css-recruit .rc_message__photo_placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-text-light);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.css-recruit .rc_message__photo_placeholder svg {
  opacity: 0.3;
}

/* ===========================
   働く環境・特徴
=========================== */
.css-recruit .rc_features_section {
  padding: 80px 0 100px;
  background: var(--color-blue-03);
}

.css-recruit .rc_features_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.css-recruit .rc_feature_card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.css-recruit .rc_feature_card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 4px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.css-recruit .rc_feature_card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.css-recruit .rc_feature_card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-blue-01) 0%, var(--color-blue-02) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.css-recruit .rc_feature_card__icon svg {
  color: var(--color-white);
}

.css-recruit .rc_feature_card__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.css-recruit .rc_feature_card__body {
  font-size: 0.88rem;
  color: var(--color-text-light);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ===========================
   募集要項
=========================== */
.css-recruit .rc_jobs_section {
  padding: 80px 0 100px;
  background: var(--color-white);
}

.css-recruit .rc_jobs_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 52px;
}

.css-recruit .rc_job_card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 32px 36px;
  border-radius: 16px;
  border: 1.5px solid #d8eaf2;
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.css-recruit .rc_job_card:hover {
  border-color: var(--color-blue-01);
  box-shadow: 0 8px 28px rgba(34,155,201,.12);
}

.css-recruit .rc_job_card__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.css-recruit .rc_job_card__badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.css-recruit .rc_job_card__badge--full {
  background: rgba(14, 82, 112, 0.1);
  color: var(--color-navy);
}

.css-recruit .rc_job_card__badge--part {
  background: rgba(34,155,201,.12);
  color: var(--color-blue-01);
}

.css-recruit .rc_job_card__badge--new {
  background: #e74c3c;
  color: var(--color-white);
}

.css-recruit .rc_job_card__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 8px;
}

.css-recruit .rc_job_card__summary {
  font-size: 0.88rem;
  color: var(--color-text-light);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.css-recruit .rc_job_card__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-blue-03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-blue-01);
  transition: background 0.2s;
}

.css-recruit .rc_job_card:hover .rc_job_card__arrow {
  background: var(--color-blue-01);
  color: var(--color-white);
}

/* ===========================
   エントリーフォーム
=========================== */
.css-recruit .rc_entry_section {
  padding: 80px 0 120px;
}

.css-recruit .rc_entry_inner {
  max-width: 760px;
  margin: 0 auto;
}

.css-recruit .rc_entry_inner .section_heading {
  text-align: center;
  margin-bottom: 52px;
}

.css-recruit .rc_entry_note {
  font-size: 0.85rem;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  margin-bottom: 36px;
  padding: 14px 18px;
  background: var(--color-white);
  border-radius: 8px;
  line-height: 1.7;
}

.css-recruit .rc_entry_note span {
  color: #c0392b;
  font-weight: 700;
  margin-right: 2px;
}

/* フォームはcontact.cssと共通スタイルを流用 */
.css-recruit .rc_form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-recruit .rc_form .form_row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid #d8eaf2;
}

.css-recruit .rc_form .form_row:first-child {
  border-top: 1px solid #d8eaf2;
}

.css-recruit .rc_form .form_row--privacy {
  display: block;
  width: fit-content;
  margin-inline: auto;
  border-bottom: none;
  padding-bottom: 0;
}

.css-recruit .rc_form .form_label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  padding-top: 10px;
  line-height: 1.5;
}

.css-recruit .rc_form .form_required {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #c0392b;
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}

.css-recruit .rc_form .form_optional {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #d0dde5;
  color: var(--color-text-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}

.css-recruit .rc_form .form_input,
.css-recruit .rc_form .form_select,
.css-recruit .rc_form .form_textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ccdbe5;
  border-radius: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  letter-spacing: 0.04em;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.css-recruit .rc_form .form_input:focus,
.css-recruit .rc_form .form_select:focus,
.css-recruit .rc_form .form_textarea:focus {
  outline: none;
  border-color: var(--color-blue-01);
  box-shadow: 0 0 0 3px rgba(34,155,201,.12);
}

.css-recruit .rc_form .form_input::placeholder,
.css-recruit .rc_form .form_textarea::placeholder {
  color: #aabbc6;
}

.css-recruit .rc_form .form_select_wrap {
  position: relative;
}

.css-recruit .rc_form .form_select_wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-light);
  pointer-events: none;
}

.css-recruit .rc_form .form_textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.8;
}

.css-recruit .rc_form .form_checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
  user-select: none;
}

.css-recruit .rc_form .form_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.css-recruit .rc_form .form_checkbox__mark {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid #ccdbe5;
  background: var(--color-white);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}

.css-recruit .rc_form .form_checkbox input:checked + .form_checkbox__mark {
  background: var(--color-blue-01);
  border-color: var(--color-blue-01);
}

.css-recruit .rc_form .form_checkbox input:checked + .form_checkbox__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 7px;
  height: 11px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(40deg);
}

.css-recruit .rc_form .form_checkbox a {
  color: var(--color-blue-01);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.css-recruit .rc_form .form_submit {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.css-recruit .rc_form .form_submit__btn {
  min-width: 240px;
  justify-content: center;
  font-size: 1rem;
  padding: 16px 40px;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
  .css-recruit .rc_features_grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {
  .css-recruit .page_hero {
    padding: 110px 0 0;
  }

  .css-recruit .page_hero__title {
    padding-bottom: 40px;
  }

  .css-recruit .rc_message_section {
    padding: 60px 0 80px;
  }

  .css-recruit .rc_message_inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .css-recruit .rc_message__photo {
    max-width: 280px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }

  .css-recruit .rc_features_section {
    padding: 60px 0 80px;
  }

  .css-recruit .rc_features_grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }

  .css-recruit .rc_jobs_section {
    padding: 60px 0 80px;
  }

  .css-recruit .rc_jobs_list {
    margin-top: 40px;
  }

  .css-recruit .rc_job_card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px;
  }

  .css-recruit .rc_job_card__arrow {
    display: none;
  }

  .css-recruit .rc_entry_section {
    padding: 60px 0 80px;
  }

  .css-recruit .rc_form .form_row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .css-recruit .rc_form .form_label {
    padding-top: 0;
  }

  .css-recruit .rc_form .form_submit__btn {
    width: 100%;
  }

}

/* =====================================================
   採用情報詳細 (recruit-detail)（旧 recruit-detail.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* ===========================
   詳細レイアウト
=========================== */
.css-recruit-detail .rd_section {
  padding: 80px 0 120px;
  background: var(--color-blue-03);
}

.css-recruit-detail .rd_layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

/* ===========================
   記事
=========================== */
.css-recruit-detail .rd_article {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-recruit-detail .rd_article__header {
  background: var(--color-white);
  border-radius: 20px;
  padding: 40px 44px;
  margin-bottom: 20px;
}

.css-recruit-detail .rd_article__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.css-recruit-detail .rd_badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.css-recruit-detail .rd_badge--full {
  background: rgba(14, 82, 112, 0.1);
  color: var(--color-navy);
}

.css-recruit-detail .rd_badge--new {
  background: #e74c3c;
  color: var(--color-white);
}

.css-recruit-detail .rd_article__title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.55;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.css-recruit-detail .rd_article__summary {
  font-size: 0.93rem;
  color: var(--color-text-light);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ===========================
   募集要項テーブル
=========================== */
.css-recruit-detail .rd_table_section {
  background: var(--color-white);
  border-radius: 20px;
  padding: 40px 44px;
  margin-bottom: 20px;
}

.css-recruit-detail .rd_table_heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.06em;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-blue-03);
}

.css-recruit-detail .rd_dl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-recruit-detail .rd_dl__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #e8f0f5;
}

.css-recruit-detail .rd_dl__row:last-child {
  border-bottom: none;
}

.css-recruit-detail .rd_dl__row dt {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.css-recruit-detail .rd_dl__row dd {
  margin-left:10px;
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ===========================
   一日のスケジュール
=========================== */
.css-recruit-detail .rd_day_section {
  background: var(--color-white);
  border-radius: 20px;
  padding: 40px 44px;
  margin-bottom: 20px;
}

.css-recruit-detail .rd_sub_heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.06em;
  margin-bottom: 28px;
  padding-left: 14px;
  border-left: 3px solid var(--color-blue-01);
  line-height: 1.5;
}

.css-recruit-detail .rd_timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 0;
}

.css-recruit-detail .rd_timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-blue-01), var(--color-blue-02));
  opacity: 0.25;
}

.css-recruit-detail .rd_timeline__item {
  display: grid;
  grid-template-columns: 24px 56px 1fr;
  gap: 0 16px;
  padding: 16px 0;
  position: relative;
}

.css-recruit-detail .rd_timeline__item::before {
  content: "";
  align-self: start;
  justify-self: center;
  margin-top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-blue-01);
  box-shadow: 0 0 0 3px rgba(34,155,201,.15);
  position: relative;
  z-index: 1;
}

.css-recruit-detail .rd_timeline__time {
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.04em;
  padding-top: 2px;
  position: relative;
}

.css-recruit-detail .rd_timeline__time::after {
  display: none;
}

.css-recruit-detail .rd_timeline__body {
  padding-bottom: 4px;
}

.css-recruit-detail .rd_timeline__body strong {
  display: block;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.css-recruit-detail .rd_timeline__body p {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* ===========================
   前後ナビ
=========================== */
.css-recruit-detail .rd_pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
}

.css-recruit-detail .rd_pager__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}

.css-recruit-detail .rd_pager__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.css-recruit-detail .rd_pager__item:hover {
  opacity: 0.7;
}

.css-recruit-detail .rd_pager__index {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-light);
  padding: 8px 20px;
  border: 1.5px solid #d0dde5;
  border-radius: 999px;
  letter-spacing: 0.06em;
  transition: border-color 0.2s, color 0.2s;
}

.css-recruit-detail .rd_pager__index:hover {
  border-color: var(--color-blue-01);
  color: var(--color-blue-01);
}

/* ===========================
   サイドバー
=========================== */
.css-recruit-detail .rd_sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
}

.css-recruit-detail .rd_sidebar__entry_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-01) 100%);
  text-decoration: none;
  transition: opacity 0.2s;
  box-shadow: 0 8px 24px rgba(34,155,201,.25);
}

.css-recruit-detail .rd_sidebar__entry_btn:hover {
  opacity: 0.88;
}

.css-recruit-detail .rd_sidebar__entry_label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.04em;
}

.css-recruit-detail .rd_sidebar__entry_btn svg {
  color: var(--color-white);
  flex-shrink: 0;
}

.css-recruit-detail .rd_sidebar__block {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px 22px;
}

.css-recruit-detail .rd_sidebar__title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8f0f5;
}

.css-recruit-detail .rd_sidebar__summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.css-recruit-detail .rd_sidebar__summary li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f5f8;
}

.css-recruit-detail .rd_sidebar__summary li:last-child {
  border-bottom: none;
}

.css-recruit-detail .rd_sidebar__summary_label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

.css-recruit-detail .rd_sidebar__summary_val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
}

.css-recruit-detail .rd_sidebar__jobs {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.css-recruit-detail .rd_sidebar__jobs li a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f5f8;
  transition: color 0.2s;
}

.css-recruit-detail .rd_sidebar__jobs li:last-child a {
  border-bottom: none;
}

.css-recruit-detail .rd_sidebar__jobs li a:hover .rd_sidebar__job_title {
  color: var(--color-blue-01);
}

.css-recruit-detail .rd_sidebar__job_badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-blue-01);
  letter-spacing: 0.04em;
}

.css-recruit-detail .rd_sidebar__job_title {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.css-recruit-detail .rd_sidebar__tel_block {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.css-recruit-detail .rd_sidebar__tel_label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

.css-recruit-detail .rd_sidebar__tel_number {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s;
}

.css-recruit-detail .rd_sidebar__tel_number:hover {
  color: var(--color-blue-01);
}

.css-recruit-detail .rd_sidebar__tel_hours {
  font-size: 0.75rem;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
  .css-recruit-detail .rd_layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .css-recruit-detail .rd_sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .css-recruit-detail .rd_sidebar__entry_btn {
    grid-column: 1 / -1;
  }

}

@media (max-width: 768px) {
  .css-recruit-detail .page_hero {
    padding: 110px 0 0;
  }

  .css-recruit-detail .page_hero__title {
    padding-bottom: 40px;
  }

  .css-recruit-detail .rd_section {
    padding: 56px 0 80px;
  }

  .css-recruit-detail .rd_article__header,
.css-recruit-detail .rd_table_section,
.css-recruit-detail .rd_day_section {
    padding: 28px 22px;
    border-radius: 14px;
  }

  .css-recruit-detail .rd_dl__row {
    grid-template-columns: 100px 1fr;
    gap: 12px;
  }

  .css-recruit-detail .rd_sidebar {
    grid-template-columns: 1fr;
  }

  .css-recruit-detail .rd_pager {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

}

/* =====================================================
   お問い合わせ (contact)（旧 contact.css）
===================================================== */
/* ===========================
   Page Hero
=========================== */
/* ===========================
   電話案内
=========================== */
.css-contact .contact_tel_bar {
  padding: 48px 0 80px;
  background: var(--color-white);
}

.css-contact .contact_tel_bar__box {
  background: linear-gradient(135deg, var(--color-blue-01) 0%, var(--color-blue-02) 100%);
  border-radius: 24px;
  padding: 52px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.css-contact .contact_tel_bar__title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.css-contact .contact_tel_bar__desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,.85);
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.css-contact .contact_tel_bar__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.css-contact .contact_tel_bar__number {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.02em;
  line-height: 1;
  transition: opacity 0.2s;
}

.css-contact .contact_tel_bar__number:hover {
  opacity: 0.85;
}

.css-contact .contact_tel_bar__hours {
  font-size: 0.8rem;
  color: rgba(255,255,255,.75);
  letter-spacing: 0.1em;
}

/* ===========================
   フォームセクション
=========================== */
.css-contact .contact_section {
  padding: 80px 0 120px;
  background: var(--color-white);
}

/* ===========================
   ページナビゲーション
=========================== */
.css-contact .contact_page_nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto 48px;
}

.css-contact .contact_page_nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 2px solid #d8eaf2;
  background: var(--color-white);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.css-contact .contact_page_nav__item:hover {
  border-color: var(--color-blue-01);
}

.css-contact .contact_page_nav__item.is-active {
  border-color: var(--color-blue-01);
  background: var(--color-blue-01);
  box-shadow: 0 8px 24px rgba(34,155,201,.25);
  pointer-events: none;
}

.css-contact .contact_page_nav__label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.css-contact .contact_page_nav__item.is-active .contact_page_nav__label {
  color: var(--color-white);
}

.css-contact .contact_page_nav__desc {
  font-size: 0.78rem;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.css-contact .contact_page_nav__item.is-active .contact_page_nav__desc {
  color: rgba(255,255,255,.8);
}

.css-contact .contact_page_nav__item:not(.is-active):hover .contact_page_nav__label {
  color: var(--color-blue-01);
}

/* ===========================
   フォームラッパー
=========================== */
.css-contact .contact_form_wrap {
  max-width: 760px;
  margin: 0 auto;
}

.css-contact .contact_form_wrap.is-hidden {
  display: none;
}

.css-contact .contact_form_wrap__note {
  font-size: 0.85rem;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  margin-bottom: 36px;
  padding: 14px 18px;
  background: var(--color-blue-03);
  border-radius: 8px;
  line-height: 1.7;
}

.css-contact .contact_form_wrap__note span {
  color: #c0392b;
  font-weight: 700;
  margin-right: 2px;
}

/* ===========================
   フォーム共通
=========================== */
.css-contact .contact_form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.css-contact .form_row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid #e8f0f5;
}

.css-contact .form_row:first-child {
  border-top: 1px solid #e8f0f5;
}

.css-contact .form_row--privacy {
  display: block;
  width: fit-content;
  margin-inline: auto;
  border-bottom: none;
  padding-bottom: 0;
}

.css-contact .form_label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  padding-top: 10px;
  line-height: 1.5;
}

.css-contact .form_required {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #c0392b;
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}

.css-contact .form_optional {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #d0dde5;
  color: var(--color-text-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}

.css-contact .form_input,
.css-contact .form_select,
.css-contact .form_textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ccdbe5;
  border-radius: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  letter-spacing: 0.04em;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.css-contact .form_input:focus,
.css-contact .form_select:focus,
.css-contact .form_textarea:focus {
  outline: none;
  border-color: var(--color-blue-01);
  box-shadow: 0 0 0 3px rgba(34,155,201,.12);
}

.css-contact .form_input::placeholder,
.css-contact .form_textarea::placeholder {
  color: #aabbc6;
}

.css-contact .form_select_wrap {
  position: relative;
}

.css-contact .form_select_wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-light);
  pointer-events: none;
}

.css-contact .form_textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.8;
}

/* チェックボックス */
.css-contact .form_checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
  user-select: none;
}

.css-contact .form_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.css-contact .form_checkbox__mark {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid #ccdbe5;
  background: var(--color-white);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}

.css-contact .form_checkbox input:checked + .form_checkbox__mark {
  background: var(--color-blue-01);
  border-color: var(--color-blue-01);
}

.css-contact .form_checkbox input:checked + .form_checkbox__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 7px;
  height: 11px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(40deg);
}

.css-contact .form_checkbox a {
  color: var(--color-blue-01);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 送信ボタン */
.css-contact .form_submit {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.css-contact .form_submit__btn {
  min-width: 240px;
  justify-content: center;
  font-size: 1rem;
  padding: 16px 40px;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 768px) {
  .css-contact .page_hero {
    padding: 110px 0 0;
  }

  .css-contact .page_hero__title {
    padding-bottom: 40px;
  }

  .css-contact .contact_section {
    padding: 60px 0 80px;
  }

  .css-contact .contact_tel_bar__box {
    padding: 40px 24px;
    border-radius: 16px;
  }

  .css-contact .contact_tel_bar__number {
    font-size: 1.8rem;
  }

  .css-contact .contact_page_nav {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 36px;
  }

  .css-contact .contact_page_nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 20px;
  }

  .css-contact .form_row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .css-contact .form_label {
    padding-top: 0;
  }

  .css-contact .form_submit__btn {
    width: 100%;
  }

}

/* =====================================================
   プライバシーポリシー (privacy)（旧 privacy.css）
===================================================== */
.css-privacy .privacy_section {
  padding: 96px 0 110px;
  background: var(--color-blue-03);
}

.css-privacy .privacy_intro,
.css-privacy .privacy_body {
  max-width: 920px;
  margin: 0 auto;
}

.css-privacy .privacy_intro {
  padding: 34px 40px;
  margin-bottom: 32px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(14, 82, 112, 0.08);
}

.css-privacy .privacy_intro p {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.04em;
}

.css-privacy .privacy_body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.css-privacy .privacy_block {
  padding: 34px 40px;
  background: var(--color-white);
  border-radius: 8px;
  border: 1px solid rgba(77, 156, 183, 0.16);
}

.css-privacy .privacy_block h2 {
  margin-bottom: 18px;
  color: var(--color-navy);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.css-privacy .privacy_block p,
.css-privacy .privacy_block li,
.css-privacy .privacy_contact dd {
  color: var(--color-text-light);
  font-size: 0.96rem;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.css-privacy .privacy_block ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-left: 1.2em;
}

.css-privacy .privacy_block li::marker {
  color: var(--color-blue-01);
}

.css-privacy .privacy_contact dl {
  margin-top: 20px;
  border-top: 1px solid rgba(77, 156, 183, 0.18);
}

.css-privacy .privacy_contact dl > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(77, 156, 183, 0.18);
}

.css-privacy .privacy_contact dt {
  color: var(--color-navy);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.css-privacy .privacy_contact a {
  color: var(--color-blue-01);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 768px) {
  .css-privacy .privacy_section {
    padding: 72px 0 84px;
  }

  .css-privacy .privacy_intro,
.css-privacy .privacy_block {
    padding: 26px 22px;
  }

  .css-privacy .privacy_contact dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

}

/* =====================================================
   WordPress出力用（ページネーション等。編集元: css/wp.css）
===================================================== */
/*
 * WordPress出力用の追加スタイル
 * ※ style.css は tools/build-css.mjs による再生成で上書きされるため、
 *   WP固有のスタイルはこのファイルに書く（再生成の対象外）。
 */

/* スクリーンリーダー用テキスト（the_posts_pagination 等が出力） */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ページネーション（お知らせ一覧） */
.pagination {
  margin-top: 48px;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-navy);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 4px 14px rgba(34, 155, 201, 0.12);
  transition: background 0.2s, color 0.2s;
}

.pagination .page-numbers:hover {
  color: var(--color-blue-01);
}

.pagination .page-numbers.current {
  background: var(--color-blue-01);
  color: var(--color-white);
}

.pagination .page-numbers.dots {
  background: transparent;
  box-shadow: none;
}

/* WP-PageNavi（プラグイン標準CSSは functions.php で無効化し、こちらを適用） */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 48px;
}

.wp-pagenavi a,
.wp-pagenavi span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-navy);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 4px 14px rgba(34, 155, 201, 0.12);
  transition: background 0.2s, color 0.2s;
}

.wp-pagenavi a:hover {
  color: var(--color-blue-01);
}

.wp-pagenavi span.current {
  background: var(--color-blue-01);
  color: var(--color-white);
}

.wp-pagenavi span.extend,
.wp-pagenavi span.pages {
  min-width: 0;
  padding: 0 6px;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-light);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

/* お知らせ・施工実績が0件のとき */
.news_empty,
.works_empty {
  padding: 40px 0;
  text-align: center;
  color: var(--color-text-light);
}

/* ===========================
   Contact Form 7
=========================== */
.wpcf7-form-control-wrap {
  display: block;
}

/* プライバシー同意（[acceptance]）を静的サイトのカスタムチェックボックス意匠で再現 */
.form_row--privacy .wpcf7-list-item {
  margin: 0;
}

.form_row--privacy .wpcf7-list-item label {
  cursor: pointer;
  user-select: none;
}

.form_row--privacy .wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form_row--privacy .wpcf7-list-item-label {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  font-size: 0.9rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

.form_row--privacy .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid #ccdbe5;
  background: var(--color-white);
  transition: border-color 0.2s, background 0.2s;
}

.form_row--privacy input:checked + .wpcf7-list-item-label::before {
  background: var(--color-blue-01);
  border-color: var(--color-blue-01);
}

.form_row--privacy input:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: calc(50% - 8px);
  width: 7px;
  height: 11px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(40deg);
}

.form_row--privacy .wpcf7-list-item-label a {
  color: var(--color-blue-01);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* バリデーションエラー（項目ごと） */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: #d94f43;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #e5a9a3;
}

/* 送信結果メッセージ */
.wpcf7 form .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
  background: var(--color-blue-03);
  color: var(--color-navy);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: #fdefee;
  color: #c0392b;
}

/* 送信中スピナー */
.wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

/* ---------------------------
   CF7 確認画面（js/cf7-confirm.js）
--------------------------- */
.cf7c-confirm {
  display: none;
}

.wpcf7-form.is-cf7c-confirm .cf7c-input {
  display: none;
}

.wpcf7-form.is-cf7c-confirm .cf7c-confirm {
  display: block;
}

.cf7c-confirm__lead {
  margin-bottom: 8px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--color-blue-03);
  color: var(--color-navy);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 確認値の表示（.form_row のグリッドに乗せる） */
.cf7c-value {
  padding-top: 2px;
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  white-space: pre-wrap;
  word-break: break-word;
}

.cf7c-value.is-empty {
  color: #9db4c0;
}

/* 確認画面のボタン（戻る／送信） */
.cf7c-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cf7c-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border: 1.5px solid #c4d6e0;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text-light);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.cf7c-back-btn:hover {
  border-color: var(--color-blue-01);
  color: var(--color-blue-01);
}

/* 確認ボタンの無効状態（必須未入力） */
.cf7c-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------------------------
   フォーム送信完了ページ（page-*-thanks.php）
--------------------------- */
.cf7c-thanks {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 40px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: var(--shadow);
  text-align: center;
}

.cf7c-thanks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--color-blue-03);
  color: var(--color-blue-01);
}

.cf7c-thanks__icon svg {
  width: 34px;
  height: 34px;
}

.cf7c-thanks__title {
  margin-bottom: 18px;
  color: var(--color-navy);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.cf7c-thanks__text {
  color: var(--color-text-light);
  font-size: 0.98rem;
  line-height: 2;
  letter-spacing: 0.04em;
}

.cf7c-thanks__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}

@media (max-width: 768px) {
  .cf7c-thanks {
    padding: 36px 20px;
    border-radius: 18px;
  }

  .cf7c-thanks__title {
    font-size: 1.25rem;
  }
}

/* 本文エディタ出力の基本整形（news_article__body 内は news-detail 側のスタイルが効く） */
.news_article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.news_article__body .aligncenter {
  display: block;
  margin-inline: auto;
}

/* 読み取り専用フィールド（応募職種＝ページタイトルを自動入力。編集元: css/wp.css） */
.wpcf7-form .form_input[readonly] {
  background: #f0f6f9;
  color: var(--color-text-light);
  cursor: default;
}

.wpcf7-form .form_input[readonly]:focus {
  outline: none;
  border-color: #d0dde5;
  box-shadow: none;
}

/* =====================================================
   ヘッダー レスポンシブ／ハンバーガーメニュー（編集元: css/wp.css）
===================================================== */
/* バー内の要素（ロゴ・ボタン類）をドロワーより前面に */
.header_inner {
  position: relative;
  z-index: 40;
}

/* ハンバーガーボタン（1024px以下で表示） */
.menu_btn {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.menu_btn__bar {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

.menu_btn__bar:nth-child(1) { top: 15px; }
.menu_btn__bar:nth-child(2) { top: 21px; }
.menu_btn__bar:nth-child(3) { top: 27px; }

.site_header.is-scrolled .menu_btn__bar,
body.is-drawer-open .menu_btn__bar {
  background: var(--color-navy);
}

body.is-drawer-open .menu_btn__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-drawer-open .menu_btn__bar:nth-child(2) { opacity: 0; }
body.is-drawer-open .menu_btn__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ドロワー本体 */
.site_drawer {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  padding: 96px 28px 40px;
  background: linear-gradient(180deg, #eefafa 0%, #fbfefe 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  overflow-y: auto;
}

body.is-drawer-open .site_drawer {
  opacity: 1;
  visibility: visible;
}

/* ドロワー表示中：背面スクロール禁止＋ロゴ/ボタン配色を白背景用に切替（is-scrolled と同等） */
body.is-drawer-open { overflow: hidden; }

/* ドロワー表示中はヘッダーの磨りガラス表現を無効化する。
   backdrop-filter が付くと fixed 配置の子孫（.site_drawer）の基準がヘッダーになり、
   ドロワーがヘッダー高（58px）に切り詰められて中身が表示できなくなるため。
   バー自体の配色は下の body.is-drawer-open 系ルールが担う。 */
body.is-drawer-open .site_header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.is-drawer-open .site_logo .logo_white { display: none; }
body.is-drawer-open .site_logo .logo_black { display: block; }

body.is-drawer-open .header_btn_recruit {
  color: var(--color-navy);
  border-color: var(--color-navy);
}

body.is-drawer-open .header_cta .btn_white {
  background: var(--color-blue-01);
  color: var(--color-white);
}

body.is-drawer-open .header_tel { color: var(--color-text); }
body.is-drawer-open .header_tel__label { color: var(--color-text-light); }

/* ドロワー内ナビ */
.site_drawer__nav ul {
  display: flex;
  flex-direction: column;
}

.site_drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 6px;
  border-bottom: 1px solid #dcebf2;
  color: var(--color-navy);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.site_drawer__nav a::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-blue-01);
  border-right: 2px solid var(--color-blue-01);
  transform: rotate(45deg);
}

.site_drawer__nav a.is-active {
  color: var(--color-blue-01);
}

/* ドロワー内CTA */
.site_drawer__cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

.site_drawer__cta .btn {
  width: 100%;
  justify-content: center;
}

.site_drawer__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  color: var(--color-navy);
  line-height: 1.3;
}

.site_drawer__tel_number {
  font-family: "Montserrat", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site_drawer__tel_number::before {
  content: "TEL ";
  font-size: 1rem;
  letter-spacing: .06em;
}

.site_drawer__tel_label {
  margin-top: 2px;
  color: var(--color-text-light);
  font-size: 0.78rem;
  letter-spacing: .12em;
}

@media (max-width: 1024px) {
  .menu_btn { display: block; }

  /* グロナビ非表示時はCTA＋ハンバーガーを右端へ寄せる */
  .header_cta { margin-left: auto; }

  /* タブレット以下は採用情報ボタン・TELをドロワーへ格納（バー幅の確保） */
  .header_btn_recruit,
  .header_tel { display: none; }
}

@media (max-width: 768px) {
  /* バーはロゴ＋ハンバーガーのみ（ボタン・電話はドロワーへ格納） */
  .header_cta { display: none; }

  /* CTA非表示時はハンバーガーを右端へ。左右余白は本文に合わせて縮小
     （ロゴ約231px＋ボタン44pxが320px端末でも収まる幅を確保） */
  .menu_btn { margin-left: auto; }

  .header_inner {
    width: calc(100% - 32px);
    height: 58px;
  }

  .site_drawer { padding: 78px 20px 32px; }

  .site_drawer__nav a { padding: 14px 4px; }
}