@charset "utf-8";
/*確認作業用リセット*/
/*
*{ animation: 0s !important; opacity: 1.0 !important;}
*/

/*fv01*/
#fv01:after{ content: ""; width: 100%; height: 100%; background: #fff; opacity: 1.0; position: absolute; left: 0; top: 0; z-index: -1;}
#fv01 figure.fv_tit img,
#fv01 figure.fv_img img,
#fv01 span.ico1 img{ position: relative; opacity: 0;}
#fv01.active:after{ animation: fv_bg ease-out 0.5s forwards; animation-delay: 0s;}
#fv01.active figure.fv_tit img{ animation: fv_right ease-out 0.5s forwards; animation-delay: 0.3s;}
#fv01.active figure.fv_img img{ animation: fv_right ease-out 0.5s forwards; animation-delay: 0.4s;}
#fv01.active span.ico1 img{ animation: fv_left ease-out 0.5s forwards; animation-delay: 0.5s;}
@keyframes fv_bg{
0%{ opacity: 1.0;}
100%{ opacity: 0;}
}
@keyframes fv_left{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: 0;}
}
@keyframes fv_right{
0%{ opacity: 0; right: -400px;}
100%{ opacity: 1.0; right: 0;}
}



/*fv02*/
#fv02 h1 strong{ overflow: hidden; position: relative;}
#fv02 h1 strong:before{ content: ""; width: 100%; height: 100%; background: #C81D65; position: absolute; left: 0; top: 0;}
#fv02 h1 strong:after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: -100%; top: 0;}
#fv02 p.txt strong{ overflow: hidden; position: relative;}
#fv02 p.txt strong:before{ content: ""; width: 100%; height: 100%; background: #C81D65; position: absolute; left: 0; top: 0;}
#fv02 p.txt strong:after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: -100%; top: 0;}
#fv02.active h1 strong:before{ animation: fv02_txt_bg ease-out 0.5s forwards; animation-delay: 0s;}
#fv02.active h1 strong:after{ animation: fv02_txt_bg2 ease-out 0.5s forwards; animation-delay: 0s;}
#fv02.active p.txt strong:before{ animation: fv02_txt_bg ease-out 0.5s forwards; animation-delay: 0.3s;}
#fv02.active p.txt strong:after{ animation: fv02_txt_bg2 ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes fv02_txt_bg{
0%{ left: 0;}
100%{ left: 201%;}
}
@keyframes fv02_txt_bg2{
0%{ left: -100%;}
100%{ left: 101%;}
}

#fv02 span.ico2 img{ position: relative; opacity: 0;}
#fv02.active span.ico2 img{ animation: fv02_right ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes fv02_right{
0%{ opacity: 0; right: -400px;}
100%{ opacity: 1.0; right: 0;}
}

#fv02 .fv02_btn{ position: relative; opacity: 0;}
#fv02.active .fv02_btn{ animation: fv02_btn ease-out 0.5s forwards; animation-delay: 0.6s;}
@keyframes fv02_btn{
0%{ opacity: 0; transform: scale(1.2);}
100%{ opacity: 1.0; transform: scale(1.0);}
}



/*sec01*/
#sec01 h2.tit_h2{ margin: 0;}
#sec01 h2.tit_h2 span{ overflow: hidden; position: relative;}
#sec01 h2.tit_h2 span:before{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0;}
#sec01 h2.tit_h2 span:after{ content: ""; width: 100%; height: 100%; background: #151515; position: absolute; left: -100%; top: 0;}
#sec01 h2.tit_h2 strong{ overflow: hidden; position: relative;}
#sec01 h2.tit_h2 strong:before{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0;}
#sec01 h2.tit_h2 strong:after{ content: ""; width: 100%; height: 100%; background:#C81D65; position: absolute; left: -100%; top: 0;}
#sec01.active h2.tit_h2 span:before{ animation: sec01_h2_bg ease-out 0.5s forwards; animation-delay: 0s;}
#sec01.active h2.tit_h2 span:after{ animation: sec01_h2_bg2 ease-out 0.5s forwards; animation-delay: 0s;}
#sec01.active h2.tit_h2 strong:before{ animation: sec01_h2_bg ease-out 0.5s forwards; animation-delay: 0.3s;}
#sec01.active h2.tit_h2 strong:after{ animation: sec01_h2_bg2 ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes sec01_h2_bg{
0%{ left: 0;}
100%{ left: 201%;}
}
@keyframes sec01_h2_bg2{
0%{ left: -100%;}
100%{ left: 101%;}
}

