/* CSS Document */
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;800&display=swap');
/* Noto JP
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
*/

:root{
	--color: #000000;
	--color-rgb: 0, 0, 0;
	--color-theme: #7dcdf3;
	--color-theme-rgb: 125, 205, 243;
	--variable-color: var(--color-theme);
	--color-border: #e6e6e6;
	--font-size: 16px;
	--font: 'Noto Sans JP', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
	/*
	webフォント未使用セット
	--font: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
	*/
	--wrap-space: clamp(16px, 3.6vw, 24px);
	--wrap-fit: calc(100% - (var(--wrap-space) * 2));
	--wrap-max: 1140px;
	--wrap: min(var(--wrap-fit), var(--wrap-max));
	}
	@media (min-width: 1200px) {
		:root{
			--font-size: 18px;
			}
		}

html{
	scroll-behavior: smooth;
	scroll-padding-top: 56px;
	}

body{
	color: var(--color);
	font: 400 var(--font-size) var(--font);
	word-break: break-all;
	line-height: 1.65;
	}
	::selection{
		background: var(--color-theme);
		color: #fff;
		}
	::-moz-selection{
		background: var(--color-theme);
		color: #fff;
		}
	_::content, _:future, body:not(*:root) {
		/* Chromeのハック */
		/*フォント細いって言われたとき
		font-weight: 500;
		*/
		}
	_::-webkit-full-page-media, _:future, :root body{
		/* safariのハック */
		}
	@-moz-document url-prefix(){
		/* Firefoxのハック */
		.xxx{
			
			}
		}

a{
	color: inherit;
	}
	.done a{
		transition-property: color, text-decoration, background, background-color, background-size, border, border-color, box-shadow, filter, opacity;
		transition-duration: 0.2s;
		transition-timing-function: ease-out;
		}

main{
	grid-column: 1;
	grid-row: 1 / 3;
	padding-bottom: clamp(64px, 14.4vw, 96px);
	}
	@media (min-width: 992px) {
		main{
			display: grid;
			}
			main > *{
				grid-column: 1;
				}
		}
	main a{
		color: var(--color-theme);
		}
		main a:where(:hover){
			text-decoration: underline;
			}

article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	}
	article > *{
		grid-column: 2;
		}



:where(a, button):focus-visible{
	outline: var(--color-theme) auto 2px;
	outline-offset: 2px;
	}

:where(input,textarea,select){
	background-color: transparent;
	accent-color: var(--color-theme);
	caret-color: var(--color-theme);
	}
	:where(input,textarea,select):focus{
		outline: var(--color-theme) auto 2px;
		}

:is(input[type="checkbox"],input[type="radio"]):checked{
	background-color: var(--color-theme);
	}

#wrapper{
	display: grid;
	grid-template-areas: 'header';
	}
	#wrapper #header{
		grid-area: header;
		z-index: 110;
		}
	#wrapper #nav{
		z-index: 120;
		}
	#wrapper #navButton{
		grid-area: header;
		z-index: 130;
		}

#header{
	display: flex;
	justify-content: end;
	width: var(--wrap);
	margin: 0 auto;
	display: none;
	}

#siteName{
	
	position: relative;
	padding-top: 16px;
	}
	#siteName:before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 420px;
		height: 64px;
		background: #c8004c;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 600 80"><path d="M0,0c327.17,180,600,0,600,0H0Z"/></svg>') center top no-repeat;
		-webkit-mask-size: cover;
		transform: translateX(-50%);
		z-index: -1;
		}
	#siteName a{
		position: relative;
		display: block;
		aspect-ratio: 300 / 33;
		height: 24px;
		background: #fff;
		font-size: 0;
		-webkit-mask: url('/common/images/logoType.svg') center no-repeat;
		-webkit-mask-size: contain;
		}
	@media (min-width: 768px) {
		#siteName{
			padding-top: 24px;
			}
			#siteName:before{
				width: 600px;
				height: 80px;
				}
		}

