@charset "UTF-8";
/* ==========================================================================
   BDC PILATES 指導資格取得プログラム(BIP) LP
   ---- WordPress（共通テーマ）組み込み版 ----
   静的版との違いは、リセットを :where(#bip-lp) の中に限定し、
   body { } を #bip-lp { } に変えている点だけです。
   ========================================================================== */

/* ==========================================================================
   BDC PILATES 指導資格取得プログラム(BIP) LP
   Figma: BDC_LP / LP_PC (1600 x 7799)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（Figmaの変数をCSS変数として定義）
   CSS変数 = 色などの値に名前を付けて使い回す仕組み。
   var(--color-gold) のように呼び出す。1か所直せば全部に反映される。
   -------------------------------------------------------------------------- */
:root {
  /* 色 */
  --color-white: #ffffff;
  --color-gold: #b37e3b;          /* ブランドカラー（ゴールド） */
  --color-gold-90: rgba(179, 126, 59, 0.9); /* KVの帯（不透明度90%） */
  --color-gray-600: #666666;
  --color-gray-800: #333333;
  --color-bg: #ffffff;

  /* フォント */
  --font-en: "Poppins", sans-serif;              /* 英字用 */
  --font-jp: "Noto Sans JP", sans-serif;         /* 和文用 */

  /* レイアウト */
  --design-width: 1600px;  /* Figmaのアートボード幅 */
  --content-width: 1200px; /* コンテンツの最大幅 */

  /* 共通ヘッダー（bdcpilates.com）とぶつからないための位置
     PC: ロゴ(上20〜63px)とボタン(上10〜68px)より下 */
  --site-header-h: 80px;   /* 共通ヘッダーが占める高さ */
  --lp-btn-top: 100px;     /* LPのハンバーガーボタンの上位置 */
}

/* --------------------------------------------------------------------------
   2. リセット（ブラウザ標準のズレを消す）
   -------------------------------------------------------------------------- */
/* ※WordPress版では、共通テーマのヘッダー/フッターを壊さないよう、
   リセットを #bip-lp（LPの囲み）の中だけに限定しています。
   :where() を使っているのは「詳細度を上げない」ため。 */
:where(#bip-lp),
:where(#bip-lp) *,
:where(#bip-lp) *::before,
:where(#bip-lp) *::after {
  box-sizing: border-box; /* 幅の計算にpaddingとborderを含める */
}

:where(#bip-lp) :is(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
  padding: 0;
}

:where(#bip-lp) :is(ul, ol) {
  list-style: none;
}

:where(#bip-lp) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(#bip-lp) a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. ベース
   -------------------------------------------------------------------------- */
html {
  /* ページ内リンクで飛んだときに上に余白を作る */
  scroll-behavior: smooth;
}

/* ※WordPress版では body ではなく #bip-lp に当てています。 */
#bip-lp {
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--color-gray-800);
  background-color: var(--color-bg);
  line-height: 1.5;
  /* 文字の縁を滑らかに */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* コンテンツの共通ラッパー（左右200pxの余白＝1200px幅） */
.l-inner {
  width: min(var(--content-width), calc(100% - 80px));
  margin-inline: auto; /* 左右中央寄せ */
}

/* --------------------------------------------------------------------------
   4. KV（ファーストビュー）
   -------------------------------------------------------------------------- */
.p-kv {
  position: relative;
  height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 背景写真 */
.p-kv__bg {
  position: absolute;
  inset: 0; /* top/right/bottom/left をすべて0にする省略記法 */
  z-index: 0;
}

/* 写真は2枚重ねる（Figmaで2レイヤー重なっているため） */
.p-kv__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を保ったまま領域いっぱいに敷き詰める */
  object-position: center;
}

/* ゴールドの帯（テキストブロック） */
.p-kv__box {
  position: relative;
  z-index: 1;
  width: 605px;
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background-color: var(--color-gold-90);
  color: var(--color-white);
  word-break: break-word;
}

.p-kv__titles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-kv__brand {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 72px;
  line-height: 1;
  letter-spacing: 0;
}

.p-kv__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}

.p-kv__title-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}

.p-kv__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. 共通の見出しパーツ
   -------------------------------------------------------------------------- */

/* セクション見出し（ゴールド・40px）例：− 本質的な美しさと健康の追求 − */
.c-heading-section,
.c-heading-lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 4px;
  color: var(--color-gold);
  text-align: center;
  white-space: nowrap; /* デザイン通り1行で表示する */
}

/* 前後の「−」だけ細いウェイトにする */
.c-heading-section__mark {
  font-weight: 400;
}

/* サブ見出し（下にゴールドの太線）例：BDC PILATES 指導資格取得プログラム(BIP)とは */
.c-heading-sub {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 4px solid var(--color-gold);
}

.c-heading-sub h3 {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 3.2px;
  color: var(--color-gray-800);
  text-align: center;
}


/* --------------------------------------------------------------------------
   5.5 次回開催予定 / Figma: PC 12793:382 / SP 12795:155
   -------------------------------------------------------------------------- */
.p-upcoming {
  padding-bottom: 100px;
}

.p-upcoming .c-heading-section {
  padding: 100px 0 64px;
}

/* 早期申込割引の枠 */
.p-upcoming__discount {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 16px;
  background-color: var(--color-white);
  border: 4px solid #e8bb83;
  text-align: center;
}

.p-upcoming__discount-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold);
}

.p-upcoming__discount-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-gray-800);
}

/* コースごとの開催日 */
.p-upcoming__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.p-upcoming__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px 20px 24px;
}

