@charset "utf-8";

:root {
}

/* モバイル */
@media screen and (max-width: 1024px) {

	:root {
		--Table_Thead_SakeName_min-width: calc( 18 * var(--BaseSize) );
		--Table_SakeName_Figure_width: calc( 4 * var(--BaseSize) );

	}
}

/* PC */
@media screen and (min-width: 1025px) {
	:root {
		--Table_Thead_SakeName_min-width: calc( 26 * var(--BaseSize) );
		--Table_SakeName_Figure_width: calc( 5 * var(--BaseSize) );
	}
}




table {
	position: relative;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	& thead {
		position: sticky;
		top: 0;
		background: var(--Theme-100);
		z-index: 1000;
		& tr:nth-of-type(1) {
			& th {
				padding: calc( .5 * var(--BaseSize) ) 0;
				cursor: pointer;
			}
		}
		& tr:nth-of-type(2) {
			& th {
				padding: 0 0 calc( .5 * var(--BaseSize) );
				cursor: pointer;
			}
		}
		& tr {
			border-radius: var(--Border-radius_S);
			& th {
				color: var(--Color_FF100);
				font-size: calc( .8 * var(--BaseSize) );
				text-align: center;
				vertical-align: middle;
				background: var(--Theme-100);
				transition: var(--Transition_04s);
				& div {
					display: flex;
					flex-direction: column;
					gap: calc( .5 * var(--BaseSize) );
					padding: calc( .5 * var(--BaseSize) ) calc( .25 * var(--BaseSize) ) calc( .5 * var(--BaseSize) );
					width: 100%;
					& input {
						font-size: calc( .8 * var(--BaseSize) );
					}
				}
			}

			/* 銘柄 */
			& th.NameView {
				position: sticky;
				left: 0;
				min-width: var(--Table_Thead_SakeName_min-width);
				z-index: 200;
			}

			/* 銘柄(編集) */
			& th.SakeName {
				min-width: calc( 10 * var(--BaseSize) );
			}

			/* ふりがな */
			& th.SakeKana {
				min-width: calc( 10 * var(--BaseSize) );
			}

			/* 特定名称 */
			& th.SpecificName,
			/* 工程 */
			& th.Process,
			/* 原料米 */
			& th.RiceVariety,
			/* 酵母 */
			& th.Yeast {
				min-width: calc( 6 * var(--BaseSize) );
			}

			/* 蔵元 */
			& th.BreweryName {
				width: calc( 6 * var(--BaseSize) );
			}

			/* 説明 */
			& th.Description {
				min-width: calc( 20 * var(--BaseSize) );
			}

			/* バランス */
			& th.Balance {
				min-width: calc( 6 * var(--BaseSize) );
			}

			/* アルコール度数 */
			& th.ABV,
			/* 日本酒度 */
			& th.SMV,
			/* 酸度 */
			& th.Acidity,
			/* アミノ酸度 */
			& th.AminoAcid,
			/* 精米歩合 */
			& th.PolishingRatio {
				width: calc( 5 * var(--BaseSize) );
				max-width: calc( 5 * var(--BaseSize) );
				min-width: calc( 5 * var(--BaseSize) );
			}

			/* 画像URL */
			& th.Image {
				min-width: calc( 10 * var(--BaseSize) );
			}

			& th.FlagCheck {
			}

			/* 在庫 */
			& th.FlagStock,
			/* おすすめ */
			& th.FlagRecommend,
			/* お品書 */
			& th.FlagMenu,
			/* スペシャル */
			& th.FlagSpecial,
			/* デザート */
			& th.FlagSweet,
			/* 飲み放題 */
			& th.FlagAllYouCanDrink,
			/* サイネージ */
			& th.FlagSignage,
			& th.FlagSite {
				min-width: calc( 5 * var(--BaseSize) );
			}

			/* 価格 */
			& th.Price {
				width: calc( 8 * var(--BaseSize) );
			}

			/* 操作 */
			& th.Action {
				min-width: calc( 5 * var(--BaseSize) );
				cursor: unset;
			}


			/* モーダル用 */
			& th.ModalNo {
				width: calc( 3 * var(--BaseSize) );
			}
			& th.ModalBrewery {
			}
			& th.ModalPrefecture {
				width: calc( 5 * var(--BaseSize) );
			}
			& th.ModalOperation {
				width: calc( 3 * var(--BaseSize) );
				cursor: unset;
			}
		}

		/* =========================================
		   �ե��륿���Ԥγ��ĥ��˥᡼�����
		========================================= */
		/* �� �Ĥ��Ƥ�����ʥǥե���ȡ� */
		& tr.filter-row {
			& th {
				padding: 0;
				height: 0;
				transition: all 0.3s ease;
			}
		}
		& tr.filter-row {
			& th {
				& > div {
					padding: 0;
					max-height: 0;
					opacity: 0;
					overflow: hidden;
					transition: all 0.3s ease;
				}
			}
		}

		/* �� �����Ƥ������.is-open ���դ������� */
		& tr.filter-row.is-open {
			& th {
				padding-top: calc( .5 * var(--BaseSize) ) 0;
			}
		}
		& tr.filter-row.is-open {
			& th {
				& > div {
					padding: 0 calc( .25 * var(--BaseSize) ) calc( .5 * var(--BaseSize) );
					max-height: 100px;
					opacity: 1;
					overflow: visible;
				}
			}
		}
	}

	& tbody {
		overflow-y: auto;

		& tr:nth-child(even) {
			& td {
				background-color: var(--Theme-005);
				border-left: var(--Border);
			}
		}
		& tr:nth-child(odd) {
			& td {
				background-color: var(--Color_FF005);
				border-left: var(--Border);
			}
		}
		& tr:hover {
			& td {
				background: var(--Theme-020);
			}
		}
		& tr {
			transition: var(--Transition_04s);
			& td {
				padding: calc( .25 * var(--BaseSize) );
				vertical-align: middle;
				height: 100%;
			}

			/* 銘柄 */
			& td.NameView {
				position: sticky;
				left: 0;
				z-index: 999;
				backdrop-filter: var(--backdrop-filter_blur);
				& > div {
					display: flex;
					align-items: center;
					gap: calc( .5 * var(--BaseSize) );
					& figure {
						flex-basis: var(--Table_SakeName_Figure_width);
						display: flex;
						margin: 0;
						width: var(--Table_SakeName_Figure_width);
						height: 100%;
						aspect-ratio: 1 / 1;
						& a {
							display: flex;
							width: 100%;
							& img {
								width: 100%;
								border-radius: var(--Border-radius_S);
							}
						}
						& div {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background: var(--Theme-020);
							border-radius: var(--Border-radius_S);
						}
						& div:after {
							content: 'NO PHOTO';
							color: var(--Color_FF100);
							font-size: calc( .6 * var(--BaseSize) );
						}
					}
					& > div {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						gap: calc( .25 * var(--BaseSize) );
						& strong {
							display: flex;
							align-items: center;
							font-size: calc( 1.1 * var(--BaseSize) );
							font-weight: 600;
							line-height: 1;
						}
						& em {
							display: flex;
							align-items: center;
							gap: calc( .25 * var(--BaseSize) );
							& span {
								display: inline-block;
								padding: calc( .1 * var(--BaseSize) ) calc( .3 * var(--BaseSize) );
								text-align: center;
								font-size: calc( .6 * var(--BaseSize) );
								color: var(--Theme-100);
								background: var(--Theme-020);
								border-radius: var(--Border-radius_L);
							}
							& small {
								color: var(--Theme-060);
								font-size: calc( .8 * var(--BaseSize) );
							}
						}
					}
				}
			}

			/* 銘柄(編集) */
			& td.SakeName {
			}

			/* ふりがな */
			& td.SakeKana {
				min-width: calc( 10 * var(--BaseSize) );
			}

			/* 特定名称 */
			& td.SpecificName,
			/* 工程 */
			& td.Process,
			/* 原料米 */
			& td.RiceVariety,
			/* 酵母 */
			& td.Yeast {
				min-width: calc( 6 * var(--BaseSize) );
			}

			/* 蔵元 */
			& td.BreweryName {
				& div {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					& strong { font-size: calc( 1 * var(--BaseSize) ); font-weight: 600; }
					& small { color: var(--Theme-060); font-size: calc( .8 * var(--BaseSize) ); }
				}
			}

			/* 説明 */
			& td.Description {
			}

			/* バランス */
			& td.Balance {
			}

			/* アルコール度数 */
			& td.ABV,
			/* 日本酒度 */
			& td.SMV,
			/* 酸度 */
			& td.Acidity,
			/* アミノ酸度 */
			& td.AminoAcid,
			/* 精米歩合 */
			& td.PolishingRatio {
			}

			/* 画像URL */
			& td.Image {
			}

			& td.FlagCheck {
				text-align: center;
				& input { transform: scale(1.5); }
			}

			/* 在庫 */
			& td.FlagStock,
			/* おすすめ */
			& td.FlagRecommend,
			/* お品書 */
			& td.FlagMenu,
			/* スペシャル */
			& td.FlagSpecial,
			/* デザート */
			& td.FlagSweet,
			/* 飲み放題 */
			& td.FlagAllYouCanDrink,
			/* サイネージ */
			& td.FlagSignage,
			/* サイト */
			& td.FlagSite {
			}

			/* 価格 */
			& td.Price {
				text-align: center;
				& input {
					width: 100%;
					font-size: calc( .8 * var(--BaseSize) );
				}
			}

			/* 操作 */
			& td.Action {
			}



			& td.table-group {
				/* background-color: var(--Theme-000); */
			}

			/* モーダル用 */
			& td.ModalNo {
				text-align: center;
				font-size: calc( .8 * var(--BaseSize) );
			}
			& td.ModalBrewery {
			}
			& td.ModalPrefecture {
			}
			& td.ModalOperation {
				& div {
					display: flex;
					justify-content: center;
					width: 100%;
				}
			}
		}
	}
}