/* ================================
   fami-style.css（親子LP 各セクション専用）
   目的：LP内の“各セクション”だけをここに集約
   前提：共通は common-style.css に寄せる
================================ */

/* ================================
   FV（ファーストビュー）
================================ */

/* 役割：FV内のサイズをまとめて管理 */
:root {
  --fv-max: 980px;
  --fv-side: 18px;
  --fv-top: 22px;
  --fv-bottom: 32px;

  --fv-lead: 1.35rem;
  --fv-sub: 1.05rem;
  --fv-title: 3rem;

  --fv-photo: 155px;
  --fv-photo-hero: 180px;

  --fv-badge-w: 122px;
  --fv-badge-gap: 12px;
}

/* 役割：FV背景を全面に敷く */
.oyako-fv {
  background-color: var(--bg-base);
}

/* 役割：FVの中身を中央寄せ＋装飾はみ出しOK */
.oyako-fv__bg {
  position: relative;
  overflow: hidden;

  max-width: var(--fv-max);
  margin-left: auto;
  margin-right: auto;

  padding-top: var(--fv-top);
  padding-bottom: var(--fv-bottom);
  padding-left: var(--fv-side);
  padding-right: var(--fv-side);
}

/* 役割：写真を絶対配置するレイヤー */
.oyako-fv__photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 役割：写真の不定形（共通） */
.oyako-fv__photo {
  position: absolute;
  width: var(--fv-photo);
  height: var(--fv-photo);

  overflow: hidden;
  margin: 0;

  border-radius:
    58% 42% 62% 38% /
    44% 60% 40% 56%;

  z-index: 1;
}

/* 役割：画像を崩さずトリミング */
.oyako-fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 役割：写真の背面“にじみ” */
.oyako-fv__photo::before {
  content: "";
  position: absolute;
  inset: -18px;

  z-index: -1;

  filter: blur(1px);
  transform: rotate(-10deg);

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(159, 192, 136, 0.38),
      rgba(159, 192, 136, 0) 62%
    );
}

/* 役割：写真位置 */
.oyako-fv__photo--p1 {
  top: 18px;
  left: 8px;
}

.oyako-fv__photo--p2 {
  top: 10px;
  right: 6px;

  width: var(--fv-photo-hero);
  height: var(--fv-photo-hero);
}

.oyako-fv__photo--p3 {
  bottom: 16px;
  left: 10px;
}

.oyako-fv__photo--p4 {
  bottom: 26px;
  right: 6px;
}

/* 役割：写真ごとの色味 */
.oyako-fv__photo--p1::before {
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(159, 192, 136, 0.40),
      rgba(159, 192, 136, 0) 64%
    );
}

.oyako-fv__photo--p2::before {
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(205, 159, 204, 0.42),
      rgba(205, 159, 204, 0) 66%
    );
  transform: rotate(12deg);
}

.oyako-fv__photo--p3::before {
  background:
    radial-gradient(
      circle at 30% 70%,
      rgba(233, 162, 59, 0.34),
      rgba(233, 162, 59, 0) 66%
    );
  transform: rotate(-8deg);
}

.oyako-fv__photo--p4::before {
  background:
    radial-gradient(
      circle at 70% 60%,
      rgba(78, 52, 46, 0.18),
      rgba(78, 52, 46, 0) 66%
    );
  transform: rotate(8deg);
}

/* 役割：中央テキスト領域（写真に被らない余白） */
.oyako-fv__content {
  position: relative;
  z-index: 2;

  text-align: center;

  padding-top: 170px;
  padding-bottom: 170px;
}

/* 役割：上コピー */
.oyako-fv__lead {
  margin-top: 0;
  margin-bottom: 10px;

  font-size: var(--fv-lead);
  line-height: 1.55;

  letter-spacing: 0.01em;
}

/* 役割：強調（海外デビューなど） */
.oyako-fv__leadEm {
  color: var(--color-orange);
  font-weight: 700;
}

/* 役割：サブ（旅×ボランティア） */
.oyako-fv__sub {
  margin-top: 6px;
  margin-bottom: 6px;

  font-size: var(--fv-sub);
  font-weight: 600;

  letter-spacing: 0.06em;

  color: var(--color-green);
}

/* 役割：タイトル */
.oyako-fv__title {
  margin: 0;

  font-size: var(--fv-title);
  line-height: 1.1;
  font-weight: 700;

  color: var(--color-green);
}

/* 役割：バッジ横並び */
.oyako-fv__badgeRow {
  list-style: none;

  padding: 0;
  margin-top: 18px;
  margin-bottom: 22px;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: center;
  gap: var(--fv-badge-gap);
}

/* 役割：バッジの枠 */
.oyako-fv__badgeItem {
  position: relative;
  width: var(--fv-badge-w);
  aspect-ratio: 1 / 1;
}

/* 役割：バッジ画像 */
.oyako-fv__badgeImg {
  width: 100%;
  height: 100%;
}

/* 役割：バッジ文字（SVG上に重ねる） */
.oyako-fv__badgeText {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  margin: 0;
  padding: 10px;

  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;

  color: #fff;
}

/* 役割：FVのCTAを中央に */
.oyako-fv__cta {
  margin-top: 16px;
  text-align: center;
}


