body {
background: #000;
color: #000;
font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
width: 100%;
font-size: 12px;
line-height:2em;
margin: 0px;
letter-spacing: 0.5px;
}

#wrap{
width: 100%;
}

a:hover {opacity:1;} 

.pc{ display: none;}

.efBlock{ width: 100%;}

.linkLabel {
margin-top:-60px;
padding-top:60px;
}

ruby {
font-size: 100%;
}
rt {
font-size: 70%;
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%;
padding: 0;
}

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

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

#main:before{
content:"";
display: block;
padding-top: 141.33%;
}

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

#roadshow,#roadshow2{
background: url("../images/top2/roadshow.png") no-repeat center top;
background-size: contain;
width: 20%; height: 7.5%;
position: absolute;
top: 91%; left: 40%;
z-index: 6;
animation: fadeanm 1.5s ease 2s 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_sp.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_sp.jpg") no-repeat center top;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}


#mainCatch,#mainCatch2{
background: url("../images/top2/catch_sp.png") no-repeat center top;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 1%; right: 0.5%;
z-index: 2;
animation: fadeanm 1.5s ease 2.5s forwards;
opacity: 0;
}


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

sns

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

#iX{
background: url("../images/i_x.png") no-repeat center;
background-size: 35px auto;
width: 60px; height: 60px;
position: fixed;
top: 0; right: 0;
z-index: 50;
transition: all 0.3s ease;
}

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

iX:hover{ opacity: 0.7;}


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

bnr

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

#bnrLpc{ display: none;}

#bnrLsp{
width: 100%;
padding: 1.5em 0;
}

.bnrLimg{
width: 87%;
line-height: 0;
margin: 3px auto;
}


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

mvck

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

#mvckBtnAll{
background: #000; 
width: 100%; height: 60px;
}

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

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

#mvckonlineAll{
width: 100%; height: 100%;
position: fixed;
bottom: 0; left: 0;
z-index: 100;
display: none;
}

#mvck{
width: 342px;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
overflow: hidden;
display: none;
}

#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;
}

#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:8vw 0;
line-height: 0;
/*border-bottom: 1px solid #d2aad6;*/
}

#topmovarea .movie {
width: 88%;
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 {
width: 49%;
line-height: 3em;
text-align: center;
margin: 0.5%;
font-size: 3.5vw;
font-weight: 700;
}

#topmovarea .movie .tab_area li a{
width: 100%; height: 100%;
display: block;
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{
width: 100%; height: 100%;
display: block;
text-decoration: none;
background: #a1004c;
color: #eca9c9;
float: left;
}

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



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

bnr

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

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

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


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

introduction

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

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

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

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

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

#introCatch01a:before,#introCatch01b:before{
content:"";
display: block;
padding-top: 400%;
}

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

#introCatch02:before{
content:"";
display: block;
padding-top: 13.33%;
}

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

#introCatch03:before{
content:"";
display: block;
padding-top: 6.5%;
}


#introTxt{
width: 88%;
position: absolute;
top: 29%; left: 6%;
z-index: 3;
color: #fff;
font-size: 3.3vw;
line-height: 1.5em;
font-weight: 600;
letter-spacing: 0;
filter:drop-shadow(0 0 7px rgba(0, 0, 0, 0.5));
text-align: justify;
}

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

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


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


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

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

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

#photo02All:before{
content:"";
display: block;
padding-top: 19.26%;
}

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

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

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

footer

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

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

#sharearea{
background: url("../images/sharemark_p.png") no-repeat left;
background-size: 12px auto;
width: 250px;
text-align: right;
font-size: 14px;
font-family: "industry", sans-serif;
font-weight: 700;
font-style: normal;
margin: 5vw auto 0;
padding: 7px 0 5px;
}

#sharearea a{ color: #fe45a3;}

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

#hellomovie img{ width: 160px;}

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

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

#billing:before,#billing2:before{
content:"";
display: block;
padding-top: 39.7%;
}

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

#privacy a{ color: #a19fad;}

#copyright{
width: 100%;
font-size: 9px;
line-height: 1.4em;
text-align: center;
margin: 20px auto 0;
color: #a19fad;
font-weight: 600;
}