@charset "utf-8";
:root {
	--SideWidth: 20vw;
}


/* ーーーーーーーーーーーーーーーーーーーー
  日本酒紹介
ーーーーーーーーーーーーーーーーーーーー */

body#kanda.sake {
	width: 100vw;
	& article {
		display: flex;
		flex-direction: row;
		gap: calc( 2 * var(--BaseSize) );
		padding: calc( 2 * var(--BaseSize) );
		width: 100vw;
		height: 100vh;
		& main {
			flex: 1;
			width: 100%;
			height: 100%;
			& section#main {
				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( 2 * var(--BaseSize) );
									& .slick-slide {
										display: flex;
										gap: calc( 2 * var(--BaseSize) );
										padding: calc( 2 * 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_K100) solid;
												& strong {
													display: flex;
													justify-content: space-between;
													color: var(--Color_FF100);
													font-size: calc( 4.4 * 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.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( 3 * var(--BaseSize) );
												line-height: 1;
												& em {
													padding: calc( 1 * var(--BaseSize) ) calc( 2 * var(--BaseSize) );
													border-radius: var(--Border-radius_S);
													background: var(--Color_K100);
												}
												& strong {
													padding: calc( 1 * var(--BaseSize) ) 0;
												}
											}
											& .text {
												padding: calc( 2 * var(--BaseSize) ) 0;
												color: var(--Color_FF100);
												font-size: calc( 3.4 * var(--BaseSize) );
												border-bottom: 1px var(--Color_K100) 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( 2 * var(--BaseSize) );
													}
													& strong {
														display: flex;
														justify-content: center;
														padding: calc( 1 * var(--BaseSize) );
														font-size: calc( 3.2 * var(--BaseSize) );
														border-radius: var(--Border-radius_S);
														background: var(--Color_K100);
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		/* ーーーーーーーーーーーーーーーーーーーー
		日本酒紹介
		サイドバー イベント画像
		ーーーーーーーーーーーーーーーーーーーー */
		& aside {
			flex-basis: var(--SideWidth);
			display: flex;
			flex-direction: column;
			gap: calc( 2 * var(--BaseSize) );
			padding: 0;
			width: var(--SideWidth);
			& div.item {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				gap: var(--BaseSize);
				padding: calc( 2 * var(--BaseSize) ) 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( 7.8 * var(--BaseSize) );
					height: calc( 7.8 * var(--BaseSize) );
					color: var(--Color_FF100);
					font-size: calc( 2.8 * var(--BaseSize) );
					line-height: 1;
					background: var(--Color_K100);
					clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
					border-radius: var(--Border-radius_S) 0 0 0;
				}
				& date {
					color: var(--Color_FF100);
					font-size: calc( 3.2 * var(--BaseSize) );
					line-height: 1;
					& span {
						font-size: calc( 2.2 * var(--BaseSize) );
					}
				}
				& time {
					color: var(--Color_FF100);
					font-size: calc( 4.2 * var(--BaseSize) );
					line-height: 1;
					& span {
						font-size: calc( 2.8 * var(--BaseSize) );
					}
				}
				& ul {
					display: flex;
					flex-direction: column;
					gap: var(--Size_04);
					& li {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						gap: calc( 0 * var(--BaseSize) );
						font-family: "Noto Sans", sans-serif;
						line-height: 1;
						& em {
							color: var(--Color_FF060);
							font-size: calc( 1.8 * var(--BaseSize) );
						}
						& strong {
							color: var(--Color_FF100);
							font-size: calc( 3.8 * var(--BaseSize) );
							& span {
								display: flex;
								gap: calc( 1 * var(--BaseSize) );
							}
						}
					}
				}

			}

			& section {
				width: 100%;
				> div {
					& .slick-slider {
						& .slick-list {
							& .slick-track {
								& .slick-slide {
									display: flex;
									flex-direction: column;
									gap: calc( 2 * var(--BaseSize) );
									& p {
										display: flex;
										justify-content: center;
										align-items: center;
										margin: 0 calc( 3 * var(--BaseSize) );
										padding: var(--BaseSize) var(--BaseSize) var(--BaseSize);
										color: var(--Color_FF100);
										font-size: calc( 3.2 * var(--BaseSize) );
										line-height: 1;
										background: var(--Color_K100);
										border-radius: var(--Border-radius_S);
									}
									& img {
										width: var(--SideWidth);
										border-radius: var(--Border-radius_S);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}