@charset "utf-8";

html {
		font-size: 62.5%;
}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
	font-family: "Noto Serif JP", serif;
	background-color: #000;
	color: #fff;
	font-size: 10px;
	font-size: 1rem;
}

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

.inner {
	width: 980px;
	margin: 0 auto;
	text-align: center;
}

/************　スクロールしたらふわっと表示 *************/

.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 600ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/************** header *******************/

header {
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000;
	border-bottom: 1px solid #999;
	z-index: 1000;
}

header h1 {
	width: 250px;
	padding-top: 18px;
	font-size: 1.6rem;
	font-weight: bold;
	float: left;
	margin-left: 25px;
	letter-spacing: 3px;
}

header h1 a {
	text-decoration: none;
	color: #fff;
}

header nav {
	width: 550px;
	float: right;
}

header nav ul {
	margin-top: 18px;
}

header nav ul li {
	float: left;
	margin-right: 40px;
	font-size: 1.6rem;
}

header nav ul li:last-child {
	margin-right: 0;
}

header nav ul li a {
	text-decoration: none;
	color: #fff;
}

#page_top {
	position: fixed;
	bottom: 40px;
	right: 40px;
	font-size: 1.3rem;
}

#page_top a {
	text-decoration: none;
	color:#fff;
	background-color: #333;
	padding: 17px 15px;
	border-radius: 5px;
	display: block;
}

#page_top a:hover {
	background-color: #fff;
	color: #333;
}

/**************** bxslider **************/

#slider {
	margin-top: 50px;
}

#slider img {
	width: 100%;
	height: auto;
}

/*************** audio ***************/

#mainVisual {
	position: relative;
	z-index: 1;
}

h2 {
	font-size: 7.5rem;
	width: 100%;
	font-weight: bold;
	text-align: center;
	letter-spacing: 4px;
	text-shadow: 3px 3px 3px #666;
	position: absolute;
	top: 14%;
	left: 50%;
	-weblit-transform: translateY(-14%) translateX(-50%);
	-moz-transform: translateY(-14%) translateX(-50%);
	-ms-transform: translateY(-14%) translateX(-50%);
	-o-transform: translateY(-14%) translateX(-50%);
	transform: translateY(-14%) translateX(-50%);
}

.sheep {
	font-size: 5rem;
	width: 100%;
	text-align: center;
	font-weight: bold;
	text-shadow: 2px 2px 2px #666;
	letter-spacing: 4px;
	position: absolute;
	bottom: 11%;
	left: 50%;
	-webkit-transform: translateY(-11%) translateX(-50%);
	-moz-transform: translateY(-11%) translateX(-50%);
	-ms-transform: translateY(-11%) translateX(-50%);
	-o-transform: translateY(-11%) translateX(-50%);
	transform: translateY(-11%) translateX(-50%);
}

.move {
	position: absolute;
	bottom: 11%;
	right: 73%;
}

.soundBtn {
	margin-right: 15px;
}

.soundBtn,
.cero {
	display: inline-block;
}

/*
.soundBtn {
	cursor: pointer;
	position: absolute;
	bottom: 11%;
	left: 15%;
	-webkit-transform: translateY(-11%) translateX(-15%);
	-moz-transform: translateY(-11%) translateX(-5%);
	-ms-transform: translateY(-11%) translateX(-15%);
	-o-transform: translateY(-11%) translateX(-15%);
	transform: translateY(-11%) translateX(-5%);
}

.cero {
	position: absolute;
	bottom: 11%;
	left: 23%;
	-webkit-transform: translateY(-11%) translateX(-23%);
	-moz-transform: translateY(-11%) translateX(-23%);
	-ms-transform: translateY(-11%) translateX(-23%);
	-o-transform: translateY(-11%) translateX(-3%);
	transform: translateY(-11%) translateX(-23%);
}
*/

/*************** #news ***************/

h3 {
	font-size: 3rem;
	font-weight: bold;
	margin: 80px auto 70px;
	letter-spacing: 4px;
}

