@charset "utf-8";

/* ==============================================================
   カーライフ相談所（BEST CAR LIFE+）LP スタイルシート

   【読み方】
   ・ベースのルールは SP（スマホ）基準。PC向けは @media (min-width…) で上書きする。
   ・SP専用の見た目は @media (max-width: 760px) / (max-width: 480px)。
     同じ詳細度のルールは「後に書いたほうが勝つ」ので、
     SP用の上書きは各コンポーネントのベースルールより後ろに置くこと。
   ・色は :root のカスタムプロパティ（--navy / --tail-red など）を使う。

   【目次】
    1. 基本設定（リセット・変数・共通）
    2. カーライフ＋ サブナビ
    3. パンくず
    4. ページレイアウト（本文＋PCライトカラム）
    5. サイドバーカード（カテゴリタイル・課題アンカー）
    6. シーンフィルタ
    7. お悩みブロック（課題で探す）
    8. 動画カード・動画モーダル
    9. ブログカード
   10. 見出しラベル・動画ライブラリ・絞り込み表示
   11. 広告バナー枠
   12. メイン画像スライダー
   13. キャッチ・マスコット・SPカテゴリ
   14. 信頼要素・CTA・最終CTA
   14b. キャラクター紹介（ベスタ・ターヤ）
   15. ホイールセット特集
   16. SP専用：課題から探すアコーディオン
   17. SP専用：バナーエリア
   18. レスポンシブ上書き（SP ≤760px / ≤480px）
   ============================================================== */


/* ==============================================================
   1. 基本設定（リセット・変数・共通）
   ============================================================== */
:root {
  --navy: #22315B;
  --navy-deep: #102e5a;
  --cream: #FFFFFF;
  --beige: #F2F2F2;
  --tail-red: #D0392E;
  --tail-red-dark: #AA2E25;
  --ink: #2B2A28;
  --ink-soft: #6B6862;
  --gray-bg: #f2f2f2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
}

/* PC/SP 出し分け用（既定はSP表示） */
.pc {
  display: none;
}
.sp {
  display: block;
}

/* 画面には出さず、検索エンジン・スクリーンリーダー・見出しチェックツールにだけ文字を渡す
   （display:none や visibility:hidden は読み上げられないので使わない） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

a:hover,
a:link,
a:visited {
  color: #000000;
}

h1 {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0 0 20px;
  padding: 10px;
  font-size: 20px;
}


/* ==============================================================
   2. カーライフ＋ サブナビ
   （グローバルヘッダー直下。ことりっぷ風：左右にアンカー、中央にロゴ）
   ============================================================== */
.carlife-subnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #fff;
  border-bottom: 1px solid #E0E0E0;
  padding: 12px 20px;
}

.carlife-subnav__links {
  flex: 1;
  max-width: 1200px; /* 下の本文コンテンツ（.page: max-width 1200px）と中央位置を揃える */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 0; /* 横方向の間隔は各要素のpaddingで管理するのでgapは0にする */
}

.carlife-subnav__links p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft, #6B6862);
  white-space: nowrap;
}

.carlife-subnav__links a {
  font-size: 18px;
  font-weight: 500;
  color: var(--navy, #1E2440);
  text-decoration: none;
  white-space: nowrap;
}

.carlife-subnav__links a:hover {
  color: var(--tail-red, #B23A2E);
}

/* 「人気のキーワード」〜各キーワード間を縦線で区切る
   （先頭・末尾は外側の余白なし。縦線を挟んで左右のテキストが同じ間隔になるよう、
   　両隣の要素に同じpaddingを与える） */
.carlife-subnav__links > * {
  padding: 0 14px;
}

.carlife-subnav__links > :first-child {
  padding-left: 0;
}

.carlife-subnav__links > :last-child {
  padding-right: 0;
}

.carlife-subnav__links > :not(:first-child) {
  position: relative;
}

.carlife-subnav__links > :not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #D5D5D5;
}

@media (max-width: 760px) {
  .carlife-subnav {
    gap: 0;
    padding: 10px 16px;
  }

  /* 横スクロールをやめ、折り返し表示にする */
  .carlife-subnav__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 0;
    padding: 0;
  }

  .carlife-subnav__links > * {
    padding: 0 5px;
  }

  /* ちょうど2行に収まるよう文字サイズも縮小（360px幅でも2行を維持できる値） */
  .carlife-subnav__links p,
  .carlife-subnav__links a {
    font-size: 10px;
  }

  /* PCと同じ縦線区切りを表示。ただし2行目の先頭（5番目の項目＝オールシーズンタイヤ）にだけ
     区切り線が浮いて見えてしまうため、そこだけ非表示にする
     （項目を増減した場合や行の折り返し位置が変わった場合は、この nth-child の番号を見直すこと） */
  .carlife-subnav__links > :nth-child(5)::before {
    content: none;
  }
}


/* ==============================================================
   3. パンくず
   ============================================================== */
ul.breadcrumbs {
  display: flex;
  padding: 10px 2%;
  margin: 0;
  background-color: #efefef;
}

ul.breadcrumbs > li {
  display: block;
  font-size: var(--compact-font-size);
}

ul.breadcrumbs > li + li {
  margin-left: 3px;
}

ul.breadcrumbs > li + li::before {
  content: "＞";
  margin-right: 3px;
}


/* ==============================================================
   4. ページレイアウト（本文＋PCライトカラム）
   ============================================================== */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px 96px;
}

/* PCライトカラム（サイドバー）：.page の中身には一切手を加えず、外側に追加するだけの構成。
   1620px 未満では2カラム化せず非表示にし、SPの見た目は従来どおり。 */
.page-shell {
  display: block;
  max-width: 100%;
}

