@charset "utf-8";

html{ font-size: 62.5%;}


body{
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	color:#515151;
	font-size: 1.6em;
	line-height:1.8;
	}

header { text-align:center;}

h1{ font-size:80%; color:#515151; padding-bottom:5px}
h4 {color:#006C6C; font-size:120%; font-weight:bold; margin: 40px auto 20px;}


h2.logo{height:105px; margin:auto; text-align:left; border:none; }

h2.logo a{
	width:210px;
	height:105px;
	background:url(../img/logo.png) no-repeat left;
	text-indent:-9999px;
	display:block;
	line-height:100%;
	text-decoration:none;
	overflow:hidden;
	}


.header_box { padding:0 12% 0; margin:0; line-height:0; text-align:left;}

a:link, a:visited, a:active { color: #276490;}

a:hover {opacity: 0.6;}

#smart_bg, #smart_visual_read{display:none;}	


#main_visual{ background:#E61E19; color:#fff; margin-bottom:50px;}
#main_visual_read{width:38%; margin:0; padding:80px 0 80px 12%; float:left;}
#main_photo{ width:48%; float:right; text-align:right; height:400px;}
#main_photo img {height:100%; width:100%; max-height:400px; }


.main_visua_tt p{
    font-size: 2rem;
    font-weight: bold;
	margin:0;
	padding:0;
	}

.main_visua_tt p.mb{
	margin-bottom:20px;
	}	
	
.wrapper {
    width: 80%;
    margin: 0 auto 30px;
    padding: 0 0;}
	
.top_navi{ padding-bottom:60px;}	


.top_navi a:link, .top_navi a:visited, .top_navi a:active{ color:#E61E19; font-weight:bold;}

	
.top_navi_photo{ width:50%; float:left;}	
.top_navi_photo img{ width:100%;}	

.top_navi_read{
	width: 40%;
	float:left;
	margin-top:50px;
	padding:5%;
	background: #EEEBE9;
	}
	
.top_navi_read h1{
	background:url(../img/top_navi_tt.png) no-repeat;
	color: #4CA6C2;
    font-size: 2.0rem;
    margin: 0 0 20px;
    padding: 0 0 0 60px;}
	
.top_navi_read h1 a{color: #276490;}		
	
.top_navi_read h2{
	font-size: 1.6rem;
	line-height:1.8;
	}
	
.top_navi_btn a:link, .top_navi_btn a:visited, .top_navi_btn a:active{
    background-color: #333;
    border-radius: 25px;
    color: #fff;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    max-width: 200px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 50vw;
	margin-top:30px;}

.top_navi_btn a:hover {
    background-color: #E61E19;
    border-radius: 25px;
    color: #fff;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    max-width: 200px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 50vw;
	opacity: 1;
	}
	
.navi_sub{width:31%; float:left; text-align:center; margin:1%; font-weight: bold; font-size: 1.6rem;}	
.navi_sub a:link, .navi_sub a:visited, .navi_sub a:active{ background:#333; color:#fff; padding:40px 0;}	
.navi_sub a:hover{background-color: #E61E19; color: #fff; opacity: 1;}

	
.main_title{background:#E61E19; padding:60px; text-align:center;}	

.main_title h1{
	color:#fff;
	font-size: 3.0rem;
	line-height:6.0rem;
    font-weight: bold;}
	
.sub_title { background:url(../img/title_ya.png) no-repeat top; margin-top:20px}
.sub_title h2{color: #E61E19; text-align:center; padding-top:80px; font-weight:bold; font-size: 2.6rem; }	
.sub_title h3{color: #25B4AA; text-align:center; margin-bottom:50px; font-size: 2.0rem;}	

.TopContents h3 {color: #25B4AA; text-align:center; font-weight:bold; font-size: 2.6rem; margin-bottom:40px;}
	

.navi_read {
	background:url(../img/navi_tt.png) no-repeat;
    font-size: 1.6rem;
    margin: 10px 0 0px;
    padding: 0 0 0 60px;}
	
.instagram_link {
	float:left;
	background:url(../img/instagram_link.png) no-repeat;
    font-size: 1.6rem;
    margin: 10px 0 0px;
    padding: 0px 0 6px 40px;}
	
.ameba_link{
	float:left;
	background:url(../img/ameba_link.png) no-repeat;
    font-size: 1.6rem;
    margin: 10px 0 0px;
    padding: 0px 0 6px 40px;}
	
.instagram_link_sub {
	float:left;
	background:url(../img/instagram_link.png) no-repeat;
    font-size: 1.6rem;
    margin: 10px 0 0 40px;
    padding: 0px 0 6px 40px;}	
	
.contents a {display:inline;}		

p{ padding-bottom:1.6em;}
	
	
/**/

.snsLeftBox{ width:25%; float:left; text-align:left;}
.snsLeftBox img{ width:80%;}
.snsRightBox{width:75%; float:left;}
.lineBox { width: 100%; text-align: center; margin: 0px auto 30px; padding: 20px 0; border: 1px solid #C5AD89;}	
.linkin{ display:inline;}

/* footer
---------------------------------------------*/	

#footerWrapper{
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 0;
	background:#333;
	color:#fff;
	}
	
#footerWrapper .wrapper{ margin-bottom:0;}

#footerWrapper a:link, #footerWrapper a:visited, #footerWrapper a:active { color: #281F00;}

#footerWrapper .gly{color:#999;}


#footerWrapper dl{
	margin:0 auto;
	}

#footerWrapper dt, #footerWrapper dd{
	float:left;
	text-align:left;
	padding:0 0 20px;
	line-height:160%;
	 }
	 
#footerWrapper dt{
	width:20%;
	color:#999;
	}
	
#footerWrapper dd{
	width:80%;
	}
	
#footerWrapper a, #pan a { display:inline;}


footer .linkBox {font-size:80%; text-align: center; margin: auto; padding: 10px 0 20px; border-bottom: 1px solid #ccc; }
footer .linkBox a{
	display:inline;
	}

footer .copy{text-align:center; font-size:80%; margin-top:16px;}

footer .map { padding:30px 0 10px;}


#pagetop { display:inline-block; position:fixed; bottom:0; right:0;}
#pagetop a { padding:10px; display:block;}

#copy { text-align:center; font-size:80%; padding:8px;}
#copy a{display:inline;}

#area { font-size:80%; color:#999; text-align:center; margin:20px auto; padding:0px; border-bottom: 1px solid #ccc;}
#pan{ padding:10px 0; font-size:70%;}


.school_pda img{ padding:10px;}


/* サイトマップ
---------------------------------------------------- */

table#sitemap{ margin:auto;}

table#sitemap td{ padding:10px; margin-top:50px; line-height:200%;}


/* フォーム関連
---------------------------------------------------- */
.conForm { text-align:center; margin:auto auto 50px; padding:0 30px 30px; background:#fff9db;}
.conForm p{ border-bottom:1px solid #C5AD89; padding:30px 0 10px;}
p.noneBL{ border:none; margin:0px; padding-bottom:20px;}


.formB{　border:solid 1px #ccc; margin:10px 20px; padding:10px 20px; font-size:1.1em; text-transform:uppercase; font-weight:bold; cursor:pointer; }
.formTX{ border:0; padding:10px; font-size:1.1em; border:solid 1px #ccc; margin:0 0 20px; }	
.formSB{ border:0; padding:10px; font-size:1.1em; border:solid 1px #ccc; margin:0 0 20px; }
.formRD{ padding:10px; font-size:1.1em; margin:0 0 20px; }	
.formTXctr{ border:0; padding:10px; font-size:1.1em; border:solid 1px #ccc; margin:0 0 20px;}


/* バナー
---------------------------------------------------- */

#bottomFooter{text-align:center; padding:5px 5px 8px; line-height:120%; color:#999}

#bottomFooter a { display:inline; text-align:center;}


/*
---------------------------------------------*/	

.photos img{ padding:10px;}
	



/* ここから上がPC向け
---------------------------------------------------- */

@media screen and (max-width: 820px) {

/* ここから下がスマホ向け
---------------------------------------------------- */

body{
	line-height:2;	
	}
	
header h1, #main_visual, #main_photo, #area, #pan {display:none;}	
	
.header_box { padding:0; margin:0; text-align:center;}

header{ width:80%; margin:auto;}		
header img{ height:auto; max-width: 300px; margin:50px auto 40px;}	
	
header h1{font-size:1.6rem; color:#CCC; }	
header h2{ paddng-top:10px;}

h2.logo a{
	width:205px;
	height:105px;
	background:url(../img/logo.png) no-repeat center;
	padding:0 30px;
	}

img {
        border: 0;
        max-width: 100%;
        height: auto;}
		
teacher img { text-align:center;}		

.main_visua_tt p{
    font-size: 1.6rem;
	line-height:2;
    font-weight: bold;
	margin:0;
	padding:0;
	}
	
#smart_bg, #smart_visual_read{display:block;}

#smart_bg{ background:url(../img/main_bg.jpg) no-repeat; height:100%; padding:30px; margin-bottom:40px;	background-position: center;}	
#smart_visual_read{width:100%; color:#fff;}

.top_navi_photo{ width:100%; float:none; margin:0;	background: #EEEBE9;}	
.top_navi_photo img{ width:100%;}	

.top_navi_read{
	width: 86%;
	float:none;
	margin:0px;
	padding:7%;
	}

.top_navi_btn a{ text-align:center; margin:auto;}	

.top_navi_read h1{
	color: #4CA6C2;
    font-size: 1.6rem;}
		
.top_navi_read h2{
	font-size: 1.6rem;
	line-height:1.8;
	}	

.top_navi_btn a:link, .top_navi_btn a:visited, .top_navi_btn a:active{
	margin-top:10px;}
	
p{ margin-bottom:0px;}

.main_title { padding:20px;}
.main_title h1{font-size: 2.0rem; line-height:4.2rem; }
.sub_title h2{font-size: 1.6rem; }	
.sub_title h3{font-size: 1.6rem;}

.snsLeftBox{ width:100%; float:none; text-align:center;}
.snsRightBox{width:100%; float:none; text-align:left;}

.navi_sub{width:100%; float:none; text-align:center; margin:10px auto; font-weight: bold; font-size: 1.6rem;}
.navi_sub a:link, .navi_sub a:visited, .navi_sub a:active{ background:#333; color:#fff; padding:20px 0;}	

.navi_read {
    font-size: 1.6rem;
    margin: 10px 0 0px;
    padding: 0 0 0 60px;}

.instagram_link_sub {
    margin: 10px 0 0px;
   }
	
.mapflowLeft, .mapflowRight{ width:100%; }
	
#footerWrapper{ text-align:left;}	

	
#footerWrapper dt {
	color:#999;
	width: 100%;
    padding: 10px 0;}
		
#footerWrapper dd {
    width: 100%;
	padding-left: 0;
	margin-left: 0;}

#footerWrapper span{ font-size:140%;}



footer .linkBox li {
        flex-grow: 1;
        flex-basis: auto;
        border-bottom: 1px solid #c0c0c0;
        padding: 1rem 0;
    }
	
footer .linkBox li: first-child {
        border-top: 1px solid #c0c0c0;
    }

footer .linkBox .flex {display: block;}

footer .linkBox {
    padding: 0;
	}


footer .linkBox { display:none;}	
/*** adjust parts ***/
				
	.flex{display:block;}

.top_navi_read{font-size: 1.6rem;}

footer .LeftBox, footer .RightBox{ width:100%; float: none; text-align:left; font-size:80%; margin-top:16px;}

.zdo_drawer_menu .zdo_drawer_button {
  /*+++ Hamburger Button Position +++*/
  top: 20px;
  right: 20px;
}


.school_pda img{ padding:10px 0;}

/*フォーム調整*/

.formTX{ width:80%;}
.formTXctr{ width:90% !important; }

	
}

@media (min-width: 751px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}


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



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

.toLeft, th.toLeft, td.toLeft {text-align:left;}
.toRight, th.toRight, td.toRight {text-align:right;}
.toCenter, th.toCenter, td.toCenter {text-align:center;}

.pt20{ padding-top:20px;}
.pt40{ padding-top:40px;}
.pt60{ padding-top:60px;}

.pb40{ padding-bottom:40px;}
.pb100{ padding-bottom:100px;}

.mb05{	margin-bottom:05px;}	
.mb10{	margin-bottom:10px;}	
.mb15{	margin-bottom:15px;}	
.mb20{	margin-bottom:20px;}
.mb40{	margin-bottom:30px;}
.mb40{	margin-bottom:40px;}
.mb50{	margin-bottom:50px;}
.mb60{	margin-bottom:60px;}
.mb80{	margin-bottom:80px;}
	
.mt05{	margin-top:5px;}
.mt08{	margin-top:8px;}
.mt10{	margin-top:10px;}
.mt15{	margin-top:15px;}
.mt20{	margin-top:20px;}
.mt30{	margin-top:30px;}
.mt40{	margin-top:40px;}
.mt50{	margin-top:50px;}
.mt60{	margin-top:60px;}
.mt100{	margin-top:100px;}

.mr10{ margin-right:10px;}
.mr20{ margin-right:20px;}
.mr30{ margin-right:30px;}

.to160{font-size:160%;}

.toRed{ color:#C00;}
.toOR{color:#F7B900;}
.toGRE{color:#00B25A;}
.toPk{ color:#BD4D4D;}
.toTtPk{ color:#BD4D4D; font-weight:bold;}

.y_dot { border-top: dotted #E61E19; padding-top:20px; margin-top:20px;}
/*00B2B2*/


h4.dot {color:#006C6C; font-size:120%; font-weight:bold; margin: 40px auto 20px; padding:0 0 10px; border-bottom: dotted #00B2B2;}