:root {
  /* 白地・墨文字。黒地のときと同じく、わずかに温度を持たせる */
  --bg: #ffffff;
  --bg-card: #ffffff;
  --surface: rgba(26, 23, 20, 0.045);
  --overlay: rgba(255, 255, 255, 0.92);
  --border: rgba(26, 23, 20, 0.14);
  --rule: rgba(26, 23, 20, 0.28);
  --gold: #1a1714;
  --brown: #1a1714;
  --text: #1a1714;
  --text-muted: #6b6762;
  --accent-soft: rgba(26, 23, 20, 0.07);
  --shadow: rgba(26, 23, 20, 0.14);
  /* 指している場所を示すときだけ使う抹茶色 */
  --accent: #7d9b4e;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  padding-top: 57px;
  overflow-x: hidden;
  /* 欧文を先に並べる。和文書体は日本語だけを拾う */
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Hiragino Mincho ProN", "Yu Mincho", serif;
  background: var(--bg);
  color: var(--text);
  line-height: 2.05;
}

section {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 24px;
}

/* スクロールで各フェーズが視界に入ったら、静かに浮かび上がらせる。
   js-reveal は script.js が付けるので、JSが動かない環境では本文がそのまま表示される */
html.js-reveal .phase {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22, 0.7, 0.25, 1),
              transform 1s cubic-bezier(0.22, 0.7, 0.25, 1);
}

html.js-reveal .phase.is-revealed {
  opacity: 1;
  transform: none;
}

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

/* ページ内リンクで飛んだとき、固定ヘッダーの下に隠れないようにする */
.phase,
#contact {
  scroll-margin-top: 78px;
}



/* 常時表示の上部バー(メニュー + 言語切り替え + 購入ボタン) */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  /* 下地もぼかしも持たせない。背後をそのまま見せる */
  background: transparent;
  border-bottom: none;
}

/* 絶対配置だとボタンが大きくなったとき重なるので、左右の間に挟んで場所を取り合わせる */
.topbar-brand {
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 中央固定のまま、文字の上だけタップを受ける（左右のボタンは塞がない） */
  pointer-events: auto;
  cursor: pointer;
  padding: 6px 8px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--brown);
  white-space: nowrap;
  overflow: hidden;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 指で押しやすいよう、見た目の大きさに関わらず44pxの当たり判定を確保する */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* display は切り替えを滑らかにできないので、常時 flex にしたうえで
   visibility と opacity で出し入れする */
.nav-drawer {
  display: flex;
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  z-index: 99;
  flex-direction: column;
  background: var(--overlay);
  border-bottom: 1px solid var(--gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* 開くときは一拍おいてゆっくり。閉じるときは待たせず素早く畳む */
  transition: opacity 0.2s ease,
              transform 0.2s ease,
              visibility 0s linear 0.2s;
}

.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.42s ease 0.12s,
              transform 0.42s cubic-bezier(0.22, 0.7, 0.25, 1) 0.12s,
              visibility 0s;
}

/* 項目は上から順に。一度に出すより落ち着いて見える */
.nav-drawer .nav-link,
.nav-drawer .auth-picker {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-drawer.is-open .nav-link,
.nav-drawer.is-open .auth-picker {
  opacity: 1;
  transform: none;
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.nav-drawer.is-open > *:nth-child(1) { transition-delay: 0.20s; }
.nav-drawer.is-open > *:nth-child(2) { transition-delay: 0.26s; }
.nav-drawer.is-open > *:nth-child(3) { transition-delay: 0.32s; }
.nav-drawer.is-open > *:nth-child(4) { transition-delay: 0.38s; }
.nav-drawer.is-open > *:nth-child(5) { transition-delay: 0.44s; }
.nav-drawer.is-open > *:nth-child(6) { transition-delay: 0.50s; }
.nav-drawer.is-open > *:nth-child(7) { transition-delay: 0.56s; }
.nav-drawer.is-open > *:nth-child(8) { transition-delay: 0.62s; }
.nav-drawer.is-open > *:nth-child(n + 9) { transition-delay: 0.68s; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer .nav-link,
  .nav-drawer .auth-picker {
    transition: none;
  }
}

.nav-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.nav-link:last-child {
  border-bottom: none;
}

/* ハンバーガーの引き出しと同じ出し方に揃える */
.search-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  z-index: 99;
  align-items: center;
  gap: 14px;
  padding: 30px 24px 32px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* 画面を横切る白い線は強すぎるので、細く落とす */
  border-bottom: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease,
              transform 0.2s ease,
              visibility 0s linear 0.2s;
}

/* 画面幅いっぱいに引き伸ばさず、中央の一列に収める */
.search-bar > * {
  width: min(520px, 100%);
}

.search-bar.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.42s ease 0.12s,
              transform 0.42s cubic-bezier(0.22, 0.7, 0.25, 1) 0.12s,
              visibility 0s;
}

.search-bar > * {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.search-bar.is-open > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.search-bar.is-open > *:nth-child(1) { transition-delay: 0.20s; }
.search-bar.is-open > *:nth-child(2) { transition-delay: 0.26s; }
.search-bar.is-open > *:nth-child(3) { transition-delay: 0.32s; }

.search-input {
  box-sizing: border-box;
  padding: 10px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-align: center;
  transition: border-color 0.3s ease;
}

.search-input::placeholder {
  color: var(--text-muted);
  letter-spacing: 0.12em;
}

.search-input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.search-submit {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 4px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: color 0.3s ease;
}

.search-submit:hover {
  color: var(--text);
}

.search-status {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--text-muted);
  min-height: 1em;
}

/* 検索でジャンプした先を一時的に目立たせる */
.search-highlight {
  animation: search-flash 2s ease;
}

@keyframes search-flash {
  0% {
    box-shadow: inset 0 0 0 2px var(--gold);
  }
  100% {
    box-shadow: inset 0 0 0 2px transparent;
  }
}

.lang-picker {
  position: relative;
}

.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--gold);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  min-height: 40px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lang-toggle-btn:hover {
  background: var(--accent-soft);
}

.lang-caret {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
}

.lang-picker.is-open .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 102;
  min-width: 178px;
  padding: 6px 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 20px 48px var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease,
              transform 0.18s ease,
              visibility 0s linear 0.18s;
}

.lang-picker.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.36s ease 0.1s,
              transform 0.36s cubic-bezier(0.22, 0.7, 0.25, 1) 0.1s,
              visibility 0s;
}

/* 言語も上から順に灯す */
.lang-menu .lang-option {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lang-picker.is-open .lang-option {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.lang-picker.is-open .lang-option:nth-child(1) { transition-delay: 0.16s; }
.lang-picker.is-open .lang-option:nth-child(2) { transition-delay: 0.20s; }
.lang-picker.is-open .lang-option:nth-child(3) { transition-delay: 0.24s; }
.lang-picker.is-open .lang-option:nth-child(4) { transition-delay: 0.28s; }
.lang-picker.is-open .lang-option:nth-child(5) { transition-delay: 0.32s; }
.lang-picker.is-open .lang-option:nth-child(6) { transition-delay: 0.36s; }
.lang-picker.is-open .lang-option:nth-child(7) { transition-delay: 0.40s; }
.lang-picker.is-open .lang-option:nth-child(8) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .search-bar,
  .search-bar > *,
  .lang-menu,
  .lang-menu .lang-option {
    transition: none;
  }
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26, 23, 20, 0.06);
  color: var(--text);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 12px 18px;
  cursor: pointer;
  text-align: left;
}

