/* ==========================================================================
   📱 responsive.css
   --------------------------------------------------------------------------
   🌹 SPの真実は「ここ」にある。
   --------------------------------------------------------------------------
   ・SPに関するすべての最終制御はこのファイルで完結する。
   ・pages-*.css は構造（PC基準）を担う。
   ・SPでの上書き・余白・座標・表示切替はここにのみ書く。
   ・将来の自分たちへ：
       SPで迷ったら、このファイルだけを見ればよい。
       他ファイルにSP指定を作らない。
   ========================================================================== */

/* ==========================================================================
   01) 📱 Smartphone（〜768px）
   --------------------------------------------------------------------------
   🌹 SP座標系・余白・密度はすべてここで再定義する。
   ========================================================================== */

/* SP header：デフォルトは隠す（PCで誤表示しない） */
.l-headerSp,
.c-headerSp,
.c-headerSp__menu,
.c-headerSp__dimmer {
  display: none;
}

/* SP header：WP管理バー（スマホ）を固定し、ヘッダーも常に下に置く */
@media (max-width: 782px) {
  /* WP管理バーを固定（スクロールで消えない＝隙間が出ない） */
  #wpadminbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
  }

  body.admin-bar {
    --wpadminbar-h: 46px;
  }

  body.admin-bar .l-header {
    top: var(--wpadminbar-h);
  }
}

