/*
Theme Name: SOURCE Child
Theme URI: https://flowgent.jp/
Description: SOURCE（TCD045）の子テーマ
Author: Flowgent
Template: source_tcd045
Version: 1.0.0
*/


/* =========================================
   Flowgent デザイン用共通スタイル (画像比率保持版)
   ========================================= */

/* --- 重要：TCDテーマのコンテナ設定をリセット --- */
body, html { overflow-x: hidden !important; width: 100%; }
#header_slider, #index_header, #header_video, .index_slider_area { display: none !important; }

/* --- 全体を囲むラッパー --- */
.fg-wrapper {
    font-family: "Noto Sans JP", sans-serif !important;
    width: 100vw;
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    background-color: #fff;
    color: #333;
    line-height: 1.8;
    box-sizing: border-box;
}

/* --- ▼▼▼ 新・ヒーローエリアのスタイル（ここが変わりました） ▼▼▼ */
.fg-hero-wrap {
    position: relative;
    width: 100%;
    line-height: 0; /* 画像下の隙間を消す */
}

/* 背景画像（実体としての画像） */
.fg-hero-img-bg {
    width: 100%;
    height: auto; /* 高さは自動（比率を維持） */
    display: block;
    min-height: 400px; /* 画像が小さすぎる場合の最低限の高さ確保 */
    object-fit: cover; /* 最低高さを確保しつつ比率維持 */
}

/* 暗くするレイヤー */
.fg-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 濃さはここの0.5を調整 */
}

/* 中央に乗せる文字コンテンツ */
.fg-hero-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* 完全な中央寄せ */
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.8; /* 文字の行間を戻す */
    z-index: 2;
}

