/* ---------- All ---------- */
.page-banner{
    padding-top: var(--nav-height);
}

.page-banner-bothSide,
.page-banner-rightSide{
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
}

.banner-deco-polygon-left,
.banner-deco-polygon-right{
    position: absolute;
    z-index: -1;
    top: 40px;
    width: 35%;
    max-width: 500px;
    aspect-ratio: 5 / 6;
    >*{
        position: absolute;
        aspect-ratio: 1 / 3;
    }
    >.polygon-pale-yellow{
        top: calc(50 / 600 * 100%);
        height: 30%;
        background-color: var(--color-primary-1);
        opacity: 0.3;
    }
    >.polygon-yellow{
        bottom: 10%;
        height: 40%;
        background-color: var(--color-primary-1);
    }
    >.polygon-gray{
        top: 0;
        height: 90%;
        background-color: var(--color-gray-6);
    }
    >.polygon-img{
        height: 100%;
        >img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
.banner-deco-polygon-left{
    left: 0;
    >*{
        clip-path: polygon(
            0 0,
            0 calc(100% * 2 / 3),
            100% 100%,
            100% calc(100% * 1 / 3)
        );
    }
    >.polygon-pale-yellow{
        left: 0;
    }
    >.polygon-yellow{
        left: 20.4%;
    }
    >.polygon-gray{
        right: 0;
    }
    >.polygon-img{
        left: 30%;
    }
}
.banner-deco-polygon-right{
    right: 0;
    >*{
        clip-path: polygon(
            0 calc(100% * 1 / 3),
            0 100%,
            100% calc(100% * 2 / 3),
            100% 0
        );
    }
    >.polygon-pale-yellow{
        right: 0;
    }
    >.polygon-yellow{
        right: 20.4%;
    }
    >.polygon-gray{
        left: 0;
    }
    >.polygon-img{
        right: 30%;
    }
}

@media screen and (width < 768px) {
    .banner-deco-polygon-left,
    .banner-deco-polygon-right{
        aspect-ratio: 1 / 2;
        >.polygon-pale-yellow{
            height: 20%;
        }
        >.polygon-yellow{
            height: 20%;
            bottom: 20%;
        }
        >.polygon-gray{
            height: 60%;
        }
        >.polygon-img{
            height: 60%;
            top: 10%;
        }
    }
}
@media screen and (width < 576px) {
    .banner-deco-polygon-left,
    .banner-deco-polygon-right{
        aspect-ratio: 1 / 3;
        >.polygon-pale-yellow{
            top: 0;
        }
        >.polygon-yellow{
            bottom: 30%;
        }
        >.polygon-gray{
            height: 60%;
        }
        >.polygon-img{
            height: 40%;
            top: 20%;
        }
    }
    .banner-deco-polygon-left{
        >.polygon-img{
            left: 5%;
        }
        >.polygon-gray{
            right: 15%;
        }
    }
    .banner-deco-polygon-right{
        >.polygon-img{
            right: 5%;
        }
        >.polygon-gray{
            left: 15%;
        }
    }
}

/* ---------- bothSide ---------- */
.page-banner-bothSide-content{
    max-width: 1044px;
    min-height: 640px;
    padding: 100px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    >.en-h2{
        color: var(--color-primary-1);
        margin-bottom: 16px;
    }
    >h1{
        margin-bottom: 40px;
    }
    >.content-title{
        margin-top: 100px;
        text-align: center;
        white-space: pre-line;
    }

    >.content-line{
        margin: 40px 0;
        width: 1px;
        height: 100px;
        background-color: var(--color-primary-1);
    }
    >.content{
        white-space: pre-line;
    }
    &:not(:has(.content-title)) > .content{
        max-width: 570px;
        margin: 40px auto 0;
    }

    /* For thanks page */
    &.thanks-page{
        min-height: calc(min(35vw, 500px) * 6 / 5 + 80px);
        justify-content: center;
        padding: 40px 24px;
        >*{
            width: 50%;
            text-align: center;
        }
        >h1{
            margin-bottom: 0;
        }
        >.content{
            text-align: center;
        }
    }
}

@media screen and (width < 1280px) {
    .page-banner-bothSide-content{
        &:not(:has(.content-title)) > .content{
            width: 50%;
        }
    }
}

@media screen and (width < 1024px) {
    .page-banner-bothSide-content{
        >.content-line{
            margin: 24px 0;
            height: 60px;
        }
    }
}
@media screen and (width < 768px) {
    .page-banner-bothSide-content{
        &:not(.thanks-page):not(:has(.content-title)) > .content{
            width: 75%;
            margin: 28% auto 0;
        }

        &.thanks-page{
            min-height: calc(35vw * 2 + 80px);;
        }
    }
}
@media screen and (width < 576px) {
    .page-banner-bothSide-content{
        padding: 100px 24px 60px;
        >.content-title{
            margin-top: 60px;
        }
        &:not(:has(.content-title)) > .content{
            width: 75%;
        }
        &.thanks-page{
            min-height: calc(35vw * 3 + 80px);
            >*{
                width: 75%;
            }
        }
    }
}

/* ---------- rightSide ---------- */
.page-banner-rightSide{
    .banner-deco-polygon-right{
        top: 50%;
        transform: translateY(-50%);
        >.polygon-img{
            top: 5%;
            right: auto;
            left: 30%;
            height: 90%;
        }
        >.polygon-gray{
            top: 10%;
            height: 80%;
        }
    }
}
@media screen and (width < 768px) {
    .page-banner-rightSide{
        .banner-deco-polygon-right{
            >.polygon-img{
                height: 60%;
                top: 10%;
                left: auto;
                right: 30%;
            }
            >.polygon-gray{
                top: 0;
                height: 60%;
            }
        }
    }
}
@media screen and (width < 576px) {
    .page-banner-rightSide{
        .banner-deco-polygon-right{
            top: 40px;
            transform: none;
            >.polygon-img{
                height: 40%;
                top: 20%;
                right: 5%;
            }
            >.polygon-gray{
                top: 0;
                height: 60%;
            }
        }
    }
}

.page-banner-rightSide-content{
    width: 63.6%;
    position: relative;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    >.en-h2{
        color: var(--color-primary-1);
        margin-bottom: 16px;
    }
    >h1{
        margin-bottom: 40px;
    }
    >.content-title{
        margin-bottom: 24px;
        white-space: pre-line;
    }
    >.content{
        white-space: pre-line;
        margin-bottom: 40px;
    }
}

@media screen and (width < 1440px) {
    .page-banner-rightSide-content{
        padding: 100px max(calc((100% - 1200px) / 2), 24px);
    }
}
@media screen and (width < 1024px) {
    .page-banner-rightSide-content{
        width: 75%;
    }
}
@media screen and (width < 576px) {
    .page-banner-rightSide-content{
        width: 88%;
        padding: 60px 24px;
    }
}

.page-banner-rightSide-deco{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    border-bottom: 1px solid var(--color-primary-1);
    >div{
        width: 50%;
        height: 100%;
        max-width: 400px;
        background-color: var(--color-primary-1);
        clip-path: polygon(
            0 0,
            calc(100% - 19px) 0,
            100% 100%,
            0 100%
        );
    }
}

/* For contact page */
.page-banner-rightSide-contact{
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    >a{
        display: flex;
        gap: 16px;
        align-items: center;
        color: var(--color-gray-1);
        transition: color .3s;
        >svg{
            flex-shrink: 0;
            color: inherit;
        }
        >p{
            color: inherit;
        }
        &:hover{
            color: var(--color-primary-1);
        }
    }
}


/* ---------- noImg ---------- */
.page-banner-noImg{
    max-width: 1044px;
    margin: 0 auto;
    padding: 100px 24px;
    >.en-h2{
        text-align: center;
        color: var(--color-primary-1);
        margin-bottom: 16px;
    }
    >h1{
        text-align: center;
        margin-bottom: 40px;
    }
    >#breadcrumbs{
        margin-bottom: 40px;
        >span{
            justify-content: center;
        }
    }
    >.content{
        white-space: pre-line;
        text-align: center;
    }
}

@media screen and (width < 576px) {
    .page-banner-noImg{
        padding: 60px 24px;
    }
}