@charset "utf-8";
/* ============================================================
   ZUNTA ヌード — 紙のグラビアをWebに置き換える。
   原則: 余白が主役。文字は最小限。動きは気づかれない程度に。
   ============================================================ */

:root {
  --ink:      #14171b;   /* 本文。真っ黒にはしない */
  --ink-thin: #8d949d;   /* 添え物の文字 */
  --hair:     #d6dae0;   /* 罫線 */
  --paper:    #f7f8fa;   /* 紙の色。写真の地色（青みグレー）に寄せる */
  --paper-2:  #eef0f4;   /* わずかに沈む面 */

  --mincho: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", YuMincho,
            "游明朝", "MS PMincho", serif;

  /* 写真の基準幅。原寸は縦長（高さ≒幅×1.43）なので画面の高さから逆算する。
     49vh を掛けると写真の高さが約70vh になり、上下に均等な余白が残る。 */
  --plate-w: min(49vh, 42vw, 620px);
  --gap:     clamp(64px, 12vh, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mincho);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .08em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }

/* ============================================================
   表紙
   ============================================================ */
.cover {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(180deg, #fbfcfd 0%, var(--paper) 100%);
}
.cover__inner {
  animation: coverIn 2.4s cubic-bezier(.16,1,.3,1) both;
}
/* カタログと同じく縦一列に連ねる。
   writing-mode: vertical-rl は使わない ——
   縦組みの行ボックスが字面より広いとき、起点が右端にあるぶん字が右へ寄る。
   その確保幅がブラウザで違い、iOS Safari だけタイトルが右にずれた（2026-08-06）。
   1文字ずつ積めば環境差が出ない。 */
.cover__title {
  margin: 0;
  font-weight: 400;
  display: flex; flex-direction: column; align-items: center;
}
/* 縦に組んだ ZUNTA のロゴ（Imprint MT Shadow をアウトライン化したSVG） */
.cover__logo {
  width: auto;
  height: clamp(88px, 16vh, 150px);
  margin-bottom: 1.1em;
  align-self: center;
  opacity: .82;
}
.cover__ja {
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(38px, 7.4vh, 72px);
  line-height: 1.26;              /* 旧 letter-spacing .26em ぶんの字送りを行間で再現 */
}
.cover__ja i { font-style: normal; display: block; }
.cover__dash { transform: rotate(90deg); }   /* 長音記号を縦向きに */

@keyframes coverIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* スクロールから独立して画面右上に留まる製品名 */
.fixed-sub {
  position: fixed; top: 4vh; right: clamp(18px, 4vw, 44px);
  z-index: 10;
  font-size: 11px; letter-spacing: .42em; color: var(--ink-thin);
  text-indent: .42em;
  pointer-events: none;
  animation: coverIn 2.4s cubic-bezier(.16,1,.3,1) .5s both;
}

/* ============================================================
   図版（写真＋添え文）
   ============================================================ */
/* 写真は各画面のほぼ中央に来る。padding は足さない（足すと空白だけの画面が生まれる） */
.plate {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.5vw, 64px);
  padding: 0 clamp(18px, 5vw, 56px);
  min-height: 100svh;
}

/* 左右を交互に振って単調さを避ける。
   --left（01・03）は既定の並びで写真が左、--right（02・04）で入れ替えて写真を右に置く。 */
.plate--right .plate__fig     { order: 2; }
.plate--right .plate__caption { order: 1; }

.plate__fig {
  margin: 0;
  width: var(--plate-w);
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 30px 70px -40px rgba(20, 30, 45, .5);
}
.plate__fig img {
  width: 100%;
  transform: scale(1.045);
  transition: transform 2.2s cubic-bezier(.2,.7,.2,1);
  /* will-change は付けない。写真は一度寄りが解けたら動かないので、
     常時GPUレイヤーに載せておく利点がない。 */
}
/* 完了後は scale(1) ではなく none にして合成レイヤーから外す
   （scale(1) のまま残すと、動きが終わった写真4枚が常時GPUレイヤーに載り続ける） */
.plate__fig.is-visible img { transform: none; }

/* 添え文：縦組み。上から 01 → 文字（01と04のみ）の順に流す。
   02・03 は番号だけで、写真に文字を添えない。 */
