@charset "utf-8";

/* ----------------------------------------------------------------------------------------------------
Set

@media screen and (max-width: 1920px) {}
@media screen and (max-width: 1536px) {}
@media screen and (max-width: 1366px) {}
@media screen and (max-width: 1280px) {}
@media print, screen and (max-width: 1024px) {}
@media screen and (max-width: 560px) {}

---------------------------------------------------------------------------------------------------- */

:root {

	--fontFamily-ja: "Inter", "Zen Kaku Gothic New", sans-serif;

	--color-text: rgb(33 33 33);
	--color-bg: rgb(255 255 255);

	--color-site-yellow: rgb(255, 242, 63);
	--color-site-blue: rgb(0, 77, 160);

	--color-white: rgb(255 255 255);
	--color-black: rgb(33 33 33);
	--color-pureblack: rgb(0 0 0);
	--color-lightgray: rgb(245 245 245);
	--color-gray: rgb(158 158 158);
	--color-darkgray: rgb(66 66 66);
	--color-bluegray: rgb(236, 239, 241);

	--color-red: rgb(239 83 80);
	--color-yellow: rgb(255 238 88);

	--easing-fast-2: all 0.04s ease-out;
	--easing-fast-1: all 0.08s ease-out;
	--easing-normal: all 0.12s ease-out;
	--easing-slow-1: all 0.16s ease-out;
	--easing-slow-2: all 0.20s ease-out;

	--fontSize-small-5: 0.55em;
	--fontSize-small-4: 0.62em;
	--fontSize-small-3: 0.70em;
	--fontSize-small-2: 0.79em;
	--fontSize-small-1: 0.89em;
	--fontSize-normal: 1em;
	--fontSize-large-1: 1.13em;
	--fontSize-large-2: 1.27em;
	--fontSize-large-3: 1.42em;
	--fontSize-large-4: 1.60em;
	--fontSize-large-5: 1.80em;
	--fontSize-large-6: 2.03em;
	--fontSize-large-7: 2.28em;
	--fontSize-large-8: 2.57em;
	--fontSize-large-9: 2.89em;

	--fontWeight-normal: 500;
	--fontWeight-bold: 700;

	/* --fontWeight-light-2: 300;
	--fontWeight-light-1: 400;
	--fontWeight-normal: 500;
	--fontWeight-bold-1: 700;
	--fontWeight-bold-2: 800; */

	--lineHeight-narrow-3: 1.2;
	--lineHeight-narrow-2: 1.4;
	--lineHeight-narrow-1: 1.6;
	--lineHeight-normal: 1.8;
	--lineHeight-wide-1: 2.0;
	--lineHeight-wide-2: 2.2;
	--lineHeight-wide-3: 2.4;

	--borderRadius-small-2: 0.2rem;
	--borderRadius-small-1: 0.4rem;
	--borderRadius-normal: 0.8rem;
	--borderRadius-large-1: 1.2rem;
	--borderRadius-large-2: 1.6rem;

	--borderWidth-light-1: 1px;
	--borderWidth-normal: 2px;
	--borderWidth-heavy-1: 3px;
	--borderWidth-heavy-2: 4px;
	--borderWidth-heavy-3: 5px;

	--paddingSection-narrow-4: 2.4em;
	--paddingSection-narrow-3: 3.2em;
	--paddingSection-narrow-2: 4.8em;
	--paddingSection-narrow-1: 6.4em;
	--paddingSection-normal: 8em;
	--paddingSection-wide-1: 9.6em;
	--paddingSection-wide-2: 11.2em;
	--paddingSection-wide-3: 12.8em;
}

@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {}

@media screen and (max-width: 560px) {

	:root {
		--paddingSection-narrow-4: 1.6em;
		--paddingSection-narrow-3: 2.4em;
		--paddingSection-narrow-2: 3.2em;
		--paddingSection-narrow-1: 4.8em;
		--paddingSection-normal: 6.4em;
		--paddingSection-wide-1: 8em;
		--paddingSection-wide-2: 9.6em;
		--paddingSection-wide-3: 11.2em;
	}

}


/* ----------------------------------------------------------------------------------------------------
 * Common
---------------------------------------------------------------------------------------------------- */
html {
	font-size: min(1vw, 113%);

}

body {
	color: var(--color-text);
	font-family: var(--fontFamily-ja);
	font-weight: var(--fontWeight-normal);
	line-height: var(--lineHeight-normal);
	overflow-wrap: anywhere;
	text-autospace: normal;
	text-spacing-trim: trim-start;
	line-break: strict;
	background-color: var(--color-bg);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	font-style: normal;
}

body.loadAct * {
	transition: none !important;
}

.noselect,
.noselect * {
	-webkit-user-select: none;
	user-select: none;
}

a,
button {
	outline: none;
	transition: var(--easing-normal);
}

a {
	color: var(--color-text);
}

a:not(.not):hover {
	color: var(--color-red);
}

a:not(.not) .photo,
a:not(.not) .image,
a:not(.not) img {
	transition: var(--easing-normal);
}

/*
a:not(.not):hover .photo,
a:not(.not):hover .image,
a:not(.not):hover img {
	filter: brightness(80%);
}
*/

