@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(1px, calc(10px / 1000px * 100vw), 10px);
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

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

  font-family: "[YuMin_36pKn]", "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", "MS PMincho", "MS Mincho", serif;
}

/* 画面全体ラッパー */
.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; */
}
.cta-area {
  position: relative;
}
.btn-fv-cta {
  width: 75.9rem;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
.btn-sc6-cta {
  width: 90.2rem;
  position: absolute;
  bottom: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.btn-sc10-cta {
  width: 93.2rem;
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
}
.sc4-mt{
  margin-top: -13.8rem;
}
.mg-t-adj {
  margin-top: -16rem;
}
footer {
  width: 100%;
  height: 8rem;
  padding-top: 0.9rem;
  background: linear-gradient(to right, #2c90ac 0%, #46bcd3 50%, #2c90ac 100%);
  text-align: center;
}
footer div {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 0.8rem;
}
footer span,
footer a {
  font-size: 2.306rem;
  font-weight: 500;
  color: white;
}
footer p {
  font-size: 2.434rem;
  font-weight: 500;
  color: white;
}
/*  */
.button1 {
  display: inline-block;
  position: relative;
  animation: scale-up-down 2s infinite ease-in-out;
  border-radius: 9999px;
  overflow: hidden;
}
@keyframes scale-up-down {
  0%,
  100% {
    transform: scale(1);
  }
  40%,
  60% {
    transform: scale(1.0416);
  }
}
.button1:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-300px);
  width: 20%;
  height: 90%;
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0% 100%);
  background: linear-gradient(
    130deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shine 1.5s ease infinite;
  pointer-events: none;
}
@keyframes shine {
  0% {
    transform: translateX(-500px);
  }

  100% {
    transform: translateX(500px);
  }
}
.button2 {
  display: inline-block;
  position: relative;
  animation: scale-up-down 2s infinite ease-in-out;
  border-radius: 9999px;
  overflow: hidden;
}
.button2:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-300px);
  width: 20%;
  height: 95%;
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0% 100%);
  background: linear-gradient(
    130deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shine 1.5s ease infinite;
  pointer-events: none;
}
.button3 {
  display: inline-block;
  position: relative;
  animation: scale-up-down 2s infinite ease-in-out;
  border-radius: 9999px;
  overflow: hidden;
}
.button3:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-300px);
  width: 20%;
  height: 95%;
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0% 100%);
  background: linear-gradient(
    130deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shine 1.5s ease infinite;
  pointer-events: none;
}