@charset "UTF-8";
body {
  margin: -30px 0 0; }

wrapper {
  min-width: 1000px; }

.hide-bottom {
  -webkit-transform: translate(0, 50px);
  transform: translate(0, 50px);
  -webkit-transition: all .6s;
  transition: all .6s;
  opacity: 0; }

.hide-top {
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
  -webkit-transition: all .6s;
  transition: all .6s;
  opacity: 0; }

.moves {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all .6s;
  transition: all .6s;
  opacity: 1; }

.nav-fix {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; }

@media screen and (min-width: 768px) {
  .nav-fix-height {
    margin-top: 80px; } }

.mv-area {
  background: #ffffcd; }
  .mv-area .mv-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: unset;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: hidden; }
    @media screen and (min-width: 768px) {
      .mv-area .mv-inner {
        background: url(../images/mv_img04_2_bg.jpg) top right no-repeat;
        background-size: cover; } }
    .mv-area .mv-inner .mv-img {
      width: 80%;
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        .mv-area .mv-inner .mv-img {
          width: 100%; } }
      .mv-area .mv-inner .mv-img img {
        width: 100%; }

#special {
  /*special-wrapper END*/ }
  @media screen and (min-width: 768px) {
    #special .lead {
      margin-bottom: 40px; } }
  #special .special-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    /*tabの形状*/
    /*エリアの表示非表示と形状*/
    /*areaにis-activeというクラスがついた時の形状*/ }
    @media screen and (max-width: 767px) {
      #special .special-wrapper {
        padding: 0 3%; } }
    #special .special-wrapper ul {
      list-style: none; }
    #special .special-wrapper .special-tab {
      display: flex;
      flex-wrap: wrap;
      /*liにactiveクラスがついた時の形状*/ }
      #special .special-wrapper .special-tab li {
        width: 25%;
        /*@include media(sp) {
        width: 48%;
        margin-bottom: 3px;
        }*/ }
        #special .special-wrapper .special-tab li a {
          display: block;
          background: #14608f;
          color: #e5e518;
          text-decoration: none;
          margin: 0 2px;
          padding: 10px 20px;
          border-radius: 10px 10px 0 0;
          font-size: 1.2em; }
          @media screen and (max-width: 767px) {
            #special .special-wrapper .special-tab li a {
              padding: 10px 3%;
              font-size: 1em; } }
        #special .special-wrapper .special-tab li a:hover {
          opacity: 0.8;
          text-decoration: none; }
      #special .special-wrapper .special-tab li.active a {
        color: #14608f;
        background: #e5e518; }
    #special .special-wrapper .special-area {
      display: none;
      /*はじめは非表示*/
      opacity: 0;
      /*透過0*/
      background: #fff;
      padding: 50px 20px;
      border: 2px solid #e5e518; }
      #special .special-wrapper .special-area h2 {
        font-size: 1.3rem;
        margin: 0 0 20px 10px; }
      #special .special-wrapper .special-area .special-area-conts {
        width: 100%;
        height: auto; }
        #special .special-wrapper .special-area .special-area-conts ul {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: top; }
          #special .special-wrapper .special-area .special-area-conts ul li {
            width: 23%;
            height: auto;
            margin-bottom: 15px; }
            @media screen and (max-width: 767px) {
              #special .special-wrapper .special-area .special-area-conts ul li {
                width: 32%; } }
            #special .special-wrapper .special-area .special-area-conts ul li a {
              color: #14608f;
              text-decoration: none; }
              @media screen and (max-width: 767px) {
                #special .special-wrapper .special-area .special-area-conts ul li a p {
                  font-size: 13px; } }
        #special .special-wrapper .special-area .special-area-conts ul:before {
          content: "";
          display: block;
          width: 23%;
          /* .boxに指定したwidthと同じ幅を指定する */
          height: 0;
          order: 1; }
        #special .special-wrapper .special-area .special-area-conts ul:after {
          content: "";
          display: block;
          width: 23%;
          /* .boxに指定したwidthと同じ幅を指定する */
          height: 0; }
        #special .special-wrapper .special-area .special-area-conts .recipe-area {
          margin-top: 30px;
          /*アイコンの＋と×*/
          /*　closeというクラスがついたら形状変化　*/ }
          @media screen and (max-width: 767px) {
            #special .special-wrapper .special-area .special-area-conts .recipe-area {
              margin-top: 0; } }
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-box {
            width: 100%; }
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn {
            position: relative; }
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn::before,
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn::after {
            position: absolute;
            content: '';
            width: 15px;
            height: 2px;
            background-color: #fff; }
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn::before {
            top: 48%;
            right: 30px;
            transform: rotate(0deg); }
            @media screen and (max-width: 767px) {
              #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn::before {
                right: 15px; } }
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn::after {
            top: 48%;
            right: 30px;
            transform: rotate(90deg); }
            @media screen and (max-width: 767px) {
              #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn::after {
                right: 15px; } }
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn.close::before {
            transform: rotate(45deg); }
          #special .special-wrapper .special-area .special-area-conts .recipe-area .recipe-open-btn.close::after {
            transform: rotate(-45deg); }
        #special .special-wrapper .special-area .special-area-conts .recipe-comingsoon {
          text-align: center;
          font-size: 1.3em; }
    #special .special-wrapper .special-area.is-active {
      display: block;
      /*表示*/
      animation-name: displayAnime;
      /*ふわっと表示させるためのアニメーション*/
      animation-duration: 2s;
      animation-fill-mode: forwards; }
