@charset "UTF-8";

:root {
  --sh:1lvh;
  --pcvw: 1vw;
  --red: #e60012;
  --white: #ffffff;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

body {
  width: 100%;
  background-color: #fff;
  color: #000;
}

.img100 {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 736px) {
  .onlypc {
    display: none !important;
  }
  svg .onlypc {
    display: none !important;
  }
}

@media screen and (min-width: 737px) {
  .onlysp {
    display: none !important;
  }
  svg .onlysp {
    display: none !important;
  }
}

ul {
  list-style-type: none;
}

/* === header === */
header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.header-logo {
  position: absolute;
  left: 4vw;
  top: 4vw;
  width: 31.2vw;
}

.header-sns {
  position: absolute;
  right: 4vw;
  top: 4vw;
  height: 9.47vw;
  display: flex;
  align-items: center;
  line-height: 0px;
}

.header-sns li:nth-of-type(n + 2) {
  margin-left: 2.13vw;
}

.-tw {
  width: 5.2vw;
}

.-x {
  width: 4.53vw;
}

.-fb {
  width: 4.8vw;
}

.-line {
  width: 4.67vw;
}

.-ytb {
  width: 5.47vw
}

section {
  position: relative;
  width: 100%;
  padding-top: 14.13vw;
  padding-bottom: 14.13vw;
}

/* === top === */
.top-bg {
  position: fixed;
  top: 0px;
  width: 100%;
  height:100vh;
}

.gsa .top-bg {
  height: calc(var(--sh, 1lvh) * 100);
}

.top-bg::after {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
  transition: opacity 0.5s var(--ease-in);
}

.loaded .top-bg::after {
  opacity: 0;
}

.top-bg img {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-bg1 {
  object-position: 70% center;
}

.top-bg2 {
  object-position: 90% center;
  opacity: 0;
  visibility: hidden;
  animation: top-bg-animation 16s infinite;
}

/* トップ画像を逆にする */
.top-bg-r .top-bg2 {
  animation-name: top-bg-animation2;
}

@keyframes top-bg-animation {
  0% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  40% {
    opacity: 0;
    visibility: visible;
  }
  50% {
    opacity: 1;
    visibility: visible;
  }
  90% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: visible;
  }
}

@keyframes top-bg-animation2 {
  0% {
    opacity: 1;
    visibility: visible;
  }
  40% {
    opacity: 1;
    visibility: visible;
  }
  50% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  90% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

.top h1 {
  margin: 51.5vh auto 3.07vw 4vw;
  width: 60vw;
}

.top p {
  margin: 3.07vw auto 14.13vw 4.4vw;
  width: 62.4vw;
}

/* === TV CM === */
.tvcm {
  background-color: var(--red);
}

h2 {
  position: relative;
  margin: 0px auto 6.67vw 8vw;
  line-height: 0px;
  overflow: hidden;
}

.tvcm h2 {
  width: 21.2vw;
}

.white-bline::after,
.red-bline::after,
.black-bline::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 1px;
  background-color: var(--white);
}

.red-bline::after {
  background-color: var(--red);
}

.black-bline::after {
  background-color: #000;
}

.tvcm-container {
  position: relative;
  width: 100%;
}

.tvcm-thumb {
  width: 89.34vw;
  margin: 0px 5.33vw;
  line-height: 0px;
}

.overflowx-hidden {
  overflow-x: hidden;
}

.keen-slider:not([data-keen-slider-disabled]) {
  overflow: visible;
}

.tvcm-title-container {
  position: relative;
  width: 89.34vw;
  margin: 4vw 5.33vw 0px;
}

.tvcm-title-container p {
  position: absolute;
  top: 0px;
  opacity: 0;
}

.tvcm-title-container p.title--active {
  animation: tvcm-title-active-animation 0.4s var(--ease-out) forwards;
}

.tvcm-title-container p.title--deactive {
  animation: tvcm-title-deactive-animation 0.4s var(--ease-out) forwards;
}

@keyframes tvcm-title-active-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    transform: translate(0, 30%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0%);
  }
}

