@charset "UTF-8";

@import "base.css";
@import "main.css";
@import "cont.css";


/* ========================================
 *	Teaser
 * ===================================== */

#teaser {
	background:
		url(../images/bg_cont_teaser_dot.png) left top,
		url(../images/bg_about_teaser.png) no-repeat right top,
		linear-gradient(#00aadf,#055db7);
}


/* ========================================
 *	学校紹介
 * ===================================== */

/* 校長挨拶
---------------------------------------- */
#aboutMessage {
	position: relative;
	width: 95%;
	max-width: 1050px;
	margin: 0 auto 100px;
}
#aboutMessage .aboutTitle {
	width: 180px;
	float: left;
}
#aboutMessage h3 {
	color: #0077c1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px;
	font-weight: 700;
}
#aboutMessage .aboutPic {
	width: 177px;
	line-height: 1.3;
	margin-bottom: 20px;
	font-size: 20px;
	text-align: center;
	float: left;
}
#aboutMessage .wp-block-image {
	margin-bottom: 0;
}
#aboutMessage .aboutPic span {
	font-size: 14px;
}
#aboutMessage .aboutBody {
	float: right;
	width: 640px;
}
#aboutMessage h4 {
	line-height: 1.3;
	margin-bottom: 26px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 700;
}

/* 4つの教育方針
---------------------------------------- */
#aboutPolicy {
	padding-top: 40px;
	padding-bottom: 30px;
	margin-bottom: 100px;
	text-align: center;
	background: #e5f1f9;
}
#aboutPolicy .policyMobile {
	display: none;
}

/* 学校沿革
---------------------------------------- */
#aboutHistory {
	width: 95%;
	max-width: 1050px;
	height: auto;
	margin: 0 auto 130px;
}
#aboutHistory h3 {
	width: 180px;
	color: #0077c1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px;
	font-weight: 700;
	float: left;
}
#aboutHistory ul {
	width: 100%;
	max-width: 870px;
	float: right;
}
#aboutHistory ul li {
	margin-bottom: 13px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
}
#aboutHistory ul li span {
	display: block;
	width: 4em;
	margin-left: 1em;
	float: left;
}
#aboutHistory ul li p {
	margin-left: 6em;
}
#aboutHistory ul li p:before {
	content: "●";
	margin-right: 0.5em;
	color: #0077c1;
}

@media screen and (max-width : 768px) {
	#aboutMessage .aboutBody {
		width: 100%;
	}
	#aboutPolicy .policyMobile {
		display: block;
		width: 95%;
		max-width: 691px;
		margin: 0 auto;
	}
	#aboutPolicy .policyPc{
		display: none;
	}
}
@media screen and (max-width : 414px) {
	#aboutMessage .aboutTitle,
	#aboutMessage .aboutPic {
		width: 100%;
		text-align: center;
	}
}


/* ========================================
 *	スクール紹介動画
 * ===================================== */

#aboutMovie {
	width: 95%;
	max-width: 1050px;
	margin: 0 auto 100px;
	text-align: center;
}
#aboutMovie iframe {
	margin-bottom: 50px;
}
#aboutMovie h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}
#aboutMovie h3#aboutMovieGame {
	color: #45b035;
}
#aboutMovie h3#aboutMovieManga {
	color: #f18d00;
}
#aboutMovie h3#aboutMovieBokaro {
	color: #e84388;
}


/* ========================================
 *	事業概要
 * ===================================== */

#aboutSummary {
	width: 95%;
	max-width: 1050px;
	margin: 0 auto 100px;
}
#aboutSummary .aboutSummaryBloc {
	width: 50%;
	float: left;
}
#aboutSummary h3 {
	height: 30px;
	line-height: 30px;
	padding-left: 15px;
	margin-bottom: 20px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 500;
	border-left: 5px solid #0463ba;
}
#aboutSummary ul {
	margin-bottom: 50px;
}
#aboutSummary ul li {
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 40px;
	margin-right: 40px;
	border-bottom: 1px solid #ccc;
	background: url(../images/ico_arrow_01.png) no-repeat 10px center;
}
#aboutSummary ul li a img {
	margin-left: 0.5em;
	vertical-align: middle;
}
#aboutSummary p.note {
	text-align: right;
}

@media screen and (max-width : 768px) {
	#aboutSummary .aboutSummaryBloc {
		width: 100%;
	}
}

/* ========================================
 *	高等専修学校とは
 * ===================================== */

