@charset "UTF-8";

body	{margin: 0;
	background-color: #f5f3eb;
	font-family: 'メイリオ',
	'Hirogino Kaku Gothic Pro', sans-serif}



/* サイト名 */
.site h1 a {color: #191970;
           text-decoration: none}

.site h1 {margin: 0;
         font-size: 32px}

.site p a {color: #000000;
           text-decoration: none}

.site p {margin: 0;}

.site small {margin-right: 3px;
	font-size: 20px;
	vertical-align: middle}

/* ナビゲーション */

.menu ul	{margin: 0;
		padding: 0;
		list-style: none}

.menu li a	{display: block;
		padding: 10px 15px;
		color: #000000;
		font-size: 14px;
		text-decoration: none}

.menu li a:hover	{opacity: 0.3}

.menu ul:after	{content: "";
		display: block;
		clear: both}

.menu li	{float: left;
		width: auto;}

/* ヘッダー画像 */
.toping		{max-width: 100%;
		height: auto;
		vertical-align: bottom}

/* キャッチコピー */
.catch		{margin: 0;
		padding: 10px;
		color: #000000;
		background-color: rgba(255,255,255,0.5);
		font-size: 24px}

/* ヘッダー画像にキャッチコピーを重ねる */
.top		{position: relative}

.catch		{position: absolute;
		bottom: 7%;
		left: 3%}

/* 概要 */

.gaiyou a	{display:block;
		background-color: #00008b;
		color: #ffffff;
		text-align: center;
		text-decoration: none}

.gaiyou a:hover	{opacity: 0.8}

.gaiyou h1 	{margin-top: 0;
		margin-bottom: 0;
		padding-top: 10px;
		padding-bottom: 5px;
		font-size: 24px}

.gaiyou p	{margin-top: 0;
		margin-bottom: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #87ceeb;
		color: #000000;
		font-size: 12px}


