/* ==========================================================================
   バイクまとめ — Theme Portal supplement
   方針:
     既存 theme-clean.css の上に乗せる「ポータル系まとめサイト」追加モジュール。
     - タブ式特集エリア（新着 / ランキング / 新型 / インプレ）
     - ジャンルから探す 横並びストリップ
     - 編集部コラム / 試乗インプレ ブロック
     - 新型リリースカレンダー
   ベース変数（--c-blue-600 等）は theme-clean.css のものを再利用するが、
   下記 0節 で色味をバイク雑誌系（黒chrome + 赤アクセント）に上書きする。
   ========================================================================== */

/* ==========================================================================
   0. Palette override — 落ち着いたエディトリアル・ポータル系
   方針:
     - chrome は純黒ではなく深いダーク・スレート（目に優しい）
     - アクセントは鮮やかな赤ではなく、抑えた朱赤 / バーガンディ
     - 背景は冷たい白でなく、紙寄りの暖白（長時間滞在に優しい）
     - シャドウとボーダーは最小限、ホバーで動かさない
     - 余白を広げ、行間を伸ばして読みやすく
   ========================================================================== */
:root {
  /* Chrome — チャコールグレー 寄り */
  --c-navy-900: #14171c;
  --c-navy-800: #1f242b;
  --c-navy-700: #353a44;

  /* Primary accent — 骨のあるマガジンレッド */
  --c-blue-600: #c2252b;
  --c-blue-500: #db343a;
  --c-blue-100: #f4dcdd;
  --c-blue-50:  #fbebec;

  /* Neutrals — ベージュだがもう一段衰弱 */
  --c-ink:      #15181d;
  --c-ink-2:    #45494f;
  --c-ink-3:    #7c8088;
  --c-line:     #e0ddd2;
  --c-line-2:   #ecead8;
  --c-bg:       #f1ede2;
  --c-bg-2:     #f8f6ed;
  --c-card:     #ffffff;

  --c-alert:    #a82626;
  --c-warn:     #b07021;
}

/* Body */
body.theme-clean { background: var(--c-bg); color: var(--c-ink); }

