.header_inner.top {
  height: 60px;
  background-color: #fff;
}
/* main  */
.top_main {
  grid-column: 1 / -1;
}

/*------ pages -------*/

#body_top {
  row-gap: 20px;
}
#body_top .stack_innner {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space_s);
}

.area_top-pic {
  position: relative;
  width: 100vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(/images/top_kaku.jpg);
  aspect-ratio: 1280/791;

}
.area_chenge_bg{
  background: #e1e1e1;
  padding: var(--space_xl) 0;
  width: 100vw;
}
/*------ fv -------*/
.area_top-pic figure {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  line-height: 0;
  max-width: 100%;
  overflow: hidden;
}
.area_top-pic:nth-child(2n) figure {
  left: 50%;
}

.area_top-pic .area_top-box {
  position: absolute;
}

.area_top-text
{
  position: absolute;
  right: 40%;
  bottom: 30%;
  font-size: var(--fontsize_xl);
  line-height: 1.5;
  color: var(--background_color);
  font-family: var(--font_point01);
}



@media screen and (max-width: 782px) {
  .area_top-text {
    margin:var(--space_m);
    bottom:var(--space_xs);
    right: 0;
    font-size: var(--fontsize_nm);
  }
}

.area_top-pic:nth-child(2n) .area_top-box {
  left: inherit;
  right: 30%;
}

.holder_color_img{
  display: grid;
  grid-template-columns: 40% auto;
  flex-direction: column;
  gap: clamp(1.5rem, 0.591rem + 4.55vw, 4rem);
}


.holder_color_img  .inner_left{
  margin-top: clamp(3rem, -3.182rem + 30.91vw, 20rem);
}


/*------ 見直し下 -------*/


/* grid  */
.box100px {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

}

@media screen and (max-width: 782px) {
  .box100px {
    margin: 5px;
  }
}

.box100px article {
  margin: 5px;
  background-color: #ededed;
  padding: 3px;
  box-shadow: 2px 1px 11px -5px #777777;
}


.colorName {
    font-size: var(--fontsize_nm);
  margin: 5px 0;

}

/* cop  */





.area_color-box {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}



/* scrol  */


.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeLeftTrigger {
  opacity: 0;
}

/* ぼかしから出現 */
.blur {
  animation-name: blurAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }

  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
  opacity: 0;
}




.stack_innner {
  margin-bottom: 10rem;
}