@charset "utf-8";
/* ============================================================
   健祐会 採用サイト 上書きレイヤー
   - モデル(main.css / index.css)の後に読み込む
   - ブランド配色はCSS本体側で置換済み（#22334e / #8b0000 / #ffc107）
   - ここでは「フォント統一」と「健祐会固有の見え方」のみを扱う
   ============================================================ */

:root {
  --kg-navy: #22334e;
  --kg-crimson: #8b0000;
  --kg-crimson-l: #a01016;
  --kg-yellow: #ffc107;
  --kg-pale: #d1e7ef;
  --kg-cream: #faf6f1;
  --kg-line: #06c755;
}

/* ------- 1. フォント：コーポレートサイトと統一（ご要望4） -------
   モデルは Open Sans + ヒラギノ。健祐会は Montserrat + Noto Sans JP。 */
body,
input, select, textarea, button {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
/* 英字見出し・数字はコーポレート同様 Montserrat
   ⚠️以前は .ttl01__en / .lcl-data-num / .news01__date などを指定していたが、
     これらのクラスはHTMLに1つも存在せず無効だった（モデルの別ページ用の名前）。
     さらに `[class*="__en"]`（詳細度0,1,0）はモデルの
     `.lcl-title01 .lcl-title01__en`（0,2,0）に負けてOpen Sansのままだった。
     実在するクラス名を、詳細度で勝てる形で列挙する。 */
.lcl-title01 .lcl-title01__en,
.lcl-links .lcl-links__en,
.lcl-data .lcl-data__en,
.lcl-works .lcl-works__en,
.member01 .member01__en,
.lcl-lead .lcl-lead-strength-list__num,
#footer .footer-recruit-ttl__en,
#footer .footer-recruit-list__en,
#footer .footer-logo__txt,
.lcl-news-list__date,
.lcl-news-list__year,
.kg-figs__num,
.lcl-main-slide-ttl,
.lcl-main-slide-ttl__txt01,
.lcl-main-slide-ttl__txt02 {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important;
}

/* ------- 1-2. ヘッダーロゴ：コーポレートサイト(.kh__logo)と同じトンマナに合わせる -------
   数値はコーポレートの実CSSから採用：マーク52px/角丸8px、小11px、社名20px #8b0000 800 */
#header .header-logo { gap: 1.1rem !important; flex-direction: row !important; align-items: center !important; }
#header .header-logo__img.kg-logo__img {
  width: auto !important;
  flex: none;
}
#header .header-logo__img.kg-logo__img img {
  height: 5.2rem;
  width: auto;
  border-radius: .8rem;
  box-shadow: 0 2px 10px rgba(139, 0, 0, .18);
}
/* 「採用サイト」バッジは上段（訪問看護・居宅介護支援の健祐会）の右の空きに入れる。
   社名の横に置くと社名の幅を食い、下に積むと3段になってマーク(52px)と縦中心がズレるため。 */
#header .header-logo__txt.kg-logo__name {
  display: grid;
  grid-template-areas:
    "sub  badge"
    "main main";
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: start;
  gap: .3rem .8rem;
  line-height: 1.12;
  text-align: left !important;
}
#header .kg-logo__name small { grid-area: sub; }
#header .kg-logo__name strong { grid-area: main; }
#header .kg-logo__name em { grid-area: badge; }
#header .kg-logo__name small {
  font-size: 1.1rem;
  font-size: max(1.1rem, 10px);
  color: var(--kg-crimson);
  font-weight: 600;
  white-space: nowrap;
}
#header .kg-logo__name strong {
  font-size: 2rem;
  color: var(--kg-crimson);
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
/* 採用サイトであることの識別。コーポレートには無い要素なので濃紺の小バッジで足す */
#header .kg-logo__name em {
  align-self: center;
  justify-self: start;
  padding: .15em .6em;
  border-radius: .4rem;
  background: var(--kg-navy);
  color: #fff;
  font-size: 1.1rem;
  font-size: max(1.1rem, 10px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  white-space: nowrap;
}
/* メニュー展開中（背景が濃紺）でも読めるように白へ反転 */
.oh-open #header .kg-logo__name small,
.oh-open #header .kg-logo__name strong { color: #fff; }
.oh-open #header .kg-logo__name em { background: #fff; color: var(--kg-navy); }

/* --- FVの上に乗っている間はロゴを白抜きにする ---
   モデルは「スクロールでヘッダーを白帯にする」ルールをSP専用(@media max-width:767px)にしか
   持っていないため、PCでは全面写真にロゴが直接重なって臙脂文字が読めなかった。
   .header--scroll は約150pxで付くので、
     非スクロール時(=FVの一番上) → 白抜き
     スクロール後 → 白帯＋臙脂（コーポレートと同じ見え方）
   の2状態で成立させる（JSの追加は不要）。 */
#header:not(.header--scroll):not(.oh-open) .kg-logo__name small,
#header:not(.header--scroll):not(.oh-open) .kg-logo__name strong {
  color: #fff;
  text-shadow: 0 1px 12px rgba(10, 18, 30, .65);
}
#header:not(.header--scroll):not(.oh-open) .kg-logo__name em {
  background: #fff;
  color: var(--kg-navy);
}
/* スクロール後は白帯にする（モデルはSPのみだったので全幅へ拡張） */
#header:not(:has(.menu.menu--open)).header--scroll .header__in {
  background-color: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
}

@media screen and (max-width: 767px) {
  /* SPはCTA2つ＋ハンバーガーと同じ行に並ぶため、社名を折り返して幅を抑える
     （nowrapのままだとCTAに重なる。コーポレートSPはCTAが無いので折り返し不要だった） */
  #header .header-logo { gap: .7rem !important; }
  #header .header-logo__img.kg-logo__img img { height: 3.8rem; border-radius: .7rem; }
  /* SPはバッジを右に置くと社名の幅が足りず3行に折り返して窮屈になるため、
     バッジは社名の下段へ戻す（マークとの縦中心は揃ったまま）
     ⚠️セレクタはグローバル側と同じ詳細度(#header .header-logo__txt.kg-logo__name)にする。
       `#header .kg-logo__name` だとクラス1つで詳細度が低く、@media内でも上書きできない。 */
  /* SPも上段（前置きは非表示なのでバッジだけ）＋下段に社名 */
  #header .header-logo__txt.kg-logo__name {
    grid-template-areas:
      "badge"
      "main";
    grid-template-columns: auto;
    justify-items: start;
    gap: .2rem;
  }
  #header .kg-logo__name small { display: none; }
  /* 社名は必ず1行で出す（折り返すとロゴの高さと釣り合わない） */
  #header .kg-logo__name strong {
    font-size: 1.3rem;
    font-size: max(1.3rem, 11px);
    white-space: nowrap;
    line-height: 1.2;
    max-width: none;
  }
  #header .kg-logo__name em { font-size: .9rem; font-size: max(.9rem, 8px); padding: .1em .4em; letter-spacing: .02em; }

  /* SPヘッダーは「ロゴ＋SNS3つ＋ハンバーガー」。
     CTA（募集要項一覧／見学する・応募する）はドロワーメニュー内に置く。 */
  #header .header-btns { display: none; }
  /* SNSはヘッダーに出す。
     ⚠️後方の @media(max-width:1080px) に `.kg-sns{display:none}` があり後勝ちするので、
       セレクタを #header 付きにして詳細度を上げて確実に勝たせる */
  #header .kg-sns {
    display: flex;
    margin-left: auto;
    gap: .5rem;
  }
  /* 社名(実測177px)がロゴ枠に収まるようSNSを詰める。
     ロゴ203 + SNS98 + バーガー48 = 349 で枠375に対し余裕が無く、社名が17px切れていた */
  #header .kg-sns__link { width: 2.4rem; height: 2.4rem; border-radius: .6rem; }
  #header .kg-sns { gap: .4rem; margin-left: .6rem; }
  /* ドロワー内のSNSは重複するので隠す */
  #header .kg-sns--drawer { display: none; }
  /* ロゴが縮まないようにする（flexで潰れて社名が切れるのを防ぐ） */
  #header .header-logo { flex: none; }
  #header .kg-logo__name strong { font-size: 1.25rem; font-size: max(1.25rem, 11px); }
}

/* ============================================================
   1-3. 全面ヒーロー（.lcl-main--full）
   モデルは「左右2枚の写真＋中央キャッチ」だったが、写真1枚を全面に使う形へ。
   コーポレートは “白ベール＋臙脂キャッチ” なので、採用サイトは
   “濃紺スクリム＋白抜きキャッチ” にして、同じブランドだが別サイトとして見えるようにする。
   ============================================================ */
.lcl-main--full .lcl-main__in {
  padding: 0 !important;
  max-width: none !important;
  /* FVの表示領域は既存サイト(コーポレート .sd-12)と同じ 90vh に合わせる。
     モデルは aspect-ratio 1300/790 だったので幅によって高さが変わっていた。 */
  aspect-ratio: auto !important;
  height: 90vh !important;
  height: 90dvh !important;
}
/* 写真を枠いっぱいに */
.lcl-main--full .lcl-main-slide-gallery__item { flex-direction: row; }
.lcl-main--full .lcl-main-slide-gallery__img {
  width: 100% !important;
  height: 100% !important;
  clip-path: none !important;
}
.lcl-main--full .lcl-main-slide-gallery__img img { object-position: center 32%; }

/* ---- 動き① 写真のズームアクション（Ken Burns）----
   JSに依存せずCSSだけで動かす（JSが落ちても止まらない）。
   ※以前は 1.0→1.05 / 16s にしていたが、約2px/秒で人間には静止して見えたため、
     1.02→1.12 / 12s（約7px/秒）に上げてはっきり動くようにした。
     寄り切った状態でも実効密度は 1.08/1.12 ≒ 0.96x なので画質は実用上維持される。 */
.lcl-main--full .lcl-main-slide-gallery__img img {
  will-change: transform;
  transform-origin: 62% 38%; /* 人物側を軸にして寄る */
  animation: kg-kenburns 12s ease-in-out infinite alternate;
}
/* 寄りながら少し流す（scale＋pan）。約85px動くので明確に見える */
@keyframes kg-kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.6%, -1%, 0); }
}
/* SP用（表示幅が小さいので倍率を大きく取る）
   1.22だと実測5.2px/秒で判定基準5.0px/秒とほぼ同値になり、計測タイミングで割ることがあった。
   1.28にして余裕を持たせる（SP素材の密度1.60x / 1.28 ≒ 1.25x なので等倍以上を保つ） */
@keyframes kg-kenburns-sp {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.28) translate3d(-2.8%, -1.6%, 0); }
}

/* ---- 動き② スライドのクロスフェード ----
   現在FVは1枚なので実質使われないが、写真が増えた時にそのまま効くよう残しておく。
   スライダーJS(SimpleClassSlider)が付ける js-s3-active を使い、
   :has() でJSが動いた時だけ「非アクティブを隠す」ため、JS停止時も1枚目が出たままになる。 */
.lcl-main--full .lcl-main-slide-gallery__item {
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
}
.lcl-main--full .lcl-main-slide-gallery:has(.js-s3-active) .lcl-main-slide-gallery__item { opacity: 0; }
.lcl-main--full .lcl-main-slide-gallery .lcl-main-slide-gallery__item.js-s3-active { opacity: 1; }
/* JSが動かない場合は1枚目を最前面に */
.lcl-main--full .lcl-main-slide-gallery__item:first-child { z-index: 2; }
/* 1枚しかない時はフェードで消えないように保険をかける */
.lcl-main--full .lcl-main-slide-gallery__item:only-child { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .lcl-main--full .lcl-main-slide-gallery__img img { animation: none; }
  .lcl-main--full .lcl-main-slide-gallery__item { transition: none; }
}

/* 濃紺スクリム。左を落として文字を乗せるが、街並みが潰れない濃度に留める */
.lcl-main--full .lcl-main-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(23, 34, 52, .66) 0%, rgba(23, 34, 52, .44) 32%, rgba(23, 34, 52, .1) 58%, rgba(23, 34, 52, .02) 100%),
    linear-gradient(to top, rgba(23, 34, 52, .38) 0%, rgba(23, 34, 52, 0) 40%),
    /* 上端：白抜きロゴが写真の明るい部分でも読めるように軽く落とす */
    linear-gradient(to bottom, rgba(23, 34, 52, .34) 0%, rgba(23, 34, 52, .12) 9%, rgba(23, 34, 52, 0) 16%);
}
/* モデルの淡い背景板は全面写真では不要 */
.lcl-main--full::before { display: none; }

/* キャッチ：左寄せで大きく重ねる */
/* キャッチは左上寄せ。縦書きなので上から垂らす */
.lcl-main--full .lcl-main-slide-copy__item {
  position: absolute;
  z-index: 5;
  /* 左端から少し右へ寄せる（6.2%→11%）。人物は約x700から始まるので当たらない */
  inset: 19% auto auto 16%;
  width: auto;
  height: auto;
  margin-inline: 0;
}

/* ---- 縦書きキャッチ ----
   参考: yozora-houmon.com/recruit/ （右側に縦書きを段違いで置く作り）
   当方の写真は人物が右寄りなので、縦書きは左に置いて人物を隠さない。
   縦中の行送りは右→左なので、1行目が右に来るよう row-reverse で並べる。 */
.kg-catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
.kg-catch--v .kg-catch__lines {
  display: flex;
  flex-direction: row-reverse;   /* 1行目を右に置く（縦書きの読み順） */
  align-items: flex-start;
  gap: 1.1rem;
}
.kg-catch--v .kg-catch__line {
  position: relative;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-feature-settings: "pkna";  /* 縦組みの約物を詰める */
  color: #fff;
  /* 手紙のような手書きフォント。Yomogi＝手書きの筆跡に近い
     （Klee Oneは楷書寄りで手書き感が弱かった） */
  font-family: 'Yomogi', 'Zen Kurenaido', 'Klee One', 'Yu Mincho', serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-shadow: 0 2px 18px rgba(10, 18, 30, .6);
}
/* 行ごとに開始位置をずらして段違いにする（参考サイトと同じリズム） */
.kg-catch--v .kg-catch__line:nth-child(2) { margin-top: 3.2rem; }
.kg-catch--v .kg-catch__line:nth-child(3) { margin-top: 1.1rem; }
.kg-catch--v .kg-catch__line:nth-child(4) { margin-top: 4.2rem; }
.kg-catch--v .kg-catch__line:nth-child(5) { margin-top: 1.8rem; }
.kg-catch--v .kg-catch__line:nth-child(6) { margin-top: 5rem; }

/* 1行目は赤線を“行の全長”に沿って通す。
   短冊の外側(right:-.6rem)に置くと親のfit-content幅の外で見えなかったので、
   短冊自身の縁として引く（確実に出る・短冊と一体で見える） */
.kg-catch--v .kg-catch__line:nth-child(1) {
  border-right: .3rem solid var(--kg-crimson);
}

/* --- 白い短冊＋文字（参考: yozora-houmon.com/recruit/）---
   白枠は文字ギリギリまで詰める */
.kg-catch--tanzaku .kg-catch__line {
  /* 白枠は文字ギリギリ。左右はほぼ0、上下も最小限にする */
  padding: .2rem .05rem .25rem;
  background: #fff;
  color: #23303f;
  text-shadow: none;
  box-shadow: 0 3px 14px rgba(10, 18, 30, .16);
}
/* 1行目だけ少し強く見せる */
.kg-catch--tanzaku .kg-catch__line:nth-child(1) { font-weight: 700; }

/* 読点の代わりの「間」。
   ⚠️display:block にしてはいけない。縦書きでは block＝改行＝**新しい列**になり、
     1行が2列に割れる（実際に発生。6列のはずが9列になった）。
     縦書きの行送り方向は「上→下」なので、inline-block の height が字送りになる。 */
.kg-catch--v .kg-catch__sp {
  display: inline-block;
  width: 0;
  height: .6em;
  vertical-align: top;
}

.kg-catch { gap: 1.2rem; }
  .kg-catch--v .kg-catch__lines { gap: .6rem; }
  /* 6行×短冊がSP幅(375px)に収まるサイズ。15px×1.5+padding12+gap6 → 6行で約237px */
  .kg-catch--v .kg-catch__line { font-size: 1.2rem; line-height: 1.5; letter-spacing: .05em; }
  .kg-catch--tanzaku .kg-catch__line { padding: .15rem .05rem .2rem; }
  .kg-catch--v .kg-catch__line:nth-child(1) { border-right-width: .25rem; }
  .kg-catch--v .kg-catch__line:nth-child(2) { margin-top: 2rem; }
  .kg-catch--v .kg-catch__line:nth-child(3) { margin-top: .7rem; }
  .kg-catch--v .kg-catch__line:nth-child(4) { margin-top: 2.6rem; }
  .kg-catch--v .kg-catch__line:nth-child(5) { margin-top: 1.2rem; }
  .kg-catch--v .kg-catch__line:nth-child(6) { margin-top: 3rem; }
  .lcl-main--full .lcl-main-slide-ttl { inset: auto 5% 6% auto; }
  /* SPは左からのスクリムだと文字幅が足りないので下からに寄せる */
  .lcl-main--full .lcl-main-slide::after {
    background:
      linear-gradient(to top, rgba(23, 34, 52, .9) 0%, rgba(23, 34, 52, .66) 34%, rgba(23, 34, 52, .18) 68%, rgba(23, 34, 52, .06) 100%);
  }
}

/* --- 比較用: コーポレート寄りの “白ベール＋臙脂キャッチ” 版（.lcl-main--veil で切替） --- */
.lcl-main--veil .lcl-main-slide::after {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .74) 36%, rgba(255, 255, 255, .28) 64%, rgba(255, 255, 255, .1) 100%) !important;
}
.lcl-main--veil .kg-catch__line { color: var(--kg-crimson); text-shadow: 0 1px 10px rgba(255, 255, 255, .8); }
.lcl-main--veil .kg-catch__line:last-of-type { color: var(--kg-navy); background: none; }
.lcl-main--veil .lcl-main-slide-ttl { color: var(--kg-navy) !important; text-shadow: 0 1px 10px rgba(255, 255, 255, .8); }
.lcl-main--veil .lcl-main-dots__btn { background: rgba(34, 51, 78, .4); }
.lcl-main--veil .lcl-main-dots__btn.js-s3-active { background-color: var(--kg-crimson); }

/* ------- 1-4. ローディング／フッターのロゴもマーク型に統一 -------
   モデルは横長ロックアップ前提で width:100% を当てているため、
   正方形のマークをそのまま入れると巨大化する。高さで揃える。 */