#aboutWhat {
	width: 95%;
	max-width: 1050px;
	margin: 0 auto 100px;
}
#aboutWhat p.head {
	margin-bottom: 50px;
}
#aboutWhat .aboutWhatBloc {
	margin-bottom: 60px;
}
#aboutWhat .line {
	padding-bottom: 10px;
	border-bottom: 2px dotted #ccc;
}
#aboutWhat .aboutWhatInner {
	margin-bottom: 50px;
}
#aboutWhat .aboutWhatBloc p {
	margin-left: 1em;
	margin-bottom: 25px;
}

/* Title
---------------------------------------- */
#aboutWhat h3 {
	margin-bottom: 35px;
	color: #0077c1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px;
	font-weight: 700;
}
#aboutWhat h4 {
	margin-bottom: 30px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 500;
}
#aboutWhat h5 {
	height: 30px;
	line-height: 30px;
	padding-left: 15px;
	margin-left: 1em;
	margin-bottom: 10px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 500;
	border-left: 5px solid #0463ba;
}

/* List
---------------------------------------- */
#aboutWhat ul {
	padding: 10px 25px 1px;
	margin-left: 2em;
	margin-right: 400px;
	margin-bottom: 30px;
	background: url(../images/bg_cont_about_stripe.gif);
}
#aboutWhat ul li:before {
	content: "●";
	margin-right: 0.5em;
	color: #0077c1;
}
#aboutWhat ul li {
	margin-left: 1.5em;
	margin-bottom: 15px;
	text-indent: -1.5em;
}

/* Image
---------------------------------------- */
#aboutWhat .aboutWhatBloc .aboutWhatImg {
	float: right;
	margin-left: 30px;
}

@media screen and (max-width : 768px) {
	#aboutWhat ul {
		margin-right: 0;
	}
}
@media screen and (max-width : 414px) {
	#aboutWhat .aboutWhatBloc .aboutWhatImg {
		width: 100%;
		text-align: center;
	}
}

/* ========================================
 *	OiCカフェ
 * ===================================== */

#aboutCafe {
	width: 95%;
	max-width: 1050px;
	margin: 0 auto 100px;
}
#aboutCafe h3 {
	margin-bottom: 52px;
	color: #0077c1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
}

/* About OiC Cafe
---------------------------------------- */
#aboutCafeHead {
	margin-bottom: 50px;
	background: url(../images/bg_cont_about_stripe.gif);
}
#aboutCafeHead h4 {
	position: relative;
	top: -17px;
}

/* 1人で悩まないで
---------------------------------------- */
#aboutCafeBody h4 {
	height: 30px;
	line-height: 30px;
	padding-left: 15px;
	margin-bottom: 20px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 500;
	border-left: 5px solid #0463ba;
}
#aboutCafeBody .aboutCafeImg {
	float: right;
	margin-left: 60px;
}
#aboutCafeBody p {
	margin-bottom: 20px;
}

@media screen and (max-width : 768px) {
	#aboutCafeBody .aboutCafeImg {
		width: 100%;
		text-align: center;
	}
}


/* ========================================
 *	アクセスマップ
 * ===================================== */

#aboutAccess {
	width: 95%;
	max-width: 1050px;
	margin: 0 auto 100px;
}
#aboutAccess h3 {
	margin-bottom: 35px;
	color: #0077c1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px;
	font-weight: 700;
}

/* Google Map
---------------------------------------- */
#aboutAccess iframe {
	width: 100%;
	height: 500px;
	padding: 2px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
#aboutAccessMap {
	margin-bottom: 50px;
}

/* 乗換案内
---------------------------------------- */
#aboutAccessRoute .aboutAccessRouteBloc {
	width: 50%;
	float: left;
}
#aboutAccessRoute h4 {
	margin-bottom: 15px;
	color: #0077c1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 700;
}
#aboutAccessRoute h5 {
	font-size: 16px;
	font-weight: bold;
}
#aboutAccessRoute .aboutAccessTransfer {
	width: 50%;
	font-size: 14px;
	float: left;
}
#aboutAccessRoute li:before {
	content: "●";
	margin-right: 0.5em;
	color: #0077c1;
}	
#aboutAccessRoute p {
	width: 24em;
	margin: 40px auto 0;
}

@media screen and (max-width : 768px) {
	#aboutAccess iframe {
		height: 360px;
	}
	#aboutAccessRoute .aboutAccessRouteBloc {
		width: 100%;
	}
	#aboutAccessRoute .aboutAccessRouteBloc img {
		display: block;
		margin: 0 auto;
	}
}
@media screen and (max-width : 414px) {
	#aboutAccessRoute .aboutAccessTransfer {
		width: 100%;
		margin-bottom: 15px;
	}
}