/*////////////////////////////////////////////////////////////////////////
reset
////////////////////////////////////////////////////////////////////////*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: top;
}

html {
}

body{
	overflow-y: scroll; /* スクロールバー常に表示 */
}

html,body {
	font-size-adjust:100%;
	-webkit-font-size-adjust: 100%;
}

body,h1,h2,h3,h4,h5,h6,p,img,
hr,li,ul,dl,dt,dd
{
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

table th{font-weight:normal;}

ruby {
        display: inline-table;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: none;
        white-space: nowrap;
        text-indent: 0;
        vertical-align: 0.9em;
        text-decoration: inherit;
        text-align: center;
        line-height: 1em;
        }
ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    font-size: 50%;
    line-height: 1.2em;
	text-align: center;
    }


/*////////////////////////////////////////////////////////////////////////
基本カラー
////////////////////////////////////////////////////////////////////////*/
/*

紫：#873f9c;
赤：#d53c4c;
金：#b99c69;

*/
/*////////////////////////////////////////////////////////////////////////
基本
////////////////////////////////////////////////////////////////////////*/
img{border:0px;}

a{
	color:#b99c69;
	text-decoration:none;
	outline:none;
}

a:hover{
	color:#873f9c;
	text-decoration: none;
}

.clear{clear:both;}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.non{
	opacity:0.5;
	cursor:default;
}

::selection {
	color: #333;
	background-color:#873f9c;;
	text-shadow: #fff 0px 0px 3px;
}
::-moz-selection {
	color: #333;
	background-color:#873f9c;;
	text-shadow: #fff 0px 0px 3px;
}

.txtCutNone{display:none;}

/*////////////////////////////////////////////////////////////////////////
全体ボックス
////////////////////////////////////////////////////////////////////////*/
html{
	background-color: #000;
}

body{
	/*font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	/*font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;*/
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho",serif;
	/*font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;*/
	font-size:18px;
	color: #111;
	text-align: center;
	background-image: url(../img/bg.jpg);
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-width: 1300px;
}

#loading{
	width:100%;
	height: 100%;
	position:fixed;
	z-index:999;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	background-color: #fff;
	pointer-events: none;
	background-image: url(../img/bg.jpg);
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#mainBox{
	width: 100%;
	display: block;
	margin: auto;
}

#contents{
	width: 100%;
	display: block;
	margin: auto;
	padding:0 5%;
}


