@charset "utf-8";

/* CSS Document */



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

.mainVisual {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--color-main);
  transition: 1s;
}
.mainVisual::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: url(../../img/pattern01.jpg) repeat center center ;
  opacity: 0.4;
  mix-blend-mode: overlay;
}
.mainVisual::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: url(../../img/pattern02.png) repeat center center / 317px auto;
  opacity: 0.8;
}

/*
visual
*/

.mainVisual-visual {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
  opacity: 0;
}
body.is-loaded .mainVisual-visual {
  opacity: 1;
  transition: 0.5s ease 0s;
}



/*
container
*/

.mainVisual-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: clamp(14px,1vw, 1.4rem);
  z-index: 99;
  color: var(--color-base);
  white-space: nowrap;
  user-select: none;
}
.mainVisual-container-inner {
}

.mainVisual-block {
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 5vw;
  position: relative;
  z-index: 9;
}
.mainVisual-logo {
  width: 20em;
  opacity: 0;
}
body.is-loaded .mainVisual-logo {
  opacity: 1;
  transition: 0.6s;
  transition-delay: 0.2s;
}
.mainVisual-inner {
  padding-left: 3em;
  padding-top: 3em;
}
.mainVisual-lead {
}
.mainVisual-lead-title {
  font-size: 300%;
  font-weight: 500;
  line-height: 1.2;
}
.mainVisual-lead-text {
  font-weight: 500;
  line-height: 1.4;
  margin-top: 1.2em;
}


.mainVisual-mark {
  position: absolute;
  right: 1em;
  top: 50%;
  translate: 0 -50%;
  width: 50vw;
  opacity: 0;
}
body.is-loaded .mainVisual-mark {
  right: 0;
  opacity: 1;
  transition: all 0.6s ease 0.1s;
}


.mainVisual-copyright {
  font-family: var(--font-family-gothic-en02);
  font-weight: 500;
  font-size: 0.8rem;
  white-space: nowrap;
  letter-spacing: 0;
  position: absolute;
  left: 2vw;
  bottom: 3vw;
  color: var(--color-base);
  rotate: 90deg;
  translate: 0 -14em;
  transform-origin: left bottom;
  pointer-events: none;
}

/*
mask
*/

.mainVisual-mask {
  display: inline-block;
  position: relative;
}
.mainVisual-mask::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-base);
  scale: 0 1;
  transform-origin: right ;
  animation: anim-mainVisual-mask 1.4s forwards 0.3s;
}
.mainVisual-mask-text {
  opacity: 0;
}
body.is-loaded .mainVisual-mask-text {
  opacity: 1;
  transition-delay: 1s;
}


@keyframes anim-mainVisual-mask {
  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;
  }
}


/*
count
*/

.mainVisual-count {
  position: absolute;
  right: 3vw;
  bottom: 2vw;
  z-index: 9;
  color: var(--color-base);
  font-size: clamp(22px,1.6vw, 2rem);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0;
}
.mainVisual-count-title {
  position: absolute;
  right: 0;
  top: 0.7em;
}
.mainVisual-count-box {
  font-size: 170%;
}
.mainVisual-count-num {
  font-size: 240%;
  font-family: var(--font-family-gothic-en);
}
.mainVisual-count-text {
}



/*
scroll
*/

.mainVisual-scroll {
  position: absolute;
  left: max(8vw,100px);
  bottom: 0;
  translate: -50% 0 ;
  z-index: 9;
  transition: 1.5s;
  transition-delay: 0.8s;
  z-index: 99;
}
.mainVisual-scroll a {
  display: block;
  position: relative;
  color: var(--color-base);
  text-decoration: none;
}
.mainVisual-scroll-text {
  font-family: var(--font-family-gothic-en02);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}
.mainVisual-scroll-bar {
  display: block;
  width: 1px;
  margin: 0.8em auto 0;
  height: clamp(40px,10svh, 100px);
  background-color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.mainVisual-scroll-bar::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-base);
  border-radius: 50%;
  position: absolute;
  left: -3px;
  top: -2px;
  transform-origin: left;
  background-color: rgba(255, 255, 255, 0.4);
  animation: anim-mainVisualScroll 2.5s ease-in-out infinite ;
  opacity: 0;
}

