@charset "UTF-8";
@font-face {
  font-family: "BAHNSCHRIFT";
  src: url("../fonts/BAHNSCHRIFT.woff") format("woff"), url("../fonts/BAHNSCHRIFT.TTF") format("truetype");
}
/* CSS INFORMATION -====================================================
File name : story.css
Description : ストーリー
===================================================================== */
/* =====================================================================
    story
======================================================================*/
.story_head {
  position: relative;
  margin-bottom: 3.4rem;
}
.story_head::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  background-color: #000;
  z-index: 1;
}
.story_head > *:not(.slash) {
  position: relative;
  z-index: 2;
}
.story_head_num {
  text-align: center;
  padding: 4rem 0;
  font-size: 86%;
  font-weight: 700;
  color: #ff4500;
}
.story_head_num span {
  margin: 0 0.2em;
  font-family: "Orbitron", sans-serif;
  font-size: 233%;
}
.story_head_ttl {
  padding-bottom: 5rem;
  font-family: "Noto Serif JP", serif;
  font-size: 114%;
  color: #ffffff;
  line-height: 1.75;
}

.story_date {
  text-align: right;
  margin-bottom: 8rem;
}
.story_date span {
  position: relative;
  display: inline-block;
  padding: 2rem 5rem;
  padding-left: 9rem;
  font-size: 107%;
  font-weight: 700;
}
.story_date span::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: calc(100% + 20vw);
  height: 100%;
  background: url(../images/common/bg_texture5.png) no-repeat center/cover;
  -webkit-clip-path: polygon(6rem 0%, 100% 0%, 100% 100%, 0 100%);
          clip-path: polygon(6rem 0%, 100% 0%, 100% 100%, 0 100%);
  z-index: -1;
}

.story_txt {
  margin-bottom: 8rem;
  line-height: 2;
}

.story_bottom {
  position: relative;
  padding-bottom: 10rem;
}
.story_bottom::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: calc(100% - 26rem);
  background-color: #000;
  z-index: -1;
}
.story_bottom::after {
  content: "";
  position: absolute;
  display: block;
  bottom: calc(100% - 27rem);
  left: 0;
  margin: 0 calc(50% - 50vw) 0;
  width: 100vw;
  height: 8.4rem;
  background: url(../images/common/bg_texture4-sp.png) no-repeat top center/cover;
  z-index: -1;
}

:is(.story_movie_wrap, .story_movie) {
  position: relative;
}
:is(.story_movie_wrap, .story_movie)::before, :is(.story_movie_wrap, .story_movie)::after {
  content: "";
  position: absolute;
  display: block;
  width: 7.6rem;
  height: 7.6rem;
  background: url(../images/common/img_brackets.png) no-repeat center/contain;
}

.story_movie_wrap {
  margin: 0 0 12rem calc(-42 / 650 * 100%);
  width: calc(734 / 650 * 100%);
}
.story_movie_wrap::before {
  top: 0;
  left: 0;
}
.story_movie_wrap::after {
  top: 0;
  right: 0;
  transform: scale(-1, 1);
}

.story_movie {
  padding: 1.2rem;
}
.story_movie::before {
  bottom: 0;
  left: 0;
  transform: scale(1, -1);
}
.story_movie::after {
  bottom: 0;
  right: 0;
  transform: scale(-1, -1);
}

.story_photo {
  display: none;
}
.story_photo.slick-initialized {
  /*slick-initializedが付与されたら表示*/
  display: block;
}
.story_photo .slick-list {
  margin: 0 auto;
  width: calc(560 / 650 * 100%);
}
.story_photo .slick-arrow {
  position: absolute;
  display: block;
  top: 28%;
  width: calc(40 / 650 * 100%);
  padding-top: calc(100 / 650 * 100%);
  background: url(../images/common/btn_arrow.png) no-repeat center/contain;
  z-index: 3;
}
.story_photo .slick-arrow.slick-disabled {
  display: none !important;
}
.story_photo .slick-arrow.prev {
  left: -2.5rem;
}
.story_photo .slick-arrow.next {
  right: -2.5rem;
  transform: scale(-1, 1);
}
.story_photo .slick-dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}
.story_photo .slick-dots li {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
}
.story_photo .slick-dots li button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
}
.story_photo .slick-dots li button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff4500;
  transition: 0.5s ease;
}
.story_photo .slick-dots li.slick-active button::before {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px #ff4500;
}

