@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD (ふるさと納税ゼミ)
    Theme URI: http://localhost:8094
    Description: SWELL 子テーマ（ふるさと納税ゼミ カラースキーム適用）
    Version: 1.0.0
    Author: ふるさと納税ゼミ編集部
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================
   ふるさと納税ゼミ カラースキーム
   メイン: #1F3A5F ／ CTA: #E2701A
   ============================================ */
:root{
  --color_main:#1F3A5F !important;
  --color_main_dark:#142840 !important;
  --color_main_thin:#E7ECF3 !important;
  --color_link:#1F3A5F !important;

  /* ロゴ表示サイズの強制上書き（重要・絶対に消さない）
     SWELL は loos_customizer.logo_size_pc=240 を内部で 40px相当に変換するが、
     DBクローンで構築した直後はカスタマイザー画面で再保存しないと変換キャッシュが効かず、
     生の 240px が --logo_size_pc に焼かれてヘッダー帯が異常に太くなる（実例: 294px）。
     この強制上書きで毎回 takara と同じスリムヘッダー（94px帯）を担保する。
     カスタマイザーで「ロゴサイズ」を再保存すれば SWELL自身が再計算してくれるが、
     その操作を忘れても破綻しないようテンプレに内蔵。本番でも害なし。 */
  --logo_size_pc:40px !important;
  --logo_size_sp:48px !important;
}

/* --- メインCTA（loos/button color=red）: CV 色＋ピル型塗り --- */
.swell-block-button.red_ .swell-block-button__link{
  background-color:#E2701A !important;
  border-radius:9999px !important;
}
.swell-block-button.red_ .swell-block-button__link:hover{
  background-color:#B55713 !important;
}

/* --- 副CTA（loos/button color=green）: メイン色アウトラインピル型
       2026-05-29 ie-method で確定。比較系・補助動線用に「メインCTA塗り＋副CTAアウトライン」で
       CV優先順位を明確に伝える。SWELL素のgreen_（ライム緑 #62D847）はブランド色と整合しないため
       強制上書き。記事HTML側は <!-- wp:loos/button color="green" --> のまま使用可。 --- */
.swell-block-button.green_ .swell-block-button__link{
  background-color:transparent !important;
  color:#1F3A5F !important;
  border:2px solid #1F3A5F !important;
  border-radius:9999px !important;
  font-weight:700 !important;
  transition:.2s;
}
.swell-block-button.green_ .swell-block-button__link:hover{
  background-color:#1F3A5F !important;
  color:#ffffff !important;
}

/* --- h2：左バー＋極薄ティント（SWELL既定装飾は無効化） --- */
.post_content h2{
  background:#E7ECF3;
  border:none;
  border-left:6px solid #1F3A5F;
  border-radius:0 4px 4px 0;
  padding:.6em .7em;
  color:#142840;
}
.post_content h2::before,
.post_content h2::after{display:none !important;}

/* --- h3：左ボーダー --- */
.post_content h3{
  border:none;
  border-left:5px solid #7E93B0;
  padding:.1em .65em;
  color:#142840;
}
.post_content h3::before,
.post_content h3::after{display:none !important;}

/* --- CTAボタン：PCで存在感を強化 --- */
@media (min-width:960px){
  .swell-block-button.red_ .swell-block-button__link{
    padding-top:1.15em !important;
    padding-bottom:1.15em !important;
    font-size:1.2em !important;
    font-weight:700 !important;
  }
}

/* --- FAQ：質問（Q）の文字に色 --- */
.swell-block-faq .faq_q{
  color:#1F3A5F;
}

/* --- ヒーロー見出し：スマホ版のみ改行（br.br-sp）。PCは1行 --- */
.br-sp{display:none;}
@media (max-width:600px){
  .br-sp{display:inline;}
}

/* --- モバイル固定CTA（画面下スリムバー・スマホのみ）--- */
.m-fixed-cta{display:none;}
@media (max-width:600px){
  .m-fixed-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:999;
    background:#E2701A;box-shadow:0 -2px 8px rgba(0,0,0,.18);
  }
  .m-fixed-cta a{
    display:block;text-align:center;color:#fff;font-weight:700;
    padding:13px 10px;font-size:.95em;line-height:1.3;text-decoration:none;
  }
  body{padding-bottom:54px;}
}


/* ===== サイト固有CSS（custom.css より自動追記）===== */
/* ふるさと納税ゼミ サイト固有CSS
 * setup_local_wp.py が style.css の末尾に自動追記する（再実行しても消えない）。
 *
 * 【なぜこの指定が必要か】
 * CTA色 #E2701A（橙）に白文字を載せたときのコントラスト比は 3.20。
 * WCAG AA は通常サイズの文字に 4.5 を要求するが、大きい文字（18.66px以上の太字
 * = 14pt bold、または24px以上）は 3.0 で合格になる。
 * つまり「CTAの文字が常に18.66px以上の太字であること」が、この配色の前提条件。
 * SWELL既定のボタン文字は約14.7pxでこれを満たさないため、下限を強制する。
 *
 * この指定を外す場合は CTA色を #C2561A（コントラスト4.53）に変えること。
 * そちらは文字サイズに依存せず合格する。
 */

