@charset "utf-8";

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

    /*------------------------------------------------------------
    [SP] main_visual
    ------------------------------------------------------------ */
    #suntory_contents .main_visual {
        background: #EBE6E1 url(../img/piccolo/mv_piccolo_sp.webp) no-repeat center 0;
        background-size: auto 80vw;
        height: 80vw;
        display: flex;
        align-items: flex-end;
        position: relative;
    }
    .no-webp #suntory_contents .main_visual {
        background: #EBE6E1 url(../img/piccolo/mv_piccolo_sp.jpg) no-repeat center 0;
        background-size: auto 80vw;
    }
    #suntory_contents .main_visual .title_bar {
        width: 100vw;
        background: rgba(72,51,34,.85);
        height: 14.4vw;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .main_visual .title_bar h1 {
        margin: 0 0 0 4.266666666666667vw;
        height: 7.466666666666667vw;
        font-size: 4.266666666666667vw;
        font-weight: 400;
        color: #fff;
        background: url(../img/piccolo/piccolo.svg) no-repeat 0 0;
        background-size: 24vw auto;
        padding-left: 29.333333333333333vw;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
    } 
    #suntory_contents .main_visual .note {
        margin: 0 auto;
        width: 100vw;
    }
    #suntory_contents .main_visual .note span {
        margin: 0 0 1.6vw 2.4vw;
        background: url(../img/icon_eu.svg) no-repeat 0 center;
        background-size: 3.6vw 2.4vw;
        padding-left: 4.533333333333333vw;
        display: block;
        line-height: 2.4vw;
        font-size: 2.133333333333333vw;
        color: #444444;
    }
    
    /*------------------------------------------------------------
    [SP] products_nav
    ------------------------------------------------------------ */
    #suntory_contents .products_nav {
        margin: 8vw 6.4vw 0;
    }
    #suntory_contents .products_nav .products_container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom: 4vw;
        list-style: none;
    }
    #suntory_contents .products_nav .products_container .product {
        margin: 0 7.2vw 8vw 0;
        width: 40vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #suntory_contents .products_nav .products_container .product:nth-child(2n) {
        margin: 0 0 8vw 0;
    }
    #suntory_contents .products_nav .products_container .product picture {
        margin: 0 3.2vw 0 0;
        width: 8vw;
        height: 23.2vw;
        overflow: hidden;
        padding: 0;
        text-align: center;
        box-sizing: border-box;
        position: relative;
    }
    #suntory_contents .products_nav .products_container .product picture img {
        width: 8vw;
        height: auto;
        vertical-align: bottom;
        position: absolute;
        bottom: 2vw;
        left: 0;
    }
    #suntory_contents .products_nav .products_container .product .data {
        width: 28.8vw; 
        height: 30vw;
        position: relative;
    }
    #suntory_contents .products_nav .products_container .product .data h2 {
        margin: 3.2vw 0 5vw;
        font-size: 3.466666666666667vw;
        line-height: 1.3;
        white-space: nowrap;
    }
    #suntory_contents .products_nav .products_container .product .data h2 .volume {
        font-size: 3.466666666666667vw;
        font-weight: normal;
        margin-top: 0.666666666666667vw;
        display: block;
    }
    #suntory_contents .products_nav .products_container .btn_detail a {
        width: 28.8vw;
        height: 9.6vw;
        background: #B49655 url(../img/icon_tri_down.svg) no-repeat 4vw center;
        background-size: 1.6vw auto;
        border-radius: 5.6vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.466666666666667vw;
        color: #fff;
        text-decoration: none;
        box-sizing: border-box;
        position: absolute;
        bottom:0;
    }
    #suntory_contents .products_nav .products_container .online_shop {
        margin: 0;
        width: 73.6vw; 
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
    }
    #suntory_contents .products_nav .online_shop {
        margin: 0;
        padding-bottom: 2.4vw;
        width: 40vw;
        background: #981C41;
        border-radius: 1.6vw;
    }
    #suntory_contents .products_nav .online_shop dt {
        width: 40vw;
        height: 8vw;
        font-size: 2.933333333333333vw;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(../img/icon_cart.svg) no-repeat 4.8vw center;
        background-size: 3.2vw auto;
        box-sizing: border-box;
        padding-left: 4.8vw;
    }
    #suntory_contents .products_nav .online_shop dd {
        margin: 0 auto;
        width: 35.2vw;
    }
    #suntory_contents .products_nav .ec_buttons_container {
        list-style: none;
    }
    #suntory_contents .products_nav .ec_buttons_container .ec_button a {
        margin-bottom: 2.4vw;
        display: block;
        width: 35.2vw;
        height: 12vw;
        border-radius: 1.6vw;
        text-indent: -9999px;
        box-sizing: border-box;
    }
    #suntory_contents .products_nav .ec_buttons_container .ec_button:last-child a {
        margin: 0 auto;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_amazon a {
        background: #fff url(../img/shop_amazon.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_rakuten a {
        background: #fff url(../img/shop_rakuten.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_cave_de_vin a {
        background: #fff url(../img/shop_wine.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_lohaco a {
        background: #fff url(../img/shop_lohaco.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_yahoo a {
        background: #fff url(../img/shop_yahoo.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .products_nav .products_container .btn_shop a {
        width: 28.8vw;
        height: 9.6vw;
        background: #981C41 url(../img/icon_cart.svg) no-repeat 3.2vw center;
        background-size: 3.2vw auto;
        border-radius: 5.6vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.2vw;
        line-height: 1.1;
        text-align: center;
        padding-left: 4.8vw;
        box-sizing: border-box;
        color: #fff;
        text-decoration: none;
    }
    
    /*------------------------------------------------------------
    [SP] about
    ------------------------------------------------------------ */
    #suntory_contents .about {
    }
    #suntory_contents .about .inner {
    }
    #suntory_contents .about .img {
        background: #151D30 url(../img/piccolo/img_piccolo01.jpg) no-repeat 0 0;
        background-size: 100vw auto;
        width: 100vw;
        height: 81.6vw;
    }
    .no-webp #suntory_contents .about .img {
        background: #151D30 url(../img/piccolo/img_piccolo01.jpg) no-repeat 0 0;
        background-size: 100vw auto;
    }

    #suntory_contents .about .inner .text {
        background: #F5F2F0 url(../img/organico/bg_recipe_detail.svg) no-repeat right 4vw bottom 8vw;
        background-size: 40vw auto;
        padding: 12vw 5.6vw 16vw 4vw;
    }
    #suntory_contents .about .inner .text h2 {
        font-size: 5.333333333333333vw;
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: 3.2vw;
    }
    #suntory_contents .about .inner .text h2 .sup {
        font-size: 2.4vw;
        vertical-align: top;
    }
    #suntory_contents .about .inner .text p.body {
        font-size: 3.733333333333333vw;
        line-height: 1.8;
    }
    #suntory_contents .about .inner .text p.body .sup {
        font-size: 2.133333333333333vw;
        vertical-align: top;
    }
    #suntory_contents .about .inner .text p.note {
        font-size: 3.2vw;
        line-height: 1.5;
    }
    #suntory_contents .about .inner .text p + p {
        margin-top: 5.6vw;
    }
    
    /*------------------------------------------------------------
    [SP] history
    ------------------------------------------------------------ */
    #suntory_contents .history {
    }
    #suntory_contents .history .inner {
        display: flex;
        flex-direction: column;
    }
    #suntory_contents .history .inner .text {
        background: #F5F2F0 url(../img/organico/bg_recipe_detail.svg) no-repeat right 4vw bottom 8vw;
        background-size: 40vw auto;
        padding: 12vw 5.6vw 16vw 4vw;
        order: 2;
    }
    #suntory_contents .history .inner .text h2 {
        font-size: 5.333333333333333vw;
        font-weight: bold;
        margin-bottom: 5.6vw;
    }
    #suntory_contents .history .inner .text p.body {
        font-size: 3.733333333333333vw;
        line-height: 1.8;
    }
    #suntory_contents .history .inner .text p.body .sup {
        font-size: 2.133333333333333vw;
        vertical-align: top;
    }
    #suntory_contents .history .inner .text p.note {
        font-size: 3.2vw;
        line-height: 1.5;
    }
    #suntory_contents .history .inner .text p + p {
        margin-top: 5.6vw;
    }
    
    #suntory_contents .history .inner .text p .icon {
        margin: 0 8vw 8vw 0;
        float: left;
        width: 24vw;
    }
    #suntory_contents .history .inner .text p .icon img {
        width: 24vw;
        height: 21.6vw;
    }
    #suntory_contents .history .img {
        background: url(../img/piccolo/img_piccolo02.jpg) no-repeat 0 0;
        background-size: 100vw auto;
        width: 100vw;
        height: 81.6vw;
        order: 1;
    }
    .no-webp #suntory_contents .history .img {
        background: #151D30 url(../img/piccolo/img_piccolo02.jpg) no-repeat 0 0;
        background-size: 100vw auto;
    }
    
    /*------------------------------------------------------------
    [SP] feature
    ------------------------------------------------------------ */
    #suntory_contents .feature {
        margin: 0 auto;
        width: 92vw;
    }
    #suntory_contents .feature_item {
        margin-bottom: 8vw;
        border: 1px #3B7204 solid;
    }
    #suntory_contents .feature_item.feature_item03 {
        margin-bottom: 16vw;
    }
    #suntory_contents .feature_item dt {
        background: #3B7204;
        box-sizing: border-box;
        padding: 8vw 5.6vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #suntory_contents .feature_item dt p {
        font-size: 4.8vw;
        font-weight: normal;
        line-height: 1.5;
        color: #fff;
    }
    #suntory_contents .feature_item dt .feature_icon {
        margin: 0 0 0;
        width: 24vw;
        display: block;
    }
    #suntory_contents .feature_item dt .feature_icon img {
        width: 24vw;
        height: 24vw;
        vertical-align: bottom;
    }
    #suntory_contents .feature_item dd {
        box-sizing: border-box;
        padding: 5.6vw;
    }
    #suntory_contents .feature_item dd p {
        font-size: 3.733333333333333vw;
        line-height: 1.8;
    }
    #suntory_contents .feature_item dd picture {
        margin: 5.6vw auto 0;
    }
    #suntory_contents .feature_item dd picture img {
        width: 100%;
        height: auto;
    }
    #suntory_contents .feature_item.feature_item01 dd picture {
        width: 72vw;
    }
    #suntory_contents .feature_item.feature_item03 dd picture {
        width: 49.066666666666667vw;
    }
    #suntory_contents .feature_item dd picture.common_item {
        display: block;
        width: 49.066666666666667vw;
    }
    
    #suntory_contents .feature h3 {
        font-size: 3.733333333333333vw;
        line-height: 1.8;
        font-weight: bold;
        color: #3B7204;
        text-align: center;
    }
    #suntory_contents .feature h2 {
        font-size: 4.8vw;
        line-height: 1.4;
        font-weight: bold;
        color: #3B7204;
        text-align: center;
    }
    
    /*------------------------------------------------------------
    [SP] lineup
    ------------------------------------------------------------ */
    #suntory_contents .lineup {
        background: url(../img/organico/img_subfooter_sp.webp) no-repeat center bottom;
        background-size: auto 32vw;
        padding-bottom: 32vw;
    }
    .no-webp #suntory_contents .lineup {
        background: url(../img/organico/img_subfooter_sp.jpg) no-repeat center bottom;
        background-size: auto 32vw;
    }
    #suntory_contents .lineup .product_list {
        margin: 0 4vw;
    }
    #suntory_contents .lineup .product_list .product {
        display: flex;
        flex-wrap: wrap;
        padding: 12vw 0 8vw;
        box-sizing: border-box;
        border-bottom: 0.266666666666667vw #EBE6E1 solid;
    }
    #suntory_contents .lineup .product_list .product:last-child {
        border-bottom: none;
    }
    #suntory_contents .lineup .product picture {
        margin: 0 2.666666666666667vw 5.6vw 0;
        width:25.333333333333333vw;
        height: 48vw;
        overflow: hidden;
        text-align: center;
        position: relative;
    }
    #suntory_contents .lineup .product picture img {
        width: 17.6vw;
        height: auto;
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
        left: 2vw;
    }
    
    #suntory_contents .lineup .product .data {
        width: 64vw;
    }
    #suntory_contents .lineup .product .data h2 {
        margin-bottom: 3.2vw;
        font-size: 4.8vw;
        font-weight: bold;
        line-height: 1.5;
    }
    #suntory_contents .lineup .product .data .name {
        margin-bottom: 2.666666666666667vw;
        font-size: 3.733333333333333vw;
        font-weight: bold;
        font-family: 'Arial',sans-serif;
    }
    #suntory_contents .lineup .product .data .volume {
        margin-bottom: 5.333333333333333vw;
        font-size: 3.466666666666667vw;
    }
    #suntory_contents .lineup .product .data .text {
        margin-bottom: 5.333333333333333vw;
        font-size: 3.466666666666667vw;
        line-height: 1.5;
    }

    #suntory_contents .lineup .product .data .chart {
        margin-bottom: 6.4vw;
        width: 64vw;
    }
    #suntory_contents .lineup .product .data .chart p {
        width: 64vw;
        height: 4.8vw;
        text-indent: -9999px;
    }
    #suntory_contents .lineup .product .data .chart p + p {
        margin: 1.6vw 0 0;
    }
    #suntory_contents .lineup .product .data .chart .body_light {
        background: url(../img/chart/body_light_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .body_light_medium {
        background: url(../img/chart/body_light_medium_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .body_medium {
        background: url(../img/chart/body_midium_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .body_midium_full {
        background: url(../img/chart/body_midium_full_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .body_full {
        background: url(../img/chart/body_full_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    
    #suntory_contents .lineup .product .data .chart .taste_sweet {
        background: url(../img/chart/taste_sweet_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_sweet_slightly {
        background: url(../img/chart/taste_sweet_slightly_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_sweet_faintly {
        background: url(../img/chart/taste_sweet_faintly_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_dry_slightly {
        background: url(../img/chart/taste_dry_slightly_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_dry {
        background: url(../img/chart/taste_dry_sp.svg) no-repeat 0 0;
        background-size: 64vw auto;
    }
    
    #suntory_contents .lineup .product .btn_shop a {
        width: 50.666666666666667vw;
        height: 12vw;
        background: #981C41 url(../img/icon_cart.svg) no-repeat 4.8vw center;
        background-size: 4vw auto;
        border-radius: 6.133333333333333vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.733333333333333vw;
        padding-left: 5.333333333333333vw;
        box-sizing: border-box;
        color: #fff;
        text-decoration: none;
    }
    #suntory_contents .lineup .product .shop_container {
        margin: 0 auto;
/*
        padding-bottom: 3.2vw;
        width: 84vw;
        background: #981C41;
        border-radius: 1.6vw;
*/
        background: none;
    }
    #suntory_contents .lineup .online_shop dt {
        height: 9.333333333333333vw;
        font-size: 3.466666666666667vw;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(../img/icon_cart.svg) no-repeat 25.333333333333333vw center;
        background-size: 3.2vw auto;
        box-sizing: border-box;
        padding-left: 6.933333333333333vw;
    }
    #suntory_contents .lineup .online_shop .note {
        margin: 0 4vw 3.2vw;
        font-size: 2.933333333333333vw;
        line-height: 1.363636363636364;
        color: #fff;
    }
    #suntory_contents .lineup .ec_buttons_container {
        margin: 0 auto;
        list-style: none;
    }
    #suntory_contents .lineup .ec_buttons_container .ec_button a {
        margin: 0 auto 3.2vw;
        display: block;
        width: 48vw;
        height: 12vw;
        border-radius: 1.6vw;
        text-indent: -9999px;
        box-sizing: border-box;
    }
    #suntory_contents .lineup .ec_buttons_container .ec_button:last-child a {
        margin: 0 auto;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_amazon a {
        background: #fff url(../img/shop_amazon.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_rakuten a {
        background: #fff url(../img/shop_rakuten.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_cave_de_vin a {
        background: #fff url(../img/shop_wine.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_lohaco a {
        background: #fff url(../img/shop_lohaco.png) no-repeat center center;
        background-size: auto 12vw;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_yahoo a {
        background: #fff url(../img/shop_yahoo.png) no-repeat center center;
        background-size: auto 12vw;
    }
    
    
    
}



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

    /*------------------------------------------------------------
    [PC] main_visual
    ------------------------------------------------------------ */
    #suntory_contents .main_visual {
        background: #EBE6E1 url(../img/piccolo/mv_piccolo_pc.webp) no-repeat center 0;
        background-size: auto 650px;
        height: 650px;
        display: flex;
        align-items: flex-end;
        position: relative;
    }
    .no-webp #suntory_contents .main_visual {
        background: #EBE6E1 url(../img/piccolo/mv_piccolo_pc.jpg) no-repeat center 0;
        background-size: auto 650px;
    }
    #suntory_contents .main_visual .title_bar {
        width: 100%;
        background: rgba(72,51,34,.85);
        height: 70px;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .main_visual .title_bar h1 {
        margin: 0 auto;
        width: 1160px;
        height: 34px;
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        background: url(../img/piccolo/piccolo.svg) no-repeat 0 0;
        background-size: 110px auto;
        padding-left: 129px;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
    } 
    #suntory_contents .main_visual .note {
        margin: 0 auto;
        width: 1160px;
    }
    #suntory_contents .main_visual .note span {
        margin: 0 0 5px 10px;
        background: url(../img/icon_eu.svg) no-repeat 0 center;
        background-size: 19px 13px;
        padding-left: 24px;
        display: block;
        line-height: 13px;
        font-size: 8px;
        color: #444444;
    }
    
    /*------------------------------------------------------------
    [PC] products_nav
    ------------------------------------------------------------ */
    #suntory_contents .products_nav {
        margin: 50px auto;
        width: 1160px;
    }
    #suntory_contents .products_nav .products_container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    #suntory_contents .products_nav .products_container .product {
        width: 290px;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
    }    
    #suntory_contents .products_nav .products_container .product picture {
        width: 40px;
        height: 110px;
        position: relative;
        margin: 0 20px 15px 30px;
        padding: 0;
        box-sizing: border-box;
    }
    #suntory_contents .products_nav .products_container .product picture img {
        width: 40px;
        height: auto;
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #suntory_contents .products_nav .products_container .product .data {
        width: 170px;
        height: 110px;
        position: relative;
    }
    #suntory_contents .products_nav .products_container .product .data h2 {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 18px;
    }
    #suntory_contents .products_nav .products_container .product .data h2 .volume {
        font-size: 14px;
        font-weight: normal;
        display: block;
        margin-top: 5px;
    }
    #suntory_contents .products_nav .products_container .ec_buttons_container {
        margin: 10px 0 0;
        list-style: none;
    }
    #suntory_contents .products_nav .products_container .btn_detail a {
        width: 170px;
        height: 40px;
        background: #B49655 url(../img/icon_tri_down.svg) no-repeat 15px center;
        background-size: 6px auto;
        border-radius: 21px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
    }
    #suntory_contents .products_nav .products_container .btn_detail a:hover {
        background: #A1813B url(../img/icon_tri_down.svg) no-repeat 15px center;
        background-size: 6px auto;
    }
    #suntory_contents .products_nav .products_container .ec_btn_narmal .btn_detail a {
        bottom: 50px;
    }
    
    #suntory_contents .products_nav .products_container .btn_shop a {
        width: 170px;
        height: 40px;
        background: #981C41 url(../img/icon_cart.svg) no-repeat 15px center;
        background-size: 16px auto;
        border-radius: 21px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding-left: 22px;
        box-sizing: border-box;
        color: #fff;
        text-decoration: none;
        position: absolute;
        bottom: 0;
    }
    #suntory_contents .products_nav .products_container .btn_shop a:hover {
        background: #880033 url(../img/icon_cart.svg) no-repeat 15px center;
        background-size: 16px auto;
    }
    
    #suntory_contents .products_nav .online_shop {
        margin: 0 0 0 30px;
        width: 230px;
        background: #981C41;
        border-radius: 6px;
    }
    #suntory_contents .products_nav .online_shop dt {
        height: 30px;
        font-size: 12px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(../img/icon_cart.svg) no-repeat 53px center;
        background-size: 12px auto;
        box-sizing: border-box;
        padding-left: 20px;
    }
    
    #suntory_contents .products_nav .ec_buttons_container {
        width: 285px;
    }
    #suntory_contents .products_nav .ec_buttons_container .ec_button {
        margin: 0 0 10px 10px;
        width: 210px;
        height: 45px;
        border-radius: 6px;
        background: #000;
    }
    #suntory_contents .products_nav .ec_buttons_container .ec_button a {
        display: block;
        width: 210px;
        height: 45px;
        border-radius: 6px;
        text-indent: -9999px;
        box-sizing: border-box;
    }
    #suntory_contents .products_nav .ec_buttons_container .ec_button a:hover {
        opacity: .95;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_amazon a {
        background: #fff url(../img/shop_amazon.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_rakuten a {
        background: #fff url(../img/shop_rakuten.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_cave_de_vin a {
        background: #fff url(../img/shop_wine.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_lohaco a {
        background: #fff url(../img/shop_lohaco.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .products_nav .ec_buttons_container .btn_yahoo a {
        background: #fff url(../img/shop_yahoo.png) no-repeat center center;
        background-size: auto 45px;
    }
    
    /*------------------------------------------------------------
    [PC] about
    ------------------------------------------------------------ */
    #suntory_contents .about {
        margin-bottom: 50px;
        height: 440px;
        background: #363d4d;
        background: -moz-linear-gradient(left,  #D8CFC6 0%, #D8CFC6 42%, #D8CFC6 43%, #f5f2f0 43%, #f5f2f0 100%);
        background: -webkit-linear-gradient(left,  #D8CFC6 0%,#D8CFC6 42%,#D8CFC6 43%,#f5f2f0 43%,#f5f2f0 100%);
        background: linear-gradient(to right,  #D8CFC6 0%,#D8CFC6 42%,#D8CFC6 43%,#f5f2f0 43%,#f5f2f0 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8CFC6', endColorstr='#f5f2f0',GradientType=1 );
    }
    #suntory_contents .about .inner {
        margin: 0 auto;
        width: 1278px;
        display: flex;
    }
    #suntory_contents .about .img {
        background: #151D30 url(../img/piccolo/img_piccolo01.webp) no-repeat 0 0;
        background-size: 539px auto;
        width: 539px;
        height: 440px;
    }
    .no-webp #suntory_contents .about .img {
        background: #151D30 url(../img/piccolo/img_piccolo01.jpg) no-repeat 0 0;
        background-size: 539px auto;
    }
    #suntory_contents .about .inner .text {
        width: 739px;
        height: 440px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
        padding: 0 0 0 80px;
    }
    #suntory_contents .about .inner .text::after {
        content: '';
        width: 200px;
        height: 195px;
        background: url(../img/organico/bg_recipe_detail.svg) no-repeat 0 0;
        background-size: 200px auto;
        position: absolute;
        top: 264px;
        left: 509px;
    }
    #suntory_contents .about .inner .text h2 {
        font-size: 26px;
        line-height: 1.5;
        font-weight: bold;
        margin-bottom: 15px;
        z-index: 10;
    }
    #suntory_contents .about .inner .text h2 .sup {
        font-size: 14px;
        vertical-align: top;
    }
    
    #suntory_contents .about .inner .text p.body {
        font-size: 15px;
        line-height: 1.8;
        z-index: 10;
    }
    #suntory_contents .about .inner .text p.body .sup {
        font-size: 8px;
        vertical-align: top;
    }
    #suntory_contents .about .inner .text p.note {
        width: 600px;
        font-size: 13px;
        line-height: 1.5;
        z-index: 10;
    }
    #suntory_contents .about .inner .text p + p {
        margin-top: 30px;
    }
    
    /*------------------------------------------------------------
    [PC] history
    ------------------------------------------------------------ */
    #suntory_contents .history {
        margin-bottom: 80px;
        height: 440px;
        background: #F5F2F0;
        background: -moz-linear-gradient(left,  #F5F2F0 0%, #F5F2F0 58%, #F5F2F0 59%, #EBE6E1 59%, #EBE6E1 100%);
        background: -webkit-linear-gradient(left,  #F5F2F0 0%,#F5F2F0 58%,#F5F2F0 59%,#EBE6E1 59%,#EBE6E1 100%);
        background: linear-gradient(to right,  #F5F2F0 0%,#F5F2F0 58%,#F5F2F0 59%,#EBE6E1 59%,#EBE6E1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5F2F0', endColorstr='#EBE6E1',GradientType=1 );
    }
    #suntory_contents .history .inner {
        margin: 0 auto;
        width: 1278px;
        height: 540px;
        display: flex;
    }
    #suntory_contents .history .inner .text {
        width: 739px;
        height: 440px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
        padding: 0 0 0 60px;
    }
    #suntory_contents .history .inner .text::after {
        content: '';
        width: 200px;
        height: 195px;
        background: url(../img/organico/bg_recipe_detail.svg) no-repeat 0 0;
        background-size: 200px auto;
        position: absolute;
        top: 273px;
        left: 30px;
    }
    #suntory_contents .history .inner .text h2 {
        width: 600px;
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 30px;
        z-index: 10;
    }
    #suntory_contents .history .inner .text p.body {
        width: 600px;
        font-size: 15px;
        line-height: 1.8;
        z-index: 10;
    }
    #suntory_contents .history .inner .text p.body .sup {
        font-size: 8px;
        vertical-align: top;
    }
    
    #suntory_contents .history .inner .text p .icon {
        margin: 0 0 30px 40px;
        float: right;
        width: 120px;
    }
    #suntory_contents .history .inner .text p .icon img {
        width: 120px;
        height: 108px;
    }
    
    
    #suntory_contents .history .inner .text p.note {
        width: 600px;
        font-size: 13px;
        line-height: 1.5;
        z-index: 10;
    }
    #suntory_contents .history .inner .text p + p {
        margin-top: 30px;
    } 
    
    #suntory_contents .history .img {
        background: #151D30 url(../img/piccolo/img_piccolo02.jpg) no-repeat 0 0;
        background-size: 539px auto;
        width: 539px;
        height: 440px;
    }
    .no-webp #suntory_contents .history .img {
        background: #151D30 url(../img/piccolo/img_piccolo02.jpg) no-repeat 0 0;
        background-size: 539px auto;
    }
    
    /*------------------------------------------------------------
    [PC] feature
    ------------------------------------------------------------ */
    #suntory_contents .feature {
        margin: 0 auto 70px;
        width: 1060px;
    }
    
    #suntory_contents .feature_item {
        margin-bottom: 30px;
        display: flex;
        border: 1px #3B7204 solid;
        background: url(../img/piccolo/bg_feature.png) repeat-y 0 0;
        background-size: 1058px auto;
    }
    #suntory_contents .feature_item.feature_item03 {
        margin-bottom: 80px;
    }
    #suntory_contents .feature_item dt {
        width: 370px;
        box-sizing: border-box;
        padding: 50px;
    }
    #suntory_contents .feature_item dt p {
        font-size: 22px;
        font-weight: normal;
        line-height: 1.5;
        color: #fff;
    }
    #suntory_contents .feature_item dt .feature_icon {
        margin: 30px 0 0;
        width: 100px;
        display: block;
    }
    #suntory_contents .feature_item dt .feature_icon img {
        width: 100px;
        height: 100px;
        vertical-align: bottom;
    }
    
    #suntory_contents .feature_item dd {
        width: 690px;
        box-sizing: border-box;
        padding: 40px 50px;
    }
    #suntory_contents .feature_item dd p {
        font-size: 15px;
        line-height: 1.8;
    }
    #suntory_contents .feature_item dd picture {
        margin: 30px auto 0;
    }
    #suntory_contents .feature_item dd picture img {
        width: 100%;
        height: auto;
    }
    #suntory_contents .feature_item.feature_item01 dd picture {
        width: 536px;
    }
    #suntory_contents .feature_item.feature_item02 dd picture {
        width: 508px;
    }
    #suntory_contents .feature_item.feature_item03 dd picture {
        width: 184px;
    }
    #suntory_contents .feature_item dd picture.common_item {
        display: block;
    }
    
    #suntory_contents .feature h3 {
        font-size: 20px;
        line-height: 1.8;
        font-weight: bold;
        color: #3B7204;
        text-align: center;
    }
    #suntory_contents .feature h2 {
        font-size: 26px;
        line-height: 1.4;
        font-weight: bold;
        color: #3B7204;
        text-align: center;
    }
    
    
    /*------------------------------------------------------------
    [PC] lineup
    ------------------------------------------------------------ */
    #suntory_contents .lineup {
        background: url(../img/organico/img_subfooter_pc_a.webp) no-repeat center bottom;
        background-size: 2400px 240px;
        padding-bottom: 290px;
    }
    .no-webp #suntory_contents .lineup {
        background: url(../img/organico/img_subfooter_pc_a.jpg) no-repeat center bottom;
        background-size: 2400px 240px;
    }
    #suntory_contents .lineup .product_list {
        margin: 0 auto;
        width: 1160px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        background: url(../img/line_vertical.png) repeat-y center 0;
        background-size: 1px auto;
    }
    #suntory_contents .lineup .product_list .product {
         width: 580px;
        padding: 50px 0 50px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 165px 330px;
        grid-template-columns: 165px 330px;
    }
    #suntory_contents .lineup .product:nth-child(2n) {
        -ms-grid-columns: 215px 330px;
        grid-template-columns: 215px 330px;
    }
    
    #suntory_contents .lineup .product_list .product:nth-child(1),
    #suntory_contents .lineup .product_list .product:nth-child(2) {
        padding: 20px 0 50px;
    }
    #suntory_contents .lineup .product picture {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width:165px;
        height: 206px;
        position: relative;
        overflow: hidden;
        text-align: center;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / 2;
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        grid-row: 1 / 3;
        padding: 0;
    }
    #suntory_contents .lineup .product:nth-child(2n) picture {
        width:215px;
        padding: 0;
    }
    #suntory_contents .lineup .product picture img {
        width: 75px;
        height: auto;
        vertical-align: bottom;
        position: absolute;
        top: -89px;
        left: 35px;
    }
    #suntory_contents .lineup .product:nth-child(2n) picture img {
        left: 85px;
    }
    #suntory_contents .lineup .product .data {
        width: 330px;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2 / 3;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / 2;
    }
    #suntory_contents .lineup .product .data h2 {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        line-height: 1.43;
    }
    #suntory_contents .lineup .product .data .name {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
        font-family: 'Arial',sans-serif;
    }
    #suntory_contents .lineup .product .data .volume {
        margin-bottom: 20px;
        font-size: 14px;
    }
    #suntory_contents .lineup .product .data .text {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.5;
    }
    #suntory_contents .lineup .product .data .chart {
        margin-bottom: 30px;
        width: 330px;
    }
    #suntory_contents .lineup .product .data .chart p {
        width: 330px;
        height: 18px;
        text-indent: -9999px;
    }
    #suntory_contents .lineup .product .data .chart p + p {
        margin: 15px 0 0;
    }
    #suntory_contents .lineup .product .data .chart .body_light {
        background: url(../img/chart/body_light_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .body_light_medium {
        background: url(../img/chart/body_light_medium_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .body_medium {
        background: url(../img/chart/body_midium_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .body_midium_full {
        background: url(../img/chart/body_midium_full_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .body_full {
        background: url(../img/chart/body_full_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    
    #suntory_contents .lineup .product .data .chart .taste_sweet {
        background: url(../img/chart/taste_sweet_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_sweet_slightly {
        background: url(../img/chart/taste_sweet_slightly_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_sweet_faintly {
        background: url(../img/chart/taste_sweet_faintly_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_dry_slightly {
        background: url(../img/chart/taste_dry_slightly_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    #suntory_contents .lineup .product .data .chart .taste_dry {
        background: url(../img/chart/taste_dry_pc.svg) no-repeat 0 0;
        background-size: 330px auto;
    }
    

    #suntory_contents .lineup .product .btn_shop a {
        width: 180px;
        height: 36px;
        background: #981C41 url(../img/icon_cart.svg) no-repeat 15px center;
        background-size: 16px auto;
        border-radius: 21px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding-left: 22px;
        box-sizing: border-box;
        color: #fff;
        text-decoration: none;
    }
    #suntory_contents .lineup .product .btn_shop a:hover {
        background: #880033 url(../img/icon_cart.svg) no-repeat 15px center;
        background-size: 16px auto;
    }
    #suntory_contents .lineup .product .shop_container {
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2 / 3;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        grid-row: 2 / 3;
    }
    #suntory_contents .lineup .online_shop {
        margin: 0;
        padding: 0 0 10px;
        width: 330px;
/*
        background: #981C41;
        border-radius: 6px;
*/
        background: none;
    }
    #suntory_contents .lineup .online_shop dt {
        height: 35px;
        font-size: 14px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(../img/icon_cart.svg) no-repeat 93px center;
        background-size: 12px auto;
        box-sizing: border-box;
        padding-left: 14px;
    }
    #suntory_contents .lineup .online_shop .note {
        margin: 0 15px 10px;
        font-size: 11px;
        line-height: 1.363636363636364;
        color: #fff;
    }
    
    #suntory_contents .lineup .ec_buttons_container {
        width: 330px;
        list-style: none;
    }
    #suntory_contents .lineup .ec_buttons_container .ec_button {
        margin: 0 auto 10px;
        display: block;
        width: 210px;
        height: 45px;
        border-radius: 5px;
        background: #000;
    }
    #suntory_contents .lineup .ec_buttons_container .ec_button:last-child {
        margin: 0 auto;
    }
    #suntory_contents .lineup .ec_buttons_container .ec_button a {
        display: block;
        width: 210px;
        height: 45px;
        border-radius: 5px;
        text-indent: -9999px;
        box-sizing: border-box;
    }
    #suntory_contents .lineup .ec_buttons_container .ec_button a:hover {
        opacity: .95;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_amazon a {
        background: #fff url(../img/shop_amazon.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_rakuten a {
        background: #fff url(../img/shop_rakuten.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_cave_de_vin a {
        background: #fff url(../img/shop_wine.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_lohaco a {
        background: #fff url(../img/shop_lohaco.png) no-repeat center center;
        background-size: auto 45px;
    }
    #suntory_contents .lineup .ec_buttons_container .btn_yahoo a {
        background: #fff url(../img/shop_yahoo.png) no-repeat center center;
        background-size: auto 45px;
    }
    
    
    
    
}