@charset "utf-8";

/*==========================================================================*/
/*                                   body                                   */
/*==========================================================================*/
body{
    font-size:12px;
}

/*==========================================================================*/
/*                           link * mouseover * tel                         */
/*==========================================================================*/
.opacity {
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
span.tel_pc,p.tel_pc{
    display: none;
}
a.tel_s{
    display: inline-block;
    pointer-events:auto;  
    cursor:pointer;
}

/*==========================================================================*/
/*                                  container                               */
/*==========================================================================*/
#container {
	width: 100%;
    min-width: inherit;
}

/*==========================================================================*/
/*                                   pagetop                                */
/*==========================================================================*/
.page_top{
	bottom:30px;
	right:5px;
    width: 50px;
    height: auto;
}

/*==========================================================================*/
/*                                    header                                */
/*==========================================================================*/
header {
	width: 100%; 
    margin: 0 0%;
    height: 110px;
}
#header-in{
    width: 100%;
}
img.img_dot{
    display: none;
}
#logo{
    float:none;
    width: 100%;
    margin:45px auto 50px;
    padding: 0 20px 0 0;
}
#logo img{
	width: 243px;
	height:auto;
    display: block;
    margin: 0 auto;
}
#submenu{
   display: none;
}
#sub_adress{
    display: none;
}

/*==========================================================================*/
/*                                      nav                                 */
/*==========================================================================*/
#menuButton {
    z-index: 10;
    width: 100%;
    height: 100%;
}
#menuButtonInner {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: right;
}
.slideButton {
    display: block;
    margin: 5px;
    padding: 5px 8px 8px;
    background-color: #fff;
    font-size: 70%;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top:-15px;
    right: 0px;
}
#slideMenu {
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    z-index: 9999999;
    top: 0;
    right: -260px;
    width: 260px;
    height: 100%;
    margin: 0;
    padding: 0;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
  transition: all 300ms ease;
}
#slideMenu.open {
  right: 0;
}
#slideMenu > .slideMenuInner {
    position: static;
    width: 100%;
    height: 100%;
    background-color: #7cc7ef;
}
#slideMenu > .slideMenuInner > li {
    display: block;
    position: relative;
    float: none;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    border-left: 0px ;
    text-align: center;
    padding: 0;
}
#slideMenu > .slideMenuInner li.sp {
    display: block;
}
#slideMenu > .slideMenuInner > li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: #7cc7ef;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 49px;
}
#slideMenu > .slideMenuInner > li:hover a {
    background-color: #a1d8f5;
    color: #fff;
}
#slideMenu > .slideMenuInner > li > a:active {
    opacity: .8;
}
#slideMenu > .slideMenuInner > li:hover > ul.second-level {
    display: none;
}
.closeArea {
    height: 100%;
    background-color: #fff;
    background: url(../images/bg_snav.png) repeat ;
    background-size:15px 15px;
    -webkit-background-size:15px 15px;
    -moz-background-size:15px 15px;
    -o-background-size:15px 15px;
    -ms-background-size:15px 15px;
    cursor: pointer;
    }
#layer {
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
    opacity: .4;
    cursor: pointer;
  transition: all 300ms ease;

}
#layer.open {
  display: block;
}

/*==========================================================================*/
/*                                  contents                                */
/*==========================================================================*/
#contents {
    margin:0;
    padding: 0;
}

/*==========================================================================*/
/*                                    main                                  */
/*==========================================================================*/
#main{
    width: 100%;
}
div.in01{                                                         /* main内 */
    width: 94%;
    padding: 0 3% 30px;
}
div.in02{                                                         /* main内 */
    width: 100%;
    margin: 0;
    padding: 10px 3% 0;
}
.in_in02{
    width: 100%;
}
#main h2{
    height: 80px;
}
#main h2 img{
    width: 75%;
    max-width:300px;
    height:auto;   
}
#main h3{
	margin:0px auto 5px;
	width:100%;
	height:auto;
	line-height:20px;
	padding: 0px 0px 20px
}
#main h3 img{
    width: 75%;
    max-width:300px; 
    height: auto;
    display: block;
    margin: 0px auto 0;
    padding: 40px 0 0;
}
#main h6{
	line-height:22px;
}
#main h6 br{
    display: block;
}
@media screen and (max-width: 900px) {
    #main h3 img{
        width: 80%;
    }
}
#main h4 {
	height:190px;
}
#main h8{
    margin: 2% 0 0;
}
.pageimage_w{
    width: 80%;
    top:43%;
    left: auto;
}
#main div.ba_page{　　　　　　　　　　　　　　　　　　　　　　　　　　　/* banner */
    padding: 0;
    width: 48%;
    height: auto;
}
#main div.ba_page_r{
    padding: 0;
    width: 48%;
    height: auto;
}
#main div.ba_page img,#main div.ba_page_r img,#main div.ba_page_01 img,#main div.ba_page_02 img,#main div.ba_page_03 img{
    width: 100%;
    height: auto;
}

