@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーー
  メイン
ーーーーーーーーーーーーーーーーーーーー */
body#naha {
	& article {
		display: flex;
		flex-wrap: nowrap;
		height: 90vh;
		background-color: var(--Color_N100);
		background-image: url('https://signage.rokuten.jp/common/img/naha/background.svg');
		background-size: 300px;
		& main {
			flex: 1;
			display: flex;
			width: 100%;
			height: 90vh;
			overflow: hidden;
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
イベント
ーーーーーーーーーーーーーーーーーーーー */
body#naha {
	& article {
		& main {
			& section#event {
				width: 100%;
				height: 100%;
				overflow: hidden;
				& #EventContainer {
					width: 100%;
					height: 100%;
					& .signage-main {
						height: 100%;
						& .slick-slider {
							height: 100%;
							& .slick-list {
								height: 100%;
								& .slick-track {
									padding: calc( 2 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
									height: 100%;
									& .slick-slide {
										position: relative;
										display: flex;
										flex-direction: column;
										gap: calc( 2 * var(--BaseSize) );
										margin: 0 calc( 1 * var(--BaseSize) );
										padding: calc( 2 * var(--BaseSize) );
										background: var(--Color_B100);
										border-radius: var(--Border-radius_S);
										& .img {
											content: '';
											position: absolute;
											top: 0;
											left: 0;
											width: 100%;
											height: 100%;
											opacity: .15;
										}
										& .img:after {
											content: '';
											position: absolute;
											top: 0;
											left: 0;
											width: 100%;
											height: 100%;
											backdrop-filter: blur( 2px );
											-o-backdrop-filter: blur( 2px );
											-moz-backdrop-filter: blur( 2px );
											-webkit-backdrop-filter: blur( 2px );
										}
										& .movie {
											position: absolute;
											top: 0;
											left: 0;
											display: flex;
											justify-content: flex-end;
											align-items: flex-end;
											width: 100%;
											height: 100%;
											background: var(--Color_B100);
											border-radius: var(--Border-radius_S);
											object-fit: contain;
											overflow: clip;
											& video {
												width: 40%;
											}
										}
										& .gara {
											content: '';
											position: absolute;
											top: calc( 1 * var(--BaseSize) );
											right: calc( 1 * var(--BaseSize) );
											width: calc( 100% - calc( 1 * var(--BaseSize) ) );
											height: calc( 100% - calc( 1 * var(--BaseSize) ) );
											opacity: .5;
											background-image: url('https://signage.rokuten.jp/common/img/naha/gara.svg');
											background-size: 120px;
											background-repeat: no-repeat;
											background-position: top right;
										}
										& .area_A {
											flex: 1;
											display: flex;
											flex-direction: row;
											gap: calc( 2 * var(--BaseSize) );
											& .wrap {
												flex: 1;
												display: flex;
												flex-direction: column;
												gap: calc( 1 * var(--BaseSize) );
												& .title-area {
													display: flex;
													flex-direction: column;
													align-items: flex-start;
													gap: calc( 1 * var(--BaseSize) );
													line-height: 1.4;
													& time {
														display: flex;
														flex-direction: row;
														align-items: flex-end;
														padding: calc( .4 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
														color: var(--Color_FF100);
														background: var(--Color_N100);
														border-radius: var(--Border-radius_S);
														& em {
															font-size: calc( 3 * var(--BaseSize) );
															& span {
																font-size: calc( 2 * var(--BaseSize) );
															}
														}
														& strong {
															font-size: calc( 3 * var(--BaseSize) );
															& span {
																font-size: calc( 2 * var(--BaseSize) );
															}
														}
													}
													& .title {
														flex: 1;
														display: flex;
														justify-content: space-between;
														color: var(--Color_FF100);
														font-size: calc( 3.6 * var(--BaseSize) );
														line-height: 1.4;
														border-bottom: 1px var(--Color_N100) solid;

													}
												}
												& .fee {
													display: flex;
													flex-wrap: wrap;
													gap: calc( 1 * var(--BaseSize) );
													& strong {
														color: var(--Color_FF100);
														font-size: calc( 2 * var(--BaseSize) );
														line-height: 1.2;
													}
												}
												& .tag-area {
													display: flex;
													flex-wrap: wrap;
													justify-content: flex-start;
													gap: calc( 1 * var(--BaseSize) );
													padding: calc( 1 * var(--BaseSize) ) 0 0;
													color: var(--Color_FF100);
													line-height: 1;
													& span {
														padding: calc( .6 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
														font-size: calc( 2 * var(--BaseSize) );
														line-height: 1;
														background: var(--Color_N100);
														border-radius: var(--Border-radius_S);
													}
												}
											}
										}
										& figure {
											display: flex;
											justify-content: flex-start;
											& img {
												width: 70%;
												border-radius: var(--Border-radius_S);
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}