@charset "utf-8";

/*==================================================
sp
================================================== */
@media screen and (max-width:767px){

    #sungoliath_contents .title_container {
        order: 1;
    }
    #sungoliath_contents .contents_container {
        order: 2;
    }
    #sungoliath_contents .breadcrumbs {
        order: 3;
    }
    #sungoliath_contents .btn_list {
        order: 4;
    }
    
    /* ========================================================================
    title[sp]
    ========================================================================= */
    #suntory_contents .title  {
        justify-content: space-between;
    }
    #suntory_contents .title_container h1 {
        letter-spacing: -0.0125em;
        margin: 0;
    }
    #suntory_contents .title_container .title_jp {
        letter-spacing: -0.075em;
        font-size: 3.2vw;
        margin: 0;
    }
    
    /* ========================================================================
    policy_contents[sp]
    ========================================================================= */
    #suntory_contents .contents_container.policy_contents {
        background: rgba(255,255,255,.90);
        padding: 7.3333333333333vw 0;
    }
    
    
    /* ========================================================================
    policy_text[sp]
    ========================================================================= */
    #suntory_contents .policy_text {
        margin-bottom: 8vw;
    }
    #suntory_contents .policy_text:last-child {
        margin-bottom: 0;
    }
    #suntory_contents .policy_text h2{
        margin-bottom: 5.3333333333333vw;
        font-size: 4.8vw;
        font-weight: bold;
        border-left: 2vw #992255 solid;
        padding-left: 6vw;
        line-height: 9.3333333333333vw;
    }
    #suntory_contents .policy_text p {
        margin: 0 6vw;
        font-size: 3.7333333333333vw;
        line-height: 1.785714285714286;
    }
    #suntory_contents .policy_text_sns p {
        margin: 0 6vw 6.6666666666667vw;
    }
    
     /* ========================================================================
    sns_link[sp]
    ========================================================================= */
    
    #suntory_contents .sns_link {
        margin:0 6vw;
    }
    #suntory_contents .sns_link li {
        margin-bottom: 6.6666666666667vw;
    }
    #suntory_contents .sns_link dl {
    }
    #suntory_contents .sns_link dt,
    #suntory_contents .sns_link dt a {
        font-size: 3.7333333333333vw;
        font-weight: bold;
        color: #992255;
        margin: 0 0 4.6666666666667vw;
    }
    #suntory_contents .sns_link dt a{
        text-decoration: underline;
    }
    #suntory_contents .sns_link dd {
    }
    #suntory_contents .sns_link dd a {
        height: 12vw;
        display: flex;
        align-items: center;
        background: #ebf4ff;
        font-size: 3.3333333333333vw;
        font-family: 'Roboto', sans-serif;
        color: #0077ff;
        padding-left: 6.6666666666667vw;
        box-sizing: border-box;
        position: relative;
        letter-spacing: -.025em;
    }
    #suntory_contents .sns_link dd a:hover {
        text-decoration: underline;
    }
    #suntory_contents .sns_link dd a::before {
        content: '';
        width: 4vw;
        height: 4vw;
        background: #0077ff;
        position: absolute;
        top: calc(50% - 2vw);
        left: 0;
    }
    #suntory_contents .sns_link dd a::after {
        content: '';
        vertical-align: middle;
        position: absolute;
        top: calc(50% - .3333333333333vw);
        left: 6px;
        width: .6666666666667vw;
        height: .6666666666667vw;
        margin: auto;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    

}


/*==================================================
pc
================================================== */
@media print, screen and (min-width:768px){

    #suntory_contents .sp_item {
        display: none;
    }
    
    /* ========================================================================
    policy_contents[pc]
    ========================================================================= */
    #suntory_contents .contents_container.policy_contents {
        background: rgba(255,255,255,.85);
        padding: 50px;
    }
    
    /* ========================================================================
    policy_text[pc]
    ========================================================================= */
    #suntory_contents .policy_text {
        margin-bottom: 30px;
    }
    #suntory_contents .policy_text:last-child {
        margin-bottom: 0;
    }
    #suntory_contents .policy_text h2{
        margin-bottom: 25px;
        font-size: 20px;
        font-weight: bold;
        border-left: 10px #992255 solid;
        padding-left: 20px;
        line-height: 35px;
    }
    #suntory_contents .policy_text p {
        font-size: 15px;
        line-height: 1.666666666666667;
    }
    #suntory_contents .policy_text_sns p {
        margin-bottom: 25px;
    }
    
    /* ========================================================================
    sns_link[pc]
    ========================================================================= */
    #suntory_contents .sns_link li {
        margin-bottom: 20px;
    }
    #suntory_contents .sns_link dl {
        display: flex;
        align-items: center;
    }
    #suntory_contents .sns_link dt,
    #suntory_contents .sns_link dt a {
        width: 310px;
        font-size: 15px;
        font-weight: bold;
        color: #992255;
        margin-right: 10px;
    }
    #suntory_contents .sns_link dt a {
        text-decoration: underline;
    }
    #suntory_contents .sns_link dd {
        width: 420px;
    }
    #suntory_contents .sns_link dd a {
        display: flex;
        align-items: center;
        width: 420px;
        height: 50px;
        background: #ebf4ff;
        font-size: 15px;
        font-family: 'Roboto', sans-serif;
        color: #0077ff;
        padding-left: 40px;
        box-sizing: border-box;
        position: relative;
    }
    #suntory_contents .sns_link dd a:hover {
        text-decoration: underline;
    }
    #suntory_contents .sns_link dd a::before {
        content: '';
        width: 20px;
        height: 20px;
        background: #0077ff;
        position: absolute;
        top: calc(50% - 10px);
        left: 0;
    }
    #suntory_contents .sns_link dd a::after {
        content: '';
        vertical-align: middle;
        position: absolute;
        top: calc(50% - 2px);
        left: 6px;
        width: 4px;
        height: 4px;
        margin: auto;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
}