@keyframes tvcm-title-deactive-animation {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50% {
    opacity: 0;
    transform: translate(0, -30%);
  }
  100% {
    opacity: 0;
  }
}

.tvcm-title-container p:first-of-type {
  position: relative;
}

.about-btns {
  position: relative;
  margin: 11.2vw auto 0px;
  text-align: center;
}

.about-btn {
  position: relative;
  border: 1px solid #fff;
  border-radius: 100vw;
  display: inline-block;
  padding: 3.6vw 5.87vw;
  line-height: 0px;
  box-sizing: border-box;
  /*overflow: hidden;*/
}

.about-btn-hover {
  position: absolute;
  top: 3.6vw;
  left: 5.87vw;
  opacity: 0;
}

.about-btn-red {
  border-color: var(--red);
}

.about-btn:nth-of-type(n + 2) {
  margin-top: 2.67vw;
}

.tvcm-about-btn1 {
  width: 43.47vw;
  height: auto;
}

.tvcm-about-btn2 {
  width: 74vw;
  height: auto;
}

/* === WEB-CM === */
.webcm {
  background-color: var(--white);
}

.webcm h2 {
  width: 26.53vw;
}

.webcm-container {
  position: relative;
  width: 89.34vw;
  margin: 0px 5.33vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.webcm-container > div {
  width: 43.33vw;
}

.webcm-container > div:nth-last-of-type(n + 3) {
  margin-bottom: 4.67vw;
}

/* === MAKING === */
.making {
  background-color: var(--white);
}

.making h2 {
  width: 26.8vw;
}

.making-movie-container {
  position: relative;
  width: 89.34vw;
  margin: 0px 5.33vw;
}

/* === 線 === */
.line1 {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--white);
}

.line1::after {
  content: "";
  display: block;
  width: 84vw;
  height: 1px;
  background-color: var(--red);
  margin: 0px auto;
}

.line2 {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--red);
}

/* === CAST === */
.cast {
  background-color: var(--white);
}

.cast h2 {
  width: 16.27vw;
}

.cast-list {
  width: 84vw;
  margin: 0px auto;
}

