@charset "UTF-8";
/* --- 全体の背景・テキスト --- */
html{
     margin:0px;          /* ページ全体のmargin */
     padding:0px;         /* ページ全体のpadding */
     text-align:center;   /* 下記のautoに未対応用のセンタリング */
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
font-size: 100%; /* 全体の文字サイズ */
font-family: "メイリオ",sans-serif;
}

body {
	width:100%;
	background-image: url(https://housuu.net/pic/wall.png);
     padding:0px;         /* ページ全体のpadding */
     text-align:center;   /* 下記のautoに未対応用のセンタリング */
     margin-top:0;          /* ページ全体のmargin */
     margin-bottom:0;          /* ページ全体のmargin */
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */

	max-width: 1030px;
	/*background-color: #eeffff;*/
	background-color: #e6f6f6; /* 全体の背景色 */
	color: #000000; /* 全体の文字色 */
	font-size: 100%; /* 全体の文字サイズ */
}


th {
background-color:#dddddd;
}


/* --- 全体のリンクテキスト --- */
a:link { color: #0000ff; font-family: "メイリオ",sans-serif;}
a:visited { color: #000090; }
a:hover { color: #ff8000; }
a:active { color: #ff0000; }

b { 
/*color: #0000ff;*/
font-family: "ＭＳ Ｐゴシック",sans-serif;
}

#mid{
	width: 90%;
	margin-left:auto;    /* 左側マージンを自動的に空ける */
	margin-right:auto;   /* 右側マージンを自動的に空ける */
}
@media screen and (max-width: 480px) {
	#mid{
	width: 100%; /* メインカラムの幅 */
	}
}



/* --- コンテナ --- */
#header div.container,
#content div.container,
#footer div.container {
width: 100%; /* コンテナの幅 */
}


/* --- ■ヘッダの設定 --- */
#header{
margin-bottom: 0px; /* ヘッダの下マージン */
padding: 0px 0; /* ヘッダのパディング（上下、左右） */
background-color: #f9f9f9; /* ヘッダの背景色 */
border-top: 0px #00c0c0 solid; /* ヘッダの上境界線 */
border-bottom: 1px #c0c0c0 solid; /* ヘッダの下境界線 */
width: 100%; 
}



#header div.container {
position: relative; /* 相対配置（ガイドメニューのために設定） */

}
/* --- ■上部右上 --- */

/*右上メニュー*/
#header ul.guide {
position: absolute; /* 絶対配置 */
top: 0.7em; /* 上からの距離 */
right: 1em; /* 右からの距離 */
line-height:1.1em;
margin: 0;
padding: 0;
list-style-type: none;
}
@media screen and (max-width: 480px) {
	#header ul.guide{
	top:0.6em;
	font-size:80%;
	line-height:100%;
	}
}


/* 右上の項目 */
#header ul.guide li {
display: inline;
padding: 0 ; /* 項目のパディング（上右下左） */
background: none; /* 区切り線なし */
}


/* 右上最初の項目 */
#header ul.guide li.first {
background: none; /* 区切り線なし */
}
@media screen and (min-width: 481px) {
#header ul.guide li.first_2 {
background: none; /* 区切り線なし */
}
}

/* --- オープニングエリア（トップページの一番上） --- */
#header div.opening {
margin-top: 1em;
margin-bottom: 1.5px; /* オープニングエリアの下マージン */
}
@media screen and (max-width: 480px) {
	#header div.opening {
	margin-top: 0em;
	margin-bottom: 0.5px; /* オープニングエリアの下マージン */
	}
}
/* オープニングエリア内の見出し */
#header div.opening h2 {
	margin: 0;
	min-height:100px;
}
@media screen and (max-width: 480px) {
	#header div.opening h2 {
		min-height:50px;
	}
}



/* --- ★★★上部メニューの設定開始★★★ --- */
#header ul.nl {
width: 100%;
margin: 0 0 0px 0px;
padding: 0;
list-style-type: none;
text-align: center;
font-size: 0.8rem;
}
/* メニュー項目 */
#header ul.nl li {
width: 16.66%; /* 項目の幅 */
float: left;
line-height: 100%;
margin:0;
padding: 0;
background-color: #f0ffff;
box-sizing: border-box;
text-align: center;
min-width: 16.6%;
}