/* 役割：極小端末の詰まり対策 */
@media (max-width: 360px) {
  .oyako-fv__badgeItem {
    width: 110px;
  }

  .oyako-fv__badgeText {
    font-size: 0.9rem;
  }
}

/* ================================
   メッセージセクション
================================ */

/* 役割：このセクション配下は全部JK固定 */
.oyako-message,
.oyako-message * {
  font-family: "JKGothic", "Zen Maru Gothic", sans-serif !important;
}

/* 役割：背景を全面に敷いて中央寄せ */
.oyako-message {
  background-color: var(--bg-base);

  padding-top: 64px;
  padding-bottom: 64px;
  padding-left: 20px;
  padding-right: 20px;
}

/* 役割：中身の幅制御 */
.oyako-message__inner {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;

  text-align: center;
  color: var(--text-main);
}

/* 役割：タイトル */
.oyako-message__title {
  margin-top: 0;
  margin-bottom: 28px;

  font-size: 1.9rem;
  line-height: 1.65;
  font-weight: 700;

  color: var(--color-green);
}

/* 役割：本文 */
.oyako-message__text {
  margin-top: 0;
  margin-bottom: 22px;

  font-size: 1.05rem;
  line-height: 2;
}

/* 役割：タネ行 */
.oyako-message__seedLine {
  margin-top: 40px;
  margin-bottom: 0;

  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.8;
}

/* 役割："タネ"+アイコンを離さない */
.oyako-message__seedWord {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;

  margin-left: 4px;
  margin-right: 4px;

  color: var(--text-main);
}

/* 役割：アイコン位置 */
.oyako-message__seedIcon {
  width: 42px;
  height: auto;
  transform: translateY(-4px);
}

/* ================================
   動画セクション
================================ */

/* 役割：動画は白背景で安定させる */
.oyako-movie {
  padding-top: 28px;
  padding-bottom: 28px;
  background-color: var(--bg-white);
}

/* 役割：動画の内側を中央に */
.oyako-movie__inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 役割：動画を中央、PCでデカすぎ防止 */
.oyako-movie__video {
  width: 100%;
  max-width: var(--inner-max);

  margin-left: auto;
  margin-right: auto;

  object-fit: contain;
  background-color: var(--bg-white);
}

/* 役割：動画間の余白 */
.video-gap {
  height: 40px;
}


/* ================================
   FIX ②：FVバッジのテキストを画像の上に重ねる
================================ */

/* 役割：
   ・HTMLが <li><img><p>... という構造なので
   ・liをposition:relativeにしてpをabsoluteで重ねる
*/
.oyako-fv__badgeItem {
  position: relative;
}

/* 役割：
   ・バッジ画像は通常フローで表示（下地）
   ・classが付いていないので img 直指定でOK
*/
.oyako-fv__badgeItem > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 役割：
*/
.oyako-fv__badgeItem > p {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  margin: 0 !important;
  padding: 10px;

  font-family: "JKGothic", "Zen Maru Gothic", sans-serif;
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;

  color: #fff;

  /* 役割：クリック判定は下のリンク等に譲る（不要なら削除OK） */
  pointer-events: none;
}


/* ================================
   ABOUT：旅ぼらとは？（POINT1〜3）
=============================== */

/* 役割：ABOUTセクション全体の余白 */
.oyako-about {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* 役割：見出しブロックの中央揃え */
.oyako-about__head {
  text-align: center;
  margin-bottom: 28px;
}

/* 役割：英字ラベルの見た目（ABOUT） */
.oyako-about__en {
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #6b4e3d;
  margin: 0;
}

/* 役割：見出し（旅ぼらとは？） */
.oyako-about__ttl {
  font-size: 28px;
  line-height: 1.3;
  color: #6b4e3d;
  margin-top: 8px;
  margin-bottom: 0;
}

/* 役割：サブコピー */
.oyako-about__sub {
  font-size: 16px;
  color: #6b4e3d;
  margin-top: 14px;
  margin-bottom: 0;
}

/* 役割：リード文（行間と幅を整える） */
.oyako-about__lead {
  font-size: 14px;
  line-height: 1.9;
  color: #6b4e3d;
  margin-top: 18px;
  margin-bottom: 0;
}

/* 役割：POINTカードの縦並び */
.oyako-about__cards {
  display: grid;
  gap: 22px;
}

/* ================================
   POINTカード（共通）
=============================== */

/* 役割：カード背景（ベージュのふわっとした塊） */
.oyako-point {
  position: relative;
  border-radius: 26px;
  background-color: #fbf2e7;
  padding: 26px 18px 22px;
  overflow: hidden;
}

/* 役割：POINTラベル（左上） */
.oyako-point::before {
  content: attr(data-point);
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #6b4e3d;
}

/* 役割：POINT内側の余白（ラベル分の上余白を確保） */
.oyako-point__inner {
  padding-top: 34px;
}

/* 役割：POINT見出し */
.oyako-point__ttl {
  font-size: 20px;
  line-height: 1.35;
  color: #6b4e3d;
  margin: 0 0 14px;
}

/* 役割：箇条書き */
.oyako-point__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

/* 役割：1項目（アイコン＋文章） */
.oyako-point__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}

/* 役割：葉っぱアイコン */
.oyako-point__icon {
  width: 28px;
  height: 28px;
  display: block;
}

/* 役割：文章 */
.oyako-point__text {
  font-size: 14px;
  line-height: 1.85;
  color: #6b4e3d;
  margin: 0;
}

