@charset "utf-8";

body,html,h1,h2,h3,h4,p,ul,li {
	margin: 0;
	padding: 0;
	color: #2a2a2a;
	font-family: "ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	
}

li {
	list-style-type: none;
}

a,a:hover {
	cursor: pointer;
	text-decoration: none;
	color: #2a2a2a;
}

a:hover {
	opacity: 0.7;
}


.sp_only {
	display: none;
}

#wrapper {
	width: 100%;
    /*border-bottom: 1px solid #c7cdd3;*/
}


/*ページトップ*/
#top {
	width: 100%
}

#top #main_visual_wrap {
	width: 100%;
	background: url(../img/n_main_1.png) no-repeat 50% 0;
	background-size: 100% auto;
}

#top #main_visual {
	position: relative;
	width: 100%;
	padding-bottom: 34.364%;	
	background-repeat: no-repeat;
	background-position: 50% 0;	
	background-size: cover;	
}

	#top #main_visual h1 {
		display: none;
	}

	#top #main_visual ul#main_visual_bnrs {
		display: none;
    	position: relative;
    	width: 100%;
	}

	#top #main_visual ul#main_visual_bnrs li{
		display:block;
		width:100%;
		position:absolute;
		top:0;
		left:0;
		padding-bottom: 34.364%;	
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: cover;
	}

#top #top_btn {
	width: 100%;
	height: 126px;
	background-color: #e2e1dc;
}

	#top #top_btn ul {
		width: 740px;
		height: 80px;
		margin: 0 auto;
		padding: 23px 0;
    }

	#top #top_btn ul li {
		width: 320px;
		height: 80px;
		line-height: 80px;
		border-radius: 5px;
		background-color: #fff;
    }

	#top #top_btn ul li#top_btn1 {
		float: left;
	}

	#top #top_btn ul li#top_btn2 {
		float: right;
	}

	#top #top_btn ul li a {
		display: block;
		padding-left: 95px;
		color: #333;
		font-size: 24px;
		font-weight: bold;
		border-radius: 5px;
    }

	#top #top_btn ul li#top_btn1 a {
		background: url(../img/n_icon_factory.png) 30px center no-repeat;
		background-size: 43px 26px;
		background-color: #fff;
	}

	#top #top_btn ul li#top_btn2 a {
		background: url(../img/n_icon_location.png) 52px center no-repeat;
		background-size: 26px 30px;
		background-color: #fff;
	}

	#top #top_btn ul li#top_btn1 a:hover {
		background: url(../img/n_icon_factory_hover.png) 30px center no-repeat;
		background-size: 43px 26px;
		background-color: #85ca62;
		color: #fff;
	}

	#top #top_btn ul li#top_btn2 a:hover {
		background: url(../img/n_icon_location_hover.png) 52px center no-repeat;
		background-size: 26px 30px;
		background-color: #f6a66c;
		color: #fff;
	}



/*工場名からさがす*/