@media screen and (max-width: 480px) {
	#header ul.nl{
		top:2px;
		font-size:100%;
		vertical-align:middle;
		}

	#header ul.nl li{
		min-width: 50%;


		}
}
	

/* リンクエリア */
#header ul.nl li a {
display: block;
position: relative; /* IE6用 */
padding: 15px 2px 15px 2px; /* リンクエリアのパディング（上下、左右） */
margin:0;
border: 1px #cccccc; /* リンクエリアの境界線（太さ、色） */
border-style: solid solid solid none; /* リンクエリアの境界線スタイル（上右下左） */
text-decoration: none; /* テキストの下線（なし） */
}
@media screen and (max-width: 480px) {
	#header ul.nl li a{
	padding: 1em 0 0 0;
	height:2em;
	max-height:3em;
	vertical-align:middle; 	
	}
}

@media screen and (max-width: 480px) {
	#header ul.nl li a{
	padding: 1em 0 0 0;
	height:2em;
	max-height:3em;
	vertical-align:middle; 	
	}
}


/* 最初のリンクエリア */
#header ul.nl li.first a {
border: 1px #cccccc; /* リンクエリアの左境界線 */
border-style: solid solid solid solid; /* リンクエリアの境界線スタイル（上右下左） */
}


/* オンマウス時に色を変えるあれ */
#header ul.nl li a:hover {
color: #0000ff;
background-color: #d0dddd; /* ポイント時の背景色 */
text-decoration: underline; /* テキストの下線（あり） */
}
/* --- 罫線(を引かない) --- */
#header hr.none {
display: none; /* 表示形式（なし） */
}




/* --- コンテンツ内の設定開始 --- */

/* --- コンテンツ --- */
#content {background-color: #fafff6; /* 全体の背景色 */
}




/* --- ★★★左側項目（サイドバー）の設定★★★ --- */
#nav {
float: left;
width: 16%; /* サイドバーの幅 */
font-size: 1em;
}

/* --- セクション（共通設定） --- */
#nav div.section {
margin-top: 0px;
margin-bottom: 10px; /* セクションの下マージン */
}
/* 見出し */
#nav div.section h2 {
margin: 0 0 0.7em; /* 見出しのマージン（上、左右、下） */
padding: 5px 8px; /* 見出しのパディング（上下、左右） */
font-size: 1.1em; /* 見出しの文字サイズ */
}
/* 段落 */
#nav div.section p {
margin: 0 6px 0.7em; /* 段落のマージン（上、左右、下） */
line-height: 130%; /* 行の高さ */
font-size: 100%;
}

/* --- ●お問い合わせ --- */
#nav div.contact {
padding: 0 0 0.3em; /* パディング（上、左右、下） */
}
/* お問い合わせ内の段落 */
#nav div.contact p {
margin: 0 10px 0.4em; /* 段落のマージン（上書き） */
}

/* --- ●標準セクション（グレー） --- */
#nav div.normal {
border: 1px #c0c0c0 solid; /* セクションの境界線 */
font-family: "ＭＳ Ｐゴシック",sans-serif;
}
/* 見出し */
#nav div.normal h2 {
background-color: #e0e0e0; /* 見出しの背景色 */
}

/* --- ●強調セクション1（水色） --- */
#nav div.emphasis {
border: 1px #92c2dc solid; /* セクションの境界線 */
}
/* 見出し */
#nav div.emphasis h2 {
background-color: #a7dcfc; /* 見出しの背景色 */
margin: 0em 0 0em; /* 見出しのマージン（上、左右、下） */
padding: 0em 2px 0em;
}
#nav div.emphasis p{line-height: 16px;}

/* --- ●強調セクション2（オレンジ） --- */
#nav div.strong {
border: 1px #f4c24d solid; /* セクションの境界線 */
}
/* 見出し */
#nav div.strong h2 {
background-color: #ffce68; /* 見出しの背景色 */
margin: 0em 0 0em; /* 見出しのマージン（上、左右、下） */
padding: 0em 2px 0em;
}

#phoneonly{
	display:none;
}

@media screen and (max-width: 480px) {
	#nav{
	display:none;
	}

	#phoneonly{
	display: block;
	}
}



/* --- 左側（サイドバー）の設定ここまで --- */



/* --- ★★★メインカラム内の設定開始★★★ --- */
/* --- メインカラム --- */
#main {

