@charset "utf-8";
/* =========================================================================
   SORARIE（ソラリエ） — 架空のヘアサロン
   『サイトのミカタ』制作デモ / 白と光のミニマル
   ---------------------------------------------------------------------
   色は 白・銀鼠・淡青 の3値＋黒文字。線は 1px のみ。面は置かない。
   ビジュアルは実写（assets/*.webp）。トーン宣言と出所は ASSETS.md。
   写真の補正は --grade の ±4% のみ。全面ヴェールは使わず、
   スクリムは必ず「文字が乗る側」だけに方向を持たせる。
   ========================================================================= */

/* ---------- 1. reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 1px solid var(--ao-ink); outline-offset: 3px; }

/* ---------- 2. tokens ---------- */
:root {
  /* 3値 */
  --white:      #ffffff;
  --paper:      #fcfcfb;   /* ほぼ白。紙の白 */
  --gin:        #8e9296;   /* 銀鼠 */
  --gin-pale:   #b9bdc1;
  --ao:         #dce7f0;   /* 淡青 */
  --ao-pale:    #f1f6fa;
  --ao-ink:     #46647d;
  /* 黒文字 */
  --ink:        #141618;
  --ink-2:      #5b6165;

  --line:       #e6e7e9;
  --line-thin:  rgba(20, 22, 24, .07);

  --f-min: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
           "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --f-got: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
           "Yu Gothic", YuGothic, "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --f-lat: "Instrument Serif", "Zen Old Mincho", Georgia, serif;
  --f-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;

  --pad: clamp(20px, 5vw, 56px);
  --gap-sec: clamp(112px, 14vw, 200px);
  --shell: 1140px;
  --head-h: 74px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* 写真の補正。±4%だけ。「加工した」と気づかれたら負け */
  --grade: saturate(.96) contrast(1.02) brightness(1.03);
  --paper-rgb: 252, 252, 251;
}

/* ---------- 3. base ---------- */
body {
  font-family: var(--f-min);
  font-size: 15.5px;
  line-height: 1.98;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: .035em;
  font-feature-settings: "palt" 1;
  font-synthesis: none;
  word-break: auto-phrase;
  line-break: strict;
}
@media (min-width: 768px) { body { font-size: 16px; } }

/* ---------- 4. 環境レイヤー（淡いグラデーションメッシュ＋銀塩の粒子） ---------- */
.amb,
.grain {
  position: fixed;
  inset: -12vmax;
  z-index: 0;
  pointer-events: none;
}
.amb {
  background:
    radial-gradient(38vmax 30vmax at 14% 6%,  rgba(220, 231, 240, .78), transparent 62%),
    radial-gradient(34vmax 30vmax at 94% 34%, rgba(142, 146, 150, .07), transparent 62%),
    radial-gradient(44vmax 34vmax at 62% 96%, rgba(220, 231, 240, .58), transparent 64%),
    radial-gradient(26vmax 24vmax at 4% 78%,  rgba(255, 255, 255, .9),  transparent 58%);
  animation: drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.4%, 1.8%, 0) scale(1.08); }
}
.grain {
  inset: 0;
  opacity: .052;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
.page { position: relative; z-index: 1; }

/* ---------- 5. 型（タイポ） ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
/* 隣り合う section で余白が二重にならないよう、上下は半分ずつ持たせる */
.sec { padding-block: calc(var(--gap-sec) / 2); position: relative; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gin);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gin-pale);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.display {
  font-family: var(--f-min);
  font-weight: 400;
  font-size: clamp(2.05rem, 6.1vw, 4.05rem);
  line-height: 1.42;
  letter-spacing: .045em;
}
.h2 {
  font-family: var(--f-min);
  font-weight: 400;
  font-size: clamp(1.42rem, 3.2vw, 2.15rem);
  line-height: 1.6;
  letter-spacing: .05em;
}
.h3 {
  font-family: var(--f-min);
  font-weight: 400;
  font-size: clamp(1.06rem, 1.9vw, 1.24rem);
  line-height: 1.72;
  letter-spacing: .05em;
}
.lead { max-width: 30em; color: var(--ink-2); }
.small { font-size: 13px; line-height: 1.92; color: var(--ink-2); }
.tiny {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--gin);
  line-height: 1.8;
}
.lat { font-family: var(--f-lat); letter-spacing: .06em; }

