/* -----------------------
  cause
----------------------- */
.cause {
  background: linear-gradient(to bottom, transparent 0%, transparent min(13.54vw, 130px), #F6DC6D min(13.54vw, 130px), #F6DC6D 100%), url(../img/cause_bg_top.png) no-repeat center top / 100% auto;
  position: relative;
}

/* top-icon-box */
.cause .top-icon-box {
  width: 100%;
  height: min(180.83vw, 1736px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}

.cause .top-icon-box .dani-icon {
  --deg: 0deg;

  width: min(18.13vw, 174px);
  height: min(17.5vw, 168px);
  transform: rotateZ(var(--deg)) rotateY(180deg);
  transition: all 0.3s;
  filter: brightness(0);
  position: absolute;
  transition-delay: 0.4s;
}
.cause .top-icon-box .dani-icon-01 {
  --deg: -220deg;
  top: min(2.92vw, 28px);
  left: max(-3.85vw, -37px);
}
.cause .top-icon-box .dani-icon-02 {
  --deg: 224deg;
  top: min(45.52vw, 437px);
  right: max(-4.9vw, -47px);
}
.cause .top-icon-box .dani-icon-03 {
  --deg: -45deg;
  top: min(66.25vw, 636px);
  left: min(3.23vw, 31px);
}
.cause .top-icon-box .dani-icon-04 {
  --deg: 27deg;
  top: min(75.21vw, 722px);
  right: min(9.17vw, 88px);
}
.cause .top-icon-box .dani-icon-05 {
  --deg: 25deg;
  bottom: min(54.58vw, 524px);
  left: max(-3.96vw, -38px);
}
.cause .top-icon-box .dani-icon-06 {
  --deg: -46deg;
  bottom: min(115.63vw, 150px);
  right: min(12.08vw, 116px);
}
.cause .top-icon-box .dani-icon-07 {
  --deg: -212deg;
  bottom: 0;
  left: min(6.56vw, 63px);
}

.cause .top-icon-box.trigger.move .dani-icon {
  transform: rotateZ(var(--deg)) rotateY(0deg);
  filter: brightness(1);
}

/* ttl */
.cause .ttl {
  position: relative;
  z-index: 3;
}
.cause .ttl {
  display: grid;
}
.cause .ttl span {
  grid-area: 1 / 1;
}
.cause .ttl .scaleUpDown {
  transform-origin: 75% 25%;
  animation-delay: 0.6s;
}

/* ph-box */
.cause .ph-box {
  background: url(../img/cause_01_bg.png) no-repeat center / contain;
  margin-top: max(-17.6vw, -169px);
}
.cause .ph-box img {
  opacity: 1;
  transition: opacity 1s;
  transition-delay: 1.2s;
}
.cause .ph-box.trigger.move img {
  opacity: 0;
}

/* grid-box */
.cause .grid-box {
  display: grid;
}
.cause .grid-box p {
  grid-area: 1 / 1;
}

.cause .grid-box-01 .icon {
  animation: fuwafuwa 2s ease-in-out infinite;
}
.cause .grid-box-02 {
  margin-top: max(-26.56vw, -255px);
}
.cause .grid-box-02 .scaleUpDown:nth-child(1) {
  transform-origin: 25% 25%;
}
.cause .grid-box-02 .scaleUpDown:nth-child(2) {
  transform-origin: 75% 25%;
}
.cause .grid-box-03 {
  margin-top: max(-5.94vw, -57px);
}
.cause .grid-box-03 .scaleUpDown {
  transform-origin: 75% 50%;
  animation-delay: 0s;
}

/* balloon-box */
.cause .balloon-box {
  display: grid;
  grid-template-columns: min(10.42vw, 100px) 1fr min(10.42vw, 100px);
}
.cause .balloon-box > p {
  grid-area: 1 / 1 / 2 / 4;
}
.cause .balloon-box .balloons {
  grid-area: 1 / 2 / 2 / 3;
  display: grid;
  grid-template-columns: min(17.81vw, 171px) min(17.29vw, 166px) min(16.35vw, 157px) min(15.52vw, 149px) min(12.19vw, 117px);
}
.cause .balloon-box .balloons .balloon {
  display: block;
  width: min(12.19vw, 117px);
  margin: 0 auto 0 0;
}

.cause .balloon-box .balloons .balloon-middle {
  margin-top: min(3.13vw, 30px);
}
.cause .balloon-box .balloons .balloon-low {
  margin-top: min(12.71vw, 122px);
}

.cause .balloon-box-01 .balloons .balloon:nth-child(1) {
  transition-delay: 0s;
}
.cause .balloon-box-01 .balloons .balloon:nth-child(2) {
  transition-delay: 0.1s;
}
.cause .balloon-box-01 .balloons .balloon:nth-child(3) {
  transition-delay: 0.2s;
}
.cause .balloon-box-01 .balloons .balloon:nth-child(4) {
  transition-delay: 0.3s;
}
.cause .balloon-box-01 .balloons .balloon:nth-child(5) {
  transition-delay: 0.4s;
}

.cause .balloon-box-02 {
  margin-top: max(-9.69vw, -93px);
}
.cause .balloon-box-02 .balloons .balloon:nth-child(1) {
  transition-delay: 0.5s;
}
.cause .balloon-box-02 .balloons .balloon:nth-child(2) {
  transition-delay: 0.6s;
}
.cause .balloon-box-02 .balloons .balloon:nth-child(3) {
  transition-delay: 0.7s;
}


/* Animation */
@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(0);
  }
}