ol,
ul {
	list-style: none;
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

header,
footer,
div,
ul,
li,
h1,
h2,
h3,
h4,
nav,
button,
blockquote,
dt,
dd,
figure,
section,
p,
a,
span {
	position: relative;
}

small {
	font-size: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


.clear::after {
	content: '';
	display: block;
	clear: both;
}

.none {
	display: none;
}

.none-show {
	clip-path: polygon(0 0);
}

p {
	margin-bottom: 1.6em;
}

p:not(.not):last-child,
ul:not(.not):last-child,
ol:not(.not):last-child,
li:not(.not):last-child,
figure:not(.not):last-child,
table:not(.not):last-child,
blockquote:not(.not):last-child {
	margin-bottom: 0 !important;
}

mark {
	background-color: var(--color-site-yellow);
	color: inherit;
}

label {
	display: inline-block;
}

sup {
	font-weight: var(--fontWeight-normal);
	font-size: var(--fontSize-small-3);
	padding: 0 0.2em;
	vertical-align: middle;
}


strong,
.text-bold {
	font-weight: var(--fontWeight-bold);
}

.text-normal {
	font-weight: var(--fontWeight-normal);
}

.text-underline {
	text-decoration: underline;
}

.text-small-1 {
	font-size: var(--fontSize-small-1);
}

.text-small-2 {
	font-size: var(--fontSize-small-2);
}

.text-small-3 {
	font-size: var(--fontSize-small-3);
}

.text-small-4 {
	font-size: var(--fontSize-small-4);
}

.text-small-5 {
	font-size: var(--fontSize-small-5);
}

.text-large-1 {
	font-size: var(--fontSize-large-1);
}

.text-large-2 {
	font-size: var(--fontSize-large-2);
}

.text-large-3 {
	font-size: var(--fontSize-large-3);
}

.text-large-4 {
	font-size: var(--fontSize-large-4);
}

.text-large-5 {
	font-size: var(--fontSize-large-5);
}

.text-large-6 {
	font-size: var(--fontSize-large-6);
}

.text-large-7 {
	font-size: var(--fontSize-large-7);
}

.text-large-8 {
	font-size: var(--fontSize-large-8);
}

.text-gray {
	color: var(--color-gray);
}

.text-red {
	color: var(--color-red);
}

.text-white {
	color: var(--color-white);
}

.text-vertical {
	writing-mode: vertical-rl;
}

.in-center {
	text-align: center !important;
}

.in-right {
	text-align: right !important;
}

.in-left {
	text-align: left !important;
}

.pos-center {
	display: flex;
	justify-content: center;
	align-items: center;
}


.nowrap {
	white-space: nowrap;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.block-note {
	padding-left: 1em;
	text-indent: -1em;
}

.block-note::before {
	content: '※';
}

.bg-white {
	background-color: var(--color-white);
}

.bg-gray {
	background-color: var(--color-lightgray);
}

.margin-bt0 {
	margin-bottom: 0 !important;
}

.margin-bt02 {
	margin-bottom: 0.2em !important;
}

.margin-bt04 {
	margin-bottom: 0.4em !important;
}

.margin-bt06 {
	margin-bottom: 0.6em !important;
}

.margin-bt08 {
	margin-bottom: 0.8em !important;
}

.margin-bt10 {
	margin-bottom: 1.0em !important;
}

.margin-bt12 {
	margin-bottom: 1.2em !important;
}

.margin-bt14 {
	margin-bottom: 1.4em !important;
}

.margin-bt16 {
	margin-bottom: 1.6em !important;
}

.margin-bt18 {
	margin-bottom: 1.8em !important;
}

.margin-bt20 {
	margin-bottom: 2.0em !important;
}

.margin-bt22 {
	margin-bottom: 2.2em !important;
}

.margin-bt24 {
	margin-bottom: 2.4em !important;
}

.list-disc,
.list-decimal {
	display: grid;
	gap: 0.2em;
}

.list-disc {
	list-style: disc;
	margin-left: 1.4em;
	margin-bottom: 1.6em;
}

.list-decimal {
	list-style: decimal;
	margin-left: 1.6em;
	margin-bottom: 1.6em;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
	border: var(--borderWidth-light-1) solid color-mix(in srgb, var(--color-pureblack) 100%, transparent) !important;
	background-color: var(--color-white) !important;
	color: var(--color-black) !important;
	line-height: var(--lineHeight-narrow-1) !important;
	border-radius: var(--borderRadius-small-2) !important;
	padding: 0.6em 0.8em !important;
	max-width: 100% !important;
	transition: var(--easing-normal) !important;
	display: inline-block !important;
}

textarea {
	width: 100% !important;
	height: 12.0em !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus {
	border-color: var(--color-site-blue) !important;
	box-shadow: inset 0 0 4px color-mix(in srgb, var(--color-pureblack) 8%, transparent) !important;
	background-color: var(--color-lightgray) !important;
	outline: none !important;
}


.pd {
	width: 100%;
	margin-inline: auto;
	padding-inline: min(6.4vw, 8rem);
	max-width: 96rem;
	text-align: left;
}

.pd.narrow {
	max-width: 88rem;
}

.pd.wide {
	max-width: 120rem;
}

.pd.full {
	max-width: none;
}

.show-tb,
.show-sp {
	display: none !important;
}

.hide-tb,
.hide-sp {}


#wrap {
	width: 100%;
	max-width: 100vw;
	overflow: clip;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	min-height: 100vh;
	min-height: 100lvh;

	&>* {
		min-width: 0;
	}
}

@media screen and (max-width: 1920px) {}

@media screen and (max-width: 1536px) {

	html {
		font-size: min(100%, 4vw);
	}
}


@media print,
screen and (max-width: 1024px) {

	.show-tb {
		display: inline !important;
	}

	.show-tb.block {
		display: block !important;
	}

	.show-tb.inline-block {
		display: inline-block !important;
	}

	.hide-tb {
		display: none;
	}
}

@media screen and (max-width: 560px) {


	.show-sp {
		display: inline !important;
	}

	.show-sp.block {
		display: block !important;
	}

	.show-sp.inline-block {
		display: inline-block !important;
	}

	.hide-sp {
		display: none;
	}
}



/* ----------------------------------------------------------------------------------------------------
Header
---------------------------------------------------------------------------------------------------- */
body {
	overflow: hidden;

	&.load-end {
		overflow: auto;
	}

	& #loading {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;
		right: 0;
		height: 100vh;
		height: 100lvh;
		background-color: var(--color-white);
		z-index: 1000;
		border-inline: var(--borderWidth-heavy-1) solid var(--color-site-blue);
		border-bottom: var(--borderWidth-heavy-1) solid var(--color-site-blue);
		transition: var(--easing-slow-2);

		&>.inner {
			width: 3.2em;
			aspect-ratio: 1;
			border-radius: 100vh;
			border: 0.4em dotted var(--color-site-blue);
			animation: keyLoading 2.4s linear infinite;

		}
	}

	&.load-end #loading {
		opacity: 0;
		visibility: hidden;
	}

}

@keyframes keyLoading {
	0% {
		rotate: 0deg;
	}

	100% {
		rotate: 360deg;

	}
}

#header {
	display: grid;
	border-block: var(--borderWidth-heavy-1) solid var(--color-site-blue);
	background-color: var(--color-white);
	grid-template-columns: auto 1fr auto;
	line-height: var(--lineHeight-narrow-1);
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 10000;

	& * {
		transition: var(--easing-normal);
	}

	&.fix {
		font-size: var(--fontSize-small-2);
	}

	& .toggle {
		display: none;
	}

	& .logo {
		border-right: var(--borderWidth-heavy-1) solid var(--color-site-blue);
		height: 100%;

		& a {
			display: block;
			width: 11em;
			padding: 0.7em 1.1em;
		}

		&>.copy {
			display: none;
		}

	}

	& .nav {
		text-align: right;
		padding-inline: 1.6em;

		& .copy {
			color: var(--color-site-blue);
			font-weight: var(--fontWeight-bold);
			font-size: var(--fontSize-small-2);
			margin-bottom: 0.5em;
		}

		& .list-menu {
			font-size: var(--fontSize-small-1);
			display: flex;
			justify-content: flex-end;
			gap: 1.6em;

			& a {
				display: block;
				text-decoration: none;
				font-weight: var(--fontWeight-bold);

				&::before {
					content: '';
					display: inline-block;
					vertical-align: bottom;
					background-color: var(--color-site-blue);
					aspect-ratio: 1;
					width: 1.8em;
					border-radius: 100vh;
					margin-right: 0.3em;
				}

				&.home::before {
					background-image: url(../images/icon-home-white.svg);
					background-size: 48% auto;
				}

				&.all::before {
					background-image: url(../images/icon-document-white.svg);
					background-size: 40% auto;
				}

				&.about::before {
					background-image: url(../images/icon-about-white.svg);
					background-size: 50% auto;
				}
			}
		}



	}

	& .search {
		background-color: var(--color-site-blue);
		height: 100%;
		aspect-ratio: 1;
		background-image: url(../images/icon-search-white.svg);
		cursor: pointer;
		text-align: center;
		background-size: 44%;
		background-position: center bottom 18%;

		& .label {
			display: block;
			background-color: var(--color-white);
			font-size: var(--fontSize-small-5);
			font-weight: var(--fontWeight-bold);
			border-radius: var(--borderRadius-small-2);
			padding: 0.2em 0.6em 0.1em;
			position: absolute;
			top: 9%;
			left: 50%;
			translate: -50% 0;
			white-space: nowrap;

			&::after {
				content: '';
				display: block;
				background-color: white;
				width: 0.8em;
				aspect-ratio: 1;
				position: absolute;
				top: calc(100% - 1px);
				left: 50%;
				translate: -50% 0;
				clip-path: polygon(50% 100%, 0 0, 100% 0);

			}

		}

	}

	& .block-search {
		opacity: 0;
		visibility: hidden;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100lvh;
		background-color: color-mix(in srgb, var(--color-site-blue) 92%, transparent);
		z-index: 2;
		transition: opacity 0.24s ease-out, visibility 0.24s ease-out;

		&.show-toggle {
			opacity: 1;
			visibility: visible;
		}

		& .close {
			position: absolute;
			width: 4.8em;
			aspect-ratio: 1;
			right: 0;
			top: 0;
			cursor: pointer;

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 48%;
				height: var(--borderWidth-heavy-3);
				border-radius: 100vh;
				background-color: var(--color-site-blue);
				top: 50%;
				left: 50%;
				translate: -50% -50%;

			}

			&::before {
				rotate: -45deg;
			}

			&::after {
				rotate: 45deg;

			}
		}

		&>.inner {
			position: fixed;
			background-color: white;
			inset: min(4.8vw, 2.0em);
			border-radius: var(--borderRadius-large-1);

		}

		& .list-sub-keyword {
			font-size: var(--fontSize-normal);
			gap: 0.8em 0.6em;
		}

		& .block-sub-free {
			font-size: var(--fontSize-normal);

		}

		& .block-search-group {
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			width: 80em;
			max-width: 76vw;

			& .title {
				font-weight: var(--fontWeight-bold);
				background-color: var(--color-site-blue);
				color: var(--color-white);
				padding: 0.9em 0.8rem 0.6em;
				margin-inline: -0.8rem;
				border-radius: var(--borderRadius-small-1);
				margin-bottom: 1.4em;


				& .en {
					display: block;
					font-size: var(--fontSize-small-5);
					color: var(--color-site-yellow);
					line-height: var(--lineHeight-narrow-3);
					letter-spacing: 0.08em;
				}

				& .ja {
					display: block;
					font-size: min(4.4vw, var(--fontSize-large-3));
					line-height: var(--lineHeight-narrow-2);
				}
			}

			& *+.title {
				margin-top: min(12.0vw, 4.8em);
			}


		}
	}
}

