body {
background: #fff;
color: #222222;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
width: 100%;
height:100%;
font-size:12px;
line-height:1.5em;
margin: 0px;
}


#wrap{
width: 100%;
}

#contentAll{
width: 100%;
position: relative;
overflow: hidden;
padding: 90px 0 0 0;
}


#mainAll{
background: url("../images/bg_sp.jpg") no-repeat center;
background-size: cover;
width: 100%;
letter-spacing: 0;
}


#main{
background: url("../images/top/main_sp.jpg") no-repeat center;
background-size: 100% 100%;
width: 100%;
margin: 0 auto;
position: relative;
}

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

#main2{
background: url("../images/top/main_sp2.jpg") no-repeat center;
background-size: 100% 100%;
width: 100%;
margin: 0 auto;
position: relative;
}

#main2:before {
content:"";
display: block;
padding-top: 146%;
}



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

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


#logo{
background: url("../images/top/logo_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
text-indent: -99999px;
animation: fadeScaleanm 2s ease .8s forwards;
opacity: 0;
}

#roadshow{
background: url("../images/top/roadshow_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
animation: fadeanm 1s ease 1.5s forwards;
opacity: 0;
text-indent: -9999px;
}

#roadshow2{
background: url("../images/top/roadshow2_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
animation: fadeanm 1s ease 1.5s forwards;
opacity: 0;
text-indent: -9999px;
}

#roadshow3{
background: url("../images/bddvd/bnr_bddvd_sp.png") no-repeat center;
background-size: contain;
width: 300px; height:300px;
position: absolute;
bottom: 22px; right: 7px;
z-index: 10;
text-indent: -9999px;
}

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


#catch{
background: url("../images/top/catch_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
animation: 2s fadeanm 1.5s forwards;
opacity: 0;
text-indent: -9999px;
}

#bnrOfficialall{
width: 100%; height: 180px;
text-align: center;
padding: 0 0 ;
letter-spacing: 0;
overflow: hidden;
}

.bnrAnv50{
background: #ecece6 url("../images/top/anniversary50.png") no-repeat center;
background-size: auto 100px;
width: 100%; height: 100px;
margin: 0;
text-indent: -99999px;
mix-blend-mode: multiply;
}

.bnrOfficialTwitter{
background: #00aced url("../images/bnr/bnr_twitter.png") no-repeat center;
background-size: contain;
width: 50%; height: 80px;
float: left;
text-indent: -99999px;
}

.bnrOfficialImg{
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight: 600;
background: url("../images/bnr/bnr_official.png") no-repeat center;
background-size: cover;
width: 50%; height: 80px;
line-height: 80px;
font-size: 22px;
color: #fff;
float: left;
}

.bnrOfficialTwitter a,.bnrOfficialImg a{
width: 100%; height: 100%;
display: block;
color: #fff;
text-decoration: none;
}


.pc{ display: none;}
.sp { display:block; }


.pagelink,#trailer{
padding-top: 90px;
margin-top: -90px;
}

#btnpagetop{
background-color: #5e5b57;
width:100px; height: 100px;
line-height: 100px;
text-align: center;
position: fixed;
bottom: 0;
right: 0;
z-index: 5;
font-size: 20px;
}

#btnpagetop a{font-size: 25px;}


#homeBtn{
font-family: itc-benguiat, serif;
font-weight: 400;
font-style: normal;
width:100%;
margin:0 auto;
line-height:3em;
font-size: 38px;
text-align: center;
}

#homeBtn a{ color: #dc1202; text-decoration: none;}


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

header

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

#head {
background: #fff;
width: 100%; height: 90px;
min-width: 640px;
position: fixed;
top: 0; left: 0;
z-index: 40;
}

#wbLogo{
background: url("../images/wb.png") no-repeat center;
background-size: 80px auto;
width: 90px; height: 90px;
position: absolute;
top: 0; left: 0;
z-index: 10;
}

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

#logoS{
background: url("../images/logo2.png") no-repeat center;
background-size: contain;
width: 300px; height: 70px;
margin: 0 auto;
padding: 0;
text-indent: -99999px;
}

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



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

menu

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


#menuBtn{
background: #908f8e url("../images/nav/menuBtn.png") center;
background-size:80px auto;
width:90px; height:90px;
cursor:pointer;
position: fixed;
top:0; right:0;
z-index:54;
}

#menuBtn2{
background: #5c5955 url("../images/nav/menuBtn2.png") center;
background-size:80px auto;
width:90px; height:90px;
cursor:pointer;
position: fixed;
top:0; right:0;
z-index:55;
display:none;
}


