/* course.css — コース案内 固有 */
/* コース間の区切り線: 2つ目以降のレッスンの上に細い罫線を引き、コースの境目を分かりやすく */
.lesson + .lesson { margin-top: 60px; padding-top: 84px; border-top: 1px solid rgba(112,112,112,.18); }
/* COURSEタイトル(コース案内)↔先頭レッスンの余白。設計PC=タイトル下端→装飾上端≈164px(旧48pxは狭すぎ)。
   隣接マージンは相殺されるので、この値がそのままタイトル→写真の距離(装飾は44px上へはみ出す)。SPは@mediaで上書き */
.section-title + .lesson { margin-top: clamp(120px, 14vw, 204px); }
/* 設計: 写真は正方形(写真≒コンテンツ幅の41%)、本文は上端揃え、装飾は写真と同寸で左上へはみ出す */
.lesson.split { align-items: flex-start; gap: clamp(40px, 7vw, 104px); }
.lesson .split__media { flex: 0 0 42%; }
.lesson h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 700; margin-bottom: 14px; }   /* 設計(実測): タイトル字高≈49px */
.lesson .desc { color: #444; margin-bottom: 4px; }
.lesson .split__media .bg-decoration { background: var(--salmon); width: 100%; height: 100%; top: -44px; left: -38px; }

/* レッスン時間: 価格の下に小さなピル([TIME] 1回◯分)。中央寄せで価格と揃える */
.lesson-time { display: flex; justify-content: center; margin: -8px 0 22px; }
.lesson-time span { display: inline-flex; align-items: center; gap: .55em; background: var(--beige); color: #555;
  border: 1px solid rgba(112,112,112,.14); border-radius: 999px; padding: .4em 1.15em; font-size: .88rem; letter-spacing: .02em; }
.lesson-time span::before { content: "TIME"; font-family: var(--serif); font-size: .7rem; letter-spacing: .1em; color: var(--salmon); font-weight: 700; }

.jp-intro { max-width: 560px; margin-bottom: 48px; }   /* 設計: 左カラムで3行折返し(br-pc)。右の写真/装飾に潜らせない */
.jp-course.split { align-items: flex-start; gap: clamp(40px, 7vw, 104px); }
.jp-course .split__media { flex: 0 0 42%; }
.jp-course + .jp-course { margin-top: 64px; padding-top: 96px; border-top: 1px solid rgba(112,112,112,.18); }
.jp-course h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }   /* 設計: 【0n】見出しはPC1行。長い【02】(2〜4名)も収まるサイズに */
.jp-course .split__media .bg-decoration { background: var(--salmon); width: 100%; height: 100%; top: -68px; left: -57px; }   /* 設計実測: 画像左上へ top-68/left-57 */

/* 設計: Sip&Speak 節のテキスト列は見出し群を中央寄せ(本文段落のみ左揃え)。フォントはサイト標準ゴシック(FVタイトル以外) */
.coffee .en-title { font-family: var(--sans); font-size: clamp(2.2rem, 6.5vw, 4rem); letter-spacing: .06em; color: #9a9a9a; text-align: center; }
.coffee .plan { font-size: clamp(1.8rem, 4vw, 3rem); margin: 6px 0 18px; text-align: center; }
.coffee .sub-text { text-align: center; }
.coffee .sub-text::after { content: ""; display: block; width: 223px; max-width: 90%; height: 2px; background: var(--accent); margin: 14px auto 0; }   /* 設計: 一口飲んで一言英語 直下の #c48a6f 罫線(幅≈223) */
.coffee .price { justify-content: center; }
.coffee .price .amount { color: var(--accent); }
.coffee .price .unit { color: var(--accent); }   /* 設計: 円（税込）もアクセント色 */
.coffee > div:first-child > p:last-child { max-width: 36em; }   /* 本文幅を設計(≈575px)に。孤立改行を防ぐ */
/* PC 設計実測: 写真383×383に対し緑=424×424(≒111%)。緑は写真の右へ約20%(78/383)はみ出し、下端は写真と揃い、上へ約41pxはみ出す */
.coffee .split__media .bg-decoration { background: var(--green); width: 111%; height: 111%; right: -20%; bottom: 0; top: auto; left: auto; }

section.sip-and-speak {
   margin-top: 36px;
}

/* ---- SP（コース-sp フレーム実測: 写真206x206=55%幅、装飾138x138=写真の67%） ---- */
@media (max-width: 768px) {
  /* コーヒー/日本語レッスンは画像が上→テキストが下(media を先頭へ) */
  .coffee .split__media, .jp-course .split__media { order: -1; }

  /* 写真は正方形。設計SP実測=写真≒本文カラム(≈272px)の78%(旧55%=split基準で本文に対し小さすぎた)。
     lesson/coffeeは右寄せ、日本語レッスンは左寄せ(設計実測) */
  .lesson .split__media, .jp-course .split__media, .coffee .split__media { flex: none; width: 78%; }
  .lesson .split__media, .coffee .split__media { align-self: flex-end; }
  .jp-course .split__media { align-self: flex-start; }

  /* 装飾は写真の67%。lesson/coffeeは左上、日本語レッスンは右上へずらして重ねる。
     写真を大きくしたので横はみ出しは28%に縮小(設計=装飾が反対側の本文端に届く量。33%だと画面外へ溢れる) */
  .lesson .split__media .bg-decoration,
  .coffee .split__media .bg-decoration { width: 67%; height: 67%; top: -17%; left: -28%; right: auto; bottom: auto; }
  .jp-course .split__media .bg-decoration { width: 67%; height: 67%; top: -17%; right: -28%; left: auto; bottom: auto; }

  /* 写真拡大で装飾の上はみ出し(写真の17%≒本文幅の13%)が増え、上のコンテンツへ食い込む。
     各写真ブロックの上側余白を「装飾はみ出し(13%)＋クリアランス」でスケールさせる(固定pxだと広い画面で食い込む) */
  /* SP: 区切り線の上に余白(margin)、線の下は装飾はみ出し(13%)＋クリアランスをpaddingで確保 */
  .lesson + .lesson { margin-top: 40px; padding-top: calc(13% + 44px); }
  .section-title + .lesson { margin-top: calc(13% + 60px); }   /* 先頭=グループレッスン: コース案内タイトル→装飾上端≈60px(設計SP) */
  .jp-course + .jp-course { margin-top: 40px; padding-top: calc(13% + 40px); }
  .jp-intro { margin-bottom: calc(13% + 28px); }               /* 先頭=【01】: intro下に装飾はみ出し分を確保 */

  /* SP: 見出し(h2)と価格は中央寄せ(ユーザー指定)。日本語レッスンの【0n】見出しは2行。
     .lesson/.jp-course の align-items:flex-start はテキスト列を収縮・左寄せするため、SPでは stretch にして
     テキスト列を全幅に(=h2/価格が本文全幅の中央に来る)。写真は各自の align-self(左右)で不変 */
  .lesson.split, .jp-course.split { align-items: stretch; }
  .lesson h2, .jp-course h2 { text-align: center; }
  .price { justify-content: center; }

   section.sip-and-speak {
      margin-top: 24px;
   }
}