/* 試作B（2026-10-23）：Stripe を ENISHI のページに組み込む形のチェックアウト。押すボタンは1つ、押せない時は押せない顔。
   見本：比べる表の B（output/enishi_checkout_比較_Shopify_Stripe_2026-10-23）。入力欄は Stripe の見た目に寄せた試作で、何も送らない */
.proto-flag{position:relative;z-index:70;padding:7px 12px;background:#1f2a52;color:#fff;font:700 12.5px/1.4 -apple-system,"Hiragino Sans",sans-serif;text-align:center;letter-spacing:.02em}
.ckb-main{max-width:1080px;margin:0 auto;padding:6px 20px 40px}
.ckb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;gap:22px;align-items:start}
.ckb-order{grid-column:1;grid-row:1;padding:18px}
.ckb-pay{grid-column:2;grid-row:1 / span 2;padding:20px 20px 22px}
.ckb-grid .ck-facts{grid-column:1;grid-row:2}
.ckb-item{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;margin:0 0 12px}
.ckb-item img{width:120px;height:80px;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px rgba(201,162,90,.6)}
.ckb-item h2{margin:0 0 3px;font:700 19px/1.25 var(--serif)}
.ckb-item p{margin:0 0 4px;font-size:13.5px;color:var(--muted);line-height:1.45}
.ckb-item .to-plans{font-size:13.5px;font-weight:700;color:var(--red-d)}
.ckb-lines{margin:0 0 12px;border-top:1px dashed var(--line)}
.ckb-lines>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.ckb-lines dt{color:var(--ink)}.ckb-lines dd{margin:0;font-weight:700;white-space:nowrap}
.ckb-lines .muted dt,.ckb-lines .muted dd{color:var(--muted);font-weight:500}
.ckb-total{align-items:baseline;border-bottom:0!important;padding-top:12px!important}
.ckb-total dt{font:800 17px/1.2 var(--sans)}.ckb-total dd{font:800 26px/1 var(--sans);color:var(--red-d)}
.ckb-renew{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#f3ead9;font-size:13.5px;line-height:1.5}
.ckb-up{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.ckb-up[hidden]{display:none}
.ckb-uplink{display:inline;margin:0;padding:0;border:0;background:none;color:var(--red-d);font:800 13.5px/1.5 var(--sans);text-decoration:underline;text-decoration-color:#c9a25a;text-underline-offset:3px;cursor:pointer}
.ckb-sec{display:flex;align-items:center;gap:9px;margin:4px 0 10px;font:700 17px/1.3 var(--serif)}
.ckb-sec span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font:800 12.5px/1 var(--sans)}
.ckb-xp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xp{height:48px;border:0;border-radius:10px;font:700 16px/1 -apple-system,"Helvetica Neue",Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:transform .12s}
.xp:active{transform:scale(.97)}
.xp-apple{background:#000;color:#fff}.xp-apple b{font-size:18px}
.xp-gpay{background:#000;color:#fff}.xp-gpay b{font-weight:800}
.xp-link{grid-column:1/-1;background:#00d66f;color:#011e0f;font-weight:800;letter-spacing:-.01em}
.ckb-or{display:flex;align-items:center;gap:10px;margin:14px 0 16px;color:var(--muted);font-size:13px}
.ckb-or:before,.ckb-or:after{content:"";flex:1;height:1px;background:var(--line)}
.se{margin:0 0 14px}
.se-f{display:block;margin:0 0 10px}
.se-f>span{display:block;margin:0 0 4px;font:600 13px/1.3 var(--sans);color:#5c5245}
.se-f input{width:100%;height:46px;padding:0 12px;border:1px solid #dccbb0;border-radius:8px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.02);font:16px/1 -apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--ink);outline:0;transition:border-color .15s,box-shadow .15s}
.se-f input:focus{border-color:#b8202f;box-shadow:0 0 0 3px rgba(184,32,47,.16)}
.se-f input::placeholder{color:#a69b8b}
.se-country{position:relative}
.se-country input{background:#f6efe2;color:var(--ink);font-weight:600}
.se-country i,.se-card i{position:absolute;right:12px;bottom:14px;font-style:normal;font-size:11.5px;color:var(--muted)}
.se-card{position:relative}
.se-card .brands{display:flex;gap:4px}
.se-card .brands em{font-style:normal;font:800 9.5px/1 var(--sans);padding:3px 4px;border-radius:3px;background:#efe6d6;color:#5c5245}
.se-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.se-zip{max-width:50%}
.ckb-agree{display:flex;gap:12px;align-items:flex-start;margin:6px 0 16px;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:#fffdf8;font-size:13.5px;line-height:1.55;cursor:pointer;transition:border-color .2s,background .2s}
.ckb-agree:has(input:checked){border-color:#b8202f;background:#fff6f3;box-shadow:0 0 0 3px rgba(184,32,47,.08)}
.ckb-agree input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--red)}
.ckb-agree.need{animation:dlPop .4s ease-out;border-color:#b8202f}
/* 本命のボタン（1つだけ）：赤＋金の縁＋本物の白いロゴ＋流れる光。押せない時は生成りの点線の札 */
.ckb-go-wrap{position:relative}
.ckb-go{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;padding:0 18px;border-radius:999px;cursor:pointer;text-decoration:none;font:800 18px/1.2 var(--sans);color:#fff;background:linear-gradient(180deg,#d42c3d 0%,#b8202f 55%,#9c1726 100%);border:2px solid #f0d28a;box-shadow:0 0 0 4px rgba(184,32,47,.14),0 16px 30px rgba(156,23,38,.38),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s,background .25s,color .25s,border-color .25s;-webkit-tap-highlight-color:transparent;user-select:none}
.ckb-go .knot{flex:0 0 30px;width:30px;height:30px;background:url("images/logo_mark_white.png") center/contain no-repeat;transition:transform .5s}
.ckb-go::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 32%,rgba(255,240,200,.65) 46%,transparent 60%);transform:translateX(-130%);animation:ckbSheen 3.4s ease-in-out .8s infinite}
.ckb-go:not([aria-disabled="true"]){animation:ckbBreath 2.6s ease-in-out infinite}
.ckb-go:not([aria-disabled="true"]):active{transform:scale(.97)}
.ckb-go[aria-disabled="true"]{color:#7d6c55;background:#fbf6ec;border:2px dashed #c9a25a;box-shadow:none;animation:none}
.ckb-go[aria-disabled="true"]::before{display:none}
.ckb-go[aria-disabled="true"] .knot{background-image:url("images/logo_mark.png");opacity:.5}
.ckb-go.just-open{animation:ckbOpen .6s cubic-bezier(.2,.9,.3,1.3)}
.ckb-go.just-open .knot{transform:rotate(360deg)}
.ckb-go.paying .knot{animation:ckbSpin .9s linear infinite}
@keyframes ckbSheen{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes ckbBreath{0%,100%{box-shadow:0 0 0 4px rgba(184,32,47,.14),0 16px 30px rgba(156,23,38,.38),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 9px rgba(240,210,138,.38),0 18px 36px rgba(156,23,38,.45),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes ckbOpen{0%{transform:scale(.95)}55%{transform:scale(1.05)}100%{transform:none}}
@keyframes ckbSpin{to{transform:rotate(360deg)}}
.ckb-hint{margin:10px 0 0;text-align:center;font:700 13.5px/1.4 var(--sans);color:var(--muted)}
.ckb-secure{display:flex;gap:8px;justify-content:center;margin:12px 0 8px;font-size:12.5px;color:var(--muted);text-align:center}
/* 下の帯：押せない時は生成りの札（Tick the box ↑）、押せる時だけ赤 */
.ckb-bar .ckb-go{flex:1 1 auto;min-height:52px;margin:0;font-size:16px;gap:6px;white-space:nowrap}
.ckb-bar .ckb-go::before{animation-delay:1.6s}
.proto-toast{position:fixed;left:50%;bottom:92px;z-index:80;max-width:min(92vw,440px);padding:12px 16px;border-radius:14px;background:rgba(31,42,82,.96);color:#fff;font:600 13.5px/1.5 -apple-system,"Hiragino Sans",sans-serif;box-shadow:0 12px 28px rgba(0,0,0,.25);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.proto-toast.on{opacity:1;transform:translate(-50%,0)}
.ckb-burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:75}

/* 2026-10-23 確認で直した：ページのリンクの色（.shop a）に負けて字が暗い赤になっていた → 白に。長い文が2行に折れていた → 1行 */
.ckb .ckb-go,.ckb .ckb-go .t{color:#fff;text-decoration:none}
.ckb .ckb-go[aria-disabled="true"],.ckb .ckb-go[aria-disabled="true"] .t{color:#7d6c55}
.ckb-go .t{white-space:nowrap;font-size:clamp(16px,4.6vw,19px)}
@media (max-width:860px){
.ckb-grid{grid-template-columns:1fr;gap:16px}
.ckb-order,.ckb-pay,.ckb-grid .ck-facts{grid-column:1;grid-row:auto}
.ckb-order{padding:14px}.ckb-pay{padding:16px 14px 18px}
.ckb-item{grid-template-columns:96px minmax(0,1fr)}.ckb-item img{width:96px;height:64px}
.ckb-total dd{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.ckb-go,.ckb-go::before,.ckb-go .knot{animation:none!important;transition:none!important}}
/* 2026-10-23 本物の Stripe の部品（テスト環境）を置く場所 */
.stripe-slot{margin:0 0 12px;min-height:44px}
.ckb-xpwrap{min-height:52px}
.ckb-xp-none{margin:6px 0 0;padding:10px 12px;border-radius:10px;background:#f3ead9;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}
.ckb-xp-none[hidden]{display:none}
.ckb-note-us{margin:-4px 0 14px;font-size:12.5px;color:var(--muted)}
.ckb-err{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fbeceb;color:#9c1726;font-size:13.5px;font-weight:700}
.ckb-err[hidden]{display:none}

/* 2026-10-23 逃げ道：Stripe の部品が出ない時は、部品の欄を隠して決済リンクへ進むボタンだけにする */
.ckb-fallback .ckb-pay .ckb-sec,.ckb-fallback .ckb-pay .stripe-slot,.ckb-fallback .ckb-xpwrap,.ckb-fallback .ckb-or,.ckb-fallback .ckb-note-us{display:none}
.ckb-fallback .ckb-err{background:#fff7e6;color:#5c4a1e}

/* 2026-10-29 案：同意の欄を合計のすぐ下へ（注文のまとめの中）。文は変えていない */
.ckb-order .ckb-agree{margin:12px 0 6px}

/* 2026-11-03（v036）1箱 $65：送料の行は箱の下に少し小さめ（判断の記録 240）・冊子の行・頭のロゴ（286・291） */
.ckb-lines .ship dt,.ckb-lines .ship dd{font-size:12.5px;font-weight:600;color:var(--muted)}
.ckb-lines .incl dd{font-weight:600;color:var(--muted)}
.ck-brand img.brand-logo{width:auto;height:52px}