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

/* LINE Seed JP 
font-family: 'LINE Seed JP', serif;
@font-face {
	font-family: "LINE Seed JP";
	src: url("/common/fonts/LINE_Seed_JP/WOFF2/LINESeedJP_OTF_Thd.woff2") format("woff2");
	font-weight: 100;
}
@font-face {
	font-family: "LINE Seed JP";
	src: url("/common/fonts/LINE_Seed_JP/WOFF2/LINESeedJP_OTF_Rg.woff2") format("woff2");
	font-weight: 400;
}
@font-face {
	font-family: "LINE Seed JP";
	src: url("/common/fonts/LINE_Seed_JP/WOFF2/LINESeedJP_OTF_Bd.woff2") format("woff2");
	font-weight: 700;
}
@font-face {
	font-family: "LINE Seed JP";
	src: url("/common/fonts/LINE_Seed_JP/WOFF2/LINESeedJP_OTF_Eb.woff2") format("woff2");
	font-weight: 900;
}
*/

:root{
	--color: #2b2926;
	--color-rgb: 43, 41, 38;
	--color-theme: #0068b6;
	--color-theme-rgb: 0, 104, 182;
	--variable-color: var(--color-theme);
	--color-border: #808080;
	--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: 24px;
	--wrap-fit: calc(min(100dvw, 100%) - 48px);
	--wrap-max: 1140px;
	--wrap: clamp(327px, calc(max(100dvw, 100%) - 48px), 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;
}
_::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 &{
		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;
	}
}

#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;
	}

#siteName{
	& a{
		display: block;
		aspect-ratio: 1 / 0.197;
		background: url('/common/images/logoType.svg') no-repeat center / contain;
		font-size: 0;
		transition: none;
		@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);
			border-radius: 32px;
			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: #e50012;
			}
		}
	}
	@media (max-width: 991.98px) {
		position: fixed;
		top: 0;
		left: 100%;
		display: grid;
		width: min(100%, 480px);
		height: 100%;
		padding: 56px 0;
		background: #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;
			justify-items: center;
			grid-template-columns: 20px auto 20px;
			grid-gap: 32px 0;
			padding: 16px 0;
		}
		& li{
			grid-column: 2;
		}
		& a{
			display: block;
		}
	}
	@media (min-width: 992px) {
		justify-self: end;
		padding: 16px;
		& ul{
			display: flex;
			align-items: center;
			grid-gap: 32px;
			}
		& li{
			display:contents;
			}
		& a{
			display: grid;
			color: #26221f;
			&:hover{
				color: var(--color-theme);
			}
		}
	}
}

#pagePath{
	padding: 16px 0;
	overflow-y: auto;
	& ul{
		display: flex;
		align-items: center;
		grid-gap: 8px 16px;
		width: var(--wrap);
		margin: auto;
		color: var(--color-theme);
		overflow-x: auto;
		font-size: 14px;
		}
	& li{
		white-space: nowrap;
		&:last-child{
			text-transform: uppercase;
			&:has(a){
				display: contents;
				&:after{
					content: "";
					aspect-ratio: 1;
					width: 10px;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;"><polyline points="4 1 10 7 4 13"/></svg>') center no-repeat;
					-webkit-mask-size: contain;
					background: currentColor;
				}
			}
		}
	}
	& a{
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: calc(100% - 26px);
		&:hover{
			text-decoration: underline;
		}
	}
}

#footer{
	background: #f2f2f2;
	}

#fNav{
	padding: 40px 0;
	@media (max-width: 991.98px) {
		padding: 32px 0;
	}
	& ul{
		display: grid;
		grid-gap: 16px 32px;
		width: var(--wrap);
		margin: auto;
		@media (min-width: 576px) and (max-width: 991.98px) {
			grid-template-rows: repeat(7, 1fr);
			grid-auto-flow: column;
		}
		@media (min-width: 992px) {
			grid-template-rows: repeat(5, 1fr);
			grid-auto-flow: column;
		}
	}
	& li{
		list-style: none;
	}
	& a{
		display: grid;
		grid-template-columns: 16px auto;
		grid-gap: 8px;
		line-height: 1.5;
		&:before{
			content: "";
			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: var(--color-theme);
			transform: translateY(0.3em);
		}
		&:hover{
			color: #e50012;
			&:before{
				background: currentColor;
			}
		}
	}
}

#copyright{
	display: grid;
	grid-template-columns: auto var(--wrap) auto;
	place-items: center;
	height: 48px;
	background: #26221f;
	box-sizing: content-box;
	& p{
		grid-column: 2;
		margin: 0;
		padding: 0;
		color: #fff;
		font-size: clamp(12px, 2.1vw, 14px);
		line-height: 1.2;
		text-align: center;
	}
}

#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: #e50012;
	}
	&:before,
	&:after{
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		aspect-ratio: 1;
		width: 48px;
	}
	&:before{
		background: var(--color-theme);
	}
	&: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: 32px;
		background: #fff;
	}
}