.mozi1,.mozi2 {
	font-size: 1.4rem;
	line-height: 3.7;
	letter-spacing: 3px;
}

.fl {
	width: 275px;
	float:left;
	margin-left: 200px;
	margin-bottom: 30px;
}

.fr {
	width: 275px;
	float:right;
	margin-right: 200px;
	margin-bottom: 30px;
}

.moreBtn {
	width: 140px;
	height: 40px;
	font-size: 1.4rem;
	line-height: 40px;
	border: 1px solid #fff;
	margin: -1px;
	margin: 80px auto 130px;
}

.moreBtn a {
	text-decoration: none;
	color: #fff;
	display: block;
}

.moreBtn a:hover {
	background-color: #fff;
	color: #000;
}

#news .fl p,
#news .fr p {
	background-color: #fff;
}

#news .fl p a img,
#news .fr p a img {
	margin-bottom: -2px;
}

#news .fl p a:hover,
#news .fr p a:hover {
	opacity: 0.6;
}

/*************** #zyouhou ************/

.one {
	float: left;
	margin-left: 75px;
	margin-top: 50px;
	width: 400px;
}


.title {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left;
	margin-bottom: 10px;
	margin-left: 3px;
	letter-spacing: 3px;
}

dl {
	font-size: 1.4rem;
	border: 1px solid #fff;
	margin: 0 -1px 80px -1px;
}

dt,dd {
	text-align: left;
	height: 25px;
	line-height: 25px;
	padding: 7px 0;
	
}

.border {
	border-bottom: 1px solid #fff;
	font-size: 1.5rem;
	letter-spacing: 2px;
}

dt {
	width: 105px;
	float: left;
	border-right: 1px solid #fff;
	margin-right: -1px;
	padding-left: 30px;
}

dd {
	width: 215px;
	float: right;
	padding-left: 50px;
}

.bd,
.download {
	width: 115px;
	float: left;
}


.format {
	padding-top: 20px;
}
	
.kara {
	padding-bottom: 18px;
}
	
dt:last-child,
dd:last-child {
	padding-bottom: 18px;
}

.nedan {
	width: 55px;
	float: right;
	font-size: 1.4rem;
	padding-left: 0;
	margin-right: 25px;
}

.two {
	float: right;
	margin-right: 75px;
	margin-top: 50px;
	width: 400px;
}

.two dl .dtTwo {
	width: 115px;
	border: 1px solid #fff;
	margin: -1px;
	float: left;
	padding-top:9px;
	padding-bottom: 9px;
	padding-left: 35px;
	letter-spacing: 2.3px;
}

.two dl .ddTwo {
	width: 209px;
	border: 1px solid #fff;
	margin: -1px;
	float: right;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 41px;
}

.two dl .ddTwo:last-child {
	padding-bottom: 9px;
}

/*************** footer **************/

footer {
	text-align: center;
}

footer .logo {
	height: 70px;
	width: 398px;
	margin: 0 auto;
}

footer .logo p {
	float: left;
	margin: 30px 30px 10px 0;
}

footer .logo p:first-child {
	margin-top: 29px;
}

footer .logo p:nth-child(3) {
	margin-top: 34px;
}

footer .logo p:nth-child(4) {
	margin-top: 31px;
}

footer .logo p:last-child {
	margin-right: 0;
}

footer .icon {
	height: 60px;
	width: 460px;
	margin: 0 auto;
}

footer .icon p {
	float: left;
	margin: 0 10px 30px 0;
}

footer .icon p:last-child {
	margin-right: 0;
}

.footerInner {
	width: 140px;
	margin: 0 auto 20px;;
}

footer small {
	font-size: 1rem;
	letter-spacing: 2px;
	height: 50px;
}

/***************** story.html ***********************/

#subVisual {
	position: relative;
}

#subVisual img {
	width: 100%;
	height: auto;
}

