@charset "UTF-8";
/* EG用の全合体CSS */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
/* font-awesomeのインポート ※必ず先頭に記述すること（ここより上にCSSの記述をしない） */
/* ▼ここからサイト全体の共通ルール（リセットCSS、基本の文字色、リンクのホバー演出、全体フォントなど）▼*/
/* =================================================
   色の見本帳（CSS変数）
   ================================================= */
:root {
  /* --- 1. 基本ブランドカラー（黄緑） --- */
  --color-brand: #1db800; /* 基本の黄緑 */
  --color-brand-light: #f4fce8; /* 薄い黄緑（背景・セクション区切り用） */
  --color-brand-dark: #179a00; /* ホバー時や枠線用の濃いブランドカラー */
  --color-brand-bright: #66cc33; /* ボタン用の明るい緑 */
  /* --- 2. アクセントカラー（黄緑に合うアクセントカラー） --- */
  --color-orange: #ff6600; /* サブ強調色（オレンジ） */
  --color-orange-light: #fff8f0; /* 薄いオレンジ色（背景・ホバー用） */
  --color-orange-dark: #8a4b26; /* オレンジ背景に合わせた文字色 */
  --color-blue: #0b308a; /* 適合表ボタンなどの青色 */
  --color-blue-light: #3182ce; /* 薄い青色（背景・サブテキスト用） */
  --color-accent-red: #e32c04; /* 強調色 */
  /* --- 3. 汎用・ベースカラー（用途別に厳密に分離） --- */
  --color-white: #ffffff; /* 完全にニュートラルな「白」 */
  --color-black: #000000; /* 屋外視認性確保のための「黒」（基本文章用） */
  /* --- 4. テキストカラー（補助用） --- */
  --color-text-sub: #555555; /* 本文などで少し柔らかく見せる文字色 */
  --color-text-light: #666666; /* 注釈などの補助的な文字色 */
  --color-text-dark: #333333; /* 見出しやアイコンなどの濃いグレー */
  /* --- 5. 背景色（パーツ・領域用） --- */
  --color-bg: #f4f4f4; /* 標準グレー背景 */
  --color-bg-light: #fdfdfd; /* セクションのわずかな区切り（微細な白） */
  --color-bg-base: #f4f5f7; /* カルーセル背景などの少し青みがかったベース背景色 */
  --color-bg-hover: #f9f9f9; /* リストホバー時の薄い背景色 */
  --color-bg-pink: #fffafa; /* 注意書きの背景色（ピンク） */
  --color-bg-yellow: #fffeee; /* 注意書きの背景色（黄色） */
  --color-bg-blue: #e6f0ff; /* Q&Aの背景色（水色） */
  --color-bg-red: #fff5f5; /* 赤にあわせる背景色 */
  /* --- 6. 枠線・区切り線（ボーダー） --- */
  --color-border: #dddddd;
  --color-border-light: #eeeeee; /* 区切り線などの薄いグレー */
  --color-border-medium: #cccccc; /* やや濃いめの境界線 */
  --color-border-dark: #999999; /* 表のヘッダー区切りなど濃いめの境界線 */
  --color-border-pink: #ffc0cb; /* 注意書きの枠線（ピンク） */
  --color-border-yellow: #feebc8; /* 注意書きの枠線（黄色） */
  /* --- 7. 装飾・マーカー --- */
  --color-highlight: #fff9c4; /* 適合表検索ハイライト用 */
  --color-highlight-green: #C6F0C0; /* 蛍光ペン（黄緑） */
  --color-highlight-yellow: #ffeb3b; /* 蛍光ペン（黄色） */
  /* --- 8. コンポーネント専用カラー（サイドバー・外部サービス） --- */
  --color-cate-crawler-bg: #f0f7ef;
  --color-cate-crawler-bg-hover: #e2f0e0;
  --color-cate-crawler-border: #8bc34a;
  --color-cate-tire-bg: #f0f4f7;
  --color-cate-tire-bg-hover: #e0e8ed;
  --color-cate-tire-border: #90a4ae;
  --color-line-apps: #06c755; /* LINE公式カラー */
  /* --- 9. レイアウト・余白管理（8の倍数システム） --- */
  --space-xs: 0.25rem; /* 4px */ /* 極小の余白 / 調整用 */
  --space-sm: 0.5rem; /* 8px */ /* 小の余白 / テキストとボタンの間など */
  --space-md: 1rem; /* 16px */ /* 中の余白 / コンポーネント内の基本余白 */
  --space-lg: 1.5rem; /* 24px */ /* 大の余白 / コンポーネント間の余白 */
  --space-xl: 2.5rem; /* 40px */ /* 特大の余白 / セクション間の大きな区切り */
  --space-container-padding: 15px; /* コンテンツエリア左右の余白 */
  --nav-width: 85%; /* サイドメニューの幅 */
  /* --- 重なりの順序（z-index） --- */
  --z-header: 3000; /* 最前面 */
  --z-sidebar: 2000; /* 2番目 */
  --z-overlay: 1000; /* 3番目 */
}

/* カテゴリー別カラー変数（親クラスに付与して使用） */
.cate-combine {
  --cate-color: #e29c45;
} /* コンバイン (オレンジベージュ系) */
.cate-tractor {
  --cate-color: #4d4c4c;
} /* トラクタ (ダークグレー系) */
.cate-construction {
  --cate-color: #3b82f6;
} /* 建機 (ブルー系) */
.cate-hauling {
  --cate-color: #0d9488;
} /* 運搬・作業機 (青緑系) */
.cate-snow {
  --cate-color: #6366f1;
} /* 除雪機 (パープル系) */
.cate-mower {
  --cate-color: #ef4444;
} /* 草刈り機 (レッド系) */
.cate-loader {
  --cate-color: #3b6b91;
} /* ホイールローダー (スチールブルー系) */
.cate-forklift {
  --cate-color: #6b5b7b;
} /* フォークリフト (暗めのグレー紫系) */
.cate-pad {
  --cate-color: #6b4a3a;
} /* ゴムパッド (こげ茶系) */
.cate-harvester {
  --cate-color: #eab308;
} /* ハーベスタ (強いイエロー系) */
strong {
  color: var(--color-text-dark);
}

/* =================================================
   全体のリセット
   ================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  /* 屋外での視認性を高めるため、背景は純白がベスト */
  background-color: var(--color-white);
}

body {
  /* 建機パーツストアと同様 */
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  -webkit-font-smoothing: antialiased; /* 文字をクッキリさせる */
  color: var(--color-black);
  line-height: 1.6;
}

/* =================================================
   リンク設定
   ================================================= */
a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

a:hover {
  opacity: 0.7; /* 70%の濃さにする（背景が白なら少し薄くなる） */
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block; /* 画像下の余白を削除 */
}

/* ▼ここからEG専用CSS▼ */
/* =================================================
   全体のリセット
   ================================================= */
#container .header_area,
body #center3,
#contents .freearea {
  padding: 0;
  box-sizing: border-box;
  /* 屋外での視認性を高めるため、背景は純白がベスト */
  background-color: var(--color-white);
  /* 建機パーツストアと同じフォントを使用 */
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  -webkit-font-smoothing: antialiased; /* 文字をクッキリさせる */
  color: var(--color-black);
  line-height: 1.6;
  font-size: 100%;
}

#container .header_area h1,
#container .header_area h2,
#container .header_area h3,
#container .header_area h4 {
  text-align: center;
}

.header_area {
  margin: 0 0 0 var(--space-md); /* サイドメニューと余白を空けるため */
}

/* サイドメニューに干渉する為 */
* {
  box-sizing: content-box;
}

/* =================================================
   リンク設定
   ================================================= */
.header_area a, .freearea a, .wrap a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

#container ul,
#contents ul,
#container ol,
#contents ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  display: block; /* 画像下の余白を削除 */
}

/* =================================================
   メインコンテンツ内のセクション構造
   ================================================= */
#container .header_area section,
#contents .freearea section {
  margin-bottom: var(--space-lg); /* 各セクションの下にゆったりとした余白を設ける */
}

#container .header_area .table-block,
#contents .freearea .table-block {
  margin-bottom: var(--space-xl);
}

/* 对デフォルトCSS用（スマホ） */
#contents .freearea section {
  background: #ffffff;
}

