/* CSS Document */

#detail{
	margin-bottom: clamp(72px, calc(96 / 1200 * 100vw), 96px);
}

#detailHeader{
	display: grid;
	//grid-template-columns: 1fr min(var(--wrap), 1000px) 1fr;
	grid-template-columns: 1fr var(--wrap) 1fr;
	& h2{
		grid-column: 2;
		margin-top: clamp(16px, calc(48 / 1200 * 100vw), 48px);
		color: var(--color-theme);
		font: 700 clamp(40px, calc(49 / 768 * 100vw), 49px) var(--font-min);
		&:empty{
			display: none;
		}
	}
	#detailInfo{
		grid-column: 2;
		margin-top: clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	#detailLead{
		grid-column: 2;
		justify-self: center;
		width: min(100%, 900px);
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	}
	#detailText{
		grid-column: 2;
		justify-self: center;
		//width: min(100%, 900px);
		margin-top: 16px;
	}
	#detailPhoto{
		grid-column: 1 / 4;
		grid-row: 1;
	}
}

#detailInfo{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 8px 40px;
	color: #484848;
	font-weight: 600;
	font-size: 14px;
	& i{
		all: unset;
		box-sizing: border-box;
	}
	@media (min-width: 992px) {
		column-gap: 8px;
		font-weight: 800;
		font-family: 'avenir-lt-pro', var(--font);
		& i{
			display: grid;
			grid-template-columns: 16px auto;
			align-items: center;
			column-gap: 4px;
			&:before{
				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 16 16"><path d="M14.5,8s-2,4-6.5,4S1.5,8,1.5,8c0,0,2-4,6.5-4s6.5,4,6.5,4Z" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"/><path d="M8,5c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3c0,0,0,0,0,0,0-1.66-1.34-3-3-3ZM8,9.39c-.77.06-1.44-.52-1.49-1.29s.52-1.44,1.29-1.49c.07,0,.13,0,.2,0,.15,0,.29.03.43.08l-.2.6c-.05.15-.01.32.09.44.1.12.26.18.42.15l.62-.11c0,.08,0,.16,0,.25,0,.75-.61,1.37-1.37,1.38Z"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#detailLead{
	font-size: 26px;
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0.06em;
	@media (max-width: 991.98px) {
		color: var(--color-theme);
	}
}

#detailText{
	font-weight: 300;
	font-size: clamp(16px, calc(18 / 1200 * 100vw), 18px);
	letter-spacing: 0.06em;
}

#detailPhoto{
	& img{
		width: 100%;
		height: clamp(165px, calc(630 / 1200 * 100vw), 630px);
		object-fit: cover;
	}
}

#detailTable{
	display: grid;
	grid-template-columns: clamp(270px, calc(636 / 992 * 100vw), 636px);
	justify-content: center;
	width: min(var(--wrap-fit), 900px);
	margin: clamp(56px, calc(72 / 1200 * 100vw), 72px) auto 0 auto;
	padding-bottom: clamp(40px, calc(48 / 1200 * 100vw), 48px);
	border: 1px solid #707070;
	& h3{
		margin-top: clamp(32px, calc(40 / 1200 * 100vw), 40px);
		padding-bottom: 16px;
		border-bottom: 1px solid #707070;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-align: center;
	}
	& h3+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
	& ul{
		display: grid;
		grid-gap: 24px;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 16px;
		color: inherit;
		font-weight: 600;
		font-style: italic;
		text-decoration: none;
		&:before{
			content: "";
			align-self: baseline;
			aspect-ratio: 1;
			width: 24px;
			background: #41583F url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: white;"><polyline points="1 6 11 6 7 4"/></svg>') no-repeat center / 10px;
			border-radius: 100%;
		}
	}
}

#detailArticle{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	.catch,
	.lead,
	.text,
	.link,
	.links,
	.document
	.column,
	.movie{
		//width: min(100%, 1000px);
		margin-inline: auto;
	}
	.comment{
		//width: min(100%, 1000px);
	}
}

