/* =========================================================
   R salon（アール サロン）エステ・大阪市住吉区
   デザインシステム「アーチの窓と、整った棚」
   ---------------------------------------------------------
   1. 色・寸法の変数        2. 基本               3. 共通の部品（見出し・ボタン・札）
   4. ヘッダー・メニュー     5. スマホの固定の帯
   6. トップページの各セクション
   7. お問い合わせ帯・フッター   8. 動き   9. 画面幅ごとの調整
   10. 以降は下層ページ（共通の見出し帯 → ページごとの章）
   ========================================================= */

/* ---------- 1. 色・寸法の変数 ---------- */
:root{
  --white:#FFFFFF;
  --mist:#F7F4F1;      /* 霧（地の切り替え） */
  --blush:#F5E7E1;     /* 淡いヌードピンク（面） */
  --nude:#E8C7BB;      /* ヌードピンク（線・面・アーチ） */
  --nude-d:#C79A8A;    /* 濃いヌード（細い線） */
  --rose:#B24A62;      /* ローズ（主ボタン・印・白地の強調文字） */
  --rose-h:#933A50;
  --rose-l:#F8E3E8;
  --ink:#1F3B35;       /* 墨ユーカリ（文字・濃い面・フッター） */
  --ink-2:#2A4A42;     /* 濃い面の上の面 */
  --ink-m:#58665F;     /* 注記 */
  --euc:#86A89C;       /* ユーカリ（線・目盛り。文字にしない） */
  --euc-d:#4C7266;     /* 白地の小さな英字 */
  --euc-l:#E4EDE9;     /* 淡いユーカリ（面） */
  --line:#EAE2DD;      /* 罫線 */
  --line-s:#D8CCC5;
  --on-d:#E9F0ED;      /* 濃い面の上の文字 */
  --on-d-m:#AFC2BA;
  --accent:#B24A62;    /* ページ切り替えの読み込みバー */

  --max:1200px;
  --gut:clamp(20px,5vw,64px);
  --sec-l:clamp(88px,9vw,140px);
  --sec-m:clamp(64px,7vw,104px);
  --sec-s:clamp(48px,6vw,80px);
  --hd:88px;
  --r:6px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --mincho:"Kaisei Opti","Hiragino Mincho ProN","Yu Mincho",serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
  --mono:"Red Hat Mono",ui-monospace,Menlo,monospace;
}

/* ---------- 2. 基本 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--jp);font-size:16px;line-height:2;letter-spacing:.05em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
picture{display:contents}
[hidden]{display:none!important}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:700;line-height:1.55;letter-spacing:.06em}
strong{font-weight:700}
small{font-size:inherit}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.skip-target{display:block;height:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 改行（ビルドと対になる指定） */
main,.footer{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.nw{white-space:nowrap}
.paren,.unit,.q{display:inline-block}
br.sp{display:none}

.container{width:min(calc(100% - var(--gut) * 2), var(--max));margin-inline:auto}
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0}
.note{font-size:13px;line-height:1.8;letter-spacing:.03em;color:var(--ink-m)}
.section{position:relative;padding:var(--sec-l) 0;overflow-x:clip}
.bg-mist{background:var(--mist)}
.bg-blush{background:var(--blush)}

/* ---------- 3. 共通の部品 ---------- */
/* 英字ラベル: 小さなアーチの印＋イタリックの英字＋日本語 */
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px;line-height:1.2}
.eyebrow::before{content:"";flex:none;width:11px;height:15px;border:1.5px solid var(--rose);border-bottom:0;border-radius:6px 6px 0 0}
.eb-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:21px;letter-spacing:.04em;color:var(--euc-d)}
.eb-ja{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-m)}
.eyebrow>wbr{display:none}
.eyebrow-light::before{border-color:var(--nude)}
.eyebrow-light .eb-en{color:var(--nude)}
.eyebrow-light .eb-ja{color:var(--on-d-m)}

.sh h2{font-family:var(--mincho);font-weight:700;font-size:clamp(27px,3.1vw,42px);line-height:1.55;letter-spacing:.06em}
.sh-lead{margin-top:22px;max-width:38em;font-size:clamp(15px,1.15vw,17px);line-height:2.1}
.sh-center{text-align:center}
.sh-center .eyebrow{justify-content:center}
.sh-center .sh-lead{margin-inline:auto}
.sh-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px clamp(32px,6vw,96px);align-items:end}
.sh-split .sh-lead{margin-top:0}
.sh-light{color:#fff}
.sec-more{margin-top:44px;text-align:right}
.sh-center+.sec-more,.sec-more-c{text-align:center}

/* ボタン（文字は必ず span で包む） */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:0 10px 0 28px;border:0;border-radius:999px;font-family:var(--jp);font-weight:700;font-size:15px;line-height:1.4;letter-spacing:.08em;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s}
.btn-primary{background:var(--rose);color:#fff}
.btn-primary:hover{background:var(--rose-h)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-s)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-arrow{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18)}
.btn-ghost .btn-arrow{background:var(--rose-l)}
.btn-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.btn-ghost .btn-arrow svg{stroke:var(--rose)}
.btn:hover .btn-arrow svg{transform:translateX(3px)}
.btn-sm{min-height:46px;padding:0 6px 0 20px;gap:12px;font-size:14px}
.btn-sm .btn-arrow{width:34px;height:34px}

/* 文字リンク（丸矢印つき） */
.link-arrow{display:inline-flex;align-items:center;gap:14px;color:var(--ink);font-weight:700;font-size:15px;line-height:1.5;text-decoration:none}
.link-arrow>span{background:linear-gradient(var(--nude),var(--nude)) left bottom/100% 1px no-repeat;padding-bottom:2px;transition:background-size .2s}
.link-arrow svg{flex:none;width:36px;height:36px;padding:9px;border:1px solid var(--nude-d);border-radius:50%;fill:none;stroke:var(--rose);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:background-color .2s,border-color .2s,stroke .2s}
.link-arrow:hover svg{background:var(--rose);border-color:var(--rose);stroke:#fff}
.link-arrow:hover>span{background-image:linear-gradient(var(--rose),var(--rose))}
.link-light{color:#fff}
.link-light svg{border-color:rgba(255,255,255,.4);stroke:#fff}

/* 区分の札（個人＝ユーカリ／サロン＝ローズ） */
.tag{display:inline-block;padding:2px 12px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.7;letter-spacing:.06em;white-space:nowrap}
.tag-skin{background:var(--euc-l);color:var(--euc-d)}
.tag-shelf{background:var(--rose-l);color:var(--rose)}

/* 写真のアーチの枠 */
.arch{position:relative;overflow:hidden;border-radius:999px 999px var(--r) var(--r);background:var(--blush)}
.arch img{width:100%;height:100%;object-fit:cover}

/* ---------- 4. ヘッダー ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--hd);padding-top:env(safe-area-inset-top);background:rgba(255,255,255,.96);transition:height .25s var(--ease),box-shadow .25s}
.site-header.is-scrolled{--hd:68px;height:68px;box-shadow:0 1px 0 var(--line)}
.hd-inner{display:flex;align-items:center;gap:clamp(16px,2vw,32px);height:100%;padding:0 clamp(20px,2.6vw,40px)}
.logo{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none;color:var(--ink)}
.logo-mark{flex:none;width:28px;height:34px;overflow:visible}
.lm-arch{fill:none;stroke:var(--ink);stroke-width:1.6}
.lm-shelf{stroke:var(--rose);stroke-width:2}
.lm-r{font-family:var(--en);font-style:italic;font-weight:600;font-size:17px;fill:var(--rose)}
.logo-text{display:grid;line-height:1}
.logo-en{font-family:var(--en);font-weight:600;font-size:30px;letter-spacing:.02em}
.logo-sub{margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--ink-m)}
.nav{margin-left:auto}
.nav-list{display:flex;gap:clamp(16px,1.7vw,30px)}
.nav-list a{position:relative;display:grid;gap:2px;padding:10px 0;text-decoration:none;line-height:1.3;text-align:center}
.nav-en{display:block;font-family:var(--en);font-style:italic;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--euc-d)}
.nav-ja{font-weight:700;font-size:13.5px;letter-spacing:.06em;white-space:nowrap}
.nav-list a::after{content:"";position:absolute;left:50%;bottom:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--rose);transform:scale(0);transition:transform .2s var(--ease)}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scale(1)}
.nav-extra{display:none}
.hd-util{display:flex;align-items:center;gap:clamp(14px,1.4vw,22px);flex:none}
.hd-tel{display:grid;text-decoration:none;line-height:1.1;text-align:right}
.hd-tel-n{font-family:var(--mono);font-weight:500;font-size:18px;letter-spacing:.02em}
.hd-tel-s{margin-top:4px;font-size:10px;letter-spacing:.04em;color:var(--ink-m);white-space:nowrap}
.hd-call,.menu-toggle{display:none}

/* ---------- 5. スマホの固定の帯 ---------- */
.sp-bar{display:none}
.soon-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:300;max-width:calc(100% - 32px);padding:14px 20px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:14px;line-height:1.7;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.soon-toast.is-show{opacity:1;transform:translate(-50%,0)}
body.has-spbar .soon-toast{bottom:calc(84px + env(safe-area-inset-bottom))}

/* ---------- 6. トップページ ---------- */
/* 6-1 ファーストビュー: 左に言葉と2つの入口、右にアーチの窓（実写）と棚板、棚のカードと60分の文字盤 */
.hero{position:relative;padding:calc(var(--hd) + clamp(28px,4vw,56px)) 0 clamp(56px,6vw,88px);background:var(--white);overflow-x:clip}
.hero::before{content:"";position:absolute;right:0;top:0;bottom:0;width:34%;background:var(--mist)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center;width:min(calc(100% - var(--gut) * 2), 1280px);margin-inline:auto}
.hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-family:var(--en);font-style:italic;font-weight:600;font-size:18px;line-height:1.3;letter-spacing:.05em;color:var(--euc-d)}
.hero-eyebrow>wbr{display:none}
.he-sep{width:28px;height:1px;background:var(--nude-d)}
.hero-title{margin-top:26px;font-family:var(--mincho);font-weight:700;font-size:clamp(36px,4.6vw,66px);line-height:1.45;letter-spacing:.06em}
.hero-title .ht-rose{color:var(--rose)}
.hero-lead{margin-top:26px;max-width:30em;font-size:clamp(15px,1.2vw,17px);line-height:2.1}
.hero-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:36px;max-width:620px}
.entry{position:relative;display:grid;gap:4px;padding:20px 58px 20px 22px;border:1px solid var(--line-s);border-radius:var(--r);background:#fff;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.entry:hover{border-color:var(--euc);box-shadow:0 16px 30px -22px rgba(31,59,53,.5);transform:translateY(-2px)}
.entry-shelf:hover{border-color:var(--rose)}
.entry>wbr{display:none}
.entry-k{justify-self:start}
.entry-t{margin-top:8px;font-weight:700;font-size:16px;line-height:1.5}
.entry-p{font-size:13px;line-height:1.6;color:var(--ink-m)}
.entry-p .num{font-size:14px;color:var(--ink)}
.entry svg{position:absolute;right:16px;top:50%;width:30px;height:30px;margin-top:-15px;padding:7px;border-radius:50%;background:var(--euc-l);fill:none;stroke:var(--euc-d);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.entry-shelf svg{background:var(--rose-l);stroke:var(--rose)}
.entry:hover svg{transform:translateX(3px)}
.hero-note{margin-top:22px;font-size:14px;line-height:1.8;color:var(--ink-m)}
.hero-note a{margin-left:6px;color:var(--ink);font-family:var(--mono);font-weight:500;font-size:17px;text-decoration:none;white-space:nowrap}

.hero-visual{position:relative;padding:0 clamp(20px,3vw,48px) 34px clamp(24px,4vw,64px)}
.hero-window{position:relative;max-width:470px;margin-left:auto;margin-right:clamp(0px,4vw,48px)}
.hw-film{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px 4px 4px;background:var(--blush)}
.hw-film img{width:100%;height:100%;object-fit:cover}
.hero-window::before{content:"";position:absolute;inset:-14px -14px 0 -14px;border:1px solid var(--nude);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.hero-board{position:relative;height:12px;margin:0 0 0 clamp(0px,2vw,24px);border-radius:2px;background:linear-gradient(180deg,#E9D8D0 0,#E9D8D0 4px,#D8BFB3 4px);box-shadow:0 14px 22px -14px rgba(31,59,53,.45)}
.hero-vert{position:absolute;right:0;bottom:70px;writing-mode:vertical-rl;font-family:var(--mincho);font-weight:500;font-size:15px;letter-spacing:.5em;color:var(--euc-d)}

.hero-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 22px 44px -26px rgba(31,59,53,.45)}
.hc-stock{left:0;bottom:64px;width:min(290px,64%);padding:16px 18px 14px}
.hc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hc-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:17px;color:var(--rose)}
.hc-date{font-family:var(--mono);font-size:11px;color:var(--ink-m)}
.hc-rows{display:grid;gap:9px;margin-top:10px}
.hc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.hc-name{font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.02em}
.hc-st{grid-row:1 / span 2;grid-column:2;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.6;white-space:nowrap}
.st-ok{background:var(--euc-l);color:var(--euc-d)}
.st-order{background:var(--rose);color:#fff}
.st-first{background:#F6ECD9;color:#7A5A1E}
.hc-bar{position:relative;height:6px;border-radius:3px;background:var(--mist)}
.hc-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:3px;background:var(--euc)}
.hc-bar b{position:absolute;top:-3px;bottom:-3px;left:var(--p);width:2px;background:var(--ink)}
.hc-row.is-low .hc-bar i{background:var(--rose)}
.hc-foot{margin-top:10px;font-size:10.5px;line-height:1.5;color:var(--ink-m)}
.hc-foot b{display:inline-block;width:2px;height:9px;margin-right:6px;background:var(--ink);vertical-align:-1px}

.hc-dial{right:clamp(0px,1vw,16px);top:12%;width:138px;padding:14px 14px 12px;text-align:center}
.hc-dial svg{width:100%;height:auto;overflow:visible}
.dl-track{fill:none;stroke:var(--mist);stroke-width:7}
.dl-seg{fill:none;stroke-width:7}
.dl-tick{stroke:var(--ink);stroke-width:1}
.dl-hand{stroke:var(--rose);stroke-width:2;stroke-linecap:round;transform-origin:50px 50px}
.dl-pin{fill:var(--rose)}
.dl-num{font-family:var(--en);font-weight:600;font-size:22px;fill:var(--ink)}
.dl-min{font-family:var(--en);font-style:italic;font-size:10px;fill:var(--ink-m)}
.hc-dial-k{margin-top:6px;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.04em}

/* 6-2 要点の帯 */
.keys{background:var(--mist);padding:0 0 clamp(56px,6vw,88px)}
.keys-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-s)}
.keys-list li{display:grid;align-content:start;gap:4px;padding:26px clamp(18px,2.4vw,36px) 0 0}
.keys-list li+li{padding-left:clamp(18px,2.4vw,36px);border-left:1px solid var(--line)}
.k-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:16px;line-height:1.3;color:var(--rose)}
.keys-list b{font-family:var(--mincho);font-size:clamp(18px,1.6vw,22px);line-height:1.5}
.k-s{font-size:14px;line-height:1.85;color:var(--ink-m)}

/* 6-3 お悩み */
.worry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:56px}
.worry-col{padding:clamp(26px,3vw,40px);border-radius:var(--r);background:var(--mist)}
.worry-col-shelf{background:var(--blush)}
.wc-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line-s)}
.wc-head>wbr{display:none}
.wc-t{font-family:var(--mincho);font-weight:700;font-size:20px;line-height:1.4}
.wc-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:18px 0;border-bottom:1px dashed var(--line-s)}
.wc-list>wbr,.wc-list li>wbr{display:none}
.wr-q{position:relative;padding-left:30px;font-size:16px;font-weight:700;line-height:1.75}
.wr-q::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border:1.5px solid var(--euc);border-radius:4px}
.wr-q::after{content:"";position:absolute;left:6px;top:9px;width:6px;height:11px;border:solid var(--rose);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wr-a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--euc-d);text-decoration:none;white-space:nowrap}
.worry-col-shelf .wr-a{color:var(--rose)}
.wr-a::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.wr-a:hover span{text-decoration:underline;text-underline-offset:3px}
.worry-note{margin-top:28px;text-align:center}

