@charset "utf-8";
/* CSS Document */

:root {
	--time_30min: 200px;
  --time_60min: 400px;
}
@media screen and (max-width: 768px) {
	:root {
		/* --time_05: 100px; */
	}
}

.timetable-column {
	@media screen and (max-width: 1280px) {
		width: 94%;
		margin-left: auto;
		margin-right: 0;
	}
	@media screen and (max-width: 768px) {
		width: 88.2%;
		margin-right: auto;
	}
}
.timetable-overflow {
	width: 100%;
	overflow-x: auto;

	@media screen and (max-width: 768px) {
		overflow-x: inherit;
	}
}

.timetable-wrapper {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 70px 2rem 70px;

	@media screen and (max-width: 1280px) {
		min-width: 1080px;
	}
	@media screen and (max-width: 768px) {
		min-width: inherit;
		padding: 0;
	}
	
	/* tab */
	.timetable-tab {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 50px;
		width: 100%;

		@media screen and (max-width: 1280px) {
			gap: 25px;
		}
		@media screen and (max-width: 768px) {
			gap: 5px;
		}
	
		.timetable-tab--item {
			position: relative;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 10px;
			width: 100%;
			margin: 0;
			padding: 15px;
			color: #fff;
			line-height: 1;
			border: 2px solid #000a0a;
			background-color: #000a0a;

			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 5px;
				padding: 10px 5px;
			}

			&:hover {
				cursor: pointer;
			}
	
			div {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: .25em;
				font-size: 18px;
				font-weight: 700;
				font-family: Montserrat, sans-serif;
				font-style: italic;
				letter-spacing: .05em;

				@media screen and (max-width: 768px) {
					flex-direction: row;
					gap: 0;
					font-size: clamp( 10px, calc( 4px + 1.5625vw ), 16px );
				}
	
				span {
					display: inline-block;
					margin: 0;
					padding: .3em .5em;
					font-size: 12px;
					font-weight: 900;
					font-style: normal;
					color: #000a0a;
					letter-spacing: .01em;
					white-space: nowrap;
					transform: skew(-12deg);
					background-color: #8fdc00;

					@media screen and (max-width: 768px) {
						padding-top: .5em;
						font-size: 10px;
						transform: scale(.8) skew(-12deg);
					}
				}
			}
	
			.date {
				position: relative;
				z-index: 1;
				flex-direction: row;
				align-items: flex-end;
				gap: .1em;
				
				font-size: 50px;
				font-style: italic;

				@media screen and (max-width: 768px) {
					font-size: clamp( 18px, calc( 1px + 4.427083333333334vw ), 35px );
				}
	
				small {
					display: inline-block;
					margin-bottom: .1em;
					font-size: 25px;

					@media screen and (max-width: 768px) {
						font-size: clamp( 16px, calc( 12px + 1.0416666666666665vw ), 20px );
					}
				}
			}

			&.active {
				color: #000a0a;
				background-color: #fff;

				&:before {
					content: '';
					position: absolute;
					z-index: 0;
					left: 50%;
					bottom: 0;
					display: block;
					width: 15px;
					height: 15px;
					transform: translate(-50%, 50%) rotate(45deg);
					background-color: #fff;
					border-top: 2px solid #fff;
					border-left: 2px solid #fff;
					border-right: 2px solid #000a0a;
					border-bottom: 2px solid #000a0a;
				}
			}
		}
	}
	
	
	/* contents */
	.table-contents {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 0;

		.timetable {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 0;

			[class^="time-"] {
				width: 100%;
			}

			.time-0_05 { height: calc((var(--time_30min) / 6) * 1); }
			.time-0_10 { height: calc((var(--time_30min) / 6) * 2); }
			.time-0_15 { height: calc((var(--time_30min) / 6) * 3); }
			.time-0_20 { height: calc((var(--time_30min) / 6) * 4); }
			.time-0_25 { height: calc((var(--time_30min) / 6) * 5); }
			.time-0_30 { height: calc((var(--time_30min) / 6) * 6); } /* 基準 */
			.time-0_35 { height: calc((var(--time_30min) / 6) * 7); }
			.time-0_40 { height: calc((var(--time_30min) / 6) * 8); }
			.time-0_45 { height: calc((var(--time_30min) / 6) * 9); }
			.time-0_50 { height: calc((var(--time_30min) / 6) * 10); }
			.time-0_55 { height: calc((var(--time_30min) / 6) * 11); }

			.time-1_00 { height: calc((var(--time_30min) / 6) * 12); }
			.time-1_05 { height: calc((var(--time_30min) / 6) * 13); }
			.time-1_10 { height: calc((var(--time_30min) / 6) * 14); }
			.time-1_15 { height: calc((var(--time_30min) / 6) * 15); }
			.time-1_20 { height: calc((var(--time_30min) / 6) * 16); }
			.time-1_25 { height: calc((var(--time_30min) / 6) * 17); }
			.time-1_30 { height: calc((var(--time_30min) / 6) * 18); }
			.time-1_35 { height: calc((var(--time_30min) / 6) * 19); }
			.time-1_40 { height: calc((var(--time_30min) / 6) * 20); }
			.time-1_45 { height: calc((var(--time_30min) / 6) * 21); }
			.time-1_50 { height: calc((var(--time_30min) / 6) * 22); }
			.time-1_55 { height: calc((var(--time_30min) / 6) * 23); }
			
			.time-2_00 { height: calc((var(--time_30min) / 6) * 24); }
			.time-2_05 { height: calc((var(--time_30min) / 6) * 25); }
			.time-2_10 { height: calc((var(--time_30min) / 6) * 26); }
			.time-2_15 { height: calc((var(--time_30min) / 6) * 27); }
			.time-2_20 { height: calc((var(--time_30min) / 6) * 28); }
			.time-2_25 { height: calc((var(--time_30min) / 6) * 29); }
			.time-2_30 { height: calc((var(--time_30min) / 6) * 30); }
			.time-2_35 { height: calc((var(--time_30min) / 6) * 31); }
			.time-2_40 { height: calc((var(--time_30min) / 6) * 32); }
			.time-2_45 { height: calc((var(--time_30min) / 6) * 33); }
			.time-2_50 { height: calc((var(--time_30min) / 6) * 34); }
			.time-2_55 { height: calc((var(--time_30min) / 6) * 35); }

			.time-3_00 { height: calc((var(--time_30min) / 6) * 36); }
			.time-3_05 { height: calc((var(--time_30min) / 6) * 37); }
			.time-3_10 { height: calc((var(--time_30min) / 6) * 38); }
			.time-3_15 { height: calc((var(--time_30min) / 6) * 39); }
			.time-3_20 { height: calc((var(--time_30min) / 6) * 40); }
			.time-3_25 { height: calc((var(--time_30min) / 6) * 41); }
			.time-3_30 { height: calc((var(--time_30min) / 6) * 42); }
			.time-3_35 { height: calc((var(--time_30min) / 6) * 43); }
			.time-3_40 { height: calc((var(--time_30min) / 6) * 44); }
			.time-3_45 { height: calc((var(--time_30min) / 6) * 45); }
			.time-3_50 { height: calc((var(--time_30min) / 6) * 46); }
			.time-3_55 { height: calc((var(--time_30min) / 6) * 47); }

			.time-4_00 { height: calc((var(--time_30min) / 6) * 48); }
			.time-4_05 { height: calc((var(--time_30min) / 6) * 49); }
			.time-4_10 { height: calc((var(--time_30min) / 6) * 50); }
			.time-4_15 { height: calc((var(--time_30min) / 6) * 51); }
			.time-4_20 { height: calc((var(--time_30min) / 6) * 52); }
			.time-4_25 { height: calc((var(--time_30min) / 6) * 53); }
			.time-4_30 { height: calc((var(--time_30min) / 6) * 54); }
			.time-4_35 { height: calc((var(--time_30min) / 6) * 55); }
			.time-4_40 { height: calc((var(--time_30min) / 6) * 56); }
			.time-4_45 { height: calc((var(--time_30min) / 6) * 57); }
			.time-4_50 { height: calc((var(--time_30min) / 6) * 58); }
			.time-4_55 { height: calc((var(--time_30min) / 6) * 59); }
			
			.time-5_00 { height: calc((var(--time_30min) / 6) * 60); }
			.time-5_05 { height: calc((var(--time_30min) / 6) * 61); }
			.time-5_10 { height: calc((var(--time_30min) / 6) * 62); }
			.time-5_15 { height: calc((var(--time_30min) / 6) * 63); }
			.time-5_20 { height: calc((var(--time_30min) / 6) * 64); }
			.time-5_25 { height: calc((var(--time_30min) / 6) * 65); }
			.time-5_30 { height: calc((var(--time_30min) / 6) * 66); }
			.time-5_35 { height: calc((var(--time_30min) / 6) * 67); }
			.time-5_40 { height: calc((var(--time_30min) / 6) * 68); }
			.time-5_45 { height: calc((var(--time_30min) / 6) * 69); }
			.time-5_50 { height: calc((var(--time_30min) / 6) * 70); }
			.time-5_55 { height: calc((var(--time_30min) / 6) * 71); }

			.time-6_00 { height: calc((var(--time_30min) / 6) * 72); }
			.time-6_05 { height: calc((var(--time_30min) / 6) * 73); }
			.time-6_10 { height: calc((var(--time_30min) / 6) * 74); }
			.time-6_15 { height: calc((var(--time_30min) / 6) * 75); }
			.time-6_20 { height: calc((var(--time_30min) / 6) * 76); }
			.time-6_25 { height: calc((var(--time_30min) / 6) * 77); }
			.time-6_30 { height: calc((var(--time_30min) / 6) * 78); }
			.time-6_35 { height: calc((var(--time_30min) / 6) * 79); }
			.time-6_40 { height: calc((var(--time_30min) / 6) * 80); }
			.time-6_45 { height: calc((var(--time_30min) / 6) * 81); }
			.time-6_50 { height: calc((var(--time_30min) / 6) * 82); }
			.time-6_55 { height: calc((var(--time_30min) / 6) * 83); }

			.time-7_00 { height: calc((var(--time_30min) / 6) * 84); }
			.time-7_05 { height: calc((var(--time_30min) / 6) * 85); }
			.time-7_10 { height: calc((var(--time_30min) / 6) * 86); }
			.time-7_15 { height: calc((var(--time_30min) / 6) * 87); }
			.time-7_20 { height: calc((var(--time_30min) / 6) * 88); }
			.time-7_25 { height: calc((var(--time_30min) / 6) * 89); }
			.time-7_30 { height: calc((var(--time_30min) / 6) * 90); }
			.time-7_35 { height: calc((var(--time_30min) / 6) * 91); }
			.time-7_40 { height: calc((var(--time_30min) / 6) * 92); }
			.time-7_45 { height: calc((var(--time_30min) / 6) * 93); }
			.time-7_50 { height: calc((var(--time_30min) / 6) * 94); }
			.time-7_55 { height: calc((var(--time_30min) / 6) * 95); }

			.time-8_00 { height: calc((var(--time_30min) / 6) * 96); }
			.time-8_05 { height: calc((var(--time_30min) / 6) * 97); }
			.time-8_10 { height: calc((var(--time_30min) / 6) * 98); }
			.time-8_15 { height: calc((var(--time_30min) / 6) * 99); }
			.time-8_20 { height: calc((var(--time_30min) / 6) * 100); }
			.time-8_25 { height: calc((var(--time_30min) / 6) * 101); }
			.time-8_30 { height: calc((var(--time_30min) / 6) * 102); }
			.time-8_35 { height: calc((var(--time_30min) / 6) * 103); }
			.time-8_40 { height: calc((var(--time_30min) / 6) * 104); }
			.time-8_45 { height: calc((var(--time_30min) / 6) * 105); }
			.time-8_50 { height: calc((var(--time_30min) / 6) * 106); }
			.time-8_55 { height: calc((var(--time_30min) / 6) * 107); }
			
			.time-9_00 { height: calc((var(--time_30min) / 6) * 108); }
			.time-9_05 { height: calc((var(--time_30min) / 6) * 109); }
			.time-9_10 { height: calc((var(--time_30min) / 6) * 110); }
			.time-9_15 { height: calc((var(--time_30min) / 6) * 111); }
			.time-9_20 { height: calc((var(--time_30min) / 6) * 112); }
			.time-9_25 { height: calc((var(--time_30min) / 6) * 113); }
			.time-9_30 { height: calc((var(--time_30min) / 6) * 114); }

			.time-end { height: 0; }

			.timetable--item {
				width: 100%;
				height: 100%;

				font-size: clamp( 14px, calc( 10px + 0.3125vw ), 16px );
				border-radius: .5em;
				border: 2px solid #8fdc00;
				background-color: #fff;
				overflow: hidden;

				span {
					display: block;
					width: 100%;
					padding: .05em .75em;
					font-style: italic;
					font-weight: 700;
					font-family: Montserrat, sans-serif;
					background-color: #8fdc00;
				}
        
        span.theme {
          padding-bottom: 0.8em;
          font-style: normal;
          font-family: 'Noto Sans JP', '游ゴシック', YuGothic, "Yu Gothic medium", "Hiragino Sans", sans-serif;
          line-height: 1.3em;
          letter-spacing: 0.05em;
          font-feature-settings: "palt";
          text-align: justify;
          word-break: break-all;
        }

				p {
					width: 100%;
					padding: .5em .75em;
					font-family: 'Noto Sans JP', '游ゴシック', YuGothic, "Yu Gothic medium", "Hiragino Sans", sans-serif;
          font-feature-settings: "palt";
				}
        
        p + p {
          padding-top: 0;
        }
        
        small {
          display: block;
          opacity: 0.5;
          font-size: 0.8em;
        }

				i {
					font-size: clamp( 16px, calc( 12px + 0.3125vw ), 18px );
					font-weight: 700;
					font-family: Montserrat, sans-serif;

					&.room-name {
						display: inline-block;
						padding: .1em .5em;
						font-size: clamp( 14px, calc( 10px + 0.3125vw ), 16px );
						color: #fff;
						background-color: #000a0a;
					}
				}

				&.long {
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					border: none;
					background-color: rgba(143, 220, 0, .5);

					> div {
						p {
							margin-top: -.5rem;
							padding-top: 0;
						}
					}
				}
				&.color--light {
					border-color: #7ddcff;
					span { background-color: #7ddcff; }
				}
				&.color--muted {
					border-color: #3cc78c;
					span { background-color: #3cc78c; }
				}
				&.color--accent {
					border-color: #ffa0f1;
					span { background-color: #ffa0f1; }
				}
				&.color--neutral {
					border-color: #c0c1c3;
					span { background-color: #c0c1c3; }
				}

				/* イベント時間 */
				&.min-05 { height: calc((var(--time_30min) / 6)); }
				&.min-10 { height: calc((var(--time_30min) / 6) * 2); }
				&.min-15 { height: calc((var(--time_30min) / 6) * 3); }
				&.min-20 { height: calc((var(--time_30min) / 6) * 4); }
				&.min-25 { height: calc((var(--time_30min) / 6) * 5); }
				&.min-30 { height: calc((var(--time_30min) / 6) * 6); }
				&.min-35 { height: calc((var(--time_30min) / 6) * 7); }
				&.min-40 { height: calc((var(--time_30min) / 6) * 8); }
				&.min-45 { height: calc((var(--time_30min) / 6) * 9); }
				&.min-50 { height: calc((var(--time_30min) / 6) * 10); }

				/* イベント開始時間（**分～開始） */
				&.min-before-05 { margin-top: calc((var(--time_30min) / 6)); }
				&.min-before-10 { margin-top: calc((var(--time_30min) / 6) * 2); }
				&.min-before-15 { margin-top: calc((var(--time_30min) / 6) * 3); }
				&.min-before-20 { margin-top: calc((var(--time_30min) / 6) * 4); }
				&.min-before-25 { margin-top: calc((var(--time_30min) / 6) * 5); }
				&.min-before-30 { margin-top: calc((var(--time_30min) / 6) * 6); }
				&.min-before-35 { margin-top: calc((var(--time_30min) / 6) * 7); }
				&.min-before-40 { margin-top: calc((var(--time_30min) / 6) * 8); }
				&.min-before-45 { margin-top: calc((var(--time_30min) / 6) * 9); }
				&.min-before-50 { margin-top: calc((var(--time_30min) / 6) * 10); }
			}

			a.timetable--item {
				transition: .3s opacity;
				text-decoration: none;
				&:hover {
					cursor: pointer;
					opacity: .7;
				}
			}
		}
	}

	.table-times {
		width: 0;
		margin-top: 100px;

		@media screen and (max-width: 768px) {
			padding-left: 50px;
		}

		[class^="time-"] {
			position: relative;

			span {
				position: absolute;
				top: 0;
				left: -20px;
				display: inline-block;
				font-size: 18px;
				font-weight: 700;
				font-family: Montserrat, sans-serif;
				text-align: right;
				transform: translate(-100%, -50%);

				@media screen and (max-width: 768px) {
					left: -10px;
					font-size: clamp( 14px, calc( 12px + 0.5208333333333333vw ), 16px );
				}
			}
		}
	}

	.table-place {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 0;
		width: 100%;

		/* 初期状態で非表示（jsで制御） */
		display: none;

		@media screen and (max-width: 768px) {
			width: 100%;
			overflow: auto;
		}

		.table-place--item {
			flex: 1;
			margin: 0;

			@media screen and (max-width: 768px) {
				min-width: 200px;
			}
			
			.head {
				display: flex;
				justify-content: center;
				align-items: center;

				width: 100%;
				height: 100px;
        
        position: sticky;
        top: 0;
			}
      
      .head.sticky {
        background: #fff;
        z-index: 10;
        opacity: 0.9;
      }
			
			.timetable {
				position: relative;
				padding: 0 .5em;
				background-image: repeating-linear-gradient(
					to bottom,
					transparent,
					transparent calc(var(--time_30min) - 1px),
					rgba(0, 0, 0, .1) calc(var(--time_30min) - 1px),
					rgba(0, 0, 0, .1) var(--time_30min)
				);
				background-color: #f5f5f5;
			}

			&:nth-child(odd) {
				.timetable {
					background-color: #ebebeb;
				}
			}
		}
	}
}