/* 時事英語ジュニア — 水色のニュースサイト（holiday の太い線と影をベースに、新聞らしく） */
:root {
  --sky: #1ea7e1;
  --sky-d: #0b7cc1;
  --sky-dd: #075d93;
  --sky-l: #e3f5fe;
  --sky-ll: #f3fbff;
  --ink: #111;
  --ink2: #333;
  --line: #d6e6ef;
  --paper: #fff;
  --red: #e5212f;
  --yellow: #ffdc3c;
  --green: #12a150;
  --bw: 2px;
  --sh: 4px 4px 0 var(--ink);
  --r: 14px;
  --f-display: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif;
  --f-ja: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --f-en: 'Lexend', 'Segoe UI', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--sky-ll); color: var(--ink); font-family: var(--f-ja); font-weight: 500; font-size: 16px; line-height: 1.75; overflow-x: hidden; }
a { color: var(--sky-dd); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: #fff; padding: 8px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- ヘッダー ---------- */
.topbar { background: var(--ink); color: #fff; font-size: 12px; }
.topbar-in { display: flex; gap: 12px; align-items: center; height: 30px; }
.tb-me { margin-left: auto; color: #fff; text-decoration: none; font-weight: 700; }
.tb-me b { color: var(--yellow); }
.mast { background: var(--paper); border-bottom: var(--bw) solid var(--ink); position: relative; z-index: 40; }
.mast-in { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo-mark { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--sky); border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-size: 26px; transform: rotate(-4deg); }
.logo-t { display: flex; flex-direction: column; min-width: 0; }
.logo-t b { font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: 0.02em; }
.logo-t small { font-size: 10.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.mast-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lvsw { display: flex; border: var(--bw) solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; }
.lvsw button { border: 0; background: none; padding: 4px 12px; font-weight: 900; font-size: 13px; }
.lvsw button.on { background: var(--sky); color: #fff; }
.menu-b { width: 42px; height: 42px; border: var(--bw) solid var(--ink); border-radius: 12px; background: var(--yellow); display: grid; place-content: center; gap: 4px; box-shadow: 2px 2px 0 var(--ink); }
.menu-b span { display: block; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px; }
/* 上のメニュー（2段）。1段目＝ニュース（水色）、2段目＝学ぶ・遊ぶ（白）。はみ出さず、折り返してでも全部見せる */
.gnav { background: #fff; border-bottom: var(--bw) solid var(--ink); position: relative; z-index: 30; }
.gn-news { background: var(--sky); }
.gn-learn { border-top: var(--bw) solid var(--ink); }
.gn-in { display: flex; align-items: stretch; gap: 14px; }
.gn-l { flex: none; align-self: center; font-family: var(--f-en); font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; line-height: 1; padding: 5px 9px; border-radius: 999px; white-space: nowrap; min-width: 108px; text-align: center; }
.gn-news .gn-l { background: var(--ink); color: #fff; }
.gn-learn .gn-l { border: 1.5px solid var(--ink); color: var(--ink); padding: 3.5px 8px; }
.gn-list { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; }
.gn-list a { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-weight: 900; white-space: nowrap; position: relative; transition: background 0.12s, color 0.12s; }
.gn-news .gn-list a { color: #fff; font-size: 15px; padding: 10px 10px; }
.gn-learn .gn-list a { color: var(--ink); font-size: 13.5px; padding: 8px 9px; }
.gn-news .gn-list a:hover { background: var(--sky-d); }
.gn-learn .gn-list a:hover { background: var(--sky-l); color: var(--sky-dd); }
.gn-news .gn-list a[aria-current='page'] { background: var(--sky-dd); }
.gn-learn .gn-list a[aria-current='page'] { background: var(--sky-l); color: var(--sky-dd); }
.gn-list a[aria-current='page']::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
.gn-news .gn-list a + a::before, .gn-learn .gn-list a + a::before { content: ''; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; }
.gn-news .gn-list a + a::before { background: rgba(255, 255, 255, 0.35); }
.gn-learn .gn-list a + a::before { background: var(--line); }
/* タブレット：ラベルをはずして横いっぱいに */
@media (max-width: 1023px) {
  .gn-l { display: none; }
  .gn-news .gn-list a { font-size: 14.5px; padding: 9px 6px; }
  .gn-learn .gn-list a { font-size: 13px; padding: 7px 6px; }
}
/* スマホ：マス目に並べる（1段目は4つずつ、2段目は3つずつ） */
@media (max-width: 759px) {
  .gn-in { padding: 0; }
  .gn-list { display: grid; gap: 1px; }
  .gn-news .gn-list { grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(0, 0, 0, 0.16); }
  .gn-learn .gn-list { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--line); }
  .gn-list a { min-height: 38px; padding: 4px 2px !important; line-height: 1.25; white-space: normal; }
  .gn-news .gn-list a { background: var(--sky); font-size: 13.5px; }
  .gn-learn .gn-list a { background: #fff; font-size: 12.5px; }
  .gn-learn .gn-list a:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .gn-news .gn-list a[aria-current='page'] { background: var(--sky-dd); }
  .gn-learn .gn-list a[aria-current='page'] { background: var(--sky-l); }
  .gn-news .gn-list a + a::before, .gn-learn .gn-list a + a::before { display: none; }
}
@media (max-width: 359px) { .gn-news .gn-list a { font-size: 12.5px; } .gn-learn .gn-list a { font-size: 11.5px; } }
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.4); }
.drawer-in { position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 86vw); background: #fff; border-left: var(--bw) solid var(--ink); padding: 20px; overflow-y: auto; }
.drawer-h { font-family: var(--f-display); font-size: 20px; margin: 0 0 8px; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }

/* ---------- 速報・新着の帯 ---------- */
.ticker { background: var(--ink); color: #fff; border-bottom: var(--bw) solid var(--ink); }
.ticker.is-brk { background: var(--red); }
.ticker-in { display: flex; align-items: center; gap: 10px; height: 38px; }
.tk-l { flex: none; font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; background: var(--yellow); color: var(--ink); border-radius: 6px; padding: 1px 8px; }
.ticker.is-brk .tk-l { background: #fff; color: var(--red); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.tk-track { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tk-move { display: inline-flex; gap: 40px; white-space: nowrap; animation: tick 60s linear infinite; }
.tk-move:hover { animation-play-state: paused; }
.tk-move a { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
.tk-b { background: #fff; color: var(--red); border-radius: 4px; padding: 0 5px; margin-right: 6px; font-size: 12px; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-move { animation: none; } .ticker.is-brk .tk-l { animation: none; } }

/* ---------- 共通の部品 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: var(--bw) solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 900; font-size: 14.5px; padding: 8px 18px; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-sky { background: var(--sky); color: #fff; }
.btn-y { background: var(--yellow); }
.btn-sm { font-size: 13px; padding: 5px 14px; }
.cat { display: inline-block; background: var(--c); color: #fff; font-weight: 900; font-size: 11.5px; line-height: 1; padding: 4px 7px 3px; border-radius: 4px; white-space: nowrap; }
.wow { display: inline-flex; gap: 2px; vertical-align: middle; }
.wow i { width: 10px; height: 10px; background: #cfe3ee; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 72% 61%, 81% 100%, 50% 78%, 19% 100%, 28% 61%, 0 38%, 37% 35%); }
.wow i.on { background: #ff9f1a; }
.brk, .brk-s { background: var(--red); color: #fff; font-weight: 900; border-radius: 4px; }
.brk { position: absolute; left: 10px; top: 10px; font-size: 13px; padding: 2px 8px; border: 2px solid #fff; }
.brk-s { font-size: 11.5px; padding: 2px 6px; margin-right: 6px; }
.more { font-weight: 900; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.more::after { content: ' ›'; }
/* 文の形の長い「もっと見る」はスマホで折り返す（はみ出し防止） */
.cpanel .more, .sband-more .more { white-space: normal; }
.box-k, .sec-en, .lh-en, .lv-k + .lv-title { font-family: var(--f-en); }
.box-k { font-family: var(--f-en); font-weight: 800; font-size: 11.5px; letter-spacing: 0.14em; color: var(--sky-d); margin: 0 0 4px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 900; opacity: 0; transition: 0.25s; z-index: 80; pointer-events: none; max-width: 92vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--yellow); }
.totop { position: fixed; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); border: var(--bw) solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: grid; place-items: center; color: var(--ink); text-decoration: none; font-weight: 900; z-index: 30; }
.bc { font-size: 12.5px; color: var(--ink2); margin: 14px 0 10px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.bc a { color: var(--ink2); }
.bc b { color: #8aa; font-weight: 400; }
@media (max-width: 559px) { .bc span:last-child { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* ---------- セクション・カード・一覧 ---------- */
.sec { margin: 28px 0; }
.sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 10px; border-bottom: 3px solid var(--ink); padding-bottom: 6px; margin-bottom: 12px; }
.sec-h h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.3; display: flex; flex-direction: column; }
.sec-h > .more { margin-left: auto; }
.sec-en { color: var(--c, var(--sky-d)); font-family: var(--f-en); font-weight: 800; font-size: 11.5px; letter-spacing: 0.16em; }
.card { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; }
.card-img { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--sky-l); border-bottom: var(--bw) solid var(--ink); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.card:hover .card-img img { transform: scale(1.04); }
.card-b { padding: 10px 14px 14px; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--ink2); }
.card-t { margin: 0; font-size: 16.5px; line-height: 1.5; font-weight: 900; }
.card-t a { color: var(--ink); text-decoration: none; }
.card-t a:hover { text-decoration: underline; }
.card-en { margin: 4px 0 0; font-family: var(--f-en); font-size: 13px; color: var(--sky-dd); font-weight: 600; line-height: 1.4; }
.card-top .card-t { font-size: clamp(21px, 3vw, 28px); line-height: 1.4; }
.card-top .card-en { font-size: 16px; }
.card-d { font-size: 14.5px; margin: 8px 0 12px; color: var(--ink); }
.card-lv { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }
.rows { list-style: none; margin: 0; padding: 0; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; }
.row + .row { border-top: 1px solid var(--line); }
.row a { display: flex; gap: 12px; padding: 10px 12px; text-decoration: none; color: var(--ink); }
.row a:hover { background: var(--sky-ll); }
.row img { flex: none; width: 104px; height: 70px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--ink); background: var(--sky-l); }
.row-b { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
/* スマホで日付が縦に潰れたり「Xで話題」がはみ出したりしないよう、入りきらなければ折り返す */
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.row-meta > * { flex: none; white-space: nowrap; }
.row-meta .brk-s { margin-right: 0; }
.row-t { font-weight: 900; font-size: 15px; line-height: 1.45; }
.row-en { font-family: var(--f-en); font-size: 12.5px; color: var(--sky-dd); line-height: 1.35; }
.row-en em { font-style: normal; color: var(--ink2); margin-left: 6px; font-family: var(--f-ja); font-size: 11.5px; }

/* ---------- トップ ---------- */
.home-h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(19px, 3.2vw, 28px); line-height: 1.4; margin: 18px 0 16px; }
.home-h1 small { display: block; font-family: var(--f-ja); font-weight: 700; font-size: 13px; color: var(--ink2); margin-top: 4px; }
.home-grid { display: grid; gap: 22px; }
@media (min-width: 960px) { .home-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } }
.home-side { display: grid; gap: 16px; }
.box { display: block; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px 16px; color: var(--ink); text-decoration: none; }
a.box:hover { background: var(--sky-ll); }
.box-t { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.35; margin: 0 0 4px; }
.box-d { font-size: 13.5px; margin: 0 0 10px; }
.box-me { background: var(--sky); color: #fff; }
.box-me .box-k { color: #fff; opacity: 0.85; }
.me-rank { font-family: var(--f-display); font-size: 24px; margin: 0; }
.me-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; margin: 2px 0 8px; }
.me-stats b { font-family: var(--f-en); font-size: 20px; margin: 0 2px; color: var(--yellow); }
.me-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.35); border: 1.5px solid var(--ink); overflow: hidden; }
.me-bar i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width 0.6s; }
.me-next { font-size: 12px; margin: 4px 0 8px; font-weight: 700; }
.mission { list-style: none; margin: 0 0 10px; padding: 8px 10px; background: #fff; color: var(--ink); border-radius: 10px; border: 1.5px solid var(--ink); font-size: 13px; font-weight: 700; }
.mission li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.mission li::before { content: ''; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 4px; flex: none; }
.mission li.done { color: #6b7d88; text-decoration: line-through; }
.mission li.done::before { background: var(--green); box-shadow: inset 0 0 0 2px #fff; }
.mission b { margin-left: auto; color: var(--sky-d); font-family: var(--f-en); }
.box-me .btn { box-shadow: 2px 2px 0 var(--ink); }
.box-quiz { background: var(--yellow); }
.box-quiz .box-k { color: var(--ink); }
.box-word .w-en { font-family: var(--f-en); font-weight: 800; font-size: 26px; margin: 0; color: var(--sky-dd); line-height: 1.2; }
.w-ja { font-weight: 900; margin: 2px 0 4px; }
.w-note { font-size: 13.5px; margin: 0 0 6px; }
.trend { margin: 6px 0 0; padding-left: 0; list-style: none; counter-reset: t; }
.trend li { counter-increment: t; position: relative; padding: 7px 0 7px 34px; border-top: 1px solid var(--line); font-weight: 700; font-size: 14px; line-height: 1.45; }
.trend li::before { content: counter(t); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--f-en); font-size: 13px; display: grid; place-items: center; }
.trend li:nth-child(-n + 3)::before { background: var(--red); }
.trend a { color: var(--ink); text-decoration: none; }
.trend small { display: block; color: var(--ink2); font-size: 11.5px; font-weight: 500; }
.box-teach { background: #fff7d6; }
.box-games { background: #e9fbe9; }
.how-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: h; }
@media (min-width: 720px) { .how-l { grid-template-columns: repeat(4, 1fr); } }
.how-l li { counter-increment: h; border-left: 3px solid var(--sky); padding: 2px 0 2px 14px; font-size: 13px; color: var(--ink2); }
.how-l li b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 17px; margin-bottom: 2px; color: var(--ink); }
.how-l li b::before { content: counter(h) '. '; color: var(--sky); }

/* ---------- 一覧ページ ---------- */
.lh { margin: 6px 0 18px; }
.lh-en { color: var(--c, var(--sky-d)); font-weight: 800; letter-spacing: 0.16em; font-size: 12px; margin: 0; }
.lh h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 4vw, 34px); line-height: 1.3; margin: 2px 0 8px; }
.lh-lead { margin: 0; font-size: 14.5px; max-width: 760px; }
.months { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.months a { border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 12px; background: #fff; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 13px; }
.empty { padding: 30px; text-align: center; }
.prose { max-width: 820px; }
.prose h2 { font-size: 19px; border-left: 0; border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin: 28px 0 10px; }
.prose li { margin: 6px 0; }
.nf { padding-bottom: 30px; }

/* ---------- 記事 ---------- */
.art-wrap { max-width: 860px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--ink2); font-weight: 700; margin: 0 0 6px; }
.art-t { font-family: var(--f-display); font-weight: 400; font-size: clamp(25px, 4.6vw, 38px); line-height: 1.35; margin: 0 0 6px; }
.art-en { font-family: var(--f-en); font-weight: 700; font-size: clamp(17px, 2.6vw, 22px); color: var(--sky-dd); margin: 0 0 8px; line-height: 1.35; }
.art-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; font-weight: 700; margin: 0 0 14px; }
.tag { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 9px; }
.art-fig { margin: 0 0 16px; }
.art-fig img { width: 100%; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); aspect-ratio: 3 / 2; object-fit: cover; background: var(--sky-l); }
.art-fig figcaption { font-size: 11.5px; color: var(--ink2); margin-top: 8px; text-align: right; }
.sum { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 12px 16px; margin: 0 0 20px; }
.sum-h { margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.sum ol { margin: 0; padding-left: 1.4em; }
.sum li { font-weight: 700; }
.sum-why { margin: 8px 0 0; font-size: 13.5px; background: var(--sky-l); border-radius: 8px; padding: 6px 10px; }
.sum-why b { color: var(--red); margin-right: 8px; }
.lv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: sticky; top: 0; z-index: 20; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: #fff; margin-bottom: 14px; box-shadow: var(--sh); }
.lv-tabs button { border: 0; background: #fff; padding: 10px 6px; font-weight: 900; font-size: 15.5px; line-height: 1.2; }
.lv-tabs button + button { border-left: var(--bw) solid var(--ink); }
.lv-tabs button small { display: block; font-size: 11px; font-weight: 700; color: var(--ink2); }
.lv-tabs button.on { background: var(--sky); color: #fff; }
.lv-tabs button.on small { color: #fff; }
.lv-head { margin: 4px 0 10px; }
.lv-k { font-size: 12.5px; font-weight: 700; color: var(--ink2); margin: 0; font-family: var(--f-ja); }
.lv-title { font-family: var(--f-en); font-weight: 800; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.3; margin: 2px 0 0; }

.player { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: var(--r); padding: 10px 12px; flex-wrap: wrap; }
.player.float { position: fixed; left: 10px; right: 10px; bottom: 10px; max-width: 760px; margin: 0 auto; z-index: 65; border: 2px solid #fff; box-shadow: 0 4px 20px rgba(0,0,0,.35); }
.player.float.moved { right: auto; bottom: auto; margin: 0; width: min(760px, calc(100vw - 20px)); }
.player.float.mini { width: fit-content; max-width: calc(100vw - 20px); flex-wrap: nowrap; padding: 8px 10px; }
.player.float.mini .pl-voice, .player.float.mini .pl-modes, .player.float.mini .pl-speed { display: none; }
.player.float.mini .pl-mid { flex: 0 1 150px; min-width: 90px; }
.player.float.mini .pl-play { white-space: nowrap; flex: none; }
.player.float { cursor: grab; touch-action: none; user-select: none; }
.player.float.dragging { cursor: grabbing; opacity: .92; }
.player.float button, .player.float .pl-bar { cursor: pointer; }
.pl-fbar { display: none; }
.player.float .pl-fbar { display: flex; align-items: center; gap: 4px; position: absolute; right: 14px; bottom: 100%; background: var(--ink); border: 2px solid #fff; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 3px 6px 2px; }
.pl-grip { font-size: 12px; font-weight: 700; color: #ccc; padding: 0 6px 0 2px; }
.pl-fbar button { border: 1.5px solid #888; background: none; color: #fff; border-radius: 6px; padding: 0 8px; font-size: 12px; font-weight: 700; line-height: 1.6; }
.pl-ph { height: 0; }
.pl-ph:not(.on) { height: 0 !important; }
.pl-play { display: flex; align-items: center; gap: 8px; border: 2px solid #fff; background: var(--sky); color: #fff; border-radius: 999px; padding: 6px 14px 6px 8px; font-weight: 900; font-size: 14px; }
.pl-ic { width: 26px; height: 26px; border-radius: 50%; background: #fff; position: relative; flex: none; }
.pl-ic::after { content: ''; position: absolute; left: 10px; top: 7px; border-left: 9px solid var(--sky); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.playing .pl-ic::after { left: 8px; top: 8px; width: 10px; height: 10px; border: 0; border-left: 3px solid var(--sky); border-right: 3px solid var(--sky); }
.loading .pl-ic { animation: spin 1s linear infinite; background: conic-gradient(var(--yellow) 25%, #fff 0); }
@keyframes spin { to { transform: rotate(1turn); } }
.pl-mid { flex: 1; min-width: 120px; }
.pl-bar { height: 8px; background: #444; border-radius: 99px; overflow: hidden; cursor: pointer; }
.pl-bar i { display: block; height: 100%; width: 0; background: var(--yellow); }
.pl-time { margin: 2px 0 0; font-family: var(--f-en); font-size: 11.5px; color: #ccc; }
.pl-speed { display: flex; gap: 4px; }
.pl-speed button { border: 1.5px solid #888; background: none; color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.pl-speed button.on { background: #fff; color: var(--ink); border-color: #fff; }
.pl-modes { display: flex; gap: 6px; width: 100%; flex-wrap: wrap; }
.pl-modes button { border: 1.5px solid #888; background: none; color: #fff; border-radius: 8px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; }
.pl-modes button.on { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.pl-modes .pl-hb { border-style: dashed; color: #ddd; }
.pl-help { width: 100%; background: #2a2a2a; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.6; color: #eee; }
.pl-help p { margin: 4px 0; }
.pl-help b { display: inline-block; color: var(--yellow); margin-right: 6px; }
.player.float .pl-help { display: none; }
/* この記事の声（国旗つき。声は日によって入れかわる） */
.pl-voice { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; width: 100%; margin: 0; font-size: 13px; }
.pl-voice b { color: var(--yellow); }
.pl-voice small { flex: 1 1 100%; font-size: 11px; color: #aaa; line-height: 1.4; }
.pl-voice .flag { width: 24px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.5); flex: none; }
@media (max-width: 700px) { .player.float .pl-voice, .player.float .pl-modes { display: none; } }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px; }
.tg { border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 900; }
.tg.on { background: var(--ink); color: #fff; }
.tools-h { font-size: 12px; color: var(--ink2); }
.text { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 6px 18px; font-family: var(--f-en); font-size: 18.5px; line-height: 1.85; color: var(--ink); }
.p-art .text .para { margin: 14px 0; }
.para-ja { font-family: var(--f-ja); font-size: 14.5px; line-height: 1.8; background: var(--sky-ll); border-radius: 8px; padding: 8px 12px; margin: -6px 0 14px; color: var(--ink); }
.s { cursor: pointer; border-radius: 4px; transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
.s:hover { background: #eef8fd; }
.s.now { background: #fff1a8; box-shadow: 0 0 0 2px #fff1a8; }
.vw { font-weight: 600; }
.hl .vw { background: linear-gradient(transparent 62%, #b9e8ff 62%); }
.vw.pop { position: relative; }

.blk { margin: 26px 0; }
.blk-h { font-size: 17px; font-weight: 900; margin: 0 0 10px; display: flex; flex-direction: column; line-height: 1.35; }
.blk-h span { font-family: var(--f-en); font-size: 11.5px; letter-spacing: 0.16em; color: var(--sky-d); }
.vocab { list-style: none; margin: 0; padding: 0; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; }
.vocab li { display: grid; grid-template-columns: 34px auto 1fr; grid-template-areas: "say w w" "say pos ja" "say en en" "say ex ex"; gap: 0 8px; padding: 10px 12px; align-items: center; }
.vocab li + li { border-top: 1px solid var(--line); }
.vocab li.flash { background: #fff7c2; }
.say { grid-area: say; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--sky-l); position: relative; align-self: start; }
.say::after { content: ''; position: absolute; left: 12px; top: 9px; border-left: 9px solid var(--sky-dd); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.say.loading { animation: spin 1s linear infinite; }
.v-w { grid-area: w; font-family: var(--f-en); font-weight: 800; font-size: 18px; }
.v-pos { grid-area: pos; font-size: 11px; border: 1px solid var(--ink2); border-radius: 4px; padding: 0 4px; justify-self: start; }
.v-ja { grid-area: ja; font-weight: 900; }
.v-ex { grid-area: ex; font-family: var(--f-en); font-size: 14px; color: var(--ink2); margin-top: 2px; }
.v-ex small { display: block; font-family: var(--f-ja); font-size: 12px; }
.gram { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 14px 16px; }
.gram p { margin: 0 0 6px; font-size: 14.5px; }
.gram ul, .think ol { margin: 0; padding-left: 1.3em; }
.gram li span, .think li span { font-family: var(--f-en); font-weight: 600; }
.gram li small, .think li small { display: block; font-size: 12.5px; color: var(--ink2); }
.think { background: #fff7d6; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 14px 16px; }
.print { background: #fff; border: var(--bw) dashed var(--ink); border-radius: var(--r); padding: 14px 16px; }
.print p { margin: 0 0 8px; font-size: 14px; }
.print-b { display: flex; flex-wrap: wrap; gap: 10px; }

.pickup { background: var(--yellow); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px 16px; margin: 26px 0; }
.pickup .box-k { color: var(--ink); }
.pickup .w-en { font-family: var(--f-en); font-weight: 800; font-size: 28px; margin: 0; line-height: 1.2; }
.src { margin: 26px 0; font-size: 13.5px; }
.src-h { font-size: 16px; margin: 0 0 6px; }
.src-n { color: var(--ink2); margin: 0 0 8px; font-size: 12.5px; }
.src ul { margin: 0; padding-left: 1.2em; }
.src li { margin: 4px 0; }
.src li span { display: block; color: var(--ink2); font-size: 12px; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px 0; padding: 12px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); }
.share > span { width: 100%; font-weight: 900; font-size: 14px; }
.sh { border: var(--bw) solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 900; font-size: 13px; text-decoration: none; color: var(--ink); background: #fff; }
.sh-x { background: var(--ink); color: #fff; }
.sh-line { background: #06c755; color: #fff; }
.pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 16px 0; }
.pn a { background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; padding: 8px 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pn small { display: block; color: var(--sky-d); font-weight: 900; }
.pn-n { text-align: right; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 0 10px 10px; }
.sheet-in { max-width: 720px; margin: 0 auto; background: #fff; border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 0 -2px 0 var(--ink), 4px 4px 0 var(--ink); padding: 14px 16px 12px; position: relative; }
.sheet-x { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 24px; line-height: 1; padding: 4px 8px; }
.sheet-en { font-family: var(--f-en); font-weight: 600; font-size: 17px; margin: 0 28px 4px 0; line-height: 1.5; }
.sheet-ja { margin: 0 0 8px; font-size: 14.5px; }
.sheet-b { display: flex; gap: 8px; margin: 0; }

/* ---------- ゲーム ---------- */
.games { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px; }
.g-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs button { flex: none; border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 13px; }
.g-tabs button.on { background: var(--sky); color: #fff; }
.g-tabs button.clear::after { content: ' ✓'; color: var(--green); }
.g-tabs button.on.clear::after { color: #fff; }
.g-stage { margin-top: 12px; min-height: 160px; }
.g-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 900; color: var(--ink2); margin-bottom: 6px; }
.g-prog { flex: 1; height: 6px; border-radius: 9px; background: var(--sky-l); margin: 0 10px; overflow: hidden; }
.g-prog i { display: block; height: 100%; background: var(--sky); transition: width 0.3s; }
.g-q { font-family: var(--f-en); font-weight: 700; font-size: 17.5px; line-height: 1.5; margin: 4px 0 2px; }
.g-qja { font-size: 13px; color: var(--ink2); margin: 0 0 10px; }
/* ぼかした日本語訳：タップで見える（「日本語訳を表示」を押すとぜんぶ見える） */
.bj { filter: blur(5px); opacity: 0.6; cursor: pointer; user-select: none; transition: filter 0.2s, opacity 0.2s; border-radius: 4px; }
.bj:hover { opacity: 0.8; }
.bj:focus-visible { outline: 2px dashed var(--sky); outline-offset: 2px; }
.bj.peek, .tr-on .bj { filter: none; opacity: 1; user-select: auto; cursor: auto; }
.bj-note { margin: -4px 0 8px; font-size: 12px; color: var(--ink2); }
@media print { .bj { filter: none; opacity: 1; } .bj-note { display: none; } }
.g-ch { display: grid; gap: 8px; }
.g-ch button, .g-tf button { text-align: left; border: var(--bw) solid var(--ink); background: #fff; border-radius: 12px; padding: 10px 12px; font-family: var(--f-en); font-weight: 600; font-size: 15.5px; box-shadow: 2px 2px 0 var(--ink); }
.g-ch button:hover:not(:disabled), .g-tf button:hover:not(:disabled) { background: var(--sky-ll); }
.g-ch button.ok, .g-tf button.ok, .mt.ok { background: #d9f7e3; border-color: var(--green); }
.g-ch button.ng, .g-tf button.ng, .mt.ng { background: #ffe1e3; border-color: var(--red); animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.g-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-tf button { text-align: center; font-size: 26px; font-family: var(--f-display); }
.g-why { margin: 10px 0 0; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: var(--sky-ll); }
.g-why b { margin-right: 6px; }
.g-next { margin-top: 10px; }
.g-end { text-align: center; padding: 10px 0; }
.g-score { font-family: var(--f-display); font-size: 44px; line-height: 1.1; margin: 4px 0; }
.g-score small { font-size: 20px; }
.g-msg { font-weight: 900; margin: 0 0 10px; }
.g-end .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt { border: var(--bw) solid var(--ink); border-radius: 10px; background: #fff; padding: 9px 8px; font-weight: 700; font-size: 14.5px; min-height: 48px; line-height: 1.3; }
.mt.en { font-family: var(--f-en); }
.mt.sel { background: var(--yellow); }
.mt.gone { visibility: hidden; }
.or-ans { min-height: 52px; border: var(--bw) dashed var(--ink); border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; background: var(--sky-ll); margin-bottom: 10px; align-items: center; }
.or-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.or-w { border: 1.5px solid var(--ink); background: #fff; border-radius: 8px; padding: 4px 10px; font-family: var(--f-en); font-weight: 600; font-size: 15.5px; box-shadow: 2px 2px 0 var(--ink); }
.or-ans .or-w { background: var(--yellow); }
.or-w:disabled { opacity: 0.25; box-shadow: none; }
.g-ctl { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.g-timer { font-family: var(--f-en); font-weight: 800; font-size: 20px; color: var(--red); }
.gc-lv { margin: 0 0 12px; display: flex; gap: 6px; align-items: center; font-weight: 900; }
.gc-lv button { border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 14px; font-weight: 900; }
.gc-lv button.on { background: var(--sky); color: #fff; }
.gc-stage { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 16px; margin: 16px 0 30px; }
.gc-stage:empty { display: none; }

/* ---------- マイページ ---------- */
.mp-card { background: var(--sky); color: #fff; border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: var(--sh); padding: 18px; max-width: 520px; position: relative; overflow: hidden; }
.mp-card::after { content: 'PRESS'; position: absolute; right: -10px; bottom: -18px; font-family: var(--f-display); font-size: 80px; opacity: 0.15; }
.mp-rank { font-family: var(--f-display); font-size: 30px; margin: 0; }
.mp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.mp-badge { border: var(--bw) solid var(--ink); border-radius: 12px; padding: 6px 10px; background: #fff; font-weight: 900; font-size: 13px; }
.mp-badge.off { opacity: 0.35; }
.mp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 360px; }
.mp-cal i { aspect-ratio: 1; border-radius: 6px; background: #dcebf3; }
.mp-cal i.on { background: var(--sky); border: 1.5px solid var(--ink); }

/* ---------- ワークシート一覧・単語 ---------- */
.ws-list { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); }
.ws-item { padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.ws-item + .ws-item { border-top: 1px solid var(--line); }
.ws-item-t { color: var(--ink); text-decoration: none; font-weight: 900; display: flex; gap: 8px; align-items: baseline; }
.ws-item-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; }
.ws-item-b a { border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 8px; text-decoration: none; color: var(--ink); background: var(--sky-l); }
.ws-item-b span { margin-left: 6px; }
@media (min-width: 760px) {
  .ws-item { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; }
  .ws-item-t { flex: 1; min-width: 0; font-size: 14px; }
  .ws-item-b { flex: none; flex-wrap: nowrap; }
}
.ws-item-t { display: block; }
.ws-item-t .cat { margin-right: 6px; }
.ws-h2 { font-size: 17px; margin: 22px 0 8px; }
.ws-month { margin: 0 0 8px; }
.ws-month summary { cursor: pointer; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 8px 14px; font-weight: 900; display: flex; gap: 10px; align-items: baseline; }
.ws-month summary small { font-weight: 700; color: #666; }
.ws-month[open] summary { background: var(--sky-l); margin-bottom: 6px; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .picks { grid-template-columns: 1fr 1fr; } }
.picks a { display: block; background: #fff; border: var(--bw) solid var(--ink); border-radius: 12px; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.picks b { font-family: var(--f-en); font-size: 19px; color: var(--sky-dd); margin-right: 8px; }
.picks small { display: block; font-size: 12.5px; color: var(--ink2); }
.wordlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (min-width: 640px) { .wordlist { grid-template-columns: 1fr 1fr; } }
.wordlist a { display: flex; gap: 8px; align-items: baseline; padding: 7px 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; }
.wordlist b { font-family: var(--f-en); }
.lvb { margin-left: auto; font-size: 10.5px; border-radius: 4px; padding: 0 5px; color: #fff; background: var(--sky); }
.lvb-senior { background: var(--sky-dd); }

/* ---------- 授業モード（電子黒板） ---------- */
.present .art .lv-panel:not([hidden]) .text { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.7; }
.present .mast, .present .gnav, .present .topbar, .present .ticker, .present .art-fig, .present .sum, .present .blk, .present .bc, .present .foot, .present .src, .present .share, .present .pn, .present .sec, .present .pickup, .present .art-h { display: none; }
.present .art-wrap { max-width: 1280px; }
.present .lv-tabs { top: 0; }


/* ---------- フッター ---------- */
.foot { background: var(--ink); color: #fff; margin-top: 40px; padding: 28px 0 70px; font-size: 13px; }
.foot a { color: #fff; }
.foot-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 300px 1fr; } }
.foot-logo { font-family: var(--f-display); font-size: 22px; margin: 0; }
.foot-t { color: #ccc; margin: 4px 0; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
@media (min-width: 760px) { .foot-links { grid-template-columns: 1fr 1fr 1fr; } }
.foot-x { margin: 14px 0 0; }
.x-follow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.x-follow::before { content: "𝕏"; font-size: 1.15em; line-height: 1; }
.foot-c { color: #aaa; margin-top: 18px; font-size: 12px; }

@media (min-width: 760px) {
  .logo-t b { font-size: 27px; }
  .logo-mark { width: 48px; height: 48px; font-size: 30px; }
  .row img { width: 150px; height: 100px; }
  .row-t { font-size: 16.5px; }
  .vocab li { grid-template-columns: 34px 200px 60px 1fr; grid-template-areas: "say w pos ja" "say en en en" "say ex ex ex"; }
}
@media (max-width: 380px) { .logo-t small { display: none; } .lvsw button { padding: 4px 9px; } }

/* ---------- ワークシート（印刷） ---------- */
.p-print { background: #888; }
.p-print .topbar, .p-print .mast, .p-print .gnav, .p-print .foot, .p-print .totop, .p-print .ticker, .p-print .sch-mw, .p-print .drawer, .p-print .skip, .p-print .toast { display: none !important; }
.ws-bar { position: sticky; top: 0; z-index: 30; background: var(--ink); color: #fff; padding: 10px 0; }
.ws-bar-in { max-width: 210mm; margin: 0 auto; padding: 0 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws-bar a:not(.btn) { color: #fff; }
.ws-sw { display: flex; gap: 8px; }
.ws-sw b { background: var(--sky); padding: 0 8px; border-radius: 6px; }
.ws-tip { width: 100%; margin: 0; font-size: 12px; color: #ccc; }
.ws { padding: 16px 0 40px; }
.ws-page { width: 210mm; min-height: 297mm; margin: 0 auto 16px; background: #fff; padding: 14mm 15mm; color: #000; font-size: 10.5pt; line-height: 1.6; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.ws-h { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--sky-d); padding-bottom: 4px; margin-bottom: 8px; font-size: 9pt; }
.ws-h p { margin: 0; }
.ws-site { color: var(--sky-dd); font-weight: 900; }
.ws-t { font-size: 15pt; margin: 4px 0 0; line-height: 1.4; }
.ws-en { font-family: var(--f-en); font-size: 13pt; color: var(--sky-dd); margin: 0 0 8px; }
.ws-read { font-family: var(--f-en); font-size: 11.5pt; line-height: 1.75; }
.ws-read p { margin: 0 0 6px; }
.pn-no { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--sky-d); color: #fff; font-size: 8pt; text-align: center; line-height: 18px; margin-right: 6px; font-family: var(--f-en); vertical-align: 1px; }
.ws-qr { position: absolute; right: 15mm; top: 30mm; display: flex; flex-direction: column; align-items: center; font-size: 7pt; text-align: center; line-height: 1.3; }
.ws-qr svg { width: 22mm; height: 22mm; }
.ws-t, .ws-en { padding-right: 26mm; }
.ws-s { font-size: 11pt; background: var(--sky-l); border-left: 0; padding: 2px 8px; margin: 12px 0 6px; border-radius: 4px; color: #000; }
.ws-voc { width: 100%; border-collapse: collapse; font-size: 10pt; }
.ws-voc td { border-bottom: 1px solid #bbb; padding: 3px 6px; }
.ws-voc td:first-child { font-family: var(--f-en); font-weight: 700; width: 38%; }
.ws-voc td:nth-child(2) { width: 8%; color: #444; }
.ws-q { margin: 0; padding-left: 1.6em; }
.ws-q li { margin: 0 0 6px; }
.ws-q p { margin: 0; font-family: var(--f-en); }
.ws-q small { font-family: var(--f-ja); }
.ws-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; font-size: 10pt; }
.ws-bank { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--f-en); font-weight: 700; margin: 0 0 6px; }
.ws-bank span { border: 1px solid #000; border-radius: 4px; padding: 0 6px; }
.ws-line { border-bottom: 1px solid #888; height: 22px; margin: 0 0 4px !important; }
.ws-tr p { margin: 0 0 4px; font-size: 9.5pt; }
.ws-foot { position: absolute; bottom: 8mm; left: 15mm; right: 15mm; font-size: 7pt; color: #555; margin: 0; }
/* 印刷：本文と問題は1枚に押しこまず、自然に次のページへ流す（問題の途中では切らない）。解答は新しいページから */
@page { size: A4; margin: 12mm 15mm; }
@media print {
  body, .p-print { background: #fff; }
  .no-print { display: none !important; }
  .ws { padding: 0; }
  .ws-page { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .ws-page + .ws-page { margin-top: 4mm; }
  .ws .ws-ans { break-before: page; margin-top: 0; }
  .ws-top, .ws-read p, .ws-voc tr, .ws-bank, .ws-q > li, .ws-tr p, .ws-art { break-inside: avoid; }
  .ws-s { break-after: avoid; }
  .ws-foot { position: static; margin-top: 6mm; }
}
/* 印刷の直前に、上と同じ並べ方を画面でも作って余白を測る（ws-art の大きさを決める） */
html.ws-flow .ws-page { width: 180mm; min-height: 0; margin: 0 auto; padding: 0; }
html.ws-flow .ws-page + .ws-page { margin-top: 4mm; }
@media screen and (max-width: 840px) {
  .ws-page { width: 100%; min-height: 0; padding: 18px 16px 40px; }
  .ws-qr { position: static; align-items: flex-start; margin: 8px 0; }
  .ws-t, .ws-en { padding-right: 0; }
  .ws-foot { position: static; margin-top: 10px; }
}

/* スマホの見出し帯（折り返さない） */
.topbar-in { white-space: nowrap; overflow: hidden; }
.tb-me { overflow: hidden; text-overflow: ellipsis; }
.lvsw button { white-space: nowrap; }
.logo-t b { white-space: nowrap; }
@media (max-width: 520px) {
  .logo-t b { font-size: 19px; }
  .logo-t small { display: none; }
  .logo-mark { width: 36px; height: 36px; font-size: 22px; }
  .mast-in { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .menu-b { width: 38px; height: 38px; }
  .lvsw button { padding: 3px 9px; font-size: 12.5px; }
}
@media (max-width: 360px) { .logo-t b { font-size: 16.5px; } }
/* 幅320pxの小さいスマホ：ロゴと「中学・高校」が重ならないよう全体を少し小さく */
@media (max-width: 345px) {
  .mast-in { gap: 6px; }
  .mast-r { gap: 6px; }
  .logo { gap: 6px; }
  .logo-mark { width: 30px; height: 30px; font-size: 18px; border-radius: 9px; }
  .logo-t b { font-size: 13.5px; }
  .lvsw button { padding: 3px 7px; font-size: 12px; }
  .menu-b { width: 34px; height: 34px; }
}
@media (max-width: 559px) {
  .cards { gap: 10px; }
  .cards .card { flex-direction: row; box-shadow: 3px 3px 0 var(--ink); }
  .cards .card-img { flex: none; width: 118px; aspect-ratio: auto; border-bottom: 0; border-right: var(--bw) solid var(--ink); }
  .cards .card-b { flex: 1; min-width: 0; padding: 8px 10px; }
  .cards .card-t { font-size: 14.5px; }
  .cards .card-en { font-size: 12px; }
  .cards .card-meta .wow { display: none; }
}

/* ---------- ロゴ「原田英語の」 ---------- */
.logo-pre { font-style: normal; font-weight: 900; font-size: 11px; line-height: 1; color: var(--sky-dd); letter-spacing: 0.06em; margin-bottom: 1px; }
.foot-logo small { display: block; font-family: var(--f-ja); font-size: 12px; color: #9fe0ff; }
.nb { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.foot-cj a { color: inherit; }
.foot-sis, .foot-cj { color: #bbb; font-size: 12px; margin: 10px 0 0; line-height: 1.7; }
.foot-sis a { color: #fff; }

/* ---------- 見出しを上に固定（スマホでもメニューにすぐ届く） ---------- */
.mast { position: sticky; top: 0; z-index: 45; }
.lv-tabs { top: var(--mh, 0px); }
.present .mast { position: static; }
.present .lv-tabs { top: 0; }

/* ---------- メニュー（ドロワー） ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; background: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(10, 30, 45, 0.55); opacity: 0; transition: opacity 0.22s; }
.drawer-in { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 88vw); background: #fff; border-left: var(--bw) solid var(--ink); padding: 0 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(105%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.drawer.open .drawer-bg { opacity: 1; }
.drawer.open .drawer-in { transform: none; }
.drawer-top { position: sticky; top: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; border-bottom: 2px solid var(--ink); z-index: 1; }
.drawer-h { font-family: var(--f-display); font-size: 20px; margin: 0; }
.drawer-x { width: 44px; height: 44px; border: var(--bw) solid var(--ink); border-radius: 12px; background: var(--yellow); font-size: 26px; line-height: 1; font-weight: 900; box-shadow: 2px 2px 0 var(--ink); }
.drawer-sec { font-weight: 900; font-size: 12px; color: var(--sky-d); letter-spacing: 0.08em; margin: 16px 0 6px; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.drawer .drawer-grid a { display: flex; align-items: center; min-height: 46px; padding: 6px 10px; border: 1.5px solid var(--ink); border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 14px; background: var(--sky-ll); }
.drawer .drawer-grid a:active { background: var(--yellow); }
.drawer .drawer-list a { display: block; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.drawer-list b { display: block; font-size: 14px; }
.drawer-list small { font-size: 12px; color: var(--ink2); }
.drawer-foot { font-size: 12.5px; margin-top: 14px; }
html.lock, html.lock body { overflow: hidden; }

/* ---------- 上へもどるボタン（下までスクロールしたら出る） ---------- */
.totop { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%; background: var(--yellow); border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-content: center; text-align: center; color: var(--ink); font-weight: 900; z-index: 60; line-height: 1; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.totop span { font-size: 22px; }
.totop small { font-family: var(--f-en); font-size: 9.5px; letter-spacing: 0.08em; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop.lift { bottom: calc(118px + env(safe-area-inset-bottom)); }

/* ---------- CEFR-J ---------- */
.cj { display: inline-block; font-family: var(--f-en); font-weight: 800; font-size: 10.5px; line-height: 1; padding: 3px 5px 2px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; color: #fff; font-style: normal; }
.cj-A1 { background: #1f9d55; }
.cj-A2 { background: #1ea7e1; }
.cj-B1 { background: #f08c00; }
.cj-B2 { background: #d6336c; }
.cj-OUT { background: #868e96; }
.prof { margin: 8px 0 4px; }
.prof-h { font-size: 11.5px; font-weight: 900; margin: 0 0 3px; color: var(--ink2); }
.prof-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; border: 1.5px solid var(--ink); background: #eee; }
.prof-bar i { display: block; height: 100%; }
.prof-l { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 4px 0 0; font-size: 11.5px; font-weight: 700; }
.prof-l .cj { margin: 0 3px 0 0; }
.cj-credit { font-size: 11px; color: var(--ink2); margin: 6px 2px 0; line-height: 1.6; }
.v-en { grid-area: en; font-family: var(--f-en); font-size: 13.5px; color: var(--sky-dd); font-style: italic; }
.text.cjon .cjw { border-radius: 3px; padding: 0 1px; }
.text.cjon .cjw.l-A2, .cj-out-text .cjw.l-A2 { background: #d9f1fc; }
.text.cjon .cjw.l-B1, .cj-out-text .cjw.l-B1 { background: #ffe3bf; }
.text.cjon .cjw.l-B2, .cj-out-text .cjw.l-B2 { background: #ffd3e1; }
.text.cjon .cjw.l-OUT, .cj-out-text .cjw.l-OUT { background: #e3e6e8; }
.cj-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-weight: 700; margin: 0 0 6px; }
.cj-legend i { display: inline-block; width: 14px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; border: 1px solid rgba(0, 0, 0, 0.15); }
.cj-form input, .cjp textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border: var(--bw) solid var(--ink); border-radius: 12px; background: #fff; }
.cjp textarea { font-family: var(--f-en); line-height: 1.7; }
.cj-filt { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cj-filt button { border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 900; background: #fff; margin: 0; font-size: 13px; vertical-align: 0; }
.cj-filt button.cj { color: #fff; }
.cj-filt button.on { outline: 3px solid var(--yellow); outline-offset: 1px; }
.cj-filt button.all.on { background: var(--ink); color: #fff; }
.cj-count { font-size: 13px; font-weight: 700; color: var(--ink2); }
.cj-res { list-style: none; margin: 0; padding: 0; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; }
.cj-res:empty { display: none; }
.cj-res li { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.cj-res .w { font-family: var(--f-en); font-weight: 800; font-size: 17px; }
.cj-res .p { font-size: 11.5px; color: var(--ink2); margin-left: 6px; }
.cj-res .j { display: block; font-size: 14px; }
.cj-res .d { display: block; font-family: var(--f-en); font-size: 13px; color: var(--sky-dd); font-style: italic; }
.cj-res .n { display: block; font-size: 12.5px; margin-top: 2px; }
.cj-res .n a { margin-right: 10px; }
.cj-out-text { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 12px 16px; font-family: var(--f-en); font-size: 17px; line-height: 1.9; margin: 12px 0; }
.cj-judge { font-family: var(--f-display); font-size: 22px; margin: 6px 0; }
.cj-cite { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.cj-hard { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.cj-hard li { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13.5px; }
.cj-hard b { font-family: var(--f-en); }

/* ---------- 入試に出る ---------- */
.exb { display: inline-block; background: var(--ink); color: var(--yellow); font-weight: 900; font-size: 10.5px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.exam { background: var(--ink); color: #fff; border-radius: var(--r); padding: 14px 16px; margin: 0 0 20px; border: var(--bw) solid var(--ink); box-shadow: 4px 4px 0 var(--yellow); }
.exam-k { font-family: var(--f-display); font-size: 19px; margin: 0; color: var(--yellow); }
.exam-k span { font-family: var(--f-ja); letter-spacing: 0.1em; margin-left: 6px; }
.exam-th { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.exam-th a { color: var(--ink); background: #fff; border-radius: 999px; padding: 1px 10px; font-size: 12.5px; font-weight: 900; text-decoration: none; }
.exam-why { margin: 0 0 6px; font-size: 14.5px; }
.exam-ph { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.exam-ph b { color: var(--yellow); margin-right: 4px; }
.exam-ph span { font-family: var(--f-en); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; padding: 0 8px; }
.ex-themes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ex-themes a { border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 12px; font-weight: 900; font-size: 13px; color: var(--ink); text-decoration: none; }
.ex-themes b { background: var(--ink); color: #fff; border-radius: 99px; padding: 0 6px; margin-left: 6px; font-size: 11px; }
.exl { list-style: none; margin: 0; padding: 0; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; }
.exl li + li { border-top: 1px solid var(--line); }
.exl a { display: block; padding: 10px 14px; color: var(--ink); text-decoration: none; }
.exl a:hover { background: var(--sky-ll); }
.exl-r { color: #f08c00; font-weight: 900; margin-right: 6px; }
.exl small { display: block; font-size: 13px; color: var(--ink2); margin: 2px 0; }
.exl-p { display: block; font-family: var(--f-en); font-size: 12.5px; color: var(--sky-dd); }
.box-exam { background: var(--ink); color: #fff; }
.box-exam .box-k { color: var(--yellow); }
a.box-exam:hover { background: #222; }

/* ---------- 原田英語のサイト・スラング ---------- */
.sis { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 12px 16px; margin: 22px 0; }
.sis-h { font-size: 16px; margin: 0 0 6px; }
.sis ul, .sis-l { list-style: none; margin: 0; padding: 0; }
.sis li, .sis-l li { border-top: 1px solid var(--line); padding: 8px 0; }
.sis li:first-child, .sis-l li:first-child { border-top: 0; }
.sis a, .sis-l a { color: var(--ink); text-decoration: none; display: block; }
.sis b, .sis-l b { display: block; font-size: 14.5px; color: var(--sky-dd); }
.sis small, .sis-l small { font-size: 12.5px; color: var(--ink2); }
.sis .sis-q { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 900; color: var(--sky-dd); text-decoration: underline; }
.box-slang { background: #fff0f6; }
.box-slang.wide { margin: 0 0 18px; }
@media (min-width: 760px) { .box-slang.wide .slang-l { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.slang-l { margin: 4px 0 8px; padding: 0; list-style: none; counter-reset: s; }
.slang-l li { counter-increment: s; padding: 6px 0 6px 30px; position: relative; border-top: 1px solid #f3c6d8; font-size: 13.5px; line-height: 1.45; }
.slang-l li::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 6px; background: #d6336c; color: #fff; font-family: var(--f-en); font-size: 12px; display: grid; place-items: center; }
.slang-l a { color: var(--ink); text-decoration: none; font-weight: 900; }
.slang-l small { display: block; font-weight: 500; color: var(--ink2); font-size: 12px; }
.sheet-def { font-family: var(--f-en); font-style: italic; color: var(--sky-dd); margin: 0 0 6px; font-size: 14.5px; }

/* ---------- 新しいゲーム（きょうのワード・単語ラッシュ） ---------- */
.wd { max-width: 420px; margin: 0 auto; }
.wd-grid { display: grid; gap: 6px; margin: 10px auto; }
.wd-row { display: grid; gap: 6px; }
.wd-c { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #b7c9d3; border-radius: 10px; font-family: var(--f-en); font-weight: 800; font-size: clamp(20px, 6vw, 28px); text-transform: uppercase; background: #fff; transition: transform 0.25s; }
.wd-c.f { border-color: var(--ink); animation: pop 0.12s; }
@keyframes pop { 50% { transform: scale(1.08); } }
.wd-c.hit { background: var(--sky-d); border-color: var(--sky-dd); color: #fff; }
.wd-c.near { background: #ff922b; border-color: #e8590c; color: #fff; }
.wd-c.miss { background: #495057; border-color: #343a40; color: #fff; }
.wd-c.rev { animation: flip 0.45s; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.wd-hint { text-align: center; font-size: 13.5px; font-weight: 700; margin: 6px 0; }
.wd-kb { display: grid; gap: 6px; margin-top: 10px; user-select: none; }
.wd-kr { display: flex; gap: 4px; justify-content: center; }
.wd-k { flex: 1; max-width: 40px; height: 50px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; font-family: var(--f-en); font-weight: 800; font-size: 15px; padding: 0; text-transform: uppercase; touch-action: manipulation; }
.wd-k.wide { flex: 1.6; max-width: 64px; font-size: 12px; }
.wd-k.hit { background: var(--sky-d); color: #fff; border-color: var(--sky-dd); }
.wd-k.near { background: #ff922b; color: #fff; border-color: #e8590c; }
.wd-k.miss { background: #adb5bd; color: #fff; border-color: #868e96; }
.wd-msg { text-align: center; min-height: 24px; font-weight: 900; }
.wd-res { text-align: center; margin-top: 10px; }
.wd-res .w { font-family: var(--f-en); font-size: 30px; font-weight: 800; color: var(--sky-dd); margin: 0; }
.wd-modes { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.wd-modes button { border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 12px; font-weight: 900; font-size: 13px; }
.wd-modes button.on { background: var(--ink); color: #fff; }
.box-wd { background: #e7f5ff; }
.wd-mini { display: flex; gap: 4px; }
.wd-mini i { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #b7c9d3; border-radius: 6px; font-style: normal; font-family: var(--f-en); font-weight: 800; background: #fff; }
.wd-mini i.hit { background: var(--sky-d); color: #fff; border-color: var(--sky-dd); }
.wd-mini i.near { background: #ff922b; color: #fff; border-color: #e8590c; }
.lv-tabs { transition: top 0.15s; }
/* SNS の投稿の埋め込み（記事の「SNSで話題！」と /buzz/） */
.snsb { display: inline-block; font-style: normal; font-weight: 900; font-size: 11.5px; line-height: 1.5; padding: 1px 7px; border-radius: 999px; white-space: nowrap; color: #fff; background: var(--ink); }
.snsb-tiktok { background: linear-gradient(90deg, #25f4ee, #111 35%, #111 65%, #fe2c55); }
.card-img .snsb { position: absolute; right: 10px; top: 10px; font-size: 12.5px; padding: 2px 9px; border: 2px solid #fff; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
.row-meta .snsb { font-size: 10.5px; padding: 0 6px; }
.xposts { margin: 22px 0 26px; padding: 16px 14px 12px; background: linear-gradient(135deg, #fff 0%, var(--sky-l) 100%); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); }
.xposts-h { font-size: 18px; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.xposts-h > span { flex-basis: 100%; font-family: var(--f-en); font-size: 11.5px; letter-spacing: 0.16em; color: var(--red); }
.xposts-h .snsb { font-size: 13px; padding: 2px 9px; }
.xposts-g { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.xpost { margin: 0; min-width: 0; }
.xpost-w { position: relative; }
.xpost-stat { position: absolute; z-index: 2; left: 50%; top: -10px; transform: translateX(-50%) rotate(-2deg); background: var(--yellow); border: var(--bw) solid var(--ink); border-radius: 999px; padding: 0 10px; font-size: 12.5px; font-weight: 900; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }
.xpost .twitter-tweet, .xpost-w .twitter-tweet, .xpost-w .tiktok-embed { margin: 0 auto !important; }
.xpost-w blockquote.twitter-tweet, .xpost-w blockquote.tiktok-embed { max-width: 550px; margin: 0 auto; padding: 14px 16px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); }
.xpost-w blockquote.tiktok-embed { max-width: 325px; min-width: 0; }
.xpost-fb { margin: 0 0 6px; font-size: 14px; }
.xpost-fb small { margin-left: 4px; color: var(--ink2); font-size: 12.5px; }
.xpost-fb small::before { content: '（'; }
.xpost-fb small::after { content: '）'; }
.xpost-w blockquote a { font-weight: 700; }
.xpost figcaption { max-width: 550px; margin: 8px auto 0; font-size: 13.5px; }
.xposts-n { margin: 8px 0 0; font-size: 12px; color: var(--ink2); }
.xposts-n a { font-weight: 700; white-space: nowrap; }
.buzz-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; align-items: start; margin: 10px 0 30px; }
.buzz-c { margin: 0; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 12px 10px 0; overflow: hidden; }
.buzz-c .xpost-w blockquote { box-shadow: none; }
.buzz-a { display: block; margin: 10px -10px 0; padding: 10px 14px 12px; background: var(--sky-l); border-top: var(--bw) solid var(--ink); color: var(--ink); text-decoration: none; }
.buzz-a b { display: block; font-size: 15px; line-height: 1.5; }
.buzz-k { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.buzz-en { display: block; font-family: var(--f-en); font-size: 13px; color: var(--sky-dd); }
.buzz-go { display: inline-block; margin-top: 6px; font-weight: 900; font-size: 13px; background: var(--sky); color: #fff; border: var(--bw) solid var(--ink); border-radius: 999px; padding: 1px 12px; }
.buzz-a:hover .buzz-go { background: var(--sky-d); }
@media (max-width: 559px) { .cards .card-img .snsb { right: 4px; top: 4px; font-size: 10px; padding: 0 5px; border-width: 1.5px; } }
.vids { margin: 26px 0; }
.vids-h { font-size: 17px; margin: 0 0 10px; display: flex; flex-direction: column; }
.vids-h span { font-family: var(--f-en); font-size: 11.5px; letter-spacing: 0.16em; color: var(--red); }
.vid { margin: 0 0 16px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.yt { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000 center / cover no-repeat; position: relative; cursor: pointer; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: #f00; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.yt-play::after { content: ''; position: absolute; left: 27px; top: 14px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.vid figcaption { padding: 8px 12px; font-size: 13px; }
.vid figcaption b { display: block; font-size: 14px; }
.vid figcaption small { color: var(--ink2); }
.vid figcaption span { display: block; margin-top: 2px; }
.ws-cj { margin-left: 6px; font-size: 7.5pt; border: 1px solid #555; border-radius: 3px; padding: 0 3px; font-weight: 700; }
.ws-en { display: block; font-family: var(--f-en); font-size: 8.5pt; color: #333; font-style: italic; }
.ws-cite { font-size: 7pt; color: #555; margin: 4px 0 0; }

/* 日本語を変なところで改行しない（文節で折り返す。Safari 向けに .nw のかたまりも） */
.nw { display: inline-block; }
h1, h2, h3, .card-t, .row-t, .box-t, .art-t, .lh h1, .home-h1, .sum li, .ws-site, .ws-t, .exl b, .trend a, .drawer-list b, .sis b, .pn a, .src-n, .lh-lead, .exam-why, .box-d, .card-d { word-break: auto-phrase; }
.ws-h { flex-wrap: wrap; align-items: baseline; }
.ws-name { margin-left: auto; white-space: nowrap; }

/* ワークシートの題名と QR は横並び（QR が本文に重ならない） */
.ws-top { display: flex; gap: 5mm; align-items: flex-start; margin-bottom: 4px; }
.ws-titles { flex: 1; min-width: 0; }
.ws .ws-t, .ws .ws-en { padding-right: 0; }
.ws .ws-qr { position: static; flex: none; width: 24mm; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 7pt; line-height: 1.3; text-align: center; }
.ws .ws-qr svg { width: 22mm; height: 22mm; display: block; }
@media screen and (max-width: 840px) { .ws .ws-qr { width: 84px; } .ws .ws-qr svg { width: 76px; height: 76px; } }

/* CEFR-J の絞りこみボタン：レベルの色を必ず出す */
.cj-filt button.cj-A1 { background: #1f9d55; color: #fff; }
.cj-filt button.cj-A2 { background: #1ea7e1; color: #fff; }
.cj-filt button.cj-B1 { background: #f08c00; color: #fff; }
.cj-filt button.cj-B2 { background: #d6336c; color: #fff; }
.cj-filt button.cj { font-family: var(--f-en); font-size: 14px; min-width: 52px; padding: 5px 14px; line-height: 1.2; vertical-align: 0; margin: 0; }
.cj-filt button.on { outline: 3px solid var(--ink); outline-offset: 2px; }

.confetti { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tb-snd { border: 1px solid #666; background: none; color: #fff; border-radius: 99px; font-size: 11px; font-weight: 700; padding: 0 8px; line-height: 20px; margin-left: auto; white-space: nowrap; }
.tb-snd + .tb-me { margin-left: 8px; }
.cj-note { font-size: 12.5px; margin: 8px 2px 0; line-height: 1.9; }
.cj-note .cj { margin: 0 2px; }

/* 一覧の絞りこみ */
.lf { position: sticky; top: var(--mh, 0px); z-index: 15; background: var(--sky-ll); padding: 8px 0; margin-bottom: 8px; }
.lf input { width: 100%; font: inherit; font-size: 16px; padding: 9px 12px; border: var(--bw) solid var(--ink); border-radius: 12px; background: #fff; }
.lf-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 5px -4px 0; padding: 3px 4px 4px; }
.lf-cats::-webkit-scrollbar { display: none; }
.lf-cats button { flex: none; border: var(--bw) solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 12px; font-weight: 900; font-size: 13px; }
.lf-cats button.on { background: var(--c, var(--ink)); color: #fff; border-color: var(--ink); }
.lf-n { margin: 6px 2px 0; font-size: 12px; font-weight: 700; color: var(--ink2); }
.lf-more { text-align: center; margin: 16px 0; }

/* ---------- トップ（2026-10 作り直し：右の列をやめて、横に広い段を積む） ---------- */
.home-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 18px 0 14px; }
.home-date { margin: 0; font-weight: 900; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.home-date b { background: var(--ink); color: var(--yellow); border-radius: 6px; padding: 3px 9px; font-family: var(--f-display); font-weight: 400; font-size: 14px; transform: rotate(-2deg); display: inline-block; }
.home-top .home-h1 { margin: 0; font-size: clamp(17px, 2.4vw, 22px); }
.home-top .home-h1 small { font-size: 12px; }

/* 今朝のニュースの3本：絵の上に見出し */
.hero { display: grid; gap: 14px; }
@media (min-width: 860px) { .hero { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.hero-subs { display: grid; gap: 14px; }
.hero-c { position: relative; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; background: var(--sky-dd); min-height: 210px; isolation: isolate; transition: transform 0.15s, box-shadow 0.15s; }
.hero-c:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.hero-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.5s; }
.hero-c:hover img { transform: scale(1.05); }
.hero-c::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(5, 20, 40, 0.55) 58%, rgba(5, 20, 40, 0.92)); }
.hero-b { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 16px; color: #fff; }
.hero-big { min-height: clamp(340px, 46vw, 500px); }
.hero-big .hero-b { padding: 22px 24px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.hero-meta .cat { box-shadow: 0 0 0 1.5px #fff; }
.hero-t { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 900; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.hero-big .hero-t { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 3vw, 32px); line-height: 1.35; }
.hero-t a { color: #fff; text-decoration: none; }
.hero-t a::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.hero-en { margin: 4px 0 0; font-family: var(--f-en); font-weight: 600; font-size: 13px; line-height: 1.35; color: #bfe9ff; }
.hero-big .hero-en { font-size: 16px; }
.hero-lv { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }

/* トップは「ガチャガチャしている」と言われたので（2026-10-13）、色は水色・黒・白だけ、箱の形と見出しの形をそろえて、段のあいだを広くとる */
.p-home .sec { margin: 44px 0; }
.p-home .card-meta .wow { display: none; }
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

/* 知ってた？：細い1段（見出し｜びっくり事実｜ボタン） */
.hee { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; margin: 36px 0; padding: 14px 18px; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); }
.hee-h { margin: 0; display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.25; white-space: nowrap; }
.hee-k { font-family: var(--f-en); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; color: var(--sky-d); }
.hee-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding-left: 20px; border-left: 1px solid var(--line); }
.hee-card img { flex: none; width: 84px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--sky-l); }
.hee-b { min-width: 0; }
.hee-f { margin: 0; font-weight: 900; font-size: 15.5px; line-height: 1.55; }
.hee-src { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hee-src span { display: inline-block; background: var(--sky-l); color: var(--sky-dd); border-radius: 4px; padding: 0 6px; margin-right: 6px; font-weight: 900; font-size: 11px; }
.hee-src a { color: var(--ink2); }
.hee-btns { display: flex; align-items: center; gap: 14px; margin: 0; white-space: nowrap; }
.hee-n { font-weight: 900; font-size: 12px; color: var(--sky-d); }
.hee-card.pop { animation: hee-pop 0.35s ease-out; }
@keyframes hee-pop { 0% { transform: translateY(6px); opacity: 0.3; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hee-card.pop { animation: none; } }
@media (max-width: 759px) {
  .hee { grid-template-columns: 1fr; padding: 14px; }
  .hee-card { padding: 0; border: 0; align-items: flex-start; }
  .hee-card img { width: 72px; height: 48px; }
  .hee-f { font-size: 14.5px; }
}

/* 横いっぱいの帯（最新トレンド＝黒、紹介しよう＝白）。見出しは .sec-h でほかの段とそろえる */
.band { padding: 36px 0 40px; }
.band .sec-h { margin-bottom: 6px; }
.band-d { margin: 0 0 16px; font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.tband { margin-top: 48px; background: var(--ink); color: #fff; }
.tband .sec-h { border-color: #fff; }
.tband .sec-en { color: var(--yellow); }
.tband .more { color: #fff; }
.tband .band-d { color: #b9c4cb; }
.tband-f { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 2px 2px 4px; }
.tband-f::-webkit-scrollbar { display: none; }
.tband-f button { flex: none; border: var(--bw) solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 900; font-size: 13.5px; box-shadow: 2px 2px 0 var(--ink); }
.tband-f button.on { background: var(--g, var(--ink)); color: #fff; }
.tband .tband-f button { border: 1.5px solid #555; background: transparent; color: #fff; box-shadow: none; font-size: 13px; }
.tband .tband-f button.on { background: #fff; color: var(--ink); border-color: #fff; }
.tband-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .tband-grid { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; } }
.tcs { list-style: none; margin: 0; padding: 4px 4px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 220px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.tc { scroll-snap-align: start; }
.tc a { display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--ink); text-decoration: none; border-radius: var(--r); overflow: hidden; transition: transform 0.15s; }
.tc a:hover { transform: translateY(-4px); }
.tc-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sky-l); }
.tc-img img { width: 100%; height: 100%; object-fit: cover; }
.tc-g { position: absolute; left: 8px; top: 8px; background: var(--g); color: #fff; font-size: 11.5px; font-weight: 900; padding: 2px 9px; border-radius: 999px; }
.tc-b { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.tc-t { font-weight: 900; font-size: 14.5px; line-height: 1.45; }
.tc-en { font-family: var(--f-en); font-size: 12px; color: var(--sky-dd); font-weight: 600; line-height: 1.35; }
.tc-b time { margin-top: auto; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.tslang { border: 1px solid #333; border-radius: var(--r); padding: 14px 16px; }
.tslang .box-k { color: var(--yellow); }
.tslang-t { font-family: var(--f-display); font-size: 18px; margin: 0 0 4px; line-height: 1.3; }
.tband .slang-l li { border-top-color: #333; }
.tband .slang-l li::before { background: var(--yellow); color: var(--ink); }
.tband .slang-l a { color: #fff; }
.tband .slang-l small { color: #b9c4cb; }
.sband { background: #fff; border-bottom: var(--bw) solid var(--ink); }
.sband .scs { scrollbar-color: var(--line) transparent; }
@media (min-width: 960px) { .sband .scs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding: 4px 0 6px; } }
.sband-more { margin: 14px 0 0; }

/* ジャンルで読む：タブ＋ランキング */
.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 960px) { .cat-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } }
.ctabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs button { flex: none; border: var(--bw) solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; padding: 7px 18px 6px; font-weight: 900; font-size: 14.5px; color: var(--ink2); margin-top: 4px; }
.ctabs button[aria-selected='true'] { background: var(--c); color: #fff; padding-top: 10px; margin-top: 0; }
.cpanel .rows { border-top-left-radius: 0; box-shadow: var(--sh); border-top-width: 4px; }
.cpanel .more { display: inline-block; margin: 12px 4px 0; }

/* 遊んで覚える・授業で使う：記者証の細い帯＋同じ形の入口5つ */
.mebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; background: var(--sky); color: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 12px 18px; margin-bottom: 16px; }
.mebar-me { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mebar-me .box-k { color: #fff; opacity: 0.85; margin: 0 0 3px; font-size: 10.5px; }
.mebar-me b { font-family: var(--f-display); font-weight: 400; font-size: 21px; }
.mebar .me-stats { margin: 0; }
.mebar-pg { flex: 1 1 160px; min-width: 150px; }
.mebar .me-next { margin: 4px 0 0; }
.mebar .mission { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 7px 12px; font-size: 12.5px; }
.mebar .mission li { padding: 0; }
.mebar .mission b { margin-left: 2px; font-size: 12px; }
.mebar .more { color: #fff; }
.hub { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hub-i { display: flex; flex-direction: column; gap: 3px; height: 100%; background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px 14px 16px; transition: transform 0.15s, box-shadow 0.15s; }
.hub-i:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.hub-v { height: 42px; display: flex; align-items: center; margin-bottom: 8px; }
.hub-v svg { width: 38px; height: 38px; fill: none; stroke: var(--sky-d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hub-v circle { fill: var(--sky-d); }
.hub-n { font-family: var(--f-display); font-size: 36px; line-height: 1; color: var(--sky-d); }
.hub-n small { font-size: 15px; margin-left: 2px; }
.hub .wd-mini i { width: 26px; height: 26px; font-size: 13px; }
.hub-i b { font-weight: 900; font-size: 15px; line-height: 1.4; word-break: auto-phrase; }
.hub-i small { font-size: 12.5px; color: var(--ink2); line-height: 1.55; }
@media (max-width: 959px) { .hub { grid-template-columns: 1fr 1fr; } .hub > li:nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (max-width: 559px) {
  .p-home .sec { margin: 32px 0; }
  .band { padding: 28px 0 30px; }
  .mebar { gap: 8px 16px; padding: 12px 14px; box-shadow: 3px 3px 0 var(--ink); }
  .mebar-pg { flex-basis: 100%; }
  .hub { gap: 10px; }
  .hub-i { padding: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-v { height: 34px; margin-bottom: 4px; }
  .hub-v svg { width: 30px; height: 30px; }
  .hub-n { font-size: 28px; }
  .hub .wd-mini i { width: 22px; height: 22px; font-size: 11px; }
  .hub-i b { font-size: 13px; letter-spacing: -0.02em; }
  .hub-i small { font-size: 11.5px; }
  .hero-big { min-height: 380px; }
  .hero-big .hero-b { padding: 16px; }
  .hero-subs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-subs .hero-c { min-height: 200px; }
  .hero-subs .hero-b { padding: 10px; }
  .hero-subs .hero-t { font-size: 13.5px; }
  .hero-subs .hero-en { display: none; }
  .tcs { grid-auto-columns: 72%; }
  .box-rank .trend small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-c, .hero-c img, .hub-i, .tc a { transition: none; } }
.gn { display: inline-block; color: var(--g); border: 1.5px solid var(--g); background: #fff; font-weight: 900; font-size: 11px; line-height: 1; padding: 3px 7px 2px; border-radius: 999px; white-space: nowrap; }

/* ---------- 記事をさがす（PC は見出しの右、スマホは見出しの下の帯。下へスクロール中はたたむ） ---------- */
.sch { display: flex; align-items: stretch; background: #fff; border: var(--bw) solid var(--ink); border-radius: 999px; overflow: hidden; }
.sch:focus-within { box-shadow: 0 0 0 3px var(--yellow); }
.sch input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; padding: 6px 4px 6px 16px; outline: none; color: var(--ink); }
.sch input::placeholder { color: #7a8a94; }
.sch button { flex: none; width: 46px; border: 0; border-left: var(--bw) solid var(--ink); background: var(--sky); color: #fff; display: grid; place-items: center; }
.sch button:hover { background: var(--sky-d); }
.sch-d { width: 250px; box-shadow: 2px 2px 0 var(--ink); }
.sch-d input { font-size: 14.5px; }
.sch-mw { display: none; padding-top: 10px; padding-bottom: 2px; }
@media (max-width: 859px) {
  .sch-d { display: none; }
  .sch-mw { display: block; }
}
.p-search .sch-d, .p-search .sch-mw { display: none; }
.sch-p { max-width: 680px; box-shadow: var(--sh); margin: 0 0 14px; }
.sch-p input { font-size: 18px; padding: 11px 6px 11px 20px; }
.sch-p button { width: 58px; }
.sp-n { font-weight: 900; margin: 0 0 10px; min-height: 1em; }
.sp-tp { margin: 0 0 12px; }
/* テーマのリンク */
.tpc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tpc a { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 900; font-size: 14px; line-height: 1.5; color: var(--ink); text-decoration: none; }
.tpc a:hover { background: var(--sky-l); }
.tpc a[aria-current] { background: var(--sky); color: #fff; }
.tpc small { font-family: var(--f-en); font-size: 11px; font-weight: 700; color: var(--sky-dd); }
.tpc a[aria-current] small { color: #fff; }
.art-tp { margin: 24px 0; }
.art-tp p { margin: 0 0 8px; font-weight: 900; font-size: 14px; }
/* フッターのテーマ一覧：長い文字の羅列にならないよう、たたんでボタン型に */
.foot-tp { margin: 16px 0 0; font-size: 13px; }
.foot-tp summary { cursor: pointer; color: #fff; font-weight: 700; width: fit-content; }
.foot-tp ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.foot-tp a { display: block; padding: 3px 10px; border: 1px solid #555; border-radius: 999px; color: #ddd; text-decoration: none; font-size: 12px; line-height: 1.5; }
.foot-tp a:hover { border-color: #fff; color: #fff; }
/* 行事の記事 → 世界の行事・祝日ナビ（/holiday/）への入口 */
.sum-hol { margin: 10px 0 0; font-weight: 900; font-size: 14px; }
.sum-hol a { color: #3b55c0; }
.hol { background: #fff8e6; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--ink); padding: 14px 16px; margin: 22px 0; }
.hol-k { margin: 0 0 8px; font-size: 12px; font-weight: 900; color: #3b55c0; letter-spacing: .04em; }
.hol-main { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); }
.hol-e { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 30px; background: #fff; border: var(--bw) solid var(--ink); border-radius: 14px; transform: rotate(-4deg); }
.hol-t { font-size: 15px; font-weight: 700; line-height: 1.5; }
.hol-t b { font-size: 19px; font-weight: 900; }
.hol-t small { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 700; }
.hol-l { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hol-l a { display: inline-block; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 900; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hol-l a:hover, .hol-main:hover .hol-t b { color: #3b55c0; }
/* ---------- CEFR-J 英単語ラボ（/cefrj/） ---------- */
.cjx-top { display: grid; gap: 14px; margin: 0 0 18px; }
@media (min-width: 860px) { .cjx-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: stretch; } }
.cjx-today { background: #fff7d6; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px 18px 16px; position: relative; overflow: hidden; }
.cjx-today .box-k { color: var(--ink); }
.cjx-tw { margin: 2px 0 0; font-family: var(--f-en); font-weight: 800; font-size: clamp(30px, 7vw, 40px); line-height: 1.15; word-break: break-word; }
.cjx-tw .cj { font-size: 13px; vertical-align: 8px; }
.cjx-tw-p { margin: 4px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cjx-tw-q { margin: 0 0 8px; font-size: 13px; }
.cjx-tw-a { border-top: 2px dashed var(--ink); padding-top: 8px; animation: pop 0.25s; }
.cjx-tw-j { margin: 0; font-weight: 900; font-size: 18px; }
.cjx-tw-d { margin: 2px 0 0; font-family: var(--f-en); font-size: 13.5px; font-style: italic; color: var(--sky-dd); line-height: 1.5; }
.cjx-tw-n { margin: 6px 0 0; font-size: 13px; font-weight: 700; }
.cjx-lvs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .cjx-lvs { grid-template-columns: repeat(4, 1fr); } }
.cjx-lv { --c: #1f9d55; text-align: left; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 3px 3px 0 var(--ink); padding: 0 0 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.08s, box-shadow 0.08s; }
.cjx-lv:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.cjx-lv.lv-A2 { --c: #1ea7e1; }
.cjx-lv.lv-B1 { --c: #f08c00; }
.cjx-lv.lv-B2 { --c: #d6336c; }
.cjx-lv-h { background: var(--c); color: #fff; padding: 4px 12px; display: flex; align-items: baseline; gap: 8px; border-bottom: var(--bw) solid var(--ink); }
.cjx-lv-h b { font-family: var(--f-en); font-weight: 800; font-size: 24px; line-height: 1.2; }
.cjx-lv-h em { font-style: normal; font-weight: 900; font-size: 13px; }
.cjx-lv-n { font-family: var(--f-en); font-weight: 800; font-size: 26px; padding: 6px 12px 0; line-height: 1.1; }
.cjx-lv-n small { font-family: var(--f-ja); font-size: 12px; margin-left: 2px; }
.cjx-lv-e { font-size: 11.5px; font-weight: 700; color: var(--ink2); padding: 2px 12px 0; line-height: 1.45; flex: 1; }
.cjx-meter { display: block; margin: 8px 12px 14px; height: 8px; border-radius: 99px; background: var(--sky-l); border: 1.5px solid var(--ink); position: relative; }
.cjx-meter i { display: block; height: 100%; border-radius: 99px; background: var(--c); transition: width 0.8s; }
.cjx-meter::after { content: attr(data-t); position: absolute; left: 0; top: 9px; font-size: 10.5px; font-weight: 900; color: var(--ink2); white-space: nowrap; }
.cjx-meter.none { border-style: dashed; opacity: 0.6; }
.cjx-tabs { display: grid; grid-template-columns: 1fr 1fr; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; margin: 0 0 16px; background: #fff; box-shadow: 3px 3px 0 var(--ink); scroll-margin-top: 12px; }
@media (min-width: 720px) { .cjx-tabs { grid-template-columns: repeat(4, 1fr); } }
.cjx-tabs button { border: 0; background: #fff; padding: 8px 6px; font-weight: 900; font-size: 15px; line-height: 1.3; display: flex; flex-direction: column; align-items: center; border-right: var(--bw) solid var(--ink); }
.cjx-tabs button small { font-family: var(--f-en); font-size: 10.5px; letter-spacing: 0.14em; color: var(--sky-d); }
.cjx-tabs button.on { background: var(--sky); color: #fff; }
.cjx-tabs button.on small { color: #fff; }
.cjx-tabs button:hover:not(.on) { background: var(--sky-ll); }
@media (max-width: 719px) {
  .cjx-tabs button:nth-child(2n) { border-right: 0; }
  .cjx-tabs button:nth-child(-n + 2) { border-bottom: var(--bw) solid var(--ink); }
}
@media (min-width: 720px) { .cjx-tabs button:last-child { border-right: 0; } }
.cjx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 6px; }
.cjx-bar .cj-filt { margin: 6px 0; }
.cjx-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cjx-modes button { border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 13px; font-weight: 900; font-size: 13px; background: #fff; }
.cjx-modes button.on { background: var(--ink); color: #fff; }
.cjx-modes b { margin-left: 4px; background: var(--yellow); color: var(--ink); border-radius: 99px; padding: 0 6px; font-family: var(--f-en); font-size: 11.5px; }
.cjx-modes b:empty { display: none; }
.cjx-hide { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 13.5px; cursor: pointer; background: #ffe1e3; border: 1.5px solid var(--red); border-radius: 999px; padding: 3px 12px; }
.cjx-hide input { accent-color: var(--red); width: 16px; height: 16px; margin: 0; }
.cjx-hide small { font-size: 11.5px; color: var(--red); }
.cjx-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.cjx-az button { width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; font-family: var(--f-en); font-weight: 800; font-size: 14px; padding: 0; }
.cjx-az button.on { background: var(--sky); color: #fff; }
.cj-res.cjx-grid { display: grid; gap: 10px; background: none; border: 0; border-radius: 0; overflow: visible; }
@media (min-width: 640px) { .cj-res.cjx-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cj-res.cjx-grid { grid-template-columns: 1fr 1fr 1fr; } }
.cjx-grid li.cjx-w { --c: #1f9d55; background: #fff; border: var(--bw) solid var(--ink); border-left: 7px solid var(--c); border-radius: 12px; padding: 8px 10px 9px 12px; box-shadow: 2px 2px 0 var(--ink); }
.cjx-grid li.lv-A2 { --c: #1ea7e1; }
.cjx-grid li.lv-B1 { --c: #f08c00; }
.cjx-grid li.lv-B2 { --c: #d6336c; }
.cjx-wh { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.cjx-wh .w { word-break: break-word; }
.cjx-act { margin-left: auto; display: inline-flex; gap: 4px; }
.cjx-say, .cjx-star { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; padding: 0; font-size: 17px; line-height: 1; color: var(--ink); }
.cjx-say:hover { background: var(--sky-l); }
.cjx-star { color: #b58a00; }
.cjx-star.on { background: var(--yellow); color: var(--ink); }
.cjx-grid .j { margin-top: 2px; font-weight: 700; }
.cjx-grid .n { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.cjx-grid .n b { font-family: var(--f-en); font-size: 10px; background: var(--red); color: #fff; border-radius: 3px; padding: 1px 4px; letter-spacing: 0.06em; }
.cjx-grid .n a { margin: 0; }
.cjx-grid.hide li { cursor: pointer; }
.cjx-grid.hide li:not(.open) .j, .cjx-grid.hide li:not(.open) .d { color: transparent; background: #ff8f99; border-radius: 4px; user-select: none; }
.cjx-grid.hide li:not(.open) .n { display: none; }
.cjx-grid.hide li:not(.open) .j::before { content: 'タップで答え'; color: #fff; font-size: 12px; font-weight: 900; padding-left: 6px; }
.cjx-more { text-align: center; margin: 16px 0 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* 診断・ゲームの台 */
.cjx-stage { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 18px 16px 20px; max-width: 760px; margin: 0 auto 20px; }
.cjx-intro { text-align: center; max-width: 560px; margin: 0 auto; }
.cjx-intro h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 5vw, 32px); line-height: 1.3; margin: 0 0 8px; }
.cjx-intro p { margin: 0 0 10px; font-size: 14.5px; text-align: left; }
.cjx-intro .box-k, .cjx-intro .cjx-prev { text-align: center; }
.cjx-tip { background: var(--sky-ll); border: 1.5px dashed var(--sky-d); border-radius: 10px; padding: 6px 12px; font-weight: 700; }
.cjx-prev { font-weight: 900; }
.cjx-go { font-size: 17px; padding: 11px 34px; margin-top: 6px; }
.cjx-prog { display: flex; gap: 3px; margin: 0 0 10px; }
.cjx-prog i { flex: 1; height: 8px; border-radius: 3px; background: #e9eef1; border: 1px solid #c9d3d9; }
.cjx-prog i.ok { background: var(--green); border-color: var(--green); }
.cjx-prog i.ng { background: var(--red); border-color: var(--red); }
.cjx-qh { margin: 0; font-family: var(--f-en); font-weight: 800; font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink2); }
.cjx-qh .cj { margin: 0 6px 0 0; }
.cjx-qw { text-align: center; font-family: var(--f-en); font-weight: 800; font-size: clamp(32px, 9vw, 48px); line-height: 1.15; margin: 14px 0 2px; word-break: break-word; }
.cjx-qs { text-align: center; margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--ink2); display: flex; justify-content: center; align-items: center; gap: 8px; }
.cjx-ch { gap: 8px; }
@media (min-width: 560px) { .cjx-ch { grid-template-columns: 1fr 1fr; } }
.g-ch.cjx-ch button { font-family: var(--f-ja); font-weight: 900; text-align: center; min-height: 54px; }
.g-ch.cjx-ch button.ans { background: #d9f7e3; border-color: var(--green); }
.cjx-skip { display: block; margin: 12px auto 0; border: 1.5px dashed var(--ink2); background: #fff; border-radius: 999px; padding: 6px 22px; font-weight: 900; font-size: 13.5px; color: var(--ink2); }
.cjx-res .box-k { text-align: center; }
.cjx-est-k { margin: 0; font-weight: 900; }
.cjx-est { font-family: var(--f-display); font-size: clamp(46px, 13vw, 68px); line-height: 1.05; margin: 4px 0 0; }
.cjx-est > span { font-family: var(--f-en); font-weight: 800; margin: 0 4px; color: var(--sky-d); }
.cjx-est small { font-size: 22px; }
.cjx-est-of { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.cjx-rank { display: inline-block; font-family: var(--f-display); font-size: 22px; margin: 4px 0 6px; padding: 4px 18px; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); }
.cjx-msg { margin: 6px auto 12px; max-width: 520px; font-weight: 700; font-size: 14.5px; text-wrap: balance; word-break: auto-phrase; }
.cjx-bars { max-width: 460px; margin: 0 auto 10px; text-align: left; }
.cjx-bars p { display: grid; grid-template-columns: 40px 1fr 46px; align-items: center; gap: 8px; margin: 4px 0; }
.cjx-bars .cj { margin: 0; text-align: center; }
.cjx-bar-t { height: 14px; border: 1.5px solid var(--ink); border-radius: 99px; background: #f1f4f6; overflow: hidden; }
.cjx-bar-t i { display: block; height: 100%; background: #1f9d55; animation: grow 1s ease-out; transform-origin: left; }
.cjx-bar-t i.lv-A2 { background: #1ea7e1; }
.cjx-bar-t i.lv-B1 { background: #f08c00; }
.cjx-bar-t i.lv-B2 { background: #d6336c; }
@keyframes grow { from { transform: scaleX(0); } }
.cjx-bars b { font-family: var(--f-en); font-size: 14px; text-align: right; }
.g-score.cjx-sc { font-family: var(--f-ja); font-weight: 900; font-size: 15px; margin: 4px 0 12px; }
.cjx-miss { text-align: left; background: var(--sky-ll); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.cjx-miss ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
@media (min-width: 560px) { .cjx-miss ul { grid-template-columns: 1fr 1fr; } }
.cjx-miss li { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px 3px 10px; font-size: 13.5px; display: flex; align-items: center; gap: 2px; }
.cjx-miss li b { font-family: var(--f-en); }
.cjx-miss li .cjx-say { margin-left: auto; width: 28px; height: 28px; flex: none; }
.cjx-stage .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* ムズいのはどっち？ */
.cjx-vs-top { display: flex; justify-content: space-between; font-weight: 900; margin: 0 0 10px; }
.cjx-vs-top b { font-family: var(--f-display); font-weight: 400; font-size: 26px; color: #f08c00; margin-left: 2px; }
.cjx-vs-top span:last-child { font-size: 13px; color: var(--ink2); align-self: center; }
.g-ch.cjx-vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.g-ch.cjx-vs button.cjx-vsc { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 150px; padding: 12px 8px; box-shadow: 4px 4px 0 var(--ink); border-radius: 16px; transition: transform 0.08s; }
.g-ch.cjx-vs button.cjx-vsc:hover:not(:disabled) { transform: translate(-1px, -2px); }
.cjx-vsc-w { font-family: var(--f-en); font-weight: 800; font-size: clamp(20px, 5.5vw, 30px); line-height: 1.2; word-break: break-word; }
.cjx-vsc-p { font-family: var(--f-ja); font-size: 12px; font-weight: 700; color: var(--ink2); }
.cjx-vsc-a { visibility: hidden; font-family: var(--f-ja); font-size: 13px; font-weight: 900; margin-top: 8px; line-height: 1.4; }
.cjx-vsc-a .cj { margin: 0 4px 0 0; font-size: 12px; }
.cjx-vsc.rev .cjx-vsc-a { visibility: visible; animation: pop 0.3s; }
.cjx-vs-x { align-self: center; font-family: var(--f-display); font-size: 18px; color: var(--red); }
.cjx-vs-note { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin: 12px 0 0; }
.cjx-tw.long { font-size: clamp(24px, 6vw, 34px); }
.cjx-qw.long { font-size: clamp(24px, 7vw, 40px); }
.cjx-vsc-w.long { font-size: clamp(18px, 4.6vw, 24px); }
@media (max-width: 559px) {
  .g-ch.cjx-vs { grid-template-columns: 1fr; }
  .g-ch.cjx-vs button.cjx-vsc { min-height: 108px; }
  .cjx-vs-x { justify-self: center; margin: -4px 0; }
}

/* ---------- 海外の友だちに英語で紹介しよう（記事のチャット・トップの帯・/share/） ---------- */
.shr { margin: 26px 0; border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: var(--sh); background: linear-gradient(160deg, #fff 0%, #fff5f5 100%); padding: 18px 16px 16px; scroll-margin-top: 120px; }
.shr-h { margin-bottom: 12px; }
.shr-k { display: inline-block; margin: 0; font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; color: #fff; background: #c92a2a; border: var(--bw) solid var(--ink); border-radius: 6px; padding: 2px 10px; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--ink); }
.shr-h h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(21px, 3.6vw, 28px); line-height: 1.3; margin: 8px 0 4px; }
.shr-scene { margin: 0; font-weight: 700; font-size: 14px; color: var(--ink2); }
.shr-chat { background: #e8f3fb; border: var(--bw) solid var(--ink); border-radius: 14px; overflow: hidden; }
.shr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 8px 12px; background: #fff; border-bottom: var(--bw) solid var(--ink); }
.shr-to { display: flex; flex-direction: column; line-height: 1.25; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.shr-to b { font-family: var(--f-en); font-size: 15px; color: var(--ink); }
.shr-tg { border: var(--bw) solid var(--ink); background: var(--yellow); border-radius: 999px; font-weight: 900; font-size: 12.5px; padding: 3px 12px; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.shr-tg[aria-pressed='true'] { background: #fff; }
.shr-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.shr-play { display: inline-flex; align-items: center; gap: 5px; border: var(--bw) solid var(--ink); background: var(--sky); color: #fff; border-radius: 999px; font-weight: 900; font-size: 12.5px; padding: 3px 12px 3px 10px; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.shr-play.on { background: #fff; color: var(--ink); }
.shr-play.on svg { display: none; }
.shr-play.loading { opacity: 0.6; }
.msgs { list-style: none; margin: 0; padding: 14px 10px 16px; display: grid; gap: 10px; }
.msg { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.msg-me { flex-direction: row-reverse; }
.msg-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: #fff; border: var(--bw) solid var(--ink); }
.msg-b { position: relative; min-width: 0; max-width: min(82%, 520px); padding: 8px 12px 7px; border: var(--bw) solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 2px 2px 0 var(--ink); transition: box-shadow 0.15s, transform 0.15s; }
.msg-me .msg-b { background: var(--sky); color: #fff; border-bottom-right-radius: 4px; }
.msg-fr .msg-b { border-bottom-left-radius: 4px; }
.msg-en { margin: 0; font-family: var(--f-en); font-weight: 500; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-ja { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; opacity: 0.86; font-weight: 700; }
.no-ja .msg-ja { display: none; }
.msg.now .msg-b { box-shadow: 0 0 0 3px var(--yellow), 3px 3px 0 var(--ink); transform: translateY(-1px); }
.msg-day { text-align: center; }
.msg-day span { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--ink2); background: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 1px 12px; }
.shr-ph { margin: 14px 0 0; border: var(--bw) dashed var(--ink); border-radius: 12px; background: #fffbe0; padding: 10px 14px; }
.shr-ph-k { margin: 0; font-size: 12px; font-weight: 900; color: #c92a2a; }
.shr-ph-en { margin: 2px 0 0; font-family: var(--f-en); font-weight: 700; font-size: 19px; line-height: 1.35; }
.shr-ph-ja { margin: 0; font-weight: 900; font-size: 14px; }
.shr-ph-n { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }
.shr-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.shr-jc { margin-top: 16px; border-top: 2px solid var(--line); padding-top: 12px; }
.shr-jc-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.shr-jc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 640px) { .shr-jc ul { grid-template-columns: 1fr 1fr; } }
.shr-jc a { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; text-decoration: none; color: var(--ink); background: #fff; border: var(--bw) solid var(--ink); border-radius: 12px; padding: 8px 12px; box-shadow: 2px 2px 0 var(--ink); }
.shr-jc a:hover { background: #fff5f5; }
.shr-jc b { font-size: 14px; line-height: 1.4; }
.shr-jc small { grid-column: 1; font-family: var(--f-en); font-size: 12px; color: #c92a2a; }
.shr-jc i { grid-column: 2; grid-row: 1 / 3; font-style: normal; font-size: 11px; font-weight: 900; background: #c92a2a; color: #fff; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

.scs { position: relative; list-style: none; margin: 0; padding: 4px 4px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 270px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #fff transparent; }
.scs-all { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; padding: 4px 0 12px; }
.sc { scroll-snap-align: start; }
.sc a { display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.sc a:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--ink); }
.sc-img { display: block; aspect-ratio: 16 / 9; border-bottom: var(--bw) solid var(--ink); background: var(--sky-l); }
.sc-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-b { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.sc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.sc-t { font-weight: 900; font-size: 14.5px; line-height: 1.45; }
.sc-msg { margin-top: auto; display: block; background: var(--sky); color: #fff; border: var(--bw) solid var(--ink); border-radius: 14px 14px 4px 14px; padding: 7px 11px; box-shadow: 2px 2px 0 var(--ink); }
.sc-en { display: block; font-family: var(--f-en); font-size: 13.5px; line-height: 1.45; font-weight: 500; }
.sc-ja { display: block; font-size: 11.5px; line-height: 1.45; opacity: 0.88; margin-top: 2px; }
.shr-how ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .shr-how ol { grid-template-columns: repeat(3, 1fr); } }
.shr-how li { display: flex; align-items: center; gap: 10px; background: #fff; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); padding: 10px 12px; font-weight: 900; }
.shr-how li > b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #c92a2a; color: #fff; font-family: var(--f-en); border: var(--bw) solid var(--ink); }
.shr-how small { display: block; font-size: 12px; color: var(--ink2); font-weight: 700; }
.sc-f button.on { background: #c92a2a; color: #fff; }
.shr-jcs { margin: 28px 0 10px; }
.shr-jcs h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(19px, 3vw, 24px); margin: 0 0 12px; }
.shr-jcs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .shr-jcs ul { grid-template-columns: 1fr 1fr; } }
.shr-jcs a { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); padding: 10px 14px; }
.shr-jcs a > span { grid-row: 1 / 3; font-size: 26px; }
.shr-jcs small { color: var(--ink2); font-size: 12.5px; }
@media (max-width: 520px) { .shr { padding: 16px 12px 14px; } .msgs { padding: 12px 6px 14px; } .msg-b { max-width: 78%; } .msg-en { font-size: 15px; } }
.msg-me .msg-av { background: var(--yellow); font-family: var(--f-en); font-weight: 800; font-size: 10.5px; letter-spacing: 0.02em; }
@media (max-width: 719px) { .shr-how ol { grid-template-columns: repeat(3, 1fr); gap: 6px; } .shr-how li { flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px; font-size: 12.5px; line-height: 1.4; } .shr-how li > b { width: 26px; height: 26px; font-size: 13px; } .shr-how small { display: none; } }
/* ---------- 動き（Motion：src/assets/fx.js）。html.mo は「動きを減らす」設定でない人だけに付く ---------- */
/* 見えたら出す箱：fx.js が出すまで隠しておく（fx.js の RV と同じ並び）。印刷では隠さない */
@media screen {
  .mo :is(.home-top, .hero-c, .hee, .mebar, .hub > li, .sec-h, .band-d, .cards > .card, .rows > .row, .tband-f, .tcs > .tc, .tslang, .ctabs, .box-rank, .how-l > li, .sum, .exam, .vids, .pickup, .src, .hol, .sis, .blk, .gc-card, .cjx-lv, .tpc > li):not(.rv-in) { opacity: 0; }
}
/* 見出しの黄色いマーカー（JS が無くてもマーカーは出る） */
.mk { background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mo .mk { background-size: 0% 100%; transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.mo .mk.on { background-size: 100% 100%; }
/* ロゴの J：乗せるとぴょこっと */
.mo .logo:hover .logo-mark { animation: logo-hop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes logo-hop { 40% { transform: translateY(-5px) rotate(6deg); } 100% { transform: rotate(-4deg); } }
/* ゲームの正解はぽんっと */
.mo :is(.g-ch button.ok, .g-tf button.ok, .mt.ok) { animation: pop 0.3s; }
.wd-mini { perspective: 300px; }
.hee-card { transform-origin: 50% 50%; }

/* ページを移るとき：前のページと新しいページが重なって入れかわる（見出しの帯は同じ場所なので動かない）。
   記事を開くと、押したカードの絵がそのまま記事の大きな絵になる（対応ブラウザだけ。fx.js が押した絵に名前を付ける） */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .art-fig img { view-transition-name: art-img; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
  ::view-transition-group(art-img) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  ::view-transition-old(art-img), ::view-transition-new(art-img) { height: 100%; object-fit: cover; overflow: hidden; }
}

/* ワークシートの白黒イラスト（線画）：生徒が使うページの最後の余白に、空いている分だけの大きさで入れる */
.ws-art { margin: 6mm 0 0; height: 60mm; }
.ws-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media screen and (max-width: 840px) { .ws-art { height: auto; } .ws-art img { height: auto; } }

/* ---------- 勉強ハック道具箱（/study/）と入口 ---------- */
.stp { margin: 0 0 18px; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); background: linear-gradient(120deg, #ebfbee, #fff4e6); padding: 12px 14px 14px; }
.stp-s { margin: 22px 0; }
.stp-k { margin: 0 0 8px; font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; color: #5c940d; }
.stp-k span { font-family: var(--f-ja); letter-spacing: 0; color: var(--ink); font-size: 15px; margin-left: 6px; font-weight: 900; }
.stp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 760px) { .stp ul { grid-template-columns: repeat(4, 1fr); } }
.stp a { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; height: 100%; background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--ink); border-radius: 12px; padding: 8px 10px; box-shadow: 2px 2px 0 var(--ink); }
.stp a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.stp a > span { grid-row: 1 / 3; font-size: 26px; }
.stp b { font-size: 14px; line-height: 1.35; }
.stp small { font-size: 11.5px; color: var(--ink2); line-height: 1.35; }
@media (max-width: 600px) { .stp a { grid-template-columns: 1fr; text-align: center; padding: 8px 4px; } .stp a > span { grid-row: auto; font-size: 22px; } .stp b { font-size: 12.5px; } .stp small { display: none; } }

.sx { position: relative; color: #eef1ff; background: radial-gradient(1200px 500px at 12% -10%, rgba(255, 170, 90, 0.22), transparent 60%), radial-gradient(900px 600px at 100% 10%, rgba(120, 90, 255, 0.28), transparent 60%), radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px) 0 0 / 46px 46px, linear-gradient(180deg, #151a3a 0%, #0c0f24 100%); padding: 10px 0 34px; border-bottom: var(--bw) solid var(--ink); overflow: hidden; }
.sx .bc, .sx .bc a { color: rgba(238, 241, 255, 0.75); }
.sx-head { margin: 6px 0 18px; }
.sx-k { margin: 0; font-family: var(--f-en); font-weight: 800; letter-spacing: 0.28em; font-size: 12px; color: #ffb37a; }
.sx-head h1 { margin: 4px 0 6px; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 5vw, 44px); line-height: 1.2; background: linear-gradient(90deg, #fff, #c9c2ff 60%, #ffb37a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-lead { margin: 0; max-width: 46em; font-size: 14.5px; color: rgba(238, 241, 255, 0.82); }
.sx-main, .sx-sub { display: grid; gap: 16px; }
.sx-sub { margin-top: 16px; }
@media (min-width: 960px) { .sx-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .sx-sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.sx-card { position: relative; background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px; padding: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scroll-margin-top: 120px; }
.sx-ch { margin-bottom: 12px; }
.sx-ck { margin: 0; font-family: var(--f-en); font-weight: 800; letter-spacing: 0.22em; font-size: 11px; color: rgba(238, 241, 255, 0.6); }
.sx-ch h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 21px; color: #fff; }
.sx-seg { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; }
.sx-seg button { flex: 1 1 0; min-width: 0; border: 0; background: none; color: rgba(238, 241, 255, 0.7); border-radius: 12px; padding: 7px 4px; display: flex; flex-direction: column; align-items: center; line-height: 1.25; transition: background 0.2s, color 0.2s; }
.sx-seg button b { font-family: var(--f-en); font-weight: 700; font-size: 17px; }
.sx-seg button b i { font-style: normal; opacity: 0.5; margin: 0 2px; }
.sx-seg button small { font-size: 11px; font-weight: 700; }
.sx-seg button.on { background: rgba(255, 255, 255, 0.95); color: #151a3a; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.sx-seg button:not(.on):hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* ポモドーロタイマー：時計の目盛り・光る先端・回るオーラ。数字の大きさはリングの幅に合わせる（cqw） */
.st-pomo { --glow: rgba(255, 80, 110, 0.55); --pc: #ff6b7d; --pc2: #ffb35b; overflow: hidden; }
.st-pomo[data-mode='brk'], .st-pomo[data-mode='long'] { --glow: rgba(70, 220, 200, 0.5); --pc: #5ef2c2; --pc2: #2b9bff; }
.st-pomo[data-mode='sw'] { --glow: rgba(150, 120, 255, 0.55); --pc: #b49bff; --pc2: #4dc3ff; }
.st-pomo::before { content: ''; position: absolute; left: -20%; right: -20%; top: 18%; height: 70%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: 0.22; pointer-events: none; transition: opacity 0.8s; }
.st-pomo.is-run::before { opacity: 0.4; }
.st-hd { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.st-zen { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; border-radius: 999px; padding: 6px 12px 6px 9px; font-weight: 900; font-size: 12px; transition: background 0.2s; }
.st-zen:hover { background: rgba(255, 255, 255, 0.16); }
.st-zen svg { width: 16px; height: 16px; }
.st-ring { position: relative; width: min(330px, 80vw); margin: 2px auto 0; aspect-ratio: 1; container-type: inline-size; }
.st-aura { position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 12%, var(--pc) 24%, transparent 38% 62%, var(--pc2) 76%, transparent 88%); filter: blur(30px); opacity: 0.22; transition: opacity 0.8s; }
.st-pomo.is-run .st-aura { opacity: 0.5; animation: stSpin 16s linear infinite; }
@keyframes stSpin { to { transform: rotate(1turn); } }
.st-ring svg { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.st-ring circle { fill: none; }
.st-ticks line { stroke: rgba(255, 255, 255, 0.13); stroke-width: 1.5; stroke-linecap: round; transition: stroke 0.5s; }
.st-ticks line.mj { stroke-width: 2.6; stroke: rgba(255, 255, 255, 0.24); }
.st-ticks line.on { stroke: var(--pc); }
.st-ticks line.mj.on { stroke: #fff; }
.st-ring-bg { stroke: rgba(255, 255, 255, 0.07); stroke-width: 12; }
.st-ring-fg { stroke: url(#sxg-focus); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 10px var(--glow)); transition: stroke-dashoffset 0.25s linear; }
.st-pomo[data-mode='brk'] .st-ring-fg, .st-pomo[data-mode='long'] .st-ring-fg { stroke: url(#sxg-brk); }
.st-pomo[data-mode='sw'] .st-ring-fg { stroke: url(#sxg-sw); }
.st-orbit { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; stroke-dasharray: 1.5 7; transform-origin: 120px 120px; }
.st-pomo.is-run .st-orbit { animation: stSpin 60s linear infinite; }
.st-head { transform-origin: 120px 120px; transition: transform 0.25s linear; }
.st-head-glow { fill: var(--pc); opacity: 0.45; filter: blur(5px); }
.st-head-dot { fill: #fff; filter: drop-shadow(0 0 4px #fff); }
.st-pomo:not(.is-run) .st-head-glow { animation: stBlink 2.4s ease-in-out infinite; }
.st-ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.st-phase { margin: 0; font-weight: 900; font-size: max(12px, 4cqw); color: var(--pc); letter-spacing: 0.04em; }
.st-phase span { font-family: var(--f-en); letter-spacing: 0.32em; margin-right: 4px; }
.st-time { margin: 0; display: flex; justify-content: center; align-items: baseline; font-family: 'Lexend', var(--f-en); font-weight: 200; font-size: 25cqw; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-shadow: 0 0 34px var(--glow), 0 0 1px rgba(255, 255, 255, 0.8); transition: color 0.4s; }
.st-time i { font-style: normal; margin: 0 0.03em; position: relative; top: -0.07em; }
.st-pomo.is-run .st-time i { animation: stColon 1s steps(1) infinite; }
@keyframes stColon { 50% { opacity: 0.2; } }
@supports not (font-size: 1cqw) { .st-time { font-size: clamp(54px, 15vw, 76px); } .st-phase { font-size: 13px; } }
.st-cyc { display: flex; gap: 7px; justify-content: center; margin: 2.5cqw 0 0; min-height: 9px; }
.st-cyc i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); transition: background 0.4s, border-color 0.4s; }
.st-cyc i.ok { background: var(--pc); border-color: var(--pc); box-shadow: 0 0 10px var(--glow); }
.st-cyc i.now { border-color: var(--pc); }
.st-pomo.is-run .st-cyc i.now { animation: stBlink 1.6s ease-in-out infinite; }
@keyframes stBlink { 50% { opacity: 0.3; } }
.st-tom { margin: 1.5cqw 0 0; font-size: 14px; min-height: 1.4em; letter-spacing: 2px; }
.st-tom small { font-size: 11.5px; color: rgba(238, 241, 255, 0.55); font-weight: 700; letter-spacing: 0; }
/* のこり10秒 */
.st-pomo.is-end .st-ring-fg { animation: stBeat 1s ease-in-out infinite; }
.st-pomo.is-end .st-time { color: var(--pc); }
@keyframes stBeat { 50% { stroke-width: 17; } }
/* 集中モード（全画面） */
html.st-zen-on, html.st-zen-on body { overflow: hidden; }
.st-pomo.is-zen { position: fixed; inset: 0; z-index: 2147483000; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px 24px; overflow-y: auto; -webkit-backdrop-filter: none; backdrop-filter: none; background: radial-gradient(70vmax 60vmax at 50% 42%, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 1px, transparent 1.5px) 0 0 / 54px 54px, linear-gradient(180deg, #10142f 0%, #05060f 100%); }
.st-pomo.is-zen .st-hd { position: absolute; top: 14px; left: 16px; right: 16px; margin: 0; }
.st-pomo.is-zen .st-hd > div { opacity: 0.5; }
.st-pomo.is-zen .st-pre { display: none; }
.st-pomo.is-zen .st-ring { width: min(76vmin, 560px); }
.st-pomo.is-zen .st-break { width: min(420px, 100%); }
@media (max-height: 520px) { .st-pomo.is-zen .st-ring { width: min(62vmin, 560px); } .st-pomo.is-zen .st-say { display: none; } }
.sx-ctl { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 10px 0 0; }
.sx-go { width: 74px; height: 74px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #151a3a; background: linear-gradient(145deg, #fff, #dfe3ff); box-shadow: 0 10px 30px var(--glow), inset 0 -3px 0 rgba(0, 0, 0, 0.08); transition: transform 0.15s; }
.sx-go:hover { transform: scale(1.05); }
.sx-go:active { transform: scale(0.96); }
.sx-go svg { width: 30px; height: 30px; }
.sx-go .i-pause, .st-pomo.is-run .sx-go .i-play { display: none; }
.st-pomo.is-run .sx-go .i-pause { display: block; }
.sx-ib { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; }
.sx-ib:hover { background: rgba(255, 255, 255, 0.14); }
.sx-ib svg { width: 21px; height: 21px; }
.st-say { text-align: center; margin: 14px 0 0; font-family: var(--f-en); font-weight: 400; font-style: italic; color: rgba(238, 241, 255, 0.85); font-size: 15px; }
.st-break { margin-top: 14px; border: 1px solid rgba(94, 242, 194, 0.35); border-radius: 18px; background: rgba(94, 242, 194, 0.07); padding: 12px; text-align: center; }
.st-break-k { margin: 0 0 8px; font-weight: 900; font-size: 13px; }
.st-break-k span { font-family: var(--f-en); font-size: 10.5px; letter-spacing: 0.18em; color: #5ef2c2; margin-left: 4px; }
.st-word { display: flex; flex-direction: column; align-items: center; width: 100%; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.95); color: #151a3a; padding: 10px; }
.st-word-en { font-family: var(--f-en); font-weight: 700; font-size: 26px; line-height: 1.25; }
.st-word-ja { font-size: 13px; font-weight: 700; color: #667; }
.st-word.open .st-word-ja { color: #151a3a; font-size: 15px; font-weight: 900; }
.st-word-src { margin: 8px 0 0; font-size: 12px; color: rgba(238, 241, 255, 0.7); }
.st-word-src a { color: #9fe0ff; }
.sx-player { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.sx-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sx-poster { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: center / cover no-repeat; display: flex; align-items: flex-end; text-align: left; color: #fff; }
.sx-poster::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 15, 36, 0.1) 30%, rgba(12, 15, 36, 0.85)); }
.sx-pp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #151a3a; display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); transition: transform 0.15s; }
.sx-poster:hover .sx-pp { transform: translate(-50%, -50%) scale(1.08); }
.sx-pp svg { width: 28px; height: 28px; margin-left: 3px; }
.sx-pt { position: relative; padding: 12px 14px; display: flex; flex-direction: column; }
.sx-pt b { font-family: var(--f-en); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.sx-pt small { font-size: 12px; opacity: 0.8; }
.sx-auto { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 10px; font-size: 12.5px; color: rgba(238, 241, 255, 0.8); font-weight: 700; cursor: pointer; }
.sx-auto input { accent-color: #ff6b7d; width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.sx-tabs { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.sx-tabs button { flex: none; border: 1px solid rgba(255, 255, 255, 0.2); background: none; color: rgba(238, 241, 255, 0.8); border-radius: 999px; padding: 5px 14px; font-weight: 900; font-size: 13px; }
.sx-tabs button.on { background: #fff; color: #151a3a; border-color: #fff; }
.sx-st { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-st button { width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: #eef1ff; border-radius: 14px; padding: 6px; transition: background 0.2s, border-color 0.2s; }
.sx-st button:hover { background: rgba(255, 255, 255, 0.1); }
.sx-st button.now { border-color: #ff8a5b; background: rgba(255, 138, 91, 0.12); }
.sx-st img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; }
.sx-st span { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-st b { font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-st small { font-size: 11.5px; color: rgba(238, 241, 255, 0.6); }
.sx-live { align-self: flex-start; font-style: normal; font-family: var(--f-en); font-weight: 800; font-size: 9.5px; letter-spacing: 0.12em; background: #ff3d6e; color: #fff; border-radius: 4px; padding: 0 5px; }
.sx-src { margin: 12px 0 0; font-size: 11.5px; color: rgba(238, 241, 255, 0.55); }
.st-today { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.st-today > b { font-family: var(--f-en); font-weight: 300; font-size: 64px; line-height: 1; color: #fff; }
.st-today > small { font-weight: 900; font-size: 15px; color: rgba(238, 241, 255, 0.8); }
.st-today > span { margin-left: auto; font-size: 13px; font-weight: 900; color: rgba(238, 241, 255, 0.8); }
.st-today select { font: inherit; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; padding: 3px 6px; background: rgba(0, 0, 0, 0.3); color: #fff; }
.st-today option { color: #000; }
.st-goal { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: 12px 0 6px; }
.st-goal i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5ef2c2, #2bb3ff); box-shadow: 0 0 12px rgba(94, 242, 194, 0.6); transition: width 0.6s; }
.st-goal-t { margin: 0; font-size: 13px; font-weight: 900; color: #5ef2c2; }
.st-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 130px; margin: 16px 0 8px; align-items: end; }
.st-wk { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.st-wk i { display: block; width: 62%; background: rgba(255, 255, 255, 0.14); border-radius: 8px 8px 3px 3px; min-height: 3px; }
.st-wk.ok i { background: linear-gradient(180deg, #5ef2c2, #2bb3ff); box-shadow: 0 0 12px rgba(94, 242, 194, 0.45); }
.st-wk.now small { color: #ffb37a; }
.st-wk b { position: absolute; top: 0; font-family: var(--f-en); font-size: 11px; font-weight: 600; }
.st-wk small { font-size: 12px; font-weight: 900; margin-top: 4px; color: rgba(238, 241, 255, 0.6); }
.st-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: rgba(238, 241, 255, 0.75); }
.st-stats b { font-family: var(--f-en); font-size: 18px; font-weight: 600; color: #fff; }
.st-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; font-weight: 700; color: rgba(238, 241, 255, 0.6); }
.st-add button { border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 900; font-size: 12.5px; padding: 3px 11px; }
.st-br-in { display: grid; gap: 14px; }
@media (min-width: 600px) { .st-br-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; } }
.st-br-stage { display: grid; place-items: center; min-height: 250px; position: relative; }
.st-ball { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #b4e9ff 22%, #4dc3ff 55%, #6b5cff 100%); box-shadow: 0 0 40px rgba(77, 195, 255, 0.6), 0 0 90px rgba(107, 92, 255, 0.35); display: grid; place-items: center; transform: scale(1); transition: transform 1.2s ease-in-out; }
.st-ball.is-in { transform: scale(1.6); }
.st-ball.is-in2 { transform: scale(1.8); }
.st-ball.is-hold { transform: scale(1.75); }
.st-ball.is-out, .st-ball.is-hold2 { transform: scale(1); }
.st-cue { text-align: center; color: #151a3a; line-height: 1.2; }
.st-cue b { display: block; font-family: var(--f-en); font-size: 14px; font-weight: 700; }
.st-cue small { font-size: 10.5px; font-weight: 900; }
.st-left { position: absolute; bottom: 0; margin: 0; font-size: 12.5px; font-weight: 900; color: rgba(238, 241, 255, 0.7); }
.sx-pill { border: 0; border-radius: 999px; padding: 11px 34px; font-weight: 900; font-size: 15px; color: #151a3a; background: linear-gradient(145deg, #fff, #dfe3ff); box-shadow: 0 8px 24px rgba(77, 195, 255, 0.35); }
.st-note { margin: 12px 0 0; font-size: 11.5px; color: rgba(238, 241, 255, 0.6); }
.st-note a { color: #9fe0ff; }
.st-arts { margin: 26px 0 10px; }
.st-al { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.st-al a { display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.st-al img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-bottom: var(--bw) solid var(--ink); background: var(--sky-l); }
.st-al span { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.st-al time { font-size: 11.5px; font-weight: 700; color: var(--ink2); }
.st-al b { font-size: 14.5px; line-height: 1.45; }
.st-al small { font-family: var(--f-en); font-size: 12px; color: #5c940d; }
@media (max-width: 520px) { .sx-card { padding: 15px 13px; border-radius: 20px; } .sx-st button { grid-template-columns: 96px minmax(0, 1fr); } .sx-st img { width: 96px; } .sx-seg button b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .st-ball { transition-duration: 0.01s !important; } .st-pomo.is-run .st-aura, .st-pomo.is-run .st-orbit, .st-pomo.is-run .st-time i, .st-pomo .st-head-glow, .st-pomo.is-run .st-cyc i.now, .st-pomo.is-end .st-ring-fg { animation: none !important; } }

/* ---------- カラオケランキング（JOYSOUND 公式へのリンク）。色は黒・白・水色だけ ---------- */
.kara { margin: 18px 0 0; color: #fff; background: #111; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 16px; }
.wrap > .kara, .lh + .kara, .box + .kara { margin-bottom: 18px; }
.kara-h { margin-bottom: 12px; }
.kara-k { margin: 0; font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; color: var(--sky); }
.kara-h h2 { margin: 2px 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(19px, 3vw, 23px); line-height: 1.3; }
.kara-d { margin: 0; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.kara-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .kara-l { grid-template-columns: repeat(6, 1fr); } }
.kara-l a { display: flex; flex-direction: column; gap: 1px; height: 100%; text-decoration: none; color: var(--ink); background: #fff; border-radius: 12px; padding: 9px 11px; transition: transform 0.15s; }
.kara-l a:hover { transform: translateY(-2px); }
.kara-l li.big a { background: var(--sky); color: #fff; }
.kara-en { font-family: var(--f-en); font-weight: 800; font-size: 10.5px; letter-spacing: 0.16em; color: var(--sky-d); }
.kara-l li.big .kara-en { color: #fff; }
.kara-l b { font-size: 14.5px; line-height: 1.35; }
.kara-l small { font-size: 11px; line-height: 1.4; color: var(--ink2); }
.kara-l li.big small { color: rgba(255, 255, 255, 0.9); }
.kara-n { margin: 10px 0 0; font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }
.kara-c { margin: 22px 0; }
.kara-c .kara-l { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .kara-c .kara-l { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 下のタブ（スマホ）：アプリと同じ形。いつも同じ位置・同じ形（スクロールで出したり隠したりしない） ---------- */
.tabbar { display: none; }
@media (max-width: 759px) {
  .has-tb { --tb: calc(58px + env(safe-area-inset-bottom)); padding-bottom: var(--tb); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tb); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: var(--bw) solid var(--ink); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink2); text-decoration: none; font-size: 10.5px; font-weight: 900; }
  .tabbar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current='page'] { color: var(--sky-d); }
  .tabbar a[aria-current='page'] svg { stroke-width: 2.6; }
  .p-shorts .tabbar { background: #000; border-top-color: #333; }
  .p-shorts .tabbar a { color: #bbb; }
  .p-shorts .tabbar a[aria-current='page'] { color: #fff; }
  /* 下のタブとぶつからないように */
  .has-tb .totop { bottom: calc(var(--tb) + 12px); }
  .has-tb .totop.lift { bottom: calc(var(--tb) + 104px); }
  .has-tb .player.float { bottom: calc(var(--tb) + 8px); }
  .has-tb .toast { bottom: calc(var(--tb) + 16px); }
  .has-tb .sheet { bottom: var(--tb); }
  /* 見出しを短く：2段目（学ぶ・遊ぶ）と検索の帯は下のタブとメニューにまかせる */
  .gn-learn, .sch-mw { display: none !important; }
  .p-search .sch-mw { display: block !important; }
}
.toast { z-index: 400; }
.p-print .tabbar { display: none !important; }
@media print { .tabbar { display: none !important; } }
/* ---------- 先生・保護者の方へ：授業モードへの入口 ---------- */
.cr-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; margin: 4px 0 26px; padding: 20px 22px; background: var(--ink); color: #fff; text-decoration: none; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 5px 5px 0 var(--sky); transition: transform 0.15s, box-shadow 0.15s; }
.cr-entry:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sky); }
.cr-entry-k { grid-column: 1; font-family: var(--f-en); font-weight: 800; font-size: 11.5px; letter-spacing: 0.16em; color: var(--sky); }
.cr-entry-t { grid-column: 1; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 4vw, 34px); line-height: 1.2; display: flex; flex-direction: column; }
.cr-entry-t small { font-family: var(--f-ja); font-weight: 900; font-size: 14px; color: #9fe0ff; margin-top: 4px; }
.cr-entry-l { grid-column: 1; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.cr-entry-q { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cr-entry-q i { width: 46px; height: 46px; border-radius: 10px; background: var(--c); border: 2px solid #fff; display: grid; place-items: center; font-style: normal; font-size: 20px; color: #fff; }
.cr-entry-b { grid-column: 1 / -1; justify-self: start; margin-top: 8px; box-shadow: 3px 3px 0 #fff; border-color: #fff; }
@media (max-width: 559px) { .cr-entry { padding: 16px; } .cr-entry-q { display: none; } .cr-entry-b { justify-self: stretch; } }