@charset "UTF-8";

/*━━━━━━━━━━━━━━
▼共通のスタイル
━━━━━━━━━━━━━━━*/

html {overflow:auto; min-width: 980px;}
html,body {height: 100%;}
body {
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro", "ＭＳ ゴシック",
	"MS Gothic", monospace;
	font-size: 14px;
	color: #FFF;
	min-width: 980px;
}

/*━━━━━━━━━━━━━━
▼link設定
━━━━━━━━━━━━━━━*/
a {
	text-decoration: none;
	color: #FFCC00;
	transition: color 0.6s;
}
a:hover {
	color: #FF0000;
}

/*━━━━━━━━━━━━━━
▼ロード設定
━━━━━━━━━━━━━━━*/
#load_bg {
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	background: rgba(255,255,255,1.0);
	z-index: 100;
}
#loader {
	width: 300px; height: 210px;
	margin: 250px auto 0 auto;
	color: #FFF;
	position: relative;
	z-index: 101;
}
#loadChara {
	height: 251px; height: 133px;
	position: absolute;
	top: 0px; left: 0px;
	opacity: 0.6;
}
#loader p {
	position: absolute;
	top: 100px; left: 95px;
	animation: anime2 2s infinite ease-in-out;
}


@keyframes anime1 {
    from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@keyframes anime2 {
    0% {opacity:0.0;}
    50% {opacity:1.0;}
    100% {opacity:0.0;}
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//header
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#wrap {
	width: 100%;
	position: relative;
	height: auto !important;
	min-height: auto;
}

#line {
	height: 10px;
	background: #b62319;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	margin: 0 0 10px 0;
}
#headWrap {
	width: 100%;
	background: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,0.0));
}
header {
	width: 980px; height: 100px;
	margin: 0 auto 20px;
	overflow: hidden;
}

header h1 {
	width: 140px; height: 67px;
	float: left;
	background: url(../img/global.png) no-repeat 0 0;
}
header #global {
	width: 840px; height: 67px;
	float: right;
	background: url(../img/global.png) no-repeat -140px 0;
}
header #global li {
	height: 67px;
	float: left;
}
header #global #gmenu01 {width: 65px;}
header #global #gmenu02 {width: 80px;}
header #global #gmenu03 {width: 145px;}
header #global #gmenu04 {width: 125px;}
header #global #gmenu05 {width: 80px;}
header #global #gmenu06 {width: 115px;}
header #global #gmenu07 {width: 100px;}
header #global #gmenu08 {width: 130px;}


header h1 a,header #global a {
	width: 100%; height: 100%;
	display: block;
	text-indent: -9999px;
	transition: opacity 0.6s;
	opacity: 0;
}
header #global a:hover {opacity: 1.0;}

header #global #gmenu01 a {background: url(../img/global.png) no-repeat -140px -67px;}
header #global #gmenu02 a {background: url(../img/global.png) no-repeat -205px -67px;}
header #global #gmenu03 a {background: url(../img/global.png) no-repeat -285px -67px;}
header #global #gmenu04 a {background: url(../img/global.png) no-repeat -430px -67px;}
header #global #gmenu05 a {background: url(../img/global.png) no-repeat -555px -67px;}
header #global #gmenu06 a {background: url(../img/global.png) no-repeat -635px -67px;}
header #global #gmenu07 a {background: url(../img/global.png) no-repeat -750px -67px;}
header #global #gmenu08 a {background: url(../img/global.png) no-repeat -850px -67px;}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//contents
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#contents {
	width: 100%;
	position: relative;
	overflow: hidden;
}
#topInner {
	width: 100%;
	background: rgba(255,255,255,0.75);
	position: absolute;
	z-index: 10;
	padding: 15px 0 0 0;
}
#inner {
	width: 980px; min-height: 800px;
	margin: 0 auto;
	position: relative;
}

#inner h2 {
	width: 960px; height: 75px;
	margin: 0 auto;
	text-indent: -9999px;
}
#pStory {background: url(../img/page_story.png)no-repeat;}
#pCharacter {background: url(../img/page_chara.png)no-repeat;}
#pGlossary {background: url(../img/page_glossary.png)no-repeat;}
#pStage {background: url(../img/page_stage.png)no-repeat;}
#pGraphic {background: url(../img/page_graphic.png)no-repeat;}
#pSpecial {background: url(../img/page_special.png)no-repeat;}
#pCount {background: url(../img/t_countdown.png)no-repeat;}
#pProduct {background: url(../img/page_product.png)no-repeat;}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//Top
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.top {
	/*background: url(../img/main_visual.jpg)no-repeat center top;*/
}
.mainTop {

}

