/* CSS Document */

main{
	margin-bottom: clamp(32px, calc(64 / 1200 * 100vw), 64px);
}

article:not([id]){
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	overflow: hidden;
	& h2{
		justify-self: center;
		display: grid;
		grid-gap: 0.25em 0.5em;
		font-family: "Zen Kurenaido", sans-serif;
		font-size: clamp(24px, calc(50 / 1200 * 100vw), 50px);
		-webkit-text-stroke: clamp(0.5px, calc(1 / 1200 * 100vw), 1px) currentColor;
		&:after{
			content: "";
			height: clamp(3px, calc(5 / 1200 * 100vw), 5px);
			background: linear-gradient(90deg, #ff7a5c, transparent);
		}
	}
	& h2+div{
		&:not([id]){
			margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
			font-weight: 700;
			text-align: center;
			&:has(wbr){
				word-break: keep-all;
				overflow-wrap: anywhere;
			}
		}
	}
	details{
		all: unset;
		&::details-content{
			box-sizing: border-box;
		}
	}
	summary{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
	}
	#search{
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
	#result{
		margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
		#search+&{
			margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
		}
	}
}

#search{
	position: relative;
	display: grid;
	grid-row-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) 0;
	background: #f5f3f0;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: max(100%, 100dvw);
		height: 100%;
		background: #f5f3f0;
		transform: translateX(-50%);
		z-index: -1;
	}
	& h2{
		display: none;
	}
}

#searchMenu{
	& summary{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-height: 48px;
		padding: 4px 8px 4px 24px;
		background: #fff;
		font-weight: 700;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 14px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="white"><path d="M3.5,4.81h5s-2.5,4-2.5,4l-2.5-4Z"/></svg>') no-repeat center / contain;
		}
		[open] &{
			background: #e8dbc7;
			&:after{
				transform: rotate(180deg);
			}
		}
	}
	& summary+div{
		display: grid;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
			grid-gap: 16px 24px;
			font-weight: 700;
			& ul{
				grid-template-columns: 1fr;
				grid-row-gap: 8px;
				margin: 8px 0 0 24px;
				font-weight: 400;
			}
		}
		& li{
			& input{
				transform: translateY(calc(0.875em - 50%));
			}
		}
		& div:has(.doClear){
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px 24px;
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			& button{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				display: grid;
				align-items: center;
				column-gap: 8px;
				width: min(80%, 240px);
				min-height: 48px;
				padding: 4px 16px;
				background: #808080;
				border-radius: 24px;
				color: #fff;
				font-weight: 700;
				text-align: center;
				letter-spacing: 0.025em;
				&.doSearch{
					grid-template-columns: auto 1fr;
					width: min(100%, 320px);
					background: var(--color-theme);
					&:before{
						content: "";
						aspect-ratio: 1;
						width: 16px;
						background: currentColor;
						-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: white; stroke-linecap: round; stroke-width: 2px;"><path d="M11.41,11.41l5.59,5.59"/><circle cx="7" cy="7" r="6"/></svg>') no-repeat center / contain;
					}
				}
			}
		}
	}
	#searchKeyword{
		padding: 4px 24px;
		border: 1px solid currentColor;
		border-radius: 24px;
		&:focus{
			outline: none;
			background: #e8dbc7;
		}
	}
	#searchButton{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		aspect-ratio: 1;
		width: 48px;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: white; stroke-linecap: round; stroke-width: 2px;"><path d="M11.41,11.41l5.59,5.59"/><circle cx="7" cy="7" r="6"/></svg>') no-repeat center / 18px;
		border-radius: 100%;
		font-size: 0;
	}
	@media (max-width: 991.98px) {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-gap: 8px;
		& details{
			grid-column: 1 / 3;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 24px;
			overflow: hidden;
		}
		& summary+div{
			border-top: 1px solid currentColor;
		}
	}
	@media (min-width: 992px) {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr auto;
		column-gap: 8px;
		&:has(details:nth-child(2)){
			grid-template-columns: 1fr 1fr 1fr auto;
		}
		&:has(details:nth-child(3)){
			grid-template-columns: 1fr 1fr 1fr 1fr auto;
		}
		& summary{
			border: 1px solid currentColor;
			border-radius: 24px;
		}
		& summary+div{
			position: absolute;
			top: calc(100% + 16px);
			left: 0;
			width: 100%;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 24px;
			z-index: 10;
		}
	}
}

