@charset "utf-8";
/* animation */
.animation_ready .fade_up {
    opacity: 0;
    translate: 0 30em;
    transition: translate 0.5s, opacity 0.5s;
}
.animation_ready.is_animation_loaded .fade_up.is_animated {
    translate: 0;
    opacity: 1;
}

/* history */
.history {
    position: relative;
    padding-bottom: 120em;
}
.history_bg_clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0);
    z-index: -1;
}
.history_bg_fixed {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
.history_catchcopy {
    text-align: center;
    font-weight: 900;
    color: var(--color-white);
    line-height: calc(44 / 28);
    padding-block: 13em;
}
.history_catchcopy_inner {
    font-size: max(24em, 12px);
}
.history_catchcopy_sub {
    display: block;
    font-weight: 500;
}
.history_catchcopy_1 {
    background-color: var(--color-history-red);
}
.history_catchcopy_2 {
    background-color: #e26814;
}
.history_catchcopy_3 {
    background-color: #3181ca;
}
.history_catchcopy_4 {
    background-color: #5d503f;
}
.history_catchcopy_5 {
    background-color: #464e55;
}
.history_inner {
    position: relative;
    margin-top: 64em;
}
.history_txt {
    color: var(--color-white);
    font-weight: 500;
    line-height: 1.75;
}
.history_txt_inner {
    font-size: max(16em, 12px);
}
.history_car_figure {
    width: fit-content;
}
.history_car_figure_3 {
    margin-left: auto;
}
.history_car_img {
    height: 100%;
}
.history_car_caption {
    color: var(--color-white);
    font-weight: 700;
    text-align: center;
}
@media (min-width: 521px) {
    .history_1 .history_bg_fixed {
        background-image: url(../images/history/history_bg_1.jpg);
    }
    .history_2 .history_bg_fixed {
        background-image: url(../images/history/history_bg_2.jpg);
    }
    .history_3 .history_bg_fixed {
        background-image: url(../images/history/history_bg_3.jpg);
    }
    .history_4 .history_bg_fixed {
        background-image: url(../images/history/history_bg_4.jpg);
    }
    .history_5 .history_bg_fixed {
        background-image: url(../images/history/history_bg_5.jpg);
    }
    .history_catchcopy {
        padding-inline: 80px;
    }
    .history_catchcopy_sub {
        font-size: max(16em, 12px);
    }
    .history_ttl {
        margin-bottom: 50em;
    }
    .history_ttl_img {
        width: 462em;
        height: auto;
    }
    .history_txt_wrap {
        width: 460em;
    }
    .history_txt + .history_txt {
        margin-top: 35em;
    }
    .history_car_img_area {
        position: absolute;
        right: 0;
    }
    .history_1 .history_car_img_area {
        top: 78em;
    }
    .history_2 .history_car_img_area {
        top: 78em;
    }
    .history_3 .history_car_img_area {
        top: 95em;
    }
    .history_4 .history_car_img_area {
        top: 54em;
    }
    .history_5 .history_car_img_area {
        top: 100em;
    }
    .history_car_caption_model {
        font-size: max(20em, 12px);
    }
    .history_car_caption_model_sm {
        font-size: max(18em, 12px);
    }
    .history_1 .history_car_figure_1 .history_car_caption {
        margin-left: 310em;
        margin-top: -20em;
    }
    .history_1 .history_car_figure_2 {
        margin-top: 55em;
    }
    .history_1 .history_car_figure_3 {
        margin-top: -80em;
    }
    .history_2 .history_car_figure_1 .history_car_caption {
        margin-left: 360em;
        margin-top: -55em;
    }
    .history_2 .history_car_figure_2 {
        margin-top: 80em;
    }
    .history_2 .history_car_figure_3 {
        margin-top: -12em;
    }
    .history_3 .history_car_figure_1 .history_car_caption {
        margin-left: 315em;
        margin-top: -10em;
    }
    .history_3 .history_car_figure_2 {
        margin-top: 60em;
    }
    .history_3 .history_car_figure_3 {
        margin-top: -75em;
    }
    .history_4 .history_car_figure_1 .history_car_caption {
        margin-left: 320em;
        margin-top: -20em;
    }
    .history_4 .history_car_figure_2 {
        margin-top: 55em;
        margin-left: -15em;
    }
    .history_4 .history_car_figure_3 {
        margin-top: -70em;
    }
    .history_5 .history_car_figure_1 .history_car_caption {
        margin-left: 330em;
        margin-top: -25em;
    }
    .history_5 .history_car_figure_2 .history_car_caption {
        margin-left: -65em;
    }
    .history_5 .history_car_figure_2 {
        margin-top: 78em;
    }
    .history_5 .history_car_figure_3 {
        margin-top: -35em;
    }
    .history_car_main_img_1,
    .history_car_main_img_2 {
        width: 698em;
    }
    .history_car_main_img_3 {
        width: 700em;
    }
    .history_car_main_img_4 {
        width: 660em;
    }
    .history_car_main_img_5 {
        width: 695em;
    }
    .history_car_img_1_1 {
        width: 387em;
    }
    .history_car_img_1_2 {
        width: 317em;
    }
    .history_car_img_2_1 {
        width: 422em;
    }
    .history_car_img_2_2 {
        width: 378em;
    }
    .history_car_img_3_1 {
        width: 417em;
    }
    .history_car_img_3_2 {
        width: 379em;
    }
    .history_car_img_4_1 {
        width: 374em;
    }
    .history_car_img_4_2 {
        width: 359em;
    }
    .history_car_img_5_1 {
        width: 440em;
    }
    .history_car_img_5_2 {
        width: 430em;
    }
}
@media (max-width: 520px) {
    .history {
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    }
    .history_1 .history_bg_fixed {
        background-image: url(../images/history/history_bg_1_sp.jpg);
    }
    .history_2 .history_bg_fixed {
        background-image: url(../images/history/history_bg_2_sp.jpg);
    }
    .history_3 .history_bg_fixed {
        background-image: url(../images/history/history_bg_3_sp.jpg);
    }
    .history_4 .history_bg_fixed {
        background-image: url(../images/history/history_bg_4_sp.jpg);
    }
    .history_5 .history_bg_fixed {
        background-image: url(../images/history/history_bg_5_sp.jpg);
    }
    .history_catchcopy_sub {
        font-size: max(12em, 12px);
    }
    .history_ttl_img {
        width: 100%;
        height: 100%;
    }
    .history_car_img_area {
        margin-block: 56em 50em;
    }
    .history_car_caption_model {
        font-size: max(16em, 12px);
    }
    .history_car_caption_model_sm {
        font-size: max(12em, 12px);
    }
    .history_1 .history_car_figure_1 .history_car_caption {
        margin-left: 180em;
        margin-top: -5em;
    }
    .history_1 .history_car_figure_2 {
        margin-top: 8em;
    }
    .history_1 .history_car_figure_3 {
        margin-top: -70em;
    }
    .history_2 .history_car_figure_1 .history_car_caption {
        margin-left: 150em;
        margin-top: -15em;
    }
    .history_2 .history_car_figure_2 .history_car_caption {
        margin-left: -45em;
    }
    .history_2 .history_car_figure_2 {
        margin-top: 10em;
    }
    .history_2 .history_car_figure_3 {
        margin-top: -40em;
    }
    .history_3 .history_car_figure_1 .history_car_caption {
        margin-left: 80em;
        margin-top: -5em;
    }
    .history_3 .history_car_figure_2 .history_car_caption {
        margin-left: -20em;
    }
    .history_3 .history_car_figure_2 {
        margin-top: 20em;
    }
    .history_3 .history_car_figure_3 {
        margin-top: -60em;
    }
    .history_4 .history_car_figure_1 .history_car_caption {
        margin-left: 110em;
        margin-top: -5em;
    }
    .history_4 .history_car_figure_2 .history_car_caption {
        margin-left: -5em;
        margin-top: 5em;
    }
    .history_4 .history_car_figure_2 {
        margin-top: 7em;
    }
    .history_4 .history_car_figure_3 {
        margin-top: -40em;
    }
    .history_5 .history_car_figure_2 {
        margin-top: 23em;
    }
    .history_5 .history_car_figure_3 {
        margin-top: -15em;
    }
    .history_txt + .history_txt {
        margin-top: 30em;
    }
    .history_car_img {
        width: 100%;
    }
    .history_car_img_1_1 {
        width: 193em;
    }
    .history_car_img_1_2 {
        width: 158em;
    }
    .history_car_img_2_1 {
        width: 211em;
    }
    .history_car_img_2_2 {
        width: 189em;
    }
    .history_car_img_3_1 {
        width: 189em;
    }
    .history_car_img_3_2 {
        width: 188em;
    }
    .history_car_img_4_1 {
        width: 187em;
    }
    .history_car_img_4_2 {
        width: 180em;
    }
    .history_car_img_5_1 {
        width: 219em;
    }
    .history_car_img_5_2 {
        width: 215em;
    }
}

/* youtube */
.youtube {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    border-radius: 8em;
}
.youtube.is_youtube_ready {
    pointer-events: auto;
    cursor: pointer;
}
.poster {
    position: relative;
    padding-top: 56.25%;
    transition: opacity 0.4s;
}
.youtube:hover .poster {
    opacity: 0.8;
}
.poster_1 {
    background: url(../images/history/poster_1.jpg) no-repeat center/ cover;
}
.poster_2 {
    background: url(../images/history/poster_2.jpg) no-repeat center/ cover;
}
.poster_3 {
    background: url(../images/history/poster_3.jpg) no-repeat center/ cover;
}
.poster_4 {
    background: url(../images/history/poster_4.jpg) no-repeat center/ cover;
}
.poster_5 {
    background: url(../images/history/poster_5.jpg) no-repeat center/ cover;
}
.play_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.poster_txt {
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center;
    font-weight: 700;
    letter-spacing: 0;
    padding-block: 15em 17em;
}
.poster_txt_inner {
    font-size: max(16em, 12px);
}
.youtube_player {
    border-radius: 10em;
}
@media (min-width: 521px) {
    .youtube_wrap {
        margin-top: 55em;
    }
    .youtube {
        width: 462em;
    }
    .youtube_player {
        width: 1040em;
        height: 584em;
    }
}
@media (max-width: 520px) {
    .youtube_wrap {
        margin-top: 50em;
    }
    .youtube_player {
        width: 340em;
        height: 191em;
    }
}


/* modal */
body.is_modal_show {
    overflow: hidden;
}
.modal_content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    opacity: 0;
    transform: translateY(100%);
    background: rgba(51, 51, 51, 0.9);
    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;
    padding-block: 60em;
}
.modal_inner {
    position: relative;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.is_modal_show .modal_inner {
    opacity: 1;
}
@media (min-width: 521px) {
    .modal_scroll_inner {
        max-width: 1040em;
    }
}
@media (max-width: 520px) {
    .modal_scroll_inner {
        max-width: 340em;
    }
}

/* centering */
.modal_scroll_inner,
.modal_scroll:after {
    display: inline-block;
    vertical-align: middle;
}
.modal_scroll:after {
    content: '';
    height: 100%;
}
/* close */
.modal_close {
    cursor: pointer;
    position: absolute;
    border: none;
}
.modal_close::before, 
.modal_close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    background-color: var(--color-white);
}
.modal_close::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
.modal_close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
@media (min-width: 521px) {
    .modal_close {
        top: -4em;
        right: -3em;
        width: 2.8em;
        height: 2.8em;
    }
    .modal_close::before, 
    .modal_close::after {
        height: 2.8em;
    }
}
@media (max-width: 520px) {
    .modal_close {
        top: -3em;
        right: 0;
        width: 1.8em;
        height: 1.8em;
    }
    .modal_close::before, 
    .modal_close::after {
        height: 1.8em;
    }
}