@charset "utf-8";

@media (min-width: 1281px) {
    .index {
        font-size: 1px;
    }
}
@media (max-width: 1280px) and (min-width: 769px) {
    .index {
        font-size: calc(1vw / 1440 * 100);
    }
}

.wrap {
    overflow: hidden;
}


/* index */
.index {
    position: relative;
}
.index_inner {
    margin-inline: auto;
}
.index_ttl {
    margin-inline: auto;
    font-size: 1em;
}
.index_txt {
    font-weight: 600;
    text-align: center;
}
.index_anchor {
    display: flex;
}
.index_anchor a {
    display: block;
    position: relative;
}
.index_anchor_arrow {
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.index_anchor_arrow::before {
    content: '';
    background-color: var(--color-triangle);
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}
.index_anchor_arrow_line {
    margin: auto;
    display: block;
    border-radius: 100em;
    background-color: var(--color-black);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.index_anchor_arrow_line::after {
    content: '';
    border-radius: 50%;
    background-color: var(--color-black);
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
}
@media (min-width: 769px) {
    .index {
        padding-top: 103em;
    }
    .index_dot1 {
        top: -60rem;
        right: 169rem;
    }
    .index_dot2 {
        top: 242rem;
        left: -30rem;
    }
    .index_dot3 {
        top: 700rem;
        right: -70rem;
    }
    .index_triangle1 {
        width: 225rem;
        height: 451rem;
        top: 80rem;
        right: -90rem;
    }
    .index_triangle2 {
        width: 225rem;
        height: 451rem;
        top: 675rem;
        left: -110rem;
    }
    .index_inner {
        width: 1120em;
    }
    .index_ttl {
        width: 685em;
    }
    .index_txt {
        margin-top: 30em;
    }
    .index_txt_word {
        font-size: 20em;
        line-height: calc(36/20);
    }
}
@media (max-width: 768px) {
    .index {
        padding-top: 250rem;
    }
    .index_dot1 {
        top: -5rem;
        right: 180rem;
    }
    .index_dot2 {
        top: 273rem;
        left: -156rem;
    }
    .index_dot3 {
        top: 590rem;
        right: -128rem;
    }
    .index_triangle1 {
        width: 225rem;
        height: 451rem;
        top: 5rem;
        right: -158rem;
    }
    .index_triangle2 {
        width: 225rem;
        height: 451rem;
        top: 495rem;
        left: -117rem;
    }
    .index_inner {
        width: 670rem;
    }
    .index_ttl {
        width: 576rem;
    }
    .index_txt {
        margin-top: 30rem;
    }
    .index_txt_word {
        font-size: 32rem;
        line-height: calc(64/32);
    }
    .index_anchor {
        width: 610rem;
        margin: 80rem auto 0;
        flex-wrap: wrap;
        gap: 20rem 30rem;
    }
    .index_anchor > li {
        width: 290rem;
    }
    .index_anchor a {
        height: 100rem;
        border-bottom: 4rem solid var(--color-black);
        display: flex;
        align-items: center;
    }
    .index_anchor_txt {
        font-size: 28rem;
        line-height: calc(36/28);
    }
    .index_anchor_arrow {
        width: 31rem;
        height: 51rem;
        right: 8rem;
    }
    .index_anchor_arrow::before {
        width: 31rem;
        height: 31rem;
    }
    .index_anchor_arrow_line {
        width: 4rem;
        height: 42rem;
    }
    .index_anchor_arrow_line::after {
        width: 12rem;
        height: 12rem;
    }
}

/* index_list */
.index_list {
    display: flex;
}
.index_list > li {
    pointer-events: none;
}
.index_list_item {
    display: block;
    position: relative;
}
.index_list a {
    background-color: var(--color-triangle);
    display: block;
    position: relative;
    overflow: hidden;
    pointer-events: all;
}
.index_list_txt {
    font-size: 1em;
}
.index_list_txt,
.index_list_fukidashi,
.index_list_img,
.index_list_bg_4,
.index_list_btn {
    position: absolute;
}
.index_list_txt {
    z-index: 2;
}
.index_list_fukidashi,
.index_list_img {
    z-index: 1;
}
.index_list_fukidashi {
    pointer-events: none;
}
.index_list_bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.index_list_btn {
    margin-inline: auto;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 100px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
}
.index_list_btn::before {
    content: '';
    margin: auto;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    rotate: 45deg;

}
@media (min-width: 769px) {
    .index_list {
        margin-top: 60em;
        flex-wrap: wrap;
        gap: 35em 64em;
    }
    .index_list_item {
        padding-top: 40em;
    }
    .index_list a {
        width: 528em;
        height: 583em;
        border: 2em solid var(--color-black);
        border-radius: 56em;
    }
    .index_list_txt {
        top: 46em;
        left: 44em;
    }
    .index_list_img {
        width: 528em;
    }
    .index_list_fukidashi {
        top: 0;
    }
    .index_list_btn {
        width: 416em;
        height: 72em;
        padding-bottom: 5em;
        bottom: 43em;
    }
    .index_list_btn_word {
        font-size: 18em;
        line-height: calc(24/18);
    }
    .index_list_btn::before {
        width: 10em;
        height: 10em;
        right: 21em;
    }

    .index_list_txt_1 {
        width: 302em;
    }
    .index_list_fukidashi_1 {
        width: 342em;
        right: 32em;
    }
    .index_list_img_1 {
        right: 0;
        bottom: 150em;
    }

    .index_list_txt_2 {
        width: 423em;
    }
    .index_list_fukidashi_2 {
        width: 350em;
        right: 16em;
    }
    .index_list_img_2 {
        right: 0;
        bottom: 150em;
    }

    .index_list_txt_3 {
        width: 302em;
    }
    .index_list_fukidashi_3 {
        width: 342em;
        right: 32em;
    }
    .index_list_img_3 {
        right: 0;
        bottom: 150em;
    }

    .index_list_txt_4 {
        width: 303em;
    }
    .index_list_fukidashi_4 {
        width: 322em;
        right: 32em;
    }
    .index_list_img_4 {
        right: 0;
        bottom: 150em;
    }
    .index_list_bg_4 {
        width: 389em;
        left: 108em;
        bottom: 150em;
    }
}
@media (max-width: 768px) {
    .index_list {
        margin-top: 160rem;
        flex-direction: column;
        gap: 120rem;
    }
    .index_list_item {
        padding-top: 64rem;
    }
    .index_list a {
        height: 1060rem;
        border: 2rem solid var(--color-black);
        border-radius: 56rem;
    }
    .index_list_txt {
        top: 120rem;
        left: 53rem;
    }
    .index_list_img {
        width: 100%;
        right: 0;
        bottom: 220rem;
    }
    .index_list_fukidashi {
        top: 0;
        right: 55rem;
    }
    .index_list_btn {
        width: 606rem;
        height: 140rem;
        padding-bottom: 5rem;
        bottom: 40rem;
    }
    .index_list_btn_word {
        font-size: 30rem;
        line-height: calc(48/30);
    }
    .index_list_btn::before {
        width: 14rem;
        height: 14rem;
        right: 33rem;
    }

    .index_list_txt_1 {
        width: 552rem;
    }
    .index_list_fukidashi_1 {
        width: 546rem;
    }

    .index_list_txt_2 {
        width: 560rem;
    }
    .index_list_fukidashi_2 {
        width: 576rem;
    }

    .index_list_txt_3 {
        width: 555rem;
    }
    .index_list_fukidashi_3 {
        width: 546rem;
    }

    .index_list_txt_4 {
        width: 553rem;
    }
    .index_list_fukidashi_4 {
        width: 556rem;
    }
    .index_list_bg_4 {
        width: 662rem;
        left: 0;
        bottom: 207rem;
    }
}
@media (min-width: 769px) {
    @media (hover:hover) {
        .index_list > li:nth-child(1), 
        .index_list > li:nth-child(2) {
            transition-delay: 0.3s;
        }
        .index_list > li:nth-child(3), 
        .index_list > li:nth-child(4) {
            transition-delay: 0.5s;
        }
        .index_list_btn {
            transition: color 0.4s, background-color 0.4s;
        }
        .index_list a:hover .index_list_btn {
            color: var(--color-black);
            background-color: var(--color-white);
        }
        .index_list_btn::before {
            transition: border-color 0.4s;
        }
        .index_list a:hover .index_list_btn::before {
            border-color: var(--color-black);
        }
    }
}

/* top_btn */
.top_btn {
    margin-inline: auto;
    border: 1px solid var(--color-black);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    position: relative;
}
.top_btn_arrow {
    border: 1px solid var(--color-black);
    border-radius: 100px;
    display: block;
    position: absolute;
}
@media (min-width: 769px) {
    .top_btn {
        width: 320px;
        height: 94px;
        margin-block: 105px 140px;
        padding-left: 24px;
        border-radius: 24px;
        box-shadow: 7px 7px 0px 0px rgba(34, 34, 34, 0.2);
    }
    .top_btn_txt {
        font-size: 18px;
    }
    .top_btn_arrow {
        width: 39px;
        height: 24px;
        background: url(../images/common/future_more_list_arrow.svg) no-repeat center / 13px 8px;
        right: 12px;
        bottom: 14px;
    }
}
@media (max-width: 768px) {
    .top_btn {
        width: 638rem;
        height: 180rem;
        margin-block: 240rem 140rem;
        padding-left: 40rem;
        border-radius: 40rem;
        box-shadow: 16rem 16rem 0px 0px rgba(34, 34, 34, 0.2);
    }
    .top_btn_txt {
        font-size: 36rem;
    }
    .top_btn_arrow {
        width: 80rem;
        height: 48rem;
        background: url(../images/common/future_more_list_arrow.svg) no-repeat center / 24rem 16rem;
        right: 24rem;
        bottom: 24rem;
    }
}
@media (min-width: 769px) {
    @media (hover:hover) {
        .top_btn_arrow {
            transition: background 0.4s;
        }
        .top_btn:hover .top_btn_arrow {
            background: var(--color-black) url(../images/common/future_more_list_arrow_on.svg) no-repeat center / 13px 8px;
        }
    }
}

.pc_bottom {
    margin-top: 0;
}