#factory {
	max-width: 1164px;
	margin: 0 auto;
}

	#factory h2 {
		display:none;
	}

	#factory ul#factory_list {
		width: 100%;
		overflow: hidden;
	}
	
	#factory ul#factory_list li {
		width: 50%;
		padding-bottom: 45.9%;
    	position: relative;
		float: left;
	}

	#factory ul#factory_list li#intro_box_beer {
		background: url(../img/n_product_beer1.png) top left no-repeat,url(../img/n_product_beer2.png) bottom 3% right 10px no-repeat;
		background-size: 100%,auto 34%;
		background-color: #f2ab0d;
	}

	#factory ul#factory_list li#intro_box_whisky {
		background: url(../img/n_product_whisky1.png) top left no-repeat,url(../img/n_product_whisky2.png) bottom 3% right 10px no-repeat;
		background-size: 100%,auto 34%;
		background-color: #743a1d;
	}

	#factory ul#factory_list li#intro_box_wine {
		background: url(../img/n_product_wine1.png) top left no-repeat,url(../img/n_product_wine2.png) bottom 3% right 10px no-repeat;
		background-size: 100%,auto 34%;
		background-color: #990555;
	}

	#factory ul#factory_list li#intro_box_water {
		background: url(../img/n_product_water1.png) top left no-repeat,url(../img/n_product_water2.png) bottom 3% right 10px no-repeat;
		background-size: 100%,auto 34%;
		background-color: #55bbdd;
	}

	#factory ul#factory_list li h3 {
		font-size: 26px;
		color: #fff;
		letter-spacing: 1px;
		position: absolute;
		top: 62%;
    	left: 5.5%;
	}

		#factory ul#factory_list li ul.factories {
       		width: 100%;
			height: auto;
        	margin: 20px 0 0 0;
			padding: 0; 
			position: absolute;
			top: 67%;
    		left: 5.5%;
		}

		#factory ul#factory_list li ul.factories h4 {
			color: #fff;
		}	

		#factory ul#factory_list li ul.factories h4:hover {
			text-decoration: underline;
		}	

		#factory ul#factory_list li ul.factories li {
			width: 100%;
			height: auto;
        	margin: 0 0 12px 0;
			padding: 0;
		}

		#factory ul#factory_list li ul.factories li a {
			color: #fff;
			font-size: 16px;
			display: inline-block;
			padding-right: 20px;
		}

		#factory ul#factory_list li ul.factories li span.pref:before {
			content: "【";
		}

		#factory ul#factory_list li ul.factories li span.pref:after {
			content: "】";
		}

		#factory ul#factory_list li ul.factories li span.small {
			font-size: 12px;
		}

		#factory ul#factory_list li ul.factories li span.small:before {
			content: "〈";
		}

		#factory ul#factory_list li ul.factories li span.small:after {
			content: "〉";
		}

		#factory ul#factory_list li ul.factories li span.factory_name {
			padding-right: 17px;
		 	background: url(../img/n_icon_arrow2.png) right center no-repeat;
    		background-size: 9px 14px;
			padding-left: 5px;
	    }


@media screen and (max-width: 1050px) { 
	#factory ul#factory_list li h3 { font-size: 24px; }
	#factory ul#factory_list li ul.factories li a { font-size: 14px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 11px; }
	#factory ul#factory_list li ul.factories li span.factory_name {
     background: url(../img/n_icon_arrow2.png) right center no-repeat;
     background-size: 8px 12px;
	}
}


/*場所からさがす*/

