@charset "utf-8";

/* パフォーマンス最適化 */
html {
  scroll-behavior: smooth;
  height: auto;
  -webkit-overflow-scrolling: touch; /* iOSのスムーズスクロール */
}

* {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
  list-style: none;
  font-family: 'Noto Sans JP:wght@300', sans-serif;
}

a {
  border: none;
}

/* 背景の最適化 - アニメーションを削除してパフォーマンス向上 */
#back {
  background: linear-gradient(40deg, #9ff3ff, #9ff3ff, #f0faff, #f0faff, #80efff);
  background-color: #fff;
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  will-change: auto; /* GPU加速の最適化 */
}

#back::before {
  content: '';
  background-image: url('webp/back.webp');
  background-size: 80%;
  background-position: center 25%;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

#back::after {
  content: '';
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  width: 550px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* アニメーション定義 - 軽量化 */
@keyframes bounce {
  0%, 20%, 100% { transform: scale(1.0); }
  5% { transform: scale(1.1); }
  10% { transform: scale(1.0); }
  15% { transform: scale(1.05); }
}

#entry .entry {
  position: fixed;
  z-index: 10000;
  bottom: 1%;
  right: 3%;
  width: 30%;
  animation: bounce 20s infinite ease-in-out 5s;
}

#entry .entry_shadow {
  position: fixed;
  z-index: 99;
  bottom: 0%;
  right: 1.5%;
  width: 32%;
  animation: bounce 20s infinite ease-in-out 5s;
}

#mainview {
  animation-name: slideInBottom;
  animation-timing-function: ease-out;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  position: relative;
  z-index: 1;
}

@keyframes slideInBottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.mainview1 {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 1;
}

/* ビデオ要素の最適化 */
.mainview1 video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (hover: none) and (pointer: coarse) {
  #mainview,
  .mainview1,
  .mainview1 video {
    pointer-events: none;
  }
}

.mainview2 {
  top: 0;
  mix-blend-mode: screen;
  position: absolute;
  z-index: 10;
  animation: slideinleft 1s ease-out;
}

@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  80% {
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
  }
}

.award01 {
  width: 70%;
  margin-top: 30%;
}

.award02 {
  width: 40%;
  float: left;
  animation-duration: 0.5s;
  margin: 10% 0% 0% 8%;
}

.award03 {
  width: 40%;
  float: right;
  animation-duration: 1s;
  margin: 10% 7% 0% 1%;
}

/* スクロールアニメーション - 最適化版 */
.fadein {
  visibility: hidden;
  transition: transform 1s ease-out, opacity 1s ease-out;
  transform: translateY(35px);
  will-change: transform, opacity;
}

.fadein_short {
  visibility: hidden;
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  transform: translateY(0px);
  will-change: transform, opacity;
}

.fadein_short01 {
  visibility: hidden;
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  transform: translateY(0px);
  will-change: transform, opacity;
}

.fadein_short02 {
  visibility: hidden;
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  transform: translateY(0px);
  will-change: transform, opacity;
}

.fadeleft {
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform: translateX(-45px);
  will-change: transform, opacity;
}

.active {
  visibility: visible;
  transform: translateY(-150px);
}

.active_short {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50px);
}

.active_short01 {
  transition-duration: 3s;
  opacity: 1;
  visibility: visible;
  transform: translateY(-50px);
}

.move {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.opacity {
  opacity: 0;
  transition: opacity 1s ease-out;
  will-change: opacity;
}

.active_opacity {
  opacity: 1;
}

.move_left {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

#why {
  margin: 12% auto -20%;
}

.point01,
.point02,
.point03,
.point04,
.point05 {
  position: relative;
  z-index: 0;
}

.point02 {
  top: -58px;
}

.point03 {
  top: -80px;
}

.point04 {
  top: -77px;
}

.point05 {
  top: -86px;
}

.p01,
.p02,
.p03,
.p04,
.p05 {
  position: absolute;
  top: 9%;
  z-index: 10;
}

.p02 {
  top: 5%;
}

.p04,
.p05 {
  top: 10%;
}

#campaign_and {
  margin-top: 10%;
}

#campaign02 {
  margin-top: 2%;
}

#content-traial-flow {
  margin-top: 10%;
  padding-bottom: 5%;
  position: relative;
}

