@charset "UTF-8";

/* 教室検索
---------------------------*/
.search_box:before {
	position: absolute;
	display: block;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../images/common/pattern_bg.png) repeat center center;
	opacity: 0.4;
	z-index: 0;
}

.search_box {
	position: relative;
	padding: 50px 0;
	background: #2C8054;
}

.search {
	display: block;
	width: 980px;
	margin: 0 auto;
}

.search .box {
	position: relative;
    display: block;
    overflow: hidden;
    clear: both;
}

.search .left { float: left; }
.search .right { float: right;}
.search .list { width: 600px; }
.search .root { width: 300px; }

.search .ver11:before {
	display: inline-block;
	content: '';
	width: 26px;
	height: 26px;
	margin-right: 5px;
	background: url(../images/common/h3_top_search_ttl_icon.png) no-repeat left top;
	background-size: contain;
	vertical-align: top;
}

.search .ver11 {
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
	color: #FFF;
}

.search p.txt {
	margin-bottom: 20px;
	color: #FFF;
}

.search input[type="text"] {
	width: 86%;
	height: 42px;
	padding: 10px;
	margin-bottom: 40px;
	font-size: 14px;
	-webkit-appearance: none;
	border: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	vertical-align: top;
}

.search input[type="submit"] {
	width: 14%;
	height: 42px;
	text-indent: -9999px;
	-webkit-appearance: none;
	border: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background: #8CC63F;
	background: url(../images/school_info/search_icon3.png)no-repeat left top, linear-gradient(#8CC63F, #68B302);
	background-size: contain;
	vertical-align: top;
}

.search li.state a:before {
	display: inline-block;
	content: '';
	width: 15px;
	height: 22px;
	margin-right: 5px;
	background: url(../images/school_info/search_icon1.png) no-repeat left top;
	background-size: contain;
	vertical-align: middle;
}

.search li.train a:before {
	display: inline-block;
	content: '';
	width: 16px;
	height: 22px;
	margin-right: 5px;
	background: url(../images/school_info/search_icon2.png) no-repeat left top;
	background-size: contain;
	vertical-align: middle;
}

.search li.state:before { margin-left: 0; }

/*.search li.state,
.search li.train {
	display: inline-block;
	width: 48%;
	margin-left: 1%;
}*/

.search li.state,
.search li.train {
	display: inline-block;
	width: 100%;
	margin-bottom: 2%;
	font-size: 17px;
}

.search li.state a,
.search li.train a {
	display: block;
	padding: 8px 0;
	text-align: center;
	border-radius: 5px;
	background: #8CC63F;
	background: linear-gradient(#8CC63F, #68B302);
	color: #FFF;
}

.search li.state a:hover,
.search li.train a:hover {
	background: #8CC63F;
	background: linear-gradient(#68B302, #8CC63F);
}

.search .map {
	width: 290px;
	border: #FFF 8px solid;
}

.search .area-box { width: 290px; }

.search li.area {
	position: relative;
	width: 100%;
	margin-bottom: 10px;
	padding: 10px 20px;
	border-radius: 5px;
	background: #FFF;
	color: #333;
}

.search li.area a { display: block; }
.search li.area a:hover { color: #8CC63F; }

.search li.area a:after {
	position: absolute;
	content: '';
	width: 43px;
	height: 43px;
	top: 0;
	right: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background: #8CC63F;
	background: url(../images/school_info/search_icon3.png)no-repeat left top, linear-gradient(#8CC63F, #68B302);
	background-size: contain;
}

/* タイトル
---------------------------*/
.top .ver11:before {
	display: inline-block;
	content: '';
	width: 26px;
	height: 26px;
	margin-right: 5px;
	background: url(../images/common/h3_top_ttl_icon.png) no-repeat left top;
	background-size: contain;
	vertical-align: top;
}

.top .ver11 {
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
}

/* 告知欄
---------------------------*/
#top #content { margin: 80px auto; }
#content #main { width: 100%; }

#top .info {
    border: #CCC 1px solid;
    padding: 2% 1%;
    width: 98%;
    max-width: 1000px;
    margin: 0 auto 40px auto;
    border-radius: 5px;
    background: #FFF;
}

#top .info p.title {
    width: 360px;
    margin: 0 auto 6px auto;
    font-size: 18px;
    font-weight: bold;
    color: #2C8054;
}

#top .info p.title.emergency {
	padding: 0.5% 1%;
	font-weight: normal;
	background: #C00;
	color: #FFF;
}

#top .info p strong { font-weight: bold; }
#top p .red { color: #C00; }
#top p .line { text-decoration: underline; }

#top .info p {
    text-align: center;
    /*font-size: 16px;*/
    font-size: 15px;
}

/* 台風に伴う休校のお知らせ */
#top .info p.kyuko {
    background: #C00;
    color: #FFF;
    width: 360px;
    margin: 0 auto 6px auto;
    font-size: 20px;
    font-weight: normal;
}

