/*--------------------------------------

sp

---------------------------------------*/

.common-container{
    inline-size: min(100% - (4% * 2), 1200px);
    width: min(92%, 1200px);
    container: sup-gascard / inline-size;
    margin-inline: auto;
    margin-block: clamp(50px, -1.136rem + 18.18vw, 200px) clamp(80px, 0.17rem + 20.61vw, 250px);
}

h2{
    font-size: clamp(25px, 2.5vw, 30px);
    text-align: center;
    line-height: 1.3;
    letter-spacing: .15em;
    font-family: heisei-kaku-gothic-std, sans-serif;
    font-weight: 700;
    color: #000000;
    padding-bottom: clamp(30px, 6.66666vw, 80px);
}

.sup_btn_wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.sup_btn_wrap .sup_btn{
    /* max-width: clamp(350px, 37.5vw, 450px); */
}

.sup_btn_wrap .sup_btn a {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 30px 40px 30px 20px;
    /* border-radius: 10px; */
    background-color: #181818;
    font-size: 25px;
    font-weight: 700;
    font-family: heisei-kaku-gothic-std, sans-serif;
    color: #fff;
    transition: background-color .5s, opacity .5s;
    letter-spacing: 2px;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 10px;
}

.sup_btn_wrap .sup_btn a:hover {
    background-color: #494949;
}

.sup_btn_wrap .sup_btn a::after {
    content: '\f138';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #fff;
    font-size: clamp(16px, 62.08333vw, 25px);
}

@container sup-gascard (inline-size >= 765px) {

    .sup_btn_wrap {
        grid-template-columns: repeat(3, 1fr);
    }

}



/*----------------------------------

tb

------------------------------------*/

@media (min-width: 520px){

}

/*----------------------------------

pc

------------------------------------*/

@media (min-width: 960px){



}