/* ==========================================================
   はれのくに在宅クリニック杜の街 採用ページ カスタムCSS
   v0.45 (Chat-13 / 2026-05-23) — 筆記体の文字間隔を詰める
   準拠: 41_harenokuni_phaseB_top-17parts-draft.md v1.0
   配色根拠: ロゴ画像 + harenokuni-clinic.jp 本体サイト実色サンプリング
   
   Changelog v0.45:
     - .section-heading .en の letter-spacing: 0.04em → -0.02em
     - 筆記体がぎっしり詰まった手書き風の見え方に
   
   Changelog v0.44:
     - .section-heading .en を top:50% 中央配置に変更
     - translate(-50%, -55%) で中央より少し上に
     - 筆記体の濃度 opacity 0.45 → 0.30 に薄く
     - 募集要項の筆記体短縮（HTML側）
   
   Changelog v0.43:
     - .section-heading 筆記体サイズ 5.5rem → 9rem(SP)/11rem(PC) 大幅拡大
     - letter-spacing 0.04em で伸びやか感を演出
     - 日本語は margin-top で下にずらして筆記体の中央に重なる位置に
     - 13セクション全ての見出しテキストを短く端的な日本語に変更
   
   Changelog v0.42:
     - .section-heading を3層構造に全面リニューアル
     - 背景筆記体（薄葉黄緑）／日本語メイン（深緑）／英語小（飾り）の重ね合わせ
     - Mrs Saint Delafield / Noto Serif JP を Google Fonts に追加
     - ナビゲーションを7項目の日本語ラベルに変更
   
   Changelog v0.41:
     - 画像ファイル harenokuni-logo2.png のみ更新（RGB → RGBA）
     - CSS は v0.40 から変更なし
   
   Changelog v0.40:
     - .contact-card に薄いブルーグレー背景 #F2F5F7 を追加
     - カード間の縦区切り線を削除（gap で間隔調整に変更）
     - .contact-intro 内のクリニック情報ボックスHTMLを削除
     - .footer-logo max-width 200px → 300px に拡大
     - フッターのクリニック名テキストブロックを削除
     - ロゴ画像を harenokuni-logo2.png（クリニック名内包版）に差し替え
   
   Changelog v0.39:
     - Contact Us を電話/メール 2カラムカード（白背景＋ボーダー）に刷新
     - .contact-grid / .contact-card / .btn-contact-card 新規追加
     - 旧 .contact-box (濃緑グラデ) 関連スタイルは全削除
     - Footer を3カラム（ロゴ／連絡先／メニュー）構造に刷新
     - .footer-brand / .footer-contact / .footer-menu 新規追加
     - 2段目左寄せのリンク＋最下段中央コピーライト構造
   
   Changelog v0.38:
     - Selection Flow を縦長1カラム配置に統一（旧 PC3カラム/タブレット2カラム廃止）
     - flow-step::after で緑(#C8DC78)の下向き三角矢印を追加
     - :last-child::after { display:none } で最終ステップの矢印を非表示
     - gap 1.25rem → 2.5rem に拡大（矢印スペース確保）
   
   Changelog v0.37:
     - 自動再生間隔を 9秒 → 6.5秒 に短縮
     - インジケーター(ドット6個＋緑の下線)を削除
     - 再生制御ボタンを中央配置に変更（translateX オフセット削除）
     - ボタンラベルを「一時停止/再生」に変更
   
   Changelog v0.36:
     - Questionnaire に再生制御ボタン（やんわり見る / 再生する）追加
     - インジケーター右隣に配置・ロゴ葉黄緑 #C8DC78 で装飾系統一
     - モバイル(480px以下)はドットの下に折り返しレイアウト
     - JS: Bootstrap Carousel pause() / cycle() で切替制御
   
   Changelog v0.35:
     - Questionnaire スタガードを JS制御の is-visible クラス方式に変更
     - transition-delay で 0/0.45/0.9s の時差を確実に発火
     - v0.34の CSS animation 方式は Bootstrap Carousel スライド遷移と
       競合して3枚同時表示になる問題があったため修正
   
   Changelog v0.34:
     - Questionnaire 自動再生間隔を 6秒 → 9秒 に延長（HTML側 data-bs-interval）
     - スライド active 時、カード3枚を左→中央→右で時差フェードイン
       （遅延: 0.0s / 0.45s / 0.9s ／ 各0.7s fadeInUp）
     - prefers-reduced-motion 対応を追加（アクセシビリティ）
   
   Changelog v0.32:
     - .staff-voice-card に min-height: 580px の固定高さ設定
     - 本文量に関わらず3カードが同じ高さになり、ボトムも右上がりに
     - モバイル時は固定高さ解除
   
   Changelog v0.31:
     - .staff-voice-card に height:100% / display:flex / flex-direction:column
     - .staff-voice-body に flex-grow:1（本文量の違いを吸収）
     - .staff-interview-title margin-bottom: 5rem（カード上ずれ-4rem分の余裕）
   
   Changelog v0.30:
     - .staff-zigzag-1/2/3 のmargin-topを 0/-2rem/-4rem に修正
     - カード全体（トップ・ボトムとも）が右に行くほど上にずれる配置
   
   Changelog v0.29:
     - .staff-voice-card の height: 100% を撤去
     - 各カードは内容なりの自然な高さに、margin-topだけで右上がりずらし
   
   Changelog v0.28:
     - スタッフ画像のマッピング修正（img20=事務/img17=看護師/img16=医師）
     - レイアウトをジグザグ→右上がり階段（margin-top: 6rem/3rem/0）
   
   Changelog v0.27:
     - .staff-voice-photo をプレースホルダ→実画像対応に書き換え
     - .staff-interview-title 新設（スタッフインタビュー見出し）
     - .staff-zigzag-1/2/3 でジグザグレイアウト（PC時のみ）
     - .staff-interview-grid フェードイン遅延（0/0.2/0.4秒）
     - prefers-reduced-motion 対応
   
   Changelog v0.26:
     - 5箇所の数字・チェック円の背景色を hk-accent → hk-point (#C8DC78) に変更
     - 見出し下線・FVキャッチコピーアクセントと同じカラーで統一
     - 注：白文字との可読性低めなので、見え方確認後 hk-point-dark (#A5BB55) に変更も可
   
   Changelog v0.25:
     - 以下4箇所の背景色を hk-primary → hk-accent (#DC6450) に統一
       1. .recommend-item .check         (Recommendations チェック丸)
       2. .timeline-time                  (How to work a day 時間円)
       3. .position-card .position-num    (Open Position 番号円)
       4. .flow-step::before              (Selection Flow 番号円)
     - .policy-num は v0.24 で既に変更済
     - 全5箇所がテラコッタ色で統一された
   
   Changelog v0.24:
     - .policy-card .policy-num の背景色 hk-primary → hk-accent (#DC6450)
     - 数字の文字色は#fff維持
   
   Changelog v0.23:
     - .section-about-parallax::before オーバーレイ 90% → 80%
     - 本文 .about-content max-width: 800px → 1000px（画像と統一）
   
   Changelog v0.22:
     - .section-about-parallax::before オーバーレイ 75% → 90%
     - .about-main-image 新設（見出し下のメイン画像・16:9シネマチック）
     - max-width: 1000px / border-radius: 1rem（Recruit・Messageと統一）
   
   Changelog v0.21:
     - 背景画像を疑似要素 ::after に分離して filter: blur(6px) 適用
     - 白オーバーレイを 70% → 75% に濃く
     - z-index 階層整理（背景→オーバーレイ→コンテンツ）
     - overflow: hidden でblurによる端の透け防止
   
   Changelog v0.20:
     - .section-about-parallax::before 白オーバーレイを 60% → 70% に
   
   Changelog v0.19:
     - .section-about-parallax 新設（background-attachment: fixed）
     - 白オーバーレイ rgba(255,255,255,0.6)（::before 疑似要素）
     - モバイル時 scroll に自動切替（iOS Safariはfixedが効きにくい）
     - .about-cta 新設（本体サイト導線ボタン用ラッパ）
   
   Changelog v0.18:
     - 院長画像を .message-box の内部の先頭に配置
     - message-feature max-width: 900px → 1000px に拡大
     - .message-box padding を 2rem → 3.5rem 3rem (PC) に拡大
     - 画像下に3remの余白（モバイル時2rem）
     - モバイル時の小画面padding（2rem 1.5rem）追加
   
   Changelog v0.17:
     - Message を2カラム→1カラム化（v0.18でbox内配置に変更）
   
   Changelog v0.16:
     - .message-feature / .message-director-image 新設（2カラムレイアウト・v0.17で1カラム化）
   
   ==== v0.15 統一フォントサイズ規格（18px基準） ====
     本文p:                    1.125rem  (18px) ★基準
     リード文(intro等):        1.25rem   (20px)
     カード見出しh4:           1.25rem   (20px)
     大型カード見出し:         1.375rem  (22px)
       - .qa-block .qa-question
       - .staff-voice-body .lead-text
       - .position-card .position-title
       - .lead-large
     セクション日本語見出し:    1.375rem (22px)
     セクション英文大見出し:    3rem〜3.75rem (装飾大型・保護)
     FVキャッチコピー:         1.625rem〜3.375rem (FV専用・保護)
     注釈見出し:               1.125rem  (18px) ※本文と同等
     注釈本文:                 1rem      (16px) ※本文より1段下
     メタ情報:                 0.875rem  (14px)
     バッジ:                   0.8125rem (13px)
     ナビ・小型UI:             0.7rem〜1rem (独立スケール・保護)
   
   Changelog v0.15:
     - 全フォントサイズを18px基準に1段繰り上げ（63箇所一括）
     - 注釈系も繰り上げ：本文1rem / 見出し1.125rem
     - FV・ナビ・ボタン・装飾アイコンは保護
   
   Changelog v0.14:
     - 全セクション font-size を統一規格に再設計（46箇所一括統一・16px基準）
   
   Changelog v0.13:
     - .workplace-grid 新設（Bootstrap row使用・3カラムグリッドコンテナ）
   
   Changelog v0.12:
     - Recommendations / Work Policy / Open Position / Q&A の背景色を
       Messageセクションと統一（section-cream → section-soft）
     - CSSは無変更（HTMLクラス書き換えのみで対応）
   
   Changelog v0.11:
     - .recruit-vertical-wrap / .recruit-vertical-text を全撤去（縦書きキャンセル）
     - .recruit-intro を撤去（横書き本文3段落削除）
     - .recruit-feature-body 新設（左カラム横書き本文用）
     - .recruit-team-image は維持（右カラム画像）
   
   Changelog v0.10:
     - .fv-overlay を全体一様の#50B4B4 40%に変更（下部グラデーションから）
     - PART 3 Recruit に下部2カラム用スタイル群追加（v0.11で縦書き部分のみ撤去）
   
   Changelog v0.9:
     - .fv-eyebrow を撤去（RECRUITINGバッジ削除）
     - .fv-overlay のグラデーションを #50B4B4 系に変更
     - .btn-hk-fv-primary / .btn-hk-fv-outline を撤去
   
   Changelog v0.8:
     - FVを「2カラム → 幅100%×80vhフルブリード」に変更
     - .fv-slideshow / .fv-slide / .fv-overlay / .fv-content 新設
     - @keyframes kenBurns01/02/03 / fvCrossfade 追加
   ========================================================== */

