/* ---- トークン ---- */
:root {
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", "Noto Serif JP", serif;
  /* 和文用の明朝。欧文部分は Cormorant に揃える */
  --font-serif-jp: "Cormorant Garamond", "Yu Mincho", YuMincho,
                   "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --ink: #1f2430;          /* 本文・ロゴの基準色 */

  /* 面ごとに裏返せるよう、従属する色はトークンにしておく（.section--dark で反転） */
  --body-color:  #55524c;  /* 読ませる本文 */
  --label-color: #96907f;  /* ラベル・注記 */
  --lead-color:  #6d6a63;  /* 補足の文章 */
  --num-color:   #b0a996;  /* 通し番号 */
  --rule-color:  #e0dbd3;  /* 罫線 */

  /* ボタンの線・文字と、塗ったときの抜き色。暗い面では入れ替わる */
  --button-ink:     #1f2430;
  --button-inverse: #fbfaf9;

  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1); /* 減速主体の、音のしない動き */
}

/* ---- 最小限のリセット ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body {
  font-family: system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.6;
  background: #f7f8fa;
  color: #1a1a1a;
}
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ページ内リンクは、飛ばずに滑らせる */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================
   ヘッダー本体
   ========================================= */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1.5rem;
  block-size: 64px;
  background: rgb(255 255 255 / 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ---- ロゴ：月のマーク + ワードマーク ---- */
.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  flex-shrink: 0;
}

.header__logo-mark {
  display: block;
  flex-shrink: 0;
}

/* 満月の輪郭は気配だけ残し、光の当たる部分だけを実体として見せる */
.header__logo-disc { opacity: 0.28; }

/* 静かな動き：ホバーで光がゆっくり満ちていく */
.header__logo-shade {
  transition: transform 1.8s var(--ease-quiet);
}
.header__logo:hover .header__logo-shade,
.header__logo:focus-visible .header__logo-shade {
  transform: translateX(1.4px);
}

.header__logo-text {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  margin-inline-end: -0.24em; /* 末尾の字間を相殺して右余白を揃える */
  text-transform: uppercase;
  white-space: nowrap;
}

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

/* ---- ナビ：リンク群 + ログインを内包する ---- */
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-start: auto;   /* 右へ寄せる */
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6f6c66;
  transition: color 0.5s var(--ease-quiet);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--ink); }

/* デスクトップのみ：ホバーで細い罫線が左から静かに伸びる */
@media (min-width: 769px) {
  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0.25rem;
    inset-inline: 0.75rem;
    block-size: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-quiet);
  }
  .nav__link:hover::after,
  .nav__link:focus-visible::after { transform: scaleX(1); }
}

/* ナビ内のアカウント関連（デスクトップでは横並び） */
.nav__account {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- ヘッダー右端：常時見せる CTA + ハンバーガー ---- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ---- ボタン：角を丸めず、塗らず、罫線だけ。ホバーでゆっくり反転する ---- */
.button {
  display: inline-block;
  padding: 1rem 2.75rem;
  border: 1px solid var(--button-ink);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;    /* 末尾の字間ぶん、文字を光学的な中心に置く */
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--button-ink);
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.6s var(--ease-quiet),
    color 0.6s var(--ease-quiet),
    opacity 0.6s var(--ease-quiet);
}
.button:hover,
.button:focus-visible {
  background: var(--button-ink);
  color: var(--button-inverse);
}

/* 実際に行動を起こす方。塗りと線を反転させて主従をつける。
   和文が入るため、書体と字間も欧文用から切り替える */
.button--solid {
  padding: 1.125rem 3rem;
  background: var(--button-ink);
  color: var(--button-inverse);
  font-family: var(--font-serif-jp);
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}
.button--solid:hover,
.button--solid:focus-visible {
  background: transparent;
  color: var(--button-ink);
}

