@charset "utf-8";

/* Reset
==================================== */
#suntory_contents{
margin:0;
padding:0;
border:0;
}

#suntory_contents h1,#suntory_contents h2,#suntory_contents h3,#suntory_contents h4,#suntory_contents h5,#suntory_contents h6,#suntory_contents p,#suntory_contents ol,#suntory_contents ul,#suntory_contents li,#suntory_contents dl,#suntory_contents dt,#suntory_contents dd,#suntory_contents table,#suntory_contents th,#suntory_contents td,#suntory_contents form,#suntory_contents br,#suntory_contents address,#suntory_contents button,#suntory_contents em,#suntory_contents i{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
font-style:normal;
vertical-align:baseline;
outline:none;
font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Osaka, sans-serif;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
-webkit-text-size-adjust:100%;
}

#suntory_contents ruby rt{
font-family:"ＭＳ Ｐゴシック";
display:none;
}

#suntory_contents table{
border-collapse:collapse;
text-align:left;
}

#suntory_contents input{
vertical-align:middle;
}

#suntory_contents ol,
#suntory_contents ul,
#suntory_contents li{
list-style:none;
}

#suntory_contents iframe{
margin:0;
padding:0;
}

#suntory_contents a{
cursor:pointer;
outline:none;
text-decoration:none;
}

#suntory_contents .on a:hover{
cursor:default;
}

#suntory_contents br.br_pc{
display:none;
}

#suntory_contents img{
-ms-interpolation-mode:bicubic;
}


/* #container
======================================================================== */
#container{
text-align:left;
}



/* #container #header
======================================================================== */
/* #header h1
-------------------------------------------------- */
#header h1{
background-color:#fdbc1a;
display:table;
width:100%;
}

#header h1 em,
#header h1 i{
display:table-cell;
vertical-align:top;
}

#header h1 em{
font-size:0;
line-height:0;
}

#header h1 em img {
width: 88%;
height: auto;
margin: 5px 0 5px 0;
}

#header h1 i{
cursor:pointer;
position:relative;
height:54px;
width:52px;
font-size:0;
line-height:0;
}

#header h1 i.close:before{
content:'';
height:4px;
width:30px;
background:#fff;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
display:block;
position:absolute;
top:19px;
left:8px;
box-shadow:0 8px #fff, 0 16px #fff;
-webkit-box-shadow:0 8px #fff, 0 16px #fff;
-moz-box-shadow:0 8px #fff, 0 16px #fff;
}

#header h1 i.open:before,
#header h1 i.open:after{
content:'';
height:4px;
width:32px;
display:block;
background:#fff;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:absolute;
top:27px;
left:8px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
}

#header h1 i.open:after{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}

/* #header #hd_menu
-------------------------------------------------- */
#header #hd_menu{
background-color:#fb8c02;
}

#header #hd_menu ul li{
border-bottom:1px solid #fca335;
}

#header #hd_menu ul li a{
display:block;
padding:14px 0 11px 12px;
font-size:20px;
line-height:120%;
font-weight:bold;
color:#fff;
position:relative;
}

#header #hd_menu ul li a{
overflow:hidden;
width:92%;
}

#header #hd_menu ul li a:before{
content:'';
height:13px;
width:13px;
display:block;
border:3px solid #fff;
border-left-width:0;
border-top-width:0;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
position:absolute;
top:15px;
right:10px;
}



/* #header #hd_ph
-------------------------------------------------- */
#header #hd_ph{
font-size:0;
line-height:0;
}

#header #hd_ph img{
width:100%;
height:auto;
}



/* #header .bnr_area
-------------------------------------------------- */
#header .bnr_area{
text-align:center;
padding:5px 0 5px 0;
}

#header .bnr_area ul li{
padding:5px 0 5px 0;
font-size:0;
line-height:0;
}

#header .bnr_area ul li a{
display:block;
width:96%;
margin:0 auto;
}

#header .bnr_area ul li a img{
width:100%;
height:80px;
}