#contents {
	width: auto;
	position:absolute;
	top: 53%;
	left: 50%;
	-webkit-transform: translateY(-53%) translateX(-50%);
	-moz-transform: translateY(-53%) translateX(-50%);
	-ms-transform: translateY(-53%) translateX(-50%);
	-o-transform: translateY(-53%) translateX(-50%);
	transform: translateY(-53%) translateX(-50%);
	font-size: 7rem;
	font-weight: bold;
	letter-spacing: 4px;
	text-shadow: 0 0 8px #000;
}

/***************** #story ****************/

#story {
	position: relative;
}

#story h3 {
	margin-top: 100px;
	letter-spacing: 2px;
}

#story h3 .big {
	font-size: 5.5rem;
}

#story .kuro {
	width: 100%;
	height: 295px;
}

#story .moziPosi {
	position: absolute;
	top: 200px;
	left: 50%;
	transform: translateX(-50%);
	text-shadow: black 2px 0px 2px, black -2px 0px 2px,
    black 0px -2px 2px, black -2px 0px 2px,
    black 2px 2px 2px, black -2px 2px 2px,
    black 2px -2px 2px, black -2px -2px 2px,
    black 1px 2px 2px, black -1px 2px 2px,
    black 1px -2px 2px, black -1px -2px 2px,
    black 2px 1px 2px, black -2px 1px 2px,
    black 2px -1px 2px, black -2px -1px 2px,
    black 1px 1px 2px, black -1px 1px 2px,
    black 1px -1px 2px, black -1px -1px 2px;
}

#story .mozi1,.mozi2 {
	margin-bottom: 55px;
	z-index: 1000;
}

#story .mozi3 {
	font-size: 1.4rem;
	line-height: 3.7;
	letter-spacing: 3px;
	margin-bottom: 120px;
}

/*
#story .back {
	height: 1058px;
	background-image: url(../images/back.jpg);
	background-repat: no-repeat;
	background-positon: center center;
	background-attachment: fixed;
	background-size: cover;
	background-color: #000;
}
*/

#story .back img {
	width: 100%;
	height: auto;
}

/*************** character.html ***************/

.chara {
	position: relative;
}


.charaBack {
	margin-top: 10px;
}

.charaBack img {
	width: 100%;
	height: auto;
}

.charaChoise {
	width: 540px;
	float: left;
	margin-left: 100px;
	margin-bottom: 50px;
	margin-top: 40px;
	position: absolute;
	top: 70px;
	left: -10px;
}

.charaChoise p {
	text-align: left;
}

.charaChoise p img {
	width: 500px;
	height: auto;
}

.syoukaiPosi {
	width: 300px;
	float: right;
	margin-right: 40px;
	position: absolute;
	top: 80px;
	right: 10px;
	
}

.syoukaiPosi h3 {
	text-align: left;
	font-size: 4rem;
	margin-top: 90px;
	margin-bottom: 40px;
}

.syoukai {
	text-align: left;
	font-size: 1.4rem;
	letter-spacing: 3px;
	line-height: 2;
	margin-bottom: 55px;
	text-shadow: black 2px 0px 2px, black -2px 0px 2px,
    black 0px -2px 2px, black -2px 0px 2px,
    black 2px 2px 2px, black -2px 2px 2px,
    black 2px -2px 2px, black -2px -2px 2px,
    black 1px 2px 2px, black -1px 2px 2px,
    black 1px -2px 2px, black -1px -2px 2px,
    black 2px 1px 2px, black -2px 1px 2px,
    black 2px -1px 2px, black -2px -1px 2px,
    black 1px 1px 2px, black -1px 1px 2px,
    black 1px -1px 2px, black -1px -1px 2px;
}

.charaPic {
	margin-top: -50px;
	margin-bottom: 60px;
}

.charaOne p {
	width: 80px;
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #fff;
	cursor: pointer;
}

.charaOne p:last-child {
	margin-right: 0;
}

.charaOne p img {
	margin-bottom: -2px;
}

