@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');




/*////////////////////////////////////////////////////////////////////////
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;}


/*------------*/
img{border:0px;}

.clear{clear:both;}

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

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

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

黒：241e1e
くすんだピンク：a03f2f
明るめピンク：c45d4e
濃いめ金：9b6010
明るめ金：dac181

くすんだみどり：718a75

*/


/*////////////////////////////////////////////////////////////////////////
基本
////////////////////////////////////////////////////////////////////////*/
a{
	color:#333;
	text-decoration:none;
	outline:none;
}

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

::selection {
	color: #fff;
	background-color:#718a75;
}
::-moz-selection {
	color: #fff;
	background-color:#718a75;
}

hr.solidLine{
	border-top: solid 1px #718a75;
	margin: 3% 0;
}

.move{
	opacity: 0;
	padding-top: 1%;
	position: relative;
}

.txtCutNone{display:none;}

/*////////////////////////////////////////////////////////////////////////
全体ボックス
////////////////////////////////////////////////////////////////////////*/
html{
}

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

#loading{
	width:100%;
	height: 100%;
	position:fixed;
	z-index:99;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	font-size: 16px;
	pointer-events: none;
	color: #9b6010;
}

#backTop{
	z-index: 99;
	position: fixed;
	bottom: 20px;
	right: 10px;
	cursor: pointer;
}

#backTop img{
	width: 100%;
	max-width: 143px;
}

#backTop:hover{
	opacity: 0.6;
}

h2{
	letter-spacing: 0.1em;
	border-bottom: 4px double #9b6010;
	line-height: 2.5em;
}

h3{
	text-align: left;
	letter-spacing: 0.1em;
	border-bottom: 4px double #9b6010;
	line-height: 2em;
	background-color: #dac181;
	margin-bottom: 10px;
	padding:0 15px;
	font-size: 18px;
	background-image: url(../img/tex2_2.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 5%;
}

#mainBox{
	width: 100%;
	display: block;
	margin: auto;
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-attachment: fixed;
}

#contents{
	width: 100%;
	display: block;
	margin: auto;
	background-image: url(../img/bottom.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 100%;
	font-size: 110%;
}

.new{
	position: absolute;
	left: 0;
	bottom: 5%;
	z-index: 999;
	width: 100%;
	font-size:90%;
	color:#a03f2f;
	font-weight: bold;
}

.new2{
	position: absolute;
	bottom:23%;
	left: 78%;
	z-index: 999;
	font-size:80%;
	padding:1px  3px;
	color:#dac181;
	background-color: #800;
}

.new3{
	position: absolute;
	left: 0%;
	top: 0;
	z-index: 999;
	font-size:80%;
	padding:1px  3px;
	color:#dac181;
	background-color: #800;
	pointer-events: none;
}


/*////////////////////////////////////////////////////////////////////////
フッター
////////////////////////////////////////////////////////////////////////*/
footer{
	padding:0 0 30px;
	background-color: #fff;
	text-align: center;
	font-size: 80%;
	letter-spacing: 0.1em;
	position: relative;
	z-index: 1;
}

footer p.sns{
	background-color: #718a75;
	margin:0 auto 15px;
	padding: 10px 0;
	color: #fff;
}

footer p{
	margin-top: 1%;
}

footer a:hover{
	opacity:0.7;
}

#footerBanner{
	margin: 5px auto;
}

#footerBanner img{
	margin-bottom: 5px;
	width: 45%;
	max-width: 160px;
	border: solid 1px #aaa;
}
footer #companyBox a img {
	display: block;
	width: auto;
	margin: auto;
	margin-bottom: 9px;
}
footer #companyBox a {
	box-sizing: border-box;
	display: inline-block;
	color: #000;
	padding: 0;
	margin: 3px;
}
footer .link img{
	width: 50%;
	max-width: 500px;
	border: 1px solid #999;
}

footer .link img:hover{
	opacity: 0.6;
}


/*////////////////////////////////////////////////////////////////////////
ヘッダー
////////////////////////////////////////////////////////////////////////*/
header{
	border-bottom: 2px solid #718a75;
	position: relative;
	z-index: 999;
	background-image: url(../img/nav_bg.jpg);
}

header nav ul{
	text-align: center;
}


header nav ul li{
	width: 11.5%;
	position: relative;
	display: inline-block;
	padding: 45px 0;
	margin: 0 0.5%;
	overflow: hidden;
}

header nav ul li a{
	display: block;
}

header nav ul li img{
	width: 100%;
	max-width: 183px;
	background-image: url(../img/nav.png);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	transition: 0.3s ease-in-out;
}


header nav ul li img:nth-of-type(1){
	opacity: 0;
}


header nav ul li:hover img:nth-of-type(2),  header nav ul li.select img:nth-of-type(2){
	opacity: 0;
}

header nav ul li:hover img:nth-of-type(1),  header nav ul li.select img:nth-of-type(1){
	opacity: 1;
	background-image: url(../img/nav_select.png);
}


header nav ul li img:hover, header nav ul li.select img{
	background-image: url(../img/nav_select.png);
}

/*---------------------------------------------
サブナビ
---------------------------------------------*/
#subNavi{
	padding: 10px 0 15px;
	text-align: left;
	margin-bottom: 3%;
	position: relative;
	z-index: 1;
}

