@charset "utf-8";
:root {
}







/* ーーーーーーーーーーーーーーーーーーーー
	ベース
ーーーーーーーーーーーーーーーーーーーー */

body#SCX {
	display: flex;
	flex-direction: row;
	gap: var(--BaseSize);
	padding: var(--BaseSize);
	max-width: 100vw;
	max-height: 100vh;
	& header {
		flex-basis: 6vw;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: var(--BaseSize);
		width: 6vw;
		height: calc( 100vh - calc( var(--BaseSize) * 2 ) );
		& #now {
			order: 2;
			position: relative;
			width: 6vw;
			height: 28vh;
			& .rotate {
				position: absolute;
				top: 0;
				right: 100%;
				padding: var(--BaseSize);
				width: 28vh;
				height: 6vw;
				background: var(--Color_K100);
				border-radius: var(--Border-radius_S);
				transform-origin: right top;
				transform: rotate(-90deg);
				& .title {
					line-height: 1.1;
					border-bottom: 1px solid;
					border-image: linear-gradient( to right, var(--Color_CV100), var(--Color_CX100) ) 1;
					& em {
						font-size: 1.3vw;
						color: var(--Color_FF100);
					}
				}
				& .data {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					& date {
						font-size: 1.3vw;
						color: var(--Color_FF100);
						& span {
							font-size: 1vw;
						}
					}
					& time {
						font-size: 1.3vw;
						color: var(--Color_FF100);
						& span {
							font-size: 1vw;
						}
					}
				}
			}
		}
		& #guide {
			order: 1;
			flex-basis: calc( 72vh - calc( var(--BaseSize) * 3 ) );
			position: relative;
			width: 6vw;
			height: calc( 70vh - calc( var(--BaseSize) * 3 ) );
			& .rotate {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: calc( 72vh - calc( var(--BaseSize) * 3 ) );
				height: 6vw;
				& > div {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					padding: 1vw var(--BaseSize) var(--BaseSize);
					width: 100%;
					height: 100%;
					background: var(--Color_CX040);
					border-radius: var(--Border-radius_S);
					& .title {
						padding: 0 0 var(--BaseSize);
						font-size: 1.3vw;
						color: var(--Color_FF100);
						line-height: 1;
						& i {
							padding: 2px 0 0 0;
							height: calc( 3 * var(--BaseSize) );
						}
						& em {
							padding: 0;
						}
					}
					& .title:before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background: linear-gradient( 90deg, var(--Color_CV100), var(--Color_CX100) );
					}
					& .List1 {
						padding: .3vw 0 0;
						font-size: calc( 1.8 * var(--BaseSize) );
						line-height: 1.1;
						color: var(--Color_FF100);
						overflow: clip;
						& .slick-track {
							height: 1.8ch !important;
						}
						& em {
							padding: 0 2vw 0 0;
						}
					}
				}
			}
		}
	}
}








