@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Produce_width: 100%;
		--Produce_Div_flex-basis: calc( calc( 100% - var(--Gap_L) ) / 2 );
		--Menu_Div_padding: var(--Gap_L) 0;
		--Menu_Div2_border-top: 1px var(--Color_1D000) solid;
		--Menu_Div2_border-left: 1px var(--Color_1D000) solid;
		--Menu_Div_Figure_aspect-ratio: 3 / 2;
		--Menu_Div_Figure_Img_width: auto;
		--Menu_Div_Figure_Img_height: 100%;
		--h22_h2_font-size: 4.5vw;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Produce_width: calc( calc( calc( var(--Size_10) * 12 ) * 3 ) + calc( var(--Gap_L) * 2 ) );
		--Produce_Div_flex-basis: calc( var(--Size_10) * 12);
		--Menu_Div_padding: 0 var(--Gap_L);
		--Menu_Div2_border-top: 1px var(--Color_1D000) solid;
		--Menu_Div2_border-left: 1px var(--Color_1D000) solid;
		--Menu_Div_Figure_aspect-ratio: 3 / 2;
		--Menu_Div_Figure_Img_width: auto;
		--Menu_Div_Figure_Img_height: 100%;
		--h22_h2_font-size: var(--Size_18);
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Produce_width: calc( calc( calc( var(--Size_10) * 12 ) * 3 ) + calc( var(--Gap_L) * 2 ) );
		--Produce_Div_flex-basis: calc( var(--Size_10) * 12);
		--Menu_Div_padding: 0 var(--Gap_L);
		--Menu_Div2_border-top: 1px var(--Color_1D000) solid;
		--Menu_Div2_border-left: 1px var(--Color_1D020) solid;
		--Menu_Div_Figure_aspect-ratio: 4 / 3;
		--Menu_Div_Figure_Img_width: 100%;
		--Menu_Div_Figure_Img_height: auto;
		--h22_h2_font-size: var(--Size_24);
	}
}

#open {
	& div {
		aspect-ratio: 100 / 21;
		& h2 {
			display: none;
		}
	}
	& p {
		padding: var(--Margin_S) 0 0;
	}
}

#produce {
	& > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--Gap_L);
		margin: var(--Margin_S) auto 0;
		width: var(--Produce_width);
		& > div {
			flex-basis: var(--Produce_Div_flex-basis);
			display: flex;
			flex-direction: column;
			& figure {
				display: flex;
				align-items: center;
				padding: var(--Gap_L);
				background: url('../common/svg/circle_sumi.svg');
				background-repeat: no-repeat;
				aspect-ratio: 1 / 1;
			}
			& h3 {
				padding: var(--Gap_M) 0 0;
				text-align: center;
				font-size: var(--Size_10);
				font-weight: 600;
			}
		}
	}
}

#menu {
	& > div {
		display: flex;
		flex-direction: var(--Flex-direction_CRR);
		margin: var(--Margin_S) 0 0;
		background: var(--Color_1D000);
		& > div {
			flex-basis: 50%;
			display: flex;
			flex-direction: column;
			padding: var(--Menu_Div_padding);
			& figure {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: var(--Gap_M);
				background: linear-gradient(0.25turn, var(--Color_1D005), var(--Color_FF), var(--Color_1D005));
				border: 1px var(--Color_1D020) solid;
				border-radius: var(--Border-radius_S);
				aspect-ratio: var(--Menu_Div_Figure_aspect-ratio);
				overflow: hidden;
				& img {
					width: var(--Menu_Div_Figure_Img_width);
					height: var(--Menu_Div_Figure_Img_height);
				}
			}
			& h3 {
				padding: var(--Gap_L) 0 0;
				text-align: center;
				font-size: var(--Size_12);
				font-weight: 600;
				& span {
					display: block;
					font-size: var(--Size_10);
					font-weight: 400;
				}
			}
			& h4 {
				padding: var(--Gap_M) 0;
				text-align: center;
				font-size: var(--Size_18);
				font-weight: 600;
				font-family: "Noto Sans JP", sans-serif;
			}
		}
		& div:nth-of-type(2) {
			border-top: var(--Menu_Div2_border-top);
			border-left: var(--Menu_Div2_border-left);
		}
	}
}

#close {
	& >div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: var(--Color_1D000);
		& > div {
			display: flex;
			flex-direction: column;
			align-items: center;
			& h2 {
				font-size: var(--h22_h2_font-size);
				line-height: 1.2;
				background: url('../common/svg/circle_sumi.svg');
				background-repeat: no-repeat;
			}
		}
	}
}