/*
  ピーアーク草加 攻略ブログ 共通CSS

  2026-09-02: 見た目の方針が変わった（竹澤さん経由・ピーアーク側の要望）。
  それまでは北綾瀬サイト（https://kitaayase.pachislot-labo.com/）の見た目を寸法まで写していたが、
  「北綾瀬とは全然違う見た目にしてほしい」「手本はない」「素人感は出す」との指示になり、
  提示した3案のうち【案C 王道の攻略サイト】が選ばれた。赤と黒で見出しを強く立て、
  写真カードを並べる、パチンコ系の攻略サイトでよく見る形。

  ⚠️ 以降「模倣元実測」と書かれたコメントは、寸法（写真の大きさ・カードの並び・余白）についてのみ
     有効。色・帯・枠などの見た目については案Cが正であり、北綾瀬に戻さないこと。

  2026-08-26: 竹澤さんから「フォントが見にくい／もう少し玄人感を」の指摘。
  本文の書体・文字サイズ(17px)・行間(1.85)はこの時の調整。戻さないこと。
*/
/* 案Cの色（ここだけ変えれば全体の色味が変わる） */
:root {
  --c-red: #d40000;
  --c-red-dark: #8f0000;
  --c-black: #222;
  --c-yellow: #ffe600;
  --c-link: #0645ad;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* 日本語は字面の大きい書体を先に置く。palt は約物（「」（）・、。）の余白を詰める指定で、
     これが無いと句読点まわりが間延びして素人っぽく見える */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  color: #23272e;
  /* 案C: 全体は薄いグレー、本文の枠だけ白。個人が作った攻略サイトの見え方 */
  background: #efefef;
  font-size: 17px;
  line-height: 1.85;
}
/* 日付・台番号・枚数は桁幅を揃える（数字の幅がバラバラだと一覧が読みにくい） */
.vk_post_date, .postList_date, .entry-meta, .movie-card-meta,
.schedule-date-day, .machine-list, .wp-calendar-table { font-variant-numeric: tabular-nums; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* 中身を入れる横幅の枠。模倣元を実測（2026-09-02）すると
   外枠1140px・左右の余白15pxずつ＝中身の幅は1110px だった。
   ヘッダー・パンくず・本文・フッターすべてこの枠で揃っている */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

/* ヘッダー */
/* 案C: 上から下へ濃くなる赤。高さ・余白は模倣元の実測値（全体114.8px）をそのまま使う */
.site-header {
  background: linear-gradient(180deg, var(--c-red), var(--c-red-dark));
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.site-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}
/* スマホ用の三本線ボタン。PCでは出さない（メニューが常に開いているため） */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; }
/* 模倣元はサイト名が中央。その下のナビは、項目を等幅に伸ばして横幅いっぱいに
   均等配置している（実測: 6項目がそれぞれ184.9px = 全幅1110pxの1/6、文字は各項目の中央）。
   ⚠️ 2026-08-26: 以前は文字幅ぶんだけの項目を左から並べていたため、右側が大きく空いて
     左に寄って見えていた。同じ均等配置に揃える */
/* 大きさ・余白は模倣元の実測値（24px・行の高さ1.4・上17.6px・下16px）。
   案Cでは色だけ白に変え、黒い影を付けて赤地から浮かせている */
.site-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  padding: 17.6px 0 0;
  margin: 0 0 16px;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
  letter-spacing: .02em;
}
.site-title a { color: #fff; }
.site-title a:hover { text-decoration: none; }

/* スクロールするとヘッダーが画面の上に貼り付いて付いてくる（竹澤さん 2026-09-02）。
   模倣元（北綾瀬）の実装をそのまま測って合わせた:
   ・ヘッダーの高さを超えてスクロールしたら body に header_scrolled が付く
   ・その時のヘッダーは position:fixed / top:0 / 幅いっぱい / 影付き / 上から降りてくる0.5秒の動き
   ・貼り付いている間はサイト名を隠してメニューだけ残す（模倣元はロゴを display:none にしている）
   ・ヘッダーが浮くと本文が上にずれるので、その分は下の要素に余白を入れて詰める（JS側）
   ・追従するのはPCだけ。模倣元をスマホ幅（375px）で実測したところ、スクロールしてもヘッダーは
     貼り付かず上へ流れて消えた（代わりに画面左上に固定のメニューボタンが出る作り）。
     ここも同じにしてある */
@keyframes header_drop { 0% { top: -63px; } 100% { top: 0; } }
@media (min-width: 992px) {
  .header_scrolled .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1000;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    animation: header_drop .5s ease-out 0s 1 alternate none running;
  }
  .header_scrolled .site-title { display: none; }
}

/* 模倣元実測（2026-09-02）: 帯の高さ47.6px・上下の線なし。
   項目は横幅を6等分（1110÷6＝185px）。項目の左右にごく薄い縦線が入る。
   文字は14px・太字・黒(#333)、上下14pxの余白 */
