/* CSS Document */

#hero {}

#hero li {
	position: relative;
}

#hero li:before {
	content: "";
	display: block;
	padding-top: min(50%, 50vh);
}

#hero li img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#hero {
	width: 100%;
	height: 50vh;
}

#banner {
	margin: calc(var(--space) * 0.5) 0;
	overflow: hidden;
}

#banner li {
	position: relative;
	width: max(25vw, 280px);
	margin: 0 calc(var(--space) * 0.2);
	background: var(--theme-color-drken);
}

#banner li img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#banner .slick-slider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	grid-gap: calc(var(--space) * 0.5);
}

#banner .slick-list {
	width: 100%;
}

#banner .slick-slide {}

#banner .slick-slide:before {
	content: "";
	display: block;
	padding-top: 25%;
}

#banner .slick-arrow {
	width: 36px;
	height: 36px;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background: var(--theme-color-tint);
	font-size: 0;
	z-index: 1;
}

#banner .slick-arrow:hover {
	opacity: 1;
}

#banner .slick-prev {
	order: 1;
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>');
}

#banner .slick-next {
	order: 3;
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>');
}

#banner .slick-dots {
	max-width: calc(100vw - 200px);
	order: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#banner .slick-dots li {
	width: 10px;
	height: 10px;
	background: rgba(var(--base-color-rgb), 0.25);
	border-radius: calc(var(--theme-corner) * 16);
	overflow: hidden;
}

#banner .slick-dots li.slick-active {
	width: 14px;
	height: 14px;
	background: var(--theme-color);
}

#banner .slick-dots button {
	opacity: 0;
}

#banner+#warning {
	margin-top: 0;
}

#warning {
	display: grid;
	grid-gap: clamp(16px, 3.6vw, 24px);
	width: min(var(--wrap-fit), var(--wrap-min));
	color: var(--theme-color-danger);
}

#warning h2 {
	justify-self: center;
}

#warning h2+div {
	display: contents;
}

#warning dl {
	position: relative;
	padding: clamp(16px, 3.6vw, 24px);
	border: 2px solid var(--theme-color-danger);
	border-radius: var(--theme-corner);
}

#warning dl {
	display: grid;
	grid-gap: clamp(4px, 1.2vw, 8px);
	font-weight: 700;
	line-height: 1.6;
}

#warning dt {
	font-size: clamp(16px, 2.7vw, 18px);
	letter-spacing: 0.05em;
}

#warning dt+dd {
	justify-self: end;
}

#warning dt+dd+dd:not(:last-child) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: calc(1.5em * 2);
	overflow: hidden;
}

#warning dd {}

#warning dd:last-child {
	display: contents;
}

#warning dd a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

#program {}

#program h2+div {
	margin: 2em 0;
}

#login {
	width: 100%;
	display: grid;
	grid-template-columns: auto var(--wrap) auto;
	margin-top: 0;
	padding: min(var(--space), 4em) 0;
	background: rgba(var(--theme-color-tint-rgb), 0.2);
}

#login>* {
	grid-column: 2;
}

#login h2 {
	justify-self: center;
	font-weight: 700;
	line-height: 1.7;
}

#login header {
	display: grid;
	grid-gap: 1em;
	justify-items: center;
}

#login section {
	display: grid;
	grid-gap: 1em;
	justify-items: center;
	margin-top: 2em;
	padding: calc(var(--space) * 0.5);
	background: rgba(255, 255, 255, 0.75);
	border-radius: var(--theme-corner);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#login ul {
	display: grid;
	grid-gap: 1em;
	margin-top: 1.5em;
}

#flow {}

#flow section {
	margin-top: 2em;
	background: rgba(255, 255, 255, 0.75);
	border-radius: var(--theme-corner);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

#flow section:nth-of-type(n+2) {
	margin-top: calc(var(--space) * 0.75);
}

#flow h3 {
	padding: 0.8em;
	background: var(--theme-color);
	color: var(--theme-font-color);
	text-align: center;
}

#flow h3+div {
	display: grid;
	grid-gap: 2em;
	padding: calc(var(--space) * 0.5);
}

#flow h3+div:before,
#flow h3+div:after {
	content: "";
	order: -1;
	border: 0 dashed currentColor;
}

#flow dl {
	counter-increment: count;
	display: grid;
	grid-gap: 1em;
	align-content: start;
	justify-items: center;
	text-align: center;
	line-height: 1.6;
}

#flow dl:before {
	justify-items: center;
	content: 'STEP' counter(count);
	font-weight: 900;
	letter-spacing: 0.1em;
	opacity: 0.5;
}

#flow dl:after {
	content: "";
	grid-row: 2;
	width: 5em;
	height: 5em;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background: var(--theme-color-tint);
}

#flow dt {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

#flow dd {
	font-size: 14px;
}

#flowRegistration {}

#flowRegistration dl:nth-of-type(1):after {
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>');
}

#flowRegistration dl:nth-of-type(2):after {
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg>');
}

#flowRegistration dl:nth-of-type(3):after {
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>');
}

#flowReservation {}

#flowReservation dl:nth-of-type(1):after {
	-webkit-mask-image: var(--icon-calendar);
}

#flowReservation dl:nth-of-type(2):after {
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>');
}

#flowReservation dl:nth-of-type(3):after {
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>');
}

