/* --- 共通・変数定義 --- */
:root {
  --color-primary: #FB9C36; /* オレンジ */
  --color-secondary: #00a0e9; /* ライトブルー */
  --color-accent: #17ABB1; /* エメラルドグリーン */
  --color-bg-yellow: #FFF9CF; /* 薄い黄色 */
  --color-bg-green: #CFEBCC; /* 薄い緑色 */
  --color-bg-blue: #CCE9EB; /* 薄い青色 */
  --color-bg-white: #FFFFFF; /* 白色 */
  --text-color: #333333;
  --font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.pc-only {
  display: block !important;
}
@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}
.sp-only {
  display: none !important;
}
@media (max-width: 768px) {
  .sp-only {
    display: block !important;
  }
}


/* --- 全体リセット・ベース調整 --- */
.kosodate-contents {
  font-family: var(--font-family);
  color: var(--text-color);
  line-height: 1.7;
  letter-spacing: 0.05em;
  width: 100%;
}
.kosodate-contents *, 
.kosodate-contents *::before, 
.kosodate-contents *::after {
  box-sizing: border-box;
}
.kosodate-contents img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  padding: 0 0 24px;
  margin: 0 auto;
}


/* --- 【重要】背景色を画面いっぱいに広げるためのコンテナ設計 --- */
.kosodate-contents section {
  width: 100%; /* 親要素の幅（画面幅いっぱい）まで広げる */
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   【SP専用】メインビジュアルとイントロ文の被り解消
   ========================================================================== */
@media screen and (max-width: 768px) {
  
  /* 画像の高さ固定を解除し、画像の本来の比率で正しく表示させる */
  .kosodate-contents .mv-wave-wrapper {
    height: auto !important; /* 高さを自動可変にして被りを防ぐ */
    padding: 0 !important;   /* 左右の余白をリセット（必要に応じて調整） */
    border-radius: 0 0 30px 30px; /* 下側の角丸を少しマイルドに調整 */
    overflow: hidden;
  }

  .kosodate-contents .mv-img-src.sp-only {
    display: block !important;
    width: 100% !important;
    height: auto !important;   /* 画像が潰れたり、はみ出したりするのを防ぐ */
    object-fit: contain !important;
    padding: 0 !important;     /* 共通スタイルにある padding-bottom 24px を打ち消す */
    margin: 0 auto !important;
  }

  /* イントロ文の位置をさらに下にずらし、余白をしっかり確保する */
  .kosodate-contents .mv-intro {
    margin-top: 40px !important; /* 画像との間の適切な隙間 */
    padding: 0 20px !important;
    position: relative !important;
    z-index: 10;
  }
}

/* 中央配置するコンテンツのインナーブロック */
.inner-block {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 20px;
}
@media (max-width: 768px) {
  .inner-block {
    padding: 40px 15px;
  }
}

/* --- コンポーネント: ボタン --- */
.c-btn-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
  max-width: 500px;
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  padding: 20px 55px 20px 40px; /* 右側に矢印スペースを確保 */
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s, opacity 0.3s;
  font-size: 2rem;
  width: 100%;
}
.c-btn-green {
  background-color: var(--color-accent);
}
.c-btn-orange:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  text-decoration: none;
}
.c-btn-teal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 4px;
  font-size: 16px;
}

/* 矢印アイコン：ホバー時に右へ1回だけ動く */
.c-btn-orange::after {
  content: "→";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 700;
  transition: right 0.2s ease;
}
.c-btn-orange:hover::after {
  right: 18px;
}

/* --- コンポーネント: 見出し --- */
.sec-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 6rem;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.sec-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 12px;
  margin: 12px auto 0;
  background-image: radial-gradient(var(--color-primary) 30%, transparent 35%);
  background-size: 12px 12px;
  background-repeat: repeat-x;
}
.sec-title-small {
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem;
}
@media (max-width: 768px) {
  .c-btn-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary);
    max-width: 500px;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    padding: 12px 55px 12px 40px; /* 右側に矢印スペースを確保 */
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, opacity 0.3s;
    font-size: 1.6rem;
    width: 100%;
  }
  .c-btn-green {
    background-color: var(--color-accent);
  }
  .sec-title {
    font-size: 2.8rem;
  }
  .sec-title-small {
    font-weight: 700;
    font-style: normal;
    font-size: 2.4rem;
  }
}

