/* 縦の線を下のタブ（今日・週間・月間）とそろえるため、外枠の右は付けず、各マスの右線で閉じる */
/* 全ページ共通のメニュー（2段）：上の段＝地域、下の段＝見るもの。
   今いる地域の色（博多＝黄、熊本＝ライム）を --area に入れ、今いる場所だけに色を付ける */
.gnav { --area: #FFF200; border: 1.5px solid #111; border-top: 0; border-right: 0; font-family: "Murecho","Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.gnav.kumamoto { --area: #58F21B; }
.gnav .r { display: grid; }
.gnav .r1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gnav .r2 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid #111; }
.gnav a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-right: 1.5px solid #111; background: #fff; color: #111; text-decoration: none; font-weight: 900; font-size: 15px; line-height: 1.15; white-space: nowrap; }
.gnav a:hover { background: #EFE9D8; }
.gnav .home { background: #111; color: #FFF200; font-family: "League Spartan", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; padding: 10px 14px; }
.gnav .home:hover { background: #111; }
.gnav a[aria-current] { background: var(--area); box-shadow: inset 0 -5px 0 #111; }
/* 2段目（見るもの）は塗らずに下の黒線だけ。塗りは「地域」と「タブ」の2か所にして、段の違いを強さで分ける（2026-11-03） */
.gnav .r2 a[aria-current] { background: #fff; }
.gnav .now { font-size: 10px; font-weight: 900; padding: 1px 5px; background: #111; color: #fff; }
.gnav .tr { font-size: 9px; font-weight: 900; padding: 0 4px; background: #111; color: #fff; }
@media (max-width: 480px) {
  .gnav a { font-size: 13px; padding: 9px 4px; gap: 4px; }
  .gnav .home { padding: 9px 10px; }
  .gnav .tr { display: none; }
}
.wrap > .gnav:first-child { border-top: 1.5px solid #111; }

/* 全ページ共通のフッター（2026-11）：ピンクの𝕏の帯（運営）＋黒いフッター。HTML は tools/nav.py の footer() */
.xbar { display: flex; align-items: stretch; margin-top: 18px; border: 2px solid #111; background: #F23BC8; color: #111; text-decoration: none; font-family: "Murecho","Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.xbar:hover { color: #fff; }
.xbar .xmark { flex: none; width: 52px; display: flex; align-items: center; justify-content: center; background: #fff; color: #111; border-right: 2px solid #111; font-family: "League Spartan", "Arial Narrow", sans-serif; font-weight: 900; font-size: 26px; }
.xbar .xtxt { flex: 1; min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.xbar .xtxt b { font-weight: 900; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.xbar .xgo { flex: none; display: flex; align-items: center; padding: 0 12px; border-left: 2px solid #111; }
.xbar .xbtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: #FFF200; color: #111; border: 2px solid #111; box-shadow: 3px 3px 0 #111; font-weight: 900; font-size: 13px; white-space: nowrap; transition: transform .12s, box-shadow .12s; animation: xpulse 2.4s ease-in-out infinite; }
.xbar .xbtn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-20deg); animation: xshine 2.4s ease-in-out infinite; }
.xbar .xarr { display: inline-block; animation: nudge 1.4s cubic-bezier(.5,0,.3,1) infinite; }
.xbar:hover .xbtn, .xbar:focus-visible .xbtn { transform: translate(3px, 3px); box-shadow: 0 0 0 #111; background: #58F21B; animation: none; }
.xbar:hover .xarr, .xbar:focus-visible .xarr { animation: xdash .5s cubic-bezier(.5,0,.3,1) 1; }
.xbar:active .xbtn { transform: translate(3px, 3px) scale(.96); }
@keyframes nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }
@keyframes xdash { 0% { transform: translateX(0); } 49% { transform: translateX(28px); } 50% { transform: translateX(-28px); } 100% { transform: translateX(0); } }
@keyframes xpulse { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-3deg) scale(1.06); } 90% { transform: rotate(2deg) scale(1.04); } }
@keyframes xshine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .xbar .xbtn, .xbar .xbtn::after, .xbar .xarr { animation: none; } }
@media (max-width: 480px) { .xbar .xgo { padding: 0 8px; } .xbar .xbtn { padding: 7px 9px; gap: 4px; font-size: 12px; } .xbar .xlong { display: none; } }
.ft { --area: #FFF200; border: 2px solid #111; border-top: 0; background: #111; color: #fff; padding: 18px 16px 20px; font-family: "Murecho","Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 12px; line-height: 1.7; }
.ft.kumamoto { --area: #58F21B; }
.ft-brand { display: flex; align-items: center; gap: 10px; }
.ft-brand .ft-logo { font-family: "League Spartan", "Arial Narrow", sans-serif; font-weight: 900; font-stretch: 62%; letter-spacing: -0.01em; text-transform: uppercase; color: #FFF200; font-size: 30px; line-height: .9; padding-top: .2em; }   /* 英字は字の上に寄るので、熊本・博多の札と中央をそろえる */
.ft-area { background: var(--area); color: #111; font-weight: 900; font-size: 11px; padding: 1px 7px; }
.ft-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 12px; padding: 10px 0; border-top: 1px solid #444; border-bottom: 1px solid #444; }
.ft-links a { color: #fff; font-weight: 900; font-size: 13px; text-decoration: none; }
.ft-links a:hover { color: #FFF200; }
.ft p { margin: 0 0 4px; color: #bbb; }
.ft p a { color: #fff; }

/* 共有ボタン（pages/share.js）：押すとスマホの共有画面、パソコンはリンクのコピー */
.share { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 16px; box-sizing: border-box; background: #fff; color: #111; border: 2px solid #111; box-shadow: 3px 3px 0 #111; font: 900 14px "Murecho","Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.share svg { width: 17px; height: 17px; flex: none; }
.share:hover { background: #FFF200; }
.share:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #111; }
.share:focus-visible { outline: 3px solid #263BFF; outline-offset: 2px; }
.sharebar { border: 1.5px solid #111; border-top: 0; padding: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; background: #fff; font-family: "Murecho","Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.sharebar p { margin: 0; font-weight: 700; font-size: 13px; }
.aipick .ap-share { padding: 14px 16px; border-top: 1.5px solid #111; display: flex; flex-wrap: wrap; gap: 10px; }
.share-pick { flex-basis: 100%; border: 2px solid #111; background: #fff; color: #111; padding: 10px 12px; box-shadow: 3px 3px 0 #111; font-family: "Murecho","Noto Sans JP", sans-serif; }
.share-pick p { margin: 0 0 8px; font-weight: 900; font-size: 13px; }
.share-pick div { display: flex; flex-wrap: wrap; gap: 8px; }
.share-pick button { min-height: 44px; padding: 8px 14px; border: 2px solid #111; background: #FFF200; font: 900 14px "Murecho","Noto Sans JP", sans-serif; color: #111; cursor: pointer; }
.share-pick button:hover { background: #F23BC8; }
.share-pick small { display: block; margin-top: 8px; font-size: 11px; color: #555; }
.share-pick p.sv { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #bbb; }
.share-pick button.ghost { background: #fff; }
.share-pick .sv-img { margin-top: 10px; }
.share-pick .sv-img img { display: block; width: 100%; height: auto; margin-top: 6px; border: 2px solid #111; -webkit-touch-callout: default; }
.share-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #111; color: #fff; padding: 10px 16px; font: 900 13px "Murecho","Noto Sans JP", sans-serif; border: 2px solid #FFF200; transition: opacity .2s, transform .2s; z-index: 1000; }
.share-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) { .sharebar .share { width: 100%; } }

/* いまの出勤・待機（pages/now.js。お店・キャストのページの表紙。2026-11-04） */
#now { margin-top: 12px; font-family: "Murecho","Noto Sans JP", sans-serif; }
#now .nb { display: inline-block; margin: 0 6px 6px 0; padding: 4px 9px; background: #FFF200; color: #111; border: 1.5px solid #111; font-weight: 900; font-size: 14px; }
#now .nb.wait { background: #58F21B; }
#now .nt { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
#now .nt b { padding: 4px 9px; background: #FFF200; color: #111; border: 1.5px solid #111; font-size: 14px; }
#now .nt b.wait { background: #58F21B; }
#now .nt b.later { background: #fff; }
#now .nt b.on { background: #111; color: #fff; border-color: #fff; }
#now .nw { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-weight: 700; font-size: 14px; }
#now .nw a { color: #fff; text-decoration: none; }
#now .nw a::after { content: "\00a0›"; font-weight: 900; }
#now .nw a.ext::after { content: "\00a0↗"; }
#now small { display: block; font-size: 11px; font-weight: 700; color: #fff; opacity: .85; line-height: 1.6; }
#now small a { color: #fff; }
#now small a.ext::after { content: "\00a0↗"; }

/* 「‹ ◯◯に戻る」（pages/back.js。お店・キャストのページの上と下。2026-11-05） */
.backlink { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; box-sizing: border-box; border: 1.5px solid #111; border-top: 0; background: #fff; color: #111; font: 900 14px "Murecho","Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; text-decoration: none; }
.backlink:hover { background: #FFF200; }
.backlink:focus-visible { outline: 3px solid #263BFF; outline-offset: -3px; }

/* AIピック（2026-11-08〜）：ランキングの「AIピック」タブと、これまでの一覧 /…/ai/ で同じ見た目。ピンク＝AI（ミルク推しの黄色と分ける） */
.aipick { border: 1.5px solid #111; border-top: 0; background: #fff; color: #111; font-family: "Murecho","Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.aipick .ap-bar { display: flex; align-items: stretch; background: #111; color: #fff; border-bottom: 1.5px solid #111; }
.aipick .ap-tag { background: #F23BC8; color: #111; padding: 6px 10px; display: flex; align-items: center; border-right: 1.5px solid #111; font-family: "League Spartan", sans-serif; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1; }
.aipick .ap-t { padding: 7px 12px; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.aipick .ap-t b { font-size: 14px; }
.aipick .ap-t small { font-size: 11px; font-weight: 700; color: #bbb; }
.aipick .ap-wk { margin-left: auto; padding: 6px 10px; display: flex; align-items: center; font-family: "League Spartan", sans-serif; font-weight: 700; font-size: 12px; color: #FFF200; white-space: nowrap; }
.aipick .ap-main { padding: 14px 14px 12px; }
.aipick .ap-main > p { margin: 0; font-size: 13px; }
.aipick .ap-main > .ap-why { margin-top: 12px; }
.aipick .ap-name { font-size: 22px; font-weight: 900; line-height: 1.25; margin: 0; }
.aipick.rest .ap-name { font-size: 18px; margin-bottom: 2px; }
.aipick .ap-name a { color: inherit; text-decoration: none; }
.aipick .ap-shop { font-size: 12px; font-weight: 700; color: #444; margin-top: 2px; }
.aipick .ap-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.aipick .ap-flags span { border: 1.5px solid #111; padding: 1px 8px; font-size: 12px; font-weight: 900; background: #58F21B; }
.aipick .ap-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid #111; }
.aipick .ap-nums > div { padding: 8px 8px 7px; border-right: 1.5px solid #111; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aipick .ap-nums > div:last-child { border-right: 0; }
.aipick .ap-nums .k { font-size: 11px; font-weight: 700; color: #444; line-height: 1.3; }
.aipick .ap-nums .v { font-family: "League Spartan", "Murecho","Noto Sans JP", sans-serif; font-stretch: 75%; font-weight: 900; font-size: 22px; line-height: 1; white-space: nowrap; }
.aipick .ap-nums .v i { font-style: normal; font-size: 13px; color: #666; font-weight: 700; }
.aipick .ap-nums .v em { font-style: normal; font-size: 12px; margin-left: 1px; font-family: "Murecho","Noto Sans JP", sans-serif; }
.aipick .ap-nums .v em.pre { margin: 0 1px 0 0; }
.aipick .ap-why { margin: 12px 0 0; padding: 10px 12px; background: #F4F1FF; border-left: 4px solid #F23BC8; font-size: 13px; line-height: 1.75; }
.aipick .ap-why::before { content: "AIの選んだ理由"; display: block; font-size: 11px; font-weight: 900; color: #C21A9C; margin-bottom: 2px; }
.aipick .ap-after { margin: 8px 0 0; padding: 8px 12px; background: #fff; border: 1.5px solid #111; font-size: 13px; line-height: 1.7; font-weight: 700; }
.aipick .ap-after b { display: block; font-size: 11px; font-weight: 900; letter-spacing: .02em; }   /* 選んだ週のあとの動き（月曜に ai_pick.py after が足す。2026-11-12〜） */
.aipick .ap-links { display: flex; border-top: 1.5px solid #111; }
.aipick .ap-links a { flex: 1; padding: 11px 12px; font-weight: 900; font-size: 13px; color: #111; text-decoration: none; border-right: 1.5px solid #111; white-space: nowrap; }
.aipick .ap-links a:last-child { border-right: 0; text-align: right; font-weight: 700; }
.aipick .ap-links a:hover { background: #EFE9D8; }
.aipick .ap-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1.5px solid #111; background: #111; color: #fff; text-decoration: none; }   /* これまでの一覧への入口（2026-11-13 管理者が案A：黒い帯） */
.aipick .ap-more span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aipick .ap-more b { font-size: 15px; font-weight: 900; line-height: 1.3; }
.aipick .ap-more small { font-size: 11px; font-weight: 700; color: #FFF200; }
.aipick .ap-more i { font-style: normal; font-family: "League Spartan", sans-serif; font-weight: 900; font-size: 22px; line-height: 1; color: #FFF200; }
.aipick .ap-more:hover { background: #263BFF; }
.aipick-wait { border: 1.5px solid #111; border-top: 0; padding: 16px 14px; font-size: 13px; }

/* お店のページ「今日の出勤」の段とランキングの行の札（2026-11-09〜、now.js が出す）。待機中＝ライム、出勤中＝黒、このあと＝白地に黒の枠 */
.onday .onlist { list-style: none; margin: 4px 0 6px; padding: 0; }
.onday .onlist li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed #bbb; }
.onday .onlist li:last-child { border-bottom: 0; }
.onday .nm a { color: #111; font-weight: 900; text-decoration: none; }
.onday .nm a::after { content: "\00a0›"; font-weight: 900; }
.onday .nm a.ext::after { content: "\00a0↗"; }
.onday .tm { font-family: "League Spartan", "Murecho","Noto Sans JP", sans-serif; font-weight: 700; font-size: 13px; white-space: nowrap; }
.onday .more a { color: #111; font-size: 12px; font-weight: 700; }
.onday .more a.ext::after { content: "\00a0↗"; }
.onday .st, .nowtag { display: inline-block; text-align: center; padding: 2px 6px; border: 1.5px solid #111; font-family: "Murecho","Noto Sans JP", sans-serif; font-weight: 900; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.onday .st.wait, .nowtag.wait { background: #58F21B; color: #111; }
.onday .st.on, .nowtag.on { background: #111; color: #fff; }
.onday .st.later, .nowtag.later { background: #fff; color: #111; }
.onday .onmore { display: block; width: 100%; margin: 2px 0 8px; padding: 9px; background: #fff; color: #111; border: 1.5px solid #111; font-family: "Murecho","Noto Sans JP", sans-serif; font-weight: 900; font-size: 13px; cursor: pointer; }
.onday .onlist li[hidden] { display: none; }

/* お店のページの段の見出し（2026-11-09〜、管理者が案B）：ランキングのタブと同じ色の帯に斜線の網掛け、行の後ろは白のまま。
   今日・7日・月間＝白、急上昇＝ピンク、口コミ急増＝青（文字は黄）、平均点＝ライム */
.sec[class*="k-"] > h2 { margin: -12px -16px 8px; padding: 9px 16px; border-bottom: 1.5px solid #111; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background-color: #fff; background-image: repeating-linear-gradient(135deg, rgba(17,17,17,.07) 0 2px, transparent 2px 7px); }
.sec[class*="k-"] > h2 .en { font-family: "League Spartan", "Murecho","Noto Sans JP", sans-serif; font-weight: 900; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: #111; color: #fff; padding: 3px 6px 2px; line-height: 1.2; }
.sec.k-rising > h2 { background-color: #F23BC8; }
.sec.k-surge > h2 { background-color: #263BFF; color: #FFF200; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px); }
.sec.k-surge > h2 .en { background: #FFF200; color: #111; }
.sec.k-avg > h2 { background-color: #58F21B; }
/* 印の段に出勤の札が増えて幅が足りないときは、札をつぶさずに次の行へ（激アツが縦書きになっていた。2026-11-09） */
.rows .marks { flex-wrap: wrap; }
.rows .marks > * { flex-shrink: 0; }