#topics {
	width: 100%;
	display: grid;
	grid-template-columns: auto var(--wrap) auto;
	padding: var(--space) 0;
	background: rgba(var(--theme-color-gray-rgb), 0.1);
}

#topics>* {
	grid-column: 2;
}

#topics h2+div {
	width: min(100%, var(--wrap-min));
	justify-self: center;
}

#topics h2+div+div {
	justify-self: center;
}

#instagram {
	max-width: var(--wrap-min);
}

#instagram h2 {
	display: grid;
	grid-template-columns: 1.5em auto;
	grid-gap: 0.5em;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

#instagram h2:before {
	content: "";
	width: 1.5em;
	height: 1.5em;
	-webkit-mask: var(--icon-instagram) center no-repeat;
	-webkit-mask-size: contain;
	background: currentColor;
}

#instagram h2+div {
	margin-top: 2em;
}

#instagram ul {
	display: grid;
	grid-gap: calc(var(--space) * 0.5);
}

#instagram li {
	background: var(--theme-color-drken);
}

#instagram a {
	position: relative;
	display: block;
	padding-top: 100%;
}

#instagram img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#accsess {
	width: 100%;
	display: grid;
	grid-template-columns: auto var(--wrap) auto;
	grid-gap: 2em 0;
}

#accsess>* {
	grid-column: 2;
}

#accsess h2+div+div {
	display: grid;
	grid-gap: 1em;
	line-height: 1.7;
}

#accsess h3 {
	font-weight: 700;
	letter-spacing: 0.05em;
}

#accsess h3+div+div {
	margin-top: 1em;
	justify-self: center;
}

#accsess p+p {
	margin-top: 1em;
}

#gMapsIframe {
	position: relative;
	grid-column: 1 / 4;
}

#gMapsIframe:before {
	content: "";
	display: block;
	padding-top: 66.66%;
}

#gMapsIframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#pageLink {
	width: var(--wrap);
	margin: auto;
}

#pageLink ul {
	line-height: 1.6;
}

.slick-slider {
	transition: opacity 0.2s ease-out;
}

.slick-slider.slick-initialized {
	opacity: 1 !important;
}



/* for lower */
@media (max-width: 1199.98px) {
	/*1199px以下*/
}

@media (max-width: 991.98px) {
	/*991px以下*/
}

@media (max-width: 767.98px) {

	/*767px以下*/
	#pageLink {}

	#pageLink ul {
		display: grid;
		grid-gap: 1em;
	}

	#pageLink a {
		display: block;
		padding: 1em 24px;
		background: rgba(var(--theme-color-gray-rgb), 0.1);
		border-radius: calc(var(--theme-corner) * 16);
		text-align: center;
		font-size: 14px;
	}
}

@media (max-width: 575.98px) {

	/*575px以下*/
	#flow {}

	#flow h3+div {}

	#flow h3+div:before,
	#flow h3+div:after {
		border-top-width: 1px;
	}

	#flow h3+div:before {
		grid-row: 2;
	}

	#flow h3+div:after {
		grid-row: 4;
	}

	#instagram {}

	#instagram ul {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* Small */
@media (min-width: 576px) {

	/*576px以上*/
	#login {}

	#login ul {
		grid-template-columns: repeat(3, 1fr);
	}

	#flow {}

	#flow h3+div {
		grid-template-columns: 1fr 1px 1fr 1px 1fr;
	}

	#flow h3+div:before,
	#flow h3+div:after {
		grid-row: 1;
		border-left-width: 1px;
	}

	#flow h3+div:before {
		grid-column: 2;
	}

	#flow h3+div:after {
		grid-column: 4;
	}

	#flow dl {
		grid-row: 1;
	}

	#instagram {}

	#instagram ul {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	/*576px～767px*/
}

@media (min-width: 576px) and (max-width: 991.98px) {
	/*576px～991px*/
}

@media (min-width: 576px) and (max-width: 1199.98px) {
	/*576px～1199px*/
}

@media (min-width: 576px) and (max-width: 1399.98px) {
	/*576px～1399px*/
}


/* Medium */
@media (min-width: 768px) {

	/*768px以上*/
	#pageLink {}

	#pageLink ul {
		display: flex;
		align-items: center;
		justify-content: center;
		grid-gap: 1em 0.75em;
		line-height: 1.6;
	}

	#pageLink ul:after {
		content: "|";
		transform: translateY(-0.1em);
	}

	#pageLink li {
		display: contents;
	}

	#pageLink li:before {
		content: "|";
		transform: translateY(-0.1em);
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	/*768px～991px*/
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	/*768px～1199px*/
}

@media (min-width: 768px) and (max-width: 1399.98px) {
	/*768px～1399px*/
}


/* Large */
@media (min-width: 992px) {

	/*992px以上*/
	#login {}

	#login section {
		grid-row: 2;
		width: calc(50% - 1em);
	}

	#login section:nth-of-type(2) {
		justify-self: end;
	}

	#program {}

	#program h2+div {
		grid-template-columns: 1fr 1fr;
	}

	#accsess {}

	#accsess h2+div,
	#accsess h2+div+div {
		grid-row: 2;
		width: calc(50% - 2em);
	}

	#accsess h2+div+div {
		margin: 2em 0;
		align-self: start;
		justify-self: end;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	/*992px～1199px*/
}

@media (min-width: 992px) and (max-width: 1399.98px) {
	/*992px～1399px*/
}


/* 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以上*/
}