body:has(.show-toggle) {
	overflow: hidden;
}


#breadcrumbs {
	font-size: var(--fontSize-small-3);
	line-height: var(--lineHeight-narrow-2);
	padding-inline: 1.2em;
	padding-top: 0.8em;
}

.list-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.6em;

	& a {
		text-decoration: none;
	}

	& li.home {
		background-image: url(../images/icon-home-blue.svg);
		background-size: 0.7em auto;
		background-position: left top 0.25em;
		padding-left: 1.1em;
	}

	& li::after {
		content: '>';
		color: var(--color-site-blue);
		padding-left: 0.5em;
	}

	& li:last-child::after {
		display: none;
	}

}

@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {


	#header {
		grid-template-columns: 1fr auto auto;
		font-size: var(--fontSize-small-1);


		&.fix {
			font-size: var(--fontSize-small-1);
		}


		& .logo {
			border-right: none;
			display: flex;
			align-items: center;

			& a {
				max-width: 32vw;
				padding: 0.5em 0.9em 0.5em 1.2em;
			}

			&>.copy {
				display: block;
				color: var(--color-site-blue);
				font-weight: var(--fontWeight-bold);
				font-size: min(2.4vw, var(--fontSize-small-2));
			}


		}

		& .nav {
			opacity: 0;
			visibility: hidden;
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			height: 100lvh;
			background-color: color-mix(in srgb, var(--color-site-blue) 92%, transparent);
			z-index: 2;
			transition: var(--easing-menu);
			transition: opacity 0.24s ease-out, visibility 0.24s ease-out;

			&.show-toggle {
				opacity: 1;
				visibility: visible;

			}




			& .copy {
				display: none;
			}

			& .menu {
				position: fixed;
				background-color: white;
				inset: min(4.8vw, 2.0em);
				border-radius: var(--borderRadius-large-1);

				& .close {
					position: absolute;
					width: 4.8em;
					aspect-ratio: 1;
					right: 0;
					top: 0;
					cursor: pointer;

					&::before,
					&::after {
						content: '';
						display: block;
						position: absolute;
						width: 48%;
						height: var(--borderWidth-heavy-3);
						border-radius: 100vh;
						background-color: var(--color-site-blue);
						top: 50%;
						left: 50%;
						translate: -50% -50%;

					}

					&::before {
						rotate: -45deg;
					}

					&::after {
						rotate: 45deg;

					}
				}


			}

			& .list-menu {
				position: absolute;
				gap: min(10vw, 4.0em);
				flex-direction: column;
				align-items: flex-start;
				left: 50%;
				top: 50%;
				translate: -50% -50%;

				& a {
					font-size: min(4.4vw, var(--fontSize-large-4));
				}
			}



		}




		& .toggle {
			display: block;
			aspect-ratio: 1;
			background-color: var(--color-bluegray);
			height: 100%;
			cursor: pointer;

			& span {
				display: block;
				height: var(--borderWidth-heavy-1);
				background-color: var(--color-site-blue);
				border-radius: 100vh;
				position: absolute;
				left: 28%;
				right: 28%;
			}

			& span.line01 {
				top: 34%;
			}

			& span.line02 {
				top: 50%;
				translate: 0 -50%;
			}

			& span.line03 {
				bottom: 34%;
			}
		}


	}




}

@media screen and (max-width: 560px) {}



/* ----------------------------------------------------------------------------------------------------
Footer
---------------------------------------------------------------------------------------------------- */

#footer {
	background-color: var(--color-site-blue);
	font-size: var(--fontSize-small-2);
	color: var(--color-white);
	line-height: var(--lineHeight-narrow-1);
	padding-block: min(6.4vw, 1.6rem);
	padding-inline: min(4.8vw, 2.4rem);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 10000;

	&::before {
		content: '';
		display: block;
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		z-index: 1;
		border-bottom: var(--borderWidth-light-1) dotted var(--color-white);
	}

	& .list {
		display: flex;
		column-gap: min(6.4vw, 2.0rem);
		row-gap: 0.6em;

		& li::before {
			content: '';
			display: inline-block;
			width: 0.5em;
			aspect-ratio: 1;
			background-color: var(--color-white);
			border-radius: 100vh;
			margin-right: 0.44em;
			translate: 0 -0.1em;
		}

		& a {
			color: var(--color-white);
			text-decoration: none;
			border-bottom: var(--borderWidth-normal) solid transparent;

			&:hover {
				border-color: var(--color-white);
			}
		}

	}

}

.block-pagetop {
	text-align: right;
	position: sticky;
	bottom: 0;
	font-size: var(--fontSize-small-3);
	line-height: var(--lineHeight-narrow-1);
	pointer-events: none;

	& .block-pagetop-button {
		background-color: var(--color-site-blue);
		transform: skewX(-16deg);
		transform-origin: left bottom;
		padding: 0.5em 1.2em 0.6em 1.4em;
		cursor: pointer;
		color: var(--color-white);
		display: inline-block;
		pointer-events: auto;
		transition: var(--easing-normal);
		translate: 0 100%;

		&.show {
			translate: 0 0%;
		}

		&>.inner {
			display: block;
			transform: skewX(16deg);
			background-image: url(../images/icon-pagetop-white.svg);
			background-size: 1.0em auto;
			background-position: left center;
			padding-left: 1.6em;
			padding-top: 0.16em;
		}

	}


}


@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {

	#footer {
		& .list {
			flex-direction: column;
		}


	}
}

@media screen and (max-width: 560px) {}



/* ----------------------------------------------------------------------------------------------------
Common
---------------------------------------------------------------------------------------------------- */
#wrap {
	border-inline: var(--borderWidth-heavy-1) solid var(--color-site-blue);
}

