/* CSS Document */
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
/* Noto JP
font-family: 'Noto Sans JP', sans-serif;
*/

[src="[url]"]{
	display: block;
	width: 100%;
	height: auto;
	background: #ccc;
}

[src*="src"]{
	display: block;
	width: 100%;
	height: auto;
	background: var(--dummy);
}

[LSC-LT]{
	display: contents;
}

:root{
	--color: #333;
	--color-rgb: 51, 51, 51;
	--color-theme: #4AACD9;
	--color-theme-rgb: 74, 172, 217;
	--color-accent: #8FC31F;
	--color-accent-rgb: 143,195,31;
	--color-entry: #ff8d28;
	--color-entry-rgb: 255, 141, 40;
	--color-bg: #f2f2f2;
	--color-bg-rgb: 242, 242, 242;
	--variable-color: var(--color-theme);
	--color-border: #ccc;
	--color-border-rgb: 204, 204, 204;
	--font: 'Noto Sans JP', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
	--wrap-space: 24px;
	--wrap-fit: calc(min(100dvw, 100%) - clamp(48px, calc(96 / 1200 * 100dvw), 96px));
	--wrap-max: 1200px;
	--wrap: clamp(327px, calc(max(100dvw, 100%) - clamp(48px, calc(96 / 1200 * 100dvw), 96px)), var(--wrap-max));
	--dummy: #f2f2f2 url('/common/images/logoType.svg') no-repeat center / 75%;
}

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

body{
	color: var(--color);
	font: 400 16px var(--font);
	line-height: 1.65;
	overflow-wrap: anywhere;
}
::selection{
	background: var(--color-theme);
	color: #fff;
}
::-moz-selection{
	background: var(--color-theme);
	color: #fff;
}

a{
	color: inherit;
	.done &{
		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;
	}
	:focus-visible{
		outline: var(--color-theme) auto 2px;
		outline-offset: 2px;
	}
}

wbr{
	.translated-ltr &:not(:lang(ja)){
		display: none;
	}
}

main{
	& a{
		color: var(--color-theme);
		text-decoration: underline;
	}
}

input,
textarea,
select{
	background-color: transparent;
	accent-color: var(--color-theme);
	caret-color: var(--color-theme);
}

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

button{
	display: grid;
	align-items: center;
	min-height: 48px;
	padding: 8px 16px;
	background: black;
	color: white;
	text-align: center;
	&:focus-visible{
		outline: var(--color-theme) auto 2px;
		outline-offset: 2px;
	}
}

details{
	all: unset;
	display: block;
	box-sizing: border-box;
	&::details-content{
		box-sizing: border-box;
	}
}

summary{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	&::-webkit-details-marker{
		display:none;
	}
}

#wrapper{
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 100dvh;
	#header{
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 0;
		z-index: 110;
	}
	#nav{
		z-index: 120;
		@media (min-width: 992px) {
			grid-column: 1;
			grid-row: 1;
			justify-self: end;
			position: sticky;
			top: 0;
		}
	}
	#pagePath,
	#footer,
	#pageTop{
		order: 10;
	}
	#navButton{
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		position: sticky;
		top: 0;
		z-index: 120;
	}
}

#header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 56px;
	padding-left: 20px;
	background: #fff;
	&:has(figure){
		display: grid;
		#siteName{
			grid-column: 1;
			grid-row: 1;
			& a{
				display: block;
				font-size: 0;
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			& img{
				width: auto;
				max-width: 100%;
				@media (max-width: 991.98px) {
					height: 32px;
				}
				@media (min-width: 992px) {
					height: 56px;
				}
			}
		}
	}
}

#siteName{
	z-index: 1;
	& a{
		display: grid;
		align-items: anchor-center;
		font-weight: 700;
		font-size: clamp(18px, 1.8vw, 24px);
		@media (max-width: 991.98px) {
			height: 32px;
		}
		@media (min-width: 992px) {
			height: 40px;
		}
	}
}

