body {
background: #000;
color: #000;
font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-style: normal;
width: 100%;
height:100%;
font-size: 0.8vw;
line-height:1.4em;
margin: 0px;
}

#wrap{
width: 100%;
position: relative;
}

.sp{ display: none;}

.efBlock{ width: 100%;}


ruby {
font-size: 100%;
}
rt {
font-size: 50%;
font-weight: 600;
margin-top: 2px; /* 間隔調整 */
}


@keyframes  fadeanm {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes  scaleanm {
0% { transform: scale(1.1,1.1); opacity: 0;}
100% { transform: scale(1,1); opacity: 1;}
}


/*---------------------------------------------

main

----------------------------------------------*/

#content{
width: 100%;
position: absolute;
overflow-x: hidden;
padding: 0;
margin: 0 auto;
}

#mainAll{
background-color: #000;
width: 100%;
position: relative;
overflow: hidden;
}

#mainAll:before{
content:"";
display: block;
padding-top: 54%;
}

#main{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#logo{
background: url("../images/top2/logo.png") no-repeat center bottom;
background-size: contain;
width: 60%; height: 25%;
position: absolute;
bottom: 1%; left: 20%;
z-index: 5;
animation: fadeanm 1.5s ease 1.5s forwards;
opacity: 0;
}

#roadshow{
background: url("../images/top2/roadshow.png") no-repeat center;
background-size: contain;
width: 10%; height: 8%;
position: absolute;
bottom: 3.5%; left: 1%;
z-index: 6;
animation: fadeanm 1.5s ease 2s forwards;
opacity: 0;
}

#roadshow2{
background: url("../images/top2/roadshow.png") no-repeat right;
background-size: contain;
width: 10%; height: 9%;
position: absolute;
bottom: 10%; right: 1%;
z-index: 6;
animation: fadeanm 1.5s ease 2.6s forwards;
opacity: 0;
}

@keyframes  falshanm {
0% { transform: scale(1.3,1.3); opacity: 1;}
100% { transform: scale(1,1); opacity: 0;}
}

#mainFlash{
background: url("../images/top2/main_blur_pc.jpg") no-repeat center top;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: falshanm 1s cubic-bezier(.48,.71,.79,1) 1s forwards;
opacity: 0;
}

#mainImg{
background: url("../images/top2/gxktne_main_pc.jpg") no-repeat center top;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#mainCatch{
background: url("../images/top2/catch_pc.png") no-repeat right;
background-size: auto 95%;
width: 100%; height: 95%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: fadeanm 1.5s ease 2.5s forwards;
opacity: 0;
}

#mainCatch2{
background: url("../images/top2/catch_pc.png") no-repeat right;
background-size: auto 95%;
width: 100%; height: 80%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: fadeanm 1.5s ease 2.5s forwards;
opacity: 0;
}

/*---------------------------------------------

sns

----------------------------------------------*/

#iX{
background: url("../images/i_x_b.png") no-repeat center;
background-size: 40px auto;
width: 50px; height: 50px;
position: absolute;
top: 25px; left: 1%;
z-index: 20;
transition: all 0.3s ease;
}

#iX a{
width: 100%; height: 100%;
display: block;
}

iX:hover{ opacity: 0.7;}

/*---------------------------------------------

bnr

----------------------------------------------*/

#bnrLpc{
width: 14%;
position: absolute;
bottom: 2%; left: 1%;
z-index: 10;
animation: fadeanm 1s ease 2.8s forwards;
opacity: 0;
}

#bnrLpc img{ margin: 0.2em 0 0;}

#bnrLsp{ display: none;}

/*---------------------------------------------

mvck

----------------------------------------------*/

#mvckBtnAll{
width: 18%; height: 7%;
position: absolute;
bottom: 10px; right: 10px;
z-index: 10;
transition: all 0.3s ease;
animation: fadeanm 1s ease 2.8s forwards;
opacity: 0;
}

#mvck_digital{
background: #e61e0f url("../images/bnr/mvck_online.png") no-repeat center;
background-size: auto 100%;
width: 50%; height: 100%;
transition: all 0.3s ease;
float: left;
}

#mvck_card{
background: #96d503 url("../images/bnr/mvck_card.png") no-repeat center;
background-size: auto 100%;
width: 50%; height: 100%;
transition: all 0.3s ease;
float: left;
}

#mvck_digital a,#mvck_card a{
width: 100%; height: 100%;
display: block;
}

#mvck_digital:hover,#mvck_card:hover{
opacity: 0.7;
}

#mvckonlineAll{
width: 100%; height: 230px;
padding: 0;
position: fixed;
bottom: 0; left: 0;
z-index: 100;
display: none;
filter: drop-shadow(0 0 10px rgba(0,0,0,0.2));
}

#mvck{
width: 840px; height: 180px;
position: absolute;
top: 50%; left: 50%;
margin-left: -420px;
margin-top: -90px;
z-index: 2;
display: none;
overflow: hidden;
}

#mvtk-widgets-container{ overflow: hidden;}

#mvckBG{
background-image: linear-gradient(157deg, rgba(108, 11, 78, 1) 10%, rgba(4, 37, 123, 1) 90%);
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
opacity: 0.9;
border-top: 1px solid #626262;
}

#mvckClose{
background: url("../images/nav/menu_btn02.png") no-repeat center;
background-size: contain;
width: 50px; height: 50px;
position: absolute;
top: 0; right: 0;
z-index: 2;
cursor: pointer;
}

