html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

html, body {
  background: var(--c-base);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-feature-settings: "palt" 1;
}

/* セクション共通 */
.sec {
  position: relative;
  width: 100%;
  padding: var(--sp-8) var(--sp-5);
  scroll-snap-align: start;
}

.sec-inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
}

.sec-inner-narrow {
  max-width: var(--maxw-text);
  margin: 0 auto;
}

/* セクション番号＋タイトル */
.sec-label {
  font-family: var(--ff-eng);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--c-ink-faint);
  margin-bottom: var(--sp-2);
}

.sec-title {
  font-family: var(--ff-mincho);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin-bottom: var(--sp-5);
  letter-spacing: 0.02em;
}

.sec-title small {
  display: block;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-ink-soft);
  margin-top: var(--sp-2);
  letter-spacing: 0;
}

.sec-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-6);
  max-width: 56ch;
}

.sec p + p {
  margin-top: var(--sp-3);
}

/* レイアウトパターンA：写真ドン型 */
.layout-photo {
  display: grid;
  gap: var(--sp-6);
}

.layout-photo .photo-stage {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.layout-photo .photo-stage img {
  width: 100%;
  height: auto;
}

.layout-photo .photo-stage-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* レイアウトパターンB：左図右テキスト */
.layout-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}

.layout-split .figure-side {
  position: sticky;
  top: var(--sp-6);
}

.layout-split .figure-side img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.layout-split .text-side h3 {
  font-family: var(--ff-mincho);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

.layout-split .text-side h3:not(:first-child) {
  margin-top: var(--sp-6);
}

/* レイアウトパターンC：縦組み引用型 */
.layout-quote {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
}

.layout-quote .quote-text {
  font-family: var(--ff-mincho);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
  letter-spacing: 0.04em;
}

.layout-quote .quote-text em {
  font-style: normal;
  color: var(--c-melanin);
}

.layout-quote .quote-source {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-faint);
  letter-spacing: 0.1em;
}

/* レイアウトパターンD：階層図 */
.layout-diagram {
  display: grid;
  gap: var(--sp-6);
}

.layout-diagram .diagram-stage {
  background: var(--c-base-warm);
  border-radius: var(--radius-md);
  padding: var(--sp-7) var(--sp-5);
}

/* レイアウトパターンE：表組型 */
.layout-table {
  display: grid;
  gap: var(--sp-6);
}

/* レイアウトパターンF：帯型インデックス */
.layout-index {
  background: var(--c-ink);
  color: var(--c-base);
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--radius-md);
}

.layout-index .sec-title { color: var(--c-base); }
.layout-index .sec-lead { color: var(--c-base-warm); }
.layout-index .sec-label { color: var(--c-water-soft); }

/* FV（ヒーロー） */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(199, 123, 74, 0.08), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(123, 160, 152, 0.10), transparent 65%);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  width: 100%;
}

.hero-en {
  font-family: var(--ff-eng);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-melanin);
  margin-bottom: var(--sp-4);
}

.hero-title {
  font-family: var(--ff-mincho);
  font-weight: 900;
  font-size: var(--fs-4xl);
  line-height: 1.15;
  letter-spacing: 0.05em;
  color: var(--c-ink);
  margin-bottom: var(--sp-4);
}

.hero-sub {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-7);
}

.hero-meta {
  display: flex;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-faint);
  letter-spacing: 0.1em;
}

.hero-meta strong {
  color: var(--c-ink);
  font-weight: 500;
}

/* フッター */
.site-footer {
  background: var(--c-ink);
  color: var(--c-base-warm);
  padding: var(--sp-7) var(--sp-5);
  font-size: var(--fs-sm);
}

.site-footer-inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.site-footer h4 {
  font-family: var(--ff-eng);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-3);
  color: var(--c-water-soft);
}

.site-footer ul li {
  margin-bottom: var(--sp-2);
  color: var(--c-base);
}

.site-footer .copyright {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  font-size: var(--fs-xxs);
  color: var(--c-ink-faint);
  font-family: var(--ff-eng);
  letter-spacing: 0.1em;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .layout-split {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .layout-split .figure-side {
    position: static;
  }
  .layout-photo .photo-stage-pair {
    grid-template-columns: 1fr;
  }
  .hero-title { font-size: var(--fs-3xl); }
  .layout-quote .quote-text { font-size: var(--fs-2xl); }
  .sec-title { font-size: var(--fs-xl); }
  .sec { padding: var(--sp-7) var(--sp-4); }
}

@media (max-width: 560px) {
  :root {
    --fs-base: 16px;
    --fs-3xl: 36px;
    --fs-4xl: 48px;
  }
  .sec { padding: var(--sp-6) var(--sp-3); }
  .hero-meta { flex-direction: column; gap: var(--sp-2); }
}