@charset "utf-8";

/* Reset
#bar_navi_wrapper
========================================================================= */
#bar_navi_wrapper{
margin:0;
padding:0;
border:0;
outline:0;
line-height:1;
background:transparent;
-webkit-text-size-adjust:none;
text-align:left;
}
#bar_navi_wrapper h1,#bar_navi_wrapper h2,#bar_navi_wrapper h3,#bar_navi_wrapper h4,#bar_navi_wrapper h5,#bar_navi_wrapper h6,#bar_navi_wrapper p,#bar_navi_wrapper ol,#bar_navi_wrapper ul,#bar_navi_wrapper li,#bar_navi_wrapper dl,#bar_navi_wrapper dt,#bar_navi_wrapper dd,#bar_navi_wrapper table,#bar_navi_wrapper th,#bar_navi_wrapper td,#bar_navi_wrapper form,#bar_navi_wrapper br,#bar_navi_wrapper address,#bar_navi_wrapper button,#bar_navi_wrapper span,#bar_navi_wrapper em,#bar_navi_wrapper i,#bar_navi_wrapper a,#bar_navi_wrapper input,#bar_navi_wrapper button{
margin:0;
padding:0;
border:0;
font:inherit;
font-size:100%;
font-style:normal;
line-height:1;
vertical-align:baseline;
outline:none;
box-sizing:border-box;
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
background-color:transparent;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
}
#bar_navi_wrapper table{
border-collapse:collapse;
text-align:left;
}
#bar_navi_wrapper input{
vertical-align:middle;
}
#bar_navi_wrapper ol,#bar_navi_wrapper ul,#bar_navi_wrapper li{
list-style:none;
}
#bar_navi_wrapper a,#bar_navi_wrapper input,#bar_navi_wrapper button{
cursor:pointer;
text-decoration:none;
}
#bar_navi_wrapper img{
-ms-interpolation-mode:bicubic;
border:0;
}
#suntory_contents li {
    list-style: none;
}
#suntory_contents {
    font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
}

/*************************************
#bar_navi_wrapper
**************************************/
#bar_navi_wrapper{font-size:14px;color:#555;word-break:break-all}
@media only screen and (max-width:320px){
#bar_navi_wrapper{font-size:13px;}
#bar_navi_wrapper .bar_naviCommon_menu h1 span:first-child{width:250px;}
}
/*************************************
#bar_navi_wrapper .bar_naviCommon
**************************************/
/* suntory_contents */
#suntory_contents #webspecial {background: #3c2211; font-size: 3.4375vw}
#suntory_contents .main {background-image: url(/webcommon/cmtrank/img/bg-search-content01-sp.png);background-repeat: no-repeat;background-size: 100%;background-position: 0 52px}

/* #bar_navi_wrapper .bar_naviCommon header
-------------------------------------------------- */
#bar_navi_wrapper .bar_naviCommon header{
background:#301207;
}
#bar_navi_wrapper .bar_naviCommon header .bar_naviCommon_in{
display: flex;
align-items: center;
justify-content: space-between;
}
#bar_navi_wrapper .bar_naviCommon header .bar_naviCommon_in h1 {
    display: flex;
    align-items: center;
}
#bar_navi_wrapper .bar_naviCommon header .bar_naviCommon_in h1 a{
width: 150px;
height: 2.8em;
background: url(../svg/logo_bar_navi.svg) no-repeat 0 0;
background-size: auto 100%;
text-indent: -9999px;
display: block;    
margin: 0 0 0 1em;
}

/* #bar_navi_wrapper #bar_naviCommonFooter
================================================ */
#bar_navi_wrapper #bar_naviCommonFooter.bar_naviCommon header .bar_naviCommon_in{
background-position:50% 0.9em;
}
/* #bar_navi_wrapper .bar_naviCommon header p
-------------------------------------------------- */
#bar_navi_wrapper .bar_naviCommon header p{
display:block;
position:relative;
width:2.5em;
height:3.7em;
margin-right: .7em;
cursor:pointer;
}
#bar_navi_wrapper .bar_naviCommon header p i{
cursor:pointer;
display:block;
position:absolute;
top:1.6em;
left: calc(50% - 1.1em);
width:2.5em;
height:0.28em;
margin-left:0;
background:#fff;
transition:.2s;
}
#bar_navi_wrapper .bar_naviCommon header p i:before,
#bar_navi_wrapper .bar_naviCommon header p i:after{
display:block;
content:"";
position:absolute;
top:0;
left: 0;
width:2.5em;
height:0.28em;
background:#fff;
transition:.2s;
}
#bar_navi_wrapper .bar_naviCommon header p i:before{margin-top:-0.8em;}
#bar_navi_wrapper .bar_naviCommon header p i:after{margin-top:0.8em;}

