@charset "utf-8";

html {scroll-behavior:smooth;}
*{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(90deg, #4de580,#0d8c9d,#293450);
  animation: gradient 60s ease infinite;
  background-size: 150% 150%;
  background-color: #fff;
  position: fixed;
  right:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-5;}
#back_logo{
  width: 80%;
  position: fixed;
  right: 0;
  left: 0;
  top: 25%;
  opacity:0.05;
  mix-blend-mode: multiply;
  z-index:-1;}
#back_white{
  background-color: rgba(255,255,255,0.5);
  height: 100%;
  position: fixed;
  width: 550px;
  right: 0;
  left: 0;
  z-index: -5;}
@-webkit-keyframes bounce {
  0% { -webkit-transform: scale(1.0) }
  5% { -webkit-transform: scale(1.1) }
  10% { -webkit-transform: scale(1.0) }
  15% { -webkit-transform: scale(1.05) }
  20% { -webkit-transform: scale(1.0) }
  100% { -webkit-transform: scale(1.0) }}
@keyframes bounce {
  0% {transform: scale(1.0) }
  5% {transform: scale(1.1) }
  10% {transform: scale(1.0) }
  15% {transform: scale(1.05) }
  20% {transform: scale(1.0) }
  100% {transform: scale(1.0) }}
@keyframes gradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  70% {background-position: 100% 40%;}
  100% {background-position: 0% 50%;}}
#entry .entry {
  position: fixed;
  z-index: 10000;
  bottom:1%;
  right: 3%;
  width: 30%;
  -webkit-animation: bounce 20s infinite ease-in-out 5s;
  animation: bounce 20s infinite ease-in-out 5s;}
#entry .entry_shadow {
  position: fixed;
  z-index: 99;
  bottom: 0%;
  right: 1.5%;
  width: 32%;
  -webkit-animation: bounce 20s infinite ease-in-out 5s;
  animation: bounce 20s infinite ease-in-out 5s;}
#mainview {
  animation-name: slideInBottom;
  animation-timing-function: ease-out;
  animation-direction: alternate;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  position: relative;
  height: 100vh;      /* フォールバック */
  height: 100dvh;     /* 対応ブラウザではアドレスバーを除いた実画面高さ */
  overflow: hidden;
}

.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;
}



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

@keyframes opacity {
  0%{
  opacity: 0;
  transform: translateY(30px);}
  100%{
  opacity: 100%;
  transform: translateY(0);}}

.fadein{
  visibility: hidden;
  transition: 2.5s;
  transform: translateY(35px);}
.fadein_short{
  visibility: hidden;
  opacity: 0;
  transition: 1s;
  transform: translateY(0px);}
.fadein_short01{
  visibility: hidden;
  opacity: 0;
  transition: 1s;
  transform: translateY(0px);}
.fadein_short02{
  visibility: hidden;
  opacity: 0;
  transition: 1s;
  transform: translateY(0px);}
.fadeleft{
  opacity: 0;
  visibility: hidden;
  animation-delay: 0.5s;
  transition: 0.5s ease;
  transform: translateX(-45px);}

.active{
  visibility: visible;
  transform: translateY(-150px);}
.active_short{
  opacity: 1;
  margin: 15% 0 0;
  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: 2s ease;}
.active_opacity {
  opacity: 1;}

.fadeleft {
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
  animation-delay: 0.5s;
  transform: translateX(-45px);}
.move_left {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);}

.about {
  margin:0 auto 0;}
.about_text01 {
  margin:-145% auto 0;}
.about_text02 {
  margin:39% auto 0;}

#reason_content {
  margin: -20% 0 0;
  position: relative;
  z-index: 100;}
#why {
  margin:21% auto -20%;}
.point01,.point02,.point03,.point04,.point05{
  position:relative;
  z-index: 1;
  z-index:0;}
.point01_photo,.point02_photo,.point03_photo,.point04_photo,.point05_photo {
  margin:-2% auto 0;}