#location_wrap {
	width: 100%;
	height: 770px;
	background-color: #f1f0ed;
}

	#location {
		max-width: 1164px;
		margin: 0 auto;
		padding: 60px 0 0 0;
		height: 733px;
		position: relative;
    }

	#location h2 {
		height: 44px;
		padding-left: 50px;
		background: url(../img/n_icon_location2.png) left top no-repeat;
		background-size: 34px 44px;
    }

	h2 {
		font-size: 34px;
	}

	#location p.lead {
		margin: 15px 0;
    }

	p.lead {
		font-size: 15px;
	}

	#location  ul#location_list {
		position: relative;
		z-index: 15;	
	}

		#location  ul#location_list li {
			position: absolute;
			width: 200px;
			height: 180px;
			z-index: 15;
			background-color: #fff;
		}

		#location  ul#location_list li a {
			display: block;
			width: 200px;
			height: 180px;
		}

		#location  ul#location_list li a h3 {
			padding-top: 102px;
			height: 27px;
			line-height: 27px;
			font-size: 14px;
			color: #2a2a2a;
			font-weight: bold;
			text-align: center;
		}
			
		#location ul#location_list li#location_yamazaki a h3 { 
			background: url(../img/n_factory_yamazaki.png) left top no-repeat;
			background-size: 200px 102px;
        }

		#location ul#location_list li#location_okudaisen a h3 { 
			background: url(../img/n_factory_okudaisen.png) left top no-repeat;
			background-size: 200px 102px;
        }

		#location ul#location_list li#location_kyushu-kumamoto a h3 { 
			background: url(../img/n_factory_kyushu-kumamoto.png) left top no-repeat;
			background-size: 200px 102px; 
        }

		#location ul#location_list li#location_kyoto a h3 { 
			background: url(../img/n_factory_kyoto.png) left top no-repeat;
			background-size: 200px 102px;
        }

		#location ul#location_list li#location_musashino a h3 { 
			background: url(../img/n_factory_musashino.png) left top no-repeat;
			background-size: 200px 102px;
        }

		#location ul#location_list li#location_tominooka a h3 { 
			background: url(../img/n_factory_tominooka.png) left top no-repeat;
			background-size: 200px 102px;
        }

		#location ul#location_list li#location_hakushu a h3 { 
			background: url(../img/n_factory_hakushu.png) left top no-repeat;
			background-size: 200px 102px;
        }

		#location ul#location_list li#location_water a h3 { 
			background: url(../img/n_factory_water.png) left top no-repeat;
			background-size: 200px 102px;
        }
		#location ul#location_list li#location_kitaalps a h3 { 
			background: url(../img/n_factory_kitaalps.png) left top no-repeat;
			background-size: 200px 102px;
        }


		#location  ul#location_list li p.location_name {
			position: relative;
			margin: 0;
			height: 51px;
			line-height: 120%;
			text-align: center;			
		}
		
		#location  ul#location_list li span.location_name_inner {
			position: absolute;
			width: 100%;
    		top: 50%;
   	 		left: 50%;
   			font-size: 16px;
            font-weight: bold;
    		transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
            text-align: center;
			color: #fff;
		}

		#location  ul#location_list li p.location_name span.small2 {
			font-size: 13px;
		}		

		#location ul#location_list li#location_yamazaki { top: 0; left: 0; }
		#location ul#location_list li#location_okudaisen { top: 200px; left: 0; }
		#location ul#location_list li#location_kyushu-kumamoto { top: 400px; left: 0; }
		#location ul#location_list li#location_kyoto { top: 0; left: 220px; }
		#location ul#location_list li#location_musashino { top: 0; left: calc(100% - 200px); }
		#location ul#location_list li#location_tominooka { top: 200px; left: calc(100% - 200px); }
		#location ul#location_list li#location_hakushu { top: 400px; left: calc(100% - 200px); }
		#location ul#location_list li#location_water { top: 400px; left: calc(100% - 420px); }
		#location ul#location_list li#location_kitaalps { top: 200px; left: calc(100% - 420px); }

		#location ul#location_list li#location_yamazaki p.location_name { background-color: #743a1d; }
		#location ul#location_list li#location_okudaisen p.location_name { background-color: #55bbdd; }
		#location ul#location_list li#location_kyushu-kumamoto p.location_name { background-color: #f2ab0d; }
		#location ul#location_list li#location_kyoto p.location_name { background-color: #f2ab0d; }
		#location ul#location_list li#location_musashino p.location_name { background-color: #f2ab0d; }
		#location ul#location_list li#location_tominooka p.location_name { background-color: #990555; }
		#location ul#location_list li#location_hakushu p.location_name { background-color: #743a1d; }
		#location ul#location_list li#location_water p.location_name { background-color: #55bbdd; }
		#location ul#location_list li#location_kitaalps p.location_name { background-color: #55bbdd; }
		
	
	#location  ul#map_list {
	 	position: absolute;
		top: 16%;
		left: 16%;
		z-index: 14;
		width: 770px;
		height: 580px;
		background: url(../img/n_factory_map.png) left top no-repeat;
		background-size: 770px 580px;		
	}

			#location  ul#map_list li {
				width: 24px;
				height: 31px;
				text-indent: -9999px;
				z-index: 15;
				position: absolute;
				transition-duration: 0.5s;
				transform-origin: center bottom 0;
			}

				#location  ul#map_list li#location_musashino_pin { 
					left: 385px;
					top: 398px;
					background:  url(../img/n_pin_beer.png) left top no-repeat;
					background-size: auto 31px;
				}

				#location  ul#map_list li#location_tominooka_pin { 
					left: 360px;
					top: 393px;
					background:  url(../img/n_pin_wine.png) left top no-repeat;
					background-size: auto 31px;
					z-index: 13;
				}

				#location  ul#map_list li#location_water_pin { 
					left: 342px;
					top: 389px;
					background:  url(../img/n_pin_water.png) left top no-repeat;
					background-size: auto 31px;
					z-index:14;
				}
				#location  ul#map_list li#location_kitaalps_pin { 
					left: 345px;
					top: 370px;
					background:  url(../img/n_pin_kitaalps.png) left top no-repeat;
					background-size: auto 31px;
					z-index:14;
				}

				#location  ul#map_list li#location_hakushu_pin { 
					left: 349px;
					top: 389px;
					background:  url(../img/n_pin_whisky.png) left top no-repeat;
					background-size: auto 31px;
				}

				#location  ul#map_list li#location_kyoto_pin { 
					left: 272px;
					top: 405px;
					background:  url(../img/n_pin_beer.png) left top no-repeat;
					background-size: auto 31px;
				}

				#location  ul#map_list li#location_yamazaki_pin { 
					left: 266px;
					top: 405px;
					background:  url(../img/n_pin_whisky.png) left top no-repeat;
					background-size: auto 31px;
					z-index: 14;
				}

				#location  ul#map_list li#location_okudaisen_pin { 
					left: 210px;
					top: 384px;
					background:  url(../img/n_pin_water.png) left top no-repeat;
					background-size: auto 31px;
				}

				#location  ul#map_list li#location_kyushu-kumamoto_pin { 
					left: 112px;
					top: 458px;
					background:  url(../img/n_pin_beer.png) left top no-repeat;
					background-size: auto 31px;
				}		

				#location  ul#map_list li#location_yamazaki_pin.front,
				#location  ul#map_list li#location_water_pin.front,
				#location  ul#map_list li#location_tominooka_pin.front { 
					z-index: 16;
				}


