@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーー
  メイン
ーーーーーーーーーーーーーーーーーーーー */
body#naha {
	& article {
		display: flex;
		flex-direction: column;
		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;
		}
	}
}





/* ーーーーーーーーーーーーーーーーーーーー
日本酒
ーーーーーーーーーーーーーーーーーーーー */
body#naha {
	& article {
		& main {
			& section#Left {
				position: relative;
				flex-basis: 40vw;
				display: flex;
				flex-direction: column;
				background: var(--Color_B100);
				overflow: hidden;
				& figure.logo {
					position: relative;
					display: flex;
					justify-content: center;
					padding: calc( 8 * var(--BaseSize) ) 0 0;
					width: 100%;
					z-index: 10;
					& > img {
						width: 24%;
					}
					& span {
						position: absolute;
						top: calc( 2 * var(--BaseSize) );
						left: calc( 2 * var(--BaseSize) );
						display: flex;
						width: 100%;
						height: 100%;
						& img {
							height: 20vh;
						}
					}
				}
				& section#Sake {
					position: absolute;
					bottom: 0;
					width: 100% !important;
					height: 100%;
					background: var(--Color_B100);
					& section#SakeContainer {
						height: 100%;
						& div.signage-main {
							height: 100%;
							& .slick-slider {
								height: 100%;
								& .slick-list {
									display: flex;
									flex-direction: column;
									justify-content: flex-end;
									min-height: 100%;
									overflow: clip;
									& .slick-track {
										display: flex;
										justify-content: flex-end;
										align-items: flex-end;
										height: 100%;
										& .slick-slide {
											position: relative;
											display: flex;
											align-items: flex-end;
											& figure {
												position: absolute;
												bottom: 0;
												right: 0;
												width: 140px;
												& img {
													width: 100%;
												}
											}
											& figure:before {
												content: '';
												position: absolute;
												top: -0.5px;
												right: 0;
												width: 100%;
												height: 24%;
												background: linear-gradient(to top, var(--Color_B000), var(--Color_B100) );
											}
											& .data {
												position: relative;
												flex: 1;
												padding: 0 calc( 2 * var(--BaseSize) ) 75px;
												& .title {
													position: absolute;
													bottom: -0.5px;
													right: 0;
													display: flex;
													flex-direction: column;
													gap: calc( 0 * var(--BaseSize) );
													padding: 0 calc( 2 * var(--BaseSize) ) calc( 2 * var(--BaseSize) );
													width: 100%;
													color: var(--Color_FF100);
													line-height: 1.2;
													background: linear-gradient(to bottom, var(--Color_B000), var(--Color_B100) );
													& strong {
														position: relative;
														display: flex;
														justify-content: flex-end;
														align-items: center;
														gap: calc( 1 * var(--BaseSize) );
														padding: 0 0 calc( .6 * var(--BaseSize) );
														font-size: calc( 2.6 * var(--BaseSize) );
														line-height: 1.4;
														text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
														& span {
															& img {
																width: calc( 2.8 * var(--BaseSize) );
																height: calc( 2.8 * var(--BaseSize) );
															}
														}
													}
													& strong:before {
														content: '';
														position: absolute;
														bottom: 0;
														right: 0;
														width: 70%;
														height: 1px;
														background: linear-gradient(to right, var(--Color_N000), var(--Color_N100) );
													}
													& em {
														padding: calc( .6 * var(--BaseSize) ) 0 0;
														text-align: right;
														font-size: calc( 1.6 * var(--BaseSize) );
														line-height: 1.4;

													}
												}
												& .tag {
													display: flex;
													justify-content: space-between;
													gap: calc( 2 * var(--BaseSize) );
													padding: calc( 2 * var(--BaseSize) ) 0 0;
													color: var(--Color_FF100);
													font-size: calc( 1.6 * var(--BaseSize) );
													line-height: 1;
													& em {
														padding: calc( .6 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
														border-radius: var(--Border-radius_S);
														background: var(--Color_N100);
													}
													& strong {
														padding: calc( .6 * var(--BaseSize) ) 0;
													}
												}
												& .text {
													padding: calc( 1 * var(--BaseSize) ) 0;
													color: var(--Color_FF100);
													font-size: calc( 2 * var(--BaseSize) );
													text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
													border-bottom: 1px var(--Color_N100) solid;
												}
												& ul {
													display: flex;
													flex-direction: row;
													flex-wrap: wrap;
													gap: calc( 1 * var(--BaseSize) );
													margin: calc( 1 * var(--BaseSize) ) 0 0;
													padding: calc( 1 * var(--BaseSize) ) 0 0;
													& li {
														display: flex;
														flex-direction: column;
														gap: calc( 1 * var(--BaseSize) );
														color: var(--Color_FF100);
														line-height: 1;
														& em {
															font-size: calc( 1.4 * var(--BaseSize) );
														}
														& strong {
															display: flex;
															justify-content: center;
															padding: calc( .6 * var(--BaseSize) );
															font-size: calc( 2 * var(--BaseSize) );
															border-radius: var(--Border-radius_S);
															background: var(--Color_N100);
														}
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}





/* ーーーーーーーーーーーーーーーーーーーー
イベント
ーーーーーーーーーーーーーーーーーーーー */
body#naha {
	& article {
		& main {
			
			& section#Right {
				padding: calc( 2 * var(--BaseSize) );
				display: flex;
				width: 100%;
				& section#event {
					flex: 1;
					display: flex;
					flex-direction: column;
					& #EventContainer {
						height: 100%;
						& .signage-main {
							height: 100%;
							border-radius: var(--Border-radius_S);
							overflow: clip;
							& .slick-slider {
								& .slick-list {
									height: 100% !important;
									& .slick-track {
										& .event_c {
											display: flex;
											flex-direction: column;
											gap: calc( 2 * var(--BaseSize) );
											margin: 0 0 calc( 2 * var(--BaseSize) );
											padding: calc( 2 * var(--BaseSize) );
											background: var(--Color_B100);
											border-radius: var(--Border-radius_S);
											& .area_A {
												display: flex;
												flex-direction: row;
												gap: calc( 2 * var(--BaseSize) );
												& figure {
													flex-basis: 240px;
													& img {
														border-radius: var(--Border-radius_S);
													}
												}
												& .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( 4 * var(--BaseSize) );
															line-height: 1.4;
															border-bottom: 1px var(--Color_N100) solid;

														}
													}
													& .fee {
														color: var(--Color_FF100);
														font-size: calc( 3 * var(--BaseSize) );
														line-height: 1.4;
														& strong {

														}
													}
													& .tag-area {
														display: flex;
														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);
														}
													}
												}
											}
											& .area_B {
												display: flex;
												flex-direction: column;
												gap: calc( 1 * var(--BaseSize) );
												& > div {
													display: flex;
													flex-direction: column;
													gap: calc( 1 * var(--BaseSize) );
													padding: calc( 1 * var(--BaseSize) );;
													background: var(--Color_N020);
													border-radius: var(--Border-radius_S);
													& .title {
														font-size: calc( 2.6 * var(--BaseSize) );
														color: var(--Color_A100);
														font-weight: 600;
														line-height: 1.4;
													}
													& .text {
														padding: calc( 1 * var(--BaseSize) ) 0 0;
														color: var(--Color_FF100);
														line-height: 1.4;
														font-size: calc( 2.6 * var(--BaseSize) );
														border-top: 1px var(--Color_N100) solid;
													}
												}
												& .jp {
													font-family: "Noto Serif JP", serif;
													font-weight: 400;
													font-style: normal;
												}
												& .en {
													font-family: "Noto Sans", sans-serif;
													font-optical-sizing: auto;
													font-weight: 400;
													font-style: normal;
													font-variation-settings: "wdth" 100;
												}
												& .ko {
													font-family: "Noto Sans KR", sans-serif;
													font-optical-sizing: auto;
													font-weight: 400;
													font-style: normal;
												}
												& .ct {
													font-family: "Noto Sans TC", sans-serif;
													font-optical-sizing: auto;
													font-weight: 400;
													font-style: normal;
												}
												& .cs {
													font-family: "Noto Sans SC", sans-serif;
													font-optical-sizing: auto;
													font-weight: 400;
													font-style: normal;
												}
											}



											& .event_c {
												display: flex;
												flex-direction: column;
												gap: calc( 2 * var(--BaseSize) );
												margin: 0 0 var(--Size_12);
												padding: var(--Size_06);
												background: var(--Color_1D100);
												border-radius: var(--Border-radius_S);
											}

										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}