.page-sidebar {
  display: none;
}

@media (min-width: 1620px) {
  .page-shell {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    padding: 0 20px;
  }

  .page-shell .page {
    padding-left: 0;
    padding-right: 0;
    min-width: 0; /* flexアイテムの既定 min-width:auto のままだと、
                     中身の横スクロール要素に引っ張られて縮まず、ページ全体がはみ出すため */
  }

  .page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 0 500px; /* = flex: 0 1 500px（2値のflexショートハンドは shrink が既定の1になる） */
    min-width: 220px; /* 想定より余白が少ない環境でも、見切れずに縮む側に倒す安全策 */
    margin-top: 48px;
  }
}


/* ==============================================================
   5. サイドバーカード（カテゴリタイル・課題アンカー）
   PCはライトカラム、SPは本文中に同じ見た目を使い回す
   ============================================================== */
.sidebar-card {
  background: #fff;
  border-radius: 0;
  padding: 22px 20px 24px;
}

.sidebar-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--tail-red);
}

.sidebar-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sidebar-tile {
  appearance: none;
  border: 1px solid #E0E0E0;
  background: var(--beige);
  color: var(--navy);
  border-radius: 0;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* 「すべて表示」（画像なしタイル）だけは3列分をまたいで1列表示にする */
.sidebar-tile:not(.sidebar-tile--photo) {
  grid-column: 1 / -1;
}

.sidebar-tile:hover:not(.sidebar-tile--photo),
.sidebar-tile.is-active:not(.sidebar-tile--photo) {
  background: var(--navy);
  color: #fff;
}

/* 画像付きタイル：写真の上に薄いグレーを敷き、白文字のラベルを重ねる */
.sidebar-tile--photo {
  position: relative;
  aspect-ratio: 5 / 3;
  padding: 0;
  border: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.sidebar-tile--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(43, 42, 40, 0.5);
  transition: background-color 0.15s ease;
}

.sidebar-tile--photo:hover::before,
.sidebar-tile--photo.is-active::before {
  background: rgba(30, 36, 64, 0.55);
}

.sidebar-tile__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.sidebar-anchor-list {
  display: flex;
  flex-direction: column;
}

.sidebar-anchor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 2px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid #EDEDED;
}

.sidebar-anchor-item:last-child {
  border-bottom: none;
}

.sidebar-anchor-item::after {
  content: '›';
  flex: none;
  color: var(--ink-soft);
  font-size: 16px;
}

.sidebar-anchor-item:hover {
  color: var(--tail-red);
}


/* ==============================================================
   6. シーンフィルタ
   ============================================================== */
.scene-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.scene-filter__label {
  width: 100%;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.scene-btn {
  appearance: none;
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  padding: 9px 20px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.scene-btn:hover,
.scene-btn.is-active {
  background: var(--navy);
  color: #fff;
}


/* ==============================================================
   7. お悩みブロック（課題で探す）
   目的別お悩みブロック。既存のブログカードをタグでまとめ直して表示する
   ============================================================== */
.worry-block {
  position: relative;
  background: #fff;
  border-radius: 0;
  padding: 50px clamp(20px, 4vw, 40px) 36px;
  margin-top: 44px;
  margin-bottom: 20px;
  border-top: 1px solid #c3c3c3;
  scroll-margin-top: 105px; /* 固定ヘッダー(75px)+30pxの余白分、スクロール到達位置を下げる */
}

.worry-block__badge {
  position: absolute;
  top: 12px;
  left: clamp(12px, 3vw, 10px);
  width: clamp(72px, 9vw, 120px);
  height: auto;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
  pointer-events: none;
  z-index: 1;
}

.worry-block__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  margin-bottom: 30px;
  padding-left: clamp(64px, 8vw, 84px);
}

.worry-block__head-text {
  min-width: 0;
  margin-left: 20px;
}

.worry-block__eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--tail-red);
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}

.worry-block__title {
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 900;
  color: var(--navy-deep);
  margin: 0;
  line-height: 1.5;
}

.worry-block__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.worry-tag {
  font-size: 14px;
  color: var(--navy);
  background: var(--beige);
  padding: 4px 12px;
  border-radius: 0;
}

.worry-block__desc {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 24px;
  line-height: 1.8;
}

/* お悩みカードは基本3枚だけ表示し、「もっと見る」で展開する */
.worry-grid .blog-link:nth-child(n+4) {
  display: none;
}

.worry-grid.is-expanded .blog-link:nth-child(n+4) {
  display: block;
}

.worry-more-btn {
  display: block;
  margin: 30px auto 0;
  appearance: none;
  background: none;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: 0;
  padding: 9px 28px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.worry-more-btn:hover {
  background: var(--navy);
  color: #fff;
}


/* ==============================================================
   8. 動画カード・動画モーダル
   ブログカード（9.）と同じ4列グリッド＋縦スクロール枠に統一している
   ============================================================== */
.section-heading {
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--tail-red);
}

.video-grid {
  margin-bottom: 36px;
}

.video-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--beige);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.video-card:hover {
  transform: translateY(-2px);
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-card__thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 再生アイコン（▶） */
.video-card__thumb::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  opacity: 0.9;
}

.video-card__title-wrap {
  display: flex;
  align-items: center;
  min-height: 80px; /* 2行分の高さを確保し、1行のタイトルでもカードの高さを揃える */
  padding: 14px 14px 16px;
  background: #fff;
  box-sizing: border-box;
}

.video-card__title {
  display: -webkit-box;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  -webkit-line-clamp: 2; /* 2行を超える場合は「…」で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* モーダル（縦動画 9:16） */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999; /* 固定ヘッダーより前面に出す */
  align-items: center;
  justify-content: center;
  /* 上は固定ヘッダー(75px)＋閉じるボタン(40px)分を空けて、閉じるボタンが隠れないようにする */
  padding: 115px 0 20px;
}

