/* =========================================================================
   components.css — 共通UI部品（再利用できるものだけ）
   命名: c-***（component）, is-***（state）
   依存: tokens.css（変数）, base.css（初期化）, layout.css（骨組み）
   ========================================================================= */

/* ========== 見出し・テキスト ========== */
.c-heading-xl { font-size: var(--fs-3xl, 36px); line-height: 1.3; font-weight: var(--fw-bold, 700); margin: 0 0 var(--space-4, 16px); }
.c-heading-l  { font-size: var(--fs-2xl, 28px); line-height: 1.35; font-weight: var(--fw-bold, 700); margin: 0 0 var(--space-4, 16px); }
.c-heading-m  { font-size: var(--fs-xl, 22px);  line-height: 1.4;  font-weight: var(--fw-bold, 700); margin: 0 0 var(--space-3, 12px); }
.c-lead       { font-size: var(--fs-lg, 18px);  color: var(--color-muted, #666); }

.c-secHeading { 
  margin: 0 0 8px; 
  font-size: 3em; 
  line-height: 1.3; 
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #203d8a; 
}

.c-secSub { 
  margin: 0 0 24px; 
  font-size: 0.9em; 
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: #203d8a; 
}
/* ==================================================
   SP表示時セクションヘッド切り替え用
   ================================================== */
.pc-only { display: inline; }
.sp-only { display: none; }

@media (max-width: 767px){
  .pc-only { display: none; }
  .sp-only { display: inline; }
}


/* ==== Hamburger (1px / gap 10px / length 50px) ==== */
.hamburger{
  width: 60px; height: 44px; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.hamburger:focus-visible{ outline: 2px solid #203d8a; outline-offset: 3px; }

/* 3本線ブロック（高さ= 1 + 10 + 1 + 10 + 1 = 23px）を中央配置 */
.hamburger__inner{
  display: inline-flex; flex-direction: column; align-items: center; height: 23px;
}
/* 各線：長さ50px / 太さ1px / 色#203d8a */
.hamburger__bar{
  display: block; width: 50px; height: 1px; background: #203d8a; border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger__bar + .hamburger__bar{ margin-top: 10px; }
/* ≡ → × 変形 */
.hamburger.is-active .hamburger__bar:nth-child(1){ transform: translateY(11px) rotate(45deg); }
.hamburger.is-active .hamburger__bar:nth-child(2){ opacity: 0; }
.hamburger.is-active .hamburger__bar:nth-child(3){ transform: translateY(-11px) rotate(-45deg); }

/* ==== G-Nav link row ==== */
.gnav__link{
  display:flex; align-items:center; gap:24px;
  padding:18px 22px; color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.gnav__label{ font-size: clamp(18px,2.2vw,24px); letter-spacing:.06em; line-height:1.2; }
.gnav__sub{ opacity:.85; font-size:.75rem; margin-left:auto; }

.c-nav__arrow{ flex-shrink:0; color: currentColor; transition: transform .25s ease; margin-left: 12px; }
.gnav__link:hover .c-nav__arrow,
.gnav__link:focus-visible .c-nav__arrow{ transform: translateX(4px); }

/* Active */
.gnav__link.is-active{ background: rgba(255,255,255,.9); color: #203d8a; }

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .gnav, .hamburger__bar, .gnav__scrim, .gnav__list li, .c-nav__arrow{ transition: none !important; }
}

/* ========== ボタン ========== */
.c-btn {
  display: inline-flex; font-size: 0.8rem; letter-spacing: 0.05em; font-weight: 300;
  align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-primary, #203d8a);
  background: #fff; color: var(--color-primary, #203d8a);
  text-decoration: none;
  transition: background var(--dur-fast, 120ms) var(--easing, ease), color var(--dur-fast, 120ms) var(--easing, ease), border-color var(--dur-fast, 120ms) var(--easing, ease);
}
.c-btn:hover { background: var(--color-primary-weak, #e8f0ff); }
.c-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary, #203d8a) 40%, transparent);
  outline-offset: 2px;
}
.c-btn--primary { background: var(--color-primary, #203d8a); color: #fff; }
.c-btn--primary:hover { background: color-mix(in srgb, var(--color-primary, #203d8a) 90%, #fff 10%); }
.c-btn--outline { background: #fff; border-color: var(--color-border, #e5e7eb); color: var(--color-fg, #111); }
.c-btn--sm { height: 32px; padding: 0 12px; }
.c-btn--lg { height: 48px; padding: 0 20px; }
.c-btn--arrow { position: relative; }
.c-btn--arrow::after { content: "→"; display: inline-block; margin-left: 8px; transform: translateX(0); transition: transform 150ms ease; }
.c-btn--arrow:hover::after { transform: translateX(4px); }
.c-btn--link { border: 0; background: transparent; height: auto; padding: 0; line-height: 1.6; color: var(--color-primary); }
.c-btn--link:hover { background: transparent; text-decoration: underline; }

/* === Scroll-in fade === */
.js-fadein{
  opacity: 0; transform: translateY(var(--fade-translate, 16px));
  transition: opacity var(--fade-duration, .6s) ease, transform var(--fade-duration, .6s) ease;
  will-change: opacity, transform; transition-delay: var(--fade-delay, 0s);
}
.js-fadein.is-visible{ opacity: 1; transform: none; }
.js-fadein.--up    { --fade-translate: 16px; }
.js-fadein.--down  { --fade-translate: -16px; }
.js-fadein.--left  { transform: translateX(var(--fade-translate, 16px)); }
.js-fadein.--right { transform: translateX(calc(var(--fade-translate, 16px) * -1)); }
@media (prefers-reduced-motion: reduce){
  .js-fadein{ transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ========== カード ========== */
.c-card {
  background: #fff; border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  padding: var(--space-4, 16px);
  display: flex; flex-direction: column; gap: var(--space-2, 8px);
}
.c-card--soft { background: rgba(32, 61, 138, 0.05); } /* #203d8a 5% */
.c-card--iconSplit{
  display: grid; grid-template-rows: 1fr 1fr; padding: 16px;
}
.c-card--iconSplit .c-card__icon{ display:flex; align-items:center; justify-content:center; }
.c-card--iconSplit .c-card__icon img,
.c-card--iconSplit .c-card__icon svg{ width:auto; height:50px; object-fit:contain; }
.c-card--iconSplit .c-card__body{ display:flex; flex-direction:column; justify-content:center; }
.c-card--iconSplit .c-card__title { margin: 5px 0 6px; }
.c-card--iconSplit .c-card__text  { margin: 0; }
.c-card__title { font-size: 0.9em; margin: 0; color: #203d8a; font-weight: var(--fw-medium, 500); }
.c-card__text  { font-size: 0.75em; margin: 0; color: #656464; }




/* ================================================
   左カラム共通ブロック（ページ横断コンポーネント）
   - 役割ベース：イラスト中心配置 or 画像左寄せを切替
   - どのページでも再利用可
   ================================================ */

/* ベース：左寄せをデフォルトにしておく */
.c-sideBlock { text-align: left; }

/* モード切替 */
/* イラスト：スペース中央に配置 */
.c-sideBlock--illust { text-align: center; }
/* 画像：左ピタ（特別な指定は不要だが余白だけ整える） */
.c-sideBlock--image .c-sideBlock__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 0 30px; /* 左ピタなので左右autoは使わない */
}

/* イラスト画像（デフォルト150px。必要に応じて変数で上書き） */
.c-sideBlock__illust{
  --side-illust-width: 150px;
  width: var(--side-illust-width);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto 30px; /* 中央配置 auto */
}

/* 小見出し（「どんな会社？」で使ってた .home-about__q の置換） */
.c-sideBlock__q{
  margin: 0;
  font-size: 1em;
  line-height: 2.0;
  font-weight: 700;
  color: #203d8a;
  margin: 0px auto ; /* 中央配置 auto */

}

/* ラベルの上マージン（inline style 撤廃） */
.c-sideBlock .c-sectionLabel{ margin-top: 16px; }

/* オプションサイズ（必要時に付けるだけ） */
.c-sideBlock__illust.--sm { --side-illust-width: 120px; }
.c-sideBlock__illust.--lg { --side-illust-width: 200px; }

/* SP微調整（必要に応じて） */
@media (max-width: 767px){
  /* 余白だけ少しタイトに */
  .c-sideBlock--image .c-sideBlock__image{ margin: 16px 0 24px; }
  .c-sideBlock__illust{ margin: 16px auto 24px; }
}

/* =============== ロゴ専用ブロック（ABOUT US 用） =============== */
.c-logoBlock {
  max-width: 300px;
  margin: 20px auto 30px; /* 上下はお好みで調整 */
}
.c-logoBlock img {
  display: block;
  width: 100%;
  height: auto;
}

/* SPで少し小さくする（任意） */
@media (max-width: 767px){
  .c-logoBlock {
    max-width: 220px;
    margin: 16px auto 24px;
  }
}







/* ========================================================================
   SERVICEページ＆HOME after-hero 共通：グリッド固定比（PCのみ 450/550）
   ======================================================================== */
/* 内枠：1000px基準（コンテンツ担当） */
.svc-row{
  position: relative; z-index: 1;
  max-width: 1000px; margin-inline: auto; padding-inline: 0; /* PCは画像を左ピタに */
}
/* 2カラム共通（PCは 450/550 固定） */
.svc-detail__grid{
  display: grid; gap: 24px; align-items: start;
}
@media (min-width: 768px){
  .svc-detail__grid{
    grid-template-columns: 450px auto;
  }
}
@media (max-width: 767px){
  .svc-detail__grid{
    grid-template-columns: 1fr;
  }
}

/* 左カラム：ラベル/タイトル/写真 */
.svc-detail__title{
  margin: 1em 0 14px; 
  font-size: 1.5em; 
  color: #203d8a; 
  letter-spacing: 0.08em;
  line-height: 1.4; 
  display: flex; 
  align-items: center; 
  gap: 8px;
}

.svc-detail__lead{
  font-size: 0.9em;
}


/* カテゴリアイコン（左カラムのタイトル先頭用） */
.svc-detail__icon{ width: 40px; height: 40px; flex-shrink: 0; display: block; }

/* 画像のデフォルト余白（SERVICE全般） */
.svc-detail__left .c-figureFixed{ margin: 8px 0 0; }
/* PCはタイトルから約60px下に画像（#01〜#04共通） */
@media (min-width: 768px){
  .svc-detail__left .c-figureFixed{ margin-top: 60px; }
}

/* ロゴなどは切らずに見せたいので、contain用のモディファイア */
.c-figureFixed.--contain > img{ object-fit: contain; }

/* 右カラムコントロール用（右カラムはインデントを持たない（c-iconLead に一任）） */
.svc-detail__right { 
  padding-left: 0; 
}

/* SERVICE右カラムでの揃えライン（PCのみ） */
@media (min-width: 768px){
  .svc-detail__right{
    padding-left: calc(var(--lead-icon-size, 40px) + var(--lead-gap, 15px));
    position: relative;
  }
  .svc-detail__right .c-iconLead{ padding-left: 0; } /* ← 普通の上書き */
  .svc-detail__right .c-iconLead__icon{
    position: absolute;
    left: calc(-1 * (var(--lead-icon-size, 40px) + var(--lead-gap, 15px)));
    top: 0.2em;
  }
}


/* 本文インデント補助（SERVICEでは余計な左マージンを持たせない） */
.svc-detail__right .c-flowIndent { 
  margin-left: 0; 
}
/* 右カラム内の幅ラッパ（home依存を解消）*/
.svc-detail__inner {
  max-width: 550px;
  width: 100%;
}

/* 本文色・行間・他 */
.svc-detail__text{ 
  font-size: 0.9em;
  margin: .6em 0 0; 
  line-height: 1.8; 
  color: #656464; 
}

/* SERVICE：右カラムの縦位置を左タイトル（h3）に合わせる */
@media (min-width: 768px){
  /* まず左右ブロックのトップ基準をそろえる */
  .svc-detail__grid{ align-items: start; }

  /* 右カラム内ラッパを“ラベル分だけ”下げる */
  .svc-detail__right .svc-detail__inner{
    margin-top: var(--svc-right-offset, 32px); /* ← 基本32px。必要なら各セクションで上書き可 */
  }
}



/* ===============================
   after-hero 共通余白
   =============================== */
.after-hero {
  margin-top: 50px;
  margin-bottom: 100px;
}
/* ========== SERVICE：背景アミと外枠（1330px基準） ========== */

.svc-band{
  position: relative; width: min(1330px, 100%); margin: 0 auto 70px;
}
.svc-band::before{
  content: ""; position: absolute; top: -40px; left: 0;
  width: 875px; height: 500px; background: rgb(32 61 138 / 5%);
  pointer-events: none; z-index: 0; border-radius: 0;
}
.svc-band.is-right::before{ left: auto; right: 0; }

/* セクション間の余白（統一） */
.svc-band + .svc-band{ margin-top: 160px; }
.svc-band:last-of-type{ margin-bottom: 96px; }

/* SP：アミは 70vw、比率は同じ（-40pxは共通でOK） */
@media (max-width: 767px){
  .svc-band::before{
    width: 70vw; height: calc(70vw * 875 / 450);
  }
}

/* ========== STEP列挙 / 箇条書き（共通揃えライン準拠） ========== */
.c-steps{
  --steps-gap: 14px;
  --steps-label-fw: 400;
  --steps-label-color: #203d8a;
  --steps-text-color: #656464;
  --steps-divider-color: #203d8a;
  --steps-divider-style: dotted;
  --steps-divider-offset: 10px;
  margin: .75em 0 0; padding: 0; list-style: none;
}
.c-steps li{ 
  padding: calc(var(--steps-gap) * .5) 0; 
  color: var(--steps-text-color); 
  line-height: 1.75; 
}
/* 罫線は本文ブロック側から描く（アイコン側へ伸ばさない） */
.c-steps li + li{ 
  border-top: none; 
  margin-top: var(--steps-divider-offset); 
  padding-top: calc(var(--steps-gap) + var(--steps-divider-offset)); 
}
.c-steps__label{
  display: block; 
  font-weight: var(--steps-label-fw); 
  color: var(--steps-label-color);
  letter-spacing: .06em; 
  line-height: 1.4; 
  margin: 0 0 6px;
}
.c-steps__body{ 
  position: relative; 
  min-width: 0; 
}
/* 安定版：上下レイアウト用 */
.c-steps li{
  position: relative;
  padding-top: var(--steps-gap, 14px); /* 上の余白はここで作る */
  margin: 0;                           /* 余計な上下marginは持たせない */
}

/* 2件目以降の境界線＋アイテム間スペース */
.c-steps li + li{
  margin-top: var(--steps-divider-offset, 10px); /* 線と本文の間 */
}
.c-steps li + li::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;     /* 本文列いっぱいに引く（必要なら left を本文開始位置に調整） */
  top: 0;       /* アイテムの上端＝境界線ちょうど */
  border-top: 1px var(--steps-divider-style, dotted) var(--steps-divider-color, rgba(0,0,0,.12));
}

/* ラベル/本文はそのまま */
.c-steps__label{ margin: 0 0 6px; font-weight: var(--steps-label-fw, 700); color: var(--steps-label-color, #203d8a); }
.c-steps__body{ position: static; } /* 相対化不要に */


.c-steps__title{ 
  margin: 0 0 2px; 
  font-weight: 600; 
  color: #111; 
}
.c-steps__text{ 
  font-size: 0.9em;
  margin: .6em 0 0; 
  line-height: 1.8; 
  color: #656464; 
}

/* 箇条書き（●） */
.c-list{ 
  margin: 2.0em 0 0; 
  padding-left: 2.6em; 
}
.c-list li{ 
  position: relative; 
  margin: .45em 0; 
  line-height: 1.8; 
  color: #203d8a; 
}
.c-list li::marker{ 
  color: #203d8a; 
  font-size: 1.5em; /* ← markerだけちょい大きめ */
 
}

/* ガターは layout 層で一元管理する方針。
   components（c-*）では横ガターを持たせない。*/
@media (max-width: 767px){
  .svc-row{
    padding-inline: 16px;
  }
}



/* =========================================================================
   components.css — 共通UI部品（再利用できるものだけ）
   命名: c-***（component）, is-***（state）
   依存: tokens.css（変数）, base.css（初期化）, layout.css（骨組み）
   ========================================================================= */

/* ===============================
   吹き出しアイコン付きリード文（共通）
   変数:
     --lead-icon-size: アイコンサイズ（PC/SP=40px）
     --lead-gap: アイコンとテキストの間（15px）
      - min-height はアイコンサイズに追従
      - overflow: visible で飛び出しをクリップさせない 
   =============================== */
/* ===============================
   吹き出しアイコン付きリード文（共通）
   =============================== */

/* グローバルデフォルト（PC基準） */
:root {
  --lead-icon-size: 40px;
  --lead-gap: 15px;  /* PCは 40 + 15 = 55px インデント */
}

.c-iconLead{
  position: relative;
  min-height: var(--lead-icon-size);
  padding-left: calc(var(--lead-icon-size) + var(--lead-gap));
  overflow: visible;

}
.c-iconLead__icon{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lead-icon-size);
  height: var(--lead-icon-size);
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
.c-iconLead__title{
  margin: 0 0 2em;
  font-size: 1.1em;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--color-primary, #203d8a);
}
.c-iconLead__title--tight{ 
  line-height: 1.45; 
  letter-spacing: .06em; 
  margin: 0 0 2.5em; 
}
.c-iconLead--outdent {
  position: relative; /* 基準点になる */
}
/* アイコン飛び出し（PCのみ有効） */
.c-iconLead--outdent .c-iconLead__icon{
  left: calc(-1 * (var(--lead-icon-size) + var(--lead-gap))); /* = -55px */
  top: 0.2em;/* after-hero と完全一致を狙うなら 0〜0.2em で微調整 */
}

/* ===== SP時 ===== */
@media (max-width: 767px){
  .c-iconLead{
    padding-left: 16px;   /* ガター確保 */
    min-height: auto;     /* アイコンの高さに依存しない */
    --lead-icon-size: 35px;
    --lead-gap: 8px;      /* SPは少し詰める */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;             /* アイコンとテキストの縦間隔 */
  }

  .c-iconLead__icon{
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 4px;   /* テキストとアイコンの間隔 */
  }

  .c-iconLead--outdent .c-iconLead__icon{
    left: 0; /* SPでは飛び出し解除 */
  }
}
@media (min-width: 768px){
  .after-hero .c-iconLead__icon {
    top: -10px; /* TOPページ after-hero 専用の調整 */
  }
}



/* =============== Google Map iframe（共通） =============== */
/* 比率固定のラッパ。デフォは16:9。必要に応じて--map-ratioを上書き */
.c-mapEmbed{
  --map-ratio: 16/9;
  position: relative;
  width: 100%;
  aspect-ratio: var(--map-ratio);
  background: #e8eefb;           /* 読み込み中のプレースホルダ */
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

.c-mapEmbed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

/* 比率バリエーション（必要ならクラス付与で切替） */
.c-mapEmbed.--square   { --map-ratio: 1/1; }
.c-mapEmbed.--golden   { --map-ratio: 1.618/1; } /* 横長: 黄金比 */
.c-mapEmbed.--threeTwo { --map-ratio: 3/2; }

/* モバイルの視覚密度を少し上げる（任意） */
@media (max-width: 767px){
  .c-mapEmbed{ border-radius: 12px; }
}



/* ========== COMPANY: ABOUT US だけの特例 ========== */
/* 1) Hero直下の余白を確実に出す（共通を壊さない） */
.company-about.svc-band.after-hero{
  margin-top: 80px;           /* 他ページは現状維持 */
}
/* 1') アミの食い込みを止める（見た目の余白を潰さない） */
.company-about.svc-band.after-hero::before{
  top: -30px;                     /* 少し被せたいなら -20px などで微調整OK */
}

/* 2) 左カラムに見出しが来る分、右カラムの開始位置を合わせる */
.company-about .svc-detail__right .svc-detail__inner{
  margin-top: 60px;              /* 既定の var(--svc-right-offset, 32px) を打ち消し */
}

/* 3) ロゴサイズ（再掲・安全のため） */
.company-about .c-logoBlock{
  max-width: 250px;
  margin: 40px auto 30px 20px;
}
@media (max-width: 767px){
  .company-about .c-logoBlock{
    max-width: 220px;
    margin: 16px auto 24px;
  }
}

/* ==================================================
   COMPANY PAGE専用フック
   ================================================== */

.company-outline{
  /* OUTLINE専用の調整用フック */
}

.company-location{
  /* LOCATION専用の調整用フック */
}

/* ==================================================
   COMPANY / OUTLINE 右カラム（ラベル上下＋破線）
   ================================================== */
.company-outline .c-defList{ margin:0; padding:0; }

.company-outline .c-defList__term{
  margin: 0 0 6px;
  font-size: .9em;
  letter-spacing: .06em;
  color: #203d8a;
  font-weight: 400;
}

.company-outline .c-defList__desc{
  margin: 0 0 25px;                 /* 破線→次ラベルまでの間隔 25px */
  padding: 0 0 12px;                /* 本文と破線の間の余白 */
  line-height: 1.8;
  color: #656464;
  font-weight: 400;
  border-bottom: 1px dotted #203d8a;/* 破線は本文の“下”に引く */
}

/* 事業内容の番号リスト：ぶら下がり（折返しで数字桁揃え） */
.company-outline .c-defList__ol{
  margin: .2em 0 0;
  padding-left: 1.6em;              /* 数字分のインデント */
}
.company-outline .c-defList__ol > li{
  text-indent: -1.2em;              /* ハンギング（ぶら下げ） */
  padding-left: 1.2em;
  line-height: 1.8;
  margin: .25em 0 0;
}

/* 必要なら：最後の項目は線を消したい場合だけ解除
.company-outline .c-defList__desc:last-of-type{ border-bottom: none; padding-bottom: 0; }
*/

/* ==================================================
   COMPANY / LOCATION レイアウト（PC: 2カラム 450/auto）
   ================================================== */
/* アイテム間の縦リズム */
.company-location .location-grid{
  display: grid;
  gap: 80px; /* loc-item の下マージン相当 */
}

/* 各拠点行を 2カラム化（左:地図 右:テキスト） */
.company-location .loc-item{
  display: grid;
  grid-template-columns: 450px auto; /* 従来ルールに統一 */
  gap: 80px;
  align-items: start;
}

/* 右カラムの体裁：拠点名＋罫線＋住所（OUTLINE準拠のリズム） */
.company-location .loc-text > p:first-child{
  
  margin: 0 0 12px ; 
  padding-bottom: 12px;
  border-bottom: 1px dotted #203d8a;
  font-weight: 400; /* 視認性を少し上げる（必要なら400に戻せる） */
  color: var(--color-primary, #203d8a);
  letter-spacing: .02em;
}
.company-location .loc-text > p:first-child .u-textPrimary{ color: inherit ; }

.company-location .loc-text > p:nth-child(2){
  margin: 16px 0 0; /* 罫線→住所の間隔 */
}

/* SP：1カラム縦積み（既存の c-mapEmbed はそのまま効く） */
@media (max-width: 767px){
  .company-location .loc-item{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .company-location .location-grid{
    gap: 40px; /* SPはやや詰める */
  }
}


/* ==================================================
   RECRUIT 共通インナー幅（1000px内から左右70pxオフセット）
   ================================================== */
.recruit-inner{ 
  max-width: 860px; 
  margin-inline: auto; 
  margin-top: 60px;
}
.recruit-about.svc-band.after-hero{
  margin-top: 80px;  /* COMPANYと同じ余白 */
}

/* セクションのアミ向き（ABOUT＝左ピタ、REQ＝右ピタ、FAQ＝左ピタ） */
.recruit-req.svc-band::before{ left: auto; right: 0; }
.recruit-faq.svc-band::before{ left: 0; right: auto; }

/* ==================================================
   1カラム定義リスト（スタック版）
   ================================================== */
.c-defListStack{ margin: 0; padding: 0; }
.c-defListStack__term{
  margin: 0 0 6px;
  font-size: .95em;
  letter-spacing: .06em;
  color: #203d8a;
  font-weight: 500;
}
.c-defListStack__desc{
  /* 本文：下罫＋項目間マージン（OUTLINEと同リズム） */
  padding-bottom: 12px;
  margin: 0 0 44px;
  line-height: 1.8;
  color: #656464;
  font-weight: 400;
  position: relative; /* ← 擬似要素の基準にするため追加 */
}

.c-defListStack__desc::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;   /* ← ラベル頭からスタート */
  right: 0;  /* ← ボックス右端まで */
  bottom: 0;
  border-bottom: 1px dotted #203d8a;
}

/* PCのみ“本文の頭下げ 30px” */
@media (min-width: 768px){
  .c-defListStack__desc{ margin-left: 30px; }
}
/* PCだけ“頭下げ30px”してるので、線も30pxぶん左へオフセット */
@media (min-width: 768px){
  .c-defListStack__desc{ margin-left: 30px; }
  .c-defListStack__desc::after{
    left: -30px;              /* ← ラベル頭に揃う */
    right: 0;
    /* もしくは width 指定派なら：width: calc(100% + 30px); left: -30px; */
  }
}

/* CTA（末尾1個） */
.recruit-cta{ 
  margin-top: 8px;
  text-align: center; /* ← ボタンを中央揃え */

 }




/* ==================================================
   FAQ（アコーディオン）
   ================================================== */
.faq-list{ margin: 0; padding: 0; list-style: none; }
.faq-item + .faq-item{ border-top: 1px dotted #ccc; margin-top: 40px; padding-top: 40px; }

.faq-toggle{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0 0 8px;
  font: inherit;
  color: #0a0f1f;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.faq-toggle:focus-visible{ outline: 3px solid color-mix(in srgb, #203d8a 35%, transparent); outline-offset: 2px; }
.faq-toggle .faq-sign{ margin-left: auto; font-size: 1.2em; color: #203d8a; }

.faq-panel[hidden]{ display: block; height: 0; overflow: hidden; } /* JSアニメ用の土台 */

.faq-answer{
  background: rgb(32 61 138 / 5%);
  border-radius: 5px;
  max-width: 860px;
  padding: 20px 30px;
}
.faq-answer p{ margin: 0; line-height: 1.8; color: #656464; }

/* SP微調整 */
@media (max-width: 767px){
  .faq-item + .faq-item{ margin-top: 32px; padding-top: 32px; }
  .faq-answer{ padding: 16px 16px; border-radius: 5px; }
  .c-defListStack__desc{ margin-left: 0; } /* SPは左揃え */
}

/* ==================================================
   PRIVACY: 本文スタック（番号付き見出し＋本文）
   - 幅は .recruit-inner（max 860px）を流用
   - 見出しは +10px 左オフセット、見出しの直下に破線（860pxフル）
   - 本文は +170px 左オフセット
   ================================================== */

/* アミの向き（必要なら）：本文は右寄せでなければこのまま */
.policy-about.svc-band::before,
.policy-main.svc-band::before{ 
  content: none; } /* 背景不要 */

.c-defListPolicy{ margin: 0; padding: 0; }

/* 見出し（番号付き） */
.c-defListPolicy__term{
  position: relative;
  margin: 0;                /* 余計な上下marginなし */
  padding: 0 0 12px 10px;   /* ← テキストだけ +10px 下げる / 末尾は罫線との間隔 */
  font-size: 1em;
  letter-spacing: .06em;
  color: #203d8a;
  font-weight: 400;
  border-bottom: 1px dotted #203d8a; /* ← 860pxフルで通す */
}

/* 本文：+170px オフセット（PCのみ） */
.c-defListPolicy__desc{
  margin: 30px 0 44px;      /* 見出し罫線→本文：12px、項目間：44px */
  font-size: 0.9em;
  line-height: 1.9;
  color: #656464;
  font-weight: 400;
}
@media (min-width: 768px){
  .c-defListPolicy__desc{ margin-left: 170px; }
}

/* SP時：左揃え（見出し・本文） */
@media (max-width: 767px){
  .c-defListPolicy__term{ padding-left: 0; }
  .c-defListPolicy__desc{ margin-left: 0; }
}

/* ==================================================
   contactform: 

   ================================================== */

/* 1つ目（after-hero）のアミ消し */
.contact-input.svc-band::before { content: none; }

/* 念のため after 側や is-right バリエーションも一括で潰す */
.contact-form.svc-band::after,
.contact-form.svc-band.is-right::before { content: none; }

/* Contactフォーム背景アミ（1330px幅で敷く） */
.contact-form.svc-band {
  position: relative;
}

.contact-form.svc-band::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1330px, 100%);
  height: 100%;
  background: rgb(32 61 138 / 5%); /* #203d8a の5%アミ */
  z-index: 0;
}

/* recruit-inner を前面に */
.contact-form .recruit-inner {
  position: relative;
  z-index: 1;
}

/* 入力欄は真っ白。c-formの背景は透明に */
.contact-form .c-form {
  background: none;
  padding: 26px;
}
@media (max-width: 767px){
  .contact-form .c-form { padding: 18px; }
}



/* Contact - after-hero のタイトル塊の下余白を広げる */
.contact-input .c-secHead{
  margin-bottom: 50px; /* 好みに合わせて 56〜96px で調整可 */
}
.contact-input .c-iconLead{ margin-bottom: 20px; }

/* Contactフォーム専用：上マージン調整 */
.contact-form.svc-band {
  margin-top: 80px; /* デフォは160px */
}



.c-form { 
  background: rgba(32,61,138,.05); 
  border-radius: 10px; 
  padding: 26px; 
}
@media (max-width: 767px){ .c-form{ padding: 18px; } }

.c-formRow{ margin-bottom: 22px; }
.c-formRow.address,
.c-formRow.email,
.c-formRow.tel,
.c-formRow.message,
.c-formRow.policy{ margin-bottom: 28px; } /* SPでさらに広げる */
@media (max-width: 767px){
  .c-formRow{ margin-bottom: 24px; }
  .c-formRow.address,
  .c-formRow.email,
  .c-formRow.tel,
  .c-formRow.message,
  .c-formRow.policy{ margin-bottom: 32px; }
}

.c-formRow__label{
  display:block; font-size:.9em; letter-spacing:.06em; color:#203d8a; margin:0 0 8px;
}
.c-formReq{ color:#d93025; margin-left:6px; }

.c-formRow__field{ position:relative; }
.c-input, .c-textarea{
  width:100%; border:1px solid #e5e7eb; border-radius:8px;
  padding:12px 14px; font-size:16px; line-height:1.6; color:#111; background:#fff;
}
.c-input:focus, .c-textarea:focus{ outline:3px solid rgba(32,61,138,.15); border-color:#203d8a; }
.c-textarea{ min-height: 190px; line-height:1.7; }

.c-formRow__field--age{ display:flex; align-items:center; gap:10px; }
.c-formSuffix{ color:#656464; font-size:.9em; }

.c-formRow__divider{
  border-bottom:1px dotted #203d8a;
  margin-top:12px; margin-bottom:20px;
}

.c-formError{ margin:.4em 0 0; color:#d93025; font-size:.85em; }
.is-error{ border-color:#d93025 !important; }

.c-formNote{ 
  margin:1em 0 1.2em 0.5em; 
  color:#203d8a; 
  font-size:.80em; 
}

.c-radioGroup{ 
  display:flex; 
  margin: 20px;
  align-items:center; 
  gap:120px; 
  flex-wrap:wrap; 
}
.c-radio input{ transform: translateY(1px); }
@media (max-width: 767px){
  .c-radioGroup{ flex-direction:column; align-items:flex-start; gap:12px; }
}

.c-check{ display:flex; align-items:center; gap:10px; }

.c-formActions{ display:flex; justify-content:center; margin-top:10px; }



/* =============== contact-confirmページ =============== */

.contact-confirm .recruit-inner{ position:relative; z-index:1; }

/* ラベル→値 → 破線 のリズム */
.confirmList{ margin:0; padding:0; }
.confirmList dt{
  margin:0 0 6px;
  font-size:.9em; letter-spacing:.06em; color:#203d8a; font-weight:400;
}
.confirmList dd{
  margin:0 0 20px; padding:0 0 12px;
  line-height:1.8; color:#656464; border-bottom:1px dotted #203d8a;
}
/* 改行保持（本文など） */
.confirmList dd.--pre{ white-space:pre-wrap; overflow-wrap:anywhere; }

.confirmActions{
  display:flex; gap:16px; justify-content:center; margin-top:24px;
}
@media (max-width:767px){
  .confirmActions{ flex-direction:column; align-items:center; }
  .confirmActions .c-btn{ width:min(320px,100%); }
}

.recaptcha-note{
  margin:16px 0 0; font-size:.78rem; color:#666; text-align:center;
  line-height:1.6;
}

/* 背景アミ（入力と同じ1330px幅で敷くなら） */
.contact-confirm.svc-band{ position:relative; }
.contact-confirm.svc-band::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:min(1330px,100%); height:100%; background:rgb(32 61 138 / 5%);
  z-index:0;
}

/* 確認セクション：背景アミを下に延長 */
.contact-confirm.svc-band{
  position: relative;
  padding-bottom: 80px;  /* ← ここでアミの下限を伸ばす */
}

/* ボタンは通常の余白だけ確保 */
.confirmActions{
  display:flex; gap:16px; justify-content:center;
  margin-top: 28px;
}
@media (max-width:767px){
  .contact-confirm.svc-band{ padding-bottom: 36px; } /* SPは少し控えめでもOK */
  .confirmActions{ flex-direction:column; align-items:center; }
}
/* =============== contact-confirmページ（続き） =============== */
.--pre {
  white-space: pre-line; /* 自由記述欄→改行だけ反映、空白はまとめる */
  line-height: 1.6;
}





/* THANKS：セクション全体にアミ（1330px） */
.contact-thanks.svc-band{ position: relative; }
.contact-thanks.svc-band::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:min(1330px,100%); height:100%; background:rgb(32 61 138 / 5%);
  z-index:0;
}
/* アミの下端に余裕が欲しければ */
.contact-thanks.svc-band{ padding-bottom: 60px; }






/* =============== 本文インデント（PCのみ） =============== */
@media (min-width: 768px){ .c-flowIndent { margin-left: 0em; } }
@media (max-width: 767px){ .c-flowIndent { margin-left: 0; } }

/* =============== 固定サイズ画像（比率維持） =============== */
/* PCは 400x300 固定。SPは横100%・高さ300固定。 */
.c-figureFixed { 
  position: relative; width: 400px; height: 300px; 
  overflow: hidden; border-radius: 0;
}
.c-figureFixed > img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px){
  .c-figureFixed { width: 100%; height: 300px; }
}

/* =============== セクションラベル（SERVICE #01 など） =============== */
.c-sectionLabel { font-size: 1.2em; letter-spacing: .08em; color: #203d8a; font-weight: 600; margin: 0 0 8px; }

/* ========== ステート ========== */
.is-error { border-color: var(--color-danger, #d93025) !important; }

/* ========== ユーティリティ（最小限） ========== */
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.u-textPrimary { color: var(--color-primary, #203d8a) !important; } /* ←追加 */