/* ----------------------------------------------------------
   1. カラーパレット（本体サイト実色準拠）
   ---------------------------------------------------------- */
:root {
  /* メインカラー — 本体サイト文字色・濃ティール */
  --hk-primary: #326464;
  --hk-primary-dark: #1F4444;
  --hk-primary-text: #3C6464;
  --hk-primary-light: #50B4B4;

  /* カード枠・フッター背景・Q&A展開背景 — 淡いセージティール */
  --hk-sage: #BEDCDC;
  --hk-sage-light: #C8DCDC;
  --hk-sage-soft: #E6F0F0;
  --hk-sage-50: #F0F8F8;

  /* アクセントカラー — ロゴの鳥の頭部・くすみ赤 */
  --hk-accent: #DC6450;
  --hk-accent-dark: #B84C3C;
  --hk-accent-light: #E89180;
  --hk-accent-50: #FBE5DF;

  /* ポイントカラー — ロゴの葉の黄緑（見出し下の短い線） */
  --hk-point: #C8DC78;
  --hk-point-dark: #A5BB55;

  /* ベースカラー */
  --hk-bg-white: #FFFFFF;
  --hk-bg-cream: #F7F4EE;
  --hk-bg-soft: #EEF5F5;

  /* テキスト */
  --hk-text-dark: #1F2937;
  --hk-text-body: #374151;
  --hk-text-mute: #6B7280;
  --hk-text-light: #9CA3AF;

  /* ライン */
  --hk-border-soft: var(--hk-sage);

  /* 影 */
  --hk-shadow-sm: 0 1px 3px rgba(31, 41, 55, 0.06);
  --hk-shadow-md: 0 6px 16px rgba(31, 90, 96, 0.10);
  --hk-shadow-lg: 0 14px 36px rgba(31, 90, 96, 0.14);
}

/* ----------------------------------------------------------
   2. グローバル設定（フォントサイズ全体的に上げる）
   ---------------------------------------------------------- */
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Helvetica Neue', Arial, sans-serif;
  color: var(--hk-text-body);
  background-color: var(--hk-bg-white);
  line-height: 2;
  font-size: 1.125rem;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--hk-primary-text);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
p {
  color: var(--hk-text-body);
  font-size: 1.125rem;
  line-height: 2.1;
}
a { color: var(--hk-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--hk-primary-dark); }
@media (min-width: 768px) {
  body { font-size: 1.125rem; }
  p { font-size: 1.125rem; }
}

/* ----------------------------------------------------------
   3. セクション見出し — v0.44 日本語を筆記体の中央に重ねる
   筆記体を absolute で見出しブロック中央に配置し、
   日本語(static)はその上に重なる構造に
   ---------------------------------------------------------- */
.section-heading {
  margin-bottom: 4rem;
  text-align: center;
  position: relative;
  padding: 1.5rem 1rem 1.5rem;
}

/* ① 背景：薄い葉黄緑の筆記体 — 見出しブロック中央に配置 */
.section-heading .en {
  position: absolute;
  /* v0.44: 中央配置で日本語と重なるように */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);  /* 中央より少し上に寄せる */
  display: block;
  font-family: 'Mrs Saint Delafield', cursive;
  font-size: 9rem;
  font-weight: 400;
  color: rgba(200, 220, 120, 0.30);  /* v0.44: 0.45 → 0.30 さらに薄く */
  letter-spacing: -0.02em;  /* v0.45: 0.04em → -0.02em 文字間を詰めてぎっしり感 */
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  width: max-content;
  max-width: 130%;
}

/* ② 中央：日本語（メイン） — 静的配置で筆記体の上に自然に重なる */
.section-heading .jp {
  position: relative;
  z-index: 2;
  display: block;
  font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--hk-primary);
  letter-spacing: 0.1em;
  line-height: 1.4;
  /* v0.44: margin-top で全体の高さを確保しつつ日本語位置を調整 */
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}