.video-modal.is-open {
  display: flex;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 51, 0.85);
}

.video-modal__inner {
  position: relative;
  /* 画面の高さに収まるよう、幅を「(画面高さ − 上下の余白135px) × 9/16」でも制限する */
  width: min(90vw, 380px, calc((100dvh - 135px) * 9 / 16));
}

@media (max-width: 760px) {
  .video-modal__inner {
    width: min(70vw, 300px, calc((100dvh - 135px) * 9 / 16)); /* SPは再生サイズを縮小（元は90vw・最大380px） */
  }
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 0;
  overflow: hidden;
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}


/* ==============================================================
   9. ブログカード（アイキャッチ付き）
   「記事で読む」(#blogList) と「お悩みから探す」(.worry-grid) で同じ .blog-link を使い回す
   ============================================================== */
.blog-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .blog-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .blog-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 「お悩みから探す」(.worry-grid) は3枚表示なので、900px以上でもここだけ3列に固定する。
   ※ 上の .blog-row と同じ詳細度のため、必ず .blog-row より後ろに書くこと */
@media (min-width: 900px) {
  .worry-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.blog-link {
  display: block;
  background: var(--beige);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease;
}

.blog-link:hover {
  transform: translateY(-2px);
}

.blog-link__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--beige), #E0E0E0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.blog-link__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル・更新日の「共通レイアウト」（高さ・余白・文字サイズなど）はここでまとめて管理し、
   背景色だけは下の #blogList / .worry-grid それぞれのルールで個別に指定する。
   （共通ルールに background を書くと、⑥記事一覧と⑦お悩みの両方が連動して変わってしまう） */
.blog-link__title-wrap {
  display: flex;
  align-items: center;
  min-height: 76px; /* 2行分の高さを確保し、1行のタイトルでもカードの高さを揃える */
  padding: 12px 14px 4px;
  box-sizing: border-box;
}

.blog-link span:not(.blog-link__thumb) {
  display: -webkit-box;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-line-clamp: 2; /* 2行を超える場合は「…」で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-link__date {
  display: block;
  padding: 4px 14px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.blog-link__date::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* Solidスタイルはウェイト900が必須 */
  content: "\f133"; /* fa-calendar */
  margin-right: 5px;
  color: var(--ink-soft);
}

/* 「記事で読む」（#blogList）のタイトル・更新日の背景色。ここだけを変えれば .worry-grid には影響しない */
#blogList .blog-link__title-wrap,
#blogList .blog-link__date {
  background: #fff;
}

/* 「お悩みから探す」（.worry-grid。記事一覧のカードを複製して表示）のタイトル・更新日の背景色。
   ここだけを変えれば #blogList には影響しない */
.worry-grid .blog-link__title-wrap,
.worry-grid .blog-link__date {
  background: var(--gray-bg);
}


/* ==============================================================
   10. 見出しラベル・動画ライブラリ・絞り込み表示
   ============================================================== */
.series-label {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--tail-red);
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}

/* h2として使う場合（「お悩みから探す」）：h2の既定の余白・文字サイズを持ち込まない */
h2.series-label {
  padding: 0;
  font-size: 24px;
}

/* 「お悩みから探す」の開閉button：見た目は画像だけ。
   サイト共通CSSの button スタイル（背景色・枠線・角丸など）に負けないよう、
   セレクタを強めて appearance ごと打ち消している */
h2.series-label > button.series-label--toggle {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: inherit;
  text-align: center;
}

/* マウス／タップ時は枠を出さず、キーボード操作（Tab）のときだけフォーカス枠を出す */
h2.series-label > button.series-label--toggle:focus {
  outline: none;
}

h2.series-label > button.series-label--toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

.series-label__img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
}

.video-library {
  background: #f2f2f2;
  border-radius: 0;
  padding: 32px clamp(20px, 4vw, 40px) 36px;
  margin-bottom: 28px;
  scroll-margin-top: 75px; /* 固定ヘッダー(75px)の分、スクロール到達位置を下げる */
}

.filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  background: #fff;
  border: 2px solid var(--tail-red);
  color: var(--tail-red);
  font-size: 20px;
  font-weight: 700;
  padding: 8px 40px;
  margin: 0 0 20px;
  scroll-margin-top: 75px; /* 固定ヘッダー(75px)の分、スクロール到達位置を下げる */
}

.filter-status[hidden] {
  display: none;
}

.filter-status__label {
  color: var(--tail-red);
  font-weight: 700;
}

.filter-status__suffix {
  color: var(--ink);
  font-weight: 500;
}

.filter-status__clear {
  appearance: none;
  border: none;
  background: none;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.blog-row--scroll {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 6px;
}


/* ==============================================================
   11. 広告バナー枠
   ・標準枠は 300×250。タイヤ/ホイールカタログ（--catalog）は画像の高さに合わせる
   ・画像は切り取らず（contain）全体を表示する
   ・PC（ライトカラム）は縦並び、SPは「17. バナーエリア」の2列グリッドに複製して表示
   ============================================================== */
.ad-banner-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ad-banner-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 300 / 250;
  background: var(--beige);
  border: 1px solid #E0E0E0;
  color: var(--ink-soft);
  overflow: hidden;
}

/* PC（ライトカラム、1620px以上）は親の幅の90%・中央寄せ。SP（2列グリッド）は1マスいっぱいの100% */
@media (min-width: 1620px) {
  .page-sidebar .ad-banner-slot {
    width: 90%;
    margin: 0 auto;
  }
}

