@charset "utf-8";

/*-------------------
スマホ縦
-------------------*/
@media screen and (max-width: 480px){

  /*==================================================
  スライダーのためのcss
  ===================================*/

  .slider {
    position:relative;
    /*z-index: 10;*/
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    /*height: 40vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/

  .slider-item01 {
      background:url(../img/top/m_topimage/topimg1.jpg);
  }

  .slider-item02 {
      background:url(../img/top/m_topimage/topimg2.jpg);
  }

  .slider-item03 {
      background:url(../img/top/m_topimage/topimg3.jpg);
  }

  .slider-item04 {
      background:url(../img/top/m_topimage/topimg4.jpg);
  }

  /*.slider-item05 {
      background:url(../img/top/m_topimage/topimg5.jpg);
  }

  .slider-item06 {
      background:url(../img/top/m_topimage/topimg6.jpg);
  }

  .slider-item07 {
      background:url(../img/top/m_topimage/topimg7.jpg);
  }

  .slider-item08 {
      background:url(../img/top/m_topimage/topimg8.jpg);
  }

  .slider-item09 {
      background:url(../img/top/m_topimage/topimg9.jpg);
  }*/

  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height: 35vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }

  /*矢印の設定*/

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
      position: absolute;/*絶対配置にする*/
      z-index: 100;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      /*border-top: 5px solid #fff;/*矢印の色*/
      /*border-right: 5px solid #fff;/*矢印の色*/
      height: 25px;
      width: 25px;
  }

  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      /*transform: rotate(-135deg);*/
  }

  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      /*transform: rotate(45deg);*/
  }

  /*ドットナビゲーションの設定*/

  .slick-dots button {
      color: transparent;
      outline: none;
      width:24px;/*ドットボタンのサイズ*/
      height:5px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:0;
      background:#fff;/*ドットボタンの色*/
      border: none;
  }

  .slick-dots {
    position: relative;
    z-index: 100;
      text-align:center;
    margin:-20px 0 0 0;
  }

}
/*-------------------
スマホ横
-------------------*/
@media screen and (min-width: 481px) and (max-width: 896px) {

  /*==================================================
  スライダーのためのcss
  ===================================*/

  .slider {
      position:relative;
      background: #efeeec;
    /*z-index: 10;*/
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    /*height: 85vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/

  .slider-item01 {
      background:url(../img/top/topimg1.jpg);
  }

  .slider-item02 {
      background:url(../img/top/topimg2.jpg);
  }

  .slider-item03 {
      background:url(../img/top/topimg3.jpg);
  }

  .slider-item04 {
      background:url(../img/top/topimg4.jpg);
  }

  .slider-item05 {
      background:url(../img/top/topimg5.jpg);
  }

  .slider-item06 {
      background:url(../img/top/topimg6.jpg);
  }

  /*.slider-item07 {
      background:url(../img/top/m_topimage/topimg7.jpg);
  }

  .slider-item08 {
      background:url(../img/top/m_topimage/topimg8.jpg);
  }

  .slider-item09 {
      background:url(../img/top/m_topimage/topimg9.jpg);
  }*/

  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:85vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: right;/*背景画像の位置を中央に*/
      background-size: contain;/*背景画像が.slider-item全体を覆い表示*/
  }

  /*矢印の設定*/

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
      position: absolute;/*絶対配置にする*/
      z-index: 100;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      /*border-top: 5px solid #fff;/*矢印の色*/
      /*border-right: 5px solid #fff;/*矢印の色*/
      height: 50px;
      width: 50px;
  }

  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      /*transform: rotate(-135deg);*/
  }

  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      /*transform: rotate(45deg);*/
  }

  /*ドットナビゲーションの設定*/

  .slick-dots button {
      color: transparent;
      outline: none;
      width:50px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:0;
      background:#fff;/*ドットボタンの色*/
      border: none;
  }

  .slick-dots {
    position: relative;
    z-index: 100;
      text-align:center;
    margin:-25px 0 0 0;
  }

}
/*-------------------
タブレット
-------------------*/
@media screen and (min-width: 897px) and (max-width: 1024px) {

  /*==================================================
  スライダーのためのcss
  ===================================*/

  .slider {
      position:relative;
    /*z-index: 10;*/
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    /*height: 30vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/

  .slider-item01 {
      background:url(../img/top/topimg1.jpg);
  }

  .slider-item02 {
      background:url(../img/top/topimg2.jpg);
  }

  .slider-item03 {
      background:url(../img/top/topimg3.jpg);
  }

  .slider-item04 {
      background:url(../img/top/topimg4.jpg);
  }

  .slider-item05 {
      background:url(../img/top/topimg5.jpg);
  }

  .slider-item06 {
      background:url(../img/top/topimg6.jpg);
  }

  .slider-item07 {
      background:url(../img/top/topimg7.jpg);
  }

  .slider-item08 {
      background:url(../img/top/topimg8.jpg);
  }

  .slider-item09 {
      background:url(../img/top/topimg9.jpg);
  }

  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:34vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }

  /*矢印の設定*/

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
      position: absolute;/*絶対配置にする*/
      z-index: 100;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      /*border-top: 5px solid #fff;/*矢印の色*/
      /*border-right: 5px solid #fff;/*矢印の色*/
      height: 50px;
      width: 50px;
  }

  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      /*transform: rotate(-135deg);*/
  }

  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      /*transform: rotate(45deg);*/
  }

  /*ドットナビゲーションの設定*/

  .slick-dots button {
      color: transparent;
      outline: none;
      width:100px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:0;
      background:#fff;/*ドットボタンの色*/
      border: none;
  }

  .slick-dots {
    position: relative;
    z-index: 100;
      text-align:center;
    margin:-50px 0 0 0;
  }

}