@keyframes anim-mainVisualScroll {
  5% {
    top: -2px;
    opacity: 0;
  }
  30% {
    top: -2px;
    opacity: 1;
  }
  70% {
    top: calc(100% - 7px);
    opacity: 1;
  }
  95% {
    top: calc(100% - 7px);
    opacity: 0;
  }
}


/*
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: 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 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-block {
    translate: 0 -10%;
  }
  .mainVisual-mark {
    translate: 0 30%;
    width: 70vw;
  }


}


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

  .mainVisual {
    min-height: 500px;
  }
  .mainVisual::after {
    background-size: 30vw auto
  }

  /*
  container
  */

  .mainVisual-container {
    font-size: clamp(14px,3.6vw, 1rem);
  }
  .mainVisual-container-inner {
  }

  .mainVisual-block {
    padding-left: 1vw;
    display: block;
    text-align: center;
    translate: 0 -4em;
  }
  .mainVisual-logo {
    width: 12em;
    margin: 0 auto;
  }
  .mainVisual-inner {
    padding-left: 0;
    padding-top: 1em;
  }
  .mainVisual-lead {
  }
  .mainVisual-lead-title {
    font-size: 220%;
    font-feature-settings: "palt";
    letter-spacing: 0.04em;
  }
  .mainVisual-lead-text {
    margin-top: 0.8em;
  }


  .mainVisual-mark {
    width: 80vw;
    max-width: 400px;
    translate: 0 6em;
  }
  body.is-loaded .mainVisual-mark {
  }


  .mainVisual-copyright {
    font-size: 0.6rem;
    left: 2vw;
    bottom: 3em;
    display: none;
  }

  /*
  mask
  */

  .mainVisual-mask {
    display: inline-block;
    position: relative;
  }

  /*
  count
  */

  .mainVisual-count {
    right: 3vw;
    bottom: 2vw;
    font-size: clamp(16px,4vw, 1.6rem);
  }
  .mainVisual-count-title {
    position: absolute;
    right: 0;
    top: 0.7em;
  }
  .mainVisual-count-box {
    font-size: 170%;
  }
  .mainVisual-count-num {
    font-size: 240%;
    font-family: var(--font-family-gothic-en);
  }
  .mainVisual-count-text {
  }



  /*
  scroll
  */

  .mainVisual-scroll {
    left: 30px;
    bottom: 1em;
  }
  .mainVisual-scroll a {
    display: block;
    position: relative;
    color: var(--color-base);
    text-decoration: none;
  }
  .mainVisual-scroll-text {
    font-weight: 500;
    font-size: 11px;
  }

  /*
  slider
  */

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

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

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

}



/***********
homeBase
************/

.homeBase {
  padding-left: 5vw;
  padding-right: 5vw;
}

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

  .homeBase {
    padding-left: min(3vw,30px);
    padding-right: min(3vw,30px);
  }

}


/***********
homeHeading
************/

.homeHeading {
  font-size: clamp(0.9rem,1vw, 2rem);
  padding-bottom: 2em;
}
.homeHeading-subTitle {
  font-family: var(--font-family-gothic-en02);
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 3em;
  margin-bottom: 2em;
  position: relative;
}
.homeHeading-subTitle::before {
  content: "";
  display: block;
  width: 2.5em;
  aspect-ratio: 1 / 1.6;
  background: url(../../img/logo_symbol_or.png) no-repeat 0 0 / 100% auto;
  position: absolute;
  left: 0;
  top: -1.7em;
}
.homeHeading-title {
  font-weight: 500;
  font-size: 170%;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
}

.homeText {
  line-height: 1.8;
}

.l-btn.homeBtn {
  font-size: clamp(1.1rem,1.1vw, 1.5rem);
}

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

  .homeHeading {
    font-size: clamp(0.9rem,1vw, 2rem);
    padding-bottom: 1.2em;
  }
  .homeHeading-subTitle {
    margin-bottom: 1.2em;
  }
  .homeHeading-title {
    font-size: 150%;
    letter-spacing: 0.04em;
  }

  .homeText {
    line-height: 1.8;
  }
  .l-btn.homeBtn {
    font-size: 1.05rem;
  }

}