.plate__caption {
  display: flex; flex-direction: row; align-items: center; gap: 26px;
  writing-mode: vertical-rl;
}
.plate__no {
  font-size: 11px; letter-spacing: .4em; color: var(--ink-thin);
  writing-mode: horizontal-tb;
  /* 字間は最後の文字の右側にも入る。1文字ぶん送って光学的な中心を合わせる
     （幅が内容依存の箱なので、送り量は letter-spacing と同値でちょうど揃う） */
  text-indent: .4em;
}
.plate__copy {
  font-size: clamp(17px, 2.6vh, 25px);
  letter-spacing: .28em;
  line-height: 1.9;
  font-feature-settings: "vpal" 1;
}
.plate__title {
  display: flex; flex-direction: row; align-items: center;
}
.plate__logo {
  width: auto;
  height: clamp(62px, 11vh, 104px);
  margin-bottom: 1.1em;
  opacity: .82;
}
.plate__logo-text { display: none; }   /* 縦組みのPCではSVGのロゴを使う */
.plate__copy--title {
  text-orientation: upright;   /* 欧文も1文字ずつ正立させ、表紙と同じ組みにする */
  letter-spacing: .3em;
}
.plate__copy--warranty {
  letter-spacing: .5em;
  text-orientation: upright;   /* 半角数字も正立させる（既定の mixed だと 3 が横倒しになる） */
}

/* ============================================================
   声（アンケート）
   手書きは白地に書かれているので、地の色（--paper）との差で
   「紙が置かれている」ように見える。枠線は引かない。
   ============================================================ */
.voices {
  padding: calc(var(--gap) * 1.15) clamp(18px, 5vw, 56px);
}
.voices__head {
  text-align: center;
  margin-bottom: clamp(44px, 7vh, 76px);
}
.voices__title {
  font-size: clamp(18px, 2.6vh, 24px);
  letter-spacing: .42em;
  text-indent: .42em;          /* 字間ぶん送って光学的な中心を合わせる */
}
.voices__note {
  margin-top: 16px;
  font-size: 11px; letter-spacing: .26em; color: var(--ink-thin);
  text-indent: .26em;
}

/* 横流し版：画面幅いっぱいを2列が反対向きに流れる。
   縦積みと違って「量がある」ことが一目で伝わる。 */
.voices__marquee {
  display: grid;
  gap: clamp(10px, 1.6vh, 16px);
  overflow: hidden;
  /* セクションの左右パディングを打ち消して画面端まで流す */
  margin-inline: calc(clamp(18px, 5vw, 56px) * -1);
}
.voices__row { overflow: hidden; }
.voices__track {
  display: flex;
  gap: clamp(10px, 1.6vh, 16px);
  width: max-content;
  animation: voicesFlow 150s linear infinite;
}
.voices__track--rev { animation-direction: reverse; }
/* 行ごとに開始位置をずらして、4列が同じ絵で揃わないようにする */
.voices__row:nth-child(2) .voices__track { animation-delay: -25s; }
.voices__row:nth-child(3) .voices__track { animation-delay: -50s; }
.voices__row:nth-child(4) .voices__track { animation-delay: -75s; }
.voices__row:nth-child(5) .voices__track { animation-delay: -100s; }
.voices__row:nth-child(6) .voices__track { animation-delay: -125s; }
@keyframes voicesFlow { to { transform: translateX(-50%); } }

/* キーボードで辿るときだけ止める（マウスでは止めない） */
.voices__marquee:focus-within .voices__track { animation-play-state: paused; }