/* =================================================
   見出し-機体イラストと背景イラスト
   ================================================= */
/* --- 背景画像の設定（カテゴリごとにクラスを分ける） --- */
.bg-tractor {
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url("https://www.gomukuro-town.com/pic-labo/d0087.webp"); /* 白を重ねて透明度を上げる */
}

/* --- 背景画像の設定（カテゴリごとにクラスを分ける） --- */
.bg-combine {
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url("https://www.gomukuro-town.com/pic-labo/d0110.webp"); /* 白を重ねて透明度を上げる */
}

/* =================================================
   ラジオボタンのスタイル
   ================================================= */
/* ボタン（ラベル）の基本スタイル */
.tab-btn,
.header_area .tab-btn,
.freearea .tab-btn {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-white);
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: 0.2s;
  text-decoration: none; /* <a>向け（コンバイン等） */
}

/* =================================================
   ゴムクロタウンが選ばれる理由
   ================================================= */
/* 対デフォルトCSS用 */
#contents .freearea section.trust-features {
  background: var(--color-brand-light);
}

/* ▼ここより下、小さな共通パーツ（ボタンや文字装飾）用CSS▼ */
/* =================================================
   バナーボタン用影パーツ（ホバーアニメーション付き）
   ================================================= */
.banner-btn-shadow {
  display: inline-block;
  filter: drop-shadow(var(--space-xs) var(--space-xs) 0px var(--color-border-dark)) brightness(1); /* くっきりとしたグレーの影を設定（ぼかし0） */
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease; /* 押した感を出すためアニメーションを少し早めに */
  will-change: transform, filter; /* ブラウザの描画を最適化し、カクつきを防ぐ */
}

.banner-btn-shadow:hover {
  transform: translate(var(--space-xs), var(--space-xs)); /* 右下に押し込む動き */
  filter: drop-shadow(0px 0px 0px transparent) brightness(1.05); /* 影を消す */
  opacity: 1;
}

/* =================================================
   CSSボタン用影パーツ（ホバーアニメーション付き）
   ================================================= */
.css-btn-shadow {
  filter: drop-shadow(var(--space-xs) var(--space-xs) 0px var(--color-border-dark));
  transition: transform 0.15s ease, filter 0.15s ease;
  will-change: transform, filter;
}

.css-btn-shadow:hover {
  transform: translate(var(--space-xs), var(--space-xs));
  filter: drop-shadow(0px 0px 0px transparent);
}

/* =================================================
   テキスト装飾
   ================================================= */
/* 最重要 赤太文字（大） */
.text-important {
  color: var(--color-accent-red);
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0 var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* 準重要・注意：少し控えめな強調（オレンジや黄色など） */
.text-attention {
  color: var(--color-accent-red);
  font-weight: bold;
}

/* 補足・注記：目立たせたくない補足テキスト（グレーなど） */
.text-sub {
  color: var(--color-text-sub);
  font-size: 0.85rem;
}

/* 基本のテキストリンク */
.text-link {
  color: var(--color-text-sub); /* またはメインのアクセントカラー */
  text-decoration: underline;
  text-underline-offset: 3px; /* 下線と文字の間に少しスキマを空けて読みやすく */
  font-weight: bold; /* 埋もれさせたくない場合は太字に */
  transition: opacity 0.2s;
}

.text-link:hover {
  opacity: 0.7; /* じわっと半透明に */
  text-decoration: none; /* ホバー時に下線を消す（または色を変える） */
}

/* =================================================
マーカー風装飾
================================================= */
.marker-yellow {
  background: linear-gradient(transparent 40%, var(--color-highlight-yellow) 40%);
  font-weight: bold;
  padding: 0 var(--space-xs);
}

.marker-green {
  background: linear-gradient(transparent 50%, var(--color-highlight-green) 50%);
  font-weight: bold;
  padding: 0 var(--space-xs);
}

/* =================================================
   ボタン・お問い合わせボタン (Q&Aなどで使用)
   ================================================= */
.contact-btn {
  display: inline-block;
  text-decoration: none;
  padding: 1px 10px;
  border-radius: 20px;
  margin: 0 4px;
  font-weight: bold;
  vertical-align: middle;
  transition: all 0.3s;
}

.contact-btn.mail-btn {
  background-color: var(--color-bg-hover);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-medium);
}

.contact-btn.line-btn {
  background-color: var(--color-line-apps);
  color: var(--color-white);
}

/* ▼ここより下、カテゴリページの共通パーツ用CSS▼ */
/* =================================================
   見出し-機体イラストと背景イラスト
   ================================================= */
.cate-heading {
  text-align: center;
  padding: 90px var(--space-sm) var(--space-lg); /* トラクタが地面にしっかり乗るよう下の余白を縮めます */
  /* ページごとのテーマカラーを背景やラインに薄く使うと統一感が出ます */
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-lg);
  /* --- 背景画像の共通設定 --- */
  background-repeat: no-repeat;
  background-position: center bottom; /* イラストの地面が下につくように */
  background-size: cover; /* PC/スマホ共通: 画面幅いっぱいで中央部分を切り抜く */
}

/* --- スマホ用（SMP）の調整 --- */
@media (max-width: 768px) {
  .cate-heading {
    padding: var(--space-xl) var(--space-md) var(--space-lg); /* スマホでは高さを抑えるよう上下の余白を縮小し、左右のpaddingを15pxに確保 */
  }
}
.cate-heading h1 {
  display: inline-block;
  margin: 0;
}

/* トラクタ画像：少しだけ浮かせると軽やかになります */
.cate-heading h1 img {
  display: block;
  margin: var(--space-md) auto 0; /* 上に文字との余白を取り、下は地面につける */
  width: 140px; /* サイズはお好みで */
  height: auto;
}

/* 重要！！　メインタイトル：ここの表記がパンくずに反映されます */
.cate-heading h1 .main {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-black);
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-shadow: 0 0 10px var(--color-white), 0 0 5px var(--color-white), 0 0 2px var(--color-white); /* 背景と被っても文字がハッキリ読めるように白フチを追加 */
}

/* サブタイトル：少し色を落とし、横にテーマカラーの飾りを置くのもあり */
.cate-heading h1 .sub {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-text-sub);
  margin-top: var(--space-sm);
  font-weight: bold;
  text-shadow: 0 0 8px var(--color-white), 0 0 3px var(--color-white); /* サブタイトルにも白フチ */
}

/* サブの両脇に細い線を入れて「かわいさ」を「デザイン感」に昇華 */
.cate-heading h1 .sub::before,
.cate-heading h1 .sub::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--color-border-dark);
  width: 30px; /* 線の長さ */
  margin: 0 var(--space-md);
}

/* =================================================
   見出し-下線（点線）スタイル（各コンテンツページのセクション用）
   ================================================= */
.content-heading {
  font-size: 1.6rem;
  color: var(--color-brand);
  text-align: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px dashed var(--color-brand);
}

@media screen and (max-width: 768px) {
  .content-heading {
    font-size: 1.3rem;
    margin-top: var(--space-lg);
  }
}
/* =================================================
   見出し-帯スタイル（適合表内タイトルなど）
   ================================================= */
