@charset "UTF-8";

/* =========================================================
   クエクエ LP（案A：卒業アルバム）
   デザイントークン＝このページで使う色・余白・角丸・文字の設定をまとめた場所
   ここの数値を変えると、ページ全体の見た目がまとめて変わります
   ========================================================= */
:root {
  /* --- 色 --- */
  --color-bg: #FBE7EC;          /* ページ全体の背景。ほんのり桜色 */
  --color-card: #ffffff;        /* LP本体（カード）の白 */
  --color-pink-soft: #FBE7EC;   /* ファーストビュー・中間CTAの背景（桜色） */
  --color-pink-tint: #F8DCE3;   /* 価格の箱・番号丸・実績チップ（少し濃い桜色） */
  --color-pink-strong: #C43C5C; /* DMボタンの濃いピンク */
  --color-text: #6B3143;        /* 本文の文字色（濃い小豆色） */
  --color-heading: #5E2836;     /* 見出し・濃い背景の色 */
  --color-eyebrow: #C4526C;     /* LINEUP など小見出しラベルの色 */
  --color-on-dark: #ffffff;     /* 濃い背景の上の白文字 */
  --color-on-dark-sub: #F0C9D4; /* 濃い背景の上の補足文字 */
  --color-on-dark-mute: #DCA9B7;/* 濃い背景の上の署名文字 */
  --shadow-card: 0 18px 50px rgba(107, 49, 67, 0.16);   /* カードの影 */
  --shadow-button: 0 8px 20px rgba(107, 49, 67, 0.22);  /* ボタンの影 */

  /* --- 幅と余白 --- */
  --width-card: 600px;   /* 案Aの想定幅。パソコンでもこの幅で中央に置く */
  --space-side: 40px;    /* 左右の余白 */
  --space-block: 72px;   /* セクションの上下の余白 */
  --space-gap-lg: 36px;  /* 大きいすき間 */
  --space-gap-md: 26px;  /* 中くらいのすき間 */
  --space-gap-sm: 14px;  /* 小さいすき間 */

  /* --- 角丸 --- */
  --radius-card: 28px;   /* カード全体 */
  --radius-lg: 24px;     /* 大きい写真・価格の箱 */
  --radius-md: 20px;     /* 小さい写真・ボタン・チップ */

  /* --- 文字 --- */
  --font-base: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --weight-body: 500;    /* 本文はMedium */
  --weight-bold: 700;    /* 見出しはBold */
  --weight-black: 800;   /* いちばん強い見出し */

  --size-hero: 46px;     /* キャッチコピー */
  --size-section: 32px;  /* セクション見出し */
  --size-price: 34px;    /* 価格 */
  --size-cta: 26px;      /* DMボタンの文字 */
  --size-lead: 20px;     /* リード文・注文の流れ */
  --size-item: 22px;     /* 種類の名前 */
  --size-body: 17px;     /* 本文 */
}

/* =========================================================
   土台のリセット
   ========================================================= */
* {
  box-sizing: border-box; /* 余白を含めた大きさで計算する */
}

html {
  -webkit-text-size-adjust: 100%; /* スマホで文字が勝手に拡大されないように */
}

body,
h1, h2, h3,
p, ol, li {
  margin: 0;    /* ブラウザが最初から付ける余白を消す */
  padding: 0;
}

ol {
  list-style: none; /* 注文の流れの「・」や数字を消す（番号は丸で自作する） */
}

img {
  max-width: 100%; /* 画像がはみ出さないように */
}

/* =========================================================
   ページ全体
   ========================================================= */
.page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: var(--weight-body);
  /* 画面がカードより広いときだけ、上下に余白を作ってカードらしく見せる */
  padding: 0;
}

/* LP本体のカード。スマホでは画面いっぱい、パソコンでは600pxで中央に置く */
.lp {
  width: 100%;
  max-width: var(--width-card);
  margin: 0 auto;
  background: var(--color-card);
  overflow: hidden;
}

/* セクション共通の余白 */
.lp__section {
  padding: var(--space-block) var(--space-side);
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-lg);
}

/* 前のセクションと続けて見せるとき（上の余白をなくす） */
.lp__section--no-top {
  padding-top: 0;
}