.space:before {
	content: "";
	display: block;
	margin-top: 80px; 
	padding-top: 55%;
}

#contents img#visual01 {
	width: 100%; min-width: 980px;
	height: auto;
	position: fixed;
	top: 100px; left: 50%;
	margin: 0 0 0 -50%;
	box-shadow: 0 0 5px rgba(0,0,0,0.35);
}



#copy,#logo,#price,#topMv {position: absolute;}

#copy {
	width: 550px; height: 65px;
	top: 340px; left: 50px;
}
#logo {
	width: 577px; height: 304px;
	top: 140px; left: 0px;
}
#price {
	width: 642px; height: 121px;
	bottom: 270px; left: 10px;
}
#bana {
	width: 910px; height: 120px;
	margin: 0 auto 10px;
	/*background: #FFF;*/
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
#bana li {
	width: 450px; height: 120px;
	float: left;
	margin-right: 10px;
}
#bana li:last-child {
	margin-right: 0;
}
#bana:after {
	content: "";
	clear: both;
	display: block;
}

#bana a,#promo a {transition: all 0.6s;}
#bana a:hover,#promo a:hover {opacity: 0.6;}

#promo {
	width: 910px; height: 120px;
	margin: 0 auto 50px;
	/*background: #FFF;*/
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#news {
	width: 436px; height: 80px;
	position: absolute;
	bottom: 410px; left: 95px;
	background: url(../img/bg_news.png) no-repeat;
	padding: 36px 10px 0;
}
#newsInner {
	width: 436px; height: 70px;
	overflow: auto;
	color: #000;
}
#newsInner .date {
	font-size: 12px;
	color: #FFF;
	background: #b62319;
	border-radius: 12px;
	display: inline-block;
	padding: 3px 10px;
	margin: 0 0 10px 0;
}
#newsInner ul {
	margin: 0 0 25px 10px;
}
#newsInner ul li:before {
	content: "\f0da";
	font-family: fontawesome;
	color: #b62319;
	margin-right: 5px;
}
#newsInner ul a {
	color: #b62319;
	transition: all 0.6s;
}
#newsInner ul a:hover {
	color: #ffa627;
}

#topMv {
	width: 302px; height: 177px;
	bottom: 540px; left: 175px;
}
#topMv a {
	display: block;
	width: 302px; height: 177px;
	position: relative;
	text-decoration: none;
	box-shadow: 0 0 4px rgba(54,54,54,0.4);
}
#topMv a:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.5);
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 2;
}
#topMv a:after {
	content: "\f04b";
	font-family: fontAwesome;
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	position: absolute;
	top: 71px;
	left: 134px;
	text-align: center;
	font-size: 20px;
	color: #FFF;
	background: transparent linear-gradient(to top, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.6) 100%) repeat scroll 0% 0%;
	border: solid 1px rgba(255,255,255,1);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	transition: all 0.3s;
	z-index: 2;
}
#topMv a:hover:before {
	opacity: 1;
}
#topMv a:hover:after {
	transform: scale(1.3,1.3);
	-webkit-transform: scale(1.3,1.3);
}
#topMv img {
	vertical-align: bottom;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#topMv img.out {
	animation: fadeout 0.6s linear 0s 1 normal;
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}
@keyframes fadeout {
	0%  {opacity: 1;}
	100%{opacity: 0;}
}
@-webkit-keyframes fadeout {
	0%  {opacity: 1;}
	100%{opacity: 0;}
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//story
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.story {
	background: url(../img/story_bg.jpg) no-repeat center -100px;
	background-attachment: fixed;
}
#prologue {
	width: 940px; height: 1550px;
	margin: 0 auto 60px;
	background: url(../img/t_story.png) no-repeat;
}
#prologue p {
	display: none;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//character
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.chara {
	background: url(../img/chara_bg.jpg) no-repeat center 0px;
	background-attachment: fixed;
}
#chBase {
	width: 910px; height: 640px;
	margin: 0 auto 15px;
	position: relative;
	box-shadow: 0 0 3px rgba(165,165,165,0.3);
}
#chName {
	position: absolute;
	left: 30px; top: 30px;
}
#chName2 {
	position: absolute;
	left: 30px; top: 50px;
}
#chVoice {
	position: absolute;
	left: 1px; top: 115px;
}
#chText1 {
	font-size: 16px;
	color: #000;
	width: 460px;
	padding: 8px 10px;
	border-radius: 3px;
	border: solid 1px rgba(165,165,165,1.0);
	background: rgba(255,255,255,0.6);
	box-shadow: 0 0 3px rgba(165,165,165,0.3);
	position: absolute;
	left: 30px; top: 150px;
}
#chText2 {
	font-size: 14px;
	line-height: 130%;
	color: #000;
	width: 460px;
	padding: 8px 10px;
	border-radius: 3px;
	border: solid 1px rgba(165,165,165,1.0);
	background: rgba(255,255,255,0.6);
	box-shadow: 0 0 3px rgba(165,165,165,0.3);
	position: absolute;
	left: 30px; top: 257px;
}
#chProf {
	position: absolute;
	left: 1px; top: 220px;
}

