/**
 * KIMERUCA Dark Mode Style
 * Concept: Fact-driven Technical Aesthetic
 */

:root {
    --dark-bg: #0d1117;       /* 深いグレー（青みのある質感） */
    --dark-surface: #161b22;  /* パーツの背景色 */
    --dark-border: #30363d;   /* 1pxのシャープな境界線 */
    --text-primary: #c9d1d9;  /* 読みやすいグレー */
    --text-sub: #8b949e;      /* 補助・補足文字色 */
    --accent-cyber: #00f3ff;  /* ネオンブルー */
    --mono-font: 'JetBrains Mono', 'Roboto Mono', 'Consolas', monospace;
}

/* ページ全体のアンカーリンクを滑らかにする */
html {
    scroll-behavior: smooth;
}
/* spec_tableに飛んだ際、ヘッダーの高さ分（約80px）だけ手前で止める */
#spec_table {
    scroll-margin-top: 100px;
}

/* 全体ベースの上書き */
body {
    background-color: var(--dark-bg) !important;
    color: var(--text-primary) !important;
}

/* コンテナ・ウィジェット等の背景 */
.widget, .bto-spec-table, table {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--text-primary);
}

/* 見出しのテック化 */
h1 {
    border-bottom: 2px solid var(--dark-border) !important;
}

/* BTOスペック表の調整 */
.bto-spec-table {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}

.bto-spec-table-title {
    background-color: #000 !important;
    color: var(--accent-cyber) !important;
    border-bottom: 1px solid var(--accent-cyber);
    letter-spacing: 0.1em;
}