#sec01 .tit_num{ opacity: 0;}
#sec01.active .tit_num{ animation: fv02_btn ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes tit_num{
0%{ opacity: 0; transform: scale(1.2);}
100%{ opacity: 1.0; transform: scale(1.0);}
}

#sec01 ul li.trigger figure img{ position: relative; opacity: 0;}
#sec01 ul li.trigger span.ico img{ position: relative; opacity: 0;}
#sec01 ul li.trigger.active figure img{ animation: sec01_list_right ease-out 0.5s forwards;}
#sec01 ul li.trigger.active:nth-child(2) figure img{ animation: sec01_list_left ease-out 0.5s forwards;}
#sec01 ul li.trigger.active span.ico img{ animation: sec01_list_right ease-out 0.5s forwards; animation-delay: 0.3s;}
#sec01 ul li.trigger.active:nth-child(2) span.ico img{ animation: sec01_list_right ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes sec01_list_left{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: 0;}
}
@keyframes sec01_list_right{
0%{ opacity: 0; right: -400px;}
100%{ opacity: 1.0; right: 0;}
}



/*secret_cont*/
#secret_cont h2.tit_h2-2{ overflow: hidden;}
#secret_cont h2.tit_h2-2 span:before{ content: ""; width: 100%; height: 100%; background: #151515; position: absolute; left: 0; top: 0;}
#secret_cont h2.tit_h2-2 span:after{ content: ""; width: 100%; height: 100%; background: #151515; position: absolute; right: 0; top: 0;}
#secret_cont.active h2.tit_h2-2 span:before{ animation: secret_cont_bg ease-out 0.5s forwards;}
#secret_cont.active h2.tit_h2-2 span:after{ animation: secret_cont_bg2 ease-out 0.5s forwards;}
@keyframes secret_cont_bg{
0%{ left: 0;}
100%{ left: -101%;}
}
@keyframes secret_cont_bg2{
0%{ right: 0;}
100%{ right: -101%;}
}

#secret_cont ul li{ position: relative; opacity: 0;}
#secret_cont ul.active li{ animation: secret_cont_list_l ease-out 0.5s forwards; animation-delay: 0s;}
#secret_cont ul.active li:nth-child(2n){ animation: secret_cont_list_r ease-out 0.5s forwards; animation-delay: 0.1s;}
@keyframes secret_cont_list_l{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: 0;}
}
@keyframes secret_cont_list_r{
0%{ opacity: 0; right: -400px;}
100%{ opacity: 1.0; right: 0;}
}



/*sec02*/
#sec02 h2.tit_h2{ margin: 0;}
#sec02 h2.tit_h2 span{ overflow: hidden; position: relative;}
#sec02 h2.tit_h2 span:before{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0;}
#sec02 h2.tit_h2 span:after{ content: ""; width: 100%; height: 100%; background: #151515; position: absolute; left: -100%; top: 0;}
#sec02 h2.tit_h2 strong{ overflow: hidden; position: relative;}
#sec02 h2.tit_h2 strong:before{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0;}
#sec02 h2.tit_h2 strong:after{ content: ""; width: 100%; height: 100%; background:#C81D65; position: absolute; left: -100%; top: 0;}
#sec02.active h2.tit_h2 span:before{ animation: sec01_h2_bg ease-out 0.5s forwards; animation-delay: 0s;}
#sec02.active h2.tit_h2 span:after{ animation: sec01_h2_bg2 ease-out 0.5s forwards; animation-delay: 0s;}
#sec02.active h2.tit_h2 strong:before{ animation: sec01_h2_bg ease-out 0.5s forwards; animation-delay: 0.3s;}
#sec02.active h2.tit_h2 strong:after{ animation: sec01_h2_bg2 ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes sec02_h2_bg{
0%{ left: 0;}
100%{ left: 201%;}
}
@keyframes sec02_h2_bg2{
0%{ left: -100%;}
100%{ left: 101%;}
}

#sec02 .tit_num{ opacity: 0;}
#sec02.active .tit_num{ animation: fv02_btn ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes tit_num{
0%{ opacity: 0; transform: scale(1.2);}
100%{ opacity: 1.0; transform: scale(1.0);}
}

#sec02 .sec02_list_wrap span.ico img{ position: relative; opacity: 0;}
#sec02 .sec02_list_wrap.active span.ico img{ animation: sec02_ico ease-out 0.5s forwards;}
@keyframes sec02_ico{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: 0;}
}



