/* =========================================================================
   AuraBranding® 7th Edition — Landing Page
   Luxury Editorial × Modern Minimalism

   構成
   0. Tokens（色・フォント・余白）
   1. Base
   2. Common parts（kicker / 見出し / ボタン / 写真枠）
   3. Header
   4. Sections（index.html のセクション順）
   5. Footer
   6. Motion
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. Tokens
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* color */
  /* ホワイト × ブラック × ニュートラルなピンクベージュ */
  --c-white: #ffffff;
  --c-ivory: #f4f0ee;       /* グレージュ寄りのピンクベージュ（背景） */
  --c-beige: #e9e3e0;       /* 同系の濃い色（最終CTA・写真下地） */
  --c-beige-deep: #a38a85;  /* アクセント文字（番号・ラベル） */
  --c-black: #171717;
  --c-text: #2b2828;
  --c-mute: #7a7170;
  --c-line: rgba(23, 23, 23, 0.14);

  /* font */
  --f-en: "Cormorant Garamond", "Times New Roman", serif;
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* space */
  --gutter: clamp(20px, 5.5vw, 80px);
  --sec-y: clamp(88px, 12vw, 168px);
  --max: 1320px;
}


/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.06em;
  word-break: auto-phrase; /* 対応ブラウザでは文節単位で改行 */
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
sup { font-size: 0.42em; vertical-align: super; line-height: 0; letter-spacing: 0; }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 日本語の改行位置：.nb の単位でのみ折り返す */
.nb { display: inline-block; }

/* Cormorant の数字はライニング数字で揃える */
.kicker__num, .step__num, .benefit__num, .curriculum__day, .ph__label { font-variant-numeric: lining-nums; }

.sep { color: var(--c-beige-deep); font-weight: 300; padding-inline: 0.2em; }


/* -------------------------------------------------------------------------
   2. Common parts
   ------------------------------------------------------------------------- */

/* kicker：セクション英字ラベル */
.kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--f-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-black);
  line-height: 1;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.kicker__num {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--c-beige-deep);
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.kicker__num::after {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
}
.kicker--center { justify-content: center; }

/* 見出し */
.sec-head { margin-bottom: clamp(56px, 8vw, 104px); }
.sec-head--center { text-align: center; }

.sec-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(23px, 3.1vw, 40px);
  line-height: 1.75;
  letter-spacing: 0.12em;
  color: var(--c-black);
}
.sec-title--sm { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: 0.14em; }
.sec-title--en {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: var(--c-black);
}

.sec-lead {
  margin-top: clamp(28px, 3.5vw, 44px);
  max-width: 40em;
  color: var(--c-text);
}

/* CTA ボタン：黒・角はほぼ直角 */
.cta { margin-top: clamp(40px, 5vw, 56px); }
.cta--center { display: flex; justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 300px;
  padding: 22px 40px;
  background: var(--c-black);
  color: var(--c-white);
  border: 1px solid var(--c-black);
  border-radius: 1px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1;
  transition: background-color .4s ease, color .4s ease;
}
.btn::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width .4s ease;
}
.btn:hover { background: transparent; color: var(--c-black); }
.btn:hover::after { width: 40px; }
.btn:focus-visible { outline: 1px solid var(--c-black); outline-offset: 4px; }

/* 写真枠
   - <img> が読み込めればその写真を表示
   - ファイルが無ければ <img> を外し、仮枠（.ph__label）を表示  */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-beige);
}
.media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.16em;
  color: var(--c-beige-deep);
}
/* 仮枠であることが一目でわかる斜線＋点線 */
.media--ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(163, 138, 133, 0.14) 14px 15px),
    var(--c-ivory);
  outline: 1px dashed rgba(163, 138, 133, 0.6);
  outline-offset: -1px;
}
.media--ph img { position: absolute; inset: 0; }

.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-1x1 { aspect-ratio: 1 / 1; }


/* -------------------------------------------------------------------------
   3. Header
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--c-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header__logo {
  font-family: var(--f-en);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  opacity: 0;
  transition: opacity .5s ease;
}
.site-header.is-scrolled .site-header__logo { opacity: 1; }
.site-header__nav {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  margin-left: auto;
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.site-header__nav a { position: relative; padding-block: 6px; }
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s ease;
}
.site-header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .site-header__inner { height: 56px; }
}


/* -------------------------------------------------------------------------
   4-01. FIRST VIEW
   ------------------------------------------------------------------------- */