/* ヘッダーのバーに収める寸法 */
.button--small {
  padding: 0.5625rem 1.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* 主役ではないボタン。控えめに沈めておき、ホバーで初めて立ち上がる */
.button--quiet { opacity: 0.5; }
.button--quiet:hover,
.button--quiet:focus-visible { opacity: 1; }

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

/* ---- ハンバーガー ---- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.hamburger span {
  display: block;
  block-size: 2px;
  inline-size: 22px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.25s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 背景オーバーレイ */
.overlay {
  display: none;
  position: fixed;
  inset: 64px 0 0;
  background: rgb(0 0 0 / 0.35);
  z-index: 5;
}

/* =========================================
   モバイル（768px 以下）
   ========================================= */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .nav {
    position: fixed;
    inset-inline: 0;
    top: 64px;
    z-index: 8;
    display: none;
    flex-direction: column;      /* 縦積み */
    align-items: stretch;
    gap: 0;
    background: #fbfaf9;
    border-bottom: 1px solid var(--rule-color);
    padding: 0.75rem 1rem 1.25rem;
  }
  .nav[data-open="true"] { display: flex; }
  .overlay[data-open="true"] { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
  }
  .nav__link { padding: 0.75rem 0.875rem; font-size: 1rem; }

  /* ★ ログインはドロワー内に残す（消さない） */
  .nav__account {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rule-color);
  }
  .nav__account .button { display: block; padding-block: 0.875rem; }
}

/* ごく狭い画面ではバーの CTA を畳む（ドロワー内に同じものがある） */
@media (max-width: 400px) {
  .header__actions .button { display: none; }
}

/* デスクトップではドロワー用の重複 CTA を隠す */
@media (min-width: 769px) {
  .nav__account { display: none; }
}

/* =========================================
   ヒーローエリア
   ========================================= */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
  padding-inline: 1.5rem;
  position: fixed;
  inset: 0;
  block-size: 100vh;
  block-size: 100dvh; /* モバイルのアドレスバー分を考慮 */
  z-index: 1;
  overflow: hidden;
  background: #e5e7eb; /* 背景レイヤーが読めない場合のフォールバック */
}

/* -----------------------------------------
   仮の背景：コンセプト「光と影」
   高窓から差し込む光が、白い漆喰壁に帯をつくる情景。
   建築・美術館の静けさを、色ではなく光の当たり方で表す。

   写真に差し替えるとき：
     <div class="hero__media-layer"></div>
       ↓
     <img class="hero__media-layer" src="images/hero.jpg" alt="">
     （光の帯は ::before で描いているため、写真にすると自動的に消えます。
       粒状感は外側の .hero__media 側にあるので、写真の上にも残ります）
   ※ 暗い素材を敷く場合は .hero__brand の color を明るい色に変えてください
   ----------------------------------------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;          /* 動く層がはみ出すぶんを切り落とす */
}

/* 背景レイヤーは「配置された要素」なので、何もしないと通常の子要素より
   手前に描画されてしまう。ヒーロー内のコンテンツは必ず前面に出す */
.hero > :not(.hero__media) {
  position: relative;
  z-index: 1;
}