.loading .loading__logo.kg-loading__logo { width: auto; }
.loading .loading__logo.kg-loading__logo img {
  width: auto;
  height: 11rem;
  border-radius: 1.4rem;
  box-shadow: 0 4px 18px rgba(139, 0, 0, .2);
}

#footer .footer-logo.kg-flogo { align-items: flex-start; gap: 1rem; }
#footer .footer-logo__img.kg-flogo__img { width: auto; }
#footer .footer-logo__img.kg-flogo__img img {
  width: auto;
  height: 8.4rem;
  border-radius: 1.2rem;
  box-shadow: 0 3px 14px rgba(139, 0, 0, .18);
}
.kg-flogo__name {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  line-height: 1.15;
}
.kg-flogo__name small { font-size: 1.1rem; font-size: max(1.1rem, 10px); color: var(--kg-crimson); font-weight: 600; }
.kg-flogo__name strong { font-size: 1.9rem; color: var(--kg-crimson); font-weight: 800; letter-spacing: .01em; }
.kg-faddr {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  font-size: max(1.3rem, 10px);
  line-height: 1.7;
  color: #5a6473;
}
@media screen and (max-width: 767px) {
  .loading .loading__logo.kg-loading__logo img { height: 8.4rem; }
  #footer .footer-logo.kg-flogo { align-items: center; }
  #footer .footer-logo__img.kg-flogo__img img { height: 6.6rem; }
  .kg-flogo__name { align-items: center; text-align: center; }
  .kg-flogo__name strong { font-size: 1.6rem; }
  .kg-faddr { text-align: center; font-size: 1.2rem; font-size: max(1.2rem, 10px); margin-inline: 1.6rem; }

  /* ⚠️ここから下は、死にコード削除の際に巻き込んで消してしまったSP用FV指定の復元。
     消えていた影響で、SPのFV高さが76vhでなくなり、人物の切り出し位置も、
     SP用ズーム(kg-kenburns-sp)も効かなくなっていた（ズームが1.6px/秒まで低下）。 */
  /* SPのFV高さも既存サイト(コーポレート .sd-12 SP)と同じ 76vh に合わせる */
  .lcl-main--full .lcl-main__in {
    height: 76vh !important;
    height: 76dvh !important;
  }
  /* 顔が固定ヘッダーの裏に隠れないよう、写真の上側を多めに見せて人物を下げる */
  .lcl-main--full .lcl-main-slide-gallery__img img { object-position: center 12%; }
  /* SPは表示幅が小さく、PCと同じ倍率だと移動量が足りず静止して見えるので専用キーフレーム */
  .lcl-main--full .lcl-main-slide-gallery__img img {
    animation-name: kg-kenburns-sp;
    animation-duration: 10s;
  }
  /* キャッチはSPも左上寄せ（右に少し・下に少し） */
  .lcl-main--full .lcl-main-slide-copy__item {
    inset: 17% auto auto 11%;
    width: auto;
  }
}

/* ============================================================
   1-4b. ヘッダーのCTAボタンを仕上げる
   モデルは塗りだけで、全面写真の上に置くと輪郭が甘く沈んで見えた。
   白の縁取り＋わずかな光沢＋落ち影で、写真の上でも締まって見えるようにする。
   ============================================================ */
#header .header-btn {
  position: relative;
  padding: .5rem 2rem;
  border: .15rem solid rgba(255, 255, 255, .92);
  box-shadow:
    0 .3rem 1.2rem rgba(10, 18, 30, .28),
    inset 0 .1rem 0 rgba(255, 255, 255, .28);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%);
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, color .25s ease;
}
/* 「募集要項一覧」は臙脂。矢印の位置は元のまま活かす */
#header .header-btn.header-btn--toggle { padding-right: 3.3rem; }
@media (any-hover: hover) {
  #header .header-btn:hover {
    transform: translateY(-.2rem);
    box-shadow:
      0 .6rem 1.6rem rgba(10, 18, 30, .34),
      inset 0 .1rem 0 rgba(255, 255, 255, .4);
  }
}
/* スクロール後はヘッダーが白帯になるので、白縁は不要（枠線が消えて見えるため） */
#header.header--scroll .header-btn {
  border-color: rgba(255, 255, 255, 0);
  box-shadow: 0 .2rem .8rem rgba(10, 18, 30, .16);
}
/* CTAは常に1行にする（モデルは狭い幅で2行に折り返す作りだった） */
#header .header-btn { white-space: nowrap; }

@media screen and (max-width: 1080px) {
  /* 狭い幅では文字と余白を詰めて1行を維持する */
  #header .header-btn {
    padding: .55rem 1.1rem;
    font-size: 1.15rem;
    font-size: max(1.15rem, 10.5px);
    line-height: 1.5;
    border-radius: 99.9rem;
    border-width: .12rem;
  }
  #header .header-btn.header-btn--toggle { padding-inline: 1.1rem 2.4rem; }
  #header .header-btn.header-btn--toggle::before { right: 1rem; }
  #header .header-btns { gap: .6rem; }
}
@media screen and (max-width: 767px) {
  #header .header-btn {
    padding: .5rem .8rem;
    font-size: 1.05rem;
    font-size: max(1.05rem, 10px);
    letter-spacing: 0;
  }
  #header .header-btn.header-btn--toggle { padding-inline: .8rem 2rem; }
  #header .header-btn.header-btn--toggle::before { right: .8rem; }
  #header .header-btns { gap: .4rem; }
}

/* ============================================================
   1-4c. 転職祝い金バッジ：SPは右端のサイドバー（縦帯）にする
   丸バッジ(200px)はSPだと画面を大きく占有して写真とキャッチを隠すため。
   ============================================================ */
.kg-side10 { display: none; }

@media screen and (max-width: 767px) {
  /* SPは丸バッジをやめてサイドバーに差し替える */
  .bnr-10man .bnr-10man__link { display: none !important; }
  .bnr-10man {
    inset: auto 0 auto auto !important;
    top: 50% !important;
    transform: translateY(-50%);
  }
  .kg-side10 {
    display: flex;
    flex-direction: row-reverse;   /* 縦書きの読み順（1行目が右） */
    align-items: flex-start;
    /* 固定表示なので本文に被る。幅を詰めて被る面積を最小にする（71px→約52px） */
    gap: .15rem;
    padding: .9rem .35rem 1.1rem;
    border-radius: .8rem 0 0 .8rem;
    background: linear-gradient(to bottom, var(--kg-crimson-l), var(--kg-crimson));
    color: #fff;
    box-shadow: -.2rem .3rem 1.2rem rgba(10, 18, 30, .3);
    text-decoration: none;
  }
  .kg-side10__lead,
  .kg-side10__main,
  .kg-side10__num {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    /* 英数字(HP・30)が横に寝るので、1文字ずつ立てる */
    -webkit-text-orientation: upright;
    text-orientation: upright;
    line-height: 1.3;
    letter-spacing: .06em;
    white-space: nowrap;   /* 途中で列が割れないようにする */
  }
  .kg-side10__lead {
    font-size: 1rem;
    font-size: max(1rem, 9px);
    font-weight: 700;
    color: var(--kg-yellow);
  }
  .kg-side10__main {
    font-size: 1.2rem;
    font-size: max(1.2rem, 11px);
    font-weight: 800;
  }
  .kg-side10__num {
    font-size: 1.45rem;
    font-size: max(1.45rem, 13px);
    font-weight: 800;
    color: var(--kg-yellow);
  }
  /* 閉じるボタンはサイドバーの上に重ねる */
  .bnr-10man .bnr-10man__button {
    inset: -.9rem -.2rem auto auto !important;
    width: 2rem;
    background: #fff;
  }
}

/* ============================================================
   1-4d. 理念セクション（.lcl-lead）レイアウト再設計
   ------------------------------------------------------------
   【元の破綻】
   モデルは 左カラム=電球イラスト(880px)＋楕円ファネル4層 / 右カラム=縦書きリード＋
   働く理由 で高さが釣り合っていた。ファネル図を撤去（層が重なって読めないため）した
   結果、左カラムの高さを決めるものが無くなり、右カラムだけで高さが決まって
   PC1440=494px / SP390=1197px の空白が左下に残っていた。
   【再設計】2段構成にして「左右で高さを競わせる」のをやめる。
     上段: 左=イラスト＋拠点/対応エリア（実データ・下端そろえ） 右=縦書きの理念コピー
     下段: 「健祐会で働く理由」をセクション全幅の3カード帯に展開
   ・.lcl-lead を flex-wrap にして .lcl-lead-strength を width:100% で改行させる
     （HTML側で .lcl-lead-strength を .lcl-lead 直下へ移動済み）
   ・左カラムは flex-column ＋ facts に margin-top:auto。左カラム下端＝行下端になり
     空白が構造的に発生しない（イラストとfactsの間に余白が寄る）
   ・モデルの .philosophy は ::before/::after で円錐の破線を描き、
     aspect-ratio:677/612 でファネル4層ぶんの高さを確保するので両方無効化する。
   ============================================================ */
.philosophy::before,
.philosophy::after { display: none !important; }
/* セクション全体をクリーム地に（左カラムだけ白だと帯に見えるため）。
   イラストは透過PNGなので地の上に自然に乗る */
.lcl-lead {
  background: #f2f1ef;
  display: flex;
  flex-wrap: wrap;
}
.philosophy {
  /* 高さはカラムに追従。幅いっぱいでイラストを置く */
  aspect-ratio: auto !important;
  width: 100%;
  height: auto;
}
.philosophy .philosophy__img.philosophy__img--life-01 {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
}
.philosophy .philosophy__img.philosophy__img--life-01 img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- 左カラム下の実データ（拠点／対応エリア） --- */
.lcl-lead .lcl-lead-facts {
  /* margin-top:auto でカラム下端に貼り付ける＝下の空白が構造的に0になる。
     イラストとの間隔は gap で最低6rem 確保（イラストはパララックスで最大60px
     下がるので、これ未満にすると重なって見える） */
  margin-top: auto;
  padding-top: 2.4rem;
  border-top: .2rem solid rgba(34, 51, 78, .14);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.lcl-lead .lcl-lead-facts__row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}
.lcl-lead .lcl-lead-facts__label {
  flex: 0 0 auto;
  width: 8rem;
  font-size: 1.3rem;
  font-size: max(1.3rem, 11px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--kg-crimson);
}
.lcl-lead .lcl-lead-facts__en {
  display: block;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  font-size: max(1rem, 10px);
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(34, 51, 78, .45);
}
.lcl-lead .lcl-lead-facts__val {
  /* 拠点3件は1行に収める必要がある（1文字だけ折り返すと見苦しい）ので 1.35rem */
  font-size: 1.35rem;
  font-size: max(1.35rem, 12px);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--kg-navy);
}

/* --- 「働く理由」＝全幅の3カード帯 --- */
.lcl-lead .lcl-lead-strength {
  width: 100%;
  max-width: 112.6rem;    /* 隣接セクション(.lcl-links)と同じ内容幅にそろえる */
  margin-inline: auto;
}
.lcl-lead .lcl-lead-strength-list__item {
  /* モデルは「数字を左・本文を右」の横並び。カード化するので縦積みにする */
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.4rem;
  background: #fff;
  border: .2rem solid rgba(34, 51, 78, .12);
  border-radius: 1.6rem;
  padding: 2.8rem 2rem 3rem;
}
.lcl-lead .lcl-lead-strength-list__item:nth-of-type(n + 2) { margin-top: 0; }
.lcl-lead .lcl-lead-strength-list__num {
  flex-direction: row;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem 1.1rem .6rem;
  border-radius: .6rem;
  line-height: 1;
}
.lcl-lead .lcl-lead-strength-list__num::after {
  font-size: 2.2rem;
  font-size: max(2.2rem, 16px);
  line-height: 1;
}
.lcl-lead .lcl-lead-strength-list__txtarea { width: 100%; }
.lcl-lead .lcl-lead-strength-list__em {
  display: block;
  margin-top: .4rem;
  font-size: 2.2rem;
  font-size: max(2.2rem, 18px);
  line-height: 1.35;
  color: var(--kg-crimson);
}
.lcl-lead .lcl-lead-strength-list__value { font-size: 3.4rem; }
.lcl-lead .lcl-lead-strength-list__unit { font-size: 1.8rem; }
.lcl-lead .lcl-lead-strength-list__note {
  margin-top: 1.2rem;
  color: rgba(34, 51, 78, .72);
  text-wrap: balance;   /* 「…も可能」の1文字だけ折り返しを避ける（非対応ブラウザは無視） */
  line-break: strict;   /* 「チ／ーム制」のように長音符が行頭に来る禁則違反を防ぐ */
}

/* ------------------------- PC ------------------------- */
@media screen and (min-width: 768px) {
  .lcl-lead {
    align-items: flex-start;
    justify-content: space-between;   /* 左カラムに上限幅を掛けた余りは列間のミゾにする */
  }
  /* 左カラム：モデルの負マージン(-10.5rem/-4.8rem)は3シーン構図だと端が欠けるので使わない。
     max-width は 1250px超（rem がvw連動で伸びる領域）でイラストだけ肥大して
     左カラムが右カラムより極端に高くなるのを抑えるための上限。 */
  .lcl-lead .lcl-lead__figure {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 52rem;
    margin: 0 !important;
    padding: 6.3rem 2.4rem 0 2.4rem;   /* 上は右カラム(.lcl-lead-cnt)のpadding-blockと同値＝天地そろえ */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* ⚠️イラストはGSAPのパララックスで実描画が最大約56px下にずれる（ページ先頭時）。
       7rem 未満にすると拠点ブロックの罫線に食い込んで見える */
    gap: 7rem;
  }
  .lcl-lead .lcl-lead-cnt {
    flex: 0 0 auto;
    width: 68rem;
    padding-block: 6.3rem 0;
    padding-right: 2rem;
  }
  .lcl-lead .lcl-lead-strength {
    align-items: center;
    gap: 4.4rem;
    margin-top: 8rem;
    padding: 0 2rem 9rem;
  }
  .lcl-lead .lcl-lead-strength__ttl { flex: 0 0 auto; }
  .lcl-lead .lcl-lead-strength-list {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
  }
  /* カードは1枚あたり約27rem。モデルが用意している改行(br.dn-w＝広い画面では非表示)を
     PCでも使って「未経験からはじめら／れる」のような1文字残りの折返しを防ぐ */
  .lcl-lead .lcl-lead-strength-list__em br.dn-w { display: block; }
  /* 小見出し（17字）もカード幅に1行で収める */
  .lcl-lead .lcl-lead-strength-list__txt { font-size: 1.25rem; letter-spacing: .02em; }
}

/* ------------------------- SP ------------------------- */
@media screen and (max-width: 767px) {
  /* モデルSPは figure を position:absolute(inset:59.9rem) で浮かせ、
     .lcl-lead-strength に margin-top:57.9rem を入れてファネル4層ぶんの空間を
     確保していた。図が無い今はその予約領域がまるごと空白になるので、
     絶対配置をやめて素直な縦積み（理念 → イラスト → 拠点 → 働く理由）に戻す。 */
  .lcl-lead {
    flex-direction: column;
    align-items: stretch;
  }
  .lcl-lead .lcl-lead__figure {
    position: static;
    order: 2;
    inset: auto;
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    padding: 0 2.4rem;
  }
  .lcl-lead .lcl-lead-cnt {
    order: 1;
    padding-block: 4.8rem 4rem;
  }
  .lcl-lead .lcl-lead-facts {
    /* SPは縦積みなので下端そろえは不要。ただしPCと同じくイラストのパララックス
       （実描画が最大約53px下にずれる）ぶんの逃げが要るので 7.6rem 空ける */
    margin-top: 7.6rem;
    gap: 1.8rem;
  }
  /* 幅が足りずラベルと値が2段に割れて「北／区」のような不自然な折返しが出るので、
     SPはラベルを1行にして値に横幅を全部渡す */
  .lcl-lead .lcl-lead-facts__row {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
  }
  .lcl-lead .lcl-lead-facts__label { width: auto; }
  .lcl-lead .lcl-lead-facts__en {
    display: inline;
    margin-right: .8rem;
  }
  /* 拠点3件（24字）をSP幅でも1行に収める */
  .lcl-lead .lcl-lead-facts__val {
    font-size: 1.2rem;
    font-size: max(1.2rem, 12px);
    text-wrap: balance;
  }
  .lcl-lead .lcl-lead-strength {
    order: 3;
    margin-top: 5.6rem !important;
    padding: 0 2.4rem 8rem;
    gap: 3.2rem;
  }
  .lcl-lead .lcl-lead-strength-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    width: 100%;
  }
}

/* ============================================================
   1-4e. コントラスト是正（デザインレビュー指摘）
   モデルは「黄→濃色のグラデ地に白文字」を多用しているが、黄側でコントラストが
   1.7〜2.7:1 しかなく文字が読めない（WCAG AAは4.5:1、大きい文字で3:1）。
   グラデをやめて単色にする。
   ============================================================ */
/* 先輩の声のチップ（BEGINNER / EXPERIENCED / MANAGER / CEO） */
.member01 .member01__en {
  background: var(--kg-crimson) !important;
  color: #fff !important;
}
/* 「働く理由」の REASON ラベル */
.lcl-lead .lcl-lead-strength-list__num {
  background: var(--kg-crimson) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #fff !important;
}
/* 職種チップ（OUR WORK） */
.lcl-works .lcl-works__en,
.lcl-works .lcl-works__link:nth-of-type(1) .lcl-works__en,
.lcl-works .lcl-works__link:nth-of-type(2) .lcl-works__en,
.lcl-works .lcl-works__link:nth-of-type(3) .lcl-works__en {
  background: var(--kg-navy) !important;
  color: #fff !important;
}
/* グラデ文字（背景クリップ）は黄側が読めないので単色に落とす */
.gr-orange,
.gr-green,
.gr-blue,
.gr-purple {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--kg-crimson) !important;
}
/* 見出しの純黒はパレット外。濃紺に寄せる */
.lcl-title01__ttl,
.lcl-links__txt,
.lcl-works-ttl__txt,
.member01__ttl,
.lcl-news-list__ttl { color: var(--kg-navy); }

/* ============================================================
   1-4f. フッター採用ボタンの継ぎ目を消す（デザインレビュー指摘）
   モデルは .footer-recruit-list__link を grid + gap:.5rem で組んでおり、
   文字エリアと矢印エリアの間に 5.5px（SPは3.1px）の隙間が高さ全域に走って
   「1つのボタンが2つに割れて見える」状態だった。gapを0にして1枚に見せる。
   ============================================================ */