/* 適合表用 */
.stripe-heading-table {
  background-color: var(--color-bg); /* 明るいグレーの帯背景 */
  border-left: 6px solid var(--cate-color); /* カテゴリごとのアクセントカラーに変更 */
  padding: 10px 15px;
  font-size: 1.25rem;
  color: var(--color-black);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

/* 青帯（インボイスページで使用） */
.stripe-heading-blue {
  background-color: var(--color-bg-blue);
  border-left: 6px solid var(--color-blue);
  padding: 10px 15px;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-blue);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

/* 赤帯（インボイスページで使用） */
.stripe-heading-red {
  background-color: var(--color-bg-red);
  border-left: 6px solid var(--color-accent-red);
  padding: 10px 15px;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

/* 表内の赤帯（インボイスページで使用） */
.simple-spec-table .stripe-heading-red {
  font-weight: normal;
  margin-bottom: 0;
  font-size: 0.85rem;
  padding: 6px 10px;
}

/* =================================================
   見出し-丸スタイル（Q＆Aなど）
   ================================================= */
.dot-heading {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  gap: var(--space-sm); /* ドットとテキストの間のすき間 */
  margin-bottom: var(--space-md);
}

.dot-heading::before {
  content: "";
  display: inline-block;
  width: 1rem; /* ドットの幅 */
  height: 1rem;
  border-radius: 50%; /* 完全な丸にする */
  background-color: var(--color-blue);
  flex-shrink: 0; /* 折り返されても丸が潰れないように設定 */
}

/* =================================================
   見出し-下線スタイル（インボイスページなど）
   ================================================= */
.underline-heading {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--color-blue-light);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

/* =================================================
   見出し-シンプルな水平線（適合表、関連ページなどのセクション用）
   ================================================= */
.section-divider {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
}

.section-divider::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 26px; /* 文字サイズに合わせて少しだけ長めに */
  border-radius: 3px;
  background-color: var(--color-brand);
  margin-right: var(--space-md); /* 文字との余白 */
}

/* =================================================
   BOX-最重要：注意事項BOX（商品ページのご注意文など）
   ================================================= */
.caution-box {
  width: 95%;
  margin: 0 auto;
  border: 2px dashed var(--color-accent-red);
  background: var(--color-bg-pink);
  border-radius: 8px;
  overflow: hidden;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.caution-box h2 {
  color: var(--color-accent-red);
  padding: 8px 15px;
  margin: 0;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
}

.caution-box dl {
  padding: 15px;
  margin: 0;
  text-align: left;
}

.caution-box dt {
  display: inline-block;
  color: var(--color-black);
  font-size: 1.05rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.caution-box dt::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 14px;
  margin-right: 8px;
  border-radius: 2px;
  background-color: var(--color-accent-red);
  vertical-align: -2px;
}

.caution-box dd {
  margin: 0 0 20px 0;
}

.caution-box dd:last-child {
  margin-bottom: 0;
}

/* =================================================
   BOX-準重要：注意・案内BOX（トラクタ表下の注意事項など）
   ================================================= */
.attention-box {
  border: 2px solid transparent;
  border-radius: 8px;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.attention-box ol {
  list-style: upper-alpha;
  margin-left: 1rem;
}

.attention-box ol li {
  margin-bottom: var(--space-xs);
}

.attention-box ol li:last-of-type {
  margin-bottom: 0;
}

.attention-box ol li::marker {
  font-weight: bold;
  font-size: 1.1em; /* 少し大きめにする場合 */
}

.attention-box-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.attention-box-list {
  font-size: 1rem;
  color: var(--color-text-dark);
  line-height: 1.6;
}

.attention-box-list span {
  font-weight: bold;
}

.attention-box-list li {
  padding-left: 1.2em;
  text-indent: -1.2em; /* 「※」が綺麗に揃うぶら下げインデント */
  margin-bottom: var(--space-sm);
}

/* カラー拡張 */
.attention-box.pink {
  background-color: var(--color-bg-pink); /* ほんのり目立つ優しいピンク色 */
  border: 2px solid var(--color-border-pink);
}

.attention-box.yellow {
  background-color: var(--color-bg-yellow); /* ほんのり目立つ優しい黄色 */
  border: 2px solid var(--color-border-yellow);
}

.attention-box.yellow .attention-box-title,
.attention-box.yellow ol li::marker {
  color: var(--color-orange);
}

/* =================================================
   BOX-控えめなドット（フッター内配送料の注記など）
   ================================================= */
.dotted-box {
  border: 1.5px dotted var(--color-accent-red);
  color: var(--color-accent-red);
  padding: 10px;
  font-size: 11px;
}

/* =================================================
   補足BOX-枠線なし薄い背景色のみ（インボイスページの補足など）
   ================================================= */
.note-box {
  background-color: var(--color-bg-base);
  padding: var(--space-md) var(--space-sm);
  margin-bottom: var(--space-md);
}

/* =================================================
   点線区切りリスト（商品ページのQ&A一覧　など）
   ================================================= */
.dot-list {
  margin: 0 0 var(--space-md);
}

.dot-list li {
  display: flex;
  align-items: flex-start; /* テキストが複数行になっても「・」が1行目の高さに揃う */
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dotted var(--color-border-medium); /* 下部の点線 */
}

.dot-list li:last-child {
  border-bottom: none; /* 一番最後の行だけ点線を消す */
}

/* ::before で先頭に黄緑色の「・」を自動付与 */
.dot-list li::before {
  content: "・";
  color: #8cc63f; /* 黄緑色のアクセントカラー */
  font-weight: bold;
  font-size: 1.2em;
  margin-right: 6px;
  flex-shrink: 0; /* 折り返されても「・」が潰れないように固定 */
}

/* =================================================
   情報バッジ・ラベル（インボイス対応店などで使用）
   ================================================= */
.info-badge {
  display: inline-block;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 10px;
}

/* =================================================
ボタン風リストのスタイル（ご利用ガイド一覧などで使用）
================================================= */
.guide-link-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(250px, (100% - 10px) / 2), 1fr));
  max-width: 870px;
  gap: 10px; /* ボタン間の隙間 */
}

.guide-link-list a {
  display: block;
  padding: 12px 40px 12px 20px;
  color: var(--color-text-dark);
  text-decoration: none;
  font-weight: bold;
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.guide-link-list a::after {
  content: "\f054"; /* Font Awesome 5 の矢印 */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-border-medium);
  transition: right 0.2s ease, color 0.2s ease;
}

.guide-link-list a:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-medium);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.guide-link-list a:hover::after {
  right: 15px;
  color: var(--color-orange);
}

/* =================================================
   シンプル仕様テーブル（インボイスページなど）
   ================================================= */
.simple-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.simple-spec-table th,
.simple-spec-table td {
  border: 1px solid var(--color-border-medium);
  padding: 10px;
  vertical-align: top;
  text-align: left;
}

.simple-spec-table thead th {
  background-color: var(--color-bg-base);
  color: var(--color-text-dark);
  font-weight: bold;
  vertical-align: middle;
}

.simple-spec-table tbody th {
  font-weight: bold;
}

/* =================================================
   ラジオボタンのスタイル
   ================================================= */
/* 1. 本物のラジオボタンは邪魔なので消す */
.tab-switch {
  display: none;
}

/* 2. 基本はすべての表を非表示にする */
.tab-content {
  display: none;
}

/* 3. 「すべて表示」がチェックされている時は、全表示 */
#tab-00:checked ~ .tab-content {
  display: block;
}

/* 4. 特定のボタンがチェックされたら、そのIDだけを表示 */
#tab-01:checked ~ #block-01,
#tab-02:checked ~ #block-02,
#tab-03:checked ~ #block-03,
#tab-04:checked ~ #block-04,
#tab-05:checked ~ #block-05,
#tab-06:checked ~ #block-06,
#tab-07:checked ~ #block-07,
#tab-08:checked ~ #block-08,
#tab-09:checked ~ #block-09,
#tab-10:checked ~ #block-10,
#tab-11:checked ~ #block-11,
#tab-12:checked ~ #block-12,
#tab-13:checked ~ #block-13,
#tab-14:checked ~ #block-14,
#tab-15:checked ~ #block-15,
#tab-16:checked ~ #block-16,
#tab-17:checked ~ #block-17,
#tab-18:checked ~ #block-18,
#tab-19:checked ~ #block-19,
#tab-20:checked ~ #block-20 {
  display: block;
  animation: fadeIn 0.3s ease; /* パッと切り替わる中にわずかな滑らかさを */
}

/* 5. 選択中のボタン（ラベル）を光らせる（視認性向上） */
#tab-00:checked ~ .quick-nav label[for=tab-00],
#tab-01:checked ~ .quick-nav label[for=tab-01],
#tab-02:checked ~ .quick-nav label[for=tab-02],
#tab-03:checked ~ .quick-nav label[for=tab-03],
#tab-04:checked ~ .quick-nav label[for=tab-04],
#tab-05:checked ~ .quick-nav label[for=tab-05],
#tab-06:checked ~ .quick-nav label[for=tab-06],
#tab-07:checked ~ .quick-nav label[for=tab-07],
#tab-08:checked ~ .quick-nav label[for=tab-08],
#tab-09:checked ~ .quick-nav label[for=tab-09],
#tab-10:checked ~ .quick-nav label[for=tab-10],
#tab-11:checked ~ .quick-nav label[for=tab-11],
#tab-12:checked ~ .quick-nav label[for=tab-12],
#tab-13:checked ~ .quick-nav label[for=tab-13],
#tab-14:checked ~ .quick-nav label[for=tab-14],
#tab-15:checked ~ .quick-nav label[for=tab-15],
#tab-16:checked ~ .quick-nav label[for=tab-16],
#tab-17:checked ~ .quick-nav label[for=tab-17],
#tab-18:checked ~ .quick-nav label[for=tab-18],
#tab-19:checked ~ .quick-nav label[for=tab-19],
#tab-20:checked ~ .quick-nav label[for=tab-20] {
  background: var(--color-brand); /* テーマカラーの緑 */
  color: var(--color-white);
  border-color: var(--color-brand);
  opacity: 1; /* 選択中はホバー時の透過を無効にする */
}

