/* =====================================================================
   SUNAO — デザインシステム
   paper #FAF7F2 / white #FFF / ink #241C17 / sable #6F4426（アクセントは1色だけ）
   見出し=Shippori Mincho（明朝） 本文=Zen Kaku Gothic New
   角丸は大きめ。波線・リボン・キラキラは使わない。
   ===================================================================== */
:root{
  --paper:#FAF7F2; --white:#FFFFFF; --ink:#241C17; --sable:#6F4426;
  --line:#E3DCD2; --mute:#7A6E64; --sable-soft:rgba(111,68,38,.08);
  --sable-lite:#C99B6E;   /* 暗い面に乗せるときの深茶（反転セクション用）*/
  --pad:clamp(22px,6vw,112px);
  --gap-sec:clamp(88px,12vw,164px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; line-height:1.9; overflow-x:hidden;
}
.mincho{font-family:'Shippori Mincho',serif;}
.mono{font-family:'Space Grotesk',monospace;letter-spacing:.04em;}
/* 日本語の禁則を厳しめに。小書き仮名（っゃゅょ）や長音符が行頭に来るのを防ぐ */
body{line-break:strict;}
h1,h2,h3,h4,.btn,summary,blockquote,.quote p,.qtext,.title,.tx,.q{
  word-break:auto-phrase; text-wrap:balance;}
/* 本文系はまとめて指定。個別に足していくと必ず漏れる（「ご予/約」の泣き別れが出た） */
p,li,dd,dt,small,figcaption,span.k,.lead,.ds{
  word-break:auto-phrase; text-wrap:pretty;}
a{color:inherit;}
img{max-width:100%;}

/* 署名モチーフ：●─── （まつげ1本）。ページ内で4回くり返す */
.mark{display:inline-flex;align-items:center;gap:9px;}
.mark::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sable);flex:none;}
.mark::after{content:"";width:38px;height:1px;background:var(--sable);opacity:.55;}

.eyebrow{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.3em;
  color:var(--mute);margin:0 0 26px;font-weight:500;}
.sec{padding:var(--gap-sec) var(--pad);position:relative;}
.sec-in{max-width:1180px;margin:0 auto;}
.h2{font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(24px,3.2vw,42px);line-height:1.55;letter-spacing:.03em;margin:0;}

.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:17px 34px;font-size:15px;letter-spacing:.04em;
  text-decoration:none;border-radius:999px;white-space:nowrap;max-width:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.btn-main{background:var(--sable);color:#fff;font-weight:700;
  box-shadow:0 14px 30px -18px rgba(111,68,38,.9);}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(111,68,38,.85);}
.btn-sub{border:1px solid var(--line);background:var(--white);color:var(--ink);font-weight:500;}
.btn-sub:hover{transform:translateY(-2px);border-color:var(--sable);}
.acts{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;}
.note{font-size:12.5px;letter-spacing:.04em;color:var(--mute);}
/* 画面には出さず、読み上げにだけ渡すラベル */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* スクロールで立ち上がる（JS無効時は最初から見えている）。
   visibility:hidden を併用するのは、透明な状態で描画させないため。
   これがないと、出てくる瞬間にテキストの再描画が走って「ピカッ」と光って見える。 */
html.j .rv{opacity:0;visibility:hidden;transform:translateY(18px);}
/* スマホは指で速くスクロールするので、立ち上がりが小さいと動いたことに気づけない。
   持ち上げ幅を増やして、発火位置も画面のより下（＝視界に入ってから）にずらす */
@media (max-width:768px){
  html.j .rv{transform:translateY(28px);}
  /* ボタンの文言が長くなっても画面からはみ出さないよう、狭い画面では折り返させる。
     公開後にクライアントが文言を書き換えても崩れないようにするため */
  .btn{white-space:normal;text-align:center;line-height:1.5;padding-top:15px;padding-bottom:15px;}
  /* ヘッダーのボタンも同じ理由で折り返せるようにする */
  .c-hd .hd-cta{white-space:normal;text-align:center;line-height:1.4;max-width:46vw;}
}
/* 選択肢の文字色。OSが描くので効かないブラウザもあるが、揃う分には揃える */
.ffwrap select option{color:var(--ink);background:var(--white);}
@media (prefers-reduced-motion: reduce){
  html.j .rv{opacity:1;visibility:visible;transform:none;}
}

/* ============ ヘッダー（parts-catalog header-03 ミニマル＋全画面メニュー） ============
   ロゴとボタンだけに絞り、ナビは全画面メニューへ逃がす。
   全面写真のFVを一番大きく見せるための選択。 */
.c-hd{position:fixed;top:0;left:0;right:0;z-index:70;color:var(--ink);
  transition:background .35s ease, box-shadow .35s ease;}
.c-hd .hd-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:24px clamp(20px,4vw,52px);transition:padding .35s ease;}
.c-hd .hd-logo{font-family:'Shippori Mincho',serif;font-weight:700;font-size:23px;letter-spacing:.22em;
  text-decoration:none;line-height:1;padding-left:.22em;color:var(--ink);transition:color .3s ease;}
.c-hd .hd-right{display:flex;align-items:center;gap:14px;}
.c-hd .hd-cta{background:var(--sable);color:#fff;padding:12px 24px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, opacity .25s ease;}
.c-hd .hd-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(111,68,38,.7);}
.c-hd.solid{background:rgba(250,247,242,.92);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(36,28,23,.08);}
.c-hd.solid .hd-inner{padding:14px clamp(20px,4vw,52px);}

.hd-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:46px;height:46px;border:1px solid var(--line);background:var(--white);border-radius:50%;
  cursor:pointer;padding:0;transition:background .3s ease,border-color .3s ease;}
.hd-burger span{display:block;width:18px;height:1px;background:var(--ink);
  transition:transform .35s ease,opacity .25s ease,background .3s ease;}
.hd-burger:hover{border-color:var(--sable);}
body.locked{overflow:hidden;}
/* メニューを開いている間はヘッダーの白い下地を消す。
   スクロール後（.solid）に開くと、白い下地の上に白いロゴと白い×が乗って見えなくなる */
body.locked .c-hd,body.locked .c-hd.solid{background:transparent;backdrop-filter:none;box-shadow:none;}
body.locked .hd-logo{color:var(--paper);}
body.locked .hd-cta{opacity:0;pointer-events:none;}
body.locked .hd-burger{background:rgba(250,247,242,.14);border-color:rgba(250,247,242,.72);}
body.locked .hd-burger span{background:var(--paper);height:1.6px;width:20px;}
body.locked .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.locked .hd-burger span:nth-child(2){opacity:0;}
body.locked .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* 全画面メニュー：右上から円が広がって開く */
.c-menu{position:fixed;inset:0;z-index:65;background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:1.15fr .85fr;visibility:hidden;
  clip-path:circle(0% at 92% 6%);transition:clip-path .62s cubic-bezier(.7,0,.2,1),visibility 0s .62s;}
.c-menu.open{clip-path:circle(150% at 92% 6%);visibility:visible;transition:clip-path .62s cubic-bezier(.7,0,.2,1),visibility 0s;}
.c-menu .mn-left{padding:15vh 6vw 6vh;display:flex;flex-direction:column;}
.c-menu .mn-lbl{font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.3em;
  color:var(--sable-lite);margin-bottom:18px;}
.c-menu .mn-nav{display:flex;flex-direction:column;}
.c-menu .mn-nav a{font-family:'Shippori Mincho',serif;font-size:clamp(19px,2.5vw,33px);font-weight:600;
  color:var(--paper);text-decoration:none;padding:9px 0;display:flex;align-items:baseline;gap:16px;
  letter-spacing:.05em;transition:color .2s ease,padding-left .2s ease;}
.c-menu .mn-nav a i{font-style:normal;font-family:'Space Grotesk',monospace;font-size:12px;color:var(--sable-lite);}
.c-menu .mn-nav a:hover{color:var(--sable-lite);padding-left:12px;}
.c-menu .mn-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1px solid rgba(250,247,242,.24);border-radius:24px;padding:20px 26px;text-decoration:none;
  color:var(--paper);max-width:540px;transition:background .2s ease;}