.sec-hero {
  padding-top: clamp(88px, 9vw, 120px);
  padding-bottom: var(--sec-y);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(33px, 4.1vw, 66px);   /* 写真とコピーの間（従来比 約-18%） */
}

/* 写真：ロゴを写真上部の余白に重ねる（サイズは写真幅基準 = cqw） */
.hero__photo {
  aspect-ratio: 1124 / 801;
  background: var(--c-ivory);
  container-type: inline-size;
}
.hero__masthead {
  position: absolute;
  z-index: 2;
  top: 3.2cqw;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font-family: var(--f-en);
  font-weight: 300;
  color: var(--c-black);
  line-height: 0.9;
}
.hero__brand {
  display: block;
  font-size: 10vw;      /* cqw 非対応ブラウザ用 */
  font-size: 13.2cqw;   /* 写真幅の約72% */
  letter-spacing: -0.01em;
}
.hero__brand sup { font-size: 0.2em; vertical-align: 2.8em; margin-left: 0.15em; }
.hero__edition {
  display: block;
  margin-top: 3.4cqw;
  text-align: right;
  font-size: max(13px, 2.1cqw);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.hero__copy { padding-bottom: 4px; }
/* メインコピー：最も強く */
.hero__lead {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.75;
  letter-spacing: 0.12em;
  color: var(--c-black);
}
/* サブコピー：細く・小さく */
.hero__tagline {
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 2;
  letter-spacing: 0.12em;
  color: var(--c-text);
}
.hero__sub {
  margin-top: clamp(24px, 2.6vw, 36px);
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

@media (min-width: 768px) {
  /* PC・タブレット：写真の下にコピーを2カラム */
  .hero__copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .hero__lead { grid-row: 1 / 4; }
  .hero__tagline { margin-top: 6px; }
  .hero__copy .cta { grid-column: 2; margin-top: 32px; }
}

@media (max-width: 767px) {
  .sec-hero { padding-top: 76px; }

  .hero__grid { gap: 21px; }
  /* 写真は画面幅いっぱい・正方形にトリミング（顔の位置が中心に来るよう調整） */
  .hero__photo {
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 1 / 1;
  }
  .hero__photo img { object-position: 46% 50%; }
  .hero__masthead { top: 4cqw; }
  .hero__brand { font-size: 14.6cqw; }   /* スマホでは写真幅の約78% */
  .hero__edition { font-size: 3.6cqw; margin-top: 4.4cqw; }
  .hero__lead { font-size: 24px; letter-spacing: 0.1em; }
  .hero__tagline { font-size: 14px; letter-spacing: 0.08em; }
  .hero__sub { font-size: 13.5px; }
  .hero__copy .cta { margin-top: 40px; }
  .hero__copy .btn { width: 100%; min-width: 0; }
}


/* -------------------------------------------------------------------------
   4-02. THE PHILOSOPHY
   ------------------------------------------------------------------------- */
.sec-philosophy { padding-block: var(--sec-y); }

.philosophy__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
}
.philosophy__head {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* 特集ページの扉のような横組み見出し */
.philosophy__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: var(--c-black);
}
.philosophy__title .nb { display: block; }
.philosophy__title .nb + .nb { padding-left: 1.5em; }
.philosophy__body {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 2.3;
  letter-spacing: 0.1em;
  color: var(--c-text);
  padding-top: clamp(0px, 6vw, 96px);
}
.stanza + .stanza { margin-top: 2.2em; }
.stanza--quote p { color: var(--c-beige-deep); }
.stanza--emphasis {
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--c-black);
  line-height: 2.1;
}
.philosophy__body .stanza:last-child {
  margin-top: 3.2em;
  padding-top: 2.6em;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-sans);
  font-size: 15px;
}

