@charset "utf-8";
/* CSS Document */
/*==============================
★　STORY　★
==============================*/
#story {
  width: 80%; /*bodyのinnerを100%にして、中央よせのため80%*/
  margin: 0 auto;
  margin-top: 200px;
}
.story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 98%;
}
.story-bg {
  display: block;
  width: 40%;
  height: 360px;
  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 {
  width: 60%;
  height: 150px;
  border: 1px solid #D8D8D8;
  position: absolute;
  top: 30px;
  left: 80px;
}
.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/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 p {
  margin-top: 5px;
  text-align: center;
}
/*.story-slider img {
  width: 100%; スライダー内の画像を横幅100%に
  height: auto;
}*/
/*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;
}
/*==============================
〇　STORY - TABLET　〇
==============================*/
@media screen and (max-width: 1200px) {
  #story {
    width: 90%; /*bodyのinnerを100%にして、中央よせのため80%*/
    margin: 0 auto;
    margin-top: 200px;
  }
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 98%;
    margin: 0 auto;
  }
  .story-bg {
    display: block;
    width: 40%;
    height: 360px;
    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 {
    width: 60%;
    height: 150px;
    position: absolute;
    top: 30px;
    left: 20%;
  }
  #story p {
    margin-top: 3px;
  }
}
/*==============================
〇　STORY - TABLET　〇
==============================*/
@media screen and (max-width: 821px) {
  #story {
    width: 90%; /*bodyのinnerを100%にして、中央よせのため80%*/
    margin: 0 auto;
    margin-top: 200px;
  }
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 98%;
    margin: 0 auto;
  }
  .story-bg {
    display: block;
    width: 40%;
    height: 360px;
    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 {
    width: 65%;
    height: 120px;
    position: absolute;
    top: 30px;
    left: 20%;
  }
}
/*==============================
〇　STORY - SP　〇
==============================*/
@media screen and (max-width: 650px) {
  #story {
    width: 100%; /*bodyのinnerを100%にして、中央よせのため80%*/
    margin: 0 auto;
    margin-top: 180px;
  }
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 60%;
    margin: 0 auto;
  }
  .story-bg {
    display: block;
    width: 60%;
    height: 330px;
    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 {
    width: 60%;
    height: 120px;
    position: absolute;
    top: 30px;
    left: 20%;
  }
}
/*==============================
〇　STORY - SP　〇
==============================*/
@media screen and (max-width: 426px) {
  #story {
    width: 90%; /*bodyのinnerを100%にして、中央よせのため80%*/
    margin: 0 auto;
    margin-top: 180px;
  }
  .story-slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 98%;
    margin: 0 auto;
  }
  .story-bg {
    display: block;
    width: 300px;
    height: 320px;
    position: relative;
  }
  .story-pic-01, .story-pic-02, .story-pic-03, .story-pic-04, .story-pic-05, .story-pic-06 {
    width: 170px;
    height: 120px;
    position: absolute;
    top: 30px;
    left: 23%;
  }
}