/* ボタン（ラベル）の基本スタイル */
.tab-btn {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-white);
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: 0.2s;
  text-decoration: none; /* <a>向け（コンバイン等） */
}

.tab-btn:hover {
  opacity: 0.6; /* ホバー時に少し色を薄くする */
}

/* ボタンの並び */
.quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  justify-content: center;
}

@media (max-width: 768px) {
  .tab-btn {
    padding: var(--space-sm);
  }
  .quick-nav {
    gap: var(--space-sm);
  }
}
/* =================================================
   ページ遷移型（type-link）のタブボタン制御
   ================================================= */
/* 目印クラス（type-link）がある中では、表を常に表示する（ラジオボタンの none を上書き） */
.type-link .tab-content {
  display: block;
}

/* 選択中のボタンを光らせる */
.tab-btn.is-active {
  background: var(--color-brand);
  color: var(--color-white);
  border-color: var(--color-brand);
  opacity: 1;
}

/* =================================================
   汎用ガイド・補足ブロック（例：パターン画像置き場・スプロケット形状）
   ================================================= */
.info-guide-container {
  container-type: inline-size;
  width: 100%;
}

.info-guide {
  margin-bottom: 0px;
  padding: var(--space-lg);
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.guide-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: var(--space-lg);
  color: var(--color-text-dark);
}

.guide-title i {
  margin-right: var(--space-sm);
  color: var(--color-brand);
}

.info-flex {
  display: flex;
  gap: var(--space-lg); /* 画像間の余白 */
  justify-content: center;
  flex-wrap: wrap;
}

.info-item {
  flex: 1 1 0; /* PC表示で均等に配置するための基本設定 */
  max-width: 370px; /* PC/スマホ両方での最大幅を370pxに制限 */
  width: 100%; /* スマホ表示で画面幅に合わせるため */
  display: flex;
  flex-direction: column; /* 画像を上、テキストを下に */
}

/* 画像エリア */
.info-img {
  aspect-ratio: 4/3; /* 画像のアスペクト比を固定して高さを揃える */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.info-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain; /* 画像全体を表示 */
}

/* テキストエリア */
.info-text {
  padding: var(--space-md) var(--space-xs); /* 上下の余白 */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-sub);
}

.info-text p {
  margin: 0 0 var(--space-sm); /* 段落間の余白 */
}

/* 適合・不適合の情報を画像外のテキストで繰り返さない */
/* 不適合側のテキストへの補足アクセント */
.info-ng .info-text {
  padding-left: var(--space-md);
}

.check-point {
  font-weight: bold;
  color: var(--color-text-dark); /* ユーザーが最も知りたい情報 */
}

/* --- スマホ (SMP) 対応 --- */
@container (max-width: 550px) {
  .info-guide {
    padding: var(--space-lg) var(--space-md);
  }
  .guide-title {
    font-size: 16px;
    margin-bottom: var(--space-lg);
  }
  .info-flex {
    flex-direction: column;
    align-items: center;
  }
}
/* =================================================
   ご案内おきば（バナーリンク）
   ================================================= */
.related-banner-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center; /* PC表示時に中央寄せにする */
}

.related-banner-link {
  display: block;
  width: 100%;
  max-width: 600px; /* バナーの本来のサイズ */
  border-radius: 8px; /* 角を少し丸くしておしゃれに */
}

.related-banner-link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit; /* 画像の角も親に合わせて丸くする */
}

.related-banner-link:hover {
  opacity: 1;
}

/* =================================================
   ゴムクロタウンが選ばれる理由
   ================================================= */
.trust-features {
  padding: var(--space-md) var(--space-md) var(--space-xl);
  text-align: center; /* h2を中央寄せするために追加 */
  container-type: inline-size; /* コンテナクエリの基準にする */
  background: var(--color-brand-light);
  box-sizing: border-box;
}

.trust-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: var(--space-lg);
  position: relative;
  line-height: 1.5; /* 改行時の重なりを防ぐため行間を調整 */
  text-align: center;
}

.trust-title span {
  padding: 0 0.3em;
  background: linear-gradient(transparent 50%, var(--color-highlight-green) 50%); /* 下半分に蛍光ペン風のライン */
  /* 改行しても装飾が途切れないようにする */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* デフォルトは最小の2列表示 */
  gap: var(--space-md);
}

/* コンテナの幅が650px以上になれば4列に切り替え（3列にはならない） */
@container (min-width: 650px) {
  .trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.trust-card {
  background: transparent; /* 背景を透明にし、疑似要素で制御 */
  border: 1px solid var(--color-border-light);
  padding: var(--space-md);
  border-radius: 5px;
  text-align: center;
  position: relative;
  isolation: isolate; /* 疑似要素の重なり順を制御するために追加 */
}

/* ストライプの影を疑似要素で作成 */
.trust-card::before {
  content: "";
  position: absolute;
  top: 6px; /* 右下へのズレ具合 */
  left: 6px; /* 右下へのズレ具合 */
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--color-border-medium), var(--color-border-medium) 2px, transparent 2px, transparent 6px);
  border-radius: inherit; /* 親と同じ角丸 */
  z-index: -2; /* 白背景のさらに後ろに配置 */
}

/* カード本体の白背景を疑似要素で作成 */
.trust-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  border-radius: inherit;
  z-index: -1; /* ストライプの前、コンテンツの後ろに配置 */
}

.trust-icon {
  font-size: 30px;
  color: var(--color-brand);
  margin-bottom: var(--space-sm);
}

.trust-card h3 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: var(--space-sm);
  color: var(--color-text-dark);
  text-align: center;
}

.trust-card p {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 768px) {
  .guide-container {
    flex-direction: column;
  }
}
/* ▼ここより下、カテゴリページでのみ使うパーツ用CSS▼ */
/* =================================================
   メーカーから探す（エリアの設定）
   ================================================= */
.maker-selection-box {
  background-color: color-mix(in srgb, var(--cate-color) 20%, transparent);
  padding: var(--space-md);
  border-radius: 12px;
  box-sizing: border-box;
}

/* 小見出しの背景エリア（下のgridと完全に密着） */
.maker-sub-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

/* フレックス水平線デザイン */
.maker-sub-title > p {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  letter-spacing: 0.1em;
}

.maker-sub-title > p::before,
.maker-sub-title > p::after {
  content: "";
  flex-grow: 1; /* 線を限界まで左右に伸ばす */
  height: 1px;
  background-color: var(--color-border-medium);
}

.maker-sub-title > p::before {
  margin-right: var(--space-md);
}

.maker-sub-title > p::after {
  margin-left: var(--space-md);
}

.maker-notice-text {
  color: var(--color-text-dark);
  font-size: 0.85rem;
  font-weight: bold;
  margin: 0;
  padding-left: var(--space-xs);
  display: flex;
  align-items: baseline;
}

.maker-notice-text::before {
  content: "\f06a"; /* ★exclamation-circle (！マーク) */
  font-family: "Font Awesome 5 Free";
  margin-right: var(--space-xs);
  font-size: 1rem;
  color: var(--color-orange);
}

/* ボタンのグリッド配置 */
.maker-grid {
  display: grid;
  /* スマホ画面は一律で「1fr 1fr」の綺麗な2列にフィットさせます */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  justify-content: center;
}

/* ボタン本体 */
.maker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.maker-card:hover {
  border-color: var(--color-brand-dark);
  background: var(--color-brand-light);
  opacity: 1;
}

/* 【PC環境（画面幅 629px 以上）の切り替えルール】※629pxはボタンが3つ入る最小幅
   個数に応じて「Grid（画面いっぱい）」と「Flex（左詰め）」を自動変身させます。 */
