@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Card_justify-content: normal;
		--Card_Card_flex-wrap: nowrap;
		--Card_Card_justify-content: auto;
		--Card_Card_width: 100%;
		--Card_Card_overflow-x: auto;
		--Card_Card_Li_flex-basis: 300px;
		--Card_Card_Li1_margin: 0 0 0 var(--Gap_L);
		--Card_Card_LiL_margin: 0 var(--Gap_L) 0 0;
		--SlickArrow_bottom: 50%;
		--UlD_Li_flex-basis: 80%;
		--UlD_Li_Li1_margin: 0 0 0 var(--Gap_L);
		--UlD_Li_LiL_margin: 0 var(--Gap_L) 0 0;
		--Ad_padding: var(--Gap_L) 0;
		--Ad_H2_padding: var(--Gap_S);
		--Ad_H2_height: calc( var(--Size_10) * 6 );
		--Ad_H2_font-size: var(--Size_12);
		--Ad_H2_Br_display: block;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Card_Card_flex-wrap: wrap;
		--Card_Card_justify-content: center;
		--Card_Card_width: 100%;
		--Card_Card_overflow-x: auto;
		--Card_Card_Li_flex-basis: 351px;
		--Card_Card_Li1_margin: 0;
		--Card_Card_LiL_margin: 0;
		--SlickArrow_bottom: -4rem;
		--UlD_Li_flex-basis: calc( var(--Gap_L) * 15 );
		--UlD_Li_Li1_margin: 0 0 0 var(--Gap_L);
		--UlD_Li_LiL_margin: 0 var(--Gap_L) 0 0;
		--Ad_padding: var(--Size_14) 0;
		--Ad_H2_padding: var(--Gap_M);
		--Ad_H2_height: calc( var(--Size_10) * 6 );
		--Ad_H2_font-size: var(--Size_16);
		--Ad_H2_Br_display: none;
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Card_justify-content: center;
		--Card_Card_flex-wrap: wrap;
		--Card_Card_justify-content: center;
		--Card_Card_width: calc( calc( var(--Card_Li_flex-basis) * 2 ) + var(--Gap_L) );
		--Card_Card_width: 1024px;
		--Card_Card_overflow-x: auto;
		--Card_Card_Li_flex-basis: 351px;
		--Card_Card_Li1_margin: 0;
		--Card_Card_LiL_margin: 0 calc( calc( 100% - 1024px ) / 2 ) 0 0;
		--SlickArrow_bottom: -4rem;
		--UlD_Li_flex-basis: calc( var(--Gap_L) * 15 );
		--UlD_Li_Li1_margin: 0 0 0 calc( calc( 100% - 1024px ) / 2 );
		--UlD_Li_LiL_margin: 0 calc( calc( 100% - 1024px ) / 2 ) 0 0;
		--Ad_padding: var(--Size_20) 0;
		--Ad_H2_padding: var(--Gap_L);
		--Ad_H2_height: calc( var(--Size_10) * 6 );
		--Ad_H2_font-size: var(--Size_20);
		--Ad_H2_Br_display: none;
	}
}

#open {
	& div {
		display: flex;
		justify-content: center;
		gap: var(--Gap_M);
		margin: 0 0 var(--Margin_M);
		height: var(--Size_44);
		background: var(--Color_1D000);
		& h2 {
			display: flex;
			align-items: center;
			margin: 0;
			padding: 0 var(--Gap_L);
			text-align: left;
			font-size: var(--Size_14);
			font-weight: 600;
		}
		& span {
			flex: 1;
			background: url("../common/img/search/h2.png");
			background-size: auto var(--Size_44);
		}
		& span:nth-of-type(1) {
			background-position: right center;
		}
		& span:nth-of-type(2) {
			background-position: left center;
		}
	}
}

