@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@600&display=swap');
:root {
	--text-color: #4d4d4d;
	--white: #ffffff;
	--black: #000000;
	--blue: #29abe2;
	--blue-light: #dcf0ff;
	--aqua: #f3faff;
	--gray-light: #f2f2f2;
	--beige: #f2f2e6;
	--border-gray: 1px solid #999999;
	--base-inline-margin: 4vw;
	--nav-inline-margin: 12vw;
	--block-margin-s: calc(36 * var(--base-font-size));
	--block-margin-m: calc(60 * var(--base-font-size));
	--block-margin-l: calc(120 * var(--base-font-size));
	--global-header-height: calc(60 / 16 * 1rem);
	--noto-sans: "Noto Sans JP", sans-serif;
	--roboto-condensed: "Roboto Condensed", sans-serif;
	--base-font-size: 0.145vw;
	--border-thin: 1px;
	--border-medium: 2px;
	--border-bold: 7px;
	scroll-padding-top: var(--global-header-height);
}
@media screen and (min-width: 480px) {
	:root {
		--base-font-size: calc(1 / 16 * 0.6rem);
	}
}
@media screen and (min-width: 768px) {
	:root {
		--base-font-size: calc(1 / 16 * 0.6rem);
	}
}
@media screen and (min-width: 1024px), print {
	:root {
		--global-header-height: calc(160 * var(--base-font-size));
		--base-font-size: calc(1 / 16 * 0.8rem);
		--border-thin: 2px;
		--border-medium: 3px;
		--border-bold: 10px;
	}
}
@media screen and (min-width: 1232px) {
	:root {
		--base-font-size: calc(1 / 16 * 1rem);
		--base-inline-margin: calc((100% - 1200px) / 2);
	}
}
/* ============================== */
/*  BASE */
/* ============================== */
body {
	font-size: calc(15 / 16 * 1rem);
	line-height: 1.75;
	color: var(--text-color);
	line-break: normal;
	font-family: var(--noto-sans);
	font-weight: 400;
	@media screen and (min-width: 768px), print {
		font-size: calc(15.5 / 16 * 1rem);
		line-height: 2;
	}
	@media screen and (min-width: 1024px), print {
		font-size: calc(18 / 16 * 1rem);
		line-height: 2;
	}
	@media screen and (min-width: 1232px) {
		font-size: calc(24 / 16 * 1rem);
		line-height: 2;
	}
}
::-moz-selection {
	background-color: #b3d4fc;
	color: #000000;
	text-shadow: none;
}
::selection {
	background-color: #b3d4fc;
	color: #000000;
	text-shadow: none;
}
h1, h2, h3, h4, h5, h6 {
	font-feature-settings: 'palt';
	font-weight: 600;
}
p, ul, li, dl {
	font-feature-settings: 'palt';
}
menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
a {
	text-decoration: underline;
	transition: color 200ms ease-out, background-color 200ms ease-out, opacity 200ms ease-out;
}
img {
	inline-size: 100%;
}
:focus:not(:focus-visible) {
	outline: 0;
}
iframe {
	inline-size: 100%;
	block-size: auto;
}
summary::-webkit-details-marker {
	display: none;
}
/* フォーム部品 */
[type="text"], [type="email"], [type="search"], [type="tel"], [type="url"], [type="password"], textarea {
	border: none;
	background-color: var(--gray-light);
	border: 1px solid var(--gray-light);
	padding: 0.83333333em;
	transition: 150ms;
	inline-size: 100%;
}
[type="text"]:focus, [type="email"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="url"]:focus, [type="password"]:focus, textarea:focus {
	outline: none;
	border-color: var(--blue);
	background-color: var(--aqua);
}
[type='checkbox'] {
	appearance: none;
	border: 1px solid #999999;
	inline-size: 1.25em;
	block-size: 1.25em;
	position: relative;
	inset-block-start: -0.125em;
	transition: 150ms;
	cursor: pointer;
	vertical-align: middle;
	&::before {
		content: "";
		display: block;
		position: absolute;
		inset-block-start: 0.2em;
		inset-inline-start: 0.15em;
		inline-size: 0.9em;
		block-size: 0.5em;
		border-block-end: max(0.16666667em, 2px) solid transparent;
		border-inline-start: max(0.16666667em, 2px) solid transparent;
		rotate: -45deg;
		transition: 150ms;
	}
	&:checked {
		background-color: var(--blue);
		border-color: var(--blue);
		&::before {
			border-bottom-color: var(--white);
			border-left-color: var(--white);
		}
	}
}
/* ============================== */
/*  LAYOUT,UTILITY */
/* ============================== */
#page {
	inline-size: 100%;
	overflow-x: hidden;
}
@media not screen and (min-width: 768px) {
	.only-lg {
		display: none;
	}
}
@media screen and (min-width: 768px), print {
	.only-sm {
		display: none;
	}
}
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}
/* ============================== */
/*  GLOBAL-HEADER */
/* ============================== */
.global-header {
	position: fixed;
	z-index: 120;
	inline-size: 100%;
	inset-block-start: 0;
	inset-inline-start: 0;
	background: var(--white);
	& + * {
		margin-block-start: var(--global-header-height);
	}
}
/* 〜1024 */
@media not screen and (min-width: 1024px) {
	.global-header {
		block-size: var(--global-header-height);
		display: grid;
		grid-template-columns: 1fr var(--global-header-height);
		grid-template-rows: var(--global-header-height);
		padding-inline-start: 4vw;
		gap: 4vw;
		grid-template-areas:
			"id btn";
		& .site-id {
			grid-area: id;
			inline-size: min(100%, 320px);
			align-self: center;
			@media screen and (min-width: 768px) {
				inline-size: calc(380 / 16 * 1rem);
			}
		}
		& #menu-toggle {
			grid-area: btn;
		}
		& .header-nav {
			display: none;
		}
	}
	#menu-toggle {
		--_bar-shift: 8px;
		--_bar-width: 2px;
		block-size: var(--global-header-height);
		aspect-ratio: 1;
		position: fixed;
		z-index: 140;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		inset-block-start: 0;
		inset-inline-end: 0;
		background-color: var(--blue);
		& .menu-icon {
			display: block;
			inline-size: 1.6em;
			block-size: var(--_bar-width);
			position: absolute;
			transform-origin: center;
			transition: background-color 200ms;
			background-color: var(--white);
			position: relative;
			inset-block-start: -6px;
			&::before, &::after {
				content: '';
				inline-size: 100%;
				block-size: 100%;
				position: absolute;
				transition: rotate 200ms, inset-block-start 200ms 100ms;
				inset-inline-start: 0;
				transform-origin: center;
				background-color: var(--white);
			}
			&::before {
				inset-block-start: calc(var(--_bar-shift) * -1);
			}
			&::after {
				inset-block-start: var(--_bar-shift);
			}
			&:is(.js-clicked *) {
				background-color: transparent;
			}
			&:is(.js-clicked *)::before, &:is(.js-clicked *)::after {
				transition: rotate 200ms 100ms, inset-block-start 200ms;
				inset-block-start: 0;
			}
			&:is(.js-clicked *)::before {
				rotate: 45deg;
			}
			&:is(.js-clicked *)::after {
				rotate: -45deg;
			}
		}
		& .toggle-label {
			font-size: 10px;
			font-weight: 400;
			text-transform: uppercase;
			position: absolute;
			inset-block-end: 5px;
			inset-inline-start: 0;
			text-align: center;
			inline-size: 100%;
			color: var(--white);
		}
	}
	#header-nav {
		position: fixed;
		inset-block-start: var(--global-header-height);
		inset-inline-start: 0;
		inline-size: 100vw;
		block-size: calc(100vh - var(--global-header-height));
		block-size: calc(100dvb - var(--global-header-height));
		background-color: var(--white);
		overflow-y: scroll;
		overflow-x: hidden;
		& > *:last-child {
			padding-bottom: 120px;
		}
	}
	.primary-menu {
		& > li {
			& > a {
				font-size: calc(15 / 16 * 1rem);
				display: block;
				padding: 0.75em var(--nav-inline-margin);
				background-color: var(--blue-light);
				text-decoration: none;
				border-block-start: 1px solid var(--white);
				border-block-end: 1px solid var(--white);
				font-weight: 500;
			}
		}
	}
	.secondary-menu {
		display: block !important;
		font-size: calc(14 / 16 * 1rem);
		line-height: 1.3;
		position: relative;
		background-color: var(--gray-light);
		padding: 1em var(--nav-inline-margin);
		display: flex;
		flex-direction: column;
		gap: 0.8em;
		text-align: left;
		& a {
			color: var(--text-color);
			text-decoration: none;
			display: block;
			padding: 0.5em 0;
		}
	}
	.function-nav {
		font-size: calc(14 / 16 * 1rem);
		line-height: 2.4;
		background-color: var(--white);
		padding: 1em var(--nav-inline-margin);
		& a {
			text-decoration: none;
		}
	}
}
/* 1024〜 */
@media screen and (min-width: 1024px), print {
	.global-header {
		block-size: var(--global-header-height);
		display: grid;
		grid-template-columns: calc(542 * var(--base-font-size)) 1fr;
		grid-template-rows: calc(100 * var(--base-font-size)) calc(60 * var(--base-font-size));
		grid-template-areas:
			"id fnav"
			"gnav gnav";
		& .site-id {
			grid-area: id;
			padding-inline-start: calc(32 * var(--base-font-size));
			align-self: center;
		}
		& .menu-toggle {
			display: none;
		}
		& .header-nav {
			display: contents !important;
		}
		& .global-nav {
			grid-area: gnav;
		}
		& .function-nav {
			grid-area: fnav;
			padding-inline-end: calc(40 * var(--base-font-size));
			padding-block-end: calc(20 * var(--base-font-size));
			align-self: end;
			justify-self: end;
		}
	}
	.global-nav {
		--_global-nav-height: calc(60 * var(--base-font-size));
		font-size: calc(14 / 16 * 1rem);
		line-height: 1.3;
		background-color: var(--blue-light);
		& .primary-menu {
			display: flex;
			justify-content: flex-end;
			& > li {
				inline-size: calc(200 / 16 * 1rem);
				text-align: center;
				position: relative;
				& > a {
					display: grid;
					block-size: var(--_global-nav-height);
					align-items: center;
					text-decoration: none;
					color: var(--text-color);
					background-color: var(--blue-light);
					padding: 0.5em;
					border-inline-start: 1px solid var(--white);
					font-weight: 500;
					&:hover {
						background-color: var(--blue);
						color: var(--white);
					}
				}
			}
		}
		& .secondary-menu {
			font-size: calc(12 / 16 * 1rem);
			line-height: 1.3;
			position: relative;
			z-index: 999;
			background-color: var(--gray-light);
			border: 1px solid var(--white);
			padding: 1.25em 1.0em;
			display: flex;
			flex-direction: column;
			gap: 0.7em;
			text-align: left;
			margin-inline: 0 -1px;
			display: none;
			& a {
				color: var(--text-color);
				text-decoration: none;
				display: block;
				padding: 0.5em;
				&:hover {
					color: var(--blue);
				}
			}
		}
	}
	.function-nav {
		font-size: calc(16 * var(--base-font-size));
		& menu {
			display: flex;
			align-items: center;
			line-height: 1;
		}
		& li + li {
			padding-inline-start: 1.5em;
			margin-inline-start: 1.5em;
			border-inline-start: var(--border-gray);
		}
		& a {
			text-decoration: none;
			&:hover {
				color: var(--blue);
			}
		}
	}
	#js-focus-trap {
		display: none;
	}
}
/*
#js-overlayer {
	background-color: rgb(0 0 0 / 0.4);
	inline-size: 100%;
	block-size: 100vh;
	block-size: 100lvb;
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 120;
}
*/
.js-invalid {
	color: inherit;
	text-decoration: none !important;
	cursor: default;
}
/* ============================== */
/*  FOOTER */
/* ============================== */
.global-footer {
	background-color: var(--blue-light);
	color: #333333;
	margin-block-start: var(--block-margin-l);
	padding: calc(42 * var(--base-font-size)) var(--base-inline-margin) calc(30 * var(--base-font-size));
	display: flex;
	flex-direction: column;
	@media screen and (min-width: 1024px), print {
		margin-block-start: calc(100 * var(--base-font-size));
		padding: calc(50 * var(--base-font-size)) var(--base-inline-margin) calc(20 * var(--base-font-size));
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"address flink"
			"credit credit";
		gap: calc(56 * var(--base-font-size)) calc(88 / 1200 * 100%);
		& .footer-info {
			grid-area: address;
		}
		& .footer-link {
			grid-area: flink;
		}
		& .copyright {
			grid-area: credit;
		}
	}
}
.footer-link {
	& .page-list {
		font-size: max(calc(14 * var(--base-font-size)), calc(14 / 16 * 1rem));
		line-height: 2;
		@media screen and (min-width: 768px), print {
			inline-size: 38em;
			column-count: 2;
			column-gap: 2em;
		}
		@media screen and (min-width: 1024px), print {
			line-height: 1.75;
		}
	}
	& .page-list > li {
		font-size: calc(18 / 14 * 1em);
		break-inside: avoid;
		font-weight: 600;
	}
	& .section-list {
		font-size: max(calc(14 * var(--base-font-size)), calc(13.5 / 16 * 1rem));
		font-weight: 400;
		padding-block-end: 1em;
		& li::before {
			content: "・";
			display: inline-block;
			inline-size: 1em;
			text-align: center;
		}
	}
	& a {
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}
.supplementary-contents {
	font-size: max(calc(18 * var(--base-font-size)), calc(14 / 16 * 1rem));
	line-height: 2;
	border-block-start: var(--border-gray);
	padding-block-start: calc(24 * var(--base-font-size));
	font-weight: 600;
	@media screen and (min-width: 768px), print {
		& > menu {
			display: flex;
			line-height: 1;
		}
		& li + li {
			border-inline-start: 2px solid #999999;
			padding-inline-start: 1em;
			margin-inline-start: 1em;
		}
	}
}
.footer-info {
	font-size: max(calc(16 * var(--base-font-size)), calc(14 / 16 * 1rem));
	line-height: 1.75;
	margin-block: 11vw;
	@media screen and (min-width: 1024px), print {
		margin-block: 0;
	}
	& .footer-logo {
		inline-size: min(100%, 396px);
		margin-block-end: calc(16 * var(--base-font-size));
	}
}
.copyright {
	text-align: center;
	font-size: max(calc(14 * var(--base-font-size)), calc(12 / 16 * 1rem));
	line-height: 1.5;
}
#go-pagetop {
	display: contents;
	& a {
		font-size: 10px;
		display: block;
		position: fixed;
		z-index: 90;
		text-indent: -9999px;
		overflow: hidden;
		inline-size: 5em;
		aspect-ratio: 1;
		transition: 300ms ease;
		inset-inline-end: calc(var(--base-inline-margin) / 2);
		inset-block-end: calc(20 / 16 * 1rem);
		background-color: rgba(63, 169, 245, .6);
		display: none;
		@media screen and (min-width: 1024px), print {
			inline-size: calc(60 * var(--base-font-size));
			inset-inline-end: calc(40 / 16 * 1rem);
			inset-block-end: calc(40 / 16 * 1rem);
		}
	}
	& a::before {
		content: "";
		inline-size: 25%;
		aspect-ratio: 1;
		position: absolute;
		inset-inline-start: 50%;
		inset-block-start: 55%;
		display: block;
		border-block-start: var(--border-medium) solid var(--white);
		border-inline-end: var(--border-medium) solid var(--white);
		transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	}
	& a:hover {
		background-color: rgba(63, 169, 245, 1);
	}
}
/* ============================== */
/*  REPEATABLE */
/* ============================== */
.page-header {
	background: linear-gradient(90deg, #29abe2, #ffff00);
	font-size: calc(48 * var(--base-font-size));
	line-height: 1;
	block-size: calc(150 / 36 * 1em);
	padding: 0.25em var(--base-inline-margin);
	display: grid;
	align-items: center;
	color: var(--white);
	font-weight: 500;
	margin-block-end: calc(90 * var(--base-font-size));
	@media screen and (min-width: 768px), print {
		font-size: calc(36 * var(--base-font-size));
	}
}
.chapter-section {
	padding-inline: var(--base-inline-margin);
	margin-block: calc(80 * var(--base-font-size)) 0;
}
.section-heading.sh1 {
	font-size: calc(46 * var(--base-font-size));
	border-block-end: 2px solid;
	padding-block-start: 0.5em;
	padding-block-end: 0.25em;
	line-height: 1.25;
	font-weight: 500;
	margin-block-end: calc(45 * var(--base-font-size));
	color: var(--blue);
	@media screen and (min-width: 768px), print {
		font-size: calc(60 * var(--base-font-size));
		margin-block-end: calc(45 * var(--base-font-size));
	}
	& .small {
		font-size: 60%;
		position: relative;
		inset-block-start: -0.2em;
	}
}
.section-heading.sh2 {
	font-size: calc(36 * var(--base-font-size));
	line-height: 1;
	margin: 0 0 calc(32 / 36 * 1em);
	color: var(--blue);
	font-weight: 600;
	&:not(:first-child) {
		margin-block-start: var(--block-margin-m);
		@media screen and (min-width: 768px), print {
			margin-block-start: calc(60 * var(--base-font-size));
		}
	}
	& .small {
		font-size: 66.66666666%;
		position: relative;
		inset-block-start: -0.1em;
	}
}
.media {
	display: flex;
	flex-direction: column;
	gap: var(--block-margin-s);
	@media screen and (min-width: 768px), print {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
		& > * {
			inline-size: calc(575 / 1200 * 100%);
		}
		&.reverse {
			flex-direction: row-reverse;
		}
	}
	&:is(p + *) {
		margin-block-start: var(--block-margin-m);
		@media screen and (min-width: 768px), print {
			margin-block-start: calc(80 * var(--base-font-size));
		}
	}
	&:is(.media + *) {
		margin-block-start: var(--block-margin-m);
		@media screen and (min-width: 768px), print {
			margin-block-start: calc(85 * var(--base-font-size));
		}
	}
}
.media .photo figure + figure {
	margin-block-start: calc(36 * var(--base-font-size));
}
.text-block {
	text-align: justify;
	margin-block: calc(calc(1lh - 1em) / -2);
}
figcaption {
	font-size: max(calc(16 * var(--base-font-size)), calc(12 / 16 * 1rem));
	line-height: 1.5;
	margin-block-start: 0.5em;
}
/* ============================== */
/*  TOPPAGE */
/* ============================== */
.hero {
	position: relative;
	display: grid;
	background: url("../images/bg_top-hero.jpg") no-repeat center / cover;
	place-items: center;
	inline-size: 100%;
	block-size: 140vw;
	@media screen and (min-width: 768px), print {
		block-size: 50vw;
	}
	@media screen and (min-width: 1024px), print {
		block-size: min(40vw, 37.5rem);
	}
	& .overlaid-contents {
		inline-size: 80%;
		@media screen and (min-width: 768px), print {
			inline-size: calc(1000 * var(--base-font-size));
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		& .copy {
			font-size: 7vw;
			line-height: 1.5;
			font-weight: 500;
			color: var(--white);
			display: grid;
			place-items: center;
			text-align: center;
			text-shadow: 7px 7px 7px rgb(0 0 0 / 0.3);
			background-color: var(--blue);
			aspect-ratio: var(--aspect-ratio);
			box-sizing: content-box;
			inline-size: calc(100% - var(--border-bold) * 2);
			border: var(--border-bold) solid #6ca3ff;
			aspect-ratio: 3 / 2;
			@media screen and (min-width: 768px), print {
				font-size: calc(48 * var(--base-font-size));
				aspect-ratio: auto;
			}
		}
		& .movie {
			border: var(--border-bold) solid var(--blue);
			& a {
				display: block;
				position: relative;
				overflow: hidden;
				cursor: pointer;
				&::after {
					content: "";
					position: absolute;
					inset-block-start: 0;
					inset-inline-start: 0;
					inline-size: 100%;
					block-size: 100%;
					background: rgb(0 0 0 / 0.2) url("../images/ico_yt.svg") no-repeat center / 18%;
					transition: 400ms;
				}
				&:hover::after {
					background-size: 30%;
					opacity: 0;
				}
				& img {
					aspect-ratio: 3 / 2;
					inline-size: 100%;
					block-size: 100%;
					object-fit: cover;
					transition: 300ms;
				}
				&:hover img {
					scale: 1.2
				}
			}
		}
	}
}
.introduction {
	line-height: 1.5;
	margin-block: 0;
	padding-inline: 0;
	& .introduction-title {
		font-size: calc(40 * var(--base-font-size));
		line-height: 1.5;
		background: linear-gradient(90deg, #29abe2, #ffff00);
		padding: 1em var(--base-inline-margin) 1em;
		color: var(--white);
		text-align: center;
		text-shadow: 2px 2px 2px rgb(0 0 0 / 0.75);
		@media screen and (min-width: 768px), print {
			line-height: 1.2;
			padding-block: 0.95em 0.85em;
			font-size: calc(60 * var(--base-font-size));
		}
	}
	& .introduction-copy {
		text-align: justify;
		background: #f2f2f0 url("../images/bg_top-glove.jpg") no-repeat left bottom / auto 60%;
		padding: 8vw var(--base-inline-margin) 12vw;
		& p + p {
			margin-block-start: 0.85em;
		}
		@media screen and (min-width: 768px), print {
			background-size: auto 100%;
			padding-block: calc(86 / 24 * 1em) calc(114 / 24 * 1em);
		}
	}
}
section.news {
	margin-block-start: max(calc(34 * var(--base-font-size)), 40px);
}
section.news .news-section-heading {
	border-block-end: 2px solid var(--blue);
	font-size: max(calc(36 * var(--base-font-size)), calc(21 / 16 * 1rem));
	line-height: 1;
	font-family: "Crimson Text", serif;
	font-weight: 400;
	font-style: normal;
	color: var(--white);
	& span {
		background-color: var(--blue);
		padding: 0.25em 1em 0.1em;
		display: inline-block;
	}
}
section.news .news-listitem {
	font-size: max(calc(16 * var(--base-font-size)), calc(14 / 16 * 1rem));
	line-height: 1.5;
	font-weight: 400;
	border-block-end: var(--border-gray);
	color: inherit;
	text-decoration: none;
	padding: 0.75em 1em;
	display: block;
	@media screen and (min-width: 768px), print {
		display: flex;
		padding: 0.75em 3em;
	}
	& time {
		display: block;
		margin-block-end: 0.3em;
		@media screen and (min-width: 768px), print {
			inline-size: 7em;
			flex: 0 0 auto;
			margin: 0;
		}
	}
}
.outline {
	margin-block-start: var(--block-margin-l);
	@media screen and (min-width: 768px), print {
		margin-block-start: calc(74 * var(--base-font-size));
	}
	& .section-heading {
		font-size: calc(36 * var(--base-font-size));
		line-height: 1;
		font-weight: 500;
		margin: 0 0 1em;
		text-align: center;
	}
}
.outline-list {
	font-size: max(calc(16 * var(--base-font-size)), calc(14 / 16 * 1rem));
	line-height: 1.5;
	border-inline-end: var(--border-gray);
	border-block-end: var(--border-gray);
	inline-size: 100%;
	@media screen and (min-width: 768px), print {
		display: grid;
		grid-template-columns: 12em 1fr;
		grid-auto-rows: auto;
		border-inline-end: var(--border-gray);
		border-block-end: var(--border-gray);
	}
	& dt {
		border-block-start: var(--border-gray);
		border-inline-start: var(--border-gray);
		background-color: var(--gray-light);
		font-weight: 500;
		padding: 0.75em 2em;
		display: grid;
		place-items: center;
	}
	& dd {
		border-block-start: var(--border-gray);
		border-inline-start: var(--border-gray);
		padding: 0.75em 2em;
		line-height: 1.75;
		font-weight: 500;
	}
}
/* ============================== */
/*  STRENGTH */
/* ============================== */
.capacity-development-list {
	font-size: max(calc(21 * var(--base-font-size)), calc(14.5 / 16 * 1rem));
	line-height: 1.75;
	border-inline-end: var(--border-gray);
	border-block-end: var(--border-gray);
	inline-size: 100%;
	@media screen and (min-width: 768px), print {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-auto-rows: auto;
		border-inline-end: var(--border-gray);
		border-block-end: var(--border-gray);
	}
	& dt {
		font-size: calc(24 / 21 * 1em);
		line-height: 1.5;
		border-block-start: var(--border-gray);
		border-inline-start: var(--border-gray);
		background-color: var(--gray-light);
		font-weight: 500;
		padding: 0.75em 1em;
		display: grid;
		place-items: center;
		text-align: center;
		@media screen and (min-width: 768px), print {
			padding: 0.75em 1.75em;
		}
	}
	& dd {
		border-block-start: var(--border-gray);
		border-inline-start: var(--border-gray);
		padding: 0.75em 1em;
		line-height: 1.75;
		font-weight: 400;
		display: grid;
		align-self: center;
		@media screen and (min-width: 768px), print {
			padding: 2em 4em;
		}
	}
}
.fig-course {
	--_bg-color: #345773;
	--_color-lighten: 9%;
	--_clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
	--_column-gap: calc(16 / 24 * 1em);
	margin-block-start: var(--block-margin-s);
	& ol {
		line-height: 1.5;
		font-weight: 600;
		text-align: center;
		color: var(--white);
		display: flex;
		flex-direction: column;
		gap: var(--_column-gap);
	}
	& li {
		background-color: var(--_bg-color);
		padding: 0.91666667em 1em;
		position: relative;
	}
	& li:not(:last-child)::after {
		content: "";
		display: block;
		block-size: var(--_column-gap);
		aspect-ratio: 1.5 / 1;
		clip-path: var(--_clip-triangle-bottom);
		background-color: inherit;
		margin-inline: auto;
		position: absolute;
		inset-block-end: calc(var(--_column-gap) * -1);
		inset-inline-start: calc(calc(100% + var(--_column-gap) * 1.5) / 2)
	}
	& li:nth-child(2) {
		background-color: color-mix(in srgb, var(--_bg-color), #fff7ff calc(var(--_color-lighten) * 1));
	}
	& li:nth-child(3) {
		background-color: color-mix(in srgb, var(--_bg-color), #fff7ff calc(var(--_color-lighten) * 2));
	}
	& li:nth-child(4) {
		background-color: color-mix(in srgb, var(--_bg-color), #fff7ff calc(var(--_color-lighten) * 3));
	}
	& li:nth-child(5) {
		background-color: color-mix(in srgb, var(--_bg-color), #fff7ff calc(var(--_color-lighten) * 4));
	}
	& li:nth-child(6) {
		background-color: color-mix(in srgb, var(--_bg-color), #fff7ff calc(var(--_color-lighten) * 5));
	}
}
/* ============================== */
/*  FLOW */
/* ============================== */
.fig-flow {
	margin-block-start: calc(96 * var(--base-font-size));
}
/* ============================== */
/*  CASE-STUDY */
/* ============================== */
.example-list {
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--base-font-size));
	margin-block-start: calc(70 * var(--base-font-size));
	& li {
		background-color: var(--beige);
		padding: 1.5em 1.20833333em;
		&:nth-child(even) {
			background-color: var(--blue-light);
		}
		@media screen and (min-width: 768px), print {
			padding: 0;
			min-height: calc(350 / 24 * 1em);
			display: flex;
		}
	}
	& .text {
		margin-block-end: 1.25em;
		@media screen and (min-width: 768px), print {
			display: grid;
			align-content: center;
			padding: 1.5em 1.70833333em;
			margin-block-end: 0;
		}
	}
	& .photo {
		@media screen and (min-width: 768px), print {
			padding: 0;
			inline-size: calc(350 / 24 * 1em);
			flex: 0 0 auto;
			& img {
				inline-size:100%;
				block-size: 100%;
				object-fit: cover;
			}
		}
	}
	& p.facility {
		font-size: calc(28 * var(--base-font-size));
		line-height: 1.75;
		color: var(--blue);
		font-weight: 600;
		margin-block-end: 0.5em;
	}
	& p.comment {
		text-align: justify;
	}
}
.voice-list {
	display: flex;
	flex-direction: column;
	gap: 1.4em;
	& li {
		padding: 1.5em 1.20833333em;
		background-color: var(--beige);
		&:nth-child(even) {
			background-color: var(--blue-light);
		}
	}
	@media screen and (min-width: 768px), print {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: minmax(calc(575 / 24 * 1em), auto);
		gap: calc(50 / 24 * 1em);
		& li {
			padding: 3em 1.97916667em;
			&:nth-child(n) {
				background-color: var(--beige);
			}
			&:nth-child(2), &:nth-child(3) {
				background-color: var(--blue-light);
			}
			&:last-child {
				grid-column: 1 / 3;
			}
		}
	}
	& p.facility {
		font-size: calc(34 * var(--base-font-size));
		line-height: 1.5;
		color: var(--blue);
		font-weight: 600;
		@media screen and (min-width: 768px), print {
			font-size: calc(42 * var(--base-font-size));
		}
	}
	& p.position {
		font-size: calc(28 * var(--base-font-size));
		color: var(--blue);
		font-weight: 600;
		margin-block-end: 1.75em;
		@media screen and (min-width: 768px), print {
			font-size: calc(32 * var(--base-font-size));
		}
	}
	& p.comment {
		text-align: justify;
	}
}
.column-a {
	background-color: var(--beige);
	margin-block: var(--block-margin-m);
	@media screen and (min-width: 768px), print {
		display: flex;
		flex-direction: row-reverse;
		margin-block: calc(80 * var(--base-font-size));
		& .text, & .photo {
			inline-size: 50%;
		}
		& .photo img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}
	& .text {
		padding: 1.75em 1em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		& h3 {
			font-size: 150%;
			line-height: 1.25;
			font-weight: 500;
			padding-block-end: 0.6em;
			margin-block-end: 0.45em;
			border-block-end: 2px solid var(--blue);
			inline-size: 100%;
			color: var(--black);
		}
		& p.comment {
			line-height: 1.75;
		text-align: justify;
		}
		& .em {
			font-weight: 500;
			line-height: 1.5;
			margin-block-end: 1.5em;
			color: var(--black);
		}
	}
}
.text-gov {
	text-indent: 1em;
	font-weight: 400;
}
.place-info {
	& p{
		text-align:justify;
	}
	& h3 {
		font-size: calc(30 * var(--base-font-size));
		line-height: 1.25;
		display: flex;
		align-items: center;
		gap: 1.5em;
		margin-block-end: 1em;
		color: var(--black);
		@media screen and (min-width: 768px), print {
			font-size: calc(36 * var(--base-font-size));
		}
		& img {
			inline-size: calc(180 / 36 * 1em);
			block-size: auto;
			display: block;
			&.wd-s {
				inline-size: calc(136 / 36 * 1em);
			}
			&.wd-m {
				inline-size: calc(180 / 36 * 1em);
			}
		}
	}
	& .photo-gallery {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(20 / 1200 * 100%);
		margin-block-start: calc(28 * var(--base-font-size));
	}
	&:not(:first-child) {
		margin-block-start: calc(80 * var(--base-font-size));
	}
}
section.institution {
	& .section-heading {
		margin-block-end: 0;
	}
}
.institution-list {
	& .num {
		font-size: 150%;
		letter-spacing: -0.05em;
		color: var(--blue);
		inline-size: 2.5em;
		flex: 0 0 auto;
		font-family: var(--roboto-condensed);
	}
}
.institution-list.list-1 {
	& li {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"num mark"
			"desc desc";
		gap: 0.8em 0;
		padding-block: 1em;
		border-block-end: var(--border-gray);
		& .num {
			grid-area: num;
		}
		& .mark {
			grid-area: mark;
			text-align: center;
			padding-inline-end: calc(1.5 * 2.5 * 1em);
			& img {
				inline-size: 60%;
			}
		}
		& .desc {
			grid-area: desc;
		}
		@media screen and (min-width: 768px), print {
			justify-content: space-between;
			display: flex;
			align-items: center;
			padding-block: 1.375em;
			& .mark {
				text-align: center;
				padding-inline-end: calc(60 / 1200 * 100%);
				& img {
					inline-size: calc(266 / 460 * 100%);
				}
			}
			& .desc {
				inline-size: calc(590 / 1200 * 100%);
				flex: 0 0 auto;
				text-align: justify;
			}
		}
	}
}
.institution-list.list-2 {
	& li {
		padding-block: 0.75em;
		display: flex;
		align-items: center;
		border-block-end: var(--border-gray);
	}
	& .photo {
		margin-block-start: var(--block-margin-s);
	}
	@media screen and (min-width: 768px), print {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-block-end: var(--border-gray);
		& ul {
			inline-size: calc(590 / 1200 * 100%);
		}
		& li {
			padding-block: 0.5em;
			display: flex;
			align-items: center;
			block-size: 5em;
			border-block-end: var(--border-gray);
			&:last-child {
				border-block-end: none;
			}
		}
		& .institution-name {
			line-height: 1.75;
		}
		& .photo {
			inline-size: calc(590 / 1200 * 100%);
			block-size: 18em;
			text-align: center;
			margin-block-start: 0;
			& img {
				block-size: 100%;
				inline-size: auto;
			}
		}
	}
}
/* ============================== */
/*  FAQ */
/* ============================== */
.faq-q {
	font-size: calc(27 * var(--base-font-size));
	line-height: 1.4;
	font-weight: 500;
	text-align: justify;
	color: var(--blue);
	border: 1px solid;
	min-block-size: calc(180 / 32 * 1rem);
	padding: 0.75em 3em 0.75em 1em;
	display: flex;
	align-items: center;
	position: relative;
	transition: background-color 200ms;
	margin-block-start: 1.8em;
	@media screen and (min-width: 768px), print {
		font-size: calc(32 * var(--base-font-size));
		line-height: 1.2;
		padding: 1.5em 3em 1.5em 2em;
		margin-block-start: calc(60 * var(--base-font-size));
	}
	&:hover {
		background-color: var(--aqua);
	}
	& .icon {
		display: block;
		inline-size: 0.6em;
		aspect-ratio: 1;
		position: absolute;
		inset-inline-end: 1.2em;
		inset-block-start: calc(calc(100% - 0.6em) / 2 - 0.2em);
		rotate: 45deg;
		border-block-end: var(--border-medium) solid;
		border-inline-end: var(--border-medium) solid;
		transition: 300ms;
	}
	&.is-open .icon {
		inset-block-start: calc(calc(100% - 0.6em) / 2 + 0.2em);
		rotate: 225deg;
	}
}
.faq-a {
	line-height: 1.75;
	font-weight: 400;
	padding-block-start: calc(20 * var(--base-font-size));
	text-align: justify;
}
section.contact {
	& .required {
		color: #174e9c;
	}
	& .notice {
		line-height: 1.5;
		padding: 0.75em 1em;
		border: var(--border-gray);
		margin-block-end: calc(42 * var(--base-font-size));
		@media screen and (min-width: 768px), print {
			padding: 1.7em 1em;
		}
		& .asterisk {
			color: #174e9c;
		}
	}
}
.entry-form-list {
	display: flex;
	flex-direction: column;
	@media screen and (min-width: 768px), print {
		display: grid;
		grid-template-columns: calc(360 / 24 * 1em) 1fr;
		grid-auto-rows: auto;
		align-items: center;
		gap: 30px 1em;
	}
	& dt {
		line-height: 1.25;
		font-weight: 400;
		padding-inline-start: 2em;
		position: relative;
		margin-block: 1.5em 0.5em;
		&:first-child {
			margin-block-start: 0;
		}
		@media screen and (min-width: 768px), print {
			margin: 0;
		}
		&.align-start {
			align-self: start;
		}
		& label {
			& .asterisk {
				color: #174e9c;
				display: block;
				position: absolute;
				inset-inline-start: 0;
				inset-block-start: 50%;
				translate: 0 -50%;
			}
		}
	}
	& dd .check {
		display: flex;
		flex-direction: column;
		gap: 0.6em;
		margin-block: 1em;
		@media screen and (min-width: 768px), print {
			margin-block-start: -0.25em;
		}
		& .label-text {
			padding-inline-start: 1em;
		}
	}
}
.button-bar {
	margin-block-start: calc(100 * var(--base-font-size));
	text-align: center;
	& button {
		font-size: max(calc(21 * var(--base-font-size)), calc(15 / 16 * 1rem));
		inline-size: 19em;
		block-size: 3.0952381em;
		text-align: center;
		background-color: var(--blue);
		color: var(--white);
		font-weight: 500;
		&:hover {
			opacity: 0.7;
		}
	}
}
body:has(.modal-video) {
	overflow: hidden !important;
}
/* ============================== */
/*  PRINT */
/* ============================== */
@media print {
	:root {
		font-size: 20px;
		--base-font-size: 0.14vw;
	}
	#menu-toggle, .secondary-menu, #go-pagetop {
		display: none !important;
	}
	#global-header {
		position: absolute;
	}
	.site-id {
		inline-size: 27em !important;
	}
	.function-nav {
		inline-size: 35em;
	}
}


/* ============================== */
/*  FORM */
/* ============================== */

.errm{
text-align:center;
color:#cc2728;
margin:0 auto 12vw;
}

.formT{
width:100%;
margin:0 auto 12vw;
}
.formT th{
padding:1vw 2vw;
white-space:nowrap;
}
.formT td{
padding:1vw 2vw;
}

.formbtn{
display:flex;
justify-content:center;
}
.formbtn li{
margin:0 2vw;
}
.formbtn li.backbtn input[type=button]{
width:28vw;
height:12vw;
background:#ccc;
color:#111;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}
.formbtn li.sbm input[type="submit"]{
width:46vw;
height:12vw;
background:#29abe2;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}



@media screen and (min-width:768px){

.errm{
text-align:center;
color:#cc2728;
margin:0 auto 60px;
}

.formT{
width:80%;
margin:0 auto 60px;
}
.formT th{
padding:5px 10px;
white-space:nowrap;
}
.formT td{
padding:5px 10px;
}

.formbtn{
display:flex;
justify-content:center;
}
.formbtn li{
margin:0 15px;
}
.formbtn li.backbtn input[type=button]{
width:180px;
height:65px;
background:#ccc;
color:#111;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}
.formbtn li.sbm input[type="submit"]{
width:400px;
height:65px;
background:#29abe2;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

}

/*------------------------------------------------------------
	NEWS RELEASE
------------------------------------------------------------*/
.sjCap{
	font-size:14px;
	line-height:28px;
	margin:10px 0;
}

select.arcLink{
	-webkit-appearance: none;
	width: 100%;
	border: 1px solid #0099CC;
	text-align: center;
	font-size: 24px;
	line-height: 60px;
	color: #0099CC;
}

.arcSelectBox{
	position:relative;
}


.arcSelectBox::after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 25px;
	right: 20px;
	transform: rotate(45deg);
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #3399CC;
	border-bottom-color: #3399CC;
}