/* CSS Document */

#main{
/*	margin-bottom: clamp(32px, calc(96 / 1200 * 100dvw), 96px);*/
}

#article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>* {
		grid-column: 2;
	}
	& header{
		grid-column: 1 / 4;
		padding: clamp(24px, calc(56 / 1200 * 100dvw), 56px) 0;
		background: rgba(var(--color-theme-rgb), 0.15);
	}
	& section{
		margin-top: clamp(56px, calc(96 / 1200 * 100dvw), 96px);
		&:first-of-type{
			margin-top: clamp(32px, calc(96 / 1200 * 100dvw), 96px);
		}
		&:last-of-type{
			margin-bottom: clamp(32px, calc(96 / 1200 * 100dvw), 96px);
		}
	}
	.photos,
	.text,
	.documents,
	.article,
	.column:not(:first-child),
	.columnPhoto,
	.comment,
	.tableList{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	.movie,
	.links,
	.map{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	.articleSlide{
		margin-top: clamp(32px, calc(40 / 1200 * 100dvw), 40px);
	}
	[lsc-lt="List"]{
		display: none;
	}
}

#share{
	display: grid;
	justify-content: center;
	grid-row-gap: 16px;
	margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	text-align: center;
	& h3{
		font-weight: 700;
		text-transform: uppercase;
	}
	& ul{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 24px;
		padding-bottom: 5px;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
		aspect-ratio: 1;
		width: clamp(40px, calc(48 / 768 * 100vw), 48px);
		background: currentColor;
		border-radius: 100%;
		font-size: 0;
		&[href*="instagram.com"]{
			position: relative;
			background: #fff;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(-150deg, transparent 55%, #ff7a00 65%, #ffd600) no-repeat, linear-gradient(45deg, transparent 50%, #d300c5) no-repeat, linear-gradient(135deg, #7638fa 25%, #ff0069 50%) no-repeat;
				transform: scale(0.65);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M47.86,14.1c-.12-2.55-.52-4.3-1.12-5.83-.61-1.58-1.43-2.92-2.77-4.25-1.33-1.33-2.67-2.15-4.25-2.77-1.53-.59-3.27-1-5.83-1.12-2.56-.12-3.38-.14-9.9-.14s-7.34.03-9.9.14c-2.55.12-4.3.52-5.83,1.12-1.58.61-2.92,1.43-4.25,2.77-1.33,1.33-2.16,2.67-2.77,4.25-.59,1.53-1,3.27-1.12,5.83-.12,2.56-.14,3.38-.14,9.9s.03,7.34.14,9.9c.12,2.55.52,4.3,1.12,5.83.61,1.58,1.43,2.92,2.77,4.25,1.33,1.33,2.67,2.15,4.25,2.77,1.53.59,3.27,1,5.83,1.12,2.56.12,3.38.14,9.9.14s7.34-.03,9.9-.14c2.55-.12,4.3-.52,5.83-1.12,1.58-.61,2.92-1.43,4.25-2.77,1.33-1.33,2.15-2.67,2.77-4.25.59-1.53,1-3.27,1.12-5.83.12-2.56.14-3.38.14-9.9s-.03-7.34-.14-9.9ZM43.54,33.7c-.11,2.34-.5,3.61-.83,4.46-.44,1.12-.96,1.92-1.79,2.76-.84.84-1.64,1.36-2.76,1.79-.85.33-2.12.72-4.46.83-2.53.12-3.29.14-9.7.14s-7.17-.02-9.7-.14c-2.34-.11-3.61-.5-4.46-.83-1.12-.44-1.92-.96-2.76-1.79-.84-.84-1.36-1.64-1.79-2.76-.33-.85-.72-2.12-.83-4.46-.12-2.53-.14-3.29-.14-9.7s.02-7.17.14-9.7c.11-2.34.5-3.61.83-4.46.44-1.12.96-1.92,1.79-2.76.84-.84,1.64-1.36,2.76-1.79.85-.33,2.12-.72,4.46-.83,2.53-.11,3.29-.14,9.7-.14s7.17.02,9.7.14c2.34.11,3.61.5,4.46.83,1.12.44,1.92.96,2.76,1.79.84.84,1.36,1.64,1.79,2.76.33.85.72,2.12.83,4.46.12,2.53.14,3.29.14,9.7s-.02,7.17-.14,9.7ZM24,11.68c-6.81,0-12.32,5.52-12.32,12.32s5.52,12.32,12.32,12.32,12.32-5.52,12.32-12.32-5.52-12.32-12.32-12.32ZM24,32c-4.42,0-8-3.58-8-8s3.58-8,8-8,8,3.58,8,8-3.58,8-8,8ZM36.81,8.31c-1.59,0-2.88,1.29-2.88,2.88s1.29,2.88,2.88,2.88,2.88-1.29,2.88-2.88-1.29-2.88-2.88-2.88Z"/></svg>') no-repeat center / contain;
			}
		}
		&[href*="line.me"]{
			background: #74c36f url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M48,20.61c0-10.74-10.77-19.48-24-19.48S0,9.87,0,20.61c0,9.63,8.54,17.69,20.07,19.22.78.17,1.85.52,2.11,1.18.24.61.16,1.56.08,2.17,0,0-.28,1.69-.34,2.05-.1.61-.48,2.37,2.08,1.29,2.56-1.08,13.82-8.14,18.86-13.93h0c3.48-3.81,5.14-7.69,5.14-11.98ZM15.53,26.35c0,.25-.21.46-.46.46h-6.74c-.25,0-.46-.21-.46-.46h0v-10.47c0-.25.21-.46.46-.46h1.7c.25,0,.46.21.46.46v8.31h4.58c.25,0,.46.21.46.46v1.7ZM19.59,26.35c0,.25-.21.46-.46.46h-1.7c-.25,0-.46-.21-.46-.46v-10.47c0-.25.21-.46.46-.46h1.7c.25,0,.46.21.46.46v10.47ZM31.18,26.35c0,.25-.21.46-.46.46h-1.69s-.08,0-.12-.02c0,0,0,0,0,0-.01,0-.02,0-.03-.01,0,0,0,0-.01,0,0,0-.02,0-.02,0s-.01,0-.02-.01c0,0,0,0-.01,0,0,0-.02-.01-.03-.02,0,0,0,0,0,0-.04-.03-.09-.07-.12-.12l-4.8-6.48v6.22c0,.25-.21.46-.46.46h-1.7c-.25,0-.46-.21-.46-.46v-10.47c0-.25.21-.46.46-.46h1.69s.01,0,.02,0c0,0,.02,0,.02,0,0,0,.02,0,.02,0,0,0,.01,0,.02,0,0,0,.02,0,.03,0,0,0,.01,0,.02,0,0,0,.02,0,.03,0,0,0,0,0,.01,0,0,0,.02,0,.03.01,0,0,0,0,.01,0,0,0,.02,0,.03.01,0,0,0,0,.01,0,0,0,.02.01.02.02,0,0,0,0,.01,0,0,0,.02.01.02.02,0,0,0,0,0,0,0,0,.02.02.03.03,0,0,0,0,0,0,.01.02.03.03.04.05l4.79,6.47v-6.22c0-.25.21-.46.46-.46h1.7c.25,0,.46.21.46.46v10.47ZM40.47,17.58c0,.25-.21.46-.46.46h-4.58v1.77h4.58c.25,0,.46.21.46.46v1.7c0,.25-.21.46-.46.46h-4.58v1.77h4.58c.25,0,.46.21.46.46v1.7c0,.25-.21.46-.46.46h-6.74c-.25,0-.46-.21-.46-.46h0v-10.46h0c0-.26.21-.47.46-.47h6.74c.25,0,.46.21.46.46v1.7Z"/></svg>') no-repeat center / 65%;
		}
		&[href*="x.com"]{
			background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="black"><path d="M28.47,20.32L45.95,0h-4.14l-15.18,17.65L14.5,0H.52l18.34,26.69L.52,48h4.14l16.03-18.64,12.81,18.64h13.99l-19.02-27.68h0ZM22.79,26.92l-1.86-2.66L6.15,3.12h6.36l11.93,17.06,1.86,2.66,15.51,22.18h-6.36l-12.65-18.1h0Z"/></svg>') no-repeat center / 60%;
		}
		&[href*="facebook.com"]{
			background: #3b598c url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M27.83,48v-16.82c1.62,0,5.65-.12,5.65-.12l.91-6.81h-6.55s.04-3.63.04-5.55c.15-1.59,1.17-2.41,2.7-2.56,1.17-.1,3.93-.27,3.93-.27v-6.19s-6.22-.67-9.12.51c-3.46,1.41-4.9,4.26-5.08,7.84-.09,1.72-.02,3.46-.03,5.2v.99c-1.72,0-4.98-.02-4.98-.02h-1.14l.03,6.99h6.06v16.81h7.57Z"/></svg>') no-repeat center bottom / 95%;
		}
	}
}