.global-nav { border-top: none; }
.global-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.global-nav-list {
  /* 案C: 黒い帯に白い文字。赤いヘッダーの下に敷く */
  background: var(--c-black);
}
.global-nav-list > li {
  position: relative;
  flex: 1 1 0;
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.global-nav-list > li:last-child { border-right: none; }
.global-nav-list > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  color: #fff;
  /* ⚠️ 模倣元はリンク自体が12px。見えている文字は中の .global-nav-name（14px）が作っている
     （実測 2026-09-02）。ここを14pxに揃えないこと */
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.global-nav-name { font-size: 14px; font-weight: bold; line-height: 19.6px; }
/* 案C: 触れている項目だけ赤く塗る */
.global-nav-list > li > a:hover { color: #fff; text-decoration: none; background: var(--c-red); }
.global-nav-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--c-black);
  border: 1px solid #444;
  min-width: 160px;
  z-index: 10;
}
.global-nav-list > li:hover .sub-menu { display: block; }
.global-nav-list .sub-menu a { display: block; padding: 10px 14px; font-size: 14px; font-weight: normal; white-space: nowrap; color: #fff; }
.global-nav-list .sub-menu a:hover { background: var(--c-red); text-decoration: none; }

/* 案C: ヘッダーのすぐ下に出る黄色い一行の告知。
   中身（次の特定日）は scripts/templates.js の noticeStripHtml() が作る日に合わせて入れている */
.notice-strip {
  background: var(--c-yellow);
  color: var(--c-red-dark);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.5;
  padding: 7px 16px;
  text-align: center;
  border-bottom: 2px solid var(--c-red-dark);
}

/* ページ見出しの帯（パンくずの上）。高さ96pxは模倣元の実測値のまま。
   案C: 黒地に白文字、左端に太い赤の縦線を立てる */
.page-header {
  height: 96px;
  display: flex;
  align-items: center;
  text-align: left;
  background: var(--c-black);
  border-bottom: 4px solid var(--c-red);
}
.page-header-inner {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
/* 帯の中の見出し。大きさは模倣元実測（PC 32px / スマホ 28px）のまま、案Cで白文字＋赤の縦線 */
.page-header-title {
  margin: 0;
  padding-left: 14px;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  border-left: 8px solid var(--c-red);
}

/* パンくず */
/* 模倣元実測（2026-09-02）: 画面いっぱいの帯（高さ31px）で、上下にごく薄い線が1本ずつ。
   文字12px、リンクはグレー(#666)に下線、区切りの「/」は文字ではなくCSSで出している。
   ⚠️ 以前は本文と同じ幅・青いリンク・「 > 」のベタ書きだった。戻さないこと */
.breadcrumb {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  padding: 0;
  font-size: 12px;
  /* ⚠️ 本文の行間（1.8）を引き継ぐと帯が31px→36pxに太る。模倣元は normal（実測 2026-09-02） */
  line-height: normal;
  color: #333;
}
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.breadcrumb-list__item { display: inline-block; color: #333; }
.breadcrumb-list__item::after { content: "/"; margin: 0 6px; color: #333; }
.breadcrumb-list__item:last-child::after { content: ""; margin: 0; }
.breadcrumb-list__item a { color: #666; font-size: 12px; text-decoration: underline; }
.breadcrumb-home-icon {
  display: inline-block;
  width: 15px;
  height: 12px;
  line-height: 12px;
  margin-right: 4.8px;
  fill: currentColor;
  vertical-align: baseline;
}

/* レイアウト（メイン+サイドバー） */
/* 模倣元実測（2026-09-02）: 本文739.3px ＋ 間隔62.9px ＋ 右の欄307.8px ＝ 1110px */
/* 案C: 本文の枠だけ白く抜いて、外側の薄いグレーから浮かせる */
.site-body {
  max-width: 1140px;
  margin: 0 auto;
  background: #fff;
  padding: 24px 15px 40px;
  display: flex;
  gap: 62.9px;
  align-items: flex-start;
}
.main-section { flex: 1; min-width: 0; }
/* ⚠️ 右の欄は模倣元が行間を詰めている（本文の1.85ではなく標準の行間・実測 2026-09-02）。
   これを外すと分類の1行が40.6px→45.5px、カレンダーが248px→322pxに伸びて模倣元とずれる */
.sub-section { width: 307.8px; flex-shrink: 0; line-height: normal; }

/* 分類の一覧だけ見出しの左にキャラが入る。入らないページでも見た目は変わらない */
.archive-header { padding: 0; margin: 0 0 32px; display: flex; align-items: flex-end; gap: 10px; }
.archive-header-chara { flex: none; width: 46px; height: auto; }
.archive-header-title { flex: 1; min-width: 0; }
/* 本文の上の見出し（「新着情報」等）。案C: 黒地に白文字、左端に太い赤の縦線。
   文字の大きさ（PC 32px / スマホ 28px）と見出しの下の空き（PC32px / スマホ28px）は
   模倣元の実測値をそのまま使っている */
.archive-header-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  padding: 8px 14px;
  background: var(--c-black);
  color: #fff;
  line-height: 1.4;
  border-left: 8px solid var(--c-red);
}

/* 記事カード（一覧） */
.post-list { }
/* 1枚ぶんの積み上がりは模倣元（北綾瀬）を実ブラウザで測った値に合わせている（2026-09-02）。
   模倣元: カードの上下余白28.8px／写真の下に19pxの空き／「続きを読む」は本文列の右下に貼り付いていて
   写真の下端と揃う（＝カードの高さは写真の外枠が決めている） */
.vk_post {
  display: flex;
  gap: 16px;
  padding: 28.8px 0;
  border-bottom: 1px solid #eee;
}
/* 写真の幅は220px固定だが、本文が入る幅より写真が大きくならないよう上限も付けている。
   これが無いと本文側が痩せた時に見出しが1文字ずつ折り返される（2026-08-26の不具合） */
.vk_post_imgOuter { position: relative; width: 257px; max-width: 40%; flex-shrink: 0; padding-bottom: 19px; }
.vk_post_imgOuter img { width: 100%; height: 143px; object-fit: cover; display: block; background: #ddd; }
/* 分類のラベル。模倣元は一覧もトップも同じ1つの指定で出している（実測 2026-09-02:
   写真の右上ぴったり・文字10px・内側の余白は文字の高さの0.7倍と1.2倍・角丸なし・高さ29px。
   PCでもスマホでも同じ大きさ）。こちらもトップ（.home-card-term）と同じ見た目に揃えてある。
   ⚠️ 左上に6px浮かせた角丸の小さなラベルに戻さないこと（模倣元と違う独自の作りだった） */
.vk_post_imgOuter_singleTermLabel,
.home-card-term {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  color: #fff;
  background-color: #81d742;
  font-size: 10px;
  line-height: 1.5;
  padding: .7em 1.2em;
}
.vk_post_body { flex: 1; min-width: 0; position: relative; padding-bottom: 45px; }
.vk_post_title { margin: 0; font-size: 18px; line-height: 1.4; color: #333; }
.vk_post_title a { color: #333; }
/* 一覧カードの「新着!!」。模倣元のCSS実測値（2026-09-02）をそのまま使っている */
/* 案C: トップのカードと同じ赤い札に揃える */
.vk_post_title_new {
  display: inline-block;
  margin-left: .4em;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 2px;
  white-space: nowrap;
  color: #fff;
  background: var(--c-red);
}
/* 一覧の日付・抜粋・ボタンは模倣元（北綾瀬）を実ブラウザで測った値に合わせている（2026-09-02）。
   模倣元: 日付11px #666・見出しの下に6.4px（スマホ5.6px）空けて置く・日付の前に14×11のカレンダーの絵
   ／抜粋14px #333で1行／ボタン12px・高さ28px。
   ⚠️ 模倣元の日付は入れ子になっていて、外側の枠だけを測ると16px #333 に見える。実際に字が出ている
   のは内側の11px #666 のほう。以前この外枠の値を写して大きくしていたので戻さないこと。
   カレンダーの絵は模倣元がアイコン用の書体を読み込んで出しているが、草加はその書体を読み込んで
   いないので、同じ形の図を文字色と同じ濃さで直接書いて置いている */
.vk_post_date { font-size: 11px; color: #666; margin: 6.4px 0 0; line-height: 1.44; }
.vk_post_date::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-right: 2px;
  vertical-align: -1px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23666666' d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM320 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z'/></svg>");
}
.vk_post_excerpt { font-size: 14px; color: #333; margin: 13px 0 0; line-height: 1.6; }
.vk_post_btnOuter { position: absolute; right: 0; bottom: 0; text-align: right; }
.vk_post_btnOuter .btn-primary { font-size: 12px; padding: 5px 17px; line-height: 1.5; }
.btn-primary {
  display: inline-block;
  background: var(--c-red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 0;
}
.btn-primary:hover { background: var(--c-red-dark); color: #fff; text-decoration: none; }

/* 一覧のページ送り（模倣元の /news/ と同じく20件ずつ）。
   指で押しやすいよう1つあたり36px角以上にしている */
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 24px 0 4px; }
.pager-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pager a, .pager span { min-width: 36px; padding: 8px 10px; font-size: 14px; text-align: center; line-height: 1.2; }
.pager a { border: 1px solid #d6dbe1; background: #fff; color: #4d545c; text-decoration: none; }
.pager a:hover { background: #fdf0f0; border-color: var(--c-red); }
.pager .is-current { border: 1px solid var(--c-red); background: var(--c-red); color: #fff; font-weight: 700; }
.pager-prev, .pager-next { font-weight: 700; }

/* サイドバー */
.widget { margin-bottom: 32px; }
.widget:last-child { margin-bottom: 0; }
/* 見出し。模倣元実測（2026-09-02）: 18px・黒(#333)・下に9pxの空き・
   下線は薄いグレー1本で、その左端3割だけ青い線が重なる（下線を2色に見せる作り）。
   ⚠️ 以前は左側に太い青の縦棒を立てていた。模倣元と違うので戻さないこと */
/* 案C: 右の欄の見出しも本文側と同じ「黒地・白文字・左に赤の縦線」に揃える */
.widget-title {
  position: relative;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  padding: 7px 12px;
  margin: 0 0 10px;
  background: var(--c-black);
  color: #fff;
  border-bottom: none;
  border-left: 8px solid var(--c-red);
}
/* 検索。模倣元実測: 入力欄と押しボタンを横に並べ、間は10px。高さはどちらも36px */
.widget_search form { display: flex; }
.widget_search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  font-size: 14px;
}
.widget_search button {
  flex: 0 0 101.3px;
  height: 36px;
  margin-left: 10px;
  padding: 6px;
  background: var(--c-red);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 0;
  font-size: 16px;
  cursor: pointer;
}
/* 分類・月別アーカイブの一覧。模倣元実測: 1行40.6px・区切り線なし・
   文字14px・グレー(#666)・下線なし・左に14pxの字下げ */
.localNavi { list-style: none; margin: 0; padding: 0; }
.localNavi li { border-bottom: none; padding: 0; font-size: 14px; }
.localNavi li a {
  display: block;
  padding: 9.8px 0 9.8px 14px;
  color: #666;
  font-size: 14px;
  text-decoration: none;
}
.localNavi li a:hover { color: var(--c-red); }
/* 分類の行に添えるキャラ。月別アーカイブの行には入らない */
.localNavi-chara { width: 26px; height: auto; vertical-align: middle; margin-right: 8px; }
/* 今開いている分類はリンクにしない（押しても同じページなので） */
.localNavi li.is-current {
  padding: 9.8px 0 9.8px 14px;
  color: #333;
  font-weight: 700;
}

.calendar_wrap table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; }
.calendar_wrap caption { font-size: 14px; padding-bottom: 6px; }
.calendar_wrap th, .calendar_wrap td { padding: 5px 2px; border: 1px solid #eee; }
.calendar_wrap td.pad { border: none; }

/* カレンダー。模倣元実測（2026-09-02）: 表全体の高さ248px・1マス34px。
   罫線は上下がグレー(#e5e5e5)、左右はごく薄い線と2種類に分かれている。
   曜日の行に色は敷かれておらず、太字の黒。
   記事がある日の数字は、青いボタンではなくグレー(#666)の下線付きの文字。
   ⚠️ 以前は水色の背景を敷いてマス全体を青いボタンにしていた。模倣元と違うので戻さないこと */
.wp-calendar-table { width: 100%; border-collapse: collapse; font-size: 16px; text-align: center; }
.wp-calendar-table caption { font-size: 16px; font-weight: 400; color: #333; margin: 8px; padding: 0; }
.wp-calendar-table th, .wp-calendar-table td {
  /* 模倣元は表全体が16pxでも、マスの中の曜日・日付だけ14px（実測 2026-09-02） */
  font-size: 14px;
  padding: 8px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid rgba(0, 0, 0, .06);
  border-right: 1px solid rgba(0, 0, 0, .06);
}
.wp-calendar-table th { background: transparent; font-size: 14px; font-weight: 700; color: #333; }
.wp-calendar-table td a { display: inline; background: transparent; color: #666; text-decoration: underline; }
.wp-calendar-nav { display: flex; justify-content: space-between; font-size: 16px; padding: 0; }
.wp-calendar-nav a { color: #666; text-decoration: none; }

/* 最近の投稿。模倣元実測: 1件113px・写真80px角を左に回り込ませ、右に15pxの空き。
   区切りはごく薄い実線。日付は14pxのグレー(#666)
   ⚠️ 以前は写真60px角・点線の区切りだった */
.postList_item { display: block; overflow: hidden; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.postList_thumbnail { float: left; width: 82px; margin: 0 15px 0 0; }
/* 模倣元は写真の外側に薄いグレーの枠が1本ある（実測 2026-09-02・80px角の写真＋枠で82px角）。
   この枠が無いと1件の高さが113px→111pxになる */
.postList_thumbnail a { display: block; border: 1px solid #e5e5e5; }
.postList_thumbnail img { width: 80px; height: 80px; object-fit: cover; background: #ddd; display: block; }
/* 文章側は写真に回り込ませない（模倣元も overflow:hidden で幅210.8pxの箱にしている） */
.postList_body { overflow: hidden; }
.postList_title { font-size: 14px; margin: 3px 0 0; }
.postList_title a { color: #333; }
.postList_date { font-size: 14px; color: #666; }

/* フッター */
/* 模倣元実測（2026-09-02）: 黒地・白文字・上端に青い線が1本。
   リンクの行（上下12px）→ 下に薄い白の区切り線 → 48pxの余白 → コピーライト。
   リンクは横一列で、項目と項目の間に薄い縦線が入る。
   ⚠️ 以前は薄いグレー地・黒文字だった。模倣元は黒地なので戻さないこと */
/* 案C: 黒地に薄い灰色の文字。上端の線はヘッダーと同じ赤にする */
.site-footer {
  background: var(--c-black);
  color: #aaa;
  border-top: 4px solid var(--c-red);
  margin-top: 20px;
  padding: 0;
}
.site-footer a { color: #fff; }
.footer-nav { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-nav-list {
  list-style: none;
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
.footer-nav-list li {
  display: inline-block;
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.footer-nav-list li:last-child { border-right: 1px solid rgba(255, 255, 255, .2); }
.footer-nav-list a { display: inline; padding: 0; font-size: 12px; color: #fff; }
/* 模倣元はここにウィジェット枠があるが中身が空で、48pxの余白だけが出ている */
.site-footer-content { padding: 48px 15px 0; }
.site-footer-copyright { text-align: center; padding: 16px; }
.site-footer-copyright p { margin: 8px; font-size: 12px; color: #aaa; }

/* 画面右下の「トップへ戻る」。模倣元実測（2026-09-02）: 40×38px・黒の8割の濃さ・
   角丸なし・右25px/下27px・上向きの矢印だけ（文字は読み上げ用に隠してある）。
   読み込み直後は透明で見えず、少し下げると0.3秒かけて現れる */
.page-top-btn {
  position: fixed;
  right: 25px;
  bottom: 27px;
  width: 40px;
  height: 38px;
  z-index: 900;
  background-color: rgba(0, 0, 0, .8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 15 12 7 20 15'/%3E%3C/svg%3E");
  background-size: 50%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.page-top-btn.is-visible { opacity: 1; visibility: visible; }
.page-top-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* 記事詳細 */
.entry-header { padding: 16px 0; border-bottom: 1px solid #eee; margin-bottom: 16px; }
.entry-title { font-size: 25px; margin: 0 0 10px; color: #222; }
.entry-meta { font-size: 14px; color: #8a8f98; }
.entry-meta-item { margin-right: 16px; }
/* 本文にはXの投稿URLがそのまま入るため、折り返せないと横スクロールが出る */
.entry-body { overflow-wrap: anywhere; }
.entry-body p { font-size: 17px; margin: 0 0 1em; }
/* 投稿の冒頭ブロックだけ大きい。模倣元（北綾瀬）は has-large-font-size = 1.5rem = 24px */
.entry-body p.post-lead { font-size: 24px; line-height: 1.7; }
.entry-body .thumb-figure { margin: 0 0 1em; }
/* 記事冒頭のサムネイル。写真素材が無いため scripts/thumbnail.js が作ったSVGを表示する。
   本文幅より狭い（600px上限）ので、左に寄らないよう中央に置く */
.thumb-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
  background: #ddd;
}
/* 引用元の投稿を模した枠。これも本文幅より狭いので中央に置く */
.tweet-embed-mock {
  border: 1px solid #cfd9de;
  border-radius: 8px;
  padding: 16px;
  max-width: 550px;
  font-size: 15px;
  color: #333;
  margin: 1em auto;
}
.tweet-embed-mock .tw-user { font-weight: bold; margin-top: 10px; font-size: 14px; color: #555; }

/* Xの引用（模倣元と同じ埋め込み）。X側のwidgets.jsが読み込まれると
   この中身が本物のカードに置き換わり、投稿に付いている画像もそこに出る。
   読み込めなかった時に備えて、下の枠はそのまま読める見た目にしてある */
.wp-block-embed { margin: 1.6em auto; max-width: 550px; }
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed .twitter-tweet {
  border: 1px solid #cfd9de;
  border-radius: 12px;
  padding: 16px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #23272e;
  background: #fff;
}
/* 置き換え後のカードはX側が幅を持つので、こちらの枠指定は消す */
.wp-block-embed .twitter-tweet-rendered { border: 0; padding: 0; background: none; }
.wp-block-embed .twitter-tweet p { margin: 0 0 10px; }
.wp-block-embed .twitter-tweet a { color: var(--c-link); word-break: break-all; }
/* 記事本文のまとめ部分。模倣元は投稿を貼るだけでなく区分ごとに見出しを立てて
   機種・台番を並べているので、同じ読み方ができるよう見出しとリストを用意する */
.post-section {
  font-size: 19px;
  margin: 28px 0 12px;
  padding: 6px 0 6px 10px;
  border-left: 6px solid var(--c-red);
  background: #f6f6f6;
  color: #222;
}
.post-genre {
  font-size: 16px;
  margin: 18px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed #cfd9de;
  color: #8f0000;
}
.post-sub { margin: 14px 0 6px; font-size: 16px; font-weight: bold; color: #555; }
/* 仕掛け1つにつき結果画像1枚。模倣元は見出しの直下に原寸のまま置いている */
.post-figure { margin: 10px 0 18px; }
.post-figure img { max-width: 100%; height: auto; display: block; }
.post-note { margin: 8px 0 0; font-size: 15px; color: #5b626b; line-height: 1.9; }
.coverage-list, .machine-list, .decode-list, .point-list, .account-list {
  margin: 0 0 8px;
  padding-left: 1.4em;
  font-size: 16px;
  line-height: 2;
}
.decode-list .decode-from { color: #777; }
/* 店長ポストの答え合わせ。投稿の言葉 → 指していた先 → 当日どうだったか、を1項目に収める。
   ⚠️ 「読み取りをしてない」（大森さん 2026-09-02）への対応で作った区画。
     当たった行と外れた行が字面で見分けられないと、貼っただけの見た目に戻る */
.decode-list > li { margin: 0 0 12px; }
.decode-list .decode-hit { color: #b3261e; font-weight: bold; }
.decode-list .decode-miss { color: #8a9199; }
/* 記事の中のキャラのひとこと（吹き出し）。
   ⚠️ ここに翌日の答えを書かないこと（大森さん「その導き出しは楽しさだから」）。
   顔は左に固定し、吹き出しは左向きの三角を付けて顔とつなげている */
.chara-say {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
}
.chara-say-face { flex: none; width: 56px; height: auto; }
.entry-body .chara-say-text {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 13px 16px;
  background: #fff7e6;
  border: 2px solid var(--c-black);
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
}
/* 吹き出しの三角。枠線ぶんだけずらした2枚を重ねて、線の付いた三角にしている */
.chara-say-text::before,
.chara-say-text::after {
  content: '';
  position: absolute;
  top: 18px;
  border: 9px solid transparent;
}
.chara-say-text::before { left: -20px; border-right-color: var(--c-black); }
.chara-say-text::after { left: -17px; border-right-color: #fff7e6; }
/* 投稿の中の、翌日に読み解かれた言葉。答え合わせが出るまで印は付かない */
.hint-mark {
  background: #ffef9e;
  padding: 0 2px;
  border-bottom: 2px solid #e8c000;
  color: inherit;
}
/* 台番と平均差枚は数字の並びなので、機種名と字面で区別が付くようにする */
.machine-list .seat-no {
  display: inline-block;
  min-width: 5.5em;
  color: #8f0000;
  font-weight: bold;
}
.machine-list .avg-diff { color: #c0392b; font-size: 15px; }
.account-list { word-break: break-all; }
.account-list a { color: var(--c-link); }

/* 考察の「狙い目：特定日」の記事本文。模倣元は大きめの文字で、
   ✅の見出しと🎯の箇条書きを段落ごと繰り返すだけの作りになっている（2026-08-27実測） */
.guide-item {
  font-size: 18px;
  line-height: 2.1;
  margin: 0 0 22px;
}
.guide-item strong { font-size: 19px; color: #14406e; }
.entry-footer { border-top: 1px solid #eee; padding-top: 10px; margin-top: 20px; font-size: 13px; color: #777; }
.entry-footer a { color: var(--c-link); }

/* 画面が狭くなった時に1カラムへ切り替える幅。
   ⚠️ 2026-08-26まで600pxにしていたため、601〜991pxでは横に並んだままで、
     右の帯（280px固定）に押されて本文側が242pxまで痩せ、見出しが1文字ずつ縦に折り返されていた
     （幅601pxで一覧ページが縦60000px超）。
     模倣元を同じ幅で実測すると、991px以下で右の帯が下に回り、同時にメニューも三本線に畳まれる。
     幅ごとの本文の広さも模倣元は510px以上を保っており、痩せていくのはこちらだけだった */
@media (max-width: 991px) {
  .site-body { flex-direction: column; }
  /* 縦積みにすると flex:1 は幅に効かず中身の最大幅まで広がるため、明示的に100%を指定する */
  .main-section { width: 100%; }
  .sub-section { width: 100%; }

  /* メニューは三本線を押すまで畳んでおく。開いていない間はタイトルだけの1行になる */
  .global-nav { display: none; margin-top: 14px; }
  .nav-toggle:checked ~ .global-nav { display: block; }
  .nav-toggle-btn {
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    padding: 8px 5px;
    cursor: pointer;
  }
  .nav-toggle-btn span { display: block; height: 2px; background: #333; border-radius: 2px; }
  .nav-toggle-btn span + span { margin-top: 6px; }
  /* 模倣元はスマホ幅でも枠の内側を左右15pxのままにしている（実測 2026-09-02）。
     三本線は右上に浮いていてタイトルの右端（約277px）とは重ならないので余白は広げない */
  /* ⚠️ 下の7pxは枠側の padding で持たせる。タイトル側の margin にすると親に吸収されて消える */
  .site-header > .container { padding: 0 15px 7px; }
  /* 模倣元のスマホ版ヘッダー実測（2026-09-02）: タイトル21px・行の高さ29.4px・
     上に7pxの空き・下に7pxの空き ＝ ヘッダー全体で43.41px */
  .site-title { font-size: 21px; line-height: 1.4; padding: 7px 0 0; margin: 0; }

  .global-nav-list { flex-direction: column; }
  /* 縦積みでは等幅にする必要がないうえ、flex:1 だと高さが引き伸ばされる */
  .global-nav-list > li { flex: none; border-right: none; border-left: none; border-bottom: 1px solid #eee; }
  /* 畳んだメニューでは:hoverが使えないので、下の階層は最初から開いておく。
     ⚠️ 背景を明るくしないこと。文字は白のままなので、白地に白文字で読めなくなる
     （2026-09-07 代表「ここも白くなってるの変」）。段差は #333 と字下げで付ける */
  .global-nav-list .sub-menu { position: static; border: none; display: block; background: #333; }
  .global-nav-list .sub-menu a { padding-left: 32px; }

  /* 幅が狭まると見出し・説明文が何行にも伸びて1件が縦に膨らむため、ここでも2行で打ち切る。
     模倣元はこの幅帯でも1件186〜247pxに収まっている */
  .vk_post_imgOuter { align-self: flex-start; }
  .vk_post_title, .vk_post_excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* スマホ幅 375px 対応 */
@media (max-width: 600px) {
  /* 記事一覧はスマホでも「小さい写真を左、文字を右」の横並びのまま。
     ⚠️ 2026-08-26: 以前は縦積みにして写真を全幅（約343×193）に伸ばしていたが、
       模倣元の同じページをスマホ幅で実測すると横並びのままで、写真は119×66と小さい。
       縦積みだと1件あたりの高さが3倍近くになり、一覧が延々とスクロールする作りになっていた */
  /* 帯はスマホでは低くする。模倣元の実測値（2026-09-02）: 高さ84px・見出し28px */
  .page-header { height: 84px; }
  .page-header-title { font-size: 28px; }
  .archive-header { margin-bottom: 28px; }
  .archive-header-title { font-size: 28px; }

  .vk_post { gap: 10px; padding: 12px 0; }
  .vk_post_imgOuter { width: 119px; padding-bottom: 10px; }
  .vk_post_imgOuter img { height: 66px; }
  /* ⚠️ ラベルは模倣元だとスマホでも小さくならない（PCと同じ70×29px）ので、ここでは指定しない */
  /* 画像が本文の高さに合わせて縦に伸びないよう上端で止める */
  .vk_post_imgOuter { align-self: flex-start; }
  /* 見出しと抜粋は2行で打ち切る。模倣元も見出し2行・抜粋2行で揃っており、
     全文を出すと1件あたり323px（模倣元182px）まで膨らんでいた */
  .vk_post_title {
    font-size: 14px; margin-bottom: 0; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .vk_post_date { margin-top: 5.6px; }
  .vk_post_excerpt {
    font-size: 12px; margin: 6px 0 0; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .vk_post_body { padding-bottom: 53px; }
  .vk_post_btnOuter .btn-primary { font-size: 12px; padding: 5px 16px; }
  .guide-item { font-size: 16px; line-height: 2; }
  .guide-item strong { font-size: 17px; }
  /* フッターは模倣元をスマホ幅（375px）で実測した形に合わせる（2026-09-02）:
     リンクは縦に積んで1行37px・左揃え・縦の区切り線は消える。余白も少し詰まる */
  .footer-nav { padding: 0; }
  .footer-nav-list { text-align: left; }
  .footer-nav-list li { display: block; padding: 0; border-left: none; }
  .footer-nav-list li:last-child { border-right: none; }
  /* ⚠️ 本文の行間（1.85）を引き継ぐと1行が41pxに伸びる。模倣元は文字の大きさぶんちょうど（実測 2026-09-02） */
  .footer-nav-list a { display: block; padding: 12px 0; line-height: 1; }
  .site-footer-content { padding: 42px 15px 0; }
  .site-footer-copyright { padding: 14px; }
  /* 模倣元はスマホでだけ著作権表示を小さくして1行に収めている（実測 2026-09-02: 10.5px） */
  .site-footer-copyright p { margin: 7px; font-size: 10.5px; }
}

/* 「記事がありません」等の1行だけの案内。左に置くと余白が広く見えるので中央 */
.no-post {
  margin: 0;
  padding: 20px 0;
  line-height: 1.9;
  text-align: center;
}

/* ===== スケジュール（schedule.html / トップのスケジュール欄で共用） =====
   もとは schedule.html のインラインstyleにあったが、トップページでも使うためここへ移した */
.schedule-lead { margin: 0 0 16px; line-height: 1.9; }
/* 模倣元の一覧ページを実測して合わせている:
     ・1行に枠線も背景色も無い（区切りは余白だけ）
     ・左の日付は幅88px。小さい曜日の下に大きい日にち。色は曜日 #5D5D5D／日にち #141827
     ・タイトルは太字で、うっすら灰色(rgba(0,0,0,.06))の帯が敷かれる
     ・右端に横長の写真（向こうは全イベント同じ有料素材。こちらは記事サムネイルと同じ生成画像）
     ・月が変わる所に「8月 2026」の区切り行
   ⚠️ 2026-08-26: 以前は左に幅228pxの緑(#99D6B6)のタグを敷いていたが、模倣元の同ページには
     緑が1か所も使われていない（ページ内の背景色を全て走査して確認）。こちらが独自に足した
     ものであり、これが「北綾瀬と違って見える」の主因だった。
   ※模倣元は横幅いっぱい（本文1224px）だが、こちらは右にサイドバーがある（本文756px）ため、
     写真だけは同じ横長比のまま240pxに縮めている
   ※ タイトル・日付・内容は <p> なので、本文の段落指定（.entry-body p）に負けないよう
     親クラスを頭に付けて指定を強くしている（付け忘れると文字サイズだけ効かない） */
.schedule-list { }
.schedule-list .schedule-month { margin: 26px 0 4px; font-size: 17px; color: #141827; }
.schedule-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
}
.schedule-date {
  width: 88px;
  flex-shrink: 0;
  text-align: center;
}
.schedule-date-week { display: block; font-size: 12px; color: #5d5d5d; line-height: 1.4; }
.schedule-date-day { display: block; font-size: 26px; font-weight: 700; color: #141827; line-height: 1.2; }
.schedule-body { flex: 1; min-width: 0; }
.schedule-item .schedule-title {
  margin: 0 0 6px;
  padding: 2px 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  background: rgba(0,0,0,.06);
}
.schedule-item .schedule-desc { margin: 6px 0 0; font-size: 15px; color: #5d5d5d; line-height: 1.8; }
.schedule-desc a { color: #5d5d5d; }
/* 模倣元と同じくタイトルを押すとその日の詳細ページへ飛ぶ。
   リンクの既定色（青）だと帯から浮くので、本文と同じ黒に戻している */
.schedule-title a { color: #141827; }
.schedule-thumb { flex-shrink: 0; width: 240px; }
.schedule-thumb img { display: block; width: 100%; height: 135px; object-fit: cover; }
/* 一覧の下にある「前のイベント／次のイベント」。模倣元と同じ位置・同じ役割で、
   今日以降の一覧（schedule.html）と終了分の一覧（schedule-past.html）を行き来する */
.schedule-nav { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #e5e5e5; }
.schedule-nav a { font-size: 15px; color: var(--c-link); text-decoration: none; }
.schedule-nav a:hover { text-decoration: underline; }

/* ===== イベント詳細ページ（event-YYYY-MM-DD.html） =====
   模倣元は「« イベント一覧 → タイトル → 表紙画像 → 内容 → 前後のイベント」の順 */
.event-back { margin: 0 0 12px; font-size: 16px; }
.event-cover { margin: 0 0 20px; }
.event-cover img { display: block; width: 100%; height: auto; border-radius: 4px; }
.event-items { margin: 0 0 24px; padding: 0; list-style: none; }
.event-items li {
  position: relative;
  padding: 12px 12px 12px 40px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 19px;
  line-height: 1.7;
}
/* 取得元の本文は「✅」で項目が区切られている。その✅を印としてそのまま出す */
.event-items li::before {
  content: "✅";
  position: absolute;
  left: 10px;
  top: 12px;
}
.event-meta { margin: 0 0 24px; font-size: 16px; color: #555; }
.event-meta dt { font-weight: bold; color: #00445e; margin-bottom: 4px; }
.event-meta dd { margin: 0 0 4px; }
.event-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e6e6e6;
  padding-top: 16px;
}
.event-nav-item { flex: 1; font-size: 15px; line-height: 1.6; }
.event-nav-next { text-align: right; }

/* ===== トップページ専用 =====
   模倣元のトップは固定ページで、下層ページと違いサイドバーもパンくずも無く、
   帯（セクション）が全幅で縦に積まれる構成。そのため .site-body（flex+1140px）は使わず
   .home-section / .home-inner の組で全幅の帯を作っている */
/* ロゴ・バナー・テキストリンクまでが1枚の帯に乗る構成なので padding を厚めに取っている。
   ⚠️ 2026-09-02: ここは北綾瀬と同じ「青い光が放射状に伸びる写真」（assets/hero-bg.jpg）を
      敷いていたが、案Cへの切り替えで赤黒の下地に変えた。写真は残してあるので、
      戻したくなったら background の1行を元に戻すだけでよい */
.home-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 50% 30%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #1c1c1c 0%, #7a0000 55%, #3a0000 100%);
  text-align: center;
  padding: 52px 16px 46px;
}
.home-hero > * { position: relative; }
.home-hero-inner { max-width: 1100px; margin: 0 auto; }
.home-hero-logo {
  margin: 0 0 10px;
}
/* 模倣元はここに縁取り文字の画像を置いている（実測 600×133） */
.home-hero-logo-img {
  display: block;
  width: 600px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
/* ⚠️ ロゴの下にあったサイト説明の一行（.home-hero-sub）は
   2026-08-27 に竹澤さん指示で項目ごと削除。復活させないこと */

/* 模倣元はカバーの下に横並びのリンクを置いている。
   実測（2026-08-31）: 各341×57 / 背景 rgb(51,153,255) のベタ塗り / 角丸4px /
   白文字20px / 左に内容を表すアイコン / 右に丸い矢印。
   ⚠️ 一度これを1本に減らしたが誤りだったので横並びに戻している。
   ヒートマップはこちらにしかない機能なので4本目として足した（2026-08-31 竹澤さん指摘）。
   ⚠️ 白地に文字だけの箱に戻さないこと。模倣元と違ううえ、上のバナー4枚に対して弱すぎる */
.home-textlink-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.home-textlink-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 57px;
  padding: 10px 12px;
  /* 案C: 青のベタ塗りから、黒地＋赤の枠に変更 */
  background: var(--c-black);
  border: 2px solid var(--c-red);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: background .18s ease, transform .18s ease;
}
.home-textlink-txt { flex: 1; text-align: center; white-space: nowrap; }
.home-textlink-icon { width: 22px; height: 22px; flex: none; }
/* 右の丸矢印は模倣元と同じく飾り。文字より一段細く見せる */
.home-textlink-arrow { width: 20px; height: 20px; flex: none; opacity: .85; }
.home-textlink-list a:hover {
  background: var(--c-red);
  text-decoration: none;
  transform: translateY(-2px);
}

/* 模倣元は帯より下の全面に、ドル箱にパチンコ玉が詰まって奥まで積み上がった写真を
   固定で敷いている。同じ絵を scripts/build_images.js で描いて敷いている
   （assets/home-bg.jpg）。実写素材を買ったら、この1枚を差し替えるだけでよい。
   ⚠️ 写真の上には白い本文枠が乗っていて、写真が見えるのは左右の余白だけ（実測 2026-08-27:
     写真 1280×3664 / 白枠 1110×3632・left=85）。写真を全面に透けさせると記事タイトルが読めない */
/* ⚠️ 2026-09-02: ここは北綾瀬と同じく「ドル箱にパチンコ玉が積まれた写真」（assets/home-bg.jpg）を
   全面に固定で敷いていたが、案Cへの切り替えで薄いグレーの無地にした。
   写真は残してあるので、戻したくなったら background の1行を元に戻すだけでよい */
.home-bg {
  background: #efefef;
  padding: 16px 0;
}
.home-bg-inner {
  max-width: 1110px;
  margin: 0 auto;
  background: #fff;
}

.home-section { padding: 36px 16px; }
/* 模倣元は白枠の中でMOVIEの帯だけ薄いグレーにしている（実測 1070×980・rgb(243,244,245)） */
.home-section--gray { background: #f3f4f5; margin: 0 20px; }
.home-inner { max-width: 1100px; margin: 0 auto; }
/* 帯の見出し。模倣元実測（2026-09-02）: PC 24px 黒・中央（枠の高さ50px）／スマホ 21px（同44px）。
   行の高さは文字の1.4倍、見出しの下に文字0.7個ぶんの余白、その下に文字1個ぶんの間隔。
   文字の大きさに対する倍率で書いてあるので、スマホ側は font-size だけ変えれば同じ比率になる */
/* 案C: 中央揃えの黒文字から、黒地に白文字＋左に赤の縦線へ。
   帯の左右いっぱいまで伸ばしたいので、外側の余白（16px）ぶんを打ち消している */
.home-section-title {
  margin: 0 0 1em;
  padding: 8px 16px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
  background: var(--c-black);
  color: #fff;
  border-left: 8px solid var(--c-red);
}

/* 模倣元のバナーは 1079×404 の画像4枚を col-6（2列）で並べたもの。
   こちらも同じ寸法の画像を scripts/build_images.js で作って同じ並べ方にしている */
/* 実測（2026-09-02・幅1280）: 模倣元は4枚の並ぶ枠が1070px・1枚520×195・横のすき間30px・縦16px。
   こちらのロゴの枠（1100px）のままだと1枚541pxになって模倣元より一回り大きかったので、
   この並びだけ1070pxに揃えている */
.home-banner-list {
  list-style: none;
  max-width: 1070px;
  margin: 0 auto 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 30px;
}
.home-banner-list a {
  display: block;
  transition: transform .18s ease;
}
.home-banner-list img {
  display: block;
  width: 100%;
  height: auto;
}
.home-banner-list a:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

/* トップの新着情報カード。模倣元を実ブラウザで測った値に合わせている（2026-09-02）。
   模倣元: 3列・すき間30px・写真は横縦=300:167・見出し14px 黒・行の高さ1.4 */
.home-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* 案C: 1枚ずつ灰色の枠で囲む。並び方（3列・すき間30px・写真の比率）は模倣元の実測値のまま */
.home-card { border: 2px solid #ddd; background: #fff; }
.home-card-img { position: relative; display: block; line-height: 0; }
.home-card-img img { width: 100%; aspect-ratio: 300 / 167; object-fit: cover; display: block; background: #ddd; }
/* ラベル（.home-card-term）の見た目は一覧カードと同じ指定にまとめてある（このファイル上部の
   .vk_post_imgOuter_singleTermLabel の項）。分類ごとの色だけこのファイル下部の .term-* で付ける */
/* 案C: 見出しは枠の内側に入れる（写真のすぐ下・左右に少し余白） */
.home-card-title { margin: 0; padding: 8px 9px 10px; font-size: 13px; line-height: 1.5; font-weight: 700; color: #222; }
.home-card-title a { color: #222; }
.home-card-title a:hover { color: var(--c-red); text-decoration: none; }
/* 案C: 「新着!!」は赤い小さな札にする */
.home-card-new {
  display: inline-block;
  color: #fff;
  background: var(--c-red);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ===== 分類ごとのラベル色（トップの新着情報カード・一覧ページのカード共通） =====
   模倣元のラベル色をそのまま使う（実測: 4のつく日=#81D742／8のつく日=#DD9933／
   考察=#00A29A／デイリー（特定日）=#1E73BE）。草加の4分類を同じ並びで当てている。
   ⚠️ 模倣元はバナー画像の色とラベルの色をわざと少しずらしている（バナーは #6FB92C 系の落ち着いた色、
     ラベルは #81D742 の明るい色）。以前こちらはラベルをバナー色に揃えてしまっていたが、
     それは模倣元と違う独自の作りだったので模倣元の値に戻した（2026-09-02）。
   ⚠️ 上の .home-card-term / .vk_post_imgOuter_singleTermLabel と同じ強さの指定なので、
     必ずそれらより後ろに置くこと（前に置くと色が上書きされない） */
/* 2026-09-28 特定日を4分類に変更。ゾロ目は旧「11日」の緑を継承 */
.term-zorome { background-color: #81d742; }
.term-1nichi { background-color: #dd9933; }
.term-5tsuku { background-color: #8224e3; }
.term-28nichi { background-color: #e0538f; }
.term-kousatsu { background-color: #00a29a; }
.term-daily { background-color: #1e73be; }

.home-more { text-align: center; margin-top: 24px; }
.home-empty { margin: 0; text-align: center; color: #666; line-height: 1.9; }

/* ===== トップ一番上の入口（AI予想 / 次の特定日）と分類4つの入口 =====
   2026-09-03。新着情報だけに目が行ってしまうという指摘を受けて、記事一覧より前に置いた。
   ⚠️ 消すとAI予想と特定日への入口が上のメニューだけになる */
.home-lead { display: flex; gap: 16px; align-items: stretch; }
.home-lead > * { flex: 1; min-width: 0; }

.home-lead-ai {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);
  border: 3px solid #222; color: #fff;
}
.home-lead-ai:hover { filter: brightness(1.12); color: #fff; }
.home-lead-chara { width: 84px; height: auto; flex: none; }
.home-lead-ai-txt { display: block; }
.home-lead-label {
  display: block; font-size: 12px; line-height: 1.7;
  letter-spacing: .04em; opacity: .9;
}
.home-lead-title { display: block; font-size: 26px; line-height: 1.4; font-weight: 700; }

.home-lead-day {
  display: block; padding: 14px 18px;
  background: var(--c-black); border: 3px solid #222; color: #fff;
}
.home-lead-day:hover { background: #000; color: #fff; }
.home-lead-date {
  display: block; font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--c-yellow);
}
.home-lead-date span { font-size: 17px; margin-left: 4px; }
.home-lead-day-title {
  display: block; margin-top: 4px; font-size: 14px; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== トップに出すAI予想の実績 =====
   2026-09-07。手本にしているボートレースのデータサイトを見ながら大森さんが言った
   「上にも AI 予想実績があるもんね」から。初めて来た人が最初に見る場所に数字が無いと、
   当たっているのかどうかを判断できないため、入口2つの直下に置いた。
   ⚠️ 数字の出どころは実績ページと同じ（build_verify.js）。ここだけ別計算にしないこと */
.home-jisseki {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 12px 18px;
  background: #fff; border: 3px solid #222; color: #222;
}
.home-jisseki:hover { border-color: var(--c-red); color: #222; }
.home-jisseki-head { flex: none; }
.home-jisseki-tag {
  display: inline-block; padding: 3px 10px;
  background: var(--c-black); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .04em;
}
.home-jisseki:hover .home-jisseki-tag { background: var(--c-red); }
.home-jisseki-lead { display: block; margin-top: 5px; font-size: 12px; color: #666; line-height: 1.5; }
.home-jisseki-nums { display: flex; gap: 22px; flex: 1; min-width: 0; }
/* 3つを残り幅に等分する。左に寄せると右側が空いて数字が目立たない */
.home-jisseki-num { flex: 1; min-width: 0; line-height: 1.25; }
.home-jisseki-num b { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-jisseki-num em { font-style: normal; font-size: 14px; margin-left: 1px; }
.home-jisseki-num.is-main b, .home-jisseki-num.is-main em { color: var(--c-red); }
.home-jisseki-num i {
  display: block; font-style: normal; font-size: 11px; color: #666; line-height: 1.5;
}
.home-jisseki-more { flex: none; font-size: 13px; font-weight: 700; color: var(--c-red); }

@media (max-width: 700px) {
  .home-jisseki { gap: 10px; padding: 12px 14px; }
  .home-jisseki-head { width: 100%; }
  .home-jisseki-lead { display: inline; margin-left: 8px; }
  /* 3つを画面いっぱいに割り付ける。数字は小さくするが、下の説明は折り返して残す */
  .home-jisseki-nums { width: 100%; gap: 8px; }
  .home-jisseki-num b { font-size: 22px; }
  .home-jisseki-more { width: 100%; text-align: right; }
}

/* 見出しの横にキャラを1体だけ添える行。今は新着情報にだけ使っている */
.home-title-row { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 1em; }
.home-title-row .home-section-title { flex: 1; min-width: 0; margin-bottom: 0; }
.home-title-chara { flex: none; width: auto; height: 52px; }

.home-cat-list {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; gap: 12px;
}
.home-cat { flex: 1; min-width: 0; }
.home-cat a {
  display: block; padding: 10px 4px 12px; text-align: center;
  background: #fff; border: 2px solid #ddd; border-top-width: 6px; color: #222;
}
.home-cat a:hover { border-color: var(--c-red); color: var(--c-red); }
.home-cat img { display: block; width: auto; height: 64px; margin: 0 auto 6px; }
.home-cat span { font-size: 15px; font-weight: 700; line-height: 1.5; }
/* 上の太い線だけ分類の色にする（記事カードの写真に出しているラベルと同じ色） */
.home-cat.cat-zorome a { border-top-color: #81d742; }
.home-cat.cat-1nichi a { border-top-color: #dd9933; }
.home-cat.cat-5tsuku a { border-top-color: #8224e3; }
.home-cat.cat-28nichi a { border-top-color: #e0538f; }
.home-cat.cat-daily a { border-top-color: #1e73be; }
.home-cat.cat-kousatsu a { border-top-color: #00a29a; }

@media (max-width: 700px) {
  .home-lead { display: block; }
  .home-lead > * + * { margin-top: 12px; }
  .home-cat-list { flex-wrap: wrap; gap: 10px; }
  .home-cat { flex: 0 0 calc(50% - 5px); }
  .home-cat img { height: 54px; }
}

/* ===== ここから案C（王道の攻略サイト）でトップに入れた並べ方 =====
   2026-09-02。動画とスケジュールを縦に積むのをやめ、左右に並べて1画面に入る情報を増やした。
   攻略サイトでよく見る「順位の付いた一覧」と「日付の表」の形。⚠️ 縦積みに戻さないこと */
.home-two {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.home-two > * { flex: 1; min-width: 0; }

/* 動画リンク。赤い丸数字を振って順位表のように見せる */
.home-rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.home-rank li {
  counter-increment: rank;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid #eee;
}
.home-rank li::before {
  content: counter(rank);
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--c-red);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  font-weight: 700;
}
/* 動画の小さい写真。YouTubeの写真は16:9で届くので、その比率のまま置いている */
.home-rank-thumb { flex: none; display: block; width: 104px; }
.home-rank-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #eee; }
.home-rank-title { font-size: 14px; line-height: 1.6; color: #222; }
.home-rank-title:hover { color: var(--c-red); }
.home-rank-meta { display: block; font-size: 11px; color: #888; line-height: 1.6; }

/* スケジュール。日付だけ左のグレーの列に固めて、目で追いやすくする */
.home-sched { width: 100%; border-collapse: collapse; font-size: 14px; }
.home-sched td { border-bottom: 1px solid #eee; padding: 8px 6px; vertical-align: top; }
.home-sched .home-sched-day {
  width: 74px;
  background: #f7f7f7;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1.5;
}
.home-sched .home-sched-week { font-size: 11px; color: #888; font-weight: 400; }
.home-sched-title { color: #222; font-weight: 700; line-height: 1.6; }
.home-sched-title:hover { color: var(--c-red); }
.home-sched-when { display: block; font-size: 11px; color: #888; line-height: 1.6; }

@media (max-width: 700px) {
  .home-two { display: block; }
  .home-two > * + * { margin-top: 28px; }
}

@media (max-width: 900px) {
  .home-card-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* 模倣元は col-6（常に2列）。狭い画面でも2列のまま隙間だけ詰める */
  /* スマホの模倣元実測（幅375）: 1枚164×61・横のすき間11px・縦14px */
  .home-banner-list { gap: 14px 11px; margin-bottom: 18px; }

  /* トップの帯。模倣元をスマホ幅で実測すると見出し21px・帯の余白も狭い。
     こちらは見出し25px・上下36pxのままだったので、1画面に入る情報が半分しかなかった */
  /* 左右の余白18pxは模倣元の実測値（幅375のとき中身が339px＝両側18pxずつ。2026-09-02） */
  .home-section { padding: 24px 18px; }
  /* 下の余白は文字の大きさに連動して決まるので、ここでは大きさだけ変える */
  .home-section-title { font-size: 21px; }
  /* 左右25pxは模倣元の実測値（幅375のときリンクの帯が325px＝両側25pxずつ。2026-09-02） */
  .home-hero { padding: 26px 25px 24px; }
  /* 模倣元はスマホでも横に並べず縦1列（実測 2026-09-02: 325×50・文字17.5px）。
     ⚠️ 以前「1列だとスケジュールが入りきらない」として2列にしていたが、
       1列にすれば1本あたりの幅は画面いっぱい（325px）取れるので入りきる。誤った直し方だった */
  .home-textlink-list { grid-template-columns: 1fr; gap: 8px; }
  .home-textlink-list a { padding: 9px 12px; gap: 6px; font-size: 17.5px; min-height: 50px; }
  .home-textlink-icon { width: 20px; height: 20px; }
  .home-textlink-arrow { width: 18px; height: 18px; }

  /* スマホのブラウザ（特にiPhone）は固定背景の扱いが不安定で、
     指定したままだと画像が引き伸ばされて何が写っているか分からなくなる。
     狭い画面では固定をやめて、普通に流れる背景にする */
  .home-bg { background-attachment: scroll; background-size: 200% auto; }

  /* 新着情報は模倣元と同じく2列。
     ⚠️ 2026-08-26: 1列にしていたため12枚で高さ2747px（模倣元は2列6枚で579px）になり、
       トップを開くと新着情報だけでスクロールが終わらない状態だった。
       模倣元の実測値は 1枚あたり幅170px・写真171×64・見出し14px */
  /* 模倣元実測（2026-09-02・幅375px）: 1枚163×158・写真161×89・すき間14px・見出し14px。
     写真の高さは横縦300:167の指定でPCと同じ比率のまま自動で決まるので、ここでは指定しない。
     ラベルもスマホで小さくはならない（PCと同じ64×29px）ので指定しない */
  .home-card-list { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .home-card-title { font-size: 14px; line-height: 1.4; margin-top: 6px; }
  .home-more { margin-top: 18px; }

  /* ⚠️ 動画リンクのスマホ用指定はここに書かないこと。
     .movie-* の基本指定はこのファイルのもっと下にあり、同じ強さの指定は後ろが勝つため
     ここに書くと効かない。動画用の指定はファイル末尾の767pxの枠にまとめてある */

  /* 模倣元のスマホ表示は「左に細い日付／右に写真、その下に見出し」の2段組み。
     ⚠️ 2026-08-26: 以前は横並びのまま写真を消していたが、模倣元は写真を大きく出している。
     並び順は date → thumb → body。HTMLの順（date → body → thumb）とは違うのでorderで入れ替える */
  .schedule-item { gap: 12px; flex-wrap: wrap; align-items: flex-start; }
  .schedule-date { width: 34px; }
  .schedule-date-week { font-size: 11px; }
  .schedule-date-day { font-size: 20px; }
  .schedule-thumb { order: 1; width: calc(100% - 46px); }
  .schedule-thumb img { height: auto; aspect-ratio: 16/9; }
  /* 日付の幅(34px)+すき間(12px)ぶん内側に寄せて、写真と左端を揃える */
  .schedule-body { order: 2; flex: none; width: calc(100% - 46px); margin-left: 46px; }
  .schedule-item .schedule-title { font-size: 17px; }
  /* トップに載せている直近5件は写真そのものを出していない（模倣元がPC・スマホとも写真なしのため。
     実測 2026-09-02。写真を出すかどうかはHTMLを作る側で切り替えている）。
     一覧ページ（schedule.html）は模倣元と同じく写真を大きく出したままにする */
  .home-inner .schedule-body { order: 0; flex: 1; width: auto; margin-left: 0; }
  .home-inner .schedule-item { flex-wrap: nowrap; align-items: center; }
  .home-inner .schedule-item .schedule-title { font-size: 15px; }
  .event-nav { flex-direction: column; }
  .event-nav-next { text-align: left; }
}

/* 記事末尾の前後ナビ（模倣元と同じくサムネイル付き） */
.post-nav { display: flex; gap: 12px; margin: 20px 0 10px; }
.post-nav-item { flex: 1; display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid #e5e5e5; background: #fff; text-decoration: none; }
.post-nav-item img { width: 56px; height: 56px; object-fit: cover; background: #ddd; flex: none; }
.post-nav-next { flex-direction: row-reverse; text-align: right; }
.post-nav-label { display: block; font-size: 12px; color: #999; }
.post-nav-title { display: block; font-size: 14px; line-height: 1.5; color: #333; }

/* 動画リンク一覧（模倣元と同じサムネイル付きリンク形式） */
/* 分類の切替タブ。押すとその分類だけのページ（movie-*.html）へ移動する */
.movie-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.movie-tab {
  font: inherit; font-size: 14px; line-height: 1.4;
  display: inline-block; padding: 7px 14px; cursor: pointer; text-decoration: none;
  border: 1px solid #d6dbe1; background: #fff; color: #4d545c;
}
.movie-tab:hover { background: #f5f8fc; }
.movie-tab.is-active { background: var(--c-red); border-color: var(--c-red); color: #fff; font-weight: 700; }
.movie-tab-count { font-size: 12px; padding-left: 5px; opacity: .75; font-variant-numeric: tabular-nums; }

.movie-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.movie-card { display: flex; gap: 10px; padding: 10px; border: 1px solid #e5e5e5; background: #fff; text-decoration: none; }
.movie-card:hover { background: #fafcff; }
.movie-card-thumbOuter { position: relative; flex: none; line-height: 0; }
/* サムネの上に分類ラベルを重ねる（模倣元も1本ごとに分類が出ている） */
.movie-card-label {
  position: absolute; left: 0; bottom: 0;
  font-size: 11px; line-height: 1; padding: 3px 5px;
  color: #fff; background: rgba(51, 51, 51, .82); white-space: nowrap;
}
.movie-card-label--piarc { background: rgba(230, 126, 34, .9); }
.movie-card-label--live { background: rgba(214, 48, 49, .88); }
.movie-card-label--matome { background: rgba(51, 153, 255, .9); }
.movie-card-label--short { background: rgba(108, 92, 231, .88); }
.movie-card-thumb { width: 120px; height: 68px; object-fit: cover; background: #ddd; flex: none; }
.movie-card-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.movie-card-title { font-size: 15px; line-height: 1.5; color: #333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.movie-card-meta { font-size: 13px; color: #8a8f98; padding-top: 4px; }
@media screen and (max-width: 767px) {
  .movie-list { grid-template-columns: 1fr; gap: 10px; }
}
/* スマホ幅での動画リンクの詰め方。上の600pxの枠ではなくここに置いている理由は
   その枠のコメントの通り（.movie-* の基本指定がこれより前にあるため） */
@media screen and (max-width: 600px) {
  .movie-card { padding: 8px; gap: 8px; align-items: center; }
  .movie-card-thumb { width: 104px; height: 59px; }
  .movie-card-title { font-size: 13px; -webkit-line-clamp: 2; }
  .movie-card-meta { font-size: 11px; }
  .movie-card-label { font-size: 10px; }
  .movie-tab { font-size: 13px; padding: 6px 11px; }
  .movie-tab-count { font-size: 11px; }
}