@charset "utf-8";

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */

/*------------------------------------------------------------
[SP] lead
------------------------------------------------------------ */
#suntory_contents .lead {
   margin-bottom: 8vw;
   padding: 9.3333333333333vw 0 0;
}
#suntory_contents .lead h2 {
   margin-bottom: 6vw;
   font-size: 5.8666666666667vw;
   line-height: 1.4;
   font-weight: bold;
   letter-spacing: -.025em;
   text-align: center;
}


#suntory_contents .lead .banner_container {
    margin: 0 4vw;
    width: calc( 100% - 8vw );
    height: auto;
}
#suntory_contents .lead .banner_container #banner_img {
    width: 100%;
    height: auto;
}
#suntory_contents .lead .banner_container #banner_img a img {
    width: 100%;
    height: auto;
}



#suntory_contents #onlineshop {
   padding-top: 9.3333333333333vw;
}

#suntory_contents .btn_online_shop {
    margin: 0 auto 5.3333333333333vw;
    width: 61.333333333333333vw;
    height: 14.6666666666667vw;
    position: relative;
}
#suntory_contents .btn_online_shop.disabled {
    opacity: .2;
}
#suntory_contents .btn_online_shop::before {
    content: '';
    width:23.066666666666667vw;
    height: 15.4666666666667vw;
    background: url(../../goods/img/img_sunbirds_kun.webp) no-repeat 0 0;
    background-size: 23.066666666666667vw 15.4666666666667vw;
    position: absolute;
    top: -0.8vw;
    left: -10.1333333333333vw;
}
.no-webp #suntory_contents .btn_online_shop::before {
    background: url(../../goods/img/img_sunbirds_kun.png) no-repeat 0 0;
    background-size: 23.066666666666667vw 15.4666666666667vw;
}

#suntory_contents .btn_online_shop a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #bb0000;
    width: 70.6666666666667vw;
    height: 13.3333333333333vw;
    color: #fff;
    font-size: 4vw;
    line-height: 1.4;
    font-weight: bold;
    text-decoration: none;
    padding-left: 16.533333333333333vw;
    box-sizing: border-box;
}
#suntory_contents .btn_online_shop.disabled a {
    pointer-events: none;
}
#suntory_contents .btn_online_shop a span {
    background: 
    url(../img/arrow_next.png) no-repeat right center,
    url(../../goods/img/icon_cart.svg) no-repeat right 10.8vw center;
    background-size: 1.6vw auto, 4vw auto;
    padding: 0 17.466666666666667vw  0 0;
    position: relative;
}
#suntory_contents .btn_online_shop a span::after {
    content: '';
    width: 1.3333333333333vw;
    height: 1.3333333333333vw;
    background: url(../img/icon_external.png) no-repeat 0 0;
    background-size: 1.3333333333333vw 1.3333333333333vw;
    position: absolute;
    top: 0;
    right: 6.8vw;
}
#suntory_contents .lead .note {
   margin: 0 4vw 4vw;
}
#suntory_contents .lead .note p {
   font-size: 2.6666666666667vw;
   line-height: 1.5;
   color: #888888;
   text-align: left;
}

#suntory_contents .btn_signup a {
   margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #bb0000;
    width: 55.733333333333333vw;
    height: 13.3333333333333vw;
    color: #fff;
    font-size: 4vw;
    line-height: 1.4;
    font-weight: bold;
    text-decoration: none;
    padding-left: 8vw;
    box-sizing: border-box;
}
#suntory_contents .btn_signup a span {
    background: 
    url(../img/arrow_next.png) no-repeat right center;
    background-size: 1.6vw auto;
    padding: 0 12vw 0 0;
    position: relative;
}
#suntory_contents .btn_signup a span::after {
    content: '';
    width: 1.3333333333333vw;
    height: 1.3333333333333vw;
    background: url(../img/icon_external.png) no-repeat 0 0;
    background-size: 1.3333333333333vw 1.3333333333333vw;
    position: absolute;
    top: 0;
    right: 6.8vw;
}