#chCopy {
	position: absolute;
	left: 30px; bottom: 20px;
}

#param {
	width: 480px;
	border: 1px solid #CCC;
	overflow: hidden;
	position: absolute;
	bottom: 90px;
	left: 30px;
}
#param table {
	width: 240px;
	float: left;
}
#param th {
	color: #FFF;
	padding: 2px;
	text-align: center;
	background: rgba(0,0,0,0.7);
}
#param td {
	color: #000;
	padding: 2px 8px;
	text-align: left;
	background: rgba(255,255,255,0.6);
}
#param th,
#param td {
	border: solid 1px rgba(165,165,165,1.0);
}



.chara01 {background: url(../img/ch_base01.jpg) no-repeat;}
.chara02 {background: url(../img/ch_base02.jpg) no-repeat;}
.chara03 {background: url(../img/ch_base03.jpg) no-repeat;}
.chara04 {background: url(../img/ch_base04.jpg) no-repeat;}
.chara05 {background: url(../img/ch_base05.jpg) no-repeat;}
.chara06 {background: url(../img/ch_base06.jpg) no-repeat;}
.chara07 {background: url(../img/ch_base07.jpg) no-repeat;}
.chara08 {background: url(../img/ch_base08.jpg) no-repeat;}
.chara09 {background: url(../img/ch_base09.jpg) no-repeat;}
.chara10 {background: url(../img/ch_base10.jpg) no-repeat;}
.chara11 {background: url(../img/ch_base11.jpg) no-repeat;}
.chara12 {background: url(../img/ch_base12.jpg) no-repeat;}
.chara13 {background: url(../img/ch_base13.jpg) no-repeat;}
.chara14 {background: url(../img/ch_base14.jpg) no-repeat;}
.chara15 {background: url(../img/ch_base15.jpg) no-repeat;}
.chara16 {background: url(../img/ch_base16.jpg) no-repeat;}
.chara17 {background: url(../img/ch_base17.jpg) no-repeat;}
.chara18 {background: url(../img/ch_base18.jpg) no-repeat;}
.chara19 {background: url(../img/ch_base19.jpg) no-repeat;}
.chara20 {background: url(../img/ch_base20.jpg) no-repeat;}
.chara21 {background: url(../img/ch_base21.jpg) no-repeat;}
.chara22 {background: url(../img/ch_base22.jpg) no-repeat;}
.chara23 {background: url(../img/ch_base23.jpg) no-repeat;}
.chara24 {background: url(../img/ch_base24.jpg) no-repeat;}
.chara25 {background: url(../img/ch_base25.jpg) no-repeat;}
.chara26 {background: url(../img/ch_base26.jpg) no-repeat;}


#chNavi {
	width: 910px;
	margin: 0 auto;
}
#chNavi:after {
	content: "";
	clear: both;
	display: block;
}
#chNavi li {
	width: 105px; height: 70px;
	float: left;
	margin: 0 10px 10px 0;
}
#chNavi li:nth-child(8n) {
	margin: 0 0 10px 0;
}

