@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーー
	ベース
ーーーーーーーーーーーーーーーーーーーー */
body {
	display: flex;
	flex-direction: column;
	gap: var(--BaseSize);
	padding: var(--BaseSize);
	width: 100vw;
	height: 100vh;
	& header {
		flex-basis: 6vw;
		display: flex;
		gap: var(--BaseSize);
		width: 100%;
		& #top {
			display: flex;
			align-items: center;
			padding: 0 var(--BaseSize);
			width: 100%;
			background: var(--Color_K100);
			border-radius: var(--Border-radius_S);
			& em {
				font-size: 1vw;
			}
		}
		& #welcome {
			order: 1;
			flex-basis: calc( 100% - var(--BaseSize) - 36vh );
			background: var(--Color_K100);
			border-radius: var(--Border-radius_S);
			& .ListW {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 6vw;
				color: var(--Color_FF100);
				overflow: clip;
				& .slick-list {
					& .slick-track {
					}
				}
				& em {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 6vw;
					font-size: 3vw;
					color: var(--Color_FF100);
					font-weight: 600;
					line-height: 1.4;
				}
			}
		}
		& #now {
			order: 1;
			flex-basis: 28vh;
			& .rotate {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: var(--BaseSize);
				width: 100%;
				height: 100%;
				background: var(--Color_K100);
				border-radius: var(--Border-radius_S);
				& .title {
					padding: 0 0 .2vw;
					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;
					padding: .4vw 0 0;
					& 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;
						}
					}
				}
			}
		}
		& #fee {
			order: 1;
			flex-basis: 40vh;
			& .rotate {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: var(--BaseSize);
				width: 100%;
				height: 100%;
				background: var(--Color_K100);
				border-radius: var(--Border-radius_S);
				& .title {
					padding: 0 0 .2vw;
					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;
					gap: var(--BaseSize);
					padding: .4vw 0 0;
					& em {
						font-size: 1.3vw;
						color: var(--Color_FF100);
						& span {
							font-size: 1vw;
						}
					}
				}
			}
		}
		& #guide {
			order: 2;
			flex-basis: calc( calc( 100% - 28vh - calc( var(--BaseSize) * 2 ) ) / 2 );
			width: calc( calc( 100% - 28vh - calc( var(--BaseSize) * 2 ) ) / 2 );
			height: 6vw;
			& .rotate {
				width: 100%;
				height: 100%;
				& > div {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 1vw var(--BaseSize) var(--BaseSize);
					width: 100%;
					height: 100%;
					background: var(--Color_CX040);
					border-radius: var(--Border-radius_S);
					& .title {
						display: flex;
						align-items: center;
						gap: var(--BaseSize);
						padding: 0 0 var(--BaseSize);
						font-size: 1.3vw;
						color: var(--Color_FF100);
						line-height: 1;
						& i {
							display: inline-flex;
							justify-content: center;
							align-items: center;
							width: 2.4vw;
							height: 1.5vw;
							font-size: 1vw;
							color: var(--Color_CX100);
							background: var(--Color_FF100);
							border-radius: var(--Border-radius_S);
						}
						& em {
							padding: 0 1vw 0 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: 1vw;
						line-height: 1.1;
						color: var(--Color_FF100);
						overflow: clip;
						& .slick-track {
							height: 1.8ch !important;
						}
						& em {
							padding: 0 2vw 0 0;
						}
					}
				}
			}
		}
		& #smoke_icon {
			order: 4;
			flex-basis: 18vh;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			padding: var(--BaseSize);
			background: var(--Color_FF100);
			border-radius: var(--Border-radius_S);
			& i {
				color: var(--Color_1D100);
				font-size: 2.6vw;
				line-height: 1.1;
			}
		}
	}
}