/*---------------------------------------------
装飾
---------------------------------------------*/
.pink{color: #ff08b7;}
.blue{color: #06d6fa;}
.yellow{color: #f1d601;}
.red{color: #c00;}


hr{
	margin: 50px 0;
	border-bottom: 1px solid #666;
}

h1{
	padding:0 10px;
	border-bottom: 1px solid #000;
	background:-webkit-linear-gradient(transparent 30%, #ccb895 30%);
	background:-o-linear-gradient(transparent 30%, #ccb895 30%);
	background:linear-gradient(transparent 30%, #ccb895 30%);
	margin: 0 auto 5%;
	font-size: 200%;
	line-height: 1.3em;
	text-align: center;
}


h3{
	padding:0 10px;
	border-bottom: 1px solid #000;
	background:-webkit-linear-gradient(transparent 30%, #ccb895 30%);
	background:-o-linear-gradient(transparent 30%, #ccb895 30%);
	background:linear-gradient(transparent 30%, #ccb895 30%);
	margin: 3% auto 2%;
	font-size: 120%;
	line-height: 1.3em;
	text-align: center;
}

.new{
	position: absolute;
	left: -20px;
	top: 28%;
	background-color: #800;
	font-size: 60%;
	text-align: center;
	color: #fff;
	font-weight: normal;
	text-shadow: none;
	padding:0 2px 2px;
}

.new2{
	background-color: #800;
	display: inline-block;
	padding:0 5px 2px;
	font-weight: normal;
	margin-right: 5px;
	margin-top: 10px;
	font-size: 70%;
}

.new3{
	background-color: #800;
	display: inline-block;
	padding:0 5px 2px;
	font-weight: normal;
	margin-right: 5px;
}

.new4{
	position: absolute;
	left: 0;
	top: 0;
	background-color: #800;
	text-align: center;
	color: #fff;
	font-weight: normal;
	text-shadow: none;
	padding:0 2px 2px;
}

/*---------------------------------------------
ヘッダー
---------------------------------------------*/

#smpBtn, .smpLink{
	display: none;
}

header{
	width: 100%;
	display: block;
	z-index: 100;
	position: fixed;
	border-bottom: solid 3px #b99c69;
	min-width: 1300px;
	background-color: #000;
	color: #fff;
}

nav ul{
	display: inline-block !important;
	width: 60%;
	margin: auto;
	font-size:1.25vw;
	text-align: left;
	vertical-align: middle;
}

nav ul li{
	display: inline-block;
	position: relative;
	letter-spacing: 0.15em;
	padding:2.2% 0 1.5%;
	margin: 0 1.8%;
	color: #fff;
	font-weight: bold;
	vertical-align: middle;
	text-shadow: 
    #000 2px 0px 0px, #000 -2px 0px 0px,
    #000 0px -2px 0px, #000 0px 2px 0px,
    #000 2px 2px 0px, #000 -2px 2px 0px,
    #000 2px -2px 0px, #000 -2px -2px 0px,
    #000 1px 2px 0px, #000 -1px 2px 0px,
    #000 1px -2px 0px, #000 -1px -2px 0px,
    #000 2px 1px 0px, #000 -2px 1px 0px,
    #000 2px -1px 0px, #000 -2px -1px 0px,
    #000 1px 1px 0px, #000 -1px 1px 0px,
    #000 1px -1px 0px, #000 -1px -1px 0px;
}

nav ul li:hover{
	text-shadow: 
    #873f9c 2px 0px 0px, #873f9c -2px 0px 0px,
    #873f9c 0px -2px 0px, #873f9c 0px 2px 0px,
    #873f9c 2px 2px 0px, #873f9c -2px 2px 0px,
    #873f9c 2px -2px 0px, #873f9c -2px -2px 0px,
    #873f9c 1px 2px 0px, #873f9c -1px 2px 0px,
    #873f9c 1px -2px 0px, #873f9c -1px -2px 0px,
    #873f9c 2px 1px 0px, #873f9c -2px 1px 0px,
    #873f9c 2px -1px 0px, #873f9c -2px -1px 0px,
    #873f9c 1px 1px 0px, #873f9c -1px 1px 0px,
    #873f9c 1px -1px 0px, #873f9c -1px -1px 0px;
}

nav ul li.select{
	color: #c67adc;
	text-shadow: none;
}

.link{
	display: inline-block;
	width: 20%;
	background-color: #000;
	vertical-align: middle;
}

.link img{
	width: 100%;
}

.link:hover{
	opacity: 0.6;
}


/*---------------------------------------------
サブナビ
---------------------------------------------*/
#subNavi{
	width: 100%;
	padding: 1%;
	position: fixed;
	background-image: url(../img/white_50.png);
	border-bottom: 1px solid #000;
	font-weight: bold;
	z-index: 99;
	min-width: 1300px;
}

#subNavi .nomalNavi{
	text-align: center;
}

#subNavi .nomalNavi ul{
}

#subNavi .nomalNavi li{
	display:inline-block;
	position: relative;
	margin:0.2%;
	background-color: #333;
	background-image: url(../img/tex2.png);
	background-size: 80px;
	border-radius: 5px;
	border: solid 2px #b99c69;
}

#subNavi .nomalNavi li a{
	color: #fff;
	padding: 5px 20px 8px;
	display: block;
}

#subNavi .nomalNavi li:hover, #subNavi .nomalNavi li.select{
	border: solid 2px #000;
	background-color: #b99c69;
	color: #000 !important;
}


/*---------------------------------------------
フッター
---------------------------------------------*/
footer{
	text-align:center;
	padding-bottom:150px;
	font-size: 80%;
	letter-spacing: 0.05em;
	margin:0 auto;
	color: #fff;
	border-top: solid 1px #666;
	background-color: #000;
}

footer #sns{
	margin-bottom: 5px;
	padding:20px  5px;
	background-color: #333;
}

footer a:hover{
	opacity:0.7;
}

footer a{
	display: inline;
}

footer .banner img{
	width:48%;
	max-width: 200px;
	border: solid 1px #666;
	margin: 0.5%;
	background-color: #fff;
}

#backTop{
	z-index: 99;
	position: fixed;
	bottom: 0px;
	right: 0px;
	text-align: center;
	font-size: 30px;
	line-height:1em;
	cursor: pointer;
}

#backTop:hover{
	opacity: 0.6;
}

/*////////////////////////////////////////////////////////////////////////
トップページ
////////////////////////////////////////////////////////////////////////*/
#mainBox{
	position: relative;
	width: 100%;
	margin: auto;
	padding-top: 5.5%;
}

#mainBox #key{
	position: relative;
}

#mainBox #key img{
	width: 100%;
	pointer-events: none;
}


.logo{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30%;
	padding: 2% 0;
	margin: auto;
}

.logo img{
	width: 100%;
}

#news{
	border-top: solid 5px #5b1c6d;
	border-bottom: solid 5px #5b1c6d;
	background-image: url(../img/tex.jpg);
	padding: 1% 1% 1% 0;
	font-size: 110%;
}