@media screen and (max-width: 1050px) { 
	#location ul#map_list {
    	background: url(../img/n_factory_map.png) left top no-repeat;
    	background-size: 90%;
	}

	#location  ul#map_list li#location_musashino_pin {left:348px;top:355px;}
	#location  ul#map_list li#location_tominooka_pin {left:324px;top: 348px;}
	#location  ul#map_list li#location_water_pin {left:308px;top:345px;}
	#location  ul#map_list li#location_kitaalps_pin {left:310px;top:332px;}
	#location  ul#map_list li#location_hakushu_pin {left:312px;top:345px;}
	#location  ul#map_list li#location_kyoto_pin {left:247px;top:365px;}
	#location  ul#map_list li#location_yamazaki_pin {left:241px;top:365px;}
	#location  ul#map_list li#location_okudaisen_pin {left:190px;top:343px;}
	#location  ul#map_list li#location_kyushu-kumamoto_pin {left:98px;top:418px;}		
}





#mailmaga {
	max-width: 1164px;
	margin: 0 auto;	
}

	#mailmaga #mail_magazine {
		margin: 80px 0 0 0;
		max-width: 1164px;
    }

		#mailmaga #mail_magazine a {
			display: block;
   			width: 100%;
			padding-bottom: 26.11%;
    		background: url(../img/n_banner.png) left top no-repeat;
    		background-size: 100%;			
   		}
	
		#mailmaga #mail_magazine a img {
			display: none;
    	}




	#mailmaga #pagetop {
		position: absolute;
		bottom: -210px;
		right: 0;
		width: 72px;
		height: 72px;
		z-index: 15;
	}

		#mailmaga #pagetop a {
			width: 72px;
			height: 72px;
			display: block;	
		}

		#mailmaga #pagetop a img {
			width: 100%;
			height: auto;
		}


@media screen and (max-width: 960px) {
	#factory,#location,#mailmaga {
		max-width: 960px;
		width: 960px;
	}
	
	#top #main_visual_wrap {
		width: 960px;
	}
	
	#top #top_btn {
		width: 960px;
	}
	
	#mailmaga #mail_magazine {
	    max-width: 960px;
		width: 960px;
		
    }

	
}






@media screen and (max-width: 767px) {

.sp_only {
	display: block;
}
	
.pc_only {
	display: none;
}

#wrapper {
	padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
	
/*ページトップ*/
#top {
	width: 100%;
}