/* リンク全体を押せる範囲にして、マウスを乗せたときに少し薄くする */
.ad-banner-slot__label {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: opacity 0.15s ease;
}

.ad-banner-slot__label:hover {
  opacity: 0.85;
}

.ad-banner-slot__label img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* タイヤカタログ／ホイールカタログ：グレー枠を画像サイズに合わせる（高さは画像なり） */
.ad-banner-slot--catalog {
  aspect-ratio: auto;
  height: auto;
}

.ad-banner-slot--catalog .ad-banner-slot__label {
  height: auto;
}

.ad-banner-slot--catalog .ad-banner-slot__label img {
  height: auto;
}


/* ==============================================================
   12. メイン画像スライダー
   （co-trip.jp風：白カード＋前後のスライドをちょい見せ。幅100%でページ最上部に全幅表示）
   ============================================================== */
.hero-slider {
  position: relative;
  width: 100%;
  padding: 16px 0;
  background: #102e5a;
  overflow: hidden; /* トラックの左右はみ出し分を隠す */
}

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 1px solid #E0E0E0;
  background: #fff;
  color: var(--navy-deep);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(20, 24, 51, 0.15);
}

.hero-slider__arrow--prev { left: 12px; }
.hero-slider__arrow--next { right: 12px; }

@media (max-width: 640px) {
  .hero-slider__arrow {
    display: none; /* スマホはスワイプ操作のみ */
  }
}

.hero-slider__track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  /* 両端の余白 = (100% - スライド幅) / 2 にして、中央のスライドの左右に
     次/前のスライドが均等に半分だけ見切れるようにする。
     ※ %指定だと「余白を引いた内側の幅」基準になり二重に縮んでしまうため、
       トラック自体の幅を基準にできる vw を使う（このスライダーは幅100%のため近似できる） */
  padding: 0 22vw;
}

.hero-slider__track::-webkit-scrollbar {
  display: none;
}

.hero-slider__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* CLS対策：中身（スライド）はJSが後から生成するため、生成前から高さを確保しておく。
   高さ = スライド幅×3/4（画像 4:3）＋ 本文部分（タイトル2行分）。
   スライド幅の vw 値は下の .hero-slide の flex-basis（56vw / 36vw / 32vw）と必ず合わせること。
   本文部分は SP(タイトル11px)=約106px、PC(タイトル24px)=約148px。 */
.hero-slider__track {
  min-height: calc(42vw + 106.4px);
}

@media (min-width: 640px) {
  .hero-slider__track {
    min-height: calc(27vw + 106.4px); /* ちょうど640pxだけ、タイトルがSPサイズ(11px)のまま */
  }
}

@media (min-width: 641px) {
  .hero-slider__track {
    min-height: calc(27vw + 148px);
  }
}

@media (min-width: 900px) {
  .hero-slider__track {
    min-height: calc(24vw + 148px);
  }
}

.hero-slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex: 0 0 56vw;
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(20, 24, 51, 0.08);
  opacity: 0.55;
  transform: scale(0.9);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 640px) {
  .hero-slider__track { padding: 0 32vw; }
  .hero-slide { flex: 0 0 36vw; }
}

@media (min-width: 900px) {
  .hero-slider__track { padding: 0 36vw; }
  .hero-slide { flex: 0 0 32vw; }
}

.hero-slide__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
}

.hero-slide__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スライド左上の「動画」「読み物」タグ（--video / --article は layout.js が item.type から付与） */
.hero-slide__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #fff;
  padding: 8px 30px;
  border-radius: 0;
}

.hero-slide__badge--video {
  background: var(--tail-red);
}

.hero-slide__badge--article {
  background: var(--navy);
}

@media (max-width: 760px) {
  .hero-slide__badge {
    top: 6px;
    left: 6px;
    font-size: 10px;
    padding: 4px 20px;
  }
}

/* 動画スライドのサムネイル中央に出す再生アイコン */
.hero-slide__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20, 24, 51, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-slide__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}

.hero-slide__body {
  padding: 16px 16px 18px;
}

.hero-slide__title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .hero-slide__title {
    font-size: 11px; /* PC(24px)のままだとカード幅(56vw)に対して大きすぎるため、スマホのみ縮小 */
  }
}

.hero-slide__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--tail-red);
  background: var(--beige);
  padding: 0 9px;
  border-radius: 0;
}

.hero-slider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  min-height: 7px; /* ドットはJSが生成するため、生成前から高さ(=ドット1個分)を確保（CLS対策） */
}

.hero-slider__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: #D5D5D5;
  cursor: pointer;
  padding: 0;
}

.hero-slider__dot.is-active {
  background: var(--tail-red);
}


/* ==============================================================
   13. キャッチ・マスコット・SPカテゴリ
   ============================================================== */
.catch {
  text-align: center;
  margin-bottom: 32px;
  width: 100%;
  height: auto;
}

.catch img {
  width: 100%;
  height: auto;
}

/* h1（KV画像）：見出しの既定スタイルを持ち込まず、見た目は従来のまま */
.catch__h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: 0;
}

.catch__logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

.catch__lead {
  font-size: 21px;
  font-weight: 900;
  color: var(--navy-deep);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

.catch__sub {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}

/* ベスタ・ターヤ紹介バナー：左右にキャラ動画、中央に吹き出し画像。
   PC：[ベスタ動画][吹き出し(2つ並んだ1枚)][ターヤ動画] の1行（左右に100pxの余白）
   SP：[ベスタ動画][吹き出し左] の1行だけ（ターヤ動画と右の吹き出しは非表示）
   動画・画像とも width/height（比率）を指定済みで、読み込み中にレイアウトがずれない（CLS対策） */
.mascots {
  padding-top: 30px;
  margin-bottom: 40px;
}

.mascots__row {
  display: grid;
  grid-template-columns: 12% 1fr 12%;
  grid-template-areas: "besta bubble taya";
  align-items: center;
  width: 100%;
}

.mascots__chara--besta {
  grid-area: besta;
}

.mascots__chara--taya {
  grid-area: taya;
}

.mascots__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 662;
}