#navButton{
	all: unset;
	box-sizing: border-box;
	display: grid;
	align-content: center;
	justify-items: center;
	grid-gap: 4px;
	width: 56px;
	aspect-ratio: 1;
	background: var(--color-theme);
	color: #fff;
	overflow: hidden;
	pointer-events: all;
	cursor: pointer;
	@media (min-width: 992px) {
		display: none;
	}
	.nav &{
		background: #fff;
		color: var(--color-theme);
	}
	& i{
		width: 50%;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		animation-duration: 0.75s;
		animation-fill-mode: forwards;
		transition: transform 0.75s;
	}
	&.on{
		& i:nth-of-type(1){
			animation-name: navButton-bar01_on;
		}
		& i:nth-of-type(2){
			animation-name: navButton-bar02_on;
		}
		& i:nth-of-type(3){
			animation-name: navButton-bar03_on;
		}
	}
	&.off{
		& i:nth-of-type(1){
			animation-name: navButton-bar01_off;
		}
		& i:nth-of-type(2){
			animation-name: navButton-bar02_off;
		}
		& i:nth-of-type(3){
			animation-name: navButton-bar03_off;
		}
	}
}
@keyframes navButton-bar01_on{
	0% {
		transform: translateY(0);
		}
	50% {
		transform: translateY(6px) rotate(0);
		}
	100% {
		transform: translateY(6px) rotate(45deg);
		}
	}
@keyframes navButton-bar01_off{
	0% {
		transform: translateY(6px) rotate(45deg);
		}
	50% {
		transform: translateY(6px) 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(-6px) rotate(0);
		}
	100% {
		transform: translateY(-6px) rotate(-45deg);
		}
	}
@keyframes navButton-bar03_off{
	0% {
		transform: translateY(-6px) rotate(-45deg);
		}
	50% {
		transform: translateY(-6px) rotate(0);
		}
	100% {
		transform: translateY(0);
		}
	}

#nav{
	& h2{
		display: none;
	}
	& ul{
		list-style: none;
	}
	& li{
		&:last-child a{
			display: grid;
			grid-template-columns: 16px auto;
			align-items: center;
			grid-gap: 8px;
			padding: 16px 24px;
			background: var(--color-theme);
			color: #fff;
			&: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 512 512"><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>') no-repeat center/ contain;
			}
			&:hover{
				background: rgba(var(--color-theme-rgb), .7);
			}
		}
	}
	@media (max-width: 991.98px) {
		position: fixed;
		top: 0;
		left: 100%;
		display: grid;
		width: min(100%, 380px);
		height: 100%;
		padding: 56px 0;
		background: var(--color-theme);
		color: #fff;
		overflow-y: auto;
		overscroll-behavior: none;
		transform: translateX(0);
		transition: transform 0.2s ease-out;
		.nav &{
			transform: translateX(-100%);
		}
		& ul{
			display: grid;
			align-content: start;
			grid-template-columns: 20px auto 20px;
			grid-gap: 16px;
			padding: 16px 0 16px;
		}
		& li{
			grid-column: 2;
			&:not(:last-child) a{
				position: relative;
				grid-template-columns: auto 1fr;
				grid-gap: 0 8px;
				align-items: center;
				padding-bottom: 16px;
				border-bottom: 1px solid rgba(255, 255, 255, .6);
				&:before{
					content: "";
					width: 14px;
					aspect-ratio: 1;
					background: #fff;
					-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="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 / contain no-repeat;
					background-size: 20px;
					border-radius: 100%;
				}
			}
			&:last-child a{
				justify-self: center;
				margin-top: 32px;
				border-radius: 8px;
				border: 1px solid #fff;
			}
		}
		& a{
			display: grid;
		}
	}
	@media (min-width: 992px) {
		justify-self: end;
		& ul{
			display: flex;
			align-items: center;
			grid-gap: clamp(14px, calc(32 / 768 * 100dvw), 32px);
		}
		& li{
			display:contents;
			&:last-child a{
				height: 80px;
			}
		}
		& a{
			color: #26221f;
			&:hover{
				color: var(--color-theme);
			}
		}
	}
	@media (min-width: 992px) and (max-width: 1199.98px) {
		& ul{
			grid-gap: 16px;
			}
		& a{
			font-size: 14px;
		}
	}
}

