@charset "utf-8";
/* CSS Document */


@media only screen and (min-width: 751px) {

    #history_top {
        text-align: left;
    }

    #history_top #top_kv {
        position: relative;
        padding: 88px 0 160px;
        margin: 0 auto;
        text-align: left;
        background-color: #22446e;
    }

    #history_top #top_kv .top_kv_inner {
        position: relative;
        max-width: 1600px;
        margin: 0 auto;
        box-sizing: border-box;
        z-index: 2;
    }

    #history_top #top_kv .kv_swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #history_top #top_kv .kv_swiper .kv_swiper_item {
        width: 100%;
        height: 100%;
    }

    #history_top #top_kv .kv_swiper .kv_swiper_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #history_top #top_kv .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #22446e;
        mix-blend-mode: multiply;
        z-index: 1;
    }

    #history_top #top_kv .overlay2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../img_v2/common/bg_kv_stripe.png') left top;
        background-size: auto;
        z-index: 2;
    }

    #history_top #top_kv .large_copy {
        margin-top: 70px;
        margin-left: 3%;
        margin-right: 3%;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-size: clamp( 54px, calc( ( 100vw - 750px ) * ( ( 80 - 54 )  / ( 1100 - 750 ) ) + 54px ), 80px ); /* 幅750pxのとき54px ～ 幅1100pxのとき80px */
        font-weight: 800;
        line-height: 1.2;
        color: #fff;
        letter-spacing: -0.03em;
        text-align: center;
    }

    #history_top #top_kv .large_copy .line:nth-child(2) {
        margin-top: 15px;
    }

    #history_top #top_kv .large_copy .slide_obj {
        transition-delay: 0.4s;
    }

    #history_top #top_kv .large_copy .line:nth-child(2) .slide_obj {
        transition-delay: 0.48s;
    }

    #history_top #top_kv .body_h {
        position: relative;
        width: fit-content;
        margin: 78px auto 0;
        padding: 0 48px;
        text-align: center;
        color: #fff;
        font-size: 24px;
        transition-delay: 0.8s;
    }

    #history_top #top_kv .body_h::before,
    #history_top #top_kv .body_h::after {
        content: "";
        position: absolute;
        top: 50%;
        display: block;
        width: 32px;
        height: 1px;
        background-color: #fff;
        opacity: 0.7;
    }

    #history_top #top_kv .body_h::before {
        left: 0;
    }

    #history_top #top_kv .body_h::after {
        right: 0;
    }

    #history_top #top_kv .body_txt {
        margin-top: 40px;
        margin-left: 8%;
        margin-right: 8%;
        font-size: 16px;
        color: #fff;
        line-height: 2.12;
        text-align: center;
        transition-delay: 0.8s;
    }

    #history_top .history_list_area {
        padding: 88px 0;
        background: url('../img_v2/common/bg_stripe.png') left top;
        background-size: auto;
    }

    #history_top .history_list {
        width: fit-content;
        margin: 0 auto;
        color: #fff;
    }

    #history_top .history_list .item {
        position: relative;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: center;
        gap: 0 50px;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-weight: 800;
        color: #fff;
        padding: 60px 30px;
        transition: transform 0.5s, opacity 0.5s;
        transform: translateX(-6%);
        opacity: 0;
    }

    #history_top .history_list .item.visible {
        transform: translateX(0);
        opacity: 1;
    }

    #history_top .history_list .item::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc((100% - 100vw) / 2);
        width: 100vw;
        height: 100%;
        transition: background-color 0.3s;
    }

    #history_top .history_list .item:hover::before {
        background-color: #fff;
    }

    #history_top .history_list .item dt {
        position: relative;
        font-size: clamp(
            calc(70px * 0.75), /* 最小0.75倍 */
            calc(100vw / (1400 / 70)), /* 画面幅1400pxのときに70px */
            calc(70px * 1) /* 最大1倍 */
        );
        letter-spacing: -0.04em;
        line-height: 1;
    }

    #history_top .history_list .item dd {
        position: relative;
        padding-right: 100px;
        font-size: clamp(
            calc(30px * 0.75), /* 最小0.75倍 */
            calc(100vw / (1400 / 30)), /* 画面幅1400pxのときに30px */
            calc(30px * 1) /* 最大1倍 */
        );
        line-height: 1.53;
    }

    #history_top .history_list .item dd::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 48px;
        height: 7px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: skew(40deg);
        transform-origin: right;
        transition: transform 0.4s;
    }

    #history_top .history_list a.item:hover {
        color: #163b67;
        opacity: 1;
    }

    #history_top .history_list a.item:hover dd::after {
        border-color: #163b67;
        transform: skew(40deg) translateX(20px);
    }

}



