:root {
  --studio: #16203A;        /* オンエア中のスタジオ（暗部セクション） */
  --studio-deep: #101830;
  --daylight: #FFFBF2;      /* 日中のまち（明部セクション） */
  --ink: #1F2433;
  --ink-sub: #6E7686;
  --paper-line: #EBE3D2;
  --onair: #FF4B5C;         /* ON AIR ランプ */
  --c-moriya: #2FA36B;
  --c-mirai: #F59E2D;
  --c-tsukuba: #3D7BFF;
  --c-kinko: #8892A6;
  --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  background: var(--daylight);
  color: var(--ink);
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--c-tsukuba); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.rounded { font-family: "M PLUS Rounded 1c", sans-serif; }

/* ========== ① ロゴ + ② 駅セレクタ（スタジオヘッダー） ========== */
.studio-head {
  position: sticky;
  top: 0;
  z-index: 200;
  background:
    radial-gradient(ellipse 90% 70% at 80% -10%, rgba(61,123,255,0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 110%, rgba(255,75,92,0.12), transparent 60%),
    var(--studio);
  color: #fff;
  padding: 14px 0 14px;   /* 駅セレクタを記事側へ移したので、ロゴ帯だけの高さに詰める */
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.onair-lamp { flex-shrink: 0; }
.brand { display: flex; flex-direction: column; gap: 2px; }
/* ロゴは画像（透過WebP）。高さを基準に、幅は元画像の比率で自動 */
.logo {
  display: block;
  line-height: 0;
}
.logo a {
  display: block;
  cursor: pointer;
}
.logo img {
  height: clamp(1.9rem, 4.8vw, 2.6rem);
  width: auto;
  display: block;
}

/* 全角「＋」グリフはベースライン基準で下寄りに見えるため::beforeで描画し光学補正 */
.tagline {
  font-size: 0.8rem;
  color: #A9B5CC;
  letter-spacing: 0.08em;
}
@media (max-width: 640px) {
  .tagline { font-size: 0.64rem; letter-spacing: 0.04em; white-space: nowrap; }
}
/* タグラインが長いため、画面が狭くなるほど段階的に詰める。
   4コマボタンと同じ行に並ぶので、はみ出すと横スクロールが出てしまう。 */
@media (max-width: 400px) {
  .tagline { font-size: 0.52rem; letter-spacing: 0; }
}
/* 320px級の旧機種だけは1行に収まらないので、ここだけ折り返しを許可する */
@media (max-width: 340px) {
  .brand { flex: 1 1 auto; min-width: 0; }
  .tagline { white-space: normal; line-height: 1.5; }
}
.onair-lamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,75,92,0.55);
  background: rgba(255,75,92,0.1);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: #FF8B96;
}
.onair-lamp .bulb {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--onair);
  box-shadow: 0 0 10px var(--onair);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; box-shadow: none; } }

/* 駅セレクタ（v27でヘッダー内の暗い背景から、記事セクションの明るい背景へ移設）
   路線図の見立ては維持しつつ、白地で沈まないよう線と丸の色を作り直している */
/* overflow-x を使うと丸の外周（box-shadow）が上下で切れるため、
   はみ出しは overflow:visible のまま、内側の余白で逃がす */
.rail-nav {
  padding: 8px 0 30px;          /* 下30px＝ジャンルタブとの間隔 */
  padding-left: 126px;          /* 見出しキャラの右隣から路線を始める */
  overflow: visible;
}
.rail { position: relative; display: flex; justify-content: space-between; min-width: 0; }
.rail::before {
  content: "";
  position: absolute;
  left: 30px; right: 30px; top: 4.5px;   /* 丸(14px)の中心=7px に線の中心を合わせる */
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #C3CBDA, var(--c-tsukuba) 25%, var(--c-moriya) 50%, var(--c-mirai) 75%, var(--c-kinko) 100%);
  opacity: 0.9;
  z-index: 0;
}
.station {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0 10px;
  color: var(--ink-sub);
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.2s;
}
.station .dot {
  position: relative; z-index: 1;   /* 横線より手前。線が丸の内側に透けない */
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #FDF8EE;              /* 中は紙色。横線が透けない */
  border: 3px solid #8E9AB2;        /* 外側の円。背景に溶けない濃さ */
  transition: all 0.2s;
}
.station:hover { color: var(--ink); }
.station[aria-pressed="true"] { color: var(--ink); font-weight: 800; }
.station[aria-pressed="true"] .dot {
  background: var(--stn, var(--ink));
  border-color: var(--stn, var(--ink));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stn, #1F2433) 26%, transparent);
}

