@charset "UTF-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosansjp.css');

body {
	font-family:'Noto Sans JP',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ",  "游ゴシック体","Yu Gothic", YuGothic, Verdana, sans-serif !important;
	-webkit-text-size-adjust: none;
	letter-spacing:0px;
	color:#000;
	background:#fbf7e3;
}

/* LINK
---------------------------------------------------- */
a:link		{ color:#000; 	text-decoration:none; }
a:visited	{ color:#444; 	text-decoration:none; }
a:hover		{ color:#d03a39; text-decoration:none;}
a:active	{ color:#999; 	text-decoration:none; }



@media screen and (min-width: 641px) {
.forPC{ display:block; }
.forSP{ display:none; }
	
body {
	font-size:16px;
	line-height:1.7;
	}
p{ font-weight:400;}

}

@media screen and (max-width: 640px) {
body {
	font-size:13px;
	line-height:1.6;
	}
p{ font-weight:400;}
.forPC{ display:none; }
.forSP{ display:block; }
}

.small{
	font-size:70%;
}

/* BASE
----------------------------------------------------- */


#wrapper{
	width:100%;
	position:relative;
	margin:0;
	overflow:hidden;
	}
@media screen and (max-width: 640px){
	#wrapper{
	}
}
@media screen and (min-width: 981px){
	#wrapper{
	}
}
@media screen and (max-width: 980px) and (min-width: 641px){
	#wrapper {
	}
}



#wrapper section{
	width:100%;
	display:block;
	position:relative;
}

.contents{
	position:relative;
	width:980px;
	margin:0 auto;
	
}
@media screen and (max-width: 1011px) and (min-width: 641px){
	.contents{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:0 20px;
	}
}
@media screen and (max-width: 640px){
	.contents{
	position:relative;
	width:100%;
	margin:0 auto;
	overflow: hidden;
	}
}

/* Category Title
----------------------------------------------------- */


/* SNS LINK
----------------------------------------------------- */
#snsLink{
	position:fixed;
	top:75px;
	right:10px;
	z-index:200;
	width:60px;
	height:130px;
	background: rgba(248,188,5,0.90);
	border:1px solid rgba(255,255,255,0.3);
	border-radius: 8px; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
	-moz-box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
	box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
	}
@media screen and (min-width: 1080px) {
	#snsLink{
	position:fixed;
	top:74px;
	right:20px;
	}
}
@media screen and (max-width: 1080px) {
	#snsLink{
	position:fixed;
	top:60vW;
	right:-5px;
	}
}
@media screen and (max-width: 640px) {
	#snsLink{
	position:absolute;
	top:50vW;
	left:-5px;
	width:50px;
	}
}
#snsLink h6{
	color:#fff;
	font-size:14px;
	text-align:center;
	letter-spacing:1px;
	line-height:13px;
	margin-top:8px;
}
#snsLink h6 .small{
	color:#fff;
	font-size:10px;
}
@media screen and (max-width: 640px) {
	#snsLink h6{
	font-size:12px;
	}
	#snsLink h6 .small{
	font-size:9px;
	letter-spacing: 0.2px;
	}
}
#snsLink .slink{
	width:40px;
	height:40px;
	display: block;
	text-align:center;
	padding-top:10px;
	position:absolute;
	}
#snsLink .slink::before{
	position:absolute;
	top:1px;
	left:5px;
	width:30px;
	height:1px;
	content:' ';
	background:rgba(255,255,255,0.20);
}
#snsLink .slink::after{
	position:absolute;
	top:0px;
	left:5px;
	width:30px;
	height:1px;
	content:' ';
	background:rgba(0,0,0,0.10);
}
#snsLink #twiBtn.slink{ position:absolute; top:35px; left:10px;}
#snsLink #faceBtn.slink{ position:absolute; top:85px; left:10px;}

@media screen and (max-width: 640px) {
	#snsLink #twiBtn.slink{ position:absolute; top:35px; left:5px;}
	#snsLink #faceBtn.slink{ position:absolute; top:85px; left:5px;}
}
#snsLink .slink a{
	-webkit-transition: 0.1s;
	-moz-transition: 0.1s;
	transition: 0.1s;
	display:block;
	opacity:1;
	width:100%;
	height:100%;
	
}
#snsLink .slink a:hover{
	opacity:0.8;
}