#news p{
	width: 15%;
	font-size: 200%;
	border-right: 1px solid #fff;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.1em;
	display: inline-block;
	text-align: center;
	vertical-align: middle;

}

#news .day{
	width: 11%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	padding:1% 2%;
	color: #fff;
	line-height: 1.8em;
}

#news .txt{
	width: 65%;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding:1% 0;
	color: #fff;
	line-height: 1.8em;
}

#news .txt a{
	color: #fff;
	background-color: #5b1c6d;
	padding: 2px 10px;
}

#news .txt a:hover{
	background-color: #d53c4c;
}

#news .psIcon{
	background-color: #3f338b;
	border: solid 2px #fff;
	color: #fff;
	font-size: 80%;
	padding: 3px 10px;
	border-radius: 10px;
	margin-right: 10px;
}

#news .swIcon{
	background-color: #ce2323;
	border: solid 2px #fff;
	color: #fff;
	font-size: 80%;
	padding: 3px 10px;
	border-radius: 10px;
	margin-right: 10px;
}


#news .linkTxt{
	width: 8%;
	display: inline-block;
	vertical-align: middle;
	background-color: #5b1c6d;
	color: #fff;
	border: solid 1px #fff;
	font-size: 80%;
}

#news .linkTxt a{
	display: block;
	padding: 4% 1% 2%;
	color: #fff;
}

#news .linkTxt:hover{
	background-color: #d53c4c;
}

#topInfo{
	width: 100%;
	max-width: 1350px;
	margin: auto;
	padding: 5% 3%;
	font-size: 100%;
}

#topInfo #banner img{
	width: 24.5%;
	margin: 0.2%;
	border: solid 2px #333;
}

#topInfo #banner img:hover{
	opacity: 0.6;
}

#topInfo .jacket{
	width: 100%;
}

#topInfo .jacket img{
	width: 100%;
}

#topInfo .specBox{
	width: 49%;
	margin: 0.5%;
	display: inline-block;
	line-height: 2em;
	text-align: left;
	padding: 2%;
	background-image: url(../img/white_50.png);
}

#topInfo .specBox .hard{
	font-size: 130%;
	text-align: center;
	border: none;
	border-radius: 0;
	padding: 3px;
	color: #fff;
	border-bottom: 3px double #fff;
	margin: -4.5% -4.5% 5%;
}

#topInfo table{
	display: block;
}

#topInfo table th{
	width: 5.4em;
	background-image: url(../img/tex.jpg);
	text-align: center;
	font-weight: bold;
	color: #fff;
	vertical-align: middle;
}

#topInfo table td{
	padding-left: 10px;
}

/*---------------------------------------------
カウントダウン
---------------------------------------------*/	
#countBox{
	width: 18%;
	position: absolute;
	left: 0.5%;
	top: 16%;
	display: block;
	z-index: 1;
}

#countBox img{
	width: 100%;
}

#countBox a{
	display: block;
}

#countBox a:hover{
	opacity: 0.6;
}

/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/
.world{
	background-image: url(../img/story/bg.png);
	background-size: 100%;
	background-repeat: no-repeat;
	font-size: 100%;
}

.worldAria{
	width: 100%;
	max-width: 1300px;
	margin: auto;
	padding: 2% 0 6%;
}

.worldAria p img{
	width: 30%;
	max-width: 180px;
}

.worldAria .txt{
	background-image: url(../img/white_50.png);
	padding: 8px 20px 5px;
	line-height: 2.3em;
}

.worldAria .txtPoint{
	font-size: 150%;
	font-weight: bold;
}

