/*
Theme Name:   SWELL CHILD – FUN-CREATE
Theme URI:    https://fun-create.co.jp
Description:  FUN-CREATEコーポレートサイト用 SWELL子テーマ
Author:       FUN-CREATE株式会社
Author URI:   https://fun-create.co.jp
Template:     swell
Version:      1.0.0
Text Domain:  fc-swell-child
*/

/*
 * ================================================================
 * NOTE: このファイルを編集する際は必ず子テーマのstyle.cssを編集すること。
 *       親テーマ(SWELL本体)のstyle.cssは絶対に編集しない。
 * ================================================================
 */

/* ────────────────────────────────────────────────
   1. FUN-CREATE ブランドカラー変数
   （全ページ共通。ページ固有CSSはpage-{slug}.phpに記述）
──────────────────────────────────────────────── */
:root {
  --fc-navy:    #1A2453;
  --fc-navy2:   #243070;
  --fc-navy3:   #0F1635;
  --fc-orange:  #F47920;
  --fc-gold:    #F9C74F;
  --fc-teal:    #0D9488;
  --fc-teal2:   #14B8A6;
  --fc-green:   #16A34A;
  --fc-red:     #DC2626;
  --fc-blue:    #2563EB;
  --fc-blue2:   #1D4ED8;
  --fc-gray:    #6B7280;
  --fc-lgray:   #E5E7EB;
  --fc-bg:      #F5F6FA;
  --fc-bg2:     #EEF0F8;
  --fc-white:   #FFFFFF;
  --fc-text:    #111827;
  --fc-text2:   #374151;
  --fc-shadow:    0 4px 20px rgba(26,36,83,.09);
  --fc-shadow-lg: 0 8px 40px rgba(26,36,83,.14);
}

/* ────────────────────────────────────────────────
   2. SWELLグローバルヘッダーの上書き
   （SWELLカスタマイザーでヘッダーを設定した上で、
     ブランドカラーに合わせて微調整する）
──────────────────────────────────────────────── */

/* ヘッダー背景色をネイビーに統一 */
#site-header {
  background-color: var(--fc-navy) !important;
}

/* ナビリンクの色 */
#site-header .navi-link-item > a {
  color: rgba(255,255,255,.75) !important;
  font-weight: 700 !important;
}
#site-header .navi-link-item > a:hover,
#site-header .navi-link-item.current-menu-item > a {
  color: #fff !important;
  border-bottom: 3px solid var(--fc-orange) !important;
}

/* ロゴ調整 */
.site-header__logo img {
  max-height: 36px;
}

/* ヘッダーCTAボタン（SWELLのヘッダーボタン機能を使う場合） */
.header-btn a,
.header_btn a {
  background: var(--fc-orange) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
}

/* ────────────────────────────────────────────────
   3. SWELLフッターの上書き
──────────────────────────────────────────────── */
#site-footer {
  background-color: var(--fc-navy3) !important;
  color: rgba(255,255,255,.4) !important;
}
#site-footer a {
  color: rgba(255,255,255,.4) !important;
}
#site-footer a:hover {
  color: rgba(255,255,255,.7) !important;
}

/* ────────────────────────────────────────────────
   4. fc-page クラス（WFコンテンツ直下のリセット）
   各 page-{slug}.php の <div class="fc-page"> に適用
──────────────────────────────────────────────── */
.fc-page {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--fc-text);
  line-height: 1.7;
  font-size: 15px;
}

/* SWELLのデフォルトmarginをfc-page配下でリセット */
.fc-page *,
.fc-page *::before,
.fc-page *::after {
  box-sizing: border-box;
}

/* ページ本文エリアの最大幅制限を解除（全幅デザイン用）*/
.fc-page .l-article,
.fc-page .l-contents__main,
.l-contents.is-lp .l-contents__main {
  max-width: 100% !important;
  padding: 0 !important;
}

/* SWELLのデフォルトパンくずを非表示
   （fc-breadcrumb を使う場合）*/
.fc-page ~ .breadcrumb,
.p-breadcrumb {
  /* 必要に応じてコメントアウト解除 */
  /* display: none !important; */
}

/* ────────────────────────────────────────────────
   5. SWELLサイドバーを固定ページで非表示にする
   （functions.php の swell_is_show_sidebar フックと連動）
──────────────────────────────────────────────── */
.is-lp-page .l-sidebar {
  display: none !important;
}