@media screen and (max-width: 599px) {
    #main div.ba_page,#main div.ba_page_r,#main div.ba_page_01,#main div.ba_page_02,#main div.ba_page_03{　　
        float: none;
        width: 100%;
        height: auto;
        margin: 0 0 30px;
        padding: 0;
    }
    span.pm{
        display: none;
    }
    span.sm{
        display: block;
    }
    .pageimage_w{
        width: 96%;
        top:43%;
        padding: 0 2%;
}
}

/*==========================================================================*/
/*                                bread crumb                               */
/*==========================================================================*/
#b-crumb{
    margin:30px 0 0px;
	width: 100%;
	height: 15px;
}
#b-crumb .bc-Box{
    display: none;
}

/*==========================================================================*/
/*                                    footer                                */
/*==========================================================================*/
footer {
    width: 92%;
    margin: 0 auto 0;
    padding: 0 4%;
}
footer div#f-in{
    width: 100%;
    margin: 0px auto 0;
}
.f_nav{
    width: 20%;
    padding: 30px 0 0;
}
.f_nav span a{
    font-size: 11px;
    padding: 2px 0 2px 14px;
    font-size: 10px;
}
footer ul li a{
    font-size: 10px;
    padding: 0;
    width: 100%;
}
.logo_foot{
    width: 50%;
    max-width: 164px;
}
.logo_foot img{

}
footer div.fad{
    font-size: 12px;
}
footer div.fad a.tel_s{
    display: inline-block;
    pointer-events:auto;  
    cursor:pointer;
    color: #fff;
}
@media screen and (max-width: 599px) {
    footer div#f-in{
        width: 100%;
        margin: 0px auto 0;
        padding: 0;
    }
    .f_nav{
        width: 100%;
        padding:0;
        
    }
    .f_nav span{
        display: block;
        width: 100%;
        border-bottom: 1px dotted #eee;
        line-height:40px;
    }
    .f_nav span a{
        font-size: 12px;
        width: 86%;
        margin: 0 3%;
        padding: 0 0 0 14px;
    }
    footer ul li{
        height: 40px;
        padding: 0px 0 0px 3%;
        border-bottom: 1px dotted #eee;
    }
    footer ul li a{
        font-size: 12px;
        padding: 8px 0 3px 17px;
        width: 80%;
    }
    footer div.fad{
        font-size: 10px;
    }
    small{
        padding: 25px 0 0 0;
    }
}

/*==========================================================================*/
/*                                    table                                 */
/*==========================================================================*/
.ta3 {
    font-size: 10px;
}
.ta3 td{
	padding: 10px 2px;
}
.ta3 th{
	padding: 10px 2px 10px;
}
.ta3 th.c1{
    width: auto;
}
.ta3 th.c3{
    width: 10%;
}
.ta3 br{
    display: block;
}

/*==========================================================================*/
/*                                    other                                 */
/*==========================================================================*/
br.forn{
    display: none;
}
#main dl{
    width: 100%:
}
#main dt {
    float:none;
    padding : 8px 0px 0px 0px;
}
#main dd {
    width:auto;
    padding : 0px 5px 5px 0px;
}
#main ul li.star{
    background-position: 4px left;
    background-size: 15px 15px;
    -webkit-background-size: 15px 15px;
    -moz-background-size: 15px 15px;
    -o-background-size: 15px 15px;
    -ms-background-size: 15px 15px;
    padding: 0 0 0 20px;
    line-height: 23px;
}
/*==========================================================================*/
/*                                    index                                 */
/*==========================================================================*/
#mainimage{
    width: 96%;
    padding: 15% 0 0;
    background-image:url(../images/slide_bg.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: 94% auto;
    -webkit-background-size: 94% auto;
    -moz-background-size: 94% auto;
    -o-background-size: 94% auto;
    z-index: 0;
}
@media screen and (max-width: 500px) {
    #mainimage{
        background-position: center 0px;
        -webkit-background-size: 92% auto;
        -moz-background-size: 92% auto;
        -o-background-size: 92% auto;
    }
}
@media screen and (max-width: 400px) {
    #mainimage{
        background-position: center 0px;
    }
}
#mid2{
    width: 100%;  
    margin: 0 auto;
    padding: 0;
    position: relative;
}
img.img_dot2{
    position: absolute;
    right: 5px;
    bottom: 40px;
    width: 200px;
    height: auto;
}
#top90 img{
    width: 38%;
    max-width: 230px;
    min-width: 140px;
    bottom: 10px;
}
@media screen and (max-width: 400px) {
    #top90 img{
        bottom: 5px;
    }
}
#slider .bx-wrapper .bx-prev{
	left:-25px;
    background-size: 44px auto;
    -webkit-background-size: 44px auto;
    -moz-background-size: 44px auto;
    -o-background-size: 44px auto;
    -ms-background-size: 44px auto;
}
#slider .bx-wrapper .bx-next{
	right:-25px;
    background-size: 44px auto;
    -webkit-background-size: 44px auto;
    -moz-background-size: 44px auto;
    -o-background-size: 44px auto;
    -ms-background-size: 44px auto;
}
.topwl{
    padding: 0px 4% 2% ;
    width: 92%;
    margin-top: 0px;
}
.topimage01{
    padding: 0 4% 0 0;
    width: 38%;
    min-width: 200px;
    max-width: 486px;
    height: auto;
    position: absolute;
    right: 0;
    top:-10px;
}
@media screen and (max-width: 600px) {
    .topwl{
        margin-top: -20px;
    }
    .topimage01{
        width: 50%;
        top:-30px;
    }
}
.topimage02{
    float: none;
    margin:0 auto -1.5%;
    padding: 0 0 0;
    width: 90%;
    max-width: 547px;
    height: auto;
}
.topimage03{
    display: none;
}
img.bh4_dot{
    left: 5px;
    width: 50px;
    height: auto;
}
#map{
    height: 200px;
}
img.mark_nintei{
    display: block;
    margin: 0 auto 30px;
}

