/* CSS Document */

#main{
	background: #fff000;
	padding-bottom: clamp(64px, calc(80 / 768 * 100dvw), 80px);
	overflow: hidden;
	#plan{
		margin-top: clamp(40px, calc(56 / 768 * 100dvw), 56px);
	}
}

#detail{
	& h1{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		padding: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		background: linear-gradient(black, transparent);
		color: white;
		font-weight: 700;
		font-size: clamp(24px, calc(48 / 768 * 100dvw), 48px);
		letter-spacing: 0.03em;
		&:before{
			content: "";
			aspect-ratio: 1;
			align-self: start;
			width: clamp(96px, calc(160 / 768 * 100dvw), 160px);
			background: var(--logo) no-repeat center / contain;
		}
		&::after{
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			backdrop-filter: blur(8px);
			pointer-events: none;
			-webkit-mask: linear-gradient(black, transparent);
			z-index: -1;
		}
	}
	& hgroup{
		display: grid;
		padding: clamp(16px, calc(20 / 768 * 100dvw), 20px) var(--wrap-space);
		background: white;
		& h2{
			font-weight: 700;
			font-size: clamp(24px, calc(40 / 768 * 100dvw), 40px);
			line-height: 1.16;
			word-break: keep-all;
			overflow-wrap: anywhere;
		}
		& p{
			display: flex;
			flex-wrap: wrap;
			place-content: center;
			align-items: baseline;
			aspect-ratio: 1;
			width: clamp(64px, calc(80 / 768 * 100dvw), 80px);
			background: #fbc600;
			border-radius: 100%;
			font-weight: 700;
			font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			line-height: 1;
			text-align: center;
			text-wrap: balance;
			& span{
				font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
			}
		}
		&{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			& p{
				order: -1;
			}
		}
	}
	#photo{
		& ul:has(img){
			display: grid;
			& li:has(img){
				grid-column: 1;
				grid-row: 2;
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		& li:has(img){
			&:has(img[src="[url]"]){
				background: silver;
			}
			& img{
				height: min(76.8dvh, 768px);
				object-fit: cover;
			}
		}
		.splide__pagination{
			all: unset;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 8px clamp(16px, calc(24 / 768 * 100dvw), 24px);
			& li{
				display: contents;
			}
			& button{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				aspect-ratio: 1;
				width: 8px;
				background: #ffffff;
				border-radius: 100%;
				&.is-active{
					background: #fff000;
				}
				&:focus-visible{
					outline: var(--focus);
				}
			}
		}
		&{
			.splide{
				position: relative;
				.splide__pagination{
					position: absolute;
					bottom: clamp(24px, calc(40 / 768 * 100dvw), 40px);
					left: 50%;
					width: var(--wrap);
					transform: translateX(-50%);
				}
			}
		}
	}
	#text{
		font-weight: 700;
		font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		line-height: 2;
		text-align: center;
		text-wrap: balance;
	}
	&{
		display: grid;
		& h1,
		#photo{
			grid-column: 1;
			grid-row: 1;
		}
		& h1{
			align-self: start;
			z-index: 1;
		}
		& article{
			display: contents;
		}
		#text{
			justify-self: center;
			width: var(--wrap);
			margin-top: clamp(40px, calc(56 / 768 * 100dvw), 56px);
		}
	}
}