/*-------------------
タブレット_横
-------------------*/
@media all and (min-width: 1025px) and (max-width: 1400px) {

  /*==================================================
  スライダーのためのcss
  ===================================*/

  .slider {
      position:relative;
    /*z-index: 10;*/
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    /*height: 95vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/

  .slider-item01 {
      background:url(../img/top/topimg1.jpg);
  }

  .slider-item02 {
      background:url(../img/top/topimg2.jpg);
  }

  .slider-item03 {
      background:url(../img/top/topimg3.jpg);
  }

  .slider-item04 {
      background:url(../img/top/topimg4.jpg);
  }

  .slider-item05 {
      background:url(../img/top/topimg5.jpg);
  }

  .slider-item06 {
      background:url(../img/top/topimg6.jpg);
  }

  .slider-item07 {
      background:url(../img/top/topimg7.jpg);
  }

  .slider-item08 {
      background:url(../img/top/topimg8.jpg);
  }

  .slider-item09 {
      background:url(../img/top/topimg9.jpg);
  }

  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height: 65vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: right bottom;/*背景画像の位置を中央に*/
      background-size: contain;/*背景画像が.slider-item全体を覆い表示*/
  }

  /*矢印の設定*/

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
      position: absolute;/*絶対配置にする*/
      z-index: 100;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      /*border-top: 5px solid #fff;/*矢印の色*/
      /*border-right: 5px solid #fff;/*矢印の色*/
      height: 50px;
      width: 50px;
  }

  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      /*transform: rotate(-135deg);*/
  }

  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      /*transform: rotate(45deg);*/
  }

  /*ドットナビゲーションの設定*/

  .slick-dots button {
      color: transparent;
      outline: none;
      width:100px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:0;
      background:#fff;/*ドットボタンの色*/
      border: none;
  }

  .slick-dots {
    position: relative;
    z-index: 100;
      text-align:center;
    margin:-50px 0 0 0;
  }

}




