@charset "utf-8";

//==========================================================================
//_anchor-link
//==========================================================================

//-----------------------------------------------------------------
//.p-anchor-link
//-----------------------------------------------------------------
.p-anchor-link-01 {
    margin: 50px 0 80px;
    @include smMax {
        margin: sm_vw(60) 0 sm_vw(80);
    }
    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
        @include smMax {
            flex-wrap: wrap;
            width: 100%;
        }
        li {
            position: relative;
            height: 50px;
            font-size: 16px;
            @include smMin {
                flex: 1;
                &:first-child {
                    &::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 1px;
                        height: 100%;
                        border-right: 1px solid #999;
                    }
                }
            }
            @include smMax {
                width: 50%;
                height: sm_vw(70);
                font-size: sm_vw(26);
                &:nth-child(odd) {
                    &::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 1px;
                        height: 100%;
                        border-right: 1px solid #999;
                    }
                }
                &:nth-child(n+3) {
                    margin-top: sm_vw(30);
                }
            }
            &::after {
                content: "";
                position: absolute;
                right: 0;
                top: 0;
                width: 1px;
                height: 100%;
                border-right: 1px solid #999;
            }
            a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                @include hover {
                    opacity: 0.7;
                }
                .ico {
                    position: relative;
                    padding-right: 20px;
                    @include smMax {
                        padding-right: sm_vw(38);
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        bottom: 50%;
                        right: 0;
                        width: 8px;
                        height: 12px;
                        transform: translate(0,50%) rotate(-90deg);
                        background-image: url("../images/ico_arrow01.svg");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        background-position: 0 0;
                        backface-visibility: hidden;
                        @include transition;
                        @include smMax {
                            width: sm_vw(10);
                            height: sm_vw(18);
                        }
                    }
                }
            }
        }
    }
}