@charset "utf-8";

/* ==========================================
*
*  layout
*
========================================== */

@media screen and (max-width:900px) {
  #main_inner{
  }
  #main_inner>div{
  }
}


/* ===== (mix-blend-mode) ===== */

#wrapper {
  background: #fff;
}

/* ==========================================
*
*  contents
*
========================================== */

.main_sa02 {
    position: relative;
    margin-top: -10%;
    padding-top: 7%;
}

/*
  section
======================== */

.contSection {
  padding: 10rem 0rem 5rem;
  position: relative;
  /* overflow: hidden; */
  z-index: 2;
  font-size: 3rem;
  /* max-width: 1280px; */
  margin: 0 auto;
}

.contSection.contSection--comment {
  padding: 25vw 4vw 25vw;
}

.contSection.contSection--movie {
  /* padding: 0rem 0rem 10rem; */
}

.contSection.contSection--story {
  padding: 5vw 0vw 0vw;
}


/*
  inner
======================== */

.contSection__inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 2;
  padding: 0 5rem;
}

@media screen and (max-width:900px) {
  .contSection {
    padding: 10vw 0vw 10vw;
    position: relative;
    z-index: 999;
    font-size: 3rem;
    margin: 0 auto;
  }
  .contSection__inner {
    overflow: hidden;
    padding: 0;
  }

  .logoGroupImg {}

  .logoGroupImg img{
    width:90%;
  }
}

@media screen and (max-width:900px) {
  .contSection__inner {
    overflow: hidden;
    padding: 0vw 5vw 0vw;
  }

}

/*
  heading
======================== */

.contHead {
  font-family: YakuHanJPs, Corbel, Arial, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  font-size: 5rem;
  font-weight: 400;
  letter-spacing: .2em;
  margin: 0 0 1.5em;
  color: #7bdbef;
  text-align: center;
}

.contSection.contSection--story .contHead {
  text-align:center;
}

@media screen and (max-width:900px) {
  .contHead {
    text-align: left;
    margin: 0 0 0.5em 0;
  }
}

@media screen and (max-width:767px) {
  .contHead {
    font-size: 8.0vw;
  }
}


/* ==========================================
*
*  parallax
*
========================================== */

.js-parallax {
  transition: 1.0s;
}

.js-parallax:not(.is-show) {
  opacity: .5;
  filter: blur(10px);
  transform: translate3d(0, 30px, 0);
}

/* ==========================================
*
*  waves
*
========================================== */

/*
  wrapper
======================== */

.waterBg {
  position: absolute;
  top: 0%;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0px 0 0;
  pointer-events: none;
  z-index: auto;
}

/* ===== #contents ===== */

.waterBg--contents {
  mix-blend-mode: screen;
}

@media screen and (max-width:767px) {
  .waterBg--contents.fixed {
    position: fixed;
    height: 100vh;
    width: 100vw;
  }
}

/* ===== #comment ===== */

.waterBg--comment {
  mix-blend-mode: hard-light;
  opacity: .2;
  padding-bottom: 80px;
}

/* ===== #movie ===== */

.waterBg--movie {
  /* mix-blend-mode: hard-light; */
  /* opacity: .2; */
  /* padding-bottom: 80px; */
}

/*
  inner
======================== */

.waterBg__inner {
  height: 100%;
}

/* ===== #contents ===== */

.waterBg--contents .waterBg__inner {
  background: #93e1df;
}

/* ===== #comment ===== */

.waterBg--comment .waterBg__inner {
  background: #007bf8;
}

/* ===== #movie ===== */

.waterBg--movie .waterBg__inner {
  background: #ffffff;
}

/*
  waves
======================== */

/*
.waterBg::before,
.waterBg--comment::after,
.waterBg--movie::after {
  content: "";
  position: absolute;
  left: 0;
  width: calc(1920px * 3);
  height: 80px;
  background-position: left bottom;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

*/

/* ===== both ===== */

/*
.waterBg::before {
  top: 0;
  animation-name: wave;
}
*/

/* ===== #comment ===== */

.waterBg--comment::after {
  bottom: 0;
  animation-name: waveBottom;
}

/* ===== #movie ===== */

.waterBg--movie::after {
  bottom: 0;
  animation-name: waveBottom;
}

/* ===== #contents - img src ===== */

.waterBg--contents::before {
  background-image: url(../../images/main/tz2/wave_contents.png);
}

/* ===== #comment - img src ===== */

.waterBg--comment::before,
.waterBg--comment::after {
  background-image: url(../../images/main/tz2/wave_comment.png);
}

/* ===== #movie - img src ===== */

.waterBg--movie::before,
.waterBg--movie::after {
  background-image: url(../../images/main/tz2/wave_comment.png);
}


/*
  animations
======================== */

@keyframes wave {
  0% {
    transform: translate3d(0, 0, 0)
  }
  100% {
    transform: translate3d(-1920px, 0, 0)
  }
}

@keyframes waveBottom {
  0% {
    transform: translate3d(0, 0, 0) scale(1, -1)
  }
  100% {
    transform: translate3d(-1920px, 0, 0) scale(1, -1)
  }
}

/*
  ie / edge
======================== */

