@charset "utf-8";
:root {
}







/* ーーーーーーーーーーーーーーーーーーーー
	ベース
ーーーーーーーーーーーーーーーーーーーー */
body#OCE {
	& header {
		& #welcome {
			order: 1;
			flex-basis: calc( 100% - var(--BaseSize) - 100vh );
			& .ListW {
				& .slick-list {
					& .slick-track {
					}
				}
				& em {
					font-size: 2vw;
				}
			}
		}
		& #now {
			order: 2;
			flex-basis: 40vh;
			& .rotate {
				& .title {
					& em {
					}
				}
				& .data {
					& date {
						& span {
						}
					}
					& time {
						& span {
						}
					}
				}
			}
		}
		& #fee {
			order: 3;
			& .rotate {
				& .title {
					& em {
					}
				}
				& .data {
					& em {
						& span {
						}
					}
				}
			}
		}
		& #guide {
			& .rotate {
				& > div {
					& .title {
						& i {
						}
						& em {
						}
					}
					& .title:before {
					}
					& .List1 {
						& .slick-track {
						}
						& em {
						}
					}
				}
			}
		}
	}
}








body#OCE {
	& main {
		& article {
			& section.event_OCE {
				display: flex;
				gap: calc( 3 * var(--BaseSize) );
				padding: calc( 2 * var(--BaseSize) );
				& .slick-list {
					& .slick-track {
						& .slick-slide {
						}
					}
				}
				& .list {
					flex-basis: calc( calc( 100vw - calc( var(--BaseSize) * 2 ) ) / 2 );
					padding: calc( 2 * var(--BaseSize) );
					& .name {
						& figure {
							& em {
								display: none;
								& span {
								}
							}
							& strong {
								display: none;
								& span {
								}
							}
						}
						& figure:after {
							content: '';
							position: absolute;
							width: 100%;
							height: 100%;
						}
						& .title {
							& strong {
								
							}
						}
					}
					& .data {
						position: relative;
						& > figure {
							position: absolute;
							width: 100%;
							height: 100%;
							display: block;
							border-radius: var(--Border-radius_S);
							& > img {
								width: 100%;
								vertical-align: bottom;
								object-fit: cover;
								aspect-ratio: auto;
							}
						}
						& .style_wrap {
							& .style_title {
								font-size: 1.4vw;
							}
							& .style_title:before {
							}
							& .style {
								& > div {
									aspect-ratio: 1 / 1;
									& figure {
										& img {
											opacity: 1;
										}
									}
									& > div {
										right: 0;
										flex-direction: row;
										flex-wrap: wrap;
										& strong {
											font-size: 1.4vw;
											border-radius: var(--Border-radius_S);
										}
									}
								}
							}
						}
					}
				}
				& .list:before {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: -1;
					filter: blur(6px);
				}
				& .list:after {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_S);
					z-index: -1;
				}
				& .list:nth-of-type(1) {
					& .name {
						& figure {
							background: var(--Color_CX100) url('https://cavejpn.com/common/svg/logo_osakacavex_w.svg');
							background-repeat: no-repeat;
							background-position: center;
							background-size: 80%;
							& em {
								& span {
								}
							}
							& strong {
								& span {
								}
							}
						}
						& .title {
							& strong {
								
							}
						}
					}
					& .data {
						& > figure {
							& > img {
							}
						}
						& .style_wrap {
							& .style_title {
							}
							& .style_title:before {
							}
							& .style {
								& > div {
									
									& figure {
										border: 2px var(--Color_CX100) solid;
										& img {
										}
									}
									& > div {
										& strong {
											background: var(--Color_CX100);
										}
									}
								}
							}
						}
					}
				}
				& .list:nth-of-type(1):before {
					background: var(--Gradation_CaveX_on);
				}
				& .list:nth-of-type(2) {
					& .name {
						& figure {
							background: var(--Color_CV100) url('https://cavejpn.com/common/svg/logo_osakacave_w.svg');
							background-repeat: no-repeat;
							background-position: center;
							background-size: 80%;
							& em {
								& span {
								}
							}
							& strong {
								& span {
								}
							}
						}
						& .title {
							& strong {
								
							}
						}
					}
					& .data {
						& > figure {
							& > img {
							}
						}
						& .style_wrap {
							& .style_title {
							}
							& .style_title:before {
							}
							& .style {
								& > div {
									
									& figure {
										border: 2px var(--Color_CV100) solid;
										& img {
										}
									}
									& > div {
										& strong {
											background: var(--Color_CV100);
										}
									}
								}
							}
						}
					}
				}
				& .list:nth-of-type(2):before {
					background: var(--Gradation_Cave_on);
				}
			}
			& #ring {
				position: absolute;
				bottom: 2vw;
				left: calc( 4 * var(--BaseSize) );
				width: calc( 74 * var(--BaseSize) );
				height: 16vh;
				& .slick-list {
					& .slick-track {
						width: 100%;
						& .ring_wrap {
							display: flex;
							flex-direction: column;
							justify-content: center;
							gap: var(--BaseSize);
							border-radius: var(--Border-radius_S);
							& .title {
								position: relative;
								font-size: 1.4vw;
								& em {
									color: var(--Color_FF100);
									line-height: 1.2;
									font-weight: 600;
									text-shadow: 1px 1px 1px var(--Color_1D100);
								}
							}
							& .title:before {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 1px;
								background: linear-gradient( 90deg, var(--Color_CV100), var(--Color_CX100) );
							}
							& .wrap_ {
								display: flex;
								gap: var(--BaseSize);
								& .list {
									flex-basis: calc( calc( 100% - calc( 2 * var(--BaseSize) ) ) / 3 ) ;
									display: flex;
									flex-direction: column;
									padding: var(--BaseSize);
									background: var(--Color_1D080);
									border-radius: var(--Border-radius_S);
									backdrop-filter: blur(4px);
									-o-backdrop-filter: blur(4px);
									-moz-backdrop-filter: blur(4px);
									-webkit-backdrop-filter: blur(4px);
									& .ring {
										display: flex;
										justify-content: center;
										& em {
											font-size: 1.6vw;
											font-weight: 600;
										}
									}
									& .text {
										display: flex;
										justify-content: center;
										& em {
											font-size: 1.2vw;
										}
									}
								}
								& .listB {
									border: 1px rgba(0, 105, 255, 1) solid;
									& .ring {
										& em {
											color: rgba(0, 105, 255, 1);
										}
									}
									& .text {
										& em {

										}
									}
								}
								& .listY {
									border: 1px rgba(250, 255, 0, 1) solid;
									& .ring {
										& em {
											color: rgba(250, 255, 0, 1);
										}
									}
									& .text {
										& em {

										}
									}
								}
								& .listR {
									border: 1px rgba(255, 0, 0, 1) solid;
									& .ring {
										& em {
											color: rgba(255, 0, 0, 1);
										}
									}
									& .text {
										& em {

										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}








body#OCE {
	& aside {
		& .list6 {
			& .rotate {
				& figure {
					& i {
					}
					& strong {
						& span {
						}
					}
				}
				& figure:after {
				}
				& .text {
					& .title {
					}
					& .title:before {
					}
					& .List6 {
						& em {
						}
					}
				}
			}
		}
	}
}








body#OCE {
	& footer {
		& .list2 {
			flex-basis: calc( calc( 100% - calc( var(--BaseSize) * 3 ) ) / 4 );
			width: calc( calc( 100% - calc( var(--BaseSize) * 3 ) ) / 4 );
			& .rotate {
				& figure {
					background: linear-gradient( 90deg, var(--Color_CX100), var(--Color_CV100) );
					& em {
						& span {
						}
					}
					& strong {
						& span {
						}
					}
				}
				& .text {
					& .title {
						& b {
							color: var(--Color_CV100);
						}
					}
					& .title:before {
					}
					& .List2 {
						& em {
							& b {
								color: var(--Color_CV100);
							}
						}
					}
				}
			}
		}
		& .list1 {
			flex-basis: calc( calc( 100% - calc( var(--BaseSize) * 1 ) ) / 2 );
			width: calc( calc( 100% - calc( var(--BaseSize) * 1 ) ) / 2 );
			height: 100%;
			& .rotate {
				width: 100%;
				height: 100%;
				& figure {
					position: absolute;
					top: .5vw;
					left: .5vw;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: .3vw;
					width: 5vw;
					background: linear-gradient( 90deg, var(--Color_CX100), var(--Color_CV100) );
					border-radius: var(--Border-radius_L);
					aspect-ratio: 1 / 1;
					z-index: 1;
					& em {
						color: var(--Color_FF100);
						font-size: 1.4vw;
						font-weight: 600;
						line-height: 1;
						& span {
							font-size: 1vw;
							font-weight: 400;
						}
					}
					& strong {
						color: var(--Color_FF100);
						font-size: 1.2vw;
						font-weight: 600;
						line-height: 1;
						& span {
							font-size: 1vw;
							font-weight: 400;
						}
					}
				}
				& .ListFooterRing {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 0 var(--BaseSize) 0 6vw;
					width: 100%;
					height: 100%;
					background: var(--Color_K100);
					border-radius: var(--BaseSize);
					& .slick-list {
						& .slick-track {
							& .title {
								padding: 0 0 .6vw;
								font-size: 1.2vw;
								line-height: 1;
								color: var(--Color_FF100);
								& b {
									padding: 0 .1vw;
									font-size: 1.6vw;
									font-weight: 600;
								}
							}
							& .title:before {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 1px;
								background: linear-gradient( 90deg, var(--Color_CV100), var(--Color_CX100) );
							}
							& .wrap_ {
								display: flex;
								gap: var(--BaseSize);
								padding: var(--BaseSize) 0 0;
								& .list {
									flex-basis: calc( calc( 100% - calc( 2 * var(--BaseSize) ) ) / 3 ) ;
									display: flex;
									align-items: center;
									gap: var(--BaseSize);
									& .ring {
										display: flex;
										justify-content: center;
										padding: calc( 0.1 * var(--BaseSize) ) calc( 0.8 * var(--BaseSize) );
										border-radius: var(--Border-radius_S);
										& em {
											font-size: 1.2vw;
											font-weight: 600;
										}
									}
									& .txt {
										display: flex;
										justify-content: center;
										& em {
											font-size: 1.2vw;
										}
									}
								}
								& .listB {
									& .ring {
										background: rgba(0, 105, 255, 1);
										& em {
											color: var(--Color_FF100);
										}
									}
									& .txt {
										& em {
										}
									}
								}
								& .listY {
									& .ring {
										background: rgba(250, 255, 0, 1);
										& em {
											color: var(--Color_1D100);
										}
									}
									& .txt {
										& em {
										}
									}
								}
								& .listR {
									& .ring {
										background: rgba(255, 0, 0, 1);
										& em {
											color: var(--Color_FF100);
										}
									}
									& .txt {
										& em {
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}