.text{
	&>div+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
}

.fr-view{
	font-weight: 500;
}

.title{}

.photos{
	justify-self: center;
	display: grid;
	grid-template-columns: 0 1fr 0;
	grid-gap: 24px 0;
	width: 100%;
	&>div{
		display: contents;
	}
	&:not(:has(.photoSlideNav)) dl {
		grid-column: 2;
		grid-row: 1;
	}
	& dl{
		display: grid;
		grid-row-gap: 16px;
		&:nth-child(n+2){
			display: none;
		}
	}
	& dt{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		align-content: end;
		padding: 8px 16px;
		background: linear-gradient(transparent, rgba(35, 24, 24, 0) 85%, rgba(35, 24, 24, 0.5) 95%, rgba(35, 24, 24, 0.7));
		border-radius: 10px;
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		pointer-events: none;
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		grid-column: 1;
		grid-row: 1;
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			border-radius: 20px;
			&.contain{
				object-fit: contain;
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1;
		align-items: center;
	}
	.slick-arrow{
		all: unset;
		grid-row: 1;
		justify-self: center;
		align-self: center;
		position: relative;
		aspect-ratio: 1;
		width: clamp(40px, calc(48 / 768 * 100dvw), 48px);
		background: rgba(255, 255, 255, 0.5);
		border-radius: 100%;
		font-size: 0;
		box-sizing: border-box;
		cursor: pointer;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23fff" d="M5.6,2.58c-.27-.27-.27-.71,0-.98s.7-.27.97,0l7.83,7.91c.27.27.27.71,0,.98l-7.83,7.91c-.27.27-.7.27-.97,0s-.27-.71,0-.98l7.14-7.42S5.6,2.58,5.6,2.58Z"/></svg>') center no-repeat;
			background-size: 20px;
			border-radius: 100%;
		}
	}
	.slick-prev{
		&:before{
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
	}
	.photoSlideNav{
		& dl{
			margin: 0 4px;
		}
		& dt{
			display: none;
		}
		& button{
			display: none !important;
		}
		& .slick-track{
		}
		& .slick-list{
			grid-column: 2;
			grid-row: 2;
		}
		& .slick-list:only-child .slick-track {
			/*.photoSlideNav の動きを止める*/
			transform: none !important;
		}
		& img{
			border-radius: 4px;
		}
	}
	@media (min-width: 576px) {
		&:before{
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
		}
	}
}

.columnLeft,
.columnRight{
	display: grid;
	grid-gap: 16px 32px;
}

.columnLeft{
	@media (min-width: 576px) {
		grid-template-columns: clamp(320px, calc(448 / 992 * 100dvw), 448px) 1fr;
		.columnPhoto{
			order: -1;
			align-self: start;
		}
	}
}

.columnRight{
	@media (min-width: 576px) {
		grid-template-columns: 1fr clamp(320px, calc(448 / 992 * 100dvw), 448px);
		.columnPhoto{
			order: 1;
			align-self: start;
		}
	}
}

.columnPhoto{
	display: grid;
	& dl{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& dt{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		align-content: end;
		padding: 8px 16px;
		background: linear-gradient(transparent, rgba(35, 24, 24, 0) 85%, rgba(35, 24, 24, 0.5) 95%, rgba(35, 24, 24, 0.7));
		border-radius: 10px;
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		pointer-events: none;
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		grid-column: 1;
		grid-row: 1;
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 10px;
		&.contain{
			object-fit: contain;
		}
	}
	&.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		align-items: center;
		@media (min-width: 768px) {
			grid-template-columns: auto 1fr auto;
			grid-gap: 8px;
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1;
		}
		.slick-arrow{
			justify-self: center;
			width: 32px;
		}
		.slick-dots{
			margin-top: 16px;
			&:has(li:only-child){
				display: none;
			}
		}
		.slick-dots{
			grid-column: 2;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			grid-gap: 8px;
			& li{
				aspect-ratio: 1;
				width: 10px;
				background: #bdbdbd;
				border-radius: 100%;
				overflow: hidden;
				&.slick-active{
					background: var(--color-theme);
				}
			}
			& button{
				visibility: hidden;
			}
		}
	}
}

.links{
	& ul{
		display: grid;
		justify-content: center;
		grid-gap: 16px;
		@media (min-width: 992px) {
			display: flex;
			& a{
				min-width: calc((100% - 32px) / 3);
			}
		}
	}
	& li{
		display: contents;
	}
}

.documents{
	padding-top: 24px;
	border-top: 2px dotted #c2c2c2;
	& h4+div{
		padding: 16px 0 0 8px;
	}
	& ul{
		display: grid;
		justify-items: start;
		grid-row-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		color: var(--color);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			background: var(--color-theme);
			transform: translateY(calc(0.875em - 50%));
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9,13.2c0-.24.09-.47.26-.64s.4-.26.64-.26h8.4c.24,0,.47.09.64.26.17.17.26.4.26.64s-.09.47-.26.64c-.17.17-.4.26-.64.26H4.8c-.24,0-.47-.09-.64-.26-.17-.17-.26-.4-.26-.64ZM3.9,16.8c0-.24.09-.47.26-.64.17-.17.4-.26.64-.26h8.4c.24,0,.47.09.64.26s.26.4.26.64-.09.47-.26.64c-.17.17-.4.26-.64.26H4.8c-.24,0-.47-.09-.64-.26-.17-.17-.26-.4-.26-.64ZM17.37,6.41L12.19.77h0c-.45-.48-1.08-.77-1.76-.77H2.4C1.08,0,0,1.08,0,2.4v18c0,1.32,1.08,2.4,2.4,2.4h13.2c1.32,0,2.4-1.08,2.4-2.4v-12.36c0-.57-.2-1.17-.63-1.63ZM14.51,6.84h-2.88v-3.14l2.88,3.14ZM2.4,20.4V2.4h6.83v5.64c0,.32.13.62.35.85.22.23.53.35.85.35h5.17v11.16H2.4Z"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme);
		}
	}
}