#subNavi .nomalNavi ul{
	width: 75%;
	margin: auto;
	margin-left: 25%;
}

#subNavi .nomalNavi li{
	width: 32%;
	max-width: 350px;
	display:inline-block;
	position: relative;
	margin:0 0.1%;
}

#subNavi .nomalNavi li img{
	width: 100%;
	filter: grayscale(100%);
	transition: filter 0.2s 0s;
}


#subNavi .nomalNavi li:hover img, #subNavi .nomalNavi .select img{
	filter: grayscale(0%);
	transition: filter 0.2s 0s;
}



/*キャラナビ*/
#subNavi .charaNavi ul{
	width: 75%;
	margin: auto;
	margin-left: 25%;
}

#subNavi .charaNavi li{
	display:inline-block;
	position: relative;
	width: 9.8%;
	max-width:73px;
	margin: 0.1%;
}

#subNavi .charaNavi li img{
	width: 100%;
	filter: grayscale(100%) opacity(100%);
	transition: filter 0.2s 0s;
	border: solid 1px #999;
}

#subNavi .charaNavi li img:hover, #subNavi .charaNavi .select img{
	opacity: 1;
	filter: grayscale(0%) opacity(100%);
	transition: filter 0.2s 0s;
}



/*ギャラリーナビ*/

#subNavi .galleryNavi ul{
	width: 75%;
	margin: auto;
	margin-left: 25%;
}

#subNavi .galleryNavi li, #subNavi .galleryNavi span{
	display:inline-block;
	position: relative;
	width:150px;
	margin-bottom: 0.5%;
	margin-right: 0.2%;
	border: solid 1px #999;
}

#subNavi .galleryNavi li a img{
	filter: grayscale(100%) opacity(100%);
}

#subNavi .galleryNavi li:last-child, #subNavi .galleryNavi span:last-child{
	margin-right: 0;
}

#subNavi .galleryNavi li img, #subNavi .galleryNavi span img{
	width: 100%;
}

#subNavi .galleryNavi li a img:hover, #subNavi .galleryNavi .select a img{
	opacity: 1;
	filter: grayscale(0%) opacity(100%);
}



/*////////////////////////////////////////////////////////////////////////
トップページ
////////////////////////////////////////////////////////////////////////*/
/*---------------------------------------------
キービジュ
---------------------------------------------*/
#keyImg{
	position: relative;
	background-image: url(../img/top/key.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	padding: 23.9%;
}

#keyImg .key{
	width: 100%;
	margin: auto;
	pointer-events: none;
}

#keyImg .key img{
	width: 100%;
}

#keyImg .catch{
	position: absolute;
	top: 85%;
	left: 0;
	z-index: 1;
	opacity: 1;
	width: 100%;
	margin: auto;
}

#keyImg .catch img{
	width: 35%;
	max-width: 680px;
}

#keyImg .logo{
	position: absolute;
	top: 12%;
	left: 0;
	z-index: 1;
	margin: auto;
	text-align: center;
	width: 100%;
}

#keyImg .logo img{
	width: 15%;
	max-width: 260px;
}

.dendo{
	position: absolute;
	top: 1%;
	left: 1%;
	width: 20%;
	max-width: 300px;
}

.dendo img{
	width: 100%;
}

/*---------------------------------------------
カウントダウン
---------------------------------------------*/
/*
.count{
	position: absolute;
	right: 1%;
	bottom: 1%;
	width: 25%;
	z-index: 999;
	max-width: 400px;
}
*/

.count{
	width: 24%;
	margin: 0.5%;
	max-width:300px;
	display: inline-block;
}

.count .sv img{
	width: 100%;
	border: solid 1px #9b6010;
}

.count .play-bt,
.count .stop-bt{
	display:block;
	cursor: pointer;
	background-image: none;
}

.count .stop-bt,
.count .play-bt:hover{
	opacity: 0.6;
	background-image: none;
}

.count .stop-bt img,
.count .play-bt:hover img{
	filter: brightness(100%);
}


/*---------------------------------------------
インフォ
---------------------------------------------*/

/*バナーエリア*/
.topBanner{
	margin-bottom: 2%;
}

.topBanner img{
	width: 24%;
	margin: 0.5%;
	max-width:300px;
	border: solid 1px #9b6010;
}

.topBanner img:hover{
	border: solid 1px #c45d4e;
	opacity: 0.6;
}

#topInfoAria{
	width: 100%;
	padding: 50px;
	text-align: center;
	border-top: solid 1px #718a75;
	border-bottom: solid 1px #718a75;
	position: relative;
	z-index: 1;
	background-image: url(../img/top/info_left.png);
	background-size: 50%;
	background-position: left bottom;
	background-repeat: no-repeat;
}

#topInfoAriaBg{
	background-image:url(../img/top/info_right.png);
	background-size: 50%;
	background-position:right top;
	background-repeat: no-repeat;
	background-color: #fff;
}

#topInfo{
	width: 100%;
	max-width: 1300px;
	margin: auto;
	border-top: solid 1px #ccc;
	padding-top: 2%;
}

#topInfo .topInfoAria{
	width: 50%;
	text-align: center;
	display:inline-block;
	position: relative;
	z-index: 1;
}

