/* ==========================================================================
   志望理由書CAMP LINE② 特典受け取りLP - スタイルシート
   カラー・フォントはブランド指定(特典LP設計.md §0)に準拠
   ========================================================================== */

:root {
  --color-base:      #FFF7F3; /* ベース背景 */
  --color-page-bg:   #EFE6DD; /* 画面外側の背景(デスクトップ幅で見た時の余白) */
  --color-navy:      #5B6B8C; /* 見出し・アクセント */
  --color-navy-deep: #414F68; /* ネイビーの濃色バリエーション */
  --color-pink:      #F4A7B9; /* CTA・リボン */
  --color-pink-deep: #E8899E; /* ピンクの濃色バリエーション */
  --color-line:      #E8E0D6; /* 区切り線・カード枠 */
  --color-ink:       #4E5265; /* 本文(濃グレー〜ネイビー) */

  --font-serif: "Noto Serif JP", serif;
  --font-sans:  "Noto Sans JP", sans-serif;

  --container-max: 480px;
}

/* -------------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-page-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; }
p, h1, h2, h3 { margin: 0; }

/* -------------------------------------------------------------------------
   ページ全体のコンテナ(スマホ縦1カラム。480px超の画面では中央寄せカードになる)
   ------------------------------------------------------------------------- */
.page-shell {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  background-color: var(--color-base);
  min-height: 100dvh;
  box-shadow: 0 0 40px rgba(91, 107, 140, 0.15);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   共通パーツ
   ------------------------------------------------------------------------- */

/* scroll reveal(フェードのみ) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* CTAボタン共通(押下感・タップ挙動) */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--color-pink);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  padding: 16px 12px;
  box-shadow: 0 6px 18px rgba(244, 167, 185, 0.55);
  border: 0;
  transition: transform .15s ease, box-shadow .15s ease;
  touch-action: manipulation;
}
.btn-cta:active { transform: scale(0.98); }
.btn-cta__icon { width: 24px; height: 24px; flex-shrink: 0; fill: #fff; }
.btn-cta--sm { font-size: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }

/* タップ全体がリンクになるカード共通の押下感 */
.tap-card { transition: transform .15s ease, box-shadow .15s ease; touch-action: manipulation; }
.tap-card:active { transform: scale(0.98); }

/* ②内の区切り(原稿の ━━━ に対応する装飾線) */
.kagiri { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; }
.kagiri::before, .kagiri::after { content: ""; height: 1px; width: 56px; background: var(--color-line); }
.kagiri__dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--color-pink); }

/* -------------------------------------------------------------------------
   ① ヘッダー帯
   ------------------------------------------------------------------------- */
.header {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy);
  padding: 36px 24px 32px;
  text-align: center;
}
.header__decor { position: absolute; border-radius: 9999px; pointer-events: none; }
.header__decor--tr { top: -40px; right: -40px; width: 160px; height: 160px; background: rgba(255, 255, 255, 0.05); }
.header__decor--bl { bottom: -56px; left: -32px; width: 144px; height: 144px; background: rgba(244, 167, 185, 0.10); }
.header__eyebrow { position: relative; color: rgba(255, 255, 255, 0.85); font-size: 13px; letter-spacing: 0.04em; }
.header__rule { position: relative; margin: 12px auto 0; width: 40px; height: 2px; background: var(--color-pink); }
.header__title {
  position: relative;
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
}
.header__title-line { display: block; font-size: 17px; }
.header__title-line--lg { display: block; margin-top: 4px; font-size: 34px; letter-spacing: 0.04em; }

/* -------------------------------------------------------------------------
   ② メイン特典テキストブロック
   ------------------------------------------------------------------------- */
.intro {
  background-color: #fff;
  border-bottom: 1px solid var(--color-line);
  padding: 40px 24px;
}
.intro__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
  font-size: 22px;
  line-height: 1.4;
}
.intro__text { text-align: center; font-size: 15px; line-height: 2; margin-top: 16px; }
.intro__text--first { margin-top: 24px; }
.intro__label { margin-top: 28px; text-align: center; font-weight: 700; color: var(--color-navy); font-size: 15px; }

