/* 公式サイトのトップの、教材の先行予約の入口（2026-10-20 TOKEN-YOYAKU-20261020-26 の答え）。色はサイトの紺と金にそろえる。
   発売の後は、index.html の body から data-yoyaku="on" を消すと、入口がすべて消えて今のトップに戻る */
body.mainsite .ymh-stage .nav .preorder-nav{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid #e8d29a;background:var(--polished-gold,linear-gradient(135deg,#c9a45c,#f1dc9f,#b88a3e));color:#120d05;font-size:12.5px;font-weight:700;white-space:nowrap;text-decoration:none;box-shadow:0 4px 18px #00000040}
.sheet .sheet-preorder-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;min-height:48px;border-radius:999px;background:var(--polished-gold,#d6b070);color:#120d05;font-weight:700;text-decoration:none}
.pre-nw{white-space:nowrap;display:inline-block}
.pre-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 22px;border-radius:999px;background:var(--polished-gold,linear-gradient(135deg,#c9a45c,#f1dc9f,#b88a3e));color:#120d05;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;border:1px solid #e8d29a}
.pre-go:focus-visible,.p5-mailonly:focus-visible{outline:3px solid #f9e4aa;outline-offset:3px}
.p5-eye{margin:0;font-size:13px;color:#f3dfae;letter-spacing:.04em}
.p5-h{margin:4px 0 8px;font-size:24px;line-height:1.3;color:#fff7e4;font-weight:800}
.p5-p{margin:0 0 14px;font-size:14px;line-height:1.75;color:#e8e1d2}
[data-pre] img{display:block;width:100%;aspect-ratio:1280/670;object-fit:cover;border-radius:10px;border:1px solid #d8bd7e80}
.p5-left{position:absolute;z-index:3;left:4%;bottom:0;width:283px;padding:16px;border-radius:16px;background:#0a1b22e6;border:1px solid #bda56c99;color:#f6efe0;box-shadow:0 12px 40px #05131c60}
[data-pre],[data-pre] *{text-align:left !important}
/* 右下の欄を、メルマガの登録から先行予約の欄にする。「メルマガだけ登録する」を押すと、今の登録の欄が出る */
body[data-p5="mailcard"][data-yoyaku="on"] .p5-mail-orig{display:none}
body[data-p5="mailcard"][data-yoyaku="on"]:not(.p5-mail-open) #p5-mailform{display:none}
body[data-p5="mailcard"][data-yoyaku="on"].p5-mail-open .p5-mailonly{display:none}
.p5-mail{color:#f6efe0}
.p5-mail .p5-h{font-size:23px;margin-bottom:10px}
.p5-h-sub{display:block;font-size:15px;color:#f3dfae;font-weight:700;margin-top:2px}
.p5-mail img{margin-bottom:12px}
.p5-mail .p5-p{font-size:13.5px}
.p5-mail .pre-go{display:flex;width:100%}
.p5-mailonly{display:block;width:100%;margin:10px 0 0;min-height:44px;padding:8px;border-radius:999px;border:1px solid #f6efe099;background:transparent;color:#f6efe0;font:inherit;font-size:14.5px;cursor:pointer}
#mail .mail .p5-mailonly{margin-top:14px !important;background:transparent !important;color:#f6efe0 !important;border:1px solid #f6efe0a0 !important;box-shadow:none !important;font-weight:700;text-align:center !important}
#mail .mail .p5-mailonly:hover{background:#ffffff14 !important}
.p5-sponly{display:none}
@media(max-width:1000px){
 body.mainsite .ymh-stage .nav .preorder-nav{grid-column:1 / -1;grid-row:3;justify-content:center;font-size:16px}
 body.mainsite[data-yoyaku="on"][data-yoyaku-nav]:not([data-yoyaku-ue])[data-mercury-layout] .ymh-hero.hero.ymh-mercury h1{top:max(200px,38cqw)}
 /* スマホの幅では、写真の下の端に小さな箱を重ねる */
 .p5-sponly{display:block}
 .p5-left.p5-sponly{display:grid}
 .p5-left{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;position:absolute;left:14px;right:14px;bottom:14px;width:auto;padding:12px 14px;border-radius:14px}
 .p5-left .p5-eye{grid-column:1/-1;font-size:12px}
 .p5-left .p5-h{margin:2px 0 0 !important;font-size:19px}
 .p5-left .p5-p{display:none}
 .p5-left .pre-go{width:auto !important;padding:8px 14px !important;font-size:14px !important;min-height:44px}
}
/* 発売の後の切り替え。data-yoyaku="on" を消すと、予約の入口がすべて消えて今のトップに戻る */
body:not([data-yoyaku="on"]) :is(.preorder-nav,.sheet-preorder-cta,[data-pre]){display:none !important}