/*新着*/
#topInfo #newsBox{
	width:98%;
	display: inline-block;
	margin-right: 1%;
	border: 1px solid #718a75;
	height: 222px;
	padding:20px;
	line-height: 1.5em;
	overflow-y: scroll;
	text-align: left;
	margin-top: 10px;
	background-color: #fff;
}

#topInfo #newsBox span{
	background-color: #718a75;
	padding: 5px 10px;
	letter-spacing: 0.05em;
	display: block;
	color: #fff;
	margin-bottom: 3px;
}

#topInfo #newsBox p{
	padding: 0 10px 15px;
}

#topInfo #newsBox a{
	color: #a03f2f;
}


/*ツイッター*/
#topInfo #twAria{
	width: 98%;
	display: inline-block;
	margin-left: 1%;
	border: 1px solid #718a75;
	margin-top: 10px;
	background-color: #fff;
}

/*スペック*/
#specBg{
	width: 100%;
	padding: 3% 4%;
	text-align: center;
	background-color: #fff;
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}

#specBg #spec{
	text-align: center;
	width: 100%;
	display: block;
	max-width: 1300px;
	margin: auto;
	margin-top: 20px;
	position: relative;
	z-index: 1;
}

#specBg #spec .jacket{
	width: 25%;
	display: inline-block;
	text-align: left;
	margin-top: 3px;
}

#specBg #spec .jacket img{
	width: 100%;
	max-width: 305px;
}

#specBg #specAria{
	width: 50%;
	display: inline-block;
	margin-left: 1%;
}

#specBg table{
	letter-spacing: 0.05em;
	line-height: 1.8em;
	width: 100%;
	border-spacing:5px;
	text-align: left;
}

#specBg tr{
}

#specBg th{
	background-color: #718a75;
	color: #fff;
	text-align: left;
	padding: 5px 10px;
	vertical-align: middle;
}

#specBg td{
	padding-left: 10px;
	border-bottom: 1px solid #718a75;
	vertical-align: middle;
}

/*---------------------------------------------
光彩
---------------------------------------------*/	
.particletext.bubbles > .particle {
	opacity: 0;
	position: absolute;
	background-color: rgba(233, 255, 202, 0.8);
	-webkit-animation: bubbles 2s ease-in infinite;
		  animation: bubbles 2s ease-in infinite;
	border-radius: 100%;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}


@-webkit-keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000%);
  }
}

@keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000%);
  }
}



/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/
.story{
	text-align: center;
	position: relative;
	background-image: url(../img/story/title.png);
	background-repeat: no-repeat;
	background-position:  left top;
	background-size: 100%;
}

.storyBox{
	width: 100%;
	margin: auto;
	padding: 12% 3%;
	background-repeat: no-repeat;
	border-bottom: 3px double #718a75;
	background-position: center top;
	

}

.storyBox .txt{
	width: 60%;
	text-align: right;
	position: relative;
	font-family: "Stylish", sans-serif;
	font-size:max(1.4vw,22px);
	text-align: center;
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.storyBox .txt  img{
	width: 100%;
	max-width: 340px;
	margin-bottom:2%;
}
.storyBox .txt  span{
	color:#c82214;
}
.storyBox2{


}
.storyBox2 .txt{
	position: relative;
	left:55%;
	text-align: center;
	width: 35%;
}

.storyBox2 .txt{
	position: relative;
	right:0%!important;
}

/*////////////////////////////////////////////////////////////////////////
キャラ
////////////////////////////////////////////////////////////////////////*/
#chara{
	position: relative;
	background-image: url(../img/chara/title.png);
	background-repeat: no-repeat;
	background-position:  left top;
	background-size: 100%;
	padding:0.8% 2%; 
}

.charaBox{
	text-align: right;
	width: 100%;
	max-width: 1300px;
	margin: auto;
	position: relative;
	background-position:  center 10%;
	background-repeat: no-repeat;
	background-size: 80%;
	background-image: url(../img/chara/genji.png);
	z-index: 0;
}

.charaBox .img{
	position: relative;
	margin-top: -13%;
	display: inline-block;
	pointer-events: none;
	width: 77%;
	max-width: 1000px;
}

.charaImg{
	width: 100%;
}

.charaSerif{
	width: 70%;
	position: absolute;
	top: 40%;
	right:3%;
	opacity: 0;
	max-width: 520px;
}

.charaSerif img{
	width: 100%;
}

.charaTxt {
	width: 53%;
	position: absolute;
	top: 2%;
	left: 0;
}

.charaTxt img{
	width: 100%;
}
.charaTxt p{
	text-align: left;
	font-family: "Stylish", sans-serif;
	font-size:max(1.4vw,18px);
	line-height: 28px;
	letter-spacing: -0.02em;
	margin-left: 2%;
}

.charaTxt p.catch_txt{
	text-align: left;
	font-family: "Stylish", sans-serif;
	font-size:max(2.5vw,18px);
	letter-spacing: -0.05em;
	margin-left: 2%;
	margin-bottom: 1%;
}
.charaBox .txtAria{
	width: 53%;
	position: absolute;
	top: 24%;
	left: 0;
	text-align: left;
	margin-top: 0%;
	opacity: 0;
}

.charaBox .txt{ 
	border: solid 1px #dac181;
	background-image: url(../img/white_50.png);
	margin-bottom: 20px;
}