/* 実際に動く層。ここを <img> に差し替えれば、そのまま写真が動く */
.hero__media-layer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;         /* <img> に差し替えたときに効く */
  background:
    /* 右下へ落ちていく、大きく柔らかい影 */
    radial-gradient(115% 100% at 88% 106%, rgb(31 36 48 / 0.20) 0%, transparent 60%),
    /* 左上の光だまり */
    radial-gradient(85% 75% at 20% 6%, #fdfcf9 0%, transparent 58%),
    /* 漆喰壁の地色 */
    linear-gradient(158deg, #f1efeb 0%, #e7e4de 56%, #dcd9d2 100%);

  /* 左右へゆっくり往復。縦は横の半分だけ動かして、わずかに斜めの軌跡にする */
  animation: hero-pan 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-pan {
  /* 拡大しておくことで、寄せても端に余白が出ない
     （scale 1.08 = 各辺に 4% の余裕、移動量 2% はその内側に収まる） */
  from { transform: scale(1.08) translate(-2%, -1%); }
  to   { transform: scale(1.08) translate(2%, 1%); }
}

/* 高窓から差し込む、二本の光の帯 */
.hero__media-layer::before {
  content: "";
  position: absolute;
  inset: -45%;               /* 回転させても隅が空かないよう、画面より大きく取る */
  transform: rotate(-15deg);
  background:
    linear-gradient(90deg, transparent 20%, rgb(255 255 255 / 0.66) 27%,
                    rgb(255 255 255 / 0.66) 37%, transparent 44%),
    linear-gradient(90deg, transparent 50%, rgb(255 255 255 / 0.40) 56%,
                    rgb(255 255 255 / 0.40) 63%, transparent 69%);
}

/* 紙や印画紙のような粒状感。平坦さを消して手触りを出す */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ヒーローの下に確保するスペース（ヒーローが fixed で flow から抜けるため） */
.hero-spacer {
  block-size: 100vh;
  block-size: 100dvh;
}

/* ヒーロー以降のコンテンツ。ヒーローより手前に重ね、スクロール時に上から被さって隠す。
   背景を必ず不透明にしないと、下のヒーローが透けて見えてしまう */
.page-content {
  position: relative;
  z-index: 2;
  background: #fbfaf9;
}

.hero__brand {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 6.5vw, 5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.4em;
  text-indent: 0.4em; /* 末尾の字間ぶん、視覚的な中心を合わせる */
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  /* 静かな動き：明かりが差すようにゆっくり立ち上がる */
  animation: hero-brand-in 2s var(--ease-quiet) 0.15s both;
}

@keyframes hero-brand-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- サブタイトル：ブランド名に従属させ、字間で軽さを出す ---- */
.hero__tagline {
  display: block;
  margin-block-start: clamp(1.5rem, 4vh, 2.5rem);
  font-size: clamp(0.6875rem, 1.25vw, 0.8125rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.42em;   /* 小さい文字ほど、字間は広めに取ると呼吸する */
  text-indent: 0.42em;
  color: #6f6c66;

  /* ブランド名が立ち上がった後を追って、静かに現れる */
  animation: hero-brand-in 1.6s var(--ease-quiet) 0.7s both;
}

/* ブランド名との間に引く、短い罫線 */
.hero__tagline::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 1px;
  margin: 0 auto clamp(1.125rem, 3vh, 1.75rem);
  background: currentColor;
  opacity: 0.4;
}

/* ---- ヒーローの主題（h1）：和文は明朝で、行送りと字間を大きく取る ---- */
.hero__title {
  margin-block-start: clamp(1.5rem, 4vh, 2.75rem);
  font-family: var(--font-serif-jp);
  font-size: clamp(1.1875rem, 3.2vw, 1.875rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ink);
  animation: hero-brand-in 1.8s var(--ease-quiet) 1.05s both;
}

.hero__lead {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
  line-height: 2.2;
  letter-spacing: 0.1em;
  /* text-indent は 1 行目にしか効かないため、複数行になるこの要素では使わない */
  color: #6f6c66;
  max-inline-size: 34em;
  animation: hero-brand-in 1.8s var(--ease-quiet) 1.35s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__brand,
  .hero__tagline,
  .hero__title,
  .hero__lead,
  .hero__media-layer { animation: none; }
}

@media (max-width: 480px) {
  .hero { padding-inline: 1.25rem; }

  /* 狭い画面では字間を詰めて 1 行を保つ（折り返すとロゴタイプが崩れるため） */
  .hero__brand {
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
}

/* =========================================
   セクション共通（ヒーローの上に重なって隠していく面）
   ヒーローの冷たいグレーに対して、紙のような温かい白を置く
   ========================================= */
.section {
  position: relative;
  padding-block: clamp(5rem, 14vh, 9rem);
  padding-inline: 1.5rem;
  background: var(--section-bg, #fbfaf9);
  color: var(--ink);
  scroll-margin-block-start: 64px;  /* 追従ヘッダーの下に隠れないように */
}

/* 締めのセクション。前後の余白をさらに広げ、ページの終わりを知らせる */
.section--closing { padding-block: clamp(6rem, 18vh, 11rem); }

/* 面の色を一段変えて、章の切り替わりを知らせる */
.section--paper { --section-bg: #f5f3f0; }

/* 暗い面。映像を敷くときに使う。文字側は紙色へ一斉に反転する */
.section--dark {
  --section-bg:  #141821;
  --body-color:  rgb(251 250 249 / 0.84);
  --label-color: rgb(251 250 249 / 0.52);
  --lead-color:  rgb(251 250 249 / 0.70);
  --num-color:   rgb(251 250 249 / 0.42);
  --rule-color:  rgb(251 250 249 / 0.20);
  --button-ink:     #fbfaf9;
  --button-inverse: #141821;

  color: #fbfaf9;
  overflow: hidden;          /* 敷いた映像を面の形に切り取る */
}

/* 語りのセクション。左右対称に置いて、宣言としての格を持たせる */
.section--center { text-align: center; }
.section--center .section-body { margin-inline: auto; }

.section__inner {
  position: relative;   /* 背景映像より前に置く */
  z-index: 1;
  max-inline-size: 880px;
  margin-inline: auto;
}

/* ---- 背景映像 ---- */
.section-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;      /* パララックスで動く層を、面の形に切り取る */
  background: #141821;   /* 読み込み前の黒い一瞬を、面の色で埋める */
}

.section-media video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* 文字を読ませるための暗幕。映像は「見せる」より「気配」に留める */
.section-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(20 24 33 / 0.78) 0%, rgb(20 24 33 / 0.62) 45%,
                    rgb(20 24 33 / 0.78) 100%);
}

/* 明るい面に敷くとき。地色と幕を紙側へ入れ替える。
   映像そのものが白い壁なので、幕は「暗くする」ではなく「紙に沈める」役に回る。
   上下を濃くして、前後のセクションとの境目を断ち切らずに溶かす */
.section-media--paper { background: #f5f3f0; }

.section-media--paper::after {
  background:
    linear-gradient(180deg, rgb(245 243 240 / 0.88) 0%, rgb(245 243 240 / 0.66) 38%,
                    rgb(245 243 240 / 0.66) 62%, rgb(245 243 240 / 0.88) 100%);
}

/* ---- パララックス ----
   スクロールより遅れて動かすため、面より縦に大きく取って余地をつくる。
   上下 12% の余白に対し、動かす量は片側 7%（= 面の約 8.7%）に留めてある。
   変位は JS が transform で与える。JS が動かない環境では中央に静止したまま */
.section-media[data-parallax] video {
  position: absolute;
  inset-block: -12%;
  inset-inline: 0;
  block-size: 124%;
  will-change: transform;
}

/* 小さな見出しラベル。字間で「静けさ」をつくる */
.section-label {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--label-color);
  margin-block-end: 1.75rem;
}

.section-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.375rem, 3.2vw, 2rem);
  font-weight: 400;
  line-height: 1.85;      /* 和文の大きな行送りが余白をつくる */
  letter-spacing: 0.08em;
  margin-block-end: 1.5rem;
}