/*------------------------------------------------------------
[SP] section_nav
------------------------------------------------------------ */
#suntory_contents .section_nav {
   margin: 0 auto 10.6666666666667vw;
   width: 89.333333333333333vw;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   list-style: none;
}
#suntory_contents .section_nav li {
   width: 44vw;
   margin-bottom: 2.6666666666667vw;
}
#suntory_contents .section_nav li:nth-child(5) {
   margin-bottom:none;
}
#suntory_contents .section_nav li a {
   width: 44vw;
   height: 8vw;
   border-radius: 4vw;
   background: #ff3344 url(../../goods/img/arrow_down.png) no-repeat right 3.3333333333333vw center;
   background-size: 2.6666666666667vw auto;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   text-decoration: none;
   font-size: 3.2vw;
   font-weight: bold;
   padding-right: 4.9333333333333vw;
   box-sizing: border-box;
}
#suntory_contents .section_nav li.disabled a {
   opacity: .2;
   pointer-events: none;
}

/*------------------------------------------------------------
[SP] section
------------------------------------------------------------ */
#suntory_contents .goods_section {
   margin-bottom: 5.3333333333333vw;
}
#suntory_contents .goods_section h3 {
   margin: 0 4vw 4vw;
   font-size: 5.3333333333333vw;
   font-weight: bold;
   color: #000;
   height: 16vw;
   display: flex;
   align-items: center;
   border-left: 2.6666666666667vw #bb0022 solid;
   padding-left: 8vw;
}
#suntory_contents .item_list {
   margin: 0 auto 0;
   width: 92vw;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
}
#suntory_contents .item_list li {
   margin: 0 1.3333333333333vw 7.3333333333333vw 0;
   width: 45.3333333333333vw;
}
#suntory_contents .item_list li:nth-child(2n) {
   margin: 0 0 7.3333333333333vw 0;
}
#suntory_contents .item_list li picture {
   width: 45.3333333333333vw;
}
#suntory_contents .item_list li picture img {
   width: 100%;
   height: auto;
}
#suntory_contents .item_list h4 {
   margin:2.6666666666667vw 0 2.6666666666667vw;
   font-size: 3.2vw;
   line-height: 1.4;
   font-weight: bold;
}
#suntory_contents .item_list .price {
   font-size: 3.2vw;
   color: #bb0000;
}

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

    /*------------------------------------------------------------
    [PC] lead
    ------------------------------------------------------------ */
    #suntory_contents .lead {
       margin-bottom: 55px;
       padding: 60px 0 0;
    }
    #suntory_contents .lead h2 {
       margin-bottom: 50px;
       font-size: 34px;
       line-height: 1.4;
       font-weight: bold;
       letter-spacing: -.025em;
       text-align: center;
    }
    