/*total_sales*/
#total_sales figure img{ position: relative; opacity: 0;}
#total_sales.active figure img{ animation: total_sales alternate ease-in-out 0.5s forwards;}
@keyframes total_sales{
0%{ transform: scale(1.5); opacity: 0;}
100%{ transform: scale(1.0); opacity: 1.0;}
}



/*review*/
#review h2.tit_h2-2{ overflow: hidden;}
#review h2.tit_h2-2 span:before{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0;}
#review h2.tit_h2-2 span:after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; right: 0; top: 0;}
#review p.lead_txt strong{ overflow: hidden;}
#review p.lead_txt strong:before{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top: 0;}
#review p.lead_txt strong:after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; right: 0; top: 0;}

#review.active h2.tit_h2-2 span:before{ animation: review_tit_bg ease-out 0.5s forwards;}
#review.active h2.tit_h2-2 span:after{ animation: review_tit_bg2 ease-out 0.5s forwards;}
#review.active p.lead_txt strong:before{ animation: review_tit_bg ease-out 0.5s forwards; animation-delay: 0.3s;}
#review.active p.lead_txt strong:after{ animation: review_tit_bg2 ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes review_tit_bg{
0%{ left: 0;}
100%{ left: -101%;}
}
@keyframes review_tit_bg2{
0%{ right: 0;}
100%{ right: -101%;}
}

#review01,
#review02{ position: relative; opacity: 0;}
#review01.active,
#review02.active{ animation: review_list ease-out 0.5s forwards;}
@keyframes review_list{
0%{ opacity: 0; top: 80px;}
100%{ opacity: 1.0; top: 0;}
}

#review01 span.ico01 img,
#review02 span.ico02 img{ position: relative; opacity: 0;}
#review01.active span.ico01 img{ animation: review_ico_r ease-out 0.5s forwards; animation-delay: 0.3s;}
#review02.active span.ico02 img{ animation: review_ico_l ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes review_ico_l{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: 0;}
}
@keyframes review_ico_r{
0%{ opacity: 0; right: -400px;}
100%{ opacity: 1.0; right: 0;}
}



/*cm*/
#cm h2.tit_h2-2{ overflow: hidden;}
#cm h2.tit_h2-2 strong:before{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; left: 0; top: 0;}
#cm h2.tit_h2-2 strong:after{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; right: 0; top: 0;}
#cm p.lead_txt strong{ overflow: hidden;}
#cm p.lead_txt strong:before{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; left: 0; top: 0;}
#cm p.lead_txt strong:after{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; right: 0; top: 0;}

#cm.active h2.tit_h2-2 strong:before{ animation: cm_bg ease-out 0.5s forwards;}
#cm.active h2.tit_h2-2 strong:after{ animation: cm_bg2 ease-out 0.5s forwards;}
#cm.active p.lead_txt strong:before{ animation: cm_bg ease-out 0.5s forwards; animation-delay: 0.3s;}
#cm.active p.lead_txt strong:after{ animation: cm_bg2 ease-out 0.5s forwards; animation-delay: 0.3s;}

#cm #cm_prof h3,
#cm #cm_prof h4,
#cm #cm_prof h5 strong{ position: relative; overflow: hidden;}
#cm #cm_prof h3:before,
#cm #cm_prof h4:before{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; left: 0; top: 0;}
#cm #cm_prof h5 strong:before{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; left: 0; top: 0;}
#cm #cm_prof h3:after,
#cm #cm_prof h4:after{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; right: 0; top: 0;}
#cm #cm_prof h5 strong:after{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; right: 0; top: 0;}

#cm #cm_prof p{ position: relative; overflow: hidden;}
#cm #cm_prof p:before{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; left: 0; top: 0;}
#cm #cm_prof p:after{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; right: 0; top: 0;}

#cm #cm_prof ul{ position: relative; overflow: hidden;}
#cm #cm_prof ul:before{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; left: 0; top: 0;}
#cm #cm_prof ul:after{ content: ""; width: 100%; height: 100%; background: #660874; position: absolute; right: 0; top: 0;}