.bto-spec-table th {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.bto-spec-table td {
    border-bottom: 1px solid var(--dark-border) !important;
}

/* 金額・数値の等幅フォント化 */
.bto-lowest-price, 
.bto-total-value, 
.bto-updated-date,
.bto-diff-value,
.list-model {
    font-family: var(--mono-font);
}

.bto-lowest-price {
    font-size: 0.9em;
    color: #00f2ff; /* ネオンブルー */
}

/* BTOモデル価格行：通常の行と区別 */
.bto-model-row {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* 価格差の事実：最重要行の強調 */
.bto-price-diff-row {
    background-color: #000 !important;
    border-top: 1px solid var(--accent-cyber) !important;
}

.bto-diff-label {
    padding: 15px !important;
    color: var(--text-sub) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
}

.bto-diff-value {
    padding: 15px !important;
    color: var(--accent-cyber) !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

/* 合計金額行の強調 */
.bto-total-row, 
.bto-total-row .bto-total-label {
    background-color: #000 !important;
    color: var(--accent-cyber) !important;
}

.bto-total-row .bto-total-value {
    color: var(--accent-cyber) !important;
}

/* サイドバー・リンク */
a {
    color: var(--accent-cyber) !important;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* サイドバー自動生成リスト（kimeruca-latest-list） */
.kimeruca-latest-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kimeruca-latest-list li {
    border-bottom: 1px solid var(--dark-border);
}

.kimeruca-latest-list li a {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.kimeruca-latest-list .list-model {
    font-size: 13px;
    color: var(--text-primary);
}

.kimeruca-latest-list .list-date {
    font-size: 10px;
    color: var(--text-sub);
    margin-top: 4px;
}

.kimeruca-latest-list li a:hover .list-model {
    color: var(--accent-cyber);
    text-decoration: none;
}

/* --- キラリと光る明滅（パルス）アニメーション --- */
@keyframes tech-pulse {
    0% {
        box-shadow: 0 0 5px rgba(0, 243, 255, 0.2);
        border-color: rgba(0, 243, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
        border-color: rgba(0, 243, 255, 1);
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 243, 255, 0.2);
        border-color: rgba(0, 243, 255, 0.5);
    }
}

/* --- テック系ゴーストボタン（明滅Ver.） --- */
.bto-external-link {
    position: relative;
    display: inline-block;
    padding: 6px 14px;
    margin-top: 8px;
    border: 1px solid var(--accent-cyber);
    background: transparent;
    color: var(--accent-cyber) !important;
    font-size: 0.75rem;
    font-family: var(--mono-font); /* */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
    letter-spacing: 0.05em;
}

/* --- ホバーした時の「キラッ」とした変化 --- */
.bto-external-link:hover {
    background-color: rgba(0, 243, 255, 0.15); /* ほんのり色を乗せる */
    color: #fff !important; /* 文字を白く輝かせる */
    
    /* 枠線と全体がパルス状に明滅 */
    animation: tech-pulse 1.5s infinite ease-in-out;
    
    /* 文字自体の発光 */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 
                 0 0 12px var(--accent-cyber);
}

/* 矢印アイコンを「鋭い光」の一部にする */
.bto-external-link::after {
    content: "\2197";
    margin-left: 8px;
    font-size: 0.9em;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bto-external-link:hover::after {
    transform: translate(3px, -3px) scale(1.2); /* 斜め上に飛び出すような動き */
    color: #fff;
}

/* ショップ情報の位置調整 */
.shop-via {
    display: block;                        /* 改行して情報の重なりを防ぐ */
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-sub);
}

/* ショップボタン：メインより控えめなテック系サブボタン */
.bto-shop-button {
    display: inline-block;
    width: fit-content !important;
    padding: 2px 8px;
    margin-left: 10px;
    border: 1px solid rgba(0, 243, 255, 0.4); /* 境界線を少し薄く */
    color: var(--accent-cyber) !important;
    font-size: 10px;
    font-family: var(--mono-font);
    text-transform: uppercase;
    text-decoration: none !important;
    vertical-align: middle;
    transition: all 0.2s ease;
    background: transparent;
}

/* ショップボタンのホバー：メインと同様のキラリ感 */
.bto-shop-button:hover {
    border-color: var(--accent-cyber);
    background-color: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.8);
}

/* モバイル対応：価格が長い場合にショップボタンが崩れないよう調整 */
@media (max-width: 480px) {
    .bto-shop-button {
        display: block;
        margin-left: 0;
        margin-top: 5px;
        width: fit-content;
    }
}

/* --- KIMERUCA Article Body Styling --- */

/* 独自クラス：段落（読みやすさ重視） */
/* --- Python: ArticleGenerator クラス同期スタイル --- */

/* 見出し：H2 / H3 */
.kimeruca-h2 {
    font-size: 1.4rem;
    color: var(--accent-cyber);
    border-left: 4px solid var(--accent-cyber);
    padding: 10px 15px;
    margin: 2em 0 1em;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.05) 0%, transparent 100%);
}

.kimeruca-h3 {
    font-family: var(--mono-font);
    font-size: 1.1rem;
    color: var(--accent-cyber);
    margin: 1.5em 0 0.8em;
}

/* 本文段落 */
.kimeruca-p {
    line-height: 1.8;
    margin-bottom: 1.2em;
    color: var(--text-primary);
}

/* リスト：UL / LI */
.kimeruca-list {
    list-style: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--dark-border);
    margin: 1.5em 0;
}

.kimeruca-list-item {
    font-family: var(--mono-font);
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.kimeruca-list-item::before {
    content: "> ";
    color: var(--accent-cyber);
}

.kimeruca-btn-wrap {
    display: flex;
    gap: 25px; /* ボタン同士の間隔を少し広げる */
    margin: 4em 0;
    justify-content: center;
    flex-wrap: wrap; /* スマホで縦並びになるように */
}

/* 明るい水色で、常に発光させる */
.kimeruca-btn-main {
    color: #00f3ff !important;
    border-color: #00f3ff;
    background: rgba(0, 243, 255, 0.1); /* 常時薄く色が乗る */
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2), /* 外側のぼんやりした光 */
                inset 0 0 10px rgba(0, 243, 255, 0.05); /* 内側の光 */
}

/* ホバー時：光を強くする */
.kimeruca-btn-main:hover {
    background: rgba(0, 243, 255, 0.25);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.5), 
                inset 0 0 15px rgba(0, 243, 255, 0.2);
    color: #fff !important; /* 文字を白く光らせる */
    text-shadow: 0 0 10px #00f3ff;
    transform: translateY(-2px);
}

/* === 2. BTO基本構成ボタン（バイオレット：高貴でテック感のある紫） === */
/* シアンと馴染みが良く、かつ明確に違う色 */
.kimeruca-btn-sub {
    color: #d845ff !important; /* マゼンタ寄りの紫 */
    border-color: #d845ff;
    background: rgba(216, 69, 255, 0.1);
    box-shadow: 0 0 15px rgba(216, 69, 255, 0.2),
                inset 0 0 10px rgba(216, 69, 255, 0.05);
}

/* ホバー時 */
.kimeruca-btn-sub:hover {
    background: rgba(216, 69, 255, 0.25);
    box-shadow: 0 0 30px rgba(216, 69, 255, 0.5),
                inset 0 0 15px rgba(216, 69, 255, 0.2);
    color: #fff !important;
    text-shadow: 0 0 10px #d845ff;
    transform: translateY(-2px);
}