/* ---------- Header — 黒地 + 下辺赤ライン + ロゴに赤バー ---------- */
.theme-clean .site-header {
  background: var(--c-navy-900) !important;
  border-top: 0 !important;
  border-bottom: 3px solid var(--c-blue-600) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
.theme-clean .site-header__top { padding: 22px 16px 18px !important; }
.theme-clean .site-logo,
.theme-clean .site-logo:hover {
  color: #fff !important;
  letter-spacing: 0.06em !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
.theme-clean .site-logo::before {
  content: "" !important;
  display: inline-block !important;
  width: 4px;
  height: 0.85em;
  background: var(--c-blue-600);
}

.theme-clean .search-box {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 3px !important;
  height: 40px;
}
.theme-clean .search-box:focus-within {
  border-color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.10) !important;
}
.theme-clean .search-box input {
  color: #fff;
  background: transparent;
  font-size: 13.5px;
}
.theme-clean .search-box input::placeholder { color: rgba(255,255,255,0.45); }
.theme-clean .search-box button {
  color: rgba(255,255,255,0.7) !important;
  border-left-color: rgba(255,255,255,0.12) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.16em !important;
}
.theme-clean .search-box button:hover { color: #fff !important; }
.theme-clean .menu-toggle span { background: #fff !important; }

/* ---------- Global nav — 黒地、太めのアンダーライン ---------- */
.theme-clean .global-nav {
  background: var(--c-navy-800) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.theme-clean .global-nav__inner { gap: 0 !important; }
.theme-clean .global-nav a {
  color: rgba(255,255,255,0.78) !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.08em !important;
  padding: 14px 18px !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
}
.theme-clean .global-nav a:hover {
  color: #fff !important;
  border-bottom-color: var(--c-blue-600) !important;
  background: transparent !important;
}
.theme-clean .global-nav a.is-active {
  color: #fff !important;
  border-bottom-color: var(--c-blue-600) !important;
  background: transparent !important;
}

/* ---------- Breaking bar — 黒地に赤ラベル ---------- */
.theme-clean .breaking-bar {
  background: var(--c-navy-800) !important;
  border-bottom: 0 !important;
  color: #fff !important;
}
.theme-clean .breaking-bar__inner { padding: 11px 16px !important; }
.theme-clean .breaking-bar__label {
  background: var(--c-blue-600) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  font-weight: 800 !important;
}
.theme-clean .breaking-bar__label::before {
  display: inline-block !important;
  content: "" !important;
  width: 6px; height: 6px;
  background: #fff !important;
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
.theme-clean .breaking-bar__list a {
  color: rgba(255,255,255,0.92) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.theme-clean .breaking-bar__list a:hover { color: var(--c-blue-500) !important; }
.theme-clean .breaking-bar__time {
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
  border: 0 !important;
  font-size: 11px !important;
  margin-right: 10px !important;
  padding: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ---------- Section heading — 深い黒ライン + 赤のストライプ ---------- */
.theme-clean .section__head {
  border-bottom: 2px solid var(--c-navy-900) !important;
  padding-bottom: 12px !important;
  margin-bottom: 28px !important;
}
.theme-clean .section__head::after {
  width: 120px !important;
  height: 4px !important;
  background: var(--c-blue-600) !important;
  bottom: -3px !important;
}
.theme-clean .section__title {
  font-size: 23px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  font-family: var(--ff-serif) !important;
}
@media (min-width: 720px) { .theme-clean .section__title { font-size: 27px !important; } }
.theme-clean .section__title small {
  color: var(--c-blue-600) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  font-weight: 800 !important;
}
.theme-clean .section__title small::before {
  background: var(--c-blue-600) !important;
  width: 14px !important;
  height: 2px !important;
  opacity: 1 !important;
}
.theme-clean .section__more {
  font-size: 12.5px !important;
  color: var(--c-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  border: 1.5px solid var(--c-ink) !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
.theme-clean .section__more::after { content: " →" !important; }
.theme-clean .section__more:hover {
  background: var(--c-navy-900) !important;
  color: #fff !important;
  border-color: var(--c-navy-900) !important;
}

/* ---------- Hero — ダイナミックなシネマスコープ ---------- */
.theme-clean .ph {
  background: linear-gradient(135deg, #4a4d54 0%, #1a1c20 100%);
}
.theme-clean .ph--alt {
  background: linear-gradient(135deg, #5a5e66 0%, #232529 100%);
}
.theme-clean .hero-main {
  border-radius: 0 !important;
}
.theme-clean .hero-main__cat {
  background: var(--c-blue-600) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.22em !important;
  padding: 5px 12px !important;
  font-weight: 800 !important;
}
.theme-clean .hero-main__title {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.32 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}
@media (min-width: 760px) {
  .theme-clean .hero-main__title { font-size: 40px !important; }
}
@media (min-width: 1100px) {
  .theme-clean .hero-main__title { font-size: 46px !important; }
}
.theme-clean .hero-main__overlay {
  background: linear-gradient(to top,
    rgba(10,12,18,0.98) 0%,
    rgba(10,12,18,0.78) 40%,
    rgba(10,12,18,0.18) 80%,
    rgba(10,12,18,0) 100%) !important;
}
.theme-clean .hero-main__meta { font-size: 13px !important; }

/* hero-sub */
.theme-clean .hero-sub {
  border-radius: 0 !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.theme-clean .hero-sub:hover {
  border-color: var(--c-blue-600) !important;
  box-shadow: 0 6px 18px rgba(20,23,28,0.10) !important;
  transform: none !important;
}
.theme-clean .hero-sub__title { font-weight: 800 !important; }

/* ---------- Cards — シャープな角 + 上辺赤ヘッダー ---------- */
.theme-clean .card-news,
.theme-clean .card-bike {
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  position: relative;
}
.theme-clean .card-news::before,
.theme-clean .card-bike::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 3px !important;
  background: transparent !important;
  transition: background 0.18s ease !important;
  z-index: 3 !important;
  display: block !important;
  pointer-events: none !important;
}
.theme-clean .card-news:hover,
.theme-clean .card-bike:hover {
  border-color: var(--c-ink) !important;
  box-shadow: 0 8px 22px rgba(20,23,28,0.10) !important;
  transform: none !important;
}
.theme-clean .card-news:hover::before,
.theme-clean .card-bike:hover::before {
  background: var(--c-blue-600) !important;
}
.theme-clean .card-news:hover .card-news__image,
.theme-clean .card-bike:hover .card-bike__image {
  transform: none !important;
}
.theme-clean .card-news:hover .card-news__title,
.theme-clean .card-bike:hover .card-bike__name {
  color: var(--c-blue-600) !important;
}
.theme-clean .card-news__body { padding: 20px 18px 18px !important; gap: 14px !important; }
.theme-clean .card-news__title {
  line-height: 1.65 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  -webkit-line-clamp: 3 !important;
}
.theme-clean .card-news__meta {
  border-top-color: var(--c-line-2) !important;
  padding-top: 11px !important;
}
.theme-clean .card-news__meta time { color: var(--c-blue-600) !important; font-weight: 700 !important; }

/* category badges — シャープで骨のあるバッジ */
.theme-clean .card-news__cat {
  background: var(--c-navy-900) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  padding: 4px 10px !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
}
.theme-clean .card-news__cat--official { background: var(--c-blue-600) !important; }
.theme-clean .card-news__cat--global { background: var(--c-navy-700) !important; }
.theme-clean .card-news__cat--feature { background: var(--c-warn) !important; }
.theme-clean .card-news__cat--alert { background: var(--c-alert) !important; }

/* bike card */
.theme-clean .card-bike__badge {
  background: var(--c-blue-600) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  padding: 4px 10px !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
}
.theme-clean .card-bike__maker {
  color: var(--c-blue-600) !important;
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}
.theme-clean .card-bike__name {
  line-height: 1.45 !important;
  font-weight: 800 !important;
  font-family: var(--ff-serif) !important;
  font-size: 15.5px !important;
}
.theme-clean .card-bike__spec,
.theme-clean .card-bike__specs > span {
  background: transparent !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink-2) !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* ---------- Maker / cc nav — シャープな角 ---------- */
.theme-clean .maker-nav a,
.theme-clean .cc-nav a {
  border-radius: 0 !important;
  background: var(--c-card) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.theme-clean .maker-nav a:hover,
.theme-clean .cc-nav a:hover {
  border-color: var(--c-blue-600) !important;
  box-shadow: 0 6px 16px rgba(20,23,28,0.08) !important;
  background: var(--c-card) !important;
}
.theme-clean .maker-nav__logo {
  background: var(--c-navy-900) !important;
  border-radius: 0 !important;
  font-family: var(--ff-serif) !important;
  font-weight: 900 !important;
}
.theme-clean .maker-nav a:hover .maker-nav__logo {
  background: var(--c-blue-600) !important;
}
.theme-clean .cc-nav__num {
  font-family: var(--ff-serif) !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  letter-spacing: -0.01em !important;
}

/* ---------- Widget / Sidebar ---------- */
.theme-clean .widget {
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
  padding: 22px 20px 18px !important;
}
.theme-clean .widget__title {
  border-bottom: 2px solid var(--c-navy-900) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  font-size: 15px !important;
  position: relative;
  letter-spacing: 0.04em !important;
  font-weight: 900 !important;
}
.theme-clean .widget__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 52px; height: 2px;
  background: var(--c-blue-600);
}
.theme-clean .widget__title small {
  color: var(--c-blue-600) !important;
  letter-spacing: 0.24em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

/* ranking */
.theme-clean .ranking li {
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--c-line-2) !important;
  padding: 14px 4px !important;
}
.theme-clean .ranking li:nth-child(1) {
  background: transparent !important;
}
.theme-clean .ranking li:nth-child(1)::after {
  color: var(--c-blue-600) !important;
  background: var(--c-blue-50) !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
  top: 12px !important;
}
.theme-clean .ranking__rank {
  color: var(--c-ink-3) !important;
  -webkit-text-fill-color: var(--c-ink-3) !important;
  font-size: 24px !important;
}
.theme-clean .ranking li:nth-child(1) .ranking__rank {
  color: var(--c-blue-600) !important;
  -webkit-text-fill-color: var(--c-blue-600) !important;
}
.theme-clean .ranking__title { line-height: 1.65 !important; }

/* tag-cloud — シャープフラット */
.theme-clean .tag-cloud a {
  background: transparent !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink-2) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.theme-clean .tag-cloud a:hover {
  background: var(--c-blue-600) !important;
  border-color: var(--c-blue-600) !important;
  color: #fff !important;
}

/* category/gear list */
.theme-clean .widget--category li a::before,
.theme-clean .widget--gear li a::before { color: var(--c-blue-600); }

/* CTA blocks — シャープな角 */
.theme-clean .cta-block { border-radius: 0 !important; }
.theme-clean .cta-block--compare {
  border-left: 4px solid var(--c-blue-600) !important;
  background: var(--c-card) !important;
}
.theme-clean .cta-block--beginner {
  border-left: 4px solid var(--c-warn) !important;
  background: var(--c-card) !important;
}
.theme-clean .cta-block__eyebrow {
  color: var(--c-blue-600) !important;
  letter-spacing: 0.24em !important;
  font-weight: 800 !important;
}
.theme-clean .cta-block--beginner .cta-block__eyebrow { color: var(--c-warn) !important; }
.theme-clean .cta-block__title {
  line-height: 1.45 !important;
  font-weight: 900 !important;
}
.theme-clean .cta-block__link {
  border-color: var(--c-blue-600) !important;
  color: var(--c-blue-600) !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em !important;
}
.theme-clean .cta-block__link:hover { background: var(--c-blue-600) !important; color: #fff !important; }
.theme-clean .cta-block--beginner .cta-block__link {
  border-color: var(--c-warn) !important;
  color: var(--c-warn) !important;
}
.theme-clean .cta-block--beginner .cta-block__link:hover { background: var(--c-warn) !important; color: #fff !important; }

/* Footer — 黒地 + 上辺赤ライン */
.theme-clean .site-footer {
  background: var(--c-navy-900) !important;
  border-top: 3px solid var(--c-blue-600) !important;
  padding-top: 60px !important;
}
.theme-clean .site-footer h4 {
  letter-spacing: 0.08em !important;
  font-weight: 900 !important;
  font-size: 14.5px !important;
}
.theme-clean .site-footer h4::after { background: var(--c-blue-600) !important; width: 36px !important; height: 2px !important; }
.theme-clean .site-footer__logo {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}
.theme-clean .site-footer__bottom { padding-top: 22px !important; }

/* Module 余白 */
.module { margin-bottom: 56px !important; }
@media (min-width: 720px) { .module { margin-bottom: 72px !important; } }

/* l-main column gap */
.theme-clean .l-main {
  gap: 48px !important;
  padding: 40px 0 80px !important;
}
@media (min-width: 1100px) {
  .theme-clean .l-main { gap: 56px !important; }
}

/* ---------- 0. 共通: モジュール余白（後続モジュール） ---------- */
.module { margin-bottom: 48px; }
@media (min-width: 720px) { .module { margin-bottom: 56px; } }

/* ==========================================================================
   1. Bike Finder — 絞り込み検索バー
   ========================================================================== */
.bike-finder {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  margin: 32px 0 40px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(31,42,55,0.04);
}

.bike-finder__tabs {
  display: flex;
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-line);
}
.bike-finder__tab {
  flex: 0 0 auto;
  padding: 12px 28px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--ff-serif);
  color: var(--c-ink-3);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 0.15s, border-color 0.15s;
}
.bike-finder__tab:hover { color: var(--c-blue-600); }
.bike-finder__tab.is-active {
  color: var(--c-blue-600);
  background: var(--c-card);
  border-bottom-color: var(--c-blue-600);
}
.bike-finder__tab small {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  margin-left: 6px;
  color: var(--c-ink-3);
  letter-spacing: 0.1em;
  font-weight: 500;
}

.bike-finder__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 22px 22px 22px;
  align-items: end;
}
@media (min-width: 720px) {
  .bike-finder__body {
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 14px;
  }
}

.bf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bf-field__label {
  font-size: 11px;
  font-family: var(--ff-mono);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bf-field__label::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-blue-600);
  display: inline-block;
}
.bf-field select,
.bf-field input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-weight: 600;
  height: 44px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.bf-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236b7077' d='M6 8.5L1.5 4h9z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.bf-field select:hover,
.bf-field input:hover { border-color: var(--c-blue-600); }
.bf-field select:focus,
.bf-field input:focus {
  outline: none;
  border-color: var(--c-blue-600);
  background: #fff;
}

.bf-submit {
  background: var(--c-blue-600);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--ff-serif);
  letter-spacing: 0.08em;
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
  white-space: nowrap;
}
.bf-submit:hover { background: var(--c-blue-500); }
.bf-submit::after {
  content: "→";
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 16px;
}

.bike-finder__quicktags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 22px 18px;
  font-size: 12px;
  align-items: center;
  color: var(--c-ink-3);
}
.bike-finder__quicktags strong {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--c-ink-2);
  font-weight: 700;
}
.bike-finder__quicktags a {
  font-size: 12.5px;
  color: var(--c-ink-2);
  text-decoration: none;
  font-weight: 600;
  padding: 2px 0;
  border-bottom: 1px dotted var(--c-line);
}
.bike-finder__quicktags a:hover { color: var(--c-blue-600); border-bottom-color: var(--c-blue-600); }

/* ==========================================================================
   2. Genre strip — ジャンルから探す
   ========================================================================== */
.genre-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 560px) { .genre-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .genre-strip { grid-template-columns: repeat(6, 1fr); } }

.genre-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 8px 14px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--c-ink);
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.genre-card:hover {
  border-color: var(--c-blue-600);
  box-shadow: 0 4px 14px rgba(31,42,55,0.08);
  transform: translateY(-2px);
  color: var(--c-blue-600);
  text-decoration: none;
}
.genre-card__icon {
  width: 64px; height: 44px;
  background: var(--c-bg-2);
  border: 1px dashed var(--c-line);
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--c-ink-3);
  letter-spacing: 0.08em;
}
.genre-card__name {
  font-family: var(--ff-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.genre-card__count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--c-ink-3);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   3. Tab feed — タブ式特集エリア
   ========================================================================== */
.tab-feed__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tab-feed__tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.tab-feed__tab {
  padding: 12px 20px 14px;
  font-family: var(--ff-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink-3);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tab-feed__tab small {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: inherit;
}
.tab-feed__tab:hover { color: var(--c-blue-600); }
.tab-feed__tab.is-active {
  color: var(--c-ink);
  border-bottom-color: var(--c-blue-600);
}
.tab-feed__tab.is-active small { color: var(--c-blue-600); }
.tab-feed__more {
  font-size: 13px;
  color: var(--c-blue-600);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.04em;
  padding-bottom: 14px;
  text-decoration: none;
}
.tab-feed__more::after { content: " →"; }

.tab-feed__panel { display: none; }
.tab-feed__panel.is-active { display: grid; }

/* 新着・新型・インプレ パネル: 3列 */
.tab-feed__panel--cards {
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px) { .tab-feed__panel--cards { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 880px) { .tab-feed__panel--cards { grid-template-columns: 1fr 1fr 1fr; gap: 22px; } }

/* ランキング パネル: 縦リスト */
.tab-feed__panel--ranking {
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  overflow: hidden;
}
.rank-row {
  display: grid;
  grid-template-columns: 44px 100px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line-2);
  text-decoration: none;
  color: var(--c-ink);
  transition: background 0.15s;
}
@media (max-width: 559px) {
  .rank-row { grid-template-columns: 36px 72px 1fr; }
  .rank-row__meta { display: none; }
}
.rank-row:last-child { border-bottom: 0; }
.rank-row:hover { background: var(--c-bg-2); text-decoration: none; }
.rank-row__num {
  font-family: var(--ff-serif);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  color: var(--c-ink-3);
  letter-spacing: -0.02em;
}
.rank-row:nth-child(1) .rank-row__num {
  color: var(--c-blue-600);
  font-weight: 900;
  font-size: 30px;
}
.rank-row:nth-child(2) .rank-row__num,
.rank-row:nth-child(3) .rank-row__num {
  color: var(--c-ink-2);
  font-weight: 800;
}
.rank-row__thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #4a5260 0%, #2b3744 60%, #1f2a37 100%);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.rank-row__thumb::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px);
}
.rank-row:nth-child(even) .rank-row__thumb {
  background: linear-gradient(135deg, #2e5b8c 0%, #1f2a37 100%);
}
.rank-row__title {
  font-family: var(--ff-serif);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rank-row:hover .rank-row__title { color: var(--c-blue-600); }
.rank-row__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-ink-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.rank-row__meta strong {
  color: var(--c-blue-600);
  font-size: 13px;
}

/* ==========================================================================
   4. Editor column — 編集部コラム / 試乗インプレ
   ========================================================================== */
.editor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) {
  .editor-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
.editor-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 18px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  align-items: start;
}
.editor-card:hover {
  border-color: var(--c-blue-600);
  box-shadow: 0 4px 14px rgba(31,42,55,0.08);
  text-decoration: none;
}
.editor-card__media {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #4a5260 0%, #2b3744 100%);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.editor-card__media::after {
  content: attr(data-label);
  position: absolute;
  bottom: 6px; left: 6px;
  font-family: var(--ff-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
}
.editor-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.editor-card__kicker {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-blue-600);
}
.editor-card__title {
  font-family: var(--ff-serif);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.editor-card:hover .editor-card__title { color: var(--c-blue-600); }
.editor-card__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--c-ink-3);
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
}
.editor-card__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ff-serif);
  color: var(--c-ink-2);
  letter-spacing: 0;
}
.editor-card__author strong { color: var(--c-ink-2); font-weight: 700; }

/* ==========================================================================
   5. Release calendar — 新型リリースカレンダー
   ========================================================================== */
.release-calendar {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  overflow: hidden;
}
.release-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line-2);
  text-decoration: none;
  color: var(--c-ink);
  transition: background 0.15s;
}
.release-row:last-child { border-bottom: 0; }
.release-row:hover { background: var(--c-bg-2); text-decoration: none; }
.release-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 6px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-family: var(--ff-mono);
}
.release-row__date strong {
  font-family: var(--ff-serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--c-ink);
  line-height: 1;
}
.release-row__date small {
  font-size: 10px;
  color: var(--c-ink-3);
  letter-spacing: 0.1em;
  margin-top: 3px;
  font-weight: 600;
}
.release-row__body { min-width: 0; }
.release-row__maker {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-blue-600);
  margin-bottom: 2px;
}
.release-row__name {
  font-family: var(--ff-serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.release-row:hover .release-row__name { color: var(--c-blue-600); }
.release-row__status {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.release-row__status--scheduled { background: var(--c-blue-50); color: var(--c-blue-600); border: 1px solid var(--c-blue-100); }
.release-row__status--announced { background: var(--c-bg-2); color: var(--c-ink-2); border: 1px solid var(--c-line); }
.release-row__status--global    { background: #f1ebe0; color: #8b6a1f; border: 1px solid #e4d9bf; }
.release-row__status--recall    { background: #f0e1e1; color: var(--c-alert); border: 1px solid #e4c5c5; }

@media (max-width: 559px) {
  .release-row { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 14px; }
  .release-row__status { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

/* ==========================================================================
   6. Used bike pickup — 中古車ピックアップ
   ========================================================================== */
.used-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 720px) { .used-strip { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.used-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.used-card:hover {
  border-color: var(--c-blue-600);
  box-shadow: 0 4px 14px rgba(31,42,55,0.08);
  text-decoration: none;
}
.used-card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #4a5260 0%, #2b3744 100%);
  position: relative;
}
.used-card__media::after {
  content: attr(data-label);
  position: absolute;
  bottom: 6px; right: 6px;
  font-family: var(--ff-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.55);
}
.used-card__media--alt { background: linear-gradient(135deg, #2e5b8c 0%, #1f2a37 100%); }
.used-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.used-card__maker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--c-ink-3);
  font-weight: 700;
}
.used-card__name {
  font-family: var(--ff-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.used-card:hover .used-card__name { color: var(--c-blue-600); }
.used-card__price {
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 900;
  color: var(--c-blue-600);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.used-card__price small {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  color: var(--c-ink-3);
  font-weight: 500;
  margin-left: 2px;
}
.used-card__spec {
  font-size: 11px;
  color: var(--c-ink-3);
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.used-card__spec span { white-space: nowrap; }
.used-card__spec span:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--c-line);
}

/* ==========================================================================
   7. Magazine issue (sidebar widget) — 雑誌最新号
   ========================================================================== */
.mag-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 6px;
  text-decoration: none;
  color: var(--c-ink);
}
.mag-cover__image {
  width: 70%;
  max-width: 180px;
  aspect-ratio: 4 / 5.4;
  background: linear-gradient(160deg, #3a4049 0%, #1c2128 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,16,20,0.12);
}
.mag-cover__image::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px);
}
.mag-cover__image::after {
  content: "COVER";
  position: absolute;
  bottom: 8px; left: 8px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}
.mag-cover__issue {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-blue-600);
}
.mag-cover__title {
  font-family: var(--ff-serif);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: var(--c-ink);
  margin: 0;
  text-wrap: pretty;
}
.mag-cover__cta {
  display: inline-block;
  margin-top: 4px;
  padding: 7px 18px;
  border: 1px solid var(--c-blue-600);
  color: var(--c-blue-600);
  font-family: var(--ff-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
  text-decoration: none;
}
.mag-cover__cta:hover { background: var(--c-blue-600); color: #fff; }

/* ==========================================================================
   8. Pickup author list (sidebar) — 編集メンバー
   ========================================================================== */
.author-list { display: flex; flex-direction: column; gap: 12px; }
.author-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-line-2);
}
.author-list li:last-child { border-bottom: 0; }
.author-list__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a5260, #1f2a37);
  display: grid;
  place-items: center;
  font-family: var(--ff-serif);
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0;
}
.author-list__name {
  font-family: var(--ff-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.35;
  display: block;
}
.author-list__role {
  font-size: 10.5px;
  color: var(--c-ink-3);
  font-family: var(--ff-mono);
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ==========================================================================
   10. Module overrides — タブ、ジャンル、編集カード、カレンダー（クール仕上げ）
   ========================================================================== */
.theme-clean .tab-feed__head { border-bottom: 2px solid var(--c-navy-900) !important; }
.theme-clean .tab-feed__tab {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 14px 22px 16px !important;
  border-bottom-width: 0 !important;
  margin-bottom: -2px !important;
  font-family: var(--ff-serif) !important;
}
.theme-clean .tab-feed__tab small {
  color: var(--c-ink-3) !important;
  letter-spacing: 0.22em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
.theme-clean .tab-feed__tab.is-active {
  color: var(--c-ink) !important;
  border-bottom: 4px solid var(--c-blue-600) !important;
}
.theme-clean .tab-feed__tab.is-active small { color: var(--c-blue-600) !important; }
.theme-clean .tab-feed__more {
  font-size: 12.5px !important;
  color: var(--c-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  border: 1.5px solid var(--c-ink) !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
  margin-bottom: 8px !important;
}
.theme-clean .tab-feed__more:hover {
  background: var(--c-navy-900) !important;
  color: #fff !important;
  border-color: var(--c-navy-900) !important;
}

/* Genre card — シャープな角、骨太のラベル */
.theme-clean .genre-card {
  border-radius: 0 !important;
  background: var(--c-card) !important;
  padding: 22px 8px 18px !important;
  border: 1px solid var(--c-line) !important;
  position: relative;
}
.theme-clean .genre-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.18s ease;
}
.theme-clean .genre-card:hover {
  border-color: var(--c-ink) !important;
  transform: none !important;
  box-shadow: 0 6px 16px rgba(20,23,28,0.08) !important;
  color: var(--c-ink) !important;
}
.theme-clean .genre-card:hover::before { background: var(--c-blue-600); }
.theme-clean .genre-card:hover .genre-card__name { color: var(--c-blue-600) !important; }
.theme-clean .genre-card__icon {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.16em !important;
  font-weight: 800 !important;
}
.theme-clean .genre-card__name {
  font-weight: 800 !important;
  font-family: var(--ff-serif) !important;
}
.theme-clean .genre-card__count {
  color: var(--c-ink-3) !important;
  letter-spacing: 0.14em !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Editor card */
.theme-clean .editor-card {
  border-radius: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--c-line) !important;
  position: relative;
}
.theme-clean .editor-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.18s ease;
}
.theme-clean .editor-card:hover {
  border-color: var(--c-ink) !important;
  box-shadow: 0 6px 16px rgba(20,23,28,0.08) !important;
}
.theme-clean .editor-card:hover::before { background: var(--c-blue-600); }
.theme-clean .editor-card__kicker {
  color: var(--c-blue-600) !important;
  letter-spacing: 0.24em !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}
.theme-clean .editor-card__title {
  line-height: 1.55 !important;
  font-weight: 800 !important;
}
.theme-clean .editor-card__avatar {
  background: var(--c-navy-900) !important;
  color: #fff !important;
  border-color: var(--c-navy-900) !important;
  font-weight: 900 !important;
}

/* Release calendar */
.theme-clean .release-calendar {
  border-radius: 0 !important;
}
.theme-clean .release-row { padding: 16px 18px !important; }
.theme-clean .release-row__date {
  background: var(--c-navy-900) !important;
  border-color: var(--c-navy-900) !important;
  border-radius: 0 !important;
}
.theme-clean .release-row__date strong { color: #fff !important; }
.theme-clean .release-row__date small { color: rgba(255,255,255,0.55) !important; }
.theme-clean .release-row__maker {
  color: var(--c-blue-600) !important;
  letter-spacing: 0.18em !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}
.theme-clean .release-row__name {
  line-height: 1.5 !important;
  font-weight: 800 !important;
}
.theme-clean .release-row__status {
  border-radius: 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  padding: 4px 10px !important;
}

/* Mag cover */
.theme-clean .mag-cover__image {
  box-shadow: 0 8px 22px rgba(15,16,20,0.18) !important;
}
.theme-clean .mag-cover__issue {
  color: var(--c-blue-600) !important;
  letter-spacing: 0.24em !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}
.theme-clean .mag-cover__title {
  line-height: 1.55 !important;
  font-weight: 900 !important;
}
.theme-clean .mag-cover__cta {
  border-color: var(--c-blue-600) !important;
  color: var(--c-blue-600) !important;
  border-radius: 0 !important;
  letter-spacing: 0.1em !important;
  font-weight: 800 !important;
}
.theme-clean .mag-cover__cta:hover { background: var(--c-blue-600) !important; color: #fff !important; }

/* Author list */
.theme-clean .author-list li { padding: 8px 0 !important; }
.theme-clean .author-list__avatar {
  background: linear-gradient(135deg, #3a4049, #14171c) !important;
  border-radius: 0 !important;
}
.theme-clean .author-list__name { font-weight: 800 !important; }
.theme-clean .author-list__role {
  color: var(--c-blue-600) !important;
  letter-spacing: 0.14em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

/* Rank row (タブ内のランキング) */
.theme-clean .tab-feed__panel--ranking {
  border-radius: 0 !important;
}
.theme-clean .rank-row__title {
  font-weight: 800 !important;
  line-height: 1.5 !important;
}
.theme-clean .rank-row__meta strong {
  color: var(--c-blue-600) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   9. Hero overlay 上のカテゴリバッジ
   theme-clean.css は .hero-sub__cat を position:absolute で hero-sub 左上に
   置く想定だが、index-v3 では overlay 内に置いているため位置がズレる。
   ここでは overlay 内に通常フローのインライン・ラベルとして整える。
   ========================================================================== */
.hero-sub__overlay .hero-sub__cat {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  align-self: flex-start;
  background: rgba(20,24,32,0.85);
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px !important;
  border-radius: 2px;
  margin: 0 0 5px !important;
  line-height: 1.4;
  width: fit-content;
}
.hero-sub__overlay .hero-sub__cat--alert {
  background: var(--c-alert) !important;
}

/* モバイル時はオーバーレイ自体がグラデになっているので、白地で透過 */
@media (max-width: 759px) {
  .hero-sub__overlay .hero-sub__cat {
    background: rgba(255,255,255,0.18) !important;
  }
  .hero-sub__overlay .hero-sub__cat--alert {
    background: var(--c-alert) !important;
  }
}


/* ==========================================================================
   11. Golden ratio refinement layer
   ==========================================================================
   方針: バイク雑誌・ポータルの「洗練」を、目につく数字をφに寄せて演出する。
     φ = 1.618、1/φ = 0.618、1/φ² = 0.382
   - Container を 1234px に（√(φ × 1080)≈1320 寄り、ヘッダーの落ち着き優先で控えめに）
   - サイドバー幅 320 → 332 (sidebar : content ≈ 0.382 : 0.618 を目指す)
   - 行間 1.618、見出し行間 1.236 (=φ⁻¹+φ⁻²×1)
   - Type scale: 13 / 16 / 21 / 27 / 34 / 55 / 89 (フィボナッチ)
   - Section に CSS counter で 01 / 02 / 03… を付与（雑誌の章番号）
   - Hero overlay のテキストブロックは、下から φ⁻¹ ≈ 38.2% の位置に寄せる
   ========================================================================== */

/* ---- (a) 全体のリズム ---- */
:root.theme-clean,
.theme-clean {
  --phi:        1.618;
  --phi-1:      0.618;
  --phi-2:      0.382;

  --container:  1234px;

  /* Fibonacci spacing tokens */
  --s-3:   3px;
  --s-5:   5px;
  --s-8:   8px;
  --s-13: 13px;
  --s-21: 21px;
  --s-34: 34px;
  --s-55: 55px;
  --s-89: 89px;
}
.theme-clean .container { max-width: 1234px !important; }

/* ---- (b) Layout 比率 — sidebar : content ≈ φ⁻² : φ⁻¹ ---- */
@media (min-width: 960px) {
  .theme-clean .l-main {
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) !important;
    gap: 55px !important;
    padding: 55px 0 89px !important;
  }
  .theme-clean .l-sidebar { max-width: 380px; }
}

/* ---- (c) Type scale 全体 — base 16, line-height 1.7 (≈ φ + φ⁻³) ---- */
.theme-clean body,
body.theme-clean { font-size: 16px; line-height: 1.7; color: var(--c-ink); }
.theme-clean h1, .theme-clean h2, .theme-clean h3, .theme-clean h4 {
  line-height: 1.236;
  text-wrap: balance;
}
.theme-clean p { text-wrap: pretty; }

/* ---- (d) Hero refinements — overlay text at 38.2% from bottom ---- */
.theme-clean .hero-main__overlay {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.theme-clean .hero-main__overlay > * {
  margin-left: 34px;
  margin-right: 34px;
  max-width: 720px;
}
.theme-clean .hero-main__overlay > *:first-child { margin-top: auto; }
.theme-clean .hero-main__overlay > *:last-child  { margin-bottom: 34px; }
.theme-clean .hero-main__title {
  line-height: 1.236 !important;
  letter-spacing: 0.02em !important;
  text-wrap: balance;
  margin-bottom: 21px !important;
}
.theme-clean .hero-main__cat {
  align-self: flex-start;
  margin-bottom: 21px !important;
}

/* hero-subs: 6枚をφに馴染ませる(2x3) — 既存維持 */

/* ---- (e) Section heading に章番号 — CSS counter ---- */
.theme-clean .l-content { counter-reset: modulenum; }

/* 全ての .module で counter を増分（順序を保つため） */
.theme-clean .l-content > .module { counter-increment: modulenum; }

/* section__head と tab-feed__head 両方に番号を表示 */
.theme-clean .l-content > .module > .section__head,
.theme-clean .l-content > .module > .tab-feed__head {
  display: flex !important;
  align-items: flex-end;
  gap: 21px;
  position: relative;
}
.theme-clean .l-content > .module > .section__head::before,
.theme-clean .l-content > .module > .tab-feed__head::before {
  content: counter(modulenum, decimal-leading-zero);
  position: static !important;
  display: inline-block !important;
  font-family: var(--ff-serif) !important;
  font-weight: 900 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-blue-600) !important;
  background: transparent !important;
  width: auto !important; height: auto !important;
  padding-bottom: 4px !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  flex: 0 0 auto;
  margin-right: 0;
}
.theme-clean .l-content > .module > .section__head .section__title,
.theme-clean .l-content > .module > .tab-feed__head .tab-feed__tabs {
  flex: 1 1 auto;
}
/* tab-feed の場合 "もっと見る" を末尾に */
.theme-clean .l-content > .module > .tab-feed__head .tab-feed__more { margin-left: auto; }

/* ---- (f) Section title 余白の見直し ---- */
.theme-clean .section__title small {
  display: inline-block;
  margin-top: 5px;
}

/* ---- (g) Reading rhythm — paragraph spacing ---- */
.theme-clean .l-content p { margin: 0 0 21px; }
.theme-clean .l-content p:last-child { margin-bottom: 0; }

/* ---- (h) Card aspect ratios — golden rectangles ---- */
.theme-clean .card-news__image,
.theme-clean .card-bike__image,
.theme-clean .card-news__media,
.theme-clean .card-bike__media {
  aspect-ratio: 1.618 / 1;
}
.theme-clean .editor-card__media {
  aspect-ratio: 1 / 1; /* squareは編集顔写真寄り — 維持 */
}

/* ---- (i) Sidebar widget — 各ウィジェット間の余白を 34px に統一 ---- */
.theme-clean .l-sidebar { gap: 34px !important; }
.theme-clean .widget { padding: 21px 21px 21px !important; }

/* ---- (j) Hairline marks — 雑誌風の補助線 ---- */
.theme-clean .module + .module { margin-top: 89px; }
@media (max-width: 719px) {
  .theme-clean .module + .module { margin-top: 55px; }
}

/* ---- (k) "速報" バーの中黒ドットセパレータ ---- */
.theme-clean .breaking-bar__list a + a {
  position: relative;
  padding-left: 21px;
}
.theme-clean .breaking-bar__list a + a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}

/* ---- (l) Hero main meta — pipe separators, smaller ---- */
.theme-clean .hero-main__meta {
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.75) !important;
}
.theme-clean .hero-main__meta span:first-child {
  color: var(--c-blue-500) !important;
  font-weight: 800;
  letter-spacing: 0.12em !important;
}

/* ---- (m) Drop-cap-like initial for editor card title ---- */
.theme-clean .editor-card__title::first-letter {
  font-family: var(--ff-serif);
  font-weight: 900;
  color: var(--c-blue-600);
}

/* ---- (n) Hero-sub overlay の改訂 — 縦長 + 小ぶり ---- */
@media (min-width: 760px) {
  .theme-clean .hero-subs {
    gap: 8px !important;
  }
  .theme-clean .hero-sub__overlay {
    padding: 21px 13px 13px !important;
  }
  .theme-clean .hero-sub__title {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.01em !important;
  }
}

/* ---- (o) Maker / cc nav の数字寄せ ---- */
.theme-clean .cc-nav__num {
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.02em !important;
}
.theme-clean .cc-nav__num small {
  font-feature-settings: normal;
  font-family: var(--ff-mono);
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  margin-left: 1px;
}

/* ---- (p) Tab feed — タブ間の縦罫線でメリハリ ---- */
.theme-clean .tab-feed__tabs {
  gap: 0;
  position: relative;
}
.theme-clean .tab-feed__tab + .tab-feed__tab {
  border-left: 1px solid var(--c-line-2) !important;
  margin-left: 0 !important;
}

/* ---- (q) Footer balance ---- */
.theme-clean .site-footer__grid {
  grid-template-columns: minmax(0, 1.618fr) repeat(3, minmax(0, 1fr)) !important;
  gap: 55px !important;
}
@media (max-width: 759px) {
  .theme-clean .site-footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 34px !important;
  }
}

/* ---- (r) Page header (\u30b5\u30d6\u30da\u30fc\u30b8) も統一 ---- */
.theme-clean .page-header__title {
  font-family: var(--ff-serif) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.236 !important;
}
.theme-clean .page-header__crumbs {
  font-family: var(--ff-mono) !important;
  letter-spacing: 0.14em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--c-ink-3) !important;
}
.theme-clean .page-header__crumbs a {
  color: var(--c-ink-2) !important;
  text-decoration: none !important;
}
.theme-clean .page-header__crumbs a:hover { color: var(--c-blue-600) !important; }


/* ==========================================================================
   12. Refinement v2 — 「がらっと洗練」レイヤー
   ==========================================================================
   方針: 情報密度の高い、上質なバイク・ポータルへ。
     - 文字サイズを全体的に縮小（ヒーロー含め）
     - 余白は維持しつつ、視覚的ノイズを下げる
     - 色をさらに抑制（朱赤を深いマガジン・クリムゾンへ）
     - 細い罫線・small caps・oldstyle figures で雑誌の質感
   ========================================================================== */

/* (1) Palette refinement — 深いマガジン・クリムゾン、温かい紙地 */
:root.theme-clean,
.theme-clean {
  --c-blue-600: #a3232a;   /* refined deep crimson */
  --c-blue-500: #c33339;
  --c-blue-100: #efd9da;
  --c-blue-50:  #f6e9ea;

  --c-ink:      #1a1d22;
  --c-ink-2:    #4a4f56;
  --c-ink-3:    #888c93;

  --c-line:     #d9d6cb;
  --c-line-2:   #e5e2d6;
  --c-bg:       #efebde;   /* warmer paper */
  --c-bg-2:     #f6f3e8;
  --c-card:     #ffffff;
}

/* (2) Body type — small, dense */
body.theme-clean, .theme-clean body {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
}

/* (3) Header chrome — もう一段落ち着かせる */
.theme-clean .site-header {
  border-bottom-width: 2px !important;
}
.theme-clean .site-header__top { padding: 18px 16px 14px !important; }
.theme-clean .site-logo {
  font-size: 18px !important;
  letter-spacing: 0.08em !important;
}
.theme-clean .site-logo::before {
  width: 3px !important;
  margin-right: 10px !important;
}

.theme-clean .global-nav a {
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  padding: 13px 16px !important;
  border-bottom-width: 2px !important;
  font-weight: 700 !important;
}

.theme-clean .breaking-bar__inner { padding: 9px 16px !important; }
.theme-clean .breaking-bar__label {
  font-size: 10px !important;
  padding: 3px 10px !important;
  letter-spacing: 0.24em !important;
}
.theme-clean .breaking-bar__list a { font-size: 12.5px !important; }
.theme-clean .breaking-bar__time { font-size: 10.5px !important; }

/* (4) Hero — 大幅に小さく */
.theme-clean .hero-main {
  min-height: 360px !important;
  height: auto !important;
}
@media (min-width: 760px) {
  .theme-clean .hero-main { height: 440px !important; min-height: 0 !important; }
}
.theme-clean .hero-main__overlay > * {
  margin-left: 28px !important;
  margin-right: 28px !important;
  max-width: 620px !important;
}
.theme-clean .hero-main__overlay > *:last-child  { margin-bottom: 28px !important; }
.theme-clean .hero-main__cat {
  font-size: 10px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 14px !important;
}
.theme-clean .hero-main__title {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 12px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}
@media (min-width: 760px) {
  .theme-clean .hero-main__title { font-size: 26px !important; line-height: 1.4 !important; }
}
@media (min-width: 1100px) {
  .theme-clean .hero-main__title { font-size: 30px !important; }
}
.theme-clean .hero-main__meta {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
}
.theme-clean .hero-main__meta span:first-child {
  letter-spacing: 0.16em !important;
}

/* hero-subs */
@media (min-width: 760px) {
  .theme-clean .hero-sub__title {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
  }
  .theme-clean .hero-sub__cat {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    padding: 2px 6px !important;
    margin-bottom: 6px !important;
  }
}

/* (5) Section titles — 雑誌の小見出し感へ */
.theme-clean .section__head {
  padding-bottom: 10px !important;
  margin-bottom: 22px !important;
  border-bottom-width: 1px !important;
  align-items: baseline !important;
}
.theme-clean .section__head::after {
  width: 72px !important;
  height: 2px !important;
  bottom: -1px !important;
}
.theme-clean .section__title {
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
}
@media (min-width: 720px) {
  .theme-clean .section__title { font-size: 21px !important; }
}
.theme-clean .section__title small {
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  margin-left: 10px !important;
}
.theme-clean .section__more {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  padding: 5px 12px !important;
  border-width: 1px !important;
}

/* Counter (章番号) を小さく */
.theme-clean .l-content > .module > .section__head::before,
.theme-clean .l-content > .module > .tab-feed__head::before {
  font-size: 24px !important;
  padding-bottom: 2px !important;
  padding-right: 8px !important;
  margin-right: 8px !important;
  border-right: 1px solid var(--c-line) !important;
  color: var(--c-ink) !important;
  opacity: 0.5;
}

/* (6) Cards — タイトル小ぶり、メタ充実 */
.theme-clean .card-news__body { padding: 16px 14px 14px !important; gap: 8px !important; }
.theme-clean .card-news__title {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  -webkit-line-clamp: 3 !important;
}
.theme-clean .card-news__meta {
  padding-top: 9px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  color: var(--c-ink-3) !important;
}
.theme-clean .card-news__meta time {
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}
.theme-clean .card-news__cat {
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  padding: 3px 8px !important;
}

.theme-clean .card-bike__body { padding: 14px !important; }
.theme-clean .card-bike__maker { font-size: 10px !important; letter-spacing: 0.22em !important; }
.theme-clean .card-bike__name {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
}
.theme-clean .card-bike__badge {
  font-size: 9.5px !important;
  letter-spacing: 0.2em !important;
  padding: 3px 8px !important;
}
.theme-clean .card-bike__spec,
.theme-clean .card-bike__specs > span {
  font-size: 10px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.06em !important;
}

/* (7) Tab feed — 控えめに */
.theme-clean .tab-feed__head {
  border-bottom-width: 1px !important;
  border-color: var(--c-ink) !important;
}
.theme-clean .tab-feed__tab {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 12px 16px 13px !important;
}
.theme-clean .tab-feed__tab small {
  font-size: 9px !important;
  letter-spacing: 0.24em !important;
  margin-left: 5px !important;
}
.theme-clean .tab-feed__tab.is-active { border-bottom-width: 2px !important; }
.theme-clean .tab-feed__more {
  font-size: 10.5px !important;
  padding: 5px 12px !important;
  letter-spacing: 0.14em !important;
  border-width: 1px !important;
}

/* (8) Maker / cc / genre nav — タイトと洗練 */
.theme-clean .maker-nav a,
.theme-clean .cc-nav a {
  padding: 14px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.theme-clean .maker-nav__logo {
  width: 36px !important; height: 36px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.theme-clean .maker-nav__sub {
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
}
.theme-clean .cc-nav__num {
  font-size: 20px !important;
  font-weight: 800 !important;
}
.theme-clean .cc-nav__label {
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
}

.theme-clean .genre-card { padding: 16px 6px 12px !important; }
.theme-clean .genre-card__icon {
  width: 56px !important; height: 36px !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  font-weight: 800 !important;
}
.theme-clean .genre-card__name { font-size: 12.5px !important; font-weight: 700 !important; }
.theme-clean .genre-card__count {
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  margin-top: 1px;
}

/* (9) Release calendar */
.theme-clean .release-row { padding: 13px 16px !important; gap: 14px !important; }
.theme-clean .release-row__date { padding: 3px 0 5px !important; }
.theme-clean .release-row__date strong { font-size: 17px !important; }
.theme-clean .release-row__date small { font-size: 9px !important; letter-spacing: 0.16em !important; }
.theme-clean .release-row__maker {
  font-size: 9.5px !important;
  letter-spacing: 0.24em !important;
  margin-bottom: 1px !important;
}
.theme-clean .release-row__name { font-size: 13px !important; font-weight: 700 !important; line-height: 1.5 !important; }
.theme-clean .release-row__status {
  font-size: 9.5px !important;
  letter-spacing: 0.2em !important;
  padding: 3px 8px !important;
}

/* (10) Editor card */
.theme-clean .editor-card { padding: 16px !important; gap: 14px !important; grid-template-columns: 96px 1fr !important; }
.theme-clean .editor-card__kicker {
  font-size: 9.5px !important;
  letter-spacing: 0.28em !important;
}
.theme-clean .editor-card__title { font-size: 13.5px !important; line-height: 1.55 !important; font-weight: 700 !important; }
.theme-clean .editor-card__title::first-letter { color: inherit; }
.theme-clean .editor-card__avatar { width: 20px !important; height: 20px !important; font-size: 9px !important; }
.theme-clean .editor-card__author { font-size: 10.5px !important; letter-spacing: 0.06em !important; }

/* (11) Sidebar widget refinement */
.theme-clean .widget__title { font-size: 13px !important; padding-bottom: 10px !important; margin-bottom: 14px !important; }
.theme-clean .widget__title::after { width: 40px !important; height: 1px !important; bottom: -1px !important; }
.theme-clean .widget__title small {
  font-size: 9px !important;
  letter-spacing: 0.28em !important;
}
.theme-clean .ranking li { padding: 11px 4px !important; }
.theme-clean .ranking__rank { font-size: 18px !important; }
.theme-clean .ranking__title { font-size: 12.5px !important; line-height: 1.55 !important; font-weight: 600 !important; }
.theme-clean .ranking__meta {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  color: var(--c-ink-3) !important;
}
.theme-clean .tag-cloud a {
  font-size: 11px !important;
  padding: 4px 9px !important;
  letter-spacing: 0.04em !important;
}
.theme-clean .widget--category li a,
.theme-clean .widget--gear li a { font-size: 13px !important; }

.theme-clean .author-list__name { font-size: 12px !important; font-weight: 700 !important; }
.theme-clean .author-list__role { font-size: 9px !important; letter-spacing: 0.2em !important; }
.theme-clean .mag-cover__issue { font-size: 9.5px !important; letter-spacing: 0.28em !important; }
.theme-clean .mag-cover__title { font-size: 13px !important; line-height: 1.55 !important; }
.theme-clean .mag-cover__cta { font-size: 11px !important; padding: 6px 16px !important; letter-spacing: 0.14em !important; }

/* (12) CTA blocks */
.theme-clean .cta-block { padding: 22px !important; }
.theme-clean .cta-block__eyebrow {
  font-size: 9.5px !important;
  letter-spacing: 0.28em !important;
}
.theme-clean .cta-block__title { font-size: 17px !important; line-height: 1.4 !important; }
.theme-clean .cta-block__desc { font-size: 13px !important; line-height: 1.7 !important; }
.theme-clean .cta-block__link {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  padding: 7px 14px !important;
}

/* (13) Footer */
.theme-clean .site-footer { padding-top: 48px !important; }
.theme-clean .site-footer__about { font-size: 12.5px !important; line-height: 1.85 !important; color: rgba(255,255,255,0.7) !important; }
.theme-clean .site-footer h4 { font-size: 12px !important; letter-spacing: 0.16em !important; }
.theme-clean .site-footer ul a { font-size: 12.5px !important; }
.theme-clean .site-footer__bottom { font-size: 11px !important; letter-spacing: 0.08em !important; }
.theme-clean .site-footer__logo {
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
}

/* (14) Module 余白の最終調整 — 詰めすぎず緩めすぎず */
.module { margin-bottom: 44px !important; }
@media (min-width: 720px) { .module { margin-bottom: 56px !important; } }
.theme-clean .module + .module { margin-top: 0 !important; }

/* (15) Container を雑誌寄りの 1180 に戻す（黄金比のフッターgrid とバランス取り） */
.theme-clean .container { max-width: 1180px !important; }
@media (min-width: 960px) {
  .theme-clean .l-main {
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) !important;
    gap: 44px !important;
    padding: 40px 0 72px !important;
  }
  .theme-clean .l-sidebar { max-width: 340px !important; }
}

/* (16) Page header — サブページのページタイトルを抑える */
.theme-clean .page-header { padding: 28px 0 24px !important; }
.theme-clean .page-header__title { font-size: 22px !important; }
@media (min-width: 720px) {
  .theme-clean .page-header__title { font-size: 26px !important; }
}
.theme-clean .page-header__desc { font-size: 13.5px !important; line-height: 1.85 !important; max-width: 680px; }

/* (17) Drop-cap を廃止（うるさいので外す） */
.theme-clean .editor-card__title::first-letter { color: inherit !important; font-weight: inherit !important; }

/* (18) hero overlay の暗グラデを若干弱めて画像を魅せる */
.theme-clean .hero-main__overlay {
  background: linear-gradient(to top,
    rgba(10,12,18,0.92) 0%,
    rgba(10,12,18,0.55) 38%,
    rgba(10,12,18,0.10) 78%,
    rgba(10,12,18,0) 100%) !important;
}

/* (19) hover で動かない・controled */
.theme-clean .card-news:hover,
.theme-clean .card-bike:hover,
.theme-clean .genre-card:hover,
.theme-clean .editor-card:hover,
.theme-clean .hero-sub:hover {
  box-shadow: 0 4px 14px rgba(20,23,28,0.06) !important;
}
.theme-clean .card-news::before,
.theme-clean .card-bike::before,
.theme-clean .genre-card::before,
.theme-clean .editor-card::before {
  height: 2px !important;
}

/* (20) 末尾のお飾り — 各 .module ヘッダーの番号と縦罫線 (上で設定済) */


/* ==========================================================================
   13. World-class polish — 日本語ポータル仕上げ
   ==========================================================================
   方針: 既存のサイズ感は変えず、世界水準のバイク・ポータルにふさわしい
   タイポグラフィの細部、写真の見せ方、操作感だけを引き上げる。
   ========================================================================== */

/* (1) Japanese typography — 和欧混植の整え */
:root.theme-clean,
.theme-clean {
  --ff-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic", "Meiryo", system-ui, -apple-system, "Segoe UI",
             Roboto, sans-serif;
  --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-mono:  "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
}
body.theme-clean, .theme-clean body {
  font-family: var(--ff-sans);
  font-feature-settings: "palt" 1, "pkna" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 数値は tabular figures + lining figures（黄金比やデータ表示で揃う） */
.theme-clean .ranking__rank,
.theme-clean .release-row__date strong,
.theme-clean .cc-nav__num,
.theme-clean .rank-row__num,
.theme-clean .card-news__meta time,
.theme-clean .release-row__date small,
.theme-clean .breaking-bar__time,
.theme-clean .hero-main__meta,
.theme-clean .ranking__meta {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* (2) Photo treatments — 写真をプロっぽく */
.theme-clean .card-news__media,
.theme-clean .card-bike__media,
.theme-clean .hero-main,
.theme-clean .hero-sub {
  overflow: hidden;
}
.theme-clean .card-news__image,
.theme-clean .card-bike__image,
.theme-clean .hero-main img,
.theme-clean .hero-sub img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.theme-clean .card-news:hover .card-news__image,
.theme-clean .card-bike:hover .card-bike__image,
.theme-clean .hero-main:hover img,
.theme-clean .hero-sub:hover img {
  transform: scale(1.04);
}

/* プレースホルダーのテクスチャを上品に */
.theme-clean .ph,
.theme-clean .ph--alt {
  position: relative;
}
.theme-clean .ph::after,
.theme-clean .ph--alt::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px),
    radial-gradient(120% 80% at 20% 20%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}

/* (3) Hero meta — 編集タグ風セパレータ */
.theme-clean .hero-main__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-clean .hero-main__meta span { padding: 0 !important; margin: 0 !important; }
.theme-clean .hero-main__meta span::after { display: none !important; }
.theme-clean .hero-main__meta span + span {
  position: relative;
  padding-left: 13px !important;
}
.theme-clean .hero-main__meta span + span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 10px;
  background: rgba(255,255,255,0.3);
}

/* (4) Section heading — eyebrow を雑誌風に */
.theme-clean .section__title small {
  position: relative;
  padding-left: 18px;
  display: inline-block;
}
.theme-clean .section__title small::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 1px;
  background: var(--c-blue-600);
}

/* (5) Card date format — 日付に薄い装飾 */
.theme-clean .card-news__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.theme-clean .card-news__meta time {
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
}
.theme-clean .card-news__meta time + span {
  position: relative;
  padding-left: 9px;
}
.theme-clean .card-news__meta time + span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--c-line);
}

/* (6) Breaking bar の項目間ドット強化 */
.theme-clean .breaking-bar__list a + a::before {
  background: rgba(255,255,255,0.4) !important;
}

/* (7) Nav active indicator — 微妙に大きく */
.theme-clean .global-nav a.is-active::after {
  content: "";
  display: none; /* キープ。アクティブは既存の border-bottom で十分 */
}

/* (8) Focus rings — キーボード操作に明示 */
.theme-clean a:focus-visible,
.theme-clean button:focus-visible,
.theme-clean input:focus-visible,
.theme-clean select:focus-visible {
  outline: 2px solid var(--c-blue-600) !important;
  outline-offset: 2px !important;
}

/* tap highlight */
.theme-clean a, .theme-clean button {
  -webkit-tap-highlight-color: rgba(154,42,47,0.12);
}

/* (9) prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .theme-clean *,
  .theme-clean *::before,
  .theme-clean *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* (10) Selection color */
.theme-clean ::selection {
  background: var(--c-blue-100);
  color: var(--c-ink);
}

/* (11) Skip link を視認 */
.theme-clean a.visually-hidden:focus,
.theme-clean .skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 10px 16px;
  background: var(--c-navy-900);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  border: 2px solid var(--c-blue-600);
  z-index: 9999;
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
}

/* (12) Maker logo を雑誌風に — モノグラム的に */
.theme-clean .maker-nav__logo {
  font-family: var(--ff-serif) !important;
  font-feature-settings: "palt" 0;
}

/* (13) Card hover lift — 控えめ */
.theme-clean .card-news,
.theme-clean .card-bike,
.theme-clean .genre-card,
.theme-clean .editor-card,
.theme-clean .hero-sub {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
.theme-clean .card-news:hover,
.theme-clean .card-bike:hover,
.theme-clean .genre-card:hover,
.theme-clean .editor-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(20,23,28,0.08) !important;
}

/* (14) Footer — 上質感（薄い罫線で4ブロック） */
.theme-clean .site-footer__grid > div + div {
  position: relative;
}
@media (min-width: 760px) {
  .theme-clean .site-footer__grid > div + div::before {
    content: "";
    position: absolute;
    left: -28px; top: 0; bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.06);
  }
}

/* (15) Mobile menu — 開閉時のフェード */
@media (max-width: 759px) {
  .theme-clean .global-nav { transition: max-height 0.25s ease, opacity 0.2s ease; }
}

/* (16) Image lazy-loaded blur — 画像読み込み中もきれいに */
.theme-clean img[loading="lazy"] {
  background: linear-gradient(135deg, #4a4d54 0%, #1f2228 100%);
}

/* (17) Print stylesheet — シェア用 */
@media print {
  .theme-clean .site-header,
  .theme-clean .breaking-bar,
  .theme-clean .l-sidebar,
  .theme-clean .site-footer,
  .theme-clean .ad-slot,
  .theme-clean .tab-feed__tabs,
  .theme-clean .tab-feed__more,
  .theme-clean .section__more {
    display: none !important;
  }
  .theme-clean .l-main {
    display: block !important;
    padding: 0 !important;
  }
  .theme-clean a {
    color: inherit !important;
    text-decoration: underline !important;
  }
  .theme-clean .container { max-width: 100% !important; }
  .theme-clean body { background: #fff !important; color: #000 !important; }
}

/* (18) Hero overlay — グラデーションをワンランク繊細に */
.theme-clean .hero-main__overlay {
  background: linear-gradient(to top,
    rgba(8,10,16,0.94) 0%,
    rgba(8,10,16,0.62) 38%,
    rgba(8,10,16,0.18) 72%,
    rgba(8,10,16,0) 100%) !important;
}

/* (19) Logo の縦バーをスタイル統一 */
.theme-clean .site-logo::before {
  height: 0.9em !important;
  margin-right: 11px !important;
  vertical-align: -1px;
}

/* (20) Card "Read more" マイクロ表示 (オプショナル) */
.theme-clean .card-news__meta::after { content: none; }

/* (21) Section number — 雑誌のシリアル感 */
.theme-clean .l-content > .module > .section__head::before,
.theme-clean .l-content > .module > .tab-feed__head::before {
  font-family: var(--ff-mono) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  color: var(--c-ink-3) !important;
  border-right: 1px solid var(--c-line) !important;
  padding: 0 14px 0 0 !important;
  margin-right: 14px !important;
  align-self: center !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}

/* (22) Section title small ラベル — 黒文字寄りに */
.theme-clean .section__title small {
  color: var(--c-ink-3) !important;
  font-family: var(--ff-mono) !important;
  font-weight: 700 !important;
}

/* (23) 編集カード kicker と著者情報の整え */
.theme-clean .editor-card__kicker {
  font-family: var(--ff-mono) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  color: var(--c-ink-3) !important;
}
.theme-clean .editor-card__author { color: var(--c-ink-2) !important; }
.theme-clean .editor-card__author strong { color: var(--c-ink) !important; }

/* (24) breaking-bar の数字（時刻）を等幅 */
.theme-clean .breaking-bar__time {
  font-family: var(--ff-mono) !important;
  font-weight: 700 !important;
}

/* (25) Eyebrow ラベル類（kicker, EN small）を共通化 */
.theme-clean .card-bike__maker,
.theme-clean .release-row__maker,
.theme-clean .mag-cover__issue,
.theme-clean .cta-block__eyebrow {
  font-family: var(--ff-mono) !important;
  font-weight: 700 !important;
}

/* (26) Sidebar の各ウィジェットの間隔を統一 */
@media (min-width: 960px) {
  .theme-clean .l-sidebar > * + * { margin-top: 0; }
}

/* (27) サブページ page-header の彩度を抑える */
.theme-clean .page-header {
  background: linear-gradient(180deg, #fbf8ee 0%, var(--c-bg) 100%) !important;
  border-bottom: 1px solid var(--c-line) !important;
  padding: 32px 0 24px !important;
}
.theme-clean .page-header__crumbs {
  font-family: var(--ff-mono) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: var(--c-ink-3) !important;
  margin-bottom: 8px;
}
.theme-clean .page-header__crumbs a {
  color: var(--c-ink-2) !important;
  text-decoration: none !important;
}
.theme-clean .page-header__crumbs a:hover { color: var(--c-blue-600) !important; }
.theme-clean .page-header__title {
  font-family: var(--ff-serif) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}
.theme-clean .page-header__desc {
  line-height: 1.85 !important;
  color: var(--c-ink-2) !important;
  max-width: 720px;
}

/* (28) Filter chip — 絞り込みUIを清潔に */
.theme-clean .filter-bar {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: 0;
  padding: 16px 18px;
  margin-bottom: 28px;
}
.theme-clean .filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.theme-clean .filter-group + .filter-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line-2); }
.theme-clean .filter-group__label {
  font-family: var(--ff-mono) !important;
  font-weight: 700;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  color: var(--c-ink-3) !important;
  min-width: 70px;
}
.theme-clean .filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.theme-clean .chip {
  background: transparent !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 0 !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  color: var(--c-ink-2) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.theme-clean .chip:hover {
  border-color: var(--c-ink) !important;
  color: var(--c-ink) !important;
}
.theme-clean .chip.is-active {
  background: var(--c-navy-900) !important;
  color: #fff !important;
  border-color: var(--c-navy-900) !important;
}

/* (29) Pagination */
.theme-clean .pagination {
  display: flex; justify-content: center; gap: 4px; margin: 32px 0 0;
}
.theme-clean .pagination a,
.theme-clean .pagination span {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 10px;
  font-family: var(--ff-mono) !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink-2);
  text-decoration: none;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.theme-clean .pagination a:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.theme-clean .pagination .is-current,
.theme-clean .pagination .current {
  background: var(--c-navy-900);
  color: #fff !important;
  border-color: var(--c-navy-900);
}

/* (30) Empty state — 0件時の表示を上品に */
.theme-clean .empty-state {
  padding: 56px 28px;
  text-align: center;
  background: var(--c-card);
  border: 1px solid var(--c-line);
}
.theme-clean .empty-state__icon {
  font-family: var(--ff-serif) !important;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  opacity: 0.4;
}
.theme-clean .empty-state__title {
  font-family: var(--ff-serif);
  font-weight: 800;
  font-size: 17px;
  color: var(--c-ink);
  margin: 0 0 6px;
}
.theme-clean .empty-state__desc {
  font-size: 13px;
  color: var(--c-ink-2);
  line-height: 1.85;
}

/* ==========================================================================
   新規モジュール: タブ式特集エリア（ハンドオフ統合）
   ========================================================================== */

/* Tab feed heading */
.tab-feed__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tab-feed__tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.tab-feed__tab {
  padding: 12px 20px 14px;
  font-family: var(--ff-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink-3);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s;
}
.tab-feed__tab small {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: inherit;
}
.tab-feed__tab:hover { color: var(--c-blue-600); }
.tab-feed__tab.is-active {
  color: var(--c-ink);
  border-bottom-color: var(--c-blue-600);
}
.tab-feed__tab.is-active small { color: var(--c-blue-600); }

.tab-feed__more {
  font-size: 13px;
  color: var(--c-blue-600);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.04em;
  padding-bottom: 14px;
  text-decoration: none;
}
.tab-feed__more::after { content: " →"; }

.tab-feed__panel { display: none; }
.tab-feed__panel.is-active { display: grid; }

.tab-feed__panel--cards {
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px) { .tab-feed__panel--cards { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 880px) { .tab-feed__panel--cards { grid-template-columns: 1fr 1fr 1fr; gap: 22px; } }

.tab-feed__panel--ranking {
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  overflow: hidden;
}

/* Theme clean overrides */
.theme-clean .tab-feed__head { border-bottom: 2px solid var(--c-navy-900) !important; }
.theme-clean .tab-feed__tab {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 14px 22px 16px !important;
  border-bottom-width: 0 !important;
  margin-bottom: -2px !important;
  font-family: var(--ff-serif) !important;
}
.theme-clean .tab-feed__tab small {
  color: var(--c-ink-3) !important;
  letter-spacing: 0.22em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
.theme-clean .tab-feed__tab.is-active {
  color: var(--c-ink) !important;
  border-bottom: 4px solid var(--c-blue-600) !important;
}
.theme-clean .tab-feed__tab.is-active small { color: var(--c-blue-600) !important; }
.theme-clean .tab-feed__more {
  font-size: 12.5px !important;
  color: var(--c-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  border: 1.5px solid var(--c-ink) !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
  margin-bottom: 8px !important;
}
.theme-clean .tab-feed__more:hover {
  background: var(--c-navy-900) !important;
  color: #fff !important;
  border-color: var(--c-navy-900) !important;
}

/* ==========================================================================
   INDEX-V3 レイアウト強修正 (2026-05-29)
   正解: index-v3.html の幅・比率・構成に合わせる
   ========================================================================== */

/* ─── コンテナ幅を正解に合わせる ─── */
:root {
  --container: 1280px;
}
.container {
  max-width: var(--container) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 760px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ─── Hero: index-v3と同じ 3:2 グリッド ─── */
.theme-clean .hero {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-bottom: 32px !important;
}
@media (min-width: 760px) {
  .theme-clean .hero {
    grid-template-columns: 3fr 2fr !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
}

/* ─── hero-main: 左大カード ─── */
.theme-clean .hero-main {
  min-height: 300px !important;
  border-radius: 0 !important;
}
@media (min-width: 760px) {
  .theme-clean .hero-main {
    min-height: 440px !important;
  }
}
/* メインのph(プレースホルダー)がカード全体をカバー */
.theme-clean .hero-main .ph,
.theme-clean .hero-main .ph--alt {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ─── hero-subs: 右6件縦列 ─── */
.theme-clean .hero-subs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
@media (min-width: 760px) {
  .theme-clean .hero-subs {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ─── hero-sub: 個別右サブカード ─── */
.theme-clean .hero-sub {
  position: relative !important;
  min-height: 68px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--c-navy-700) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border: 0 !important;
}
@media (min-width: 760px) {
  .theme-clean .hero-sub {
    min-height: 68px !important;
  }
}
/* サブカード内のph */
.theme-clean .hero-sub .ph,
.theme-clean .hero-sub .ph--alt {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* overlay */
.theme-clean .hero-sub__overlay {
  position: relative !important;
  z-index: 2 !important;
  padding: 10px 12px !important;
  background: linear-gradient(to top, rgba(8,18,40,0.95) 20%, rgba(8,18,40,0.2) 100%) !important;
}
.theme-clean .hero-sub__cat {
  display: inline-block !important;
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 0 !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.06em !important;
}
.theme-clean .hero-sub__cat--alert {
  background: var(--c-alert) !important;
}
.theme-clean .hero-sub__title {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: #fff !important;
  font-weight: 700 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ─── ジャンルセクション(genre): コンテナ内フル幅 ─── */
/* hero と genre はl-main外（site-mainのcontainerに直接入る）のでフル幅 */
#genre {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#genre .genre-strip {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 560px) {
  #genre .genre-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 760px) {
  #genre .genre-strip {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}
.theme-clean #genre .genre-card {
  border-radius: 0 !important;
  padding: 20px 8px 16px !important;
}
.theme-clean #genre .genre-card__icon {
  width: 72px !important;
  height: 48px !important;
  overflow: hidden !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}
.theme-clean #genre .genre-card__icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.theme-clean #genre .genre-card__name {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.theme-clean #genre .genre-card__count {
  font-size: 10px !important;
}

/* ─── l-mainのパディング整備 ─── */
.theme-clean .l-main {
  padding: 32px 0 80px !important;
  gap: 40px !important;
}
@media (min-width: 960px) {
  .theme-clean .l-main {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 48px !important;
  }
}

/* ─── site-mainのcontainerが正しく動作するよう ─── */
.site-main {
  overflow-x: hidden;
}

/* ==========================================================================
   SITEWIDE DESIGN UNIFICATION (2026-05-29)
   全ページを現在の黒ヘッダー+クリムゾン赤デザインに統一
   ========================================================================== */

/* ─── (A) Page header: 黒帯 + 赤アンダーライン ─── */
.theme-clean .page-header {
  background: var(--c-navy-900) !important;
  border-bottom: 3px solid var(--c-blue-600) !important;
  padding: 36px 0 28px !important;
  position: relative;
  overflow: hidden;
}
.theme-clean .page-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 28px) !important;
  pointer-events: none !important;
}
.theme-clean .page-header__crumbs {
  font-family: var(--ff-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 10px !important;
}
.theme-clean .page-header__crumbs a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
}
.theme-clean .page-header__crumbs a:hover {
  color: #fff !important;
}
.theme-clean .page-header__title {
  font-family: var(--ff-serif) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 0.03em !important;
}
@media (min-width: 720px) {
  .theme-clean .page-header__title { font-size: 30px !important; }
}
.theme-clean .page-header__desc {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.85 !important;
  max-width: 700px;
  margin-top: 10px !important;
}

/* ─── (B) Breadcrumbs (single page) ─── */
.theme-clean .breadcrumbs {
  font-size: 11.5px !important;
  color: var(--c-ink-3) !important;
  font-family: var(--ff-mono) !important;
  letter-spacing: 0.1em !important;
  margin: 12px 0 18px !important;
}
.theme-clean .breadcrumbs a {
  color: var(--c-ink-2) !important;
  text-decoration: none !important;
}
.theme-clean .breadcrumbs a:hover { color: var(--c-blue-600) !important; }

/* ─── (C) Filter bar (絞り込み) — シャープな黒縁 ─── */
.theme-clean .filter-bar {
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  border-top: 3px solid var(--c-blue-600) !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
  margin-bottom: 28px !important;
}
.theme-clean .filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.theme-clean .filter-group + .filter-group {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--c-line-2) !important;
}
.theme-clean .filter-group__label {
  font-family: var(--ff-mono) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  color: var(--c-ink-3) !important;
  min-width: 64px !important;
  text-transform: uppercase;
}
.theme-clean .chip {
  background: transparent !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--c-ink-2) !important;
  letter-spacing: 0.02em !important;
  padding: 5px 13px !important;
  transition: border-color 0.12s, color 0.12s, background 0.12s !important;
  text-decoration: none !important;
}
.theme-clean .chip:hover {
  border-color: var(--c-blue-600) !important;
  color: var(--c-blue-600) !important;
  background: transparent !important;
}
.theme-clean .chip.is-active {
  background: var(--c-blue-600) !important;
  border-color: var(--c-blue-600) !important;
  color: #fff !important;
}

/* ─── (D) Bike hero (車種詳細ヒーロー) — 赤アクセント ─── */
.theme-clean .bike-hero {
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  border-top: 3px solid var(--c-blue-600) !important;
  border-radius: 0 !important;
  margin-bottom: 24px !important;
}
.theme-clean .bike-hero__maker {
  font-family: var(--ff-mono) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  color: var(--c-blue-600) !important;
}
.theme-clean .bike-hero__title {
  font-family: var(--ff-serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--c-ink) !important;
  line-height: 1.3 !important;
}
@media (min-width: 760px) {
  .theme-clean .bike-hero__title { font-size: 26px !important; }
}
.theme-clean .bike-hero__tags span {
  background: var(--c-bg-2) !important;
  color: var(--c-ink-2) !important;
  border: 1px solid var(--c-line) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
  padding: 3px 9px !important;
}
.theme-clean .bike-hero__lead {
  font-size: 14px !important;
  color: var(--c-ink-2) !important;
  line-height: 1.85 !important;
}
.theme-clean .bike-hero__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.theme-clean .bike-hero__caption {
  font-size: 11px !important;
  color: var(--c-ink-3) !important;
  line-height: 1.5 !important;
  margin: 4px 6px 0 !important;
  text-align: right !important;
}

/* ─── (E) Bike section (車種詳細セクション) ─── */
.theme-clean .bike-section {
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 0 !important;
  padding: 22px 24px !important;
  margin-bottom: 16px !important;
}
.theme-clean .bike-section__head {
  font-family: var(--ff-serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--c-ink) !important;
  border-bottom: 1px solid var(--c-line) !important;
  padding-bottom: 12px !important;
  margin-bottom: 18px !important;
}
.theme-clean .bike-section__head::before {
  background: var(--c-blue-600) !important;
  border-radius: 0 !important;
  width: 4px !important;
  height: 16px !important;
}

/* ─── (F) Spec table (スペック表) ─── */
.theme-clean .spec-table {
  font-size: 13px !important;
}
.theme-clean .spec-table th {
  background: var(--c-bg-2) !important;
  border-left: 3px solid var(--c-blue-600) !important;
  font-family: var(--ff-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  width: 36% !important;
}
.theme-clean .spec-table td {
  font-family: var(--ff-mono) !important;
  color: var(--c-ink) !important;
}

/* ==========================================================================
   PERFECT COMPLETION FINAL POLISH (2026-05-29)
   完成最終仕上げ — a11y / モバイル細部 / 印刷 / モーション抑制
   ========================================================================== */

/* ---- (1) Skip link (キーボードユーザー向けナビ) ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--c-navy-900);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid var(--c-blue-600);
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--c-blue-600);
  outline-offset: 0;
}

/* ---- (2) Focus visible (キーボード操作時のみリング表示) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-blue-600, #c2252b);
  outline-offset: 2px;
  border-radius: 2px;
}
.theme-clean a:focus-visible,
.theme-clean button:focus-visible {
  outline-color: var(--c-blue-600);
}

/* マウス操作時のフォーカスリングは抑制（focus-visibleでカバー） */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: 0;
}

/* ---- (3) Reduced motion (モーション抑制設定の尊重) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .breaking-bar__label::before { animation: none !important; }
  .card-news:hover,
  .card-bike:hover,
  .genre-card:hover,
  .editor-card:hover {
    transform: none !important;
  }
}

/* ---- (4) モバイル細部最終調整 ---- */
@media (max-width: 559px) {
  /* タッチ操作の指タップ領域確保（最小44px推奨） */
  .global-nav a,
  .breaking-bar__list a,
  .section__more,
  .tab-feed__more,
  .tab-feed__tab,
  .pagination a,
  .pagination span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* タブ式特集のタブ余白を詰める */
  .tab-feed__tab {
    padding: 10px 14px 12px !important;
    font-size: 14px !important;
  }
  /* セクション見出し小型化 */
  .section__title { font-size: 17px !important; }
  .theme-clean .section__title { font-size: 19px !important; }
  /* hero meta の改行抑制 */
  .hero-main__meta { font-size: 11px !important; }
  .hero-main__overlay > * {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }
}

/* ---- (5) 横スクロール防止保険 ---- */
html, body { overflow-x: hidden; }
.container, .l-main, .module, .section { max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }

/* ---- (6) 印刷スタイル ---- */
@media print {
  .site-header,
  .global-nav,
  .breaking-bar,
  .site-footer,
  .l-sidebar,
  .ad-slot,
  .menu-toggle,
  .search-box,
  .section__more,
  .tab-feed__more,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
  }
  .l-main {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  a { color: #000 !important; text-decoration: underline !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .hero-main,
  .hero-sub,
  .card-news,
  .card-bike {
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  .section__title { font-size: 14pt !important; }
  .hero-main__title { font-size: 16pt !important; color: #000 !important; }
  .ph::after { content: "[image]" !important; }
}

/* ---- (7) 画像未取得時の見栄え改善 ---- */
img[src=""],
img:not([src]) {
  visibility: hidden;
}
.card-news__image:empty,
.card-bike__image:empty {
  background: linear-gradient(135deg, #4a5260 0%, #2b3744 100%);
}

/* ---- (8) 細かいタイポ修正 ---- */
.theme-clean p { text-wrap: pretty; }
.theme-clean h1, .theme-clean h2, .theme-clean h3 { text-wrap: balance; }

/* ---- (9) WordPress標準アライメント補完 ---- */
.alignleft  { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption {
  max-width: 100%;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  padding: 8px;
  text-align: center;
}
.wp-caption-text {
  font-size: 12px;
  color: var(--c-ink-3);
  margin: 6px 0 0;
  font-family: var(--ff-mono);
}

/* ---- (10) selection の色をブランドカラーへ ---- */
::selection {
  background: var(--c-blue-600, #c2252b);
  color: #fff;
}
.theme-clean .spec-table th,
.theme-clean .spec-table td {
  border-bottom: 1px solid var(--c-line-2) !important;
  padding: 10px 14px !important;
}
.theme-clean .spec-table td .muted {
  color: var(--c-ink-3) !important;
  font-family: var(--ff-sans) !important;
  font-size: 11.5px !important;
}

/* ─── (G) Feature list (特徴リスト) ─── */
.theme-clean .feature-list li {
  border-left: 3px solid var(--c-blue-600) !important;
  border-radius: 0 !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  border-left: 3px solid var(--c-blue-600) !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
}

/* ─── (H) Note (出典・注意書き) ─── */
.theme-clean .note {
  background: var(--c-bg-2) !important;
  border: 1px solid var(--c-line) !important;
  border-left: 3px solid var(--c-warn) !important;
  color: var(--c-ink-2) !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  padding: 12px 16px !important;
  line-height: 1.8 !important;
}
.theme-clean .note--quiet {
  border-left-color: var(--c-ink-3) !important;
  color: var(--c-ink-3) !important;
}

/* ─── (I) Compare list (比較リスト) ─── */
.theme-clean .compare-list a {
  border-radius: 0 !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
}
.theme-clean .compare-list a:hover {
  border-color: var(--c-blue-600) !important;
  background: var(--c-blue-50) !important;
}
.theme-clean .compare-list__name {
  font-family: var(--ff-serif) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: var(--c-ink) !important;
}
.theme-clean .compare-list__meta {
  font-family: var(--ff-mono) !important;
  font-size: 11px !important;
  color: var(--c-ink-3) !important;
}
.theme-clean .compare-list__arrow {
  color: var(--c-blue-600) !important;
}

/* ─── (J) News row (ニュース一覧のリスト型) ─── */
.theme-clean .news-row {
  display: flex;
  flex-direction: column;
}
.theme-clean .news-row a {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line-2);
  text-decoration: none;
}
.theme-clean .news-row a:hover { background: transparent; }
.theme-clean .news-row a:hover .news-row__title { color: var(--c-blue-600); }
.theme-clean .news-row__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-line);
}
.theme-clean .news-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.theme-clean .news-row__title {
  font-family: var(--ff-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: var(--c-ink) !important;
  transition: color 0.12s;
}
.theme-clean .news-row__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--ff-mono) !important;
  font-size: 11px !important;
  color: var(--c-ink-3) !important;
}
.theme-clean .news-row__cat {
  background: var(--c-blue-600) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  padding: 2px 8px !important;
  border-radius: 0 !important;
}

/* ─── (K) Widget ranking — top1クリムゾン ─── */
.theme-clean .ranking li:nth-child(1) {
  background: linear-gradient(90deg, var(--c-blue-50) 0%, transparent 100%) !important;
}
.theme-clean .ranking li:nth-child(1) .ranking__rank {
  color: var(--c-blue-600) !important;
  -webkit-text-fill-color: var(--c-blue-600) !important;
}
.theme-clean .ranking li:nth-child(1)::after {
  color: var(--c-blue-600) !important;
}
.theme-clean .ranking__title:hover {
  color: var(--c-blue-600) !important;
}

/* ─── V7 news visual completion: local generated photos + stable hero crop ─── */
.theme-clean .hero-main__img,
.theme-clean .hero-sub__img,
.theme-clean .card-news__media .card__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.theme-clean .hero-main__img {
  object-position: center 48% !important;
}
.theme-clean .hero-main {
  isolation: isolate;
}
.theme-clean .hero-main__overlay {
  width: 100% !important;
}
.theme-clean .hero-sub__img {
  z-index: 0 !important;
}
.theme-clean .hero-sub__overlay {
  width: 100% !important;
}
.theme-clean .card-news__visual-note {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 3px 7px;
  background: rgba(20,24,32,0.78);
  color: rgba(255,255,255,0.92);
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.theme-clean .news-row__media .ph {
  width: 100%;
  height: 100%;
}
.theme-clean .sidebar-news-link {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
}
.theme-clean .sidebar-news-link__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-line-2);
}
.theme-clean .sidebar-news-link__media img,
.theme-clean .sidebar-news-link__media .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.theme-clean .sidebar-news-link__title {
  font-family: var(--ff-serif);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
}
.theme-clean .sidebar-news-link:hover .sidebar-news-link__title {
  color: var(--c-blue-600);
}

/* ─── (L) Widget title border — クリムゾン下線 ─── */
.theme-clean .widget__title {
  border-bottom: 2px solid var(--c-blue-600) !important;
}
.theme-clean .widget {
  border-radius: 0 !important;
}

/* ─── (M) Section more link ─── */
.theme-clean .section__more {
  border: 1px solid var(--c-blue-600) !important;
  color: var(--c-blue-600) !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
}
.theme-clean .section__more::after { content: " →" !important; }
.theme-clean .section__more:hover {
  background: var(--c-blue-600) !important;
  color: #fff !important;
  text-decoration: none;
}

/* ─── (N) Character page cards ─── */
.theme-clean .character-card {
  border-radius: 0 !important;
  border: 1px solid var(--c-line) !important;
  border-left: 3px solid var(--c-blue-600) !important;
}
.theme-clean .character-card__role {
  color: var(--c-blue-600) !important;
}

/* ─── (O) bike-hero__body の CTA ボタン ─── */
.theme-clean .bike-hero__body .cta-block__link {
  border-radius: 0 !important;
  padding: 8px 16px !important;
}