@charset "UTF-8";
/* ============================================================
   キャリアデザインスクール シゴトの学び舎 / coaching/index.html 専用CSS
   配色体系・デザイン方向性:決定記録v51〜v53確定内容に基づく
   作成:2026-08-13(Phase 2・実コード化)
   ============================================================ */

/* ---- 外部フォント(Google Fonts) ----
   要確認:配布ライセンス・自己ホスティング要否は構想メモ7章の未決事項(v50より継続)。
   公開前に、CDN参照のままでよいか、ローカルホスティングに切り替えるかを確認すること。 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@600&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

:root{
  /* 配色体系(決定記録v51確定・5色) */
  --navy:#003461;      /* メイン:ナビゲーション・CTA・見出し */
  --yellow:#f1e577;    /* アクセント:キャッチコピー内キーワードのハイライト限定 */
  --brass:#8c6f3e;     /* ワンポイント:eyebrow文字・細い装飾線のみ */
  --white:#ffffff;     /* 地色:ページ全体の背景 */
  --jade:#3da183;      /* 第二アクセント:料金ロードマップ等、ステップ・プロセス案内 */
  --jade-10:#eaf5f1;
  --jade-20:#d3ece3;

  --ink:#1a1a1a;
  --gray-1:#333;
  --gray-2:#555;
  --gray-3:#888;
  --gray-4:#bbb;
  --gray-5:#ddd;
  --gray-6:#eee;
  --gray-7:#f6f6f6;

  /* タイポグラフィスケール */
  --fs-sec-title:22px;
  --fs-sec-lead:13.5px;
  --fs-card-title:14.5px;
  --fs-body:14px;
  --fs-meta:11px;

  /* アイコンの共通サイズ基準(Sec.2悩み項目で使用) */
  --icon-size:64px;
  --icon-gap:20px;
  --icon-box-w:84px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.section-inner{
  max-width:1080px;
  margin:0 auto;
  padding:64px 32px;
}
.section-lead-h2{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:var(--fs-sec-title); font-weight:700; color:var(--ink);
  margin:0 0 10px 0;
}
.section-lead-p{ font-size:var(--fs-sec-lead); color:var(--gray-2); margin:0 0 30px 0; }

/* ============================================================
   ヘッダー(最小構成:ロゴ+CTAのみ・v78確定)
   ============================================================ */
header.site-header{ background:var(--white); border-bottom:1px solid var(--gray-6); }
.site-header-inner{
  max-width:1080px; margin:0 auto; padding:16px 32px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
/* ヘッダーロゴ+タグライン(横並び・決定記録v91確定)。旧来のkiyaku.html等に残る
   控えめな左揃えスタイル(装飾なし)を基準に、「シゴトの学び舎」のテキスト部分の
   みをlogo.pngへ置き換えた。タグラインはロゴの右側に横並びで配置する。 */
.site-logo{
  display:flex; flex-direction:row; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
}
.site-logo-img{ display:block; height:29px; width:auto; }
.site-logo-sub{ font-size:11px; letter-spacing:.13em; color:var(--brass); font-weight:500; white-space:nowrap; }
/* .site-logo-main は決定記録v89でlogo.png画像に置き換えられ、現在未使用(要:将来クリーンアップ候補) */
.site-logo-main{
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:15px; font-weight:700; color:var(--navy);
}
.site-header-cta{
  flex-shrink:0; display:inline-block; background:var(--navy); color:#fff; padding:10px 22px;
  border-radius:999px; font-size:12px; font-weight:500; letter-spacing:.03em; text-decoration:none; white-space:nowrap;
}
.site-header-cta:hover{ opacity:.88; }

/* ヘッダーのスクロール追従化(PC画面限定・依頼分)。
   Sec.1(#hero)表示中はCTAボタンを非表示にし、Sec.1を過ぎてスクロールした
   時点でヘッダー全体を画面上部に固定表示する。判定はindex.html側のJS
   (IntersectionObserver)が行い、header.site-headerに.is-pinnedを付け外しする。
   スマートフォン表示(800px以下)は対象外、常時表示の従来通り。 */
@media (min-width:801px){
  .site-header-cta{ opacity:0; pointer-events:none; transition:opacity .25s ease; }
  header.site-header.is-pinned{
    position:fixed; top:0; left:0; right:0; z-index:100;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    border-bottom:1px solid var(--gray-6);
  }
  header.site-header.is-pinned .site-header-cta{ opacity:1; pointer-events:auto; }
}

/* ============================================================
   Sec.1 ファーストビュー(C案ベース+CTA紺化+eyebrowはA案流用・v51確定)
   ============================================================ */
#hero{ background:var(--white); }
#hero .section-inner{ padding:72px 24px 76px 24px; text-align:center; }
#hero .eyebrow{
  font-size:10.5px; letter-spacing:.28em; color:var(--brass); font-weight:500; margin-bottom:16px;
}
#hero .eyebrow::before{
  content:""; display:block; width:1px; height:24px; background:var(--brass); margin:0 auto 14px auto;
}
#hero .hero-copy{
  font-family:"Zen Old Mincho",serif; font-size:clamp(22px,3.6vw,32px); font-weight:600;
  line-height:1.85; color:#2b2620; max-width:560px; margin:0 auto 18px auto;
}
#hero .hero-copy .hl{ background:linear-gradient(transparent 60%, var(--yellow) 60%); }
#hero .hero-subcopy{ font-size:14px; color:#6b6255; margin:0 0 30px 0; }
#hero .hero-cta{
  display:inline-block; background:var(--navy); color:#fff; padding:14px 38px; border-radius:999px;
  font-size:13px; font-weight:500; letter-spacing:.05em; text-decoration:none;
}
#hero .hero-cta:hover{ opacity:.88; }