/* ボタン共通設定：ガラスのような常時発光スタイル */
.kimeruca-btn-main, 
.kimeruca-btn-sub {
    flex: 1;
    min-width: 240px; /* スマホでも細くなりすぎない幅 */
    max-width: 320px;
    text-align: center;
    padding: 20px 15px; /* 少し厚みを持たせる */
    
    font-family: var(--mono-font);
    font-size: 0.95rem; /* 文字を少し大きく */
    font-weight: bold;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    
    border-width: 1px;
    border-style: solid;
    backdrop-filter: blur(5px); /* 背景をぼかすガラス効果 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* アイコン的な矢印を追加 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 矢印アイコンの追加（疑似要素） */
.kimeruca-btn-main::after,
.kimeruca-btn-sub::after {
    content: " \2192"; /* 右矢印 */
    margin-left: 10px;
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

.kimeruca-btn-main:hover::after,
.kimeruca-btn-sub:hover::after {
    transform: translateX(5px); /* ホバーで矢印が動く */
}



/* --- Header Styles (KIMERUCA Tech Frame) --- */
.site-header {
    background-color: var(--dark-bg);
    border-bottom: 1px solid var(--dark-border);
    padding: 15px 0;
}

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

.site-branding {
    line-height: 1.2;
}

.site-title {
    margin: 0;
    font-size: 1.6rem;
    font-family: var(--mono-font);
    font-weight: 800;
    letter-spacing: 3px;
}

.site-title a {
    color: var(--accent-cyber) !important;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(0, 243, 255, 0.4);
}

.site-tagline {
    display: block;
    font-size: 9px;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
}

/* Header Navigation */
/* --- Header Navigation (KIMERUCA Tech Style) --- */
.kimeruca-nav-frame {
    display: flex;
    align-items: center;
}

.kimeruca-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* メニュー間の余白 */
}

.kimeruca-nav-list li {
    position: relative;
}

.kimeruca-nav-list a {
    font-family: var(--mono-font);
    font-size: 12px;
    color: var(--text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 10px 0;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: block;
}

/* Hover: ネオンブルーの発光効果 */
.kimeruca-nav-list a:hover {
    color: var(--accent-cyber) !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.6);
}

/* 精密なアンダーラインアニメーション */
.kimeruca-nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px; /* 太すぎない1pxのライン */
    background-color: var(--accent-cyber);
    box-shadow: 0 0 8px var(--accent-cyber);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.kimeruca-nav-list a:hover::after {
    width: 100%;
}
/* --- Footer Styles (Database Info Area) --- */
.site-footer {
    background-color: var(--dark-bg);
    border-top: 1px solid var(--dark-border);
    margin-top: 100px;
    padding: 50px 0 30px;
}

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

.footer-nav-section {
    margin-bottom: 40px;
}

.footer-label {
    display: block;
    font-family: var(--mono-font);
    font-size: 10px;
    color: var(--accent-cyber);
    margin-bottom: 15px;
    letter-spacing: 2px;
    opacity: 0.8;
}

.footer-dir-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
}

.footer-dir-links a {
    color: var(--text-sub) !important;
    font-size: 13px;
    font-family: var(--mono-font);
    transition: color 0.2s ease;
}

.footer-dir-links a:hover {
    color: var(--accent-cyber) !important;
    text-decoration: none;
}

/* Bottom Site Info */
.site-info {
    border-top: 1px solid rgba(48, 54, 61, 0.5); /* --dark-border の透過版 */
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    font-family: var(--mono-font);
    font-size: 10px;
    color: var(--text-sub);
}

.tech-stack-info {
    font-family: var(--mono-font);
    font-size: 8px;
    color: #30363d; /* --dark-border と同等で目立たせない */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive Grid */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .footer-dir-links {
        flex-direction: column;
        gap: 10px;
    }
    .site-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* --- Sidebar Widget Decoration --- */

/* 1. ウィジェット全体のレイアウト調整 */
.widget {
    padding: 24px !important; /* 内側に適度な余裕を持たせる */
    margin-bottom: 32px !important;
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
    border-left: 2px solid var(--accent-cyber) !important; /* 左のバーをシャープに強調 */
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2); /* わずかな影で立体感を出す */
}

/* 2. ウィジェット内テーブルのテック系改造（ダサい白枠を全廃） */
.widget table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    border: 1px solid var(--dark-border) !important;
    background: rgba(0, 0, 0, 0.3) !important; /* 1段暗くして沈める */
    table-layout: auto;
}

