/* ONE CUT セルフ：白ベースの1画面ツール。ONE CUT らしさ＝フォント・青い斜めカットのボタン・ロゴ並び・余白。紺は文字と細い線だけ */
:root{
  --blue:#26A7E1; --blue-2:#2470C9; --navy:#04497D; --ink:#021F36;
  --text:#3B4652; --muted:#6B7480; --line:#DDE3E8; --bg:#FFFFFF; --bg-2:#F6F8FA; --sky:#EEF6FC;
  --grad:linear-gradient(135deg,#2FB7FF 0%,#2470C9 100%);
  --en:"Barlow","Helvetica Neue",Arial,sans-serif;
  --ja:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","游ゴシック",Meiryo,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(2,31,54,.06),0 8px 24px rgba(2,31,54,.08);
  --cut:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  --hd:56px; --ft:28px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ja);font-size:15px;line-height:1.7;letter-spacing:.03em;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;overflow-x:hidden}
[hidden]{display:none!important}
.nb{white-space:nowrap}

/* ── ヘッダー：OneTrack ｜ ONE CUT（LP と同じ並び・白地） */
.hd{flex:0 0 auto;border-bottom:1px solid var(--line)}
.hd__in{height:var(--hd);padding:0 clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.hd__brand{display:flex;align-items:center;gap:14px}
.hd__logo{height:22px;width:auto;display:block}
.hd__sep{width:1px;height:18px;background:var(--line)}
.hd__name{font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.24em;color:var(--ink)}
.tag{font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--navy);padding:2px 14px;background:var(--sky);clip-path:var(--cut)}

/* ── 本体：1画面に収める */
.app{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.2vh,24px);padding:clamp(16px,3vh,32px) clamp(16px,3vw,40px) 8px;min-height:0}