.c-menu .mn-cta:hover{background:rgba(250,247,242,.06);}
.c-menu .mn-cta b{font-family:'Shippori Mincho',serif;font-size:18px;font-weight:700;display:block;letter-spacing:.04em;}
.c-menu .mn-cta small{display:block;font-size:12px;color:rgba(250,247,242,.6);margin-top:5px;}
.c-menu .mn-right{position:relative;display:flex;flex-direction:column;}
.c-menu .mn-img{position:relative;flex:1;overflow:hidden;min-height:0;}
.c-menu .mn-img img{width:100%;height:100%;object-fit:cover;opacity:.5;}
.c-menu .mn-info{padding:28px 6vw 6vh;background:#1B1511;}
.c-menu .mn-info .brand{font-family:'Shippori Mincho',serif;font-size:22px;font-weight:700;letter-spacing:.16em;}
.c-menu .mn-info .brand small{display:block;font-family:'Space Grotesk',monospace;font-size:10px;
  letter-spacing:.24em;color:rgba(250,247,242,.55);margin-top:5px;}
.c-menu .mn-info .row{margin:14px 0 0;font-size:13px;line-height:1.9;color:rgba(250,247,242,.8);}
.c-menu .mn-info .lab{font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--sable-lite);margin-right:8px;}
.c-menu .mn-info .tel{font-family:'Space Grotesk',monospace;font-weight:700;font-size:20px;
  color:#fff;text-decoration:none;}
@media(max-width:860px){
  .c-menu{grid-template-columns:1fr;overflow-y:auto;}
  .c-menu .mn-img{min-height:170px;flex:none;}
  .c-menu .mn-left{padding:14vh 24px 5vh;}
  .c-menu .mn-info{padding:24px 24px 5vh;}
  .c-menu .mn-cta{margin-top:34px;}
}
@media(max-width:900px){ .c-hd .hd-cta{padding:11px 18px;font-size:12.5px;} }
@media (prefers-reduced-motion: reduce){ .c-menu{transition:none;} }


/* ================= ① ヒーロー（全面写真＋上端を紙に溶かす） =================
   目元の写真を画面いっぱいに敷き、上端だけを紙色に溶かしてコピーを置く。
   「全面写真なのに、白と余白が残る」ための構造。
   ※左右分割の旧版は index-fv-split.html に保存してある。 */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--paper);overflow:hidden;}
/* コピーの箱は画面幅いっぱいに広がるので、そのままだと写真へのホバーを遮る。
   箱はマウスを素通りさせ、リンクだけ受け取る。 */
.hero-copy{position:relative;z-index:6;width:100%;max-width:1320px;margin:0 auto;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(56px,9vh,104px);pointer-events:none;}
.hero-copy a,.hero-copy button{pointer-events:auto;}
.hero h1{font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(23px,3.1vw,44px);line-height:1.62;letter-spacing:.03em;margin:0;}
.hero .kick,.hero .lead,.hero .note{max-width:27em;}
.hero .spec{max-width:33em;}
.hero .hint{max-width:34em;}
.hero .kick{margin:24px 0 0;font-size:clamp(15px,1.35vw,18px);font-weight:700;
  letter-spacing:.05em;color:var(--sable);}
.hero .lead{margin:20px 0 0;font-size:clamp(14px,1.15vw,16px);line-height:2.05;
  color:var(--ink);max-width:30em;letter-spacing:.02em;}
.hero .lead b{font-weight:700;}
.spec{margin:16px 0 0;font-size:12.5px;line-height:2;letter-spacing:.03em;color:var(--mute);}
.spec b{color:var(--ink);font-weight:700;font-size:14px;}
.hero .acts{margin:32px 0 0;}
.hero .note{margin:16px 0 0;}
.hint{margin:20px 0 0;font-size:11.5px;letter-spacing:.08em;color:var(--mute);opacity:.85;}
.on-pc{display:none;} .on-sp{display:inline;}
@media (hover:hover) and (pointer:fine){ .on-pc{display:inline;} .on-sp{display:none;} }

.hv{position:absolute;inset:0;overflow:hidden;background:var(--white);
  touch-action:pan-y;cursor:ew-resize;}
.hv .lay{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;
  background-position:58% 52%;}
.hv .lay-b{background-image:url("../images/fv-before-w.jpg");}
.hv .lay-a{background-image:url("../images/fv-after-w.jpg");clip-path:inset(0 0 0 0);}
/* 写真の左側を紙に溶かす。パネルの境目を作らずにコピーの居場所を確保する */
.hv::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(250,247,242,.55) 0%, rgba(250,247,242,0) 22%),
    linear-gradient(96deg,
      var(--paper) 0%, rgba(250,247,242,.97) 24%, rgba(250,247,242,.88) 38%,
      rgba(250,247,242,.55) 52%, rgba(250,247,242,0) 68%);}
.hv .bloom{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(38% 30% at 30% 48%, rgba(255,236,214,.55) 0%, rgba(255,236,214,0) 66%);
  mix-blend-mode:screen;transition:opacity 1.4s ease;}
.hv .div{position:absolute;top:0;bottom:0;width:1px;background:var(--sable);
  left:100%;opacity:0;pointer-events:none;z-index:4;transition:opacity .4s ease;}
.hv .div::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--sable);
  box-shadow:0 0 0 6px rgba(250,247,242,.9);}
.tag{position:absolute;z-index:5;bottom:clamp(22px,4vh,44px);
  display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:999px;
  background:rgba(250,247,242,.9);backdrop-filter:blur(6px);
  font-family:'Shippori Mincho',serif;font-size:13px;letter-spacing:.14em;color:var(--ink);
  white-space:nowrap;transition:opacity .5s ease;}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sable);flex:none;}
/* ラベルは写真側（右半分）に置く。左はコピーの領域なので重ねない */
.tag-a{left:52%;opacity:0;}
.tag-b{right:clamp(20px,3vw,44px);}
html.j .hero-copy > *{opacity:0;transform:translateY(18px);}
html.j .hv .lay-a{clip-path:inset(0 100% 0 0);}
html.j .tag-b{opacity:0;}
.rise{animation:rise .95s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
/* スマホは横に逃げ場がない。全面に敷くと目元とコピーが必ず重なるので、
   写真は上の帯、コピーは下の紙に分ける（PCの全面レイアウトとは別構成） */
@media(max-width:900px){
  .hero{align-items:flex-start;}
  .hv{height:44svh;min-height:284px;bottom:auto;border-radius:0 0 30px 30px;}
  .hv .lay{background-position:24% 44%;}
  .hv .lay-b{background-image:url("../images/fv-before.jpg");}
  .hv .lay-a{background-image:url("../images/fv-after.jpg");}
  .hv::after{background:linear-gradient(180deg,rgba(250,247,242,.92) 0%,rgba(250,247,242,0) 26%);}
  .hero-copy{padding:calc(44svh + 30px) 20px clamp(40px,6vh,64px);}
  .hero h1{font-size:clamp(21px,6.4vw,34px);letter-spacing:.02em;}
  .hero .lead{font-size:15px;line-height:1.95;}
  .hero .kick,.hero .lead,.hero .spec,.hero .note,.hero .hint{max-width:none;}
  .tag{bottom:auto;top:calc(44svh - 54px);}
  .tag-a{left:20px;} .tag-b{right:20px;}
  .on-pc{display:none;} .on-sp{display:inline;}
}
@media(max-width:600px){ .hero .acts{gap:10px;} .hero .btn{width:100%;} }
@media (prefers-reduced-motion: reduce){
  html.j .hero-copy > *{opacity:1;transform:none;}
  html.j .hv .lay-a{clip-path:inset(0 0 0 0);}
  html.j .tag-b{opacity:0;}
  .rise{animation:none;} .hv .bloom{transition:none;}
}

/* ================= ② 深夜の独り言（sec-empathy-04 を移植・色は反転） ================= */
.s-night{position:relative;padding:clamp(96px,13vw,150px) var(--pad);
  background:var(--ink);color:var(--paper);overflow:hidden;}
.s-night::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(250,247,242,.03) 1px,transparent 1px);background-size:100% 44px;}
/* 夜の窓辺を極薄で敷く。文字の可読性を壊さない範囲で「深夜」を絵でも出す */
.s-night::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('../images/section-bg-2.jpg') center/cover;opacity:.14;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);
  mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);}
.s-night .nin{width:min(880px,100%);margin:0 auto;position:relative;z-index:1;}
.s-night .clock{font-family:'Space Grotesk',monospace;font-weight:700;
  font-size:clamp(64px,12vw,140px);line-height:1;letter-spacing:.01em;display:inline-block;}
.s-night .clock i{font-style:normal;color:var(--sable);
  animation:nightBlink 1.5s steps(1,end) infinite;}
@keyframes nightBlink{0%,60%{opacity:1}61%,100%{opacity:.18}}
.s-night .dow{font-family:'Space Grotesk',monospace;font-size:11.5px;letter-spacing:.34em;
  color:rgba(250,247,242,.5);margin-left:20px;text-transform:uppercase;}
.s-night h2{font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(23px,4vw,40px);line-height:1.62;margin:34px 0 0;letter-spacing:.03em;}
.s-night .th{margin:52px 0 0;border-left:1px solid rgba(250,247,242,.16);}
.s-night .t{position:relative;margin:0;padding:16px 0 16px 34px;
  color:rgba(250,247,242,.72);font-size:clamp(14px,1.2vw,15.5px);}
.s-night .t::before{content:"";position:absolute;left:-3px;top:30px;width:5px;height:5px;
  border-radius:50%;background:var(--sable);}
.s-night .t em{display:block;font-family:'Space Grotesk',monospace;font-style:normal;
  font-size:11px;letter-spacing:.26em;color:rgba(250,247,242,.42);margin-bottom:2px;}
.s-night .t b{color:var(--paper);font-weight:700;}
.s-night .turn{display:grid;grid-template-columns:1px minmax(0,1fr);gap:26px;margin-top:62px;}
.s-night .tline{background:linear-gradient(var(--sable),rgba(111,68,38,.12));width:1px;}
.s-night .turn p{margin:0;font-family:'Shippori Mincho',serif;
  font-size:clamp(17px,2.3vw,23px);line-height:2.1;color:var(--paper);letter-spacing:.03em;}
