@charset "UTF-8";

/* =========================================================
   MORROW ROASTERS / 3 MOODS COFFEE BOX（架空のD2Cコーヒーブランド）
   デザイン方向：エスプレッソブラウン × 生成り × テラコッタ
   雑誌・パッケージのようなエディトリアル／紙・木・陶器の質感／3商品の色分け
   商品写真とパッケージを主役に。悩みは長く語らず、テンポよく見せる
   ========================================================= */

:root {
  --espresso:   #3B2A21;   /* 濃いブラウン（濃い面・見出し） */
  --espresso-dp:#241812;
  --kinari:     #F4EDE3;   /* 生成り（基本の地色） */
  --kinari-2:   #EAE0D2;
  --terra:      #B5623C;   /* テラコッタ（図・線） */
  --terra-tx:   #9C4E2C;   /* 文字・ボタン用に沈めたテラコッタ（生成り地で5.1:1） */
  --ink:        #2A1D16;
  --muted:      #6B5548;   /* 補足文（生成り地で6.0:1） */
  --muted-dk:   #D8C9B8;   /* 濃い面の補足文 */
  --line:       #DCCDB9;
  --line-dk:    #554034;

  /* 3商品の色分け */
  --clear:  #C9873F;
  --mellow: #A9705E;
  --deep:   #4A3226;

  --radius: 4px;           /* エディトリアルなので角はほぼ立てる */
  --shadow: 0 2px 6px rgba(59,42,33,.06), 0 18px 40px rgba(59,42,33,.10);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--kinari);
  line-height: 1.95;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
  word-break: auto-phrase;
}

h1, h2, h3 { margin: 0; line-height: 1.5; font-weight: 700; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: var(--terra-tx); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }
.wrap-narrow { width: min(720px, 100% - 2.5rem); }

.br-pc { display: none; }
@media (min-width: 768px) { .br-pc { display: inline; } .br-sp { display: none; } }

