/* ==========================================================================
Foundation
========================================================================== */
/* Reset
----------------------------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, button, textarea, select {
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Base
	----------------------------------------------------------------- */
html {
  overflow-x: hidden;
  height: 100%;
  color: #fff;
  background: #000;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
html.is-modal {
  overflow-y: hidden;
}

body {
  color: #fff;
  background: #000;
  -webkit-text-size-adjust: 100%;
  font-family: "birch-std", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9722222222vw;
  letter-spacing: 0.005em;
  line-height: calc(28 / 14);
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 600px) {
  body {
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
  }
  .is-sp body {
    min-height: 100dvh;
  }
}
body.is-transition {
  pointer-events: none;
}
.is-modal body {
  overflow-y: hidden;
}

img {
  vertical-align: bottom;
  backface-visibility: hidden;
}

a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.6s;
}
@media screen and (min-width: 601px) {
  a:hover {
    opacity: 0.7;
  }
}
a.is-disable {
  pointer-events: none;
}

strong, em {
  font-weight: 600;
}

/* ==========================================================================
	Layout
========================================================================== */
/* ==========================================================================
	Object
========================================================================== */
/* Component
----------------------------------------------------------------- */
/* Project
----------------------------------------------------------------- */
.preload {
  opacity: 0;
  position: absolute;
  z-index: -1;
  left: -100%;
  top: -100%;
  width: 0;
  height: 0;
}

.teaser {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  filter: brightness(1.2);
  transition: filter 3s linear;
}
.teaser::before {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.15;
  z-index: 1;
}
@media screen and (max-width: 600px) {
  .teaser::before {
    opacity: 0;
  }
}
.teaser::after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  opacity: 1;
  transition: opacity 3s linear;
  pointer-events: none;
  z-index: 10;
}
.is-opening .teaser {
  filter: brightness(1);
  background: url(../img/img-keyvisual.jpg) no-repeat center center/100% auto;
}
@media screen and (max-width: 768px) {
  .is-opening .teaser {
    background: url(../img/img-keyvisual.jpg) no-repeat top center/100% auto;
  }
}
.is-opening .teaser::after {
  opacity: 0;
}
.teaser__inner {
  position: absolute;
  left: 50%;
  bottom: 126px;
  transform: translate(-50%, 0);
  z-index: 1;
}
@media screen and (max-width: 600px) {
  .teaser__inner {
    bottom: auto;
    top: 88.9333333333vw;
  }
}
.teaser__logo {
  text-align: center;
}
.teaser__logo img {
  height: auto;
  max-width: 537.22px;
}
@media screen and (max-width: 600px) {
  .teaser__logo img {
    width: 80.808vw;
  }
}
.teaser__text {
  font-family: "birch-std", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.035em;
  line-height: calc(40 / 28);
  margin-top: 20px;
}
@media screen and (max-width: 600px) {
  .teaser__text {
    font-size: 5.3333333333vw;
    letter-spacing: 0.035em;
    line-height: calc(28 / 20);
    margin-top: 4vw;
  }
}
.teaser__sns {
  margin-top: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 600px) {
  .teaser__sns {
    margin-top: 13.3333333333vw;
  }
}
.teaser__sns li + li {
  margin-left: 30px;
}
@media screen and (max-width: 600px) {
  .teaser__sns li + li {
    margin-left: 8vw;
  }
}
.teaser__sns li a img {
  height: auto;
}
.teaser__sns li a img.ext-instagram {
  width: 23.5px;
}
@media screen and (max-width: 600px) {
  .teaser__sns li a img.ext-instagram {
    width: 6.2666666667vw;
  }
}
.teaser__sns li a img.ext-x {
  width: 21.78px;
}
@media screen and (max-width: 600px) {
  .teaser__sns li a img.ext-x {
    width: 5.808vw;
  }
}
.teaser__sns li a img.ext-youtube {
  width: 27.89px;
}
@media screen and (max-width: 600px) {
  .teaser__sns li a img.ext-youtube {
    width: 7.4373333333vw;
  }
}
.teaser__sns li a img.ext-tiktok {
  width: 22px;
}
@media screen and (max-width: 600px) {
  .teaser__sns li a img.ext-tiktok {
    width: 5.8666666667vw;
  }
}
.teaser__copy {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 31px;
  text-align: center;
  z-index: 2;
  font-family: "birch-std", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: calc(27 / 18);
}
@media screen and (max-width: 600px) {
  .teaser__copy {
    bottom: 5.3333333333vw;
    font-size: 4.2666666667vw;
    letter-spacing: 0.06em;
    line-height: calc(21 / 16);
  }
}

