@charset "UTF-8";
/* ==========================================================================
   漢方サロン 田七
   ・スマートフォンは1カラム、パソコンは横幅を使ったレイアウト
   ・角丸・カード多用を避け、罫線と余白で構成する
   ========================================================================== */

:root{
  --bg:      #FBF9F5;
  --bg-2:    #F4F1EA;
  --bg-3:    #EDE8DC;
  --card-bg: #FFFDF9;
  --ink:     #262421;
  --ink-2:   #47433D;   /* 本文。以前より濃く */
  --ink-3:   #6B665E;   /* 補足。以前より濃く */
  --ink-4:   #8B8680;   /* ごく薄い装飾だけに使う */
  --rule:    #D6CEBF;
  --rule-2:  #E4DED1;
  --rule-3:  #C3B9A5;

  /* 角丸 */
  --r-btn:   9px;
  --r-card:  12px;
  --r-sm:    7px;
  --r-pill:  100px;

  /* 影 */
  --sh-sm: 0 1px 2px rgba(38,36,33,.04), 0 3px 10px rgba(38,36,33,.045);
  --sh-md: 0 2px 6px rgba(38,36,33,.05), 0 12px 30px rgba(38,36,33,.07);

  --green:   #5B6B5C;
  --green-d: #43503F;
  --green-l: #EDF0EC;
  --oak:     #8C6D53;
  --oak-l:   #F3EDE5;
  --enji:    #8A4B48;

  --line:    #05A846;   /* LINE緑を少し濃く（白文字の読みやすさのため） */
  --line-br: #06C755;   /* ロゴなど、ブランド色そのもの */

  /* 濃い地（緑の帯・写真の上）に載せる色。
     同じ役目の色があちこちで別々に書かれていたので、ここにまとめる */
  --on-dark:   #F2EFE6;  /* 見出し・本文 */
  --on-dark-2: #CFD4CB;  /* 補足 */
  --on-dark-3: #BFC6BC;  /* ごく薄い装飾 */
  --gold:      #D6BF9B;  /* 濃い地の上の差し色。4.5:1 を満たす明るさにしてある */
  --gold-br:   #E4C89C;  /* フォーカス枠など、はっきり見せたいとき */

  --maxw: 1200px;
  --gut: clamp(20px, 5.2vw, 44px);
  --fab-h: 84px;

  /* 管理画面から変えられる部分 ------------------------------- */
  --fs: 1;          /* 文字の大きさの倍率 */
  --lh: 1;          /* 行間の倍率 */
  --accent: #8C6D53;/* 差し色 */

  --t-body:  calc(16.5px * var(--fs));
  --t-lead:  calc(16.5px * var(--fs));
  --t-note:  calc(14.5px * var(--fs));
  --t-tiny:  calc(13px   * var(--fs));
  --t-h1:    calc(clamp(28px, 7.6vw, 39px) * var(--fs));
  --t-h2:    calc(clamp(22px, 2.5vw, 30px) * var(--fs));
  --t-h3:    calc(clamp(17px, 1.5vw, 20px) * var(--fs));
  --t-card:  calc(clamp(17px, 1.5vw, 20px) * var(--fs));
  --t-nav:   calc(13px * var(--fs));
  --lh-body: calc(2.05 * var(--lh));
  --lh-read: calc(2.2  * var(--lh));

  --mincho: "Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic: "Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:500;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}

/* キーボードで操作している人に、いまどこを選んでいるか見せる */
:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}
.btn:focus-visible{ outline-offset:4px }
.sec--dark :focus-visible,.hero :focus-visible{ outline-color:var(--gold-br) }
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:600;margin:0;color:var(--ink)}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut) }
.wrap--narrow{ max-width:860px }

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--gothic);
  font-size:calc(11.5px * var(--fs)); letter-spacing:.3em; color:var(--accent);
  font-weight:700; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; flex:none }

.h2{
  position:relative;
  font-size:var(--t-h2);
  line-height:1.85; letter-spacing:.14em;
  margin-bottom:clamp(16px, 2.4vw, 30px);
  padding-top:clamp(14px, 1.6vw, 20px);
}
.h2::before{
  content:""; position:absolute; top:0; left:0;
  width:38px; height:2px; background:var(--accent);
}
.sec--dark .h2::before{ background:var(--gold) }
.h3{ font-size:var(--t-h3); line-height:1.9; letter-spacing:.1em }

.lead{ font-size:var(--t-lead); line-height:var(--lh-read); color:var(--ink-2); max-width:38em }
.body p{ margin:0 0 1.5em; color:var(--ink-2); font-size:var(--t-lead); line-height:var(--lh-read) }
.about .body{ padding-top:2px }
.about .body p:last-child{ margin-bottom:0 }
.body p:last-child{ margin-bottom:0 }
.muted{ color:var(--ink-3); font-size:var(--t-tiny); line-height:2.0 }

/* セクション */
.sec{ padding-block:clamp(42px, 7vw, 118px) }
.sec--alt{ background:var(--bg-2) }
.sec--dark{ background:var(--green-d); color:var(--on-dark) }
/* h1〜h4 は既定で濃い色なので、暗い帯の中では明るく上書きする */
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{ color:var(--on-dark) }
.sec--dark .lead,.sec--dark .body p{ color:var(--on-dark-2) }
.sec--dark .eyebrow{ color:var(--gold) }
.sec--tight{ padding-block:clamp(32px,5vw,80px) }

