@charset "utf-8";

#contents {
    width: 100%;
}
#contents-body {
    padding: 0;
}
.global-footer {
    margin-top: 0;
}
#contents-body .section {
    margin: 0;
}
#cboxLoadedContent p,
#contents-body .section p {
    margin-bottom: 0;
}
#contents-body .section.hilux a {
    text-decoration: none;
}
.hilux {
    --color-black: #000;
    --color-black-bg: #0d0702;
    --color-black-btn: #110b06;
    --color-white: #fff;
    --color-gray: #807474;
    --color-red: #e60000;
    --color-orange: #edae33;

    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    color: var(--color-white);
    background-color: var(--color-black-bg);
    overflow: clip;
    position: relative;
}
.font_cal_sans {
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.color_orange {
    color: var(--color-orange);
}
.contents_inner {
    margin-inline: auto;
}
@media (min-width: 521px) {
    .contents_inner {
        width: 1200em;
    }
    [data-disp="sp"] {
        display: none;
    }
}
@media (max-width: 520px) {
    #contents-body .section {
        margin: 0;
    }
    .contents_inner {
        width: 350em;
    }
    [data-disp="pc"] {
        display: none;
    }
}
.fade_up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s, transform 0.5s;
}
.is_animated.fade_up {
    opacity: 1;
    transform: translateY(0);
}

/* em */
@media (min-width: 1280px) {
    .hilux {
        font-size: 1px;
    }
}
@media (min-width: 521px) and (max-width: 1279px) {
    .hilux {
        font-size: calc(100 / 1280 * 1vw);
    }
}
@media (max-width: 520px) {
    .hilux {
        font-size: calc(100 / 390 * 1vw);
    }
}

/* modal */
body.is_modal_show {
    overflow: clip;
}
.modal_content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    opacity: 0;
    transform: translateY(100%);
    background: rgba(13, 7, 2, 0.9);
    backdrop-filter: blur(5px);
    transition: opacity 0.3s 0s, transform 0s 0.3s;
}
.modal_content.is_modal_show {
    opacity: 1;
    transform: translateY(0%);
    transition: opacity 0.3s 0s, transform 0s 0s;
}
.modal_scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    letter-spacing: -0.5em;
}
.modal_scroll_inner {
    text-align: center;
    margin: auto;
    width: 100%;
    letter-spacing: normal;
    line-height: 1.5;
}
.modal_inner {
    position: relative;
    opacity: 0;
    scale: 0.9;
    transition: opacity 0.3s, transform 0.3s, scale 0.3s;
}
.is_modal_show .modal_inner {
    opacity: 1;
    scale: 1;
}

/* centering */
.modal_scroll_inner,
.modal_scroll:after {
    display: inline-block;
    vertical-align: middle;
}
.modal_scroll:after {
    content: '';
    height: 100%;
}
/* close */
.modal_close {
    position: absolute;
    top: 0;
    right: 0;
}

/* cta */
.cta {
    background: no-repeat 0 / cover;
}
.cta_content {
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}
.cta_btn {
    background-color: var(--color-white);
    display: flex;
}
.cta_btn_lp {
    margin-top: 96em;
}
.cta_btn_img {
    height: auto;
}
.cta_btn_txt {
    display: flex;
    align-items: center;
    position: relative;
}
.cta_btn_txt_inner {
    font-weight: 700;
    letter-spacing: 0.05em;
}
.cta_btn_arrow {
    width: 14em;
    height: 14em;
    margin-block: auto;
    background: url(../images/common/cta_btn_arrow.svg) no-repeat 50% / contain;
    position: absolute;
    top: 0;
    bottom: 0;
}
.cta_content_inner {
    display: flex;
}
.cta_btn_sub {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.cta_btn_sub::before {
    content: '';
    width: 33em;
    height: 33em;
    margin-block: auto;
    background: no-repeat 50% / contain;
    display: block;
    position: absolute;
    top: 0;
    left: 24em;
    bottom: 0;
}
.cta_btn_sub_store::before {
    background-image: url(../images/common/cta_btn_sub_store.svg);
}
.cta_btn_sub_test::before {
    background-image: url(../images/common/cta_btn_sub_test.svg);
}
.cta_btn_sub_simulation::before {
    background-image: url(../images/common/cta_btn_sub_simulation.svg);
}
.cta_btn_sub_inner {
    font-weight: 700;
    font-size: max(18em, 12px);
    letter-spacing: 0.05em;
}
.cta_note {
    text-align: center;
    color: var(--color-white);
}
.cta_note_inner {
    font-size: max(10em, 10px);
    line-height: 1;
    letter-spacing: 0.05em;
}
@media (min-width: 521px) {
    .cta {
        padding-block: 160em 130em;
        background-image: url(../images/common/cta_bg_pc.jpg);
        background-position: 50% 50%;
    }
    .cta_content {
        width: 1200em;
    }
    .cta_btn {
        width: 643em;
        margin-inline: auto;
    }
    .cta_btn_img {
        width: 40%;
    }
    .cta_btn_txt {
        width: 60%;
        padding-inline: 32em 55em;
    }
    .cta_btn_txt_inner {
        font-size: max(28em, 12px);
        line-height: calc(40/28);
    }
    .cta_btn_arrow {
        right: 40em;
    }
    .cta_content_inner {
        margin-top: 24em;
        justify-content: space-between;
    }
    .cta_btn_sub {
        width: 384em;
        height: 80em;
    }
    .cta_note {
        margin-top: 20em;
    }
    .cta_note_inner {
        line-height: 1;
    }
}
@media (max-width: 520px) {
    .cta {
        padding-block: 160em 240em;
        background-image: url(../images/common/cta_bg_sp.jpg);
        background-position: 50% 100%;
        background-size: 100% auto;
    }
    .cta_content {
        padding-inline: 20em;
    }
    .cta_btn {
        flex-direction: column;
    }
    .cta_btn_img {
        width: 100%;
    }
    .cta_btn_txt {
        padding: 16em 30em 16em 16em;
    }
    .cta_btn_txt_inner {
        font-size: max(20em, 12px);
        line-height: 1.5;
    }
    .cta_btn_arrow {
        right: 16em;
    }
    .cta_content_inner {
        margin-top: 24em;
        flex-direction: column;
        gap: 24em;
    }
    .cta_btn_sub {
        width: 100%;
        height: 80em;
    }
    .cta_note {
        margin-top: 16em;
    }
    .cta_note_inner {
        line-height: 1.3;
    }
}
@media (min-width: 521px) {
    @media (hover:hover) {
        .cta_btn,
        .cta_btn_sub {
            transition: background-color 0.5s;
            position: relative;
        }
        .cta_btn:hover,
        .cta_btn_sub:hover {
            background-color: var(--color-black);
        }
        .cta_btn::after,
        .cta_btn_sub::after {
            content: '';
            width: 100%;
            height: 100%;
            border: max(2em, 2px) solid var(--color-gray);
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .cta_btn:hover::after,
        .cta_btn_sub:hover::after {
            opacity: 1;
        }
        .cta_btn_txt_inner,
        .cta_btn_sub_inner {
            transition: color 0.5s;
        }
        .cta_btn:hover .cta_btn_txt_inner,
        .cta_btn_sub:hover .cta_btn_sub_inner {
            color: var(--color-white);
        }
    }
}