@charset "utf-8";

:root {

}

@media screen and (max-width:425px) {
	:root {

		--UlSaketoday_Li_flex-basis: calc( calc( 100% - calc( var(--Size_10) * 0) ) / 1 );

	}
}

@media screen and (min-width:426px) and (max-width: 768px) {
	:root {

		--UlSaketoday_Li_flex-basis: calc( calc( 100% - calc( var(--Size_10) * 2) ) / 3 );

	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		--UlSaketoday_Li_flex-basis: calc( calc( 100% - calc( var(--Size_10) * 2) ) / 3 );

	}
}

@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		--UlSaketoday_Li_flex-basis: calc( calc( 100% - calc( var(--Size_10) * 2) ) / 3 );

	}
}

@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {

		--UlSaketoday_Li_flex-basis: calc( calc( 100% - calc( var(--Size_10) * 2) ) / 2 );

	}
}

@media screen and (min-width:2561px) {
	:root {

		--UlSaketoday_Li_flex-basis: calc( calc( 100% - calc( var(--Size_10) * 7) ) / 8 );

	}
}





/* ーーーーーーーーーーーーーーーーーーーー
日本酒紹介
スケルトン
ーーーーーーーーーーーーーーーーーーーー */


ul.saketoday {
	& li.skeleton {
		flex-basis: var(--UlSaketoday_Li_flex-basis);
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--Size_10);
		padding: var(--Size_06);
		border-radius: var(--Border-radius_S);
		border-radius: var(--Border-radius_S);
		backdrop-filter: var(--backdrop-filter_blur);
		-o-backdrop-filter: var(--backdrop-filter_blur);
		-moz-backdrop-filter: var(--backdrop-filter_blur);
		-webkit-backdrop-filter: var(--backdrop-filter_blur);
		& figure {
			display: flex;
			margin: 0;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			border-radius: var(--Border-radius_S);
		}
		& div.title_area {
			padding: var(--Size_06);
			height: var(--Size_12);
			background: var(--Color_1D100);
			border-radius: var(--Border-radius_S);
		}
		& div.pre_area {
			padding: var(--Size_06);
			height: var(--Size_12);
			background: var(--Color_1D100);
			border-radius: var(--Border-radius_S);
		}
		& div.text_area {
			padding: var(--Size_06);
			height: var(--Size_12);
			background: var(--Color_1D100);
			border-radius: var(--Border-radius_S);
		}
		& div.data_area {
			padding: var(--Size_06);
			height: var(--Size_12);
			background: var(--Color_1D100);
			border-radius: var(--Border-radius_S);
		}
	}
}





/* ーーーーーーーーーーーーーーーーーーーー
日本酒紹介
ーーーーーーーーーーーーーーーーーーーー */

section#contents {
	& ul.saketoday {
		display: flex;
		flex-wrap: wrap;
		flex-direction: var(--Flex-direction_CRRRRR);
		justify-content: flex-start;
		gap: var(--Size_10);
		margin: var(--Width_M);
		padding: var(--Margin_0);
		& li {
			flex-basis: var(--UlSaketoday_Li_flex-basis);
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 0;
			border-radius: var(--Border-radius_S);
			border-radius: var(--Border-radius_S);
			backdrop-filter: var(--backdrop-filter_blur);
			-o-backdrop-filter: var(--backdrop-filter_blur);
			-moz-backdrop-filter: var(--backdrop-filter_blur);
			-webkit-backdrop-filter: var(--backdrop-filter_blur);
			& figure {
				display: flex;
				margin: 0;
				aspect-ratio: 4 / 3;
				overflow: hidden;
				border-radius: var(--Border-radius_S);
				& img#source {
				}
				& img#noimg {
					width:100%;
				}
				& div {
					position: absolute;
					top: var(--Size_08);
					left: var(--Size_08);
					& img {
						width: var(--Size_24);
					}
				}
			}
			& div.title_area {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: column;
				gap: var(--Size_04);
				padding: var(--Size_06);
				& div:nth-child(1) {
					font-size: var(--Size_12);
					font-weight: 600;
					line-height: 1.4;
				}
				& div:nth-child(2) {
					color: var(--Color_FF080);
					font-size: var(--Size_08);
					line-height: 1.4;
				}
			}
			& div.pre_area {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: flex-end;
				gap: var(--Size_04);
				padding: 0 var(--Size_06) var(--Size_06);
				& div {
					padding: var(--Size_02) var(--Size_06);
					color: var(--Color_FF100);
					font-size: var(--Size_08);
					line-height: 1;
					border-radius: var(--Border-radius_L);
				}
			}
			& div.text_area {
				padding: 0 var(--Size_06) var(--Size_06);
			}
			& div.data_area {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: column;
				gap: var(--Size_04);
				padding: 0 var(--Size_06) var(--Size_06);
				& div {
					display: flex;
					flex-wrap: nowrap;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					gap: var(--Size_10);
					padding: var(--Size_04) 0 0;
					& em {
						color: var(--Color_FF100);
						font-size: var(--Size_08);
						line-height: 1;
						white-space: nowrap:
					}
					& strong {
						color: var(--Color_FF100);
						font-size: var(--Size_10);
						line-height: 1;
					}
				}
			}
		}
	}
}

.kanda {
	& ul.saketoday {
		& li {
			background: var(--Color_K010);
			border: var(--Border_K060);
			& figure {
				& img#source {
				}
				& img#noimg {
				}
				& div {
					& img {
					}
				}
			}
			& div.title_area {
				& div:nth-child(1) {
				}
				& div:nth-child(2) {
				}
			}
			& div.pre_area {
				& div {
					background: var(--Color_K100);
				}
			}
			& div.text_area {
			}
			& div.data_area {
				& div {
					border-top: var(--Border_K040);
					& em {
					}
					& strong {
					}
				}
			}
		}
	}
}

.osaka {
	& ul.saketoday {
		& li {
			background: var(--Color_O010);
			border: var(--Border_O060);
			& figure {
				& img#source {
				}
				& img#noimg {
				}
				& div {
					& img {
					}
				}
			}
			& div.title_area {
				& div:nth-child(1) {
				}
				& div:nth-child(2) {
				}
			}
			& div.pre_area {
				& div {
					background: var(--Color_O100);
				}
			}
			& div.text_area {
			}
			& div.data_area {
				& div {
					border-top: var(--Border_O040);
					& em {
					}
					& strong {
					}
				}
			}
		}
	}
}

.naha {
	& ul.saketoday {
		& li {
			background: var(--Color_N010);
			border: var(--Border_N060);
			& figure {
				& img#source {
				}
				& img#noimg {
				}
				& div {
					& img {
					}
				}
			}
			& div.title_area {
				& div:nth-child(1) {
				}
				& div:nth-child(2) {
				}
			}
			& div.pre_area {
				& div {
					background: var(--Color_N100);
				}
			}
			& div.text_area {
			}
			& div.data_area {
				& div {
					border-top: var(--Border_N040);
					& em {
					}
					& strong {
					}
				}
			}
		}
	}
}