/* 行送りの reveal（行は手で切る＝和文の単語途中折れを起こさない） */
.ln {
  display: block;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.js .ln { overflow: hidden; }
.js .ln > i {
  display: block;
  font-style: inherit;
  transform: translateY(112%);
}
.js .reveal { opacity: 0; transform: translateY(15px); }
.js .reveal-line { transform: scaleX(0); transform-origin: left center; }

/* ---------- 5b. 冒頭（[data-hero]）は JS を待たない ----------
   ページ頭の見出しと本文は GSAP ではなく CSS アニメーションで立ち上げる。
   CDN が遅くても止まっても、読み込み直後に必ず読める（LCP は JS に依存しない）。
   GSAP 側は [data-hero] の中を触らない＝二重に動かさない。 */
@keyframes heroLn {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}
.js [data-hero] .ln > i { animation: heroLn .92s cubic-bezier(.16, 1, .3, 1) both; }
.js [data-hero] .ln:nth-child(1) > i { animation-delay: .04s; }
.js [data-hero] .ln:nth-child(2) > i { animation-delay: .12s; }
.js [data-hero] .ln:nth-child(3) > i { animation-delay: .20s; }
.js [data-hero] .ln:nth-child(4) > i { animation-delay: .28s; }
.js [data-hero] .reveal { animation: heroRise .8s cubic-bezier(.16, 1, .3, 1) both; }
.js [data-hero] .reveal:nth-child(1) { animation-delay: .20s; }
.js [data-hero] .reveal:nth-child(2) { animation-delay: .27s; }
.js [data-hero] .reveal:nth-child(3) { animation-delay: .34s; }
.js [data-hero] .reveal:nth-child(4) { animation-delay: .41s; }
.js [data-hero] .reveal:nth-child(5) { animation-delay: .48s; }
.js [data-hero] .reveal:nth-child(6) { animation-delay: .55s; }
.js [data-hero] .reveal:nth-child(n + 7) { animation-delay: .62s; }

/* ---------- 6. 罫 ---------- */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--soft { background: var(--line-thin); }

/* ---------- 7. ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-got);
  font-size: 13px;
  letter-spacing: .14em;
  line-height: 1;
  padding: 17px 26px;
  border-radius: 4px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  transition: background-color .25s var(--ease), transform .18s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: #2c2f32; border-color: #2c2f32; }
.btn:active { transform: scale(.985); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--white); border-color: var(--gin-pale); }
.btn .arw { width: 18px; height: 6px; flex: none; }
.btn .arw line, .btn .arw path { stroke: currentColor; stroke-width: 1; fill: none; }

/* テキストリンク（矢印つき） */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-got);
  font-size: 12.5px;
  letter-spacing: .14em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.tlink:hover { border-color: var(--ink); color: var(--ao-ink); }
.tlink .arw { width: 22px; height: 6px; flex: none; transition: transform .3s var(--ease); }
.tlink:hover .arw { transform: translateX(4px); }
.tlink .arw line, .tlink .arw path { stroke: currentColor; stroke-width: 1; fill: none; }

/* ---------- 8. タグ ---------- */
.tag {
  display: inline-block;
  font-family: var(--f-got);
  font-size: 10.5px;
  letter-spacing: .12em;
  line-height: 1;
  padding: 7px 12px 6px;
  border-radius: 9999px;
  background: var(--ao-pale);
  color: var(--ao-ink);
}

/* ---------- 9. ヘッダー ---------- */
.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--head-h);
  display: flex;
  align-items: center;
  background: rgba(252, 252, 251, .74);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.head.is-stuck { border-bottom-color: var(--line); background: rgba(252, 252, 251, .9); }
.head__in {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mark { display: inline-flex; align-items: baseline; gap: 10px; }
.mark__lat {
  font-family: var(--f-lat);
  font-size: 21px;
  letter-spacing: .3em;
  line-height: 1;
  padding-right: .3em;
}
.mark__jp {
  font-family: var(--f-got);
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--gin);
  line-height: 1;
}
.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 34px); }
.nav a {
  position: relative;
  font-family: var(--f-got);
  font-size: 12.5px;
  letter-spacing: .12em;
  line-height: 1;
  padding: 6px 0;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--ao-ink); }
.head__cta { margin-left: 4px; padding: 13px 20px; font-size: 12px; }

/* モバイル開閉 */
.burger {
  display: none;
  width: 40px; height: 40px;
  margin-right: -8px;
  position: relative;
  z-index: 2;
}
.burger span {
  position: absolute;
  left: 8px;
  width: 24px; height: 1px;
  background: var(--ink);
  transition: transform .38s var(--ease), opacity .2s linear;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 24px; }