#snsLink .slink img{
	width:20px !important;
	}
@media screen and (max-width:980px)  {
	
}





/* FOOTER
----------------------------------------------------- */
footer{
	width:100%;
	background:#1e2525;
	padding:50px 0 20px 0;
	text-align:center;
}
footer img#creditImg{
	opacity:0.5;
}
@media screen and (max-width: 640px)  {
	#credit{
	margin:20px auto 0 auto;
	width:75%;
	}
	footer{
	width:100%;
	background:#1e2525;
	padding:10% 0 75px 0;
	text-align:center;
}	
	footer img#creditImg{
	width:95%;
	}	
}



/* PAGETOP
----------------------------------------------------- */

#pagetopBtn{
	margin:10px auto 30px auto;
	display:block;
	width:48px;
}

@media screen and (max-width: 640px)  {
	#pagetopBtn{
	margin:10px auto;
	display:block;
}
	
}


@media screen and (max-width: 640px)  {
	

}


/* LOADING
----------------------------------------------------- */
#loading{
    position: absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:400px;
    height:63px;
	text-align:center;
    display:block;
	}
.loader-inner{ width:100%; height:100%;}
 #loading img{
	height:100%;
	 display:block;
	margin:0 auto;
	}

@media screen and (max-width: 640px)  {
	#loading{
	width:90%;
    height:43px;
	}
}
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
   	background:url("../images/loading_bg.jpg") center center no-repeat;
	background-size:100% 100%;
    z-index: 10000 !important;
}
@media screen and (max-width: 640px)  {
	#loader-bg {
	background-size:auto 100%;
}
}



/* MODAL
----------------------------------------------------- */
@media screen and (min-width: 641px)  {
	.modal{
		width:100%;
		height:100%;
		background:#fff;
		border-radius: 4px; 
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px; 
		padding:30px 30px 30px 30px;
		margin:0;
	}
	.modal h1{
		font-size:24px;
		color:#01519a;
		margin-bottom:0px;
		font-weight:700;
		line-height:25px;
		margin-top:0px;
	}
	.modal h1 .small{
		font-size:50%;
		font-weight:700;
	}
	.modal h4{
		font-size:13px;
		color:#01519a;
		margin-bottom:30px;
		font-weight:500;
		line-height:25px;
		margin-top:0px;
	}
	.modal p{
		font-size:14px;
		
		line-height:21px;
	}
	.modal .modalImg{
		float:right;
		width:150px;
		height:auto;
		margin:0 0 15px 15px;
	}
	.modalHeader{
		height:90px;
	}
	.modal .txtArea{
		width:100%;
		height: calc(100% - 90px);
		overflow-y:auto !important;
		padding-right:10px;
		overflow-x: hidden !important; 
	}
	.modal .txtArea{
		overflow:scroll;
	}
	.book { width:400px; float:right; margin:20px 20px 20px 20px;}
}
@media screen and (max-width: 640px)  {
	.modal{
		width:100vw;
		height:100vh;
		background:#fff;
		padding:20px 5% 5% 5%;
		margin:0;
	}
	.modalHeader{
		height:90px;
	}
	.modal h1{
		font-size:16px;
		color:#01519a;
		margin-bottom:0px;
		font-weight:700;
		line-height:16px;
		margin-top:0px;
		width:100%;
	}
	.modal h1 .small{
		font-size:70%;
		font-weight:700;
	}
	.modal h4{
		font-size:11px;
		width:100%;
		color:#01519a;
		margin-bottom:30px;
		font-weight:500;
		line-height:25px;
		margin-top:0px;
	}
	.modal .modalImg{
		float:right;
		width:100px;
		height:auto;
		margin:0 0 15px 15px;
	}
	.modal .txtArea{
		height: calc(100% - 90px);
		overflow:scroll;
	}
	
	.book { width:100%; margin-top:20px;}
}