@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) ) / 4 );
		
		--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);
			width: 100%;
			& div.wrap {
				flex-grow: 1;
				margin: 0;
				padding: 0;
				width: 100%;
				background: var(--Color_1D080);
				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);
				& div.title {
					display: flex;
					align-items: flex-start;
					gap: var(--Size_06);
					padding: var(--Size_08);
					& 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_32);
						background: var(--Color_FF000);
						border: 1px var(--Color_FF100) solid;
						border-radius: var(--Border-radius_L);
						aspect-ratio: 1 / 1;
						& span {
							display: inline-block;
							color: var(--Color_FF100);
							line-height: 1;
						}
						& span.m {
							padding: 0;
							font-size: var(--Size_08);
						}
						& span.d {
							padding: var(--Size_02) 0 0;
							font-size: var(--Size_10);
						}
					}
					& .weekday {
						flex-basis: 100%;
						padding: 0;
						color: var(--Color_FF100);
						font-size: var(--Size_10);
						font-weight: 400;
					}
					& .weekday::before {
						content: '\f073';
						padding: 0 var(--Size_04) 0 0;
						color: var(--Color_FF100);
						font-family: "Font Awesome 5 Free";
						font-size: var(--Size_10);
						font-weight: 900;
					}
					& h3 {
						padding: 0;
						color: var(--Color_C100);
						font-size: var(--Size_12);
						font-weight: 600;
						& span {
							display: block;
							padding: 0;
							color: var(--Color_FF100);
							font-size: var(--Size_08);
						}
					}
				}

				& figure {
					& img {
					}
				}

				& .tag {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: center;
					gap: var(--Size_04);
					margin: var(--Size_08) 0 0;
					padding: 0 var(--Size_08);
					& 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);
					}
				}
				& .fee {
					& span {
						color: var(--Color_FF100);
						border: 1px var(--Color_FF100) solid;
					}
				}
				& .style {
					& span {
						color: var(--Color_C100);
						background: var(--Color_C000);
						border: 1px var(--Color_C100) solid;
					}
				}

				& .manuscript {
					margin: var(--Size_08) 0 0;
					padding: 0 var(--Size_08) var(--Size_08);
					font-size: var(--Size_08);
					color: var(--Color_FF100);
					/* 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 {
					flex-wrap: nowrap;
				}
			}
		}
	}
}

div#EventU {
	& ul#EventUList {
		& li {
			& div.wrap {
				& div.title {
					flex-direction: column;
					flex-wrap: wrap;
				}
			}
		}
	}
}

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_1D080);
				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; }
}