@charset "utf-8";
/* CSS Document */
#ttlArea {
  width:100%;
  height:460px;
  background-repeat:no-repeat;
  background-image:url(../images/main.jpg);
  background-size:cover;
  background-position:center top;
  top:0px;
  left:0px;
  z-index:10;
}
.ttlBlock {
  width:1000px;
  height:460px;
  margin:0 auto;
  position:relative;
}
.ttlBox {
  position:absolute;
  top:185px;
  width:200px;
  height:200px;
  display:block;
  background-image:url(../../common/images/bg_murasaki.jpg);
  opacity:0.8;
}
.ttlBlock h1 {
  position:absolute;
  top:245px;
  width:200px;
  height:auto;
  text-align:center;
}


#contentsArea {
}



.threeBlock {
  width:1016px;
  height:auto;
  margin:30px auto;
}
.threeBlock ul {
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  -webkit-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.threeBlock li {
  margin:8px;
  background-color: #CCC;
  width:322px;
}
.threeBlock li p {
  margin:10px;
  width:302px;
  height:180px;
  overflow:hidden;
}
.threeBlock li p img {
  width:100%;
  height:auto;
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

/* SmartPhone用設定
------------------------------------------------------------------- */
@media screen and (min-width: 320px) and (max-width: 767px) {

  #ttlArea {
    height:200px;
  }
  .ttlBlock {
    width:100%;
    height:200px;
    margin:0 auto;
    position:relative;
  }
  .ttlBox {
    display:none;
  }
  .ttlBlock h1 {
    top:85px;
    width:100%;
  }
  
  
 
  .threeBlock {
    width:auto;
    padding:10px 5px 20px;
    margin:0px auto;
  }
  .threeBlock ul {
  }
  .threeBlock li {
    margin:0 5px 10px;
    background-color: #CCC;
    width:43%;
    padding:5px;
  }
  
  
  .threeBlock li p {
    margin:0;
    width:auto;
    height:70px;
    overflow:hidden;
  }
  
  .threeBlock li dl {
    padding:20px;
  }
  .threeBlock li dt img {
    width:100%;
    height:auto;
  
  }
  .threeBlock li dd {
    padding:8px 0 0;
  }
  .threeBlock li dd h3 {
    background-color: #9b505e;
    height: 20px;
    width: 56px;
    border-radius:10px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
  }
  
  

  

}