/*
Theme Name: KIMERUCA Industrial
Author: Sole Proprietorship
Description: タイヤデータベース専用・工業的デザイン統合版（テーブルレイアウト修正済み・トップページ対応）
Version: 2.3
*/

/* =========================================================
   1. 変数定義 & リセット
   ========================================================= */
:root {
    /* モノトーン・パレット */
    --bg-body: #f4f6f8;        /* 工業的な薄グレー背景 */
    --bg-surface: #ffffff;     /* カード背景 */
    --bg-dark: #1a202c;        /* 濃紺に近い黒（ヘッダー・フッター） */
    
    --text-main: #1a202c;      /* メインテキスト（ほぼ黒） */
    --text-sub: #718096;       /* サブテキスト（濃いグレー） */
    
    --border-color: #e2e8f0;   /* 境界線 */
    --border-strong: #cbd5e0;  /* 強い境界線 */
    
    /* ブランドカラー */
    --accent-red: #e53e3e;     /* KIMERUCAレッド（唯一の有彩色） */
    
    /* フォント */
    --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-mono: "Roboto Mono", Consolas, monospace;

    --th-green-main: #009944;    /* ロゴに使われる深いグリーン */
    --th-green-accent: #76c900;  /* アクセント用の明るいライムグリーン（リボン等） */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-body);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--text-main); /* 基本リンク色を黒に */
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
}

a:hover {
    color: var(--accent-red); /* ホバー時のみ赤 */
    text-decoration: underline;
}

/* =========================================================
   2. レイアウト (Header, Footer, Main)
   ========================================================= */

