/* =========================
   layout.css (GLOBAL ONLY)
   - Variables (:root)
   - Global base/reset
   - Rem scaling system (PC fluid, Mobile fixed)
   - Shared layout helpers (container)
   ========================= */

/* -------- Variables -------- */
:root {
  /* Fonts */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'DM Sans', sans-serif;

  /* Colors */
  --color-primary: #222222;
  --color-secondary: #666666;
  --color-gray: #888888;
  --color-line: #d0d0d0;
  --color-bg: #eeeeee;
  --color-white: #ffffff;
  --color-hover: #0099ff;

  /* Layout */
  --container-width: 1352rem;

  /* Scaling Logic */
  --designW: 1440;
  --maxScale: 1.5;

  /* Defaults before JS runs */
  --vw: 1440px;
  --vwnounit: 1440;
}

/* -------- Rem Scaling (768 = mobile) -------- */
/* PC fluid scaling starts from 769px */
@media (min-width: 769px) {
  :root {
    font-size: min(calc(var(--maxScale) * 1px), calc(var(--vw) / var(--designW)));
  }
}

/* Mobile fixed: rem == px (stable layout/typography on mobile) */
@media (max-width: 768px) {
  :root {
    font-size: 1px;
  }
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-jp);
  background-color: var(--color-bg);
  color: var(--color-primary);
  /* -webkit-font-smoothing: antialiased;
  /* padding-top: 80px; Header高度占位  */
}

/* links / buttons base */
a {
  color: inherit;
  text-decoration: none;
  /* transition: opacity 0.3s; */
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* list base */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* optional: reduce accidental "transition: all" side effects globally */
a,
button {
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s;
}

/* -------- Shared Container -------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0;
}

/* common mobile page padding */
@media (max-width: 768px) {
  .container {
    padding: 0 22rem;
  }
}