/* Stage A v0.10 visual system. C04 comparison structure only. */
:root{--bg:#F6F3EC;--paper:#FFFDF9;--ink:#242824;--muted:#70756F;--line:#DDDCD5;--green:#315F4C;--green2:#E7EFE9;--sand:#EFE8DA;--blue:#EAF0F2;--shadow:0 10px 28px rgba(32,38,33,.075);--pad:18px}
*{box-sizing:border-box}
html{line-break:strict;word-break:normal;scroll-behavior:auto;background:var(--bg)}
body{margin:0;display:flex;justify-content:center;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
button,summary{font:inherit;touch-action:manipulation}
button{cursor:pointer}
button:focus-visible,summary:focus-visible{outline:3px solid #86A997;outline-offset:3px}
.app{width:min(100%,430px);min-height:100svh;background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.top{height:56px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,253,249,.96);border-bottom:1px solid rgba(0,0,0,.045);position:sticky;top:0;z-index:7;backdrop-filter:blur(10px)}
.brand{font-size:12px;letter-spacing:.04em;font-weight:700}.progress{font-size:12px;color:var(--muted)}
main{padding:27px var(--pad) calc(52px + env(safe-area-inset-bottom))}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-break:strict;word-break:normal;text-wrap:pretty}
.kicker{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--green);margin:0 0 11px}
.result-title{font-size:28px;letter-spacing:-.025em;line-height:1.38;font-weight:800;margin:0 0 14px}
.result-lead{font-size:15px;line-height:1.76;color:#4d534e;margin:0 0 18px}
.theme-photo{width:100%;height:138px;border-radius:17px;position:relative;overflow:hidden;background:var(--sand);border:1px solid rgba(49,95,76,.09)}
.theme-photo img{width:100%;height:100%;object-fit:cover;object-position:center 53%;display:block}
.image-caption{font-size:10.5px;line-height:1.55;color:var(--muted);margin:8px 1px 17px}
.pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 9px}
.pair-tile{min-width:0;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.pair-body{padding:13px 12px 12px;display:flex;flex-direction:column;flex:1}
.name-row{display:flex;align-items:flex-start;gap:7px;min-height:42px;margin:0 0 8px}
.pair-name{font-size:15.5px;line-height:1.35;letter-spacing:-.01em;font-weight:800;margin:0}
.company-mark{flex:none;font-weight:900;font-size:13px;line-height:1.5}.company-mark.a{color:#6e8791}.company-mark.b{color:#688b76}
.pair-small{font-size:12px;line-height:1.56;color:#4e5b51;min-height:79px;margin:0 0 11px}
.point-button{width:100%;margin-top:auto;border:1px solid rgba(49,95,76,.11);border-radius:11px;padding:10px 7px;background:var(--green2);color:#214b3a;font-size:12px;font-weight:800;line-height:1.35}
.order-note{font-size:11px;line-height:1.65;color:var(--muted);text-align:center;margin:0 0 22px}
/* A single disclosure replaces both old synopsis card and detail navigation. */
.comparison{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 22px;padding:0}
.comparison summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:93px;padding:16px 2px 17px;cursor:pointer}
.comparison summary::-webkit-details-marker{display:none}
.summary-copy{display:block;flex:1;min-width:0}
.summary-title{display:block;font-size:17px;font-weight:800;line-height:1.5;margin:0 0 4px}
.summary-subtitle{display:block;font-size:12px;color:#59655d;line-height:1.6;margin:0}
.summary-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid #dce4de;border-radius:50%;background:var(--green2);color:var(--green);transition:transform .15s ease}.summary-icon::before{content:"";width:7px;height:7px;border-right:1.8px solid var(--green);border-bottom:1.8px solid var(--green);transform:rotate(45deg) translate(-1px,-1px)}
.comparison[open] .summary-icon{transform:rotate(180deg)}
.comparison-content{padding:0 0 22px;animation:appear .16s ease-out}
.compare-intro{font-size:12.5px;line-height:1.65;color:#606a62;margin:0 0 14px}
/* Static key only once in expanded details. No recurring or sticky company-name bands. */
.legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin:0 0 6px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.legend span{font-size:11.5px;line-height:1.5;color:#536057}
.legend b{font-weight:800;color:var(--ink)}
.axis{padding:19px 0 18px;border-bottom:1px solid var(--line)}
.axis:last-of-type{border-bottom:0;padding-bottom:14px}
.axis-title{font-size:16px;line-height:1.52;font-weight:800;margin:0 0 11px}
.axis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.axis-panel{min-width:0;min-height:128px;padding:15px 12px;border-radius:13px;position:relative;display:flex;flex-direction:column;justify-content:flex-start}
.axis-panel.a{background:var(--blue)}.axis-panel.b{background:var(--green2)}
.axis-label{font-size:10px;line-height:1;margin:0 0 7px;font-weight:900}.axis-label.a{color:#5f7f8b}.axis-label.b{color:#61846b}
.axis-text{font-size:12.5px;line-height:1.72;color:#404943;margin:0;overflow-wrap:anywhere}
.takeaway{border-top:1px solid var(--line);padding:17px 0 5px}
.takeaway h3{font-size:15px;line-height:1.55;margin:0 0 8px}
.takeaway ul{margin:0;padding-left:19px}.takeaway li{font-size:12.8px;line-height:1.73;color:#414b44;margin:4px 0}
.linkbtn{border:0;background:none;font-size:12.5px;font-weight:800;color:var(--green);padding:14px 0 3px;text-align:left}
.actions{margin-top:4px}
.primary{width:100%;min-height:52px;padding:15px 16px;border:0;border-radius:14px;background:var(--green);color:#fff;font-size:15px;font-weight:800;box-shadow:0 6px 16px rgba(49,95,76,.14)}
.primary:hover{background:#294e3e}
.proto-note{font-size:11px;line-height:1.7;color:var(--muted);margin:15px 0 0}
/* Native dialog with a bottom-sheet silhouette */
dialog.sheet{position:fixed;inset:auto 0 0;margin:0;border:0;border-radius:22px 22px 0 0;width:min(100%,430px);max-width:none;max-height:min(76svh,720px);overflow:auto;background:var(--paper);padding:19px var(--pad) calc(25px + env(safe-area-inset-bottom));color:var(--ink);box-shadow:0 -18px 55px rgba(0,0,0,.18)}
dialog.sheet::backdrop{background:rgba(25,28,25,.38)}
.sheet-handle{height:4px;width:38px;border-radius:99px;background:#c8cbc7;margin:0 auto 16px}
.sheet-company{font-size:12px;line-height:1.4;color:var(--muted);font-weight:700;margin:0 0 8px}
.sheet-title{font-size:19px;line-height:1.45;font-weight:800;margin:0 0 12px}
.sheet-body{font-size:13px;line-height:1.76;color:#5e645f;background:#f4f3ee;border-radius:13px;padding:14px;margin:0 0 13px}
.sheet-close{width:100%;padding:13px;border-radius:12px;border:1px solid var(--line);background:#efeee8;font-weight:700;color:var(--ink)}
@keyframes appear{from{opacity:.7;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:350px){:root{--pad:14px}.top{height:54px}main{padding-top:22px}.result-title{font-size:24px;line-height:1.4}.result-lead{font-size:14px;line-height:1.70}.theme-photo{height:115px}.pair-grid{gap:8px}.pair-body{padding:11px 9px}.name-row{min-height:37px;gap:5px}.pair-name{font-size:13px}.company-mark{font-size:10px}.pair-small{font-size:11.5px;min-height:95px}.point-button{font-size:11px;padding:9px 5px}.axis-grid{grid-template-columns:1fr;gap:8px}.axis-panel{min-height:auto;padding:12px 13px}.axis-title{font-size:15px}.axis-text{font-size:13px}.comparison summary{min-height:87px}.summary-title{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}



/* C04 v3: Stage A visual restored; the original maker names are the only maker-name band. */
.pair-name-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;z-index:5;margin:0 0 0;padding:0 0 8px;background:var(--paper)}
.pair-heading{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:45px;border-radius:13px;padding:10px 5px}
.pair-heading.a{background:#EAF0F2}.pair-heading.b{background:#E7EFE9}
.pair-heading-name{color:var(--ink);font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.017em;white-space:nowrap}
.pair-grid{margin-top:0;gap:10px}
.pair-tile{border-top-left-radius:11px;border-top-right-radius:11px;box-shadow:none}
.pair-body{padding:12px 12px 13px}
.pair-small{min-height:65px;margin:0 0 8px}
/* When comparison is expanded, the existing pair header itself becomes sticky;
   there is no second copy of manufacturer names and no extra rail. */
body.is-expanded .pair-name-band{position:sticky;top:56px;z-index:6;padding:7px 0 8px;margin-top:-7px;box-shadow:0 8px 12px -13px rgba(26,40,31,.35)}
body.is-comparing .top .brand{font-size:12.2px;letter-spacing:-.025em;white-space:nowrap}
.axis-title{text-align:center;text-wrap:balance;margin:0 auto 14px;max-width:29em}
.takeaway h3{text-align:center}
.axis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.axis-panel{min-height:0;padding:14px 11px;}
.axis-text{font-size:12.4px;line-height:1.72;overflow-wrap:normal;word-break:normal;line-break:strict}
.axis{scroll-margin-top:124px}
.comparison-content{animation:none;padding-top:3px}
/* No additional fixed title; the existing top bar text changes from brand to approved title. */
body.is-comparing .top .brand{font-size:13.3px;letter-spacing:-.015em;text-align:center;width:100%;line-height:1.4}
body.is-comparing .top .progress{display:none}

@media(max-width:350px){
 .pair-name-band{gap:8px;padding-bottom:7px}
 .pair-heading{min-height:42px;padding:9px 3px;border-radius:11px}
 .pair-heading-name{font-size:12.9px;letter-spacing:-.025em}
 .pair-grid{gap:8px}
 .pair-body{padding:11px 9px 12px}
 .pair-small{font-size:11.7px;min-height:78px}
 .axis-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
 .axis-panel{min-height:0;padding:11px 9px}
 .axis-text{font-size:12.4px;line-height:1.7;overflow-wrap:normal;word-break:normal}
 .axis-title{font-size:15px;line-height:1.56}
 .top{height:54px}
 body.is-expanded .pair-name-band{top:54px}
 body.is-comparing .top .brand{font-size:12.6px}
 .axis{scroll-margin-top:112px}
}

/* v5｜v3 の2列比較・メーカー名の追従を維持した限定的な文字組み調整 */
.result-title{text-align:center;margin-bottom:18px}
.result-lead{text-align:left;font-size:14.5px;line-height:1.91;margin-bottom:20px;letter-spacing:.003em}
.theme-photo{height:146px}
.theme-photo>img{position:static;width:100%;height:100%;object-fit:cover;object-position:center 53%;display:block}
.image-caption{text-align:center;font-size:10.5px;line-height:1.65;margin-bottom:18px}
.pair-small{text-align:left;font-size:12.4px;line-height:1.76;min-height:72px}
.comparison summary{position:relative;display:flex;justify-content:center;text-align:center;padding:19px 38px;min-height:88px}
.summary-copy{text-align:center;flex:1}
.summary-icon{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.comparison[open] .summary-icon{transform:translateY(-50%) rotate(180deg)}
.linkbtn{display:block;width:100%;text-align:center;font-size:12.5px;line-height:1.72;padding:18px 0 6px}
.axis-panel{padding:16px 12px}
.axis-text{text-align:left;font-size:12.6px;line-height:1.88}
.takeaway li{font-size:13px;line-height:1.85;margin:7px 0}
.sheet-body{font-size:13.5px;line-height:1.85}
@media(max-width:350px){
 .result-title{font-size:24px}
 .result-lead{font-size:14px;line-height:1.86}
 .theme-photo{height:120px}
 .pair-small{font-size:12px;line-height:1.75;min-height:80px}
 .axis-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
 .axis-panel{padding:13px 9px}
 .axis-text{font-size:12.3px;line-height:1.82}
 .comparison summary{padding:18px 34px}
 .summary-title{font-size:16px}
 .takeaway li{font-size:12.8px}
}

/* v7｜同じ写真をその場所で縮めながら追従。固定画像の別コピーには切り替えない。 */
.theme-photo{position:sticky;top:56px;z-index:6;will-change:height;transition:box-shadow .2s ease}
/* 隣接する縦マージンの相殺を避け、画像の高さが変わっても下部を跳ねさせない。 */
.image-caption{margin-top:0;padding-top:8px}
.photo-marker{display:block;height:0;pointer-events:none}
body.has-sticky-photo .theme-photo{box-shadow:0 7px 18px rgba(25,43,30,.10)}
body.is-expanded.has-sticky-photo .pair-name-band{top:calc(56px + var(--sticky-photo-height,72px))}
.point-button{background:#F6F5F1;border-color:#D8DAD3;color:#354039}
.point-button:hover{background:#EBEBE6}
/* v9｜写真の直角を維持。補助操作は枠・矢印で示し、濃色の主ボタンと視覚的に区別する。 */
.theme-photo{border-radius:0;border:0}
.point-button{position:relative;border:1px solid #B2B9BA;background:#F3F4F2;color:#343B3D;padding:10px 22px;border-radius:9px;box-shadow:0 1px 3px rgba(39,44,48,.055);letter-spacing:.005em}
.point-button::after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-53%);font-size:17px;font-weight:600;line-height:1;color:#50585B}
.point-button:hover{background:#E9ECEA;border-color:#899497}
.point-button:active{transform:translateY(1px);background:#E3E7E5;box-shadow:none}
/* 比較の展開ボタンも企業色と切り離す。 */
.summary-icon{background:#F2F1EE;border-color:#BFC2C2;color:#3D4346}
.summary-icon::before{border-right-color:#3D4346;border-bottom-color:#3D4346}
/* v10｜確定文言を変えず、冒頭の見出しと説明の読点・文単位で呼吸をつける。 */
.result-title{max-width:350px;margin:0 auto 23px;font-size:27px;font-weight:700;line-height:1.49;letter-spacing:-.028em}
.result-lead{max-width:350px;margin:0 auto 22px;color:#424A45;font-size:14.5px;line-height:1.80;letter-spacing:.005em;text-align:left}
.lead-paragraph{display:block}
.lead-paragraph + .lead-paragraph{margin-top:11px}
@media(max-width:350px){
 .theme-photo{top:54px}
 .result-title{font-size:23.5px;line-height:1.50;margin-bottom:21px}
 .result-lead{font-size:14px;line-height:1.77;margin-bottom:20px}
 .lead-paragraph + .lead-paragraph{margin-top:10px}
 body.is-expanded.has-sticky-photo .pair-name-band{top:calc(54px + var(--sticky-photo-height,58px))}
}