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

#mainContents { margin: 0 0 40px; padding: 0 0 20px; font-size: 14px; background: url(../img/bg_body.jpg);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25);}

#mainHead { position: relative; padding: 0 20px 20px;}
#mainHead h1 { margin: 0 -20px 20px;}
#mainHead .btn_entry { position: absolute; top: 15px; right: 15px;}
#mainHead .btn_entry li { margin: 0 0 8px;}

#centerAddress .tel { float: right;}
#centerAddress .tel img { margin: 0 0 10px;}
#centerAddress .tel a img { background: #fff;}
#centerAddress .tel a:hover img { background: #ffffe3;}
#centerAddress dl { margin: 5px 0 0;}
#centerAddress dt { display: inline-block; width: 5.5em; padding: 0 0 0 5px; border-left: 3px solid #A7A43E; vertical-align: top;}
#centerAddress dd { display: inline-block; max-width: 610px;}

#centerMap { height: 240px; margin: 20px 0 40px; border: 1px solid #A7A43E;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25);}

.boxes { margin: 60px 0 0; padding: 0 20px;}
.boxes h2 { position: relative; z-index: 2; display: inline-block; margin: 0 0 20px -30px; padding: 10px 35px 10px 62px; line-height: 1; font-size: 18px; font-weight: bold;
color: #894401; background: #FCDD61;
box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
-o-box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
-ms-box-shadow: 1px 1px 3px rgba(0,0,0,0.25);}
.boxes h2:after { position: absolute; z-index: 1; content: " ";
border-top: 5px solid #CDA70F; border-right: 5px solid #CDA70F; border-bottom: 5px solid transparent; border-left: 5px solid transparent; bottom: -10px; left: 0;}
.boxes h2 img { position: absolute; top: -10px; left: 10px;}
.under h2 { width: 633px;}
#box02 h2 { color: #292F0B; background: #CEEA35;}
#box02 h2:after { border-top-color: #A6C30A; border-right-color: #A6C30A;}
#box03 h2 { color: #033D01; background: #7AEB71;}
#box03 h2:after { border-top-color: #38BE2D; border-right-color: #38BE2D;}
#box04 h2 { color: #065251; background: #75E2E1;}
#box04 h2:after { border-top-color: #5EB4B3; border-right-color: #5EB4B3;}
.boxes .inner,
.boxes .info,
.boxes .checkit { padding: 10px; background: #fff; border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25);}
.boxes .info h3 { font-weight: bold;}
.boxes .info li { padding: 0 0 0 1em; text-indent: -1em;}

#box01 { margin: 0;}
#box01 .inner { margin: 0 0 10px;}
#box01 #root { padding: 10px 0; border: 2px solid #894401; text-align: center; background: url(../img/bg_map.jpg);}
#box01 .info { border: 2px solid #FCDD61; font-weight: bold; color: #894401; background: #FDF7DE;}
#photoSlider { position: relative; height: 170px; margin: 20px -20px 0; overflow: hidden;}
#photoSlider ul { position: absolute; left: 50%; height: 170px;}
#photoSlider li { float: left; padding: 2px 5px 0;}
#photoSlider li img { box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25);}
#box01 .checkit { border: 2px solid #FF6666; font-weight: bold; color: #960A0A; background: #FFF4F4;}

#box01 .list { text-decoration: none; color: #333;}
#box01 .list .inner { margin: 0 0 20px; overflow: hidden;}
#box01 .list h3 { margin: -10px -10px 10px; padding: 10px 15px; font-weight: bold; font-size: 16px; color: #894401; background: #FDF7DE;}
#box01 .list .date { margin: 0 -10px 10px; padding: 0 10px 7px; border-bottom: 1px solid #FCDD61; color: #894401; text-align: right;}
#box01 .list .photo { float: left; margin: 0 10px 0 0;}
#box01 .list .more { text-align: right; text-decoration: underline; color: #F36;}
#box01 .list:hover .more { text-decoration: none; color: #23B3B3;}
#box01 .article p { margin-bottom: 10px;}

#listNews .inner { margin: 0 0 10px; padding: 0; overflow: hidden;}
#listNews .inner a { display: block; padding: 10px 10px 10px 28px; background: url(../img/icon_circle_g.png) 10px 14px no-repeat;}
#listNews .inner a:hover { background-color: #FFFFEA;}
#listNews .more { padding: 0 0 3px; text-align: right;}
#listNews .more a { display: inline-block; padding: 0 16px 0 0; background: url(../img/icon_arrow_g.png) right center no-repeat;}

#box04 { padding-right: 0;}
#box04 .image { float: right; margin: 0 20px 20px 10px;}
#listCounselor { padding: 0 0 10px;}
#listCounselor li { float: left; width: 196px; margin: 0 20px 10px 0; padding: 7px 17px 7px 7px; background: url(../img/icon_arrow_b.png) 208px center no-repeat #fff;}
#listCounselor li:hover { background-color: #FFFFEA;}
#listCounselor li a { width: 100%; display: table; text-decoration: none; color: #333;}
#listCounselor li:hover a { color: #F36;}
#listCounselor li a img { display: table-cell; vertical-align: top;}
#listCounselor li a div { display: table-cell; width: 140px; padding: 0 0 0 7px; vertical-align: top;}
#listCounselor li a div h3 { margin: 0 0 6px; padding: 0 0 3px 17px; border-bottom: 1px solid #75E2E1; background: url(../img/icon_circle_b.png) left 4px no-repeat;}
#listCounselor li a div h3 span { font-size: 12px;}
#listCounselor li a div p { line-height: 1.2; font-size: 13px;}
#box04 .info { position: relative; margin: 20px 20px 0 0; padding-top: 15px; border: 2px solid #75E2E1; color: #000; background: #EAFFFF;}
#box04 .info h3 { position: absolute; top: -20px; left: 20px; padding: 5px 40px 5px 15px; letter-spacing: 0.2em; background: #4BD1CE; border-radius: 2em;}
#box04 .info h3:after { position: absolute; z-index: 10; content: " "; margin: 0 0 0 -6px;
border-top: 6px solid #4BD1CE; border-right: 6px solid transparent; border-left: 6px solid transparent; bottom: -6px; left: 25px;}
#box04 .info h3 span { position: absolute; top: 0px; right: 10px; color: #fff; font-size: 22px;
transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -o-transform: rotate(-15deg); -ms-transform: rotate(-15deg);}
#box04 .info li { list-style: none; margin: 5px 0 0 3px; padding: 0 0 0 35px; background: url(../img/icon_voice.png) left center no-repeat;}

#box05 { padding-right: 0;}
#box05 a { color: #333;}
#box05 .inner { overflow: hidden; float: left; width: 216px; margin: 0 20px 10px 0; padding: 0;}
#box05 .inner p { height: 7.5em; padding: 10px;}
#box05 a:hover .inner img { opacity: 0.8;}
#box05 #btn_c { border: 2px solid #FF6666;}
#box05 a:hover #btn_c { background-color: #FFF4F4;}
#box05 #btn_e { border: 2px solid #FFCC33;}
#box05 a:hover #btn_e { background-color: #FFFFF0;}
#box05 #btn_s { border: 2px solid #3A87E8;}
#box05 a:hover #btn_s { background-color: #F0F0FF;}
#box05 .clear { margin: 0 20px 0 0;}

#entryMiddle { margin: 30px 0 0; text-align: center;}

#areaBtn { display: table; width: 100%; margin: 50px 0 0; border-top: 2px dashed #d7ae0b; border-bottom: 2px dashed #d7ae0b; background: #fff7d2; background: rgba(255, 247, 210, 0.5);}
#areaBtn p { display: table-cell; width: 50%; white-space: nowrap; padding: 15px 10px; text-align: center; font-weight: bold; color:#5F2600;}
#btn_event a img { background: #D7EDFF;}
#btn_event a:hover img { background: #5fb6ff;}


div#article p { margin-bottom: 10px;}