.movie{
	&>div{
		display: grid;
		justify-content: center;
	}
	&>div:has(figure:nth-child(2)){
		grid-template-columns: repeat(2, 1fr);
		grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 24px;
		align-items: start;
	}
	& figure{
		display: grid;
		grid-gap: 8px;
		& a{
			display: block;
			position: relative;
			max-width: 850px;
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				aspect-ratio: 1;
				width: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="%23ff0000" d="M27.41,7.22c-.32-1.21-1.27-2.17-2.48-2.49-2.18-.59-10.94-.59-10.94-.59,0,0-8.76,0-10.94.59-1.2.32-2.15,1.28-2.48,2.49-.59,2.2-.59,6.78-.59,6.78,0,0,0,4.59.59,6.78.32,1.21,1.27,2.17,2.48,2.49,2.18.59,10.94.59,10.94.59,0,0,8.76,0,10.94-.59,1.2-.32,2.15-1.28,2.48-2.49.59-2.2.59-6.78.59-6.78,0,0,0-4.59-.59-6.78ZM11.14,18.16v-8.33l7.32,4.16-7.32,4.16Z"/><path fill="%23fff" d="M11.14,18.16v-8.33l7.32,4.16-7.32,4.16Z"/></svg>') no-repeat center / 90%;
				pointer-events: none;
			}
			&.youtube {
				aspect-ratio: 16 / 9;
			}
			&.youtubeShorts {
				justify-self: center;
				aspect-ratio: 9 / 16;
				width: 31.6%;
				& img {
					aspect-ratio: 9 / 16;
				}
			}
		}
		& img{
			width: 100%;
			height: auto;
			object-fit: cover;
			&.contain{
				object-fit: contain;
			}
		}
		& figcaption{
			text-align: center;
		}
	}
}