.step-list {
  margin: 20px auto 0;
  max-width: 340px;
  list-style: none;
  border-radius: 8px;
  background-color: var(--color-base);
  border: 1px solid var(--color-line);
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.step-list li + li { margin-top: 12px; }
.step-list__num { font-family: var(--font-serif); font-weight: 700; color: var(--color-navy); }

/* -------------------------------------------------------------------------
   ③ CTAボタン(スタート動画)
   ------------------------------------------------------------------------- */
.cta-primary { padding: 32px 20px 8px; }

/* -------------------------------------------------------------------------
   ④ メインビジュアル(このページの見せ場) ＋ ⑤ 誘導テキスト
   ------------------------------------------------------------------------- */
.showcase { margin-top: 32px; background-color: var(--color-navy); padding: 40px 20px 36px; }

.showcase-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
.showcase-card__ribbon { background-color: var(--color-pink); padding: 10px 16px; text-align: center; }
.showcase-card__ribbon p { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; line-height: 1.4; }

.showcase-card__body { padding: 28px 24px 24px; }
.showcase-card__headline {
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--color-navy);
  font-size: 27px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.showcase-card__subtext { margin-top: 12px; font-size: 12.5px; color: rgba(78, 82, 101, 0.8); line-height: 1.6; }

.showcase-card__row { margin-top: 20px; display: flex; align-items: stretch; gap: 16px; }
.showcase-card__steps { flex: 1; min-width: 0; list-style: none; font-size: 11px; line-height: 1.4; align-self: center; }
.showcase-card__steps li { display: flex; gap: 6px; }
.showcase-card__steps li + li { margin-top: 8px; }
.showcase-card__steps .num { font-family: var(--font-serif); font-weight: 700; color: var(--color-navy); flex-shrink: 0; }
.showcase-card__steps .txt { color: var(--color-ink); }

.showcase-card__photo {
  width: 80px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(to bottom, #FBE9EE, #F3DDE3);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  overflow: hidden;
}
.showcase-card__photo img { width: 70%; height: auto; }

.showcase-card__band { background-color: var(--color-navy); padding: 12px 0; text-align: center; }
.showcase-card__band p { font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: 16px; letter-spacing: 0.14em; }

.showcase-guide { margin-top: 24px; text-align: center; }
.showcase-guide__emoji { font-size: 22px; line-height: 1; }
.showcase-guide__text { margin-top: 12px; color: #fff; font-size: 14px; line-height: 1.9; }

/* -------------------------------------------------------------------------
   サムネイル共通(⑤の動画サムネイル・⑥のSTEP2〜5サムネイル)
   ------------------------------------------------------------------------- */
.thumb {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 10px 28px rgba(91, 107, 140, 0.18);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--main { margin-top: 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30); }

/* -------------------------------------------------------------------------
   ⑥ 特典サムネイル縦羅列(STEP2〜5)
   ------------------------------------------------------------------------- */
.thumbs { padding: 40px 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.thumb-block { display: flex; flex-direction: column; gap: 8px; }
.thumb-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 4px 0 14px;
  padding: 8px 12px;
  background: rgba(244, 167, 185, 0.14);
  border: 1px solid rgba(232, 137, 158, 0.4);
  border-radius: 4px 12px 12px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-navy-deep);
  transform: rotate(-0.8deg);
  box-shadow: 0 2px 6px rgba(91, 107, 140, 0.10);
}
.thumb-note__icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--color-pink-deep);
}

/* -------------------------------------------------------------------------
   ⑦ クロージング＋最終CTA
   ------------------------------------------------------------------------- */
.closing {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  background-color: var(--color-navy);
  padding: 48px 24px 48px;
  text-align: center;
}
.closing__decor {
  position: absolute; top: -48px; left: -48px;
  width: 176px; height: 176px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.closing__inner { position: relative; }
.closing__rule { margin: 0 auto; width: 40px; height: 2px; background: var(--color-pink); }
.closing__title {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-weight: 700;
  color: #fff;
  font-size: 25px;
  line-height: 1.6;
}
.closing__text { margin-top: 24px; color: rgba(255, 255, 255, 0.9); font-size: 14.5px; line-height: 2; }
.closing__text--tight { margin-top: 16px; }

.flow { margin-top: 32px; margin-left: auto; margin-right: auto; max-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.flow__step {
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.flow__arrow { color: var(--color-pink); font-size: 16px; line-height: 1; }

.closing .btn-cta { margin-top: 36px; }

/* -------------------------------------------------------------------------
   レスポンシブ対応(スマホ幅の微調整)
   ------------------------------------------------------------------------- */

/* 極小幅スマホ(iPhone SE等 ~360px以下)。見出し・タイトルを少し詰める */
@media (max-width: 359px) {
  .header { padding: 30px 18px 26px; }
  .header__title-line--lg { font-size: 29px; }
  .intro { padding: 32px 18px; }
  .intro__title { font-size: 20px; }
  .showcase { padding: 32px 14px 28px; }
  .showcase-card__headline { font-size: 23px; }
  .showcase-card__photo { width: 68px; }
  .closing { padding: 40px 18px; }
  .closing__title { font-size: 22px; }
  .btn-cta { font-size: 14.5px; gap: 6px; padding: 14px 6px; }
  .btn-cta__icon, .btn-cta i { font-size: 20px !important; }
}

/* 420px以上でSTEP一覧・写真枠を少しゆったりさせる(元デザインのmin-[420px]:相当) */
@media (min-width: 420px) {
  .showcase-card__steps { font-size: 11.5px; }
  .showcase-card__photo { width: 104px; }
}

/* 400px以上で②の見出し文の改行を1行にまとめる(元デザインのmin-[400px]:inline相当) */
@media (min-width: 400px) {
  .intro__br { display: inline; }
}
@media (max-width: 399px) {
  .intro__br { display: none; }
}

/* タブレット以上の幅で見たとき、外側の余白を少し持たせて「スマホ実機プレビュー」らしい枠にする */
@media (min-width: 640px) {
  body { padding: 24px 0; }
  .page-shell { border-radius: 20px; min-height: auto; }
}