/* すごろくのお知らせと制作記録: ぶどうソーダ。登録画面とゲーム本体は対象外。 */
html[data-cafe-sugoroku] .corner-page{max-width:760px}
html[data-cafe-sugoroku] header{text-align:center;padding:8px 0 4px}
html[data-cafe-sugoroku] header .cafe-mascot{width:64px;height:64px;margin:12px auto 10px}
html[data-cafe-sugoroku] header h1{font-family:Hibiya,var(--cafe-font);margin:0;letter-spacing:.12em;text-shadow:2px 2px 0 var(--cafe-tint)}
html[data-cafe-sugoroku] header .lead{margin:6px 0 0;font-size:13px;letter-spacing:.2em}
html[data-cafe-sugoroku] .notice{max-width:440px;margin:28px auto 0;padding:32px 24px;text-align:center}
html[data-cafe-sugoroku] .notice p{margin:0;font-size:17px;line-height:2;color:var(--cafe-ink)}
html[data-cafe-sugoroku] .notice__foot{margin-top:18px;font-size:13px}
html[data-cafe-sugoroku] .cafe-divider{display:flex;align-items:center;gap:14px;margin:44px 0 12px;color:var(--cafe-muted);font-size:13px;letter-spacing:.2em;white-space:nowrap}
html[data-cafe-sugoroku] .cafe-divider::before,html[data-cafe-sugoroku] .cafe-divider::after{content:"";flex:1;border-top:2px dashed var(--cafe-line)}
html[data-cafe-sugoroku] .making-lead{max-width:640px;margin:0 auto;font-size:13px;text-align:center;line-height:1.8;padding:0 10px}
html[data-cafe-sugoroku] .making-frame{display:block;width:100%;height:1400px;margin:18px 0 0;border:2px solid var(--cafe-line);background:var(--cafe-paper);box-shadow:4px 4px 0 var(--cafe-line)}
html[data-cafe-sugoroku] .making-open{display:block;width:fit-content;min-height:44px;margin:18px auto 0;font-size:14px;text-underline-offset:6px}
html[data-cafe-sugoroku] .corner-page footer{margin-top:44px}
@media(max-width:680px){html[data-cafe-sugoroku] .corner-page{padding:20px 16px 56px}html[data-cafe-sugoroku] .notice{padding:26px 18px}html[data-cafe-sugoroku] .cafe-divider{gap:10px}}

/* 制作記録の本文。単体表示ではクリーム紙の一枚、お知らせに埋め込んだときは紙の内側として平らに。 */
html[data-cafe-making]{--warn-bg:#fff0f5;--warn-line:#e7a9c2;--warn-ink:#b1436d}
html[data-cafe-making] .wrap{max-width:740px;margin:24px auto;padding:clamp(24px,5vw,44px) clamp(18px,5vw,32px) 48px;background:var(--cafe-paper);border:2px solid var(--cafe-line);box-shadow:4px 4px 0 var(--cafe-line)}
html[data-cafe-making] header{text-align:left}
html[data-cafe-making] header .cafe-mascot{width:64px;height:64px;margin:0 0 16px}
html[data-cafe-making] h1{font-size:clamp(22px,4.5vw,28px);font-weight:400;letter-spacing:.06em}
html[data-cafe-making] .sub,html[data-cafe-making] p,html[data-cafe-making] .cap,html[data-cafe-making] .meta,html[data-cafe-making] .list .d,html[data-cafe-making] .bul li,html[data-cafe-making] .facts th,html[data-cafe-making] .phone figcaption,html[data-cafe-making] footer{color:var(--cafe-muted)}
html[data-cafe-making] .meta b,html[data-cafe-making] .list .t,html[data-cafe-making] .bul b,html[data-cafe-making] .facts td,html[data-cafe-making] .spec b,html[data-cafe-making] .disc p{color:var(--cafe-ink)}
html[data-cafe-making] h2{border-bottom:2px dashed var(--cafe-line);padding-bottom:8px}
html[data-cafe-making] .disc{border-left:6px solid var(--cafe-accent);border-radius:0}
html[data-cafe-making] .disc .lbl{color:var(--cafe-accent)}
html[data-cafe-making] .facts th,html[data-cafe-making] .facts td{border-bottom:1px dotted var(--cafe-line)}
html[data-cafe-making] .shot,html[data-cafe-making] .phone img{border:2px solid var(--cafe-line);border-radius:0;box-shadow:4px 4px 0 var(--cafe-line);image-rendering:auto}
html[data-cafe-making] .spec{border-radius:0}
html[data-cafe-making] .spec h3{border-top:1px dotted var(--cafe-line)}
html[data-cafe-making] .spec .num,html[data-cafe-making] .spec ol li::before,html[data-cafe-making] .spec .chk li::before,html[data-cafe-making] details.spec-wrap>summary{color:var(--cafe-accent)}
html[data-cafe-making] .spec .warn{border-radius:0;border:2px solid var(--warn-line);background:var(--warn-bg)}
html[data-cafe-making] .spec .warn .wh{color:var(--warn-ink)}
html[data-cafe-making] .spec table th,html[data-cafe-making] .spec table td{border:1px solid var(--cafe-line)}
html[data-cafe-making] .spec table th{background:var(--cafe-tint)}
html[data-cafe-making] footer{border-top:2px dashed var(--cafe-line)}
html[data-cafe-making] a:focus-visible{outline:2px dashed var(--cafe-accent);border-radius:0}
html[data-cafe-making][data-cafe-embedded] body{background:var(--cafe-paper);min-height:0}
html[data-cafe-making][data-cafe-embedded] .wrap{margin:0 auto;padding:clamp(20px,4vw,32px) clamp(16px,4vw,28px) 40px;border:0;box-shadow:none}
html[data-cafe-making][data-cafe-embedded] header .cafe-mascot{display:none}
@media(max-width:680px){html[data-cafe-making] .wrap{margin:16px 12px}}