:root{--bg:#fff8ec;--bg2:#fdf0d8;--card:#fffdf7;--ink:#4a2c10;--ink2:#7a5530;--honey:#f2b33d;--honey2:#e08a1e;--leaf:#5fa93a;--leaf2:#3d7d22;--line:#ecd3a3;--red:#d8503a;--sky:#3a8fd0;
 --fj:"Zen Maru Gothic","M PLUS Rounded 1c","Hiragino Maru Gothic ProN",system-ui,sans-serif;--fe:"Fredoka","Zen Maru Gothic",system-ui,sans-serif;--ft:"Mitr","Noto Sans Thai",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.75 var(--fj);-webkit-text-size-adjust:100%}
html[lang=en] body{font-family:var(--fe)}html[lang=th] body{font-family:var(--ft);line-height:1.8}
img{max-width:100%;height:auto;display:block}a{color:var(--honey2)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:18px}
/* ヘッダー */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,248,236,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:14px;height:62px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:900 20px var(--fe);letter-spacing:.04em;white-space:nowrap}
.logo img{width:38px;height:38px;border-radius:10px}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav a{padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--ink2);font-weight:800;font-size:14px;white-space:nowrap}
.nav a:hover,.nav a.on{background:#ffe7b0;color:var(--ink)}
.lang{display:flex;gap:4px;margin-left:6px}.lang a{padding:5px 9px;border-radius:999px;border:2px solid var(--line);text-decoration:none;color:var(--ink2);font:800 12px var(--fe)}.lang a.on{background:var(--honey);border-color:var(--honey2);color:#fff}
@media (max-width:860px){.hd .wrap{height:auto;flex-wrap:wrap;padding-block:8px;gap:6px}.nav{order:3;width:100%;margin-left:0}.lang{margin-left:auto}}
/* ヒーロー */
.hero{position:relative;overflow:hidden;background:#f6d9a0}
.hero img.bg{width:100%;aspect-ratio:16/9;object-fit:cover;max-height:82vh}
.hero .cta{position:absolute;left:0;right:0;bottom:4%;display:flex;flex-direction:column;align-items:center;gap:10px;padding-inline:16px;text-align:center}
.hero .catch{font:900 clamp(18px,3vw,34px)/1.3 var(--fj);color:#fff;text-shadow:0 2px 0 #8a4a10,0 0 14px rgba(120,60,0,.8)}
html[lang=th] .hero .catch{font-family:var(--ft)}
.btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:6px;padding:12px 26px;border-radius:999px;background:linear-gradient(#ffd56a,#f2a92a);color:#4a2408;font-weight:900;text-decoration:none;box-shadow:0 0 0 3px #fff3cf inset,0 4px 0 #b06a10,0 6px 16px rgba(120,60,0,.35);border:none;cursor:pointer;font-size:16px}
.btn.g{background:linear-gradient(#a8e07a,#5fa93a);color:#fff;box-shadow:0 0 0 3px #e0ffd0 inset,0 4px 0 #2f6a18,0 6px 16px rgba(30,80,10,.3);text-shadow:0 1px 2px #2a5a10}
.btn.w{background:#fff;color:var(--ink2);box-shadow:0 0 0 2px var(--line) inset,0 4px 0 #d6b880}
.btn:hover{transform:translateY(-1px)}
/* セクション */
section{padding-block:64px}section.alt{background:var(--bg2)}
.sh{text-align:center;margin-bottom:28px}
.sh .en{font:700 13px var(--fe);letter-spacing:.3em;color:var(--honey2)}
.sh h2{margin:4px 0 8px;font:900 clamp(24px,3.4vw,36px)/1.3 var(--fj);text-wrap:balance}html[lang=th] .sh h2{font-family:var(--ft);font-weight:700}
.sh p{margin:0 auto;max-width:44em;color:var(--ink2)}
.deco{display:inline-block;width:46px;height:6px;border-radius:9px;background:linear-gradient(90deg,var(--honey),var(--leaf));margin-top:6px}
.card{background:var(--card);border:2px solid var(--line);border-radius:22px;box-shadow:0 6px 0 #ecd3a3,0 10px 24px rgba(140,90,20,.10)}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.g4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.g5{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.feat{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.feat .ph{aspect-ratio:16/9;background:#f3e2c0;position:relative;overflow:hidden}.feat .ph img,.feat .ph video{width:100%;height:100%;object-fit:cover}
.feat .tag{position:absolute;left:10px;top:10px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.92);font:800 11px var(--fe);letter-spacing:.12em;color:var(--honey2)}
.feat .bd{padding:14px 18px 18px}.feat h3{margin:0 0 6px;font-size:19px;line-height:1.35}.feat p{margin:0;color:var(--ink2);font-size:14.5px}
.feat ul{margin:8px 0 0;padding-left:1.2em;font-size:14px;color:var(--ink2)}
.pill{display:inline-block;padding:1px 10px;border-radius:999px;background:#ffe7b0;font-size:12.5px;font-weight:800;margin:2px 4px 2px 0}
.video{max-width:960px;margin:0 auto;overflow:hidden;border-radius:22px;border:4px solid #fff;box-shadow:0 0 0 3px var(--honey),0 14px 30px rgba(120,70,10,.25);background:#000}
.video video{width:100%;display:block;aspect-ratio:16/9}
.note{font-size:13px;color:var(--ink2);text-align:center;margin-top:10px}
.chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.ch{text-align:center;padding:10px;min-width:0}.ch img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:14px;background:#fbe9c4}.ch b{display:block;margin-top:6px}.ch small{color:var(--ink2)}
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{padding:18px 18px 18px 64px;position:relative}.step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--honey);color:#fff;font:900 20px/36px var(--fe);text-align:center;box-shadow:0 3px 0 var(--honey2)}
.step h3{margin:0 0 4px;font-size:17px}.step p{margin:0;font-size:14.5px;color:var(--ink2)}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.key{display:flex;align-items:center;gap:10px;padding:10px 14px}.key kbd{min-width:52px;text-align:center;padding:4px 8px;border-radius:9px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font:800 14px var(--fe);color:var(--ink)}
details.acc{margin-bottom:12px;overflow:hidden}details.acc>summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:900;font-size:17px;display:flex;align-items:center;gap:10px}
details.acc>summary::-webkit-details-marker{display:none}details.acc>summary::after{content:'＋';margin-left:auto;color:var(--honey2);font-weight:900}details.acc[open]>summary::after{content:'－'}
details.acc>.in{padding:0 18px 18px;font-size:15px}details.acc .in h4{margin:14px 0 4px;font-size:15.5px;color:var(--leaf2)}
.tip{margin:10px 0;padding:10px 14px;border-radius:14px;background:#fff4d0;border-left:5px solid var(--honey);font-size:14px}
.warn{margin:10px 0;padding:10px 14px;border-radius:14px;background:#ffe8e0;border-left:5px solid var(--red);font-size:14px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:14px;overflow:hidden}
.tbl th,.tbl td{padding:7px 10px;border-bottom:1px solid #f0e2c4;text-align:left;vertical-align:top}.tbl th{background:#ffefc8;font-weight:900;white-space:nowrap}
.tw{overflow-x:auto;border-radius:14px;border:2px solid var(--line);margin:8px 0}
.ft{background:#5a3412;color:#fde9c4;padding-block:34px;font-size:14px}.ft a{color:#ffd56a}.ft .links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0}
.mascot{display:flex;align-items:center;gap:14px;padding:14px 18px;max-width:760px;margin:24px auto 0}.mascot img{width:84px;flex:none}
/* 図鑑 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}.tabs button{padding:9px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink2);font:800 15px inherit;font-family:inherit;cursor:pointer}.tabs button.on{background:var(--honey);border-color:var(--honey2);color:#fff}
.filt{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:16px}.filt input,.filt select{padding:9px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font:600 15px inherit;font-family:inherit;color:var(--ink);min-width:0}
.mon{display:flex;gap:12px;padding:12px;min-width:0}.mon .sp{width:88px;height:88px;flex:none;border-radius:16px;background:radial-gradient(circle,#fff,#f6e2b8);overflow:hidden;position:relative}
.mon .sp i{position:absolute;inset:0;background-repeat:no-repeat;image-rendering:auto}
.mon .mi{min-width:0;flex:1}.mon h3{margin:0;font-size:16.5px;line-height:1.3}.mon .tp{font-size:12px;font-weight:800;padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:2px}
.tp.n{background:#e8f4dc;color:#3d7d22}.tp.b{background:#ffe2c8;color:#b05a10}.tp.x{background:#ffd8d0;color:#b02a10}.tp.w{background:#e8dcff;color:#5a3ab0}
.st{display:grid;grid-template-columns:repeat(4,auto);gap:0 10px;font-size:12.5px;margin:4px 0;font-variant-numeric:tabular-nums}.st span{color:var(--ink2)}.st b{font-weight:900}
.dr{font-size:12.5px;color:var(--ink2);margin-top:4px;line-height:1.55}.dr em{font-style:normal;font-weight:800;color:var(--ink)}
.it{display:inline-flex;align-items:center;gap:3px;margin:1px 6px 1px 0;white-space:nowrap}.it i{width:22px;height:22px;flex:none;background-repeat:no-repeat;border-radius:5px;background-color:#fff6e0}
.r0{color:#555}.r1{color:#2a8a20}.r2{color:#1d5cb0}.r3{color:#a0620a}.r4{color:#c03a10}
.map{overflow:hidden;display:flex;flex-direction:column;min-width:0}.map .ph{aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#f3e2c0}.map .ph img{width:100%;height:100%;object-fit:cover}
.map .bd{padding:12px 16px 16px}.map h3{margin:0 0 4px;font-size:18px}.map .lv{font-size:13px;font-weight:800;color:var(--leaf2)}
.more{display:none}.show .more{display:block}
.cnt{text-align:center;color:var(--ink2);font-size:13px;margin:10px 0}
@media (max-width:700px){.hero .cta{position:static;padding:14px 16px 18px;background:linear-gradient(#fff3d8,#fff8ec)}.hero .catch{color:var(--ink);text-shadow:none;font-size:19px}.hero img.bg{max-height:none}.btn{padding:10px 18px;font-size:15px}}

.btn.dc{background:linear-gradient(#7984ff,#4752c4);color:#fff;box-shadow:0 0 0 3px #a3abff inset,0 4px 0 #2b318a,0 6px 16px rgba(0,0,0,.3)}
.btn.x{background:linear-gradient(#3a3a44,#111);color:#fff;box-shadow:0 0 0 3px #6a6a78 inset,0 4px 0 #000,0 6px 16px rgba(0,0,0,.3)}
.news{padding:22px 24px}.news .nh{display:flex;gap:10px;align-items:center;margin-bottom:6px}.news time{font:700 14px var(--fe);color:var(--ink2)}
.news h3{margin:4px 0 8px;font-size:22px;text-wrap:balance}.news .nl{margin:10px 0 14px;padding-left:1.2em;display:grid;gap:4px}
.ngal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ng{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px var(--line)}
.ng img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.ng span{position:absolute;left:8px;bottom:8px;padding:2px 10px;border-radius:999px;background:rgba(255,248,232,.92);font-weight:800;font-size:13px;color:var(--ink)}
.xcta{margin-top:16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:var(--bg2,#fff6e2)}
@media (max-width:800px){.ngal{grid-template-columns:repeat(2,minmax(0,1fr))}}

.npet{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:6px}
.npet .art{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 0 0 2px var(--line)}
.npet .sheet{width:100%;max-width:100%;margin-top:8px;border-radius:12px;background:linear-gradient(#eaf6ff,#fff6e2);box-shadow:0 0 0 2px var(--line)}
@media (max-width:800px){.npet{grid-template-columns:minmax(0,1fr)}}
@media(min-width:760px){.chars{grid-template-columns:repeat(5,1fr)}}

/* ゲーム開始ボタン（時刻になると表示）：画像の上でも読みやすいよう、濃い紺の板に白・金の文字 */
.gostart{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px auto 14px;padding:14px 26px;border-radius:18px;background:rgba(18,14,40,.86);box-shadow:0 0 0 2px #f2c85a inset,0 8px 24px rgba(0,0,0,.45);color:#fff;max-width:600px;text-align:center;backdrop-filter:blur(3px)}
.gostart .gs-lab{font-weight:900;font-size:17px;color:#fff;text-shadow:0 1px 3px #000}
.gostart .gs-cd{font-size:16px;font-weight:700;color:#ffe9b0}
.gostart .gs-cd b{display:block;font-size:34px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:#ffd54a;text-shadow:0 0 12px rgba(255,200,60,.7),0 2px 3px #000;margin-top:2px}
.btn.play{font-size:22px;padding:14px 40px;background:linear-gradient(#ff8a5a,#e0402a);color:#fff;text-shadow:0 1px 2px #6a1a08;box-shadow:0 0 0 3px #ffd0b0 inset,0 5px 0 #8a2410,0 8px 20px rgba(150,40,10,.4);animation:gsPulse 1.6s ease-in-out infinite}
@media (max-width:700px){.gostart{background:#1d1638;margin:10px auto 14px}.gostart .gs-lab{font-size:15px}.gostart .gs-cd b{font-size:30px}}
@keyframes gsPulse{50%{transform:scale(1.05)}}