#plan{
	& h1{
		font-weight: 700;
		font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		line-height: 1.65;
		text-align: center;
		text-wrap: balance;
		&:before{
			content: "";
			border-top: 1px solid currentColor;
		}
		&:after{
			content: "";
			height: 20px;
			background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJwYXJ0czEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQwIDIwIj4gPHBvbHlnb24gcG9pbnRzPSIyMCAyMCA0MCAwIDAgMCAyMCAyMCIgc3R5bGU9ImZpbGw6ICMyMzE4MTU7Ii8+PC9zdmc+") no-repeat center / contain;
			border-top: 1px solid currentColor;
		}
		&{
			display: grid;
			grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		}
	}
	#index{
		--border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		& h3{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			padding: 4px 1em;
			min-height: 48px;
			background: var(--color);
			border-radius: var(--border-radius) var(--border-radius) 0 0;
			color: white;
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			text-align: center;
			text-wrap: balance;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: clamp(16px, calc(20 / 768 * 100dvw), 20px);
				background: currentColor;
				-webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJwYXJ0czEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDE2Ij4gPGc+IDxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTMiIGhlaWdodD0iMiIgcng9IjEiIHJ5PSIxIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4gPHJlY3QgeD0iNyIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjIiIHJ4PSIxIiByeT0iMSIgc3R5bGU9ImZpbGw6ICNmZmY7Ii8+IDxyZWN0IHg9IjciIHk9IjciIHdpZHRoPSIxMyIgaGVpZ2h0PSIyIiByeD0iMSIgcnk9IjEiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPiA8L2c+IDxnPiA8cmVjdCB5PSIxNCIgd2lkdGg9IjQiIGhlaWdodD0iMiIgcng9IjEiIHJ5PSIxIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4gPHJlY3QgeT0iMCIgd2lkdGg9IjQiIGhlaWdodD0iMiIgcng9IjEiIHJ5PSIxIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4gPHJlY3QgeT0iNyIgd2lkdGg9IjQiIGhlaWdodD0iMiIgcng9IjEiIHJ5PSIxIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4gPC9nPjwvc3ZnPg==") no-repeat center / contain;
			}
		}
		& details{
			padding: clamp(16px, calc(24 / 768 * 100dvw), 24px) clamp(24px, calc(40 / 768 * 100dvw), 40px);
			background: white;
			border-radius: 0 0 var(--border-radius) var(--border-radius);
			&::details-content{
				display: contents;
			}
			& summary{
				display: grid;
				grid-template-columns: auto auto;
				justify-content: center;
				align-items: center;
				column-gap: 8px;
				min-height: 48px;
				border-top: 1px solid currentColor;
				font-weight: 700;
				font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
				text-align: center;
				text-wrap: balance;
				&: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 14 14"><rect x="6" width="2" height="14"/><rect x="6" width="2" height="14" transform="translate(0 14) rotate(-90)"/></svg>') no-repeat center / contain;
				}
				[open] &:after{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><rect x="6" width="2" height="14" transform="translate(0 14) rotate(-90)"/></svg>');
				}
			}
			& ul{
				display: grid;
				grid-row-gap: 16px;
				& li{
					display: contents;
					& a{
						counter-increment: count;
						display: grid;
						grid-template-columns: auto 1fr auto;
						align-items: center;
						column-gap: 0.75em;
						font-weight: 700;
						font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
						&:before{
							content: counter(count);
							display: grid;
							align-items: center;
							aspect-ratio: 1;
							min-width: clamp(24px, calc(32 / 768 * 100dvw), 32px);
							background: #fbc600;
							border-radius: 50%;
							font-weight: 700;
							font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
							line-height: 1;
							text-align: center;
							text-wrap: balance;
						}
						&:after{
							content: "";
							aspect-ratio: 1;
							width: clamp(16px, calc(18 / 768 * 100dvw), 18px);
							background: currentColor;
							-webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJwYXJ0czEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE3LjY0IDE1Ij4gPHBvbHlsaW5lIHBvaW50cz0iOS43MiAxIDE2LjIyIDcuNSA5LjcyIDE0IiBzdHlsZT0iZmlsbDogbm9uZTsgc3Ryb2tlOiAjMjMxODE1OyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgc3Ryb2tlLXdpZHRoOiAycHg7Ii8+IDxsaW5lIHgxPSIxIiB5MT0iNy41IiB4Mj0iMTYiIHkyPSI3LjUiIHN0eWxlPSJmaWxsOiBub25lOyBzdHJva2U6ICMyMzE4MTU7IHN0cm9rZS1saW5lY2FwOiByb3VuZDsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyBzdHJva2Utd2lkdGg6IDJweDsiLz48L3N2Zz4=") no-repeat center / contain;
						}
					}
				}
			}
			&{
				display: grid;
				& summary{
					order: 1;
				}
				&:has(li:nth-child(6)){
					padding-bottom: 0;
					& summary{
						margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
					}
				}
				&:not(:has(li:nth-child(6))){
					& summary{
						display: none;
					}
				}
				&:not([open]){
					& li:nth-child(n+6){
						display: none;
					}
				}
			}
		}
	}
	#list{
		display: grid;
		grid-row-gap: clamp(96px, calc(144 / 768 * 100dvw), 144px);
		& article{
			& h2{
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				column-gap: 16px;
				font-weight: 700;
				font-size: clamp(20px, calc(32 / 768 * 100dvw), 32px);
				&:before,
				&:after{
					content: "";
					grid-column: 1;
					grid-row: 1;
					align-self: start;
					aspect-ratio: 1;
					min-width: clamp(48px, calc(64 / 768 * 100dvw), 64px);
				}
				&:before{
					background: #fbc600;
					border-radius: 50%;
				}
				&:after{
					background: currentColor;
					-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+IDxwYXRoIGQ9Ik00OCwyMy4zM3YtNS4zM0gxNnY1LjMzaDR2MjUuMzNoLTR2MS4zM2gzMnYtMS4zM2gtNHYtMjUuMzNoNFpNMzAuNjcsMjMuMzNoMi42N3Y0aC0yLjY3di00Wk0zMC42NywzMS4zM2gyLjY3djRoLTIuNjd2LTRaTTI0LDIzLjMzaDIuNjd2NGgtMi42N3YtNFpNMjQsMzEuMzNoMi42N3Y0aC0yLjY3di00Wk0zMC42Nyw0OC42N2gtNHYtNi42N2g0djYuNjdaTTM3LjMzLDQ4LjY3aC00di02LjY3aDR2Ni42N1pNNDAsNDAuNjdoLTE2di0xLjMzaDE2djEuMzNaTTQwLDM1LjMzaC0yLjY3di00aDIuNjd2NFpNNDAsMjcuMzNoLTIuNjd2LTRoMi42N3Y0WiIgc3R5bGU9ImZpbGw6ICMyMzE4MTU7Ii8+PC9zdmc+");
				}
			}
		}
		&{
			display: grid;
			.photo{
				margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			}
			.data{
				margin-top: clamp(80px, calc(104 / 768 * 100dvw), 104px);
			}
			.link{
				margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
			}
		}
	}
	&{
		display: grid;
		grid-template-columns: min(var(--wrap-fit), 960px);
		justify-content: center;
		#index{
			margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		}
		#list{
			margin-top:  clamp(64px, calc(80 / 768 * 100dvw), 80px);
		}
	}
}