body#SCX {
	& main {
		flex-basis: calc( 100vw - calc( var(--BaseSize) * 5 ) - 17vw );
		display: flex;
		flex-direction: column;
		width: calc( 100vw - calc( var(--BaseSize) * 5 ) - 17vw );
		height: calc( 100vh - calc( var(--BaseSize) * 2 ) );
		& article {
			position: absolute;
			top: 0;
			right: 100%;
			transform-origin: right top;
			transform: rotate(-90deg);
			padding: 0;
			width: calc( 100vh - calc( var(--BaseSize) * 2 ) );
			height: calc( 100vw - calc( var(--BaseSize) * 5 ) - 17vw );
			border-radius: var(--Border-radius_S);
			overflow: hidden;
			& section.event_SCX {
				width: calc( 100vh - calc( var(--BaseSize) * 2 ) );
				height: calc( 100vw - calc( var(--BaseSize) * 5 ) - 17vw );
				& .slick-list {
					margin: 0;
					width: calc( 100vh - calc( var(--BaseSize) * 2 ) );
					height: calc( 100vw - calc( var(--BaseSize) * 5 ) - 17vw );
					& .slick-track {
						display: flex !important;
						gap: 0;
						position: relative !important;
						height: calc( 100vw - calc( var(--BaseSize) * 5 ) - 17vw );
						& .slick-slide {
							float: none !important;
						}
					}
				}
				& .list {
					display: flex !important;
					flex-direction: column;
					gap: calc( var(--BaseSize) * 4 );
					margin-right: 0;
					padding: calc( var(--BaseSize) * 4 ) calc( var(--BaseSize) * 2 );
					width: calc( 100vh - calc( var(--BaseSize) * 2 ) );
					height: calc( 100vw - calc( var(--BaseSize) * 5 ) - 17vw ) !important;
					background: var(--Color_K100);
					& .name {
						display: flex;
						align-items: center;
						& figure {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							width: 6vw;
							background: var(--Color_CX100);
							border-radius: var(--Border-radius_L);
							aspect-ratio: 1 / 1;
							& em {
								font-size: 1.6vw;
								color: var(--Color_FF100);
								line-height: 1;
								& span {
									font-size: 1.2vw;
								}
							}
							& strong {
								font-size: 2.2vw;
								color: var(--Color_FF100);
								line-height: 1;
								& span {
									font-size: 1.4vw;
								}
							}
						}
						& .title {
							display: flex;
							align-items: center;
							padding: 0 0 0 1vw;
							font-size: 3.4vw;
							color: var(--Color_FF100);
							font-weight: 600;
							& strong {
								
							}
						}
					}
					& .data {
						gap: calc( var(--BaseSize) * 4 );
						& > figure {
							width: calc( 100vh - calc( var(--BaseSize) * 6 ) );
							aspect-ratio: 1200 / 848;
							& img {
								width: 100%;
								border-radius: var(--Border-radius_S);
								aspect-ratio: 1200 / 848;
							}
						}
						& .style_wrap {
							gap: calc( var(--BaseSize) * 2 );
							& .style_title {
								width: calc( 100vh - calc( var(--BaseSize) * 6 ) );
								font-size: 2vw;
								color: var(--Color_FF100);
							}
							& .style_title:before {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 1px;
								background: linear-gradient( 90deg, var(--Color_CV100), var(--Color_CX100) );
							}
							& .style {
								display: flex;
								gap: var(--BaseSize);
								width: calc( 100vh - calc( var(--BaseSize) * 4 ) );
								& > div {
									flex-basis: calc( calc( 100vh - calc( var(--BaseSize) * 6 ) ) / 3 );
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									gap: var(--BaseSize);
									width: calc( calc( 100vh - calc( var(--BaseSize) * 6 ) ) / 3 );
									& figure {
										width: 100%;
										height: 100%;
										display: flex;
										justify-content: center;
										border-radius: var(--Border-radius_S);
										overflow: hidden;
										& img {
											width: 100%;
											vertical-align: bottom;
											object-fit: cover;
											opacity: .4;
										}
									}
									& > div {
										position: absolute;
										top: var(--BaseSize);
										right: var(--BaseSize);
										display: flex;
										flex-direction: column;
										align-items: flex-end;
										gap: calc( var(--BaseSize) / 2 );
										width: 100%;
										& strong {
											padding: .2vw 1vw;
											font-size: 1.4vw;
											color: var(--Color_FF100);
											background: var(--Color_CX100);
											border-radius: var(--Border-radius_L);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}








body#SCX {
	& aside {
		flex-basis: 5vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--BaseSize);
		width: 5vw;
		height: calc( 100vh - calc( var(--BaseSize) * 2 ) );
		& .list6 {
			flex-basis: calc( calc(100vh - calc( var(--BaseSize) * 7 ) ) / 6 );
			position: relative;
			width: 5vw;
			height: calc( calc(100vh - calc( var(--BaseSize) * 7 ) ) / 6 );
			& .rotate {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: calc( calc(100vh - calc( var(--BaseSize) * 7 ) ) / 6 );
				height: 5vw;
				padding: 0;
				& figure {
					position: absolute;
					top: .5vw;
					left: .5vw;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: .3vw;
					width: 2.4vw;
					background: var(--Color_FF100);
					border: 2px var(--Color_R100) solid;
					border-radius: var(--Border-radius_L);
					aspect-ratio: 1 / 1;
					z-index: 1;
					& i {
						color: var(--Color_CX100);
						font-size: 1.4vw;
					}
					& strong {
						color: var(--Color_FF100);
						font-size: 1.2vw;
						font-weight: 600;
						line-height: 1;
						& span {
							font-size: 1vw;
							font-weight: 400;
						}
					}
				}
				& figure:after {
					content: '';
					position: absolute;
					width: 100%;
					height: 2px;
					background: var(--Color_R100);
					transform: rotateZ(45deg) scale(1);
					transform-origin: center;
				}
				& .text {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: var(--BaseSize) var(--BaseSize) var(--BaseSize) 3.2vw;
					height: 100%;
					background: var(--Color_K100);
					border-radius: var(--Border-radius_S);
					& .title {
						padding: 0 0 .3vw;
						text-align: right;
						font-size: .8vw;
						color: var(--Color_FF100);
					}
					& .title:before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background: linear-gradient( 90deg, var(--Color_CV100), var(--Color_CX100) );
					}
					& .List6 {
						padding: .3vw 0 0;
						width: 100%;
						line-height: 1.1;
						color: var(--Color_FF100);
						overflow: clip;
						& em {
							padding: 0 2vw 0 0;
							font-size: .8vw;
							line-height: 1.1;
							font-weight: 400;
							height: 1.8ch !important;
						}
					}
				}
			}
		}
	}
}








body#SCX {
	& footer {
		flex-basis: 6vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 6vw;
		height: calc ( 100vh - calc( var(--BaseSize) * 2 ) );
		overflow: hidden;
		& .list2 {
			position: relative;
			width: 6vw;
			height: 50vh;
			& .rotate {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: calc( calc( 100vh - calc( var(--BaseSize) * 3 ) ) / 2 );
				height: 6vw;
				& figure {
					position: absolute;
					top: .5vw;
					left: .5vw;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: .3vw;
					width: 5vw;
					background: var(--Color_CX100);
					border-radius: var(--Border-radius_L);
					aspect-ratio: 1 / 1;
					z-index: 1;
					& em {
						color: var(--Color_FF100);
						font-size: 1vw;
						font-weight: 600;
						line-height: 1;
						& span {
							font-size: .8vw;
							font-weight: 400;
						}
					}
					& strong {
						color: var(--Color_FF100);
						font-size: 1.2vw;
						font-weight: 600;
						line-height: 1;
						& span {
							font-size: 1vw;
							font-weight: 400;
						}
					}
				}
				& .text {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 0 var(--BaseSize) 0 6vw;
					height: 6vw;
					background: var(--Color_K100);
					border-radius: var(--Border-radius_S);
					& .title {
						padding: 0 0 .3vw;
						font-size: 1.2vw;
						line-height: 1;
						color: var(--Color_FF100);
						& b {
							padding: 0 .1vw;
							font-size: 1.6vw;
							font-weight: 600;
						}
					}
					& .title:before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background: linear-gradient( 90deg, var(--Color_CV100), var(--Color_CX100) );
					}
					& .List2 {
						padding: .3vw 0 0;
						width: 100%;
						font-size: 1vw;
						line-height: 1.1;
						color: var(--Color_FF100);
						overflow: clip;
						& em {
							padding: 0 2vw 0 0;
							font-weight: 400;
							& b {
								font-size: 1vw;
								font-weight: 600;
							}
						}
					}
				}
			}
		}
	}
}


.rotate {
	position: absolute;
	top: 0;
	right: 100%;
	transform-origin: right top;
	transform: rotate(-90deg);
}