@charset "utf-8";
/* CSS Document */
.ja{}
.en{}

section#nav{ width:100%;  background: #41841c; padding:10px 0; z-index:1001;}

/* LEVEL ONE */
ul.dropdown{ position: relative; max-width:1080px; margin:0 auto; z-index:1001;}
ul.dropdown li{ float: left; zoom: 1; background: #41841c; }
ul.dropdown a:hover{ color: #FFF; text-decoration:none;}
ul.dropdown a:active{ color: #FFF; }
ul.dropdown li a{ display: block; padding: 4px 20px; color: #FFF;}
ul.dropdown li:last-child a{ border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover{ background: #4ab117; color: black; position: relative;}
ul.dropdown li.hover a{ color: black; }

@media screen and (max-width: 994px) and (min-width: 922px){
    ul.dropdown li:nth-child(8){ display: block; clear:left;}
}
@media screen and (max-width: 921px) and (min-width: 846px){
    ul.dropdown li:nth-child(7){ display: block; clear:left;}
}
@media screen and (max-width: 845px){
    ul.dropdown li:nth-child(6){ display: block; clear:left;}
}

/* LEVEL TWO */
ul.dropdown ul{ width: 240px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li{ font-weight: normal; color: #FFF; border-bottom: 1px solid #75b561; float: none; font-size:90%;}

/*
ul.dropdown ul li{ font-weight: normal; background: #2b8d0d url(../../images/icon_arow.png) 96% 45% no-repeat; color: #FFF; border-bottom: 1px solid #75b561; float: none; font-size:90%;}
 */

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a{ border-right: none; width: 100%; display: inline-block; text-decoration:none;} 
ul.dropdown ul li:hover{ background: #4ab117;} 

/*
ul.dropdown ul li:hover{ background: #4ab117 url(../../images/icon_arow.png) 96% 45% no-repeat;}  
*/

/* LEVEL THREE */
ul.dropdown ul ul{ left: 100%; top: 0; }
ul.dropdown li:hover > ul{ visibility: visible; }

body{font-feature-settings : "palt"; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
/*---------------------------------------------------------------------------------------------------- 
HEADER --*/
#header{ padding:15px 0 15px 0; max-width:1080px; margin:0 auto;}
#header h1{ max-width:419px; float:left; margin:0 15px 0 0;}
@media screen and (max-width: 750px) {
#header h1{ max-width:419px; float:left; margin:5px 0;}
}
#header h1 img{ width:100%; height:auto;}
#header ul#switch{ float:left; margin:3px 0 0 0;}
#header ul#switch li{ margin:0 0 0 10px; float:left;}
@media screen and (max-width: 750px) {
#header ul#switch li{ margin:0 0 0 5px; float:left;}	
}
#header ul#switch li a img{ filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}
#header ul#switch li a#switch_active img,
#header ul#switch li a:hover img{
    filter: alpha(opacity=100) !important;
    -moz-opacity: 1 !important;
    opacity: 1 !important;
}

#header ul:last-child{ float:right;}
#header ul:last-child li{ margin:0 0 0 5px; float:left;}
/*#header ul:last-child li:last-child{ margin:0 0 0 30px;}*/
@media screen and (max-width: 1130px) {
	#header { padding:5px 10px; margin:0 auto;}
}
#navi{ background:#41841c;}

a:hover img { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}

a[href$=".pdf"]:after { content:" "; display: inline-block; width: 15px; height: 15px; background: url(../../images/icon_pdf.gif) no-repeat; margin:0 0 0 10px;}

section#nav{ width:100%;  background: #41841c; margin:0px auto; z-index:1001;}

.slicknav_menu {
    background:#41841c;
}

.slicknav_nav a,
.slicknav_nav .slicknav_row,
.slicknav_nav ul{
    margin: 0;
}

.slicknav_nav li a{
    text-align:center;
}

.sub_menu li a{
    display: block;
}

.slicknav_nav .slicknav_arrow {
    font-size: 0.8em;
    margin: 0 0 0 0.4em;
    color: #ef1635;
}

/*ハンバーガーメニューのエフェクト*/
.slicknav_icon,
.slicknav_icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.slicknav_icon {
    position: relative;
    width: 50px;
    height: 44px;
}
.slicknav_menu .slicknav_icon-bar{
    position: absolute;
    left: 0;
}
.slicknav_icon span:nth-of-type(1) {
    top: 0;
}
.slicknav_icon span:nth-of-type(2) {
    top: 3px;
}
.slicknav_icon span:nth-of-type(3) {
    bottom: 0;
}
.active .slicknav_icon-bar:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
}
.active .slicknav_icon-bar:nth-of-type(2) {
    opacity: 0;
}
.active .slicknav_icon-bar:nth-of-type(3) {
    -webkit-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
}
/*demo2*/
#nav2 .slicknav_icon{
    display: none
}

/*最低限*/
.slicknav_menu {
    display:none;

}
@media screen and (max-width: 750px) {
    /*見た目*/
    main{
		/*padding: 1rem;*/
    }
    .nav_style li{
        display: block;
    }
    .nav_style li a{
        width: 100%;
    }
    /*共通*/
    #gnavi{
        display:none;
    }
    .slicknav_menu {
        display:block;
    }
    .sub_menu{
        position: inherit;
    }

}

/*---------------------------------------------------------------------------------------------------- 
FOOTER --*/
footer{ margin:0 auto; text-align:center;}
footer a{ color:#FFFFFF; text-decoration:none;}
footer a:hover{ color:#FFFFFF; text-decoration:underline;}

footer{ width: 100%; background:url(../../images/bg_footer.gif); color:#FFFFFF; padding:50px 0 100px 0;}
footer nav{ max-width:1080px; width:90%; margin:0 auto; text-align:left;}
footer nav>ul{ float:left; width:28%; margin:0 0 0 5%;}
footer nav ul li { font-weight:bold; margin:15px 0 2px 0;}
footer nav ul ul { float:none; width:100%;}
footer nav ul ul li { font-weight:normal!important; margin:0!important;}

footer a{color:#FFF; text-decoration:none;}
footer a:link{color:#FFF; text-decoration:none;}
footer a:visited{color:#FFF;}
footer a:hover{color:#FFF; text-decoration:underline;}
footer a:active{text-decoration:none;}

footer .inBox{ text-align:left; margin:80px auto 60px auto; width:900px;}
footer .inBox p:first-of-type{ border:#FFFFFF 1px solid; padding:20px 0 20px 0; width:380px; font-size:140%; letter-spacing:6px; float:left; text-align:center;position: relative;}
footer .inBox p:first-of-type::before{ content:url(../../images/icon_tel.png);  padding:5px 10px 0 0; margin:0 0 0 0;}
footer address{ font-style:normal; font-size:80%; float:right; margin:0 0 0 0; line-height:160%; width:450px;}
footer p:last-child{ margin:0 auto; font-size:80%;}

.cf:before,.cf:after { content: " "; display: table;}
.cf:after { clear: both;}
.cf{*zoom: 1;}

/*---------------------------------------------------------------------------------------------------- 
CONTENTS --*/

#wrapper{ max-width:1080px; width:90%; margin:50px auto; text-align:center;}
#wrapper h1{ color:#477227; margin:0 auto; font-size:230%;}
section{ margin:60px auto 0 auto; text-align:left;}
section h1{ color:#477227; margin:0 auto 30px auto!important; font-size:160%!important;}
section h2{ color:#477227; margin:80px auto 20px auto!important; font-size:140%!important;}
section p{ margin:0 0 20px 0; line-height:160%;}

#visual{ width:100%; height:auto; max-height:300px; overflow:hidden; position:relative; vertical-align:bottom;}
#visual img { width:100%; height:auto; position:relative; bottom:0; left:0;}

.imgArea{ text-align:center; margin:50px 0; }
.imgArea img{ max-width:100%;}

ul.disc{ margin:20px 0; padding:0!important; }
ul.disc li{ padding:0 0 0 0;; margin:5px 0 5px 30px; list-style-type: disc!important; background:none;}
ul.decimal{ margin:20px 0; padding:0!important; }
ul.decimal li{ padding:0 0 0 0;; margin:5px 0 5px 30px; list-style-type: decimal!important; background:none;}
ul.lower{ margin:20px 0; padding:0!important; }
ul.lower li{ padding:0 0 0 0;; margin:5px 0 5px 30px; list-style-type: lower-latin!important; background:none;}

.catch{ color:#477227; margin:0 auto 20px auto!important; font-size:120%!important; text-align:center;}

footer a:hover{ filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; color:#FFFFFF;}

@media screen and (max-width: 999px) and (min-width: 641px){
footer nav{ width:90%; margin:0 auto; text-align:left;}
footer nav>ul{ float:left; width:50%; margin:0 0 0 0; height:400px;}
footer nav ul li { font-weight:bold; margin:15px 0 2px 0;}
footer nav ul ul { float:none; width:100%;}
footer nav ul ul li { font-weight:normal!important; margin:0!important;}

footer .inBox{ text-align:left; margin:80px auto 60px auto; width:90%;}
footer .inBox p:first-of-type{ border:#FFFFFF 1px solid; padding:14px 0 20px 0x; width:100%; font-size:120%; letter-spacing:3px; float:none; text-align:center;position: relative;}
footer .inBox p:first-of-type::before{ content:url(../../images/icon_tel.png); padding:0 10px 0 0; margin:-5px 0 0 0;}
footer address{ font-style:normal; font-size:75%; margin:10px 0 0 0; line-height:160%; float:none; text-align:center;}
footer p:last-child{ margin:0 auto; font-size:80%;}
}
@media screen and (max-width:640px){
footer nav{ width:90%; margin:0 auto; text-align:left;}
footer nav>ul{ float:left; width:100%; margin:0 0 0 0;}
footer nav ul li { font-weight:bold; margin:15px 0 2px 0;}
footer nav ul ul { float:none; width:100%;}
footer nav ul ul li { font-weight:normal!important; margin:0!important;}

footer .inBox{ text-align:left; margin:80px auto 60px auto; width:90%;}
footer .inBox p:first-of-type{ border:#FFFFFF 1px solid; padding:14px 0 20px 0x; width:100%; font-size:120%; letter-spacing:3px; float:none; text-align:center;position: relative;}
footer .inBox p:first-of-type::before{ content:url(../../images/icon_tel.png); padding:0 10px 0 0; margin:-5px 0 0 0;}
footer address{ font-style:normal; font-size:75%; margin:10px auto 0 auto; line-height:160%; float:none; text-align:center; width:90%;}
footer p:last-child{ margin:0 auto; font-size:80%;}
}


/*-- top page --*/
#me_urgent_topics{ width:80%; max-width:1000px;}
#me_urgent_topics dl{ width:100%; text-align:left; padding:0 0 0 34px; background-color:#CD3301;}
#me_urgent_topics dl:first-child{margin:40px auto 0; padding-top:12px;}
#me_urgent_topics dl:last-child{padding-bottom:12px;}
#me_urgent_topics dl dt,#me_urgent_topics dl dd{ color:#FFF;}
#me_urgent_topics dt{ font-size:100%; float:left; width:15%; box-sizing:border-box; padding:5px; margin:0 0 0 0!important;}
#me_urgent_topics dd{ float:left; width:80%; box-sizing:border-box; padding:5px; margin:0 0 0 0!important;}
#me_urgent_topics dd p{ margin:0;}
@media screen and (max-width:720px){
#me_urgent_topics dl{ padding:0 20px;}
#me_urgent_topics dt{ font-size:100%; float:none; width:100%; box-sizing:border-box; padding:10px 0 0 0; margin:0 0 0 0!important;}
#me_urgent_topics dd{ float:none; width:100%; box-sizing:border-box; padding:0; margin:0 0 0 0!important;}
#me_urgent_topics dd img{width:100%; height:auto;}
}


#topics{ width:80%; max-width:1000px; margin:40px auto 0;}
#topics h1{ text-align:center; }
#topics dl{ width:100%; text-align:left; border-left:#298710 4px solid; padding:0 0 0 30px;}
#topics dt{ font-size:100%; float:left; width:15%; box-sizing:border-box; padding:5px; margin:0 0 0 0!important;}
#topics dd{ float:left; width:80%; box-sizing:border-box; padding:5px; margin:0 0 0 0!important;}
@media screen and (max-width:720px){
#topics dt{ font-size:100%; float:left; width:100%; box-sizing:border-box; padding:10px 0 0 0; margin:0 0 0 0!important;}
#topics dd{ float:left; width:100%; box-sizing:border-box; padding:0; margin:0 0 0 0!important;}
}
#topics p{ text-align:right; margin:10px 0 0 0;}

#picUp a:nth-of-type(1){ background:url(../../images/top_mainbtn01.jpg) no-repeat top center; width:50%; float:left; min-height:350px; background-size:cover; text-align:center; background-color: rgba(0,0,0,0.5); }
#picUp a:nth-of-type(2){ background:url(../../images/top_mainbtn02.jpg) no-repeat top center; width:50%; float:left; min-height:350px; background-size:cover; text-align:center; background-color: rgba(0,0,0,0.5); }
@media screen and (max-width:640px){
#picUp a:nth-of-type(1){ background:url(../../images/top_mainbtn01.jpg) no-repeat top center; width:100%; float:left; min-height:350px; background-size:cover; text-align:center; background-color: rgba(0,0,0,0.5); }
#picUp a:nth-of-type(2){ background:url(../../images/top_mainbtn02.jpg) no-repeat top center; width:100%; float:left; min-height:350px; background-size:cover; text-align:center; background-color: rgba(0,0,0,0.5); }	
}
#picUp a:hover{ text-decoration:none; opacity:0.8;}
#picUp h2{color:#FFFFFF; margin:130px auto 20px auto!important;}
#picUp p{ border:#FFFFFF 1px solid; padding:5px; color:#FFFFFF; font-size:10px!important; width:60px; margin:0 auto!important;}



#mainCon{ width:100%; margin:0 auto 0; background:#eff4ed; padding:60px 0 40px 0; text-align:center;}
#mainCon #iconBtn{ width:80%; max-width:880px; margin:0 auto;}
#mainCon figure{ width:25%; float:left; height:200px;}
#mainCon #iconBtn figcaption a{ text-decoration:none;  opacity:0.8;}
@media screen and (max-width:640px){
#mainCon figure{ width:50%; float:left; height:200px;}
}


#bottomimg{ width:100%; margin:0; max-height:287px; overflow:hidden;}
#bottomimg img{ width:100%; height:auto;}

/*-- welcome from the head --*/
section#message figure{ float:left; width:350px; margin:0 20px 30px 0;}
section#message figcaption{ font-size:80%;}


/*-- facilities --*/
ul#facilitiesBtn{display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;flex-wrap: wrap; width:100%; margin:50px 0 0 0;}
ul#facilitiesBtn li{ width:31%; height:38px; background:#41841c; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin:10px 0 0 0;}
ul#facilitiesBtn li a{ color:#FFFFFF; display:block; padding:7px 10px;}
ul#facilitiesBtn li a:link{ color:#FFFFFF;}
ul#facilitiesBtn li a:hover{ filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; background-color:rgba(255,255,255,0.1); color:#FFFFFF; text-decoration:none;}
ul#facilitiesBtn li a:visited{ color:#FFFFFF;}
ul#facilitiesBtn::after{ content:""; display: block; width:31%;}

@media screen and (max-width: 999px) and (min-width: 641px){
    ul#facilitiesBtn li a{ font-size:76%; }
}

@media screen and (max-width:640px){
    ul#facilitiesBtn{display: block; justify-content: space-between;flex-wrap: wrap;}
    ul#facilitiesBtn li{ width:100%; }
}

/*-- handbook --*/
dl.handbook_form{ padding:20px 0 0 0;}
dl.handbook_form dt{ font-size:100%; margin:0 0 0 0;}
dl.handbook_form dd{ margin:0 0 30px 0;}

/*-- calendar --*/
#google_calendar_wrap{ margin:50px 0;}

/*-- Global Citizenship --*/
ul#global{ margin:30px 0 30px 20px;}
ul#global li{ margin:10px 0 0 0;}

/*-- After School Care --*/
ul.asc{ margin:30px 0;}
ul.asc li{ margin:10px 0 0 0;}

/*-- kindergarten --*/
table#kinder{ width:100%; border-collapse: collapse; margin:0 0 10px 0;}
table#kinder th{ width:40%; background:#41841c; color:#FFFFFF; padding:5px 10px; border: 1px solid #DDD;}
table#kinder td{ width:60%; padding:5px 10px; border: 1px solid #DDD;}

/*-- staff --*/
.staffBox{ margin:30px 0 0 0;}
.staffBox p:first-of-type{ font-size:120%; font-weight:bold;  margin:0 0 5px 0;}
.staffBox p:nth-of-type(2){ font-size:80%;}
.staffBox figure{ float:left; margin:0 20px 20px 0; width:250px;}
.staffBox figcaption{ font-size:80%;}

@media screen and (max-width:640px){
.staffBox figure{ margin:0 0 20px 0; width:100%; text-align:center;}

/*-- welcome from the head --*/
section#message figure{ width:100%; margin:0 0 30px 0; text-align:center;}
section#message figcaption{ font-size:80%;}

}


/*-- fees --*/
table#fees{ width:100%; border-collapse: collapse; margin:0 0 10px 0;}
table#fees th{ width:40%; background:#41841c; color:#FFFFFF; padding:5px 10px; border: 1px solid #DDD;}
table#fees td{ width:60%; padding:5px 10px; border: 1px solid #DDD;}

/*-- faq --*/
section dt{ margin:0 0 10px 0; color:#477227; font-size:150%;}
section dd{ margin:0 0 50px 0;}

/*-- news events --*/
ul#nanohanaBtn{display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;flex-wrap: wrap; width:100%; margin:20px 0 50px 0;}
ul#nanohanaBtn li{ width:24%; border:#41841c 1px solid; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin:10px 0 0 0;}
ul#nanohanaBtn li a{ color:#000; display:block; padding:7px 10px;}
ul#nanohanaBtn li a:link{ color:#000;}
ul#nanohanaBtn li a:visited{ color:#000;}
ul#nanohanaBtn::after{ content:""; display: block; width:49%;}
@media screen and (max-width:640px){
ul#nanohanaBtn li{ width:49%; border:#41841c 1px solid; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin:10px 0 0 0;}
ul#nanohanaBtn::after{ content:""; display: block; width:49%;}
}

section ul{ margin:30px 0;}

i{ font-style:italic!important;}

.pagetop{ display:none; position:fixed; bottom:10px; right:10px;}
.pagetop a {display: block; background-color: #ccc; text-align:center; color:#222; font-size: 12px; text-decoration: none; padding:10px;} 
.pagetop a:hover{ display:block; background-color: #222; text-align: center; color:#fff; font-size:12px; text-decoration:none; padding:20px 10px;}