@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーー
  エントランス
ーーーーーーーーーーーーーーーーーーーー */

body {
	& article {
		& main {
			display: flex;
			flex-direction: column;
			gap: calc( 2 * var(--BaseSize) );
			padding: calc( 2 * var(--BaseSize) );
			height: 100vh;
			background-color: var(--Color_N100);
			background-image: url('https://signage.rokuten.jp/common/img/naha/background.svg');
			background-size: 300px;
		}
	}
}




/* ーーーーーーーーーーーーーーーーーーーー
イベントエリア
ーーーーーーーーーーーーーーーーーーーー */

body {
	& article {
		& main {
			& section#event {
				flex: 1;
				background-color: var(--Color_B100);
				background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_naha_006.svg");
				background-size: 6%;
				border-radius: var(--Border-radius_S);
				& #oroEntrance {
					position: relative;
					height: 100%;
					background-image: url('https://signage.rokuten.jp/common/img/naha/bar.svg');
					background-repeat: repeat-x;
					background-position: bottom;
					background-size: 400px;
					border-radius: var(--Border-radius_S);
					& div.signage-main {
						height: 100%;
						z-index: 10;
						& .slick-slider {
							height: 100%;

							& .slick-list {
								height: 100%;
								& .slick-track {
									height: 100%;
									& .entranceA {
										display: flex;
										gap: calc( 2 * var(--BaseSize) );
										padding: calc( 2 * var(--BaseSize) );
										height: 100%;
										& div.wrapper {
											flex: 1;
											display: flex;
											flex-direction: column;
											gap: calc( 2 * var(--BaseSize) );
											& .title {
												display: flex;
												align-items: center;
												gap: calc( 2 * var(--BaseSize) );
												padding: calc( 2 * var(--BaseSize) );
												color: var(--Color_FF100);
												background: var(--Color_1D100);
												border-radius: var(--Border-radius_S);
												& em {
													padding: calc( 1 * var(--BaseSize) );
													font-size: calc( 2 * var(--BaseSize) );
													line-height: 1;
													background: var(--Color_N100);
													border-radius: var(--Border-radius_S);
												}
												& strong {
													flex: 1;
													font-size: calc( 3.2 * var(--BaseSize) );
													font-weight: 600;
												}
												& span {
													font-size: calc( 3 * var(--BaseSize) );
													font-weight: 400;
												}
											}
											& .data {
												& .wrap {
													display: flex;
													flex-direction: column;
													gap: calc( 1.4 * var(--BaseSize) );
													& .inner {
														display: flex;
														flex-direction: column;
														align-items: flex-start;
														gap: var(--BaseSize);
														width: 100%;
														color: var(--Color_FF100);
														& em {
															padding: calc( 1 * var(--BaseSize) ) calc( 2 * var(--BaseSize) );
															font-size: calc( 2 * var(--BaseSize) );
															line-height: 1;
															background: var(--Color_N100);
															border-radius: var(--Border-radius_S);
														}
														& .tag {
															display: flex;
															flex-wrap: wrap;
															justify-content: flex-start;
															gap: calc( 2 * var(--BaseSize) );
															width: 100%;
															& strong {
																font-size: calc( 3 * var(--BaseSize) );
															}
														}
														& span {
															padding: calc( 2 * var(--BaseSize) ) 0 0;
															font-size: calc( 2 * var(--BaseSize) );
														}
													}
													& .fee {
														& .tag {
															& strong {
																font-size: calc( 3 * var(--BaseSize) );
															}
														}
													}
												}
											}
										}
										& figure {
											flex-basis: 26vw;
											& img {
												border-radius: var(--Border-radius_S);
											}
										}
									}
								}
							}
						}
					}
				}
				& #oroEntrance:before {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 6vh;
					background: linear-gradient(to top, var(--Color_B000), var(--Color_B100) );
					border-radius: var(--Border-radius_S);
				}
				& #oroEntrance:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 57vh;
					background: linear-gradient(to bottom, var(--Color_B000), var(--Color_B100) );
					border-radius: var(--Border-radius_S);
				}
			}
		}
	}
}











/* ーーーーーーーーーーーーーーーーーーーー
インフォメーションエリア
ーーーーーーーーーーーーーーーーーーーー */
body {
	& article {
		& main {
			& section#information {
				display: flex;
				gap: calc( 2 * var(--BaseSize) );
				width: 100%;
				overflow: hidden;
			}
		}
	}
}


