@charset "utf-8";


.pagehead_areaguide{
	height:400px;
	position:relative
}

.pagehead_areaguide .pagehead_bg{
	display:flex;
	width:100%;
	height:100%;
}
.pagehead_areaguide .pagehead_bg div{
	flex:1;
	background-repeat:no-repeat;
}
.pagehead_areaguide .pagehead_bg div.bg1{
	background-image: url('../images/areaguide/pagehead_1.jpg');
	background-position:center;
	/*background-size:150% auto;*/
	background-size:cover;
}
.pagehead_areaguide .pagehead_bg div.bg2{
	background-image: url('../images/areaguide/pagehead_2.jpg');
	background-position:center;
	/*background-size:180% auto;*/
	background-size:cover;
}
.pagehead_areaguide .pagehead_bg div.bg3{
	background-image: url('../images/areaguide/pagehead_3.jpg');
	background-position:center;
	/*background-size:150% auto;*/
	background-size:cover;
}
.pagehead_areaguide .pagehead_bg div.bg4{
	background-image: url('../images/areaguide/pagehead_4.jpg');
	background-position:center;
	/*background-size:150% auto;*/
	background-size:cover;
}


.pagehead_areaguide div.pagehead_ttl{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.pagehead_areaguide div.pagehead_ttl p{
	font-size:2.4rem;
	color:#fff;
	text-align:center;
	text-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 6px rgba(0,0,0,0.5);
}
.pagehead_areaguide div.pagehead_ttl h2{
	font-size:1.8rem;
	color:#fff;
	text-align:center;
	text-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 6px rgba(0,0,0,0.5);
}
@media (max-width: 767px) {
	.pagehead_areaguide{
		height:250px;
	}
	.pagehead_areaguide div.pagehead_ttl p{
		font-size:2.2rem;
	}
	.pagehead_areaguide div.pagehead_ttl h2{
		font-size:1.6rem;
	}
	.pagehead_areaguide .pagehead_bg{
		flex-wrap:wrap;
	}
	.pagehead_areaguide .pagehead_bg div{
		flex:auto;
		width:50%;
		height:50%;
		box-sizing: border-box;
	}
	.pagehead_areaguide .pagehead_bg div.bg1{
		background-size:cover;
	}
	.pagehead_areaguide .pagehead_bg div.bg2{
		background-size:cover;
	}
	.pagehead_areaguide .pagehead_bg div.bg3{
		background-size:cover;
	}
	.pagehead_areaguide .pagehead_bg div.bg4{
		background-size:cover;
	}
}

.pageintro{
	padding:60px 15px 0;
	text-align:center;
}
.pageintro h3{
	font-size:2.5rem;
	margin-bottom:60px;
	font-weight:normal;
	line-height:1.5;
}
.pageintro p{
	font-family:var(--sans_serif);
	font-size:1.8rem;
}
@media screen and (max-width:767px){
	.pageintro h3{
		font-size:1.7rem;
		margin-bottom:30px;
	}
	.pageintro p{
		font-size:1.4rem;
		text-align:left;
	}
}
#sec_pickup{
	background:var(--darkgray);
	padding:100px 0;
	margin-top:60px;
}
#sec_pickup .ttl{
	margin-bottom:60px;
	display:flex;
	align-items:center;
	gap:20px;
}
#sec_pickup .ttl .en{
	font-size:4rem;
	color:var(--gold);
	font-weight:normal;
}
#sec_pickup .ttl .ja{
	font-size:1.8rem;
	color:#fff;
}
.unit_pickup{
	width:100%;
	padding:50px;
	margin:auto;
	background:#fff;
	display:flex;
	gap:50px;
}
.unit_pickup:not(:first-child){
	margin-top:50px;
}
.unit_pickup div.img{
	width:370px;
	flex-shrink: 0;
}
.unit_pickup div.img span{
	font-family:var(--sans_serif);
	font-size:1.4rem;
}
.unit_pickup h3{
	font-size:2.4rem;
	font-weight:normal;
	margin-bottom:20px;
}
.unit_pickup h3 span{
	font-size:1.8rem;
	display:block;
	margin-bottom:15px;
}
.unit_pickup>div>p{
	font-family:var(--sans_serif);
	font-size:1.7rem;
}
.ramenshop{
	margin-top:20px;
	background:var(--lightgray);
	border:1px dotted var(--gray);
	padding:20px;
}
.ramenshop p{
	color:var(--gold);
}
.ramenshop ul{
	margin-top:10px;
	display:flex;
	font-family:var(--sans_serif);
}
.ramenshop ul li:not(:first-child) a:before{
	content:"／";
	display: inline-block;
	margin:0 10px;
}
@media screen and (max-width:767px){
	#sec_pickup{
		padding:50px 0px;
	}
	#sec_pickup .ttl{
		flex-direction:column;
		gap:0;
		margin-bottom:20px;
	}
	#sec_pickup .ttl .en{
		font-size:2.4rem;
		margin-bottom:0px;
	}
	#sec_pickup .ttl .ja{
		margin-bottom:0px;
		font-size:1.4rem;
	}
	.unit_pickup{
		flex-direction:column-reverse;
		padding:40px 15px 15px;
		gap:20px;
	}
	.unit_pickup div.img{
		width:100%;
	}
	.unit_pickup div.img span{
		font-size:1.1rem;
	}
	.unit_pickup h3{
		font-size:1.7rem;
		padding-inline:10px;
		margin-bottom:20px;
	}
	.unit_pickup h3 span{
		font-size:1.3rem;
		margin-bottom:10px;
	}
	.unit_pickup>div>p{
		padding:10px;
		font-size:1.4rem;
	}
	.ramenshop p{
		font-size:1.2rem;
	}
	.ramenshop ul li a{
		font-size:1.3rem;
	}
	.ramenshop ul li:not(:first-child) a:before{
		margin:0 5px;
	}
}


