.head {
  display: none;
}

html,
body {
  height: auto;
}

body,
.top-page,
.wrap {
  overflow: hidden;
  color: var(--inv);
  background-color: var(--inv);
}

#vanta-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: -5;
    filter: blur(3px);
    pointer-events: none;
}

/*=======セキュリティ*/
canvas {
  display: block;
}

#custom-context-menu {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 99;
  pointer-events: none;
  user-select: none;
}


.noise {
  display: flex;
  background-image: linear-gradient(to right, var(--bg), blue);
  background-image: linear-gradient(to right, var(--bg));
}

/* ========== Common ========== */

h1 {
  font-size: 1rem;
}

h2 {
  font-size: 1.8rem;
}

p {
  font-size: 1rem;
  letter-spacing: 0.1em;
}

/* ========== Background Slides ========== */
.back__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-position: center;
  background-size: cover;
  color: var(--text);
  filter: grayscale(40%);
  transition: opacity 850ms 1500ms linear;
  z-index: -1;
}

.back__slide .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.back__slide:nth-child(even) .progress {
  transform-origin: 100% 100%;
}

.back__slide::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 95vmin;
  height: 55%;
  background-position: center;
  background-size: cover;
  filter: grayscale(30%);
  box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.65);
}

.back__slide.active {
  opacity: 0;
}

/* 背景画像 */
.back__slide:nth-child(1)::before {
  background-image: linear-gradient(rgba(180, 180, 180, 0.62), rgba(180, 180, 180, 0.62)), url("../img/couryoku.jpg");
}

.back__slide:nth-child(even)::before {
  background-image: linear-gradient(rgba(20, 20, 20, 0.2), rgba(20, 20, 20, 0.2)), url("../img/心樹.jpg");
}

/* フロント画像 */
.back__slide .back-front-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  mix-blend-mode: difference;
}

.back__slide .back-front-image::after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
}

.back__slide .active .back-front-image {
  transition: transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1300ms linear;
}

/* ========== Header / Creator / Time ========== */
/*.head a {
  font-size: clamp(1.2em, calc(1.2em + 0.5vw), 1.4em);
  color: var(--def);
  position: absolute;
  top: 9.25%;
  left: 30vmin;
  z-index: 1000;
}*/

.creator {
  display: block;
  position: absolute;
  top: 10%;
  left: 30vmin;
  padding: 0.15vmin 0.75vmin 0.25vmin;
  color: var(--inv);
  background-image: linear-gradient(to right, var(--text));
}

.creator .noise {
  display: block;
}

.time {
  position: absolute;
  bottom: 10%;
  right: 30vmin;
  padding: 0.15vmin 0.75vmin 0.25vmin;
  color: var(--inv);
  background-image: linear-gradient(to right, var(--text));
}

/* ========== Card Slide ========== */
.card {
  width: 93vmin;
  height: 53%;
  position: absolute;
  top: 50%;
  left: 50%;
  backdrop-filter: blur(10px);
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
}

.card__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: box-shadow 800ms 750ms linear;
}

.card__slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0px 5px 0px #000;
  background-size: 100% auto;
  background-position: center;
  /*border: 1px solid rgba(200, 200, 200, 0.14);
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);*/
  backdrop-filter: blur(10px);
}

.card__slide:nth-child(even)::after {
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 850ms 970ms ease-in-out;
}

.card__slide.active {
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}


