@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 : top.css
Description : トップ
===================================================================== */
.main {
  background: none;
}

.top_area {
  background: url(../images/common/bg_texture.jpg) repeat center/12.8rem auto;
}

/* =====================================================================
    header
======================================================================*/
@media screen and (max-width: 767px) {
  .header {
    padding: 0;
  }
  .header h1 {
    display: none;
  }
  .mv {
    padding-bottom: 5rem;
    background: url(../images/common/bg_texture1-sp.png) no-repeat center bottom/auto 3rem;
  }
  .mv h1 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 2.4rem 0 0 3.4rem;
    width: 51.7rem;
    z-index: 1;
  }
}
.mv {
  position: relative;
}

.mv_slider_main,
.mv_slider_thumbnail {
  display: none;
}
.mv_slider_main.slick-initialized,
.mv_slider_thumbnail.slick-initialized {
  display: block;
  /*slick-initializedが付与されたら表示*/
}

.mv_slider_thumbnail .slick-track {
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}
.mv_slider_thumbnail .slick-slide {
  position: relative;
  margin-left: -7.5rem;
  width: 34.9rem !important;
  -webkit-clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%);
          clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%);
}
.mv_slider_thumbnail .slick-slide::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.mv_slider_thumbnail .slick-slide.slick-current::after {
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .header {
    position: absolute;
    top: 0;
    left: 0;
  }
  .mv_slider {
    position: relative;
  }
  .mv_slider_main {
    margin-left: auto;
    width: calc(100% - 180px);
    max-width: calc(1280 / 1600 * 100%);
    z-index: 2;
  }
  .mv_slider_thumbnail {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  .mv_slider_thumbnail .slick-track {
    -webkit-transform: translate(0) !important;
            transform: translate(0) !important;
  }
  .mv_slider_thumbnail .slick-slide {
    float: none;
    margin-left: 0;
    width: 32rem !important;
    min-width: 180px;
    -webkit-clip-path: polygon(28% 0, 100% 0%, 100% 100%, 0 100%) !important;
            clip-path: polygon(28% 0, 100% 0%, 100% 100%, 0 100%) !important;
    cursor: pointer;
  }
}
/* =====================================================================
    head
======================================================================*/
.banner_head {
  padding-top: 5rem;
}

@media screen and (min-width: 768px) {
  .banner_head .banner_list {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .banner_head .banner_list li {
    width: 36rem;
  }
}
/* =====================================================================
    news
======================================================================*/
.news_banner {
  position: relative;
  padding: 5rem 0 14rem;
}
.news_banner::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 25.4rem);
  background: url(../images/top/bg_texture2-sp.png) no-repeat center bottom/100% 100%;
}

.top_ttl {
  position: relative;
  overflow: hidden;
}
.top_ttl span {
  position: relative;
  display: inline-block;
  bottom: -0.08em;
  padding-left: 2rem;
  font-family: "BAHNSCHRIFT", sans-serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 12.4rem;
  letter-spacing: 0;
  border-left: 5rem solid;
  mix-blend-mode: darken;
}
.top_ttl span::after {
  content: "";
  position: absolute;
  display: block;
  top: 52%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  border-top: 1.5px solid #ffffff;
}

.news {
  width: 70rem;
}

#smoke-widget {
  position: relative;
  overflow: hidden;
}
#smoke-widget .smoke {
  position: absolute;
  bottom: -300px;
  left: 50%;
  background: #ffb03a;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-animation: smoke 2s 1;
          animation: smoke 2s 1;
  animation-direction: reverse;
  pointer-events: none;
}

@-webkit-keyframes smoke {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
    opacity: 0;
  }
}

@keyframes smoke {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
    opacity: 0;
  }
}
.news_list {
  padding: 6rem 0;
  background: #000;
}
.news_list li {
  position: relative;
  margin: 0 0 4rem 8rem;
  padding: 0 0 5rem;
  width: 57rem;
  color: #ffffff;
}
.news_list li::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: calc(100% - 5rem);
  border-bottom: 1px solid #ff4500;
}
.news_list li::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  border-bottom: 1px solid #ff4500;
  -webkit-transform: skewY(-45deg);
          transform: skewY(-45deg);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.news_list li:last-child {
  margin-bottom: 0;
}
.news_list li a {
  position: relative;
  color: #ffffff;
  z-index: 1;
}
.news_list li time {
  display: block;
  margin-bottom: 0.3em;
  font-family: "Orbitron", sans-serif;
  font-size: 86%;
  color: #ff4500;
}
.news_list li p {
  line-height: 1.666;
}

.banner {
  margin-top: 10rem;
}