@media (max-width: 768px) {
  /* ======================================================================
     🧠 00) 親玉コンソール（サイト全体の基準）
     ----------------------------------------------------------------------
     🌹 SPにおける“呼吸”を決める最上位トークン。
     ここを動かすと全体が変わる。
     ====================================================================== */

  :root {
    --site-pad-x: 16px; /* SP左右余白の絶対基準 */

    /* ======================================================================
       🔤 02) タイポグラフィ基準（SP）
       ----------------------------------------------------------------------
       🌹 基本はPCを継承。SPでのみ変更する場合に記述。
       ====================================================================== */

    /* ======================================================================
       🧢 10-1) Header（SP密度制御）
       ====================================================================== */

    --logo-offset-y: 6px; /* ロゴの縦位置調整 */

    /* ======================================================================
       🎀 10-2) Band（帯）
       ====================================================================== */
    /* 🌹 SPタイトルサイズ */
    --band-title-size: 24px;

    /* ======================================================================
       🧿 10-4) Slider（スライダー）
       ----------------------------------------------------------------------
       🌹 SPは「浅く・読みやすく」が思想。
       ====================================================================== */

    --slider-h: 275px;
    --slider-cap-x: 16px;
    --slider-cap-bottom: 18px;

    /* ======================================================================
       🪧 10-5) Heading（見出しSP基準）
       ====================================================================== */

    --h2-lg-icon: 66px;
    --h2-lg-en-size: 20px;
    --h2-lg-jp-size: 22px;
    --h2-lg-block-bottom: 24px;

    --h2-sm-icon: 48px;
    --h2-sm-en-size: 16px;
    --h2-sm-jp-size: 22px;

    --h3-x: 0px; /* SPではインデント無効化 */

    /* ======================================================================
       🦶 10-6) Footer（SP縦積み前提）
       ====================================================================== */

    --footer-shop-size: 20px;
    --footer-tel-size: 16px;
    --footer-company-line: 1.5;

    /* ======================================================================
       🗺 20) Layout（SPレイアウト基準）
       ====================================================================== */

    --main-pad-top: 18px;
    --main-pad-bottom: 18px;
    --section-pad-y: 24px;

    /* 🌹 Single：SPは縦積み（サイド幅を無効化） */
    --single-side-w: 0px;

    /* 🌹 縦積みになったときのTOCのボトムの調整 */
    --toc-mb: var(--main-pad-bottom);

    /* 🌹 footer前の距離は main の18pxだけに統一 */
    --archive-mb: 0px;
    --single-mb: 0px;

    /* ======================================================================
       🏠 30) ページ差分（SP思想）
       ----------------------------------------------------------------------
       🌹 ここで各ページのSP座標・余白を完結させる。
       ====================================================================== */

    /* --- TOP --- */

    --prose-size: 16px;
    --prose-line: 1.8;
    --home-feature-p-shift: 0px;
    --prose-gap: 14px;

    --prose-high-size: 22px;
    --prose-high-mt: 18px;
    --prose-high-mb: 14px;

    /* --- Lesson/Price --- */
    /* 🌹 Lesson SPは「白い枠内を原点とする座標制御システム」 */

    --lesson-indent-x: 0px;

    /* 白枠内 原点 */
    --lsn-pad-x: 18px;
    --lsn-pad-y: 18px;

    /* H3 */
    --h3-lsn-x: 0px;
    --lsn-h3-y: 0px;

    /* H3ドット */
    --h3-lsn-dot-x: 0px;
    --h3-lsn-dot-top: 8px;

    /* Price行 */
    --row-x: 6px;
    --lsn-row-y: 0px;
    --lsn-row-gap: 6px;

    /* 説明文 */
    --lsn-desc-x: 18px;
    --lsn-desc-y: 0px;

    /* h4 */
    --lsn-h4-x: 0px;
    --lsn-h4-y: 0px;

    /* --- Lesson/Flow --- */
    /* --- 並び（カード間） --- */
    --flow-step-gap: 14px; /* カード同士の縦間隔 */

    /* --- カード本体 --- */
    --flow-card-pad-x: 18px;
    --flow-card-pad-y: 18px;
    --flow-gap: 12px; /* アイコン列と本文列の間 */

    /* --- アイコン列 --- */
    --flow-icon-col: 64px;
    --flow-icon-size: 58px;

    /* 既存：Xツマミ（残す） */
    --flow-icon-x: 0px;
    --flow-num-x: 6px;
    --flow-num-y: 0px;
    --flow-title-x: 0px;
    --flow-text-x: 0px;
    --flow-incta-x: 0px;
    --flow-incta-mt: 12px;
    --flow-outcta-mt: 28px;

    /* 🌹 追加：Yツマミ（SPでのみ定義） */
    --flow-icon-y: 0px;
    --flow-title-y: 0px;
    --flow-text-y: 0px;
    --flow-incta-y: 0px;

    /* --- Single --- */
    --single-title-size: 20px;
  }

  /* ======================================================================
     🗺 Layout 実制御
     ====================================================================== */

  /* 🌹 Single：SPは縦積み */
  .p-single__grid {
    grid-template-columns: 1fr;
  }

  /* 🌹 Single：余計なmarginは足さない（gapで管理） */
  .p-single__side {
    margin-top: 0;
  }

  /* 🌹 Archive：SPは縦積み */
  .p-archive__grid {
    grid-template-columns: 1fr;
  }

  /* 🌹 Archive：余計なmarginは足さない（gapで管理） */
  .p-archive__side {
    margin-top: 0;
  }

  /* ======================================================================
     🧢 Header（SP専用ヘッダー）
     方針：
     - header.php では PC/SP を両方読み込む
     - 表示の真実は responsive.css（SPのみSPヘッダーを表示）
     - 開閉状態は body.is-spmenu-open で制御（JSで付与）
     ====================================================================== */

  /* SP幅のみ：PCヘッダーを隠し、SPヘッダーを表示 */
  @media (max-width: 767px) {
    /* PC header を無効化 */
    .l-header.c-header {
      display: none;
    }

    /* SP header を有効化 */
    .l-headerSp {
      display: block;
      position: fixed;
      z-index: var(--header-z);
      top: var(--wpadminbar-h, 0px);
      left: 0;
      right: 0;
      z-index: var(--header-z);
      background-color: rgba(255, 255, 255, 1);
      --logo-height: 42px;
    }

    .l-headerSp .c-header__logoSvg {
      transform: translate(var(--logo-offset-x), var(--logo-offset-y));
    }

    /* body の固定ヘッダー分余白（SPも同じ思想で確保） */
    body {
      padding-top: var(--header-fixed-h, 0px);
    }

    /* SP：スクロール時はPCと同じく「影＋透過」 */
    body.is-header-compact .l-headerSp {
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: var(--header-shadow);
    }

    /* 3点配置（左：トグル / 中：ロゴ / 右：contact） */
    .c-headerSp__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: var(--header-row-pad-top);
      padding-bottom: var(--header-row-pad-bottom);
      position: relative;
    }

    /* 中央ロゴを真ん中に固定するための最小土台 */
    .c-headerSp__logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    /* SP：ロゴリンクの色をPCと同じトークンに固定（既定の紫を排除） */
    .c-headerSp__logoLink,
    .c-headerSp__logoLink:visited {
      color: var(--logo-color);
      text-decoration: none;
    }

    /* SP：右のcontactも同様（必要なら） */
    .c-headerSp__contact,
    .c-headerSp__contact:visited {
      color: var(--nav-color);
      text-decoration: none;
    }

    /* クリック領域だけ先に確保（見た目は後で） */
    .c-headerSp__toggle,
    .c-headerSp__contact {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: transparent;
      border: 0;
      padding: 0;
      color: var(--nav-color);
      cursor: pointer;
    }

    .c-headerSp__toggle svg,
    .c-headerSp__contact svg {
      width: 32px;
      height: 32px;
      display: block;
      color: var(--brand-primary);
    }

    /* ×アイコンは閉じている時は非表示 */
    .c-headerSp__icon--close {
      display: none;
    }

    /* メニュー（アコーディオン）：閉じてる時は隠す */
    .c-headerSp__menu {
      display: block; /* ✅ 上部の display:none を打ち消す（これが無いと一生出ない） */

      background-color: rgba(255, 255, 255, 1);
      padding: 0 var(--site-pad-x) 8px;
      position: relative; /* これがないとz-indexが効かないケースがある */
      z-index: calc(var(--header-z) + 2);

      max-height: 0;
      overflow: hidden;

      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none; /* ✅ 閉じてる時はクリックできない */

      transition:
        max-height 2.2s cubic-bezier(0.3, 0.8, 0.4, 1),
        opacity 0.8s ease,
        transform 2.2s cubic-bezier(0.3, 0.8, 0.4, 1);
    }

    /* メニューのリンクも左右余白を揃える */
    .c-headerSp__menuList a {
      padding: 14px 0;
    }

    /* 暗転：閉じてる時は隠す（クリックで閉じる役） */
    .c-headerSp__dimmer {
      display: block; /* ✅ displayで切らない（フェードのため） */
      position: fixed;

      /* ✅ ヘッダーには暗転をかけない（開始位置をヘッダー下にする） */
      top: var(--header-fixed-h, 0px);
      left: 0;
      right: 0;
      bottom: 0;

      z-index: calc(var(--header-z) + 1);

      background: rgba(0, 0, 0, 0.35);
      border: 0;
      padding: 0;
      cursor: pointer;

      opacity: 0;
      pointer-events: none;

      transition: opacity 450ms cubic-bezier(0.3, 0.8, 0.4, 1);
    }

    /* ==============================
     Open state（JSが body に付与）
     ============================== */

    body.is-spmenu-open .c-headerSp__menu {
      max-height: 600px; /* メニュー数に応じて後で調整 */
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    body.is-spmenu-open .c-headerSp__dimmer {
      opacity: 1;
      pointer-events: auto;
    }

    body.is-spmenu-leaving .c-headerSp__dimmer {
      opacity: 1;
      background: rgba(0, 0, 0, 0.45);
      top: calc(var(--header-fixed-h, 0px) + var(--wpadminbar-h, 0px));
      z-index: calc(var(--header-z) + 99);
    }

    /* 開いてる時はアイコンを切替 */
    body.is-spmenu-open .c-headerSp__icon--open {
      display: none;
    }

    body.is-spmenu-open .c-headerSp__icon--close {
      display: inline-flex;
    }

    /* SPメニューは縦並び（見た目は後で詰める） */
    .c-headerSp__menuList {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .c-headerSp__menuList a {
      display: block;
      padding: 14px 0;
      text-decoration: none;
      color: var(--nav-color);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
  }

  /* ======================================================================
     🧿 Slider 実制御
     ====================================================================== */

  .c-slider__slide.is-slide-2 .c-slider__captionTitle {
    font-size: 26px;
    transform: translateY(-60px);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  }

  .c-slider__slide.is-slide-2 .c-slider__captionText {
    font-size: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
    font-weight: 700;
  }

  .c-slider__slide.is-slide-2 .c-slider__captionBtn {
    display: none;
  }

  /* ======================================================================
     📰 Lesson 実制御（枠内座標系）
     ====================================================================== */

  .p-lesson .p-lesson__pricingGroup {
    padding: var(--lsn-pad-y) var(--lsn-pad-x);
  }

  .p-lesson .c-h3.c-h3--dot-lsn {
    transform: translateY(var(--lsn-h3-y));
  }

  .p-lesson .p-lesson__priceRow {
    transform: translateY(var(--lsn-row-y));
    margin-top: var(--lsn-row-gap);
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  /* 🌹 Lesson：priceLabelはSPで最大幅を使う */
  .p-lesson .p-lesson__priceLabel {
    max-width: none; /* 幅制限解除 */
    white-space: nowrap; /* 自動折返ししない */
  }

  .p-lesson .p-lesson__list {
    padding-left: var(--lsn-desc-x);
    transform: translateY(var(--lsn-desc-y));
  }

  .p-lesson .p-lesson__h4 {
    margin-left: 0;
    transform: translate(var(--lsn-h4-x), var(--lsn-h4-y));
  }

  /* --- Flow：アイコン画像（X/Y） --- */
  .p-lesson .p-lessonFlowCard__icon img {
    transform: translate(var(--flow-icon-x), var(--flow-icon-y));
  }

  /* --- Flow：タイトル（Xは既存margin、Yを追加） --- */
  .p-lesson .p-lessonFlowCard__title {
    transform: translateY(var(--flow-title-y));
  }

  /* --- Flow：本文（Xは既存margin、Yを追加） --- */
  .p-lesson .p-lessonFlowCard__text {
    transform: translateY(var(--flow-text-y));
  }

  /* --- Flow：カード内CTA（X/mtは既存、Yを追加） --- */
  .p-lesson .p-lessonFlowCard .p-lesson__cta {
    transform: translateY(var(--flow-incta-y));
  }

  /* ======================================================================
     📰 Event 実制御
     ====================================================================== */

  /* 🌹 SPは写真を縦積み */
  .p-event__figures {
    flex-direction: column;
    gap: 16px; /* 好みで調整 */
  }

  /* ======================================================================
     📰 Archive / Single
     ====================================================================== */

  .p-archive__cat {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* ======================================================================
     ⚒️ Utilities
     ====================================================================== */

  br.sp_only {
    display: inline;
  }
  br.pc_only {
    display: none;
  }

  /* ======================================================================
     ✅ SP構造変更（明示的な構造変化のみ）
     ====================================================================== */

  .l-footer__row--top {
    flex-direction: column;
  }

  .l-footer__col--links,
  .l-footer__col--map {
    flex: 0 0 auto;
    width: 100%;
  }

  .l-footer__col--map {
    padding-left: 0;
  }
}