#contents {
	display: grid;
	grid-template-columns: 1fr min(24vw, 20em);
	padding-top: var(--paddingSection-narrow-3);
	padding-bottom: var(--paddingSection-normal);
	gap: min(4.8vw, 6.4rem);

	&>.sub>.inner {
		position: sticky;
	}

	&>.sub>.inner>*:last-child {
		margin-bottom: 0;
	}

}


.title-sub-en {
	font-weight: 600;
	line-height: 1.0;
	font-size: var(--fontSize-large-6);
	text-align: right;
	color: var(--color-site-yellow);
	-webkit-text-stroke: var(--borderWidth-heavy-2) var(--color-site-blue);
	text-stroke: var(--borderWidth-heavy-2) var(--color-site-blue);
	paint-order: stroke fill;
	letter-spacing: 0.06em;
	padding-right: 0.3em;
	text-shadow: 0.08em 0.08em 0 var(--color-site-blue);
}

.block-sub {
	border: var(--borderWidth-heavy-1) solid var(--color-site-blue);
	line-height: var(--lineHeight-narrow-1);
	border-radius: var(--borderRadius-normal);
	margin-bottom: 3.2em;
	margin-top: -0.28em;
	background-color: var(--color-white);

	&.related {
		margin-bottom: 0;
	}


	&>.title {
		border-bottom: var(--borderWidth-heavy-1) dotted var(--color-site-blue);
		color: var(--color-site-blue);
		font-weight: var(--fontWeight-bold);
		padding: 0.8em 0 0.6em;
		background-size: 1.6em auto;
		background-position: left 0.8rem center;
		padding-left: 2.9em;
		font-size: var(--fontSize-small-1);
	}

	&.related>.title {
		background-size: 1.2em auto;
		padding-left: 2.5em;
		background-image: url(../images/icon-document-blue.svg);
	}

	&.ranking>.title {
		background-image: url(../images/icon-ranking-blue.svg);
	}

	&.search>.title {
		background-image: url(../images/icon-search-blue.svg);
	}

	&>.list {
		padding: 1.0em 0.8rem;
	}

}

.block-sub-free {
	width: 100%;
	margin-top: 1.1em;
	font-size: var(--fontSize-small-1);

	& input {
		width: 100%;
		padding-right: 2.0em !important;
		border: none !important;
		background-color: var(--color-bluegray) !important;
		border-radius: var(--borderRadius-small-1) !important;
		border: var(--borderWidth-normal) solid !important;
		border-color: transparent !important;

		&:focus {
			background-color: var(--color-bluegray) !important;
			border-color: var(--color-site-blue) !important;
		}
	}


	& button {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		aspect-ratio: 3 / 4;
		background-image: url(../images/icon-arrow-blue.svg);
		background-size: 52% auto;
	}
}


.list-sub-ranking {
	display: grid;
	font-size: var(--fontSize-small-2);
	gap: 1.0em;

	& a {
		display: grid;
		grid-template-columns: clamp(4.8em, 32%, 9.6em) 1fr;
		align-items: center;
		gap: 0.8em;
		text-decoration: none;
		font-weight: var(--fontWeight-normal) !important;

	}

	& .photo {
		margin-bottom: 0;
	}

	& .photo img {
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: var(--borderRadius-small-2);
		transition: var(--easing-slow-2);
	}

	& a:hover .photo img {
		filter: brightness(0.68);
	}

	&:not(.related) .photo::before {
		border-top-left-radius: var(--borderRadius-small-2);
		display: block;
		background-color: var(--color-site-blue);
		color: var(--color-white);
		font-weight: var(--fontWeight-bold);
		text-align: center;
		height: 2.0em;
		width: 2.0em;
		line-height: 2.0em;
		position: absolute;
		top: 0;
		left: 0;
		font-size: var(--fontSize-small-2);
		z-index: 1;
	}

	&:not(.related) li:nth-child(1) .photo::before {
		content: '1';
	}

	&:not(.related) li:nth-child(2) .photo::before {
		content: '2';
	}

	&:not(.related) li:nth-child(3) .photo::before {
		content: '3';
	}

	&:not(.related) li:nth-child(4) .photo::before {
		content: '4';
	}

	&:not(.related) li:nth-child(5) .photo::before {
		content: '5';
	}


}

.list-sub-keyword {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fontSize-small-2);
	gap: 0.8em 0.4em;



	& a {
		display: block;
		background-color: var(--color-bluegray);
		text-decoration: none;
		border-radius: 100vh;
		padding: 0.4em 1.0em 0.4em 1.95em;

		&::before {
			content: '';
			display: block;
			width: 0.8em;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0.9em;
			background-image: url(../images/icon-tag-blue.svg);
			background-size: contain;
			transition: var(--easing-normal);

		}

		&:hover,
		&.current {
			background-color: var(--color-site-blue);
			color: var(--color-white);

			&::before {
				filter: brightness(0) invert(1);
			}
		}


	}




}

.title-page {
	font-weight: var(--fontWeight-bold);
	background-color: var(--color-site-blue);
	color: var(--color-white);
	padding: 0.9em 1.1rem 0.6em;
	margin-inline: -1.1rem;
	border-radius: var(--borderRadius-small-1);
	margin-bottom: min(5.6vw, 2.0em);


	& .en {
		display: block;
		font-size: var(--fontSize-small-5);
		color: var(--color-site-yellow);
		line-height: var(--lineHeight-narrow-3);
		letter-spacing: 0.08em;
		margin-bottom: 0.2em;
	}

	& .ja {
		display: block;
		font-size: min(4.8vw, var(--fontSize-large-4));
		line-height: var(--lineHeight-narrow-2);
	}

	& .tag {
		font-size: var(--fontSize-small-2);
	}


}


.block-link {
	display: flex;
	justify-content: center;
	margin-top: 1.6em;

	&.left {
		justify-content: flex-start;
	}

	& a {
		min-width: 14em;
		display: block;
		border-radius: 100vh;
		text-decoration: none;
		font-weight: var(--fontWeight-bold);
		line-height: 3.0em;
		white-space: nowrap;
		text-align: center;
		background-color: var(--color-white);
		color: var(--color-black);
		overflow: hidden;

		&:hover {
			color: var(--color-white);
		}

		&::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			background-color: var(--color-site-blue);
			width: 0;
			transition: var(--easing-slow-2);
			border-radius: 100vh;

		}

		&:hover::before {
			width: 100%;

		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			border: var(--borderWidth-heavy-1) solid var(--color-site-blue);
			border-radius: 100vh;
			z-index: 1;
		}





		& .label {
			display: block;
			padding-left: 3.2em;
			padding-right: 1.6em;

			&::before {
				content: '';
				display: block;
				position: absolute;
				left: 5px;
				top: 5px;
				bottom: 5px;
				aspect-ratio: 1;
				background-color: var(--color-site-blue);
				border-radius: 100vh;
				background-image: url(../images/icon-arrow-white.svg);
				background-size: 44% auto;
				transition: var(--easing-normal);
				width: auto;
			}
		}

		&:hover .label {
			&::before {
				translate: 0.2em 0;
			}
		}







	}





}

@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {
	#contents {
		grid-template-columns: 1fr;
		gap: 4.8em;

		&.entry {
			gap: 3.2em;
		}



		&>.sub {
			width: 100%;
		}


	}

}

@media screen and (max-width: 560px) {}