/* 背景が桜色のセクション */
.lp__section--pink {
  background: var(--color-pink-soft);
}

/* 背景が濃い色のセクション（一番下） */
.lp__section--dark {
  background: var(--color-heading);
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* =========================================================
   DMボタン（3か所で共通して使う）
   ========================================================= */
.cta-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-pink-strong);
  color: var(--color-on-dark);
  text-decoration: none;
  padding: 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-button);
}

/* まん中のCTAで横幅いっぱいにするとき */
.cta-button--wide {
  width: 100%;
}

/* 濃い背景の上に置く、色を反転したボタン（一番下） */
.cta-button--light {
  background: var(--color-pink-tint);
  color: var(--color-heading);
  width: 100%;
  padding: 26px;
  box-shadow: none;
}

.cta-button__main {
  font-size: var(--size-cta);
  font-weight: var(--weight-bold);
}

/* 一番下のボタンだけ少し大きい */
.cta-button--light .cta-button__main {
  font-size: 28px;
}

.cta-button__sub {
  font-size: 16px;
}

/* =========================================================
   セクションの見出し（LINEUP / GALLERY / ORDER）
   ========================================================= */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-sm);
}

.section-head__eyebrow {
  font-size: 15px;
  letter-spacing: 0.1em;
  font-weight: var(--weight-bold);
  color: var(--color-eyebrow);
}

.section-head__title {
  font-size: var(--size-section);
  font-weight: var(--weight-bold);
}

/* =========================================================
   ファーストビュー
   ========================================================= */
.hero {
  padding: 44px var(--space-side) 40px;
  gap: var(--space-gap-md);
}

/* 上のバー：左に店名、右に商品名 */
.hero__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--color-heading);
}

.hero__brand-name {
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
}

/* 「どんな人向けか」を白い帯で中央に置く */
.hero__target {
  background: var(--color-card);
  color: var(--color-text);
  align-self: center;
  text-align: center;
  font-size: 16px;
  font-weight: var(--weight-bold);
  padding: 12px 28px;
  border-radius: var(--radius-md);
  line-height: 1.75;
}

.hero__title {
  font-size: var(--size-hero);
  font-weight: var(--weight-black);
  line-height: 1.35;
  color: var(--color-heading);
  text-wrap: pretty;
}

.hero__lead {
  font-size: var(--size-lead);
  line-height: 2;
  color: var(--color-heading);
}

.hero__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-card);
}

.hero__photo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ファーストビューの実績チップ（DMボタンのすぐ下に2つならべる） */
.hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* =========================================================
   種類の紹介（LINEUP）
   ========================================================= */
.lineup__list {
  display: grid;
  gap: 24px;
}

/* 左に正方形の写真、右に説明。写真は実物が見えるよう大きめにとる */
.lineup-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: center;
}

.lineup-item__img {
  width: 180px;
  height: 180px;
  object-fit: cover;   /* 正方形に切り取って表示 */
  border-radius: var(--radius-md);
  display: block;
}

.lineup-item__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lineup-item__name {
  font-size: var(--size-item);
  font-weight: var(--weight-bold);
}

.lineup-item__text {
  font-size: var(--size-body);
  line-height: 1.9;
}

/* 価格の箱 */
.price-box {
  background: var(--color-pink-tint);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.price-box__price {
  font-size: var(--size-price);
  font-weight: var(--weight-black);
}

.price-box__note {
  font-size: 18px;
  font-weight: var(--weight-body);
}

.price-box__text {
  font-size: 16px;
  line-height: 1.9;
}

/* =========================================================
   実物の写真（GALLERY）
   ========================================================= */
.gallery {
  gap: 32px;
}

.gallery__main {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* 小さい写真を2枚ならべる */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.gallery__thumb {
  width: 100%;
  /* height:auto を必ず指定する。これがないとHTMLの height="280" が効いてしまい、
     aspect-ratio が無視されて2枚の高さがそろわなくなる */
  height: auto;
  aspect-ratio: 1;     /* 2枚とも正方形に切りそろえる */
  object-fit: cover;   /* 縦横比が違う写真でも、はみ出す分を切って正方形に収める */
  border-radius: var(--radius-md);
  display: block;
}

.gallery__caption {
  font-size: var(--size-body);
  line-height: 1.9;
}

/* =========================================================
   まん中のCTA
   ========================================================= */
.midcta {
  padding: 56px var(--space-side);
  align-items: center;
  text-align: center;
  gap: 22px;
}

.midcta__text {
  font-size: var(--size-cta);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  line-height: 1.7;
}

/* =========================================================
   注文の流れ（ORDER）
   ========================================================= */
.order__list {
  display: grid;
  gap: 22px;
}

/* 左に番号の丸、右に説明 */
.order-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: center;
}

.order-step__num {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--color-pink-tint);
  display: grid;
  place-items: center;
  font-size: var(--size-item);
  font-weight: var(--weight-bold);
}

