@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------------------
TOPPAGE
-------------------------------------------------------------- */
#mainVisual {
	xbackground: url("../img/bgMain1Pctb.png") no-repeat center top 145px, url("../img/bgMain2Pctb.png") repeat-x center top;
	background: url("../img/bgMain2Pctb.png") no-repeat center/cover;
}

#mainVisualArea {
	width: 1024px;
	margin: 0 auto;
	padding: 40px 12px 50px;
}

#mainVisualArea p {
	margin-bottom: -32px;
	background: linear-gradient(45deg, rgba(255,237,23,0.8) 0%, rgba(243,177,18,0.8) 100%);
	color:#000;
}

#mainVisualArea h1 {
	font-weight: normal;
	text-align: center;
	margin: 100px 0;
    xbackground-color: rgba(0, 0, 0, 0.562);
}

#mainVisualArea h1 img {
	width: 512px;
	height: auto;
}

#mainVisualArea #topLead .sent *:last-child, 
#topContentsArea #topAccess #imgMap *:last-child {
	margin-bottom: 0;
}

#mainVisualArea #topLead {
	text-align: center;
    xbackground-color: rgba(0, 0, 0, 0.362);
	padding: 10px;
}

#topContentsArea h2 {
	background: #111;
	font-size: 26px;
	color: #fff;
	padding: 0;
	xmargin: 0 0 20px;
	text-align: center;
}

#topContentsArea .bg_light {
	background: #222;
}

#topContentsArea .bg_beer {
	background: #111;
}

#topContentsArea .contBox {
	width: 1024px;
	margin: 0 auto;
	padding: 0 12px;
}

#topContentsArea .parent_box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#topContentsArea .parent_box div {
  width: 50%;
}

#topContentsArea #topAccess {
	text-align: center;
}

#topContentsArea #topAccess h2 {
	xbackground: url("../img/iconH2Map.png") no-repeat center top;
	xbackground-size: 60px 60px;
	xpadding-top: 80px;
}

#topContentsArea #topAccess #imgLight {
	float: left;
	width: 480px;
	xfont-size: 14px;
	xtext-align: left;
}

#topContentsArea #topAccess #imgLight p.ph,
#topContentsArea #topAccess #imgLight p.ph{
	xmargin-bottom: 10px;
}

#topContentsArea #topAccess #imgMap p.ph img,
#topContentsArea #topAccess #imgLight p.ph img,
#topContentsArea #topAccess #imgBeer p.ph img
{
	width: 100%;
	height: auto;
}

#topContentsArea #topAccess #imgBeer {
	float: right;
	width: 480px;
}

#topContentsArea #topMembers h2 {
	xbackground: url("../img/iconH2Members.png") no-repeat center top;
	xbackground-size: 120px 120px;
	xpadding-top: 140px;
}

#topContentsArea #topMembers .sent {
	xtext-align: center;
}

#topContentsArea #topNote .tit {
	float: left;
	width: 250px;
}

#topContentsArea #topNote .tit h2 {
	xbackground: url("../img/iconH2News.png") no-repeat center top;
	xbackground-size: 120px 120px;
	xpadding-top: 140px;
}

#topContentsArea #topNote .list {
	float: right;
	width: 700px;
}

#topContentsArea #topNote .list ul {
	margin: 0 0 0 -50px;
}

#topContentsArea #topNote .list ul li {
	padding-left: 0;
	position: static;
	overflow: visible;
	float: left;
	width: 200px;
	margin: 0 0 0 50px;
}

#topContentsArea #topNote .list ul li::before {
	content: none;
}

#topContentsArea #topNote .list ul li p.ph {
	position: relative;
}

#topContentsArea #topNote .list ul li p.ph img {
	width: 100%;
	height: auto;
}

#topContentsArea #topNote .list ul li p.ph img.icon {
	width: 40px;
	position: absolute;
	bottom: -20px;
	left: 10px;
}

#topContentsArea #topNote .list ul li .sent *:last-child {
	margin-bottom: 0;
}

#topContentsArea #topNote .list ul li .sent p.time {
	font-size: 14px;
	margin-bottom: 0;
}

#topContentsArea #topNote .list p.no {
	text-align: center;
	min-height: 210px;
}

#topContentsArea #topAccess p.btn,
#topContentsArea #topLight p.btn {
	text-align: center;
	width: 80%;
	margin: 0 auto 30px;
}

#topContentsArea #topMembers p.btn {
	text-align: center;
	width: 250px;
	margin: 0 auto;
}

#topContentsArea #topNote p.btn {
	float: left;
	width: 250px;
	text-align: center;
	margin-bottom: 0;
}

#topContentsArea #topBeer p.btn {
	xfloat: left;
	width: 250px;
	text-align: center;
	margin: 0 auto;
}

#topContentsArea #topAccess p.btn a,
#topContentsArea #topLight p.btn a {
	background: linear-gradient(45deg, rgba(137,247,254,1) 0%, rgba(102,166,2555,1) 100%);
	border: 1px solid #89f7fe;
	border-radius: 6px;
	padding: 10px 5px;
	display: block;
	color: #000;
}