.worldAria p.mds{
	padding:0 10px;
	border-bottom: 1px solid #000;
	background:-webkit-linear-gradient(transparent 20%, #ccb895 20%);
	background:-o-linear-gradient(transparent 20%, #ccb895 20%);
	background:linear-gradient(transparent 20%, #ccb895 20%);
	margin: 3% auto 1%;
	font-size: 150%;
	line-height: 0.7em;
}

.worldAria p.mds small{
	font-size: 40%;
}
	
.worldAria img.map{
	width: 100%;
	max-width: 800px;
	border: solid 2px #111;
}
	
/*////////////////////////////////////////////////////////////////////////
キャラ
////////////////////////////////////////////////////////////////////////*/
.chara{
	width: 100%;
	margin: auto;
}

.charaBg{
	background-repeat: repeat-x;
	background-position: center bottom;
	border-bottom: 1px solid #000;
	position: relative;
	overflow: hidden;
}

/*
.charaAll{
	background-repeat: no-repeat;
	background-size: 66%;
	background-position: left 0%;
	position: relative;
}
*/

.charaImg, .charaSelif{
	position: absolute;
	left: -15%;
	top: 2%;
	width: 95%;
	z-index: 0;
	pointer-events: none;
}

.charaSelif{
	z-index: 1;
}

.charaBox{
	width: 43%;
	padding: 6% 0;
	margin-left: 52%;
	max-width: 710px;
	padding-bottom: 5%;
	position: relative;
	z-index: 1;
}


.charaBox .playable{
	border-bottom: 1px solid #000;
	text-align: right;
	padding-bottom: 4px;
	margin-bottom: 5%;
}

.charaBox .playable span{
	background-color: #000;
	border: double 3px #b99c69;
	color: #fff;
	padding:10px;
	font-size: 80%;
}

.charaBox  img.name{
	width: 100%;
}

.charaBox .txt{
	text-align: left;
	padding: 3%;
	background-image: url(../img/white_50.png);
	border: solid 1px #999;
	margin: 5% auto;
}

.charaBox .txtMini{
	margin-bottom: 48%;
}

.charaBox .ss{
	position: relative;
}

.charaBox .ss:hover{
	opacity: 0.6;
}

.charaBox .ss img{
	border: solid 2px #000;
	width: 100%;
}

.charaBox .ss .loupe{
	width: 15%;
	position: absolute;
	left: 0;
	top: 0;
	max-width: 50px;
}

.charaBox .ss .loupe img{
	width: 100%;
	background-color: #000;
}




.charaBg .sv{
	z-index: 1;
	left: 44%;
	top: 5%;
	max-width: 155px;
	width: 7%;
	position: absolute;
}

.charaBg .sv2{
	top: 13% !important;
}

.charaBg .play-bt,
.charaBg .stop-bt{
	display:block;
	cursor: pointer;
}

.charaBg .stop-bt,
.charaBg .play-bt:hover{
	opacity: 0.6;
}



.charaBg .change{
	z-index: 1;
	left: 44%;
	top: 2%;
	max-width: 155px;
	width: 7%;
	position: absolute;
}

.charaBg .change img, .charaBg .sv img{
	width: 100%;
}

.charaBg .change:hover, .charaBg .sv:hover{
	opacity: 0.6;
	cursor: pointer;
}


.charaBg:first-child{
	padding-top: 4%;
}

.charaBg:not(:first-child) .charaImg, .charaBg:not(:first-child) .charaSelif{
	top: -4%;
}

.charaBg:first-child .change, .charaBg:first-child .sv{
	top: 10%;
}

.charaBg:first-child .sv2{
	top: 20.3% !important;
}


.youtube-wrap {
	position: relative;
	padding-top: 56.25%;
	width: 100%;
	border: solid 2px #000;
	background-color: #000;
}
/*
.movieBoxchara{
	display: none;
}
*/

/*---------------------------------------------
ムービー
---------------------------------------------*/	
#youtube-movie {
	margin: 0 auto;
	width: 100%;
}
 
#youtube-movie-content {
	padding-top: 56.25%;
	position: relative;
	width: 100%;
}
 
#youtube-movie-content iframe {
	height: 100% !important;
	left: 0;
	position: absolute;
	top: 0;
	width: 100% !important;
	border: solid 2px #000;
	background-color: #000;
}

/*////////////////////////////////////////////////////////////////////////
ギャラリー
////////////////////////////////////////////////////////////////////////*/
.gallery{
	width: 100%;
	margin: auto;
	padding: 5% 2%;
	max-width: 1300px;
}

.gallery li{
	border: solid 2px #000;
	width: 30%;
	max-width: 300px;
	display: inline-block;
	margin: 0.5%;
	position: relative;
}

.gallery img{
	width: 100%;
}

.gallery li:hover{
	border: solid 2px #b99c69;
	opacity: 0.6;
}


/*////////////////////////////////////////////////////////////////////////
システム
////////////////////////////////////////////////////////////////////////*/
.system{
	width: 100%;
	margin: auto;
	padding: 5% 0;
}

.system h2{
	padding: 10px 20px 0;
	margin:0 auto 10px;
	font-size: 400%;
	font-weight: normal;
	vertical-align: bottom;
	letter-spacing: -0.1em;
	border-bottom: solid 1px #fff;
	margin-bottom: 30px;
}

.system h2 small{
	vertical-align: bottom;
}

.system h3{
	padding: 10px 20px 0;
	margin:0 auto 10px;
	font-size: 140%;
	display: inline-block;
}

.system strong{
	background-image: url(../img/white_50.png);
}

.system .txt{
	width: 100%;
	display: block;
	background-image: url(../img/tex2.png);
	background-color: #b99c69;
	margin: 3% auto;
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
}

.system .txtMini{
	width: 50%;
	display: inline-block;
	padding: 3% 1%;
	vertical-align: middle;
}

.system .img1set{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	background-color: #000;
	color: #fff;
	line-height: 2.2em;
	
}

