@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : hulu.css
Description :
===================================================================== */

main .inner {
  width: 100%;
  max-width: calc(630 / 750 * 100%);
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  main .inner {
    max-width: 1200px;
    padding: 0 calc(100 / 1200 * 100%);
  }

}

@media screen and (min-width: 1200px) {
  main .inner {
    padding: 0 100px;
  }

}


/* =====================================================================
*    hulu_movie
* =================================================================== */
.hulu_movie {
  padding: calc(60 / 750 * 100%) 0 calc(120 / 750 * 100%);
  background: #f8f8f8;
}

.hulu_movie h2 {
  width: calc(280 / 630 * 100%);
  margin-bottom: calc(50 / 630 * 100%);
}

.hulu_movie h3 {
  color: #fff100;
  background: #ed7da3;
  font-size: 4rem;
  font-weight: 700;
  -webkit-box-shadow: 0.6666vw 0.6666vw 0 #fff100;
  box-shadow: 0.6666vw 0.6666vw 0 #fff100;
  margin: 0 0 calc(60 / 630 * 100%) 0;
  padding: 0 calc(15/630 *100%);
  display: inline-block;
  z-index: 4;
}

.hulu_movie .inner::after {
  content: "";
  display: block;
  width: calc(78/630 *100%);
  padding-top: calc(100/630 *100%);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  background: url(../images/top/img_shape3.png) no-repeat center/contain;
  margin-top: calc(233/630 *100%);
  margin-right: calc(-20/630 *100%);
  z-index: 5;
  -webkit-animation: kurukuru 0.8s infinite alternate;
  animation: kurukuru 0.8s infinite alternate;
}

@-webkit-keyframes kurukuru {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
}

@keyframes kurukuru {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
}

.hulu_movie_wrap {
  position: relative;
  margin-bottom: calc(50 / 630 * 100%);
}

