@charset "UTF-8";
/* niau group｜base ── リセット＋日本語組版規律（W-2）＋タイポ基礎 */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-ja);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  /* 日本語組版：禁則を効かせる。overflow-wrap:anywhere は禁則を打ち消すため使わない */
  font-feature-settings:"palt" 1;
  word-break:auto-phrase;
  line-break:strict;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--salon);outline-offset:3px;border-radius:2px}

/* ---------- レイアウト土台 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--side-pad)}
.sec{padding-block:var(--section-py)}
.sec--tight{padding-block:calc(var(--section-py) * .6)}
.sec--paper2{background:var(--paper-2)}
.sec--dark{background:var(--ink-bg);color:var(--ink-paper)}
.sec--dark .lead,.sec--dark .ink2{color:var(--ink-paper-2)}
.sec--dark .rule{background:var(--line-dark)}

/* grid が内容幅で膨らむのを防ぐ（minmax(0,1fr) 必須） */
.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ---------- タイポ ---------- */
.en{font-family:var(--ff-en);font-weight:400;letter-spacing:.01em}

.eyebrow{
  font-family:var(--ff-en);
  font-size:var(--fs-label);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:14px;
}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:1px;background:currentColor;flex:none}
.dual--left + .lead,.split__txt .lead{margin-inline:0}
.split__txt .eyebrow{justify-content:flex-start}
.split__txt .eyebrow::after{display:none}
.sec--dark .eyebrow{color:var(--ink-paper-2)}

/* 和英二層見出し：シュルール所沢の作法を踏襲
   ＝Baskervville の大きな英文（実測60px）を中央に置き、小さな和文を下に添える。
   帯やヒーロー内など左揃えにしたい場面だけ .dual--left を付ける。 */
.dual{margin-bottom:clamp(26px,3.4vw,46px);text-align:center}
.dual__en{
  display:block;
  font-family:var(--ff-en);
  font-size:var(--fs-en-sec);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink);
}
.dual__ja{
  display:block;
  font-family:var(--ff-ja-disp);
  font-weight:500;
  font-size:var(--fs-headline);
  line-height:1.75;
  letter-spacing:.04em;
  margin-top:.35em;
  color:var(--ink);
}
.dual--left{text-align:left}
.sec--dark .dual__en,.sec--dark .dual__ja{color:var(--ink-paper)}

h2.dual__ja,h3.dual__ja{font-weight:600}

.lead{
  font-size:var(--fs-body);
  color:var(--ink-2);
  max-width:var(--text-max);
  line-height:2.05;
}
.lead--center{margin-inline:auto}
.center{text-align:center}
.center .lead{margin-inline:auto}

.note{font-size:var(--fs-label);color:var(--ink-3);line-height:1.85}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- スクロール演出 ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  video{display:none}
}