@media only screen and (max-width: 750px) {

    #history_top {
        text-align: left;
    }
    
    #history_top #top_kv {
        position: relative;
        padding: 50px 0 55px;
        margin: 0 auto;
        overflow: hidden;
    }

    #history_top #top_kv .top_kv_inner {
        position: relative;
        box-sizing: border-box;
        z-index: 2;
    }

    #history_top #top_kv .kv_swiper {
        position: absolute;
        top: 0;
        left: 0;
        margin-top: -17.3%;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.53;
    }

    #history_top #top_kv .kv_swiper .kv_swiper_item {
        width: 100%;
        height: 100%;
    }

    #history_top #top_kv .kv_swiper .kv_swiper_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #history_top #top_kv .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #22446e;
        mix-blend-mode: multiply;
        z-index: 1;
    }

    #history_top #top_kv .overlay_sp {
        position: absolute;
        top: 0;
        left: 0;
        margin-top: calc(125% - 100px);
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(7,53,107,0) 0, #14233c 100px);
        z-index: 2;
    }

    #history_top #top_kv .overlay2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../img_v2/common/bg_kv_stripe_sp.png') left top;
        background-size: 15px;
        z-index: 3;
    }

    #history_top #top_kv .large_copy {
        margin-top: 38px;
        margin-bottom: 4.8%;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-size: clamp(
            calc(30px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 30)), /* 画面幅375pxのときに30px */
            calc(30px * 1.5) /* 最大1.5倍 */
        );
        font-weight: 800;
        line-height: 1.27;
        color: #fff;
        letter-spacing: -0.03em;
        text-align: center;
    }

    #history_top #top_kv .large_copy .line:nth-child(2) {
        margin-top: 8px;
    }

    #history_top #top_kv .large_copy .slide_obj {
        transition-delay: 0.4s;
    }

    #history_top #top_kv .large_copy .line:nth-child(2) .slide_obj {
        transition-delay: 0.48s;
    }

    #history_top #top_kv .body_h {
        position: relative;
        width: fit-content;
        margin: 36px auto 0;
        padding: 0 24px;
        text-align: center;
        color: #fff;
        font-size: 19px;
        transition-delay: 0.8s;
    }

    #history_top #top_kv .body_h::before,
    #history_top #top_kv .body_h::after {
        content: "";
        position: absolute;
        top: 52%;
        display: block;
        width: 16px;
        height: 1px;
        background-color: #fff;
        opacity: 0.7;
    }

    #history_top #top_kv .body_h::before {
        left: 0;
    }

    #history_top #top_kv .body_h::after {
        right: 0;
    }

    #history_top #top_kv .body_txt {
        margin-top: 22px;
        margin-left: 9.3%;
        margin-right: 9.3%;
        color: #fff;
        font-size: 13px;
        line-height: 2.07;
        transition-delay: 0.8s;
    }

    #history_top .history_list_area {
        background: url('../img_v2/common/bg_stripe_sp.png') left top;
        background-size: 15px;
    }

    #history_top .history_list {
        padding-top: 58px;
        padding-bottom: 10px;
        color: #fff;
    }

    #history_top .history_list .item {
        position: relative;
        display: block;
        color: #fff;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-weight: 800;
        padding: 0px 20px;
        margin-left: 9.8%;
        margin-bottom: 52px;
        transition: transform 0.5s, opacity 0.5s;
        transform: translateX(-6%);
        opacity: 0;
    }

    #history_top .history_list .item.visible {
        transform: translateX(0);
        opacity: 1;
    }

    #history_top .history_list .item::after {
        content: "";
        position: absolute;
        top: 5px;
        left: 0;
        width: 4px;
        height: calc(100% - 7px);
        background-color: rgba(0, 0, 0, 0.3);
    }

    #history_top .history_list .item dt {
        position: relative;
        width: fit-content;
        padding-right: 37px;
        margin-bottom: 12px;
        font-size: clamp(
            calc(35px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 35)), /* 画面幅375pxのときに35px */
            calc(35px * 1.5) /* 最大1.5倍 */
        );
        line-height: 1;
    }

    #history_top .history_list .item dd {
        font-size: clamp(
            calc(13px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 13)), /* 画面幅375pxのときに13px */
            calc(13px * 1.5) /* 最大1.5倍 */
        );
        line-height: 1.6;
    }

    #history_top .history_list .item dt::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 22px;
        height: 3px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: skew(40deg);
        opacity: 0.9;
    }

}