/* -----------------------
  about
----------------------- */
.about .grid-box {
  display: grid;
}
.about .grid-box > *,
.about .grid-box::before,
.about .grid-box::after {
  grid-area: 1 / 1;
}

.about .count-box {
  width: min(71.88vw, 690px);
  margin: 0 auto;
  text-align: right;
}
.about-count-num {
  font-size: min(22.29vw, 214px);
  color: #C93F40;
  font-weight: 800;
}

.about-count-num .num-txt {
  font-size: min(41.46vw, 398px);
  font-weight: 500;
  line-height: 0.8;
  display: inline-block;
}
.about-count-num .unit {
  line-height: 1;
}

.about-ttl-box .movie-wrap {
  overflow: hidden;
  line-height: 0;
  width: 100%;
}
.about-ttl-box .movie-wrap .movie {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}


.about-01 {
  background: url(../img/about_01_bg.png) no-repeat center top / cover;
  margin-top: max(-2.5vw, -24px);
  position: relative;
}
.about-01 .grid-box::before {
  content: '';
  animation: kiran 2s ease-in-out infinite;
}

.about-01 .grid-box-01::before {
  background: url(../img/about_01_01_star.png) no-repeat center top / 100% auto;
}
.about-01 .grid-box-02::before {
  background: url(../img/about_01_02_star.png) no-repeat center top / 100% auto;
}

.about-01 .slider-area {
  background: url(../img/about_01_slider_bg.png?v1) no-repeat center 0% / 100% auto;
}

.about-01 .slider-area {
  position: relative;
}
.about-01 .slider-area::before {
  content: '';
  width: 100%;
  height: min(33.23vw, 319px);
  background: url(../img/about_01_slider_icon.png) no-repeat center top / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.about-01 .slider-area .slide-item {
  position: relative;
}
.about-01 .slider-area .slide-item::before {
  content: '';
  display: block;
  width: min(26.35vw, 253px);
  height: min(26.35vw, 253px);
  background: url(../img/about_01_slider_circle.png) no-repeat center / contain;
  animation: rotate 8s linear infinite;
  position: absolute;
  top: min(30vw, 288px);
  right: min(14.27vw, 137px);
  z-index: -1;
}



.about-02 {
  background: url(../img/about_02_bg.png) no-repeat center top / 100% auto, #FBEDB6;
}
.about-02 .ttl::after {
  content: '';
  width: 100%;
  height: min(57.4vw, 551px);
  background: url(../img/about_02_ttl_icon.png) no-repeat center / 100% auto;
  transition-delay: 0.5s;
}

.about-02 .txt-circle-box {
  margin-top: min(3.65vw, 35px);
  width: 100%;
  height: min(60.73vw, 583px);
  overflow: hidden;
  position: relative;
}
.about-02 .txt-circle-box .txt-circle {
  width: min(115vw, 1104px);
  height: min(115vw, 1104px);
  position: absolute;
  top: 0;
  left: calc(50% - min(57.5vw, 552px));
  animation: rotate 32s linear infinite;
  animation-direction: reverse;
}
.about-02 .txt-circle-box .txt-circle img {
  width: min(115vw, 1104px);
  height: min(115vw, 1104px);
}

.about-02 .movie-area {
  display: grid;
  mask: url(../img/about_02_movie_mask.png) no-repeat center bottom / 100% auto;
  margin-top: max(-52.08vw, -500px);
}
.about-02 .movie-area .movie-wrap {
  overflow: hidden;
  line-height: 0;
  aspect-ratio: 9 / 16;
  margin-top: max(-35.42vw, -340px);
  grid-area: 1 / 1 / 3;
}
.about-02 .movie-area .movie-wrap .movie {
  width: 150%;
  height: auto;
  object-fit: contain;
  object-position: 100% 100%;
  margin-top: -70%;
  margin-left: -25%;
}

.about-02 .movie-area .product-name {
  grid-area: 2 / 1 / 3;
  z-index: 3;
}


@keyframes kiran {
  0% {
    filter: brightness(1);
  }
  20% {
    filter: brightness(1.5);
  }
  40% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1);
  }
}