@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップ
===================================================================== */
@-webkit-keyframes text_grade {
  0%, 100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
@keyframes text_grade {
  0%, 100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
/* =====================================================================
    article-list
======================================================================*/
.article-list-wrap {
  position: relative;
  margin: 0 calc(50% - 50vw);
  overflow-y: hidden;
  overflow-x: scroll;
}
.article-list-wrap.noScroll {
  margin: 0 auto;
  overflow-x: unset;
}
.article-list-wrap.noScroll ul {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.article-list-wrap.noScroll ul li {
  margin: 0;
}
.article-list-wrap .article-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 140rem;
  padding: 0 6rem 2rem;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  z-index: 2;
}
.article-list-wrap .article-list li {
  position: relative;
  width: 41rem;
  margin-right: 7rem;
}
.article-list-wrap .article-list-date {
  padding-bottom: 0.2em;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  border-bottom: 1px solid currentColor;
}

@media screen and (min-width: 768px) {
  .article-list-wrap {
    overflow: unset;
    margin: 0 auto;
    padding: 0;
  }
  .article-list-wrap .article-list {
    width: 100%;
    padding: 0;
  }
  .article-list-wrap .article-list li {
    margin: 0 calc(80 / 1024 * 100%) 0 0;
    width: calc(288 / 1024 * 100%);
  }
  .article-list-wrap .article-list li:last-child {
    margin: 0;
  }
}
/* =====================================================================
    mv
======================================================================*/
@media screen and (min-width: 768px) {
  .mv {
    overflow: hidden;
    z-index: 1;
  }
  .mv::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: url(../images/top/img_mv-pc.jpg) no-repeat center/cover;
    -webkit-filter: blur(25px) contrast(50%);
            filter: blur(25px) contrast(50%);
    z-index: -1;
  }
  .mv h1 {
    margin: 0 auto;
    max-width: 1166px;
  }
}
/* =====================================================================
    banner2
======================================================================*/
.banner2 {
  padding: 12rem 0 1rem;
  background-color: #a7abb2;
}
@media screen and (max-width: 767px) {
  .banner2 .banner-list {
    margin: 0 calc(50% - 50vw);
  }
  .banner2 .banner-list li:nth-child(-n+2) {
    margin-top: 0;
  }
}
.banner2 .banner-list li {
  margin: 3rem calc(15 / 750 * 100%) 0;
  width: calc(330 / 750 * 100%);
}
.banner2 .banner-list li a {
  -webkit-box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
          box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
}

@media screen and (min-width: 768px) {
  .banner2 .banner-list li {
    margin: 4rem calc(45 / 1024 * 100%) 0 0;
    width: calc(220 / 1024 * 100%);
  }
  .banner2 .banner-list li:nth-child(4n) {
    margin-right: 0;
  }
  .banner2 .banner-list li:nth-child(-n+4) {
    margin-top: 0;
  }
}
/* =====================================================================
    news
======================================================================*/
.news {
  padding: 12rem 0;
  background-color: #a7abb2;
}
.news-list li h4 {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .news-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: 0.8rem;
    margin-right: calc(44 / 1024 * 100%) !important;
    width: calc(312 / 1024 * 100%) !important;
  }
  .news-list li .article-list-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 3rem;
  }
  .news-list li figure {
    margin-bottom: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 31.5%;
  }
  .news-list li h4 {
    top: -0.2em;
    width: 60.5%;
  }
}
/* =====================================================================
    nextstory
======================================================================*/
.nextstory {
  padding: 20rem 0 16rem;
}
.nextstory .movie_embed {
  margin-left: calc(-5 / 680 * 100%);
  width: calc(680 / 680 * 100%);
  -webkit-box-shadow: 0 1rem 6rem 0 #000;
          box-shadow: 0 1rem 6rem 0 #000;
}
.nextstory-movie {
  position: relative;
  margin-bottom: 2.5em;
  border: 1px solid #36dd7f;
  -o-border-image: linear-gradient(46deg, #ee5c66 0%, #f28f64 15%, #f0f06e 30%, #aff464 42%, #36dd7f 57%, #5fe0fa 71%, #5e6dfb 85%, #ae67f7 100%);
     border-image: linear-gradient(46deg, #ee5c66 0%, #f28f64 15%, #f0f06e 30%, #aff464 42%, #36dd7f 57%, #5fe0fa 71%, #5e6dfb 85%, #ae67f7 100%);
  border-image-slice: 1;
  -webkit-box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
          box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
}
.nextstory-subttl {
  text-align: center;
  margin-bottom: 1em;
}
.nextstory-subttl span {
  display: inline-block;
  padding: 0.3em 0.6em;
  padding-right: 0.4em;
  font-size: 133%;
  letter-spacing: 0.2em;
  color: #ffffff;
  background-color: #5e728b;
}
.nextstory-date {
  text-align: center;
  margin-bottom: 1.2em;
  font-size: 153%;
}
.nextstory-text {
  font-family: "Noto Serif JP", system-ui;
  line-height: 1.8;
}
.nextstory-btn {
  margin-top: 2em;
}

@media screen and (min-width: 768px) {
  .nextstory {
    padding: 12rem 0;
  }
  .nextstory-movie {
    margin-left: auto;
    margin-right: auto;
    width: calc(800 / 1024 * 100%);
  }
  .nextstory-subttl {
    font-size: 155%;
  }
  .nextstory-date {
    font-size: 200%;
  }
}
/* =====================================================================
    movie & topics
======================================================================*/
.movie_topics {
  position: relative;
  padding: 18rem 0;
  background: url(../images/common/bg_pattern_blue.jpg) repeat top center/100% auto;
}
.movie_topics .sec-ttl .ja {
  color: #ffffff;
}
.movie_topics .sec-ttl .ja::before {
  -webkit-filter: brightness(1) grayscale(0);
          filter: brightness(1) grayscale(0);
}
.movie_topics .sec-ttl .en {
  color: #5e728b;
}
.movie_topics .article-list figure img {
  -webkit-box-shadow: 0 1rem 2rem 1rem rgba(30, 45, 63, 0.2);
          box-shadow: 0 1rem 2rem 1rem rgba(30, 45, 63, 0.2);
}
.movie_topics .article-list h4 {
  color: #ffffff;
}
.movie_topics .btn1 {
  margin-top: 2em;
}

.movie {
  padding-bottom: 22rem;
}

@media screen and (min-width: 768px) {
  .movie_topics {
    padding: 12rem 0;
  }
}
/* =====================================================================
    banner1
======================================================================*/
.banner1 {
  padding: 7rem 0;
  background-color: #a7abb2;
}
.banner1 .banner-list li {
  width: 100%;
}
.banner1 .banner-list li a {
  -webkit-box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
          box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
}

@media screen and (min-width: 768px) {
  .banner1 {
    padding: 5.6rem 0;
  }
  .banner1 .banner-list li {
    width: calc(704 / 1024 * 100%);
  }
}
/* =====================================================================
    sns
======================================================================*/
.sns {
  padding: 12rem 0;
  overflow: visible;
}
.sns::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 78rem);
  background: url(../images/common/bg_ribbon_bottom-sp.jpg) no-repeat center/cover;
}
.sns .sec-ttl .ja {
  color: #000000;
}
.sns .sec-ttl .ja::before {
  -webkit-filter: brightness(3) grayscale(1);
          filter: brightness(3) grayscale(1);
}
.sns .sec-ttl .en {
  color: #ffffff;
}
.sns-widget {
  padding: 3rem;
  background-color: rgba(239, 245, 249, 0.5);
  border: 1px solid #36dd7f;
  -o-border-image: linear-gradient(260deg, #ee5c66 0%, #f28f64 15%, #f0f06e 30%, #aff464 42%, #36dd7f 57%, #5fe0fa 71%, #5e6dfb 85%, #ae67f7 100%);
     border-image: linear-gradient(260deg, #ee5c66 0%, #f28f64 15%, #f0f06e 30%, #aff464 42%, #36dd7f 57%, #5fe0fa 71%, #5e6dfb 85%, #ae67f7 100%);
  border-image-slice: 1;
  -webkit-box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
          box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
}
.sns-list {
  margin-top: 8rem;
}
.sns-list li:not(:last-child) {
  margin-bottom: 4rem;
}
.sns-list li a {
  -webkit-box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
          box-shadow: 0 1rem 2rem 1rem rgba(105, 126, 126, 0.2);
}

@media screen and (min-width: 768px) {
  .sns::before {
    height: calc(100% + 65rem);
    background-image: url(../images/common/bg_ribbon_bottom-pc.jpg);
  }
  .sns-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .sns-widget {
    width: calc(512 / 1024 * 100%);
  }
  .sns-list {
    margin-top: 0;
    width: calc(432 / 1024 * 100%);
  }
  .sns-list li:not(:last-child) {
    margin-bottom: 4rem;
  }
}
/* =====================================================================
*    hulu_popup
* =================================================================== */
.hulu-popup {
  display: none;
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  .hulu-popup {
    font-size: 120%;
  }
}
.hulu-popup-inner {
  position: relative;
  -ms-flex-item-align: start;
      align-self: flex-start;
  text-align: center;
  margin: auto;
  width: calc(650 / 750 * 100%);
  max-width: 650px;
  height: auto;
  color: #ffffff;
  background: #3c4e64;
}
.hulu-popup-inner .sec-ttl {
  margin-bottom: 0;
  padding: calc(50 / 650 * 100%) 0 1em;
  font-size: 2.8rem;
}
.hulu-popup-inner .sec-ttl .ja {
  margin-bottom: -1.6em;
}
.hulu-popup-inner .sec-ttl .en {
  color: #4f6580;
}
.hulu-popup-inner h3 {
  position: relative;
  margin-bottom: calc(50 / 650 * 100%);
  font-size: 133%;
  line-height: 1.3;
  letter-spacing: 0;
}
.hulu-popup-inner h3 span {
  display: block;
  font-weight: 700;
  line-height: 1.2;
}
.hulu-popup-inner h3 .ja {
  font-size: 200%;
  color: #d43656;
}
.hulu-popup-inner h3 .en {
  margin-top: 0.2em;
}
.hulu-popup-img {
  position: relative;
}
.hulu-popup-btn, .hulu-popup-link {
  margin: 0 auto;
  width: calc(460 / 650 * 100%);
}
.hulu-popup-btn a, .hulu-popup-link a {
  padding: 2.5rem 0;
  font-size: 100%;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.hulu-popup-btn {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
}
.hulu-popup-btn a {
  background-color: rgba(239, 245, 249, 0.9);
}
.hulu-popup-link a {
  color: #ffffff;
  border: 0;
  background: -webkit-gradient(linear, left top, right top, from(#722026), color-stop(27%, #6e6e27), color-stop(57%, #167a42), color-stop(82%, #2a338c), to(#3a264f));
  background: linear-gradient(to right, #722026 0%, #6e6e27 27%, #167a42 57%, #2a338c 82%, #3a264f 100%);
}
.hulu-popup-bottom {
  padding: calc(38 / 650 * 100%) 0;
  background: #1f242a;
}
.hulu-popup-txt2 {
  margin-bottom: calc(25 / 650 * 100%);
}
.hulu-popup-txt2 img {
  margin: 0 auto;
  width: calc(411 / 650 * 100%);
}
.hulu-popup-check {
  padding: calc(35 / 650 * 100%) 0;
  background: #3c4e64;
}
.hulu-popup-check input {
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}
.hulu-popup-check span {
  font-size: 86%;
}
.hulu-popup-close {
  position: absolute;
  bottom: -2.5em;
  width: 100%;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .hulu-popup-inner {
    width: calc(650 / 1600 * 100%);
    max-width: 650px;
  }
  .hulu-popup-btn a, .hulu-popup-link a {
    width: 100%;
  }
  .hulu-popup-check label {
    cursor: pointer;
  }
  .hulu-popup-close:hover {
    opacity: 0.7;
  }
}/*# sourceMappingURL=top.css.map */