#detailShare{
	margin-top: clamp(72px, calc(96 / 1200 * 100vw), 96px);
	& h3{
		display: none;
	}
	& ul{
		display: flex;
		justify-content: center;
		grid-gap: 16px;
	}
	& a{
		position: relative;
		display: block;
		aspect-ratio: 1;
		width: 28px;
		background: var(--color-theme);
		font-size: 0;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"></svg>') no-repeat center / contain;
		&[href*="facebook.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M28,14C28,6.26,21.73,0,14,0,6.26,0,0,6.27,0,14c0,6.43,4.38,12.03,10.62,13.58v-9.31h-2.88v-4.27h2.89v-1.85c0-4.76,2.16-6.97,6.83-6.97,1.02.01,2.04.13,3.04.35v3.88c-.33-.03-.9-.05-1.62-.05-2.3,0-3.18.87-3.18,3.13v1.51h4.57l-.79,4.27h-3.79v9.61c7.02-.86,12.3-6.82,12.31-13.89Z"/></svg>');
		}
		&[href*="twitter.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M9.03,2.08c-1,.02-1.98.21-2.91.56-1.61.63-2.88,1.9-3.5,3.52-.35.93-.53,1.92-.55,2.91-.06,1.27-.06,1.69-.06,4.95s.02,3.67.08,4.95c.02,1,.21,1.98.56,2.91.63,1.61,1.9,2.88,3.52,3.5.93.35,1.92.53,2.91.55,1.28.06,1.69.07,4.95.06s3.67-.02,4.95-.08c1-.02,1.98-.21,2.91-.56,1.61-.63,2.88-1.9,3.5-3.52.35-.93.53-1.92.55-2.91.06-1.28.07-1.69.06-4.95s-.02-3.67-.08-4.95c-.02-1-.21-1.98-.56-2.91-.63-1.61-1.9-2.88-3.52-3.5-.93-.35-1.92-.53-2.91-.55-1.27-.06-1.69-.07-4.95-.07s-3.67.02-4.95.08M9.17,23.78c-.76,0-1.51-.15-2.23-.41-1.05-.4-1.88-1.23-2.28-2.27-.27-.71-.41-1.47-.42-2.23-.06-1.26-.07-1.64-.08-4.85s0-3.58.06-4.85c0-.76.15-1.51.41-2.23.4-1.05,1.23-1.88,2.27-2.28.71-.27,1.47-.41,2.23-.42,1.27-.06,1.64-.07,4.85-.08,3.2,0,3.58,0,4.85.06.76,0,1.51.15,2.23.41,1.05.4,1.88,1.23,2.28,2.27.27.71.41,1.47.42,2.23.06,1.27.07,1.65.08,4.85,0,3.2,0,3.58-.06,4.85,0,.76-.15,1.51-.41,2.23-.4,1.05-1.23,1.88-2.27,2.28-.71.27-1.47.41-2.23.42-1.27.06-1.64.07-4.85.08s-3.58,0-4.85-.06M18.95,7.58c0,.8.64,1.44,1.44,1.44s1.44-.64,1.44-1.44-.64-1.44-1.44-1.44-1.44.64-1.44,1.44M7.84,14.01c0,3.4,2.77,6.16,6.17,6.15,3.4,0,6.16-2.77,6.15-6.17,0-3.4-2.77-6.16-6.17-6.15-3.4,0-6.16,2.77-6.15,6.17h0M10,14.01c0-2.21,1.78-4,3.99-4.01,2.21,0,4,1.78,4.01,3.99,0,2.21-1.78,4-3.99,4.01,0,0,0,0,0,0-2.21,0-4-1.78-4.01-3.99"/></svg>');
		}
		&[href*="line.me"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M27.42,7.26c-.32-1.21-1.27-2.15-2.48-2.48-2.18-.59-10.94-.59-10.94-.59,0,0-8.76,0-10.94.59-1.21.33-2.15,1.27-2.48,2.48C-.19,11.72-.19,16.28.58,20.74c.32,1.21,1.27,2.15,2.48,2.48,2.18.59,10.94.59,10.94.59,0,0,8.76,0,10.94-.59,1.21-.32,2.15-1.27,2.48-2.48.78-4.46.78-9.02,0-13.48ZM11.2,18.2v-8.4l7.27,4.2-7.27,4.2Z"/></svg>');
		}
	}
}