/* キャッチコピー */
.fg-hero-h1 {
    font-size: 46px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    width: 100%;
}
.fg-hero-sub {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #e1d5fe;
    margin-top: 20px;
    line-height: 1.5;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.sp-only { display: none; }


/* --- その他の共通設定（変更なし） --- */
.fg-section { width: 100%; padding: 20px 20px; box-sizing: border-box; }
.fg-fv-lead-area { padding-top: 20px; background: #fff; }
.fg-container { max-width: 1000px; margin: 0 auto; width: 100%; position: relative; box-sizing: border-box; }
.fg-text-center { text-align: center; }
.fg-title { font-size: 32px !important; font-weight: bold !important; text-align: center !important; margin-bottom: 0px !important; color: #333 !important; border: none !important; line-height: 1.6 !important; }
.fg-title span { color: #5e35b1; border-bottom: 3px solid #e1d5fe; }
.fg-bg-gray { background-color: #f9faff;     padding: 30px 20px 10% 0;
 width: 100%; }

/* リード文 */
.fg-fv-row { display: flex; align-items: center; justify-content: center; gap: 40px; text-align: left; max-width: 1100px; margin: 0 auto; }
.fg-fv-col-left { flex: 1; }
.fg-fv-col-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
.fg-lead-box { text-align: left; width: 100%; }
.fg-lead-p { font-size: 16px; color: #666; line-height: 2; margin-bottom: 30px; text-align: left; }
.fg-lead-strong { font-size: 20px; font-weight: bold; color: #5e35b1; line-height: 1.6; display: block; text-align: left; }
.fg-box-frame { width: 100%; aspect-ratio: 16/9; background: #fcfaff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; color: #5e35b1; border: 2px solid #eae0fe; overflow: hidden; }

/* 3つの理由 */
.fg-step-row { display: flex; align-items: center; justify-content: space-between; gap: 50px; margin-bottom: 80px; }
.fg-step-row.reverse { flex-direction: row-reverse; }
.fg-step-txt { flex: 1; text-align: left; }
.fg-step-img { flex: 1; }
.fg-step-label { display: inline-block; background: #e1d5fe; color: #5e35b1; font-weight: bold; font-size: 14px; padding: 6px 16px; border-radius: 50px; margin-bottom: 15px; letter-spacing: 0.05em; }
.fg-step-h3 { font-size: 26px; font-weight: bold; color: #333; line-height: 1.5; margin-bottom: 20px; }
.fg-step-p { font-size: 16px; color: #666; line-height: 1.8; }
.img-placeholder-box { background: #fff; color: #ccc; font-weight: bold; display: flex; align-items: center; justify-content: center; }

/* メリットリスト */
/* .fg-merit-list { list-style: none !important; padding: 0; max-width: 700px; margin: 0 auto 40px; color: #666; font-size: 16px; display: table; }
.fg-merit-list li { margin-bottom: 10px; text-align: left; } */

/* メリットリスト（修正版） */
.fg-merit-list {
  list-style: disc;
  padding-left: 1.5em;
  max-width: 720px;
  margin: 0 auto 40px;
  color: #666;
  font-size: 16px;
}

.fg-merit-list li {
  margin-bottom: 12px;
  line-height: 1.8;
}

/* FAQ */
.fg-qa-item { background: #fff; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #eee; }
.fg-qa-q { padding: 20px; font-weight: bold; background: #fcfaff; color: #333; display: flex; align-items: flex-start; gap: 15px; border-left: 5px solid #eae0fe; line-height: 1.8; }
.fg-qa-q span { color: #5e35b1; font-size: 20px; }
.fg-qa-a { padding: 20px; border-top: 1px solid #eee; color: #666; display: flex; align-items: flex-start; gap: 15px; line-height: 1.8; }
.fg-qa-a span { color: #00c853; font-weight: bold; font-size: 20px; }

/* 料金表 */
.pricing-outer-wrapper { width: 100%; display: block; text-align: center; margin-bottom: 60px; }
.pricing-container { width: 95% !important; max-width: 1200px !important; background: #fff; padding: 20px 0; margin-left: auto !important; margin-right: auto !important; display: inline-block; }
.pricing-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; display: inline-block !important; width: 100% !important; text-align: center !important; }
.pricing-table { width: 100% !important; border-collapse: collapse; min-width: 1000px !important; margin: 0 auto !important;     border: 1px solid grey;
 }
.pricing-table th, .pricing-table td { padding: 15px 20px !important; text-align: center !important; border-bottom: 1px solid #e0e0e0 !important; border-right: 1px solid #e0e0e0 !important; border-left: none !important; vertical-align: middle !important; width: 25%; font-size: 14px !important; line-height: 1.6; box-sizing: border-box; background: #fff; color: #333 !important; }
.pricing-table th:last-child, .pricing-table td:last-child { border-right: none !important; }
.pricing-table th.feature-head { text-align: left !important; background-color: #fcfaff !important; color: #5e35b1 !important; font-weight: bold; min-width: 220px !important; padding-left: 20px !important; }
.pricing-table thead th { border-top: none; padding-bottom: 25px !important; vertical-align: top !important; background-color: #fff !important; border-right: 1px solid #e0e0e0 !important; border-left: none !important; border-bottom: 1px solid #ccc !important; }
.pricing-table thead th.feature-head { background: none !important; border-top: none !important; border-left: none !important; border-bottom: 1px solid #ccc !important; }
.plan-name { font-size: 20px !important; color: #fff !important; background-color: #5e35b1 !important; display: block !important; margin: 0 auto 10px auto !important; font-weight: bold !important; padding: 8px 0 !important; border-radius: 6px !important; width: 90% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.plan-desc { font-size: 11px !important; color: #666 !important; font-weight: normal !important; display: block !important; margin-bottom: 8px !important; min-height: 32px; }
.plan-price { font-size: 24px !important; color: #333 !important; display: block !important; font-weight: bold !important; }
.tax-note { font-size: 10px !important; color: #888 !important; font-weight: normal !important; display: block !important; }
.pricing-table tbody tr:hover td { background-color: #fbf8ff !important; }
.check-mark { color: #00c853 !important; font-size: 20px !important; font-weight: bold; display: block !important; }
.footer-note { margin-top: 20px !important; font-size: 11px !important; color: #666; line-height: 1.6; text-align: left !important; padding-left: 10px; display: block !important; width: 100%; }

/* CTA */
.fg-cta-full { background: #eae0fe; color: #333; text-align: center; width: 100%; padding: 100px 20px; box-sizing: border-box; }
.fg-cta-title { font-size: 36px !important; font-weight: bold !important; margin-bottom: 24px !important; color: #5e35b1 !important; }
.fg-cta-p { font-size: 18px; margin-bottom: 50px; opacity: 0.95; line-height: 1.8; color: #555; }
.fg-cta-btn { display: inline-block; background: #fff; color: #5e35b1 !important; font-size: 22px; font-weight: bold; padding: 20px 80px; border-radius: 50px; text-decoration: none !important; box-shadow: 0 10px 25px rgba(94, 53, 177, 0.2); transition: 0.3s; max-width: 100%; box-sizing: border-box; }
.fg-cta-btn:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(94, 53, 177, 0.3); opacity: 0.9 !important; }

/* スマホ対応 */
@media (max-width: 768px) {
    .fg-hero-h1 { font-size: 28px !important; }
    .fg-hero-sub { font-size: 16px; margin-top: 15px; }
    .sp-only { display: inline; }
    
    .fg-fv-row { flex-direction: column; gap: 30px; }
    .fg-fv-col-left, .fg-fv-col-right { justify-content: center; width: 100%; align-items: center; } 
    .fg-lead-box, .fg-lead-p, .fg-lead-strong { text-align: center !important; }
    .fg-title { font-size: 24px; margin-bottom: 0px; }
    .fg-step-row, .fg-step-row.reverse { flex-direction: column !important; gap: 20px; }
    .fg-step-txt { text-align: center; }
    .fg-cta-btn { width: 100%; padding: 16px 0; font-size: 18px; max-width: 320px; margin: 0 auto; }
    .fg-cta-title { font-size: 22px !important; margin-bottom: 20px !important; line-height: 1.4 !important; word-wrap: break-word; color: #5e35b1 !important; }
}




/* ===== レスポンシブ時の横はみ出し対策 ===== */
@media (max-width: 1024px) {
  .fg-wrapper {
    width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
  }
}



.fg-hero-img-bg {
    width: 100%;
    height: auto;
    min-height: 400px;
    object-fit: cover;
}




@media (max-width: 768px) {
  .fg-hero-img-bg {
    min-height: 260px;
  }
}





/* =========================================
   追加・修正用CSS
   ========================================= */

/* --- PCのみ表示するクラスの定義 --- */
@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

/* --- リストのスタイル修正 --- */
/* 既存の .fg-merit-list を上書きします */
.fg-merit-list {
  list-style: none; /* デフォルトの黒丸を削除 */
  padding-left: 0;   /* デフォルトのインデントを削除 */
  max-width: 720px;
  margin: 0 auto;    /* 中央揃え */
  color: #666;
  font-size: 16px;
  text-align: left;  /* テキストは左揃え */
  display: table;    /* 中身に合わせて幅を調整し、中央揃えしやすくする */
}

.fg-merit-list li {
  margin-bottom: 12px;
  line-height: 1.8;
  /* 以下の2行で、テキスト内の「・」を使った箇条書きの体裁を整えます */
  padding-left: 1em; 
  text-indent: -1em;
}

/* --- スマホ表示時の調整 --- */
@media (max-width: 768px) {
  /* 見出しの調整 */
  .fg-title {
    font-size: 22px !important; /* 少しサイズを小さく */
    line-height: 1.5 !important;
    word-wrap: break-word;      /* 長い単語での折り返しを許可 */
    padding: 0 10px;            /* 左右に少し余白を持たせる */
  }

  /* リストの調整 */
  .fg-merit-list {
    font-size: 15px;        /* フォントサイズを少し小さく */
    width: auto;            /* 幅を自動調整 */
    max-width: 100%;        /* 親要素からはみ出さないように */
    box-sizing: border-box;
    padding: 0 10px;        /* 左右に余白 */
  }
  
  .fg-merit-list li {
    word-wrap: break-word;      /* テキストのはみ出し防止 */
    overflow-wrap: break-word;  /* より確実なはみ出し防止 */
  }

  /* 最後の段落の調整 */
  .fg-text-center {
    font-size: 16px !important; /* 少し小さく */
    line-height: 1.6 !important;
    padding: 0 15px; /* 左右に余白 */
    word-wrap: break-word;
  }
}


/* =========================================
   スマホ表示のはみ出し修正用
   ========================================= */

/* スマホサイズ（幅768px以下）の時だけの指定 */
@media (max-width: 768px) {
  
  /* 1. 見出しの文字サイズを小さくし、PC用の改行を無効化 */
  .fg-title {
    font-size: 20px !important; /* 32pxから縮小 */
    line-height: 1.5 !important;
    word-break: break-all;      /* 強制的に折り返す */
    padding: 0 10px;            /* 左右に少し余白 */
    width: 100%;                /* 幅を親要素に合わせる */
    box-sizing: border-box;
  }

  /* HTMLで追加したクラスに対する指定（改行を消す） */
  .pc-only {
    display: none;
  }

  /* 2. リスト（箇条書き）部分のはみ出し防止 */
  .fg-merit-list {
    display: block !important;    /* inline-blockを解除 */
    width: 100% !important;       /* 幅を100%に */
    padding-left: 0 !important;   /* 余計なインデント削除 */
    box-sizing: border-box;
  }
  
  .fg-merit-list li {
    font-size: 14px !important;   /* 文字サイズ調整 */
    line-height: 1.6;
    word-wrap: break-word;        /* 長い文章を折り返す */
    text-indent: -1em;            /* 「・」のぶら下げインデント */
    padding-left: 1em;
    margin-bottom: 10px;
  }

  /* 3. 親枠（コンテナ）の横幅強制リセット */
  .fg-container,
  .fg-bg-gray {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;  /* スマホで見やすい余白に調整 */
    padding-right: 15px !important;
    overflow-x: hidden;             /* 横スクロール防止 */
  }
}