.order-step__text {
  font-size: var(--size-lead);
}

/* =========================================================
   作り手の紹介と実績
   ========================================================= */
.story {
  gap: 28px;
}

.story__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

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

.story__title {
  font-size: var(--size-section);
  font-weight: var(--weight-bold);
}

.story__text {
  font-size: 18px;
  line-height: 2;
}

/* 実績のチップを2つならべる */
.story__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-chip {
  background: var(--color-pink-tint);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.stat-chip__num {
  font-size: 30px;
  font-weight: var(--weight-bold);
}

.stat-chip__unit {
  font-size: 17px;
}

.stat-chip__label {
  font-size: 15px;
}

/* 小さい版のチップ（ファーストビュー用）。下部の実績チップより一回り控えめにする */
.stat-chip--sm {
  padding: 14px 10px;
  gap: 2px;
}

.stat-chip--sm .stat-chip__num {
  font-size: 22px;
}

.stat-chip--sm .stat-chip__unit {
  font-size: 14px;
}

.stat-chip--sm .stat-chip__label {
  font-size: 13px;
}

/* =========================================================
   一番下のCTA
   ========================================================= */
.closing {
  padding: 64px var(--space-side);
}

.closing__title {
  font-size: 30px;
  font-weight: var(--weight-bold);
  color: var(--color-on-dark);
  line-height: 1.6;
}

.closing__note {
  font-size: var(--size-body);
  line-height: 1.9;
  color: var(--color-on-dark-sub);
}

.closing__sign {
  font-size: 14px;
  color: var(--color-on-dark-mute);
  margin-top: 12px;
}

/* =========================================================
   画面がせまいとき（スマホ・幅599px以下）
   案Aは幅600pxで作られているので、文字と余白だけ少し小さくする
   ========================================================= */
@media (max-width: 599px) {
  :root {
    --space-side: 22px;
    --space-block: 56px;
    --space-gap-lg: 28px;
    --size-hero: 33px;
    --size-section: 26px;
    --size-price: 28px;
    --size-cta: 22px;
    --size-lead: 17px;
    --size-item: 19px;
    --size-body: 16px;
  }

  /* 種類の紹介：スマホでも実物が見えるよう写真を大きめに。すき間は詰めて説明の幅を確保する */
  .lineup-item {
    grid-template-columns: 140px 1fr;
    gap: 14px;
  }

  .lineup-item__img {
    width: 140px;
    height: 140px;
  }

  /* 「イニシャルストラップ」が「ップ」だけ2行目に落ちないよう、名前だけ少し小さくする */
  .lineup-item__name {
    font-size: 17px;
  }

  /* 写真が大きくなった分、説明文が窮屈にならないよう行間だけ少し詰める */
  .lineup-item__text {
    line-height: 1.75;
  }

  /* 番号の丸も少し小さく */
  .order-step {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .order-step__num {
    width: 48px;
    height: 48px;
  }

  /* ボタンの補足文字が折り返さないように */
  .cta-button__sub {
    font-size: 14px;
  }

  .cta-button--light .cta-button__main {
    font-size: 24px;
  }

  .price-box {
    padding: 26px 20px;
  }

  .stat-chip {
    padding: 20px 12px;
  }

  .closing__title {
    font-size: 26px;
  }
}

/* =========================================================
   画面が広いとき（幅640px以上＝タブレット・パソコン）
   カードの角を丸くして影を付け、上下に余白を作って中央に浮かせる
   ========================================================= */
@media (min-width: 640px) {
  .page {
    padding: 40px 20px 60px;
  }

  .lp {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }
}