@charset "utf-8";

/* ===== base ===== */
body {
	background: url(../images/top_bg2.png);
	color: #333;
	font-family: "Meiryo", "Minion Pro", "DFPHSMincho-W3", "MS PGothic", Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
img {
	margin: 0;
	max-width: 100%;
	padding: 0;
}
a img {
	border: none;
	display: block;
}

/* ===== utilities ===== */
.b { font-weight: bold; }
.center { text-align: center; }

/* ===== header ===== */
#header {
	background: #fff;
	width: 100%;
	display: flex;
	align-items: stretch;
}
.header_main {
	width: 84%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.header_t {
	width: 100%;
}
.header_b {
	display: flex;
	align-items: center;
}
.header_l {
	width: 45%; /* 元 38% ÷ 84% */
}
.header_m {
	width: 55%; /* 元 46% ÷ 84% */
}
.header_m img {
	width: 100%;
}
.header_r {
	width: 16%;
}
.header_r img {
	width: 100%;
}

/* ===== main pic ===== */
.main_pic,
.sub_pic {
	display: flex;
}
.main_pic img,
.sub_pic img {
	width: 100%;
}

/* ===== searchform ===== */
.searchform {
	width: 96%;
	border-radius: 8px;
	border: 3px solid #f06d8e;
	background-color: #FFF;
	margin: 2% 2%;
	box-sizing: border-box;
}
.searchform .field {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f2c6d1;
	padding: 0.6em 0.5em;
}
.searchform .field .label {
	flex-shrink: 0;
	width: 88px;
	margin-right: 0.5em;
}
.searchform .field .label img {
	display: block;
	width: 100%;
}
.searchform .field .control {
	flex: 1;
	min-width: 0;
}
.searchform .field .control select {
	width: 100%;
	box-sizing: border-box;
	font-size: 1em;
	font-weight: bold;
	color: #333;
	background-color: #fff;
	border: 2px solid #999;
	border-radius: 6px;
	padding: 0.5em 0.4em;
}
/* 未選択：赤字＋赤枠＋薄ピンク背景 */
.searchform .field .control select.empty {
	color: #e8336d;
	border-color: #e8336d;
	background-color: #fdeaef;
}
/* チェックマーク（未選択＝グレー、選択済＝緑） */
.searchform .field::after {
	content: "✓";
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	margin-left: 0.5em;
	border-radius: 50%;
	background: #bbb;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.searchform .field.done::after {
	background: #8cc63f;
}
.searchform a.submit {
	display: block;
	padding: 1em;
}
.searchform a.submit img {
	margin: 0 auto;
}

/* ===== tel（電話で問い合わせ） ===== */
.tel_box {
	margin: 2% 2%;
	display: flex;
}

/* ===== school list（横スクロール） ===== */
.school_list_box {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	padding: 15px 0;
}
.school_list_box img {
	display: inline-block;
	vertical-align: middle;
	width: 220px;
	margin: 0 1px;
	box-sizing: border-box;
}

/* ===== about（〜とは？） ===== */
.about_box {
	background: #fff;
	border: 4px solid #bbb29f;
	border-radius: 10px;
	margin: 2% 2%;
	padding: 12px 14px;
	box-sizing: border-box;
}
.about_box .title {
	color: #6d5322;
	font-weight: bold;
	font-size: 5vw;
	text-align: center;
	margin-bottom: 8px;
}
.about_box .text {
	color: #6b5a3e;
	font-size: 16px;
	line-height: 23px;
	text-align: left;
}

/* ===== feature ===== */
.guide_pic {
	padding-top: 30px;
}
.feature {
	text-align: center;
	font-size: 3.8vw;
	margin:4% 4%;
}
.feature span {
	color: #fa4e6f;
	font-weight: bold;
	font-size: 1em;
}
.point_pic {
	display: flex;
	margin: 2% 2%;
}
.point_pic img {
	width: 100%;
}

/* ===== table（比較表・横スクロール） ===== */
.table_scroll {
	width: 96%;
	margin: 2% 2%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.table_scroll img {
	display: block;
	width: 170%;
	max-width: none;
}

/* ===== review ===== */
.review_box {
	background: url(/lpnew/images/review_box.png) repeat-y;
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 1% 10px 10%;
}
.review_box_l {
	width: 20%;
	text-align: center;
	font-size: 12px;
}
.review_box_l img {
	width: 100%;
}
.review_box_r {
	padding: 0 2%;
	font-size: 12px;
	line-height: 18px;
	width: 80%;
}
.review_di {
	background: url(/lpnew/images/review_di.png) no-repeat;
	height: 11px;
	padding-bottom: 20px;
}

/* ===== closing / footer ===== */
.closing {
	width: 100%;
	box-sizing: border-box;
}
.footer {
	background-color: #999;
	margin-top: 2em;
	line-height: 2em;
	font-size: 0.6em;
	color: #FFF;
	text-align: center;
	padding: 1em;
}
.footer a {
	color: #FFF;
}