article section {
	& ul.search {
		margin: 0 0 var(--Margin_M);
		width: 100%;
		background: var(--Color_1D000);
	}
	& .search_children {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: var(--Color_1D000);
		border: 1px var(--Color_1D020) solid;
		border-radius: var(--Border-radius_S);
		overflow: hidden;
		& h3 {
			padding: var(--Gap_M) var(--Gap_L);
			font-size: var(--Size_12);
			color: var(--Color_FF);
			font-weight: 600;
			background: var(--Color_K);
			font-weight: 600;
			font-style: normal;
		}
		& figure {
			display: flex;
			justify-content: center;
			background: var(--Color_FF);
			aspect-ratio: 1 / 1;
			& img {
				width: 100%;
				height: auto;
				object-fit: contain;
			}
		}
		& ul {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin: 0 var(--Gap_M);
			& li {
				display: flex;
				gap: var(--Gap_M);
				padding: var(--Gap_S) 0;
				font-size: var(--Size_08);
				border-bottom: 1px var(--Color_1D020) solid;
				& em {
					flex: 1;
					display: flex;
					align-items: center;
				}
				& strong {
					display: flex;
					align-items: baseline;
					gap: var(--Size_02);
					font-size: var(--Size_10);
					font-weight: 600;
					& span {
						width: var(--Size_10);
						font-size: var(--Size_08);
						font-weight: 400;
					}
				}
				& strong:after {
					width: var(--Size_10);
					font-size: var(--Size_08);
					font-weight: 400;
				}
			}
			& li:before {
				display: flex;
				justify-content: center;
				align-items: center;
				width: var(--Size_24);
				font-size: var(--Size_06);
				color: var(--Color_FF);
				background: var(--Color_1D100);
				border-radius: var(--Gap_S);
			}
			& li.n:before {
				content: '麺';
			}
			& li.s:before {
				content: 'スープ';
			}
			& li.k:before {
				content: 'カエシ';
			}
			& li.o:before {
				content: 'あぶら';
			}
			& li.t:before {
				content: '他';
			}
			& li.n strong:after {
				content: 'g';
			}
			& li.s strong:after {
				content: 'cc';
			}
			& li.k strong:after {
				content: 'cc';
			}
			& li.o strong:after {
				content: 'cc';
			}
			& li:nth-of-type(111) strong:after {
				content: 'g';
			}
		}
		& p {
			padding: var(--Gap_M) 0 0;
			text-align: center;
			font-size: var(--Size_16);
			font-weight: 600;
			line-height: 1;
			text-decoration: italic;
			& span {
				padding: 0 var(--Gap_S);
				font-size: var(--Size_08);
				text-decoration: normal;
			}
		}
		& a {
			display: flex;
			justify-content: center;
			align-items: baseline;
			margin: var(--Gap_M);
			padding: var(--Gap_M);
			font-size: var(--Size_10);
			color: var(--Color_FF);
			font-weight: 600;
			line-height: 1;
			background: var(--Color_R);
			border-radius: var(--Border-radius_L);
		}
		& a.out:after {
			content: "\f08e";
			padding: 0 0 0 var(--Size_04);
			font-size: var(--Size_08);
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
		}
	}
	& .slick-list {
		margin: 0 0 var(--Margin_S) calc(-1 * var(--Gap_L)) ;
		overflow: clip;
		
	}
	& .slick-track {
		display: flex;
		align-items: stretch;
		gap: var(--Gap_L);
	}
	& .slick-initialized .slick-slide {
		display: flex;
		flex-direction: column;
		height: auto;
	}
	& .slick-arrow {
		position: absolute;
		bottom: var(--SlickArrow_bottom);
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--Size_24);
		height: var(--Size_24);
		background: var(--Color_FF100);
		appearance: none;
		-webkit-appearance: none;
		cursor: pointer;
		border: none;
		outline: none;
		z-index: 10;
		background: var(--Color_1D100);
		border-radius: var(--Border-radius_L);
		& i {
			font-size: var(--Size_16);
			color: var(--Color_FF100);
		}
	}
	& .slick-arrow:hover {
		background: var(--Color_R100);
	}
	& .slick-disabled {
		background: var(--Color_1D020);
	}
	& .slick-prev {
		left: 0;
	}
	& .slick-next {
		right: 0;
	}
	.slick-dots {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--Gap_M);
		margin: var(--Gap_L) 0 0;
		& li {
			& button {
				display: flex;
				justify-content: center;
				padding: var(--Size_04) 0;
				width: var(--Size_20);
				font-size: var(--Size_08);
				color: var(--Color_FF100);
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_L);
				appearance: none;
				-webkit-appearance: none;
				cursor: pointer;
				border: none;
				outline: none;
			}
			& button:hover {
				color: var(--Color_FF100);
				background: var(--Color_R100);
			}
		}
	}
}