@charset "UTF-8";
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/WOFF2/LINESeedJP_OTF_Th.woff2") format("woff2"), url("../fonts/WOFF/LINESeedJP_OTF_Th.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/WOFF2/LINESeedJP_OTF_Rg.woff2") format("woff2"), url("../fonts/WOFF/LINESeedJP_OTF_Rg.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/WOFF2/LINESeedJP_OTF_Bd.woff2") format("woff2"), url("../fonts/WOFF/LINESeedJP_OTF_Bd.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Genei latego";
  src: url("../fonts/GenEiLateGoN_v2.ttf") format("truetype");
}
html {
  -webkit-text-size-adjust: 100%; /* 自動的なフォントサイズ調整を無効化 */
}

body {
  font-family: "Afacad", "LINE Seed JP", "Genei latego";
  font-optical-sizing: auto;
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  padding: 0;
}

main {
  margin: 80px auto 0 auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  main {
    margin: 70px auto 0 auto;
  }
}

img {
  width: 100%;
}

.pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: block;
}
@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
}

.txt {
  max-width: 860px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .txt {
    max-width: 768px;
    padding-right: 5%;
    padding-left: 5%;
  }
}

.ttl {
  text-align: center;
  color: #61C0F7;
}
.ttl h1, .ttl h2 {
  font-family: "Afacad";
  font-weight: 300;
  margin: 0;
}
.ttl small {
  font-family: "Genei latego";
}

p {
  font-family: "LINE Seed JP";
  font-size: 16px;
  line-height: 180%;
  color: #484848;
  margin: 0;
  font-weight: 400;
  text-align: left;
}

