html { scroll-behavior: smooth;}

body {
background: #000;
color: #fff;
font-family: heisei-kaku-gothic-std, sans-serif;
font-weight: 500;
font-style: normal;
width: 100%;
height:100%;
font-size:12px;
line-height:1.5em;
margin: 0px;
letter-spacing: 1px;
}


#wrap{
width: 100%; height: 100%;
min-width:1250px; min-height:640px;
position:relative;
}

.txtSpace{ letter-spacing: -0.5px;}
.txtSpace2{ letter-spacing: -2px;}


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

@keyframes  rightanm {
0% { transform: translateY(100px); opacity: 0;}
100% { transform: translateY(0); opacity: 1;}
}

@keyframes  leftanm {
0% { transform: translateY(-100px); opacity: 0;}
100% { transform: translateY(0); opacity: 1;}
}

@keyframes  leftSlide {
0% { transform: translateX(200px); opacity: 0;}
100% { transform: translateX(0); opacity: 1;}
}


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

logo

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

#logo{
background: url("../images/top3/logo_s.png") no-repeat center top;
background-size: contain;
width: 80%; height: 22%;
position: absolute;
top: 1%; left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: all 0.3s ease;
max-width: 400px;
}

#logo2{
background: url("../images/top3/logo_s2.png") no-repeat center top;
background-size: contain;
width: 80%; height: 22%;
position: absolute;
top: 1%; left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: all 0.3s ease;
max-width: 400px;
}

#logo3{
background: url("../images/top3/logo_s3.png") no-repeat center top;
background-size: contain;
width: 80%; height: 22%;
position: absolute;
top: 1%; left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: all 0.3s ease;
max-width: 400px;
}


#logo a,#logo2 a,#logo3 a{
width: 100%; height: 100%;
display: block;
}

#logo:hover,#logo2:hover,#logo3:hover{ opacity: 0.7;}


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

bnrL

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

#bnrLall{
width: 100%;
text-align: center;
position: absolute;
bottom: 130px; left: 0;
z-index: 10;
text-align: center;
line-height: 0;
}

#bnrLall img{ margin: 5px 0 0;}



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

menu

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

nav{
/*background: linear-gradient(to bottom, #200f07, #000);*/
background: linear-gradient(to bottom, #690006, #b2151e);
width: 28%; height: 100%;
min-width: 350px;
min-height: 650px;
position: fixed;
top: 0; left: 0;
z-index: 20;
}


#menu{
width: 100%;
position: absolute;
top: 26%; left: 0;
z-index: 20;
}

#menu ul li{
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 17px;
margin: 0 0 15px;
display: block;
line-height: 1em;
text-align: center;
width: 100%;
text-shadow:0px 0px 5px #ffc425;
}

#menu ul li.wide50{
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 17px;
margin: 0 0 15px;
display: block;
line-height: 1em;
text-align: center;
width: 50%;
text-shadow:0px 0px 5px #ffc425;
float: left;
}


#menu ul li a{color: #fffcd2; transition: all 0.3s ease; display: block; opacity: 1; width: 100%; height: 100%;text-decoration: none;}
#menu ul li a:hover{letter-spacing: 3px;; cursor: pointer;}



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

mvck

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

#mvck{
background: url("../images/btn_mvck.png") no-repeat;
background-size: contain;
width:170px; height:30px;
position:absolute;
bottom: 45px; left:50%;
margin-left: -85px;
z-index:30;
border: 1px solid #9C9C9C;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

#mvck:hover,#mvckClose:hover{opacity: 0.7;}

#mvckAll{
background: linear-gradient(to bottom, #690006, #850000);
width: 100%; height: 230px;
position: fixed;
bottom: 0; left: 0;
z-index: 55;
display: none;
border-top: 2px solid #D5B846;
box-sizing: border-box;
}

#mvckArea{
width: 900px;
position: absolute;
top: 0; left: 50%;
margin-left: -450px;
z-index: 10;
animation: fadeanm 1.5s ease .5s forwards;
opacity: 0;
}

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

#hellowmovie{
width: 100%; height: 36px;
position: absolute;
bottom: 0; ;empty-cells: 0;
z-index: 31;
text-align: center;
}

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

sns

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

#snsIcon{
width: 50px;
position: absolute;
bottom: 70px; left: 50%;
margin-left: -25px;
z-index: 10;
text-align: center;
}