.charaTwo p {
	width: 80px;
	display: inline-block;
	margin-right: 15px;
	background-color: #fff;
	cursor: pointer;
}

.charaTwo p:last-child {
	margin-right: 0;
}

.charaTwo p img {
	margin-bottom: -2px;
}

.charaOne p img:hover,
.charaTwo p img:hover {
	opacity: 0.4;
}
	
.voiceBtn {
	font-size: 1.4rem;
	letter-spacing: 2px;
	width: 100px;
	height: 40px;
	border: 1px solid #fff;	
	margin: -1px;
	float: left;
	margin-right: 55px;
}

.voiceBtn a {
	text-decoration: none;
	color: #fff;
	display: block;
	line-height: 40px;
}

.voiceBtn a:hover {
	background-color: #fff;
	color: #000;
}

.voice {
	font-size: 1.4rem;
	letter-spacing: 2px;
	width: 100px;
	height: 40px;
	border: 1px solid #fff;	
	margin: -1px;
	float: left;
	margin-right: 0;
}


.voice a {
	text-decoration: none;
	color: #fff;
	display: block;
	line-height: 40px;
}

.voice a:hover {
	background-color: #fff;
	color: #000;
}
/*************** system.html ******************/

.systemInner {
	width: 680px;
	margin: 0 auto;
}

.attention {
	text-align: right;
}

#system h3 {
	font-size: 3rem;
    letter-spacing: 4px;
    padding: 11px 0;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    margin-bottom: 50px;
}

#system p {
	font-size: 1.4rem;
	line-height: 2.5;
}

.gaiyou {
    margin-bottom: 50px;
}

.systemTwo .sampleImage .sFl {
	margin-top: 5px;
	width: 330px;
	float: left;
}

.systemTwo .sampleImage .sFr {
	margin-top: 5px;
	width: 330px;
	float: right;
}

.setsumei {
	margin-bottom: 50px;
}

/*************** special.html *****************/

#movie .fl,
#movie .fr {
	position: relative;
	font-size: 1.3rem;
	letter-spacing: 1.5px;
}

#movie .fl .sankaku,
#movie .fr .sankaku {
	text-align: left;
	margin: 5px 0;
}

#movie .fl .mImg,
#movie .fr .mImg {
	background-color: #fff;
}

#movie .fl .mImg img,
#movie .fr .mImg img {
    margin-bottom: -2px; 
}

#movie .fl .saiseiBtn,
#movie .fr .saiseiBtn {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-35%) translateX(-50%);
	-moz-transform: translateY(-35%) translateX(-50%);
	-ms-transform: translateY(-35%) translateX(-50%);
	-o-transform: translateY(-35%) translateX(-50%);
	transform: translateY(-35%) translateX(-50%);
	margin: auto;
}

/************** PCでは表示しない **************/

.navToggle {
	display: none;
}

.globalMenu {
	display: none;
}

.sheepSmall {
	display: none!important;
}

.ceroSmall {
	display: none!important;
}

.syoukaiSmall {
	display: none;
}

.logoSmall {
	display: none;
}

.iconSmall {
	display: none;
}

/************* responsive *************/

@media screen and (max-width: 1300px){
	
	.sheep {
		font-size: 4rem;
	}
	
	.soundBtn {
		margin-right: -10px;
	}
	
	.soundBtn img {
		width: 75%;
		height: auto;
	}
	
	.cero img {
		width: 75%;
		height: auto;
	}

/************* max-width:1500pxここまで **************/
}

