@charset "utf-8";

//==========================================================================
//_pager.scss
//==========================================================================
.p-pager {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    @include smMin {
        padding: 0 20px;
    }
    @include smMax {
        margin-top: sm_vw(60);
        padding: 0 sm_vw(40);
    }
    .btn {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 164px;
        height: 56px;
        font-size: 16px;
        color: #222;
        background-color: #fff;
        border: 1px solid $colorBorder;
        @include smMax {
            width: sm_vw(62);
            height: sm_vw(80);
            font-size: 0;
        }
        &.prev {
            margin-right: 42px;
            padding-left: 10px;
            @include smMax {
                margin-right: sm_vw(7);
                padding-left: sm_vw(10);
            }
            &::before {
                content: "";
                position: absolute;
                left: 16px;
                bottom: 50%;
                transform: translateY(50%) scale(-1, 1);
                width: 30px;
                height: 9px;
                background: transparent url("../images/ico_arrow02.png") 0 0 no-repeat;
                background-size: 100% 100%;
                @include transition;
                background-position: 0 0;
                backface-visibility: hidden;
                @include smMax {
                    left: sm_vw(16);
                    width: sm_vw(25);
                    height: sm_vw(9);
                    background: transparent url("../images/ico_arrow02-s_sp.png") 0 0 no-repeat;
                    background-size: 100% 100%;
                }
            }
            @include smMin {
                @media screen and (max-width: 1080px) {
                    margin-right: 0.7407407407407408vw;
                    &::before {
                        width: 20px;
                        background-size: 30px 100%;
                        background-position: 100% 0;
                    }
                }
            }
        }
        &.next {
            margin-left: 42px;
            padding-right: 10px;
            @include smMax {
                margin-left: sm_vw(7);
                padding-right: sm_vw(10);
            }
            &::before {
                content: "";
                position: absolute;
                right: 16px;
                bottom: 50%;
                transform: translateY(50%);
                width: 30px;
                height: 9px;
                background: transparent url("../images/ico_arrow02.png") 0 0 no-repeat;
                background-size: 100% 100%;
                @include transition;
                background-position: 0 0;
                backface-visibility: hidden;
                @include smMax {
                    right: sm_vw(16);
                    width: sm_vw(25);
                    height: sm_vw(9);
                    background: transparent url("../images/ico_arrow02-s_sp.png") 0 0 no-repeat;
                    background-size: 100% 100%;
                }
            }
            @include smMin {
                @media screen and (max-width: 1080px) {
                    margin-left: 0.7407407407407408vw;
                    &::before {
                        width: 20px;
                        background-size: 30px 100%;
                        background-position: 100% 0;
                    }
                }
            }
        }
        &.back {
            width: 490px;
            @include hover {
                opacity: 0.7;
            }
            @include smMax {
                flex: 1;
                font-size: sm_vw(28);
            }
        }
        @include hover {
            &.prev {
                &::before {
                    transform: translate(-10px,50%) scale(-1, 1);
                }
            }
            &.next {
                &::before {
                    transform: translate(10px,50%);
                }
            }
        }
    }
    .page {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 56px;
        margin: 0 8px;
        font-size: 18px;
        font-family: $font-en01;
        color: #222;
        background-color: #ccc;
        @include smMax {
            width: sm_vw(62);
            height: sm_vw(80);
            font-size: sm_vw(28);
            margin: 0 sm_vw(7);
        }
        &.current {
            color: #fff;
            background-color: $colorBlue;
        }
        &.leader {
            background-color: transparent;
            @include smMax {
                width: sm_vw(76);
                margin: 0;
            }
        }
        @include hover {
            color: #fff;
            background-color: $colorBlue;
            &.leader {
                color: #222;
                background-color: transparent;
            }
        }
        @media screen and (max-width: 1080px) {
            margin: 0.7407407407407408vw;
        }
    }
}