.hulu_movie_wrap::before,
.hulu_movie_wrap::after {
  content: "";
  display: block;
  width: calc(366/630 *100%);
  padding-top: calc(272/630 *100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.hulu_movie_wrap::before {
  background: url(../images/top/img_shape1.png) no-repeat center/contain;
  margin-top: calc(-90/630 *100%);
  margin-left: calc(446/630 *100%);
  -webkit-animation: fuwafuwa 1s infinite ease alternate;
  animation: fuwafuwa 1s infinite ease alternate;
}

.hulu_movie_wrap::after {
  background: url(../images/top/img_shape2.png) no-repeat center/contain;
  margin-top: calc(251/630 *100%);
  margin-left: calc(-184/630 *100%);
  -webkit-animation: fuwafuwa 1.2s infinite alternate;
  animation: fuwafuwa 1.2s infinite alternate;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }

  100% {
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}

@keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }

  100% {
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}


.hulu_movie_box {
  position: relative;
  z-index: 5;
  border-radius: 2rem;
  overflow: hidden;
}

.hulu_movie_photo {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.hulu_movie_photo img,
.hulu_movie_photo iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.hulu_movie_txt {
  margin-bottom: calc(60 / 630 * 100%);
}

.hulu_movie_txt p {
  margin-bottom: 0.3em;
  text-align: center;
  line-height: 1.5;
  font-size: 3rem;
  color: #ef8dae;
  font-weight: 700;
}

.hulu_movie_txt small {
  font-size: 2.4rem;
  color: #5b6969;
}

@media screen and (min-width: 768px) {
  .hulu_movie {
    padding: calc(110 / 1200 * 100%) 0;
  }


  .hulu_movie h2 {
    width: calc(280 / 1000 * 100%);
    margin-bottom: calc(50 / 1000 * 100%);
  }

  .hulu_movie h3 {
    box-shadow: 5px 5px 0 #fff100;
    margin: 0 0 calc(40 / 1000 * 100%) calc(60 / 1000 * 100%);
    padding: 0 calc(15/1000 *100%);

  }

  .hulu_movie .inner::after {
    width: calc(78/1200 *100%);
    padding-top: calc(87/1200 *100%);
    margin-top: calc(225/1200 *100%);
    margin-right: calc(130/1200 *100%);
  }

  .hulu_movie_wrap {
    margin: 0 auto calc(40 / 1000 * 100%);
  }

  .hulu_movie_wrap::before,
  .hulu_movie_wrap::after {
    width: calc(364/1000 *100%);
    padding-top: calc(270/1000 *100%);
  }


  .hulu_movie_wrap::before {
    margin-top: calc(-76/1000 *100%);
    margin-left: calc(802/1000 *100%);
  }

  .hulu_movie_wrap::after {
    margin: 0;
    margin-top: calc(344/1000 *100%);
    margin-left: calc(-87/1000 *100%);

  }


  .hulu_movie_box {
    width: calc(880 / 1000 * 100%);
    margin: 0 auto;
    border-radius: 4rem;
  }

  .hulu_movie_photo {
    cursor: pointer;
  }

  .hulu_movie_txt {
    margin-bottom: calc(50/1000 *100%);
  }

  .hulu_movie_txt p {
    margin-bottom: 0;
    font-size: 2.6rem;
  }

  .hulu_movie_txt small {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 1200px) {
  .hulu_movie {
    padding: 110px 0;
  }


}

/* =====================================================================
*    trial 
* =================================================================== */
.btn_trial {
  width: calc(420 / 630 * 100%);
  margin: 0 auto;
  display: block;
  background: #fff100;
  padding: calc(30/630 *100%) 0;
  color: #009f9a;
  text-decoration: none;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1em;
  border-radius: 4.5rem;
  box-shadow: 0 10px 20px rgb(0 0 0 / 13%);
}

.btn_trial::after {
  content: "";
  display: inline-block;
  background: url(../images/common/mark_arrow.png) no-repeat center/contain;
  width: calc(20/420 *100%);
  padding-top: calc(21/420 *100%);
}

@media screen and (min-width: 768px) {

  .btn_trial {
    width: calc(280 / 1000 * 100%);
    padding: calc(21/1000 *100%) 0;
    font-size: 1.8rem;
    position: relative;
    top: 0;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }

  .btn_trial:hover {
    background: #a0d9f6;
    position: relative;
    top: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
}

/* =====================================================================
*    hulu_intro
* =================================================================== */
.hulu_intro {
  padding: calc(100 / 750 * 100%) 0 calc(120 / 750 * 100%);
}

.hulu_intro h2 {
  width: calc(480/630 *100%);
  margin-bottom: calc(50 / 630 * 100%);
}

.hulu_intro_txt {
  text-align: left;
  font-size: 2.8rem;
  text-align: center;
}

.hulu_intro_txt strong {
  color: #ed7da3;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .hulu_intro {
    padding: calc(100 / 1200 * 100%) 0 calc(120 / 1200 * 100%);
  }

  .hulu_intro h2 {
    width: calc(480 / 1000 * 100%);
    margin-bottom: calc(50 / 1000 * 100%);
  }


  .hulu_intro_txt {
    width: calc(880/1000 *100%);
    margin: 0 auto;
    font-size: 2rem;
    color: #5b6969;
  }

}

@media screen and (min-width: 1200px) {
  .hulu_intro {
    padding: 100px 0 120px;
  }
}

/* =====================================================================
*    hulu_story
* =================================================================== */
.hulu_story {
  padding: calc(100 / 750 * 100%) 0 calc(120 / 750 * 100%);
  background: #f8f8f8;
}

.hulu_story h2 {
  width: calc(216/630 *100%);
  margin-bottom: calc(50 / 630 * 100%);

}


.story_date_tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto calc(50/ 630 * 100%);
  z-index: 1;
}

.story_date_tab li {
  width: calc(300 / 630 * 100%);
  margin: 0 0 calc(24/630 *100%);
  background-color: #a0d9f6;
  color: #fff;
  text-align: center;
  padding: 1.5rem 0;
  line-height: 1.25;
  border-radius: 3em;
  box-shadow: 0 10px 20px rgb(0 0 0 / 13%);
}

.story_date_tab li strong {
  font-weight: 700;
}

.story_date_tab li small {
  font-size: 2rem;
  display: block;
  margin-top: .2em;
  font-weight: normal;
}

.story_date_tab li.up::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/common/img_new.png) no-repeat center/contain;
  width: calc(69 / 300 * 100%);
  padding-top: calc(29 / 300 * 100%);
  margin: calc(-13/300 *100%) calc(27/300 *100%) 0 0;
  z-index: 1;
}

