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

@import url('//fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap');
/*
font-family: 'Shippori Mincho', serif;
*/

:root{
	--base-color: #444444;
	--base-color-rgb: 68, 68, 68;
	--primary-color: #D37D9C;
	--primary-color-rgb: 211, 125, 156;
	--secondary-color: #7997C6;
	--secondary-color-rgb: 121, 151, 198;
	--font-min: 'Shippori Mincho', serif;
	--wrap: min(92vw, 1280px);
	}

body{
	color: var(--base-color);
	font-size: clamp(0.875rem, 3.73vw, 1rem);
	fill: currentColor;
	font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	overflow-wrap: break-word;
	word-wrap: break-word;
	line-height: 1em;
	}
	::selection{
		background: var(--primary-color);
		color: #fff;
		}
	::-moz-selection{
		background: var(--primary-color);
		color: #fff;
		}
	/*body:before{
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff url("../../images/heroLogo.svg") center center no-repeat;
		background-size: 40% auto;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease-out;
		z-index: 1000;
		}
	body.noActive{
		overflow: hidden;
		}
		body.noActive:before{
			pointer-events: all;
			opacity: 1;
			}*/

a{
	color: inherit;
	fill: currentColor;
	transition-property: color,text-decoration,background,background-color,background-size,border,border-color,box-shadow,fill,filter,opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
	}

main{}
	main a{
		color: var(--primary-color);
		}
		main a:where(:hover,:focus){
			text-decoration: underline;
			}
	main p{
		line-height: 1.7em;
		}

#wrapper{
	display: grid;
	width: 100%;
	min-height: 100vh;
	margin: auto;
	}

#header,
#nav,
#main{
	order: -1;
	}

#header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff url("../images/headerBg.jpg") no-repeat;
	background-size: auto 100%;
	z-index: 110;
	}

#siteName{}
	#siteName a{
		position: relative;
		display: block;
		width: 7em;
		height: 1em;
		background: url("../images/logoType.svg") center no-repeat;
		background-size: contain;
		color: transparent;
		white-space: nowrap;
		text-indent: 100vw;
		overflow: hidden;
		}

#navButton{
	position: fixed;
	top: 0;
	right: 0;
	width: 4em;
	height: 4em;
	margin: 0;
	background: var(--primary-color);
	border: none;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	text-indent: 100vw;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
	transition: color 0.2s ease-out;
	z-index: 1000;
	}
	.nav #navButton{
		color: #fff;
		}
	#navButton i{
		position: absolute;
		top: calc(50% - 1px);
		left: 30%;
		width: 40%;
		height: 2px;
		background: currentColor;
		animation-duration: 0.75s;
		animation-fill-mode: forwards;
		transition: transform 0.75s;
		}
		#navButton i:nth-of-type(1){
			transform: translateY(-400%);
			}
		#navButton i:nth-of-type(2){
			}
		#navButton i:nth-of-type(3){
			transform: translateY(400%);
			}
	#navButton.on{}
		#navButton.on i{}
			#navButton.on i:nth-of-type(1){
				animation-name: navButton-bar01_on;
				}
			#navButton.on i:nth-of-type(2){
				animation-delay: 0.375s;
				animation-duration: 0.1875s;
				animation-name: navButton-bar02_on;
				}
			#navButton.on i:nth-of-type(3){
				animation-name: navButton-bar03_on;
				}
	#navButton.off{}
		#navButton.off i{}
			#navButton.off i:nth-of-type(1){
				animation-name: navButton-bar01_off;
				}
			#navButton.off i:nth-of-type(2){
				animation-name: navButton-bar02_off;
				}
			#navButton.off i:nth-of-type(3){
				animation-name: navButton-bar03_off;
				}
	@keyframes navButton-bar01_on{
		0% {
			transform: translateY(-400%);
			}
		50% {
			transform: translateY(0) rotate(0);
			}
		100% {
			transform: translateY(0) rotate(45deg);
			}
		}
	@keyframes navButton-bar01_off{
		0% {
			transform: translateY(0) rotate(45deg);
			}
		50% {
			transform: translateY(0) rotate(0);
			}
		100% {
			transform: translateY(-400%);
			}
		}
	@keyframes navButton-bar02_on{
		0% {
			transform: scaleX(1);
			}
		100% {
			transform: scaleX(0);
			}
		}
	@keyframes navButton-bar02_off{
		0% {
			transform: scaleX(0);
			}
		100% {
			transform: scaleX(1);
			}
		}
	@keyframes navButton-bar03_on{
		0% {
			transform: translateY(400%);
			}
		50% {
			transform: translateY(0) rotate(0);
			}
		100% {
			transform: translateY(0) rotate(-45deg);
			}
		}
	@keyframes navButton-bar03_off{
		0% {
			transform: translateY(0) rotate(-45deg);
			}
		50% {
			transform: translateY(0) rotate(0);
			}
		100% {
			transform: translateY(400%);
			}
		}