.s-night .turn small{display:block;font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:12.5px;color:rgba(250,247,242,.5);margin-top:14px;letter-spacing:.06em;}
@media(max-width:620px){ .s-night .t{font-size:13.5px;padding-left:26px;} .s-night .turn{gap:18px;} }
@media(prefers-reduced-motion:reduce){ .s-night .clock i{animation:none;} }

/* ========== ②.5 グルーの話（カタログには無い・自作） ==========
   ②で「ここから先は、その話をします」と約束したものを、ここで払う。
   持ちの話は時間の話なので、量ではなく「時間」を見せる。
   ルーペ（1本の付き方）・本数スライダー（量）と役割が被らないのはそのため。
   最後の gbridge が、③「上限を、全部外しました」への橋。 */
.sec.s-glue{background:var(--white);border-bottom:1px solid var(--line);}
.s-glue .gwrap{max-width:1080px;margin:0 auto;}
.s-glue .glead{color:var(--mute);font-size:16px;line-height:2.1;margin:20px 0 0;max-width:33em;}
.s-glue .glead b{color:var(--ink);font-weight:700;}

/* 時間の帯 */
.s-glue .gband{margin:clamp(36px,4.6vw,58px) 0 0;display:grid;gap:clamp(20px,2.6vw,30px);}
.s-glue .grow{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);
  gap:6px 24px;align-items:center;}
.s-glue .glab{margin:0;font-size:12px;letter-spacing:.08em;color:var(--mute);}
.s-glue .grow-us .glab{color:var(--sable);font-weight:700;}
/* 目盛りは帯の上、時間の表記は帯の下。同じ行に置くと狭い画面で必ずぶつかる */
.s-glue .gtrack{position:relative;height:66px;}
/* まだ固まっていない時間。斜めの縞で「不安定なあいだ」を出す */
.s-glue .gsoft{position:absolute;left:0;right:0;top:26px;height:14px;border-radius:99px;
  background-image:repeating-linear-gradient(135deg,
    rgba(111,68,38,.18) 0 5px, rgba(111,68,38,.06) 5px 10px);}
.s-glue .gstep{position:absolute;top:0;transform:translateX(-50%);
  font-size:11.5px;color:var(--mute);white-space:nowrap;}
.s-glue .gstep::after{content:"";position:absolute;left:50%;top:20px;
  width:1px;height:6px;background:var(--line);}
/* 帯そのものが何なのかを、絵の中に書く。本文だけに書くと図として読めない */
.s-glue .gin{position:absolute;left:14px;top:26px;height:14px;line-height:14px;
  font-size:10.5px;letter-spacing:.06em;color:var(--sable);white-space:nowrap;}
.s-glue .gin-us{left:7.5%;}
.s-glue .gstart{position:absolute;left:0;top:46px;
  font-size:11px;letter-spacing:.06em;color:var(--mute);}
.s-glue .gend{position:absolute;right:0;top:46px;white-space:nowrap;
  font-size:11px;letter-spacing:.06em;color:var(--mute);}
.s-glue .gend b{color:var(--ink);font-weight:700;}
/* うちの側。3分は軸の上ではほとんど点にしかならない。それがそのまま答えになる */
.s-glue .ghard{position:absolute;left:0;right:0;top:32px;height:2px;border-radius:2px;background:var(--line);}
.s-glue .gfirm{position:absolute;left:0;top:26px;width:2.4%;min-width:11px;height:14px;
  border-radius:99px;background:var(--sable);}
.s-glue .gnow{position:absolute;left:0;top:0;font-size:12.5px;font-weight:700;color:var(--sable);}
.s-glue .gnow::after{content:"";position:absolute;left:6px;top:20px;
  width:1px;height:6px;background:var(--sable);opacity:.55;}
.s-glue .gend-us{color:var(--sable);}

/* 帯の2段に対応する、2つの説明 */
.s-glue .gtwo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,50px);
  margin:clamp(30px,3.6vw,44px) 0 0;}
.s-glue .gtwo p{margin:0;font-size:15.5px;line-height:2.05;color:var(--mute);
  padding-left:20px;border-left:1px solid var(--line);}
.s-glue .gtwo p b{color:var(--ink);font-weight:700;}
.s-glue .gtwo p.us{border-left-color:var(--sable);}

/* ③への橋。ここで主題が本数へ移る */
.s-glue .gbridge{margin:clamp(40px,4.8vw,62px) 0 0;padding:clamp(28px,3.4vw,40px) 0 0;
  border-top:1px solid var(--ink);}
.s-glue .gb-h{font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(19px,2.5vw,29px);line-height:1.6;letter-spacing:.03em;margin:0;}
.s-glue .gb-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vw,46px);margin-top:24px;}
.s-glue .gb-two p{margin:0;font-size:15px;line-height:2.05;color:var(--mute);}
.s-glue .gb-two p b{color:var(--ink);font-weight:700;}
/* 行の途中に置くと、2行目が札の下から始まって読みにくい。札は上に出す */
.s-glue .gb-k{display:block;width:fit-content;margin:0 0 10px;padding:3px 11px;border-radius:999px;
  background:var(--sable-soft);color:var(--sable);font-size:11px;font-weight:700;letter-spacing:.08em;}
@media(max-width:860px){
  .s-glue .grow{grid-template-columns:1fr;gap:2px;}
  .s-glue .glab{font-size:11.5px;}
  .s-glue .gstep{font-size:11px;}
  .s-glue .gend{font-size:10.5px;}
  .s-glue .gtwo,.s-glue .gb-two{grid-template-columns:1fr;}
  .s-glue .glead{font-size:15px;line-height:2;}
  .s-glue .gtwo p{font-size:15px;}
  /* 縦に積むぶん長くなるので、余白を詰める */
  .sec.s-glue{padding:clamp(64px,10vw,120px) var(--pad);}
  .s-glue .gband{margin-top:26px;gap:16px;}
  .s-glue .gtwo{margin-top:24px;gap:20px;}
  .s-glue .gbridge{margin-top:32px;padding-top:24px;}
  .s-glue .gb-two{margin-top:18px;gap:20px;}
}
@media(max-width:420px){
  /* 3つ並べると目盛りの文字がぶつかる。真ん中を落とす */
  .s-glue .gstep.gs-mid{display:none;}
}

/* ================= ③ 4つの約束（sec-reasons-02 を移植） ================= */
.s-promise .pgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,5vw,70px);align-items:start;}
.s-promise .side{position:sticky;top:104px;}
.s-promise .side p{color:var(--mute);font-size:15.5px;max-width:22em;margin:18px 0 0;}
.s-promise .h2{margin-top:14px;}
.s-promise .plist{border-top:1px solid var(--ink);}
.s-promise .p1{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,34px);
  align-items:start;padding:38px 2px;border-bottom:1px solid var(--line);}
.s-promise .n{font-family:'Shippori Mincho',serif;font-weight:800;
  font-size:clamp(42px,5.4vw,80px);line-height:.85;color:transparent;
  -webkit-text-stroke:1.2px var(--sable);transition:color .3s ease;}
.s-promise .p1:hover .n{color:var(--sable-soft);}
.s-promise .thumb{width:108px;height:80px;border-radius:14px;overflow:hidden;
  float:right;margin:2px 0 12px 20px;}
.s-promise .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.s-promise h3{font-family:'Shippori Mincho',serif;font-size:clamp(18px,2.1vw,24px);
  font-weight:700;margin:0 0 12px;letter-spacing:.03em;}
.s-promise p{color:var(--mute);font-size:15.5px;margin:0;line-height:2.05;}
.s-promise p b{color:var(--ink);font-weight:700;}
@media(max-width:900px){
  .s-promise .pgrid{grid-template-columns:1fr;gap:34px;}
  .s-promise .side{position:static;}
  .s-promise .p1{grid-template-columns:1fr;gap:10px;}
  .s-promise .thumb{width:88px;height:66px;margin-left:16px;}
}

/* ========== ③.5 本数を「数えずに見せる」ルーペ（fv-26 MagnifyLens を転用） ========== */
.s-lens{background:var(--paper);}
.s-lens .lgrid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,4vw,56px);align-items:center;}
.s-lens .ltext p{color:var(--mute);font-size:15.5px;line-height:2.1;margin:20px 0 0;max-width:26em;}
.s-lens .ltext p b{color:var(--ink);font-weight:700;}
.s-lens .stage{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:16/10;
  background:var(--white);cursor:none;}
.s-lens .stage img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.s-lens .lens{position:absolute;z-index:6;width:210px;height:210px;border-radius:50%;
  border:1px solid var(--sable);box-shadow:0 18px 40px -18px rgba(36,28,23,.55);
  background-repeat:no-repeat;pointer-events:none;opacity:0;
  transition:opacity .35s ease;transform:translate(-50%,-50%);}
.s-lens .stage.on .lens{opacity:1;}
.s-lens .hintbar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  background:rgba(250,247,242,.9);backdrop-filter:blur(6px);border-radius:999px;
  padding:8px 18px;font-size:11.5px;letter-spacing:.1em;color:var(--ink);white-space:nowrap;
  transition:opacity .3s ease;}