/* ================================
   POINT画像（配置・切り抜き感）
=============================== */

/* 役割：画像をカードの外に少しはみ出させる土台 */
.oyako-point__img {
  position: absolute;
  bottom: -10px;
  width: 46%;
  max-width: 220px;
}

/* 役割：右配置（POINT1/3想定） */
.oyako-point__img--right {
  right: -10px;
}

/* 役割：左配置（POINT2想定） */
.oyako-point__img--left {
  left: -10px;
}

/* 役割：画像本体（切り抜き済み前提で自然に） */
.oyako-point__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 役割：画像に被らないよう本文側の右余白を確保 */
.oyako-point[data-point="POINT1"] .oyako-point__inner,
.oyako-point[data-point="POINT3"] .oyako-point__inner {
  padding-right: 44%;
}

/* 役割：画像に被らないよう本文側の左余白を確保 */
.oyako-point[data-point="POINT2"] .oyako-point__inner {
  padding-left: 44%;
}

/* ================================
   ABOUT：POINTカード（画像なし・ベース）
================================ */

/* 役割：POINTカード全体の縦並び */
.oyako-about__points {
  display: grid;
  gap: 24px;
}

/* 役割：白背景カード */
.oyako-point-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 28px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* 役割：POINT番号ラベル */
.oyako-point-card__label {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #6b4e3d;
  text-align: center;
  margin: 0 0 6px;
}

/* 役割：POINT見出し（中央揃え） */
.oyako-point-card__title {
  font-size: 22px;
  line-height: 1.4;
  color: #6b4e3d;
  text-align: center;
  margin: 0 0 20px;
}

/* 役割：箇条書きリスト */
.oyako-point-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

/* 役割：葉っぱ＋テキスト横並び */
.oyako-point-card__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
}

/* 役割：葉っぱアイコン */
.oyako-point-card__icon {
  width: 28px;
  height: 28px;
  display: block;
}

/* 役割：説明文（左揃え） */
.oyako-point-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: #6b4e3d;
  margin: 0;
}


/* ================================
   FOR YOU：こんな方におすすめ！
   役割：見出し＋アイコン付きリストで“対象者”を提示
================================ */


/* 役割：英字＋日本語見出しはJK */
.oyako-for-you__en,
.oyako-for-you__ttl {
  font-family: "JKGothic", "Zen Maru Gothic", sans-serif !important;
}
/* 役割：見出し（中央） */
.oyako-for-you__head {
  text-align: center;
}

/* 役割：英字ラベル（FOR YOU） */
.oyako-for-you__en {
  margin-top: 0;
  margin-bottom: 8px;

  font-size: 1.5rem;
  letter-spacing: 0.12em;
  font-weight: 500;

  color: var(--text-main);
}

/* 役割：日本語見出し */
.oyako-for-you__ttl {
  margin-top: 0;
  margin-bottom: 26px;

  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: 700;

  color: var(--text-main);
}
/* 役割：タネ横テキストは本文用ゴシック */
.oyako-for-you__text {
  font-family: var(--font-gothic, "Noto Sans JP", sans-serif);
}

/* 役割：リスト全体（幅と余白） */
.oyako-for-you__list {
  list-style: none;

  max-width: 760px;

  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;

  padding: 0;

  display: grid;
  gap: 18px;
}

/* 役割：1行（アイコン＋テキスト） */
.oyako-for-you__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}

/* 役割：アイコン（種） */
.oyako-for-you__icon {
  width: 44px;
  height: auto;

  transform: translateY(2px);
}

/* 役割：本文 */
.oyako-for-you__text {
  margin: 0;

  font-size: 1.05rem;
  line-height: 1.9;
  font-weight: 500;

  color: var(--text-main);
}

/* ================================
  SUPPORT v3（!important無し / 新クラスで完結）
================================ */

/* 役割：縦1文字化（writing-mode等）の事故を止める */
.oyako-supportV3,
.oyako-supportV3 * {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* 役割：見出しブロック（ABOUT合わせ） */
.oyako-supportV3__head {
  text-align: center;
  margin-bottom: 28px;
}

/* 役割：英字ラベル */
.oyako-supportV3__en {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #6b4e3d;
  font-family: "JKGothic", "Zen Maru Gothic", sans-serif;
}

/* 役割：日本語見出し */
.oyako-supportV3__ttl {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 28px;
  line-height: 1.3;
  color: #6b4e3d;
  font-family: "JKGothic", "Zen Maru Gothic", sans-serif;
}

/* 役割：3行を縦に */
.oyako-supportV3__rows {
  display: grid;
  gap: 34px;
}

/* 役割：row（見出し全幅 + 本文/メディア左右） */
.oyako-supportV3__row {
  display: grid;

  grid-template-columns: 1fr 132px;
  grid-template-areas:
    "ttl ttl"
    "text media";

  column-gap: 14px;
  row-gap: 10px;

  align-items: center;
}

/* 役割：2つめ（アイコン左 / テキスト右）だけ反転 */
.oyako-supportV3__row--iconLeft {
  grid-template-columns: 132px 1fr;
  grid-template-areas:
    "ttl ttl"
    "media text";
}

/* 役割：h3（1行固定で中央） */
.oyako-supportV3__rowTtl {
  grid-area: ttl;

  margin: 0;

  text-align: center;
  white-space: nowrap;

  font-size: clamp(16px, 4.6vw, 20px);
  line-height: 1.25;
  font-weight: 700;

  color: #6b4e3d;
  font-family: "JKGothic", "Zen Maru Gothic", sans-serif;
}

/* 役割：本文側 */
.oyako-supportV3__text {
  grid-area: text;
  min-width: 0; /* 折り返し事故防止 */
  text-align: left;
}

/* 役割：本文（ABOUTの本文感） */
.oyako-supportV3__desc p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #6b4e3d;
}