.story_date_tab li.nolink {
  background-color: #cdcccb;
  color: #e8e8e8;
  pointer-events: none;
}

.story_date_tab li.is-active {
  background: #009f9a;
}

.story_date_panel {}

.story_date_panel::before,
.story_date_panel::after {
  content: "";
  display: block;
  width: calc(366/630 *100%);
  padding-top: calc(272/630 *100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.story_date_panel::before {
  background: url(../images/top/img_shape1.png) no-repeat center/contain;
  margin-top: calc(50/630 *100%);
  margin-left: calc(446/630 *100%);
  -webkit-animation: fuwafuwa 1s infinite ease alternate;
  animation: fuwafuwa 1s infinite ease alternate;
}

.story_date_panel::after {
  background: url(../images/top/img_shape2.png) no-repeat center/contain;
  margin-top: calc(300/630 *100%);
  margin-left: calc(-184/630 *100%);
  -webkit-animation: fuwafuwa 1.2s infinite alternate;
  animation: fuwafuwa 1.2s infinite alternate;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.story_date_panel>li {
  display: none;
  z-index: 3;
}

.story_date_panel li.is-show {
  display: block !important;
}

.hulu_story_photo {
  margin-bottom: calc(50 / 650 * 100%);
}

.hulu_story_subttl {
  font-size: 4rem;
  font-weight: 700;
  color: #ed7da3;
  margin-bottom: calc(50 / 630 * 100%);
}

.hulu_story .slick-slider {
  padding: 0;
  margin: 0;
  line-height: 0;
}

.hulu_story .slick-list {
  border-radius: 2rem;
  overflow: hidden;
}


.hulu_story .slick-arrow {
  display: block;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: 3;
  width: calc(80/630 *100%);
  padding-top: calc(80/630 *100%);
  height: 0;
  border-radius: 4rem;
  overflow: hidden;
  box-shadow: 0 10px 20px rgb(0 0 0 / 13%);
}

.hulu_story .slick-arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: url(../images/hulu/img_arrow.jpg) no-repeat top/contain;
  width: 100%;
  height: 100%;

}

.hulu_story .slick-arrow.prev {
  left: calc(-40 / 650 * 100%);
}

.hulu_story .slick-arrow.next {
  right: calc(-40 / 650 * 100%);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.story_txt {
  font-size: 2.4rem;
  margin-bottom: calc(60/630 *100%);
}

.banner_list {
  width: calc(480 / 630 * 100%);
  margin: 0 auto;
}

.banner_list li a {
  display: block;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;

}

@media screen and (min-width: 768px) {
  .hulu_story {
    padding: calc(100 / 1200 * 100%) 0 calc(120 / 1200 * 100%);
  }

  .hulu_story h2 {
    width: calc(216/1000 *100%);
    margin-bottom: calc(50 / 1000 * 100%);

  }

  .hulu_story_box {
    width: calc(880 / 1000 * 100%);
    margin: 0 auto;
  }

  .story_date_tab {
    margin: 0 auto calc(60/ 880 * 100%);
  }

  .story_date_tab li {
    width: calc(210 / 880 * 100%);
    margin: 0;
    padding: 1.3rem;
    line-height: 1.2 !important;
    -webkit-transition: .2s ease;
    transition: .2s ease;

  }


  .story_date_tab li:not(.nolink):hover {
    cursor: pointer;
    background: #009f9a;
  }

  .story_date_tab li:not(.nolink):hover::before {
    opacity: 1;
  }

  .story_date_tab li strong {
    font-size: 1.4rem;
  }

  .story_date_tab li small {
    font-size: 1.2rem;
  }

  .story_date_tab li.up::after {
    width: calc(59 / 210 * 100%);
    padding-top: calc(25 / 210 * 100%);
    margin: calc(-13/210 *100%) calc(27/210 *100%) 0 0;
  }


  .story_date_panel::before,
  .story_date_panel::after {
    width: calc(366/880 *100%);
    padding-top: calc(272/880 *100%);
  }

  .story_date_panel::before {
    margin-top: calc(50/880 *100%);
    margin-left: calc(742/880 *100%);
  }

  .story_date_panel::after {
    margin-top: calc(443/880 *100%);
    margin-left: calc(-247/880 *100%);
  }


  .hulu_story_photo {
    margin-bottom: calc(50 / 880 * 100%);
  }

  .hulu_story_subttl {
    font-size: 3rem;
    margin-bottom: calc(50 / 880 * 100%);
  }

  .hulu_story .slick-list {
    border-radius: 4rem;
  }


  .hulu_story .slick-arrow {
    cursor: pointer;
    width: calc(60/880 *100%);
    padding-top: calc(60/880 *100%);
  }

  .hulu_story .slick-arrow.prev::before,
  .hulu_story .slick-arrow.next::before {
    -webkit-transition: .2s ease;
    transition: .2s ease;
  }


  .hulu_story .slick-arrow.prev {
    left: calc(-30 / 880 * 100%);
  }

  .hulu_story .slick-arrow.next {
    right: calc(-30 / 880 * 100%);
  }

  .hulu_story .slick-arrow.prev:hover::before,
  .hulu_story .slick-arrow.next:hover::before {
    background: url(../images/hulu/img_arrow_hover.jpg) no-repeat top/contain;
    width: 100%;
    height: 100%;
  }


  .story_txt {
    font-size: 1.6rem;
    margin: 0 auto calc(60/1000 *100%);
  }

  .banner_list {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  .banner_list li {
    width: calc(320 / 1000 * 100%);
  }


  .banner_list li a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 1200px) {
  .hulu_story {
    padding: 100px 0 120px;
  }

  .hulu_story .outer {
    padding-bottom: 60px;
  }

}


/* =====================================================================
*   cast
* =================================================================== */
.hulu_cast {
  padding: calc(100 / 750 * 100%) 0 calc(120 / 750 * 100%);
}


.hulu_cast h2 {
  width: calc(195/630 *100%);
  margin-bottom: calc(50 / 630 * 100%);

}

dl.name_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

dl.name_list dt,
dl.name_list dd {
  font-size: 2.6rem;
  font-weight: 700;
  color: #009f9a;
  padding: 0 0 calc(30/630 *100%);
  font-feature-settings: "palt";
  line-height: 2.2;
}

dl.name_list dt {
  width: calc(275/630 *100%);
  margin-right: calc(90/630 *100%);
  text-align: right;
  position: relative;
}

dl.name_list dt::after {
  content: "・・・";
  display: block;
  width: calc(90/275 *100%);
  color: #a0d9f6;
  font-size: 2rem;
  font-weight: 900;
  position: absolute;
  right: calc(-92/275 *100%);
  top: 0.3em;
  text-align: center;
  letter-spacing: .4em;
}

dl.name_list dd {
  width: calc(260/630 *100%);
}

dl.name_list.marB {
  padding: 0 0 calc(60/630 *100%);
}


@media screen and (min-width: 768px) {
  .hulu_cast {
    padding: calc(100 / 1200 * 100%) 0 calc(120 / 1200 * 100%);
  }

  .hulu_cast h2 {
    width: calc(180/1000 *100%);
    margin-bottom: calc(50 / 1000 * 100%);
  }

  dl.name_list {
    max-width: 480px;
    margin: auto;
  }

  dl.name_list dt,
  dl.name_list dd {
    font-size: 1.8rem;
    padding: 0 0 calc(40/1000 *100%);
    line-height: 2;
  }

  dl.name_list dt {
    width: calc(220/500 *100%);
    margin-right: calc(90/500 *100%);
  }

  dl.name_list dt::after {
    font-size: 1.8rem;
    top: 0;
    letter-spacing: .2em;
    right: calc(-106/275 *100%);
  }

  dl.name_list dd {
    width: calc(190/500 *100%);
  }

  dl.name_list.marB {
    padding: 0 0 calc(40/1000 *100%);
  }
}

@media screen and (min-width: 1200px) {
  .hulu_cast {
    padding: 100px 0 120px;
  }

}


/* =====================================================================
*    about
* =================================================================== */
.hulu_about {
  padding: calc(100 / 750 * 100%) 0 calc(120 / 750 * 100%);
  background-color: #009f9a;
  overflow: hidden;
}

.hulu_about h2 {
  width: calc(285/630 *100%);
  margin-bottom: calc(50 / 630 * 100%);

}

.hulu_about::after {
  content: "";
  display: block;
  width: calc(250 / 750 * 100%);
  padding-top: calc(264 / 750 * 100%);
  background: url(../images/hulu/img_shape.png) no-repeat center top/contain;
  position: absolute;
  top: 0;
  right: 0;
  margin: calc(-82 / 750 * 100%) calc(-25 / 750 * 100%) 0 0;
  z-index: 1;
}

.hulu_about .inner::before,
.hulu_about .inner::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(../images/top/img_shape4.png) no-repeat center/contain;
  z-index: 0;
}

.hulu_about .inner::before {
  width: calc(90/630 *100%);
  padding-top: calc(90/630 *100%);
  -webkit-animation: fuwafuwa 1s infinite 0s alternate;
  animation: fuwafuwa 1s infinite 0s alternate;
  margin: 0 0 calc(-13 /630 *100%) calc(-46 /630 *100%);

}

.hulu_about .inner::after {
  width: calc(55/630 *100%);
  padding-top: calc(55/630 *100%);
  -webkit-animation: fuwafuwa 1s infinite 0.5s alternate;
  animation: fuwafuwa 1s infinite 0.5s alternate;
  margin: 0 0 calc(-63 /630 *100%) calc(-73 /630 *100%);

}



.hulu_about_txt {
  color: #fff;
  line-height: 2;
  font-size: 2.4rem;
  margin-bottom: calc(60 / 630 * 100%);
}


@media screen and (min-width: 768px) {
  .hulu_about {
    padding: calc(100 / 1200 * 100%) 0 calc(120 / 1200 * 100%);
  }

  .hulu_about::after {
    width: calc(250 / 1200 * 100%);
    padding-top: calc(264 / 1200 * 100%);
    margin: calc(-46 / 1200 * 100%) calc(-123 / 1200 * 100%) 0 0;
  }

  .hulu_about h2 {
    width: calc(267/1000 *100%);
    margin-bottom: calc(50 / 1000* 100%);

  }


  .hulu_about .inner::before {
    width: calc(90/1000 *100%);
    padding-top: calc(90/1000 *100%);
    margin: 0 0 calc(-13 /1000 *100%) calc(-46 /1000 *100%);
  }

  .hulu_about .inner::after {
    width: calc(55/1000 *100%);
    padding-top: calc(55/1000 *100%);
    margin: 0 0 calc(-63 /1000 *100%) calc(-73 /1000 *100%);
  }

  .hulu_about_txt {
    width: calc(880/1000 *100%);
    margin: 0 auto calc(60/1000 *100%);
    font-size: 1.6rem;
    letter-spacing: 0;

  }

  @media screen and (min-width: 1200px) {
    .hulu_about {
      padding: 100px 0 120px;
    }

    .hulu_about::after {
      width: 250px;
      padding-top: 264px;
      margin: -46px 176px 0 0;
    }
  }