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

#wrap{
width: 100%; height: 100%;
min-width:1250px;
min-height:720px;
margin:0 auto;
position:relative;
overflow: hidden;
}

.no-wrap { display: inline-block;}
.no-space{ letter-spacing: -2px;}
.fontS{ font-size: 80%;}

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

main

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

#logo{
background: url("../images/nav2/logo_s.png") no-repeat center;
background-size: contain;
width: 280px; height: 75px;
position:absolute;
bottom: 10px; left: 0;
z-index:25;
transition: all 0.3s ease;
}

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

#logo:hover{ opacity: 1; transform: scale(1.05,1.05);}

#copyrigt{
background: url("../images/top2/copyright.png") no-repeat left bottom;
background-size: contain;
width: 250px; height: 10px;
position: absolute;
bottom:5px; left:5px;
z-index:25;
}


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

menu

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

nav{
background: url("../images/nav2/menu_bg.png") repeat-x center;
background-size: auto 100%;
width: 100%; height: 60px;
position: absolute;
bottom: 0; left: 0;
z-index: 20;
overflow: hidden;
}

#menu {
width: 978px;
height: 60px;
overflow: hidden;
position: absolute;
bottom: 0; right: 0;
}

#menu ul {
list-style: none outside none;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
}

#menu ul li {
float: left;
margin: 0;
padding: 0 15px;
position: relative;
line-height:0;
left: -50%;
}

#menu ul li a img{transition: all 0.3s ease;}
#menu ul li a img:hover{ opacity: 1; transform: scale(1.05,1.05);}



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

introduction

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

@keyframes fadeanm {
from { opacity: 0; }
to   { opacity: 1; }
}

#introTitle{
background: url("../images/intro_story/intro_title.png") no-repeat center top;
background-size: contain;
width:42%; height:15%;
position:absolute;
top:33%; left:29%;
z-index:5;
animation: 1.5s fadeanm 1.2s ease forwards;
opacity: 0;
}

#introCatch{
background: url("../images/intro_story/intro_catch.png") no-repeat center;
background-size: contain;
width:60%; height:19%;
position:absolute;
top:72%; left:20%;
z-index:5;
animation: 1.5s fadeanm 2s ease forwards;
opacity: 0;
}


#introImg01{
background: url("../images/intro_story/intro_img01.jpg") no-repeat center;
background-size: cover;
width:50%; height:38%;
position:absolute;
top:0; left:0;
z-index:2;
}

#introImg02{
background: url("../images/intro_story/intro_img02.jpg") no-repeat center;
background-size: cover;
width:50%; height:38%;
position:absolute;
top:0; right:0;
z-index:2;
}

#introImg03{
background: url("../images/intro_story/intro_img03.jpg") no-repeat center;
background-size: cover;
width:100%; height:63%;
position:absolute;
top:36%; right:0;
z-index:1;
}

#introTxtAll{
width: 70%; height: 21%;
position:absolute;
top: 50%; left: 15%;
z-index:10;
overflow: hidden;
animation: 1.5s fadeanm 1.6s ease forwards;
opacity: 0;
}

#introTxt{
width: 99%;
font-size: 1.6vh;
line-height: 2em;
letter-spacing: 2px;
text-align: justify;
}


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

story

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

#storyimg01{
background: url("../images/intro_story/story_img01.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 65%;
position: absolute;
top: -3%; left: 0;
z-index: 1;
}

#storyimg02{
background: url("../images/intro_story/story_img02b.jpg") no-repeat center;
background-size: cover;
position: absolute;
bottom: 60px; left: 0;
z-index: 3;
}

#storyimg04{
background: url("../images/intro_story/story_img04b.jpg") no-repeat center;
background-size: cover;
position: absolute;
bottom: 60px; right: 0;
z-index: 4;
}


@keyframes storyanm {
from { background-position: 0 0; }
to { background-position: -1850px 0; }
}

@keyframes storyanm2 {
from { background-position: 0 0; }
to { background-position: -2413px 0; }
}

@keyframes storyanm3 {
from { background-position: 0 0; }
to { background-position: -2896px 0; }
}

@keyframes storyanm4 {
from { background-position: 0 0; }
to { background-position: -3379px 0; }
}

#storyimg03{
background: url("../images/intro_story/story_img03b.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
position: absolute;
bottom: 60px; left: 0;
z-index: 2;
animation: storyanm 40s linear infinite;
}