#searchDate{
	.do &{
		opacity: 0;
		pointer-events: none;
	}
	& table{
		width: 100%;
		text-align: center;
	}
	& caption{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: baseline;
		padding: 16px 16px 8px 16px;
		background: #333;
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.05em;
		& span{
			font-size: 12px;
		}
	}
	& thead{
		display: grid;
		background: #333;
		color: #fff;
		font-weight: 700;
		& td{
			padding: 4px;
		}
	}
	& tbody{
		display: grid;
		border: 0 solid #333;
		border-width: 1px 0 0 1px;
		font-weight: 500;
		& td{
			padding: 8px 4px;
			border: 0 solid #333;
			border-width: 0 1px 1px 0;
			&:empty{
				background: #f6f6f4;
			}
			&:not(:empty){
				cursor: pointer;
			}
			&:not(:empty).check{
				background: var(--color-theme);
				color: #fff;
			}
		}
	}
	& tr{
		display: grid;
		grid-template-columns: repeat(7, 1fr);
	}
	.slide{
		display: grid;
		&.slick-initialized{
			grid-template-columns: auto 1fr auto;
			@media (max-width: 575.98px) {
				grid-template-columns: 0 1fr 0;
			}
		}
		&:not(.slick-initialized){
			&>*{
				grid-column: 1;
				grid-row: 1;
				&:nth-of-type(n+2){
					visibility: hidden;
				}
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1;
	}
	.slick-slide{
		margin: 0 8px;
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		align-self: center;
		position: relative;
		aspect-ratio: 1;
		width: clamp(40px, calc(64 / 1200 * 100vw), 64px);
		background: #736357;
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><polygon points="17 15 25 20 17 25 17 15"/></svg>') no-repeat center / contain;
		}
		&.slick-disabled{
			opacity: 0.4;
			pointer-events: none;
		}
		&.slick-prev{
			transform: translateX(-14px);
			z-index: 1;
			&:before{
				transform: scale(-1, 1);
			}
		}
		&.slick-next{
			justify-self: end;
			transform: translateX(14px);
		}
	}
}

#searchCurrent{
	& dl{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
		font-weight: 700;
	}
	& dt{
		@media (max-width: 575.98px) {
			width: 100%;
		}
	}
	& dd{
		display: contents;
	}
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		background: #808080;
	}
	& a,
	& button{
		display: grid;
		grid-template-columns: 1fr 10px;
		align-items: center;
		grid-gap: 8px;
		min-height: 32px;
		padding: 2px 1em;
		background: #808080;
		border-radius: 16px;
		color: #fff;
		font-size: 14px;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><rect x="-1.48" y="4.41" width="12.96" height="1.18" transform="translate(-2.07 5) rotate(-45)"/><rect x="4.41" y="-1.48" width="1.18" height="12.96" transform="translate(-2.07 5) rotate(-45)"/></svg>') no-repeat center / contain;
		}
	}
	& a{
		background: var(--color-theme);
	}
}

#result{
	display: grid;
	grid-row-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
}

#resultStatus{
	display: grid;
	justify-items: center;
	grid-gap: 16px clamp(24px, calc(40 / 1200 * 100vw), 40px);
	@media (min-width: 768px) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

#resultCount{
	display: flex;
	align-items: center;
	column-gap: 8px;
	font-weight: 700;
	font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
	& span{
		font-size: 1.5em;
		transform: translateY(-0.1em);
	}
}

#resultSet{
	& dl{
		display: grid;
		grid-gap: 8px;
		align-items: center;
	}
	& dt{
		grid-row: 1;
		font-weight: 700;
	}
	& dd{
		grid-row: 1;
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 2px 1em;
		border: 1px solid currentColor;
		border-radius: 16px;
		color: var(--color-theme);
		font-weight: 700;
		&.select{
			background: var(--color-theme);
			border-color: var(--color-theme);
			color: #fff;
		}
	}
}

#resultList{
	align-items: start;
	@media (min-width: 992px) {
		min-height: 350px;
	}
	@media (min-width: 1130px) {
		min-height: 120px;
	}
}

#resultMap{
	grid-column: 1 / 4;
	position: relative;
	display: grid;
	height: min(75vw, 560px);
	margin-top: 32px;
	&>*{
		grid-column: 1;
		grid-row: 1;
	}
	& p{
		align-self: center;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}
	& #gMap{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #f3f3f3;
	}
	& [LSC-LB="dummy"]{
		display: grid;
		align-content: center;
		grid-gap: 16px;
		justify-items: center;
		z-index: 1;
		&>img{
			width: 36px;
			height: auto;
		}
	}
}