#pagePath{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: 16px 0;
	background: color-mix(in srgb, var(--color-theme) 20%, white);
	& ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
	}
	& li{
		display: contents;
		&:nth-child(n+2){
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 12px;
				background: var(--color);
				-webkit-mask: 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: black;"><polyline points="3.25 .5 8.75 6 3.25 11.5"/></svg>') no-repeat center / contain;
			}
		}
		&:last-child{
			color: var(--color-theme);
			font-weight: 700;
		}
	}
	& a{
		color: inherit;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
}

#footer{
	padding-top: clamp(48px, calc(56 / 1200 * 100dvw), 56px);
	background: var(--color-theme);
	color: #fff;
	}

#fAddress{
	display: grid;
	align-items: start;
	grid-gap: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	width: var(--wrap);
	margin: auto;
	padding-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	& h3{
		display: grid;
		justify-items: center;
		grid-gap: 8px;
		font-weight: 700;
		& figure{
			order: -1;
			padding: 24px;
			max-width: clamp(250px, calc(285 / 1200 * 100dvw), 285px);
			background: #fff;
			border-radius: 8px;
		}
	}
	& dl{
		display: grid;
		grid-gap: 8px 0;
		justify-content: center;
		font-size: clamp(14px, calc(16 / 1200 * 100dvw), 16px);
	}
	& dt,
	& dd{
		position: relative;
		padding-bottom: 8px;
		&:before{
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: rgba(255, 255, 255, 0.7);
		}
	}
	@media (max-width: 575.98px) {
		& dd+dt{
			margin-top: 8px;
		}
		& dd{
			&:before{
				display: none;
			}
		}
	}
	@media (min-width: 576px) {
		grid-template-columns: auto auto;
		justify-content: center;
		& dl{
			grid-template-columns: 9em auto;
		}
	}
}

#copyright{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	place-items: center;
	min-height: 48px;
	padding: 4px 0;
	& p{
		font-size: 12px;
		line-height: 1.25;
		text-align: center;
	}
	@media (max-width: 575.98px) {
		& p{
			width: 22em;
		}
	}
}

#banner{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: 40px;
	padding: clamp(48px, calc(56 / 1200 * 100dvw), 56px) 0;
	background: #f3f3f3;
	&>*{
		grid-column: 2;
	}
	& h3{
		display: none;
	}
	& h3+div{
		display: grid;
		grid-template-columns: repeat(1, min(80%, 234px));
		grid-gap: 32px 48px;
		justify-content: center;
		align-items: flex-start;
		@media (min-width: 576px) {
			grid-template-columns: repeat(2, min(50%, 234px));
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(3, min(33.33%, 234px));
		}
	}
	& dl{
		display: grid;
		grid-row-gap: 8px;
	}
	& dt{
		order: 1;
		font-size: 13px;
		text-align: center;
		letter-spacing: 0.05em;
		display: none;
	}
	& img[src="[url]"]{
		aspect-ratio: 39 / 10;
	}
}