width: 82.2%; /* メインカラムの幅 */
margin: 0 0 0 16% ;
}
@media screen and (max-width: 480px) {
	#main{
	width: 100%; /* メインカラムの幅 */
	margin: 0;
	}
}


/* --- ページタイトル（下層ページ） --- */
#main h1{
	max-width:100%;
	min-width:100%;
	
	display:block;
	font-size:100%;
	font-weight:normal;

	overflow-wrap:break-word;
	word-break: break-all;
}
#main h1.pagetitle {
	display:block;
	font-size:100%;
	font-weight:bold;

	overflow-wrap:break-word;
	word-break: break-all;

}



#main.h2 {
background: url(./pic/h2.png) no-repeat;
width:100%;
max-width:100%;
min-width:100%;
margin: 0em 0 0em; /* 見出しのマージン（上、左右、下） */
padding: 0em 2px 0em;
}
@media screen and (max-width: 480px) {
	main.h2{
	padding:2em;
	}
}


#main.div {
margin: 0;
padding: 0;
}
#main.img {
margin: 0;
padding: 0;
}

/* --- セクション（共通設定） --- */
#main div.section {
margin: 0 0 2em 0px; /* セクションのマージン（上右下左） */
overflow-wrap:break-word;
}

/* --- 標準セクション --- */
/* 見出し */
#main div.normal h2 {
margin: -1em 0 0em; /* 見出しのマージン（上、左右、下） */
padding: 0em 2px 0em;
background-color: #e0e0e0; /* 見出しの背景色 */
font-size: 1.2em; /* 見出しの文字サイズ */
}

/* 段落 */
#main div.normal p {
margin: 0 5px 1em; /* 段落のマージン（上、左右、下） */
line-height: 160%; /* 行の高さ */
}

/* --- 強調セクション --- */
#main div.emphasis {
margin-top: 0px;
padding: 0em 3px 0; /* セクションのパディング（上、左右、下） */
border: 1px #c0c0c0 solid; /* セクションの境界線 */
word-break: break-all;
}
 /* ★見出し */
#main div.emphasis h2 {
background: url(./pic/h2.png) no-repeat;
margin: 0em 0 -0.3em; /* 見出しのマージン（上、左右、下） */
padding: 0.1em 2px 0em;
height:34px;


width:100%;
max-width:100%;
min-width:100%;


font-size: 100%; /* 見出しの文字サイズ */
/*color: #ff8000; */ /* 見出しの文字色 */
color: #000000;
}
@media screen and (max-width: 480px) {
	#main div.emphasis h2 {
	font-size:0.8em;
	padding:0.3em 0.15em 0;
	}
}

/*★小見出し*/
#main div.emphasis h3 {
background: url(./pic/h3.png) no-repeat;
margin: 1.8em 0 0em; /* 見出しのマージン（上、左右、下） */
padding: 0em 2px 0em;
/*color: #ff8000; */ /* 見出しの文字色 */
color: #000000;
font-size: 1.2em;
height: 24px;

}
@media screen and (max-width: 480px) {
	#main div.emphasis h3 {
	font-size:0.8em;
	padding:0.3em 0.15em 0;
	}
}


 /* 段落 */
#main div.emphasis p {
margin: 0 0 1em; /* 段落のマージン（上、左右、下） */
line-height: 170%; /* 行の高さ */
}


#main div.annai {
padding: 0 1em 0;
}


/* ★入塾申し込み　料金表下の但し書き */
#main div.tadashigaki {
width: 88%; /* メインカラムの幅 */
line-height: 120%;
margin: 0 0 0.7em;
padding: 0em;
background-color: #cdf3b6;
border: 1px #c0c0c0 solid;
width: 100%;
}
@media screen and (max-width: 480px) {
	#main div.tadashigaki {
	padding: 0;
	margin: 0;
	}
}
/*青背景、枠の最低保証なし*/
#main div.tadashigakib {
line-height: 120%;
margin: 0 0 0.7em;
padding: 0em;
background-color: #cdb6f3;
border: 1px #c0c0c0 solid;
max-width: 100%;
}
@media screen and (max-width: 480px) {
	#main div.tadashigakib {
	padding: 0;
	margin: 0;
	}
}