/* ============ ヘッダー ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,237,227,.90);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-in { display: flex; align-items: center; gap: 1.5rem; min-height: 62px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--espresso); margin-right: auto; }
.logo-mark { display: block; width: 26px; height: 26px; color: var(--terra); }
.logo-text {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600;
  letter-spacing: .14em; line-height: 1.1;
  display: flex; flex-direction: column;
}
.logo-text small { font-family: var(--sans); font-size: .52rem; font-weight: 500; letter-spacing: .3em; color: var(--muted); }

.gnav { display: none; gap: 1.5rem; }
.gnav a { color: var(--espresso); text-decoration: none; font-size: .82rem; font-weight: 500; letter-spacing: .06em; }
.gnav a:hover { color: var(--terra-tx); }
@media (min-width: 900px) { .gnav { display: flex; } }

@media (max-width: 460px) {
  .logo-text { font-size: 1.05rem; }
  .site-header .btn-sm { padding: .5rem .75rem; font-size: .74rem; }
}

/* ============ ボタン ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--terra-tx); color: #fff;
  padding: 1rem 2.2rem;
  border: 0; border-radius: var(--radius);
  font-family: var(--sans); font-size: .95rem; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover { background: #85411f; transform: translateY(-1px); }
.btn-sm { padding: .6rem 1.1rem; font-size: .8rem; letter-spacing: .05em; }
.btn-lg { padding: 1.15rem 2.8rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ============ セクション共通 ============ */
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-alt { background: var(--kinari-2); }
.section-dark { background: var(--espresso); color: var(--kinari); }
.section-dark .lead, .section-dark .note { color: var(--muted-dk); }
.section-dark .eyebrow { color: #E0A46E; }

.eyebrow {
  font-family: var(--serif);
  font-size: .95rem; font-weight: 600; letter-spacing: .3em;
  color: var(--terra-tx);
  margin-bottom: .9rem;
}
.h2 { font-size: clamp(1.45rem, 3.9vw, 2.15rem); letter-spacing: .02em; margin-bottom: 1.1rem; }
.lead { color: var(--muted); font-size: .95rem; max-width: 42em; margin-bottom: 3rem; }
.note { color: var(--muted); font-size: .78rem; margin-top: 1.2rem; }

.badge-sample {
  display: inline-block;
  border: 1px solid var(--terra-tx); color: var(--terra-tx);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  padding: .1rem .5rem; border-radius: 2px;
  margin-right: .6rem; vertical-align: .1em;
}

/* ============ ①ヒーロー ============ */
.hero {
  position: relative;
  /* 写真が3:2の横位置なので、縦を欲張ると寄りすぎて袋が切れる */
  min-height: min(74vh, 660px);
  display: grid; align-items: center;
  padding: 5rem 0 6rem;
  background: linear-gradient(150deg, var(--kinari-2) 0%, var(--kinari) 55%, #E7DACA 100%);
  overflow: hidden;
}
/* 写真が入るまではグラデーションが見えるだけ。ファイルを置けば自動で表示される */
.hero-photo {
  position: absolute; inset: 0;
  background-image: url("images/hero.jpg");
  background-size: cover;
  /* 袋が中央に3つ並ぶ構図なので、右寄りに送って文字と重ならないようにする */
  background-position: 76% 55%;
  opacity: .92;
}
/* 文字を読ませるためのベール。狭い画面では全面にかけ、
   広い画面では左を濃く・右を薄くして、右側の袋を見せる */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,237,227,.92) 0%, rgba(244,237,227,.86) 55%, rgba(244,237,227,.72) 100%);
}
@media (min-width: 900px) {
  .hero::after {
    background: linear-gradient(100deg, rgba(244,237,227,.96) 0%, rgba(244,237,227,.90) 38%, rgba(244,237,227,.42) 68%, rgba(244,237,227,.10) 100%);
  }
  /* 左端の袋を切り落として、文字の後ろに袋が透けないようにする */
  .hero-photo { background-position: 90% 62%; }
  .hero-in > * { max-width: 36rem; }   /* 文字を左半分に収める */
}
.hero-in { position: relative; z-index: 2; }
.hero-title {
  font-size: clamp(1.95rem, 5vw, 2.9rem);
  font-weight: 900; line-height: 1.44; letter-spacing: .01em;
  margin-bottom: 1.6rem;
}
.hero-lead { color: var(--muted); font-size: clamp(.92rem, 2vw, 1.02rem); margin-bottom: 2.4rem; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.hero-note { font-size: .8rem; color: var(--muted); letter-spacing: .04em; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 2.2rem; z-index: 2;
  width: 1px; height: 46px; background: var(--terra);
  opacity: .5;
}

/* ============ ②敵 ============ */
.pains { display: grid; gap: 0; margin: 2.4rem 0 2rem; border-top: 1px solid var(--line-dk); }
.pains li {
  padding: 1.15rem 0 1.15rem 2.2rem;
  border-bottom: 1px solid var(--line-dk);
  font-size: .95rem; font-weight: 500;
  position: relative;
}
.pains li::before {
  content: ""; position: absolute; left: .3rem; top: 1.75em;
  width: 12px; height: 1px; background: #E0A46E;
}
.pains-close { font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 700; letter-spacing: .04em; }

/* ============ ③3つの気分 ============ */
.moods { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .moods { grid-template-columns: repeat(3, 1fr); } }

.mood {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.6rem 1.6rem;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mood:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* パッケージの袋（CSSで作図） */
.mood-bag {
  position: relative;
  width: 92px; height: 116px;
  margin: 0 auto 1.6rem;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(160deg, var(--bag, #C9873F) 0%, color-mix(in srgb, var(--bag, #C9873F) 78%, #000) 100%);
  box-shadow: 0 10px 22px rgba(59,42,33,.18);
  transition: transform .4s ease;
}
.mood:hover .mood-bag { transform: rotate(-3deg) translateY(-4px); }
.mood-bag-top {   /* 圧着された口 */
  position: absolute; left: 6px; right: 6px; top: -7px; height: 14px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bag, #C9873F) 62%, #000);
}
.mood-bag-label {
  position: absolute; left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: .2em;
  color: rgba(255,255,255,.86);
}
.mood-clear  { --bag: var(--clear); }
.mood-mellow { --bag: var(--mellow); }
.mood-deep   { --bag: var(--deep); }

.mood-en {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600; letter-spacing: .22em;
  color: var(--espresso); line-height: 1.2;
}
.mood-clear  .mood-en { color: #9A6420; }
.mood-mellow .mood-en { color: #8A5245; }
.mood-deep   .mood-en { color: var(--deep); }

.mood-ja { font-size: 1rem; margin: .5rem 0 .9rem; }
.mood-body { font-size: .87rem; color: var(--muted); margin-bottom: 1.5rem; }

.mood-spec { margin-top: auto; border-top: 1px solid var(--line); padding-top: .9rem; }
.mood-spec > div { display: grid; grid-template-columns: 3.6em 1fr; align-items: center; gap: .6rem; padding: .3rem 0; }
.mood-spec dt { font-size: .74rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.mood-spec dd { margin: 0; font-size: .84rem; font-weight: 700; }

/* 5段階のバー */
.bar { display: flex; gap: 4px; }
.bar::before {
  content: ""; width: calc(var(--n) * 14px + (var(--n) - 1) * 4px); height: 6px;
  border-radius: 3px; background: var(--bag, var(--terra));
  box-shadow: 0 0 0 1px rgba(59,42,33,.06);
}

/* ============ ④開封（箱が開く） ============ */
.open-in { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 960px) { .open-in { grid-template-columns: 1fr 1fr; } }
.open-list { margin-top: 2rem; display: grid; gap: .7rem; }
.open-list li { position: relative; padding-left: 1.6rem; font-size: .9rem; font-weight: 500; }
.open-list li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--terra);
}

/* 開封の写真。ファイルが無い間は下地の色が見えるだけで崩れない */
.open-photo { margin: 0; }
.open-photo-img {
  aspect-ratio: 3 / 2;
  background-color: var(--kinari-2);
  background-image: url("images/open.jpg");
  background-size: cover; background-position: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ============ 写真の帯 ============ */
.band {
  height: clamp(220px, 34vw, 460px);
  background-color: var(--espresso);
  background-size: cover;
}
.band-drip { background-image: url("images/drip.jpg"); background-position: center 42%; }

/* 豆の接写（味の違いセクションの中） */
.beans { margin: 0 0 2.6rem; }
.beans-img {
  height: clamp(150px, 22vw, 260px);
  background-color: var(--espresso-dp);
  background-image: url("images/beans.jpg");
  background-size: cover; background-position: center;
  border-radius: var(--radius);
}
.beans figcaption { margin-top: .8rem; font-size: .8rem; color: var(--muted-dk); }

/* ============ ⑤3ステップ ============ */
.steps { display: grid; gap: 1.6rem; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { border-top: 2px solid var(--espresso); padding-top: 1.3rem; }
.step-no {
  display: block; font-family: var(--serif); font-size: 1.5rem;
  letter-spacing: .12em; color: var(--terra-tx); margin-bottom: .5rem;
}
.steps h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.steps p { font-size: .87rem; color: var(--muted); }

/* ============ ⑥比較表 ============ */
.table-scroll { overflow-x: auto; }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; }
.cmp th, .cmp td {
  padding: .95rem 1rem; text-align: left; font-size: .87rem;
  border-bottom: 1px solid var(--line-dk);
}
.cmp thead th {
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .16em;
  color: var(--kinari); border-bottom: 2px solid var(--line-dk);
  white-space: nowrap;
}
.cmp tbody th { font-weight: 700; color: var(--muted-dk); font-size: .8rem; letter-spacing: .06em; width: 8em; }
.cmp td { color: var(--kinari); font-weight: 500; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; vertical-align: .05em; }
.d-clear  { background: var(--clear); }
.d-mellow { background: var(--mellow); }
.d-deep   { background: #7A5540; }

/* ============ ⑦購入UI ============ */
.section-buy { background: var(--kinari-2); }
.order {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}

/* 初回 / 毎月 の切り替え（ラジオボタン＋CSSのみ。JSは使わない） */
.plan-input { position: absolute; opacity: 0; width: 0; height: 0; }
.order-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.order-tab {
  padding: .95rem 1rem; text-align: center; cursor: pointer;
  font-size: .88rem; font-weight: 700; letter-spacing: .06em;
  background: var(--kinari-2); color: var(--muted);
  border-bottom: 1px solid var(--line);
  transition: background-color .15s ease, color .15s ease;
}
.order-tab:hover { color: var(--espresso); }
#plan-trial:checked   ~ .order-tabs label[for="plan-trial"],
#plan-monthly:checked ~ .order-tabs label[for="plan-monthly"] {
  background: #fff; color: var(--espresso);
  border-bottom-color: transparent;
  box-shadow: inset 0 3px 0 var(--terra-tx);
}
/* キーボード操作でも、今どこにいるか分かるように */
#plan-trial:focus-visible   ~ .order-tabs label[for="plan-trial"],
#plan-monthly:focus-visible ~ .order-tabs label[for="plan-monthly"] {
  outline: 2px solid var(--terra-tx); outline-offset: -3px;
}

.panel { display: none; }
#plan-trial:checked   ~ .order-body .panel-trial,
#plan-monthly:checked ~ .order-body .panel-monthly { display: block; }

.order-body { padding: clamp(1.4rem, 4vw, 2.2rem); }
.order-head { display: grid; gap: .8rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
@media (min-width: 620px) { .order-head { grid-template-columns: 1fr auto; align-items: end; } }
.order-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; letter-spacing: .1em; }
.order-sub { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.order-price { white-space: nowrap; }
.order-price b { font-size: 2rem; font-weight: 900; letter-spacing: -.01em; }
.order-price span { font-size: .76rem; color: var(--muted); margin-left: .3rem; }

.order-field { margin: 0 0 1.5rem; }
.field-label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin-bottom: .6rem; }

/* 選択肢もラジオボタン。実際に選び替えられる */
.chooser { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; }
.chooser input { position: absolute; opacity: 0; width: 0; height: 0; }
.chooser label {
  padding: .6rem 1.2rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .85rem; font-weight: 500; color: var(--muted);
  background: #fff;
  transition: border-color .15s ease, color .15s ease;
}
.chooser label:hover { border-color: var(--terra); color: var(--espresso); }
.chooser input:checked + label {
  border-color: var(--terra-tx); color: var(--terra-tx);
  font-weight: 700; box-shadow: inset 0 0 0 1px var(--terra-tx);
}
.chooser input:focus-visible + label { outline: 2px solid var(--terra-tx); outline-offset: 2px; }

.order-note { font-size: .76rem; color: var(--muted); text-align: center; margin-top: .9rem; }

.subs-list {
  display: grid; gap: .55rem;
  margin-bottom: 1.6rem; padding: 1.1rem 1.2rem;
  background: #FBF7F0; border-radius: var(--radius);
}
.subs-list li { position: relative; padding-left: 1.5rem; font-size: .87rem; }
.subs-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--terra); border-bottom: 2px solid var(--terra);
  transform: rotate(-45deg);
}
.subs-note { font-size: .78rem; color: var(--muted); margin-top: 1.2rem; text-align: center; }

/* ============ ⑧FAQ ============ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.2rem 2.6rem 1.2rem 0;
  font-size: .93rem; font-weight: 700;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* ＋と−。2本とも同じ位置に置いて、片方だけ90度回すと十字になる */
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 1rem; top: 1.85rem;
  width: 14px; height: 2px; background: var(--terra-tx);
}
.faq summary::before { transform: rotate(90deg); transition: opacity .2s ease; }
.faq details[open] summary::before { opacity: 0; }
.faq-a { padding: 0 0 1.4rem; }
.faq-a p { font-size: .87rem; color: var(--muted); }

/* ============ ⑨最後 ============ */
.section-last {
  position: relative; isolation: isolate;
  background: var(--kinari-2); color: var(--ink);
  text-align: center; padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  overflow: hidden;
}
.last-photo {
  position: absolute; inset: 0; z-index: -1;
  background-image: url("images/morning.jpg");
  background-size: cover; background-position: center 62%;
}
.section-last::after {   /* 文字を読ませるためのベール */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(244,237,227,.88) 0%, rgba(244,237,227,.66) 45%, rgba(244,237,227,.86) 100%);
}
.section-last .wrap { position: relative; z-index: 1; }
.last-flag {
  font-family: var(--sans); font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 900; line-height: 1.6; letter-spacing: .04em;
  margin-bottom: 2.2rem;
}
.last-note { font-size: .8rem; color: var(--muted); margin-top: 1.2rem; }

/* ============ フッター ============ */
.site-footer { background: var(--espresso-dp); color: var(--muted-dk); padding: 3.5rem 0 2.5rem; text-align: center; }
.footer-logo { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: .3em; color: var(--kinari); }
.footer-cred { font-size: .82rem; margin-top: .6rem; }
.disclaimer {
  margin-top: 2rem; padding: 1rem 1.2rem;
  border: 1px solid var(--line-dk); border-radius: var(--radius);
  font-size: .76rem; line-height: 1.85; text-align: left;
}
.copyright { margin-top: 1.6rem; font-size: .72rem; letter-spacing: .1em; }

/* ============ 動き（JS不使用） ============================
   スクロール連動は animation-timeline: view() のみ。
   @supports で囲んであるので、非対応ブラウザでは最初から表示される
   ＝白紙事故が起きない。reduce-motion では全部止まる */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .reveal {
      animation: revealIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes revealIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: none; }
    }

    /* 3つの袋が、順番に立ち上がる */
    .mood-bag {
      animation: bagIn linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
    @keyframes bagIn {
      from { opacity: 0; transform: translateY(26px) rotate(-8deg); }
      to   { opacity: 1; transform: none; }
    }

    /* 箱の写真が、ふたが開くように上から現れる */
    .open-photo-img {
      animation: openReveal linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    @keyframes openReveal {
      from { clip-path: inset(0 0 62% 0); opacity: .8; }
      to   { clip-path: inset(0 0 0 0);   opacity: 1; }
    }

    /* 写真の帯が、スクロールに合わせてゆっくり流れる */
    .band-drip {
      animation: bandPan linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes bandPan {
      from { background-position: center 30%; }
      to   { background-position: center 62%; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .mood, .mood-bag { transition: none; }
}