@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Card_Ul_flex-wrap: nowrap;
		--Card_justify-content: normal;
		--Card_padding: 0;
		--Card_width: 100%;
		--Card_overflow-x: auto;
		--Card_Li_flex-basis: 300px;
		--OpenReasonSoup_H2_Em_font-size: var(--Size_08);
		--OpenReasonSoup_H2_Strong_font-size: var(--Size_16);
		--OpenReasonNoodles_H2_Em_font-size: var(--Size_08);
		--OpenReasonNoodles_H2_Strong_font-size: var(--Size_16);
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Card_Ul_flex-wrap: wrap;
		--Card_justify-content: center;
		--Card_padding: 0 var(--padding);
		--Card_width: 100%;
		--Card_overflow-x: auto;
		--Card_Li_flex-basis: calc( calc( 100% - calc( var(--Gap_L) * 2 ) ) / 3 );
		--OpenReasonSoup_H2_Em_font-size: var(--Size_22);
		--OpenReasonSoup_H2_Strong_font-size: var(--Size_34);
		--OpenReasonNoodles_H2_Em_font-size: var(--Size_22);
		--OpenReasonNoodles_H2_Strong_font-size: var(--Size_34);
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Card_Ul_flex-wrap: wrap;
		--Card_justify-content: center;
		--Card_padding: 0;
		--Card_width: 1160px;
		--Card_overflow-x: auto;
		--Card_Li_flex-basis: calc( calc( 100% - calc( var(--Gap_L) * 2 ) ) / 3 );
		--OpenReasonSoup_H2_Em_font-size: var(--Size_22);
		--OpenReasonSoup_H2_Strong_font-size: var(--Size_34);
		--OpenReasonNoodles_H2_Em_font-size: var(--Size_22);
		--OpenReasonNoodles_H2_Strong_font-size: var(--Size_34);
	}
}

#open {
	& div {
		display: flex;
		justify-content: center;
		gap: var(--Gap_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_16);
			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;
		}
	}
}

.wrapA {
	& #sampleD {
		display: flex;
		justify-content: center;
		& a {
			width: 240px;
			& figure {
				display: flex;
				justify-content: center;
				align-items: center;
				aspect-ratio: 284 / 231;
				background: var(--Color_1D000);
				& img {
					width: 100%;
					scale: 1;
					transition: var(--Transition);
					-o-transition: var(--Transition);
					-moz-transition: var(--Transition);
					-webkit-transition: var(--Transition);
				}
			}
		}
		& a:hover {
			& figure {
				& img {	
					scale: 1.04;
					opacity: .7;
				}
			}
		}
	}
}

#card {
	& .tax {
		text-align: center;
	}
	& h2 {
		margin: var(--Gap_L) 0 0;
		padding: 0 0 var(--Gap_S);
		font-size: var(--Size_22);
		border-bottom: 1px var(--Color_R040) solid;
	}
	& ul {
		display: flex;
		justify-content: var(--Card_justify-content);
		flex-wrap: var(--Card_Ul_flex-wrap);
		gap: var(--Gap_L);
		margin: var(--Margin_S) 0 0;
		padding: var(--Card_padding);
		width: var(--Card_width);
		overflow-x: var(--Card_overflow-x);
		scroll-snap-type: x mandatory;
		scroll-snap-align: start;
		-webkit-overflow-scrolling: touch;
		& li {
			flex-shrink: 0;
			flex-basis: var(--Card_Li_flex-basis);
			padding: var(--Gap_M);
			text-align: center;
			background: #fffcdb;
			scroll-snap-align: center;
			& figure {
				background: var(--Color_1D000);
				overflow: hidden;
				aspect-ratio: 1 / 1;
				& img {
					height: 100%;
				}
			}
			& > div {
				& h3 {
					text-align: center;
					font-size: var(--Size_12);
					font-weight: 600;
				}
				& p {
					text-align: center;
					font-size: var(--Size_16);
					font-weight: 600;
				}
			}
			& a {
				display: inline-flex;
				align-items: center;
				margin: var(--Gap_L) 0 0;
				padding: 0 var(--Margin_S) var(--Gap_S) 0;
				font-size: var(--Size_12);
				color: var(--Color_K);
				font-weight: 600;
				border-bottom: 3px var(--Color_K) solid;
			}
			& a:before {
				content: '';
				position: absolute;
				bottom: -2px;
				right: -2px;
				width: var(--Size_30);
				height: 3px;
				border-radius: var(--Border-radius_L);
				background-color: var(--Color_K);
				transform: rotate(50deg);
				transform-origin: calc(100% - 2px) 50%;
			}
			& a.out:after {
				content: "\f08e";
				padding: 0 0 0 var(--Gap_S);
				font-size: var(--Size_10);
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
			}
			& a:hover {
				color: var(--Color_R);
				border-bottom: 3px var(--Color_R) solid;
			}
			& a:hover:before {
				background-color: var(--Color_R);
			}
		}
	}
}