/* ---- 中央揃えの光学補正 ----
   中央揃えでは、行末に残る空きも文字幅として数えられ、その半分だけ行が左へ寄る。
   ヒーローやボタンと同じ考え方で、空きの分を送り返して視覚的な中心に置く。
   （左揃えの面では行末の空きは見えないため、.section--center の中だけに効かせる） */
.section--center .section-label { text-indent: 0.3em; }   /* 字間 0.3em の余り */
.section--center .section-title { text-indent: 0.08em; }  /* 字間 0.08em の余り */

/* 行末が「、」「。」で終わる見出し。約物は全角の枠に対して字面が左半分に寄るため、
   字間の余りに加えて、右半分の空き（約 0.5em）も相殺する。
   text-indent は 1 行目にしか効かない。この見出しは <br> で複数行になるので、
   全行へ等しく効く padding で送る（transform は data-reveal の動きと衝突する） */
.section--center .section-title--punct {
  text-indent: 0;
  padding-inline-start: 0.58em;
}

/* 読ませる本文。リード文より少し大きく、行送りをさらに広く取る */
.section-body {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.9375rem, 1.9vw, 1.0625rem);
  line-height: 2.4;
  letter-spacing: 0.11em;
  color: var(--body-color);
  max-inline-size: 32em;   /* 意図した改行が効く幅。効かなくなる前に折り返させない */
}

/* 短い一文ずつを積むため、段落間はやや詰めて「ひと続きの語り」に保つ */
.section-body + .section-body {
  margin-block-start: clamp(1.5rem, 3.5vh, 2.125rem);
}

/* 狭い画面では、意図した改行がかえって行を乱すので解除する */
@media (max-width: 600px) {
  .section-body br { display: none; }
}


/* ---- 3つの価値：柱のように三本立てる ---- */
.value-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  margin-block-start: clamp(3.5rem, 9vh, 5.5rem);
  text-align: start;        /* 見出しは中央、柱は構造的に左揃え */
}

.value {
  padding-block-start: clamp(1.5rem, 3vh, 2rem);
  border-block-start: 1px solid var(--rule-color);
}

/* 柱とカードで共通の通し番号 */
.value__num,
.service__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--num-color);
  margin-block-end: 0.875rem;
}

.value__title {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-block-end: clamp(1rem, 2.5vh, 1.375rem);
}

.value__text {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.875rem, 1.7vw, 0.9375rem);
  line-height: 2.2;
  letter-spacing: 0.09em;
  color: var(--lead-color);
}

/* 三本並べるには窮屈な幅では、縦に積んで罫線で区切る */
@media (max-width: 768px) {
  .value-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .value { padding-block: clamp(1.75rem, 4vh, 2.25rem); }
  .value:last-child { border-block-end: 1px solid var(--rule-color); }
}

