@charset "utf-8";
@import"base.css";
@import"contents.css";

/*------------ サポート　---------------
----------------------------------------*/
#support .e_container h2 { margin-bottom: 25px; }
#support .e_container h3.sp_event {
	height:22px; line-height:22px; margin-bottom:10px;
	font-size:18px; letter-spacing:1px; border-left:5px solid #ccc; background:url("../images/bg_line.png") 0 0 repeat-x; }
	#support h3.sp_event span { background:#fff; height:100%; padding:0 10px; }
		#support #spring h3.sp_event { color:#ff9999; border-color:#ffcccc; }
		#support #summer h3.sp_event { color:#6699cc; border-color:#b5e7ff; }
		#support #autumn h3.sp_event { color:#ff9933; border-color:#ffc58c; }
		#support #winter h3.sp_event { color:#66cc99; border-color:#afe4ca; }
		#support #after  h3.sp_event { color:#8484ff; border-color:#ccccff; }
	
#support .e_container .event { clear: both; margin-bottom: 15px; }
#support .e_container table { font-size: 14px; border-collapse:collapse; }
	#support .e_container table th { margin: 0; padding: 0 0 5px 0; text-align: left; }
	#support .e_container table .title a { text-decoration:none; font-weight:normal; color:#333; display:block; }
	#support .e_container table .title span { display:inline-block; }
		#support .e_container table .title .month { background:#ccc; width:46px; padding:2px 3px; text-align:center; font-weight:bold; }
			#support #spring table .title .month { background:#ffcccc; }
			#support #summer table .title .month { background:#b5e7ff; }
			#support #autumn table .title .month { background:#ffc58c; }
			#support #winter table .title .month { background:#afe4ca; }
			#support #after  table .title .month { background:#ccccff; }
		#support .e_container table .title .name { padding:0 8px; font-weight:bold; font-size:16px; }
		#support .e_container table .title .target { color:#999; border:1px solid #999; padding:0 3px; font-size:13px; vertical-align:1px; }
		#support .e_container table .title .link {
			float:right; margin-top:2px; color:#3333cc; font-size:13px; text-decoration:underline;
			background:url("../images/icon_voice2.png") 0 50% no-repeat; padding-left:16px; }
		#support .e_container table .title .name:hover,
		#support .e_container table .title .link:hover { color:#ff3241; }
		
	#support .e_container table td.event_link { width: 100px; font-size: 11px; text-align: right; }
		#support .e_container table td.event_link a {
			margin-right: 5px; padding-left: 15px;
			background: url("../../support/event/images/e_bg_link.gif") left 50% no-repeat; }

@media (max-width: 480px) {
	#support .e_container .event { margin-bottom: 20px; }

	#support .e_container .event > img,
	#support .e_container .event > a > img { float:none; display:block; margin:0 auto 10px; }
	
	#support .e_container h3.sp_event {
		margin-bottom: 15px;
		font-size: 2rem;
	}
	#support .e_container table {
		font-size: 1.6rem; 
	}
	#support .e_container table .title .month {
		width: 4em;
		font-size: 1.4rem;
	}
	#support .e_container table .title .name {
		padding: 0 0.8em;
		font-size: 1.8rem;
	}
	#support .e_container table .title .target { 
		font-size: 1.4rem;
	}
	#support .e_container table .title .link {
		font-size: 1.4rem;
	}
}

/*------------ ガイダンス ---------------*/
#support #guidance .guidance_ttl { margin-bottom: 15px; padding-bottom: 5px; font-size:18px; color:#7cbe7c; border-bottom: 3px solid #ccc; }
#support #guidance #g_left { float: left; width:100%; margin:0 -251px 0 0; }
	#support #guidance #g_left dl { margin: 0 251px 0 0; }
	#support #guidance #g_left dt { margin-bottom: 10px; font-weight:bold; }
		#support #guidance #g_left dt span {
			display:inline-block; width:50px; margin-right:10px; padding:2px; box-sizing:border-box;
			background:#8CC63F; text-align:center; font-size:12px; font-weight:normal; color:#fff; }
	#support #guidance #g_left dd { margin-bottom: 20px; padding-bottom: 15px; font-size: 14px; border-bottom: solid 1px #ccc; }