.card__slide:nth-child(even).active:after {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

/*== 内容 img ==
.card__slide .image {
  background-image: url("../img/202343-2.jpg");
  background-size: 85% auto;
  background-position: center;
  background-repeat: no-repeat;
  width: 30%;
  height: 100%;
  position: absolute;
  top: 5%;
  left: 5%;
  filter: grayscale(40%) drop-shadow(0px 2px 10px var(--inv));
  transform: translateX(-8rem);
  opacity: 0;
  transition: all 1s ease;
  z-index: 1;
}

.card__slide:nth-child(even) .image {
  left: 65%;
  background-image: url("../img/couryoku.jpg");
  pointer-events: none;
  transition: transform 850ms 550ms linear, opacity 450ms 800ms linear;
}*/

.card__slide.active .image {
  /*clip-path: polygon(0% 0%, 90% 0%, 90% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%);*/
  opacity: 1;
  z-index: 1;
  transform: translateX(0rem);
  transition: transform 1300ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1300ms 1700ms linear;
}

.card__slide:nth-child(1).exit .image {
  transition: transform 1200ms 600ms linear, opacity 200ms 800ms linear;
}

.card__slide:nth-child(even).active .back-image {
  opacity: 1;
  transition: transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1000ms linear;
}

.card__slide:nth-child(even).exit .back-image {
  transform: translateX(-4rem);
}

/*== number ==*/
.number {
  /*font-family: "Roboto Mono", monospace;*/
  letter-spacing: 0.02em;
  position: absolute;
  top: 0;
  opacity: 0.7;
  z-index: -1;
}

.number:before {
  content: "";
  position: relative;
  display: block;
  width: 1px;
  height: 3.5rem;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  border-left: 1px solid;
  opacity: 0.7;
}

/*.card__slide:nth-child(even) .date,
    .card__slide:nth-child(even) .number {
        color: #030303;
    }*/

.card__slide:first-child .number {
  left: 3%;
}

.card__slide:nth-child(even) .number {
  right: 3%;
  color: var(--text);
}

.card__slide .number {
  transform: translatey(-5rem);
  transition: transform 1400ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1200ms 1600ms linear;
}

.card__slide.active .number {
  transform: translatey(0rem);
  transition: transform 800ms 1100ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 600ms 1200ms linear;
}

.card__slide:nth-child(even).active .number {
  transition: transform 1400ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1200ms 1600ms linear;
}

.date {
  color: #ddd;
  /*font-family: "Roboto Mono", monospace;*/
  position: absolute;
  width: 100%;
  left: 3%;
  bottom: calc(5% - 0.5rem);
  letter-spacing: 0.15em;
  transform-origin: 0 50%;
  transform: rotate(0deg);
  font-weight: 400;
  z-index: -1;
}

.date__time {
  opacity: 0.75;
  font-size: 0.7rem;
  letter-spacing: 0.05rem;
}

.date:before {
  content: "";
  display: inline-block;
  width: 3rem;
  margin-right: 0.15rem;
  border-bottom: 1px solid;
  transform: translatey(-0.3rem);
}

.card__slide.active .date {
  left: 0;
  opacity: 0.7;
  transform: translatex(0rem) rotate(0deg);
}

.card__slide .date {
  opacity: 0;
  z-index: -1;
}

.card__slide .date,
.card__slide.active .date,
.card__slide:nth-child(even).active .date {
  transition: transform 1450ms 1850ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1450ms 1850ms linear;
}

.card__slide:nth-child(even) .date:before,
.card__slide:nth-child(even) .date {
  color: var(--text);
  border-color: var(--text);
}

.card__slide .date,
.card__slide.exit .date,
.card__slide:nth-child(even).exit .date {
  transform: translatex(0rem) rotate(-90deg);
}

/*== bottm line */
.content__ping {
  position: absolute;
  bottom: calc(5% - 0rem);
  width: 5%;
  height: 1px;
  left: 50%;
  background: var(--inv);
  opacity: 0.7;
  transition: transform 500ms ease-out;
}

.content__ping:after {
  content: "";
  display: block;
  width: 100%;
  height: 0.1em;
  position: absolute;
  left: 0;
  background: var(--text);
  opacity: 0.7;
  transition: background 350ms 800ms linear;
  animation: widenFromLeft 2200ms ease-out;
}

@keyframes widenFromLeft {
  0% {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }

  20% {
    transform: scaleX(4);
    transform-origin: 0 50%;
  }

  100% {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}

@keyframes widenFromRight {
  0% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }

  20% {
    transform: scaleX(4);
    transform-origin: 100% 50%;
  }

  100% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }
}

/*animation bottom-line*/
.content__ping--right {
  transform: translateX(40vmin);
}

.content__ping--right:after {
  animation: widenFromRight 1200ms ease-out;
}

.content__ping--noanimation:after {
  animation: none !important;
}

.top-page .content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translatey(-50%);
}

