/* =========================================================
   あおぞら整骨院・整体 — 営業デモサイト v3
   リファレンス ts-nakamura.com を忠実トレース（デザイン/レイアウトのみ・文章/画像は複製せず）。
   抽出した設計：
     - 配色：アクセント青 #0068b7／文字 #333／副文字 #666／面 #f8f8f8／淡teal #ebf6f6／緑差し #0c976f
     - 書体：英字見出し=Krona One（refと同一）／和文=Noto Sans JP weight300基調・letter-spacing .05em・palt
     - 構造：PC=左の縦長固定サイドバーヘッダー＋本文を右へずらす／SP=上部ロゴ＋ハンバーガー
     - 形：カード10px角丸＋ box-shadow 0 0 24px rgba(0,0,0,.1)／大ブロックは下端50px角丸／pillナビ
     - ヒーロー=写真モンタージュ＋大きなブランドマーク＋大判の和文キャッチ
   配色は医療系の信頼を保ちつつ ref と同じ青基調へ寄せた。中身は架空店のまま。
   ========================================================= */

:root{
  --bg:        #f8f8f8;   /* refの面（薄グレー） */
  --bg-card:   #ffffff;
  --bg-teal:   #ebf6f6;   /* refの淡teal面 */
  --bg-teal-2: #f5fbfb;
  --blue:      #0068b7;   /* ref支配アクセント */
  --blue-d:    #00528f;   /* hover/濃い青 */
  --blue-tint: #e7f1fa;   /* 青の淡背景 */
  --green:     #0c976f;   /* refの緑差し（タグ等） */
  --green-tint:#e6f4ef;
  --ink:       #333333;   /* ref本文 */
  --ink-2:     #555555;
  --ink-3:     #666666;   /* ref副文字 */
  --line:      rgba(51,51,51,.10);  /* refの罫線 */
  --line-2:    #e6e6e6;
  --shadow:    0 0 24px rgba(0,0,0,.10);   /* refのカード影（特徴的） */
  --shadow-soft:0 0 18px rgba(0,0,0,.06);
  --radius:    10px;       /* refのカード角丸 */
  --radius-lg: 50px;       /* refの大ブロック下端角丸 */
  --sidebar:   116px;      /* PCの縦長サイドバー幅 */
  --maxw:      1080px;
  --en:        "Krona One", sans-serif;
  --jp:        "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  word-break:auto-phrase; line-break:strict; text-wrap:pretty;
  font-family:var(--jp);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  font-weight:300;            /* refは weight300 基調 */
  line-height:1.85;
  letter-spacing:.05em;       /* refと同じ */
  font-feature-settings:"palt" 1;   /* refと同じツメ */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:3px; }
