/* ============================================================
   BASE  —  リセット / タイポグラフィ基礎 / アクセシビリティ
   ============================================================ */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
section[id]{ scroll-margin-top: 84px; }
body{
  margin:0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--ff-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }
h1,h2,h3,h4,p,ul,ol,dl,dd,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

/* 角丸は全要素で 0(design-principles L-7) */
*{ border-radius: 0 !important; }

/* ---- 見出し / 英字 ---------------------------------------- */
.display{
  font-family: var(--ff-display);
  font-weight: 200;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin:0;
}
.display--xl{ font-size: var(--fs-display-xl); letter-spacing: .01em; }
.display--m { font-size: var(--fs-display-m); }
@media (max-width: 899px){ .display--m{ line-height: .90; } }
.display--s { font-size: var(--fs-display-s); letter-spacing: .06em; }

.h2{
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.lead{ font-size: var(--fs-lead); line-height: var(--lh-body); max-width: var(--measure); }
.body{ max-width: var(--measure); color: var(--ink-70); }

/* セクション索引ラベル(小英字)。中央には置かない ------------ */
.idx{
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-label);
  color: var(--ink-45);
  display:flex; align-items:center; gap:14px;
}
.idx::after{ content:""; flex:1 1 auto; height:1px; background: var(--hair); max-width:96px; }
.idx--light{ color: var(--white-45); }
.idx--light::after{ background: var(--hair-light); }

/* ---- CTA:テキスト + 正方形の矢印。角丸・グラデーションなし -- */
.cta{
  display:inline-flex; align-items:stretch;
  font-family: var(--ff-display); font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; font-size: var(--fs-label);
}
.cta__label{
  display:flex; align-items:center; padding:0 22px; height:52px;
  border:1px solid var(--hair-strong);
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.cta__arrow{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border:1px solid var(--hair-strong); border-left:0;
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.cta:hover .cta__label, .cta:hover .cta__arrow{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.cta--light .cta__label, .cta--light .cta__arrow{ border-color: var(--hair-light); color: var(--white); }
.cta--light:hover .cta__label, .cta--light:hover .cta__arrow{ background: var(--white); color: var(--brand-purple-deep); border-color: var(--white); }

/* テキストリンク(下線はヘアライン) ------------------------- */
.tlink{
  display:inline-block; padding-bottom:8px; border-bottom:1px solid var(--hair-strong);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform:uppercase;
  font-family: var(--ff-display);
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.tlink:hover{ border-color: var(--ink); }

/* ---- 写真の共通処理 ----------------------------------------
   仮素材が最大304px・ハイキーのため、トーンを落として粒子を乗せる。
   実素材受領後は .ph img の filter を外す前提の暫定処理。
   ------------------------------------------------------------ */
.ph{ position:relative; overflow:hidden; background: var(--off-white); }
.ph img{ width:100%; height:100%; object-fit:cover; filter: saturate(.66) contrast(1.16) brightness(.88); }
.ph--veil::after{ content:""; position:absolute; inset:0; background: var(--brand-purple-veil); mix-blend-mode: multiply; }
.ph--dim img{ filter: saturate(.55) contrast(1.20) brightness(.72); }
.ph--dim::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,18,24,.30) 0%, rgba(20,18,24,.42) 55%, rgba(20,18,24,.66) 100%); }

/* グレイン:低解像度素材の粗さを馴染ませ、静けさを出す */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---- 慣性スクロール(Lenis)に必要な最小指定 --------------------
   Lenis が <html> に付与するクラスに対応する。レイアウト・余白・
   タイポグラフィ・写真サイズには影響しない。 */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }

/* ---- アクセシビリティ -------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--ink); color: var(--white); padding:14px 20px;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--brand-purple); outline-offset:3px; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 開発用の注記(Prototype にのみ表示。実装時に削除) */
.devnote{
  font-size: var(--fs-label); letter-spacing:.04em; color: var(--ink-45);
  border-left:1px solid var(--hair-strong); padding-left:12px; line-height:1.7;
}
.devnote--light{ color: var(--white-45); border-color: var(--hair-light); }