#footer .footer-recruit-list__link { gap: 0 !important; }
/* 隙間を無くすぶん、矢印側に内側の区切り線を入れて領域は保つ */
#footer .footer-recruit-list__icoarea { border-left: 1px solid rgba(34, 51, 78, .12); }

/* ============================================================
   1-4g. 祝い金バッジ（PC）を小さくする（デザインレビュー指摘）
   固定表示の丸バッジが直径222pxあり、本文を最大166×222pxも覆っていた
   （BENEFITSカードやREASONリストが読めない）。CTAは残しつつ面積を約半分にする。
   ============================================================ */
@media screen and (min-width: 768px) {
  .bnr-10man .bnr-10man__link { width: 15rem; }
  .bnr-10man { inset: auto 2rem 2rem auto; }
}

/* ============================================================
   1-4h. データセクションの装飾人物を画面内に収める（レビュー指摘）
   モデルは left:-6.1rem / right:-6.8rem で意図的に画面外へ出していた。
   モデルの絵は「走るキャラの断片が見える」意匠だったが、当方は歩く人物1体なので
   見切れると意味不明な断片になる（実測 可視率24〜35%）。画面内に寄せる。
   ============================================================ */
.lcl-data .lcl-data-person__img:nth-of-type(1) { left: 1.5rem !important; }
.lcl-data .lcl-data-person__img:nth-of-type(2) { right: 1.5rem !important; }
/* 出現時の左右スライドも画面外へ飛ばさない量に抑える */
.lcl-data.scr-anin .lcl-data-person__img:nth-of-type(1) { translate: -12% 0; }
.lcl-data.scr-anin .lcl-data-person__img:nth-of-type(2) { translate: 12% 0; }
@media screen and (max-width: 767px) {
  .lcl-data .lcl-data-person__img:nth-of-type(1) { left: .5rem !important; width: 14rem; }
  .lcl-data .lcl-data-person__img:nth-of-type(2) { right: .5rem !important; }
}

/* ------- 1-5. グロナビのSNSアイコン -------
   コーポレートサイト(.kh__sns-row / .kh__sns)と同じ見せ方：36px・角丸9px・gap10px */
.kg-sns {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 1.4rem;
  flex: none;
}
.kg-sns__link {
  display: block;
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: .9rem;
  /* ⚠️ここに overflow:hidden を置くと、SPで当たり判定を広げる ::after ごと切り取られ、
     指の当たる範囲が30x30pxのままになる（実測で発覚）。角丸はimg側で処理する。 */
  transition: transform .2s ease, box-shadow .2s ease;
}
.kg-sns__link img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}
@media (any-hover: hover) {
  .kg-sns__link:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
}
/* FVの上（ヘッダー透明時）は白い縁を足して写真に埋もれないようにする */
#header:not(.header--scroll):not(.oh-open) .kg-sns__link {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 10px rgba(10, 18, 30, .35);
}
/* ドロワー内のSNS（コーポレートのSP時と同じ42px） */
.kg-sns--drawer {
  display: none;
  margin: 1.4rem 0 .4rem;
  padding: 0 .8rem;
  gap: 1.4rem;
}
.kg-sns--drawer .kg-sns__link { width: 4.2rem; height: 4.2rem; box-shadow: none !important; }

@media screen and (max-width: 1080px) {
  /* タブレット域はCTA2つ＋ハンバーガーで幅が足りないため、ヘッダーのSNSは隠してドロワーに出す。
     SP(767px以下)はCTAをドロワーへ移すので、逆にSNSをヘッダーへ出す（下の@mediaで上書き） */
  .kg-sns { display: none; }
  .kg-sns--drawer { display: flex; }
}

/* ============================================================
   1-6. データセクションの数字（スクロールでカウントアップ）
   ============================================================ */
.kg-figs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3.2rem 5.6rem;
  margin-top: 4.4rem;
}
.kg-figs__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.kg-figs__num {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  color: var(--kg-crimson);
  font-weight: 800;
  line-height: 1;
}
.kg-figs__num em { font-size: 5.6rem; font-style: normal; letter-spacing: -.01em; }
.kg-figs__num i { font-size: 2rem; font-style: normal; color: var(--kg-navy); }
.kg-figs__label {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--kg-navy);
}
@media screen and (max-width: 767px) {
  .kg-figs { gap: 2.4rem 3.2rem; margin-top: 3.2rem; }
  .kg-figs__num em { font-size: 3.8rem; }
  .kg-figs__num i { font-size: 1.5rem; }
  .kg-figs__label { font-size: 1.2rem; font-size: max(1.2rem, 10px); }
}

/* ============================================================
   1-7. スクロール演出の下ごしらえ
   - 初期状態を隠すのは html.kg-anim（JSが動いた時だけ付く）配下に限定する
     → JSが落ちても全部見えるので崩れない
   ============================================================ */
/* ⚠️チラつき対策：JSは load 後に gsap.set で初期状態を作るため、
   それまでの約830msはキャッチが「全表示 → 消える → 再表示」と点滅していた。
   CSS側で先に初期状態(非表示)を作っておく。
   html.kg-anim はJSが動いた時だけ付くので、JS停止時は素の表示のまま崩れない。 */
html.kg-anim .kg-catch__line {
  will-change: transform, opacity, clip-path;
  opacity: 0;
}
/* ※.lcl-links__img は 11. の作り直しでパララックスをやめたため外した。
   代わりに中のimgだけがscaleする（js/kenyukai-anim.js）。 */
html.kg-anim .lcl-links__img img,
html.kg-anim .lcl-data-person__img,
html.kg-anim .philosophy__img--life-01,
html.kg-anim .footer-slide__img,
html.kg-anim .lcl-works__bg,
html.kg-anim .lcl-data__bg { will-change: transform; }
/* パララックスで動かす要素は親からはみ出さないように */
.lcl-data, .lcl-works, .lcl-news, #footer { overflow: hidden; }

/* ============================================================
   2-a. 募集職種（JOBS）
   レビュー指摘「募集職種がTOP本文に一度も出てこない」への対応。
   ============================================================ */
.kg-jobs__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  margin-top: 4.8rem;
}
.kg-jobs__link {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  height: 100%;
  padding: 3.2rem 2.8rem;
  border: .2rem solid rgba(34, 51, 78, .12);
  border-radius: 1.6rem;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kg-jobs__name {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--kg-crimson);
  line-height: 1.4;
}
.kg-jobs__meta {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kg-navy);
  line-height: 1.7;
}
.kg-jobs__note {
  font-size: 1.4rem;
  color: #5a6473;
  line-height: 1.8;
}
.kg-jobs__area {
  margin-top: 3.2rem;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #5a6473;
  text-align: center;
}
@media (any-hover: hover) {
  .kg-jobs__link:hover {
    transform: translateY(-.4rem);
    border-color: var(--kg-crimson);
    box-shadow: 0 1rem 2.4rem rgba(10, 18, 30, .12);
  }
}
@media screen and (max-width: 767px) {
  .kg-jobs__list { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 3.2rem; }
  .kg-jobs__link { padding: 2.4rem 2rem; border-radius: 1.2rem; }
  .kg-jobs__name { font-size: 1.8rem; }
  .kg-jobs__meta { font-size: 1.3rem; }
  .kg-jobs__note { font-size: 1.25rem; }
  .kg-jobs__area { margin-top: 2.4rem; font-size: 1.25rem; text-align: left; margin-inline: 1.6rem; }
}

/* ============================================================
   2-b. 転職祝い金の内訳（A案＝公式HPからの直接応募を優遇）
   レビュー指摘「バッジだけでは条件も内訳も伝わらない」への対応。
   金額・条件は募集要項の実データ。
   ============================================================ */
