@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

/* ==========================================================================
	CONTENT
========================================================================== */
#culture{
  background-color:#f4e2cd;
}
#culture p{
  text-align:left;
}

#main { background: url(../images/index-images/main.jpg); }
#main2 { background: url(../images/index-images/main2.jpg); }
#main3 { background: url(../images/index-images/main3.jpg); }
#main4 { background: url(../images/index-images/main4.jpg); }
#main5 { background: url(../images/index-images/main5.jpg); }
#main6 { background: url(../images/index-images/main6.jpg); }

.bx-controls{
  display:none;
}

#youtube {
    position: relative;
    padding-bottom: 45%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom:20px !important;
}
 
#youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------
	 PC   800px -
------------------------------------------------------------ */

@media screen and (min-width: 800px) {
#slider div{
  position:relative;
  background-position:center bottom;
  background-size:cover;
  width: 100%;
  height: 440px;
  border-bottom:2px solid #ff5b9c;
}

/*lead*/

#lead h2{
  width:600px;
  margin:0 auto;
}
#lead ul{
  overflow:hidden;
  width:1000px;
}
#lead li{
  float:left;
  width:306px;
  margin-right:21px;
}
#lead li img{
  width:100%;
  height:auto;
}

/*culture*/

#culture{
  width:890px;
  margin:0 auto 40px auto;
  padding:35px 35px 25px 35px;
}
#culture h2{
  float:left;
  width:170px;
  margin-right:40px;
  padding-top:5px;
}
#culture p{
  margin-bottom:20px;
}
#culture ul{
  clear:both;
  overflow:hidden;
  width:1000px;
}
#culture li{
  float:left;
  width:215px;
  margin:0 10px 10px 0;
}
#culture li img{
  width:100%;
  height:auto;
}

/*study*/

#study ul{
  overflow:hidden;
}
#study li{
  width:470px;
}

/*recruit*/

#recruit{
  float:left;
  width:640px;
  overflow:hidden;
}
#recruit ul{
  float:left;
  width:660px;
}
#recruit li{
  float:left;
  width:200px;
  text-align:center;
  margin-right:20px;
}
#recruit li a{
  display:block;
  background-color:#ffd2dd;
  padding:20px 0;
}
#recruit li a:hover{
  opacity: 0.8;  
  filter: alpha(opacity=80);
}
#recruit li img{
  height:67px;
  width: auto;
}

/*facebook*/

#right-box{
  float:right;
  width:270px;
}

/*linkbox*/

#linkbox{
  width:640px;
  float:left;
}
.linkbox{
  margin-bottom:30px
}
#linkbox h3{
  font-size:1em;
  background:url(../images/cmn-images/site-icon.gif) 0 50% no-repeat;
  padding-left:15px;
  margin-bottom:10px;
}
#linkbox ul{
  width:660px;
  overflow:hidden;
}
#linkbox li{
  float:left;
  width:200px;
  margin-right:20px;
}
#linkbox li img{
  width:100%;
  height:auto;
}

}

/* ------------------------------------------------------------
	 TABLET   for - 799px
------------------------------------------------------------ */

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

#slider div{
  position:relative;
  background-position:center bottom;
  background-size:cover;
  width: 100%;
  height: 300px;
  max-width:2000px;
  margin:0 auto;
  border-bottom:1px solid #ff5b9c;
}



/*lead*/

#lead {
  margin-bottom:30px;
}
#lead li{
  float:left;
  width:33%;
  text-align:center;
}
#lead li img{
  width:95%;
  height:auto;
}

/*culture*/

#culture{
  padding:15px;
  margin:0 auto 30px auto;
}
#culture h2{
  float:left;
  width:170px;
  margin-right:40px;
  padding-top:5px;
}
#culture p{
  margin-bottom:20px;
  margin-left:210px;
}
#culture ul{
  overflow:hidden;
}
#culture li{
  float:left;
  width:25%;
  text-align:center;
  margin-bottom:10px;
}
#culture li img{
  width:95%;
  height:auto;
}

/*study*/

#study ul{
  overflow:hidden;
}
#study li{
  width:48%;
}

/*recruit*/

#recruit{
  float:left;
  width:65%;
  overflow:hidden;
}
#recruit ul{
  overflow:hidden;
}
#recruit li{
  float:left;
  width:33%;
  text-align:center;
}
#recruit li a{
  display:block;
  width:95%;
  background-color:#ffd2dd;
  padding:20px 0;
}
#recruit li a:hover{
  opacity: 0.8;  
  filter: alpha(opacity=80);
}
#recruit li img{
  height:35px;
  width: auto;
}


/*facebook*/

#right-box{
  float:right;
  width:30%;
}

/*linkbox*/

#linkbox{
  float:left;
  width:65%;
  overflow:hidden;
}

.linkbox{
  margin-bottom:30px;
  overflow:hidden;
}
#linkbox h3{
  font-size:1em;
  background:url(../images/cmn-images/site-icon.gif) 0 50% no-repeat;
  padding-left:15px;
  margin-bottom:10px;
}
#linkbox ul{
  overflow:hidden;
}
#linkbox li{
  float:left;
  width:50%;
  text-align:center;
  margin-bottom:10px;
}
#linkbox li img{
  width:95%;
  height:auto;
}


}
/* ------------------------------------------------------------
	 SP　599pxまで
------------------------------------------------------------ */

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

#slider div{
  height:200px;
  
}
#main2 { background: url(../images/index-images/main2s.jpg); 
}
#main3 { background: url(../images/index-images/main3s.jpg); 
}
#main6 { background: url(../images/index-images/main6s.jpg); 
}
	
/*lead*/

#lead li{
  float:left;
  width:100%;
  margin-bottom:10px;
}
#lead li img{
  width:100%;
  height:auto;
}

/*culture*/

#culture h2{
  width:150px;
  float:none;
  margin-bottom:10px;
}
#culture p{
  margin-bottom:20px;
  margin-left:0px;
}
#culture li{
  width:50%;
  margin-bottom:10px;
}

/*study*/

#study li{
  width:100%;
}
#study .float-l{
  float:none;
  margin-bottom:10px;
}
#study .float-r{
  float:none;
}

/*recruit*/

#recruit{
  float:none;
  width:100%;
  overflow:hidden;
}
#recruit ul{
  overflow:hidden;
}
#recruit li{
  float:left;
  width:100%;
  text-align:center;
  margin-bottom:10px;
}
#recruit li a{
  display:block;
  width:100%;
  background-color:#ffd2dd;
  padding:20px 0;
}
#recruit li a:hover{
  opacity: 0.8;  
  filter: alpha(opacity=80);
}
#recruit li img{
  height:50px;
  width:auto;
}

/*facebook*/

#right-box{
  float:none;
  width:100%;
  margin:0 auto 20px auto;
  text-align:center;
}

/*linkbox*/

#linkbox{
  float:none;
  width:100%;
  overflow:hidden;
}
#linkbox .float-l{
  overflow:hidden;
  width:60%;
}
#linkbox .float-r{
  overflow:hidden;
  width:40%;
}
#linkbox ul{
  overflow:hidden;
}
#linkbox .float-l li{
  float:left;
  width:33%;
  margin-right:0px;
}
#linkbox .float-r li{
  float:left;
  width:50%;
  margin-right:0px;
  text-align:center;
}
#linkbox li img{
  width:95%;
  height:auto;
}
}