.rule{ height:1px; background:var(--rule); border:0; margin:0 }
[data-sec][hidden]{ display:none !important }

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.hd{
  position:sticky; top:0; z-index:60;
  background:rgba(251,249,245,.92);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.hd.is-stuck{ border-bottom-color:var(--rule-2) }
.hd__in{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
  height:64px; display:flex; align-items:center; gap:16px }
.hd__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
.hd__mark{ width:32px; height:32px; flex:none }
.hd__name{ font-family:var(--mincho); font-size:16.5px; letter-spacing:.16em; white-space:nowrap; display:block; line-height:1.35 }
.hd__sub{ font-size:10px; letter-spacing:.22em; color:var(--ink-3); white-space:nowrap; display:block }

.hd .hd__nav{ display:none }
.hd .hd__cta{ display:none }

.navbtn{
  width:44px;height:44px;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;margin-right:-10px;
}
.navbtn span,.navbtn span::before,.navbtn span::after{
  content:"";display:block;width:20px;height:1px;background:var(--ink);
  transition:transform .32s var(--ease),opacity .2s;
}
.navbtn span::before{transform:translateY(-6px)}
.navbtn span::after{transform:translateY(5px)}
.navbtn[aria-expanded="true"] span{background:transparent}
.navbtn[aria-expanded="true"] span::before{transform:rotate(45deg)}
.navbtn[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(0)}

/* ドロワー */
.drawer{ position:fixed; inset:0; z-index:80; background:rgba(44,42,41,.34);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility .3s }
.drawer.is-open{ opacity:1; visibility:visible; pointer-events:auto }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(86%,380px);
  background:var(--bg); padding:16px 24px calc(26px + env(safe-area-inset-bottom));
  transform:translateX(102%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.is-open .drawer__panel{ transform:none }
.drawer__close{ align-self:flex-end;width:44px;height:44px;border:0;background:transparent;font-size:19px;cursor:pointer;color:var(--ink-2);margin-right:-10px }
.drawer__home{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--mincho); font-size:calc(15.5px * var(--fs)); letter-spacing:.12em; color:var(--ink);
  padding:14px 15px; margin:2px 0 4px; border-radius:var(--r-btn);
  background:var(--bg-2); border:1px solid var(--rule-2);
}
.drawer__home:hover{ background:var(--bg-3) }
.drawer__home svg{ color:var(--ink-3); flex:none }

.drawer__nav{ display:flex; flex-direction:column }

/* 項目ごとに罫線を引くと、12本の線が並んで文字が多く見える。
   線はグループの切れ目にだけ引き、あとは余白で分ける */
.drawer__gh{
  font-family:var(--gothic); font-size:calc(10.5px * var(--fs));
  letter-spacing:.22em; color:var(--ink-4); font-weight:700;
  margin:0; padding:26px 0 4px; border-top:1px solid var(--rule-2);
}
.drawer__gh:first-of-type{ margin-top:14px }

.drawer__nav a{
  padding:11px 2px; text-decoration:none;
  font-family:var(--mincho); font-size:calc(15.5px * var(--fs));
  letter-spacing:.1em; color:var(--ink-2); display:block;
}
.drawer__nav a:hover{ color:var(--accent) }
.drawer__cta{ margin-top:auto; padding-top:26px; display:grid; gap:9px }
.drawer__note{ font-size:var(--t-tiny);line-height:2;color:var(--ink-3);margin:16px 0 0;text-align:center }
.drawer__note b{ color:var(--enji) }

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:0 28px; border-radius:var(--r-btn); border:1px solid transparent;
  font-size:calc(16px * var(--fs)); font-weight:700; letter-spacing:.08em; text-decoration:none; cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px) }
.btn svg{flex:none}
.btn--line{ background:var(--line); color:#fff; box-shadow:0 2px 12px rgba(5,168,70,.28) }
.btn--line:hover{ background:#049A40 }
.btn--solid{ background:var(--green-d); color:var(--on-dark) }
.btn--solid:hover{ background:var(--green) }
.btn--outline{ background:var(--bg); color:var(--ink); border-color:var(--rule-3) }
.btn--outline:hover{ background:var(--bg-3); border-color:var(--ink-3) }
.btn--ghost{ background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.4) }
.btn--ghost:hover{ background:rgba(255,255,255,.09) }
.btn--sm{ min-height:48px; font-size:calc(14.5px * var(--fs)); padding:0 20px }
/* 枠線＋アイコンだけ緑。緑のべた塗りボタンを増やしすぎないために使う */
.btn--line-o{ color:var(--ink); border-color:var(--rule-3) }
.btn--line-o svg{ color:var(--line) }
.btn--line-o:hover{ border-color:var(--line); background:#F1F8F3 }
.btn--full{ width:100% }

/* ヘッダーのボタン。いちばん上の緑ボタンが見えている間は控えめにして、
   緑が2つ同時に目に入らないようにする */
.hd__cta{ transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease) }
.hd__cta.is-quiet{
  background:transparent; color:var(--ink-2);
  border-color:var(--rule-3); box-shadow:none;
}
.hd__cta.is-quiet svg{ color:var(--line) }
.hd__cta.is-quiet:hover{ background:var(--bg-3); border-color:var(--ink-3) }

/* 文字リンク */
.tlink{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:var(--t-note);letter-spacing:.08em;font-weight:700;color:var(--green-d);
  padding:8px 0 5px;border-bottom:1.5px solid var(--rule-3);transition:.2s var(--ease);
}
.tlink:hover{ border-bottom-color:var(--green); gap:11px }

/* 下部固定（スマホのみ） */
.fab{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--bg);border-top:1px solid var(--rule);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .4s var(--ease);
}
.fab.is-in{ transform:none }
.fab__wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:8px }
.fab .btn{ min-height:52px; font-size:calc(14.5px * var(--fs)); padding:0 10px }
.fab__tiny{ text-align:center;font-size:calc(11.5px * var(--fs));color:var(--ink-3);margin:7px 0 0;letter-spacing:.04em }

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.hero{ position:relative; background:var(--bg) }
.hero__in{ display:flex; flex-direction:column }
.hero__media{ order:-1 }
.hero__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3) }
@media (min-width:768px){ .hero__media{ border-radius:var(--r-card) } }
.hero__media img{ width:100%;height:100%;object-fit:cover;object-position:52% 44% }
.hero__body{ padding:clamp(28px,6vw,40px) var(--gut) clamp(40px,7vw,56px) }
.hero__eyebrow{ font-size:calc(11.5px * var(--fs));letter-spacing:.28em;color:var(--accent);font-weight:700;margin-bottom:14px }
.hero h1{ font-size:var(--t-h1); line-height:1.6; letter-spacing:.18em; margin-bottom:12px }
.hero__sub{
  font-family:var(--mincho);font-size:calc(clamp(14.5px,3.8vw,17px) * var(--fs));letter-spacing:.12em;
  color:var(--ink-2);margin:0 0 20px;
}
.hero__lead{ font-size:var(--t-lead);line-height:var(--lh-read);color:var(--ink-2);margin:0 0 24px }
.hero__chips{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:2px 0; margin:0 0 26px;
  font-size:calc(13px * var(--fs)); color:var(--ink-3); letter-spacing:.06em;
}
/* 枠を外して、ただの一行の但し書きにする。
   「・」で区切るだけのほうが、店の説明として自然に読める */