#cm #cm_prof.active h3:before{ animation: cm_bg ease-out 0.5s forwards; animation-delay: 0s;}
#cm #cm_prof.active h4:before{ animation: cm_bg ease-out 0.5s forwards; animation-delay: 0.1s;}
#cm #cm_prof.active h5 strong:before{ animation: cm_bg ease-out 0.5s forwards; animation-delay: 0.3s;}
#cm #cm_prof.active p:before{ animation: cm_bg ease-out 0.5s forwards; animation-delay: 0.2s;}
#cm #cm_prof.active ul:before{ animation: cm_bg ease-out 0.5s forwards; animation-delay: 0.4s;}
#cm #cm_prof.active h3:after{ animation: cm_bg2 ease-out 0.5s forwards; animation-delay: 0s;}
#cm #cm_prof.active h4:after{ animation: cm_bg2 ease-out 0.5s forwards; animation-delay: 0.1s;}
#cm #cm_prof.active h5 strong:after{ animation: cm_bg2 ease-out 0.5s forwards; animation-delay: 0.3s;}
#cm #cm_prof.active p:after{ animation: cm_bg2 ease-out 0.5s forwards; animation-delay: 0.2s;}
#cm #cm_prof.active ul:after{ animation: cm_bg2 ease-out 0.5s forwards; animation-delay: 0.4s;}
@keyframes cm_bg{
0%{ left: 0;}
100%{ left: -101%;}
}
@keyframes cm_bg2{
0%{ right: 0;}
100%{ right: -101%;}
}

#cm #cm_movie{ opacity: 0; position: relative;}
#cm #cm_movie.active{ animation: cm_bottom_in ease-out 0.5s forwards;}
#cm #cm_prof figure.cm_prof_img{ opacity: 0; position: relative;}
#cm #cm_prof figure.cm_prof_img.active{ animation: cm_bottom_in ease-out 0.5s forwards;}
@keyframes cm_bottom_in{
0%{ opacity: 0; top: 80px;}
100%{ opacity: 1.0; top: 0;}
}

#cm #cm_prof span.ico01 img,
#cm #cm_prof span.ico02 img{ position: relative; opacity: 0;}
#cm #cm_prof.active span.ico01 img{ animation: cm_ico_l ease-out 0.5s forwards; animation-delay: 0.3s;}
#cm #cm_prof.active span.ico02 img{ animation: cm_ico_r ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes cm_ico_l{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: 0;}
}
@keyframes cm_ico_r{
0%{ opacity: 0; right: -400px;}
100%{ opacity: 1.0; right: 0;}
}



/*lineup01*/
#lineup01 span.ico01 img,
#lineup01 span.ico02 img{ position: relative; opacity: 0;}
#lineup01.active span.ico01 img{ animation: lineup01_ico_l ease-out 0.5s forwards; animation-delay: 0.3s;}
#lineup01.active span.ico02 img{ animation: lineup01_ico_r ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes lineup01_ico_l{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: 0;}
}
@keyframes lineup01_ico_r{
0%{ opacity: 0; right: -400px;}
100%{ opacity: 1.0; right: 0;}
}

#lineup01 h2,
#lineup01 .lineup01_zu{ position: relative; opacity: 0;}
#lineup01 h2.active,
#lineup01 .lineup01_zu.active{ animation: lineup01_zoom ease-out 0.5s forwards; animation-delay: 0.3s;}
@keyframes lineup01_zoom{
0%{ transform: scale(1.5); opacity: 0;}
100%{ transform: scale(1.0); opacity: 1.0;}
}

.lineup_list{ position: relative; opacity: 0;}
.lineup_list.active{ animation: lineup_list ease-out 0.5s forwards;}
@keyframes lineup_list{
0%{ opacity: 0; top: 80px;}
100%{ opacity: 1.0; top: 0;}
}


.lineup02_tit{ position: relative; opacity: 0; z-index: 3;}
.lineup02_tit.active{ animation: lineup_tit ease-out 0.5s forwards;}
@media screen and (max-width:768px){
.lineup02_tit.active{ animation: lineup_tit_smp ease-out 0.5s forwards;}
}
@media screen and (max-width:1280px){
.lineup02_tit.active{ animation: lineup_tit_tab ease-out 0.5s forwards;}
}
@keyframes lineup_tit{
0%{ opacity: 0; left: -620px;}
100%{ opacity: 1.0; left: -220px;}
}
@keyframes lineup_tit_tab{
0%{ opacity: 0; left: calc((-360/1280)*100vw);}
100%{ opacity: 1.0; left: calc((-120/1280)*100vw);}
}

@keyframes lineup_tit_smp{
0%{ opacity: 0; left: -400px;}
100%{ opacity: 1.0; left: -3.75vw;}
}