@charset "utf-8";

.main {
}

/* pankuzu */
.pankuzu_list {
    letter-spacing: -0.03em;
    font-size: 14rem;
}
.pankuzu_listitem  {
    display: inline;
    vertical-align: baseline;
}
.pankuzu_listitem + .pankuzu_listitem {
    position: relative;
    padding-left: 36rem;
}
.pankuzu_listitem + .pankuzu_listitem::before {
    content: '';
    display: inline-block;
    position: absolute;
    height: 1px;
    background-color: rgba(var(--border-color), 0.4);
    width: 20rem;
}
.pankuzu_listitem:last-child {
    color: var(--blue);
}
@media (min-width: 769px) {
    .pankuzu_wrap {
        padding: 37rem 40rem 106rem;
    }
    .pankuzu_link {
        transition: background-size .3s ease;
        background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
    }
    .pankuzu_link:hover {
        background-size: 100% 1px;
        background-position: 0 100%;
    }
    .pankuzu_listitem + .pankuzu_listitem::before {
        left: 5rem;
        top: 10rem;
    }
}
@media (max-width: 768px) {
    .pankuzu_wrap {
        padding: 33rem 30rem 74rem 24rem;
    }
    .pankuzu_listitem + .pankuzu_listitem::before {
        left: 4rem;
        top: 11rem;
    }
}

/* mv */
.mv {
    border-bottom: 1px solid rgba(var(--border-color),0.2);
}
.mv_ttl_wrap {
    display: flex;
    max-width: 1120rem;
    margin-inline: auto;
}
.mv_ttl_container {
    flex-shrink: 0;
}
.mv_ttl_en {
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.4;
    display: inline-block;
}
.mv_ttl_en_inner {
    color: var(--white);
    background-color: var(--blue);
    line-height: 1;
}
.mv_ttl_ja {
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.mv:has(+ .anchor) {
    border-bottom: none;
}
@media (min-width: 769px) {
    .mv {
        padding: 0 40rem 130rem;
    }
    .mv_ttl_wrap {
        align-items: flex-end;
        gap: 0 40rem;
    }
    .mv_ttl_en {
        font-size: 22rem;
        padding-inline: 2rem;
    }
    .mv_ttl_ja {
        font-size: 60rem;
        margin-top: 4rem;
    }
    .mv_txt {
        font-size: 18rem;
    }
}
@media (max-width: 768px) {
    .mv {
        padding: 0 24rem 76rem;
    }
    .mv:has(+ .index_list_wrap) {
        border-bottom: none;
    }
    .mv_ttl_wrap {
        flex-direction: column;
        gap: 24rem 0;
    }
    .mv_ttl_en {
        font-size: 18rem;
    }
    .mv_ttl_ja {
        font-size: 52rem;
        margin-top: 3rem;
    }
    .mv_txt {
        font-size: 16rem;
        line-height: 1.7;
    }
}
/* animation */
.animation_ready .anim_slideIn {
    transition: clip-path .3s var(--ease-in-out-custom);
    clip-path: inset(0% 100% 0% 0%);
}
.animation_loaded .mv_ttl_wrap.is_animated .anim_slideIn {
    clip-path: inset(0% 0% 0% 0%);
}


/* index_list */
.index_list_wrap {
}
.index_list {
}
.index_link {
    overflow: hidden;
    display: block;
    position: relative;
}
.index_listitem {
    position: relative;
}
.index_link[target="_blank"] .text_marker_in::after {
    content: '';
    background: url(../images/common/icon_newtab_w.svg);
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}
.index_link_txt {
    position: absolute;
    bottom: 0;
    left: 0;
    color: var(--white);
}


@media (min-width: 769px) {
    .index_list_wrap {
        padding: 0 40rem;
    }
    .index_list {
        display: grid;
        gap: min(54rem, calc(54 / 1120* 100vw)) min(48rem, calc(48 / 1120* 100vw));
        max-width: 1120rem;
        grid-template-columns: 1fr 1fr 1fr;
        margin-inline: auto;
    }
    .index_listitem {
        border-inline: 1px solid rgba(var(--border-color),0.2);
    }
    .index_listitem:nth-child(3n+1)::before,
    .index_listitem:nth-child(3n+1)::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        min-width: 1120px;
        width: calc(100vw + 17px); 
        transform: translateX(calc(-50% + (1120rem / 3)));
        z-index: 1;
        border-top: 1px solid rgba(var(--border-color),0.2);
    }
    .index_listitem:nth-child(3n+1)::before {
        top: 0;
    }
    .index_listitem:nth-child(3n+1)::after {
        bottom: 0;
    }
    .index_listitem:nth-child(1)::before {
        opacity: 0;
    }
    .index_link_txt {
        font-size: 22rem;
        line-height: 1.5;
        bottom: -4rem;
    }
    .index_link[target="_blank"] .text_marker_in::after {
        width: 10rem;
        height: 10rem;
        margin-left: 4rem;
        margin-top: -5rem;
        margin-right: 4rem;
    }
    @media (hover:hover) {
        .index_img {
            transition: scale .3s;
        }
        .index_link:hover .index_img {
            scale: 1.08;
        }
        .index_link_txt {
            transition: color .3s ease;
        }
        .index_link:hover .index_link_txt {
            color: var(--blue);
        }
        .index_link[target="_blank"] .text_marker_in::before {
            content: '';
            background: url(../images/common/icon_newtab.svg) no-repeat;
            background-size: contain;
            display: block;
            position: absolute;
            top: 13rem;
            right: 4rem;
            width: 10rem;
            height: 10rem;
            opacity: 0;
            transition: opacity .3s;
        }
        .index_link:hover .text_marker_in::before {
            opacity: 1;
        } 
    }
}
@media (max-width: 768px) {
    .index_list_wrap {
        padding: 0 24rem 60rem;
    }
    .index_list {
        display: flex;
        flex-direction: column;
        gap: 40rem 0;
        position: relative;
    }
    .index_list::before,
    .index_list::after {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        top: 0;
        height: calc(100% + 60rem);/*60rem = topへ戻る上のpadding*/
    }
    .index_list::before {
        left: -1px;
        border-left: 1px solid rgba(var(--border-color),0.2);
    }
    .index_list::after {
        right: -1px;
        border-right: 1px solid rgba(var(--border-color),0.2);
    }
    .index_listitem::before,
    .index_listitem::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        width: 100vw;
        translate: -50% 0;
        z-index: 1;
        border-top: 1px solid rgba(var(--border-color),0.2);
    }
    .index_link_txt {
        font-size: 24rem;
        line-height: 1.4;
        bottom: -3rem;
    }
    .index_link[target="_blank"] .text_marker_in::after {
        width: 14rem;
        height: 14rem;
        margin-left: 4rem;
        margin-top: -7rem;
        margin-right: 3rem;
    }
}