.photo{
	& ul{
		display: contents;
	}
	& li{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			&[src="[url]"]{
				background: silver;
			}
		}
	}
	.photoSlideNav{
		--border-radius: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		.splide__arrows{
			position: relative;
			& button{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
			}
			.splide__arrow{
				position: absolute;
				top: 50%;
				aspect-ratio: 1;
				width: clamp(40px, calc(56 / 768 * 100dvw), 56px);
				background: currentColor;
				border-radius: 50%;
				border: 4px solid #fff000;
				font-size: 0;
				z-index: 1;
				&:focus-visible{
					outline: var(--focus);
					outline-offset: 1px;
				}
				&:before{
					content: "";
					position: absolute;
					top: 4px;
					left: 4px;
					width: calc(100% - 8px);
					height: calc(100% - 8px);
					background: white;
					-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwb2x5Z29uIHBvaW50cz0iMTguMzggMzMgMjkuNjIgMjQgMTguMzggMTUgMjUuMTkgMjQuMDQgMTguMzggMzMiLz48L3N2Zz4=") no-repeat center / contain;
				}
				&.splide__arrow--prev{
					left: 0;
					transform: translate(-50%, -50%);
					&:before{
						transform: scale(-1, 1);
					}
				}
				&.splide__arrow--next{
					right: 0;
					transform: translate(50%, -50%);
				}
			}
		}
		.splide__list{
			&:not(:has(.splide__slide--clone)){
				justify-content: center;
				transform: translateX(8px)!important;
			}
		}
		.splide__slide{
			&:focus-visible{
				outline: var(--focus);
			}
		}
		.is-active{
			position: relative;
			border: none !important;
			border-radius: var(--border-radius);
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border: clamp(8px, calc(12 / 768 * 100dvw), 12px) solid #fff000;
				border-radius: var(--border-radius);
				outline: clamp(3px, calc(4 / 768 * 100dvw), 4px) solid currentColor;
				outline-offset: -4px;
			}
			&:focus-visible:before{
				outline-color: inherit;
			}
			& img{
				border-radius: var(--border-radius);
			}
		}
	}
	&{
		display: grid;
		grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		.photoSlide{
			display: contents;
		}
		.photoSlideNav{
			display: grid;
			.splide__arrows,
			.splide__track{
				grid-column: 1;
				grid-row: 1;
			}
		}
	}
}

.data{
	border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
	overflow: hidden;
	--padding: clamp(16px, calc(32 / 1366 * 100dvw), 32px);
	& h3{
		display: grid;
		padding: var(--padding);
		background: var(--color);
		color: white;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		text-wrap: balance;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	& h3+div{
		background: white;
		padding: var(--padding);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		& p+p{
			margin-top: 1em;
		}
	}
	&{
		display: grid;
		@media (min-width: 768px) {
			grid-template-columns: clamp(240px, calc(296 / 1366 * 100dvw), 296px) 1fr;
			& section{
				grid-column: 1 / 3;
				display: grid;
				grid-template-columns: subgrid;
				&:nth-of-type(n+2){
					& h3{
						border-top: 1px solid #8c7f7b;
					}
					& h3+div{
						border-top: 1px solid #231815;
					}
				}
			}
		}
	}
}

.link{
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(24px, calc(56 / 1366 * 100dvw), 56px);
		&:has(li:nth-child(4):last-child){
			max-width: 640px;
			margin-inline: auto;
		}
	}
	& li{
		display: contents;
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 8px;
			width: min(100%, 280px);
			min-height: clamp(64px, calc(80 / 768 * 100dvw), 80px);
			padding: 0.25em 1em;
			background: white;
			border: 4px solid currentColor;
			border-radius: 16px;
			font-weight: 700;
			font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 1em;
				background: currentColor;
				-webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij4gPHBhdGggZD0iTTE4LDE4VjBIMHYxOGgxOFpNMywzaDEydjEySDNWM1pNMjEsNnYxNUg2djNoMThWNmgtM1oiLz48L3N2Zz4=") no-repeat center / contain;
			}
			&:hover,
			&:focus-visible{
				background: var(--color);
				border-color: transparent;
				color: white;
			}
		}
	}
}