@media (min-width: 629px) {
  /* 4個以上の時のデフォルト挙動：140pxベースで画面いっぱいに広がるGrid */
  .maker-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  /* ★【自動切り替え】ボタンが「3個以下」しか無い時の特別ルール */
  /* 4個目のボタン（nth-child(4)）が存在しない時だけ、親の箱をFlexboxに変身させます */
  .maker-grid:not(:has(> .maker-card:nth-child(4))) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 無駄な隙間を作らず、左詰め */
  }
  /* 3個以下の時に、ボタンが巨大化してナンセンスになるのを防ぐストッパー */
  .maker-grid:not(:has(> .maker-card:nth-child(4))) .maker-card {
    width: 160px; /* PCでの見た目が一番綺麗に締まるサイズ */
    flex-grow: 0; /* 絶対にこれ以上太らせない */
  }
}
/* =================================================
   メーカーから探す（ボタンの中身の設定）
   ================================================= */
/* 1) 画像全体の箱（maker-pic-box） */
.maker-pic-box {
  width: 100%;
  height: clamp(35px, 15vw, 55px); /* 全ボタンで高さを55pxに完全固定 */
  display: flex;
  flex-direction: column; /* 基本（機体なし）は中央縦並び */
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* ★【自動切り替え】機体画像（.pic-machine）がある場合の「ハイブリッド重ね型」ルール */
.maker-pic-box:has(.pic-machine) {
  flex-direction: row; /* 横並びベースの重なり */
  justify-content: space-between;
}

/* 2) 機体画像：右寄せで見切れないように配置 */
.maker-pic-box .pic-machine {
  position: absolute;
  right: 0; /* ★右端に固定 */
  top: 50%;
  transform: translateY(-50%);
  height: clamp(30px, 12vw, 50px);
  /* ★【重要】画像が見切れない（途中でカットされない）ように contain で綺麗に収める */
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: right center;
     object-position: right center; /* 右詰めで綺麗にフィット */
  z-index: 1; /* ロゴの下に敷く */
}

/* 3) ロゴ格納エリア（pic-logo）：左側に大きく配置 ＋ 白シャドウ */
.pic-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* 【自動切り替え】機体画像がある場合は左に重ねて白影を付与 */
.maker-pic-box:has(.pic-machine) .pic-logo {
  position: absolute;
  left: 4px; /* ★左端から数ピクセルの場所にどっしり固定 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* ★機体画像の上に重ねる */
  align-items: flex-start; /* 左寄せ */
  gap: 2px;
  width: 70%; /* 横幅を70%まで広げて、ロゴを今までより一回り大きく表示 */
  height: 100%;
  /* ★背後の機体写真と被ってもロゴが100%くっきり見える、最強の「白い後光（縁取り）」 */
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 1px #ffffff);
}

/* ロゴ画像自体の共通サイズ制御 */
.pic-logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%; /* 基本は枠いっぱいに広げる */
  -o-object-fit: contain;
     object-fit: contain;
}

/* ★機体画像が左にいて、かつロゴが「2枚」縦並びする場合の、各ロゴの高さブレーキ */
.pic-logo img:nth-child(2) {
  max-height: 22px; /* 50pxの高さの中に2枚が綺麗に収まるように制限 */
}

/* 4） ロゴ無しメーカー用のテキスト（pタグ）設定
/* 基本（機体がない、完全テキストボタン）の時の中央配置 */
.maker-pic-box > p {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1.2;
  margin: 0;
  width: 100%;
}

/* 【自動切り替え】機体画像があって、かつロゴ無しのテキスト（p）である場合の絶対配置ルール */
.maker-pic-box:has(.pic-machine) > p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* ★これで100%機体画像の上に重なります */
  text-align: left;
  width: 90%;
  box-sizing: border-box;
  /* テキスト文字に対する「最強の白ふち（縁取り）」設定 */
  text-shadow: 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff;
}

/* =================================================
型式から探す・検索バー
================================================= */
/* リンクで指定されたID（ターゲット）にスタイルを適用（検索結果の遷移先設定） */
tbody:target tr,
tbody.is-target tr {
  background-color: var(--color-highlight);
  transition: background-color 0.5s ease; /* ふわっと光らせる演出 */
}

tbody[id] {
  scroll-margin-top: 100px; /* 固定ヘッダーの高さ＋余白 */
}

/* 検索コンテナ */
.search-container {
  position: relative;
  width: 100%;
}

/* サジェストリスト全体 */
.suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: none;
  border-radius: 15px;
  margin-top: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 900; /* サイドメニュー(2000)やオーバーレイ(1000)より下に設定 */
  max-height: 550px;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 1. 各候補アイテムの基本定義 */
.suggest-item {
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  position: relative;
  /* 縦線アクセントを入れるための準備 */
  border-left: 4px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 2. マウスホバー時、およびキーボード選択（.active）時のスタイルを完全統一 */
.suggest-item:hover,
.suggest-item.active {
  background-color: var(--color-orange-light);
  border-left-color: var(--color-orange);
}

.suggest-item:hover a {
  opacity: 1;
}

/* 3. 選択状態の時に、中の文字色がぼやけないように調整 */
.suggest-item:hover .model-name,
.suggest-item.active .model-name {
  color: var(--color-black);
}

/* 4. 候補内のリンク調整（隙間なくクリックできるようにする） */
.suggest-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px; /* やや余白を広げてスマホでもタップしやすく */
  text-decoration: none;
  color: var(--color-text-dark);
  width: 100%;
  box-sizing: border-box;
}

/* 5. 履歴アイテム（.history-item）が選択された時も同じ挙動にする */
.suggest-item.history-item:hover,
.suggest-item.history-item.active {
  background-color: var(--color-orange-light); /* 優しいオレンジの背景 */
  border-left-color: var(--color-orange); /* 左端にオレンジの縦線 */
}

/* 6. スクロールバーの見た目を微調整（リストが長くなった時用） */
.suggest-list::-webkit-scrollbar {
  width: 6px;
}

.suggest-list::-webkit-scrollbar-track {
  background: transparent;
}

.suggest-list::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
  border-radius: 3px;
}

.sub-info {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-left: 10px;
  text-align: right;
}

/* 該当なしメッセージ */
.suggest-no-result {
  padding: 15px;
}

.suggest-msg {
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* LINEボタン（contact-btnのLINEボタンとは別） */
.suggest-no-result .line-btn {
  display: inline-block;
  background-color: var(--color-line-apps);
  color: var(--color-white);
  padding: 8px 15px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

/* maliボタン（contact-btnのmailボタンとは別） */
.suggest-no-result .mail-btn {
  display: inline-block;
  background-color: var(--color-bg-hover);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-medium);
  padding: 8px 15px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

/* その他（さらに表示） */
.more-info {
  padding: 8px 15px;
  font-size: 12px;
  color: var(--color-text-light);
  background: var(--color-bg-light);
}

/* 1. 検索コンテナ */
.search-container {
  position: relative;
  width: 100%;
  display: flex; /* 入力窓とボタンを横並びにする */
  align-items: stretch;
  box-sizing: border-box;
}

/* 2. 検索窓本体の装飾変更 */
#modelSearch {
  flex: 1; /* ボタン以外の横幅をすべて埋める */
  width: 100%;
  height: 48px; /* 現場でも押し間違えないしっかりした高さ */
  /* clamp()で文字サイズと余白を可変に（スマホ:14px / PC:16px） */
  font-size: clamp(14px, 1.25vw + 10px, 16px);
  padding: 0 clamp(12px, 1.5vw + 6px, 20px);
  border: 2px solid var(--color-border-medium); /* しっかり視認できる枠線 */
  border-right: none; /* 右側のボタンと綺麗に連結させるため右線を消す */
  border-radius: 6px 0 0 6px; /* 左側だけをスマートな角丸に */
  background-color: var(--color-white);
  color: var(--color-black);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none; /* 古いiOS/Safari用 */
  -moz-appearance: none;
       appearance: none; /* ★互換性のために標準プロパティも定義します */
}

/* 入力中の枠線変化 */
#modelSearch:focus {
  background-color: var(--color-white);
  border-color: var(--color-brand); /* フォーカス時はブランドカラーの枠線にする */
  box-sizing: border-box;
}