#navButton{
	all: initial;
	position: sticky;
	top: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	grid-gap: 6px;
	width: 48px;
	aspect-ratio: 1;
	border: 1px solid currentColor;
	border-radius: 100%;
	color: var(--color-theme);
	overflow: hidden;
	pointer-events: all;
	cursor: pointer;
	transform: translate(8px, 8px);
	}
	#navButton:not(.fixed){
		color: #fff;
		}
	#navButton i{
		width: 24px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		animation-duration: 0.75s;
		animation-fill-mode: forwards;
		transition: transform 0.75s;
		}
	#navButton.on{
		color: #fff;
		}
		#navButton.on i{}
			#navButton.on i:nth-of-type(1){
				animation-name: navButton-bar01_on;
				}
			#navButton.on i:nth-of-type(2){
				animation-name: navButton-bar02_on;
				}
			#navButton.on i:nth-of-type(3){
				animation-name: navButton-bar03_on;
				}
	#navButton.off{}
		#navButton.off i{}
			#navButton.off i:nth-of-type(1){
				animation-name: navButton-bar01_off;
				}
			#navButton.off i:nth-of-type(2){
				animation-name: navButton-bar02_off;
				}
			#navButton.off i:nth-of-type(3){
				animation-name: navButton-bar03_off;
				}
	@media (min-width: 768px) {
		#navButton{
			width: 56px;
			transform: translate(16px, 16px);
			}
		}
	@media (min-width: 991px) {
		body:not(#hero) #navButton {
			display: none;
			}
		}
	@media (min-width: 1200px) {
		#navButton{
			width: 64px;
			}
		}
	@keyframes navButton-bar01_on{
		0% {
			transform: translateY(0);
			}
		50% {
			transform: translateY(8px) rotate(0);
			}
		100% {
			transform: translateY(8px) rotate(45deg);
			}
		}
	@keyframes navButton-bar01_off{
		0% {
			transform: translateY(8px) rotate(45deg);
			}
		50% {
			transform: translateY(8px) rotate(0);
			}
		100% {
			transform: translateY(0);
			}
		}
	@keyframes navButton-bar02_on{
		0% {
			transform: scaleX(1);
			}
		50% {
			transform: scaleX(1);
			}
		51% {
			transform: scaleX(0);
			}
		100% {
			transform: scaleX(0);
			}
		}
	@keyframes navButton-bar02_off{
		0% {
			transform: scaleX(0);
			}
		49% {
			transform: scaleX(0);
			}
		50% {
			transform: scaleX(1);
			}
		100% {
			transform: scaleX(1);
			}
		}
	@keyframes navButton-bar03_on{
		0% {
			transform: translateY(0);
			}
		50% {
			transform: translateY(-8px) rotate(0);
			}
		100% {
			transform: translateY(-8px) rotate(-45deg);
			}
		}
	@keyframes navButton-bar03_off{
		0% {
			transform: translateY(-8px) rotate(-45deg);
			}
		50% {
			transform: translateY(-8px) rotate(0);
			}
		100% {
			transform: translateY(0);
			}
		}

#nav{
	position: fixed;
	top: 0;
	right: 100%;
	display: grid;
	align-items: start;
	grid-template-rows: auto 1fr;
	grid-gap: clamp(24px, 4.8vw, 32px) 0;
	width: min(100vw, 320px);
	height: 100vh;
	padding: 80px 24px 56px 24px;
	background: #0073bf;
	color: #fff;
	overflow-y: auto;
	overscroll-behavior: none;
	transform: translateX(0);
	transition: transform 0.2s ease-out;
	}
	.nav #nav{
		transform: translateX(100%);
		}
		.nav #nav ul{
			opacity: 1;
			}
	#nav h2{
		display: none;
		}
	#nav ul{
		list-style: none;
		}
	@media (min-width: 768px) {
		#nav{
			padding-top: 96px;
			}
		}
	@media (min-width: 1200px) {
		#nav{
			padding-top: 104px;
			}
		}

#navGlobal{}
	#navGlobal ul{
		display: grid;
		grid-gap: 16px;
		}
	#navGlobal a{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 8px;
		font-weight: 700;
		}
		#navGlobal a:hover:before{
			transform: translateX(-4px);
			}
		#navGlobal a:before{
			content: "";
			width: 1em;
			height: 2px;
			margin-top: calc(0.75em + 1px);
			background: currentColor;
			border-radius: 1px;
			transition: all 0.2s ease-out;
			}
	@media (min-width: 1200px) {
		#navGlobal ul{
			grid-gap: 24px;
			}
		}