#chNavi #navi1 {background: url(../img/nv_chr01.png) no-repeat 0 0;}
#chNavi #navi2 {background: url(../img/nv_chr02.png) no-repeat 0 0;}
#chNavi #navi3 {background: url(../img/nv_chr03.png) no-repeat 0 0;}
#chNavi #navi4 {background: url(../img/nv_chr04.png) no-repeat 0 0;}
#chNavi #navi5 {background: url(../img/nv_chr05.png) no-repeat 0 0;}
#chNavi #navi6 {background: url(../img/nv_chr06.png) no-repeat 0 0;}
#chNavi #navi7 {background: url(../img/nv_chr07.png) no-repeat 0 0;}
#chNavi #navi8 {background: url(../img/nv_chr08.png) no-repeat 0 0;}
#chNavi #navi9 {background: url(../img/nv_chr09.png) no-repeat 0 0;}
#chNavi #navi10 {background: url(../img/nv_chr10.png) no-repeat 0 0;}
#chNavi #navi11 {background: url(../img/nv_chr11.png) no-repeat 0 0;}
#chNavi #navi12 {background: url(../img/nv_chr12.png) no-repeat 0 0;}
#chNavi #navi13 {background: url(../img/nv_chr13.png) no-repeat 0 0;}
#chNavi #navi14 {background: url(../img/nv_chr14.png) no-repeat 0 0;}
#chNavi #navi15 {background: url(../img/nv_chr15.png) no-repeat 0 0;}
#chNavi #navi16 {background: url(../img/nv_chr16.png) no-repeat 0 0;}
#chNavi #navi17 {background: url(../img/nv_chr17.png) no-repeat 0 0;}
#chNavi #navi18 {background: url(../img/nv_chr18.png) no-repeat 0 0;}
#chNavi #navi19 {background: url(../img/nv_chr19.png) no-repeat 0 0;}
#chNavi #navi20 {background: url(../img/nv_chr20.png) no-repeat 0 0;}
#chNavi #navi21 {background: url(../img/nv_chr21.png) no-repeat 0 0;}
#chNavi #navi22 {background: url(../img/nv_chr22.png) no-repeat 0 0;}
#chNavi #navi23 {background: url(../img/nv_chr23.png) no-repeat 0 0;}
#chNavi #navi24 {background: url(../img/nv_chr24.png) no-repeat 0 0;}
#chNavi #navi25 {background: url(../img/nv_chr25.png) no-repeat 0 0;}
#chNavi #navi26 {background: url(../img/nv_chr26.png) no-repeat 0 0;}


#chNavi #navi1 a {background: url(../img/nv_chr01.png) no-repeat 0 -70px;}
#chNavi #navi2 a {background: url(../img/nv_chr02.png) no-repeat 0 -70px;}
#chNavi #navi3 a {background: url(../img/nv_chr03.png) no-repeat 0 -70px;}
#chNavi #navi4 a {background: url(../img/nv_chr04.png) no-repeat 0 -70px;}
#chNavi #navi5 a {background: url(../img/nv_chr05.png) no-repeat 0 -70px;}
#chNavi #navi6 a {background: url(../img/nv_chr06.png) no-repeat 0 -70px;}
#chNavi #navi7 a {background: url(../img/nv_chr07.png) no-repeat 0 -70px;}
#chNavi #navi8 a {background: url(../img/nv_chr08.png) no-repeat 0 -70px;}
#chNavi #navi9 a {background: url(../img/nv_chr09.png) no-repeat 0 -70px;}
#chNavi #navi10 a {background: url(../img/nv_chr10.png) no-repeat 0 -70px;}
#chNavi #navi11 a {background: url(../img/nv_chr11.png) no-repeat 0 -70px;}
#chNavi #navi12 a {background: url(../img/nv_chr12.png) no-repeat 0 -70px;}
#chNavi #navi13 a {background: url(../img/nv_chr13.png) no-repeat 0 -70px;}
#chNavi #navi14 a {background: url(../img/nv_chr14.png) no-repeat 0 -70px;}
#chNavi #navi15 a {background: url(../img/nv_chr15.png) no-repeat 0 -70px;}
#chNavi #navi16 a {background: url(../img/nv_chr16.png) no-repeat 0 -70px;}
#chNavi #navi17 a {background: url(../img/nv_chr17.png) no-repeat 0 -70px;}
#chNavi #navi18 a {background: url(../img/nv_chr18.png) no-repeat 0 -70px;}
#chNavi #navi19 a {background: url(../img/nv_chr19.png) no-repeat 0 -70px;}
#chNavi #navi20 a {background: url(../img/nv_chr20.png) no-repeat 0 -70px;}
#chNavi #navi21 a {background: url(../img/nv_chr21.png) no-repeat 0 -70px;}
#chNavi #navi22 a {background: url(../img/nv_chr22.png) no-repeat 0 -70px;}
#chNavi #navi23 a {background: url(../img/nv_chr23.png) no-repeat 0 -70px;}
#chNavi #navi24 a {background: url(../img/nv_chr24.png) no-repeat 0 -70px;}
#chNavi #navi25 a {background: url(../img/nv_chr25.png) no-repeat 0 -70px;}
#chNavi #navi26 a {background: url(../img/nv_chr26.png) no-repeat 0 -70px;}

