@charset "utf-8";

/* clearfix */

.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
 
.clearfix {
    min-height: 1px;
}
 
* html .clearfix {
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}
 
.both{
    clear:both;
}



/* reset */

h1,h2,h3,h4 {
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
}

ul,li,dl,dd,dt  {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

img {
	vertical-align: bottom;
}

a {
	text-decoration: none;
}

a:hover {
	cursor: pointer;
}






/* #container .contents
======================================================================= */
#container .contents{
}

.pc_only {
display: none;
}


/* 重要なお知らせ
======================================================================= */
#container .contents .notice_important, #container .contents .notice_important　{
    display: block;
}

#container .contents .notice_important, #container .contents .notice_important ul li {
    display: block;
}



/* h2
======================================================================= */
#container .contents h2 {
	margin: 0 0 10px 0;
	background-color: #6ebe06;
	color: #fff;
	font-weight: bold;
	text-align: left;
	padding: 15px 20px;
	font-size: 26px;
}

@media screen and (max-width: 500px) { #container .contents h2 { font-size: 24px; } }
@media screen and (max-width: 370px) { #container .contents h2 { font-size: 22px; } }

/* #container .contents #contents_hd
======================================================================= */
#contents_hd .sns_btn{
padding:0 5px 0 0;
}


/* #main_visual
======================================================================= */
#main_visual {
	margin-top: 5px;
}

 #main_visual img {
	width: 100%;
	height: auto;
 }

 #main_visual #main_map { position: relative; }

 #main_visual #main_map ul a li { position: absolute; }

 #main_visual #main_map ul a li#link01 { width: 36%; top: 18%; left: 3%; }
 #main_visual #main_map ul a li#link02 { width: 27%; top: 20%; left: 8%; }
 #main_visual #main_map ul a li#link03 { width: 33%; top: 12%; left: 42%; }
 #main_visual #main_map ul a li#link04 { width: 27%; top: 48%; left: 35%; }
 #main_visual #main_map ul a li#link05 { width: 21%; top: 24%; left: 76%; }

 #main_visual #main_info {
 	 padding: 6.25% 3.125% 8% 3.125%;
	 letter-spacing: 0.5px;
 }
	
 #main_visual #main_info p {
	 font-size: 12px;
	 color: #d30303;
	 text-align: left;
	 line-height: 150%;
 }

 #main_visual #main_info p#main_lead {
	 font-size: 14px;
	 padding-bottom: 5px;
 }



/* #container .contents #main_contents
======================================================================= */
#main_contents{
padding: 0 3.125%;
background-color: #f3f3f3;
text-align: left;
color: #322517;
}



/* BAR/ショップ/ウイスキー博物館/レストラン
/* #container .contents #main_contents .event_info_box
/*==================================== */

/* common/css/common_sp.cssで定義　*/


/* レストランメニュー用　*/

#container .contents #main_contents .event_info_box.menu_box ul li {
	background-image:
    url(https://www.suntory.com/factory/hakushu/facility/img/bg_menu_hd_sp.gif), /* 最前面 背景画像 */
    url(https://www.suntory.com/factory/hakushu/facility/img/bg_menu_ft_sp.gif),
    url(https://www.suntory.com/factory/hakushu/facility/img/bg_menu_mid_sp.gif);

  background-repeat:
    no-repeat, /* 最前面 背景画像 */
		no-repeat,
		repeat-y;

  background-position:
    top, /* 最前面 背景画像 */
		bottom,
		top;
		
	background-size: 100%;
}

#container .contents #main_contents .event_info_box.menu_box ul li .box {
	padding: 8%;
}

#container .contents #main_contents .event_info_box.menu_box ul li h4 {
	font-size: 16px;
	color: #c86134;
}

#container .contents #main_contents .event_info_box.menu_box ul li h5 {
	font-weight:bold;
	font-size: 13px;
	color: #c86134;
	margin: 0 0 3% 0;
}

#container .contents #main_contents .event_info_box.menu_box ul li .txt_area {
	font-size: 14px;
}

#container .contents #main_contents .event_info_box.menu_box ul li .ph {
	border: 2px solid #fff;
}



/* #facility_contents
======================================================================= */
#facility_contents {
	width: 100%;
	margin: 5.6% 0 15.6%;
	background-color: #f3f3f3;
}

    #facility_contents h3 {
	   width: 100%; 
    }
 	 
	   #facility_contents h3 img {
	 	  width: 100%;
	  	height: auto;
	   }

    #facility_contents .title_subimg {
			width: 100%;
			margin-bottom: 3.9%;
    }
 	 
	   #facility_contents .title_subimg img {
	 	  width: 100%;
		  height: auto;
	   }

	#facility_contents p.explain {
		font-size: 18px;
		line-height: 160%;
		letter-spacing: 0.3px;
	}

	#facility_contents p.explain_head {
		font-size: 18px;
		line-height: 160%;
		letter-spacing: 0.3px;		
	}
	
	#facility_contents p.explain_head span.open {
		display: block;
		padding-top: 3%;
		color: #91673a;
		font-size: 15px;
		font-weight: bold;
		letter-spacing: 0.5px;
	}
	#facility_contents p.explain_head span.caution_open {
		display: block;
		font-size: 13px;
		letter-spacing: 0.3px;
	}

	#facility_contents .wrapper {
		margin: 0 4.6% 6.2% 4.6%;
	} 

	#facility_contents .sub_block {
		margin: 0 0 3.9% 0;
	}


	#facility_contents ul.caution {
		margin-top: 3.2%;
		font-size: 12px;
		line-height: 160%;
		letter-spacing: 0.3px;
	}
	
		#facility_contents ul.caution li {
			text-indent: -1em;
			padding-left: 1em;
		}
		
		#facility_contents ul.caution li:before {
			content: "* ";
		}
		
		#facility_contents ul.caution li.caution_important {
			color: #d30303;
		}

