@charset "utf-8";
:root {
	--Size: 12vh;
	--BaseTagPadding: calc( .3 * var(--BaseSize) ) calc( 2.4 * var(--BaseSize) );
}


/* ーーーーーーーーーーーーーーーーーーーー
神田六天
イベントサイネージ
イベント
ーーーーーーーーーーーーーーーーーーーー */

body#kanda.event {
	& article {
		display: flex;
		flex-direction: column;
		padding: 0;
		height: 100vh;
		& main {
			& section {
				display: flex;
				flex-direction: column;
				gap: calc( 2 * var(--BaseSize) );
				padding: var(--BaseSize);
				width: 100%;
			}
		}
	}
}

body#kanda.event {
	& article {
		& main {
			& section#eventA {
				display: flex;
				flex-direction: column;
				gap: calc( 1 * var(--BaseSize) );
				padding: 0;
				height: 100%;
				& #gas-data-container {
					height: 100%;
					& .slick-list {
						height: 100%;
						& .slick-track {
							height: 100%;
						}
					}
				}
			}
		}
	}
}

.Event_Data {
	display: flex !important;
	flex-direction: row;
	gap: calc( 2 * var(--BaseSize) );
	height: 100%;
	padding: calc( 2 * var(--BaseSize) );
	& figure {
		flex-basis: 341px;
		display: flex;
		align-items: flex-start;
		& img {
			border-radius: var(--Border-radius_S);
		}
	}
	& .wrap {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: calc( 1 * var(--BaseSize) );
		padding: calc( 2 * var(--BaseSize) );
		background: var(--Color_1D100);
		border-radius: var(--Border-radius_S);
		& .title-area {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: calc( 0 * var(--BaseSize) );
			line-height: 1.4;
			& time {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: var(--BaseTagPadding);
				color: var(--Color_FF100);
				line-height: 1;
				background: var(--Color_K100);
				border-radius: var(--Border-radius_S);
				& em {
					font-size: 3vw;
				}
				& strong {
					font-size: 4vw;
				}
				& span {
					font-size: 2.4vw;
				}
			}
			& .title_jp {
				flex: 1;
				display: flex;
				justify-content: space-between;
				padding: 0 calc( 2 * var(--BaseSize) );
				color: var(--Color_FF100);
				font-size: 3vw;
				line-height: 1.4;
				border-bottom: 1px var(--Color_K100) solid;
			}
		}
		& .fee {
			display: flex;
			justify-content: flex-start;
			gap: calc( 2 * var(--BaseSize) );
			& strong {
				color: var(--Color_FF100);
				font-size: 2vw;
				line-height: 1.4;
			}
		}
		& .tag {
			display: flex;
			justify-content: flex-start;
			gap: calc( 2 * var(--BaseSize) );
			& strong {
				padding: var(--BaseTagPadding);
				color: var(--Color_FF100);
				font-size: 2vw;
				line-height: 1.4;
				background: var(--Color_K100);
				border-radius: var(--Border-radius_L);
			}
		}
		& .text_jp {
			font-size: 1.8vw;
			text-align: justify;
			font-family: "Noto Serif JP", serif;
			font-weight: 400;
			font-style: normal;
			color: var(--Color_FF100);
		}
		& .en {
			display: flex;
			flex-direction: column;
			gap: calc( 1 * var(--BaseSize) );
			margin: calc( 2 * var(--BaseSize) ) 0 0;
			padding: var(--BaseSize) var(--BaseSize) var(--BaseSize);
			font-family: "Noto Sans", sans-serif;
			font-optical-sizing: auto;
			font-weight: 400;
			font-style: normal;
			font-variation-settings: "wdth" 100;
			background: var(--Color_K020);
			border-radius: var(--Border-radius_S);
			& .title_en {
				font-size: 1.8vw;
				color: var(--Color_FF100);
				font-weight: 600;
				line-height: 1.4;
			}
			& .text_en {
				padding: var(--BaseSize) 0 0;
				font-size: 1.5vw;
				color: var(--Color_FF100);
				line-height: 1.4;
				border-top: 1px var(--Color_K100) solid;
			}
		}
	}
}



#clock {
	position: absolute;
	top: calc( 2 * var(--BaseSize) );
	right: calc( 1 * var(--BaseSize) );
	& time {
		padding: var(--BaseTagPadding);
		font-size: 2vw;
		color: var(--Color_FF100);
		line-height: 1;
		background: var(--Color_K100);
		border-radius: var(--Border-radius_S);
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
神田六天
イベントサイネージ
スタッフコメント
ーーーーーーーーーーーーーーーーーーーー */

body#kanda.event {
	& article {
		& main {
			& section#comment {
				flex: 0 calc( calc( 2 * var(--BaseSize) ) + var(--Size) );
				padding: 0 0 calc( 2 * var(--BaseSize) );
				background: var(--Color_3D100);
				& #gkroCommentContainer {
					height: var(--Size);
					& .slick-list {
						height: var(--Size);
						& .slick-track {
							height: var(--Size);
						}
					}
				}
			}
			& #comment:before,
			& #comment:after {
				content: '';
				position: absolute;
				top: 0;
				width: 1vw;
				height: var(--Size);
				z-index: 2;
			}
			& #comment:before {
				left: -1px;
				background: linear-gradient( 90deg, var(--Color_3D100), var(--Color_K000) );
			}
			& #comment:after {
				right: -1px;
				background: linear-gradient( -90deg, var(--Color_3D100), var(--Color_K000) );
			}
		}
	}
}

.KRO_Comment {
	display: flex !important;
	& .wrap {
		display: flex;
		align-items: center;
		gap: calc( 1 * var(--BaseSize) );
		margin-right: 2vw;
		padding: var(--BaseSize) calc( 4 * var(--BaseSize) ) var(--BaseSize) var(--BaseSize);
		height: var(--Size);
		background: var(--Color_K100);
		border-radius: var(--Border-radius_L);
		& figure {
			display: flex;
			height: calc( var(--Size) - calc( 2 * var(--BaseSize) ) );
			border: 3px var(--Color_A100) solid;
			border-radius: var(--Border-radius_L);
			overflow: hidden;
			aspect-raito: 1 / 1;
			& img {
				width: 100%;
			}
		}
		& div {
			display: flex;
			flex-direction: column;
			gap: calc( 1 * var(--BaseSize) );
			line-height: 1.1;
			& strong {
				color: var(--Color_FF100);
				font-size: 1.4vw;
			}
			& em {
				color: var(--Color_FF100);
				font-size: 2vw;
				line-height: 1;
			}
		}
	}
	& .logo {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-right: 2vw;
		& img {
			height: 3.6vw;
			animation: jumpAndSquish 1.6s ease-in-out infinite;
		}
	}
}

@keyframes jumpAndSquish {
	0% {
		transform: translateY(0) scaleY(1) scaleX(1);
		animation-timing-function: ease-out; 
	}
	25% {
		transform: translateY(0px) scaleY(1) scaleX(1);
		animation-timing-function: ease-in; 
	}
	50% {
		transform: translateY(0) scaleY(1) scaleX(1); 
		animation-timing-function: ease-out; 
	}
	75% {
		transform: translateY(4px) scaleY(0.8) scaleX(1.1);
		animation-timing-function: ease-in;
	}
	100% {
		transform: translateY(0) scaleY(1) scaleX(1); 
	}
}

@keyframes jumpAndSquish1 {
	0% {
		transform: rotate(0deg);
		animation-timing-function: linear; 
	}
	100% {
		transform: rotate(-360deg); 
	}
}