@keyframes displayAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@media screen and (max-width: 767px) {
  .swiper-recipe {
    margin-bottom: 30px; } }

#streaming .cont-inner .lead {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: 100;
  margin-bottom: 30px; }
#streaming .cont-inner .font-w {
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: bold; }
@media screen and (max-width: 767px) {
  #streaming .cont-inner .btn-box {
    margin: 0 auto 10px; } }
#streaming .cont-inner .btn-box .btn-voicy {
  color: #15437e;
  background: #fff;
  outline: 1px solid #15437e;
  outline-offset: -7px; }
  #streaming .cont-inner .btn-box .btn-voicy a {
    color: #15437e;
    outline: 2px solid #15437e; }
#streaming .cont-inner .season-ttl {
  margin-bottom: 15px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: bold;
  font-size: 1.1em; }
  @media screen and (max-width: 767px) {
    #streaming .cont-inner .season-ttl {
      font-size: 1.3em;
      line-height: 1.5em;
      margin-bottom: 10px; } }
@media screen and (max-width: 767px) {
  #streaming .cont-inner .movie {
    margin-bottom: 10px; } }
#streaming .cont-inner .movie .youtube {
  max-width: 480px;
  padding-top: 0;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    #streaming .cont-inner .movie .youtube {
      max-width: 100%; } }
  #streaming .cont-inner .movie .youtube a img {
    width: 100%;
    height: auto; }
#streaming .cont-inner .movie-btn {
  margin-top: 0; }
  #streaming .cont-inner .movie-btn .btn-haishin {
    color: #15437e;
    background: #e5e518;
    outline: 1px solid #15437e; }
    #streaming .cont-inner .movie-btn .btn-haishin a {
      color: #15437e; }
  #streaming .cont-inner .movie-btn .btn-dramacd {
    color: #fff;
    background: #15437e;
    outline: 1px solid #fff; }
    #streaming .cont-inner .movie-btn .btn-dramacd a {
      color: #fff; }

#news {
  padding-bottom: 20px;
  background: url(../images/background_2.png) #e2f4ff; }
  @media screen and (max-width: 767px) {
    #news {
      padding-bottom: 40px; } }
  #news .cont-inner ul li {
    margin-bottom: 30px; }
    #news .cont-inner ul li .lead {
      width: 40%;
      margin: 0 auto 15px;
      line-height: 1.5em;
      border-bottom: 2px solid #15437e; }
      @media screen and (max-width: 767px) {
        #news .cont-inner ul li .lead {
          width: 100%;
          font-size: 18px; } }
  #news .cont-inner .news-lead-sub {
    font-size: 18px;
    color: #000;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }
  #news .cont-inner .news-schedul {
    margin: 30px 0; }
    #news .cont-inner .news-schedul dl {
      width: 500px;
      margin: 0 auto 10px;
      display: flex;
      justify-content: space-around; }
      @media screen and (max-width: 767px) {
        #news .cont-inner .news-schedul dl {
          width: 100%; } }
      #news .cont-inner .news-schedul dl dt {
        text-align: left;
        color: #000;
        font-size: 16px; }
      #news .cont-inner .news-schedul dl dd {
        text-align: left; }
  #news .cont-inner a {
    color: #046dfc; }
  #news .cont-inner .btn-manga {
    color: #15437e;
    background: #e5e518;
    outline: 1px solid #15437e;
    outline-offset: -7px;
    display: block;
    position: relative;
    max-width: 480px;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    margin-bottom: 15px; }
    #news .cont-inner .btn-manga a {
      color: #15437e; }

#character .chara-box {
  width: 1200px;
  justify-content: space-around;
  flex-wrap: wrap; }
  @media screen and (max-width: 767px) {
    #character .chara-box {
      width: 100%; } }
  #character .chara-box li {
    width: 24%; }
    @media screen and (max-width: 767px) {
      #character .chara-box li {
        width: 48%; } }

@media screen and (max-width: 767px) {
  #story .cont-inner {
    width: 90%; } }

/* ==========================================================================
  remodal
========================================================================== */
.remodal-overlay {
  background: rgba(0, 0, 0, 0.5); }

.remodal {
  max-width: 900px;
  width: 100%;
  padding: 50px; }
  @media screen and (max-width: 767px) {
    .remodal {
      padding: 20px; } }

/* ==========================================================================
  recipe
========================================================================== */
.recipe-cs {
  font-size: 40px;
  color: #00496e;
  text-align: center;
  padding: 200px 0; }
  @media screen and (max-width: 767px) {
    .recipe-cs {
      font-size: 30px;
      padding: 120px 0; } }

.swiper-nav {
  cursor: pointer; }
  .swiper-nav img {
    margin-bottom: 10px; }
  @media screen and (min-width: 768px) {
    .swiper-nav {
      -webkit-transition: all .3s;
      transition: all .3s; }
      .swiper-nav img {
        -webkit-transition: all .3s;
        transition: all .3s; }
      .swiper-nav:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -webkit-transition: all .3s;
        transition: all .3s; }
        .swiper-nav:hover img {
          box-shadow: 0  0 10px #14608f;
          -webkit-transition: all .3s;
          transition: all .3s; } }

@media screen and (min-width: 768px) {
  .swiper-recipe {
    padding: 20px 0; } }