.is-open .burger span:nth-child(1) { transform: translateY(4px) rotate(9deg); }
.is-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-9deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--paper);
  padding: calc(var(--head-h) + 34px) var(--pad) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
}
.is-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer ol { display: grid; gap: 2px; }
.drawer li { border-bottom: 1px solid var(--line); }
.drawer li:first-child { border-top: 1px solid var(--line); }
.drawer a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  font-family: var(--f-min);
  font-size: 1.32rem;
  letter-spacing: .07em;
}
.drawer a span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; color: var(--gin); }
.drawer a[aria-current="page"] span { color: var(--ao-ink); }
.drawer__foot { padding-top: 32px; }

@media (max-width: 860px) {
  :root { --head-h: 62px; }
  .nav, .head__cta { display: none; }
  .burger { display: block; }
  .mark__lat { font-size: 18px; }
}
@media (min-width: 861px) { .drawer { display: none; } }

/* ---------- 9.5 写真の基本形 ---------- */
/* 画像はすべてこの2つの規則を通る＝トーンが一箇所で決まる */
.ph { position: relative; margin: 0; overflow: hidden; background: var(--ao-pale); }
.ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade);
  display: block;
}
/* 下から立ち上がるマスク（GSAP が clip-path を開く。無ければ即表示） */
.js .phr { clip-path: inset(0 0 100% 0); }
.js .phr > img { transform: scale(1.09); }

/* 引きの帯（シネスコ）— main 直下に置くので幅は 100% でよい */
.band { position: relative; }
.band .ph { aspect-ratio: 21 / 8; }
@media (max-width: 820px) { .band .ph { aspect-ratio: 5 / 3; } }
.band__cap {
  position: absolute;
  left: var(--pad);
  bottom: clamp(14px, 2.4vw, 24px);
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 16px rgba(12, 14, 16, .72);
}
/* 文字が乗る左下だけに影を落とす。被写体のいる右は素のまま */
.band .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(72deg, rgba(12, 14, 16, .5) 0%, rgba(12, 14, 16, .16) 26%, rgba(12, 14, 16, 0) 52%);
  pointer-events: none;
}
/* 白い写真の帯では、逆に紙色を起こして墨の文字を置く */
.band--light .band__cap { color: var(--ink-2); text-shadow: 0 1px 12px rgba(var(--paper-rgb), .96); }
.band--light .ph::after {
  background: linear-gradient(72deg, rgba(var(--paper-rgb), .72) 0%, rgba(var(--paper-rgb), .2) 24%, rgba(var(--paper-rgb), 0) 46%);
}

/* 額装した1枚（縦・横）。中の img を少し大きく持たせて視差の余地を作る */
.plate--ph { padding: 0; overflow: hidden; border-radius: 12px; }
.plate--ph .ph { border-radius: 11px 11px 0 0; }
.plate--ph > .phcap {
  margin: 0 clamp(15px, 2.2vw, 22px);
  padding-block: 13px 15px;
}
.ph--px > img {
  position: absolute;
  left: 0;
  top: -6%;
  height: 112%;
  will-change: transform;
}
.ph--tall { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 3 / 2; }
.ph--sq { aspect-ratio: 1 / 1; }
.ph--pano { aspect-ratio: 16 / 9; }
@media (max-width: 700px) {
  .ph--tall { aspect-ratio: 1 / 1; }
}
/* 写真に添える小さな注記（罫線＋等幅） */
.phcap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--gin);
  line-height: 1.8;
}

/* ---------- 10. ヒーロー（TOP） ---------- */
.hero {
  position: relative;
  min-height: min(1000px, 100svh);
  padding-top: calc(var(--head-h) + clamp(44px, 8vh, 96px));
  /* ⚠ 下端中央には .hero__cue（SCROLL）が絶対配置で居る。ここを削ると、
     見出しが3行になった分だけ下がった hero__meta が cue と重なる
     （1280×800 実測で 0px まで詰まった）。中央寄せなので、この値の
     増分の半分だけ本文が上がる。 */
  padding-bottom: clamp(72px, 12vh, 128px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__ph {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}
.hero__ph picture, .hero__ph img { width: 100%; height: 100%; display: block; }
.hero__ph img {
  object-fit: cover;
  object-position: 18% 48%;
  filter: var(--grade);
  transform: scale(1.03);
}
.js .hero__ph img { animation: kenburns 26s var(--ease) forwards; }
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.2%, -1%, 0); }
}
/* 紙色のスクリム。右＝文字の乗る側だけを起こし、左の髪は素通し */
.hero__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(265deg,
      rgba(var(--paper-rgb), .985) 0%,
      rgba(var(--paper-rgb), .96) 34%,
      rgba(var(--paper-rgb), .72) 52%,
      rgba(var(--paper-rgb), .22) 74%,
      rgba(var(--paper-rgb), 0) 100%),
    linear-gradient(to top, rgba(var(--paper-rgb), .45) 0%, rgba(var(--paper-rgb), 0) 22%);
}
.hero__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(20px, 2.6vw, 26px);
  justify-items: start;
  max-width: min(620px, 56%);
  margin-left: auto;
}
.hero .display {
  font-size: clamp(1.68rem, 4.7vw, 3.05rem);
  text-shadow: 0 1px 26px rgba(var(--paper-rgb), .98), 0 0 54px rgba(var(--paper-rgb), .9);
}
.hero .lead { color: var(--ink-2); }
.hero .eyebrow { color: var(--ink-2); }
.hero .eyebrow::before { background: var(--gin); }
.hero__meta span { color: var(--ink-2); }
.hero .lead, .hero .eyebrow, .hero__meta {
  text-shadow: 0 1px 14px rgba(var(--paper-rgb), .98), 0 0 30px rgba(var(--paper-rgb), .92);
}
.hero__acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 6px;
}
.hero .hero__meta span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink-2); }
.hero__credit {
  position: absolute;
  left: var(--pad);
  bottom: clamp(16px, 3vh, 30px);
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(12, 14, 16, .7);
}