#top #main_visual_wrap {
	background: url(../img/n_main_sp_1.png) no-repeat 50% 0;
	background-size: cover;
	width: 100%;
}

#top #main_visual {
	padding-bottom: 100%;
	background-position: 50% 0;
	background-size: cover;
}

	#top #main_visual ul#main_visual_bnrs li{
		padding-bottom: 100%;
		background-repeat: no-repeat;
		background-position: 50% 0;
	}
	
#top #top_btn {
	width: 90%;
	padding: 5.3% 5%;
	height: auto;
	background-color: #dad9d3;
	overflow: hidden;
}

	#top #top_btn ul {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
    }

	#top #top_btn ul li {
		width: 47%;
		height: auto;
		/*line-height: 80px;*/
    }


	#top #top_btn ul li a {
		display: block;
		text-align: center;
		line-height: 100%;
		padding: 28% 0 6% 0;
    }

	#top #top_btn ul li#top_btn1 a,#top #top_btn ul li#top_btn1 a:hover {
		background: url(../img/n_icon_factory.png) center 15.5%  no-repeat;
		background-size: 26.8% auto;
		background-color: #fff;
		color: #2a2a2a;
	}

	#top #top_btn ul li#top_btn2 a,#top #top_btn ul li#top_btn2 a:hover {
		background: url(../img/n_icon_location.png) center 15.5% no-repeat;
		background-size: 15.3% auto;
		background-color: #fff;
		color: #2a2a2a;
	}
	
	
@media screen and (max-width: 550px) { #top #top_btn ul li a { font-size: 23px; }}
@media screen and (max-width: 520px) { #top #top_btn ul li a { font-size: 22px; }}
@media screen and (max-width: 490px) { #top #top_btn ul li a { font-size: 21px; }}
@media screen and (max-width: 460px) { #top #top_btn ul li a { font-size: 20px; }}
@media screen and (max-width: 430px) { #top #top_btn ul li a { font-size: 19px; }}
@media screen and (max-width: 400px) { #top #top_btn ul li a { font-size: 18px; }}
@media screen and (max-width: 380px) { #top #top_btn ul li a { font-size: 17px; }}
@media screen and (max-width: 350px) { #top #top_btn ul li a { font-size: 16px; }}	
@media screen and (max-width: 330px) { #top #top_btn ul li a { font-size: 15px; }}
@media screen and (max-width: 310px) { #top #top_btn ul li a { font-size: 14px; }}
	
	

/*工場名からさがす*/

#factory {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

	#factory ul#factory_list {
		width: 100%;
		height: auto;
	}
	
	#factory ul#factory_list li {
		width: auto;
		height: auto;
		padding: 56% 0 7% 2%;
		float: none;
	}

	#factory ul#factory_list li ul.factories li span.pref {
		display: inline-block;
		/*margin-bottom: 4px;*/
	}
	
	#factory ul#factory_list li#intro_box_beer {
		background: url(../img/n_product_beer1.png) top left no-repeat,url(../img/n_product_beer2.png) bottom 4% right 3% no-repeat;
		background-size: 100% auto ,auto 33%;
		background-color: #f2ab0d;
	} 

	#factory ul#factory_list li#intro_box_whisky {
		background: url(../img/n_product_whisky1.png) top left no-repeat,url(../img/n_product_whisky2.png) bottom 4.5% right 5% no-repeat;
		background-size:  100% auto ,auto 38%;
		background-color: #743a1d;
		padding-bottom: 15%;
	}

	#factory ul#factory_list li#intro_box_wine {
		background: url(../img/n_product_wine1.png) top left no-repeat,url(../img/n_product_wine2.png) bottom 6.5% right 3% no-repeat;
		background-size:  100% auto ,auto 39%;
		background-color: #990555;
		padding-bottom: 18%;
	}

	#factory ul#factory_list li#intro_box_water {
		background: url(../img/n_product_water1.png) top left no-repeat,url(../img/n_product_water2.png) bottom 6% right 3.5% no-repeat;
		background-size:  100% auto ,auto 35%;
		background-color: #55bbdd;
	}

	#factory ul#factory_list li h3 {
		font-size: 30px;
		position: unset;
	}

		#factory ul#factory_list li ul.factories {
        	margin: 2.7% 0 0 0;
			position: unset;
		}

		#factory ul#factory_list li ul.factories li {
			padding-bottom: 2%;
			margin-bottom: 8px;
		}

		#factory ul#factory_list li ul.factories li a {
			font-size: 0;
		}

		#factory ul#factory_list li ul.factories li a h4 {
			font-size: 0;
			margin: 0;
			padding: 0;
		}
	
		#factory ul#factory_list li ul.factories li span.pref {
	        font-size: 23px;
			margin: 0 0 5px 0;
			padding: 0;
			display: block;
			line-height: 100%;
			font-weight: bold;
		}
	
		#factory ul#factory_list li ul.factories li span.small {
	        font-size: 18px;
			margin: 0 0 3px 0;
			padding: 0;
			display: block;
			line-height: 100%;
			font-weight: bold;
		}

		#factory ul#factory_list li ul.factories li span.factory_name {
			display: block;
			padding: 0 25px 0 0;
			font-size: 26px;
			margin: 0;
			line-height: 100%;
			font-weight: bold;
	    }

	
		#factory ul#factory_list li ul.factories li.beer span.factory_name {
		 	background: none;
	    }	

		#factory ul#factory_list li ul.factories li.beer span.factory_name span.factory_name_inner {
			display: block;
			padding-right: 17px;
			margin-right: 150px;
		 	background: url(../img/n_icon_arrow2.png) right center no-repeat;
    		background-size: 9px 14px;			
	    }	
	