#support #guidance #g_right { float: right; width:231px; }
	#support #guidance #g_right li { margin-bottom: 10px; }

@media (max-width: 480px) {
	#support #guidance .guidance_ttl {
		font-size: 2rem;
	}
	
	#support #guidance #g_left dt {
		font-size: 1.8rem;
	}
	#support #guidance #g_left dt span {
		width: 4em;
		padding: 2px 0;
		font-size: 1.4rem;
	}
	
	#support #guidance #g_left dd {
		padding-bottom: 20px;
		font-size: 1.6rem;
	}
}
@media (max-width: 600px) {
	#support #guidance #g_left, #support #guidance #g_left dl,
	#support #guidance #g_right { float:none; width:100%; margin:0; }
	#support #guidance #g_right { display:none; }
}



/*------------ 学校推薦・総合型選抜対策　---------------*/
/* h3見出し */
#support .ao .con_h3_2 span {
	margin-right: 1em;
}

/* イントロ */
#support .ao .kome {
	font-size: 0.77rem;
}
#support .ao .kome::before {
	content: "※";
}

/* ポイント2～3 */
#support .ao .support_ao_list {
	width: 716px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#support .ao .support_ao_list li {
	width: 47%;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 150%;
}
#support .ao .support_ao_list li:nth-last-child(2),
#support .ao .support_ao_list li:last-child {
	margin-bottom: 0;
}
#support .ao .support_ao_list li img {
	margin-bottom: 10px;
}
#support .ao .support_ao_list li img.mb20 {
	margin-bottom: 20px;
}

@media (max-width: 850px) {
	#support .ao .support_ao_list {
		width: 100%;
		padding: 10px 10px 0;
		box-sizing: border-box;
	}
}
@media (max-width: 768px) {
	.no-tb {
		display: none;
	}
}
@media (max-width: 480px) {
	.no-tb {
		display: inline-block;
	}
	
	#support #main.ao {
		padding: 0;
	}
	
	#support .ao .kome {
		font-size: 90%;
	}
	
	/* 見出し */
	#support .ao .con_h2 {
		/* reset */
		text-align:center;
		border: none;
		border-radius:0;
		box-shadow: none;
		
		margin-bottom: 0;
		padding-top: 18px;
		background-color: #e6f1fb;
		border-top: 4px solid #0e357f;
	}
	#support .ao .con_h2 h2 span {
		/* reset */
		border: 0;
		
		font-size: 2.6rem;
		line-height: 1.0;
		color: #0e357f;
	}
	#support .ao .con_h2 h2 span.smallsize {
		font-size: 1.6rem;
	}
	#support .ao .con_h2 h2+p.no-pc {
		padding: 8px 10px 15px;
		background-color: transparent;
		text-align: left;
	}
	#support .ao .con_h2 p.subttl {
		/* reset */
		border-radius: 0;
		
		padding: 15px 10px;
		color: #ff3;
		font-size: 1.8rem;
		font-weight: bold;
		text-align: left;
		background-color: #0e357f;
	}
	
	/* h3見出し */
	#support .ao .con_h3_2 {
		margin-bottom: 0;
		color: #fff;
		background: #0e357f;
		border: 0;
		font-size: 2rem;
		line-height: 1.4;
	}
	#support .ao .con_h3_2 span {
		display: inline-block;
		margin-right: 0;
		margin-bottom: 10px;
		padding: 5px 10px;
		font-size: 1.2rem;
		color: #0e357f;
		line-height: 1.0;
		background-color: #fff;
		border-radius: 3px;
	}
	
	/* h4見出し */
	#support .ao .con_h4 {
		margin-bottom: 0;
		padding: 8px 10px;
		color: #0e357f;
		background-color: #ff3;
		border: 0;
	}
	
	
	/* イントロ */
	#support .ao #ao_intro .pht_right {
		float: none;
		width: 100%;
		margin: 0 0 15px 0;
	}
	#support .ao .support_ao_list li {
		font-size: 1.6rem;
		line-height: 1.75;
	}
	
	#support .ao .txt {
		padding: 0 10px 15px;
	}
	
	#support .ao .kome {
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
	}
	
	/* ダブル教育 */
	#support .ao #ao_wt .pht_left {
		float: none;
		width: 100%;
		margin: 0 0 15px 0;
	}
	
	/* ポイント2～3 */
	#support .ao .support_ao_list {
		display: block;
		padding: 0;
	}
	#support .ao .support_ao_list li {
		width: 100%;
	}
	#support .ao .support_ao_list li .txt {
	}
	
	/* 動画 */
	#support .ao #video {
		margin: 0 0 40px;
	}
	
	/* 先輩たちの声 */
	#support .ao #w_voice .h2_voice {
		color: #fff;
		background: #0e357f;
		border: 0;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 0;
		box-shadow: none;
		font-size: 115%;
	}
	#support .ao #w_voice .h2_voice span {
		margin: 0;
		padding: 0;
		background-image: none;
		background-color: transparent;
	}
	
	#support .ao #w_voice .w_voice {
		padding: 0 10px;
	}
	
	/* 先輩たちの声 */
	#support .ao .contents_footer {
		margin: 0 10px 20px;
	}
	
	/* 個別相談会～無料でパンフレット */
	.info_area{
		display: block;
	}

}


