/* 共通
----------------------------------------------------------------------------------------------------------*/

@import url("https://use.typekit.net/olo0pbb.css");

:root {
  --color-bg: #2E59A6; /* #2E59A6 / R:46% G:89% B:166% */
  --text-white: #fff;
  --font-engGothic: "akzidenz-grotesk-next-pro";
 
  /* SVG ノイズを data URI 化して --noise-svg に格納 */
  --noise-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");

}

html {
  overflow-x: hidden;
  background: var(--color-bg);
  scroll-behavior: auto;
}
body,html {
  height: 100%;
  color: var(--text-white);
  font-family: var(--font-engGothic);
}
body {
  background-image: linear-gradient(180deg, rgba(46, 89, 166, 1), rgba(46, 89, 166, 0.75) 50%, rgba(40, 77, 144, 1));
}

a {
  text-decoration: underline !important;
}
:lang(ja) {
  font-family: 'Noto Serif JP', serif !important;
  font-optical-sizing: auto;
  font-style: normal;
  vertical-align: 0.01em;
}

.spShow {
  display: none;
}
@media screen and (max-width: 767px) {
  .spShow {
    display: block;
  }
}
.pcShow {
  display: none;
}
@media screen and (min-width: 768px) {
  .pcShow {
    display: block;
  }
}

#mouse-stalker {
  pointer-events: none;
  position: fixed;
  top: -10px; 
  left: -10px; 
  width: 8px; 
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(0, 0);
  transition: transform 0.2s; 
  transition-timing-function: ease-out;
  z-index: 999;
  mix-blend-mode: difference;
  &.is_active {
    top: -40px; 
    left: -40px;
    width: 80px;
    height: 80px;
    transition: 0.2s;
  }
}

::selection {
  /* color: var(--color-bg); */
}

/* main > themes エリア
----------------------------------------------------------------------------------------------------------*/

main {
  position: relative;
  width: auto;               /* アスペクト比に合わせる */
  height: 100svh;            /* ビューポート最小可視高さいっぱい */
  aspect-ratio: 945 / 1352;  /* 固定アスペクト比 945w × 1352h 945 ÷ 1352 ≒ 0.6996…  */

  margin: 0 auto;

  /* background-image: url("/assets/images/bg.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; */
}

#themes .inner {
  background: var(--color-bg);
}
#themes .bg_text {
  position: absolute;
  top: 48.7%;
  left: 49.6%;
  height: 91%;
  width: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  mix-blend-mode: normal;
}
#themes .bg_comingsoon {
  position: absolute;
  top: 44.4%;
  left:  59.6%;
  height: 71%;
  width: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: darken;
}
#themes .hand_1 {
  position: absolute;
  top: 7.6%;
  left: 0;
  width: 43.8%;
  height: auto;
  z-index: 3;
}
#themes .hand_2 {
  position: absolute;
  top: 0%;
  right: 2.5%;
  width: 37.6%;
  height: auto;
  z-index: 3;
}
#themes .hand_3 {
  position: absolute;
  top: 44.6%;
  right: 0;
  width: 55.9%;
  height: auto;
  z-index: 3;
}
#themes .hand_4 {
  position: absolute;
  bottom: 0;
  right: 6%;
  width: 48.7%;
  height: auto;
  z-index: 3;
}
#themes .hand_5 {
  position: absolute;
  bottom: 2.5%;
  left: 3.4%;
  width: 30.6%;
  height: auto;
  z-index: 3;
}
#themes .logo {
  position: absolute;
  bottom: 1%;
  left: 50%;
  width: 25%;
  height: auto;
  transform: translateX(-50%);
  z-index: 5;
}

#themes .hand_1,
#themes .hand_2,
#themes .hand_3,
#themes .hand_4,
#themes .hand_5 {
  transition: transform 0.1s ease-in-out;
  mix-blend-mode: darken;
}


/* カウントダウンエリア
----------------------------------------------------------------------------------------------------------*/

.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  
  color: #FFF;
  z-index: 10;
}
.coming-soon-title {
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}
.countdown .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.countdown .inner .time-block {
  /* padding: 1rem; */
  text-align: center;
  width: 80px;
  /* background-color: rgba(255,255,255,0.8); */
}
.countdown .inner .time-block .number {
  display: block;
  margin: 0 auto;
  font-size: 4rem;
  text-align: center;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.countdown .inner .time-block:not(:last-child) .number::after {
  content: ":";
}
.countdown .inner .time-block .label {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-top: -10px;
}

.countdown .social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin-top: 3rem;
}
.countdown .social li {
  margin: 0;
  padding: 0;
}
.countdown .social li a,
.ec-link {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none !important;
  border: solid 1px #FFF;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 8rem;
  text-align: center;
}
.countdown .social li a:hover,
.countdown .social li a:focus,
.ec-link:hover,
.ec-link:focus {
  background-color: rgba(255, 255, 255, 1);
  color: var(--color-bg);
}

/* カウンドダウン終了後
----------------------------------------------------------------------------------------------------------*/

#release-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 10;
}
#release-banner svg#logo .cls-1 {
  fill: #fff !important;
}
#release-banner svg#logo {
  height: auto;
  width: 70%;
  margin: 0 auto 2rem;
}
#release-banner .nowopen-title span {
  font-size: 4rem;
}
#release-banner .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  overflow: hidden !important;
}
#release-banner .bottle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: max-content;
  transform: translate(-50%, -50%);
  overflow: hidden !important;
}
#release-banner .bottle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  overflow: hidden !important;
}
#release-banner .bottle img {
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  pointer-events: none;
  overflow: hidden !important;

  filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.3));
  mix-blend-mode: multiply;
}
.ec-link {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 1;
  border: solid 3px #FFF;
  width: 18rem;
  text-align: center;
  border-radius: 100px;
}
/*
html.now-open {
  background: var(--text-white);
}
html.now-open body {
  background-image: none;
}
*/

/* footerエリア
----------------------------------------------------------------------------------------------------------*/

footer.site-footer {
  /* display: none; */
  padding: 1rem;
  position: fixed;
  bottom: 0rem;
  font-size: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  transform: translateX(-50%);
  text-align: center;
  font-size: .8rem;
  z-index: 10;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
 SPレイアウト
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 767px) {
 
  body {
    overflow: hidden !important;
  }
  #mouse-stalker {
    display: none;
  }

  html, body {
    height: 100svh;    /* ビューポート高さを 100vh に固定 */
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    flex-direction: column; /* 縦積みレイアウト */
  }
  main {
    width: 100svw;
    height: auto;
    margin: auto;
  }
  #themes {
    position: absolute;
    inset: 0;                 /* main の中で上下左右とも 0 にして、ぴったり収める */
    overflow: hidden;         /* はみ出しを隠す */
  }
  #release-banner {
    overflow: hidden;
  }
  #release-banner .nowopen-title {
    width: max-content;
  }
  #release-banner .nowopen-title span {
    font-size: 3rem;
  }
  .ec-link {
    width: 14rem;
  }
}