/* ================================
   common-style.css（親子LP 共通）
   目的：
   ・Design Tokens / Base / Layout / CTA / Motion / Accordion を共通化
   ・PCだけ別レイアウト化する指定（SOELU方式など）は入れない
   ・CTAの厚みは SP=24/48 に統一（ユーザー指定）
================================ */

/* ================================
   Design Tokens（変数）
================================ */

/* 役割：全体で使う色・余白・サイズを一元管理 */
:root {
  /* ================================
     背景・文字
  ================================ */
  --bg-base: #fdf6ec;
  --bg-white: #ffffff;
  --text-main: #4e342e;

  /* ================================
     アクセント
  ================================ */
  --color-green: #9fc088;
  --color-purple: #cd9fcc;
  --color-orange: #e9a23b;
  --line-green: #06c755;

  /* ================================
     レイアウト
  ================================ */
  --inner-max: 1200px;
  --inner-pad: 20px;

  /* ================================
     セクション余白
  ================================ */
  --sec-pad-y-sp: 48px;
  --sec-pad-y-pc: 72px;

  /* ================================
     角丸・影
  ================================ */
  --radius-md: 14px;
  --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.25);

  /* ================================
     タイポ
  ================================ */
  --fz-h1: 2.2rem;
  --fz-h2: 1.8rem;
  --fz-h3: 1.4rem;

  --fz-body: 1rem;
  --fz-body-small: 0.9rem;
  --fz-note: 0.75rem;

  --lh-heading: 1.4;
  --lh-body: 1.8;

  /* ================================
     CTA（サイズ）
     ※SP=24/48（指定）
  ================================ */
  --cta-fz-sp: 22px;
  --cta-fz-pc: 26px;

  --cta-py-sp: 24px;
  --cta-px-sp: 48px;

  --cta-py-pc: 28px;
  --cta-px-pc: 60px;

  /* ================================
     CTA（丸み）
  ================================ */
  --radius-cta: 9999px;
}

/* ================================
   Font（フォント）
================================ */

/* 役割：フォールバック用（やさしい丸ゴ） */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap");

/* 役割：JKゴシックをテーマ配下から読む */
@font-face {
  font-family: "JKGothic";
  src: url("/wp-content/themes/default/oyako/fonts/jkgothic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ================================
   Base（ベース）
================================ */

/* 役割：幅計算の事故を防ぐ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 役割：最背面の白抜けを防止（背景色） */
html {
  background-color: var(--bg-base);
}

/* 役割：LP全体の土台（背景・文字・フォント） */
body {
  margin: 0;

  color: var(--text-main);
  background-color: var(--bg-base);

  font-family: "JKGothic", "Zen Maru Gothic", sans-serif;

  /* 役割：100vw系や装飾で横スクロールが出た時の保険 */
  overflow-x: clip;
}

/* 役割：画像・動画の基本崩れ防止 */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 役割：リンクの基本（必要なら各セクションで上書き） */
a {
  color: inherit;
}

/* ================================
   Typography（タイポ）
================================ */

/* 役割：見出しの基本 */
h1,
h2,
h3 {
  margin: 0;
  line-height: var(--lh-heading);
  color: var(--text-main);
}

/* 役割：見出しサイズ */
h1 {
  font-size: var(--fz-h1);
  font-weight: 700;
}

h2 {
  font-size: var(--fz-h2);
  font-weight: 700;
}

h3 {
  font-size: var(--fz-h3);
  font-weight: 500;
}

/* 役割：通常本文 */
.text-body {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text-main);
}

/* 役割：少し小さい本文 */
.text-body-small {
  font-size: var(--fz-body-small);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text-main);
}

/* 役割：注釈 */
.text-note {
  font-size: var(--fz-note);
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-main);
  opacity: 0.85;
}

/* 役割：強調 */
.text-bold {
  font-weight: 700;
}

/* 役割：色強調 */
.text-green {
  color: var(--color-green);
  font-weight: 700;
}

.text-purple {
  color: var(--color-purple);
  font-weight: 700;
}

.text-orange {
  color: var(--color-orange);
  font-weight: 700;
}

/* 役割：
   ・このクラスを付けた範囲は「何があってもJK」にする
*/
.jk-force,
.jk-force * {
  font-family: "JKGothic", "Zen Maru Gothic", sans-serif !important;
}