/* #visitor_block
======================================================================= */
#visitor_block {
	margin-bottom: 13%;
}


/* #bar_block
======================================================================= */
#bar_block {
	margin-bottom: 13%;
}	

	#bar_block #bar_img img {
		float: right;
		width: 32.2%;
		height: auto;
		margin-left: 10px;
	}		



/* #shop_block
======================================================================= */
#shop_block {
	margin-bottom: 13%;
}	

	#shop_block #shop_img img {
		float: right;
		width: 32.2%;
		height: auto;
		margin-left: 10px;
	}		

	#shop_block #shop_information {
		margin: 0 0 13% 0;
	}

#shop_block #shop_caution {
    color: #d30303;
    font-size: 16px;
    line-height: 160%;
	margin: 10px 0 0 0;
	letter-spacing: 0.3px;
}


/* #museum_block
======================================================================= */
#museum_block {
	margin-bottom: 13%;
}	


/* #history_block
---------------------------------------------- */
#history_block {
	margin: 6% 0;
}	

	#history_block #histories {
		width: 100%;
	}

		#histories .histories_every {
			margin-bottom: 7%;			
		}
		
		#histories .histories_every h4 {
			margin-bottom: 3%;
			width: 100%;
		}

			#histories .histories_every h4 img {
				width: 100%;
				height: auto;			
			}

		#histories .histories_img {
			margin-top: 3%;
			width: 100%;
		}
		
			#histories .histories_img img {
				width: 100%;
				height: auto;
			}



/* #restaurant_block
======================================================================= */
#restaurant_block {
	margin-bottom: 13%;
}


	/* #menu
	---------------------------------------------- */	
	#restaurant_block #menu {
		margin: 5% 0 10%;
	}
	
		#restaurant_block #menu #menu_caution {
			margin-bottom: 5%;
			letter-spacing: 0.3px;
		}
		
		#restaurant_block #menu #menu_caution ul li {
			font-size: 14px;
			line-height: 160%;
			text-indent: -1em;
			padding-left: 1em;
			color: #432412;
		}
		
		#restaurant_block #menu #menu_caution ul li a {
			text-decoration: underline;
		}
		
		#restaurant_block #menu #gourmet img {
			width: 80%;
			height: auto;
		}
		
		
	/* #faq
	---------------------------------------------- */	
	#restaurant_block #faq {
		margin: 2.3% 0;
		padding: 4.6%;
		border: 1px solid #432412;
		font-size: 18px;
		letter-spacing: 0.5px;	
		line-height: 160%;
		background-color: #fff;
	}

		#restaurant_block #faq #faq_title {
			color: #7d2506;
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 5px;
		}

		#restaurant_block #faq #faq_devide {
			padding-bottom: 5px;
			margin-bottom: 5px;
			border-bottom: 1px solid #432412;
		}



/* #caution_block
======================================================================= */
#caution_block {
	margin: 3.9% 0;
}
	
	#caution_block ul li {
		color: #d30303;
		font-size: 14px;
		text-indent: -1em;
		padding-left: 1em;
		line-height: 160%;
		letter-spacing: 0.3px;
	}



@media screen and (max-width: 500px) { 
	#main_visual #main_info p { font-size: 16px; }
	#main_visual #main_info p#main_lead { font-size: 18px; }
	#facility_contents p.explain_head { font-size: 18px; }
	#restaurant_block #faq #faq_title { font-size: 20px; }	
	#restaurant_block #faq { font-size: 18px; }
	#facility_contents ul.caution { font-size: 16px; }		
}


@media screen and (max-width: 420px) { 
	#main_visual #main_info p { font-size: 14px; }
	#main_visual #main_info p#main_lead { font-size: 16px; }
	#facility_contents p.explain_head { font-size: 16px; }
	#restaurant_block #faq #faq_title { font-size: 18px; }	
	#restaurant_block #faq { font-size: 16px; }
	#facility_contents ul.caution { font-size: 14px; }									
}


@media screen and (max-width: 370px) { 
	#main_visual #main_info p { font-size: 12px; }
	#main_visual #main_info p#main_lead { font-size: 14px; }
	#facility_contents p.explain_head { font-size: 14px; }
	#restaurant_block #faq #faq_title { font-size: 16px; }	
	#restaurant_block #faq { font-size: 14px; }
	#facility_contents ul.caution { font-size: 12px; }	
}


/*202310*/
#facility_contents #bar_information {
	width: calc( 100% - 42px); 
	border: 1px solid #F2D072;
	background-color: #FDF8E9;
	padding: 20px;
}
#facility_contents #bar_information ul.caution {
	margin-top: 0;
}
#facility_contents #bar_information ul.caution li {
	font-size: 16px;
	color: #D30303;
	line-height: 150%;
}