#chNavi a {
	width: 100%; height: 100%;
	display: block;
	text-indent: -9999px;
	transition: opacity 0.6s;
	opacity: 0;
}
#chNavi a:hover {opacity: 1.0;}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//glossary
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.glossary {
	background: url(../img/chara_bg.jpg) no-repeat center 0px;
	background-attachment: fixed;
}
#gInner {
	width: 870px;
	margin: 0 auto;
}
.section {
	overflow: hidden;
	padding-bottom: 100px;
}
.gTitle,.glosImage1 {margin-bottom: 15px;}
.glosImage2 {
	width: 290px;
	float: left;
}
.glosAbout {
	width: 560px;
	float: right;
}
.glosCap {
	font-size: 14px;
	line-height: 150%;
	color: #FFF;
	padding: 10px;
	background: #8d7e7e;
}
.line01 {
	clear: both;
	height: 100px;
	background: url(../img/line01.png)no-repeat left center;
}

.gBox {
	overflow: hidden;
	border-bottom: solid 1px #BBB;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.gThum {
	width: 225px;
	float: left;
}
.gCap {
	width: 625px;
	float: right;
}
.gCap img {
	display: block;
	margin-bottom: 10px;
}
.gCap p {
	font-size: 14px;
	line-height: 120%;
	color: #423838;
	padding-left: 17px;
	text-shadow: 0 0 3px #FFF,0 0 3px #FFF,
	0 0 3px #FFF,0 0 3px #FFF;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//stage
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.stage {
	background: url(../img/chara_bg.jpg) no-repeat center 0px;
	background-attachment: fixed;
}

#stageHead {
	width: 910px; height: 580px;
	background: url(../img/p_stage00.png) no-repeat;
	position: relative;
	margin: 0 auto 50px;
}
.stageCap {
	font-size: 14px;
	line-height: 180%;
	color: #FFF;
	width: 820px;
	padding: 10px;
	background: rgba(12,52,12,0.75);
	border: solid 1px #FFF;
	border-radius: 5px;
	box-shadow: 0 0 3px rgba(12,52,12,0.5);
	position: absolute;
	bottom: 30px; left: 35px;
}

.stBox {
	width: 910px;
	margin: 0 auto 50px;
	overflow: hidden;
}
.stagePict {margin-bottom: 15px;}
.face {
	width: 206px;
	float: left;
}
.stageAbout {
	width: 685px;
	float: right;
}
.stageAbout p {
	font-size: 14px;
	line-height: 150%;
	color: #FFF;
	padding: 10px;
	background: rgba(12,52,12,0.9);
	border-radius: 5px;
	position: relative;
}
.stageAbout p:after{
	content: "";
	position: absolute;
	top: 50%; left: -10px;
	margin-top: -10px;
	display: block;
	width: 0px; height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent rgba(12,52,12,0.9) transparent transparent;
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//graphic
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.graphic {
	background: url(../img/chara_bg.jpg) no-repeat center 0px;
	background-attachment: fixed;
}
#graphicList {
	width: 858px;
	margin: 0 auto;
	padding-bottom: 40px;
}
#graphicList:after {
	content: "";
	clear: both;
	display: block;
}
#graphicList li {
	width: 276px; height: 159px;
	float: left;
	margin: 0 5px 10px;
}
#graphicList a {transition: all 0.6s;}
#graphicList a:hover {opacity: 0.6;}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//special
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.special {
	background: url(../img/chara_bg.jpg) no-repeat center 0px;
	background-attachment: fixed;
}