#bar_navi_wrapper .bar_naviCommon.open p i{background:transparent;top:1.7em;}
#bar_navi_wrapper .bar_naviCommon.open p i:before,
#bar_navi_wrapper .bar_naviCommon.open p i:after{margin-top:0;}
#bar_navi_wrapper .bar_naviCommon.open p i:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
#bar_navi_wrapper .bar_naviCommon.open p i:after{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
}


/*==================================================
#bar_navi_wrapper #bar_navi_contents
================================================== */
#bar_navi_contents{
text-align:center;
background:#000;
width:100%;
font-size:14px;
word-break:break-all;
color:#555;
}
@media only screen and (max-width:360px){
    #bar_navi_contents{font-size:13px;}
}


/*==================================================
#bar_navi_wrapper .bar_naviCommonBreadcrumbs
================================================== */
#bar_navi_wrapper .bar_naviCommonBreadcrumbs:after{content:""; clear:both; display:block;}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs{
font-size:14px;
background:#000;
text-align:left;
padding:1em 0.5em 1.25em 0.5em;
}
@media only screen and (max-width:320px){
    #bar_navi_wrapper .bar_naviCommonBreadcrumbs{font-size:13px;}
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs nav{
width:100%;
max-width:768px;
margin:0 auto;
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs ul{
display:table;
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs ul li{
display:table-cell;
vertical-align:top;
white-space:nowrap;
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs ul li:last-child{
white-space:normal;
}
/*#bar_navi_wrapper .bar_naviCommonBreadcrumbs li:before{
position:absolute;
top:0.2em;
left:0.5em;
content:"\00ff1e";
font-size:0.8em;
color:#fff;
}*/
#bar_navi_wrapper .bar_naviCommonBreadcrumbs li{
position:relative;
font-size:0.9em;
padding-left:1.5em;
letter-spacing:-0.3px;
color:#fff;
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs ul li a{
color:#e1a416;
text-decoration:underline;
display:block;
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs ul li:nth-child(n+2) a{
max-width:4em;
overflow:hidden;
white-space:nowrap;
-webkit-text-overflow:ellipsis;
text-overflow:ellipsis;
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs ul li:last-child a{
max-width:11em;
color:#fff;
text-decoration:none;
}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs li:first-child{padding-left:0;}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs li:first-child:before{display:none;}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs li a.hover{text-decoration:none;}
#bar_navi_wrapper .bar_naviCommonBreadcrumbs li a.hover,
#bar_navi_wrapper .bar_naviCommonBreadcrumbs li a:visited{color:#fff;}


/* footer */
#suntory_contents #bn_common_footer {
	background: #3c2211;
	padding: 30px 0;
    /*width: 100vw;*/
    /*overflow: hidden;*/
	position: relative;
}
#suntory_contents #bn_common_footer h1 {
	width: 160px;
	height: 75px;
	background: url(/webcommon/rn_common/svg/logo_footer.svg) no-repeat 0 0;
	background-size: 160px auto;
	text-indent: -9999px;
	margin: 0 auto 25px
}
#suntory_contents #bn_common_footer .search_by_pref {
	width: 100%;
	margin: 0 auto
}
#suntory_contents #bn_common_footer .search_by_pref ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0
}
#suntory_contents #bn_common_footer .search_by_pref ul::after {
	content: '';
	width: 84vw;
	height: 1px;
	background: #553a22;
	margin: 15px auto 0
}
#suntory_contents #bn_common_footer .menu_function {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 28px auto 30px
}
#suntory_contents #bn_common_footer .menu_contact {
	padding-top: 28px;
	background: url(/webcommon/rn_common/img/bg_footer.png) no-repeat center 0;
	background-size: auto 15px;
	display: flex;
	justify-content: center;
	margin: 0 auto
}
#suntory_contents #bn_common_footer .menu_contact li {
	margin: 0
}
#suntory_contents #bn_common_footer .menu_contact li:first-child {
	/*margin-right: 31.333333333333vw;*/
	margin-right: 20vw;
}
#suntory_contents #bn_common_footer .menu_contact li a::after {
	content: '';
	width: 1px;
	height: 3.4666666666667vw;
	background: #754;
	position: absolute;
	top: calc(50% - 1.73333333333335vw);
	/*right: -15.666666666667vw;*/
	right: -10.5vw;
}
#suntory_contents #bn_common_footer .search_by_pref li,
#suntory_contents #bn_common_footer .menu_function li {
	margin: 0 2.6666666666667vw 15px
}
#suntory_contents #bn_common_footer .search_by_pref li a,
#suntory_contents #bn_common_footer .menu_function li a,
#suntory_contents #bn_common_footer .menu_contact li a {
	font-size: 3.4666666666667vw;
	color: #fff;
	text-decoration: none;
	position: relative
}
#suntory_contents #bn_common_footer .search_by_pref li a::after,
#suntory_contents #bn_common_footer .menu_function li a::after {
	content: '';
	width: 1px;
	height: 3.4666666666667vw;
	background: #754;
	position: absolute;
	top: calc(50% - 1.73333333333335vw);
	right: -2.6666666666667vw
}

