@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップ
===================================================================== */
/* =====================================================================
    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 3rem;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  z-index: 2;
}
.article-list-wrap .article-list li {
  position: relative;
}

@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:last-child {
    margin: 0;
  }
}
/* =====================================================================
    mv
======================================================================*/
.mv {
  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: 5vh 0;
  min-height: 100vh;
}
.mv h1 {
  margin: 0 auto;
  padding: 18vh 0;
  width: calc(532 / 750 * 100%);
  max-width: 629px;
}
.mv-date {
  margin: auto 0 0 auto;
  width: calc(550 / 750 * 100%);
  max-width: 550px;
}

@media screen and (orientation: landscape) {
  .mv h1 {
    width: 62.9rem;
  }
  .mv-date {
    margin-right: calc(30 / 1600 * 100%);
    width: 52.5rem;
  }
}
/* =====================================================================
    banner1
======================================================================*/
.banner1 {
  padding: 10rem 0;
  background: url(../images/common/bg_pattern05.jpg) repeat top center/160rem auto;
}
@media screen and (max-width: 767px) {
  .banner1 .banner-list {
    margin: 0 calc(50% - 50vw);
  }
  .banner1 .banner-list li:nth-child(-n+2) {
    margin-top: 0;
  }
}
.banner1 .banner-list li {
  margin: 3rem calc(14 / 750 * 100%) 0;
  width: calc(336 / 750 * 100%);
}

@media screen and (min-width: 768px) {
  .banner1 {
    background-size: 100% auto;
  }
  .banner1 .banner-list li {
    margin: 4rem calc(40 / 1000 * 100%) 0 0;
    width: calc(220 / 1000 * 100%);
  }
  .banner1 .banner-list li:nth-child(-n+4) {
    margin-top: 0;
  }
  .banner1 .banner-list li:last-child, .banner1 .banner-list li:nth-child(4n) {
    margin-right: 0;
  }
}
/* =====================================================================
    news
======================================================================*/
.news {
  padding: 12rem 0;
  background-color: #ffffff;
  overflow: initial;
  z-index: 1;
}
.news::before, .news::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
}
.news::before {
  top: -0.9rem;
  background-image: url(../images/common/bg_sideline_white-t.png);
  background-position: left top;
}
.news::after {
  bottom: -0.9rem;
  background-image: url(../images/common/bg_sideline_white-b.png);
  background-position: right bottom;
}
@media screen and (max-width: 767px) {
  .news-list {
    margin: 0 auto;
    width: calc(550 / 650 * 100%);
  }
}
.news-list-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.news-list li {
  margin-bottom: 7rem;
}
.news-list li figure {
  margin-bottom: 0;
  width: 32.7272727273%;
}
.news-list li .article-list-text {
  width: 60.9090909091%;
}
.news-list li .article-list-date {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #333369;
}
.news-list li .article-list-date p {
  margin-left: 0.5em;
  padding: 0.15em 0.5em 0;
  font-size: 82%;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: #333369;
}
.news-list li .article-list-date p::before {
  display: none;
}
.news-list .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.news-list .slick-dots li {
  display: inline-block;
  margin: 0 0.3em;
  width: 0.5em;
  height: 0.5em;
}
.news-list .slick-dots li button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
}
.news-list .slick-dots li button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #bdbdc4;
  border-radius: 50%;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
.news-list .slick-dots li.slick-active button::before {
  background-color: #233581;
}

