:root{
  --bg: #FAF9F4;
  --bg-alt: #F1ECE0;
  --ink: #2B2E29;
  --ink-soft: #5B5F57;
  --line: #DCD6C6;
  --sage: #4F6B52;
  --sage-deep: #3B5240;
  --sage-pale: #E4EAE0;
  --wood: #B8895A;          /* 装飾専用（罫線・ロゴのドットなど） */
  --wood-text: #8C5F33;     /* 同系の濃色。文字・アイコン用（WCAG AA 4.5:1 を満たす） */
  --blue: #5F8492;          /* フォーカスリング専用（背景に対し3:1以上） */
  --white: #FFFFFF;
  --radius: 4px;
  --maxw: 1120px;
  --shadow: 0 10px 30px -12px rgba(43,46,41,0.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
h1,h2,h3{
  font-family:"Shippori Mincho", serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.02em;
  margin:0;
}
a{color:inherit;}
img{max-width:100%; display:block;}
section{scroll-margin-top:84px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-size:13px;
  letter-spacing:0.22em;
  color:var(--sage-deep);
  font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--wood);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.btn:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
.btn-primary{background:var(--sage-deep); color:var(--white);}
.btn-primary:hover{background:var(--sage); box-shadow:var(--shadow); transform:translateY(-1px);}
.btn-line{background:var(--white); color:var(--sage-deep); border-color:var(--sage-deep);}
.btn-line:hover{background:var(--sage-pale); transform:translateY(-1px);}

/* Header */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(250,249,244,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.headbar{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:"Shippori Mincho", serif;
  font-size:19px; font-weight:700; color:var(--ink);
  text-decoration:none;
  white-space:nowrap; flex-shrink:0;
}
.logo svg{width:30px; height:30px; flex-shrink:0;}
.logo .sub{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-size:11px; font-weight:500; color:var(--ink-soft); letter-spacing:0.08em; white-space:nowrap;}
nav.mainnav{display:flex; align-items:center; gap:28px; flex-shrink:0;}
nav.mainnav a{
  font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink-soft);
  position:relative; padding:4px 0; white-space:nowrap;
}
nav.mainnav a:hover, nav.mainnav a:focus-visible{color:var(--sage-deep);}
.head-cta{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.head-cta .btn{padding:11px 18px; font-size:14px;}
.hamburger{
  display:none; width:44px; height:44px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--white);
  align-items:center; justify-content:center; cursor:pointer;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger span::before{position:absolute; top:-6px;}
.hamburger span::after{position:absolute; top:6px;}
.hamburger[aria-expanded="true"] span{background:transparent;}
.hamburger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.hamburger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.mobile-menu{
  position:fixed; top:84px; left:0; right:0; bottom:0; z-index:70;
  background:var(--bg); padding:24px; overflow-y:auto;
  opacity:0; transform:translateY(-14px); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.mobile-menu.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-menu.open ~ .mobile-cta{display:none;}
.mobile-menu > a{display:block; font-size:20px; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-family:"Shippori Mincho",serif;}
.mobile-menu .mm-cta{margin-top:28px; display:flex; flex-direction:column; gap:12px;}

/* Hero */
.hero{
  position:relative;
  padding:76px 0 88px;
  background:
    radial-gradient(700px 400px at 88% -10%, rgba(124,154,166,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url('../img/hero-room.jpg');
  background-size:cover;
  background-position:center 35%;
  opacity:0.12;
  filter:blur(4px) grayscale(40%);
  z-index:0;
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(30px, 4.4vw, 48px); line-height:1.5; margin:18px 0 22px;}
.hero h1 .accent{color:var(--sage-deep);}
.hero p.lead{font-size:16.5px; color:var(--ink-soft); max-width:46ch; margin-bottom:32px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px;}
.hero-meta{display:flex; flex-wrap:wrap; gap:22px; font-size:13.5px; color:var(--ink-soft);}
.hero-meta .item{display:flex; align-items:center; gap:8px;}
.hero-meta svg{width:16px; height:16px; color:var(--sage-deep); flex-shrink:0;}
.hero-art{position:relative; display:flex; align-items:center; justify-content:center;}
.spine-wrap{position:relative; width:100%; max-width:360px;}
.spine-ring{
  position:absolute; inset:0; margin:auto; width:340px; height:340px;
  border-radius:50%; border:1px dashed var(--line);
}
@keyframes spineDraw{ from{stroke-dashoffset:900;} to{stroke-dashoffset:0;} }
.spine-svg path.bone{ stroke-dasharray:900; stroke-dashoffset:900; animation:spineDraw 1.8s ease forwards; }
.spine-svg path.bone:nth-child(1){animation-delay:.05s;}
.spine-svg path.bone:nth-child(2){animation-delay:.15s;}
.spine-svg path.bone:nth-child(3){animation-delay:.25s;}

/* generic section spacing */
.section{padding:84px 0;}
.section.alt{background:var(--bg-alt);}
.section-head{max-width:640px; margin:0 0 46px;}
.section-head h2{font-size:clamp(24px,3vw,34px); margin-top:14px; line-height:1.5;}
.section-head p{color:var(--ink-soft); margin-top:14px; font-size:15.5px;}

/* symptom cards */
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.care-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; text-decoration:none; color:var(--ink);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  display:flex; flex-direction:column; gap:14px;
}
.care-card:hover, .care-card:focus-visible{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--sage);}
.care-card .ic{width:40px; height:40px; color:var(--sage-deep);}
.care-card h3{font-size:17.5px;}
.care-card p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.75;}
.care-card .more{margin-top:auto; font-size:13px; font-weight:700; color:var(--sage-deep); display:flex; align-items:center; gap:6px;}

/* why chosen */
.reasons{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line);}
.reason{padding:32px 22px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);}
.reason:last-child{border-right:none;}
.reason .num{font-family:"Shippori Mincho",serif; font-size:13px; color:var(--wood-text); font-weight:700; letter-spacing:0.08em;}
.reason h3{font-size:16.5px; margin:14px 0 10px;}
.reason p{font-size:13.8px; color:var(--ink-soft); margin:0;}
.reason-link{display:inline-block; margin-top:8px; color:var(--sage-deep); font-weight:700; text-decoration:none; white-space:nowrap;}
.reason-link:hover{text-decoration:underline;}

/* flow */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.flow-step{position:relative; padding-top:8px;}
.flow-step .fnum{
  font-family:"Shippori Mincho",serif; font-size:34px; color:var(--sage-pale);
  -webkit-text-stroke:1.4px var(--sage-deep);
  line-height:1;
}
.flow-step h3{font-size:16px; margin:14px 0 8px;}
.flow-step p{font-size:13.6px; color:var(--ink-soft); margin:0;}
.flow-line{position:absolute; top:26px; left:calc(100% + 2px); width:calc(22px * 2); height:1px; background:var(--line);}

/* スタッフ紹介（親子2名） */
.staff-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; max-width:860px;}
.staff-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.staff-photo{aspect-ratio:4/5; background:var(--sage-pale); overflow:hidden;}
.staff-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.staff-body{padding:24px 26px 28px;}
/* 紹介文（先に定義し、下の個別指定で上書きする） */
.staff-body p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.85;}
.staff-body .staff-clinic{
  margin:0; font-size:12px; font-weight:700; letter-spacing:0.14em;
  color:var(--sage-deep); line-height:1.6;
}
.staff-card h3{font-size:21px; margin:8px 0 0; letter-spacing:0.04em;}
.staff-kana{
  display:block; margin-top:5px;
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:11.5px; font-weight:500;
  color:var(--ink-soft); letter-spacing:0.1em;
}
.staff-body .staff-role{
  margin:12px 0 14px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--sage-deep);
  letter-spacing:0.04em;
}
.staff-body p strong{color:var(--ink); font-weight:700;}

