/* ===========================================================
   GRAIN — 明るい面のセクション
   白髪ぼかしは「色がどう見えるか」が商品。暗い面では証明できないので、
   ここだけ白で抜く。暗い本編との落差が、店名 GRAIN（木目・きめ・粒子）の
   「筋を描き直す」という意味を視覚的に裏づける。
   =========================================================== */

.proof {
  background: var(--lite);
  color: var(--lite-ink);
  padding-block: var(--section);
  /* 暗い面との境目を断ち切る。ぼかすと落差が死ぬ */
  position: relative;
  z-index: 1;
}

.proof__head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }

.label--dark { color: #8a6b3c; }

.proof__title {
  font-family: var(--font-mincho);
  font-size: var(--t-display);
  line-height: 1.28;
  letter-spacing: 0.1em;
  color: var(--lite-ink);
}
.proof__lead {
  max-width: 44em;
  color: var(--lite-ink-2);
  line-height: 2.1;
}

.proof__grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .proof__grid { grid-template-columns: repeat(3, 1fr); } }

.proof__item .media { background: var(--lite-2); }
.proof__item .media > img { filter: none; }   /* 色を触らない。ここは証拠写真 */

.proof__item figcaption {
  display: grid;
  gap: 0.4rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lite-line);
}
.proof__item figcaption strong {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--lite-ink);
}
.proof__item figcaption span { font-size: 0.86em; color: var(--lite-ink-2); }

.proof__note {
  max-width: 46em;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--lite-line);
  font-size: 0.9em;
  color: var(--lite-ink-2);
  line-height: 2;
}
.proof__more { margin-top: 2rem; }

.link-dark {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35em;
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--lite-ink);
}
.link-dark::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: #8a6b3c;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.link-dark:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- ページ全体を明るい面にする（証明ページ用） ----- */

body.is-light { background: var(--lite); }
body.is-light .nav { mix-blend-mode: normal; }
body.is-light .nav__mark,
body.is-light .nav__mark small { color: var(--lite-ink); }
body.is-light .nav__toggle span { background: var(--lite-ink); }
body.is-light .footer { border-top-color: var(--lite-line); }

.phead--light { background: var(--lite); }
.crumb--dark { color: var(--lite-ink-2); }
.crumb--dark a { color: #8a6b3c; }
.phead__title--dark { color: var(--lite-ink); }
.phead__lead--dark { color: var(--lite-ink-2); }

.card__meta--dark { color: var(--lite-ink-2); }
.card__meta--dark strong { color: var(--lite-ink); }

body.is-light .footer {
  background: var(--ink);
  color: var(--paper-2);
  margin-top: var(--section-sm);
}

/* ---------- 数字で示す比較 -------------------------------- */

.gain { padding-block: var(--section); }

.gain__grid {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line);
}
@media (min-width: 820px) { .gain__grid { grid-template-columns: repeat(3, 1fr); } }

.gain__item {
  background: var(--ink);
  padding: clamp(2rem, 1.5rem + 2vw, 3.2rem) clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.gain__from {
  font-family: var(--font-mincho);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  text-decoration: line-through;
  text-decoration-color: var(--brass-dim);
  text-underline-offset: 0.2em;
}
.gain__arrow { color: var(--brass); line-height: 1; font-size: 1.1rem; }
.gain__to {
  font-family: var(--font-mincho);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: 0.08em;
  color: var(--paper);
}
.gain__note {
  margin-top: 1rem;
  font-size: 0.9em;
  color: var(--paper-2);
  line-height: 2;
}
.gain__note small { display: block; margin-top: 0.9em; font-size: 0.86em; color: var(--paper-dim); line-height: 1.9; }

/* ---------- 看板メニューの価格 ---------------------------- */

.price-hero {
  border: 1px solid var(--brass-dim);
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  display: grid;
  gap: 1rem;
}
.price-hero__label {
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
}
.price-hero__name {
  font-family: var(--font-mincho);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--paper);
}
.price-hero__yen {
  font-family: var(--font-latin);
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--brass-lit);
}
.price-hero__note {
  font-size: 0.88em;
  color: var(--paper-dim);
  line-height: 2;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}