@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップページ
===================================================================== */
@media screen and (min-width: 768px) {
  .btn1 {
    width: 32rem;
  }
}

/* =====================================================================
    MV
======================================================================*/
.mv {
  background: url(../images/top/img_mv.png) no-repeat center/cover;
}

.mv h1 {
  margin: 0 auto;
  padding: calc(297 / 750 * 100%) 0 0;
  width: calc(476 / 750 * 100%);
}

@media screen and (min-width: 768px) {
  .mv h1 {
    margin-bottom: 0;
    padding: calc(18 / 1920 * 100%) 0 calc(872 / 1920 * 100%);
    width: calc(819 / 1920 * 100%);
  }
}

/* =====================================================================
    banner1
======================================================================*/
.banner1,
.banner2 {
  position: relative;
  padding: 8rem 0;
}

.banner1::before,
.banner2::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 10.9rem;
  height: 14.6rem;
  background: url(../images/common/bg_deco4.png) no-repeat top right/contain;
}

.banner2::before {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}

@media screen and (min-width: 768px) {
  .banner1,
  .banner2 {
    padding: 3.2rem 0;
  }
  .banner1::before,
  .banner2::before {
    width: 9.2rem;
    height: 11.4rem;
  }
}

/* =====================================================================
*    news
* =================================================================== */
.news {
  padding: 8rem 0;
  background: #ffbf00;
}

.news_list_wrap {
  position: relative;
  overflow-y: scroll;
  margin: 0 calc(50% - 50vw);
}

.news_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(1560 / 750 * 100%);
  padding: 0 calc(55 / 750 * 100%);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  z-index: 2;
}

.news_list li {
  position: relative;
  width: calc(440 / 1560 * 100%);
  margin-right: calc(80 / 1560 * 100%);
}

@media screen and (max-width: 767px) {
  .news_list li h3 {
    line-height: 1.416;
  }
}