#pagenation{
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	&:not(:has(ol)){
		margin-bottom: 0;
	}
}

.interviewList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	grid-gap: 40px clamp(24px, calc(32 / 1200 * 100vw), 32px);
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			margin-bottom: 8px;
			background: var(--dummy);
			border-radius: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
		& ul[data-type="tag"]{
			order: 1;
			margin-top: 8px;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			margin-bottom: 8px;
			& img{
				aspect-ratio: 3 / 2;
				border-radius: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			}
		}
	}
	& h3{
		font-weight: 700;
	}
	& h3+div{
		display: contents;
	}
	& p{
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
	}
	& ul{
		&[data-type="point"]{
			display: grid;
			grid-row-gap: 4px;
			& li{
				display: grid;
				grid-template-columns: auto 1fr;
				font-weight: 700;
				&:before{
					content: "\30FB";
				}
			}
		}
		&[data-type="tag"]{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
			& li{
				display: grid;
				align-items: center;
				min-height: 24px;
				padding: 0 1em;
				background: #736357;
				border-radius: 12px;
				color: #fff;
				font-weight: 700;
				font-size: 14px;
			}
		}
		&:not(:has(li)){
			display: none;
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		z-index: 1;
	}
	& figure{
		& img{
			object-fit: cover;
		}
	}
}

.articleList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(100% - 16px), 280px), 1fr));
	grid-gap: 40px clamp(24px, calc(32 / 1200 * 100vw), 32px);
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			margin-bottom: 8px;
			background: var(--dummy);
			border-radius: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
		& h3{
			order: 1;
		}
		& ul[data-type="attend"]{
			grid-column: 1;
			grid-row: 1;
			align-self: end;
			margin-bottom: 8px;
			z-index: 1;
		}
		& ul[data-type="tag"]{
			order: 1;
			margin-top: 8px;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			margin-bottom: 8px;
			& img{
				aspect-ratio: 3 / 2;
				border-radius: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			}
		}
	}
	& h3{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-height: calc(1.65em * 2);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		overflow: hidden;
	}
	& h3+div{
		display: contents;
	}
	& time{
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
	}
	& ul{
		&[data-type="attend"]{
			display: flex;
			flex-wrap: wrap;
			grid-row-gap: 8px;
			padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
			& li{
				display: grid;
				align-items: center;
				min-height: 32px;
				padding: 0 1em;
				background: #fff;
				border: 1px solid currentColor;
				border-radius: 16px;
				font-weight: 700;
				font-size: 14px;
			}
		}
		&[data-type="tag"]{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
			& li{
				display: grid;
				align-items: center;
				min-height: 24px;
				padding: 0 1em;
				background: #736357;
				border-radius: 12px;
				color: #fff;
				font-weight: 700;
				font-size: 14px;
				text-align: center;
			}
		}
		&:not(:has(li)){
			display: none;
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		& img{
			object-fit: cover;
		}
	}
}

.reportList{
	display: grid;
	grid-row-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	& section{
		position: relative;
		display: grid;
		grid-gap: 8px 24px;
		border: 2px solid currentColor;
		border-radius: 24px;
		overflow: hidden;
		@media (max-width: 575.98px) {
		}
		@media (min-width: 576px) {
			grid-template-columns: 216px 1fr;
			grid-template-rows: auto 1fr;
		}
	}
	& h3{
		font-weight: 700;
		@media (max-width: 575.98px) {
			padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		}
		@media (min-width: 576px) {
			grid-column: 2;
			margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		}
	}
	& h3+div{
		@media (max-width: 575.98px) {
			padding: 0 clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(16px, calc(24 / 1200 * 100vw), 24px);
		}
		@media (min-width: 576px) {
			grid-column: 2;
			margin-bottom: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		}
	}
	& h3+div+div{
		display: contents;
		& ul{
			grid-gap: 8px;
			padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
			background: #f5f3f0;
			@media (max-width: 575.98px) {
				display: flex;
				flex-wrap: wrap;
				margin-top: 8px;
			}
			@media (min-width: 576px) {
				display: grid;
				align-content: center;
				grid-column: 1;
				grid-row: 1 / 3;
			}
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 0 1em;
			background: #736357;
			border-radius: 16px;
			color: #fff;
			font-weight: 700;
			font-size: 14px;
			text-align: center;
		}
	}
	& p{
		font-size: 14px;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		z-index: 1;
	}
}