@media (max-width: 767px) {
  .philosophy__grid { grid-template-columns: 1fr; gap: 48px; }
  .philosophy__head { position: static; }
  .philosophy__title { font-size: 27px; letter-spacing: 0.12em; }
  .philosophy__body { font-size: 14.5px; line-height: 2.2; letter-spacing: 0.04em; padding-top: 0; }
  .stanza--emphasis { font-size: 17px; }
}


/* QUESTION：読者への問いかけ */
.sec-question {
  background: var(--c-ivory);
  padding-block: var(--sec-y);
}
.question__head {
  text-align: center;
  margin-bottom: clamp(40px, 4.5vw, 64px);
}
.question__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.8;
  letter-spacing: 0.12em;
  color: var(--c-black);
}
.question__title::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(48px, 6vw, 80px);
  margin: clamp(32px, 4vw, 48px) auto 0;
  background: var(--c-black);
}
.question__body {
  max-width: 36em;
  margin-inline: auto;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 2.3;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.question__body .stanza--emphasis { font-size: clamp(17px, 1.5vw, 20px); }

@media (max-width: 767px) {
  .br-pc { display: none; }
  .question__title { font-size: 22px; letter-spacing: 0.08em; }
  .question__body { font-size: 14.5px; line-height: 2.2; letter-spacing: 0.04em; text-align: left; }
  .question__body .stanza--emphasis { font-size: 16px; }
}


/* THREE ELEMENTS */
.sec-elements {
  background: var(--c-white);
  padding-block: var(--sec-y);
}
.sec-elements + .sec-program { padding-top: 0; }

/* エディトリアル画像枠（横長） */
.elements__visual {
  /* 縦長写真をトリミングせず、中央に小さめに配置 */
  max-width: 440px;
  margin: 0 auto clamp(48px, 6vw, 88px);
}
.elements__visual img { width: 100%; height: auto; filter: saturate(0.85) contrast(0.97); } /* ほんの少しグレイッシュに */

@media (max-width: 767px) {
  /* スマホ：前セクションの直後から写真を始める（上の白い余白なし） */
  .sec-elements { padding-top: 0; }
  /* スマホ：画面の左右いっぱいの横長表示（高さ220px・VOGUEロゴ付近でトリミング） */
  .elements__visual { max-width: none; height: 220px; margin-inline: calc(var(--gutter) * -1); }
  .elements__visual img { height: 100%; object-fit: cover; object-position: 50% 68%; }
}
.elements__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(16px, 3vw, 40px);
  border-top: 1px solid var(--c-black);
}
.element {
  padding: clamp(40px, 4.4vw, 64px) clamp(20px, 3vw, 48px) clamp(40px, 4vw, 56px);
  text-align: center;
}
.element + .element { border-left: 1px solid var(--c-line); }
.element__num {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 18px;
  color: var(--c-beige-deep);
  line-height: 1;
}
.element__name {
  margin-top: 28px;
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(34px, 3.8vw, 54px);
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--c-black);
}
.element__text {
  margin-top: 28px;
  font-size: 14px;
  line-height: 2;
}
.elements__closing {
  margin: clamp(64px, 8vw, 112px) auto 0;
  max-width: 34em;
  text-align: center;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 2.3;
  letter-spacing: 0.12em;
  color: var(--c-black);
}

@media (max-width: 767px) {
  .elements__grid { grid-template-columns: 1fr; }
  .element { padding: 44px 0 40px; }
  .element + .element { border-left: 0; border-top: 1px solid var(--c-line); }
  .element__name { margin-top: 22px; font-size: 36px; }
  .element__text { margin-top: 20px; }
  .elements__closing { font-size: 15.5px; letter-spacing: 0.08em; }
}


/* -------------------------------------------------------------------------
   4-03. THE PROGRAM
   ------------------------------------------------------------------------- */
.sec-program { padding-block: var(--sec-y); }

.steps { border-top: 1px solid var(--c-black); }
.step {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 4.4fr) minmax(0, 5.2fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: baseline;
  padding-block: clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--c-line);
}
.step__label {
  font-family: var(--f-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--c-beige-deep);
  line-height: 1;
}
.step__num {
  display: block;
  margin-top: 12px;
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--c-black);
}
.step__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--c-black);
}
.step__text { font-size: 14.5px; }

