/* ==========
変数
==========*/
:root {
  /* --- ブルー系 --- */
  --color-blue: #0d68ae;
  --color-blue-deep: #0b5fae;
  --color-blue-deep-rgb: 11, 95, 174;
  --color-blue-pale: #cbeff6;

  /* --- ダーク背景 --- */
  --color-charcoal: #1e2429;
  --color-charcoal-deep: #15202a;
  --color-cyan: #29abe2;
  --color-cyan-dark: #1a8ccc;
  --color-cyan-pale: #e8fcff;
  --color-cyan-rgb: 41, 171, 226;
  --color-gray-dark: #24313d;
  --color-gray-pale: #eef3f6;
  --color-ink: #0d1825;
  --color-ink-rgb: 13, 24, 37;
  --color-light: #eef2f4;
  --color-light-rgb: 238, 242, 244;
  --color-lime: #d7ee1f;
  --color-lime-dark: #c2d62e;
  --color-lime-dark-rgb: 194, 214, 46;
  --color-lime-pale: #f2feae;
  --color-lime-rgb: 215, 238, 31;
  --color-navy: #102438;
  --color-navy-rgb: 16, 36, 56;

  /* --- ライム系 --- */
  --color-neon: #d9ff00;
  --color-night: #0a1320;
  --color-sky: #01acc7;
  --color-sky-pale: #d1ebf1;
  --color-teal: #0189a0;
  --color-teal-dark: #07809e;

  /* --- ベース --- */
  --color-white: #ffffff;

  /* --- グラデーション --- */
  --gradient-blue-lime: linear-gradient(
    90deg,
    var(--color-blue-pale) 0%,
    var(--color-lime-pale) 100%
  );
  interpolate-size: allow-keywords;
}

/* ==========
ベース
==========*/
html {
  color: var(--color-navy);
  font-size: 62.5%;
}
body {
  color: var(--color-navy);
  font-size: 1.4rem;
  line-height: 1.5;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
img {
  height: auto;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.8rem;
  }
}

/* ==========
ユーティリティ
==========*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;

  clip: rect(0, 0, 0, 0);
}
@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

/* ==========
cta-btn（LINE CTAボタン：共通パーツ）
==========*/
.cta-btn {
  width: 90%;
  margin: 0 auto;

  padding-block: 40px;
}
.cta-btn__link {
  display: block;
  border-radius: 8px;
  transition: transform 0.2s ease;
  animation: cta-btn-pulse 1.6s ease-in-out infinite;
}
.cta-btn__link:hover {
  transform: scale(1.06);
  animation: none;
}
.cta-btn__link:focus-visible {
  outline: 3px solid var(--color-blue-deep);

  outline-offset: 4px;
}
.cta-btn__link:active {
  transform: scale(0.97);
}
.cta-btn.is-hidden {
  visibility: hidden;
}

/* --- 画面下部固定CTA --- */
.cta-btn--fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  transition:
    transform 0.4s ease,
    visibility 0.4s;

  padding-block: 12px calc(12px + env(safe-area-inset-bottom));
}
.cta-btn--fixed::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100vw;
  box-shadow: 0 -4px 16px rgba(var(--color-ink-rgb), 0.12);
  background: var(--gradient-blue-lime);
  content: "";
}
.cta-btn--fixed.is-away {
  visibility: hidden;
  transform: translateY(100%);
}
.cta-btn--fixed.is-hidden {
  transition: none;
}
.cta-btn__note {
  color: var(--color-ink);
  font-size: 1.2rem;
  text-align: center;
}
@keyframes cta-btn-pulse {
  0%,
  40%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.06);
  }
  25% {
    transform: scale(0.98);
  }
  32% {
    transform: scale(1.03);
  }
}
@media screen and (min-width: 768px) {
  .cta-btn {
    width: 90%;
    max-width: 520px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn__link {
    animation: none;
  }
  .cta-btn--fixed {
    transition: none;
  }
}