/* --- CTAボタンの文字サイズ下限を強制（アクセシビリティ要件）--- */
.swell-block-button .swell-block-button__link,
.swell-block-button.red_ .swell-block-button__link{
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
}
@media (min-width:960px){
  .swell-block-button.red_ .swell-block-button__link{
    font-size:21px !important;
  }
}

/* --- モバイル固定CTAも同様に下限を強制 --- */
.p-fixBottomCTA .swell-block-button__link,
.p-fixBottomCTA a{
  font-size:19px !important;
  font-weight:700 !important;
}

/* ===== サイト固有CSS（custom.css より自動追記）===== */
/* ふるさと納税ゼミ サイト固有CSS
 * setup_local_wp.py が style.css の末尾に自動追記する（再実行しても消えない）。
 *
 * 【なぜこの指定が必要か】
 * CTA色 #E2701A（橙）に白文字を載せたときのコントラスト比は 3.20。
 * WCAG AA は通常サイズの文字に 4.5 を要求するが、大きい文字（18.66px以上の太字
 * = 14pt bold、または24px以上）は 3.0 で合格になる。
 * つまり「CTAの文字が常に18.66px以上の太字であること」が、この配色の前提条件。
 * SWELL既定のボタン文字は約14.7pxでこれを満たさないため、下限を強制する。
 *
 * この指定を外す場合は CTA色を #C2561A（コントラスト4.53）に変えること。
 * そちらは文字サイズに依存せず合格する。
 */

/* --- CTAボタンの文字サイズ下限を強制（アクセシビリティ要件）--- */
.swell-block-button .swell-block-button__link,
.swell-block-button.red_ .swell-block-button__link{
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
}
@media (min-width:960px){
  .swell-block-button.red_ .swell-block-button__link{
    font-size:21px !important;
  }
}

/* --- モバイル固定CTAも同様に下限を強制 --- */
.p-fixBottomCTA .swell-block-button__link,
.p-fixBottomCTA a{
  font-size:19px !important;
  font-weight:700 !important;
}

/* --- CTAサブテキスト（is-style-cta-sub）: ボタン直下に密接配置・補助スタイル
       ie-method で実証済みの定義を移植（2026-09-17）。
       本文段落と同じスタイルだとボタンと無関係に見え、コピーが浮く。
       ボタン直下に詰めて中央寄せ・小さめ・補助カラーにすることで
       「ボタンに対する補助テキスト」と一目で認識できるグループ感を作る。
       文言は「不安解消・具体ベネフィット・短さ」の3要素を必須とする。 */
.post_content .is-style-cta-sub,
.is-style-cta-sub{
  margin-top:-.5em !important;
  margin-bottom:2.2em !important;
  font-size:.82em !important;
  line-height:1.55 !important;
  color:#6B7280 !important;   /* 深藍系サイトに合わせたニュートラルグレー */
  text-align:center !important;
  letter-spacing:.01em;
}
/* SP：少し小さめ＋折返し時の読みやすさ確保 */
@media (max-width:600px){
  .post_content .is-style-cta-sub,
  .is-style-cta-sub{
    font-size:.78em !important;
    padding:0 .4em;
  }
}

/* --- 列数の多い表をSP/タブレットで圧縮せず横スクロールさせる（2026-09-18）
       SWELLの表ラッパーは overflow-x:auto だが、table 側が幅100%に収縮するため
       6列の表がSP 390px で1列57pxまで潰れ、「給与収入」が縦1文字ずつに割れる。
       min-width を与えて意図的に溢れさせ、ラッパーのスクロールを機能させる。
       ⚠️ PC幅では本文幅に収まるので適用しない（不要な横スクロールを出さない）。
       ⚠️ 全テーブルに当てると2〜3列の表まで不要にスクロールするので、
       　 記事側で className="is-scroll-sp" を付けた表だけに限定する。 */
@media (max-width:960px){
  .post_content .is-scroll-sp table{
    min-width: 620px;
  }
  .post_content .is-scroll-sp table th,
  .post_content .is-scroll-sp table td{
    white-space: nowrap;      /* 「28,000円」が3行に割れるのを防ぐ */
  }
  /* 1列目（年収）を固定して、横スクロール中も行を見失わないようにする */
  .post_content .is-scroll-sp table th:first-child,
  .post_content .is-scroll-sp table td:first-child{
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
  .post_content .is-scroll-sp table thead th:first-child{
    background: #1F3A5F;      /* ヘッダー行はメインカラーのまま */
  }
}
/* スクロールできることを示すヒント（SPのみ） */
@media (max-width:600px){
  .post_content .is-scroll-sp::after{
    content: "→ 横にスクロールできます";
    display: block;
    font-size: .72em;
    color: #6B7280;
    text-align: right;
    margin-top: .3em;
  }
}

/* 1列目（年収）はPC幅でも折り返さない（「300万／円」と割れるのを防ぐ） */
.post_content .is-scroll-sp table th:first-child,
.post_content .is-scroll-sp table td:first-child{
  white-space: nowrap;
}