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

body:before {
	opacity: 0;
}
.notes-area {
	margin: 0% auto 0;
}
#pageWrap {
	padding: 0;
	text-align: left;
	overflow: hidden;
}
#mainWrap {
	position: relative;
}
#mainWrap #pageTit h2 {
	background-color: rgba(68,74,52,0.6);
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	color: #fff;
}
#mainWrap .txtBox {
	position: absolute;
	color: #fff;
	left: 5%;
	top: 15%;
}
#mainWrap .txtBox h3 {
	font-size: 2vw;
	font-size: clamp(15px, 2vw, 32px);
	padding-bottom: 0.6em;
	letter-spacing: 0.1em;
}
#mainWrap .txtBox p {
	font-size: 1.1vw;
	font-size: clamp(10px, 1.1vw, 18px);
	letter-spacing: 0.1em;
	line-height: 2;
}
.bgBk {
	background-color: #000;
	color: #fff;
}

#sec01 {
	padding: 3% 0;
	max-width: 1600px;
	margin: 0 auto;
}
#sec01 h3 {
	text-align: center;
	font-size: 30px;
	letter-spacing: 0.2em;
	padding: 0.5em 0;
}
#sec01 .flex-container {}
#sec01 .itemBox {
	width: 24%;
	background: #79724E;
background: linear-gradient(180deg, rgba(121, 114, 78, 1) 0%, rgba(71, 63, 37, 1) 100%);
}
#sec01 .itemBox:nth-child(2n){
	flex-direction: column-reverse;
}
#sec01 .itemBox .minBox {
	width: 100%;
}

.shops {
	padding: 2% 0;
}
.shops h4 {
	color: #fff;
	text-align: center;
	font-size: 18px;
	position: relative;
	z-index: 1;
	letter-spacing: 0.3em;
}
.shops h4::after {
	content: "";
	position: absolute;
	width: calc(((100vw - 100%) / 2) + 100%);
	bottom: 0.5em;
	left: calc((100vw - 100%) / 2 * -1);
	height:0.5em;
	background-color: #FA0004;
	z-index: -1;
	background: linear-gradient(90deg, rgba(121, 114, 78, 1) 0%, rgba(71, 63, 37, 1) 100%);
}
.shops:nth-child(2n - 1) h4::after {
	left: auto;
	right: calc((100vw - 100%) / 2 * -1);
}
.shops h4 span {
	font-size: 160%;
	margin-right: 1.5em;
	font-style: italic;
}
.shops .itemWrap {
	padding-top: 30px;
	justify-content: flex-start;
	gap: 20px 2.66%;
}
.shops .itemBox {
	width: 23%;
}
.shops .itemBox p {
	text-align: center;
	line-height: 1.2;
	padding: 0.5em 0;
	font-size: 0.95vw;
	font-size: clamp(10px, 0.95vw, 13px);
	
}
.shops .itemBox p span {
	font-size: 130%;
	letter-spacing: -0.05em;
}
.shops .itemBox p span.min {
	font-size: 200%;
	margin: 0 0.1em;
}

.bgGrd {
	background: #79724E;
background: radial-gradient(circle, rgba(121, 114, 78, 1) 0%, rgba(71, 63, 37, 1) 100%);
	position: relative;
	padding: 3% 0;
	position: relative;
	z-index: -1;
}
.bgGrd::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 50%;
	left: 0;
	top: 0;
	background: #FFFFFF;
background: linear-gradient(25deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 1) 52%);
	z-index: -1;
}

#mapBox,#infoBox {
	padding: 2% 0;
}
#mapBox h4,
#infoBox h4 {
	width: 12em;
	margin: 0 auto 1em;
	text-align: center;
	color: #847f4d;
	font-size: 30px;
	font-style: italic;
	position: relative;
	z-index: 1;
}
#infoBox h4 {
	width: 15em;
	color: #fff;
}
#mapBox h4::after,#infoBox h4::after {
	content: "";
	position: absolute;
	width: 100%;
	bottom: 0.5em;
	left: 0;
	height:0.1em;
	background-color: #847f4d;
	z-index: -1;
}
#infoBox h4::after {
	background-color: #fff;
}

#infoBox .tableBox {
	width: 32%;
}
#infoBox table {
	width: 100%;
	color: #fff;
	margin-bottom: 1em;
}

#infoBox th ,#infoBox td {
	padding: 0.5em 0;
	line-height: 1.2;
}
#infoBox td {
	text-align: right;
	white-space: nowrap;
}
#infoBox td:nth-child(2) {
	width: 3.5em;
}
#infoBox td:nth-child(3) {
	width: 2.4em;
}
#infoBox td:nth-child(4) {
	width: 1.8em;
}
#infoBox td:nth-child(5) {
	width: 4.5em;
}
#infoBox th.category {
	background-color: #000;
	text-align: center;
	padding: 0.4em 0.2em;
	letter-spacing: 0.2em;
	
}



@media screen and (max-width: 959px) {
	#sec01 h3 {
    font-size: clamp(20px, 2.7vw, 22px);
	}
	.shops h4 {
    font-size: clamp(14px, 2vw, 16px);
	}
	#mapBox h4, #infoBox h4 {
		font-size: clamp(22px, 3.0vw, 24px);
	}
	#infoBox .tableBox {
	width: 94%;
	max-width: 440px;
	margin: 0 auto;
	font-size: 13px;
}
	.bgGrd::after {
		height: 40%;
	}
}
@media screen and (max-width: 599px) {
	#mainWrap {

	}
	#mainWrap .txtBox {
		width: 90%;
		max-width: 350px;
    left: 50%;
		transform: translateX(-50%);
    top: 16%;
	}
	#mainWrap .txtBox h3 {
	font-size: 5vw;
		font-size: clamp(12px, 5vw, 20px);
	padding-bottom: 1em;
	letter-spacing: 0.1em;
		line-height: 1.4;
}
#mainWrap .txtBox p {
		font-size: 3.5vw;
	font-size: clamp(10px, 3.5vw, 14px);
		letter-spacing: 0.1em;
		line-height: 1.6;
	text-align: justify;
	
	}
	#mainWrap .txtBox p br {
		display: none;
	}
	#sec01 h3 {
    font-size: 15px;
		font-size: clamp(14px, 4vw, 16px);
		padding: 1em 0;
  }
	#sec01 .itemBox {
    width: 48%;
		margin-bottom: 10px;
	}
	.shops h4 {
     font-size: 13px;
		font-size: clamp(12px, 3.5vw, 14px);
   }
	.shops .itemWrap {
		width: 70%;
		max-width: 300px;
		margin: 0 auto;
	}
	.shops .itemBox {
    width: 100%;
	}
	.shops h4 span {
    margin-right: 0;
		padding-top: 1em;
		
		display: block;
	}
	
	.bgGrd::after {
		height: 20%;
	}
	#mapBox h4, #infoBox h4 {
    font-size:18px;
		font-size: clamp(17px, 4.8vw, 19px);
  }
}