@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
.mv-contents,
.mv-title-container {
  perspective: 1000px;
  /* transitionアニメのチラツキ対応 */
}

/* メインビジュアル・クルッと解決 */
.rotate-anime-y {
  opacity: 0;
  transform: rotateY(0) translateY(50px);
}

/* クルッと回る */
.card,
.card_reverse,
.card_surface {
  perspective: 1000px;
  /* transitionアニメのチラツキ対応 */
}

.card {
  position: relative;
}

.card_reverse {
  position: absolute;
  top: 0;
  left: 0;
}

/* 表面の表示 */
.is-surface .card_surface,
.sub-illust:not(.passed) .card_surface {
  opacity: 1;
  transform: rotateY(0deg);
  transition:
    opacity 100ms 150ms,
    transform 300ms 150ms;
}

.is-surface .card_reverse,
.sub-illust:not(.passed) .card_reverse {
  opacity: 0;
  transform: rotateY(90deg);
  transition:
    opacity 50ms 200ms,
    transform 300ms;
}

/* 裏面の表示 */
.is-reverse .card_surface,
.sub-illust.passed .card_surface {
  opacity: 0;
  transform: rotateY(90deg);
  transition:
    opacity 50ms 200ms,
    transform 300ms;
}

.is-reverse .card_reverse,
.sub-illust.passed .card_reverse {
  opacity: 1;
  transform: rotateY(0deg);
  transition:
    opacity 100ms 150ms,
    transform 300ms 150ms;
}

/* あるあるお悩み */
.sub-aruaru {
  transition-property: all;
  transition-duration: 1.4s;
  transition-delay: 0s;
  transition-timing-function: ease;
  transform: skew(0deg, 0deg) translate(25px, 0px);
  opacity: 0;
}

.passed .sub-aruaru {
  transform: skew(0deg, -4deg) translate(25px, 0);
  opacity: 1;
}

/* サブコンテンツ */
.sub-nayamuhito,
.sub-kurutto,
.sub-title,
.sub-contents {
  transition-property: all;
  transition-duration: 1.4s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.sub-contents {
  opacity: 0;
}

.sub-contents.passed {
  box-shadow: 8px 8px 10px rgba(0, 0, 0, .5);
  opacity: 1;
}

.sub-nayamuhito {
  opacity: 0;
}

.passed .sub-nayamuhito {
  opacity: 1;
}

.passed .sub-kurutto {
  animation: rotate-anime01 .7s linear;
}

@keyframes rotate-anime01 {

  0% {
    transform: rotateY(0) skew(0deg, 0deg);
    opacity: 0;
  }

  100% {
    transform: rotateY(360deg) skew(0deg, -4deg);
    opacity: 1;
  }
}

/* サブイラスト */
.sub-illust {
  transition-property: all;
  transition-duration: 1.4s;
  transition-delay: 0s;
  transition-timing-function: ease;
  opacity: 0;
}

.passed .sub-illust {
  opacity: 1;
}

.card_reverse .dialogues {
  transition-property: opacity transform;
  transition-duration: .4s;
  transition-delay: 1.5s;
  transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}

.sub-illust:not(.passed) .dialogues {
  opacity: 0;
  transform: scale(0.9, 0.9);
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {

  /* あるあるお悩み */
  .sub-aruaru {
    transform: skew(0deg, 0deg) translate(-10px, 0px);
  }

  .passed .sub-aruaru {
    transform: skew(0deg, -4deg) translate(-10px, -20px);
  }

  /* サブコンテンツ */
  .sub-contents.passed {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
  }
}