@charset "utf-8";


/*------------------------------------------------------------
  font
------------------------------------------------------------ */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(/sun_common/en/fonts/css/fonts.css);


/*------------------------------------------------------------
  suntory_contents
------------------------------------------------------------ */
#suntory_contents,
#suntory_contents form,
#suntory_contents input,
#suntory_contents select {
	/*font-family: 'suntory syntax';*/
    font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, sans-serif;
    font-weight: 300;
	letter-spacing: .05em;
}

#suntory_contents a {
    text-decoration: none;
}
#suntory_contents a:hover {
    text-decoration: underline;
}

/*=============================================================
  [PC] width 960px
============================================================ */

/*------------------------------------------------------------
  [PC] pc_item, sp_item
------------------------------------------------------------ */
#suntory_contents .pc_item {
    display: inline-block;
}
#suntory_contents .pc_item_block {
        display: block;
}
#suntory_contents .sp_item,
#suntory_contents .sp_item_block {
    display: none;
}

/*------------------------------------------------------------
  [PC] breadcrumbs
------------------------------------------------------------ */
#suntory_contents #breadcrumbs {
    margin: 0 auto;
    width: 960px;
}
#suntory_contents #breadcrumbs p {
    margin: 15px 20px;
    font-size: 12px;
    line-height: 1.5;
    color: #46555e;
}
#suntory_contents #breadcrumbs p span {
    margin: 0 5px;
}
#suntory_contents #breadcrumbs p a {
    color: #46555e;
}

/*------------------------------------------------------------
    [PC] btn_list
------------------------------------------------------------ */
#suntory_contents .btn_list a {
    font-size: 14px;
    line-height:1;
    display: inline-block;
    color: #46555e;
    background: #fff;
    border: 2px #5bc2dc solid;
    padding: 8px 23px 8px 18px;
    border-radius: 25px;
}

#suntory_contents .btn_list a span.arrow {
    display: inline-block;
    position: relative;
    padding-right:.5em;
}
#suntory_contents .btn_list a span.arrow:after{
content:"";
vertical-align:middle;
position:absolute;
top:calc(50% - 3px);
right:-6px;
width:6px;
height:6px;
margin:auto;
border-top:3px solid #5bc2dc;
border-right:3px solid #5bc2dc;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

#suntory_contents .btn_list a:hover {
    color: #fff;
    background: #5bc2dc;
    border: 2px #5bc2dc solid;
}
#suntory_contents .btn_list a:hover span.arrow:after{
border-top:3px solid #fff;
border-right:3px solid #fff;
}


/*------------------------------------------------------------
    [PC] btn_list_small
------------------------------------------------------------ */
#suntory_contents .btn_list_small a {
    font-size: 14px;
    line-height:12px;
    display: inline-block;
    color: #46555e;
    background: #fff;
    border: 2px #5bc2dc solid;
    padding: 8px 17px 8px 10px;
    border-radius: 25px;
}

#suntory_contents .btn_list_small a span.arrow {
    display: inline-block;
    position: relative;
    padding-right:.5em;
}
#suntory_contents .btn_list_small a span.arrow:after{
content:"";
vertical-align:middle;
position:absolute;
top:calc(50% - 3px);
right:-6px;
width:6px;
height:6px;
margin:auto;
border-top:3px solid #5bc2dc;
border-right:3px solid #5bc2dc;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

#suntory_contents .btn_list_small a:hover {
    color: #fff;
    background: #5bc2dc;
    border: 2px #5bc2dc solid;
}
#suntory_contents .btn_list_small a:hover span.arrow:after{
border-top:3px solid #fff;
border-right:3px solid #fff;
}


/*------------------------------------------------------------
    [PC] btn_rss
------------------------------------------------------------ */
#suntory_contents .btn_rss a {
    width: 26px;
    height: 26px;
    display: inline-block;
    text-indent:-9999px;
    background: url(../img/icon_rss.png) no-repeat 0 0;
}

/*------------------------------------------------------------
    [PC] btn_page_top
------------------------------------------------------------ */
#suntory_contents .btn_page_top {
    margin: 0 auto 35px;
    padding: 0 20px;
    width: 960px;
    text-align: right;
    box-sizing: border-box;
}
#suntory_contents .btn_page_top a {
    font-size: 12px;
    line-height: 26px;
    color: #46555e;
    display: inline-block;
}
#suntory_contents .btn_page_top a span {
    margin-left:5px;
    display: inline-block;
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    background: #fff;
    vertical-align: top;
    border: 1px #5bc2dc solid;
}
#suntory_contents .btn_page_top a span:after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:10px;
    left:8.5px;
    width:5px;
    height:5px;
    margin:0;
    border-top:3px solid #5bc2dc;
    border-right:3px solid #5bc2dc;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
#suntory_contents .btn_page_top a:hover span {
    background: #5bc2dc;
}
#suntory_contents .btn_page_top a:hover span:after{
border-top:3px solid #fff;
border-right:3px solid #fff;
}