#top .info p.kyuko strong {
	font-weight: normal;
    color: #fff100;
}

/* 緊急告知（画像差替対応版）*/
.emergency_info {
	width: 60%;
	margin: 0 auto 60px auto;
	text-align: center;
}

/* 熊本地震 */
/*#top .info {
	display: block;
	width: 100%;
	margin-bottom: 40px;
	padding: 20px;
	border-radius: 5px;
	background: #FFF;
}

#top .info p { text-align: center; }*/



/* トピックス
---------------------------*/
.topics { overflow: hidden; }

.topics .item:nth-child(3n+1) { margin-right: 0; }
.topics .item:last-child { margin-bottom: 0; }

.topics .item {
	position: relative;
	width: 32%;
	height: 300px;
	margin-right: 2%;
	margin-bottom: 20px;
	background: #FFF;
	float: left;
}

.topics p.ttl {
	margin-bottom: 1%;
	font-size: 15px;
	font-weight: bold;
}

.topics .inner { padding: 4%; }
.topics p { font-size: 12px; }

.topics .period {
	position: absolute;
	width: 92%;
	margin-top: 10px;
	padding-top: 10px;
	bottom: 4%;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	vertical-align: bottom;
	border-top: #CCC 1px solid;
}

.topics ul li:before {
	content: '\25B6';
    font-size: 10px;
    color: #F7931E;
}

.topics ul li:first-child { padding-left: 0; }

.topics ul li {
	display: inline-block;
	padding-left: 15px;
}

.topics ul li a { text-decoration: underline; }