/* --- Header --- */
.site-header {
    width: 100%;
    /* 背景を「半透明」から元の「濃紺（黒）」へ戻す */
    background-color: var(--bg-dark); 
    
    /* 絶対配置（重ね合わせ）を解除し、通常の配置へ */
    position: relative; 
    z-index: 100;
    
    /* 下線の赤ラインと影を復活 */
    border-bottom: 3px solid var(--accent-red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ロゴなどの文字が見やすいように少し影をつける（不要なら削除可） */
.site-branding {
    text-shadow: none; /* テキストシャドウも解除 */
}

.header-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.site-title {
    margin: 0;
    line-height: 1.2;
    font-size: 24px;
    font-weight: 700;
}
.site-title a { color: #fff; text-decoration: none; }
.site-title a:hover { opacity: 0.8; color: #fff; text-decoration: none; }

.site-tagline {
    display: block;
    font-size: 0.75rem;
    color: #cbd5e0;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Nav */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}
.main-navigation a {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.9rem;
}
.main-navigation a:hover {
    color: #fff;
    text-decoration: none;
}

/* --- Container & Main --- */
.content-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row-reverse; /* サイドバー左、メイン右など必要に応じて変更 */
    gap: 40px;
}

/* フロントページなど、サイドバーがないページ用の上書き */
.front-content-wrapper {
    flex-direction: column; /* 縦積み */
    max-width: 1100px;
    margin-bottom: 30px; /* ★修正：10pxだと狭すぎるため30pxに調整 */
}

main {
    flex: 1;
    min-width: 0;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--bg-dark);
    color: #cbd5e0;
    padding: 60px 0 20px;
    margin-top: 80px;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-label {
    display: block;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 1px solid #4a5568;
    padding-bottom: 5px;
    font-size: 0.9rem;
}

.footer-dir-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-dir-links li { margin-bottom: 8px; }
.footer-dir-links a { color: #a0aec0; }
.footer-dir-links a:hover { color: #fff; }

.site-info {
    border-top: 1px solid #2d3748;
    padding-top: 20px;
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    color: #718096;
}

/* =========================================================
   3. 記事・コンテンツスタイル (Typography & Cards)
   ========================================================= */

/* 記事カード */
article {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px; /* シャープな角丸 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 40px;
    overflow: hidden;
}

/* ヘッダー帯（工業デザイン） */
.product-header-band {
    background-color: #edf2f7;
    border-bottom: 1px solid var(--border-strong);
    padding: 30px 20px;
}
.header-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.data-id-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-sub);
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

h1.entry-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 10px 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
    border: none;
}
/* H1内のサブテキスト */
.h1-sub {
    font-size: 0.7em;
    color: var(--text-sub);
    font-weight: normal;
    display: inline-block;
    margin-left: 10px;
}
@media (max-width: 600px) {
    .h1-sub { display: block; margin-left: 0; margin-top: 5px; }

    /* ▼▼▼ 追加：記事内H2見出しのスマホサイズ調整（1行に収めるため縮小） ▼▼▼ */
    h2,
    .tire-article-header {
        font-size: 0.9rem; /* 1.4remから縮小して改行を防ぐ */
        padding: 5px 10px; /* 左右の余白も少し詰める */
        line-height: 1.3;
        margin-top: 30px;  /* 上の余白も少し調整 */
    }
    /* ▲▲▲ 追加ここまで ▲▲▲ */
}

/* ステータスバッジ（共通） */
.status-badge {
    background-color: #2d3748; /* 黒 */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 2px;
}
.status-badge.active { background-color: #2d3748; } /* 色を統一 */

/* 本文エリア */
.entry-content {
    padding: 40px;
}

/* 見出し */
h2 {
    font-size: 1.4rem;
    background: transparent;
    border-left: 6px solid var(--bg-dark); /* 黒ライン */
    padding: 5px 15px;
    margin: 40px 0 20px;
    color: var(--text-main);
}

/* =========================================================
   4. タイヤスペック表 (Industrial Grid Design)
   ========================================================= */

/* --- 選択エリア (White & Clean) --- */
.tire-selector-area {
    background: #fff;
    border: 1px solid var(--border-strong);
    padding: 30px;
    margin-bottom: 40px;
    text-align: center;
}

.selector-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    display: block;
}

.selector-sub-note {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 20px;
}

/* タブボタン（モノトーン） */
.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* ボタン同士の間隔も少し広げました */
}

.tab-btn {
    background-color: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 16px 28px;   /* 余白を増やしてボタンを大きく */
    font-size: 1.15rem;   /* 文字サイズを大きく */
    min-width: 180px;     /* 最低幅も少し広く */
    color: var(--text-sub);
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: all 0.2s;
    display: inline-flex; /* アイコンとテキストの並びを綺麗に */
    align-items: center;
    justify-content: center;
    gap: 8px; /* アイコンと文字の間隔 */
}

.tab-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background-color: #f7fafc;
}

.tab-btn.active {
    background-color: var(--bg-dark);
    color: #fff;
    border-color: var(--bg-dark);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* アクティブ時は少し浮き上がらせる */
}

/* --- スペック表本体 --- */
.tire-tab-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1;
    margin-top: 30px;
    animation: fadeIn 0.5s ease;
}

/* カテゴリセクション */
.category-section {
    margin-bottom: 50px;
}

.bto-spec-table-title {
    /* 背景と余白で「塊感」を出す */
    background: #edf2f7;      /* 薄いグレーの背景 */
    padding: 15px 20px;       /* 内側の余白をしっかり取る */
    border-radius: 4px;       /* 少し角丸 */
    margin-top: 60px;         /* 前のブロックとの距離を大きく取る */
    margin-bottom: 20px;      
    color: var(--text-main);

    /* 左側のアクセントライン */
    border-left: 6px solid var(--bg-dark); 
    border-bottom: none;      /* 下線は削除 */

    display: flex;
    align-items: center;
    gap: 12px;
}

/* 最初の要素だけ上部の余白を詰める（ページトップ付近で間延びしないように） */
.category-section:first-child .bto-spec-table-title {
    margin-top: 0;
}

/* メインの文字 */
.title-main-text {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* アイコン */
.title-icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* スマホ調整 */
@media (max-width: 600px) {
    .bto-spec-table-title {
        margin-top: 40px;
        padding: 12px 15px;
    }
    .title-main-text {
        font-size: 1.2rem;
    }
}




/* 注意書きバッジ */
.install-notice {
    display: inline-block;
    width: 100%;
    font-size: 0.85rem;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    background: #f7fafc;
    color: var(--text-sub);
    margin-bottom: 15px;
    border-radius: 4px;
}
/* ★変更：赤から黄色（注意・確認レベル）へ変更してCV阻害を防ぐ */
.notice-tire {
    color: #744210; /* 濃いブラウン/オレンジ */
    background: #fffff0; /* アイボリー */
    border-color: #f6e05e; /* イエロー */
}
.notice-wheel {
    /* 従来通り */
    color: #22543d;
    background: #f0fff4;
    border-color: #9ae6b4;
}

/* カードレイアウト (Flex Grid) */
.bto-spec-table table {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    border-collapse: collapse;
}

.bto-spec-table tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* 個別カード (Tr) */
.bto-spec-table tr {
    display: flex;
    flex-direction: column;
    flex: 1 1 280px;
    max-width: 32%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 25px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    margin: 0;
    opacity: 0;
    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* タイミングをずらしてリズムを作る */
.bto-spec-table tr:nth-of-type(1) { animation-delay: 0.1s; }
.bto-spec-table tr:nth-of-type(2) { animation-delay: 0.2s; }
.bto-spec-table tr:nth-of-type(3) { animation-delay: 0.3s; }

/* 2. ランク（松竹梅）の背景色を「はっきり見える濃さ」に変更 */
.bto-spec-table th {
    margin: -25px -25px 20px -25px;
    padding: 20px;
    width: calc(100% + 50px);
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
    color: var(--text-main); /* 文字色もはっきり黒に */
}

/* --- 色分け（視認できるレベルまで濃く調整） --- */

/* PREMIUM (松): しっかりしたブルーグレー */
.bto-spec-table tr:nth-of-type(1) th {
    background-color: #dae3f3; /* 以前より青みを強く、濃く */
    border-bottom-color: #cbd5e0;
}

/* STANDARD (竹): 安定感のあるグレー */
.bto-spec-table tr:nth-of-type(2) th {
    background-color: #eaedf2; /* 明確にグレーとわかる濃さ */
    border-bottom-color: #cbd5e0;
}

/* ECONOMY (梅): 濃いめのクリーム・ベージュ */
.bto-spec-table tr:nth-of-type(3) th {
    background-color: #fff0c7; /* 黄色味を強めて「安さ・目玉」感を出す */
    border-bottom-color: #fae6cd;
}

/* スマホ表示時のヘッダー調整 */
@media (max-width: 900px) {
    .bto-spec-table th {
        width: auto;
        margin: 0;
        padding: 6px 15px; /* スマホでもラベルを少し大きく */
        border-bottom: none;
        border-radius: 4px 0 4px 0;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
        font-weight: 800; /* スマホでも太字で強調 */
    }
}

.rank-main {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
}
.rank-sub {
    font-size: 0.8rem;
    color: var(--text-sub);
    font-weight: normal;
}

/* RECOMMENDED バッジ (迷ったらこれ) */
/* ★変更：理由を追加（バランス良） */
.bto-spec-table tr.is-recommended-card::before {
    content: "迷ったらこれ：バランス良";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #374151;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    z-index: 3;
    animation: badgePulse 3s infinite ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.bto-spec-table tr.is-recommended-card {
    border-color: var(--border-strong);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    z-index: 2;
}

/* * 商品情報エリア (Td) */
.bto-spec-table td {
    border: none;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 280px; /* 400pxから短縮。隙間を埋める */
}

.bto-table-item-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin-bottom: 15px;
}

/* 情報ラッパー（テキストとボタンを包む） */
.bto-item-info {
    width: 100%;
    padding: 0 20px 25px; /* 左右と下の余白 */
    display: flex;
    flex-direction: column;
    flex: 1; /* これが重要：残りのスペースをすべて埋める */
    align-items: center;
    text-align: center;
}

.bto-item-name {
    font-size: 1rem;
    font-weight: normal;    /* 800から通常(normal)へ変更 */
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: 10px;    /* 余白を少し詰める */
    height: 4.5em;          
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 価格・送料 */
.price-area {
    margin-bottom: 10px; /* 15pxから短縮 */
    width: 100%;
}

.bto-lowest-price {
    display: block;
    font-family: var(--font-base);    /* 基本フォント（Helvetica/Arial等）を適用 */
    font-size: 2rem; 
    font-weight: 800;                 /* 少し太めにしてAmazonのような力強さを出す */
    color: var(--text-main);
    letter-spacing: -0.02em;          /* 少し文字間を詰めるとよりプロっぽくなります */
    line-height: 1.1;
    margin-bottom: 5px;
}

/* 送料バッジを強力なフックにする */
.ship-badge {
    background: #fff !important;
    color: var(--accent-red) !important;
    border: 1px solid var(--accent-red) !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important; /* 少し大きく */
    padding: 4px 8px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 送料無料ならアイコンをつける（疑似要素） */
.ship-badge::before {
    content: "★";
    font-size: 0.8em;
}

/* 購入ボタン */
.bto-shop-button {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none !important;
    background-color: #374151 !important;
    color: #fff !important;
    border: 3px solid #374151 !important;
    padding: 12px 0 !important; /* 16pxから短縮してスリムに */
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    
    margin-top: auto; /* ★商品名が短くても、ボタンをカード最下部に揃える */
}

/* リンクボタン内のアイコン位置調整 */
.bto-shop-button span {
    vertical-align: middle;
    margin: 0 4px;
}

/* 演出統合: 光沢エフェクト */
.bto-shop-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shineButton 8s infinite;
}

/* ホバー時の挙動（赤く反転） */
.bto-shop-button:hover {
    background-color: var(--accent-red) !important;
    color: #fff !important;
    border-color: var(--accent-red) !important;
    box-shadow: 0 8px 15px rgba(229, 62, 62, 0.3);
    transform: translateY(-2px);
}


/* =========================================================
   5. サイドバー & ウィジェット
   ========================================================= */
aside {
    width: 300px;
    flex-shrink: 0;
}

.widget {
    background: #fff;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 30px;
}

.widget-title {
    font-size: 1.1rem;
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--text-main);
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget ul li {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}
.widget ul li:last-child { border-bottom: none; }

.list-model { display: block; font-weight: 700; font-size: 0.9rem; }
.list-date { display: block; font-size: 0.75rem; color: var(--text-sub); font-family: var(--font-mono); }

/* =========================================================
   6. レスポンシブ (Mobile)
   ========================================================= */
@media (max-width: 900px) {
    /* レイアウト調整 */
    .content-wrapper {
        flex-direction: column;
        margin-top: 20px;
        gap: 30px;
    }
    aside { width: 100%; }

    .entry-content, .product-header-band {
        padding: 20px;
    }

    /* --- スペック表スマホ化（横長リストへ） --- */
    
    .bto-spec-table tbody {
        justify-content: center;
        gap: 15px;
    }

    .bto-spec-table tr {
        flex: 1 1 100%;       /* 幅100% */
        max-width: 100%;      /* 幅制限解除 */
        flex-direction: row;  /* 横並び配置 */
        align-items: flex-start;
        text-align: left;
        padding: 20px;
        gap: 15px;
    }

    /* ラベル（PREMIUMなど） */
    .bto-spec-table th {
        position: absolute;
        top: 0; left: 0;
        width: auto;
        background: #edf2f7;
        padding: 4px 12px;
        font-size: 0.7rem;
        border-bottom-right-radius: 4px;
        text-align: left;
    }

    /* * 商品情報エリア (Td) - スマホ上書き設定 
     * PC設定の「縦並び」を「横並び」に変更
     */
    .bto-spec-table td {
        flex-direction: row;     /* 画像(左) 情報(右) */
        align-items: flex-start; /* 上揃え */
        gap: 15px;
        margin-top: 25px;        /* ラベル避け */
    }

    .bto-table-item-img {
        width: 90px;
        height: 90px;
        margin: 0;
        flex-shrink: 0; /* 画像が潰れないように */
    }

    /* 情報ラッパー - スマホ上書き設定 */
    .bto-item-info {
        display: block; /* 縦積みではなくブロック的に扱う */
        /* もしくは flex-direction: column; のままでもOKですが、左寄せを明示 */
        text-align: left;
    }
    
    .bto-item-name {
        height: auto; /* 高さ制限解除 */
        font-size: 0.9rem;
        margin-bottom: 5px;
        text-align: left;
    }

    .price-area {
        text-align: left;
        margin-bottom: 10px;
    }
    
    .bto-shop-button {
        padding: 8px 0;
        font-size: 0.9rem;
        margin-top: 0; /* スマホでは下揃え解除 */
    }

    /* おすすめバッジ位置調整 */
    .bto-spec-table tr:nth-of-type(2)::before {
        top: -10px; right: 10px; left: auto;
        transform: none;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar Hiding (Utility) */
.tire-tab-content::-webkit-scrollbar,
.bto-spec-table table::-webkit-scrollbar {
    display: none;
}
.tire-tab-content,
.bto-spec-table table {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* =========================================================
   7. フッターSNSアイコン修正
   ========================================================= */
.footer-social-links {
    display: flex;
    align-items: center;
    gap: 20px; /* アイコン同士の間隔 */
    margin-top: 10px;
}

.social-icon {
    display: inline-block;
    width: 24px;       /* アイコンの幅 */
    height: 24px;      /* アイコンの高さ */
    color: #cbd5e0;    /* アイコンの色（薄いグレー） */
    transition: color 0.2s;
}

.social-icon:hover {
    color: #fff;       /* ホバー時は白 */
}

/* SVG自体のサイズ制御 */
.social-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor; /* 親の文字色を引き継ぐ */
    vertical-align: middle;
}

/* =========================================================
   8. アニメーション定義 (@keyframesのみ保持)
   ========================================================= */

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes badgePulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.08); }
}

@keyframes shineButton {
    0% { left: -100%; opacity: 0; }
    5% { opacity: 1; }
    20% { left: 200%; opacity: 0; }
    100% { left: 200%; opacity: 0; }
}

/* =========================================================
   9. 「心配な方はこちら」リンクのボタン化
   ========================================================= */
.selector-footer-link {
    margin-top: 25px;
    text-align: center;
}

.selector-footer-link a {
    display: inline-block;
    padding: 12px 24px;
    background-color: #f7fafc; /* 薄いグレーの背景 */
    color: var(--text-sub);
    border: 1px solid var(--border-color);
    border-radius: 50px; /* 角丸（カプセル型） */
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* うっすら影 */
    transition: all 0.2s ease;
}

/* ホバー・タップ時の挙動 */
.selector-footer-link a:hover,
.selector-footer-link a:active {
    background-color: #fff;
    color: var(--text-main);
    border-color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* TIREHOOD / AUTOWAY へのテキストリンク装飾 */
.sub-link-tirehood,
.sub-link-autoway {
    display: inline-block;
    color: #e53e3e; /* ブランドカラーの赤 */
    font-size: 0.8rem;
    font-weight: bold;
    text-decoration: underline;
    transition: all 0.2s;
}

.sub-link-tirehood:hover,
.sub-link-autoway:hover {
    color: #c53030;
    background-color: #fff5f5; /* ホバー時に薄い赤背景 */
    text-decoration: none;
    border-radius: 2px;
}

/* =========================================================
   TIREHOOD カード専用スタイル (修正版：微調整・センタリング強化)
   ========================================================= */

/* カード全体の枠線 */
.tirehood-special-card {
    border: 1px solid var(--border-strong) !important; 
    border-top: 4px solid var(--th-green-main) !important; /* 上部アクセント */
    background: #fff;
    position: relative; 
    border-radius: 4px;
    padding: 15px; /* ★修正: 20px→15pxに減らし、テキストの表示領域を確保 */
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    z-index: 1; 
    text-align: center; /* ★追加: カード内全体を強制的に中央揃え */
}

/* ヘッダー調整（ある場合） */
.th-special-header {
    background: #f7fafc !important; 
    color: var(--text-main) !important;
    padding: 4px 10px !important; 
    font-size: 0.75rem !important;         
    font-weight: bold !important;
    border-radius: 3px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--border-color);
    box-shadow: none !important;
}

/* リボン非表示 */
.th-check-ribbon { display: none !important; }
.th-header-icon { color: var(--text-sub); }

/* コンテンツエリア */
.th-special-content {
    padding: 0 !important;
    background: transparent !important;
}

/* ロゴ周り */
.th-logo-row {
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.th-brand-name {
    color: var(--text-main) !important;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2; /* ★修正: 行間を調整 */
}

.th-brand-sub {
    font-size: 0.75rem;
    color: var(--text-sub);
    font-weight: normal;
    display: inline-block;
    margin-left: 5px;
}

/* メッセージボックス（商品名・価格エリア） */
.th-message-box {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-left: 4px solid #cbd5e0;
    padding: 15px 10px; /* ★修正: 左右の余白を少し詰め、文字が入る幅を広げる */
    font-size: 0.85rem;
    line-height: 1.6; /* ★修正: 行間を広げて読みやすく */
    color: var(--text-main);
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: center !important; /* ★修正: 強制中央揃え */
    letter-spacing: 0.02em;
    font-feature-settings: "palt"; /* ★修正: 日本語の文字間を美しく詰める */
}

.th-message-box strong {
    color: var(--text-main) !important;
    background: transparent !important;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: var(--accent-red);
}

/* 注釈テキスト（※〜の部分） */
.th-note-text {
    font-size: 0.7rem; 
    color: var(--text-sub); 
    line-height: 1.4;
    margin-top: 8px;
    text-align: center; /* 中央揃え */
    display: block;
}

/* ボタンの微調整 */
.th-special-btn {
    background-color: var(--th-green-main) !important;
    border: none !important;
    color: #fff !important;
    font-weight: bold;
    padding: 16px 5px !important; /* ★修正: 上下の厚みを増し、タップしやすく */
    border-radius: 4px;
    text-align: center;
    display: block;
    width: 100%;
    text-decoration: none;
    box-shadow: none !important;
    transition: all 0.2s ease;
    font-size: 0.95rem !important;
    line-height: 1.5 !important; /* ★修正: 改行時の行間を確保 */
    margin-top: 15px;
}

.th-special-btn:hover {
    background-color: #007a37 !important;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* メリットアイコン（グリッド） */
.th-merit-grid {
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; /* ★修正: 隙間を微調整 */
    margin: 15px 0;
    justify-content: center; /* 中央寄せ */
}
.th-merit-item {
    width: calc(50% - 4px); 
    background: #fff; 
    border: 1px solid var(--border-color);
    border-radius: 4px; 
    padding: 12px 5px; /* ★修正: 上下の余白を確保 */
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.th-merit-icon { 
    font-size: 1.4rem; 
    line-height: 1; 
    margin-bottom: 6px; 
    display: block; 
    opacity: 0.7; 
}
.th-merit-text { 
    font-size: 0.75rem; /* ★修正: 少し文字を大きく */
    color: var(--text-sub); 
    line-height: 1.4; 
    font-weight: normal;
    word-break: keep-all; /* ★修正: 変な位置での改行を防ぐ */
}
.th-merit-accent { 
    color: var(--text-main); 
    font-size: 0.8rem; 
    display: block; 
    margin-top: 2px; 
    font-weight: bold;
}

/* 差額メッセージ */
.diff-message {
    background: #f7fafc;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 12px 8px; /* ★修正: 左右余白調整 */
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 0.9rem; /* ★修正: 文字サイズ調整 */
    line-height: 1.6;  /* ★修正: 行間拡大 */
    box-shadow: none;
    font-feature-settings: "palt";
}

/* プランラベル */
.plan-label.plan-b { 
    background-color: #4a5568 !important; 
    box-shadow: none !important; 
}

/* スマホ調整 */
@media (max-width: 900px) {
    .tirehood-special-card {
        padding: 15px !important;
        border: 1px solid var(--border-color) !important;
        border-top: 4px solid var(--th-green-main) !important;
    }
    .th-check-ribbon { display: none !important; }
}

/* =========================================================
   10. Front Page Styles (Refined & Integrated)
   ========================================================= */

/* ▼▼▼ 1. 背景設定（没入感のあるダークテーマ） ▼▼▼ */
body.home {
    background-image: url('http://kimeruca.jp/car-tires/wp-content/uploads/2026/01/33957913_l-scaled.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll; 
    background-repeat: no-repeat;
    background-color: #1a202c; /* 画像が途切れた後の色 */
    min-height: 100vh;
    position: relative;
}

/* オーバーレイ（背景を暗くして文字を読ませる） */
body.home::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    /* コンテンツ量に合わせて高さを伸ばす */
    height: 100%;
    background: linear-gradient(to bottom, rgba(26, 32, 44, 0.7) 0%, rgba(26, 32, 44, 0.95) 100%);
    z-index: -1;
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px);
}

/* ▼▼▼ 2. ヒーローエリア（タイポグラフィ強化） ▼▼▼ */
.front-hero-wrapper {
    text-align: center;
    padding: 60px 20px 30px;
    color: #ffffff;
    position: relative;
    z-index: 10;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

/* ★追加: ヒーロー内 サンプル結果（レシート風） */
.hero-sample-card {
    background: rgba(255, 255, 255, 0.95);
    color: #2d3748;
    max-width: 320px;
    margin: 0 auto 30px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    font-family: var(--font-mono);
    text-align: left;
    transform: rotate(-2deg); /* 少し傾けて注目を集める */
    border: 1px dashed #cbd5e0;
    position: relative;
}
.hero-sample-card::before {
    content: "SIMULATION SAMPLE";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #e53e3e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
}
.sample-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 4px;
    border-bottom: 1px dotted #e2e8f0;
    padding-bottom: 2px;
}
.sample-total {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 1.1rem;
    margin-top: 8px;
    border-top: 2px solid #2d3748;
    padding-top: 6px;
}
.sample-note {
    font-size: 0.7rem;
    color: #718096;
    text-align: center;
    margin-top: 6px;
}

.hero-main-msg {
    margin: 0 0 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* 縦線を削除し、シンプルに中央配置 */
    border-left: none !important;
    padding-left: 0 !important;
    text-align: center;
    background: transparent !important;
}

/* ★修正: PCでも改行を有効化してレイアウト崩れを防止 */
.hero-main-msg br,
.hero-main-msg br.sp-only {
    display: inline !important;
}

.hero-msg-sub {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    color: #e2e8f0;
    letter-spacing: 0.05em;
}

.hero-msg-main {
    display: block;
    /* 文字サイズ調整 */
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* ★修正: サブメッセージの改行をスマホでも有効にする */
.hero-sub-msg {
    font-size: 1.6rem;
    color: #fff;
    line-height: 1.8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.hero-sub-msg br {
    display: inline !important; /* スマホでも改行を生かす */
}

/* スマホ調整 */
@media (max-width: 768px) {
    .front-hero-wrapper { padding-top: 40px; }
    
    /* スマホでの文字サイズ */
    .hero-msg-main { font-size: 1.8rem; }
    
    .hero-sub-msg { font-size: 0.85rem; text-align: center; display: block; }
}

/* ▼▼▼ 3. ウィザードカード（メインUI） ▼▼▼ */
.wizard-main-card {
    width: 100%; 
    max-width: 900px;
    margin: 0 auto 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    transition: height 0.3s ease;
}

/* プログレスバー（ヘッダー部分） */
.wizard-progress-header {
    padding: 40px 20px 20px;
    background: transparent;
    border-bottom: none;
    text-align: center;
}

.progress-info-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.progress-step-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #a0aec0;
    letter-spacing: 0.05em;
}

.progress-counter {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: #cbd5e0;
}

.progress-counter strong { 
    color: var(--accent-red); 
    font-size: 1.4rem; 
    margin-right: 4px; 
}

.progress-track {
    width: 100%;
    max-width: 400px;
    height: 6px;
    background: #edf2f7;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

.progress-fill {
    height: 100%;
    background: var(--accent-red);
    width: 33%;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 10px rgba(229, 62, 62, 0.4);
}

/* コンテンツエリア */
.wizard-container {
    position: relative;
    width: 100%;
    min-height: 350px;
    transition: height 0.4s ease;
}

.wizard-step {
    position: absolute;
    top: 0; left: 0; width: 100%;
    padding: 20px 40px 60px !important;
    box-sizing: border-box;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0;
    transform: translateX(30px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.wizard-step.active-step {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 10;
}
.wizard-step.step-left  { opacity: 0; transform: translateX(-30px); pointer-events: none; }
.wizard-step.step-right { opacity: 0; transform: translateX(30px);  pointer-events: none; }

/* ステップタイトル周り */
.step-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
    max-width: 800px;
}
/* 追加: 迷いを消すマイクロコピー */
.step-sub-note {
    font-size: 0.85rem;
    color: var(--text-sub);
    text-align: center;
    margin-bottom: 30px;
}

.step-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.02em;
    text-align: center;
    /* 縦線を削除し、シンプルに */
    border-left: none !important;
    padding-left: 0 !important;
    background: transparent !important;
}

/* 戻るボタン */
.back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #a0aec0;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.back-btn:hover {
    background: transparent;
    color: var(--text-main);
    transform: translateY(-50%) translateX(-3px);
}

/* --- ボタンレイアウト (Grid & Tile Design) --- */
.grid-cols {
    display: grid;
    /* 修正：160px -> 125px に変更し、ボタン幅を一回り小さく */
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 15px; /* 修正：20px -> 15px */
    width: 100%;
    max-width: 800px;
}

.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* 修正：25px -> 20px */
    width: 100%;
    max-width: 600px;
}

/* 選択ボタン（共通） */
.select-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none !important;
    color: var(--text-main);
    /* 修正：30px 20px -> 20px 10px に縮小 */
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 修正：110px -> 85px に縮小 */
    min-height: 85px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.select-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--text-main);
    z-index: 2;
}
.select-btn:active {
    transform: translateY(-1px);
}

.maker-name, .model-name {
    /* 修正：1.1rem -> 1.0rem に調整 */
    font-size: 1.0rem;
    font-weight: 700;
    line-height: 1.3;
}

/* 夏冬ボタン */
.type-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* 修正：10px -> 8px */
    text-align: center;
    width: 100%;
}
.type-icon {
    font-size: 2.5rem; /* 修正：3rem -> 2.5rem */
    flex-shrink: 0;
    margin-bottom: 5px;
}
.type-text strong {
    display: block;
    font-size: 1.1rem; /* 修正：1.2rem -> 1.1rem */
    margin-bottom: 2px;
}
.type-text span {
    font-size: 0.8rem; /* 修正：0.85rem -> 0.8rem */
    color: var(--text-sub);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .wizard-main-card {
        border-radius: 12px;
        margin-bottom: 40px;
    }
    .wizard-step { padding: 10px 20px 40px !important; }
    .wizard-progress-header { padding: 30px 20px 10px; }
    
    .step-title { 
        font-size: 1.3rem; 
        padding: 0 40px;
    }
    
    .back-btn span { font-size: 1.2rem; margin: 0; }
    .back-btn { 
        font-size: 0;
        width: 40px; 
        height: 40px;
        justify-content: center;
    }
    .back-btn span { display: block; font-size: 1.4rem; }

    .grid-cols { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .two-cols { grid-template-columns: 1fr; gap: 15px; }
    
    .select-btn {
        padding: 12px 5px; /* 修正：少し余白を詰める */
        min-height: 80px;  /* 修正：90px -> 80px */
    }
    .maker-name, .model-name { font-size: 0.9rem; } /* 0.95 -> 0.9 */
    
    .type-btn-content {
        flex-direction: row;
        text-align: left;
        padding: 0 10px;
    }
    .type-icon { font-size: 2rem; margin: 0; }
    .type-text strong { font-size: 1rem; margin: 0; }
}

/* =========================================================
   11. モバイル用グレード切り替えタブ
   ========================================================= */
.mobile-grade-selector {
    display: none;
}

@media (max-width: 900px) {
    .mobile-grade-selector {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 25px;
        background: #f7fafc;
        padding: 5px;
        border-radius: 50px;
        border: 1px solid var(--border-color);
    }

    .grade-tab-btn {
        flex: 1;
        border: none;
        background: transparent;
        padding: 10px 0;
        border-radius: 40px;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-sub);
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
    }

    .grade-tab-btn span.sub {
        font-size: 0.65rem;
        font-weight: normal;
        opacity: 0.8;
        display: block;
        transform: scale(0.9);
    }

    .grade-tab-btn.active {
        background: #fff;
        color: var(--text-main);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .grade-tab-btn[data-rank="松"].active { color: #2b6cb0; border: 1px solid #dae3f3; }
    .grade-tab-btn[data-rank="竹"].active { color: #2d3748; border: 1px solid #cbd5e0; }
    .grade-tab-btn[data-rank="梅"].active { color: #b7791f; border: 1px solid #fae6cd; }

    /* カード表示制御 */
    .bto-spec-table tr {
        display: none !important; 
    }
    .bto-spec-table tr.active-rank-card {
        display: flex !important;
        opacity: 1 !important;
        animation: none !important;
        visibility: visible !important;
        transition: opacity 0.3s ease;
    }
}

/* =========================================================
   12. モバイル表示レイアウト調整
   ========================================================= */
@media (max-width: 900px) {
    .bto-spec-table tr {
        flex-direction: column;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .bto-spec-table th {
        position: static !important;
        width: 100%;
        display: block;
        margin: 0;
        padding: 10px 15px;
        text-align: center;
        border-radius: 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        z-index: 2;
    }
    
    .rank-main { 
        font-size: 1.1rem; 
        display: inline-block; 
        margin-right: 8px;
    }
    .rank-sub { 
        display: inline-block; 
        font-size: 0.85rem; 
        opacity: 0.9; 
        font-weight: normal; 
    }

    .bto-spec-table tr.is-recommended-card::before {
        content: none !important;
        display: none !important;
    }

    .bto-spec-table tr.is-recommended-card th::after {
        content: "▼ 迷ったらこれ（バランス良）";
        display: block;
        width: fit-content;
        margin: 8px auto 0;
        padding: 4px 12px;
        background-color: #2d3748;
        color: #fff;
        font-size: 0.75rem;
        font-weight: bold;
        border-radius: 20px;
        line-height: 1.2;
    }

    .bto-spec-table td {
        margin-top: 0 !important;
        padding: 20px !important;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .bto-table-item-img {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
    }
    .bto-item-info {
        text-align: center;
        padding: 0;
    }

    .tirehood-special-card {
        padding: 0 !important;
        border: 2px solid var(--th-green-main) !important;
        overflow: hidden;
        border-radius: 8px;
    }

    .th-check-ribbon {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        background-color: var(--th-green-accent) !important;
        color: #fff !important;
        text-align: center !important;
        padding: 6px 0 !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
        margin-bottom: 0 !important; 
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block !important;
        line-height: 1.4 !important;
    }
    
    .th-special-content {
        padding: 15px !important;
    }

    .th-logo-row {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }
    .th-brand-name {
        width: 100% !important;
        text-align: center !important;
    }
    .th-brand-sub {
        width: 100% !important;
        text-align: center !important;
    }
}

/* =========================================================
   13. Utility Classes (New)
   ========================================================= */
/* 改行調整用 */
.sp-only {
    display: none;
}
@media (max-width: 768px) {
    .sp-only {
        display: inline;
    }
    .pc-only {
        display: none;
    }
}

/* =========================================================
   14. 工賃根拠モーダル (Fee Evidence Modal)
   ========================================================= */
.fee-source-trigger {
    display: inline-block;
    font-size: 0.75rem;
    color: #718096;
    text-decoration: underline;
    margin-left: 8px;
    cursor: pointer;
    font-weight: normal;
}
.fee-source-trigger:hover {
    color: var(--accent-red);
}

/* モーダル背景 */
.fee-modal-overlay {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 背景を暗く */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fee-modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* 画像ラッパー */
.fee-modal-content {
    background: #fff;
    padding: 10px;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: auto;
}

.fee-modal-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 閉じるボタン */
.fee-modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #333;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}
.fee-modal-close:hover {
    color: #000;
}

/* =========================================================
   適合一覧表（tire-compatibility-list）専用のスクロール設定
   ========================================================= */

/* もし一覧表が <div> や <table> で ID 指定されている場合、
   その親要素に対して高さを制限します。
*/
#tire-compatibility-list {
    max-height: 40vh !important; /* 画面の約1/3〜40%の高さに制限 */
    overflow-y: auto !important;  /* 縦スクロールを有効化 */
    border: 1px solid var(--border-color);
    padding: 15px;
    background: #fff;
    margin-top: 10px;
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
}

/* 適合表内のスクロールバーを見やすくデザイン */
#tire-compatibility-list::-webkit-scrollbar {
    width: 8px;
    display: block;
}
#tire-compatibility-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#tire-compatibility-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}
#tire-compatibility-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-sub);
}

/* =========================================================
   非メインのアコーディオン：最下部「閉じる」ボタン
   ========================================================= */
.accordion-bottom-close {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 12px 14px;
	background: #f7fafc;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	color: var(--text-main);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

.accordion-bottom-close:hover,
.accordion-bottom-close:active {
	background: #fff;
	border-color: var(--text-main);
}


/* =========================================================
   15. サイズ確認ガイドモーダル (Size Check Modal)
   ========================================================= */
.size-guide-modal {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.size-guide-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.size-guide-content {
    background-color: #fff;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: slideUpFade 0.3s ease-out;
}

.guide-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.guide-close:hover { color: #000; }

.guide-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
    border-bottom: 2px solid var(--accent-red);
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.guide-step {
    margin-bottom: 20px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 20px;
}
.guide-step:last-child { border-bottom: none; margin-bottom: 0; }

.guide-step-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.step-num {
    background: var(--text-main);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin-right: 8px;
}

.guide-text { font-size: 0.9rem; color: #4a5568; line-height: 1.6; }
.guide-highlight { color: #e53e3e; font-weight: bold; }

/* =========================================================
   16. 選択条件追従バー (Selection Sticky Bar)
   ========================================================= */
.selection-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 3px solid var(--accent-red);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 9999;
    padding: 10px 20px;
    text-align: center;
    transform: translateY(-100%); /* 初期状態は隠す */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.selection-sticky-bar.show {
    transform: translateY(0); /* クラス付与でスライド表示 */
}

.sticky-inner {
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.4;
}

.sticky-label {
    color: var(--text-sub);
    font-weight: normal;
    font-size: 0.8rem;
    margin-right: 5px;
}

.sticky-val {
    margin: 0 2px;
}

.sticky-size-val {
    color: var(--accent-red);
    font-size: 1.1rem;
    font-weight: 800;
    margin-left: 4px;
    font-family: var(--font-mono);
}

.sticky-note {
    font-size: 0.75rem;
    color: var(--text-sub);
    font-weight: normal;
    margin-left: 4px;
}

/* スマホ調整 */
@media (max-width: 600px) {
    .selection-sticky-bar {
        padding: 8px 10px;
    }
    .sticky-inner {
        font-size: 0.75rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
    }
    /* スマホでは「車種」などを改行せず、一行に収める工夫 */
    .sticky-val { white-space: nowrap; }
    .sticky-size-val { font-size: 1rem; }
}

/* WordPress管理バーが表示されている場合の調整（ログイン時のみ） */
body.admin-bar .selection-sticky-bar {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .selection-sticky-bar {
        top: 46px;
    }
}

/* =========================================================
   17. 記事内アコーディオン内部 (詳細解説エリア)
   ========================================================= */

/* コンテンツ枠 (.main-content) の装飾 */
.entry-content .main-content {
    background-color: #fff;
    border: 2px solid var(--border-color); /* 枠線を少し太くして区切りを明確に */
    border-radius: 4px;
    padding: 25px;
    margin-top: 15px;
}

/* 内部のテキスト */
.entry-content .main-content p {
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.8;
    margin-bottom: 1.5em;
}
.entry-content .main-content p:last-child {
    margin-bottom: 0;
}

/* ▼ 見出し (H3) の装飾：ここを強調しました */
.entry-content .main-content h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main);
    background-color: #edf2f7;   /* 薄いグレーの背景帯を追加 */
    border-left: 6px solid var(--bg-dark); /* 左側に太い黒ライン */
    padding: 10px 15px;          /* 文字周りの余白 */
    margin: 30px 0 20px;
    letter-spacing: 0.05em;
    border-bottom: none;         /* 下線は削除 */
}

/* 最初の見出しだけ上の余白を詰める */
.entry-content .main-content h3:first-child {
    margin-top: 0;
}

/* 文中の強調箇所（黄色マーカー風） */
.entry-content .main-content strong {
    background: linear-gradient(transparent 60%, #fff0c7 60%);
    padding: 0 4px;
    font-weight: 700;
}

/* ▼▼▼ 追加：スマホ表示時の幅広調整 ▼▼▼ */
@media (max-width: 600px) {
    .entry-content .main-content {
        padding: 15px;        /* 内部の余白を縮小 (25px -> 15px) */
        
        /* 親要素(.entry-content)のpadding(20px)を打ち消して横幅を確保 */
        margin-left: -15px;   
        margin-right: -15px;
        
        border-radius: 6px;
        border-width: 1px;    /* 枠線を少し細くして圧迫感を軽減 */
    }

    .entry-content .main-content p {
        font-size: 0.9rem;    /* 文字サイズを微調整 */
        line-height: 1.7;
        text-align: justify;  /* 両端揃えで見た目を整える */
        letter-spacing: -0.01em; /* 文字間を僅かに詰めて改行を減らす */
    }

    .entry-content .main-content h3 {
        font-size: 1rem;
        padding: 8px 10px;
        margin: 25px 0 15px;
    }
}/* =========================================================
   18. ページトップへ戻るボタン
   ========================================================= */
#page-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--bg-dark); /* テーマのメインカラー（濃紺） */
    color: #fff;
    border-radius: 4px; /* 工業的な角丸 */
    
    /* ▼▼▼ 修正：フッター上での視認性確保のため白枠線を追加 ▼▼▼ */
    border: 2px solid #ffffff;
    /* ▲▲▲ */
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#page-top-btn.show {
    opacity: 1;
    visibility: visible;
}

#page-top-btn:hover {
    background-color: var(--accent-red); /* ホバー時はブランドカラー（赤） */
    border-color: var(--accent-red);     /* 枠線も赤にして一体感を出す */
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(229, 62, 62, 0.4);
}

/* CSSで矢印アイコンを描画 */
.arrow-up {
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg);
    margin-top: 4px; /* 中央寄せ微調整 */
}

/* スマホ表示調整 */
@media (max-width: 600px) {
    #page-top-btn {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

/* =========================================================
   19. トップページ追加セクション（検索・ショートカット）
   ========================================================= */

/* 追加エリア全体のラッパー */
.quick-access-wrapper {
    max-width: 900px;
    margin: 0 auto;
    /* 背景色を半透明の白にして、背景画像の上でも読めるようにする */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    /* ウィザードとの間隔 */
    margin-top: 40px;
}

.quick-section {
    margin-bottom: 40px;
}
.quick-section:last-child { margin-bottom: 0; }

.quick-sec-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    border-left: 5px solid var(--accent-red);
    padding-left: 10px;
    margin: 0 0 20px 0;
}

/* --- 検索窓 --- */
.search-box-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.model-search-input {
    width: 100%;
    padding: 15px 20px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 50px; /* カプセル型 */
    outline: none;
    transition: all 0.2s ease;
    background: #fdfdfd;
}

.model-search-input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
    background: #fff;
}

.search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.suggestion-item {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.1s;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover {
    background: #f7fafc;
    color: var(--accent-red);
}

/* --- 人気メーカーグリッド --- */
.pop-maker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pop-maker-btn {
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
    text-align: center;
}

.pop-maker-btn:hover {
    border-color: var(--text-main);
    background: #edf2f7;
    transform: translateY(-2px);
}

/* --- 人気車種グリッド --- */
.pop-model-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start; /* 左寄せ */
}

.pop-model-btn {
    background: #edf2f7; /* 少し色をつけてボタン感を出す */
    border: 1px solid transparent;
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 20px; /* 丸みをつける */
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.pop-model-btn:hover {
    background: var(--text-main);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- ランキングリスト --- */
.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 2列〜 */
    gap: 10px;
}

.ranking-list li {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.ranking-list li:hover {
    border-color: var(--text-main);
    background: #fcfcfc;
    transform: translateX(4px); /* 右に少し動く */
}

.rank-num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background: #cbd5e0;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 10px;
}
/* 上位3位の色変え */
.ranking-list li:nth-child(1) .rank-num { background: #ecc94b; color: #744210; } /* 金 */
.ranking-list li:nth-child(2) .rank-num { background: #a0aec0; color: #fff; }    /* 銀 */
.ranking-list li:nth-child(3) .rank-num { background: #b7791f; color: #fff; }    /* 銅 */

.rank-name {
    font-weight: 700;
    font-size: 0.95rem;
}

/* スマホ調整 */
@media (max-width: 600px) {
    .quick-access-wrapper {
        padding: 20px;
        margin-top: 30px;
    }
    .pop-maker-grid {
        justify-content: space-between; /* 均等配置 */
    }
    .pop-maker-btn {
        flex: 1 1 22%; /* 4列 */
        min-width: auto;
        padding: 10px 0;
        font-size: 0.8rem;
    }
    .pop-model-grid {
        justify-content: center; /* 中央寄せ */
    }
    .ranking-list {
        grid-template-columns: 1fr; /* 1列 */
    }
}

/* =========================================================
   20. アコーディオン (details/summary) デザイン修正【強力版】
   ========================================================= */

/* 1. summary本体のリストスタイルを無効化 */
details > summary {
    display: block !important;       /* リストアイテム扱いを強制解除 */
    list-style: none !important;     /* マーカーなし */
    list-style-type: none !important; 
    background: none !important;     /* 背景画像によるアイコン表示も防止 */
    cursor: pointer;
    position: relative;
    padding-left: 30px !important;   /* 自作アイコン用の余白を強制確保 */
    outline: none !important;        /* クリック時の青枠などを消す */
}

/* 2. Webkit系ブラウザ（Chrome, Safari）の標準マーカー消去 */
details > summary::-webkit-details-marker {
    display: none !important;
    content: "" !important; 
}

/* 3. モダンブラウザ（Firefox, 新Edgeなど）の標準マーカー消去 */
details > summary::marker {
    display: none !important;
    content: "" !important;
    color: transparent !important;
}

/* 4. テーマ独自の矢印アイコン（くの字型）を作成 */
details > summary::before {
    content: '';
    position: absolute;
    left: 10px;          /* 位置調整 */
    top: 15px;           /* テキストの行間に合わせて微調整 */
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-main);
    border-bottom: 2px solid var(--text-main);
    
    /* 閉じた状態：右向き（▶の代わり） */
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform 0.2s ease, border-color 0.2s;
    
    /* ブラウザ標準マーカーと重ならないようz-indexを指定 */
    z-index: 10;
}

/* 5. 開いた時の矢印（下向き ▼にする） */
details[open] > summary::before {
    transform: rotate(45deg);
    top: 12px; /* 回転時の位置ズレを微調整 */
}

/* 6. ホバー時の色変化 */
details > summary:hover {
    color: var(--accent-red);
}
details > summary:hover::before {
    border-color: var(--accent-red);
}

/* 7. 内部のテキストがずれないように調整 */
details > summary > * {
    display: inline; /* ブロック要素が入っても改行させない */
    vertical-align: middle;
}

/* =========================================================
   [Mobile Fix] H2見出し（記事内）の強制サイズ調整
   ※既存のスタイルを強制的に上書きします
   ========================================================= */
@media screen and (max-width: 600px) {
    /* 記事内のH2、または特定のクラスを持つH2を対象 */
    .entry-content h2,
    h2.tire-article-header {
        font-size: 18px !important;       /* 文字サイズを小さく固定 */
        line-height: 1.4 !important;      /* 行間を詰める */
        padding: 8px 10px !important;     /* 余白を減らす */
        margin-top: 30px !important;      /* 上の余白調整 */
        margin-bottom: 20px !important;   /* 下の余白調整 */
        letter-spacing: 0.02em !important;/* 文字間隔を少し詰める */
        border-left-width: 4px !important;/* 左の線も少し細く */
        width: 100% !important;           /* 幅を確保 */
        box-sizing: border-box !important;/* はみ出し防止 */
    }
}

/* =========================================================
   21. 適合表アコーディオン (Mobile Fix) - 最終修正版
   ========================================================= */
@media (max-width: 600px) {
    /* 1. ラッパー：幅を広げて余白を相殺 */
    .entry-content details .spec-table-scroll {
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding: 0 !important;
        width: calc(100% + 30px) !important;
        border: none !important;
        box-shadow: none !important;
        overflow-x: hidden !important;
    }

    /* 2. テーブル本体：外枠のみ設定し、幅を固定 */
    .entry-content details .spec-table-scroll table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important; /* 強制的に幅を収める */
        border: 1px solid #ddd !important; /* テーブル全体の外枠 */
        border-collapse: collapse !important; 
    }

    /* 3. セル（ヘッダー・データ共通）：縦線を消し、横線のみ残す */
    .entry-content details .spec-table-scroll th,
    .entry-content details .spec-table-scroll td {
        font-size: 11px !important;
        padding: 10px 4px !important; /* 上下の余白を少し増やして高さを均一に見せる */
        line-height: 1.4 !important;
        
        /* テキスト折り返し設定 */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        vertical-align: middle !important;
        
        /* 罫線設定：縦なし・横あり */
        border-top: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
        border-left: none !important;
        border-right: none !important;

        /* 背景色を白で統一（余計な色分けを削除） */
        background-color: #fff !important;
    }

    /* ヘッダー行だけは少しグレー（元のデザイン維持） */
    .entry-content details .spec-table-scroll thead tr th {
        background-color: #f9f9f9 !important;
        font-weight: bold !important;
    }

    /* 4. 列幅の配分（見切れ防止） */
    .entry-content details .spec-table-scroll th:nth-child(1),
    .entry-content details .spec-table-scroll td:nth-child(1) { width: 15% !important; text-align: center !important; }
    
    .entry-content details .spec-table-scroll th:nth-child(2),
    .entry-content details .spec-table-scroll td:nth-child(2) { width: 20% !important; text-align: center !important; }
    
    .entry-content details .spec-table-scroll th:nth-child(3),
    .entry-content details .spec-table-scroll td:nth-child(3) { width: auto !important; /* グレード名は自動 */ }
    
    .entry-content details .spec-table-scroll th:nth-child(4),
    .entry-content details .spec-table-scroll td:nth-child(4) { width: 30% !important; text-align: center !important; font-weight: bold !important; }
}