/* ページ遷移時にクロスフェード（Chrome/Edge/Safari TP） */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.18s;
}

:root{
  --fg:#1a1a1a; --fg2:#555; --fg3:#888;
  --bg:#fafafa; --paper:#fff; --line:#e5e5e5;
  --link:#0066cc; --vlink:#5b3ea0;

  /* 地域カラー（はてブ風カテゴリ色） */
  --c-national:#7c3aed;    --c-national-bg:#faf6ff;   --c-national-bg2:#ede4ff;
  --c-hokkaido:#2563eb;    --c-hokkaido-bg:#f1f5fe;   --c-hokkaido-bg2:#dde7fc;
  --c-doto:#059669;        --c-doto-bg:#f0faf4;       --c-doto-bg2:#d6efe1;
  --c-nemuro:#ea580c;      --c-nemuro-bg:#fff7ef;     --c-nemuro-bg2:#ffe4cc;
  /* 7 地方ブロック (全国版で追加) */
  --c-tohoku:#db2777;      --c-tohoku-bg:#fdf2f8;     --c-tohoku-bg2:#fbcfe8;
  --c-kanto:#0d9488;       --c-kanto-bg:#f0fdfa;      --c-kanto-bg2:#ccfbf1;
  --c-chubu:#d97706;       --c-chubu-bg:#fffbeb;      --c-chubu-bg2:#fde68a;
  --c-kinki:#a21caf;       --c-kinki-bg:#fdf4ff;      --c-kinki-bg2:#f5d0fe;
  --c-chugoku:#475569;     --c-chugoku-bg:#f8fafc;    --c-chugoku-bg2:#e2e8f0;
  --c-shikoku:#65a30d;     --c-shikoku-bg:#f7fee7;    --c-shikoku-bg2:#d9f99d;
  --c-kyushu:#f59e0b;      --c-kyushu-bg:#fffbeb;     --c-kyushu-bg2:#fef3c7;
  /* 別軸枠 */
  --c-ota:#0891b2;         --c-ota-bg:#ecfeff;        --c-ota-bg2:#cdeff5;
  --c-subsidy:#e11d48;     --c-subsidy-bg:#fff1f2;    --c-subsidy-bg2:#fcdce1;

  /* サブカテゴリカラー */
  --c-official:#10b981;
  --c-sns:#ec4899;
  --c-media:#0284c7;
  --c-gov:#8b5cf6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:14px/1.55 system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  max-width:1280px; margin:0 auto; padding:0 14px 60px;
}
a{color:var(--link); text-decoration:none}
a:visited{color:var(--vlink)}
a:hover{text-decoration:underline}

/* ── マストヘッド（グラデ背景ヒーロー）── */
.hd{padding:16px 0 0; margin-bottom:16px}