.article{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px) 16px;
	@media (min-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
	}
	& dl{
		position: relative;
		align-content: start;
		display: grid;
/*		grid-template-rows: auto 1fr;*/
		grid-template-rows: auto;
		grid-row-gap: 8px;
/*		&:has(img){
			grid-template-rows: auto auto 1fr;
		}*/
	}
	& dt{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& dd{
		font-weight: 500;
		&:has(img){
			order: -1;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
			&.contain{
				object-fit: contain;
			}
		}
		&:has(a){
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px;
			margin-top: 8px;
		}
		& a{
			min-width: min(100%, 196px);
			min-height: 40px;
		}
	}
}

.map{
	display: grid;
	grid-row-gap: 8px;
}

.mapBody{
	background: #e8e8e8;
	iframe{
		width: 100%;
		height: 460px;
	}
}

.mapText{
	font-weight: 500;
	font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
}

.column{
	position: relative;
	border: 5px solid rgba(var(--color-theme-rgb), .2);
	border-radius: 8px;
	& h4{
		display: grid;
		align-items: center;
		min-height: 48px;
		padding: 8px 16px;
		background: rgba(var(--color-theme-rgb), .2);
		border-radius: 2px 2px 0 0;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(22 / 768 * 100dvw), 24px);
		text-align: center;
	}
	& h4+div{
		display: grid;
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 8px;
			&.contain{
				object-fit: contain;
			}
		}
	}
	@media (max-width: 767.98px) {
		& figure{
			margin-bottom: 16px;
		}
	}
	@media (min-width: 768px) {
		&:has(img){
			& h4+div{
				grid-template-columns: auto 1fr;
				grid-template-rows: auto 1fr;
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: start;
			width: 264px;
			margin-right: 16px;
		}
	}
}

.tableList{
	.notes{
		margin-top: 8px;
	}
}