/* -----------------------
  caution
----------------------- */
.caution {
  background: url(../img/caution_bg.png) no-repeat center top / 100% auto, #def1f7;
}

.caution .ttl-box p,
.caution .ttl-box .grid-01,
.caution .ttl-box .grid-02,
.caution .ttl-box .grid-03,
.caution .ttl-box .grid-05 {
  grid-area: 1 / 1 / 2 / 2;
  align-self: end;
  padding-top: min(calc(67/960 * 100vw),67px);
}

.caution_point {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.caution_point p {
  grid-area: 1 / 1 / 2 / 2; 
}

.caution_point .grid-01 {
  transition-delay: 0s;
}
.caution_point .grid-02 {
  transition-delay: 0.5s;
}
.caution_point .grid-03 {
  transition-delay: 1s;
}

.caution_bnr {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.caution_bnr{
  position: relative;
}

.caution_bnr .caution_bnr_icon{
  position: absolute;
  top: max(calc(-58/ 960 * 100vw),-58px);
}

.caution .ttl-box .grid-03,
.caution .ttl-box .grid-04 {
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.caution .ttl-box .grid-03 {
  transform: translateX(100px);
}

.caution .ttl-box .grid-04 {
  transform: translateX(-100px);
}

.caution .ttl-box .grid-03.show,
.caution .ttl-box .grid-04.show {
  opacity: 1;
  transform: translateX(0);
}

.caution .ttl-box .grid-05 {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.caution .ttl-box .show {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
}

.caution-02{
  position: relative;
}

.caution-02-icon{
  width: min(calc(146/960 * 100vw),146px);
  position: absolute;
  right: min(calc(130/960 * 100vw),130px);
  top: min(calc(98/960 * 100vw),98px);
  opacity: 0;
}

.caution-02-icon.trigger.move{
  animation: scale_gutto02 0.6s ease-in forwards;
}

@keyframes scale_gutto02 {
  0% {
    opacity: 1;
    transform: scale(0, 0);
  }
  75% {
    opacity: 1;
    transform: scale(1.3, 1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