.charaBox .txtBg{ 
	padding: 6%;
	background-image: url(../img/tex2_2.png);
}


.charaTxt .target{
	text-align: left;
	margin-bottom: 3%;
}

.charaTxt .target img{
	width: 90% !important;
	max-width: 350px !important;
}

/*---------------------------------------------
サンプルボイス
---------------------------------------------*/
.btnBox .sv{
	width:23%;
	max-width:176px;
	display:inline-block;
	position:relative;
	margin: 0.5%;
}

.btnBox .sv img{
	width:100%;
}

.play-bt,
.stop-bt{
	display:block;
	background-image:url(../img/chara/voice_off.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100%;
	cursor: pointer;
}

.stop-bt,
.play-bt:hover,
.stop-bt.voice3{
	background-image:url(../img/chara/voice_on.png);
}

.stop-bt img,
.play-bt:hover img{
	filter: brightness(1000%);
}


.voice3{
	background-image:url(../img/chara/voice_off2.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100%;
}


.charaChange:hover{
	opacity: 0.6;
}

/*////////////////////////////////////////////////////////////////////////
ギャラリー
////////////////////////////////////////////////////////////////////////*/
#gallery{
	text-align: center;
	position: relative;
	background-image: url(../img/gallery/title.png);
	background-repeat: no-repeat;
	background-position:  left top;
	background-size: 100%;
	padding:1% 2% 10%; 
}

.galleryBox{
	width: 100%;
	max-width: 900px;
	margin: auto;
	text-align: left;
	padding-top: 1%;
}

.galleryBox img{
	width: 100%;
	max-width: 1000px;
	border: solid 1px #9b6010;
}

.galleryBox dl{
	margin-top: 50px;
}


.galleryBox dl dt{
	width: 7em;
	float: left;
	text-align: center;
	border: #111 1px solid;
	color: #fff;
	vertical-align: middle;
}

.galleryBox dd{
	margin-left: 8em;
	text-indent: -1em;
	vertical-align: middle;
}

.galleryBox dl dt.ruby{
	margin-top: 13px;
}

.galleryBox .c0{background-color: #ee869a;}
.galleryBox .c1{background-color: #9c308d;}
.galleryBox .c2{background-color: #005baa;}
.galleryBox .c3{background-color: #f83929;}
.galleryBox .c4{background-color: #006a66;}
.galleryBox .c5{background-color: #f8b400;}

.galleryBox .c6{background-color: #c0b280;}
.galleryBox .c7{background-color: #7891bc;}
.galleryBox .c8{background-color: #bcad1d;}
.galleryBox .c9{background-color: #cf6c08;}

.galleryBox .c99{background-color: #666;}


/*////////////////////////////////////////////////////////////////////////
システム
////////////////////////////////////////////////////////////////////////*/
#system{
	position: relative;
	background-image: url(../img/system/title.png);
	background-repeat: no-repeat;
	background-position:  left top;
	background-size: 100%;
	padding:10% 2%; 
}

#system .systemAria{
	width: 100%;
	max-width: 1300px;
	margin: auto;
}

#system .sysBox{
	background-image: url(../img/white_50.png);
	padding: 3%;
	border: solid 1px  #9b6010;
	margin-bottom: 10px;
	display: inline-block;
	width: 49%;
	margin: 0.5%;
}


#system .sysBox img{
	width: 100%;
	margin-bottom: 20px;
}

#system .sysBoxLong{
	width: 99%;
}

#system .sysBoxLong img{
	width: 49%;
	margin: 0.5%;
}

.sysBox p{
	text-align: left;
	letter-spacing: 0.05em;
	border-bottom: 4px double #9b6010;
	background-color: #dac181;
	margin-bottom: 20px;
	padding:5px 15px;
	font-size: 150%;
	background-image: url(../img/tex2_2.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 5%;
	font-weight: bold;
	vertical-align: bottom;
}

.sysBox p small{
	vertical-align: bottom;
	font-size: 55%;
	letter-spacing: 0;
}


/*////////////////////////////////////////////////////////////////////////
楽曲
////////////////////////////////////////////////////////////////////////*/
#sound{
	text-align: center;
	position: relative;
	background-image: url(../img/sound/title.png);
	background-repeat: no-repeat;
	background-position:  left top;
	background-size: 100%;
	padding:1% 2% 5%; 
}

#sound .soundBox{
	width: 100%;
	max-width: 1300px;
	margin: auto;
}

#sound .songBg small{
	vertical-align:middle;
	font-size: 70%;
}


.artist small{
	vertical-align: bottom;
	font-size: 70%;
}

#sound .song{
	width: 48%;
	max-width: 600px;
	display: inline-block;
	margin:1%;
	text-align: center;
	border: solid 1px #dac181;
	box-shadow: 10px 10px #dac181;
	background-image: url(../img/white_50.png);
}

#sound .songBg{
	padding: 8% 2%;
	background-image: url(../img/tex2.png);
	background-position: center bottom;
	background-repeat: repeat-x;
}

#sound .song p{
	font-size: 170%;
	font-weight: bold;
	margin-bottom: 20px;
	border-bottom: 1px solid #dac181;
	letter-spacing: 0.1em;
}

.artist{
	background-image: url(../img/white_50.png);
	border: solid 1px #dac181;
	padding:2%;
	margin: 2% auto;
	text-align: left;
	width: 100%;
	max-width: 1300px;
}

.artist img{
	width: 38%;
	max-width: 600px;
	margin-right: 2%;
	display: inline-block;
}

.artist .txt{
	width: 60%;
	display: inline-block;
}

.artist p{
	border-bottom:double 3px #dac181;
	display: block;
	font-weight: bold;
	margin-top: 10px;
}

.artist span{
	background-color:  #dac181;
	padding: 2px 20px;
}

.artist a span:hover{
	opacity: 0.6;
}

.artist .txt img.cdImg{
	width: 20%;
	margin-right:2%;
	display: inline-block;
}

.artist .cdTxt{
	width: 78%;
	display: inline-block;
}


/*---------------------------------------------
BGM
---------------------------------------------*/
.bgm .sv{
	width:49%;
	display:inline-block;
	position:relative;
	margin: 0.5%;
	font-weight: bold;
	border: solid 1px #9b6010;
}

.bgm .play-bt,
.bgm .stop-bt{
	display:block;
	background-image:url(../img/white_50.png);
	cursor: pointer;
	padding: 30px 0 20px;
}

.bgm .stop-bt,
.bgm .play-bt:hover{
	background-image:url(../img/tex2_2.png);
	background-repeat: repeat;
	background-size: 80px;
	background-color: #dac181;
}

.bgm .stop-bt img,
.bgm .play-bt:hover img{
	filter: brightness(1000%);
}


/*////////////////////////////////////////////////////////////////////////
スペシャル
////////////////////////////////////////////////////////////////////////*/
#special{
	text-align: center;
	position: relative;
	background-image: url(../img/special/title.png);
	background-repeat: no-repeat;
	background-position:  left top;
	background-size: 100%;
	padding:1% 2% 10%; 
}