#sharaTxt{
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 14px; line-height: 16px;
letter-spacing: 2px;
width: 150px; height: 20px;
text-align: center;
position: absolute;
bottom: 20px; left: 50%;
transform: translateX(-50%);
z-index: 10;
}

#snsIcon2{
width: 35px;
position: absolute;
bottom: 85px; left: 50%;
margin-left: -100px;
z-index: 10;
text-align: center;
}

#sharaTxt2{
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 14px; line-height: 16px;
letter-spacing: 2px;
width: 150px; height: 20px;
text-align: center;
position: absolute;
bottom: 90px; left: 50%;
margin-left: -60px;
z-index: 10;
}

#sharaTxt a,#sharaTxt2 a{color: #fff;}



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

footer

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

footer{
background: #6b747e;
width: 100%;
padding: 30px 0 50px;
}

#bnrSall{
width: 100%;
text-align: center;
}

#bnrSall img{ margin: 3px;}

#billing{
background: url("../images/top2/billing.png") no-repeat center;
background-size: contain;
width: 100%; height: 200px;
margin: 40px 0 0 0;
}

#mvtk-widgets-container{
padding: 30px 0 0;
margin: 0 auto;
}

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

main

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

#contentbg{
width: 100%; height: 100%;
position: fixed;
top: 0; right: 0;
z-index: 2;
background: linear-gradient(#221007, #000);
}

#content{
width: 72%;
position: absolute;
top: 0; right: 0;
z-index: 2;
}

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

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

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

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

#mainBg{
background: url("../images/top3/img_main03.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: scaleanm 5s ease .1s forwards;
}

#catch01{
background: url("../images/top3/catch01.png") no-repeat center top;
background-size: contain;
width: 4%; height: 34%;
position: absolute;
top: 12.5%; left: 63%;
z-index: 2;
animation: fadeanm 2s ease 1.5s forwards;
opacity: 0;
}

#catch02{
background: url("../images/top3/catch02.png") no-repeat center;
background-size: contain;
width: 100%; height: 3%;
position: absolute;
bottom: 1%; left: 0;
z-index: 2;
animation: fadeanm 2s ease 2.4s forwards;
opacity: 0;
}

#mainLogo{
background: url("../images/top2/logo.png") no-repeat center;
background-size: contain;
width: 47%; height: 34%;
position: absolute;
top: 55%; left: 25%;
z-index: 5;
animation: fadeanm 2s ease 2.1s forwards;
opacity: 0;
}

#mainRoadshow{
background: url("../images/top3/roadshow.png") no-repeat right bottom;
background-size: contain;
width: 17%; height: 10%;
position: absolute;
bottom: 4.7%; left: 43%;
z-index: 5;
animation: fadeanm 2s ease 2.7s forwards;
opacity: 0;
}

#mainRoadshow2{
background: url("../images/top3/roadshow2.png") no-repeat right bottom;
background-size: contain;
width: 34%; height: 8%;
position: absolute;
bottom: 6.5%; left: 33%;
z-index: 5;
animation: fadeanm 2s ease 2.7s forwards;
opacity: 0;
}

#mainRoadshow3{
background: url("../images/top3/roadshow3.png") no-repeat right bottom;
background-size: contain;
width: 60%; height: 12%;
position: absolute;
bottom: 6.5%; left: 20%;
z-index: 5;
animation: fadeanm 2s ease 2.7s forwards;
opacity: 0;
}


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

trailer

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

#trailer{
/*background-color: #261e1a;*/
background-color: #fff;
width: 100%;
padding: 50px 0;
line-height: 0;
}

#trailerM{
width: 90%;
margin: 0 auto;
text-align: center;
padding: 0 0 50px;
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 20px;
letter-spacing: 2px;
/*color: #fff;*/
color: #664B29;
}


.movarea{
width:880px; height: 495px;
margin:0 auto;
padding: 0;
}

.videoWrapper {
position: relative;
padding-bottom: 52.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}

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

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

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

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

#topmovarea .movie .inner iframe {
width: 880px;
height: 495px;
}

#topmovarea .movie .tab_area {
width: 880px;
display: flex;
flex-wrap: wrap;
margin-: 0 auto;
border-top: 2px solid #fff;
}

