/* b2「問題集らしく」— 白と細い罫。今日の問題を紙のプリントのように見せる。保護者・大人にも */
:root{--acc:#1f2637;--tint:#fbf8f2;--r:12px}
body{font-family:"Noto Sans CJK JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-weight:400;line-height:1.9}
h1,h2,h3,.ptitle,.btn,.chip,.mail,.kicker,.brandline,.tlist b,.vwho b{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif}
.top{background:#fff}
.hero{background:var(--tint);border-bottom:1px solid var(--line);padding:26px 0 40px}
.hero-in{display:grid;gap:26px}
.brandline{margin:0 0 18px;font-size:13px;letter-spacing:.12em;color:var(--sub);font-weight:700}
.kicker{margin:0 0 2px;font-weight:900;font-size:14px;color:#8a5a00;letter-spacing:.08em}
.week-card h1{font-size:clamp(24px,6.6vw,36px)}
.week-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px;display:grid;gap:14px;margin:6px 0 18px;
  background-image:linear-gradient(#fff 0 0);box-shadow:0 1px 0 var(--line),0 12px 28px rgba(31,38,55,.06)}
.week-fig{border:0;padding:0}
.hero-in.novid .week-fig{max-height:300px;width:auto;margin:0 auto}   /* 動画がまだ無い今日の問題 (YouTube 公開前) は図が大きくなりすぎないように */
.week-q p{margin:0 0 6px}
.btn{border-radius:10px;font-weight:700}
.btn-line{border-width:1px}
.who3{display:flex;align-items:center;gap:6px;margin:16px 0 0;font-size:14px;color:var(--sub)}
.who3 span{margin-left:6px}
.hero-video{margin:0;justify-self:center}
.phone{width:min(230px,62vw);margin:0 auto;border:8px solid var(--ink);border-radius:30px;overflow:hidden;background:var(--ink)}
.phone .vid{border-radius:0}
.hero-video figcaption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--sub)}
@media (min-width:860px){
  .hero{padding:48px 0 64px}
  .hero-in{grid-template-columns:1fr auto;align-items:start;gap:56px}
  .hero-in.novid{grid-template-columns:1fr}   /* 動画が無い日は動画の列と間を取らず、カードを中身の幅いっぱいに */
  .week-card{grid-template-columns:1.1fr 1fr;align-items:center;padding:22px}
  .phone{width:270px}
}
.sec h2{border-bottom:1px solid var(--ink);padding-bottom:8px}
.sec-row{border-bottom:1px solid var(--ink);margin-bottom:12px}.sec-row h2{border:0;padding:0}
.pcard a{border-radius:8px}
.chip{border-width:1px;font-weight:500}
.tlist li,.appnote,.ans,.pager a{border-radius:8px}
.problem{border-radius:8px;border:1px solid var(--line)}
.vid{border-radius:10px}
.sns a{border-width:1px;border-radius:8px}
/* 黄色は要所だけ (今日の問題・主な操作・選んでいる状態) */
.week-card{border-top:6px solid var(--yellow)}
.kicker{display:inline-block;background:var(--yellow);color:var(--ink);border-radius:4px;padding:0 8px;letter-spacing:.04em}
.btn-main{background:var(--yellow);color:var(--ink)}
.btn-main:hover{background:#e7a322}
.tag-unit{background:#fff3d3}
.filter input:checked+span{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
/* パソコン: 中身の幅は 1120px まで・左右の余白は最小 32px (2026-09-27)。
   経緯: オーナーの「左右の余白がなくて見にくい」でいったん 1040px + 余白 8vw にしたが、ブラウザを拡大して見ていたのが原因だった。
   100% の 1280〜1920 と拡大 125% (1024 相当) で (a) 1040+8vw (b) 調整前 1100・20px (c) この形 を撮り比べて決めた
   (out/2026-09-27-hp-margins/)。100% では左右 80px 以上空き、拡大しても 32px 以上残る。問題カードは 1 枚 240px 以上 (1120 で4列・1024 で3列) */
@media (min-width:860px){
  .wrap{max-width:1120px;padding:0 max(32px,3vw);box-sizing:content-box}
  .tagline{max-width:none}
  .vrow{grid-template-columns:repeat(auto-fill,minmax(240px,280px));gap:24px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}