@media (max-width: 899px) {
  .hero {
    min-height: min(880px, 100svh);
    align-items: flex-end;
    padding-bottom: clamp(40px, 6vh, 64px);
  }
  .hero__body { max-width: none; margin-left: 0; }
  .hero__ph img { object-position: 52% 22%; }
  /* 縦画面では文字が下に来るので、スクリムも下から立てる */
  .hero__ph::after {
    background:
      linear-gradient(to top,
        rgba(var(--paper-rgb), .99) 0%,
        rgba(var(--paper-rgb), .975) 46%,
        rgba(var(--paper-rgb), .9) 60%,
        rgba(var(--paper-rgb), .34) 78%,
        rgba(var(--paper-rgb), 0) 96%);
  }
  .hero__credit { display: none; }
}

/* 下端のスクロール合図 */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 34px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  z-index: 1;
}
/* 合図が乗るのは下端中央＝スクリムで紙色に起きている場所なので、墨で置く */
.hero__cue span:first-child {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--ink-2);
  padding-left: .3em;
  text-shadow: 0 1px 12px rgba(var(--paper-rgb), .98);
}
.hero__cue-line { position: relative; width: 1px; height: 54px; background: var(--gin-pale); overflow: hidden; }
.hero__cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 16px;
  background: var(--ink);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-18px); }
  70%  { transform: translateY(56px); }
  100% { transform: translateY(56px); }
}
@media (max-width: 899px) { .hero__cue { display: none; } }
html.reduced .hero__cue-line::after { animation: none; transform: translateY(19px); }

/* ---------- 11. こだわり ---------- */
.tenets { display: grid; gap: 0; border-top: 1px solid var(--line); }
.tenet {
  display: grid;
  gap: 8px 40px;
  padding-block: clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 780px) {
  .tenet { grid-template-columns: 58px minmax(0, 200px) minmax(0, 1fr); gap: 0 clamp(20px, 3.2vw, 52px); }
}
.tenet__no { font-family: var(--f-lat); font-size: 22px; color: var(--gin-pale); line-height: 1.5; }
.tenet__t { font-family: var(--f-min); font-size: clamp(1.16rem, 2.2vw, 1.42rem); letter-spacing: .08em; line-height: 1.6; }
.tenet p { color: var(--ink-2); font-size: 14.5px; max-width: 30em; }

/* ---------- 12. カード（bento） ---------- */
.bento {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* transform だと登場アニメの transform に上書きされるので margin で段差をつける */
  .bento--offset > :nth-child(2) { margin-top: 30px; }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(20, 22, 24, 0);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { box-shadow: 0 2px 14px rgba(20, 22, 24, .06); border-color: #dcdee1; }
.card__ph { aspect-ratio: 4 / 3; }
.card__ph > img { transition: transform 1.1s var(--ease); }
.card:hover .card__ph > img { transform: scale(1.05); }
.card__body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  padding: clamp(22px, 3vw, 32px);
}
.card__no { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; color: var(--gin-pale); }
.card__t { font-family: var(--f-min); font-size: 1.2rem; letter-spacing: .08em; line-height: 1.5; }
.card__lat { font-family: var(--f-lat); font-size: 13px; letter-spacing: .2em; color: var(--gin); }
.card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.card__price {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.card__price b { font-family: var(--f-lat); font-size: 21px; font-weight: 400; letter-spacing: .02em; }
.card__price small { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--gin); }

/* ---------- 13. セクション見出しブロック ---------- */
.sechead {
  display: grid;
  gap: clamp(18px, 2.6vw, 26px);
  margin-bottom: clamp(38px, 5vw, 64px);
}
@media (min-width: 900px) {
  .sechead--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    align-items: end;
    gap: 40px;
  }
  .sechead--split .lead { padding-bottom: .5em; }
}