/* ============================================================
   Sec.1 写真ヒーロー化(デスクトップ幅(801px以上)のみ・決定記録v106確定)
   モバイル幅(800px以下)は、上記v51確定の中央対称・写真なし構成を変更しない
   (このメディアクエリの外では#heroの見た目は一切変わらない)。
   写真は左側に人物シルエット、右側が開いた空間になっている構図のため、
   テキストブロックをコンテナ幅75.5%の位置(中心軸)へ寄せ、その空間に収める
   非対称構成とする。ベース実装ではオーバーレイ・ハローは追加しない
   (実機での可読性確認待ち・決定記録v106)。
   ============================================================ */
@media (min-width:801px){
  #hero{
    position:relative;
    background-image:url("../images/hero-photo.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    /* 1920px前後の幅を基準に検証した比率(決定記録v106に明記の限界。2.2:1相当)。
       801〜1280px程度のノートPC幅では、2.2:1のまま高さを取ると文字要素が縦に
       収まりきらないため、下限の高さを設けて見切れを防ぐ(写真は引き続きcoverで
       全面に敷かれる。この点はモバイル版と無関係で、写真ヒーロー自体が対象外の
       800px以下には一切影響しない)。
       当初はCSSの`aspect-ratio:2.2/1`+`min-height:620px`の組み合わせで実装して
       いたが、min-height側が有効になる801〜1280px幅で、背景画像下端に1〜2px
       程度の白い隙間が生じる不具合の指摘があった。aspect-ratioとmin-heightを
       同時に指定すると、ブラウザ内部でこの2つの高さ計算のどちらを優先するかに
       よって端数のズレが生じ得るため、aspect-ratioを廃し、比率(2.2:1 → 高さ=
       幅÷2.2 ≒ 45.4545vw)をheight側の計算式に直接統合し、高さを単一のheight値
       のみで確定させる形に改めた。
       さらに、この`height:max(620px, 45.4545vw)`には上限がなく、横幅の広い
       画面(2000px超級のワイドモニター等)でヒーローが画面高さを大きく超え、
       ビューポート内に収まらない不具合の指摘があった(ヘッダーが浮いて見える
       副作用も含む)。一般的なノートPC・デスクトップの画面高さ(800〜900px
       程度)を大きく超えないことを基準に、上限880pxを設けたclamp()に変更した
       (下限620px・上限880pxの間は、比率45.4545vwに連動して変化する)。
       あわせて、下記background-colorを、画像下端の色(黒系のグラスシルエット)に
       合わせて設定した。background-size:coverは、ごく稀に1px未満の端数により
       背景画像の下端がボックスの下端をわずかに満たしきれないことがあり、その
       場合に地の色が透けて見えてしまう(このボックスは元々var(--white)を継承
       しているため、透けると白い隙間に見える)。背景色を画像下端と同系色にして
       おくことで、万一この端数のズレが起きても、白い隙間としては視認されない
       ようにする保険的対応。 */
    height:clamp(620px, 45.4545vw, 880px);
    background-color:var(--ink);
    overflow:hidden;
  }
  #hero .section-inner{
    position:absolute;
    top:18.5%;
    left:75.5%;
    transform:translateX(-50%);
    /* 中心軸を75.5%に置くため、幅は右端(コンテナ幅の24.5%)からはみ出さない
       上限(49vwが理論上限。801px前後のノートPC幅でも右端で切れないための
       実装上の調整であり、75.5%という中心軸の位置そのものは変更していない)。
       上限480pxは、キャッチコピー2行目「"なんとなく"のままにしない。」が
       46px指定のまま1行に収まらず、意図しない3行折り返しを起こす不具合の
       原因になっていたため、680pxに引き上げて解消した(Cowork自己発見・
       ユーザー指摘に基づく修正)。 */
    width:min(680px, 49vw);
    padding:0;
    text-align:center;
  }
  /* ヒーロー専用スケール(決定記録v106確定)。フォントファミリー・黄色ハイライトの
     仕組みは本文用と共通のまま、この写真背景の文脈に限定して、サイズ・インク色
     ・CTAの太さのみを拡大する。誤用リスク:このスケールを他セクションの見出しへ
     安易に流用しないこと(v106決定記録に明記)。
     フォントサイズは、v106確定の「46px相当」を上限としつつ、801〜1296px程度の
     ノートPC幅では、上記.section-innerの幅上限(49vw)と同じ比率(3.55vw)で
     連動して縮小するclamp()に変更した。固定46pxのままだと、幅が狭いノートPC
     幅で2行目が1行に収まらず3行に折り返る不具合があったため(ユーザー指摘)。
     1296px以上のデスクトップ幅では46px固定(v106確定値)で表示される。 */
  #hero .eyebrow{ font-size:17px; }
  #hero .hero-copy{
    font-size:clamp(27px, 3.55vw, 46px); color:#26231f; max-width:none;
  }
  #hero .hero-subcopy{ font-size:18px; color:#686356; }
  #hero .hero-cta{ font-size:16px; font-weight:700; }
}

