/* RNZ.COFFEE 部品（Figma フレーム 20:26）。クラス名と使い方は COMPONENTS.md。
   スマホ基準で書き、900px 以上でPC、1100px 以上でセクションの多段組（ページ側）に切り替える。 */

/* ============================================================ レイアウト共通 */
.wrap {
  width: min(var(--wrap-max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.section {
  padding-block: 64px 72px;
}

.section--paper { background: var(--paper); }
.section--sand { background: var(--brown-light); }
.section--lilac { background: var(--plum-light); }
.section--ruled { border-top: 1px solid var(--rule); }

@media (min-width: 1100px) {
  .section { padding-block: 128px; }
}

/* セクション見出し（英字ラベル＋H2＋サブ） */
.label-en {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--copper);
}

.sec-head__label {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: var(--copper);
  margin-bottom: 8px;
}

.sec-head__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 38px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.sec-head__sub {
  margin-top: 12px;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

@media (min-width: 1100px) {
  .sec-head__label { font-size: 18px; line-height: 1.4; margin-bottom: 10px; }
  .sec-head__title { font-size: 34px; line-height: 1.6; }
  .sec-head__sub { margin-top: 16px; font-size: 16px; line-height: 1.95; }
  /* Figma のテキスト高さは整数に丸められるため、行送りを整数pxで合わせる */
  .sec-head__label { line-height: 25px; }
  .sec-head__title { line-height: 54px; }
  .sec-head__sub { line-height: 31px; }
}

/* 下線つきの「→」リンク */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.06em;
  color: var(--plum);
}

.link-arrow__arrow {
  font-family: var(--ff-en);
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0;
}

@media (min-width: 1100px) {
  .link-arrow {
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--plum);
  }
}

/* ============================================================ Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border: 0;
  border-radius: 2px;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.btn--block { display: flex; width: 100%; }

.btn--fill { background: var(--plum); color: var(--paper); }
.btn--fill:hover { background: var(--plum-soft); }

.btn--line { border: 1px solid var(--plum-soft); background: transparent; color: var(--plum); }
.btn--line:hover { background: var(--plum-light); }

.btn--cream { background: var(--cream-text); color: var(--night); }
.btn--cream:hover { background: #fff; }

.btn--ghost { border: 1px solid var(--cream-text); background: transparent; color: var(--cream-text); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.btn-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* ============================================================ Field（入力欄） */
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--plum);
}

.field__req {
  padding: 1px 7px;
  border-radius: 2px;
  background: var(--copper);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--plum-soft);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0;
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-2); opacity: 1; }

.textarea { min-height: 168px; resize: vertical; }

.select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b5a8a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--plum);
  box-shadow: inset 0 0 0 0.5px var(--plum), 0 0 0 3px var(--focus-ring); /* Figma 20:26 Focus: 内側1.5pxの枠（border 1 + inset 0.5）+ 外側 spread 3 */
}

.input.is-error,
.textarea.is-error,
.select.is-error,
.field.is-error .input,
.field.is-error .textarea,
.field.is-error .select {
  border-color: var(--error);
  background-color: var(--error-soft);
  box-shadow: 0 0 0 0.5px var(--error);
}

.field__error {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--error);
}

/* ============================================================ Checkbox */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}

.check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.check__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--plum-soft);
  border-radius: 3px;
  background: #fff;
}

.check__input:checked + .check__box {
  background: var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M0.8 4.2L3.6 7L9.2 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 7.5px no-repeat;
}

.check__input:focus-visible + .check__box {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.check.is-error .check__box,
.check__input.is-error + .check__box {
  border: 1.5px solid var(--error);
  background-color: var(--error-soft);
}

.check__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
}

/* ============================================================ Chip（選択肢） */
.chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip__label {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--plum-soft);
  background: #fff;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chip__input:checked + .chip__label {
  border-color: var(--plum);
  background: var(--plum);
  color: #fff;
  font-weight: 500;
}

.chip__input:focus-visible + .chip__label {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* ============================================================ Steps（お問い合わせの手順） */
.steps {
  display: flex;
  align-items: center;
  gap: 14px;
}

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

.step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--plum-soft);
  border-radius: 50%;
  background: #fff;
  color: var(--plum);
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