@media screen and (max-width: 1000px){
	
	.inner {
		width: 768px;
	}
	
	header h1 {
		width: 200px;
		padding-top: 18px;
		font-size: 1.3rem;
	}
	
	header nav {
		width: 460px;
	}
	
	header nav ul li {
		margin-right: 30px;
		font-size: 1.3rem;
	}
	
	header nav ul li:last-child {
		margin-right: 0;
	}
	
	h2 {
		font-size: 4rem;
	}
	
	.sheep {
	font-size: 3rem;
	}
	
	.fl,.fr {
		float: none;
		margin: 0 auto 30px;
	}
	
	.fr:last-child {
		margin-bottom: 90px;
	}
	
	.one,.two {
		float: none;
		margin: 0 auto 40px;
	}

/************ #story ****************/

	#story h3 {
		font-size: 2.3rem;
		margin-top: 60px;
		letter-spacing: 2.5px;
	}
	
	#story h3 .big {
		font-size: 4.5rem;
	}
	
	#story .kuro {
		width: 100%;
		height: 450px;
	}
	
	#story .moziPosi {
		position: absolute;
		top: 170px;
	}
	
	#story .mozi1,.mozi2 {
		margin-bottom: 25px;
		font-size: 1.3rem;
	}
	
	#story .mozi3 {
		font-size: 1.3rem;
		line-height: 2.5;
		letter-spacing: 3px;
		margin-bottom: 120px;
	}

/*************** character.html ***************/

	.chara {
		position: relative;
	}
	
	
	.charaBack {
		margin-top: 10px;
	}
	
	.charaBack img {
		width: 100%;
		height: auto;
	}
	
	.charaChoise {
		width: 500px;
		float: left;
		margin-left: 50px;
		margin-bottom: 50px;
		margin-top: 40px;
		position: absolute;
		top: 70px;
		left: -10px;
	}
	
	.charaChoise p {
		text-align: left;
	}
	
	.charaChoise p img {
		width: 400px;
		height: auto;
	}
	
	.syoukaiPosi {
		width: 300px;
		float: right;
		margin-right: 40px;
		position: absolute;
		top: 65px;
		right: 10px;
		
	}
	
	.syoukaiPosi h3 {
		text-align: left;
		font-size: 3rem;
		margin-top: 90px;
		margin-bottom: 30px;
	}
	
	.syoukai {
		text-align: left;
		font-size: 1.3rem;
		letter-spacing: 3px;
		line-height: 2;
		margin-bottom: 30px;
		text-shadow: black 2px 0px 2px, black -2px 0px 2px,
		black 0px -2px 2px, black -2px 0px 2px,
		black 2px 2px 2px, black -2px 2px 2px,
		black 2px -2px 2px, black -2px -2px 2px,
		black 1px 2px 2px, black -1px 2px 2px,
		black 1px -2px 2px, black -1px -2px 2px,
		black 2px 1px 2px, black -2px 1px 2px,
		black 2px -1px 2px, black -2px -1px 2px,
		black 1px 1px 2px, black -1px 1px 2px,
		black 1px -1px 2px, black -1px -1px 2px;
	}
	
	.charaPic {
		margin-top: 20px;
		margin-bottom: 60px;
	}
	
	.charaOne p {
		width: 80px;
		display: inline-block;
		margin-right: 15px;
		margin-bottom: 15px;
		background-color: #fff;
		cursor: pointer;
	}
	
	.charaOne p:last-child {
		margin-right: 0;
	}
	
	.charaOne p img {
		margin-bottom: -2px;
	}
	
	.charaTwo p {
		width: 80px;
		display: inline-block;
		margin-right: 15px;
		background-color: #fff;
		cursor: pointer;
	}
	
	.charaTwo p:last-child {
		margin-right: 0;
	}
	
	.charaTwo p img {
		margin-bottom: -2px;
	}
	
	.charaOne p img:hover,
	.charaTwo p img:hover {
		opacity: 0.4;
	}
		
	.voiceBtn {
		font-size: 1.4rem;
		letter-spacing: 2px;
		width: 100px;
		height: 40px;
		border: 1px solid #fff;	
		margin: -1px;
		float: left;
		margin-right: 55px;
	}
	
	.voiceBtn a {
		text-decoration: none;
		color: #fff;
		display: block;
		line-height: 40px;
	}
	
	.voiceBtn a:hover {
		background-color: #fff;
		color: #000;
	}
	
	.voice {
		font-size: 1.4rem;
		letter-spacing: 2px;
		width: 100px;
		height: 40px;
		border: 1px solid #fff;	
		margin: -1px;
		float: left;
		margin-right: 0;
	}