.mascots__bubble {
  display: block;
  width: 100%;
  height: auto;
}

.mascots__bubble--pc {
  grid-area: bubble;
}

/* PCの吹き出しはvideo。CLS防止の比率指定（2048×428） */
.mascots__bubble-video {
  aspect-ratio: 2048 / 428;
  object-fit: contain;
}

/* SP用の吹き出しは、SPのときだけ表示する */
.mascots__bubble--sp-l,
.mascots__bubble--sp-r {
  display: none;
}

/* PCのみ：左右に余白を付ける */
@media (min-width: 761px) {
  .mascots {
    padding: 30px 100px;
  }
}

@media (max-width: 760px) {
  .mascots__row {
    grid-template-columns: 30% 1fr;
    grid-template-areas: "besta bl";
  }

  .mascots__bubble--pc {
    display: none;
  }

  .mascots__bubble--sp-l {
    display: block;
    grid-area: bl;
  }

  /* SPではターヤ動画と右の吹き出しは使わない。
     表示したい場合は、この2つを外し、上の grid-template-areas を
     "besta bl bl" "br br taya"（列は 30% 1fr 30%）に戻して、.mascots__bubble--sp-r を display: block; grid-area: br; にする */
  .mascots__chara--taya,
  .mascots__bubble--sp-r {
    display: none;
  }
}

/* SPのみ：「お悩みから探す」直前の「カテゴリで探す」カード（ライトカラムと同じ見た目を使い回す） */
.sp-category-card {
  display: none;
}

@media (max-width: 760px) {
  .sp-category-card {
    display: block;
    margin: 0 0 32px;   /* .page 内に置いているため左右余白は .page 側に任せる */
  }
}


/* ==============================================================
   14. 信頼要素・CTA・最終CTA
   .page-shell の外に配置し、サイドバーの隣ではなく画面幅いっぱいに表示する
   ============================================================== */
.trust {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: 48px;
  padding: 10px clamp(20px, 4vw, 40px) 50px;
}

/* 見出し下の飾り（赤＋紺の短いライン）。ホイールセット特集の見出し（.wheelset__title）と共通デザイン */
.trust__title {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 28px;
  padding-bottom: 16px;
}

.trust__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--tail-red) 50%, var(--navy-deep) 50%);
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 32px;
}

.trust-item {
  padding: 10px 18px;
  background: var(--beige);
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

/* 「選ばれる理由」「ホイールセット特集」の下のリンクボタン */
.trust__more {
  margin: 0;
  text-align: center;
}

.trust__more-link {
  display: inline-block;
  padding: 10px 32px;
  border: 1.5px solid var(--navy);
  color: var(--navy) !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.trust__more-link::after {
  content: "›";
  margin-left: 8px;
}

.trust__more-link:hover {
  background: var(--navy);
  color: #fff !important;
}

.cta-btn {
  display: inline-block;
  background: var(--tail-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 40px;
  border-radius: 0;
  transition: background-color 0.15s ease;
}

.cta-btn:hover {
  background: var(--tail-red-dark);
}

/* 最終CTA（あんしんガイド等と共通のクラス名。本番サイト側の共通CSSと合流する想定で、
   このデモ内で見た目が崩れないよう最低限のスタイルを当てている） */
.anshin-section.anshin-contact {
  background: var(--navy-deep);
  color: #fff;
  border-radius: 0;
  box-sizing: border-box;
  padding: 40px 24px 44px;
  text-align: center;
  margin: 0;
}

.anshin-contact h2 {
  margin: 0 0 16px;
  font-size: 24px;
  color: #fff;
}

.anshin-contact p {
  margin: 0 auto 10px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

.anshin-btn {
  display: inline-block;
  margin: 18px 8px 0;
  padding: 13px 28px 14px;
  border-radius: 0;
  text-decoration: none;
  font-size: 18px;
  transition: opacity 0.15s ease;
}

.anshin-btn:hover {
  opacity: 0.85;
}

.anshin-btn-primary-red {
  background: var(--tail-red);
  color: #fff !important;
}

.cta-chat-wrap-1 {
  margin-top: 28px;
}

.cta-chat-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #2da59c;
  padding: 14px 28px;
  border-radius: 30px 30px 0px 30px;
  letter-spacing: -0.08rem;
  line-height: 1.4;
}

.cta-chat-wrap .cta-btn.cta-chat {
  display: inline-block;
  background: transparent;
  color: #fff;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
}

.finger-icon-wrap {
  display: inline-flex;
}

.finger-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
}


/* ==============================================================
   14b. キャラクター紹介（ベスタ・ターヤ）
   「特徴」は吹き出しでイラストの横に表示。PCは2人を横並び、SPは縦並び。
   キャラごとの色は .character-card の --chara-color で切り替える。
   .page-shell の外に置き、画面幅いっぱいに背景を敷く。
   ============================================================== */
.characters {
  padding: 48px clamp(20px, 4vw, 40px) 56px;
  background: var(--beige);
}

.characters__title {
  position: relative;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 20px;
  padding-bottom: 0; /* 見出し下の飾りは無し（ホイールセット特集の見出しとは別扱い） */
}

/* 見出し下のサブテキスト */
.characters__lead {
  margin: 0 0 32px;
  text-align: center;
  font-size: 16px;
  color: var(--ink-soft);
}

.characters__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.character-card {
  --chara-color: var(--tail-red);
  background: #fff;
  border: 4px solid var(--chara-color);
  padding: 24px;
}

.character-card--besta {
  --chara-color: var(--tail-red);
}

.character-card--taya {
  --chara-color: #C95A8C; /* ターヤのピンク（白文字が読める濃さ） */
}

/* イラスト＋吹き出し */
.character-card__visual {
  display: flex;
  align-items: center;
  gap: 18px;
  /*margin-bottom: 18px;*/
}

.character-card__img {
  flex: 0 0 36%;
  width: 36%;
  height: auto;
}

/* mp4 差し替え時（video）：CLS防止の比率指定 */
.character-card__video {
  display: block;
  aspect-ratio: 480 / 720;
  object-fit: contain;
}

.character-card__bubble {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border: 2.5px solid var(--navy-deep);
  border-radius: 18px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-wrap: balance; /* 行末に1〜2文字だけ残らないようにする */
}

/* 吹き出しのしっぽ（イラスト側＝左向き）。外側が枠線色、内側が白 */
.character-card__bubble::before,
.character-card__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  border-style: solid;
  border-color: transparent;
}

.character-card__bubble::before {
  left: -14px;
  margin-top: -9px;
  border-width: 9px 14px 9px 0;
  border-right-color: var(--navy-deep);
}

.character-card__bubble::after {
  left: -9px;
  margin-top: -7px;
  border-width: 7px 11px 7px 0;
  border-right-color: #fff;
}

.character-card__bubble-label {
  display: block;
  width: fit-content;
  margin-bottom: 4px;
  padding: 0 10px;
  background: var(--chara-color);
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  line-height: 1.7;
}

.character-card__name {
    display: inline-block;
    margin: 0 0 4px;
    padding: 2px 20px;
    /* border-left: 4px solid var(--chara-color); */
    color: var(--navy-deep);
    color: var(--cream);
    font-size: 22px;
    /* font-weight: 900; */
    /* text-align: center; */
    line-height: 1.4;
    background: var(--chara-color);
}

.character-card__lead {
  margin: 10px 0 14px;
  color: var(--ink-soft);
  font-size: 15px;
  text-wrap: pretty; /* 「。」だけが次の行に落ちるのを防ぐ */
}

.character-card__profile {
  margin: 0;
}

.character-card__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #EDEDED;
  font-size: 15px;
}