#traial-flow0 {
  margin-top: 38%;
  margin-bottom: 0;
  padding-bottom: 0;
}

.traial-box {
  background-color: #ffffff;
  margin: 0;
  padding-bottom: 0;
}

.accordion_img {
  vertical-align: bottom;
  width: 100%;
}

dl {
  margin: 0;
}

.accordionlist dt {
  display: block;
  background: #fff;
}

.accordionlist dt:first-child {
  border-top: none !important;
}

.accordionlist dt .title {
  padding-left: 0px;
}

.accordionlist dd {
  display: none;
  background: #fff;
  margin-top: 0px;
  padding: 0 0 0px 0px;
}

/* 背景グラデーション - アニメーション削除 */
#background {
  background: linear-gradient(100deg, #be8bcf, #809ddc);
  opacity: 90%;
  margin-top: -5%;
  padding-bottom: -5%;
}

#background #qanda {
  padding-top: 30%;
}

#trial_button02 {
  animation: pulse 1.4s ease 0s infinite normal;
  margin: 25% auto;
  width: 85%;
}

#questions {
  width: 80%;
  margin: -10% auto 10%;
}

label {
  display: block;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  margin: 5% auto;
}

input {
  display: none;
}

#questions ul {
  margin: 0;
  padding: 0;
}

#questions li {
  height: 0;
  overflow: hidden;
  display: block;
  margin: 3% auto;
  text-decoration: none;
  color: #fff;
  font-size: 22px;
  line-height: 1.8;
  transition: height 0.3s ease-out;
}

#question01:checked ~ #answer01 li,
#question02:checked ~ #answer02 li,
#question03:checked ~ #answer03 li,
#question03_2:checked ~ #answer03_2 li,
#question04:checked ~ #answer04 li,
#question05:checked ~ #answer05 li,
#question06:checked ~ #answer06 li,
#question07:checked ~ #answer07 li {
  height: 23%;
  opacity: 1;
  width: 95%;
  text-align: justify;
}

#question02:checked ~ #answer02 li {
  height: 29%;
}

#question03:checked ~ #answer03 li {
  height: 26%;
}

#question03_2:checked ~ #answer03_2 li {
  height: 26%;
}

#question04:checked ~ #answer04 li {
  height: 26%;
}

#question05:checked ~ #answer05 li {
  height: 23%;
}

#question06:checked ~ #answer06 li {
  height: 23%;
}

#question07:checked ~ #answer07 li {
  height: 23%;
}

/* 背景グラデーション2 - アニメーション削除 */
.background02 {
  background: linear-gradient(70deg, #f7a2d5, #eab8ac, #f7a2d5);
  opacity: 90%;
  margin-top: -25%;
  padding-bottom: 15%;
}

#voice {
  margin-top: 40%;
}

#voice img {
  margin: 41% auto 0;
}

.slick-box {
  margin-top: -18%;
  width: 90%;
}

#voice_content li {
  margin: 10% auto;
}

.background02 .voice05 {
  margin-top: 20%;
  width: 90%;
}

#instructor {
  margin: 0 auto;
}

#instructor_content {
  margin-top: -550%;
}

#tel {
  margin: 30% auto 0;
}

#tel_content li {
  width: 90%;
  margin: 10% auto;
}

#store {
  height: 2790px;
  margin: 20% auto 0;
}

#store_content {
  width: 90%;
  margin-top: -940%;
}

#store_content div {
  width: 78%;
  margin: -33% auto 20%;
  z-index: 100;
}

#store_content #trial_button03 {
  animation: pulse 1.4s ease 0s infinite normal;
  width: 100%;
  margin: 50% auto 0;
}

.trial_button-lp_campaign1 {
    animation: pulse 1.4s ease 0s infinite normal;
    width: 73%;
    z-index: 10;
    position: absolute;
    top: 30%;
    left: 14%;
    }

.trial_button-lp_campaign2_1 {
  animation: pulse 1.4s ease 0s infinite normal;
  width: 73%;
  z-index: 10;
  position: absolute;
  top: 14%;
    left: 14%;
}

.trial_button-lp_campaign2_2 {
  animation: pulse 1.4s ease 0s infinite normal;
  width: 90%;
  z-index: 10;
  position: absolute;
  top: 87%;
  left: 5%;
}