/* 6-4 2つの柱 */
.pillars{background:var(--white)}
.pl-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:stretch;margin-top:64px}
.pl-card{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r)}
.pl-arch{aspect-ratio:5/4;border-radius:999px 999px 0 0;overflow:hidden;background:var(--euc-l)}
.pl-arch img{width:100%;height:100%;object-fit:cover}
.pl-shelf .pl-arch{display:grid;place-items:end center;padding:16% 12% 0;background:var(--blush)}
.pl-body{padding:30px clamp(22px,3vw,40px) 34px;background:var(--mist);border-radius:0 0 var(--r) var(--r)}
.pl-shelf .pl-body{background:#FBF1EE}
.pl-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:18px;line-height:1.2;color:var(--euc-d)}
.pl-shelf .pl-en{color:var(--rose)}
.pl-body h3{margin-top:8px;font-family:var(--mincho);font-size:clamp(23px,2.2vw,29px);line-height:1.45}
.pl-sub{margin-top:2px;font-family:var(--mincho);font-weight:500;font-size:15px;color:var(--ink-m)}
.pl-text{margin-top:16px;font-size:15px;line-height:2}
.pl-list{display:grid;gap:8px;margin-top:18px}
.pl-list li{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:999px;background:#fff;font-size:14.5px;font-weight:700;line-height:1.5}
.pl-list li::before{content:"";flex:none;width:8px;height:11px;border-radius:5px 5px 1px 1px;background:var(--euc)}
.pl-shelf .pl-list li::before{background:var(--rose)}
.pl-list>wbr,.pl-list li>wbr{display:none}
.pl-price{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-s);font-size:14px;font-weight:700;line-height:1.9}
.pl-price .num{font-size:16px}
.pl-body .link-arrow{margin-top:18px}
.pl-link{display:grid;align-content:center;gap:30px;padding:0 10px}
.pl-link p{display:grid;justify-items:center;gap:8px;font-size:12.5px;font-weight:700;line-height:1.6;text-align:center;color:var(--ink-m)}
.pl-link p::after{content:"";width:100%;height:9px;background:linear-gradient(var(--nude-d),var(--nude-d)) left center/100% 1px no-repeat}
.pl-link .pl-to{color:var(--euc-d)}
.pl-link .pl-from{color:var(--rose)}
.pl-to::after{-webkit-mask:linear-gradient(#000,#000);clip-path:polygon(0 44%,92% 44%,92% 0,100% 50%,92% 100%,92% 56%,0 56%)}
.pl-from::after{clip-path:polygon(100% 44%,8% 44%,8% 0,0 50%,8% 100%,8% 56%,100% 56%)}
.pl-to::after,.pl-from::after{background:currentColor!important}
.pl-sum{margin-top:44px;text-align:center;font-family:var(--mincho);font-weight:500;font-size:clamp(16px,1.4vw,19px);line-height:2}

/* 柱の中の在庫カード（写真の代わりに、管理の帳票を見せる） */
.sheet-mini{width:100%;max-width:340px;padding:16px 18px;background:#fff;border-radius:var(--r) var(--r) 0 0;box-shadow:0 -10px 30px -24px rgba(31,59,53,.6)}
.sm-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.sm-head>wbr{display:none}
.sm-t{font-size:12px;font-weight:700;letter-spacing:.08em}
.sm-d{font-family:var(--mono);font-size:11px;color:var(--ink-m)}
.sm-row{display:grid;grid-template-columns:minmax(0,1fr) 60px auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;line-height:1.4}
.sm-row>wbr{display:none}
.sm-row .hc-bar{height:5px}
.sm-row .hc-st{grid-row:auto;grid-column:auto}
.pl-shelf .pl-arch{aspect-ratio:5/4}

/* 6-5 2つの仕事の進み方（タブ） */
.ways{background:var(--mist)}
.ways-tabs{display:flex;justify-content:center;gap:8px;margin-top:44px}
.ways-tabs>wbr{display:none}
.wt{min-height:48px;padding:0 24px;border:1px solid var(--line-s);border-radius:999px;background:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.wt[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.wt:hover:not([aria-selected="true"]){border-color:var(--ink)}
.ways-panel{margin-top:36px;padding:clamp(28px,3.4vw,48px);border-radius:var(--r);background:#fff}
.wp-lead{font-size:15px;line-height:2;text-align:center}
/* 施術の60分: 時間の長さに比例した帯 */
.tl60{margin-top:30px}
.tl-bar{display:grid;grid-template-columns:10fr 10fr 20fr 10fr 5fr 5fr;gap:3px}
.tl-bar>wbr,.tl-steps>wbr,.tl-scale>wbr{display:none}
.tl-seg{height:14px;border-radius:2px;background:var(--euc)}
.tl-seg:nth-child(2n){background:#A9C3B9}
.tl-seg.tl-key{background:var(--rose)}
.tl-scale{display:grid;grid-template-columns:10fr 10fr 20fr 10fr 5fr 5fr 0fr;margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--ink-m)}
.tl-scale span{white-space:nowrap}
.tl-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:22px}
.tl-steps li{display:grid;align-content:start;gap:4px;padding-top:12px;border-top:1px solid var(--line-s)}
.tl-steps li>wbr{display:none}
.tl-min{font-family:var(--mono);font-size:12px;color:var(--rose)}
.tl-steps b{font-size:15px;line-height:1.5}
.tl-steps span:not(.tl-min){font-size:13px;line-height:1.8;color:var(--ink-m)}
/* 管理のひと月: 4つの段 */
.mo-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px;counter-reset:mo}
.mo-steps li{position:relative;display:grid;align-content:start;gap:6px;padding:22px 20px;border-radius:var(--r);background:var(--blush)}
.mo-steps li>wbr{display:none}
.mo-steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;z-index:1;width:10px;height:10px;margin-top:-5px;border:solid var(--rose);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.mo-when{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--rose)}
.mo-steps b{font-family:var(--mincho);font-size:19px;line-height:1.4}
.mo-steps span:not(.mo-when){font-size:13.5px;line-height:1.85}
.mo-loop{margin-top:18px;font-size:14px;line-height:1.9;text-align:center;color:var(--ink-m)}
.ways-panel .sec-more{margin-top:28px;text-align:center}

/* 6-6 大切にしている4つのこと */
.promise-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:60px}
.promise-list li{display:grid;align-content:start;gap:10px}
.promise-list li>wbr{display:none}
.pr-arch{display:grid;place-items:center;height:168px;padding-top:18px;border:1px solid var(--nude);border-bottom:0;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#fff 0,var(--blush) 100%)}
.pr-arch span{font-family:var(--en);font-style:italic;font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:.04em;text-align:center;color:var(--rose)}
.pr-arch small{display:block;margin-top:6px;font-family:var(--mono);font-style:normal;font-size:11px;color:var(--ink-m)}
.promise-list h3{margin-top:10px;font-family:var(--mincho);font-size:20px;line-height:1.5}
.promise-list p{font-size:14.5px;line-height:1.95}

/* 6-7 料金の目安（品書き） */
.price-sec{background:var(--white)}
.price-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.menu-list{border-top:1.5px solid var(--ink)}
.menu-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:22px 0;border-bottom:1px solid var(--line)}
.menu-list li>wbr{display:none}
.mn-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.mn-name>wbr{display:none}
.mn-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:15px;color:var(--euc-d)}
.mn-t{font-family:var(--mincho);font-weight:700;font-size:20px;line-height:1.4}
.mn-yen{align-self:baseline;font-family:var(--en);font-weight:600;font-size:28px;line-height:1;white-space:nowrap}
.mn-yen small{margin-left:3px;font-family:var(--jp);font-size:13px;font-weight:700;color:var(--ink-m)}
.mn-d{grid-column:1 / -1;font-size:14px;line-height:1.85;color:var(--ink-m)}
.mn-d .tag{margin-right:8px}
.menu-note{margin-top:18px}

/* 6-8 よくある質問（抜粋）と共通の開閉 */
.faq-ex{background:var(--mist)}
.faq-ex-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq details{border-bottom:1px solid var(--line-s)}
.faq details:first-child{border-top:1px solid var(--line-s)}
.faq summary{display:grid;grid-template-columns:36px minmax(0,1fr) 24px;align-items:center;gap:16px;padding:22px 0;font-weight:700;font-size:16px;line-height:1.7;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary>wbr{display:none}
.fq-q{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--en);font-style:italic;font-weight:600;font-size:18px;line-height:1}
.fq-icon{position:relative;width:22px;height:22px}
.fq-icon::before,.fq-icon::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1.5px;margin-top:-.75px;background:var(--rose);transition:transform .25s var(--ease)}
.fq-icon::after{transform:rotate(90deg)}
.faq details[open] .fq-icon::after{transform:rotate(0)}
.fq-a{overflow:hidden}
.fq-a p{padding:0 40px 24px 52px;font-size:15px;line-height:2}
.fq-a p+p{margin-top:-12px}
.fq-a a{color:var(--rose);font-weight:700;text-underline-offset:3px}