.kg-bonus__in {
  padding: 5.6rem 4rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, #fffaf0 0%, #fff5e0 100%);
  border: .2rem solid rgba(255, 193, 7, .5);
  text-align: center;
}
.kg-bonus__lead {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--kg-navy);
  line-height: 1.8;
}
.kg-bonus__ttl {
  margin-top: .8rem;
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--kg-crimson);
  line-height: 1.4;
}
.kg-bonus__ttl em {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-size: 6rem;
  letter-spacing: .01em;
}
.kg-bonus__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 3.2rem;
}
.kg-bonus__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-width: 24rem;
  padding: 2.4rem 2rem;
  border-radius: 1.2rem;
  background: #fff;
}
.kg-bonus__label { font-size: 1.5rem; font-weight: 700; color: var(--kg-navy); }
.kg-bonus__num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--kg-crimson);
  line-height: 1.2;
}
.kg-bonus__num em {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-size: 4.4rem;
}
.kg-bonus__sub { font-size: 1.3rem; color: #5a6473; }
.kg-bonus__note { margin-top: 2rem; font-size: 1.3rem; color: #5a6473; }
.kg-bonus__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.8rem;
  min-height: 5.6rem;
  padding: 1.2rem 4.8rem;
  border-radius: 99.9rem;
  background: var(--kg-crimson);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 .4rem 1.4rem rgba(139, 0, 0, .28);
  transition: transform .2s ease, background-color .25s ease;
}
@media (any-hover: hover) {
  .kg-bonus__cta:hover { transform: translateY(-.2rem); background: var(--kg-crimson-l); }
}
@media screen and (max-width: 767px) {
  .kg-bonus__in { padding: 3.2rem 1.6rem; border-radius: 1.4rem; margin-inline: 1.6rem; }
  .kg-bonus__lead { font-size: 1.3rem; }
  .kg-bonus__ttl { font-size: 2.2rem; }
  .kg-bonus__ttl em { font-size: 4rem; }
  .kg-bonus__list { gap: 1.2rem; margin-top: 2.4rem; }
  .kg-bonus__item { min-width: 0; width: 100%; padding: 1.6rem 1.2rem; }
  .kg-bonus__num em { font-size: 3.2rem; }
  .kg-bonus__cta { width: 100%; padding: 1.2rem 2rem; font-size: 1.5rem; }
}

/* ============================================================
   2-c. 未経験／経験者の入口（ご要望②）
   ============================================================ */
/* ⚠️2026-08-14修正: 以前は flex＋`.kg-voicenav__link{flex:1 1 0}` だったが、
   実際のフレックス子要素は `<li>.kg-voicenav__item` なので指定が効かず、
   文字数の違いで2つのボックスの幅がバラバラだった（ユーザー指摘・SP実機）。
   グリッドの等幅カラムにして、文字数に関係なく同じ大きさにする。 */
.kg-voicenav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 3.2rem;
  max-width: 56rem;
}
.kg-voicenav__item { display: flex; }
.kg-voicenav__link {
  flex: 1 1 auto;              /* li いっぱいに広げて、2つを同じ大きさにする */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .2rem;
  min-height: 5.6rem;
  padding: 1.2rem 1.6rem;
  border-radius: 1rem;
  border: .2rem solid var(--kg-navy);
  background: #fff;
  color: var(--kg-navy);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.kg-voicenav__label { font-size: 1.5rem; font-weight: 800; line-height: 1.5; }
.kg-voicenav__en {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .14em;
  opacity: .7;
}
.kg-voicenav__link--beginner { border-color: var(--kg-crimson); color: var(--kg-crimson); }
@media (any-hover: hover) {
  .kg-voicenav__link:hover { transform: translateY(-.2rem); background: var(--kg-navy); color: #fff; }
  .kg-voicenav__link--beginner:hover { background: var(--kg-crimson); color: #fff; }
}
@media screen and (max-width: 767px) {
  .kg-voicenav { margin-top: 2.4rem; gap: .8rem; margin-inline: 1.6rem; max-width: none; }
  .kg-voicenav__link { padding: 1.1rem .8rem; min-height: 5.2rem; }
  .kg-voicenav__label { font-size: 1.25rem; }
  .kg-voicenav__en { font-size: 1rem; }
}

/* ============================================================
   2-d. タップ領域を44px以上にする（レビュー指摘）
   ============================================================ */
@media screen and (max-width: 767px) {
  #header .kg-sns__link { width: 2.8rem; height: 2.8rem; padding: 0; }
  /* アイコン自体は小さいまま、当たり判定だけ広げる */
  #header .kg-sns__link::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 4.4rem;
    height: 4.4rem;
  }
  #header .kg-sns__link { position: relative; }
  #footer .footer-links__link,
  #footer .footer-recruit-list__link,
  .txtlink01 { min-height: 4.4rem; display: flex; align-items: center; }
  .lcl-news-list__link { min-height: 4.4rem; }

  /* 以下は「見た目は変えず当たり判定だけ広げる」。実タップ座標での実測で未達だったもの。 */
  /* ヘッダーの社名リンク（実測 高さ41px） */
  #header .header-logo { min-height: 4.4rem; display: flex; align-items: center; }
  /* 祝い金バッジの閉じるボタン（実測 32x34px）。丸ボタンの見た目は32pxのまま */
  .bnr-10man .bnr-10man__button { width: 3.2rem; height: 3.2rem; position: relative; }
  .bnr-10man .bnr-10man__button::after {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    translate: -50% -50%; width: 4.4rem; height: 4.4rem;
  }
  /* フッターのSNSアイコン（実測 30x24px） */
  #footer .kg-sns__link,
  #footer .footer-sns__link { position: relative; }
  #footer .kg-sns__link::after,
  #footer .footer-sns__link::after {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    translate: -50% -50%; width: 4.4rem; height: 4.4rem;
  }
  /* スライダーのページ送りドット（実測 8x8px）。ドットの見た目は変えない。
     ⚠️当たり判定を44px角にすると隣のドットの判定が中心に被さり、かえって1x1pxになる（実測で発覚）。
     幅は間隔と同じ3.2remに留め、高さだけ4.4remにする。 */
  /* ⚠️モデル側が `.splide-assets .splide__pagination{gap:1rem}` (詳細度0,2,0) で指定しているため、
     `.splide__pagination` (0,1,0) だと負ける。同等以上の詳細度で書く。 */
  .splide-assets .splide__pagination,
  .splide__pagination { gap: 3.2rem; }
  .splide__pagination__page { position: relative; }
  .splide__pagination__page::after {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    translate: -50% -50%; width: 3.2rem; height: 4.4rem;
  }
}

/* ------- 2. 素材プレースホルダの注記（たたき台であることを画面上で明示） ------- */
.kg-note {
  display: block;
  margin: 1.2rem auto 0;
  padding: .5em 1em;
  max-width: 96rem;
  border-left: 4px solid var(--kg-yellow);
  background: #fffbe8;
  color: #6b4a00;
  font-size: 1.3rem;
  line-height: 1.7;
}
.kg-note--center { text-align: center; border-left: 0; border-top: 4px solid var(--kg-yellow); }
.kg-note b { color: var(--kg-crimson); }

/* ------- 3. 先輩の声：未経験／経験者の2タブ（ご要望2） ------- */
.kg-tabs {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 3.2rem;
}
.kg-tabs__btn {
  flex: 0 0 auto;
  padding: .9em 2em;
  border: 2px solid var(--kg-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--kg-navy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.kg-tabs__btn[aria-selected="true"] {
  border-color: var(--kg-crimson);
  background: var(--kg-crimson);
  color: #fff;
}
@media (any-hover: hover) {
  .kg-tabs__btn:hover { border-color: var(--kg-crimson); color: var(--kg-crimson); }
  .kg-tabs__btn[aria-selected="true"]:hover { color: #fff; }
}
/* JSが死んでいても全パネルが見える（js-onゲート） */
.kg-tabpanel[hidden] { display: none; }
html:not(.js-on) .kg-tabpanel[hidden] { display: block !important; }
html:not(.js-on) .kg-tabs { display: none; }

@media screen and (max-width: 767px) {
  .kg-tabs { gap: .8rem; }
  .kg-tabs__btn { padding: .8em 1.4em; font-size: 1.3rem; }
  .kg-note { font-size: 1.2rem; margin-inline: 1.6rem; }
}

/* ------- 4. モデル由来の不要要素を消す ------- */
/* 健祐会は健康経営優良法人・ISO9001の認証を持たないため掲示しない（虚偽表示防止） */
.footer-certification,
.footer-certification__item { display: none !important; }

/* ------- 5. 図版のなじませ ------- */
/* 自作の楕円図はモデル画像より輪郭が硬いので、わずかに馴染ませる */
.philosophy__img--purpose img,
.philosophy__img--mission img,
.philosophy__img--vision img,
.philosophy__img--value img { image-rendering: auto; }

/* ============================================================
   6. 2026-08-14 の修正
   ============================================================ */

/* ------- 6-1. 装飾人物イラストの「頭切れ」を根治（SP390で3回指摘） -------
   原因: .lcl-data-person__img:nth-of-type(2) が top:0 に置かれ、
        パララックス対策で入れた .lcl-data / .lcl-data__link の overflow:hidden が
        イラストの上端（＝男性の頭）を刈り取っていた。
        さらに出現アニメの rotate が上角を持ち上げ、切れ量がスクロール位置で増える。
   対策: SPでは枠の上端から必ず離す。回転で持ち上がる分（半幅×sin8°≒11px）も見込む。 */
@media screen and (max-width: 767px) {
  .lcl-data .lcl-data-person__img:nth-of-type(2) {
    top: 3.4rem !important;   /* 0 だと枠上端に接して頭が切れる */
  }
  /* 左下の女性が数字「120日」に重なっていたので、数字の外へ逃がす */
  .lcl-data .lcl-data-person__img:nth-of-type(1) {
    top: auto !important;
    bottom: 1.2rem !important;
    left: .2rem !important;
    width: 11rem;
    opacity: .9;
  }
}
/* 回転で上角が持ち上がっても切れないよう、装飾人物の回転は使わない
   （JS側でも rotate を0にしているが、CSSでも保険をかける） */
.lcl-data-person__img { transform-origin: 50% 100%; }

/* ------- 6-2. ヒーローの縦書きキャッチを少しだけ大きく -------
   「小さくするが味」の方針は維持したまま、可読性のために一段だけ上げる。
   PC 1.9rem → 2.15rem ／ SP 1.2rem → 1.35rem */
.kg-catch--v .kg-catch__line { font-size: 2.15rem; }
@media screen and (max-width: 767px) {
  .kg-catch--v .kg-catch__line { font-size: 1.35rem; }
}

/* ------- 6-3. ローディング：ロゴが動いている風にする -------
   CSSのみ。JSが止まってもローディング自体はJS側で解除されるので、ここは見た目だけ。 */
.loading .loading__logo.kg-loading__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.loading .loading__logo.kg-loading__logo img {
  position: relative;
  z-index: 2;
  animation: kg-load-mark 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* マークの後ろで広がる臙脂のリング（鼓動のように2つずらして出す） */
.loading .loading__logo.kg-loading__logo::before,
.loading .loading__logo.kg-loading__logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11rem;
  height: 11rem;
  margin: -5.5rem 0 0 -5.5rem;
  border: .2rem solid var(--kg-crimson);
  border-radius: 1.8rem;
  opacity: 0;
  z-index: 1;
  animation: kg-load-ring 1.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
.loading .loading__logo.kg-loading__logo::after { animation-delay: .6s; }
@keyframes kg-load-mark {
  0%   { transform: scale(1)    rotate(0deg); }
  40%  { transform: scale(1.07) rotate(-3deg); }
  70%  { transform: scale(.98)  rotate(2deg); }
  100% { transform: scale(1)    rotate(0deg); }
}
@keyframes kg-load-ring {
  0%   { transform: scale(.9);  opacity: .55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loading .loading__logo.kg-loading__logo img,
  .loading .loading__logo.kg-loading__logo::before,
  .loading .loading__logo.kg-loading__logo::after { animation: none; }
}

/* ============================================================
   11. グローバルナビ（PC）— コーポレートの .kh__has-sub / .kh__sub と同じ
   ユーザー指示「コーポレートみたいに、ナビに合わせたらアンカー表示させて」
   構成は指示書の5ページ。TOPはロゴが担う。
   ============================================================ */
.kg-gnav { display: none; }

/* ⚠️1200px未満はロゴ＋ナビ＋CTA＋SNS＋バーガーが1行に収まらず、
   ナビの日本語が繋がって見える（1081pxで実測 -20〜-32px）。
   1200px以上でだけ横並びナビを出し、それ未満はドロワーに任せる。 */
@media screen and (min-width: 1200px) {
  /* ⚠️モデルの .header-logo は枠が実際の文字幅より狭く、社名がはみ出して描かれる。
     そのままナビを置くとロゴの文字にナビが重なる（実測: logo.right=348 だが
     社名は約400pxまで伸びていた）。ロゴを内容ぴったりの幅にしてから並べる。 */
  #header .header-logo {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
  }
  #header .header__in { gap: 0; }

  .kg-gnav {
    display: flex;
    align-items: center;
    /* ⚠️矢印(caret)を絶対配置で右外に出すと、隣の項目に食い込んで
       日本語ラベルが繋がって見える（実際に発生）。矢印ぶんの余白を
       リンク側に持たせたうえで、項目間もしっかり空ける。 */
    gap: 3.2rem;
    margin-left: 3.2rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  .kg-gnav__item { position: relative; display: flex; align-items: center; }
  .kg-gnav__link {
    display: flex;
    flex-direction: column;
    align-items: center;      /* 英字ラベルを日本語の中央にそろえる（ユーザー指摘） */
    text-align: center;
    gap: .2rem;
    line-height: 1.15;
    text-decoration: none;
    color: #2a2a2a;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color .2s;
  }
  .kg-gnav__link small {
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--kg-crimson);
  }
  .kg-gnav__link:hover { color: var(--kg-crimson); }

  /* 開閉の合図（コーポレートサイトと同じデザインにそろえる：ラベルの右横ではなく下に3段目として表示） */
  .kg-gnav__caret {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-right: .2rem solid var(--kg-crimson);
    border-bottom: .2rem solid var(--kg-crimson);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
  }
  .kg-gnav__item--sub:hover .kg-gnav__caret { transform: rotate(-135deg) translateY(2px); }

  /* ホバーで開くアンカーの一覧 */
  .kg-gnav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    min-width: 24rem;
    background: #fff;
    border-radius: 1.4rem;
    box-shadow: 0 2rem 4.6rem rgba(20, 35, 60, .17);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 70;
  }
  /* マウスが隙間を通るときに閉じないよう、上に見えない橋を渡す */
  .kg-gnav__sub::before {
    content: "";
    position: absolute;
    top: -1.6rem;
    left: 0;
    right: 0;
    height: 1.8rem;
  }
  .kg-gnav__item--sub:hover .kg-gnav__sub,
  .kg-gnav__item--sub:focus-within .kg-gnav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(.4rem);
  }
  .kg-gnav__sub a {
    display: block;
    padding: 1.1rem 1.5rem;
    border-radius: .9rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2a2a2a;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, color .18s;
  }
  .kg-gnav__sub a:first-child {
    color: var(--kg-crimson);
    border-bottom: .1rem solid #f1eaea;
    border-radius: .9rem .9rem 0 0;
    margin-bottom: .3rem;
  }
  .kg-gnav__sub a:hover { background: #f8efef; color: var(--kg-crimson); }

  /* ナビが入ったぶん、CTAとSNSを詰める */
  #header .header-btns { margin-left: 2.4rem; gap: 1rem; flex: none; }
  #header .kg-sns { margin-left: 1.6rem; flex: none; }
  /* ⚠️モデルの .header-btn は固定幅で、文字が枠からはみ出してSNSに被る（実測-15px）。
     内容にあわせた幅にして、文字が枠内に収まるようにする。 */
  #header .header-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 1rem 1.8rem;
    white-space: nowrap;
    font-size: 1.35rem;
  }
  /* SNSはヘッダーでは少し小さくして場所を空ける（ドロワー・フッターでは通常サイズ） */
  #header .kg-sns { gap: .6rem; }
  #header .kg-sns__link { width: 3.2rem; height: 3.2rem; }
  #header .kg-sns__link img { width: 100%; height: 100%; }
}

/* ============================================================
   10. 2026-08-14 夜の追加指摘
   ============================================================ */

/* ------- 10-1. 3カードのイラストを全部中央そろえに（ユーザー指示）-------
   モデルは枠内で左寄せ・カードごとに位置がばらついていた。 */
.lcl-links .lcl-links__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* モデルがカードによって白い円の下敷きを入れているので消す（カード2だけ丸が出ていた） */
  background: none !important;
}
.lcl-links .lcl-links__img::before,
.lcl-links .lcl-links__img::after { content: none !important; }
.lcl-links .lcl-links__img img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ------- 10-3. SNS埋め込みが出なかったときのフォールバックカード -------
   TikTokは同じ環境から何度も読み込むと overload-protect を返して中身を出さない。
   その素のエラー文をそのまま見せず、ブランドのカードに差し替える。 */
.kg-snsfallback {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
  padding: 2.4rem;
  text-decoration: none;
  background: #fff;
  border: .1rem solid rgba(139, 0, 0, .14);
  border-radius: 1.2rem;
}
.kg-snsfallback__ico img { width: 4.8rem; height: 4.8rem; border-radius: 1.2rem; display: block; }
.kg-snsfallback__txt { display: flex; flex-direction: column; gap: .3rem; line-height: 1.3; }
.kg-snsfallback__txt strong { font-size: 1.6rem; font-weight: 800; color: #222; }
.kg-snsfallback__txt small { font-size: 1.2rem; color: var(--kg-crimson); font-weight: 600; }
.kg-snsfallback__go {
  margin-left: auto;
  padding: .9rem 1.8rem;
  border-radius: 99.9rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  background: var(--kg-crimson);
  white-space: nowrap;
}
.kg-snsfallback--tt .kg-snsfallback__go { background: #111; }

/* ------- 10-5. 代表メッセージ要約（指示書のTOP必須項目）------- */
.kg-ceo__in {
  display: flex;
  align-items: flex-start;
  gap: 5.6rem;
  margin-top: 4.8rem;
}
.kg-ceo__photo {
  flex: 0 0 38rem;
  max-width: 38rem;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 1.4rem 3.4rem rgba(80, 20, 20, .12);
}
.kg-ceo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kg-ceo__body { flex: 1 1 auto; min-width: 0; }
.kg-ceo__lead {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--kg-navy);
  margin-bottom: 2.4rem;
}
.kg-ceo__txt {
  font-size: 1.5rem;
  line-height: 2.1;
  color: #3d4657;
}
.kg-ceo__name {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: 2.8rem;
  line-height: 1.3;
}
.kg-ceo__name small { font-size: 1.2rem; color: #6b5252; }
.kg-ceo__name strong { font-size: 2rem; font-weight: 800; color: var(--kg-crimson); }
.kg-ceo__name span { font-size: 1.2rem; color: #6b5252; }
.kg-ceo__more {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2.4rem;
  padding: 1.3rem 2.6rem;
  border-radius: 99.9rem;
  background: var(--kg-crimson);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}
.kg-ceo__more:hover { opacity: .88; }
@media screen and (max-width: 767px) {
  .kg-ceo__in { flex-direction: column; gap: 2.8rem; margin-top: 3.2rem; }
  .kg-ceo__photo { flex: none; max-width: 100%; width: 100%; }
  .kg-ceo__lead { font-size: 2.1rem; }
  .kg-ceo__txt { font-size: 1.4rem; line-height: 2; }
}

/* ------- 10-7. 見学CTA（指示書「応募より手前の導線（見学・相談）」）-------
   指示書の指摘：現状エントリーフォームしかなく、いきなり本応募しか選べない。
   競合4社は全員この中間ステップを持っている。
   置き場所は「気持ちが動いた直後」の3箇所：
     ① 代表メッセージの直後（共感した直後）
     ② 先輩の声の直後（働くイメージが湧いた直後）
     ③ FAQの直後（不安が解けた直後＝応募前の最後の後押し）
   主役は「見学」。応募は主役にしない。 */
.kg-visit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
  flex-wrap: wrap;
  margin-top: 4.8rem;
  padding: 3.2rem 4rem;
  border-radius: 1.6rem;
  background: linear-gradient(180deg, #fff, #fdf4f4);
  border: .1rem solid rgba(139, 0, 0, .14);
}
.kg-visit--accent {
  background: linear-gradient(135deg, #a01016, #6f0000);
  border-color: transparent;
}
.kg-visit__ttl {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--kg-navy);
  line-height: 1.5;
}
.kg-visit__note {
  margin-top: .8rem;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #4a4a55;
}
.kg-visit--accent .kg-visit__ttl { color: #fff; }
.kg-visit--accent .kg-visit__note { color: rgba(255, 255, 255, .88); }
.kg-visit__btns { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.kg-visit__main {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 5.6rem;
  padding: 0 3.2rem;
  border-radius: 99.9rem;
  background: linear-gradient(180deg, var(--kg-crimson-l), var(--kg-crimson));
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 .6rem 1.8rem rgba(139, 0, 0, .28);
  white-space: nowrap;
}
.kg-visit--accent .kg-visit__main { background: #fff; color: var(--kg-crimson); }
.kg-visit__main:hover { transform: translateY(-.2rem); }
.kg-visit__sub {
  display: inline-flex;
  align-items: center;
  min-height: 5.6rem;
  padding: 0 2.4rem;
  border-radius: 99.9rem;
  border: .15rem solid rgba(139, 0, 0, .3);
  color: var(--kg-crimson);
  background: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.kg-visit--accent .kg-visit__sub {
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
  background: transparent;
}
@media screen and (max-width: 767px) {
  .kg-visit {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    padding: 2.4rem 2rem;
    margin-top: 3.2rem;
  }
  .kg-visit__ttl { font-size: 1.8rem; }
  .kg-visit__btns { flex-direction: column; align-items: stretch; gap: 1rem; }
  .kg-visit__main,
  .kg-visit__sub { justify-content: center; }
}

/* ------- 10-6. よくある質問 抜粋（指示書のTOP必須項目）------- */
.kg-faq__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  margin-top: 4.8rem;
}
.kg-faq__item {
  background: #fff;
  border-radius: 1.6rem;
  padding: 3.2rem 2.8rem;
  box-shadow: 0 1rem 2.6rem rgba(80, 20, 20, .07);
  border: .1rem solid rgba(139, 0, 0, .08);
}
.kg-faq__q,
.kg-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  line-height: 1.85;
}
.kg-faq__q {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--kg-navy);
  margin-bottom: 1.6rem;
}
.kg-faq__a { font-size: 1.4rem; color: #3d4657; }
.kg-faq__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--kg-crimson);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}
.kg-faq__mark--a { background: var(--kg-navy); }
@media screen and (max-width: 767px) {
  .kg-faq__list { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 3.2rem; }
  .kg-faq__item { padding: 2.4rem 2rem; }
  .kg-faq__q { font-size: 1.5rem; }
}

/* ------- 10-4. 理念セクションの左に出る白い帯を消す（ユーザー指摘）-------
   真因: モデルの index.css が min-width:768px で
        `.lcl-lead{max-width:calc(50% + 65rem); margin-left:auto}` を掛けている。
        1300px以下では差が出ないが、1900px幅だと左に143pxの隙間ができる（実測）。
        モデルは右寄せの意匠として使っていたが、当方はヒーローと同じ全幅に揃える。 */
@media screen and (min-width: 768px) {
  .lcl-lead {
    max-width: none;
    margin-left: 0;
    /* 全幅にしたぶん、左右が端に張り付いて中央が空いて見える（ユーザー指摘）。
       両カラムを中央側へ寄せ、内容の最大幅を決めて中央に集める。 */
    justify-content: center;
    gap: clamp(2rem, 4vw, 9rem);
    padding-inline: clamp(2rem, 5vw, 10rem);
  }
  .lcl-lead .lcl-lead__figure {
    max-width: 58rem;
    padding-inline: 0 !important;
  }
  .lcl-lead .lcl-lead-cnt { flex: 0 1 auto; }
}

/* ------- 10-2. 支援金セクションとLINEバナーがくっついていたので離す ------- */
.lcl-bnr { margin-top: 10rem; }
@media screen and (max-width: 767px) {
  .lcl-bnr { margin-top: 6.4rem; }
}

/* ============================================================
   9. セクション見出しの文字スライダー（コーポレートの .rc-marquee と同型）
   ユーザー指示「各セクションのタイトルはコーポレートのリクルートの文字スライダーみたいに」
   ・英字ラベルを横に流し、1つおきに塗り／白抜きを交互に置く
   ・地が明るいので色は臙脂。主役の日本語見出しを邪魔しない濃度に抑える
   ============================================================ */
.kg-marquee {
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 .6rem;
  pointer-events: none;
  /* 端をふわっと消して、切れ端に見えないようにする */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.kg-marquee__track {
  display: flex;
  gap: .55em;
  width: max-content;
  animation: kg-marquee-slide 26s linear infinite;
}
.kg-marquee__track span {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: clamp(3.6rem, 5.4vw, 7.2rem);
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
  color: rgba(139, 0, 0, .13);
}
.kg-marquee__track span.kg-marquee__out {
  color: transparent;
  -webkit-text-stroke: .2rem rgba(139, 0, 0, .22);
}
@keyframes kg-marquee-slide {
  from { transform: translateX(0); }
  /* spanは同じ文字を等間隔で並べているので、2つぶん流すと継ぎ目なくループする */
  to   { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .kg-marquee__track { animation: none; }
}
@media screen and (max-width: 767px) {
  .kg-marquee__track span { font-size: 3.2rem; -webkit-text-stroke-width: .15rem; }
  .kg-marquee { margin-bottom: .4rem; }
}
/* 見出しブロック側：マーキーが入った分だけ詰めて、間延びさせない */
.kg-has-marquee { position: relative; }

/* ============================================================
   8. SP専用：画面下部の固定バー（見学＋SNS）
   ユーザー指示「SP版は下部に固定バーで見学とSNSおく」
   ・PCでは出さない（ヘッダーにCTAとSNSが並んでいるため）
   ・固定バーの高さぶん本文の下に余白を足して、フッターが隠れないようにする
   ・タップ領域はWCAG2.2 AA（24px）を余裕で超える高さにする
   ============================================================ */
.kg-fixbar { display: none; }

@media screen and (max-width: 767px) {
  .kg-fixbar {
    position: fixed;
    z-index: 60;              /* 祝い金サイドバー(.bnr-10man)より手前に出す */
    inset: auto 0 0 0;
    display: flex;
    align-items: stretch;
    gap: .8rem;
    padding: .8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-top: .1rem solid rgba(139, 0, 0, .14);
    box-shadow: 0 -.4rem 1.6rem rgba(20, 10, 10, .12);
  }

  /* 見学・応募（主役のCTA） */
  .kg-fixbar__cta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-height: 4.8rem;
    padding: .6rem 1.2rem;
    border-radius: 99.9rem;
    background: linear-gradient(180deg, var(--kg-crimson-l), var(--kg-crimson));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 .3rem 1rem rgba(139, 0, 0, .28);
  }
  .kg-fixbar__cta-main {
    font-size: 1.45rem;
    font-size: max(1.45rem, 13px);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
  }
  .kg-fixbar__cta-sub {
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-size: max(1rem, 9px);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.2;
    color: rgba(255, 255, 255, .82);
  }

  /* 2つ目のボタン（募集要項・選考）。主役の見学CTAより控えめにする */
  .kg-fixbar__cta--sub {
    flex: 0 1 auto;
    background: #fff;
    color: var(--kg-crimson);
    border: .15rem solid rgba(139, 0, 0, .32);
    box-shadow: none;
  }
  .kg-fixbar__cta--sub .kg-fixbar__cta-sub { color: rgba(139, 0, 0, .7); }

  /* 固定バーぶんの余白。これがないとフッター末尾がバーに隠れる */
  #wrapper { padding-bottom: 7.2rem; }

  /* 祝い金サイドバーが固定バーに被らないよう、少し上に逃がす */
  .bnr-10man { margin-top: -3.2rem; }
}

/* ============================================================
   7. オリジナル化（モデルの意匠が残っていた5箇所を作り替える）
   ユーザー指示「完コピしたサイトのデザインそのままだから手を加えてオリジナル化して」
   方針: コーポレートサイト(kenyukai.co.jp)で使っている表現に寄せる＝自社の型にする。
   ============================================================ */

/* ------- 7-1. 3カードの #タグ：縦書き → 横並びのチップ -------
   モデルは writing-mode:vertical-lr でカード右端に縦積み。日本語の可読性が低く、
   モデル特有の意匠でもあるので、コーポレートのタグ表現（臙脂の細枠チップ）に置き換える。 */
.lcl-links .lcl-links__cntarea {
  flex-direction: column;
  align-items: stretch;
}
.lcl-links .lcl-links-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .8rem;
  min-width: 0;
  margin-top: 2rem;
}
.lcl-links .lcl-links-list__item {
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: .02em;
  line-height: 1.5;
  font-size: 1.25rem;
  font-size: max(1.25rem, 11px);
  font-weight: 700;
  color: var(--kg-crimson);
  background: rgba(139, 0, 0, .05);
  border: .1rem solid rgba(139, 0, 0, .2);
  border-radius: 99.9rem;
  padding: .5rem 1.2rem;
}

/* ------- 7-2. 「健祐会で働く理由」：回る円周テキスト → ブランドの見出しプレート -------
   モデルは txt-circle.svg を30秒で回す意匠。コーポレートの見出し（臙脂の丸ドット＋英字ラベル
   ＋日本語見出し＋細い罫）に置き換える。 */
.lcl-lead .lcl-lead-strength__ttl {
  width: auto;
  aspect-ratio: auto;
  display: block;
  text-align: left;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--kg-navy);
  padding: 0 0 1.6rem;
  border-bottom: .2rem solid rgba(139, 0, 0, .2);
  max-width: 22rem;
}
/* 回転する円のSVGを止める（モデル固有の意匠） */
.lcl-lead .lcl-lead-strength__ttl::before {
  content: "REASON";
  position: static;
  display: block;
  inset: auto;
  background: none;
  animation: none;
  margin-bottom: .8rem;
  padding-left: 1.8rem;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--kg-crimson);
}
/* 英字ラベルの頭に臙脂の丸ドット（コーポレートの .sns-en と同じ作り） */
.lcl-lead .lcl-lead-strength__ttl::after {
  content: "";
  position: absolute;
  top: .5rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--kg-crimson);
}
@media screen and (max-width: 767px) {
  .lcl-lead .lcl-lead-strength__ttl { font-size: 2.1rem; max-width: none; }
}

/* ------- 7-3. 新着情報：巨大な NEWS 透かし → 臙脂の帯とドットラベル -------
   モデルは背景に6.3remの巨大文字を敷いて横に流す意匠。これをやめ、
   コーポレートのSNSセクションと同じ「淡い臙脂の帯」に置き換える。 */
.lcl-news .lcl-news-chars { display: none !important; }
.lcl-news {
  background: linear-gradient(180deg, #fff, #fdf4f4);
  padding: 7.2rem 0 7.6rem;
  border-radius: 2.4rem;
}
.lcl-news .lcl-title01 { position: relative; padding-left: 2rem; }
.lcl-news .lcl-title01::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--kg-crimson);
}
@media screen and (max-width: 767px) {
  .lcl-news { padding: 5.2rem 0 5.6rem; border-radius: 1.6rem; }
}

/* ------- 7-4. 働き方（OUR WORK）：写真＋情報パネルの2カラムカード -------
   モデルは全面写真＋左上に文字を重ねる帯。集合写真だと文字が顔に被るので分割する。
   旧版は左パネルが「ラベル／見出し／CTA」の3つだけで高さ460pxを持て余し、
   「余白ばかりで間延びしている・デザイン性が落ちた」と指摘された。
   → リード文と募集職種3行を足して情報量を上げ、写真比率・余白・級数を組み直す。

   ⚠️詳細度メモ: このブロックより後段にある 6-6 が
      `.lcl-works` / `.lcl-works__link` / `.lcl-works__bg`(いずれも 0,1,0) に !important を
      当てているので、ここは必ず (0,2,x) 以上のセレクタで書くこと。
   ⚠️`.arrow01` は `.lcl-works__txtarea` の外にある兄弟要素。gridやflexで並べると
      3つ目のトラックとして並んでしまうので、必ず position:absolute / 明示配置で組む。
   ⚠️`.arrow01` はモデルが width:4.3rem + aspect-ratio:1 の正方形。ピル化するときは
      `aspect-ratio:auto !important` が必須（忘れると巨大な円になる。実際に発生）。
   ⚠️`.lcl-works__bg` は kenyukai-anim.js が scrub で scale:1.1→1 を掛け続けるため、
      画面内では常に約1.05倍。中心基準だと上端が2.5%削られて頭が切れるので
      transform-origin を上端に寄せ、拡大分は下へ逃がす。 */

/* ===== 共通 ===== */
/* 全面を暗くするホバーと「CLICK」ピルは、カード型では不要 */
.lcl-works .lcl-works__link::before { display: none !important; }
.lcl-works .lcl-works__link .lcl-works__click { display: none !important; }
/* パララックスの拡大を下方向へ逃がす（頭を切らないため） */
.lcl-works .lcl-works__bg { transform-origin: 50% 0% !important; }

/* 並び順：マーキー → 日本語見出し → 英字ラベル → リード → 職種リスト。
   （他セクションの .lcl-title01 と同じ積み方に揃える。マーキーはJSが先頭に挿入する） */
.lcl-works .lcl-works__txtarea .kg-marquee { order: -1; }
.lcl-works .lcl-works-ttl { order: 0; }
.lcl-works .lcl-works__en { order: 1; }
.lcl-works .kg-works__lead { order: 2; }
.lcl-works .kg-works__jobs { order: 3; }
/* マーキーはフル幅の見出し用の級数(最大7.2rem)だと、幅の狭いカード内では見出しに
   かぶって読めなくなる。このカードの中だけ小さく組む。 */
.lcl-works .lcl-works__txtarea .kg-marquee { margin: 0 0 1.4rem; }
.lcl-works .lcl-works__txtarea .kg-marquee__track span {
  font-size: 3.4rem;
  font-size: max(3.4rem, 28px);
  -webkit-text-stroke-width: .14rem;
}
/* 見出しは白抜きの帯をやめ、濃紺の地の文字にする（PC/SP共通） */
.lcl-works .lcl-works-ttl,
.lcl-works .lcl-works-ttl__txt {
  background: none !important;
  color: var(--kg-navy) !important;
  padding: 0 !important;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .04em;
}
/* 英字ラベルは他セクション(.lcl-title01__en)と同じ「臙脂の小さな地の文字」に揃える。
   ⚠️上流の 1-4 系が (0,3,1) の nth-of-type セレクタで濃紺チップを !important 指定して
     いるので、同じ形のセレクタを並べて後勝ちさせる。 */
.lcl-works .lcl-works__link .lcl-works__en,
.lcl-works .lcl-works__link:nth-of-type(1) .lcl-works__en {
  background: none !important;
  color: var(--kg-crimson) !important;
  padding: 0 !important;
}
.lcl-works .lcl-works__en {
  margin: 0 0 2rem;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  font-size: max(1.2rem, 11px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .16em;
}
/* リード文（事実のみ：職種3種／板橋区4拠点／訪問5区） */
.lcl-works .kg-works__lead {
  margin: 0 0 2rem;
  color: #4a4a55;
  font-size: 1.45rem;
  font-size: max(1.45rem, 12px);
  line-height: 1.95;
  letter-spacing: .02em;
}
/* 募集職種リスト：ここが密度の主役 */
.lcl-works .kg-works__jobs {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ece2e2;
}
.lcl-works .kg-works__job {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ece2e2;
}
.lcl-works .kg-works__job-name {
  position: relative;
  flex: none;
  /* 3行のメタ文の開始位置を揃える。「ケアマネジャー」(7文字)が収まる幅にする */
  min-width: 14rem;
  padding-left: 1.5rem;
  color: var(--kg-navy);
  font-size: 1.6rem;
  font-size: max(1.6rem, 13px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .04em;
}
.lcl-works .kg-works__job-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--kg-crimson);
}
.lcl-works .kg-works__job-meta {
  color: #6b5f5f;
  font-size: 1.25rem;
  font-size: max(1.25rem, 11px);
  line-height: 1.65;
  letter-spacing: .02em;
}
/* 矢印は臙脂グラデのピルCTAにする */
.lcl-works .arrow01 {
  aspect-ratio: auto !important;
  width: auto !important;
  border: none !important;
  border-radius: 99.9rem;
  background: linear-gradient(90deg, #a01016 0%, #6f0000 100%) !important;
  box-shadow: 0 .8rem 2rem rgba(139, 0, 0, .22);
  flex-wrap: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lcl-works .arrow01::before {
  content: "職種別の働き方をみる";
  color: #fff;
  font-size: 1.45rem;
  font-size: max(1.45rem, 12px);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* モデルの .ico_svg は width:58.14%（＝ピル幅の6割）になるので実寸で抑える */
.lcl-works .arrow01 .ico_svg {
  flex: none;
  width: 1.9rem !important;
  height: auto;
}
.lcl-works .arrow01 svg path { fill: #fff !important; }
.lcl-works .lcl-works__link:hover .arrow01 {
  transform: translateY(-.2rem);
  box-shadow: 0 1.2rem 2.6rem rgba(139, 0, 0, .3);
}

/* ===== PC ===== */
@media screen and (min-width: 768px) {
  .lcl-works.lcl-w1240 { height: auto !important; }
  .lcl-works .lcl-works__link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56%;
    align-items: stretch;
    width: 100%;
    height: 62.3rem !important;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 1.6rem 4rem rgba(80, 20, 20, .1);
    background: #fff;
  }
  /* 写真は右カラム。枠は 56%×68.5rem ＝ 1.115 で、写真(1600:1435=1.115)とほぼ同比。
     ＝object-fit:cover でもトリミングがほぼ起きない。
     2026-09-16 No.33: 引きのトリミングに変更したため枠比も追従(旧52rem/1.335比)。 */
  .lcl-works .lcl-works__bg {
    position: relative !important;
    grid-column: 2;
    grid-row: 1;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    overflow: hidden;
  }
  .lcl-works .lcl-works__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
  }
  /* テキストパネルは左カラム。パララックスのはみ出しを隠すため写真より前面に置く */
  .lcl-works .lcl-works__txtarea {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    inset: auto;
    z-index: 2;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    /* 下端のCTA(絶対配置)と重ならないよう下に余白を確保する */
    padding: 4rem 4.4rem 11rem;
    background: #fff;
  }
  .lcl-works .lcl-works-ttl { margin: 0 0 1.4rem; }
  .lcl-works .lcl-works-ttl__txt { font-size: 3rem; }
  .lcl-works .arrow01 {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 4.6rem !important;
    left: 4.4rem !important;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    min-width: 23rem;
    height: 5.4rem !important;
    padding: 0 2.6rem;
  }
}

/* ===== SP ===== */
@media screen and (max-width: 767px) {
  .lcl-works.lcl-w1240 { height: auto !important; }
  .lcl-works .lcl-works__link {
    position: relative;
    display: block;
    width: 100%;
    height: auto !important;
    border-radius: 1.6rem;
    overflow: hidden;
    box-shadow: 0 1rem 2.6rem rgba(80, 20, 20, .1);
    background: #fff;
  }
  /* SPは「写真の上に文字」をやめ、写真→情報パネルの縦積みにする。
     枠の比を写真(557:633)に合わせるので object-fit のトリミングは起きない。
     2026-09-16 No.33: 引きのトリミングに変更(1114x1127→1114x1266)したため枠比も追従。 */
  .lcl-works .lcl-works__bg {
    position: relative !important;
    display: block;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 557 / 633;
    z-index: 1;
    overflow: hidden;
  }
  .lcl-works .lcl-works__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
  }
  .lcl-works .lcl-works__txtarea {
    position: relative;
    inset: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 2.6rem 2rem 2.2rem;
    background: #fff;
  }
  .lcl-works .lcl-works-ttl { margin: 0 0 1.4rem; }
  .lcl-works .lcl-works-ttl__txt { font-size: 2.2rem; }
  .lcl-works .kg-works__lead { margin: 0 0 1.8rem; font-size: 1.35rem; font-size: max(1.35rem, 12px); line-height: 1.9; }
  .lcl-works .kg-works__job {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .95rem 0;
  }
  .lcl-works .kg-works__job-name { min-width: 0; font-size: 1.5rem; font-size: max(1.5rem, 13px); }
  .lcl-works .kg-works__job-meta { padding-left: 1.5rem; }
  .lcl-works .arrow01 {
    position: relative !important;
    inset: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin: 0 2rem 2.4rem;
    height: 5.2rem !important;
    padding: 0 2rem;
  }
}

/* ------- 6-13. 理念セクション左カラムの余白を詰める（ユーザー指示）-------
   実測: .lcl-lead__figure の padding-top が 70px、イラスト〜拠点情報の間が 76px あり
   左側が間延びしていた。上を詰めて、イラストと情報を寄せる。 */
@media screen and (min-width: 768px) {
  .lcl-lead .lcl-lead__figure { padding-top: 1.6rem !important; }
  .lcl-lead .lcl-lead-facts { padding-top: 1.8rem; }
  /* イラストと拠点情報の間は、パララックス(最大40px)より広ければ十分。
     実測でここを空けすぎると今度は左が間延びするので 5rem 前後に収める。 */
  .lcl-lead .lcl-lead-facts { margin-top: 0 !important; }
  .lcl-lead .philosophy { margin-bottom: 0; }
}

/* ------- 6-11. フッターのキャッチもマスクで隠れていたので出す -------
   モデルは mask-position を animate して文字を右から現す作り。
   1枚構成にするとその演出が走らず、マスクが閉じたまま文字が出なかった。 */
#footer .footer-slide--single .footer-slide__txt {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ------- 6-12. 働き方の「CLICK CLICK」ホバーを健祐会のトーンに置き換える -------
   モデル(footage)は黒いピルに赤い CLICK が流れるSVG。医療・介護のトーンから浮くので、
   臙脂のピル＋日本語のCTAにする。 */
.lcl-works .lcl-works__link .lcl-works__click {
  width: 26rem;
  height: 5.6rem;
  background: var(--kg-crimson);
  box-shadow: 0 1rem 2.6rem rgba(20, 10, 10, .32);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcl-works .lcl-works__link .lcl-works__click::after {
  content: "職種別の働き方をみる　→";
  position: static;
  width: auto;
  height: auto;
  background: none;
  animation: none;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ------- 6-10. フッターをコーポレートサイトと同じ作りに（ユーザー指示）-------
   コーポレートの .kf をそのまま移植（px指定は10px基準remに換算）。
   モデル由来のロゴ／リンク／コピーライトのブロックはHTMLごと撤去済み。 */
#footer .kf {
  width: 100%;
  background: #f8efef;
  padding: 5.6rem 4rem 0;
  box-sizing: border-box;
}
#footer .kf__inner {
  max-width: 118rem;
  margin: 0 auto;
  display: flex;
  gap: 6rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
#footer .kf__left { flex: 1.1; min-width: 27rem; }
#footer .kf__logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  margin-bottom: 2rem;
}
#footer .kf__mark { height: 5.2rem; width: auto; border-radius: .8rem; }
#footer .kf__name { display: flex; flex-direction: column; line-height: 1.15; gap: .2rem; }
#footer .kf__name small { font-size: 1.05rem; font-size: max(1.05rem, 10px); color: var(--kg-crimson); font-weight: 600; }
#footer .kf__name strong { font-size: 1.7rem; color: var(--kg-crimson); font-weight: 800; white-space: nowrap; }
#footer .kf__addr {
  font-size: 1.25rem;
  font-size: max(1.25rem, 11px);
  color: #6b5252;
  line-height: 1.9;
  margin: 0 0 1.8rem;
}
#footer .kf__sns { display: flex; gap: 1rem; }
#footer .kf__sns a {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: .8rem;
  overflow: hidden;
  transition: transform .2s;
}
#footer .kf__sns a:hover { transform: translateY(-.2rem); }
#footer .kf__sns img { width: 100%; height: 100%; object-fit: cover; display: block; }
#footer .kf__cols { flex: 2; display: flex; gap: 4.4rem; flex-wrap: wrap; min-width: 0; }
#footer .kf__col { min-width: 15rem; display: flex; flex-direction: column; gap: 0; }
#footer .kf__ttl {
  font-size: 1.3rem;
  font-size: max(1.3rem, 11px);
  font-weight: 800;
  color: var(--kg-crimson);
  margin: 0 0 1rem;
  padding-bottom: .8rem;
  border-bottom: .15rem solid rgba(139, 0, 0, .22);
}
#footer .kf__col a {
  font-size: 1.25rem;
  font-size: max(1.25rem, 11px);
  color: #5c3f3f;
  text-decoration: none;
  padding: .6rem 0;
  line-height: 1.5;
  transition: color .2s;
}
#footer .kf__col a:hover { color: var(--kg-crimson); }
#footer .kf__bottom {
  max-width: 118rem;
  margin: 3.6rem auto 0;
  padding: 1.6rem 0 2.2rem;
  border-top: .1rem solid rgba(139, 0, 0, .14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
#footer .kf__bottom span { display: flex; gap: 2rem; flex-wrap: wrap; }
#footer .kf__bottom a { font-size: 1.15rem; font-size: max(1.15rem, 11px); color: #6b5252; text-decoration: none; }
#footer .kf__bottom a:hover { color: var(--kg-crimson); }
#footer .kf__bottom small { font-size: 1.05rem; font-size: max(1.05rem, 10px); color: #8f7676; letter-spacing: .06em; }
@media screen and (max-width: 767px) {
  #footer .kf { padding: 4rem 2rem 0; }
  #footer .kf__inner { flex-direction: column; gap: 2.8rem; }
  #footer .kf__left { flex: none; width: 100%; min-width: 0; }
  #footer .kf__cols { flex: none; width: 100%; gap: 2.4rem 2rem; }
  #footer .kf__col { min-width: calc(50% - 1rem); width: calc(50% - 1rem); }
  #footer .kf__bottom { margin-top: 2.6rem; justify-content: center; text-align: center; }
}

/* ------- 6-9. ヒーロー写真がセクション下にはみ出すのを止める -------
   パララックスを大きくした結果、写真が下に210px(PC)/167px(SP)はみ出して
   理念セクションの左に写真の切れ端が見えていた（実測・ユーザー指摘）。
   モデルのヒーローは overflow:visible だったのでクリップを足す。 */
.lcl-main--full { overflow: hidden; }

/* ------- 6-8. フッターの写真は1枚だけ（ユーザー指示）-------
   モデルは2枚重ね前提で、PCは各50%高さ・SPは各50%幅に置いていた。
   1枚にすると残り半分が空くので、1枚で枠を埋める。
   object-position は上寄りにして、人物の頭の上に余白を残す（頭切れ対策）。 */
/* ⚠️詳細度に注意。モデルは #footer 付き(1,2,1)で指定しているので、
   クラスだけ(0,3,1)では負ける。#footer を付けて同等以上にする。
   ⚠️モデルは出現演出のために clip-path で写真を閉じた状態から開く。
   1枚に減らすとスライダーJSが動かず閉じたまま＝写真が幅0で「消える」。
   実測: picture の clip-path が inset(0% 100% 0% 0%) のままだった。 */
#footer .footer-slide--single .footer-slide__img {
  width: 100%;
  height: 100%;
  inset: 0;
  clip-path: none !important;
}
#footer .footer-slide--single .footer-slide__img::before,
#footer .footer-slide--single .footer-slide__img::after { content: none; }
#footer .footer-slide--single .footer-slide__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