@media screen and (min-width: 768px) {
  .news-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .news-list li {
    margin-bottom: 5rem;
    width: calc(460 / 1000 * 100%);
  }
  .news-list li:nth-child(2n) {
    margin-right: 0;
  }
  .news-list li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
  .news-list li figure {
    width: 32.6086956522%;
  }
  .news-list li h4 {
    margin-bottom: 0;
  }
  .news-list li .article-list-text {
    width: 60.8695652174%;
  }
  .news-list li .article-list-date {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #333369;
  }
  .news-list li .article-list-date p {
    margin-left: 0.5em;
    padding: 0.15em 0.5em 0;
    font-size: 82%;
    letter-spacing: 0.05em;
    color: #ffffff;
    background-color: #333369;
  }
  .news-list li .article-list-date p::before {
    display: none;
  }
}
/* =====================================================================
    nextstory
======================================================================*/
.nextstory {
  padding: 12rem 0;
  background: url(../images/common/bg_pattern05.jpg) repeat top center/160rem auto;
}
.nextstory-head {
  position: relative;
  margin-bottom: 4rem;
  padding-bottom: 14.4rem;
}
.nextstory-head::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 49rem;
  background: url(../images/common/bg_fence.png) no-repeat center bottom/cover;
  z-index: -1;
}
.nextstory-movie {
  position: relative;
  padding: calc(18 / 650 * 100%) calc(23 / 650 * 100%) calc(28 / 650 * 100%) calc(16 / 650 * 100%);
  background: url(../images/common/bg_img_movie.png) no-repeat center/100% 100%;
  z-index: 1;
}
.nextstory-subttl {
  position: absolute;
  bottom: -0.28em;
  right: -2rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24rem;
  color: rgba(47, 49, 78, 0.4);
  letter-spacing: 0;
}
.nextstory-subttl span {
  font-size: 120%;
}
.nextstory-date {
  text-align: center;
  margin-bottom: 4rem;
  color: #233581;
  letter-spacing: 0;
  font-size: 166%;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .nextstory-date {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
.nextstory-date span {
  margin-right: 0.3em;
  color: #8e2525;
}
.nextstory-text {
  line-height: 1.785;
}
.nextstory-btn {
  margin-top: 7rem;
}
.nextstory-delivery {
  margin-top: 12rem;
}

@media screen and (min-width: 768px) {
  .nextstory {
    background-size: 100% auto;
  }
  .nextstory-head {
    margin-bottom: 1rem;
    padding-bottom: 5.7rem;
  }
  .nextstory-head::before {
    height: 50rem;
  }
  .nextstory-movie {
    margin: 0 auto;
    width: calc(839 / 1000 * 100%);
  }
  .nextstory-movie a:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .nextstory-subttl {
    right: -18rem;
    font-size: 32rem;
  }
}
@media screen and (min-width: 768px) and (min-width: 1600px) {
  .nextstory-subttl {
    right: -28rem;
  }
}
@media screen and (min-width: 768px) {
  .nextstory-date {
    margin-bottom: 3rem;
  }
  .nextstory-date span {
    margin-right: 1em;
  }
  .nextstory-btn {
    margin-top: 5rem;
  }
  .nextstory-delivery {
    margin-top: 8rem;
  }
}
/* =====================================================================
    movie
======================================================================*/
.movie_topics {
  position: relative;
  background: url(../images/common/bg_pattern02_black.jpg) repeat top center/49.7rem auto;
  overflow: hidden;
}
.movie_topics::before {
  content: "";
  position: absolute;
  display: block;
  top: 1.7rem;
  left: -16.4rem;
  width: 61rem;
  height: 67.4rem;
  background: url(../images/common/img_rikka.png) no-repeat center/contain;
}

.movie {
  padding: 14.5rem 0 0;
  background-color: rgba(25, 25, 29, 0.6);
  z-index: 1;
}
.movie::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -24.4rem;
  left: 0;
  width: 100%;
  height: 24.4rem;
  background: url(../images/top/bg_section_navy.png) no-repeat center bottom/cover;
  opacity: 0.6;
}
.movie-list li {
  width: 41rem;
  margin-right: 9rem;
}
.movie-list li .article-list-date {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  left: -1rem;
  margin-bottom: -1rem;
  padding: 0.3em 0.5em;
  padding-right: 1em;
  color: #333369;
  background-color: #daecf4;
  -webkit-filter: drop-shadow(0.1rem 0 0.3rem rgba(41, 43, 45, 0.1));
          filter: drop-shadow(0.1rem 0 0.3rem rgba(41, 43, 45, 0.1));
  -webkit-clip-path: polygon(100% 0, 100% 91%, 89% 97%, 75% 99%, 50% 100%, 0 100%, 0 0);
          clip-path: polygon(100% 0, 100% 91%, 89% 97%, 75% 99%, 50% 100%, 0 100%, 0 0);
  z-index: 1;
}
.movie-list li h4 {
  color: #ffffff;
}
.movie-btn {
  margin-top: 6rem;
}

@media screen and (min-width: 768px) {
  .movie_topics::before {
    top: -8.3rem;
    left: -10.6rem;
  }
  .movie {
    padding: 8rem 0;
  }
  .movie-list li {
    margin: 0 calc(102 / 1000 * 100%) 0 0;
    width: calc(259 / 1000 * 100%);
  }
  .movie-list li .article-list-date {
    padding: 0.4em 0.7em;
    padding-right: 1.2em;
  }
}
/* =====================================================================
    topics
======================================================================*/
.topics {
  padding: 20rem 0 16rem;
}
.topics::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 4.8rem;
  right: -23.2rem;
  width: 61rem;
  height: 67.4rem;
  background: url(../images/common/img_rikka.png) no-repeat center/contain;
}
.topics-list li {
  width: 48.5rem;
  margin-right: 5.8rem;
}
.topics-list li a {
  padding: 11.3402061856% 7.6288659794%;
  background: url(../images/common/bg_pattern01_article.png) no-repeat center/100% 100%;
}
.topics-list li h4 {
  margin-bottom: 1em;
}
.topics-list .article-list-date {
  margin-bottom: 0;
  color: #233581;
}
.topics-btn {
  margin-top: 6rem;
}