/* ============================================================
   Sec.2 悩みの言語化(配色:無彩色・塗りなしで確定 #2)
   ============================================================ */
#pain-points{ background:var(--white); }
/* 決定記録v109(2026-09-15)の実装時に追加されたalign-items:startを、
   2026-09-19に削除。指定なし(初期値stretch)とし、.testi-grid(Sec.5)と
   同じく行内のカード高さが揃う挙動に統一する。 */
.pain-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
/* アイコンを縦方向で中央揃えにする(決定記録v106確定)。2026-09-21、タイトルの
   横にアイコンを置く配置(2列×2行)に対応するため display:flex から grid へ
   変更。アイコンは1列目で2行分(タイトル行+本文行)にまたがり、縦中央揃え。 */
.pain-item{ border:1px solid var(--gray-5); padding:22px 24px; display:grid; grid-template-columns:auto 1fr; column-gap:var(--icon-gap); align-items:center; }
/* プレースホルダーの.icon-frame(灰色ストライプ+枠線)を廃止し、実アイコン画像
   (.pain-icon)に差し替え(決定記録v106確定)。色は画像自体が無彩色の線画のため、
   CSS側では枠線・背景を持たせない。 */
.pain-icon{ width:var(--icon-box-w); height:var(--icon-size); flex-shrink:0; object-fit:contain; grid-column:1; grid-row:1 / span 2; }
.pain-title{ font-size:var(--fs-card-title); font-weight:700; color:var(--ink); margin:0 0 8px 0; line-height:1.6; }
.pain-text{ font-size:var(--fs-body); color:var(--gray-2); margin:0; line-height:1.85; }