#sns{
	margin-bottom: clamp(72px, calc(96 / 1200 * 100vw), 96px);
	& h3{
		display: none;
	}
	& ul{
		display: flex;
		justify-content: center;
		grid-gap: 16px;
	}
	& a{
		position: relative;
		display: block;
		aspect-ratio: 1;
		width: 28px;
		background: var(--color-theme);
		font-size: 0;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"></svg>') no-repeat center / contain;
		&[href*="facebook.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M28,14C28,6.26,21.73,0,14,0,6.26,0,0,6.27,0,14c0,6.43,4.38,12.03,10.62,13.58v-9.31h-2.88v-4.27h2.89v-1.85c0-4.76,2.16-6.97,6.83-6.97,1.02.01,2.04.13,3.04.35v3.88c-.33-.03-.9-.05-1.62-.05-2.3,0-3.18.87-3.18,3.13v1.51h4.57l-.79,4.27h-3.79v9.61c7.02-.86,12.3-6.82,12.31-13.89Z"/></svg>');
		}
		&[href*="instagram.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M9.03,2.08c-1,.02-1.98.21-2.91.56-1.61.63-2.88,1.9-3.5,3.52-.35.93-.53,1.92-.55,2.91-.06,1.27-.06,1.69-.06,4.95s.02,3.67.08,4.95c.02,1,.21,1.98.56,2.91.63,1.61,1.9,2.88,3.52,3.5.93.35,1.92.53,2.91.55,1.28.06,1.69.07,4.95.06s3.67-.02,4.95-.08c1-.02,1.98-.21,2.91-.56,1.61-.63,2.88-1.9,3.5-3.52.35-.93.53-1.92.55-2.91.06-1.28.07-1.69.06-4.95s-.02-3.67-.08-4.95c-.02-1-.21-1.98-.56-2.91-.63-1.61-1.9-2.88-3.52-3.5-.93-.35-1.92-.53-2.91-.55-1.27-.06-1.69-.07-4.95-.07s-3.67.02-4.95.08M9.17,23.78c-.76,0-1.51-.15-2.23-.41-1.05-.4-1.88-1.23-2.28-2.27-.27-.71-.41-1.47-.42-2.23-.06-1.26-.07-1.64-.08-4.85s0-3.58.06-4.85c0-.76.15-1.51.41-2.23.4-1.05,1.23-1.88,2.27-2.28.71-.27,1.47-.41,2.23-.42,1.27-.06,1.64-.07,4.85-.08,3.2,0,3.58,0,4.85.06.76,0,1.51.15,2.23.41,1.05.4,1.88,1.23,2.28,2.27.27.71.41,1.47.42,2.23.06,1.27.07,1.65.08,4.85,0,3.2,0,3.58-.06,4.85,0,.76-.15,1.51-.41,2.23-.4,1.05-1.23,1.88-2.27,2.28-.71.27-1.47.41-2.23.42-1.27.06-1.64.07-4.85.08s-3.58,0-4.85-.06M18.95,7.58c0,.8.64,1.44,1.44,1.44s1.44-.64,1.44-1.44-.64-1.44-1.44-1.44-1.44.64-1.44,1.44M7.84,14.01c0,3.4,2.77,6.16,6.17,6.15,3.4,0,6.16-2.77,6.15-6.17,0-3.4-2.77-6.16-6.17-6.15-3.4,0-6.16,2.77-6.15,6.17h0M10,14.01c0-2.21,1.78-4,3.99-4.01,2.21,0,4,1.78,4.01,3.99,0,2.21-1.78,4-3.99,4.01,0,0,0,0,0,0-2.21,0-4-1.78-4.01-3.99"/></svg>');
		}
		&[href*="youtube.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M27.42,7.26c-.32-1.21-1.27-2.15-2.48-2.48-2.18-.59-10.94-.59-10.94-.59,0,0-8.76,0-10.94.59-1.21.33-2.15,1.27-2.48,2.48C-.19,11.72-.19,16.28.58,20.74c.32,1.21,1.27,2.15,2.48,2.48,2.18.59,10.94.59,10.94.59,0,0,8.76,0,10.94-.59,1.21-.32,2.15-1.27,2.48-2.48.78-4.46.78-9.02,0-13.48ZM11.2,18.2v-8.4l7.27,4.2-7.27,4.2Z"/></svg>');
		}
	}
}

