/* CSS Document */

#menu-sub{margin: 10% auto;}

#menu-sub-flex{
	width: 70%;
	margin: auto;
	display:flex;
	justify-content: space-around;
}
.menu-sub-flex-chi{
	width:45%;
}
#img-dai{
	width:100%;
	aspect-ratio:1/1;
	box-shadow: 0 0 5px rgba(0, 0, 0,0.2);
	margin-bottom: 2%;
}
.img-syou-chi{box-shadow: 0 0 5px rgba(0, 0, 0,0.2);}
#img-syou{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap:1%;
}
#product-history{
	padding: 5%;
	color: white;
	background-color:rgb(56,76,82);
	margin-bottom: 10%;
}
.syousai-flex{
	display:flex;
	margin-bottom: 3%;
	width: 
}
.syousai-l{
	width:30%;
	text-align: center;
	border-bottom:5px solid rgb(56,76,82);
}
.syousai-r{
	width: 70%;
	text-align: left;
	padding-left: 5%;
	border-bottom:1px solid rgba(0,0,0,0.3);
}
.menu-sub-flex-chi h1{margin:5% auto;}
.menu-sub-flex-chi p{
	margin-bottom:5%;
	line-height: 180%;
}
#category{text-align:center;margin-bottom: 10%;}
#category h1{letter-spacing: 0.4vw;}
#category-grid{
	width: 65%;
	margin: 5% auto;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap:5%;
}
@media(max-width:750px){
	#category-grid{
		gap:3%;
	}
}
.category-grid-chi{
	margin: 5% auto;
	text-align: center;
	font-weight: bold;
	width: 100%;
}
.category-grid-chi img{
	width:40%;
	height: fit-content;
	margin: auto;
}
@media(max-width:750px){
	.category-grid-chi img{
		width:50%;
        height: auto!important;
    }
}
.shochu-wrap-last img{
	width:50%;
}
.shochu-wrap{
	height:35vh;
	display:flex;
	margin-bottom:5%;
}

#chuumon-button-region{
	width:50%;
	margin: 10% auto 5% auto;
}
.chuumon-flex{
	display:flex;
	justify-content: space-between;
	text-align: left;
	align-items: center;
	margin-bottom: 3%;
}
.chuumon-chi1{
	width: 45%;
}
.chuumon-chi2{
	width: 25%;
	padding-left: 5%;
	border-left: 1px solid rgb(45,45,48);
}
.chuumon-chi3{
	width: 25%;
}
.chuumon-chi4{
	width: 25%;
	margin-bottom: -10%;
}


#img-syou button{
	padding: 0;
	border: none;
}
#contactflg{
	padding:1% 2%;
	border:1px solid black;
	width: fit-content;
	margin: 10% auto;
	border-radius: 10px;
	text-align: center;
}

@media(max-width:750px){
	.fs23{font-size:clamp(14px,4vw,4vw)!important;}
	#menu-sub-flex{
		width:90%;
		display: block;
	}
	.menu-sub-flex-chi {
		width: 100%;
	}
	#chuumon-button-region{
		width: 90%;
	}
	.chuumon-flex {
		display: block;
	}
	.chuumon-chi1 {
		width: 100%;
		text-align: center;
	}
	.chuumon-chi2 {
		width: 100%;
		 padding-left: 0; 
		 border-left: none; 
		text-align: center;
	}
	.chuumon-chi3 {
		width: 35%;
		margin: auto auto 10%;
	}
	#category-grid{
		width:95%;
	}
	.shochu-wrap {
		height: 23vh;
	}
	@supports (-webkit-touch-callout: none) {
		.shochu-wrap img{height:90%;}
		.shochu-wrap-last img{
			height:40%;
		}
	}
	#chuumon2{position:relative;}
	.chuumon-chi4{
		margin: auto!important;
		position: absolute;
		bottom: -190%;
		left: 40%;
	}
}