@media screen and (min-width: 768px) {
  .topics {
    /* padding: 0 0 12rem; */
  }
  .topics::before {
    bottom: 6.9rem;
    right: -12rem;
  }
  .topics .inner {
    width: 100%;
    max-width: 1600px;
  }
  .topics .sec-ttl {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 7.5em;
    width: calc(500 / 1600 * 100%);
  }
  .topics .article-list-wrap {
    margin-right: 0;
    width: calc(1100 / 1600 * 100%);
  }
  .topics .article-list-wrap.noScroll {
    margin-left: calc(250 / 1600 * 100%);
  }
  .topics-list {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .topics-list li {
    margin: 0 3.1818181818% 0 0;
    width: 29.3636363636%;
  }
  .topics-list li a {
    padding: 13.9318885449% 9.907120743%;
  }
}
/* =====================================================================
    sns
======================================================================*/
.sns {
  padding: 20rem 0 0;
}
.sns-group > * {
  position: relative;
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .sns-group > *:not(:last-child) {
    margin-bottom: 10rem;
  }
}
.sns-group > *::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: -0.9rem;
  width: 1rem;
  height: 100%;
  background: url(../images/top/bg_sideline-l.png) no-repeat center right/auto 100%;
}
.sns-group > *::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: -0.9rem;
  width: 1rem;
  height: 100%;
  background: url(../images/top/bg_sideline-r.png) no-repeat center left/auto 100%;
}
.sns-group .twitter-timeline {
  width: 100%;
  height: 50rem;
  min-height: 400px;
  overflow-y: scroll;
}
.sns-group .twitter-timeline iframe {
  width: 100% !important;
}
.sns-group .tiktok-embed {
  margin: 0;
}
.sns-group .tiktok-embed iframe {
  height: 50rem !important;
  min-height: 400px;
}

@media screen and (min-width: 768px) {
  .sns {
    padding: 10rem 0 0;
  }
  .sns-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .sns-group > * {
    width: calc(470 / 1000 * 100%);
    height: 100%;
  }
}/*# sourceMappingURL=top.css.map */