@charset "utf-8";

/* ======================
common
====================== */
html {
  font-size: 62.5%;
}

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --mainColor: #333;
  --baseColor: #FFF;
  --accentColor: #01FF00;
  --color-gray: #323b3f;
  --color-light-gray: #E6E6E6;
  --color-blue: #2A00E4;
}

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "hiragino-kaku-gothic-pron", sans-serif;
  width: 100%;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mainColor);
  background-color: #000;
  position: relative;
}

html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

img {
  max-width: 100%;
  height: auto;
}

.pcBr {
  display: none;
}

@media screen and (min-width: 769px) {
  .spBr {
    display: none;
  }

  .pcBr {
    display: block;
  }
}

/* ======================
header
====================== */
.header__logo {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  letter-spacing: 0.02em;
  font-size: 1.6rem;
  color: var(--baseColor);
  mix-blend-mode: difference;
}

.nav {
  position: fixed;
  top: 10px;
  right: 8px;
  z-index: 100;
  text-align: right;
  color: var(--baseColor);
  mix-blend-mode: difference;
}

.nav__list {
  display: flex;
  flex-direction: column;
}

.nav.active .nav__list {
  flex-direction: column;
  gap: 3px;
  position: absolute;
  top: 28px;
  right: 6px;
}

.nav.hide .nav__list {
  display: none;
}

.nav__txt {
  position: relative;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.nav__btn {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  width: 46px;
  z-index: 100;
  color: var(--baseColor);
  mix-blend-mode: difference;
}

.nav__btn.visible {
  display: block !important;
}

.nav__line {
  display: block;
  background-color: var(--baseColor);
  width: 46px;
  height: 1px;
  border-radius: 1px;
  margin-top: 5px;
  transition: 0.6s;
}

.nav__line.active:nth-of-type(1) {
  transform: translateY(1px) rotate(-20deg);
}

.nav__line.active:nth-of-type(2) {
  opacity: 0;
}

.nav__line.active:nth-of-type(3) {
  margin-top: 0;
  transform: translateY(-5px) rotate(20deg);
}

@media screen and (min-width: 769px) {
  .header__logo {
    font-size: 2rem;
    position: fixed;
    top: 12px;
    left: 16px;
  }

  .header__logo::before {
    width: 336px;
    height: 29.6527777778vw;
    position: absolute;
    left: -46px;
    top: -24px;
  }

  .nav {
    position: fixed;
    top: 12px;
    right: 20px;
  }

  .nav__list {
    gap: 2px;
  }

  .nav.active .nav__list {
    position: absolute;
    top: 46px;
    right: 6px;
  }

  .nav__txt {
    font-size: 1.82rem;
  }

  .nav__btn {
    top: 17px;
    right: 20px;
    width: 64px;
  }

  .nav__line {
    margin-top: 7px;
    width: 64px;
  }

  .nav__line.active:nth-of-type(1) {
    transform: translateY(3px) rotate(-20deg);
  }

  .nav__line.active:nth-of-type(3) {
    transform: translateY(-5px) rotate(20deg);
  }
}

/* ======================
contact
====================== */
body.no-scroll {
  overflow: hidden;
}

.contact {
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), #ffffff 100%);
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: 0.8s;
}

.contact.active {
  opacity: 1;
  pointer-events: auto;
}

.nav__logo {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  letter-spacing: 0.02em;
  font-size: 1.6rem;
  color: var(--mainColor);
}

.tyfv {
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  position: absolute;
  top: 10px;
  right: 8px;
}

.contact__content {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.contact__title {
  font-size: 1.3rem;
  color: var(--color-gray);
}

.email {
  margin-top: 20px;
}

.email__group {
  position: relative;
  display: block;
  overflow: hidden;
  transition: 0.9s ease-in-out;
}

.email__address {
  display: block;
  transition: transform 0.4s ease-in-out;
  font-size: 7.4666666667vw;
  color: #2A00E4;
  mix-blend-mode: difference;
}

.email__address:nth-child(odd) {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
}

@media (any-hover: hover) {
  .email__group:hover .email__address:nth-child(even) {
    transform: translateY(-100%);
  }

  .email__group:hover .email__address:nth-child(odd) {
    transform: translateY(0);
  }
}

.today--contact {
  position: absolute;
  right: 8px;
  bottom: 34px;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--mainColor);
}

