@charset "utf-8";

/*------------------------------------------------------------
[Common]
------------------------------------------------------------ */
#suntory_contents .finish_text{
    color:#ee0000;
    text-align: center;
    margin-top: 10px;
    line-height: 1.2;
}

#suntory_contents .category_head{
    display: block;
}

#suntory_contents .category_note {
    text-align: center;
}

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */
@media screen and (max-width:767px){
    /*------------------------------------------------------------
    [SP] primary_category
    ------------------------------------------------------------ */
    #suntory_contents .category_note {
        font-size: 4vw;
    }

    #suntory_contents .primary_category,
    #suntory_contents .secondary_category {
        padding-bottom: 0;
    }

    #suntory_contents #diamond,
    #suntory_contents #platinum,
    #suntory_contents #gold,
    #suntory_contents #red,
    #suntory_contents #kids {
        border: 0;
    }

    #suntory_contents #diamond .category_head,
    #suntory_contents #platinum .category_head,
    #suntory_contents #gold .category_head,
    #suntory_contents #red .category_head,
    #suntory_contents #kids .category_head {
        right: 0;
        margin-bottom: 0;
    }

    #suntory_contents #diamond .category_head h3,
    #suntory_contents #platinum .category_head h3,
    #suntory_contents #gold .category_head h3,
    #suntory_contents #red .category_head h3 {
        top: 8vw;
    }

    #suntory_contents #diamond .category_head .fee,
    #suntory_contents #platinum .category_head .fee,
    #suntory_contents #gold .category_head .fee,
    #suntory_contents #red .category_head .fee {
        top: 21.8vw;
    }

    /* #diamond */
    #suntory_contents #diamond .category_head {
        background: url(../img/join/sp_bg_premium.webp) no-repeat 0 0;
        background-size: 92vw auto;
    }
    .no-webp #suntory_contents #diamond .category_head {
        background: url(../img/join/sp_bg_premium.jpg) no-repeat 0 0;
        background-size: 92vw auto;
    }
    #suntory_contents #diamond .category_head h3 {
        top: 8vw;
    }
    #suntory_contents #diamond .category_head .fee {
        top: 22vw;
    }

    /* #platinum */
    #suntory_contents #platinum .category_head {
        background: url(../img/join/sp_bg_platinum.webp) no-repeat 0 0;
        background-size: 92vw auto;
    }
    .no-webp #suntory_contents #platinum .category_head {
        background: url(../img/join/sp_bg_platinum.jpg) no-repeat 0 0;
        background-size: 92vw auto;
    }
    #suntory_contents #diamond .category_head h3 {
        top: 8vw;
    }

    #suntory_contents #diamond .category_head .fee {
        top: 22vw;
    }

    /* #gold */
    #suntory_contents #gold .category_head {
        background: url(../img/join/sp_bg_gold.webp) no-repeat 0 0;
        background-size: 92vw auto;
    }
    .no-webp #suntory_contents #gold .category_head {
        background: url(../img/join/sp_bg_gold.jpg) no-repeat 0 0;
        background-size: 92vw auto;
    }

    /* #red */
    #suntory_contents #red .category_head {
        background: url(../img/join/sp_bg_red.webp) no-repeat 0 0;
        background-size: 92vw auto;
    }
    .no-webp #suntory_contents #red .category_head {
        background: url(../img/join/sp_bg_red.jpg) no-repeat 0 0;
        background-size: 92vw auto;
    }

    /* #kids */
    #suntory_contents #kids .category_head {
        background: url(../img/join/sp_bg_junior.webp) no-repeat 0 0;
        background-size: 92vw auto;
    }
    .no-webp #suntory_contents #kids .category_head {
        background: url(../img/join/sp_bg_junior.jpg) no-repeat 0 0;
        background-size: 92vw auto;
    }
    #suntory_contents #kids .category_head .fee{
        top: 16.4vw;
    }

}


/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print, screen and (min-width:768px) {
    /*------------------------------------------------------------
    [PC] primary_category
    ------------------------------------------------------------ */
    #suntory_contents .category_note {
        font-size: 18px;
    }
    #suntory_contents .category_wrap {
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 0;
    }

    #suntory_contents #diamond .category_head,
    #suntory_contents #platinum .category_head,
    #suntory_contents #gold .category_head,
    #suntory_contents #red .category_head,
    #suntory_contents #kids .category_head {
        margin-bottom: 0;
        box-shadow: 0 0 8px rgba(216, 216, 216, 1);
    }

    #suntory_contents .primary_category,
    #suntory_contents .secondary_category{
        padding-bottom: 0;
        box-shadow: none;
    }

    /* #diamond */
    #suntory_contents #diamond .category_head {
        background: url(../img/join/pc_bg_premium.webp) no-repeat 0 0;
    }
    .no-webp #suntory_contents #diamond .category_head {
        background: url(../img/join/pc_bg_premium.jpg) no-repeat 0 0;
    }
    #suntory_contents #diamond .category_head h3 {
        height: 47px;
        top: 20px;
        left: 82px;
    }
    #suntory_contents #diamond .category_head .fee {
        top: 50px;
    }

    /* #platinum */
    #suntory_contents #platinum .category_head {
        background: url(../img/join/pc_bg_platinum.webp) no-repeat 0 0;
    }
    .no-webp #suntory_contents #platinum .category_head {
        background: url(../img/join/pc_bg_platinum.jpg) no-repeat 0 0;
    }
    #suntory_contents #platinum .category_head h3 {
        height: 47px;
        top: 20px;
    }
    #suntory_contents #platinum .category_head .fee {
        top: 50px;
        left: 94px;
    }

    /* #gold */
    #suntory_contents #gold .category_head {
        background: url(../img/join/pc_bg_gold.webp) no-repeat 0 0;
    }
    .no-webp #suntory_contents #gold .category_head {
        background: url(../img/join/pc_bg_gold.jpg) no-repeat 0 0;
    }

    #suntory_contents #gold .category_head h3 {
        top: 20px;
    }
    #suntory_contents #gold .category_head .fee {
        top: 81px;
    }

    /* #red */
    #suntory_contents #red .category_head {
        background: url(../img/join/pc_bg_red.webp) no-repeat 0 0;
    }
    .no-webp #suntory_contents #red .category_head {
        background: url(../img/join/pc_bg_red.jpg) no-repeat 0 0;
    }
    #suntory_contents .secondary_category#red .category_head .fee  {
        top: 83px;
    }

    /* #kids */
    #suntory_contents #kids .category_head {
        background: url(../img/join/pc_bg_junior.webp) no-repeat 0 0;
    }
    .no-webp #suntory_contents #kids .category_head {
        background: url(../img/join/pc_bg_junior.jpg) no-repeat 0 0;
    }


}