/* ---------- 14. 引用（店主の言葉） ---------- */
.quote {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
  justify-items: center;
  text-align: center;
  padding-block: clamp(20px, 4vw, 40px);
}
.quote__mark { width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, var(--gin-pale)); }
.quote blockquote {
  font-family: var(--f-min);
  font-size: clamp(1.16rem, 3vw, 1.86rem);
  line-height: 2.05;
  letter-spacing: .08em;
  max-width: 22em;
}
.quote figcaption { display: grid; gap: 6px; justify-items: center; }
.quote figcaption b { font-family: var(--f-min); font-weight: 400; font-size: 14px; letter-spacing: .14em; }

/* ---------- 15. 数字 ---------- */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 760px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figure {
  padding: clamp(24px, 3.4vw, 38px) clamp(16px, 2.4vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  background: rgba(255, 255, 255, .5);
}
.figure b {
  font-family: var(--f-lat);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: .01em;
}
.figure b i { font-style: normal; font-family: var(--f-min); font-size: .38em; letter-spacing: .1em; margin-left: .3em; }
.figure span { font-size: 12.5px; color: var(--ink-2); letter-spacing: .06em; }

/* ---------- 16. 2カラム（写真なしの図版＋文） ---------- */
.duo {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 880px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }
  .duo--rev > :first-child { order: 2; }
}
.duo__text { display: grid; gap: 22px; align-content: start; }
.plate {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(18px, 3vw, 30px);
}
.plate svg { width: 100%; height: auto; }

/* ---------- 17. CTA帯（写真の上・左に文字） ---------- */
.cta {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .58);
  overflow: hidden;
  isolation: isolate;
}
.cta__ph {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}
.cta__ph > img { object-position: 56% 74%; }
/* 文字の乗る左だけ紙色で起こす。窓と光のある右は素のまま */
.cta__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(var(--paper-rgb), .975) 0%,
      rgba(var(--paper-rgb), .95) 36%,
      rgba(var(--paper-rgb), .6) 56%,
      rgba(var(--paper-rgb), .1) 80%,
      rgba(var(--paper-rgb), 0) 100%);
}
.cta__in {
  position: relative;
  display: grid;
  gap: clamp(26px, 4vw, 40px);
  padding-block: clamp(96px, 12vw, 168px);
  justify-items: start;
}
@media (min-width: 880px) {
  .cta__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; }
}
.cta .h2 { max-width: 18em; text-shadow: 0 1px 22px rgba(var(--paper-rgb), .95); }
.cta .small { text-shadow: 0 1px 16px rgba(var(--paper-rgb), .95); }
@media (max-width: 879px) {
  .cta__ph > img { object-position: 68% 55%; }
  .cta__ph::after {
    background:
      linear-gradient(to top,
        rgba(var(--paper-rgb), .97) 0%,
        rgba(var(--paper-rgb), .94) 46%,
        rgba(var(--paper-rgb), .5) 72%,
        rgba(var(--paper-rgb), 0) 100%);
  }
  .cta__in { padding-top: clamp(180px, 42vw, 260px); }
}

/* ---------- 18. フッター ---------- */
.foot { border-top: 1px solid var(--line); background: rgba(255, 255, 255, .5); }
.foot__in { padding-block: clamp(48px, 6vw, 72px) 28px; display: grid; gap: clamp(34px, 4vw, 48px); }
.foot__top { display: grid; gap: clamp(30px, 4vw, 48px); }
@media (min-width: 780px) { .foot__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.foot dl { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.foot dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--gin); padding-top: .55em; }
.foot dd { margin: 0; color: var(--ink-2); }
.foot__nav { display: grid; gap: 12px; }
.foot__nav a { font-family: var(--f-got); font-size: 12.5px; letter-spacing: .12em; color: var(--ink-2); transition: color .3s var(--ease); }
.foot__nav a:hover { color: var(--ink); }
.foot__bar {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: grid;
  gap: 10px;
}
@media (min-width: 700px) { .foot__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.foot__note {
  font-family: var(--f-got);
  font-size: 10.5px;
  letter-spacing: .06em;
  line-height: 1.85;
  color: var(--gin);
}
.foot__copy { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--gin-pale); }

/* ---------- 19. 下層ページの頭（実写の帯＋左寄せの見出し） ---------- */
.phead {
  padding-top: calc(var(--head-h) + clamp(56px, 9vw, 104px));
  padding-bottom: clamp(40px, 6vw, 72px);
}
.phead__in { display: grid; gap: clamp(20px, 3vw, 30px); }
.phead .display { font-size: clamp(1.78rem, 5.4vw, 3.15rem); }