body {
	& main {
		flex: 1;
		display: flex;
		width: 100%;
		& article {
			width: 100%;
			height: 100%;
			& section.time_line {
				& ul {
					& li {
						& em {
						}
						& span {
						}
						& span.harf {
						}
						& span.none {
						}
					}
					& li:after {
					}
					& li:nth-of-type(1):after {
					}
					& li.current_time {
						& .marker-arrow {
						}
					}
				}
			}
			& section.event {
				width: 100%;
				height: 100%;
				& .slick-list {
					margin: 0 0 0 calc( -1 * var(--BaseSize) );
					width: calc( 100% + var(--BaseSize) );
					height: 100%;
					overflow: hidden;
					& .slick-track {
						display: flex !important;
						position: relative !important;
						gap: var(--BaseSize);
						height: 100%;
						& .slick-slide {
							float: none !important;
						}
					}
				}
				& .list {
					display: flex !important;
					flex-direction: column;
					gap: var(--BaseSize);
					padding: var(--BaseSize);
					height: 100%;
					background: var(--Color_K100);
					border-radius: var(--Border-radius_S);
					& .name {
						display: flex;
						& figure {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							width: 5vw;
							background: var(--Color_CX100);
							border-radius: var(--Border-radius_L);
							aspect-ratio: 1 / 1;
							& em {
								font-size: 1.4vw;
								color: var(--Color_FF100);
								line-height: 1;
								& span {
									font-size: 1vw;
								}
							}
							& strong {
								font-size: 1.6vw;
								color: var(--Color_FF100);
								line-height: 1;
								& span {
									font-size: 1.2vw;
								}
							}
						}
						& .title {
							display: flex;
							align-items: center;
							padding: 0 0 0 1vw;
							font-size: 2vw;
							color: var(--Color_FF100);
							font-weight: 600;
							line-height: 1.2;
							& strong {
							}
						}
					}
					& .data {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						height: 100%;
						background-repeat: no-repeat;
						background-size: contain;
						& > figure {
							display: flex;
							justify-content: center;
							width: 100%;
							overflow: hidden;
							& > img {
								width: 80%;
								border-radius: var(--Border-radius_S);
							}
						}
						& .style_wrap {
							display: flex;
							flex-direction: column;
							gap: var(--BaseSize);
							& .style_title {
								width: 100%;
								font-size: 1.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: 100%;
								height: 100%;
								& > div {
									flex-basis: calc( calc( 100% - calc( var(--BaseSize) * 2 ) ) / 3 );
									display: flex;
									justify-content: center;
									align-items: center;
									& 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: calc( 100% - calc( var(--BaseSize) * 1 ) );
										& strong {
											padding: .1vw .6vw;
											font-size: .8vw;
											color: var(--Color_FF100);
											background: var(--Color_CX100);
											border-radius: var(--Border-radius_L);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@keyframes moveDownOneHour {
    from { transform: translateY(0); }
    to { transform: translateY(99%); }
}






body {
	& aside {
		flex-basis: 5vw;
		display: flex;
		justify-content: space-between;
		gap: var(--BaseSize);
		width: 100%;
		height: 5vw;
		& .list6 {
			flex-basis: calc(calc( 100% - calc( var(--BaseSize) * 5 ) ) / 6 );
			width: calc(calc( 100% - calc( var(--BaseSize) * 5 ) ) / 6 );
			height: 100%;
			& .rotate {
				width: 100%;
				height: 100%;
				& figure {
					position: absolute;
					top: .5vw;
					left: .5vw;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: .3vw;
					width: 4vw;
					background: var(--Color_FF100);
					border: 4px var(--Color_R100) solid;
					border-radius: var(--Border-radius_L);
					aspect-ratio: 1 / 1;
					z-index: 1;
					& i {
						color: var(--Color_K100);
						font-size: 2vw;
					}
					& 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: 4px;
					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) 5vw;
					height: 100%;
					background: var(--Color_K100);
					border-radius: var(--Border-radius_S);
					& .title {
						padding: 0 0 .3vw;
						text-align: right;
						font-size: 1vw;
						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: 1vw;
							line-height: 1.1;
							font-weight: 400;
							height: 1.8ch !important;
						}
					}
				}
			}
		}
	}
}








body {
	& footer {
		flex-basis: 6vw;
		display: flex;
		justify-content: space-between;
		gap: var(--BaseSize);
		width: 100%;
		overflow: hidden;
		& #top {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 var(--BaseSize);
			width: 100%;
			background: var(--Color_K100);
			border-radius: var(--Border-radius_S);
			& em {
				font-size: 1vw;
			}
		}
		& .list2 {
			flex-basis: calc( calc( 100% - calc( var(--BaseSize) * 1) ) / 2);
			width: calc( calc( 100% - calc( var(--BaseSize) * 1) ) / 2);
			height: 100%;
			& .rotate {
				width: 100%;
				height: 100%;
				& 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: 1.4vw;
						font-weight: 600;
						line-height: 1;
						& span {
							font-size: 1vw;
							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;
					width: 100%;
					height: 100%;
					background: var(--Color_K100);
					border-radius: var(--BaseSize);
					& .title {
						padding: 0 0 .6vw;
						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: .6vw 0 0;
						width: 100%;
						font-size: 1vw;
						line-height: 1.1;
						color: var(--Color_FF100);
						overflow: clip;
						& em {
							padding: 0 2vw 0 0;
							font-size: 1.4vw;
							font-weight: 400;
							& b {
								font-size: 1.4vw;
								font-weight: 600;
							}
						}
					}
				}
			}
		}
	}
}