/* pc */
@media only screen and (min-width: 768px){ 
    
    /* #bar_navi_wrapper .bar_naviCommon header
    -------------------------------------------------- */
    #bar_navi_wrapper .bar_naviCommon header .bar_naviCommon_in{
    margin: 0 auto;
    width: 768px;
    }
    
    /* footer */
    #suntory_contents #bn_common_footer .search_by_pref {
    width: 1080px;
    margin: 0 auto
    }
    #suntory_contents #bn_common_footer .search_by_pref ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0
    }
    #suntory_contents #bn_common_footer .search_by_pref ul::after {
    content: '';
    width: 1080px;
    height: 1px;
    background: #553a22;
    margin: 15px auto 0
    }
    #suntory_contents #bn_common_footer .menu_function {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 28px auto 30px
    }
    #suntory_contents #bn_common_footer .menu_contact {
    padding-top: 28px;
    width: auto;
    background: url(/webcommon/rn_common/img/bg_footer.png) no-repeat center 0;
    background-size: auto 15px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    }
    #suntory_contents #bn_common_footer .menu_contact li:first-child {
    margin-right: 70px;
    }
    #suntory_contents #bn_common_footer .menu_contact li a::after {
    content: '';
    width: 1px;
    height: 15px;
    background: #754;
    position: absolute;
    top: calc(50% - 7.5px);
    right: -35px
    }
    #suntory_contents #bn_common_footer .menu_contact li:last-child a::after {
    content: '';
    width: 0;
    height: 0;
    background: none;
    position: absolute;
    top: 0;
    right: 0
    }
    #suntory_contents #bn_common_footer .search_by_pref li,
    #suntory_contents #bn_common_footer .menu_function li {
    margin: 0 15px 15px
    }
    #suntory_contents #bn_common_footer .search_by_pref li a,
    #suntory_contents #bn_common_footer .menu_function li a,
    #suntory_contents #bn_common_footer .menu_contact li a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    position: relative
    }
    #suntory_contents #bn_common_footer .search_by_pref li a:hover,
    #suntory_contents #bn_common_footer .menu_function li a:hover,
    #suntory_contents #bn_common_footer .menu_contact li a:hover {
    text-decoration: underline;
    }
    #suntory_contents #bn_common_footer .search_by_pref li a::after,
    #suntory_contents #bn_common_footer .menu_function li a::after {
    content: '';
    width: 1px;
    height: 15px;
    background: #754;
    position: absolute;
    top: calc(50% - 7.5px);
    right: -15px
    }
}





/*==================================================
#bar_navi_contents
================================================== */
#bar_navi_contents #bar_navi_contents_hd section,
#bar_navi_contents #bar_navi_contents_main section,
#bar_navi_contents #bar_navi_contents_ft section{
width:100%;
max-width:768px;
margin:0 auto;
text-align:left;
}

/*==================================================
#bar_navi_contents #bar_navi_contents_hd.select_hd_ft
#bar_navi_contents #bar_navi_contents_ft.select_hd_ft
================================================== */
#bar_navi_contents .select_hd_ft section{
background:#f0e9e3;
padding:1.4em 0em 1.5em 0em;
}
/* #bar_navi_contents .select_hd_ft h2
-------------------------------------------------- */
#bar_navi_contents .select_hd_ft h2{
font-size:1.3em;
line-height:0.7em;
font-weight:600;
text-align:center;
}

