@charset "utf-8";
/* CSS Document */
/*==============================
==============================
★　STORY　★
==============================
==============================*/
#story {
  /*border: 3px solid blue;*/
  width: 100%; /*bodyのinnerを100%にして、中央よせのため80%*/
}
.story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 1260px;
  margin: 0 auto;
}
.story-bg {
  display: block;
  max-width: 400px;
  height: 370px;
  border: 1px solid #D8D8D8;
  background: url("../images/story-bg.png")no-repeat center/cover;
  position: relative;
}
.story-pic-01, .story-pic-02, .story-pic-03, .story-pic-04, .story-pic-05, .story-pic-06, .story-pic-07, .story-pic-08, .story-pic-09 {
  max-width: 230px;
  height: 140px;
  border: 1px solid #D8D8D8;
  position: absolute;
  top: 30px;
  left: 85px;
}
.story-pic-01 {
  background: url("../images/story-01.jpg")no-repeat center/cover;
}
.story-pic-02 {
  background: url("../images/story-02.webp")no-repeat center/cover;
}
.story-pic-03 {
  background: url("../images/story-03.jpg")no-repeat center/cover;
}
.story-pic-04 {
  background: url("../images/story-04.jpg")no-repeat center/cover;
}
.story-pic-05 {
  background: url("../images/story-05.jpg")no-repeat center/cover;
}
.story-pic-06 {
  background: url("../images/story-06.jpg")no-repeat center/cover;
}
.story-pic-07 {
  background: url("../images/story-07.jpg")no-repeat center 30%/cover;
}
.story-pic-08 {
  background: url("../images/story-08.jpg")no-repeat center/cover;
}
.story-pic-09 {
  background: url("../images/story-09.jpg")no-repeat center/cover;
}
#story h5 {
  font-size: 20px;
  margin-top: 160px;
}
#story p {
  margin-top: 5px;
  text-align: center;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.story-slider .slick-slide {
  margin: 0 10px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #D8D8D8; /*矢印の色*/
  border-right: 2px solid #D8D8D8; /*矢印の色*/
  height: 15px;
  width: 15px;
  opacity: 0.5;
}
.slick-prev:hover, .slick-next:hover {
  opacity: 1.0;
  filter: brightness(150%);
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
  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: #303030; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
  background: #D8D8D8; /*ドットボタンの現在地表示の色*/
  opacity: 0.5;
}
/*==============================
==============================*/
@media screen and (max-width: 1321px) {
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 1140px;
  }
  .story-bg {
    max-width: 360px;
    height: 330px;
  }
  .story-pic-01, .story-pic-02, .story-pic-03, .story-pic-04, .story-pic-05, .story-pic-06, .story-pic-07, .story-pic-08, .story-pic-09 {
    max-width: 200px;
    height: 110px;
    top: 30px;
    left: 80px;
  }
  #story h5 {
    margin-top: 130px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 1210px) {
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 780px;
  }
  .story-bg {
    max-width: 370px;
    height: 340px;
  }
  .story-pic-01, .story-pic-02, .story-pic-03, .story-pic-04, .story-pic-05, .story-pic-06, .story-pic-07, .story-pic-08, .story-pic-09 {
    max-width: 220px;
    height: 130px;
    position: absolute;
    top: 30px;
    left: 75px;
  }
  #story h5 {
    margin-top: 160px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 851px) {
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 420px;
  }
  .story-bg {
    max-width: 400px;
    height: 370px;
  }
  .story-pic-01, .story-pic-02, .story-pic-03, .story-pic-04, .story-pic-05, .story-pic-06, .story-pic-07, .story-pic-08, .story-pic-09 {
    max-width: 230px;
    height: 140px;
    top: 30px;
    left: 85px;
  }
  #story h5 {
    margin-top: 180px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 651px) {
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 320px;
  }
  .story-bg {
    max-width: 300px;
    height: 300px;
  }
  .story-pic-01, .story-pic-02, .story-pic-03, .story-pic-04, .story-pic-05, .story-pic-06, .story-pic-07, .story-pic-08, .story-pic-09 {
    max-width: 160px;
    height: 100px;
    top: 30px;
    left: 70px;
  }
  #story h5 {
    font-size: 16px;
    margin-top: 120px;
  }
  #story p {
    font-size: 14px;
  }
}