/* ---------------------------------
   デザイントークン
   画面に出す色はこの 2 色だけ。透明度もグレーも使わない。
   OS の設定に追従させず、常に暗い配色で固定する
   --------------------------------- */
:root {
  /* スクロールバーなどブラウザ側が描く部分も暗くする */
  color-scheme: dark;

  --color-bg: #111827;
  --color-fg: #ffffff;

  /* 画面幅に応じて伸縮する左右の余白 */
  --space-page: clamp(1.5rem, 6vw, 7rem);

  /* ブロックどうしの間隔。罫線を使わないぶん、区切りはこの余白と見出しの大きさで作る */
  --space-block: clamp(3rem, 6vw, 5.5rem);
}

/* ---------------------------------
   ベース
   --------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* ページ末尾のアキ。ブロック間の間隔と同じだけ下にも余白を残す */
  padding: 0 var(--space-page) var(--space-block);

  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;

  /* 画面が広いほど視距離が長くなる（スマホ 約30cm / PC 約60cm）。
     同じ px でも遠いほど小さく見えるので、広い画面では文字も大きくする。
     17px（狭い画面）→ 20px（1143px 以上）。
     1rem を足しているのは、vw だけにするとブラウザの文字サイズ設定を無視してしまうため */
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

  /* 文字が大きいほど行間は詰めるのが定石。16px 用の 1.75 は 20px には緩い */
  line-height: 1.65;
}

/* 見出しのサイズと太さは各クラスで指定するので、ここでは一度リセットする */
h1,
h2,
p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

/* ---------------------------------
   ヒーロー：1 画面を使い切り、内容は下端に寄せる
   --------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* svh はモバイルのアドレスバーぶんを除いた高さ。未対応ブラウザは vh に落ちる */
  min-height: 100vh;
  min-height: 100svh;

  padding-bottom: var(--space-block);
}

/* 組織名。幅いっぱいには広げず、本文幅の 3 割ほどに収める。
   右に大きく余白を残すことで、拡大した文字ではなく「置かれたロゴ」として読ませる。

   t は字面の左にわずかな余白を持つ。margin-left の em 指定は、
   文字サイズが変わってもズレ量に追従させるため（光学的な左揃え） */
.hero__title {
  margin-left: -0.01em;

  font-size: clamp(3.5rem, 11vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.04em;

  /* thmall にはディセンダー（g や y のような下に伸びる部分）がないので、
     行の高さをそのままにすると文字の下に 0.15em ぶんの空白が残り、
     下のキャプションが離れて見える。0.79 まで詰めて字面に合わせる */
  line-height: 0.79;
}

/* 巨大な組織名に対するキャプションとして、本文と同じ大きさのまま置く */
.hero__meta {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---------------------------------
   本文ブロック
   見出しと本文を縦に積むだけ。罫線は引かず、
   大きな太字の見出しそのものが区切りの役目を果たす
   --------------------------------- */
.band {
  padding-top: var(--space-block);
  padding-bottom: var(--space-block);
}

/* 組織名より一段小さく、太字にする。この重さが罫線の代わりになる */
.band__label {
  font-size: clamp(2.5rem, 8vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;

  /* 見出しにも下に伸びる字がないため、ヒーローと同じ考え方で行の高さを詰める */
  line-height: 0.9;
}

/* 左カラムぶんの字下げがなくなったので、本文の幅は以前より広めに取る */
.band__body {
  max-width: 48ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* 段落間のアキ。em にして文字サイズに連動させる。
   rem のままだと文字を大きくしてもアキが取り残されて、段落の切れ目が読み取れなくなる */
.band__body > * + * {
  margin-top: 1.35em;
}