@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 16px; }
  .step__label { display: flex; align-items: baseline; gap: 14px; }
  .step__num { display: inline; margin-top: 0; font-size: 48px; }
  .step__title { margin-top: 8px; font-size: 17px; }
  .step__text { font-size: 14px; }
}


/* CURRICULUM */
.sec-curriculum {
  background: var(--c-ivory);
  padding-block: var(--sec-y);
}
.sec-head--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 24px;
  margin-bottom: 0;
}
.sec-head--split .kicker { margin-bottom: 0; }

.curriculum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  column-gap: clamp(40px, 6vw, 96px);
}
.curriculum__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-block: 22px;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.7;
}
.curriculum__day {
  flex: 0 0 auto;
  width: 136px;
  font-family: var(--f-en);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-black);
  line-height: 1.2;
}
.curriculum__item .sep {
  /* 確定原稿の「｜」は保持しつつ視覚的には控えめに */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.curriculum__name { font-size: 15px; color: var(--c-text); letter-spacing: 0.08em; }
.curriculum__item--kickoff .curriculum__day { font-style: italic; color: var(--c-beige-deep); }

@media (max-width: 767px) {
  .curriculum { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .curriculum__item { padding-block: 16px; }
  .curriculum__day { width: 100px; font-size: 19px; }
  .curriculum__name { font-size: 14px; letter-spacing: 0.04em; }
}


/* SPECIAL BENEFITS */
.sec-benefits { padding-block: var(--sec-y); }
.benefits { border-top: 1px solid var(--c-black); }

.benefit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--c-line);
}
.benefit__num  { grid-column: 1 / 4; }
.benefit__body { grid-column: 4 / 11; }
.benefit--media .benefit__body { grid-column: 4 / 9; }
.benefit__media { grid-column: 9 / 13; }
.benefit__num {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.8;
  letter-spacing: 0;
  color: var(--c-black);
}
.benefit__label {
  display: block;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.4;
  color: var(--c-beige-deep);
}
.benefit__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--c-black);
}
.benefit__text {
  margin-top: 20px;
  max-width: 34em;
  font-size: 14.5px;
}
.benefit__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.benefit__media .media:nth-child(2) { margin-top: 48px; }
.benefit__media .ph__label { font-size: 10px; letter-spacing: 0.1em; }
.benefit__photo img { width: 100%; height: auto; }
/* ワークブック写真1枚：本文の右側の列に、最大300pxで中央配置 */
.benefit__media--single { display: block; }
.benefit__media--single .benefit__photo { max-width: 300px; margin-inline: auto; }

@media (max-width: 900px) {
  .benefit { grid-template-columns: 1fr; gap: 28px; }
  .benefit__num,
  .benefit__body,
  .benefit--media .benefit__body,
  .benefit__media { grid-column: 1 / -1; }
  .benefit__num { font-size: 80px; }
  .benefit__media { gap: 12px; }
  .benefit__media .media:nth-child(2) { margin-top: 32px; }
  .benefit__media--single .benefit__photo { width: 58%; margin-top: 12px; }
}
/* スマホ：特典02のみ「02」の下を 写真40％｜見出し・説明文60％ の2カラムに */
@media (max-width: 767px) {
  .benefit--media { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 14px; }
  .benefit--media .benefit__num { grid-column: 1 / -1; }
  .benefit--media .benefit__media { grid-column: 1; grid-row: 2; }
  .benefit--media .benefit__body { grid-column: 2; grid-row: 2; }
  .benefit--media .benefit__media--single .benefit__photo { width: 100%; margin-top: 0; }
  .benefit--media .benefit__title { font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; }
  .benefit--media .benefit__text { margin-top: 12px; font-size: 13px; line-height: 1.9; }
}


/* -------------------------------------------------------------------------
   4-04. THE RESULTS
   ------------------------------------------------------------------------- */
