@charset "utf-8";
/* CSS Document */



/* ---------*****************************************---------ここからすべてのページに共通の設定 */

/* ------------------------------------------------基本設定 */

*{
	margin:0;
	padding:0;
}

img{
	border:none;
}

body{
	background-color:#ffffff;
	font-family: Helvetica, "メイリオ", Meirio, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#333333;
	font-size: 100%;
    -webkit-text-size-adjust: 100%;
	line-height: 1.5;
}

.clear{
	clear:both;
}

i {
	padding-right: 5px;
}


/* ------------------------------------------------innerの設定 */


.inner{
	max-width: 900px;
	margin: auto;
    padding: 0 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}



/* ------------------------------------------------headerの設定 */

header{
	background: #e0eef4;
	text-align: center;
}
header:after, header:before {
    content: "";
    clear: both;
    display: block;
}

header h1 img{
	margin-top: 15px;
	max-width: 100%;
	height: auto;
}

header h1 a:hover{
	opacity: 0.6;
}


header h1{
	float:left;
}

div.header-right{
	float:right;
	margin-top:10px;
}

div.header-right p{
	font-size:90%;
	color:#666;
	margin:0;
	padding:0;
	line-height:normal;
}

div.header-right p.tel{
	text-align:right;
	font-size:200%;
	color:#F06;
}

header p.tel a{
	color:#F00
}

header p.tel a:hover{
	color:#F99;
}

header p.tel a{
	color:#F00
}

header p.tel a{
	color:#F00
}



/* ------------------------------------------------navの設定 */

nav{
	background: #e0eef4;
	padding-bottom:5px;
}

nav:after, nav:before {
    content: "";
    clear: both;
    display: block;
}

nav ul{
	list-style-type:none;
}
nav li{
	float:left;
	width:16.6%;
}

nav li a{
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#5387bb;
	padding:10px 3px;
	text-decoration: none;
	text-align: center;
	color: #FFF;
	border-radius:10px;
    border: 2px #ffffff solid;
	margin: 3px;
}




/* ------------------------------------------------articleの設定 */

article{
	width: 100%;
	margin:0;
	padding: 0;
	background: #ffffff;
}

div.articletop {
	padding: 10px 0 15px 0;
	background-image:url(../images/B8.png);
}

div.articlebox {
	padding: 0 0 20px 0;
}

div.articlebox:after{
	content: "";
	display: block;
	clear: both;
}

ul.sub_menu{
	list-style-type:none;
}

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

ul.sub_menu li a{
	display:block;
	float: left;
	padding:0 30px 0 0;
	text-decoration:none;
	color:#5387bb;
	font-size:110%;
	font-weight: bold;
}
ul.sub_menu li a:hover{
	article: 0.8;
}


article h1{
	font-size:160%;
	color:#f7a89f;
}

article h2{
	font-size:140%;
	color:#ffffff;
	margin: 0 0 15px 0;
	padding: 5px 0;
	background:#5387bb;
	clear: both;
}
article h3{
	font-size:130%;
	color:#f7a89f;
	margin: 20px 0 5px 0;
	clear: both;
}

article p{
	margin:10px 0;
}


article img.photo{
	border:1px solid #CC9;
}

p.floatRight600{
	float:right;
	margin:0;
}

p.floatRight400{
	float:right;
	margin:0;
}

p.floatLeft600{
	float:left;
	margin:0 15px 10px 0;
}

p.floatLeft400{
	float:left;
	margin:0 15px 10px 0;
}


article p.akaji{
	font-size:120%;
	color:#C00;
	font-weight:bold;
}

.orenji{
	margin-left: 15px;
	font-size:70%;
	color:#F90;
}

article .tyuui{
	margin:0 0 0 20px;
	font-size:95%;
	color:#336;
}




/* ------------------------------------------------asideの設定 */

aside {
	background-image:url(../images/B5.png);	
	padding: 0 0 15px 0;
}

aside h2{
	font-size:140%;
	color:#ffffff;
	margin:0 0 15px 0;
	padding: 5px 0;
	background:#f7a89f;
	clear: both;
}



.news iframe{
	border:none;
	width: 100%;
	height: 200px;
	border:1px solid #CC9;
	background-color:#fff;
}



/* ------------------------------------------------bannerの設定 */

ul.banner{
	list-style-type:none;
}

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

ul.banner li{
	float:left;
	margin: 0 10px 10px 0;
}

ul.banner li a:hover{
	opacity: 0.7;
}

ul.banner img {
	max-width: 283px;
	width: 100%;
}

img.pickup {
	max-width: 300px;
	width: 100%;
}

/* ------------------------------------------------iroiroの設定 */

ul.iroiro{
	list-style-type:none;
}

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

ul.iroiro li{
	margin: 10px 20px 10px 0;
	float: left;
	width: 46%;
}

ul.iroiro li a{
	text-decoration: none;
}

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

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

ul.iroiro li h3 {
	font-size: 95%;
}

ul.iroiro li p {
	font-size: 90%;
}

ul.iroiro img {
	float: left;
	max-width: 80px;
	width: 100%;
	margin-right: 7px;
	border: 1px solid #FCC;
}



/* ------------------------------------------------footerの設定 */

#footer{
	padding:10px 0;
	background: #e0eef4;
}

