@charset "UTF-8";

#contents {
	#event-search {
		background-color: var(--htitle);
		border: 1px solid var(--border-color1);
		border-radius: 6px;

		& h3 {
			margin-bottom: 0;
			position: relative;
		}

		& dl {
			padding: 10px 16px;

			& dt {
				width: 6em;
				padding-top: 6px;
				font-weight: 700;
			}

			& dd {
				padding-top: 8px;

				& label {
					margin: 0 0 10px 0;
					padding: .5em .75em;
					line-height: 1;
					background-color: var(--bg-color);
					border: 1px solid var(--border-color1);
					border-radius: 4px;

					&:has(input:checked) {
						color: var(--bg-color);
						background-color: var(--main-color);
					}

					& input {
						width: 0;
						margin: -2px 0 1px 0;
						vertical-align: middle;
					}

					& span {
						outline: none;
					}

					&.event-icon {
						border: 2px solid transparent;
						
						&.event {
							border-color: #F66;
						}
						&.recruit {
							border-color: #69F;
						}
						&.test {
							border-color: #5D8;
						}
						&.etc {
							border-color: #A6F;
						}
					}
				}

				dl:first-child & {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: stretch;

					& label {
						width: calc(50% - 5px);
					}
				}
			}
		}

		& .btn-box {
			padding: 6px 16px 26px;
			display: flex;
			text-align: center;

			& input {
				width: 40%;
				height: 40px;
				font-size: 1.15em;
				border-radius: 4px;

				&[type="reset"] {
					width: auto;
					padding-left: 1em;
					padding-right: 1em;
					color: var(--font-color);
					background-color: var(--bg-color);
					border: 1px solid var(--border-color1);
				}

				&[type="submit"] {
					margin-right: 16px;
					flex-grow: 9;
					color: var(--white);
					background-color: var(--main-color);
					border: 1px solid var(--border-color1);
				}
			}
		}

		& search {
			max-height: 1200px;
			overflow: hidden;
			transition: .5s;
		}
	}
	.peekaboo {
		margin: 0;
		padding: 0;
		display: block;
		text-align: center;
		border: none;
		outline: none;
		background-image: linear-gradient(transparent 49%, var(--font-color) 51%, transparent 0);
		background-image: linear-gradient(transparent calc(50% - .5px), var(--border-color1) 0 calc(50% + .5px), transparent 0);

		& span {
			padding: .5em 1em .5em 2.5em;
			display: inline-block;
			position: relative;
			outline: none;
			background-color: var(--bg-color);
			border: 1px solid var(--border-color2);
			border-radius: 4px;

			&::before,
			&::after {
				content: "";
				width: 1em;
				height: 2px;
				display: block;
				position: absolute;
				top: 50%;
				left: 1em;
				background-color: var(--font-color);
				border-radius: 1em;
				transform: translate(0, -50%);
			}
			&::after {
				width: 2px;
				height: 1em;
				left: 1.5em;
				transform: translate(-50%, -50%);
			}
		}

		& + * {
			max-height: 0;
			overflow: hidden;
			transition: max-height .3s;
		}
		&.open {
			& span::after {
				content: "を閉じる";
				content: none;
				width: auto;
				height: auto;
				display: inline-block;
				position: static;
				background-color: transparent;
				transform: none;
			}

			& + * {
				max-height: 600px;
			}
		}
	}
	.event-icon {
		padding-left: 1.75em;
		display: inline-block;
		position: relative;

		&::before {
			content: "";
			width: 1.4em;
			height: 1.4em;
			margin-right: 5px;
			display: block;
			position: absolute;
			top: .2em;
			left: 0;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 80%;
			border-radius: 1em;
		}

		#event-search & {
			padding-left: 2.6em;
			position: relative;

			&::before {
				width: calc(2em + 2px);
				height: calc(2em + 2px);
				top: -1px;
				left: 0;
				border-radius: 3px 0 0 3px;
			}
		}
		&.event::before {
			background-color: #F66;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNNDM4LTIwOCAzMDItMzQ0bDUxLTUxIDg1IDg1IDE2OS0xNzAgNTEgNTEtMjIwIDIyMVpNMjE2LTk2cS0yOS43IDAtNTAuODUtMjEuNVExNDQtMTM5IDE0NC0xNjh2LTUyOHEwLTI5IDIxLjE1LTUwLjVUMjE2LTc2OGg3MnYtOTZoNzJ2OTZoMjQwdi05Nmg3MnY5Nmg3MnEyOS43IDAgNTAuODUgMjEuNVE4MTYtNzI1IDgxNi02OTZ2NTI4cTAgMjktMjEuMTUgNTAuNVQ3NDQtOTZIMjE2Wm0wLTcyaDUyOHYtMzYwSDIxNnYzNjBabTAtNDMyaDUyOHYtOTZIMjE2djk2Wm0wIDB2LTk2IDk2WiIvPjwvc3ZnPg==");
		}
		&.recruit::before {
			background-color: #69F;
			background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQwIDY0MCI+ICA8ZGVmcz4gPHN0eWxlPiAuc3QwIHsgZmlsbDogI2ZmZjsgfSA8L3N0eWxlPiA8L2RlZnM+IDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNzYsODhjMC0zMC45LTI1LjEtNTYtNTYtNTZzLTU2LDI1LjEtNTYsNTYsMjUuMSw1Niw1Niw1Niw1Ni0yNS4xLDU2LTU2Wk00MDAsMzAwLjdsNDYuMyw2Mi40YzEwLjUsMTQuMiwzMC42LDE3LjIsNDQuOCw2LjYsMTQuMi0xMC42LDE3LjItMzAuNiw2LjYtNDQuOGwtNzAuNS05NWMtMjUuMi0zMy45LTY0LjktNTMuOS0xMDcuMi01My45cy04MiwyMC0xMDcuMiw1My45bC03MC41LDk1Yy0xMC41LDE0LjItNy42LDM0LjIsNi42LDQ0LjgsMTQuMiwxMC42LDM0LjIsNy42LDQ0LjgtNi42bDQ2LjMtNjIuNHYyNzUuM2MwLDE3LjcsMTQuMywzMiwzMiwzMnMzMi0xNC4zLDMyLTMydi0xNjBjMC04LjgsNy4yLTE2LDE2LTE2czE2LDcuMiwxNiwxNnYxNjBjMCwxNy43LDE0LjMsMzIsMzIsMzJzMzItMTQuMywzMi0zMnYtMjc1LjNaIi8+PC9zdmc+");
		}
		&.test::before {
			background-color: #5D8;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNMjE2LTIxNmg1MWwzNzUtMzc1LTUxLTUxLTM3NSAzNzV2NTFabS03MiA3MnYtMTUzbDQ5OC00OThxMTEtMTEgMjMuODQtMTYgMTIuODMtNSAyNy01IDE0LjE2IDAgMjcuMTYgNXQyNCAxNmw1MSA1MXExMSAxMSAxNiAyNHQ1IDI2LjU0cTAgMTQuNDUtNS4wMiAyNy41NFQ3OTUtNjQyTDI5Ny0xNDRIMTQ0Wm02MDAtNTQ5LTUxLTUxIDUxIDUxWm0tMTI3Ljk1IDc2Ljk1TDU5MS02NDJsNTEgNTEtMjUuOTUtMjUuMDVaIi8+PC9zdmc+");
		}
		&.etc::before {
			background-color: #A6F;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNNzIwLTQ0NHYtNzJoMTQ0djcySDcyMFptNDEgMjc2LTExOC04MiA0Mi01OSAxMTggODItNDIgNTlabS03Ny00ODMtNDEtNTkgMTE4LTgyIDQxIDU5LTExOCA4MlpNMTkyLTE5MnYtMTkyaC0yNHEtMjkuNyAwLTUwLjg1LTIxLjE1UTk2LTQyNi4zIDk2LTQ1NnYtNDhxMC0yOS43IDIxLjE1LTUwLjg1UTEzOC4zLTU3NiAxNjgtNTc2aDEzOWwyMjEtMTMydjQ1NkwzMTMtMzg0aC0yNXYxOTJoLTk2Wm0yNjQtMTg5di0yMDBsLTEyOSA3N0gxNjh2NDhoMTY2bDEyMiA3NVptMTIwIDE4di0yMzRxMjMgMjIgMzUuNSA1M3QxMi41IDY0cTAgMzMtMTIuNSA2NFQ1NzYtMzYzWk0zMTItNDgxWiIvPjwvc3ZnPg==");
		}
	}
	#event-search + .tab-container .cal-list ul {
		margin-left: 1em;
		list-style: none;

		& li {
			padding: .2em 0;
		}
	}

	& .tab-container {
		margin-top: calc(3.5em + 16px);
		position: relative;

		& .tab {
			width: calc(50% + 1px);
			padding: 1em 0;
			position: absolute;
			bottom: 100%;
			left: 0;
			line-height: 1;
			font-weight: 500;
			text-align: center;
			background-color: var(--htitle);
			border: 1px solid var(--border-color2);
			border-bottom-color: transparent;
			border-radius: 5px 0 0 0;

			[data-bc="white"] & {
				background-color: var(--bg-color);
			}

			&:not(.current) {
				width: 50%;
				font-weight: 300;
				background-color: var(--bg-color);
				border-bottom-color: var(--border-color2);
				cursor: pointer;

				[data-bc="white"] & {
					background-color: var(--htitle);
				}

				& + * {
					display: none;
				}
			}

			&::before {
				content: "";
				width: 20px;
				height: 1px;
				display: block;
				position: absolute;
				bottom: -1px;
				left: -20px;
				background-color: var(--border-color1);
			}
		}

		& .tab ~ .tab {
			left: auto;
			right: 0;
			border-radius: 0 5px 0 0;

			&::before {
				left: auto;
				right: -20px;
				transform: scaleX(-1);
			}
		}
	}

	& .cal-list {
		padding: 20px 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;

		& dt {
			width: 7em;
			margin-bottom: -1px;
			padding: 15px 0;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			background-color: var(--htitle);
			background-color: var(--bg-color);
			border: 1px solid var(--border-color1);
			border-right: none;

			&.sat {
				background-color: var(--sat-bg);

				& + dd {
					background-color: var(--sat-bg);
				}
			}

			&.sun {
				background-color: var(--sun-bg);

				& + dd {
					background-color: var(--sun-bg);
				}
			}

			&::after {
				content: "";
				width: 1px;
				display: block;
				position: absolute;
				top: 10px;
				bottom: 10px;
				right: 0;
				background-color: var(--border-color2);
				mix-blend-mode: multiply;

				width: 2px;
				background-color: var(--htitle);
			}

			& span {
				text-align: center;

				& strong {
					font-size: 2em;
					font-weight: 400;
				}

				& small {
					font-size: .8em;
				}
			}
		}
		& dd {
			width: calc(100% - 7em);
			margin-bottom: -1px;
			padding: 1em 1em 1em 0;
			background-color: var(--bg-color);
			border: 1px solid var(--border-color2);
			border-left: none;

			& ul li {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				align-items: flex-start;

			}

			& span.event-icon {
				padding-left: 0;
				flex-shrink: 0;
				flex-grow: 0;
				transform: translate(0, .1em);

				&::before {
					position: static;
				}
			}
		}

		& .old::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #0001;
			pointer-events: none;
		}

		& dt:first-child {
			border-top-left-radius: 6px;
		}
		& dd:first-of-type {
			border-top-right-radius: 6px;
		}
		& dt:last-of-type {
			border-bottom-left-radius: 6px;
		}
		& dd:last-of-type {
			border-bottom-right-radius: 6px;
		}
	}

	& .event-multiple {
		padding-top: 20px;

		ul {
			margin: 0;
			list-style: none;

			li {
				margin-bottom: -1px;
				padding: 1em;
				border: 1px solid var(--border-color2);

				&:first-child {
					border-radius: 6px 6px 0 0;
				}
				&:last-child {
					border-radius: 0 0 6px 6px;
				}

				& time {
					display: block;
					font-weight: 700;
				}

				& div {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
				}
			}
		}
	}

	& .old {
		position: relative;

		.event-multiple &::before {
			content: none;
		}
	}

	& .event-list {
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;

		& li {
			width: 100%;
			max-width: 100%;
			margin: 20px 0 0;
			padding: 12px 12px 12px 120px;
			display: block;
			position: relative;
			background-color: var(--bg-color);
			border: 1px solid var(--border-color2);
			border-radius: 6px;

			&.old {
				background-color: var(--htitle);

				&::before {
					content: "終了";
					padding: .5em 1em;
					display: block;
					position: absolute;
					top: -10px;
					left: -10px;
					line-height: 1;
					font-weight: 700;
					color: var(--white);
					background-color: #000C;
					pointer-events: none;
					border-radius: 3px;
					z-index: 2;
				}
				[data-bc="black"] &::before {
					box-shadow: 0 0 0 1px var(--white) inset;
				}

				& img {
					filter: brightness(.6);
				}
			}

			& div {
				width: 100px;
				height: 100px;
				margin-bottom: 5px;
				position: absolute;
				top: 10px;
				left: 10px;
				overflow: hidden;
				border-radius: 3px;

				& img {
					min-width: 100%;
					min-height: 100%;
					object-fit: cover;
				}
			}

			& time {
				padding: 0 0 5px;
				display: block;
				line-height: 1;
				font-size: .85em;
				font-weight: 700;
			}

			& a {
				padding: 0 0 5px;
				display: block;
			}

			& dl {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: stretch;
				clear: both;

				& dt {
					width: 5em;
					color: var(--border-color2);
				}
				& dt:has( + dd:empty) {
					display: none;
				}
				& dd {
					width: calc(100% - 5em);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					&:empty {
						display: none;
					}

					& span {
						padding: 0 .5em;
						display: inline-block;
						border-radius: 3px;
					}

					&.end span {
						background-color: var(--border-color3);

						[data-bc="blue"] &,
						[data-bc="black"] & {
							background-color: var(--main-color);
							box-shadow: 0 0 0 1px var(--white) inset;
						}
					}
					&.caution span {
						color: var(--white);
						background-color: var(--accent-color);
						background-color: #F60;
					}
				}
			}
		}
	}
}

