@charset "utf-8";

/* CSS Document */

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

.mainVisual {
  --mainVisual-height: calc(100svh + 50px);
  --mainVisual-minHeight: 700px;
  position: relative;
  height: var(--mainVisual-height);
  min-height: var(--mainVisual-minHeight);
  overflow: hidden;
  transition: 1s;
  font-size: clamp(15px,1vw, 24px);
}

/*
visual
*/

.mainVisual:has(.mainVisual-visual) {
  color: var(--color-base);
}
.mainVisual-visual {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
  opacity: 0;
}
.mainVisual-visual::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
}
body.is-loaded .mainVisual-visual {
  opacity: 1;
  transition: 0.5s ease 0s;
}

/*
container
*/

.mainVisual-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100svh;
  min-height: var(--mainVisual-minHeight);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 5vw;
  padding-top: calc(var(--header-height) / 2 );
}
.mainVisual-block {
  text-align: center;
}

.mainVisual-logo {
  width: clamp(300px,22vw, 500px);
  margin: 0 auto 1em;
}

.mainVisual-lead {
  font-size: 250%;
  font-weight: 700;
  font-feature-settings: "palt";
  line-height: 1.2;
  letter-spacing: 0.15em;
  padding-bottom: 0.6em;
}
.mainVisual-text {
  font-weight: 500;
  line-height: 1.8;
  padding-bottom: 2em;
}

/*
slider
*/

.mainVisual-slider{
  opacity: 0;
  transition: all 0.5s ease 0s;
}
body.is-loaded .mainVisual-slider{
  opacity: 1;
}
.mainVisual-slider :not(.slick-dots) li{
  position: relative;
  width: 100%;
  height: var(--mainVisual-height);
  min-height: var(--mainVisual-minHeight);
}
.mainVisual-img{
  width: 100%;
  height: var(--mainVisual-height);
  min-height: var(--mainVisual-minHeight);
  background-position: center center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.mainVisual-img > img {
  width: 100%;
  height: 100%;
  height: var(--mainVisual-height);
  min-height: var(--mainVisual-minHeight);
  object-fit: cover;
}

.mainVisual-img.-zoom{
  transform-origin: center center;
}
.slick-animation .mainVisual-img.-zoom{
  animation: amin-mainVisual-zoom 10s linear forwards;
}
.mainVisual-img.-left{
  width: 110%;
  transform-origin: left center;
}
.slick-animation .mainVisual-img.-left{
  animation: amin-mainVisual-left 10s linear forwards;
}
.mainVisual-img.-right{
  width: 110%;
  transform-origin: right center;
}
.slick-animation .mainVisual-img.-right{
  animation: amin-mainVisual-right 10s linear forwards;
}
.mainVisual-img.-up{
  height: 110svh;
}
.slick-animation .mainVisual-img.-up{
  animation: amin-mainVisual-up 10s linear forwards;
}
.mainVisual-img.-down{
  height: 110svh;
}
.slick-animation .mainVisual-img.-down{
  animation: amin-mainVisual-down 10s linear forwards;
}

@keyframes amin-mainVisual-zoom {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.1;
  }
}
@keyframes amin-mainVisual-left {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -5% 0;
  }
}
@keyframes amin-mainVisual-right {
  0% {
    translate: -5% 0;
  }
  100% {
    translate: 0 0;
  }
}
@keyframes amin-mainVisual-up {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -5%;
  }
}
@keyframes amin-mainVisual-down {
  0% {
    translate: 0 -5%;
  }
  100% {
    translate: 0 0;
  }
}


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

  .mainVisual {
    height: 100svh;
    font-size: clamp(12px,3.6vw, 16px);
  }

  /*
  container
  */

  .mainVisual-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: 5vw;
    padding-top: 80px
  }
  .mainVisual-block {
  }
  .mainVisual-logo {
  width: clamp(200px,50vw, 300px);
  margin: 0 auto 1em;
  }

  .mainVisual-lead {
    font-size: 160%;
    padding-bottom: 1em;
  }

}

/***********
homeContents
************/

.homeContents {
  background-color: var(--color-base);
  position: relative;
  z-index: 9;
  margin-top: -140px;
  clip-path: polygon(
    0% 0%, 20% 140px, 40% 100px, 50% 40px, 65% 0%,82% 140px, 100% 0%,
    100% calc(100% - 70px),82% calc(100% - 10px), 65% calc(100% - 80px),48% calc(100% - 60px),42% calc(100% - 20px),22% calc(100% - 1px),0% calc(100% - 80px)
  );
}

.homeContents > .homeContents-first {
  padding-top: calc(var(--padding-main) + 140px);
}
.homeContents > section:last-child {
  padding-bottom: calc(var(--padding-main) + 80px);
}

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

  .homeContents {
    background-color: var(--color-base);
    position: relative;
    z-index: 9;
    margin-top: -40px;
    clip-path: polygon(
      0% 0%, 20% 40px, 40% 25px, 50% 10px, 65% 0%,82% 30px, 100% 0%,
      100% calc(100% - 20px),82% calc(100% - 3px), 65% calc(100% - 40px),48% calc(100% - 20px),42% calc(100% - 5px),22% calc(100% - 1px),0% calc(100% - 30px)
    );
  }

  .homeContents > .homeContents-first {
    padding-top: calc(var(--padding-main) + 40px);
  }
  .homeContents > section:last-child {
    padding-bottom: calc(var(--padding-main) + 40px);
  }

}


/***********
homePages
************/

.homePages {
  background: linear-gradient(to bottom, var(--color-base) 15em, var(--color-sub04) 15em);
  padding-top: var(--padding-main);
}


.homePages-ticker {
  width: 100%;
  height: clamp(70px,9vw, 300px);
}
.homePages-ticker-slider {
  white-space: nowrap;
}
.homePages-ticker-item {
}
.homePages-ticker-item img {
  width: auto;
  height: clamp(70px,9vw, 300px);
}

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

  .homePages-ticker {
    margin-top: 2em;
    margin-bottom: 1em;
  }
}

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

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

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

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

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

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

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