@media screen and (max-height : 850px){
#storyimg02{ width: 230px; height: 230px;}
#storyimg03{ height: 230px; animation: storyanm 40s linear infinite;}
#storyimg04{ width: 230px; height: 230px;}
#storyCatch{ bottom: 270px;}
}

@media screen and (min-height : 851px){
#storyimg02{ width: 300px; height: 300px;}
#storyimg03{ height: 300px; animation: storyanm2 40s linear infinite;}
#storyimg04{ width: 300px; height: 300px;}
#storyCatch{ bottom: 330px;}
}

@media screen and (min-height : 1080px){
#storyimg02{ width: 360px; height: 360px;}
#storyimg03{ height: 360px; animation: storyanm3 50s linear infinite;}
#storyimg04{ width: 360px; height: 360px;}
#storyCatch{ bottom: 380px;}
}

@media screen and (min-height : 1250px){
#storyimg02{ width: 420px; height: 420px;}
#storyimg03{ height: 420px; animation: storyanm4 50s linear infinite;}
#storyimg04{ width: 420px; height: 420px;}
#storyCatch{ bottom: 420px;}
}

#storyimgTxt{
background: url("../images/intro_story/story_txt.png") no-repeat center;
background-size: 100% 100%;
width: 100%; height: 59%;
position: absolute;
top: 0; left: 0;
z-index: 5;
animation: 2.5s fadeanm 2.4s ease forwards;
opacity: 0;
}

#storyTitle{
background: url("../images/intro_story/story_title.png") no-repeat center;
background-size: contain;
width: 100%; height: 5%;
position: absolute;
top: 27%; left: 0;
z-index: 10;
animation: 1.5s fadeanm 1.2s ease forwards;
opacity: 0;
}

#storyCatch{
background: url("../images/intro_story/story_m.png") no-repeat center;
background-size: contain;
width: 70%; height: 10%;
position:absolute;
left: 15%;
z-index:10;
overflow: hidden;
animation: 1.5s fadeanm 2s ease forwards;
opacity: 0;
}


#storyTxtAll{
width: 70%; height: 19%;
position:absolute;
bottom: 47%; left: 15%;
z-index:10;
color: #d7c28d;
font-size: 1.6vh;
line-height: 1.9em;
letter-spacing: 2px;
text-align: justify;
animation: 1.5s fadeanm 1.6s ease forwards;
opacity: 0;
}


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

cast

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

#castbg{
background: url("../images/about/bg_white.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#casttitle{
background: url("../images/about/cast_title.png") no-repeat center;
background-size: contain;
width: 34%; height: 5%;
position: absolute;
top: 5%; left: 33%;
z-index: 10;
}


@keyframes ribbonanm {
from { transform: scale(1.2,1.2) translateY(-40px) rotateZ(10deg);}
to   { transform: scale(1,1) translateY(0) rotateZ(0deg);}
}

@keyframes ribbonanm2 {
from { transform: scale(1.2,1.2) translateY(50px) rotateZ(-10deg);}
to   { transform: scale(1,1) translateY(0) rotateZ(0deg);}
}



#castRibon01{
background: url("../images/about/cast_ribon01.png") no-repeat center top;
background-size: contain;
width: 58%; height: 30%;
position: absolute;
top: 0; right: 36%;
z-index: 2;
animation: 4s ribbonanm .1s ease forwards;
}

#castRibon02{
background: url("../images/about/cast_ribon02.png") no-repeat right bottom;
background-size: contain;
width: 42%; height: 33%;
position: absolute;
bottom: 50px; right: 0;
z-index: 2;
animation: 4s ribbonanm2 .3s ease forwards;
}

#castBtn{
width: 1192px; height: 100px;
text-align:right;
position:absolute;
bottom:90px; left:50%;
transform: translateX(-50%);
z-index:5;
}

#castBtn ul{
height: 100px;
margin: 0; 
padding: 0; 
list-style: none;
}

#castBtn li{
list-style: none outside none;
width:52px; height:85px;
margin: 15px 2px 0;
bottom: 0;
line-height:0;
float: left;
cursor: pointer;
transition: all  0.3s ease;
box-sizing: border-box;
}

#castBtn li:hover{ opacity: 0.5;}

#castBtn li.cast01{ background: url("../images/about/cast_btn01.jpg") no-repeat center; background-size: cover; width: 60px; height: 100px; margin: 0 2px 0;}
#castBtn li.cast02{ background: url("../images/about/cast_btn02.jpg") no-repeat center; background-size: cover; width: 60px; height: 100px; margin: 0 2px 0;}