.page-ttl {
  position: relative;
  padding-top: 10%;
}
@media screen and (max-width: 768px) {
  .page-ttl {
    padding-top: 20%;
  }
}
.page-ttl .page-ttl-txt {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.page-ttl .page-ttl-txt .error-h1 {
  font-size: 4em;
  font-family: "LINE Seed JP";
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .page-ttl .page-ttl-txt .error-h1 {
    font-size: 2em;
    line-height: 1.2em;
  }
}
.page-ttl h1 {
  font-size: 6em;
  line-height: 1em;
}
@media screen and (max-width: 768px) {
  .page-ttl h1 {
    font-size: 4em;
  }
}
.page-ttl small {
  font-size: 1.5em;
}
@media screen and (max-width: 768px) {
  .page-ttl small {
    font-size: 1em;
  }
}
.page-ttl .page-ttl-bg {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100vw;
}
@media screen and (max-width: 768px) {
  .page-ttl .page-ttl-bg {
    width: 100vw;
  }
}

.h2-ttl-txt h2 {
  font-size: 5em;
  line-height: 1em;
}
@media screen and (max-width: 768px) {
  .h2-ttl-txt h2 {
    font-size: 3em;
  }
}
.h2-ttl-txt small {
  font-size: 1.25em;
}
@media screen and (max-width: 768px) {
  .h2-ttl-txt small {
    font-size: 0.9em;
  }
}

.btn a::after {
  content: none;
}
.btn button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 5em;
  border: none;
  border-radius: 9999px;
  font-size: 1.7em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  font-family: "Afacad";
  font-weight: 500;
  background: linear-gradient(231deg, #FFE4E9 2.67%, #FD87B8 35.11%, #FEA0C7 67.56%, #FFC8D5 100%);
  background-size: 300% 300%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  transition: background-position 1s ease, transform 0.3s ease;
}
@media screen and (max-width: 768px) {
  .btn button {
    font-size: 1.2em;
    padding: 0.7em 4em;
  }
}
.btn button:hover {
  transform: scale(1.05);
  background-position: 0% 50%;
}
.btn button:active {
  transform: scale(0.95);
}
.btn button a {
  color: #fff;
}
.btn button a::after {
  content: none;
}
.btn button span {
  margin-right: 1em;
}
.btn button .arrow {
  width: 13px;
  height: auto;
  transition: transform 0.3s ease;
}
@media screen and (max-width: 768px) {
  .btn button .arrow {
    width: 10px;
  }
}
.btn button:hover .arrow {
  transform: translateX(10px);
}

.btn-blue button {
  background: linear-gradient(252deg, #D5EEFF -118.71%, #b2ddf8 -22.44%, #61b2f0 73.84%, #D5EEFF 100%);
  background-size: 300% 300%;
  background-position: 100% 50%;
}

.btn-pink button {
  background: linear-gradient(231deg, #FFE4E9 2.67%, #FD87B8 35.11%, #FEA0C7 67.56%, #FFC8D5 100%);
  background-size: 300% 300%;
  background-position: 100% 50%;
}

.test-img {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 100px 0 20px 0;
}

.test-btn {
  margin: 30px 0;
}

/* 背景の魚 */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  /* 左から右に泳ぐ魚 */
  /* 右から左に泳ぐ魚 */
}
.background .fish {
  position: absolute;
  width: 80px; /* 基本サイズ */
  height: 40px;
  background: url("../img/bg_fish_02.webp") no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .background .fish {
    width: 60px; /* スマホ用に魚を少し小さく */
  }
}
.background .fish.left-to-right {
  transform: rotateY(0deg); /* 通常向き */
  animation: swim-left-to-right linear infinite;
}
.background .fish.right-to-left {
  transform: rotateY(180deg); /* 反転して左向き */
  animation: swim-right-to-left linear infinite;
}

/* 左から右へのアニメーション */
@keyframes swim-left-to-right {
  0% {
    left: -100px; /* 画面外左端 */
    top: 0%; /* 画面上端からスタート */
  }
  25% {
    left: 25%; /* 画面内で少し進む */
    top: 40%; /* 上から40%位置に泳ぐ */
  }
  50% {
    left: 50%; /* 画面中央 */
    top: 60%; /* 上から60%位置に泳ぐ */
  }
  75% {
    left: 75%; /* 画面内でさらに進む */
    top: 80%; /* 上から80%位置に泳ぐ */
  }
  100% {
    left: 100vw; /* 画面外右端 */
    top: 100%; /* 画面下端まで泳ぐ */
  }
}
/* 左から右へのアニメーション */
@keyframes swim-left-to-right {
  from {
    left: -100px; /* 画面外左端 */
  }
  to {
    left: 100vw; /* 画面外右端 */
  }
}
/* 右から左へのアニメーション */
@keyframes swim-right-to-left {
  from {
    left: 100vw; /* 画面外右端 */
  }
  to {
    left: -100px; /* 画面外左端 */
  }
}
/* 下からふわっと表示されるアニメーション */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px); /* 下から出てくるように */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 最終的に元の位置 */
  }
}
/* 初期状態は非表示 */
.scroll-fade {
  opacity: 0;
  transform: translateY(50px); /* 初期状態で下に位置 */
  transition: opacity 0.6s ease-out, transform 1s ease-out; /* アニメーション */
}

/* スクロールで表示される要素が画面内に入ったとき */
.visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る */
}

/* 個別に遅延をつけて表示順を作る */
.scroll-fade:nth-child(1) {
  animation-delay: 0.2s; /* 1番目の要素は0.2秒後に */
}

.scroll-fade:nth-child(2) {
  animation-delay: 0.4s; /* 2番目の要素は0.4秒後に */
}

.scroll-fade:nth-child(3) {
  animation-delay: 0.6s; /* 3番目の要素は0.6秒後に */
}

/* ローディングアニメーションのCSS */
.fish-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9CD6FF;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1; /* 初期状態は表示 */
  transition: opacity 1s ease-out; /* フェードアウトのアニメーション */
}

.swimming-fish {
  width: 100px;
  height: auto;
  animation: swim 1.8s linear infinite;
  position: absolute;
}

.swimming-fish img {
  width: 80px;
  height: auto;
  transform-origin: center; /* 回転の基準点を中心に */
}
@media screen and (max-width: 768px) {
  .swimming-fish img {
    width: 60px;
  }
}

@keyframes swim {
  0% {
    transform: rotate(0deg) translate(80px) rotate(90deg);
  }
  25% {
    transform: rotate(90deg) translate(80px) rotate(90deg);
  }
  50% {
    transform: rotate(180deg) translate(80px) rotate(90deg);
  }
  75% {
    transform: rotate(270deg) translate(80px) rotate(90deg);
  }
  100% {
    transform: rotate(360deg) translate(80px) rotate(90deg);
  }
}

/*# sourceMappingURL=style.css.map */