.voices__card {
  flex: 0 0 clamp(300px, 45vw, 600px);   /* 600px でカード高は約 93px（画像は原寸632pxの手前） */
  border: 1px solid var(--hair);
  background: #fff;
  padding: 7px 12px 4px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .4s ease;
}
.voices__card:hover { border-color: #a8b0b9; }
.voices__card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.voices__card img {
  width: 100%;
  mix-blend-mode: multiply;
  filter: saturate(.25);
}

/* 手書きは判読に時間がかかるので、良し悪しを先に見せる。
   このカードだけページの外（アンケート）から入ってきたものなので、
   明朝で通した面にゴシックを差してアクセントにする。 */
.voices__eval {
  display: flex; align-items: center; justify-content: flex-start; gap: 5px;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "ヒラギノ角ゴシック",
               "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px; letter-spacing: .04em; color: #333a42;
  line-height: 1;
  margin-bottom: 4px;
}
.voices__stars { font-size: 12px; letter-spacing: .02em; color: #d8a13a; }

.voices__foot { text-align: center; margin-top: clamp(46px, 7vh, 78px); }
.voices__more {
  display: inline-block;
  font-size: 12px; letter-spacing: .24em; text-indent: .24em;
  color: var(--ink); text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hair);
  transition: border-color .5s ease;
}
.voices__more:hover { border-color: var(--ink); }

@media (max-width: 640px) {
  .voices__list { width: 92vw; gap: 12px; }
  .voices__title { font-size: 17px; letter-spacing: .32em; text-indent: .32em; }
  .voices__note { font-size: 10px; letter-spacing: .18em; text-indent: .18em; }
}

/* ============================================================
   奥付
   ============================================================ */
.colophon {
  padding: calc(var(--gap) * 1.2) 24px 0;
  background: linear-gradient(180deg, var(--paper) 0%, #fbfcfd 100%);
}
.colophon__inner {
  max-width: 640px; margin-inline: auto; text-align: center;
}
.colophon__kind {
  font-size: 11px; letter-spacing: .3em; color: var(--ink-thin);
  text-indent: .3em;
  margin-bottom: 14px;
}
.colophon__name {
  font-size: clamp(24px, 4vh, 34px);
  letter-spacing: .28em;
  margin-bottom: 8px;
}
.colophon__name span {
  display: block;
  font-size: 11px; letter-spacing: .58em; color: var(--ink-thin);
  margin-top: 14px;
}
.colophon__spec {
  margin: clamp(40px, 7vh, 72px) 0 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--hair);
  text-align: left;
}
.colophon__spec > div {
  display: grid; grid-template-columns: 6em 1fr;
  border-bottom: 1px solid var(--hair);
  padding: 14px 4px;
  font-size: 13px; letter-spacing: .16em;
}
.colophon__spec dt { color: var(--ink-thin); margin: 0; }
.colophon__spec dd { margin: 0; }

.colophon__actions {
  margin-top: clamp(44px, 7vh, 76px);
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.link {
  display: inline-block;
  font-size: 13px; letter-spacing: .2em; text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--hair);
  padding: 15px 30px;
  transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}
.link:hover { border-color: var(--ink); }
.link--em { background: var(--ink); color: #fff; border-color: var(--ink); }
.link--em:hover { background: #000; border-color: #000; }

.colophon__pdf { margin-top: 22px; text-align: center; }
.colophon__pdf a {
  font-size: 12px; letter-spacing: .24em; text-indent: .24em;
  color: var(--ink-thin); text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--hair);
  transition: color .4s ease, border-color .4s ease;
}
.colophon__pdf a:hover { color: var(--ink); border-color: var(--ink); }

.colophon__footer {
  margin-top: clamp(70px, 12vh, 130px);
  padding: 30px 0 40px;
  border-top: 1px solid var(--hair);
  text-align: center;
  font-size: 11px; letter-spacing: .24em; color: var(--ink-thin);
  line-height: 2.4;
}
.colophon__footer a { color: inherit; text-decoration: none; }
.colophon__footer a:hover { color: var(--ink); }

/* ============================================================
   スクロールで現れる
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .plate__fig img { transform: none; transition: none; }
  .cover__inner { animation: none; }
  .fixed-sub { animation: none; }
}

/* ============================================================
   タブレット・スマホ
   ============================================================ */
@media (max-width: 900px) {
  :root { --plate-w: min(48vh, 62vw); }
}

@media (max-width: 640px) {
  :root {
    --plate-w: min(56vh, 82vw);
    --gap: clamp(48px, 9vh, 90px);
  }
  body { font-size: 15px; }

  /* 横並びのままだと写真が画面からはみ出すので、写真を上・添え文を下に積む。
     縦組みはここで解く（狭い画面では縦組みが高さを食い、写真を圧迫するため）。
     明朝・字間・余白という世界観の骨格は横組みでも保てる。 */
  .plate {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 20px;
    padding-inline: 14px;
  }
  .plate--right .plate__fig     { order: 0; }
  .plate--right .plate__caption { order: 1; }

  .plate__caption {
    writing-mode: horizontal-tb;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 13px;
  }
  .plate__copy {
    font-size: clamp(15px, 4.2vw, 18px);
    letter-spacing: .2em;
    line-height: 1.8;
  }
  .plate__copy--warranty { letter-spacing: .34em; }

  /* 横組に戻る段。ロゴSVGは縦に組まれた字形なので、横並びでは使えない。
     同じ字面をテキストで置き換える */
  .plate__title { align-items: baseline; gap: 10px; }
  .plate__logo { display: none; }
  /* 写真の下は番号だけにする。狭い画面で文字を添えると写真の下に帯ができて、
     1画面1点で見せるリズムが崩れるため（01のZUNTAヌード・04の3年保証を伏せる） */
  .plate__title,
  .plate__copy--warranty { display: none; }

  /* 縦に折り返したときにボタン幅が内容依存で不揃いになるので揃える */
  .colophon__actions { flex-direction: column; align-items: center; gap: 11px; }
  .colophon__actions .link { width: min(300px, 76vw); text-align: center; }
}