/* =========================================================
   Hotmelt Top Styles — Cleaned & Scoped (v6)
   - Layered: Tokens → Base → Utilities → Layout → Components → Pages → Footer → Responsive
   - Scoped to avoid cross-area bleed (header/footer isolation)
   ========================================================= */

/* =========================================================
   00. Global Tokens
   ========================================================= */
/* #region Global Tokens */
:root {
  --c-text: #222;
  --c-muted: #5b6670;
  --c-border: #e2e5e8;
  --c-border-d: #b0becc;
  --c-bg: #fff;
  --c-bg-blue: #e5eef5;

  --c-gray: #f6f7f8;
  --c-beige: #e9e2d7;
  --c-orange: #e97730;
  --c-orange-light: #faf7f4;
  --c-orange-d: #c25b16;
  --c-navy: #0e2f47;
  --c-navy-rgb: 15, 42, 68;

  --c-link: #165d86;
  --c-link-hov: #0f4a6b;

  --elev-1: 0 6px 14px rgba(14, 47, 71, 0.1);
  --elev-2: 0 12px 24px rgba(14, 47, 71, 0.12);
  --shadow: 0 10px 24px rgba(14, 47, 71, 0.1);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;
}

/* #endregion Global Tokens */

/* =========================================================
   01. Base
   ========================================================= */
/* #region Base */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--c-text);
  background: var(--c-bg);
  font-family: "Noto Sans JP", "Yu Gothic", "Yu Gothic Medium", "Hiragino Sans",
    system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

a {
  color: var(--c-link);
  text-decoration: none;
}

a:hover {
  color: var(--c-link-hov);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(233, 119, 48, 0.35);
}

h1,
h2,
h3 {
  font-feature-settings: "c2sc", "smcp";
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
}

h1 {
  font-weight: 800;
}

h2 {
  margin: 0 0 36px;
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  /* 画面幅に応じて 1.3rem (20.8px) から 1.6rem (25.6px) まで滑らかに変化 */
  font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.6rem);
}

/* iOS auto-zoom prevention */
/* スマホ表示時のみ適用（PCのデザイン崩れ防止） */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* 念のため強制 */
    transform: scale(1); /* 古いiOSのバグ除けのおまじない */
  }
}

/* #endregion Base */

/* =========================================================
   02. Utilities
   ========================================================= */
/* #region Utilities */

.sr-only {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* #endregion Utilities */