@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===== 2025-09-21 CTAブロック 最終版ここから ===== */

/* アクセシビリティ補助（見えない見出し） */
.visually-hidden{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}

/* コンテナ：左右2カラム（スマホは縦積み） */
.recommend-cta-area{
  display:flex;
  flex-wrap:wrap;
  gap:1.6em;                /* ← 全体の間隔はここで統一管理 */
  margin:2em 0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1.2em 1.2em 1.0em;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.recommend-cta-area .cta-left,
.recommend-cta-area .cta-right{
  flex:1 1 0;
  min-width:300px;
  font-size:1rem;           /* 左右の文字密度を合わせる */
  line-height:1.8;
}

/* 見出し帯：左右で完全共通（クラス付与で適用） */
.cta-head{
  position:relative;
  margin:0 0 .8em;
  padding:.65em 1rem;
  border-radius:10px;
  background:#f7f3f1;       /* クリーム系の共通帯色 */
  font-weight:700;
  line-height:1.35;
}
.cta-head::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:4px;
  background:#e74a3b;       /* 赤ラインを共通に */
  border-radius:2px;
}

/* リスト類：左右で同じ余白・行間 */
.book-picks, .learn-links{
  margin:.8em 0 0 1.1em;
  padding:0;
}
.book-picks li, .learn-links li{
  margin:.38em 0;
}

/* アフィリエイト注記（共通） */
.affiliate-note{
  font-size:.85em;
  color:#6b7280;
  margin-top:1em;
}

/* 比較表（別セクションでも使える汎用ブロック） */
.book-compare-table table{
  width:100%;
  border-collapse:collapse;
  margin:2em 0;
}
.book-compare-table th,
.book-compare-table td{
  border:1px solid #ddd;
  padding:.6em;
  text-align:center;
}
.book-compare-table th{
  background:#f0f0f0;
}

/* レスポンシブ微調整 */
@media (max-width: 768px){
  .recommend-cta-area{ gap:1.1em; padding:1em; }
  .cta-head{ margin-bottom:.6em; }
}

/* （任意）PCワイド時に左を少し広く：6:4寄せ
@media (min-width: 1024px){
  .recommend-cta-area{ column-gap:2.0em; }
  .cta-left { flex:0 0 58%; }
  .cta-right{ flex:0 0 42%; }
}
*/
/* ===== CTAブロック 最終版ここまで ===== */

/* ===== 2025-09-21 CTA 見出し帯高さを統一・二重線解消 ===== */

/* 旧ルールの残存をリセット（※ !important は未使用） */
.recommend-cta-area .cta-left h3,
.recommend-cta-area .cta-right h3{
  border: 0;
  background: none;
}

/* 共通帯：高さ・下線を完全統一 */
.cta-head{
  position: relative;
  display: flex;           /* 絵文字と文字のベースライン差を吸収 */
  align-items: center;     /* 垂直中央 */
  gap: .55em;
  margin: 0 0 .9em;
  padding: .7em 1rem;      /* ← 帯の“高さ”はここで統一 */
  min-height: 58px;        /* ← 明示的に同じ高さに（PC基準） */
  border-radius: 12px;
  background: #f7f3f1;     /* 帯色（薄クリーム） */
  font-weight: 700;
  line-height: 1.2;
  font-size: 1.125rem;     /* 16px基準で約18px：左右で同一 */
}

/* 帯下の赤ライン（1本だけ出す） */
.cta-head::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 4px;
  background: #e74a3b;
  border-radius: 2px;
}

/* スマホ時は少しコンパクトに（帯が大きすぎないように） */
@media (max-width: 768px){
  .cta-head{
    padding: .6em .9rem;
    min-height: 50px;
    margin-bottom: .6em;
    font-size: 1.06rem;
  }
}

/* オプション：帯色をやや濃くして可読性を上げたい場合に有効化
.cta-head{ background:#f3ece9; }
*/
/* CTA内の直下子要素（左/右カラム）の余白をリセットして段差解消 */
.recommend-cta-area > * { margin-top: 0; }
.recommend-cta-area > * + * { margin-top: 0; }

/* 念のため：h3見出し自体の上余白もゼロに統一（テーマ側のh3指定を上書き） */
.recommend-cta-area .cta-head { margin-top: 0; }

/* 既に入れている帯スタイルと併用OK（参考）
.cta-head{
  position:relative;display:flex;align-items:center;gap:.55em;
  margin:0 0 .9em;padding:.7em 1rem;min-height:58px;border-radius:12px;
  background:#f7f3f1;font-weight:700;line-height:1.2;font-size:1.125rem;
}
.cta-head::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:4px;background:#e74a3b;border-radius:2px;}
@media (max-width:768px){.cta-head{padding:.6em .9rem;min-height:50px;margin-bottom:.6em;font-size:1.06rem;}}
*/

.book-btn{
  display:inline-block;
  margin-top:.3em;
  padding:.35em .8em;
  font-size:.85rem;
  background:#4c8661;
  color:#fff;
  border-radius:4px;
  text-decoration:none;
}
.book-btn:hover{ opacity:.85; }
/* 比較表（詳細版：シンプル4カラム） */
.book-compare-table{ margin:2.2em 0; }
.book-compare-table .table-title{ margin:.2em 0 1em; font-size:1.125rem; }
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
}
.table-scroll table {
  min-width: 500px; /* カラム数に合わせて調整 */
  width: 100%;
  border-collapse: collapse;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
}
.table-scroll th, .table-scroll td {
  border:1px solid #e5e7eb;
  padding:.6em;
  text-align:center;
}
.table-scroll th {
  background:#f8f9fa;
  font-weight:600;
}

/* スクロールバー控えめ */
.table-scroll::-webkit-scrollbar {
  height:6px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background:rgba(0,0,0,0.2);
  border-radius:3px;
}