.news_list .article_list_date {
  padding-bottom: 1em;
  -o-border-image: linear-gradient(to left, #8f5300 0%, #c99d38 15%, #ffe066 50%, #c99d38 85%, #c29c54 100%) 1/0 0 1px 0;
     border-image: -webkit-gradient(linear, right top, left top, from(#8f5300), color-stop(15%, #c99d38), color-stop(50%, #ffe066), color-stop(85%, #c99d38), to(#c29c54)) 1/0 0 1px 0;
     border-image: linear-gradient(to left, #8f5300 0%, #c99d38 15%, #ffe066 50%, #c99d38 85%, #c29c54 100%) 1/0 0 1px 0;
  border-style: solid;
}

@media screen and (min-width: 768px) {
  .news {
    padding: 8rem 0;
  }
  .news_list_wrap {
    overflow: unset;
    margin: 0 auto;
    padding: 0;
  }
  .news_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    padding: 0;
  }
  .news_list li {
    width: calc(320 / 1024 * 100%);
    margin: 0 calc(32 / 1024 * 100%) 0 0;
  }
  .news_list li:last-child {
    margin: 0;
  }
  .news_list .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;
  }
  .news_list .article_list_img figure {
    margin: 0;
    width: calc(120 / 320 * 100%);
  }
  .news_list .article_list_img h3 {
    width: calc(180 / 320 * 100%);
    margin: -.3em 0 0;
    font-size: 1.4rem;
    line-height: 1.714;
  }
}

/* ========================================================
    Next story , delivery
=========================================================*/
.nextstory {
  padding: 12rem 0;
  background: #bf0000;
  overflow: hidden;
}

.nextstory::before {
  content: '';
  position: absolute;
  display: block;
  top: 81.6rem;
  left: 0;
  width: 100%;
  height: 91.9rem;
  background: url(../images/common/bg_desk-sp.jpg) no-repeat center top/cover;
}

.nextstory .sec_ttl {
  margin-bottom: -1rem;
}

.nextstory .btn1 {
  margin-bottom: 8rem;
}

.bg_blackboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 66.4rem;
  background-image: url(../images/top/bg_blackboard_top.jpg), url(../images/top/bg_blackboard_bottom.jpg), url(../images/common/bg_blackboard1-sp.jpg);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-size: 1rem auto, 1rem auto, cover;
  background-position: top center, bottom center, center;
  -webkit-box-shadow: 0px 6rem 6rem 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 6rem 6rem 0px rgba(0, 0, 0, 0.2);
}

.bg_blackboard::before {
  content: '';
  position: absolute;
  display: block;
  bottom: 1.5rem;
  right: -13rem;
  width: 30rem;
  padding-top: calc(35 / 750 * 100%);
  background: url(../images/top/img_blackboard_item.png) no-repeat center bottom/contain;
}

.nextstory_movie {
  position: relative;
  margin: 0 auto 8rem;
  width: 64rem;
  letter-spacing: 0.075em;
  text-align: center;
}

.nextstory_movie::before {
  content: '';
  position: absolute;
  display: block;
  top: -37.2rem;
  left: -9rem;
  width: 27.3rem;
  height: 38rem;
  background: url(../images/top/img_deco1.png) no-repeat center/contain;
}

.nextstory_movie_embed {
  margin-bottom: 6.5rem;
  border: 0.4rem solid #8f5300;
  -o-border-image: linear-gradient(-45deg, #8f5300 0%, #c39222 20%, #ffe066 50%, #c39222 80%, #8f5300 100%);
     border-image: linear-gradient(-45deg, #8f5300 0%, #c39222 20%, #ffe066 50%, #c39222 80%, #8f5300 100%);
  border-image-slice: 1;
  -webkit-box-shadow: 0px 3rem 3rem 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3rem 3rem 0px rgba(0, 0, 0, 0.2);
}

.nextstory_movie_embed a {
  position: relative;
}

.nextstory_movie_embed a::before {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 8.1rem;
  height: 5.7rem;
  background: url(../images/common/icon_movie.png) no-repeat center/contain;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.nextstory_movie_embed a img {
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
}

.nextstory_movie_subttl {
  margin-bottom: 0.7em;
  font-size: 4.8rem;
  font-weight: 700;
  color: #fff;
}

.nextstory_movie_date {
  display: inline-block;
  margin-bottom: 5rem;
  padding: 0.7em 3em;
  font-size: 2.8rem;
  font-weight: 700;
  background-color: #000;
  color: #fff;
  border-radius: 3em;
}

.nextstory_movie_txt {
  line-height: 1.833;
  color: #fff;
  text-align: left;
}

@media screen and (min-width: 768px) {
  .nextstory {
    padding: 12rem 0;
  }
  .nextstory::before {
    top: auto;
    bottom: 0;
    height: 109.6rem;
    background-image: url(../images/common/bg_desk-pc.jpg);
  }
  .nextstory .sec_ttl {
    margin-bottom: 1rem;
  }
  .bg_blackboard {
    background-image: url(../images/top/bg_blackboard_top.jpg), url(../images/top/bg_blackboard_bottom.jpg), url(../images/common/bg_blackboard1-pc.jpg);
  }
  .bg_blackboard::before {
    right: 0;
    margin-right: calc(50 / 1920 * 100%);
    width: calc(300 / 1920 * 100%);
    padding-top: calc(35 / 1920 * 100%);
  }
  .bg_blackboard::after {
    content: '';
    position: absolute;
    display: block;
    top: 7.4rem;
    right: 2.5rem;
    width: calc(73 / 1920 * 100%);
    padding-top: calc(545 / 1920 * 100%);
    background: url(../images/top/img_blackboard_text.png) no-repeat center/contain;
  }
  .nextstory_movie {
    width: calc(880 / 1024 * 100%);
  }
  .nextstory_movie::before {
    top: -28.4rem;
    left: -24rem;
    width: 36.4rem;
    height: 50.7rem;
  }
  .nextstory_movie_embed a:hover::before {
    background-image: url(../images/common/icon_movie_h.png);
  }
  .nextstory_movie_subttl {
    font-size: 3.6rem;
  }
  .nextstory_movie_date {
    font-size: 2.1rem;
  }
  .nextstory_movie_txt {
    line-height: 2.25;
  }
}

/* =====================================================================
*    movie
* =================================================================== */
.movie {
  padding: 11.5rem 0 46rem;
  background: #ffbf00 url(../images/top/img_deco2.jpg) no-repeat top right/43.2rem;
  overflow: hidden;
}

.movie::before {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64rem;
  background: url(../images/top/img_deco3-sp.jpg) no-repeat center/contain;
}

.movie_list_wrap {
  position: relative;
  overflow-y: scroll;
  margin: 0 calc(50% - 50vw) 8rem;
  height: 47rem;
}

.movie_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(1560 / 750 * 100%);
  padding: 0 calc(60 / 750 * 100%);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  z-index: 2;
}

.movie_list li {
  position: relative;
  width: calc(440 / 1560 * 100%);
  margin-right: calc(80 / 1560 * 100%);
}

@media screen and (max-width: 767px) {
  .movie_list li h3 {
    line-height: 1.416;
  }
}

.movie_list .article_list_date {
  padding-bottom: 1em;
  -o-border-image: linear-gradient(to left, #8f5300 0%, #c99d38 15%, #ffe066 50%, #c99d38 85%, #c29c54 100%) 1/0 0 1px 0;
     border-image: -webkit-gradient(linear, right top, left top, from(#8f5300), color-stop(15%, #c99d38), color-stop(50%, #ffe066), color-stop(85%, #c99d38), to(#c29c54)) 1/0 0 1px 0;
     border-image: linear-gradient(to left, #8f5300 0%, #c99d38 15%, #ffe066 50%, #c99d38 85%, #c29c54 100%) 1/0 0 1px 0;
  border-style: solid;
}

@media screen and (min-width: 768px) {
  .movie {
    padding: 12rem 0;
    background-size: 72rem;
  }
  .movie::before {
    width: 68rem;
    height: 68rem;
    background-image: url(../images/top/img_deco3-pc.jpg);
  }
  .movie::after {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    right: 16rem;
    width: 38rem;
    height: 24rem;
    background: url(../images/top/img_deco4.png) no-repeat center bottom/contain;
  }
  .movie_list_wrap {
    overflow: unset;
    margin: 0 auto 8rem;
    padding: 0;
    height: auto;
  }
  .movie_list {
    width: 100%;
    padding: 0;
  }
  .movie_list li {
    width: calc(304 / 1024 * 100%);
    margin-right: calc(56 / 1024 * 100%);
  }
}

/* =====================================================================
*    topics
* =================================================================== */
.topics {
  padding: 15.7rem 0 18rem;
  background: url(../images/common/bg_deco1.jpg) repeat-x center top/auto 3.1rem;
}

.topics::before {
  content: '';
  position: absolute;
  display: block;
  bottom: -1px;
  left: 0;
  width: 100%;
  padding-top: calc(117 / 750 * 100%);
  background: url(../images/common/bg_deco2-sp.jpg) no-repeat center bottom/cover;
}

@media screen and (min-width: 768px) {
  .topics {
    padding: 16rem 0 18rem;
  }
  .topics::before {
    height: auto;
    padding-top: calc(117 / 1600 * 100%);
    background-image: url(../images/common/bg_deco2-pc.jpg);
  }
}

/* =====================================================================
    sns
======================================================================*/
.sns {
  padding: 12rem 0;
  background: #ffbf00 url(../images/common/bg_deco3.jpg) no-repeat bottom right/28rem auto;
}

.sns .sec_ttl {
  margin-bottom: -1rem;
}

.sns_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sns_list li {
  margin: 0 calc(5 / 680 * 100%);
  width: calc(160 / 680 * 100%);
}

.sns_list li img {
  aspect-ratio: 1/1;
}

@media screen and (min-width: 768px) {
  .sns .sec_ttl {
    margin-bottom: 0;
  }
  .sns_list li {
    margin: 0 calc(40 / 1024 * 100%);
    width: calc(120 / 1024 * 100%);
  }
  .sns_list li a {
    position: relative;
    overflow: hidden;
  }
  .sns_list li a::before {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 4rem 4rem;
    border-color: transparent transparent #000000 transparent;
    z-index: 1;
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) {
  .sns_list li a::before {
    border-width: 0 0 2.5rem 2.5rem;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  .sns_list li a:hover {
    opacity: 0.7;
  }
  .sns_list li a:hover::before {
    border-width: 0 0 4rem 4rem;
  }
}

/* =====================================================================
*    hulu_popup
* =================================================================== */
.hulu_popup {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(108, 94, 71, 0.9);
  z-index: 999999;
}

.hulu_popup_inner {
  width: calc(750 / 750 * 100%);
  max-width: 750px;
  padding: calc(63 / 750 * 100%) 0 calc(112 / 750 * 100%);
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  background: url(../images/common/bg_blackboard1-sp.jpg) repeat center/cover;
}

.hulu_popup_inner h2 {
  margin-bottom: calc(64 / 750 * 100%);
}

.hulu_popup_inner h2 img {
  width: calc(342 / 750 * 100%);
  margin: 0 auto calc(38 / 750 * 100%);
}

.hulu_popup_inner h2 span {
  font-size: 4.8rem;
  font-weight: 700;
  color: #ffbf00;
}

.hulu_popup_img {
  position: relative;
  border: 0.4rem solid #8f5300;
  -o-border-image: linear-gradient(-45deg, #8f5300 0%, #c39222 20%, #ffe066 50%, #c39222 80%, #8f5300 100%);
     border-image: linear-gradient(-45deg, #8f5300 0%, #c39222 20%, #ffe066 50%, #c39222 80%, #8f5300 100%);
  border-image-slice: 1;
  margin: 0 auto calc(40 / 750 * 100%);
  width: calc(640 / 750 * 100%);
}

.hulu_popup_btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(300 / 750 * 100%);
  margin-bottom: calc(40 / 750 * 100%);
}

.hulu_popup_btn a {
  padding: 0.5em 0;
  font-size: 2rem;
  color: #FFF;
  background-color: #000000;
  border-radius: 3em;
}

.hulu_popup_btn a::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 1.5em;
  width: .55em;
  height: .55em;
  margin: auto;
  border-top: .15em solid #FFF;
  border-right: .15em solid #FFF;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.hulu_popup_txt2 img {
  width: calc(526 / 750 * 100%);
  margin: 0 auto calc(64 / 750 * 100%);
}

.hulu_popup_link_list {
  margin: calc(43 / 750 * 100%) 0;
}

.hulu_popup_link_list li a {
  width: calc(560 / 750 * 100%);
}

.hulu_popup_link_list li a::before {
  display: none;
}

.hulu_popup_link_list li a::after {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  right: 1.5em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background: url(../images/hulu/icon_arrow.png) no-repeat center/contain;
}

.hulu_popup_check {
  color: #fff;
}

.hulu_popup_check input {
  vertical-align: middle;
  margin-right: 0.3em;
}

.hulu_popup_check span {
  font-size: 2rem;
  font-weight: 700;
}

.hulu_popup_close {
  position: absolute;
  top: 0;
  right: 0;
  margin: calc(30 / 750 * 100%) calc(30 / 750 * 100%) 0 0;
  width: calc(56 / 750 * 100%);
  color: #fff;
  cursor: pointer;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

@media screen and (min-width: 768px) {
  .hulu_popup_inner {
    padding: calc(45 / 1600 * 100%) 0 calc(65 / 1600 * 100%);
    width: calc(640 / 1600 * 100%);
  }
  .hulu_popup_inner h2 {
    margin-bottom: calc(45 / 640 * 100%);
  }
  .hulu_popup_inner h2 img {
    width: calc(256 / 640 * 100%);
  }
  .hulu_popup_inner h2 span {
    font-size: 3.6rem;
  }
  .hulu_popup_btn {
    width: calc(260 / 640 * 100%);
    margin-bottom: calc(30 / 640 * 100%);
  }
  .hulu_popup_btn a {
    padding: 1rem 0;
    font-size: 1.4rem;
  }
  .hulu_popup_btn a:hover {
    background-color: #bf0000;
  }
  .hulu_popup_link_list {
    margin: calc(24 / 640 * 100%) 0 calc(36 / 640 * 100%);
  }
  .hulu_popup_link_list li a {
    width: calc(420 / 640 * 100%);
  }
  .hulu_popup_link_list li a::after {
    width: 1.5em;
    height: 1.5em;
  }
  .hulu_popup_txt2 img {
    width: calc(395 / 640 * 100%);
  }
  .hulu_popup_check label {
    cursor: pointer;
  }
  .hulu_popup_check span {
    font-size: 1.6rem;
  }
  .hulu_popup_close {
    width: calc(40 / 640 * 100%);
  }
  .hulu_popup_close:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 1600px) {
  .hulu_popup_inner {
    padding: 42px 0 33px;
  }
  .hulu_popup_inner h2 span {
    font-size: 30px;
  }
  .hulu_popup_txt2 {
    padding: 29px 0;
  }
  .hulu_popup_btn a,
  .hulu_popup_link_list li a {
    font-size: 14px;
  }
  .hulu_popup_check span,
  .hulu_popup_close {
    font-size: 16px;
  }
}

@media screen and (max-height: 900px) and (orientation: landscape) {
  .hulu_popup_inner {
    padding: 2em 0;
    width: 100%;
    max-width: calc(500 / 1600 * 100vh);
    min-width: 400px;
  }
  .hulu_popup_inner * {
    font-size: 0.85em !important;
  }
  .hulu_popup_inner h2 span {
    font-size: 20px !important;
  }
  .hulu_popup_inner .btn1 span {
    padding: 2rem 0;
  }
}
/*# sourceMappingURL=top.css.map */