/* 6-9 R salonのこと（名前のカード） */
.profile-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.name-card{position:relative;display:grid;place-items:center;width:100%;max-width:420px;aspect-ratio:4/5;margin-inline:auto;border-radius:999px 999px var(--r) var(--r);background:var(--ink);color:var(--on-d);text-align:center;overflow:hidden}
.name-card::before{content:"";position:absolute;inset:16px 16px 0;border:1px solid rgba(232,199,187,.5);border-bottom:0;border-radius:999px 999px 0 0}
.nc-inner{position:relative;display:grid;justify-items:center;gap:6px;padding-top:12%}
.nc-inner>wbr{display:none}
.nc-r{font-family:var(--en);font-style:italic;font-weight:500;font-size:clamp(88px,9vw,128px);line-height:.9;color:var(--nude)}
.nc-role{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--on-d-m)}
.nc-name{font-family:var(--mincho);font-weight:700;font-size:clamp(24px,2.3vw,30px);line-height:1.4;letter-spacing:.24em;color:#fff}
.nc-roman{font-family:var(--en);font-style:italic;font-size:17px;letter-spacing:.08em;color:var(--nude)}
.nc-board{position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--rose)}
.pf-origin{margin-top:26px;padding:22px 24px;border-left:2px solid var(--rose);background:var(--blush);font-size:15px;line-height:2}
.pf-origin b{font-family:var(--en);font-style:italic;font-weight:600;font-size:19px;color:var(--rose)}
.pf-dl{margin-top:26px;border-top:1px solid var(--line-s)}
.pf-dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.pf-dl dt{font-size:14px;font-weight:700;color:var(--euc-d)}
.pf-dl dd{font-size:15px;line-height:1.85}
.pf-links{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:30px}
.pf-links>wbr{display:none}