#topContentsArea #topMembers p.btn a, 
#topContentsArea #topNote p.btn a,
#topContentsArea #topBeer p.btn a
{
	background: linear-gradient(45deg, rgba(255,237,23,1) 0%, rgba(243,177,18,1) 100%);
	border: 1px solid #ffed17;
	border-radius: 6px;
	padding: 10px 5px;
	display: block;
	color: #000;
}


#topContentsArea #topAccess p.btn a:hover,
#topContentsArea #topMembers p.btn a:hover, 
#topContentsArea #topNote p.btn a:hover,
#topContentsArea #topBeer p.btn a:hover
{
	opacity: 0.8;
	text-decoration: none;
}

#topContentsArea .topGgmap {
	xheight: 350px;
	overflow: hidden;
}

#topContentsArea .topGgmap iframe {
	width: 100%;
	margin-top: -180px;
}

/*__________ TAB-SP __________*/
@media screen and (max-width: 959px) {

	#topContentsArea #topAccess #imgLight, 
	#topContentsArea #topAccess #imgBeer {
		float: none;
	}

	#topContentsArea #topMembers .sent img {
		width: 100%;
		height: auto;
	}

	#topContentsArea #topNote .tit {
		float: none;
		width: auto;
	}

	#topContentsArea #topNote .list {
		float: none;
		width: auto;
		margin-bottom: 30px;
	}

	#topContentsArea #topNote .list p.no {
		min-height: initial;
		min-height: auto;
	}

	#topContentsArea #topNote p.btn {
		float: none;
		margin: 0 auto;
	}

}

/* --------------------------------------------------------------
CATEGORY,SINGLE,PAGE共通
-------------------------------------------------------------- */
.waku1 {
	border: 1px solid #cdc7c6;
	padding: 15px;
	margin-bottom: 30px;
	clear: both;
}

.waku2 {
	background: #555;
	padding: 15px;
	margin-bottom: 30px;
	clear: both;
}

.waku1 > *:first-child, 
.waku2 > *:first-child {
	margin-top: 0;
}

.waku1 > *:last-child, 
.waku2 > *:last-child {
	margin-bottom: 0;
}

.waku1::before, 
.waku1::after, 
.waku2::before, 
.waku2::after {
	content: "";
	display: table;
}

.waku1::after, 
.waku2::after {
	clear:both;
}/*__________ TAB __________*/
@media screen and (max-width: 959px) and (min-width: 768px) {

	#mainVisualArea {
		width: 768px;
		padding: 40px 4px 80px;
	}

	#mainVisualArea h1 img {
		width: 512px;
	}

	#topContentsArea .contBox {
		width: 768px;
		padding: 0 4px;
	}

	#topContentsArea #topAccess #imgLight {
		margin: 0 auto 30px;
	}

	#topContentsArea #topAccess #imgBeer {
		margin: 0 auto 30px;
	}

	#topContentsArea #topNote .list {
		padding: 0 30px;
	}

}


/*__________ SP __________*/
@media screen and (max-width: 767px) {

	#mainVisual {
		xbackground: url("../img/bgMain1Sp.png") no-repeat center top 128px, url("../img/bgMain2Sp.png") repeat-x center top;
		background: url("../img/bgMain2Sp.png") no-repeat center/cover;
		xbackground-size: 301px 101px, 650px 160px;
	}

	#mainVisualArea {
		width: auto;
		max-width: 520px;
		padding: 20px 10px 50px;
	}

	#mainVisualArea p {
		margin-bottom: -65px;
	}

	#mainVisualArea h1 {
		xmargin-bottom: 148px;
	}

	#mainVisualArea h1 img {
		width: 100%;
	}

	#mainVisualArea #topLead p.ph img,
	#topContentsArea #imgMap p.ph img,
	#topContentsArea #topAccess #imgLight p.ph img,
	#topContentsArea #topAccess #imgBeer p.ph img {
		width: 100%;
		height: auto;
	}

	#mainVisualArea #topLead .sent {
		text-align: left;
	}

	#topContentsArea .contBox {
		width: auto;
		max-width: 520px;
		padding: 0 10px;
	}

	#topContentsArea #topAccess #imgLight {
		width: auto;
		margin-bottom: 30px;
	}

	#topContentsArea #topAccess #imgBeer {
		width: auto;
		margin-bottom: 30px;
	}

	#topContentsArea #topAccess #stView .ggmap {
		position: relative;
		padding: 200px 0 56.25%;
		height: 0;
		overflow: hidden;
	}

	#topContentsArea #topAccess #stView .ggmap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#topContentsArea #topNote .list ul {
		margin: -30px 0 0;
	}

	#topContentsArea #topNote .list ul li {
		float: none;
		width: auto;
		margin: 30px 0 0;
	}

	#topContentsArea #topNote .list ul li p.ph {
		max-width: 200px;
		margin: 0 auto 30px;
	}

	#topContentsArea #topMembers p.btn, 
	#topContentsArea #topNote p.btn {
		width: auto;
		max-width: 250px;
	}

}