#sec_index .ancbtn_wrap{
	display:flex;
	gap:50px;
	justify-content:center;
	margin:60px 0;
}
#sec_index .ancbtn_wrap a{
	width:360px;
	height:57px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--gray);
}
@media screen and (max-width:767px){
	#sec_index .ancbtn_wrap{
		flex-wrap:wrap;
		gap:15px 20px;
	}
	#sec_index .ancbtn_wrap a{
		flex: 0 0 calc((100% - 20px * 2) / 2);
		width:auto;
		font-size:1.3rem;
	}
}
.cat_bloc:not(:first-child) .wrapper{
	border-top:3px solid var(--lightgray);
	padding-top:30px;
}

.cat_bloc h3{
	font-size:2rem;
	line-height:46px;
	border-left:9px solid var(--gold);
	padding-left:20px;
	margin-bottom:40px;
}
.spot_wrap{
/*
	display:flex;
	flex-wrap:wrap;
	gap:50px 20px;
	box-sizing:border-box;
*/
	column-count: 3;
	column-gap: 20px;
	margin-bottom:100px;
}
.unit_spot{
/*
	flex: 0 0 calc((100% - 20px * 2) / 3);
	display:flex;
	flex-direction:column;
*/
	break-inside: avoid;
	/*margin-bottom: 20px;*/
	background: var(--lightgray);
	padding: 20px;
	/*border-radius: 10px;*/

}

.spot_wrap.spot_wrap_a{
/*
	display:flex;
	flex-wrap:wrap;
	gap:50px 20px;
	box-sizing:border-box;
*/
	column-count: 3;
	column-gap: 20px;
	margin-bottom:100px;
}

.spot_wrap.spot_wrap_a>.unit_spot{
/*
	flex: 0 0 calc((100% - 20px * 2) / 3);
	display:flex;
	flex-direction:column;
*/
	break-inside: avoid;
	margin-bottom: 20px;
	background: var(--lightgray);
	padding: 20px;
}
.spot_wrap.spot_wrap_b{
	display:flex;
	align-items: flex-start;
	flex-wrap:wrap;
	gap:20px;
	box-sizing:border-box;
}
.spot_wrap.spot_wrap_b>.unit_spot{

	flex: 0 0 calc((100% - 20px * 2) / 3);
	display:flex;
	flex-direction:column;
/*
	break-inside: avoid;
	margin-bottom: 20px;
	background: var(--lightgray);
	padding: 20px;
*/
}

.unit_spot .leadtime{
	color:var(--gold);
	font-family:var(--sans_serif);
	margin-top:20px;
}
.unit_spot h4{
	font-size:1.9rem;
	font-weight:normal;
	margin:10px 0 20px;
}
.unit_spot>p{
	font-family:var(--sans_serif);
	padding-bottom:15px;
}
.unit_spot .link{
	display:flex;
	/*margin-top:auto;*/
	gap:30px;
}
.unit_spot .link a{
	display:block;
	border-bottom:1px solid var(--gray);
}
.unit_spot .link a:after{
	content:"";
	display:inline-block;
	background-image:url("../images/common/icon_outlink.svg");
	background-repeat:no-repeat;
	width:19px;
	height:19px;
	margin-left:8px;
}

@media screen and (max-width:767px){
	.cat_bloc h3{
		font-size:1.8rem;
		line-height:38px;
		border-left:7px solid var(--gold);
		padding-left:16px;
		margin-bottom:30px;
	}
	.spot_wrap{
		column-count: 1;
		flex-direction:column;
	}
	.spot_wrap.spot_wrap_a{
		column-count: 1;
		flex-direction:column;
	}
	.unit_spot{
		display:flex;
		flex: 1;
		width:100%;
		flex-direction:row !important;
		flex-wrap:wrap;
		align-items: flex-start;
	}
	.unit_spot .ttl{
		width:100%;
	}
	.unit_spot .leadtime{
		margin-top:0px;
		font-size:1.2rem;
		margin-bottom:5px;
	}
	.unit_spot h4{
		font-size:1.5rem;
		margin:0px 0 20px;
	}
	.unit_spot .ttl{
		order:1;
	}
	.unit_spot>img{
		order:2;
		width:140px;
	}
	.unit_spot>p{
		order:3;
		width:calc(100% - 140px);
		padding-left:20px;
		font-size:1.3rem;
	}
	.unit_spot>p.noimg{
		width:100% !important;
	}
	.unit_spot .link{
		order:4;
		justify-content:flex-end;
		gap:15px;
		width:100%;
	}

	.unit_spot .link a{
		font-size:1.4rem;
	}
	.unit_spot .link a:after{
		width:12px;
		height:12px;
		background-size:12px 12px;
	}


}