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

/*アニメーション*/
header h1 img{ opacity: 0; position: relative;}
header h1.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
header p img{ opacity: 0; position: relative;}
header p.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec00 h2 img{ opacity: 0; position: relative;}
#sec00 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec00 figure.logo img{ opacity: 0; position: relative;}
#sec00 figure.logo.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec01 h2 img{ opacity: 0; position: relative;}
#sec01 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec01 figure.logo img{ opacity: 0; position: relative;}
#sec01 figure.logo.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec02 figure.zu img{ opacity: 0; position: relative;}
#sec02 figure.zu.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec02 .cta_box{ opacity: 0;}
#sec02 .cta_box.active{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec03 h2 img{ opacity: 0; position: relative;}
#sec03 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec03 ul li img{ opacity: 0;}
#sec03 ul.active li img{ animation: fadein ease-in-out 1.0s forwards; animation-delay: 0.6s;}
#sec03 ul.active li:nth-child(2) img{ animation-delay: 1.2s;}

#sec04 h2 img{ opacity: 0; position: relative;}
#sec04 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec04 h3 img{ opacity: 0; position: relative;}
#sec04 h3.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec04 figure.logo img{ opacity: 0; position: relative;}
#sec04 figure.logo.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec05 h2 img{ opacity: 0; position: relative;}
#sec05 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec05 h3 img{ opacity: 0; position: relative;}
#sec05 h3.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec06 h2 img{ opacity: 0; position: relative;}
#sec06 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec07 h2 img{ opacity: 0; position: relative;}
#sec07 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec08 h2 img{ opacity: 0; position: relative;}
#sec08 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}

#sec09 h2 img{ opacity: 0; position: relative;}
#sec09 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec09 ul li img{ opacity: 0;}
#sec09 ul.active li img{ animation: fadein ease-in-out 1.0s forwards; animation-delay: 0.6s;}
#sec09 ul.active li:nth-child(2) img{ animation-delay: 1.2s;}

#sec09-2 h2 img{ opacity: 0; position: relative;}
#sec09-2 h2.active img{ animation: fadeup ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec09-2 ul li img{ opacity: 0;}
#sec09-2 ul.active li img{ animation: fadein ease-in-out 1.0s forwards; animation-delay: 0.6s;}
#sec09-2 ul.active li:nth-child(2) img{ animation-delay: 1.2s;}



@keyframes fadeup{
0%{ opacity: 0; top: 5vw;}
100%{ opacity: 1.0; top: 0;}
}
@keyframes fadein{
0%{ opacity: 0;}
100%{ opacity: 1.0;}
}



#sec02 .cta_box figure.btn{ transition: transform 0.1s ease;}
#sec02 .cta_box figure.btn:active{ transform: scale(0.95);}
#sec02 .cta_box figure.btn a{ opacity: 1.0; position: relative; display: block; transition: 0.3s;}
#sec02 .cta_box figure.btn a:hover{ opacity: 0.7;}
#sec02 .cta_box figure.btn a img{ position: relative; animation: btn ease-in-out 1.5s infinite; animation-delay: 0s; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; border-radius: 120px;}
@media screen and (max-width:750px){
#sec02 .cta_box figure.btn a img{ animation: btn_smp ease-in-out 1.5s infinite;}
}
@keyframes btn{
0%{ transform: translateX(0);}
60%{ transform: translateX(calc((-30/1200)*750px));}
70%{ transform: translateX(calc((30/1200)*750px));}
80%{ transform: translateX(calc((-20/1200)*750px));}
90%{ transform: translateX(calc((10/1200)*750px));}
100%{ transform: translateX(0);}
}
@keyframes btn_smp{
0%{ transform: translateX(0);}
60%{ transform: translateX(calc((-30/1200)*100vw));}
70%{ transform: translateX(calc((30/1200)*100vw));}
80%{ transform: translateX(calc((-20/1200)*100vw));}
90%{ transform: translateX(calc((10/1200)*100vw));}
100%{ transform: translateX(0);}
}

#sec55 .cta_box figure.btn{ transition: transform 0.1s ease;}
#sec55 .cta_box figure.btn:active{ transform: scale(0.95);}
#sec55 .cta_box figure.btn a{ opacity: 1.0; position: relative; display: block; transition: 0.3s;}
#sec55 .cta_box figure.btn a:hover{ opacity: 0.7;}
#sec55 .cta_box figure.btn a img{ position: relative; animation: btn ease-in-out 1.5s infinite; animation-delay: 0s; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px; border-radius: 120px;}
@media screen and (max-width:750px){
#sec55 .cta_box figure.btn a img{ animation: btn_smp ease-in-out 1.5s infinite;}
}
@keyframes btn{
0%{ transform: translateX(0);}
60%{ transform: translateX(calc((-30/1200)*750px));}
70%{ transform: translateX(calc((30/1200)*750px));}
80%{ transform: translateX(calc((-20/1200)*750px));}
90%{ transform: translateX(calc((10/1200)*750px));}
100%{ transform: translateX(0);}
}
@keyframes btn_smp{
0%{ transform: translateX(0);}
60%{ transform: translateX(calc((-30/1200)*100vw));}
70%{ transform: translateX(calc((30/1200)*100vw));}
80%{ transform: translateX(calc((-20/1200)*100vw));}
90%{ transform: translateX(calc((10/1200)*100vw));}
100%{ transform: translateX(0);}
}