/**
 * CSS File: base.css
 * 2026-05-12 | Final checked
 */

:root {
  --z_minus_1-back: -1;
  --z_0-base: 0;
  --z_1-up: 1;
  --z_10-content: 10;
  --z_20-content: 20;
  --z_30-content: 30;
  --z_50-ui: 50;
  --z_100-overlay: 100;
  --z_150-footer: 150;
  --z_200-header: 200;
  --z_900-modal: 900;
  --z_910-modal: 910;
  --z_920-modal: 920;
  --z_980-banner: 980;
  --z_990-tool: 990;
  --z_1000-loading: 1000;
  --z_9999-system: 9999;
}

/* 💡 追加：別ページからアンカーリンク（#）で遷移した際の固定ヘッダー裏への潜り込みを防止 */
html {
  scroll-padding-top: 90px; /* PCヘッダー高さ75px + ゆとり15px */
  overflow-anchor: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* スマホ時（ヘッダー高さ60px）の余白微調整 */
@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 75px; /* スマホヘッダー高さ60px + ゆとり15px */
  }
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
  -webkit-font-smoothing: antialiased;
}

/* ==============================================================================
 * LOADING STATE LOCK (ローディング中のスクロール強制ロック)
 * ============================================================================== */
html:has(body.is-loading),
body.is-loading {
  overflow: hidden !important;
  overflow-y: hidden !important;
  height: 100% !important;
}

.container {
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

h1 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.3;
}

/* 全角スペースを除去し半角へ修正 */
h2 {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.4;
}

/* ==============================================================================
 * SCROLL ANIMATION (共通スクロールアニメーション)
 * ============================================================================== */
[data-animation="fadeInUp"] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

[data-animation="fadeInUp"].is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================================================
 * MEDIA QUERIES
 * ============================================================================== */

/* スマホ横向き（低画面高） */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .container {
    padding: 0 20px;
  }
  h1 {
    font-size: 1.35rem;
  }
  h2 {
    font-size: 1.15rem;
  }
}

/* タブレット・標準PCサイズ */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .container {
    padding: 0 40px;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
}

/* 大型デスクトップサイズ */
@media screen and (min-width: 1024px) and (min-height: 501px) {
  .container {
    padding: 0 60px;
  }
  h1 {
    font-size: 2.5rem;
  }
}