.hero{
  position:relative; overflow:hidden;
  padding:30px 32px 30px;
  border-radius:16px;
  background:linear-gradient(115deg,#f4ecff 0%,#e9effe 33%,#e4f5ec 66%,#ffeede 100%);
  box-shadow:0 1px 2px rgba(20,20,50,.05), 0 18px 38px -24px rgba(40,28,80,.34);
}
/* 上端 — 4 地域カラーのグラデアクセント */
.hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,#7c3aed,#2563eb 38%,#059669 68%,#ea580c);
}
/* 右上 — 淡い光のにじみ */
.hero::after{
  content:""; position:absolute; right:-70px; top:-90px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.hero-ttl{
  position:relative; margin:0;
  font-size:26px; font-weight:800; letter-spacing:.05em; line-height:1.2;
}
.hero-ttl a{color:#1c1b2e}
.hero-ttl a:hover{text-decoration:none; opacity:.78}
.hero-sub{
  position:relative; margin:8px 0 0;
  font-size:12.5px; font-weight:500; letter-spacing:.08em; color:#6f6c84;
}

/* ── 取得パネル（ヒーローに少し重ねたカード）── */
.updbar{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:-16px 16px 0;
  padding:14px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.34);
}
.updbar-info{flex:1 1 340px; min-width:0}
.updbar-sched{margin:0; font-size:13px; line-height:1.6; color:var(--fg2)}
.updbar-sched b{color:var(--fg); font-weight:700}
.updbar-ico{margin-right:5px}
.updbar-last{
  display:inline-block; margin-left:9px;
  padding:2px 10px; border-radius:999px;
  background:var(--c-doto-bg2); color:var(--c-doto);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.updbar-last b{color:inherit; font-weight:800}
.refresh-note{
  margin:6px 0 0; font-size:12.5px; line-height:1.55; color:var(--fg2);
}

/* ── 総合まとめ（AI生成・4地域横断なので 4色アクセント）── */
.digest{
  position:relative; overflow:hidden;
  margin:14px 16px 0;
  padding:15px 20px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 6px 22px -16px rgba(40,28,80,.34);
}
.digest::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#7c3aed,#2563eb 38%,#059669 68%,#ea580c);
}
.digest-hd{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin:0 0 7px;
}
.digest-ttl{
  margin:0; font-size:14.5px; font-weight:800; letter-spacing:.03em; color:#1c1b2e;
}
.digest-ai{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:var(--c-national-bg2); color:var(--c-national);
  font-size:10px; font-weight:800; letter-spacing:.05em;
}
.digest-test{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#fef3c7; color:#b45309;
  font-size:10px; font-weight:800; letter-spacing:.05em;
}
.digest-meta{font-size:11px; color:var(--fg3); font-weight:600; letter-spacing:.02em}
.digest-body{margin:0; font-size:13px; line-height:1.78; color:var(--fg)}
@media (max-width:640px){
  .digest{margin:12px 6px 0; padding:13px 15px 14px}
  .digest-body{font-size:12.5px; line-height:1.72}
}

/* ニュース取得ボタン */
.btn-refresh{
  flex:0 0 auto;
  font:700 13.5px/1 system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  color:#fff; white-space:nowrap; cursor:pointer;
  border:none; border-radius:10px;
  padding:12px 22px;
  background:linear-gradient(135deg,#0ea271,#047a55);
  box-shadow:0 5px 16px -5px rgba(5,150,105,.6);
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-refresh:hover{transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 8px 20px -6px rgba(5,150,105,.62)}
.btn-refresh:active{transform:translateY(0)}
.btn-refresh:disabled{cursor:default}
.btn-refresh.busy{animation:btn-pulse 1.1s ease-in-out infinite}
@keyframes btn-pulse{50%{opacity:.55}}

/* 地域タブ — 常時カラフル・上品なパステル */
.tabs{
  display:flex; gap:6px;
  padding:14px 0 0; flex-wrap:wrap; align-items:flex-end;
  border-bottom:1px solid var(--line); margin-bottom:14px;
}
.tab{
  position:relative;
  padding:11px 22px; font-size:15px; font-weight:600;
  letter-spacing:.04em;
  border:1px solid transparent;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  transition:background .2s ease, color .15s ease, transform .15s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
  line-height:1.2;
}
.tab::after{
  content:""; position:absolute;
  left:10px; right:10px; bottom:-1px;
  height:3px; background:currentColor;
  border-radius:2px 2px 0 0;
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.tab:hover{text-decoration:none; transform:translateY(-2px)}
.tab:hover::after{transform:scaleX(.5)}
.tab.on::after{transform:scaleX(1); height:4px}
.tab.on{font-weight:700; transform:translateY(-1px)}
.tab:visited{color:inherit}

/* すべて（中立・温かみのあるアイボリー） */
.tab:not([class*="tab-"]){color:#6b7280; background:#f7f7f5; border-color:#ececea}
.tab:not([class*="tab-"]):hover{background:#efefec; color:#374151}
.tab.on:not([class*="tab-"]){
  color:#374151; background:#fff;
  border-color:#e5e5e3;
  box-shadow:0 -3px 12px rgba(0,0,0,.04);
}

/* 地域別カラータブ — 常時パステル背景 */
.tab-national{color:var(--c-national); background:var(--c-national-bg); border-color:#e8dfff}
.tab-national:hover{background:var(--c-national-bg2)}
.tab-national.on{
  background:var(--c-national-bg2); border-color:#d8c9ff;
  box-shadow:0 -3px 14px rgba(124,58,237,.14);
}

.tab-hokkaido{color:var(--c-hokkaido); background:var(--c-hokkaido-bg); border-color:#dfe7fb}
.tab-hokkaido:hover{background:var(--c-hokkaido-bg2)}
.tab-hokkaido.on{
  background:var(--c-hokkaido-bg2); border-color:#c8d6f8;
  box-shadow:0 -3px 14px rgba(37,99,235,.14);
}

.tab-doto{color:var(--c-doto); background:var(--c-doto-bg); border-color:#d4ecdd}
.tab-doto:hover{background:var(--c-doto-bg2)}
.tab-doto.on{
  background:var(--c-doto-bg2); border-color:#b6dec5;
  box-shadow:0 -3px 14px rgba(5,150,105,.14);
}

.tab-nemuro{color:var(--c-nemuro); background:var(--c-nemuro-bg); border-color:#fde2c8}
.tab-nemuro:hover{background:var(--c-nemuro-bg2)}
.tab-nemuro.on{
  background:var(--c-nemuro-bg2); border-color:#fbcaa3;
  box-shadow:0 -3px 14px rgba(234,88,12,.14);
}

/* 7 地方ブロック (全国版で追加) */
.tab-tohoku{color:var(--c-tohoku); background:var(--c-tohoku-bg); border-color:#f9c5dc}
.tab-tohoku:hover{background:var(--c-tohoku-bg2)}
.tab-tohoku.on{background:var(--c-tohoku-bg2); border-color:#f5a8c8; box-shadow:0 -3px 14px rgba(219,39,119,.14)}

.tab-kanto{color:var(--c-kanto); background:var(--c-kanto-bg); border-color:#b9f4e6}
.tab-kanto:hover{background:var(--c-kanto-bg2)}
.tab-kanto.on{background:var(--c-kanto-bg2); border-color:#99ecd6; box-shadow:0 -3px 14px rgba(13,148,136,.14)}

.tab-chubu{color:var(--c-chubu); background:var(--c-chubu-bg); border-color:#fcd97f}
.tab-chubu:hover{background:var(--c-chubu-bg2)}
.tab-chubu.on{background:var(--c-chubu-bg2); border-color:#f8c54d; box-shadow:0 -3px 14px rgba(217,119,6,.14)}

.tab-kinki{color:var(--c-kinki); background:var(--c-kinki-bg); border-color:#efbafb}
.tab-kinki:hover{background:var(--c-kinki-bg2)}
.tab-kinki.on{background:var(--c-kinki-bg2); border-color:#e89ef8; box-shadow:0 -3px 14px rgba(162,28,175,.14)}

.tab-chugoku{color:var(--c-chugoku); background:var(--c-chugoku-bg); border-color:#d1d9e1}
.tab-chugoku:hover{background:var(--c-chugoku-bg2)}
.tab-chugoku.on{background:var(--c-chugoku-bg2); border-color:#bcc6d1; box-shadow:0 -3px 14px rgba(71,85,105,.14)}

.tab-shikoku{color:var(--c-shikoku); background:var(--c-shikoku-bg); border-color:#cbef82}
.tab-shikoku:hover{background:var(--c-shikoku-bg2)}
.tab-shikoku.on{background:var(--c-shikoku-bg2); border-color:#b6e85c; box-shadow:0 -3px 14px rgba(101,163,13,.14)}

.tab-kyushu{color:var(--c-kyushu); background:var(--c-kyushu-bg); border-color:#fde17f}
.tab-kyushu:hover{background:var(--c-kyushu-bg2)}
.tab-kyushu.on{background:var(--c-kyushu-bg2); border-color:#fbcf4d; box-shadow:0 -3px 14px rgba(245,158,11,.14)}

/* OTA動向 — 地域軸ではない別枠（「すべて」にも含まれない）ので少し離す */
.tab-ota{color:var(--c-ota); background:var(--c-ota-bg); border-color:#c4e9f1; margin-left:20px}
.tab-ota:hover{background:var(--c-ota-bg2)}
.tab-ota.on{
  background:var(--c-ota-bg2); border-color:#a8e0eb;
  box-shadow:0 -3px 14px rgba(8,145,178,.14);
}

.tab-subsidy{color:var(--c-subsidy); background:var(--c-subsidy-bg); border-color:#f6c9d2}
.tab-subsidy:hover{background:var(--c-subsidy-bg2)}
.tab-subsidy.on{
  background:var(--c-subsidy-bg2); border-color:#f0aab9;
  box-shadow:0 -3px 14px rgba(225,29,72,.14);
}

@media (max-width:640px){
  .tabs{gap:4px}
  .tab{padding:9px 14px; font-size:13.5px; letter-spacing:.02em}
}

/* サブカテゴリ・期間チップ */
.chips{display:flex; gap:6px; padding:6px 0 12px; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); margin-bottom:12px}
.chip{
  position:relative;
  padding:5px 12px; font-size:12px; font-weight:500;
  border-radius:4px; border:1.5px solid transparent;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  line-height:1.2;
}
.chip:hover{transform:translateY(-1px)}
.chip:visited{color:inherit}

/* アクティブチップ全般 — 大きく + チェック印 + 強いシャドウ */
.chip.on{
  font-weight:700;
  padding:7px 14px 7px 26px;
  font-size:13px;
  letter-spacing:.02em;
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 3px 10px rgba(0,0,0,.15), 0 0 0 1.5px rgba(255,255,255,.95) inset;
}
.chip.on::before{
  content:"✓"; position:absolute;
  left:10px; top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:900;
}

/* サブカテゴリ — 4色 */
.chip-official      {color:var(--c-official); background:#d1fae5}
.chip-official:hover{background:#b7ebd0; text-decoration:none}
.chip-official.on   {background:var(--c-official); color:#fff;
                     box-shadow:0 4px 14px rgba(16,185,129,.45), 0 0 0 2px var(--c-official)}

.chip-sns           {color:var(--c-sns); background:#fce7f3}
.chip-sns:hover     {background:#fbd5e8; text-decoration:none}
.chip-sns.on        {background:var(--c-sns); color:#fff;
                     box-shadow:0 4px 14px rgba(236,72,153,.45), 0 0 0 2px var(--c-sns)}

.chip-media         {color:var(--c-media); background:#e0f2fe}
.chip-media:hover   {background:#cdebfc; text-decoration:none}
.chip-media.on      {background:var(--c-media); color:#fff;
                     box-shadow:0 4px 14px rgba(2,132,199,.45), 0 0 0 2px var(--c-media)}

.chip-gov           {color:var(--c-gov); background:#ede9fe}
.chip-gov:hover     {background:#dfd9fb; text-decoration:none}
.chip-gov.on        {background:var(--c-gov); color:#fff;
                     box-shadow:0 4px 14px rgba(139,92,246,.45), 0 0 0 2px var(--c-gov)}

/* 期間チップ — アンバー統一 */
.chip.ch-since      {color:#b45309; background:#fef3c7}
.chip.ch-since:hover{background:#fde68a; text-decoration:none}
.chip.ch-since.on   {background:#d97706; color:#fff;
                     box-shadow:0 4px 14px rgba(217,119,6,.45), 0 0 0 2px #d97706}

.sep{display:inline-block; width:1px; height:20px; background:var(--line); margin:0 8px}

/* グリッド（PC 4カラム） */
.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.col{background:var(--paper); border-radius:8px; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column}
.col-hd{
  padding:10px 12px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.col-ttl{margin:0; font-size:15px; font-weight:700; letter-spacing:.02em}
.col-count{font-size:11px; opacity:.85; padding:2px 7px; background:rgba(255,255,255,.6); border-radius:10px}
.col-more{margin-left:auto; font-size:11px; opacity:.85; color:inherit}
.col-more:visited{color:inherit}
.col-more:hover{opacity:1; text-decoration:underline}
.col-body{padding:0 10px}

.col-national .col-hd{background:var(--c-national-bg2); color:var(--c-national)}
.col-hokkaido .col-hd{background:var(--c-hokkaido-bg2); color:var(--c-hokkaido)}
.col-doto     .col-hd{background:var(--c-doto-bg2);     color:var(--c-doto)}
.col-nemuro   .col-hd{background:var(--c-nemuro-bg2);   color:var(--c-nemuro)}

.col-national{border-top:3px solid var(--c-national-bg2)}
.col-hokkaido{border-top:3px solid var(--c-hokkaido-bg2)}
.col-doto    {border-top:3px solid var(--c-doto-bg2)}
.col-nemuro  {border-top:3px solid var(--c-nemuro-bg2)}

/* 単一カラムモード（area指定時） */
.list{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:0 16px}
body.single-mode.region-national{border-top:none}
body.region-national .list{border-top:3px solid var(--c-national)}
body.region-hokkaido .list{border-top:3px solid var(--c-hokkaido)}
body.region-doto     .list{border-top:3px solid var(--c-doto)}
body.region-nemuro   .list{border-top:3px solid var(--c-nemuro)}
body.region-tohoku   .list{border-top:3px solid var(--c-tohoku)}
body.region-kanto    .list{border-top:3px solid var(--c-kanto)}
body.region-chubu    .list{border-top:3px solid var(--c-chubu)}
body.region-kinki    .list{border-top:3px solid var(--c-kinki)}
body.region-chugoku  .list{border-top:3px solid var(--c-chugoku)}
body.region-shikoku  .list{border-top:3px solid var(--c-shikoku)}
body.region-kyushu   .list{border-top:3px solid var(--c-kyushu)}
body.region-ota      .list{border-top:3px solid var(--c-ota)}
body.region-subsidy  .list{border-top:3px solid var(--c-subsidy)}

/* 記事 — 左に地域カラーのストライプ */
.item{
  position:relative;
  padding:11px 0 11px 14px;
  border-bottom:1px solid var(--line);
}
.item::before{
  content:""; position:absolute;
  left:0; top:10px; bottom:10px;
  width:4px; border-radius:2px;
  background:var(--line);
}
.item:last-child{border-bottom:none}

/* 左ストライプ — 各エリアのヘッダ文字色と同じアクセント */
.col-national .item::before{background:var(--c-national)}
.col-hokkaido .item::before{background:var(--c-hokkaido)}
.col-doto     .item::before{background:var(--c-doto)}
.col-nemuro   .item::before{background:var(--c-nemuro)}
body.region-national .list .item::before{background:var(--c-national)}
body.region-hokkaido .list .item::before{background:var(--c-hokkaido)}
body.region-doto     .list .item::before{background:var(--c-doto)}
body.region-nemuro   .list .item::before{background:var(--c-nemuro)}
body.region-tohoku   .list .item::before{background:var(--c-tohoku)}
body.region-kanto    .list .item::before{background:var(--c-kanto)}
body.region-chubu    .list .item::before{background:var(--c-chubu)}
body.region-kinki    .list .item::before{background:var(--c-kinki)}
body.region-chugoku  .list .item::before{background:var(--c-chugoku)}
body.region-shikoku  .list .item::before{background:var(--c-shikoku)}
body.region-kyushu   .list .item::before{background:var(--c-kyushu)}
body.region-ota      .list .item::before{background:var(--c-ota)}
body.region-subsidy  .list .item::before{background:var(--c-subsidy)}

/* ── OTA動向・補助金の別枠（トップのグリッド下に PC では横並び）── */
.bands{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-top:12px; align-items:start;
}
.ota-band{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--c-ota-bg2);
  border-radius:8px; overflow:hidden;
}
.ota-hd{
  padding:10px 14px; display:flex; align-items:center; gap:8px;
  background:var(--c-ota-bg2); color:var(--c-ota);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.ota-ttl{margin:0; font-size:15px; font-weight:700; letter-spacing:.02em}
.ota-count{font-size:11px; opacity:.85; padding:2px 7px; background:rgba(255,255,255,.6); border-radius:10px}
.ota-more{margin-left:auto; font-size:11px; opacity:.85; color:inherit}
.ota-more:visited{color:inherit}
.ota-more:hover{opacity:1; text-decoration:underline}
.ota-note{
  margin:0; padding:7px 14px;
  font-size:11.5px; line-height:1.5; color:var(--fg2);
  background:#fbfdfe; border-bottom:1px solid var(--line);
}
.ota-note-solo{border:1px solid var(--line); border-radius:8px; margin-bottom:10px}
.ota-body{padding:0 14px}
.ota-body .empty{grid-column:1 / -1}
.ota-band .item::before{background:var(--c-ota)}

/* ── 補助金の別枠（OTA動向と同型）── */
.subsidy-band{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--c-subsidy-bg2);
  border-radius:8px; overflow:hidden;
}
.subsidy-hd{
  padding:10px 14px; display:flex; align-items:center; gap:8px;
  background:var(--c-subsidy-bg2); color:var(--c-subsidy);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.subsidy-ttl{margin:0; font-size:15px; font-weight:700; letter-spacing:.02em}
.subsidy-count{font-size:11px; opacity:.85; padding:2px 7px; background:rgba(255,255,255,.6); border-radius:10px}
.subsidy-more{margin-left:auto; font-size:11px; opacity:.85; color:inherit}
.subsidy-more:visited{color:inherit}
.subsidy-more:hover{opacity:1; text-decoration:underline}
.subsidy-note{
  margin:0; padding:7px 14px;
  font-size:11.5px; line-height:1.5; color:var(--fg2);
  background:#fffafb; border-bottom:1px solid var(--line);
}
.subsidy-note-solo{border:1px solid var(--line); border-radius:8px; margin-bottom:10px}
.subsidy-body{padding:0 14px}
.subsidy-body .empty{grid-column:1 / -1}
.subsidy-band .item::before{background:var(--c-subsidy)}

.ttl{margin:0 0 4px; font-size:14px; line-height:1.4; font-weight:600}
.ttl a{color:var(--fg)}
.ttl a:hover{color:var(--link)}

.meta{
  margin:0; font-size:11px;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.meta .icon{font-size:13px}
.meta .src{color:#1e6bd6; font-weight:600}        /* ソース = 青 */
.meta .time{color:#b45309; font-weight:600}        /* 時間 = アンバー */
.meta .dom{color:#888}                              /* ドメイン = 薄灰 */
.meta .dot{color:var(--line); margin:0 1px}

/* 単一カラム時は記事サイズを大きめに */
.list .ttl{font-size:16px}
.list .meta{font-size:12px}
.list .item{padding:14px 0 14px 14px}

.empty{padding:20px; text-align:center; color:var(--fg3); font-size:12px}

/* フッタ */
.ft{margin-top:30px; padding-top:14px; border-top:1px solid var(--line); color:var(--fg3); font-size:11px; text-align:center}
.ft p{margin:4px 0}
.ft a{text-decoration:underline}

/* レスポンシブ */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:640px){
  body{font-size:13px; padding:0 10px 50px}
  .hero{padding:22px 18px}
  .hero-ttl{font-size:20px; letter-spacing:.03em}
  .hero-sub{font-size:11.5px; letter-spacing:.05em}
  .updbar{flex-direction:column; align-items:stretch; margin:-14px 6px 0; gap:11px; padding:13px 14px}
  .updbar-info{flex:0 0 auto}
  .btn-refresh{width:100%; padding:12px 20px}
  .grid{grid-template-columns:1fr; gap:10px}
  .list .ttl{font-size:15px}
  .col-ttl{font-size:14px}
  .bands{grid-template-columns:1fr}
  .ota-ttl{font-size:14px}
  .subsidy-ttl{font-size:14px}

  .item{padding-top:10px; padding-bottom:10px}
  .list .item{padding-top:11px; padding-bottom:11px}
}

/* ══ 観光動画ギャラリー (video.php) ══ */

/* 動画タブ — 別ページへ飛ぶので常時ベタ赤で目立たせる */
.tab-video{color:#fff; background:#dc2626; border-color:#dc2626}
.tab-video:hover{background:#b91c1c; color:#fff}
.tab-video:visited{color:#fff}
.tab-video.on{background:#b91c1c; border-color:#b91c1c; box-shadow:0 -3px 14px rgba(220,38,38,.3)}

/* 動画ページのヒーロー — 赤〜オレンジの暖色グラデで派手に */
.hero-video{
  background:linear-gradient(115deg,#fff0f0 0%,#ffe7ec 38%,#ffeede 72%,#fff6e3 100%);
}
.hero-video::before{
  background:linear-gradient(90deg,#dc2626,#ea580c 52%,#f59e0b);
}

.vbar{
  position:relative; z-index:1;
  margin:14px 16px 0; padding:11px 17px;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 8px 22px -16px rgba(0,0,0,.3);
  font-size:12.5px; line-height:1.6; color:var(--fg2);
}
.vbar-last{
  display:inline-block; margin-left:9px;
  padding:2px 10px; border-radius:999px;
  background:#fde2e2; color:#dc2626;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
}

/* サムネがバーっと並ぶグリッド */
.vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:18px;
  margin-top:18px;
}
.vcard{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px -6px rgba(20,20,50,.28);
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
}
.vcard:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 20px 36px -18px rgba(40,28,80,.5);
  text-decoration:none;
}
.vcard:visited{color:inherit}
.vthumb{
  position:relative;
  aspect-ratio:16 / 9;
  background:#15151c;
  overflow:hidden;
}
.vthumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s ease;
}
.vcard:hover .vthumb img{transform:scale(1.07)}
.vplay{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.78);
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(220,38,38,.94); color:#fff;
  border-radius:50%; font-size:19px; padding-left:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.vcard:hover .vplay{opacity:1; transform:translate(-50%,-50%) scale(1)}
.vtitle{
  margin:11px 13px 5px;
  font-size:13.5px; font-weight:700; line-height:1.45; color:var(--fg);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.vsub{
  margin:auto 13px 12px 13px;
  font-size:11.5px;
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
}
.vch{color:#dc2626; font-weight:700}
.vtime{color:#b45309; font-weight:600}
.vdot{color:var(--line)}

@media (max-width:640px){
  .hero-video{padding:22px 18px}
  .vbar{margin:12px 6px 0}
  .vgrid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:11px}
  .vtitle{font-size:12.5px; margin:9px 10px 4px}
  .vsub{margin:auto 10px 10px 10px}
  .vplay{width:44px; height:44px; font-size:16px}
}