/* ================================
   Layout（背景全面 + inner）
================================ */

/* 役割：背景を“画面全面”に敷くセクション土台 */
.lp-section {
  width: 100%;
  padding-top: var(--sec-pad-y-sp);
  padding-bottom: var(--sec-pad-y-sp);
}

/* 役割：中身だけ中央寄せ＋左右余白 */
.lp-inner {
  max-width: var(--inner-max);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--inner-pad);
  padding-right: var(--inner-pad);
}

/* 役割：背景色バリエーション */
.lp-section--beige {
  background-color: var(--bg-base);
}

.lp-section--white {
  background-color: var(--bg-white);
}

/* 役割：必要な時だけ使う“フルブリード（100vw）” */
.lp-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 役割：フルブリードの中でも中身は中央寄せ */
.lp-fullbleed__inner {
  max-width: var(--inner-max);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--inner-pad);
  padding-right: var(--inner-pad);
}

/* 役割：既存互換（置換しなくても“中央寄せ”だけ効く） */
.full-bleed-inner {
  max-width: var(--inner-max);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--inner-pad);
  padding-right: var(--inner-pad);
}

/* ================================
   Layout（SP最優先：白抜け対策）
================================ */

/* 役割：LPページだけ container/row の余白が背景を切らないようにする */
body.page-id-2876 .container,
body.page-template-oyakoayako-reserva-php .container,
body.page-oyako-lp .container,
body.page-oyako-lpa-reserva .container,
body:has(main.oyako-lp) .container {
  width: 100%;
  max-width: none;

  padding-left: 0;
  padding-right: 0;

  margin-left: 0;
  margin-right: 0;
}

/* 役割：row のマイナスマージンで横ズレするのを抑える */
body.page-id-2876 .row,
body.page-template-oyakoayako-reserva-php .row,
body.page-oyako-lp .row,
body.page-oyako-lpa-reserva .row,
body:has(main.oyako-lp) .row {
  margin-left: 0;
  margin-right: 0;
}

/* ================================
   CTA 共通
================================ */

/* ================================
   CTAラッパー
================================ */

/* 役割：CTAの外枠（中央寄せ） */
.c-cta {
  text-align: center;
}

/* ================================
   CTAボタン共通
================================ */

/* 役割：
   ・CTAボタンの共通見た目
   ・色は modifier（is-xxx）で切替
*/
.c-cta__btn {
  --cta-bg: var(--color-orange);

  display: inline-block;

  padding-top: var(--cta-py-sp);
  padding-bottom: var(--cta-py-sp);
  padding-left: var(--cta-px-sp);
  padding-right: var(--cta-px-sp);

  color: #ffffff;
  font-weight: 700;
  font-size: var(--cta-fz-sp);
  line-height: 1;

  border-radius: var(--radius-cta);
  text-decoration: none;

  background: var(--cta-bg);
  box-shadow: var(--shadow-md);

  opacity: 0;
  transform: scale(0.95);

  transition:
    opacity 0.4s ease-out 0.1s,
    transform 0.4s ease-out 0.1s;
}

/* ================================
   CTA カラーバリアント
================================ */