.widget th, 
.widget td {
    padding: 10px 12px !important;
    border: none !important;
    border-bottom: 1px solid var(--dark-border) !important;
    font-size: 11px; /* 情報を凝縮するために少し小さく */
    line-height: 1.4;
}

/* ウィジェットの左端にアクセントの細い光を入れる */
.widget::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--accent-cyber);
    opacity: 0.5;
}

/* ラベル側（左列） */
.widget th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--accent-cyber) !important;
    font-family: var(--mono-font);
    font-weight: normal;
    width: 35%;
    white-space: nowrap;
    text-transform: uppercase;
}

/* データ側（右列） */
.widget td {
    color: var(--text-sub) !important;
    font-family: var(--mono-font);
}

/* 最後の行の境界線を消す */
.widget tr:last-child td {
    border-bottom: none !important;
}

/* 3. ウィジェットタイトルの洗練 */
.widget-title {
    /* --- 追加・変更箇所 --- */
    background: transparent !important; /* 白/グレーの背景を透明にする */
    border-left: none !important;       /* 左側の太い線を消す */
    padding: 0 0 10px 0 !important;     /* 余白を調整 */
    
    /* --- 既存のデザイン調整 --- */
    font-family: var(--mono-font) !important;
    font-size: 0.9rem !important;       /* 文字サイズを微調整 */
    color: var(--accent-cyber) !important; /* 文字色をネオンブルーに */
    border-bottom: 1px solid var(--accent-cyber) !important; /* 下線をネオン色に */
    margin-bottom: 15px !important;
    letter-spacing: 0.1em;
}

/* もしタイトルの文字位置がおかしい場合は、これも追加してください */
.widget-title::before {
    content: "■";
    font-size: 0.7rem;
    margin-right: 8px;
    color: var(--accent-cyber); /* ドットもネオン色に */
    vertical-align: middle;
}

/* ウィジェット内のリスト装飾 */
.widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 0 !important;
}

.widget li {
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--dark-border) !important;
    font-size: 0.85rem;
}

.widget li:last-child {
    border-bottom: none !important;
}

/* リンクのホバー時：文字自体を少し発光させる */
.widget a {
    color: var(--text-primary) !important;
    transition: all 0.2s ease;
}

.widget a:hover {
    color: var(--accent-cyber) !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
    text-decoration: none !important;
    padding-left: 5px; /* わずかに右に動くアニメーション */
}



/* 記事内のパーツ画像装飾 */
.kimeruca-spec-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #1a1a1a; /* ダーク背景 */
    border: 1px solid #00f2ff; /* ネオンブルーの枠線 */
    border-radius: 4px;
    margin-right: 12px;
    vertical-align: middle;
    filter: brightness(1.1); /* 輝度を少し上げる */
}

.spec-label {
    font-weight: bold;
    color: #00f2ff;
    margin-right: 5px;
}

/* スペック表内のレイアウト（Image 3 対応） */
.bto-spec-td {
    display: flex !important;
    align-items: center !important; /* 垂直中央 */
    gap: 15px; /* 画像とテキストの間隔 */
    padding: 10px !important;
}

.bto-table-item-img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain;
    background: #111;
    border: 1px solid #333;
    flex-shrink: 0; /* 画像が潰れるのを防ぐ */
}

.bto-item-info {
    display: flex;
    flex-direction: column; /* パーツ名と価格を上下に並べる */
    gap: 4px;
}

/* 3万円以上の価格差がある時の警告（パルス） */
.kimeruca-alert-pulse {
    background: rgba(255, 0, 0, 0.15) !important;
    animation: kimeruca-red-pulse 2s infinite;
}

@keyframes kimeruca-red-pulse {
    0% { box-shadow: inset 0 0 0px rgba(255, 0, 0, 0); }
    50% { box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.4); }
    100% { box-shadow: inset 0 0 0px rgba(255, 0, 0, 0); }
}

/* --- 互換性チェックリストのデザイン --- */

.bto-check-section {
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--dark-border);
    padding: 20px;
    margin-top: 0;
}

/* ヘッダー部分 */
.bto-check-header {
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.6;
    border-left: 4px solid var(--accent-cyber); /* 左に青いバー */
    padding-left: 15px;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.1), transparent);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* リスト全体 */
.bto-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 15px;
}