#floatingNav{
	order: 100;
	z-index: 1000;
	& ul{
		display: grid;
	}
	& li{
		display: contents;
	}
	@media (max-width: 575.98px) {
		position: sticky;
		bottom: 0;
		border-top: 1px solid #fff;
		& ul{
			grid-template-columns: repeat(2, 1fr);
			column-gap: 1px;
			background: #fff;
		}
		& a{
			display: block;
			grid-template-columns: 1fr auto;
			grid-gap: 8px;
			height: 48px;
			text-align: center;
		}
	}
	@media (min-width: 576px) {
		position: fixed;
		top: 20%;
		right: 0;
		& ul{
			outline: 2px solid #fff;
			background: #fff;
			border-radius: 8px 0 0 8px;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
			overflow: hidden;
		}
		& a{
			grid-template-columns: 4.5em auto;
			grid-gap: 8px;
			padding: 16px 12px;
			writing-mode: vertical-rl;
			line-height: 1.25;
			&[href*="/outline/index.html"]{
				display: none;
			}
		}
	}
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(20 / 768 * 100vw), 18px);
		text-decoration: none;
		letter-spacing: 0.05em;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 24px;
			background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.19,14.7l-4.17-4.21c-.11-.11-.24-.2-.38-.26-.14-.06-.3-.09-.45-.09s-.31.03-.45.09c-.14.06-.27.15-.38.26-.11.11-.2.24-.26.39-.06.14-.09.3-.09.46s.03.31.09.46c.06.14.15.28.26.39l4.99,5.04c.46.47,1.22.47,1.68,0l12.63-12.75c.11-.11.2-.24.26-.39.06-.14.09-.3.09-.46s-.03-.31-.09-.46c-.06-.14-.15-.28-.26-.39-.11-.11-.24-.2-.38-.26-.14-.06-.3-.09-.45-.09s-.31.03-.45.09c-.14.06-.27.15-.38.26L6.19,14.7Z" fill="%234AACD9"/></svg>') center / 50% no-repeat;
			border-radius: 50%;
		}
		&[target="_blank"]{
			grid-template-columns: auto auto auto;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 20px;
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.15,8.3c-.32-.32-.7-.48-1.15-.48H3.2c-.45,0-.83.16-1.15.48-.32.32-.48.7-.48,1.15v7.35c0,.45.16.83.48,1.15.32.32.7.48,1.15.48h9.79c.45,0,.83-.16,1.15-.48s.48-.7.48-1.15v-7.35c0-.45-.16-.83-.48-1.15ZM12.99,16.8H3.2v-7.35h9.79v7.35ZM15.59,12.18v-1.63h1.21V3.2H7.01v3.67h-1.63v-3.67c0-.45.16-.83.48-1.15.32-.32.7-.48,1.15-.48h9.79c.45,0,.83.16,1.15.48.32.32.48.7.48,1.15v7.35c0,.45-.16.83-.48,1.15-.32.32-.7.48-1.15.48h-1.21Z" fill="%23fff"/></svg>') center / 80% no-repeat;
				@media (max-width: 575.98px) {
					transform: translateX(-4px);
				}
				@media (min-width: 576px) {
					transform: translateY(-2px) translateX(1px);
				}
			}
		}
		&[href*="/outline/index.html"]{
			background: var(--color-accent);
			&:before{
				background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path class="cls-2" d="M15.58,5.04H6.42v-2.29c0-.5.41-.92.92-.92h7.33c.5,0,.92.41.92.92v2.29ZM19.25,4.58v13.75c0,1.01-.83,1.83-1.83,1.83H4.58c-1.01,0-1.83-.83-1.83-1.83V4.58c0-1.01.83-1.83,1.83-1.83h.92v3.21h11v-3.21h.92c1.01,0,1.83.83,1.83,1.83ZM12.83,12.83h-7.33v1.83h7.33v-1.83ZM16.5,9.17H5.5v1.83h11v-1.83Z" fill="%238FC31F"/></svg>') center / 74% no-repeat;
			}
		}
		&[href*="runnet.jp/entry"]{
			background: var(--color-entry);
			&:before{
				background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.19,14.7l-4.17-4.21c-.11-.11-.24-.2-.38-.26-.14-.06-.3-.09-.45-.09s-.31.03-.45.09c-.14.06-.27.15-.38.26-.11.11-.2.24-.26.39-.06.14-.09.3-.09.46s.03.31.09.46c.06.14.15.28.26.39l4.99,5.04c.46.47,1.22.47,1.68,0l12.63-12.75c.11-.11.2-.24.26-.39.06-.14.09-.3.09-.46s-.03-.31-.09-.46c-.06-.14-.15-.28-.26-.39-.11-.11-.24-.2-.38-.26-.14-.06-.3-.09-.45-.09s-.31.03-.45.09c-.14.06-.27.15-.38.26L6.19,14.7Z" fill="%23ff8d28"/></svg>') center / 50% no-repeat;
			}
		}
	}
}


