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

:root {
  /* 最背面：装飾、背景パターン用 */
  --z_minus_1-back: -1;
  /* z-index: var(--z_minus_1-back); */

  /* 標準：特に指定なし（0） */
  --z_0-base: 0;
  /* z-index: var(--z_0-base); */

  /* 優先：同じコンポーネント内で少しだけ上にしたい時 */
  --z_1-up: 1;
  /* z-index: var(--z_1-up); */

  /* コンテンツ下層：重なり合う画像や装飾要素 */
  --z_10-content: 10;
  /* z-index: var(--z_10-content); */

  /* コンテンツ中層：テキストやクリック可能な要素 */
  --z_20-content: 20;
  /* z-index: var(--z_20-content); */

  /* コンテンツ上層：テキストやクリック可能な要素 */
  --z_30-content: 30;
  /* z-index: var(--z_30-content); */

  /* UI要素：フローティングボタン(追従ボタン)、タブメニュー */
  --z_50-ui: 50;
  /* z-index: var(--z_50-ui); */

  /* オーバーレイ：ハンバーガーメニュー展開時、ドロップダウン */
  --z_100-overlay: 100;
  /* z-index: var(--z_100-overlay); */

  /* サイト共通：フッター */
  --z_150-footer: 150;
  /* z-index: var(--z_150-footer); */

  /* サイト共通：固定ヘッダー、グローバルナビ */
  --z_200-header: 200;
  /* z-index: var(--z_200-header); */

  /* 最上位下層：モーダル、ポップアップ */
  --z_900-modal: 900;
  /* z-index: var(--z_900-modal); */

  /* 最上位中層：モーダル、ポップアップ */
  --z_910-modal: 910;
  /* z-index: var(--z_910-modal); */

  /* 最上位上層：モーダル、ポップアップ */
  --z_920-modal: 920;
  /* z-index: var(--z_920-modal); */

  /* 最上位上層：モーダル、ポップアップ */
  --z_980-banner: 980;
  /* z-index: var(--z_980-banner); */

  /* 最上位：ツールバー */
  --z_990-tool: 990;
  /* z-index: var(--z_990-tool); */

  /* 聖域：ローディング */
  --z_1000-loading: 1000;
  /* z-index: var(--z_1000-loading); */

  /* 聖域：システム通知 */
  --z_9999-system: 9999;
  /* z-index: var(--z_999-system); */
}

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

.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;
}

body:not(.home) .p-header__nav.is-open {
  display: none !important;
}

br.u-hidden-pc {
  display: block;
}

/* ==========================================================================
   共通スクロールアニメーション (fadeInUp)
   ========================================================================= */

[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);
}

/* ==========================================================================
   タブレット・PC: 768px以上
   ========================================================================== */
@media screen and (min-width: 768px) {
  .container {
    padding: 0 40px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   大型モニター: 1024px以上
   ========================================================================== */
@media screen and (min-width: 1024px) {
  .container {
    padding: 0 60px;
  }

  h1 {
    font-size: 2.5rem;
  }
}