.keyColor--contact {
  position: absolute;
  right: 8px;
  bottom: 10px;
  font-size: min(3.6vw, 1.35rem);
  letter-spacing: 0.02em;
  color: var(--mainColor);
}

.color--white {
  background-color: var(--baseColor);
}

.color--black {
  background-color: var(--mainColor);
}

.visualImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  background-size: contain;
  filter: blur(17px);
  mix-blend-mode: difference;
  animation: circleSpin 30s linear infinite;
  pointer-events: none;
}

@keyframes circleSpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.visualImg--contact {
  filter: invert(100%) saturate(10%) blur(17px);
}

.contact__btn {
  position: fixed;
  top: 54px;
  right: 12px;
  width: 46px;
  color: var(--mainColor);
}

.contact__line {
  display: block;
  background-color: var(--mainColor);
  width: 46px;
  height: 1px;
  border-radius: 1px;
  margin-top: 5px;
  transition: 0.6s;
}

.contact__line:nth-of-type(1) {
  transform: rotate(-20deg);
}

.contact__line:nth-of-type(2) {
  margin-top: 0;
  transform: rotate(20deg);
}

.contact__btn__txt {
  display: inline-block;
  position: fixed;
  top: 73px;
  right: 12px;
  width: 46px;
  text-align: center;
  font-size: 1.2rem;
}

@media screen and (min-width: 769px) {
  .nav__logo {
    position: fixed;
    top: 12px;
    left: 16px;
    font-size: 2rem;
  }

  .tyfv {
    font-size: 1.9rem;
    position: absolute;
    top: 12px;
    right: 16px;
  }

  .contact__title {
    font-size: 1.9rem;
  }

  .email__address {
    font-size: 5.7142857143vw;
  }

  .contact__btn {
    position: fixed;
    top: 72px;
    right: 16px;
    width: 76px;
  }

  .contact__line {
    width: 76px;
  }

  .contact__btn__txt {
    font-size: 1.6rem;
    position: fixed;
    top: 98px;
    right: 16px;
    width: 76px;
  }

  .today--contact {
    position: absolute;
    right: 16px;
    bottom: 50px;
    font-size: 1.8rem;
  }

  .keyColor--contact {
    position: absolute;
    right: 16px;
    bottom: 20px;
    font-size: 1.8rem;
  }

  .color {
    width: 17px;
    height: 17px;
    margin-right: 4px;
    vertical-align: -1px;
  }
}

@media screen and (min-width: 1024px) {
  .visualImg {
    width: 36%;
    filter: blur(27px);
  }

  .visualImg--contact {
    filter: invert(100%) saturate(30%) blur(27px);
  }
}

/* ======================
footer
====================== */
.footer {
  position: relative;
  padding: 12px 8px;
  background-color: var(--color-gray);
  text-align: right;
  color: var(--baseColor);
}

.btt {
  font-size: 1.5rem;
  display: block;
  margin-left: auto;
}

.e-mail__item {
  margin-top: 16px;
}

.e-mail {
  text-align: right;
  font-size: 1.6rem;
}

.copy--footer {
  margin-top: 6px;
  font-size: 1.6rem;
}

@media screen and (min-width: 769px) {
  .footer {
    position: relative;
    padding: 16px;
  }

  .btt {
    font-size: 1.7rem;
    position: absolute;
    left: 20px;
    bottom: 16px;
  }

  .e-mail__item {
    margin-top: 0;
  }

  .e-mail {
    font-size: 1.8rem;
  }

  .copy--footer {
    margin-top: 8px;
    font-size: 1.8rem;
  }
}

/* ======================
404 error
====================== */
.error-page {
  width: 100vw;
  height: 100svh;
  color: #F1F1F1;
  color: var(--baseColor);
  position: relative;
}

.error-page::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/noise.gif);
  opacity: 0.06;
  pointer-events: none;
}

.error-page__message {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.error-page__title {
  font-size: 2.2rem;
}

.error-page__link {
  color: #DBDAD7;
  margin-top: 12px;
  font-size: 1.2rem;
  transition: 0.6s;
}

.error-page__link:hover {
  opacity: 0.6;
  transition: 0.6s;
}

@media screen and (min-width: 769px) {
  .error-page__message {
    position: absolute;
    left: 16px;
  }

  .error-page__title {
    font-size: 3.6rem;
  }

  .error-page__link {
    font-size: 1.4rem;
  }
}