.list-entry {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
	gap: 3.2em min(3.2vw, 2.4em);
	line-height: var(--lineHeight-narrow-1);
	margin-bottom: 3.2em;

	&>li {
		opacity: 0;
		translate: 0 1.2em;
		transition: all 0.48s ease-out;

		&.show {
			opacity: 1;
			translate: 0 0;

		}

	}

	& a {
		display: block;
		text-decoration: none;

	}





	& .photo {
		aspect-ratio: 3 / 2;
		border-radius: var(--borderRadius-small-1);
		overflow: hidden;
		margin-bottom: 1.2em;
	}

	& .photo::after {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		border-radius: var(--borderRadius-small-2);
		transition: var(--easing-slow-2);
	}

	& a:hover .photo::after {
		border-width: calc(var(--borderWidth-heavy-2) * 1.6);

	}

	& .photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: var(--easing-slow-2);
	}

	& a:hover .photo img {
		scale: 1.08;
		filter: brightness(0.68);
	}


	& .date {
		border-radius: var(--borderRadius-small-2);
		font-size: min(2.8vw, var(--fontSize-small-3));
		line-height: var(--lineHeight-narrow-1);
		display: inline-block;
		background-image: url(../images/icon-time-white.svg);
		background-size: 0.9em auto;
		background-position: left 0.6em center;
		white-space: nowrap;
		background-color: var(--color-site-blue);
		padding: 0.4em 0.5em 0.3em 1.7em;
		color: var(--color-white);
		margin-bottom: 0.8em;
		margin-left: 0.6rem;
	}


	& .title {
		font-weight: var(--fontWeight-bold);
		font-size: min(4.2vw, var(--fontSize-large-1));
		padding-inline: 0.6rem;

		& .new {
			display: inline-block;
			background-color: var(--color-red);
			color: var(--color-white);
			font-size: var(--fontSize-small-5);
			font-weight: 600;
			vertical-align: text-top;
			padding-inline: 0.4em;
			border-radius: var(--borderRadius-small-2);
			scale: 0.84;
		}
	}

	& .tag {
		display: flex;
		flex-wrap: wrap;
		padding-top: 0.6em;
		gap: 0.3em 0.8em;
		padding-inline: 0.6rem;

		& a {
			font-size: var(--fontSize-small-3);
			background-image: url(../images/icon-tag-blue.svg);
			background-size: 0.9em auto;
			background-position: left center;
			padding-left: 1.0em;

		}

	}


}

/* ----------------------------------------------------------------------------------------------------
Home
---------------------------------------------------------------------------------------------------- */

.block-home-main {
	z-index: 1;
	margin-top: var(--paddingSection-narrow-3);

	&>.title {
		width: 44rem;
		max-width: 80vw;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 50%;
		translate: -50% -48%;
		font-weight: var(--fontWeight-bold);
		line-height: 1.0;
		font-size: 3.25em;
		text-align: right;
		color: var(--color-site-yellow);
		-webkit-text-stroke: var(--borderWidth-heavy-3) var(--color-site-blue);
		text-stroke: var(--borderWidth-heavy-3) var(--color-site-blue);
		paint-order: stroke fill;
		letter-spacing: 0.08em;
		text-shadow: 0.06em 0.06em 0 var(--color-site-blue);
		padding-right: 0.4em;

	}

	& .block-home-main-prev,
	& .block-home-main-next {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
		width: calc(100% / 2 - 20.5em);
		min-width: 11.6%;
	}

	& .block-home-main-prev {
		left: 0;
	}

	& .block-home-main-next {
		right: 0;
	}

	& .block-home-main-prev::before,
	& .block-home-main-next::before {
		content: '';
		display: block;
		width: 2.8em;
		aspect-ratio: 1;
		background-color: var(--color-site-blue);
		border-radius: 100vh;
		top: 13.5em;
		position: absolute;
		background-image: url(../images/icon-arrow-white.svg);
		background-size: 44% auto;
	}

	& .block-home-main-prev::before {
		right: 0;
		rotate: 180deg;
	}

	& .block-home-main-next::before {
		left: 0;
	}

	& .block-home-main-nav {
		text-align: center;
		position: absolute;
		top: calc(100% + 0.4em);

		& .swiper-pagination-bullet {
			width: 0.7em;
			aspect-ratio: 1;
			height: auto;
			background-color: var(--color-white);
			opacity: 1;
			transition: var(--easing-fast-1);
			border-radius: 100vh;
		}

		& .swiper-pagination-bullet-active {
			background-color: var(--color-site-blue);
		}
	}
}


.block-home-main-item {
	display: block;
	width: 44em;
	max-width: 80vw;
	scale: 0.82;
	transition: var(--easing-slow-2);
	text-decoration: none;

	&.swiper-slide-active {
		scale: 1.0;
	}

	& .photo {
		margin-bottom: 0;

		& img {
			aspect-ratio: 3 / 2;
			width: 100%;
			object-fit: cover;
			border-radius: var(--borderRadius-small-1);
			transition: var(--easing-slow-2);

		}
	}

	&:hover .photo {
		& img {
			scale: 1.06;
			filter: brightness(0.68);
		}
	}

	& .text {
		padding-inline: 0.8em;

		& .title {
			font-size: min(4.8vw, var(--fontSize-large-4));
			font-weight: var(--fontWeight-bold);
			line-height: var(--lineHeight-narrow-1);
			padding: 0.6em 0 0.1em;
		}

		& .tag {
			display: flex;
			flex-wrap: wrap;
			gap: 0.3em 1.0em;
			font-size: min(2.6vw, var(--fontSize-small-3));
			line-height: var(--lineHeight-narrow-1);
			padding-top: 0.4em;
		}

		& .tag li {
			text-decoration: none;
			background-image: url(../images/icon-tag-blue.svg);
			background-size: 0.85em auto;
			background-position: left center;
			padding-left: 1.2em;
		}

	}







}







@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {



	.block-home-main {


		&>.title {
			-webkit-text-stroke: var(--borderWidth-heavy-2) var(--color-site-blue);
			text-stroke: var(--borderWidth-heavy-2) var(--color-site-blue);
			font-weight: 600;
			font-size: min(8.8vw, 2.89em);

		}


		& .block-home-main-prev::before,
		& .block-home-main-next::before {
			display: none;
		}
	}


}






@media screen and (max-width: 560px) {}


.block-home-about {
	display: flex;
	justify-content: center;
	text-align: center;
	background-color: var(--color-bluegray);
	padding-top: var(--paddingSection-wide-1);
	flex-wrap: wrap;

	& .block-home-about-bg {

		&.top {
			height: 16em;
			background-color: var(--color-bluegray);
			position: absolute;
			bottom: calc(100% - 1px);
			width: 100%;

			&::before {
				content: '';
				display: block;
				background-color: var(--color-white);
				background-image: url(../images/home-about-top.svg);
				width: 100%;
				aspect-ratio: 1600 / 120;

			}
		}

		&.bottom {
			background-image: url(../images/home-about-bottom.svg);
			aspect-ratio: 1600 / 80;
			background-color: var(--color-white);
			margin-top: var(--paddingSection-narrow-1);
			background-size: 100% 100%;
			width: 100%;
		}



	}

	&>.inner {
		opacity: 0;
		scale: 0.8;
	}

	&>.inner.show {
		opacity: 1;
		scale: 1.0;
		transition: all 0.48s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	&>.inner::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		background-image: url(../images/home-about-bg.svg);
		background-size: 100% 100%;
		scale: 1.4 1.25;
	}

	& .logo {
		margin-bottom: 1.2em;

		& img {
			width: 72%;
			max-width: 64vw;

		}
	}

	& .text {
		font-size: min(3.2vw, var(--fontSize-normal));
		font-weight: var(--fontWeight-bold);
		line-height: var(--lineHeight-wide-1);

	}
}

:root {
	--image-home-about-zoom: 5.6em;
}