.step__label {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.steps__line {
  flex: none;
  width: 40px;
  height: 1px;
  background: var(--rule);
}

.steps__line.is-on { background: var(--plum); }

.step.is-done .step__num { border-color: var(--lilac-soft); background: var(--lilac-soft); }

.step.is-current .step__num { border-color: var(--plum); background: var(--plum); color: #fff; }
.step.is-current .step__label { font-weight: 500; color: var(--plum); }

/* ============================================================ アイコン（円） */
.icon-circle {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--lilac);
  border-radius: 50%;
}

.icon-circle img { width: 24px; height: 24px; }

@media (min-width: 1100px) {
  .icon-circle { width: 56px; height: 56px; }
  .icon-circle img { width: 28px; height: 28px; }
}

/* ============================================================ 商品プレート（写真の代わり・HTML/CSSで組む）
   プレート自体を container にして、中の寸法を幅に比例させる（横長 576 / 縦長 480 を 1 とした単位 --u）。
   形: 既定＝横長 / .plate--portrait＝縦長 / .plate--auto＝スマホ(1100未満)は縦長・PC(1100以上)は横長。 */
.plate {
  --base: 576;
  --ar: 576 / 360;
  --pad-v: 20;
  --pad-h: 24;
  --k: 124;
  --en: 15;
  --gap: 10;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: var(--ar);
  background: var(--night);
  color: var(--cream-text);
}

.plate--portrait,
.plate--auto {
  --base: 480;
  --ar: 480 / 600;
  --pad-v: 28;
  --pad-h: 28;
  --k: 188;
  --en: 19;
  --gap: 16;
}

@media (min-width: 1100px) {
  .plate--auto {
    --base: 576;
    --ar: 576 / 360;
    --pad-v: 20;
    --pad-h: 24;
    --k: 124;
    --en: 15;
    --gap: 10;
  }
}

.plate__in {
  --u: calc(100cqw / var(--base));
  height: 100%;
  padding: calc(16 * var(--u));
}

.plate__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: calc(var(--pad-v) * var(--u)) calc(var(--pad-h) * var(--u));
  border: 1px solid var(--copper);
}

.plate__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.plate__brand {
  font-family: var(--ff-en);
  font-weight: 500;
  font-size: calc(11 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.24em;
  color: var(--muted);
}

.plate__no {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--copper);
}

.plate__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap) * var(--u));
}

.plate__kanji {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: calc(var(--k) * var(--u));
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--cream-text);
}

.plate__rule {
  display: block;
  width: calc(28 * var(--u));
  height: max(1px, var(--u));
  background: var(--copper);
}

.plate__en {
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: calc(var(--en) * var(--u));
  line-height: 1.4;
  letter-spacing: 0.42em;
  text-align: center;
  color: var(--cream-sub);
}

.plate__spec {
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--cream-sub);
}

.plate--rin { background: var(--lilac-soft); }
.plate--rin .plate__brand { color: var(--plum-soft); }
.plate--rin .plate__kanji { color: var(--plum); }
.plate--rin .plate__en,
.plate--rin .plate__spec { color: var(--plum-soft); }

/* ============================================================ 縦組み見出し（PCは縦組み2列、スマホは横組み） */
.vtitle {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--cream-text);
}

.vtitle__col { display: inline; }

@media (min-width: 900px) {
  .vtitle {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 600;
    font-size: 58px;
    line-height: 104px;
    letter-spacing: 2.4px;
    font-feature-settings: "vert" 1;
  }

  .vtitle__col { display: block; }
  .vtitle br { display: none; }
}

