@charset "utf-8";
 #video-loading{top: 50%;min-height: auto;}
#video-loading-sp, #video-loading-mid{top: 50%;}
#video-area-loading-sp, #video-area-loading-mid{top: 0;min-height: auto;}
#video-area-loading, #video-area-loading-sp, #video-area-loading-mid{background: #000;}
#video-area-loading{display: block;}
#video-area-loading-sp, #video-area-loading-mid{display: none;}
.text-area{position: absolute;z-index: 1000;top: 38rem;left: 0;right: 0;max-width: 600px;margin: 0 auto;}
.loading-h1{position: static;color: #fff;font-weight: 500;font-size: 2rem;text-align: center;max-width: 400px;margin: 0 auto;line-height: 2.7rem;}
.click-btn{max-width: 1920px;display: flex;align-items: center;justify-content: center;position: absolute;z-index: 1000;bottom: -10rem;left: 0;right: 0;}
.click-btn-pc{width: 320px;}
.click-btn-sp{display: none;}
.click-btn > div {
position: relative;
width: 95px;
height: 95px;
margin: 0 0 0 3rem;
display: block;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
z-index: 9999;
}
.click-btn > div 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;
}
.click-btn > div a:hover{opacity: 1;}
.click-btn > div:hover img:nth-of-type(2) {
opacity: 0;
} .click-btn > button 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;
}
.click-btn > button :hover{opacity: 1;}
.click-btn > button:hover img:nth-of-type(2) {
opacity: 0;
}
@media screen and (min-width: 2500px){
.click-btn{bottom: -16rem;}
}
@media screen and (min-width: 2000px){
.text-area{top: 47rem;}
}
@media screen and (max-width: 1920px){
.text-area{top: 34rem;}
}
@media screen and (max-width: 1500px){
.loading-h1{font-size: 1.75rem;}
.text-area{top: 32rem;}
}
@media screen and (max-width: 1300px){
.click-btn{bottom: -8rem;}
}
@media screen and (max-width: 1200px){
.text-area{top: 29rem;}
.loading-h1{font-size: 1.625rem;line-height: 2rem;}
.click-btn-pc{width: 280px;}
.click-btn > div {width: 75px;height: 75px;}
}
@media screen and (max-width: 950px){
#video-area-loading-mid{display: block;}
#video-area-loading{display: none;}
.loading-h1{width: 100%;}
.text-area{top: 25rem;}
.click-btn-pc{display: none;}
.click-btn{display: block;width: 162px;bottom: -13rem;margin: 0 auto;}
.click-btn-sp{display: block;width: 162px;margin-bottom: 1rem;}
.click-btn > div{margin: 0 auto;}
}
@media screen and (max-width: 645px){
#video-area-loading-sp{display: block;}
#video-area-loading-mid{display: none;}
.text-area{top: 22rem;}
.loading-h1{font-size: 1.25rem;line-height: 1.7rem;}
.click-btn{margin-top: 1.25rem;}
}
@media screen and (max-width: 430px){
.text-area{top: 21rem;}	
}
@media screen and (max-width: 400px){
.text-area{top: 17rem;}	
}
.c-modal {
background-color: #eeeeee;
border-radius: 4px;
}
.c-btn {
cursor: pointer;
border: 0;
width: auto;
background: transparent;
}
.l-modal {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
max-width: 1920px;
}