.lang-option:last-child {
  border-bottom: none;
}

.lang-option:hover {
  background: var(--accent-soft);
}

.lang-option.is-selected {
  color: var(--gold);
  font-weight: bold;
}

.auth-picker {
  position: relative;
}

.auth-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 102;
  width: 240px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  box-shadow: 0 8px 24px var(--shadow);
}

.auth-panel.is-open {
  display: block;
}

.auth-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* display:flex が hidden 属性に勝ってしまうので、明示的に打ち消す */
.auth-view[hidden] {
  display: none;
}

.auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
}

.auth-input::placeholder {
  color: var(--text-muted);
}

.auth-input:focus {
  outline: none;
  border-color: var(--gold);
}

.auth-submit {
  background: var(--gold);
  color: var(--bg-card);
  border: 1px solid var(--gold);
  padding: 10px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.auth-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.auth-switch {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.85;
}

.auth-link {
  background: none;
  border: none;
  color: var(--gold);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.auth-status {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  color: var(--gold);
  min-height: 1em;
  text-align: center;
}

.auth-greeting {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--text);
  text-align: center;
}

.topbar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--gold);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* ハンバーガーメニュー内のログイン項目 */
.nav-login {
  width: 100%;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* ドロワー内では浮かせず、メニューの一部としてその場で開く */
.nav-drawer .auth-panel {
  position: static;
  width: auto;
  border: none;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  max-width: none;
  padding: 0;
  color: var(--text);
}

.hero-video-placeholder {
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  z-index: 0;
  overflow: hidden;
}

/* picture は行内要素なので、そのままだと中の写真が高さを取れない */
.hero-video-placeholder picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  /* 遅らせても枠の外に空きが出ない仕組みにしたので、余りは持たせない。
     余りを持たせるとその分だけ上下が切れ、鳥居が欠ける */
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 上部バーのアイコンが霧の明るさに負けるので、上端だけ僅かに落とす。
   下端は地色へ溶かす。写真が切れて黒が始まると、その境目が
   「黒い幕が上がってくる」ように見えてしまうため */
.hero-video-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 13%,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0) 88%,
    rgba(255, 255, 255, 0.75) 100%
  );
}

/* スクロールに合わせて画面全体が暮れていく。
   下から幕が上がるのではなく、写真そのものが沈む。
   --hero-dim は script.js が入れる */
.hero-video-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  opacity: var(--hero-dim, 0);
  pointer-events: none;
}

.hero-video-label {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.7;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  padding: 64px 24px 48px;
}

.brand-mark {
  display: block;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--brown);
  margin-bottom: 8px;
}

.brand-mark-en {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  color: var(--gold);
  margin-top: 8px;
}

.hero .hero-tagline,
.hero .brand-mark,
.hero .brand-mark-en,
.hero .hero-eyebrow {
  color: #ffffff;
  /* 下地の膜を外したぶん、文字側で輪郭を持たせる */
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.45);
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
}

.hero-tagline-stage {
  position: relative;
  min-height: 8rem;
  margin-bottom: 20px;
}

.hero .hero-tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero .hero-tagline.is-active {
  opacity: 1;
}

/* 中央揃えは「字幅」で中心を取るが、和文の句点「。」は字幅1emのうち
   墨が左下に寄っていて、右側に約0.68em分の空白が残る。
   その空白まで含めて中心が計算されるため、文字は左へずれて見える。
   空白の半分だけ右へ戻して、目で見た中心に合わせる。
   句点で終わらない言語(en/ko/fr/de/es)には当てない */
html[data-lang="ja"] .hero .hero-tagline:not(.hero-tagline-brand) {
  transform: translateX(0.34em);
}

.hero-tagline-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 屋号だけ少し上に置く。キャッチコピーの位置は動かさない */
  transform: translateY(-62px);
}

.hero-tagline-brand .brand-mark {
  margin-bottom: 0;
}


.hero-sub {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.product {
  text-align: center;
  padding-top: 40px;
}

.product-photo-placeholder {
  aspect-ratio: 4 / 3;
  max-width: 320px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

.product-name {
  margin: 20px 0 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--brown);
}

.product-price {
  margin: 8px 0 0;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.product .cta-button {
  display: inline-block;
  margin-top: 24px;
}

h2 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
  position: relative;
  margin: 0 0 36px;
}

.contact p {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.contact {
  text-align: center;
}

.contact-link {
  color: var(--gold);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  text-align: left;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.contact-submit {
  display: block;
  width: 100%;
  background: var(--gold);
  color: var(--bg-card);
  border: 1px solid var(--gold);
  padding: 16px;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact-submit:hover {
  opacity: 0.85;
}

.contact-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.contact-status {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gold);
  min-height: 1.2em;
}

.craft-intro {
  margin: 0;
  font-size: 0.9rem;
  line-height: 2.1;
  text-align: center;
  color: var(--text-muted);
}

/* 2枚を横に並べず、1枚ずつ送るカルーセルにする。
   スクロールスナップで動かすので、JSが止まっても指で送れる */
.craft-carousel {
  /* 本文欄の外へ出して画面の端まで広げる。
     覗かせる余白はトラック側(.craft-photos の padding)が持っている */
  width: 100vw;
  margin: 48px 0 0 50%;
  transform: translateX(-50%);
  padding: 0;
}

.craft-photos {
  display: flex;
  gap: 16px;
  margin: 0;
  /* 覗かせる量は左右の余白で決める。左右で違う値にできるよう、
     吸着は中央ではなく左端合わせ(下の scroll-snap-align: start)にしてある。
     scroll-padding-left を左の余白と揃えないと、止まる位置が左にずれる */
  /* 左の余白は写真どうしの隙間(16px)より大きくしないと、
     隙間だけが見えて前の写真が1pxも出ない */
  padding: 0 68px 0 34px;
  scroll-padding-left: 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.craft-photos::-webkit-scrollbar {
  display: none;
}

/* PCはスクロールバーを隠しているので、掴んで動かせることを形で示す */
.craft-photos {
  cursor: grab;
}

.craft-photos.is-dragging {
  cursor: grabbing;
  /* 掴んでいるあいだは吸着と慣性を切り、指の動きにそのまま追従させる */
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.craft-photos:focus-visible {
  outline: 1px solid var(--rule);
  outline-offset: 6px;
}

.craft-photos img {
  display: block;
  width: 100%;
  height: auto;
  /* ドラッグ中に画像そのものが引きずられるのを止める */
  user-select: none;
  -webkit-user-drag: none;
  /* 参考にしたカードと同じ 15:8(約1.88:1)。スマホ・PCで共通 */
  aspect-ratio: 15 / 8;
  object-fit: cover;
  border-radius: 16px;
}

.craft-photo-item {
  /* 幅はトラックの内側(左右の余白を除いた分)いっぱい。
     余白のぶんだけ前後の写真が顔を出す */
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

/* 覗いている写真の説明文まで見えると、読んでいる文の両脇に別の文字が並ぶ。
   JSが動いているときだけ、今見ている1枚ぶんに絞る
   (js-carousel が付かない＝JSが止まっている場合は全部見えたまま) */
html.js-carousel .craft-photo-item .craft-caption {
  opacity: 0;
  transition: opacity 0.4s ease;
}

html.js-carousel .craft-photo-item.is-active .craft-caption {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.js-carousel .craft-photo-item .craft-caption {
    transition: none;
  }
}

/* カルーセルの中の説明文は、写真の見出しとして読ませる。
   行間を詰めて一塊にし、上の罫線は外す(参考にした作りに合わせる) */
.craft-photos .craft-caption {
  margin: 18px 0 0;
  padding-top: 0;
  font-size: 1.02rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.craft-photos .craft-caption::before {
  content: none;
}

.craft-caption {
  /* 写真のすぐ下に置く。離すと、どちらの説明か読み取りづらくなる。
     添え物ではなく読ませる文なので、本文に近い大きさと明るさを与える */
  position: relative;
  margin: 20px 0 0;
  padding-top: 18px;
  font-size: 0.95rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--text);
}

/* 写真と文の境に細い線を一本。写真の付属物であることを示しつつ、文としての自立も与える */
.craft-caption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--rule);
}


.craft-history-heading {
  max-width: 30em;
  margin: 72px auto 0;
  /* 節の見出しと同じ組み */
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
}

.craft-history {
  position: relative;
  max-width: 30em;
  margin: 28px auto 0;
  padding-top: 0;
  font-size: 0.9rem;
  line-height: 2.5;
  letter-spacing: 0.06em;
  text-align: center;
  text-indent: 0;
  color: var(--text-muted);
}

/* 一行ずつ、下から立ち上がるように現れる。
   行からはみ出した部分は覆いで隠すので、紙の裏から起き上がって見える。
   進み具合は script.js がスクロール量から直接与える（時間任せにしない） */
.craft-history .line-mask {
  display: block;
  overflow: hidden;
}

.craft-history .line-inner {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .craft-history .line-inner {
    transform: none !important;
  }

}


.brew {
  text-align: center;
}

.brew-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
  counter-reset: brew;
}

.brew-step {
  background: var(--surface);
  border-top: 3px solid var(--brown);
  padding: 18px 12px 14px;
  counter-increment: brew;
}

.brew-step::before {
  content: counter(brew);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-card);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.brew-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 2px auto 10px;
  color: var(--gold);
}

.brew-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--text);
}

