@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ===== base ===== */
html{background-color: #e60012;}
body {
  color: #e60012;
  background-color: #FFFFFF;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Barlow", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
}
:lang(ja) body {
  font-family: "Noto Sans JP", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
.container {
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 0 20px 0 20px;
  margin-top: -8vh;
  padding-bottom: 60px;
}
/* logo */
.logo-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  opacity: 0.9;
  line-height: 0;
}
.main-logo {
  display: block;
  width: 300px;
  height: auto;
  opacity: 0;
  animation: slideDrop 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
}
a {
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.5;
}
@keyframes slideDrop {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* brand */
.brand-title, .brand-name {
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.brand-title {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: -10px;
  letter-spacing: 0.14em;
}
.brand-name {
  font-size: 80px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.25em;
}
/* description */
.description {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  min-height: 70px;
}
:lang(ja) .description {
  font-size: 11px;
  line-height: 2.3;
  letter-spacing: 0.05em;
  min-height: 70px;
}
/* lang switch */
.lang-switch {
  font-size: 10px;
  display: block;
  letter-spacing: 0.05em;
  min-height: 50px;
}
.lang-switch a {
  text-decoration: none;
  color: #e60012;
}
/* footer */
.footer-link {
  min-height: 80px;
}
.sub-text {
  font-size: 11px;
  color: #333;
  letter-spacing: 0.15em;
  min-height: 35px;
}
.adobe-logo {
  height: 25px;
  width: auto;
}
.adobe-link {
  display: inline-block;
  transition: opacity 0.3s ease;
  mix-blend-mode: multiply;
  text-decoration: none;
  color: #333;
}
/*tv-noise*/
.tv-noise {
  position: fixed;
  inset: 0;
  background-image: url("../images/noise.gif");
  background-repeat: repeat;
  background-size: 80px 80px;
  animation: noiseShift 0.4s steps(1) infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.19;
  filter: contrast(130%) brightness(95%);
}
@keyframes noiseShift {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 40px 80px;
  }
  50% {
    background-position: 120px 20px;
  }
  75% {
    background-position: 60px 140px;
  }
  100% {
    background-position: 0 0;
  }
}
/* ripple */
#ripple-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.ripple {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  animation: ripple 900ms ease-out forwards;
  filter: blur(1px);
}
@keyframes ripple {
  0% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(10);
  }
}
/* --- sp--- */
@media (max-width: 768px) {
  .container {
    min-width: auto;
  }
  .brand-title {
    font-size: 18px;
  }
  .brand-name {
    font-size: 52px;
  }
  .main-logo {
    width: 200px;
  }
}