@charset "UTF-8";

/* --------------------------------------------------------------

	清光学園 受験生NAVI [イベント情報CSS]
	/common/css/event.css

-------------------------------------------------------------- */

/* ==================================================
	content_wrap
================================================== */
#event #content_wrap #content .inbox {
	margin: 0 0 30px;
	padding: 0 0 25px;
	border-top: solid 2px #7aa0ea;
	border-bottom: solid 2px #7aa0ea;
}
#event #content_wrap #content .inbox h2 {
	margin: 0 0 15px;
	padding: 20px;
	background-color: #f4f4f4;
}
#event #content_wrap #content .inbox .text,
#event #content_wrap #content .inbox .text p {
	line-height: 1.6;
}
#event #content_wrap #content .inbox a {
	color: #4177e0;
	text-decoration: underline;
}
#event #content_wrap #content .inbox a:hover {
	text-decoration: none;
}

@media screen and (min-width: 741px) {
	#event #content_wrap {
		background: url(../images/bg_under.png) center top repeat-x;
	}
	#event #content_wrap #title_bg {
		background: url(../../event/images/title_bg.png) center top no-repeat;
	}
	#event #content_wrap #title_bg #content #main_col_bg {
		background: url(../images/content_bg.png) center top no-repeat;
	}
	#event #content_wrap #title_bg #content #main_col_bg #main_col {
		background: none;
		width: auto;
		float: none;
		padding: 30px 46px 0;
	}
	#event #content_wrap #content h1 {
		height: 164px;
		display: table-cell;
		vertical-align: middle;
		padding-left: 6px;
	}
	#event #content_wrap #content .inbox.half {
		width: 420px;
		padding-bottom: 7px;
	}
	#event #content_wrap #content .inbox.half .image {
		float: right;
		margin: 0 20px 20px 20px;
	}
	#event #content_wrap #content .inbox.half .text {
		/*float: left;
		width: 200px;*/
		margin-left: 20px;
	}
	#event #content_wrap #content .inbox .sub_copy {
		margin: 20px;
		font-size: 130%;
		color: #4177e0;
	}
}
@media screen and (max-width: 740px) {
	#event #content_wrap #title_bg #content #main_col_bg {
		background: #fff;
	}
	#event #content_wrap #title_bg #content #main_col_bg #main_col {
		background: none;
		width: auto;
		float: none;
		margin: 0 1em;
		padding: 0;
		overflow: hidden;
	}
	#event h1 img {
		width: 100%;
		height: auto;
	}
	#event #content_wrap #content .inbox {
		clear: both;
		margin: 0;
		padding: 0 0 25px;
		border-top: solid 2px #7aa0ea;
		border-bottom: none;
	}
	#event #content_wrap #content .inbox h2 {
		padding: 1em 0.75em;
	}
	#event #content_wrap #content .inbox.half .image {
		float: right;
		width: 40%;
		margin: 0 0 1em 1em;
	}
	#event #content_wrap #content .inbox.half .text {
		float: none;
	}
	#event #content_wrap #content .inbox .sub_copy {
		margin-bottom: 0.75em;
		color: #4177e0;
	}
}


/* ==================================================
	ttl_copy
================================================== */
@media screen and (min-width: 741px) {
	.ttl_copy {
		margin: 10px 0;
		font-size: 130%;
	}
}
@media screen and (max-width: 740px) {
	.ttl_copy {
		margin: 1em 0;
	}
}

/* ==================================================
	box01
================================================== */
#event #content_wrap #content .inbox.box01 h2 {
	background: url(../../event/images/e01_ttl_bg.png) right center no-repeat #f4f4f4;
	background-size: auto 100%;
}
#event #content_wrap #content .inbox.box01 h3 {
	margin-bottom: 10px;
	text-align: center;
}
#event #content_wrap #content .inbox.box01 .cat_u ul li a {
	color: #6a43b7;
}
#event #content_wrap #content .inbox.box01 .cat_c ul li a {
	color: #00b2db;
}
#event #content_wrap #content .inbox.box01 h3 {
	padding: 7px 0 2px;
}
#event #content_wrap #content .inbox.box01 .cat_u h3 {
	background: #f2eaf7;
	color: #6a43b7;
}
#event #content_wrap #content .inbox.box01 .cat_c h3 {
	background: #edf7fb;
	color: #00b2db;
}

@media screen and (min-width: 741px) {
	#event #content_wrap #content .inbox.box01 {
		margin-top: 30px;
	}
	#event #content_wrap #content .inbox.box01 h2 {
		padding: 28px 30px;
	}
	.box01 .cassette_box {
		width: 840px;
		margin: 0 auto;
		background: url(../../event/images/e01_cassette_bg.png) center top repeat-y;
	}
	.box01 .cassette {
		float: left;
		width: 260px;
	}
	.box01 .cassette.second {
		margin: 0 15px;
		padding: 0 15px;
	}
	.box01 .cassette img {
		max-width: 100%;
	}
	.box01 .image {
		margin-bottom: 10px;
	}
	#e01_01 .image {  }
	#e01_02 .image { padding-top: 13px; }
	#e01_03 .image { padding-top: 11px; }
}
@media screen and (max-width: 740px) {
	.box01 .cassette {
		width: auto;
		margin-bottom: 1.5em;
		padding-bottom: 1.5em;
		border-bottom: dotted 1px #999;
	}
	.box01 .cassette:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	#event #content_wrap #content .inbox.box01 .image {
		margin: 0 10% 0.5em;
	}
}

/* ==================================================
	box06
================================================== */
#event #content_wrap #content .inbox.box06 h2 {
	background: url(../../event/images/e06_ttl_bg.png) right center no-repeat #f4f4f4;
	background-size: auto 100%;
}

@media screen and (min-width: 741px) {
	#event #content_wrap #content .inbox.box06 h2 {
		padding: 38px 30px;
	}
	#event #content_wrap #content .inbox.box06 .text {
		float: right;
		width: 370px;
		margin-right: 20px;
	}
	#event #content_wrap #content .inbox.box06 .image {
		float: left;
		margin-left: 20px;
	}
	#event #content_wrap #content .inbox.box06 .image img {
		float: left;
		margin-right: 10px;
	}
}
@media screen and (max-width: 740px) {
	#event #content_wrap #content .inbox.box06 .text {
		margin-bottom: 1em;
	}
	#event #content_wrap #content .inbox.box06 .image img {
		float: left;
		width: 49%;
	}
	#event #content_wrap #content .inbox.box06 .image img:nth-child(2) {
		float: right;
	}
}