#nav{}
	.nav #nav{}
		.nav #nav ul{
			pointer-events: all;
			opacity: 1;
			}
	#nav ul{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 120;
		display: grid;
		justify-items: center;
		align-content: center;
		grid-gap: 2em;
		width: 100%;
		height: 100%;
		background: var(--primary-color);
		color: #fff;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
		#nav ul:before{
			content: "";
			display: block;
			width: 7em;
			height: 1em;
			margin-bottom: 1em;
			background: url("../images/logoType.svg") center no-repeat;
			background-size: contain;
			font-size: 3em;
			}
	#nav a{
		position: relative;
		display: inline-block;
		color: inherit;
		font-size: 1.5em;
		font-family: var(--font-min);
		line-height: 1em;
		}
		#nav a:hover{
			color: var(--primary-color);
			}
			#nav a:hover:after{
				transform: scaleX(1);
				}
		#nav a:after{
			content: "";
			position: absolute;
			top: 0;
			left: -0.1em;
			width: calc(100% + 0.2em);
			height: calc(100% + 0.1em);
			background: #fff;
			transform: scaleX(0);
			transform-origin: left center;
			transition: transform 0.2s ease-out;
			z-index: -1;
			}

#pagePath{
	display: none;
	}

#main{
	margin-bottom: auto;
	padding-bottom: var(--space);
	}

#pageTop{
	position: fixed;
	right: 1.5em;
	bottom: 1.5em;
	width: 3em;
	height: 3em;
	background: var(--primary-color);
	color: #fff;
	white-space: nowrap;
	text-indent: 100vw;
	transition: opacity 0.2s ease-out;
	cursor: pointer;
	overflow: hidden;
	z-index: 10;
	}
	.scrollTop #pageTop{
		pointer-events: none;
		opacity: 0;
		}
	#pageTop:before{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1em;
		height: 1em;
		border: solid currentColor;
		border-width: 1px 1px 0 0;
		transform: translate(-50%, -25%) rotate(-45deg);
		}

#footer{
	background: url("../images/footerBg.jpg") center no-repeat;
	background-size: cover;
	color: #fff;
	}

#fBoard{
	display: grid;
	grid-gap: 1.5em;
	width: var(--wrap);
	margin: var(--space) auto 0;
	padding: 2em 0;
	background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.5), rgba(var(--secondary-color-rgb), 0.5));
	}
	#fBoard:before{
		content: "";
		justify-self: center;
		display: grid;
		justify-items: center;
		align-items: center;
		font-size: min(5vw, 1.5em);
		background: url("../images/logoType_line.svg") center no-repeat;
		background-size: contain;
		}
	#fBoard p{
		text-align: center;
		line-height: 1em;
		}
		#fBoard p:nth-of-type(1){
			font-family: var(--font-min);
			font-size: min(5vw, 2em);
			letter-spacing: 0.1em;
			}
		#fBoard p:nth-of-type(2){
			}

#fAddress{
	display: grid;
	grid-gap: 1.5em;
	width: var(--wrap);
	margin: 2em auto var(--space);
	padding: 2em;
	background: rgba(255,255,255,0.5);
    border-top: 2px solid var(--primary-color);
    color: var(--base-color);
	}
    #fAddress dt{
        font-size: 1.2em;
        }
    #fAddress dd{
        line-height: 1.6em;
        }

#copyright{}
	#copyright p{
		padding: 1em;
		background: var(--secondary-color);
		color: #fff;
		text-align: center;
		}

.subject{
	font-family: var(--font-min);
	font-size: min(5vw, 2em);
	letter-spacing: 0.1em;
	line-height: 1em;
	text-align: center;
	}

.linkBut{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(80%, 18em);
	padding: 1em 1.5em;
	background: #fff;
	border: 1px solid currentColor;
	color: inherit;
	font-family: var(--font-min);
	text-align: center;
	line-height: 1.3em;
	text-decoration: none;
	}
	.linkBut:hover{
		color: var(--primary-color);
		}
		.linkBut:hover:before{
			transform: translateX(-75%) rotate(-30deg);
			}
		.linkBut:hover:after{
			transform: translateX(-75%) rotate(30deg);
			}
	.linkBut:before,
	.linkBut:after{
		content: "";
		position: absolute;
		top: 50%;
		right: -1em;
		height: 1px;
		width: 2em;
		background: currentColor;
		transform-origin: right center;
		transition: transform 0.2s ease-out;
		}

.topicsList{}
	.topicsList dl{
		position: relative;
		display: grid;
		padding: min(calc(var(--space) / 2), 1.5em) 0;
		color: #555;
		}
	.topicsList dt{
		font-weight: inherit;
		line-height: 1.7em;
		}
	.topicsList dd{
		display: contents;
		}
		.topicsList dd time{
			line-height: 1.7em;
			order: -1;
			}
		.topicsList dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}




/* for lower */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#header{
	background-position: center;
	}
#siteName{
	margin: 0.8em 1em;
	}
	#siteName a{
		font-size: 2.4em;
		}
#fBoard{}
	#fBoard:before{
		width: 13em;
		height: 1em;
		}
}


/* Small */
@media (max-width: 575.98px) {
/*575px以下*/
:root{
	--space: 3rem;
	}
}
}


/* Medium */
@media (min-width: 576px) {
/*576px以上*/
}
@media (min-width: 576px) and (max-width: 991.98px) {
/*576px～991px*/
:root{
	--space: 4rem;
	}
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
:root{
	--space: 5rem;
	}
#header{
	background-position: right;
	}
#siteName{
	margin: 1.5em 2em;
	}
	#siteName a{
		font-size: 3em;
		}
#fBoard{}
	#fBoard:before{
		width: 17em;
		height: 1.2em;
		}
#fAddress{
	text-align: center;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}


/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}


/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}