/* CSS Document */

#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, ==> .cards に変更 */
	.cards,
	.column:not(:first-child),
	.columnPhoto,
	.comment,
	.tableList,
	.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-bottom: clamp(32px, calc(96 / 1200 * 100dvw), 96px);
	text-align: center;
	& h3{
		font-weight: 700;
		text-transform: uppercase;
	}
	& ul{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
		aspect-ratio: 1;
		width: clamp(40px, calc(48 / 768 * 100vw), 48px);
		font-size: 0;
		background: var(--color-theme);
		&[href*="instagram.com"]{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>') no-repeat center / 70%;
		}
		&[href*="line.me"]{
			-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="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 / 75%;
		}
		&[href*="x.com"]{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M14.49,10.16L23.23,0h-2.07l-7.59,8.82L7.51,0H.52l9.17,13.34L.52,24h2.07l8.02-9.32,6.4,9.32h6.99l-9.51-13.84h0ZM11.65,13.46l-.93-1.33L3.33,1.56h3.18l5.96,8.53.93,1.33,7.75,11.09h-3.18l-6.33-9.05h0Z"/></svg>') no-repeat center / 67%;
		}
		&[href*="facebook.com"]{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.76,4.64c-.82-.48-1.47-.86-2.28-.86s-1.48.2-1.83.54c-.35.33-.52.98-.52,1.93v1.41h4.27l-.92,3.92h-3.35v12.41h-5.36v-12.41h-2.5v-3.92h2.5v-1.5c0-1.58.19-2.52.56-3.3.37-.78,1.09-1.64,2.09-2.13,1-.49,2.48-.73,4.02-.73s2.8.52,4.3.95l-.98,3.69Z"/></svg>') no-repeat center / 70%;
		}
		&[href*="youtube.com"]{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M23.5,6.22c-.28-1.03-1.09-1.85-2.12-2.12-1.87-.5-9.38-.5-9.38-.5,0,0-7.51,0-9.38.5-1.03.28-1.85,1.09-2.12,2.12-.5,1.87-.5,5.78-.5,5.78,0,0,0,3.91.5,5.78.28,1.03,1.09,1.85,2.12,2.12,1.87.5,9.38.5,9.38.5,0,0,7.51,0,9.38-.5,1.03-.28,1.85-1.09,2.12-2.12.5-1.87.5-5.78.5-5.78,0,0,0-3.9-.5-5.78ZM9.6,15.6v-7.2l6.24,3.6-6.24,3.6Z"/></svg>') no-repeat center / 70%;
		}
	}
}

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

.subTitle+* {
	margin-top: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
}

.text{
	&>div+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	&>div *+*:not(li+li,dt+dd,dd+dd,a+a){
		margin-top: 16px;
	}
	& a:not(.button){
		&[target="_blank"]{
			position: relative;
			&:after{
				content: "";
				display: inline-block;
				vertical-align: middle;
				margin-left: 4px;
				width: 14px;
				aspect-ratio: 1;
				background: color-mix(in srgb, var(--color-theme) 90%, transparent);
				-webkit-mask: var(--icon-popup) center / contain no-repeat;
			}
		}
		&:hover{
			text-decoration: underline;
		}
		.documents &{
			&:after{
				display: none;
			}
		}
	}
}

.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: 8px;
		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;
		}
		& .slick-current{
			& img{
				border: 2px solid var(--color-theme);
			}
		}
		& 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{
	& 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: 8px;
		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: 8px;
		&.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;
/*			display: grid;*/
		}
/*		.slick-track{
			display: contents;
		}*/
		.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;
			flex-wrap: wrap;
			& 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;
		}
	}
}

.cards{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px) 24px;
	@media (min-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media (min-width: 992px) {
		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: 16px;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
		border-radius: 8px;
		overflow: hidden;
		&:has(img){
			grid-template-rows: auto auto 1fr;
		}
	}
	& dt{
		padding: 0 16px;
		font-weight: 500;
		font-size: clamp(20px, calc(24 / 1200 * 100dvw), 24px);
		color: var(--color-theme);
	}
	& dd{
		font-weight: 500;
		padding: 0 16px;
		&:has(img){
			order: -1;
			padding: 0;
			background: var(--color-bg);
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			&.contain{
				object-fit: contain;
			}
		}
		&:has(a){
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px;
		}
		& a{
			margin-bottom: 16px;
			min-width: min(100%, 196px);
			min-height: 32px;
		}
	}
}

.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;
		row-gap: 16px;
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 8px;
			&.contain{
				object-fit: contain;
			}
		}
	}
	@media (min-width: 768px) {
		&:has(img){
			& h4+div{
				grid-template-columns: auto 1fr;
				& div:has(ul){
					align-self: end;
				}
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: start;
			width: 264px;
			margin-right: 16px;
		}
	}
}

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

.txt-bold{
	font-weight: 700;
}

.col-red{
	color: red;
}