.chip{ display:inline-flex; align-items:baseline; white-space:nowrap }
.chip + .chip::before{
  content:"・"; margin:0 9px; color:var(--rule-3);
}
.chip--mark{ color:var(--accent); font-weight:700 }
.hero__actions{ display:grid; gap:10px }

/* --------------------------------------------------------------------------
   相談について
   -------------------------------------------------------------------------- */
.about{ display:grid; gap:clamp(26px,3.4vw,44px); align-items:start }
.about__fig{ position:relative; margin:0 }
.about__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-card); box-shadow:var(--sh-sm) }
.about__cap{ font-size:var(--t-tiny);color:var(--ink-3);margin:10px 0 0;letter-spacing:.04em;line-height:1.8 }

/* 症状 */
.symptoms{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px }
.symptom{
  font-size:calc(14.5px * var(--fs)); letter-spacing:.06em; padding:10px 18px;
  border:1px solid var(--rule); border-radius:var(--r-pill); background:var(--bg);
  color:var(--ink-2); font-weight:500;
}
.sec--alt .symptom{ background:var(--bg) }

/* --------------------------------------------------------------------------
   ご相談の流れ（縦タイムライン）
   -------------------------------------------------------------------------- */
.flow{ list-style:none; margin:clamp(8px,2vw,20px) 0 0; padding:0 }
.flow__item{
  display:grid;
  grid-template-columns:auto 20px 1fr;
  column-gap:14px;
  padding-bottom:clamp(34px,4.6vw,60px);
  position:relative;
}
.flow__item:last-child{ padding-bottom:0 }

.flow__mark{ position:relative }
.flow__mark::before{      /* 点 */
  content:""; position:absolute; left:50%; top:11px;
  width:7px; height:7px; margin-left:-3.5px; border-radius:50%;
  background:var(--accent);
}
.flow__mark::after{       /* 縦線 */
  content:""; position:absolute; left:50%; top:25px; bottom:-4px;
  width:1px; margin-left:-.5px; background:var(--rule-3);
}
.flow__item:last-child .flow__mark::after{ display:none }

.flow__no{
  font-family:var(--mincho); font-size:12px; letter-spacing:.2em;
  color:var(--accent); display:block; padding-top:11px;
}
.flow__t{ font-size:var(--t-h3); line-height:1.7; letter-spacing:.14em; margin-bottom:9px }
.flow__d{ font-size:var(--t-lead); line-height:var(--lh-read); color:var(--ink-2); margin:0; max-width:33em }
.flow__tag{
  display:inline-block; margin-top:13px; font-size:calc(12.5px * var(--fs)); letter-spacing:.08em;
  color:var(--ink-3); border:1px solid var(--rule); padding:4px 12px; border-radius:var(--r-pill);
}
.flow__after{
  margin-top:clamp(30px,4vw,46px); padding-top:26px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.flow__after p{ margin:0; font-size:var(--t-note); color:var(--ink-3) }

/* --------------------------------------------------------------------------
   料金
   -------------------------------------------------------------------------- */
.price{ border-top:1px solid var(--rule) }
.pricerow{
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--rule-2);
}
.pricerow__t{ font-family:var(--mincho); font-size:calc(16.5px * var(--fs)); letter-spacing:.1em }
.pricerow__d{ font-size:var(--t-tiny); color:var(--ink-3); line-height:1.9; margin-top:4px }
.pricerow__v{ font-family:var(--mincho); font-size:calc(21px * var(--fs)); letter-spacing:.04em; text-align:right; white-space:nowrap }
.pricerow__v small{ display:block; font-family:var(--gothic); font-size:calc(12px * var(--fs)); color:var(--ink-3); letter-spacing:.04em; margin-top:2px }

/* --------------------------------------------------------------------------
   店主
   -------------------------------------------------------------------------- */
.owner{ display:grid; gap:clamp(26px,3.4vw,48px); align-items:start }
.owner__fig{ margin:0 }
.owner__fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  border-radius:var(--r-card); box-shadow:var(--sh-sm);
}
.owner__body{ max-width:34em }

.owner__role{
  font-size:calc(11.5px * var(--fs)); letter-spacing:.28em; color:var(--accent);
  font-weight:700; margin:0 0 8px;
}
.owner__name{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 22px }
.owner__name b{
  font-family:var(--mincho); font-size:calc(27px * var(--fs)); font-weight:600; letter-spacing:.18em;
  line-height:1.4;
}
.owner__name small{ font-size:calc(13px * var(--fs)); color:var(--ink-3); letter-spacing:.1em }