.sec-results {
  background: var(--c-ivory);
  padding-block: var(--sec-y);
}
.results__collage {
  max-width: 680px;
  margin: 0 auto clamp(64px, 8vw, 112px);
}
.results__collage img { width: 100%; height: auto; object-fit: contain; }
.results__body {
  max-width: 36em;
  margin-inline: auto;
  text-align: center;
  font-size: 15.5px;
}
.results__body > p + p { margin-top: 0.4em; }
.results__list {
  margin-block: clamp(40px, 5vw, 64px);
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.8vw, 23px);
  letter-spacing: 0.16em;
  line-height: 2.4;
  color: var(--c-black);
}

.voices__title {
  margin-top: clamp(96px, 12vw, 160px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: 0.12em;
  color: var(--c-black);
}
.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}
.voice:nth-child(2) { margin-top: clamp(0px, 6vw, 80px); }
/* 受講生写真：枠は共通の 4:5。元画像（900×1200px）から切り出す範囲を
   --x / --y（左上の位置）と --w（幅）で写真ごとに指定（単位：元画像のpx・高さは幅×1.25）
   ※ margin の % は枠の「幅」基準なので、PC・スマホとも同じ構図になる */
.voice__photo img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  width: calc(900 / var(--w) * 100%);
  height: auto;
  margin-left: calc(var(--x) / var(--w) * -100%);
  margin-top: calc(var(--y) / var(--w) * -100%);
}
.voice__photo--misato { --x: 10; --y: 125; --w: 860; }  /* 上の空を減らし、ワンピースは裾まで */
.voice__photo--ann    { --x: 40; --y: 125; --w: 860; }  /* 下のレースとパンツを残し、上の手すりを少し減らす */
.voice__photo--kyoko  { --x: 0;  --y: 60;  --w: 900; }  /* ソファと窓の景色、座り姿を靴先まで */
.voice__body { margin-top: 24px; }
.voice__name {
  white-space: nowrap;
  font-family: var(--f-serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--c-black);
}
.voice__role { display: inline-block; white-space: nowrap; font-size: 12px; letter-spacing: 0.08em; color: var(--c-mute); }
.voice__role[hidden] { display: none; }
.voice__heading {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--c-black);
}
.voice__text { font-size: 14px; line-height: 2; }
.voice__heading + .voice__text { margin-top: 16px; }
.voice__text + .voice__text { margin-top: 1em; }
.voice__body--ph {
  padding: 28px 16px;
  outline: 1px dashed rgba(163, 138, 133, 0.6);
  outline-offset: -1px;
  text-align: center;
}
.voice__placeholder {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-beige-deep);
}
.sec-results .cta { margin-top: clamp(80px, 10vw, 128px); }

@media (max-width: 767px) {
  .results__body { font-size: 14.5px; text-align: left; }
  .results__list { text-align: center; }
  .voices {
    /* スマホ：横スクロールで一覧 */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    gap: 16px;
    scrollbar-width: none;
  }
  .voices::-webkit-scrollbar { display: none; }
  .voice { scroll-snap-align: start; }
  .voice:nth-child(2) { margin-top: 0; }
  .voice__name { letter-spacing: 0.04em; }
  .voice__role { font-size: 10.5px; letter-spacing: 0.02em; }
  .sec-results .btn { width: 100%; min-width: 0; }
}


/* -------------------------------------------------------------------------
   4-05. ABOUT AURABRANDING®
   ------------------------------------------------------------------------- */
