@charset "UTF-8";
html {
  width: 100%;
  height: auto;
  overflow: hidden;
  overscroll-behavior-y: none;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.2em;
  /*color: #eaf2a5;*/
  color: #fcffd9;
  background-color: hsla(90, 0%, 85%, 1);
}
html::selection, div::selection, ul::selection, li::selection, canvas::selection, img::selection { background: none; }
a { -webkit-tap-highlight-color: transparent; }
img { user-drag: none; -webkit-user-drag: none; -moz-user-select: none; }
.font-pop-r { font-family: "Poppins", sans-serif; font-weight: 400; line-height: 1.5; letter-spacing: 0.12em; }
.font-pop-m { font-family: "Poppins", sans-serif; font-weight: 500; line-height: 1.5; letter-spacing: 0.12em; }
.font-zen-r { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 1.6; }
.fadeshow { animation: fadeshow linear 0.8s forwards; }
.fadeshow-slow { animation: fadeshow linear 2.4s forwards; }
.fadehide { animation: fadehide linear 0.3s forwards; }
@keyframes fadeshow {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadehide {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
header {
  position: absolute;
  display: block;
  padding: 32px 56px 0;
  opacity: 0;
  z-index: 100;
}
header nav ul,
#leave-overlay.is-menu nav ul {
  font-size: 12px;
  color: #fcffd9;
  list-style: none;
  display: flex;
  gap: 64px;
}
header nav ul li,
#leave-overlay.is-menu nav ul li {
  position: relative;
  padding: 0;
}
header nav ul li::selection,
header nav ul li a::selection,
header nav ul ul li a::selection,
#leave-overlay.is-menu nav ul li::selection,
#leave-overlay.is-menu nav ul li a::selection,
#leave-overlay.is-menu nav ul ul li a::selection,
header span::selection {
  background-color: #222222;
}
header nav ul a, #leave-overlay.is-menu nav ul a {
  display: block;
  text-decoration: none;
  color: #fcffd9;
  background: linear-gradient(to right, #222222, #222222) no-repeat left bottom;
  background-size: 0% 100%;
  padding: 0 4px;
  transition: background-size 0.5s ease;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
header nav ul a:hover, #leave-overlay.is-menu nav ul a:hover {
  background-size: 100% 100%;
}
header nav ul li a span,
header nav ul li ul li a span,
#leave-overlay.is-menu nav ul li a span,
#leave-overlay.is-menu nav ul li ul li a span {
  position: relative;
  display: block;
}
header nav ul li a span::before,
header nav ul li ul li a span::before,
#leave-overlay.is-menu nav ul li a span::before,
#leave-overlay.is-menu nav ul li ul li a span::before {
  width: 0;
  color: #fefff7;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  transition: all 1.5s cubic-bezier(.2, -.5, .2, 2);
}
header nav ul li a span:hover::before,
header nav ul li ul li a span:hover::before,
#leave-overlay.is-menu nav ul li a span:hover::before,
#leave-overlay.is-menu nav ul li ul li a span:hover::before {
  width: 100%;
}
header nav ul ul,
#leave-overlay.is-menu nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
header nav ul ul#txt-mail,
#leave-overlay.is-menu nav ul ul#txt-mail {
  display: block;
}
header nav ul ul#txt-mail a,
#leave-overlay.is-menu nav ul ul#txt-mail a {
  white-space: normal;
  word-break: normal;
}
header nav ul ul li,
#leave-overlay.is-menu nav ul ul li {
  font-size: 10px;
  padding: 8px 0 0 0;
}
header nav ul ul#txt-mail li,
#leave-overlay.is-menu nav ul ul#txt-mail li {
  font-size: 10px;
  letter-spacing: 0.08em;
}
header nav ul li:hover>ul,
#leave-overlay.is-menu nav ul li:hover>ul {
  display: block;
}
#scene-menu li {
  opacity: 0;
  animation: menuFadeIn 0.8s ease forwards;
}
header nav ul li:hover>#scene-menu li:nth-child(1) { animation-delay: 0.05s; }
header nav ul li:hover>#scene-menu li:nth-child(2) { animation-delay: 0.1s; }
header nav ul li:hover>#scene-menu li:nth-child(3) { animation-delay: 0.15s; }
header nav ul li:hover>#scene-menu li:nth-child(4) { animation-delay: 0.2s; }
header nav ul li:hover>#scene-menu li:nth-child(5) { animation-delay: 0.25s; }
header nav ul li:hover>#scene-menu li:nth-child(6) { animation-delay: 0.3s; }
@keyframes menuFadeIn {
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.bg-noise {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.noise {
  background: url(../img/noise.png);
  opacity: 0.7;
  animation: noise_anim 1s steps(10) infinite;
}
@keyframes noise_anim {
  0% { background-position: 0 0; }
  100% { background-position: 123px 456px; }
}
#leave-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  z-index: 99999;
}
body.is-leaving #leave-overlay {
  opacity: 1;
  /*animation: leave-blur 0.1s ease forwards;*/
}
@keyframes leave-blur {
  0% {
    backdrop-filter: blur(0px) saturate(120%);
    -webkit-backdrop-filter: blur(0px) saturate(120%);
    opacity: 1;
  }
  100% {
    backdrop-filter: blur(25px) saturate(120%);
    -webkit-backdrop-filter: blur(25px) saturate(120%);
    opacity: 0.5;
  }
}
#leave-overlay .leave-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.12em;
  font-size: 11px;
  text-align: center;
}
#leave-overlay .leave-spinner::before {
  content: 'LOADING…';
}
#leave-overlay.is-return .leave-spinner::before {
  content: 'THANK YOU';
}
#leave-overlay.is-menu {
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#leave-overlay.is-menu.is-active {
  animation: fadeshow linear 0.3s forwards;
}
#leave-overlay.is-menu.is-closing {
  animation: fadehide linear 0.3s forwards;
}
#leave-overlay.is-menu nav {
  display: block;
}
#leave-overlay.is-menu nav ul {
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
#leave-overlay.is-menu nav ul li {
  width: 100%;
}
#leave-overlay.is-menu nav ul ul {
  display: block;
  position: relative;
  margin-top: 8px;
}
#leave-overlay.is-menu .leave-spinner {
  display: none;
}
html.is-smart header nav ul ul {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin-top: 2px;
}
html.is-smart #scene-menu li {
  opacity: 1;
  animation: none;
  transform: none;
}
html.is-smart header nav ul a { padding: 0; }
html.is-smart header nav ul a:hover,
html.is-smart #leave-overlay.is-menu nav ul a:hover {
  background-size: 0% 100%;
}
html.is-smart header nav ul li a span:hover::before,
html.is-smart header nav ul li ul li a span:hover::before,
html.is-smart #leave-overlay.is-menu nav ul li a span:hover::before,
html.is-smart #leave-overlay.is-menu nav ul li ul li a span:hover::before {
  width: 0;
}
html.is-smart ul#txt-mail { width: 120px; }
html.is-mobile header nav { display: none; }
html.is-mobile #hamburger {
  display: flex;
  top: 12px;
  left: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