/***********
textSlide
************/

.textSlide {
  background: linear-gradient(to right, #fff 18vw, #333 18vw);
  position: relative;
  z-index: 9;
}
.textSlide::after {
  content: "";
  display: block;
  width: 18vw;
  height: 30vw;
  position: absolute;
  left: 0;
  top: 100%;
  background: linear-gradient(to bottom, var(--color-brand01) 18vw, #fff 18vw);
}
.textSlide-text {
  width: 100%;
  height: 220px;
  background: url(../../img/text_slide_wt.png) repeat left top / auto 100%;
  mix-blend-mode: difference;
  animation: anim-textSlide 50s linear infinite;
}


@keyframes anim-textSlide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -3143px 0;
  }
}



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

  .textSlide-text {
    height: 146.7px;
  }

  @keyframes anim-textSlide {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -2095.33px 0;
    }
  }

}


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

  .textSlide-text {
    height: 110px;
    animation-duration: 25s;
  }

  @keyframes anim-textSlide {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -1571px 0;
    }
  }

}

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

  .textSlide-text {
    height: 74px;
    animation-duration: 20s;
  }

  @keyframes anim-textSlide {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -1048px 0;
    }
  }

}




/***********
homeService
************/

.homeService {
  padding-top: min(14vw,8em);
  padding-bottom: min(14vw,8em);
}
.homeService-container {
  padding-left: 55%;
  /* background: url(../../img/service_visual01.jpg) no-repeat left min(10vw,6em) / 50% auto; */
  position: relative;
}

.homeService-visual {
  width: 50%;
  position: absolute;
  left: 0;
  z-index: 5;
  top: min(10vw,6em);
  pointer-events: none;
}

.homeService-inner {
  padding-right: 5%;
  position: relative;
  z-index: 3;
}

.homeService-lead {
  position: absolute;
  right: calc(50% + 3em);
  top: min(10vw,6em);
  z-index: 99;
  vertical-align: bottom;
  display: flex;
  flex-direction: row-reverse;
  align-items: start;
  pointer-events: none;
}
.homeService-lead-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  width: 1.8em;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-size: clamp(1.8rem,2.4vw, 2.8rem);
  font-weight: 300;
  padding: 0.8em 0;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.homeService-box {
  margin-top: 3em;
  padding: min(7vw,2.5em)  8%;
  margin-bottom: 6em;
  position: relative;
}
.homeService-box::after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  border: 1px solid var(--color-brand01);
  border-right: none;
}
.homeService-box-title {
  font-size: 1.3rem;
  font-weight: 500;
  padding-bottom: 0.8em;
  line-height: 1.4;
}
.homeService-box-text {
  line-height: 1.8;
}

.homeService-box-link {
  position: absolute;
  left: 0;
  top: 100%;
}
.homeService-box-link a {
  display: inline-block;
  color: inherit;
  background-color: var(--color-brand01);
  font-family: var(--font-family-gothic-en02);
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
  padding: 0.5em 2em;
}
body.is-pc .homeService-box-link a:hover {
  background-color: var(--color-brand03);
}


.homeService-block {
  padding-top: min(7vw,2.5em);
  padding-bottom: min(7vw,2.5em);
  position: relative;
  z-index: 1;
}
.homeService-block::after {
  content: "";
  display: block;
  width: 100vw;
  height: 100vw;
  position: absolute;
  left: -10vw;
  top: 0;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.homeService-block-inner {
  position: relative;
  z-index: 10;
}

.homeService-slider {
  position: relative;
  z-index: 9;
}

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

  .homeService-inner {
    padding-right: 0;
  }

  .homeService-box {
    padding-right: 0;
  }

}

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

  .homeService {
    padding-top: 0;
    padding-bottom: min(14vw,8em);
  }
  .homeService-container {
    padding-left: 0;
    position: relative;
  }

  .homeService-visual {
    width: auto;
    position: static;
    margin-left: -3vw;
    margin-right: -3vw;
  }
  .homeService-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 12;
  }

  .homeService-inner {
    padding-right: 0;
    padding-top: 3em;
  }

  .homeService-lead {
    right: 3vw;
    top: 0;
    z-index: 99;
  }
  .homeService-lead-text {
    width: 1.8em;
    line-height: 1.8;
    letter-spacing: 0.02em;
    font-size: clamp(1.4rem,7vw, 1.8rem);
  }


  .homeService-box {
    margin-top: 2em;
    padding: min(7vw,2.5em)  5%;
    margin-bottom: 6em;
  }
  .homeService-box-title {
    font-size: 1.1rem;
  }

  .homeService-block::after {
    width: 100vw;
    height: 200vw;
    max-height: 500px;
  }
  .homeService-block-inner {
    padding-right: 8%;
    padding-left: 4%;
  }

}