nav {
background: linear-gradient(to right, #4e4b48, #5c5955);
width: 100%;
position: fixed;
top: 90px;
left: 0;
z-index: 50;
}

.menuAll{width: 100%; display: none;}
.menuAll2{display: none;}

.menu{
padding: 0px;
overflow: hidden;
position: relative;
}

.menu ul {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}

.menu ul li {
width: 100%; height: 90px;
margin: 0;
padding: 0;
position: relative;
line-height:90px;
font-size: 30px;
letter-spacing: 2px;
font-family: heisei-mincho-std, serif;
font-weight: 700;
font-style: normal;
text-align: center;
border-bottom: 2px solid #fff;
}

.menu ul li.btnhome{font-family: itc-benguiat, serif; font-weight: 400; font-style: normal;}
.menu ul li a{ width: 100%; height: 100%; color: #fff; text-decoration: none; display: block;}



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

trailer

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

#trailerAll{
width: 100%;
padding: 50px 0;
}

#trailerTitle,#newsTitle{
width: 100%;
font-size: 20px;
line-height: 1em;
text-align: center;
color: #f20700;
font-family: classica-pro, serif;
font-weight: 400;
font-style: normal;
}

/*
#topmovarea{
width: 85%;
margin:0 auto;
padding:0;
line-height: 0;
}

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

#topmovarea .movie .inner {
position: relative;
width: 100%;
overflow: hidden;
margin: 0 auto;
}
*/



#topmovarea{
width:560px;
margin:0 auto;
padding:0;
line-height: 0;
}

#topmovarea .movie {
width: 560px;
margin: 0 auto;
}

#topmovarea .movie .inner {
position: relative;
width: 560px;
height: 315px;
overflow: hidden;
margin: 0 auto;
}

#topmovarea .movie .inner iframe {
width: 560px;
height: 315px;
}



#topmovarea .movie .tab_area {
width: 560px;
display: flex;
flex-wrap: wrap;
margin-: 0 auto;
}

#topmovarea .movie .tab_area li {
width: 278px; height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
margin: 0;
border: 1px solid #fff;
border-top: 2px solid #fff;
}

#topmovarea .movie .tab_area li.wide2 {
width: 278px; height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
margin: 0;
border: 1px solid #fff;
border-top: 2px solid #fff;
}

#topmovarea .movie .tab_area li.wide3 {
width: 184px; height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
margin: 0;
border: 1px solid #fff;
border-top: 2px solid #fff;
}


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

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


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

news

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

#news{
background: linear-gradient(to right,#4e4b48, #5b5855, #4e4b48); 
width: 100%;
padding: 40px 0;
}

#newsM{
font-family: itc-benguiat, serif;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 34px;
letter-spacing: 1px;
width: 100%;
line-height: 1.7em;
color: #fff;
}

.newsBlock{
width: 90%;
margin: 20px auto 0;
padding: 0;
font-size: 18px; line-height: 1.3em;
color: #fff;
letter-spacing: 1px;
text-align: center;
}

.newsBlock a{
color: #fff;
text-decoration: underline;
}

.newsDate{
font-family: itc-benguiat, serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
}


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

share

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

#sharaTxt{
width: 100%; height: 28px;
text-align: center;
letter-spacing: 1px;
font-size: 28px;
margin: 0 auto 50px;
color: #5e5b57;
}

#sharaTxt a{
font-family: itc-benguiat, serif;
font-weight: 400;
font-style: normal;
color: #5e5b57;
text-decoration: none;
}

#sharaTxt a:hover{
opacity: 0.7;
}


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

credit

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

#billingAll{
background: url("../images/bg_sp.jpg") no-repeat center;
background-size: cover;
width: 100%; line-height: 0;
padding: 20px 0;
}

#billing{
background: url("../images/top/billing.png") no-repeat center;
background-size: contain;
width: 100%; height: 260px;
margin: 0 auto;
text-indent: -99999px;
}


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

footer

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

footer{
background-color: #fff;
width: 100%;
position: relative;
padding: 0 0 40px;
/*border-top: 1px solid #bec9db;*/
}

#bnrMvck{
width: 100%;height: 84px;
text-align: center;
letter-spacing: 1px;
line-height: 0;
font-size: 16px;
margin: 50px auto 80px;
color: #5e5b57;
}

#bnrMvck img{margin: 0 6px;}


#bnrSall{
width: 100%;
padding: 30px 0;
text-align: center;
line-height: 0;
}

#bnrSall img{margin: 4px;}

#snsofficial{
width: 100%; height: 70px;
text-align: center;
margin: 0 auto 10px;
}

#snsofficial img{
transition: all 0.3s ease;
margin: 0 2px;
}

#wb{
background: url("../images/wb.png") no-repeat center;
background-size: contain;
width: 100px; height: 100px;
transition: all 0.3s ease;
margin: 60px auto 20px;
}

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

#privacy{
width: 100%;
line-height: 1em;
font-size: 18px;
text-align: center;
margin: 0 auto;
color: #788698;
padding: 30px 0;
}

#privacy a{
text-decoration: none;
color: #788698;
transition: all 0.3s ease;
}

#privacy a:hover,#wb:hover{opacity: 0.7;}

#copyright{
width: 100%;
text-align: center;
font-size: 18px;
margin: 0 0 80px;
color: #788698;
}


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

ef

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


.ef-fade {
opacity: 0;
transition: 1.5s ease 0.1s;
}


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