/* PC表示時は2列にして見やすくする（お好みで） */
@media (min-width: 768px) {
    .bto-check-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* 個別のチェック項目カード */
.bto-check-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.bto-check-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.check-icon-wrap {
    flex-shrink: 0;
    margin-right: 15px;
    width: 32px; /* 少し大きくしました */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* アニメーション適用 */
    animation: cyber-pulse 3s infinite ease-in-out;
    background: rgba(0, 0, 0, 0.3); /* アイコン背景を少し暗くしてコントラスト確保 */
}

/* コンテンツ */
.check-content {
    display: flex;
    flex-direction: column;
}

.check-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: block;
}

.check-desc {
    font-size: 0.8rem;
    color: var(--text-sub);
    line-height: 1.4;
}


/* --- 互換性チェックリストのデザイン (強化版) --- */

/* 明滅アニメーションの定義 */
@keyframes cyber-pulse {
    0% { box-shadow: 0 0 5px currentColor, inset 0 0 5px currentColor; }
    50% { box-shadow: 0 0 15px currentColor, inset 0 0 10px currentColor; opacity: 1; }
    100% { box-shadow: 0 0 5px currentColor, inset 0 0 5px currentColor; }
}

/* ヘッダー部分の強化 */
.bto-check-header {
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    padding: 15px 20px;
    /* グラデーションと光るボーダーを追加 */
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.15) 0%, transparent 100%);
    border-left: 4px solid var(--accent-cyber);
    box-shadow: -5px 0 15px -5px var(--accent-cyber);
    border-radius: 4px 0 0 4px;
    letter-spacing: 0.05em;
}

/* 個別のチェック項目カード (カッコよく刷新) */
.bto-check-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    /* 微細なグラデーション背景 */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* ホバー時のエフェクト強化 */
.bto-check-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-cyber);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 243, 255, 0.2);
}

/* カードの左端に光るアクセントラインを追加 */
.bto-check-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--accent-cyber);
    opacity: 0.5;
    transition: opacity 0.3s;
}
.bto-check-item:hover::before {
    opacity: 1;
    box-shadow: 0 0 10px var(--accent-cyber);
}


/* --- アイコン周りの発光強化 --- */
.check-icon-wrap {
    flex-shrink: 0;
    margin-right: 15px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    /* アニメーション適用 */
    animation: cyber-pulse 3s infinite ease-in-out;
    /* テキスト自体の発光 */
    text-shadow: 0 0 5px currentColor;
}

.check-icon {
    display: block;
    position: relative;
    font-size: 0;        /* 元の文字を消す */
    color: transparent;  /* 元の文字を消す */
}

/* コンテンツ部分の調整 */
.check-content {
    display: flex;
    flex-direction: column;
}

.check-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff; /* タイトルは白で見やすく */
    margin-bottom: 5px;
    display: block;
}

.check-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7); /* 説明文は少しトーンダウン */
    line-height: 1.5;
}

/* ステータス別カラー定義 (色と発光色を指定) */

/* OKのリング（枠）の設定 */
.status-ok .check-icon-wrap {
    border: 2px solid #00ff88; /* 枠線を少し太く */
    box-shadow: 0 0 10px #00ff88, inset 0 0 10px rgba(0, 255, 136, 0.3);
}

.bto-check-item.status-ok:hover {
    border-color: #00ff88;
}
.bto-check-item.status-ok::before {
    background: #00ff88;
}


/* Infoのリング（枠）の設定 */
.status-info .check-icon-wrap {
    border: 2px solid #ffd700;
    box-shadow: 0 0 10px #ffd700, inset 0 0 10px rgba(255, 215, 0, 0.3);
}

.bto-check-item.status-info:hover {
    border-color: #ffd700;
}
.bto-check-item.status-info::before {
    background: #ffd700;
}

/* =========================================
   OKステータス（チェックマーク）の描画設定
   ========================================= */
