.bg-wh { overflow: visible!important; z-index: 10!important; }
.sec01 .sec01-wrap:first-child::before,
.sec02::before, .sec02::after,
.sec02 .sec02-wrap:first-child::before,
.sec03 > .tit-box:first-child::after,
.sec04::before, .sec04::after,
.sec06::before,
.sec06 .sec06-wrap::before,
.sec06 .sec06-wrap::after,
.sec07-wrap::before, .sec07-wrap::after,
.sec08::before, .sec08::after,
.sec08-wrap::before,
.sec09-wrap::before,
.sec11-wrap::before, .sec11-wrap::after,
.sec12::before, .sec12::after,
.sec12-wrap::before,
.sec13-wrap::after {
    content: "";
    z-index: -1;
    display: block;
    transition: all .4s;
    position: absolute;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
/*--- bg-bubble - animation ---*/
.sec02::before, .sec04::before, .sec06::before, .sec09-wrap::before, .sec08::after, .sec11-wrap::after, .sec12-wrap::before {
    animation: vertical01 4s ease-in-out infinite alternate;
}
.sec02::after,  .sec06 .sec06-wrap::before, .sec07-wrap::after, .sec08::before, .sec12::before, .sec13-wrap::after {
    animation: vertical02 4s ease-in-out infinite alternate;
}
@keyframes vertical01 {
  0% { -webkit-transform: translateY(0px) scaleX(1); }
  100% { -webkit-transform: translate(30px, 30px) scaleX(0.9); }
}
@keyframes vertical02 {
  0% { -webkit-transform: translateY(0px) scaleX(1); }
  100% { -webkit-transform: translateY(-20px) scaleX(1.1); }
}

.sec01 .sec01-wrap:first-child::before {
    width: max(150px, 20.3125vw);
    height: max(175px, 23.4375vw);
    bottom: 0;
    left: -3.2%;
    background-image: url(../img/bg-wood01.png);
}
.sec02::before {
    width: max(200px, 43.75vw);
    height: max(200px, 41.015625vw);
    top: -35vw;
    left: -18%;
    background-image: url(../img/bg-bubble01.png);
}
.sec02 .sec02-wrap:first-child::before {
    width: max(150px, 25vw);
    height: max(150px, 25vw);
    top: -10vw;
    right: -2%;
    background-image: url(../img/bg-wood02.png);
}
.sec02::after {
    width: max(200px, 39.0625vw);
    height: max(250px, 46.875vw);
    bottom: -47vw;
    right: -13%;
    background-image: url(../img/bg-bubble02.png);
}
.sec03 > .tit-box:first-child::after {
    width: max(135px, 21.09375vw);
    height: max(150px, 23.4375vw);
    bottom: -5vw;
    left: 5%;
    background-image: url(../img/bg-wood03.png);
}
.sec04::before {
    width: max(230px, 42.96875vw);
    height: max(150px, 28.125vw);
    top: -30vw;
    left: -15%;
    background-image: url(../img/bg-bubble03.png);
}
.sec04::after {
    width: max(220px, 35.9375vw);
    height: max(210px, 34.375vw);
    top: -31vw;
    right: -3.5%;
    background-image: url(../img/bg-wood04.png);
}
.sec06::before {
    width: max(120px, 23.4375vw);
    height: max(120px, 23.4375vw);
    top: -23vw;
    right: 3%;
    background-image: url(../img/bg-bubble05.png);
}
.sec06 .sec06-wrap::before {
    width: max(140px, 25.78125vw);
    height: max(120px, 21.484375vw);
    bottom: 100%;
    left: -5%;
    background-image: url(../img/bg-bubble04.png);
}
.sec06 .sec06-wrap::after {
    width: max(135px, 23.4375vw);
    height: max(150px, 25.78125vw);
    top: calc(100% + 10vw);
    left: 6%;
    background-image: url(../img/bg-wood05.png);
}
.sec07-wrap::after {
    width: max(225px, 35.15625vw);
    height: max(250px, 39.0625vw);
    top: -39vw;
    right: -18%;
    background-image: url(../img/bg-bubble06.png);
}
.sec07-wrap::before {
    z-index: 10;
    width: max(181px, 25.546875vw);
    height: max(136px, 19.140625vw);
    top: -10vw;
    right: 6%;
    background-image: url(../img/faq-icon01.png);
}
.sec08::before {
    width: max(220px, 34.375vw);
    height: max(250px, 39.0625vw);
    top: -22vw;
    left: -4%;
    background-image: url(../img/bg-bubble07.png);
}
.sec08-wrap::before {
    width: max(160px, 28.90625vw);
    height: max(152px, 23.4375vw);
    bottom: calc(100% - 6vw);
    right: -5.5%;
    background-image: url(../img/bg-wood06.png);
}
.sec08::after {
    width: max(150px, 23.4375vw);
    height: max(150px, 23.4375vw);
    bottom: -33vw;
    right: 9%;
    background-image: url(../img/bg-bubble09.png);
}
.sec09-wrap::before {
    width: max(200px, 37.5vw);
    height: max(210px, 38.28125vw);
    top: 0;
    left: -15%;
    background-image: url(../img/bg-bubble08.png);
}
.sec11-wrap::before {
    width: max(210px, 32.8125vw);
    height: max(240px, 37.5vw);
    bottom: calc(100% - 17.5vw);
    left: -4%;
    background-image: url(../img/bg-wood07.png);
}
.sec11-wrap::after {
    width: max(200px, 39.84375vw);
    height: max(250px, 49.21875vw);
    top: -10vw;
    right: -10%;
    background-image: url(../img/bg-bubble10.png);
}
.sec12::before {
    width: max(135px, 28.90625vw);
    height: max(135px, 28.90625vw);
    top: -22vw;
    left: 5%;
    background-image: url(../img/bg-bubble11.png);
}
.sec12-wrap::before {
    width: max(100px, 15.625vw);
    height: max(100px, 15.625vw);
    top: -5vw;
    right: 8%;
    background-image: url(../img/bg-bubble12.png);
}
.sec12::after {
    width: max(160px, 25vw);
    height: max(205px, 32.03125vw);
    top: calc(100% + 10vw);
    right: -2%;
    background-image: url(../img/bg-wood08.png);
}
.sec13-wrap::after {
    width: max(250px, 39.0625vw);
    height: max(400px, 62.5vw);
    top: -24vw;
    left: -10%;
    bottom: auto;
    background-image: url(../img/bg-bubble13.png);
}


/* box裏の雲 */
.sec02-box { position: relative; }
.sec02-box:nth-child(2)::before,
.sec02-box:nth-child(3)::before {
    content: "";
    z-index: -1;
    display: block;
    transition: all .4s;
    position: absolute;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.sec02-box:nth-child(2)::before {
    width: max(300px, 46.875vw);
    height: max(195px, 30.46875vw);
    top: 30%;
    right: 60%;
    background-image: url(../img/bg-cloud01.png);
}
.sec02-box:nth-child(3)::before {
    width: max(450px, 70.3125vw);
    height: max(300px, 46.875vw);
    top: -10%;
    left: 60%;
    background-image: url(../img/bg-cloud02.png);
}

@media screen and (max-width: 575px) {
    .sec02 .sec02-wrap:first-child::before { top: 20vw; right: -6%; }
    .sec02-box:nth-child(2)::before { width: max(350px, 46.875vw); height: max(230px, 30.46875vw); top: 25%; right: 20%; }
    .sec02-box:nth-child(3)::before { width: max(450px, 70.3125vw); height: max(300px, 46.875vw); top: 25%; left: 20%; }
    .sec03 > .tit-box:first-child::after { bottom: 7vw; left: -5%; }
    .sec04::before { top: -35vw; }
    .sec06 .sec06-wrap::before { bottom: 103%; }
    .sec06::before { top: -25vw; right: 1%; }
    .sec07-wrap::after { display: none; }
    .sec07-wrap::before { top: auto; bottom: calc(100% + 7vw); right: -1%; }
    .sec08::before { top: 35vw; left: -10%; }
    .sec08-wrap::before { bottom: 100%; }
    .sec08::after { bottom: -35vw; right: 0; }
    .sec09-wrap::before { top: 5%; }
    .sec11-wrap::before { left: -22%; }
    .sec11-wrap::after { top: 20vw; }
    .sec12::before { top: -25vw; left: -5%; }
    .sec12-wrap::before { top: -25vw; right: 0; }
    .sec12::after { top: 97%; right: -15%; }
    .sec13-wrap::after { top: -40vw; }
}