/* ============================================================
   Sec.3 体験セッションの流れ(STEP=B-2案確定・v53、矢印=ジェイド)
   ============================================================ */
#flow{ background:var(--gray-7); }
.flow-steps{ display:flex; gap:0; align-items:stretch; }
.flow-step{ flex:1; padding:0 18px; }
.flow-step:first-child{ padding-left:0; }
.flow-step:last-child{ padding-right:0; }
.step-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.step-badge{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--jade); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; font-family:"Zen Kaku Gothic New",sans-serif;
}
.step-label{ font-size:var(--fs-card-title); font-weight:700; color:var(--ink); margin:0; }
.step-text{ font-size:var(--fs-body); color:var(--gray-1); line-height:1.9; margin:0; }
.flow-arrow{
  flex:0 0 34px; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--jade); align-self:center; padding-top:19px;
}

.recommend-block{ margin-top:34px; padding-top:26px; border-top:1px dashed var(--gray-5); }
.recommend-title{ font-size:var(--fs-card-title); font-weight:700; color:var(--ink); margin-bottom:6px; }
.recommend-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.recommend-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--fs-body); color:var(--gray-1); line-height:1.8;
  padding:12px 2px; border-bottom:1px dashed var(--gray-5);
}
.recommend-list li:last-child{ border-bottom:none; }
.recommend-mark{
  width:14px; height:2px; background:var(--gray-3);
  flex-shrink:0; margin-top:10px;
}

/* ============================================================
   Sec.4 コーチプロフィール
   決定記録v111確定:実績バッジ3件(検証手段なし)を削除。経歴を単文の
   メタ情報から「ワークキャリア」の物語文へ拡張。本文量の増加に伴い、
   写真+氏名は「バイライン」として本文の先頭に独立させ(横並びは
   バイライン内のみ)、本文全体は写真の右に回り込ませない全幅レイアウト
   に変更した(理由:本文が長くなり、右回り込みだと写真が本文途中で
   "浮いた"見え方になり読みにくいため)。
   資格リスト=マゼンタ塗り。行頭の黒丸(●)はワイヤーフレーム確定分
   (v11)への回帰(旧来の.icon-frame(器・v52確定)を汎用的に転用して
   いたものを、資格取得の可否を示す誤読(空のチェックボックスに
   見える)を避けるため置き換え。qual-list上での.icon-frame採用の
   経緯自体は決定記録上に見当たらず、Sec.2/Sec.5と共通の「器」部品を
   汎用転用した実装上の副産物と判断)。
   ============================================================ */
#profile{ background:var(--white); }
.profile-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  grid-template-rows:auto 1fr;
  column-gap:48px;
  row-gap:28px;
}
.profile-byline{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; grid-column:1; grid-row:1; }
.profile-photo{ width:320px; height:160px; flex-shrink:0; object-fit:cover; border-radius:6px; }
.profile-name{
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:20px; font-weight:700;
  color:var(--ink); margin:0 0 4px 0;
}
.profile-name-kana{ font-size:18px; font-weight:400; color:var(--gray-2); margin-left:8px; }
.profile-role{ font-size:15px; color:var(--gray-2); margin:0; }
.profile-role-line{ display:block; }
.profile-text-col{ grid-column:2; grid-row:1 / span 2; }
.profile-text{ font-size:var(--fs-body); color:var(--gray-1); line-height:1.95; margin:0 0 24px 0; padding-left:13px; }
.profile-heading{
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:15px; font-weight:700;
  color:var(--navy); letter-spacing:.02em;
  border-left:3px solid var(--navy); padding:1px 0 1px 10px;
  margin:32px 0 14px 0;
}
.profile-panel{ margin-top:0; background:var(--gray-7); border:1px solid var(--gray-6); padding:22px 24px 22px 11px; grid-column:1; grid-row:2; align-self:start; }
.profile-panel .profile-heading{ margin-top:0; border-left:none; color:var(--gray-1); padding:1px 0 1px 13px; }
.qual-list{ list-style:none; margin:0; padding:0 0 0 13px; display:flex; flex-direction:column; gap:10px; }
.qual-list li{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--gray-1); font-weight:500; line-height:1.6;
}
.qual-list li::before{ content:"●"; font-size:8px; color:var(--gray-3); flex-shrink:0; }
.qual-seg{ display:inline-block; }

