@charset "utf-8";

/* CSS Document */

/***********
mainVisual
************/

.mainVisual {
  position: relative;
  padding-left: var(--side-padding);
  height: calc(100svh - var(--header-height));
  margin-top: var(--header-height);
  overflow: hidden;
}
.mainVisual-visual {
  width: 100%;
  height: 100%;
  background: url(../../img/mv_bg.jpg) no-repeat center center / cover ;
  background-color: black;
}
.mainVisual-visual-object {
  width: 100%;
  height: 100%;
  background: url(../../img/mv_object.png) no-repeat center center / cover ;
  animation: anim-mvObject 6s ease-in-out infinite;
  opacity: 0;
  translate: 0 -8%;
}
body.is-loaded .mainVisual-visual-object {
  opacity: 1;
  translate: 0 0;
  transition: 2s;
}
@keyframes anim-mvObject {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(1em); }
  100% { transform: translateY(0); }
}

.mainVisual-visual-object img {
  width: 100%;
  max-width: 100%;
}

/*
container
*/

.mainVisual-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(18px,1.2vw, 32px);
  padding-left: calc(var(--side-padding) + 3em);
  color: var(--color-base);
}
.mainVisual-lead {
  font-size: 190%;
  font-weight: 700;
}
.mainVisual-text {
  font-weight: 600;
  display: inline-block;
  position: relative;
  margin-top: 1em;
}
.mainVisual-text::after {
  content: "";
  display: block;
  width: 7em;
  height: 2px;
  background-color: var(--color-base);
  position: absolute;
  top: 50%;
  left: calc(100% + 1em);
  z-index: 9;
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.4s cubic-bezier(0.5, 1, 0.89, 1) 1.2s;
}
body.is-loaded .mainVisual-text::after {
  scale: 1 1;
}

.mainVisual-lead br,
.mainVisual-text br{
  display: none;
}

.mainVisual-lead > span,
.mainVisual-text > span {
  display: inline-block;
  opacity: 0;
  translate: 0 0.2em;
  transition: opacity 0.5s ease , translate 0.5s ease;
}
body.is-loaded .mainVisual-lead > span,
body.is-loaded .mainVisual-text > span {
  opacity: 1;
  translate: 0 0;
}

/*
scroll
*/

.mainVisual-copyright {
  position: absolute;
  right: 2em;
  top: 48%;
  translate: 50% 0 ;
  user-select: none;
  pointer-events: none;
}
.mainVisual-copyright-text {
  font-family: var(--font-family-gothic-en02);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-base);
  white-space: nowrap;
  rotate: 90deg;
}


/*
scroll
*/

.mainVisual-scroll {
  position: absolute;
  left: 0;
  top: calc(50% - 7em);
  z-index: 99;
  white-space: nowrap;
  text-align: left;
  transform-origin: left bottom;
  rotate: 90deg;
}
.mainVisual-scroll a {
  display: inline-block;
  padding: 0.8rem 0 ;
  position: relative;
  overflow: hidden;
  color: var(--color-main) ;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.85rem;
  font-family: var(--font-family-gothic-en02);
  letter-spacing: 0;
  width: 14em;
}
.mainVisual-scroll a::before,
.mainVisual-scroll a::after {
  content: "";
  display: block;
  width: 90px;
  height: 2px;
  position: absolute;
  right: 0;
  top: 49%;
  transform-origin: left;
  background-color: rgba(0, 0, 0, 0.5);
}
.mainVisual-scroll a::before{
  background-color: rgba(0, 0, 0, 0.2);
}
.mainVisual-scroll a::after {
  transform: scaleX(0);
  animation: anim-mainVisual-scroll01 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite ;
}

@keyframes anim-mainVisual-scroll01 {
  0% {
    transform: scaleX(0)
  }
  35% {
    transform: scaleX(1);
    transform-origin: left
  }
  40% {
    transform-origin: right
  }
  50% {
    transform: scaleX(1)
  }
  85% {
    transform: scaleX(0);
    transform-origin: right
  }
  100% {
    transform-origin: left
  }
}


@media screen and (max-width:1024px) {

  .mainVisual {
    padding-left: 0;
    height: calc(100svh - var(--header-height));
    max-height: 120vmin;
  }
  .mainVisual-visual {
    width: 120%;
    height: 100%;
    background: url(../../img/mv_bg.jpg) no-repeat center center / cover ;
    background-color: black;
    translate: -20vw 0 ;
  }
  .mainVisual-visual-object {
    width: 100%;
    height: 100%;
    background: url(../../img/mv_object.png) no-repeat center center / cover ;
    animation: anim-mvObject 6s ease-in-out infinite;
    opacity: 0;
    translate: 0 -8%;
  }
  body.is-loaded .mainVisual-visual-object {
    opacity: 1;
    translate: 0 0;
    transition: 2s;
  }
  @keyframes anim-mvObject {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(1em); }
    100% { transform: translateY(0); }
  }


  /*
  container
  */

  .mainVisual-container {
    font-size: clamp(12px,3.6vw, 16px);
    padding-left: 3vw;
    padding-top: 6em;
  }
  .mainVisual-lead {
    font-size: 190%;
    font-weight: 700;
  }
  .mainVisual-text {
    margin-top: 1em;
    line-height: 1.6;
  }
  .mainVisual-text::after {
    display: inline-block;
    width: 7em;
    height: 1px;
    margin-left: 1em;
    position: static;
    vertical-align: middle;
  }



  /*
  scroll
  */

  .mainVisual-copyright,
  .mainVisual-scroll {
    display: none;
  }

}


@media screen and (max-width:640px) {

  .mainVisual-lead br,
  .mainVisual-text br{
    display: inline;
  }

}

/***********
xxxxx
************/