.system .img2set{
	background-image: url(../img/tex.jpg);
	padding: 3% 0;
	color: #fff;
	border-bottom: 5px solid #000;
	border-top: 5px solid #000;
	margin: 3% auto;
}

.system .img2set2{
	background-image: url(../img/tex2.png);
	background-color: #b99c69;
	padding: 3% 0 0;
	margin: 3% auto;
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
}

.system .img1set img{
	width: 100%;
}

.system .img2set img, .system .img2set2 img{
	width: 50%;
}

.system .rtl{
	direction: rtl;
}

.system .ltr{
	direction: ltr;
}


.system table{
	width: 100%;
	letter-spacing: 0.05em;
	text-align: left;
	margin: auto;
	font-size: 95%;
}

.system table th{
	width: 6em;
	text-align: right;
	padding: 0 5px;
	background-color: #fff;
}

.system table td{
	padding-left: 10px;
}

/*////////////////////////////////////////////////////////////////////////
サウンド
////////////////////////////////////////////////////////////////////////*/
.sound{
	width: 100%;
	margin: auto;
	padding: 3% 2%;
	max-width: 1300px;
}

.sound h1{
	margin: 3% auto 1%;
}

.songBox{
	width: 48%;
	margin: 1%;
	display: inline-block;
	border: solid 1px #999;
	padding: 3% 2% 5%;
	background-color: #fff;
	background-image: url(../img/tex3.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 70px;
}

.songBox p{
	background-image: url(../img/tex.jpg);
	color: #fff;
	font-size: 150%;
	padding: 3%;
	border: solid 2px #b99c69;
}

.artistBox{
	margin: 2% auto;
	display: block;
	border: solid 1px #999;
	padding: 3% 2% 5%;
	background-color: #fff;
	background-image: url(../img/tex3.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 70px;
	text-align: left;
}

.artistBox p{
	font-size: 150%;
	border-bottom: double 3px #b99c69;
	font-weight: bold;
}

.artistBox .txt{
	width: 67%;
	display: inline-block;
	margin-left: 3%
}

.artistBox .img{
	width: 30%;
	display: inline-block;
}

.artistBox .img img{
	width: 100%;
	border: solid 1px  #b99c69;
}


/*////////////////////////////////////////////////////////////////////////
スペシャル
////////////////////////////////////////////////////////////////////////*/
.special{
	width: 100%;
	margin: auto;
	padding: 8% 2%;
	max-width: 1300px;
}

/*---------------------------------------------
ムービー
---------------------------------------------*/
.movieBox{
	width: 49%;
	display: inline-block;
	margin: 0.5%;
	border: solid 2px #000;
	background-color: #000;
	color: #fff;
	line-height: 2em;
	padding-bottom: 10px;
}

.movieBox2{
	width: 32.2%;
	display: inline-block;
	margin: 0.5%;
	border: solid 2px #000;
	background-color: #000;
	color: #fff;
	line-height: 1em;
	padding-bottom: 10px;
}

.youtube, .youtubeBox{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:10px auto;
}

.youtube iframe, .youtubeBox iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/*---------------------------------------------
キャストコメント
---------------------------------------------*/
#castComment{
	text-align: left;
}

.commentBox{
	border: solid 1px #333;
	padding: 3% 3% 4%;
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 30px;
	margin-bottom: 3%;
	background-color: #fff;
}

.commentBox .castImg{
	width: 20%;
	display: inline-block;
	border: solid 1px #333;
}

.commentBox .castImg img{
	width: 100%;
}

.commentBox .txt{
	width: 80%;
	display: inline-block;
	padding-left: 2%;
}

.commentBox .name{
	font-size: 200%;
	font-weight: bold;
	line-height: 1em;
	margin-bottom: 20px;
}

.commentBox small{
	background-color: #666;
	border-radius: 10px;
	font-size: 80%;
	font-weight: bold;
	padding: 2px 10px;
	color: #fff;
}

.commentBox p{
	color: #fff;
	padding: 2px 5px;
	background-color: #b99c69;
	margin-top: 15px;
}

/*---------------------------------------------
コミック
---------------------------------------------*/
.comic li{
	display: inline-block;
	width: 32%;
	margin: 0.5%;
	max-width: 500px;
	background-color: #b99c69;
	color: #fff;
	line-height: 2em;
}

.comic li:hover{
	opacity: 0.6;
	cursor: pointer;
}

.comic li img{
	width: 100%;
	border: solid 1px #b99c69;
}

/*////////////////////////////////////////////////////////////////////////
インフォ
////////////////////////////////////////////////////////////////////////*/
.info{
	width: 100%;
	margin: auto;
	padding: 8% 2%;
	max-width: 1300px;
}

/*---------------------------------------------
製品情報
---------------------------------------------*/
.info .spec{
	width: 100%;
	max-width: 800px;
	margin: auto;
	margin-bottom: 5%;
}

.info .spec .jacket{
	width: 100%;
	margin-bottom: 5%;
}

.info .spec .jacket img{
	width: 100%;
}

.info .spec table{
	width: 100%;
	letter-spacing: 0.05em;
	line-height: 2em;
	text-align: left;
}

.info .spec table th{
	width: 5.4em;
	background-image: url(../img/tex.jpg);
	text-align: center;
	font-weight: bold;
	color: #fff;
	vertical-align: middle;
}

.info .spec table td{
	padding-left: 10px;
	border-bottom: 1px solid #666;
}

/*---------------------------------------------
特典
---------------------------------------------*/
.info .limited, .info .pre{
	width: 100%;
	max-width: 1000px;
	margin: auto;
	text-align: left;
	margin-bottom: 5%;
}

.info .limited img, .info .pre img{
	width: 100%;
}

.info .limited p, .info .pre p{
	background-image: url(../img/tex.jpg);
	padding: 8px;
	color: #fff;
	font-weight: bold;
	font-size: 110%;
}

.info .limited .tokuten{
	border: solid 1px #ccb895;
	padding: 3%;
}

.info .preLeft{
	display: inline-block;
	width: 28%;
	margin-right: 2%;
}

.info .preRight{
	display: inline-block;
	width: 70%;
}



.info .cpLink{
	margin: 10px auto;
	display: inline-block;
}

.info .cpLink:hover{
	opacity: 0.6;
}

.info .cpLink img{
	border: solid 1px #666;
	width: 100%;
	max-width: 1000px;
}



.info .shop{
	width: 100%;
	margin: auto;
	text-align: left;
}

.info .shopList{
	width: 48%;
	margin: 1%;
	display: inline-block;
	border: solid 1px #666;
	padding: 3%;
	background-color: #fff;
}

.info .shopList img{
	width: 100%;
	margin: 5% auto;
	display: block;
}


.info .shopList .shopName{
	background-image: url(../img/tex.jpg);
	padding: 8px;
	color: #fff;
	font-weight: bold;
	font-size: 120%;
	letter-spacing: 0.1em;
	border: solid 1px #000;
}

.info .shopList strong{
	background-color: #ccb895;
	padding: 5px 8px;
	display: block;
	color: #333;
	margin-bottom: 3px;
}

.info .shopList .shopSet{
	padding: 2%;
	border: double 3px #ccb895;
	margin: 10px auto;
}

.info .shopList .shopSet span{
	font-weight: bold;
	line-height: 2em;
	border-bottom: double 3px #ccb895;
	display: block;
	margin-bottom: 10px;
}

.info .shopList .shopLink, .info .spec .shopLink{
	background-color: #d53c4c;
	text-align: center;
	padding: 5px;
	color: #fff;
}

.info .shopList .shopLink2{
	text-align: center;
	font-size: 90%;
}

.info .shopList .shopLink2 a{
	background-color: #d53c4c;
	text-align: center;
	padding: 5px 10px;
	color: #fff;
	display: inline-block;
	width: 48.5%;
	margin: 0.5%;
}

.info .shopList .shopLink:hover, .info .shopList .shopLink2 a:hover,  .info .spec .shopLink:hover{
	opacity: 0.6;
}

.info .shopList hr{
	border-bottom: dashed 1px #666;
	margin:1% auto 5%;
}


/*---------------------------------------------
パッチ情報
---------------------------------------------*/
.info .patch {
	text-align: left;
	font-size: 90%;
}

.info .patchBox{
	padding: 3%;
}

.info .patchBox h3{
	text-align: left;
	background: none;
	border-left: 10px solid #3f338b;
	border-bottom: 1px solid #3f338b;
	color: #3f338b;
}

/*---------------------------------------------
更新履歴
---------------------------------------------*/
.info .news{
	width: 100%;
	margin: auto;
	text-align: left;
}

.info .news span.txt{
	display: inline-block;
	width: 90%;
}

.info .news span.day{
	display: inline-block;
	width: 10%;
}

.info .news hr{
	margin: 0.5% 0;
	border-bottom:solid 1px #ccc;
}


.info .news .psIcon{
	background-color: #3f338b;
	color: #fff;
	font-size: 80%;
	padding: 2px 10px;
	border-radius: 10px;
	margin-right: 10px;
	vertical-align: middle;
}

.info .news .swIcon{
	background-color: #ce2323;
	color: #fff;
	font-size: 80%;
	padding: 2px 10px;
	border-radius: 10px;
	margin-right: 10px;
	vertical-align: middle;
}


/*######################################################################
メディアクエリ
######################################################################*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1300px) {
/*//////////////////////////////////////////////////////////////////////*/
	
header nav ul li{
	font-size:16px;
}
	
	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 800px) {
/*//////////////////////////////////////////////////////////////////////*/
br.txtCutNone{display:block;}
br.txtCut{display:none;}
.txtCutNone{display:block;}
.txtCut{display:none;}


body{
	font-size:15px;
	min-width: inherit;
	background-attachment: inherit;
	background-repeat: repeat-y;
}

#contents{
	padding:0 3%;
}

	
hr{
	margin: 5% 0;
}
	