/***********
homeStrength
************/

.homeStrength {
  position: relative;
  z-index: 10;
}

.homeStrength-header {
  position: relative;
  padding-bottom: min(8vw,5em);
}
.homeStrength-header::after {
  content: "";
  display: block;
  width: 91%;
  height: 76%;
  position: absolute;
  left: -5vw;
  top: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../../img/edge_rb.png) no-repeat right bottom / 14px auto;
}
.homeStrength-header-visual {
  padding-left: 23%;
  position: relative;
}
.homeStrength-header-img {
  margin-right: -5vw;
  position: relative;
}
.homeStrength-header-img::before {
  content: "";
  display: block;
  width: 24%;
  aspect-ratio: 1 / 1;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: var(--color-brand01);
  mix-blend-mode: color;
}
.homeStrength-header-img::after {
  content: "";
  display: block;
  width: 10%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  background: url(../../img/pattern03.png) repeat 0 0 / 7px auto;
}
.homeStrength-header-img img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  aspect-ratio: 100 / 55;
  object-fit: cover;
  object-position: center top;
}
.homeStrength-header-lead {
  position: absolute;
  right: 3%;
  bottom: 0;
  width: 38%;
  mix-blend-mode: overlay;
}
.homeStrength-header-inner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
  padding-top: 3em;
}

.homeStrength-header-box {
  font-size: clamp(1.6rem,2vw, 3rem);
  padding: 2em 3em 2em 1em;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.homeStrength-header-title {
  font-weight: 500;
  padding-bottom: 0.8em;
}
.homeStrength-header-text {
  line-height: 1.8;
  font-size: 1rem;
}

.homeStrength-link {
  text-align: center;
  position: relative;
  z-index: 99;
}

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

  .homeStrength-header {
    padding-bottom: min(8vw,5em);
  }
  .homeStrength-header::after {
    display: none;
  }


  .homeStrength-header-visual {
    padding-left: 0;
    margin-left: -3vw;
    margin-right: -3vw;
  }
  .homeStrength-header-img {
    margin-right: 0;
  }
  .homeStrength-header-img::before {
    width: 80%;
    aspect-ratio: 16 / 7;
  }
  .homeStrength-header-img::after {
    width: 20%;
    background-size: 4px auto;
  }
  .homeStrength-header-img img {
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }
  .homeStrength-header-lead {
    position: absolute;
    right: 3%;
    bottom: 0;
    width: 52%;
    mix-blend-mode: overlay;
  }

  .homeStrength-header-inner {
    position: static;
    padding-top: 3em;
  }

  .homeStrength-header-box {
    font-size: clamp(1.2rem,6vw, 1.4rem);
    padding: 0;
    background-color: none;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  .homeStrength-header-title {
  }
  .homeStrength-header-text {
    font-size: 1rem;
  }

  .homeStrength-link {
    text-align: center;
  }

}

/***********
homeSection01
************/

.homeSection01 {
  position: relative;
  background-color: var(--color-base);
  padding-bottom: min(15vw,10em);
}
.homeSection01-container {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.homeSection01-visual01 {
  width: 56%;
  padding-top: min(14vw,8em);
  position: relative;
}
.homeSection01-visual01-img {
  position: relative;
  z-index: 2;
}
.homeSection01-square01 {
  width: 100%;
  aspect-ratio: 100 / 80;
  background-color: var(--color-brand02);
  pointer-events: none;
  position: absolute;
  left: -10vw;
  bottom: -12vw;
}
.homeSection01-visual02 {
  width: 36%;
  position: relative;
}
.homeSection01-square02 {
  width: 70%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-brand01);
  pointer-events: none;
  position: absolute;
  z-index: 2;
  right: -10%;
  top: 90%;
}

.homeSection01-block {
  position: absolute;
  left: 42%;
  top: min(15vw,18em);
  z-index: 9;
}


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

  .homeSection01 {
    padding-bottom: min(15vw,10em);
  }
  .homeSection01-container {
  }
  .homeSection01-visual01 {
    width: 62%;
    padding-top: min(24vw,18em);
    scale: 1.2;
    transform-origin: left;
  }


  .homeSection01-block {
    position: relative;
    left: auto;
    top: auto;
    z-index: 9;
  }

}