.point02{
  top:-58px;}
.point03{
  top:-80px;}
.point04{
  top:-90px;}
.point05{
  top:-100px;}
.p01,.p02,.p03,.p04,.p05{
  position:absolute;
  top:9%;
  z-index:10;}
.p02{
  top:5%;}
.p03{
  top:7%;}
.p04{
  top:8%;}

#campaign_and{
  margin-top:10%;}

#campaign02{
  margin-top:2%;}

.campaign02 {
  margin: -19% 0 0;}

.shinsaibashi_campaign {
  width:80%;
  margin:-927% auto 907%;}


#content-traial-flow{
  margin-top:35%;
  margin-bottom:0;
  padding-top:30px;
  padding-bottom: 0;
  position: relative;}
.content-campaign-lp_campaign2 {
  margin-top:-34%;}
.trial_button-lp_campaign3_3 {
  -webkit-animation: pulse 1.4s ease 0s infinite normal;
  animation: pulse 1.4s ease 0s infinite normal;
  width: 77.333333%;
  z-index: 10;
  position: absolute;
  top:91.5%;
  left: 5%;
}

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

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

/*体験フローアコーディオンcss*/
.accordion_img {
	vertical-align: bottom;
	width: 100%;
}

.accordionbox{
  margin-top:0;
  padding-top: 0;
}

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;
}
/*アコーディオンcss*/

#background {
  background:#d7d7d7;
  opacity:1;
  margin-top:-47%;
  padding: 1% 0 15%;}
#background #qanda {
  padding-top:15%;}
#trial_button02 {
  -webkit-animation: pulse 1.4s ease 0s infinite normal;
  animation: pulse 1.4s ease 0s infinite normal;
  margin:25% auto;
  width:77.333333%;}

#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: #393939;
  font-weight:normal;
  font-size: 14px;
  line-height: 1.8;}
#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%;}

.background02 {
  background: linear-gradient(210deg, #8080c3,#8080c3, #61bed2, #61bed2);
  animation: gradient 5s ease infinite;
  background-size:200% 200%;
  opacity: 90%;
  margin-top:-40%;
  padding-bottom:15%;}

#voice {
    margin-top:40%;}

#voice img {
  margin:37% auto 15%;}

.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:-560%;}
#instructor_content li {
  margin: 13% 0;}

#tel {
  background-color: #fff;
padding:45% 0;}
#tel_content li {
  width: 90%;
  margin:7% auto;}
#tel_content #tel01 {
  margin:7% auto 13%;}

#store {
  height: 2990px;
  margin:-1% auto 0;}
#store_content {
  width: 90%;
  margin-top:-1250%;}

#store_content li {
  margin:5% auto 30%;}

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

.trial_button-lp_campaign1 {
  -webkit-animation: pulse 1.4s ease 0s infinite normal;
  animation: pulse 1.4s ease 0s infinite normal;
  width: 77.333333%;
  z-index: 20;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -185%;
}

.trial_button-lp_campaign2_1 {
  -webkit-animation: pulse 1.4s ease 0s infinite normal;
  animation: pulse 1.4s ease 0s infinite normal;
  width: 77.333333%;
  z-index: 20;
  position: absolute;
  left: 0;
  right: 0;
  margin-top:-45%;
}

.trial_button-lp_campaign2_2 {
  -webkit-animation: pulse 1.4s ease 0s infinite normal;
  animation: pulse 1.4s ease 0s infinite normal;
  width: 77.333333%;
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  margin-top:-185%;
}
.trial_button-lp_campaign3_3 {
  -webkit-animation: pulse 1.4s ease 0s infinite normal;
  animation: pulse 1.4s ease 0s infinite normal;
  width: 77.333333%;
  z-index: 10;
  position: absolute;
  margin: 15% auto 0;
  left: 0;
  right: 0;
}

