@charset "utf-8";
/* CSS Document */
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/*-----------------------------------------------------------------------------
	PC
-----------------------------------------------------------------------------*/
/*-------------------------------
ローディング
-------------------------------*/
.openbtn1.active .header_btn{
    display: none;
}
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999999999999999;
  background:#3B3838;
  text-align:center;
  color:#fff;
  top: 0;
    left: 0;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:420px;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.header_btn{
    width: 200px;
    position: absolute;
    top: 5px;
    right: 70px;
}


.openbtn1.active .header_btn{
    display: none;
}


.header_btn_active{
    width:237px;
    position: absolute;
    top: 20px;
    right: 75px;
    display: none;
}
.close_btn{
    position: relative;
}
.open_btn{
    position: absolute;
    top:0;
    left:0;
    display: none;
}

.header_btn:hover .open_btn{
    display: block;
    pointer-events: none;
}

.openbtn1.active .header_btn_active{
    display: block;
}

.btn_wrap{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 750px;
    height: 60px;
    background-color: #3B3838;
    text-align: center;
    display: none;
    margin: 0 auto;
    z-index: 99;
}

.btn_wrap.bisible{
    display: block;
  }
/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 98;
    /*ナビのスタート位置と形状*/
    top: -100vh;
    height: 100vh;/*ナビの高さ*/
    background:#fff;
    /*動き*/
    transition: all 0.6s;
    width: 750px;
    left: 50%;
    transform: translateX(-50%);

}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
    width: 750px;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100vh - 60px);
    margin-top: 60px;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100%;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;

}


/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:0;
    left:50%;
    transform: translateX(-50%);
    margin-top:0;
    display: none;
}
#g-nav.panelactive ul{
    display: block;
    padding-top: 80px;
}

/*リストのレイアウト設定*/
#g-nav.panelactive #g-nav-list {
    height: 100%;   
}
#g-nav li{
  list-style: none;
    text-align: center; 
    width:670px;
    height: 120px;
    background-color:rgba(138,95,206,.15);
    margin-bottom:30px;
}


#g-nav li:last-child{
      margin-bottom: 236px;
  }
  
#g-nav li a{
  color: #8a5fce;
  text-decoration: none;
  font-size: 3.4rem;
  display: block;
  letter-spacing: 0.1em;
  font-weight: bold;
  width: 100%;
  height: 100%;
  line-height: 120px;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-color: #3B3838;
}

.openbtn1:hover{
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-color: #3B3838;
}

.openbtn1.active{
    background-color:#3B3838;
}

/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 50%;
    height: 2px;
    background-color: #fff;
    width: 35px;
    top: 50%;
    transform: translateX(-50%);
  }

.openbtn1 span:nth-of-type(1) {
  top:17px; 
}

.openbtn1 span:nth-of-type(2) {
  top:40px;
}

.openbtn1 span:nth-of-type(3) {
  top:28.5px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 25px;
    left: 10px;
    transform: translateY(3px) rotate(-45deg);
    width: 40px;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 31px;
    left: 10.5px;
    transform: translateY(-3px) rotate(45deg);
    width: 40px;
}


.fv{
    width: 100%;
}


.fv img{
    width: 100%;
    height:100%;
}
/*-----------------------------
@media screen and (max-width:374px){
.fv{
    width: 100%;
	height: 100vh;
}
}
-----------------------------*/


/*-----------------------------
体験申込ボタン
-----------------------------*/


/*========= モーダル表示のためのCSS ===============*/

/*infoエリアをはじめは非表示*/
#info{
    display: none;
}
#info2{
    display: none;
}
  /*モーダルの横幅を変更したい場合*/
  .modaal-container{
      width:100%;
  }
  
  /*モーダルのボタンの色を変更したい場合*/
  .modaal-close:after, 
  .modaal-close:before{
    background:#ccc;  
  }
  
  .modaal-close:focus:after,
  .modaal-close:focus:before,
  .modaal-close:hover:after,
  .modaal-close:hover:before{
    background:#666;
  }
  .modaal-inner-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}