/* ★日程表 */
#main div.calendar {
height: auto; /* カレンダーLR両方の高さはこれ */
width: 100%;
}
@media screen and (max-width: 480px) {
	#main div.calendar {
	width: 100%;
	}
}
#main div.calendarU {
line-height: 170%; /* 行の高さ */
}
/*★小見出し(カレンダー用)*/
#main div.calendarU h3 {
background: url(./pic/h3.png) no-repeat;
margin: 1.8em 0 0em; /* 見出しのマージン（上、左右、下） */
padding: 0em 2px 0em;
/*color: #ff8000; */ /* 見出しの文字色 */
color: #000000;
font-size: 1.2em;
height: 24px;
}


#main div.calendar2 {
height: auto; /* カレンダーLR両方の高さはこれ */
width: 90%;
}
@media screen and (max-width: 480px) {
	#main div.calendar2 {
	width: 100%;
	}
}


#main li {
margin: 0.3em 0.7em 0;}

/* ★アクセスマップ */
#main div.AMP {
height: 468px;
}
#main div.lAMP {
float: left;
}
#main div.rAMP {
margin: 0em 0px 0.3em; /* 見出しのマージン（上、左右、下） */
line-height: 0%;
float: right;
}
#main div.uAMP {
float: left;
line-height: 120%;
}

/* ★FAQ */
#main div.FAQ {
margin: 0;
width: auto; 
height:75px;
line-height: 180%;
padding-top: 15px;
padding-left: 115px;
padding-bottom: 0px;
background-color: #e0e0e0;
background: url(./pic/topicw22.png) no-repeat;
}
@media screen and (max-width: 480px) {
	#main div.FAQ {
	font-size:80%;
	padding-top: 0;
	padding-left: 8em;
	padding-bottom: 0px;
	}
}

#main p.FAQ {
margin: 0;
padding: 0;
}
#main table.FAQ {
margin: 0;
padding: 0;
}



#main div.toptopic {
margin: 0;
position: relative;

min-height:75px;
line-height: 150%;
font-size:95%;
font-size:3vw;
padding-top: 0px;
padding-left: 120px;
padding-bottom: 0.6em;
padding-right: 0px;
background-color: #e0e0e0;
background: url(./pic/topicw22.png) no-repeat;
word-break: break-all;
font-size:1.2vw;

}
@media screen and (max-width: 480px) {
	#main div.toptopic {
	max-width:66%;
	font-size:80%;
	padding-left: 9em;
	}
}

/* --- ★更新履歴（トップページ） --- */
#main div.update dl {
width: 88%; /* 新着情報の幅（メインカラムの幅から30px引いた値） */
margin: 0 auto; /* センタリング */
}


/* 日付エリア */
#main div.update dt {
width: 6.7em; /* 日付エリアの幅 */
float: left;
padding: 4px 0 3px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 120%; /* 行の高さ */
}
/* 本文エリア */
#main div.update dd {
margin: 0;
padding: 4px 3px 3px 6.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px #c0c0c0 dotted; /* 本文エリア下境界線 */
line-height: 120%; /* 行の高さ */
}

/* --- 中央（メインカラム）の設定ここまで --- */



/* --- 罫線 --- */
#content hr.clear {
clear: right; /* 右フロートのクリア */
width: 100%;
margin: 0;
visibility: hidden; /* 非表示 */
}

/* --- コンテンツの設定ここまで --- */




/* --- ■フッタ(一番下)の設定 --- */
#footer {
width: 100%; /* メインカラムの幅 */
padding: 15px 0 20px; /* フッタのパディング（上、左右、下） */
background-color: #f9f9f9; /* フッタの背景色 */
border-top: 1px #c0c0c0 solid; /* フッタの上境界線 */
}
@media screen and (max-width: 480px) {
	#footer {
	width:100%;
	padding: 0;
	margin-bottom:0.5em;
	}
}


/* --- アドレス・コピーライト --- */
#footer address {
font-style: normal;
text-align: center;
line-height: 140%; /* 行の高さ */
}

/* --- フッタの設定ここまで --- */


/* --- ▼その他の設定開始 --- */

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
margin:0;
padding:0;
}
/* --- ▲その他の設定終了 --- */

@media screen and (max-width: 480px) {
	table{
	width:100%;
	}
	tr{
	font-size:80%;
	}
	th{
	font-size:80%;
	}
	td{
	font-size:100%;
	}
	h3 {
	font-size:0.8em;
	padding:0.3em 0.15em 0;
	}
}

}