#pagenation{
	margin: 16px 0;
	overflow: hidden;
	& ul,
	& ol{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
		width: var(--wrap);
		margin: auto;
		list-style: none;
	}
	& ul{
		& li{
			display: contents;
			&:nth-child(n+2):before{
				content: "｜";
			}
		}
	}
	& a{
		display: grid;
		text-decoration: none;
		&:not([rel]){
			aspect-ratio: 1;
			width: 48px;
			place-items: center;
			background: var(--color-theme);
			color: #fff;
		}
		&[rel]{
			align-items: center;
			grid-gap: 4px;
			color: inherit;
			&: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>') no-repeat center / contain;
				background: currentColor;
			}
		}
		&[rel="prev"]{
			grid-template-columns: 16px auto;
			&:before{
				content: "";
				transform: scale(-1, 1);
			}
		}
		&[rel="next"]{
			grid-template-columns: auto 16px;
			&:before{
				content: "";
				order: 1;
			}
		}
		&.lsc-current-page{
			background: #ccc;
			color: #fff;
			pointer-events: none;
		}
	}
}

#topicsList{}
	#topicsList p{
		padding: 10% 0;
		text-align: center;
		opacity: 0.5;
		}
	#topicsList dl{
		display: grid;
		grid-template-columns: min(30%, 10em) auto;
		grid-gap: 8px 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid #ccc;
		}
	#topicsList dt{
		grid-column: 2;
		grid-row: 2;
		line-height: 1.5;
		}
	#topicsList dt+dd{
		grid-column: 1;
		grid-row: 1 / 4;
		position: relative;
		padding-top: 66.66%;
		}
	#topicsList dt+dd+dd{
		grid-column: 2;
		grid-row: 1;
		}
	#topicsList dl+dl{
		margin-top: 16px;
		}
	#topicsList dd{}
		#topicsList dd img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}
		#topicsList dd time{
			color: #666;
			}

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

.subject{
	margin: 0;
	padding: 0;
	color: var(--color-theme);
	font-weight: bold;
	font-size: clamp(24px, 4.8vw, 32px);
	text-align: center;
	}

.headline{
	position: relative;
	margin: 0;
	padding: 16px;
	background: rgba(var(--color-theme-rgb), 0.1);
	font-weight: bold;
	font-size: min(5vw, 32px);
	text-align: center;
	line-height: 1.5;
	}
	.headline:after{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		border: 16px solid transparent;
		border-top-color: rgba(var(--color-theme-rgb), 0.1);
		transform: translateX(-50%) scaleX(0.6);
		}

.title{
	margin: 0 0 -16px 0;
	padding: 0;
	color: var(--color-theme);
	font-size: clamp(20px, 3.6vw, 24px);
	font-weight: bold;
	line-height: 1.5;
	}

.subTitle{
	margin: 0 0 8px 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
	border-top: 3px solid var(--color-border);
	font-size: clamp(16px, 2.7vw, 18px);
	font-weight: bold;
	line-height: 1.5;
	}

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

.button{
	display: grid;
	grid-template-columns: 1fr 16px;
	align-items: center;
	grid-gap: 8px;
	min-height: 48px;
	padding: 8px 16px;
	background: var(--color-theme);
	border: none;
	color: #fff;
	font-family: inherit;
	font-size:  inherit;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 1.5;
	}
	.button:before{
		content: "";
		order: 1;
		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;
		}
	.button:hover{
		background: #e50012;
		}
	.button:focus{
		background: #e50012;
		}

.list{
	display: grid;
	grid-gap: 8px;
	list-style: none;
	line-height: 1.5;
	}
	.list:where(.point, .count){}
		.list:where(.point,.count) > li{
			position: relative;
			padding-left: 1em;
			}
			.list:where(.point,.count) > li:before{
				position: absolute;
				top: 0;
				left: 0;
				}
	.list.point{}
		.list.point > li{}
			.list.point > li:before{
				content: "●";
				color: #0068b7;
				transform: scale(0.7);
				}
	.list.notes{}
		.list.notes > li{
			display: block;
			grid-column: 1 / 3;
			padding-left: 16px;
			text-indent: -16px;
			}
	.list.count{
		counter-reset: count;
		grid-column-gap: 0;
		}
		.list.count > li{
			padding-left: 1em;
			}
			.list.count > li:before{
				counter-increment: count;
				content: counter(count)".";
				}
			.list.count:has(li:nth-child(10)) > li{
				padding-left: 1.5em;
				}
				.list.count:has(li:nth-child(10)) > li:nth-child(-n+9):before{
					content: "0"counter(count)".";
					}
		.list.count .list.count{}
			.list.count .list.count > li{}
				.list.count .list.count > li:before{
					content: "（"counter(count)"）";
					}

.table{}
	.table :where(th, td, dt, dd){
		padding: 0.8em;
		line-height: 1.5;
		}
	.table :where(th,td){
		border: 1px solid #ccc;
		vertical-align: middle;
		}
	.table:is(table){
		width: 100%;
		border-collapse: collapse;
		}
	.table thead{
		background: rgba(0, 104, 182, 0.1);
		}
	.table th{
		background: rgba(0, 0, 0, 0.05);
		}
	.table{}
		.table > dt{
			background: rgba(0, 104, 182, 0.1);
			}
		.table > dd{
			background: rgba(0, 0, 0, 0.05);
			}
	@media (max-width: 575.98px) {
		.table{}
			.table > dd+dt{
				margin-top: 1px;
				}
		}
	@media (min-width: 576px) {
		.table{}
			.table:is(dl){
				display: grid;
				grid-template-columns: clamp(132px, 30%, 20em) auto;
				grid-gap: 1px 0;
				}
		}

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

.youtube{
	& iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
}