@charset "UTF-8";

#calCont {
	&.aeon #calImage { background-color: #ae0072; }
	&.mv #calImage { background-color: #c2004b; }
	&.big #calImage { background-color: #ed5116; }
	& > .list {
		ul {
			display: flex;
			& > li {
				width: calc((100% + 3px) / 3);
				button {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: none;
					cursor: pointer;
					background: none;
					border: 1px solid #c6c6c6;
					border-bottom: none;
					span {
						display: block;
						position: relative;
					}
					&.active {
						span::before {
							content: "";
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							display: block;
							position: absolute;
							background: no-repeat center center;
							background-size: 100% 100%;
						}
						&[data-type='aeon'] {
							border-color: #ae0072;
							background-color: #ae0072;
							span::before { background-image: url(../images/tab_aeon_on.webp); }
						}
						&[data-type='mv'] {
							border-color: #c2004b;
							background-color: #c2004b;
							span::before { background-image: url(../images/tab_mv_on.webp); }
						}
						&[data-type='big'] {
							border-color: #ed5116;
							background-color: #ed5116;
							span::before { background-image: url(../images/tab_big_on.webp); }
						}
					}
				}
			}
			& > li:nth-child(2) { margin-inline: -1px; }
		}
	}
	#calImage {
		.calTitle {
			color: #fff;
			text-align: center;
			font-weight: bold;
		}
		#calendars > li:not(.active) { display: none; }
		.image {
			figcaption {
				color: #fff;
				text-align: right;
			}
		}
		#links {
			.title {
				color: #fff;
				font-weight: bold;
				text-align: center;
			}
			ul {
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
	@media (min-width:769px){
		max-width: 800px;
		margin-inline: auto;
		margin-block: 85px 90px;
		.list {
			button {
				height: 80px;
				border-radius: 10px 10px 0 0;
				&:hover {
					span::before {
						content: "";
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: block;
						position: absolute;
						background: no-repeat center center;
						background-size: 100% 100%;
					}
					&[data-type='aeon'] {
						border-color: #ae0072;
						background-color: #ae0072;
						span::before { background-image: url(../images/tab_aeon_on.webp); }
					}
					&[data-type='mv'] {
						border-color: #c2004b;
						background-color: #c2004b;
						span::before { background-image: url(../images/tab_mv_on.webp); }
					}
					&[data-type='big'] {
						border-color: #ed5116;
						background-color: #ed5116;
						span::before { background-image: url(../images/tab_big_on.webp); }
					}
				}
				span {
					img { height: 33px; }
				}
			}
		}
		#calImage {
			padding-bottom: 40px;
			.calTitle {
				font-size: 27px;
				padding-block: 25px 5px;
				.month {
					font-size: 50px;
				}
			}
			.image {
				padding-inline: 30px;
				figcaption {
					font-size: 10px;
					margin-top: 0.5em;
				}
			}
			#links {
				margin-top: 25px;
				padding-inline: 30px;
				.title { font-size: 24px; }
				ul {
					gap: 8px;
					margin-top: 10px;
					li { width: calc((100% - 24px) / 4); }
				}
			}
		}
	}
	@media (max-width:768px){
		margin-block: 20px 70px;
		.list {
			button {
				height: 50px;
				border-radius: 5px 5px 0 0;
				span {
					img { height: 20px; }
				}
			}
		}
		#calImage {
			padding-bottom: 34px;
			.calTitle {
				font-size: 14px;
				padding-block: 17px 12px;
				.month { font-size: 25px; }
			}
			.image {
				padding-inline: 15px;
				figcaption {
					font-size: 9px;
					line-height: 1.5;
				}
			}
			#links {
				margin-top: 20px;
				padding-inline: 15px;
				.title { font-size: 14px; }
				ul {
					gap: 3px;
					li { width: calc((100% - 9px) / 4); }
				}
			}
		}
	}
}