@use "../../common_dart/base/setting" as *;
@use "../../common_dart/base/mixin" as *;

/* ボタン拡大縮小アニメーション */
@keyframes scaling {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

.button {
    position: relative;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    background: #fff;
    padding: get_vw(16);
    box-sizing: border-box;

    @include query-min($break) {
        max-width: 100%;
        width: 900px;
        margin: 0 auto;
        padding: 10px;
        box-shadow: 8px 20px 20px 0 rgba(#1F7F00, .02);
    }

    &::before,
    &::after {
        content: "";
        width: get_vw(50);
        height: get_vw(50);
        box-sizing: border-box;
        border-top: get_vw(1) solid #78c92f;
        position: absolute;
        top: get_vw(16);

        @include query-min($break) {
            width: 50px;
            height: 50px;
            border-top: 2px solid #78c92f;
            top: 10px;
        }
    }

    &::before {
        border-left: get_vw(1) solid #78c92f;
        left: get_vw(16);

        @include query-min($break) {
            border-left: 2px solid #78c92f;
            left: 10px;
        }
    }

    &::after {
        border-right: get_vw(1) solid #78c92f;
        right: get_vw(16);

        @include query-min($break) {
            border-right: 2px solid #78c92f;
            right: 10px;
        }
    }

    &__inner {
        padding: get_vw(40);
        position: relative;

        @include query-min($break) {
            padding: 24px;
        }

        &::before,
        &::after {
            content: "";
            width: get_vw(50);
            height: get_vw(50);
            box-sizing: border-box;
            border-bottom: get_vw(1) solid #78c92f;
            position: absolute;
            bottom: 0;

            @include query-min($break) {
                width: 50px;
                height: 50px;
                border-bottom: 2px solid #78c92f;
            }
        }

        &::before {
            border-left: get_vw(1) solid #78c92f;
            left: 0;

            @include query-min($break) {
                border-left: 2px solid #78c92f;
            }
        }

        &::after {
            border-right: get_vw(1) solid #78c92f;
            right: 0;

            @include query-min($break) {
                border-right: 2px solid #78c92f;
            }
        }
    }

    img {
        width: get_vw(456);
        position: absolute;
        top: get_vw(-50);
        left: 50%;
        transform: translate(-50%, 0);

        @include query-min($break) {
            width: 370px;
            top: -30px;
        }
    }

    a {
        // max-width: get_vw(550);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: get_vw(160);
        font-size: get_vw(40);
        line-height: get_vw(54);
        letter-spacing: .04em;
        color: #fff;
        font-weight: 700;
        background:  url(../images/tax-ryuki/img_btn.png) center / 100% 100% no-repeat;
        margin: 0 auto;
        text-shadow: 0 0 get_vw(1) #ff9f00, 0 0 get_vw(4) #ff9f00, 0 0 get_vw(8) #ff9f00, 0 0 get_vw(12) #ff9f00, 0 0 get_vw(16) #ff9f00;
        transition: 0.3s all;

        @include query-min($break) {
            max-width: 700px;
            height: 98px;
            font-size: 30px;
            background:  url(../images/tax-ryuki/img_btn_pc.png) center / 100% 100% no-repeat;
            text-shadow: 0 0 1px #ff9f00, 0 0 4px #ff9f00, 0 0 8px #ff9f00, 0 0 12px #ff9f00, 0 0 16px #ff9f00;
        }

        &:hover {
            @include query-min($break) {
                transform: translateY(5px);
            }
        }
    }

    &__income {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: get_vw(26);
        line-height: get_vw(44);
        color: #374F2B;
        margin-top: get_vw(30);
        text-align: left;

        @include query-min($break) {
            font-size: 15px;
            line-height: 1;
            margin-top: 22px;
        }

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: get_vw(94);
            height: get_vw(115);
            font-size: get_vw(26);
            line-height: get_vw(36);
            background: #eef5e1;
            margin-right: get_vw(24);

            @include query-min($break) {
                width: 110px;
                height: 36px;
                font-size: 15px;
                line-height: 1;
                margin-right: 13px;
            }
        }
    }

    &__cheer {
        padding-top: get_vw(50);
        text-align: center;
        font-size: get_vw(24);
        line-height: 1;
        @include query-min($break) {
            font-size: 20px;
            padding-top: 25px;
        }
        span {
            position: relative;
            &::before, &::after {
                position: absolute;
                content: "";
                width: 1px;
                height: get_vw(24);
                background-color: #000;
                bottom: 0;
                @include query-min($break) {
                    width: 2px;
                    height: 20px;
                    bottom: 2px;
                }
            }
            &::before {
                left: get_vw(-4);
                transform: rotate(-15deg);
                @include query-min($break) {
                    left: -2px;
                }
            }
            &::after {
                right: get_vw(-8);
                transform: rotate(15deg);
                @include query-min($break) {
                    right: -8px;
                }
            }
            strong {
                color: #ff5600;
            }
        }
    }

    &--02 {
        background: transparent;
        box-shadow: none;

        &::before,
        &::after {
            display: none;
        }

        .button {
            &__inner {
                padding: 0;

                &::before,
                &::after {
                    display: none;
                }
            }

            &__income {
                span {
                    background: #fff;
                }
            }
        }

        a {
            max-width: get_vw(630);
            background:  url(../images/tax-ryuki/img_btn_big.png) center / 100% 100% no-repeat;

            @include query-min($break) {
                max-width: 700px;
                background:  url(../images/tax-ryuki/img_btn_pc.png) center / 100% 100% no-repeat;
            }
        }
    }

    &--03 {
        background: transparent;
        box-shadow: none;

        &::before,
        &::after {
            display: none;
        }

        .button {
            &__inner {
                padding: 0;

                &::before,
                &::after {
                    display: none;
                }
            }
        }

        a {
            max-width: get_vw(630);
            background:  url(../images/tax-ryuki/img_btn_big.png) center / 100% 100% no-repeat;

            @include query-min($break) {
                max-width: 700px;
                background:  url(../images/tax-ryuki/img_btn_pc.png) center / 100% 100% no-repeat;
            }
        }
    }

    &--04 {

        .button__inner {
            padding: get_vw(90) get_vw(40) get_vw(40);

            @include query-min($break) {
                padding: 40px 40px 20px ;
            }
        }

        a {
            position: relative;
            font-size: get_vw(38);
            letter-spacing: -.05em;
            text-indent: -5vw;

            @include query-min($break) {
                font-size: 30px;
                letter-spacing: .04em;
                text-indent: 0;
            }

        }

        &__free {
            color: #f97d16;
            font-size: get_vw(30);
            line-height: 70px;
            text-indent: 0;
            letter-spacing: 1px;

            position: absolute;
            top: -45px;
            left: 10px;

            width: 70px;
            height: 70px;

            border: 2px solid #f97d16;
            border-radius: 50%;
            background: #fff;

            text-shadow: none;
            @include query-min($break) {
                font-size: 28px;
                line-height: 100px;

                top: -40px;
                left: 20px;

                width: 100px;
                height: 100px;


                border: 4px solid #f97d16;
            }

        }
    }


    &--hero {
        a {
            font-size: get_vw(40);
            letter-spacing: -.05em;
            text-indent: -5vw;

            @include query-min($break) {
                font-size: 30px;
                letter-spacing: .04em;
                text-indent: 0;
            }
        }
    }

    &--typeb {
        .button {
            &__inner {
                padding: get_vw(32) get_vw(16) get_vw(36);
                @include query-min($break) {
                    padding: 24px;
                }
                a {
                    box-sizing: border-box;
                    background-image: url("../images/tax-ryuki/img_btn_02.png");
                    height: get_vw(171);
                    padding-left: get_vw(16);
                    text-shadow:
                    rgba(255,127,0,.37) 1px 1px 5px, rgba(255,127,0,.37) -1px 1px 5px,
                    rgba(255,127,0,.37) 1px -1px 5px, rgba(255,127,0,.37) -1px -1px 5px;
                    letter-spacing: 0.04em;
                    text-indent: 0;
                    @include query-min($break) {
                        background-image: url("../images/tax-ryuki/img_btn_02_pc.png");
                        height: 126px;
                        padding-left: 0;
                    }
                }
            }
        }
    }

    &--scaling {
        a {
            animation: scaling 1.3s infinite;
        }
    }

    &--shadow {
        box-shadow: 0 get_vw(8) get_vw(40) rgba(31, 127, 0, 0.1);
        @include query-min($break) {
            box-shadow: 0 8px 40px rgba(31, 127, 0, 0.1);
        }
    }
}