/*---------------------------------------------

movie

----------------------------------------------*/

#topmovarea{
background-image: linear-gradient(150deg, #02184d, #140c21 50%, #2b0e22);
width:100%;
margin:0 auto;
padding:5vw 0;
line-height: 0;
/*border-bottom: 1px solid #d2aad6;*/
}

#topmovarea .movie {
width: 75%;
margin: 0 auto;
}

#topmovarea .movie .inner {
position: relative;
padding-bottom: 56.25%;
height: 0;
margin: 0 auto;
}

#topmovarea .movie .inner iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
}


#topmovarea .movie .tab_area {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 5px auto 0;
justify-content: center;
}

#topmovarea .movie .tab_area li {
text-align: center;
margin: 2px;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size: 1.1vw;
font-weight: 700;
}

#topmovarea .movie .tab_area li a{
min-width: 160px;
padding: 0 20px;
display: block;
line-height: 45px;
text-decoration: none;
background: #a1004c;
color: #eca9c9;
float: left;
}

#topmovarea .movie .tab_area li.wide1 a,
#topmovarea .movie .tab_area li.wide2 a,
#topmovarea .movie .tab_area li.wide2line2 a{
display: block;
min-width: 160px;
padding: 0 20px;
line-height: 45px;
text-decoration: none;
background: #a1004c;
color: #eca9c9;
float: left;
}

#topmovarea .movie .tab_area li a.active{
background: #f5349a;
color: #fff;
}



/*---------------------------------------------

bnr

----------------------------------------------*/

#bnrSall{
width: 100%;
line-height: 0;
margin: 0 auto;
text-align: center;
}

#bnrSall img{ width: 200px; margin: 3px; border: 1px solid #666;}


/*---------------------------------------------

introduction

----------------------------------------------*/

#introAll{
background: url("../images/introduction/intro_main_pc.jpg") no-repeat center top;
background-size: cover;
width: 100%;
position: relative;
overflow: hidden;
}

#introAll:before{
content:"";
display: block;
padding-top: 62%;
}

#introCatch01a{
background: url("../images/introduction/intro_catch01a.png") no-repeat center;
background-size: contain;
width: 14%; height: 92.4%;
position: absolute;
top: 7.6%; right: 0;
z-index: 2;
}

#introCatch01b{
background: url("../images/introduction/intro_catch01b.png") no-repeat center;
background-size: contain;
width: 14%; height: 92.4%;
position: absolute;
top: 7.6%; left: 0;
z-index: 2;
}

#introCatch02{
background: url("../images/introduction/intro_catch02_pc.png") no-repeat center;
background-size: contain;
width: 100%; height: 7.6%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#introCatch03{
background: url("../images/introduction/intro_catch03_pc.png") no-repeat center;
background-size: contain;
width: 70%; height: 7.6%;
position: absolute;
top: 49%; left: 15%;
z-index: 1;
}

#introTxt{
width: 70%;
position: absolute;
top: 59%; left: 15%;
z-index: 3;
color: #fff;
font-size: 0.9vw;
line-height: 1.5em;
font-weight: 600;
letter-spacing: 0;
text-shadow: 0 0 7px black,0 0 12px black;
}

@keyframes imgslide {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}

@keyframes imgslide2 {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}


#photo01All{
width: 100%;
position: relative;
overflow: hidden;
}

#photo02All{ display: none;}

#photo01All:before{
content:"";
display: block;
padding-top: 12.66%;
}

#photo01A{
background: url("../images/introduction/intro_photo_pc.jpg") no-repeat center;
background-size: 100% 100%;
width: 131.33%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: imgslide 50s linear infinite;
}

#photo01B{
background: url("../images/introduction/intro_photo_pc.jpg") no-repeat center;
background-size: 100% 100%;
width: 131.33%; height: 100%;
position: absolute;
top: 0; left: 131.33%;
z-index: 2;
animation: imgslide 50s linear infinite;
}



/*---------------------------------------------

footer

----------------------------------------------*/

#footer{
background-image: linear-gradient(150deg, #02184d, #140c21 50%, #2b0e22);
background-size: cover;
width: 100%;
padding: 40px 0;
}

#sharearea{
background: url("../images/sharemark_p.png") no-repeat left;
background-size: auto 14px;
width: 270px; height: 25px;
text-align: right;
font-size: 16px;
font-family: "industry", sans-serif;
font-weight: 700;
font-style: normal;
margin: 35px auto;
line-height: 25px;
}

#sharearea a{ color: #fe45a3;}
#sharearea a:hover{ color: #fff; opacity: 1;}

#hellomovie{
width: 100%;
margin: 0 auto 35px;
line-height: 0;
text-align: center;
}

#hellomovie img{ width: 200px;}

#billing{
background: url("../images/top2/billing_pc.png") no-repeat center;
background-size: contain;
width: 900px; height: 200px;
margin: 45px auto 15px;
}

#billing2{
background: url("../images/top2/billing2_pc.png") no-repeat center;
background-size: contain;
width: 900px; height: 200px;
margin: 45px auto 15px;
}

#privacy{
width: 300px;
text-align: center;
font-size: 10px;
line-height: 1em;
margin: 40px auto 0;
color: #a19fad;
}

#privacy a{ color: #a19fad;}

#copyright{
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
width: 1000px;
font-size: 10px;
line-height: 1.6em;
text-align: center;
margin: 0 auto;
font-weight: 600;
color: #a19fad;
}