@charset "utf-8";

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */
@media screen and (max-width:767px){

    /*------------------------------------------------------------
    [SP] article_list
    ------------------------------------------------------------ */
    #suntory_contents .talk_list {
        margin: 0 auto;
        width: 92vw;
        list-style: none;
    }
    #suntory_contents .talk_list li {
        width: 92vw;
        margin: 0 0 5.3333333333333vw;
        padding-bottom: 8vw;
        filter: drop-shadow(0 0.2666666666667vw 0.8vw rgba(0, 0, 0, .24));
    }
    #suntory_contents .talk_list li a {
        display: block;
        position: relative;
        background: #fff url(../img/bg_talk_list_top.png) repeat-x 0 0;
        background-size: auto 10.6666666666667vw;
        padding: 10.6666666666667vw 4vw 0;
        text-decoration: none;
        color: #000;
    }
    #suntory_contents .talk_list li picture {
        margin:0 auto 6.6666666666667vw;
        width: 84vw;
        height: 41.3333333333333vw;
        overflow: hidden;
        display: block;
    }
    #suntory_contents .talk_list li picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .talk_list li h2,
    #suntory_contents .talk_list li h3{
        margin-bottom: 5.3333333333333vw;
        font-size: 4.6666666666667vw;
        font-weight: bold;
    }
    #suntory_contents .talk_list li .date {
        margin-bottom: 5.3333333333333vw;
        font-size: 4.6666666666667vw;
        font-weight: bold;
        color: #777;
        text-align: left;
    }
    #suntory_contents .talk_list li .date .number {
        font-size: 4.9333333333333vw;
        font-family: 'Roboto',sans-serif;
    }
    #suntory_contents .talk_list li .date .day {
        font-size: 4vw;
    }
    #suntory_contents .talk_list li .text {
        font-size: 4.2666666666667vw;
        line-height: 1.666666666666667;
        color: #777;
        font-weight: normal;
        text-align: left;
    }
    
    #suntory_contents .talk_list li a::after {
        content: '';
        width: 92vw;
        height: 8vw;
        background: url(../img/bg_talk_list_bottom.png) no-repeat 0 bottom;
        background-size: 92vw 8vw;
        position: absolute;
        bottom: -8vw;
        left: 0;
    }
    
    /*------------------------------------------------------------
    [SP] article_talk
    ------------------------------------------------------------ */
    #suntory_contents .article_talk {
         color: #444;   
    }    
    #suntory_contents .article_talk .main_visual {
        margin: 0 auto;
        width: 100vw;
    }
    #suntory_contents .article_talk .main_visual .main_visual_container {
        width: 100vw;
        height: 50.6666666666667vw;
        position: relative;
    }
    #suntory_contents .article_talk .main_visual picture {
        width: 100%;
        border: none;
    }
    #suntory_contents .article_talk .main_visual picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .article_talk .main_visual h1 {
        width: 100vw;
        height: 20vw;
        position: absolute;
        bottom:0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.8vw;
        line-height: 1.25;
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-shadow: 0 0 2.6666666666667vw rgba(0,0,0,1);
    }
    #suntory_contents .article_talk .main_visual .text {
        margin: 5.3333333333333vw 8vw 0;
        font-size: 3.7333333333333vw;
        line-height: 2;
        text-align: center;
    }
    
    #suntory_contents .article_talk .lead {
        background: #f4f4f4;
        width: 92vw;
        margin: 5.3333333333333vw auto 8vw;
        box-sizing: border-box;
        padding: 5.3333333333333vw;
    }
    #suntory_contents .article_talk .lead p {
        font-size: 3.7333333333333vw;
        line-height: 2;
    }
    
    #suntory_contents .article_talk .talk_section {
        width: 92vw;
        margin: 0 auto 8vw;
    }
    #suntory_contents .article_talk .talk_section h2 {
        font-size: 5.3333333333333vw;
        line-height: 1.428571428571429;
        font-weight: bold;
        border-left: 2.6666666666667vw #bb0000 solid;
        padding: 4vw 0 4vw 5.3333333333333vw;
        margin-bottom: 7.3333333333333vw;
    }
    
    #suntory_contents .article_talk .talk_section h3 {
        margin: 0 auto 8vw;
        width: 92vw;
        font-size: 4.2666666666667vw;
        font-weight: bold;
        line-height: 1.777777777777778;
        color: #bb0000;
    }
    #suntory_contents .article_talk .talk_section h3::before {
        content: '';
        width: 6.6666666666667vw;
        height: 1px;
        background: #bb0000;
        display: inline-block;
        align-items: center;
        margin: 0 0.5333333333333vw .375em 0;
    }
    
    #suntory_contents .article_talk .talk_section table {
        width: 92vw;
        margin: 0 auto 8vw;
    }
    #suntory_contents .article_talk .talk_section th {
        width: 13.043478260869565%;
        white-space: nowrap;
        font-size: 4vw;
        line-height: 2;
        font-weight: normal;
        padding: 0 4vw 20px 0;
        text-align: left;
    }
    #suntory_contents .article_talk .talk_section .player01 {
        color: #4466bb;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player02 {
        color: #449966;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player03 {
        color: #dd5588;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player04 {
        color: #dd7722;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player_all {
        color: #666;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section td {
        width: 86.956521739130435%;
        font-size: 4vw;
        line-height: 2;
        padding: 0 0 5.3333333333333vw 0;
    }
    
    #suntory_contents .article_talk .talk_section table tr:last-child th {
        padding: 0 4vw 0 0;
    }
    #suntory_contents .article_talk .talk_section table tr:last-child td {
        padding: 0;
    }
    
    
    #suntory_contents .article_talk .img_container,
    #suntory_contents .article_talk .img_container_twin {
        width: 84vw;
        margin:0 auto 8vw;
    }
    #suntory_contents .article_talk .img_container picture {
        margin-bottom: 5.3333333333333vw;
        display: block;
        text-align: center;
    }
    #suntory_contents .article_talk .img_container picture img,
    #suntory_contents .article_talk .img_container_twin .picture_wrap picture img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .article_talk .img_container_twin .picture_wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 5.3333333333333vw;
        border: 1px #dddddd solid;
    }
    #suntory_contents .article_talk .img_container_twin .picture_wrap picture {
        max-width: 50%;
        margin: 0;
    }
    #suntory_contents .article_talk .img_container .caption,
    #suntory_contents .article_talk .img_container_twin .caption {
        font-size: 3.7333333333333vw;
        line-height: 2;
        text-align: center;
    }
    
    #suntory_contents .article_talk .talk_note {
        margin: 0 auto 4vw;
        width: 92vw;
        font-size: 4vw;
        line-height: 1.777777777777778;
    }
    
    #suntory_contents .article_talk .cmt_top {
        vertical-align: top;
        font-size: 2vw;
    }
    
    #suntory_contents .article_talk .cmt {
        font-size: 80%;
    }
    
    /*------------------------------------------------------------
    [SP] editorial_note
    ------------------------------------------------------------ */
    #suntory_contents .article_talk .editorial_note {
        background: #f4f4f4;
        width: 92vw;
        margin: 0 auto 13.3333333333333vw;
        box-sizing: border-box;
        padding: 5.3333333333333vw;
    }
    #suntory_contents .article_talk .editorial_note .text {
        font-size: 3.7333333333333vw;
        line-height: 2;
    }
    #suntory_contents .article_talk .editorial_note .date {
        font-size: 3.7333333333333vw;
        line-height: 2;
        text-align: right;
    }
    
    #suntory_contents .article_talk .extra_note {
        margin: 0 auto 4vw;
        padding: 0;
        width: 92vw;
        font-size: 3.7333333333333vw;
        line-height: 2;
        text-align: right;
        box-sizing: border-box;
    }
    
    
    /*------------------------------------------------------------
    [SP] extra_talk
    ------------------------------------------------------------ */
    #suntory_contents .extra_talk {
        padding: 13.3333333333333vw 0 9.3333333333333vw;
        background: #171717;
    }
    #suntory_contents .extra_talk p {
        margin-bottom: 4vw;
        font-size: 2.6666666666667vw;
        font-weight: bold;
        text-align: center;
        color: #fff;
    }
    #suntory_contents .extra_talk h2 {
        margin-bottom: 8vw;
        font-size: 8vw;
        font-weight: bold;
        font-family: 'Roboto',sans-serif;
        text-align: center;
        color: #fff;
    }
    
    #suntory_contents .extra_talk .btn_list_talk a {
        margin: 0 auto;
        width: 62.666666666666667vw;
        height: 12vw;
        padding-left: 2.9333333333333vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #bb0000 url(../img/arrow_prev.png) no-repeat 5.3333333333333vw center;
        background-size: 1.6vw auto;
        color: #fff;
        font-size: 4vw;
        text-decoration: none;
        box-sizing: border-box;
    }

    
    
}
/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print, screen and (min-width:768px) {
    

    
    /*------------------------------------------------------------
    [PC] talk_list
    ------------------------------------------------------------ */
    #suntory_contents .talk_list {
        margin: 0 auto;
        width: 1080px;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
    }
    #suntory_contents .talk_list li {
        width: 340px;
        margin: 0 30px 30px 0;
        padding-bottom: 30px;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .10));
    }
    #suntory_contents .talk_list li:nth-child(3n) {
        margin: 0 0 30px;
    }

    #suntory_contents .extra_talk .talk_list li {
        margin: 0 30px 100px 0;
    }
    #suntory_contents .extra_talk .talk_list li:nth-child(3n) {
        margin: 0 0 100px;
    }
    
    #suntory_contents .talk_list li a {
        display: block;
        position: relative;
        background: #fff url(../img/bg_talk_list_top.png) repeat-x 0 0;
        background-size: 2px auto;
        padding: 40px 20px 0;
        text-decoration: none;
        color: #000;
    }
    #suntory_contents .talk_list li picture {
        margin:0 auto 20px;
        width: 300px;
        height: 160px;
        overflow: hidden;
        display: block;
    }
    #suntory_contents .talk_list li picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        transition: all .5s ease;
    }
    #suntory_contents .talk_list li a:hover picture img {
        opacity: .75;
        transform: scale(1.05);
    }
    
    #suntory_contents .talk_list li h2,
    #suntory_contents .talk_list li h3{
        margin-bottom: 20px;
        font-size: 17px;
        font-weight: bold;
    }
    #suntory_contents .talk_list li .date {
        margin-bottom: 15px;
        font-size: 17px;
        font-weight: bold;
        color: #777;
        text-align: left;
    }
    #suntory_contents .talk_list li .date .number {
        font-size: 18px;
        font-family: 'Roboto',sans-serif;
    }
    #suntory_contents .talk_list li .date .day {
        font-size: 12px;
    }
    #suntory_contents .talk_list li .text {
        font-size: 15px;
        line-height: 1.666666666666667;
        color: #777;
        font-weight: normal;
        text-align: left;
    }
    #suntory_contents .talk_list li a:hover .text {
        text-decoration: underline;
    }
    
    #suntory_contents .talk_list li a::after {
        content: '';
        width: 340px;
        height: 30px;
        background: url(../img/bg_talk_list_bottom.png) no-repeat 0 bottom;
        background-size: 340px 30px;
        position: absolute;
        bottom: -30px;
        left: 0;
    }
    
    
    /*------------------------------------------------------------
    [PC] article_talk
    ------------------------------------------------------------ */
    #suntory_contents .article_talk {
         color: #444;   
    }    
    #suntory_contents .article_talk .main_visual {
        margin: 0 auto;
        width: 1160px;
    }
    #suntory_contents .article_talk .main_visual .main_visual_container {
        width: 1160px;
        height: 580px;
        position: relative;
    }
    #suntory_contents .article_talk .main_visual picture {
        width: 1160px;
    }
    #suntory_contents .article_talk .main_visual picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .article_talk .main_visual h1 {
        width: 1160px;
        height: 230px;
        position: absolute;
        bottom:0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 56px;
        line-height: 1.25;
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-shadow: 0 0 20px rgba(0,0,0,1);
    }
    #suntory_contents .article_talk .main_visual .text {
        margin: 25px 0 0;
        font-size: 16px;
        line-height: 2;
        text-align: center;
    }
    
    #suntory_contents .article_talk .lead {
        background: #f4f4f4;
        width: 1080px;
        margin: 25px auto 40px;
        box-sizing: border-box;
        padding: 50px;
    }
    #suntory_contents .article_talk .lead p {
        font-size: 16px;
        line-height: 2;
    }
    #suntory_contents .article_talk .talk_section {
        width: 1080px;
        margin: 0 auto 40px;
    }
    #suntory_contents .article_talk .talk_section h2 {
        font-size: 28px;
        line-height: 1.428571428571429;
        font-weight: bold;
        border-left: 10px #bb0000 solid;
        padding: 15px 0 15px 40px;
        margin-bottom: 30px;
    }
    
    #suntory_contents .article_talk .talk_section h3 {
        margin: 0 auto 30px;
        width: 980px;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.777777777777778;
        color: #bb0000;
    }
    #suntory_contents .article_talk .talk_section h3::before {
        content: '';
        width: 28px;
        height: 1px;
        background: #bb0000;
        display: inline-block;
        align-items: center;
        margin: 0 4px .375em 0;
    }
    
    #suntory_contents .article_talk .talk_section table {
        width: 980px;
        margin: 0 auto 40px;
    }
    #suntory_contents .article_talk .talk_section th {
        width: 6.122448979591837%;
        white-space: nowrap;
        font-size: 16px;
        line-height: 2;
        font-weight: normal;
        padding: 0 10px 20px 0;
        text-align: left;
    }
    #suntory_contents .article_talk .talk_section .player01 {
        color: #4466bb;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player02 {
        color: #449966;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player03 {
        color: #dd5588;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player04 {
        color: #dd7722;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section .player_all {
        color: #666;
        font-weight: bold;
    }
    #suntory_contents .article_talk .talk_section td {
        width: 93.877551020408163%;
        font-size: 16px;
        line-height: 2;
        padding: 0 0 20px 0;
    }
    
    #suntory_contents .article_talk .talk_section table tr:last-child th {
        padding: 0 10px 0 0;
    }
    #suntory_contents .article_talk .talk_section table tr:last-child td {
        padding: 0;
    }
    
    
    #suntory_contents .article_talk .img_container,
    #suntory_contents .article_talk .img_container_twin{
        width: 980px;
        margin:0 auto 60px;
    }
    #suntory_contents .article_talk .img_container picture {
        margin-bottom: 25px;
        display: block;
        text-align: center;
    }
    #suntory_contents .article_talk .img_container picture img,
    #suntory_contents .article_talk .img_container_twin .picture_wrap picture img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    
    #suntory_contents .article_talk .img_container_twin .picture_wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }
    #suntory_contents .article_talk .img_container_twin .picture_wrap picture {
        max-width: 40%;
        margin: 0 20px;
    }
    #suntory_contents .article_talk .img_container .caption,
    #suntory_contents .article_talk .img_container_twin .caption{
        font-size: 16px;
        line-height: 2;
        text-align: center;
    }
    
    #suntory_contents .article_talk .talk_note {
        margin: 0 auto 30px;
        width: 1080px;
        font-size: 16px;
        line-height: 1.777777777777778;
    }

    #suntory_contents .article_talk .cmt_top {
        vertical-align: top;
        font-size: 8px;
    }
    
    #suntory_contents .article_talk .cmt {
        font-size: 80%;
    }
    
    /*------------------------------------------------------------
    [PC] editorial_note
    ------------------------------------------------------------ */
    #suntory_contents .article_talk .editorial_note {
        background: #f4f4f4;
        width: 1080px;
        margin: 0 auto 40px;
        box-sizing: border-box;
        padding: 50px;
    }
    #suntory_contents .article_talk .editorial_note .text {
        font-size: 16px;
        line-height: 2;
    }
    #suntory_contents .article_talk .editorial_note .date {
        font-size: 16px;
        line-height: 2;
        text-align: right;
    }
    
    #suntory_contents .article_talk .extra_note {
        margin: 0 auto;
        padding: 0 50px;
        width: 1080px;
        font-size: 16px;
        line-height: 2;
        text-align: right;
        box-sizing: border-box;
    }
    
    /*------------------------------------------------------------
    [PC] extra_talk
    ------------------------------------------------------------ */
    #suntory_contents .extra_talk {
        background: #171717;
        margin: 100px 0 0;
        padding: 55px 0 100px;
        position: relative;
    }
    #suntory_contents .extra_talk p {
        margin-bottom: 20px;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        color: #fff;
    }
    #suntory_contents .extra_talk h2 {
        margin-bottom: 60px;
        font-size: 44px;
        font-weight: bold;
        font-family: 'Roboto',sans-serif;
        text-align: center;
        color: #fff;
    }
    
    #suntory_contents .extra_talk .btn_list_talk a {
        margin: 0 auto;
        width: 360px;
        height: 60px;
        padding-left: 23px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #bb0000 url(../img/arrow_prev.png) no-repeat 30px center;
        background-size: 7px auto;
        color: #fff;
        font-size: 20px;
        text-decoration: none;
        box-sizing: border-box;
    }
    #suntory_contents .extra_talk .btn_list_talk a:hover {
        background: #ee0000 url(../img/arrow_prev.png) no-repeat 30px center;
        background-size: 7px auto;
    }
    
    
}