/************* special.html *****************/
	#movie .fl,
	#movie .fr {
		float: none;
		margin: 0 auto 30px;
	}
/************* max-width:980pxここまで **************/
}

@media screen and (max-width: 768px) {
	
	header {
		height: 38px;
	}
	
	header h1 {
		float: none;
		position: fixed;
		padding-top: 13px;
		top: 0;
		left: 20px;
		margin-left: 0;
		font-size: 1.2rem;
		letter-spacing: 2px;
	}
	
	nav {
		display: none;
	}
	
	.inner {
		width: 307px;
	}

/*********** hamburger menu ************/

	.navToggle,
	.globalMenu {
		display: block;
	}
	
	.globalMenu {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #333;
		color: #000;
		text-align: center;
		width: 100%;
		transform: translateY(-100%);
		transition: all 0.6s;
		z-index: 2;
	}
	
	.globalMenu ul {
		width: 100%;
		margin-top: 0;
	}
	
	.globalMenu ul li {
		width: 100%;
		font-size: 1.1rem;
		border-bottom: 1px dotted #ccc;
		margin-right: 0;
	}
	
	.globalMenu ul li a {
		display: block;
		text-decoration: none;
		color: #fff;
		font-size: 1.4rem;
		padding: 15px 0;
	}
	
	.globalMenu ul li:nth-child(n+6) a {
		padding: 10px 0;
	}
	
	.globalMenu ul li a:hover {
		background-color: #fff;
		color: #999;
	}
	
	.globalMenu.active {
		transform: translateY(0%);
	}
		
	.navToggle {
		display: block;
		position: fixed;
		top: 3px;
		right: 8px;
		width: 42px;
		height: 32px;
		cursor: pointer;
		text-align: center;
		z-index: 3;
	}
	
	.navToggle span {
		display: block;
		position: absolute;
		width: 28px;
		border-bottom: 3px solid #eee;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		-ms-transition: .35s ease-in-out;
		-o-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		left: 6px;
	}
	
	.navToggle span:first-child {
		top: 6px;
	}
	
	.navToggle span:nth-child(2) {
		top: 15px;
	}
	
	.navToggle span:nth-child(3) {
		top: 24px;
	}
	
	.navToggle.active span:first-child {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	#page_top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	font-size: 0.9rem;	
	}

	#page_top a {
	text-decoration: none;
	color:#fff;
	background-
	padding: 3px 8px;
	}

	
