@charset "utf-8";

/********************************************************************

中ページ用の基本設定

*********************************************************************/

/* hero **************************************************************/
.hero {
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	display: table;
}
.hero > div {
	width: 100%;
	height: 400px;
	background-color: rgba(0,0,0,0.4);
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.hero h1 {
	color: #FFF;
	letter-spacing: 0.25em;
}
.hero h1 .en {
	font-family: "Times New Roman", Times, "serif";
}
.hero h1 .ja {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}


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

.hero > div {
	height: 300px;
}

}

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

.hero > div {
	height: auto;
	padding: 60px 0;
}

.hero h1 .ja {
	letter-spacing: 0;
}

}



/******************************************************************

汎用 class「.basic」

*******************************************************************/

/* ボックス設定 ***************************************************/

.basic {
	width: 100%;
	padding: 75px 0;
	position: relative;
}
.basic.green { background-color: #8ABB2C; }
.basic.beige { background-color: #F0F0E1; }
.basic.white { background-color: #FFF; }

.basic > div {
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
}

.basic > div > div {
	float: left;
	box-sizing: border-box;
	padding: 25px;
}
.basic > div > div.per100 { width: 100%; }
.basic > div > div.per50  { width: 50%; }
.basic > div > div.per25  { width: 25%; }
.basic > div > div.per33  { width: 33.33%; }
.basic > div > div.per66  { width: 66.66%; }



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

.basic             { padding: 45px 0; }
.basic > div > div { padding: 15px; }

.basic > div > div.per50,
.basic > div > div.per25,
.basic > div > div.per33,
.basic > div > div.per66 {
	float: none;
	width: 100%;
}

}