/* 3. 検索ボタンの装飾変更（アイコンから「テキスト」へ変更・右端固定） */
.search-button {
  flex-shrink: 0; /* 画面が狭くなっても絶対に横に潰れないように固定 */
  /* clamp()でボタン幅を可変に（スマホ:75px / PC:95px） */
  width: clamp(75px, 2.5vw + 65px, 95px);
  height: 48px;
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--color-brand); /* 背景：基本の黄緑 */
  color: var(--color-white); /* 文字：白 */
  /* clamp()でボタン文字サイズを可変に（スマホ:15px / PC:16px） */
  font-size: clamp(15px, 0.5vw + 13px, 16px);
  letter-spacing: 0.2rem;
  font-weight: bold; /* 視認性（アクセシビリティ）確保のため太字化 */
  border-radius: 0 6px 6px 0; /* 右側だけをスマートな角丸に */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none; /* 古いiOS/Safari用 */
  -moz-appearance: none;
       appearance: none; /* ★互換性のために標準プロパティも定義します */
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

/* ボタンホバー時 */
.search-button:hover {
  background-color: var(--color-brand-dark); /* ホバー用の濃い黄緑 */
}

/* =================================================
   商品ページ全体を囲むブロック (最大幅や中央寄せの設定)
   ================================================= */
.product-block {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* =================================================
   案内ページ等の本文全体を囲むブロック (インボイス案内など)
   ================================================= */
.guide-block {
  font-size: 1rem;
}

/* コンテンツ領域内のpタグにまとめて下余白を付与 */
.guide-block p {
  margin-bottom: var(--space-sm);
}

/* guide-block 内の「直後（すぐ下）に要素が存在しない p」だけ margin-bottom を 0 にする */
.guide-block p:not(:has(+ *)) {
  margin-bottom: 0;
}

/* =================================================
   総合Q&A ページレイアウト (faq.htmlなど)
   ================================================= */
.qa-banner-btn-wrap {
  text-align: center;
  margin: 15px 0;
}

.qa-banner-btn-wrap img {
  max-width: 100%;
}

.qa-block {
  margin: 0;
  padding: 0;
}

.qa-block a:not(.contact-btn) {
  color: var(--color-text-dark);
  text-decoration: none;
  font-weight: bold;
}

.qa-category-title {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--color-blue);
  margin-bottom: var(--space-md);
}

.qa-block details {
  margin-bottom: 10px;
}

.qa-block summary,
.qa-block .qa-answer {
  display: flex;
  align-items: flex-start;
  gap: 15px; /* アイコンとテキストの隙間を一括管理 */
  margin: 0;
}

.qa-block summary {
  cursor: pointer;
  list-style: none; /* デフォルトの三角を消す */
  background-color: color-mix(in srgb, var(--color-bg-blue) 55%, transparent); /* 透明色と混ぜてbg-blueより少し薄く */
  padding: 15px 20px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.qa-block summary:hover {
  background-color: var(--color-bg-blue);
}

.qa-block .qa-answer {
  padding: 0 15px 10px; /* 帯の余白に合わせる */
  scroll-margin-top: 100px; /* アンカーリンク時のスクロール停止位置を上にずらし、Q部分を表示させる */
}

.qa-block summary::-webkit-details-marker {
  display: none; /* Safariのデフォルト三角を消す */
}

.qa-block details[open] summary {
  margin-bottom: 15px;
}

.qa-block summary::after {
  content: "＋";
  margin-left: 10px;
  color: var(--color-blue);
  font-size: 1.4rem;
  font-weight: bold;
  padding-top: 5px;
}

.qa-block details[open] summary::after {
  content: "－";
}

.qa-block summary > span:first-child,
.qa-block .qa-answer > span:first-child {
  flex: 0 0 60px; /* アイコンの幅固定 */
}

.qa-block summary > span:first-child img,
.qa-block .qa-answer > span:first-child img {
  width: 100%;
  height: auto;
}

.qa-block summary > span:last-child,
.qa-block .qa-answer > span:last-child {
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
}

.qa-block summary > span:last-child {
  font-weight: bold;
  color: var(--color-blue);
  font-size: 1.1rem;
  padding-top: 5px; /* アイコンとの縦位置調整 */
}

/* ふんわり表示させるアニメーション */
.qa-block details[open] .qa-answer {
  animation: qa-fade-in 0.4s ease-out forwards;
}

@keyframes qa-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Q&A内の番号付きリスト（全体リセットの解除） */
.qa-answer ol {
  list-style-type: decimal;
  padding-left: 1.5em; /* 数字を表示するための余白 */
  margin: 10px 0;
}

.qa-answer .qa-reason-list {
  margin: 15px 0 0 0;
}

.qa-answer .qa-reason-list li {
  margin-bottom: 15px;
}

.qa-answer .qa-reason-list li:last-child {
  margin-bottom: 0;
}

.contact-box {
  text-align: center;
  margin: 40px 0 20px 0;
  padding: 30px 20px;
  background-color: var(--color-bg-base);
  border: 2px solid var(--color-brand);
  border-radius: 8px;
}

.contact-box p {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 20px 0;
  color: var(--color-text-dark);
}

.qa-contact-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.qa-contact-buttons .contact-btn {
  padding: 12px 50px;
  border-radius: 30px;
  font-size: 1.05rem;
  margin: 0;
  filter: drop-shadow(4px 4px 0px var(--color-border-dark));
  transition: transform 0.15s ease, filter 0.15s ease;
  will-change: transform, filter;
}

.qa-contact-buttons .contact-btn:hover {
  transform: translate(4px, 4px);
  filter: drop-shadow(0px 0px 0px transparent);
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .contact-box p {
    font-size: 1rem;
  }
  .qa-contact-buttons {
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }
  .qa-contact-buttons .contact-btn {
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
    padding: 10px 20px;
    white-space: normal;
    line-height: 1.4;
  }
}
/* スマートフォン向け表示調整 */
@media screen and (max-width: 768px) {
  .qa-block summary,
  .qa-block .qa-answer {
    gap: 12px; /* スマホ時は隙間を少し狭くする */
  }
  /* Q&AのQとAアイコンを小さく */
  .qa-block summary > span:first-child,
  .qa-block .qa-answer > span:first-child {
    flex: 0 0 40px;
  }
  /* 質問テキストの位置とサイズ微調整 */
  .qa-block summary > span:last-child {
    font-size: 1.05rem;
    padding-top: 2px;
  }
  .qa-block summary::after {
    font-size: 1.2rem;
  }
}
/* ▼ここより下、ゴムクロ表用CSS▼ */
/* =================================================
gc-table: ゴムクロ表のスタイル
================================================= */
.gc-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap; /* 文字の折り返しを防ぎ、スクロールを発生させる */
  font-size: 14px;
  background-color: transparent;
}

/* 2. 見出し（thead）のデザイン */
.gc-table thead th {
  background-color: var(--color-text-sub); /* スタイリッシュなスレートグレー（青みの濃いグレー） */
  color: var(--color-white); /* 白文字で統一 */
  padding: 0.3rem;
  border: 1px solid var(--color-text-dark); /* 背景より少し濃い枠線で引き締める */
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.gc-table thead tr:first-child th:first-child {
  border-right: 2px solid var(--color-text-dark);
}

/* 3. データ行（tbody）のデザイン */
.gc-table tbody th,
.gc-table tbody td {
  padding: 0.8rem;
  border: 1px solid var(--color-border-light);
  text-align: center;
  vertical-align: middle;
}

/* 型式（1列目）の強調 */
.gc-table tbody th {
  font-weight: bold;
  color: var(--color-black);
  border-right: 2px solid var(--color-border); /* 縦の区切りを強調 */
  text-align: left;
}

/* 4. 縞々（ゼブラ） */
.gc-table tbody:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05); /* 奇数行をわずかに暗く */
}

/* --- ホバー時に行全体のカラーを変える（thも含む） --- */
.gc-table tbody tr:hover td,
.gc-table tbody tr:hover th {
  background-color: color-mix(in srgb, var(--cate-color) 20%, transparent); /* カテゴリ色を20%の濃さで表示（変更が簡単！） */
  transition: background-color 0.1s; /* 少しだけ滑らかに */
}

