/* ============================================================
   02-base.css  ―  リセット / 土台 / 共通レイアウト
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  /* 固定ヘッダー分だけアンカー位置をずらす */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-base);
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  word-break: auto-phrase;          /* 日本語の折り返しを自然に */
  overflow-wrap: anywhere;
  /* スマホ下部の固定CTAに隠れないよう余白を確保 */
  padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

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

::selection { background: var(--c-pink); color: #fff; }

/* ------------------------------------------------------------
   背景の質感（紙のざらつき＋ビネット）
   ------------------------------------------------------------ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%,   rgba(255, 77, 157, .12), transparent 60%),
    radial-gradient(100% 70% at 100% 100%, rgba(160, 107, 255, .12), transparent 60%),
    radial-gradient(90%  60% at 0%  60%,  rgba(245, 199, 97, .08),  transparent 60%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ページ本体は背景より前面に */
.site-main, .site-header, .site-footer, .cta-fixed { position: relative; z-index: var(--z-body); }

/* ------------------------------------------------------------
   レイアウトユーティリティ
   ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--w-narrow); }

.section {
  position: relative;
  padding-block: var(--sp-2xl);
  overflow: hidden;
}
.section--soft  { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .22), transparent); }
.section--deep  { background: var(--c-bg-deep); }
.section--cream { background: var(--c-cream); color: var(--c-brown); }

/* 明るい面の中では文字色を反転 */
.section--cream .sec-head__ja { color: var(--c-brown); }
.section--cream .sec-head__en { color: var(--c-pink); }
.section--cream .sec-lead     { color: rgba(74, 44, 32, .8); }

.u-center { text-align: center; }
.u-mt-s  { margin-top: var(--sp-s); }
.u-mt-m  { margin-top: var(--sp-m); }
.u-mt-l  { margin-top: var(--sp-l); }
.u-mt-xl { margin-top: var(--sp-xl); }
.u-nowrap { white-space: nowrap; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* スマホ限定の改行（data.js の \n → <br class="br-sp">） */
@media (min-width: 600px) { .br-sp { display: none; } }

/* 画面幅で出し分け */
.u-sp-only { display: block; }
.u-pc-only { display: none; }
@media (min-width: 768px) {
  .u-sp-only { display: none; }
  .u-pc-only { display: block; }
}