html.is-mobile header nav ul ul#txt-mail li { padding: 0; }
html.is-mobile #leave-overlay.is-menu nav ul ul#txt-mail { margin-top: 0; }
#hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 100000;
  -webkit-tap-highlight-color: transparent;
}
#hamburger .hamburger-lines,
#hamburger .cross-lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  pointer-events: none;
}
#hamburger .hamburger-lines span {
  display: block;
  width: 24px;
  height: 1px;
  margin-bottom: 3px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 18px;
}
#hamburger .hamburger-lines span:last-child {
  margin-bottom: 0;
}
#hamburger .hamburger-lines span:before,
#hamburger .hamburger-lines span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fcffd9;
  transform: translateX(-200%);
  transition: transform ease 300ms;
}
#hamburger .hamburger-lines span:after {
  transform: translateX(0);
}
#hamburger .hamburger-lines span:nth-child(2):before,
#hamburger .hamburger-lines span:nth-child(2):after {
  transition-delay: 75ms;
}
#hamburger .hamburger-lines span:last-child:before,
#hamburger .hamburger-lines span:last-child:after {
  transition-delay: 150ms;
}
#hamburger:hover .hamburger-lines span:before {
  transform: translateX(0);
}
#hamburger:hover .hamburger-lines span:after {
  transform: translateX(200%);
}
#hamburger.active .hamburger-lines span:before {
  transform: translateX(100%);
}
#hamburger.active .hamburger-lines span:after {
  transform: translateX(200%);
}
#hamburger .cross-lines span {
  display: block;
  width: 24px;
  height: 1px;
  background-color: #fcffd9;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12px;
  transform: translateY(-50%) rotate(45deg) scaleX(0);
  transition: transform ease 200ms;
}
#hamburger .cross-lines span:last-child {
  transform: translateY(-50%) rotate(-45deg) scaleX(0);
}
#hamburger.active .cross-lines span {
  transition-delay: 450ms;
  transform: translateY(-50%) rotate(45deg) scaleX(1);
}
#hamburger.active .cross-lines span:last-child {
  transform: translateY(-50%) rotate(-45deg) scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  #leave-overlay { transition: none; }
  #leave-overlay .leave-spinner { animation: none; }
  #leave-overlay.is-active { opacity: 1; }
}
@media screen and (max-width: 720px) and (orientation: portrait) {
  html { font-size: 12px; letter-spacing: 0.16em; }
  header { padding: 20px 20px 0; }
  header nav ul { display: grid; gap: 12px; font-size: 11px; }
  header nav ul ul#txt-mail li { font-size: 9px; }
  header nav ul ul li { font-size: 9px; padding: 4px 0 0 0; }
}