/* ========== ジャンル絞り込み（記事セクション内に配置） ========== */
.genre-row {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  margin: -4px 0 30px;
}
.genre-row::-webkit-scrollbar { display: none; }
.genre-label {
  flex-shrink: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700; font-size: 0.72rem;
  color: var(--ink-sub); letter-spacing: 0.08em;
}
.chip {
  flex-shrink: 0;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid #DFD6C2;
  background: #fff;
  color: var(--ink-sub);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--studio); color: var(--studio); }
.chip[aria-pressed="true"] { background: var(--studio); border-color: var(--studio); color: #fff; }

/* ========== まちの新着ニュース：日替わりリポーター ========== */
.news-head { position: relative; }
/* 見出しはキャラの幅だけ右に逃がす。チップ行は全幅のまま、キャラの前面に重ねる */
.news-head .sec-head { margin-bottom: 14px; }   /* 見出しは気象台と同じ左端。キャラは背面に重ねる */
.news-head .genre-row { margin-bottom: 0; position: relative; z-index: 1; }
.news-head { margin-bottom: 16px; }   /* ジャンルタブと先頭記事の間隔 */
.news-caster {
  position: absolute;
  left: 0;
  bottom: -2px;   /* 足元がジャンルタブ行の下端に揃う */
  width: 124px;
  z-index: 0;              /* 見出し・タブより背面 */
  line-height: 0;
  pointer-events: none;
  animation: casterIn 0.5s ease-out both;
}
.news-caster img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(22,32,58,0.12));
}
@keyframes casterIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ========== 今週のオンエア：日替わり制作班スタッフ ========== */
.onair-head { position: relative; display: inline-block; }
.onair-caster {
  position: absolute;
  left: calc(100% - 11px);   /* 見出しの「ア」に少し重ねる */
  bottom: -24px;             /* サムネイル上端に4px潜り込ませて隙間をなくす */
  width: 96px;
  height: 85px;              /* ← ここで下部をトリミング */
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  animation: casterIn 0.5s ease-out both;
}
.onair-caster img { width: 100%; height: auto; display: block; }