/* ③ 下部：英語 小さく飾り — 筆記体の下半分が見える位置 */
.section-heading .en-small {
  position: relative;
  z-index: 2;
  display: block;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 0.9375rem;
  font-weight: 500;
  font-style: italic;
  color: var(--hk-primary);
  opacity: 0.7;
  letter-spacing: 0.18em;
  line-height: 1.4;
  margin-bottom: 2rem;  /* 筆記体の下半分のためのスペース */
}

/* 旧 ::after の短線は削除 */
.section-heading::after {
  display: none;
}

/* レスポンシブ */
@media (max-width: 767.98px) {
  .section-heading {
    padding: 1rem 0.5rem 1rem;
    margin-bottom: 2.5rem;
  }
  .section-heading .en {
    font-size: 5rem;
  }
  .section-heading .jp {
    font-size: 1.625rem;
    margin-top: 1.75rem;
  }
  .section-heading .en-small {
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    margin-bottom: 1.25rem;
  }
}
@media (min-width: 992px) {
  .section-heading {
    padding: 2rem 1rem 2rem;
  }
  .section-heading .en {
    font-size: 11rem;
  }
  .section-heading .jp {
    font-size: 2.5rem;
    margin-top: 3.5rem;
  }
  .section-heading .en-small {
    margin-bottom: 2.5rem;
  }
}

/* ----------------------------------------------------------
   4. ナビゲーション
   ---------------------------------------------------------- */
.navbar-hk {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--hk-shadow-sm);
  padding: 0.5rem 0;
}
.navbar-hk .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  color: var(--hk-text-dark);
  line-height: 1.3;
}
.navbar-hk .navbar-brand-wrap { display: flex; align-items: center; }
.navbar-hk .navbar-brand-wrap .navbar-brand { margin-right: 0; }
.navbar-hk .navbar-brand img { height: 64px; width: auto; max-width: 340px; }
.navbar-hk .navbar-brand-text { font-size: 1rem; color: var(--hk-primary); }
.navbar-hk .navbar-brand-text small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--hk-text-mute);
  letter-spacing: 0.05em;
}
.navbar-hk .navbar-brand-suffix {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hk-primary);
  background-color: var(--hk-sage);
  padding: 0.2rem 0.75rem;
  border-radius: 0.3rem;
  letter-spacing: 0.03em;
  margin-left: 0.6rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.navbar-hk .navbar-brand-suffix .suffix-top {
  font-weight: 800;
  font-size: 1.25em;
  letter-spacing: 0.06em;
  margin-left: 0.15em;
}
.navbar-hk .navbar-brand-suffix:hover,
.navbar-hk .navbar-brand-suffix:focus {
  background-color: var(--hk-primary);
  color: #fff;
}
@media (max-width: 575px) {
  .navbar-hk .navbar-brand img { height: 48px; max-width: 250px; }
  .navbar-hk .navbar-brand-suffix { font-size: 0.65rem; padding: 0.1rem 0.5rem; }
}
.navbar-hk .nav-link {
  color: var(--hk-text-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 1rem !important;
}
.navbar-hk .nav-link:hover { color: var(--hk-primary); }

/* ナビCTAボタン — 本体サイト準拠（薄ミント緑→ホバーでセージティール） */
.navbar-hk .nav-link.cta {
  background-color: #F1FBE3;
  color: var(--hk-primary) !important;
  border: 1.5px solid var(--hk-primary);
  border-radius: 999px;
  padding: 0.55rem 1.6rem !important;
  margin-left: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.25s ease;
}
.navbar-hk .nav-link.cta:hover {
  background-color: var(--hk-sage);
  color: var(--hk-primary) !important;
}

/* ----------------------------------------------------------
   5. ファーストビュー（FV）— v0.8 スライドショー版
      幅100% × 高さ80vh（モバイル70vh）
      3枚クロスフェード（5秒×3＝15秒1サイクル）
      Ken Burns風 zoom-in（scale 1.0→1.05）
   ---------------------------------------------------------- */
.fv {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 540px;
  max-height: 820px;
  overflow: hidden;
  background-color: #1a3a3a; /* 画像読込前のフォールバック */
}

/* スライドショーコンテナ（絶対配置で重ね合わせ） */
.fv-slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 個別スライド（3枚を重ねてopacityで切り替え） */
.fv-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fvCrossfade 15s infinite;
  will-change: opacity;
}

.fv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}

/* スライド1：中央からzoom-in（0秒スタート） */
.fv-slide-1 {
  animation-delay: 0s;
}
.fv-slide-1 img {
  transform-origin: center center;
  animation: kenBurns01 15s infinite;
}

/* スライド2：左上からzoom-in（5秒スタート） */
.fv-slide-2 {
  animation-delay: 5s;
}
.fv-slide-2 img {
  transform-origin: left top;
  animation: kenBurns02 15s infinite;
  animation-delay: 5s;
}

/* スライド3：右下からzoom-in（10秒スタート） */
.fv-slide-3 {
  animation-delay: 10s;
}
.fv-slide-3 img {
  transform-origin: right bottom;
  animation: kenBurns03 15s infinite;
  animation-delay: 10s;
}

/* クロスフェード（opacity切替）
   0-3%   : fade in
   3-33%  : 表示中（5秒のうち約4.5秒可視）
   33-37% : fade out
   37-100%: 非表示（他スライド表示中） */
@keyframes fvCrossfade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  33%  { opacity: 1; }
  37%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Ken Burns zoom-in：表示中の5秒間でscale 1.0→1.05
   各スライドの表示区間（自分のanimation-delayから5秒）で完結 */
@keyframes kenBurns01 {
  0%   { transform: scale(1.0); }
  33%  { transform: scale(1.05); }
  100% { transform: scale(1.05); }
}
@keyframes kenBurns02 {
  0%   { transform: scale(1.0); }
  33%  { transform: scale(1.05); }
  100% { transform: scale(1.05); }
}
@keyframes kenBurns03 {
  0%   { transform: scale(1.0); }
  33%  { transform: scale(1.05); }
  100% { transform: scale(1.05); }
}

/* 全体オーバーレイ — v0.10: 一様な#50B4B4 40%（サブティール） */
.fv-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(80, 180, 180, 0.40);
  pointer-events: none;
}

/* テキスト固定レイヤー（下寄せ） */
.fv-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding-bottom: 3.5rem;
  color: #fff;
}
.fv-content .container {
  position: relative;
}

/* v0.9: .fv-eyebrow（RECRUITINGバッジ）は撤去 */

