/*
 * Premium 専用ページ
 *
 * メインLPの tokens / base / sections を土台に、このページの分だけ足す。
 * **原本のストーリーは iframe の中。** ここでは外枠しか触らない。
 */

.yu-prem-hero { padding-top: clamp(34px, 5vw, 72px); padding-bottom: clamp(26px, 3.4vw, 48px); }
.yu-prem-hero__k {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--yu-red);
}
.yu-prem-hero h1 {
  margin-top: 10px;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.35; font-weight: 800;
}
.yu-prem-hero__sub {
  margin-top: 12px; font-size: clamp(16px, 1.8vw, 21px); font-weight: 700; color: var(--yu-navy);
}
.yu-prem-hero__body {
  margin-top: 14px; font-size: 15px; line-height: 1.95; color: var(--yu-ink3);
}
.yu-prem-hero .yu-btns { margin-top: 22px; }

/* ── ストーリー ── */

.yu-prem-story { padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(28px, 3.4vw, 52px); }
.yu-prem-story__h { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.32; }
.yu-prem-story__note { margin-top: 6px; font-size: 13px; color: var(--yu-ink3); }

.yu-prem-story__bar {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}
.yu-prem-story__bar .yu-btn { min-height: 44px; display: inline-flex; align-items: center; }

/* 原本は 1080px 前提の作り。**縮めない。**
   Desktop は最大 1200px で置き、狭い画面は縦を長く取る。 */
.yu-prem-story__box {
  margin: 10px auto 0;
  max-width: 1200px;
  height: min(78svh, 900px);
  min-height: 520px;
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-r-l);
  overflow: hidden;
  background: var(--yu-white);
}
.yu-prem-story__box:fullscreen { max-width: none; height: 100%; min-height: 0; border-radius: 0; }

.yu-prem-story__frame { display: block; width: 100%; height: 100%; border: 0; }

.yu-prem-story__hint {
  margin: 10px auto 0; max-width: 1200px;
  font-size: 12.5px; line-height: 1.7; color: var(--yu-mut);
}

/* ── 考え方 ── */

.yu-prem-how { padding-top: clamp(26px, 3vw, 48px); padding-bottom: clamp(26px, 3vw, 48px); }
.yu-prem-how__h { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.32; }
.yu-prem-how__list {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: minmax(0, 1fr);
}
.yu-prem-how__list li {
  list-style: none;
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-r);
  background: var(--yu-white);
}
.yu-prem-how__n { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--yu-red); }
.yu-prem-how__t { font-size: clamp(15px, 1.5vw, 18px); font-weight: 700; line-height: 1.5; }

/* ── CTA ── */

.yu-prem-cta { padding-top: clamp(30px, 3.6vw, 56px); padding-bottom: clamp(30px, 3.6vw, 56px); }
.yu-prem-cta__h { font-size: clamp(19px, 2vw, 25px); line-height: 1.35; color: #fff; }
.yu-prem-cta .yu-btns { margin-top: 18px; }
.yu-prem-cta .yu-btn { min-height: 44px; display: inline-flex; align-items: center; }

/* ── 足元 ── */

.yu-foot { padding: 26px 0 40px; background: var(--yu-s2); border-top: 1px solid var(--yu-line-s); }
.yu-foot__mark .yu-logo { font-size: 20px; }
.yu-foot__note { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--yu-mut); }

@media (min-width: 900px) {
  .yu-prem-how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yu-prem-how__list li { flex-direction: column; gap: 8px; }
}

/* 狭い画面では縦を長く取る。**原本を縮めて合わせない。**
   読みづらいときは全画面ボタンを使ってもらう。 */
@media (max-width: 768px) {
  .yu-prem-story__box { height: min(82svh, 760px); min-height: 460px; }
  .yu-prem-story__bar { justify-content: stretch; }
  .yu-prem-story__bar .yu-btn { flex: 1 1 auto; justify-content: center; }
  .yu-prem-hero .yu-btn, .yu-prem-cta .yu-btn { width: 100%; justify-content: center; }
}