/* 役割：メディア側 */
.oyako-supportV3__media {
  grid-area: media;

  margin: 0;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 役割：2つめのメディアは左寄せ */
.oyako-supportV3__row--iconLeft .oyako-supportV3__media {
  justify-content: flex-start;
}

/* 役割：画像/アイコンの統一サイズ */
.oyako-supportV3__img {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
}

/* 役割：3つめの下に来る中央ブロック */
.oyako-supportV3__footer {
  margin-top: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

/* 役割：ロゴリンク */
.oyako-supportV3__footerLogoLink {
  display: inline-flex;
  justify-content: center;

  text-decoration: none;
}

/* 役割：ロゴ（少し小さめ） */
.oyako-supportV3__footerLogo {
  width: 128px; /* 通常160pxの8割 */
  height: auto;
  display: block;
}

/* 役割：注釈（ロゴ直下・中央） */
.oyako-supportV3__footerNote {
  margin-top: 6px;
  margin-bottom: 0;

  font-size: 12px;
  line-height: 1.6;
  color: #6b4e3d;
  opacity: 0.85;
  text-align: center;
}


/* 役割：ロゴ上の案内テキスト */
.oyako-supportV3__footerLead {
  margin-bottom: 8px;

  font-size: 13px;
  line-height: 1.6;
  color: #6b4e3d;

  text-align: center;
}
/* 役割：フッターリード文（現状の1.5倍） */
.oyako-supportV3__footerLead {
  font-size: 1.3em;
}

/* ================================
   SCHEDULE（ツアーの流れ）
================================ */

/* 役割：SCHEDULEセクションの土台（余白はlp-sectionに任せる） */
.oyako-schedule {
  background-color: var(--bg-base);
}

/* 役割：項目の縦並び（SPファースト） */
.oyako-schedule__list {
  display: grid;
  gap: 42px;
}

/* 役割：1項目を「テキスト→写真→注釈」の縦並びにする */
.oyako-schedule__item {
  display: grid;
  gap: 18px;
}

/* 役割：テキストブロック（見出し＋本文） */
.oyako-schedule__body {
  display: grid;
  gap: 12px;
}

/* 役割：日付タイトル（到着日など） */
.oyako-schedule__day {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

/* 役割：説明文（改行が多い想定で行間を広めに） */
.oyako-schedule__text {
  margin: 0;

  font-size: 16px;
  line-height: 2.0;

  color: var(--text-main);
}

/* 役割：写真＋注釈（既存フレームに載せる想定の器） */
.oyako-schedule__media {
  margin: 0;
}

/* 役割：画像（フレームが別で効いていても崩れないように） */
.oyako-schedule__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 役割：写真下の注釈 */
.oyako-schedule__note {
  margin-top: 10px;
  margin-bottom: 0;

  font-size: 14px;
  line-height: 1.8;

  text-align: center;
}

/* 役割：SCHEDULE全体の文字を中央揃えに統一 */
.oyako-schedule {
  text-align: center;
}

/* 役割：日付タイトル（到着日など）を中央揃え */
.oyako-schedule__day {
  text-align: center;
}

/* 役割：説明文を中央揃え */
.oyako-schedule__text {
  text-align: center;
}

/* 役割：写真下の注釈も中央揃え（念のため明示） */
.oyako-schedule__note {
  text-align: center;
}

/* ================================
   VOICE（参加者の声）※最終統合版（重複ゼロ）
================================ */

/* 役割：見出し（画像っぽい “感動の声〜” の作り） */
.oyako-voice__ttl {
  margin-top: 10px;
}

/* 役割：見出し行を中央に整列 */
.oyako-voice__ttlRow {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* 役割：薄グリーン文字（感動の／声） */
.oyako-voice__ttlGreen {
  color: var(--color-green);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 役割：声 を大きく */
.oyako-voice__ttlBig {
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  letter-spacing: 0.08em;
}

/* 役割：濃茶文字（頂いています！） */
.oyako-voice__ttlBrown {
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 役割：スライダー全体の器（矢印がカード中央に来る基準） */
.oyako-voice__wrap {
  position: relative;
  margin-top: 26px;
}

/* 役割：横スライド領域（SP） */
.oyako-voice__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

/* 役割：スクロールバーを目立たせない（見た目用） */
.oyako-voice__viewport::-webkit-scrollbar {
  height: 6px;
}

/* 役割：スクロールバーのつまみ */
.oyako-voice__viewport::-webkit-scrollbar-thumb {
  background: rgba(78, 52, 46, 0.18);
  border-radius: 9999px;
}

/* 役割：横並びトラック */
.oyako-voice__track {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  gap: 18px;
}

/* 役割：1枚分（SPは画面に合わせつつ統一） */
.oyako-voice__slide {
  flex: 0 0 88%;
  scroll-snap-align: center;

  /* 役割：高さ統一のためカードを伸ばせるように */
  display: flex;
}

/* 役割：白い角丸カード（サイズ統一＋吹き出しベース） */
.oyako-voice__card {
  width: 100%;

  background-color: #ffffff;
  border-radius: 18px;

  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 18px;
  padding-right: 18px;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);

  /* 役割：カードの高さを揃える（SP基準） */
  min-height: 240px;

  /* 役割：中身を中央寄せしやすく */
  display: flex;
  align-items: center;
}

/* 役割：本文（中央揃え固定）＋横罫線（行に合わせた“罫線”） */
.oyako-voice__text {
  margin: 0;

  text-align: center;
  color: var(--text-main);

  font-size: 16px;
  line-height: 2.0;
  font-weight: 700;

  padding-top: 6px;
  padding-bottom: 6px;

  /* 役割：
     ・横書きテキスト用の“罫線”
     ・横線を1行ごとに下へ敷く（縦ストライプにならない）
     ・2em = line-height(2.0) に合わせた間隔
  */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2em - 3px),
    rgba(159, 192, 136, 0.55) calc(2em - 3px),
    rgba(159, 192, 136, 0.55) calc(2em - 1px),
    transparent calc(2em - 1px),
    transparent 2em
  );
}

/* 役割：強調（オレンジ） */
.oyako-voice__em,
.oyako-voice__emLine {
  color: var(--color-orange);
  font-weight: 800;
}

/* 役割：PC用の人型アイコン（SPは非表示） */
.oyako-voice__icon {
  display: none;
}

/* 役割：矢印（カードのど真ん中に固定） */
.oyako-voice__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 46px;
  height: 46px;

  border: none;
  background: transparent;
  cursor: pointer;

  z-index: 3;
  opacity: 0.95;
}

/* 役割：左右位置（カードに少し被せる） */
.oyako-voice__arrow--prev {
  left: 6px;
}

.oyako-voice__arrow--next {
  right: 6px;
}

/* 役割：矢印（三角形） */
.oyako-voice__arrow::before {
  content: "";
  display: block;

  width: 0;
  height: 0;

  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

/* 役割：左三角 */
.oyako-voice__arrow--prev::before {
  border-right: 18px solid var(--color-green);
  margin-left: 12px;
}

/* 役割：右三角 */
.oyako-voice__arrow--next::before {
  border-left: 18px solid var(--color-green);
  margin-left: 16px;
}

/* 役割：ドット */
.oyako-voice__dots {
  display: flex;
  justify-content: center;
  gap: 10px;

  margin-top: 16px;
}

/* 役割：ドット（未選択） */
.oyako-voice__dot {
  width: 10px;
  height: 10px;

  border-radius: 9999px;
  border: none;

  background-color: rgba(78, 52, 46, 0.25);
  cursor: pointer;
}

/* 役割：ドット（選択中） */
.oyako-voice__dot.is-active {
  background-color: var(--color-green);
}


/* ================================
   PLAN（日程・費用）
================================ */

/* 役割：PLANセクション全体（背景は共通方針に合わせる） */
.oyako-plan {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* 役割：見出し行（アイコン＋タイトル） */
.oyako-plan__head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;

  margin-bottom: 28px;
}

/* 役割：左の親子アイコン */
.oyako-plan__icon {
  width: 64px;
  height: auto;
}

/* 役割：英字PLAN */
.oyako-plan__en {
  margin: 0;

  font-size: 18px;
  letter-spacing: 0.08em;
  color: #6b4e3d;
}

/* 役割：和文タイトル */
.oyako-plan__ttl {
  margin-top: 6px;
  margin-bottom: 0;

  font-size: 28px;
  line-height: 1.3;
  color: #6b4e3d;
}

/* ================================
   PLAN：ブロック共通（開催概要 / ツアープラン）
================================ */

/* 役割：ブロックの余白 */
.oyako-plan__block {
  margin-top: 26px;
}

/* 役割：ブロック見出し（下線つき） */
.oyako-plan__blockTtl {
  position: relative;

  margin-top: 0;
  margin-bottom: 18px;

  font-size: 24px;
  line-height: 1.3;
  color: #6b4e3d;
}

/* 役割：見出しの下線 */
.oyako-plan__blockTtl::after {
  content: "";
  display: block;

  height: 2px;
  margin-top: 10px;

  background-color: #6b4e3d;
  opacity: 0.9;
}

/* ================================
   PLAN：開催概要（行）
================================ */

/* 役割：行の縦並び */
.oyako-plan__rows {
  display: grid;
  gap: 16px;
}

/* 役割：1行（ラベル＋値） */
.oyako-plan__row {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 10px;

  margin: 0;

  font-size: 16px;
  line-height: 1.9;
  color: #6b4e3d;
}

/* 役割：ラベル側 */
.oyako-plan__label {
  font-weight: 600;
}

/* 役割：注釈行（ラベル無しで字下げ） */
.oyako-plan__row--note {
  opacity: 0.9;
}

.oyako-plan__row--note .oyako-plan__value {
  font-size: 14px;
}

/* ================================
   PLAN：アコーディオン（ツアープラン）
================================ */

/* 役割：アコーディオン全体の縦並び */
.oyako-planAcc {
  display: grid;
  gap: 18px;
}

/* 役割：各アイテム */
.oyako-planAcc__item {
  border-bottom: 2px solid rgba(107, 78, 61, 0.35);
  padding-bottom: 18px;
}

/* 役割：ヘッダー（クリック領域） */
.oyako-planAcc__head {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 14px;

  padding: 0;

  border: none;
  background: transparent;

  text-align: left;
}

/* 役割：左側テキスト塊 */
.oyako-planAcc__headText {
  flex: 1;
  min-width: 0;
}

/* 役割：プラン名 */
.oyako-planAcc__name {
  margin: 0;

  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #6b4e3d;
}

/* 役割：ハッシュタグ */
.oyako-planAcc__tags {
  margin-top: 8px;
  margin-bottom: 0;

  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(107, 78, 61, 0.92);
}

/* 役割：右の＋丸ボタン */
.oyako-planAcc__plus {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 9999px;

  background-color: #6b4e3d;
  color: #ffffff;
}

/* 役割：＋記号のサイズ（共通accordion-iconを中で使う） */
.oyako-planAcc__plus .accordion-icon {
  font-size: 22px;
  line-height: 1;
}

/* 役割：開いた時も丸ボタン自体は固定（回転は共通CSSが担当） */
.oyako-planAcc__head.is-open .oyako-planAcc__plus {
  background-color: #6b4e3d;
}

/* 役割：開閉コンテンツの内側余白 */
.oyako-planAcc__content {
  padding-top: 12px;
}

/* 役割：中身を読みやすく */
.oyako-planAcc__inner {
  padding-top: 6px;
}

/* 役割：メタ情報（行） */
.oyako-planAcc__meta {
  margin-top: 0;
  margin-bottom: 8px;

  font-size: 15px;
  line-height: 1.8;
  color: #6b4e3d;
}

/* 役割：メタのラベル */
.oyako-planAcc__metaLabel {
  font-weight: 700;
}

/* 役割：説明ブロック */
.oyako-planAcc__desc {
  margin-top: 14px;
}

/* 役割：ツアー内容 見出し */
.oyako-planAcc__descTtl {
  margin-top: 0;
  margin-bottom: 8px;

  font-size: 15px;
  font-weight: 700;
  color: #6b4e3d;
}

/* 役割：内容リスト */
.oyako-planAcc__list {
  margin: 0;
  padding-left: 1.2em;

  display: grid;
  gap: 6px;

  color: #6b4e3d;
}

/* 役割：リスト項目 */
.oyako-planAcc__li {
  font-size: 15px;
  line-height: 1.8;
}

/* 役割：注釈 */
.oyako-planAcc__note {
  margin-top: 10px;
  margin-bottom: 0;

  font-size: 13px;
  line-height: 1.7;
  color: rgba(107, 78, 61, 0.9);
}

/* ================================
   CAMPAIGN（ファミリー応援キャンペーン）
================================ */

/* 役割：セクション余白 */
.oyako-campaign {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* 役割：見出し全体（中央寄せ） */
.oyako-campaign__head {
  text-align: center;
  margin-bottom: 28px;
}

/* 役割：英字ラベル */
.oyako-campaign__en {
  margin: 0;

  font-size: 16px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #cd9fcc;
}

/* 役割：見出し */
.oyako-campaign__ttl {
  margin-top: 10px;
  margin-bottom: 10px;

  font-size: 28px;
  line-height: 1.35;
  color: #6b4e3d;
}

/* 役割：サブ見出し */
.oyako-campaign__sub {
  margin: 0;

  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(107, 78, 61, 0.9);
}

/* 役割：本文全体（中央寄せで読みやすく） */
.oyako-campaign__body {
  text-align: center;
}

/* 役割：導入文 */
.oyako-campaign__lead {
  margin-top: 0;
  margin-bottom: 18px;

  font-size: 16px;
  line-height: 2;
  color: #6b4e3d;
}

/* 役割：強調（オレンジ） */
.oyako-campaign__hl {
  color: #f2a33a;
  font-weight: 700;
}

/* 役割：割引リスト */
.oyako-campaign__list {
  margin-top: 0;
  margin-bottom: 22px;
  padding-left: 0;

  list-style: none;

  display: grid;
  gap: 10px;

  color: #6b4e3d;
}

/* 役割：リスト行 */
.oyako-campaign__li {
  font-size: 16px;
  line-height: 2;
}

/* 役割：リストの項目見出し部分 */
.oyako-campaign__liHead {
  font-weight: 700;
}

/* 役割：引用ブロック（余白と改行の気持ちよさ） */
.oyako-campaign__quote {
  margin-top: 10px;
  margin-bottom: 22px;
}

/* 役割：引用文1行 */
.oyako-campaign__q {
  margin-top: 0;
  margin-bottom: 8px;

  font-size: 16px;
  line-height: 2;
  color: rgba(107, 78, 61, 0.92);
}

/* 役割：締めの文章 */
.oyako-campaign__closing {
  margin: 0;

  font-size: 16px;
  line-height: 2;
  color: #6b4e3d;
}


/* ================================
   無料オンライン説明会（オレンジCTA帯）
================================ */

/* 役割：帯の外枠（フルブリード前提） */
.oyako-briefing-band {
  position: relative;
}

/* 役割：背景（オレンジ） */
.oyako-briefing-band__bg {
  position: relative;

  padding-top: 44px;
  padding-bottom: 44px;

  background-color: #f2a33a;

  overflow: hidden;
}

/* 役割：上部波（帯の上に重ねる） */
.oyako-briefing-band__wave {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 48px;

  transform: translateY(-100%);
}

/* 役割：波のsvgをフル幅に */
.oyako-briefing-band__wave svg {
  display: block;
  width: 100%;
  height: 48px;
}

/* 役割：中身レイアウト（SPは縦積み） */
.oyako-briefing-band__inner {
  display: grid;
  gap: 18px;

  align-items: center;
}

/* 役割：左のイラスト */
.oyako-briefing-band__illust {
  width: 140px;
  height: auto;

  margin-left: 0;
}

/* 役割：テキストブロック */
.oyako-briefing-band__text {
  color: #ffffff;
}

/* 役割：キャッチ */
.oyako-briefing-band__catch {
  margin-top: 0;
  margin-bottom: 10px;

  font-size: 26px;
  line-height: 1.3;
  font-weight: 800;

  text-align: center;
}

/* 役割：説明文 */
.oyako-briefing-band__desc {
  margin-top: 0;
  margin-bottom: 18px;

  font-size: 14px;
  line-height: 1.9;

  text-align: center;
}

/* 役割：帯内CTAの位置調整 */
.oyako-briefing-band__cta {
  margin-top: 6px;
}

/* 役割：帯内の注釈（白文字に） */
.oyako-briefing-band__ctaNote {
  color: rgba(255, 255, 255, 0.92);
}

/* ================================
   FAQ（よくある質問）
================================ */

/* 役割：セクション余白 */
.oyako-faq {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* 役割：見出し（中央） */
.oyako-faq__head {
  text-align: center;
  margin-bottom: 22px;
}

/* 役割：英字Q&A */
.oyako-faq__en {
  margin: 0;

  font-size: 16px;
  letter-spacing: 0.16em;
  font-weight: 700;

  color: rgba(107, 78, 61, 0.75);
}

/* 役割：見出し */
.oyako-faq__ttl {
  margin-top: 10px;
  margin-bottom: 0;

  font-size: 28px;
  line-height: 1.35;

  color: #6b4e3d;
}

/* 役割：白いカード枠（FAQ全体） */
.oyako-faq__card {
  margin-left: auto;
  margin-right: auto;

  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 18px;
  padding-right: 18px;

  border-radius: 14px;

  background-color: #ffffff;

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06);
}

/* ================================
   FAQ：アコーディオン本体
================================ */

/* 役割：各項目（区切り線） */
.oyako-faqAcc__item {
  padding-top: 18px;
  padding-bottom: 18px;

  border-bottom: 1px solid rgba(107, 78, 61, 0.18);
}

.oyako-faqAcc__item:first-child {
  padding-top: 6px;
}

.oyako-faqAcc__item:last-child {
  border-bottom: none;
  padding-bottom: 6px;
}

/* 役割：質問ボタン（クリック領域） */
.oyako-faqAcc__q {
  width: 100%;

  display: grid;
  grid-template-columns: 28px 1fr 44px;
  gap: 12px;

  align-items: start;

  padding: 0;

  border: none;
  background: transparent;

  text-align: left;
}

/* 役割：Qマーク */
.oyako-faqAcc__qMark {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;

  color: #6b4e3d;
}

/* 役割：質問文 */
.oyako-faqAcc__qText {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;

  color: #6b4e3d;
}

/* 役割：右の＋丸ボタン */
.oyako-faqAcc__plus {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 9999px;

  background-color: #6b4e3d;
  color: #ffffff;
}

/* 役割：＋記号 */
.oyako-faqAcc__plus .accordion-icon {
  font-size: 22px;
  line-height: 1;
}

/* 役割：回答ブロック（開閉） */
.oyako-faqAcc__a {
  padding-top: 10px;
}

/* 役割：回答内側 */
.oyako-faqAcc__aInner {
  padding-left: 40px;
  padding-right: 4px;
}

/* 役割：回答文 */
.oyako-faqAcc__aText {
  margin: 0;

  font-size: 14px;
  line-height: 1.9;

  color: rgba(107, 78, 61, 0.92);
}

/* 役割：QマークをJKフォント＋サイズ控えめに */
.oyako-faqAcc__qMark {
  font-family: var(--font-jk);

  /* 元22px → 約8割 */
  font-size: 18px;

  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.02em;
}

/* ================================
   動画セクション：白背景＋なみなみで白に切替（統合版）
   役割：
   ・セクション背景を白に
   ・上端を波形で“白背景の始まり”にする
   ・動画はSPは56.25vw、PCは伸びすぎ防止（max-height）
   ・動画間の余白：SP 20px / PC 10px（さらに半分）
================================ */

/* ================================
   セクション土台
================================ */

/* 役割：動画セクション全体を白背景に */
.oyako-movies {
  position: relative;
  background-color: var(--bg-white);
}

/* 役割：内側の余白（旧 inline padding-top の置き換え） */
.oyako-movies__topSpace {
  height: 28px;
}

/* ================================
   なみなみ（上端で白に切替）
================================ */

/* 役割：上端の波（白で切替） */
.oyako-movies__wave {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 48px;

  transform: translateY(-100%);
  pointer-events: none;

  /* 役割：描画誤差で隙間が出るのを防ぐ */
  margin-bottom: -2px;
}

/* 役割：SVGをフル幅で表示 */
.oyako-movies__wave svg {
  display: block;
  width: 100%;
  height: 48px;

  /* 役割：アンチエイリアス隙間対策 */
  transform: translateY(2px);
}

/* ================================
   動画本体
================================ */

/* 役割：動画をクラスで統一（inline style撤去） */
.oyako-movies__video {
  display: block;
  width: 100%;

  /* 役割：SPは画面幅ベースで16:9 */
  height: 56.25vw;

  background-color: var(--bg-white);
}

/* ================================
   動画間余白
================================ */

/* 役割：動画間の余白（SP） */
.oyako-movies .video-gap {
  height: 20px;
}

/* ================================
   PC拡張（768px〜）
================================ */
@media (min-width: 768px) {

  /* 役割：波を少し大きく（CTA帯と馴染ませる） */
  .oyako-movies__wave,
  .oyako-movies__wave svg {
    height: 56px;
  }

  /* 役割：上余白（必要なら増やす） */
  .oyako-movies__topSpace {
    height: 40px;
  }

  /* 役割：PCだけ動画の縦伸びを止める（間延び対策） */
  .oyako-movies__video {
    height: auto;          /* vw指定を解除 */
    aspect-ratio: 16 / 9;  /* 比率維持 */
    max-height: 520px;     /* 好みで 420〜560px で調整 */
  }

  /* 役割：PCだけ動画間余白をさらに半分 */
  .oyako-movies .video-gap {
    height: 10px;
  }
}


/* ================================
   背景：PLAN / CAMPAIGN を白に
================================ */

/* 役割：セクション背景を白に上書き（lp-section--beigeより優先） */
.oyako-plan.lp-section,
.oyako-campaign.lp-section {
  background-color: var(--bg-white);
}


/* ================================
   PLAN：見出し（SP/PCとも中央固定）
================================ */

/* 役割：PLAN見出しを常に中央 */
.oyako-plan .oyako-supportV3__head {
  text-align: center;
}

/* 役割：PCで過去の grid/flex 指定が残っていても中央に戻す（強制） */
@media (min-width: 768px) {
  .oyako-plan .oyako-supportV3__head {
    display: block !important;
    justify-items: unset !important;
    align-items: unset !important;
    text-align: center !important;
  }

  /* 役割：念のため中の要素も中央 */
  .oyako-plan .oyako-supportV3__en,
  .oyako-plan .oyako-supportV3__ttl {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ================================
   PLAN：開催概要/ツアープランの開始位置（SP→元通り / PC→4ch）
================================ */

/* 役割：SPは“元の開始位置”に戻す（paddingなし） */
.oyako-plan .oyako-plan__block {
  padding-left: 0;
  padding-right: 0;
}

/* 役割：PCだけ今くらいの寄せ（4文字分）＋幅を絞って中央 */
@media (min-width: 768px) {
  .oyako-plan .oyako-plan__block {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;

    padding-left: 4ch;
    padding-right: 0;
  }
}

/* 役割：ブロック見出し（開催概要/ツアープラン）は左寄せのまま */
.oyako-plan .oyako-plan__blockTtl {
  text-align: left;
}


/* ================================
   PLAN：アコーディオン内の開始位置（SP→元通り / PC→4ch）
================================ */

/* 役割：SPは“元の開始位置”に戻す */
.oyako-plan .oyako-planAcc__inner {
  padding-left: 0;
  padding-right: 0;
}

/* 役割：PCだけ少し中央寄り（開催概要と揃える） */
@media (min-width: 768px) {
  .oyako-plan .oyako-planAcc__inner {
    padding-left: 4ch;
    padding-right: 0;
  }
}

/* ================================
   PLAN：サムネを最初から表示（開閉はテキストのみ）
================================ */

/* 役割：headの中でもサムネを下に積めるように */
.oyako-planAcc__headText {
  display: grid;
  gap: 8px;
}

/* 役割：サムネの余白 */
.oyako-planAcc__thumb {
  margin-top: 10px;
  margin-bottom: 0;

  display: flex;
  justify-content: center;
}

/* 役割：サムネの見た目 */
.oyako-planAcc__thumbImg {
  width: 100%;
  max-width: 520px;

  height: auto;
  display: block;

  border-radius: 18px;
  object-fit: cover;
}

/* 役割：＋ボタンがサムネ中央に食い込まないよう上寄せ */
.oyako-planAcc__plus {
  align-self: flex-start;
  margin-top: 2px;
}


/* 役割：figureを角丸の器にして画像のはみ出しを隠す */
.oyako-planAcc__thumb {
  border-radius: 18px;
  overflow: hidden;
}

/* 役割：画像自体にも角丸（上書きされても効くように） */
.oyako-planAcc__thumbImg {
  border-radius: 18px;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* 役割：動画ブロックを2カラム全幅にして下段に出す */
.oyako-supportV3__movie {
  grid-column: 1 / -1;

  display: flex;
  justify-content: center;

  margin-top: 18px;
}

/* 役割：動画を“中央で大きく”見せる（幅100%＋最大幅） */
.oyako-supportV3__movie .oyako-movies__video {
  width: 100%;
  max-width: 720px;

  height: auto;

  display: block;

  aspect-ratio: 16 / 9;
  object-fit: cover;

  border-radius: 18px;
  background-color: #ffffff;
}