@charset "utf-8";

/*==================================================
sp
================================================== */

/* ========================================================================
[sp]lead
========================================================================= */
#suntory_contents .global_contents .lead {
    margin:0 auto 8vw;
    width:92vw;
}
#suntory_contents .global_contents .lead p {
    font-size:4vw;
    line-height:1.7;
}

/* ========================================================================
[sp]contents_list
========================================================================= */
#suntory_contents .global_contents .contents_list {
    width:92vw;
    margin:0 auto;
    padding:0;
    list-style: none;
}
#suntory_contents .global_contents .contents_list li {
    margin-bottom:8vw;
}
#suntory_contents .global_contents .contents_list li:last-child {
    margin:0;
}
#suntory_contents .global_contents .contents_list li a {
    text-decoration: none;
    color:#222;
    display: block;
    box-shadow:0 0 1.6vw rgba(0,0,0,.15);
    padding:5.866666666666667vw 5.866666666666667vw 8vw;
}
#suntory_contents .global_contents .contents_list .title {
    margin-bottom:5.333333333333333vw;
    padding-left:4vw;
    position:relative;
}
#suntory_contents .global_contents .contents_list .title::before {
    content: '';
    width:6.4vw;
    height: 9.6vw;
    background:#881133;
    position:absolute;
    top:calc(50% - 4.8vw);
    left:-5.866666666666667vw;
}
#suntory_contents .global_contents .contents_list .title::after {
    content: '';
    width: 1.6vw;
    height: 1.6vw;
    margin: auto;
    border-top: 0.266666666666667vw solid #fff;
    border-right: 0.266666666666667vw solid #fff;
    transform: rotate(45deg);
    position: absolute;
    left:-4vw;
    top: calc(50% - 0.8vw);
    z-index: 10;
}
#suntory_contents .global_contents .contents_list h2 {
    font-size:4.8vw;
    line-height:1.5;
}
#suntory_contents .global_contents .contents_list h2 .sub {
    vertical-align: sub;
    font-size:3.733333333333333vw;
}
#suntory_contents .global_contents .contents_list h2 i {
    font-style: italic;
}
#suntory_contents .global_contents .contents_list h3 {
    font-size:3.733333333333333vw;
    line-height:1.3;
}
#suntory_contents .global_contents .contents_list p {
    font-size:4vw;
    line-height:1.7;
}
#suntory_contents .global_contents .contents_list p .sub {
    vertical-align: sub;
    font-size:3.2vw;
}
#suntory_contents .global_contents .contents_list picture {
    margin:5.6vw auto 0;
    width:69.333333333333333vw;
    display: block;
}
#suntory_contents .global_contents .contents_list picture img {
    width:100%;
    height:auto;
    vertical-align: bottom;
}


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

    /* ========================================================================
    [pc]lead
    ========================================================================= */
    #suntory_contents .global_contents .lead {
        margin:0 auto 40px;
        width:1084px;
    }
    #suntory_contents .global_contents .lead p {
        font-size:17px;
        line-height:1.7;
    }
    
    /* ========================================================================
    [pc]contents_list
    ========================================================================= */
    #suntory_contents .global_contents .contents_list {
        width:1084px;
    }
    
    #suntory_contents .global_contents .contents_list li {
        margin-bottom:30px;
    }
    #suntory_contents .global_contents .contents_list li:last-child {
        margin:0;
    }
    #suntory_contents .global_contents .contents_list li a {
        text-decoration: none;
        color:#222;
        display: flex;
        justify-content: space-between;
        box-shadow:0 0 6px rgba(0,0,0,.15);
        padding:30px;
    }
    #suntory_contents .global_contents .contents_list li a:hover {
        background:#FFFCF3;
    }
    #suntory_contents .global_contents .contents_list .text {
        width:700px;
    }
    #suntory_contents .global_contents .contents_list .title {
        margin-bottom:20px;
        padding-left:40px;
        position:relative;
        display:flex;
        align-items: center;
    }
    #suntory_contents .global_contents .contents_list .title.vertical {
        display:block;
    }
    #suntory_contents .global_contents .contents_list .title::before {
        content: '';
        width:24px;
        height: 36px;
        background:#881133;
        position:absolute;
        top:calc(50% - 18px);
        left:0;
    }
    #suntory_contents .global_contents .contents_list li a:hover .title::before {
        background:#A14;
    }
    
    
    #suntory_contents .global_contents .contents_list .title::after {
        content: '';
        width: 6px;
        height: 6px;
        margin: auto;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
        position: absolute;
        left:8px;
        top: calc(50% - 3px);
        z-index: 10;
    }
    #suntory_contents .global_contents .contents_list h2 {
        font-size:20px;
        line-height:1.4;
    }
    #suntory_contents .global_contents .contents_list h2 .sub {
        vertical-align: sub;
        font-size:16px;
    }
    #suntory_contents .global_contents .contents_list h3 {
        margin-left:20px;
        font-size:17px;
        line-height:1.3;
    }
    #suntory_contents .global_contents .contents_list .title.vertical h3 {
        margin:0;
    }
    #suntory_contents .global_contents .contents_list p {
        font-size:17px;
        line-height:1.7;
    }
    #suntory_contents .global_contents .contents_list p .sub {
        font-size:14px;
        vertical-align: sub;
    }
    #suntory_contents .global_contents .contents_list picture {
        margin:0 ;
        width:270px;
    }
    #suntory_contents .global_contents .contents_list picture img {
        width:100%;
        height:auto;
    }
    
    #suntory_contents .global_contents .contents_list li a:hover h2,
    #suntory_contents .global_contents .contents_list li a:hover h3 {
        color:rgb(170, 17, 68);
    }
    
    
}