/*==========================================================================*/
/*                                 education                                */
/*==========================================================================*/
.edul{
    padding: 0;
    width: 100%;
    float: none;
}
.edulimage01{
    width: 100%;
    float: none;
    margin: 0 auto;
}
div.psBox{
    padding: 1% 0;
}
.ps_l{
    width: 100%;
    float: none;
}
.ps_l img{
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    display: block;
    height: auto;
}
.ps_r{
    width: 100%;
    float: none;
    padding: 0;
    margin-bottom: 3%;
}
.ps_r span{
    display: block;
    font-size: 1em;
    font-weight: bold;
    padding: 0 0 5px 0;
}
img.gra{
    width:230px;
    padding: 2% 0 0;
}
@media screen and (max-width: 500px) {
    img.gra{
        margin: 0 auto;
    }
}

/*==========================================================================*/
/*                                 recruit                                  */
/*==========================================================================*/
.hiyoko_l{
    display: block;
    float: left;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0 0 20px;
    position: relative;
}
.hiyoko_r{
    position: absolute;
    display: block;
    float: right;
    width: auto;
    height: auto;
    margin: 0 0 0 auto;
    padding: 5% 0 0;
    right: 0;
    text-align: right;
    bottom:-80px;
}
.hiyoko_r img{
    width: 200px;
    height: auto;
}
@media screen and (max-width: 500px) {
    .hiyoko_l{
        padding: 0 0 0px;
    }
    .hiyoko_r{
        position: relative;
        float: none;
        padding: 0;
        margin: -20px 0 20px;
        bottom: 0;
        text-align: center;
        right: auto;
    }
    .hiyoko_r img{
        margin: 0 auto ;
    }
}
img.mark_nintei_r{
    display: block;
    margin:  0 auto 20px;
}

/*==========================================================================*/
/*                              everyday.html                               */
/*==========================================================================*/
.day_Box{
    width: 100%;
}
.day_Box img{
    margin-bottom: -13px;
}
.day_Box span.day_w{
    padding: 3px 0 10px;
    line-height: 1.8em;
}
@media screen and (max-width: 500px) {
    .day_Box img{
        width: 70%;
    }
}
.ev_Box{
    margin: 5px 0;
    padding: 25px 20px;
}
.ev_l{
    float: none;
    width: 98%;
    margin: 0px 1% 0;
}
.ev_l img{
    max-width: 169px;
    width: 31%;
    height: auto;
    margin: 0 auto 0 0;
}
#main .ev_l ul{
    display: block;
    margin: 0;
}
#main .ev_l ul span{
    font-size: 0.9em;
}
.ev_r{
    display: inline-block;
    float: none;
    width: 100%; 
    margin: 10px 0 0;
    padding: 0 0 10px;
}
.ev_r img{
    background-color: #999;
    display: block;
    float: left;
    width: 48%;
    max-width: 360px;
    height: auto;
    padding: 0;
    margin: 0px 1%;
    border-radius: 15px;
}
/*==========================================================================*/
/*                              everyday.html                               */
/*==========================================================================*/

/*==========================================================================*/
/*                               info,letter                                */
/*==========================================================================*/