.sec-about { padding-block: var(--sec-y); }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.about__photo {
  aspect-ratio: 2 / 3;
  max-width: 440px;
  position: sticky;
  top: 112px;
}
.about__photo img { object-position: 50% 20%; }
.about__text .sec-title { font-size: clamp(22px, 2.5vw, 34px); }
.about__body {
  margin-top: clamp(40px, 4.4vw, 56px);
  max-width: 36em;
}
.about__body p + p { margin-top: 1.6em; }
.about__sign {
  margin-top: clamp(48px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
  max-width: 36em;
  font-family: var(--f-serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--c-mute);
}
.about__name {
  font-family: var(--f-en);
  font-size: 30px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-right: 4px;
}

@media (max-width: 767px) {
  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__photo { position: relative; top: auto; max-width: none; width: 78%; aspect-ratio: 4 / 5; }
  .about__text .sec-title { font-size: 20px; letter-spacing: 0.08em; }
  .about__body { font-size: 14.5px; }
  .about__body br { display: none; }
}


/* -------------------------------------------------------------------------
   4-06. YOUR NEXT CHAPTER
   ------------------------------------------------------------------------- */
.sec-next {
  background: var(--c-ivory);
  padding-block: var(--sec-y);
}
.next__body {
  text-align: center;
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 2.4;
  letter-spacing: 0.1em;
}
.next__question {
  margin-block: 2.2em;
  font-size: clamp(18px, 1.8vw, 23px);
  color: var(--c-black);
}

@media (max-width: 767px) {
  .next__body { font-size: 14.5px; line-height: 2.2; letter-spacing: 0.05em; text-align: left; }
  .next__question { font-size: 17px; text-align: center; }
}


/* PHOTO GALLERY：大小を組み合わせたエディトリアルグリッド */
.sec-gallery { padding-block: var(--sec-y) 0; }
.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(140px, 16vw, 230px);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(40px, 5vw, 64px);
}
.g1 { grid-column: 1 / 8;  grid-row: 1 / 3; }
.g2 { grid-column: 8 / 13; grid-row: 1 / 2; }
.g3 { grid-column: 8 / 11; grid-row: 2 / 3; }
.g4 { grid-column: 11 / 13; grid-row: 2 / 4; }
.g5 { grid-column: 4 / 11; grid-row: 3 / 4; }

@media (max-width: 767px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 34vw;
    gap: 10px;
  }
  .g1 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .g2 { grid-column: 1 / 2; grid-row: 3 / 5; }
  .g3 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .g4 { grid-column: 2 / 3; grid-row: 4 / 5; }
  .g5 { grid-column: 1 / 3; grid-row: 5 / 6; }
  .gallery .ph__label { font-size: 10px; letter-spacing: 0.1em; }
}


/* PROGRAM INFORMATION */
.sec-info { padding-block: var(--sec-y); }
.info__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 6vw, 96px);
}
.info__grid .sec-head { margin-bottom: 0; }
.info { border-top: 1px solid var(--c-black); }
.info__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding-block: 26px;
  border-bottom: 1px solid var(--c-line);
}
.info dt {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--c-mute);
}
.info dd {
  font-family: var(--f-serif);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--c-black);
}

@media (max-width: 767px) {
  .info__grid { grid-template-columns: 1fr; }
  .info__row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding-block: 20px; }
  .info dd { font-size: 15px; }
}


/* -------------------------------------------------------------------------
   4-07. FINAL CTA
   ------------------------------------------------------------------------- */
.sec-final {
  background: var(--c-beige);
  padding-block: clamp(112px, 15vw, 220px);
}
.final { text-align: center; }
.final__brand {
  font-family: var(--f-en);
  font-weight: 300;
  color: var(--c-black);
  line-height: 1;
}
.final__name {
  display: block;
  font-size: clamp(48px, 7.6vw, 112px);
  letter-spacing: -0.005em;
}
.final__name sup { font-size: 0.24em; vertical-align: 2.2em; margin-left: 0.1em; }
.final__edition {
  display: block;
  margin-top: 16px;
  font-size: clamp(20px, 2.2vw, 30px);
  font-style: italic;
  letter-spacing: 0.06em;
}
.final__date {
  display: inline-block;
  margin-top: clamp(36px, 4vw, 52px);
  padding: 10px 0;
  border-block: 1px solid var(--c-black);
  font-family: var(--f-serif);
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--c-black);
}
.final__text {
  margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--f-serif);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 2.2;
  letter-spacing: 0.12em;
  color: var(--c-black);
}

@media (max-width: 767px) {
  .final__name { font-size: 13.4vw; }
  .final__text { font-size: 15px; letter-spacing: 0.08em; }
  .sec-final .btn { width: 100%; min-width: 0; }
}


/* -------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-black);
  color: var(--c-white);
  padding-block: 56px;
}
.site-footer__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer__logo {
  font-family: var(--f-en);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.06em;
}
.site-footer__copy {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}


/* -------------------------------------------------------------------------
   6. Motion（JS有効時のみ・視差軽減設定を尊重）
   ------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(.2, .6, .2, 1), transform 1.2s cubic-bezier(.2, .6, .2, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}