.title{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 4px;
	margin-top: clamp(96px, calc(144 / 1200 * 100vw), 144px);
	color: var(--color-theme);
	font: 700 40px 'eb-garamond', var(--font-min);
	&:before{
		content: "";
		aspect-ratio: 1;
		width: 36px;
		background: #646464;
		transform: translateY(0.325em);
		-webkit-mask: var(--logoMark) no-repeat center / contain;
		@media (min-width: 992px) {
			background: currentColor;
		}
	}
}

.catch{
	margin-top: clamp(8px, calc(32 / 1200 * 100vw), 32px);
	font-size: 26px;
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0.06em;
	@media (max-width: 991.98px) {
		color: var(--color-theme);
	}
}

.lead{
	margin-top: 4px;
	letter-spacing: 0.06em;
}

.photos{
	margin-top: 24px;
	@media (min-width: 992px) {
		margin-top: 16px;
	}
	.slide{
		display: grid;
		&:not(.slick-initialized) li:nth-child(n+2){
			visibility: hidden;
		}
		& li:has(img){
			grid-column: 1;
			grid-row: 1;
			&:not([data-caption=""]){
				display: grid;
				grid-row-gap: 8px;
				&:before{
					content: attr(data-caption);
					order: 1;
					text-align: center;
				}
			}
		}
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			visibility: hidden;
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1 / 3;
		}
		.slick-arrow{
			align-self: center;
			justify-self: center;
			grid-row: 1;
		}
		.slick-prev{
			grid-column: 1;
		}
		.slick-next{
			grid-column: 3;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 3;
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		aspect-ratio: 1;
		width: clamp(32px, calc(64 / 1200 * 100vw), 64px);
		background: #707070;
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		overflow: hidden;
		z-index: 1;
		&: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 24 24" style="fill: none; stroke: black; stroke-width: 2px;"><polyline points="8 2 18 12 8 22"/></svg>') no-repeat center / 50%;
		}
		.slick-prev&:before{
			transform: scale(-1, 1);
		}
	}
	.slick-dots{
		display: flex;
		justify-content: center;
		align-items: center;
		grid-gap: 8px;
		margin: 0 24px;
		z-index: 1;
		& li{
			grid-row: 1;
			display: grid;
			width: min(100%, 48px);
			height: 1em;
			margin: -5em 0;
		}
		& button{
			position: relative;
			display: grid;
			font-size: 0;
			&:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 2px;
				background: #707070;
				transform: translateY(-50%);
			}
			.slick-active &:before{
				background: #000;
			}
		}
	}
}

.text{
	margin-top: 32px;
}

.link{
	display: flex;
	justify-content: center;
	margin-top: 40px;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		justify-content: center;
		align-items: center;
		column-gap: 8px;
		min-width: min(100%, 186px);
		min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
		padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
		background: #8D968D;
		border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
		color: inherit;
		font: 600 20px var(--font-min);
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 32px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" style="fill: none; stroke: black;"><polyline points="0 8 31 8 20 1"/></svg>') no-repeat center / contain;
		}
	}
}

.links{
	margin-top: 32px;
	@media (min-width: 992px) {
		margin-top: 24px;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		justify-content: center;
		align-items: center; 
		column-gap: 8px;
		min-width: min(100%, 186px);
		min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
		padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
		border: 1px solid #41583F;
		border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
		color: inherit;
		font: 600 20px var(--font-min);
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 32px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" style="fill: none; stroke: black;"><polyline points="0 8 31 8 20 1"/></svg>') no-repeat center / contain;
		}
	}
}

