@charset "UTF-8";
/*
=======================================================
1.BOX
2.MARGIN/PADDING
3.COL
4.FLEX
5.BACKGROUND-COLOR
=======================================================
*/



@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

.mincho{
	font-family: "Sawarabi Mincho";
}
.georgia{
	font-family: "Georgia";
}
.maru{
	font-family: 'Rounded Mplus 1c';
}

@media (max-width:767px){.hidden-xs{display:none!important}}
@media (min-width:768px){.visible-xs{display:none!important}}

/*==================== 1.BOX ====================*/
.box100{
	width:100%;
}
.topContainer{
	width:1000px;
	margin:auto;
	padding:0 15px;
}
.topImage{
	width:100%;
	text-align:center;
	font-size: 0;
}
.topImage img{
	    width: 100%;
	max-width:100%;
	display:inline-block;
}

@media screen and (max-width: 1239px) {
	.topContainer{
		width:1150px;
	}
}
@media screen and (max-width: 1199px) {
	.topContainer{
		width:970px;
	}
}
@media screen and (max-width: 991px) {
	.topContainer{
		width:750px;
	}
}
@media screen and (max-width: 767px) {
	.topContainer{
		width:94%;
		padding:0;
	}
}


/*==================== 2.MARGIN/PADDING ====================*/

/* MARGIN-TOP-BOTTOM */
.marTB10{
	margin:10px 0;
}
.marTB20{
	margin:20px 0;
}
.marTB30{
	margin:30px 0;
}
.marTB40{
	margin:40px 0;
}
.marTB50{
	margin:50px 0;
}

/* MARGIN-TOP */
.marT50{
	margin-top:50px;
}
/* MARGIN-BOTTOM */
.marB10{
	margin-bottom:10px;
}
.marB20{
	margin-bottom:20px;
}
.marB30{
	margin-bottom:30px;
}
.marB40{
	margin-bottom:40px;
}
.marB50{
	margin-bottom:50px!important;
}
.marB60{
	margin-bottom:60px;
}
.marB70{
	margin-bottom:70px;
}
.marB80{
	margin-bottom:80px;
}
.marB90{
	margin-bottom:90px;
}
.marB100{
	margin-bottom:100px;
}

/* PADDING */
.padTB0{
	padding-top:0!important;
	padding-bottom:0!important;
}
.padTB10{
	padding-top:10px!important;
	padding-bottom:10px!important;
}
.padTB20{
	padding-top:20px!important;
	padding-bottom:20px!important;
}
.padTB30{
	padding-top:30px!important;
	padding-bottom:30px!important;
}
.padTB40{
	padding-top:40px!important;
	padding-bottom:40px!important;
}
.padTB50{
	padding-top:50px!important;
	padding-bottom:50px!important;
}
.padTB60{
	padding-top:60px!important;
	padding-bottom:60px!important;
}

/* PADDING-RIGHT */
.padR50{
	padding-right:50px;
}

/*==================== 3.COL ====================*/
.boxRow{
	display:flex;
	width:100%;
	justify-content: space-between;
	flex-wrap:wrap;
}
.col1{
	width:calc(100% / 12);
}
.col2{
	width:calc(100% / 6);
}
.col3{
	width:calc(100% / 4);
}
.col4{
	width:calc(100% / 3);
}
.col5{
	width:calc((100% / 12) * 5);
}
.col6{
	width:50%;
}
.col7{
	width:calc((100% / 12) * 7);
}
.col8{
	width:calc((100% / 3) * 2);
}
.col9{
	width:calc((100% / 4) * 3);
}
.col10{
	width:calc((100% / 6) * 5);
}
.col11{
	width:calc((100% / 12) * 11);
}
.col12{
	width:100%;
}





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

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

}
@media screen and (max-width: 767px) {
	.col1{
		width:50%;
		margin-bottom:20px;
	}
	.col2{
		width:50%;
		margin-bottom:20px;
	}
	.col3{
		width:50%;
		margin-bottom:20px;
	}
	.col4{
		width:100%;
		margin-bottom:20px;
	}
	.col6{
		width:100%;
		margin-bottom:20px;
	}
	.col8{
		width:100%;
		margin-bottom:20px;
	}
	.col9{
		width:100%;
		margin-bottom:20px;
	}
}
@media screen and (max-width: 480px) {
	.col3{
		width:100%;
		margin-bottom:20px;
	}
}




/*==================== 4.FLEX ====================*/
.flexjc-sb{
	display:flex;
	justify-content: space-between;
}
.flexai-c{
	align-items: center;
}




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

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

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

}





/*==================== 5.BACKGROUND-COLOR ====================*/
.bgColor-f9f4e7{
	background:#f9f4e7;
}
.bgColor-fff8ef{
	background:#fff8ef;
}
.bgColor-f4f4f4{
	background:#f4f4f4;
}
.bgColor-fafafa{
	background:#fafafa;
}
.bgColor-8fc21b{
	background:#8fc21b;
}