.image-home-about {
	z-index: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	scale: 0;


	&.image01 {
		width: calc(1.0 * var(--image-home-about-zoom));
		translate: -18em -14em;
	}

	&.image02 {
		width: calc(0.95 * var(--image-home-about-zoom));
		translate: 12em 12em;
	}

	&.image03 {
		width: calc(1.15 * var(--image-home-about-zoom));
		translate: -8em 16em;
	}

	&.image04 {
		width: calc(0.80 * var(--image-home-about-zoom));
		translate: -23em 8em;
	}

	&.image06 {
		width: calc(1.0 * var(--image-home-about-zoom));
		translate: 15em -17em;
	}

	&.image09 {
		width: calc(0.65 * var(--image-home-about-zoom));
		translate: 32em -12em;
	}

	&.image12 {
		width: calc(0.9 * var(--image-home-about-zoom));
		translate: -36em 16em;
	}

	&.image14 {
		width: calc(0.7 * var(--image-home-about-zoom));
		translate: 36em 17em;
	}

	&.image16 {
		width: calc(0.7 * var(--image-home-about-zoom));
		translate: -50em 8em;
	}

	&.image18 {
		width: calc(1.4 * var(--image-home-about-zoom));
		translate: -32em -4em;
	}

	&.image20 {
		width: calc(1.4 * var(--image-home-about-zoom));
		translate: 14em -2em;
	}

	&.image22 {
		width: calc(0.70 * var(--image-home-about-zoom));
		translate: 30em 3em;
	}

	&.image26 {
		width: calc(0.7 * var(--image-home-about-zoom));
		translate: -46em -8em;
	}

	&.image28 {
		width: calc(0.58 * var(--image-home-about-zoom));
		translate: -32em -18em;
	}

	&.image29 {
		width: calc(0.85 * var(--image-home-about-zoom));
		translate: 48em -2em;
	}

	&.image30 {
		width: calc(0.88 * var(--image-home-about-zoom));
		translate: 48em -16em;
	}

	&.image35 {
		width: calc(0.5 * var(--image-home-about-zoom));
		translate: -58em -16em;
	}

	&.image36 {
		width: calc(0.6 * var(--image-home-about-zoom));
		translate: 58em 16em;
	}






	&.image05 {
		width: calc(0.95 * var(--image-home-about-zoom));
		translate: -3em 13em;
	}

	&.image07 {
		width: calc(0.72 * var(--image-home-about-zoom));
		translate: 56em -17em;
	}

	&.image08 {
		width: calc(0.50 * var(--image-home-about-zoom));
		translate: -29em -4em;
	}

	&.image10 {
		width: calc(0.86 * var(--image-home-about-zoom));
		translate: 48em 4em;
	}

	&.image11 {
		width: calc(0.5 * var(--image-home-about-zoom));
		translate: -20em -18em;
	}

	&.image13 {
		width: calc(0.7 * var(--image-home-about-zoom));
		translate: 14em -19em;
	}

	&.image15 {
		width: calc(0.6 * var(--image-home-about-zoom));
		translate: -20em 18em;
	}

	&.image17 {
		width: calc(1.1 * var(--image-home-about-zoom));
		translate: -56em 14em;
	}

	&.image19 {
		width: calc(0.56 * var(--image-home-about-zoom));
		translate: 14em 10em;
	}

	&.image21 {
		width: calc(0.85 * var(--image-home-about-zoom));
		translate: 38em 16em;
	}

	&.image23 {
		width: calc(0.66 * var(--image-home-about-zoom));
		translate: -18em -2em;
	}

	&.image24 {
		width: calc(1.0 * var(--image-home-about-zoom));
		translate: 36em -16em;
	}

	&.image25 {
		width: calc(0.85 * var(--image-home-about-zoom));
		translate: -38em -16em;
	}

	&.image27 {
		width: calc(1.15 * var(--image-home-about-zoom));
		translate: -39em 8em;
	}

	&.image31 {
		width: calc(0.65 * var(--image-home-about-zoom));
		translate: 34em -2em;
	}

	&.image32 {
		width: calc(0.68 * var(--image-home-about-zoom));
		translate: -58em -20em;
	}

	&.image33 {
		width: calc(1.3 * var(--image-home-about-zoom));
		translate: 14em -5em;
	}

	&.image34 {
		width: calc(0.6 * var(--image-home-about-zoom));
		translate: -48em -6em;
	}

	&.image-home-about01 {
		animation: keyHomeAbout 9.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
	}

	&.image-home-about02 {
		animation: keyHomeAbout 9.6s 4.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
	}
}

@keyframes keyHomeAbout {

	0% {
		scale: 0;
		opacity: 1;
	}

	6% {
		scale: 1;
	}


	50% {
		scale: 1;
		opacity: 1;

	}

	56% {
		scale: 0;
		opacity: 0;

	}

	100% {
		scale: 0;

	}

}

@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {



	:root {
		--image-home-about-zoom: 4.4em;
	}

}

@media screen and (max-width: 560px) {
	.block-home-about {
		& .block-home-about-bg {
			&.top {
				height: 28vh;
			}
		}
	}

	:root {
		--image-home-about-zoom: 4.0em;
	}



	.image-home-about {
		&.image01 {
			translate: -12em -13em;
		}

		&.image02 {
			translate: 9em 11em;
		}

		&.image03 {
			translate: -1em 15em;
		}

		&.image04 {
			translate: -13em 7em;
		}

		&.image06 {
			translate: 6em -14em;
		}

		&.image09 {
			translate: 32em -12em;
		}

		&.image12 {
			translate: -36em 16em;
		}

		&.image14 {
			translate: 36em 17em;
		}

		&.image16 {
			translate: -50em 8em;
		}

		&.image18 {
			translate: -32em -4em;
		}

		&.image20 {
			translate: 10em -2em;
		}

		&.image22 {
			translate: 30em 3em;
		}

		&.image26 {
			translate: -46em -8em;
		}

		&.image28 {
			translate: -32em -18em;
		}

		&.image29 {
			translate: 48em -2em;
		}

		&.image30 {
			translate: 48em -16em;
		}

		&.image35 {
			translate: -58em -16em;
		}

		&.image36 {
			translate: 58em 16em;
		}






		&.image05 {
			translate: 1em 13em;
		}

		&.image07 {
			translate: 56em -17em;
		}

		&.image08 {
			translate: -29em -4em;
		}

		&.image10 {
			translate: 48em 4em;
		}

		&.image11 {
			translate: -11em -14em;
		}

		&.image13 {
			translate: 8em -15em;
		}

		&.image15 {
			translate: -11em 13em;
		}

		&.image17 {
			translate: -56em 14em;
		}

		&.image19 {
			translate: 12em 11em;
		}

		&.image21 {
			translate: 38em 16em;
		}

		&.image23 {
			translate: -13em -5em;
		}

		&.image24 {
			translate: 36em -16em;
		}

		&.image25 {
			translate: -38em -16em;
		}

		&.image27 {
			translate: -39em 8em;
		}

		&.image31 {
			translate: 9em 6em;
		}

		&.image32 {
			translate: -58em -20em;
		}

		&.image33 {
			translate: 9em -5em;
		}

		&.image34 {
			translate: -48em -6em;
		}

	}


}



.block-home-entry {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: min(4.8vw, 2.4em);

	&>.list {
		padding-top: 1.8em;
	}

}