/* ────────────────────────────────────────────────
   6. Google Fonts 読み込み
   （functions.php でエンキューするが、フォールバックとして記載）
──────────────────────────────────────────────── */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=DM+Serif+Display&display=swap'); */

/* ────────────────────────────────────────────────
   7. レスポンシブ共通（fc-page 配下）
──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fc-page .page-hero { padding: 48px 24px !important; }
  .fc-page .section    { padding: 48px 24px !important; }
}
@media (max-width: 768px) {
  .fc-page [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .fc-page .hero-inner {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   FUN-CREATE SP レスポンシブ対応 v2
   実際のクラス名を確認して正確に記述
   ブレークポイント：1024px / 768px / 480px
   ================================================================ */

/* ─── タブレット（〜1024px）─────────────────────────────────── */
@media (max-width: 1024px) {

  /* section padding */
  .fc-page .section,
  .fc-page .page-hero,
  .fc-page .hero { padding-left: 24px !important; padding-right: 24px !important; }

  /* 5カラム→2カラム */
  .fc-page .flow-wrap { grid-template-columns: repeat(2,1fr) !important; }

  /* 4カラム→2カラム */
  .fc-page .pain-grid-4,
  .fc-page .reasons-grid,
  .fc-page .support-grid,
  .fc-page .fc-trust-grid,
  .fc-page .service-list-compact,
  .fc-page .service-flow-grid,
  .fc-page .sns-platform-grid,
  .fc-page .pain-grid,
  .fc-page .work-grid,
  .fc-page .steps { grid-template-columns: repeat(2,1fr) !important; }

  /* hero 2カラム → 1カラム */
  .fc-page .hero-inner { grid-template-columns: 1fr !important; }
  .fc-page .page-hero-inner { grid-template-columns: 1fr !important; }
  .fc-page .hero-card { display: none !important; } /* PCのみの装飾カード */
}