/* ---------- 7. お問い合わせ帯・フッター ---------- */
.cta{position:relative;padding:clamp(72px,8vw,120px) 0;background:var(--ink);color:var(--on-d);overflow:hidden}
.cta-inner{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.cta-arch{position:absolute;left:-6%;bottom:-140px;width:340px;height:440px;border:1px solid rgba(232,199,187,.25);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.ca-r{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-family:var(--en);font-style:italic;font-size:180px;line-height:1;color:rgba(232,199,187,.08)}
.cta-text{position:relative}
.cta-title{font-family:var(--mincho);font-weight:700;font-size:clamp(28px,3.2vw,44px);line-height:1.5;color:#fff}
.cta-lead{margin-top:20px;max-width:32em;font-size:16px;line-height:2.05}
.cta-who{display:grid;gap:10px;margin-top:26px}
.cta-who li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:15px;font-weight:700}
.cta-who li>wbr{display:none}
.cta .tag-skin{background:rgba(228,237,233,.14);color:var(--euc-l)}
.cta .tag-shelf{background:rgba(248,227,232,.14);color:var(--rose-l)}
.cta-card{position:relative;padding:clamp(26px,3vw,40px);border-radius:var(--r);background:#fff;color:var(--ink)}
.cc-k{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--rose)}
.cc-tel{display:flex;align-items:center;gap:14px;margin-top:10px;text-decoration:none;color:var(--ink)}
.cc-tel>wbr{display:none}
.cc-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--rose);color:#fff}
.cc-icon svg{width:20px;height:20px;fill:currentColor}
.cc-num{font-family:var(--mono);font-weight:500;font-size:clamp(26px,2.6vw,34px);letter-spacing:.01em;white-space:nowrap}
.cc-who{margin-top:14px;font-size:14px;font-weight:700}
.cc-note{margin-top:4px;font-size:13px;line-height:1.8;color:var(--ink-m)}
.cta-card .link-arrow{margin-top:20px}

.footer{padding:clamp(56px,6vw,88px) 0 32px;background:#172E29;color:var(--on-d)}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-logo{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.footer .lm-arch{stroke:#fff}
.ft-logo-en{font-family:var(--en);font-weight:600;font-size:34px;line-height:1}
.ft-catch{margin-top:18px;font-family:var(--mincho);font-size:18px;line-height:1.7;color:#fff}
.ft-sub{font-size:13px;color:var(--on-d-m)}
.ft-tel{display:grid;gap:4px;text-decoration:none;text-align:right}
.ft-tel-k{font-size:12px;color:var(--on-d-m)}
.ft-tel-n{font-family:var(--mono);font-size:30px;line-height:1.2;color:#fff}
.ft-tel-s{font-size:12px;color:var(--on-d-m)}
.ft-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:40px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-head{display:flex;align-items:baseline;gap:10px;font-family:var(--en);font-style:italic;font-weight:600;font-size:19px;color:var(--nude)}
.ft-head>wbr{display:none}
.ft-head span{font-family:var(--jp);font-style:normal;font-size:12px;font-weight:700;color:var(--on-d-m)}
.ft-group ul{display:grid;gap:4px;margin-top:12px}
.ft-group a{font-size:14px;line-height:2;text-decoration:none;color:var(--on-d)}
.ft-group a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft-info{padding:28px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-dl{display:flex;flex-wrap:wrap;gap:6px 32px;font-size:13px;line-height:1.9}
.ft-dl div{display:flex;gap:10px}
.ft-dl dt{color:var(--on-d-m)}
.ft-legal{margin-top:10px;font-size:12px;color:var(--on-d-m)}
.ft-bottom{display:flex;justify-content:space-between;gap:16px;padding-top:24px;font-size:12px;color:var(--on-d-m)}
.ft-policy{color:var(--on-d-m)}

/* ---------- 8. 動き ---------- */
/* スクロールで現れる（うっすら見える状態から。1回だけ） */
.js .reveal{opacity:.6;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
/* アーチの写真: 下から窓が開く（隠すのは子の枠） */
.js .arch-rv.reveal{opacity:1;transform:none}
.js .arch-rv.reveal .rv-film{clip-path:inset(100% 0 0 0 round 999px 999px 0 0)}
.js .arch-rv.reveal.in .rv-film{clip-path:inset(0 0 0 0 round 0);transition:clip-path 1.2s var(--ease) .05s}
.js .arch-rv.reveal img{transform:scale(1.1)}
.js .arch-rv.reveal.in img{transform:none;transition:transform 1.8s var(--ease) .05s}
/* 在庫のゲージ: 0 から満ちる */
.js .gauge-rv.reveal{opacity:1;transform:none}
.js .gauge-rv.reveal .hc-bar i,.js .gauge-rv.reveal .gg i{transform:scaleX(0);transform-origin:left}
.js .gauge-rv.reveal.in .hc-bar i,.js .gauge-rv.reveal.in .gg i{transform:none;transition:transform 1s var(--ease) .2s}
/* 60分の帯: 左から順に伸びる */
.js .tl60.reveal{opacity:1;transform:none}
.js .tl60.reveal .tl-seg{transform:scaleX(0);transform-origin:left}
.js .tl60.reveal.in .tl-seg{animation:grow .5s var(--ease) both}
.js .tl60.reveal.in .tl-seg:nth-child(2){animation-delay:.25s}
.js .tl60.reveal.in .tl-seg:nth-child(3){animation-delay:.5s}
.js .tl60.reveal.in .tl-seg:nth-child(4){animation-delay:.75s}
.js .tl60.reveal.in .tl-seg:nth-child(5){animation-delay:1s}
.js .tl60.reveal.in .tl-seg:nth-child(6){animation-delay:1.2s}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ファーストビュー: 読み込み時に1回（窓が開く → 棚板 → 棚のカード → 文字盤の針が一周） */
.js .hero-window .hw-film{clip-path:inset(100% 0 0 0)}
.js .hero-window.is-ready .hw-film{animation:archUp 1.2s var(--ease) .05s both}
.js .hero-window.is-ready .hw-film img{animation:settle 2s var(--ease) .05s both}
.js .hero-window::before{opacity:0}
.js .hero-window.is-ready::before{animation:fadeIn .8s .9s both}
.js .hero-board{transform:scaleX(0)}
.js .hero-window.is-ready~.hero-board{transform:none;transition:transform .8s var(--ease) .5s}
.js .hero-card{opacity:0}
.js .hero-window.is-ready~.hc-stock{animation:cardIn .7s var(--ease) 1s both}
.js .hero-window.is-ready~.hc-dial{animation:cardIn .7s var(--ease) 1.25s both}
.js .hc-stock .hc-bar i{transform:scaleX(0);transform-origin:left}
.js .hero-window.is-ready~.hc-stock .hc-bar i{transform:none;transition:transform 1s var(--ease) 1.5s}
.js .hero-window.is-ready~.hc-dial .dl-hand{animation:sweep 3.2s var(--ease) 1.6s both}
.js .hc-dial .dl-seg{stroke-dashoffset:var(--len)}
.js .hero-window.is-ready~.hc-dial .dl-seg{transition:stroke-dashoffset .5s linear;stroke-dashoffset:0}
.js .hero-window.is-ready~.hc-dial .s1{transition-delay:1.6s}
.js .hero-window.is-ready~.hc-dial .s2{transition-delay:2.1s}
.js .hero-window.is-ready~.hc-dial .s3{transition-delay:2.6s;transition-duration:1s}
.js .hero-window.is-ready~.hc-dial .s4{transition-delay:3.6s}
.js .hero-window.is-ready~.hc-dial .s5{transition-delay:4.1s;transition-duration:.25s}
.js .hero-window.is-ready~.hc-dial .s6{transition-delay:4.35s;transition-duration:.25s}
.js .hero-text>*{animation:heroIn .8s var(--ease) both}
.js .hero-text>:nth-child(2){animation-delay:.1s}
.js .hero-text>:nth-child(3){animation-delay:.2s}
.js .hero-text>:nth-child(4){animation-delay:.3s}
.js .hero-text>:nth-child(5){animation-delay:.4s}
.js .hero-vert{animation:fadeIn 1.2s 1.4s both}
@keyframes archUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ページを開くときの見せ方（通常版） */
.nav-loader{position:fixed;left:0;top:0;z-index:400;width:0;height:3px;background:var(--accent);opacity:0;pointer-events:none}
.js main,.js .footer{animation:pageIn .5s ease-out backwards}
html.is-leaving main,html.is-leaving .footer{opacity:0;transition:opacity .12s}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal *{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .hero-window .hw-film{clip-path:none}
  .js .hero-window::before,.js .hero-card{opacity:1}
  .js .hero-board,.js .hc-stock .hc-bar i{transform:none}
  .js .hc-dial .dl-seg{stroke-dashoffset:0}
}

/* ---------- 9. 画面幅ごとの調整 ---------- */
@media (min-width:1920px){
  :root{--max:1320px}
}

/* 1240px 以下: ナビを三本線のメニューに */
@media (max-width:1240px){
  :root{--hd:68px}
  .site-header,.site-header.is-scrolled{height:68px}
  .hd-util{display:none}
  .hd-call{display:grid;place-items:center;margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--rose);color:#fff}
  .hd-call svg{width:19px;height:19px;fill:currentColor}
  .menu-toggle{display:grid;align-content:center;justify-items:center;gap:7px;width:44px;height:44px;padding:0;border:1px solid var(--line-s);border-radius:50%;background:#fff;cursor:pointer}
  .mt-line{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}
  .site-header.is-open .mt-line:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
  .site-header.is-open .mt-line:nth-child(2){transform:translateY(-4.25px) rotate(-45deg)}
  .nav{position:fixed;left:0;right:0;top:68px;bottom:0;margin:0;padding:20px var(--gut) calc(40px + env(safe-area-inset-bottom));background:var(--white);color:var(--ink);overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
  .site-header.is-open .nav{visibility:visible;opacity:1}
  .nav-list{display:grid;gap:0}
  .nav-list a{grid-template-columns:1fr auto;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);text-align:left}
  .nav-list a::after{left:auto;right:-14px;top:50%;bottom:auto;margin:-3px 0 0}
  .nav-ja{grid-row:1;font-family:var(--mincho);font-size:19px}
  .nav-en{grid-row:1;font-size:16px}
  .nav-list a[aria-current="page"] .nav-ja{color:var(--rose)}
  .site-header.is-open .nav-list li{animation:menuIn .4s var(--ease) both}
  .site-header.is-open .nav-list li:nth-child(2){animation-delay:.04s}
  .site-header.is-open .nav-list li:nth-child(3){animation-delay:.08s}
  .site-header.is-open .nav-list li:nth-child(4){animation-delay:.12s}
  .site-header.is-open .nav-list li:nth-child(5){animation-delay:.16s}
  .site-header.is-open .nav-list li:nth-child(6){animation-delay:.2s}
  .nav-extra{display:grid;gap:18px;margin-top:28px}
  .nav-tel{display:grid;padding:20px;border-radius:var(--r);background:var(--mist);text-decoration:none;line-height:1.2}
  .nav-tel-k{font-size:12px;font-weight:700;color:var(--rose)}
  .nav-tel-n{margin-top:8px;font-family:var(--mono);font-size:28px}
  .nav-tel-s{margin-top:8px;font-size:12px;line-height:1.6;color:var(--ink-m)}
  .nav-extra .btn{width:100%}
  .nav-sub{display:flex;flex-wrap:wrap;gap:8px 24px}
  .nav-sub a{font-size:13px;color:var(--ink-m);text-decoration:none}
  body.no-scroll{overflow:hidden}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* 1100px 以下: 列を減らす */
@media (max-width:1100px){
  .hero-entry{grid-template-columns:1fr}
  .pl-grid{grid-template-columns:1fr;gap:20px;max-width:640px;margin-inline:auto}
  .pl-link{grid-template-columns:1fr 1fr;gap:20px;padding:4px 0}
  .pl-to::after{clip-path:polygon(0 44%,92% 44%,92% 0,100% 50%,92% 100%,92% 56%,0 56%)}
  .promise-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
  .pr-arch{height:150px;max-width:260px}
  .tl-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .mo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mo-steps li:nth-child(2)::after{display:none}
  .price-grid,.faq-ex-grid{grid-template-columns:1fr;gap:36px}
  .profile-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:40px}
  .cta-inner{grid-template-columns:1fr;gap:40px}
  .cta-card{max-width:560px}
}

/* 900px 以下: タブレットの縦・スマホ。ファーストビューは窓が上 */
@media (max-width:900px){
  br.sp{display:inline}
  .hero::before{display:none}
  .hero-inner{grid-template-columns:1fr;gap:28px}
  .hero-visual{order:-1;max-width:560px;width:100%;margin-inline:auto;padding:0 0 26px}
  .hero-window{max-width:none;margin:0 14% 0 18%}
  .hero-vert{display:none}
  .hc-stock{bottom:44px;width:min(260px,58%)}
  .hc-dial{top:auto;bottom:44%;right:0;width:118px}
  .hero-title{margin-top:18px}
  .hero-entry{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keys-list{grid-template-columns:1fr;border-top:0}
  .keys-list li,.keys-list li+li{padding:18px 0;border-left:0;border-top:1px solid var(--line-s)}
  .worry-grid{grid-template-columns:1fr}
  .sh-split{grid-template-columns:1fr;gap:0}
  .sh-split .sh-lead{margin-top:20px}
  .sec-more{text-align:left}
  .ways-tabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .wt{flex:none}
  .profile-grid{grid-template-columns:1fr}
  .name-card{max-width:320px}
  .ft-top{grid-template-columns:1fr}
  .ft-tel{text-align:left}
  .site-header{background:rgba(255,255,255,.98)}
  .sp-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1.4fr;padding-bottom:env(safe-area-inset-bottom);background:var(--ink);transform:translateY(110%);transition:transform .3s var(--ease)}
  .sp-bar.is-show{transform:none}
  .sp-bar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;font-weight:700;font-size:15px;text-decoration:none;color:#fff}
  .sp-bar svg{width:18px;height:18px}
  .sp-bar-tel svg{fill:currentColor}
  .sp-bar-main{background:var(--rose)}
  .sp-bar-main svg{fill:none;stroke:#fff;stroke-width:1.9}
  body.has-spbar .footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* 640px 以下: 縦積み */
@media (max-width:640px){
  .hero-entry{grid-template-columns:1fr}
  .hero-window{margin:0 10% 0 16%}
  .hc-stock{left:0;width:min(232px,64%);padding:12px 14px 10px}
  .hc-dial{width:100px;padding:10px}
  .hc-dial-k{font-size:10px}
  .wc-list li{grid-template-columns:1fr;gap:4px}
  .wr-a{padding-left:30px}
  .pl-link{grid-template-columns:1fr;gap:12px}
  .pl-link p{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left}
  .tl-bar,.tl-scale{display:none}
  .tl-steps{grid-template-columns:1fr;gap:0}
  .tl-steps li{grid-template-columns:64px minmax(0,1fr);gap:2px 12px;padding:12px 0}
  .tl-steps .tl-min{grid-row:1 / span 2}
  .mo-steps{grid-template-columns:1fr;gap:12px}
  .mo-steps li::after{display:none}
  .promise-list{grid-template-columns:1fr;gap:36px}
  .promise-list li{grid-template-columns:110px minmax(0,1fr);gap:4px 18px;align-items:start}
  .pr-arch{grid-row:1 / span 2;height:120px}
  .promise-list h3{margin-top:0}
  .menu-list li{grid-template-columns:1fr}
  .mn-yen{font-size:26px}
  .faq summary{grid-template-columns:30px minmax(0,1fr) 22px;gap:12px;font-size:15px}
  .fq-q{width:30px;height:30px;font-size:16px}
  .fq-a p{padding:0 0 22px 42px}
  .pf-dl div{grid-template-columns:96px minmax(0,1fr);gap:10px}
  .cta-arch{display:none}
  .ft-nav{grid-template-columns:1fr 1fr;gap:24px}
  .ft-dl{display:grid;gap:4px}
  .ft-bottom{flex-direction:column-reverse}
}

/* 400px 以下: 余白を詰める */
@media (max-width:400px){
  :root{--gut:16px}
  .hero-window{margin:0 8% 0 14%}
  .hc-stock{width:min(210px,66%)}
  .hc-name{font-size:11px}
  .worry-col{padding:22px 16px}
  .ways-panel{padding:22px 16px}
  .pl-body{padding:24px 18px 28px}
  .btn{padding-left:20px}
  .promise-list li{grid-template-columns:88px minmax(0,1fr)}
  .pr-arch{height:100px}
  .ft-nav{grid-template-columns:1fr}
}

/* =========================================================
   10. 下層ページの共通部品（見出し帯・パンくず・目次・次に見るページ）
   ========================================================= */
.page-hero{position:relative;padding:calc(var(--hd) + clamp(36px,4.6vw,72px)) 0 clamp(56px,6vw,88px);background:var(--white);overflow:hidden}
.page-hero::before{content:attr(data-en);position:absolute;right:-.04em;bottom:-.24em;font-family:var(--en);font-style:italic;font-weight:500;font-size:clamp(90px,14vw,220px);line-height:1;letter-spacing:-.01em;color:var(--blush);white-space:nowrap;pointer-events:none}
.page-hero .container{position:relative}
.ph-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.crumb{display:flex;flex-wrap:wrap;gap:4px 0;margin-bottom:26px;font-size:12px;line-height:1.6;color:var(--ink-m)}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"";width:5px;height:5px;margin:0 12px 0 10px;border:solid var(--nude-d);border-width:1px 1px 0 0;transform:rotate(45deg)}
.crumb a{color:var(--ink-m);text-decoration:none}
.crumb a:hover{color:var(--rose);text-decoration:underline}
.ph-title{font-family:var(--mincho);font-weight:700;font-size:clamp(32px,4vw,54px);line-height:1.45;letter-spacing:.06em}
.ph-copy{margin-top:14px;font-family:var(--mincho);font-weight:500;font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--rose)}
.ph-lead{margin-top:20px;max-width:36em;font-size:clamp(15px,1.15vw,16.5px);line-height:2.05}
.ph-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ph-tags>wbr{display:none}
.ph-photo{position:relative}
.ph-photo::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-12px;height:10px;border-radius:2px;background:linear-gradient(180deg,#E9D8D0 0,#E9D8D0 3px,#D8BFB3 3px)}
.ph-arch{aspect-ratio:4/3.4}
.js .page-hero .ph-text>*{animation:heroIn .7s var(--ease) both}
.js .page-hero .ph-text>:nth-child(2){animation-delay:.06s}
.js .page-hero .ph-text>:nth-child(3){animation-delay:.12s}
.js .page-hero .ph-text>:nth-child(4){animation-delay:.18s}
.js .page-hero .ph-text>:nth-child(5){animation-delay:.24s}
.js .ph-arch{animation:archUp 1.1s var(--ease) .1s both}
.js .ph-arch img{animation:settle 1.8s var(--ease) .1s both}

.local-nav{position:sticky;top:var(--hd);z-index:50;background:rgba(255,255,255,.97);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:top .25s var(--ease)}
.ln-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ln-list::-webkit-scrollbar{display:none}
.ln-list a{position:relative;display:block;padding:14px 16px;font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap;text-decoration:none;color:var(--ink-m);transition:color .2s}
.ln-list a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--rose);transform:scaleX(0);transition:transform .25s var(--ease)}
.ln-list a:hover,.ln-list a[aria-current]{color:var(--ink)}
.ln-list a[aria-current]::after{transform:none}
html.hd-ready.hd-hide .site-header{transform:translateY(-100%)}
html.hd-ready .site-header{transition:height .25s var(--ease),box-shadow .25s,transform .3s var(--ease)}
html.hd-hide .local-nav{top:0}

.next{padding:clamp(48px,5vw,72px) 0;background:var(--white);border-top:1px solid var(--line)}
.next-k{font-family:var(--mincho);font-weight:700;font-size:18px}
.next-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.next-list a{position:relative;display:grid;gap:2px;padding:20px 56px 20px 22px;border:1px solid var(--line-s);border-radius:var(--r);text-decoration:none;transition:border-color .2s,background-color .2s}
.next-list a>wbr{display:none}
.next-list a::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;margin-top:-4px;border:solid var(--rose);border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .2s var(--ease)}
.next-list a:hover{border-color:var(--rose);background:var(--mist)}
.next-list a:hover::after{transform:translateX(3px) rotate(45deg)}
.nx-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:15px;color:var(--euc-d)}
.nx-t{font-weight:700;font-size:16px;line-height:1.5}

.bg-ink{background:var(--ink);color:var(--on-d)}

/* 写真の帯（高さを抑えた、上がアーチの帯） */
.photo-band{margin:0;padding:0 var(--gut)}
.pb-frame{max-width:1280px;margin-inline:auto;aspect-ratio:3/1;overflow:hidden;border-radius:240px 240px var(--r) var(--r)}
.pb-frame img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   11. エステティック施術（treatment）
   ========================================================= */
.tm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:52px}
.tm-card{position:relative;padding:clamp(28px,3.4vw,48px);border-radius:var(--r);background:var(--mist);overflow:hidden}
.tm-card::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:240px;border:1px solid var(--nude);border-bottom:0;border-radius:999px 999px 0 0;opacity:.8}
.tm-card-body{background:var(--euc-l)}
.tm-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:20px;color:var(--rose)}
.tm-card h3{margin-top:4px;font-family:var(--mincho);font-size:clamp(24px,2.4vw,32px)}
.tm-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--line-s)}
.tm-price>wbr{display:none}
.tm-price .num{font-family:var(--en);font-weight:600;font-size:clamp(36px,3.6vw,48px);line-height:1}
.tm-u{font-size:14px;font-weight:700}
.tm-time{margin-left:auto;padding:2px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:700}
.tm-text{margin-top:18px;font-size:15.5px;line-height:2}
.tm-for{display:grid;gap:6px;margin-top:16px}
.tm-for li{position:relative;padding-left:22px;font-size:14px;line-height:1.85}
.tm-for li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:11px;border-radius:5px 5px 1px 1px;background:var(--rose)}
.tm-note{margin-top:20px}