#select_pref #bar_navi_contents #bar_navi_contents_ft.select_hd_ft{
display:none;/* 都道府県選択のフッターは無し */
}
/* #bar_navi_contents .select_hd_ft p.back_btn
-------------------------------------------------- */
#bar_navi_contents .select_hd_ft p.back_btn a{
cursor:pointer;
position:relative;
padding:0 1.3em;
color:#666;
}
#bar_navi_contents .select_hd_ft p.back_btn a:before{
display:block;
content:'';
width:0.5em;
height:0.5em;
position:absolute;
top:0.475em;
left:0.5em;
border-left:0.15em solid #666;
border-top:0.15em solid #666;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
#bar_navi_contents .back_btn a.hover{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)";}
/* #select_area #bar_navi_contents .select_hd_ft
-------------------------------------------------- */
#select_area #bar_navi_contents .select_hd_ft section:after{content:"";clear:both;display:block;}
#select_area #bar_navi_contents .select_hd_ft h2,
#select_area #bar_navi_contents .select_hd_ft p.back_btn{
display:block;
float:left;
}
#select_area #bar_navi_contents .select_hd_ft p.back_btn{width:40vw;}
@media only screen and (min-width:768px){/*PC時調整*/
#select_area #bar_navi_contents .select_hd_ft p.back_btn{width:24em;}
}

/*==================================================
都道府県選択
#select_pref #bar_navi_contents #bar_navi_contents_main .select_list dl
================================================== */
#select_pref .select_list dl dt{
padding:1.4em 1em 1.5em 1em;
font-size:1.3em;
line-height:0.7em;
font-weight:600;
cursor:pointer;
position:relative;
border-bottom:1px solid #bebebe;
background:#fff;
}
#select_pref .select_list dl dt.hover{background:#ddd;}

#select_pref .select_list dl dt:before,
#select_pref .select_list dl dt:after{
display:block;
content:'';
width:2px;
height:1.05em;
background:#555;
position:absolute;
top:1.2em;
right:1.6em;
}
#select_pref .select_list dl dt:before{
width:1.1em;
height:2px;
top:1.65em;
right:1.1em;
}
/* #select_pref .select_list dl dt.open
------------------------------ */
#select_pref .select_list dl dt.open{background:#d5d5d5;}
#select_pref .select_list dl dt.open:after{display:none;}
/* #select_list_pref dl dd
-------------------------------------------------- */
#select_list_pref dl dd{display:none;}
/*==================================================
都道府県選択／地域選択 共通選択リスト部分
#bar_navi_contents #bar_navi_contents_main .select_list
================================================== */
#bar_navi_contents_main .select_list{
background:#fff;
}
#bar_navi_contents_main .select_list ul li{
border-bottom:1px solid #bebebe;
}
#bar_navi_contents_main .select_list ul li a{
display:block;
font-size:1.3em;
line-height:0.7em;
font-weight:500;
color:#ee2200;
padding:1.4em;
position:relative;
pointer-events:auto;
cursor:pointer;
}
#bar_navi_contents_main .select_list ul li a:before{
display:block;
content:'';
width:0.8em;
height:0.8em;
position:absolute;
top:38%;
right:1.3em;
border-left:0.1em solid #ff4400;
border-top:0.1em solid #ff4400;
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
}
#bar_navi_contents_main .select_list ul li a.hover{
color:#ff4400;
background:#f4f4f4;
}
#bar_navi_contents_main .select_list ul li.none a,
#bar_navi_contents_main .select_list ul li.none a:before{
color:#ccc;
pointer-events:none;
cursor:default;
border-color:#ccc;
}
/*==================================================
地域選択
#select_area #bar_navi_contents #bar_navi_contents_main .select_list dl
================================================== */
#select_area .select_list dl dt{
padding:1.2em 1em 1.3em 0.9em;
font-size:1.3em;
line-height:0.7em;
letter-spacing:-1.1px;
font-weight:600;
border-bottom:1px solid #bebebe;
background:#ddd;
}
#select_area .select_list dl dd ul li a{
font-size:1.2em;
padding:1.4em 1.2em 1.4em 1.1em;
}
#select_area .select_list dl dd ul li a:before{
width:0.8em;
height:0.8em;
top:38%;
right:1.4em;
}