.modaal-wrapper [tabindex="0"] {
    height: 100vh;
}
.modaal-content-container {
    padding: 0;
}
.modaal-content-container ul {
    padding: 50px 0 ;
    background-color: #fff;
}
  .modaal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .modaal-content-container ul li{
    width: 78.66vw;
    height:16.2vw;
    background-color:rgba(138,95,206,.15);
    margin: 0 auto 4vw;
  }
  .modaal-content-container ul li a{
    text-align: center;
    line-height:16.2vw;
    font-size: 4.53vw;
    color:#8a5fce;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: block;
}
/*-----------------------------
体験申込ボタン
-----------------------------*/


/*========= モーダル表示のためのCSS ===============*/

/*infoエリアをはじめは非表示*/
#info{
    display: none;
}
#info2{
    display: none;
}
  /*モーダルの横幅を変更したい場合*/
  .modaal-container{
      width:750px;
  }
  
  /*モーダルのボタンの色を変更したい場合*/
  .modaal-close:after, 
  .modaal-close:before{
    background:#ccc;  
  }
  
  .modaal-close:focus:after,
  .modaal-close:focus:before,
  .modaal-close:hover:after,
  .modaal-close:hover:before{
    background:#666;
  }

  .modaal-inner-wrapper {
  padding: 0;
}
.modaal-wrapper [tabindex="0"] {
    height: 100vh;
}
.modaal-content-container {
    padding: 0;
}
.modaal-content-container ul {
    padding: 110px 0 100px;
    background-color: #fff;
}
  .modaal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .modaal-content-container ul li{
    width: 590px;
    height:122px;
    background-color:rgba(138,95,206,.15);
    margin: 0 auto 30px;
  }
  .modaal-content-container ul li a{
    text-align: center;
    line-height:122px;
    font-size: 3.4rem;
    color:#8a5fce;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: block;
}

.select_store {
    padding: 110px 0 0;
    font-size: 3.8rem;
    text-align: center;
    font-weight: bold;
}
/*-----------------------------
sec1
-----------------------------*/
.sec1_bg{
    background-image: url(../images/sec1/sec1_bg.webp);
    background-repeat: no-repeat;
    padding: 53.6px 0 50px;
    background-size: cover;
    background-position: center;
}

.trial_icon li{
    width:200px;
    margin-right: 15px;
}

.trial_icon li:nth-child(3){
    margin-right: 0;
}

.trial_icon li:nth-child(5){
    margin-right: 0;
    margin-top: 15px;
}

.trial_icon li:nth-child(4){
    margin-top: 15px;
}


.movie{
    margin: 62px auto;
}


.sec1 .hero{
    position: relative;
    width: 93.3%;
    padding: 61px 0;
    margin: 0 auto;
}

.sec1 .hero video {
      width:100%;
      height:auto;
      object-fit:cover;
}
  
  
/*-----------------------------
無料体験
-----------------------------*/
.free_trial{
    background-color:#eaeaea;
    padding: 0 0 111.7px;
}

.trial_ttl{
    margin-bottom: 61px;
}
.trial_content{
    background-color: #fff;
    padding: 62.8px 0;
}

.campaign{
    width: 472px;
    margin: 0 auto;
}

.free{
    width: 475px;
    margin: 0 auto 52px;

}


.trial_baner li{
    position: relative;
    width: 590px;
    height:119.4565px;
    margin: 0 auto 23px;
    display: block;
    cursor: pointer;
}

.trial_baner li img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}

.trial_baner li:hover img:nth-of-type(2) {
	opacity: 0;
}


.trial_baner li:last-child{
    margin-bottom: 46.7px;
}

.store{
    width: 572px;
    margin: 0 auto;
}

/*-----------------------------
sec2
-----------------------------*/
.sec2{
    background:linear-gradient(to bottom, #ffe39d, #ff9fa6, #fe82c1);
    padding-bottom: 40px;
}

.sec2_ttl{
    position: relative;
    top: -71px;
    left: 0px;
    width: 697px;
}   

.sec2_inner_ttl{
    width: 577px;
    margin: -50px auto 79px;
}

/*スライダー*/
.slider01 img {
    width: 560px;
    margin: 0 auto;
  }

.sec2 .slick-prev{
    left: 49px;
    width: 80px;
    z-index: 10;
    height: 80px;
    background-color: #fff;
    border-radius: 50%;
}


.sec2 .slick-prev:before {
    content: '';
    opacity: 1;
    background-image: url(../images/purple_left.webp);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 35px;
    letter-spacing: 5px;
    position: absolute;
    top: 50%;
    left: 44%;
    transform: translate(-50% , -50%);

}

.sec2 .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    background: #fff;
}