@media screen and (min-width: 768px) {
  .news_banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 6rem 0 18.3rem;
  }
  .news_banner::before {
    height: calc(100% - 19rem);
    background-image: url(../images/top/bg_texture2-pc.png);
  }
  .news_banner .inner {
    width: 100%;
    min-width: auto;
  }
  .news {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: calc(900 / 1600 * 100%);
  }
  .news .top_ttl span {
    font-size: 8.6rem;
    border-left-width: 32rem;
  }
  .top_ttl span {
    bottom: -0.18em;
    padding-left: 1.4rem;
    border-left-width: 2.6rem;
  }
  .top_ttl span::after {
    top: 44%;
  }
  .news_list {
    padding: 3.7rem 0;
  }
  .news_list li {
    margin: 0 0 3rem 32rem;
    padding: 0 5rem 2rem 0;
    width: 58.8888888889%;
  }
  .news_list li a:hover {
    color: #ff4500;
  }
  .banner {
    margin: 0 0 0 calc(70 / 1600 * 100%);
    width: calc(330 / 1600 * 100%);
  }
  .banner .banner_list {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
/* =====================================================================
    nextstory
======================================================================*/
.nextstory {
  padding-bottom: 10rem;
}

.nextstory_ttl {
  margin: -4.3rem 0 5.2rem -4.9rem;
  width: 75.4rem;
}

.nextstory_movie {
  margin: 0 calc(50% - 50vw) 6rem;
}

.nextstory_date {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2rem;
  margin-left: calc(-50 / 650 * 100%);
  padding: 1.3rem 5rem;
  color: #ff4500;
  background-color: #000;
}
.nextstory_date dd {
  margin-left: 0.8em;
  font-family: "Orbitron", sans-serif;
}

.nextstory_subttl {
  position: relative;
  margin-bottom: 8rem;
}
.nextstory_subttl::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;
}
.nextstory_subttl h3 {
  position: relative;
  display: block;
  padding: 3rem 0;
  font-family: "Noto Serif JP", serif;
  font-size: 114%;
  color: #ffffff;
  line-height: 1.562;
  z-index: 2;
}

.nextstory_txt {
  margin-bottom: 6rem;
  line-height: 2;
}

.btn_nextstory {
  width: 54rem;
}

@media screen and (min-width: 768px) {
  .nextstory {
    padding-bottom: 18rem;
    padding-bottom: calc(180 / 1280 * 100%);
  }
  .nextstory .inner {
    width: 100%;
    max-width: none;
  }
  .nextstory_ttl {
    margin: -6.7rem 0 0 8.5rem;
  }
  .nextstory_inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .nextstory_inner_right {
    min-width: 300px;
    width: calc(500 / 1600 * 100%);
  }
  .nextstory_movie {
    margin: 0;
    width: calc(800 / 1600 * 100%);
  }
  .nextstory_date {
    margin-left: 0;
    padding: 1rem 3rem;
  }
  .nextstory_subttl {
    margin-bottom: 4rem;
  }
  .nextstory_subttl::before {
    margin: 0;
  }
  .nextstory_subttl h3 {
    margin-left: 3rem;
    font-size: 135%;
    line-height: 2;
  }
  .nextstory_txt {
    margin: 0 0 0 4rem;
  }
  .btn_nextstory {
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(520 / 1600 * 100%) 0 0 calc(200 / 1600 * 100%);
    width: 39rem;
    min-width: 240px;
  }
}
/* =====================================================================
    sns
======================================================================*/
.sns {
  padding: 8rem 0 32rem;
}
.sns .top_ttl {
  margin: 0 0 7.2rem -5rem;
}

.twitter_widget {
  position: relative;
  margin-bottom: 6rem;
  width: 63rem;
}
.twitter_widget::before {
  content: "";
  position: absolute;
  display: block;
  bottom: -2rem;
  right: -2rem;
  width: 100%;
  height: 100%;
  background: url(../images/common/bg_texture5.png) repeat-y center/100% auto;
}
.twitter_widget > * {
  position: relative;
  z-index: 1;
}

.sns_list {
  width: 63rem;
}
.sns_list li {
  width: 100%;
}
.sns_list li:not(:last-child) {
  margin-bottom: 4rem;
}

@media screen and (min-width: 768px) {
  .sns {
    padding: 5rem 0 30rem;
  }
  .sns .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .sns .top_ttl {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: calc(440 / 1000 * 100%);
  }
  .twitter_widget {
    position: relative;
    margin: 0 calc(60 / 1000 * 100%) 0 0;
    width: calc(480 / 1000 * 100%);
  }
  .sns_list {
    padding-top: 20rem;
    width: calc(440 / 1000 * 100%);
  }
}/*# sourceMappingURL=top.css.map */