#contents:has(#event-search) {
	h2 {
		margin-bottom: 0;
		border-radius: 4px 4px 0 0;

		&:has(.select-wrapper) span::after {
			content: "";
			width: 0px;
			height: 0px;
			margin-left: .25em;
			display: inline-block;
			border-width: .3em .3em;
			border-style: solid solid;
			border-color: transparent transparent;
			border-top: .4em solid var(--white);
			transform: translate(0, .15em);
		}
	}
	#event-search {
		border-top: none;
		border-radius: 0 0 4px 4px;
	}
}





/* /////////////////////////////////////////////////////////////////////////////////////// */
/* PC *//* /////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 1100px) {
	#contents {

		#event-search {
			& dl {
				padding: 10px 25px;
				display: flex;
				flex-wrap: wrap;
				align-items: stretch;

				& dt,
				& dd {
					padding-top: calc(12px + .5em);
					line-height: 1;
				}

				& dd {
					width: calc(100% - 6em);
					padding-top: 10px;

					dl:first-child & label {
						width: calc(25% - 10px);
					}
				}
			}

			& .btn-box {
				padding: 10px 25px 30px;

				& input {
					width: 30%;

					&[type="reset"] {
						margin-right: 9px;
						padding-left: 3em;
						padding-right: 3em;
					}
				}
			}

			& search {
				max-height: 700px;
			}
		}

		& .event-multiple {
			& ul li {
				display: flex;

				& time {
					width: 10.5em;
				}
			}
		}

		& .event-list {
			justify-content: space-between;

			& li {
				width: calc(50% - 10px);
				padding: 0;
				display: flex;
				flex-direction: column;

				& div {
					width: 100%;
					height: 200px;
					position: static;
					border-radius: 5px 5px 0 0;
				}
				& time,
				& a {
					padding: 10px 12px 0;
					line-height: 1.6;
				}
				& dl {
					padding: 10px 12px;
				}
			}
		}
    }
}