@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Zen+Maru+Gothic:wght@500;700;900&display=swap");
/* OnigiriBurger ゲーム共通（公式サイトの虹色とキャラに合わせる） */
:root{
  --ob-ink:#231815;--ob-pink:#eb646d;--ob-orange:#f39a3c;--ob-yellow:#fed815;--ob-green:#b7d200;--ob-blue:#1997c6;--ob-cream:#fff4bd;
  --rainbow:linear-gradient(90deg,var(--ob-pink) 0 20%,var(--ob-orange) 20% 40%,var(--ob-yellow) 40% 60%,var(--ob-green) 60% 80%,var(--ob-blue) 80%);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ob-cream);color:var(--ob-ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Apple SD Gothic Neo","Noto Sans KR","PingFang SC","PingFang TC","Noto Sans SC","Noto Sans TC",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer;color:inherit}
.ob-app{max-width:480px;margin:0 auto;position:relative;min-height:100vh;min-height:100dvh}
.scr{display:none}.scr.on{display:block}
.ob-bg{background:radial-gradient(circle at 20% 10%,#fffbe0 0 30%,transparent 60%),radial-gradient(circle at 90% 60%,#fff8cf 0 25%,transparent 55%),var(--ob-cream)}

/* 上の帯・波線・見出し */
.rainbow-bar{height:10px;margin:0 -16px 10px;background:repeating-linear-gradient(90deg,var(--ob-ink) 0 28px,var(--ob-pink) 28px 56px,#f2f2f2 56px 84px,var(--ob-yellow) 84px 112px,var(--ob-green) 112px 140px)}
.wave{height:16px;margin:22px -16px 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 4 Q15 -2 30 4 T60 4' fill='none' stroke='%23eb646d' stroke-width='3'/%3E%3Cpath d='M0 8 Q15 2 30 8 T60 8' fill='none' stroke='%23fed815' stroke-width='3'/%3E%3Cpath d='M0 12 Q15 6 30 12 T60 12' fill='none' stroke='%23b7d200' stroke-width='3'/%3E%3C/svg%3E") repeat-x}
.ob-h2{color:var(--ob-ink);display:flex;align-items:center;gap:8px;font-size:18px;margin:8px 0 8px}
.ob-h2:before{content:"";width:30px;height:16px;flex:none;border-radius:30px 30px 0 0;
  background:radial-gradient(circle at 50% 100%,transparent 0 4px,var(--ob-blue) 4px 6.5px,var(--ob-green) 6.5px 9px,var(--ob-yellow) 9px 11.5px,var(--ob-orange) 11.5px 13.5px,var(--ob-pink) 13.5px 16px,transparent 16px)}

/* タイトル画面の共通部品 */
.ob-title{padding:0 16px 32px;text-align:center}
.ob-brand{font-size:13px;letter-spacing:.06em;font-weight:700}
.ob-brand small{display:block;font-weight:400;letter-spacing:0;opacity:.8}
.ob-title h1{margin:8px 0 4px;font-size:30px;line-height:1.25}
.ob-title h1 span{color:var(--ob-pink)}
.ob-sub{margin:0 0 6px;font-size:14px}
.ob-chara{width:180px;height:auto;display:block;margin:6px auto}
.ob-how{background:#fff;border:2px solid var(--ob-ink);border-radius:16px;padding:12px 14px;text-align:left;font-size:14px;line-height:1.6;box-shadow:0 4px 0 var(--ob-ink);margin:8px 0 18px}
.ob-how b{color:var(--ob-pink)}
.ob-how ul{margin:0;padding-left:1.2em}
.ob-how li{margin:2px 0}
.big{display:block;width:100%;border:3px solid var(--ob-ink);border-radius:999px;padding:15px;font-size:20px;font-weight:700;color:#fff;background:var(--ob-pink);box-shadow:0 5px 0 var(--ob-ink)}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ob-ink)}
.big.ghost{background:var(--ob-yellow);color:var(--ob-ink)}
.ob-best{margin-top:10px;font-size:13px;opacity:.8}
.ob-back{display:inline-block;margin-top:14px;font-size:13px;color:var(--ob-ink)}
.kari{font-size:11px;opacity:.6;margin-top:14px}

/* 案内板 */
.final{padding:0 16px 40px}
.hero{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:6px 0 10px}
.hero img{width:170px;height:auto;display:block}
.hero-bubble{background:#fff;border:3px solid var(--ob-ink);border-radius:20px;padding:8px 12px;font-weight:900;font-size:17px;line-height:1.3;color:var(--ob-pink);margin-bottom:58px;position:relative;transform:rotate(-4deg)}
.hero-bubble:after{content:"";position:absolute;left:-10px;bottom:10px;border:8px solid transparent;border-right-color:var(--ob-ink);border-left:0}
.pass{background:#fff;border-radius:18px;overflow:hidden;border:3px solid var(--ob-ink);box-shadow:0 5px 0 var(--ob-ink)}
.pass-top{background:var(--ob-ink);color:#fff;padding:10px 16px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:700;position:relative}
.pass-top small{font-weight:400;opacity:.8;font-size:11px;display:block}
.pass-top:after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--rainbow)}
.pass-body{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:14px 16px}
.pass-body .k{font-size:10px;letter-spacing:.06em;opacity:.6}
.pass-body .v{font-size:17px;font-weight:700}
.pass-score{grid-column:1/3;text-align:center;padding:6px 0;border-top:2px dashed #f0dc8a;border-bottom:2px dashed #f0dc8a}
.pass-body .pass-score .v{font-size:46px;color:var(--ob-pink);text-shadow:3px 3px 0 var(--ob-yellow)}
.pass-score .t{font-size:16px;font-weight:700}
.newbest{display:inline-block;background:var(--ob-green);border-radius:999px;padding:2px 10px;font-size:12px;margin-top:4px;font-weight:700}
.say{display:flex;gap:10px;align-items:center;margin:14px 0}
.say img{width:76px;height:auto;flex:none}
.say p{margin:0;background:#fff;border:2px solid var(--ob-ink);border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.6;box-shadow:0 3px 0 var(--ob-ink)}

.coupon{border:3px dashed var(--ob-pink);border-radius:16px;background:#fff;padding:14px;text-align:center;position:relative;overflow:hidden;box-shadow:0 5px 0 var(--ob-pink)}
.coupon:before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--rainbow)}
.cTitle{font-weight:700;color:var(--ob-pink);font-size:14px;margin-top:6px}
.cGift{font-size:20px;font-weight:700;margin:6px 0 2px}
.cGift2{font-size:16px;font-weight:700;margin:2px 0}
.or{font-size:12px;opacity:.7}
.crule{font-size:12px;margin:6px 0;opacity:.85}
.cNote{font-size:12px;margin:4px 0}
.cNo{font-size:13px;margin-top:6px}
.cClock{font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:700;color:var(--ob-blue);margin:4px 0}
.cNext{font-size:12px;color:var(--ob-pink);margin-top:4px}
.staff{margin-top:8px;border:2px solid var(--ob-ink);background:#fff;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700}
.staff.warn{background:var(--ob-ink);color:#fff}
.picks{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.stamp{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}
.stamp span{border:5px solid #c0392b;color:#c0392b;font-size:34px;font-weight:900;padding:4px 16px;border-radius:10px;transform:rotate(-14deg);background:rgba(255,255,255,.75)}
.coupon.used .stamp{display:flex}
.sample{display:inline-block;background:#888;color:#fff;font-size:11px;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:middle}
.coupon-chara{position:absolute;right:6px;bottom:6px;width:58px}

.board{background:var(--ob-ink);border:3px solid var(--ob-ink);border-radius:14px;padding:0 10px 6px;color:var(--ob-yellow);font-family:ui-monospace,Menlo,monospace;box-shadow:0 5px 0 #6b5a55;overflow:hidden}
.board-h{display:flex;justify-content:space-between;color:#fff;font-size:12px;margin:0 -10px 4px;padding:10px 14px 12px;position:relative}
.board-h:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--rainbow)}
.row{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;padding:8px 4px;border-bottom:1px solid #3a2c28}
.row:last-child{border-bottom:0}
.flt{font-size:12px;color:var(--ob-ink);font-weight:700;border-radius:6px;padding:3px 0;text-align:center}
.row:nth-child(5n+1) .flt{background:var(--ob-pink)}
.row:nth-child(5n+2) .flt{background:var(--ob-orange)}
.row:nth-child(5n+3) .flt{background:var(--ob-yellow)}
.row:nth-child(5n+4) .flt{background:var(--ob-green)}
.row:nth-child(5n+5) .flt{background:var(--ob-blue);color:#fff}
.dest{font-family:"Hiragino Sans","Noto Sans JP",sans-serif;font-size:14px;font-weight:700;color:#fff;line-height:1.35}
.dest small{display:block;font-weight:400;color:#bbb;font-size:11px}
.pr{font-size:15px;text-align:right}
.st{display:block;font-size:10px;color:var(--ob-green);text-align:right}
.flip{animation:flip .5s both}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}

.card{background:#fff;border:2px solid var(--ob-ink);border-radius:14px;padding:10px;box-shadow:0 4px 0 var(--ob-ink)}
.card svg{width:100%;height:auto;display:block}
.mapnote{font-size:12px;line-height:1.6;margin:6px 4px 0}
.tree-card{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.tree-card .n{font-size:28px;font-weight:900;color:var(--ob-green);-webkit-text-stroke:1px var(--ob-ink)}
.tree-card p{margin:0;font-size:13px;line-height:1.6}
.tree-bar{height:12px;border-radius:99px;background:#f1ecd6;border:2px solid var(--ob-ink);overflow:hidden;margin-top:6px}
.tree-bar i{display:block;height:100%;background:var(--rainbow)}

table.info{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:2px solid var(--ob-ink);border-radius:14px;overflow:hidden;font-size:13px;box-shadow:0 4px 0 var(--ob-ink)}
table.info th{width:6em;text-align:left;background:#fff8d6;padding:8px;vertical-align:top;font-weight:700;border-bottom:1px solid #f4ecc8}
table.info td{padding:8px;line-height:1.5;border-bottom:1px solid #f4ecc8}
table.info tr:last-child th,table.info tr:last-child td{border-bottom:0}
table.info a{color:var(--ob-blue)}
.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard{display:block;text-decoration:none;color:var(--ob-ink);border:2px solid var(--ob-ink);border-radius:14px;padding:10px;box-shadow:0 4px 0 var(--ob-ink);font-weight:700;font-size:14px;line-height:1.35}
.gcard small{display:block;font-weight:400;font-size:11px;margin-top:4px;opacity:.8}
.gcard .e{font-size:26px;display:block}
.share{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share button,.share a{border:2px solid var(--ob-ink);color:var(--ob-ink);border-radius:12px;padding:10px;font-size:14px;font-weight:700;text-align:center;text-decoration:none;box-shadow:0 3px 0 var(--ob-ink)}
.share>*:nth-child(1){background:#fde3e5}.share>*:nth-child(2){background:#eef6c4}.share>*:nth-child(3){background:#fff3b0}.share>*:nth-child(4){background:#ddf0f8}
.final-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.final-btns .big{font-size:17px;padding:13px}
.foot{font-size:11px;opacity:.65;line-height:1.6;margin-top:18px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ob-ink);color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;display:none;z-index:99}

/* ことばの切りかえ */
.lang-slot{display:flex;justify-content:flex-end;margin:-2px 0 4px}
.lang{display:inline-flex;align-items:center;gap:4px;background:#fff;border:2px solid var(--ob-ink);border-radius:999px;padding:3px 4px 3px 10px;box-shadow:0 3px 0 var(--ob-ink);font-size:14px}
.lang select{border:0;background:transparent;font:inherit;font-weight:700;color:var(--ob-ink);padding:4px 2px;outline:none}

/* ===================================================================
   ゲームのあとの案内板（スキルの形・ホームページ風）
   =================================================================== */
.pop{font-family:"Mochiy Pop One","Zen Maru Gothic",sans-serif;font-weight:400}
.final{--gold:#c9a227;--gold-d:#a8841a;background:#fffdf6;padding:0 18px 36px;display:none;flex-direction:column;gap:18px}
.final.on{display:flex}
.f-stripe{height:10px;margin:0 -18px;background:repeating-linear-gradient(90deg,var(--ob-ink) 0 34px,var(--ob-pink) 34px 68px,#efefef 68px 102px,var(--ob-yellow) 102px 136px,var(--ob-green) 136px 170px)}
.final .rank-box{text-align:center;padding-top:4px}
.final .hero{margin:0 0 4px}
.final .hero img{width:150px}
.final .hero-bubble{font-size:14px;margin-bottom:50px;border-width:2px;box-shadow:0 3px 0 var(--ob-ink)}
.rank-label{font-size:12px;letter-spacing:.25em;color:#8a7a6a;font-weight:700}
.final .rank{font-size:clamp(26px,8vw,34px);margin:4px 0 0;line-height:1.2;color:var(--ob-ink);text-wrap:balance}
.final .total{font-size:14px;font-weight:700;margin-top:8px}
.final .total b{font-size:34px;color:var(--ob-pink);margin-left:4px;font-variant-numeric:tabular-nums}
.best-line{font-size:12px;color:#8a7a6a;margin-top:2px}
.final .newbest{background:var(--ob-yellow);border:1.5px solid var(--ob-ink)}
.tree-line{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--ob-ink);text-decoration:none;background:#eef6c4;border-radius:999px;padding:4px 12px}
.final .say{margin:0}
.final .say img{width:64px}
.final .say p{border:0;box-shadow:0 4px 16px rgba(120,90,0,.12);font-size:13.5px}
/* クーポン：黒地に金（ホームページの黒ラベル×金文字） */
.final .coupon{position:relative;background:var(--ob-ink);color:#fffdf6;border:0;border-radius:10px;padding:20px 18px 16px;text-align:left;box-shadow:0 8px 20px rgba(35,24,21,.25);overflow:hidden}
.final .coupon:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rainbow)}
.final .coupon .ct{font-size:12px;letter-spacing:.25em;color:var(--gold);font-weight:900}
.final .coupon .cg{font-weight:900;font-size:21px;line-height:1.4;margin:6px 0 2px;text-wrap:balance}
.final .coupon .cg2{font-weight:900;font-size:17px;line-height:1.4;margin:6px 0 2px}
.final .coupon .cg2 small{font-size:12px;color:var(--gold);margin-right:6px}
.final .coupon .cja{font-size:11px;opacity:.6}
.final .coupon .sample{background:#6b5a55}
.final .coupon .crule{display:inline-block;font-size:11.5px;font-weight:700;background:rgba(255,253,246,.12);border-radius:4px;padding:2px 8px;margin:8px 0 6px}
.final .coupon .cn{font-size:12.5px;line-height:1.7;opacity:.9}
.final .coupon .clock{margin-top:10px;display:flex;justify-content:space-between;align-items:center;font-variant-numeric:tabular-nums;font-size:13px;border-top:1px dashed rgba(255,253,246,.35);padding-top:9px;gap:8px}
.final .coupon .live{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.final .coupon .live:before{content:"";width:8px;height:8px;border-radius:50%;background:#7fd38b;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.final .coupon .cmark{display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:12px;color:var(--gold)}
.final .coupon .cmark img{width:34px;background:#fffdf6;border-radius:6px;padding:1px}
.cu{margin-top:10px;border-top:1px dashed rgba(255,253,246,.35);padding-top:10px;text-align:center}
.cu-no{font-size:13px;letter-spacing:.1em;opacity:.9}.cu-no b{font-family:"Mochiy Pop One",sans-serif;font-weight:400;font-size:26px;letter-spacing:.15em;color:var(--gold);margin-left:6px}
.cu-btn{display:block;width:100%;margin-top:8px;border:2px dashed rgba(255,253,246,.6);background:transparent;color:#fffdf6;border-radius:8px;padding:10px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.cu-btn small{display:block;font-size:11px;opacity:.75;font-weight:500}
.cu-yes{background:var(--ob-pink);border-color:var(--ob-pink);border-style:solid}
.cu-hint{font-size:11.5px;opacity:.75;margin-top:6px;line-height:1.6}
.cu-stamp{display:inline-block;border:3px solid #ff6a74;color:#ff6a74;border-radius:8px;padding:4px 14px;font-weight:900;font-size:24px;letter-spacing:.2em;transform:rotate(-8deg);margin:4px 0 6px}
.cu-msg{font-size:12.5px;line-height:1.7;opacity:.9}
/* 見出し：英語の大見出し＋小さな日本語 */
.sec-h{margin:4px 0 10px;text-align:center}
.sec-h .en{display:block;font-size:22px;letter-spacing:.04em;line-height:1.1}
.sec-h .en:before{content:"";display:inline-block;vertical-align:middle;margin:-4px 8px 0 0;width:24px;height:13px;border-radius:24px 24px 0 0;
  background:radial-gradient(circle at 50% 100%,transparent 0 3px,var(--ob-blue) 3px 5px,var(--ob-green) 5px 7px,var(--ob-yellow) 7px 9px,var(--ob-orange) 9px 11px,var(--ob-pink) 11px 13px,transparent 13px)}
.sec-h .ja{display:block;font-weight:900;font-size:13px;letter-spacing:.06em;margin-top:3px}
/* いまのおすすめ：自動スライド */
.picks .slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:3px solid var(--gold);border-radius:4px;overscroll-behavior-x:contain;box-shadow:0 6px 14px rgba(120,90,0,.18)}
.picks .slider::-webkit-scrollbar{display:none}
.picks figure{flex:0 0 100%;scroll-snap-align:start;margin:0;position:relative;color:#fff;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}
.picks .pk{position:absolute;left:0;top:10px;background:var(--ob-ink);color:var(--gold);font-weight:900;font-size:12px;padding:3px 10px;letter-spacing:.06em}
.picks .pe{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:84px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.picks figcaption{position:relative;padding:12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.45));font-weight:900;font-size:17px;line-height:1.4}
.picks figcaption em{font-style:normal;float:right;color:var(--ob-yellow);font-size:15px;letter-spacing:.06em}
.picks figcaption span{display:block;clear:both;font-weight:500;font-size:12px;line-height:1.55;opacity:.95;margin-top:2px}
.picks .dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
.picks .dots button{width:8px;height:8px;border-radius:4px;border:none;padding:0;background:#e2d6b8;transition:width .2s}
.picks .dots button[aria-current="true"]{background:var(--ob-pink);width:22px}
/* お店の情報 */
.final dl.shop{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(120,90,0,.12);padding:12px 16px;margin:0;font-size:13.5px;line-height:1.8}
.final dl.shop dt{font-weight:900;color:var(--gold-d);font-size:11.5px;letter-spacing:.1em;margin-top:4px}
.final dl.shop dd{margin:0 0 2px}
.final dl.shop a{color:var(--ob-blue)}
.final .mapbox{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(120,90,0,.12);padding:8px;margin-top:12px}
.final .mapbox svg{width:100%;height:auto;display:block}
/* ホーム画面に追加 */
.a2hs{background:#fff;border:1.5px dashed var(--gold);border-radius:12px;padding:12px 14px}
.a2hs h3{margin:0 0 4px;font-weight:900;font-size:16px}
.a2hs p{margin:0 0 8px;font-size:12.5px;line-height:1.7;color:#7a6a5c}
.a2hs .st{font-size:13px;line-height:1.75;margin-top:6px}
.a2hs .st b{display:inline-block;background:#fff4bd;border-radius:999px;padding:0 8px;margin-right:4px;font-size:12px}
.a2hs .st.me{background:#fff8d6;border-radius:6px;padding:4px 6px}
.a2hs .ico{display:inline-block;width:15px;height:15px;vertical-align:-2px}
/* 紹介・ボタン */
.intro-note{font-size:13px;line-height:1.7;margin:0 0 10px;color:#7a6a5c;text-align:center}
.final .share{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.obtn{display:inline-block;box-sizing:border-box;border:2px solid var(--ob-ink);border-radius:999px;background:var(--ob-pink);color:#fff;font:inherit;font-weight:900;font-size:16px;padding:13px 16px;text-align:center;text-decoration:none;box-shadow:0 4px 0 var(--ob-ink);cursor:pointer}
.obtn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ob-ink)}
.obtn.ghost{background:#fff;color:var(--ob-ink)}
.obtn.small{font-size:13.5px;padding:10px 8px;white-space:nowrap}
.final .share .obtn{width:100%;min-width:0}
.final .share>*:nth-child(n){background:#fff}
.final .share [data-s="share"]{background:var(--ob-pink);color:#fff}
.final-btns{display:flex;gap:10px;margin:0}
.final-btns .obtn{flex:1}
.final .foot{font-size:11px;color:#8a7a6a;text-align:center;line-height:1.7;margin:0;opacity:1}
/* おしらせ（スキルの形） */
.news{text-align:left;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(120,90,0,.12);padding:14px 16px;box-sizing:border-box}
.news-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.news-tag{background:var(--ob-pink);color:#fff;font-weight:900;font-size:11.5px;border-radius:999px;padding:2px 10px;letter-spacing:.1em}
.news-date{font-size:12px;color:#999;font-weight:700}
.news-t{display:block;color:var(--ob-pink);font-weight:900;font-size:15.5px;line-height:1.55;text-decoration:underline dotted;text-underline-offset:4px}
.news p{margin:6px 0 0;font-size:13px;line-height:1.75}
.news .news-s{color:#7a6a5c;font-size:12.5px}
.news a{color:var(--ob-pink);font-weight:900}
.news-final .news{border:1.5px solid var(--gold)}
.news-ov{position:fixed;inset:0;z-index:60;background:rgba(35,24,21,.6);display:flex;align-items:center;justify-content:center;padding:16px;animation:nfade .25s ease-out}
.news-ov .news{max-width:340px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:npop .3s ease-out}
.news-ov .nbtns{margin-top:12px}.news-ov .nbtns .obtn{width:100%}
@keyframes nfade{from{opacity:0}}@keyframes npop{from{transform:scale(.9);opacity:0}}
/* タイトル画面のおしらせの札・紹介 */
.news-chip{display:inline-block;background:#fff8d6;border:1.5px solid #c9a227;color:var(--ob-ink);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;text-decoration:none;line-height:1.5;margin-bottom:10px}
.news-chip u{color:var(--ob-pink)}
.title-more{display:flex;flex-direction:column;gap:14px;margin-top:16px;text-align:left}
.title-more .obtn{align-self:center}
@media (prefers-reduced-motion:reduce){.news-ov,.news-ov .news,.final .coupon .live:before{animation:none}}
[hidden]{display:none!important}

/* ===== ランキング（スキルの形） ===== */
.rk{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(120,90,0,.12);padding:14px;display:flex;flex-direction:column;gap:10px}
.news-line{background:#fff8d6;border:1.5px solid #c9a227;border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.6;font-weight:700}
.news-line b{color:var(--ob-pink)}
.rk-post{display:flex;gap:8px}
.rk-post input{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 10px;border:2px solid #eadfb8;border-radius:8px;background:#fffdf6;color:var(--ob-ink)}
.rk-post input:focus{outline:none;border-color:#c9a227}
.rk-post input.locked{background:#f3efe2;color:#6b5a55}
.rk-msg{font-size:13.5px;line-height:1.6;color:#7a6a5c}
.rk-msg b{color:var(--ob-pink)}
.rk-note{font-size:11.5px;color:#7a6a5c;margin:-4px 0 2px}
.rk-tabs{display:flex;gap:6px}
.rk-tabs button{flex:1;border:0;border-radius:30px;padding:7px;font:inherit;font-weight:900;font-size:14px;background:#f6f0dc;color:#7a6a5c}
.rk-tabs button.on{background:var(--ob-ink);color:#c9a227}
.rk-list{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.rk-list li{display:grid;grid-template-columns:2.4em 1fr auto;gap:8px;align-items:center;padding:8px 4px;border-bottom:1px dashed #eadfb8;font-size:14.5px}
.rk-list li:last-child{border-bottom:0}
.rk-list li .no{font-weight:900;text-align:center;color:#7a6a5c;font-size:16px}
.rk-list li .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.rk-list li .sc{font-weight:900;color:var(--ob-pink)}
.rk-list li.mine{background:#fff3b0;border-radius:6px}
.rk-list li.rk-empty{display:block;font-size:13.5px;color:#7a6a5c;padding:10px 0;text-align:center;border:0}
.rank-open{display:block;width:100%;margin-top:10px}
.rank-scr{background:#fffdf6;min-height:100dvh;padding:0 18px 30px}
.rank-scr.on{display:flex;flex-direction:column;gap:16px}
.sub-line{display:inline-block;margin-top:6px;background:var(--ob-ink);color:#c9a227;font-weight:900;font-size:13px;padding:3px 12px;border-radius:999px}
.picks figure.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.picks figure.ph{aspect-ratio:3/2;min-height:0}
.picks figure .pk{z-index:2}
.picks figure figcaption{z-index:1;background:linear-gradient(transparent,rgba(0,0,0,.72) 40%)}
.rk-me{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;background:#fff8d6;border-radius:10px;padding:6px 6px 6px 12px}.rk-me .obtn{flex:none}