#navEntry{
	display: grid;
	grid-gap: 16px;
	}
	#navEntry a{
		display: grid;
		align-items: center;
		min-height: 72px;
		padding: 4px 16px;
		background: var(--color-theme);
		border-radius: 8px;
		border: none;
		color: #fff;
		font-size: clamp(16px, 2.7vw, 18px);
		font-weight: 700;
		text-decoration: none;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: break-word;
		letter-spacing: 0.05em;
		}
		#navEntry a:hover{
			background: #ef6836;
			}
	#navEntry p{
		font-size: 12px;
		}

#pagePath{
	margin: 16px 0;
	}
	#pagePath ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
		width: var(--wrap);
		margin: auto;
		}
	#pagePath li{
		line-height: 1.4;
		}
		#pagePath li:last-child{
			font-weight: bold;
			}
	#pagePath li+li{
		display: grid;
		align-items: center;
		grid-template-columns: 16px auto;
		grid-gap: 8px;
		}
		#pagePath li+li:before{
			content: "";
			width: 16px;
			height: 16px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.163 4.516c0.418 0.408 4.502 4.695 4.502 4.695 0.223 0.219 0.335 0.504 0.335 0.789s-0.112 0.57-0.335 0.787c0 0-4.084 4.289-4.502 4.695-0.418 0.408-1.17 0.436-1.615 0-0.446-0.434-0.481-1.041 0-1.574l3.747-3.908-3.747-3.908c-0.481-0.533-0.446-1.141 0-1.576s1.197-0.409 1.615 0z" /></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			opacity: 0.5;
			}

#footer{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(16px, 3.6vw, 24px) 0;
	padding: clamp(24px, 4.8vw, 32px) 0;
	background: var(--color-theme);
	color: #fff;
	}
	#footer > *{
		grid-column: 2;
		}
	#footer > p{
		text-align: center;
		}

#fAddress{
	justify-self: center;
	}
	#fAddress dl{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 8px 0;
		}
	#fAddress dt{
		display: grid;
		grid-template-columns: 1fr auto;
		}
		#fAddress dt:after{
			content: ":";
			margin: 0 8px;
			}

#copyright{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 4px 24px;
	}
	#copyright p{
		margin: 0;
		padding: 0;
		font-size: clamp(12px, 2.1vw, 14px);
		text-align: center;
		}
	@media (max-width: 575.98px) {
		#copyright{
			flex-direction: column;
			}
		}

#pageTop{
	position: sticky;
	bottom: 0;
	font-size: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease-out 1s;
	z-index: 100;
	}
	.done:not(.scrollTop) #pageTop{
		opacity: 1;
		}
		#pageTop:before{
			content: "";
			position: absolute;
			right: 16px;
			bottom: 16px;
			aspect-ratio: 1;
			width: 48px;
			background: #0073bf url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 13"><polyline points="23 12 12 1 1 12" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') center no-repeat;
			background-size: 24px auto;
			border-radius: 100%;
			}
	@media (min-width: 768px) {
		#pageTop:before{
			right: 24px;
			bottom: 24px;
			width: 56px;
			}
		}
	@media (min-width: 1200px) {
		#pageTop:before{
			right: 32px;
			bottom: 32px;
			width: 64px;
			}
		}

#pagenation{
	margin: 16px 0;
	overflow: hidden;
	}
	#pagenation :where(ul,ol){
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
		width: var(--wrap);
		margin: auto;
		list-style: none;
		}
	#pagenation a{
		display: grid;
		text-decoration: none;
		}
		#pagenation a:not([rel]){
			height: 2.6em;
			width: 2.6em;
			place-items: center;
			background: var(--color-theme);
			color: #fff;
			}
		#pagenation a[rel]{
			align-items: center;
			grid-gap: 4px;
			color: inherit;
			}
			#pagenation a[rel]:before{
				aspect-ratio: 1;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.163 4.516c0.418 0.408 4.502 4.695 4.502 4.695 0.223 0.219 0.335 0.504 0.335 0.789s-0.112 0.57-0.335 0.787c0 0-4.084 4.289-4.502 4.695-0.418 0.408-1.17 0.436-1.615 0-0.446-0.434-0.481-1.041 0-1.574l3.747-3.908-3.747-3.908c-0.481-0.533-0.446-1.141 0-1.576s1.197-0.409 1.615 0z" /></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}
		#pagenation a[rel="prev"]{
			grid-template-columns: 16px auto;
			}
			#pagenation a[rel="prev"]:before{
				content: "";
				transform: scale(-1, 1);
				}
		#pagenation a[rel="next"]{
			grid-template-columns: auto 16px;
			}
			#pagenation a[rel="next"]:before{
				content: "";
				order: 1;
				}
		#pagenation a.lsc-current-page{
			background: #ccc;
			color: #fff;
			pointer-events: none;
			}
	#pagenation ul{}
		#pagenation ul li{
			display: flex;
			}
		#pagenation ul li+li{}
			#pagenation ul li+li:before{
				content: "｜";
				margin-right: 8px;
				}