/* 2院構成の補足 */
.entity-note{
  margin-top:26px; padding:22px 24px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
}
.entity-note p{margin:0; font-size:13.8px; color:var(--ink-soft); line-height:1.8;}
.entity-note .entity-note-lead{
  margin:0 0 10px; font-size:14.5px; font-weight:700; color:var(--ink);
  font-family:"Shippori Mincho",serif;
}
.entity-note a{color:var(--sage-deep); font-weight:700;}

/* hours + access */
.access-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.info-table{width:100%; border-collapse:collapse; margin-top:6px;}
.info-table th, .info-table td{
  text-align:left; padding:14px 10px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top;
}
.info-table th{width:110px; color:var(--ink-soft); font-weight:500;}
.hours-table{width:100%; border-collapse:collapse; margin-top:18px;}
.hours-table th, .hours-table td{padding:10px 12px; border-bottom:1px solid var(--line); font-size:14px; text-align:left;}
.hours-table th{color:var(--ink-soft); font-weight:500; width:160px;}
.hours-table caption{
  caption-side:top; text-align:left; font-size:12.5px; color:var(--ink-soft);
  padding:0 0 10px; line-height:1.7;
}
.hours-table caption strong{color:var(--sage-deep); font-weight:700;}
.map-frame{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.map-frame iframe{width:100%; height:340px; border:0; display:block;}

/* pricing note */
.price-note{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.price-note svg{width:34px; height:34px; color:var(--wood-text); flex-shrink:0;}
.price-note p{margin:0; font-size:14.5px; color:var(--ink-soft);}

/* faq */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:15.5px; gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .q-mark{font-family:"Shippori Mincho",serif; color:var(--sage-deep); margin-right:10px;}
.faq-item summary .chev{transition:transform .2s ease; flex-shrink:0; color:var(--ink-soft);}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item .a{padding:0 4px 24px 34px; font-size:14.5px; color:var(--ink-soft); max-width:44em;}

/* 開閉アニメーション（JSが有効なときのみ適用）。
   外側は高さだけを動かす箱にし、余白は内側の .acc-inner が持つ。
   余白を高さと一緒に動かすと、box-sizing:border-box では
   「高さは余白より小さくできない」制約に途中で引っかかり、
   変化の速度が急に切り替わってカクついて見えるため分離している。
   実際の開閉制御は各ページのインラインJSが行う（<details> は既定では瞬時に切り替わる）。 */
.js-accordion .faq-item .a,
.js-accordion .news-item.has-detail .news-body{
  padding:0;
  overflow:hidden;
  transition:height .34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-accordion .faq-item .a > .acc-inner{padding:0 4px 24px 34px;}
.js-accordion .news-item.has-detail .news-body > .acc-inner{padding:0 4px 24px 116px;}
/* 閉じている最中は矢印を先に戻す（open属性は閉じ終わってから外れるため） */
.faq-item.is-closing summary .chev,
.news-item.has-detail details.is-closing .news-chev{transform:rotate(0deg);}

/* gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.gallery-item{
  /* figure はブラウザ標準で左右40px・上下1emの余白が付くため打ち消す */
  margin:0;
  position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--sage-pale);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-item figcaption{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(180deg, transparent, rgba(43,46,41,0.6));
  color:var(--white); font-size:13px; font-weight:500; letter-spacing:0.04em;
  padding:26px 14px 10px;
}
@media (max-width: 680px){
  .gallery-grid{grid-template-columns:1fr;}
}

/* news */
.news-list{border-top:1px solid var(--line);}
.news-item{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px;
  padding:20px 4px; border-bottom:1px solid var(--line);
}
.news-item .news-date{
  font-family:"Shippori Mincho",serif; font-size:13px; color:var(--ink-soft);
  letter-spacing:0.04em; flex-shrink:0; width:96px;
}
.news-item .news-title{font-size:14.5px; color:var(--ink); line-height:1.7;}

/* 詳細を開けるお知らせ（本文つき） */
.news-item.has-detail{display:block; padding:0;}
.news-item.has-detail summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:20px 4px;
}
.news-item.has-detail summary::-webkit-details-marker{display:none;}
.news-item.has-detail .news-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px; min-width:0;
}
.news-item.has-detail .news-chev{
  flex-shrink:0; color:var(--ink-soft); transition:transform .2s ease; align-self:center;
}
.news-item.has-detail details[open] .news-chev{transform:rotate(180deg);}
.news-item.has-detail .news-body{
  padding:0 4px 24px 116px; font-size:14.5px; color:var(--ink-soft); max-width:70ch;
}
.news-item.has-detail .news-body p{margin:0 0 12px;}
.news-item.has-detail .news-body p:last-child{margin-bottom:0;}