[data-browser="IE"] .waterBg,
[data-browser="Edge"] .waterBg {
  mix-blend-mode: normal;
}

[data-browser="IE"] .waterBg--contents,
[data-browser="Edge"] .waterBg--contents {
  opacity: .9;
  filter: brightness(1.7);
}

[data-browser="IE"] .waterBg--comment,
[data-browser="Edge"] .waterBg--comment,
[data-browser="IE"] .waterBg--movie,
[data-browser="Edge"] .waterBg--movie {
  opacity: .2;
  filter: brightness(2);
}

/* ==========================================
*
*  bubbles
*
========================================== */

.bubblesWrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0px;
  left: 0;
  pointer-events: none;
  z-index: 1;
  transition: .5s opacity;
}


.is-animateWaiting .bubblesWrap,
.is-animateStart .bubblesWrap {
  z-index: 1042;
}

body:not(.is-animateEnd) .bubblesWrap {
  opacity: .5;
}

.snowfall-flakes {
  top: 0;
  position: absolute;
  z-index: 999999;
}

@media screen and (max-width: 599.9px) {
  .snowfall-flakes {
    max-width: 30px;
  }
}

/* ==========================================
*
*  laoding
*
========================================== */

/*
  body
======================== */

body.is-animateWaiting:not(.is-charaShow) {
  overflow: hidden;
}

/*
  wrapper
======================== */
.is-animateEnd .loading,
.is-animateEnd .opLogoWrap{
  display:none !important;
}

.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background: url(../../images/main/common/kv1_bg.jpg) top / cover no-repeat;
}
.opLogoWrap{
  position:fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display:flex;
  background: url(../../images/main/common/kv1_bg.jpg) top / cover no-repeat;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 9998;
}

.opLogoWrap span{
  height: 70%;
  }

.opLogoWrap span img{
  height: 100%;
  width:auto;
  max-width:initial;
  }




@media screen and (max-width:767px) {
  .opLogoWrap{
    position:fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    display:flex;
  background: url(../../images/main/common/kv1_bg.jpg) top / auto 130% no-repeat;
    align-items: start;
    text-align: center;
    justify-content: center;
  }

  .opLogoWrap span{
    height: auto;
    width: 85%;
    height: 58%;
    display: flex;
    align-items: flex-end;
    }

  .opLogoWrap span img{
    height: auto;
    width: 100%;
    max-width:initial;
  }
}

/*
  inner
======================== */

.loading__inner {
  height: 100%;
  display: flex;
  align-items: center;
}

body.is-animateWaiting:not(.is-charaShow) .loading__inner {
  /* padding-right: 37px; */
}

@media screen and (max-width:767px) {
  .loading__inner {
    height: 100%;
    display: flex;
    align-items: start;
  }
}

/*
  img
======================== */

.loading__img {
  margin: 0 auto;
  text-align: center;
  height: 60%;
}

.loading__svg {
  width: 100%;
  height: 100%;
}

@media screen and (max-width:767px) {
 .loading__img {
  margin: 0 auto;
  text-align: center;
  height: 80%;
  width:60%;
  } 
}

/*
  words
======================== */

.loadingWord {
  animation: fadeIn 1.5s ease 0s 1 both,
  slideIn 1.5s ease 0s 1 both;
}

.loadingWord--1 {
  animation-delay: 100ms;
}

/* 十 */

.loadingWord--2 {
  animation-delay: 300ms;
}

/* 七 */

.loadingWord--3 {
  animation-delay: 500ms;
}

/* 回 */

.loadingWord--4 {
  animation-delay: 700ms;
}

/* 目 */

.loadingWord--5 {
  animation-delay: 900ms;
}

/* の */

.loadingWord--6 {
  animation-delay: 1100ms;
}

/* 夏 */

.loadingWord--7 {
  animation-delay: 1300ms;
}

/* に */

.loadingWord--8 {
  animation-delay: 2100ms;
}

/* 君 */

.loadingWord--9 {
  animation-delay: 2300ms;
}

/* と */

.loadingWord--10 {
  animation-delay: 2500ms;
}

/* 会 */

.loadingWord--11 {
  animation-delay: 2700ms;
}

/* う */

.loadingWord--12 {
  animation-delay: 2900ms;
}

/* ｜ */

/* ==========================================
*
*  mfp
*
========================================== */

.mfp-bg {
  background: linear-gradient(77deg,
  rgba(255, 208, 232, .95),
  rgba(0, 202, 245, .95) 21%,
  rgba(0, 123, 248, .95) 51%,
  rgba(0, 202, 245, .95) 75%,
  rgba(255, 208, 232, .95)) center/137% 137% !important;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0) 200%),
  url(../../images/main/tz2/bg_holo.jpg) top center / cover,
  linear-gradient(to top, #d5f6fe, #f7feff) !important;
}

.mfp-close::before,
.mfp-close::after {
  background: #01aaf4 !important;
}

.mfp-fade.mfp-bg {
  opacity: 0;
  transition: 2s;
}

/* overlay animate in */

.mfp-fade.mfp-bg.mfp-ready {
  opacity: .8;
}

/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: 2s;
  transition-delay: 1s;
}

/* content animate it */

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

/* content animate out */

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
  transition: 1.5s;
  transition-delay: 0s;
}