body{
	line-height: 1.8;
	font-size: 14px;
	font-family: 'Hiragino Kaku Gothic ProN',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	box-sizing: border-box;
}
a{
	color:#000;
	text-decoration:none;
}
.center {
	display:block;
	margin:0 auto;
}
.clear {
	clear:both;
}
.wrapper{
	width: 100%;
	padding: 0 40px;
	margin: 0 auto;
	max-width: 1280px;
}
@media screen and (max-width: 768px) {
	.wrapper{
		padding: 0 20px;
	}
}


/*////////////////////////////////////////////////////////*/
/*//////////////////// clearfix //////////////////////////*/
/*////////////////////////////////////////////////////////*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
.clear{
	clear:both;
}
.left{
	float: left;
}
.right{
	float: right;
}

/*////////////////////////////////////////////////////////*/
/*//////////////////// responsive ////////////////////////*/
/*////////////////////////////////////////////////////////*/
.respd{
	max-width: 100%;
	height: auto;
	width /***/:auto;
	display: block;
	vertical-align:top;
}

/*////////////////////////////////////////////////////////*/
/*//////////////////// fadeaction ////////////////////////*/
/*////////////////////////////////////////////////////////*/

.fade{
	opacity: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.fade:hover{
    opacity: 0.7;
}

/*////////////////////////////////////////////////////////*/
/*////////////////////// menu ////////////////////////////*/
/*////////////////////////////////////////////////////////*/
header {
    width: 100%;
    background: #3796D6;
	color: #fff;
	line-height: 40px;
	text-align: center;
	font-size: 20px;
}
.headerlogo {
    width: 150px;
    display: block;
    float: left;
}
/*////////////////////////////////////////////////////////*/
/*//////////////////// totopbtn //////////////////////////*/
/*////////////////////////////////////////////////////////*/
#topBtn{
	display: none;
	position: fixed;
	bottom: 0;
	z-index: 10;
	width: 40px;
	height: 40px;
	border: 1px solid #ccc;
	padding: 5px;
	background: #fff;
	right: 20px;
}
footer {
    position: relative;
    width: 100%;
    padding: 20px 0;
    color: #555;
	border-top: 1px solid #ccc;
	margin-top: 30px;
	font-size: 12px;
	line-height: 1.4;
}
footer .wrapper{
	display: flex;
}
footer .fblock:last-child{
	padding-left: 20px;
}

.bookflex{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}
.book{
	text-align: center;
	width: 200px;
	margin: 0 30px 30px 0;
	line-height: 1.5;
}
.book a{
	display: block;
}
.book img{
	display: block;
	margin: 0 auto 15px;
	width: 100%;
	max-width: 100px;
	border: 1px solid #eee;
}
#content{
	min-height: calc(100vh - 175px);
}

/*////////////////////////////////////////////////////////*/
/*//////////////////// show-hide /////////////////////////*/
/*////////////////////////////////////////////////////////*/

.show1280,.show1080,.show980,.show860,.show768,.show640,.show540,.show480,.show400{
	display: none;
}
@media screen and (max-width: 1280px) {
	.show1280{
		display:block;
	}
	.hide1280{
		display:none;
	}
}
@media screen and (max-width: 1080px) {
	.show1080{
		display:block;
	}
	.hide1080{
		display:none;
	}
}
@media screen and (max-width: 980px) {
	.show980{
		display:block;
	}
	.hide980{
		display:none;
	}
}
@media screen and (max-width: 860px) {
	.show860{
		display:block;
	}
	.hide860{
		display:none;
	}
}
@media screen and (max-width: 768px) {
	.show768{
		display:block;
	}
	.hide768{
		display:none;
	}
}
@media screen and (max-width: 640px) {
	.show640{
		display:block;
	}
	.hide640{
		display:none;
	}
}
@media screen and (max-width: 540px) {
	.show540{
		display:block;
	}
	.hide540{
		display:none;
	}
	footer .wrapper {
	    display: block;
	}
	footer .fblock:last-child {
	    padding: 15px 0 0 0;
	}
	#content {
	    min-height: calc(100vh - 265px);
	}
	header {
	    font-size: 16px;
	}
	.book{
		width: 30%;
		margin: 0 5% 30px 0;
	}

}
@media screen and (max-width: 480px) {
	.show480{
		display:block;
	}
	.hide480{
		display:none;
	}
}
@media screen and (max-width: 400px) {
	.show400{
		display:block;
	}
	.hide400{
		display:none;
	}
}