/**
 * 20260310 ADD MATSUSAKO
 */


@charset "utf-8";

/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    #edu > .edu-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0 auto;
        padding: 0 1.5em;
        margin: 8.0vw auto 0;
        width: var(--content-width-sp);
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: 4.0vw;
        font-weight: 700;
        border-radius: 2.0vw;
    }
    #edu > .edu-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    #edu > .edu-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0 calc( 100vw * 20 / 1440 );
        padding: 0 1.5em;
        margin: calc( 100vw * 60 / 1440 ) auto 0;
        width: var(--content-width-pc);
        max-width: calc( 100vw * 440 / 1440 );
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #edu > .edu-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

}