/*********** index.html ************/

	h2 {
		font-size: 2.8rem;
		letter-spacing: 2px;
		position: absolute;
		top: 13%;
		left: 50%;
	}
	
	.sheep {
		display: none!important;
	}
	
	.sheepSmall {
		display: block!important;
		font-size: 2.2rem;
		width: 100%;
		font-weight: bold;
		text-align: center;
		text-shadow: 3px 3px 3px #666;
		position: absolute;
		bottom: 8%;
		left: 50%;
		transform: translateY(-7%) translateX(-50%);
	}
	
	.move {
		position: absolute;
		bottom: 8%;
		right: 75%;
	}

	.soundBtn {
		margin-right: -40px;;
	}
	
	.cero img {
		width: 25px;
		height: auto;
	}

	.soundBtn a img {
		width: 40%;
		height: auto;
	}
	
	#slider {
		margin-top: 38px;
	}
	
	h3 {
		font-size: 2rem;
		margin: 60px 0 50px 0;
	}
	
	#about .inner {
		width: 250px;
	}
	
	.mozi1,.mozi2 {
		font-size: 1.1rem;
		line-height: 2.3;
		letter-spacing: 2px;
	}
	
	.fl,.fr {
		float: none;
		margin: 20px auto;
	}
	
	.fl:first-child {
		margin-top: 0;
	}
	
	.moreBtn {
		width: 90px;
		height: 30px;
		font-size: 0.8rem;
		line-height: 30px;
		border: 1px solid #fff;
		margin: -1px;
		margin: 35px auto 80px;
	}
	
	.moreBtn a {
		text-decoration: none;
		color: #fff;
	}
	
	
	.one {
		float: none;
		margin: 80px auto 0;
		width: 270px;
	}
	
	
	.title {
		font-size: 1.4rem;
		margin-bottom: 10px;
		margin-left: 0;
		letter-spacing: 2px;
	}
	
	dl {
		font-size: 1.1rem;
		margin: 0 -1px 35px -1px;
	}
	
	dt,dd {
		height: 15px;
		line-height: 15px;
		padding: 3px 0;
		
	}
	
	.border {
		font-size: 1.1rem;
		letter-spacing: 2px;
	}
	
	dt {
		width: 80px;
		float: left;
		border-right: 1px solid #fff;
		margin-right: -1px;
		padding-left: 15px;
	}
	
	dd {
		width: 155px;
		float: right;
		padding-left: 20px;
	}
	
	.bd,
	.download {
		width: 90px;
		float: left;
	}
	
	
	.format {
		padding-top: 20px;
	}
		
	.kara {
		padding-bottom: 18px;
	}
		
	dt:last-child,
	dd:last-child {
		padding-bottom: 18px;
	}
	
	.nedan {
		width: 55px;
		float: right;
		font-size: 1.1rem;
		padding-left: 0;
		margin-right: 0;
	}
	
	.two {
		float: none;
		margin: 0 auto 20px;
		width: 270px;
	}
	
	.two dl .dtTwo {
		width: 80px;
		border: 1px solid #fff;
		margin: -1px;
		float: left;
		padding-left: 15px;
		letter-spacing: 2.3px;
	}
	
	.two dl .ddTwo {
		width: 155px;
		border: 1px solid #fff;
		margin: -1px;
		float: right;
		padding-top: 9px;
		padding-bottom: 9px;
		padding-left: 19px;
	}
	
	.two dl .ddTwo:last-child {
		padding-bottom: 9px;
	}
	
	footer .logo {
		display: none;
	}
	
	footer .logoSmall {
		display: block;	
		width: 242px;
		height: 60px;
	}
	
	footer .logoSmall p {
		margin: 0 20px 0 0;
	}
	
	footer .logoSmall p:first-child {
		width: 20px;
	}
	
	footer .logoSmall p:nth-child(2) {
		width: 51px;
		margin-top: 34px;
	}
	
	footer .logoSmall p:nth-child(4) {
		width: 51px;
		margin-top: 34px;
		margin-right: 0;
	}
	
	footer .icon {
		display: none;
	}
	
	footer .iconSmall {
		display: block;
		width: 170px;
	}
	
/*********** story.html *************/

	#contents {
		width: auto;
		position: absolute;
		top: 60%;
		left: 50%;
		-webkit-transform: translateY(-60%) translateX(-50%);
		-moz-transform: translateY(-60%) translateX(-50%);
		-ms-transform: translateY(-60%) translateX(-50%);
		-o-transform: translateY(-60%) translateX(-50%);
		transform: translateY(-60%) translateX(-50%);
		font-size: 4rem;
		letter-spacing: 4px;
	}
	
	#story h3 {
		font-size: 1.8rem;
		margin-top: 60px;
		letter-spacing: 2.5px;
	}
	
	#story h3 .big {
		font-size: 2.8rem;
	}
	
	#story .kuro {
		width: 100%;
		height: 450px;
	}
	
	#story .moziPosi {
		position: absolute;
		top: 170px;
	}
	
	#story .mozi1,.mozi2 {
		margin-bottom: 25px;
		font-size: 1.1rem;
		letter-spacing: 3px;
	}
	
	#story .mozi3 {
		font-size: 1.1rem;
		line-height: 2.5;
		letter-spacing: 3px;
		margin-bottom: 120px;
	}