#suntory_contents .lead .banner_container {
    margin: 0 auto 30px auto;
    width: 780px;
    height: auto;
}
#suntory_contents .lead .banner_container #banner_img {
    width: 100%;
    height: auto;
}
#suntory_contents .lead .banner_container #banner_img a img {
    width: 100%;
    height: auto;
}

    
    #suntory_contents #onlineshop {
       padding-top: 20px;
    }

    #suntory_contents .btn_online_shop {
        margin: 0 auto 30px;
        width: 420px;
        height: 80px;
        position: relative;
    }
    #suntory_contents .btn_online_shop.disabled {
        opacity: .2;
    }
    #suntory_contents .btn_online_shop::before {
        content: '';
        width:144px;
        height: 96px;
        background: url(../../goods/img/img_sunbirds_kun.webp) no-repeat 0 0;
        background-size: 144px 96px;
        position: absolute;
        top: -9px;
        left: -58px;
    }
    .no-webp #suntory_contents .btn_online_shop::before {
        background: url(../../goods/img/img_sunbirds_kun.png) no-repeat 0 0;
        background-size: 144px 96px;
    }
    
    #suntory_contents .btn_online_shop a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #bb0000;
        width: 420px;
        height: 80px;
        color: #fff;
        font-size: 20px;
        line-height: 1.4;
        font-weight: bold;
        text-decoration: none;
        padding-left: 120px;
        box-sizing: border-box;
    }
    #suntory_contents .btn_online_shop a:hover {
       background: #ee0000;
    }
    #suntory_contents .btn_online_shop.disabled a {
        pointer-events: none;
    }
    #suntory_contents .btn_online_shop a span {
        background: 
        url(../img/arrow_next.png) no-repeat right center,
        url(../../goods/img/icon_cart.svg) no-repeat right 66px center;
        background-size: 7px auto, 20px auto;
        padding: 0 106px 0 0;
        position: relative;
    }
    #suntory_contents .btn_online_shop a span::after {
        content: '';
        width: 10px;
        height: 10px;
        background: url(../img/icon_external.png) no-repeat 0 0;
        background-size: 10px 10px;
        position: absolute;
        top: 0;
        right: 38px;
    }
    
    #suntory_contents .lead .note {
       margin: 0 90px 30px;
    }
    #suntory_contents .lead .note p {
       font-size: 14px;
       line-height: 1.5;
       color: #888888;
       text-align: left;
    }
   
    #suntory_contents .btn_signup a {
       margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #bb0000;
        width: 270px;
        height: 80px;
        color: #fff;
        font-size: 20px;
        line-height: 1.4;
        font-weight: bold;
        text-decoration: none;
        padding-left: 30px;
        box-sizing: border-box;
    }
    #suntory_contents .btn_signup a span {
        background: 
        url(../img/arrow_next.png) no-repeat right center;
        background-size: 7px auto;
        padding: 0 60px 0 0;
        position: relative;
    }
    #suntory_contents .btn_signup a span::after {
        content: '';
        width: 10px;
          height: 10px;
        background: url(../img/icon_external.png) no-repeat 0 0;
        background-size: 10px 10px;
        position: absolute;
        top: 0;
        right: 38px;
    }
    #suntory_contents .btn_signup a:hover {
        background: #ee0000;
     }
    
    
   /*------------------------------------------------------------
   [PC] section_nav
   ------------------------------------------------------------ */
   #suntory_contents .section_nav {
      margin: 0 auto 60px;
      width: 940px;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      list-style: none;
   }
   #suntory_contents .section_nav li {
      width: 175px;
   }
   #suntory_contents .section_nav li:nth-child(1),
   #suntory_contents .section_nav li:nth-child(2) {
      margin: 0;
   }
   #suntory_contents .section_nav li a {
      width: 175px;
      height: 40px;
      border-radius: 20px;
      background: #ff3344 url(../../goods/img/arrow_down.png) no-repeat right 14px center;
      background-size: 12px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
      padding-right: 12px;
      box-sizing: border-box;
   }
   #suntory_contents .section_nav li a:hover {
      background: #ee0000 url(../../goods/img/arrow_down.png) no-repeat right 14px center;
      background-size: 12px auto;
   }
   
   /*------------------------------------------------------------
   [PC] section
   ------------------------------------------------------------ */
   #suntory_contents .goods_section {
      margin: 0 auto 0;
      width: 1080px;
   }
   #suntory_contents .goods_section h3 {
      margin: 0 0 40px;
      font-size: 28px;
      font-weight: bold;
      color: #000;
      height: 60px;
      display: flex;
      align-items: center;
      border-left: 10px #bb0022 solid;
      padding-left: 52px;
   }
   #suntory_contents .item_list {
      margin: 0 auto;
      width: 1080px;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
   }
   #suntory_contents .item_list li {
      margin: 0 30px 55px 0;
      width: 340px;
   }
   #suntory_contents .item_list li:nth-child(2n) {
      margin: 0 30px 55px 0;
   }
   #suntory_contents .item_list li:nth-child(3n) {
      margin: 0 0 55px 0;
   }
   #suntory_contents .item_list li picture {
      width: 340px;
   }
   #suntory_contents .item_list li picture img {
      width: 100%;
      height: auto;
   }
   #suntory_contents .item_list h4 {
      margin:20px 0 10px;
      font-size: 16px;
      font-weight: bold;
   }
   #suntory_contents .item_list .price {
      font-size: 16px;
      color: #bb0000;
   }
   
   
    
}