/* PC
================================================= */

@media only screen and (min-width: 768px){
    .cherry-bomb-one{
        font-family: "Cherry Bomb One", system-ui;
        text-rendering: optimizeLegibility;
    }
    .sec_ttl-v1 h3{
        color: #000000;
        font-size: 4.8rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-shadow:
            3px 0 #ffffff,
            -3px 0 #ffffff,
            0 3px #ffffff,
            0 -3px #ffffff,
            3px 3px #ffffff,
            -3px -3px #ffffff,
            3px -3px #ffffff,
            -3px 3px #ffffff;
    }
    .sec_ttl-v1 h3 span{
        color: #ffd200;
        font-size: 7.2rem;
    }
    .sec_ttl-v2 h3{
        display: inline-block;
        font-size: 4rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        background: #ffffff;
        padding: 5px 50px;
        border-radius: 35px;
        position: relative;
    }
    .sec_ttl-v2 h3::before{
        content: "";
        display: block;
        width: 21px;
        height: 16px;
        background: url(../img/top/sec_ttl-v2_arrow.png) no-repeat center / contain;
        position: absolute;
        bottom: -15px;
        left: 30px;
    }
    .btn{
        width: 280px;
        text-align: center;
        box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 1);
        border-radius: 30px;
        position: relative;
        transition: 0.3s;
    }
    .btn a{
        display: block;
        background: #ffd200;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 30px;
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    .btn i{
        color: #ffffff;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        right: 20px;
    }
    .btn:hover{
        box-shadow: unset;
        transform: translateY(6px);
    }
}

/* SP
================================================= */

@media only screen and (max-width: 767px){
    .cherry-bomb-one{
        font-family: "Cherry Bomb One", system-ui;
        text-rendering: optimizeLegibility;
    }
    .sec_ttl-v1 h3{
        color: #000000;
        font-size: 3.2rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        line-height: 1.4;
        text-shadow:
            3px 0 #ffffff,
            -3px 0 #ffffff,
            0 3px #ffffff,
            0 -3px #ffffff,
            3px 3px #ffffff,
            -3px -3px #ffffff,
            3px -3px #ffffff,
            -3px 3px #ffffff;
    }
    .sec_ttl-v1 h3 span{
        color: #ffd200;
        font-size: 4rem;
    }
    .sec_ttl-v2 h3{
        display: inline-block;
        font-size: 3.2rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        line-height: 1.2;
        background: #ffffff;
        padding: 10px 35px;
        border-radius: 35px;
        position: relative;
    }
    .sec_ttl-v2 h3::before{
        content: "";
        display: block;
        width: 21px;
        height: 16px;
        background: url(../img/top/sec_ttl-v2_arrow.png) no-repeat center / contain;
        position: absolute;
        bottom: -15px;
        left: 30px;
    }
    .btn{
        width: 280px;
        text-align: center;
        box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 1);
        border-radius: 50px;
        position: relative;
        transition: 0.3s;
    }
    .btn a{
        display: block;
        background: #ffd200;
        padding: 15px 20px;
        box-sizing: border-box;
        border-radius: 50px;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    .btn i{
        color: #ffffff;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        right: 20px;
    }
    .btn:hover{
        box-shadow: unset;
        transform: translateY(6px);
    }
}