#footer ul{
	list-style: none;
	margin-bottom: 15px;
	display: table;
	table-layout: fixed;
	margin: 5px auto 20px auto;
}

#footer li {
	display: table-cell;
}

#footer li a{
	font-size:90%;
	color:#5387bb;
	text-decoration:none;
	padding: 0 10px;
}
#footer li a:hover{
	opacity: 0.6;
}


#footer p{
	font-size:90%;
	text-align: center;
}

.hosi{
	text-decoration:none;
	color:#FF9;
}




/* ------------------------------------------------totopの設定 */

div.totop{  
	height: 50px;
}  


div.totop p{  
    position: fixed;
    right: 20px;
    bottom: 10px;
}  

div.totop p a{
	display: block;
	text-decoration: none;
	padding: 7px;
	background: #5387bb;
	border-radius: 15px;
	text-align: center;
	color: #FF6;
	font-size: 80%;
	line-height: 1.4;
	box-shadow: 0px 0px 6px 3px;
	-webkit-box-shadow: 0px 0px 6px 3px;
	-moz-box-shadow: 0px 0px 6px 3px;
}




/* ---------*****************************************---------ここから個別のページの設定 */


/* ------------------------------------------------ＨＯＭＥページ */


/* -----------------------------------------------パソコン講座 */


/* 講座のテーブル設定（レスポンシブ） */
.table-kouza-res{
	width:100%;
	max-width:650px;
	border-collapse:collapse;
	font-size:90%;
}
.table-kouza-res th,
.table-kouza-res td{
	border:1px solid #CC9;
	padding:10px;
}
.table-kouza-res th{
	background-color:#FFFFCC;
}
.table-kouza-res .span-none{
	display:none;
}

@media (max-width:500px){
.table-kouza-res th,
.table-kouza-res td{
	display:block;
	border-bottom:none;
}
.table-kouza-res tr:last-child td:last-child{
	border-bottom:1px solid #CC9;
}
.table-kouza-res .br-none{
	display:none;
}
.table-kouza-res .span-none{
	display:inline;
}
}

.table-nichiji-res{
	width:100%;
	max-width:650px;
	border-collapse:collapse;
	font-size:90%;
}
.table-nichiji-res th,
.table-nichiji-res td{
	border:1px solid #CC9;
	padding:10px;
}
.table-nichiji-res th{
	background-color:#FFFFCC;
}
.table-nichiji-res .span-none{
	display:none;
}


/* ------------------------------------------------検定会場 */


/* 資格取得のテーブル設定 */
body#kentei article table.table-sikaku{
	clear:both;
	max-width:650px;
	width: 100%;
	border-collapse:collapse;
	margin:10px 0;
	font-size:90%;
}
body#kentei article table.table-sikaku span.font-mini{
	font-size:80%;
}
body#kentei article table.table-sikaku th,
body#kentei article table.table-sikaku td{
	border:1px solid #CC9;
	padding:5px;
}
body#kentei article table.table-sikaku th{
	background-color:#CCCCFF;
}


.right{
	text-align:right;
}
.center{
	text-align:center;
}


/* 500px以下になると表示される改行 */
.res-br {
	display:none;
}
@media (max-width:500px){
.res-br {
	display:inline;
}
}



/* 500px以下になると消える中点 */
.res-ten {
	display:inline;
}
@media (max-width:500px){
.res-ten {
	display:none;
}
}




/* ------------------------------------------------その他 */





/* ------------------------------------------------学院案内 */
article p.kousibun{
	font-size:95%;
	margin-bottom:30px;
	float: left;
}




/* ------------------------------------------------問い合わせ */

.botan {
	padding: 5px 20px;
}



/* ロリポップのテーブル */
table.form {
	border: 1px solid #7777bb;
	border-collapse: collapse;
	margin-top: 1em;
}
table.form th, table.form td {
	text-align: left;
	border: 1px solid #7777bb;
	padding: 8px;
	font-weight: normal;
}
table.form th {
	white-space: nowrap;
	background: #cccce6;
}
table.form td {
	background: #f0f0f0;
}


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

header h1{
	float:none;
	text-align:center;
}

header h1 img{
	max-width:420px;
	width:100%;
}

div.header-right{
	float:none;
	text-align:center;
	margin-top:0;
}

div.header-right p{
	text-align:center;
}

div.header-right p.tel{
	text-align:center;
}

}


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

article{
}

nav ul li{
	font-size:80%;
}

nav ul li a{
	height: 40px;
}


p.floatLeft600{
	float:none;
}

p.floatRight600{
	float:none;
}




ul.iroiro li{
	float: none;
	width: 100%;
}



#footer ul{
	display: block;
}

#footer li {
	display: block;
	border-bottom: 1px dotted #FFF;
}

#footer li a {
	display: block;
	padding: 3px 10px;
}

#footer li a:hover {
	background: #FFF;
	color: #003;
}

form .w600 {
	width: 100%;
}

}


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

div.header-right p{
	font-size:70%;
}

div.header-right p.tel{
	font-size:150%;
}


article img.jido {
	width: 100%;
	height: auto;
}


p.floatLeft400{
	float:none;
}

p.floatRight400{
	float:none;
}

form .w400 {
	width: 100%;
}


}