/* ─── スマートフォン（〜768px）──────────────────────────────── */
@media (max-width: 768px) {

  /* ─ 全体 padding ─ */
  .fc-page .section,
  .fc-page .section-inner,
  .fc-page .page-hero,
  .fc-page .hero { padding: 32px 16px !important; }
  .fc-page .final-cta,
  .fc-page .contact-section { padding: 40px 16px !important; }
  .fc-page .stats-section > div { padding: 0 16px; }
  .fc-page .swag-banner,
  .fc-page .partner-banner { padding: 28px 16px !important; }
  .fc-page .inline-cta-band { padding: 28px 16px !important; }

  /* ─ 全グリッド1カラム（実際のクラス名を全列挙）─ */
  .fc-page .hero-inner,
  .fc-page .page-hero-inner,
  .fc-page .pain-grid-4,
  .fc-page .reasons-grid,
  .fc-page .flow-wrap,
  .fc-page .ads-service-grid,
  .fc-page .price-grid,
  .fc-page .faq-layout,
  .fc-page .related-grid,
  .fc-page .inline-cta-inner,
  .fc-page .ba-grid,
  .fc-page .ba-wrap,
  .fc-page .business-grid,
  .fc-page .coaching-cycle,
  .fc-page .coaching-wrap,
  .fc-page .compare-wrap,
  .fc-page .consultant-grid,
  .fc-page .cta-form-grid,
  .fc-page .expertise-grid,
  .fc-page .ext-link-grid,
  .fc-page .fc-trust-grid,
  .fc-page .features,
  .fc-page .fit-grid,
  .fc-page .flow-steps,
  .fc-page .form-grid,
  .fc-page .graduation-grid,
  .fc-page .hero-team-bar,
  .fc-page .hojo-detail-inner,
  .fc-page .hojo-top-inner,
  .fc-page .acrylic-product-grid,
  .fc-page .acrylic-wrap,
  .fc-page .lifecycle-row,
  .fc-page .media-grid,
  .fc-page .mission-wrap,
  .fc-page .pain-grid,
  .fc-page .plan-grid,
  .fc-page .portfolio-cols-mock,
  .fc-page .portfolio-grid,
  .fc-page .price-plan-grid,
  .fc-page .profile-card-inner,
  .fc-page .proof-detail-grid,
  .fc-page .reward-grid,
  .fc-page .reward-rules-grid,
  .fc-page .roi-wrap,
  .fc-page .scene-grid,
  .fc-page .service-content-grid,
  .fc-page .service-flow-grid,
  .fc-page .service-list-compact,
  .fc-page .service-type-grid,
  .fc-page .sns-platform-grid,
  .fc-page .subsidy-banner,
  .fc-page .support-grid,
  .fc-page .svc-row,
  .fc-page .swag-def,
  .fc-page .target-grid,
  .fc-page .team-compact,
  .fc-page .team-concept-wrap,
  .fc-page .three-step-grid,
  .fc-page .tool-compare-grid,
  .fc-page .cmo-inner,
  .fc-page .cmo-specialty,
  .fc-page .steps,
  .fc-page .work-grid,
  .fc-page .access-wrap,
  .fc-page .review-grid,
  .fc-page .swag-banner,
  .fc-page .partner-banner { grid-template-columns: 1fr !important; }

  /* stats だけ 2×2 を維持 */
  .fc-page .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .fc-page .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); }
  .fc-page .stat-num { font-size: 38px !important; }

  /* ─ flex 方向変更 ─ */
  .fc-page .hero-cta-wrap { flex-direction: column !important; gap: 10px !important; }
  .fc-page .hero-trust { flex-wrap: wrap !important; gap: 8px !important; }
  .fc-page .inline-form { flex-direction: column !important; gap: 8px !important; }
  .fc-page .offer-form { flex-direction: column !important; }
  .fc-page .pain-footer { flex-direction: column !important; text-align: center; }

  /* ─ ボタン全幅 ─ */
  .fc-page .btn-hero-pri,
  .fc-page .btn-hero-sec,
  .fc-page .btn-hero-ter,
  .fc-page .btn-offer,
  .fc-page .btn-inline-primary,
  .fc-page .btn-inline-sub,
  .fc-page .btn-final-primary,
  .fc-page .btn-final-sub,
  .fc-page .btn-final-gold,
  .fc-page .btn-final-orange,
  .fc-page .btn-cta-pri,
  .fc-page .btn-cta-sec,
  .fc-page .btn-cta-submit,
  .fc-page .btn-register,
  .fc-page .btn-form-submit,
  .fc-page .plan-cta,
  .fc-page .btn-partner,
  .fc-page .btn-partner-main,
  .fc-page .btn-swag { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; }

  /* ─ テキストサイズ ─ */
  .fc-page .hero-h1,
  .fc-page h1.hero-h1 { font-size: 24px !important; line-height: 1.5 !important; }
  .fc-page .section-h2 { font-size: 20px !important; }
  .fc-page .hero-lead { font-size: 13px !important; }
  .fc-page .hero-eyebrow { font-size: 12px !important; }
  .fc-page .page-hero-eyebrow { font-size: 12px !important; }
  .fc-page .page-hero-h1 { font-size: 24px !important; line-height: 1.5 !important; }

  /* ─ 固定幅を全幅に ─ */
  .fc-page .hero-card { display: none !important; }
  .fc-page .swag-product-mockup { display: none !important; }
  .fc-page .final-form-wrap,
  .fc-page .offer-card,
  .fc-page .free-offer-card { width: 100% !important; max-width: 100% !important; }
  .fc-page .faq-side { position: static !important; width: 100% !important; margin-top: 24px; }

  /* ─ テーブルスクロール ─ */
  .fc-page table,
  .fc-page .price-table-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ─ パンくず ─ */
  .fc-breadcrumb { padding: 10px 16px !important; font-size: 11px !important; }

  /* ─ timeline ─ */
  .fc-page .timeline-item { grid-template-columns: 80px 1fr !important; }
  .fc-page .timeline-year { font-size: 13px !important; }

  /* ─ 画像 ─ */
  .fc-page img { max-width: 100%; height: auto; }
}

/* ─── 極小SP（〜480px）─────────────────────────────────────── */
@media (max-width: 480px) {
  .fc-page .hero-h1,
  .fc-page h1.hero-h1,
  .fc-page .page-hero-h1 { font-size: 21px !important; }
  .fc-page .section-h2 { font-size: 18px !important; }
  .fc-page .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .fc-page .plan-grid { grid-template-columns: 1fr !important; }
  .fc-page .cta-grid { grid-template-columns: 1fr !important; }
  .fc-page .trust-item,
  .fc-page .trust-pill { font-size: 11px !important; padding: 4px 8px !important; }
  .fc-page .section { padding: 24px 12px !important; }
}