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: 12px;
line-height:1.8em;
margin: 0px;
letter-spacing: 0;
}

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

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

.sp{ 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{
text-indent: -99999px;
line-height: 0;
}

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

main

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

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

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

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

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

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

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

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

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


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

bnr

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

#bnrLall{
background-image: linear-gradient(143deg, #440005, #820707);
width: 100%;
padding: 20px 0;
margin-left: 30px;
text-align: center;
line-height: 0;
display: flex;
justify-content: center;
}

.bnrimg{
width: 19%;
margin: 0 0.5%;
}


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

play movie

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

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

#topmovarea .movie {
width: 75%; min-width: 640px;
margin: 0 auto;
transform: translateX(30px);
}

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

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

#topmovarea .movie .tab_area li{
color: #fff;
font-weight: 800;
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: 14px;
margin: 0.2%;
width: 49.6%; height: 50px;
line-height: 1.5em;
}

#topmovarea .movie .tab_area li.wide4{
font-size: 13px;
margin: 0.2%;
width: 24.6%; height: 50px;
line-height: 1.5em;
}

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

#topmovarea .movie .tab_area li a.active{
background: #d6000f;
color: #fefefe;
}

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



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

footer

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

footer{
background: #000 url("../images/common/footer_new.png") no-repeat right -5% top 50%;
background-size: auto 150%;
width: 100%;
padding: 30px 0 40px 30px;
}

#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: 280px;
margin: 0 auto;
font-size: 17px;
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;
color: #d6000f;
}

#privacy a{ color: #d6000f;}


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

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

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

#btnpagetop:hover{
opacity: 0.7;
cursor: pointer;
}


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

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