/* 「1本」「2本組」ボタン */
.gc-table a {
  color: var(--color-accent-red);
  font-weight: bold;
  text-decoration: none;
  border: 1px solid var(--color-accent-red);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 3px;
  background: var(--color-white);
  letter-spacing: 0.05em;
}

.gc-table a:hover {
  background: var(--color-accent-red);
  color: var(--color-white);
  opacity: 1;
}

/* =================================================
   アコーディオン（適合表）
   ================================================= */
.gc-accordion {
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  overflow: hidden;
}

.gc-accordion-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-white);
  cursor: pointer;
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--color-black);
  list-style: none; /* デフォルトの三角形を消す */
  transition: background-color 0.2s;
}

.gc-accordion-summary::-webkit-details-marker {
  display: none;
}

/* バー全体にマウスが乗ったとき、背景色を変更 */
.gc-accordion-summary:hover {
  background: var(--color-bg);
}

/* バー全体にマウスが乗ったとき、右側のボタンも連動して少し強調する */
.gc-accordion-summary:hover .summary-icon {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}

/* 開く・閉じるボタン */
.summary-icon {
  font-size: 0.85rem;
  padding: var(--space-xs) var(--space-md);
  border-radius: 20px;
  transition: all 0.2s ease;
  /* ★中の文字と記号を綺麗に横並びにするための設定 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0; /* 親要素の幅が狭くなっても、ボタン自体を絶対に縮ませない */
  /* ★初期状態（閉じ）を「青背景×白文字」に変更 */
  background: var(--color-blue);
  border: 1px solid var(--color-blue);
  color: var(--color-white);
}

/* ★開いているときのボタンの見た目を「白背景×青枠・青文字」に変更 */
details[open] .summary-icon {
  background: var(--color-white);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* ★文言の設定と、「+」「-」のサイズだけを大きく（1.25rem）調整 */
details:not([open]) .summary-icon::before {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  margin-right: 4px;
}

details:not([open]) .summary-icon::after {
  content: "表示する";
}

details[open] .summary-icon::before {
  content: "−";
  font-size: 1.25rem;
  line-height: 1;
  margin-right: 4px;
}

details[open] .summary-icon::after {
  content: "閉じる";
}

/* アコーディオン内の表の余白調整 */
.gc-accordion .responsive-table-wrapper {
  margin-bottom: 0;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

/* =================================================
  「？」ボタンを押したときのポップアップ表示
   ================================================= */
/* 質問ボタンのデザイン */
.help-btn {
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-size: 1.1em;
  padding: 0;
  margin-left: var(--space-xs);
  vertical-align: middle;
  transition: opacity 0.2s, transform 0.2s;
}

.help-btn:hover {
  opacity: 0.7;
}

/* ポップアップ本体 */
.hint-popover {
  /* 画面中央に配置するための指定 */
  inset: 0;
  margin: auto;
  width: 90%;
  max-width: 400px; /* リスト化で少し横幅が必要になるため広げます */
  height: -moz-fit-content;
  height: fit-content;
  padding: 1.5rem;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  background-color: var(--color-white);
  box-sizing: border-box;
}

/* ポップアップの背景（暗くする） */
.hint-popover::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px); /* 背景を少しぼかすとおしゃれです */
}

/* コンテンツのレイアウト（中央寄せ） */
.hint-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* テキストエリア全体 */
.hint-text-area {
  width: 100%;
}

/* タイトル */
.hint-title {
  font-weight: bold;
  font-size: 1.15rem;
  color: var(--color-text-dark);
  text-align: center;
  border-bottom: 2px solid var(--color-brand);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  letter-spacing: 0.05em;
}

/* 説明リスト（dl） */
.hint-list {
  margin: 0;
  padding: 0;
}

.hint-list dt {
  font-weight: bold;
  color: var(--color-black);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* 見出しの頭に小さなアクセントをつける */
.hint-list dt::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 14px;
  background-color: var(--color-brand);
  margin-right: var(--space-sm);
  border-radius: 2px;
}

.hint-list dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-sub);
}

/* 閉じるボタンのデザイン */
.hint-close-btn {
  background-color: var(--color-brand);
  border: 1px solid var(--color-brand-dark);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  font-weight: bold;
  color: var(--color-white);
  transition: all 0.2s ease; /* 変化を滑らかに */
}

.hint-close-btn:hover {
  filter: brightness(1.1);
}

/* =================================================
   表のスクロール関係
   ================================================= */
/* ★横スクロールを確実に発生させる設定★ */
.responsive-table-wrapper {
  width: 100%;
  margin-bottom: var(--space-xl);
  overflow-x: auto; /* 横スクロールを許可 */
  border: 1px solid var(--color-border);
  background: linear-gradient(to right, white, rgba(255, 255, 255, 0)), linear-gradient(to left, white, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--color-white);
  position: relative;
}

.responsive-table-wrapper::after {
  content: "⬅　スクロールできます　➡"; /* 絵文字とテキスト */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* 見た目の調整 */
  background: var(--color-brand);
  color: var(--color-white);
  padding: 12px var(--space-lg);
  border-radius: 50px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none; /* 下のテーブル操作を邪魔しない */
  /* 消える時のアニメーション */
  transition: opacity 0.4s, visibility 0.4s;
}

/* JSで「スクロール可能」と判断された時だけ表示 */
.responsive-table-wrapper.is-scrollable::after {
  opacity: 0.9;
  visibility: visible;
}

/* JSで「消す」と判断された時の状態 */
.responsive-table-wrapper.is-hidden::after {
  opacity: 0;
  visibility: hidden;
}

/* 左右に揺れる動き */
@keyframes scroll-move {
  0% {
    transform: translate(-50%, -50%) translateX(calc(var(--space-xs) * -1));
  }
  100% {
    transform: translate(-50%, -50%) translateX(var(--space-xs));
  }
}
.responsive-table-wrapper::after {
  animation: scroll-move 0.8s infinite alternate ease-in-out;
}

/* 「表は左右にスクロールして…」の表記（文言はJS側で設定） */
.scroll-text-before {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: var(--space-xs); /* テーブルとの間隔 */
  display: flex;
  align-items: center;
  font-weight: bold;
}

.scroll-text-before i {
  margin-right: var(--space-xs);
  font-size: 1.1em;
  color: var(--color-brand);
}

/* =================================================
   汎用カードグリッド（パターン画像）
   ================================================= */
.card-grid-container {
  container-type: inline-size; /* 子要素がコンテナ幅を基準にできるように設定 */
  width: 100%;
}

.card-grid {
  display: flex;
  flex-wrap: nowrap; /* 1列に固定（折り返さない） */
  gap: clamp(5px, 1.5cqi, 30px); /* コンテナ幅に応じて5px〜30pxの間でgapを自動調整 */
  justify-content: center; /* 並んだカード全体を中央に寄せる */
}

.info-card {
  flex: 0 1 120px; /* 最大サイズを120px程度（元画像相当）にし、入り切らない場合は均等に縮ませる */
  min-width: 0; /* 【重要】要素が親の幅に合わせて縮むことを許可する */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: clamp(8px, 2cqi, 12px) clamp(4px, 1cqi, 12px); /* コンテナ幅に応じて余白を自動調整 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-md);
}

.info-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.info-card-img img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.info-card-title {
  font-size: 0.95rem; /* カードが小さくなったので文字も少し小さめに */
  font-weight: bold;
  color: var(--color-text-dark);
  white-space: nowrap; /* 縮んだ際に文字が不自然に折り返して縦長になるのを防ぐ */
}

/* --- 補足エリア用のサブタイトルと注釈 --- */
.info-subtitle {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text-dark);
  margin-bottom: var(--space-md);
}

.info-note {
  font-size: 0.8rem;
  color: var(--color-text-sub);
  text-align: right;
}

@media (max-width: 768px) {
  .info-note {
    text-align: left;
  }
  .info-card {
    flex: 0 1 80px; /* 最大サイズを80px程度にし、入り切らない場合は均等に縮ませる */
  }
}
/* ▼ここより下、タイヤ表用CSS▼ */
/* ▼ここより下、商品ページ用CSS▼ */
/* =================================================
   商品ページ全体の設定
   ================================================= */
.wrap {
  font-family: メイリオ, Meiryo, sans-serif;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-black);
  margin: 15px auto;
  padding: 0 10px;
}