.character-card__row dt {
  flex: none;
  min-width: 3em;
  color: var(--chara-color);
  font-weight: 700;
}

.character-card__row dd {
  margin: 0;
  color: var(--ink);
}

@media (min-width: 761px) {
  .characters__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}


/* ---- ポップ装飾 ----------------------------------------------
   キャラクター紹介を楽しい雰囲気にする飾りだけをまとめたブロック。
   このブロックごと削除すれば、元のシンプルな見た目に戻る。
   --chara-soft ＝ キャラ色を白で薄めた色（趣味・夢の区切り線に使用）
   ※ キャラクターはmp4（背景が白）のため、カードの背景は白のまま。色付き背景や丸は敷かない */
.character-card--besta {
  --chara-soft: #F6DBD9;
}

.character-card--taya {
  --chara-soft: #F5E1EC;
}

/* 背景：ベージュに白の水玉（規則的な配置）。
   ・2層を半周期ずらした「千鳥」配置にして、縦横にそろった□の格子に見えないようにしている
   ・点の縁を少しぼかして（半径+1px）、小さくても□ではなく丸く見えるようにしている
   ・2層とも同じ大きさ（3px）
   ・全体を7pxずらしてあるので、上端・左端で点が半分に切れない（上の点は端から7px） */
.characters {
  background:
    radial-gradient(circle, #fff 3px, rgba(255, 255, 255, 0) 4px) 21px 21px / 28px 28px,
    radial-gradient(circle, #fff 3px, rgba(255, 255, 255, 0) 4px) 7px 7px / 28px 28px,
    #F3E8D6;
}

.characters__title {
  font-size: 28px;
  font-weight: 900;
  /* 白フチ＋うっすら影で、ステッカーのような見出しに */
  text-shadow:
    2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
    0 3px 0 #fff, 0 -3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff,
    4px 5px 0 rgba(34, 49, 91, 0.18);
}

/* サブテキストはラベル風に */
.characters__lead {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 4px 20px;
  background: #fff;
  border: 2px solid var(--navy-deep);
  border-radius: 999px;
  color: var(--navy-deep);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--navy-deep);
}

/* カード：丸み＋ずらした影（背景は白のまま） */
.character-card {
  border-radius: 24px;
  box-shadow: 7px 7px 0 var(--chara-color);
}

.character-card__bubble {
  box-shadow: 3px 3px 0 rgba(34, 49, 91, 0.25);
}

.character-card__bubble-label {
  padding: 0 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 名前タグ：シール風 */
.character-card__name {
  padding: 3px 24px;
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--navy-deep);
}

/* 趣味・夢：キャラ色のラベル（丸）＋点線の区切り */
.character-card__row {
  border-top: 2px dotted var(--chara-soft, #EDEDED);
}

.character-card__row dt {
  min-width: 3.6em;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--chara-color);
  color: #fff;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 760px) {
  .characters__title {
    font-size: 22px;
  }

  .character-card {
    box-shadow: 5px 5px 0 var(--chara-color);
  }
}

@media (max-width: 480px) {
  .characters__title {
    font-size: 18px;
  }
}


/* 名前（ベスタ・ターヤ）以下をセンター揃えにする。吹き出しの中の文字は左揃えのまま */
.character-card {
  text-align: center;
}

/* 吹き出しの文字：PCは左揃え、SPは幅が狭く左に偏って見えるので、ラベルごと中央揃えにする */
.character-card__bubble {
  text-align: left;
}

@media (max-width: 760px) {
  .character-card__bubble {
    text-align: center;
  }

  .character-card__bubble-label {
    margin-left: auto;
    margin-right: auto;
  }
}

.character-card__row {
  justify-content: center;
}

/* ==============================================================
   15. ホイールセット特集（車種別リンク）
   SPは2列、761px以上は3列
   ============================================================== */
.wheelset {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.wheelset__title {
  position: relative;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 32px;
  padding-bottom: 14px;
}

.wheelset__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--tail-red) 50%, var(--navy-deep) 50%);
}
.wheelset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.wheelset-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #555 center / cover no-repeat;
  color: #fff;
  text-decoration: none;
}