/* Utility
----------------------------------------------------------------- */
@media screen and (min-width: 601px) {
  .u-sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  .u-pc_only {
    display: none !important;
  }
}
.is-disable {
  opacity: 0.3 !important;
  pointer-events: none !important;
}
.is-disable a {
  pointer-events: none !important;
}

.u-breakctrl {
  display: inline-block;
}

.js-lazy {
  opacity: 1;
  transition: opacity 0.4s;
}
.js-lazy[src^="/asset/img/dummy"] {
  opacity: 0;
}

.js-hoverimg {
  display: block;
}
.js-hoverimg img:not(.js-inview), .js-hoverimg img.js-inview.is-animated {
  transition: opacity 0.6s, transform 0.8s, filter 0.8s, -webkit-clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1);
  transition: clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1), opacity 0.6s, transform 0.8s, filter 0.8s;
  transition: clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1), opacity 0.6s, transform 0.8s, filter 0.8s, -webkit-clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1);
}
.js-hoverimg img.js-invew.ext-image {
  transition: opacity 0.6s, transform 0.8s, filter 0.8s, -webkit-clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1);
  transition: clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1), opacity 0.6s, transform 0.8s, filter 0.8s;
  transition: clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1), opacity 0.6s, transform 0.8s, filter 0.8s, -webkit-clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1);
}
.is-pc .js-hoverimg:hover {
  opacity: 1 !important;
}
.is-pc .js-hoverimg:hover img:not(.js-inview), .is-pc .js-hoverimg:hover img.js-inview.is-animated {
  transform: scale(1.1);
}
.is-pc .js-hoverimg.is-active img {
  transform: scale(1.2);
  filter: blur(10px);
  opacity: 0;
}

.js-inview.ext-float {
  opacity: 0;
  transform: translateY(min(40px, 2.7777777778vw)) translateZ(0);
  transition: transform 0.75s cubic-bezier(0.33, 1, 0.68, 1), opacity 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-inview.ext-float.is-animated {
  opacity: 1;
  transform: none;
}
.js-inview.ext-opacity {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-inview.ext-opacity.is-animated {
  opacity: 1;
}
.js-inview.ext-bounce {
  opacity: 0;
  transform: translateY(min(40px, 2.7777777778vw)) translateZ(0);
  transition: transform 0.4s cubic-bezier(0.12, 0.74, 0.61, 1.5) 0.1s, opacity 0.2s linear 0s;
}
.js-inview.ext-bounce.is-animated {
  opacity: 1;
  transform: none;
}

/* Animations */
@keyframes rotationBg {
  0% {
    background: url(../img/img-keyvisual_02a.svg?ver2) repeat-x center top/auto 100%;
  }
  33% {
    background: url(../img/img-keyvisual_02b.svg?ver2) repeat-x center top/auto 100%;
  }
  66% {
    background: url(../img/img-keyvisual_02c.svg?ver2) repeat-x center top/auto 100%;
  }
}
@keyframes rotationBgSp {
  0% {
    background: url(../img/img-keyvisual_02a_sp.svg?ver2) no-repeat center top/auto 100%;
  }
  33% {
    background: url(../img/img-keyvisual_02b_sp.svg?ver2) no-repeat center top/auto 100%;
  }
  66% {
    background: url(../img/img-keyvisual_02c_sp.svg?ver2) no-repeat center top/auto 100%;
  }
}