/* =========================================================
   基本設定
   - デザインは PC 幅 1440px 基準。--u は「デザイン上の 1px」を表す単位で、
     画面幅に合わせて伸縮し、1440px 以上では 1px で止まる。
     main.js がスクロールバーを除いた画面幅から計算して上書きする。
   - 例: Figma で 24px → calc(24 * var(--u))
   - ローディングとメインビジュアル（.loading / .hero）だけは、--u を --uw（1440px で止めない単位）に
     置き換えて、画面幅に合わせて全体を拡大する。
   ========================================================= */
:root {
  --u: min(calc(100vw / 1440), 1px);
  /* 1440px で止めない単位（main.js が上書きする） */
  --uw: calc(100vw / 1440);
  /* 1440px で止まる単位の控え。.hero の中で --u を置き換えても、こちらは変わらない（石壁の柄の大きさをそろえるのに使う） */
  --uc: min(calc(100vw / 1440), 1px);
  /* 画面幅いっぱいに広げる単位（main.js が上書きする）。PC は --uw と同じ。SP は 600px で止めない画面幅 / 375 */
  --uwide: calc(100vw / 1440);

  --color-blue: #00479d;
  --color-blue-logo: #03489d;
  --color-sky: #409ad6;
  --color-sky-pale: #ecf5fb;
  --color-gray-bg: #f6f6f6;
  --color-gray-band: #e6e6e6;
  --color-white: #ffffff;
  --color-text: #1a1a1a;

  --font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 英字見出し。デザインは URW DIN（有料）なので近い無料フォントで代用中 */
  --font-en-cond: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  /* 10th Anniversary 帯の英字。デザインの字形に近い無料フォントで代用中 */
  --font-en-geo: "Jost", "Futura", sans-serif;

  --header-h: calc(64 * var(--u));
}

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

html {
  -webkit-text-size-adjust: 100%;
}

.u-sp-br {
  display: none;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-ja);
  font-weight: 500;
  line-height: 1.8;
}

/* 波・柄・帯などの装飾は画面の外まで広がるため、横にスクロールできないようにする。
   body だけでは iPhone や iPad の Safari で横に揺れることがあるため、html にも付ける。
   clip に対応していないブラウザ向けに、先に hidden を書いている */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ローディング中はスクロールさせない */
body.is-loading {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: none;
}

a {
  color: inherit;
}

@media (min-width: 1200px) {
  .u-sp-only {
    display: none !important;
  }
}

/* ローディングとメインビジュアルは、画面幅に合わせて中身ごと拡大する */
.loading,
.hero {
  --u: var(--uw);
}

/* Figma の 1440px フレーム。中身の座標はこの左上を基準にする。 */
.design-frame {
  position: absolute;
  inset: 0 auto 0 50%;
  width: calc(1440 * var(--u));
  translate: -50% 0;
}

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

/* ---------------------------------------------------------
   たたき台確認用パネル（URL に ?debug を付けたときだけ表示）
   --------------------------------------------------------- */
.debug-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: none;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.75);
  font: 12px/1.4 system-ui, sans-serif;
  color: #fff;
}

.debug-panel.is-visible {
  display: grid;
}

.debug-panel button {
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: #111;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.debug-panel button:hover,
.debug-panel button:focus-visible {
  background: #f2f6fa;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.debug-panel button:active {
  background: #e6edf3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.debug-panel button[aria-pressed="true"] {
  background: var(--color-sky);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .debug-panel button {
    transition: none;
  }
}