.s-lens .stage.on .hintbar{opacity:0;}
@media(max-width:860px){
  .s-lens .lgrid{grid-template-columns:1fr;gap:30px;}
  /* 指の少し上にレンズを出すので、写真の枠からはみ出せるようにする。
     枠が消えないよう、角丸は写真そのものに移してある */
  .s-lens .stage{aspect-ratio:4/3;cursor:default;overflow:visible;}
  .s-lens .lens{width:132px;height:132px;}
}

/* ============ ④ 数字（sec-numbers-12 写真マスク特大数字） ============
   特大数字の「中」に目元の写真が透ける（background-clip:text）。
   カタログはダーク基調だが、②の深夜セクションをページ唯一の暗い面にしたいので紙のまま使う。
   紙の上で数字が読めるように、写真には濃いオーバーレイを重ねている。 */
.s-num{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.s-num .nhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;}
.s-num .nhead .nlab{font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.24em;
  color:var(--mute);white-space:nowrap;padding-bottom:6px;}
.s-num .feature{text-align:center;margin-top:clamp(20px,4vw,40px);}
.s-num .bignum{display:inline-block;font-family:'Space Grotesk',monospace;font-weight:700;
  line-height:.94;letter-spacing:-.04em;font-size:clamp(108px,25vw,320px);
  background-image:linear-gradient(rgba(36,28,23,.62),rgba(36,28,23,.62)),url('../images/case-3.jpg');
  background-size:cover;background-position:46% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(36,28,23,.28);}
.s-num .bignum .u{font-family:'Shippori Mincho',serif;font-size:.3em;letter-spacing:0;
  background-image:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--sable);-webkit-text-fill-color:var(--sable);-webkit-text-stroke:0;}
.s-num .feature .sub{font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(18px,2.6vw,30px);margin:4px 0 0;letter-spacing:.12em;}
.s-num .feature .ds{font-size:14.5px;color:var(--mute);max-width:36em;margin:18px auto 0;line-height:2.1;}
.s-num .sides{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(46px,7vw,78px);
  border-top:1px solid var(--line);}
.s-num .side{padding:30px 18px 10px;text-align:center;border-right:1px solid var(--line);}
.s-num .side:last-child{border-right:none;}
.s-num .side .v{font-family:'Shippori Mincho',serif;font-weight:800;
  font-size:clamp(25px,3.4vw,42px);letter-spacing:.02em;line-height:1.2;}
.s-num .side .v small{font-size:.5em;color:var(--sable);margin-left:4px;}
.s-num .side .k{font-size:11.5px;color:var(--mute);display:block;margin-top:8px;letter-spacing:.1em;line-height:1.9;}
/* 残りの数字は罫線インデックスで（カードにしない） */
.s-num .idx{margin-top:56px;border-top:1px solid var(--line);}
.s-num .idx div{display:flex;align-items:baseline;gap:14px;
  padding:18px 2px;border-bottom:1px solid var(--line);}
.s-num .idx .ld{flex:1 1 auto;min-width:24px;border-bottom:1px dotted #CFC4B4;transform:translateY(-5px);}
.s-num .idx dt{font-size:13.5px;color:var(--mute);letter-spacing:.06em;margin:0;flex:none;max-width:60%;}
.s-num .idx dd{margin:0;font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.02em;}
.s-num .caution{margin:26px 0 0;font-size:12px;color:var(--mute);line-height:2;}
@media(max-width:680px){
  .s-num .nhead{flex-direction:column;align-items:flex-start;}
  .s-num .nhead .nlab{padding-bottom:0;}
  .s-num .sides{grid-template-columns:1fr;}
  .s-num .side{border-right:none;border-bottom:1px solid var(--line);padding:22px 10px;text-align:left;}
  .s-num .side:last-child{border-bottom:none;}
}


/* ================= ⑤ なぜこの値段（sec-craft-10 余白の宣言を移植・非対称） ================= */
.s-why .wbody{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(36px,5vw,64px);align-items:start;margin-top:34px;}
.s-why .wlead{font-size:15.5px;line-height:2.15;color:var(--ink);margin:0;}
.s-why .wlead b{font-weight:700;}
.s-why .wlead + .wlead{margin-top:22px;}
.s-why .quote{margin-top:38px;border:1px solid var(--line);border-radius:26px;
  background:var(--white);padding:34px 32px;position:relative;}
.s-why .quote p{margin:0;font-family:'Shippori Mincho',serif;
  font-size:clamp(19px,2.6vw,27px);line-height:1.8;letter-spacing:.03em;}
.s-why .quote span{display:block;margin-top:14px;font-size:12px;color:var(--mute);letter-spacing:.08em;}
.s-why .rules{border-top:1px solid var(--line);}
.s-why .rule{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;
  border-bottom:1px solid var(--line);padding:24px 0;}
.s-why .rule i{font-style:normal;font-family:'Space Grotesk',monospace;
  font-size:11px;letter-spacing:.22em;color:var(--sable);padding-top:6px;}
.s-why .rule b{display:block;font-family:'Shippori Mincho',serif;font-size:19px;letter-spacing:.03em;}
.s-why .rule p{margin:6px 0 0;color:var(--mute);font-size:14.5px;line-height:2;}
.s-why .wshot{margin-top:30px;border-radius:26px;overflow:hidden;aspect-ratio:4/3;}
.s-why .wshot img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:860px){ .s-why .wbody{grid-template-columns:1fr;} }

/* ================= ⑥ 施術スペースと安全（全幅バンド ＋ sec-features-07） ================= */
.s-bleed{position:relative;width:100%;height:clamp(260px,38vw,520px);overflow:hidden;margin:0;}
.s-bleed img{width:100%;height:100%;object-fit:cover;display:block;}
.s-bleed figcaption{position:absolute;left:var(--pad);bottom:22px;
  background:rgba(250,247,242,.9);backdrop-filter:blur(6px);border-radius:999px;
  padding:9px 20px;font-family:'Shippori Mincho',serif;font-size:13px;letter-spacing:.12em;}
.s-room .rgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,64px);align-items:center;}
.s-room .imgcol{position:relative;}
.s-room .imgwrap{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:32px;
  box-shadow:0 40px 80px -50px rgba(36,28,23,.55);}
.s-room .imgwrap img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;}
.s-room .bigword{display:block;margin:-.34em 0 0 -2%;position:relative;z-index:3;
  font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(46px,6.2vw,104px);letter-spacing:.08em;line-height:.85;
  color:var(--ink);pointer-events:none;}
/* 信用バッジの帯。装飾ではなく、資格と事実の見出しとして置く */
.s-room .creds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:0 0 34px;padding-bottom:30px;border-bottom:1px solid var(--line);}
.s-room .cred{text-align:center;}
.s-room .cred img{width:clamp(44px,5vw,58px);height:auto;display:block;margin:0 auto 10px;}
.s-room .cred b{display:block;font-family:'Shippori Mincho',serif;font-size:14px;
  font-weight:700;letter-spacing:.04em;}
.s-room .cred span{display:block;font-size:11px;color:var(--mute);margin-top:4px;line-height:1.8;}
@media(max-width:520px){ .s-room .creds{grid-template-columns:1fr;gap:20px;text-align:left;}
  /* 3つの子（アイコン・見出し・補足）を並べる時、行と列を書かないと
     補足が44pxの列に落ちて「保健所に／登録済み」と細長く潰れる。位置を明示する */
  .s-room .cred{display:grid;grid-template-columns:44px minmax(0,1fr);
    column-gap:14px;row-gap:2px;align-items:center;text-align:left;}
  .s-room .cred img{grid-column:1;grid-row:1/3;margin:0;width:44px;align-self:center;}
  .s-room .cred b{grid-column:2;grid-row:1;align-self:end;}
  .s-room .cred span{grid-column:2;grid-row:2;margin-top:0;align-self:start;} }
.s-room .flist{border-top:1px solid var(--line);}
.s-room .fitem{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;
  padding:26px 4px;border-bottom:1px solid var(--line);}
.s-room .fitem .n{font-family:'Shippori Mincho',serif;font-weight:800;font-size:34px;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--sable);}
.s-room .fitem h3{font-family:'Shippori Mincho',serif;font-size:clamp(18px,2.1vw,23px);
  font-weight:700;margin:0 0 8px;letter-spacing:.03em;}
.s-room .fitem p{color:var(--mute);font-size:15.5px;margin:0;line-height:2.05;}
.s-room .fitem p b{color:var(--ink);font-weight:700;}
@media(max-width:860px){
  .s-room .rgrid{grid-template-columns:1fr;gap:44px;}
  .s-room .imgwrap{aspect-ratio:4/3;} .s-room .bigword{font-size:60px;}
}

/* ============ ⑦ お客様の声（sec-voice-04 記事風インタビュー＋自作の索引） ============ */
.s-voice{background:var(--white);border-top:1px solid var(--line);}
.s-voice .kbar{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:34px;}
.s-voice .kbar .k{font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.26em;color:var(--sable);}
.s-voice .kbar .pg{font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.16em;color:var(--mute);}
.s-voice .article{display:grid;grid-template-columns:.96fr 1.04fr;gap:clamp(28px,4vw,54px);align-items:start;}
.s-voice .photo{position:relative;border-radius:26px;overflow:hidden;background:var(--line);aspect-ratio:4/5;}
.s-voice .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.s-voice .photo .frame{position:absolute;left:14px;top:14px;width:78px;height:78px;
  border-left:2px solid var(--sable);border-top:2px solid var(--sable);border-radius:14px 0 0 0;}