/* ------- 6-7. 拠点／対応エリアの並び（ユーザー選択：B案）-------
   ラベル(STATION 拠点)を上、値を下のフル幅に置く。
   拠点が4件になり34字あるため、ラベル横並びだと値が2行に割れて読みにくかった。
   B案なら PC で1行に収まる（実測: A案2行 → B案1行）。 */
.lcl-lead .lcl-lead-facts__row {
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
}
.lcl-lead .lcl-lead-facts__label { width: auto; }
.lcl-lead .lcl-lead-facts__en {
  display: inline;
  margin-right: .8rem;
}
.lcl-lead .lcl-lead-facts__val { line-height: 1.9; }

/* ------- 6-6. 働き方(OUR WORK)に集合写真を入れるための枠合わせ -------
   モデルのこの枠は「画像を枠より2割大きく置いて、スクロールでズームアウトさせる」設計。
   風景なら問題ないが、集合写真（2列5名）を入れると必ず上下の人が刈られる。
   実測: 枠 726.6x309 に対し画像は 895x381 で、はみ出した分がセクションの
   overflow:hidden で切られていた（＝また頭が切れる）。
   → PCでは画像を枠ぴったりにし、枠の縦横比を写真(750:563=1.332)に合わせる。 */
@media screen and (min-width: 768px) {
  .lcl-works,
  .lcl-works__link { height: 545px !important; }
  .lcl-works__bg {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none;
  }
  .lcl-works__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
}