/***********
homeSection02
************/

.homeSection02 {
  position: relative;
  padding-bottom: min(18vw,12em);
}
.homeSection02::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--color-base);
  mix-blend-mode: multiply;
}
.homeSection02-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: start;
  justify-content: space-between;
  position: relative;
  z-index: 9;
}
.homeSection02-visual01 {
  width: 62%;
  padding-right: 5%;
  position: relative;
}
.homeSection02-visual01-img {
  position: relative;
  z-index: 2;
}
.homeSection02-square01 {
  width: 50%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-sub01);
  pointer-events: none;
  position: absolute;
  right: -10vw;
  top: 8vw;
  opacity: 0.3;
}
.homeSection02-visual02 {
  width: 32%;
  position: relative;
  padding-top: min(20vw,18em);
}

.homeSection02-block {
  position: absolute;
  left: 25%;
  top: min(12vw,12em);
  z-index: 9;
}

.homeSection02-block .homeDesc::after {
  content: "";
  display: block;
  width: 25%;
  height: 100%;
  position: absolute;
  left: 100%;
  top: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  background: url(../../img/pattern03.png) repeat 0 0 / 7px auto;
  filter: invert(0.1);
}

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

  .homeSection02 {
  }

  .homeSection02-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: start;
    justify-content: space-between;
    position: relative;
    z-index: 9;
  }
  .homeSection02-visual01 {
    width: 66%;
    padding-right: 0;
    position: relative;
  }
  .homeSection02-visual01-img {
    position: relative;
    z-index: 2;
  }
  .homeSection02-square01 {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-brand01);
    right: -10vw;
    top: 18vw;
    opacity: 1;
  }
  .homeSection02-visual02 {
    width: 32%;
    position: relative;
    padding-top: min(20vw,18em);
    scale: 1.2;
    transform-origin: right top;
  }

  .homeSection02-block {
    position: relative;
    left: auto;
    top: auto;
    z-index: 9;
  }

  .homeSection02-block .homeDesc::after {
    background-size: 4px auto;
    border: none;
  }

}

/***********
homeSection03
************/