.cast-list li {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.cast-list li:nth-of-type(n + 2) {
  margin-top: 4.8vw;
}

.cast-photo {
  width: 26.8vw;
  line-height: 0px;
}

.cast-text {
  position: relative;
  width: 53.07vw;
}

.cast-name {
  position: relative;
  line-height: 0px;
}

.cast-name-ja {
  width: 26.8vw;
  height: auto;
}

.cast-name-en1 {
  width: 26vw;
  height: auto;
}

.cast-name-en2 {
  width: 23.2vw;
  height: auto;
}

.cast-name-en {
  position: absolute;
  right: 0px;
  bottom: 0.13vw;
}

.cast-profile {
  position: absolute;
  left: 0px;
  bottom: 0px;
  line-height: 0px;
}

/* === footer === */
footer {
  position: relative;
  background-color: var(--white);
  padding-top: 12.54vw;
  padding-bottom: 6.67vw;
  line-height: 0px;
  text-align: center;
}

.copyright {
  width: 48vw;
  height: auto;
}

/* slider */
.navigation-wrapper {
  position: relative;
}

.dots {
  position: absolute;
  right: 0px;
  bottom: -5.47vw;
  display: flex;
  justify-content: flex-end;
  width: 89.34vw;
  margin: 0px 5.33vw;
}

.dot {
  border: none;
  width: 1.6vw;
  height: 1.6vw;
  border: solid 1px #ffffff;
  border-radius: 50%;
  margin: 0 0 0 1.2vw;
  cursor: pointer;
  box-sizing: border-box;
}

.dot:focus {
  outline: none;
}

.dot--active {
  background: #fff;
}

.arrow {
  width: 6.8vw;
  height: 7.33vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  fill: #fff;
  cursor: pointer;
}

.arrow--left {
  left: 3.6vw;
  fill: "#fff";
  background-image: url("../imgs/left_arrow.svg");
  transition: opacity 0.2s var(--ease-in-out);
}

.arrow--right {
  left: auto;
  right: 3.6vw;
  background-image: url("../imgs/right_arrow.svg");
  transition: opacity 0.2s var(--ease-in-out);
}

.arrow--disabled.arrow--left {
  opacity: 0 !important;
}

.arrow--disabled.arrow--right {
  opacity: 0 !important;
}

/* modal-btn */
.video-modal-btn {
  position: relative;
  cursor: pointer;
}

.video-play-btn {
  position: absolute;
  left: calc(50% - 7.865vw);
  top: calc(50% - 7.865vw);
  width: 15.73vw;
  height: 15.73vw;
  /*border: 2px solid #fff;*/
  background-image: url("../imgs/play_mark_line.svg");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-sizing: border-box;
}

.webcm .video-play-btn {
  left: calc(50% - 6.465vw);
  top: calc(50% - 6.465vw);
  width: 12.93vw;
  height: 12.93vw;
  background-image: url("../imgs/play_mark_line2.svg");
}

.video-play-btn::before {
  content: "";
  position: absolute;
  background-image: url("../imgs/play_mark_triangle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 35.59%;
  height: 39.83%;
  left: 36%;
  top: 30.085%;
}

/* modal */
.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  position: relative;
  width: 92vw;
  height: 51.75vw;
}

.modal__close {
  position: absolute;
  right: 0px;
  top: -6.82vw;
  width: 7.2vw;
  height: 4.157vw;
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  left: -0.555vw;
  top: calc(50% - 0.5px);
  width: 8.31vw;
  height: 1px;
  background-color: #fff;
  opacity: 0;
}

*[aria-hidden="true"] .modal__close::before {
  animation: mcfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
}

*[aria-hidden="true"] .modal__close::after {
  animation: mcfadeOut2 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.modal__close::before {
  animation: mcfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.modal__close::after {
  animation: mcfadeIn2 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.modal__content {
  line-height: 0px;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0px;
}

.modal__content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

@keyframes mmslideOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}

@keyframes mcfadeIn {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(30deg);
  }
}

@keyframes mcfadeIn2 {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(-30deg);
  }
}

@keyframes mcfadeOut {
  from {
    opacity: 1;
    transform: rotate(30deg);
  }
  to {
    opacity: 0;
    transform: rotate(0deg);
  }
}

@keyframes mcfadeOut2 {
  from {
    opacity: 1;
    transform: rotate(-30deg);
  }
  to {
    opacity: 0;
    transform: rotate(0deg);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

/* Scroll Reveal */
.top .sr2 h1 {
  opacity: 0;
  transition: opacity 1s 0s var(--ease-in);
}

.top-show .top .sr2-show h1 {
  opacity: 1;
}

.top .sr2 p {
  visibility: hidden;
  -webkit-mask-image: url("../imgs/gradation.png");
  mask-image: url("../imgs/gradation.png");
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position-y: 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position-y: 200%;
  mask-position-y: 200%;
  transition: -webkit-mask-position-y 2s 0s var(--ease-in),
    mask-position-y 3s 0s var(--ease-in);
}

.top-show .top .sr2-show p {
  visibility: visible;
  -webkit-mask-position-y: 0%;
}

h2.sr2 img {
  transform: translate(0, 100%);
  transition: transform 0.5s 0.1s var(--ease-out);
}

h2.sr2-show img {
  transform: translate(0, 0);
}

h2.sr2::after {
  transform: scale(0, 1);
  transition: transform 0.2s var(--ease-out);
}

h2.sr2-show::after {
  transform: scale(1, 1);
}

.sr2 .video-modal-btn {
  visibility: hidden;
}

.sr2-show .video-modal-btn {
  animation: rect-wipe 0.3s 0.2s var(--ease-out) forwards;
}

.tvcm .sr2-show .keen-slider__slide:nth-of-type(2) .video-modal-btn {
  animation-delay: 0.3s;
}

.tvcm .sr2-show .keen-slider__slide:nth-of-type(3) .video-modal-btn {
  animation-delay: 0.4s;
}

.tvcm .sr2-show .keen-slider__slide:nth-of-type(4) .video-modal-btn {
  animation-delay: 0.5s;
}

.webcm-container .sr2-show .video-modal-btn {
  animation: slide-up 0.3s 0s var(--ease-out) forwards;
}

.webcm-container .sr2 p {
  visibility: hidden;
}

.webcm-container .sr2-show p {
  animation: slide-up2 0.3s 0s var(--ease-out) forwards;
}

.sr2 .dots,
.sr2 .tvcm-title-container {
  opacity: 0;
  transform: translate(0, 50%);
  transition: opacity 0.5s 0.2s var(--ease-in-out),
    transform 0.5s 0.2s var(--ease-out);
}

.sr2 .arrow--left {
  opacity: 0;
  transform: translate(50%, -50%);
  transition: opacity 0.5s 0.2s var(--ease-in-out),
    transform 0.5s 0.2s var(--ease-out);
}

.sr2 .arrow--right {
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s 0.2s var(--ease-in-out),
    transform 0.5s 0.2s var(--ease-out);
}

.sr2-show .dots,
.sr2-show .tvcm-title-container {
  transform: translate(0, 0);
  opacity: 1;
}

.sr2-show .arrow--right,
.sr2-show .arrow--left {
  transform: translate(0, -50%);
  opacity: 1;
}

@keyframes rect-wipe {
  0% {
    visibility: visible;
    clip-path: polygon(30% 30%, 70% 30%, 70% 70%, 30% 70%);
  }
  99% {
    visibility: visible;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
  }
  100% {
    visibility: visible;
    clip-path: none;
  }
}

@keyframes slide-up {
  0% {
    visibility: visible;
    transform: translate(0, 40%);
  }
  100% {
    visibility: visible;
    transform: translate(0, 0);
  }
}

@keyframes slide-up2 {
  0% {
    visibility: visible;
    transform: translate(0, 300%);
  }
  100% {
    visibility: visible;
    transform: translate(0, 0);
  }
}

.sr2 .about-btn {
  visibility: hidden;
}

.sr2-show .about-btn {
  animation: scale-show 0.2s 0.2s var(--ease-out) forwards;
}

.sr2-show .about-btn:nth-of-type(2) {
  animation-delay: 0.3s;
}

@keyframes scale-show {
  0% {
    visibility: visible;
    transform: scale(0.8);
    animation-timing-function: var(--ease-out);
  }
  100% {
    visibility: visible;
    transform: scale(1);
  }
}

.sr2 .cast-photo {
  visibility: hidden;
}

.sr2-show .cast-photo {
  animation: slide-up-fadein 0.5s 0s var(--ease-out) forwards;
}

.sr2 .cast-name-ja,
.sr2 .cast-name-en,
.sr2 .cast-profile {
  visibility: hidden;
}

.sr2-show .cast-name-ja {
  animation: slide-up-fadein2 0.5s 0.1s var(--ease-out) forwards;
}

.sr2-show .cast-name-en {
  animation: slide-up-fadein2 0.5s 0.15s var(--ease-out) forwards;
}

.sr2-show .cast-profile {
  animation: fadein 0.5s 0.3s var(--ease-out) forwards;
}

@keyframes slide-up-fadein {
  0% {
    visibility: visible;
    transform: translate(0, 20%);
    opacity: 0;
  }
  100% {
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes slide-up-fadein2 {
  0% {
    visibility: visible;
    transform: translate(0, 50%);
    opacity: 0;
  }
  100% {
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}