.s-voice .photo .credit{position:absolute;left:18px;bottom:16px;color:#fff;font-size:12px;
  letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.55);}
.s-voice .abody .title{font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(22px,3.2vw,38px);line-height:1.5;margin:0 0 18px;letter-spacing:.02em;}
.s-voice .abody .title i{font-style:normal;color:var(--sable);}
.s-voice .vmeta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:13px;
  color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:24px;}
.s-voice .vmeta b{color:var(--ink);font-family:'Shippori Mincho',serif;font-size:16px;}
.s-voice .chip{font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--sable);border:1px solid var(--sable);border-radius:999px;padding:3px 11px;}
.s-voice .abody p{margin:0 0 1.3em;font-size:15px;line-height:2.1;}
.s-voice .drop{float:left;font-family:'Shippori Mincho',serif;font-weight:800;font-size:58px;
  line-height:.8;margin:6px 12px 0 0;color:var(--sable);}
.s-voice .pull{font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(17px,2.1vw,23px);line-height:1.75;border-left:3px solid var(--sable);
  padding:4px 0 4px 20px;margin:26px 0;letter-spacing:.02em;}
/* 索引は自作。読者が「自分と同じ目」を探すための表 */
.s-voice .index{list-style:none;margin:clamp(44px,6vw,66px) 0 0;padding:0;border-top:1px solid var(--ink);}
.s-voice .row{display:grid;grid-template-columns:52px minmax(0,1fr) 178px 122px;gap:20px;
  align-items:baseline;padding:22px 8px 22px 4px;border-bottom:1px solid var(--line);
  transition:background .25s ease,padding-left .25s ease;}
.s-voice .row:hover{background:var(--sable-soft);padding-left:14px;}
.s-voice .row .no{font-family:'Space Grotesk',monospace;font-size:13px;color:var(--sable);}
.s-voice .row .q{font-family:'Shippori Mincho',serif;font-size:clamp(15px,1.8vw,19px);
  font-weight:500;margin:0;letter-spacing:.02em;}
.s-voice .row .nm{font-size:13px;}
.s-voice .row .dat{font-size:12px;color:var(--mute);letter-spacing:.06em;text-align:right;}
.s-voice .vfoot{margin-top:34px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
@media(max-width:880px){
  .s-voice .article{grid-template-columns:1fr;gap:26px;}
  .s-voice .photo{aspect-ratio:4/3;}
  .s-voice .row{grid-template-columns:42px minmax(0,1fr);gap:4px 14px;}
  .s-voice .row .nm,.s-voice .row .dat{grid-column:2;text-align:left;}
}


/* ============ ⑦.5 本数スライダー（自作・このサイトの見せ場） ============
   カタログには無い。「上限なし」がこのサイトの背骨なのに、
   100本と187本の違いを見せている場所がどこにも無かったので作った。
   仕掛けの核は「スライダーを動かしても、値段の表示だけが動かない」こと。 */
/* 1画面に「本数・画像・スライダー・価格」が全部収まる高さに抑える */
.sec.s-count{background:var(--paper);border-top:1px solid var(--line);
  padding:clamp(44px,5.5vw,72px) var(--pad);}
.s-count .cwrap{max-width:1180px;margin:0 auto;}
.s-count .clead{color:var(--mute);font-size:15px;line-height:1.95;margin:16px 0 0;max-width:40em;}
.s-count .cshot{position:relative;margin-top:clamp(20px,2.6vw,32px);}
/* 横長の帯にして、まつ毛のラインだけを見せる。縦を使わない＝画面に収まる */
.s-count .cstage{position:relative;border-radius:28px;overflow:hidden;
  background:var(--white);height:clamp(190px,27svh,280px);}
.s-count .cstage .fr{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;
  background-position:50% 58%;opacity:0;transition:opacity .28s ease;}
/* 1段目だけ日本語（「つける前」）。数字用の欧文フォントだと崩れる */
.s-count .ticks span:first-child{font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:10.5px;letter-spacing:.02em;}
.s-count .cstage .fr.on{opacity:1;}
.s-count .cbadge{position:absolute;left:clamp(16px,2.4vw,26px);top:clamp(16px,2.4vw,26px);z-index:3;
  display:inline-flex;align-items:baseline;gap:8px;padding:10px 20px;border-radius:999px;
  background:rgba(250,247,242,.92);backdrop-filter:blur(6px);}
.s-count .cbadge b{font-family:'Shippori Mincho',serif;font-size:clamp(22px,2.6vw,32px);
  font-weight:800;line-height:1;letter-spacing:.01em;}
.s-count .cbadge span{font-size:13px;color:var(--mute);}
/* 「触れる」ことを先に伝える。初めて動かした時点で消す（.used）。
   横スクロールできる表に出る案内バッジと同じ役割。 */
.s-count .chint{position:absolute;left:50%;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;
  background:rgba(36,28,23,.72);color:var(--paper);font-size:11.5px;letter-spacing:.1em;
  white-space:nowrap;pointer-events:none;
  transform:translateX(-50%);animation:chint-bob 1.9s ease-in-out infinite;
  transition:opacity .3s ease,visibility .3s ease;}
.s-count .chint i{font-style:normal;font-size:9px;opacity:.75;}
@keyframes chint-bob{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%    {transform:translateX(-50%) translateY(-6px);}
}
/* つまみを1回だけ脈打たせて、視線をスライダーへ落とす */
.s-count input[type=range]::-webkit-slider-thumb{animation:knob-pulse 2.1s ease-out infinite;}
@keyframes knob-pulse{
  0%  {box-shadow:0 0 0 6px rgba(250,247,242,.9),0 8px 18px -8px rgba(111,68,38,.9),0 0 0 0 rgba(111,68,38,.45);}
  70% {box-shadow:0 0 0 6px rgba(250,247,242,.9),0 8px 18px -8px rgba(111,68,38,.9),0 0 0 16px rgba(111,68,38,0);}
  100%{box-shadow:0 0 0 6px rgba(250,247,242,.9),0 8px 18px -8px rgba(111,68,38,.9),0 0 0 0 rgba(111,68,38,0);}
}
.s-count.used .chint{opacity:0;visibility:hidden;}
.s-count.used input[type=range]::-webkit-slider-thumb{animation:none;}
@media (prefers-reduced-motion: reduce){
  .s-count .chint{animation:none;}
  .s-count input[type=range]::-webkit-slider-thumb{animation:none;}
}
/* 他店なら追加料金になる線 */
/* 上限は「位置」の話なので、写真ではなくスライダー側に置く。
   100本より右＝他店なら追加料金になる区間、を帯で示す。 */
/* 帯はスライダー本体を包む .track の中に置く。
   スマホでは説明文が2行になることがあり、.slider 基準だと帯だけ上にずれるため */
.s-count .track{position:relative;}
.s-count .zone{position:absolute;left:33.333%;right:0;top:0;height:2px;border-radius:2px;
  background:var(--sable);opacity:.3;pointer-events:none;}
.s-count .zonelab{position:absolute;left:33.333%;top:-34px;padding-left:12px;
  font-size:11.5px;letter-spacing:.06em;color:var(--mute);white-space:nowrap;
  transition:color .3s ease,font-weight .3s ease;}
.s-count .zonelab b{color:var(--sable);font-weight:700;}
/* 矢印は「100本の目盛りを指す」ための記号。説明が横幅いっぱいに回るスマホでは意味がないので消す */
.s-count .zonelab .ar{font-style:normal;margin-right:5px;}
.s-count .zonelab.on{color:var(--ink);}
.s-count .ctrl{margin-top:clamp(30px,3.6vw,42px);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center;}
.s-count .slider{position:relative;}
/* display:block にしないと、行の高さ（leading）の分だけ下にずれて、
   同じ位置に置いた帯（.zone）と20pxほど食い違う */
.s-count input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:2px;
  background:var(--line);border-radius:2px;outline:none;margin:0;}
.s-count input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--sable);cursor:pointer;
  box-shadow:0 0 0 6px rgba(250,247,242,.9),0 8px 18px -8px rgba(111,68,38,.9);}
.s-count input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;
  background:var(--sable);cursor:pointer;box-shadow:0 0 0 6px rgba(250,247,242,.9);}
.s-count input[type=range]:focus-visible{outline:2px solid var(--sable);outline-offset:8px;}
.s-count .ticks{display:flex;justify-content:space-between;margin-top:16px;}
.s-count .ticks span{font-family:'Space Grotesk',monospace;font-size:11.5px;color:var(--mute);
  letter-spacing:.06em;transition:color .2s ease;position:relative;}
.s-count .ticks span.here{color:var(--sable);font-weight:700;}
.s-count .ticks span.limit::after{content:"";position:absolute;left:0;top:-30px;width:1px;height:22px;
  background:var(--sable);opacity:.6;}
