.home-main {
    position: relative;
    overflow-x: hidden;
}

.cloud-up {
    bottom: -1px;
    left: 0;
    width: 100%;
}

.cloud-down {
    top: -1px;
    left: 0;
    width: 100%;
}

.p0-animation-vertical {
    max-width: calc(1512px / 4);
    animation: float-vertical 6s ease-in-out infinite;
    z-index: 2;
}

.p0-animation-round {
    z-index: 0;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 45%;
}

.d-p0-left {
    max-width: calc(1780px / 4);
    left: 0;
    z-index: 1;
}

.d-p0-right {
    max-width: calc(1728px / 4);
    right: 0;
    z-index: 1;
}

.d-p0-title {
    max-width: calc(1884px / 4);
    top: 18%;
    z-index: 2;
}

#article-01 {
    background-image: url('../image/d-p1-bg.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}

.p1-title {
    max-width: 297px;
}

.p1-subtitle {
    max-width: 560px;
}

.d-p1-animation {
    max-width: 680px;
}

.p1-memo {
    max-width: 373px;
}

.d-p1-area-01 {
    left: 0;
    top: 0;
    transform: translate(52%, 58%);
}

.d-p1-area-02 {
    right: 0;
    top: 0;
    transform: translate(-53%, 58%);
}

.d-p1-area-03 {
    left: 0;
    bottom: 0;
    transform: translate(52%, 0%);
}

.d-p1-area-04 {
    right: 0;
    bottom: 0;
    transform: translate(-53%, 0%);
}

.d-p1-text-01 {
    max-width: calc(380px / 4);
}

.d-p1-text-02 {
    max-width: calc(612px / 4);
}

.d-p1-text-03 {
    max-width: calc(224px / 4);
}

.d-p1-text-04 {
    max-width: calc(379px / 4);
}

.d-p1-item-01 {
    max-width: calc(660px / 4);
    animation: float-vertical 6s ease-in-out infinite;
    animation-delay: 0s;
}

.d-p1-item-02 {
    max-width: calc(660px / 4);
    animation: float-vertical 6s ease-in-out infinite;
    animation-delay: 1.5s;
}

.d-p1-item-03 {
    max-width: calc(660px / 4);
    animation: float-vertical 6s ease-in-out infinite;
    animation-delay: 3s;
}

.d-p1-item-04 {
    max-width: calc(660px / 4);
    animation: float-vertical 6s ease-in-out infinite;
    animation-delay: 4.5s;
}

#article-02 {
    background-image: url('../image/d-p2-bg.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #006FA1;
    padding-top: 15%;
    padding-bottom: 15%;
}

.p2-title {
    max-width: 427px;
}

.p3-title {
    max-width: 732px;
}

.p3-subtitle {
    max-width: 1204px;
}

.p3-items {
    top: 20%;
    right: 0;
    max-width: 840px;
}

.p3-background {
    width: calc((100vw - 1305px) / 2);
    right: calc((100vw - 1305px) / 2 * -1);
    top: 0;
    background: linear-gradient(180deg, #D1F2FB 0%, #B1E4F2 100%);
}

.d-p3-cloud {
    max-width: calc(5752px / 4);
    max-height: calc(636px / 4);
    bottom: 0;
    left: calc(5752px / 4 * -1);
}

#article-04 {
    background-image: url('../image/d-p4-bg.webp');
    background-repeat: no-repeat;
    background-size: 120% auto;
    background-position: center center;
    background-attachment: fixed;
    background-color: #006FA1;
    padding-top: 15%;
    padding-bottom: 15%;
    position: relative;
    overflow: hidden;
}

.p4-title {
    max-width: 528px;
}

.p4-content {
    max-width: 1066px;
}

.p5-title {
    max-width: 413px;
}

.p5-subtitle {
    max-width: 784px;
}

.p5-cloud-middle {
    width: 100vw;
    height: calc(636px / 4);
    bottom: calc(0px);
    left: calc((100vw - 1350px) / 2 * -1);
}

.d-p5-content-01-image {
    max-width: calc(1915px / 4);
    max-height: calc(1688px / 4);
    top: 36px;
    right: 0;
    z-index: 1;
    animation: float 8s ease-in-out infinite;
}

#article-06 {
    background-color: #006FA1;
    background-image: url('../image/d-p6-bg.webp');
    background-repeat: no-repeat;
    background-size: 120% auto;
    background-position: center center;
    background-attachment: fixed;
    padding-top: 15%;
    padding-bottom: 15%;
    position: relative;
    overflow: hidden;
}

.p6-title {
    max-width: 501px;
}