/* キャッチコピー */
.fv-headline {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.fv-headline .accent {
  color: var(--hk-point); /* ロゴ葉の黄緑 — 黒背景に映える */
}

/* サブコピー */
.fv-subhead {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.9;
  margin-bottom: 2rem;
  max-width: 680px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* v0.9: .btn-hk-fv-primary / .btn-hk-fv-outline は撤去
   FV内のCTAはv0.7オリジナルの .btn-hk-primary / .btn-hk-outline を使用 */

/* レスポンシブ */
@media (min-width: 768px) {
  .fv-headline { font-size: 2.5rem; }
  .fv-subhead { font-size: 1.0625rem; }
  .fv-content { padding-bottom: 4rem; }
}
@media (min-width: 992px) {
  .fv-headline { font-size: 3rem; line-height: 1.5; }
  .fv-subhead { font-size: 1.125rem; }
  .fv-content { padding-bottom: 5rem; }
}
@media (min-width: 1200px) {
  .fv-headline { font-size: 3.375rem; }
}

/* モバイル時：高さ少し抑え目＋テキスト調整 */
@media (max-width: 767.98px) {
  .fv {
    height: 70vh;
    min-height: 480px;
  }
  .fv-content {
    padding-bottom: 2.5rem;
  }
  .fv-headline {
    font-size: 1.625rem;
    line-height: 1.55;
  }
  .fv-cta .btn {
    padding: 0.7rem 1.4rem;
    font-size: 0.9375rem;
  }
}

/* ----------------------------------------------------------
   6. ボタン（本体サイト準拠：セージ塗り＋ティール枠＋ティール文字）
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   ボタン（本体サイト準拠：薄ミント緑→濃ティールへのホバー）
   ---------------------------------------------------------- */
.btn-hk-primary {
  background-color: #F1FBE3;
  color: var(--hk-primary);
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--hk-primary);
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
  font-size: 1.0625rem;
}
.btn-hk-primary:hover {
  background-color: var(--hk-sage);
  color: var(--hk-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(50, 100, 100, 0.25);
}
.btn-hk-outline {
  background-color: #F1FBE3;
  color: var(--hk-primary);
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--hk-primary);
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
  font-size: 1.125rem;
}
.btn-hk-outline:hover {
  background-color: var(--hk-sage);
  color: var(--hk-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(50, 100, 100, 0.25);
}
.btn-hk-arrow::after {
  content: ' →';
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
}
.btn-hk-arrow:hover::after { transform: translateX(3px); }

/* ----------------------------------------------------------
   7. セクション共通
   ---------------------------------------------------------- */
.section { padding: 5rem 0; }
.section-cream { background-color: var(--hk-bg-cream); }
.section-soft { background-color: var(--hk-sage-soft); }
/* v0.51: 白セクション統一色（千秋さん確定）— ほんのり温かみのあるほぼ白 */
.section-near-white { background-color: #FCFBF7; }
@media (min-width: 992px) { .section { padding: 7rem 0; } }

/* ----------------------------------------------------------
   8. Recruit セクション
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   8. Recruit セクション — v0.11: 中央見出し → 左:本文 / 右:画像
   ---------------------------------------------------------- */
.recruit-feature {
  margin-top: 3rem;
}

/* 左カラム：横書き本文 */
.recruit-feature-body p {
  font-size: 1.125rem;
  line-height: 2.1;
  color: var(--hk-text-body);
  margin-bottom: 1.5rem;
}
.recruit-feature-body p:last-child {
  margin-bottom: 0;
}
/* v0.14: PC時の本文拡大は撤去（全セクション1rem統一） */

/* 右カラム：スタッフ集合写真 */
.recruit-team-image {
  margin: 0;
}
.recruit-team-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: var(--hk-shadow-md);
  display: block;
}

/* レスポンシブ */
@media (max-width: 991.98px) {
  .recruit-feature {
    margin-top: 2rem;
  }
  .recruit-team-image {
    margin-top: 1.5rem;
  }
}

/* ----------------------------------------------------------
   9. Recommendations セクション（カード枠＝セージ）
   ---------------------------------------------------------- */
.recommend-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.recommend-item {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 0.75rem;
  padding: 1.5rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all 0.25s ease;
}
.recommend-item:hover {
  background-color: var(--hk-sage-soft);
  transform: translateY(-2px);
  box-shadow: var(--hk-shadow-md);
}
.recommend-item .check {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  background-color: var(--hk-point);  /* v0.26: テラコッタ→ロゴ葉の黄緑#C8DC78 */
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  margin-top: 0.125rem;
}
.recommend-item p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--hk-text-dark);
}
@media (min-width: 768px) { .recommend-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .recommend-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ----------------------------------------------------------
   10. Our Workplace セクション（カード枠＝セージ）
   ---------------------------------------------------------- */
.workplace-group-title {
  margin: 2.5rem 0 1.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--hk-primary);
}
/* v0.13: 3カラムグリッドコンテナ */
.workplace-grid {
  margin-bottom: 1rem;
}
.workplace-card {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 1rem;
  padding: 1.75rem 1.75rem;
  /* v0.13: グリッド内で高さを揃える */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.workplace-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hk-primary);
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  line-height: 1.55;
}
.workplace-card h4 .badge-feature {
  display: inline-block;
  background-color: var(--hk-accent-50);
  color: var(--hk-accent-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.workplace-card p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--hk-text-body);
  /* v0.13: グリッド内でカード本文を伸ばして高さ均等化 */
  flex-grow: 1;
}
.workplace-notes {
  background-color: var(--hk-sage-light);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  margin-top: 2rem;
}
.workplace-notes h5 {
  font-size: 1.125rem;
  color: var(--hk-primary-dark);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.workplace-notes p {
  font-size: 1rem;
  color: var(--hk-text-body);
  line-height: 1.85;
  margin-bottom: 0.875rem;
}
.workplace-notes p:last-child { margin-bottom: 0; }

/* v0.14: 統一サイズ仕様準拠 — workplace-card のサイズはモバイル/PC共に標準値 */
/* （メディアクエリ削除済・カード見出しと本文はベーススタイルで統一） */

/* ----------------------------------------------------------
   11. Message セクション（カード枠＝セージ）
   ---------------------------------------------------------- */

/* v0.18: message-box内部の先頭に画像配置・上下3rem以上の余白 */
.message-feature {
  /* max-width は HTML inline style で 1000px 指定 */
}

/* 院長画像（message-box内部の先頭・box内余白で囲まれる） */
.message-director-image {
  margin: 0 0 3rem 0;  /* 画像の下に3remの余白（本文との間） */
  width: 100%;
}
.message-director-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 35%;  /* 人物の顔をやや上寄りに合わせる */
  border-radius: 1rem;
  box-shadow: var(--hk-shadow-md);
  display: block;
}

/* モバイル時：余白を少しだけ圧縮 */
@media (max-width: 767.98px) {
  .message-director-image {
    margin-bottom: 2rem;
  }
}