.specialBox{
	width: 100%;
	margin: auto;
	max-width:1300px;
}

.movie{
	width: 49%;
	margin: 0.5%;
	background-color: #718a75;
	color: #fff;
	display: inline-block;
	border: solid 1px #718a75;
	line-height: 2.5em;
}


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

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


.item img.icon{
	width: 19.5%;	
	margin: 0.2%;
}

.item img.header{
	width: 49%;	
	margin: 0.5%;
	border: solid 1px #333;
}

/*---------------------------------------------
キャストコメント
---------------------------------------------*/
.castComment .comment{
	text-align: left;
	border: solid 1px #718a75;
	padding: 4%;
	background-color: #fff;
	margin: 20px auto;
	font-size: 90%;
}

.castComment .text{
	width: 80%;
	display: inline-block;
}

.castComment .img{
	width: 18%;
	margin-right:2%;
	display: inline-block;
	border: 1px solid #718a75;
}

.castComment .img img{
	width: 100%;
	max-width: 400px;
}

.castComment .qa{
	border-left: 10px solid #718a75;
	border-bottom: 3px double #718a75;
	padding: 10px;
	margin: 30px auto 10px;
	font-weight: bold;
}

.castComment .name{
	background-color:#718a75;
	background-image: url(../img/tex2_2.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 30px;
	font-size: 150%;
	padding: 15px;
	color: #fff;
}

.castComment .name, .castComment .name small{
	vertical-align: bottom;
}


/*---------------------------------------------
バックナンバー
---------------------------------------------*/
.backNumBox{
	width: 49%;
	margin: 0.5%;
	display: inline-block;
	border: solid 1px #666;
	padding: 2%;
	background-image: url(../img/white_50.png);
}

.backNumBox audio{
	width: 100%;
}

.backNumBox img{
	width: 100%;
	max-width: 400px;
	margin: auto;
	display: block;
	margin-bottom: 2%;
}


/*---------------------------------------------
発売記念SS
---------------------------------------------*/

#kinenSS{
	width:100%;
	display:block;
	margin-top: 50px;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
}

#kinenSS dt,
#kinenSS dd{
	display:inline-block;
}

#kinenSS dt{
	width:10%;
	border-radius: 50%;
	overflow: hidden;
	border: solid 3px #9b6010;
	vertical-align: middle;
}

#kinenSS dd{
	width:88%;
	padding:2%;
	margin-left: 2%;
	border-radius:10px;
	background-color: #fff;
	border:solid 2px #9b6010;
	position: relative;
	text-align: left;
	vertical-align: middle;
}

#kinenSS dd li{
	width: 31%;
	margin: 1.1%;
	padding: 10px 0;
	display: inline-block;
	text-align: center;
	background-color: #9b6010;
}

#kinenSS p{
	padding:10px 0;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	margin:50px auto;
}

#kinenSS dd:after{
	content: "";
	display: inline-block;
	position: absolute;
	top: 35%; 
	left: -24px;
	border: 12px solid transparent;
	border-right: 12px solid #9b6010;
}


dd.mono{
	text-align:center;
	background-image:none;
}

.ssIcon{
	width:100%;
}

.ssIcon img{width:100%;}

#kinenSS .c0{color: #9c308d;}
#kinenSS .c1{color: #005baa;}
#kinenSS .c2{color: #f83929;}
#kinenSS .c3{color: #006a66;}
#kinenSS .c4{color: #d79c00;}
#kinenSS .c5{color:#b8ac62;}
#kinenSS .c6{color:#7891bc;}
#kinenSS .c7{color:#92850d;}
#kinenSS .c8{color:#cf6c08;}