@media screen and (max-width: 650px) { 
	#factory ul#factory_list li h3 { font-size: 29px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 22px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 18px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 25px; padding-right: 24px; }
}
	
@media screen and (max-width: 600px) { 
	#factory ul#factory_list li h3 { font-size: 28px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 21px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 17px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 24px; padding-right: 23px; }
}
	
@media screen and (max-width: 550px) { 
	#factory ul#factory_list li h3 { font-size: 27px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 20px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 17px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 23px; padding-right: 22px; }
}
	
@media screen and (max-width: 510px) { 
	#factory ul#factory_list li h3 { font-size: 26px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 19px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 16px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 20px; padding-right: 21px; }
}
	
@media screen and (max-width: 480px) { 
	#factory ul#factory_list li h3 { font-size: 25px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 18px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 15px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 20px; padding-right: 20px; }
}
	
@media screen and (max-width: 450px) { 
	#factory ul#factory_list li h3 { font-size: 24px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 17px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 14px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 19px; padding-right: 19px; }
}
	
@media screen and (max-width: 420px) { 
	#factory ul#factory_list li h3 { font-size: 22px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 16px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 13px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 18px; padding-right: 19px; }
    #factory ul#factory_list li ul.factories li span.factory_name { background-size: 8px 13px; }
	#factory ul#factory_list li ul.factories li.beer span.factory_name span.factory_name_inner { background-size: 8px 13px;	}	
}
		
@media screen and (max-width: 390px) { 
	#factory ul#factory_list li h3 { font-size: 20px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 14px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 12px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 14px; padding-right: 19px; }
    #factory ul#factory_list li ul.factories li span.factory_name { background-size: 7px 12px; }
	#factory ul#factory_list li ul.factories li.beer span.factory_name span.factory_name_inner { background-size: 7px 12px;	}
}
	
@media screen and (max-width: 360px) { 
	#factory ul#factory_list li h3 { font-size: 18px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 13px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 11px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 13px; padding-right: 19px; }
    #factory ul#factory_list li ul.factories li span.factory_name { background-size: 6px 11px; }
	#factory ul#factory_list li ul.factories li.beer span.factory_name span.factory_name_inner { background-size: 6px 11px;	}
}
	