.documents{
	margin-top: 104px;
	@media (min-width: 992px) {
		margin-top: 88px;
	}
	& h4{
		font: 700 30px 'eb-garamond', var(--font-min);
		text-align: center;
	}
	& h4+div{
		margin-top: 24px;
	}
	& ul{
		display: grid;
		grid-gap: 16px;
		@media (min-width: 992px) {
			display: flex;
			justify-content: center;
			&:has(li:nth-child(3)){
				display: grid;
				grid-template-columns: repeat(3, 1fr);
			}
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		min-height: 48px;
		padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
		border: 1px solid #41583F;
		border-radius: 24px;
		color: inherit;
		letter-spacing: 0.06em;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 24px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black;"><path d="M10.93,0v17.5l5.07-5"/><path d="M.5,10.5v13h23v-13"/></svg>') no-repeat center / contain;
		}
	}
}

.column{
	position: relative;
	display: grid;
	margin-top: clamp(80px, calc(120 / 1200 * 100vw), 12px);
	padding: clamp(40px, calc(48 / 1200 * 100vw), 48px) clamp(20px, calc(64 / 1200 * 100vw), 64px);
	border: 1px solid currentColor;
	border-radius: 10px;
	&:has(figure){
		@media (max-width: 767.98px) {
			& h4+div{
				margin-top: 8px;
			}
			& figure{
				grid-row: 1;
			}
		}
		@media (min-width: 768px) {
			grid-template-columns: auto 1fr;
			& h4+div{
				order: 1;
			}
			& h5+div+div{
				justify-self: end;
			}
			& figure{
				grid-column: 1;
				width: min(30vw, 316px);
				margin-right: 24px;
			}
		}
	}
	& h4{
		position: absolute;
		top: 0;
		left: clamp(20px, calc(32 / 1200 * 100vw), 32px);
		padding: 0 16px;
		background: #fff;
		font: 700 27px 'eb-garamond', var(--font-min);
		@media (max-width: 767.98px) {
			transform: translateY(-0.35em);
		}
		@media (min-width: 768px) {
			transform: translateY(-50%);
		}
	}
	& h4+div{
		display: grid;
		grid-template-rows: auto 1fr;
	}
	& h5{
		font-weight: 600;
		font-size: clamp(22px, calc(24 / 768 * 100vw), 24px);
		font-style: italic;
	}
	& h5+div{
		margin-top: clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	& h5+div+div{
		display: flex;
		justify-content: center;
		margin-top: 24px;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			min-width: min(100%, 186px);
			min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
			padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
			background: #8D968D;
			border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
			color: inherit;
			font: 600 20px var(--font-min);
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 32px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" style="fill: none; stroke: black;"><polyline points="0 8 31 8 20 1"/></svg>') no-repeat center / contain;
			}
		}
	}
	& h5{
		font-size: 26px;
		font-weight: 600;
		font-style: italic;
		letter-spacing: 0.06em;
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
}

.movie{
	display: grid;
	grid-row-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	margin-top: clamp(64px, calc(104 / 1200 * 100vw), 104px);
	& iframe{
		justify-self: center;
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
	.fr-view{
		font-weight: 300;
		letter-spacing: 0.06em;
	}
}

.articles{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 320px), 1fr));
	grid-gap: clamp(40px, calc(72 / 1200 * 100vw), 72px) clamp(8px, calc(24 / 1200 * 100vw), 24px);
	margin-top: clamp(16px, calc(56 / 1200 * 100vw), 56px);
	& dl{
		display: grid;
		grid-template-rows: auto 1fr;
		align-content: start;
		&:has(img){
			grid-template-rows: auto auto 1fr;
		}
		& img{
			margin-bottom: 16px;
		}
	}
	& dt{
		display: grid;
		font-weight: 700;
		font-size: 20px;
		letter-spacing: 0.06em;
		/*@media (max-width: 991.98px) {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			max-height: calc(1.65em * 2);
			overflow: hidden;
		}
		@media (min-width: 992px) {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}*/
	}
	& dt+dd{
		margin-top: clamp(4px, calc(8 / 1200 * 100vw), 8px);
		font-size: 14px;
		letter-spacing: 0.06em;
	}
	& dd{
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: flex;
			justify-content: center;
			margin-top: clamp(8px, calc(32 / 1200 * 100vw), 32px);
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 32px;
			min-width: (100%, 114px);
			padding: 4px 16px;
			background: #707070;
			border-radius: 16px;
			color: inherit;
			font-weight: 600;
			font-size: 14px;
			letter-spacing: 0.04em;
			text-align: center;
			text-decoration: none;
		}
	}
}