.scenario {
	background: url(../img/bg_pantheon.jpg) no-repeat center 200px;
}
.scenario2 {
	background: url(../img/bg_pantheon.jpg) no-repeat center 150px;
}
#speList {
	width: 910px;
	margin: 0 auto;
}
#speList li {
	margin-bottom: 10px;
}
#speList a {transition: all 0.6s;}
#speList a:hover {opacity: 0.6;}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//外伝シナリオ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#speMitora {
	width: 810px;
	margin: 0 auto 30px;
}

#speMitora img {
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#cvs {
	position: absolute;
	z-index: 1;
	top: 100px;
	opacity: 0.8;
}

#pantheon01 {
	width: 910px; height: 190px;
	margin: 0 auto 80px;
	background: url(../img/t_gaiden01.png) no-repeat;
}
#pantheon02 {
	width: 910px; height: 580px;
	margin: 0 auto 30px;
	background: url(../img/t_gaiden02.png) no-repeat;
}
#pantheon01 p,#pantheon02 p {
	display: none;
}
.plate {
	width: 880px;
	margin: 0 auto 30px;
	padding: 15px;
	background: rgba(0,0,0,0.75);
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(200,200,200,0.75);
	clear: both;
}
.cast {
	font-size: 16px;
	margin: 0 0 5px 0;
}
.plane {
	text-indent: 12px;
	font-size: 14px;
}
.cast:before {
	content: "\f0da";
	font-family: fontawesome;
	color: #e1479b;
	margin-right: 5px;
}
#pBana {
	width: 910px;
	margin: 0 auto 30px;
}
#pBana img {
	box-shadow: 0 0 5px rgba(200,200,200,0.75);
	transition: all 0.6s;
}
#pBana img:hover {opacity: 0.6;}

#paCglist {
	width: 894px;
	margin: 0 auto;
}
#paCglist li {
	width: 294px; height: 167px;
	margin: 0 2px 20px;
	float: left;
}
#paCglist a {transition: all 0.6s;}
#paCglist a:hover {opacity: 0.6;}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//カウントダウン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*#countTop {
	width: 886px;
	position: absolute;
	top: -40px;
	left: 50%;
	margin-left: -443px;
}*/
#countTop {
	width: 886px;
	margin: 0 auto 15px;
}
#cdList {
	width: 886px;
	margin: 0 auto;
	padding: 0 0 50px 0;
}

#cdList li {
	width: 886px; height: 163px;
	margin-bottom: 10px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//オープニングムービー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#pTitle {
	width: 910px; height: 75px;
	margin: 0 auto;
}
#musicData {
	width: 910px;
	margin: 0 auto;
	text-shadow: 2px 2px 2px rgba(55,55,55,0.4);
}
.musicName {
	font-size: 30px;
	font-weight: bold;
	color: #ee2314;
	margin-bottom: 10px;
}
.musicStaff {
	font-size: 18px;
	color: #432531;
	text-indent: 15px;
	margin-bottom: 10px;
}

#slideshow {
	width: 904px; height: 513px;
	margin: 0 auto;
	position: relative;
	background: url(../img/slideBg.jpg)no-repeat;
	box-shadow: 0 0 4px rgba(54,54,54,0.4);
}
#slideshow a img {
	position: absolute;
	top: 7px; left:7px;
	z-index: 8;
	opacity: 0.0;
}
#slideshow a img.active {
	z-index: 10;
	opacity: 1.0;
}
#slideshow a img.last-active {
	z-index: 9;
}

