@charset "utf-8";
/* TOPページ以外のページためのCSS */

/* =================================================
共通定義
====================================================*/


/*===============================================
galleryページのcss
================================================*/

#gallery-wrapper {
    background: #F4EEE8;
    margin: 0 auto;
}
    
#gallery-top {
    max-width: 1100px;
    margin: 50px auto;
}


    /* ---------mv-スライダー-----------*/

.slider-erea {
  margin-bottom: 50px;
}

.slider {
    position:relative;
      z-index: 1;
      /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
      
  }

  .slider-item {
    width: 100%;
    margin-right: 0;
}
  
  
  /*矢印の設定*/
  
  .slick-prev, 
  .slick-next {
      position: absolute;
      z-index: 3;
      top: 42%;
      cursor: pointer;
      outline: none;
      border-top: 2px solid #fff;/*矢印の色*/
      border-right: 2px solid #fff;/*矢印の色*/
      height: 25px;
      width: 25px;
  }
  
  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
  }
  
  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  /*ドットナビゲーションの設定*/
  
  .slick-dots {
      position: relative;
      z-index: 1;
      text-align:center;
      margin: 20px 0 0 0;/*ドットの位置*/
  }
  
  .slick-dots li {
      display:inline-block;
      margin: 0  5px;
  }
  
  .slick-dots button {
      color: transparent;
      outline: none;
      width:8px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:50%;
      background:#fff;/*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button{
      background:#333;/*ドットボタンの現在地表示の色*/
  }


/* ---------front-info-----------*/


  #front-info {
    max-width: 1200px;
    margin: 20px auto;
  }

  .front-inner {
    background: rgba(117, 68, 51, 0.8);
    max-width: 1100px;
    margin: 0 auto;
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px 20px 50px 20px;    
  }

  .front-title, .collection-title {
    margin-top: 0;
    color: #fff;
    text-align: center;
    font-size: 2rem;
  }

  .orange-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

    /* ---------gallery-collectionー-----------*/

  .collection-bar {
    background:rgba(214, 154, 135, 0.8);
    padding: 10px;
  }


  #gallery-photo {
    max-width: 1100px;
    margin: 0 auto 70px auto;
  }

 .photo-pearents {
  margin-top: 50px;
  margin-bottom: 30px;
 }

  .gallery-photo-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

  }

  .gallery-photo-box li {
   padding: 20px;
  }

  .gallery-photo-box img {
    width: 100%;
    max-width: 250px;
  }


  .sub-heading {
    background: rgba(117, 68, 51, 0.8);
    color:#fff;
  
    padding: 10px;
    font-size: 1.3rem;
  }

  


/*===============================================
systemページのcss
================================================*/

#system-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    margin-bottom: 50px;
}

#page-heading {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 15px;
}

.price-list {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0;
}

.fee-bar {
    background:linear-gradient(#ECE9E6,#FFFFFF);
    margin-bottom: 10px;
}

.fee-title {
    padding: 5px;
    font-size: 2rem;
    margin-bottom: 0;
}

.fee-description {
    font-size: 1.2rem;
    padding: 5px;
}

.page-right {
  margin-top: 20px;
}

table{
    width: 100%;
    border-collapse:collapse;
    margin:0 auto;
    font-size: 2rem;
    border: #f46b45;
  }
  
  td,th{
    text-align: center;
    padding:10px;
    border-bottom:1px solid #f46b45;
    border-left: 1px solid #f46b45;
    border-right: 1px solid #f46b45;
  }
  th{
    color:#fff;
    background:linear-gradient(#f46b45,#eea849);
  }
  table tr td:nth-child(odd){
    background:#ffffc1;
  }

  .blue {
    background:linear-gradient(#2980b9,#2c3e50);
  }

  .pink {
    background:linear-gradient(#ec008c,#fc6767);
  }

  .green {
    background:linear-gradient(#00C9FF,#92FE9D);
  }
  

/*===============================================
recruitページのcss
================================================*/

#recruit {
    max-width: 1200px;
    margin: 0 auto;
}

.red {
  color: red;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

.recruit-button {
    text-align: center;
    margin: 50px;
}

/*===============================================
roomページの共通css
================================================*/
#room-wrapper {
  background: #F4EEE8;
  margin: 0 auto;
}

#room-top {
	max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.room-mv img {
  max-width: 1100px;
  max-height: 800px;
  width: 100%;
}

.room-mv {
  text-align: center;
}

.room-detail {
max-width: 1055px;
margin: 0 auto 50px auto;
padding: 20px;
text-align: center;
}

.detail-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.room-detail h2 {
  font-size: 2.5rem;
}

 .room-detail-txt {
  text-align: left;
  font-size: 1.2rem;
 }

 .room-detail-txt:first-child {
  margin-left: 15px;
 }


/*===============================================
accessページのcss
================================================*/

#access-wrapper {
  background: #F4EEE8;
}

#access-top {
  max-width: 1200px;
  margin: 30px auto;
}

.access-map {
  text-align: center;
}

.way {
  padding: 5px;
}

.way-title {
  background: #f46b45;
  font-size: 1.7rem;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.way-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.way-img {
width: 30%;
text-align: center;
padding-top: 10px;
}

.way-txt {
  width: 70%;
  font-size: 1.5rem;
  padding-top: 30px;
}

.subway-root {
  max-width: 1055px;
  text-align: center;
  margin: 0 auto;
}

.subway-pearent { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.subway-box {
  padding: 10px;
}

.subway-box img {
  max-width: 170px;
}

.subway-box p {
  padding: 5px 15px;
  text-align: left;
  font-size: 1.1rem;;
}