.wheelset-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0); /* 初期は透明 */
  transition: background-color 0.22s ease;
}

/* ホバー／フォーカスで透過黒のオーバーレイを出し、ラベルの背景は消す（panel-links と同じ挙動） */
.wheelset-tile:hover::before,
.wheelset-tile:focus-visible::before {
  background: rgba(0, 0, 0, 0.5);
}

.wheelset-tile:hover .wheelset-tile__label,
.wheelset-tile:focus-visible .wheelset-tile__label {
  background: none;
}

.wheelset-tile__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: rgba(0, 0, 0, 0.50);
  border-radius: 20px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  width: 135px;
  max-width: 90%;
  padding: 5px 6px;
  text-align: center;
  white-space: normal;
  transition: background 0.18s ease;
}

/* 「詳細な車種別検索はこちら」ボタン（見た目は .trust__more-link を流用） */
.wheelset__more {
  margin-top: 20px;
}

@media (min-width: 761px) {
  .wheelset-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wheelset-tile__label {
    fwidth: 135px;
    pointer-events: auto;
    display: inline-block;
    background: rgba(0, 0, 0, 0.50);
    color: #fff;
    padding: 5px 6px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 600;
    width: 140px;
    text-align: center;
    white-space: normal;
    transition: background .18s ease, color .18s ease;
  }

  /* PC：#eeeの背景を画面幅いっぱいに敷き、中身は従来どおり最大1200px（左右20px余白込み）に収める */
  .wheelset {
    max-width: none;
    margin: 40px 0 0;
    padding: 40px max(20px, calc((100% - 1200px) / 2 + 20px));
    background: #eee;
  }
}

@media (max-width: 760px) {
  .wheelset__more {
    margin-top: 14px;
  }
}


/* ==============================================================
   16. SP専用：課題から探すアコーディオン
   「お悩みから探す」の見出し画像（.series-label--toggle）をタップすると開閉する。
   アコーディオン自体の見出し帯（summary）は使わず、常に非表示。
   PCではアコーディオン全体を非表示（ライトカラムに同じ内容が出るため）。
   ============================================================== */
.sp-issue-accordion {
  display: none;
}

@media (max-width: 760px) {
  .sp-issue-accordion {
    display: block;
    margin: 0 0 20px;
    background: #fff;
    border: 1px solid #E0E0E0;
  }

  .sp-issue-accordion:not([open]) {
    display: none;
  }

  .sp-issue-accordion__summary {
    display: none;
  }

  .sp-issue-accordion .sidebar-anchor-list {
    padding: 6px 14px 6px;
  }

  .sp-issue-accordion .sidebar-anchor-item {
    font-size: 12px;
    padding: 6px 6px;
  }

  /* 開閉ボタン（見出し画像＋案内文＋シェブロン）。
     文字は赤＋太字、文字の下の⌄も赤。閉じている間だけ軽く上下に動かして目立たせる */
  h2.series-label > button.series-label--toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .series-label--toggle > img {
    order: 1;
  }

  .series-label--toggle::after {
    order: 2;
    content: "タップして課題から探せます";
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--tail-red);
  }

  /* 文字の下・中央のシェブロン（⌄ / ⌃） */
  .series-label--toggle::before {
    order: 3;
    content: "";
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-right: 3px solid var(--tail-red);
    border-bottom: 3px solid var(--tail-red);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    animation: issue-toggle-bounce 1.6s ease-in-out infinite;
  }

  .series-label--toggle.is-open::after {
    content: "閉じる";
  }

  .series-label--toggle.is-open::before {
    margin-top: 8px;
    transform: rotate(-135deg);
    animation: none;
  }
}