/* 60分の文字盤 */
.dial-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:56px}
.dial-face{position:relative;max-width:440px;width:100%;margin-inline:auto;padding:22px;border-radius:50%;background:#fff;box-shadow:0 30px 60px -40px rgba(31,59,53,.5)}
.dial-face svg{width:100%;height:auto;overflow:visible}
.dial-face .dl-track{stroke-width:9}
.dial-face .dl-seg{stroke-width:9;opacity:.35;transition:opacity .3s,stroke-width .3s}
.dial-face .dl-seg.is-cur{opacity:1;stroke-width:12}
.dl-lb{font-family:var(--mono);font-size:4.2px;fill:var(--ink-m)}
.dial-out{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.do-time{font-family:var(--en);font-weight:600;font-size:clamp(44px,5vw,64px);line-height:1;color:var(--ink)}
.do-name{margin-top:8px;font-family:var(--mincho);font-weight:700;font-size:clamp(14px,1.3vw,17px);color:var(--rose)}
.dial-steps{display:grid;gap:8px}
.dial-steps button{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;width:100%;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,background-color .2s}
.dial-steps button:hover{border-color:var(--euc)}
.dial-steps button[aria-pressed="true"]{border-color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
.ds-n{font-family:var(--en);font-style:italic;font-weight:600;font-size:22px;line-height:1.3;color:var(--euc-d)}
.dial-steps button[aria-pressed="true"] .ds-n{color:var(--rose)}
.ds-body{display:grid;gap:2px}
.ds-t{font-weight:700;font-size:16px;line-height:1.5}
.ds-t small{margin-left:10px;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ink-m)}
.ds-d{font-size:14px;line-height:1.8;color:var(--ink-m)}

/* ボディ */
.tb-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.tb-lead{font-size:16px;line-height:2.05}
.tb-steps{margin-top:24px;border-top:1px solid var(--line-s)}
.tb-steps li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.tb-k{font-family:var(--mincho);font-weight:700;font-size:16px;color:var(--euc-d)}
.tb-t{font-size:15px;line-height:1.95}
.tb-stop{display:inline-block;margin-top:22px;padding:10px 18px;border-radius:999px;background:var(--rose-l);color:var(--rose);font-size:14px;font-weight:700;line-height:1.7}

/* ホームケア */
.th-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.th-list{display:grid;gap:14px}
.th-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 16px;padding:22px 24px;border-radius:var(--r);background:#fff}
.th-list li>wbr{display:none}
.th-n{grid-row:1 / span 2;font-family:var(--en);font-style:italic;font-weight:600;font-size:28px;line-height:1.1;color:var(--rose)}
.th-list b{font-family:var(--mincho);font-size:18px;line-height:1.5}
.th-list span:not(.th-n){font-size:14.5px;line-height:1.95}

/* 安心のために */
.sf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:52px}
.sf-col{padding:clamp(26px,3vw,40px);border:1px solid var(--line-s);border-radius:var(--r)}
.sf-col-no{background:var(--mist);border-color:var(--mist)}
.sf-k{display:flex;align-items:center;gap:12px;font-family:var(--mincho);font-weight:700;font-size:20px}
.sf-k>wbr{display:none}
.sf-mark{position:relative;flex:none;width:26px;height:26px;border-radius:50%}
.sf-do{background:var(--euc)}
.sf-do::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sf-no{background:var(--rose)}
.sf-no::before,.sf-no::after{content:"";position:absolute;left:6px;right:6px;top:12px;height:2px;background:#fff;transform:rotate(45deg)}
.sf-no::after{transform:rotate(-45deg)}
.sf-list{margin-top:16px}
.sf-list li{position:relative;padding:12px 0 12px 22px;border-bottom:1px dashed var(--line-s);font-size:15px;line-height:1.85}
.sf-list li::before{content:"";position:absolute;left:2px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--euc)}
.sf-col-no .sf-list li::before{background:var(--rose)}
.sf-note{margin-top:16px;font-size:14px;font-weight:700;color:var(--rose)}

/* 施術の場所 */
.pc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:48px}
.pc-card{padding:clamp(26px,3vw,40px);border-radius:var(--r);background:#fff}
.pc-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:18px;color:var(--euc-d)}
.pc-card h3{margin-top:4px;font-family:var(--mincho);font-size:22px}
.pc-card p:not(.pc-en){margin-top:12px;font-size:15px;line-height:2}
.pc-card .link-arrow{margin-top:18px}

/* =========================================================
   12. 美容商材の管理（stockcare）
   ========================================================= */
.ph-ledger{padding:clamp(22px,2.6vw,32px);border-radius:var(--r);background:var(--blush)}
.ph-ledger div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-s)}
.ph-ledger div:first-child{padding-top:0}
.ph-ledger div>wbr{display:none}
.ph-ledger dt{font-size:14px;font-weight:700}
.ph-ledger dd{font-weight:700;font-size:14px;white-space:nowrap}
.ph-ledger dd .num{font-family:var(--en);font-weight:600;font-size:28px}
.ph-ledger-note{margin-top:14px;font-size:13px;line-height:1.8;color:var(--ink-m)}

.sc-worry{padding:clamp(40px,4vw,56px) 0 0}
.sw-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sw-list li{display:grid;gap:6px;padding:20px 22px;border-left:2px solid var(--rose);background:var(--mist)}
.sw-list li>wbr{display:none}
.sw-k{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--rose)}
.sw-t{font-weight:700;font-size:16px;line-height:1.7}