/* ------- 6-5. スクロール演出を大きくしたことによる横あふれ止め -------
   x方向の移動量を上げた要素の親を clip する。
   overflow-x:clip は overflow:hidden と違いスクロールコンテナを作らないので、
   position:sticky や縦スクロールに副作用が出ない。 */
.lcl-lead-strength,
.lcl-lead-strength-list,
.lcl-voice { overflow-x: clip; }

/* ------- 6-4. 公式SNS（Instagram / TikTok）-------
   コーポレートサイトの .sns-sec をそのまま移植し、採用サイトの余白設計に合わせる */
.sns-sec {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 10rem;
  padding: 7.2rem 4rem 7.6rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff, #fdf4f4);
}
.sns-head { max-width: 118rem; margin: 0 auto 3.4rem; }
.sns-en { display: flex; align-items: center; gap: .8rem; margin: 0 0 .8rem; }
.sns-en p { margin: 0; color: var(--kg-crimson); font-weight: 800; font-size: 1.4rem; letter-spacing: .14em; }
.sns-dot { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--kg-crimson); }
.sns-ttl { margin: 0 0 1rem; font-size: 2.8rem; font-weight: 800; color: var(--kg-navy); line-height: 1.4; }
.sns-lead { margin: 0; font-size: 1.4rem; color: #4a4a55; line-height: 1.9; }
.sns-grid { max-width: 118rem; margin: 0 auto; display: flex; gap: 2.8rem; align-items: stretch; }
.sns-card {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 1.6rem;
  box-shadow: 0 1.4rem 3.8rem rgba(80, 20, 20, .09);
  padding: 2.4rem 2.4rem 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.sns-bar { display: block; height: .6rem; border-radius: 9.9rem; }
.sns-bar--ig { background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.sns-bar--tt { background: linear-gradient(90deg, #25f4ee, #111 30%, #111 70%, #fe2c55); }
.sns-card__head { display: flex; align-items: center; gap: 1.2rem; }
.sns-card__head img { width: 4.4rem; height: 4.4rem; border-radius: 1rem; display: block; }
.sns-card__id { display: flex; flex-direction: column; line-height: 1.3; }
.sns-card__id strong { font-size: 1.7rem; font-weight: 800; color: #222; }
.sns-card__id span { font-size: 1.25rem; color: var(--kg-crimson); font-weight: 600; }
.sns-feed {
  flex: 1;
  min-height: 30rem;
  background: #faf7f7;
  border-radius: 1.2rem;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.sns-ig-frame { width: 100%; height: 43rem; border: 0; display: block; background: #fff; }
.sns-feed .tiktok-embed { width: 100%; }
.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.2rem;
  border-radius: 99.9rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: .04em;
  transition: opacity .2s, transform .2s;
}
.sns-btn:hover { opacity: .88; transform: translateY(-.2rem); }
.sns-btn--ig { background: linear-gradient(90deg, #fa7e1e, #d62976, #962fbf); color: #fff; }
.sns-btn--tt { background: #111; color: #fff; }
@media screen and (max-width: 767px) {
  .sns-sec { margin-top: 6.4rem; padding: 5.2rem 2rem 5.6rem; }
  .sns-ttl { font-size: 2.2rem; }
  .sns-grid { flex-direction: column; gap: 2.2rem; }
  .sns-ig-frame { height: 40rem; }
}

/* ============================================================
   11. 3カードセクション（.lcl-links）の作り直し  2026-08-14
   ユーザー指示「なんかこのセクションもいまいち。イラストは変えても
   いいし使わなくてもいい」→ A/B/C の3案を実レンダリングで比較し、
   A案「イラストを主役に据えたメディアカード」を採用。
   比較シート: _review\agent_cards\SHEET_pc1440.png / SHEET_sp390.png

   直した点（元の問題）
   ①イラストがカード中央に宙づり  → 上部の「絵の場所」（クリーム地の
     メディア枠）に収める。枠内は object-fit:contain なので絶対に切れない。
   ②濃紺のベタ帯＋臙脂のベタ帯が上に固まっていた → 帯をやめ、
     臙脂の短い罫＋英字 / 濃紺の地の文字、という静かな階層にする。
   ③#タグ・説明文・矢印がバラバラ → 左揃えの1本の流れにして、
     カード下端の臙脂ピルCTA（.lcl-works と同じ型）で受け止める。
   ④矢印の金色 #c99a1e はモデル由来のブランド外の色だったので臙脂へ。
   結果: カード高さ PC 796→595px / SP 2207→1796px
   ============================================================ */

/* ---- 11-0. 金色の矢印 → ブランドの臙脂グラデ ---- */
.lcl-links .arrow01 {
  background: linear-gradient(90deg, #a01016 0%, #6f0000 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 .8rem 2rem rgba(139, 0, 0, .22);
}
.lcl-links .arrow01 .svg-path { fill: #fff !important; }
.lcl-links .arrow01 .svg-path02 { fill-opacity: 0 !important; }

/* ---- 11-1. カードの器 ---- */
.lcl-links { gap: 2.4rem !important; }

.lcl-links .lcl-links__link {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr auto;   /* 絵 / 見出し / タグ / 説明 / CTA */
  background: #fff !important;
  border: .1rem solid rgba(34, 51, 78, .14);
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 .2rem 1.4rem rgba(20, 10, 10, .05);
  transition: box-shadow .25s ease, transform .25s ease;
}
@media (any-hover: hover) {
  .lcl-links .lcl-links__link:hover {
    transform: translateY(-.4rem);
    box-shadow: 0 1.2rem 2.8rem rgba(20, 10, 10, .12);
  }
}
/* .lcl-links__cntarea の箱を消して、figure と ul を直接グリッドに乗せる。
   （HTMLの入れ子を変えずに並び順を作り替えるため） */
.lcl-links .lcl-links__cntarea { display: contents !important; }

/* ---- 11-2. メディア枠（イラスト） ----
   高さを固定した枠に contain で収めるので、どのイラストも切れない。
   ※GSAP側のイラスト単体のパララックス(y:-70)はこの枠と相性が悪い
     （枠から出て頭が切れる）ので js/kenyukai-anim.js から外した。 */
.lcl-links .lcl-links__img {
  grid-row: 1;
  width: 100% !important;
  height: 19rem;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  padding: 1.4rem 1.6rem 0 !important;
  margin: 0 !important;
  background-color: #f2f1ef !important;
  border-bottom: .1rem solid rgba(34, 51, 78, .1);
}
.lcl-links .lcl-links__img img {
  width: auto !important;
  max-width: 100%;
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom center;
}
/* 3枚目（ベビーカーの家族）の基準倍率だけ上げる指定は js/kenyukai-anim.js 側にある。
   GSAPがimgのtransformをインラインで書くので、CSSに書くと必ず上書きされるため。 */
@media screen and (max-width: 767px) {
  .lcl-links .lcl-links__img { height: 21rem; }
}

/* ---- 11-3. 見出し：ベタ帯 → 臙脂の短い罫＋濃紺の地の文字 ---- */
.lcl-links .lcl-links__ttlarea {
  grid-row: 2;
  padding: 2.2rem 2.2rem 0 !important;
  gap: .9rem !important;
}
.lcl-links .lcl-links__en {
  display: flex !important;
  align-items: center;
  gap: .8rem;
  padding: 0 !important;
  background: none !important;
  color: #8b0000 !important;
  font-size: 1.25rem !important;
  font-size: max(1.25rem, 11px) !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
}
.lcl-links .lcl-links__en::before {
  content: "";
  width: 2.4rem;
  height: .2rem;
  flex: none;
  background: linear-gradient(90deg, #a01016 0%, #6f0000 100%);
}
.lcl-links .lcl-links__txt {
  padding: 0 !important;
  background: none !important;
  color: #22334e !important;
  font-size: 2.4rem !important;
  line-height: 1.35 !important;
  letter-spacing: .06em !important;
}

/* ---- 11-4. タグ ---- */
.lcl-links .lcl-links-list {
  grid-row: 3;
  margin-top: 1.6rem !important;
  padding: 0 2.2rem !important;
  gap: .6rem !important;
}
.lcl-links .lcl-links-list__item {
  font-size: 1.2rem !important;
  font-size: max(1.2rem, 11px) !important;
  padding: .45rem 1rem !important;
}

/* ---- 11-5. 説明文：白い箱をやめて地の文に ---- */
.lcl-links .lcl-links__txtarea {
  grid-row: 4;
  width: auto !important;
  margin-top: 1.4rem !important;
  padding: 0 2.2rem !important;
  background: none !important;
}
.lcl-links .lcl-links__txtarea p {
  font-size: 1.4rem !important;
  line-height: 1.85 !important;
}

/* ---- 11-6. CTA：右下に浮いていた四角 → 下端のピル（.lcl-works と同型）---- */
.lcl-links .lcl-links__link .arrow01 {
  grid-row: 5;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  aspect-ratio: auto !important;
  height: 4.8rem;
  margin: 2.2rem !important;
  border-radius: 99.9rem;
}
/* 🔴ユーザー指摘「ここ→しか入ってないし、→いらんといった」
   ピルの中身が矢印アイコンだけで、何のボタンか分からなかった。
   矢印は消し、文言を入れる。文言は既存の見出しから作らず汎用の一語にする（創作しない）。 */
.lcl-links .arrow01 .ico_svg { display: none !important; }
.lcl-links .lcl-links__link .arrow01::before {
  content: "くわしく見る";
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (any-hover: hover) {
  .lcl-links .arrow01:hover { background: linear-gradient(90deg, #a01016 0%, #6f0000 100%) !important; }
}
@media screen and (max-width: 767px) {
  .lcl-links .lcl-links__link .arrow01::before { font-size: 1.35rem; }
}

/* ============================================================
   14. 下層ページ共通（②〜⑤）
   指示書の5ページ構成。TOPと同じブランドで、読み物として成立させる。
   ============================================================ */

/* ---- ページ見出し ---- */
.kg-phero {
  padding: 14rem 4rem 7.2rem;
  background: linear-gradient(180deg, #fdf4f4, #f2f1ef);
  text-align: center;
}
.kg-phero__en {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--kg-crimson);
}
.kg-phero__ttl {
  margin-top: 1.2rem;
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--kg-navy);
}
.kg-phero__lead {
  max-width: 76rem;
  margin: 2.4rem auto 0;
  font-size: 1.6rem;
  line-height: 2.1;
  color: #3d4657;
}

/* ---- セクション ---- */
.kg-sec { margin-top: 12rem; }
.kg-sec:first-of-type { margin-top: 9.6rem; }
.kg-sec__lead {
  max-width: 84rem;
  margin-top: 3.2rem;
  font-size: 1.6rem;
  line-height: 2.1;
  color: #3d4657;
}
.kg-sec__sub {
  margin-top: 5.6rem;
  padding-left: 1.8rem;
  position: relative;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--kg-navy);
}
.kg-sec__sub::before {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--kg-crimson);
}
.kg-sec__note {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 2;
  color: #3d4657;
}

/* ---- 理念（MISSION / VISION） ---- */
/* 🔴2026-08-17: 実機（iPhone）でカード内テキストが重なって見えるバグを確認。
   同じ「横並び→SPで縦積み」でも grid実装(.kg-steps等)は実機で正常、
   flex実装(旧.kg-mvv)だけ崩れたため、実機で確実に動くgrid方式に統一した。 */
.kg-mvv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; margin-top: 4rem; }
.kg-mvv__item {
  flex: 1 1 0;
  background: #fff;
  border-radius: 1.6rem;
  padding: 3.6rem 3.2rem;
  box-shadow: 0 1rem 2.6rem rgba(80, 20, 20, .07);
}
.kg-mvv__en {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--kg-crimson);
}
.kg-mvv__ja { margin-top: .4rem; font-size: 1.4rem; font-weight: 700; color: #6b5252; }
.kg-mvv__txt {
  margin-top: 1.8rem;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.75;
  color: var(--kg-navy);
}

/* ---- 3カラムのカード（VALUE・事業内容・福利厚生など） ---- */
.kg-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 2.8rem;
}
.kg-grid3__item {
  background: #fff;
  border: .1rem solid rgba(139, 0, 0, .1);
  border-radius: 1.4rem;
  padding: 2.8rem 2.4rem;
}
.kg-grid3__ttl {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--kg-navy);
}
.kg-grid3__txt {
  margin-top: 1.2rem;
  font-size: 1.45rem;
  line-height: 1.95;
  color: #4a5261;
}

/* ---- 社員インタビュー（VOICE No.20/21）: Q&Aは1カラムで縦積み。モーダル内で再利用 ---- */
.kg-voice-person { margin-top: 4.8rem; padding-top: 4.8rem; border-top: .1rem solid rgba(139, 0, 0, .12); }
.kg-voice-person:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.kg-voice-qa { margin-top: 3.2rem; }
.kg-voice-qa .kg-grid3 { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 0; }
.kg-voice-photo--ph { width: 100%; height: 100%; aspect-ratio: 3/4; background: repeating-linear-gradient(45deg,#f7efef,#f7efef 11px,#f1e4e4 11px,#f1e4e4 22px); display: flex; align-items: center; justify-content: center; color: #b98a8a; font-size: 1.3rem; font-weight: 600; text-align: center; padding: 1.6rem; }

/* ---- 社員の声：パネル＋モーダル方式（No.26 2026-09-11改訂）
   「訪問看護がはじめての方へ」「経験を積んできた方へ」それぞれの下に配置。
   見せ方はコーポレートサイトのメンバー紹介(ky-staff)と同じ：パネルを並べ、クリックで詳細（お写真・基本情報・Q&A）。
   各カードの <template> に .kg-ceo__in（写真・基本情報）＋.kg-voice-qa（Q&A）をそのまま保持し、
   クリック時にモーダルへ丸ごとコピーする（項目ごとの詰め替えをしないので個人差のあるQ&A数にも対応できる）。 ---- */
.kg-voice-group { margin-top: 5.6rem; }
.kg-voice-group__ttl { margin: 0 0 2.8rem; font-size: 2rem; font-weight: 800; color: var(--kg-navy); text-align: center; }
.kg-voice-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 100rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.kg-voice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 70rem; }
/* 2026-09-15 No.34: TOPの先輩の声スライダー。
   写真は縦長・枠は314:330(ほぼ正方)なので、VOICEページのカード(background-position:center top)と
   同じく上端基準で切る＝どの写真も頭が切れない。 */
.lcl-voice__list .member01__img img { object-position: 50% 0%; }
.lcl-voice__list .member01__txt--name { font-size: 1.5rem; font-size: max(1.5rem, 11px); color: var(--kg-navy); }
/* 2026-09-15 No.34: TOPの先輩の声カードから飛ぶ先。
   「〜先輩の声を見る」の見出しが画面の一番上に来るように、固定ヘッダー分だけ手前で止める。
   （実測ヘッダー高 PC 100px / SP 83px） */
.kg-voice-group[id] { scroll-margin-top: 11rem; }
@media screen and (max-width: 767px) { .kg-voice-group[id] { scroll-margin-top: 9rem; } }
.kg-voice-card { background: #fff; border-radius: 1.6rem; overflow: hidden; box-shadow: 0 1.2rem 3.2rem rgba(139, 0, 0, .08); cursor: pointer; text-align: left; }
.kg-voice-card__photo { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center top; background-color: #f2ecec; }
.kg-voice-card__body { padding: 2rem 2.2rem 2.4rem; }
.kg-voice-card__role { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 700; color: var(--kg-crimson); }
.kg-voice-card__name { margin: 0; font-size: 1.8rem; font-weight: 800; color: var(--kg-navy); }
@media screen and (max-width: 767px) {
  .kg-voice-grid, .kg-voice-grid--2 { grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: none; }
}
@media screen and (max-width: 480px) {
  .kg-voice-grid, .kg-voice-grid--2 { grid-template-columns: 1fr; }
}
.kg-voice-modal { margin: auto; border: 0; padding: 0; width: 92%; max-width: 84rem; max-height: 86vh; overflow-y: auto; border-radius: 2rem; }
.kg-voice-modal[open] { display: block; }
.kg-voice-modal::backdrop { background: rgba(34, 20, 20, .55); }
/* 2026-09-15 No.29: ボタン既定のpaddingで「×」が左に寄っていたため、flexで丸の中央に置く。 */
.kg-voice-modal__close { position: sticky; top: 1.6rem; float: right; margin: 1.6rem 1.6rem 0 0; z-index: 2; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: none; background: #fff; box-shadow: 0 .2rem .8rem rgba(0,0,0,.15); font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; font-family: inherit; color: #22334e; }
/* 2026-09-15 No.30: 下にまだ続きがあることを示す矢印。最下部まで読むと消える。 */
.kg-voice-modal__more { position: sticky; bottom: 1.6rem; z-index: 3; display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; margin: 0 auto -4.4rem; border-radius: 50%; background: rgba(139, 0, 0, .92); color: #fff; font-size: 2rem; line-height: 1; box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .28); pointer-events: none; opacity: 1; transition: opacity .25s ease; animation: kg-voice-more 1.6s ease-in-out infinite; }
.kg-voice-modal.is-bottom .kg-voice-modal__more { opacity: 0; }
@keyframes kg-voice-more { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.5rem); } }
@media (prefers-reduced-motion: reduce) { .kg-voice-modal__more { animation: none; } }
.kg-voice-modal__body { padding: 1rem 3.6rem 4rem; clear: both; }
.kg-voice-modal__body .kg-ceo__in { margin-top: 0; }
/* モーダルは.kg-ceo__inを想定より狭い幅で使うため、基本情報テーブルは常に縦積みにする
   （.kg-table__row dt の固定20rem幅がページ本体幅前提で、モーダル内では値列が潰れて縦一文字流れになるため） */
.kg-voice-modal__body .kg-ceo__photo { flex-basis: 26rem; max-width: 26rem; }
.kg-voice-modal__body .kg-table__row { flex-direction: column; gap: .6rem; padding: 1.6rem 1.2rem; }
.kg-voice-modal__body .kg-table__row dt { flex: none; }
@media screen and (max-width: 600px) {
  .kg-voice-modal__body { padding: .6rem 2rem 3.2rem; }
}

/* ---- 拠点紹介・対応エリア ----
   🔴2026-08-17: コーポレートサイト事業所案内(/kenyukai/offices/)と全く同じ乗せ方に統一（ユーザー指示）。
   クラス名・レイアウト・カード内の情報項目（所在地/アクセス/電話/FAX/受付時間/事業所番号/対応エリア/開設）を
   コーポレート側の実装からそのまま移植し、配色だけ採用サイトの --kg-crimson / --kg-navy に合わせている。 */
.ky-area {
  width: 100%; box-sizing: border-box; padding: 8rem 4rem 4.4rem;
  background: linear-gradient(180deg, #faf3f3, #fff 30rem);
}
.ky-area__hero { max-width: 110rem; margin: 0 auto 2.8rem; }
.ky-offices { width: 100%; box-sizing: border-box; padding: 6rem 4rem 6rem; }
.ky-off__hero { max-width: 110rem; margin: 0 auto 4rem; }
.ky-off__en { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 4rem; letter-spacing: .04em; color: var(--kg-crimson); line-height: 1; text-transform: uppercase; }
.ky-off__ttl { margin: .8rem 0 0; font-size: 3rem; font-weight: 800; color: var(--kg-navy); }
.ky-off__lead { margin: 1.6rem 0 0; font-size: 1.5rem; line-height: 1.9; color: #4a4a4a; max-width: 82rem; }
@media (max-width: 600px) {
  .ky-area { padding: 6rem 1.8rem 3.2rem; }
  .ky-offices { padding: 0 1.8rem 5rem; }
  .ky-off__en { font-size: 3rem; }
  .ky-off__ttl { font-size: 2.3rem; }
}
.ky-area__map {
  max-width: 110rem;
  margin: 2.4rem auto 0;
  aspect-ratio: 2000 / 1580;
  border-radius: 1.8rem;
  background: #fff;
  box-shadow: 0 .2rem 1.8rem rgba(139, 0, 0, .08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ky-area__map img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ky-off__list { max-width: 110rem; margin: 3.2rem auto 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2.6rem; }
.ky-off__row { position: relative; background: #fff; border: .1rem solid rgba(139, 0, 0, .1); border-radius: 1.8rem; padding: 2.8rem 3rem 3rem; box-shadow: 0 1rem 3rem rgba(139, 0, 0, .06); }
.ky-off__badge { display: inline-block; background: linear-gradient(135deg, var(--kg-crimson), #6e0000); color: #fff; font-size: 1.2rem; font-weight: 700; padding: .5rem 1.4rem; border-radius: 2rem; letter-spacing: .04em; }
.ky-off__badge--navy { background: linear-gradient(135deg, #2f4568, var(--kg-navy)); }
.ky-off__row h3 { margin: 1.4rem 0 1.8rem; font-size: 2rem; font-weight: 800; color: var(--kg-navy); line-height: 1.45; }
.ky-off__row h3 span { display: inline-block; font-size: 1.5rem; color: var(--kg-crimson); margin-left: .4rem; font-weight: 700; }
.ky-off__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.6rem; align-items: start; }
.ky-off__info { margin: 0; display: flex; flex-direction: column; gap: 0; }
.ky-off__info > div { display: flex; gap: 1.4rem; padding: 1.1rem 0; border-top: .1rem solid #f2ecec; }
.ky-off__info > div:first-child { border-top: none; }
.ky-off__info dt { flex: none; width: 8.8rem; font-size: 1.3rem; font-weight: 700; color: var(--kg-crimson); padding-top: .1rem; }
.ky-off__info dd { margin: 0; font-size: 1.45rem; line-height: 1.7; color: #333; }
.ky-off__info dd a { font-weight: 700; }
.ky-off__info dd a:not(.ky-off__addr) { color: var(--kg-crimson); text-decoration: none; }
.ky-off__info dd a:not(.ky-off__addr):hover { text-decoration: underline; }
.ky-off__addr { color: var(--kg-crimson); text-decoration: underline; text-underline-offset: .3rem; }
.ky-off__photo, .ky-off__route {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 1.2rem;
  background: repeating-linear-gradient(45deg, #f7efef, #f7efef 11px, #f1e4e4 11px, #f1e4e4 22px);
  display: flex; align-items: center; justify-content: center;
  color: #b98a8a; font-size: 1.25rem; font-weight: 600; letter-spacing: .03em; text-align: center; padding: 1rem;
}
/* 2026-09-15 No.35: 施設外観写真が入った枠。コーポレート事業所案内と同じ見せ方(cover) */
.ky-off__photo--img { background: #fff; border: .1rem solid #f0e4e4; padding: 0; display: block; overflow: hidden; }
.ky-off__photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1.2rem; }
/* 🔴2026-08-17: 路線図に実画像が入った枠（ユーザー提供画像）。地図なので敷き詰めず全体を見せる(contain) */
.ky-off__route--img { background: #fff; padding: .8rem; overflow: hidden; }
.ky-off__route--img img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
/* 🔴2026-08-21: 路線図クリックで拡大ポップアップ（指示書No.11） */
.kg-route-modal { max-width: min(92vw, 90rem); width: 92%; border: none; border-radius: 1.4rem; padding: 0; background: transparent; margin: auto; }
.kg-route-modal[open] { margin: auto; }
.kg-route-modal[open] { display: flex; align-items: center; justify-content: center; }
.kg-route-modal .modal-backdrop { position: fixed; inset: 0; background: rgba(34, 20, 20, .7); }
.kg-route-modal__body { position: relative; background: #fff; border-radius: 1.4rem; overflow: hidden; padding: .8rem; }
.kg-route-modal__body img { display: block; width: 100%; height: auto; border-radius: .8rem; }
.kg-route-modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: none; background: #fff; box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .2); font-size: 1.8rem; cursor: pointer; line-height: 1; }
@media (max-width: 900px) {
  .ky-off__cols { grid-template-columns: 1fr 1fr; }
  .ky-off__route { grid-column: span 2; }
}
@media (max-width: 600px) {
  .ky-off__row { padding: 2.2rem 2rem; }
  .ky-off__cols { grid-template-columns: 1fr; }
  .ky-off__route { grid-column: auto; }
  .ky-off__info > div { flex-direction: column; gap: .3rem; }
  .ky-off__info dt { width: auto; }
  .ky-area__map { aspect-ratio: 4 / 3; }
}

/* ---- 1日の流れ ---- */
.kg-timeline { margin-top: 2.4rem; border-left: .2rem solid rgba(139, 0, 0, .18); }
.kg-timeline__item {
  position: relative;
  display: flex;
  gap: 2.4rem;
  padding: 1.6rem 0 1.6rem 2.8rem;
}
.kg-timeline__item::before {
  content: "";
  position: absolute;
  top: 2.4rem;
  left: -.7rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--kg-crimson);
}
.kg-timeline__time {
  flex: 0 0 8rem;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--kg-crimson);
}
.kg-timeline__txt { font-size: 1.55rem; line-height: 1.85; color: #3d4657; }

/* ---- 研修ステップ ---- */
.kg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3.2rem;
  counter-reset: step;
}
.kg-steps__item {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  background: #fff;
  border-radius: 1.4rem;
  padding: 2.6rem 2.4rem;
  border-top: .4rem solid var(--kg-crimson);
  text-align: center;
}
.kg-steps__num {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: rgba(139, 0, 0, .3);
  line-height: 1;
}
.kg-steps__ttl { font-size: 1.65rem; font-weight: 800; color: var(--kg-navy); line-height: 1.55; }
.kg-steps__txt { font-size: 1.4rem; line-height: 1.9; color: #4a5261; }

/* ---- タグ列（合う人・業務） ---- */
.kg-taglist { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.kg-taglist__item {
  padding: 1rem 1.8rem;
  border-radius: 99.9rem;
  background: #fff;
  border: .1rem solid rgba(139, 0, 0, .18);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--kg-navy);
}
.kg-taglist--fit .kg-taglist__item { border-color: rgba(139, 0, 0, .3); color: var(--kg-crimson); }

/* ---- 定義表（会社概要・募集要項） ---- */
.kg-table { margin-top: 3.2rem; border-top: .1rem solid rgba(139, 0, 0, .14); }
.kg-table__row {
  display: flex;
  gap: 3.2rem;
  padding: 2rem 1.2rem;
  border-bottom: .1rem solid rgba(139, 0, 0, .14);
}
.kg-table__row dt {
  flex: 0 0 20rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--kg-crimson);
}
.kg-table__row dd { font-size: 1.5rem; line-height: 1.95; color: #3d4657; }

/* ---- SPドロワー：メニューのアコーディオン化（ユーザー指示 2026-08-17） ----
   全アンカーが常に展開されて縦に長く見づらいという指摘への対応。
   カテゴリ見出しは畳んでおき、「∨」ボタンで開閉する。 */
.nav-list__head { display: flex; align-items: center; }
.nav-list__head .nav-list__link { flex: 1 1 auto; }
.nav-list__toggle {
  flex: none;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-list__caret {
  width: 1rem;
  height: 1rem;
  border-right: .2rem solid currentColor;
  border-bottom: .2rem solid currentColor;
  color: var(--kg-navy);
  transform: rotate(45deg);
  transition: transform .25s ease;
  margin-top: -.3rem;
}
.nav-list__item--acc.is-open .nav-list__caret { transform: rotate(-135deg); margin-top: .3rem; }
.nav-list__item--acc .nav-list-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.nav-list__item--acc.is-open .nav-list-children { max-height: 60rem; }

/* ---- 1日の流れ：写真窓つき（ユーザー指示 2026-08-17） ---- */
/* 🔴2026-08-17: 実機（iPhone）で写真が上の文章に重なって見えるバグを確認。
   flex実装だけ実機で崩れ、grid実装(.kg-steps等)は正常だったため、grid方式に統一した。 */
.kg-schedule__row { display: grid; grid-template-columns: 1fr 30rem; gap: 4rem; align-items: start; margin-top: 2.4rem; }
.kg-schedule__row + .kg-schedule__row { margin-top: 4.4rem; }
.kg-schedule__row--rev { grid-template-columns: 30rem 1fr; }
.kg-schedule__row--rev .kg-schedule__col { order: 2; }
.kg-schedule__row--rev .kg-schedule__photo { order: 1; }
.kg-schedule__col { min-width: 0; }
.kg-schedule__col .kg-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (max-width: 900px) {
  .kg-schedule__col .kg-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
  .kg-schedule__col .kg-grid3 { grid-template-columns: 1fr; }
}
.kg-schedule__photo {
  aspect-ratio: 4 / 3;
  border-radius: 1.4rem;
  background: repeating-linear-gradient(45deg, #f7efef, #f7efef 12px, #f1e4e4 12px, #f1e4e4 24px);
  display: grid; place-items: center;
  color: #b98a8a; font-size: 1.3rem; font-weight: 600; letter-spacing: .03em; text-align: center; padding: 1.2rem;
}
/* 🔴2026-08-17: 実写真が入った枠（ユーザー提供画像）。背景ストライプを消してobject-fit:coverで敷き詰める */
.kg-schedule__photo--img { background: none; padding: 0; overflow: hidden; }
.kg-schedule__photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media screen and (max-width: 900px) {
  .kg-schedule__row { grid-template-columns: 1fr; }
  .kg-schedule__row--rev .kg-schedule__col,
  .kg-schedule__row--rev .kg-schedule__photo { order: 0; }
  .kg-schedule__photo { width: 100%; }
}

/* ---- 人事・研修制度：SVGアイコンつき（ユーザー指示 2026-08-17） ---- */
.kg-icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  background: rgba(139, 0, 0, .08); color: var(--kg-crimson); flex: none;
}
.kg-icon-badge svg { width: 2.6rem; height: 2.6rem; }
.kg-steps__head { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }

/* ---- 福利厚生：ジグザグ構成（ユーザー指示 2026-08-17、羅列をやめる） ----
   🔴2026-08-17: 実機（iPhone）で写真が上の文章に重なって見えるバグを確認。
   flex実装(旧版)だけ実機で崩れ、grid実装(.kg-steps等)は正常だったため、grid方式に統一した。 */
.kg-benefits-zz { display: grid; gap: 5.6rem; margin-top: 3.2rem; }
.kg-benefits-zz__row { display: grid; grid-template-columns: 1fr 34rem; gap: 5rem; align-items: center; }
.kg-benefits-zz__row--rev { grid-template-columns: 34rem 1fr; }
.kg-benefits-zz__row--rev .kg-benefits-zz__text { order: 2; }
.kg-benefits-zz__row--rev .kg-benefits-zz__photo { order: 1; }
.kg-benefits-zz__text { min-width: 0; display: grid; gap: 2.8rem; }
.kg-benefits-zz__item-ttl { display: flex; align-items: baseline; gap: 1rem; font-size: 1.7rem; font-weight: 800; color: var(--kg-navy); }
.kg-benefits-zz__item-ttl::before { content: "―――"; color: var(--kg-crimson); font-weight: 400; font-size: 1.3rem; letter-spacing: -.1em; }
.kg-benefits-zz__item-txt { margin-top: .8rem; font-size: 1.45rem; line-height: 1.9; color: #4a5261; }
.kg-benefits-zz__photo {
  aspect-ratio: 4 / 3;
  border-radius: 1.6rem;
  background: repeating-linear-gradient(45deg, #f7efef, #f7efef 12px, #f1e4e4 12px, #f1e4e4 24px);
  display: grid; place-items: center;
  color: #b98a8a; font-size: 1.3rem; font-weight: 600; letter-spacing: .03em; text-align: center; padding: 1.2rem;
}
/* 🔴2026-08-17: 実写真が入った枠（ユーザー提供画像）。背景ストライプを消してobject-fit:coverで敷き詰める */
.kg-benefits-zz__photo--img { background: none; padding: 0; overflow: hidden; }
.kg-benefits-zz__photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media screen and (max-width: 900px) {
  .kg-benefits-zz__row, .kg-benefits-zz__row--rev { grid-template-columns: 1fr; }
  .kg-benefits-zz__row--rev .kg-benefits-zz__text,
  .kg-benefits-zz__row--rev .kg-benefits-zz__photo { order: 0; }
  .kg-benefits-zz__photo { width: 100%; }
}

/* ---- 数字でわかる健祐会：カード形式（ユーザー指示 2026-08-17、和幸情報システム社「数字で見る」参考） ---- */
.kg-data-sec { padding: 6rem 4rem 7rem; background: linear-gradient(160deg, #fdeaea, #fbf6ee 60%); border-radius: 2.4rem; }
.kg-data-sec__tag {
  display: inline-block; margin-top: 4.4rem; padding: .8rem 2rem;
  background: #fff; border-radius: .8rem; border-bottom: .4rem solid var(--kg-crimson);
  font-size: 1.6rem; font-weight: 800; color: var(--kg-navy);
}
.kg-data-sec__tag:first-of-type { margin-top: 0; }
.kg-data-sec__note { margin: 1rem 0 0; font-size: 1.25rem; color: #6b5252; }
.kg-data-grid { max-width: 110rem; margin: 2.8rem auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.kg-data-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 90rem; }
.kg-data-card--wide { grid-column: 1 / -1; }
.kg-data-card { background: #fff; border-radius: 2rem; padding: 3.6rem 3.2rem; box-shadow: 0 1.2rem 3.2rem rgba(139, 0, 0, .08); text-align: center; }
.kg-data-card__label { margin-top: 2rem; font-size: 1.6rem; font-weight: 800; color: var(--kg-navy); }
.kg-data-card__num { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin-top: 1.4rem; font-family: 'Montserrat', 'Noto Sans JP', sans-serif; color: var(--kg-crimson); }
.kg-data-card__num em { font-size: 5.6rem; font-weight: 800; font-style: normal; line-height: 1; }
.kg-data-card__num i { font-size: 1.9rem; font-weight: 700; font-style: normal; }
.kg-data-card__sub { margin-top: 1rem; font-size: 1.25rem; line-height: 1.7; color: #6b5252; }
.kg-icon-badge--lg { width: 7.2rem; height: 7.2rem; background: rgba(139, 0, 0, .1); }
.kg-icon-badge--lg svg { width: 3.6rem; height: 3.6rem; }
@media screen and (max-width: 900px) {
  .kg-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kg-data-grid--2 { max-width: none; }
}
@media screen and (max-width: 600px) {
  .kg-data-sec { padding: 4.4rem 2rem 5rem; }
  .kg-data-grid, .kg-data-grid--2 { grid-template-columns: 1fr; }
  .kg-data-card { padding: 2.8rem 2.4rem; }
  .kg-data-card__num em { font-size: 4.4rem; }
  .kg-icon-badge--lg { width: 6rem; height: 6rem; }
  .kg-icon-badge--lg svg { width: 3rem; height: 3rem; }
}

/* ---- 数字でわかる健祐会：会社環境（イラストつきカード。ユーザー提供イラスト） ---- */
/* 🔴2026-08-17: イラストごとに元画像内の余白・人物の大きさが違い、見た目のサイズがバラバラに
   見えるという指摘への対応。幅だけでなく高さも固定し、object-fit:containで枠内に揃える。 */
.kg-data-card__illust { width: 100%; max-width: 20rem; height: 14rem; margin: 0 auto; display: block; object-fit: contain; }
.kg-data-card__illust-row { display: flex; align-items: center; justify-content: center; gap: 1.4rem; height: 10rem; }
.kg-data-card__illust-row img { width: auto; height: 100%; max-width: 10rem; object-fit: contain; display: block; }
.kg-data-card__soon {
  margin-top: 1.6rem; font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 2rem; font-weight: 800; color: var(--kg-crimson); letter-spacing: .04em;
}
.kg-data-card__note2 { margin-top: .6rem; font-size: 1.2rem; color: #6b5252; }
@media screen and (max-width: 600px) {
  .kg-data-card__illust { max-width: 15rem; height: 11rem; }
  .kg-data-card__illust-row { height: 8rem; }
  .kg-data-card__illust-row img { max-width: 8rem; }
}

/* ---- 数字でわかる健祐会：グラフ表現（ユーザー指示・参考サイト同型）。
   すべて実データのみで算出（架空の数値は作らない）。「準備中」は健祐会様のデータ待ち。 ---- */

/* 従業員数カード＝左にテキスト、右にイラスト（参考サイトと同じ横並び） */
/* 🔴2026-08-17: 他のflex実装で実機の重なりバグが出たため、予防的にgrid方式にした。 */
.kg-data-card--split { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; text-align: left; padding: 3.8rem 3rem; }
.kg-data-card--split .kg-data-card__label { margin-top: 0; }
.kg-data-card--split .kg-data-card__illust { width: 22rem; margin: 0; }
.kg-data-card--split .kg-data-card__body { min-width: 0; }

/* 男女比カード＝男アイコン／ドーナツ／女アイコン の3分割（参考サイトと同じ横並び） */
.kg-gender-row { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: 2rem; }
.kg-gender-row__person { flex: none; text-align: center; }
.kg-gender-row__person img { width: 10.5rem; display: block; margin: 0 auto; }
.kg-gender-row__person span { display: block; margin-top: .6rem; font-size: 1.8rem; font-weight: 800; color: var(--kg-navy); }

.kg-donut { position: relative; width: 15rem; height: 15rem; border-radius: 50%; flex: none; }
.kg-donut--soon {
  background: repeating-linear-gradient(45deg, #f7efef, #f7efef 10px, #f1e4e4 10px, #f1e4e4 20px);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.kg-donut--soon span { font-size: 1.5rem; font-weight: 800; color: #b98a8a; line-height: 1.5; }

/* 単一値のドーナツ（年間休日など、365日中の割合のように実数から計算できるもの） */
.kg-donut-single { width: 14rem; height: 14rem; border-radius: 50%; margin: 1.8rem auto 0; position: relative; }
.kg-donut-single::before { content: ""; position: absolute; inset: 1.1rem; background: #fff; border-radius: 50%; }
.kg-donut-single__val { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Montserrat', 'Noto Sans JP', sans-serif; color: var(--kg-navy); }
.kg-donut-single__val em { font-size: 2.6rem; font-weight: 800; font-style: normal; line-height: 1; }
.kg-donut-single__val i { font-size: 1.2rem; font-weight: 700; font-style: normal; }

/* 個数のドット表示（拠点数・対応エリア・研修プログラムなど、実数をそのまま点で示す） */
.kg-dots { display: flex; gap: .9rem; margin-top: 1.8rem; justify-content: center; flex-wrap: wrap; }
.kg-dots span { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--kg-crimson); }

/* ゲージ（残業時間など、実数を公的な目安値との対比で示す） */
.kg-gauge { margin-top: 1.8rem; }
.kg-gauge__track { width: 100%; height: 1.2rem; border-radius: 99rem; background: #f3d9be; overflow: hidden; }
.kg-gauge__fill { height: 100%; border-radius: 99rem; background: linear-gradient(90deg, var(--kg-crimson-l), var(--kg-crimson)); }
.kg-gauge__note { margin-top: .9rem; font-size: 1.2rem; color: #6b5252; line-height: 1.6; }

/* 平均年齢：年代別の内訳バー（実データが無いあいだは空枠＋「準備中」） */
.kg-agebar { margin-top: 2rem; max-width: 52rem; margin-left: auto; margin-right: auto; }
.kg-agebar__row { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 0; }
.kg-agebar__row + .kg-agebar__row { border-top: .1rem solid #f2ecec; }
.kg-agebar__label { flex: 0 0 6.4rem; font-size: 1.3rem; font-weight: 700; color: var(--kg-navy); }
.kg-agebar__track { flex: 1; height: 1rem; border-radius: 99rem; background: #f7efef; }
@media screen and (max-width: 600px) {
  .kg-data-card--split { grid-template-columns: 1fr; text-align: center; }
  .kg-data-card--split .kg-data-card__num { justify-content: center; }
  .kg-data-card--split .kg-data-card__label { margin-top: 1.6rem; }
  .kg-gender-row { gap: .8rem; }
  .kg-donut, .kg-donut-single { width: 10rem; height: 10rem; }
}

/* 複数区分の内訳ドーナツ＋凡例（社内職種比率など） */
.kg-donut-legend { display: flex; align-items: center; justify-content: center; gap: 2.4rem; margin-top: 2rem; flex-wrap: wrap; }
.kg-legend { list-style: none; margin: 0; padding: 0; text-align: left; }
.kg-legend__item { display: flex; align-items: center; gap: .8rem; font-size: 1.3rem; color: var(--kg-navy); font-weight: 700; }
.kg-legend__item + .kg-legend__item { margin-top: .8rem; }
.kg-legend__dot { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; }
.kg-legend__item span { font-weight: 400; color: #6b5252; margin-left: .2rem; }
/* ===== 2026-09-15 指示書 No.15 / No.27 / No.28 ===== */
/* No.15: 看護職員規模別の割合は8区分あるので、凡例はカード幅いっぱいの多段組みにする */
.kg-legend--cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 2rem; margin-top: 1.8rem; }
.kg-legend--cols .kg-legend__item { font-size: 1.2rem; white-space: nowrap; }
.kg-legend--cols .kg-legend__item span { margin-left: auto; }
.kg-legend--cols .kg-legend__item + .kg-legend__item { margin-top: 0; }
/* No.27: 中央に文章を入れるため、このドーナツだけ大きくする（内側の白円に文字が収まる寸法） */
.kg-donut-single--lg { width: 17rem; height: 17rem; }
.kg-donut-single__val--text i { font-size: 1.15rem; font-weight: 700; font-style: normal; line-height: 1.55; text-align: center; color: var(--kg-navy); }
@media screen and (max-width: 767px) {
  .kg-donut-single--lg { width: 13rem; height: 13rem; }
  .kg-donut-single__val--text i { font-size: 1rem; line-height: 1.5; }
}
/* No.28: 年齢別の割合（横棒グラフ） */
.kg-bars { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .8rem; text-align: left; }
.kg-bars__item { display: grid; grid-template-columns: 7.4rem 1fr 4rem; align-items: center; gap: .8rem; }
.kg-bars__label { font-size: 1.25rem; font-weight: 700; color: var(--kg-navy); }
.kg-bars__track { height: 1rem; border-radius: 999px; background: #f1e4e4; overflow: hidden; }
.kg-bars__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--kg-crimson-l), var(--kg-crimson)); }
.kg-bars__val { font-size: 1.2rem; font-weight: 700; color: #6b5252; text-align: right; }
/* SPでは右端に固定バナー(.bnr-10man / 実測 x=315〜375)が常時乗るので、
   右揃えの数値がその下に潜らないように右side を空ける。
   実測: 対策前 kg-bars__val の右端321px(=6px潜り) / kg-legend--cols の右端315px(=余白0) */
@media screen and (max-width: 767px) {
  .kg-bars, .kg-legend--cols { padding-right: 2.4rem; }
}
@media screen and (max-width: 600px) { .kg-donut-legend { gap: 1.6rem; } }

/* カテゴリのみ（比率データ未確定）を示す内訳リスト */
.kg-catlist { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.kg-catlist__item { font-size: 1.25rem; font-weight: 700; color: var(--kg-navy); background: #f7efef; border-radius: 99rem; padding: .6rem 1.6rem; }

/* ---- エントリーフォーム ----
   コーポレートのお問い合わせフォームと同じ仕組み（WordPressのRESTへPOST）を
   採用向けに改修したもの。見た目はこのサイトのブランドに合わせている。 */
.kg-entry__form { margin-top: 4rem; max-width: 84rem; }
.kg-entry__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kg-entry__row {
  padding: 2.8rem 0;
  border-bottom: .1rem solid rgba(139, 0, 0, .14);
}
.kg-entry__row:first-of-type { border-top: .1rem solid rgba(139, 0, 0, .14); }
.kg-entry__label {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--kg-navy);
}
.kg-entry__req,
.kg-entry__any {
  display: inline-block;
  margin-left: .8rem;
  padding: .25rem .8rem;
  border-radius: .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  vertical-align: 2px;
}
.kg-entry__req { background: var(--kg-crimson); color: #fff; }
.kg-entry__any { background: rgba(34, 51, 78, .1); color: var(--kg-navy); }
.kg-entry__choices { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.kg-entry__choice {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 1.8rem;
  border-radius: 99.9rem;
  border: .15rem solid rgba(139, 0, 0, .22);
  background: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--kg-navy);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.kg-entry__choice:hover { border-color: var(--kg-crimson); background: #fdf4f4; }
.kg-entry__choice input { accent-color: #8b0000; width: 1.8rem; height: 1.8rem; }
.kg-entry__choice:has(input:checked) { border-color: var(--kg-crimson); background: #fdf4f4; }
.kg-entry__input {
  width: 100%;
  margin-top: 1.4rem;
  padding: 1.4rem 1.6rem;
  /* 🔴2026-08-21: common/css/main.cssのリセット
     `input:not([type=checkbox]):not([type=radio]){border:0;background:rgba(0,0,0,0)}`
     が詳細度(0,2,1)でこのクラス指定(0,1,0)に勝ち、input要素の枠線・背景が消えて
     ページ背景と同化していた（textareaはリセット対象の詳細度が低いため無事だった）。
     !importantで確実に上書きする（本ファイル内の既存の詳細度対策と同じやり方）。 */
  border: .15rem solid rgba(34, 51, 78, .3) !important;
  border-radius: .8rem;
  background: #f7f5f3 !important;
  font-size: 1.5rem;
  font-family: inherit;
  color: var(--kg-navy);
}
.kg-entry__input::placeholder { color: rgba(34, 51, 78, .4); }
.kg-entry__input:focus {
  outline: none;
  background: #fff !important;
  border-color: var(--kg-crimson) !important;
  box-shadow: 0 0 0 .3rem rgba(139, 0, 0, .12);
}
.kg-entry__textarea { resize: vertical; line-height: 1.9; }
.kg-entry__file { margin-top: 1.4rem; font-size: 1.4rem; }
.kg-entry__hint { margin-top: .8rem; font-size: 1.3rem; color: #6b5252; }
.kg-entry__line-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.2rem;
  padding: 1rem 2rem;
  border-radius: 99.9rem;
  background: var(--kg-line);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 .4rem 1.2rem rgba(6, 199, 85, .3);
  transition: transform .2s, box-shadow .2s;
}
.kg-entry__line-cta:hover { transform: translateY(-.15rem); box-shadow: 0 .6rem 1.6rem rgba(6, 199, 85, .38); }
.kg-entry__line-cta img { width: 2rem; height: 2rem; flex: none; }
.kg-entry__row--agree { border-bottom: none; }
.kg-entry__row--agree a { color: var(--kg-crimson); text-decoration: underline; }
.kg-entry__err {
  margin-top: 1.6rem;
  padding: 1.4rem 1.8rem;
  border-radius: .8rem;
  background: #fdf4f4;
  border: .15rem solid var(--kg-crimson);
  color: var(--kg-crimson);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.8;
}
.kg-entry__done {
  margin-top: 3.2rem;
  padding: 2.4rem 2.8rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #a01016, #6f0000);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.9;
}
.kg-entry__submit {
  margin-top: 3.2rem;
  min-width: 32rem;
  min-height: 6rem;
  padding: 0 3.2rem;
  border: none;
  border-radius: 99.9rem;
  background: linear-gradient(180deg, var(--kg-crimson-l), var(--kg-crimson));
  color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 .6rem 1.8rem rgba(139, 0, 0, .28);
  transition: opacity .2s, transform .2s;
}
.kg-entry__submit:hover { transform: translateY(-.2rem); }
.kg-entry__submit:disabled { cursor: default; transform: none; }
@media screen and (max-width: 767px) {
  .kg-entry__form { margin-top: 2.8rem; }
  .kg-entry__row { padding: 2rem 0; }
  .kg-entry__label { font-size: 1.45rem; }
  .kg-entry__choice { padding: .9rem 1.4rem; font-size: 1.35rem; }
  .kg-entry__input { font-size: 1.6rem; }   /* iOSの自動ズーム防止に16px以上 */
  .kg-entry__submit { width: 100%; min-width: 0; }
}

/* ---- Q&A（よくある質問ページ） ---- */
.kg-qa { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.4rem; }
.kg-qa__item {
  background: #fff;
  border: .1rem solid rgba(139, 0, 0, .1);
  border-radius: 1.4rem;
  padding: 2.8rem 3.2rem;
}
.kg-qa__q,
.kg-qa__a { display: flex; align-items: flex-start; gap: 1.4rem; line-height: 1.9; }
.kg-qa__q { font-size: 1.7rem; font-weight: 800; color: var(--kg-navy); }
.kg-qa__a { margin-top: 1.6rem; font-size: 1.5rem; color: #3d4657; }
.kg-qa__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--kg-crimson);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}
.kg-qa__mark--a { background: var(--kg-navy); }

/* ---- 選考の流れは縦一列で読ませる ---- */
.kg-steps--flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media screen and (max-width: 767px) {
  .kg-qa__item { padding: 2.2rem 1.8rem; }
  .kg-qa__q { font-size: 1.55rem; }
  .kg-qa__a { font-size: 1.4rem; }
  .kg-steps--flow { grid-template-columns: 1fr; }
  .kg-phero { padding: 10rem 2rem 5.6rem; }
  .kg-phero__ttl { font-size: 2.8rem; }
  .kg-phero__lead { font-size: 1.45rem; margin-top: 1.8rem; }
  .kg-sec { margin-top: 7.2rem; }
  .kg-sec:first-of-type { margin-top: 5.6rem; }
  .kg-sec__lead, .kg-sec__note { font-size: 1.45rem; }
  .kg-sec__sub { margin-top: 4rem; font-size: 1.7rem; }
  .kg-mvv { grid-template-columns: 1fr; gap: 1.6rem; }
  .kg-mvv__item { padding: 2.6rem 2rem; }
  .kg-mvv__txt { font-size: 1.8rem; }
  .kg-grid3, .kg-steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .kg-grid3__item, .kg-steps__item { padding: 2.2rem 1.8rem; }
  .kg-timeline__item { gap: 1.4rem; padding-left: 2rem; }
  .kg-timeline__time { flex-basis: 6.4rem; font-size: 1.45rem; }
  .kg-timeline__txt { font-size: 1.4rem; }
  .kg-table__row { flex-direction: column; gap: .6rem; padding: 1.6rem .8rem; }
  .kg-table__row dt { flex: none; font-size: 1.35rem; }
  .kg-table__row dd { font-size: 1.4rem; }
}

/* ============================================================
   13. フッター「採用情報」の行を整える
   矢印の箱を外したことで白地が途中で切れ、上下も間延びしていた。
   日本語＝左、英字＝右のカード行として組み直す。
   ============================================================ */
.footer-recruit .footer-recruit-list { display: flex; flex-direction: column; gap: 1.2rem; }
.footer-recruit .footer-recruit-list__item { width: 100%; }
.footer-recruit .footer-recruit-list__link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 8rem;
  padding: 0 3.2rem;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 .6rem 1.8rem rgba(80, 20, 20, .07);
  transition: background-color .25s ease, transform .2s ease;
}
.footer-recruit .footer-recruit-list__txtarea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}
.footer-recruit .footer-recruit-list__txt {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--kg-navy);
  line-height: 1.4;
}
.footer-recruit .footer-recruit-list__en {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--kg-crimson);
  white-space: nowrap;
}
@media (any-hover: hover) {
  .footer-recruit .footer-recruit-list__link:hover {
    background: #fdf4f4;
    transform: translateY(-.2rem);
  }
}
@media screen and (max-width: 767px) {
  .footer-recruit .footer-recruit-list { gap: 1rem; }
  .footer-recruit .footer-recruit-list__link { min-height: 6.4rem; padding: 0 1.8rem; border-radius: 1rem; }
  .footer-recruit .footer-recruit-list__txt { font-size: 1.6rem; }
  .footer-recruit .footer-recruit-list__en { font-size: 1.1rem; }
}

/* ============================================================
   12. 細い「→」を site 全体から外す（ユーザー指示）
   「いろんなところに → あるけど、これAI感でるからいらん」
   ・先輩の声カードの矢印ボタン … 箱ごと外す（デザインは変えない指示なので文言は足さない）
   ・DATAセクションの矢印       … 文言のあるピルにする
   ・働き方のピル               … 文言は既にあるので矢印だけ外す
   ・スライダーの「次へ」        … 操作に必要なので残す（装飾ではない）
   ============================================================ */
.lcl-voice .arrow01,
.member01__ico { display: none !important; }

.lcl-works .arrow01 .ico_svg { display: none !important; }

.lcl-data .lcl-data__link .arrow01 {
  position: absolute;
  inset: auto 2.4rem 2.4rem auto;
  width: auto !important;
  height: 4.8rem;
  aspect-ratio: auto !important;
  padding: 0 2.4rem;
  border-radius: 99.9rem;
  border: none !important;
  background: linear-gradient(90deg, var(--kg-crimson-l), var(--kg-crimson)) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lcl-data .lcl-data__link .arrow01 .ico_svg { display: none !important; }
.lcl-data .lcl-data__link .arrow01::before {
  content: "くわしく見る";
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .lcl-data .lcl-data__link .arrow01 {
    inset: auto 1.6rem 1.6rem auto;
    height: 4.4rem;
    padding: 0 1.8rem;
  }
  .lcl-data .lcl-data__link .arrow01::before { font-size: 1.35rem; }
}