@charset "utf-8";
/*=================== 
変数宣言
======================*/

:root {
    --main-color: rgb(237, 204, 111);
    --main-color-rgb: 237, 204, 111;
    --text-color: rgb(51, 51, 51);
    --text-color-rgb: 51, 51, 51;
    --size-sm: 1.2rem;
    --size-md: 1.6rem;
    --size-lg: 2.6rem;
    --size-xl: 4.2rem;
    --size-xxl: 6.6rem;
    --font-sans: "Noto Sans JP", serif;
    --font-serif: "Noto Serif JP", serif;
    --gutter-base: 8px;
    --contents-side-gutter: calc(var(--gutter-base)*2);
    --contents-gutter: calc(var(--gutter-base)*5);
    --contents-gutter-pc: calc(var(--gutter-base)*10);
    --section-gutter: calc(var(--gutter-base)*10);
    --section-gutter-pc: calc(var(--gutter-base)*20);
    --footer-gutter: calc(var(--gutter-base)*30);
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}


/* ============================================= */

.subscription_inner {
    margin-top: var(--section-gutter);
    margin-inline: var(--contents-side-gutter);
}

.subscription_inner .title {
    font-size: var(--size-xl);
    line-height: 1;
    margin-bottom: var(--contents-gutter);
}

.subscription_inner .title span {
    display: block;
    font-size: var(--size-sm);
    line-height: 2;
}

.subscription_text {
    margin-bottom: var(--section-gutter);
}

.subscription_inner_wrap img {
    display: none;
}

.plan .plan_title {
    font-size: var(--size-lg);
    text-align: center;
    margin-bottom: var(--contents-gutter);
}

/* グリッド内 */

.plan_inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: calc(var(--contents-side-gutter)*2);
}

.plan_inner_box h4 {
    border-bottom: var(--text-color) 1px solid;
}

.meyasu {
    font-size: var(--size-sm);
}

.meyasu span {
    font-size: var(--size-sm);
    display: block;
}

.haisou {
    font-size: var(--size-sm);
}

.getsugaku {
    font-size: var(--size-sm);
    text-align: end;
    line-height: 1;
}

.getsugaku span {
    font-size: var(--size-lg);
}

.subscription_btn {
    width: 120px;

    background-color: #fff;
    border: transparent 1px solid;
    border-radius: 24px;
    margin-inline: auto;
    text-align: center;
    align-items: center;
    padding: 8px;
    margin: var(--contents-side-gutter);
}

.plan_inner_box {
    position: relative;
}

.number {
    font-size: var(--size-lg);
    position: absolute;
    color: #fff;
    top: -20px;
    left: -10px;
}

@media screen and (min-width:520px) {

    .subscription_inner_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* border: #fff 1px solid; */
        margin-bottom: var(--contents-gutter-pc);
        position: relative;
    }

    .subscription_text {
        /* border: #fff 1px solid; */
        margin: 0;
    }

    .subscription_inner_wrap img {
        /* border: #fff 1px solid; */
        display: block;
        width: 30%;
        height: auto;
        object-fit: contain;
        margin-right: 10%;
        opacity: 0;
        animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;

    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .subscription_inner_wrap::after {
        position: absolute;
        content: '';
        background-image: url(../../img/butterfly@4x.png);
        width: 30px;
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        right: 30px;
        top: -30px;
        opacity: 0;
        animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards, yurayura ease-in-out 5s infinite;
    }

    @keyframes yurayura {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    .subscription_inner {
        margin-top: var(--section-gutter-pc);
        max-width: 700px;
        margin-inline: auto;
    }

    .plan_inner {
        gap: var(--contents-gutter-pc);
    }

    .subscription_btn {
        margin-right: 0;
        margin-left: auto;
    }

    .subscription_btn:hover {
        background-color: transparent;
        border: #fff solid 1px;
        transition: 0.3s;
    }

    .subscription_btn:hover a {
        color: #fff;
        transition: 0.3s;
    }
}

/*============min-width:520px============*/