/************ .character.html *************/

	#character .inner section {
		margin-top: 60px;
	}
	
	.charaBack {
		width: auto;
		height: 290px;
	}
	
	
	.charaChoise {
		width: 150px;
		margin-left: 0;
		margin-bottom: 50px;
		margin-top: 40px;
		position: absolute;
		top: 36px;
		left: 0;
	}
	
	.charaChoise p img {
		width: auto;
		height: 190px;
		margin-left: -20px;
	}
	
	.syoukaiPosi {
		width: 150px;
		float: right;
		margin-right: 0;
		position: absolute;
		top: 27px;
		right: 0;
		
	}
	
	.syoukaiPosi h3 {
		text-align: left;
		font-size: 1.4rem;
		margin-top: 0;
		margin-bottom: 10px;
	}
	
	.syoukai {
		display: none;
	}
	
	.syoukaiSmall {
		display: block;
		font-size: 1rem;
		letter-spacing: 2px;
		text-align: left;
		line-height: 1.8;
		margin-bottom: 15px;
		text-shadow: black 2px 0px 2px, black -2px 0px 2px,
		black 0px -2px 2px, black -2px 0px 2px,
		black 2px 2px 2px, black -2px 2px 2px,
		black 2px -2px 2px, black -2px -2px 2px,
		black 1px 2px 2px, black -1px 2px 2px,
		black 1px -2px 2px, black -1px -2px 2px,
		black 2px 1px 2px, black -2px 1px 2px,
		black 2px -1px 2px, black -2px -1px 2px,
		black 1px 1px 2px, black -1px 1px 2px,
		black 1px -1px 2px, black -1px -1px 2px;
	}
	
	.charaPic {
		margin-top: 110px;
		margin-bottom: 50px;
	}
	
	.charaOne p {
		width: 35px;
		height: auto;
		display: inline-block;
		margin-right: 7px;
		margin-bottom: 10px;
		background-color: #fff;
		cursor: pointer;
	}
	
	.charaOne p img {
		margin-bottom: -2px;
		width: 35px;
		height: auto;
	}
	
	.charaTwo p {
		width: 35px;
		margin-right: 7px;
		background-color: #fff;
	}
	
	.charaTwo p:last-child {
		margin-right: 0;
	}
	
	.charaTwo p img {
		width: 35px;
		height: auto;
	}
		
	.voiceBtn {
		font-size: 0.8em;
		letter-spacing: normal;
		width: 55px;
		height: 20px;
		margin-right: 25px;
	}
	
	.voiceBtn a {
		line-height: 20px;
	}
	
	.voice {
		font-size: 0.8rem;
		letter-spacing: normal;
		width: 55px;
		height: 20px;
	}
	
	
	.voice a {
		line-height: 20px;
	}
	
/************ .system.html ************/

	#system .systemInner {
		width: 307px;
	}
	
	#system .systemInner  h3 {
		font-size: 2rem;
		line-height: 1.1;
	}
	
	#system .systemInner .systemOne p,
	#system .systemInner .systemTwo .sampleImage .setsumei {
		font-size: 1.1rem;
	}
	
	#system .systemInner .systemOne .gameImage p img {
		width: 100%;
		height: auto;
	}
	
	#system .systemInner .sampleImage .mainImg img {
		width: 100%;
		height: auto;
	}
	
	#system .systemInner .sampleImage .sFl,
	#system .systemInner .sampleImage .sFr  {
		width: 150px;
		margin-top: 0;
	}
	
	#system .systemInner .sampleImage .sFl img,
	#system .systemInner .sampleImage .sFr img {
		width: 150px;
	}
	
	#system .systemInner .systemOne .attention,
	#system .systemInner .systemTwo .sampleImage .attention {
		font-size: 0.7rem;
	}






}