.sec2 .slick-next{
    right: 49px;
    width: 80px;
    z-index: 10;
    height: 80px;
    background-color: #fff;
    border-radius: 50%;
}


.sec2 .slick-next:before {
    content: '';
    /* color: #8a5fce; */
    opacity: 1;
    background-image: url(../images/purple_right.webp);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 35px;
    letter-spacing: 5px;
    position: absolute;
    top: 50%;
    right: 44%;
    transform: translate(50% , -50%);
}


/*-----------------------------
sec4
-----------------------------*/

.sec4{
    background-image: url(../images/sec4/sec4_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 200px 0 104px;
    margin-top: -135px;
}

.sec4_right_img{
    padding:77px 0 90px;
    width:395px;
    margin:0 0 0 auto;
}

.sec4_list li{
    margin-right: -25px;
}

.sec4_list li:last-child{
    margin-right: 0;
}

.sec4_txt{
    background-color: #fff;
    padding: 45px 36px;
    margin-top: 45px;

}

.sec4_txt p{
    color:#333333;
    font-size: 2.8rem;
    line-height: 1.85;
}
.sec4_txt .purple{
    font-weight: bold;
}
.purple{
    color: #EA6DA4;
}

/*-----------------------------
sec5
-----------------------------*/

.sec5{
    background-image: url(../images/sec5/sec5_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 81px 0 116px;
}

.sec5_ttl{
    width: 509px;
    margin: 0 auto;
}

.sec5_txt{
    background-color: #fff;
    padding: 47px 39px;
}

.sec5_txt p{
    color:#333333;
    font-size: 2.8rem;
    line-height: 1.85;
}


/*-----------------------------
sec6
-----------------------------*/

.sec6{
    background-color:#cbedfd;
    padding: 104px 0 37.5px;
    margin-top: -42px;
    z-index: -1;
    position: relative;
}

.movie{
    margin: 62px auto;
}


.sec6 .hero{
    position: relative;
    width: 93.3%;
    padding: 0;
    margin: 0 auto;
}

.sec6 .hero video {
      width:100%;
      height:auto;
      object-fit:cover;
}
/*-----------------------------
sec7
-----------------------------*/
.sec7{
    background-color: #fff9b9;
    padding: 57px 0 81px;
}

.sec7_img{
    width: 508px;
    padding: 0 auto 43px;
    margin: 0 auto;
}

.sec7_top_wrap{
    background-image: url(../images/sec7/sec7_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 0 47px;
}

.sec7_ttl{
    padding-top: 60px;
}


.ttl_txt{
    font-size: 3.1rem;
    line-height: 1;
    color: #F78B85;
    text-align: center;
    font-weight: bold ;
}

.list_txt{
    font-size:2.8rem;
    line-height: 2;
    margin-top: -20px;
}

.point_list_li{
    padding: 45px;
    background-color:#fff;
    border-radius: 20px;
}

.point_list li{
    margin-bottom:43px;
}

.point_list li:last-child{
    margin-bottom: 0;
}

.list_ttl_wrap{
    width: 585px;
    margin: 0 auto 0 -6px;
}

.no1_wrap{
    margin-top:45px;
}
.no1_wrap li{
    width: calc(50% - 11px);
}

.no1_wrap li:nth-child(1){
   margin-bottom: 45px;
}

.no1_wrap li:nth-child(2){
    margin-bottom: 45px;
}


.no1_wrap li:nth-child(even){
    margin-left:22px;
}

.ttl_small_txt{
    font-size:2.4rem;
    text-align: center;
    margin: 14px auto;
}

.list_img{
    margin-top: 37px;
}

/*-----------------------------
sec8
-----------------------------*/
.sec8{
    background-color: #fcdcdc;
    padding: 0px 0 0;
}

.gene_ttl{
    background-color: #fff;
    padding: 50px 0 25px;
    position: relative;
}


.gene_ttl img {
    width: 597px;
    margin:0 auto;
    display: block;
}

.gene_ttl::after{
    position: absolute;
    content: '';
    background-image:url(../images/sec8/sec8_arrow.webp);
    width: 53px;
    height: 114px;
    right: 36px;
    bottom: -42px;
    background-repeat: no-repeat;
    background-size: cover;
}

/*-----------------------------
sec9
-----------------------------*/
.sec9{
    background-color:#f7f4d1;
    padding: 75px 0 80px;
}

.sec9_ttl_img{
    width: 648px;
    margin: 0 auto;
}

.sec9_img{
    margin: -23px auto 0;
    width: 719px;
}


/*-----------------------------
sec10
-----------------------------*/

.sec10{
    background: linear-gradient(to bottom, #c08cf4, #e8b7f2, #fac4ef);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 78px 0 60px
}


.sec10_list li{
    margin-bottom: 63px;
}

.sec10_ttl{
    width: 692px;
    margin-left: 40px;
    margin-bottom: 74px;
}

/*-----------------------------
sec11
-----------------------------*/
.sec11{
    background-image: url(../images/sec11/sec11_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 175px 0 68px

}

.sec11_ttl_right1{
    margin: 45px 0 0 auto;
    width: 661px;
}

.sec11_ttl_left{
    margin: 114px auto 0 0;
    width: 705px;
}

.sec11_ttl_right2{
    margin: 104px 0 0 auto;
    width: 686px;
}



/*スライダー*/
.slider02 img {
    width: 589px;
    margin: 0 auto;
  }



.sec11 .slick-prev{
    left: 49px;
    width: 80px;
    z-index: 10;
    height: 80px;
    background-color: #3B3838;
    border-radius: 50%;
}




.sec11 .slick-prev:before {
    content: '';
    opacity: 1;
    background-image: url(../images/white_left.webp);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 35px;
    letter-spacing: 5px;
    position: absolute;
    top: 50%;
    left: 44%;
    transform: translate(-50% , -50%);

}

.sec11 .slick-prev:hover, .sec11 .slick-prev:focus, .sec11 .slick-next:hover, .sec11 .slick-next:focus {
    background: #F78B85;
}


.sec11 .slick-next{
    right: 49px;
    width: 80px;
    z-index: 10;
    height: 80px;
    background-color: #3B3838;
    border-radius: 50%;
}


.sec11 .slick-next:before {
    content: '';
    opacity: 1;
    background-image: url(../images/white_right.webp);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 35px;
    letter-spacing: 5px;
    position: absolute;
    top: 50%;
    right: 44%;
    transform: translate(50% , -50%);
}

.content {
    width: 371px;
    margin-right: 45px;
    }

.slideshow {
    display: flex;
    }

.slide_wrap {
    display: flex;
    align-items: center;
    height: 375px;
    overflow: hidden;
}

.slideshow {
    display: flex;
    animation: loop-slide 30s infinite linear 1s both;
}
@keyframes loop-slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.protein_img{
    width:719px;
    margin:0 auto;
}

/*-----------------------------
sec12
-----------------------------*/
.sec12{
    background: linear-gradient(to bottom, #c08cf4, #e8b7f2, #fac4ef);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 76px 0 ;
}

.sec2_bg_white{
    background-color: #fff;
    border-radius: 50px;
    padding: 61px 40px 50px;
}
.rental_list_1 li{
    width: 140px;
    margin-right: 9px;
}

.rental_list_1{
    margin: 60px auto 0;
}

.rental_list_2{
    margin: 0 auto 51px;
}

.rental_list_2 li{
    width: 140px;
    margin-right: 9px;
}


.rental_list_1 li:nth-child(3){
    margin-right: 0;
}


.rental_list_2 li:nth-child(4){
    margin-right: 0;
}

/*-----------------------------
sec13
-----------------------------*/
.sec13{
    background:rgba(226,111,210,.15);
    padding: 35px 0 38px;
}

.sec13_ttl{
    width: 694px;
    margin: 0 auto 15px;
}

.voice_list li:first-child{
    margin-bottom: 75px;
}

/*-----------------------------
sec14
-----------------------------*/
.sec14{
    background:rgba(138,95,206,.15);
    padding: 101px 0 72px;
}

.cov{
    font-size: 3.4rem;
    line-height: 1.8;
    margin: 45px auto 50px;
}

.txt_bg{
    background-color: #fff;
}


/*スライダー*/
.slider03 img {
    width: 560px;
    margin: 0 auto;
  }

.sec14 .slick-prev{
    left: 49px;
    width: 80px;
    z-index: 10;
    height: 80px;
    background-color: #3B3838;
    border-radius: 50%;
}




.sec14 .slick-prev:before {
    content: '';
    opacity: 1;
    background-image: url(../images/white_left.webp);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 35px;
    letter-spacing: 5px;
    position: absolute;
    top: 50%;
    left: 44%;
    transform: translate(-50% , -50%);

}

.sec14 .slick-prev:hover, .sec14.slick-prev:focus, .sec14 .slick-next:hover, .sec14 .slick-next:focus {
    background: #3B3838;
}


.sec14 .slick-next{
    right: 49px;
    width: 80px;
    z-index: 10;
    height: 80px;
    background-color: #3B3838;
    border-radius: 50%;
}


.sec14 .slick-next:before {
    content: '';
    opacity: 1;
    background-image: url(../images/white_right.webp);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 35px;
    letter-spacing: 5px;
    position: absolute;
    top: 50%;
    right: 44%;
    transform: translate(50% , -50%);

}

.cov_txt{
    font-size:2.4rem;
    line-height: 2;
    background-color: #fff;
    padding: 48px 45px;
}


/*-----------------------------
sec15
-----------------------------*/
.sec15{
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #E5E5E5;
    padding: 64px 0 135px;
}

.sec15_ttl{
    width: 392px;
    margin:0 auto 33px;
}

.qa_list li{
    margin-bottom: 35px;
    background-color: #fff;
    padding:60px 45px 41px;
    border: 1.93px solid #3A3838;
    border-radius:20px;
}

.question{
    margin-bottom: 50px;
    color:#3B3838;
    font-size:4rem;
    font-weight:bold;
}

.answer{
    margin-bottom: 0;
    font-size:2.8rem;
    line-height: 1.85;
}

.answer a{
   text-decoration: underline;
}


.qa_list li:last-child{
    margin-bottom: 0;
}


/*-----------------------------
footer
-----------------------------*/
.footer{
    background-color:#3B3838;
    padding:55px 0 24px;
}

.footer_logo{
    width: 420px;
    margin: 0 auto;
}

.hp{
    margin:55px auto 76px;
    font-size:2.8rem;
    text-align: center;
    color: #fff;
}


.hp a{
    text-decoration: underline;
    color: #fff;
}

.copy{
    font-size:2.4rem;
    color:#fff;
    text-align: center;

}

/*-----------------------------------------------------------------------------
	SP
-----------------------------------------------------------------------------*/
@media screen and (max-width:749px){
/*-------------------------------
ローディング
-------------------------------*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999999999999999;;
  background:#8a5fce;
  text-align:center;
  color:#fff;
  top: 0;
    left: 0;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 56vw;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.header_btn_active{
    width:31.6vw;
    position: absolute;
    top: 2.66vw;
    right: 10vw;
    display: none;
}

.close_btn{
    position: relative;
}

.open_btn{
    position: absolute;
    top:0;
    left:0;
    display: none;
}

.header_btn:hover .open_btn{
    display: none;
}

.openbtn1.active .header_btn_active{
    display: block;
}

.btn_wrap{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 750px;
    height: 60px;
    background-color: rgb(255,255,255);
    text-align: center;
    display: none;
    margin: 0 auto;
    z-index: 99;
}


.btn_wrap{
    width: 100%;
    height: 60px;
    z-index: 99;
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 98;
    /*ナビのスタート位置と形状*/
    top:-100vh;
    height: 65vh;/*ナビの高さ*/
    background:#fff;
    /*動き*/
    transition: all 0.6s;
    width: 100%;
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);

}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    width: 100%;
    height: calc(100vh - 60px);
    margin-top: 60px;
}

#g-nav.panelactive #g-nav-list {
    height: 100%;
}
/*ナビゲーション*/
#g-nav ul {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    width: fit-content;
    height: fit-content;
}

/*リストのレイアウト設定*/

#g-nav li{
    width:89vw;
    height: 16vw;
    margin-bottom:4vw;
}


#g-nav li:last-child{
    margin-bottom: 31vw;
}
  
