/* adapted responsive */
.jumbotron-section .inner-jumbotron-section .jumbotron-title {
    font-family: "adobe-garamond-pro", serif;
    font-size: 4.17vw;
    line-height: 0.95em;
    color: white;
    display: inline-block;
    position: relative;
    padding-top: 0.8em;
}

.jumbotron-section .jumbotron-img {
    background: url("../../common/images/jumbotron.jpg") no-repeat center;
    background-size: cover;
    width: 70%;
    height: auto;
    margin-right: 0;
    margin-left: auto;
    z-index: -1;
    aspect-ratio: 1344/1120;
}

.jumbotron-section .jumbotron-bg {
    position: absolute;
    width: 50%;
    z-index: -5;
    top: 21%;
    background: url("../../common/images/jumbotronbg.jpg") no-repeat center;
    background-size: cover;
    aspect-ratio: 960/1624;
}

/* container */
.jumbotron-section .inner-jumbotron-section {
    position: absolute;
    min-height: 0px;
    padding-bottom: 5.21vw;
    bottom: 0px;
    left: 0;
    right: 0;
    width: clamp(1440px, 75%, 75%);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1.25em;
    margin: 0 auto;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-subtitle {
    font-family: "Helvetica";
    font-size: 1.05vw;
    line-height: 1.45em;
    color: white;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-title::before {
    position: absolute;
    content: "";
    width: 6.25vw;
    height: 4px;
    background-color: #7D8595;
    left: 0;
    top: 0;
    aspect-ratio: 120/4;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper,
.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper>ul {
    display: flex;
    gap: 0.521vw;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    width: 100%;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper li {
    width: 8.34vw;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button {
    height: auto;
    box-sizing: border-box;
    background-color: white;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 160/116;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button h3,
.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .h3 {
    font-family: "jost", sans-serif;
    font-size: 1.05vw;
    justify-content: center;
    font-weight: 500;
    margin-top: 0.6vw;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .icon {
    font-size: 0.834vw;
}



.jumbotron-section {
    position: relative;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-br::after {
    content: "\A";
    white-space: pre;
}

.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button:hover {
    color: rgb(0, 187, 255);
}

.jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .button-border {
    border: 2px solid rgba(216, 216, 216, 1);
    width: 95%;
    height: 92%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



/* responsive content */
@media (max-width: 1920px) {

    .jumbotron-section .inner-jumbotron-section {
        max-width: 1568px;
        margin: 0px auto;
        padding-left: 64px !important;
        padding-right: 64px !important;
        width: 100%;
        top: 19.5vw;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title {
        padding-top: 73px;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper {
        margin-top: 1.6em;
    }
}

@media screen and (max-width: 1440px) {
    .jumbotron-section .inner-jumbotron-section {
        top: 21.5vw;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title {
        padding-top: 58px;
        line-height: 0.92em;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper {
        margin-top: 0.8em;
    }

    .about-section .about-section-wrapper .about-section-wrapper-right .about-card {
        padding-bottom: 4vw;
        padding-top: 4.25vw;
    }
}

@media screen and (max-width: 1201px) {
    .jumbotron-section .jumbotron-img {
        width: 68.23%;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title {
        padding-top: 4.1vw;
        line-height: 0.9em;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper {
        margin-top: 0.4em;
    }
}

@media (max-width: 1200px) {
    .jumbotron-section .inner-jumbotron-section .jumbotron-title {
        font-size: clamp(49.75px, 4.17vw, 4.17vw);
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-subtitle {
        font-size: clamp(12.44px, 1.05vw, 1.05vw);

    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper li {
        width: clamp(99.5px, 8.34vw, 8.34vw);
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .icon {
        font-size: clamp(12.75px, 0.834vw, 0.834vw);
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button h3,
    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .h3 {
        font-size: clamp(11.9px, 1.05vw, 1.05vw);
    }


}

@media (max-width: 981px) {
    .jumbotron-section .jumbotron-img {
        width: 68.161%;
    }

    .jumbotron-section .inner-jumbotron-section {
        top: 23.3vw;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title {
        padding-top: 5vw;
        line-height: 0.9em;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button h3,
    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .h3 {
        margin-top: 10px;
    }
}


/* SP Layout landscape */
@media screen and (max-width: 980px) {
    .jumbotron-section {
        position: relative;
        padding: 0px;
        background-size: cover;
        height: auto;
        aspect-ratio: 390/460;
    }

    .jumbotron-section .inner-jumbotron-section {
        width: 100% !important;
        padding: 0px 20px !important;
        margin: 0 auto;
    }

    .jumbotron-section .jumbotron-bg {
        width: 55%;
        z-index: -5;
        height: auto;
        top: 10.8vw;
        aspect-ratio: 281/547;
    }

    .jumbotron-section .jumbotron-img {
        height: auto;
        background: url("../../common/images/sp/jumbotronsp.jpg") no-repeat center;
        background-size: cover;
        aspect-ratio: 281/385;
        width: 55%;
    }

    .jumbotron-section .inner-jumbotron-section {
        box-sizing: border-box;
        top: 34%;
        padding: 0px 20px !important;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title {
        font-size: 5vw;
        display: flex;
        flex-direction: column;
        line-height: 1;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title::before {
        width: 53px;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-subtitle {
        line-height: 1.2;
        padding-bottom: 11.81vw;
        max-width: 23em;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-subtitle .jumbotron-br::after {
        content: none;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper,
    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper>ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 2.06vw;
        margin: 0 auto;
        position: absolute;
        bottom: 4vw;
        max-width: 750px;
        left: 0px;
        right: 0px;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper li {
        width: 20%;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button {
        box-sizing: border-box;
        aspect-ratio: 114/85;
        width: 100%;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button h3,
    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .h3 {
        font-size: clamp(15px, 1.8vw, 16px);
        margin-top: 0.5em;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .icon {
        font-size: clamp(12.75px, 0.834vw, 0.834vw);
        line-height: 1em;
    }
}

/* SP LAYOUT potrait */
@media screen and (max-width: 600px) {
    .jumbotron-section {
        position: relative;
        padding: 0px;
        background-size: cover;
        height: auto;
        aspect-ratio: 390/784;
    }

    .jumbotron-section .inner-jumbotron-section {
        width: 100% !important;
        padding: 0px 20px !important;
        margin: 0 auto;
    }

    .jumbotron-section .jumbotron-bg {
        width: 59.5%;
        z-index: -5;
        height: auto;
        top: 32.8vw;
        aspect-ratio: 232/656;
    }

    .jumbotron-section .jumbotron-img {
        height: auto;
        background: url("../../common/images/sp/jumbotronsp.jpg") no-repeat center;
        background-size: cover;
        aspect-ratio: 281/521;
        width: 71%;
    }

    .jumbotron-section .inner-jumbotron-section {
        box-sizing: border-box;
        top: 32.28%;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title {
        font-size: 9.25vw;
        display: flex;
        flex-direction: column;
        line-height: 0.9;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-title::before {
        width: 53px;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-subtitle {
        font-size: 4.11vw;
        line-height: 1.2;
        padding-bottom: 22.81vw;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-subtitle .jumbotron-br::after {
        content: none;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper,
    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper>ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 2.06vw;
        position: absolute;
        left: 0px;
        bottom: 6vw;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper li {
        width: 28vw;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button {
        box-sizing: border-box;
        font-size: 10px;
        aspect-ratio: 114/88;
        width: 100%;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button h3,
    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .h3 {
        font-size: 3.1vw;
    }

    .jumbotron-section .inner-jumbotron-section .jumbotron-button-wrapper .jumbotron-button .icon {
        font-size: 4.5vw;
    }
}