@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD (楽天モバイルお得ナビ)
    Theme URI: http://localhost:8093
    Description: SWELL 子テーマ（楽天モバイルお得ナビ カラースキーム適用）
    Version: 1.0.0
    Author: 楽天モバイルお得ナビ編集部
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================
   楽天モバイルお得ナビ カラースキーム
   メイン: #C0102A ／ CTA: #FF6A00
   ============================================ */
:root{
  --color_main:#C0102A !important;
  --color_main_dark:#8A0B1F !important;
  --color_main_thin:#FBE7EA !important;
  --color_link:#C0102A !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:#FF6A00 !important;
  border-radius:9999px !important;
}
.swell-block-button.red_ .swell-block-button__link:hover{
  background-color:#E25A00 !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:#C0102A !important;
  border:2px solid #C0102A !important;
  border-radius:9999px !important;
  font-weight:700 !important;
  transition:.2s;
}
.swell-block-button.green_ .swell-block-button__link:hover{
  background-color:#C0102A !important;
  color:#ffffff !important;
}

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

/* --- h3：左ボーダー --- */
.post_content h3{
  border:none;
  border-left:5px solid #C0102A;
  padding:.1em .65em;
  color:#8A0B1F;
}
.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:#C0102A;
}

/* --- ヒーロー見出し：スマホ版のみ改行（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:#FF6A00;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;}
}