/* btn_group */
.btn_group_wrapper {
    
}
.btn_group {
    display: flex;
    justify-content: space-between;
    max-width: 1120rem;
    margin-inline: auto;
}
[class].btn_back_to_top,
[class].btn_back_to_index {
    display: flex;
    align-items: center;    
    color: var(--blue);
}
.btn_back_to_top .icon_link_arrow {
    transform: scaleX(-1);
}
@media (min-width: 769px) {
    .btn_group_wrapper {
        padding: 100rem 40rem;
        border-top: 1px solid rgba(var(--border-color),0.2);
    }
    .index_list_wrap + .btn_group_wrapper {
        border-top: none;
    }
    [class].btn_back_to_top,
    [class].btn_back_to_index {
        font-size: 22rem;
    }
    .btn_back_to_top,
    .btn_back_to_index {
        gap: 0 17rem;
    }
    .btn_back_to_top_arrow,
    .btn_back_to_index_arrow {
        width: 90rem;
        height: 68rem;
        position: relative;
    }
}
@media (max-width: 768px) {
    .btn_group {
        flex-direction: column;
    }
    .btn_group_left,
    .btn_group_right {
        border-top: 1px solid rgba(var(--border-color),0.2);
        padding: 32rem 24rem;
    }
    [class].btn_back_to_top,
    [class].btn_back_to_index { 
        position: relative;
        width: 100%;
        justify-content: center;
        height: 60rem;
        font-size: 18rem;
    }
    .btn_back_to_top_arrow,
    .btn_back_to_index_arrow {
        width: 80rem;
        height: 60rem;
    }
    .btn_back_to_top .icon_link_arrow {
        position: absolute;
        left: 0;
        top: 0;
    }
    .btn_back_to_index .icon_link_arrow {
        position: absolute;
        right: 0;
        top: 0;
    }
}

/* subpage_inner */
.subpage_inner {
    max-width: 1120px;
    margin-inline: auto;
}