.phead--ph {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--head-h) + clamp(96px, 14vw, 190px));
  padding-bottom: clamp(64px, 9vw, 116px);
}
.phead--ph .phead__ph {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}
.phead--ph .phead__ph > img { object-position: var(--ph-pos, 50% 50%); }
/* 文字の乗る左だけ紙色。写真の主役側は素のまま鮮明に残す */
.phead--ph .phead__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(var(--paper-rgb), .985) 0%,
      rgba(var(--paper-rgb), .965) 38%,
      rgba(var(--paper-rgb), .74) 56%,
      rgba(var(--paper-rgb), .2) 78%,
      rgba(var(--paper-rgb), 0) 96%),
    linear-gradient(to bottom, rgba(var(--paper-rgb), .84) 0%, rgba(var(--paper-rgb), 0) 26%);
}
.phead--ph .display,
.phead--ph .lead,
.phead--ph .crumbs,
.phead--ph .legend { text-shadow: 0 1px 22px rgba(var(--paper-rgb), .96), 0 0 46px rgba(var(--paper-rgb), .8); }
/* .phead__in は .shell を兼ねているので、幅は子側で絞る
   （ここで max-width を掛けると margin-inline:auto で中央に寄ってしまう） */
.phead--ph .phead__in > * { max-width: min(600px, 54%); }
@media (max-width: 899px) {
  .phead--ph {
    padding-top: calc(var(--head-h) + clamp(150px, 46vw, 300px));
    padding-bottom: clamp(40px, 7vw, 72px);
  }
  .phead--ph .phead__in > * { max-width: none; }
  .phead--ph .phead__ph > img { object-position: var(--ph-pos-sm, 50% 26%); }
  .phead--ph .phead__ph::after {
    background:
      linear-gradient(to top,
        rgba(var(--paper-rgb), .97) 0%,
        rgba(var(--paper-rgb), .95) 34%,
        rgba(var(--paper-rgb), .52) 62%,
        rgba(var(--paper-rgb), 0) 92%);
  }
}
.crumbs { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; color: var(--gin); }
.crumbs a { transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--ink); }

/* ---------- 20. 料金表（menu の見せ場） ---------- */
.pricegroup { padding-block: clamp(44px, 6vw, 78px); border-top: 1px solid var(--line); }
.pricegroup__head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(24px, 3.4vw, 38px);
}
@media (min-width: 900px) {
  .pricegroup__head { grid-template-columns: 132px minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 56px); align-items: start; }
}
.pricegroup__no {
  font-family: var(--f-lat);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: .9;
  color: var(--ao);
  letter-spacing: .02em;
}
.pricegroup__t { display: grid; gap: 12px; }
.pricegroup__t .h2 { font-size: clamp(1.28rem, 2.6vw, 1.72rem); }

.plist { display: grid; }
.prow {
  position: relative;
  display: grid;
  gap: 4px 16px;
  padding: clamp(18px, 2.4vw, 24px) 0 clamp(20px, 2.6vw, 26px);
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
}
.prow__name { font-family: var(--f-min); font-size: clamp(.98rem, 1.9vw, 1.1rem); letter-spacing: .06em; line-height: 1.6; }
.prow__dots { display: none; }
@media (min-width: 720px) {
  .prow { grid-template-columns: auto minmax(24px, 1fr) auto; }
  .prow__dots {
    display: block;
    align-self: baseline;
    height: 0;
    border-bottom: 1px dotted var(--gin-pale);
    transform: translateY(-.42em);
    min-width: 24px;
  }
}
.prow__meta {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 26px);
  justify-content: flex-end;
  white-space: nowrap;
}
.prow__time { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--gin); }
.prow__yen {
  font-family: var(--f-lat);
  font-size: clamp(1.16rem, 2.3vw, 1.44rem);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.prow__yen i { font-style: normal; font-size: .62em; color: var(--gin); margin-right: .18em; }
.prow__yen em { font-style: normal; font-size: .52em; color: var(--gin); font-family: var(--f-min); margin-left: .22em; letter-spacing: .08em; }
.prow__note {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.85;
  max-width: 34em;
}
/* 所要時間を線の長さで示す（--d = 分 / 210分） */
.prow__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: calc(var(--d, 0) * 100%);
  background: var(--ao-ink);
  opacity: .34;
  transform-origin: left center;
}
.js .prow__bar { transform: scaleX(0); }
.prow__yen--free {
  font-family: var(--f-min);
  font-size: clamp(.94rem, 1.8vw, 1.02rem);
  color: var(--ao-ink);
  letter-spacing: .1em;
}