@media (max-width: 680px){
  .news-item{flex-direction:column; gap:4px;}
  .news-item .news-date{width:auto;}
  .news-item.has-detail{flex-direction:row;}
  .news-item.has-detail .news-head{flex-direction:column; gap:4px;}
  .news-item.has-detail .news-body{padding-left:4px;}
  .js-accordion .news-item.has-detail .news-body > .acc-inner{padding-left:4px;}
}

/* final cta */
.final-cta{
  /* 日本語の長文は中央寄せだと読みにくいため、サイト全体と同じ左揃えに統一 */
  background:var(--sage-deep); color:var(--white); text-align:left; padding:80px 0;
}
/* 幅の指定は em（全角1文字＝1em）で行う。ch は日本語では文字数と一致しない */
.final-cta h2{color:var(--white); font-size:clamp(24px,3.2vw,34px); margin-bottom:16px; max-width:26em;}
.final-cta p{color:rgba(255,255,255,0.82); margin:0 0 32px; font-size:15px; max-width:34em;}
.final-cta .actions{display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap;}
.final-cta .btn-primary{background:var(--white); color:var(--sage-deep);}
.final-cta .btn-primary:hover{background:var(--sage-pale);}
.final-cta .btn-line{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.6);}
.final-cta .btn-line:hover{background:rgba(255,255,255,0.1);}