.sec-title-w {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 6rem;
  color: var(--color-bg-white);
  text-shadow: 4px 4px 4px var(--color-accent);
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.sec-title-w::after {
  content: '';
  display: block;
  width: 36px;
  height: 12px;
  margin: 12px auto 0;
  background-image: radial-gradient(var(--color-primary) 30%, transparent 35%);
  background-size: 12px 12px;
  background-repeat: repeat-x;
}
@media (max-width: 768px) {
  .sec-title-w {
    font-size: 3.2rem;
  }
}

.sec-title-p {
  font-size: 24px;
  color: var(--text-color);
  margin: 12px 0 0;
}
@media (max-width: 768px) {
  .sec-title-p {
    font-size: 1.6rem;
  }
}


/* ==========================================================================
   1. メインビジュアル（MV）エリア（rirus.jp風 波型クリップ）
   ========================================================================== */
.mv-section {
  width: 100%;
  background: #fff;
  padding-bottom: 40px;
}
.mv-wave-wrapper {
  position: relative;
  width: 100%;
  padding: 0 24px;
}
.mv-img-src {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* MV内のテキストオーバーレイ */
.mv-text-box {
  position: absolute;
  top: 25%;
  left: 8%;
  background: rgba(255, 255, 255, 0.85);
  padding: 20px 30px;
  border-radius: 20px;
  max-width: 450px;
}
.mv-catch {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.6rem;
  color: var(--color-primary);
  font-weight: bold;
  background-color: var(--color-bg-yellow);
  padding: 24px 8px;
  margin-bottom: 5px;
}
.mv-title {
  font-size: 28px;
  color: var(--color-accent);
  font-weight: bold;
  line-height: 1.4;
}

/* MV下部紹介テキスト */
.mv-intro {
  text-align: center;
  margin-top: 40px;
  padding: 0 20px;
}
.mv-intro-ttl {
  display: inline-block;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2rem;
  color: var(--color-accent);
  background-color: var(--color-bg-yellow);
  padding: 20px 6px;
  border-radius: 20px;
  margin: 0 auto 48px;
  width: 50%;
}
.mv-intro-p {
  font-size: 1.6rem;
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 2;
}

@media (max-width: 768px) {
  .mv-wave-wrapper {
      height: 300px; clip-path: none; 
      border-radius: 0 0 50px 50px; 
    }
  .mv-text-box {
      position: relative;
      top: 0; 
      left: 0; 
      margin: -50px auto 0; 
      width: 90%; 
      text-align: center; 
      box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    }
  .mv-title {
     font-size: 22px; 
    }
    .mv-intro-ttl {
      display: inline-block;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 2.4rem;
      color: var(--color-accent);
      background-color: var(--color-bg-yellow);
      padding: 12px 4px;
      border-radius: 20px;
      margin: 0 auto 48px;
    }
}


/* ==========================================================================
   1-1. 無限文字ループ
   ========================================================================== */

.ugkTxtSlider {
  width: 100%;
  overflow: hidden;
  background: transparent;
  margin: 40px 0;
}
.ugkTxtSlider__inner {
  display: flex;
  width: max-content;
}
.ugkTxtSlider__inner.animating {
  animation: imgSlider 100s linear infinite;
}
@keyframes imgSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.ugkTxtSlider__text {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 14rem;
  white-space: nowrap;
  color: #CFEBCC;
  line-height: 1.1;
  padding-right: 4rem;
  margin: 0;
}

/* ==========================================================================
   2. ナビゲーションボタンエリア
   ========================================================================== */
.nav-btn-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto 50px;
  padding: 0 20px;
}
.nav-btn-item {
  background-color: var(--color-primary);
  color: #fff !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 12px 5px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-btn-item:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    text-decoration: none;
  }
@media (max-width: 768px) {
  .nav-btn-item {
    font-size: 12px;
  }
  .nav-btn-grid {
     grid-template-columns: repeat(2, 1fr); gap: 10px; 
    }
}

/* ==========================================================================
   3. 運賃・料金の区分について（背景黄色：幅いっぱい）
   ========================================================================== */
.section-fare {
  background-color: var(--color-bg-yellow) !important;
  width: 100%;
}
.fare-table-wrapper {
  overflow-x: auto;
  background: transparent;
  border-radius: 8px;
}
.fare-table {
  width: 100%;
  border-collapse: separate; 
  border-spacing: 5px;
  min-width: 700px;
  font-size: 14px;
  border: none;
}

.fare-table th, .fare-table td {
  font-size: 16px;
  background-color: var(--color-bg-white);
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  border-radius: 10px;
}
.fare-table th {
  font-size: 20px;
  text-align: center;
  background-color: var(--color-bg-blue);
  font-weight: bold;
  border-radius: 10px;
}
.fare-table .category-head {
  background-color: var(--color-bg-green);
  text-align: center;
  font-weight: bold;
  border-radius: 10px;
}
.category-head {
  font-size: 20px
}
.fare-table-txt-sub {
  font-size: 16px
}

/* ==========================================================================
   4. 小児運賃・定期券について（背景緑色：幅いっぱい）
   ========================================================================== */
.section-child-fare {
  background-color: var(--color-bg-green) !important;
  width: 100%;
}
.intro-flex {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}
.intro-img { 
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  padding: 0 0 48px;
 }
.intro-text { 
  flex: 1.2;
 }
.intro-text h3 { 
  font-size: 20px; 
  color: var(--color-accent); 
  font-weight: bold; 
  margin-bottom: 10px;
 }

@media (max-width: 768px) {
  .intro-flex { flex-direction: column; }
}

/* 料金スケジュールブロック */
.program-box {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  border-top: 4px solid var(--color-secondary);
}
.program-title-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.program-num {
  background: var(--color-secondary);
  color: #fff;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
}
.program-title { font-size: 18px; font-weight: bold; color: #333; }


.program-row {
  display: flex;
  border-bottom: 1px dashed #ccc;
  padding: 12px 0;
}
.program-row:last-child { border-bottom: none; }
.program-label { width: 120px; font-weight: bold; color: var(--color-secondary); }
.program-value { flex: 1; font-size: 14px; }

.btn-center-wrap { text-align: center; margin-top: 30px; }
.btn-center-wrap-bottom { text-align: center; margin-bottom: 30px; }

/* ==========================================================================
   隙間ゼロ・画面幅いっぱいの無限写真ループスライダー
   ========================================================================== */

/* 1. スライダーの外枠：画面幅いっぱいに広げる */
.infinite-img-slider {
  width: 100vw;               /* コンテナを画面の横幅いっぱいに強制拡大 */
  margin-left: calc(-50vw + 50%); /* 既存の親要素（inner-blockなど）の左右paddingを無視して画面端まで広げる */
  margin-right: calc(-50vw + 50%);
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;           /* はみ出た画像を非表示にする */
  padding: 0;
}

/* 2. アニメーションを制御するインナー */
.infinite-img-slider__inner {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  /* 隙間を無くした分、15秒くらいが滑らかでちょうど良いスピードになります */
  animation: infinite-img-loop 50s linear infinite;
}

/* 3. 画像セット：隙間（gapやpadding）を「完全ゼロ」に固定 */
.infinite-img-slider__set {
  display: flex;
  gap: 0 !important;          /* 画像同士の隙間をゼロに */
  padding: 0 !important;      /* セット間の隙間をゼロに */
  margin: 0 !important;
}

/* 4. 画像単体：画面幅（デバイス）に連動して可変する設計 */
.infinite-img-slider__set img {
  /* スマホ・PCいつでも「画面のちょうど半分のサイズ（画像2枚で画面ぴっちり）」にします */
  /* もし1画面に3枚並べたい場合は、33.333vw に変更してください */
  width: 50vw;                
  height: 380px;              /* PC時の画像の高さ */
  object-fit: cover;          /* 比率を保ってトリミング */
  border-radius: 0;           /* 隙間をゼロにして繋ぐため、角丸は「なし」が綺麗です */
  flex-shrink: 0;             /* 画像の縮小を絶対に防ぐ */
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. ループアニメーション：1セット分（画像3枚分 ＝ 50vw × 3枚 ＝ 150vw）を正確にスライド */
@keyframes infinite-img-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 画像3枚分の横幅（150vw）をマイナスすることで、寸分の狂いもなくループが繋がります */
    transform: translateX(-150vw); 
  }
}

/* ==========================================================================
   SP表示時の微調整
   ========================================================================== */
@media (max-width: 768px) {
  /* スマホ時は、1画面に画像1枚がどんと大きく出る（幅100vw）ように自動で切り替えます */
  .infinite-img-slider__set img {
    width: 100vw;             /* スマホ画面いっぱいに画像1枚を表示 */
    height: 180px;            /* スマホ時の画像の高さ */
  }
  
  /* スマホ時は「画像3枚分 ＝ 100vw × 3枚 ＝ 300vw」の移動距離に自動修正 */
  @keyframes infinite-img-loop {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-300vw); 
    }
  }
}


