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

/* ------------------------------------------------------------
contents
------------------------------------------------------------ */
#main{
  position: relative;
  z-index: 1;
  width:100%;
  max-width: 1552px;
  text-align:center;
  overflow:hidden;
  margin:0 auto;
}
.slider{
  width:100%;
}
.slider ul{
  width:100%;
}
.slider li{
  display:block;
  text-align:center;
}
#main li{
height: 689px;
}
#main01{background: url("../images/index-images/main01.jpg") 50% 0 no-repeat;background-size: cover;}
#main02{background: url("../images/index-images/main02.jpg") 50% 0 no-repeat;background-size: cover;}
#main03{background: url("../images/index-images/main01.jpg") 50% 0 no-repeat;background-size: cover;}
#main04{background: url("../images/index-images/main02.jpg") 50% 0 no-repeat;background-size: cover;}

/* ------------------------------------------------------------
about
------------------------------------------------------------ */
#about ul{
overflow: hidden;
}
#about ul li{
float: left;
width: 23%;
margin-right: 2.5%;
}
#about ul li:nth-child(4n){
margin-right: 0;
}
#about ul li img{
margin-bottom: 10px;
}
#about ul li a{
font-size: 2.0rem;
}
/* ------------------------------------------------------------
news
------------------------------------------------------------ */
#news .box{
width: 840px;
margin: 0 auto;
}
#news dl{
margin-bottom: 30px;
}
#news dl dt{
float: left;
width: 150px;
text-align: left;
}
#news dl dd{
margin-left: 150px;
text-align: left;
}


/* ==========================================================================
pc
========================================================================== */
@media screen and (min-width: 1100px) {


}

/* ==========================================================================
tablet
========================================================================== */
@media screen and (max-width:1099px) {
#main li{
height: auto;
padding-top: 75%;
}

/* ------------------------------------------------------------
news
------------------------------------------------------------ */
#news .box{
width: 100%;
max-width: 840px;
box-sizing: border-box;
padding: 0 15px;
margin: 0 auto;
}
#news dl{
margin-bottom: 30px;
}
#news dl dt{
float: left;
width: 150px;
text-align: left;
}
#news dl dd{
margin-left: 150px;
text-align: left;
}

}

/* ==========================================================================
sp
========================================================================== */
@media screen and (max-width: 699px) {
#main{
padding-top: 60px;
}
#main li{
padding-top: 80%;
}
/* ------------------------------------------------------------
about
------------------------------------------------------------ */
#about ul{
overflow: hidden;
}
#about ul li{
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 15px;
}
#about ul li img{
margin-bottom: 5px;
}
#about ul li a{
font-size: 1.6rem;
}


#news dl dt{
float: none;
width: 100%;
font-weight: bold;
text-align: left;
}
#news dl dd{
float: none;
width: 100%;
margin-left: 0;
text-align: left;
}

}