#topmovarea .movie .tab_area li {
text-align: center;
width: 218px; height: 40px;
line-height: 40px;
font-size: 13px;
font-weight: 500;
border: 1px solid #fff;
border-top: 2px solid #fff;
letter-spacing: 0;
}

#topmovarea .movie .tab_area li.block2 {
width: 438px; height: 40px;
}


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

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



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

introduction

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


#intro{
background: #fff url("../images/intro_story/bg_intro.jpg") no-repeat center bottom;
background-size: 100% auto;
width: 100%;
position: relative;
overflow: hidden;
}

#intro:before{
content:"";
display: block;
padding-top: 70%;
}

#introAll{
width: 100%;
position: absolute;
top: 15px; left: 0;
}

#introCatch{
background: url("../images/intro_catch.png") no-repeat center;
background-size: contain;
width: 80%;
margin: 0 auto;
position: relative;
}

#introCatch:before{
content:"";
display: block;
padding-top: 20%;
}

#introM{
width: 85%;
margin: 0 auto;
text-align: center;
padding: 40px 0;
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 1.2vw;
letter-spacing: 2px;
color: #000;
}

#introMM{
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
width: 100%;
font-size: 1.5vw;
font-weight: 800;
line-height: 1.5em;
padding: 0 0 .8vw;
text-align: center;
color: #A10002;
}

#introTxt{
width: 100%;
margin: 0 auto;
line-height: 1.9em;
font-size: .9vw;
color: #000;
text-align: center;
}



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

story

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

#storyAll{
background: url("../images/intro_story/bg_story.jpg") no-repeat center;
background-size: cover;
width: 100%; padding: 50px 0;
}

#storyM{
width: 85%;
margin: 0 auto;
text-align: center;
padding: 0 0 40px;
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 1.2vw;
letter-spacing: 2px;
color: #fff;
}

#storyTxt{
width: 85%; max-width: 1200px;
margin: 0 auto;
line-height: 2em;
font-size: .9vw;
text-align: center;
}

@keyframes  storyscroll{
0% { background-position: 0;}
100% { background-position: -3371px;}
}

#storyImg{
background: url("../images/intro_story/img_story.jpg") repeat-x left;
background-size: auto 100%;
width: 100%; height: 180px;
animation: storyscroll 70s linear infinite;
}

@keyframes  storyscroll1{
0% { background-position: 0;}
100% { background-position: -1685px;}
}

#storyImg01{
background: url("../images/intro_story/img01.jpg") repeat-x left;
background-size: auto 100%;
width: 100%; height: 180px;
animation: storyscroll1 40s linear infinite;
}

@keyframes  storyscroll2{
0% { background-position: 0;}
100% { background-position: 1685px;}
}

#storyImg02{
background: url("../images/intro_story/img02.jpg") repeat-x right;
background-size: auto 100%;
width: 100%; height: 180px;
animation: storyscroll2 40s linear infinite;
}


#nazoAll{
background: #000;
width: 100%; padding: 50px 0;
}

#nazoImg{
background: url("../images/intro_story/img03.png") no-repeat;
background-size: contain;
width: 85%; max-width: 1200px;
margin: 0 auto;
}

#nazoImg:before{
content:"";
display: block;
padding-top: 18%;
}



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

character

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

#charaAll{
background: url("../images/character/bg.jpg") no-repeat center;
background-size: cover;
width: 100%; padding: 50px 0;
}

#charaAll2{
background: url("../images/character/bg2.jpg") no-repeat center;
background-size: cover;
width: 100%; padding: 0;
position: relative;
overflow: hidden;
}

#charaAll2:before{
content:"";
display: block;
padding-top: 61%;
}

#charaM{
width: 85%;
margin: 0 auto;
text-align: center;
padding: 0 0 40px;
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 1.2vw;
letter-spacing: 2px;
color: #fff;
}

#charaM2{
background: url("../images/character/title.png") no-repeat top left;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
text-indent: -99999px;
}

#charaImg{
background: url("../images/character/img_chara.png") no-repeat center;
background-size: contain;
width: 90%; max-width: 1300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

#charaImg:before{
content:"";
display: block;
padding-top: 58%;
}

#charaImg2{
background: url("../images/character/img_chara2.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
margin: 0 auto;
position: absolute;
top: 0; left: 0;
z-index: 1;
}


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

production note

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

#pronoteAll{
background: #fff;
width: 100%; padding: 0;
position: relative;
overflow: hidden;
}

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

