/* ===========================================
   Base — CSS variables, reset, global layout
   =========================================== */

:root {
  --color-text:       #1a1a1a;
  --color-text-soft:  #444444;
  --color-heading:    #111111;
  --color-border:     #eaeaea;
  --color-accent:     #9b5070;
  --color-dark:       #1a1a1a;
  --color-dark-soft:  #2a2a2a;
  --color-silver:     #bbbbbb;
  --font-jp:   "Sakura Mixed", "Noto Sans JP", sans-serif;
  --font-serif: "Sakura Mixed", "Noto Sans JP", sans-serif;
  --container: 1140px;
}

/* Digits → Istok Web, Latin → Almarai, Japanese → Noto Sans JP */
@font-face {
  font-family: "Sakura Mixed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/istokweb/v26/3qTvojGmgSyUukBzKslpBmt_.woff2) format("woff2");
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Sakura Mixed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/istokweb/v26/3qTqojGmgSyUukBzKslhvU5q-WMV.woff2) format("woff2");
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Sakura Mixed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/almarai/v19/tsstApxBaigK_hnnQ12Fow.woff2) format("woff2");
  unicode-range: U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: "Sakura Mixed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/almarai/v19/tssoApxBaigK_hnnS-agtn-Wow.woff2) format("woff2");
  unicode-range: U+0041-005A, U+0061-007A;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--color-text);
  background: #fff;
  line-height: 1.7;
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; font-weight: inherit; }

/* ---------- Section wrapper ---------- */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 860px) {
  .section { padding: 72px 20px; }
}