#slideshow a {
	display: block;
	width: 904px; height: 513px;
	position: relative;
	text-decoration: none;
}
#slideshow a:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.5);
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 20;
}
#slideshow a:after {
	content: "\f04b";
	font-family: fontAwesome;
	display: block;
	width: 120px;
	height: 120px;
	line-height: 120px;
	position: absolute;
	top: 196px;
	left: 392px;
	text-align: center;
	font-size: 50px;
	color: #FFF;
	background: transparent linear-gradient(to top, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.6) 100%) repeat scroll 0% 0%;
	border: solid 1px rgba(255,255,255,1);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	transition: all 0.3s;
	z-index: 20;
}
#slideshow a:hover:before {
	opacity: 1;
}
#slideshow a:hover:after {
	transform: scale(1.3,1.3);
	-webkit-transform: scale(1.3,1.3);
}
#slideshow img {
	vertical-align: bottom;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#slideshow img.out {
	animation: fadeout 0.6s linear 0s 1 normal;
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}
@keyframes fadeout {
	0%  {opacity: 1;}
	100%{opacity: 0;}
}
@-webkit-keyframes fadeout {
	0%  {opacity: 1;}
	100%{opacity: 0;}
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//product
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.product {
	background: url(../img/chara_bg.jpg) no-repeat center 0px;
	background-attachment: fixed;
}
#package {
	width: 400px;
	float: left;
	margin-left: 55px;
	padding-bottom: 30px;
}
#spec {
	width: 453px;
	float: right;
	margin-right: 55px;
	padding-bottom: 30px;
}
.specTitle {
	margin-bottom: 10px;
}
#spec table {
	font-size: 14px;
	line-height: 150%;
	width: 400px;
	margin: 0 auto 25px;
	color: #000;
}
#spec tr {border-bottom: dotted 2px #CCC;}
#spec th,#spec td {
	vertical-align: top;
	padding: 5px;
}
#spec th {width: 100px;}
#spec td {width: 280px;}
#spec th:before {
	content: "\f0da";
	font-family: fontawesome;
	color: #347b79;
	margin-right: 5px;
}



.clear {clear: both;}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//Footer
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
footer {
	width: 100%;
	border-top: solid 10px rgba(255,255,255,1.0);
	background: #b62319;
	padding: 15px 0;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

footer p {
	font-size: 14px;
	line-height: 150%;
	color: #FFF;
	text-align: center;
}

.spec {
	width: 910px;
	padding: 15px;
	border-radius: 3px;
	border: solid 1px #FFF;
	background: rgba(255,255,255,1.0);
	box-shadow :0 0 3px rgba(0,0,0,0.35) inset;
	margin: 0 auto 15px;
	overflow: hidden;
}
.switch {
	width: 120px; height: 120px;
	margin: 0 20px 0 0;
	float: left;
}
.specText {
	font-size: 14px;
	line-height: 150%;
	color: #000;
	text-shadow: 0 0 3px rgba(0,0,0,0.2);
	float: left;
}
/*━━━━━━━━━━━━━━
▼シェア
━━━━━━━━━━━━━━━*/

#shareArea {
	width: 200px; height: 55px;
	margin: 0 auto;
}
#shareArea div {
	float: left;
}
#shareArea div a {
	color: #FFF;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	text-align: center;
	display: block;
	margin: 0 5px 5px 0;
	text-decoration: none;
	transition: all 0.6s;
}
#shareArea div a:hover {
	background: #b62319;
}
.shareTw:before {
	content: "\f099";
	font-family: fontawesome;
	font-size: 20px;
	line-height: 40px;
}
.shareFb:before {
	content: "\f09a";
	font-family: fontawesome;
	font-size: 20px;
	line-height: 40px;
}
.shareGo:before {
	content: "\f0d5";
	font-family: fontawesome;
	font-size: 20px;
	line-height: 40px;
}
.shareLi:before {
	content: "LINE";
	font-family: Arial;
	font-size: 12px;
	line-height: 40px;
	font-weight: bold;
}
.shareTw {background: #acacac;}
.shareFb {background: #acacac;}
.shareGo {background: #acacac;}
.shareLi {background: #acacac;}

/*━━━━━━━━━━━━━━
▼ページトップ
━━━━━━━━━━━━━━━*/

#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#pageTop a {
	font-family: fontawesome;
	font-size: 14px;
	line-height: 28px;
	width: 30px;
	height: 30px;
	display: block;
	z-index: 100;
	background: #FFF;
	border: solid 1px #d7d7d7;
	color: #db1523;
	text-decoration: none;
	text-align: center;
	transition: all 0.5s;
}
#pageTop a:hover {
	background: #db1523;
	border: solid 1px #CCC;
	color: #FFF;
}