/* ---- サービスカード：塗らず、罫線だけで囲う ---- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-block-start: clamp(3.5rem, 9vh, 5.5rem);
  text-align: start;
}

.service {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--rule-color);   /* 塗りを持たせず、地の紙をそのまま見せる */
}

.service__title {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-block-end: clamp(0.875rem, 2vh, 1.125rem);
}

.service__text {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.8125rem, 1.6vw, 0.875rem);
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: var(--lead-color);
}

@media (max-width: 700px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ---- 締めの導線 ---- */
.cta {
  margin-block-start: clamp(3rem, 7vh, 4.5rem);
  text-align: center;
}

.cta__text,
.cta__note {
  font-family: var(--font-serif-jp);
  letter-spacing: 0.12em;
  color: var(--label-color);
}
.cta__text { font-size: 0.8125rem; margin-block-end: 1.5rem; }   /* ボタンの前置き */
.cta__note { font-size: 0.75rem;   margin-block-start: 1.5rem; } /* ボタンの後の但し書き */

/* ボタン本体は .button（ヘッダー・SERVICES・CONTACT で共通）を参照 */

/* ---- 作品インデックス：美術館のキャプション板のような一覧 ---- */
.index-list {
  margin-block-start: clamp(3.5rem, 9vh, 5.5rem);
  border-block-start: 1px solid var(--rule-color);
}

.index-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(1.25rem, 5vw, 3.5rem);
  padding-block: clamp(1.75rem, 4.5vh, 2.5rem);
  border-block-end: 1px solid var(--rule-color);
}

.index-item__num {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--num-color);
}

.index-item__body { flex: 1 1 16rem; }

/* 行の右端へ寄せる。窮屈になったら次の行へ落ちる */
.index-item__action { margin-inline-start: auto; }

@media (max-width: 600px) {
  .index-item__action {
    margin-inline-start: 0;
    margin-block-start: 0.5rem;
  }
}

.index-item__title {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.index-item__meta {
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-color);
}

/* =========================================
   フッター：ページを静かに閉じる面
   WORKS の暗い面（#141821）よりさらに一段沈め、
   ページの終わりであることを色で知らせる
   ========================================= */
.footer {
  /* .page-content の外にあるため、重ね順は自分で確保する。
     ヒーローが position: fixed（z-index: 1）で背後に居座っているので、
     前面に出したうえで背景を不透明にしないと、ヒーローが透けて見えてしまう */
  position: relative;
  z-index: 2;

  padding-block: clamp(4.5rem, 12vh, 7rem);
  padding-inline: 1.5rem;
  background: #0e1117;
  color: #fbfaf9;
  text-align: center;

  /* 暗い面のためのトークン反転（.section--dark と同じ考え方） */
  --label-color: rgb(251 250 249 / 0.46);
  --lead-color:  rgb(251 250 249 / 0.66);
  --rule-color:  rgb(251 250 249 / 0.16);
}

.footer__inner {
  max-inline-size: 880px;
  margin-inline: auto;
}

/* 中央揃えでは行末の空き（字間の余り・約物の右半分）の半分だけ行が左へ寄る。
   このフッターでは text-indent ではなく padding で送り返す。
   text-indent は 1 行目にしか効かず、著作権表記が 2 行になるため */

.footer__brand {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  padding-inline-start: 0.34em;   /* 字間の余りを相殺 */
  text-transform: uppercase;
}

.footer__tagline {
  margin-block-start: clamp(1.5rem, 3.5vh, 2.25rem);
  font-family: var(--font-serif-jp);
  font-size: clamp(0.875rem, 1.7vw, 1rem);
  line-height: 2;
  letter-spacing: 0.14em;
  color: var(--lead-color);
  padding-inline-start: 0.64em;   /* 字間 0.14em ＋ 行末「。」の空き 0.5em */
}

/* ---- リンク群 ---- */
.footer__nav { margin-block-start: clamp(2.75rem, 7vh, 4rem); }

.footer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem clamp(0.5rem, 2vw, 1.5rem);
}

.footer__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.25rem;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;      /* 1 行しかないのでここは text-indent で足りる */
  text-transform: uppercase;
  color: rgb(251 250 249 / 0.62);
  transition: color 0.5s var(--ease-quiet);
}
.footer__link:hover,
.footer__link:focus-visible { color: #fbfaf9; }

/* デスクトップのみ：ヘッダーのナビと同じく、細い罫線が左から静かに伸びる */
@media (min-width: 769px) {
  .footer__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0.25rem;
    inset-inline: 0.25rem;
    block-size: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-quiet);
  }
  .footer__link:hover::after,
  .footer__link:focus-visible::after { transform: scaleX(1); }
}

