body {
background: #010101;
color: #fefefe;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 500;
font-style: normal;
width: 100%;
height:100%;
font-size: 13px;
line-height:2em;
margin: 0px;
letter-spacing: 1px;
}

h1,h2,h3,h4,h5{
text-indent:-999999px;
position:absolute;
}

#loader {
width: 150px;
height: 150px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}

#wrap{
width: 100%;
overflow-x: hidden;
position: relative;
}

a:hover {opacity:1;} 

.pc{ display: none;}

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

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

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
}

.linkLabel{
padding-top: 50px;
margin-top: -50px;
text-indent: -99999px;
line-height: 0;
}


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

main

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

#content{
width: 100%;
position: relative;
overflow-x: hidden;
padding: 50px 0 0;
}

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

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

#logo{
background: url("../images/top/logo.png") no-repeat center;
background-size: contain;
width: 68%; height: 30%;
position: absolute;
top: 60%; left: 16%;
z-index: 10;
text-indent:-999999px;
overflow: hidden;
animation: scaleanm 1.5s cubic-bezier(0,.64,.41,1) 1.5s forwards;
opacity: 0;
}

#roadshow{
background: url("../images/top/roadshow.png") no-repeat center;
background-size: contain;
width: 48%; height: 4.6%;
position: absolute;
top: 91%; left: 26%;
z-index: 10;
text-indent:-999999px;
overflow: hidden;
animation: fadeanm 2s ease 2s forwards;
opacity: 0;
}

#odlegend{
background: url("../images/top/continues.png") no-repeat center;
background-size: contain;
width: 95%; height: 1.8%;
position: absolute;
top: 1.8%; left: 2.5%;
margin-left: 30px;
z-index: 10;
text-indent:-999999px;
overflow: hidden;
}

@keyframes  mainImganm {
0% { transform: scale(1.5,1.5) translateX(-20%); opacity: 1;}
100% { transform: scale(1,1) translateX(0); opacity: 1;}
}

#main_img{
background: url("../images/top/main_sp.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
bottom: 0; left: 0;
z-index: 2;
animation: mainImganm 5s cubic-bezier(0,.64,.41,1) .2s forwards;
}


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

bnr

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

#bnrLall{
background-image: linear-gradient(143deg, #440005, #820707);
width: 100%;
padding: 15px 0;
text-align: center;
line-height: 0;
}

.bnrimg{
width: 86%;
margin: 8px auto;
}


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

movie

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

#topmovarea{
background: #fff url("../images/top/bg_keepout_w.jpg") no-repeat center fixed;
background-size: cover;
margin:0 auto;
padding: 6vw 0;
line-height: 0;
position: relative;
overflow: hidden;
z-index: 2;
border-bottom: 1px solid #292929;
}

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

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

#topmovarea .movie .inner iframe {
position: absolute;
top: 0; left: 0px;
width: 100%; height: 100%;
border: 3px solid #fefefe;
box-sizing: border-box;
}

#topmovarea .movie .tab_area {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0.6em auto 0;
justify-content: center;
overflow-y: auto;
}

#topmovarea .movie .tab_area ul{
width: 100%;
}

#topmovarea .movie .tab_area li{
color: #fff;
font-weight: 700;
letter-spacing: 0;
text-align: center;
background: linear-gradient(-20deg, #bf0017 0%, #850010 100%);
border-bottom: 2px solid #950000;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
text-decoration: none;
position: relative;
border-radius: 3px;
overflow: hidden;
}


#topmovarea .movie .tab_area li.wide2 {
font-size: 11px;
margin: 2px 0.5%;;
width: 49%; height: 38px;
padding: 0;
}

#topmovarea .movie .tab_area li.wide4 {
font-size: 12px;
margin: 2px 0.5%;;
width: 24%; height: 40px;
padding: 0;
}

#topmovarea .movie .tab_area li a{
width: 100%; height: 100%;
display: block;
text-decoration: none;
background: #850010;
color: #fefefe;
float: left;
opacity: 1;
}

#topmovarea .movie .tab_area li a:hover{ opacity: 1;}

#topmovarea .movie .tab_area li a.active{
background: #c30018;
color: #fefefe;
opacity: 1;
}

.movbtnM{
width: 100%;
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
z-index: 1;
line-height: 1.2em;
}

#topmovarea .movie .tab_area li.movtitle{
text-align: center;
font-size: 13px;
width: 100%; height: 30px;
line-height: 30px;
text-decoration: none;
background: #000;
color: #fff;
margin: 15px 0 10px;
font-weight: 800;
position: relative;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}


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

footer

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

footer{
background: #010101;
width: 100%;
padding: 30px 0 40px;
}

#odorucom{
width: 100%;
font-size: 15px;
line-height: 1em;
margin: 50px auto;
text-align: center;
font-family: "Cal Sans", sans-serif;
font-weight: 400;
font-style: normal;
color: #fff;
letter-spacing: 3px;
}

#sharearea{
background: url("../images/sns/share.png") no-repeat left;
background-size: auto 13px;
width: 270px;
margin: 0 auto;
font-size: 15px;
line-height: 1em;
text-align: right;
font-family: "Cal Sans", sans-serif;
font-weight: 400;
font-style: normal;
}

#sharearea a{ color: #d6000f; margin: 0 2px;}

#privacy{
width: 100%;
margin: 20px auto;
line-height: 1em;
font-size: 10px;
text-align: center;
opacity: 0.6;
color: #d6000f;
}

#privacy a{ color: #d6000f;}

#copyright{
width: 100%;
margin: 20px auto;
line-height: 1em;
font-size: 10px;
text-align: center;
opacity: 0.6;
color: #d6000f;
}

#btnpagetop{
background: #d6000f;
width: 50px; height: 50px;
line-height: 50px;
text-align: center;
position: fixed;
bottom: 0;
right: 0;
z-index: 15;
font-size: 15px;
transition: all .3s;
}

#btnpagetop a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
color: #000;
}

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

ef

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

.ef-fade {
opacity: 0;
transition: .8s linear 0.2s;
}

.ef-fade1 {
opacity: 0;
transform: scale(0.1,1);
transition: .6s ease 0.2s;
}

.ef-fade2 {
opacity: 0;
transform: scale(0.1,1);
transition: .6s ease 0.3s;
}

.ef-fade3 {
opacity: 0;
transform: scale(0.1,1);
transition: .6s ease 0.4s;
}

.ef-fade4 {
opacity: 0;
transform: scale(0.1,1);
transition: .6s ease 0.5s;
}

.ef-fade5 {
opacity: 0;
transform: scale(0.1,1);
transition: .6s ease 0.6s;
}

.ef-fade6 {
opacity: 0;
transform: scale(0.1,1);
transition: .6s ease 0.7s;
}


.ef-Left {
opacity: 0;
transform: translate(-8%, 0);
transition: .8s ease 0.15s;
}

.ef-Right {
opacity: 0;
transform: translate(8%, 0);
transition: .8s ease 0.15s;
}

.ef-Up {
opacity: 0;
transform: translate(0, 25%);
transition: .6s ease 0.1s;
}

.ef-scale {
opacity: 0;
transform: scale(1.2, 1.2);
transition: .8s ease 0.1s;
}


.fade {
opacity: 1.0;
transform: translate(0, 0);
transform: scale(1, 1);
}