#castBtn li.cast03all,#castBtn li.cast04all,#castBtn li.cast05all,#castBtn li.cast06all,#castBtn li.cast07all{
width: 164px; height: 85px;
margin: 15px 2px 0;
position: relative;
overflow: hidden;
}

.cast03btn{
background: url("../images/about/cast_btn03.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 0; z-index: 1;
}

.cast04btn{
background: url("../images/about/cast_btn04.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 56px; z-index: 1;
}

.cast05btn{
background: url("../images/about/cast_btn05.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; right: 0; z-index: 1;
}

.cast06btn{
background: url("../images/about/cast_btn06.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 0; z-index: 1;
}

.cast07btn{
background: url("../images/about/cast_btn07.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 56px; z-index: 1;
}

.cast08btn{
background: url("../images/about/cast_btn08.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; right: 0; z-index: 1;
}

.cast09btn{
background: url("../images/about/cast_btn09.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 0; z-index: 1;
}

.cast10btn{
background: url("../images/about/cast_btn10.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 56px; z-index: 1;
}

.cast11btn{
background: url("../images/about/cast_btn11.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; right: 0; z-index: 1;
}

.cast12btn{
background: url("../images/about/cast_btn12.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 0; z-index: 1;
}

.cast13btn{
background: url("../images/about/cast_btn13.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 56px; z-index: 1;
}

.cast14btn{
background: url("../images/about/cast_btn14.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; right: 0; z-index: 1;
}

.cast15btn{
background: url("../images/about/cast_btn15.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 0; z-index: 1;
}

.cast16btn{
background: url("../images/about/cast_btn16.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 56px; z-index: 1;
}

.cast17btn{
background: url("../images/about/cast_btn17.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; right: 0; z-index: 1;
}

#castBtn li.cast08all,#castBtn li.cast09all{
width: 108px; height: 85px;
margin: 15px 2px 0;
position: relative;
overflow: hidden;
}

.cast18btn{
background: url("../images/about/cast_btn18.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 0; z-index: 1;
}

.cast19btn{
background: url("../images/about/cast_btn19.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; right: 0; z-index: 1;
}

.cast20btn{
background: url("../images/about/cast_btn20.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; left: 0; z-index: 1;
}

.cast21btn{
background: url("../images/about/cast_btn21.jpg") no-repeat center; background-size: cover;
width:52px; height:85px; position: absolute; top: 0; right: 0; z-index: 1;
}

.castBtnSelect{
width: 1192px; height:4px;
text-align:right;
position:absolute;
bottom:175px; left:50%;
transform: translateX(-50%);
z-index:10;
}

.castBtnSelect01{width: 60px; left: 2px; margin-top: -15px;}
.castBtnSelect02{width: 60px; left: 66px; margin-top: -15px;}
.castBtnSelect03{width: 52px; left: 130px;}
.castBtnSelect04{width: 52px; left: 186px;}
.castBtnSelect05{width: 52px; left: 242px;}
.castBtnSelect06{width: 52px; left: 298px;}
.castBtnSelect07{width: 52px; left: 354px;}
.castBtnSelect08{width: 52px; left: 410px;}
.castBtnSelect09{width: 52px; left: 466px;}
.castBtnSelect10{width: 52px; left: 522px;}
.castBtnSelect11{width: 52px; left: 578px;}
.castBtnSelect12{width: 52px; left: 634px;}
.castBtnSelect13{width: 52px; left: 690px;}
.castBtnSelect14{width: 52px; left: 746px;}
.castBtnSelect15{width: 52px; left: 802px;}
.castBtnSelect16{width: 52px; left: 858px;}
.castBtnSelect17{width: 52px; left: 914px;}
.castBtnSelect18{width: 52px; left: 970px;}
.castBtnSelect19{width: 52px; left: 1026px;}
.castBtnSelect20{width: 52px; left: 1082px;}
.castBtnSelect21{width: 52px; left: 1138px;}
.castBtnSelect01,.castBtnSelect02,.castBtnSelect03,.castBtnSelect04,.castBtnSelect05,.castBtnSelect06,.castBtnSelect07,.castBtnSelect08,.castBtnSelect09,.castBtnSelect10,.castBtnSelect11,.castBtnSelect12,.castBtnSelect13,.castBtnSelect14,.castBtnSelect15,.castBtnSelect16,.castBtnSelect17,.castBtnSelect18,.castBtnSelect19,.castBtnSelect20,.castBtnSelect21{
background: url("../images/nav2/select.png") no-repeat center top;
background-size: 100% auto;
height: 4px;
position: absolute;
top: 0;
z-index: 5;
}


#castImgAll01,#castImgAll02,#castImgAll03,#castImgAll04,#castImgAll05,#castImgAll06,#castImgAll07,#castImgAll08,#castImgAll09{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 3;
}

.castImgAll{
background-color: #210000;
width: 33%;  height: 53%;
position: absolute;
top: 16%; right: 55%;
z-index: 1;
overflow: hidden;
}

.castImgFrame{
background: url("../images/about/cast_frame01.png") no-repeat right;
background-size: 100% 100%;
width: 100%; height: 100%;
position: absolute;
top: 0; right: 0;
z-index: 2;
}

.castAllB{
width: 86%; height: 85%;
position: absolute;
top: 15%; left: 50%;
transform: translateX(-50%);
z-index: 1;
}

.castAllC{
width: 64%; height: 85%;
position: absolute;
top: 15%; left: 50%;
transform: translateX(-50%);
z-index: 1;
}

.castBox01{ width: 30%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.castBox02{ width: 30%; height: 100%; position: absolute; top: 0; left: 35%; z-index: 2;}
.castBox03{ width: 30%; height: 100%; position: absolute; top: 0; right: 0; z-index: 2; }

.castBox01b{ width: 45%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.castBox02b{ width: 45%; height: 100%; position: absolute; top: 0; right: 0; z-index: 2; }

.castImgAll2{
background-color: #210000;
width: 100%; height: 29%;
position: relative;
overflow: hidden;
}

.castImgFrame2{
background: url("../images/about/cast_frame02.png") no-repeat right;
background-size: 100% 100%;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
}


@keyframes castscaleanm {
from { opacity: 0; transform: scale(1.2,1.2);}
to   { opacity: 1; transform: scale(1,1);}
}

.castImg01{ background: url("../images/about/cast_img01.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg02{ background: url("../images/about/cast_img02.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg03{ background: url("../images/about/cast_img03.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg04{ background: url("../images/about/cast_img04.jpg") no-repeat center;animation: 1.5s castscaleanm .4s cubic-bezier(0,.64,.41,1) forwards;}
.castImg05{ background: url("../images/about/cast_img05.jpg") no-repeat center;animation: 1.5s castscaleanm .6s cubic-bezier(0,.64,.41,1) forwards;}
.castImg06{ background: url("../images/about/cast_img06.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg07{ background: url("../images/about/cast_img07.jpg") no-repeat center;animation: 1.5s castscaleanm .4s cubic-bezier(0,.64,.41,1) forwards;}
.castImg08{ background: url("../images/about/cast_img08.jpg") no-repeat center;animation: 1.5s castscaleanm .6s cubic-bezier(0,.64,.41,1) forwards;}
.castImg09{ background: url("../images/about/cast_img09.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg10{ background: url("../images/about/cast_img10.jpg") no-repeat center;animation: 1.5s castscaleanm .4s cubic-bezier(0,.64,.41,1) forwards;}
.castImg11{ background: url("../images/about/cast_img11.jpg") no-repeat center;animation: 1.5s castscaleanm .6s cubic-bezier(0,.64,.41,1) forwards;}
.castImg12{ background: url("../images/about/cast_img12.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg13{ background: url("../images/about/cast_img13.jpg") no-repeat center;animation: 1.5s castscaleanm .4s cubic-bezier(0,.64,.41,1) forwards;}
.castImg14{ background: url("../images/about/cast_img14.jpg") no-repeat center;animation: 1.5s castscaleanm .6s cubic-bezier(0,.64,.41,1) forwards;}
.castImg15{ background: url("../images/about/cast_img15.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg16{ background: url("../images/about/cast_img16.jpg") no-repeat center;animation: 1.5s castscaleanm .4s cubic-bezier(0,.64,.41,1) forwards;}
.castImg17{ background: url("../images/about/cast_img17.jpg") no-repeat center;animation: 1.5s castscaleanm .6s cubic-bezier(0,.64,.41,1) forwards;}
.castImg18{ background: url("../images/about/cast_img18.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg19{ background: url("../images/about/cast_img19.jpg") no-repeat center;animation: 1.5s castscaleanm .4s cubic-bezier(0,.64,.41,1) forwards;}
.castImg20{ background: url("../images/about/cast_img20.jpg") no-repeat center;animation: 1.5s castscaleanm .2s cubic-bezier(0,.64,.41,1) forwards;}
.castImg21{ background: url("../images/about/cast_img21.jpg") no-repeat center;animation: 1.5s castscaleanm .4s cubic-bezier(0,.64,.41,1) forwards;}
.castImg01,.castImg02,.castImg03,.castImg04,.castImg05,.castImg06,.castImg07,.castImg08,.castImg09,.castImg10,.castImg11,.castImg12,.castImg13,.castImg14,.castImg15,.castImg16,.castImg17,.castImg18,.castImg19,.castImg20,.castImg21{background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; right: 0;
z-index: 1;
opacity: 0;
}

.castTxtAll{
width: 40%;
position: absolute;
top: 50%; left: 50%;
transform: translateY(-70%);
z-index: 5;
overflow: hidden;
color: #000;
font-size: 1.6vh;
line-height: 1.8em;
letter-spacing: 1.5px;
}

.castTxtAll2{
width: 100%;
color: #000;
font-size: 1.5vh;
line-height: 1.6em;
letter-spacing: 1.2px;
margin: 15px 0 0;
text-align: justify;
}

.castTxtAll2b{
width: 100%;
color: #000;
font-size: 1.5vh;
line-height: 1.5em;
letter-spacing: 0.6px;
margin: 15px 0 0;
text-align: justify;
}

.castNM01{
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
width: 100%;
font-size: 3.2vh;
line-height: 1.3em;
color: #aa8759;
padding: 0 0 10px;
}

.castNM01b{
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
width: 100%;
font-size: 2.6vh;
line-height: 1em;
color: #aa8759;
padding: 0 0 5px;
}

.castNM02{
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
width: 100%;
font-size: 3.8vh;
line-height: 1.3em;
color: #a8001c;
padding: 0 0 15px;
}

.castNM02b{
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
width: 100%;
font-size: 3.2vh;
line-height: 1em;
color: #a8001c;
padding: 0 0 10px;
}


@keyframes kamenanm {
from { opacity: 0; transform: scale(1.1,1.1) rotateZ(-5deg);}
to   { opacity: 1; transform: scale(1,1) rotateZ(0deg);}
}

#castKamen01{
background: url("../images/about/cast_mask01.png") no-repeat center;
background-size: contain;
width: 22%; height: 25%;
position: absolute;
bottom: 66%; left: 70%;
z-index: 15;
animation: 2.5s kamenanm .4s ease forwards;
opacity: 0;
}

#castKamen02{
background: url("../images/about/cast_mask02.png") no-repeat center;
background-size: contain;
width: 24%; height: 27%;
position: absolute;
bottom: 66%; left: 72%;
z-index: 15;
animation: 2.5s kamenanm .4s ease forwards;
opacity: 0;
}

#castKamen03{
background: url("../images/about/cast_mask03.png") no-repeat center;
background-size: contain;
width: 11%; height: 24%;
position: absolute;
bottom: 47%; left: 88%;
z-index: 15;
animation: 2.5s kamenanm .4s ease forwards;
opacity: 0;
}

#castKamen04{
background: url("../images/about/cast_mask04.png") no-repeat center;
background-size: contain;
width: 11%; height: 24%;
position: absolute;
bottom: 72%; left: 88%;
z-index: 15;
animation: 2.5s kamenanm .4s ease forwards;
opacity: 0;
}



#castKamen05{
background: url("../images/about/cast_mask05.png") no-repeat center;
background-size: contain;
width: 13%; height: 26%;
position: absolute;
bottom: 46%; left: 79%;
z-index: 15;
animation: 2.5s kamenanm .4s ease forwards;
opacity: 0;
}




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

staff

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

#staffbg{
background: url("../images/about/bg_white.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#stafftitle{
background: url("../images/about/staff_title.png") no-repeat center;
background-size: contain;
width: 34%; height: 5%;
position: absolute;
top: 8%; left: 33%;
z-index: 2;
}

#staffTxtAll{
width: 88%; height: 65%;
position: absolute;
top: 21%; left: 6%;
z-index: 3;
}

#staffBlock01{
width: 30%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
animation: 1.5s fadeanm 1.5s ease forwards;
opacity: 0;
}

#staffBlock02{
width: 30%; height: 100%;
position: absolute;
top: 0; left: 35%;
z-index: 5;
animation: 1.5s fadeanm 1.8s ease forwards;
opacity: 0;
}

#staffBlock03{
width: 30%; height: 100%;
position: absolute;
top: 0; right: 0;
z-index: 5;
animation: 1.5s fadeanm 2.1s ease forwards;
opacity: 0;
}

.staffNM{
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
width: 100%;
font-size: 3.5vh;
line-height: 1.3em;
color: #a8001c;
padding: 0 0 15px;
}

.staffTxt{
width: 100%;
font-size: 1.6vh;
line-height: 1.8em;
letter-spacing: 1.5px;
text-align: justify;
color: #000;
}

@keyframes scaleanm {
from { opacity: 0; transform: scale(1.1,1.1);}
to   { opacity: 1; transform: scale(1,1);}
}

#staffMask{
background: url("../images/about/staff_mask.png") no-repeat center bottom;
background-size: contain;
width: 16%; height: 20%;
position: absolute;
bottom: 10%; left: 42%;
z-index: 5;
animation: 1.5s scaleanm 2.4s ease forwards;
opacity: 0;
}



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

original

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

#originalbg{
background: url("../images/about/original_bg.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#originaltitle{
background: url("../images/about/original_title.png") no-repeat center;
background-size: contain;
width: 34%; height: 5%;
position: absolute;
top: 8%; left: 33%;
z-index: 2;
}

#originalNM{
width: 80%;
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
font-size: 3.7vh;
line-height: 1.3em;
color: #fff9cb;
letter-spacing: 2px;
padding: 0 0 15px;
text-align: center;
position: absolute;
top: 20%; left: 10%;
z-index: 3;
animation: 1.5s fadeanm 1.2s ease forwards;
opacity: 0;
}

#originalTxtAll{
width: 80%; height: 65%;
position: absolute;
top: 36%; left: 10%;
z-index: 3;
}

#originalTxt{
width: 50%;
font-size: 1.6vh;
line-height: 1.8em;
letter-spacing: 1.5px;
text-align: justify;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: 1.5s fadeanm 1.5s ease forwards;
opacity: 0;
}

#originalTxt2{
width: 94%;
color: #e6ddba;
font-size: 1.5vh;
line-height: 1.8em;
letter-spacing: 1.5px;
text-align: justify;
border: 1px solid #775c42;
padding: 20px;
}

#originalImgAll{
width: 45%; height: 100%;
position: absolute;
top: 0; right: 0;
z-index: 2;
animation: 1.5s fadeanm 1.8s ease forwards;
opacity: 0;
}

#originalImg{
width: 100%;
line-height: 0;
}

#originalImg img{ pointer-events: none;}

#originalLink{
background-color: #8f0000;
width: 50%; height: 40px;
line-height: 40px;
font-size: 14px;
letter-spacing: 1.5px;
text-align: center;
margin: 15px 0 0 auto;
transition: all 0.3s ease;
}

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

#originalLink:hover{
opacity: 0.7;
}


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

production notes

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

#pronotesbg{
background: url("../images/about/bg_white.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#pronotestitle{
background: url("../images/about/pronotes_title.png") no-repeat center;
background-size: contain;
width: 30%; height: 4%;
position: absolute;
top: 27%; left: 35%;
z-index: 2;
animation: 1.5s fadeanm 1.5s ease forwards;
opacity: 0;
}

@keyframes pronoteanm {
from { background-position: 0 0; }
to { background-position: -4600px 0; }
}

@keyframes pronoteanm2 {
from { background-position: 0 0; }
to { background-position: -5709px 0; }
}

@keyframes pronoteanm3 {
from { background-position: 0 0; }
to { background-position: -6332px 0; }
}

@media screen and (max-height : 900px){
#pronotesImg{ height: 170px; animation: pronoteanm 180s linear infinite;}
}

@media screen and (min-height : 901px){
#pronotesImg{ height: 211px; animation: pronoteanm2 180s linear infinite;}
}

@media screen and (min-height : 1000px){
#pronotesImg{ height: 234px; animation: pronoteanm3 180s linear infinite;}
}


#pronotesImg{
background: url("../images/about/pronotes_img.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
}

#pronotesTxtAll{
width: 80%; height: 52%;
position: absolute;
top: 35%; left: 10%;
z-index: 5;
animation: 1.5s fadeanm 1.8s ease forwards;
opacity: 0;
}

.pronoteBox{
background-color: #FFFFFF;
width: 98%;
padding: 30px 0;
margin: 0 0 40px;
}

.pronotesM{
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
width: 94%;
margin: 0 auto;
font-size: 3.5vh;
color: #820909;
padding: 0 0 20px;
letter-spacing: 2px;
}

.pronotesTxt{
width: 94%;
font-size: 1.6vh;
line-height: 1.8em;
letter-spacing: 1.5px;
text-align: justify;
color: #000000;
margin: 0 auto;
}