.new{
	left: 0%;
	top: 0%;
	font-size: 100%;
}

	
	
	
/*---------------------------------------------
ヘッダー
---------------------------------------------*/
.link{
	display:none;
}
	
header{
	width: 100%;
	height: 100%;
	display: block;
	border-bottom: none;
	min-width: inherit;
	background-image: url(../img/black_80.png);
	background-color: inherit;
}

nav ul{
	display:block;
	width: 100%;
	margin: auto;
	font-size: 100%;
	text-align: center;
	margin-top: 12%;
}

header nav ul li{
	width: 45%;
	margin: 1%;
	border: solid 1px #666;
	background-color: #000;
	text-shadow: none;
}
	
header nav ul li:hover, header nav ul li.select{
	background-image: none;
	background-color: #ccb895;
}

.navBtn{
	background-color: #000;
	border: solid 1px #ccb895;
	display: inline-block;
	width: 9%;
	z-index: 999;
	position:fixed;
	left: 0;
	top: 0;
	cursor: pointer;
}
	
.navBtn:hover{
	background-color: #ccb895;
	border: solid 1px #000;
}
	
.navBtn img{
	width: 100%;
}
	
 .smpLink img{
	width: 50%;
}
	
.smpLink{
	display: inline-block;
	width: 66%;
	z-index: 999;
	position:fixed;
	left: 9%;
	top: 0;
}
	