@keyframes issue-toggle-bounce {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(4px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .series-label--toggle::before {
    animation: none !important;
  }
}


/* ==============================================================
   17. SP専用：バナーエリア
   最終CTAの下に2列で表示（PCではライトカラムに出るため非表示）。
   中身は layout.js が .page-sidebar のバナーを複製して入れる。
   ============================================================== */
.sp-banner-area {
  display: none;
}

/* 高さの違うバナーが隣り合っても、小さいほうを引き伸ばさず上揃えにする */
.sp-banner-grid {
  align-items: start;
}

@media (max-width: 760px) {
  .sp-banner-area {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 28px;
  }

  .sp-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* ==============================================================
   18. レスポンシブ上書き
   ※ このセクションは必ずファイルの最後に置く（各コンポーネントのベースルールより後に書いて上書きするため）
   ============================================================== */

/* ---------- SP（スマホ）480px以下 ---------- */
@media (max-width: 480px) {
  /* ページ全体 */
  .page {
    padding: 0px 20px 20px;
  }

  /* サイドバーカード／SPカテゴリ */
  .sidebar-card,
  .sp-category-card {
    background: #eee;
  }

  .sidebar-card {
    padding: 14px 10px 40px;
  }

  .section-heading,
  .sidebar-card__title {
    font-size: 14px;
  }

  .sidebar-tile {
    font-size: 12px;
    padding: 10px 0;
  }

  /* 文字サイズ（本文系をまとめて縮小） */
  .video-card__title,
  .blog-link span:not(.blog-link__thumb),
  .blog-link__date,
  .worry-block__desc,
  .worry-more-btn,
  .sidebar-tile__label,
  .trust-item {
    font-size: 11px;
  }

  /* シーンフィルタはSPでは非表示 */
  .scene-filter {
    display: none;
  }

  /* お悩みブロック */
  .worry-block {
    padding: 10px 0 32px;
  }

  .worry-block__badge {
    top: 20px;
    left: 0px;
  }

  .worry-block__head {
    padding-top: 12px;
    padding-left: clamp(50px, 8vw, 84px);
  }

  .worry-block__head-text {
    margin-left: 28px;
  }

  .worry-block__title {
    font-size: 16px;
  }

  .worry-tag {
    font-size: 9px;
    font-weight: 700;
  }

  /* 見出しラベル・動画ライブラリ・絞り込み表示 */
  .series-label__img {
    width: 70%;
  }

  .video-library {
    padding: 14px clamp(10px, 2vw, 10px) 14px;
  }

  .video-card__title-wrap {
    min-height: 42px;
    padding: 0px 6px;
  }

  .blog-link__title-wrap {
    min-height: 50px;
    padding: 0 6px;
  }

  .blog-link__date {
    padding: 0px 10px 10px;
  }

  .blog-row--scroll {
    padding-right: 0;
  }

  .filter-status {
    font-size: 18px;
  }

  .filter-status__suffix {
    font-size: 14px;
  }

  /* キャッチ・マスコット */
  .catch {
    margin-bottom: 0;
  }

  .catch__logo {
    margin: 0 auto;
  }

  .mascots {
    padding-top: 10px;
    margin-bottom: 12px;
  }

  /* 信頼要素・CTA */
  .trust {
    padding-top: 30px;
    margin-top: 60px;
    border-top: 1px solid #c3c3c3;
  }

  .trust__title {
    font-size: 16px;
    margin: 0 0 20px;
  }

  .trust__more-link {
    padding: 8px 24px;
    font-size: 12px;
  }

  .anshin-contact h2 {
    font-size: 18px;
  }

  .anshin-contact p {
    font-size: 13px;
  }

  .anshin-btn {
    padding: 11px 26px 12px;
    font-size: 13px;
    width: 240px;
  }

  .cta-chat-wrap {
    padding: 10px 10px 10px 30px;
    width: 250px;
    gap: 5px;
  }

  .cta-chat-wrap .cta-btn.cta-chat {
    font-size: 13px;
  }

  .finger-icon {
    width: 40px;
    height: 40px;
  }

  /* キャラクター紹介 */
  .characters {
    padding: 32px 30px 40px;
  }

  .characters__title {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .characters__lead {
    margin-bottom: 20px;
    font-size: 12px;
  }

  .character-card {
    padding: 16px;
  }

  .character-card__visual {
    gap: 14px;
    margin-bottom: 12px;
  }

  .character-card__bubble {
    padding: 10px 12px;
    font-size: 13px;
  }

  .character-card__bubble-label {
    font-size: 10px;
  }

  .character-card__name {
    font-size: 18px;
  }

  .character-card__lead,
  .character-card__row {
    font-size: 10px;
  }

  /* ホイールセット特集 */
  .wheelset {
    margin-top: 24px;
    padding: 0 10px;
  }

  .wheelset__title {
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }


  /* SPバナーエリア */
  .sp-banner-area {
    padding: 14px 10px 24px;
  }

  .sp-banner-grid {
    gap: 8px;
  }
}
/* ジャンプ位置の補正（SP）：スマホの固定ヘッダーは2段で100px。PCは75px（ベースのscroll-margin-top） */
@media (max-width: 760px) {
  .video-library,
  .filter-status {
    scroll-margin-top: 100px;
  }
  .worry-block {
    scroll-margin-top: 130px; /* ヘッダー100px + 余白30px */
  }
}

/* 絞り込み中の帯の「カテゴリを変える」ボタン（SPのみ。PCはカテゴリボタンが一覧のすぐ上にあるため不要）。
   押すと帯の中にカテゴリのテキストリスト（.filter-change-list）が開閉する */
.filter-status__change,
.filter-change-list {
  display: none;
}

@media (max-width: 760px) {
  .filter-status__change {
    display: inline;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    color: var(--navy);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
  }

  .filter-change-list:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 6px 0 4px;
    padding: 0;
    list-style: none;
  }

  .filter-change-item {
    appearance: none;
    border: 1px solid var(--navy);
    background: #fff;
    color: var(--navy);
    padding: 4px 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
  }

  .filter-change-item.is-active {
    background: var(--navy);
    color: #fff;
  }
}

/* 「すべて表示」の状態（.is-all）：PCは従来どおり帯ごと非表示。
   SPは「カテゴリ一覧」として帯を残し、「カテゴリを変える」から選び直せるようにする
   （「で絞り込み中」と「絞り込みを解除」は絞り込み中だけ出す） */
@media (min-width: 761px) {
  .filter-status.is-all {
    display: none;
  }
}

@media (max-width: 760px) {
  .filter-status.is-all {
    border-color: var(--navy);
  }

  .filter-status.is-all .filter-status__label {
    color: var(--navy);
  }

  .filter-status.is-all .filter-status__suffix,
  .filter-status.is-all .filter-status__clear {
    display: none;
  }
}