.footer__business {
  margin-block-start: clamp(2.75rem, 7vh, 4rem);
  font-family: var(--font-serif-jp);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  padding-inline-start: 0.16em;
  color: var(--label-color);
}

/* ---- 締めの表記。細い罫線で本文から切り離す ---- */
.footer__copyright {
  margin-block-start: clamp(2.75rem, 7vh, 4rem);
  padding-block-start: clamp(2rem, 5vh, 2.75rem);
  border-block-start: 1px solid var(--rule-color);
  font-family: var(--font-serif);
  font-size: 0.75rem;
  line-height: 2.2;
  letter-spacing: 0.2em;
  padding-inline-start: 0.2em;
  color: var(--label-color);
}

/* 最後のひとこと。いちばん低い声で置く */
.footer__note {
  margin-block-start: clamp(1.5rem, 3.5vh, 2rem);
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  padding-inline-start: 0.14em;
  color: rgb(251 250 249 / 0.34);
}

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

/* =========================================
   静かな動き：スクロールで一度だけ、ゆっくり現れる
   JS が動く環境でのみ隠す（.js は head で付与）
   ========================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 1.5s var(--ease-quiet) var(--reveal-delay, 0s),
    transform 1.5s var(--ease-quiet) var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

/* =========================================
   下層ページ（CONTACT）
   ヒーローを持たないため、追従ヘッダーのすぐ下から面が始まる。
   その分だけ上の余白を足して、表題に息をさせる
   ========================================= */
.section--head { padding-block-start: calc(clamp(5rem, 14vh, 9rem) + 64px); }

/* ページの表題。ヒーローのロゴタイプと同じ組み方を、一段小さくして使う */
.page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.4em;
  padding-inline-start: 0.4em;   /* 中央揃えの行末に残る字間を相殺する */
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: clamp(2rem, 5vh, 3rem);
}

/* =========================================
   フォーム
   塗らず、囲わず、下の罫線一本だけで入力欄を示す。
   ボタンやカードと同じ「線で語る」作りに揃える
   ========================================= */
.form {
  max-inline-size: 34em;
  margin-inline: auto;
  margin-block-start: clamp(3rem, 8vh, 4.5rem);
  text-align: start;   /* 中央揃えの面でも、入力欄と項目名は左揃えに戻す */
}

.field + .field { margin-block-start: clamp(2rem, 5vh, 2.75rem); }

.field__label {
  display: block;
  font-family: var(--font-serif-jp);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--label-color);
  margin-block-end: 0.75rem;
}

.field__input {
  display: block;
  inline-size: 100%;
  padding: 0.625rem 0.25rem;
  border: none;
  border-block-end: 1px solid var(--rule-color);
  border-radius: 0;      /* iOS が勝手に付ける丸みを消す */
  appearance: none;
  background: transparent;
  font-family: var(--font-serif-jp);
  font-size: 1rem;       /* 16px 未満だと iOS が入力時に拡大してしまう */
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: border-color 0.5s var(--ease-quiet);
}

.field__input:hover { border-color: #c9c2b6; }

/* 罫線の色だけでは弱いので、輪郭も併せて出す（線の色替えだけに頼らない） */
.field__input:focus-visible {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.field__input--area {
  min-block-size: 10em;
  resize: vertical;
}

.form__action {
  margin-block-start: clamp(2.5rem, 7vh, 4rem);
  text-align: center;
}

/* 送信のしくみが未接続であることを、その場で伝えるための但し書き */
.form__notice {
  margin-block-start: 1.5rem;
  font-family: var(--font-serif-jp);
  font-size: 0.75rem;
  line-height: 2;
  letter-spacing: 0.12em;
  color: var(--label-color);
}

/* ---- 締めの一文。ページの最後に、低い声で置く ---- */
.closing-line {
  font-family: var(--font-serif-jp);
  font-size: clamp(1rem, 2.4vw, 1.375rem);
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.12em;
  padding-inline-start: 0.62em;   /* 字間 0.12em ＋ 行末「。」の空き 0.5em */
  color: var(--ink);
}

/* 現在地を示すヘッダーのボタン。押せる先がないので、静かに沈めておく */
.button[aria-current="page"] {
  background: var(--button-ink);
  color: var(--button-inverse);
  cursor: default;
}