/* =========================================================
   タカハシ自動車 コラム記事 統一CSS（tkh-col-container）
   使い方：追加CSSの末尾に貼り付け。記事HTMLの<style>は削除。
   記事は <div class="tkh-col-container"> ... </div> で囲む。
   ========================================================= */

/* ---------- 1. ベース ---------- */
.tkh-col-container{font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;line-height:1.8;color:#333;max-width:1000px;margin:0 auto}
.tkh-col-container p{margin-bottom:20px;font-size:16px}
.tkh-col-container strong{color:#e65c00;background:linear-gradient(transparent 70%,#ffe4b3 70%)}
.tkh-col-container img{max-width:100%;height:auto}

/* ---------- 2. 見出し ---------- */
.tkh-col-container h1{font-size:24px;font-weight:bold;margin-bottom:30px;padding-bottom:15px;border-bottom:2px solid #005bac;color:#005bac;line-height:1.5}
.tkh-col-container h2{background:#f4f9ff;padding:15px;border-left:6px solid #005bac;font-size:20px;font-weight:bold;margin-top:50px;margin-bottom:32px;line-height:1.5}
.tkh-col-container h3{font-size:18px;font-weight:bold;border-bottom:1px solid #ddd;padding-bottom:12px;margin-top:40px;margin-bottom:22px;color:#005bac;line-height:1.5}
.tkh-col-container h4{font-size:16px;font-weight:bold;margin-top:25px;margin-bottom:10px;color:#333}

/* ---------- 3. リスト ---------- */
.tkh-col-container ul{margin-bottom:20px;background:#f4f9ff;padding:20px 20px 10px 40px;border-radius:6px;border:1px solid #dbecff;list-style:disc outside}
.tkh-col-container li{display:list-item;list-style:disc outside;margin-bottom:12px;font-size:16px;line-height:1.7}
.tkh-col-container li::marker{color:#005bac}
.tkh-li-title{font-weight:bold;color:#005bac}

/* ---------- 4. 注記・目次 ---------- */
.tkh-col-container .tkh-note{font-size:14px;color:#666;margin-top:-8px}
.tkh-col-container .tkh-toc-title{margin-bottom:8px}

/* ---------- 5. 囲みボックス ---------- */
/* 要点・チェックリスト（旧 .check-box もこれに統一） */
.tkh-note-box{background:#f9f9f9;border:1px solid #eee;padding:20px;margin:25px 0;border-radius:8px}
.tkh-note-box > span{display:block;font-weight:bold;color:#005bac;margin-bottom:10px}
.tkh-note-box p:last-child{margin-bottom:0}
.tkh-col-container .tkh-note-box ul{background:none;border:none;padding:0 0 0 1.5em;margin-bottom:0}

/* まとめ・結論ボックス（旧 .conclusion もこれに統一） */
.tkh-conclusion{background:#f4f9ff;border:2px solid #005bac;border-radius:10px;padding:30px;margin:50px 0 30px}
.tkh-conclusion p:last-child{margin-bottom:0}

/* 最新情報ボックス */
.tkh-update-box{background:#fffafa;border:2px solid #d32f2f;padding:20px;margin-bottom:30px;border-radius:8px;position:relative}
.tkh-update-box::before{content:"最新情報";position:absolute;top:-12px;left:15px;background:#d32f2f;color:#fff;padding:2px 12px;font-size:12px;font-weight:bold;border-radius:4px}
.tkh-update-box p{margin-bottom:0;font-size:15px;color:#333}

/* 結論ボックス */
.tkh-summary{background:#fff;border:2px solid #005bac;border-radius:8px;margin:30px 0;overflow:hidden}
.tkh-summary-title{background:#005bac;color:#fff;font-weight:bold;font-size:17px;padding:10px 20px}
.tkh-summary-body{padding:20px 20px 6px}
.tkh-col-container .tkh-summary-body p{margin-bottom:14px}
.tkh-summary-meta{background:#f4f9ff;border-top:1px solid #dbecff;padding:12px 20px}
.tkh-col-container .tkh-summary-meta p{margin:0 0 4px;font-size:13px;color:#666;line-height:1.6}
.tkh-col-container .tkh-summary-meta p:last-child{margin-bottom:0}
.tkh-col-container .tkh-summary-list{background:none;border:none;border-radius:0;padding:0 0 0 1.5em;margin:0 0 14px}
.tkh-col-container .tkh-summary-list li{margin-bottom:6px}

.tkh-text-center{text-align:center}

/* FAQ */
.tkh-faq-a{font-weight:bold;color:#e65c00;margin-right:6px}

/* ---------- 6. ボタン ---------- */
/* 推奨構造：<div class="tkh-btn-wrap"><p>見出し</p><p class="tkh-btn-row"><a class="tkh-btn">…</a><a class="tkh-btn">…</a></p></div>
   ※WordPressの自動整形（wpautop）で<p>や<br>が挿入されても崩れないようにしています */
.tkh-btn-wrap,.tkh-btn-group{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px;margin:40px 0}
.tkh-btn-wrap > p{flex:0 0 100%;text-align:center;margin-bottom:0}
.tkh-btn-wrap > p.tkh-btn-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px;margin:0}
.tkh-btn-wrap br,.tkh-btn-group br{display:none}
/* 旧構造（<a>を直接並べた場合に自動挿入される<p>）も横並びにする */
.tkh-btn-wrap > p:has(> .tkh-btn),.tkh-btn-group > p:has(> .tkh-btn){display:contents}
.tkh-btn{display:inline-block;background:#ff8c00;color:#fff!important;font-size:18px;font-weight:bold;padding:15px 40px;border-radius:50px;text-decoration:none!important;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:all .3s;text-align:center}
.tkh-btn:hover{background:#e67e00;transform:translateY(2px);box-shadow:0 2px 4px rgba(0,0,0,.1);color:#fff!important;opacity:1}

/* ---------- 7. 表 ---------- */
.tkh-table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}
.comparison-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:16px}
.tkh-table-wrapper .comparison-table{margin:0;min-width:600px}
.comparison-table th{background:#005bac;color:#fff;padding:12px;border:1px solid #ddd;font-weight:bold;text-align:center;vertical-align:middle}
.comparison-table td{padding:12px;border:1px solid #ddd;text-align:center;vertical-align:middle;line-height:1.5}
.comparison-table tr:nth-child(even){background-color:#f9f9f9}
.tkh-nowrap{white-space:nowrap}

/* 項目名が左列の表（幅固定・折り返し可） */
.comparison-table.tkh-table-compact{min-width:0;table-layout:fixed}
.comparison-table.tkh-table-compact td{overflow-wrap:anywhere}
.comparison-table.tkh-table-compact td:first-child{font-weight:bold;color:#111;background:#f4f9ff}

/* 横スライド表（左列固定） */
.tkh-scroll-hint{display:none}
.comparison-table.tkh-table-wide th:first-child,.comparison-table.tkh-table-wide td:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 #ddd}

/* バッジ・補足 */
.tkh-table-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-weight:bold;color:#fff;font-size:14px;margin-bottom:4px}
.tkh-badge-new{background:#e65c00}
.tkh-badge-unused{background:#00a86b}
.tkh-badge-used{background:#005bac}
.tkh-table-text-bold{font-weight:bold;color:#111}
.tkh-table-subtext{display:block;font-size:13px;color:#666;margin-top:4px;line-height:1.4}
/* 表ヘッダー内の補足（インラインstyleの代わり） */
.comparison-table th .tkh-table-subtext{color:#fff;margin-top:0}
/* 強調列（デリカミニ等：インラインstyleの代わり） */
.comparison-table th.tkh-th-accent{background:#e65c00}
.comparison-table th.tkh-th-green{background:#00a86b}
.comparison-table td.tkh-td-accent{background:#fff6f0;color:#e65c00;font-weight:bold}

/* ---------- 8. 動画 ---------- */
.tkh-video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;margin:30px auto;background:#000;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.tkh-video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.tkh-video-container + .tkh-video-comment{margin-top:-10px}
.tkh-video-comment{font-size:14px;color:#555;background:#fdfdfd;padding:15px;border-radius:6px;border:1px solid #eee;margin-bottom:40px}

/* ---------- 9. スマホ（768px以下） ---------- */
@media (max-width:768px){
  .tkh-col-container h1{font-size:20px}
  .tkh-col-container h2{font-size:18px;margin-bottom:26px}
  .tkh-col-container h3{margin-top:34px;margin-bottom:18px}
  .tkh-col-container ul{padding:16px 14px 6px 32px}
  .tkh-btn-wrap,.tkh-btn-group,.tkh-btn-wrap > p.tkh-btn-row{flex-direction:column;gap:15px}
  .tkh-btn-wrap > p.tkh-btn-row{width:100%}
  .tkh-btn{width:100%;max-width:none;font-size:16px;padding:15px 10px}
  .tkh-update-box{padding:15px}
  .tkh-conclusion{padding:20px 15px;margin:40px 0 25px}
  .tkh-summary-title{font-size:16px;padding:10px 15px}
  .tkh-summary-body{padding:15px 15px 2px}
  .tkh-summary-meta{padding:10px 15px}
  .comparison-table th,.comparison-table td{font-size:14px;padding:10px 6px}
  .comparison-table.tkh-table-compact th,.comparison-table.tkh-table-compact td{font-size:12.5px;padding:8px 4px}
  .tkh-table-badge{padding:2px 8px;font-size:12px}
  .tkh-table-subtext{font-size:11px;margin-top:2px}
  .tkh-table-compact .tkh-table-badge{font-size:12px;padding:3px 8px}
  .tkh-table-compact .tkh-table-subtext{font-size:11px}
  .tkh-col-container .tkh-scroll-hint{display:block;font-size:12px;color:#666;text-align:right;margin:0 0 6px}
  .comparison-table.tkh-table-wide{min-width:680px}
  .comparison-table.tkh-table-wide th,.comparison-table.tkh-table-wide td{font-size:14px;padding:10px 8px}
  .tkh-table-wide .tkh-table-subtext{font-size:12px}
}