/* お知らせ */
.news		{padding: 20px;
		border: solid 5px #dddddd;
		background-color: #e0ffff}	

.news h1	{margin-top: 0;
		margin-bottom: 5px;
		font-size: 18px;
		color: #666666}

.news ul	{margin: 0;
		padding: 0;
		list-style: none}

.news li a	{display: block;
		padding: 5px;
		border-bottom: dotted 2px #dddddd;
		color: #000000;
		font-size: 14px;
		text-decoration: none}

.news li a:hover {background-color: #eeeeee}

.news time	{color: #888888;
		font-weight: bold}

.news a:after	{content: "";
		display: block;
		clear: both}

.news time	{float:left;
		width: 60px}

.news .text	{float: none;
		width: auto;
		margin-left: 60px}

/* 紹介 */
.shoukai h1	{margin-top:0;
		margin-bottom: 20px;
		padding-left: 20px;
		border-left: solid 20px #1e90ff;
		font-size: 36px;
		font-weight: normal}

.shoukai h2	{margin-top:50px;
		margin-bottom: 20px;
		padding-left: 0px;
		border-bottom: solid 2px #dddddd;
		font-size: 28px;
		font-weight: normal}

.shoukai h3	{font-weight: normal;
		margin-bottom: 5px}

.shoukai p	{max-width: 640px;
		margin-top: 0;
		margin-bottom: 20px}

.shoukai .lead	{max-width: 100%;
		font-size: 20px;}

/* パンくずリスト */
.bread		{margin-bottom: 20px}

.bread ol	{margin: 0;
		padding: 0;
		list-style: none}

.bread li a	{display: inline-block;
		padding: 0;
		color: #000000;
		font-size: 14px;
		text-decoration: none}

.bread li a:hover
		{background-color: #eeeeee}

.bread ol:after	{content: "";
		display: block;
		clear: both}

.bread li	{float: left;
		width: auto}

.bread li:after	{content: '\003e';
		margin-left: 10px;
		margin-right: 10px;
		color: #888888}



/* サイドメニュー */

.sidemenu	{border: solid 6px #dddddd}

.sidemenu h1	{margin: 0;
		padding: 10px;
		border-top: solid 1px #dddddd;
		font-size: 16px;
		font-weight: normal}

.sidemenu ul	{margin: 0;
		padding: 0;
		list-style: none}

.sidemenu li a	{display: block;
		padding: 10px;
		border-top: solid 1px #dddddd;
		color: #000000;
		font-size: 14px;
		text-decoration: none}

.sidemenu li a:hover	{background-color: #eeeeee}

/* 開校時間 */


.open h1	{margin-top: 0;
		margin-bottom: 5px;
		font-size: 18px;
		text-align: center;
		color: #666666}

table.info {
	border-collapse: separate;
	border: 1px solid #dddddd;
	margin-right: auto;
	margin-left: auto}

table.info th, table.info td {
	padding: 4px 4px 4px 4px;
	border: 1px solid #dddddd;
	font-size: 14px;
	text-align: left;
	vertical-align: middle}

table.info th {
	background-color: #dddddd;
	color: #444444}

table.info td {
	background-color: #87ceeb;
	color: #000000}

/* 地図 */
.mapping	{max-width: 100%}


 .google-maps {
 position: relative;
 padding-bottom: 75%; // これが縦横比
height: 0;
 overflow: hidden;
 }
 .google-maps iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
 }



/* コピーライト */
.copyright p	{margin: 0;
		color: #666666;
		font-size: 14px}

.copyright small {margin-right: 1px;
		vertical-align: middle}

/* boxAの下に罫線を挿入(コンテンツページのみ） */
.contents .boxA	{border-bottom: solid 2px #dddddd}

/* box5をバーの形にする */
.box5		{padding-top: 15px;
		padding-bottom: 15px;
		background-color: #87ceeb}

/* ボックスの左右 */
.boxA, .box4, .box5, .box6, .box7
		{padding-left: 15px;
		padding-right: 15px}

/* ボックスの上下 */
.boxA		{padding-top: 20px;
		padding-bottom: 10px}

.box4		{padding-top: 10px;
		padding-bottom: 20px}

.box4-1		{padding-bottom:20px}

.box6		{padding-top: 15px;}

.box6-1, .box6-2, .box6-3
		{padding-bottom:10px}

.box7		{padding-top: 25px;
		padding-bottom: 25px}

.box8		{padding-bottom: 25px}


/* boxAとboxBの背景 */
.boxA		{background-color: #87ceeb}



/* contact.html */
form div {
	padding:12px;
	border-bottom: 1px dashed #d6c2b5;
}
select {
	width: 30em;
}
label {
	color: #442220;
}
input[name=subject] {
	width:30em;
}
textarea {
	width: 30em;
	height: 6em;
}
input[type=submit] {
	margin: 20px 12px;
	width: 30em;
}


/* ########### 599px 以下 ########### */
@media (max-width: 599px){

.boxA		{padding-left: 0;
		padding-right: 0;
		padding-bottom: 0}


.box1		{padding-left: 15px;
		padding-bottom: 8px;
		margin: 0}

.box2		{background-color: #e0ffff;
		padding-left: 10px;
		margin: 0}

/* ナビゲーション */
.menu li a	{padding: 5px 7px;
		font-size: 14px}

/* キャッチコピー */
.catch		{padding: 5px 10px;
		font-size: 12px}

/* 紹介 */
.shoukai h1	{font-size: 26px}

.shoukai h2	{font-size: 20px}

.shoukai h3	{font-size: 18px}

.shoukai .lead	{font-size: 16px}

}

/* ########### 768px 以上 ########### */
@media (min-width: 768px){

/* BOX1とBOX2を横に並べる設定 */
.boxA:after	{content: "";
		display: block;
		clear: both}

.box1		{float: left;
		width: auto}

.box2		{float: right;
		width: auto;}

/* box4-1とbox4-2を横に並べる設定 */
.box4:after	{content: "";
		display: block;
		clear: both}


.box4-1		{float: right;
		width: 30%;}

.box4-2		{float: right;
		width: 65%;
		padding-top: 20px;
		padding-right:20px;
		box-sizing: border-box}


/* box6を横に並べる設定 */
.box6:after	{content: "";
		display: block;
		clear: both}

.box6-1		{float:left;
		width:33%;
		margin-right: 1%}

.box6-2		{float:left;
		width:32%;
		margin-right: 1%}

.box6-3		{float:left;
		width:33%}

/* box7を横に並べる設定 */
.box7:after	{content: "";
		display: block;
		clear: both}

.box7-1		{float: right;
		width: 80%;
		padding-left: 50px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}

.box7-2		{float: left;
		width: 20%;}


}


/* ########### 1190px 以上 ########### */
@media (min-width: 1190px){

/* 全体の横幅を固定 */
.box3, .boxA-inner, .box4, .box5-inner, .box6, .box7
		{width: 1140px;
		margin-left: auto;
		margin-right: auto}





/* boxAの下に罫線を挿入 */
.boxA		{margin-bottom: 15px;
		border-bottom: solid 1px #dddddd}
}