@charset "utf-8";

/*
=========================================
  Top page
=========================================
*/

#MV{
	background:url("../img/mv_img.jpg") no-repeat right;
	background-size:100%;
	margin-left:15%;
	margin-top: 100px;
	min-height:430px;
	border-radius:50px 0 0 0;
	position:relative;
}
@media screen and (max-width: 1200px) {
#MV{
	background-size:120%;
	margin-left:8%;
}
}
@media screen and (max-width: 1000px) {
#MV{
	margin-top: 60px;
}
}
@media screen and (max-width: 900px) {
#MV{
	background:url("../img/mv_img_sp.jpg") no-repeat right;
	background-size: 120%;
	margin-left:15%;
}
}
@media screen and (max-width: 700px) {
#MV{
	min-height:350px;
}
}
@media screen and (max-width: 600px) {
#MV{
	background-size:100%;
	min-height:250px;
}
}
@media screen and (max-width: 450px) {
#MV{
	background-size:400px;
}
}
#MV h2{
	top:4rem;
	left:-5%;
	text-align:left;
	position:absolute;
}
#MV h2 strong{
	background:#82bdd9;
	color:#fff;
	display:inline-block;
	border-radius:50px;
	padding:10px 50px;
	margin: 7px;
	font-weight: 500;
}
@media screen and (max-width: 900px) {
#MV h2{
	top:3rem;
	left:-10%;
}
}
@media screen and (max-width: 600px) {
#MV h2 strong{
	padding:5px 30px;
	margin: 3px;
}
}



#gallery{
	background:#e5f1f7;
	overflow: hidden;
}
#gallery img{
	float: left;
	width: 32.3%;
	margin: 1.5% 0.5%;
	border-radius:10px;
}



#news{
	overflow: hidden;
	margin-top:5rem; 
}
@media screen and (max-width: 600px) {
#news{
	margin-top:2rem; 
}
}



#news .news_tl{
	width: 200px;
	float: left;
	text-align: center;
	background: #e5f1f7;
	border-radius: 10px;
	padding: 60px 0 20px;
}
@media screen and (max-width: 900px) {
#news .news_tl{
	width: 100%;
	padding: 10px 0 0;
}
}
@media screen and (max-width: 600px) {
#news .news_tl{
	padding: 10px 0 ;
}
}
#news .news_tl h2{
	color:#0095d9;
	font-size:180%;
}
@media screen and (max-width: 600px) {
#news .news_tl h2{
	margin-bottom:0;
	font-size:150%;

}	
}
#news .news_cont{
	margin-left: 220px;
	border-top:1px solid #ccc;
}


#news .info a{
	color: #0095d9;
	background:#e6f1f7;
	padding:5px 15px;
	margin-left:10px;
	border-radius:20px;
}
#news .holiday a{
	color: #0095d9;
	background:#e6f1f7;
	padding:5px 15px;
	border-radius:20px;
}
#news .important a{
	color: #fff;
	background:#ec5c5c;
	padding:5px 15px;
	margin-left:10px;
	border-radius:20px;
}
#news .other a{
	color: #333;
	background:#dfdfdf;
	padding:5px 15px;
	margin-left:10px;
	border-radius:20px;
}




@media screen and (max-width: 900px) {
#news .news_cont{
	margin-left: 180px;
}
}
@media screen and (max-width: 900px) {
#news .news_cont{
	margin-left: 0;
	clear:both;
	border-top:none;
}
}
#news .news_cont dl{
	border-bottom:1px solid #ccc;
	padding: 18px;
}
#news .news_cont dl dt{
	color:#0095d9;
	width: 180px;
	float:left;
}
#news .news_cont dl dd{
	margin-left:180px;
}

@media screen and (max-width: 600px) {
#news .news_cont dl dt{
	float:none;
}
#news .news_cont dl dd{
	margin-left:0;
	padding-top:10px;
}
}

#news .btn{
	float:right;
}



#hours{
	position: relative;
	margin-top:5rem;
	overflow: hidden;
	padding: 5rem 0;
}
@media screen and (max-width: 900px) {
#hours{
	margin-top:3rem;
	padding: 3rem 0;
}
}


#hours .hours_bg{
	position: absolute;
	right: 20%;
	width: 80%;
	background: #f8f6ee;
	border-radius: 0 50px 50px 0;
	top: 0;
	height: 100%;
	z-index: -1;
}
#hours p{
	padding:1rem 0;
}

#hours .first_examination{
	text-align: center; 
}

#hours .first_examination div{
	border: 1px solid #ccc;
	border-radius: 10px;
	margin-top: 1rem;
	background:#e5f1f7;
}
#hours .first_examination dt{
	padding: 2rem 10px;
}
#hours .first_examination dd{
	text-align:left;
	padding: 2rem 10px;
	background:#FFF;
	border-radius:0 10px 10px 0;
}
@media screen and (max-width: 900px) {
#hours .first_examination dt{
	padding: 1rem 10px;
}
#hours .first_examination dd{
	padding: 1rem 10px;
	border-radius:0 0 10px 10px;
}
}