.pnotes {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 3.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.pnotes li { position: relative; padding-left: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.9; }
.pnotes li::before {
  content: "";
  position: absolute;
  left: 0; top: .92em;
  width: 10px; height: 1px;
  background: var(--gin-pale);
}
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.legend__bar { width: 46px; height: 1px; background: var(--ao-ink); opacity: .34; }

/* ---------- 21. about ---------- */
.story { display: grid; gap: clamp(20px, 3vw, 28px); max-width: 32em; }
.story p { font-size: clamp(.96rem, 1.9vw, 1.04rem); line-height: 2.15; }

.people { display: grid; gap: 16px; }
@media (min-width: 780px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.person {
  display: grid;
  gap: 20px;
  padding: clamp(24px, 3.4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  transition: box-shadow .3s var(--ease);
}
.person:hover { box-shadow: 0 2px 10px rgba(20, 22, 24, .04); }
/* スタイリストの帯。顔写真は置かず、手元と髪だけを切り取る */
.person__art {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ao-pale);
}
.person__art > img { transition: transform 1.2s var(--ease); }
.person:hover .person__art > img { transform: scale(1.04); }
.person__name { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.person__name b { font-family: var(--f-min); font-weight: 400; font-size: 1.16rem; letter-spacing: .1em; }
.person__name span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--gin); }
.person p { font-size: 13.5px; color: var(--ink-2); line-height: 1.95; }
.person__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tl { display: grid; border-top: 1px solid var(--line); }
.tl__row {
  display: grid;
  gap: 4px 28px;
  padding-block: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 700px) { .tl__row { grid-template-columns: 96px minmax(0, 1fr); } }
.tl__y { font-family: var(--f-lat); font-size: 19px; color: var(--gin); letter-spacing: .04em; }
.tl__row p { font-size: 14px; color: var(--ink-2); max-width: 32em; }
.tl__row.is-now .tl__y { color: var(--ao-ink); }

/* 間取り図 */
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: clamp(16px, 3vw, 30px); }
.plan svg { width: 100%; height: auto; }
.plan-line { fill: none; stroke: var(--ink); stroke-width: .9; }
.plan-thin { fill: none; stroke: var(--gin-pale); stroke-width: .7; }
.plan-lab { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; fill: var(--gin); }
.plan-fill { fill: var(--ao); opacity: .5; }

/* ---------- 22. access ---------- */
.map { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: clamp(14px, 2.6vw, 26px); }
.map svg { width: 100%; height: auto; }
.map-road { fill: none; stroke: var(--line); stroke-width: 7; stroke-linecap: round; }
.map-road--sm { stroke-width: 3.5; }
.map-river { fill: none; stroke: #cfe0ec; stroke-width: 10; stroke-linecap: round; }
.map-block { fill: none; stroke: var(--gin-pale); stroke-width: .7; }
.map-lab { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; fill: var(--gin); }
.map-here { fill: var(--ink); }
.map-hereLab { font-family: var(--f-min); font-size: 15px; letter-spacing: .1em; fill: var(--ink); }
.plate figcaption, .plan figcaption, .map figcaption {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--gin);
  line-height: 1.8;
}

.info { border-top: 1px solid var(--line); }
.info__row {
  display: grid;
  gap: 2px 28px;
  padding-block: clamp(16px, 2.2vw, 22px);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 640px) { .info__row { grid-template-columns: 118px minmax(0, 1fr); } }
.info__k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; color: var(--gin); }
.info__v { font-size: 14px; line-height: 1.9; }
.info__v small { display: block; font-size: 12px; color: var(--gin); }

.hours { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.hours th, .hours td {
  padding: 14px clamp(14px, 2.4vw, 24px);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  text-align: left;
}
.hours tbody tr:last-child th, .hours tbody tr:last-child td { border-bottom: 0; }
.hours tr.off { background: rgba(241, 246, 250, .45); }
.hours td.off { color: var(--gin-pale); }
.hours th[scope="row"] {
  width: 5.5em;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--gin);
}
.hours td small { font-size: 11.5px; color: var(--gin); margin-left: .6em; }

/* 次のページへ */
.nextnav {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .nextnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nextnav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 3vw, 40px);
  background: var(--paper);
  transition: background-color .35s var(--ease);
}
.nextnav a:hover { background: var(--white); }
.nextnav__t { display: block; }
.nextnav__t > span {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gin);
  margin-bottom: 9px;
}
.nextnav b { display: block; font-family: var(--f-min); font-size: clamp(1.08rem, 2.2vw, 1.3rem); letter-spacing: .08em; }
.nextnav .arw { width: 26px; height: 6px; flex: none; transition: transform .3s var(--ease); }
.nextnav .arw line, .nextnav .arw path { stroke: var(--ink); stroke-width: 1; fill: none; }
.nextnav a:hover .arw { transform: translateX(5px); }