footer{background:var(--ink); color:rgba(255,255,255,0.72); padding:52px 0 90px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; margin-bottom:36px;}
.foot-logo{font-family:"Shippori Mincho",serif; color:var(--white); font-size:18px; margin-bottom:10px;}
footer p{font-size:13.5px; line-height:1.9; margin:0 0 6px;}
footer h3{color:var(--white); font-size:13px; letter-spacing:0.08em; margin-bottom:14px; font-weight:700;}
footer a{color:rgba(255,255,255,0.78); text-decoration:none; font-size:13.5px; display:block; margin-bottom:10px;}
footer a:hover{color:var(--white);}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.15); padding-top:20px; font-size:12px; color:rgba(255,255,255,0.5); text-align:center;}

/* mobile sticky cta */
.mobile-cta{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:80;
  background:var(--white); border-top:1px solid var(--line);
  box-shadow:0 -8px 20px rgba(0,0,0,0.08);
}
.mobile-cta .row{display:grid; grid-template-columns:1fr 1fr; }
.mobile-cta a, .mobile-cta button{
  border:none; padding:16px 8px; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; cursor:pointer;
}
.mobile-cta .call{background:var(--sage-deep); color:var(--white);}
.mobile-cta .line{background:var(--white); color:var(--sage-deep); border-left:1px solid var(--line);}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* キーボード操作用：本文へのスキップリンク（Tabキーで最初に到達したときだけ表示） */
.skip-link{
  position:absolute; top:-200px; left:16px; z-index:200;
  background:var(--sage-deep); color:var(--white);
  padding:12px 20px; border-radius:var(--radius);
  font-size:14px; font-weight:700; text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{top:12px;}

/* フォーカスリングを全インタラクティブ要素で統一 */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px; border-radius:2px;
}

@media (max-width: 1060px){
  nav.mainnav, .head-cta{display:none;}
  .hamburger{display:flex;}
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-art{order:-1;}
  .spine-wrap{max-width:220px;}
  .grid-cards{grid-template-columns:repeat(2,1fr);}
  .reasons{grid-template-columns:repeat(2,1fr);}
  .reason:nth-child(2n){border-right:none;}
  .flow{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .flow-line{display:none;}
  .access-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 680px){
  .grid-cards{grid-template-columns:1fr;}
  .reasons{grid-template-columns:1fr;}
  .reason{border-right:none;}
  .flow{grid-template-columns:1fr;}
  .staff-grid{grid-template-columns:1fr; gap:24px;}
  .staff-photo{aspect-ratio:3/2;}
  /* スマホでは画面幅に対して文字が大きすぎるため、1段階小さくする */
  .staff-body{padding:20px 20px 24px;}
  .staff-body p{font-size:13.5px; line-height:1.8;}
  .staff-body .staff-clinic{font-size:11px; letter-spacing:0.1em;}
  .staff-card h3{font-size:17.5px; margin-top:6px;}
  .staff-kana{font-size:11px; margin-top:4px;}
  .staff-body .staff-role{margin:10px 0 12px; padding-bottom:12px; font-size:12.5px;}
  .foot-grid{grid-template-columns:1fr; gap:28px;}
  .mobile-cta{display:block;}
  body{padding-bottom:64px;}
  section{scroll-margin-top:70px;}
  .price-note{flex-direction:column; align-items:flex-start; text-align:left;}

  /* タップ領域の確保（指で押しやすい 44px 以上に） */
  footer a{padding:10px 0; margin-bottom:0;}
  a[href^="tel:"]:not(.btn):not(.call){display:inline-block; padding:12px 0;}
}

/* ============================================================
   症状ページ用の追加コンポーネント（既存トークンのみ使用・新規追加分）
   ============================================================ */

/* breadcrumb */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13px; color:var(--ink-soft); padding:18px 0 0;
}
.breadcrumb a{text-decoration:none; color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--sage-deep);}
.breadcrumb .sep{color:var(--line);}
.breadcrumb .current{color:var(--ink); font-weight:500;}