#hours .hours_bg div{
	border: 1px solid #ccc;
	border-radius: 10px;
	background:#e5f1f7;
}

#hours div dt{
	color: #57b0d9;
	text-align: center;
	width: 300px;
	float: left;
	font-weight: bold;
}
#hours div dd{
	margin-left: 320px;
	background: #fff;
}

@media screen and (max-width: 900px) {
#hours div dt{
	width: 100%;
	float: none;
	padding:10px;
}
#hours div dd{
	margin-left:0;
	background: #fff;
}

}





#supplement{
	position: relative;
	padding: 3rem 0;
}
@media screen and (max-width: 600px) {
#supplement{
	padding: 1rem 0;
}
}

#supplement .blue,
#supplement .green{
	border: 1px solid #ccc;
	border-radius: 10px;
	margin-top: 2rem;
}
@media screen and (max-width:600px) {
#supplement .blue,
#supplement .green{
	margin-top: 1.5rem;
}
}

#supplement .blue{
	padding: 2rem;
}





#supplement .green{
	overflow: hidden;
	background: #eef4e4;
}
#supplement .green .left{
	padding: 5% 3% 1%;
	width:14%;
	text-align:center;
}
#supplement .green .right{
	padding: 2rem 3% 1.5rem;
	width:74%;
	background: #fff;
}
@media screen and (max-width: 600px) {
#supplement .green .left{
	display:none;
}	
#supplement .green h4{
	padding:0.5rem 5% 1rem;
	width:90%;
	background: #eef4e4;
	text-align: center;
}
#supplement .green img{
	margin:0 auto 5px;
	width:100px;
}
#supplement .green .right{
	padding: 0;
	width:100%;
	background: #fff;
}
#supplement .green p{
	padding:0.5rem 5%;
}
}
@media screen and (max-width: 480px) {
#supplement .green img{
	width:75px;
}
}




#supplement .green .right h4{
	color: #47a56f;
}
#supplement .green .right a{
	background: #47a56f;
	float:right;
}
@media screen and (max-width: 900px) {
#supplement .green .right a{
	margin:0.5rem 3% 1rem;
}
}


#director{
	margin-top: 10rem;
}
#director p{
	margin: 3rem 5%;
}
@media screen and (max-width: 900px) {
#director{
	margin-top:4rem;
}
}
@media screen and (max-width: 600px) {
#director{
	margin-top:2rem;
}
#director p{
	margin: 1rem 5% 2rem;
}
}


#director .director_profile{
	background: #e5f1f7;
	border-radius: 50px;
	overflow: hidden;
	text-align:center;
	padding: 0 5% 3rem 5%;
}
#director .director_profile .left{
	width: 55%;
}
@media screen and (max-width: 480px) {
#director .director_profile{
	padding: 1rem;
}
#director .director_profile .left{
	width: 100%;
	float:none;
}
}

#director .profile_cont{
	text-align:left;
	padding: 2rem 0;
}
#director .profile_cont span{
	color:#000;
}
#director .profile_cont strong{
	color:#000;
	font-size:150%;
}
@media screen and (max-width: 480px) {
#director .profile_cont span{
	display:block;
	font-size:100%;
}
}


#director .director_profile dl{
	overflow: hidden;
	border-bottom:1px solid #ccc;
	background: #57b0d9;
}
	
#director .director_profile dt{
	color: #fff;
	text-align: center;
	width: 110px;
	float: left;
	padding: 12px 15px;
}
#director .director_profile dd{
	background: #fff;
	margin-left: 140px;
	padding: 12px 15px;
}
@media screen and (max-width: 750px) {
#director .director_profile dt{
	width: 90%;
	float: none;
	padding: 5px 5%;
}
#director .director_profile dd{
	background: #fff;
	margin-left: 0;
	padding: 12px 15px;
}
}
@media screen and (max-width: 480px) {
}


#director .director_profile .right{
	width: 40%;
	text-align: center;
}
#director .director_profile .right img{
	border-radius: 20px;
	display: block;
	margin: 0 auto 20px;
}
@media screen and (max-width: 480px) {
#director .director_profile .right{
	width:80%;
	margin:2rem 10% 0;
}
}



/*
=========================================
  access
=========================================
*/
#access{
	margin-top: 8rem;
}
#access .btn{
	float:right;
}

@media screen and (max-width: 900px) {
#access{
	margin-top: 6rem;
}
}
@media screen and (max-width: 600px) {
#access{
	margin-top: 3rem;
}
#access iframe{
	height:300px;
}
	
}