.homeSection03 {
  position: relative;
  background-color: var(--color-base);
  padding-bottom: min(18vw,12em);
  z-index: 9;
}
.homeSection03-square01 {
  width: 85%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: -5vw;
  top: 0;
  background: linear-gradient(to right, #f8f8f8 70%, var(--color-brand02) 70%);
}
.homeSection03-container {
  display: flex;
  align-items: start;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.homeSection03-visual01 {
  width: 62%;
  position: relative;
}
.homeSection03-square02 {
  width: 70%;
  aspect-ratio: 100 / 20;
  background-color: var(--color-brand01);
  pointer-events: none;
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 100%;
}
.homeSection03-visual01-img {
  position: relative;
  z-index: 2;
}
.homeSection03-visual02 {
  width: 32%;
  position: relative;
  padding-top: min(20vw,18em);
}
.homeSection03-square03 {
  width: 90%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  right: -25%;
  top:  77%;
}
.homeSection03-square03::before,
.homeSection03-square03::after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
}
.homeSection03-square03::before {
  background: linear-gradient(to right, transparent 50%, var(--color-brand01) 50%);
  top: 0;
}
.homeSection03-square03::after {
  background: linear-gradient(to left, transparent 50%, var(--color-brand02) 50%);
  bottom: 0;
}

.homeSection03-block {
  position: absolute;
  left: 46%;
  top: min(20vw,18em);
  z-index: 9;
}

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

  .homeSection03 {
    position: relative;
    background-color: var(--color-base);
    padding-bottom: min(18vw,12em);
    z-index: 9;
  }
  .homeSection03-square01 {
    background: linear-gradient(to right, #f8f8f8 50%, var(--color-brand02) 50%);
  }

  .homeSection03-container {
  }
  .homeSection03-visual01 {
    margin-right: -5vw;
  }
  .homeSection03-square02 {
    width: 70%;
    aspect-ratio: 100 / 20;
    background-color: var(--color-brand01);
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 100%;
  }
  .homeSection03-visual01-img {
    position: relative;
    z-index: 2;
  }
  .homeSection03-visual02 {
    width: 36%;
    scale: 1.3;
  }

  .homeSection03-block {
    position: relative;
    left: auto;
    top: auto;
    z-index: 9;
  }

}



/***********
homeDesc
************/

.homeSection04 {
  position: relative;
  background-color: var(--color-base);
  padding-bottom: min(8vw,3em);
  z-index: 9;
  overflow: hidden;
}
.homeSection04-container {
  position: relative;
}
.homeSection04-visual01 {
  position: absolute;
  left: 0;
  top: 0;
}
.homeSection04-visual01-img {
  position: relative;
}
.homeSection04-visual01-img::after {
  content: "";
  display: block;
  width: 20%;
  aspect-ratio: 1 / 1;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--color-brand01);
  opacity: 0.90;
}
.homeSection04-visual01-img img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
}
.homeSection04-square01 {
}

.homeSection04-block {
  padding-left: 5%;
  padding-top: min(12vw,10em);
  z-index: 9;
  position: relative;
}

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

  .homeSection04 {
    padding-bottom: min(8vw,3em);
    margin-left: -3vw;
    margin-right: -3vw;
  }
  .homeSection04-container {
    position: relative;
  }
  .homeSection04-visual01 {
    position: static;
  }
  .homeSection04-visual01-img {
    position: relative;
  }
  .homeSection04-visual01-img::after {
    width: 38%;
    aspect-ratio: 16 / 11;
    background-color: var(--color-brand01);
    opacity: 0.90;
    mix-blend-mode: multiply;
  }
  .homeSection04-visual01-img img {
    min-height: 200px;
    object-fit: cover;
    aspect-ratio: 16 / 10;
  }
  .homeSection04-square01 {
  }

  .homeSection04-block {
    padding-left: 0;
    padding-top: 0;
    position: relative;
    left: auto;
    top: auto;
    z-index: 9;
    margin-top: -30px;
  }

}

/***********
homeDesc
************/

.homeDesc {
  width: 36em;
  min-height: 33em;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: min(8vw,4em);
  font-size: clamp(1rem,1vw, 1.6rem);
  position: relative;
  z-index: 9;
}
.homeDesc-heading {
  padding-bottom: 2em;
}
.homeDesc-heading-title {
  font-size: 160%;
  font-weight: 500;
  letter-spacing: 0.15em;
}
.homeDesc-heading-subTitle {
  font-family: var(--font-family-gothic-en02);
  font-weight: 500;
  white-space: nowrap;
  text-transform: uppercase;
  padding-left: 1.2em;
  position: relative;
  color: var(--color-dark01);
  margin-top: 1em;
}
.homeDesc-heading-subTitle::before {
  content: "";
  display: block;
  width:  0.5em;
  height: 0.5em;
  position: absolute;
  left: 0;
  top: 0.3em;
  background: var(--color-brand01);
  border-radius: 50%;
}
.homeDesc-lead {
  font-size: 200%;
  font-feature-settings: "palt";
  font-weight: 350;
  padding-bottom: 0.8em;
  letter-spacing: 0.08em;
}
.homeDesc-text {
  font-size: max(90%,1rem);
  line-height: 1.8;
}

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

  .homeDesc {
    min-height: initial;
    width: clamp(200px,88vw, 520px);
    margin: 0 auto;
    padding: min(7vw,2em) min(5vw,2em);
    font-size: 1rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .homeDesc-heading {
    padding-bottom: 1em;
  }
  .homeDesc-heading-title {
    font-size: 130%;
  }
  .homeDesc-heading-subTitle {
    margin-top: 0.5em;
  }
  .homeDesc-lead {
    font-size: 140%;
    letter-spacing: 0.04em;
  }
  .homeDesc-text {
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
  }

}