/* ご予約の流れ。縦に一本の線でつなぐ（横5列だと1行が短くなりすぎて
   和文が語の途中で折れるため、あえて縦組みにしている） */
.steps { display: grid; border-top: 1px solid var(--line); }
.step {
  position: relative;
  display: grid;
  gap: 8px 0;
  align-content: start;
  padding: clamp(24px, 3vw, 32px) 0 clamp(24px, 3vw, 32px) clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--line);
}
.step::before {
  content: "";
  position: absolute;
  left: clamp(13px, 1.8vw, 22px);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.step:first-child::before { top: clamp(30px, 3.6vw, 38px); }
.step:last-child::before { bottom: auto; height: clamp(30px, 3.6vw, 38px); }
.step::after {
  content: "";
  position: absolute;
  left: clamp(9px, 1.8vw, 18px);
  top: clamp(26px, 3.6vw, 34px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--gin-pale);
}
@media (min-width: 780px) {
  .step { grid-template-columns: minmax(0, 232px) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); }
  .step__no { grid-column: 1; grid-row: 1; }
  .step__t  { grid-column: 1; grid-row: 2; }
  .step p:not([class]) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}
.step__no { font-family: var(--f-lat); font-size: 19px; color: var(--gin-pale); line-height: 1; }
.step__t { font-family: var(--f-min); font-size: 1.06rem; letter-spacing: .08em; line-height: 1.5; }
.step p:not([class]) { font-size: 13.5px; color: var(--ink-2); line-height: 1.95; max-width: 42em; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(20px, 2.6vw, 26px);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-min);
  font-size: clamp(.96rem, 1.9vw, 1.06rem);
  letter-spacing: .06em;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ao-ink); }
.faq__pm { position: relative; width: 13px; height: 13px; flex: none; align-self: center; }
.faq__pm::before, .faq__pm::after {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 13px; height: 1px;
  background: var(--ink);
  transition: transform .34s var(--ease);
}
.faq__pm::after { transform: rotate(90deg); }
.faq details[open] .faq__pm::after { transform: rotate(0deg); }
.faq__a { padding-bottom: clamp(20px, 2.6vw, 26px); font-size: 13.5px; color: var(--ink-2); line-height: 2; max-width: 40em; }

.contactbox {
  display: grid;
  gap: 22px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
@media (min-width: 780px) { .contactbox { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.contactbox__lines { display: grid; gap: 8px; }
.contactbox__big { font-family: var(--f-lat); font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: .06em; }

/* ---------- 23. 汎用 ---------- */
.stack { display: grid; gap: clamp(28px, 4vw, 44px); }
.stack--sm { gap: clamp(16px, 2.4vw, 22px); }
.center { justify-items: center; text-align: center; }
.mt-l { margin-top: clamp(34px, 5vw, 56px); }
.nowrap { white-space: nowrap; }
.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  font-family: var(--f-got);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  border-radius: 4px;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body.is-open { overflow: hidden; }

/* ---------- 24. 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .amb { animation: none; }
  .js .ln { overflow: visible; }
  .js .ln > i { transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  /* 冒頭の CSS アニメーションも止める（animation は通常の宣言より強いので明示的に消す） */
  .js [data-hero] .ln > i,
  .js [data-hero] .reveal { animation: none !important; }
  .js .reveal-line { transform: none; }
  .js .prow__bar { transform: none; }
  /* 写真の動きも全部止める。マスクは開いた状態を初期値にする */
  .js .hero__ph img { animation: none !important; transform: none; }
  .js .phr { clip-path: none; }
  .js .phr > img { transform: none; }
  .ph--px > img { position: static; top: auto; height: 100%; }
}
html.reduced .ln { overflow: visible; }
html.reduced .ln > i { transform: none; }
html.reduced .reveal { opacity: 1; transform: none; }
/* animation は通常の宣言に勝つので、冒頭の CSS アニメーションは明示的に消す */
html.reduced [data-hero] .ln > i,
html.reduced [data-hero] .reveal { animation: none !important; }
html.reduced .reveal-line { transform: none; }
html.reduced .prow__bar { transform: none; }
html.reduced .amb { animation: none; }
html.reduced .hero__ph img { animation: none !important; transform: none; }
html.reduced .phr { clip-path: none; }
html.reduced .phr > img { transform: none; }
html.reduced .ph--px > img { position: static; top: auto; height: 100%; }