@media screen and (min-width:961px){
/*=============================================================
  [PC] width 961px - 
============================================================ */
    
    /*------------------------------------------------------------
      [PC] breadcrumbs
    ------------------------------------------------------------ */
    #suntory_contents #breadcrumbs {
        margin: 0 auto;
        width: 100%;
        max-width: 1164px;
    }

    /*------------------------------------------------------------
    [PC] btn_page_top
    ------------------------------------------------------------ */
    #suntory_contents .btn_page_top {
        margin: 0 auto 35px;
        width: 100%;
        max-width: 1164px;
        text-align: right;
    }
    
    
}

@media screen and (min-width:1164px){
/*=============================================================
  [PC] width 1164px - 
============================================================ */
    
    /*------------------------------------------------------------
      [PC] breadcrumbs
    ------------------------------------------------------------ */
    #suntory_contents #breadcrumbs p {
    margin: 15px 0;
    }
    /*------------------------------------------------------------
       [PC] btn_page_top
    ------------------------------------------------------------ */
    #suntory_contents .btn_page_top {
    padding: 0;
    }
    
}

@media screen and (max-width:767px){

    /*=============================================================
      [SP] 
    ============================================================ */
    
    /*------------------------------------------------------------
      [PC] pc_item, sp_item
    ------------------------------------------------------------ */
    #suntory_contents .pc_item,
    #suntory_contents .pc_item_block {
        display: none;
    }
    suntory_contents .sp_item {
        display: inline-block;
    }
    suntory_contents .sp_item_block {
        display: block;
    }
    
     /*------------------------------------------------------------
      [SP] breadcrumbs
    ------------------------------------------------------------ */
    #suntory_contents #breadcrumbs {
        margin: 0 13px;
        width: auto;
        max-width: auto;
    }
    
    
    /*------------------------------------------------------------
     [SP] btn_list
    ------------------------------------------------------------ */
    #suntory_contents .btn_list a {
        font-size: 12px;
        line-height:12px;
        display: inline-block;
        color: #46555e;
        background: #fff;
        padding: 8px 25px 8px 15px;
        border-radius: 25px;
    }
    #suntory_contents .btn_list a span.category {
        display: none;
    }
    #suntory_contents .btn_list a span.arrow {
        display: inline-block;
        position: relative;
        padding-right:.5em;
    }
    #suntory_contents .btn_list a span.arrow:after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 3px);
    right:-12px;
    width:6px;
    height:6px;
    margin:auto;
    border-top:3px solid #5bc2dc;
    border-right:3px solid #5bc2dc;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    }

    #suntory_contents .btn_list a:hover {
    color: #fff;
    background: #5bc2dc;
    border: 2px #5bc2dc solid;
    }
    #suntory_contents .btn_list a:hover span.arrow:after{
    border-top:3px solid #fff;
    border-right:3px solid #fff;
    }

    /*------------------------------------------------------------
     [SP] btn_list_small
    ------------------------------------------------------------ */
    #suntory_contents .btn_list_small a {
        font-size: 12px;
        line-height:12px;
        display: inline-block;
        color: #46555e;
        background: #fff;
        padding: 8px 13px 8px 8px;
        border-radius:25px;
    }
    #suntory_contents .btn_list_small a span.category {
        display: none;
    }
    #suntory_contents .btn_list_small a span.arrow {
        display: inline-block;
        position: relative;
        padding-right:.5em;
    }
    #suntory_contents .btn_list_smallbtn_list_small a span.arrow:after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 3px);
    right:-6px;
    width:6px;
    height:6px;
    margin:auto;
    border-top:3px solid #5bc2dc;
    border-right:3px solid #5bc2dc;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    }

    #suntory_contents .btn_list_small a:hover {
    color: #fff;
    background: #5bc2dc;
    border: 2px #5bc2dc solid;
    }
    #suntory_contents .btn_list_small a:hover span.arrow:after{
    border-top:3px solid #fff;
    border-right:3px solid #fff;
    }
    
    /*------------------------------------------------------------
     [SP] btn_list full_width
    ------------------------------------------------------------ */
    #suntory_contents .btn_list.full_width a {
        font-size: 12px;
        line-height:12px;
        display: block;
        color: #46555e;
        background: #fff;
        padding: 8px 12px 8px 12px;
        border-radius:25px;
        position: relative;
    }
    #suntory_contents .btn_list.full_width a span.arrow {
        display: inline-block;
        position: static;
        padding-right:.5em;
    }
    #suntory_contents .btn_list.full_width a span.arrow:after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 3px);
    right:10px;
    width:6px;
    height:6px;
    margin:auto;
    border-top:3px solid #5bc2dc;
    border-right:3px solid #5bc2dc;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    }
    
    /*------------------------------------------------------------
      [SP] btn_page_top
    ------------------------------------------------------------ */
    #suntory_contents .btn_page_top {
        margin: 0 13px 35px;
        padding: 0;
        width: auto;
        text-align: right;
    }
    

}