html.Has-modal {
	overflow: hidden !important;
	width: auto;
}


img {
	max-width: 100%;
}

.mod-box-inr {
	position: relative;
	width: 100%;
	margin: 0 auto;
}


.dispblock{ display:block;}
.dispnone{ display:none;}
.float_l{ float:left}
.float_r{ float:right}
.clear_both{clear:both;}
.hand{ cursor:pointer;}
.f12{ font-size:12px;}
.hei{ color:#000;}



@media screen and (max-width:767px) {
body {
	min-width: 320px;
}

img {
	width: 100%;
}

.mod-box-inr {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}

}


.mod-box-imagesnap,
.mod-box-flipsnap {
	position: relative;
	width: 100%;
	height: 100%;
}
.mod-box-imagesnap .mod-viewport,
.mod-box-flipsnap .mod-viewport {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
.mod-box-imagesnap .mod-viewport .mod-imagesnap,
.mod-box-flipsnap .mod-viewport .mod-flipsnap {
	height: 100%;
}
.mod-box-imagesnap .mod-viewport .mod-imagesnap:after,
.mod-box-flipsnap .mod-viewport .mod-flipsnap:after {
	content: "";
	display: table;
	clear: both;
}
.mod-box-imagesnap .mod-viewport .mod-imagesnap .item,
.mod-box-flipsnap .mod-viewport .mod-flipsnap .item {
	position: relative;
	overflow: hidden;
	float: left;
}
.mod-box-imagesnap .mod-navi,
.mod-box-flipsnap .mod-navi {
	text-align: center;
	letter-spacing: -0.4em;
}
.mod-box-imagesnap .mod-navi li,
.mod-box-flipsnap .mod-navi li {
	display: inline-block;
	letter-spacing: normal;
}

@media screen and (max-width:767px) {
}



/** .mod-box-beer -------------------------------------------------------------------------------------*/
.mod-box-beer {
	margin: 0 0;
	text-align: center;padding:0 0;overflow:hidden;
}
.mod-box-inr {width:100%;overflow:hidden;}

.mod-box-beer li.box-beer {
	position: relative;
	display: inline-block;
	margin: 0 0 20px;
	width: 15%;

}
.mod-box-beer li.box-beer .beer {
	position: relative;
	margin-bottom: 15px;padding:0 10px;
}
.mod-box-beer li.box-beer .beer img{width:100%;height:auto}

.mod-box-beer li.box-beer .name {
	margin-bottom: 10px;
}
.mod-box-beer li.box-beer .name h3 {
	font-size: 16px;
	color: #333;
	line-height: 1.2;
	margin-bottom: 5px;
}
.mod-box-beer li.box-beer .name p {
	font-size: 11px;
	color: #666666;
	line-height: 1.2;
}

.mod-box-beer li.box-beer a:hover {
	color: #fff000;
}
.mod-box-beer li.box-beer a:hover .btn {
	color: #ffffff;
	background-color: #e51800;
}

@media screen and (max-width:767px) {
.mod-box-beer {
	margin: 0 -15px;
}
.mod-box-beer li.box-beer {
	margin: -0px 15px 0;
	padding-top: 0px;
	width: 130px;
}
.mod-box-beer li.box-beer .beer {
	margin: 0 auto 0;
	width: 100px;
}
.mod-box-beer li.box-beer .beer:after {
	bottom: -20px;
	width: 100px;
	height: 40px;
	background-size: 100px 40px;
}
.mod-box-beer li.box-beer .name {
	margin:8px 0;
}
.mod-box-beer li.box-beer .name h3 {
	font-size: 14px;
}
.mod-box-beer li.box-beer .name p {
	font-size: 10px;
}
.mod-box-beer li.box-beer .btn {
	width: 90px;
	font-size: 10px;
}
.mod-box-beer li.box-beer a:hover .btn {
	color: #e51800;
	background-color: #ffffff;
}
}






.wrp-new-box{width:100%;height:auto; clear:both;margin-top:0px;}


.wrp-new {margin:0 auto;
	overflow: hidden;
	z-index: 4;
	padding-bottom: 40px;
	padding-top: 0px;
	margin-top: 0px;
	background-image: url(/img/common/line_04.png);
	background-position: center bottom;
	background-repeat: repeat-x;
}
.wrp-new h2 {
	padding-top: 90px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #5f8023;
	margin-bottom: 60px;
}
.wrp-new h2 img {
	width: 336px;
	margin-bottom: 20px;
}
.wrp-new .mod-box-beer li.box-beer {
	/*margin-left: 40px;
	margin-right: 40px;*/
}
.wrp-new .mod-modal {
	display: none;
}

@media screen and (max-width:767px) {
.wrp-new {
	padding-top: 85px;
	margin-top: -85px;
	background-size: 550px 3px;
}
.wrp-new h2 {
	padding-top: 40px;
	font-size: 14px;
	margin-bottom: 20px;
}
.wrp-new h2 img {
	width: 210px;
	margin-bottom: 15px;
}
.wrp-new .mod-box-beer li.box-beer {
	margin-left: 15px;
	margin-right: 15px;
}
}





/** .modal */
.modal {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.modal .btn-close a {
	position: fixed;
	z-index: 10010;
	display: block;
	text-indent: -9999px;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	background-image: url(/static/default/assets/img/btn_modal_close02.png);
}
.modal .mod-prev a {
	position: fixed;
	z-index: 10010;
	top: 50%;
	left: 20px;
	margin-top: -30px;
	width: 60px;
}
.modal .mod-next a {
	position: fixed;
	z-index: 10010;
	top: 50%;
	right: 20px;
	margin-top: -30px;
	width: 60px;
}
.modal .mod-flipsnap li.item {
	width: 100%;
	height: 100%;
}
.modal .mod-flipsnap li.item .mod-box-inr {
	display: table;
	height: 100%;
	width: 800px;
}

.modal .mod-flipsnap li.item .mod-box-inr  .mod-modal-tit{width:100%;text-align:center;height:auto;border-bottom:1px solid #666;font-size:36px;padding:50px 0 30px 0;}

@media (max-width: 768px) {
.modal .mod-flipsnap li.item .mod-box-inr  .mod-modal-tit{padding:15px 0;}
.modal .mod-flipsnap li.item .mod-box-inr  .mod-modal-tit img{width:50%;}	
}

.modal .mod-flipsnap li.item .mod-modal-inr {
	display: table-cell;
	vertical-align: middle;float:right;/*-----float:right----*/
	color: #333;
}


.modal .mod-flipsnap li.item .mod-modal-inr .txt {
	width: 360px;
	font-size: 30px;
	margin-bottom: 25px;margin-top:150px;/*右侧文本*/
}
.modal .mod-flipsnap li.item .mod-modal-inr .txt p{font-size:20px;padding-top:5px;}


.modal .mod-flipsnap li.item .mod-modal-inr dl {padding:30px 0 0 0;
	width: 360px;
	font-size: 15px;line-height:140%;
}
.modal .mod-flipsnap li.item .mod-modal-inr dl:after {
	content: "";
	display: table;
	clear: both;
}
.modal .mod-flipsnap li.item .mod-modal-inr dl dt {
	float: left;
}
.modal .mod-flipsnap li.item .mod-modal-inr dl dd {
	margin-left: 100px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .btn {
	margin-top: 25px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .btn a {
	display: inline-block;
	border: 2px solid #ffffff;
	border-radius: 5px 5px;
	color: #ffffff;
	padding: 8px 40px;
	font-size: 12px;
	text-align: center;
	box-sizing: border-box;
}
.modal .mod-flipsnap li.item .mod-modal-inr .btn a:hover {
	opacity: 0.6;
}
.modal .mod-flipsnap li.item .mod-modal-inr .beer {
	position: absolute;
	z-index: 1;
	left:0px;
	top: 13%;
	margin-top: 100px;
}

.modal .mod-box-flipsnap .mod-navi {
	position: fixed;
	left: 50%;
	bottom: 50px;
}
.modal .mod-box-flipsnap .mod-navi li a {
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(../images/slide_navi.png);
	background-position: center top;
	background-size: 20px 40px;
}
.modal .mod-box-flipsnap .mod-navi li a.active,
.modal .mod-box-flipsnap .mod-navi li a:hover {
	background-position: center bottom;
}

@media screen and (max-width:767px) {
.modal .mod-flipsnap li.item .mod-box-inr  .mod-modal-tit{font-size:30px;}
.modal .btn-close a {
	top: 5px;
	right: 5px;
	width: 40px;
	height: 40px;
	background-image: url(/static/default/assets/img/btn_modal_close.png);
	background-size : 40px 40px;
}
.modal .mod-prev a {
	left: 15px;
	top: 180px;
	width: 36px;
	margin-top: 0;
}
.modal .mod-next a {
	right: 15px;
	top: 180px;
	width: 36px;
	margin-top: 0;
}
.modal .mod-flipsnap li.item .mod-box-inr {
	display: block;
	width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.modal .mod-flipsnap li.item .mod-modal-inr {width:100%;
	display: block;
	color: #000;
	padding-left: 0;
}
.modal .mod-flipsnap li.item .mod-modal-inr .ttl-en {
	width: 290px;
	margin-bottom: 10px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .ttl-jp {
	font-size: 18px;
	margin-bottom: 15px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .txt {
	width: 100%;
	font-size: 20px;
	margin-bottom: 15px;margin-top:0px
}
.modal .mod-flipsnap li.item .mod-modal-inr .txt p{font-size:15px;}
.modal .mod-flipsnap li.item .mod-modal-inr dl {
	width: 100%;
	margin-bottom: 30px;font-size:14px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .btn {
	margin-bottom: 15px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .btn a {
	font-size: 14px;
	width: 100%;
}
.modal .mod-flipsnap li.item .mod-modal-inr .btn a:hover {
	opacity: 1;
}
.modal .mod-flipsnap li.item .mod-modal-inr .beer {
	position: relative;
	width: 70%;
	left: 0px;
	top: 0;
	margin: 30px auto 30px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .beer.no-glass {
	right: 0;
}
.modal .mod-flipsnap li.item .mod-modal-inr .beer.l550 {
	margin-top: 30px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .beer.sp60 {
	margin-top: 60px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .beer:after {
	bottom: -20px;
	width: 100px;
	height: 40px;
	background-size: 100px 40px;
}
.modal .mod-flipsnap li.item .mod-modal-inr .beer .gs {
	bottom: 0;
	left:60px;
}
.modal .mod-box-flipsnap .mod-navi {
	display: none;
}
}