.p6-content {
    max-width: 967px;
}

.p6-memo {
    max-width: 1204px;
}

footer hr,
.p3-col hr {
    border: 1px solid #B1E4F2;
}

footer .group {
    max-width: 924px;
}

.footer-title {
    max-width: 75px;
}

.footer-item {
    max-width: 217px;
}

.main-footer {
    max-width: 245px;
}

/* P3 項目的透明度動畫 */
.p3-item-01,
.p3-item-02,
.p3-item-03,
.p3-item-04 {
    opacity: 0.1;
    transition: opacity ease-in-out;
}

.p3-item-01.fade-in,
.p3-item-02.fade-in,
.p3-item-03.fade-in,
.p3-item-04.fade-in {
    opacity: 1;
}

.p3-item-01 {
    transition-duration: 0.5s;
}

.p3-item-02 {
    transition-duration: 1s;
}

.p3-item-03 {
    transition-duration: 1.5s;
}

.p3-item-04 {
    transition-duration: 2s;
}

/* 漂浮動畫定義 */
@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    20% {
        transform: translateY(-10px) translateX(5px) rotate(1deg);
    }

    40% {
        transform: translateY(-5px) translateX(-5px) rotate(-1deg);
    }

    60% {
        transform: translateY(10px) translateX(10px) rotate(2deg);
    }

    80% {
        transform: translateY(5px) translateX(-10px) rotate(-0.5deg);
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
}

/* 垂直漂浮動畫定義 */
@keyframes float-vertical {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(-15px);
    }

    50% {
        transform: translateY(0px);
    }

    75% {
        transform: translateY(15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 1400px) {
    .d-p0-left {
        max-width: calc(1780px / 5);
    }

    .d-p0-right {
        max-width: calc(1728px / 5);
    }

    .d-p0-title {
        max-width: calc(1884px / 5);
    }

    .p0-animation-vertical {
        max-width: calc(1512px / 5);
    }

    .d-p1-text-01 {
        max-width: calc(380px / 5);
    }

    .d-p1-text-02 {
        max-width: calc(612px / 5);
    }

    .d-p1-text-03 {
        max-width: calc(224px / 5);
    }

    .d-p1-text-04 {
        max-width: calc(379px / 5);
    }

    .d-p1-item-01 {
        max-width: calc(660px / 5);
    }

    .d-p1-item-02 {
        max-width: calc(660px / 5);
    }

    .d-p1-item-03 {
        max-width: calc(660px / 5);
    }

    .d-p1-item-04 {
        max-width: calc(660px / 5);
    }

    .d-p3-cloud {
        max-height: calc(636px / 5);
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        max-width: none;
        margin-left: calc(-50vw + 50%);
    }

    .d-p5-content-01-image {
        max-width: calc(1915px / 5);
        max-height: calc(1688px / 5);
    }

    .p5-cloud-middle {
        height: calc(636px / 5);
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        max-width: none;
        margin-left: calc(-50vw + 50%);
    }

    .p3-background {
        width: 400px;
        right: -400px;
    }
}

@media (max-width: 992px) {

    #article-01 {
        background-image: url('../image/m-p1-bg.webp');
        background-position: bottom;
    }

    #article-02 {
        background-image: url('../image/m-p2-bg.webp');
        padding-top: 35%;
        padding-bottom: 35%;
    }

    .m-p3-content-item {
        max-width: 116px;
    }

    .p3-items {
        top: 30%;
        padding: 0 5%;
        z-index: 2;
    }

    .p3-cloud-middle-01 {
        width: 100vw;
        bottom: 61%;
        left: calc(2.5rem * -1);
        z-index: 0;
    }

    .p3-cloud-middle-02 {
        width: 100vw;
        bottom: 0;
        left: calc(2.5rem * -1);
        z-index: 2;
    }

    #article-04 {
        background-image: url('../image/m-p4-bg.webp');
        padding-top: 35%;
        padding-bottom: 35%;
        background-size: 150% auto;
        background-position: center center;
        background-attachment: fixed;
    }

    #article-06 {
        background-image: url('../image/m-p6-bg.webp');
        padding-top: 35%;
        padding-bottom: 35%;
        background-size: 150% auto;
        background-position: center center;
        background-attachment: fixed;
    }

    .p6-subtitle {
        max-width: 200px;
    }

    .m-p6-content {
        width: calc(2280px / 4);
    }

    #article-01,
    #article-02,
    #article-03,
    #article-04,
    #article-05,
    #article-06 {
        padding-left: 5%;
        padding-right: 5%;
    }

}

@media (max-width: 400px) {}