.s-count .note-limit{margin:18px 0 0;font-size:12px;color:var(--mute);line-height:1.85;}
/* 動かない値段 */
.s-count .fixed{text-align:right;border-left:1px solid var(--line);padding-left:clamp(24px,4vw,56px);}
.s-count .fixed .lab{font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.2em;color:var(--sable);}
.s-count .fixed .v{font-family:'Shippori Mincho',serif;font-weight:800;
  font-size:clamp(38px,5.4vw,70px);line-height:.9;letter-spacing:-.01em;margin-top:10px;}
.s-count .fixed .v i{font-style:normal;font-size:.34em;color:var(--sable);margin-right:.06em;}
.s-count .fixed small{display:block;font-size:11.5px;color:var(--mute);margin-top:12px;line-height:1.9;}
@media(max-width:860px){
  /* 「本数・画像・スライダー・価格」が1画面に収まるように、全部の余白を詰める */
  .s-count .cstage{height:clamp(150px,20svh,190px);}
  .s-count .cstage .fr{background-position:50% 58%;}
  .s-count .eyebrow{margin-bottom:16px;}
  .s-count .clead{font-size:14.5px;line-height:1.9;margin-top:12px;}
  .s-count .cshot{margin-top:18px;}
  .s-count .zonelab{position:static;display:block;padding:0;margin-bottom:14px;white-space:normal;
    font-size:11px;line-height:1.7;}
  .s-count .zonelab .ar{display:none;}
  /* 本数は写真の外へ。写真の中だとまつ毛の上に重なって読みにくい */
  .s-count .cshot{display:flex;flex-direction:column;align-items:flex-end;}
  .s-count .cbadge{position:static;order:-1;padding:0 2px 8px;background:none;backdrop-filter:none;}
  .s-count .cstage{width:100%;}
  .s-count .chint{bottom:10px;font-size:11px;padding:7px 15px;letter-spacing:.08em;}
  .s-count .note-limit{margin-top:14px;font-size:11.5px;line-height:1.75;}
  .s-count .ctrl{grid-template-columns:1fr;gap:18px;margin-top:24px;}
  .s-count .fixed .v{font-size:clamp(30px,8.5vw,40px);}
  .s-count .fixed small{font-size:11px;line-height:1.75;}
  .s-count .fixed{text-align:left;border-left:0;border-top:1px solid var(--line);
    padding:16px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
  .s-count .fixed .v{margin-top:0;}
  .s-count .fixed small{flex-basis:100%;margin-top:4px;}
  /* 100（他店の上限）と187（いま選んでいる本数）は消さない。全部出して字を小さくする */
  .s-count .ticks span{font-size:10.5px;}
}

/* 小さい画面（iPhone SE 等）でも1画面に収める */
@media(max-width:420px){
  .sec.s-count{padding:32px 20px;}
  .s-count .eyebrow{margin-bottom:12px;}
  .s-count .clead{margin-top:10px;}
  .s-count .cshot{margin-top:14px;}
  .s-count .cstage{height:clamp(128px,18svh,160px);}
  .s-count .ctrl{margin-top:20px;gap:14px;}
  .s-count .note-limit{margin-top:12px;}
  .s-count .fixed{padding-top:12px;}
}

/* ============ ⑧ 料金（sec-pricing-01 エディトリアル特大プライス） ============ */
.s-price .ptop{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);
  align-items:end;border-bottom:2px solid var(--ink);padding-bottom:30px;margin-top:clamp(28px,4vw,46px);}
.s-price .plabel{font-family:'Shippori Mincho',serif;font-size:clamp(20px,2.4vw,28px);font-weight:700;margin:0;}
.s-price .plabel small{display:block;font-family:'Zen Kaku Gothic New',sans-serif;font-size:13px;
  color:var(--mute);letter-spacing:.06em;margin-top:10px;font-weight:400;}
.s-price .pvalue{text-align:right;}
.s-price .pvalue .cap{font-family:'Space Grotesk',monospace;font-size:12px;color:var(--sable);letter-spacing:.16em;}
.s-price .pvalue .v{font-family:'Shippori Mincho',serif;font-weight:800;
  font-size:clamp(60px,11.5vw,146px);line-height:.82;letter-spacing:-.02em;
  display:inline-flex;align-items:baseline;}
.s-price .pvalue .v .y{font-size:.3em;margin-right:.05em;color:var(--sable);}
.s-price .pvalue .tax{font-size:12.5px;color:var(--mute);letter-spacing:.04em;margin-top:12px;}
.s-price .pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);margin-top:42px;}
.s-price .incl{list-style:none;margin:0;padding:0;}
.s-price .incl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:18px 4px;border-bottom:1px solid var(--line);font-size:15px;}
.s-price .incl .ck{width:22px;height:22px;border-radius:50%;background:var(--sable);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;}
.s-price .incl .mn{font-family:'Space Grotesk',monospace;font-size:12px;color:var(--mute);}
.s-price .pnote{background:var(--white);border:1px solid var(--line);border-radius:26px;
  padding:30px 30px 32px;align-self:start;}
.s-price .pnote .nt{font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.16em;color:var(--sable);}
.s-price .pnote h3{font-family:'Shippori Mincho',serif;font-size:19px;margin:10px 0 12px;letter-spacing:.03em;}
.s-price .pnote p{color:var(--mute);font-size:14.5px;line-height:2;margin:0 0 16px;}
.s-price .pnote .sub-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:16px;margin-top:4px;}
.s-price .pnote .sub-price b{font-family:'Shippori Mincho',serif;font-size:22px;font-weight:800;}
.s-price .pwhy{margin:34px 4px 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute);line-height:2;}
.s-price .pwhy a{color:var(--sable);font-weight:700;text-underline-offset:4px;}
.s-price .pacts{margin:36px 0 0;}
@media(max-width:820px){
  .s-price .ptop,.s-price .pgrid{grid-template-columns:1fr;gap:22px;}
  .s-price .pvalue{text-align:left;}
}


/* ============ ⑨ 正直な相性表（sec-vs-14）＋ 持ちについて正直に ============
   打ち消し線（craft-06）から差し替え。主語が「うちがやらないこと」から
   「あなたに向いているか」へ変わる＝合わない人を先に外せる。 */
.s-fit .fin{width:min(1060px,100%);margin:0 auto;}
.s-fit .flead{color:var(--mute);font-size:15.5px;margin:18px 0 0;max-width:40em;line-height:2.1;}
.s-fit .fcols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:clamp(36px,5vw,54px);align-items:stretch;}
.s-fit .fcard{padding:36px 34px 38px;border-radius:26px;}
.s-fit .ok{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--sable);
  box-shadow:0 26px 54px -46px rgba(36,28,23,.5);}