#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) &{
		opacity: 1;
	}
	&:hover:before{
		background: rgba(var(--color-theme-rgb), .7);
	}
	&:before,
	&:after{
		content: "";
		position: absolute;
		right: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		bottom: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		aspect-ratio: 1;
		width: 48px;
		border: 1px solid #fff;
		border-radius: 8px;
	}
	&:before{
		background: rgba(var(--color-theme-rgb), .8);
	}
	&:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z" /></svg>');
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 30px;
		background: #fff;
	}
	@media (max-width: 767.98px) {
		bottom: 48px;
	}
}

#pagenation{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin: clamp(56px, calc(96 / 1200 * 100dvw), 96px) auto;
	& ul,
	& ol{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
	}
	& a{
		display: grid;
		aspect-ratio: 1;
		width: 48px;
		place-items: center;
		border: 1px solid var(--color-theme);
		border-radius: 100%;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 20px;
		text-decoration: none;
		line-height: 1;
		&[rel="prev"],
		&[rel="next"]{
			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 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" fill="%23fff"/></svg>') no-repeat center / 50%;
			border-color: transparent;
			color: #fff;
			font-size: 0;
		}
		&[rel="prev"]{
			transform: scale(-1, 1);
		}
		&[rel="list"]{
			aspect-ratio: unset;
			width: auto;
			min-width: min(80%, 240px);
			height: 48px;
			padding: 8px 1.5em;
			border-radius: 24px;
			font-size: inherit;
		}
		&.lsc-current-page{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
	}
	[LSC-LB*="lscListPgn"]{
		display: none;
	}
}

.wrap{
	width: var(--wrap);
	margin: 0 auto;
}

.subject{
	margin: 0;
	/* !important は .fr-view 対策 */
	padding-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px)!important;
	font-weight: 700;
	font-size: clamp(32px, calc(40 / 768 * 100dvw), 40px);
	color: var(--color-theme);
	text-align: center;
	letter-spacing: 0.05em;
}

.headline{
	margin: 0;
	padding: 0;
	font-weight: 700;
	/* !important は .fr-view 対策 */
	font-size: clamp(32px, calc(40 / 768 * 100dvw), 40px)!important;
	color: var(--color-theme);
	text-align: center;
	letter-spacing: 0.05em;
}

.title{
	display: grid;
	grid-row-gap: 8px;
	position: relative;
	padding: 0;
	font-weight: 700;
	/* !important は .fr-view 対策 */
	font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px)!important;
	line-height: 1.4;
	letter-spacing: 0.05em;
	&:after{
		content: "";
		width: 100%;
		height: 3px;
		background: #4AACD9;
		background: linear-gradient(90deg, rgba(74, 172, 217, 1) 6%, rgba(221, 221, 221, 1) 6%);
	}
}

.subTitle{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 0.5em;
	color: inherit;
	font-weight: 700;
	font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px)!important;
	letter-spacing: 0.05em;
	&:before{
		content: "";
		width: 3px;
		height: 1em;
		background: rgba(var(--color-theme-rgb), .5);
		transform: translateY(calc(0.875em - 50%));
	}
}

.buttonSet{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px;
	@media (max-width: 575.98px) {
		flex-direction: column;
		padding: 0 10%;
	}
}

