@charset "utf-8";

:root {

}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

@media screen and (max-width:480px) {
	:root {
		--EventWeek_flex-basis: 100%;

		--Event_figure_flex-basis: 100%;
		--Event_DivWrap_flex-basis: 100%;
		
		
		--EventDetailLeft_flex-basis: 100%;
		--EventDetailRight_flex-basis: 100%;
	}
}

@media screen and (min-width:481px) and (max-width: 768px) {
	:root {
		--EventWeek_flex-basis: calc( calc( 100% - var(--Size_12) ) / 2 );

		--Event_figure_flex-basis: 40%;
		--Event_DivWrap_flex-basis: calc( 100% - var(--Event_figure_flex-basis) );
		
		--EventDetailLeft_flex-basis: 100%;
		--EventDetailRight_flex-basis: 100%;
	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {
		--EventWeek_flex-basis: calc( calc( 100% - var(--Size_12) ) / 2 );

		--Event_figure_flex-basis: 36%;
		--Event_DivWrap_flex-basis: calc( 100% - var(--Event_figure_flex-basis) );
		
		--EventDetailLeft_flex-basis: calc( 100% - var(--Size_12) - var(--Size_200) );
		--EventDetailRight_flex-basis: var(--Size_140);
	}
}

@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {
		--EventWeek_flex-basis: calc( calc( 100% - var(--Size_24) ) / 3 );

		--Event_figure_flex-basis: 34%;
		--Event_DivWrap_flex-basis: calc( 100% - var(--Event_figure_flex-basis) );
		
		--EventDetailLeft_flex-basis: calc( 100% - var(--Size_12) - var(--Size_200) );
		--EventDetailRight_flex-basis: var(--Size_200);
	}
}

@media screen and (min-width:1440px) {
	:root {
		--EventWeek_flex-basis: calc( calc( 100% - var(--Size_36) ) / 3 );
		
		--Event_figure_flex-basis: 36%;
		--Event_DivWrap_flex-basis: calc( 100% - var(--Event_figure_flex-basis) );
		
		--EventDetailLeft_flex-basis: calc( 100% - var(--Size_12) - var(--Size_200) );
		--EventDetailRight_flex-basis: var(--Size_200);
	}
}



div#EventS,
div#EventU {
	width: 100%;
	& ul {
		display: flex;
		flex-direction: var(--Flex-direction_CRRR);
		flex-wrap: wrap;
		gap: var(--Size_12);
		margin: var(--Size_12) 0 var(--Size_24);
		padding: 0;
		width: 100%;
		& li {
			flex-basis: var(--EventWeek_flex-basis);
			display: flex;
			width: 100%;
			& div.wrap {
				display: flex;
				flex-direction: column;
				margin: 0;
				padding: 0;
				width: 100%;
				background: var(--Color_1D080);
				border: 1px var(--Color_A040) solid;
				border-radius: var(--Border-radius_S);
				transition: var(--Transition_06);
				-o-transition: var(--Transition_06);
				-moz-transition: var(--Transition_06);
				-webkit-transition: var(--Transition_06);
				overflow: clip;
				& div.title {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					gap: var(--Size_06);
					padding: var(--Size_12) var(--Size_12) 0;
					& h3 {
						display: flex;
						flex-direction: column-reverse;
						margin: 0;
						padding: 0;
						color: var(--Color_A100);
						font-size: var(--Size_12);
						font-weight: 600;
						line-height: 1.2;
						border: none;
						& span {
							display: block;
							padding: 0;
							color: var(--Color_FF100);
							font-size: var(--Size_08);
						}
					}
				}

				& figure {
					flex: 1;
					display: flex;
					align-items: flex-end;
					margin: var(--Size_12) 0 0;
					& img {
						width: 100%;
					}
				}

				& .tag {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					gap: var(--Size_04);
					margin: 0 var(--Size_12);
					padding: var(--Size_06) 0;
					background: var(--Color_1D000);
					border-bottom: 1px var(--Color_A040) solid;
					& em {
						font-size: var(--Size_08);
						white-space: nowrap;
					}
					& strong {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-end;
						gap: var(--Size_04);
						color: var(--Color_FF100);
						& span {
							padding: var(--Size_02) var(--Size_04);
							font-size: var(--Size_08);
							font-weight: 400;
							white-space: nowrap;
							line-height: 1;
							background: var(--Color_1D000);
							border-radius: var(--Border-radius_S);
						}
					}
				}
				& .time {
					& em {
					}
					& strong {
						& span {
						}
					}
				}
				& .fee {
					& em {
					}
					& strong {
						& span {
						}
					}
				}
				& .style {
					& em {
					}
					& strong {
						& span {
						}
					}
				}
				& .goods {
					& em {
					}
					& strong {
						& span {
						}
					}
				}
				& .equips {
					& em {
					}
					& strong {
						& span {
						}
					}
				}

				& .manuscript {
					& em {
					}
					& strong {
						font-size: var(--Size_08);
						/* white-space: normal; */
						/* overflow: hidden; */
						/* display: -webkit-box; */
						/* -webkit-box-orient: vertical; */
						/* -webkit-line-clamp: 4; */
					}
				}
			}
		}
		& li:hover {
			& div.wrap {
				background: var(--Color_1D100);
			}
		}
	}
}