/* ============================================================
   Sec.5 お客様の声・実績(引用符=無彩色確定 #8、属性表記=v18ルール維持 #9)
   ============================================================ */
#testimonials{ background:var(--gray-7); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testi-card{ background:#fff; border:1px solid var(--gray-5); padding:20px 18px; display:flex; flex-direction:column; }
.testi-text{ font-size:var(--fs-body); color:var(--gray-1); line-height:1.85; margin:0; flex:1; }
.avatar-row{ display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--gray-5); }
/* お客様の声アバター(決定記録v106確定:実写風イラスト画像に差し替え、
   サイズを現状比約1.8倍に拡大。36px→64px。モバイルは32px→48px(下記メディアクエリ側)。 */
.img-box.avatar{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.testi-attr{ font-size:13px; color:var(--gray-3); }
.testi-source-note{ font-size:var(--fs-meta); color:var(--gray-3); margin-top:22px; padding-top:14px; border-top:1px dashed var(--gray-5); }

/* ============================================================
   Sec.6 料金・プラン(STAGE1=白+紺細枠/STAGE2=ジェイド淡/STAGE3=ジェイド濃)
   ============================================================ */
#pricing{ background:var(--white); }
.roadmap{ display:flex; align-items:stretch; gap:0; }
.roadmap-step{ flex:1; min-width:0; padding:24px 20px; }
.roadmap-step.stage-1{ background:#fff; border:1.5px solid var(--navy); }
.roadmap-step.stage-2{ background:var(--jade-10); border:1.5px solid var(--jade-20); }
.roadmap-step.stage-3{ background:var(--jade); border:1.5px solid var(--jade); }
.roadmap-step.stage-3 .roadmap-name,
.roadmap-step.stage-3 .roadmap-price{ color:#fff; }
.roadmap-step.stage-3 .roadmap-meta-item{ border-color:rgba(255,255,255,.5); color:#fff; }
.roadmap-step.stage-3 .roadmap-channel{ color:rgba(255,255,255,.9); border-top-color:rgba(255,255,255,.3); }
.roadmap-arrow-wrap{
  flex:0 0 50px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--jade); font-size:19px; text-align:center; gap:6px;
}
.roadmap-arrow-caption{ font-size:9.5px; color:var(--gray-3); line-height:1.4; }
/* 矢印の向き:デスクトップは「→」、モバイル(カードが縦積みになる幅)は「↓」に
   CSSのcontentで切り替える(2026-09-21)。HTML側はグリフを持たない空のspanのみ。 */
.roadmap-arrow-glyph::before{ content:"→"; }
.roadmap-name{ font-size:var(--fs-card-title); font-weight:700; margin-bottom:10px; color:var(--ink); }
.roadmap-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.roadmap-meta-item{ border:1px solid var(--gray-4); font-size:var(--fs-meta); padding:3px 8px; color:var(--gray-1); }
.roadmap-price{ font-size:19px; font-weight:700; margin-bottom:8px; color:var(--ink); }
/* 受講特典ボックス(2026-09-21改訂):外枠(ブラス)はv12確定分を維持。内部を
   バッジ(受講/特典・2行)+主文+注記の3要素構成に変更。 */
.roadmap-incentive{
  display:flex; align-items:flex-start; gap:10px;
  background:#fff; border:1.5px solid var(--brass); padding:10px 12px; margin-bottom:12px;
}
.roadmap-incentive-badge{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--brass); border-radius:4px; color:var(--brass);
  font-size:9.5px; font-weight:700; line-height:1.4; padding:3px 6px; text-align:center;
}
.roadmap-incentive-body{ display:flex; flex-direction:column; gap:4px; }
.roadmap-incentive-main{ font-size:var(--fs-meta); font-weight:700; color:var(--brass); }
.roadmap-incentive-note{ font-size:9.5px; color:var(--gray-3); line-height:1.5; }
.roadmap-channel{ font-size:var(--fs-meta); color:var(--gray-2); border-top:1px dashed var(--gray-5); padding-top:10px; line-height:1.8; }
/* カード本文の小見出し・リスト(2026-09-21追加)。文字サイズ・色は.roadmap-channel
   からの継承(var(--fs-meta)・var(--gray-2)、stage-3はrgba(255,255,255,.9))を
   使用し、個別のfont-size/colorは指定しない。 */
.roadmap-subhead{ font-weight:700; margin:14px 0 6px 0; }
.roadmap-subhead:first-child{ margin-top:0; }
.roadmap-list{ margin:0 0 4px 0; padding-left:18px; }
.roadmap-list li{ margin-bottom:4px; }
.roadmap-list:last-child{ margin-bottom:0; }
.roadmap-cta{
  display:inline-block; background:var(--navy); color:#fff; padding:10px 24px; border-radius:999px;
  font-size:13px; font-weight:500; letter-spacing:.03em; text-decoration:none; margin-top:14px;
}
.roadmap-cta:hover{ opacity:.88; }
.pricing-footnote{ margin:20px 0 0 0; font-size:var(--fs-meta); color:var(--gray-3); }

/* ============================================================
   Sec.7 予約枠(唯一のメインCTA・配色は紺のみ確定 #12)
   ============================================================ */
#booking{ background:var(--gray-7); }
#booking .section-inner{ padding-bottom:76px; }
/* Jicoo埋め込みウィジェット(widget div+script)のコンテナ。widget div自体の
   min-width:320px/height:720px等は、Jicoo管理画面で発行されたコードの固定値
   のため変更していない。はみ出した場合の保険としてoverflow-x:autoを設定。 */
.booking-embed{ background:#fff; border:2px solid var(--navy); padding:20px; overflow-x:auto; }
.booking-cta{
  display:inline-block; background:var(--navy); color:#fff; padding:14px 36px;
  border-radius:999px; font-size:13px; font-weight:500; letter-spacing:.04em; text-decoration:none;
}
.booking-cta:hover{ opacity:.88; }

/* ============================================================
   Sec.8 FAQ(タグ=ブラス/本体=無彩色)
   ============================================================ */
#faq{ background:var(--white); }
.faq-item{ border-bottom:1px solid var(--gray-5); padding:0; }
.faq-item:first-of-type{ border-top:1px solid var(--gray-5); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 34px 20px 2px; position:relative;
  font-size:var(--fs-card-title); font-weight:700; color:var(--ink); line-height:1.6;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:2px; top:18px; width:20px; height:20px;
  border:1px solid var(--gray-4); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--gray-3); line-height:1;
}
.faq-item[open] summary::after{ content:"−"; background:var(--ink); color:#fff; border-color:var(--ink); }
.faq-tag{
  display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.03em;
  background:#fff; color:var(--brass); border:1.5px solid var(--brass); padding:2px 8px; margin-right:10px; vertical-align:middle;
}
.faq-a{ font-size:var(--fs-body); color:var(--gray-2); line-height:1.9; margin:0; padding:0 34px 22px 2px; }

/* ============================================================
   フッター(4列構成:法的表記/運営会社/つながる/学ぶ・決定記録v86確定)
   フッター再設計案B(ラベル付きクラスター)ベース。Sec.1の.eyebrowと同じ
   語彙(ブラス色・広い字間の小見出し)を列見出しに転用し、本文より一回り
   小さいフッター専用タイポグラフィとあわせて、関連リンクのグルーピングと
   視認性(下線の常時表示・濃い文字色)を両立する。旧.footer-links等の
   クラスは、この4列構成への統合に伴い廃止した(kiyaku.css・tokushoho.html・
   kiyaku.htmlも同時に統一)。
   ============================================================ */
footer{ background:var(--white); border-top:2px solid var(--navy); }
footer .section-inner{ max-width:1080px; margin:0 auto; padding:48px 32px 34px 32px; }

/* フッターロゴ(決定記録v89確定・B案。クリックでindex.htmlへ遷移する通常のリンク) */
.footer-brand{ margin:0 0 28px 0; }
.footer-logo{ display:block; height:40px; width:auto; }

.footer-columns{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  padding-bottom:28px; margin-bottom:20px; border-bottom:1px solid var(--gray-5);
}
.footer-col{ padding:0 16px; }
.footer-col:first-child{ padding-left:0; }
.footer-col + .footer-col{ border-left:1px solid var(--gray-5); }

.footer-col-label{
  font-size:11.5px; letter-spacing:.16em; color:var(--brass); font-weight:600;
  margin:0 0 12px 0;
}
.footer-col-list{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
/* フッターリンクのホバー時、下線は表示しない(運営者指定)。ヘッダーのナビゲーション
   (タブ)等では下線によるホバー表現を許容するが、フッターリンクには適用しない。
   以前は下線を透明の状態で常駐させ、ホバー時のみ色を付けて可視化する実装だった
   ため、意図せずホバー時に下線が表示されていた。border-bottom自体を廃し、文字色の
   変化のみでホバーを表現する。 */
.footer-col-list a{
  font-size:var(--fs-meta); letter-spacing:-.005em; color:var(--gray-1); text-decoration:none;
  width:fit-content;
  transition:color .15s ease;
}
.footer-col-list a:hover{ color:var(--navy); }
.footer-col-list a.line-badge{
  display:inline-flex; align-items:center; border:1px solid var(--navy); border-bottom:1px solid var(--navy);
  color:var(--navy); font-weight:500; padding:8px 14px;
}
.footer-col-list a.line-badge:hover{ background:var(--navy); color:#fff; }
.footer-current{ font-size:var(--fs-meta); letter-spacing:-.005em; color:var(--gray-4); text-decoration:none; }

.footer-operator{ font-size:10.5px; color:var(--gray-2); margin:12px 0 0 0; }
/* 下線を廃し(上記.footer-col-list aと同じ理由)、ホバー表現はサイト内の紺色要素と
   共通の慣習(opacity低下・.site-header-cta:hover等と同様)に合わせた。デフォルトの
   文字色がすでに紺色のため、文字色変化によるホバー表現ができないための代替。 */
.footer-operator a{
  color:var(--navy); text-decoration:none;
  transition:opacity .15s ease;
}
.footer-operator a:hover{ opacity:.7; }

/* フッター下部:ロゴ+受付時間+定休日の統合行(決定記録v100〜v103確定)。
   4カラムフッターの3ページ(index.html・kiyaku.html・tokushoho.html)、および
   privacy-policy.htmlに適用する。3カラムフッターのサンクスページには適用しない。
   紺色の帯(白文字・v101)に、受付時間・定休日を1本のテキストとして
   1行に統合(v102)。モバイル幅では、テキスト中の区切り位置に強制改行を
   入れ、2行表示に戻す(v103・.footer-hours-break)。 */
.footer-meta{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap:14px 28px; background:var(--navy); padding:16px 20px;
}
.footer-meta-logo{ display:block; flex-shrink:0; }
.footer-meta .footer-logo{ height:28px; }
.footer-hours{ font-size:10px; color:var(--white); margin:0; flex-shrink:0; white-space:nowrap; }
.footer-hours-break{ display:none; }

.copyright{ font-size:9.5px; color:var(--gray-2); text-align:right; padding:0; margin:0; }

/* ============================================================
   フローティング「ページ先頭へ戻る」ボタン(index.htmlのみ・決定記録v89確定)
   #hero監視のIntersectionObserverを流用してフェードイン表示する(index.html側JS)。
   PC/モバイル双方で動作する(ヘッダー固定化とは異なり、画面幅による制限はない)。
   ============================================================ */
.totop-float{
  position:fixed; right:24px; bottom:24px; z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.totop-float img{ display:block; width:56px; height:56px; }
.totop-float.is-visible{ opacity:1; pointer-events:auto; }
.totop-float:hover{ opacity:.85; }

/* ============================================================
   レスポンシブ(@media max-width:800px・モックアップと同水準)
   ============================================================ */
@media (max-width:800px){
  .section-inner{ padding:44px 22px; }

  .site-header-inner{ padding:12px 22px; gap:12px; }
  .site-logo-img{ height:19px; }
  .site-logo-sub{ font-size:8px; }

  /* モバイルヘッダーの表示切替(決定記録v92確定)。通常時(ページ最上部)はロゴ+
     タグラインのみを表示し、CTAボタンは非表示にする(Sec.1側の大きなCTAボタンと
     訴求が重複するのを避けるため)。Sec.1を過ぎてスクロールした時点で、逆にロゴ・
     タグラインを非表示にし、CTAボタンのみのコンパクトな帯に切り替える。この2状態は
     常に排他的とし、3要素が同時に表示される状態は作らない。v91のタグライン省略
     記号(…)表示は、タグライン自体を非表示にするこの方式では不要のため削除した。 */
  .site-header-cta{
    padding:8px 16px; font-size:11px;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  header.site-header.is-pinned{
    position:fixed; top:0; left:0; right:0; z-index:100;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    border-bottom:1px solid var(--gray-6);
  }
  header.site-header.is-pinned .site-logo-img,
  header.site-header.is-pinned .site-logo-sub{ display:none; }
  header.site-header.is-pinned .site-header-cta{ opacity:1; pointer-events:auto; }

  .pain-grid{ grid-template-columns:1fr; }
  .pain-icon{ grid-row:1; }
  .pain-text{ grid-column:1 / -1; grid-row:2; }

  .flow-steps{ flex-direction:column; }
  .flow-step{ padding:18px 0 !important; }
  .flow-step:not(:first-child){ border-top:1px dashed var(--gray-5); }
  .flow-arrow{ flex:0 0 auto; transform:rotate(90deg); margin:2px 0 2px 12px; padding-top:0; align-self:flex-start; }

  .profile-layout{ grid-template-columns:1fr; }
  .profile-byline{ flex-direction:column; align-items:flex-start; grid-column:auto; grid-row:auto; }
  .profile-text-col{ grid-column:auto; grid-row:auto; }
  .profile-panel{ grid-column:auto; grid-row:auto; }
  .profile-photo{ width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; }

  .testi-grid{ grid-template-columns:1fr; }
  .img-box.avatar{ width:48px; height:48px; }

  .roadmap{ flex-direction:column; }
  .roadmap-arrow-wrap{ flex-direction:row; padding:10px 0; }
  .roadmap-arrow-glyph::before{ content:"↓"; }

  .footer-logo{ height:32px; }
  .footer-columns{ grid-template-columns:1fr; gap:24px; }
  .footer-col{ padding:0 !important; border-left:none !important; }
  .footer-meta{ flex-direction:column; align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .footer-hours{ white-space:normal; }
  .footer-hours-break{ display:block; }
  .copyright{ text-align:left; margin-top:22px; }

  .totop-float{ right:16px; bottom:16px; }
  .totop-float img{ width:46px; height:46px; }

  #booking .section-inner{ padding-left:14px; padding-right:14px; }
  .booking-embed{ padding:12px; }

  :root{ --icon-size:56px; --icon-gap:18px; --icon-box-w:74px; }
}

/* Jicoo埋め込みウィジェット(min-width:320px固定)向けの追加調整。
   320px前後の狭幅端末では、上記の余白縮小だけでは完全には収まりきらない
   可能性があるため、.booking-embedのoverflow-x:autoを保険として残している
   (ページ全体ではなく、この箱の中だけで横スクロールする設計)。 */
@media (max-width:400px){
  #booking .section-inner{ padding-left:8px; padding-right:8px; }
  .booking-embed{ padding:8px; }
}