.p-upcoming__item--01 { background-color: #f8f4ee; }
.p-upcoming__item--02 { background-color: #f5f4e8; }
.p-upcoming__item--03 { background-color: #e9eeec; }

.p-upcoming__num {
  flex-shrink: 0;
  width: 48px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  filter: drop-shadow(4px 4px 2px rgba(120, 82, 34, 0.16));
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--color-gray-600);
}

.p-upcoming__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.p-upcoming__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.p-upcoming__item--01 .p-upcoming__name { color: #c28538; }
.p-upcoming__item--02 .p-upcoming__name { color: #978e2c; }
.p-upcoming__item--03 .p-upcoming__name { color: #57a38c; }

.p-upcoming__date {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-gray-800);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. コンセプト（「資格を持つ人」ではなく…）
   -------------------------------------------------------------------------- */
.p-concept {
  position: relative;
  padding: 100px 0;
  background-color: var(--color-white);
  overflow: hidden;
}

/* 背景の模様（不透明度60%で薄く敷く） */
.p-concept__bg {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none; /* クリックを透過させる */
}

/* <picture> を挟んでいるので、こちらにも高さを持たせる */
.p-concept__bg picture,
.p-courses__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.p-concept__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-concept__inner {
  position: relative;
  z-index: 1;
  width: min(var(--content-width), calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-heading-lead {
  padding-bottom: 64px;
}

/* 本文ブロック（幅920pxで中央寄せ） */
.p-concept__text {
  width: 920px;
  max-width: 100%;
  padding-bottom: 48px;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  text-align: center;
  color: var(--color-gray-800);
}

.p-concept__text p + p {
  margin-top: 16px;
}

/* 最後の本文ブロックは下余白なし */
.p-concept__inner > .p-concept__text:last-child {
  padding-bottom: 0;
}

/* 3つの力（ボックス＋アイコン） */
.p-concept__skills {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 48px;
}

.p-concept__skill {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 33px 16px 40px;
  background-color: var(--color-white);
  border: 2px solid var(--color-gold);
  text-align: center;
}

.p-concept__skill-sub {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-gray-800);
}

.p-concept__skill-main {
  display: block;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-gold);
}

.p-concept__plus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.p-concept__plus img {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   7. BIPとは（− 本質的な美しさと健康の追求 −）
   -------------------------------------------------------------------------- */
.p-about__inner {
  width: min(var(--content-width), calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-about .c-heading-section {
  padding-top: 100px;
  padding-bottom: 64px;
}

.p-about .c-heading-sub {
  margin-bottom: 48px;
}

.p-about__text {
  width: 100%;
  padding-bottom: 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: var(--color-gray-800);
}

.p-about__text p + p {
  margin-top: 16px;
}

/* 写真3枚 */
.p-about__photos {
  display: flex;
  gap: 48px;
  padding-bottom: 100px;
}

.p-about__photos li {
  flex-shrink: 0;
  width: 368px;
  height: 245px;
}

.p-about__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. 4つのコース（− BIPには4つのコースがあります −）
   -------------------------------------------------------------------------- */
.p-courses {
  position: relative;
  padding: 100px 0;
  background-color: #f5ffe1;
  overflow: hidden;
}

.p-courses__bg {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.p-courses__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-courses__inner {
  position: relative;
  z-index: 1;
  width: min(var(--content-width), calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-courses .c-heading-section {
  padding-bottom: 64px;
}

.p-courses__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.p-courses__card {
  /* drop-shadow はぼかし付きの影。要素の形に沿って落ちる */
  filter: drop-shadow(4px 4px 2px rgba(179, 126, 59, 0.08));
}

/* --- カード上部のカラーバー --- */
.p-courses__head {
  position: relative;
  width: 100%;
}

.p-courses__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 16px 24px 80px;
}

/* コースごとのバーの色 */
.p-courses__bar--01 { background-color: #ca9149; }
.p-courses__bar--02 { background-color: #ada442; }
.p-courses__bar--03 { background-color: #71b39f; }
.p-courses__bar--04 {
  background-color: #888ab8;
  padding: 16px 16px 16px 72px;
}

.p-courses__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

/* コース4はタイトルが長いので文字間を詰める */
.p-courses__name--tight {
  letter-spacing: -1.2px;
}

.p-courses__badge {
  flex-shrink: 0;
  padding: 10px 12px;
  background-color: var(--color-white);
  color: var(--color-gold);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* 左上に浮かぶ番号 */
.p-courses__num {
  position: absolute;
  top: -8px;
  left: 16px;
  width: 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  filter: drop-shadow(4px 4px 2px rgba(179, 126, 59, 0.16));
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--color-gray-600);
}

/* --- カード本体 ---
   HTML上は写真も info の中（説明文の下）にあるが、
   PCでは絶対配置で右側に出す。SPではそのまま説明文の下に表示される。 */
.p-courses__body {
  position: relative;
  padding: 32px 32px 40px;
  background-color: var(--color-white);
}

/* 2〜4枚目は写真の高さ(306px)ぶんを確保する */
.p-courses__card:not(:first-child) .p-courses__body {
  min-height: 378px;
}

.p-courses__info {
  width: calc(100% - 568px); /* 写真544px + 余白24px */
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.p-courses__catch {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold);
}

.p-courses__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: var(--color-gray-800);
}

.p-courses__price {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: var(--color-gray-800);
}

.p-courses__notes {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-800);
}

.p-courses__notes p + p {
  margin-top: 8px;
}

.p-courses__photo {
  position: absolute;
  top: 32px;
  right: 32px;
  bottom: 40px;
  width: 544px;
  overflow: hidden;
}

/* 画像は絶対配置にして、枠の高さに影響を与えないようにする */
.p-courses__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 矢印付きテキストリンク（共通パーツ） */
.c-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.c-link-arrow:hover {
  opacity: 0.7;
}

.c-link-arrow img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


/* 「コースの詳細はこちら」ボタン / Figma: 12793:226 ほか */
.p-courses__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 24px;
  border-radius: 2px;
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.16));
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.p-courses__btn:hover {
  opacity: 0.8;
}

/* 矢印はスケジュール欄と同じ icon-arrow-right-02.svg。
   元がゴールドなので、filter で白く反転させて使う。 */
.p-courses__btn img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* ボタンの色はコースごとのカラーバーに合わせる */
.p-courses__card:nth-child(1) .p-courses__btn { background-color: #ca9149; }
.p-courses__card:nth-child(2) .p-courses__btn { background-color: #ada442; }
.p-courses__card:nth-child(3) .p-courses__btn { background-color: #71b39f; }
.p-courses__card:nth-child(4) .p-courses__btn { background-color: #888ab8; }

/* --------------------------------------------------------------------------
   9. BIP 概要
   -------------------------------------------------------------------------- */
.p-outline {
  background-color: var(--color-white);
  padding-top: 100px;

  /* 選択中のタブに合わせて、下線・背景・見出しセルの色が切り替わる。
     data-active の値はJSが書き換える。 */
  --outline-accent: #ca9149; /* タブ下線 */
  --outline-bg: #f8f4ee;     /* パネル背景 */
  --outline-label: #f2d9bb;  /* 表の見出しセル */
}

.p-outline[data-active="02"] {
  --outline-accent: #ada442;
  --outline-bg: #f5f4e8;
  --outline-label: #e9e4a7;
}

.p-outline[data-active="03"] {
  --outline-accent: #71b39f;
  --outline-bg: #e9eeec;
  --outline-label: #c3e6dc;
}

.p-outline > .c-heading-section {
  padding-bottom: 64px;
}

/* --- コース切り替えタブ --- */
.p-outline__tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 4px solid var(--outline-accent);
}

.p-outline__tab-list {
  width: min(var(--content-width), calc(100% - 80px));
  display: flex;
  align-items: center;
  gap: 18px;
}

.p-outline__tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.p-outline__tab:hover {
  opacity: 0.85;
}

/* 選択中のタブは高さが大きくなる */
.p-outline__tab.is-active {
  padding-block: 36px;
  gap: 12px;
}

.p-outline__tab--01 { background-color: #ca9149; }
.p-outline__tab--02 { background-color: #ada442; }
.p-outline__tab--03 { background-color: #71b39f; }

.p-outline__tab-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  filter: drop-shadow(4px 4px 2px rgba(179, 126, 59, 0.16));
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--color-gray-600);
}

.p-outline__tab-label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

/* --- タブの中身 --- */
.p-outline__body {
  background-color: var(--outline-bg);
  padding: 64px 0 100px;
}

.p-outline__panel {
  width: min(var(--content-width), calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 非表示のパネル（タブ切り替え用） */
.p-outline__panel:not(.is-active) {
  display: none;
}

/* タイトル行（左：タイトル ／ 右：コースの詳細ボタン） */
.p-outline__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 64px;
}

.p-outline__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gray-800);
  text-align: left;
}

/* 「コースの詳細はこちら」ボタン（色は選択中のタブに追従） */
.p-outline__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 24px;
  border-radius: 2px;
  background-color: var(--outline-accent);
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.16));
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.p-outline__btn:hover {
  opacity: 0.8;
}

.p-outline__btn img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.p-outline__cols {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 40px;
}

.p-outline__cols > * {
  flex: 1 0 0;
  min-width: 0;
}

/* 「■ 時間数」はコースごとのアクセントカラー */
.p-outline__hours-title {
  padding-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--outline-accent);
}

/* --- スペック表（共通パーツ） --- */
.c-spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-spec__row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.c-spec dt {
  flex-shrink: 0;
  width: 238px;
  display: flex;
  align-items: center;
  padding: 24px 16px 24px 24px;
  background-color: var(--outline-label, #f2d9bb);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-gray-800);
}

/* 見出しセル内の小さい注釈（例：クラス見学（オンライン）） */
.c-spec__sub {
  font-size: 16px;
}

/* 箇条書きが入る値セル（参加条件など）。
   通常の値セルより左右の余白が狭く、文字を折り返さずに収める。 */
.c-spec dd.c-spec__list {
  padding-inline: 8px;
}

.c-spec__list p + p {
  margin-top: 16px;
}

.c-spec dd {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 24px 16px 24px 24px;
  background-color: var(--color-white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-gray-800);
}

/* --- 補足 --- */
.p-outline__note {
  width: 100%;
  padding: 40px 32px;
  background-color: var(--color-white);
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  color: var(--color-gray-800);
}

.p-outline__note p + p {
  margin-top: 16px;
}

.p-outline__note a {
  text-decoration: underline;
}

/* 「合計：〜」の強調（Figma: 太字＋ゴールド） */
.p-outline__note strong {
  font-weight: 700;
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   10. 次期開催スケジュール
   -------------------------------------------------------------------------- */
.p-schedule__inner {
  width: min(var(--content-width), calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-schedule .c-heading-section {
  padding-top: 100px;
  padding-bottom: 64px;
}

.p-schedule__card {
  position: relative; /* 「コースの詳細はこちら」ボタンの位置の基準 */
  width: 100%;
  margin-bottom: 40px;
}

.p-schedule__card:last-child {
  margin-bottom: 100px;
}

/* --- カード上部のカラーバー --- */
.p-schedule__head {
  position: relative;
  width: 100%;
}

.p-schedule__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* ボタン(52px)＋上下余白16pxぶんの高さを確保する */
  min-height: 84px;
  padding-left: 80px;
  padding-right: 16px;
}

.p-schedule__card--01 .p-schedule__bar { background-color: #ca9149; }
.p-schedule__card--02 .p-schedule__bar { background-color: #ada442; }
.p-schedule__card--03 .p-schedule__bar { background-color: #71b39f; }

.p-schedule__name {
  align-self: center;
  padding-block: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

/* 「コースの詳細はこちら」ボタン
   HTML上は本体(body)の先頭にあるが、PCでは絶対配置でカラーバーの中に置く。
   SPではそのまま本体の先頭に表示される。 */
.p-schedule__btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 20px;
  background-color: var(--color-white);
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.16));
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold);
  transition: opacity 0.2s ease;
}

.p-schedule__btn:hover {
  opacity: 0.75;
}

.p-schedule__btn img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.p-schedule__num {
  position: absolute;
  top: -8px;
  left: 16px;
  width: 48px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  filter: drop-shadow(4px 4px 2px rgba(120, 82, 34, 0.16));
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--color-gray-600);
}

/* --- カード本体 --- */
.p-schedule__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px 32px 40px;
}

.p-schedule__card--01 .p-schedule__body { background-color: #f8f4ee; }
.p-schedule__card--02 .p-schedule__body { background-color: #f5f4e8; }
.p-schedule__card--03 .p-schedule__body { background-color: #e9eeec; }

.p-schedule__row {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* 日程が複数ある場合、行の間に区切り線を入れる */
.p-schedule__row:not(:last-child) {
  padding-bottom: 40px;
  border-bottom: 1px solid #dfd3c5;
}

.p-schedule__date {
  flex-shrink: 0;
  padding: 32px 40px;
  background-color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.p-schedule__card--01 .p-schedule__date { color: #ae732a; }
.p-schedule__card--02 .p-schedule__date { color: #948b2d; }
.p-schedule__card--03 .p-schedule__date { color: #5bab93; }

.p-schedule__detail {
  flex: 1 0 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: var(--color-gray-800);
}


/* --------------------------------------------------------------------------
   10.5 マスターインストラクターからのメッセージ
   Figma: PC 12788:23 / SP 12788:97
   -------------------------------------------------------------------------- */
.p-message {
  display: flex;
  justify-content: center;
  padding: 100px 40px;
  background-color: #f8f4ee;
}

.p-message__inner {
  width: min(var(--content-width), 100%);
  padding: 64px 80px 80px;
  background-color: var(--color-white);
}

.p-message__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-bottom: 40px;
  text-align: center;
}

.p-message__title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gray-800);
}

.p-message__title-en {
  font-family: var(--font-en);
  font-weight: 600;
}

.p-message__sub {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--color-gold);
}

.p-message__body {
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  color: var(--color-gray-800);
}

.p-message__body p + p {
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   10.6 コースの詳細（資料ボタン一覧）
   Figma: PC 12788:111 / SP 12788:467
   -------------------------------------------------------------------------- */
.p-detail {
  padding-bottom: 100px;
}

.p-detail .c-heading-section {
  padding: 100px 0 24px;
}

.p-detail__lead {
  padding-bottom: 64px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.8px;
  color: var(--color-gray-800);
  text-align: center;
}

.p-detail__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 40px;
}

.p-detail__item {
  display: flex;
}

.p-detail__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 16px 16px;
  border-radius: 2px;
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.16));
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

a.p-detail__btn:hover {
  opacity: 0.85;
}

/* このセクションの矢印だけ、Figma通り32pxで表示する */
.p-detail__btn img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.p-detail__label {
  display: flex;
  align-items: center;
  gap: 16px;
}

.p-detail__num {
  flex-shrink: 0;
  width: 48px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  filter: drop-shadow(4px 4px 2px rgba(120, 82, 34, 0.16));
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--color-gray-600);
}

.p-detail__names {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-detail__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.p-detail__note {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.p-detail__btn--01 { background-color: #ca9149; }
.p-detail__btn--02 { background-color: #ada442; }
.p-detail__btn--03 { background-color: #71b39f; }

/* 4はまだ開講前のため、リンクにせずグレーで表示する */
.p-detail__btn--04 {
  background-color: #c1c2ce;
  filter: none;
}

.p-detail__btn--04 .p-detail__num {
  filter: drop-shadow(4px 4px 2px #bfbfc9);
}

/* --------------------------------------------------------------------------
   11. フッター
   -------------------------------------------------------------------------- */
.l-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 40px;
  background-color: var(--color-gold);
}

/* SNSアイコン（Figmaの間隔に合わせて16px空ける） */
.l-footer__sns {
  display: flex;
  align-items: center;
  gap: 16px;
}

.l-footer__sns a {
  display: block;
  transition: opacity 0.2s ease;
}

.l-footer__sns a:hover {
  opacity: 0.7;
}

.l-footer__sns img {
  display: block;
}

.l-footer__copyright {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. 文字ボックスの余白トリミング

   Figmaは行間(line-height)による文字の上下の余白を自動でカットして
   レイアウトしています。CSSの text-box プロパティで同じ挙動を再現します。
   これを入れるとFigmaと余白がぴったり一致します。

   対応ブラウザ：Chrome 133+ / Safari 18.4+
   未対応のブラウザでは適用されず、余白がわずかに広くなるだけで崩れません。
   もし不要であれば、この @supports ブロックごと削除してください。
   -------------------------------------------------------------------------- */
@supports (text-box: trim-both cap alphabetic) {
  .p-kv__brand,
  .p-kv__lead,
  .p-concept__text,
  .p-concept__skill p,
  .p-about__text,
  .p-courses__num,
  .p-courses__name,
  .p-courses__badge,
  .p-courses__desc,
  .p-courses__price,
  .p-courses__notes,
  .p-outline__tab-num,
  .p-outline__tab-label,
  .p-outline__hours-title,
  .p-outline__note,
  .c-spec dt span,
  .c-spec dd span,
  .p-schedule__num,
  .p-schedule__name,
  .p-schedule__detail,
  .p-upcoming__discount-title,
  .p-upcoming__discount-text,
  .p-upcoming__num,
  .p-upcoming__name,
  .p-upcoming__date,
  .p-courses__btn,
  .p-outline__btn,
  .p-detail__num,
  .p-detail__name,
  .p-detail__note,
  .p-message__body {
    text-box: trim-both cap alphabetic;
  }
}






/* --------------------------------------------------------------------------
   12.5 ハンバーガーメニュー
   Figma: PC 12732:30 / 12720:303、SP 12731:9 / 12723:1035
   ボタンは position: fixed で画面に追従する。
   -------------------------------------------------------------------------- */

/* --- ボタン（3本線 ⇄ ×） --- */
.l-hamburger {
  position: fixed;
  /* 共通ヘッダーの下に置く。z-indexも共通ヘッダー(1002〜1005)より下にして、
     共通ヘッダーが必ず手前に来るようにしている */
  top: var(--lp-btn-top);
  right: 24px;
  z-index: 90;
  padding: 16px 12px;
  background-color: rgba(88, 56, 16, 0.9);
  border: 0;
  cursor: pointer;
  appearance: none;
}

.l-hamburger__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 32px;
}

.l-hamburger__bars span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* 開いているときは×印になる（1本目と3本目を中央へ寄せて回転） */
.l-hamburger[aria-expanded="true"] .l-hamburger__bars span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.l-hamburger[aria-expanded="true"] .l-hamburger__bars span:nth-child(2) {
  opacity: 0;
}

.l-hamburger[aria-expanded="true"] .l-hamburger__bars span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* --- メニュー本体 --- */
.l-menu {
  position: fixed;
  /* PCは画面の上端から表示して、共通ヘッダーの高さぶんも背景色で覆う。
     中身の位置は変えたくないので、その分は .l-menu__inner の上余白で戻す。 */
  top: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: calc(982px + var(--site-header-h));
  /* 画面が低いときははみ出さずにスクロール */
  max-height: 100dvh;
  overflow-y: auto;
  background-color: rgba(88, 56, 16, 0.9);
  color: var(--color-white);

  /* 閉じているとき */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.l-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.l-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  /* 上余白 = デザインの80px + 共通ヘッダーの高さ */
  padding: calc(80px + var(--site-header-h)) 20px 80px;
}

/* --- ロゴ --- */
.l-menu__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  white-space: nowrap;
}

.l-menu__logo-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.l-menu__brand {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 47px;
  line-height: 1;
}

.l-menu__title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}

.l-menu__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

/* --- メニュー項目 --- */
.l-menu__list {
  width: 780px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.l-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px 24px;
  border-bottom: 1px solid var(--color-gold);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

/* 1つ目だけ上にも線を引く */
.l-menu__list li:first-child a {
  padding-top: 24px;
  border-top: 1px solid var(--color-gold);
}

.l-menu__list a:hover {
  opacity: 0.7;
}

.l-menu__list img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- SNS --- */
.l-menu__sns {
  display: flex;
  align-items: center;
  gap: 16px;
}

.l-menu__sns a {
  display: block;
  transition: opacity 0.2s ease;
}

.l-menu__sns a:hover {
  opacity: 0.7;
}

.l-menu__sns img {
  display: block;
}

/* --- CLOSE --- */
.l-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.l-menu__close:hover {
  opacity: 0.7;
}

.l-menu__close img {
  width: 24px;
  height: 24px;
}

/* メニューを開いている間は背面のページをスクロールさせない */
body.is-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   13. ユーティリティ（PC / SP で表示を切り替える）
   -------------------------------------------------------------------------- */

/* SP専用の改行。PCでは表示しない */
.u-sp {
  display: none;
}

/* --------------------------------------------------------------------------
   15. PCの中間幅（769px〜）の調整

   PCレイアウトのまま画面幅を縮めたときに、要素がはみ出したり
   片側だけ極端に狭くなったりするのを防ぐための指定です。

   ※すべて min-width: 769px の中に書いてあるので、
     スマホ（768px以下）のレイアウトには一切影響しません。
   -------------------------------------------------------------------------- */

/* ===== 15-1. 全PC幅で効く「幅の流動化」 ===== */
@media (min-width: 769px) {

  /* --- BIPとは：写真3枚を画面幅に合わせて縮める ---
     1280px以上では今までどおり368pxのまま。それ以下で比例して小さくなる。 */
  .p-about__photos {
    width: 100%;
    justify-content: center;
  }

  .p-about__photos li {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 368px;
    height: auto;
    aspect-ratio: 368 / 245; /* 縦横比を保つ */
  }

  /* --- 4つのコース：先に写真が縮み、文章の幅はできるだけ保つ ---
     文章側を「568px または本文幅の60%の小さいほう」で確保し、
     残りを写真に割り当てる。写真のほうが先に縮んでいく。 */
  .p-courses__body {
    /* 本文の幅 = min(1136px, 画面幅 - 左右余白) */
    --content-w: min(1136px, calc(100vw - 144px));
    --info-w: min(568px, calc(var(--content-w) * 0.6));
  }

  .p-courses__info {
    width: var(--info-w);
  }

  .p-courses__photo {
    left: calc(32px + var(--info-w) + 24px);
    right: 32px;
    width: auto; /* 左右の位置から自動で決まる */
  }

  /* --- KV：英語サブタイトルがゴールドの帯からはみ出すのを防ぐ --- */
  .p-kv__title-en {
    font-size: 21px;
  }
}

/* ===== 15-2. 見出しが1行に収まらなくなる幅（1285px以下） ===== */
@media (min-width: 769px) and (max-width: 1285px) {

  /* 1行固定をやめて折り返しを許可する（はみ出し防止） */
  .c-heading-section,
  .c-heading-lead {
    white-space: normal;
    line-height: 1.4;
  }

  .c-heading-sub h3,
  .p-outline__title,
  .p-outline__tab-label,
  .p-courses__name,
  .p-courses__catch,
  .p-schedule__name {
    line-height: 1.4;
  }
}

/* ===== 15-3. 横並びが窮屈になる幅（1080px以下） ===== */
@media (min-width: 769px) and (max-width: 1080px) {

  /* --- BIP概要：表を縦積みにして読みやすくする --- */
  .p-outline__cols {
    flex-direction: column;
    gap: 32px;
  }

  .p-outline__cols > * {
    flex: none;
    width: 100%;
  }

  /* --- コンセプト：3つの力を縦積みに --- */
  .p-concept__skills {
    flex-direction: column;
    gap: 16px;
  }

  .p-concept__skill {
    width: 100%;
    flex: none;
  }

  .p-concept__plus {
    align-self: center;
  }

  /* --- 4つのコース：写真が小さくなりすぎるので、文章の下に回す --- */
  .p-courses__body {
    padding: 32px 32px 40px;
  }

  .p-courses__card:not(:first-child) .p-courses__body {
    min-height: 0;
  }

  .p-courses__info {
    width: 100%;
  }

  .p-courses__photo {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    aspect-ratio: 544 / 306;
  }

  /* --- スケジュール：見出しが「コースの詳細はこちら」ボタンに重ならないように --- */
  .p-schedule__bar {
    padding-right: 280px;
  }

  /* --- 次回開催予定：コース名と日付が入りきらないので縦積みにする --- */
  .p-upcoming__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .p-upcoming__item {
    padding: 20px 24px;
  }

  /* --- BIP概要：タイトルとボタンを縦積みにする --- */
  .p-outline__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* --- コースの詳細：ボタンを1列にする --- */
  .p-detail__list {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  /* --- メッセージ：内側の余白を詰める --- */
  .p-message__inner {
    padding: 48px 40px 56px;
  }
}

/* --------------------------------------------------------------------------
   14. スマートフォン（767px以下）
   Figma: BDC_LP / LP_SP (390 x 9092)

   【端末幅で崩れないようにする仕組み】
   SPの文字サイズ・余白・幅は、すべて --u という単位を掛けて指定しています。

     --u = 画面幅 ÷ 390（ただし最大1px）

   ・画面幅が390px以上 … --u = 1px なのでデザインと同じピクセル数
   ・画面幅が390px未満 … 画面幅に比例して全部が同じ割合で縮む

   文字も余白も同じ割合で縮むので、iPhone SE(375px)のような
   狭い端末でも「文字だけあふれて1文字が改行される」ことが起きません。

   例）font-size: calc(32 * var(--u)) → 390pxでは32px、375pxでは約30.8px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  :root {
    --u: min(calc(100vw / 390), 1px);

    /* SPの共通ヘッダーは高さ50pxの黒帯（position: fixed） */
    --site-header-h: 50px;
    --lp-btn-top: 58px;
  }

  /* --- 改行の切り替え --- */
  .u-sp { display: inline; }
  .u-pc { display: none; }

  /* --- 共通の見出し --- */
  .c-heading-section,
  .c-heading-lead {
    font-size: calc(30 * var(--u));
    line-height: 1.5;
    letter-spacing: calc(3 * var(--u));
    white-space: normal; /* SPは2行以上になるため折り返しを許可 */
  }

  /* SPでは見出しの前後の「−」を表示しない */
  .c-heading-section__mark {
    display: none;
  }

  .c-heading-sub {
    justify-content: flex-start;
    padding-bottom: calc(16 * var(--u));
    border-bottom-width: 2px;
  }

  .c-heading-sub h3 {
    width: 100%;
    font-size: calc(24 * var(--u));
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
  }

  /* 矢印付きリンク（共通） */
  .c-link-arrow {
    font-size: calc(16 * var(--u));
    gap: calc(8 * var(--u));
  }

  .c-link-arrow img {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }

  /* --- KV --- */
  .p-kv {
    display: block;
    height: auto;
  }

  /* SPでは写真とゴールドの帯が上下に並ぶ */
  .p-kv__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: calc(403 * var(--u));
  }

  /* 人物が中央に来るように表示位置を調整（数値は微調整可） */
  .p-kv__bg img {
    object-position: 45% center;
  }

  .p-kv__box {
    width: 100%;
    padding: calc(40 * var(--u)) calc(15 * var(--u));
    gap: calc(24 * var(--u));
  }

  .p-kv__titles {
    gap: calc(16 * var(--u));
  }

  .p-kv__brand { font-size: calc(56 * var(--u)); }
  .p-kv__title { font-size: calc(32 * var(--u)); }

  /* 英語サブタイトルは1行で収める。
     デザイン(18px)だと枠との余白が2pxしかなく、端末のフォント描画の
     誤差で「Program」だけ改行されることがあるため、5%小さくして
     どの端末でも必ず1行に収まるようにしている。 */
  .p-kv__title-en {
    font-size: calc(17.1 * var(--u));
    letter-spacing: calc(-0.171 * var(--u));
    white-space: nowrap;
  }

  .p-kv__lead { font-size: calc(16 * var(--u)); }

  /* --- コンセプト --- */
  .p-concept {
    padding: calc(60 * var(--u)) 0;
  }

  .p-concept__inner {
    width: calc(100% - 30 * var(--u));
  }

  .c-heading-lead {
    padding-bottom: calc(40 * var(--u));
  }

  .p-concept__text {
    width: 100%;
    padding-bottom: calc(40 * var(--u));
    font-size: calc(16 * var(--u));
    font-weight: 400;  /* SPは細めのウェイト */
    text-align: left;  /* SPは左揃え */
  }

  .p-concept__text p + p {
    margin-top: calc(16 * var(--u));
  }

  /* 3つの力：縦に積む */
  .p-concept__skills {
    flex-direction: column;
    gap: calc(8 * var(--u));
    padding-bottom: calc(40 * var(--u));
  }

  .p-concept__skill {
    width: 100%;
    padding: calc(24 * var(--u)) calc(16 * var(--u));
  }

  /* SPでは「身体を」と「見る力」が同じ行に並ぶ */
  .p-concept__skill-sub {
    display: inline;
    font-size: calc(16 * var(--u));
    line-height: 1.5;
  }

  .p-concept__skill-main {
    display: inline;
    font-size: calc(20 * var(--u));
    line-height: 1.5;
  }

  .p-concept__plus {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
  }

  /* --- BIPとは --- */
  .p-about__inner {
    width: calc(100% - 30 * var(--u));
  }

  .p-about .c-heading-section {
    padding-top: calc(60 * var(--u));
    padding-bottom: calc(40 * var(--u));
  }

  .p-about .c-heading-sub {
    margin-bottom: calc(32 * var(--u));
  }

  .p-about__text {
    padding-bottom: calc(40 * var(--u));
    font-size: calc(16 * var(--u));
  }

  .p-about__text p + p {
    margin-top: calc(16 * var(--u));
  }

  /* 写真3枚：縦に積む */
  .p-about__photos {
    flex-direction: column;
    gap: calc(24 * var(--u));
    padding-bottom: calc(60 * var(--u));
    width: 100%;
  }

  .p-about__photos li {
    width: 100%;
    height: auto;
    aspect-ratio: 736 / 490; /* 画像の縦横比を保つ */
  }

  /* --- 4つのコース --- */
  .p-courses {
    padding: calc(60 * var(--u)) 0;
  }

  .p-courses__inner {
    width: calc(100% - 32 * var(--u));
  }

  .p-courses .c-heading-section {
    padding-bottom: calc(40 * var(--u));
  }

  .p-courses__list {
    gap: calc(24 * var(--u));
  }

  .p-courses__bar,
  .p-courses__bar--04 {
    padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(56 * var(--u));
    gap: calc(8 * var(--u));
  }

  .p-courses__name {
    font-size: calc(20 * var(--u));
    line-height: 1.25;
  }

  .p-courses__name--tight {
    letter-spacing: calc(-1 * var(--u));
  }

  .p-courses__badge {
    padding: calc(12 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.25;
  }

  /* 4枚目のバッジ（2027年 開講予定）だけ高さ固定 */
  .p-courses__card:last-child .p-courses__badge {
    height: calc(56 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(10 * var(--u)) calc(8 * var(--u));
    line-height: 1;
  }

  .p-courses__num {
    top: calc(16 * var(--u));
    left: calc(-8 * var(--u));
    width: calc(48 * var(--u));
    height: calc(56 * var(--u));
    font-size: calc(32 * var(--u));
  }

  /* SPでは写真を出さず、テキストのみ縦に並べる */
  .p-courses__body {
    flex-direction: column;
    gap: calc(20 * var(--u));
    padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u));
  }

  .p-courses__info {
    width: 100%;
    gap: calc(20 * var(--u));
  }

  /* SPは説明文の下に、横幅いっぱいで表示する
     （中の画像は絶対配置なので、relative にして枠内に収める） */
  .p-courses__photo {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    aspect-ratio: 544 / 306;
  }

  .p-courses__catch {
    font-size: calc(18 * var(--u));
  }

  /* 4枚目だけ見出しが長く2行になる */
  .p-courses__card:last-child .p-courses__catch {
    line-height: 1.5;
  }

  .p-courses__desc  { font-size: calc(14 * var(--u)); }
  .p-courses__price { font-size: calc(16 * var(--u)); }
  .p-courses__notes { font-size: calc(14 * var(--u)); }

  .p-courses__notes p + p {
    margin-top: calc(8 * var(--u));
  }

  /* --- BIP 概要 --- */
  .p-outline {
    padding-top: calc(60 * var(--u));
  }

  .p-outline > .c-heading-section {
    padding-bottom: calc(40 * var(--u));
    line-height: 1; /* 「BIP 概要」は1行のみのため詰める */
  }

  /* タブ：3つを画面幅ぴったりに収める。
     幅の比率はFigma（160 : 128 : 159）を維持し、文字サイズで調整する。 */
  .p-outline__tabs {
    justify-content: flex-start;
  }

  .p-outline__tab-list {
    width: 100%;
    gap: calc(4 * var(--u));
    align-items: center; /* 高さの基準をそろえる */
  }

  .p-outline__tab {
    flex: 160 1 0;
    min-width: 0;
    height: calc(72 * var(--u));   /* 非選択タブの高さ（左右で揃える） */
    gap: 0;
    padding: 0 calc(6 * var(--u));
    justify-content: center;
    text-align: center;
  }

  .p-outline__tab--02 {
    flex: 128 1 0;
    width: auto; /* PC用の固定幅を打ち消す */
  }

  .p-outline__tab--03 {
    flex: 159 1 0;
  }

  .p-outline__tab.is-active {
    height: calc(80 * var(--u)); /* 選択中のタブだけ少し高い */
    padding-block: 0;
  }

  /* SPのタブには番号を表示しない */
  .p-outline__tab-num {
    display: none;
  }

  .p-outline__tab-label {
    font-size: calc(13 * var(--u));
    line-height: 1.25;
  }

  .p-outline__body {
    padding: calc(32 * var(--u)) 0 calc(60 * var(--u));
  }

  .p-outline__panel {
    width: calc(100% - 30 * var(--u));
  }

  .p-outline__title {
    padding-bottom: calc(32 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: 1.5;
  }

  /* 基本情報と時間数を1つの表としてつなげて表示する */
  .p-outline__cols {
    flex-direction: column;
    gap: calc(4 * var(--u));
    padding-bottom: calc(24 * var(--u));
  }

  .p-outline__cols > * {
    flex: none;
    width: 100%;
  }

  .p-outline__hours {
    display: flex;
    flex-direction: column;
    gap: 0; /* 「■ 時間数」と表の間は見出し側の余白で調整する */
  }

  /* 「■ 時間数」は上の表に続けて表示する */
  .p-outline__hours-title {
    padding-top: calc(24 * var(--u));
    padding-bottom: calc(16 * var(--u));
    font-size: calc(16 * var(--u));
  }

  .c-spec {
    gap: calc(4 * var(--u));
  }

  .c-spec__row {
    gap: calc(4 * var(--u));
  }

  /* 見出しセルは上下の余白を持たせず、行の高さは値セル側で決める。
     こうすると見出しが2行になっても行が広がらず、Figmaと同じ高さになる。
     （文字は align-items: center で上下中央に配置される） */
  .c-spec dt {
    width: calc(116 * var(--u));
    padding: 0 calc(16 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .c-spec dd {
    padding: calc(24 * var(--u)) calc(16 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .c-spec dd.c-spec__list {
    padding-inline: calc(8 * var(--u));
  }

  .c-spec__list p + p {
    margin-top: calc(16 * var(--u));
  }

  .c-spec__sub {
    font-size: calc(12 * var(--u));
  }

  .p-outline__note {
    padding: calc(32 * var(--u)) calc(20 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.5;
  }

  .p-outline__note p + p {
    margin-top: calc(16 * var(--u));
  }

  /* --- 次期開催スケジュール --- */
  .p-schedule__inner {
    width: calc(100% - 30 * var(--u));
  }

  .p-schedule .c-heading-section {
    padding-top: calc(60 * var(--u));
    padding-bottom: calc(40 * var(--u));
    font-size: calc(32 * var(--u));
    letter-spacing: calc(3.2 * var(--u));
  }

  .p-schedule__card {
    margin-bottom: calc(24 * var(--u));
  }

  .p-schedule__card:last-child {
    margin-bottom: calc(60 * var(--u));
  }

  .p-schedule__bar {
    min-height: 0; /* SPはボタンがバーの外に出るため高さの確保は不要 */
    padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)) calc(56 * var(--u));
  }

  .p-schedule__name {
    padding-block: 0;
    font-size: calc(20 * var(--u));
    line-height: 1.25;
  }

  /* SPではボタンが本体の先頭に、横幅いっぱいで入る */
  .p-schedule__btn {
    position: static;
    width: 100%;
    height: calc(52 * var(--u));
    justify-content: space-between;
    gap: calc(8 * var(--u));
    padding: 0 calc(16 * var(--u)) 0 calc(20 * var(--u));
    font-size: calc(18 * var(--u));
    border: 1px solid var(--color-gold);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.08));
  }

  .p-schedule__btn img {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }

  .p-schedule__num {
    top: calc(12 * var(--u));
    left: calc(-8 * var(--u));
    width: calc(48 * var(--u));
    height: calc(56 * var(--u));
    font-size: calc(32 * var(--u));
  }

  .p-schedule__body {
    gap: calc(24 * var(--u));
    padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u));
  }

  /* 日付と詳細を縦に積む */
  .p-schedule__row {
    flex-direction: column;
    align-items: stretch;
    gap: calc(20 * var(--u));
  }

  .p-schedule__row:not(:last-child) {
    padding-bottom: calc(24 * var(--u));
  }

  .p-schedule__date {
    width: 100%;
    padding: calc(20 * var(--u)) calc(40 * var(--u));
    font-size: calc(20 * var(--u));
  }

  .p-schedule__detail {
    font-size: calc(14 * var(--u));
  }

  /* --- ハンバーガーメニュー --- */
  .l-hamburger {
    top: var(--lp-btn-top);
    right: calc(8 * var(--u));
    padding: calc(16 * var(--u)) calc(12 * var(--u));
  }

  .l-hamburger__bars {
    gap: calc(6 * var(--u));
    width: calc(24 * var(--u));
  }

  .l-hamburger[aria-expanded="true"] .l-hamburger__bars span:nth-child(1) {
    transform: translateY(calc(8 * var(--u))) rotate(45deg);
  }

  .l-hamburger[aria-expanded="true"] .l-hamburger__bars span:nth-child(3) {
    transform: translateY(calc(-8 * var(--u))) rotate(-45deg);
  }

  /* SPは共通ヘッダーが高さ50pxの黒帯なので、これまでどおりその下から表示する */
  .l-menu {
    top: var(--site-header-h);
    height: calc(1004 * var(--u));
    max-height: calc(100dvh - var(--site-header-h));
  }

  .l-menu__inner {
    gap: calc(32 * var(--u));
    padding: calc(60 * var(--u)) calc(20 * var(--u));
  }

  .l-menu__logo { gap: calc(14 * var(--u)); }
  .l-menu__logo-main { gap: calc(8 * var(--u)); }
  .l-menu__brand { font-size: calc(40 * var(--u)); }
  .l-menu__title { font-size: calc(22 * var(--u)); }
  .l-menu__en    { font-size: calc(12 * var(--u)); }

  .l-menu__list {
    width: calc(350 * var(--u));
    gap: calc(24 * var(--u));
  }

  .l-menu__list a {
    padding: 0 calc(16 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u));
    font-size: calc(18 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
  }

  .l-menu__list li:first-child a {
    padding-top: calc(24 * var(--u));
  }

  /* 2つ目だけ2行になり、上との間隔と余白が少し狭い（Figmaどおり） */
  .l-menu__list li:nth-child(2) {
    margin-top: calc(-8 * var(--u));
  }

  .l-menu__list li:nth-child(2) a {
    padding-bottom: calc(16 * var(--u));
    padding-left: 0;
    line-height: 1.5;
  }

  .l-menu__list img {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }

  .l-menu__sns { gap: calc(16 * var(--u)); }

  .l-menu__close {
    gap: calc(10 * var(--u));
    font-size: calc(20 * var(--u));
  }

  .l-menu__close img {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* --- フッター --- */
  .l-footer {
    gap: calc(24 * var(--u));
    padding: calc(48 * var(--u)) calc(15 * var(--u));
  }

  .l-footer__sns {
    gap: calc(16 * var(--u));
  }

  .l-footer__sns img {
    width: auto;
    height: auto;
  }

  .l-footer__copyright {
    font-size: calc(12 * var(--u));
  }

  /* 新しく追加したセクションは、Figmaの左右余白が16pxのため l-inner を上書きする */
  .p-upcoming .l-inner,
  .p-detail .l-inner {
    width: calc(100% - 32 * var(--u));
  }

  /* --- 次回開催予定 / Figma: 12795:155 --- */
  .p-upcoming {
    padding-bottom: calc(60 * var(--u));
  }

  .p-upcoming .c-heading-section {
    padding: calc(60 * var(--u)) 0 calc(40 * var(--u));
    font-size: calc(32 * var(--u));
    letter-spacing: calc(3.2 * var(--u));
  }

  /* このセクションだけ、SPでも前後の「−」を表示する */
  .p-upcoming .c-heading-section__mark {
    display: inline;
  }

  .p-upcoming__discount {
    gap: calc(24 * var(--u));
    padding: calc(24 * var(--u)) calc(16 * var(--u));
  }

  .p-upcoming__discount-title {
    font-size: calc(24 * var(--u));
  }

  .p-upcoming__discount-text {
    font-size: calc(16 * var(--u));
    line-height: 1.5;
  }

  .p-upcoming__list {
    gap: calc(16 * var(--u));
    margin-top: calc(16 * var(--u));
  }

  .p-upcoming__item {
    gap: calc(12 * var(--u));
    padding: calc(16 * var(--u)) calc(12 * var(--u));
  }

  .p-upcoming__num {
    width: calc(32 * var(--u));
    height: calc(48 * var(--u));
    font-size: calc(24 * var(--u));
    filter: drop-shadow(4px 4px 2px rgba(120, 82, 34, 0.08));
  }

  /* SPはコース名と日付を縦に並べる */
  .p-upcoming__body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc(12 * var(--u));
  }

  .p-upcoming__name {
    font-size: calc(18 * var(--u));
  }

  .p-upcoming__date {
    font-size: calc(16 * var(--u));
  }

  /* --- コースの詳細ボタン（4つのコース内） --- */
  .p-courses__btn {
    align-self: stretch;
    width: 100%;
    justify-content: space-between;
    gap: calc(8 * var(--u));
    padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .p-courses__btn img {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }

  /* --- BIP概要 タイトル行＋ボタン --- */
  .p-outline__head {
    flex-direction: column;
    align-items: stretch;
    gap: calc(20 * var(--u));
    padding-bottom: calc(32 * var(--u));
  }

  .p-outline__title {
    padding-bottom: 0;
    text-align: center;
  }

  .p-outline__btn {
    width: 100%;
    justify-content: space-between;
    gap: calc(8 * var(--u));
    padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .p-outline__btn img {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }

  /* --- マスターインストラクターからのメッセージ / Figma: 12788:97 --- */
  .p-message {
    padding: calc(60 * var(--u)) calc(16 * var(--u));
  }

  .p-message__inner {
    padding: calc(40 * var(--u)) calc(20 * var(--u));
  }

  .p-message__head {
    gap: calc(24 * var(--u));
    padding-bottom: calc(40 * var(--u));
  }

  .p-message__title {
    gap: 0;
    font-size: calc(24 * var(--u));
    line-height: 1.5;
  }

  .p-message__sub {
    font-size: calc(18 * var(--u));
  }

  .p-message__body {
    font-size: calc(16 * var(--u));
    line-height: 1.75;
  }

  .p-message__body p + p {
    margin-top: calc(16 * var(--u));
  }

  /* --- コースの詳細（資料ボタン一覧） / Figma: 12788:467 --- */
  .p-detail {
    padding-bottom: calc(60 * var(--u));
  }

  .p-detail .c-heading-section {
    padding: calc(60 * var(--u)) 0 calc(16 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: 1;
    letter-spacing: calc(3.2 * var(--u));
  }

  .p-detail__lead {
    padding-bottom: calc(40 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.5;
    letter-spacing: calc(1.6 * var(--u));
  }

  .p-detail__list {
    grid-template-columns: 1fr;
    row-gap: calc(24 * var(--u));
  }

  .p-detail__btn {
    gap: calc(16 * var(--u));
    padding: calc(20 * var(--u)) calc(16 * var(--u));
  }

  .p-detail__btn--04 {
    padding: calc(16 * var(--u));
  }

  .p-detail__btn img {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
  }

  .p-detail__label {
    gap: calc(16 * var(--u));
  }

  /* 4番目だけ、注記を番号バッジの下（左端）に置く / Figma: 12788:560 */
  .p-detail__btn--04 .p-detail__label {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: calc(16 * var(--u));
    row-gap: calc(12 * var(--u));
    align-items: start;
  }

  .p-detail__btn--04 .p-detail__names {
    display: contents;
  }

  .p-detail__btn--04 .p-detail__note {
    grid-column: 1 / -1;
  }

  .p-detail__num {
    width: calc(32 * var(--u));
    height: calc(40 * var(--u));
    font-size: calc(24 * var(--u));
  }

  .p-detail__names {
    gap: calc(12 * var(--u));
  }

  .p-detail__name {
    font-size: calc(20 * var(--u));
    line-height: 1.25;
  }

  .p-detail__note {
    font-size: calc(14 * var(--u));
  }
}