.trial_button-lp_campaign2_3 {
  animation: pulse 1.4s ease 0s infinite normal;
  width: 90%;
  z-index: 10;
  position: absolute;
  top: 91%;
  left: 5%;
}

#trial-price {
  margin-top: 30px;
}

.yt_short_section {
  width: 80%;
  display: block;
}

.yt_short {
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 16px auto 48px;
}

.yt_short iframe {
  width: 100%;
  height: 100%;
}

#footer {
  position: relative;
  z-index: 1;
  margin-top: 45%;
}

#footer img {
  margin-bottom: -10px;
}

#top {
  width: 30%;
  margin-top: -104%;
}

#logo {
  margin-top: 11%;
  width: 70%;
}

.content {
}

.content-campaign-lp_campaign2 {
  margin-bottom: -50%;
  padding-bottom: 0;
  position: relative;
}

.content-campaign-lp_campaign2 img {
  display: block;
  height: auto;
  vertical-align: bottom;
}

.content-campaign {
/* margin-bottom: 10%;*/
  padding-bottom: 0;
  position: relative;
}

.content-campaign img {
  display: block;
  height: auto;
  vertical-align: bottom;
}

/* 追従バナー */
.bottom-floting-bnr {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    display: none; /* 初期非表示（JavaScriptで制御） */
    margin: 0;
    padding: 0;
}

.bottom-floting-bnr a {
    display: block;
    width: 100%;
}

.bottom-floting-bnr img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom;
}

/* PC・タブレット表示時は幅を制限して中央寄せ */
@media screen and (min-width: 561px) {
    .bottom-floting-bnr {
        max-width: 300px;
        padding:12px ;
    }
}

/* スマホでは画面幅いっぱいに表示 */
@media screen and (max-width: 560px) {
    .bottom-floting-bnr {
        width: 100vw;
        left: 0;
    }
}

/* メディアクエリ */
@media screen and (min-width: 320px) {
  .point03 {
    top: -70px;
  }
  #questions a {
    font-size: 1.3rem;
    line-height: 2.5rem;
  }
  #footer {
    margin-top: 180%;
  }
}

@media screen and (min-width: 360px) {
  .p03 {
    top: 8%;
  }
  .p04,
  .p05 {
    top: 9%;
  }
  .award {
    margin-top: -5%;
  }
  .campaign {
    margin-top: -12%;
  }
  .campaign2 {
    margin-top: -12%;
    padding-bottom: 45%;
    background-color: #ffffff;
  }
  .campaign2_2 {
    margin-top: 15%;
    z-index: -1;
  }
  .campaign-top_bottom {
    margin-top: -1%;
  }
  #background {
    margin-top: 0;
  }
  #trial_button02 {
    margin: 25% auto 25%;
  }
  #trial_content #trial06 {
    margin: 10% auto 0;
  }
  #store_content #trial_button03 {
    margin-top: 50%;
  }
  #questions a {
    font-size: 1rem;
    line-height: 2rem;
  }
  #voice img {
    margin-top: 30%;
  }
  .slick-box {
    margin-top: -10%;
  }
  #footer {
    margin-top: 350%;
  }
  #tel {
    margin-top: 30%;
  }
  #why {
    margin-top: 10%;
  }
}

@media screen and (min-width: 450px) {
  .award {
    margin-top: -8%;
  }
  .award02,
  .award03 {
    margin-top: 5%;
  }
  #questions a {
    font-size: 1.3rem;
    line-height: 2.5rem;
  }
  #trial_content {
    margin-top: -685%;
  }
  #footer {
    margin-top: 430%;
  }
  #questions {
    margin-top: -2%;
  }
  #background {
    padding-bottom: 1%;
  }
  #trial_button02 {
    margin: 25% auto 15%;
  }
  .background02 {
    margin-top: 0;
  }
  #why {
    margin-top: 8%;
  }
  .about {
    margin-top: 20%;
  }
}

@media screen and (min-width: 500px) {
  #store_content #trial_button03 {
    margin-top: 50%;
  }
  #footer {
    margin-top: 500%;
  }
  #background {
    margin-top: 10%;
  }
}

@media screen and (min-width: 551px) {
  #wrapper {
    padding-bottom: 290px;
    width: 550px;
  }
}