/* symptom sub-page hero (text only, no illustration) */
.subhero{
  padding:28px 0 60px;
  background:
    radial-gradient(700px 400px at 88% -10%, rgba(124,154,166,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.subhero h1{font-size:clamp(26px, 3.6vw, 40px); line-height:1.55; margin:16px 0 20px;}
.subhero p.lead{font-size:16px; color:var(--ink-soft); max-width:58ch; margin-bottom:28px;}

/* サブヒーロー内の補足（どちらの院が担当かの案内など） */
.notice-inline{
  max-width:58ch; margin:0 0 28px; padding:14px 18px;
  background:var(--white); border:1px solid var(--line);
  border-left:3px solid var(--sage-deep); border-radius:var(--radius);
  font-size:14px; color:var(--ink-soft); line-height:1.8;
}
.notice-inline strong{color:var(--ink); font-weight:700;}
.notice-inline p{margin:0 0 10px;}
.notice-inline p:last-child{margin-bottom:0;}

/* symptom checklist */
.check-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; list-style:none; margin:0; padding:0;}
.check-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; color:var(--ink-soft); line-height:1.7;
}
.check-list svg{width:18px; height:18px; margin-top:3px; color:var(--sage-deep); flex-shrink:0;}

/* approach block */
.approach-block p{color:var(--ink-soft); font-size:15px; margin:0 0 16px;}
.approach-block p:last-child{margin-bottom:0;}
.approach-block strong{color:var(--ink); font-weight:700;}

/* 施術ページの要点リスト（見極めのポイント・検査項目など） */
.method-points{list-style:none; margin:0; padding:0; max-width:720px;}
.method-points li{
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 20px; margin-bottom:12px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  font-size:15px; color:var(--ink-soft); line-height:1.8;
}
.method-points li:last-child{margin-bottom:0;}
.method-points .mp-num{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:var(--sage-deep); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:"Shippori Mincho",serif; font-size:14px; font-weight:700;
  margin-top:2px;
}
.method-points strong{color:var(--ink); font-weight:700;}

/* price mini table on symptom pages */
.price-mini{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px;
}
.price-mini .row{display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
.price-mini .row:last-child{border-bottom:none;}
.price-mini .row .amount{font-weight:700; color:var(--sage-deep);}
.price-mini .note{margin-top:16px; font-size:13px; color:var(--ink-soft);}

@media (max-width: 680px){
  .check-list{grid-template-columns:1fr;}
}

/* ============================================================
   トップページ レイアウト（デスクトップ幅のみ／モバイルは既存のレスポンシブ挙動を維持）
   ・ヒーロー／スタッフ紹介／ギャラリー：左右反転のベント配置
   ・お悩み・症状／選ばれる理由：マソンリー・ポスター風の非対称配置
   ============================================================ */
@media (min-width: 981px){
  /* ヒーロー：画像とテキストを左右反転 */
  .hero-grid{grid-template-columns:0.95fr 1.05fr;}
  .hero-art{order:-1;}

  /* お悩み・症状：マソンリー配置（トップページのみ） */
  #symptoms .section-head{text-align:left;}
  #symptoms .grid-cards{grid-template-columns:repeat(3,1fr); grid-auto-flow:dense;}
  #symptoms .care-card:nth-child(1){grid-row:span 2; padding:40px 28px; justify-content:center;}
  #symptoms .care-card:nth-child(1) .ic{width:48px; height:48px;}
  #symptoms .care-card:nth-child(1) h3{font-size:21px;}
  #symptoms .care-card:nth-child(5){grid-column:span 2;}

  /* 選ばれる理由：ポスター風タイル */
  #reasons .section-head{margin-left:auto; text-align:right;}
  #reasons .eyebrow{justify-content:flex-end;}
  .reasons{grid-template-columns:repeat(2,1fr); border:none; gap:2px; background:var(--line);}
  .reason{background:var(--bg); border:none; padding:40px 28px; position:relative; overflow:hidden; min-height:200px;}
  .section.alt .reason{background:var(--bg-alt);}
  .reason .num{position:absolute; right:16px; bottom:-6px; font-size:110px; line-height:1; opacity:0.08; letter-spacing:0;}
  .reason h3{position:relative; max-width:80%;}
  .reason p{position:relative;}

  /* スタッフ紹介：写真とテキストを左右反転 */

  /* 院内のご案内：ベント配置 */
}

/* ============================================================
   控えめなスクロールイン演出
   ・施術の流れ（.flow-step）／他のお悩みも見る（#related .care-card）のみ対象
   （prefers-reduced-motion 環境、JS未実行時は通常表示のまま）
   ============================================================ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}