@charset "UTF-8";

/* リーリース時には消すこと!!! */
* {
  /* outline: 1px rgba(255, 0, 0, 0.8) solid; */
}
/* 変数の定義 */
:root {
  --page-max: 1000px; /* ページ外枠の最大幅（背景/大きなグリッド） */
  --container-max: 1000px; /* 本文コンテンツの最大幅（可読幅） */
  --min-page: 375px; /* サイトの最小想定幅（レイアウト崩れ防止） */
  --gutter: clamp(16px, 4vw, 32px); /* 端の余白：fluid */
}
html {
  scroll-behavior: smooth;
  /* コンテンツ幅でのフォントサイズ */
  font-size: clamp(10px, calc(10px / 375px * 100vw), 21px);
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  html {
    font-size: clamp(1px, calc(10px / var(--container-max) * 100vw), 10px);
  }
}
body {
  max-width: var(--page-max);
  min-width: var(--min-page);
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 8px rgba(33, 33, 33, 0.5);
}

html,
body {
  /* height: 100%; */
}

/* 画面全体ラッパー */
.l-app {
  min-height: 100vh;
  box-sizing: border-box;

  /* iOSのノッチ・ホームバー分の安全マージン */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* 必要なら、背景色やレイアウト全体をここで指定 */
.l-app {
  background-color: #fff;
  /* 例：全体のレイアウト調整など */
}

img {
  display: block;
  width: 100%;
  height: auto;
}
a {
  transition: 0.3s;
}
a:hover {
  opacity: 0.6;
  cursor: pointer;
}

.cta-area {
  position: relative;
}

.btn-fv_img,
.btn-cta_img {
  display: block;
  position: absolute;
  height: auto;
  width: 97.2%;
  transform: translateX(-50%);
  left: 50%;
}
.btn-fv_img {
  bottom: 0px;
}
.btn-cta_img {
  bottom: 0px;
}

/* ボタンアニメーション */
.u-pulse {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: translateX(-50%) scale(0.9);
    -webkit-transform: translateX(-50%) scale(0.9);
  }
  50% {
    transform: translateX(-50%) scale(1.02);
    -webkit-transform: translateX(-50%) scale(1.02);
  }
  100% {
    transform: translateX(-50%) scale(0.9);
    -webkit-transform: translateX(-50%) scale(0.9);
  }
}
/* フッター固定ボタン */

.footer_a {
  display: block;
  position: fixed;
  width: 97.2%;
  max-width: 972px;
  height: auto;
  bottom: 5rem;
  bottom: 0;
  z-index: 999;
  margin: 0 auto;
  left: 50%;
  transform: translate(0, 0);
}
.footer_a {
  /* 初期表示状態 */
  opacity: 1;
  /* transform: translateY(0); */
  transition:
    opacity 1s ease,
    transform 1s ease;
  will-change: opacity, transform; /* スクロール連動のパフォーマンス補助 */
}

/* 非表示アニメーション状態 */
.footer_a.is-hidden {
  opacity: 1;
  transform: translate(0, 40rem); /* 少し沈む感じ。不要なら 0 に */
  pointer-events: none;
}