.status-ok .check-icon::after {
    content: '';
    display: block;
    width: 7px;   /* チェックの短辺 */
    height: 14px; /* チェックの長辺 */
    
    /* ここでチェックマークの「形」を作ります */
    border: solid #ffffff; /* 芯は真っ白にする */
    border-width: 0 3px 3px 0; /* 線を太く(3px) */
    
    /* 45度傾けてチェックマークにする */
    transform: rotate(45deg);
    margin-top: -4px; /* 位置微調整 */

    /* 白い光彩と緑の影を落として「発光」させる */
    filter: drop-shadow(0 0 2px #00ff88) drop-shadow(0 0 5px #00ff88);
}

/* =========================================
   Infoステータス（iマーク）の描画設定
   ========================================= */
.status-info .check-icon::after {
    content: 'i'; /* infoは文字のままでOKですがフォント指定 */
    font-size: 18px;
    font-weight: 900;
    font-family: 'Verdana', sans-serif; /* 太く見えるフォント */
    color: #ffffff; /* 芯は白 */
    
    /* 黄色い発光 */
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700;
}

/* --- アラートボックスの強制テック化 (.kimeruca-alert 対応版) --- */

div.kimeruca-alert {
    /* 1. インラインスタイル（直接書かれた色）を強制リセット */
    background: rgba(255, 100, 0, 0.08) !important; /* ネオンオレンジの薄い背景 */
    color: #ffb74d !important;      /* 文字色：明るいオレンジ */
    border: 1px solid #ff9800 !important; /* 枠線：ネオンオレンジ */
    border-radius: 4px !important;
    border-left: 5px solid #ff9800 !important; /* 左側のアクセントバーを太く */
    
    /* 2. テック感の演出 */
    margin: 20px 0 !important;
    padding: 20px !important;
    font-family: var(--mono-font);
    font-size: 0.9rem !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.15) !important; /* オレンジの発光 */
    position: relative;
    overflow: hidden;
    
    /* 3. 既存のダサい余白などの調整 */
    line-height: 1.6 !important;
}

/* 背景に警告用ストライプを追加 */
div.kimeruca-alert::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 152, 0, 0.05) 10px, 
        rgba(255, 152, 0, 0.05) 20px
    );
    pointer-events: none;
    z-index: 0;
}

/* ホバー時に光らせる */
div.kimeruca-alert:hover {
    background: rgba(255, 100, 0, 0.12) !important;
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.4) !important;
    border-color: #ffab40 !important;
}

/* 中にある strong タグ（タイトル部分）の装飾 */
div.kimeruca-alert strong {
    color: #ff9800 !important;
    font-size: 1.05em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block; /* 改行してタイトルっぽく見せる */
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 152, 0, 0.3);
    padding-bottom: 5px;
}

/* 絵文字 (⚠️) の調整 */
div.kimeruca-alert img.emoji {
    filter: drop-shadow(0 0 5px #ff9800); /* 絵文字も光らせる */
    vertical-align: text-bottom;
}

/* =========================================
   KIMERUCA FINAL ADJUSTMENTS
   ========================================= */

/* Amazonや楽天も区別したい場合（任意） */
.bto-shop-button[href*="amazon"] {
    border-color: #ff9900 !important; /* Amazon Orange */
    color: #ff9900 !important;
}


/* --- 2. スマホ表示時のカード化（レスポンシブ対応） --- */
@media (max-width: 600px) {
    /* テーブルの強制解除 */
    .bto-spec-table table,
    .bto-spec-table tbody,
    .bto-spec-table tr,
    .bto-spec-table th,
    .bto-spec-table td {
        display: block;
        width: 100%;
    }

    /* 行（各パーツ）をカード風に */
    .bto-spec-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--dark-border);
        background: rgba(255, 255, 255, 0.02);
        padding: 10px;
        border-radius: 4px;
    }

    /* パーツ名（GPU, CPU等）を小さなラベルにする */
    .bto-spec-table th {
        background: transparent !important;
        border-bottom: none !important;
        color: var(--accent-cyber) !important;
        font-size: 0.75rem;
        padding: 0 0 5px 0 !important;
        text-align: left;
        opacity: 0.8;
    }

    /* データエリア */
    .bto-spec-table td {
        padding: 0 !important;
        border-bottom: none !important;
    }

    /* 画像とテキストの配置調整 */
    .bto-spec-td {
        display: flex !important;
        flex-direction: row; /* 横並び維持 */
        align-items: flex-start !important;
        gap: 15px;
    }

    /* 画像サイズを少し小さくしてスマホに合わせる */
    .bto-table-item-img {
        width: 70px !important;
        height: 70px !important;
    }

    /* テキスト情報の文字サイズ調整 */
    .bto-item-name {
        font-size: 0.85rem;
    }

    .bto-lowest-price {
        font-size: 1rem;
        margin-top: 5px;
    }

    /* ショップボタンを押しやすく */
    .bto-shop-button {
        display: inline-block;
        margin-top: 8px;
        margin-left: 0; /* 左マージンリセット */
        padding: 6px 12px; /* タップ領域拡大 */
        font-size: 11px;
    }

    /* 合計金額行などの調整 */
    .bto-total-row, .bto-model-row, .bto-price-diff-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    
    .bto-total-label {
        width: auto !important;
        text-align: left !important;
        font-size: 0.8rem;
    }
    
    .bto-total-value, .bto-diff-value {
        text-align: right !important;
    }
}

