/* ==========================================================================
   base.css — リセット・和文組版・タイポグラフィ基盤
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--h-header);
}

body {
  background: var(--kinari);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 15px;
  line-height: 2.1;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;

  /* 和文組版の基本 */
  line-break: strict;             /* 禁則処理を厳格に（行頭の「、」「。」を防ぐ） */
  overflow-wrap: normal;
  word-break: normal;
  hanging-punctuation: allow-end; /* 行末の句読点を版面外へ逃がす（対応ブラウザのみ） */
}

h1, h2, h3 { text-wrap: pretty; }   /* 日本語の意味の途中で均等分割されるのを防ぐ */
p { text-wrap: pretty; }            /* 本文最終行が1語だけになるのを回避 */

/* 和紙の地合い（テクスチャ） */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--sumi); color: var(--kinari); }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 4px; }

.skip {
  position: absolute; top: -100px; left: 20px; z-index: 200;
  background: var(--sumi); color: var(--kinari);
  padding: 14px 24px; font-size: 14px;
  transition: top .3s var(--ease);
}
.skip:focus { top: 16px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- レイアウト共通 ----------------------------------------------------- */

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 28px; }
.wrap--text { max-width: 760px; }

.sec { padding-block: 100px; }
@media (min-width: 900px) { .sec { padding-block: 180px; } }
.sec--tight { padding-block: 64px; }
@media (min-width: 900px) { .sec--tight { padding-block: 96px; } }

.label {
  font-family: var(--mono); font-weight: 500; font-size: 10.5px;
  /* 原文表記のまま使うため大文字変換はしない */
  letter-spacing: 0.16em; color: var(--sumi-5); display: block;
}

.h2 {
  font-family: var(--mincho); font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  line-height: 1.8; letter-spacing: 0.06em;
}

.h3 {
  font-family: var(--mincho); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.75; letter-spacing: 0.05em;
}

.lead { color: var(--sumi-3); font-size: 14.5px; line-height: 2.15; }

/* ラベル＋見出し＋説明の3層構造（セクション先頭で共通使用） */
.section-head { margin-bottom: 56px; }
.section-head .label { margin-bottom: 22px; }
.section-head .h2 { margin-bottom: 16px; }
.section-head .lead { max-width: 52ch; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}