@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップ
===================================================================== */
/* =====================================================================
    mv
======================================================================*/
.mv h1 {
  width: calc(706 / 750 * 100%);
}

.mv_date {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(570 / 750 * 100%);
  width: calc(650 / 750 * 100%);
}

@media screen and (min-width: 768px) {
  .top_inner {
    position: relative;
    margin: 0 auto;
    width: calc(1000 / 1600 * 100%);
    max-width: 1000px !important;
  }
  .mv {
    margin-top: calc(20 / 1000 * 100%);
    padding: calc(16 / 1000 * 100%) 0 calc(230 / 1000 * 100%);
  }
  .mv h1 {
    margin: 0 0 0 calc(10 / 1000 * 100%);
    width: calc(759 / 1000 * 100%);
  }
  .mv_date {
    position: relative;
    top: 0;
    left: 0;
    transform: translateX(0);
    margin: calc(5 / 1000 * 100%) 0 0 calc(33 / 1000 * 100%);
    width: calc(466 / 1000 * 100%);
  }
}
/* =====================================================================
    top
======================================================================*/
.top {
  position: relative;
  padding-bottom: 30rem;
  opacity: 0;
  transition: 0.5s ease;
}
.top.fadeIn {
  opacity: 1;
}

.top_story {
  position: relative;
  height: 87.2rem;
}
.top_story li {
  position: absolute;
  top: 0;
  left: 0;
}
.top_story li a img {
  width: auto;
  height: 23.7rem;
}
.top_story li.new a::after {
  content: "";
  position: absolute;
  display: block;
  top: 2.1rem;
  right: -4.7rem;
  width: 10rem;
  height: 7.2rem;
  background: url(../images/top/icon_new.png) no-repeat center/contain;
}
.top_story li.nolink {
  pointer-events: none;
}
.top_story li:nth-child(1) {
  margin: 0 0 0 calc(32 / 750 * 100%);
}
.top_story li:nth-child(2) {
  margin: calc(155 / 750 * 100%) 0 0 calc(230 / 750 * 100%);
}
.top_story li:nth-child(3) {
  margin: calc(28 / 750 * 100%) 0 0 calc(480 / 750 * 100%);
}
.top_story li:nth-child(4) {
  margin: calc(311 / 750 * 100%) 0 0 calc(25 / 750 * 100%);
}
.top_story li:nth-child(5) {
  margin: calc(278 / 750 * 100%) 0 0 calc(467 / 750 * 100%);
}
.top_story li:nth-child(6) {
  margin: calc(441 / 750 * 100%) 0 0 calc(215 / 750 * 100%);
}
.top_story li:nth-child(7) {
  margin: calc(545 / 750 * 100%) 0 0 calc(447 / 750 * 100%);
}
.top_story li:nth-child(8) {
  margin: calc(680 / 750 * 100%) 0 0 calc(41 / 750 * 100%);
}
.top_story li:nth-child(8) a img {
  height: 26.1rem;
}

.top_nav {
  position: relative;
  height: 49.7rem;
}
.top_nav li {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(166 / 750 * 100%);
}
.top_nav li.intro {
  margin: calc(119 / 750 * 100%) 0 0 calc(147 / 750 * 100%);
}
.top_nav li.navigator {
  margin: 0 0 0 calc(411 / 750 * 100%);
}
.top_nav li.story {
  margin: calc(208 / 750 * 100%) 0 0 calc(323 / 750 * 100%);
}
.top_nav li.original {
  margin: calc(371 / 750 * 100%) 0 0 calc(489 / 750 * 100%);
}
.top_nav li.cast {
  margin: calc(166 / 750 * 100%) 0 0 calc(553 / 750 * 100%);
}
.top_nav li.music {
  margin: calc(409 / 750 * 100%) 0 0 calc(267 / 750 * 100%);
}
.top_nav li.movie {
  margin: calc(289 / 750 * 100%) 0 0 calc(45 / 750 * 100%);
}

.top_sns {
  position: relative;
  height: 28rem;
}
.top_sns li {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(155 / 750 * 100%);
}
.top_sns li.twitter {
  margin: calc(117 / 750 * 100%) 0 0 calc(239 / 750 * 100%);
}
.top_sns li.insta {
  margin: 0 0 0 calc(68 / 750 * 100%);
}
.top_sns li.tiktok {
  margin: calc(70 / 750 * 100%) 0 0 calc(442 / 750 * 100%);
}

.top_story li {
  transition: 1.6s ease-in-out;
  -webkit-animation: fuwafuwa 3s infinite ease-in-out 0.8s alternate;
          animation: fuwafuwa 3s infinite ease-in-out 0.8s alternate;
}

.top_nav li {
  transition: 1.6s ease-in-out;
  -webkit-animation: fuwafuwa 3s infinite ease-in-out 0s alternate;
          animation: fuwafuwa 3s infinite ease-in-out 0s alternate;
}

.top_sns li {
  transition: 1.6s ease-in-out;
  -webkit-animation: fuwafuwa 3s infinite ease-in-out 0.4s alternate;
          animation: fuwafuwa 3s infinite ease-in-out 0.4s alternate;
}