.message-box {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 1.25rem;
  /* v0.18: 画像を内包するためpadding拡大（上下3rem以上） */
  padding: 3rem 2.5rem;
}
.message-box p {
  font-size: 1.125rem;
  line-height: 2.1;
  color: var(--hk-text-body);
  margin-bottom: 1.25rem;
}
.message-box p:last-child { margin-bottom: 0; }
.message-box ul { list-style: none; padding-left: 0; margin: 1.5rem 0; }
.message-box ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.875rem;
  line-height: 2;
  font-size: 1.125rem;
}
.message-box ul li::before {
  content: '';
  position: absolute; left: 0; top: 0.95em;
  width: 8px; height: 8px;
  background-color: var(--hk-accent);
  border-radius: 50%;
}
.message-readmore {
  text-align: center;
  margin: 1.5rem 0;
  color: var(--hk-primary);
  font-weight: 500;
  font-size: 1.125rem;
  cursor: pointer;
  user-select: none;
}
.message-signature {
  text-align: right;
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: 1.125rem;
  color: var(--hk-text-mute);
}
.message-signature strong {
  display: block;
  color: var(--hk-primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.25rem;
}
/* v0.18: PC時のmessage-box padding（画像も内包する想定で少しゆったり） */
@media (min-width: 768px) { .message-box { padding: 3.5rem 3rem; } }
/* モバイル時：padding少し圧縮 */
@media (max-width: 575.98px) { .message-box { padding: 2rem 1.5rem; } }

/* ----------------------------------------------------------
   12. About us セクション — v0.19 背景画像パララックス
   ---------------------------------------------------------- */

/* セクション全体に固定背景画像＋白オーバーレイ */
.section-about-parallax {
  position: relative;
  /* v0.21: 背景画像は ::after で別レイヤーとして配置（blur適用のため） */
  /* paddingは .section から継承 */
  overflow: hidden;
}

/* v0.21: 背景画像レイヤー（blur適用のため疑似要素で分離） */
.section-about-parallax::after {
  content: '';
  position: absolute;
  inset: -20px;  /* blurで端がぼけて透けないよう少し外側に拡張 */
  background-image: url('../images/about-bg-moriomachi.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;  /* パララックス効果 */
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

/* 白オーバーレイ（rgba(255,255,255,0.8)）— v0.23: 80% */
.section-about-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  pointer-events: none;
}

/* コンテンツはオーバーレイの上に */
.section-about-parallax > .container {
  position: relative;
  z-index: 2;
}

/* iOS/モバイルでは background-attachment: fixed が効きにくいので
   scroll に切り替え、パララックス効果は省略しつつ画像は維持 */
@media (max-width: 991.98px) {
  .section-about-parallax::after {
    background-attachment: scroll;
  }
}

.about-content p {
  font-size: 1.125rem;
  line-height: 2.1;
  color: var(--hk-text-body);
  margin-bottom: 1.25rem;
}

/* v0.22: 見出し下のメイン画像（杜の街グレース外観） */
.about-main-image {
  margin: 0 auto 3rem;
  width: 100%;
}
.about-main-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 1rem;
  box-shadow: var(--hk-shadow-md);
  display: block;
}
@media (max-width: 767.98px) {
  .about-main-image {
    margin-bottom: 2rem;
  }
}

/* v0.19: 本体サイト導線ボタン用ラッパ */
.about-cta {
  margin-top: 3rem;
}

/* ----------------------------------------------------------
   13. Work Policy セクション（カード枠＝セージ）
   ---------------------------------------------------------- */
.policy-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.policy-card {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.25s ease;
  height: 100%;
}
.policy-card:hover {
  background-color: var(--hk-sage-soft);
  transform: translateY(-2px);
  box-shadow: var(--hk-shadow-md);
}
.policy-card .policy-num {
  display: inline-block;
  background-color: var(--hk-point);  /* v0.26: テラコッタ→ロゴ葉の黄緑#C8DC78 */
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.25rem;
}
.policy-card h4 {
  font-size: 1.25rem;
  color: var(--hk-primary);
  margin-bottom: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}
.policy-card p {
  font-size: 1.125rem;
  line-height: 1.95;
  color: var(--hk-text-body);
  margin: 0;
}
@media (min-width: 768px) { .policy-grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------
   14. How to work a day セクション（タイムライン）
   ---------------------------------------------------------- */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before {
  content: '';
  position: absolute; left: 14px; top: 8px; bottom: 8px;
  width: 2px;
  background-color: var(--hk-sage);
}
.timeline-item { position: relative; padding-bottom: 1.75rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-time {
  position: absolute; left: -2.25rem; top: 0;
  width: 32px; height: 32px;
  background-color: var(--hk-point);  /* v0.26: テラコッタ→ロゴ葉の黄緑#C8DC78 */
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 1;
}
.timeline-item .time-label {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--hk-primary);
  margin-bottom: 0.6rem;
  display: block;
}
.timeline-item p {
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--hk-text-body);
  margin: 0;
  background-color: var(--hk-bg-white);
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--hk-sage);
  border-radius: 0.75rem;
}

/* ----------------------------------------------------------
   15. Our Colleague セクション（カード枠＝セージ）
   ---------------------------------------------------------- */
.staff-voice-card {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  /* v0.55: 高さ100%で親grid(align-items:stretch)に合わせて3枚同じ高さに揃える
     min-height は廃止（文字数に応じて自然に伸び、3枚の中で最長に揃う） */
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.staff-voice-card .staff-voice-body {
  flex-grow: 1;  /* 本文量の違いを吸収 */
}
@media (max-width: 767.98px) {
  /* モバイル時は高さ揃え解除（自然な高さで縦並び） */
  .staff-voice-card {
    height: auto;
  }
}
.staff-voice-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hk-shadow-md);
}
/* v0.27: staff-voice-photo を実画像対応に */
.staff-voice-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.staff-voice-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;  /* 人物の顔を上寄りに */
  display: block;
}
.staff-voice-body { padding: 1.75rem; }
.staff-voice-body .lead-text {
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--hk-primary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.staff-voice-body .staff-meta {
  font-size: 0.875rem;
  color: var(--hk-text-mute);
  margin-bottom: 0.75rem;
}
.staff-voice-body .voice-text {
  font-size: 1.125rem;
  line-height: 1.95;
  color: var(--hk-text-body);
  margin: 0;
}

/* v0.27: スタッフインタビュー見出し */
.staff-interview-title {
  font-size: 1.25rem;
  color: var(--hk-accent);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 5rem;  /* v0.31: カード上ずれ-4rem分の余裕＋通常マージン */
}
@media (max-width: 767.98px) {
  .staff-interview-title {
    margin-bottom: 2rem;  /* モバイル時はカード位置ずれなしなので標準マージン */
  }
}

/* v0.57: 段差制御はフェードイン制御に統合（下方の .staff-interview-grid.is-visible > 各zigzagを参照）
   ここではダミーで残置せず、フェードCSSにすべてのtransformを集約 */

/* v0.27: 順番にフェードインアニメ（0秒・0.2秒・0.4秒遅延） */
.staff-interview-grid {
  margin-top: 7rem;   /* v0.58: 段差-6rem分の吸収＋通常の見出しマージン */
  /* v0.58: transform: translateY(-6rem) で上にずらした分、
     下にもmargin-bottomで6rem分のスペースを確保（次セクションとの間隔保持） */
  margin-bottom: 6rem;
}
@media (max-width: 767.98px) {
  .staff-interview-grid {
    margin-top: 2rem;
    margin-bottom: 0;  /* モバイルはズレなしのため不要 */
  }
}
.staff-interview-grid > [class*="staff-zigzag-"] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* v0.57: フェードイン完了時のtransformに段差を組み込む（PC時のみ）
   PCでは zigzag-2 → -2rem、zigzag-3 → -4rem で右上がり
   モバイルでは段差なしで通常の縦並び */
.staff-interview-grid.is-visible > .staff-zigzag-1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.staff-interview-grid.is-visible > .staff-zigzag-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.staff-interview-grid.is-visible > .staff-zigzag-3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}
/* PC時のみ段差を入れる（モバイルは縦並びのため段差不要） */
@media (min-width: 768px) {
  .staff-interview-grid.is-visible > .staff-zigzag-2 {
    transform: translateY(-3rem);  /* v0.58: -2rem → -3rem しっかり段差 */
  }
  .staff-interview-grid.is-visible > .staff-zigzag-3 {
    transform: translateY(-6rem);  /* v0.58: -4rem → -6rem しっかり段差 */
  }
}

/* Reduced motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .staff-interview-grid > [class*="staff-zigzag-"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ----------------------------------------------------------
   16. Questionnaire セクション（カード枠＝セージ）
   ---------------------------------------------------------- */