#store_content #trial_button03 {
  -webkit-animation: pulse 1.4s ease 0s infinite normal;
  animation: pulse 1.4s ease 0s infinite normal;
  width: 77.333333%;
  margin:60% auto 0;}

#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:120%;}
#footer img {
  margin-bottom:-10px;}
#top {
  width:30%;
  margin-top:-130%;}
.fotter_logo {
  width: 60%;
  margin: 32% auto 0;}
#logo {
  margin-top:11%;
  width:70%;}

.floating-banner {
  display: flex;
}

.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;
  margin-top: 0;
  padding-top: 0;
  position: relative;  /* absolute → relative に変更 */
  /* top: 0; 削除 */
  /* left: 0; 削除 */
  width: 100%;
  z-index: 2;
}

.content-campaign img {
  display: block;
  height: auto; /* 画像の高さを自動調整 */
  vertical-align: bottom; /* 画像の垂直揃えを下端に設定 */
}

/*ページ下部の追従バナー*/
.floating-banner {
  position: fixed; /* バナーを追従させる */
  z-index: 99999; /* 他の要素の下に隠れないように */
  bottom: 0; /* バナーの上下の位置 */
  right: 0; /* バナーの左右の位置 */
  width: 300px; /* バナーの横幅 */
}
.floating-banner_image {
  max-width: 100%; /* 画像の最大幅 */
}

@media screen and (min-width: 330px) {
  .content-campaign {
    margin:-2% auto 0;}
  .about_text01 {
    margin:-150% auto 0;}
  #why{
    margin-top:30%;}
  }
@media screen and (min-width: 360px) {
  .content-campaign {
    margin: 12% auto 0;}
  .p03{
  top:8%;}
  .p04,.p05{
  top:9%;}
  .award{
    margin-top:-5%;}
  .campaign{
    margin-top:15%;}

  .campaign2{
    margin-top:15%;}

.campaign2_2{
    margin-top:15%;
	 z-index: -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%;}

 .campaign{
  margin-top:-12%;}

 .campaign2{
margin-top: -12%;
    padding-bottom: 45%;
    background-color: #ffffff;
	}
.content-campaign-lp_campaign2 {
  margin-top: -16%;}
.shinsaibashi_campaign  {
  margin:-927% auto 860%;}
.trial_button-lp_campaign3_3 {
  top:95.5%;}

 .campaign-top_bottom{
  margin-top:-10px;}

  #questions a {
    font-size:1rem;
    line-height:2rem;}
  .slick-box{
    margin-top:-10%;}
}
@media screen and (min-width:390px) {
  .content-campaign {
    margin: 0 auto 0;}
}
@media screen and (min-width:410px) {
  #voice img {
    margin:30% auto 10%;
  }
  .campaign-top_bottom {
    margin-top: -1%;}
  .about {
    margin: -20% auto 0;}
}
@media screen and (min-width:430px) {
  .content-campaign {
    margin-top: 0;}
}
@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%;}
}
@media screen and (min-width:500px) {
  #why {
    margin-top:27%;
  }
  .campaign-top_bottom {
    margin-top:-2%;}
  #background {
    margin-top:0;}
  #questions li {
    font-size:16px;}
}
@media screen and (min-width: 551px) {
  #back_logo{
    width:400px;}
  #wrapper{
    padding-bottom:290px;
    width:550px;}
}
@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
  .floating-banner {
    display:flex;/* 消していたバナーを表示させる */
    width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    margin: 0;
  }
}
@media screen and (min-width: 561px) {
    #background #qanda {
    padding-top:15%;
  }
  .floating-banner {
    width: 50%;
    margin:0 0 -10px;
    position: fixed;
    z-index: 99999;
  }
  #questions li {
    font-size:18px;
  }
}
@media screen and (min-width:1025px) {
  .campaign {
    margin-top:5%;
  }
  #questions li {
    font-weight:bold;
  }
  .floating-banner {
    width:400px;}
}

.bottom-floting-bnr {
	margin: 0;
	padding: 0;
}