/*---------------------------------------------
SS
---------------------------------------------*/
.ssBox{
	width: 68%;
	display: inline-block;
	text-align: left;
}

.ssNavi{
	width: 30%;
	display: inline-block;
	text-align: left;
	margin-right: 2%;
}

.ssNavi li{
	padding: 5% 2%;
	border-bottom: double 3px #9b6010;
	background-image: url(../img/white_50.png);
}

.ssNavi li.select, .ssNavi li:hover{
	background-color: #dac181;
	background-image: url(../img/tex2_2.png);
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: 12%;
	cursor: pointer;
}


.ss{
	line-height: 1.8em;
	background-image: url(../img/white_50.png);
	padding: 3%;
}

.ss img{
	width: 100%;
	border: solid 1px #9b6010;
	margin-bottom: 10px;
}

/*////////////////////////////////////////////////////////////////////////
インフォ
////////////////////////////////////////////////////////////////////////*/
#info{
	text-align: center;
	position: relative;
	background-image: url(../img/info/title.png);
	background-repeat: no-repeat;
	background-position:  left top;
	background-size: 100%;
	padding:1% 2% 10%; 
	font-size: 90%;
}

.infoBox{
	width: 100%;
	margin: auto;
}

#info .spec{
	width: 80%;
	margin: auto;
	max-width:1000px;
}

#info .spec dl{
	margin: auto;
	max-width:800px;
}


#info .spec dt{
	margin-top: 15px;	
	text-align: center;
	letter-spacing: 0.1em;
	border-bottom: 4px double #9b6010;
	line-height: 2em;
	background-color: #dac181;
	padding:0 15px;
	background-image: url(../img/tex2_2.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 5%;
	font-weight: bold;
	
	
}

/*---------------------------------------------
特典
---------------------------------------------*/
.shop{
	width: 100%;
	max-width: 1300px;
	margin: auto;
	margin-top: 5%;
}

.bonusTxt{
	text-align: left;
}

.shopList{
	width: 45%;
	display: inline-block;
	border: solid 1px #dac181;
	margin: 0.5%;
	padding: 3%;
	background-color: #fff;
	text-align: left;
}
.shopList2{
	width: 91.5%;
	display: inline-block;
	border: solid 1px #dac181;
	margin: 0.5%;
	padding: 3%;
	background-color: #fff;
	text-align: left;
}

.shopName{
	font-size: 130%;
	text-align: center;
	letter-spacing: 0.1em;
	border-bottom: 4px double #9b6010;
	line-height: 2em;
	background-color: #dac181;
	margin-bottom: 20px;
	padding:0 15px;
	background-image: url(../img/tex2_2.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 5%;
	font-weight: bold;
}

.bonusImg img{
	width: 100%;
	margin-bottom: 30px;
}

.shopList dt, .shop dt, .limited dt, .pre dt{
	color: #9b6010;
	padding:10px;
	margin: 5px auto;
	border-left: 6px solid  #9b6010;
	border-bottom: 1px solid  #9b6010;
}

.set{
	background-color: #eee;
	padding:20px;
	margin: 15px auto;
	background-image: url(../img/tex2_2.png);
	background-repeat: repeat-x;
	background-position: center top;
}

.set strong{
	color: #038;
	font-size: 130%;
}
.set p{
	display: inline-block;
}
.set span{
	display: inline-block;
	width: 250px;
	font-size:max(1vw,22px);
	vertical-align: bottom;
	margin-left: 2%;
}	
.setTitle{
	font-size: 120%;
	margin-bottom: 15px;
	color: #a03f2f;
	font-weight: bold;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho",serif;
}

.shopLink{
	text-align: center;
	background-color:#800;
	color: #fff;
	padding: 10px 0;
	margin-top: 20px;
	width: 50%;
	margin-left: 10px;
	vertical-align: middle;
}


.shopLink:hover{
	opacity: 0.6;
}

#info p.coution{
	color: #333;
	font-size: 85%;
	margin-top: 6%;
}


#info h3{
	font-size: 120%;
}

.arasuji{
	background-image: url(../img/white_50.png);
	border: 1px solid  #9b6010;
	padding: 3%;
	text-align: left;
	font-size: 90%;
}

.arasuji p{
	border-bottom: 3px double #dac181;
	margin-bottom: 5px;
}


.patch{
	width: 100%;
	max-width: 1000px;
	display: block;
	border: solid 1px #dac181;
	margin: 2% auto;
	padding: 3%;
	background-color: #fff;
	text-align: left;
}

.patch .txt{
	background-color: #ddd;
	padding: 3%;
}

.patch p{
	padding: 5px 0;
	margin-bottom: 15px;
	border-bottom: 3px double #aaa;
	font-size: 120%;
	font-weight: bold;
}

/*////////////////////////////////////////////////////////////////////////
アンケート
////////////////////////////////////////////////////////////////////////*/
.enquete{
	padding:5% 2% 10%; 
}

.enquete .txt{
	width: 100%;
	max-width:1000px;
	margin: auto;
}

.kiyaku{
	border: solid 1px #ccc;
	padding: 20px;
	background-color: #fff;
}
	
