@charset "UTF-8";
/* ---------------------------------------------
  reset
--------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* 解析タグの隙間対策 */
body > img {
  display: none;
}

.lp_main div, .lp_main span, .lp_main iframe, .lp_main h1, .lp_main h2, .lp_main h3, .lp_main h4, .lp_main h5, .lp_main h6, .lp_main p, .lp_main address, .lp_main img, .lp_main small, .lp_main strong, .lp_main sub, .lp_main sup, .lp_main dl,
.lp_main dt, .lp_main dd, .lp_main ol, .lp_main ul, .lp_main form, .lp_main label, .lp_main table, .lp_main caption, .lp_main tbody, .lp_main tfoot, .lp_main thead, .lp_main tr, .lp_main th, .lp_main td, .lp_main article,
.lp_main aside, .lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section, .lp_main video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
  background: transparent;
}
.lp_main article, .lp_main aside, .lp_main details, .lp_main figcaption, .lp_main figure,
.lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section {
  display: block;
}
.lp_main ol, .lp_main ul {
  list-style: none;
}
.lp_main :focus {
  outline: 0;
}
.lp_main table {
  border-collapse: collapse;
  border-spacing: 0;
}
.lp_main *,
.lp_main *::before,
.lp_main *::after {
  box-sizing: border-box;
}
.lp_main img {
  display: block;
  height: auto;
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
}
.lp_main svg,
.lp_main video {
  width: 100%;
  height: auto;
}


/* ---------------------------------------------
  common
--------------------------------------------- */
/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

.lp_main {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, "Meiryo UI", Avenir, "Open Sans", Helvetica, "Helvetica Neue", Arial, Verdana, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
.lp_main .p-box {
  position: relative;
}
/* ---------------------------------------------
  cv
--------------------------------------------- */
.lp_main .cv_btn {
  width: calc(643 / 750 * 100%);
  position: absolute;
  top: 32.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
/* ---------------------------------------------
  fv
--------------------------------------------- */
.lp_main .fv_slide_01 {
  height: min(1335 / 750 * 100vw, 1335px);
  background-size: contain;
}
.lp_main .fv_slide_01_01 {
  background-image: url(../img/fv_slide_01_01.jpg);
}
.lp_main .fv_slide_01_02 {
  background-image: url(../img/fv_slide_01_02.jpg);
}
.lp_main .fv_slide_02 {
  height: min(1332 / 750 * 100vw, 1332px);
}
.lp_main .fv_slide_02_01 {
  background-image: url(../img/fv_slide_02_01.jpg);
}
.lp_main .fv_slide_02_02 {
  background-image: url(../img/fv_slide_02_02.jpg);
}
/* ---------------------------------------------
  problem
--------------------------------------------- */
.lp_main .problem_anime {
  position: absolute;
}
.lp_main .problem_anime_01 {
  width: calc(719 / 750 * 100%);
  top: 0;
  left: 0;
}
.lp_main .problem_anime_02 {
  width: calc(716 / 750 * 100%);
  top: 32%;
  right: 0;
}
.lp_main .problem_anime_03 {
  width: calc(719 / 750 * 100%);
  top: 64%;
  left: 0;
}
.lp_main .problem_slider {
  width: calc(594 / 750 * 100%);
  position: absolute;
  top: 2%;
  left: 0;
  right: 0;
  margin-inline: auto;
}
.lp_main .problem_slider .slick-arrow {
  background-size: contain;
  background-repeat: no-repeat;
  width: min(53 / 750 * 100vw, 53px);
  height: min(53 / 750 * 100vw, 53px);
}
.lp_main .problem_slider .slick-arrow::before {
  font-size: 0;
}
.lp_main .problem_slider .slick-prev {
  background-image: url(../img/problem_slide_prev.png);
  top: 49%;
  left: -4.5%;
  z-index: 2;
}
.lp_main .problem_slider .slick-next {
  background-image: url(../img/problem_slide_next.png);
  top: 49%;
  right: -4.5%;
  z-index: 2;
}
.lp_main .problem_slider .slick-dots li {
  pointer-events: none;
  margin: 0 min(35 / 750 * 100vw, 35px);
}
.lp_main .problem_slider .slick-dots li button::before {
  background-color: #fff;
  content: "";
  cursor: pointer;
  width: min(22 / 750 * 100vw, 22px);
  height: min(22 / 750 * 100vw, 22px);
  border-radius: 50%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: min(35 / 750 * 100vw, 35px);
  pointer-events: all;
  opacity: 1;
  z-index: 2;
}
.lp_main .problem_slider .slick-dots li.slick-active button::before {
  background-color: #d13046;
}
/* ---------------------------------------------
  アニメーション
--------------------------------------------- */
.lp_main .io {
  transition: all 2s ease;
}
.lp_main .io_fadeIn {
  opacity: 0;
}
.lp_main .io_fadeIn.is_active {
  opacity: 1;
}
/* ---------------------------------------------
  追従ボタン
--------------------------------------------- */
.lp_main .bl_floatArea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.4s,
    opacity 0.4s;
  box-sizing: border-box;
}
.lp_main .bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
.lp_main .bl_floatArea_inner {
  max-width: 750px;
  margin: auto;
  box-sizing: border-box;
}

/* ボタン */
.lp_main .bl_floatArea_btn {
  display: block;
  width: calc(643 / 750 * 100%);
  margin-inline: auto;
}
.lp_main .bl_floatArea_btn img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* mod 2025-06-24 */
p{
  position: relative;
}
.button{
  width: 90.66666666666667%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.button img{
  animation: fluffy-pulse 2s infinite ease-in-out;
  
}

.button.button_1{
  top: -5%;
}
.button.button_2{
  top: -5%;
}

@keyframes fluffy-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
    /* 10%拡大 */
  }
}