/*-- 具体例紹介　--------------------*/
/* タイトル　--------------------*/

#support .ao #ao_case .con_h3_2 {
	margin-bottom: 20px;
}

/*-- 生徒プロフィール部分　--------------------*/
#support .ao .case_prof{
	display: flex;
	justify-content: center;
}
#support .ao .case_prof h4 {
	margin: 25px 0 0 40px;;
	padding: 26px 0 0;
	font-size:18px;
	color:#FF5D00;
	text-align: center;
	background: url("../../support/images/ao_case_prof_bg.png") center top no-repeat;
	background-size:auto 16px;
}

#support .ao .case_prof h4 .name_img{
	height: 16px;
}

/*-- ふきだし　--------------------*/

#support .ao .case_fukidashi_img {
	float: left;
	margin: 0 20px 0 0;
}

#support .ao .case_fukidashi {
	box-sizing:border-box;
	float:none;
	width:auto;
	height:auto;
	margin-left:110px;
	padding:15px;
	background:#ffc;
	border:1px solid #ccc;
	border-radius:6px;
	position: relative;
}
#support .ao .case_fukidashi::before {
	content: "";
	position: absolute;
	top: 27px;
	left: -16px;
	border: 6px solid transparent;
	border-right: 10px solid #ffc;
	z-index: 2;
}
#support .ao .case_fukidashi::after {
	content: "";
	position: absolute;
	top: 25px;
	left: -20px;
	border: 8px solid transparent;
	border-right: 12px solid #ccc;
	z-index: 1;
}
#support .ao .case_fukidashi h4 { margin: 0 0 5px; font-size:16px; color:#FF5D00; }
#support .ao .case_fukidashi h5 { margin: 0 0 10px; font-size:14px; font-weight: bold; }
#support .ao .case_fukidashi p { margin-bottom: 0; font-size: 14px; }
#support .ao .case_fukidashi .name_img { height: 14px; }


@media (max-width: 960px) {
	#support .ao .case_fukidashi p { margin:0; }
}
@media (max-width: 480px) {
	#support .ao .case_prof{
	justify-content: space-evenly;
	}
	#support .ao .case_prof h4 {
		margin: 0;
	}
	#support .ao .case_fukidashi { margin-left:75px; }
	#support .ao #ao_case .case_fukidashi_img { width: 60px; }
}



/*-- フロー　--------------------*/

#support .ao .case_flow ol li {
	margin: 40px 0 55px;
	padding: 24px;
	background-color: #ffeff6;
	position: relative;
	text-align: center;
}
#support .ao .case_flow ol li:first-child {
	margin-top: 0;
}

#support .ao .case_flow ol li:first-child,
#support .ao .case_flow ol li:last-child {
	padding: 10px 24px;
	background-color: #fff;
	border: 2px solid #cd0032;
}
#support .ao .case_flow ol li:last-child {
	padding: 38px 24px;
	background: url("../../support/images/ao_case_goukaku_bg.png") right top no-repeat;
	background-size: 180% auto;
}