/* ==========================================================================
   【SP専用】運賃・料金の区分（HTML分離・完全再現版CSS）
   ========================================================================== */

/* PC表示時はSP用レイアウトを非表示 */
.fare-sp-container {
  display: none;
}

@media screen and (max-width: 768px) {
  /* PC用テーブルコンテナを完全に非表示 */
  .fare-table-wrapper.pc-only {
    display: none !important;
  }

  /* SP専用コンテナをアクティブ化 */
  .fare-sp-container.sp-only {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 40px !important; /* 🌟人物ブロック（乳児・幼児など）の間のしっかりとした余白 */
  }

  /* 人物ごとの1つの塊の枠組み */
  .fare-sp-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 15px !important; /* 🌟カード（パーツ）同士の間の美しい隙間 */
  }

  /* ① 人物ヘッダーカード（薄い青背景） */
  .fare-sp-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #CCE9EB !important; /* 薄い青色 */
    color: var(--text-color) !important;
    padding: 8px 16px !important;
    border-radius: 18px !important;
    font-size: 22px !important;
    font-weight: bold !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }


  /* ヘッダーカード内のイラスト画像 */
  .fare-sp-head img {
    display: block !important;
    width: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* サブテキスト（年齢など） */
  .fare-sp-sub {
    display: block !important;
    font-size: 14px !important;
    font-weight: normal !important;
    margin: 0 8px 0 8px !important;
    color: var(--text-color) !important;
  }
  .fare-sp-sub-youzi {
    display: block !important;
    font-size: 14px !important;
    font-weight: normal !important;
    margin: 0 8px 0 8px !important;
    color: var(--text-color) !important;
    width: 40%;
  }

  /* ②・④ 見出しの緑の帯（運賃パターン / 特急列車をご利用の場合） */
  .fare-sp-label {
    display: block !important;
    background-color: #CFEBCC !important; /* 薄い緑色 */
    color: var(--text-color) !important;
    text-align: center !important;
    padding: 12px 15px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* ③ Reef・⑤ 中身のテキストが入る白い座布団カード */
  .fare-sp-card {
    display: block !important;
    background-color: #ffffff !important; /* 白色 */
    color: var(--text-color) !important;
    padding: 24px 20px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    text-align: left !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   5. お子さま向けの駅設備（背景白色：幅いっぱい）
   ========================================================================== */
.section-station-facility {
  background: #fff !important;
  width: 100%;
}
.facility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
.facility-card {
  background: var(--color-bg-yellow);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.facility-img {
   width: 100%; 
   height: 150px; 
   object-fit: cover; 
   border-radius: 6px; 
   margin-bottom: 12px; 
  }
.facility-name { 
  font-weight: bold; 
  font-size: 20px; 
  color: var(--color-accent); 
  text-align: center; 
  margin-bottom: 8px; 
  padding: 8px 16px;
}
.facility-name_small { 
  font-weight: bold; 
  font-size: 18px; 
  color: var(--color-accent); 
  text-align: center; 
  margin-bottom: 8px; 
  padding: 8px 16px;
}
.facility-desc { 
  font-size: 16px; 
  line-height: 1.5; 
  padding: 8px 16px 16px;
}

@media (max-width: 768px) {
  .facility-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. お子さま向けの列車設備（背景青色：幅いっぱい）
   ========================================================================== */
.section-train-facility {
  background-color: var(--color-bg-blue) !important;
  width: 100%;
  padding: 96px 0 !important;
}
.train-sec-header {
  position: absolute;
  left: 0;
  right: 0;
  top: -36px;
  text-align: center;
  background-color: var(--color-accent);
  color: var(--color-bg-white);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.6rem;
  display: block;
  width: fit-content;
  padding: 12px 80px;
  margin: 0 auto 48px;
  text-align: center;
  border-radius: 20px;
}

.train-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.train-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}
.train-img { 
  width: 100%; 
  height: 150px; 
  object-fit: cover; 
  border-radius: 6px; 
  margin-bottom: 12px;
 }
.train-name { 
  font-weight: bold; 
  font-size: 20px; 
  color: var(--color-accent); 
  text-align: center; 
  margin-bottom: 8px; 
  padding: 0 16px;
}
.train-desc { 
  font-size: 16px; 
  line-height: 1.5; 
  padding: 8px 16px 16px;
}
.train-desc-small {
    display: block;
    padding: 0 16px 16px;
    font-size: 1.2rem;
}
.train-box {
  position: relative;
  background-color: var(--color-bg-yellow);
  padding: 98px 0 48px;
  border-radius: 24px;
  max-width: 1500px;
  margin: 80px auto 0;
}

@media (max-width: 768px) {
  .section-train-facility {
    background-color: var(--color-bg-blue) !important;
    width: 100%;
    padding: 48px 20px !important;
  }
  .train-grid {
     grid-template-columns: 1fr; 
  }
  .train-sec-header {
    font-size: 1.8rem;
    height: 54px;
    margin-bottom: 25px;
    max-width: 300px;
    top: -25px;
    right: 0px;
    left: 0px;
  }
  .train-box {
    padding: 48px 20px 48px;
  }
}

/* ==========================================================================
   7. 子育て応援ポリシー（背景緑色：幅いっぱい）
   ========================================================================== */
.section-policy {
  background-image: url(../../module/img/img_bg_policy.jpg);
  background-size: cover;
  width: 100%;
}
.text-w {
  background-color: var(--color-bg-white);
  color: var(--color-accent);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem;
  padding: 8px 24px;
  border-radius: 10px;
  display: block;
  width: fit-content;
  margin: 0 auto 48px;
  text-align: center;
}
.policy-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.policy-p {
  color: var(--text-color);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 2;
  margin: 0 auto 48px;
  text-align: center;
}
.policy-flex {
  display: flex;
  gap: 30px;
  align-items: center;
}
.policy-img { 
  flex: 1; 
  border-radius: 8px; 
  overflow: hidden; 
}
.policy-text {
   flex: 1.2; 
  }
.policy-subtitle {
   font-size: 15px; 
   color: var(--color-primary); 
   font-weight: bold; 
   margin-bottom: 5px; 
  }
.policy-title {
   font-size: 22px; 
   color: var(--color-accent); 
   font-weight: bold; 
   margin-bottom: 15px; 
  }
.policy-desc {
   font-size: 14px;
  line-height: 1.6; 
  }

@media (max-width: 768px) {
  .text-w {
    font-size: 2rem;
    padding: 4px 12px;
    margin: 0 auto 24px;
  }
  .policy-box {
     padding: 20px;
  }
  .policy-p {
    font-size: 1.6rem;
    margin: 0 auto 24px;
  }
  .policy-img {
    margin: 0 auto;
    text-align: center;
  }
  .policy-flex {
   flex-direction: column; 
  }
  .policy-title {
   font-size: 18px; 
  }
}

/* バナーエリア */
.bottom-banner-area {
  text-align: center;
  margin-top: 40px;
}
.bottom-banner-link {
  display: inline-block;
  max-width: 400px;
  width: 100%;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  transition: opacity 0.3s;
}
.bottom-banner-link:hover { opacity: 0.8; }



/* ==========================================================================
   【新規】子育て応援プログラムエリア（スクショ完全再現）
   ========================================================================== */

/* 追加された親コンテナ：左右に細いガイド線（オレンジ）を配置 */
.program-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 40px 50px 40px;
  background-color: var(--color-bg-yellow);
  border-radius: 20px;
}

/* メインタイトル：エメラルドグリーンの看板 */
.program-main-title {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #ffffff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  width: 600px;
  height: 64px;
  border-radius: 8px;
  margin: 0 auto 35px auto;
  text-align: center;
  top: -25px;
  right: 0;
  left: 0;
}

/* 上部リード文 */
.program-lead-txt {
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
  margin: 56px 0 36px
}

/* 各プログラムのボックス外枠：既存のチケット風（border-top）を打ち消しフラットに */
.program-box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 1000px;
  margin: 0 auto 25px;
}

/* 見出しバー：丸数字とテキストの横並び */
.program-title-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

/* 丸数字 */
.program-title-bar .program-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
}

/* タイトルテキスト */
.program-title-bar .program-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

/* データ行：横並びFlex */
.program-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 8px;
  border-bottom: none !important; /* 既存の破線をクリア */
  padding: 0 !important;
}