@media screen and (min-width: 768px) {
  .story_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
  }
  .story_head::before {
    margin: 0 0 0 calc(-40 / 940 * 100%);
    width: calc(1280 / 940 * 100%);
  }
  .story_head_num {
    flex-shrink: 0;
    padding: 3rem 0;
    font-size: 100%;
  }
  .story_head_ttl {
    flex-grow: 1;
    margin-left: calc(50 / 940 * 100%);
    padding: 3rem 0;
    font-size: 122%;
  }
  .story_date {
    margin-bottom: 4rem;
  }
  .story_date span {
    padding: 1.5rem 0;
    padding-left: 8rem;
    font-size: 112%;
  }
  .story_txt {
    margin-bottom: 4rem;
  }
  .story_bottom {
    padding-bottom: 5.6rem;
  }
  .story_bottom::before {
    margin: 0;
    width: 100%;
    height: calc(100% - 17rem);
  }
  .story_bottom::after {
    bottom: calc(100% - 17rem);
    margin: 0;
    width: 100%;
    height: 11.5rem;
  }
  .story_movie_wrap {
    margin: 0 auto 5rem;
    width: calc(824 / 940 * 100%);
  }
  .story_photo .slick-list {
    width: calc(560 / 940 * 100%);
  }
  .story_photo .slick-arrow {
    top: 32%;
    width: calc(30 / 940 * 100%);
    padding-top: calc(80 / 940 * 100%);
    cursor: pointer;
    transition: 0.3s ease;
  }
  .story_photo .slick-arrow.prev {
    left: 0;
    margin-left: calc(140 / 940 * 100%);
  }
  .story_photo .slick-arrow.next {
    right: 0;
    margin-right: calc(140 / 940 * 100%);
  }
  .story_photo .slick-arrow:hover.prev {
    transform: translateX(-2rem);
  }
  .story_photo .slick-arrow:hover.next {
    transform: translateX(2rem) scale(-1, 1);
  }
}
/* =====================================================================
    backnumber
======================================================================*/
#subpage .main {
  padding-bottom: 0;
}

.backnumber {
  margin-top: 6rem;
  padding-bottom: 40rem;
}
.backnumber::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 7.9rem);
  background: url(../images/common/bg_texture8.jpg) repeat top left 9.2rem/88.9rem auto;
}

.backnumber_ttl {
  margin: 0 0 14.3rem calc(-50 / 650 * 100%);
  width: calc(700 / 650 * 100%);
}

.backnumber_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.backnumber_list li {
  margin: 0 0 calc(30 / 650 * 100%);
  width: calc(310 / 650 * 100%);
}
.backnumber_list li dt {
  margin-left: auto;
  padding: 1rem 2rem;
  text-align: right;
  width: 58.064516129%;
  font-size: 2.4rem;
  color: #ffffff;
  background-color: #000;
  -webkit-clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0 100%);
          clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0 100%);
}
.backnumber_list li dt span {
  margin: 0 0.3em;
  font-family: "Orbitron", sans-serif;
  font-size: 107%;
}

@media screen and (min-width: 768px) {
  .backnumber {
    margin-top: 7.7rem;
    padding-bottom: 20rem;
  }
  .backnumber::before {
    margin: 0 0 0 calc(-40 / 940 * 100%);
    width: calc(1280 / 940 * 100%);
    height: calc(100% - 6.2rem);
  }
  .backnumber_ttl {
    margin: 0 0 8.3rem calc(-40 / 940 * 100%);
    width: calc(680 / 940 * 100%);
  }
  .backnumber_list {
    justify-content: flex-start;
  }
  .backnumber_list li {
    margin: 0 calc(12 / 940 * 100%) calc(25 / 940 * 100%);
    width: calc(164 / 940 * 100%);
    min-width: 120px;
  }
  .backnumber_list li a:hover {
    transform: scale(1.05);
  }
  .backnumber_list li dt {
    padding: 0.5rem 1rem;
    width: 60.9756097561%;
    min-width: 98px;
    font-size: 75%;
    -webkit-clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0 100%);
            clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0 100%);
  }
}
/*# sourceMappingURL=story.css.map */