.wrap img {
  max-width: 100%;
  height: auto;
  border: none;
}

.wrap a {
  color: var(--color-text-dark);
  text-decoration: none;
  font-weight: bold;
}

.wrap a:hover {
  text-decoration: underline;
}

/* ボタン系のリンクはアンダーライン無効 */
.wrap .btn-wrap a:hover,
.wrap a.contact-btn:hover {
  text-decoration: none;
}

.wrap a:hover img {
  opacity: 0.8;
  transform: translate(0px, 3px);
}

.wrap a img {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* =================================================
   バナー画像（ボタン）
   ================================================= */
.banner-btn-wrap {
  text-align: center;
  margin: 30px 0 45px;
  padding: 0 10px; /* 影やホバー時の移動で見切れないよう左右に余白を確保 */
}

/* バナーボタン上のテキスト（その他の質問はこちら　など） */
.banner-btn-wrap p {
  margin-bottom: 10px;
  font-weight: bold;
}

.banner-btn-wrap img {
  width: 600px;
  max-width: 100%;
}

/* =================================================
   画像2枚並び (Flexbox)
   ================================================= */
.photo-images {
  display: flex;
  gap: 4%;
  margin: 20px 5px 30px;
}

.photo-images img {
  width: 48%;
  border: solid 2px #0b308a;
  box-shadow: 4px 4px 0px rgba(11, 48, 138, 0.4);
  box-sizing: border-box;
  border-radius: 4px;
}

#pi_sub2 .freearea .photo-images img {
  width: 48%;
  border: solid 2px #0b308a;
  box-shadow: 4px 4px 0px rgba(11, 48, 138, 0.4);
  box-sizing: border-box;
  border-radius: 4px;
}

/* =================================================
   商品説明の各セクション
   ================================================= */
.description-section {
  max-width: 900px;
  margin-bottom: var(--space-xl);
  margin: 0 auto;
}

.description-section h2 {
  margin-top: 0;
}

.description-section h2 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 40px auto 20px;
}

.feature-block {
  margin-bottom: 30px;
}

/* =================================================
   商品説明の特徴リスト
   ================================================= */
.feature-block dl {
  margin: 0 0 20px 0;
  text-align: left;
}

.feature-block dt {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--color-blue);
  margin-top: 20px;
  margin-bottom: 5px;
}

.feature-block dt::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 16px;
  margin-right: 8px;
  border-radius: 2px;
  background-color: var(--color-brand);
  vertical-align: -2px;
}

.feature-block dd {
  margin: 0 0 15px 0;
  line-height: 1.6;
  color: var(--color-text-dark);
}

/* =================================================
   ご注意枠
   ================================================= */
.chui {
  border: solid 3px #d71618; /* ご注意画像に合わせた枠線 */
  padding: 20px;
  background-color: var(--color-bg-yellow);
  border-radius: 0 10px 10px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--space-xl);
}

.chui dl {
  padding: 0;
  margin: 0;
  text-align: left;
}

.chui dt {
  font-weight: bold;
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.chui dt:first-child {
  margin-top: 0;
}

.chui dt::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 16px;
  margin-right: 8px;
  border-radius: 2px;
  background-color: #e60012;
  vertical-align: -2px;
}

.chui dd {
  margin-bottom: 1rem;
  padding: 0;
}

.chui p {
  color: var(--color-accent-red);
  font-weight: bold;
  margin-bottom: 0;
  padding: 0;
}

/* =================================================
   商品ページ内Q&A（楽天PC用）
   ================================================= */
/* FAQ 全体 */
.qa-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
}

/* 最後のQ&Aテーブルだけ下線を消す */
.qa-table:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* セルの共通設定 */
.qa-table td {
  padding: 15px;
}

/* 左側のアイコンセル（Qアイコン・Aアイコン） */
.qa-table td:first-child {
  vertical-align: top;
  white-space: nowrap;
}

/* 質問行 (Q) */
.qa-table-q {
  background-color: var(--color-bg-blue);
}

.qa-table-q p {
  color: var(--color-blue);
  font-size: 1.1rem;
  font-weight: bold;
}

/* 回答（A）の行 */
.qa-table-a td {
  vertical-align: top;
}

.qa-table .banner-btn-wrap {
  margin: var(--space-sm) auto var(--space-md);
}

/* =================================================
   商品ページ内Q&A（EG用）
   ================================================= */
/* Q&Aセクション (Flexbox) */
.qa-block {
  margin: 0;
  padding: 0;
}

.qa-block .qa-category-title:first-child {
  margin-top: 0;
}

.qa-block details {
  margin-bottom: 10px;
}

.qa-block summary,
.qa-block .qa-answer {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.qa-block summary {
  cursor: pointer;
  list-style: none; /* デフォルトの三角を消す */
  background-color: #f4f8ff; /* 薄い青色の帯 */
  padding: 15px 20px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.qa-block summary:hover {
  background-color: #e6f0ff;
}

.qa-block .qa-answer {
  padding: 0 15px 10px; /* 帯の余白に合わせる */
  scroll-margin-top: 100px; /* アンカーリンク時のスクロール停止位置を上にずらし、Q部分を表示させる */
}

.qa-block summary::-webkit-details-marker {
  display: none; /* Safariのデフォルト三角を消す */
}

.qa-block details[open] summary {
  margin-bottom: 15px;
}

.qa-block summary::after {
  content: "＋";
  margin-left: 10px;
  color: var(--color-blue);
  font-size: 1.4rem;
  font-weight: bold;
  padding-top: 2px;
}

.qa-block details[open] summary::after {
  content: "－";
}

.qa-block summary > span:first-child,
.qa-block .qa-answer > span:first-child {
  flex: 0 0 60px; /* アイコンの幅固定 */
  margin-right: 15px;
}

#pi_sub2 .freearea .qa-block summary > span:first-child img,
#pi_sub2 .freearea .qa-block .qa-answer > span:first-child img {
  width: 100%;
  height: auto;
}

.qa-block summary > span:last-child,
.qa-block .qa-answer > span:last-child {
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
}

.qa-block summary > span:last-child {
  font-weight: bold;
  color: var(--color-blue);
  font-size: 1.1rem;
  padding-top: 5px; /* アイコンとの縦位置調整 */
}

/* ふんわり表示させるアニメーション */
.qa-block details[open] .qa-answer {
  animation: qa-fade-in 0.4s ease-out forwards;
}

@keyframes qa-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.qa-reason-list {
  margin: 15px 0 0 0;
  padding-left: 1.5em; /* リストの数字を表示するための左余白 */
}

.qa-reason-list li {
  margin-bottom: 15px;
}

.qa-reason-list li:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  /* Q&AのQとAアイコンを小さく */
  .qa-block summary > span:first-child,
  .qa-block .qa-answer > span:first-child {
    flex: 0 0 40px;
    margin-right: 12px;
  }
  /* 質問テキストの位置とサイズ微調整 */
  .qa-block summary > span:last-child {
    font-size: 1.05rem;
    padding-top: 2px;
  }
  .quick-nav {
    gap: var(--space-sm);
  }
}
/* =================================================
   商品説明アコーディオン（商品の特徴をさらに見る）
   ================================================= */
.read-more-wrapper {
  position: relative;
  margin-bottom: 40px;
}

.read-more-wrapper img {
  margin: 0 auto;
}

.read-more-wrapper .banner-btn-shadow {
  display: block;
}

.read-more-check {
  display: none;
}

.read-more-content {
  position: relative;
  overflow: hidden;
  max-height: 330px; /* ファーストビューで表示する高さ */
  transition: max-height 0.6s ease;
}

.read-more-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 80%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.read-more-check:checked ~ .read-more-content {
  max-height: 5000px; /* コンテンツ全体が入る十分な高さ */
}

.read-more-check:checked ~ .read-more-content::after {
  opacity: 0;
}

.read-more-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  color: var(--color-brand);
  border: 2px solid var(--color-brand);
  padding: 10px 15px;
  margin: 0 auto;
  max-width: 300px;
  border-radius: 30px;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.read-more-label:hover {
  background-color: var(--color-brand);
  color: var(--color-white);
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.read-more-label::before {
  content: "商品の特徴をさらに見る ＋";
}

.read-more-check:checked ~ .read-more-label::before {
  content: "閉じる －";
}