.title-home-new {
	top: 6.4em;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	position: sticky;
	line-height: 1.0;

	& .en {
		font-weight: var(--fontWeight-bold);
		font-size: 4.62em;
		text-align: right;
		color: var(--color-site-yellow);
		-webkit-text-stroke: var(--borderWidth-heavy-3) var(--color-site-blue);
		text-stroke: var(--borderWidth-heavy-3) var(--color-site-blue);
		paint-order: stroke fill;
		letter-spacing: 0.08em;
		text-shadow: 0.06em -0.06em 0 var(--color-site-blue);
	}

	& .ja {
		font-weight: var(--fontWeight-bold);
		display: inline-block;
		background-color: var(--color-site-blue);
		color: var(--color-white);
		transform: skewY(16deg);
		padding: 1.0em 0.5em 6.4em 0.4em;
		vertical-align: text-bottom;
		letter-spacing: 0.16em;
		font-size: var(--fontSize-small-1);
		translate: 0.4em -0.2em;

		&>.inner {
			display: inline-block;
			transform: skewY(-16deg);
		}
	}
}


@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {

	.title-home-new {
		& .en {
			-webkit-text-stroke: var(--borderWidth-heavy-2) var(--color-site-blue);
			text-stroke: var(--borderWidth-heavy-2) var(--color-site-blue);
			font-weight: 600;
			font-size: min(10.0vw, 3.25em);

		}

		& .ja {
			font-size: min(2.8vw, var(--fontSize-small-2));

		}
	}


}

@media screen and (max-width: 560px) {}


/* ----------------------------------------------------------------------------------------------------
Page
---------------------------------------------------------------------------------------------------- */
.block-page-title {
	font-weight: var(--fontWeight-bold);
	font-size: min(5.0vw, var(--fontSize-large-3));
	border-top: var(--borderWidth-heavy-1) solid var(--color-site-blue);
	background-color: var(--color-bluegray);
	line-height: var(--lineHeight-narrow-1);
	margin-top: 2.8em;
	margin-bottom: 1.0em;
	padding: 0.5em 0.8rem 0.4em;
	margin-inline: -0.8rem;
}


.table-organizer {
	line-height: var(--lineHeight-narrow-1);

	& * {
		border: none !important;
		padding: 0 !important;
		vertical-align: top;
	}

	& td {
		padding-bottom: 0.8em !important;
	}

	& tr:last-of-type td {
		padding-bottom: 0 !important;
	}

	& td:first-child {
		white-space: nowrap;
		font-weight: var(--fontWeight-bold);
		padding-right: 1.2em !important;
	}

	& a {
		text-decoration: none;
	}
}

.list-organizer-mission {
	margin-top: 2.2em;
	display: grid;
	gap: 2.0em;

	& li {
		padding: 1.8em 1.4em;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 8%, rgba(0, 77, 160, 0.16) 100%);
		border-top-right-radius: var(--borderRadius-normal);
		border-bottom-left-radius: var(--borderRadius-normal);

		&::after {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			border: var(--borderWidth-normal) solid var(--color-site-blue);
			border-top-right-radius: var(--borderRadius-normal);
			border-bottom-left-radius: var(--borderRadius-normal);
		}

		& .ja {
			position: absolute;
			top: 0;
			left: 0;
			translate: -0.3em -50%;
			background-color: var(--color-white);
			color: var(--color-site-blue);
			font-weight: var(--fontWeight-bold);
			font-size: var(--fontSize-small-1);
			padding-right: 0.4em;
			z-index: 1;

			&::before {
				content: '';
				display: inline-block;
				width: 0.7em;
				aspect-ratio: 1;
				border-radius: 100vh;
				background-color: var(--color-site-blue);
				margin-right: 0.3em;
			}
		}

		& .en {
			position: absolute;
			inset: 0;
			overflow: hidden;

			& .inner {
				position: absolute;
				right: 0;
				bottom: 0;
				line-height: 1;
				font-size: min(14vw, 4.11em);
				font-style: italic;
				letter-spacing: 0.04em;
				translate: -0.12em 0.14em;
				color: var(--color-site-blue);
				opacity: 0.08;

			}
		}


		& .text {
			line-height: var(--lineHeight-narrow-1);
			font-size: min(4.4vw, var(--fontSize-large-2));
		}
	}


}


.block-about {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4.8em 0;
	margin-top: 2.4em;

	&>.title {
		font-weight: var(--fontWeight-bold);
		color: var(--color-site-blue);
		border-top: var(--borderWidth-normal) solid var(--color-site-blue);
		padding-right: 6.4em;
		padding-top: 0.4em;
		font-size: var(--fontSize-small-1);
		letter-spacing: 0.04em;
	}

	&>.text {
		border-top: var(--borderWidth-normal) solid var(--color-bluegray);
		padding-top: 2.4em;
	}

	& .lead {
		font-size: min(5.2vw, var(--fontSize-large-4));
		line-height: var(--lineHeight-narrow-1);
		padding-left: 0.4em;
		margin-bottom: 0.8em;
		text-align: center;

		& .inner {
			display: inline-block;
			background: linear-gradient(transparent 60%, var(--color-site-yellow) 60%);
		}

		& .inner:first-child::before,
		& .inner:last-child::before {
			display: block;
			position: absolute;
			content: '';
			width: 0.5em;
			aspect-ratio: 1 / 2;
			border: var(--borderWidth-normal) solid var(--color-black);
		}

		& .inner:first-child::before {
			left: -0.5em;
			top: -0.1em;
			border-right: none;
			border-bottom: none;
		}

		& .inner:last-child::before {
			right: -0.2em;
			bottom: -0.1em;
			border-top: none;
			border-left: none;
		}

	}

	& .logo {
		margin-bottom: 1.6em;
		text-align: center;

		& img {
			width: 20em;
			max-width: 72%;
		}
	}

	& .diagram {
		margin-top: 1.6em;
		margin-bottom: 2.0em;
		text-align: center;

		& img {
			width: 36em;
		}
	}
}





@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {
	.block-about {
		&>.title {
			padding-right: 3.2em;
		}

	}

}

@media screen and (max-width: 560px) {
	.block-about {
		grid-template-columns: 1fr;
		gap: 0.8em 0;

		&>.title {
			padding-right: 0;
			border-top: var(--borderWidth-normal) solid var(--color-bluegray);

			&::before {
				content: '';
				display: block;
				width: 6.4em;
				border-top: var(--borderWidth-normal) solid var(--color-site-blue);
				position: absolute;
				top: calc(var(--borderWidth-normal) * -1);
				left: 0;
			}


			&.concept {
				margin-top: 4.0em;
				margin-bottom: 0.4em;
			}
		}

		&>.text {
			border-top: none;
			padding-top: 0;
		}

		&>.text:first-child {
			margin-bottom: 100em;
		}
		& .lead {
			text-align: center;
		}

	}

}



/* ----------------------------------------------------------------------------------------------------
Entry
---------------------------------------------------------------------------------------------------- */
.block-title-entry {
	padding-bottom: 1.2em;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.0em 0.8em;
	align-items: start;

	& .date {
		border-radius: var(--borderRadius-small-2);
		font-size: min(2.8vw, var(--fontSize-small-2));
		line-height: var(--lineHeight-narrow-1);
		display: inline-block;
		background-image: url(../images/icon-time-white.svg);
		background-size: 0.9em auto;
		background-position: left 0.6em center;
		white-space: nowrap;
		background-color: var(--color-site-blue);
		padding: 0.4em 0.5em 0.3em 1.7em;
		color: var(--color-white);
	}


	& .title {
		font-size: min(5.2vw, var(--fontSize-large-5));
		font-weight: var(--fontWeight-bold);
		line-height: var(--lineHeight-narrow-1);
		grid-column: 1 / -1;
	}




	& .tag {
		display: flex;
		flex-wrap: wrap;
		gap: 0.3em 1.0em;
		font-size: min(2.8vw, var(--fontSize-small-2));
		line-height: var(--lineHeight-narrow-1);
		padding-top: 0.4em;
	}

	& .tag a {
		text-decoration: none;
		background-image: url(../images/icon-tag-blue.svg);
		background-size: 0.85em auto;
		background-position: left center;
		padding-left: 1.2em;
	}


}


