/* よそおい楽屋プレミアム（個人向け）。YOSOOI Design System のトークンを使う。
   PCは「左＝メニュー／中央＝本編／右＝LINE導線とQR」を固定、スマホは本編＋下部の追従ボタン。 */
:root{
  --green:#22D05E; --green-deep:#1AAE4D; --green-ink:#062b14; --green-wash:#E9FAEF;
  --beige:#F6E6D6; --blond:#D8B27A;
  --ink:#111; --paper:#fff; --bg:#fafaf8; --line:#ECECE8; --muted:#6b6b66;
  --display:'Zen Maru Gothic',system-ui,sans-serif;
  --body:'Noto Sans JP',system-ui,sans-serif;
  --col:500px; --gut:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{margin:0; color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.85; letter-spacing:.01em; -webkit-font-smoothing:antialiased; background:var(--green-wash) linear-gradient(115deg,#d6f6e1 0%,#f4fbf6 34%,#fffdf9 62%,#f6e6d6 100%) fixed}
::selection{background:var(--green); color:var(--green-ink)}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:900; line-height:1.45; margin:0}
p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:3px solid var(--green-deep); outline-offset:3px; border-radius:6px}

/* 3カラム */
.stage{display:block}
.col{position:relative; width:100%; max-width:var(--col); margin-inline:auto; background:var(--paper); overflow-x:clip; box-shadow:0 0 40px rgba(6,43,20,.08)}
.nav,.panel{display:none}
@media (min-width:1120px){
  .stage{display:grid; grid-template-columns:minmax(0,1fr) var(--col) minmax(0,1fr); align-items:start}
  .col{grid-column:2; grid-row:1}
  .nav,.panel{display:flex; position:sticky; top:0; height:100vh; align-items:center; justify-content:center; padding:20px clamp(18px,2.6vw,48px); overflow-y:auto}
  .nav{grid-column:1; grid-row:1}
  .panel{grid-column:3; grid-row:1}
  .bar{display:none !important}
}

/* 左：メニュー */
.nav-card{width:100%; max-width:330px; background:var(--paper); border-radius:20px; padding:18px 24px; box-shadow:0 18px 40px -26px rgba(6,43,20,.45)}
.nav-card a{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 2px; text-decoration:none; border-bottom:1px solid var(--line); line-height:1.4}
.nav-card a:last-child{border-bottom:0}
.nav-card b{display:block; font-weight:500; font-size:clamp(13.5px,1.1vw,15px)}
.nav-card small{display:block; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.06em; color:#b0b0a8}
.nav-card a::after{content:""; border-left:6px solid var(--green-deep); border-block:4.5px solid transparent}
.nav-card a:hover b,.nav-card a.on b{color:var(--green-deep); font-weight:700}

/* 右：LINE導線 */
.panel-in{width:100%; max-width:360px; display:grid; gap:16px; justify-items:center; text-align:center}
.brand{font-family:var(--display); font-weight:900; font-size:clamp(20px,1.7vw,24px); line-height:1.3; text-decoration:none}
.brand small{display:block; font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--muted)}
.panel-copy{font-family:var(--display); font-weight:900; font-size:clamp(23px,2.2vw,31px); line-height:1.4; color:var(--green-deep)}
.tags{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.tags span{font-size:12.5px; font-weight:500; line-height:1.5; color:var(--green-ink); background:var(--paper); border:1.5px solid var(--green); border-radius:8px; padding:3px 10px}
.qr-card{width:100%; display:grid; grid-template-columns:clamp(104px,16vh,132px) minmax(0,1fr); gap:14px; align-items:center; text-align:left; background:var(--paper); border-radius:20px; padding:14px; box-shadow:0 18px 40px -26px rgba(6,43,20,.45)}
.qr-card p{font-size:12.5px; line-height:1.6}
.qr-card b{display:block; font-family:var(--display); font-weight:900; font-size:15px; line-height:1.45; margin-bottom:3px}
.link-btn{background:none; border:0; padding:0; margin-top:6px; font:inherit; font-size:12.5px; font-weight:700; color:var(--green-deep); text-decoration:underline; cursor:pointer}

/* ボタン */
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; font-family:var(--display); font-weight:900; font-size:17px; line-height:1.4; padding:16px 18px; border-radius:999px; border:0; text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(2px)}
.btn-line{background:var(--green); color:var(--green-ink); box-shadow:0 5px 0 var(--green-deep)}
.btn-line:hover{box-shadow:0 3px 0 var(--green-deep)}
.btn-dark{background:var(--ink); color:#fff; box-shadow:0 5px 0 #3c3c3a}
.btn-dark:hover{box-shadow:0 3px 0 #3c3c3a}
.btn .arr{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--green-ink); color:var(--green); font-size:13px; flex:none}
.btn-dark .arr{background:var(--green); color:var(--green-ink)}
.btn-sub{display:flex; align-items:center; justify-content:center; width:100%; font-family:var(--display); font-weight:700; font-size:14px; line-height:1.4; padding:11px 14px; border-radius:999px; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); cursor:pointer}

/* ヘッダー */
.hd{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px var(--gut); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hd .brand{font-size:17px}
.hd .brand small{display:none}
.hd a.mini{font-family:var(--display); font-weight:700; font-size:13px; text-decoration:none; color:var(--green-ink); background:var(--green); border-radius:999px; padding:7px 15px; white-space:nowrap}
@media (min-width:1120px){.hd{display:none}}

/* FV */
.fv{position:relative; background:var(--green)}
.fv img{width:100%}
.fv-card{position:relative; margin:-2px 0 0; padding:0 var(--gut) 8px; background:linear-gradient(var(--green) 34px,transparent 34px)}
.card{background:var(--paper); border-radius:14px; border:1.5px solid var(--line); padding:14px 16px 16px; display:grid; gap:11px; box-shadow:0 14px 30px -22px rgba(6,43,20,.5)}
.slash{font-family:var(--display); font-weight:900; font-size:clamp(14px,4vw,16px); text-align:center; line-height:1.4}
.slash em{font-style:normal; color:var(--green-deep)}
.word{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; background:var(--green-wash); border-radius:12px; padding:8px 8px 8px 14px; font-family:var(--display); font-weight:900; font-size:15px; line-height:1.4}
.word button{font-family:var(--display); font-weight:700; font-size:12.5px; line-height:1.3; background:var(--paper); border:1.5px solid var(--green-deep); color:var(--green-ink); border-radius:999px; padding:6px 12px; cursor:pointer; white-space:nowrap}
.fine{font-size:12px; color:var(--muted); line-height:1.7}

/* 共通セクション */
.sec{padding:56px var(--gut)}
.kicker{display:inline-flex; gap:7px; align-items:center; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--ink)}
.kicker i{width:6px; height:6px; border-radius:50%; background:var(--green)}
.sec h2{font-size:clamp(1.55rem,6.6vw,1.85rem); margin-top:4px}
.lead{margin-top:12px; font-size:15px; color:#444}
.mark{background:linear-gradient(transparent 64%, var(--green) 64%, var(--green) 92%, transparent 92%)}
.tint{background:var(--bg)}
.soft{background:linear-gradient(115deg,#e9faef,#fffdf9 60%,#f6e6d6)}

/* 導入・おすすめ */
.intro{padding:36px var(--gut) 48px; text-align:center}
.intro .up{display:inline-block; font-family:var(--display); font-weight:700; font-size:15px; color:var(--green-deep); border-bottom:1.5px solid var(--green-deep); padding-bottom:2px}
.intro h1{font-size:clamp(1.4rem,6.3vw,1.75rem); margin-top:10px}
.intro > p{text-align:left; margin-top:14px; font-size:15px; color:#333}
.rec{margin-top:24px; border:1.5px solid var(--green); border-radius:14px; overflow:hidden; text-align:left}
.rec h3{background:var(--green); color:var(--green-ink); text-align:center; font-size:16px; padding:7px}
.rec li{display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:center; margin:0 16px; padding:14px 0; border-bottom:1px solid var(--line)}
.rec li:last-child{border-bottom:0}
.rec .ph{width:72px; height:72px; border-radius:50%; background:var(--green-wash); overflow:hidden; display:grid; justify-items:center; align-items:start}
.rec .ph img{width:56px; margin-top:6px}
.rec b{display:block; font-family:var(--display); font-weight:900; font-size:15.5px; line-height:1.5}
.rec span{font-size:13.5px; color:#555; line-height:1.65; display:block}

/* メニュー */
.menu{padding:40px var(--gut) 44px}
.menu h2{text-align:center; font-family:var(--display); font-weight:900; font-size:26px; letter-spacing:.04em; margin-bottom:16px}
.menu-g{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.menu-g a{display:block; background:var(--paper); border-radius:8px; padding:9px 12px; text-decoration:none; box-shadow:0 3px 0 var(--green); line-height:1.4}
.menu-g b{display:block; font-weight:500; font-size:14px}
.menu-g small{font-family:var(--display); font-weight:700; font-size:10.5px; color:#b0b0a8; letter-spacing:.05em}

/* 悩み */
.sym{margin-top:20px; display:grid; gap:10px}
.sym li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; background:var(--bg); border-radius:12px; padding:12px 14px; font-size:15px; line-height:1.6}
.sym i{font-style:normal; font-family:var(--display); font-weight:700; font-size:12.5px; background:var(--green); color:var(--green-ink); border-radius:6px; padding:3px 9px; white-space:nowrap}
.short{display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:8px; align-items:end; margin-top:24px}
.short p{font-family:var(--display); font-weight:700; font-size:18px; line-height:1.6}
.short b{display:block; font-weight:900; font-size:min(6.9vw,34px); line-height:1.4; white-space:nowrap}
.short img{width:128px; justify-self:end}

/* 4つ */
.room{width:100%}
.four{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px}
.four li{background:var(--paper); border-radius:14px; border:1.5px solid var(--line); padding:14px}
.four em{font-style:normal; font-family:var(--display); font-weight:700; font-size:12px; color:var(--green-deep)}
.four b{display:block; font-family:var(--display); font-weight:900; font-size:16.5px; line-height:1.45}
.four span{display:block; font-size:12.5px; color:#555; line-height:1.6; margin-top:3px}
.host-line{margin-top:14px; font-size:12.5px; color:var(--muted)}

/* 中間CTA */
.mid{padding:28px var(--gut) 34px; background:linear-gradient(115deg,#d6f6e1,#fffdf9 70%,#f6e6d6)}
.mid .slash{margin-bottom:12px}

/* 使い方 */
.plan{margin-top:16px; border-radius:12px; overflow:hidden}
.uses{margin-top:14px; border-block:1px solid var(--ink)}
.uses li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:11px 0; border-bottom:1px solid var(--line); align-items:start}
.uses li:last-child{border-bottom:0}
.uses i{font-style:normal; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--green); color:var(--green-ink); font-family:var(--display); font-weight:900; font-size:13px}
.uses b{display:block; font-family:var(--display); font-weight:900; font-size:16px; line-height:1.5}
.uses span{font-size:13.5px; color:#555; line-height:1.65; display:block}

/* 値札 */
.price{background:var(--ink); color:#fff; padding:52px var(--gut); text-align:center}
.price h2{font-size:clamp(1.65rem,7.4vw,2rem)}
.hanger{width:150px; margin:20px auto -6px; display:block}
.ptag{position:relative; margin-inline:auto; width:min(320px,100%); background:var(--paper); color:var(--ink); border-radius:14px; padding:24px 16px}
.ptag::before{content:""; position:absolute; top:12px; right:14px; width:18px; height:18px; border-radius:50%; background:var(--green)}
.ptag small{font-family:var(--display); font-weight:700; font-size:15px; display:block; line-height:1.3}
.ptag b{font-family:var(--display); font-weight:900; font-size:clamp(3rem,15vw,3.7rem); line-height:1.15; font-variant-numeric:tabular-nums}
.ptag b span{font-size:.4em}
.ptag .tax{font-size:12.5px; color:var(--muted); line-height:1.4}
.price h3{font-size:18px; margin-top:24px}
.price ul{margin-top:8px; text-align:left}
.price li{padding:9px 0 9px 26px; border-bottom:1px solid #2c2c2c; font-size:14.5px; line-height:1.6; position:relative}
.price li::before{content:""; position:absolute; left:0; top:1.05em; width:16px; height:2px; background:var(--green)}

/* 主宰 */
.tl{margin-top:20px; display:grid; gap:14px}
.tl li{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center}
.tl li:nth-child(even){grid-template-columns:minmax(0,1fr) 96px}
.tl li:nth-child(even) .ph{order:2}
.tl .ph{width:96px; height:96px; border-radius:50%; background:var(--green); display:grid; justify-items:center; align-items:end; overflow:hidden}
.tl .ph img{width:72px}
.tl b{display:block; font-family:var(--display); font-weight:900; font-size:18px; line-height:1.5}
.tl span{font-size:13.5px; color:#555; line-height:1.65; display:block}

/* Q&A */
.qa{display:grid; gap:10px; margin-top:20px}
.qa details{background:var(--paper); border-radius:12px; border:1.5px solid var(--line)}
.qa summary{cursor:pointer; list-style:none; padding:13px 14px; font-family:var(--display); font-weight:700; font-size:15px; line-height:1.55; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; color:var(--green-deep); font-size:1.3rem; line-height:1}
.qa details[open] summary::after{content:"−"}
.qa p{padding:0 14px 14px; font-size:14.5px; color:#444; line-height:1.75}

/* ご利用 */
.terms dl{margin-top:16px; background:var(--paper); border-radius:14px; padding:4px 16px}
.terms dl > div{padding:12px 0; border-bottom:1px solid var(--line)}
.terms dl > div:last-child{border-bottom:0}
.terms dt{font-size:12.5px; color:var(--muted); line-height:1.5}
.terms dd{font-size:14.5px; line-height:1.7; margin-top:2px}

/* 最後の相談 */
.end{background:var(--green); color:var(--green-ink); padding:52px var(--gut)}
.end h2{font-size:clamp(1.6rem,7vw,1.95rem)}
.end-qr{display:flex; justify-content:center; align-items:flex-end; gap:clamp(10px,4vw,20px); background:var(--paper); border-radius:18px; padding:16px 14px; margin-top:18px}
.end-qr > div{flex:0 1 170px; min-width:0; text-align:center}
.end-qr img.qr{width:100%; margin-inline:auto}
.end-qr img.pose{flex:none; width:clamp(84px,25vw,96px)}
.end-qr p{font-size:13px; color:var(--ink); margin-top:4px}
.flow3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-block:18px 16px}
.flow3 li{border-top:2px solid var(--green-ink); padding-top:6px; font-size:12.5px; line-height:1.55}
.flow3 b{display:block; font-family:var(--display); font-weight:900; font-size:18px; line-height:1.3}
.end .word{margin-top:14px; background:var(--paper)}
.end .note{font-size:13px; margin-top:8px; line-height:1.65}

footer{background:var(--ink); color:#cfcfca; padding:26px var(--gut) 34px; font-size:13px; display:grid; gap:6px; line-height:1.7}
footer a{color:inherit}
.biz{display:block; font-size:13px; color:#fff; font-weight:500}

/* スマホの追従ボタン */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:8px; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .2s ease}
.bar.on{transform:none}
.bar .btn{flex:1; padding:12px; font-size:15px; box-shadow:none}
.bar .btn-sub{width:auto; flex:none; font-size:12.5px; padding:0 13px}
.toast{position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:40; background:var(--ink); color:#fff; padding:8px 16px; border-radius:999px; font-size:13.5px; line-height:1.5; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease}
.toast.on{opacity:1}

.ans{margin-top:12px; font-size:16px; font-weight:500; line-height:1.8}
.sub{font-size:clamp(1.15rem,5vw,1.35rem); margin-top:24px}
.story{margin-top:22px; display:grid; gap:12px; font-size:15px; color:#333; background:var(--bg); border-radius:14px; padding:16px}
.more{margin-top:14px; font-size:13.5px; color:var(--muted)}
.more a,.qa a{color:var(--green-deep); font-weight:500}
.tbl{margin-top:10px; overflow-x:auto}
.tbl table{width:100%; border-collapse:collapse; font-size:14px; line-height:1.5; text-align:left}
.tbl th,.tbl td{padding:9px 6px; border-bottom:1px solid #2c2c2c; font-weight:400}
.tbl thead th{font-size:12px; color:#b5b5ae}
.tbl td{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.tbl thead th:last-child{text-align:right}
.tbl .us th,.tbl .us td{color:var(--green); font-weight:700}
.src{margin-top:10px; font-size:12px; line-height:1.7; color:#b5b5ae; text-align:left}
.src a{color:inherit}
.src-d{margin-top:10px; font-size:12.5px; color:var(--muted)}

/* 法定表記 */
.legal{padding:36px var(--gut) 56px}
.legal h1{font-size:clamp(1.4rem,6vw,1.65rem)}
.legal dl{margin-top:18px}
.legal dl > div{padding:12px 0; border-bottom:1px solid var(--line)}
.legal dt{font-family:var(--display); font-weight:700; font-size:14px}
.legal dd{font-size:14.5px; line-height:1.75; color:#333}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.bar,.toast{transition:none}
}