[inert]{ pointer-events:none; }
h1,h2,h3,h4{ font-family:inherit; font-weight:500; line-height:1.5; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.accent{ color:var(--blue); }
.nb{ white-space:normal; }

/* 英字ラベル＝Krona One（ref踏襲）。News / Feature / Access など */
.en{ font-family:var(--en); font-weight:400; letter-spacing:.04em; }

/* スキップリンク */
.skip{ position:absolute; left:-9999px; top:0; z-index:10000; background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

/* ---------- 共通レイアウト ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:18px; padding-right:18px; }
section{ scroll-margin-top:84px; }

/* セクション英字見出し（ref：Krona One大判＋下に控えめな和文） */
.eyebrow{
  font-family:var(--en); font-weight:400;
  font-size:1.9rem; line-height:1; color:var(--ink);
  letter-spacing:.02em; margin:0 0 .55em; display:block;
}
.eyebrow--light{ color:#fff; }
.section-title{ font-size:1.34rem; line-height:1.55; font-weight:500; color:var(--ink); margin:0 0 14px; }
.section-title--light{ color:#fff; }
.section-lead{ color:var(--ink-3); font-size:.95rem; line-height:1.95; max-width:64ch; }
.section-lead--light{ color:rgba(255,255,255,.85); }

/* ---------- ボタン（ref：白基調・10px角丸・やわらかい大きめ影、CTAは青） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:54px; padding:0 26px; border-radius:var(--radius);
  font-family:inherit; font-weight:500; font-size:1rem; letter-spacing:.04em;
  cursor:pointer; border:1.5px solid transparent; line-height:1.3; text-align:center;
  background:#fff; color:var(--ink); box-shadow:var(--shadow);
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn svg{ width:1.2em; height:1.2em; flex:0 0 auto; }
.btn:hover{ transform:translateY(-1px); }
.btn--lg{ min-height:60px; font-size:1.05rem; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 6px 20px rgba(0,104,183,.28); }
.btn--primary:hover{ background:var(--blue-d); }
.btn--phone{ background:#fff; color:var(--blue); border-color:var(--blue); box-shadow:var(--shadow); }
.btn--phone:hover{ background:var(--blue-tint); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }

/* 小さな丸ボタン（ref：news一覧へ・症状pill） */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:40px; padding:0 18px; border-radius:999px;
  background:#fff; color:var(--ink); font-size:.85rem; font-weight:400;
  box-shadow:var(--shadow); transition:background .2s,color .2s,transform .2s;
}
.btn-pill svg{ width:1.05em; height:1.05em; }
.btn-pill:hover{ background:var(--blue); color:#fff; transform:translateY(-1px); }

/* =========================================================
   ヘッダー（SPファースト：上部ロゴバー＋ハンバーガー）
   PCでは縦長の固定サイドバーに変身（ref踏襲）
   ========================================================= */
.header{
  position:sticky; top:0; left:0; z-index:9000;
  background:rgba(255,255,255,.95); backdrop-filter:saturate(1.4) blur(6px);
  box-shadow:0 1px 0 var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__icon{
  width:38px; height:38px; flex:0 0 auto; color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-tint); border-radius:50%;
}
.brand__icon svg{ width:22px; height:22px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__mark{ font-size:1.02rem; font-weight:500; color:var(--ink); letter-spacing:.04em; }
.brand__en{ font-family:var(--en); font-size:.52rem; color:var(--blue); letter-spacing:.06em; margin-top:3px; }

/* PCナビ・電話・CTA（SPでは隠す） */
.header__right{ display:none; }

/* ハンバーガー */
.hamb{
  width:46px; height:46px; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.hamb span, .hamb span::before, .hamb span::after{
  content:""; display:block; width:24px; height:2px; background:currentColor; border-radius:2px; position:relative;
}
.hamb span::before{ position:absolute; top:-7px; }
.hamb span::after{ position:absolute; top:7px; }

/* ドロワー */
.drawer{
  position:fixed; inset:0; z-index:9500; background:#fff;
  transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; min-height:64px; border-bottom:1px solid var(--line); }
.drawer__close{ width:46px; height:46px; border:0; background:transparent; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--ink); }
.drawer__nav{ display:flex; flex-direction:column; padding-top:8px; padding-bottom:8px; }
.drawer__nav a{ display:flex; justify-content:space-between; align-items:baseline; padding:15px 4px; border-bottom:1px solid var(--line); font-weight:400; }
.drawer__nav a span{ font-family:var(--en); font-size:.6rem; color:var(--blue); }
.drawer__cta{ display:grid; gap:10px; padding-top:18px; }
.drawer__tel{ text-align:center; padding:22px 0 30px; }
.drawer__tel a{ font-family:var(--en); font-size:1.5rem; color:var(--blue); }
.drawer__tel small{ display:block; color:var(--ink-3); font-size:.78rem; margin-top:4px; }

/* =========================================================
   ヒーロー（ref：写真モンタージュ＋大ブランドマーク＋大判の和文キャッチ）
   下端を大きく丸める。SPは縦積み。
   ========================================================= */
.hero{
  position:relative; background:var(--bg-teal-2);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow:hidden; padding:26px 0 40px;
}
.hero__inner{ position:relative; }
/* 写真モンタージュ（3枚オフセット配置）— 実画像はプレースホルダ面で代用 */
.hero__montage{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:88px; gap:10px; margin-bottom:22px; }
.hero__shot{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,#dfeaf2,#cdddea); box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
}
.hero__shot span{ font-size:.66rem; color:#5b7488; text-align:center; padding:6px; line-height:1.5; }
.hero__shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__shot--a img{ object-position:center; }
.hero__shot--a{ grid-row:span 2; }
.hero__shot--b{ grid-row:span 1; }
.hero__shot--c{ grid-row:span 1; }
/* 大ブランドマーク（refの人型ロゴ位置に相当する装飾。当院はSVGラインで自作） */
.hero__mark{
  position:absolute; right:14px; top:8px; width:74px; height:74px; color:var(--blue);
  opacity:.92; pointer-events:none;
}
.hero__loc{
  display:inline-flex; align-items:center; gap:7px; color:var(--blue);
  font-size:.8rem; font-weight:400; margin:0 0 14px;
}
.hero__loc svg{ width:1.05em; height:1.05em; }
.hero__h1{
  font-size:2rem; line-height:1.5; font-weight:500; color:var(--ink); letter-spacing:.02em;
  margin:0 0 16px;
}
.hero__h1 .accent{ color:var(--blue); }
.hero__sub{ color:var(--ink-3); font-size:.95rem; line-height:1.95; margin:0 0 18px; max-width:46ch; }
.hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.hero__chips li{
  font-size:.78rem; color:var(--blue-d); background:var(--blue-tint);
  border-radius:999px; padding:6px 14px; font-weight:400;
}
.hero__actions{ display:grid; gap:12px; margin-bottom:14px; }
.hero__note{ font-size:.78rem; color:var(--ink-3); }

/* =========================================================
   信頼バー（refの数値帯相当）
   ========================================================= */
.trustbar{ background:#fff; }
.trustbar ul{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.trustbar li{ background:#fff; padding:18px 12px; text-align:center; }
.trustbar .num{ font-size:1.05rem; font-weight:500; color:var(--ink); }
.trustbar .num .accent{ color:var(--blue); font-size:1.4em; }
.trustbar .lbl{ font-size:.72rem; color:var(--ink-3); margin-top:4px; }

/* =========================================================
   お知らせ（ref：News欄。白カード上に英字大見出し＋日付/タグ行リスト＋一覧pill）
   ブロックは下端50px角丸（refの bottom-radius）
   ========================================================= */
.news{ background:#fff; border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:46px 0 50px; }
.news__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.news__head-l{ display:flex; align-items:baseline; gap:14px; }
.news__head .eyebrow{ margin:0; }
.news__title{ font-size:.95rem; color:var(--ink-3); font-weight:400; }
.news__list li{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"date tag" "txt txt";
  gap:4px 12px; padding:16px 2px; border-bottom:1px solid var(--line);
}
.news__list li:first-child{ border-top:1px solid var(--line); }
.news__list time{ grid-area:date; font-family:var(--en); font-size:.78rem; color:var(--ink-3); align-self:center; }
.news__tag{
  grid-area:tag; justify-self:start; align-self:center;
  font-size:.68rem; color:#fff; background:var(--blue); border-radius:4px; padding:2px 11px; font-weight:400; letter-spacing:.04em;
}
.news__tag--sub{ background:var(--green); }
.news__list p{ grid-area:txt; font-size:.9rem; color:var(--ink-2); line-height:1.8; }

/* =========================================================
   汎用セクション
   ========================================================= */
.section{ padding:50px 0; }
.section--tint{ background:var(--bg-teal); }
.sec-cta{ margin-top:26px; padding:22px; background:var(--bg-teal); border-radius:var(--radius); text-align:center; }
.sec-cta p{ font-size:.9rem; color:var(--ink-2); margin-bottom:14px; }

/* 選ばれる理由（ref：3 Featureカード／写真＋見出し） */
.reasons__grid{ display:grid; gap:16px; margin-top:24px; }
.reason{
  background:#fff; border-radius:var(--radius); padding:26px 22px 24px; box-shadow:var(--shadow);
  position:relative;
}
.reason__no{ font-family:var(--en); font-size:1.6rem; color:var(--blue-tint); position:absolute; top:16px; right:18px; }
.reason__ico{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:var(--blue); background:var(--blue-tint); border-radius:50%; margin-bottom:14px; }
.reason__ico svg{ width:26px; height:26px; }
.reason h3{ font-size:1.08rem; font-weight:500; color:var(--ink); margin-bottom:8px; }
.reason p{ font-size:.88rem; color:var(--ink-3); line-height:1.9; }
.reason--feature{ box-shadow:0 0 24px rgba(0,104,183,.16); }

/* 画像バンド（ref：フルブリードの暗い写真帯＋中央寄せの白見出し＋CTA） */
.imgband{ position:relative; padding:64px 0; text-align:center; overflow:hidden; }
.imgband__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.imgband__ph{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,40,72,.56),rgba(0,40,72,.72));
}
.imgband__ph span{ color:rgba(255,255,255,.5); font-size:.78rem; text-align:center; line-height:1.7; }
.imgband__inner{ position:relative; color:#fff; }
.imgband__eyebrow{ font-family:var(--en); font-size:1.5rem; color:#fff; opacity:.92; margin-bottom:.5em; }
.imgband__title{ font-size:1.7rem; line-height:1.6; font-weight:500; margin:0 0 16px; }
.imgband__lead{ font-size:.92rem; color:rgba(255,255,255,.85); line-height:1.95; max-width:40ch; margin:0 auto 22px; }
.imgband .btn{ margin:0 auto; }

/* 症状から探す（ref：症状/部位pillナビ＋カード） */
.sym__grid{ display:grid; gap:14px; margin-top:24px; }
.sym{ background:#fff; border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); }
.sym__ico{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--green); background:var(--green-tint); border-radius:50%; margin-bottom:12px; }
.sym__ico svg{ width:25px; height:25px; }
.sym h3{ font-size:1.05rem; font-weight:500; margin-bottom:7px; }
.sym p{ font-size:.86rem; color:var(--ink-3); line-height:1.9; margin-bottom:12px; }
.sym__more{ display:inline-flex; align-items:center; gap:5px; color:var(--blue); font-size:.84rem; font-weight:500; }
.sym__more svg{ width:1.1em; height:1.1em; }

/* 症状pillリスト（ref：case-search の column4 丸ボタン群） */
.sym__pills{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; justify-content:center; }
.sym__pills .btn-pill{ font-size:.82rem; }

/* 当院の考え方（暗い面・refの top-info に近いダーク背景） */
.approach{ background:linear-gradient(160deg,#0c2c3f,#11405a); color:#fff; }
.approach .section-title{ color:#fff; }
.approach__grid{ display:grid; gap:14px; margin-top:24px; }
.acard{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:24px 20px; }
.acard__ico{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.12); border-radius:50%; margin-bottom:12px; }
.acard__ico svg{ width:25px; height:25px; }
.acard h3{ font-size:1.02rem; font-weight:500; margin-bottom:8px; }
.acard p{ font-size:.86rem; color:rgba(255,255,255,.82); line-height:1.9; }

/* 施術の流れ（ref：番号付きステップ縦リスト） */
.flow__list{ display:grid; gap:0; margin-top:24px; counter-reset:flow; }
.flow__item{ position:relative; padding:0 0 26px 56px; }
.flow__item::before{
  counter-increment:flow; content:counter(flow,decimal-leading-zero);
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:#fff; font-family:var(--en); font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
}
.flow__item::after{ content:""; position:absolute; left:19px; top:44px; bottom:6px; width:2px; background:var(--blue-tint); }
.flow__item:last-child{ padding-bottom:0; }
.flow__item:last-child::after{ display:none; }
.flow__item h3{ font-size:1.05rem; font-weight:500; margin-bottom:7px; padding-top:8px; }
.flow__item p{ font-size:.86rem; color:var(--ink-3); line-height:1.9; }

/* 料金（ref：カード3枚） */
.price__grid{ display:grid; gap:14px; margin-top:24px; }
.pcard{ background:#fff; border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow); }
.pcard--feature{ box-shadow:0 0 24px rgba(0,104,183,.18); border:1.5px solid var(--blue-tint); }
.pcard__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.pcard__tag{ font-size:.68rem; color:#fff; background:var(--blue); border-radius:4px; padding:3px 10px; }
.pcard__tag--sub{ background:var(--ink-3); }
.pcard__head h3{ font-size:1.05rem; font-weight:500; }
.pcard__price{ font-family:var(--en); font-size:1.9rem; color:var(--ink); line-height:1; }
.pcard__price .yen{ font-size:.6em; margin-right:2px; }
.pcard__price .tax{ font-family:var(--jp); font-size:.42em; color:var(--ink-3); margin-left:6px; }
.pcard__price--text{ font-family:var(--jp); font-size:1rem; font-weight:500; color:var(--blue); }
.pcard__note{ font-size:.82rem; color:var(--ink-3); line-height:1.85; margin-top:12px; }
.price__foot{ font-size:.78rem; color:var(--ink-3); margin-top:18px; line-height:1.85; }

/* 院長・スタッフ */
.doctor__lead{ display:grid; gap:20px; margin-top:24px; }
.doctor__photo{ aspect-ratio:3/4; background:linear-gradient(135deg,#dfeaf2,#cdddea); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.doctor__photo img{ width:100%; height:100%; object-fit:cover; }
.doctor__ph{ font-size:.74rem; color:#5b7488; text-align:center; line-height:1.7; }
.doctor__ph small{ font-size:.92em; }
.doctor__role{ display:inline-block; font-size:.74rem; color:#fff; background:var(--blue); border-radius:4px; padding:3px 12px; margin-bottom:10px; }
.doctor__name{ font-size:1.5rem; font-weight:500; margin-bottom:14px; }
.doctor__yomi{ font-size:.62em; color:var(--ink-3); margin-left:10px; font-weight:400; }
.doctor__msg{ font-size:.9rem; color:var(--ink-2); line-height:1.95; margin-bottom:16px; }
.doctor__profile .row{ display:grid; grid-template-columns:64px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:.84rem; }
.doctor__profile dt{ color:var(--blue); font-weight:500; }
.doctor__profile dd{ color:var(--ink-3); line-height:1.85; }
.staff__grid{ display:grid; gap:14px; margin-top:24px; }
.staff{ background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); text-align:center; }
.staff__photo{ aspect-ratio:1/1; border-radius:var(--radius); background:linear-gradient(135deg,#dfeaf2,#cdddea); overflow:hidden; margin-bottom:12px; }
.staff__photo img{ width:100%; height:100%; object-fit:cover; }
.staff__photo span{ font-size:.7rem; color:#5b7488; line-height:1.6; }
.staff__role{ display:inline-block; font-size:.7rem; color:var(--blue); background:var(--blue-tint); border-radius:4px; padding:2px 10px; margin-bottom:6px; }
.staff h4{ font-size:1rem; font-weight:500; margin-bottom:6px; }
.staff p{ font-size:.82rem; color:var(--ink-3); line-height:1.85; }

/* お客様の声 */
.voices__grid{ display:grid; gap:14px; margin-top:24px; }
.voice{ background:#fff; border-radius:var(--radius); padding:24px 20px; box-shadow:var(--shadow); margin:0; }
.voice__quote{ color:var(--blue-tint); display:block; margin-bottom:8px; }
.voice__quote svg{ width:34px; height:34px; }
.voice blockquote{ margin:0 0 16px; font-size:.9rem; color:var(--ink-2); line-height:1.95; }
.voice__who{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.voice__init{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--en); font-size:.85rem; }
.voice__name{ display:block; font-size:.9rem; font-weight:500; }
.voice__attr{ display:block; font-size:.74rem; color:var(--ink-3); }
.voices__note{ font-size:.76rem; color:var(--ink-3); margin-top:16px; }

/* FAQ */
.faq__list{ margin-top:24px; }
.faq__item{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-soft); margin-bottom:12px; overflow:hidden; }
.faq__item summary{ list-style:none; cursor:pointer; padding:18px 50px 18px 20px; position:relative; font-size:.94rem; font-weight:500; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::before{ content:"Q"; font-family:var(--en); color:var(--blue); margin-right:10px; }
.faq__item summary::after{ content:""; position:absolute; right:20px; top:50%; width:10px; height:10px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:translateY(-70%) rotate(45deg); transition:transform .2s; }
.faq__item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__a{ padding:0 20px 20px; }
.faq__a p{ font-size:.86rem; color:var(--ink-3); line-height:1.95; }

/* アクセス・診療時間 */
.access__grid{ display:grid; gap:20px; margin-top:24px; }
.access__map iframe{ width:100%; height:260px; border:0; border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.access__mapnote{ font-size:.74rem; color:var(--ink-3); margin-top:8px; }
.access__info dl{ margin:0 0 22px; }
.access__info .row{ display:grid; grid-template-columns:78px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.access__info dt{ color:var(--blue); font-weight:500; }
.access__info dd{ color:var(--ink-2); line-height:1.8; }
.access__info dd a{ color:var(--blue); }
.access__h3{ font-size:1.05rem; font-weight:500; margin:6px 0 12px; }
.hours-wrap{ overflow-x:auto; }
.hours{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:300px; }
.hours th, .hours td{ border:1px solid var(--line-2); padding:10px 8px; text-align:center; }
.hours thead th{ background:var(--blue-tint); color:var(--ink); font-weight:500; }
.hours .t-left{ text-align:left; }
.hours .ok{ color:var(--blue); font-weight:500; }
.hours .ng{ color:#6e6e6e; }
.access__hoursnote{ font-size:.78rem; color:var(--ink-3); margin:12px 0 18px; line-height:1.85; }
.access__hoursnote b{ color:var(--ink); }
.access__cta{ margin-top:6px; }

/* 予約（CV）— 暗い青面に白カードフォーム */
.reserve{ background:linear-gradient(160deg,var(--blue-d),var(--blue)); }
.reserve__inner{ display:grid; gap:24px; }
.reserve__lead{ color:rgba(255,255,255,.9); font-size:.92rem; line-height:1.95; margin-bottom:18px; }
.reserve__give{ display:grid; gap:10px; margin-bottom:20px; }
.reserve__give li{ display:flex; align-items:flex-start; gap:10px; color:#fff; font-size:.88rem; }
.reserve__give svg{ width:1.2em; height:1.2em; flex:0 0 auto; color:#fff; margin-top:.25em; }
.reserve__phone{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); border-radius:var(--radius); padding:16px 18px; color:#fff; }
.reserve__phone svg{ width:30px; height:30px; flex:0 0 auto; }
.reserve__phone small{ display:block; font-size:.72rem; opacity:.85; }
.reserve__phone b{ display:block; font-family:var(--en); font-size:1.4rem; letter-spacing:.02em; }
.eyebrow--accentbg{ color:#fff; }

.reserve__card{ background:#fff; border-radius:var(--radius); padding:24px 20px; box-shadow:0 12px 40px rgba(0,0,0,.18); }
.field{ margin-bottom:16px; }
.field__legend{ font-size:.88rem; font-weight:500; color:var(--ink); margin-bottom:8px; }
.field > label{ display:block; font-size:.86rem; font-weight:500; color:var(--ink); margin-bottom:7px; }
.req{ font-size:.66rem; color:#fff; background:var(--blue); border-radius:3px; padding:1px 7px; margin-left:6px; font-weight:400; vertical-align:1px; }
.choice{ display:flex; flex-wrap:wrap; gap:8px; }
.choice label{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; padding:9px 14px; border:1.5px solid var(--line-2); border-radius:999px; cursor:pointer; flex:0 0 auto; white-space:nowrap; }
.choice input{ accent-color:var(--blue); }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--line-2); border-radius:8px; background:#fff;
}
.field textarea{ min-height:100px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); }
.form__note{ font-size:.74rem; color:var(--ink-3); margin-top:12px; line-height:1.8; }
.form__note .ulink{ color:var(--blue); text-decoration:underline; }
.form__ok{ display:none; }
.form__ok.show{ display:block; margin-top:16px; padding:14px 16px; background:var(--green-tint); border:1px solid var(--green); border-radius:8px; font-size:.84rem; color:var(--ink); line-height:1.8; }

/* =========================================================
   フッター
   ========================================================= */
.footer{ background:#0c2c3f; color:rgba(255,255,255,.82); padding:44px 0 92px; }
.footer__cols{ display:grid; gap:24px; }
.footer__logo{ display:flex; align-items:center; gap:10px; color:#fff; margin-bottom:12px; }
.footer__logo svg{ width:26px; height:26px; color:#fff; }
.footer__logo .brand__mark{ color:#fff; font-size:1.05rem; writing-mode:horizontal-tb; letter-spacing:normal; margin-top:0; }
.footer__desc{ font-size:.84rem; line-height:1.9; color:rgba(255,255,255,.75); }
.footer__nav{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.footer__nav a{ font-size:.84rem; color:rgba(255,255,255,.8); }
.footer__nav a:hover{ color:#fff; }
.demo-flag{ margin-top:28px; padding:16px 18px; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.3); border-radius:8px; font-size:.78rem; line-height:1.85; color:rgba(255,255,255,.8); }
.demo-flag b{ color:#fff; }
.footer__meta{ font-size:.76rem; color:rgba(255,255,255,.6); margin-top:18px; line-height:1.8; }
.footer__copy{ font-family:var(--en); font-size:.62rem; color:rgba(255,255,255,.5); margin-top:14px; letter-spacing:.03em; }

/* =========================================================
   モバイル固定アクションバー（主要CV）
   ========================================================= */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:8000;
  display:grid; grid-template-columns:1fr 1.2fr; gap:0;
  background:#fff; box-shadow:0 -2px 16px rgba(0,0,0,.12);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:60px; font-size:.82rem; font-weight:500; }
.actionbar a small{ font-size:.62rem; font-weight:400; opacity:.8; }
.actionbar svg{ width:20px; height:20px; }
.ab-tel{ color:var(--blue); border-right:1px solid var(--line); }
.ab-req{ background:var(--blue); color:#fff; }

/* =========================================================
   ブレークポイント
   ========================================================= */
@media (min-width:768px){
  .wrap{ padding-left:28px; padding-right:28px; }
  .section{ padding:72px 0; }
  .news{ padding:64px 0 70px; }

  .eyebrow{ font-size:2.4rem; }
  .section-title{ font-size:1.6rem; }
  .hero__h1{ font-size:2.6rem; }
  .imgband{ padding:90px 0; }
  .imgband__title{ font-size:2.1rem; }

  .hero__montage{ grid-auto-rows:120px; gap:14px; }
  .hero__mark{ width:96px; height:96px; right:24px; top:14px; }
  .hero__actions{ grid-template-columns:1fr 1fr; }

  .trustbar ul{ grid-template-columns:repeat(4,1fr); }
  .reasons__grid{ grid-template-columns:repeat(3,1fr); }
  .sym__grid{ grid-template-columns:repeat(2,1fr); }
  .approach__grid{ grid-template-columns:repeat(3,1fr); }
  .price__grid{ grid-template-columns:repeat(3,1fr); }
  .staff__grid{ grid-template-columns:repeat(2,1fr); }
  .voices__grid{ grid-template-columns:repeat(3,1fr); }
  .doctor__lead{ grid-template-columns:300px 1fr; align-items:start; }
  .access__grid{ grid-template-columns:1.1fr 1fr; align-items:stretch; }
  .access__map{ display:flex; flex-direction:column; }
  .access__map iframe{ flex:1 1 auto; height:auto; min-height:420px; }
  .reserve__inner{ grid-template-columns:1fr 1fr; align-items:center; }
  .footer__cols{ grid-template-columns:1.4fr 1fr; }
  .news__head .eyebrow{ font-size:2.4rem; }

  /* PCではアクションバーは隠す（サイドバー/ヘッダーCTAがあるため） */
  .actionbar{ display:none; }
}

/* ===== PC：左の縦長固定サイドバーヘッダー（refの最大特徴） ===== */
@media (min-width:1080px){
  .header{
    position:fixed; top:0; left:0; height:100vh; width:var(--sidebar);
    flex-direction:column; background:#fff; backdrop-filter:none;
    box-shadow:0 0 24px rgba(0,0,0,.08); overflow-y:auto; padding:26px 0;
  }
  .header__inner{ flex-direction:column; align-items:center; min-height:0; height:100%; gap:0; padding:0 10px; }
  .brand{ flex-direction:column; text-align:center; gap:8px; }
  .brand__icon{ width:46px; height:46px; }
  .brand__icon svg{ width:26px; height:26px; }
  .brand__txt{ align-items:center; }
  .brand__mark{ font-size:.74rem; writing-mode:vertical-rl; letter-spacing:.12em; margin-top:6px; line-height:1.4; }
  .brand__en{ display:none; }

  .header__right{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:auto; margin-bottom:auto; width:100%; }
  .nav{ display:flex; flex-direction:column; align-items:center; gap:16px; }
  .nav a{ writing-mode:vertical-rl; font-size:.82rem; letter-spacing:.16em; color:var(--ink); padding:2px 0; }
  .nav a:hover{ color:var(--blue); }
  .header__tel{ display:none; }
  .header__cta{
    writing-mode:vertical-rl; min-height:auto; padding:18px 12px; border-radius:8px;
    font-size:.8rem; letter-spacing:.16em;
  }
  .hamb{ display:none; }

  /* 本文をサイドバー分だけ右へずらす（ref：margin-left:3.2rem 相当） */
  .hero, .trustbar, .news, .section, .imgband, .reserve, .footer{ margin-left:var(--sidebar); }
  /* 大ブロックの下端角丸はそのまま、フルブリード帯もサイドバー分内側に */
  .imgband{ margin-left:var(--sidebar); }
}

@media (min-width:1280px){
  .eyebrow{ font-size:2.7rem; }
  .hero__h1{ font-size:2.9rem; }
  .section-title{ font-size:1.78rem; }
  .imgband__title{ font-size:2.4rem; }
}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}