@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://reform-mitsu.com/
    Description: リフォミツ専用 SWELL カスタマイズ（UI/UX改善版）
    Version: 2.0.0
    Author: reform-mitsu
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================================
   1. カラー変数上書き
   SWELLのカスタマイザーCSS（priority:9）より後に読み込まれる
   ため !important 不要でそのまま上書き可能
   ============================================================ */

:root {
  --color_main       : #0f8b8d;
  --color_main_thin  : rgba(15, 139, 141, 0.10);
  --color_main_dark  : #0a7375;
  --color_link       : #0f8b8d;
  --color_htag       : #0f8b8d;

  /* リフォミツ独自トークン */
  --rm-orange        : #0f8b8d;
  --rm-orange-dark   : #0a7375;
  --rm-orange-light  : #f0f9f9;
  --rm-orange-mid    : #a7d8d9;
  --rm-orange-border : #7fc4c5;
  --rm-text          : #1a1a1a;
  --rm-muted         : #666;
  --rm-radius        : 8px;
  --rm-radius-lg     : 12px;
}

/* ============================================================
   2. リンクカラー統一
   ============================================================ */

a {
  color: var(--rm-orange);
}
a:hover {
  color: var(--rm-orange-dark);
  opacity: 1;
}
.p-entry-content a {
  color: var(--rm-orange);
  text-decoration: underline;
}
.p-entry-content a:hover {
  color: var(--rm-orange-dark);
}

/* ============================================================
   3. 見出し（H2/H3）
   ============================================================ */

/* SWELLデフォルトのH3スタイルを統一 */
.p-entry-content h2 {
  border-left: 4px solid var(--rm-orange);
}
.p-entry-content h3 {
  border-bottom-color: var(--rm-orange);
}

/* ============================================================
   4. グローバルナビ：CTAボタン
   WPメニューに「無料診断」を追加してクラス "nav-cta" を付与、
   またはfunctions.phpのwp_nav_menu_items filterで自動追加
   ============================================================ */

/* PC ナビのCTAボタン */
.c-gnav .nav-cta > a,
.c-gnav .menu-item.nav-cta > a {
  display        : inline-block;
  background     : var(--rm-orange);
  color          : #fff !important;
  padding        : 6px 18px;
  border-radius  : 20px;
  font-size      : 0.85rem;
  font-weight    : 700;
  transition     : background 0.2s, transform 0.15s;
  text-decoration: none;
  white-space    : nowrap;
}
.c-gnav .nav-cta > a:hover,
.c-gnav .menu-item.nav-cta > a:hover {
  background : var(--rm-orange-dark);
  transform  : translateY(-1px);
  color      : #fff !important;
}

/* SP ナビのCTAボタン */
.c-spMenu .nav-cta > a,
.c-spMenu .menu-item.nav-cta > a {
  display        : block;
  background     : var(--rm-orange);
  color          : #fff !important;
  text-align     : center;
  padding        : 12px;
  border-radius  : var(--rm-radius);
  font-weight    : 700;
  margin         : 8px 16px;
  text-decoration: none;
}

/* ============================================================
   5. 記事内インラインCTA
   functions.php から <div class="cta-inline"> を挿入
   ============================================================ */

.cta-inline {
  display        : flex;
  align-items    : flex-start;
  gap            : 16px;
  background     : var(--rm-orange-light);
  border         : 2px solid var(--rm-orange-border);
  border-radius  : var(--rm-radius-lg);
  padding        : 24px 28px;
  margin         : 40px 0;
  position       : relative;
  overflow       : hidden;
}
.cta-inline::before {
  content    : '';
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : 4px;
  height     : 100%;
  background : var(--rm-orange);
}
.cta-inline__icon {
  font-size  : 2rem;
  flex-shrink: 0;
  margin-top : 2px;
}
.cta-inline__body {
  flex: 1;
}
.cta-inline__title {
  font-size  : 1rem;
  font-weight: 700;
  color      : var(--rm-text);
  margin     : 0 0 8px;
  line-height: 1.5;
}
.cta-inline__text {
  font-size  : 0.9rem;
  color      : var(--rm-muted);
  margin     : 0 0 16px;
  line-height: 1.7;
}
.cta-inline__btn {
  display        : inline-block;
  background     : var(--rm-orange);
  color          : #fff !important;
  font-size      : 0.95rem;
  font-weight    : 700;
  padding        : 12px 28px;
  border-radius  : 24px;
  text-decoration: none !important;
  transition     : background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow     : 0 3px 12px rgba(15, 139, 141, 0.30);
}
.cta-inline__btn:hover {
  background : var(--rm-orange-dark);
  transform  : translateY(-2px);
  box-shadow : 0 6px 20px rgba(15, 139, 141, 0.40);
  color      : #fff !important;
}

/* SP: インラインCTA縦並び */
@media (max-width: 600px) {
  .cta-inline {
    flex-direction: column;
    gap           : 12px;
    padding       : 20px 18px;
  }
  .cta-inline__btn {
    display   : block;
    text-align: center;
  }
}

/* ============================================================
   6. サイドバー診断CTAバナー
   functions.php の dynamic_sidebar_before から挿入
   ============================================================ */

