@charset "utf-8";

//==========================================================================
//_btn.scss
//==========================================================================

//-----------------------------------------------------------------
//.c-btn-01
//-----------------------------------------------------------------
.c-btn-01 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 56px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 28px;
    @include smMax {
        font-size: sm_vw(28);
        height: sm_vw(80);
        border-radius: sm_vw(40);
    }
    &.is-large_sp {
        @include smMax {
            height: sm_vw(110);
            line-height: 1.3;
        }
    }
    &.is-large02_sp {
        @include smMax {
            height: sm_vw(100);
            line-height: 1.3;
        }
    }
    &.is-large {
        font-size: 20px;
        height: 80px;
        @include smMax {
            font-size: sm_vw(28);
            height: sm_vw(110);
            line-height: 1.3;
        }
        small {
            font-size: 18px;
            @include smMax {
                font-size: sm_vw(24);
            }
        }
    }
    &.is-large02_pc {
        @include smMin {
            height: 64px;
        }
    }
    &.is-small {
        font-size: 14px;
        height: 40px;
        @include smMax {
            font-size: sm_vw(28);
            height: sm_vw(100);
            line-height: 1.3;
            border-radius: sm_vw(50);
        }
    }
    &.is-square {
        border-radius: 0;
    }
    &.is-blue {
        background-color: $colorBlue;
    }
    &.is-gray {
        background-color: $colorGray03;
    }
    &.is-gray02 {
        background-color: $colorGray02;
    }
    &.is-border {
        border: 1px solid #999;
    }
    &.is-colorBlue {
        color: $colorBlue;
    }
    .ico {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        &.is-arrow {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                bottom: calc(50% + 2px);
                right: 20px;
                width: 23px;
                height: 7px;
                transform: translate(0,50%);
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-position: 0 0;
                backface-visibility: hidden;
                @include transition;
                @include smMax {
                    bottom: calc(50% + 0.267vw);
                    width: sm_vw(45);
                    height: sm_vw(14);
                    right: sm_vw(30);
                }
            }
            &.is-smallSP {
                &::before {
                    @include smMax {
                        width: sm_vw(25);
                        height: sm_vw(9);
                    }
                }
            }
            &.is-back {
                &::before {
                    transform: translate(0,50%) scale(-1, 1);
                    left: 20px;
                    right: auto;
                }
            }
        }
        &.is-arrow02 {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                bottom: 50%;
                right: 30px;
                width: 9px;
                height: 14px;
                transform: translate(0,50%) rotate(180deg);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: 0 0;
                backface-visibility: hidden;
                @include transition;
                @include smMax {
                    width: sm_vw(14);
                    height: sm_vw(24);
                    right: sm_vw(40);
                }
            }
            &.is-up {
                &::before {
                    transform: translate(0,50%) rotate(90deg);
                }
            }
        }
        &.is-down {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                bottom: calc(50% - 0.05em);
                right: 20px;
                width: 8px;
                height: 12px;
                transform: translate(0,50%) rotate(-90deg);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: 0 0;
                backface-visibility: hidden;
                @include transition;
                @include smMax {
                    bottom: calc(50% + 0.267vw);
                    width: sm_vw(12);
                    height: sm_vw(18);
                    right: sm_vw(30);
                }
            }
        }
        &.is-blank {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                bottom: calc(50% - 0.05em);
                right: 30px;
                width: 12px;
                height: 12px;
                transform: translate(0,50%);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: 0 0;
                backface-visibility: hidden;
                @include transition;
                @include smMax {
                    bottom: calc(50% + 0.267vw);
                    width: sm_vw(24);
                    height: sm_vw(24);
                    right: sm_vw(40);
                }
            }
        }
        &.is-pdf {
            position: relative;
            width: auto;
            padding-left: 36px;
            @include smMax {
                padding-left: sm_vw(40);
            }
            &::before {
                content: "";
                position: absolute;
                bottom: calc(50% - 0.05em);
                left: 0;
                width: 22px;
                height: 31px;
                transform: translate(0,50%);
                background-image: url("../images/ico_pdf.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: 0 0;
                backface-visibility: hidden;
                @include transition;
                @include smMax {
                    bottom: 50%;
                    width: sm_vw(24);
                    height: sm_vw(34);
                }
            }
        }
        &.is-plus {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                bottom: 50%;
                right: 20px;
                width: 14px;
                height: 1px;
                transform: translate(0,50%);
                background-color: #222;
                @include smMax {
                    width: sm_vw(24);
                    height: 1px;
                    right: sm_vw(32);
                }
            }
            &::after {
                content: "";
                position: absolute;
                bottom: 50%;
                right: 26px;
                width: 1px;
                height: 14px;
                transform: translate(0,50%);
                background-color: #222;
                @include smMax {
                    width: 1px;
                    height: sm_vw(24);
                    right: sm_vw(42);
                }
            }
        }
        &.is-white {
            color: #fff;
            &.is-arrow {
                &::before {
                    background-image: url("../images/ico_arrow02_w.png");
                    @include smMax {
                        background-image: url("../images/ico_arrow02_w_sp.png");
                    }
                }
                &.is-smallSP {
                    &::before {
                        @include smMax {
                            background-image: url("../images/ico_arrow02-s_w_sp.png");
                        }
                    }
                }
            }
            &.is-blank {
                &::before {
                    background-image: url("../images/ico_blank01_w.png");
                }
            }
        }
        &.is-blue {
            &.is-arrow {
                &::before {
                    background-image: url("../images/ico_arrow02.png");
                    @include smMax {
                        background-image: url("../images/ico_arrow02_sp.png");
                    }
                }
            }
            &.is-arrow02 {
                &::before {
                    background-image: url("../images/ico_arrow01.svg");
                }
            }
            &.is-down {
                &::before {
                    background-image: url("../images/ico_arrow01.svg");
                    @include smMax {
                        background-image: url("../images/ico_arrow01_sp.svg");
                    }
                }
            }
        }
        &.is-black {
            &.is-arrow02 {
                &::before {
                    background-image: url("../images/ico_arrow01_b.svg");
                }
            }
        }
        &.is-gray {
            &.is-arrow {
                &::before {
                    background-image: url("../images/ico_arrow02_gr.png");
                    @include smMax {
                        background-image: url("../images/ico_arrow02_gr_sp.png");
                    }
                }
            }
            &.is-arrow02 {
                &::before {
                    background-image: url("../images/ico_arrow01_gr.svg");
                }
            }
            &.is-down {
                &::before {
                    background-image: url("../images/ico_arrow01_gr.svg");
                    @include smMax {
                        background-image: url("../images/ico_arrow01_gr_sp.svg");
                    }
                }
            }
            &.is-blank {
                &::before {
                    background-image: url("../images/ico_blank01_gr.png");
                }
            }
        }
        &.is-leftPC {
            @include smMin {
                padding-left: 22px;
                justify-content: flex-start;
            }
        }
    }
    .ico02 {
        position: relative;
        display: inline-block;
        padding-left: 34px;
        @include smMax {
            padding: 0 sm_vw(70);
            text-align: center;
        }
        &::before {
            content: "";
            position: absolute;
            bottom: 50%;
            left: 0;
            transform: translateY(50%);
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: 0 0;
            backface-visibility: hidden;
        }
        &.is-mail {
            &::before {
                width: 24px;
                height: 17px;
                background-image: url("../images/ico_mail02.png");
                @include smMax {
                    width: sm_vw(38);
                    height: sm_vw(26);
                }
            }
        }
    }
    @include hover {
        opacity: 0.7;
        .ico {
            &.is-arrow {
                &::before {
                    transform: translate(10px,50%);
                }
                &.is-back {
                    &::before {
                        transform: translate(-10px,50%) scale(-1, 1);
                    }
                }
            }
            &.is-down {
                &::before {
                    transform: translate(0,80%) rotate(-90deg);
                }
            }
        }
        &.is-animArrow {
            .ico {
                &.is-arrow02 {
                    &::before {
                        transform: translate(10px,50%) rotate(180deg);
                    }
                }
            }
        }
    }
}