/*-------------------
ＰＣ
-------------------*/
@media all and (min-width: 1401px){

  /*==================================================
  スライダーのためのcss
  ===================================*/

  .slider {
      position:relative;
    /*z-index: 10;*/
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    /*height: 95vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/

  .slider-item01 {
      background:url(../img/top/topimg1.jpg);
  }

  .slider-item02 {
      background:url(../img/top/topimg2.jpg);
  }

  .slider-item03 {
      background:url(../img/top/topimg3.jpg);
  }

  .slider-item04 {
      background:url(../img/top/topimg4.jpg);
  }

  .slider-item05 {
      background:url(../img/top/topimg5.jpg);
  }

  .slider-item06 {
      background:url(../img/top/topimg6.jpg);
  }

  .slider-item07 {
      background:url(../img/top/topimg7.jpg);
  }

  .slider-item08 {
      background:url(../img/top/topimg8.jpg);
  }

  .slider-item09 {
      background:url(../img/top/topimg9.jpg);
  }

  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:95vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }

  /*矢印の設定*/

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
      position: absolute;/*絶対配置にする*/
      z-index: 100;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      /*border-top: 5px solid #fff;/*矢印の色*/
      /*border-right: 5px solid #fff;/*矢印の色*/
      height: 50px;
      width: 50px;
  }

  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      /*transform: rotate(-135deg);*/
  }

  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      /*transform: rotate(45deg);*/
  }

  /*ドットナビゲーションの設定*/

  .slick-dots button {
      color: transparent;
      outline: none;
      width:100px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:0;
      background:#fff;/*ドットボタンの色*/
      border: none;
  }

  .slick-dots {
    position: relative;
    z-index: 100;
      text-align:center;
    margin:-50px 0 0 0;
  }

}
/*-------------------
印刷用
-------------------*/
@media print{

  /*==================================================
  スライダーのためのcss
  ===================================*/

  .slider {
      position:relative;
    /*z-index: 10;*/
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    /*height: 95vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/

  .slider-item01 {
      background:url(../img/top/topimg1.jpg);
  }

  .slider-item02 {
      background:url(../img/top/topimg2.jpg);
  }

  .slider-item03 {
      background:url(../img/top/topimg3.jpg);
  }

  .slider-item04 {
      background:url(../img/top/topimg4.jpg);
  }

  .slider-item05 {
      background:url(../img/top/topimg5.jpg);
  }

  .slider-item06 {
      background:url(../img/top/topimg6.jpg);
  }

  .slider-item07 {
      background:url(../img/top/topimg7.jpg);
  }

  .slider-item08 {
      background:url(../img/top/topimg8.jpg);
  }

  .slider-item09 {
      background:url(../img/top/topimg9.jpg);
  }

  .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:95vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }

  /*矢印の設定*/

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
      position: absolute;/*絶対配置にする*/
      z-index: 100;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      /*border-top: 5px solid #fff;/*矢印の色*/
      /*border-right: 5px solid #fff;/*矢印の色*/
      height: 50px;
      width: 50px;
  }

  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      /*transform: rotate(-135deg);*/
  }

  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      /*transform: rotate(45deg);*/
  }

  /*ドットナビゲーションの設定*/

  .slick-dots button {
      color: transparent;
      outline: none;
      width:100px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:0;
      background:#fff;/*ドットボタンの色*/
      border: none;
  }

  .slick-dots {
    position: relative;
    z-index: 100;
      text-align:center;
    margin:-50px 0 0 0;
  }

}


/*-------------------
共通
-------------------*/

/*==================================================
スライダーのためのcss
===================================*/

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}



.slick-dots .slick-active button{
    background:#99b4c4;/*ドットボタンの現在地表示の色*/
}

/*========= レイアウトのためのCSS ===============*/
ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #fff;
}

a:hover,
a:active{
  text-decoration: none;
}

h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:6vw;
  letter-spacing: 0.1em;
}

.wrapper{
  position: relative;
}

.container{

}

/*.container p{
  padding: 300px 0;
  text-align: center;
  color: #fff;
}*/