.smpLink a:hover{
	opacity: 0.6;
}
	
/*---------------------------------------------
サブナビ
---------------------------------------------*/
#subNavi{
	min-width:inherit;
	padding: 12% 0% 3%;
	position: relative;
}
	

#subNavi li{
	width: 49%;
}
	
/*////////////////////////////////////////////////////////////////////////
トップページ
////////////////////////////////////////////////////////////////////////*/
#mainBox{
	padding-top: 0;
}

.logo{
	width: 60%;
	max-width: 800px;
	margin-left: 38%;
}
	
#news{
	font-size: 120%;
	padding: 1%;
	background-size: 10%;
	text-align: left;
}

#news p{
	width: 20%;
	font-size: 100%;
}

#news .txt{
	margin: auto;
	width: 100%;
	padding: 1% 2.5%;
	font-size: 80%;
}

#news .linkTxt{
	display: block;
	margin: auto;
	width: 95%;
	font-size: 80%;
	text-align: center;
}

#news .linkTxt a{
	padding: 0.5%;
}
	
#topInfo{
	padding: 5% 3%;
}

#topInfo #banner img{
	width: 49%;
	margin: 0.5%;
}

#topInfo .jacket{
	width: 100%;
	display: block;
	max-width: 500px;
	margin: auto;
	margin-bottom: 0;
}
	
#topInfo .specBox{
	width: 100%;
	margin-left: 0;
	margin: auto;
	display: block;
	max-width:inherit;
	margin-bottom: 5%;
}

#topInfo .specBox .hard{
	margin: 5% 0%;
}
	
	
/*---------------------------------------------
カウントダウン
---------------------------------------------*/	
#countBox{
	width: 30%;
	left: 1%;
	top: 28%;
}
	
	
/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/
.world{
	background-size: 100%;
}

.worldAria{
	padding: 12% 0 6%;
}

.worldAria p img{
	width: 20%;
}

.worldAria .txt{
	background-image: url(../img/white_50.png);
	padding: 5px;
}

.worldAria .txtPoint{
	line-height: 1.4em;
}
	
/*////////////////////////////////////////////////////////////////////////
キャラ
////////////////////////////////////////////////////////////////////////*/
.chara{
	width: 100%;
	margin: auto;
}

.charaImg, .charaSelif{
	top: 2%;
	left: -22%;
	width: 145%;
}

.charaSelif{
	z-index: 1;
}

.charaBox{
	width: 100%;
	display: block;
	padding: 75% 5%;
	margin: auto;
	padding-bottom: 5%;
}

.charaBox .playable{
	padding-bottom: 0;
	border-bottom: none;
}
	
.charaBox .playable span{
	display: block;
	width: 100%;
	text-align:center;
	padding: 0;
}

.charaBox .txt{
	background-color: #fff;
}
	
.charaBox .txtMini{
	margin-bottom: 0;
}

.charaBox .ss{
	pointer-events: none;
}

.charaBox .ss img{
	border: solid 2px #000;
	width: 100%;
}