/* 役割：オレンジCTA */
.c-cta__btn.is-orange {
  --cta-bg: linear-gradient(to right, #ffa726, #ff8c00);
}

/* 役割：LINE CTA（グリーン） */
.c-cta__btn.is-line {
  --cta-bg: var(--line-green);
}

/* 役割：LINE追加（白ボタン×ピンク文字） */
.c-cta__btn.is-line-white {
  --cta-bg: #ffffff;

  color: #cd9fcc;

  /* 役割：白ボタンは沈みやすいので影を強める */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

/* ================================
   表示アニメ（active / is-active 互換）
================================ */

.c-cta__btn.active,
.c-cta__btn.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ================================
   既存ボタン互換（HTMLを壊さない）
================================ */

/* 役割：
   ・既存クラスでもCTAと同じ厚み/丸み/動きにする
*/
.line-button,
.reserva-button {
  display: inline-block;

  padding-top: var(--cta-py-sp);
  padding-bottom: var(--cta-py-sp);
  padding-left: var(--cta-px-sp);
  padding-right: var(--cta-px-sp);

  color: #ffffff;
  font-weight: 700;
  font-size: var(--cta-fz-sp);
  line-height: 1;

  border-radius: var(--radius-cta);
  text-decoration: none;

  box-shadow: var(--shadow-md);

  opacity: 0;
  transform: scale(0.95);

  transition:
    opacity 0.4s ease-out 0.1s,
    transform 0.4s ease-out 0.1s;
}

/* 役割：既存LINE色 */
.line-button {
  background-color: var(--line-green);
}

/* 役割：既存Reserva色 */
.reserva-button {
  background: linear-gradient(to right, #ffa726, #ff8c00);
}

/* 役割：既存の表示アニメ互換 */
.line-button.fade-zoom-in.active,
.reserva-button.fade-zoom-in.active {
  opacity: 1;
  transform: scale(1);
}

/* ================================
   CTA補足文（共通）
================================ */

/* 役割：ボタン下の注釈を共通化 */
.c-cta__note,
.oyako-fv__ctaNote {
  margin-top: 12px;
  margin-bottom: 0;

  font-size: 0.95rem;
  line-height: 1.7;

  color: rgba(78, 52, 46, 0.85);
  text-align: center;
}

/* ================================
   Motion（共通アニメ）
================================ */

/* 役割：フェードアップ */
.fade-up {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.fade-up.active,
.fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 役割：ポップ */
.pop-in {
  opacity: 0;
  transform: scale(0.8);

  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
}

.pop-in.active,
.pop-in.is-active {
  opacity: 1;
  transform: scale(1);
}

/* 役割：左右スライド（左） */
.slide-in-left {
  opacity: 0;
  transform: translateX(-30px);

  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.slide-in-left.active,
.slide-in-left.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* 役割：左右スライド（右） */
.slide-in-right {
  opacity: 0;
  transform: translateX(30px);

  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.slide-in-right.active,
.slide-in-right.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* ================================
   UI（共通：アコーディオン）
================================ */

/* 役割：開閉ヘッダー */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;
}

/* 役割：＋－アイコン */
.accordion-icon {
  font-size: 1.5rem;
  font-weight: 700;

  transition:
    transform 0.3s ease;
}

/* 役割：開いた時の回転 */
.accordion-header.is-open .accordion-icon {
  transform: rotate(45deg);
}

/* 役割：中身（初期は閉じる） */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;

  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
}

/* 役割：開いた状態 */
.accordion-content.is-open {
  opacity: 1;
}

/* ================================
   Utility（最小限）
================================ */

/* 役割：中央寄せ */
.u-text-center {
  text-align: center;
}

/* 役割：余白 */
.u-mt-md {
  margin-top: 16px;
}

.u-mt-lg {
  margin-top: 24px;
}

/* ================================
   Responsive（共通）
================================ */

/* 役割：SPで見出しが大きすぎる場合に抑える */
@media (max-width: 767px) {

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.2rem;
  }
}

/* ================================
   PC拡張（768px〜）
   役割：
   ・レイアウト（カラム）は変えず、CTAの押しやすさだけ少し増やす
================================ */

@media (min-width: 768px) {

  .c-cta__btn,
  .line-button,
  .reserva-button {
    font-size: var(--cta-fz-pc);

    padding-top: var(--cta-py-pc);
    padding-bottom: var(--cta-py-pc);
    padding-left: var(--cta-px-pc);
    padding-right: var(--cta-px-pc);
  }

  /* 役割：ホバーで“浮く” */
  .c-cta__btn:hover,
  .line-button:hover,
  .reserva-button:hover {
    transform: scale(1.05);
  }

  /* 役割：PCはセクション余白を拡張（不要なら消してOK） */
  .lp-section {
    padding-top: var(--sec-pad-y-pc);
    padding-bottom: var(--sec-pad-y-pc);
  }
}

/* ================================
   ヘッダー調整（ロゴ / ツアー申込ボタン）
   対象：oyako-lpa-reserva / oyako-lp / そして <main class="oyako-lp"> があるLP
================================ */

/* 役割：判定用（中身なし） */
body:has(main.oyako-lp),
body.page-oyako-lp,
body.page-oyako-lpa-reserva {
}

/* 役割：ロゴ画像／ロゴ枠を確実に消す */
body:has(main.oyako-lp) header.header img.header_logo,
body:has(main.oyako-lp) header.header .logo_width,
body:has(main.oyako-lp) img.header.logo,
body.page-oyako-lp header.header img.header_logo,
body.page-oyako-lp header.header .logo_width,
body.page-oyako-lp img.header.logo,
body.page-oyako-lpa-reserva header.header img.header_logo,
body.page-oyako-lpa-reserva header.header .logo_width,
body.page-oyako-lpa-reserva img.header.logo {
  display: none !important;
}

/* 役割：ロゴ枠が残って余白になるケースを潰す */
body:has(main.oyako-lp) header.header .col-6.col-md-3,
body.page-oyako-lp header.header .col-6.col-md-3,
body.page-oyako-lpa-reserva header.header .col-6.col-md-3 {
  width: 0 !important;
  padding: 0 !important;
}

/* 役割：ヘッダー上下余白が気になる時の保険 */
body:has(main.oyako-lp) header.header,
body.page-oyako-lp header.header,
body.page-oyako-lpa-reserva header.header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 役割：ヘッダーのツアー申込（.fixed-apply-btn）を対象2ページ+LPで消す */
body:has(main.oyako-lp) .fixed-apply-btn,
body.page-oyako-lp .fixed-apply-btn,
body.page-oyako-lpa-reserva .fixed-apply-btn {
  display: none !important;
}

/* ================================
   FIX：SPで背景が左右に白く抜ける問題（LPページ限定）
================================ */

/* 役割：最背面もベージュ固定（保険） */
html {
  background-color: var(--bg-base) !important;
}

/* 役割：
   ・2つのLP（/oyako-lp/ と /oyako-lpa-reserva/）＋新テンプレ（main.oyako-lp）で
   ・body背景を強制的にベージュへ
*/
body.page-oyako-lp,
body.page-oyako-lpa-reserva,
body:has(main.oyako-lp) {
  background-color: var(--bg-base) !important;

  /* 役割：横ズレが出ると白く見える／横スクロールが出るので抑える */
  overflow-x: hidden;
}

/* 役割：
   ・mainが白や幅制限になってると“左右白抜け”に見えるので
   ・LP本体にも背景を敷く（保険）
*/
body.page-oyako-lp main,
body.page-oyako-lpa-reserva main,
body:has(main.oyako-lp) main {
  background-color: var(--bg-base) !important;
}

/* 役割：
   ・LP内のセクションは幅100%で背景が途切れないようにする（保険）
*/
body.page-oyako-lp .oyako-fv,
body.page-oyako-lp .oyako-message,
body.page-oyako-lpa-reserva .oyako-fv,
body.page-oyako-lpa-reserva .oyako-message,
body:has(main.oyako-lp) .oyako-fv,
body:has(main.oyako-lp) .oyako-message {
  width: 100%;
  margin-left: 0;
  margin-right: 0;

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

/* ================================
   セクション切り替え：LINE誘導帯（最終・統合版）
   役割：
   ・帯はフルブリード（100vw）
   ・上端そのものを「波形」にする（線じゃなく形）
   ・テキストは中央配置
================================ */

/* 役割：帯セクションの土台 */
main.oyako-lp .oyako-line-band {
  position: relative;
}

/* 役割：
   ・紫の帯（フルブリード）
   ・波は外に出すので overflow は visible
*/
main.oyako-lp .oyako-line-band__bg {
  position: relative;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background-color: #cd9fcc;

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

  overflow: visible;
}

/* 役割：
   ・上端の波（帯の外＝上に出す）
   ・「帯の中の線」にならないように上へ逃がす
*/
main.oyako-lp .oyako-line-band__wave {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 44px;

  line-height: 0;
  transform: translateY(-100%);

  z-index: 0;
  pointer-events: none;

  /* 役割：
     ・波を帯に1px食い込ませて隙間を消す
     ・SVGの描画誤差（アンチエイリアス）対策
  */
  margin-bottom: -2px;
}

/* 役割：SVGを横いっぱいに表示 */
main.oyako-lp .oyako-line-band__wave svg {
  width: 100%;
  height: 100%;

  display: block;
  transform: translateY(2px);
}

/* 役割：
   ・中身を中央寄せ
   ・帯の中で文字が中央に固定されるように強める
*/
main.oyako-lp .oyako-line-band__inner {
  position: relative;
  z-index: 1;

  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  padding-left: 16px;
  padding-right: 16px;

  text-align: center !important;
}

/* 役割：
   ・キャッチ（大きめ＋基本1行）
   ・超小型端末だけ自動縮小
*/
main.oyako-lp .oyako-line-band__catch {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;

  color: #ffffff;

  margin: 0 0 14px;

  white-space: nowrap;
}

/* 役割：小さい端末だけ縮めて1行維持 */
@media (max-width: 390px) {

  main.oyako-lp .oyako-line-band__catch {
    font-size: clamp(18px, 5.8vw, 30px);
  }
}

/* 役割：説明文 */
main.oyako-lp .oyako-line-band__text {
  font-size: 14px;
  line-height: 1.85;

  color: #ffffff;

  margin: 0;
}

/* ================================
   LINE誘導帯：CTA（共通CTAに統一）
================================ */

/* 役割：帯内CTAブロックの余白＆中央寄せ */
main.oyako-lp .oyako-line-band__cta {
  margin-top: 24px;
  text-align: center;
}

/* 役割：ピンク帯の中の補足文は白にする（既存.noteを上書き） */
main.oyako-lp .oyako-line-band .c-cta__note {
  color: rgba(255, 255, 255, 0.92);
}

/* ================================
   CTAバリアント：LINE追加（白ボタン×ピンク文字）
================================ */

/* 役割：白ボタン＋ピンク文字（LINE追加用）
   ※ベースと同じ内容だが、帯パートを読んだ時に迷わないよう残す
*/
.c-cta__btn.is-line-white {
  --cta-bg: #ffffff;

  color: #cd9fcc;

  border-radius: 9999px;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

/* 役割：ホバー時の気持ちよさ（共通のhoverより優先させたい時） */
@media (min-width: 768px) {

  .c-cta__btn.is-line-white:hover {
    transform: scale(1.05);
  }
}

/* ================================
   PC：LP全体を“背景ごと”60%幅で中央表示（SP構造のまま）
   目的：
   ・LP（背景含む）をPCで約60%幅にして中央寄せ
   ・zoom / scaleは使わない（バランス崩さない）
   ・LPの中身は今まで通り（1カラムのまま）
 
================================ */

@media (min-width: 1024px) {

  /* ================================
     LP全体（背景も含めて）を 60% 幅にする
  ================================ */
  main.oyako-lp {
    /* 役割：画面の約60%幅（好みで 55〜70vw くらいで調整OK） */
    width: 60vw;

    /* 役割：デカいモニタで広がりすぎない上限（好みで調整） */
    max-width: 980px;

    /* 役割：小さめPCでも潰れすぎない下限（好みで調整） */
    min-width: 720px;

    /* 役割：中央寄せ */
    margin-left: auto;
    margin-right: auto;

    /* 役割：横スクロール保険 */
    overflow-x: hidden;
  }

  /* ================================
     LP内の“器”はLP幅に追従させる
     （ここで max-width 固定の“細い柱”を防ぐ）
  ================================ */
  main.oyako-lp .lp-inner,
  main.oyako-lp .full-bleed-inner,
  main.oyako-lp .oyako-fv__bg,
  main.oyako-lp .oyako-message__inner,
  main.oyako-lp .oyako-for-you__list,
  main.oyako-lp .oyako-line-band__inner,
  main.oyako-lp .oyako-faq__card {
    max-width: 100% !important;
  }
}


/* ================================
   ユーティリティ：スマホだけ改行
================================ */

/* 役割：SPでは表示（改行） */
.u-br-sp {
  display: inline;
}

/* 役割：PCでは非表示 */
@media (min-width: 768px) {
  .u-br-sp {
    display: none;
  }
}


@media (min-width: 1024px) {

  /* ================================
     CTA帯：100vwフルブリードをやめて、LP幅に合わせる
  ================================ */

  /* 役割：帯の背景を main(60vw) の幅に追従させる */
  main.oyako-lp .oyako-line-band__bg {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* 役割：波SVGもズレないように、基準を100%に合わせる */
  main.oyako-lp .oyako-line-band__wave {
    width: 100%;
    left: 0;
  }

  /* ================================
     FAQ：念のためセクションの横ズレ保険
  ================================ */

  /* 役割：セクション/内側がマイナス余白等でズレても強制で収める */
  main.oyako-lp .oyako-faq,
  main.oyako-lp .oyako-faq .lp-inner,
  main.oyako-lp .oyako-faq__card {
    max-width: 100%;
  }
}