#program{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(24px, 4.8vw, 32px) 0;
	margin-top: clamp(64px, 14.4vw, 96px);
	}
	#program > *{
		grid-column: 2;
		}
	#program h2{
		justify-self: center;
		}
	#program h2+div{
		justify-self: center;
		}
	#program h2+div a{
		display: inline-block;
		margin: 0 4px;
		padding: 0 8px;
		border-radius: 24px;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		text-align: center;
		text-indent: 0;
		}
		#program h2+div a.full{
			background: #eee;
			color: #999;
			}
	@media (min-width: 1200px) {
		#program{
			grid-row-gap: 40px;
			margin-top: 128px;
			}
		}

#program section{
	display: grid;
	grid-gap: clamp(16px, 3.6vw, 24px);
	scroll-margin-top: clamp(24px, 4.8vw, 32px);
	}
	#program section h3{
		margin-bottom: 8px;
		}
	#program section div:has(h4){
		background: #fff;
		border-radius: clamp(12px, 2.4vw, 16px);
		/*filter: drop-shadow(0 0 4px rgba(var(--color-rgb), 0.1));*/
		overflow: hidden;
		box-shadow: 0 0 8px rgba(var(--color-rgb), 0.125); 
		}
	#program section h4{
		display: grid;
		grid-template-columns: 1fr 16px;
		align-items: center;
		min-height: clamp(56px, 9.6vw, 64px);
		padding: 16px clamp(16px, 3.6vw, 24px);
		font-weight: 700;
		font-size: 20px;
		cursor: pointer;
		}
		#program section h4:after{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="1 4 8 11 15 4" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transform: translateX(8px);
			}
			#program section h4.on:after{
				transform: translateX(8px) scale(1, -1);
				}
	#program section h4+div{
		display: block;
		padding: clamp(16px, 3.6vw, 24px);
		border-top: 1px solid #f2f2f2;
		}
	#program section p{
		margin-bottom: 16px;
		padding-left: 1em;
		color: #ff6666;
		font-weight: 700;
		text-indent: -1em;
		}
	#program section ul{
		display: grid;
		grid-gap: 8px;
		}
	#program section li{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 8px;
		}
		#program section li:before{
			content: attr(data-number);
			display: grid;
			align-items: center;
			width: 36px;
			height: 36px;
			padding: 0 4px 2px 4px;
			border-radius: 4px;
			font-weight: 700;
			color: #fff;
			text-align: center;
			line-height: 1;
			transform: translateY(-0.1em);
			}
	#program section a{
		color: inherit;
		text-decoration: none;
		}
		#program section a:hover{
			text-decoration: underline;
			}

/*#programEtc{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: clamp(64px, 14.4vw, 96px);
	}
	#programEtc > *{
		grid-column: 2;
		}
	#programEtc h2+div{
		justify-self: center;
		display: grid;
		justify-items: center;
		grid-gap: clamp(16px, 3.6vw, 24px);
		margin-top: clamp(32px, 6vw, 40px);
		}
	#programEtc .note{
		padding: 8px 16px;
		background: #ffeeee;
		border-radius: 8px;
		color: #ff6666;
		font-weight: 700;
		}
	#programEtc .programList{
		margin-top: clamp(32px, 7.2vw, 48px);
		}
		#programEtc .programList h3{}
			#programEtc .programList h3:before{
				content: none;
				}
		#programEtc .programList figure{
			display: none;
			}
	#programEtc div:has(.button){
		justify-self: center;
		width: min(100%, 480px);
		display: grid;
		grid-gap: 16px;
		margin-top: clamp(32px, 6vw, 40px);
		p{
			font-size: 14px;
			}
		}
	@media (min-width: 1200px) {
		#programEtc{
			margin-top: 128px;
			}
		#programEtc div:has(.button){
			margin-top: 48px;
			}
		}*/