.button{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 0.5em;
	min-width: min(100%, 240px);
	min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
	padding: 0.25em 1.5em;
	background: var(--color-theme);
	border-radius: 8px;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	&:before,
	&:after{
		content: "";
		grid-column: 2;
		grid-row: 1;
		aspect-ratio: 1;
		width: 20px;
	}
	&:before{
		background: currentColor;
		border-radius: 100%;
	}
	&:after{
		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"><path d="M1.03,9.05h11.47l-5.01,5.14c-.4.41-.4,1.09,0,1.5.4.41,1.05.41,1.45,0l6.77-6.94c.1-.1.17-.21.22-.34.05-.13.08-.26.08-.4s-.03-.27-.08-.4c-.05-.13-.13-.24-.22-.34L8.94.31c-.1-.1-.21-.17-.33-.23C8.49.03,8.35,0,8.22,0s-.27.03-.39.08c-.12.05-.24.13-.33.23-.1.1-.17.21-.22.34-.05.13-.08.26-.08.4s.03.27.08.4c.05.13.13.24.22.34l5,5.15H1.03c-.56,0-1.03.47-1.03,1.05s.46,1.05,1.03,1.05Z"/></svg>') no-repeat center / 50%;
	}
}

.list{
	display: grid;
	grid-gap: 8px;
	list-style: none;
	&:where(.point, .count){
		& > li{
			position: relative;
			padding-left: 1em;
			&:before{
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	&.point{
		list-style: none;
		margin: 0;
		padding: 0;
		& > li{
			&:before{
				content: "●";
				color: var(--color-theme);
				transform: scale(0.5);
			}
		}
	}
	&.notes{
		list-style: none;
		margin: 0;
		padding: 0;
		& > li{
			display: block;
			padding-left: 14px;
			text-indent: -14px;
			font-size: 14px;
			position: relative;
			&:before{
				content: "※";
			}
		}
	}
	&.count{
		list-style: none;
		margin: 0;
		padding: 0;
		counter-reset: count;
		grid-column-gap: 0;
		& > li{
			padding-left: 1em;
			&:before{
				counter-increment: count;
				content: counter(count)".";
			}
		}
		&:has(li:nth-child(10)) > li{
			padding-left: 1.5em;
			&:nth-child(-n+9):before{
				content: "0"counter(count)".";
			}
		}
		& .list.count{
			& > li{
				&:before{
					content: "（"counter(count)"）";
				}
			}
		}
	}
}

.table{
	& :where(th, td, dt, dd){
		padding: 0.8em;
		line-height: 1.5;
	}
	& :where(th,td){
		border: 1px solid #ccc;
		vertical-align: middle;
	}
	&:is(table){
		width: 100%;
		border-collapse: collapse;
	}
	& thead{
		background: rgba(var(--color-theme-rgb), 0.15);
	}
	& th{
		background: rgba(var(--color-bg-rgb), 0.7);
	}
	& > dt{
		background: rgba(var(--color-theme-rgb), 0.15);
	}
	& > dd{
		background: rgba(var(--color-bg-rgb), 0.7);
	}
	@media (max-width: 575.98px) {
		& > dd+dt{
			margin-top: 2px;
		}
	}
	@media (min-width: 576px) {
		&:is(dl){
			display: grid;
			grid-template-columns: clamp(132px, 30%, 15em) 1fr;
			grid-gap: 3px 0;
			}
	}
}

.googlemap{
	& iframe{
		aspect-ratio: 3 / 2;
		width: 100%;
		height: auto;
	}
}

/* youtube 埋め込み */
.youtube,
.youtubeShorts{
	display: grid;
	& iframe{
		justify-self: center;
		height: auto;
	}
	&.youtube iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		max-width: 850px;
	}
	&.youtubeShorts iframe{
		aspect-ratio: 9 / 16;
		width: 31.6%;
	}
}

.center{
	text-align: center;
	justify-items: center;
}