/*
visual
*/

.top-visual {
    position: relative;
    background: linear-gradient(to bottom,
            #B1DEEE 0%,
            #FFFFFF 100%);
    width: 100%;
    height: clamp(500px, 391.888px + 33.78vw, 1000px);
    overflow: hidden;
}

@keyframes top-visual-logo-show {
    0% {
        transform: translate3d(-40%, -100%, 0);
    }

    100% {
        transform: translate3d(-40%, 0, 0);
    }
}

.top-visual-logo {
    animation: top-visual-logo-show 0.7s cubic-bezier(.8, 1.89, .49, .75) 0.2s both;
    aspect-ratio: 1022 / 304;
    position: absolute;
    left: 50%;
    transform: translateX(-40%);
    filter: drop-shadow(0 0 10px #ffffffbb);
    top: 65px;
    width: min(80%, 1022px);
    pointer-events: none;
    background-image: url(../images/top/visual/logo.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 20;
}


@keyframes top-visual-flags-show {
    0% {
        transform: translate3d(0, -100%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.top-visual-flags-left {
    animation: top-visual-flags-show 0.7s cubic-bezier(.8, 1.89, .49, .75) 1.8s both;
    aspect-ratio: 288 / 150;
    position: absolute;
    top: 0;
    left: 0;
    width: min(30%, 460px);
    pointer-events: none;
    background-image: url(../images/top/visual/flags_left.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

.top-visual-flags-right {
    animation: top-visual-flags-show 0.7s cubic-bezier(.8, 1.89, .49, .75) 1.8s both;
    aspect-ratio: 288 / 150;
    position: absolute;
    top: 0;
    right: 0;
    width: min(30%, 460px);
    pointer-events: none;
    background-image: url(../images/top/visual/flags_right.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

@keyframes top-visual-grass-show {
    0% {
        transform: translate3d(0, 20%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.top-visual-grass {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    background-image: url(../images/top/visual/grass.svg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.top-visual-container {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.top-visual-container__cloud-001 {
    position: absolute;
    top: calc((375 / 1000) * 100%);
    left: calc((27 / 1800) * 100%);
    transform: translateZ(10px);
}

.top-visual-container__cloud-002 {
    position: absolute;
    top: calc((288 / 1000) * 100%);
    left: calc((122 / 1800) * 100%);
    transform: translateZ(-10px);
}

.top-visual-container__cloud-003 {
    position: absolute;
    top: calc((323 / 1000) * 100%);
    right: calc((64 / 1800) * 100%);
    transform: translateZ(-20px);
}

.top-visual-container__cloud-004 {
    position: absolute;
    top: calc((448 / 1000) * 100%);
    left: calc((161 / 1800) * 100%);
    transform: translateZ(50px);
}

.top-visual-container__cloud-005 {
    position: absolute;
    top: calc((430 / 1000) * 100%);
    right: calc((163 / 1800) * 100%);
    transform: translateZ(50px);
}

.top-visual-container__confetti-001 {
    position: absolute;
    top: calc((608 / 1000) * 100%);
    left: calc((117 / 1800) * 100%);
    transform: translateZ(50px);
}

.top-visual-container__confetti-002 {
    position: absolute;
    top: calc((747 / 1000) * 100%);
    left: calc((365 / 1800) * 100%);
    transform: translateZ(50px);
}

.top-visual-container__confetti-003 {
    position: absolute;
    top: calc((392 / 1000) * 100%);
    left: calc((546 / 1800) * 100%);
    transform: translateZ(50px);
}

.top-visual-container__confetti-004 {
    position: absolute;
    top: calc((407 / 1000) * 100%);
    right: calc((505 / 1800) * 100%);
    transform: translateZ(50px);
}

.top-visual-container__confetti-005 {
    position: absolute;
    top: calc((429 / 1000) * 100%);
    right: calc((312 / 1800) * 100%);
    transform: translateZ(100px);
}

.top-visual-container__confetti-006 {
    position: absolute;
    top: calc((701 / 1000) * 100%);
    right: calc((311 / 1800) * 100%);
    transform: translateZ(50px);
}

@keyframes top-visual-bird-fly-in-001 {
    0% {
        transform: translate3d(-400px, -400px, 0);
    }

    100% {
        transform: translate3d(0, 0, -20px);
    }
}

@keyframes top-visual-bird-fly-in-002 {
    0% {
        transform: translate3d(-200px, -400px, 20px);
    }

    100% {
        transform: translate3d(0, 0, 100px);
    }
}

@keyframes top-visual-bird-fly-in-003 {
    0% {
        transform: translate3d(-400px, -200px, 100px);
    }

    100% {
        transform: translate3d(0, 0, 150px);
    }
}

.top-visual-container__bird-001 {
    animation: top-visual-bird-fly-in-001 2s cubic-bezier(.4, 1.09, 1, 1) forwards;
    position: absolute;
    top: calc((200 / 1000) * 100%);
    left: calc((250 / 1800) * 100%);
}

@media (max-width: 780px) {
    .top-visual-container__bird-001 {
        top: calc((300 / 1000) * 100%);
    }
}

.top-visual-container__bird-002 {
    animation: top-visual-bird-fly-in-002 2s cubic-bezier(.4, 1.09, 1, 1) forwards;
    position: absolute;
    top: calc((453 / 1000) * 100%);
    left: calc((301 / 1800) * 100%);
}

@media (max-width: 780px) {
    .top-visual-container__bird-002 {
        top: calc((553 / 1000) * 100%);
    }
}

.top-visual-container__bird-003 {
    animation: top-visual-bird-fly-in-003 2s cubic-bezier(.4, 1.09, 1, 1) forwards;
    position: absolute;
    top: calc((275 / 1000) * 100%);
    left: calc((700 / 1800) * 100%);
}

@media (max-width: 780px) {
    .top-visual-container__bird-003 {
        top: calc((375 / 1000) * 100%);
    }
}

.top-visual-container__dog {
    position: absolute;
    bottom: calc((37 / 1000) * 100%);
    left: 50%;
    transform: translateX(-47%) translateZ(0px);
    transform-style: preserve-3d;
}

@keyframes top-visual-cloud {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(0, -20px, 0) scale(1.2);
    }
}

.top-visual-cloud-001 {
    animation: top-visual-cloud 3s ease-in-out infinite alternate-reverse;
    animation-delay: 0s;
    aspect-ratio: 123 / 64;
    width: clamp(41.008px, 23.264px + 5.54vw, 123.008px);
    background-image: url(../images/top/visual/cloud_001.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 780px) {
    .top-visual-cloud-001 {
        display: none;
    }
}

.top-visual-cloud-002 {
    animation: top-visual-cloud 3s ease-in-out infinite alternate;
    aspect-ratio: 109 / 63;
    width: clamp(36px, 20.224px + 4.93vw, 109.008px);
    background-image: url(../images/top/visual/cloud_002.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-cloud-003 {
    animation: top-visual-cloud 3s ease-in-out infinite alternate-reverse;
    aspect-ratio: 123 / 64;
    width: clamp(41.008px, 23.264px + 5.54vw, 123.008px);
    background-image: url(../images/top/visual/cloud_003.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-cloud-004 {
    animation: top-visual-cloud 3s ease-in-out infinite alternate;
    aspect-ratio: 86 / 107;
    width: clamp(28px, 15.456px + 3.92vw, 86px);
    background-image: url(../images/top/visual/cloud_004.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-cloud-005 {
    animation: top-visual-cloud 3s ease-in-out infinite alternate-reverse;
    aspect-ratio: 67 / 78;
    width: clamp(23.008px, 13.488px + 2.97vw, 67.008px);
    background-image: url(../images/top/visual/cloud_005.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

@keyframes top-visual-confetti {
    0% {
        filter: brightness(1);
        transform: translate3d(0, 0, 10px);
    }

    100% {
        filter: brightness(1.2);
        transform: translate3d(0, calc(clamp(20px, 15.68px + 1.35vw, 40px) * -1 * var(--confetti-amount, 1)), -10px);
    }
}

.top-visual-confetti-001 {
    --confetti-amount: 2;
    animation: top-visual-confetti 3s both ease-in-out infinite alternate;
    animation-delay: 0.6s;
    aspect-ratio: 224 / 76;
    width: clamp(75.008px, 42.784px + 10.07vw, 224px);
    background-image: url(../images/top/visual/confetti_001.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-confetti-002 {
    --confetti-amount: 2;
    animation: top-visual-confetti 3s both ease-in-out infinite alternate-reverse;
    aspect-ratio: 126 / 45;
    width: clamp(42px, 23.84px + 5.68vw, 126px);
    background-image: url(../images/top/visual/confetti_002.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-confetti-003 {
    --confetti-amount: 1;
    animation: top-visual-confetti 3s both ease-in-out infinite alternate;
    aspect-ratio: 151 / 158;
    width: clamp(50px, 28.16px + 6.82vw, 151.008px);
    background-image: url(../images/top/visual/confetti_003.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 780px) {
    .top-visual-confetti-003 {
        display: none;
    }
}

.top-visual-confetti-004 {
    --confetti-amount: 1;
    animation: top-visual-confetti 3s both ease-in-out infinite alternate-reverse;
    aspect-ratio: 140 / 165;
    width: clamp(47.008px, 26.896px + 6.28vw, 140px);
    background-image: url(../images/top/visual/confetti_004.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-confetti-005 {
    --confetti-amount: 2;
    animation: top-visual-confetti 3s both ease-in-out infinite alternate;
    aspect-ratio: 175 / 151;
    width: clamp(58px, 32.704px + 7.91vw, 175.008px);
    background-image: url(../images/top/visual/confetti_005.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-confetti-006 {
    --confetti-amount: 3;
    animation: top-visual-confetti 3s both ease-in-out infinite alternate;
    aspect-ratio: 127 / 55;
    width: clamp(42px, 23.616px + 5.74vw, 127.008px);
    background-image: url(../images/top/visual/confetti_006.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-dog {
    aspect-ratio: 712 / 556;
    position: relative;
    width: clamp(270px, 174.432px + 29.86vw, 712px);
    transform-style: preserve-3d;
}

.top-visual-dog__dog {
    position: absolute;
    top: calc((0 / 556) * 100%);
    left: calc((250 / 712) * 100%);
    width: calc((375 / 712) * 100%);
    height: calc((515 / 556) * 100%);
    background-image: url(../images/top/visual/dog/dog.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateZ(-20px);
    z-index: 1;
}

@keyframes top-visual-dog-key {
    0% {
        transform: translate3d(0, 0, 21px) rotate3d(0, 0, 1, 0deg);
    }

    80% {
        transform: translate3d(0, 0, 21px) rotate3d(0, 0, 1, 0deg);
    }

    90% {
        transform: translate3d(0, 0, 21px) rotate3d(0, 0, 1, -4deg);
    }

    100% {
        transform: translate3d(0, 0, 21px) rotate3d(0, 0, 1, 4deg);
    }
}

.top-visual-dog__key {
    animation: top-visual-dog-key 5s ease-in-out infinite alternate;
    position: absolute;
    top: calc((145 / 556) * 100%);
    left: calc((308 / 712) * 100%);
    width: calc((134 / 712) * 100%);
    height: calc((226 / 556) * 100%);
    background-image: url(../images/top/visual/dog/key.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: 50% 17%;
    z-index: 11;
}

.top-visual-dog__keySmall {
    position: absolute;
    top: calc((240 / 556) * 100%);
    right: calc((0 / 712) * 100%);
    width: calc((87 / 712) * 100%);
    height: calc((84 / 556) * 100%);
    background-image: url(../images/top/visual/dog/key_small.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-visual-dog__boxFront {
    position: absolute;
    bottom: calc((0 / 556) * 100%);
    left: calc((150 / 712) * 100%);
    width: calc((350 / 712) * 100%);
    height: calc((145 / 556) * 100%);
    background-image: url(../images/top/visual/dog/box_front.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateZ(20px);
    z-index: 10;
}

@keyframes top-visual-dog-boxLight {
    0% {
        top: 60%;
        transform: scale(0.3);
    }

    100% {
        top: calc((144 / 556) * 100%);
        transform: scale(1);
    }
}

.top-visual-dog__boxLight {
    animation: top-visual-dog-boxLight 0.3s ease-in-out forwards;
    position: absolute;
    top: calc((144 / 556) * 100%);
    left: calc((130 / 712) * 100%);
    width: calc((396 / 712) * 100%);
    height: calc((267 / 556) * 100%);
    background-image: url(../images/top/visual/dog/box_light.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
}

.top-visual-dog__boxBack {
    position: absolute;
    top: calc((184 / 556) * 100%);
    left: calc((145 / 712) * 100%);
    width: calc((360 / 712) * 100%);
    height: calc((241 / 556) * 100%);
    background-image: url(../images/top/visual/dog/box_back.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

@keyframes top-visual-dog-camera {
    0% {
        top: 70%;
        left: 40%;
        transform: scale(0.3);
    }

    100% {
        top: calc((167 / 556) * 100%);
        left: calc((0 / 712) * 100%);
        transform: scale(1);
    }
}

.top-visual-dog__camera {
    /*animation: top-visual-dog-camera 1s ease-in-out forwards;*/
    position: absolute;
    top: calc((167 / 556) * 100%);
    left: calc((0 / 712) * 100%);
    width: calc((225 / 712) * 100%);
    height: calc((132 / 556) * 100%);
    background-image: url(../images/top/visual/dog/camera.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform:
        /* GSAP */
        scale(0);
    z-index: 5;
}

@keyframes top-visual-dog-lock-001 {
    0% {
        top: 70%;
        left: 40%;
        transform: scale(0.3);
    }

    100% {
        top: calc((307 / 556) * 100%);
        left: calc((78 / 712) * 100%);
        transform: scale(1);
    }
}

.top-visual-dog__lock-001 {
    /*animation: top-visual-dog-lock-001 1s ease-in-out forwards;*/
    position: absolute;
    top: calc((307 / 556) * 100%);
    left: calc((78 / 712) * 100%);
    width: calc((101 / 712) * 100%);
    height: calc((98 / 556) * 100%);
    background-image: url(../images/top/visual/dog/lock_001.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform:
        /* GSAP */
        scale(0);
    z-index: 6;
}

@keyframes top-visual-dog-lock-002 {
    0% {
        top: 70%;
        left: 40%;
        transform: scale(0.1);
    }

    100% {
        top: calc((176 / 556) * 100%);
        left: calc((142 / 712) * 100%);
        transform: scale(1);
    }
}

.top-visual-dog__lock-002 {
    /*animation: top-visual-dog-lock-002 1s ease-in-out forwards;*/
    position: absolute;
    top: calc((176 / 556) * 100%);
    left: calc((142 / 712) * 100%);
    width: calc((260 / 712) * 100%);
    height: calc((260 / 556) * 100%);
    background-image: url(../images/top/visual/dog/lock_002.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform:
        /* GSAP */
        scale(0);
    z-index: 7;
}

@keyframes top-visual-dog-lock-003 {
    0% {
        top: 70%;
        left: 40%;
        transform: scale(0.3);
    }

    100% {
        top: calc((336 / 556) * 100%);
        left: calc((300 / 712) * 100%);
        transform: scale(1);
    }
}

.top-visual-dog__lock-003 {
    /*animation: top-visual-dog-lock-003 1s ease-in-out forwards;*/
    position: absolute;
    top: calc((336 / 556) * 100%);
    left: calc((300 / 712) * 100%);
    width: calc((105 / 712) * 100%);
    height: calc((97 / 556) * 100%);
    background-image: url(../images/top/visual/dog/lock_003.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform:
        /* GSAP */
        scale(0);
    z-index: 9;
}

@keyframes top-visual-dog-lock-004 {
    0% {
        top: 70%;
        left: 40%;
        transform: scale(0.3);
    }

    100% {
        top: calc((228 / 556) * 100%);
        left: calc((341 / 712) * 100%);
        transform: scale(1);
    }
}

.top-visual-dog__lock-004 {
    /*animation: top-visual-dog-lock-004 1s ease-in-out forwards;*/
    position: absolute;
    top: calc((228 / 556) * 100%);
    left: calc((341 / 712) * 100%);
    width: calc((228 / 712) * 100%);
    height: calc((193 / 556) * 100%);
    background-image: url(../images/top/visual/dog/lock_004.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform:
        /* GSAP */
        scale(0);
    z-index: 8;
}

@keyframes top-visual-dog-effects {
    0% {
        filter: brightness(1);
        opacity: 1;
        transform: scale(1.0) translateZ(50px);
    }

    100% {
        filter: brightness(3);
        opacity: 1;
        transform: scale(1.05) translateZ(100px);
    }
}

.top-visual-dog__effects {
    animation: top-visual-dog-effects 1.5s ease-in-out infinite alternate;
    position: absolute;
    top: calc((138 / 556) * 100%);
    left: calc((137 / 712) * 100%);
    width: calc((386 / 712) * 100%);
    height: calc((348 / 556) * 100%);
    background-image: url(../images/top/visual/dog/effects.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateZ(60px);
    z-index: 11;
}

/*
bg
*/

.bg-top-noise {
    background-color: white;
    background-image: url(../images/top/bg_noise.webp);
}

/*
intro
*/

.top-intro {
    background-image: url(../images/top/intro/bg_left.svg), url(../images/top/intro/bg_right.svg);
    background-size: auto 80%, auto 80%;
    background-position: calc((100% - var(--content-width)) / 2) 40%, calc(100% - (100% - var(--content-width)) / 2) 40%;
    background-repeat: no-repeat, no-repeat;
    width: 100%;
}

@media (max-width: 1300px) {
    .top-intro {
        background-size: auto 0%, auto 0%;
    }
}

.top-intro-message {
    width: 100%;
    max-width: 875px;
}

.top-intro-text {
    font-size: clamp(0.875rem, 0.821rem + 0.27vw, 1.125rem);
}

/*
top-service
*/

.top-service-decorations {
    --height: clamp(102px, 79.952px + 6.89vw, 204px);
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(39.008px, 30.56px + 2.64vw, 78px);
    margin-bottom: calc(-0.5 * var(--height));
    height: var(--height);
    transform: translateZ(1px);
}

.top-service-decorations__circle {
    grid-column: 2;
    aspect-ratio: 1 / 1;
    background-image: url(../images/top/service/bg_key.svg);
    background-size: cover;
    height: var(--height);
}

.top-service-decorations__bird {
    --bird-001: clamp(82px, 64.48px + 5.47vw, 163.008px);
    grid-column: 3;
    transform: scale(-1, 1);
    width: fit-content;
}

.top-service__heading {
    transform: translateZ(2px);
}

.top-service {
    --decoration-height: 80%;
    --decoration-offset: 5%;
    background-color: #FDF7E3;
    background-image: url(../images/top/service/bg_left.svg), url(../images/top/service/bg_right.svg);
    background-size: auto var(--decoration-height), auto var(--decoration-height);
    background-position: calc((100% - var(--content-width)) / 2 - var(--decoration-offset)) 40%, calc(100% - (100% - var(--content-width)) / 2 + var(--decoration-offset)) 40%;
    background-repeat: no-repeat, no-repeat;
}

@media (max-width: 1500px) {
    .top-service {
        --decoration-height: 80%;
        --decoration-offset: -5%;
    }
}

@media (max-width: 1200px) {
    .top-service {
        --decoration-height: 0%;
    }
}

.top-service-button {
    display: block;
    color: #fff;
    background-color: #30B633;
    padding: 0 clamp(20px, 16.976px + 0.95vw, 34px);
    font-size: clamp(1.125rem, 0.99rem + 0.68vw, 1.75rem);
    font-weight: bold;
    line-height: 2;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    width: fit-content;
}

.top-service-button:hover {
    transform: scale(1.1);
}

.top-service-label {
    font-size: clamp(1.25rem, 1.142rem + 0.54vw, 1.75rem);
    line-height: 1;
}

.top-service-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    row-gap: clamp(25.008px, 19.6px + 1.69vw, 50px);
    column-gap: clamp(20px, 4.864px + 4.73vw, 90px);
    width: fit-content;
}

@media (max-width: 520px) {
    .top-service-list {
        grid-template-columns: 1fr;
    }
}

.top-service-list__item--center {
    align-self: center;
}

.top-service-001,
.top-service-002,
.top-service-003,
.top-service-004 {
    aspect-ratio: 424 / 465;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: visible;
    width: min(100%, clamp(160px, 102.912px + 17.84vw, 424px));
}

@keyframes top-service-msg {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.04);
    }
}

.top-service-001 {
    background-image: url(../images/top/service/service_001.webp);
}

.top-service-001::before {
    animation: top-service-msg 0.5s ease-in-out infinite alternate;
    aspect-ratio: 191 / 147;
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 46%;
    background-image: url(../images/top/service/service_001_left.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.top-service-001::after {
    animation: top-service-msg 0.5s ease-in-out infinite alternate;
    aspect-ratio: 213 / 142;
    content: '';
    position: absolute;
    top: -7%;
    right: -15%;
    width: 50%;
    background-image: url(../images/top/service/service_001_right.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.top-service-002 {
    background-image: url(../images/top/service/service_002.webp);
}

.top-service-002::before {
    animation: top-service-msg 0.5s ease-in-out infinite alternate;
    aspect-ratio: 245 / 140;
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    width: 58%;
    background-image: url(../images/top/service/service_002_left.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.top-service-002::after {
    animation: top-service-msg 0.5s ease-in-out infinite alternate;
    aspect-ratio: 207 / 142;
    content: '';
    position: absolute;
    bottom: -7%;
    right: 5%;
    width: 49%;
    background-image: url(../images/top/service/service_002_right.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.top-service-003 {
    background-image: url(../images/top/service/service_003.webp);
}

.top-service-003::before {
    animation: top-service-msg 0.5s ease-in-out infinite alternate;
    aspect-ratio: 228 / 143;
    content: '';
    position: absolute;
    top: -2%;
    left: -5%;
    width: 54%;
    background-image: url(../images/top/service/service_003_left.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.top-service-003::after {
    animation: top-service-msg 0.5s ease-in-out infinite alternate;
    aspect-ratio: 296 / 163;
    content: '';
    position: absolute;
    top: 8%;
    right: -15%;
    width: 70%;
    background-image: url(../images/top/service/service_003_right.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.top-service-004 {
    background-image: url(../images/top/service/service_004.webp);
}

.top-service-detail-list {
    list-style: none;
    padding-left: 2em;
    text-indent: -2em;
}

.top-service-detail-list>li {
    font-size: clamp(1rem, 0.838rem + 0.81vw, 1.75rem);
    font-weight: bold;
}

.top-service-detail-list>li::before {
    content: '● ';
    color: #30B633;
    display: inline;
}

/*
news
*/

.top-news {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    column-gap: clamp(55px, 43.104px + 3.72vw, 110px);
    row-gap: 32px;
    padding-right: clamp(62px, 48.592px + 4.19vw, 124px);
    width: 100%;
}

.top-news__heading {
    grid-column: 1;
    grid-row: 1;
    background-image: url(../images/top/news/bg.svg);
    background-position: right 20% bottom;
    background-size: auto clamp(0px, -45.84px + 14.32vw, 212px);
    background-repeat: no-repeat;
    text-align: center;
}

.top-news__list {
    grid-column: 2;
    grid-row: span 2;
}

.top-news__button {
    grid-column: 1;
    grid-row: 2;
}

@media (max-width: 1500px) {
    .top-news__heading {
        background-image: none;
    }
}

@media (max-width: 980px) {
    .top-news {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        padding-left: 32px;
        padding-right: 32px;
    }

    .top-news__heading {
        grid-column: 1;
        grid-row: 1;
    }

    .top-news__list {
        grid-column: 1;
        grid-row: 2;
    }

    .top-news__button {
        grid-column: 1;
        grid-row: 3;
    }
}

.top-news-heading {
    display: inline-block;
    font-size: clamp(2rem, 1.824rem + 0.88vw, 2.813rem);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: fit-content;
}

@media (max-width: 980px) {
    .top-news-heading {
        writing-mode: initial;
        text-orientation: initial;
    }
}

.top-news-button {
    display: block;
    border-radius: 0 9999px 9999px 0;
    background-color: black;
    color: #fff;
    font-size: var(--text-lg);
    font-weight: bold;
    text-decoration: none;
    position: relative;
    padding: clamp(10px, 1.568px + 2.64vw, 49.008px) clamp(68px, 53.52px + 4.53vw, 135.008px);
    margin-left: calc(-1 * clamp(42px, 32.704px + 2.91vw, 85.008px));
    white-space: nowrap;
    transition: transform 0.3s ease-in-out;
}

.top-news-button::after {
    content: '▶';
    line-height: 1;
    position: absolute;
    top: calc(50% - 0.5em);
    right: clamp(22px, 17.024px + 1.55vw, 45.008px);
    height: 1em;
}

.top-news-button:hover {
    transform: translateX(10%);
}

@media (max-width: 980px) {
    .top-news-button {
        border-radius: 9999px;
        margin-left: auto;
        margin-right: auto;
    }

    .top-news-button:hover {
        transform: scale(1.1);
    }
}

/*
instagram
*/

/*
.top-instagram {}
*/

/*
partnership
*/

.top-partnership-decoration {
    --height: clamp(102px, 79.952px + 6.89vw, 204px);
    aspect-ratio: 1 / 1;
    background-image: url(../images/top/partnership/bg_lock.svg);
    background-size: cover;
    height: var(--height);
    margin-top: calc(-0.5 * var(--height));
    margin-bottom: calc(-0.5 * var(--height));
    margin-left: auto;
    margin-right: auto;
    transform: translateZ(1px);
}

.top-partnership {
    background-image: url(../images/top/partnership/bg_tree.webp), url(../images/top/partnership/bg.svg);
    background-size: 50% auto, cover;
    background-position: right bottom, center top;
    background-repeat: no-repeat, no-repeat;
}

.top-partnership-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, clamp(170px, 133.248px + 11.49vw, 340px));
    justify-content: center;
    column-gap: clamp(30px, 17.024px + 4.05vw, 90px);
    row-gap: clamp(1.25rem, 0.709rem + 2.7vw, 3.75rem);
}

@media (max-width: 620px) {
    .top-partnership-list {
        grid-template-columns: 1fr 1fr;
    }
}

.top-partnership-list__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-partnership-list__item__icon {
    display: block;
    aspect-ratio: 1 / 1;
    width: 100%;
}

.top-partnership-list__item__label {
    display: block;
    color: #fff;
    background-color: #30B633;
    padding: 9px 16px;
    font-size: clamp(0.625rem, 0.544rem + 0.41vw, 1rem);
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    border-radius: 9999px;
    margin: 0 auto;
    width: fit-content;
    min-width: 250px;
}

@media (max-width: 980px) {
    .top-partnership-list__item__label {
        min-width: 0px;
    }
}

.top-partnership-list__item--bird {
    background-image: url(../images/top/partnership/bird.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
}