.kiyaku a{
	color: #c45d4e;
}
	
.kiyaku a:hover{
	opacity: 0.6;
}
	



/*######################################################################
メディアクエリ
######################################################################*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1300px) {
/*//////////////////////////////////////////////////////////////////////*/
/*---------------------------------------------
サブナビ
---------------------------------------------*/
#subNavi .nomalNavi li{
	width: 32.5%;
}
	
/*ギャラリーナビ*/
#subNavi .galleryNavi li, #subNavi .galleryNavi span{
	width:16.46%;
}
	
.storyBox{
	background-size: 130%;
}
	
.storyBox:first-child{
	padding-top: 20%;
}

/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 800px) {
/*//////////////////////////////////////////////////////////////////////*/
br.txtCutNone{display:block;}
br.txtCut{display:none;}
.txtCutNone{display:block;}
.txtCut{display:none;}
.txtCut2{display:none;}
	

h2{
	font-size: 130%;
	letter-spacing: -0.05em;
}
	
body{
	min-width: inherit;
	background-position: 92% bottom;
	background-attachment: inherit;
	font-size: 13px;
}
	
#mainBox{
	background-position: 92% bottom;
	background-attachment: inherit;
}
	
	
#contents{
	background-size: 150%;
}

	
.new{
	font-size:1vw;
}
	

header nav ul {
	padding: 1% 0;
}

header nav ul li{
	width: 24%;
	position: relative;
	display: inline-block;
	padding: 4% 2%;
	max-width: 183px;
}

header nav ul li img{
	width: 80%;
}
		
	
/*---------------------------------------------
サブナビ
---------------------------------------------*/
#subNavi{
	margin-bottom: 0;
}

	
#subNavi .nomalNavi li{
	width: 49.5%;
}
	
	
/*キャラナビ*/
#subNavi .charaNavi ul, #subNavi .galleryNavi ul,#subNavi .nomalNavi ul{
	width: 100%;
	margin-left: 0;
	margin-top: 8%;
}
	
	
/*////////////////////////////////////////////////////////////////////////
トップページ
////////////////////////////////////////////////////////////////////////*/
/*---------------------------------------------
キービジュ
---------------------------------------------*/
#keyImg{
	position: relative;
	background-image: url(../img/top/key.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 123%;
	padding: 29.4%;
}

	
/*---------------------------------------------
カウントダウン
---------------------------------------------*/
.count{
	width: 48%;
	margin: 1%;
}

	
/*---------------------------------------------
インフォ
---------------------------------------------*/
	
.topBanner img{
	width: 48%;
	margin: 1%;
}
	
	
#topInfoAria{
	padding: 3%;
	background-size: 120%;
}

#topInfoAriaBg{
	background-size: 80%;
	background-position: 200px top;
}
	
	
	
#topInfo{
	width: 100%;
	max-width: 1300px;
	margin: auto;
}

#topInfo .topInfoAria{
	width: 100%;
	display:block;
	margin-bottom: 3%;
}

#topInfo img, .topInfoAria img{
	width: 30%;
	max-width: 204px;
}
	
	
/*新着*/
#topInfo #newsBox{
	width:100%;
	display: block;
	margin-right:0;
	padding:3%;
}

/*ツイッター*/
#topInfo #twAria{
	width: 100%;
	display: block;
	margin-left: 0;
}
	

/*スペック*/
#specBg{
	padding:10% 3%;
	background-position:right bottom;
}
	
#specBg .title{
	width: 32%;
	max-width: 204px;
}

#specBg #spec .jacket{
	width: 100%;
	display: block;
	text-align: center;
}

#specBg #spec .jacket img{
	width: 100%;
	max-width: 650px;
	margin:0% auto 5%;
}

#specBg #specAria{
	width: 100%;
	display: block;
	margin-left: 0;
}

#specBg table{
	line-height: 1.3em;
}

#specBg th{
	width: 40%;
}
	
/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/
.story{
	background-size: 150%;
}
.storyBox .txt{
	width: 70%;
}
.storyBox2 .txt{
	left: 15%;
	top:70%;
}
.storyBox .txt br{
	 display: none;
}

	
/*////////////////////////////////////////////////////////////////////////
キャラ
////////////////////////////////////////////////////////////////////////*/
#chara{
	background-size: 150%;
}
	
	
.charaSerif{
	top: 50%;
	right:3%;
	max-width: 550px;
}

.charaTxt {
	width: 60%;
	position: absolute;
	top: 5%;
	text-align: left;
}

.charaBox .txtAria{
	width: 100%;
	top: inherit;
	left: inherit;
	position: relative;
	margin-top: -20%;
	margin-bottom: 10%;
	font-size: 80%;
}

	
/*---------------------------------------------
サンプルボイス
---------------------------------------------*/
.btnBox{
	width: 80%;
	margin: auto;
	text-align: center;
}

	
/*////////////////////////////////////////////////////////////////////////
ギャラリー
////////////////////////////////////////////////////////////////////////*/
#gallery{
	background-size: 150%;
}
	
/*////////////////////////////////////////////////////////////////////////
システム
////////////////////////////////////////////////////////////////////////*/
#system{
	background-size: 150%;
}
	
#system .sysBox{
	margin-bottom: 5px;
	display: block;
	width: 100%;
	margin: 3% auto;
}