section#contents.page {
	& .wrapB {
		& .card {
			display: flex;
			flex-wrap: var(--Card_Card_flex-wrap);
			justify-content: var(--Card_Card_justify-content);
			gap: var(--Gap_L);
			margin: 0 0 var(--Margin_M);
			padding: var(--Card_Card_padding);
			width: var(--Card_Card_width);
			background: var(--Color_1D000);
			overflow-x: var(--Card_Card_overflow-x);
			scroll-snap-type: x mandatory;
			scroll-snap-align: start;
			-webkit-overflow-scrolling: touch;
			& li {
				flex-shrink: 0;
				flex-basis: var(--Card_Card_Li_flex-basis);
				padding: var(--Gap_M);
				text-align: center;
				background: #fffcdb;
				& figure {
					background: var(--Color_1D000);
					overflow: hidden;
					aspect-ratio: 1 / 1;
					& img {
					}
				}
				& > div {
					& h3 {
						text-align: center;
						font-size: var(--Size_12);
						font-weight: 600;
					}
					& p {
						text-align: center;
						font-size: var(--Size_16);
						font-weight: 600;
					}
				}
				& a {
					display: inline-flex;
					align-items: center;
					margin: var(--Gap_L) 0 0;
					padding: 0 var(--Margin_S) var(--Gap_S) 0;
					font-size: var(--Size_12);
					color: var(--Color_K);
					font-weight: 600;
					border-bottom: 3px var(--Color_K) solid;
				}
				& a:before {
					content: '';
					position: absolute;
					bottom: -2px;
					right: -2px;
					width: var(--Size_30);
					height: 3px;
					border-radius: var(--Border-radius_L);
					background-color: var(--Color_K);
					transform: rotate(50deg);
					transform-origin: calc(100% - 2px) 50%;
				}
				& a.out:after {
					content: "\f08e";
					padding: 0 0 0 var(--Gap_S);
					font-size: var(--Size_10);
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}
				& a:hover {
					color: var(--Color_R);
					border-bottom: 3px var(--Color_R) solid;
				}
				& a:hover:before {
					background-color: var(--Color_R);
				}
			}
			& > li:nth-of-type(1) {
				margin: var(--Card_Card_Li1_margin);
				scroll-snap-align: end;
			}
			& > li:last-child {
				margin: var(--Card_Card_LiL_margin);
				scroll-snap-align: start;
			}
		}
	}
}

#open.Reason.Soup {
	display: flex;
	gap: var(--Gap_L);
	width: 100%;
	& h2 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		& em {
			font-size: var(--OpenReasonSoup_H2_Em_font-size);
		}
		& strong {
			font-size: var(--OpenReasonSoup_H2_Strong_font-size);
			font-weight: 600;
		}
	}
	& figure {
		flex-basis: 36%;
		& img {
			
		}
	}
}

#open.Reason.Noodles {
	display: flex;
	gap: var(--Gap_L);
	width: 100%;
	& h2 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		& em {
			font-size: var(--OpenReasonNoodles_H2_Em_font-size);
		}
		& strong {
			font-size: var(--OpenReasonNoodles_H2_Strong_font-size);
			font-weight: 600;
		}
	}
	& figure {
		flex-basis: 36%;
		& img {
			
		}
	}
}

#open.Reason {
	display: flex;
	gap: var(--Gap_L);
	width: 100%;
	& h2 {
		display: flex;
		flex-direction: column;
		& em {
			font-size: var(--Size_12);
		}
		& strong {
			font-size: var(--Size_22);
			font-weight: 600;
		}
	}
	& figure {
		flex-basis: 50%;
		& img {
			
		}
	}
}

.Reason {
	& h3 {
		padding: var(--Margin_S) 0 0;
		text-align: center;
		font-size: var(--H3_font-size);
		font-weight: 600;
	}
	& div {
		display: flex;
		flex-direction: var(--Flex-direction_CRR);
		flex-wrap: wrap;
		gap: var(--Gap_L);
		padding: var(--Margin_S) 0 0;
		& figure {
			flex-direction: column;
			& img {
				width: 100%;
			}
			& p {
				text-align: center;
				font-size: var(--Size_10);
			}
		}
	}
	& .c1 {
		& > figure {
			flex-basis: calc( calc( 100% - calc( var(--Gap_L) * 0 ) ) / 1 );
		}
		& > div {
			flex-basis: calc( calc( 100% - calc( var(--Gap_L) * 0 ) ) / 1 );
		}
	}
	& .c2 {
		& > figure {
			flex-basis: calc( calc( 100% - calc( var(--Gap_L) * 1 ) ) / 2 );
		}
		& > div {
			flex-basis: calc( calc( 100% - calc( var(--Gap_L) * 1 ) ) / 2 );
		}
	}
	& table {
		margin: var(--Margin_S) 0 0;
		width: 100%;
		border: 1px var(--Color_1D060) solid;
		border-collapse: collapse;
		& tr {
			& th {
				padding: var(--Size_04);
				width: 50%;
				text-align: center;
				font-size: var(--Size_10);
				border: 1px var(--Color_1D060) solid;
			}
			& th:nth-of-type(1) {
				background: #feecd2;
			}
			& th:nth-of-type(2) {
				background: #f5b090;
			}
			& td {
				padding: var(--Size_04);
				width: 50%;
				text-align: center;
				font-size: var(--Size_10);
				border: 1px var(--Color_1D060) solid;
			}
		}
	}
}

article {
	& .Reason {
		& .box {
			& figure:after {
				content: '';
				position: absolute;
				top: var(--Gap_S);
				left: var(--Gap_S);
				width: 50%;
				background: url('../common/svg/circle.svg');
				background-repeat: no-repeat;
				aspect-ratio: 1 / 1;
				animation: 20s linear infinite rotation;
			}
		}
	}
	& .Reason.link {
		& .box {
			padding: 0;
			& > div {
				justify-content: center;
				padding: 0;
				& .link {
					padding: 0;
					& a {
						margin: 0;
					}
				}
			}
		}
	}
}

@keyframes rotation {
	0% { transform:rotate( 0 ); }
	100% { transform:rotate( 360deg ); }
}