/* CSS Document */

#header {
	position: sticky;
	top:0;
    background: #fff;
	z-index: 100;
}


.area-wrap {
	padding: 100px 20px 0;
}

.subpage_title{
	width: 100%;        
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 40vh;
	min-height:320px;
	flex-direction: column;
	position: relative;
	gap: 10px;
}


.subpage_title::before{
	position: absolute;
	content: '';
	display: block;
	width:100%;
	height: 100%;
	background: rgba(50,50,50,0.1);
	z-index: 1;
}

.subpage_title h2{
	z-index: 2;
    font-family: 'Shippori Mincho B1', serif;
    color: #fff;
    text-shadow: 3px 3px 6px #000;
    text-align: center;
    font-size: min(5vw, 55px);
    letter-spacing: 10px;
	line-height:1.2;
}



.subpage_title p{
	z-index: 2;
	font-weight: 500;
	font-family: 'Shippori Mincho B1', serif;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    text-align: center;
	font-size: min(1.5vw, 25px);	
	letter-spacing: 6px;
    line-height: 1;
}

.menu_guide_text{
	margin: 10px auto;
	display: flex;
	padding-left: 30px;
}

.menu_guide_text a,
.menu_guide_text p{
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
	font-weight: 600;
}

.menu_guide_text a{
	color: #333;
}

.menu_guide_text p{
	color: #333;
}

.menu_guide_text span{
	margin: 3px 10px; 
	color: #333;
	font-size: 15px;
}



.area-title{
	position: relative;
	padding-left: 25px;
} 
 
.area-title::before{
	display: block;
	content: '';
	position: absolute;
	height: 100%;
	width:15px;
	left: 0;
	background: linear-gradient(to left, #fff, #e18e3f);
} 

.area-title h2 {
	letter-spacing: 6px;
	color: #7f4700;
	font-family: "Zen Antique Soft", serif;
	font-weight: 500;
}

.area-title p {
	letter-spacing: 3px;
	color: #7f4700;
	font-family: "Zen Antique Soft", serif;
}
	
	


@media(max-width:1000px){
	
	#header {
		position: inherit;
	}
	
	.area-wrap {
		padding: 50px 20px;
	}

	.subpage_title {
	    height: 10vh;
	    min-height: 200px;
	}
	
	.subpage_title h2 {
		font-size: max(5vw, 30px);
	}
	
	.subpage_title p {
		font-size: max(1.5vw, 16px);
	}
	
	.menu_guide_text {
		margin: 10px auto;
		padding-left: 10px;
	}
	
	.menu_guide_text a, .menu_guide_text p {
		font-size:12px;
	}
	
	.menu_guide_text span {
    	margin: 5px 10px;
    	font-size: 10px;
	}
}




@media(max-width:800px){

	#header {
		height: 50px;
	}
	
	#header h1 a {
    	height: 50px;
	}
	
	.area-title::before {
    	width: 10px;
	}
	
	.area-title {
    	padding-left: 15px;
	}

}


@media(max-width:600px){

	.subpage_title h2 {
        font-size: max(5vw, 30px);
        line-height: 30px;
	}
}
	
@media(max-width:500px){


	.area-title::before {
		width: 8px;
		left: -10px;
	}
	
	.area-title {
        padding-left: 0;
    }
	



}