/* 店主のひとこと */
.owner__quote{
  position:relative; margin:0 0 30px; padding:0 0 0 26px;
  font-family:var(--mincho); font-size:calc(clamp(17px,1.6vw,20px) * var(--fs));
  line-height:2.15; letter-spacing:.09em; color:var(--green-d);
}
.owner__quote::before{
  content:"「"; position:absolute; left:-2px; top:-.15em;
  font-family:var(--mincho); font-size:1.5em; color:var(--accent); opacity:.5; line-height:1;
}

/* プロフィール本文 */
.owner__bio{ padding-top:26px; border-top:1px solid var(--rule-2) }
.owner__bio p{
  font-size:var(--t-lead); line-height:calc(2.3 * var(--lh)); color:var(--ink-2);
  margin:0 0 1.5em; letter-spacing:.045em;
}
.owner__bio p.is-lead{
  font-size:calc(17.5px * var(--fs)); color:var(--ink); letter-spacing:.05em;
}
.owner__bio p:last-child{ margin-bottom:0 }

.cred{ margin-top:30px; padding:22px 22px 24px; border:1px solid var(--rule-2); border-radius:var(--r-card); background:var(--bg-2) }
.cred__list{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:11px }
.cred__list li{ font-size:var(--t-note); line-height:1.8; padding-left:16px; position:relative }
.cred__list li::before{ content:""; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--accent) }
.cred__list li span{ display:block; font-size:calc(12.5px * var(--fs)); color:var(--ink-3) }
.cred__imgs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:340px }
.cred__imgs img{ aspect-ratio:4/5; object-fit:contain; background:var(--bg-2); padding:12px; cursor:zoom-in; border-radius:var(--r-sm) }
.cred__note{ font-size:var(--t-tiny); line-height:2; color:var(--ink-3); margin:15px 0 0 }

/* --------------------------------------------------------------------------
   SNS
   -------------------------------------------------------------------------- */