.sheet{margin-top:48px;padding:clamp(22px,3vw,40px);border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 30px 60px -48px rgba(31,59,53,.6)}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.sheet-head>wbr{display:none}
.sh-t{font-family:var(--mincho);font-weight:700;font-size:20px}
.sh-d{font-family:var(--mono);font-size:12px;color:var(--ink-m)}
.sheet-scroll{overflow-x:auto}
.sheet-table{width:100%;min-width:680px}
.sheet-table th,.sheet-table td{padding:16px 12px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6;text-align:left;vertical-align:middle}
.sheet-table thead th{padding-top:12px;padding-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-m)}
.sheet-table tbody th{font-weight:700}
.sheet-table td .num{font-size:16px;margin-right:2px}
.gg-cell{width:24%}
.gg{position:relative;display:block;height:8px;border-radius:4px;background:var(--mist)}
.gg i{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:4px;background:var(--euc)}
.gg b{position:absolute;top:-4px;bottom:-4px;left:var(--p);width:2px;background:var(--ink)}
.sheet-table tr:has(.st-order) .gg i{background:var(--rose)}
.sheet-table tr:has(.st-first) .gg i{background:#D3B47A}
.sheet-table tr:has(.st-order){background:#FDF6F7}
.sheet-table .hc-st{font-size:12px;padding:3px 12px}
.sheet-legend{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px;font-size:13px;line-height:1.7;color:var(--ink-m)}
.sheet-legend li{display:flex;align-items:center;gap:8px}
.sheet-legend li>wbr,.sheet-legend>wbr{display:none}
.sheet-legend .hc-st{font-size:11px}
.lg-bar{display:inline-block;width:2px;height:14px;background:var(--ink)}
.sheet-note{margin-top:14px}

/* 月のサイクル（円の上に4つの段） */
.cy-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.cy-ring{position:relative;aspect-ratio:1;max-width:560px;width:100%;margin-inline:auto}
.cy-ring::before{content:"";position:absolute;inset:11%;border:1.5px dashed var(--nude-d);border-radius:50%}
.cy-list li{position:absolute;display:grid;justify-items:center;gap:2px;width:36%;padding:16px 14px;border-radius:var(--r);background:#fff;text-align:center;box-shadow:0 18px 36px -28px rgba(31,59,53,.55)}
.cy-list li>wbr{display:none}
.cy-1{left:32%;top:0}
.cy-2{right:0;top:34%}
.cy-3{left:32%;bottom:0}
.cy-4{left:0;top:34%}
.cy-when{font-family:var(--mono);font-size:12px;color:var(--rose)}
.cy-list b{font-family:var(--mincho);font-size:19px;line-height:1.4}
.cy-d{font-size:13px;line-height:1.75;color:var(--ink-m)}
.cy-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;line-height:1}
.cy-center span{font-family:var(--en);font-style:italic;font-weight:600;font-size:clamp(40px,4vw,60px);color:var(--rose)}
.cy-center small{font-family:var(--en);font-style:italic;font-size:16px;color:var(--ink-m)}
.js .cy-ring.reveal{opacity:1;transform:none}
.js .cy-ring.reveal li{opacity:0;transform:scale(.92)}
.js .cy-ring.reveal.in li{animation:pop .5s var(--ease) both}
.js .cy-ring.reveal.in .cy-2{animation-delay:.25s}
.js .cy-ring.reveal.in .cy-3{animation-delay:.5s}
.js .cy-ring.reveal.in .cy-4{animation-delay:.75s}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* うかがうこと */
.sp-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:52px}
.sp-list li{display:grid;align-content:start;gap:8px;padding:26px 22px;border-top:2px solid var(--euc);background:var(--mist)}
.sp-list li>wbr{display:none}
.sp-n{font-family:var(--en);font-style:italic;font-weight:600;font-size:24px;line-height:1;color:var(--rose)}
.sp-list b{font-family:var(--mincho);font-size:18px;line-height:1.55}
.sp-list span:not(.sp-n){font-size:14px;line-height:1.9;color:var(--ink-m)}
.sp-rule{margin-top:28px;padding:16px 22px;border-radius:var(--r);background:var(--rose-l);color:var(--rose);font-size:15px;font-weight:700;line-height:1.85;text-align:center}

/* 提案・販売サポート／施術の応援 */
.as-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.as-card{padding:clamp(28px,3.4vw,48px);border-radius:var(--r);background:#fff}
.as-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:20px;color:var(--rose)}
.as-t{margin-top:4px;font-family:var(--mincho);font-size:clamp(24px,2.4vw,30px)}
.as-price{margin-top:12px;padding-bottom:16px;border-bottom:1px solid var(--line-s);font-size:15px;font-weight:700}
.as-price .num{font-family:var(--en);font-weight:600;font-size:40px;line-height:1}
.as-price small{margin-left:8px;font-size:13px;color:var(--ink-m)}
.as-strong{font-family:var(--mincho);font-size:26px;color:var(--rose)}
.as-text{margin-top:16px;font-size:15px;line-height:2}
.as-for{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.as-for>wbr{display:none}
.as-for li{padding:4px 14px;border-radius:999px;background:var(--mist);font-size:13px;font-weight:700}

/* お取引の形 */
.tm2-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.terms{border-top:1.5px solid var(--ink)}
.terms div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.terms dt{font-size:14px;font-weight:700;color:var(--euc-d)}
.terms dd{font-size:15px;line-height:1.95}

/* =========================================================
   13. 料金（price）
   ========================================================= */
.pm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:52px}
.pm-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px}
.pm-head>wbr{display:none}
.pm-for{font-size:13px;font-weight:700;color:var(--ink-m)}
.pm-col .link-arrow{margin-top:20px}
.pm-notes{margin-top:36px;padding:20px 24px;border-radius:var(--r);background:var(--mist)}
.pm-notes li{position:relative;padding:4px 0 4px 18px;font-size:14px;line-height:1.85}
.pm-notes li::before{content:"※";position:absolute;left:0;color:var(--rose)}
.ex-flag{color:var(--rose)}
.rc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:48px}
.receipt{position:relative;padding:clamp(26px,3vw,40px) clamp(22px,3vw,40px) clamp(30px,3.4vw,44px);background:#fff;border-radius:var(--r) var(--r) 0 0;filter:drop-shadow(0 18px 24px rgba(31,59,53,.08))}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:radial-gradient(circle at 10px 0,transparent 0 6px,#fff 6.5px) 0 0/20px 10px repeat-x}
.rc-t{margin-top:12px;font-family:var(--mincho);font-size:22px;line-height:1.5}
.rc-t small{display:block;font-family:var(--jp);font-size:14px;font-weight:500;color:var(--ink-m)}
.rc-table{width:100%;margin-top:18px;border-top:1px dashed var(--line-s)}
.rc-table th,.rc-table td{padding:14px 0;border-bottom:1px dashed var(--line-s);font-size:15px;line-height:1.5;text-align:left;vertical-align:top}
.rc-table th{font-weight:700}
.rc-table th small{display:block;margin-top:2px;font-weight:400;font-size:13px;color:var(--ink-m)}
.rc-table td{text-align:right;white-space:nowrap}
.rc-table td .num{font-size:18px}
.rc-table tfoot th,.rc-table tfoot td{padding-top:18px;border-bottom:0;border-top:1.5px solid var(--ink)}
.rc-table tfoot td .num{font-family:var(--en);font-weight:600;font-size:34px;color:var(--rose)}
.pay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:48px}
.pay-col{padding:clamp(24px,3vw,36px);border:1px solid var(--line-s);border-radius:var(--r)}
.pay-dl{margin-top:14px}
.pay-dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.pay-dl div:last-child{border-bottom:0}
.pay-dl dt{font-size:14px;font-weight:700;color:var(--euc-d)}
.pay-dl dd{font-size:15px;line-height:1.9}
.pay-free{margin-top:36px;text-align:center}
.pay-free span{display:inline-block;padding:12px 28px;border-radius:999px;background:var(--rose);color:#fff;font-weight:700;font-size:16px}

/* =========================================================
   14. R salonについて（about）
   ========================================================= */
.ab-hero{padding-bottom:clamp(64px,7vw,104px);background:var(--mist)}
.ab-hero::before{color:#fff}
.ab-title{font-size:clamp(34px,4.8vw,64px);line-height:1.5}
.ab-small{display:block;margin-bottom:12px;font-family:var(--jp);font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--ink-m)}
.ab-sign{margin-top:28px;font-size:14px;color:var(--ink-m)}
.ab-sign b{margin-left:4px;font-family:var(--mincho);font-size:20px;letter-spacing:.2em;color:var(--ink)}
.ao-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.ao-photo{margin:0;max-width:440px}
.ao-arch{aspect-ratio:4/5}
.ao-r{display:grid;gap:14px;margin-top:32px}
.ao-r li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 20px;align-items:center;padding:18px 22px;border-radius:var(--r);background:var(--blush)}
.ao-r li>wbr{display:none}
.ao-letter{grid-row:1 / span 2;font-family:var(--en);font-style:italic;font-weight:600;font-size:64px;line-height:1;color:var(--rose);text-align:center}
.ao-word{font-family:var(--en);font-style:italic;font-weight:600;font-size:24px;line-height:1.2}
.ao-text{font-size:15px;line-height:1.8}
.ao-purpose{margin-top:28px;font-family:var(--mincho);font-weight:500;font-size:clamp(16px,1.4vw,18px);line-height:2.1}
.al-grid{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:24px;align-items:center;margin-top:52px}
.al-col{padding:clamp(26px,3vw,40px);border:1px solid rgba(232,199,187,.3);border-radius:999px 999px var(--r) var(--r);text-align:center}
.al-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:20px;color:var(--nude)}
.al-t{margin-top:12px;font-family:var(--mincho);font-weight:700;font-size:clamp(18px,1.8vw,23px);line-height:1.75;color:#fff}
.al-d{margin-top:12px;font-size:14px;line-height:1.9;color:var(--on-d-m)}
.al-mid{position:relative;height:80px}
.al-mid span,.al-mid::before,.al-mid::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--nude)}
.al-mid::before{top:30px}
.al-mid::after{top:50px}
.al-mid span{top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--rose)}
.al-sum{margin-top:40px;text-align:center;font-size:15px;line-height:2;color:var(--on-d)}
.pv2-list{margin-top:52px;border-top:1px solid var(--line-s)}
.pv2-list li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line-s)}
.pv2-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:var(--rose)}
.pv2-en .num{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--ink-m)}
.pv2-body h3{font-family:var(--mincho);font-size:clamp(20px,1.8vw,24px)}
.pv2-body p{margin-top:12px;font-size:15px;line-height:2.05}
.pv2-why{padding:12px 16px;border-radius:var(--r);background:var(--mist);font-size:14px!important;line-height:1.9!important}
.pv2-why b{margin-right:12px;color:var(--euc-d)}
.ar-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.ar-body p{font-size:16px;line-height:2.05}
.ar-body p+p{margin-top:14px}
.rep-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.ab-rep .sh h2{letter-spacing:.2em}

/* =========================================================
   15. ご依頼の流れ・よくある質問（flow）
   ========================================================= */