@keyframes  pronotescroll{
0% { background-position: 0;}
100% { background-position: 2584px;}
}

#pronoteImg{
background: url("../images/pronotes/img_pronote.jpg") repeat-x left;
background-size: auto 100%;
width: 100%; height: 200px;
animation: pronotescroll 50s linear infinite;
}

#pronoteM{
width: 100%;
position: absolute;
top: 8%; left: 0;
z-index: 1;
text-align: center;
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 1.2vw;
letter-spacing: 2px;
color: #78020a;
}


#pronoteBtn{
width: 85%;
text-align:right;
position:absolute;
top: 17%; left:7.5%;
z-index:5;
}

#pronoteBtn ul{
width: 100%;
margin: 0; 
padding: 0; 
list-style: none;
}

#pronoteBtn li{
background: url("../sp/images/pronotes/pronote_bg.png") repeat-x;
background-size: auto 100%;
list-style: none outside none;
width: 16.25%;
margin: 0 0.2% 0;
float: left;
padding: 10px 0;
cursor: pointer;
transition: all  0.3s ease;
box-sizing: border-box;
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 16px;
color: #fff641;
text-align: center;
}

#pronoteBtn li a{ width: 100%; height: 100%; display: block;color: #fff641;}
#pronoteBtn li:hover{ opacity: 0.7;}


#pronoteImgAll01,#pronoteImgAll02,#pronoteImgAll03,#pronoteImgAll04,#pronoteImgAll05,#pronoteImgAll06{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

.pronoteName{
width: 85%; color: #850300;
position: absolute;
top: 29%; left: 7.5%;
z-index: 2;
font-size: 1.2vw;
font-weight: 700;
}

.pronoteImgAll{
width: 85%; height: 55%;
position: absolute;
top: 34%; left: 7.5%;
z-index: 3;
}

.pronoteTxt{
width: 97%;
color: #504324;
line-height: 1.5vw;
font-size: .9vw;
text-align: justify;
}
.pronoteselectAll{
width: 85%;
position:absolute;
top: 17.2%; left:7.5%;
margin-top: 40px;
z-index:5;
}

#pronoteselect01,#pronoteselect02,#pronoteselect03,#pronoteselect04,#pronoteselect05,#pronoteselect06{
background-color: #CF0003;
width: 16.25%; height: 5px;
position:absolute;
}
#pronoteselect01{left:0.2%;}
#pronoteselect02{left:16.86%;}
#pronoteselect03{left:33.5%;}
#pronoteselect04{left:50.14%;}
#pronoteselect05{left:66.8%;}
#pronoteselect06{left:83.44%;}

.pronoteImg01{
width: 25%; float: right;
margin: 0 0 15px 30px;
pointer-events: none;
}

.pronoteImg02{
width: 50%; float: right;
margin: 0 0 15px 30px;
pointer-events: none;
}

.pronoteImg03{
width: 39%; float: right;
margin: 0 0 15px 30px;
pointer-events: none;
}

.pronoteImg04{
width: 35%; float: right;
margin: 0 0 15px 30px;
pointer-events: none;
}

.pronoteImg04b{
width: 22%; float: left;
margin: 15px 30px 15px 0;
pointer-events: none;
}


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

comment

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

#comment{
background-color: #fff;
width: 100%;
padding: 50px 0;
line-height: 0;
}

#commentM{
width: 90%;
margin: 0 auto;
text-align: center;
padding: 0 0 50px;
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
font-size: 1.2vw;
letter-spacing: 2px;
color: #664B29;
}

#commentTxtAll{
width: 85%; height: 500px;
margin: 0 auto;
}

#commentTxtAll2{
width: 85%;
margin: 0 auto;
}

.commentBox{
width: 100%;
margin: 0 0 40px;
}

.commentBox2{
width: 100%;
padding: 40px 0 0 0;
margin: 0 0 20px;
border-top: 2px dotted #934E1C;
}


.commentNM{
font-weight: 700;
font-size: 150%;
line-height: 1.8vw;
color: #7D3910;
}

.commentTxt{
width: 100%;
color: #1E1E1E;
line-height: 1.5vw;
font-size: .9vw;
}

.commentImg{
width: 33%;
float: right;
margin: 0 0 10px 10px;
pointer-events: none;
}


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

ef

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


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


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