@charset "UTF-8";
/* ==============================================
   new-pages.css
   新規追加ページ（開業・経営支援サイトリニューアル分）専用の追加スタイル置き場。
   既存の support.css 等は編集せず、新規ページで必要な独自クラスはここに追記していく。

   現在の収録内容：
   - 医業経営支援ページ（_draft-pages/support-management/）で追加した
     サブナビ6タイル化・お客様の声カルーセル・詳細なデータ分析パネル・
     CTA（支援チーム/面談のご案内）・アンケートのライトボックス 等
   - 医院開業支援ページ（_draft-pages/support-opening/）で追加した
     琉球光和の強みパネル（■見出し＋本文＋画像ギャラリー） 等
   - ライフスタイル支援ページ（_draft-pages/support-lifestyle/）で追加した
     グレー帯見出し・円形サイクル図（1枚絵として書き出し）・（例）●リスト・
     グレー背景のCTA（支援チームのご案内のみ、面談ボタンなし） 等

   ページごとのアクセントカラーについて：
   支援系ページは各ページ固有のアクセントカラーを持つ（開業=青緑#71BCCA／経営=teal#0A968B／
   ライフスタイル=緑#088142／事業承継=水色#2E96C8、いずれも既存support.cssのvisual-main__titleと同系色）。
   本ファイルは全ページ共通で読み込むため、色は --support-accent カスタムプロパティ経由で指定し、
   .p-support のルート要素に .p-support--management / .p-support--opening 等の
   ページ識別クラスを付与して値を切り替える。個別クラスに直接色をハードコードしないこと。
   ============================================== */