/* ========== セクション共通 ========== */
section { padding: 26px 0 40px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.sec-title {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
}
/* 見出し右の「M月D日H時更新」。控えめな小さめ表示 */
.news-updated {
  margin-left: 10px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 0.62em;
  font-weight: 700;
  color: var(--muted, #8892a6);
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
@media (max-width: 640px) {
  /* スマホでもPCと同じく見出しの右隣に置く（入りきらないときだけ折り返す） */
  .news-updated { margin-left: 8px; font-size: 0.6rem; }
}

.sec-note { font-size: 0.74rem; color: var(--ink-sub); }
.dark { background: var(--studio); color: #fff; }
.dark.deep { background: var(--studio-deep); }
.dark .sec-note { color: #8B98B4; }
.eyebrow {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--onair);
  display: block;
  margin-bottom: 2px;
}

/* ========== ★ もりつく気象台（お天気コーナー番組） ========== */
/* 気象台は見出しを出さず、天気カードから直接始める。
   カード内にキャスター名が出るため、見出しが無くても何のコーナーかは伝わる */
#sec-weather .sec-head,
#sec-weather .sec-title { display: none; }

.weather-sec { padding: 34px 0 38px; background: #fff; border-bottom: 1px solid var(--paper-line); }
.wx-stage {
  position: relative;
  display: flex; align-items: flex-end; gap: 20px;
  border-radius: 22px;
  padding: 20px 24px 20px 18px;
  border: 1.5px solid rgba(31,36,51,0.08);
}
.wx-stage.sky-sun { background: linear-gradient(135deg, #D9F0FF 0%, #F4FBFF 55%, #FFF6DE 100%); }
.wx-stage.sky-cloud { background: linear-gradient(135deg, #DDE8F2 0%, #EEF3F8 60%, #F7F9FB 100%); }
.wx-stage.sky-rain { background: linear-gradient(135deg, #CBD8E6 0%, #E3EAF2 60%, #EFF3F8 100%); }
.wx-caster {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: -34px;
}
.wx-caster img { height: 148px; width: auto; filter: drop-shadow(0 8px 16px rgba(31,36,51,0.18)); }
.wx-caster-tag {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em;
  color: #fff; background: var(--cc, var(--onair));
  padding: 5px 16px; border-radius: 999px;
  /* 名前が極端に長い場合だけ折り返す。左の欄が広がりすぎて
     降水確率の枠を押し出すのを防ぐための保険 */
  max-width: 300px; white-space: normal; text-align: center; line-height: 1.35;
}
.wx-main { flex: 1; min-width: 0; }
/* PC：今日の天気を大きく表示し、縦方向はセンター寄せで余白を分散 */
@media (min-width: 641px) {
  /* キャラと吹き出しの高さを揃える。キャラを上端に置き、
     吹き出しもカードの先頭から始めることで「顔の横で話している」形にする */
  .wx-stage { align-items: flex-start; }
  .wx-caster { margin-top: 0; align-self: flex-start; }
  .wx-caster img { height: 182px; }
  .wx-main { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; }
  .wx-bubble { font-size: 0.9rem; padding: 12px 18px; }
  .wx-icon { font-size: 3.4rem; }
  .wx-temp { font-size: 2.3rem; }
  .wx-cond { font-size: 0.82rem; }
  .h-slot .h-icon { font-size: 1.35rem; }
}
.wx-bubble {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 13px 20px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700; font-size: 1.02rem;
  box-shadow: 0 4px 14px rgba(31,36,51,0.08);
  margin-bottom: 14px;
  width: fit-content;
  max-width: 460px;      /* コメントが3文になったので、横に伸びすぎず折り返すように */
  line-height: 1.55;
}
.wx-bubble::before {
  content: "";
  position: absolute; left: -9px; bottom: 14px;
  border-style: solid; border-width: 7px 12px 7px 0;
  border-color: transparent #fff transparent transparent;
}
/* 画面が狭くても縦に折り返さない。あふれる場合は降水確率の枠だけ横に流す
   （折り返すとカードが一気に40px以上伸びてしまうため） */
.wx-now { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.wx-icon { font-size: 2.8rem; line-height: 1; }
.wx-city { font-size: 0.76rem; color: var(--ink-sub); font-weight: 700; margin-bottom: 4px; }
.wx-temp { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; font-size: 1.9rem; line-height: 1.2; white-space: nowrap; }
.wx-temp .low { color: var(--ink-sub); font-size: 1.1rem; font-weight: 500; margin-left: 4px; }
.wx-cond { font-size: 0.78rem; color: var(--ink-sub); }
.wx-hourly {
  display: flex; gap: 8px; flex-wrap: nowrap;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.wx-hourly::-webkit-scrollbar { display: none; }
/* 「％＝降水確率」は気温ブロックの下端に添える。
   降水確率の枠と同じ行に収まるので、カードの高さは増えない */
.wx-temp-block { display: flex; flex-direction: column; }
.wx-hourly-note {
  margin-top: 6px;
  font-size: 0.6rem; color: var(--ink-sub); white-space: nowrap;
}
.h-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 58px; padding: 8px 5px;
  background: rgba(255,255,255,0.75);
  border-radius: 14px;
}
.h-slot .h-time { font-size: 0.72rem; color: var(--ink-sub); font-weight: 700; white-space: nowrap; }
.h-day { display: block; font-size: 0.78em; opacity: 0.8; font-weight: 700; }
.h-slot .h-icon { font-size: 1.2rem; }
.h-slot .h-temp { font-size: 0.78rem; font-weight: 700; }
.wx-week { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 14px; }
.wx-week::-webkit-scrollbar { display: none; }
/* PC：週間予報はカード右側のパネルに格納（左側と高さが揃うようコンパクトに） */
.wx-week-side {
  flex-shrink: 0;
  width: 268px;
  align-self: flex-end;
  background: rgba(255,255,255,0.75);
  border-radius: 16px;
  padding: 10px 16px 12px;
  display: flex; flex-direction: column; gap: 0;
}
.ws-title {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700; font-size: 0.86rem;
  color: var(--ink-sub); letter-spacing: 0.08em;
  padding-bottom: 3px;
}
.ws-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.95rem; font-weight: 700;
  padding: 0 8px; border-radius: 9px;
  line-height: 1.3; min-height: 31px;
}
.ws-row.today { background: color-mix(in srgb, var(--cc, var(--onair)) 12%, #fff); }
.ws-row .ws-d { width: 3.1em; white-space: nowrap; color: var(--ink-sub); font-weight: 700; font-size: 0.88rem; }
.ws-row .ws-i { font-size: 1.3rem; }
/* 気温と降水確率は1行に横並び。気温を左、降水確率を右端に置く */
.ws-row .ws-t {
  margin-left: auto;
  display: flex; align-items: baseline; gap: 6px;
}
.ws-row .ws-t .lo { color: var(--ink-sub); font-weight: 500; }
.ws-row .ws-pop {
  width: 2.5em; text-align: right;
  font-size: 0.9em; font-weight: 700;
  color: var(--c-tsukuba); opacity: 0.85;
}
/* 幅の狭いPC・タブレット横向き：週間予報とキャラを少し細くして、
   吹き出しや気温が押し潰されないようにする（このブロックは基本指定より後に置くこと） */
/* 広い画面での気象台。基本指定より後に置かないと効かないので、必ずこの位置に置くこと。
   降水確率の4枠は固定幅にせず、残った幅を分け合う形にしている。
   キャスター名の長さ（「白鷺ノン つくばみらい担当リポーター」は長い）や
   端末のフォントによって左側の幅が変わっても、枠が切れないようにするため。 */
@media (min-width: 1091px) {
  .wx-now { gap: 14px; }
  .wx-hourly { gap: 8px; min-width: 0; flex: 1 1 auto; }
  .h-slot { flex: 1 1 0; min-width: 46px; max-width: 92px; }
}

@media (min-width: 641px) and (max-width: 1090px) {
  .wx-week-side { width: 214px; padding: 8px 12px 10px; }
  .ws-row { font-size: 0.84rem; min-height: 28px; gap: 7px; }
  .ws-row .ws-d { font-size: 0.8rem; }
  .ws-row .ws-i { font-size: 1.12rem; }
  /* 降水確率の枠は固定幅をやめ、残った幅を4つで分け合う（切れずに全部見える） */
  .wx-now { gap: 12px; }
  .wx-icon { font-size: 2.3rem; }
  .wx-temp { font-size: 1.7rem; }
  .wx-hourly { overflow-x: auto; gap: 6px; width: 100%; }
  .h-slot { flex: 1 1 0; min-width: 44px; padding: 8px 3px; }
  .h-slot .h-time { font-size: 0.62rem; }
  .h-slot .h-icon { font-size: 1.15rem; }
  .h-slot .h-temp { font-size: 0.72rem; }
  .wx-caster img { height: 152px; }
  .wx-caster-tag { font-size: 0.68rem; padding: 4px 12px; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .wx-caster img { height: 136px; }
  .wx-caster-tag { font-size: 0.64rem; padding: 4px 11px; }
  .wx-week-side { width: 190px; }
  .ws-row { font-size: 0.78rem; min-height: 26px; }
}

@media (max-width: 640px) { .wx-week-side { display: none; } }
.w-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 68px; padding: 12px 6px;
  line-height: 1.4;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--paper-line);
}
.w-day.today {
  border-color: var(--cc, var(--onair));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, var(--onair)) 16%, transparent);
}
.w-day .d-label { font-size: 0.66rem; color: var(--ink-sub); font-weight: 700; }
.w-day .d-icon { font-size: 1.2rem; }
.w-day .d-temp { font-size: 0.72rem; font-weight: 700; }
.w-day .d-temp .lo { color: var(--ink-sub); font-weight: 500; }
.w-day .d-pop { font-size: 0.6rem; font-weight: 700; color: var(--c-tsukuba); opacity: 0.85; }
.weather-note { font-size: 0.68rem; color: var(--ink-sub); margin-top: 12px; }
.wx-week-toggle { display: none; }
.wx-foot { display: contents; }
.wx-note-inline { display: none; }
@media (max-width: 640px) {
  /* 1段目:名前タグ／2段目:吹き出し／キャラは左で2段ぶち抜き／3段目:今日の天気＋時間帯予報 */
  .wx-stage {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 6px 10px;
    padding: 12px;
  }
  .wx-caster { display: contents; }
  /* レイアウト上の占有幅は元の84pxに戻す（吹き出しの横幅を元に戻すため）。
     見た目だけ拡大して上の余白を埋める。transformは場所取りに影響しない */
  .wx-caster img {
    grid-column: 1; grid-row: 1 / 3; height: 84px; width: auto; align-self: end;
    transform: scale(1.2); transform-origin: bottom center;
  }
  .wx-caster-tag { grid-column: 2; grid-row: 1; justify-self: start; font-size: 0.56rem; padding: 3px 10px; }
  .wx-main { display: contents; }
  .wx-bubble {
    grid-row: 2; grid-column: 2;
    align-self: start;
    margin: 0;
    font-size: 0.75rem; padding: 8px 12px;
    line-height: 1.5; max-width: none;
  }
  .wx-city { grid-row: 3; grid-column: 1 / -1; margin-bottom: 0; }
  .wx-now {
    grid-row: 4; grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  }
  .wx-icon { font-size: 1.9rem; }
  .wx-temp { font-size: 1.5rem; }
  /* 降水確率は気温の右隣。3枠が収まるよう、見出しは2行に折り返して幅を節約する */
  .wx-hourly {
    flex: 1; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    gap: 4px;
  }
  .wx-hourly::-webkit-scrollbar { display: none; }
  .h-slot { flex: 0 0 auto; min-width: 48px; padding: 5px 3px; gap: 0; }
  .wx-hourly-note { font-size: 0.52rem; margin-top: 4px; }
  .h-slot .h-time {
    font-size: 0.6rem; line-height: 1.25;
    white-space: normal; text-align: center;
  }
  .h-slot .h-icon { font-size: 0.95rem; }
  .h-slot .h-temp { font-size: 0.66rem; }
  /* 週間予報はタップで開閉（コンパクト化のため既定は非表示） */
  .wx-week { display: none; }
  .wx-week.open { display: flex; margin-top: 10px; }
  .wx-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .wx-note-inline { display: inline; font-size: 0.6rem; color: var(--ink-sub); }
  .wx-week-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--paper-line);
    background: #fff;
    color: var(--ink-sub);
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700; font-size: 0.74rem;
  }
  .wx-week-toggle::after { content: "▼"; font-size: 0.6rem; }
  .wx-week-toggle.open::after { content: "▲"; }
  .weather-note { display: none; }
}

/* ========== ④ 番組（縦動画・番組ごとに横スクロール） ========== */
.show-row + .show-row { margin-top: 36px; }
.show-row .sec-head { margin-bottom: 18px; }
.show-row .sec-title { position: relative; padding-left: 15px; }
/* 見出しの左に番組カラーの帯。色は videos.json の accent から */
.show-row .sec-title::before {
  content: "";
  position: absolute; left: 0; top: 0.16em; bottom: 0.16em;
  width: 5px; border-radius: 3px;
  background: var(--accent, #3D7BFF);
}
.show-empty { color: #8B98B4; font-size: 0.85rem; padding: 22px 0 8px; }

.short-shelf {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 4px 22px 14px 2px;
  margin-right: -22px;              /* 右端を画面の端まで流し切る（まだ先がある感） */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.short-shelf::-webkit-scrollbar { height: 8px; }
.short-shelf::-webkit-scrollbar-thumb { background: #3A4763; border-radius: 4px; }
.short-shelf .item { flex: 0 0 168px; scroll-snap-align: start; }
.short-shelf .screen { aspect-ratio: 9 / 16; }   /* ← 縦動画。共通の16:9を上書き */
.short-shelf .screen .play { width: 46px; height: 46px; }
.short-shelf .screen .play::after { border-width: 8px 0 8px 14px; margin-left: 3px; }
.short-shelf .v-caption { margin-top: 8px; }
.short-shelf .v-caption .t { font-size: 0.84rem; line-height: 1.45; }

.screen {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  display: block;
  transition: transform 0.18s;
}
.screen:hover { transform: translateY(-3px); }
.screen svg { width: 100%; height: 100%; display: block; }
.screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screen .play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: grid; place-items: center;
  transition: transform 0.18s;
}
.screen .play::after {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--studio);
  margin-left: 4px;
}
.screen:hover .play { transform: scale(1.08); }
.screen .dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
}
.v-caption { margin-top: 10px; }
.v-caption .t { font-weight: 700; font-size: 0.95rem; line-height: 1.5; }
.v-caption .m { font-size: 0.72rem; color: #8B98B4; margin-top: 2px; }

/* ========== ⑥ 記事カード ========== */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 16px 16px 14px 20px;
  display: flex; flex-direction: row; gap: 14px; align-items: stretch;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.card .meta { margin-top: auto; }
.thumb {
  flex-shrink: 0; align-self: center;
  width: 84px; height: 84px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 2rem;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* サムネイル画像が無いとき：グラデーションの中央に局ロゴ（切り抜かず全体を見せる） */
.thumb-logo img {
  width: auto; height: auto;
  max-width: 68%; max-height: 42%;
  object-fit: contain;
  opacity: 0.92;
}
/* 先頭記事のフィーチャー型：サムネイル大・上部配置 */
.card.featured { flex-direction: column; grid-column: 1 / -1; padding: 14px 14px 15px; gap: 12px; }
.card.featured .thumb-lg {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  align-self: stretch;
  font-size: 3.6rem;
}
.card.featured .card-main { padding: 0 6px 0 8px; }
.card.featured .title { font-size: 1.08rem; line-height: 1.45; }
/* PC：フィーチャー型は横並び（16:9サムネ左＋テキスト右） */
@media (min-width: 641px) {
  .card.featured { flex-direction: row; align-items: flex-start; gap: 20px; }
  .card.featured .thumb-lg { width: 46%; align-self: flex-start; }
  /* テキストは上詰め。見出しが枠の一番上に来るようにする */
  .card.featured .card-main { padding: 2px 10px 6px 0; justify-content: flex-start; }
  .card.featured .title { flex-grow: 0; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .thumb { width: 76px; height: 76px; font-size: 1.7rem; }
  /* スマホ：先頭記事は見出しを先に見せる（サムネイルは下に回す） */
  .card.featured { flex-direction: column; }
  .card.featured .card-main { order: 1; }
  .card.featured .thumb-lg { order: 2; width: 100%; height: auto; max-height: 220px; font-size: 3rem; }
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31,36,51,0.09); }
.badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cat {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 999px; color: #fff;
}
.cat.news { background: #4A5A7A; }
.cat.event { background: #8B5CD6; }
.cat.gourmet { background: #E8603C; }
.cat.kids { background: #E85D9C; }
.cat.ibaraki { background: #0E9AA7; }   /* 県内全域＝3市の外側。他ジャンルと混ざらない青緑 */
.city-badge {
  font-size: 0.66rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; border: 1.5px solid;
}
.city-badge.moriya { color: var(--c-moriya); border-color: var(--c-moriya); }
.city-badge.tsukubamirai { color: #C97D14; border-color: var(--c-mirai); }
.city-badge.tsukuba { color: var(--c-tsukuba); border-color: var(--c-tsukuba); }
.city-badge.kinko { color: var(--c-kinko); border-color: var(--c-kinko); }
.card .title { font-weight: 700; font-size: 0.95rem; line-height: 1.4; flex-grow: 1; }
.card .meta { display: flex; gap: 8px; font-size: 0.7rem; color: var(--ink-sub); }
.card .meta .src { font-weight: 700; }
.card .meta .arrow { margin-left: auto; color: var(--c-tsukuba); font-weight: 700; }
.empty { text-align: center; color: var(--ink-sub); padding: 40px 0; font-size: 0.88rem; }

/* ========== ⑧ スタッフのお仕事 ========== */
.staff-sec { background: #FFF3DC; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.staff-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #F1E2C2;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.staff-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(120,90,20,0.14); }
.avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: grid; place-items: center;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.staff-card .body { padding: 16px 18px 20px; }
.staff-card .role {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em;
  color: #B78219;
}
.staff-card .name { font-weight: 700; font-size: 0.95rem; }
.staff-card .blog { font-size: 0.78rem; color: var(--ink-sub); margin-top: 4px; line-height: 1.6; }
.staff-note {
  margin-top: 18px;
  font-size: 0.74rem;
  color: #A08248;
  text-align: center;
}

/* ========== フッター ========== */
footer {
  background: var(--studio-deep);
  color: #7B88A6;
  padding: 34px 0;
  font-size: 0.72rem;
  line-height: 2;
}
footer .f-logo {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900; font-size: 1rem; color: #fff;
}
footer .links { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0; }
footer .links a:hover { color: #fff; }
footer .disc { color: #566280; }

@media (max-width: 760px) {
  section { padding: 20px 0 32px; }
}
@media (max-width: 640px) {
  section { padding: 14px 0 24px; }
  .sec-head { margin-bottom: 12px; }
  .weather-sec { padding: 12px 0 16px; }
  /* 6ジャンルを1行・1画面幅に収める（均等割り） */
  /* ジャンル7種は1画面に詰め込まず、横スライド式にして文字を読める大きさに保つ */
  .genre-row {
    margin: -4px 0 12px; gap: 5px; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-right: 22px;              /* 右端の「まだ先がある」余白 */
    margin-right: -22px;              /* 画面端まで流し切る */
  }
  .chip {
    flex: 0 0 auto;                   /* 幅を縮めず、文字なりの大きさを保つ */
    padding: 7px 10px;
    font-size: 0.73rem;
    letter-spacing: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  /* スマホ：キャラは小さめ。チップ行は全幅のまま（背面にキャラが重なる） */
  /* キャラは見出しの左に置き、タブ行とは重ねない（先頭タブが切れないため） */
  .news-caster { width: 78px; bottom: 22px; left: -8px; }
  /* スマホは見出し下マージンが12pxなので、トリミング位置もそれに合わせる */
  .onair-caster { width: 76px; height: 69px; bottom: -16px; left: calc(100% - 9px); }
  /* スマホの縦動画カード：390px幅で2.3枚見える大きさ */
  .show-row + .show-row { margin-top: 26px; }
  .show-row .sec-head { margin-bottom: 14px; }
  .short-shelf { gap: 10px; }
  .short-shelf .item { flex: 0 0 148px; }
  .short-shelf .screen .play { width: 40px; height: 40px; }
  .short-shelf .screen .play::after { border-width: 7px 0 7px 12px; }
  .news-head .sec-head { margin-bottom: 8px; }
  /* 駅セレクタを横スクロールなしで1画面に収める */
  .rail-nav { padding: 6px 0 20px; padding-left: 76px; }
  .station { padding: 0 2px; font-size: 0.66rem; gap: 5px; }
  .station .dot { width: 12px; height: 12px; border-width: 2.5px; }
  .rail::before { left: 16px; right: 16px; top: 3.5px; height: 4px; }  /* 丸(12px)の中心=6px */
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ========== イベントカレンダーへの入口（記事一覧の先頭・index.html） ==========
   ジャンル「イベント」を選んだときだけ表示される帯。押すと events.html へ移動する。
   上辺の3色グラデーションは駅セレクタと同じ「守谷→つくばみらい→つくば」の並び。 */
.cal-banner {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 15px;
  padding: 10px 18px 10px 16px;
  background: linear-gradient(180deg, #FFFFFF, #FFFCF5);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
/* hidden 属性を確実に効かせる（display:flex に負けないよう明示する） */
.cal-banner[hidden] { display: none; }
.cal-banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-moriya), var(--c-mirai), var(--c-tsukuba));
}
.cal-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31,36,51,0.09); }
.cal-icon { flex: 0 0 auto; width: auto; height: 34px; }
.cal-title {
  flex: 1 1 0; min-width: 0;
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900;
  font-size: 1.02rem; letter-spacing: 0.05em; color: var(--ink);
}
.cal-arrow { flex: 0 0 auto; color: var(--c-tsukuba); font-weight: 700; font-size: 0.95rem; }
@media (max-width: 640px) {
  .cal-banner { gap: 10px; padding: 9px 14px 9px 12px; }
  .cal-icon { height: 29px; }
  .cal-title { font-size: 0.94rem; }
}

/* ========== ヘッダーの「今週の4コマ」ボタン（v48／ON AIRランプと差し替え） ==========
   ※ 上の .onair-lamp / .bulb / @keyframes blink は使われなくなりましたが、
      他への影響を避けるためそのまま残してあります。 */
.manga-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,75,92,0.55);
  background: rgba(255,75,92,0.10);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: #FFC9CE;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.manga-btn:hover { background: rgba(255,75,92,0.22); }
/* 2×2の小さな四角＝「コマ」のアイコン */
.manga-ico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2.5px;
  width: 19px; height: 19px;
  flex-shrink: 0;
}
.manga-ico i { display: block; border-radius: 2px; background: #FF8B96; }
@media (max-width: 640px) {
  .manga-btn { padding: 6px 11px; font-size: 0.7rem; letter-spacing: 0.02em; gap: 6px; }
  .manga-ico { width: 17px; height: 17px; gap: 2px; }
}