.brew-body {
  margin: 0;
  font-size: 0.72rem;
  line-height: 2.0;
  color: var(--text-muted);
}

/* 茶道具・点て方と同じ組み方に揃える(罫線で仕切らず、余白で離す) */
.recipe-grid {
  display: grid;
  gap: 16px;
}

.recipe-card {
  display: block;
  cursor: pointer;
  /* リンクなので、指定しないとブラウザ既定の青が出る */
  color: inherit;
  background: var(--surface);
  padding: 20px 20px 18px;
  text-align: center;
  text-decoration: none;
  border-top: 3px solid var(--brown);
  transition: background 0.3s ease;
}

.recipe-card:hover {
  background: var(--accent-soft);
}

/* 詳細ページへ続くことを示す一言 */
.recipe-more {
  display: inline-block;
  margin-top: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.recipe-more::after {
  content: " →";
}

.recipe-card h3 {
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
}

.recipe-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 2;
  color: var(--text-muted);
}

.cta {
  text-align: center;
  padding: 72px 24px;
}

.utensils {
  text-align: center;
}

.utensil-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.utensil-item {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: var(--surface);
  padding: 16px;
  border-top: 3px solid var(--brown);
}

.utensil-photo-placeholder {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
}

.utensil-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
}

.utensil-price {
  margin: 4px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--gold);
}

.cta-button {
  display: inline-block;
  background: var(--gold);
  color: var(--bg-card);
  text-decoration: none;
  padding: 13px 40px;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  border: 1px solid var(--gold);
  transition: opacity 0.2s ease;
}

.cta-button:hover {
  opacity: 0.85;
}

.credit {
  text-align: center;
  padding: 0 24px 32px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  opacity: 0.6;
}