.content__slide {
  display: grid;
  justify-content: center;
  align-content: center;
  position: relative;
  top: 0;
  width: 50%;
  height: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.content__slide:nth-child(even) {
  top: -100%;
}

.content__slide.active {
  pointer-events: auto;
}

.content__slide.active .title__inner,
.content__slide.active .desc,
.content__slide.active .button-wrap {
  opacity: 1;
  transform: translateX(0);
}

.content__slide.active .title__inner {
  transition-delay: 1600ms;
}

.content__slide.active .desc {
  transition-delay: 1800ms;
}

.content__slide.active .button-wrap {
  transition-delay: 2000ms;
}

.content__slide.exit .title__inner,
.content__slide.exit .desc,
.content__slide.exit .button-wrap {
  transform: translateX(-2.5rem);
  transition: transform 400ms ease-out, opacity 300ms linear;
}

.content__slide.exit .title__inner {
  transition-delay: 150ms;
}

.content__slide.exit .desc {
  transition-delay: 300ms;
}

/*== タイトル、説明文、ボタンのアニメーションスタイリング ==*/
.title__inner,
.desc,
.button-wrap {
  opacity: 0;
  position: relative;
  transform: translateX(-5.5rem);
  transition: transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 200ms linear;
}

.top-page .title {
  position: relative;
  /*font-size: clamp(4rem, calc(4rem + 0.5vw), 5rem);*/
  font-weight: 400;
  justify-content: flex-start;
  color: #f9fafbb3;
  text-shadow: 1px 1px 10px rgba(15, 53, 43);
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.content__slide:nth-child(even) .title {
  text-shadow: 0px 0px 7px rgba(200, 200, 200, 0.75);
}

.top-page .title:nth-child(even)::before {
  transition-delay: 200ms;
  transform: translateX(0rem);
  transform-origin: 100% 100%;
}

/*== 内容 ==*/
.desc {
  color: #f9fafbb3;
  text-shadow: 1px 1px 10px rgba(15, 53, 43);
  margin: 1rem auto 0;
  line-height: 1.8;
}

.content__slide:nth-child(even) .title {
  /*text-shadow: 0px 0px 1px rgba(200, 250, 250, 0.4);*/
  text-shadow: 0px 0px 1px rgba(20, 20, 20, 0.75);
}

.content__slide:nth-child(even) .desc,
.content__slide:nth-child(even) .button-wrap {
  color: var(--def);
  text-shadow: 0px 0px 1px rgba(200, 200, 200, 0.25);
}

/*==================================== button ==*/
.button-wrap {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
  text-align: center;
  margin-top: 1rem;
  gap: 1rem;
}

.content__slide:nth-child(even) .button-wrap {
  text-align: center;
}

.content__slide.exit .button-wrap {
  transition-delay: 450ms;
}

.button {
  display: inline-block;
  font-size: 1rem;
  width: 100%;
  text-align: center;
  color: var(--inv);
  line-height: 1;
  letter-spacing: 0.15em;
  padding: 1.4rem 0.5em;
  margin: 1rem auto 0;
  position: relative;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: underline;
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 10;
  box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0);
  overflow: hidden;
}

.button:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0);
}

.content__slide:nth-child(even) .button {
  background-color: rgba(250, 250, 250, 0.15);
  color: var(--def);
}

.content__slide:nth-child(even) .button:hover {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.64);
}

.content__slide:nth-child(even) .button:before,
.content__slide:nth-child(even) .button:after,
.sp,
footer,
.menu_head {
  display: none;
}





@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}


.card_line {
  width: var(--card-width);
  height: var(--card-height);
  cursor: pointer;
  width: 100vmin;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: -2;
}

/*.card_line::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite;
}*/

.card_line::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.85);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #197994, #133088 43%, #3a0c80);
  background-image: linear-gradient(
    var(--rotate)
    , #000000, #057379 43%, #000000);
  opacity: 1;
  transition: opacity 0.85s;
  animation: spin 8.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}




@media screen and (max-width: 599px) {
    #vanta-bg {
        opacity: 0.35;
    }

  h1 {
    line-height: 1;
  }
  h2 {
    font-size: 1.6rem;
  }

  .card {
    width: 98svw;
    height: 99svh;
  }

  .back__slide::before {
    width: 100svw;
    height: 100svh;
  }

  .content__slide {
    width: 80%;
    gap: 1rem;
  }

  .creator {
    top: 0.5%;
    left: 4%;
  }

  .time {
    right: 4%;
    bottom: 0.5%;
  }

.card__slide:first-child .number,
.card__slide:nth-child(even) .number {
    left: 2rem;
    top: 3rem;
}

  .number:before {
    height: 1px;
        width: 3rem;
        top: 0.75rem;
        left: 0;
        border-top: 1px solid;
        transform: translatex(-130%);
  }

  .card__slide .number {
  transform: translatex(-5rem);
  transition: transform 1400ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1200ms 1600ms linear;
}

.card__slide.active .number {
  transform: translatex(0rem);
  transition: transform 800ms 1100ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 600ms 1200ms linear;
}

  .date {
    font-size: 0.85rem;
    letter-spacing: 0.05rem;
    bottom: calc(3% - 0.5rem);
  }

  .date:before {
    width: 2rem;
  }

  .date__time {
    display: block;
    opacity: 0.5;
    position: absolute;
    right: 10%;
    bottom: 0;
    font-size: 0.6rem;
  }

  .desc {
    font-size: 0.8rem;
    margin: 0 auto;
  }

  .button-wrap,
  .button {
    margin-top: 0;
  }
  .button {
    font-size: 0.9rem;
    padding: 1rem 0.5rem;
  }
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
  .typing00 {
    font-size: clamp(1.4em, calc(1.4em + 0.5vw), 1.8em);
  }
}

@media screen and (min-width: 1200px) and (max-width: 1550px) {}