div#EventS {
	& ul#EventSList {
		& li {
			& div.wrap {
				& div.title {
					& time {
						flex-shrink: 0;
						flex-basis: var(--Size_32);
						display: flex;
						flex-direction: column;
						flex-wrap: nowrap;
						justify-content: center;
						align-items: center;
						width: var(--Size_40);
						color: var(--Color_1D100);
						background: var(--Color_A100);
						border-radius: var(--Border-radius_L);
						aspect-ratio: 1 / 1;
						& span {
							display: inline-block;
							font-weight: 600;
							line-height: 1;
						}
						& span.m {
							padding: 0;
							font-size: var(--Size_08);
						}
						& span.d {
							padding: 0;
							font-size: var(--Size_18);
						}
					}
				}
			}
		}
	}
}

div#EventU {
	& ul#EventUList {
		& li {
			& div.wrap {
				& div.title {
					& .weekday {
						flex-shrink: 0;
						flex-basis: var(--Size_32);
						display: flex;
						flex-direction: column;
						flex-wrap: nowrap;
						justify-content: center;
						align-items: center;
						width: var(--Size_40);
						color: var(--Color_1D100);
						background: var(--Color_A100);
						border-radius: var(--Border-radius_L);
						aspect-ratio: 1 / 1;
					}
				}
			}
		}
	}
}

div#EventS,
div#EventU {
	& ul.skeleton {
		display: flex;
		flex-direction: var(--Flex-direction_CRRR);
		flex-wrap: wrap;
		gap: var(--Size_12);
		margin: var(--Size_12) 0 var(--Size_24);
		padding: 0;
		width: 100%;
		& .skeleton-glo {
			flex-basis: var(--EventWeek_flex-basis);
			padding: 0;
			width: 100%;
			border-radius: var(--Border-radius_S);
			& .skeleton-wrap {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				gap: var(--Size_06);
				margin: 0;
				padding: var(--Size_12);
				width: 100%;
				background: var(--Color_CV010);
				border-radius: var(--Border-radius_S);

				-webkit-transition: var(--Transition_06);
				-moz-transition: var(--Transition_06);
				-o-transition: var(--Transition_06);
				transition: var(--Transition_06);
				& div {
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_S);
					
					background: linear-gradient(90deg, var(--Color_1D100) 25%, var(--Color_1D080) 50%, var(--Color_1D100) 75%);
					background-size: 200px 100%;
					animation: shine 1.5s infinite linear;
				}
				& .skeleton-title {
					height: var(--Size_24);
				}
				& .skeleton-figure {
					aspect-ratio: 7 / 5;
				}
				& .skeleton-tag {
					height: var(--Size_24);
					
				}
				& .skeleton-manuscript {
					height: var(--Size_24);
				}
			}
		}
	}
}


@keyframes shine {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}