@charset "utf-8";

/* CSS Document */

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

.mainVisual {
  position: relative;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  transition: 1s;
}

.mainVisual-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

/*
scroll
*/

.mainVisual-scroll {
  position: absolute;
  right: 0;
  top: 50%;
  transform-origin: right bottom;
  translate: -3em 6em;
  rotate: 90deg;
  text-align: left;
  z-index: 99;
}
.mainVisual-scroll a {
  display: block;
  width: 18em;
  padding: 2px 0 ;
  position: relative;
  overflow: hidden;
  color: var(--color-brand01);
  text-decoration: none;
  font-family: var(--font-family-gothic-en);
  font-weight: 500;
  font-size: 0.80rem;
}
.mainVisual-scroll a::before,
.mainVisual-scroll a::after {
  content: "";
  display: block;
  width: calc(100%  - 4em);
  height: 1px;
  position: absolute;
  right: 0;
  top: 45%;
  transform-origin: left;
  background-color: #032d52;
}
.mainVisual-scroll a::before{
  background-color: #032d5255;
}
.mainVisual-scroll a::after {
  transform: scaleX(0);
  animation: anim-mainVisualScroll01 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes anim-mainVisualScroll01 {
  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
  }
}
@keyframes anim-mainVisualScroll02 {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }

}

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

  .mainVisual {
    position: relative;
    height: auto;
    min-height: initial;
    overflow: hidden;
    transition: 1s;
  }

  .mainVisual-video {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: right;
    aspect-ratio: 100 / 98;
  }


  /*
  scroll
  */

  .mainVisual-scroll {
    translate: -2em 0;
    top: auto;
    bottom: 0;
  }
  .mainVisual-scroll a {
    width: 9em;
    font-size: 0.6rem;
  }

}


/***********
homeIntro
************/

.homeIntro {
  padding-top: min(25vw,12em);
  padding-bottom: min(25vw,12em);
  background: url(../../img/bg01.jpg) no-repeat center bottom / max(90%,1280px) auto;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-brand01);
}
.homeIntro-symbol {
  position: absolute;
  right: -4vw;
  top: 0;
  width: 28%;
  pointer-events: none;
  opacity: 0.12;
}

.homeIntro-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0 7%;
  position: relative;
  z-index: 9;
}
.homeIntro-inner {
  flex: 1;
}
.homeIntro-box {
  max-width: 31em;
  padding-right: 1em;
}
.homeIntro-title {
  font-size: clamp(2rem,3.3vw, 2.5rem);
  padding-bottom: 1em;
}
.homeIntro-text {
  font-weight: 500;
  line-height: 2.4em;
  text-wrap: pretty;
}

.homeIntro-visual {
  width: 49%;
}
.homeIntro-img {
  clip-path: polygon(0% 0%, 88% 0%,100% 18%, 100% 100%, 0 100%);
  background-color: #e0e6ea33;
}
.homeIntro-img img {
  scale: 1.1;
}
.homeIntro-img.is-show img {
  scale: 1;
  transition: scale 0.8s ease 0.4s;
}

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

  .homeIntro-container {
    gap: 0 7%;
  }

  .homeIntro-visual {
    width: 45%;
  }
  .homeIntro-img {
    clip-path: polygon(0% 0%, 88% 0%,100% 18%, 100% 100%, 0 100%);
    background-color: #e0e6ea33;
  }
  .homeIntro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }

}

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

  .homeIntro {
    padding-top: min(25vw,12em);
    padding-bottom: min(25vw,12em);
    padding-inline: var(--padding-side);
    background: url(../../img/bg01.jpg) no-repeat center bottom / max(90%,1280px) auto;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-brand01);
  }
  .homeIntro-symbol {
    right: -4vw;
    width: 45%;
  }

  .homeIntro-container {
    display: block;
  }
  .homeIntro-inner {
    flex: 1;
  }
  .homeIntro-box {
    max-width: initial;
    padding-right: 0;
  }
  .homeIntro-title {
    font-size: clamp(1.6rem,6.5vw, 3rem);
    line-height: 1.5;
    padding-bottom: 1em;
  }
  .homeIntro-text {
    line-height: 2;
    text-align: left;
    text-wrap: wrap;
  }

  .homeIntro-visual {
    width: auto;
    padding-top: 3em;
  }
  .homeIntro-img {
    margin-left: -5vw;
    margin-right: 5vw;
  }
  .homeIntro-img img {
    aspect-ratio: 16 / 10;
  }
  .homeIntro-img.is-show img {
  }
}

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