/* ーーーーーーーーーーーーーーーーーーーー
ステップ
ーーーーーーーーーーーーーーーーーーーー */
body {
	& article {
		& main {
			& section#information {
				& div#step {
					position: relative;
					flex-basis: 30vw;
					background-color: var(--Color_B100);
					background-image: url('https://signage.rokuten.jp/common/img/naha/bar.svg');
					background-repeat: no-repeat;
					background-position: bottom;
					border-radius: var(--Border-radius_S);
					overflow: hidden;
					& .slick-list {
						& .slick-track {
							& .slick-slide {
								width: 100%;
								overflow: hidden;
								& .title {
									display: flex;
									justify-content: center;
									align-items: center;
									padding: calc( 2 * var(--BaseSize) ) 0 0;
									color: var(--Color_FF100);
									font-size: 2vw;
									font-weight: 600;
								}
								& .inner {
									display: flex;
									flex-direction: column;
									gap: calc( 2 * var(--BaseSize) );
									padding: calc( 2 * var(--BaseSize) );
									& .steps {
										position: relative;
										display: flex;
										justify-content: center;
										align-items: center;
										padding: calc( 1 * var(--BaseSize) ) 0;
										background: var(--Color_FF100);
										border-radius: var(--Border-radius_S);
										& .no {
											position: absolute;
											top: calc( -1 * var(--BaseSize) );
											left: calc( -1 * var(--BaseSize) );
											display: flex;
											justify-content: center;
											padding: calc( 1 * var(--BaseSize) );
											width: calc( 4 * var(--BaseSize) );
											height: calc( 4 * var(--BaseSize) );
											background: var(--Color_N100);
											border-radius: var(--Border-radius_L);
											& em {
												font-size: calc( 2 * var(--BaseSize) );
												color: var(--Color_FF100);
												font-weight: 600;
												line-height: 1;
											}
										}
										& .text {
											font-size: calc( 2 * var(--BaseSize) );
											color: var(--Color_1D100);
											font-weight: 400;
										}
									}
								}
							}
						}
					}
				}
				
				& div#step:before {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 4vh;
					background: linear-gradient(to top, var(--Color_B000), var(--Color_B100) );
				}
			}
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
  エントランスC
  案内
ーーーーーーーーーーーーーーーーーーーー */

body {
	& article {
		& main {
			& section#information {
				& div#floor {
					flex-basis: 20vw;
					background: var(--Color_1D100);
					border-radius: var(--BaseSize);
					overflow: hidden;
					& .slick-list {
						& .slick-track {
							& .slick-slide {
								display: flex;
								flex-direction: column;
								padding: calc( 2 * var(--BaseSize) );
								width: 100%;
								& img {
									width: 100%;
								}
							}
						}
					}
				}
			}
		}	
	}
}



/* ーーーーーーーーーーーーーーーーーーーー
  エントランスC
  注意事項
ーーーーーーーーーーーーーーーーーーーー */

body {
	& article {
		& main {
			& section#information {
				& #notice {
					flex: 1;
					background: var(--Color_B100);
					border-radius: var(--BaseSize);
					overflow: hidden;
					& .slick-list {
						& .slick-track {
							& .slick-slide {
								display: flex;
								flex-direction: column;
								gap: calc( 2 * var(--BaseSize) );
								padding: calc( 2 * var(--BaseSize) );
								width: 100%;
								& .title {
									display: flex;
									justify-content: center;
									align-items: baseline;
									gap: calc( 2 * var(--BaseSize) );
									color: var(--Color_FF100);
									font-size: calc( 2 * var(--BaseSize) );
									font-weight: 600;
									& i {
										color: var(--Color_A100);
									}
								}
								& ul {
									display: flex;
									flex-direction: column;
									gap: calc( 1.4 * var(--BaseSize) );
									& li {
										position: relative;
										padding: 0 0 0 calc( 3 * var(--BaseSize) );
										font-size: calc( 2 * var(--BaseSize) );
										color: var(--Color_FF100);
									}
									& li:before {
										content: '';
										position: absolute;
										top: calc( 0.7 * var(--BaseSize) );
										left: 0;
										width: calc( 2 * var(--BaseSize) );
										height: calc( 2 * var(--BaseSize) );
										background: url('https://rokuten.jp/wp-content/themes/Rokuten/svg/mon_ff.svg');
										background-repeat: no-repeat;
										background-size: cover;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}