/* ============================================================ 背景：コーヒー豆（ファーストビュー・CTA） */
.bg-beans {
  position: relative;
  color: var(--cream-text);
  background-color: var(--night);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto, auto, auto, cover;
  background-image:
    radial-gradient(ellipse closest-side at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(to right, rgba(18, 14, 34, 0.55) 0%, rgba(18, 14, 34, 0) 70%),
    linear-gradient(rgba(18, 14, 34, 0.72), rgba(18, 14, 34, 0.72)),
    var(--beans-img, url("/assets/img/beans-sp.webp"));
}

/* 画像は Figma と同じ「原画像を FILL（中央基準 cover）」で見える切り抜き。
   SP: 原画像（4096×3667）の縮小全体 / PC: 幅いっぱいの中央帯（2880×1752）。用途ごとの別画像は使わない */
.bg-beans--hero,
.bg-beans--cta { --beans-img: url("/assets/img/beans-sp.webp"); }

@media (min-width: 900px) {
  .bg-beans--hero,
  .bg-beans--cta { --beans-img: url("/assets/img/beans-pc.webp"); }

  .bg-beans--hero {
    background-size: auto, auto, auto, auto, cover;
    background-image:
      radial-gradient(ellipse closest-side at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.45) 100%),
      linear-gradient(to bottom, rgba(18, 14, 34, 0) 55%, rgba(18, 14, 34, 0.7) 100%),
      linear-gradient(to right, rgba(18, 14, 34, 0.9) 0%, rgba(18, 14, 34, 0.6) 32%, rgba(18, 14, 34, 0.05) 62%, rgba(18, 14, 34, 0.82) 100%),
      linear-gradient(rgba(11, 9, 8, 0.1), rgba(11, 9, 8, 0.1)),
      var(--beans-img);
  }
}

/* ============================================================ Header（背景の上・Dark） */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid var(--cream-text);
  color: var(--cream-text);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px 0 24px;
}

.site-header__logo {
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.22em;
  color: var(--cream-text);
}

.site-nav { display: none; }

.site-header__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lang-switch {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--cream-sub);
}

.lang-switch a:hover { color: var(--cream-text); text-decoration: underline; text-underline-offset: 4px; }

.site-header__cta { display: none; }

.menu-btn {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--cream-text);
}

.menu-btn__bar {
  position: absolute;
  left: 2px;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}

.menu-btn__bar:nth-child(1) { top: 5px; }
.menu-btn__bar:nth-child(2) { top: 11px; }
.menu-btn__bar:nth-child(3) { top: 17px; }

@media (min-width: 900px) {
  .site-header__inner {
    width: min(var(--wrap-max), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    padding: 0;
  }

  .site-header__logo { font-weight: 500; font-size: 18px; line-height: 1.4; }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 36px;
  }

  .site-nav a {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--cream-sub);
  }

  .site-nav a:hover { color: var(--cream-text); }

  .site-header__right { gap: 24px; }
  .lang-switch { font-size: 13px; line-height: 1.6; }
  .site-header__cta { display: inline-flex; }
  .menu-btn { display: none; }
}

/* PC幅でも狭いとき（900〜1199）はヘッダーを詰めて折り返しを防ぐ */
.site-header__logo,
.site-nav a,
.lang-switch,
.site-header__cta { white-space: nowrap; }

@media (min-width: 900px) and (max-width: 1199px) {
  .site-header__inner { width: calc(100% - 64px); }
  .site-header__logo { font-size: 16px; }
  .site-nav { gap: 20px; }
  .site-nav a { font-size: 13px; }
  .site-header__right { gap: 16px; }
  .site-header__cta { padding-inline: 20px; }
}

html[lang="en"] .site-nav a { letter-spacing: 0; }

/* ============================================================ スマホメニュー（開いた状態） */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--night);
  color: var(--cream-text);
}

.sp-menu[hidden] { display: none; }

.sp-menu__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px 0 24px;
  border-bottom: 1px solid var(--cream-text);
}

.sp-menu__close {
  position: relative;
  width: 24px;
  height: 24px;
  color: var(--cream-text);
}

.sp-menu__close svg {
  position: absolute;
  left: 5px;
  top: 4px;
  width: 14px;
  height: 14px;
}

.sp-menu__nav { padding: 24px 24px 0; }

.sp-menu__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--cream-text);
}

.sp-menu__ja {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.sp-menu__en {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--copper-light);
}

.sp-menu__row--en .sp-menu__ja {
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
}

.sp-menu__cta { padding: 32px 24px 0; }

.sp-menu__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 24px 32px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cream-sub);
}

.sp-menu__foot .lang-switch { font-size: 12px; letter-spacing: 0.06em; }
.sp-menu__foot > a { letter-spacing: 0.04em; }

html.is-menu-open { overflow: hidden; }

@media (min-width: 900px) {
  .sp-menu { display: none !important; }
  html.is-menu-open { overflow: auto; }
}

/* ============================================================ CTA（法人のお取引） */
.cta {
  padding: 64px 0;
}

.cta__inner {
  display: flex;
  flex-direction: column;
}

.cta__label {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: var(--copper-light);
}