/* 「抹茶について」の説明文。スクロール量に応じて文頭から文末へ順に浮かび上がる */
.reveal-unit {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.reveal-unit.is-lit {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-unit {
    opacity: 1;
    transition: none;
  }
}

/* 写真はスクロール量に合わせてJSが直接値を書くので、transitionは付けない */
html.js-reveal .reveal-img {
  opacity: 0;
  transform: translateY(30px);
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal-img {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 見出しは一文字ずつ、墨が紙に置かれて滲みが定まるように現れる */
html.js-reveal .phase h2 .brush-char,
html.js-reveal .craft-history-heading .brush-char {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}

/* スクロールが進んだぶんだけ、JSがこのクラスを1文字ずつ付けていく */
html.js-reveal .phase h2 .brush-char.is-inked,
html.js-reveal .craft-history-heading .brush-char.is-inked {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .phase h2 .brush-char,
html.js-reveal .craft-history-heading .brush-char {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* 別ページで開いている項目は、現在地とわかるようにする */
.nav-link.is-current {
  color: var(--gold);
  font-weight: bold;
}

/* ===== 商品ページ ===== */
.product-detail {
  max-width: 1040px;
  padding: 56px 24px 96px;
}

/* 携帯では縦に積み、画面に余裕がある端末だけ「左に画像・右に情報」の2段組にする */
.product-detail-grid {
  display: grid;
  gap: 36px;
}



.product-visual-main {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.product-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--brown);
}

.product-detail-price {
  margin: 10px 0 0;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.product-lead {
  margin: 20px 0 0;
  font-size: 0.9rem;
  line-height: 2.15;
  color: var(--text-muted);
}

.product-spec-heading {
  margin: 32px 0 12px;
  padding: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-align: left;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.product-spec-heading::after {
  content: none;
}

/* 項目名と内容を2列で対にして並べる */
.product-spec {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 0;
  margin: 0;
  font-size: 0.85rem;
}

.product-spec dt,
.product-spec dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.product-spec dt {
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.product-spec dd {
  color: var(--text);
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.btn-primary,
.btn-secondary {
  display: block;
  width: 100%;
  padding: 16px;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--bg-card);
  border: 1px solid var(--gold);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}

.btn-primary:hover,
.btn-secondary:hover {
  opacity: 0.8;
}

.product-action-status {
  margin: 0;
  min-height: 1.2em;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  text-align: center;
  color: var(--gold);
}

.product-reviews {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.product-reviews h2 {
  font-size: 1.1rem;
}

.product-no-reviews {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ===== カートの個数バッジ ===== */
.topbar-cta {
  position: relative;
}

.cart-count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--bg-card);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* display:flex が hidden 属性に勝ってしまうので打ち消す */
.cart-count[hidden] {
  display: none;
}

/* ===== カートページ ===== */
.cart-page {
  max-width: 720px;
  padding: 56px 24px 96px;
}

.cart-heading {
  margin: 0 0 36px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
}

.cart-empty {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.cart-empty[hidden] {
  display: none;
}

/* 1行 = 左に小さめの写真、右に商品名・金額・容量、その下に個数と削除 */
.cart-lines {
  border-top: 1px solid var(--border);
}

.cart-line {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.cart-thumb {
  width: 92px;
  height: 92px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.58rem;
  line-height: 1.4;
  color: var(--text-muted);
  padding: 4px;
}

.cart-line-info p {
  margin: 0;
}

.cart-line-name {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}

.cart-line-price {
  margin-top: 6px !important;
  font-size: 0.9rem;
  color: var(--gold);
}

.cart-line-volume {
  margin-top: 4px !important;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 個数と削除は写真の右下、情報の下にまとめる */
.cart-line-controls {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cart-qty button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.cart-qty span {
  min-width: 2.2em;
  text-align: center;
  font-size: 0.95rem;
}

.cart-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* クロスセル「ご一緒にいかがですか？」 */
.cross-sell {
  max-width: none;
  padding: 32px 0 8px;
}

.cross-sell h2 {
  margin: 0 0 4px;
  padding-bottom: 0;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.cross-sell-note {
  margin: 0 0 16px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* 勧める点数はカートの中身で変わるので、並ぶ数に合わせて折り返す */
.cross-sell-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.cross-sell-item {
  width: 78px;
  text-align: center;
}

.cross-sell-thumb {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  font-size: 0.48rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.cross-sell-name {
  margin: 7px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.cross-sell-price {
  margin: 1px 0 0;
  font-size: 0.62rem;
  color: var(--text-muted);
}

.cross-sell-add {
  width: 100%;
  margin-top: 5px;
  padding: 4px 0;
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.cross-sell-add:hover {
  background: var(--accent-soft);
}

/* 送料と合計 */
.cart-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 24px 0 0;
  font-size: 0.9rem;
}

.cart-summary dt,
.cart-summary dd {
  margin: 0;
  padding: 12px 0;
}

.cart-summary dt {
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.cart-summary dd {
  text-align: right;
}

.cart-total-label {
  border-top: 1px solid var(--text);
  color: var(--text) !important;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

.cart-total-value {
  border-top: 1px solid var(--text);
  font-size: 1.1rem;
  color: var(--gold);
}

.cart-actions {
  margin-top: 32px;
}

.cart-continue {
  display: block;
  margin-top: 32px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}


/* 画面に余裕がある端末では「左に画像・右に情報」の2段組にする
   (基本ルールを上書きするので、必ずそれらより後ろに置くこと) */
@media (min-width: 820px) {
  .product-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    /* 画像と情報の下端をそろえる。stretch にすると画像側が情報側の高さまで伸びる */
    align-items: stretch;
  }

  .product-visual {
    height: 100%;
  }

  /* 高さは情報側に合わせるので、正方形の縛りを外す */
  .product-visual-main {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ===== お支払いページ ===== */
.checkout-page {
  max-width: 1000px;
  padding: 56px 24px 96px;
}

.checkout-heading {
  margin: 0 0 36px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
}

.checkout-grid {
  display: grid;
  gap: 40px;
}

.checkout-system-note {
  margin: 0 0 24px;
  padding: 14px 16px;
  background: var(--surface);
  border-left: 2px solid var(--gold);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.pay-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.pay-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
}

.checkout-method-note {
  margin: 16px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* 右側: 注文内容 */
.checkout-summary {
  padding: 24px;
  background: var(--surface);
}

.checkout-summary h2 {
  margin: 0 0 18px;
  padding-bottom: 0;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-align: left;
}

.checkout-lines {
  border-top: 1px solid var(--border);
}

.checkout-line {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.checkout-thumb {
  width: 76px;
  height: 76px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  font-size: 0.46rem;
  line-height: 1.35;
  text-align: center;
  color: var(--text-muted);
}

.checkout-line-price {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ポイント */
.checkout-points-row {
  margin-top: 4px;
  padding: 12px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.checkout-points-row strong {
  color: var(--gold);
  font-size: 1rem;
}

.checkout-points-note {
  margin: 10px 0 0;
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.checkout-points-login {
  margin: 8px 0 0;
  font-size: 0.7rem;
  color: var(--gold);
}

.checkout-points-login[hidden] {
  display: none;
}

.checkout-summary .btn-primary {
  margin-top: 24px;
}

/* 画面に余裕があれば、左に支払い方法・右に注文内容を並べる */
@media (min-width: 860px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/* ===== キャンペーン枠(決済ページ) ===== */
.promo {
  max-width: none;
  margin-top: 24px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
}

.promo-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--gold);
  color: var(--bg-card);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 0.12em;
}

.promo-heading {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.promo-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.promo-thumb {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  font-size: 0.4rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.promo-item:hover .promo-thumb {
  border-color: var(--gold);
}

.promo-name {
  font-size: 0.68rem;
  color: var(--text);
}

.promo-note {
  margin: 12px 0 0;
  font-size: 0.65rem;
  line-height: 2;
  color: var(--text-muted);
}

/* ===== ご購入完了ページ ===== */
.thanks-page {
  max-width: 560px;
  padding: 72px 24px 96px;
  text-align: center;
}

.thanks-heading {
  margin: 0 0 48px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 2.0;
}

.thanks-ask[hidden] {
  display: none;
}

.thanks-question {
  margin: 0 0 20px;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.thanks-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.thanks-btn {
  width: auto;
  min-width: 118px;
}

/* ===== レビューページ ===== */
.review-page {
  max-width: 560px;
  padding: 64px 24px 96px;
}

.review-page-heading {
  margin: 0 0 36px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: center;
}

.review-field {
  margin-bottom: 28px;
}

.review-label {
  display: block;
  margin: 0 0 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* 星は押した数だけ塗られる */
.star-rating {
  display: flex;
  gap: 6px;
}

.star {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 2rem;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: color 0.15s ease;
}

.star.is-on {
  color: var(--gold);
}

.review-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}

.review-text {
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.review-input:focus,
.review-text:focus {
  outline: none;
  border-color: var(--gold);
}

.review-done {
  text-align: center;
}

.review-done[hidden] {
  display: none;
}

.review-done-note {
  margin: 0 0 32px;
  font-size: 0.88rem;
  line-height: 2.15;
  color: var(--text-muted);
}


/* 購入完了ページに置く販促。キャンペーンとセット販売は別物として分ける */
.thanks-page .promo {
  margin-top: 32px;
  text-align: left;
}

.promo-campaign {
  text-align: center !important;
  border-color: var(--text);
}

.promo-campaign-heading {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.promo-campaign .promo-note {
  text-align: center;
}

.promo-badge-set {
  background: var(--text);
}

.thanks-page .promo-item {
  text-decoration: none;
  color: inherit;
}

/* 購入完了ページのセット販売は枠で囲わず、区切り線だけで区切る */
.thanks-page .promo:not(.promo-campaign) {
  padding: 28px 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
}

.thanks-page .promo:not(.promo-campaign) .promo-grid {
  grid-template-columns: repeat(3, 84px);
  justify-content: center;
  gap: 30px;
}

/* ===== 開幕演出 =====
   1. 画面を白で覆い、何も見せない
   2. キャッチコピーだけを墨色ではっきり浮かび上がらせる
   3. コピーが出きってから、覆いが晴れて写真がフェードイン
   js-intro は script.js が付けるので、JSが動かない環境では最初から通常表示 */
.hero-veil {
  position: fixed;
  inset: 0;
  z-index: 103;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

html.js-intro .hero-veil {
  opacity: 1;
}

/* 覆いが晴れるまで動画は伏せておく */
html.js-intro .hero-video-placeholder {
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* コピーは覆いより手前。最初は完全に消しておく */
html.js-intro .hero-content {
  z-index: 104;
}

html.js-intro .hero-tagline-stage {
  opacity: 0;
  transition: opacity 0.9s ease;
}

html.js-intro.is-copy-in .hero-tagline-stage {
  opacity: 1;
}

/* 白い覆いの上では白文字が読めない。開幕中だけ墨色にし、
   覆いが晴れて写真が出るのに合わせて白へ戻す */
html.js-intro .hero .hero-tagline,
html.js-intro .hero .brand-mark,
html.js-intro .hero .brand-mark-en,
html.js-intro .hero .hero-eyebrow {
  color: var(--text);
  text-shadow: none;
  transition: color 1.5s ease, text-shadow 1.5s ease;
}

html.js-intro.is-intro-done .hero .hero-tagline,
html.js-intro.is-intro-done .hero .brand-mark,
html.js-intro.is-intro-done .hero .brand-mark-en,
html.js-intro.is-intro-done .hero .hero-eyebrow {
  color: #ffffff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.45);
}

html.js-intro.is-intro-done .hero-veil {
  opacity: 0;
  transition: opacity 1.5s ease;
}

html.js-intro.is-intro-done .hero-video-placeholder {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.js-intro .hero-veil {
    opacity: 0;
  }

  html.js-intro .hero-video-placeholder,
  html.js-intro .hero-tagline-stage {
    opacity: 1;
    transition: none;
  }

  /* 覆いを出さないので、写真の上に墨文字が乗らないよう白へ固定 */
  html.js-intro .hero .hero-tagline,
  html.js-intro .hero .brand-mark,
  html.js-intro .hero .brand-mark-en,
  html.js-intro .hero .hero-eyebrow {
    color: #ffffff;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.45);
    transition: none;
  }
}

/* ===== トップの見せ方 =====
   ヒーローは貼り付けず、そのまま上へ流す。
   貼り付けると本文との境目が一本の線として必ず出てしまうため */
body.home .hero {
  position: relative;
  z-index: 0;
}

/* セクションは640pxで中央寄せなので、そのままでは左右から写真が覗く。
   まとめて一枚の下地にして、画面幅いっぱいで覆いかぶさらせる */
/* バーが透けるので、写真をバーの下まで通して背後に見せる */
body.home {
  padding-top: 0;
}

body.home .hero {
  min-height: calc(70vh + 57px);
}

body.home .home-content {
  position: relative;
  z-index: 1;
  background: var(--bg);
}



/* ===== レシピページ ===== */
.recipe-page {
  max-width: 720px;
}

.recipe-page-heading {
  margin: 0 0 56px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
}

.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.recipe-full {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

/* 写真は正方形で確保しておく。差し替えても組みが崩れないようにするため */
.recipe-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recipe-photo-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.recipe-body h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.recipe-lead {
  margin: 0 0 28px;
  font-size: 0.9rem;
  line-height: 2.2;
  color: var(--text-muted);
}

/* 材料・作り方の小見出し */
.recipe-body .recipe-detail-title {
  margin: 0 0 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.recipe-ingredients {
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 2.2;
}

.recipe-steps {
  margin: 0;
  padding-left: 1.4em;
  font-size: 0.9rem;
  line-height: 2.2;
}

.recipe-steps li {
  margin-bottom: 14px;
}

.recipe-steps li:last-child {
  margin-bottom: 0;
}

/* 横幅があるときは写真と手順を並べる */
@media (min-width: 720px) {
  .recipe-full {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 36px;
    align-items: start;
  }
}

/* 横長の画面には、あらかじめ切り出した写真を渡している。
   開いた瞬間に写真だけで画面が埋まるよう、上部バーを除いた高さいっぱいに広げる */
@media (min-width: 768px) {
  /* 枠を写真と同じ比率にする。
     枠と写真の形が違うと、cover が差分を必ず切り落とすため */
  .hero,
  body.home .hero {
    min-height: 0;
    aspect-ratio: 1376 / 768;
  }

  /* 切り落としを出さないので、動かす余地は設けない */
  .hero-image {
    height: 100%;
    object-position: center;
  }
}

/* 産地と石臼の2枚は、スマホでは画面幅いっぱいに出ている。
   PCでは本文欄(640px)に閉じ込められて小さくなるので、欄の外へ広げる */
@media (min-width: 768px) {
  /* 画面の端まで伸ばす。左右52pxの余白はトラック側に持たせてあるので、
     前後の写真が覗く形はそのまま保たれる */
  /* PCは前より後ろを多く覗かせる。次があることのほうを強く見せたいため */
  .craft-photos {
    padding: 0 170px 0 70px;
    scroll-padding-left: 70px;
  }

  /* 横に広いぶん、縦は短く */
  .craft-photos img {
    aspect-ratio: 21 / 9;
  }

  .craft-carousel {
    width: 100vw;
    margin-left: 50%;
    margin-top: 96px;
    transform: translateX(-50%);
    padding: 0;
  }
}


/* ===== カーソルの波紋 =====
   水面に落ちた雫のように、通ったあとから輪が広がって消える */
.cursor-ripple {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1px solid rgba(26, 23, 20, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  will-change: transform, opacity;
  animation: cursor-ripple 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes cursor-ripple {
  0% {
    transform: scale(0.35);
    opacity: 0.6;
  }
  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}

/* ===== フッター ===== */
.site-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-brand {
  margin: 0 0 20px;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  color: var(--text);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}

.footer-links a {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

/* ===== 法定表記のページ ===== */
.doc-page {
  max-width: 680px;
}

.doc-heading {
  margin: 0 0 48px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.doc-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.doc-list dt {
  padding: 18px 0 4px;
  border-top: 1px solid var(--border);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.doc-list dd {
  margin: 0;
  padding-bottom: 18px;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .doc-list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .doc-list dt {
    padding: 20px 0;
  }

  .doc-list dd {
    padding: 20px 0;
    border-top: 1px solid var(--border);
  }
}

/* ===== ページ遷移 =====
   移動のたびに世界が途切れないよう、短い暗転を挟む。
   js-fade は script.js が付けるので、JSが動かなければ普通に切り替わる */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.page-veil.is-on {
  opacity: 1;
}

/* ===== 縦の律動・余白の階層・見出しの落差 =====
   すべて同じ幅・同じ余白・中央揃えだと、スクロールしても進んだ感じが出ない。
   語る場所は広く深く、並べる場所は狭く浅く。見出しは左に張り出させる */
@media (min-width: 768px) {
  /* 一覧を並べる場所は本文欄より広げる。中身は画面の中央に置いたまま */
  .product,
  .utensils,
  .brew,
  .recipes {
    max-width: 880px;
  }

  /* 語る場所には他の倍の余白を与える */
  .craft {
    padding: 120px 24px;
  }

  .utensils,
  .recipes {
    padding: 72px 24px;
  }

  .brew {
    padding: 96px 24px;
  }

  .product {
    padding: 104px 24px;
  }

  /* 見出しを本文欄の左へ張り出させ、中央揃えの均質さを崩す。
     張り出しすぎると本文と切り離されて見えるので、半分に抑える */
  .phase h2 {
    text-align: left;
    margin-left: -36px;
    font-size: 2.5rem;
    line-height: 1.25;
    letter-spacing: 0.06em;
  }

  /* 説明文も左に揃え、読み始めの位置を見出しと合わせる */
  .craft-intro {
    text-align: left;
    max-width: 26em;
  }

  /* 締めの一文だけは右へ寄せ、左に寄った見出しと釣り合わせる */
  .craft-history {
    margin-right: 0;
    margin-left: auto;
    text-align: left;
  }

  /* 茶道具は4点を横一列に */
  .utensil-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 点て方は8手順を4列に */
  .brew-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* レシピは4枚を2列に */
  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== レシピ一覧 ===== */
.recipe-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.recipe-index-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.recipe-index-card h2 {
  margin: 18px 0 6px;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.recipe-index-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 2.05;
  color: var(--text-muted);
}

.recipe-index-card .recipe-photo {
  transition: opacity 0.3s ease;
}

.recipe-index-card:hover .recipe-photo {
  opacity: 0.75;
}

/* 詳細ページは1品だけなので、写真をもう少し大きく取る */
.recipe-single {
  gap: 32px;
}

.recipe-single h1 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.recipe-back {
  display: inline-block;
  margin-top: 36px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-decoration: none;
}

.recipe-back::before {
  content: "← ";
}

.recipe-back:hover {
  color: var(--text);
}

@media (min-width: 768px) {
  /* トップページの4品は横一列に */
  .recipe-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 一覧は写真があるので2列 */
  .recipe-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 40px;
  }
}

/* ヒーローの中身は、離れていくにつれて静かに退場させる。
   線で切られながら消えるのを避けるため */
.hero-content,
.hero-image {
  will-change: transform, opacity;
}



/* スマホでは日本語のキャッチコピーが2行に折れていた。
   一番長い一文(15文字)が画面幅に収まる大きさを、幅から逆算して与える。
   字間も詰め、左右の余白を16pxに絞って横幅を稼ぐ */
@media (max-width: 767px) {
  .hero-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1 {
    font-size: clamp(1rem, calc((100vw - 32px) / 15.4), 1.5rem);
    letter-spacing: 0.02em;
  }
}

/* 侘び寂びの見出しも、PCでは節の見出しと同じ大きさ・同じ軸に置く。
   直下の本文と一組に見えるよう、揃える先は本文の左端にする */
@media (min-width: 768px) {
  .craft-history-heading {
    /* 本文(0.9rem × 30em = 27rem)と同じ実寸。
       em のままだと見出しの文字サイズに追従して桁違いに広がる */
    max-width: 27rem;
    margin: 96px 0 0 auto;
    font-size: 2.5rem;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-align: left;
  }
}

/* ===== 抹茶についての背景 =====
   東京・神奈川・静岡が収まる縮尺の地図で箱根を指す。
   縁は溶かし、本文の可読性を落とさない濃さに留める */
.craft {
  position: relative;
  isolation: isolate;
}

/* スマホでは背景に敷かず、説明文と写真のあいだに場所を取って置く。
   狭い画面で本文の裏に回すと、線と文字が混ざって両方が読みにくくなる */
.craft-map {
  display: block;
  width: min(360px, 84vw);
  aspect-ratio: 1200 / 700;
  margin: 32px auto 32px;
  background: url("images/map-hakone-v2.svg") center / contain no-repeat;
  opacity: 0.9;
  /* --map-shift はスクロールに合わせて script.js が入れる。
     本文の流れの中に置くので、揺れ幅は上下の余白に収まる範囲まで抑える */
  transform: translateY(calc(var(--map-shift, 0px) * 0.13));
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 76%, rgba(0, 0, 0, 0.55) 94%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 76%, rgba(0, 0, 0, 0.55) 94%, transparent 100%);
  pointer-events: none;
}

/* PCでは本文が左に寄るので、地図は右の余白へ背景として置く */
@media (min-width: 768px) {
  .craft-map {
    display: none;
  }

  .craft::before {
    content: "";
    position: absolute;
    aspect-ratio: 1200 / 700;
    z-index: -1;
    background: url("images/map-hakone-v2.svg") center / contain no-repeat;
    opacity: 0.9;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 76%, rgba(0, 0, 0, 0.55) 94%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 76%, rgba(0, 0, 0, 0.55) 94%, transparent 100%);
    pointer-events: none;
    transform: translateY(calc(-50% + var(--map-shift, 0px)));
    /* カルーセルを広げたぶん、地図は見出しと説明文の高さに収める。
       揺れ幅(script.js の clamp)と合わせて、写真の上端より下に出ないようにしてある */
    top: 90px;
    left: auto;
    right: calc(90px - 22vw);
    width: min(440px, 34vw);
  }
}


/* 侘び寂びの一文の置き場所 */
.wabi-box {
  position: relative;
  margin: 72px auto 0;
  max-width: 30em;
}

.wabi-inner {
  position: relative;
}

@media (min-width: 768px) {
  .wabi-box {
    margin: 96px 0 0 auto;
    max-width: 27rem;
  }
}


/* 幅の広いセクションでも、見出しだけは「抹茶について」と同じ軸に乗せる。
   640pxの欄と880pxの欄の左端の差はちょうど120pxで画面幅によらないので、
   張り出し36pxを差し引いた84pxを足せば頭が揃う。
   両方が上限幅に達する928px以上でのみ効かせる(それ未満では差が変わるため) */
@media (min-width: 928px) {
  .utensils h2,
  .brew h2,
  .recipes h2 {
    /* 640pxの欄と880pxの欄の左端の差は120pxで一定。
       張り出し36pxを差し引いた84pxを足せば頭が揃う */
    margin-left: 84px;
  }
}

/* ===== 場と佇まいの2枚重ね =====
   茶道具と点て方のあいだに挟む。大小2枚をずらして重ね、
   奥をゆっくり、手前を速く動かすことで一場面としての奥行きを出す */
.scene-pair {
  position: relative;
  width: min(1040px, calc(100vw - 96px));
  margin: 0 auto;
  padding: 96px 0 112px;
}

.scene {
  margin: 0;
  line-height: 0;
}

.scene img {
  display: block;
  width: 100%;
  height: auto;
  /* 矩形のまま黒地に置くと貼った感じが出るので、縁を溶かす */
  -webkit-mask-image: radial-gradient(ellipse 98% 98% at 50% 50%, #000 56%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 98% at 50% 50%, #000 56%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
}

/* 奥に敷く茶室。横長を大きく、左寄りに */
.scene-back {
  width: 72%;
}

/* 侘び寂びの一文は、この2枚の写真そのものが示すものなので、ここに置く */
.scene-wabi {
  position: relative;
  width: 54%;
  max-width: none;
  margin: 104px 0 0;
}

.scene-wabi .craft-history-heading {
  max-width: none;
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-align: left;
}

.scene-wabi .craft-history {
  max-width: none;
  margin: 20px 0 0;
  text-align: left;
}

/* 手前に重ねる盆栽。縦長を小さく、右下へ食い込ませる */
/* 手前に重ねる盆栽。茶室に食い込ませる(重ならないと平面に見える) */
.scene-front {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  z-index: 1;
}

@media (max-width: 767px) {
  /* スマホでは本文が幅いっぱいになるため、絶対配置のままの盆栽が
     文字の上に重なってしまう。縦積みに切り替えて重なりを解消し、
     写真どうしの重なり(奥行き)だけは負のマージンで残す */
  .scene-pair {
    display: flex;
    flex-direction: column;
    width: min(100%, calc(100vw - 56px));
    padding: 56px 0 64px;
  }

  .scene-back {
    order: 1;
    width: 78%;
  }

  .scene-front {
    order: 2;
    position: static;
    align-self: flex-end;
    /* 盆栽が茶室より下に長く垂れると、左半分が空白になって
       文章が遠く見える。小さくして深く食い込ませる */
    width: 40%;
    margin-top: -45%;
  }

  .scene-wabi {
    order: 3;
    width: 100%;
    /* スマホでは視差を止めてあるので(script.js)、盆栽が下へずれる心配がない。
       写真と文を一続きに見せるため、余白は最小限にする */
    margin-top: 24px;
  }
}

/* ===== 404 =====
   道を外れた状態なので、箱根地図を薄く敷いて現在地の不在を示す */
.notfound {
  position: relative;
  isolation: isolate;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 104px;
}

.notfound::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, 88vw);
  aspect-ratio: 1200 / 700;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: url("images/map-hakone-v2.svg") center / contain no-repeat;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 74%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 74%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
  pointer-events: none;
}

.notfound-code {
  margin: 0 0 20px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--text-muted);
}

.notfound-heading {
  margin: 0 0 18px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.notfound-body {
  max-width: 26em;
  margin: 0 0 40px;
  font-size: 0.86rem;
  line-height: 2.2;
  color: var(--text-muted);
}

.notfound-back {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.notfound-back::before {
  content: "← ";
}

.notfound-back:hover {
  color: var(--text);
}

@media (min-width: 768px) {
  .notfound-heading {
    font-size: 2rem;
  }
}

/* ===== 商品を横3列に =====
   写真・名前・価格の高さがそろうよう、カードごとではなく列を等幅にする */
/* 商品は1点なので、3列に並べず中央に1枚置く */
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 40px;
  align-items: start;
}

.product-card {
  width: min(360px, 100%);
}

.product-card {
  display: flex;
  flex-direction: column;
}

.product-grid .product-photo-placeholder {
  max-width: none;
  width: 100%;
  /* 3列でも1点ずつの存在感が出るよう、横長ではなく正方に近づける */
  aspect-ratio: 1 / 1;
  padding: 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.product-grid .product-name {
  margin-top: 18px;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
}

.product-grid .product-price {
  font-size: 0.85rem;
}

.product-grid .cta-button {
  margin-top: 18px;
  padding: 14px 8px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-align: center;
}

/* 3枠とも同じ扱いで並べる。中身が未定であることは「未定」の表記で示す */

@media (max-width: 600px) {
  /* 3列を保ったまま枠を大きくするため、この節だけ左右の余白を詰める */
  .product {
    padding-left: 14px;
    padding-right: 14px;
  }

  .product-grid {
    gap: 14px;
  }

  .product-grid .product-photo-placeholder {
    font-size: 0.55rem;
    letter-spacing: 0.03em;
  }

  .product-grid .product-name {
    margin-top: 12px;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
  }

  .product-grid .product-price {
    font-size: 0.72rem;
  }

  .product-grid .cta-button {
    margin-top: 12px;
    padding: 11px 2px;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }
}

/* ===== 茶道のことページ =====
   読み物なので列は狭く、行間はトップ本文より広く取る */
.way-page {
  max-width: 680px;
  padding: 56px 24px 96px;
}

.way-heading {
  margin: 0 0 28px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
}

.way-lead {
  margin: 0 0 64px;
  font-size: 0.95rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
}

.way-block {
  margin: 0 0 64px;
}

.way-block:last-of-type {
  margin-bottom: 72px;
}

/* 見出しの肩に細い罫を一本。番号を振るより静か */
.way-block-title {
  position: relative;
  margin: 0 0 24px;
  padding-top: 18px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.way-block-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--rule);
}

.way-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

/* 所作は順番に意味があるので、数字を残したまま控えめに見せる */
.way-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: way-step;
}

.way-steps li {
  position: relative;
  counter-increment: way-step;
  padding: 0 0 20px 40px;
  font-size: 0.95rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

.way-steps li:last-child {
  padding-bottom: 0;
}

.way-steps li::before {
  content: counter(way-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: right;
}

.way-care {
  margin: 0;
}

.way-care dt {
  margin: 0 0 8px;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.way-care dd {
  margin: 0 0 28px;
  font-size: 0.95rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

.way-care dd:last-child {
  margin-bottom: 0;
}

.way-next {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.way-next-link {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.way-next-link:hover {
  color: var(--text);
}

/* 茶道具の並びから読み物ページへ送る一行 */
.way-entry {
  display: block;
  margin-top: 44px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: center;
  text-decoration: none;
  transition: color 0.3s ease;
}

.way-entry::after {
  content: " →";
}

.way-entry:hover {
  color: var(--text);
}

/* ===== 三つの入口 =====
   茶道具・点て方・レシピ。横長の写真の下に見出しと一行説明を左寄せで置く。
   スマホは一列（三列だと説明文が読めない幅になるため） */
.gateway-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.gateway-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 写真が届いたら .gateway-photo の中に <img> を入れるだけで差し替わる */
.gateway-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface);
}

.gateway-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.gateway-card:hover .gateway-photo img {
  transform: scale(1.04);
}

.gateway-photo-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}

/* .phase h2 の「左へ36px張り出す」指定より強くしておく。
   クラス2つにしないと負けて、見出しが画面外へはみ出す */
.gateway .gateway-name {
  /* 写真・MORE・文を一組に見せるため、間隔は詰めてある */
  margin: 10px 0 6px;
  margin-left: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
  transition: color 0.3s ease;
}

.gateway .gateway-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-align: center;
}

/* ===== どのカードを指しているかを示す =====
   指しているカードの背後に、角丸の面を敷いて浮かせる。
   以前は @media (hover: hover) で囲っていたが、環境によって判定が効かず
   「タップするまで変わらない」状態になったので、条件なしで当てる */
.gateway-card {
  /* 面を敷くために自前の重なり順を持たせる。
     これがないと z-index:-1 の面が .home-content の白地に隠れる */
  position: relative;
  z-index: 0;
}

.gateway-card::before {
  content: "";
  position: absolute;
  /* カードの内容より一回り外へ張り出させる */
  inset: -32px -28px -28px;
  border-radius: 12px;
  background: rgba(125, 155, 78, 0.22);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.gateway-card:hover::before,
.gateway-card:focus-visible::before {
  opacity: 1;
}

.gateway-card:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .gateway-card::before {
    transition: none;
  }
}

@media (min-width: 768px) {
  /* PCでは三枚を横いっぱいに渡す。section の 640px 制限は外すが、
     画面の端に貼り付くと窮屈なので左右に40pxだけ逃がす */
  .gateway {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
  }

  .gateway-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 46px;
  }

  .gateway .gateway-name {
    margin: 14px 0 8px;
    margin-left: 0;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    line-height: 1.55;
    text-align: center;
  }

  .gateway .gateway-desc {
    font-size: 0.9rem;
  }
}

/* サブページの大見出し。トップのセクション見出しと同じ調子で */
.subpage-heading {
  margin: 0 0 48px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
}

/* ===== パンくず =====
   セクションの先頭に置いてあるので、欄幅が違うページでも本文と左端が揃う */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 36px;
  font-size: 0.75rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  /* 中央寄せのページ(お問い合わせ等)に引きずられないよう明示する */
  text-align: left;
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: var(--text);
}

.breadcrumb-sep {
  color: var(--rule);
}

.breadcrumb-current {
  color: var(--text);
}

/* カルーセルの操作まわり。写真の下に矢印と点を一列で置く */
.craft-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

.craft-arrow {
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.craft-arrow:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--rule);
}

/* 端まで来たら押せないことを見た目でも伝える */
.craft-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.craft-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 現在地だけ横に伸びた緑、それ以外は小さな灰色の丸 */
.craft-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(26, 23, 20, 0.18);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}

.craft-dot:hover {
  background: rgba(26, 23, 20, 0.34);
}

.craft-dot.is-active {
  width: 30px;
  background: var(--accent);
}

.craft-dot.is-active:hover {
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .craft-dot {
    transition: none;
  }
}

/* ===== モーダル(お問い合わせ) =====
   既定は display:none。JSが動かなければ開かず、リンクは通常どおりページ遷移する */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 23, 20, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 44px 32px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px var(--shadow);
}

/* 開幕の動きはベースに置かない。置くと、揺れのクラスを外した瞬間に
   animation-name が戻ってもう一度再生され、一瞬ちらつく */
.modal-panel.is-entering {
  animation: modal-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 背景を触られたとき「そこは効きません」を動きで返す */
@keyframes modal-deny {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-7px);
  }
  30% {
    transform: translateX(6px);
  }
  45% {
    transform: translateX(-4px);
  }
  60% {
    transform: translateX(3px);
  }
  80% {
    transform: translateX(-2px);
  }
}

.modal-panel.is-denied {
  animation: modal-deny 0.42s ease;
}

@media (prefers-reduced-motion: reduce) {
  .modal-panel,
  .modal-panel.is-entering,
  .modal-panel.is-denied {
    animation: none;
  }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: var(--text);
}

.modal-heading {
  margin: 0 0 14px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}

.modal-lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-align: center;
}

/* 本文のスクロールを止めているあいだ、下の内容が動かないようにする */
body.is-modal-open {
  overflow: hidden;
}

/* 読み上げ専用。画面には出さないが、読み上げ対象からは外さない */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 道具・商品の写真枠に実物が入ったとき、枠いっぱいに収める */
.utensil-photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== お知らせ =====
   写真を使わない節なので、日付と題を細い罫で区切るだけに留める */
.news-list {
  border-top: 1px solid var(--border);
}

.news-item {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a.news-item:hover {
  opacity: 0.6;
}

.news-date {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.news-title {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.news-empty {
  margin: 0;
  padding: 26px 0;
  font-size: 0.88rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  /* 日付と題を横に並べる。本文欄の幅なら1行に収まる */
  .news-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
  }

  .news-title {
    margin: 0;
  }
}

/* ===== ヒーローのロゴ =====
   PNGは黒字で作ってあるので、写真の上では反転させて白で乗せる。
   開幕の白幕のあいだは反転させず、黒のまま読ませる */
.brand-logo {
  display: block;
  width: min(300px, 64vw);
  height: auto;
  margin: 8px auto 0;
  filter: brightness(0) invert(1) drop-shadow(0 1px 14px rgba(0, 0, 0, 0.55));
  transition: filter 1.5s ease;
}

html.js-intro:not(.is-intro-done) .brand-logo {
  filter: none;
}

@media (min-width: 768px) {
  .brand-logo {
    width: 340px;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 幕を出さない設定では、最初から写真の上に乗るので白で固定 */
  html.js-intro .brand-logo {
    filter: brightness(0) invert(1) drop-shadow(0 1px 14px rgba(0, 0, 0, 0.55));
    transition: none;
  }
}

/* ===== 上部バーのロゴ =====
   虫眼鏡の右に常設する。バーの文字と同じく墨色のままで、反転はしない */
.topbar-logo {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 4px 0;
  line-height: 0;
}

.topbar-logo img {
  display: block;
  height: 28px;
  width: auto;
}

/* スマホでは中央の「結輪」を下げ、代わりにロゴを中央へ置く。
   ロゴにも HAKONE YUIRIN が入っているので、ブランド名は消えない */
@media (max-width: 767px) {
  .topbar-brand {
    display: none;
  }

  .topbar-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .topbar-logo img {
    height: 34px;
  }
}

/* ===== よくあるご質問 =====
   茶道のことページの列幅を借り、問いは開閉式。答えは既存ページの文言をそのまま引く */
.faq-list {
  margin: 0 0 56px;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  position: relative;
  padding: 22px 32px 22px 0;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-q::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-a {
  padding: 0 0 24px;
}

.faq-a p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.faq-a p:last-child {
  margin-bottom: 0;
}

.faq-a a,
.faq-more a {
  color: var(--text);
}

.faq-more {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

/* ===== よくある質問 =====
   details/summary で開閉するので、この節にJSは一切使わない */
.faq-page {
  max-width: 680px;
  padding: 56px 24px 96px;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  position: relative;
  padding: 22px 36px 22px 0;
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
}

/* 既定の三角を消して、自前の十字に差し替える */
.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::after,
.faq-q::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 1px;
  background: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-q::before {
  transform: rotate(90deg);
}

.faq-item[open] .faq-q::before {
  transform: rotate(0deg);
}

.faq-a {
  margin: 0;
  padding: 0 36px 26px 0;
  font-size: 0.9rem;
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq-q::after,
  .faq-q::before {
    transition: none;
  }
}

/* カードの「MORE」。カード全体がリンクなので、中に置くのは見た目だけの札。
   入れ子のリンクやボタンは作らない */
.gateway-more {
  /* 写真の直下に置く。見出しと説明は左寄せのまま、札だけ中央 */
  display: block;
  width: fit-content;
  min-width: 170px;
  margin: 10px auto 0;
  /* 縦を薄く、横を長く。文字数に関わらず同じ長さになるよう min-width で決める */
  padding: 6px 24px;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.gateway-card:hover .gateway-more {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

@media (min-width: 768px) {
  .gateway-more {
    min-width: 220px;
    margin-top: 12px;
    padding: 7px 28px;
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gateway-more {
    transition: none;
  }
}

/* スマホは触れる前の状態がないので、MOREは押した時の色で固定しておく。
   枠線だけだと押せることが伝わりにくいため */
@media (max-width: 767px) {
  .gateway-more {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
  }
}

/* 商品写真。PCでは枠が縦長になることがあり、cover だと缶の左右が切れる。
   contain で必ず全体を見せ、余った部分は写真と同じ白で埋める */
.product-photo-placeholder img,
.product-visual-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  display: block;
  /* flexの子なので、指定しないと枠の高さいっぱいに伸びないことがある */
  align-self: stretch;
}

/* 写真が入った枠だけは下地も白にする。
   枠の既定色(わずかに灰)が写真の白との境目で段差に見えるため */
.product-photo-placeholder:has(img),
.product-visual-main:has(img) {
  background: #ffffff;
}