#menu{
	background: #0073bf;
	color: #fff;
	}
	#menu ul{
		display: flex;
		justify-content: center;
		grid-gap: 24px;
		width: var(--wrap);
		margin: 16px auto;
		}
	#menu li{
		display: contents;
		}
		#menu li:nth-child(n+2):before{
			content: "|";
			}
	#menu a{
		display: block;
		color: inherit;
		font-weight: 700;
		text-decoration: none;
		font-size: min(1.25vw, 0.95em);
		}
		#menu a:hover{
			opacity: 0.8;
			}
	@media (max-width: 991.98px) {
		#menu{
			display: none;
			}
		}
	@media (min-width: 992px) {
		#menu {
			grid-row: 1;
			}
		body:has(#hero) #menu {
			grid-row: 2;
			}
		}

.subject{
	display: grid;
	gap: 4px;
	font-size: clamp(24px, 4.8vw, 32px);
	font-weight: 900;
	text-align: center;
	letter-spacing: 0.05em;
	}
	.subject:after{
		content: "";
		justify-self: center;
		width: 48px;
		height: 4px;
		background: #0073bf;
		}
	/*終了*/
	.subject small{
		color: #ff6666;
		transform: translateY(-8px);
		}
	@media (min-width: 1200px) {
		.subject{
			font-size: 40px;
			letter-spacing: 0.1em;
			}
			.subject:after{
				width: 64px;
				}
		}

.title{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	font-size: clamp(20px, 3.6vw, 24px);
	font-weight: 700;
	letter-spacing: 0.05em;
	}
	.title:before{
		content: "";
		width: 6px;
		height: 1em;
		background: #0073bf;
		transform: translateY(0.4em);
		}
	@media (min-width: 992px) {
		.title{
			font-size: 28px;
			}
		}

.button{
	display: grid;
	align-items: center;
	min-height: 64px;
	padding: 4px 32px;
	background: var(--color-theme);
	border-radius: 8px;
	border: none;
	color: #fff;
	font-size: clamp(16px, 2.7vw, 18px);
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0.05em;
	}
	.button:hover{
		background: #ef6836;
		}
	@media (max-width: 575.98px) {
		.button{
			max-width: 272px;
			min-height: 72px;
			}
		}
	@media (min-width: 576px) {
		.button{
			font-size: 20px;
			}
		}

.note{}
	.note li{
		padding-left: 1em;
		text-indent: -1em;
		}

.programDetail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: clamp(48px, 9.6vw, 64px);
	}
	.programDetail > *{
		grid-column: 2;
		}
	.programDetail h2+div{
		order: 1;
		justify-self: center;
		justify-items: center;
		width: min(100%, 480px);
		display: grid;
		grid-gap: 16px;
		margin-top: clamp(32px, 6vw, 40px);
		p{
			font-size: 14px;
			}
		}
	.programDetail .programList{
		margin-top: clamp(16px, 3.6vw, 24px);
		}
	@media (min-width: 1200px) {
		.programDetail{
			margin-top: 80px;
			}
		.programDetail h2+div{
			margin-top: 48px;
			}
		}

	.experienceList section>div:nth-of-type(1) li:before,
	#hall h2:before,
	#hall h3:before,
	#hall figcaption dl{
		background: #e75282;
		}
	.experienceList section>div:nth-of-type(2) li:before,
	#site h2:before,
	#site h3:before,
	#site figcaption dl{
		background: #008ad5;
		}

	.worksList section:nth-of-type(1) li:before,
	#shops h2:before,
	#shops h3:before,
	#shops figcaption dl{
		background: #eb6b00;
		}
	#city h2:before,
	#city h3:before,
	#city figcaption dl{
		background: #664684;
		}
	.worksList section:nth-of-type(2) li:before,
	#park h2:before,
	#park h3:before,
	#park figcaption dl{
		background: #5c8150;
		}
	.worksList section:nth-of-type(3) li:before,
	#Parking h2:before,
	#Parking h3:before,
	#Parking figcaption dl{
		background: #00a85e;
		}