/* 矢印 */
#support .ao .case_flow ol > li::after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 28px;
	border-color: #f5b5d2 transparent transparent transparent;
	text-align: center;
	vertical-align: middle;
	bottom: -72px;
	margin-left: -28px;
}
#support .ao .case_flow ol > li:last-child::after {
	display: none;
}


#support .ao .case_flow ol li div {
	text-align: left;
}

#support .ao .case_flow ol li .case_flow_img {
	width: 240px;
	margin-bottom: 20px;
}

#support .ao .case_flow ol li h4 {
	margin-bottom: 0.8em;
	font-size: 17px;
	font-weight: bold;
	color: #cd0032;
}
#support .ao .case_flow ol li:first-child h4,
#support .ao .case_flow ol li:last-child h4 {
	margin-bottom: 0;
	font-size: 20px;
}
#support .ao .case_flow ol li:last-child h4 {
	display: inline-block;
	padding-left: 120px;
}

#support .ao .case_flow ol li:last-child img{
	position: absolute;
	bottom: 0;
	left: calc(50% - 140px);
}

#support .ao .case_flow ol li h4 span {
	margin-right: 1em;
	padding: 2px 5px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #cd0032;
}

@media (max-width: 480px) {
	
	#support .ao .case_flow ol {
		margin: 0 10px;
	}
	#support .ao .case_flow ol li:last-child {
		background-size: 688px auto;
	}
	
	#support .ao .case_flow ol li {
		padding: 15px;
	}
	#support .ao .case_flow ol li h4 {
		margin-bottom: 0.5em;
	}
}

/* フロー内のふきだし */

#support .ao .case_flow ol li .case_fukidashi {
	margin-left: 65px;
	background: #fff;
}
#support .ao .case_flow ol li .case_fukidashi::before {
	top: 27px;
	left: -16px;
	border: 6px solid transparent;
	border-right: 10px solid #fff;
	z-index: 2;
}
@media (max-width: 480px) {
	#support .ao #ao_case .case_flow .case_fukidashi_img { width: 45px; }
	
	#support .ao .case_flow ol li .case_flow_img {
		width: 100%;
	}
}



/*-- 生徒と校長のコメント　--------------------*/
#support .ao .case_flow .yellowbox .ao_comment {
	padding-bottom: 20px;
}
#support .ao .case_flow .yellowbox .ao_comment:last-child {
	padding-bottom: 0;
}
#support .ao .case_flow .yellowbox .ao_comment .name_img {
	height: 14px;
}
#support .ao .case_flow .yellowbox h4 {
	margin-bottom: 0.5em;
}
#support .ao .case_flow .yellowbox h5 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: bold;
}
#support .ao .case_flow .yellowbox p {
	font-size: 14px;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	#support .ao .case_flow .yellowbox {
		padding: 20px;
	}
	#support .ao .case_flow .yellowbox p {
		padding-left: 90px;
	}
}

@media (max-width: 480px) {
	#support .ao .case_flow .yellowbox {
		margin: 0 10px;
	}
}



/*------------ 受験コンサルタント ---------------*/
#support #intro {
	margin-bottom: 40px;
}

#support .img_intro {
	width: 280px;
	margin-bottom: 10px;
}
@media screen and (max-width:767px) {
	#support #intro {
		margin-bottom: 30px;
	}
}
@media screen and (max-width:480px) {
	#support .img_intro {
		margin-bottom: 15px;
		width: 100%;
	}
}

#support #teacher .teacher_contents {
	margin-bottom: 50px;
}
@media screen and (max-width:767px) {
	#support #teacher .teacher_contents {
		margin-bottom: 30px;
	}
}
@media screen and (max-width:480px) {
}

#support .photo img.pht_left,
#support .photo img.pht_right {
	width: 280px;
}
#support .photo img.w320 {
	width: 320px;
}

@media (max-width: 480px) {
	#support .photo img.pht_left,
	#support .photo img.pht_right,
	#support .photo img.w320 {
		width: 100%;
	}
}


@media (max-width: 480px) {
	#support #teacher li img { display:block; float:none; margin:0 auto 10px; }
}