.sns{ display:grid; gap:10px; margin-top:8px }
.snscard{
  display:flex; align-items:flex-start; gap:15px; text-decoration:none;
  padding:20px 22px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06);
  border-radius:var(--r-card);
  transition:background .22s var(--ease), border-color .22s;
}
.snscard:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.34) }
.snscard--main{ border-color:rgba(192,168,130,.6) }
.snscard__ic{ width:40px;height:40px;display:grid;place-items:center;flex:none;color:#fff;border-radius:9px;margin-top:1px }
.snscard__ic--ig{ background:linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7) }
.snscard__ic--bl{ background:var(--green) }
.snscard__ic--tt{ background:#111 }
.snscard__ic--yt{ background:#E5322D }
.snscard__body{ min-width:0 }
.snscard__t{ font-weight:700; font-size:14px; line-height:1.55; display:block }
.snscard__h{ font-size:11.5px; color:var(--on-dark-3); display:block; margin-top:2px }
.snscard__d{ font-size:11.5px; color:var(--on-dark-3); line-height:1.8; margin-top:6px; display:block }
.snscard__go{ margin-left:auto; align-self:center; color:var(--on-dark-3); flex:none }
.snsnote{
  margin-top:18px; padding:18px 20px; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-card); font-size:var(--t-tiny); line-height:2; color:var(--on-dark-2);
}
.snsnote b{ display:block; font-size:10.5px; letter-spacing:.14em; color:var(--gold); margin-bottom:5px }

/* --------------------------------------------------------------------------
   一覧カード（症例・記事・イベント）
   -------------------------------------------------------------------------- */
.cards{ display:grid; gap:clamp(15px,2.4vw,28px) }
.card{
  display:block; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--card-bg); border:1px solid var(--rule-2);
  border-radius:var(--r-card); box-shadow:var(--sh-sm);
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease), transform .24s var(--ease);
}
.sec--alt .card{ background:var(--bg) }
a.card:hover{ border-color:var(--rule-3); box-shadow:var(--sh-md); transform:translateY(-2px) }
.card__img{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-3) }
.card__img img{ width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease) }
a.card:hover .card__img img{ transform:scale(1.03) }
.card__img--contain{ position:relative; background:var(--bg-2) }
.card__img--contain img{ position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px); object-fit:contain }
.card__body{ padding:clamp(15px,2vw,26px) }
.card__meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:calc(12px * var(--fs)); color:var(--ink-3); letter-spacing:.06em; margin-bottom:9px }
.tag{ font-size:calc(12px * var(--fs)); letter-spacing:.06em; padding:4px 11px; border:1px solid var(--rule); color:var(--green-d); border-radius:var(--r-pill); font-weight:700 }
.tag--enji{ border-color:#D9BEBB; color:var(--enji) }
.tag--gold{ border-color:#DEC9A8; color:var(--oak) }
.tag--sample{ border-style:dashed; color:var(--ink-3) }
.card__t{ font-size:var(--t-card); line-height:1.8; letter-spacing:.1em; margin-bottom:10px }
.card__x{ font-size:var(--t-note); line-height:var(--lh-read); color:var(--ink-2); margin:0 }
.card__more{ display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--green) }
.card__more svg{ transition:transform .24s var(--ease) }
a.card:hover .card__more svg{ transform:translateX(4px) }

/* 症例 */
/* 症例カード：帯ごとに背景を変えて読み分けられるようにする */
.casecard__spec{
  display:grid; grid-template-columns:repeat(2,1fr); margin:0;
  background:var(--bg-2); border-block:1px solid var(--rule-2);
}
.spec{ padding:11px 6px; text-align:center; border-right:1px solid var(--rule-2) }
.spec:last-child{ border-right:0 }
.spec dt{ font-size:calc(11px * var(--fs)); letter-spacing:.04em; color:var(--ink-3); margin-bottom:3px; font-weight:700 }
.spec dd{ margin:0; font-family:var(--mincho); font-size:calc(15.5px * var(--fs)); letter-spacing:.02em; line-height:1.35; color:var(--ink) }
.spec dd small{ font-family:var(--gothic); font-size:calc(11.5px * var(--fs)); color:var(--ink-3) }

.casecard__cost{
  display:flex; flex-wrap:wrap; gap:1px 14px; align-items:baseline; line-height:1.6;
  padding:9px clamp(15px,2vw,26px); background:var(--oak-l);
  border-bottom:1px solid #E4D8C4; font-size:calc(12px * var(--fs)); color:#6D5636;
}
.casecard__cost span{ white-space:nowrap }
.casecard__cost b{ font-family:var(--mincho); font-size:calc(14.5px * var(--fs)); color:#5E4A2E }
.casecard__yen{ font-family:var(--mincho); font-size:calc(14.5px * var(--fs)); color:#5E4A2E; margin-left:auto }
@media (max-width:520px){
  .casecard__yen{ margin-left:0 }
}

.qa{ display:grid; gap:0; margin:0 0 14px; border:1px solid var(--rule-2); border-radius:var(--r-sm); overflow:hidden }
.qa__row{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; padding:12px 13px; background:var(--card-bg) }
.qa__row + .qa__row{ border-top:1px solid var(--rule-2) }
.qa__row--after{ background:var(--green-l) }
.qa__k{
  font-size:calc(11.5px * var(--fs)); letter-spacing:.04em; padding:5px 11px; font-weight:700;
  white-space:nowrap; margin-top:2px; border-radius:var(--r-pill); border:1px solid transparent;
}
.qa__k--b{ background:var(--bg-3); color:#5F5A51; border-color:#DDD5C4 }
.qa__k--f{ background:#F0E3D2; color:#7A5F42; border-color:#E0CDB4 }
.qa__k--a{ background:var(--green-d); color:var(--on-dark) }
.qa__v{ font-size:var(--t-note); line-height:var(--lh-read); margin:0; color:var(--ink-2) }
.qa__row--after .qa__v{ color:#33402F; font-weight:500 }
@media (max-width:430px){
  /* 札が横にあると本文の幅が7割ほどに減り、かえって縦に伸びる */
  .qa__row{ grid-template-columns:1fr; gap:7px; padding:11px 12px }
  .qa__k{ justify-self:start; margin-top:0 }
}

/* 改善度：目盛りのないものを棒グラフにすると、
   実際より正確に測ったように見えてしまう。言葉だけで示す */
.improve{ display:flex; align-items:baseline; gap:9px; margin:0 0 14px }
.improve__t{ font-size:calc(11px * var(--fs)); color:var(--ink-3); font-weight:700; white-space:nowrap; letter-spacing:.04em }
.improve__l{ font-size:var(--t-note); color:var(--green-d); font-weight:700; letter-spacing:.02em }
.ownernote{ padding:12px 14px; background:var(--bg-2); border-left:3px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:var(--t-tiny); line-height:1.85; color:var(--ink-2) }
.ownernote b{ display:block; font-size:calc(11px * var(--fs)); letter-spacing:.1em; color:var(--accent); margin-bottom:3px }

/* イベント */
.evhl{ margin-top:16px; padding:16px 18px; background:var(--bg-2); border-left:3px solid var(--enji); border-radius:0 var(--r-sm) var(--r-sm) 0 }
.evhl__l{ font-size:10px; letter-spacing:.14em; color:var(--enji); font-weight:700; margin-bottom:4px }
.evhl__t{ font-size:14px; line-height:1.85; font-weight:700 }
.minilabel{ font-size:calc(12px * var(--fs)); letter-spacing:.12em; color:var(--ink-3); font-weight:700; margin-bottom:10px }
.howto{ margin:0; padding-left:1.3em; font-size:13.5px; line-height:2.1; color:var(--ink-2) }
.evbody{ margin-top:18px; font-size:13.5px; line-height:2.15; color:var(--ink-2) }
.evbody p{ margin:0 0 1.4em }

/* クチコミ */
.gscore{ display:flex; align-items:center; gap:16px; padding:20px 0; border-block:1px solid var(--rule); margin-bottom:clamp(20px,2.4vw,30px) }
.gscore__n{ font-family:var(--mincho); font-size:36px; line-height:1 }
.gscore__stars{ color:#C69A4B; font-size:14px; letter-spacing:.16em; line-height:1 }
.gscore__c{ font-size:var(--t-tiny); color:var(--ink-3); margin-top:7px }
.gscore__go{ margin-left:auto; font-size:var(--t-note); color:var(--green-d); text-decoration:none; font-weight:700; letter-spacing:.06em; border-bottom:1px solid var(--rule); padding:8px 0 4px; white-space:nowrap }
.rvs{ display:grid; gap:clamp(16px,2vw,22px) }
.rv{ padding:24px; border:1px solid var(--rule-2); background:var(--card-bg); border-radius:var(--r-card); box-shadow:var(--sh-sm) }
.sec--alt .rv{ background:var(--card-bg) }
.rv__h{ display:flex; align-items:center; gap:11px; margin-bottom:12px }
.rv__av{ width:32px;height:32px;border-radius:50%;background:var(--green-l);color:var(--green-d);display:grid;place-items:center;font-family:var(--mincho);font-size:13px;flex:none }
.rv__n{ font-size:var(--t-note); font-weight:700 }
.rv__m{ font-size:calc(12px * var(--fs)); color:var(--ink-3); display:block }
.rv__s{ margin-left:auto; color:#C69A4B; font-size:11.5px; letter-spacing:.12em }
.rv__t{ font-size:var(--t-note); line-height:var(--lh-read); margin:0; color:var(--ink-2) }
.rv__t::before{content:"「"} .rv__t::after{content:"」"}
.rv__more{ display:inline-block; margin-top:8px; font-size:11px; color:var(--ink-3) }
.rv__reply{ margin-top:15px; padding:14px 16px; background:var(--bg-2); border-radius:var(--r-sm); font-size:var(--t-tiny); line-height:2; color:var(--ink-2) }
.rv__reply b{ display:block; font-size:calc(11.5px * var(--fs)); letter-spacing:.1em; color:var(--green-d); margin-bottom:5px }

/* --------------------------------------------------------------------------
   店内ギャラリー
   -------------------------------------------------------------------------- */
.gal{ display:grid; gap:clamp(8px,1.4vw,16px) }
.gal figure{ margin:0 }
.gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in; border-radius:var(--r-card) }
.gal figcaption{ font-size:var(--t-tiny); color:var(--ink-3); margin-top:9px; letter-spacing:.04em }
.gal--big img{ aspect-ratio:16/10 }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{ border-top:1px solid var(--rule) }
.faq details{ border-bottom:1px solid var(--rule-2) }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 32px; position:relative;
  font-family:var(--mincho); font-size:calc(16.5px * var(--fs)); line-height:1.8; letter-spacing:.08em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{ content:"Q"; position:absolute; left:0; top:20px; font-family:var(--mincho); color:var(--accent); font-size:calc(15px * var(--fs)) }
.faq summary::after{
  content:""; position:absolute; right:6px; top:27px; width:9px; height:1px; background:var(--ink-3);
}
.faq summary .plus{ position:absolute; right:10px; top:23px; width:1px; height:9px; background:var(--ink-3); transition:transform .3s var(--ease) }
.faq details[open] summary .plus{ transform:rotate(90deg); opacity:0 }
.faq__a{ padding:0 20px 24px 30px; font-size:var(--t-lead); line-height:var(--lh-read); color:var(--ink-2) }

/* --------------------------------------------------------------------------
   アクセス
   -------------------------------------------------------------------------- */
.access{ display:grid; gap:clamp(24px,3vw,40px); align-items:start }
.map{ aspect-ratio:4/3; background:var(--bg-3); border:1px solid var(--rule-2); border-radius:var(--r-card); overflow:hidden }
.map iframe{ width:100%; height:100%; border:0; display:block }
.info{ margin:0; border-top:1px solid var(--rule); padding-top:0 }
.info__row{ display:grid; grid-template-columns:96px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule-2); font-size:var(--t-note); align-items:start }
.info__row dt{ font-size:calc(13px * var(--fs)); color:var(--ink-3); letter-spacing:.06em; padding-top:3px; font-weight:700 }
.info__row dd{ margin:0; line-height:1.95 }
.info__row a{ color:var(--green-d); display:inline-block; padding:5px 0; text-underline-offset:4px }

/* --------------------------------------------------------------------------
   クロージング
   -------------------------------------------------------------------------- */
.closing__actions{ display:grid; gap:10px; margin-top:26px; max-width:420px }
.closing__mail{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:var(--t-note); color:#D9DFD6; text-decoration:none; letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.34); padding:8px 0 5px;
}
.closing__mail:hover{ color:#fff; border-bottom-color:#fff }

.linenote{ margin-top:22px; padding:18px 20px; border:1px solid rgba(255,255,255,.24); border-radius:var(--r-card); font-size:var(--t-tiny); line-height:2; color:var(--on-dark-2); max-width:520px }
.linenote b{ display:block; font-size:10.5px; letter-spacing:.14em; color:var(--gold); margin-bottom:5px }

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.ft{
  padding-block:clamp(40px,4.4vw,64px);
  padding-bottom:calc(clamp(40px,4.4vw,64px) + var(--fab-h) + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule); background:var(--bg-2);
}

.ft__head{ display:grid; gap:18px; padding-bottom:26px; border-bottom:1px solid var(--rule) }
.ft__brand{ display:flex; align-items:center; gap:14px; text-decoration:none }
.ft__name{ font-family:var(--mincho); font-size:calc(19px * var(--fs)); letter-spacing:.14em; display:block; line-height:1.4 }
.ft__sub{ font-size:var(--t-tiny); color:var(--ink-3); display:block; letter-spacing:.08em }
.ft__lead{ margin:0; font-size:var(--t-note); line-height:1.95; color:var(--ink-2) }
@media (min-width:768px){ .sp-br{ display:none } }

.ft__cols{ display:grid; gap:0 }

/* 店舗情報 */
.ft__info{ margin:0; padding:6px 0 }
.ft__info > div{
  display:grid; grid-template-columns:76px 1fr; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--rule-2); align-items:start;
}
.ft__info dt{ font-size:calc(12.5px * var(--fs)); color:var(--ink-3); font-weight:700; letter-spacing:.06em; padding-top:2px }
.ft__info dd{ margin:0; font-size:var(--t-note); line-height:1.85 }
.ft__info dd a{ color:var(--green-d); display:inline-block; padding:6px 0; text-underline-offset:4px }
.ft__note{ font-size:var(--t-tiny); color:var(--ink-3) }

/* ページ一覧：2列の一覧にして、羅列を避ける */
/* メニューと同じ3つの分けかたにそろえる。
   1件ずつ罫線と「›」を付けると12個の枠が並んで見えるので、どちらも外す */
.ft__nav{ display:grid; grid-template-columns:1fr; gap:22px; padding:6px 0 4px }
.ft__navh{
  font-family:var(--gothic); font-size:calc(10.5px * var(--fs)); letter-spacing:.22em;
  color:var(--ink-4); font-weight:700; margin:0 0 4px;
}
.ft__nav a{
  display:block; padding:7px 2px; font-size:var(--t-note); color:var(--ink-2);
  text-decoration:none; letter-spacing:.03em;
}
.ft__nav a:hover{ color:var(--green-d); text-decoration:underline; text-underline-offset:4px }

/* 注意書きは折りたたむ */
.ft__legal{ margin-top:22px; border-top:1px solid var(--rule); padding-top:6px }
.ft__legal summary{
  list-style:none; cursor:pointer; padding:14px 24px 14px 0; position:relative;
  font-size:var(--t-tiny); color:var(--ink-3); font-weight:700; letter-spacing:.06em;
}
.ft__legal summary::-webkit-details-marker{ display:none }
.ft__legal summary::after{
  content:""; position:absolute; right:4px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.ft__legal[open] summary::after{ transform:rotate(-135deg); margin-top:-2px }
.ft__legal p{
  margin:0 0 16px; font-size:calc(12px * var(--fs)); line-height:2; color:var(--ink-3);
}
.ft__cp{ margin:18px 0 0; font-size:calc(11.5px * var(--fs)); color:var(--ink-3); letter-spacing:.06em }

.disclaimer{ margin-top:26px; padding:18px 20px; background:var(--bg-2); border-radius:var(--r-card); font-size:calc(12.5px * var(--fs)); line-height:2; color:var(--ink-3) }
.sec--alt .disclaimer{ background:var(--bg) }

/* --------------------------------------------------------------------------
   共有
   -------------------------------------------------------------------------- */
.share{ margin-top:20px; padding-top:16px; border-top:1px solid var(--rule-2); display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.share__l{ font-size:calc(12px * var(--fs)); letter-spacing:.1em; color:var(--ink-3); font-weight:700 }
.share__b{ display:flex; gap:7px; margin-left:auto }
.sbtn{
  width:42px;height:42px;border:1px solid var(--rule);background:var(--bg);border-radius:var(--r-btn);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);text-decoration:none;padding:0;
  transition:.18s var(--ease);
}
.sbtn:hover{ background:var(--bg-3) }
.sbtn--line{color:#05A846} .sbtn--x{color:#2C2A29} .sbtn--fb{color:#1877F2}
.sbtn.is-done{ width:auto;padding:0 13px;color:var(--green-d);border-color:var(--green) }

/* --------------------------------------------------------------------------
   ライトボックス
   -------------------------------------------------------------------------- */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(28,26,24,.95); display:none; place-items:center; padding:28px 18px }
.lb.is-on{ display:grid }
.lb img{ max-width:100%; max-height:84vh }
.lb__cap{ color:#D8D3C8; font-size:12px; text-align:center; margin:16px 0 0; max-width:540px }
.lb__x{ position:absolute; top:16px; right:18px; width:48px; height:48px; border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.08); color:#fff; font-size:19px; cursor:pointer; border-radius:50% }

/* --------------------------------------------------------------------------
   一覧ページ
   -------------------------------------------------------------------------- */
.pagehead{ padding-block:clamp(34px,4.4vw,62px) clamp(24px,3vw,38px); border-bottom:1px solid var(--rule) }
.crumb{ font-size:calc(12.5px * var(--fs)); letter-spacing:.1em; color:var(--ink-3); margin:0 0 16px }
.crumb a{ color:var(--ink-3); text-decoration:none }
.pagehead h1{ font-size:calc(clamp(25px,3vw,35px) * var(--fs)); letter-spacing:.16em; line-height:1.7; margin-bottom:14px }
.filters{ display:flex; gap:8px; overflow-x:auto; padding-block:16px; scrollbar-width:none; border-bottom:1px solid var(--rule-2) }
.filters::-webkit-scrollbar{display:none}
.fchip{ flex:none; padding:9px 18px; border:1px solid var(--rule); background:var(--bg); font-size:calc(14px * var(--fs)); font-weight:500; cursor:pointer; white-space:nowrap; border-radius:var(--r-pill); transition:.18s }
.fchip[aria-pressed="true"]{ background:var(--green-d); border-color:var(--green-d); color:#fff }
.empty{ padding:60px 0; text-align:center; color:var(--ink-3); font-size:13px }

/* 記事 */
.article__hero{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); cursor:zoom-in; border-radius:0 }
.article__hero img{ width:100%;height:100%;object-fit:cover }
.backlink{ display:inline-flex;align-items:center;gap:8px;font-size:var(--t-note);color:var(--green-d);text-decoration:none;padding-block:22px;letter-spacing:.06em;font-weight:700 }
.article h1{ font-size:clamp(22px,2.6vw,31px); line-height:1.75; letter-spacing:.14em; margin-bottom:16px }
.article__meta{ display:flex; gap:12px; align-items:center; font-size:calc(12.5px * var(--fs)); color:var(--ink-3); letter-spacing:.06em; margin-bottom:24px }
.article__body{ font-size:calc(16.5px * var(--fs)); line-height:calc(2.3 * var(--lh)) }
.article__body p{ margin:0 0 1.7em; color:var(--ink-2) }
/* すぐ下の「他の記事」の帯と同じ塗りだと境目が消えるので、
   囲みのあるカードにして切り離す */
.artcta{
  margin:34px 0 clamp(40px,6vw,64px); padding:26px 24px; text-align:center;
  background:var(--card-bg); border:1px solid var(--rule); border-radius:var(--r-card);
}
.artcta p{ font-size:13.5px; color:var(--ink-2); margin:0 0 18px }

/* --------------------------------------------------------------------------
   フェードイン
   -------------------------------------------------------------------------- */
.rv-in{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease) }
.rv-in.is-in{ opacity:1; transform:none }

/* ==========================================================================
   タブレット
   ========================================================================== */
@media (min-width:768px){
  .hero__media{ aspect-ratio:21/9 }
  .cards{ grid-template-columns:1fr 1fr }
  .cards--single{ grid-template-columns:1fr }
  .gal{ grid-template-columns:1fr 1fr }
  .gal .gal__wide{ grid-column:1 / -1 }
  .rvs{ grid-template-columns:1fr 1fr }
  .about{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start }
  .access{ grid-template-columns:1.15fr .85fr; align-items:start }
  .owner{ grid-template-columns:minmax(0,340px) 1fr; align-items:start }
  .flow__item{ grid-template-columns:56px 20px 1fr; column-gap:clamp(14px,1.8vw,20px) }
  .flow__no{ text-align:right; padding-top:13px; margin-bottom:0 }
  .fab__wrap{ grid-template-columns:1fr 1fr 1fr }
  .ft__head{ grid-template-columns:1fr auto; align-items:center }
  .ft__cols{ grid-template-columns:1fr 1fr; gap:36px }
}

/* ==========================================================================
   パソコン
   ========================================================================== */
@media (min-width:1024px){
  html{ scroll-padding-top:88px }

  .fab{ display:none }

  .hd__in{ height:78px; gap:34px }
  .hd .hd__nav{ display:flex; gap:clamp(16px,1.9vw,30px); align-items:center }
  .hd__nav a{
    font-size:var(--t-nav); letter-spacing:.1em; text-decoration:none; color:var(--ink-2);
    padding-bottom:3px; border-bottom:1px solid transparent; transition:.2s var(--ease);
  }
  .hd__nav a:hover{ color:var(--ink); border-bottom-color:var(--oak) }
  .hd .hd__cta{ display:inline-flex }
  .hd .navbtn{ display:none }

  /* ヒーロー：店の写真を画面いっぱいに敷き、その上に文字を置く。
     写真を枠に収めると「よくある会社サイト」になってしまうので、
     左から紙の色をかぶせて、文字の側だけ読めるようにする。
     暗い幕をかけて白抜き文字にする作りは、店の明るさが消えるので採らない。 */
  .hero{
    position:relative; overflow:hidden;
    min-height:min(78vh, 700px); display:flex; align-items:center;
    border-bottom:1px solid var(--rule);
  }
  .hero__media{
    position:absolute; inset:0; order:0; margin:0;
    width:100%; height:100%; aspect-ratio:auto;
    border-radius:0; box-shadow:none;
  }
  .hero__media img{ object-position:52% 46% }
  .hero__media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(96deg,
      var(--bg) 0%,
      var(--bg) 24%,
      rgba(251,249,245,.90) 38%,
      rgba(251,249,245,.46) 50%,
      rgba(251,249,245,.08) 62%,
      rgba(251,249,245,0) 72%);
  }
  /* .hero__in には position を付けない。付けると写真がこの箱の中に
     収まってしまい、画面いっぱいに広がらなくなる */
  .hero__in{
    width:100%; display:block;
    max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
    padding-block:clamp(52px,5.5vw,88px);
  }
  .hero__body{ position:relative; z-index:1; padding:0; max-width:min(50%, 540px) }
  .hero h1{ font-size:clamp(34px,3.4vw,46px); letter-spacing:.2em }
  .hero__sub{ font-size:17px }
  .hero__lead{ font-size:15px; max-width:30em }
  .hero__actions{ grid-auto-flow:column; justify-content:start; gap:12px }

  .sec__grid{
    display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
    gap:clamp(30px,4vw,72px); align-items:start;
  }
  .sec__grid > .sec__head{ position:sticky; top:104px }

  .cards{ grid-template-columns:repeat(3,1fr) }
  .cards--2{ grid-template-columns:1fr 1fr }
  .cards--single{ grid-template-columns:1fr; max-width:760px }

  .gal{ grid-template-columns:repeat(3,1fr) }
  .gal .gal__wide{ grid-column:span 2 }
  .gal .gal__tall img{ aspect-ratio:3/4 }

  .rvs{ grid-template-columns:repeat(3,1fr) }
  .sns{ grid-template-columns:1fr 1fr }
  .about{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(38px,4.4vw,72px) }
  .symptoms{ max-width:none }
  .flow__item{ grid-template-columns:76px 20px minmax(0,1fr); column-gap:clamp(16px,2vw,24px) }
  .flow__d{ font-size:14.5px }
  .owner{ grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(40px,4.6vw,72px) }
  .owner__fig{ position:sticky; top:104px }
  .cred__imgs{ max-width:300px }
  .access{ grid-template-columns:1.25fr .75fr; gap:clamp(34px,4vw,64px) }
  .map{ aspect-ratio:16/11 }
  .ft{ padding-bottom:clamp(40px,4.4vw,64px) }
  .ft__head{ grid-template-columns:1fr auto; align-items:center; gap:24px }
  .ft__cols{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,4vw,72px); padding-top:8px }
  .ft__nav{ grid-template-columns:repeat(3,1fr); gap:0 26px }

  .closing__wrap{ display:grid; grid-template-columns:1fr auto; gap:clamp(34px,4vw,70px); align-items:center }
  .closing__actions{ margin-top:0; min-width:320px }
}

@media print{
  .hd,.fab,.drawer,.share{ display:none!important }
}

/* ==========================================================================
   管理画面のプレビュー用（?preview=1 のときだけ）
   ========================================================================== */
.is-preview .fab{ display:none !important }
.is-preview .hd{ position:static }
.is-preview [data-sec]{ position:relative; scroll-margin-top:12px }
.is-preview [data-sec]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  outline:0 solid var(--accent); outline-offset:-3px;
  transition:outline-width .25s var(--ease), background .25s var(--ease);
}
.is-preview [data-sec]:hover::after{ outline-width:1px; background:rgba(140,109,83,.04) }
.is-preview [data-sec].is-hl::after{ outline-width:3px; background:rgba(140,109,83,.07) }
.is-preview [data-sec].is-hl > *{ position:relative; z-index:1 }
.is-preview .rv-in{ opacity:1 !important; transform:none !important }