.qa-block { margin-bottom: 3rem; }
.qa-block .qa-question {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--hk-primary);
  margin-bottom: 1.5rem;
}
.qa-answer-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.qa-answer {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 0.75rem;
  padding: 1.5rem;
}
.qa-answer .answer-by {
  font-size: 0.875rem;
  color: var(--hk-text-mute);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.qa-answer .answer-headline {
  font-weight: 700;
  color: var(--hk-primary);
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 0.625rem;
}
.qa-answer p {
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--hk-text-body);
  margin: 0;
}
@media (min-width: 768px) { .qa-answer-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ----------------------------------------------------------
   16-2. Questionnaire スライダー — v0.33
   横幅いっぱいのフルブリードスライダー
   ---------------------------------------------------------- */

/* セクション全体は横幅いっぱいに（containerの幅制限を回避） */
.section-questionnaire-fullwidth {
  overflow: hidden;
}

/* スライダーラッパ：横幅100%で外側マージン削除 */
.questionnaire-slider-wrap {
  width: 100%;
  margin-top: 3rem;
  position: relative;
}

/* Bootstrap carousel の内部padding確保（左右ボタンとの余白） */
.questionnaire-slider-wrap .carousel-item > .container {
  padding-top: 1rem;
  padding-bottom: 4rem;  /* 下部のインジケーター用余白 */
}

/* インジケーター（下部ドット）：白丸＋アクセント色のアクティブ */
.questionnaire-indicators {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  list-style: none;
}
.questionnaire-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--hk-primary);
  background-color: transparent;
  margin: 0 6px;
  padding: 0;
  opacity: 0.6;
  transition: all 0.3s ease;
  text-indent: -9999px;  /* テキスト非表示 */
}
.questionnaire-indicators button.active {
  background-color: var(--hk-primary);
  opacity: 1;
  transform: scale(1.2);
}

/* ----------------------------------------------------------
   16-4. Questionnaire 再生制御ボタン — v0.37
   インジケーター(ドット)を削除し、再生制御ボタンを中央に配置
   配色：装飾系統一のためロゴ葉黄緑 --hk-point (#C8DC78) を使用
   ---------------------------------------------------------- */
.questionnaire-playctrl-wrap {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;  /* ラップ自体は透過、ボタンだけ反応 */
  z-index: 16;
}
.questionnaire-playctrl {
  pointer-events: auto;
  /* v0.37: インジケーター削除に伴い中央配置（translateX削除） */

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 999px;
  background-color: var(--hk-point);
  color: var(--hk-primary);
  font-size: 0.8125rem;  /* 13px */
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.questionnaire-playctrl:hover {
  background-color: var(--hk-point-dark);
  color: var(--hk-primary);
}
.questionnaire-playctrl:focus-visible {
  outline: 2px solid var(--hk-point-dark);
  outline-offset: 2px;
}
.questionnaire-playctrl .playctrl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.questionnaire-playctrl .icon-pause { display: inline-block; }
.questionnaire-playctrl .icon-play { display: none; }

/* 一時停止中（paused）の状態：アイコンを▶に切替・ラベル変更 */
.questionnaire-playctrl[data-state="paused"] .icon-pause { display: none; }
.questionnaire-playctrl[data-state="paused"] .icon-play { display: inline-block; }

/* モバイル時：ボタンを少し小さく */
@media (max-width: 767.98px) {
  .questionnaire-playctrl {
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
  }
}

/* 前後ボタン：左右に丸ボタン配置 */
.questionnaire-control-prev,
.questionnaire-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--hk-primary);
  border: none;
  border-radius: 50%;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.questionnaire-control-prev { left: 1rem; }
.questionnaire-control-next { right: 1rem; }
.questionnaire-control-prev:hover,
.questionnaire-control-next:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
  background-color: var(--hk-primary-dark);
}

.questionnaire-control-prev .carousel-control-prev-icon,
.questionnaire-control-next .carousel-control-next-icon {
  width: 18px;
  height: 18px;
  background-size: 100% 100%;
  filter: brightness(0) invert(1);  /* 白アイコン */
}

/* モバイル時：前後ボタンを少し小さく */
@media (max-width: 767.98px) {
  .questionnaire-control-prev,
  .questionnaire-control-next {
    width: 36px;
    height: 36px;
  }
  .questionnaire-control-prev { left: 0.5rem; }
  .questionnaire-control-next { right: 0.5rem; }
  .questionnaire-slider-wrap .carousel-item > .container {
    padding-bottom: 3rem;
  }
}

/* ----------------------------------------------------------
   16-3. Questionnaire カード3枚スタガード出現 — v0.35
   切替間隔は 9秒（HTML側 data-bs-interval="9000"）
   JS（slid.bs.carousel イベント）で is-visible クラスを付与・除去
   左→中央→右の順で transition による時差フェードイン
   ---------------------------------------------------------- */

/* デフォルト：全カードは透明・少し下にずらしておく */
.questionnaire-slider-wrap .carousel-item .qa-answer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* is-visible が付いたら表示。transition-delay で時差を出す */
.questionnaire-slider-wrap .carousel-item .qa-answer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 左→中央→右の順番で遅延 */
.questionnaire-slider-wrap .carousel-item .qa-answer:nth-child(1).is-visible {
  transition-delay: 0.0s;
}
.questionnaire-slider-wrap .carousel-item .qa-answer:nth-child(2).is-visible {
  transition-delay: 0.45s;
}
.questionnaire-slider-wrap .carousel-item .qa-answer:nth-child(3).is-visible {
  transition-delay: 0.9s;
}

/* prefers-reduced-motion 対応（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .questionnaire-slider-wrap .carousel-item .qa-answer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------
   17. Open Position セクション（カード枠＝セージ）
   ---------------------------------------------------------- */
.position-card {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 1.25rem;
  padding: 2.25rem;
  margin-bottom: 1.5rem;
  transition: all 0.25s ease;
}
.position-card:hover {
  background-color: var(--hk-sage-soft);
  box-shadow: var(--hk-shadow-md);
}
.position-card .position-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--hk-primary);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.position-card .position-title .position-num {
  display: inline-block;
  background-color: var(--hk-point);  /* v0.26: テラコッタ→ロゴ葉の黄緑#C8DC78 */
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  font-size: 1.125rem;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
}
.position-table { width: 100%; margin-bottom: 1.75rem; font-size: 1.125rem; }
.position-table tr { border-bottom: 1px solid var(--hk-sage); }
.position-table tr:last-child { border-bottom: none; }
.position-table th, .position-table td {
  padding: 1rem 0.75rem;
  vertical-align: top;
  text-align: left;
}
.position-table th {
  color: var(--hk-primary);
  font-weight: 600;
  width: 30%;
  font-size: 1.125rem;
  background-color: var(--hk-sage-light);
  border-radius: 0;
}
.position-table td {
  color: var(--hk-text-body);
  line-height: 1.8;
  font-size: 1.125rem;
}
@media (min-width: 768px) { .position-table th { width: 22%; } }

/* ----------------------------------------------------------
   18. Selection Flow セクション（カード枠＝セージ）
   ---------------------------------------------------------- */
.flow-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;  /* v0.38: 矢印を入れるため間隔を広げる */
  counter-reset: step;
}
.flow-step {
  background-color: var(--hk-bg-white);
  border: 1px solid var(--hk-sage);
  border-radius: 0.875rem;
  padding: 1.75rem 1.75rem 1.75rem 4.5rem;
  position: relative;
  counter-increment: step;
}
.flow-step::before {
  content: counter(step);
  position: absolute;
  left: 1.5rem; top: 1.5rem;
  width: 40px; height: 40px;
  background-color: var(--hk-point);  /* v0.26: テラコッタ→ロゴ葉の黄緑#C8DC78 */
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: 700;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.25rem;
}
/* v0.38: カード間の緑下向き三角矢印（最終カード以外） */
.flow-step::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2rem;  /* gap 2.5rem の中央あたり（カード下端から下にはみ出す） */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 16px solid var(--hk-point);  /* ロゴ葉黄緑の下向き三角 */
  pointer-events: none;
}
.flow-step:last-child::after {
  display: none;  /* 最終ステップは矢印不要 */
}
.flow-step h4 {
  font-size: 1.25rem;
  color: var(--hk-primary);
  margin-bottom: 0.625rem;
  font-weight: 700;
}
.flow-step p {
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--hk-text-body);
  margin: 0;
}
/* v0.38: 縦長1カラム維持のため、旧レスポンシブ2/3カラム指定を削除 */