/* subpage_bottom_space */
@media (min-width: 769px) {
    .subpage_bottom_space_pc {
        position: relative;
    }
    .subpage_bottom_space_pc::after {
        content: "";
        display: block;
        border-top: 1px solid rgba(var(--border-color),0.2);
        height: 1px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 60rem;
    }
    .subpage_bottom_space_pc .side_border {
        padding-bottom: 60rem;
    }
}
@media (max-width: 768px) {
    .subpage_bottom_space_sp {
        position: relative;
    }
    .subpage_bottom_space_sp::after {
        content: "";
        display: block;
        border-top: 1px solid rgba(var(--border-color),0.2);
        height: 1px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 60rem;
    }
    .subpage_bottom_space_sp .side_border {
        padding-bottom: 60rem;
    }
}

/* subpage_content */
.subpage_content > .main_border_box:first-child {
    border-top: none;
}
.subpage_content + .subpage_content > .main_border_box:first-child {
    border-top: 1px solid rgba(var(--border-color),0.2);
}

/* subpage_table_list */
.subpage_table_list {
    display: flex;
    flex-direction: column;
}
.subpage_table_list dl {
    display: flex;
    gap: 1rem;
}
.subpage_table_list dt {
    line-height: 1;
    color: var(--blue);
    border-right: 1px solid transparent;
    background-color: rgba(var(--border-color), 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}
.subpage_table_list dd {
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    line-height: 1.7;
}
.subpage_table_blue {
    color: var(--blue);
    font-weight: 700;
    font-size: 16rem;
}
@media (min-width: 769px) {
    .subpage_table_list {
        gap: 4rem;
    }
    .subpage_table_list dt,
    .subpage_table_list dd {
        padding: 26rem 24rem;
    }
    .subpage_table_list dt {
        width: 218rem;
        font-size: 18rem;
    }
    .subpage_table_list dd {
        width: calc(100% - 219rem);
        font-size: 14rem;
    }
}
@media (max-width: 768px) {
    .subpage_table_list {
        gap: 2rem;
    }
    .subpage_table_list dt {
        width: 56rem;
        font-size: 18rem;
        writing-mode: vertical-rl;
        padding: 16rem 19rem;
        letter-spacing: 0.12em;
    }
    .subpage_table_list dd {
        width: calc(100% - 56rem);
        font-size: 14rem;
        padding: 16rem 15rem;
        display: flex;
        align-items: center;
    }
}

/* anchor */
.anchor {
    border-bottom: 1px solid rgba(var(--border-color),0.2);
}
.anchor_list {
    display: flex;
}
.anchor_list a {
    border-bottom: 1px solid rgba(var(--border-color),0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.4;
    font-weight: 700;
    position: relative;
}
.anchor_list .icon_link_arrow_in,
.anchor_list .icon_link_arrow_out {
    left: 0;
    rotate: 90deg;
}
.anchor_list .icon_link_arrow_in::before,
.anchor_list .icon_link_arrow_out::before {
    width: 16.3%;
    height: 28.42%;
}
@media (min-width: 769px) {
    .anchor_list .icon_link_arrow {
        width: 45rem;
        height: 34rem;
    }
    .anchor {
        padding: 0 40rem 85rem;
    }
    .anchor_list {
        gap: 24rem 50rem;
        flex-wrap: wrap;
    }
    .anchor_list li {
        width: calc(calc(100% - 100rem) / 3);
    }
    .anchor_list a {
        padding-bottom: 19rem;
        font-size: 24rem;
        background: linear-gradient(var(--blue), var(--blue)) 0% calc(100% + 1px) / 88rem 1px no-repeat;
    }    
    @media (hover: hover) {
        .anchor_list a {
            transition: background-size 0.3s;
        }
        .anchor_list a:hover {
            background-size: 100% 1px;
        }
    }
}
@media (max-width: 768px) {
    .anchor {
        padding-bottom: 80rem;
    }
    .anchor_list {
        gap: 20rem;
        flex-direction: column;
        width: 330rem;
    }
    .anchor_list a {
        width: 100%;
        padding-bottom: 10.5rem;
        font-size: 20rem;
        background: linear-gradient(var(--blue), var(--blue)) 0% calc(100% + 1px) / 84rem 1px no-repeat;
    }
    .anchor_list .icon_link_arrow {
        width: 40rem;
        height: 30rem;
    }
}