@charset "utf-8";

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

汎用 class「.basic」

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

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

.basic {
	width: 100%;
	padding: 75px 0;
	position: relative;/* オフセットアンカーのため */
}

.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%;
}

}





/* 背景色バリエーション **************************/
.basic.white { background-color: #FFF; }
.basic.red   { background-color: #C1272D; color: #FFF; }