/* 写真を選ぶ前 */
.intro{text-align:center}
.kicker{display:inline-flex;align-items:center;gap:12px;margin:0;font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.28em;color:var(--blue-2)}
.kicker::before,.kicker::after{content:"";width:28px;height:1px;background:var(--blue)}
.brand{margin:10px 0 0;font-family:var(--en);font-weight:600;font-size:clamp(36px,4.4vw,56px);line-height:1.05;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.brand span{font-family:var(--ja);font-weight:700;font-size:.48em;letter-spacing:.1em;margin-left:.3em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.title{margin:12px 0 0;font-size:clamp(17px,1.6vw,21px);font-weight:700;line-height:1.6;letter-spacing:.06em;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.pick{width:min(720px,100%);display:flex;flex-direction:column;align-items:stretch}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:clamp(220px,40vh,380px);padding:24px;cursor:pointer;text-align:center;background:#fff;box-shadow:inset 0 0 0 1px rgba(36,112,201,.45);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.drop::before,.drop::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--blue-2);pointer-events:none}
.drop::before{top:0;left:0;border-right:0;border-bottom:0}
.drop::after{right:0;bottom:0;border-left:0;border-top:0}
.drop:hover{background:var(--sky)}
.drop.over{background:var(--sky);box-shadow:inset 0 0 0 2px var(--blue-2)}
.drop__ic{color:var(--blue-2);opacity:.75}
.drop strong{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 52px;font-size:16px;font-weight:700;letter-spacing:.12em;color:#fff;background:var(--grad);clip-path:var(--cut)}
.drop span{font-size:14px;color:var(--muted);letter-spacing:.08em}
.status{margin:12px 0 0;font-size:14px;font-weight:700;line-height:1.7;color:var(--navy);padding-left:12px;border-left:2px solid var(--blue)}
.status small{font-size:12px!important;color:var(--muted)!important}
.status .btn.ghost{--h:40px;min-height:40px;padding:0 28px;font-size:14px}

/* 写真を選んだ後：タイトルを隠して before/after を主役に */
body:has(#result:not([hidden])) .intro,
body:has(#result:not([hidden])) .pick:has(#status[hidden]){display:none}
body:has(#result:not([hidden])) .pick{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);width:auto;max-width:calc(100% - 32px);z-index:8}
body:has(#result:not([hidden])) .status{margin:0;background:#fff;padding:8px 16px;box-shadow:var(--shadow)}
body:has(#result:not([hidden])) .app{justify-content:flex-start}

/* ── 作業エリア：左＝before/after（正方形・画面高の約7割）／右＝ボタン3つ・背景・調整 */
.work{width:100%}
.work__g{display:grid;grid-template-columns:auto minmax(300px,380px);justify-content:center;gap:clamp(24px,3vw,48px);align-items:start}
.work__stage{width:min(calc(100dvh - var(--hd) - var(--ft) - 140px),58vw);max-width:720px}
.work__side{display:flex;flex-direction:column;gap:12px;min-width:0}
.side__en{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--blue-2)}
.side__en::after{content:"";flex:1;height:1px;background:var(--line)}

.compare{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;user-select:none;touch-action:pan-y;cursor:ew-resize;background:#eef1f4;box-shadow:var(--shadow)}
.compare canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.zoom-box{position:absolute;inset:0}
.after-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.compare.clear{background:repeating-conic-gradient(#e9edf3 0 25%,#fff 0 50%) 0 0/20px 20px}
.compare.clear .after-wrap{background:repeating-conic-gradient(#e9edf3 0 25%,#fff 0 50%) 0 0/20px 20px}
.line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(2,31,54,.2)}
.knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(2,31,54,.3)}
.knob:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hint{position:absolute;top:calc(50% + 32px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.92);padding:2px 12px}
.lbl{position:absolute;bottom:12px;font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.92);padding:3px 14px 3px 16px;clip-path:var(--cut)}
.lbl-b{left:12px}.lbl-a{right:12px;color:#fff;background:var(--grad)}
.busy{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.94);padding:4px 14px;box-shadow:var(--shadow)}
.busy::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);border-top-color:var(--blue-2);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pro-line{text-align:right;margin:8px 0 0;font-size:13px}
.pro-line a{color:var(--blue-2);text-decoration:none;letter-spacing:.06em}
.pro-line a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── ボタン（LP の .btn：斜めカット・青のグラデ・紺が左から差し込む） */
.btn{--h:56px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:var(--h);padding:0 40px;border:0;font-family:var(--ja);font-weight:700;font-size:15px;letter-spacing:.1em;color:#fff;background:var(--grad);clip-path:var(--cut);overflow:hidden;isolation:isolate;cursor:pointer;text-decoration:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);transform:translateX(-101%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:none}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.btn.primary{background:var(--grad)}
.btn.hq{background:var(--navy)}
.btn.hq::before{background:var(--blue-2)}
.btn.ghost{background:var(--bg-2);color:var(--navy)}
.btn.ghost::before{background:var(--navy)}
.btn.ghost:hover{color:#fff}
.btn.block{display:flex;width:100%;text-align:center}

.dl-box{display:grid;grid-template-columns:1fr;gap:8px}
.dl-box .btn{flex-direction:column;gap:0;padding:8px 28px;min-height:60px;line-height:1.4;font-size:15px}
.dl-box .btn small{font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.06em;opacity:.88}
.studio-link{justify-self:center;margin-top:2px;color:var(--navy);font-size:14px;font-weight:700;letter-spacing:.06em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.studio-link:hover{color:var(--blue-2)}
.dl-note{margin:0;font-size:12px;line-height:1.6;color:var(--muted);text-align:center}

/* 背景・調整（線だけの控えめな面） */
.panel{padding:0;background:none}
.panel-title{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-family:var(--ja);font-size:13px;letter-spacing:.04em;cursor:pointer;transition:box-shadow .3s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--blue-2)}
.chip i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(2,31,54,.2);display:inline-block}
.chip i.checker{background:repeating-conic-gradient(#cfd6e0 0 25%,#fff 0 50%) 0 0/8px 8px}
.chip i.orig{background:linear-gradient(135deg,#9fb6cf 0 50%,#d8e2ec 50%)}
.chip.on{box-shadow:inset 0 0 0 2px var(--blue-2);color:var(--navy);font-weight:700}
details.panel,.rep{border-top:1px solid var(--line);padding-top:10px}
details.panel>summary,.rep>summary{cursor:pointer;list-style:none;margin:0;line-height:1.5}
details.panel>summary::-webkit-details-marker,.rep>summary::-webkit-details-marker{display:none}
details.panel>summary::after,.rep>summary::after{content:"＋";flex:0 0 auto;color:var(--blue-2);font-weight:400}
details.panel[open]>summary::after,.rep[open]>summary::after{content:"－"}
details.panel>summary{font-weight:500;font-size:13px;margin:0}
.rep>summary{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.adj-head{text-align:right;margin:4px 0 0}
.range{display:grid;grid-template-columns:6em 1fr;align-items:center;font-size:13px;gap:8px;margin:4px 0;color:var(--ink)}
.range input{width:100%;accent-color:var(--blue-2)}
.small{font-size:12px;line-height:1.7;color:var(--muted);margin:6px 0 0}
.link{border:0;background:none;color:var(--blue-2);font-family:var(--ja);font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.report{margin:6px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.6;color:var(--muted)}
.report li{position:relative;padding:2px 0 2px 14px}
.report li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--blue);transform:rotate(45deg)}
.actions{display:flex;border-top:1px solid var(--line);padding-top:12px}
.actions .btn{flex:1;--h:44px;font-size:14px}

/* ── 小さな1行：信頼・やっていること */
.meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 24px;font-size:13px}
.trust{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted)}
.trust__ic{flex:0 0 auto;color:var(--blue-2)}
.note{letter-spacing:.04em}
.does-open{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;font-family:var(--ja);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--navy);cursor:pointer}
.does-open .ck{color:var(--blue-2);font-weight:700}
.does-open .more{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--blue-2);border-bottom:1px solid currentColor;line-height:1.3}
.does-open:hover .more{color:var(--navy)}

/* ── 押すと開く「やっていること」 */
.pop{position:fixed;inset:0;margin:auto;width:min(1080px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px clamp(18px,3vw,40px) 24px;border:0;background:#fff;color:var(--text);box-shadow:0 20px 60px rgba(2,31,54,.3)}
.pop::backdrop{background:rgba(2,31,54,.45)}
.pop::before{content:"";position:absolute;left:0;top:0;width:120px;height:4px;background:var(--grad);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.pop-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.pop-x:hover{color:var(--ink)}
.h{text-align:center;margin-bottom:20px}
.h__en{margin:0;font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.24em;color:var(--blue-2)}
.h__ja{margin:6px 0 0;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:.06em;color:var(--ink);line-height:1.45;word-break:keep-all}
.h__lead{margin:8px auto 0;font-size:14px;line-height:1.8;color:var(--text);letter-spacing:.04em;text-wrap:balance}
.does{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.does__c{display:flex;gap:10px;align-items:flex-start;padding:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.does__fig{flex:0 0 108px;display:grid;grid-template-columns:1fr 1fr;gap:1px}
.does__fig figure{position:relative;margin:0}
.does__fig img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.does__fig figcaption{position:absolute;left:0;bottom:0;font-family:var(--en);font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(2,31,54,.75);padding:0 4px}
.does__fig figure+figure figcaption{background:var(--blue-2)}
.does__fig--spec{grid-template-columns:1fr;aspect-ratio:2/1;place-items:center;background:var(--sky)}
.does__fig--spec dl{display:grid;grid-template-columns:auto auto;gap:0 6px;align-items:baseline;margin:0}
.does__fig--spec dt{font-family:var(--en);font-size:8px;font-weight:600;letter-spacing:.12em;color:var(--blue-2)}
.does__fig--spec dd{margin:0;font-family:var(--en);font-size:15px;font-weight:600;color:var(--navy);line-height:1.2}
.does__t{min-width:0}
.does__en{display:flex;gap:6px;margin:0;font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--blue-2);line-height:1.4}
.does__en span{color:var(--muted)}
.does__t h3{margin:2px 0 0;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink);line-height:1.4}
.does__t p:last-child{margin:2px 0 0;font-size:12px;line-height:1.6;color:var(--text)}
.does__end{margin:16px auto 0;max-width:48em;font-size:13px;line-height:1.8;color:var(--ink);text-align:center}
.does__fine{margin:6px 0 0;text-align:center;font-size:11px;color:var(--muted)}

/* ── フッター：極小の1行 */
.ft{flex:0 0 auto;height:var(--ft);display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line)}

/* ── 案内のモーダル（白・影・角丸0） */
.modal{position:fixed;inset:0;background:rgba(2,31,54,.45);display:flex;align-items:flex-start;justify-content:center;padding:16px;z-index:10;overflow-y:auto}
.modal-card{position:relative;background:#fff;max-width:460px;width:100%;margin:auto 0;padding:28px 26px 24px;box-shadow:0 20px 60px rgba(2,31,54,.3)}
.modal-card::before{content:"";position:absolute;left:0;top:0;width:120px;height:4px;background:var(--grad);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.modal-card h2{font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--ink);margin:0 0 10px;line-height:1.5}
.modal-card p{font-size:14px;line-height:1.85;margin:0 0 12px}
.facts{list-style:none;margin:0 0 16px;padding:10px 14px;background:var(--bg-2);font-size:14px;color:var(--ink)}
.facts li{position:relative;padding:2px 0 2px 16px}
.facts li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;background:var(--blue);transform:rotate(45deg)}
.modal-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.modal-x:hover{color:var(--ink)}
.sample-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--navy);background:var(--sky);padding:0 12px;margin-bottom:8px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.buy-row{display:flex;gap:16px;align-items:flex-start;margin:8px 0 12px}
.buy-row canvas{width:100px;height:100px;flex:0 0 auto;box-shadow:var(--shadow)}
.buy-dl{display:grid;grid-template-columns:4em 1fr;gap:3px 10px;margin:0;font-size:14px;color:var(--ink)}
.buy-dl dt{color:var(--muted)}.buy-dl dd{margin:0}
.buy-dl .price{font-family:var(--en);font-size:24px;font-weight:600;line-height:1.2;color:var(--navy)}
.buy-dl .price span{font-family:var(--ja);font-size:13px;font-weight:500;color:var(--muted)}
.legal{font-size:13px;margin:4px 0 14px}.legal a{color:var(--blue-2);margin-right:8px}
.buy-msg{margin:0 0 12px;padding:8px 12px;background:var(--bg-2);box-shadow:inset 3px 0 0 var(--blue-2);font-size:13px;color:var(--navy);font-weight:700}
#buyBtn{width:100%}

/* ── タブレット */
@media (max-width:1100px){.does{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .work__g{grid-template-columns:1fr;justify-items:center}
  .work__stage{width:min(100%,calc(100dvh * .5))}
  .work__side{width:100%;max-width:560px}
}
/* ── スマホ（375×812 で、before/after からボタン3つまで同じ画面） */
@media (max-width:600px){
  :root{--hd:48px;--ft:24px}
  body{font-size:14px}
  .hd__logo{height:17px}
  .hd__brand{gap:10px}
  .hd__name{font-size:12px;letter-spacing:.18em}
  .tag{font-size:11px;padding:1px 12px}
  .app{gap:14px;padding:16px 16px 6px}
  .brand{font-size:40px}
  .title{font-size:16px;letter-spacing:.04em}
  .drop{height:min(44dvh,340px)}
  .drop strong{width:100%;max-width:280px}
  .meta{flex-direction:column;gap:2px;font-size:12px}
  .does-open{font-size:12px}
  /* 仕上がり後 */
  body:has(#result:not([hidden])) .app{padding-top:10px;gap:8px}
  .work__g{gap:10px}
  .work__stage{width:min(100%,46dvh)}
  .pro-line{margin-top:4px;font-size:12px}
  .work__side{gap:8px}
  .side__en{display:none}
  .dl-box{grid-template-columns:1fr 1fr;gap:6px}
  .dl-box .btn{min-height:54px;padding:6px 16px;font-size:13px;letter-spacing:.04em}
  .dl-box .btn small{font-size:10px;letter-spacing:.02em}
  .studio-link{grid-column:1/-1;font-size:13px;margin-top:0}
  .dl-note{grid-column:1/-1;font-size:10px;line-height:1.5;margin-top:-4px}
  .panel-title{display:none}
  details.panel>summary.panel-title{display:flex}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .chip{flex:0 0 auto;font-size:12px;padding:5px 10px}
  details.panel,.rep{padding-top:6px}
  details.panel>summary,.rep>summary{font-size:12px}
  .actions{padding-top:6px}
  .actions .btn{--h:36px;font-size:13px}
  .lbl{font-size:10px;bottom:8px;padding:2px 10px 2px 12px}.lbl-b{left:8px}.lbl-a{right:8px}
  .hint{font-size:10px;top:calc(50% + 28px)}
  .knob{width:38px;height:38px;margin:-19px 0 0 -19px}
  .does{grid-template-columns:1fr;gap:6px}
  .does__c{padding:6px}
  .does__fig{flex-basis:88px}
  .h__ja{font-size:19px}
  .h__lead{font-size:13px}
  .pop{padding:24px 14px 16px}
  .does__end{font-size:12px;text-align:left}
  .modal-card{padding:26px 18px 20px}
}

/* ── 2周目の直し */
.app{overflow:hidden}
.pop{width:min(1180px,calc(100% - 32px))}
@media (min-width:601px){
  .does__c{flex-direction:column;gap:8px;padding:0 0 12px}
  .does__fig{flex:0 0 auto;width:100%}
  .does__fig figcaption{font-size:9px;padding:0 6px}
  .does__fig--spec{aspect-ratio:2/1}
  .does__fig--spec dt{font-size:10px}.does__fig--spec dd{font-size:24px}
  .does__t{padding:0 12px}
  .does__t h3{font-size:15px}
  .does__t p:last-child{font-size:13px}
}
@media (max-width:600px){
  .note,.does-open{white-space:nowrap;font-size:11.5px}
  .trust{font-size:11.5px}
  body:has(#result:not([hidden])) .meta{flex-direction:row;flex-wrap:wrap;gap:0 10px}
  body:has(#result:not([hidden])) .trust{display:none}
  .work__stage{width:min(100%,42dvh)}
  details.panel>summary{font-size:11px;letter-spacing:0}
  .chips{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}
}
@media (max-width:600px){
  .work__stage{width:min(100%,41dvh)}
  body:has(#result:not([hidden])) .app{padding-top:8px;gap:6px}
  .work__side{gap:6px}
  .dl-box .btn{min-height:50px}
}
/* ── 3周目の直し：説明は画像を小さく・横組み／スマホ仕上がり後も信頼の1行を残す */
@media (min-width:601px){
  .does__c{flex-direction:row;gap:10px;padding:10px;align-items:center}
  .does__fig{flex:0 0 112px;width:auto}
  .does__fig figcaption{font-size:8px;padding:0 4px}
  .does__fig--spec dt{font-size:8px}.does__fig--spec dd{font-size:15px}
  .does__t{padding:0}
  .does__t h3{font-size:14px}
  .does__t p:last-child{font-size:12px}
  .does__c:last-child{grid-column:span 2}
}
@media (max-width:600px){
  body:has(#result:not([hidden])) .trust{display:flex}
  body:has(#result:not([hidden])) .meta{flex-direction:column;gap:0}
  .work__stage{width:min(100%,40dvh)}
  .actions .btn{--h:34px}
}
@media (min-width:601px){.does__fig{flex-basis:88px}.does{gap:10px}}

/* ── 10/20 追加：1画面目（.screen）の下に「やっていること」の節 */
html{scroll-behavior:smooth}
body{display:block;min-height:0}
.screen{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0}
.does-open{text-decoration:none}
.does-sec{scroll-margin-top:0;background:#fff;border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) clamp(16px,3vw,40px) clamp(56px,6vw,88px)}
.does-in{width:min(1180px,100%);margin:0 auto}
.does-sec .h{margin-bottom:clamp(28px,3vw,44px)}
.does-sec .h__en{font-size:13px}
.does-sec .h__ja{font-size:clamp(22px,2.6vw,34px);margin-top:8px}
.does-sec .h::after{content:"";display:block;width:min(480px,70%);height:10px;margin:16px auto 0;background:radial-gradient(circle,var(--line) 2.2px,transparent 2.6px) 0 50%/22px 10px repeat-x}
.does-sec .h__lead{font-size:clamp(14px,1.2vw,16px);margin-top:14px}
.does-sec .does{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.does-sec .does__c{flex-direction:column;align-items:stretch;gap:0;padding:0;background:#fff;box-shadow:var(--shadow);position:relative}
.does-sec .does__c::before{content:"";position:absolute;left:0;top:0;width:80px;height:3px;background:var(--grad);z-index:1;clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.does-sec .does__fig{flex:0 0 auto;width:100%;gap:2px}
.does-sec .does__fig figcaption{font-size:10px;letter-spacing:.16em;padding:1px 8px}
.does-sec .does__fig--spec{aspect-ratio:2/1}
.does-sec .does__fig--spec dt{font-size:11px;letter-spacing:.2em}
.does-sec .does__fig--spec dd{font-size:28px}
.does-sec .does__t{padding:14px 16px 18px}
.does-sec .does__en{font-size:11px}
.does-sec .does__t h3{font-size:16px;margin-top:4px}
.does-sec .does__t p:last-child{font-size:13px;line-height:1.75;margin-top:4px}
.does-sec .does__c:last-child{grid-column:span 2;flex-direction:row}
.does-sec .does__c:last-child .does__fig--spec{flex:0 0 46%;aspect-ratio:auto}
.does-sec .does__c:last-child .does__t{align-self:center}
.does-sec .does__end{margin-top:clamp(32px,3.6vw,48px);max-width:46em;padding:18px 28px;background:var(--bg-2);font-size:14px;position:relative}
.does-sec .does__end::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.does-sec .does__fine{font-size:12px;margin-top:10px}
@media (max-width:1100px){.does-sec .does{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .does-sec{padding:48px 16px 48px}
  .does-sec .h__ja{font-size:20px}
  .does-sec .does{grid-template-columns:1fr;gap:10px}
  .does-sec .does__c,.does-sec .does__c:last-child{flex-direction:row;grid-column:auto}
  .does-sec .does__c::before{width:48px}
  .does-sec .does__fig{flex:0 0 120px;width:auto;align-self:flex-start;gap:1px}
  .does-sec .does__fig figcaption{font-size:8px;letter-spacing:.08em;padding:0 4px}
  .does-sec .does__c:last-child .does__fig--spec{flex:0 0 120px;aspect-ratio:2/1;align-self:center}
  .does-sec .does__fig--spec dt{font-size:8px}.does-sec .does__fig--spec dd{font-size:15px}
  .does-sec .does__t{padding:8px 12px 10px}
  .does-sec .does__t h3{font-size:15px;margin-top:0}
  .does-sec .does__t p:last-child{font-size:12.5px;line-height:1.65}
  .does-sec .does__end{text-align:left;font-size:13px;padding:14px 16px 14px 20px}
}

/* 10/20 フッターはページの一番下 */
.ft{height:auto;min-height:var(--ft,28px);padding:6px 0}


/* ── 10/20 追加：1画面目の下の帯（やっていること7項目・小さく） */
.app{justify-content:space-between}
.band{width:min(1180px,100%);display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.band__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 18px}
.band__lead{margin:0;font-size:13px;color:var(--text);letter-spacing:.04em}
.band__list{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.band__list li{display:flex;align-items:center;gap:8px;min-width:0}
.band__list img,.band__spec{flex:0 0 40px;width:40px;height:40px;object-fit:cover;display:block}
.band__spec{display:flex;align-items:center;justify-content:center;background:var(--sky);font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--navy)}
.band__list span{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.band__list b{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.04em;white-space:nowrap}
.band__list small{font-size:11px;color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band .trust{font-size:12px}
.meta{display:none}
/* 仕上がり後：帯のぶん写真を少し小さく */
.work__stage{width:min(calc(100dvh - var(--hd) - 290px),58vw)}
@media (max-width:1100px){.band__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){
  .band{gap:6px;padding-top:8px}
  .band__top{flex-direction:column;align-items:center;gap:0}
  .band__lead{font-size:11px;text-align:center;line-height:1.5}
  .band__list{display:flex;overflow-x:auto;scrollbar-width:none;gap:10px;padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .band__list li{flex:0 0 auto}
  .band__list img,.band__spec{flex-basis:32px;width:32px;height:32px}
  .band__list b{font-size:12px}.band__list small{font-size:10px}
  .band .trust{font-size:11px}
  .work__stage{width:min(100%,34dvh)}
}
/* 帯を入れた後の高さ調整 */
.drop{height:clamp(200px,34vh,330px)}
.app{padding-bottom:12px}
@media (max-width:600px){.work__stage{width:min(100%,31dvh)}.drop{height:min(36dvh,300px)}}
.app{justify-content:flex-start}
.intro{margin-top:auto}
.band{margin-top:auto}
body:has(#result:not([hidden])) .work{margin-top:auto}

/* 10/20 h：書き出しの2ボタン（無料＝白地に青の枠／高画質＝塗りの面・どちらも押せる面を広く）・斜めカットは維持 */
.dl-box{gap:8px}
.dl-box .btn{min-height:62px;font-size:17px;letter-spacing:.08em}
.dl-box .btn small{font-size:12.5px}
.btn.dl-free{background:var(--blue-2);color:var(--blue-2)}
.btn.dl-free::before{display:none}
.btn.dl-free::after{content:"";position:absolute;inset:2px;background:#fff;clip-path:var(--cut);z-index:-1}
.btn.dl-free small{color:var(--navy);opacity:.85}
.btn.hq{min-height:70px}
.dl-pay-note{margin:0;font-size:12px;color:var(--navy);background:var(--sky,#e8f0fb);padding:6px 10px}
/* 仕上げの項目（チェックの一覧・有料の札・右に短い記録） */
.rep--ck{border-top:1px solid var(--line);padding-top:8px}
.rep__t{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:baseline}
.rep__t span{font-size:11px;font-weight:400;color:var(--muted)}
.report.ck{display:grid;grid-template-columns:1fr;gap:1px;margin:0}
.report.ck li{padding:0;line-height:1.55;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.report.ck li::before{display:none}
.report.ck label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink,#14213d);font-size:13px;white-space:nowrap}
.report.ck input{width:16px;height:16px;accent-color:var(--blue-2);margin:0}
.ck-paid{font-size:10px;font-weight:700;color:#fff;background:var(--navy);padding:0 5px;letter-spacing:.06em}
.ck-log{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.ck-time{font-size:10.5px;color:var(--muted);grid-template-columns:1fr!important;text-align:right}
/* 背景を選ぶチップの見本もグラデ（背景紙） */
.chip[data-bg="white"] i{background:linear-gradient(180deg,#f4f4f4,#d9d9d9)!important}
.chip[data-bg="light"] i{background:radial-gradient(circle at 50% 35%,#e0e0df,#b4b4b3)!important}
.chip[data-bg="gray"] i{background:radial-gradient(circle at 50% 35%,#b0b0af,#6c6c6b)!important}
@media (max-width:600px){
  .dl-box{grid-template-columns:1fr 1fr;gap:6px}
  .dl-box .btn{min-height:56px;font-size:13.5px;padding:6px 10px;letter-spacing:.02em}
  .btn.hq{min-height:56px}
  .dl-box .btn small{font-size:10.5px}
  .report.ck{grid-template-columns:1fr 1fr 1fr;column-gap:6px}
  .report.ck li{grid-template-columns:auto;gap:0}
  .ck-log,.ck-time,.rep__t span{display:none}
  .rep--ck{padding-top:4px}.rep__t{margin:0 0 2px;font-size:12px}
  .report.ck label{font-size:12px}
}

/* 10/20 h（E）：高画質ボタンの横に、有料で整う所（肌・歯）の小さな丸サムネ */
.hq-row{display:grid;grid-template-columns:1fr;gap:8px;align-items:center}
.hq-thumbs{display:flex;gap:6px}
.hq-thumbs figure{margin:0;text-align:center}
.hq-thumbs img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--blue-2);display:block}
.hq-thumbs figcaption{font-size:10.5px;color:var(--navy);margin-top:2px;line-height:1.2}
.btn.hq small{line-height:1.35}
@media (max-width:600px){
  .dl-box{grid-template-columns:1fr 1.25fr}
  .hq-row{grid-template-columns:1fr;gap:4px}
  .hq-thumbs{display:none}
  .btn.hq small{font-size:9.5px}
}

/* T-47：用途を選んで書き出す（折りたたみ）・丸く表示・スタジオの1行 */
.use{border-top:1px solid var(--line);padding-top:6px}
.use>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between}
.use>summary::-webkit-details-marker{display:none}
.use>summary::after{content:"＋";color:var(--blue-2);font-weight:400}.use[open]>summary::after{content:"－"}
.use__list{display:grid;gap:2px;margin:6px 0}
.use__list label{display:flex;align-items:baseline;gap:6px;font-size:13px;cursor:pointer}
.use__list small{font-size:11px;color:var(--muted)}
.use__note{margin:2px 0 6px;font-size:11.5px;color:var(--navy);background:var(--sky,#e8f0fb);padding:5px 8px}
.use__btn{--h:44px;min-height:44px!important;font-size:14px;width:100%}
.use__btn[disabled]{opacity:.45;cursor:default}
.use-frame{position:absolute;pointer-events:none;box-shadow:0 0 0 9999px rgba(11,31,58,.45);outline:2px solid #fff;z-index:3}
.use-frame.circle{border-radius:50%}
.round-tg{position:absolute;top:8px;right:8px;z-index:4;background:rgba(255,255,255,.92);font-size:12px;padding:3px 8px;display:flex;gap:4px;align-items:center;cursor:pointer;color:var(--navy)}
.compare.round .zoom-box{clip-path:circle(50% at 50% 50%)}
.round-warn{position:absolute;left:8px;top:8px;z-index:4;background:rgba(255,255,255,.95);padding:4px 6px;font-size:11.5px;color:#b00020;display:flex;flex-direction:column;align-items:center;gap:3px}
.round-warn canvas{width:72px;height:72px;border-radius:50%}
.studio-line{margin:0;font-size:12px;color:var(--muted);line-height:1.5;text-align:center}
.studio-line .studio-link{font-size:12.5px}
.dl-box .use,.dl-box .studio-line,.dl-box .dl-pay-note{grid-column:1/-1}
.round-warn{flex-direction:row;top:auto;bottom:44px;left:8px}
@media (max-width:600px){.use__list label{font-size:12px}.use__list small{font-size:10px}.studio-line{font-size:11px}}
.compare .round-warn canvas{position:static;inset:auto;width:64px;height:64px}
#dlHQ[disabled]{opacity:.55;cursor:not-allowed;filter:saturate(.6)}
.btn .soon{font-size:12px;letter-spacing:.04em;font-weight:500;white-space:nowrap}
.btn .paid-label{display:block;line-height:1.35}

/* T-50：支払い完了のトースト（画面上部・白地に細い青の枠・数秒で消える） */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:12px;background:#fff;color:var(--navy);border:1.5px solid var(--blue-2);padding:10px 12px 10px 16px;font-size:14px;font-weight:700;box-shadow:0 6px 20px rgba(2,31,54,.15);max-width:calc(100% - 32px)}
.toast[hidden]{display:none}
.toast-x{border:0;background:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1}
#dlHQ.paid{background:var(--navy)}
.toast{width:max-content}
@media (max-width:600px){.toast{left:16px;right:16px;transform:none;width:auto;font-size:13px}}

/* ── T-51：帯を大きく（写真を選ぶ前だけ。仕上がり後は今の大きさ）・読み上げ用の文 */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body:not(:has(#result:not([hidden]))) .band{gap:14px;padding-top:20px;margin-top:clamp(16px,3vh,32px)}
body:not(:has(#result:not([hidden]))) .intro{margin-top:auto}
body:not(:has(#result:not([hidden]))) .band__top{gap:4px 22px}
body:not(:has(#result:not([hidden]))) .does-open{font-size:15px}
body:not(:has(#result:not([hidden]))) .band__lead{font-size:14px}
body:not(:has(#result:not([hidden]))) .band__list{gap:14px}
body:not(:has(#result:not([hidden]))) .band__list li{flex-direction:column;align-items:flex-start;gap:8px}
body:not(:has(#result:not([hidden]))) .band__list img,body:not(:has(#result:not([hidden]))) .band__spec{flex:0 0 auto;width:80px;height:80px}
body:not(:has(#result:not([hidden]))) .band__spec{font-size:16px}
body:not(:has(#result:not([hidden]))) .band__list b{font-size:16px}
body:not(:has(#result:not([hidden]))) .band__list small{font-size:13px;white-space:normal}
body:not(:has(#result:not([hidden]))) .band .trust{font-size:13px}
@media (max-width:600px){
  body:not(:has(#result:not([hidden]))) .band{gap:10px;padding-top:12px;margin-top:12px}
  body:not(:has(#result:not([hidden]))) .does-open{font-size:13px}
  body:not(:has(#result:not([hidden]))) .band__lead{font-size:12px}
  body:not(:has(#result:not([hidden]))) .band__list{gap:14px}
  body:not(:has(#result:not([hidden]))) .band__list li{width:136px}
  body:not(:has(#result:not([hidden]))) .band__list img,body:not(:has(#result:not([hidden]))) .band__spec{width:64px;height:64px}
  body:not(:has(#result:not([hidden]))) .band__list b{font-size:15px}
  body:not(:has(#result:not([hidden]))) .band__list small{font-size:12px}
  body:not(:has(#result:not([hidden]))) .band .trust{font-size:11px}
}
@media (max-width:600px){.work__stage{width:min(100%,30dvh)}}
.band__list small{word-break:keep-all;overflow-wrap:anywhere}

/* T-54：仕上げ中のスピナー・中断の知らせ */
.status.spin::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid #cfe0f5;border-top-color:var(--blue-2,#1E8FE1);border-radius:50%;animation:ocspin .8s linear infinite}
@keyframes ocspin{to{transform:rotate(360deg)}}
.status.warn{color:#b00020}

/* ── T-60：Stripe から別タブで戻った画面（body.is-landing）。写真の枠・書き出し・やっていることは隠す（DOM は残す） */
body.is-landing .intro,body.is-landing .pick,body.is-landing #result,body.is-landing .band,body.is-landing #does,body.is-landing .modal{display:none!important}
body.is-landing .app{justify-content:flex-start;padding-top:8vh}
.land{width:min(560px,100%);display:flex;flex-direction:column;gap:clamp(20px,4vh,36px)}
.land__main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.land__head{display:flex;flex-direction:column;align-items:center;gap:12px}
.land__ck{width:56px;height:56px}
.land__h{margin:0;font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:.06em;color:var(--ink);line-height:1.5}
.land__ack{margin:0;font-size:13px;font-weight:700;color:var(--navy)}
.land__back{margin:8px 0 0;display:flex;align-items:center;gap:12px;font-size:clamp(28px,3.2vw,34px);font-weight:700;letter-spacing:.04em;line-height:1.3;color:var(--navy)}
.land__back span{font-family:var(--en);font-weight:600}
.land__sub{margin:0;font-size:15px;color:var(--text)}
.land__lost{margin:4px 0 0;font-size:15px;line-height:1.7;color:var(--ink);text-align:left}
.land__lost a{color:var(--navy);font-weight:700}
.land.no-ack .land__back,.land.no-ack .land__sub{display:none}
.btn.land__close{margin-top:14px;width:360px;max-width:100%;font-size:16px;background:var(--blue-2)}
.land__alt{margin:10px 0 0;font-size:15px;font-weight:700;color:var(--navy)}
.land__studio{border-top:1px solid var(--line);padding-top:clamp(16px,3vh,24px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.land__sh{margin:0;font-size:16px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.land__facts{margin:0;font-size:13px;color:var(--muted)}
.land__go{margin-top:8px;--h:46px;min-height:46px;font-size:14px;padding:0 28px}
@media (max-width:600px){.btn.land__close{width:100%}.land__back{font-size:28px}.land__facts{font-size:12px}}

/* ── T-60：元のタブ。支払いを確認した帯（紺・白字・×まで残す）と、購入済みのボタン・札 */
.paybar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:4px 4px 4px 16px;background:var(--navy);color:#fff;font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.45}
.paybar span{flex:0 1 auto}
.paybar-x{flex:0 0 44px;width:44px;height:44px;border:0;background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.paybar-x:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (max-width:600px){.paybar{font-size:15px;justify-content:space-between}}
#dlHQ.paid{background:var(--blue-2);min-height:60px;font-size:18px}
#dlHQ.paid::before{background:var(--navy)}
#dlHQ.paid .paid-label{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}
#dlHQ.paid small{display:none}
body[data-paid="1"] .hq-row{grid-template-columns:1fr}
body[data-paid="1"] .hq-thumbs{display:none}
.paid-tag{display:inline-block;margin-left:10px;padding:1px 10px;font-family:var(--ja);font-size:14px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--navy);vertical-align:middle}

/* T-58 透かし：after の重ねだけ（canvas には描かない＝書き出しに入らない）。after-wrap の中＝同じ clip-path で切れる */
.wm{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;z-index:1;--fx:50%;--fy:40%;--rx:0%;--ry:0%;--S:600px}
.wm__l{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy),transparent 96%,#000 100%);mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy),transparent 96%,#000 100%)}
.wm__l--face{opacity:.4;-webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy),#000 96%,transparent 100%);mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy),#000 96%,transparent 100%)}
.wm__t{position:absolute;left:50%;top:50%;width:220%;transform:translate(-50%,-50%) rotate(-30deg);display:flex;flex-direction:column;align-items:center;gap:calc(var(--S)*.26);font-family:var(--en);font-weight:600;font-size:clamp(11px,4vw,20px);line-height:1;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.28);text-shadow:0 0 2px rgba(0,0,0,.25);white-space:nowrap}
.wm__r{word-spacing:3.2em}.wm__r:nth-child(2){transform:translateX(3.4em)}
/* T-60 検品①②：スマホで折れないように */
.land__back{flex-wrap:wrap;justify-content:center;word-break:keep-all}
.land__back b{white-space:nowrap;font-weight:inherit}
@media (max-width:600px){.land__back{font-size:24px;gap:8px}}
#dlHQ.paid .paid-label{white-space:nowrap}
@media (max-width:600px){#dlHQ.paid,#dlHQ.paid .paid-label{font-size:14px;letter-spacing:0;gap:4px}#dlHQ.paid{padding:6px 8px}#dlHQ.paid .paid-ck{width:16px;height:16px}}
/* T-60A：ack なし＝写真を選び直す */
.land__lost{text-align:center}
.land__lost p{margin:0;word-break:keep-all;overflow-wrap:anywhere}
.land__lost .land__note{margin-top:8px;font-size:13px;color:var(--muted)}