.fl-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.fl-head{position:sticky;top:calc(var(--hd) + 80px)}
.fl-free{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:14px;font-weight:700}
.fl-free>wbr{display:none}
.fl-free-k{padding:4px 14px;border-radius:999px;background:var(--rose);color:#fff}
.fl-track{position:relative}
.fl-list{position:relative}
.fl-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;padding-bottom:36px}
.fl-step:last-child{padding-bottom:0}
.fl-step::before{content:"";position:absolute;left:31px;top:64px;bottom:0;width:1.5px;background:var(--line-s)}
.fl-step:last-child::before{display:none}
.fl-n{display:grid;place-items:center;width:64px;height:76px;border:1.5px solid var(--euc);border-bottom:0;border-radius:999px 999px 0 0;background:#fff;font-size:20px;color:var(--euc-d)}
.fl-free-step .fl-n{border-color:var(--rose);color:var(--rose)}
.fl-body{padding:6px 0 0}
.fl-body h3{font-family:var(--mincho);font-size:22px;line-height:1.5}
.fl-body p{margin-top:6px;font-size:15.5px;line-height:1.95}
.fl-body .fl-note{font-size:13.5px;color:var(--ink-m)}

.fq-sec{padding:var(--sec-l) 0;background:var(--white)}
.fq-find{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 20px;align-items:center;max-width:860px;margin:44px auto 0;padding:clamp(20px,2.6vw,30px);border-radius:var(--r);background:var(--mist)}
.fq-find-k{font-weight:700;font-size:15px}
.fq-find-box{position:relative}
.fq-find-box svg{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--ink-m);stroke-width:1.8}
.fq-find-box input{width:100%;min-height:52px;padding:0 16px 0 46px;border:1.5px solid var(--line-s);border-radius:999px;background:#fff;font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.fq-find-box input:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 3px rgba(178,74,98,.16)}
.fq-chips{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}
.fq-chips>wbr{display:none}
.fq-chips button{min-height:36px;padding:0 16px;border:1px solid var(--line-s);border-radius:999px;background:#fff;font-size:13px;font-weight:700;cursor:pointer}
.fq-chips button[aria-pressed="true"]{border-color:var(--rose);background:var(--rose);color:#fff}
.fq-find-res{grid-column:1 / -1;font-size:14px;font-weight:700;color:var(--rose)}
.fq-find-res:empty{display:none}
.fq-body{margin-top:48px}
.fq-empty{max-width:860px;margin:0 auto 24px;padding:18px 22px;border-radius:var(--r);background:var(--rose-l);font-size:15px;line-height:1.9}
.fq-empty a{color:var(--rose);font-weight:700}
.fq-cat{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);padding:36px 0;border-top:1px solid var(--line)}
.fq-cat:first-of-type{border-top:0}
.fq-cat-head{position:relative}
.fq-cat-no{font-size:13px;color:var(--rose)}
.fq-cat-head h3{margin-top:4px;font-family:var(--mincho);font-size:22px;line-height:1.5}
.fq-cat-count{margin-top:4px;font-size:13px;color:var(--ink-m)}
.fq-body .faq details.is-hit summary{color:var(--rose)}

/* =========================================================
   16. 会社概要（company）
   ========================================================= */
.co-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.co-h{font-family:var(--mincho);font-size:24px}
.co-src{margin-top:14px;font-size:13px;line-height:1.8;color:var(--ink-m)}
.co-src b{display:block;color:var(--euc-d)}
.ledger{border-top:1.5px solid var(--ink)}
.ledger div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.ledger dt{font-size:14px;font-weight:700;color:var(--euc-d)}
.ledger dd{font-size:15.5px;line-height:1.95}
.ld-note{margin-top:4px;font-size:13px;line-height:1.8;color:var(--ink-m)}
.ld-tel{font-family:var(--mono);font-size:19px;color:var(--ink);text-decoration:none}
.cm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cm-card{position:relative;display:grid;gap:2px;padding:24px 64px 24px 24px;border-radius:var(--r);background:#fff;text-decoration:none;transition:box-shadow .2s}
.cm-card>wbr{display:none}
.cm-card:hover{box-shadow:0 18px 30px -24px rgba(31,59,53,.5)}
.cm-en{font-family:var(--en);font-style:italic;font-weight:600;font-size:16px;color:var(--rose)}
.cm-t{font-weight:700;font-size:17px}
.cm-d{font-size:13px;color:var(--ink-m)}
.cm-card svg{position:absolute;right:20px;top:50%;width:32px;height:32px;margin-top:-16px;padding:8px;border:1px solid var(--nude-d);border-radius:50%;fill:none;stroke:var(--rose);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   17. 下層ページの幅帯ごとの調整
   ========================================================= */
@media (max-width:1100px){
  .next-list{grid-template-columns:1fr 1fr}
  .dial-wrap{grid-template-columns:1fr;gap:36px}
  .dial-face{max-width:360px}
  .sp-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-list{grid-template-columns:1fr}
  .cy-grid,.tm2-grid,.tb-grid,.th-grid,.ar-grid,.fl-grid,.co-grid{grid-template-columns:1fr;gap:36px}
  .fl-head{position:static}
  .fq-cat{grid-template-columns:1fr;gap:12px}
  .cm-grid{grid-template-columns:1fr 1fr}
  .rep-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:40px}
}
@media (max-width:900px){
  .ph-grid{grid-template-columns:1fr;gap:36px}
  .ph-photo{max-width:520px}
  .ph-ledger{max-width:560px}
  .tm-grid,.sf-grid,.pc-grid,.as-grid,.pm-grid,.rc-grid,.pay-grid{grid-template-columns:1fr}
  .ao-grid{grid-template-columns:1fr;gap:40px}
  .ao-photo{max-width:380px}
  .al-grid{grid-template-columns:1fr;gap:12px}
  .al-mid{height:40px;width:80px;margin-inline:auto;transform:rotate(90deg)}
  .al-mid::before{top:10px}.al-mid::after{top:30px}
  .rep-grid{grid-template-columns:1fr}
  .pb-frame{aspect-ratio:16/9;border-radius:160px 160px var(--r) var(--r)}
  .cy-ring{max-width:520px}
}
@media (max-width:640px){
  .next-list,.cm-grid{grid-template-columns:1fr}
  .ln-list a{padding:13px 12px;font-size:13px}
  .tm-time{margin-left:0}
  .tb-steps li{grid-template-columns:1fr;gap:4px}
  .th-list li{grid-template-columns:40px minmax(0,1fr);padding:18px}
  .sp-list{grid-template-columns:1fr}
  .terms div,.pay-dl div,.ledger div{grid-template-columns:1fr;gap:4px}
  .pv2-list li{grid-template-columns:1fr;gap:12px}
  .ao-r li{grid-template-columns:56px minmax(0,1fr);padding:16px}
  .ao-letter{font-size:52px}
  .fq-find{grid-template-columns:1fr}
  .fq-chips{grid-column:1}
  .fl-step{grid-template-columns:52px minmax(0,1fr);gap:16px}
  .fl-n{width:52px;height:62px;font-size:17px}
  .fl-step::before{left:25px;top:62px}
  /* 月のサイクル: 円をやめて縦に並べる */
  .cy-ring{aspect-ratio:auto}
  .cy-ring::before,.cy-center{display:none}
  .cy-list{display:grid;gap:12px}
  .cy-list li{position:relative;inset:auto;width:auto;justify-items:start;text-align:left;grid-template-columns:72px minmax(0,1fr);gap:2px 14px;padding:16px 18px}
  .cy-when{grid-row:1 / span 2;align-self:center}
  .cy-d{grid-column:2}
  .sheet{margin-inline:calc(-1 * var(--gut));border-radius:0;border-left:0;border-right:0}
  .pb-frame{aspect-ratio:4/3;border-radius:120px 120px var(--r) var(--r)}
  .page-hero::before{font-size:96px}
}
@media (max-width:400px){
  .tm-card,.as-card,.sf-col,.pc-card,.pay-col{padding:22px 16px}
  .dial-steps button{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 14px}
}

/* =========================================================
   18. お問い合わせ（contact）
   ========================================================= */
/* 見出し帯: 2つの窓口 */
.ct-hero-grid{align-items:end}
.ct-ways{display:grid;gap:12px}
.ct-way{position:relative;display:grid;gap:6px;padding:20px 24px;background:#fff;border:1px solid var(--line-s);border-left:4px solid var(--rose);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.ct-way:hover{border-color:var(--rose);box-shadow:0 10px 24px -16px rgba(17,48,60,.4)}
.ct-way-form{border-left-color:var(--nude)}
.cw-k{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--rose)}
.cw-main{display:flex;align-items:center;gap:12px}
.cw-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--rose);color:#fff}
.ct-way-form .cw-icon{background:var(--nude);color:var(--ink)}
.cw-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.cw-main .num{font-size:30px;font-weight:600;letter-spacing:.03em}
.cw-text{font-weight:700;font-size:19px}
.cw-note{font-size:13px;line-height:1.75;color:var(--ink-m)}
.ct-way>wbr,.cw-main>wbr,.ct-steps li>wbr,.ct-kind>wbr,.ck-text>wbr,.ct-check>wbr,.ct-progress li>wbr,.ct-done-next li>wbr,.ct-hint-row>wbr{display:none}
.cw-arrow{position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;fill:none;stroke:var(--rose);stroke-width:1.8}

/* お問い合わせのあとの流れ */
.ct-flow{padding:clamp(36px,4vw,56px) 0;background:var(--ink);color:var(--on-d)}
.ct-flow-title{font-family:var(--mincho);font-size:18px;font-weight:700;letter-spacing:.08em;color:var(--nude)}
.ct-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px;counter-reset:none}
.ct-steps li{display:grid;align-content:start;gap:6px;padding-top:14px;border-top:3px solid rgba(255,255,255,.25)}
.ct-steps li:first-child{border-top-color:var(--nude)}
.cs2-n{font-family:var(--en);font-style:italic;font-size:30px;font-weight:600;line-height:1;color:var(--nude)}
.ct-steps b{font-size:16px;line-height:1.5;color:#fff}
.ct-steps span:not(.cs2-n){font-size:14px;line-height:1.8}

/* フォーム */
.ct-form-sec{padding:var(--sec-m) 0 var(--sec-l);background:var(--mist)}
.ct-form-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,80px);align-items:start}
.ct-aside{grid-column:1;grid-row:1}
.ct-aside-more{grid-column:1;grid-row:2}
.ct-form-wrap{grid-column:2;grid-row:1 / span 2}
.ct-tip{margin-top:24px;padding:20px 22px;background:#fff;border-top:3px solid var(--nude)}
.ct-tip-k{font-weight:700;font-size:15px;line-height:1.6}
.ct-tip ul{margin-top:10px}
.ct-tip li{position:relative;padding:5px 0 5px 18px;font-size:15px;line-height:1.6}
.ct-tip li::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--nude)}
.ct-tip-note{margin-top:10px;font-size:13px;line-height:1.8;color:var(--ink-m)}
.ct-aside-faq{margin-top:18px;font-size:14px;line-height:1.9;color:var(--ink-m)}
.ct-aside-faq a{color:var(--rose);font-weight:700;text-underline-offset:3px}

.ct-form-wrap{--err:#B3261E;--err-ink:#7A1A14;--err-bg:#FDF1F0;--err-bg2:#FFFBFA;--err-line:#E3A9A4;padding:clamp(24px,3.4vw,44px);background:#fff;border:1px solid var(--line);border-top:3px solid var(--rose)}
.ct-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:28px}
.ct-progress li{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:4px solid var(--line);font-size:14px;font-weight:700;color:var(--ink-m)}
.ct-progress .num{font-size:18px;line-height:1}
.ct-progress li[aria-current="step"]{border-top-color:var(--rose);color:var(--rose)}
[data-state="confirm"] .ct-progress li[data-step-mark="input"],[data-state="done"] .ct-progress li:not([aria-current]){border-top-color:var(--nude);color:var(--ink)}
.ct-demo{margin-bottom:20px;padding:12px 16px;background:var(--blush);border-left:3px solid var(--nude);font-size:14px;line-height:1.8}
.ct-req-note{margin-bottom:20px;font-size:14px;line-height:1.8;color:var(--ink-m)}
.ct-badge{display:inline-grid;place-items:center;height:20px;margin-left:10px;padding:0 7px;border:1px solid var(--line-s);font-size:12px;font-weight:700;line-height:1;letter-spacing:.04em;color:var(--ink-m);vertical-align:2px}
.ct-badge-req{border-color:var(--nude);background:var(--nude);color:var(--ink)}
.ct-req-note .ct-badge{margin:0 4px 0 0}
.ct-errsum{margin-bottom:24px;padding:16px 18px;background:var(--err-bg);border-left:4px solid var(--err);font-size:14px;line-height:1.8;color:var(--err-ink)}
.ct-errsum:focus{outline:2px solid var(--err);outline-offset:2px}
.ct-errsum p{font-weight:700}
.ct-errsum ul{margin-top:4px;padding-left:1.2em;list-style:disc}
.ct-errsum a{color:var(--err-ink);font-weight:700;text-underline-offset:3px}

.ct-field{margin:0 0 26px;padding:0;border:0;min-width:0}
.ct-label{display:block;margin-bottom:8px;padding:0;font-weight:700;font-size:16px;line-height:1.5}
.ct-input{display:block;width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--line-s);background:#fff;font:inherit;font-size:16px;line-height:1.6;color:var(--ink);transition:border-color .16s,box-shadow .16s;-webkit-appearance:none;appearance:none}
.ct-input:hover{border-color:#9FB0B7}
.ct-input:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 3px rgba(178,74,98,.18)}
.ct-input-tel{max-width:320px}
.ct-textarea{min-height:180px;resize:vertical}
.ct-input::placeholder{color:#8A989E;font-size:15px}
.ct-hint{margin-top:6px;font-size:13px;line-height:1.7;color:var(--ink-m)}
.ct-hint-row{display:flex;justify-content:space-between;gap:12px}
.ct-count{flex:none;font-family:var(--mono);font-size:12px}
.ct-error{display:flex;gap:6px;margin-top:6px;font-size:14px;font-weight:700;line-height:1.6;color:var(--err)}
.ct-error::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--err);color:#fff;font-size:12px;line-height:1}
.ct-error[hidden]{display:none}
.is-error .ct-input{border-color:var(--err);background:var(--err-bg2)}
.is-error .ct-input:focus{box-shadow:0 0 0 3px rgba(179,38,30,.16)}

