@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 {
	width: 100%;
	margin: 0 0 10px 0;
}

	#container .contents h2 img {
		width: 100%;
		height: auto;
	}


/* #container .contents #contents_hd
======================================================================= */
/*
#contents_hd h1{
background:#bf8c00;
padding:12px 15px;
font-size:14px;
line-height:110%;
font-weight:bold;
color:#fff;
text-align:left;
margin:0 0 10px 0;
}
*/

#contents_hd .sns_btn{
padding:0 5px 0 0;
}


/* #main_visual
======================================================================= */
#main_visual {
	width: 100%;
	margin-top: 5px;	
}
	
	#main_visual img {
			width: 100%;
			height: auto;
	}	

 #main_visual p#main_caution {
	 padding: 6.25% 3.125% 8% 3.125%;
	 font-size: 16px;
	 color: #ffbf94;
	 text-align: left;
	 line-height: 150%;
 }



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



/* テイスティングカウンター/ショップ
/* #container .contents #main_contents .event_info_box
/*==================================== */

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

/*
#container .contents #main_contents .event_info_box{
padding:0 0 0 0;

}
#container .contents #main_contents .event_info_box ul{
margin: 0 4.6%;
width: 90.8%;
}

#container .contents #main_contents .event_info_box ul li{
background-color: #FFF;
margin:0 0 12px 0;
}

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

#container .contents #main_contents .event_info_box ul li h4{
font-weight:bold;
font-size: 18px;
color: #b80000;
}

#container .contents #main_contents .event_info_box ul li h5{
font-weight:normal;
font-size: 14px;
color: #b80000;
}

#container .contents #main_contents .event_info_box ul li .ph{
	width: 170px;
	margin-left: 10px;
	float: right;
}

#container .contents #main_contents .event_info_box ul li .ph img{
	width: 100%;
	height: auto;
}

@media screen and (max-width: 450px) {
#container .contents #main_contents .event_info_box ul li .ph{
	width: 150px;
}
}

@media screen and (max-width: 400px) {
#container .contents #main_contents .event_info_box ul li .ph{
	width: 130px;
}
}

@media screen and (max-width: 350px) {
#container .contents #main_contents .event_info_box ul li .ph{
	width: 110px;
}
}
*/


/* #facility_contents
======================================================================= */
#facility_contents {
	width: 100%;
	margin-top: 5.6%;
	padding-bottom: 15.6%;
	background-color: #FAEDCD;
}


    #facility_contents h3 {
	   width: 100%;
	   /*margin-bottom: 3.9%;*/	 
    }
 	 
	   #facility_contents h3 img {
	 	  width: 100%;
	  	  height: auto;
		  vertical-align: top;
	   }

    #facility_contents .title_subimg {
	   width: 100%;
    }
 	 
	   #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 .wrapper {
		margin: 4.6% 4.6% 6.2% 4.6%;
	} 

	#facility_contents .sub_block {
		margin: 4.6% 4.6% 8% 4.6%;
	}


	#facility_contents ul.caution {
		margin-top: 3.2%;
		font-size: 16px;
		line-height: 160%;
		text-indent: -0.6em;
		padding-left: 0.6em;
	}

		#facility_contents ul.caution li:before {
			content: "*";

			
		}
		
		#facility_contents ul.caution li.caution_important {
			color: #c43c00;
		}





/* #history_block
======================================================================= */

#history_block #floor_guide {
	width: 88.8%;
	margin: 0 auto 7% auto;
}

	#history_block #floor_guide #floor1_guide {
		width: 100%;
		margin-bottom: 7%;
	}

		#history_block #floor_guide .floor_label {
			width: 14.6%;
			float: left;		
		}
		
			#history_block #floor_guide .floor_label img {
				width: 100%;
				height: auto;
			}

		#history_block #floor_guide .floor_ketch {
			width: 81.25%;
			float: right;			
		}
		
			#history_block #floor_guide .floor_ketch img {
				width: 100%;
				height: auto;
			}


	#history_block #histories {
		width: 100%;
	}

		#histories .histories_every {
			margin-bottom: 7%;			
		}
		
		#histories .histories_every h4 {
			margin-bottom: 10px;
			color: #432412;
			font-size: 25px;
			font-weight: bold;
			padding-left: 35px;
			line-height: 100%;
		}

		#histories .histories_every h4#history1 {
			background:  url(https://www.suntory.com/factory/yamazaki/facility/img/history1_number.png) left top no-repeat;
			background-size: 25px 25px;	
		}

		#histories .histories_every h4#history2 {
			background:  url(https://www.suntory.com/factory/yamazaki/facility/img/history2_number.png) left top no-repeat;
			background-size: 25px 25px;
			margin-top: 25px;	
		}

		#histories .histories_every h4#history3 {
			background:  url(https://www.suntory.com/factory/yamazaki/facility/img/history3_number.png) left top no-repeat;
			background-size: 25px 25px;
			margin-top: 25px;	
		}




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