.cta__title {
  margin-top: 8px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 38px;
  letter-spacing: 0.04em;
  color: var(--cream-text);
}

.cta__sub {
  margin-top: 12px;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: var(--cream-sub);
}

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

@media (min-width: 900px) {
  .cta { padding: 104px 0; }

  .cta__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px 64px;
  }

  .cta__text { flex: 0 1 640px; min-width: min(100%, 420px); }
  .cta__label { font-size: 20px; line-height: 1.4; }
  .cta__title { margin-top: 12px; font-size: 36px; line-height: 1.5; letter-spacing: 0.04em; }
  .cta__sub { margin-top: 16px; font-size: 15px; line-height: 1.95; }

  .cta__buttons {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-top: 0;
  }
}

html[lang="en"] .cta__title { font-family: var(--ff-en); font-weight: 400; letter-spacing: 0; }
html[lang="en"] .cta__sub { letter-spacing: 0; }
html[lang="en"] .cta__title { line-height: 1.3; }

/* ============================================================ Footer */
.site-footer {
  padding: 48px 0 32px;
  background: var(--night);
  color: var(--cream-text);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

.site-footer__logo {
  margin-bottom: 8px;
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  letter-spacing: 0.22em;
  color: var(--cream-text);
}

.site-footer__en {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--copper-light);
}

.site-footer__addr {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.04em;
  color: var(--cream-sub);
}

.site-footer__col + .site-footer__col { margin-top: 28px; }

.site-footer__h {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.12em;
  color: var(--cream-sub);
}

.site-footer__list {
  display: grid;
  gap: 10px 24px;
}

.site-footer__col--site .site-footer__list {
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
}

.site-footer__list a {
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.04em;
  color: var(--cream-text);
}

.site-footer__list a { display: block; }
.site-footer__list a:hover { text-decoration: underline; text-underline-offset: 4px; }

.site-footer__bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--cream-text);
}

.site-footer__credit,
.site-footer__copy {
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--cream-sub);
}

@media (min-width: 900px) {
  .site-footer { padding: 72px 0 40px; }

  .site-footer__top {
    display: flex;
    gap: 96px;
  }

  .site-footer__brand { flex: 1 1 0; gap: 10px; margin-bottom: 0; min-width: 0; }
  .site-footer__logo { margin-bottom: 0; font-weight: 500; font-size: 20px; line-height: 1.4; letter-spacing: 0.22em; }
  .site-footer__en { font-size: 15px; line-height: 21px; letter-spacing: 0; color: var(--cream-sub); }
  .site-footer__addr { font-size: 13px; font-weight: 300; line-height: 21px; color: var(--muted); }

  .site-footer__col { flex: none; }
  .site-footer__col + .site-footer__col { margin-top: 0; }

  .site-footer__h { font-size: 12px; font-weight: 400; line-height: 19px; letter-spacing: 0.14em; color: var(--copper-light); }

  .site-footer__list { gap: 12px; }

  .site-footer__col--site .site-footer__list {
    grid-auto-flow: row;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .site-footer__list a { font-size: 14px; font-weight: 300; line-height: 22px; letter-spacing: 0.04em; color: var(--cream-sub); }

  .site-footer__bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 56px;
    padding-top: 24px;
  }

  .site-footer__credit,
  .site-footer__copy {
    font-family: var(--ff-en);
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
}

html[lang="en"] .site-footer__addr,
html[lang="en"] .site-footer__h,
html[lang="en"] .site-footer__list a:not(.is-sns) { letter-spacing: 0; }

/* ============================================================ 定義リスト（商品スペックなど。<dl class="spec"><div class="spec__row"><dt><dd>） */
.spec { border-top: 1px solid var(--rule); }

.spec__row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.spec__row dt {
  flex: none;
  width: 72px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: var(--plum-soft);
}

.spec__row dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 22px;
  color: var(--ink);
}

@media (min-width: 900px) {
  .spec__row dt { width: 96px; font-size: 13px; line-height: 22px; }
  .spec__row dd { font-size: 14px; line-height: 24px; }
}

/* スマホだけ横幅いっぱいにするボタン（1100px 以上は通常幅） */
.btn--block-sp { display: flex; width: 100%; }
@media (min-width: 1100px) {
  .btn--block-sp { display: inline-flex; width: auto; }
}