@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーー
  メイン
ーーーーーーーーーーーーーーーーーーーー */
body#osaka {
	& article {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: calc( 2 * var(--BaseSize) );
		padding: calc( 2 * var(--BaseSize) );
		height: 100vh;
		& main {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: calc( 2 * var(--BaseSize) );
		}
		& aside {
			flex-basis: calc( 60% - calc( 2 * var(--BaseSize) ) );
			overflow: hidden;
		}
	}
}




/* ーーーーーーーーーーーーーーーーーーーー
  時間など
ーーーーーーーーーーーーーーーーーーーー */
body#osaka {
	& article {
		& main {
			& section#item {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				gap: 1vw;
				& div.item {
					flex-basis: calc( calc( 100% - calc( 2 * var(--BaseSize) ) ) / 2 );
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
					padding: calc( 1 * var(--BaseSize) );
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_S);
					& i {
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						justify-content: flex-start;
						align-items: flex;
						padding: calc( 1 * var(--BaseSize) );
						width: calc( 6 * var(--BaseSize) );
						height: calc( 6 * var(--BaseSize) );
						color: var(--Color_FF100);
						font-size: calc( 2 * var(--BaseSize) );
						line-height: 1;
						background: var(--Color_O100);
						clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
						border-radius: var(--Border-radius_S) 0 0 0;
					}
					& date {
						display: flex;
						align-items: baseline;
						gap: calc( 0.4 * var(--BaseSize) );
						color: var(--Color_FF100);
						font-size: calc( 2.4 * var(--BaseSize) );
						line-height: 1.2;
						& span {
							font-size: calc( 2 * var(--BaseSize) );
							color: var(--Color_FF080);
						}
					}
					& time {
						display: flex;
						align-items: baseline;
						gap: calc( 0.4 * var(--BaseSize) );
						color: var(--Color_FF100);
						font-size: calc( 4 * var(--BaseSize) );
						line-height: 1.2;
						& span {
							font-size: calc( 3 * var(--BaseSize) );
							color: var(--Color_FF080);
						}
					}
					& ul {
						display: flex;
						flex-direction: column;
						gap: var(--Size_04);
						& li {
							display: flex;
							justify-content: space-between;
							align-items: baseline;
							gap: var(--Size_02);
							font-family: "Noto Sans", sans-serif;
							line-height: 1.2;
							& em {
								font-size: calc( 1.6 * var(--BaseSize) );
								color: var(--Color_FF060);
							}
							& strong {
								font-size: calc( 3 * var(--BaseSize) );
								color: var(--Color_FF100);
							}
						}
					}
				}
			}
		}
	}
}





/* ーーーーーーーーーーーーーーーーーーーー
日本酒
ーーーーーーーーーーーーーーーーーーーー */
body#osaka {
	& article {
		& main {
			& section#Sake {
				height: 100%;
				& section {
					height: 100%;
					& > div {
						height: 100%;
						& .slick-slider {
							height: 100%;
							& .slick-list {
								min-height: 100%;
								border-radius: var(--Border-radius_S);
								overflow: clip;
								& .slick-track {
									display: flex;
									flex-direction: column;
									flex-wrap: wrap;
									gap: calc( 1 * var(--BaseSize) );
									& .slick-slide {
										display: flex;
										gap: calc( 1 * var(--BaseSize) );
										padding: calc( 1 * var(--BaseSize) );
										background: var(--Color_1D100);
										border-radius: var(--Border-radius_S);
										& figure {
											width: 140px;
											& img {
												width: 100%;
												border-radius: var(--Border-radius_S);
											}
										}
										& .data {
											flex: 1;
											& .title {
												display: flex;
												flex-direction: column;
												gap: calc( 0 * var(--BaseSize) );
												padding: 0 0 var(--BaseSize);
												line-height: 1.4;
												border-bottom: 1px var(--Color_O100) solid;
												& strong {
													display: flex;
													justify-content: space-between;
													color: var(--Color_FF100);
													font-size: calc( 3 * var(--BaseSize) );
													line-height: 1.4;
													& span {
														display: flex;
														gap: calc( 1 * var(--BaseSize) );
														& i {
															display: flex;
															padding: calc( .8 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
															color: var(--Color_FF100);
															font-size: calc( 2 * var(--BaseSize) );
															line-height: 1.1;
															background: var(--Color_A100);
															border-radius: var(--Border-radius_S);
														}
														& img {
															width: calc( 6.1 * var(--BaseSize) );
															height: calc( 6.1 * var(--BaseSize) );
														}
													}
												}
												& em {
													color: var(--Color_FF100);
													font-size: calc( 2.2 * 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( 2 * var(--BaseSize) );
												line-height: 1;
												& em {
													padding: calc( .6 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
													border-radius: var(--Border-radius_S);
													background: var(--Color_O100);
												}
												& strong {
													padding: calc( .6 * var(--BaseSize) ) 0;
												}
											}
											& .text {
												padding: calc( 1 * var(--BaseSize) ) 0;
												color: var(--Color_FF100);
												font-size: calc( 2.6 * var(--BaseSize) );
												border-bottom: 1px var(--Color_O100) 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_O100);
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}





/* ーーーーーーーーーーーーーーーーーーーー
イベント
ーーーーーーーーーーーーーーーーーーーー */
body#osaka {
	& article {
		& aside {
			& section#event {
				display: flex;
				flex-direction: column;
				gap: calc( 1 * var(--BaseSize) );
				padding: 0;
				height: 100%;
				& #EventContainer {
					height: 100%;
					& .signage-main {
						height: 100%;
						border-radius: var(--Border-radius_S);
						overflow: clip;
						& .slick-slider {
							height: 100%;
							& .slick-list {
								height: 100% !important;
								& .slick-track {
									& .event_c {
										display: flex;
										flex-direction: column;
										gap: calc( 2 * var(--BaseSize) );
										margin: 0 0 calc( 1 * var(--BaseSize) );
										padding: calc( 1 * var(--BaseSize) );
										background: var(--Color_1D100);
										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_O100);
														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( 5 * var(--BaseSize) );
														line-height: 1.4;
														border-bottom: 1px var(--Color_O100) 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_O100);
														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_O020);
												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_O100) 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);
										}

									}
								}
							}
						}
					}
				}
			}
		}
	}
}