/***********
homeWorks
************/

.homeWorks {
  padding-top: min(14vw,8em);
  padding-bottom: min(14vw,8em);
}
.homeWorks-container {
  padding-left: 55%;
  position: relative;
}

.homeWorks-visual {
  width: 55%;
  position: absolute;
  left: -5vw;
  z-index: 5;
}
.homeWorks-img {
}
.homeWorks-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}


.homeWorks-inner {
  padding-right: 5%;
  padding-top: 4em;
  position: relative;
  z-index: 3;
}


.homeWorks-block {
  padding-top: min(7vw,2.5em);
  padding-bottom: min(7vw,2.5em);
  position: relative;
  z-index: 1;
  font-size: clamp(1rem,1vw, 2rem);
}
.homeWorks-block::after {
  content: "";
  display: block;
  width: 100vw;
  height: 150%;
  position: absolute;
  left: -10vw;
  top: 0;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.homeWorks-block-inner {
  position: relative;
  z-index: 10;
}
.homeWorks-block-title {
  font-weight: 500;
  font-feature-settings: "palt";
  font-size: 170%;
  letter-spacing: 0.08em;
  padding-bottom: 3em;
}


.homeWorks-pickup {
}
.homeWorks-pickup-title {
  font-size: 120%;
  font-weight: 500;
  padding-bottom: 0.5em;
}
.homeWorks-pickup-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: 0.2s;
}
body.is-pc .homeWorks-pickup-title a:hover {
  color: var(--color-brand01);
  text-decoration-color: inherit;
}


.homeWorks-pickup-data {
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  font-size: 90%;
  display: grid;
  grid-template-columns: minmax(4em, max-content) 1fr;
  column-gap: 0.5em;
  margin: 0;
  padding: 0;
}
.homeWorks-pickup-cat {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1em;
}
.homeWorks-pickup-cat a,
.homeWorks-pickup-cat span {
  display: inline-block;
  background-color: var(--color-base);
  color: var(--color-primary01);
  border: 1px solid var(--color-primary01);
  text-decoration: none;
  font-size: 85%;
  padding: 0.2em 1em;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
  border-radius: 4px;
}
body.is-pc .homeWorks-pickup-cat a:hover {
  background-color: var(--color-primary01);
  color: var(--color-base);
}

.homeWorks-slider {
  position: relative;
  z-index: 9;
}

.homeWorks-link {
  text-align: center;
  padding-top: 3em;
}

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

  .homeWorks {
  }
  .homeWorks-container {
    padding-left: 0;
  }

  .homeWorks-visual {
    width: auto;
    position: static;
    margin-left: -3vw;
    margin-right: -3vw;
  }
  .homeWorks-img {
  }
  .homeWorks-img img {
    aspect-ratio: 16 / 9;
  }

  .homeWorks-inner {
    padding-right: 0;
    padding-top: 3em;
  }


  .homeWorks-block {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
    font-size: clamp(1rem,1vw, 2rem);
  }
  .homeWorks-block::after {
    display: none;
  }
  .homeWorks-block-inner {
    position: relative;
    z-index: 10;
  }
  .homeWorks-block-title {
    font-weight: 500;
    font-feature-settings: "palt";
    font-size: 130%;
    letter-spacing: 0.04em;
    padding-bottom: 2em;
  }


  .homeWorks-pickup {
    display: none;
  }


  .homeWorks-slider {
    position: relative;
    z-index: 9;
  }

  .homeWorks-link {
    text-align: center;
    padding-top: 3em;
  }

}

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

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

.homeNews-heading {
  width: 18em;
}
.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;
  }
  .homeNews-link {
    text-align: center;
    position: static;
    padding-top: 3em;
  }
}


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

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

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

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