/* 左側のラベル（対象・還元内容・ポイント） */
.program-row .program-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  min-width: 140px;
  background-color: #d7f1f2; /* 薄いエメラルドブルー */
  color: var(--text-color);
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 15px 10px;
  text-align: center;
}

/* 右側の値（コンテンツ白枠） */
.program-row .program-value {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  color: var(--text-color);
  font-size: 1.3rem;
  line-height: 1.5;
  border-radius: 6px;
  padding: 15px 20px;
  text-align: left;
}

/* ポイント箇条書きのリストリセット */
.program-row .program-value ul {
  margin: 0;
  padding-left: 15px;
  list-style-type: disc;
}
.program-row .program-value li {
  margin-bottom: 4px;
}
.program-row .program-value li:last-child {
  margin-bottom: 0;
}

/* 分割ドットライン（スクショの中央にあるオレンジの点線） */
.program-dot-line {
  width: 100%;
  height: 1px;
  border-top: 3px dotted var(--color-primary);
  margin: 35px 0;
}

/* 下部オレンジボタンエリアの調整 */
.program-container .btn-center-wrap {
  margin-top: 40px;
  text-align: center;
}

.program-container .c-btn-orange {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  width: 100%;
  max-width: 440px;
  height: 76px;
  border-radius: 38px;
  color: #ffffff !important;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: none;
  position: relative;
  padding: 0 40px;
}