.charaBox .ss .loupe{
	display: none;
}

	
.charaBg .sv{
	z-index: 2;
	left: inherit;
	right: 6%;
	top: 2%;
	width: 18%;
}
	
.charaBg .sv2{
	top: 11% !important;
}
	
.charaBg .change{
	z-index: 2;
	left: inherit;
	right: 6%;
	top: 2%;
	width: 18%;
}


.charaBg:first-child{
	padding-top: 4%;
}

.charaBg:not(:first-child) .charaImg, .charaBg:not(:first-child) .charaSelif{
	top: -2%;
}

.charaBg:first-child .change, .charaBg:first-child .sv{
	top: 3%;
}
	
.charaBg:first-child .sv2{
	top: 12% !important;
}


	
	
/*////////////////////////////////////////////////////////////////////////
ギャラリー
////////////////////////////////////////////////////////////////////////*/
.gallery{
	padding: 20% 5%;
}
	
/*////////////////////////////////////////////////////////////////////////
システム
////////////////////////////////////////////////////////////////////////*/
.system{
	padding: 8% auto;
}

.system h2{
	font-size: 230%;
	line-height: 1em;
	padding-bottom: 30px;
	text-align: center;
}

.system h3{
	font-size: 150%;
	display: block;
	text-align: center;
}

.system .txt{
	width: 100%;
	display: block;
	padding: 3%;
	text-align: left;
}

.system .txtMini{
	width: 100%;
	display: block;
}

.system .img1set{
	width: 100%;
	display: block;
	line-height: 1.3em;
}

.system .img1set span{
	padding: 2%;
	display: block;
}
	
.system .img2set{
	padding: 3%;
	text-align: left;
}

.system .img2set2{
	padding: 3%;
	text-align: left;
}

.system .img1set img{
	width: 100%;
	border: solid 1px #000;
}

.system .img2set img, .system .img2set2 img{
	width: 100%;
	margin: 1% auto;
	border: solid 1px #000;
}

	
/*////////////////////////////////////////////////////////////////////////
サウンド
////////////////////////////////////////////////////////////////////////*/
.sound{
	padding: 8% 5%;
}
	
.songBox{
	width: 100%;
	margin: 2% auto;
	display: block;
	padding: 5%;
}

.songBox p{
	font-size: 120%;
}

.artistBox p{
	font-size: 120%;
	border-bottom: solid 2px #b99c69;
	font-weight: bold;
}

.artistBox{
	padding: 5% 5% 15%;
}

.artistBox .txt{
	width: 100%;
	display: block;
	margin-left: 0;
	margin: 2% auto;
}

.artistBox .img{
	width: 100%;
	display: block;
	max-width: 500px;
	margin: auto;
}
	
	

/*////////////////////////////////////////////////////////////////////////
スペシャル
////////////////////////////////////////////////////////////////////////*/
.special{
	padding: 8% 5%;
}

/*---------------------------------------------
ムービー
---------------------------------------------*/
.movieBox, .movieBox2{
	width: 100%;
	display: block;
	margin: 1% auto;
}
	
/*---------------------------------------------
キャストコメント
---------------------------------------------*/	
	.commentBox{
		padding: 5% 3% 10%;
	}
	
.commentBox .castImg{
	width: 100%;
	display: block;
	max-width: 300px;
	margin: auto;
	margin-bottom: 20px;
}

.commentBox .castImg img{
	width: 100%;
}

.commentBox .txt{
	width: 100%;
	display: block;
	padding-left: 0%;
}

	
/*---------------------------------------------
コミック
---------------------------------------------*/
.comic li{
	display: block;
	width: 100%;
	margin: 3% auto;
}

	
	
/*////////////////////////////////////////////////////////////////////////
インフォ
////////////////////////////////////////////////////////////////////////*/
.info{
	padding: 8% 5%;
}

/*---------------------------------------------
特典
---------------------------------------------*/
.info .shopList{
	width: 100%;
	margin: 2% auto;
	display: block;
	border: solid 1px #666;
	padding: 3%;
	background-color: #fff;
}


.info .news span.day, .info .news span.txt{
	display: block;
	width: 100%;
}

	
	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 480px) {
/*//////////////////////////////////////////////////////////////////////*/
	
.txtCut2{display:none;}
	
ruby {
	line-height: 0.8em;
 }
	
body{
	font-size: 12px;
}

	
/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/
.world{
	/*font-size:3vw;*/
}

	
.worldAria .txt{
	line-height: 2.2em;
	padding: 5px 0;
	letter-spacing: 0;
}
	
.worldAria .txtPoint{
	line-height: 1.4em;
}
	
/*//////////////////////////////////////////////////////////////////////*/
}
/*//////////////////////////////////////////////////////////////////////*/