/* --- Disclaimer Accordion (details / summary) --- */

/* 外枠のコンテナ */
details.kimeruca-disclaimer-container {
    margin: 2em 0;
    border: 1px solid var(--dark-border);
    background: rgba(255, 255, 255, 0.02);
}

/* クリック部分（summary） */
.kimeruca-disclaimer-summary {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    font-size: 0.85rem;
    font-family: var(--mono-font);
    color: var(--text-sub);
    cursor: pointer;
    list-style: none; /* デフォルトの三角を消す */
    transition: all 0.2s ease;
    user-select: none;
}

/* デフォルトの三角を消す（WebKit/Safari用） */
.kimeruca-disclaimer-summary::-webkit-details-marker {
    display: none;
}

/* 独自のテック系アイコン（開閉矢印） */
.kimeruca-disclaimer-summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 10px;
    font-size: 0.7rem;
    color: var(--accent-cyber); /* ここだけアクセントカラー */
    transition: transform 0.3s ease;
    opacity: 0.7;
}

/* ホバー時の挙動 */
.kimeruca-disclaimer-summary:hover {
    background: rgba(0, 243, 255, 0.05);
    color: var(--text-primary);
}

.kimeruca-disclaimer-summary:hover::before {
    opacity: 1;
    text-shadow: 0 0 8px var(--accent-cyber);
}

/* 開いている時のスタイル */
details[open] .kimeruca-disclaimer-summary {
    border-bottom: 1px solid var(--dark-border);
    color: var(--text-primary);
}

/* 開いている時のアイコン回転 */
details[open] .kimeruca-disclaimer-summary::before {
    transform: rotate(90deg);
}

/* 中身のコンテンツエリア */
.kimeruca-disclaimer-content {
    padding: 20px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-sub);
    background: var(--dark-bg);
}

/* ------------------------------------------- */
/* ショップ別カラー定義 (Attribute Selectors) */
/* ------------------------------------------- */

/* --- Rakuten (Cyber Red) --- */
/* hrefに 'rakuten.co.jp' が含まれる場合 */
.bto-shop-button[href*="rakuten.co.jp"] {
    color: #ff4d4d !important; /* 朱色に近い赤 */
    border-color: rgba(255, 77, 77, 0.4);
}

.bto-shop-button[href*="rakuten.co.jp"]:hover {
    background-color: rgba(255, 77, 77, 0.15);
    border-color: #ff4d4d;
    /* 赤く発光 */
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.4);
    text-shadow: 0 0 5px rgba(255, 77, 77, 0.8);
}

/* --- Yahoo! (Cyber Yellow) --- */
/* hrefに 'yahoo.co.jp' が含まれる場合 */
.bto-shop-button[href*="yahoo.co.jp"] {
    color: #ffd700 !important; /* ゴールド/イエロー */
    border-color: rgba(255, 215, 0, 0.4);
}

