@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&display=swap');

@charset "UTF-8";


body{
    font-family:'Noto Sans JP', sans-serif;
}

@media screen and (min-width:961px){
    #global-nav ul li a{
        color:#206ca0;
    }
}

a{
    color:#206ca0;
}

h1{
    font-family: "Noto Serif JP", serif;
    font-weight:900;
    text-align:center;
    margin-bottom:1em;
    font-size: min(3.5vw, 4em);
    color:#206ca0;
}

h1 *{
    font-weight:900;
}

h1 span{
    position:relative;
    display:inline-block;
    padding-left:2.9em;
}

h1 span em{
    position:absolute;
    font-size:.9em;
    background:#d22;
    color:#fff;
    transform:rotate(-2deg) translate(0, -50%);
    left:0;
    top:50%;
    padding:0 .5em;
    line-height:1.3em;
}

.caption{
    padding:1.5em;
    background:#206ca010;
    margin-bottom:1.5em;
    color:#206ca0;
}

.amount{
    text-align:center;
    margin:2.5em 0;
}

.amount p {
    display:inline-block;
    padding:1.5em;
    border:solid 1px #206ca040;
    border-radius:1em;
    background:#fdfdfd;
    color:#206ca0;
}

.amount p strong{
    font-size:1.5em;
    font-family: "Oswald", sans-serif;
}

.amount p em{
    background:linear-gradient(180deg, transparent 75%, #206ca020 75%);
    padding:0 .5em;
    margin-right:.5em;
}

.plan{
    padding:2em 0 0;
}

.plan ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

.plan ul > li{
    width:calc(100% / 3 - .5em);
}

.plan ul > li a{
    border:dotted 1px;
    padding:2em 1.5em 4.5em;
    display:block;
    height:100%;
    position:relative;
}

.plan ul > li a span{
    display:inline-block;
    padding:0 1em;
    border-radius:50rem;
    white-space:nowrap;
    background:#206ca0;
    color:#fff;
    position:absolute;
    transform:translate(-50%, 0);
    top:-.75em;
    left:50%;
    z-index:3;
}

.plan ul > li a:after{
    content:'応援する';
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#206ca080;
    transform-origin:bottom;
    color:#fff;
    position:absolute;
    top:0;
    left:0;
    transform:scaleY(0);
    transition: transform .3s;
    font-weight:700;
}

.plan ul > li a:hover:after{
    transform-origin:top;
    transform:scaleY(1);
}

.plan ul > li ol li{
    padding-left:1em;
    text-indent:-1em;
    font-size:.9em;
    margin-bottom:.5em;
}

.plan ul > li a p{
    position:absolute;
    text-align:center;
    margin-top:1em;
    bottom:.5em;
    left:0;
    width:100%;
}

.plan ul > li a p em{
    font-family:'Oswald', sans-serif;
    font-size:1.5em;
}

.plan ul > li.end{
    position:relative;
}

.plan ul > li.end:after{
    content:'期間終了';
    position:absolute;
    display:inline-block;
    white-space:nowrap;
    align-items:center;
    transform:translate(-50%, -50%) rotate(-2deg);
    top:50%;
    left:50%;
    padding:.5em 1em;
    justify-content: center;
    background:#cc2222dd;
    color:#fff;
    font-weight:bold;
    opacity:1;
}

.plan ul > li.end *{
    pointer-events:none;
    opacity:.7;
    filter:grayscale(1);
}



@media screen and (min-width:961px){
    .caption{
        text-align:center;
    }
}

@media screen and (max-width:961px){
    h1{
        font-size: 8vw;
    }
    h1 span{
        padding-left:0;
        line-height:1.2em;
    }
    h1 span em{
        transform: rotate(-15deg) translate(0, -50%);
        left: 0.5em;
        top: -3%;
        padding: 0 .5em;
        line-height: 1.3em;
    }

    .amount p{
        font-size:min(3.3vw, 1em);
    }

    .amount p em{
        display:inline-block;
        margin-bottom:.5em;
        margin-left:0;
    }

    .plan ul > li{
        width:100%;
        margin-bottom:2em;
    }
}