@media screen and (max-width: 330px) { 
	#factory ul#factory_list li h3 { font-size: 16px; }
	#factory ul#factory_list li ul.factories li span.pref { font-size: 12px; }
	#factory ul#factory_list li ul.factories li span.small { font-size: 9px; }
	#factory ul#factory_list li ul.factories li span.factory_name { font-size: 12px; padding-right: 19px; }
    #factory ul#factory_list li ul.factories li span.factory_name { background-size: 5px 10px; }
	#factory ul#factory_list li ul.factories li.beer span.factory_name span.factory_name_inner { background-size: 5px 10px;	}
}
	
	


/*場所からさがす*/

#location_wrap {
	width: 100%;
	height: auto;
	background-color: #f0f0ed;
	padding: 13.3% 0 6.7% 0;
}

	#location {
		width: 90%;
		margin: 0 auto;
		padding: 0;
		height: auto;
		position: relative;
		background: url(../img/n_factory_map.gif) right top no-repeat;
		background-size: 52% auto;
    }
	
	#location h2 {
		height: auto;
		padding-left: 6.66%;
		background: url(../img/n_icon_location2.png) left 7% no-repeat;
		background-size: 6% auto;
    }

	h2 {
		font-size: 40px;
	}
	#location p.lead {
		margin-top: 4%;
		width: 50%;
		line-height: 120%;
    }
	
	p.lead {
		font-size: 26px;
	}
	
	#location  ul#location_list {
		position: static;
		width: 100%;
		overflow: hidden;
		/*top: auto;
		left: auto;*/
		margin-top: 16%;
	}

		#location  ul#location_list li {
			position: static;
			width: 48.7%;
			margin-bottom: 2.6%;
			height: auto;
			float: left;
			background-color: #fff;
		}
	
		#location  ul#location_list li:nth-child(even) {
			float: right;
		}
	
		#location  ul#location_list li a {
			width: 100%;
			height: auto;
			padding-bottom: 27%;
		}

		#location ul#location_list li#location_yamazaki a { background-color: #743a1d; }
		#location ul#location_list li#location_okudaisen a { background-color: #55bbdd; }
		#location ul#location_list li#location_kyushu-kumamoto a { background-color: #f2ab0d; }
		#location ul#location_list li#location_kyoto a { background-color: #f2ab0d; }
		#location ul#location_list li#location_musashino a { background-color: #f2ab0d; }
		#location ul#location_list li#location_tominooka a { background-color: #990555; }
		#location ul#location_list li#location_hakushu a { background-color: #743a1d; }
		#location ul#location_list li#location_water a { background-color: #55bbdd; }	
		#location ul#location_list li#location_kitaalps a { background-color: #55bbdd; }	
	
		#location  ul#location_list li a h3 {
			padding: 54.5% 0 1.5% 0;
			height: auto;
			line-height: auto;
			font-size: 24px;
			color: #2a2a2a;
			font-weight: bold;
			text-align: center;    
		}
			
		#location ul#location_list li#location_yamazaki a h3 { 
			background: url(../img/n_factory_yamazaki.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location ul#location_list li#location_okudaisen a h3 { 
			background: url(../img/n_factory_okudaisen.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location ul#location_list li#location_kyushu-kumamoto a h3 { 
			background: url(../img/n_factory_kyushu-kumamoto.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location ul#location_list li#location_kyoto a h3 { 
			background: url(../img/n_factory_kyoto.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location ul#location_list li#location_musashino a h3 { 
			background: url(../img/n_factory_musashino.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location ul#location_list li#location_tominooka a h3 { 
			background: url(../img/n_factory_tominooka.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location ul#location_list li#location_hakushu a h3 { 
			background: url(../img/n_factory_hakushu.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location ul#location_list li#location_water a h3 { 
			background: url(../img/n_factory_water.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }
		#location ul#location_list li#location_kitaalps a h3 { 
			background: url(../img/n_factory_kitaalps.png) left top no-repeat;
			background-size: 100% auto;
			background-color: #fff;
        }

		#location  ul#location_list li p.location_name {
			height: auto;
		}
		
		#location  ul#location_list li span.location_name_inner {
   			font-size: 25px;
			display: block;
			padding-top: 27%;
			line-height: 110%;
		}

		#location  ul#location_list li p.location_name span.small2 {
			font-size: 20px;
		}		
/*
		#location ul#location_list li#location_yamazaki { top: unset; left: unset; }
		#location ul#location_list li#location_okudaisen { top: unset; left: unset; }
		#location ul#location_list li#location_kyushu-kumamoto { top: unset; left: unset; }
		#location ul#location_list li#location_kyoto { top: unset; left: unset; }
		#location ul#location_list li#location_musashino { top: unset; left: unset; }
		#location ul#location_list li#location_tominooka { top: unset; left: unset;; }
		#location ul#location_list li#location_hakushu { top: unset; left: unset; }
		#location ul#location_list li#location_water { top: unset; left: unset; }
*/	

	
	

	
	#mailmaga {
		max-width: 90%;
		width: 90%;
	}
	
	#mailmaga #mail_magazine {
	    max-width: 100%;
		width: 100%;
		margin: 4% 0 0 0;
    }
	
	#mailmaga #mail_magazine a {
    	padding-bottom: 0;
    	background: none;
    	background-size: 100%;
	}

	#mailmaga #mail_magazine a img {
		display: block;
		width: 100%;
		height: auto;
	}
	
	
	