.movie{
  width: 86.66666666666667%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  aspect-ratio: 16/9;
}
.agif{
  width: 86.66666666666667% !important;
  height: auto !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}


@keyframes seesaw-tilt {
  0% {
      transform: rotate(8deg);
    }
  
    50% {
      transform: rotate(-8deg);
    }
  
    100% {
      transform: rotate(8deg);
    }
}
.fish{
  position: absolute;
  top: 0;
  display: block;
}


.fish img {
  animation: seesaw-tilt 2s infinite ease-in-out;;
  transform-origin: center center;
}
.fish-1,
.fish-3,
.fish-5{
  width: 30%;
  
}
.fish-2,
.fish-4,
.fish-6{
  width: 28%;
  
}
.fish-fv2 img,
.fish-fv5 img,
.fish-2 img,
.fish-4 img,
.fish-6 img{
  animation-duration: 1.8s;
  
}
.fish-1{
  right: 10%;
  top: 7%;
  transform: rotate(40deg);
}
.fish-5{
  right: 10%;
  top: 5%;
  transform: rotate(40deg);
}
.fish-3{
  left: 2%;
  top: 5%;
  transform: scaleX(-1) rotate(37deg);
}
.fish-4{
  left: 15%;
  top: 13%;
  transform: scaleX(-1) rotate(0deg);
}
.fish-2{
  right: 25%;
  top: 16%;
}
.fish-6{
  right: 25%;
  top: 12%;
}


.fish-fv1{
  width: 30%;
  transform: rotate(20deg);
  left: 38%;
  top: 2%;
}
.fish-fv2{
  width: 30%;
  left: 25%;
  top: 8%;
  
}
.fish-fv3{
  width: 30%;
  left: 49%;
  top: 8%;
}
.fish-fv4{
  transform: rotate(-10deg);
  width: 32%;
  left: 7%;
  top: 90%;
  z-index: 1;
}
.fish-fv5{
  width: 32%;
  left: -9%;
  top: 100%;
  z-index: 2;
  
}
.fish-fv6{
  width: 29%;
  left: 27%;
  top: 100%;
  z-index: 3;
}

.chart{
  display: block;
  aspect-ratio: 700 / 622;
  width: 93.33333333333333%;
  margin-left: auto !important;
  margin-right: 0 !important;
  overflow-x: scroll;
}
.chart {
  /* 既存スタイルはそのままにして、以下を追加 */
  scrollbar-width: thin;
  /* Firefox 用（色は別途対応） */
  scrollbar-color: #0066c2 #f2f2f2;
  /* Firefox 用（バー本体 / トラック背景） */
}

/* WebKit（Chrome, Safari, Edge）用 */
.chart::-webkit-scrollbar {
  height: 8px;
  /* 横スクロールバーの高さ */
}

.chart::-webkit-scrollbar-track {
  background-color: #f2f2f2;
  /* ベース色（トラック） */
}

.chart::-webkit-scrollbar-thumb {
  background-color: #0066c2;
  /* バー本体の色 */
  border-radius: 4px;
}
.chart .chart-inner{
  height: 100%;
  aspect-ratio: 1435 / 622;
  padding-bottom: 5%;
}
.chart img {
  height: 100%;
  width: auto;
}_