/* 背景色を白に固定（ブラウザ環境によるダークモード等の影響を受けないための保険） */
html, body, .l-content, .l-content__column, .l-content__main, .p-support, .p-support__wrap, .p-support__block { background-color:#fff; color-scheme: light; }

/* ページごとのアクセントカラー定義 */
.p-support--management{ --support-accent:#0A968B; }
.p-support--opening{ --support-accent:#71BCCA; }
.p-support--lifestyle{ --support-accent:#088142; }
.p-support--dx{ --support-accent:#D09742; }
.p-support--inheritance{ --support-accent:#2E96C8; }
.p-support--team{ --support-accent:#6eab30; }
.p-support--achievement{ --support-accent:#6eab30; }

/* 既存support.cssにvisual-main__title--dx/team/achievement等の定義がないため、
   このファイル側で最小限補う（DX化推進支援／支援チームのご案内／実績のご紹介） */
.p-support-visual-main__title--dx{ color:#D09742; border:solid 1px #D09742; }
.p-support-visual-main__title--team{ color:#6eab30; border:solid 1px #6eab30; }
.p-support-visual-main__title--achievement{ color:#6eab30; border:solid 1px #6eab30; }

/* ===== 医業経営支援ページ：サブナビ／お客様の声／詳細なデータ分析／CTA ===== */
/* サブナビ：6タイルを1列に（デザイン原稿どおり）。SPは2列→3列で折り返し
   ※本番support.cssの.p-support-navは元の4タイル用に margin-bottom:3rem/6rem/10rem を
     各ブレークポイントで設定しているため、6タイル版ではコンテナ自体のmargin-bottomも
     都度上書きする（デザイン原稿の実測：タイル下からお客様の声までの余白は約3rem） */
.p-support-nav--6{ max-width:108rem; margin-bottom:3rem; }
.p-support-nav--6 .p-support-nav__unit{ width:calc(50% - 0.5rem); margin-bottom:1rem; }
.p-support-nav--6 .p-support-nav__main-link-img{ width:100%; display:block; }
@media (min-width:37.5em){ .p-support-nav--6{ margin-bottom:3rem; } .p-support-nav--6 .p-support-nav__unit{ width:calc(33.333% - 0.7rem); } }
@media (min-width:48em){ .p-support-nav--6{ margin-bottom:3rem; } }
@media (min-width:64.0625em){ .p-support-nav--6{ max-width:108rem; margin-bottom:3rem; } .p-support-nav--6 .p-support-nav__unit{ width:calc(16.666% - 0.84rem); margin-bottom:0; } }

.p-support-voice{ background:#f0f0f0; padding:4rem 0; margin-bottom:5rem; }
/* お客様の声：外部ライブラリに依存しない自前カルーセル */
.p-support-voice__wrap{ width:100%; max-width:111rem; margin:0 auto; padding:0 1.5rem; display:flex; flex-wrap:wrap; align-items:stretch; gap:1.5rem; }
/* ラベルは白いカード。高さは他カードと揃える（align-items:stretch） */
.p-support-voice__label{ flex:0 0 100%; background:#fff; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1.5rem; }
.p-support-voice__label-en{ display:block; font-size:1.3rem; color:#6eab30; letter-spacing:0.05em; white-space:nowrap; }
.p-support-voice__label-ja{ display:block; font-size:2rem; font-weight:500; letter-spacing:0.3em; margin:0.8rem 0 1.6rem; }
.p-support-voice__label-icon{ display:inline-flex; align-items:center; justify-content:center; width:5rem; height:5rem; border-radius:50%; border:solid 1px #ccc; color:#bbb; font-size:2.2rem; }
/* スライダー本体 */
.p-support-voice__list-wrap{ position:relative; flex:1 1 auto; width:100%; min-width:0; }
.p-support-voice__viewport{ overflow:hidden; }
.p-support-voice__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:nowrap; align-items:stretch; transition:transform .4s ease; will-change:transform; }
.p-support-voice__item{ flex:0 0 auto; box-sizing:border-box; padding:0 0.75rem; }
/* 各医院は白いカード：画像は白縁なしでカード上端に密着、その下に院名エリア */
.p-support-voice__card{ background:#fff; height:100%; box-sizing:border-box; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.p-support-voice__item-img{ width:100%; aspect-ratio:11/8; object-fit:cover; display:block; }
.p-support-voice__item-name{ display:flex; align-items:center; justify-content:space-between; font-size:1.4rem; font-weight:500; padding:1.2rem 1.2rem; flex:1 1 auto; }
.p-support-voice__item-name i{ color:#6eab30; font-size:1.8rem; }
/* 左右の丸矢印：白い円＋緑の枠＋緑の矢印（デザイン原稿どおり） */
.p-support-voice__arrow{ position:absolute; top:38%; transform:translateY(-50%); width:4rem; height:4rem; border-radius:50%; background:#fff; border:solid 1px #6eab30; color:#6eab30; display:flex; align-items:center; justify-content:center; font-size:2rem; z-index:2; box-shadow:0 1px 5px rgba(0,0,0,.18); cursor:pointer; padding:0; }
.p-support-voice__arrow--prev{ left:-1.2rem; }
.p-support-voice__arrow--next{ right:-1.2rem; }
@media (min-width:48em){
  .p-support-voice__wrap{ flex-wrap:nowrap; }
  .p-support-voice__label{ flex:0 0 16rem; }
}

.p-support-title-box{ border:solid 1px var(--support-accent, #0A968B); color:var(--support-accent, #0A968B); text-align:center; padding:1.5rem 2rem; font-size:2rem; letter-spacing:0.2em; margin-bottom:3rem; background:#fff; }
@media (min-width:48em){ .p-support-title-box{ font-size:2.6rem; padding:2rem; margin-bottom:4rem; } }

/* 「医業経営でこのようなお悩みはありませんか？」「クリニック開業のイメージ」等の中見出し：
   本番support.cssは既定で緑#6eab30だが、原稿の実測ではページごとのアクセントカラー
   （経営=teal、開業=青緑）。--support-accent 経由でページごとに切り替える。 */
.p-support-title-sub{ color:var(--support-accent, #6eab30); }

/* リード文の下の余白：本来は本番support.cssの
   .p-support__block:nth-last-child(n+2){margin-bottom:3rem/5rem/8rem}
   で確保される想定だが、詳細なデータ分析を別セクションに切り出した結果この
   .p-support__block がラップ内で唯一の子要素になり(nth-last-child(n+2)が不成立)、
   余白が消えていた。原稿の実測を基に明示的に補う。 */
.p-support__block--gap-lg{ margin-bottom:4.5rem; }
@media (min-width:48em){ .p-support__block--gap-lg{ margin-bottom:7.5rem; } }
@media (min-width:64.0625em){ .p-support__block--gap-lg{ margin-bottom:14rem; } }

/* 医院開業支援：STEPイラスト〜「琉球光和の強み」ボックスの余白は原稿実測で
   経営支援ページの同種の余白より大きい（約295px design）。専用モディファイアで対応。 */
.p-support__block--gap-xl{ margin-bottom:8rem; }
@media (min-width:48em){ .p-support__block--gap-xl{ margin-bottom:13.5rem; } }
@media (min-width:64.0625em){ .p-support__block--gap-xl{ margin-bottom:25rem; } }

/* 詳細なデータ分析：グレー帯がタイトルボックスの「上下中央」から始まるデザインを再現。
   ボックスをグレーパネルの先頭に置き、translateY(-50%) で上半分を白地側へはみ出させる。 */
.p-support-data-panel{ background:#f7f7f7; padding:0 0 5rem; margin-top:5rem; display:flow-root; }
.p-support-title-box--overlap{ width:100%; max-width:111rem; margin:0 auto; transform:translateY(-50%); position:relative; z-index:1; }
/* データ分析の本文は、デザイン原稿に合わせてグレー帯の中で中央寄せの狭いカラム（約88rem）にする */
.p-support-data-inner{ width:100%; max-width:88rem; margin:0 auto; padding:0 1.5rem; }

.p-support-data-block{ overflow:hidden; max-width:850px; margin-left:auto; margin-right:auto; } /* 右floatの画像ギャラリーをブロックごとに正しく回り込ませる（clearfix） */
.p-support-data-block:nth-of-type(n+2){ margin-top:4rem; }
.p-support-data-block__title{ display:flex; align-items:center; font-size:1.8rem; font-weight:500; color:var(--support-accent, #0A968B); border-bottom:solid 1px var(--support-accent, #0A968B); padding-bottom:1rem; margin-bottom:1.5rem; }
.p-support-data-block__title:before{ content:""; display:inline-block; width:0.6rem; height:1.8rem; background:var(--support-accent, #0A968B); margin-right:0.8rem; flex-shrink:0; }
/* 原稿の実測：本文は見出しの■アイコンより内側（見出し文字と同じ開始位置）から始まる。
   見出しのアイコン幅+余白(0.6rem+0.8rem)に揃えて本文をインデントする */
.p-support-data-block__text{ line-height:1.9; margin-bottom:2rem; padding-left:1.4rem; }

/* 原稿では、患者動向調査／患者満足度調査のラベルは隣接する画像行の「中央」に
   意図的に配置されている（左右で画像の高さが違うため、行全体で中央揃え） */
.p-support-data-figure{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.p-support-data-figure__label{ flex:0 0 100%; font-weight:500; color:var(--support-accent, #0A968B); margin:0; }
.p-support-data-figure__imgs{ display:flex; gap:1rem; flex-wrap:wrap; }
.p-support-data-figure__imgs img{ height:auto; max-width:100%; border:solid 1px #ddd; }

/* 医院開業支援など：■見出し＋本文の右に画像2〜4枚をグリッドで添える汎用ギャラリー
   （患者動向調査のようなラベル付きではなく、見出し自体がラベルを兼ねるケース用） */
.p-support-data-block__media{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0.8rem; margin-bottom:2rem; }
.p-support-data-block__media img{ width:100%; height:auto; display:block; border:solid 1px #ddd; }
@media (min-width:48em){
  .p-support-data-block__media{ float:right; width:32rem; margin:0 0 1.5rem 2rem; }
}
@media (min-width:48em){
  .p-support-data-figure__label{ flex:0 0 14rem; }
  .p-support-data-figure__imgs{ flex-wrap:nowrap; }
}

.p-support-seminar-photo{ float:none; width:100%; margin-bottom:2rem; }
.p-support-seminar-photo img{ width:100%; height:auto; display:block; }
@media (min-width:48em){
  .p-support-seminar-photo{ float:right; width:32rem; margin:0 0 2rem 2rem; }
}

.p-support-seminar-gallery__title{ font-weight:500; color:#0A968B; margin:2.5rem 0 1rem; clear:both; }
/* デザイン原稿どおりアンケートは横1列（PCで8枚並び）。狭い画面では折り返す */
.p-support-seminar-gallery{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }
.p-support-seminar-gallery button{ display:block; width:calc((100% - 3rem) / 4); padding:0; border:none; background:none; cursor:zoom-in; }
.p-support-seminar-gallery img{ width:100%; height:auto; display:block; border:solid 1px #ddd; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:box-shadow .2s; }
.p-support-seminar-gallery button:hover img{ box-shadow:0 2px 8px rgba(0,0,0,.25); }
@media (min-width:64.0625em){ .p-support-seminar-gallery button{ width:calc((100% - 7rem) / 8); } }

/* アンケート画像の拡大表示（ライトボックス） */
.js-lightbox{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.75); padding:3rem 2rem; }
.js-lightbox.is-open{ display:flex; }
.js-lightbox__img{ max-width:min(90vw, 70rem); max-height:86vh; width:auto; height:auto; box-shadow:0 4px 24px rgba(0,0,0,.4); background:#fff; }
.js-lightbox__close{ position:absolute; top:2rem; right:2.5rem; width:4.4rem; height:4.4rem; border-radius:50%; background:#fff; border:none; color:#333; font-size:2.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.js-lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:4.4rem; height:4.4rem; border-radius:50%; background:#fff; border:none; color:#333; font-size:2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.js-lightbox__nav--prev{ left:1.5rem; }
.js-lightbox__nav--next{ right:1.5rem; }
@media (min-width:48em){
  .js-lightbox__nav--prev{ left:3rem; }
  .js-lightbox__nav--next{ right:3rem; }
}

.p-support-seminar-list__title{ font-weight:500; color:#0A968B; margin-bottom:1rem; }
/* デザイン原稿どおり 2列 / 2列 / 3列。各ボックスは内容量に応じた固定幅で左寄せ（行いっぱいには広げない） */
.p-support-seminar-list{ list-style:none; margin:0 0 1.5rem; padding:0; }
.p-support-seminar-row{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:1.2rem; justify-content:flex-start; }
.p-support-seminar-list__item{ border:solid 1px #0A968B; color:#181919; text-align:center; padding:1rem 1.5rem; border-radius:2px; font-size:1.5rem; display:flex; align-items:center; justify-content:center; }
/* モバイルは各行縦積み、37.5em以上でデザインの実測比率どおりの固定幅に */
.p-support-seminar-list__item{ flex:1 1 100%; }
@media (min-width:37.5em){
  .p-support-seminar-list__item{ flex:0 0 auto; }
  .p-support-seminar-row--2  .p-support-seminar-list__item:nth-child(1){ width:26.8%; }
  .p-support-seminar-row--2  .p-support-seminar-list__item:nth-child(2){ width:37.4%; }
  .p-support-seminar-row--2b .p-support-seminar-list__item:nth-child(1){ width:46.6%; }
  .p-support-seminar-row--2b .p-support-seminar-list__item:nth-child(2){ width:37.4%; }
  .p-support-seminar-row--3  .p-support-seminar-list__item{ width:26.8%; }
}
.p-support-seminar-note{ font-size:1.3rem; color:#666; }
.p-support-seminar-note--center{ text-align:center; }

/* CTA：デザイン原稿どおり「白背景＋緑枠のアウトラインボックス＋緑の見出し」 */
.p-support-cta{ background:#fff; padding:5rem 0; }
/* 開業支援トップページ：原稿実測でこのCTAのみ背景がグレー（#f7f7f7）になっている */
.p-support-cta--gray{ background:#f7f7f7; }
.p-support-cta__wrap{ width:100%; max-width:76rem; margin:0 auto; padding:0 1.5rem; }
.p-support-cta__title{ text-align:center; color:#82aa3f; font-size:2rem; letter-spacing:0.3em; margin-bottom:2rem; }
.p-support-cta__title:nth-of-type(2){ margin-top:5rem; }
/* ライフスタイル支援ページ：見出し上の英字ラベル（例：YOUR BEST PARTNER） */
.p-support-cta__eyebrow{ display:block; text-align:center; font-size:1.2rem; letter-spacing:0.25em; color:#82aa3f; margin-bottom:0.8rem; }
.p-support-cta__box{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; background:#fff; border:solid 2px #82aa3f; padding:2rem 2.5rem; margin-bottom:1rem; text-decoration:none; color:#333; }
.p-support-cta__box-text{ font-size:1.4rem; line-height:1.8; }
.p-support-cta__box-link{ flex:0 0 auto; color:#82aa3f; font-size:1.4rem; letter-spacing:0.1em; white-space:nowrap; display:flex; align-items:center; }
.p-support-cta__box-link .icon-chevron{ margin-left:0.8rem; width:5.2rem; height:5.2rem; }
.p-support-cta__lead{ text-align:center; color:#333; font-size:1.4rem; line-height:1.9; margin-bottom:1.5rem; }
.p-support-cta__btn{ display:flex; align-items:center; justify-content:space-between; background:#fff; border:solid 4px #82aa3f; padding:2rem 2.5rem; font-size:2rem; letter-spacing:0.15em; color:#333; text-decoration:none; }
.p-support-cta__btn .icon-chevron{ color:#82aa3f; width:7.2rem; height:7.2rem; }
/* 二重矢印アイコン：FontAwesomeのグリフだと線の太さを変えられないため、
   線幅を自由に調整できるSVGに置き換え（stroke-widthで細く指定） */
.icon-chevron{ flex-shrink:0; }

/* ===== ライフスタイル支援ページ専用 ===== */
/* 全幅グレー帯の見出し（例：世代を超えて沖縄の医療家系を支える） */
.p-support-band-title{ background:#f7f7f7; text-align:center; color:var(--support-accent, #088142); font-size:1.8rem; font-weight:500; letter-spacing:0.1em; padding:2rem 1.5rem; margin:4rem 0; }
@media (min-width:48em){ .p-support-band-title{ font-size:2.2rem; padding:2.5rem 1.5rem; margin:5rem 0; } }

/* 円形サイクル図：原稿は写真13枚＋矢印＋ラベルの複雑な合成イラストのため、
   既存のSTEPイラスト類と同様に1枚の画像として書き出して掲載する */
.p-support-cycle-figure{ max-width:100rem; margin:0 auto 4rem; text-align:center; }
.p-support-cycle-figure img{ max-width:100%; height:auto; }

/* 中央寄せの中見出し＋リード文（「医療に専念できる環境」をつくるために 等） */
.p-support-center-block{ text-align:center; max-width:90rem; margin:0 auto 4rem; }
.p-support-center-block__title{ color:var(--support-accent, #088142); font-size:2rem; font-weight:700; margin-bottom:2rem; }
.p-support-center-block__text{ line-height:2; }

/* （例）●のリスト：見出しのインデントと揃え、●は本文のアクセントカラー */
.p-support-example-list{ display:flex; gap:0.6rem; margin:1.5rem 0; padding-left:1.4rem; }
.p-support-example-list__label{ flex:0 0 auto; color:#666; }
.p-support-example-list__items{ list-style:none; margin:0; padding:0; line-height:1.9; }
.p-support-example-list__items li{ position:relative; padding-left:1.3rem; }
.p-support-example-list__items li:before{ content:"●"; position:absolute; left:0; top:0.15em; color:var(--support-accent, #088142); font-size:0.7em; }

/* ===== DX化推進支援ページ専用 ===== */
/* 文中に挿入するDX認定バッジ（既存フッターのnintei_01.pngからロゴ+文字部分だけを切り出したもの） */
.p-support-inline-badge{ display:inline-block; vertical-align:middle; height:2.6rem; width:auto; margin:0 0.3rem; }
@media (min-width:48em){ .p-support-inline-badge{ height:3.6rem; } }
/* 「弊社は／[バッジ]／事業者です。」の3行構成。バッジの上下に細い罫線を添える */
.p-support-dx-badge-line{ display:inline-block; padding:1.2rem 0; border-top:solid 1px #ccc; border-bottom:solid 1px #ccc; margin:0.8rem 0; }
.p-support-center-block__text--bold{ font-weight:700; color:var(--support-accent, #D09742); }

/* 「お困りごとはございませんか？」以下：☑チェックボックス＋見出し＋本文のリスト */
.p-support-check-list{ list-style:none; margin:0; padding:0; }
.p-support-check-list__item:nth-of-type(n+2){ margin-top:3rem; }
.p-support-check-list__title{ display:flex; align-items:center; gap:1rem; font-size:1.7rem; font-weight:500; color:var(--support-accent, #D09742); margin-bottom:1rem; }
.p-support-check-list__box{ flex:0 0 auto; width:2.2rem; height:2.2rem; border:solid 2px var(--support-accent, #D09742); display:flex; align-items:center; justify-content:center; color:#181919; font-size:1.5rem; }
/* 本文は見出しのチェックボックス幅+余白ぶんインデントして文字位置を揃える（サイト共通ルール） */
.p-support-check-list__text{ line-height:1.9; padding-left:3.2rem; }

/* DX認定とは／DX認定事業者として：2カラムの枠付きボックス（中央に縦の仕切り線） */
.p-support-dx-cert{ border:solid 1px var(--support-accent, #D09742); display:flex; flex-wrap:wrap; margin:4rem 0; }
.p-support-dx-cert__col{ flex:1 1 100%; padding:3rem 2.5rem; }
.p-support-dx-cert__col:first-child{ border-bottom:solid 1px var(--support-accent, #D09742); }
.p-support-dx-cert__heading{ display:flex; align-items:center; font-size:1.7rem; font-weight:700; margin-bottom:1.5rem; }
.p-support-dx-cert__text{ line-height:1.9; }
@media (min-width:48em){
  .p-support-dx-cert__col{ flex:1 1 0; }
  .p-support-dx-cert__col:first-child{ border-bottom:none; border-right:solid 1px var(--support-accent, #D09742); }
}

/* ===== 事業承継支援ページ専用 ===== */
/* 「お客さまの声／実績のご紹介」への誘導バナーカード。グレーパネルの中に白いカードを置き、
   カード右側に写真を配置してカード内で白へフェードさせる（原稿の実測どおり）。
   色は原稿実測でも既存のお客様の声パーツと同じ既定の緑#6eab30系のため、
   --support-accent（このページは水色）は使わずブランドグリーンを直接指定する。 */
.p-support-voice-cta{ background:#f7f7f7; padding:4rem 0; }
@media (min-width:48em){ .p-support-voice-cta{ padding:6rem 0; } }
@media (min-width:64.0625em){ .p-support-voice-cta{ padding:11rem 0; } }
.p-support-voice-cta__inner{ width:100%; max-width:85rem; margin:0 auto; padding:0 1.5rem; }
.p-support-voice-banner{ position:relative; overflow:hidden; display:flex; align-items:center; flex-wrap:wrap; background:#fff; border-radius:8px; box-shadow:0 2px 15px rgba(0,0,0,.08); padding:2.5rem 2rem; text-decoration:none; color:inherit; }
.p-support-voice-banner__text{ position:relative; z-index:2; }
.p-support-voice-banner__label{ display:block; font-size:2rem; font-weight:700; color:#6eab30; letter-spacing:0.1em; }
.p-support-voice-banner__sub{ display:block; font-size:1.3rem; color:#181919; margin-top:0.6rem; }
.p-support-voice-banner__divider{ position:relative; z-index:2; flex:0 0 auto; width:1px; height:4rem; background:#6eab30; margin:0 2.5rem; }
.p-support-voice-banner__link{ position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:center; font-size:1.6rem; letter-spacing:0.15em; color:#4d4d4d; white-space:nowrap; }
.p-support-voice-banner__link .icon-chevron{ margin-left:0.8rem; width:1.3rem; height:1.3rem; color:#6eab30; }
.p-support-voice-banner__photo{ display:none; }
@media (min-width:48em){
  /* 原稿実測：見出し「お客さまの声」と「実績のご紹介」は同じ中心線で中央揃え（左揃えではない）。
     テキスト幅を区切り線の位置(カード左端から約29.5%)に合わせて固定し、text-alignで中央寄せにする */
  .p-support-voice-banner{ padding:3rem 3rem 3rem 2rem; }
  .p-support-voice-banner__text{ width:27.5rem; flex:0 0 auto; text-align:center; }
  .p-support-voice-banner__divider{ margin:0 3.8rem 0 0; }
  .p-support-voice-banner__photo{ display:block; position:absolute; top:0; right:0; bottom:0; width:55%; z-index:1; }
  .p-support-voice-banner__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* 原稿実測：フェードはかなり長く、写真がはっきり見えるのはカード右端付近のみ（カード全体の80%あたりまでグラデーション） */
  .p-support-voice-banner__photo:before{ content:""; position:absolute; inset:0; background:linear-gradient(to right, #fff 0%, #fff 12%, rgba(255,255,255,.75) 45%, rgba(255,255,255,0) 82%); }
}

/* ===== 支援チームのご案内ページ（プランナー紹介）専用 =====
   各支援ページのCTA「支援チームのご案内」の遷移先。トピック別ページと異なりページ固有の
   アクセントカラーは持たず、既定のブランドグリーン(#6eab30)のまま（原稿でも実測どおり）。 */

/* プランナー写真6枚のグリッド（原稿実測：PCは3列×2行、隙間は詰まっている） */
/* margin-bottomは直後の.p-support-data-panel(margin-top:5rem)と隣接マージン相殺されるため、
   写真グループの下に十分な余白が残るよう大きめの値にしておく */
.p-support-team-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0; max-width:850px; margin:0 auto 10rem; }
.p-support-team-grid img{ width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
@media (min-width:48em){ .p-support-team-grid{ grid-template-columns:repeat(3, 1fr); } }

/* 「実績のご案内」ボックス：既存の.p-support-cta__boxと同じ枠だが、見出しサイズの太字テキストになる */
.p-support-cta__box--lg .p-support-cta__box-text{ font-size:2rem; font-weight:500; color:#181919; }

/* ===== 実績紹介ページ専用 =====
   トピック別ページと異なりページ固有のアクセントカラーは持たず、既定のブランドグリーン(#6eab30)のまま。 */

/* 医院ロゴ一覧：4列（原稿実測どおりコンテナ全幅・111remコンテナに収まる）。各セルはボタンでポップアップを開く。
   バナー同士は隣接させず隙間をあけ、各バナーの枠線は右と下のみ（上・左は不要）にする */
.p-support-clinic-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; margin-bottom:4rem; }
.p-support-clinic-grid__item{ display:flex; align-items:center; justify-content:center; border-right:solid 1px #dcdcdb; border-bottom:solid 1px #dcdcdb; padding:2rem 1.5rem; min-height:11rem; background:#fff; cursor:pointer; }
.p-support-clinic-grid__item img{ max-width:100%; max-height:6rem; width:auto; height:auto; display:block; }
@media (min-width:48em){
  .p-support-clinic-grid{ grid-template-columns:repeat(4, 1fr); }
  .p-support-clinic-grid__item img{ max-height:7rem; }
}

/* 医院詳細ポップアップ：背景は暗くせず、カード自体の影のみで浮かせる */
.js-clinic-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:transparent; padding:3rem 2rem; pointer-events:none; }
.js-clinic-modal .p-support-clinic-modal__card{ pointer-events:auto; }
.js-clinic-modal.is-open{ display:flex; }
.p-support-clinic-modal__card{ background:#fff; width:100%; max-width:64rem; max-height:90vh; overflow-y:auto; box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 4px 24px rgba(0,0,0,.4); text-align:left; }
.p-support-clinic-modal__head{ display:flex; align-items:center; gap:1rem; padding:1.8rem 2rem; border-bottom:solid 1px #6eab30; }
.p-support-clinic-modal__bar{ flex:0 0 auto; width:0.6rem; height:1.8rem; background:#6eab30; }
.p-support-clinic-modal__name{ flex:1 1 auto; font-size:1.8rem; font-weight:500; }
.p-support-clinic-modal__close{ flex:0 0 auto; width:2.6rem; height:2.6rem; border:none; background:none; cursor:pointer; color:#333; font-size:1.8rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.p-support-clinic-modal__body{ display:flex; flex-wrap:wrap; gap:2rem; padding:2rem; }
.p-support-clinic-modal__photo{ flex:0 0 auto; width:100%; max-width:28rem; height:auto; display:block; }
.p-support-clinic-modal__info{ flex:1 1 20rem; margin:0; }
.p-support-clinic-modal__info dt{ font-weight:700; margin-top:1.2rem; }
.p-support-clinic-modal__info dt:first-child{ margin-top:0; }
.p-support-clinic-modal__info dd{ margin:0.2rem 0 0; line-height:1.7; }
.p-support-clinic-modal__interview-link{ display:block; margin:0 2rem 2rem; padding:1.2rem; background:#6eab30; color:#fff; text-align:center; text-decoration:none; font-weight:700; }
.p-support-clinic-modal__interview-link:hover{ opacity:0.85; }
@media (min-width:37.5em){
  .p-support-clinic-modal__body{ flex-wrap:nowrap; }
}

/* ===== インタビュー記事ページ（カスタム投稿の基本テンプレート） =====
   実績紹介ページの各医院ロゴから将来リンクされる想定の個別記事。
   .p-support系のコンポーネントとは別の名前空間(.p-interview)で管理する。
   アクセントカラーは原稿実測でも一貫して#82aa3f（既存CTAのグリーンと同系色）。 */

/* ヒーロー：斜線ハッチング柄の緑帯 */
/* 原稿実測：斜線ハッチングは帯全体ではなく、下端の帯（高さ約3.2rem）のみに入る。
   向きは左下から右上（-45deg）で、線は細く、間隔もやや広め */
.p-interview-hero{ position:relative; background-color:#82aa3f; color:#fff; text-align:center; padding:5rem 2rem 4rem; overflow:hidden; }
.p-interview-hero:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3.2rem; background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.55) 0 1px, transparent 1px 10px); }
.p-interview-hero__title{ font-size:3.2rem; letter-spacing:0.25em; font-weight:500; margin:0 0 1.5rem; }
.p-interview-hero__sub{ display:block; font-size:1.4rem; letter-spacing:0.15em; color:rgba(255,255,255,.85); }
@media (min-width:48em){ .p-interview-hero__title{ font-size:4.2rem; } }

.p-interview-body{ width:100%; max-width:120rem; margin:0 auto; padding:4rem 1.5rem 6rem; }
@media (min-width:64.0625em){ .p-interview-body{ display:flex; align-items:flex-start; gap:4rem; padding-top:6rem; } }

/* サイドバー：お客様の声（五十音インデックス）。
   実際には全インタビュー記事をあ〜わ行で分類して一覧表示する想定で、
   ここでは原稿どおりダミーのプレースホルダー項目のまま再現している（本実装時はカスタム投稿から動的生成） */
.p-interview-sidebar{ margin-bottom:4rem; }
@media (min-width:64.0625em){ .p-interview-sidebar{ flex:0 0 27rem; margin-bottom:0; } }
.p-interview-sidebar__title{ background:#82aa3f; color:#fff; text-align:center; font-weight:500; letter-spacing:0.15em; padding:1.2rem; margin-bottom:1rem; }
.p-interview-index__group{ border-bottom:solid 1px #ccc; }
.p-interview-index__head{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; padding:1.2rem 0.3rem; font-size:1.6rem; font-weight:500; color:#181919; cursor:pointer; text-align:left; }
.p-interview-index__head .icon-chevron{ width:1.6rem; height:1.6rem; color:#82aa3f; transform:rotate(90deg); transition:transform .2s; }
.p-interview-index__group.is-open .icon-chevron{ transform:rotate(-90deg); }
.p-interview-index__list{ list-style:none; margin:0; padding:0 0 0.5rem; display:none; }
.p-interview-index__group.is-open .p-interview-index__list{ display:block; }
.p-interview-index__list a{ display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0.3rem; color:#181919; text-decoration:none; }
.p-interview-index__list a:hover{ color:#82aa3f; }
.p-interview-index__list .icon-chevron{ width:1.2rem; height:1.2rem; color:#82aa3f; flex-shrink:0; }
/* ダミーの医院名プレースホルダー（原稿でも塗りつぶし表示のまま） */
.p-interview-index__placeholder{ display:inline-block; width:12rem; height:1em; background:#e4e4e4; }

.p-interview-main{ min-width:0; }
@media (min-width:64.0625em){ .p-interview-main{ flex:1 1 auto; } }

/* プロフィール（見出し・写真・基本情報テーブル） */
.p-interview-profile__eyebrow{ display:block; color:#82aa3f; font-size:1.4rem; font-weight:500; letter-spacing:0.05em; margin-bottom:0.5rem; }
.p-interview-profile__title{ font-size:2.4rem; font-weight:700; color:#82aa3f; padding-bottom:1.5rem; border-bottom:solid 1px #82aa3f; margin-bottom:2rem; }
.p-interview-profile__body{ display:flex; flex-wrap:wrap; gap:2rem; margin-bottom:4rem; }
.p-interview-profile__photo{ flex:0 0 auto; width:100%; max-width:30rem; }
.p-interview-profile__photo img{ width:100%; height:auto; display:block; }
.p-interview-profile__table{ flex:1 1 30rem; border-collapse:collapse; }
.p-interview-profile__table th, .p-interview-profile__table td{ text-align:left; padding:0.6rem 0; vertical-align:top; font-weight:400; }
.p-interview-profile__table th{ white-space:nowrap; padding-right:2rem; letter-spacing:0.2em; }
.p-interview-profile__table tr:first-child th, .p-interview-profile__table tr:first-child td{ padding-top:0; }
.p-interview-profile__name{ font-size:1.8rem; }
.p-interview-profile__name strong{ font-size:2.2rem; font-weight:700; margin:0 0.3em; }

/* Q&A本文：カスタム投稿化した際、ブロックエディタで入力される実際のthe_content()の出力
   （見出し=h2、本文=p、画像=figure/img）が、独自クラスを付けなくてもこの見た目になるように
   .p-interview-content配下の素のタグに対してスタイルを当てる。
   運用ルール：1問につき「見出し(H2)＝Qの質問文」→「段落(P)＝回答」の並びで入力する。
   回答が複数段落になる場合は、段落を分けず同じ段落内でShift+Enter（改行）を使うと
   「A」マークの位置がずれない。 */
.p-interview-content{ min-width:0; }
.p-interview-content h2{ display:flex; align-items:baseline; font-size:1.8rem; font-weight:700; color:#82aa3f; font-style:italic; margin:3rem 0 1.2rem; }
.p-interview-content h2:first-child{ margin-top:0; }
.p-interview-content p{ position:relative; padding-left:3.5rem; line-height:1.9; margin:0 0 1.5rem; }
.p-interview-content h2 + p:before{ content:"A"; position:absolute; left:0; top:0.1em; font-weight:700; font-style:italic; color:#82aa3f; border-bottom:solid 2px #82aa3f; padding:0 0.3rem 0.1rem 0; }
.p-interview-content figure{ margin:3rem 0; }
.p-interview-content img{ max-width:100%; height:auto; display:block; }
.p-interview-content figure.rkowa-image-row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; }
/* スマホ撮影の縦長写真は幅いっぱいに引き伸ばすと不自然に大きく・粗く見えるため、
   幅を抑えて中央寄せにする（rkowa_render_interview_contentで画像の縦横比を判定し
   is-portraitクラスを付与） */
.p-interview-content figure.is-portrait{ max-width:40rem; margin-left:auto; margin-right:auto; }

/* プランナーからのメッセージ */
.p-interview-planner{ margin-top:4rem; }
.p-interview-planner__title{ font-size:1.8rem; font-weight:700; margin-bottom:1.5rem; }
.p-interview-planner__text{ line-height:2; }
.p-interview-back{ display:flex; align-items:center; justify-content:space-between; background:#82aa3f; color:#fff; font-size:1.8rem; letter-spacing:0.1em; padding:1.8rem 2.5rem; text-decoration:none; margin-top:3rem; }
.p-interview-back .icon-chevron{ color:#fff; width:2.4rem; height:2.4rem; }