.programList{
	display: grid;
	grid-gap: clamp(56px, 9.6vw, 64px) 24px;
	}
	.programList section{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 16px;
		scroll-margin-top: clamp(24px, 4.8vw, 32px);
		}
		.programList section:not(:has(figure)):before{
			content: "";
			order: -1;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			background-color: #999;
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.8)"><rect width="100" height="100" /></svg>'), url("../common/images/logoType.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover, 75%;
			border-radius: 8px;
			}
	.programList h3{
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.05em;
		}
		.programList h3:before{
			content: attr(data-number);
			position: absolute;
			top: 0;
			left: 0;
			display: grid;
			align-items: center;
			min-width: 48px;
			height: 48px;
			padding: 0 8px;
			background: #0073bf;
			border-radius: 8px 0 8px 0;
			color: #fff;
			text-align: center;
			line-height: 1;
			}
	.programList h4{
		margin-top: -8px;
		font-weight: 700;
		}
		.programList h4:empty{
			display: none;
			}
	.programList h5{
		margin-top: -8px;
		font-weight: 700;
		}
		.programList h5:empty{
			display: none;
			}
	.programList p{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		max-height: calc(1.75em * 5);
		overflow: hidden;
		}
	.programList dl{
		display: grid;
		grid-template-columns: auto 1fr;
		border-bottom: 1px solid var(--color-border);
		letter-spacing: 0.05em;
		}
		.programList dl :where(dt, dd){
			padding: 16px 0;
			border-top: 1px solid var(--color-border);
			}
	.programList dt{
		grid-column: 1;
		display: grid;
		grid-gap: 8px;
		padding-right: 16px;
		font-weight: 700;
		}
	.programList dd{
		grid-column: 2;
		}
	.programList dd+dd{
		border: none;
		padding-top: 0;
		}
	.programList dd:has(ul){
		font-weight: 700;
		}
	.programList ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
		margin-top: 8px;
		}
	.programList li{
		display: contents;
		}
		.programList li:not(:has(a)) {
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 0 16px;
			}
	.programList a {
		text-decoration: underline;
		color: initial;
		}
	.programList li a{
		display: grid;
		align-items: center;
		min-height: 32px;
		border-radius: 16px;
		padding: 4px 16px;
		background: var(--color-theme);
		color: #fff;
		text-decoration: none;
		cursor: pointer;
		}
		.programList li a:hover{
			background: #ef6836;
			}
		.programList li a.full{
			background: #eee;
			color: #999;
			}
		.programList dl dd:last-child a{
			background: none;
			color: initial;
			text-decoration: underline;
			padding: 0;
			}
	.programList figure{
		order: -2;
		position: relative;
		}
	.programList img{
		aspect-ratio: 1 / 0.667;
		object-fit: cover;
		border-radius: 8px;
		}
		.programList img[src="[url]"]{
			display: block;
			background: #ccc;
			}
	.programList figcaption {
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin: 10px;
		font-weight: 700;
		}
		.programList figcaption dl {
			color: #fff;
			background: #000;
			border-radius: 8px;
			padding: 8px 16px;
			}
		.programList figcaption dt,
		.programList figcaption dd{
			padding: 0;
			border: none;
			}
	@media (min-width: 576px) {
		.programList{
			grid-template-columns: repeat(2, 1fr);
			}
		}
	@media (min-width: 768px) {
		.programList{
			column-gap: 32px;
			}
		.programList h3{
			font-size: 20px;
			}
		}
	@media (min-width: 992px) {
		.programList{
			column-gap: 40px;
			}
		}
	@media (min-width: 1200px) {
		.programList{
			grid-gap: 48px;
			}
		.programList h3{
			font-size: 24px;
			}
			.programList h3:before{
				min-width: 56px;
				height: 56px;
				}
		}

.notes{
	justify-self: center;
	color: #ff6666;
	font-weight: 700;
	}
	.notes li{
		padding-left: 1em;
		text-indent: -1em;
		}