@charset "utf-8";
/*-------------------------------*/
body{font-size:100%;line-height:1.6;letter-spacing:0;}
html>/**/body{font-size:13px;line-height:1.6;letter-spacing:0;}
body{
	font-family:sans-serif;
	font:13px;
	*font-size:small;
	*font:x-small;
}
/*-------------------------------*/
html,body{height:100%;}
*{outline:none;}
/* ↓btn共通設定↓ */
	.btnBox a.btn{
		display:block;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		-ms-border-radius:5px;
		border-radius:5px;
		box-sizing:border-box;
		text-align:center;
		position:relative;
		line-height:1;
		box-shadow:0px 0px 6px 2px rgba(255,255,255,0.6) inset;
		-moz-box-shadow:0px 0px 6px 2px rgba(255,255,255,0.6) inset;
		-webkit-box-shadow:0px 0px 6px 2px rgba(255,255,255,0.6) inset;
	}
	.btnBox a.btn img{
		width:80%;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;
	}
	.btnBox a.btn.sample{background-color:#00355d;}
	.btnBox a.btn.purchase{background-color:#a80000;}
	.btnBox a.btn.cs{background-color:#666666;box-shadow:none;}
	/* ↑btn共通設定↑ */

/* ////////////////////////////////////////////////////////////////////////// */
/*
 * For SP
 */
/* ////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width:640px){
	.pcOnly{display:none !important;}
	img{width:100%;}
	.snsBox{
		width:102px;
		height:36px;
		position:fixed;
		right:18vw;
		top:22px;
		z-index:9;
	}
	.snsBox li{
		width:36px;
		height:36px;
		float:left;
		margin-right:15px;
	}
	.snsBox li:nth-of-type(1){background-color:#00a8ff;}
	.snsBox li:nth-of-type(2){background-color:#203ca2;}
	.snsBox li a{color:#ffffff;}
	.snsBox li i{
		width:36px;
		height:36px;
		margin:0;
		padding:0;
		text-align:center;
		line-height:36px;
		font-size:180%;
	}
	.menuBtn{
		width:60px;
		height:60px;
		float:right;
		position:fixed;
		z-index:11;
		top:10px;
		right:3vw;
	}
	.menuBtn .opened{display:none;}
	.spMenuWrap{
		display:none;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.7);
		padding:100px 0 0 0;
		position:fixed;
		z-index:10;
	}
	.spMenu{
		width:86%;
		margin:0 auto;
		/*background-color:rgba(0,0,0,1);*/
		box-sizing:border-box;
		border-top:1px solid #e8c788;
		border-bottom:1px solid #e8c788;
	}
	.spMenu li{
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(232,198,136,1) 40%, rgba(232,198,136,1) 60%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(40%, rgba(232,198,136,1)), color-stop(60%, rgba(232,198,136,1)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(232,198,136,1) 40%, rgba(232,198,136,1) 60%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(232,198,136,1) 40%, rgba(232,198,136,1) 60%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(232,198,136,1) 40%, rgba(232,198,136,1) 60%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(232,198,136,1) 40%, rgba(232,198,136,1) 60%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
		padding:0 0 1px 0;
	}
	
	.spMenu li a{
		display:block;
		width:100%;
		height:auto;
		padding:15px 0;
		font-size:110%;
		color:#ffffff;
		text-align:center;
		background-color:#000000;
	}
	.spMenu li:nth-of-type(1) a img{width:9%;}
	.spMenu li:nth-of-type(2) a img{width:12%;}
	.spMenu li:nth-of-type(3) a img{width:23.5%;}
	.spMenu li:nth-of-type(4) a img{width:28.5%;}
	.spMenu li:nth-of-type(5) a img{width:13.5%;}
	.spMenu li:nth-of-type(6) a img{width:19.75%;}
	
	.container{
		width:100%;
		height:auto;
		margin:0 auto;
		padding:50px 0 30px;
		background-color:#e6dabb;
		border-top:10px solid #cfc3a5;
		box-shadow:0px 0px 30px 15px #e9d697 inset;
		-moz-box-shadow:0px 0px 30px 15px #e9d697 inset;
		-webkit-box-shadow:0px 0px 30px 15px #e9d697 inset;
	}
	.areaTtl{margin:0 0 25px 0;}
	
	.newsArea .inner{
		width:90%;
		height:auto;
		margin:0 auto;
	}
	.newsArea .inner p{font-size:3.5vw;}
	
	.campaignArea{margin-top:50px;}
	.campaignArea .inner{
		width:90%;
		margin:0 auto;
		background-color:#cccccc;
	}
	
	.storyArea{margin-top:50px;}
	.storyArea .areaTtl{margin:0;}
	.storyArea .inner{
		width:90%;
		height:auto;
		margin:0 auto;
	}
	.storyArea .inner .subTtl{margin-top:40px;}
	.storyArea .inner .box{margin-top:40px;}
	.storyArea .subTtl{margin-top:60px;}
	
	.storyArea .inner > div:first-child{margin-top:50px;}
	.storyArea .inner .bookBox01{
		width:80%;
		margin:80px auto 0;
	}
	.storyArea .inner .bookBox01 .bookDtl,
	.storyArea .inner .bookBox01 .btnBox{
		width:85%;
		margin:0 auto;
	}
	.storyArea .inner .bookBox01 .bookDtl .bookTtl{font-size:4.5vw;line-height:1.3;margin-top:15px;}
	.storyArea .inner .bookBox01 .bookDtl .bookTtl span{font-size:3.5vw;}
	.storyArea .inner .bookBox01 .bookDtl .bookDesc{font-size:3.8vw;line-height:1.5;margin-top:10px;}
	.storyArea .inner .bookBox01 .bookDtl .bookInfo{font-size:3.2vw;line-height:1.4;margin-top:10px;}
	.storyArea .inner .bookBox01 .btnBox a.btn{margin-top:15px;}
	.storyArea .inner .bookBox01 .btnBox a.btn.btnSize01{width:100%;height:15vw;}
	
	.storyArea .inner .bookBox02Wrap{
		width:90%;
		margin:0 auto;
	}
	.storyArea .inner .bookBox02{
		margin-top:40px;
	}
	.storyArea .inner .bookBox02 .bookImg{
		width:45%;
		min-height:230px;
		height:auto;
		position:relative;
		float:left;
	}
	.storyArea .inner .bookBox02 .bookImg p{
		width:80%px;
		height:30px;
		font-size:120%;
		font-weight:bold;
		color:#ffffff;
		text-align:center;
		line-height:30px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;
	}
	.storyArea .inner .bookBox02 .bookInfoBox01{
		width:52%;
		height:auto;
		float:right;
	}
	.storyArea .inner .bookBox02 .bookInfoBox01 .bookInfo{
		font-size:2.5vw;
		line-height:1.4;
	}
	.storyArea .inner .bookBox02 .bookInfoBox01 .btnBox a.btn{margin-top:8px;}
	.storyArea .inner .bookBox02 .bookInfoBox01 .btnBox a.btn.btnSize02{width:100%;height:10vw;}
	.storyArea .inner .bookBox02 .bookInfoBox02{
		clear:both;
		width:100%;
		height:auto;
		padding-top:15px;
	}
	.storyArea .inner .bookBox02 .bookInfoBox02 h4{
		font-size:4.5vw;
		font-weight:bold;
		line-height:1.4;
		letter-spacing:-0.5px;
	}
	.storyArea .inner .bookBox02 .bookInfoBox02 p{
		margin-top:7px;
		font-size:3.5vw;
		line-height:1.4;
	}
	
	.movieArea{margin-top:50px;}
	.movieArea .movWrap{
		width:85%;
		height:auto;
		background:#000000;
		margin:0 auto;
	}
	.movieArea .movWrap .mov{
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	.movieArea .movWrap .mov iframe{
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
	.movieArea .inner .movBtm{margin-top:30px;}
	.movieArea .inner .movBtm > div:nth-of-type(2){margin-top:20px;}
	.movieArea .inner .movBtm .imgWrap{
		width:80%;
		margin:0 auto 0;
	}
	.movieArea .inner .movBtm .imgWrap div{
		margin-top:15px;
	}
	.movieArea .inner .movBtm p{
		width:90%;
		margin:0 auto;
		text-align:left;
	}
	.movieArea .inner .movBtm .txtBox01{
		font-size:3.7vw;
		font-weight:bold;
		margin-top:20px;
	}
	.movieArea .inner .movBtm .txtBox02{
		font-size:3.2vw;
		margin-top:10px;
	}
	.movieArea .inner .movBtm .txtBox03{
		font-size:2.8vw;
		text-align:right;
		margin-top:30px;
	}
	
	.relationArea{margin-top:70px;}
	.relationArea .inner .bnrWrap{
		width:80%;
		margin:0 auto;
	}
	.relationArea .inner .bnrWrap .bnrItem{
		width:100%;
		height:22vw;
		margin-top:10px;
	}
	
	.foot{
		font-size:3vw;
		text-align:center;
		margin-top:100px;
	}
	.toTop{
		width:50px;
		height:50px;
		position:fixed;
		bottom:0px;
		right:5px;
		background-color:rgba(255,255,255,0.8)
	}
	
	
	#linkList .btnWrap li:nth-child(1),
	#linkList .btnWrap li:nth-child(2),
	#linkList .btnWrap li:nth-child(3){
		width:86%;
		padding:1px;
		box-sizing:border-box;
		background-color:#c5c5c5;
		margin-bottom:10px;
		margin:0 auto;
	}
	#linkList .btnWrap li:nth-child(1){margin-top:30px;}
	#linkList .btnWrap li:nth-child(2){margin-top:15px;}
	#linkList .btnWrap li:nth-child(3){margin-top:15px;}
	
	#linkList .btnWrap li:last-child{margin-bottom:0px;}
	#linkList .btnWrap li:nth-child(1) a,
	#linkList .btnWrap li:nth-child(2) a,
	#linkList .btnWrap li:nth-child(3) a{
		display:block;
		height:70px;
		border:3px solid #ededed;
		box-sizing:border-box;
		background-color:#ffffff;
		text-align:center;
		position:relative;
	}
	#linkList .btnWrap li:nth-child(1) a img,
	#linkList .btnWrap li:nth-child(2) a img,
	#linkList .btnWrap li:nth-child(3) a img{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;
	}
	
	#linkList .btnWrap li:nth-child(1) a img{width:40%;}
	#linkList .btnWrap li:nth-child(2) a img{width:35%;}
	#linkList .btnWrap li:nth-child(3) a img{width:20%;}
}


/* ////////////////////////////////////////////////////////////////////////// */
/*
 * For PC
 */
/* ////////////////////////////////////////////////////////////////////////// */

@media screen and (min-width:641px){
	.spOnly{display:none !important;}
	
	body{
		background:url('../images/pc_bodyBg.jpg');
		background-size:cover;
		background-attachment:fixed;
	}
	.headWrap{
		width:100%;
		height:69px;
		background-color:rgba(0,0,0,0.7);
		border-bottom:1px solid #e8c788;
		position:fixed;
		z-index:8;
	}
	.headWrap .head{
		width:940px;
		height:auto;
		margin:0 auto;
	}
	.headWrap .head .headLeft{
		width:710px;
		height:39px;
		padding-top:15px;
		float:left;
	}
	.headWrap .head .headLeft ul li{
		display:inline-block;
		padding:0px 28px;
	}
	.headWrap .head .headLeft ul li:first-child{padding-left:0px;}
	.headWrap .head .headLeft ul li:last-child{padding-right:0px;}
	
	.headWrap .head .headRight{
		width:100px;
		float:right;
	}
	.snsBox{padding-top:20px;}
	.snsBox li{
		width:30px;
		height:30px;
		float:left;
		margin-right:15px;
	}
	.snsBox li:nth-of-type(1){background-color:#00a8ff;}
	.snsBox li:nth-of-type(2){background-color:#203ca2;}
	.snsBox li a{color:#ffffff;}
	.snsBox li i{
		width:30px;
		height:30px;
		margin:0;
		padding:0;
		text-align:center;
		line-height:30px;
		font-size:150%;
	}
	
	.mainVisual{
		width:1200px;
		height:868px;
		margin:0 auto;
		position:relative;
	}
	.mainImg{
		position:absolute;
		z-index:1;
	}
	.btmTxtImg{
		width:1200px;
		text-align:center;
		position:absolute;
		z-index:1;
		bottom:0;
	}
	
	.container{
		width:840px;
		height:auto;
		padding:80px 50px 30px;
		margin:0 auto;
		background-color:#e6dabb;
		border-top:10px solid #cfc3a5;
		border-left:10px solid #cfc3a5;
		border-right:10px solid #cfc3a5;
		box-shadow:0px 0px 30px 15px #e9d697 inset;
		-moz-box-shadow:0px 0px 30px 15px #e9d697 inset;
		-webkit-box-shadow:0px 0px 30px 15px #e9d697 inset;
	}
	.areaTtl{margin:0 0 40px 0;}
	.btnBox a.btn.fltBtn{float:left;}
	.btnBox a.btn.sample{margin-right:20px;}
	

	.newsArea .inner{
		width:730px;
		height:auto;
		margin:0 auto;
	}
	.newsArea .inner p{font-size:130%;}
	
	.campaignArea{margin-top:80px;}
	.campaignArea .inner{
		width:840px;
		margin:0 auto;
		background-color:#cccccc;
	}
	
	.storyArea{margin-top:80px;}
	.storyArea .inner{
		width:800px;
		height:auto;
		margin:0 auto;
	}
	.storyArea .inner .box{text-align:center;}
	.storyArea .inner > div:nth-of-type(1){margin-top:40px;}
	.storyArea .inner > div:nth-of-type(2){margin-top:20px;}
	.storyArea .subTtl.addChange{margin-top:80px;text-align:center;}
	.storyArea .inner .bookBox01{
		width:710px;
		margin:30px auto 0;
		padding:0 0 30px 0;
		
	}
	.storyArea .inner .bookBox01 .bookImg{
		width:255px;
		height:auto;
		float:left;
	}
	.storyArea .inner .bookBox01 .bookImg img{max-width:100%;}
	.storyArea .inner .bookBox01 .bookDtl{
		width:425px;
		height:auto;
		float:right;
		padding-top:-10px;
	}
	.storyArea .inner .bookBox01 .bookDtl .bookTtl{
		font-size:160%;
		font-weight:bold;
		line-height:1.4;
	}
	.storyArea .inner .bookBox01 .bookDtl .bookTtl .publisher{font-size:75%;}
	.storyArea .inner .bookBox01 .bookDtl .bookDesc{margin-top:15px;}
	.storyArea .inner .bookBox01 .bookDtl .bookInfo{margin-top:25px;}
	.storyArea .inner .bookBox01 .btnBox{
		clear:both;
		margin-left:285px;
		position:relative;
		top:-50px;
	}
	.storyArea .inner .bookBox01 .btnBox a.btn.btnSize01{width:200px;height:50px;}
	.storyArea .inner .bookBox01 .btnBox a.btn.fltBtn{float:left;}
	.storyArea .inner .bookBox02Wrap{
		width:780px;
		margin:0 auto;
	}
	.storyArea .inner .bookBox02Wrap > div:nth-child(odd){float:left;}
	.storyArea .inner .bookBox02Wrap > div:nth-child(even){float:right;}
	.storyArea .inner .bookBox02{
		width:375px;
		height:auto;
		margin-top:80px;
	}
	.storyArea .inner .bookBox02 .bookImg{
		width:160px;
		min-height:230px;
		height:auto;
		position:relative;
		float:left;
	}
	.storyArea .inner .bookBox02 .bookImg p{
		width:100px;
		height:30px;
		font-size:120%;
		font-weight:bold;
		color:#ffffff;
		text-align:center;
		line-height:30px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;
	}
	.storyArea .inner .bookBox02 .bookInfoBox01{
		width:200px;
		height:auto;
		float:right;
	}
	.storyArea .inner .bookBox02 .bookInfoBox01 .bookInfo{
		font-size:90%;
		line-height:1.4;
	}
	.storyArea .inner .bookBox02 .bookInfoBox01 .btnBox a.btn.btnSize02{width:200px;height:42px;}
	.storyArea .inner .bookBox02 .bookInfoBox01 .btnBox a.btn{margin-top:10px;}
	.storyArea .inner .bookBox02 .bookInfoBox02{
		clear:both;
		width:100%;
		height:auto;
		padding-top:15px;
	}
	.storyArea .inner .bookBox02 .bookInfoBox02 h4{
		font-size:140%;
		font-weight:bold;
		line-height:1.4;
	}
	.storyArea .inner .bookBox02 .bookInfoBox02 p{
		margin-top:7px;
		font-size:100%;
	}
	
	.movieArea{margin-top:80px;}
	.movieArea .movWrap{
		width:720px;
		height:auto;
		background:#000000;
		margin:0 auto;
	}
	.movieArea .movWrap .mov{
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	.movieArea .movWrap .mov iframe{
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
	.movieArea .inner .movBtm{
		text-align:center;
	}
	.movieArea .inner .movBtm > div:nth-of-type(1){margin-top:50px;}
	.movieArea .inner .movBtm > div:nth-of-type(2){margin-top:30px;}
	.movieArea .inner .movBtm .imgWrap{
		width:840px;
		margin:20px auto 0;
	}
	.movieArea .inner .movBtm .imgWrap div{
		width:415px;
		height:auto;
	}
	.movieArea .inner .movBtm .imgWrap div:nth-child(odd){float:left;}
	.movieArea .inner .movBtm .imgWrap div:nth-child(even){float: right;}
	.movieArea .inner .movBtm .imgWrap div img{width:100%;}
	.movieArea .inner .movBtm p{
		width:840px;
		margin:0 auto;
		text-align:left;
	}
	.movieArea .inner .movBtm .txtBox01{
		font-size:120%;
		font-weight:bold;
		margin-top:20px;
	}
	.movieArea .inner .movBtm .txtBox02{
		font-size:120%;
		margin-top:10px;
	}
	.movieArea .inner .movBtm .txtBox03{
		font-size:100%;
		text-align:right;
		margin-top:60px;
	}
	
	.relationArea{margin-top:80px;}
	.relationArea .inner .bnrWrap{
		width:750px;
		margin:0 auto;
	}
	.relationArea .inner .bnrWrap > div:nth-child(odd){float:left;}
	.relationArea .inner .bnrWrap > div:nth-child(even){float:right;}
	.relationArea .inner .bnrWrap .bnrItem{
		width:370px;
		height:100px;
		margin-top:10px;
	}
	
	.foot{
		text-align:center;
		margin-top:100px;
	}
	.toTop{
		width:60px;
		height:60px;
		position:fixed;
		bottom:10px;
		right:50px;
		background-color:rgba(255,255,255,0.8)
	}
	
	#linkList{
		background-color:transparent;
		background-image:none;
		background-size:auto;
		background-attachment:scroll;
	}
	#linkList .wrapper{
		width:675px;
		height:90px;
		padding:100px 0;
		margin:0 auto;
		text-align:center;
	}
	#linkList .btnWrap li{
		display:inline-block;
		margin:0 10px;
	}
	#linkList .btnWrap li:nth-child(1),
	#linkList .btnWrap li:nth-child(2),
	#linkList .btnWrap li:nth-child(3){
		width:200px;
		padding:1px;
		background-color:#c5c5c5;
	}
	/*#linkList .btnWrap li:last-child{margin-right:0px;}*/
	
	#linkList .btnWrap li:nth-child(1) a,
	#linkList .btnWrap li:nth-child(2) a,
	#linkList .btnWrap li:nth-child(3) a{
		height:80px;
		display:block;
		border:3px solid #ededed;
		box-sizing:border-box;
		background-color:#ffffff;
		text-align:center;
		position:relative;
	}
	#linkList .btnWrap li:nth-child(1) a img,
	#linkList .btnWrap li:nth-child(2) a img,
	#linkList .btnWrap li:nth-child(3) a img{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;
	}
	
}