/* ----------------------------------------------------------
   19. Q&A セクション（本体サイト準拠：＋/− アイコン式・展開時セージ背景）
   ---------------------------------------------------------- */
.faq-list .accordion-item {
  border: none;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--hk-sage);
  background-color: var(--hk-bg-white);
  margin-bottom: 0;
}
.faq-list .accordion-button {
  padding: 1.5rem 1rem 1.5rem 3rem;
  font-weight: 600;
  color: var(--hk-primary);
  background-color: var(--hk-bg-white);
  font-size: 1.125rem;
  line-height: 1.6;
  box-shadow: none;
  position: relative;
}
.faq-list .accordion-button::before {
  content: '+';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--hk-point-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.faq-list .accordion-button:not(.collapsed)::before {
  content: '−';
}
.faq-list .accordion-button::after {
  display: none !important;
}
.faq-list .accordion-button:not(.collapsed) {
  background-color: var(--hk-bg-white);
  color: var(--hk-primary);
}
.faq-list .accordion-button:focus {
  box-shadow: none;
}
.faq-list .accordion-body {
  padding: 1.5rem 1.75rem 1.5rem 3rem;
  background-color: var(--hk-sage);
  font-size: 1.125rem;
  line-height: 1.95;
  color: var(--hk-text-body);
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}
.placeholder-hilight {
  background-color: transparent;
  color: #CCCCCC;  /* v0.33: 赤(hk-accent-dark) → グレー */
  padding: 0;
  font-size: 1em;
}

/* ----------------------------------------------------------
   20. Contact Us セクション — v0.39 全面リニューアル
   電話/メール の2カラムカードレイアウト（シンプル＆わかりやすく）
   ---------------------------------------------------------- */
.contact-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.contact-intro .lead {
  color: var(--hk-text-body);
  font-size: 1.25rem;
  line-height: 2;
  margin-bottom: 1.75rem;
}
.contact-intro .clinic-info {
  background-color: var(--hk-sage-soft);
  border-radius: 0.875rem;
  padding: 1.5rem 1.75rem;
  font-size: 1.125rem;
  line-height: 1.95;
  color: var(--hk-primary);
  border: 1px solid var(--hk-sage-light);
}
.contact-intro .clinic-info strong {
  color: var(--hk-primary);
  font-size: 1.1875rem;
  font-weight: 700;
}

/* 電話/メール 2カラムグリッド */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
}
.contact-card {
  text-align: center;
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* v0.40: とても薄いブルーグレー背景 */
  background-color: #F2F5F7;
  border-radius: 1rem;
}
.contact-card-icon {
  color: var(--hk-primary);
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-card-title {
  font-size: 1.25rem;
  color: var(--hk-primary);
  font-weight: 700;
  margin-bottom: 0.875rem;
}
.contact-card-desc {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--hk-text-body);
  margin-bottom: 1.25rem;
}
.contact-card-detail {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--hk-primary);
}
.contact-card-detail a {
  color: var(--hk-primary);
  text-decoration: none;
}
.contact-card-detail a:hover {
  color: var(--hk-primary-dark);
}
.contact-card-mail {
  font-size: 0.9375rem;
  word-break: break-all;
}
.contact-card-note {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--hk-text-muted, #808080);
}
/* ボタン：参考デザイン準拠の白背景・濃緑文字・薄いボーダー＋矢印 */
.btn-contact-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--hk-bg-white);
  color: var(--hk-primary);
  border: 1px solid var(--hk-primary);
  border-radius: 999px;
  padding: 0.875rem 2.25rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.25s ease;
  margin-top: auto;
  text-decoration: none;
}
.btn-contact-card:hover {
  background-color: var(--hk-primary);
  color: var(--hk-bg-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(50, 100, 100, 0.15);
}
.btn-contact-card .arrow {
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.btn-contact-card:hover .arrow {
  transform: translateX(3px);
}

/* ----------------------------------------------------------
   21. Footer — v0.39 全面リニューアル
   3カラム構造：左ロゴ／中央連絡先／右メニュー
   2段目：左寄せのリンク（公式サイト・プライバシー）
   最下段：中央のコピーライト
   ---------------------------------------------------------- */
.footer-hk {
  background-color: var(--hk-sage);
  color: var(--hk-primary);
  padding: 3.5rem 0 2rem;
}
.footer-hk a {
  color: var(--hk-primary);
  transition: color 0.2s ease;
  text-decoration: none;
}
.footer-hk a:hover {
  color: var(--hk-primary-dark);
}

/* 1段目：3カラム */
.footer-hk .footer-main {
  margin-bottom: 2rem;
}

/* 左：ロゴ（クリニック名はロゴ内に含まれるためテキスト不要・v0.40で大幅拡大） */
.footer-hk .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-hk .footer-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
}

/* 中央：住所・電話・メール */
.footer-hk .footer-contact .footer-address {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1rem;
  color: var(--hk-primary);
  font-style: normal;
}
.footer-hk .footer-contact .footer-tel {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.footer-hk .footer-contact .footer-tel a {
  font-weight: 700;
  font-size: 1.0625rem;
}
.footer-hk .footer-contact .footer-tel-note {
  font-size: 0.85rem;
  color: var(--hk-primary);
  opacity: 0.75;
}
.footer-hk .footer-contact .footer-mail {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
  word-break: break-all;
}
.footer-hk .footer-contact .footer-mail a {
  font-weight: 600;
}

/* 右：メニュー */
.footer-hk .footer-menu .footer-nav {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
}
.footer-hk .footer-menu .footer-nav li a {
  font-size: 1rem;
  font-weight: 500;
}
.footer-hk .footer-menu .footer-nav li a:hover {
  color: var(--hk-primary-dark);
  text-decoration: underline;
}

/* 2段目：左寄せのリンク（公式サイト・プライバシー） */
.footer-hk .footer-links {
  font-size: 0.9375rem;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(50, 100, 100, 0.15);
}
.footer-hk .footer-links a {
  font-weight: 500;
}
.footer-hk .footer-links a:hover {
  text-decoration: underline;
}
.footer-hk .footer-links-divider {
  color: rgba(50, 100, 100, 0.3);
}

/* 最下段：中央のコピーライト */
.footer-hk .copyright {
  font-size: 0.875rem;
  color: var(--hk-primary);
  text-align: center;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(50, 100, 100, 0.15);
}

/* モバイル：3カラム → 縦並びに */
@media (max-width: 991.98px) {
  .footer-hk {
    padding: 2.5rem 0 1.5rem;
  }
  .footer-hk .footer-brand,
  .footer-hk .footer-contact,
  .footer-hk .footer-menu {
    text-align: left;
  }
  .footer-hk .footer-menu .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .footer-hk .footer-logo {
    max-width: 220px;
  }
}

/* ----------------------------------------------------------
   22. 追従CTA（本体サイト準拠：濃ティール円形ボタン）
   ---------------------------------------------------------- */
/* モバイル：画面下部固定のフルワイドCTA */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 0.75rem 1rem;
  z-index: 1030;
  display: flex;
  gap: 0.5rem;
}
.sticky-cta .btn-sticky {
  flex: 1;
  padding: 0.875rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.125rem;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
.sticky-cta .btn-sticky-primary {
  background-color: var(--hk-primary);
  color: #fff;
}
.sticky-cta .btn-sticky-primary:hover {
  background-color: var(--hk-primary-dark);
  color: #fff;
}
.sticky-cta .btn-sticky-outline {
  background-color: var(--hk-sage);
  color: var(--hk-primary);
  border: 1.5px solid var(--hk-primary);
}
.sticky-cta .btn-sticky-outline:hover {
  background-color: var(--hk-primary);
  color: #fff;
}

/* デスクトップ：本体サイト準拠の右下円形CTA */
@media (min-width: 992px) {
  .sticky-cta {
    bottom: 2rem;
    right: 2rem;
    left: auto;
    width: auto;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    flex-direction: column;
    gap: 1rem;
  }
  /* 「採用に関するご相談」ボタンは非表示にして、応募ボタン1個のみ表示 */
  .sticky-cta .btn-sticky-outline {
    display: none;
  }
  .sticky-cta .btn-sticky {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: var(--hk-primary);
    color: #fff;
    border: none;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    flex-direction: column;
    padding: 0;
    box-shadow: 0 8px 24px rgba(31, 68, 68, 0.25);
    flex: none;
    text-align: center;
  }
  .sticky-cta .btn-sticky-primary {
    background-color: var(--hk-primary);
    color: #fff;
    border: none;
  }
  .sticky-cta .btn-sticky-primary:hover {
    background-color: var(--hk-primary-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(31, 68, 68, 0.35);
  }
  .sticky-cta .btn-sticky-primary::before {
    content: '»';
    display: block;
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.2rem;
    opacity: 0.9;
  }
}
body { padding-bottom: 80px; }
@media (min-width: 992px) { body { padding-bottom: 0; } }

/* ----------------------------------------------------------
   22-2. トップへ戻るボタン — v0.63
   sticky-cta内・お問合せボタンの上に配置
   スクロール400px超えで表示・クリックでなめらかにトップへ
   ---------------------------------------------------------- */
.btn-to-top {
  /* 初期は非表示・JS でスクロール量に応じて .is-visible 付与 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

  /* ボタン本体（モバイル） */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--hk-point);  /* ロゴ葉黄緑 #C8DC78 */
  color: var(--hk-primary);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 68, 68, 0.15);
}
.btn-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.btn-to-top:hover {
  background-color: var(--hk-point-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(31, 68, 68, 0.25);
}
.btn-to-top:focus-visible {
  outline: 2px solid var(--hk-primary);
  outline-offset: 2px;
}
.btn-to-top svg {
  display: block;
}

/* PC時：円形ボタンに合わせて少し大きく＆中央配置 */
@media (min-width: 992px) {
  .btn-to-top {
    width: 56px;
    height: 56px;
    align-self: center;  /* sticky-cta が flex-direction:column なので */
  }
  .btn-to-top svg {
    width: 24px;
    height: 24px;
  }
}

/* モバイル時：sticky-cta下部固定バーの中で左端に小さく */
@media (max-width: 991.98px) {
  .btn-to-top {
    flex: 0 0 auto;
    align-self: center;
  }
}

/* ----------------------------------------------------------
   23. ユーティリティ
   ---------------------------------------------------------- */
.text-hk-primary { color: var(--hk-primary) !important; }
.text-hk-accent { color: var(--hk-accent) !important; }
.bg-hk-cream { background-color: var(--hk-bg-cream) !important; }
.bg-hk-soft { background-color: var(--hk-sage-soft) !important; }

.lead-large {
  font-size: 1.375rem;
  line-height: 2;
  color: var(--hk-text-body);
}
/* v0.14: PC時の拡大は撤去（lead-large は全画面サイズで1.25rem統一） */

.note-block {
  background-color: transparent;
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--hk-accent-dark);
  line-height: 1.85;
}

/* ==========================================================
   24. スクロール連動アニメーション（フェードイン＋パララックス）
   ========================================================== */

/* フェードイン基本（下から少し浮かび上がる） */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* バリエーション：左から */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* バリエーション：右から */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* バリエーション：拡大しながらフェードイン */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 子要素の段階的フェードイン（カードリスト用） */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.75s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(n+10) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }

/* パララックス対象要素（JSで data-parallax-y を制御） */
.parallax {
  will-change: transform;
}

/* v0.8: FV装飾円の浮遊アニメーション（.fv::before / ::after）は
   FVスライドショー化により撤去。
   FV内のzoom-inアニメーションは上記 @keyframes kenBurns01/02/03 で定義済 */

/* リダクションモーション対応（ユーザ設定優先） */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* FVスライドショーもモーション無効化（1枚目を静止表示） */
  .fv-slide {
    animation: none !important;
  }
  .fv-slide-1 {
    opacity: 1 !important;
  }
  .fv-slide-2, .fv-slide-3 {
    opacity: 0 !important;
  }
  .fv-slide img {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================
   ナビゲーション ドロップダウンメニュー（v0.64 Chat-15）
   募集要項 → 4職種詳細ページへのプルダウン
   PC: hover で開く / モバイル: tap で開閉（Bootstrap5標準挙動を上書き）
   ========================================================== */

/* 親リンク（dropdown-toggle）の見た目を通常のnav-linkに揃える
   Bootstrap5デフォルトの ::after 矢印を独自の小さい▼に置き換える */
.navbar-hk .nav-item.dropdown > .nav-link.dropdown-toggle {
  position: relative;
  padding-right: 1.5rem !important;
}
.navbar-hk .nav-item.dropdown > .nav-link.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 0;
  vertical-align: middle;
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-25%);
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.navbar-hk .nav-item.dropdown.show > .nav-link.dropdown-toggle::after,
.navbar-hk .nav-item.dropdown:hover > .nav-link.dropdown-toggle::after {
  transform: translateY(-25%) rotate(180deg);
}

/* ドロップダウンメニュー本体（白背景・葉黄緑左ボーダー・薄いシャドウ） */
.navbar-hk .dropdown-menu {
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  background: #FFFFFF;
  border: 1px solid var(--hk-sage);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(50, 100, 100, 0.12);
  min-width: 220px;
  font-size: 0.95rem;
}

/* 親「募集要項」自体のリンクとして機能させるため、メニュー先頭に
   「採用トップ #open-position」を追加 */
.navbar-hk .dropdown-menu .dropdown-item {
  padding: 0.6rem 1.25rem;
  color: var(--hk-text-body);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  display: block;
}
.navbar-hk .dropdown-menu .dropdown-item:hover,
.navbar-hk .dropdown-menu .dropdown-item:focus {
  background-color: var(--hk-sage-soft);
  color: var(--hk-primary);
}
.navbar-hk .dropdown-menu .dropdown-item.dropdown-item-parent {
  font-weight: 600;
  color: var(--hk-primary);
  border-bottom: 1px dashed rgba(50, 100, 100, 0.2);
  margin-bottom: 0.25rem;
  padding-bottom: 0.65rem;
}

/* PC（lg以上）：hoverでドロップダウンを開く（Bootstrap5デフォルトはclick） */
@media (min-width: 992px) {
  .navbar-hk .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
  /* hover中に下に少しスペース（マウスが移動しやすく） */
  .navbar-hk .nav-item.dropdown > .dropdown-menu {
    margin-top: 0.25rem;
  }
  /* hoverとclickの両方で開けるよう、間に余白を作っても閉じない */
  .navbar-hk .nav-item.dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.25rem;
  }
}

/* モバイル（lg未満）：collapsed状態でドロップダウンをアコーディオン風に開く
   親リンク右側の▼アイコンを大きめに、タップ領域を確保 */
@media (max-width: 991px) {
  .navbar-hk .nav-item.dropdown > .dropdown-menu {
    border: none;
    box-shadow: none;
    background: var(--hk-sage-soft);
    border-radius: 6px;
    margin: 0.25rem 0 0.5rem 1rem;
    padding: 0.25rem 0;
  }
  .navbar-hk .dropdown-menu .dropdown-item {
    padding: 0.55rem 1rem;
    font-size: 0.93rem;
  }
  .navbar-hk .dropdown-menu .dropdown-item.dropdown-item-parent {
    background: transparent;
  }
}