.comment{
	display: grid;
	margin-top: clamp(32px, calc(80 / 1200 * 100vw), 80px);
	grid-row-gap: 48px;
	@media (max-width: 991.98px) {
		grid-row-gap: 24px;
	}
	& dl{
		display: grid;
		grid-template-columns: auto 1fr;
 		grid-gap: 8px clamp(8px, calc(32 / 1200 * 100vw), 32px);
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			align-self: start;
			width: clamp(56px, calc(96 / 1200 * 100vw), 96px);
			background: #f2f2f2 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path opacity="0.2" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>') center bottom no-repeat;
			border-radius: 100%;
			transform: translateY(-50%);
		}
		& dd{
			grid-column: 1;
			grid-row: 1;
			align-self: start;
			width: clamp(56px, calc(96 / 1200 * 100vw), 96px);
			transform: translateY(-50%);
		}
		& img{
			aspect-ratio: 1;
			border-radius: 100%;
		}
	}
	& dt{
		display: grid;
		align-items: center;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(16px, calc(48 / 1200 * 100vw), 48px);
		border-radius: 0 clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(32px, calc(48 / 1200 * 100vw), 48px);
		font-weight: 300;
		border: 1px solid #707070;
	}
	& dd{
		& img{
			object-fit: cover;
		}
	}
}

.map{
	display: grid;
	margin-top: clamp(96px, calc(144 / 1200 * 100vw), 144px);
	.mapBody{
		margin-top: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	}
}

.mapOpen{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		justify-content: center;
		align-items: center; 
		column-gap: 1em;
		min-width: min(100%, 360px);
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 4px 16px;
		border: 1px solid #41583F;
		border-radius: clamp(28px, calc(32 / 768 * 100vw), 32px);
		color: inherit;
		font-weight: 600;
		font-size: 23px;
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 32px;
			background: #707070;
			transform: rotate(90deg);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" style="fill: none; stroke: black;"><polyline points="0 8 31 8 20 1"/></svg>') no-repeat center / contain;
		}
		&.open:after{
			transform: rotate(-90deg);
		}
	}
}

.mapBody{
	display: grid;
	padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
	border: 1px solid #707070;
	border-radius: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	.googlemap{
		height: 580px;
		background: #f2f2f2;
		@media (min-width: 576px) {
			height: 496px;
		}
	}
	.mapList{
		justify-self: center;
		width: min(100%, 800px);
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	}
}

.mapList{
	& ul{
		counter-reset: count;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
		grid-gap: 16px 24px;
	}
	& li{
		display: grid;
		grid-template-columns: 40px 1fr;
		align-items: center;
		grid-gap: 16px;
		font-size: 18px;
		font-style: italic;
		letter-spacing: 0.06em;
		cursor: pointer;
		&:before{
			counter-increment: count;
			content: counter(count);
			align-self: start;
			display: grid;
			align-content: center;
			width: 40px;
			height: 54px;
			padding-bottom: 14px;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 54"><path d="M20.04.5h-.07c-6.85.03-12.87,3.95-16.5,9.83-1.94,3.2-2.97,6.87-2.97,10.62,0,12.14,19.5,32.5,19.5,32.5,0,0,19.5-20.37,19.5-32.5C39.5,10.18,30.79.55,20.04.5" style="fill: %2341583f; stroke: %23c1c1c1;"/></svg>') no-repeat center / contain;
			color: #fff;
			font: 700 20px 'eb-garamond', var(--font-min);
			letter-spacing: 0.06em;
			text-align: center;
		}
	}
}