.ct-kinds{display:grid;gap:10px}
.ct-kind{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:14px;min-height:60px;padding:12px 16px;border:1.5px solid var(--line-s);cursor:pointer;transition:border-color .16s,background-color .16s}
.ct-kind:hover{border-color:#9FB0B7}
.ct-kind input,.ct-check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ck-box{width:22px;height:22px;border:1.5px solid var(--line-s);border-radius:50%;background:#fff;transition:border-color .16s,box-shadow .16s}
.ck-text{display:grid;gap:2px;line-height:1.5}
.ck-text b{font-size:16px}
.ck-text small{font-size:13px;color:var(--ink-m)}
.ct-kind:has(input:checked){border-color:var(--rose);background:var(--mist)}
.ct-kind input:checked+.ck-box{border-color:var(--rose);box-shadow:inset 0 0 0 5px var(--rose)}
.ct-kind input:focus-visible+.ck-box,.ct-check input:focus-visible+.cc-box{outline:3px solid var(--rose);outline-offset:2px}
.is-error .ct-kind{border-color:var(--err-line)}

.ct-privacy{padding-top:6px}
.ct-policy{margin-bottom:14px;border:1px solid var(--line);background:var(--mist)}
.ct-policy summary{padding:12px 16px;font-size:14px;font-weight:700;cursor:pointer;color:var(--rose)}
.ct-policy-body{padding:0 16px 14px}
.ct-policy-body p{font-size:13px;line-height:1.85;color:var(--ink)}
.ct-policy-body p+p{margin-top:6px}
.ct-check{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;font-weight:700;font-size:15px;cursor:pointer}
.cc-box{position:relative;flex:none;width:24px;height:24px;border:1.5px solid var(--line-s);background:#fff}
.cc-box::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .16s}
.ct-check input:checked+.cc-box{border-color:var(--rose);background:var(--rose)}
.ct-check input:checked+.cc-box::after{transform:rotate(45deg) scale(1)}
.is-error .cc-box{border-color:var(--err)}
.ct-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ct-actions{margin-top:8px}
.ct-actions .btn{width:100%;max-width:420px}
.ct-actions-2{display:flex;flex-wrap:wrap-reverse;align-items:center;gap:16px 24px}
.ct-back{min-height:52px;padding:0 20px;border:1.5px solid var(--line-s);background:#fff;font-weight:700;font-size:15px;cursor:pointer}
.ct-back:hover{border-color:var(--rose);color:var(--rose)}
.ct-send.is-busy{opacity:.7;cursor:progress}

/* 確認・完了 */
.ct-step-title{font-size:clamp(20px,2vw,24px);line-height:1.5}
.ct-step-title:focus{outline:0}
.ct-step-lead{margin-top:8px;font-size:15px;line-height:1.9;color:var(--ink)}
.ct-review{margin:20px 0 24px;border-top:2px solid var(--ink)}
.ct-review div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.ct-review dt{font-size:14px;font-weight:700;color:var(--rose)}
.ct-review dd{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.ct-review dd.is-empty{color:var(--ink-m)}
.ct-status{margin-bottom:20px;padding:14px 16px;background:var(--err-bg);border-left:4px solid var(--err);font-size:14px;font-weight:700;line-height:1.8;color:var(--err-ink)}
.ct-done{text-align:left}
.ct-done-mark{display:grid;place-items:center;width:56px;height:56px;margin-bottom:16px;border-radius:50%;background:var(--rose)}
.ct-done-mark svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ct-done-next{display:grid;gap:8px;margin:20px 0}
.ct-done-next li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700}
.ct-done-next .num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mist);color:var(--rose);font-size:16px}
.ct-done-note{margin-bottom:20px;font-size:14px;line-height:1.9;color:var(--ink-m)}
.ct-done-note a{color:var(--rose);font-weight:700;white-space:nowrap}

@media (max-width:1100px){
  .ct-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
}
@media (max-width:900px){
  .ct-form-grid{grid-template-columns:1fr;grid-template-rows:none}
  .ct-aside,.ct-aside-more,.ct-form-wrap{grid-column:1;grid-row:auto}
  .ct-form-wrap{margin-top:24px}
  .ct-hero-grid{align-items:start}
}
@media (max-width:640px){
  .ct-way{padding:16px 18px}
  .cw-main .num{font-size:26px}
  .ct-steps{column-gap:14px;row-gap:18px}
  .ct-steps span:not(.cs2-n){font-size:13px}
  .ct-form-wrap{margin-inline:calc(-1 * var(--gut));padding:24px var(--gut);border-left:0;border-right:0}
  .ct-progress{margin-bottom:22px}
  .ct-review div{grid-template-columns:1fr;gap:2px}
  .ct-actions .btn{max-width:none}
  .ct-actions-2{flex-direction:column-reverse;align-items:stretch}
  .ct-back{width:100%}
}
@media (max-width:380px){
  .ct-steps{grid-template-columns:1fr}
}

/* レビュー後の追加（窓口の署名・会社概要・要約の流れ・準備中・伺える範囲・連絡方法・控え） */
.cw-sign{font-size:14px;font-weight:700;color:var(--ink)}
.cw-sign b{margin-left:4px;font-size:17px;letter-spacing:.14em}
.ct-company{margin-top:4px;font-size:13px;text-align:right}
.ct-company a{color:var(--rose);font-weight:700;text-underline-offset:3px}
.ct-way.is-off{border-left-color:var(--line-s)}
.ct-way.is-off .cw-icon{background:var(--line);color:var(--ink-m)}
.ct-mini{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:-8px 0 22px;font-size:13px;font-weight:700;color:var(--ink-m)}
.ct-mini li{display:flex;align-items:center}
.ct-mini li+li::before{content:"";width:6px;height:6px;margin:0 10px 0 8px;border:solid var(--rose);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.ct-mini li:nth-child(3){color:var(--rose)}
.ct-reply{margin:-12px 0 22px;font-size:14px;font-weight:700;color:var(--rose)}
[data-state="off"] .ct-progress{display:none}
.ct-off{padding:24px;background:var(--blush);border-left:4px solid var(--nude)}
.ct-off-k{font-weight:700;font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.ct-off-text{margin-top:8px;font-size:15px;line-height:1.9}
.ct-off-tel{display:inline-flex;align-items:center;gap:12px;margin-top:16px;color:var(--ink);text-decoration:none}
.ct-off-tel .num{font-size:32px;font-weight:600;letter-spacing:.03em}
.ct-area{margin:-10px 0 24px;padding:10px 14px;background:var(--mist);font-size:14px;line-height:1.75}
.ct-area b{margin-right:10px;color:var(--rose)}
.ct-prefs{display:flex;flex-wrap:wrap;gap:8px}
.ct-pref{position:relative;cursor:pointer}
.ct-pref input{position:absolute;opacity:0;width:1px;height:1px}
.ct-pref span{display:grid;place-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--line-s);font-weight:700;font-size:15px;transition:border-color .16s,background-color .16s}
.ct-pref:hover span{border-color:#9FB0B7}
.ct-pref input:checked+span{border-color:var(--rose);background:var(--mist);color:var(--rose);box-shadow:inset 0 -3px 0 var(--rose)}
.ct-pref input:focus-visible+span{outline:3px solid var(--rose);outline-offset:2px}
.ct-copy-note{margin-top:8px;font-size:14px;line-height:1.8;color:var(--ink-m)}
.ct-mini>wbr,.ct-mini li>wbr,.ct-off-tel>wbr,.ct-prefs>wbr{display:none}
@media (max-width:640px){
  .ct-company{text-align:left}
  .ct-review div{grid-template-columns:96px minmax(0,1fr);gap:10px;padding:10px 0}
  .ct-review dt{font-size:13px}
  .ct-pref{flex:1}
  .ct-pref span{padding:0 10px}
  .ct-off-tel .num{font-size:28px}
}
[data-state="off"] .ct-mini{display:none}

/* =========================================================
   19. プライバシーポリシー・404
   ========================================================= */
/* <picture> で包んだ写真は、これまでの img の指定のまま並ぶようにする */
picture{display:contents}
.ct-policy-link{color:var(--rose);font-weight:700;text-underline-offset:3px}

/* プライバシーポリシー */
.pv-body{padding:var(--sec-m) 0 var(--sec-l)}
.pv-grid{max-width:860px}
.pv-list{counter-reset:pv;border-top:2px solid var(--ink)}
.pv-list>li{counter-increment:pv;position:relative;padding:28px 0 28px 64px;border-bottom:1px solid var(--line)}
.pv-list>li::before{content:counter(pv,decimal-leading-zero);position:absolute;left:0;top:26px;font-family:var(--en);font-style:italic;font-weight:600;font-size:30px;line-height:1.1;color:var(--rose)}
.pv-list h2{font-size:clamp(18px,1.6vw,21px);line-height:1.5;letter-spacing:.04em}
.pv-list p{margin-top:10px;font-size:15px;line-height:2;color:var(--ink)}
.pv-ul{margin-top:10px}
.pv-ul li{position:relative;padding:4px 0 4px 18px;font-size:15px;line-height:1.85}
.pv-ul li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;background:var(--nude)}
.pv-dl{margin-top:12px}
.pv-dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.pv-dl dt{font-size:14px;font-weight:700;color:var(--rose)}
.pv-dl dd{font-size:15px}
.pv-contact a{color:var(--rose);font-weight:700}
.pv-date{margin:28px 0 20px;font-size:14px;color:var(--ink-m)}

/* 404 */
.nf-body{padding:var(--sec-s) 0 var(--sec-l)}
.nf-tel{margin-top:28px;font-weight:700;font-size:15px}
.nf-tel a{color:var(--rose);text-decoration:none}
.nf-tel .num{font-size:26px;letter-spacing:.03em}

@media (max-width:640px){
  .pv-list>li{padding:22px 0 22px 44px}
  .pv-list>li::before{top:22px;font-size:22px}
  .pv-dl div{grid-template-columns:80px minmax(0,1fr)}
}

/* R salon 版の調整（お問い合わせ・404） */
.ct-way{border-radius:var(--r);border-left-width:3px}
.ct-form-wrap{border-radius:var(--r);border-top-color:var(--rose)}
.ct-kind,.ct-input,.ct-back{border-radius:var(--r)}
.ct-pref span{border-radius:999px}
.ct-badge{border-radius:999px}
.ct-badge-req{background:var(--rose);border-color:var(--rose);color:#fff}
.cw-main .num{font-family:var(--mono);font-weight:500}
.ct-tip{border-radius:var(--r);border-top-color:var(--rose)}
.ct-tip li::before{border-radius:50%;background:var(--rose)}
.nf-list{display:grid;gap:10px;max-width:760px}
.nf-list a{position:relative;display:grid;gap:2px;padding:18px 60px 18px 22px;border:1px solid var(--line-s);border-radius:var(--r);text-decoration:none}
.nf-list a>wbr{display:none}
.nf-list a:hover{border-color:var(--rose)}
.nx-k{font-weight:700;font-size:16px}
.nx-d{font-size:13px;color:var(--ink-m)}
.nf-list svg{position:absolute;right:18px;top:50%;width:30px;height:30px;margin-top:-15px;padding:7px;border:1px solid var(--nude-d);border-radius:50%;fill:none;stroke:var(--rose);stroke-width:1.7}
.nf-tel .num{font-family:var(--mono)}

/* 検査を受けての調整（2026-10-15） */
.hc-dial-k{white-space:nowrap}
.ft-head{flex-wrap:wrap}
.ft-head span{white-space:nowrap}
.sheet-table td{white-space:nowrap}
.wc-head{flex-wrap:wrap}
.wc-head .tag,.pm-head .tag{flex:none}
.sheet-head{flex-wrap:wrap}
.sh-d{white-space:nowrap}
.as-price small{display:block;margin:6px 0 0}

/* 在庫表: スマホでは1商品ずつのカードにする */
@media (max-width:640px){
  .sheet-table{min-width:0}
  .sheet-table thead{display:none}
  .sheet-table,.sheet-table tbody,.sheet-table tr{display:block;width:auto}
  .sheet-table tr{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:8px 10px;padding:16px 0;border-bottom:1px solid var(--line)}
  .sheet-table tbody th{grid-column:1 / -1;padding:0;border:0;font-size:15px}
  .sheet-table td{display:block;padding:0;border:0;font-size:13px}
  .sheet-table td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;color:var(--ink-m)}
  .sheet-table td.gg-cell{grid-column:1 / -1;grid-row:2;width:auto;padding:4px 0 6px}
  .sheet-table td:last-child{align-self:start}
  .sheet-table tr:has(.st-order){background:transparent}
  .sheet-table tr:has(.st-order) th{color:var(--rose)}
}

/* hp:fit-text — build_site.py が css/style.css の末尾に足す（サイト側には書かない）。scripts/fit_text.js と対 */
/* 画面幅に合わせた改行: 句読点で区切った句（.cl）は、行に収まるときだけ main.js の fitText() が .is-block を付けて1かたまりにする。
   引用句・括弧書き・「A・B」の語句は、行に収まらない幅では .is-flow で流す。JS が動かないときは文節単位の自然な折り返しになる。 */
.cl{display:inline}
.cl.is-block{display:inline-block;max-width:100%}
.paren.is-flow,.unit.is-flow,.q.is-flow{display:inline}
.cl-measure .cl,.cl-measure .paren,.cl-measure .unit,.cl-measure .q{display:inline-block!important;white-space:nowrap!important;max-width:none!important}
/* <wbr> は white-space:nowrap の中でも折り返し位置になるので、幅を測るあいだは無効にする */
.cl-measure wbr,.h-measure wbr{display:none!important}
.h-measure{white-space:nowrap!important}
h1.flow br,h2.flow br,h3.flow br{display:none}