.block-main-entry {
	& img {
		aspect-ratio: 3 / 2;
		width: 100%;
		object-fit: cover;
		border-radius: var(--borderRadius-small-1);
	}
}

.wrap-entry {
	padding-inline: min(3.2vw, 3.2em);
	padding-top: var(--paddingSection-narrow-4);
	padding-bottom: var(--paddingSection-narrow-2);


	& h2 {
		font-weight: var(--fontWeight-bold);
		font-size: min(5.0vw, var(--fontSize-large-3));
		border-top: var(--borderWidth-heavy-1) solid var(--color-site-blue);
		background-color: var(--color-bluegray);
		line-height: var(--lineHeight-narrow-1);
		margin-top: 2.8em;
		margin-bottom: 1.0em;
		padding: 0.5em 0.8rem 0.4em;
		margin-inline: -0.8rem;

	}

	& h2:first-child {
		margin-top: 0;
	}

	& h3 {
		font-weight: var(--fontWeight-bold);
		font-size: min(4.8vw, var(--fontSize-large-2));
		line-height: var(--lineHeight-narrow-1);
		margin-top: 2.0em;
		margin-bottom: 0.4em;
	}

	& h2+h3 {
		margin-top: 1.6em;
	}

	& .list-sub-keyword {
		margin-top: 3.0em !important;

	}

	& blockquote {
		border-left: var(--borderWidth-normal) solid var(--color-black);
		padding-left: 1.6rem;
		padding-top: 1.2em;
		margin-block: 1.6em;

		& p {
			margin-bottom: 1.2em;
		}

		&::before {
			content: '”';
			font-size: var(--fontSize-large-8);
			line-height: 1.0;
			position: absolute;
			left: 0.2em;
			top: 0;
			background-color: var(--color-white);
		}

		& cite {
			text-align: right;
			margin-top: -0.4em;

			& code {
				font-size: var(--fontSize-small-1);
				font-family: inherit !important;
				line-height: var(--lineHeight-narrow-1);
				font-style: italic;

				&::before {
					content: '─';
				}
			}

		}

	}

	& ul.wp-block-list {
		margin-block: 1.6em;
		display: grid;
		gap: 0.2em;
		list-style: disc;
		margin-left: 1.6em;

	}

	& ol.wp-block-list {
		margin-block: 1.6em;
		display: grid;
		gap: 0.2em;
		list-style: decimal;
		margin-left: 1.8em;

	}

	& .wp-block-table {
		margin-block: 2.0em;

		& table {
			line-height: var(--lineHeight-narrow-1);

			& thead {
				border: none;
			}

			& th,
			& td {
				border: var(--borderWidth-light-1) solid var(--color-black);
				padding: 0.6em 0.8em;
			}

			& th {
				background-color: var(--color-bluegray);
				font-weight: var(--fontWeight-bold);
			}

		}
	}

	& .wp-block-embed-youtube {
		text-align: center;
		margin-block: 2.0em;

		& iframe {
			max-width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			width: 40em;

		}

	}

	& .wp-block-image {
		text-align: center;
		margin-block: 2.0em;

		& figcaption {
			line-height: var(--lineHeight-narrow-1);
			font-size: var(--fontSize-small-1);
			padding-top: 0.6em;
			margin: 0;
		}

		& img {
			max-width: 100%;
			width: 40em;

		}

	}

	& .ez-toc-counter {
		line-height: var(--lineHeight-narrow-1) !important;
		margin: 0 !important;
		margin-block: 2em !important;
		border: var(--borderWidth-normal) solid var(--color-black) !important;
		border-radius: var(--borderRadius-small-1) !important;
		box-shadow: none !important;
		padding: 0 !important;

		& .ez-toc-title {
			display: block !important;
			color: var(--color-black) !important;
			font-weight: var(--fontWeight-bold) !important;
			font-size: var(--fontSize-small-2) !important;
			border-bottom: var(--borderWidth-normal) dotted var(--color-black) !important;
			padding: 0.6em 1.2rem 0.5em !important;
		}

		& a {
			color: var(--color-black) !important;
			text-decoration: none !important;
			font-size: var(--fontSize-small-1) !important;
			font-weight: var(--fontWeight-normal) !important;

			&:hover {
				color: var(--color-red) !important;
			}

			&::before {
				color: var(--color-black) !important;

			}
		}

		& nav {
			padding: 0.8em 1.2rem 1.0em !important;

			& * {
				font-size: 100% !important;
				font-weight: var(--fontWeight-normal) !important;
				line-height: var(--lineHeight-narrow-1) !important;
			}

			& .ez-toc-list-level-1 {
				font-size: var(--fontSize-small-1) !important;

				&>li {
					margin-bottom: 0.6em !important;

					&:last-child {
						margin-bottom: 0 !important;
					}

					&>a {
						font-weight: var(--fontWeight-bold) !important;

					}
				}
			}

			& .ez-toc-list-level-3 {
				font-size: var(--fontSize-small-1) !important;
				margin-top: 0.4em !important;
				margin-left: 1.4em !important;

				&>li {
					margin-bottom: 0.4em !important;

					&:last-child {
						margin-bottom: 0 !important;
					}
				}
			}


		}


	}



}

.wp-pagenavi {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fontSize-small-2);
	gap: 0.2em;
	margin-top: 3.2em;
	justify-content: center;

	&.entry {
		gap: 0.4em;
		margin-top: 4.0em;
	}

	&>* {
		border: var(--borderWidth-normal) solid var(--color-black);
		text-decoration: none;
		padding: 0.4em 0.6em 0.3em;
		min-width: 2.2em;
		text-align: center;
		border-radius: var(--borderRadius-small-2);

		&.current {
			background-color: var(--color-site-blue);
			color: var(--color-white);
			border-color: var(--color-site-blue);
		}
	}
}


@media screen and (max-width: 1280px) {}

@media print,
screen and (max-width: 1024px) {


	.block-title-entry {
		display: flex;
		flex-direction: column;
		gap: 0;

		& .title {
			padding: 0.5em 0 0.3em;
		}


		& .tag {
			order: 1;
			padding-top: 0;
		}

	}

	.block-main-entry {

		&>.text {
			bottom: 6.4%;
		}


	}

	.wrap-entry {
		padding-inline: 0;

	}


}

@media screen and (max-width: 560px) {

	.block-main-entry {
		margin-inline: -6.4vw;

		& img {
			border-radius: 0;
			border: none;
		}

		&>.text {
			left: 0;
			bottom: 4.8%;
		}


	}





}



/* ----------------------------------------------------------------------------------------------------
Archive / Search
---------------------------------------------------------------------------------------------------- */

.title-page {
	&+.list-sub-keyword {
		margin-top: min(4.8vw, 2.4em);
		margin-bottom: min(8.8vw, 4.0em);
	}
}

.list-result {
	border-top: var(--borderWidth-normal) dotted var(--color-black);
	line-height: var(--lineHeight-narrow-1);

	& li {
		border-bottom: var(--borderWidth-normal) dotted var(--color-black);
		padding-block: 1.2em;

		& a {
			text-decoration: none;
			display: block;
		}

		& .title {
			font-weight: var(--fontWeight-bold);
			margin-bottom: 0.2em;
			font-size: var(--fontSize-large-1);
		}

		& .description {
			font-size: var(--fontSize-small-2);
			color: var(--color-gray);
		}

	}

}