@media screen and (max-width: 670px) { 
	h2  { font-size: 38px; }
	p.lead { font-size: 24px; }
	#location  ul#location_list li a h3 { font-size: 22px; }
	#location  ul#location_list li span.location_name_inner { font-size: 23px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 18px; }			
}
	
@media screen and (max-width: 620px) { 
	h2  { font-size: 35px; }
	p.lead { font-size: 22px; }
	#location  ul#location_list li a h3 { font-size: 20px; }
	#location  ul#location_list li span.location_name_inner { font-size: 21px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 17px; }		
}
	
@media screen and (max-width: 580px) { 
	h2  { font-size: 33px; }
	p.lead { font-size: 20px; }
	#location  ul#location_list li a h3 { font-size: 18px; }
	#location  ul#location_list li span.location_name_inner { font-size: 18px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 14px; }				
}
	
@media screen and (max-width: 550px) { 
	h2  { font-size: 31px; }
	p.lead { font-size: 19px; }
	#location  ul#location_list li a h3 { font-size: 17px; }
	#location  ul#location_list li span.location_name_inner { font-size: 17px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 13px; }				
}
	
@media screen and (max-width: 510px) { 
	h2  { font-size: 29px; }
	p.lead { font-size: 18px; }
	#location  ul#location_list li a h3 { font-size: 16px; }
	#location  ul#location_list li span.location_name_inner { font-size: 16px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 12px; }			
}
	
@media screen and (max-width: 480px) { 
	h2  { font-size: 27px; }
	p.lead { font-size: 17px; }
	#location  ul#location_list li a h3 { font-size: 15px; }
	#location  ul#location_list li span.location_name_inner { font-size: 15px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 11px; }				
}
	
@media screen and (max-width: 440px) { 
	h2  { font-size: 25px; }
	p.lead { font-size: 16px; }
	#location  ul#location_list li a h3 { font-size: 14px; }
	#location  ul#location_list li span.location_name_inner { font-size: 14px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 10px; }				
}
	
@media screen and (max-width: 410px) { 
	h2  { font-size: 23px; }
	.lead { font-size: 15px; }
	#location  ul#location_list li a h3 { font-size: 13px; }
	#location  ul#location_list li span.location_name_inner { font-size: 13px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 9px; }					
}
	
@media screen and (max-width: 380px) { 
	h2  { font-size: 21px; }
	p.lead { font-size: 14px; }
	#location  ul#location_list li a h3 { font-size: 12px; }
	#location  ul#location_list li span.location_name_inner { font-size: 12px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 8px; }			
}
	
@media screen and (max-width: 350px) { 
	h2  { font-size: 19px; }
	p.lead { font-size: 13px; }
	#location  ul#location_list li a h3 { font-size: 11px; }
	#location  ul#location_list li span.location_name_inner { font-size: 14px; }
	#location  ul#location_list li p.location_name span.small2 {font-size: 10px; }			
}	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
}
