.s-fit .ng{background:transparent;border:1px dashed #C8BDAE;}
.s-fit .ftag{font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:.28em;display:block;}
.s-fit .ok .ftag{color:var(--sable);}
.s-fit .ng .ftag{color:#A99D8C;}
.s-fit .fcard h3{font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(18px,2.1vw,23px);line-height:1.6;margin:12px 0 4px;letter-spacing:.03em;}
.s-fit .ng h3{color:var(--mute);}
.s-fit .fcard ul{list-style:none;margin:20px 0 0;padding:0;}
.s-fit .fcard li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;
  border-top:1px solid var(--line);font-size:15.5px;line-height:1.95;}
.s-fit .ng li{color:#8B8172;border-top-color:#E4DACB;}
.s-fit .chk{flex:0 0 auto;width:21px;height:21px;margin-top:4px;}
.s-fit .chk path{stroke:var(--sable);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.s-fit .dash{flex:0 0 auto;width:15px;height:2px;background:#B08A6A;opacity:.75;margin-top:14px;display:block;}
.s-fit .fnote{margin-top:34px;display:flex;gap:22px;align-items:center;background:var(--white);
  border-left:3px solid var(--sable);border-radius:0 22px 22px 0;padding:24px 28px;}
.s-fit .fnote img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--paper);box-shadow:0 6px 16px -8px rgba(36,28,23,.5);}
.s-fit .fnote p{margin:0;font-size:15px;line-height:2.05;}
.s-fit .fnote p b{font-weight:700;}
/* 後半：持ちについて正直に（罫線リスト・カードにしない） */
.s-fit .frank{margin-top:clamp(56px,8vw,86px);border-top:1px solid var(--ink);}
.s-fit .frank .fr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;
  padding:30px 2px;border-bottom:1px solid var(--line);align-items:start;}
.s-fit .frank .fr i{font-style:normal;font-family:'Space Grotesk',monospace;
  font-size:11px;letter-spacing:.22em;color:var(--sable);padding-top:8px;}
.s-fit .frank h4{font-family:'Shippori Mincho',serif;font-size:clamp(17px,2.1vw,22px);
  font-weight:700;margin:0 0 8px;letter-spacing:.03em;}
.s-fit .frank p{margin:0;color:var(--mute);font-size:15.5px;line-height:2.05;}
.s-fit .frank p b{color:var(--ink);font-weight:700;}
@media(max-width:860px){
  .s-fit .fcols{grid-template-columns:1fr;gap:18px;}
  .s-fit .fcard{padding:28px 24px 30px;}
  .s-fit .fnote{flex-direction:column;align-items:flex-start;gap:14px;}
  .s-fit .frank .fr{grid-template-columns:1fr;gap:6px;}
  .s-fit .frank .fr i{padding-top:0;}
}


/* ================= ⑩ ご予約までの流れ（sec-process-14 スイムレーン） ================= */
.s-flow{background:var(--white);border-top:1px solid var(--line);}
.s-flow .legend{display:grid;grid-template-columns:1fr 92px 1fr;gap:16px;margin:46px 0 12px;
  font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.24em;color:var(--mute);}
.s-flow .legend span:last-child{text-align:right;}
.s-flow .lanes{position:relative;}
.s-flow .prog{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:linear-gradient(var(--sable),rgba(111,68,38,.15));transform-origin:top;}
/* 上ぞろえ。片側にだけ写真が入る行があるので、中央ぞろえだと段がずれて見える */
.s-flow .row{display:grid;grid-template-columns:1fr 92px 1fr;gap:16px;align-items:start;
  padding:14px 0;position:relative;}
.s-flow .node{justify-self:center;margin-top:18px;width:46px;height:46px;border-radius:50%;
  background:var(--white);border:1px solid var(--sable);display:flex;align-items:center;
  justify-content:center;font-family:'Space Grotesk',monospace;font-size:13px;color:var(--sable);
  position:relative;z-index:2;}
.s-flow .card{border:1px solid var(--line);border-radius:24px;padding:22px 24px;background:var(--paper);}
.s-flow .card.we{background:var(--white);border-color:var(--sable);}
/* ★ヒーローの .tag は position:absolute。同じクラス名を使うと継承して文字に重なる。
   カタログ移植ガイドの言う「スコープ衝突」そのものだったので改名した。 */
.s-flow .lane-tag{display:inline-block;position:static;font-family:'Space Grotesk',monospace;
  font-size:10px;letter-spacing:.22em;color:var(--sable);margin-bottom:8px;}
.s-flow .card b{display:block;font-family:'Shippori Mincho',serif;font-size:17px;letter-spacing:.03em;}
.s-flow .card .cthumb{margin:14px 0 0;border-radius:14px;overflow:hidden;aspect-ratio:16/9;}
.s-flow .card .cthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.s-flow .card p{margin:7px 0 0;color:var(--mute);font-size:14.5px;line-height:1.95;}
.s-flow .goal{margin-top:26px;text-align:center;}
.s-flow .goal span{display:inline-block;padding:12px 26px;border-radius:999px;
  background:var(--sable);color:#fff;font-size:13.5px;letter-spacing:.06em;}
@media(max-width:860px){
  .s-flow .legend{display:none;}
  .s-flow .prog{left:23px;}
  .s-flow .row{grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding:10px 0;}
  .s-flow .node{grid-row:span 2;justify-self:start;}
  .s-flow .card{grid-column:2;}
  .s-flow .card + .card{margin-top:10px;}
}

/* ============ ⑪ 施術する人（sec-message-11 余白のエッセイ） ============ */
.s-msg .mwrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start;}
.s-msg .maside{position:sticky;top:100px;}
.s-msg .mlabel{font-family:'Shippori Mincho',serif;font-weight:700;font-size:21px;
  margin:14px 0 0;letter-spacing:.1em;}
.s-msg .mrule{width:44px;height:1px;background:var(--sable);margin:22px 0 18px;transform-origin:0 50%;}
.s-msg .mnote{color:var(--mute);font-size:12px;line-height:2.1;margin:0;}
.s-msg .mbody h2{font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(24px,3.4vw,42px);line-height:1.6;margin:0 0 34px;letter-spacing:.03em;}
.s-msg .mbody p{margin:0 0 1.7em;font-size:15.5px;line-height:2.15;max-width:36em;}
.s-msg .mk{background-image:linear-gradient(rgba(111,68,38,.24),rgba(111,68,38,.24));
  background-repeat:no-repeat;background-size:100% 9px;background-position:0 86%;padding:0 2px;}
.s-msg .mphoto{margin:46px 0 0;position:relative;height:clamp(190px,26vw,250px);
  overflow:hidden;border-radius:24px;}
.s-msg .mphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;}
.s-msg .msign{display:flex;align-items:baseline;gap:16px;margin-top:22px;
  border-top:1px solid var(--line);padding-top:16px;}
.s-msg .mrole{font-size:12px;color:var(--mute);letter-spacing:.12em;}
.s-msg .mname{font-family:'Shippori Mincho',serif;font-weight:700;font-size:20px;letter-spacing:.14em;}
@media(max-width:860px){
  .s-msg .mwrap{grid-template-columns:1fr;gap:30px;}
  .s-msg .maside{position:static;}
  .s-msg .mrule{margin:16px 0 14px;}
}


/* ================= ⑫ よくある質問（sec-faq-09 一問一答インデックス） ================= */
.s-faq .fin{width:min(880px,100%);margin:0 auto;}
.s-faq .list{margin-top:50px;border-top:1px solid var(--ink);}
.s-faq .item{padding:32px 0 28px;border-bottom:1px solid var(--line);}
.s-faq .qrow{display:flex;align-items:baseline;gap:16px;}
.s-faq .qmark{font-family:'Shippori Mincho',serif;font-weight:700;font-size:21px;
  color:var(--sable);flex:none;line-height:1;}
.s-faq .qtext{font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:clamp(16px,2.2vw,20px);line-height:1.7;margin:0;letter-spacing:.03em;}
.s-faq .leader{flex:1 1 auto;min-width:28px;border-bottom:1px dotted #CFC4B4;transform:translateY(-6px);}
.s-faq .no{font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.2em;color:var(--mute);flex:none;}
.s-faq .ans{display:flex;gap:16px;margin:16px 0 0;}
.s-faq .amark{font-family:'Space Grotesk',monospace;font-weight:700;font-size:13px;
  color:var(--sable);flex:none;line-height:2.2;letter-spacing:.1em;}
.s-faq .ans p{margin:0;color:var(--mute);font-size:15.5px;max-width:46em;line-height:2.05;}
.s-faq .fnote{margin:38px 0 0;font-size:13px;text-align:center;color:var(--mute);}
.s-faq .fnote a{color:var(--sable);font-weight:700;}
@media(max-width:620px){ .s-faq .leader,.s-faq .no{display:none;} .s-faq .qrow{gap:12px;} .s-faq .ans{gap:12px;} }

/* ================= ⑬ 最終CTA（sec-cta-10 静かな受付） ================= */
.s-cta{background:var(--paper);border-top:1px solid var(--line);}
.s-cta .cgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,64px);align-items:start;}
.s-cta .cu{position:relative;z-index:0;white-space:nowrap;}
.s-cta .cu i{position:absolute;left:0;right:0;bottom:6px;height:.34em;
  background:rgba(111,68,38,.2);z-index:-1;transform-origin:left center;display:block;}
.s-cta .clead{color:var(--mute);font-size:15.5px;margin:22px 0 0;max-width:34em;line-height:2.1;}
.s-cta .points{list-style:none;margin:32px 0 0;padding:26px 0 0;border-top:1px solid var(--line);}
.s-cta .points li{display:flex;gap:16px;align-items:baseline;padding:9px 0;}
.s-cta .points .no{font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.18em;color:var(--sable);flex:none;}
.s-cta .points b{display:block;font-size:15px;}
.s-cta .points span{display:block;color:var(--mute);font-size:13px;}
.s-cta .panel{background:var(--white);border:1px solid var(--line);border-radius:32px;
  padding:34px clamp(22px,3vw,36px);box-shadow:0 30px 60px -50px rgba(36,28,23,.45);}
.s-cta .way + .way{margin-top:28px;padding-top:28px;border-top:1px solid var(--line);}
.s-cta .way-label{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:13px;font-weight:700;letter-spacing:.06em;}
.s-cta .way-label svg{width:19px;height:19px;flex:none;}
.s-cta .cbtn{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--sable);color:#fff;border-radius:999px;padding:18px 28px;
  text-decoration:none;font-weight:700;font-size:15.5px;letter-spacing:.04em;
  transition:transform .2s ease,box-shadow .2s ease;}
.s-cta .cbtn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -18px rgba(111,68,38,.9);}
.s-cta .tel{display:inline-block;font-family:'Space Grotesk',monospace;font-weight:700;
  font-size:clamp(26px,3.4vw,34px);letter-spacing:.04em;text-decoration:none;color:var(--ink);}
.s-cta .cnote{display:block;color:var(--mute);font-size:12px;margin-top:10px;line-height:1.9;}
@media(max-width:860px){ .s-cta .cgrid{grid-template-columns:1fr;} .s-cta .cu{white-space:normal;} }

/* ================= ⑭ アクセス・店舗情報（罫線） ================= */
.s-access{background:var(--white);border-top:1px solid var(--line);}
.s-access dl{margin:40px 0 0;border-top:1px solid var(--ink);}
.s-access .r{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;
  padding:20px 2px;border-bottom:1px solid var(--line);}
.s-access dt{margin:0;font-size:13px;letter-spacing:.08em;color:var(--mute);}
.s-access dd{margin:0;font-size:15.5px;line-height:2;}
.s-access dd b{font-weight:700;}
@media(max-width:680px){ .s-access .r{grid-template-columns:1fr;gap:4px;} }