/* #tasting_block
======================================================================= */

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


	#tasting_block  #last_order {
		color: #32517;
		font-size: 18px;
		font-weight: bold;
		margin-top: 4.6%;
		line-height: 140%;
	}

		#tasting_block  #last_order span.small {
			font-size: 16px;
			font-weight: normal;
			display: block;	
		}



	#tasting_block #tasting_information {
		margin: 4.6% 4.6% 13% 4.6%;
	}

	#tasting_block #faq {
		margin: 2.3% 0;
		padding: 2.3% 4.6%;
		border: 1px solid #322517;
		font-size: 18px;
		letter-spacing: 0.5px;	
		line-height: 160%;
	}

		#tasting_block #faq #faq_title {
			color: #c43c00;
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 5px;
		}

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





/* #shop_block
======================================================================= */

	#shop_block #shop_img {
		margin: 6.2% 7.8% 4.6% 7.8%;	
	}

		#shop_block #shop_img img {
			width: 	46.3%;
			height: auto;
		}
		
		#shop_block #shop_img img#shop_img1 {
			float: left;
		}
		
		#shop_block #shop_img img#shop_img2 {
			float: right;
		}



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


	#shop_block #shop_explain span#open_hour {
		display: block;
		margin-top: 20px;
		color: #32517;
		font-size: 16px;
		font-weight: bold;
	}


/* #library_block
======================================================================= */

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

/*
@media screen and (max-width: 600px) { 
	#main_visual p#main_caution { font-size: 14px; }
	#facility_contents p.explain { font-size: 16px; }	
	#facility_contents p.explain_head { font-size: 16px; }
	#tasting_block #tasting_information #last_order { font-size: 16px; }
	#tasting_block #faq #faq_title { font-size: 18px; }	
	#tasting_block #faq { font-size: 16px; }
	#facility_contents ul.caution { font-size: 14px; }	
	#tasting_block #tasting_information #last_order span.small { font-size: 14px; }			
}

@media screen and (max-width: 500px) { 
	#main_visual p#main_caution { font-size: 12px; }
	#facility_contents p.explain { font-size: 14px; }
	#facility_contents p.explain_head { font-size: 14px; }
	#tasting_block #tasting_information #last_order { font-size: 14px; }	
	#tasting_block #faq #faq_title { font-size: 16px; }	
	#tasting_block #faq { font-size: 14px; }
	#facility_contents ul.caution { font-size: 12px; }	
	#tasting_block #tasting_information #last_order span.small { font-size: 12px; }										
}


@media screen and (max-width: 400px) { 
	#main_visual p#main_caution { font-size: 10px; }
	#facility_contents p.explain { font-size: 12px; }
	#facility_contents p.explain_head { font-size: 12px; }
	#tasting_block #tasting_information #last_order { font-size: 12px; }
	#tasting_block #faq #faq_title { font-size: 14px; }	
	#tasting_block #faq { font-size: 12px; }
	#facility_contents ul.caution { font-size: 10px; }	
	#tasting_block #tasting_information #last_order span.small { font-size: 10px; }											
}
*/


@media screen and (max-width: 500px) { 
	#main_visual p#main_caution { font-size: 16px; }
	#facility_contents p.explain { font-size: 18px; }	
	#facility_contents p.explain_head { font-size: 18px; }
	#tasting_block #tasting_information #last_order { font-size: 18px; }
	#tasting_block #faq #faq_title { font-size: 20px; }	
	#tasting_block #faq { font-size: 18px; }
	#facility_contents ul.caution { font-size: 16px; }	
	#tasting_block #tasting_information #last_order span.small { font-size: 16px; }			

	#histories .histories_every h4 { font-size: 23px; padding-left: 33px; }
    #histories .histories_every h4#history1 { background-size: 23px 23px; }
    #histories .histories_every h4#history2 { background-size: 23px 23px; }
    #histories .histories_every h4#history3 { background-size: 23px 23px; }
}


@media screen and (max-width: 420px) { 
	#main_visual p#main_caution { font-size: 14px; }
	#facility_contents p.explain { font-size: 16px; }
	#facility_contents p.explain_head { font-size: 16px; }
	#tasting_block #tasting_information #last_order { font-size: 16px; }	
	#tasting_block #faq #faq_title { font-size: 18px; }	
	#tasting_block #faq { font-size: 16px; }
	#facility_contents ul.caution { font-size: 14px; }	
	#tasting_block #tasting_information #last_order span.small { font-size: 14px; }										

	#histories .histories_every h4 { font-size: 21px; padding-left: 31px; }
    #histories .histories_every h4#history1 { background-size: 21px 21px; }
    #histories .histories_every h4#history2 { background-size: 21px 21px; }
    #histories .histories_every h4#history3 { background-size: 21px 21px; }

}


@media screen and (max-width: 370px) { 
	#main_visual p#main_caution { font-size: 12px; }
	#facility_contents p.explain { font-size: 14px; }
	#facility_contents p.explain_head { font-size: 14px; }
	#tasting_block #tasting_information #last_order { font-size: 14px; }
	#tasting_block #faq #faq_title { font-size: 16px; }	
	#tasting_block #faq { font-size: 14px; }
	#facility_contents ul.caution { font-size: 12px; }	
	#tasting_block #tasting_information #last_order span.small { font-size: 12px; }	
		
	#histories .histories_every h4 { font-size: 19px; padding-left: 29px; }
    #histories .histories_every h4#history1 { background-size: 19px 19px; }
    #histories .histories_every h4#history2 { background-size: 19px 19px; }
    #histories .histories_every h4#history3 { background-size: 19px 19px; }
	
}