/* ボタン右側の矢印アイコン（→） */
.program-container .c-btn-orange::after {
  right: 25px;
  font-size: 1.8rem;
}
.program-container .c-btn-orange:hover::after {
  right: 19px;
}

.program-container .c-btn-orange small {
  font-size: 1.2rem;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 2px;
}

/* ==========================================================================
   【SP表示】スマホ向け最適化（縦並び・幅いっぱい）
   ========================================================================== */
@media screen and (max-width: 768px) {
  .program-container {
    padding: 10px 15px 40px 15px;
    border-left: none;
    border-right: none;
  }
  
  .program-main-title {
    font-size: 1.8rem;
    height: 54px;
    margin-bottom: 25px;
    max-width: 300px;
    top: -25px;
    right: 0;
    left: 0;
  }

  .program-lead-txt {
    font-size: 1.4rem;
    margin-bottom: 24px;
    text-align: left;
    top: -25px;
    right: 0;
    left: 0;
  }

  .program-title-bar .program-title {
    font-size: 2rem;
  }

  /* スマホ時はラベルと白枠を縦並びに落とす */
  .program-row {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
  }

  .program-row .program-label {
    width: 100%;
    padding: 8px 15px;
    justify-content: center;
  }

  .program-row .program-value {
    width: 100%;
    padding: 12px 15px;
  }
  
  .program-container .c-btn-orange {
    font-size: 1.6rem;
    height: 68px;
  }
  .program-container .c-btn-orange small {
    font-size: 1.1rem;
  }
}
/* ==========================================================================
   TOBU Kids
   ========================================================================== */
.section-kids {
  background-color: var(--color-bg-yellow) !important;
  width: 100%;
  padding: 96px 0 !important;
}
@media screen and (max-width: 768px) {
  .section-kids {
    padding: 48px 0 !important;
  }
}


/* ==========================================================================
   共通フッターの「TOPに戻るボタン」表示制御（このページ限定）
   ========================================================================== */

/* PC表示時：非表示にする */
.footer #page-top {
  display: none;
}

/* SP表示時のみ：共通フッター本来のデザインのまま表示する */
@media screen and (max-width: 768px) {
  .footer #page-top {
    display: inline-block;
  }
}