/* ================= タブレット以下（768px）で詰めを調整 ================= */
@media(max-width:768px){
  :root{ --gap-sec:clamp(72px,11vw,110px); }
  .sec{padding:var(--gap-sec) clamp(20px,5vw,40px);}
  .h2{font-size:clamp(22px,4.6vw,32px);line-height:1.6;}
  .s-night{padding:clamp(80px,12vw,110px) clamp(20px,5vw,40px);}
  .s-price .sheet{padding:34px 20px 30px;}
  .s-fit .frank .fr{grid-template-columns:1fr;gap:6px;}
  .s-fit .frank .fr i{padding-top:0;}
  .s-voice .vfoot{flex-direction:column;align-items:flex-start;}
  .s-cta .panel{padding:28px 22px;}
  .s-bleed{height:clamp(220px,44vw,320px);}
  .s-bleed figcaption{left:clamp(20px,5vw,40px);bottom:16px;font-size:12px;}
}

/* ================= フッター ================= */
.c-ft{background:var(--ink);color:var(--paper);padding:clamp(64px,9vw,104px) var(--pad) 40px;}
.c-ft .ft-in{max-width:1180px;margin:0 auto;}
.c-ft .ft-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);
  padding-bottom:44px;border-bottom:1px solid rgba(250,247,242,.16);}
.c-ft .ft-logo{font-family:'Shippori Mincho',serif;font-weight:700;font-size:26px;letter-spacing:.24em;}
.c-ft .ft-ent{margin:18px 0 0;font-size:14.5px;line-height:2.1;color:rgba(250,247,242,.72);max-width:32em;}
.c-ft .ft-nap{margin:24px 0 0;font-size:13px;line-height:2.1;color:rgba(250,247,242,.72);}
.c-ft .ft-nap b{color:var(--paper);}
/* 「（最終受付 19:30）」が途中で折り返さないようにする（狭い画面で括弧だけ次行に落ちる） */
.nb{white-space:nowrap;}

/* ============ 問い合わせフォーム（Fluent Forms の見た目をサイトに合わせる） ============
   プラグインの初期デザインは角丸が強く、必須の印が赤い。
   静的版の .form と同じ見え方になるよう上書きする。 */
.ffwrap{max-width:640px;margin-top:36px;}
.ffwrap .ff-el-group{margin-bottom:22px;}
.ffwrap .ff-el-input--label label{display:inline-flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
/* プラグイン側が赤い「*」を出す。文言まで上書きするので !important が要る */
.ffwrap .ff-el-input--label.ff-el-is-required.asterisk-right label:after{
  content:"必須" !important;background:var(--sable);
  color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:3px 9px;
  letter-spacing:.06em;margin-left:10px;vertical-align:2px;line-height:1.6;}
.ffwrap .ff-el-is-required label>span,.ffwrap .ff-el-input--label.ff-el-is-required>label:before{display:none;}
.ffwrap input[type=text],.ffwrap input[type=email],.ffwrap input[type=tel],
.ffwrap textarea,.ffwrap select{width:100%;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;background:var(--white);color:var(--ink);
  font-family:inherit;font-size:15px;line-height:1.7;box-shadow:none;height:auto;}
.ffwrap textarea{min-height:150px;resize:vertical;}
.ffwrap input:focus,.ffwrap textarea:focus,.ffwrap select:focus{
  outline:2px solid var(--sable);outline-offset:1px;border-color:var(--line);box-shadow:none;}
.ffwrap .ff-el-form-check{display:flex;gap:10px;align-items:flex-start;}
.ffwrap .ff-el-form-check-label{font-size:13.5px;color:var(--mute);font-weight:400;}
.ffwrap .ff-el-form-check input[type=checkbox]{width:auto;margin-top:5px;}
.ffwrap .ff-btn-submit{background:var(--sable);color:#fff;border:0;border-radius:999px;
  padding:16px 34px;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;}
.ffwrap .ff-btn-submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(111,68,38,.9);}
.ffwrap .error,.ffwrap .ff-el-is-error .text-danger{color:#9a3b2a;font-size:12.5px;}
.ffwrap .ff-message-success{border:1px solid var(--line);border-radius:16px;
  background:var(--white);padding:20px 22px;color:var(--ink);line-height:2;}
.c-ft nav{display:flex;flex-direction:column;gap:2px;}
.c-ft nav a{text-decoration:none;font-size:14px;padding:12px 0;
  border-bottom:1px solid rgba(250,247,242,.14);color:rgba(250,247,242,.86);
  display:flex;justify-content:space-between;align-items:center;transition:color .2s;}
.c-ft nav a:hover{color:#fff;}
.c-ft nav a::after{content:"→";opacity:.4;font-size:12px;}
.c-ft .ft-bottom{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  align-items:center;padding-top:28px;font-size:11.5px;color:rgba(250,247,242,.5);}
.c-ft .ft-demo{border:1px solid rgba(250,247,242,.28);border-radius:999px;padding:7px 16px;
  font-size:11px;letter-spacing:.08em;}
@media(max-width:860px){ .c-ft .ft-top{grid-template-columns:1fr;} }

/* =====================================================================
   固定ページ専用（トップには無い分）。設計システムは上をそのまま継承する。
   ===================================================================== */

/* ページヒーロー（FVではない。タイトル帯にとどめる） */
/* 上余白は「セクション余白＋固定ヘッダー高」。これが無いとスマホで見出しがヘッダーに潜る */
.page-hero{position:relative;
  padding:calc(var(--gap-sec) * .62 + 76px) var(--pad) calc(var(--gap-sec) * .55);
  background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden;}
.page-hero .ph-in{max-width:1180px;margin:0 auto;position:relative;z-index:1;}
.page-hero h1{font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(26px,4vw,48px);line-height:1.55;letter-spacing:.04em;margin:0;}
.page-hero .ph-lead{margin:22px 0 0;color:var(--mute);font-size:15px;line-height:2.1;max-width:34em;}
.page-hero .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px;
  font-size:11.5px;letter-spacing:.14em;color:var(--mute);}
.page-hero .crumb a{text-decoration:none;}
.page-hero .crumb a:hover{color:var(--sable);}
.page-hero .crumb span{opacity:.5;}
.page-hero .ph-bg{position:absolute;right:0;top:0;bottom:0;width:38%;opacity:.5;
  -webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent);}
/* 横長の枠なので、被写体が中央より少し上にある写真が多い。上寄りで切る。
   ※縦長写真をここに入れると上下が大きく切れて被写体が枠外に出る（faqで発生）。横長を使う */
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;display:block;}
@media(max-width:860px){ .page-hero .ph-bg{display:none;} }

/* 読みもの（プライバシーポリシー等の素の本文） */
.prose{max-width:52em;}
.prose h2{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(19px,2.4vw,25px);
  letter-spacing:.03em;margin:52px 0 14px;padding-top:22px;border-top:1px solid var(--line);}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.prose p{font-size:14.5px;line-height:2.15;margin:0 0 1.2em;}
.prose ul,.prose ol{font-size:14.5px;line-height:2.15;padding-left:1.4em;margin:0 0 1.4em;}
.prose li{margin-bottom:.5em;}
.prose a{color:var(--sable);font-weight:700;text-underline-offset:4px;}
.prose .updated{font-size:12.5px;color:var(--mute);margin-top:40px;padding-top:20px;border-top:1px solid var(--line);}

/* 記事カード（お知らせ・ブログ一覧） */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;margin-top:40px;}
.cards article{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--white);
  display:flex;flex-direction:column;}
.cards .thumb{aspect-ratio:16/10;overflow:hidden;}
.cards .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cards .body{padding:22px 22px 24px;}
.cards h3{font-family:'Shippori Mincho',serif;font-size:17px;font-weight:700;margin:0 0 8px;line-height:1.7;}
.cards p{margin:0;color:var(--mute);font-size:13px;line-height:1.95;}
.cards a{text-decoration:none;}

/* フォーム安全弁（将来クライアントが素のフォームを貼っても崩れないように） */
input,textarea,select{max-width:100%;box-sizing:border-box;}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{width:100%;font-size:16px;}
.form{max-width:640px;margin-top:36px;}
.form .fld{margin-bottom:22px;}
.form label{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;margin-bottom:8px;}
.form .req{background:var(--sable);color:#fff;font-size:10px;font-weight:700;
  border-radius:999px;padding:3px 9px;letter-spacing:.06em;}
.form .opt{border:1px solid var(--line);color:var(--mute);font-size:10px;
  border-radius:999px;padding:3px 9px;letter-spacing:.06em;}
.form input,.form textarea,.form select{border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;background:var(--white);color:var(--ink);font-family:inherit;line-height:1.7;}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--sable);outline-offset:1px;}
.form textarea{min-height:150px;resize:vertical;}
.form .agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute);}
.form .agree input{width:auto;margin-top:5px;}
.form .submit{margin-top:8px;}
.form .demo-note{margin-top:18px;font-size:12.5px;color:var(--mute);
  border:1px dashed var(--line);border-radius:16px;padding:16px 18px;line-height:2;}