/* CSS Document */

#main{}
	#main article{
		margin-top: var(--space);
		}

#hero{}
	#hero .slick-slider{
		transition: opacity 0.2s ease-out;
		}
	#hero .slick-initialized{
		opacity: 1 !important;
		}
	#hero .slick-slide{}
/*
		#hero .slick-slide:after{
			content: "";
			display: block;
			width: 100%;
			height: 4px;
			background: currentColor;
			transform: scaleX(0);
			transform-origin: left center;
			}
*/
	#hero .slick-active{}
		#hero .slick-active:after{
			animation: bar linear 6s forwards;
			}
	@-webkit-keyframes bar{
		0% {transform: scaleX(0);}
		100% {transform: scaleX(1);}
		}

#banner{
	position: relative;
	margin-top: 2em;
	}
	#banner li{
		width: min(728px, calc(var(--wrap) - 6em));
		margin: 0 0.5em;
		}
	#banner .slick-list{
		margin: 0 3em;
		}
	#banner .slick-arrow{
		position: absolute;
		top: 50%;
		width: 2em;
		height: 2em;
		background: none;
		border: 1px solid currentColor;
		border-radius: 100%;
		transform: translateY(-50%);
		}
		#banner .slick-arrow svg{
			position: absolute;
			top: 0;
			height: 0;
			width: 100%;
			height: 100%;
			transform: scale(0.6);
			}
	#banner .slick-prev{
		left: 0;
		}
	#banner .slick-next{
		right: 0;
		}

#maintenance{}
	#maintenance h2{
		display: grid;
		grid-gap: 0.5em;
		justify-content: center;
		}
		#maintenance h2:before{
			justify-self: center;
			content: attr(data-ruby);
			font-size: min(4vw, 0.7em);
			letter-spacing: 0.05em;
			line-height: 1em;
			}
	#maintenance .wrap > div{
		justify-self: center;
		}
	#maintenance .wrap{
		display: grid;
		grid-gap: 1em;
		}

#warning{}
	#warning dl{
		display: grid;
		grid-gap: 1em;
		}
	#warning dt+dd{
		order: -1;
		}
	#warning dt+dd+dd{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-height: calc(1.5em * 2);
		line-height: 1.5em;
		overflow: hidden;
		}
	#warning dd{}
		#warning dd:last-child{
			justify-self: center;
			margin-top: 1em;
			}
		#warning dd time{
			font-size: 0.875em;
			}

#login{}
	#login section{
		margin-top: var(--space);
		border: 1px solid currentColor;
		}
	#login h2{
		font-size: 1.2em;
		font-weight: 700;
		line-height: 1.5em;
		}
	#login h2+div{
		margin-top: 1em;
		}
	#login h3+div{
		margin-top: 0.5em;
		}
	#login p{
		line-height: 1.5em;
		}
	#login .buttonSet{
		margin-top: 2em;
		}

#contents{
	margin-top: var(--space);
	}

#flow{
	display: grid;
	grid-gap: 2em;
	}
	#flow h3{
		font-weight: 700;
		font-size: 1.2em;
		text-align: center;
		line-height: 1.5em;
		}
		#flow h3:not(:first-child){
			margin-top: 1em;
			}
	#flow dl{
		display: grid;
		grid-gap: 1em;
		text-align: center;
		border: 1px solid currentColor;
		}
	#flow :where(dt,dd){
		line-height: 1.5em;
		}
	#flow dt{
		font-weight: 700;
		font-size: 1.125em;
		}
	#flow dd{}
		#flow dd svg{
			width: 5em;
			height: 5em;
			}
		#flow dd img{
			width: 5em;
			height: auto;
			}

#information{}
	#information .buttonSet{
		margin-top: 2em;
		}

#accsess{}
	#accsess h2+div{
		display: grid;
		grid-gap: 1em;
		margin-top: 1.5em;
		line-height: 1.5em;
		}
	#accsess #gMapsIframe{
		position: relative;
		padding-top: 60%;
		border: 1px solid currentColor;
		}
		#accsess #gMapsIframe iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}

#pageLink{
	margin-top: var(--space);
	}
	#pageLink ul{
		display: flex;
		justify-content: center;
		}
	#pageLink li{}
		#pageLink li:before,
		#pageLink li:after{
			position: relative;
			width: 0;
			height: 1.2em;
			border-left: 1px solid rgb(var(--btn-primary-fg));
			transform: translateY(0.2em);
			}
		#pageLink li:before{
			content: "";
			margin-right: 1em;
			}
		#pageLink li:last-child:after{
			content: "";
			margin-left: 1em;
			}
		#pageLink li a{
			line-height: 1.5em;
			}



/* for lower */
@media (max-width: 1399.98px) {
/*1399px以下*/
}
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#flow{}
	#flow dl{
		padding: 1.5em;
		}
}


/* Small */
@media (max-width: 767.98px) {
/*767px以下*/
#login{}
	#login section{
		padding: 1em;
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#banner{
	padding: 0 1em;
	}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#banner{
	padding: 0 2em;
	}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* Medium */
@media (min-width: 768px) {
/*768px以上*/
#hero{}
	#hero .thumb{
		padding-top: 50%;
		}
#login{}
	#login section{
		padding: 1.5em;
		}
#flow{
	grid-template-columns: repeat(3, 1fr);
	}
	#flow h3{
		grid-column: 1 / 4;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
#login{}
	#login section{
		width: calc(50% - 2em);
		}
	#login .wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
		#login .wrap > *:not(section){
			width: 100%;
			}
#flow{}
	#flow dl{
		padding: 2em;
		}
#information{}
	#information .wrap{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: var(--space);
		}
}
@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以上*/
}