/* #container #contents
======================================================================== */
#contents .page_top:after{content:"";
clear:both;
display:block;}

#contents .page_top a{
display:block;
float:right;
padding:15px 13px 15px 30px;
font-size:18px;
line-height:120%;
font-weight:bold;
color:#094;
position:relative;
}

#contents .page_top a:before{
content:'';
height:10px;
width:10px;
display:block;
border:2.5px solid #094;
border-left-width:0;
border-bottom-width:0;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
position:absolute;
top:22px;
left:5px;
}

/* #contents #news
==================================== */
#news{
margin:10px 0 0 0;
}

#news h2{
background-color:#fffbdd;
padding:13px 15px 10px 12px;
font-size:22px;
line-height:120%;
font-weight:bold;
color:#f60;
}

#news ul{
padding:15px 7px 3px 13px;
}

#news ul li{
padding:0 0 15px 0;
}

#news ul li dl dt,{
font-size:16px;
line-height:130%;
color:#888;
}

#news ul li dl dd{
color: #1eb9e6;
}

#news ul li dl dd a{
color:#1eb9e6;
}

#news ul li dl dd a:active{
text-decoration:underline;
}



/* #contents #products
==================================== */
/* #products #products_hd
-------------------------------------------------- */
#products{
    margin-top:10px;
}
#products_hd{
background-color:#fffbdd;
padding:8px 15px 9px 15px;
}

#products_hd h2{
display:table;
width:100%;
}

#products_hd h2 em,
#products_hd h2 i{
display:table-cell;
vertical-align:top;
}

#products_hd h2 em{
font-size:23px;
line-height:120%;
font-weight:bold;
color:#f60;
padding:6px 10px 0 0;

}

#products_hd h2 i{
cursor:pointer;
position:relative;
height:38px;
width:38px;
background-color:#ffb922;
font-size:0;
line-height:0;
}

#products_hd h2 i.open:before,
#products_hd h2 i.open:after{
content:'';
height:3px;
width:25px;
display:block;
background:#fff;
position:absolute;
top:17px;
left:6.5px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);}

#products_hd h2 i.open:after{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);}

#products_hd h2 i.close{
overflow:hidden;
height:38px;
}

#products_hd h2 i.close:before{
content:'';
height:14px;
width:14px;
display:block;
border:3px solid #fff;
border-right-width:0;
border-top-width:0;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
position:absolute;
bottom:15px;
left:10.5px;
}


/* #products #products_ft
------------------------------ */
#products_ft ul li{
font-size:0;
line-height:0;
}

#products_ft ul li img{
width:100%;
height:auto;
border-bottom:1px solid #fdbd19;
}


/* #contents #about
==================================== */
#about{
border-bottom:1px solid #219ad5;
}

#about h2{
background-color:#eef8fa;
padding:13px 15px 10px 12px;
font-size:22px;
line-height:120%;
font-weight:bold;
color:#219ad5;
border-top:1px solid #219ad5;
}

#about ul li h3{
font-size:0;
line-height:0;
border-top:1px solid #219ad5;
}

#about ul li h3 img{
margin:15px 0 15px 0;
width:100%;
height:auto;
}

#about ul li p{
padding:0 7px 15px 13px;
font-size:15px;
line-height:140%;
color:#818181;
font-weight:bold;
}




/* #contents #enjoy
==================================== */
#enjoy h2{
text-align:center;
}

#enjoy h2 img{
width:70%;
height:auto;
margin:30px auto;
}

/* #container p.page_top.ft
======================================================================== */
#container p.page_top.ft{
font-size:0;
line-height:0;
}

#container p.page_top.ft img{
width:100%;
height:auto;
}




/* #container .sns_btn
======================================================================== */
#container .sns_btn{
background:#fff;
height:80px;
}

#container .sns_btn .socialbutton_suntory{
margin:0 auto;
}

#container .sns_btn iframe.twitter-share-button{
width:90px !important;
}