@-webkit-keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}
@media screen and (min-width: 768px) {
  .top {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
  }
  .top_story {
    height: auto;
  }
  .top_story li a img {
    height: 12.7rem;
  }
  .top_story li.new a::after {
    top: 0.5rem;
    right: -2.9rem;
    width: 5.9rem;
    height: 4.4rem;
  }
  .top_story li:nth-child(1) {
    margin: calc(30 / 1000 * 100%) 0 0 calc(383 / 1000 * 100%);
  }
  .top_story li:nth-child(2) {
    margin: calc(130 / 1000 * 100%) 0 0 calc(471 / 1000 * 100%);
  }
  .top_story li:nth-child(3) {
    margin: calc(10 / 1000 * 100%) 0 0 calc(550 / 1000 * 100%);
  }
  .top_story li:nth-child(4) {
    margin: calc(162 / 1000 * 100%) 0 0 calc(647 / 1000 * 100%);
  }
  .top_story li:nth-child(5) {
    margin: calc(26 / 1000 * 100%) 0 0 calc(700 / 1000 * 100%);
  }
  .top_story li:nth-child(6) {
    margin: calc(20 / 1000 * 100%) 0 0 calc(857 / 1000 * 100%);
  }
  .top_story li:nth-child(7) {
    margin: calc(148 / 1000 * 100%) 0 0 calc(799 / 1000 * 100%);
  }
  .top_story li:nth-child(8) {
    margin: calc(281 / 1000 * 100%) 0 0 calc(786 / 1000 * 100%);
  }
  .top_story li:nth-child(8) a img {
    height: 14.2rem;
  }
  .top_nav {
    height: auto;
  }
  .top_nav li {
    width: calc(102 / 1000 * 100%);
  }
  .top_nav li a img {
    transition: 0.3s ease;
  }
  .top_nav li a::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.3s ease;
  }
  .top_nav li a:hover img {
    opacity: 0;
  }
  .top_nav li a:hover::before {
    opacity: 1;
  }
  .top_nav li.intro {
    margin: calc(561 / 1000 * 100%) 0 0 calc(741 / 1000 * 100%);
  }
  .top_nav li.intro a::before {
    background: url(../images/top/nav01_h.png) no-repeat center/contain;
  }
  .top_nav li.navigator {
    margin: calc(436 / 1000 * 100%) 0 0 calc(803 / 1000 * 100%);
  }
  .top_nav li.navigator a::before {
    background: url(../images/top/nav02_h.png) no-repeat center/contain;
  }
  .top_nav li.story {
    margin: calc(565 / 1000 * 100%) 0 0 calc(591 / 1000 * 100%);
  }
  .top_nav li.story a::before {
    background: url(../images/top/nav03_h.png) no-repeat center/contain;
  }
  .top_nav li.original {
    margin: calc(521 / 1000 * 100%) 0 0 calc(897 / 1000 * 100%);
  }
  .top_nav li.original a::before {
    background: url(../images/top/nav04_h.png) no-repeat center/contain;
  }
  .top_nav li.cast {
    margin: calc(684 / 1000 * 100%) 0 0 calc(517 / 1000 * 100%);
  }
  .top_nav li.cast a::before {
    background: url(../images/top/nav05_h.png) no-repeat center/contain;
  }
  .top_nav li.music {
    margin: calc(680 / 1000 * 100%) 0 0 calc(666 / 1000 * 100%);
  }
  .top_nav li.music a::before {
    background: url(../images/top/nav06_h.png) no-repeat center/contain;
  }
  .top_nav li.movie {
    margin: calc(651 / 1000 * 100%) 0 0 calc(841 / 1000 * 100%);
  }
  .top_nav li.movie a::before {
    background: url(../images/top/nav07_h.png) no-repeat center/contain;
  }
  .top_sns {
    height: auto;
  }
  .top_sns li {
    width: calc(91 / 1000 * 100%);
  }
  .top_sns li a img {
    transition: 0.3s ease;
  }
  .top_sns li a::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.3s ease;
  }
  .top_sns li a:hover img {
    opacity: 0;
  }
  .top_sns li a:hover::before {
    opacity: 1;
  }
  .top_sns li.twitter {
    margin: calc(730 / 1000 * 100%) 0 0 calc(33 / 1000 * 100%);
  }
  .top_sns li.twitter a::before {
    background: url(../images/top/btn_sns1_h.png) no-repeat center/contain;
  }
  .top_sns li.insta {
    margin: calc(730 / 1000 * 100%) 0 0 calc(173 / 1000 * 100%);
  }
  .top_sns li.insta a::before {
    background: url(../images/top/btn_sns2_h.png) no-repeat center/contain;
  }
  .top_sns li.tiktok {
    margin: calc(730 / 1000 * 100%) 0 0 calc(312 / 1000 * 100%);
  }
  .top_sns li.tiktok a::before {
    background: url(../images/top/btn_sns3_h.png) no-repeat center/contain;
  }
}
/*# sourceMappingURL=top.css.map */