@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
/*
    Template: swell
    Theme Name: SWELL CHILD (ジムえらび)
    Theme URI: https://gymerabi.com
    Description: SWELL 子テーマ（ジムえらび 暖色カラースキーム・2026-09-30 刷新）
    Version: 1.0.0
    Author: ジムえらび編集部
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================
   ジムえらび カラースキーム（2026-09-30 刷新）
   ink #3E2F2C ／ coral #E2725B ／ blush #FBEDE8 ／ ivory #FDFAF7 ／ sand #D9A87C
   旧（紺 #1F3A5F ＋ 安全色オレンジ #F26430）は assets/_backup-20260930/ に退避。
   狙い：女性読者に向けて「明るい・暖かい・気分が上がる」印象にする。
   ============================================ */
:root{
  --color_main:#3E2F2C !important;
  --color_main_dark:#2E211F !important;
  --color_main_thin:#FBEDE8 !important;
  --color_link:#B5503B !important;

  /* ロゴ表示サイズの強制上書き（重要・絶対に消さない）
     logo_size_pc / logo_size_sp は「幅」ではなく【ロゴの高さ(px)】。
     SWELL は Style/Header.php でこの値をそのまま px として CSS変数に出力する（変換も係数も無い）。
     SWELL規定: sp=40〜80(初期48) / pc=初期40。
     テンプレ由来のDBクローンには 180/240 が入っており、そのままだと
     ヘッダー帯がロゴの数倍に肥大する（.c-headLogo と .l-header__menuBtn の高さがこの変数そのもの）。
     本来はカスタマイザー値を直すのが本筋（本サイトは pc=40 / sp=44 を投入済み）。
     この !important はDB値がテンプレ既定に戻った場合の保険。
     ジムえらびのロゴは 1000x200(5:1) なので sp=44px → 横220px で 375px幅に収まる。 */
  --logo_size_pc:40px !important;
  --logo_size_sp:44px !important;
}

/* --- メインCTA（loos/button color=red）: CV 色＋ピル型塗り --- */
.swell-block-button.red_ .swell-block-button__link{
  background-color:#E2725B !important;
  border-radius:9999px !important;
}
.swell-block-button.red_ .swell-block-button__link:hover{
  background-color:#C75B45 !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:#3E2F2C !important;
  border:2px solid #3E2F2C !important;
  border-radius:9999px !important;
  font-weight:700 !important;
  transition:.2s;
}
.swell-block-button.green_ .swell-block-button__link:hover{
  background-color:#3E2F2C !important;
  color:#ffffff !important;
}

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

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

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

/* --- CTAサブテキスト（is-style-cta-sub）: ボタン直下に密接配置・補助スタイル
       CTAボタンの下に置く小さな補助コピー（不安解消・具体ベネフィット）。
       本文段落と同じ見た目だとボタンと無関係に見えてコピーが浮くため、
       詰めて・中央寄せ・小さめ・補助カラーにして「ボタンの一部」に見せる。
       記事側は <!-- wp:paragraph {"className":"is-style-cta-sub"} --> で出力する。 */
.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:#8A7A75 !important;
  text-align:center !important;
  letter-spacing:.01em;
}
@media (max-width:600px){
  .post_content .is-style-cta-sub,
  .is-style-cta-sub{
    font-size:.78em !important;
    padding:0 .4em;
  }
}

/* --- モバイル固定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:#E2725B;box-shadow:0 -2px 8px rgba(92,62,50,.22);
  }
  .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;}
}


/* ============================================
   2026-09-30 追加：書体・地色・メインビジュアル
   ============================================ */

/* --- 書体：見出しだけ明朝、本文はゴシックのまま（可読性を落とさない） --- */
body,
.l-content,
.p-postList__title,
.c-postThumb__cat{
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',system-ui,sans-serif;
}
.p-mainVisual__slideTitle,
.c-postTitle__ttl,
.c-widget__title,
.post_content h2,
.post_content h3,
.post_content h4{
  font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  font-weight:700;
}

/* --- 地色：純白だと冷たいのでアイボリーに --- */
body{
  background:#FDFAF7;
}

/* --- メインビジュアル ---
   明るい写真に白文字を載せると読めないため、
   SWELL既定の「全面に暗いオーバーレイ＋白文字・中央寄せ」をやめ、
   「左から薄くかかる白のスクリム＋濃い文字・左寄せ」に置き換える。
   写真の明るさを保ったまま可読性を確保するのが目的。
   textLayer の color / text-shadow はテーマがインラインで書くので !important が必要。 */
.p-mainVisual .c-filterLayer::before{
  background-color:transparent !important;
  background-image:linear-gradient(90deg,
    rgba(255,252,250,.94) 0%,
    rgba(255,252,250,.89) 44%,
    rgba(255,252,250,.42) 72%,
    rgba(255,252,250,0) 100%) !important;
  opacity:1 !important;
}
.p-mainVisual__textLayer{
  color:#3E2F2C !important;
  text-shadow:none !important;
  text-align:left !important;
}
.p-mainVisual__slideText{
  color:#6B5751 !important;
}
@media (max-width:959px){
  /* SP は画面が狭く人物に文字が寄るため、スクリムをさらに手前まで効かせる */
  .p-mainVisual .c-filterLayer::before{
    background-image:linear-gradient(90deg,
      rgba(255,252,250,.95) 0%,
      rgba(255,252,250,.90) 52%,
      rgba(255,252,250,.46) 78%,
      rgba(255,252,250,0) 100%) !important;
  }
}