/* ボーダーカラー */
.topics .shockingpink { border-top: #D0145A 5px solid; }
.topics .darkred { border-top: #B8272D 5px solid;}
.topics .brown { border-top: #534741 5px solid;}
.topics .orange { border-top: #FF8D1E 5px solid; }
.topics .lightblue { border-top: #29ABE2 5px solid; }
.topics .green { border-top: #006837 5px solid; }
.topics .darkblue { border-top: #004097 5px solid; }
.topics .yellow { border-top: #fff100 5px solid; }
.topics .purple { border-top: #662D91 5px solid; }
.topics .yellow-green { border-top: #50BE32 5px solid; }


/* 講座紹介
---------------------------*/
.course-intro {
	position: relative;
	display: block;
	overflow: hidden;
	clear: both;
}

.course-intro .item:nth-child(3n+1) { margin-right: 0; }

.course-intro .item {
	position: relative;
	width: 32.5%;
	margin-right: 1%;
	margin-bottom: 10px;
	padding: 2%;
	background: #FFF;
	border-radius: 10px;
	float: left;
}

.course-intro .item img {
	width: 40%;
	border-radius: 5px;
	float: left;
}

.course-intro .inner {
	width: 60%;
	padding: 4% 0 0 4%;
	float: left;
}

.course-intro p.ttl {
	margin-bottom: 1%;
	font-size: 16px;
	line-height: 1.4;
	font-weight: bold;
}

.course-intro ul {
	width: 52%;
	position: absolute;
	bottom: 15px;
}

.course-intro ul li:first-child { padding-left: 0; }

.course-intro ul li {
	position: relative;
	width: 31%;
	display: inline-block;
	font-size: 12px;
	text-align: center;
	background: #CCC;
	color: #FFF;
}

.course-intro .cat-primary.active { background: #8CC63F; }
.course-intro .cat-junior.active { background: #FBB03B; }
.course-intro .cat-high.active { background: #29ABE2; }


/* お知らせ
---------------------------*/
.news .list {
	width: 700px;
	float: left;
}

.news .box {
	position: relative;
	display: block;
	margin-bottom: 5px;
	overflow: hidden;
	clear: both;
}

.news .item {
	position: relative;
	padding: 2%;
	background: #FFF;
	border-radius: 5px;
	overflow: hidden;
}

.news .date {
	width: 30%;
	float: left;
}

.news .date time {
	font-weight: bold;
	letter-spacing: 1px;
}

.news .update {
	width: 70%;
	padding-left: 1%;
	font-size: 14px;
	float: left;
}

.news .update a {
	text-decoration: underline;
	vertical-align: middle;
}

.news .cat {
	display: inline-block;
	width: 55%;
	margin-left: 1%;
	padding: 2px 0;
	font-size: 12px;
	text-align: center;
	border: #CCC 1px solid;
	border-radius: 3px;
}



/*---------------------------
　　Media Queries設定
---------------------------*/

/*---------------------------------------------*/
@media screen and (max-width: 768px) {
/*---------------------------------------------*/

.top .ver11:before {
	width: 22px;
	height: 22px;
	margin-right: 1%;
}

.top .ver11 {
	margin-bottom: 4%;
	font-size: 22px;
}

/* TOPページ
---------------------------*/
/* トピックス */
.topics .item:last-child { margin-bottom: 0; }
.topics .inner { padding: 4%; }
.topics p.ttl { font-size: 14px; }
.topics p { font-size: 12px; }
.topics .period { font-size: 12px; bottom: 4%; }
.topics ul li:first-child { padding-left: 0; }
.topics ul li { padding-left: 4%; }


/* 教室検索 */
.search_box { padding: 6% 0; }
.search { width: 96%; }
.search .list { width: 48%; }
.search .root { width: 48%; }
.search .map { display: none; }
.search .area-box { width: 100%; }
.search .list .right { float: none; }
.search .list { margin-bottom: 0; }

/* 講座紹介 */
.course-intro p.ttl { font-size: 14px; }
.course-intro ul li { font-size: 12px; }


/* お知らせ */
.news .list { width: 100%; }
.news .update { font-size: 14px; }
.news .cat { font-size: 13px; }

}/* 768 */


/*---------------------------------------------*/
@media screen and (max-width: 740px) {
/*---------------------------------------------*/

/* TOPページ
---------------------------*/

/* 告知欄 */
#top #content { margin: 6% auto 5% auto; }

/* 熊本地震 */
/*#top .info {
	margin-bottom: 6%;
	padding: 4%;
}

#top .info p { text-align: left; font-size: 12px; }*/

/* 台風に伴う休校のお知らせ */
#top .info {
    padding: 4%;
    width: 100%;
}

#top .info p.title,
#top .info p.kyuko {
    width: 100%;
    font-size: 16px;
    text-align: center;
}

#top .info p {
    text-align: left;
    font-size: 100%;
}

/* 教室検索 */
.search_box { padding: 6% 0; }
.search { width: 96%; }
.search .left, .search .right { float: none; }
.search .list, .search .root { width: 100%; }
.search .list,.search input[type="text"] { margin-bottom: 8%; }

.search .ver11:before {
	width: 22px;
	height: 22px;
	margin-right: 1%;
}

.search .ver11 {
	margin-bottom: 4%;
	font-size: 22px;
}

.search p.txt { margin: 2% 0 4% 0; }

.search li.state,
.search li.train {
	width: 48%;
	margin-left: 1%;
	font-size: 14px;
}

.search li.state a, .search li.train a { padding: 4% 0; }
.search .area-box { width: 100%; }
.search .map { display: none; }
.search li.area:nth-child(2n+1) { margin-right: 1%; }
.search input[type="text"] { width: 88%; }
.search input[type="submit"] { width: 12%; }

.search li.area {
	display: inline-block;
	width: 49%;
	margin-bottom: 2%;
}

/* 台風等緊急告知（画像差替対応版） */
.emergency_info {
	width: 100%;
	margin: 0 auto 6% auto;
}

/* トピックス */
.topics .item:nth-child(2n) { margin-right: 2%; }

.topics .item {
	width: 49%;
	height: auto;
	margin-right: 0;
	margin-bottom: 2%;
}

.topics .item .inner { display: none; }

.topics p.ttl { font-size: 16px; }
.topics .period { font-size: 12px; }

.topics .period {
	position: relative;
	width: 100%;
	margin-top: 4%;
	padding-top: 4%;
}

/* ボーダーカラー */
.topics .shockingpink,
.topics .darkred,
.topics .brown,
.topics .orange,
.topics .lightblue,
.topics .green,
.topics .darkblue,
.topics .yellow,
.topics .purple,
.topics .yellow-green { border-top: none; }

/* 講座紹介 */
.course-intro .box { margin-bottom: 0; }

.course-intro .item {
	width: 100%;
	margin-left: 0;
	margin-bottom: 2%;
	padding: 3%;
	border-radius: 5px;
	float: none;
	overflow: hidden;
}

.course-intro ul {
	width: 100%;
	position: static;
	bottom: 3%;
}

.course-intro .item img { width: 20%; }
.course-intro .inner {
	width: 80%;
	padding: 2% 0 0 3%;
}

.course-intro p.ttl {
	margin-bottom: 4%;
	font-size: 15px;
}

/* お知らせ */
.news .list {
	width: 100%;
	float: none;
}

.news .item { padding: 4%;}

.news .date {
	width: 100%;
	float: left;
}

.news .update {
	width: 100%;
	padding-left: 0;
	font-size: 14px;
	float: left;
}

.news .cat {
	width: auto;
	padding: 0.5% 2%;
	font-size: 11px;
}

}/* 740 */