#g-nav li a{

  font-size: 4.5vw;
  line-height: 16vw;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
    width: 60px;
    height: 60px;
}


/*×に変化*/  
.openbtn1 span{
    left: 50%;
    height: 2px;
    background-color: #fff;
    width: 35px;
    top: 50%;
    transform: translateX(-50%);
  }

.openbtn1 span:nth-of-type(1) {
  top:17px; 
}

.openbtn1 span:nth-of-type(2) {
  top:40px;
}

.openbtn1 span:nth-of-type(3) {
  top:28.5px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 25px;
    left: 10px;
    transform: translateY(3px) rotate(-45deg);
    width: 40px;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 31px;
    left: 10.5px;
    transform: translateY(-3px) rotate(45deg);
    width: 40px;
}

/*-----------------------------
体験申込ボタン
-----------------------------*/
/*========= モーダル表示のためのCSS ===============*/

/*infoエリアをはじめは非表示*/
#info{
    display: none;
}
#info2{
    display: none;
}
  /*モーダルの横幅を変更したい場合*/
  .modaal-container{
      width:100%;
      height: 100%;
  }
  
  /*モーダルのボタンの色を変更したい場合*/
  .modaal-close:after, 
  .modaal-close:before{
    background:#ccc;  
  }
  
  .modaal-close:focus:after,
  .modaal-close:focus:before,
  .modaal-close:hover:after,
  .modaal-close:hover:before{
    background:#666;
  }
  .modaal-inner-wrapper {

    height:100%;
    padding:0;
}