.bto-shop-button[href*="yahoo.co.jp"]:hover {
    background-color: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    /* 黄色く発光 */
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

/* --- Amazon (Cyber Orange) --- */
/* 必要であればAmazonも色分け可能です（現在はデフォルトの青になります） */
.bto-shop-button[href*="amazon.co.jp"] {
    color: #ff9900 !important;
    border-color: rgba(255, 153, 0, 0.4);
}

.bto-shop-button[href*="amazon.co.jp"]:hover {
    background-color: rgba(255, 153, 0, 0.15);
    border-color: #ff9900;
    box-shadow: 0 0 8px rgba(255, 153, 0, 0.4);
    text-shadow: 0 0 5px rgba(255, 153, 0, 0.8);
}

/* =========================================
   3. スマート・モールボタン（自動色変化）
   ========================================= */

/* --- ベース設定（デフォルト：Yahoo! / 汎用ゴールド） --- */
.kimeruca-btn-mall {
    /* --- 追加箇所: 他のボタンと同じ最大幅制限をかける --- */
    max-width: 320px; 
    /* ----------------------------------------------- */

    /* 以下、既存の設定（変更なし） */
    --mall-color: #ffd700;
    color: var(--mall-color) !important;
    border: 1px solid var(--mall-color);
    background: rgba(255, 215, 0, 0.1);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 240px; 
    
    text-align: center;
    padding: 20px 15px;
    
    /* マージン調整: フレックスボックス内での配置を整えるため少し変更 */
    margin: 10px; 
    
    font-family: var(--mono-font);
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    backdrop-filter: blur(5px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2),
                inset 0 0 10px rgba(255, 215, 0, 0.05);
}

/* 矢印アイコン */
.kimeruca-btn-mall::after {
    content: " \2192";
    margin-left: 10px;
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

/* --- URL判定による色の上書き (Smart Switching) --- */

/* 楽天 (rakuten.co.jp) の場合: サイバーレッド */
.kimeruca-btn-mall[href*="rakuten.co.jp"] {
    --mall-color: #ff4d4d; /* 朱色に近い明るい赤 */
    background: rgba(255, 77, 77, 0.1);
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2),
                inset 0 0 10px rgba(255, 77, 77, 0.05);
}

/* Amazon (amazon.co.jp) の場合: サイバーオレンジ */
.kimeruca-btn-mall[href*="amazon.co.jp"] {
    --mall-color: #ff9900; /* Amazonオレンジ */
    background: rgba(255, 153, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.2),
                inset 0 0 10px rgba(255, 153, 0, 0.05);
}

/* --- ホバー時のアニメーション（共通ロジック） --- */
.kimeruca-btn-mall:hover {
    /* 変数を使ってその色のまま強く発光させる */
    background: var(--mall-color); /* 背景が少し濃くなる */
    background-color: color-mix(in srgb, var(--mall-color), transparent 80%); /* CSS Color 4対応ブラウザ向け微調整 */
    
    box-shadow: 0 0 30px var(--mall-color),
                inset 0 0 15px var(--mall-color);
                
    color: #fff !important; /* 文字は白く */
    text-shadow: 0 0 10px var(--mall-color);
    transform: translateY(-2px);
    border-color: var(--mall-color);
}

/* ホバー時に背景を少し濃くするハック（color-mix非対応用） */
.kimeruca-btn-mall:hover {
   background: transparent; /* 背景リセット */
   /* 擬似的な透過色をbox-shadow内側で表現するか、個別に指定 */
}
/* 個別ホバー補正（確実な動作のため） */
.kimeruca-btn-mall:hover { background: rgba(255, 215, 0, 0.25); }
.kimeruca-btn-mall[href*="rakuten.co.jp"]:hover { background: rgba(255, 77, 77, 0.25); }
.kimeruca-btn-mall[href*="amazon.co.jp"]:hover { background: rgba(255, 153, 0, 0.25); }

.kimeruca-btn-mall:hover::after {
    transform: translateX(5px);
}

/* =========================================
   4. BTOヒーロー画像（ショーケース風装飾・画質補正版）
   ========================================= */

.kimeruca-bto-img {
    /* --- レイアウトとサイズ --- */
    display: block;
    margin: 2.5rem auto;
    width: 100%;
    max-width: 380px; /* ★重要: 大きすぎると粗が目立つのでこのサイズ推奨 */
    height: auto;
    object-fit: contain;

    /* --- ショーケースのデザイン --- */
    background-color: #fff;
    padding: 20px; /* 適度な余白 */
    border: 1px solid var(--accent-cyber);
    border-radius: 4px;

    /* --- ★ここが画像処理（フィルター） --- */
    /* 1. contrast(1.1): コントラストを上げて輪郭をはっきりさせる */
    /* 2. saturate(1.1): 色を少し濃くして安っぽさを消す */
    /* 3. drop-shadow: 画像そのものに影を落として立体感を出す */
    filter: contrast(1.1) saturate(1.05) drop-shadow(0 10px 20px rgba(0,0,0,0.15));

    /* --- レンダリング最適化 --- */
    /* 縮小時のジャギ（ギザギザ）を軽減する設定 */
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0); /* ハードウェアアクセラレーション有効化 */

    /* --- ボックスの発光 --- */
    box-shadow: 
        inset 0 0 20px rgba(0, 243, 255, 0.05),
        0 0 25px rgba(0, 243, 255, 0.15),
        0 15px 35px rgba(0, 0, 0, 0.5);

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

/* ホバー時の動き */
.kimeruca-bto-img:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #fff;
    /* ホバー時はフィルターを少し強めて「起動」した感を出す */
    filter: contrast(1.15) saturate(1.1) drop-shadow(0 15px 30px rgba(0,0,0,0.25));
    
    box-shadow: 
        inset 0 0 10px rgba(0, 243, 255, 0.1),
        0 0 50px rgba(0, 243, 255, 0.3),
        0 25px 50px rgba(0, 0, 0, 0.7);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .kimeruca-bto-img {
        margin: 2rem auto;
        max-width: 85%;
        padding: 10px;
    }
}