@charset "utf-8";

/* CSS Document */

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

.mainVisual {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--color-base);
  user-select: none;
}

/*
visual
*/

.mainVisual-visual {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
  opacity: 0;
}
.mainVisual-visual::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.mainVisual-visual::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../img/bg01.png) no-repeat center right / max(100%,834px) auto;
  z-index: 3 ;
}
body.is-loaded .mainVisual-visual {
  opacity: 1;
  transition: 1s ease 0s;
}

/*
container
*/


.mainVisual-container {
  position: absolute;
  left: 5vw;
  bottom: 9vw;
  z-index: 9;
  white-space: nowrap;
}
.mainVisual-lead {
  font-size: clamp(60px,4.2vw, 120px);
  font-weight: 900;
  font-style: italic;
  font-feature-settings: "palt";
  letter-spacing: -0.02em;
  color: var(--color-base);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}



.mainVisual-lead-item {
  position: relative;
  overflow: hidden;
  margin-bottom: -1px;
}
.mainVisual-lead-item::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--color-brand01);
  scale: 0 1;
}
.mainVisual-lead-item span {
  opacity: 0;
  width: auto;
}

body.is-loaded .mainVisual-lead-item span {
  opacity: 1;
}

body.is-loaded .mainVisual-lead-item::after {
  animation: anim-scaleSlide 1s forwards;
}
body.is-loaded .mainVisual-lead-item:nth-child(1):after {
  animation-delay: 0.5s;
}
body.is-loaded .mainVisual-lead-item:nth-child(1) span {
  transition-delay: 0.9s;
}
body.is-loaded .mainVisual-lead-item:nth-child(2):after {
  animation-delay: 0.6s;
}
body.is-loaded .mainVisual-lead-item:nth-child(2) span {
  transition-delay: 1s;
}

@keyframes anim-scaleSlide {
  0% {
    scale: 0 1;
    transform-origin: left;
  }
  45% {
    scale: 1 1;
    transform-origin: left;
  }
  55% {
    scale: 1 1;
    transform-origin: right;
  }
  100% {
    scale: 0 1;
    transform-origin: right;
  }
}

/*
logo
*/

.mainVisual-ci {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 99;
}
.mainVisual-ci::after {
  content: "";
  display: block;
  width: calc(100% + min(9vw,200px) + 8vw);
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(to right, var(--color-brand01) min(9vw,200px), var(--color-base) min(9vw,200px));
  transform: skewX(-48deg);
  transform-origin: left bottom;
}
.mainVisual-ci-logo {
  width: clamp(300px,28vw, 800px);
  padding: 1.3vw 2vw 0.8vw;
  position: relative;
  z-index: 9;
}

/*
slider
*/

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

.mainVisual-img.-zoom{
  transform-origin: center center;
}
.slick-animation .mainVisual-img.-zoom{
  animation: amin-mainVisual-zoom 7s linear forwards;
}
.mainVisual-img.-left{
  width: 110%;
  transform-origin: left center;
}
.slick-animation .mainVisual-img.-left{
  animation: amin-mainVisual-left 7s linear forwards;
}
.mainVisual-img.-right{
  width: 110%;
  transform-origin: right center;
}
.slick-animation .mainVisual-img.-right{
  animation: amin-mainVisual-right 7s linear forwards;
}
.mainVisual-img.-up{
  height: 110svh;
}
.slick-animation .mainVisual-img.-up{
  animation: amin-mainVisual-up 7s linear forwards;
}
.mainVisual-img.-down{
  height: 110svh;
}
.slick-animation .mainVisual-img.-down{
  animation: amin-mainVisual-down 7s 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-visual::after {
    top: 30svh;
  }

  /*
  container
  */

  .mainVisual-container {
    left: 3vw;
    bottom: 120px;
  }
  .mainVisual-lead {
    font-size: clamp(20px,9.5vw, 50px);
    letter-spacing: -0.04em;
  }
  .mainVisual-lead-item span {
  }

  /*
  logo
  */

  .mainVisual-ci {
  }
  .mainVisual-ci::after {
    width: calc(100% + min(15vw,200px) + 15vw);
    background: linear-gradient(to right, var(--color-brand01) min(15vw,200px), var(--color-base) min(15vw,200px));
  }
  .mainVisual-ci-logo {
    width: clamp(200px,60vw, 300px);
    padding: 3vw 2vw 2vw.8vw;
  }

  /*
  slider
  */

  .mainVisual-slider :not(.slick-dots) li{
    height: 100svh;
    min-height: 600px;
  }
  .mainVisual-img{
    width: 100%;
    height: 100svh;
  }
  .mainVisual-img > img {
    width: 100%;
    height: 100%;
    min-height: 600px;
  }

  .mainVisual-img.-left{
    width: 140%;
  }
  .slick-animation .mainVisual-img.-left{
  }
  .mainVisual-img.-right{
    width: 140%;
  }
  .slick-animation .mainVisual-img.-right{
  }
  .mainVisual-img.-up{
    height: 120svh;
  }
  .slick-animation .mainVisual-img.-up{
  }
  .mainVisual-img.-down{
    height: 120svh;
  }
  .slick-animation .mainVisual-img.-down{
  }

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

}

/***********
homeSlider
************/

.homeSlider {
  padding-top: 3em;
}
.homeSlider-list {
  display: flex;
}
.homeSlider-list li {
}
.homeSlider-list li a{
  display: block;
  color: inherit;
  text-decoration: none;
}
.homeSlider-item {
  padding: 0 0.4em 1em;
  width: clamp(200px,26vw, 460px);
}
.homeSlider-img {
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.homeSlider-list .slick-slide:nth-child(odd) .homeSlider-img {
  border-top-right-radius: var(--rounded-main);
}
.homeSlider-list .slick-slide:nth-child(even) .homeSlider-img {
  border-bottom-left-radius: var(--rounded-main);
}
.homeSlider-inner {
  padding-top: 0.8em;
  text-align: center;
}
.homeSlider-title {
  line-height: 1.4;
  font-size: 0.9rem;
  font-weight: 500;
}

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

  .homeSlider-inner {
    padding-top: 0.5em;
  }
  .homeSlider-title {
    font-size: 0.8rem;
    font-weight: 500;
  }

}

/***********
homeNews
************/

.homeNews {
  padding-top: min(14vw,8em);
  padding-bottom: min(14vw,8em);
}
.homeNews-container {
  position: relative;
  display: flex;
}

.homeNews-heading {
  width: 20em;
}
.homeNews-heading .l-heading-title{
  font-size: 2.4rem;
}
.homeNews-heading .l-heading-subTitle{
  font-size: 1.4rem;
}
.homeNews-inner {
  flex: 1;
}

.homeNews-link {
  text-align: right;
  position: absolute;
  left: 0;
  top: 9em;
}

@media screen and (min-width:1025px) {
  .l-btn.homeNews-btn {
    font-size: 0.85rem;
    min-width: initial;
    padding-left: 1.5em;
    text-align: left;
  }
}

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

  .homeNews-container {
    display: block;
  }
  .homeNews-heading {
    width: auto;
    padding-bottom: 2em;
  }
  .homeNews-heading .l-heading-title{
    font-size: clamp(1.5rem,4vw, 1.7rem);
    line-height: 1.5;
  }
  .homeNews-heading .l-heading-subTitle{
    font-size: 1rem;
  }



  .homeNews-link {
    text-align: center;
    position: static;
    padding-top: 3em;
  }
}



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