#system .sysBox img{
	margin-bottom: 10px;
}

#system .sysBoxLong{
	width: 100%;
	margin: 3% auto;
}

#system .sysBoxLong img{
	width: 100%;
	margin:0.5% auto;
}
	
#system .sysBox p{
	font-size: 120%;
	margin-bottom: 10px;
}

/*////////////////////////////////////////////////////////////////////////
楽曲
////////////////////////////////////////////////////////////////////////*/
#sound{
	background-size: 150%;
}
	
#sound .song{
	width: 100%;
	max-width:inherit;
	display: block;
	margin:5% auto;
}
	

.artist img{
	width: 95%;
	margin-right: 0;
	margin:3% auto 0;
	display: block;
}

.artist .txt{
	width: 100%;
	display: block;
	padding: 3%;
}

.artist .txt img.cdImg{
	width: 100%;
	max-width: 250px;
	margin-right:0%;
	display: block;
	margin: auto;
	margin-bottom: 10px;
}

.artist .cdTxt{
	width: 100%;
	display: block;
	margin: auto;
	margin-bottom: 10px;
}


	
	

/*---------------------------------------------
BGM
---------------------------------------------*/
.bgm .sv{
	width:100%;
	display:block;
	position:relative;
	margin: 0.5%;
	font-weight: bold;
	border: solid 1px #9b6010;
}


/*////////////////////////////////////////////////////////////////////////
スペシャル
////////////////////////////////////////////////////////////////////////*/
#special{
	background-size: 150%;
}

.movie{
	width: 100%;
	margin: 2% auto;
	display: block;
}

	
/*---------------------------------------------
バックナンバー
---------------------------------------------*/
.backNumBox{
	width: 100%;
	margin: 1% auto;
}
	
	
/*---------------------------------------------
発売記念SS
---------------------------------------------*/
#kinenSS dt{
	width:14%;
	vertical-align: top;
}

#kinenSS dd{
	width:80%;
	margin-left: 5%;
	vertical-align: top;
}

#kinenSS dd:after{
	top: 15%; 
}


	
	
/*////////////////////////////////////////////////////////////////////////
インフォ
////////////////////////////////////////////////////////////////////////*/
#info{
	background-size: 150%;
	font-size: 100%;
}

#info .spec{
	width: 90%;
	margin: auto;
}
	
.shopList{
	width: 100%;
	display: block;
	margin: 2% auto;
}
	
	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 480px) {
/*//////////////////////////////////////////////////////////////////////*/
body{
	font-size:12px;
}
	
	
#backTop{
	width: 20%;
	text-align: right;
}

#backTop img{
	width:100%;
	max-width:inherit;
}
	
footer{
	padding-bottom: 20%;
}

.new{
	bottom:-10%;
}
	
/*////////////////////////////////////////////////////////////////////////
ヘッダー
////////////////////////////////////////////////////////////////////////*/
/*---------------------------------------------
サブナビ
---------------------------------------------*/
#subNavi .charaNavi li{
	width: 16.4%;
}
	
.story, #chara, #gallery, #system, #sound, #special, #info{
	background-size: 200%;
}

	
/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/
.storyBox{
	padding: 15% 3% 5%;
	background-size: 200%;
	background-position: 80% top;
}

.storyBox .txt{
	width: 100%;
	text-align: center;
	margin-top: 35%;
}

.storyBox .txt  img{
	width: 90%;
}

.storyBox2{
	background-position: 13% top;
	left:5%;
}

.storyBox2 .txt{
	text-align: center;
}


/*////////////////////////////////////////////////////////////////////////
ギャラリー
////////////////////////////////////////////////////////////////////////*/
.galleryBox dl{
	margin-top: 30px;
}

.galleryBox dl{
	font-size: 80%;
}

.galleryBox dl dt.ruby{
	margin-top: 13px;
}

	
	
.infoBox{
	font-size: 100%;
}
	
	
/*////////////////////////////////////////////////////////////////////////
スペシャル
////////////////////////////////////////////////////////////////////////*/	
/*---------------------------------------------
キャストコメント
---------------------------------------------*/
.castComment .comment{
	padding: 5% 5% 40%;
	background-position:right bottom;
	background-size: 50%;
}

.castComment .text{
	width: 100%;
	display: block;
	margin: auto;
	text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}

.castComment .img{
	width: 50%;
	display: block;
	margin: auto;
	margin-bottom: 10px;
}


.castComment .name{
	background-size: 20%;
	font-size: 130%;
	font-weight: bold;
	padding: 15px;
	text-shadow: none;
}


	
/*---------------------------------------------
SS
---------------------------------------------*/
.ssBox{
	width: 100%;
	display: block;
}

.ssNavi{
	width: 100%;
	display: block;
	text-align: center;
	margin-right: 0%;
	margin-bottom: 10px;
}

.ssNavi li{
	width: 49%;
	display: inline-block;
	padding: 1%;
}

.ssNavi li.select, .ssNavi li:hover{
	background-color: #dac181;
	background-image: url(../img/tex2_2.png);
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: 12%;
	cursor: pointer;
}


.ss{
	line-height: 1.8em;
}

.ss img{
	width: 100%;
	border: solid 1px #9b6010;
	margin-bottom: 10px;
}


	
	
/*//////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////*/
}