.modaal-wrapper [tabindex="0"] {
    height: 100%;
}
.modaal-content-container {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
.modaal-content-container ul {
    padding: 50px 0 ;
    background-color: #fff;
    
}
  .modaal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .modaal-content-container ul li{
    width: 70vw;
    height:16.2vw;
    background-color:rgba(138,95,206,.15);
    margin: 0 auto 4vw;
  }
  .modaal-content-container ul li a{
    text-align: center;
    line-height:16.2vw;
    font-size: 4.53vw;
    color:#8a5fce;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: block;
}

.modaal-close {
    position: fixed;
    right: 10px;
    top: 10px;

    background: rgba(0,0,0,0);
    border-radius: 100%;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.select_store {
    padding: 14.6vw 0 0;
    font-size: 4.5vw;
    text-align: center;
    font-weight: bold;
}
/*-----------------------------
sec1
-----------------------------*/
.sec1_bg{
    background-image: url(../images/sec1/sec1_bg.webp);
    background-repeat: no-repeat;
    padding: 7.14vw 0 14.2vw;
    background-size: cover;
}

.trial_icon li{
    width:26.6vw;
    margin-right: 2vw;
}

.trial_icon li:nth-child(3){
    margin-right: 0;
}

.trial_icon li:nth-child(5){
    margin-right: 0;
    margin-top: 2vw;
}

.trial_icon li:nth-child(4){
    margin-top: 2vw;
}


.movie{
    margin: 8.26vw auto;
}

.sec1 .hero{

    position: relative;
    width: 93.3%;
    padding: 8.13vw 0;
}

.sec1  .hero video {
      width:100%;
      height:auto;
      object-fit:cover;
}
  
  
/*-----------------------------
無料体験
-----------------------------*/
.free_trial{
    padding: 0 0 14.89vw;
}

.trial_ttl{
    margin-bottom: 8.7vw;
}
.trial_content{
    padding: 8.97vw 0;
}

.campaign{
    width: 62.9vw;
    min-width:236px;
}

.free{
    width: 63.3vw;
    min-width: 237.5px;
    margin: 0 auto 7.4vw;

}

.trial_baner li{
    position: relative;
    width: 78.66vw;
    height:15.9vw;
    margin: 0 auto 3vw;
}


.store{
    width: 76.26vw;
    min-width: 286px;
}

/*-----------------------------
sec2
-----------------------------*/
.sec2{
    padding-bottom: 5.33vw;
}

.sec2_ttl{
    top: -35.5px;
    width: 92.9vw;
    min-width:348.5px;

}   

.sec2_inner_ttl{
    width: 76.9vw;
    min-width: 288.5px;
    margin: -25px auto 10.5vw;
}

/*スライダー*/
.slider01 img {
    width: 74.66vw;
    min-width: 280px;
    margin: 0 auto;
  }

.sec2 .slick-prev{
    left: 6.53vw;
    width: 11.5vw;
    height: 11.5vw;
    border-radius: 50%;
}


.sec2 .slick-prev:before {
    width: 4vw;
    height: 4.6vw;
}


.sec2 .slick-next{
    right: 6.53vw;
    width: 11.5vw;
    height: 11.5vw;
}


.sec2 .slick-next:before {
    width: 4vw;
    height: 4.6vw;
}



/*-----------------------------
sec4
-----------------------------*/

.sec4{
    padding: 26.6vw 0 13.86vw;
    margin-top: -18vw;
}

.sec4_right_img{
    padding: 10.2vw 0 12vw;
    width: 52.66vw;
    min-width: 197.5px;
}

.sec4_list li{
    margin-right: -3.3vw;
}


.sec4_txt{
    padding: 6vw 4.8vw;
    margin-top: 6vw;
}

.sec4_txt p{
    font-size: 3.73vw;
}


/*-----------------------------
sec5
-----------------------------*/

.sec5{
    padding: 10.8vw 0 15.4vw;
}

.sec5_ttl{
    width: 67.86vw;
    min-width: 254.5px;
}

.sec5_txt{
    padding: 6.26vw 5.2vw;
}

.sec5_txt p{
    font-size: 3.73vw;
}


/*-----------------------------
sec6
-----------------------------*/

.sec6{
    padding: 14vw 0 5vw;
    margin-top: -5.6vw;
}


.movie{
    margin: 8.26vw auto;
}

.sec6 .hero{

    position: relative;
    width: 93.3%;
    padding:  0;
}

.sec6 .hero video {
      width:100%;
      height:auto;
      object-fit:cover;
}
  

/*-----------------------------
sec7
-----------------------------*/
.sec7{
    padding: 0;
}

.sec7_img{
    width: 67.7vw;
    min-width: 254px;
    padding: 0 0 5.7vw;
}



.sec7_top_wrap{
    padding: 10.66vw 0 6.2vw;
}

.sec7_ttl{
    padding-top: 8vw;
}



.ttl_txt{
    font-size: 4.66vw;
}

.list_txt{
    font-size: 3.73vw;
    margin-top: -2.6vw;
}

.point_list_li{
    padding: 6vw;
}

.point_list li{
    margin-bottom: 5.73vw;
}



.list_ttl_wrap{
    width: 78vw;
    margin: 0 auto 0 -0.8vw;
}

.no1_wrap{
    margin-top: 6vw;
}

.no1_wrap li{
    width: calc(50% - 2.93vw);
}

.no1_wrap li:nth-child(1){
   margin-bottom: 6vw;
}

.no1_wrap li:nth-child(2){
    margin-bottom: 6vw;
}


.no1_wrap li:nth-child(even){
    margin-left: 2.93vw;
}

.ttl_small_txt{
    font-size: 3.2vw;
    margin: 1.8vw auto;
}

.list_img{
    margin-top: 4.93vw;
}

/*-----------------------------
sec8
-----------------------------*/
.sec8{
    padding: 7.6vw 0 0;
}

.gene_ttl{
    padding: 6.66vw 0 3.3vw;
}


.gene_ttl img {
    width: 79.6vw;
    min-width: 298.5px;
}

.gene_ttl::after{
    width: 7vw;
    height: 15.2vw;
    right: 4.8vw;
    bottom: -5.6vw;
}

/*-----------------------------
sec9
-----------------------------*/
.sec9{
    padding: 10.4vw 0 10.66vw;
}

.sec9_ttl_img{
    width: 86.4vw;
}

.sec9_img{
    margin: -3.06vw auto 0;
    width: 95.86vw;
}


/*-----------------------------
sec10
-----------------------------*/

.sec10{
    padding: 10.4vw 0 8vw;
}


.sec10_list li{
    margin-bottom: 9.4vw;;
}

.sec10_ttl{
    width: 92.2vw;
    margin-left: 5.3vw;
    margin-bottom: 9.86vw;
}


/*-----------------------------
sec11
-----------------------------*/
.sec11{
    padding: 23.3vw 0 9vw;

}

.sec11_ttl_right1{
    margin: 6px 0 0 auto;
    width: 88.1%;
}

.sec11_ttl_left{
    margin: 15.2vw auto 0 0;
    width: 94vw;
}

.sec11_ttl_right2{
    margin: 13.8vw 0 0 auto;
    width: 91.4vw;
}


/*スライダー*/
.slider02 img {
    width: 78.5vw;
    min-width: 294.5px;
  }

.sec11 .slick-prev{
    left: 6.53vw;
    width: 10.8vw;
    height: 10.8vw;
    
}


.sec11 .slick-prev:before {
    width: 4vw;
    height: 4.6vw;
}

.sec11 .slick-next{
    right: 6.53vw;
    width: 10.8vw;
    height: 10.8vw;
}


.sec11 .slick-next:before {
    width: 4vw;
    height: 4.6vw;
}

.content {
    width: 49.4vw;
    min-width: 185.5px;
    margin-right: 6vw;
}

.slide_wrap {
    height: 50vw;
}


.protein_img{
    width:94.6vw;
}

/*-----------------------------
sec12
-----------------------------*/
.sec12{
    padding: 10.13vw 0 ;
}

.sec2_bg_white{
    border-radius: 6.66vw;
    padding: 8.13vw 5.33vw 6.66vw;
}
.rental_list_1 li{
    width: 18.6vw;
    min-width: 70px;
    margin-right: 1.2vw;
}

.rental_list_1{
    margin: 8vw auto 0;
}

.rental_list_2{
    margin: 0 auto 6.8vw;
}

.rental_list_2 li{
    width: 18.6vw;
    min-width: 70px;
    margin-right: 1.2vw;
}

/*-----------------------------
sec13
-----------------------------*/
.sec13{
    padding: 4.66vw 0 5.06vw;
}

.sec13_ttl{
    width: 92.53vw;
    margin: 0 auto 2vw;
}

.voice_list li:first-child{
    margin-bottom: 10vw;
}

/*-----------------------------
sec14
-----------------------------*/
.sec14{
    padding: 13.46vw 0 9.6vw;
}

.cov{
    font-size: 4.5vw;
    margin: 6vw auto 6.66vw;
}



/*スライダー*/
.slider03 img {
    width: 74.66vw;
    min-width: 280px;
  }

.sec14 .slick-prev{
    left: 6.53vw;
    width: 10.8vw;
    height: 10.8vw;
}

.sec14 .slick-prev:before {
    width: 4vw;
    height: 4.6vw;
}

.sec14 .slick-next{
    right: 6.53vw;
    width: 10.8vw;
    height: 10.8vw;

}

.sec14 .slick-next:before {
    width: 4vw;
    height: 4.6vw;
}

.cov_txt{
    font-size: 3.2vw;
    padding: 6.4vw 6vw;
}


/*-----------------------------
sec15
-----------------------------*/
.sec15{
    padding: 8.53vw 0 18vw;
}

.sec15_ttl{
    width: 52.2vw;
    min-width: 196px;
    margin:0 auto 4.4vw;
}

.qa_list li{
    margin-bottom: 4.66vw;
    padding:8vw 6vw 5.2vw;
    border: 0.25vw solid #3B3838;
    border-radius:20px;
}

.question{
    margin-bottom: 6.66vw;
    font-size:5.33vw;
    line-height:1.5;
}

.answer{
    margin-bottom: 0;
    font-size: 3.73vw;
}

.small-text{
    font-size: 19px !important;
}

/*-----------------------------
footer
-----------------------------*/
.footer{
    background-color:#3B3838;
    padding:7.33vw 0 3.2vw;
}

.footer_logo{
    width: 56vw;
    min-width:210px;
}


.hp{
    margin:7.33vw auto 10.13vw;
    font-size: 3.73vw;
}

.copy{
    font-size:3.2vw;
}

}