.cta-sidebar {
  background   : linear-gradient(135deg, var(--rm-orange) 0%, var(--rm-orange-dark) 100%);
  border-radius: var(--rm-radius-lg);
  padding      : 24px 20px;
  margin-bottom: 28px;
  text-align   : center;
  color        : #fff;
  position     : relative;
  overflow     : hidden;
}
.cta-sidebar::after {
  content      : '🏠';
  position     : absolute;
  right        : -8px;
  bottom       : -10px;
  font-size    : 5rem;
  opacity      : 0.12;
  pointer-events: none;
}
.cta-sidebar__label {
  display        : inline-block;
  font-size      : 0.75rem;
  font-weight    : 700;
  background     : rgba(255,255,255,0.25);
  border-radius  : 10px;
  padding        : 3px 10px;
  margin-bottom  : 12px;
  letter-spacing : 0.05em;
}
.cta-sidebar__title {
  font-size  : 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin     : 0 0 8px;
}
.cta-sidebar__text {
  font-size  : 0.82rem;
  opacity    : 0.9;
  line-height: 1.6;
  margin     : 0 0 18px;
}
.cta-sidebar__btn {
  display        : block;
  background     : #fff;
  color          : var(--rm-orange) !important;
  font-size      : 0.9rem;
  font-weight    : 700;
  padding        : 12px 16px;
  border-radius  : 24px;
  text-decoration: none !important;
  transition     : transform 0.15s, box-shadow 0.15s;
  box-shadow     : 0 3px 10px rgba(0,0,0,0.15);
}
.cta-sidebar__btn:hover {
  transform : translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
  color     : var(--rm-orange-dark) !important;
}

/* ============================================================
   7. 記事一覧カードのホバー改善
   ============================================================ */

.p-postList__item:hover,
.c-postList__item:hover {
  box-shadow: 0 4px 20px rgba(15, 139, 141, 0.15);
  transform : translateY(-2px);
  transition: all 0.2s;
}

/* アイキャッチなし記事のデフォルト背景 */
.p-postList__item .c-thumb:empty,
.c-postCard__thumb:empty {
  background   : var(--rm-orange-light);
  min-height   : 120px;
}

/* ============================================================
   8. ページネーション・ブロック要素のオレンジ統一
   ============================================================ */

/* ページネーション */
.c-pagination__item.-current,
.c-pagination__item:hover {
  background: var(--rm-orange);
  border-color: var(--rm-orange);
  color: #fff;
}

/* 目次（TOC） */
.p-toc {
  border-color: var(--rm-orange-border);
  background  : var(--rm-orange-light);
}
.p-toc__title {
  background  : var(--rm-orange);
  color       : #fff;
}

/* ============================================================
   9. フッター
   ============================================================ */

.l-footer__inner a {
  color: var(--rm-orange-border);
}
.l-footer__inner a:hover {
  color: #fff;
}

/* ============================================================
   10. ユーティリティ
   ============================================================ */

/* PC/SP ナビの "ガイド記事一覧へ" バッジ */
.c-gnav__item a[href*="/guides/"],
.c-gnav__item a[href*="/articles/"] {
  position: relative;
}

/* スクロール余白調整（FIXヘッダー対応） */
:target {
  scroll-margin-top: 80px;
}

/* ============================================================
   11. ガイドページ修正
   ============================================================ */

/* ① SWELLが出力するパンくず・ページタイトルH1を非表示
      （プラグインのショートコードが独自のものを出力するため二重になる）
      ※ body:has() は Chrome 105+ / Safari 15.4+ / Firefox 121+ で対応済み */
body:has(.rifomitsu-guide-index) .p-breadcrumb,
body:has(.rifomitsu-guide-index) .c-pageTitle {
  display: none !important;
}

/* ② ガイドインデックスのH2見出しが不可視になっている問題を修正
      rifomitsu-swell-posts.css が背景色をティール #0f8b8d に変更しているが、
      文字色もティールのままで不可視になっているため白に戻す */
.post_content .rifomitsu-guide-heading h2 {
  color: #fff !important;
}

/* ③ SWELLのh2擬似要素（左ボーダー等）を無効化 */
.post_content .rifomitsu-guide-heading h2::before {
  display: none !important;
}

/* ============================================================
   12. ヒーロー（ファーストビュー）修正
   ============================================================ */

/* PC・タブレット横（≥768px）: hero-panelの幅を50% → 40%に縮小
   FV画像のカップルが x≈368-735px（1280px表示時）に位置するが、
   50%フォームパネルの左端（x=640px）と被っていたため */
@media (min-width: 768px) {
  .hero-panel {
    width: 40% !important;
  }
}

/* SP（≤767px）: hero-panelをSP背景画像の下にスタック表示
   プラグインのCSSがhero-panelをposition:absoluteでSP画像の右半分に
   絶対配置しており、カップルと完全に重なっていたため静的配置に変更 */
@media (max-width: 767px) {
  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
  }
  .hero-panel {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    order: 1 !important;
    bottom: auto !important;
    height: auto !important;
  }
}