@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: "Poppins", "Noto Sans JP", sans-serif;
	--color-text: rgb(33 33 33);
	--color-bg: rgb(255 255 255);
	--color-white: rgb(255 255 255);
	--color-black: rgb(33 33 33);
	--color-black-pure: rgb(0 0 0);
	--color-gray: rgb(158 158 158);
	--color-gray-bg: rgb(238 238 238);
	--color-bluegray: rgb(236 239 241);
	--color-red: #ff5f5f;
	--color-yellow: #fff36d;
	--color-purple-text: #ca547c;
	--color-purple-light: #ca547c;
	--color-purple-dark: #8f3a59;
	--color-purple-gradation: #ea6144 0%, #e9564a 9%, #e73b5a 24%, #e40f75 43%, #e3007f 49%, #ba1386 65%, #5a4397 100%;
	--color-purple-gradation-bg: #ffe5ed 0%, #f5e5f1 35%, #dbe6fd 94%, #d8e7ff 100%;
	--color-blue-text: #4a8acb;
	--color-blue-light: #4a8acb;
	--color-blue-dark: #376a9a;
	--color-blue-gradation: #add6ae 0%, #a9d4af 10%, #9ed1b2 19%, #8ccbb8 28%, #72c3c1 36%, #51b8cc 44%, #29acda 52%, #009fe8 59%, #0096e0 66%, #007ecb 79%, #0057aa 94%, #00479c 100%;
	--color-blue-gradation-bg: #cef4ff 0%, #d0eaff 40%, #d7d3ff 100%;
	--color-bluegreen-light: #6ab5c8;
	--color-bluegreen-dark: #54919f;
	--color-green-text: #00c844;
	--color-green-light: #70af5a;
	--color-green-dark: #538343;
	--color-green-gradation: #efe80a 0%, #ebe60a 16%, #e0e20b 30%, #cdda0e 44%, #b4d011 57%, #9cc715 67%, #8ac426 72%, #5dbc52 82%, #15af99 96%, #00acaf 100%;
	--color-green-gradation-bg: #ffffe0 0%, #f5fce5 41%, #dff8f2 100%;
	--color-orange-text: #ff7e09;
	--color-orange-light: #f5aa00;
	--color-orange-dark: #af5700;
	--color-orange-gradation: #ffe000 0%, #fdd600 15%, #f9bc00 40%, #f29100 72%, #eb6601 100%;
	--color-orange-gradation-bg: #ffe5ff 0%, #ffe5f5 56%, #ffe6ea 100%;
	--color-green-light-gradation: #fff46a 0%, #98f2bf 100%;
	--color-other-gradation-bg: #def1ff 0%, #def6f5 80%, #dff8f2 100%;
	--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;
	--easing-slow-3: all 0.24s 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-light-2: 300;
	--fontWeight-light-1: 400;
	--fontWeight-normal: 500;
	--fontWeight-bold-1: 600;
	--fontWeight-bold-2: 700;
	--fontWeight-bold-3: 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-3: 3.2rem;
	--paddingSection-narrow-2: 4.8rem;
	--paddingSection-narrow-1: 6.4rem;
	--paddingSection-normal: 8rem;
	--paddingSection-wide-1: 9.6rem;
	--paddingSection-wide-2: 11.2rem;
	--paddingSection-wide-3: 12.8rem;
}

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

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

@media screen and (max-width: 560px) {
	:root {
		--paddingSection-narrow-3: 2.4rem;
		--paddingSection-narrow-2: 3.2rem;
		--paddingSection-narrow-1: 4.8rem;
		--paddingSection-normal: 6.4rem;
		--paddingSection-wide-1: 8rem;
		--paddingSection-wide-2: 9.6rem;
		--paddingSection-wide-3: 11.2rem;
	}
}

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

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;
	/* letter-spacing: 0.04em; */
	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;
}

video,
iframe {
	max-width: 100%;
	vertical-align: middle;
}

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

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-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-2);
}

.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-gray-bg);
}

.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-black-pure) 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-black) !important;
	box-shadow: inset 0 0 4px color-mix(in srgb, var(--color-black-pure) 8%, transparent) !important;
	background-color: var(--color-gray-bg) !important;
	outline: none !important;
}

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

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

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

.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: 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;
	}
}

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

	&.load-end {
		overflow: visible;
	}
}

.wrap-load {
	opacity: 0;
	transition: all 0.64s ease-out;

	&.show {
		opacity: 1;
	}
}

#loading {
	position: fixed;
	left: 0;
	top: 0;
	width: calc(100% - var(--width-menu));
	height: 100vh;
	height: 100lvh;
	background-color: var(--color-white);
	z-index: 20;
	transition: all 0.64s ease-out;
	display: flex;
	justify-content: center;
	align-items: center;


	& .icon {
		display: block;
		width: min(4.8em, 16vw);
		aspect-ratio: 1;
		background-image: conic-gradient(var(--color-purple-gradation));
		border-radius: 100vh;
		animation: loading 1.2s linear infinite;

		&::before {
			content: '';
			display: block;
			position: absolute;
			inset: 8%;
			background-color: var(--color-white);
			border-radius: 100vh;
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 12%;
			top: -1px;
			bottom: 50%;
			background-color: var(--color-white);
			left: 50%;
			translate: -50%, 0;

		}
	}
}

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

	100% {
		rotate: 360deg;

	}
}

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

	& .icon {
		display: none;
	}
}

@media screen and (max-width: 1280px) {
	#loading {
		width: 100%;
	}
}

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

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


/* ----------------------------------------------------------------------------------------------------
Header / Wrap
---------------------------------------------------------------------------------------------------- */
:root {
	--width-menu: 19rem;
}

#wrap {
	display: grid;
	grid-template-columns: 1fr var(--width-menu);
	overflow: clip;
	min-height: 100vh;
	min-height: 100lvh;

	&>.side {
		order: 1;
		z-index: 100;
		border-left: var(--borderWidth-light-1) solid #212121;
		background-color: var(--color-white);
	}

	& header {
		padding: 4.0em 1.6em 1.6em;
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100lvh;
		overflow: auto;
		z-index: 100;

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

			& img {
				width: 9.6em;
			}
		}

		& .menu {
			margin-bottom: 3.6em;
			display: grid;
			gap: 1.6em;
			line-height: var(--lineHeight-narrow-2);

			& a {
				text-decoration: none;
			}

			& .parent {
				display: block;
				font-weight: var(--fontWeight-bold-2);
				padding-left: 0.8em;
				position: relative;

				&::before {
					content: '';
					display: block;
					width: 0.36em;
					aspect-ratio: 2 / 3;
					background-color: var(--color-black);
					clip-path: polygon(0 0, 0% 100%, 100% 50%);
					position: absolute;
					left: 0;
					top: 0.32em;
					transform-origin: center;
				}

				&.down::before {
					rotate: 90deg;
				}
			}

			& ul {
				display: grid;
				list-style: circle;
				font-size: var(--fontSize-small-1);
				gap: 1.0em;
				margin-top: 1.2em;
				margin-left: 2.0em;
			}

			& .sub {
				display: inline-block;
				font-size: var(--fontSize-small-2);
				padding-left: 0.2em;
				vertical-align: middle;
			}
		}

		& .sns {
			display: flex;
			justify-content: center;
			gap: 0.6em;

			& img {
				width: 2.0em;
			}
		}
	}

	&>.contents {
		display: grid;
		grid-template-rows: 1fr auto;
		min-height: 100vh;
		min-height: 100lvh;
	}
}

@media screen and (max-width: 1280px) {
	#wrap {
		display: block;

		&>.side {
			border-left: none;
		}

		& header {
			padding: 0;
			height: auto;
			height: auto;
			overflow: visible;

			& .logo {
				position: absolute;
				top: 1.2em;
				left: min(1.6em, 3.2vw);
				margin-bottom: 0;
				transition: var(--easing-slow-3);

				& img {
					width: min(7.2em, 24vw);
				}
			}

			&.show .logo {
				translate: calc(var(--width-menu) * -1) 0;
				filter: brightness(20%);
			}

			& .toggle {
				width: min(3.2em, 12vw);
				aspect-ratio: 1;
				background-color: black;
				position: fixed;
				right: min(1.6em, 3.2vw);
				top: 0.8em;
				border-radius: 100vh;

				& span {
					display: block;
					position: absolute;
					left: 28%;
					right: 28%;
					border-bottom: var(--borderWidth-normal) solid var(--color-white);
					transition: var(--easing-slow-2);
				}

				& .line01 {
					top: 32%;
				}

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

				& .line03 {
					bottom: 32%;
				}
			}

			&.show .toggle {
				& .line01 {
					top: 50%;
					translate: 0 -50%;
					rotate: 225deg;
				}

				& .line02 {
					left: 50%;
					right: 50%;
				}

				& .line03 {
					bottom: 50%;
					translate: 0 50%;
					rotate: -225deg;
				}
			}

			& nav {
				position: fixed;
				top: 0;
				left: 100%;
				background-color: var(--color-white);
				height: 100vh;
				height: 100lvh;
				width: var(--width-menu);
				padding: 6.4em 1.6em 1.6em;
				transition: var(--easing-slow-3);
			}

			&.show nav {
				translate: calc(var(--width-menu) * -1) 0;
			}
		}

		&>.contents {
			transition: var(--easing-slow-3);
			background-color: var(--color-white);

			&.show {
				translate: calc(var(--width-menu) * -1) 0;
				filter: brightness(20%);
			}
		}
	}
}

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

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

/* ----------------------------------------------------------------------------------------------------
Footer
---------------------------------------------------------------------------------------------------- */
footer {
	background-color: var(--color-black);
	color: var(--color-white);
	text-align: center !important;
	font-size: var(--fontSize-small-1);
	padding-block: 2.0em;
	line-height: var(--lineHeight-narrow-1);

	& small {
		font-size: var(--fontSize-large-1);
		font-weight: var(--fontWeight-bold-1);
		display: block;
		margin-bottom: 0.6em;
	}

	& .more {
		display: flex;
		font-size: var(--fontSize-small-1);
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.2em 1.0em;
	}
}

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

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

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

/* ----------------------------------------------------------------------------------------------------
Common
---------------------------------------------------------------------------------------------------- */
.modaal-wrapper {}

.block-cube {
	background-color: var(--color-white);
	border: var(--borderWidth-normal) solid var(--color-black);
	padding-inline: min(2.0em, 4.8vw);

	&.page {
		padding-inline: min(3.2em, 4.8vw);
		padding-bottom: 3.2em;
	}

	&::before,
	&::after {
		content: '';
		display: block;
		border: var(--borderWidth-normal) solid var(--color-black);
		position: absolute;
	}

	&::before {
		top: calc(var(--borderWidth-normal) * -1);
		bottom: calc(var(--borderWidth-normal) * -1);
		left: 100%;
		width: 1.2em;
		transform-origin: left top;
		transform: skewY(26deg);
	}

	&::after {
		top: 100%;
		border-left-width: var(--borderWidth-heavy-1);
		left: calc(var(--borderWidth-normal) * -1);
		right: calc(var(--borderWidth-normal) * -1);
		height: calc(1.2em * 0.6);
		transform: skewX(57deg);
		transform-origin: left top;
	}

	&.purple::before {
		background-color: var(--color-purple-light);
	}

	&.purple::after {
		background-color: var(--color-purple-dark);
	}

	&.blue::before {
		background-color: var(--color-blue-light);
	}

	&.blue::after {
		background-color: var(--color-blue-dark);
	}

	&.bluegreen::before {
		background-color: var(--color-bluegreen-light);
	}

	&.bluegreen::after {
		background-color: var(--color-bluegreen-dark);
	}

	&.green::before {
		background-color: var(--color-green-light);
	}

	&.green::after {
		background-color: var(--color-green-dark);
	}

	&.orange::before {
		background-color: var(--color-orange-light);
	}

	&.orange::after {
		background-color: var(--color-orange-dark);
	}
}

.title-download {
	text-align: center;
	margin-bottom: 1.6em;
	line-height: var(--lineHeight-narrow-3);
	font-size: min(1em, 3.6vw);

	& .en {
		display: block;
		font-weight: var(--fontWeight-bold-1);
		font-size: var(--fontSize-large-6);
		letter-spacing: 0.04em;
		margin-bottom: 0.04em;
	}

	& .ja {
		display: block;
		font-weight: var(--fontWeight-bold-2);
		font-size: var(--fontSize-small-1);
	}
}

.block-download-image {
	text-align: center;

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

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

	& a {
		background-color: var(--color-white);
		font-size: var(--fontSize-small-1);
		font-weight: var(--fontWeight-bold-2);
		text-decoration: none;
		border: var(--borderWidth-normal) solid var(--color-black);
		border-radius: 100vh;
		padding: 0.3em 1.6em 0.2em;

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

		&::before {
			content: '';
			display: inline-block;
			width: 0.4em;
			aspect-ratio: 2 / 3;
			background-color: var(--color-black);
			clip-path: polygon(0 0, 0% 100%, 100% 50%);
			margin-right: 0.4em;
			translate: 0 -0.1em;
		}

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

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

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

@media screen and (max-width: 560px) {
	.block-cube {
		&.page {
			padding-bottom: 2.4em;
		}

		&::before {
			width: 0.8em;
			transform: skewY(23deg);
		}

		&::after {
			height: calc(0.8em * 0.6);
			transform: skewX(54deg);
		}
	}
}

/* ----------------------------------------------------------------------------------------------------
Home
---------------------------------------------------------------------------------------------------- */
.bg-home-kv,
.bg-home-about {
	position: fixed;
	left: 0;
	top: 0;
	width: calc(100% - var(--width-menu));
	height: 100vh;
	height: 100lvh;
	background-color: var(--color-white);
}

.bg-home-kv {
	background-image: url(../images/home-main-bg.png);
	background-size: 120em auto;
	background-position: top center;
}

.bg-home-about {
	opacity: 0;

	&::before {
		content: 'ABOUT';
		display: block;
		font-size: min(18em, 33vw);
		text-align: center;
		top: 50%;
		left: 50%;
		position: absolute;
		translate: -50% -50%;
		white-space: nowrap;
		background: linear-gradient(45deg, var(--color-other-gradation-bg));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.bg-home-about.show {
	opacity: 1;
}

@media screen and (max-width: 1920px) {
	.bg-home-kv {
		background-size: 120% auto;
	}
}

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

	.bg-home-kv,
	.bg-home-about {
		width: 100%;
	}
}

@media print,
screen and (max-width: 1024px) {
	.bg-home-kv {
		background-size: 140% auto;
	}
}

@media screen and (max-width: 560px) {
	.bg-home-kv {
		background-size: 180% auto;
	}
}

.wrap-home-kv {
	overflow: clip;
	z-index: 10;
}

.block-home-kv-photo {
	padding-top: 4.8em;
	display: grid;
	gap: min(3.2em, 8.0vw);

	& .title {
		& img {
			width: 52em;
			max-width: 84%;
		}
	}

	& .photo {
		text-align: right;

		& img {
			width: 56em;
			max-width: 76%;
		}
	}
}

@media screen and (max-width: 1280px) {
	.block-home-kv-photo {
		padding-top: 8.0em;
	}
}

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

@media screen and (max-width: 560px) {
	.block-home-kv-photo {
		padding-top: 7.2em;

		& .title {
			& img {
				max-width: 90%;
			}
		}

		& .photo {
			text-align: right;

			& img {
				max-width: 84%;
			}
		}
	}
}

.wrap-home-main {
	padding-top: var(--paddingSection-narrow-3);
	padding-bottom: var(--paddingSection-narrow-1);
	background: linear-gradient(45deg, var(--color-other-gradation-bg));
	display: grid;
	gap: var(--paddingSection-narrow-3);
	z-index: 10;
}

.block-home-main-title {
	text-align: center;

	& .copy {
		font-size: min(var(--fontSize-large-8), 6.0vw);
		font-weight: var(--fontWeight-bold-2);
		background-color: var(--color-white);
		margin-bottom: 0.6em;
		letter-spacing: 0.08em;
		line-height: var(--lineHeight-narrow-2);

		&>.inner {
			display: block;
			padding-block: 0.6em;
		}

		&::before,
		&::after,
		&>.inner::before,
		&>.inner::after {
			content: '';
			display: block;
			position: absolute;
			height: 60%;
			aspect-ratio: 2 / 3;
		}

		&::before {
			left: 0;
			top: 0;
			background: linear-gradient(90deg, var(--color-orange-gradation));
			clip-path: polygon(0 0, 0% 100%, 100% 0);
		}

		&::after {
			right: 0;
			bottom: 0;
			background: linear-gradient(90deg, var(--color-green-gradation));
			clip-path: polygon(0 100%, 100% 100%, 100% 0);
		}

		&>.inner::before {
			left: 0;
			bottom: 0;
			background: linear-gradient(90deg, var(--color-purple-gradation));
			clip-path: polygon(0 100%, 100% 100%, 0 0);
			z-index: 1;
		}

		&>.inner::after {
			right: 0;
			top: 0;
			background: linear-gradient(90deg, var(--color-blue-gradation));
			clip-path: polygon(0 0, 100% 100%, 100% 0);
		}

		& .label {
			display: inline-block;
			background-image: url(../images/home-main-line.svg);
			background-size: contain;
			background-position: center bottom;
		}
	}

	& .cross {
		margin-bottom: 1.6em;

		& img {
			width: 28em;
			max-width: 80%;
		}
	}

	& .title {
		font-size: min(var(--fontSize-large-8), 8.0vw);
		line-height: var(--lineHeight-narrow-3);

		& .sub {
			display: block;
			font-size: 0.45em;
			margin-bottom: 0.2em;
		}

		& .main {
			display: block;
			font-weight: var(--fontWeight-bold-2);
			letter-spacing: 0.04em;
			padding-left: 0.2em;

			& .en {
				font-size: var(--fontSize-large-1);
				font-weight: var(--fontWeight-bold-1);
			}
		}
	}
}

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

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

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

.block-home-news {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: min(4.8em, 4.8vw);

	& .news {
		padding-bottom: 1.2em;
		background-color: var(--color-white);
	}
}

.title-home-news {
	border-bottom: var(--borderWidth-normal) solid black;
	font-size: min(var(--fontSize-large-1), 5.2vw);
	font-weight: var(--fontWeight-bold-2);
	padding-top: 0.8em;
	padding-bottom: 0.2em;
	padding-inline: 1.2rem;
}

.list-home-news {
	& li {
		border-bottom: var(--borderWidth-normal) dotted var(--color-black);

		& a {
			text-decoration: none;
			line-height: var(--lineHeight-narrow-1);
			display: block;
			padding-block: 0.6em;
			padding-inline: 1.2rem;

			& .date {
				font-size: var(--fontSize-small-3);
				color: var(--color-black);
				margin-bottom: 0.1em;
			}

			& .title {
				font-weight: var(--fontWeight-bold-1);
				font-size: var(--fontSize-small-1);
			}
		}
	}
}

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

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

@media screen and (max-width: 560px) {
	.block-home-news {
		grid-template-columns: repeat(1, 1fr);
		gap: 3.2em;
	}
}

.block-home-movie {
	& a {
		display: block;

		& .inner {
			white-space: nowrap;
			font-size: min(var(--fontSize-large-3), 4.8vw);
			font-weight: var(--fontWeight-bold-1);
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
			translate: -50% -50%;
			color: var(--color-white);
			filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.08));
			letter-spacing: 0.04em;
			background-image: url(../images/icon-play.svg);
			background-size: auto 1.8em;
			background-position: center bottom;
			padding-bottom: 2.2em;
		}

		& video {
			width: 100%;
			height: 24em;
			object-fit: cover;
		}

		&::before {
			content: '';
			inset: 0;
			background: linear-gradient(90deg, var(--color-blue-gradation));
			position: absolute;
			opacity: 0.4;
			transition: var(--easing-slow-1);
		}

		&:hover::before {
			filter: brightness(0.6);
		}
	}
}

.modaal-video-wrap {
	margin-inline: 0 !important;
}

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

@media print,
screen and (max-width: 1024px) {
	.block-home-movie {
		& a {
			& video {
				width: 100%;
				height: auto;
				aspect-ratio: 2 / 1;
			}
		}
	}
}

@media screen and (max-width: 560px) {
	.block-home-movie {
		& a {
			& video {
				aspect-ratio: 16 / 9;
			}
		}
	}
}

.block-home-concept {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3.2em;
	align-items: center;

	& .title {
		display: flex;
		padding: min(2.0em, 4.8vw);
		padding-left: 0;
		width: min(32em, 40vw);

		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			height: 100%;
			right: 0;
			width: 100vw;
			background-color: var(--color-white);
		}

		& img {
			position: relative;
		}
	}
}

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

@media print,
screen and (max-width: 1024px) {
	.block-home-concept {
		grid-template-columns: 1fr;
		gap: 1.6em;

		& .title {
			width: min(24em, 72vw);
		}
	}
}

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

.block-home-program {
	padding-bottom: 1.6em;
}

.title-home-program {
	font-size: min(var(--fontSize-large-6), 6.0vw);
	font-weight: var(--fontWeight-bold-1);
	line-height: 1.0;
	padding: 0.8em 0 0.6em;

	& .sub {
		font-size: var(--fontSize-small-4);
		display: inline-block;
	}
}

.list-home-program {
	display: grid;
	gap: 1.6em;

	& li::before {
		content: '';
		display: block;
		position: absolute;
		top: 1px;
		left: 0;
		right: calc(min(2.0em, 4.8vw) * -1);
		border-bottom: var(--borderWidth-normal) dotted black;
	}

	& .info {
		display: grid;
		grid-template-columns: auto 1fr;
		margin-left: calc(min(2.0em, 4.8vw) * -1.6);
		align-items: end;
		gap: 0.6em;
		margin-bottom: 0.6em;

		& .title {
			font-weight: var(--fontWeight-bold-1);
			width: 18em;
			color: var(--color-white);
			font-size: min(var(--fontSize-large-3), 4.8vw);
			line-height: var(--lineHeight-narrow-1);
			padding: 0.2em 1.2em 0.1em;
			clip-path: polygon(calc(100% - 1.0em) 0%, 100% 50%, calc(100% - 1.0em) 100%, 0 100%, 0 0);
			text-shadow: 0 0 4px rgb(0 0 0 / 0.08);
		}

		&.purple .title {
			background: linear-gradient(90deg, var(--color-purple-gradation));
		}

		&.blue .title {
			background: linear-gradient(90deg, var(--color-blue-gradation));
		}

		&.green .title {
			background: linear-gradient(90deg, var(--color-green-gradation));
		}

		&.orange .title {
			background: linear-gradient(90deg, var(--color-orange-gradation));
		}

		& .date {
			font-weight: var(--fontWeight-bold-1);
			font-size: var(--fontSize-large-1);
			line-height: var(--lineHeight-narrow-3);
			padding-bottom: 0.3em;
		}

		&.purple .date {
			color: var(--color-purple-text);
		}

		&.blue .date {
			color: var(--color-blue-text);
		}

		&.green .date {
			color: var(--color-green-text);
		}

		&.orange .date {
			color: var(--color-orange-text);
		}
	}

	& .text {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: 1.2em;

		& p {
			margin-bottom: 0;
		}

		& .link {
			& a {
				display: block;
				text-decoration: none;
				font-weight: var(--fontWeight-bold-2);
				border-bottom: var(--borderWidth-normal) solid var(--color-black);
				padding: 0 2.4em 0.16em 0.8em;
				line-height: var(--lineHeight-narrow-1);
				font-size: var(--fontSize-small-1);

				&::after {
					content: '';
					display: block;
					position: absolute;
					right: 0;
					bottom: 0;
					border-right: var(--borderWidth-normal) solid var(--color-black);
					height: 0.8em;
					rotate: -45deg;
					transform-origin: right bottom;
				}
			}
		}
	}
}

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

@media print,
screen and (max-width: 1024px) {
	.list-home-program {
		& .info {
			grid-template-columns: 1fr;
			margin-bottom: 0;
			gap: 0.8em;

			& .date {
				font-size: var(--fontSize-normal);
				padding-left: min(3.2em, 7.6vw);
			}
		}
	}
}

@media screen and (max-width: 560px) {
	.list-home-program {
		& .info {
			& .title {
				width: 100%;
			}
		}

		& .text {
			grid-template-columns: 1fr;
			gap: 0.6em;

			& .link {
				& a {
					display: block;
					width: 8.8em;
					margin-left: auto;
				}
			}
		}
	}
}

.block-home-message {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 5.6em;

	& .text {
		& .title {
			font-size: min(var(--fontSize-large-4), 5.2vw);
			background-image: url(../images/home-message-title.svg);
			background-size: auto 100%;
			background-position: left bottom;
			margin-bottom: 0.2em;
			font-weight: var(--fontWeight-bold-1);
		}

		&::before {
			content: '';
			display: block;
			background-color: var(--color-yellow);
			position: absolute;
			left: -4.8em;
			right: -4.8em;
			top: -3.2em;
			bottom: -3.6em;
			clip-path: polygon(6% 0%, 93% 15%, 100% 100%, 0 93%);
		}

		&::after {
			content: '';
			display: block;
			background-color: var(--color-yellow);
			position: absolute;
			width: 3.6em;
			aspect-ratio: 2 / 3;
			left: 100%;
			top: 20%;
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			rotate: 60deg;
			transform-origin: left bottom;
		}

		& p {
			z-index: 1;
		}
	}

	& .photo {
		width: 14em;
		line-height: var(--lineHeight-narrow-1);
		text-align: center;

		& img {
			border-radius: 100vh;
		}

		& .title {
			font-size: var(--fontSize-small-3);
			background-color: var(--color-bluegreen-light);
			color: white;
			border-radius: 100vh;
			padding: 0.2em 0 0.1em;
			margin-top: -1.2em;
			margin-bottom: 0.5em;
		}

		& .name {
			margin-bottom: 0.1em;
		}

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

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

@media print,
screen and (max-width: 1024px) {
	.block-home-message {
		grid-template-columns: 1fr;
		gap: 1.6em;
		margin-top: 3.2em;

		& .text {
			& .title {
				font-size: min(var(--fontSize-large-4), 5.6vw);
			}

			&::after {
				width: 3.6em;
				left: auto;
				top: auto;
				right: 12em;
				bottom: 0;
				rotate: 160deg;
			}
		}

		& .photo {
			margin-left: auto;
		}
	}
}

@media screen and (max-width: 560px) {
	.block-home-message {
		& .text {
			&::before {
				top: -4.0em;
			}
		}
	}
}

.wrap-home-about {
	overflow: hidden;
	padding-block: var(--paddingSection-narrow-1);
	z-index: 10;

	& .title {
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	&>.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		&::before,
		&::after {
			content: '';
			display: block;
			width: min(10em, 16vw);
			aspect-ratio: 37 / 53;
			position: absolute;
		}

		&::before {
			background-color: var(--color-white);
		}

		&::after {
			opacity: 0.54;
		}

		&.orange::before {
			left: 0;
			top: 0;
			clip-path: polygon(0 0, 0% 100%, 100% 0);
		}

		&.orange::after {
			left: 0;
			top: 0;
			clip-path: polygon(0 0, 0% 100%, 100% 0);
			background: linear-gradient(270deg, var(--color-orange-gradation));
		}

		&.blue::before {
			right: 0;
			top: 0;
			clip-path: polygon(0 0, 100% 100%, 100% 0);
		}

		&.blue::after {
			right: 0;
			top: 0;
			clip-path: polygon(0 0, 100% 100%, 100% 0);
			background: linear-gradient(90deg, var(--color-blue-gradation));
		}

		&.purple::before {
			left: 0;
			bottom: 0;
			clip-path: polygon(0 0, 0 100%, 100% 100%);
		}

		&.purple::after {
			left: 0;
			bottom: 0;
			clip-path: polygon(0 0, 0 100%, 100% 100%);
			background: linear-gradient(270deg, var(--color-purple-gradation));
		}

		&.green::before {
			right: 0;
			bottom: 0;
			clip-path: polygon(100% 0, 0 100%, 100% 100%);
		}

		&.green::after {
			right: 0;
			bottom: 0;
			clip-path: polygon(100% 0, 0 100%, 100% 100%);
			background: linear-gradient(90deg, var(--color-green-gradation));
		}
	}

	& .block-note {
		font-size: var(--fontSize-small-2);
		margin-top: -1.2em;
		line-height: var(--lineHeight-narrow-1);
	}
}

.block-home-about {
	display: grid;
	gap: var(--paddingSection-narrow-2);

	& .image {
		width: 12em;
		float: right;
		margin-left: 1.2em;
		max-width: calc(50% - 0.6em);

		& figcaption {
			padding-top: 0.2em;
			text-align: center;
			font-size: var(--fontSize-small-2);
		}
	}
}

.title-home-about {
	display: flex;
	justify-content: space-between;
	font-size: min(var(--fontSize-large-4), 5.2vw);
	line-height: var(--lineHeight-narrow-1);
	text-align: center;
	margin-bottom: 0.8em;

	& br {
		display: none;
	}

	& .inner {
		padding: 0.4em 0 0.3em;
	}

	&::before,
	&::after {
		content: '';
		width: 2.0em;
	}

	&::before {
		clip-path: polygon(100% 0, 50% 50%, 100% 100%, 0 100%, 0 0);
		background: linear-gradient(90deg, var(--color-green-light-gradation));
	}

	&::after {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
		background: linear-gradient(270deg, var(--color-green-light-gradation));
	}
}

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

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

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

.wrap-home-case {
	padding-block: var(--paddingSection-narrow-1);
	display: grid;
	gap: var(--paddingSection-narrow-1);
	background-color: var(--color-white);
	z-index: 10;

	&::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(225deg, var(--color-green-gradation));
		opacity: 0.53;
	}
}

.title-home-case {
	display: flex;
	justify-content: center;
	font-size: min(var(--fontSize-large-4), 5.2vw);
	line-height: var(--lineHeight-narrow-2);
	text-align: center;
	gap: 1.2em;
	margin-bottom: 0.8em;
	font-weight: var(--fontWeight-bold-1);

	& br {
		display: none;
	}

	& .line {

		&::before,
		&::after {
			content: '';
			position: absolute;
			border-left: var(--borderWidth-normal) solid var(--color-black);
		}

		&::before {
			height: 160%;
			top: -30%;
		}

		&.left::before {
			rotate: -50deg;
		}

		&.right::before {
			rotate: 50deg;
		}

		&::after {
			height: 80%;
			bottom: -20%;
		}

		&.left::after {
			rotate: -60deg;
		}

		&.right::after {
			rotate: 60deg;
		}
	}
}

.block-home-case-bg {
	background-color: var(--color-white);
	padding: 2.4em min(1.6em, 4.8vw);
}

.title-home-case-small {
	font-size: min(var(--fontSize-large-3), 4.8vw);
	line-height: var(--lineHeight-narrow-1);
	margin-bottom: 0.6em;
	padding-left: 1.0em;
	font-weight: var(--fontWeight-bold-1);

	&::before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		width: 0.4em;
		background: linear-gradient(225deg, var(--color-green-light-gradation));
		top: -0.1em;
		bottom: 0;
	}

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

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

	& br {
		display: none;
	}
}

.list-home-case {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
	margin-bottom: 2.4em;

	& li {
		width: calc((100% - ((7 - 1) * 0.8em)) / 7);
		border: var(--borderWidth-normal) solid var(--color-black);
		border-radius: var(--borderRadius-normal);
		overflow: hidden;
	}

	&.process {
		& li {
			&:nth-child(1) {
				box-shadow: 4px 4px 0 #ff8c8c;
			}

			&:nth-child(2) {
				box-shadow: 4px 4px 0 #ffa750;
			}

			&:nth-child(3) {
				box-shadow: 4px 4px 0 #ffe820;
			}

			&:nth-child(4) {
				box-shadow: 4px 4px 0 #76eb87;
			}

			&:nth-child(5) {
				box-shadow: 4px 4px 0 #82ffe8;
			}

			&:nth-child(6) {
				box-shadow: 4px 4px 0 #55a9ff;
			}

			&:nth-child(7) {
				box-shadow: 4px 4px 0 #d3a4ff;
			}

			& .step {
				width: 5.6em;
				text-align: center;
				border-right: var(--borderWidth-normal) solid var(--color-black);
				border-bottom: var(--borderWidth-normal) solid var(--color-black);
				font-size: var(--fontSize-small-2);
				line-height: var(--lineHeight-narrow-2);
				padding-top: 0.2em;
				font-weight: var(--fontWeight-bold-1);
			}

			&:nth-child(1) .step {
				background-color: #ff8c8c;
			}

			&:nth-child(2) .step {
				background-color: #ffa750;
			}

			&:nth-child(3) .step {
				background-color: #ffe820;
			}

			&:nth-child(4) .step {
				background-color: #76eb87;
			}

			&:nth-child(5) .step {
				background-color: #82ffe8;
			}

			&:nth-child(6) .step {
				background-color: #55a9ff;
			}

			&:nth-child(7) .step {
				background-color: #d3a4ff;
			}

			& .title {
				text-align: center;
				font-size: var(--fontSize-large-1);
				line-height: var(--lineHeight-narrow-2);
				font-weight: var(--fontWeight-bold-2);
				border-bottom: var(--borderWidth-heavy-1) dotted;
				padding: 0.5em 0 0.4em;
				white-space: nowrap;
			}

			&:nth-child(1) .title {
				border-color: #ff8c8c;
			}

			&:nth-child(2) .title {
				border-color: #ffa750;
			}

			&:nth-child(3) .title {
				border-color: #ffe820;
			}

			&:nth-child(4) .title {
				border-color: #76eb87;
				padding: 1.3em 0 1.0em;
			}

			&:nth-child(5) .title {
				border-color: #82ffe8;
				padding: 1.3em 0 1.0em;
			}

			&:nth-child(6) .title {
				border-color: #55a9ff;
				padding: 1.3em 0 1.0em;
			}

			&:nth-child(7) .title {
				border-color: #d3a4ff;
			}

			& .more {
				font-size: var(--fontSize-small-2);
				text-align: center;
				line-height: var(--lineHeight-narrow-2);
				padding: 1.0em 0;
				white-space: nowrap;
			}
		}
	}

	&.other {
		& li {
			& .step {
				padding: 0.6em 0.6rem 0;
				font-size: var(--fontSize-normal);
				line-height: var(--lineHeight-narrow-2);
				font-weight: var(--fontWeight-bold-1);
			}

			&:nth-child(1) .step {
				color: #ff8c8c;
			}

			&:nth-child(2) .step {
				color: #ffa750;
			}

			&:nth-child(3) .step {
				color: #ffe820;
			}

			&:nth-child(4) .step {
				color: #76eb87;
			}

			&:nth-child(5) .step {
				color: #82ffe8;
			}

			&:nth-child(6) .step {
				color: #55a9ff;
			}

			&:nth-child(7) .step {
				color: #d3a4ff;
			}

			& .more {
				font-size: var(--fontSize-small-2);
				line-height: var(--lineHeight-narrow-2);
				padding: 0.4em 0.6rem 1.0em;
			}
		}
	}
}

.list-home-case-voice {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6em 0.8em;

	& .title {
		padding-top: 0.6em;
		display: flex;
		align-items: flex-end;
		text-align: center;
		font-size: min(var(--fontSize-large-2), 4.4vw);
		line-height: var(--lineHeight-narrow-1);
		justify-content: center;

		&.title01 {
			grid-column: 1 / 3;
			grid-row: 1 / 2;
		}

		&.title02 {
			grid-column: 3 / 5;
			grid-row: 1 / 2;
		}

		&.title03 {
			grid-column: 1 / 3;
			grid-row: 3 / 4;
		}

		&.title04 {
			grid-column: 3 / 4;
			grid-row: 3 / 4;
		}

		&.title05 {
			grid-column: 4 / 5;
			grid-row: 3 / 4;
		}
	}

	& .text {
		background-color: var(--color-white);
		font-size: var(--fontSize-small-1);
		line-height: var(--lineHeight-narrow-1);
		border-radius: var(--borderRadius-normal);
		padding: 1.4em 1.2em;
		margin-bottom: 0;
		box-shadow: 0 0 6px rgb(0 0 0 / 0.2);

		&::before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			clip-path: polygon(0 0, 100% 0, 100% 70%, 0 30%);
			opacity: 0.40;
			border-radius: var(--borderRadius-normal);
		}

		&::after {
			content: '';
			display: block;
			width: 1em;
			aspect-ratio: 3 / 2;
			position: absolute;
			top: calc(100% - 1px);
			right: 12%;
			background-color: var(--color-white);
			clip-path: polygon(100% 0, 0 0, 51% 100%);
		}

		&.purple::before {
			background: linear-gradient(45deg, var(--color-purple-gradation));
		}

		&.green::before {
			background: linear-gradient(45deg, var(--color-green-gradation));
		}

		&.blue::before {
			background: linear-gradient(45deg, var(--color-blue-gradation));
		}

		&.orange::before {
			background: linear-gradient(45deg, var(--color-orange-gradation));
		}
	}
}

.block-home-case-results {
	display: grid;
	gap: 0.8em;
	grid-template-columns: repeat(2, auto);

	& .item {
		border: var(--borderWidth-normal) solid var(--color-black);
		padding: 1.0em min(1.0em, 4.8vw);

		& .title {
			line-height: var(--lineHeight-narrow-1);
			font-weight: var(--fontWeight-bold-1);
			font-size: var(--fontSize-large-1);
			margin-bottom: 0.6em;
		}
	}
}

.block-home-case-results-inner {
	display: grid;
	grid-template-columns: 1fr 6.0em;
	align-items: start;
	gap: 0.6em;

	&.photo-large {
		grid-template-columns: 1fr calc(6.0em * (1286 / 452));
	}
}

.list-home-case-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(6.4em, 100%), 1fr));
	gap: 0.4em;

	& li {
		border: var(--borderWidth-normal) solid;
		font-size: var(--fontSize-small-2);
		line-height: var(--lineHeight-narrow-2);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--borderRadius-small-1);
		padding-block: 0.8em;
	}

	&.green li {
		border-color: var(--color-green-light);
	}

	&.orange li {
		border-color: var(--color-orange-light);
	}
}

@media screen and (max-width: 1366px) {
	.list-home-case {
		& li {
			width: calc((100% - ((5 - 1) * 0.8em)) / 5);
		}
	}
}

@media screen and (max-width: 1280px) {
	.list-home-case {
		& li {
			width: calc((100% - ((4 - 1) * 0.8em)) / 4);
		}
	}
}

@media print,
screen and (max-width: 1024px) {
	.title-home-case {
		& br {
			display: inline;
		}
	}

	.title-home-case-small {
		& br {
			display: inline;
		}
	}

	.list-home-case {
		& li {
			width: calc((100% - ((3 - 1) * 0.8em)) / 3);
		}
	}

	.list-home-case-voice {
		grid-template-columns: repeat(2, 1fr);

		& .title {
			&.title01 {
				grid-row: 1 / 2;
				grid-column: 1 / -1;
			}

			&.title02 {
				grid-row: 3 / 4;
				grid-column: 1 / -1;
			}

			&.title03 {
				grid-row: 5 / 6;
				grid-column: 1 / -1;
			}

			&.title04 {
				grid-row: 7 / 8;
				grid-column: 1 / 2;
			}

			&.title05 {
				grid-row: 7 / 8;
				grid-column: 2 / 3;
			}
		}
	}

	.block-home-case-results-inner {
		grid-template-columns: 1fr;

		& img {
			width: 6.0em;
		}

		&.photo-large {
			grid-template-columns: 1fr;

			& img {
				width: calc(6.0em * (1286 / 452));
			}
		}
	}
}

@media screen and (max-width: 560px) {
	.list-home-case {
		& li {
			width: calc((100% - ((2 - 1) * 0.8em)) / 2);
		}
	}

	.block-home-case-results {
		grid-template-columns: 1fr;
	}
}

.wrap-home-library {
	padding-block: var(--paddingSection-narrow-2);
	background-color: white;
	z-index: 10;
}

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

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

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

.wrap-home-other {
	padding-block: var(--paddingSection-narrow-1);
	display: grid;
	gap: var(--paddingSection-narrow-1);
	background: linear-gradient(45deg, var(--color-other-gradation-bg));
	z-index: 10;
}

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

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

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

/* ----------------------------------------------------------------------------------------------------
Page
---------------------------------------------------------------------------------------------------- */
body {
	& .bg-page {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100lvh;
	}

	&#expo .bg-page {
		background: linear-gradient(225deg, var(--color-purple-gradation-bg));
	}

	&#presentation .bg-page {
		background: linear-gradient(225deg, var(--color-blue-gradation-bg));
	}

	&#special .bg-page {
		background: linear-gradient(225deg, var(--color-green-gradation-bg));
	}

	&#workshop .bg-page {
		background: linear-gradient(45deg, var(--color-orange-gradation-bg));
	}

	&#jobs .bg-page {
		background: linear-gradient(225deg, var(--color-purple-gradation-bg));
	}

	&#festa .bg-page {
		background: linear-gradient(225deg, var(--color-blue-gradation-bg));
	}

	&#library .bg-page {
		background: linear-gradient(45deg, var(--color-other-gradation-bg));
	}

	&#news .bg-page {
		background: linear-gradient(45deg, var(--color-other-gradation-bg));
	}

	&#other .bg-page {
		background: linear-gradient(45deg, var(--color-other-gradation-bg));
	}
}

.wrap-page {
	padding-top: 4.8rem;
	padding-bottom: 6.4rem;
	display: grid;
	gap: var(--paddingSection-narrow-2);
	max-width: 72rem;
}

@media screen and (max-width: 1280px) {
	.wrap-page {
		padding-top: 8.8rem;
	}
}

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

@media screen and (max-width: 560px) {
	.wrap-page {
		padding-top: 7.2rem;
		padding-bottom: 4.8rem;
	}
}

.list-info {
	display: grid;
	grid-template-columns: auto 1fr;
	line-height: var(--lineHeight-narrow-1);
	padding: 1.2em 1.8em;
	position: relative;
	gap: 0.2em 0;
	margin-bottom: 2.0em;
	margin-top: 1.6em;

	&.purple {
		background: linear-gradient(90deg, var(--color-purple-gradation-bg));
	}

	&.blue::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, var(--color-blue-gradation));
		opacity: 0.15;
	}

	&.green {
		background: linear-gradient(90deg, var(--color-green-gradation-bg));
	}

	&.orange::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, var(--color-orange-gradation));
		opacity: 0.15;
	}

	&::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0.5em;
	}

	&.purple::after {
		background: linear-gradient(180deg, var(--color-purple-gradation));
	}

	&.blue::after {
		background: linear-gradient(180deg, var(--color-blue-gradation));
	}

	&.green::after {
		background: linear-gradient(180deg, var(--color-green-gradation));
	}

	&.orange::after {
		background: linear-gradient(180deg, var(--color-orange-gradation));
	}
}

.title-page-main {
	display: inline-block;
	font-weight: var(--fontWeight-bold-2);
	color: var(--color-white);
	font-size: min(var(--fontSize-large-5), 4.8vw);
	line-height: var(--lineHeight-narrow-1);
	clip-path: polygon(calc(100% - 1.0em) 0%, 100% 50%, calc(100% - 1.0em) 100%, 0 100%, 0 0);
	text-shadow: 0 0 4px rgb(0 0 0 / 0.08);
	margin-left: calc((min(3.2rem, 4.8vw) + 0.6em) * -1);
	padding: 0.2em 2.6em 0.1em calc((min(3.2rem, 4.8vw) + 0.6em) * 1);
	translate: 0 -50%;
	white-space: nowrap;

	&.purple {
		background: linear-gradient(90deg, var(--color-purple-gradation));
	}

	&.blue {
		background: linear-gradient(90deg, var(--color-blue-gradation));
	}

	&.green {
		background: linear-gradient(90deg, var(--color-green-gradation));
	}

	&.orange {
		background: linear-gradient(90deg, var(--color-orange-gradation));
	}
}

.block-page-lead {
	margin-bottom: 1.6em;

	& .icon {
		text-shadow: 0 0 4px rgb(0 0 0 / 0.08);
		line-height: 1.1;
		text-align: center;
		letter-spacing: 0.08em;
		font-size: min(var(--fontSize-small-2), 2.6vw);
		float: right;
		border-radius: 100vh;
		width: 7.6em;
		aspect-ratio: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: var(--fontWeight-bold-3);
		color: var(--color-white);
		margin-left: min(1.6em, 2.4vw);
		margin-top: -1.2em;
		margin-bottom: 0.2em;

		& .number {
			font-size: var(--fontSize-large-8);
			letter-spacing: 0;
			font-weight: var(--fontWeight-bold-1);
			padding-left: 0.08em;
		}
	}

	&.purple .icon {
		background: linear-gradient(225deg, var(--color-purple-gradation));
	}

	&.blue .icon {
		background: linear-gradient(225deg, var(--color-blue-gradation));
	}

	&.green .icon {
		background: linear-gradient(225deg, var(--color-green-gradation));
	}

	&.orange .icon {
		background: linear-gradient(225deg, var(--color-orange-gradation));
	}

	&::before {
		content: '';
		display: block;
		clear: both;
	}
}

.block-page-apply {
	display: flex;
	margin-bottom: 0.4em;
	font-weight: var(--fontWeight-bold-1);
	line-height: var(--lineHeight-narrow-1);
	align-items: center;
	gap: 0.4em 0.8em;
	flex-wrap: wrap;
	font-size: min(1em, 3.6vw);

	& .title {
		color: var(--color-white);
		padding: 0.2em 1.2em;
		letter-spacing: 0.08em;
		font-size: var(--fontSize-small-1);
	}

	&.purple .title {
		background-color: var(--color-purple-light);
	}

	&.blue .title {
		background-color: var(--color-blue-light);
	}

	&.green .title {
		background-color: var(--color-green-light);
	}

	&.orange .title {
		background-color: var(--color-orange-light);
	}

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

	&.purple .date {
		color: var(--color-purple-light);
	}

	&.blue .date {
		color: var(--color-blue-light);
	}

	&.green .date {
		color: var(--color-green-light);
	}

	&.orange .date {
		color: var(--color-orange-light);
	}
}

.block-page-comment {
	text-align: right;
	z-index: 1;

	&+.list-info {
		margin-top: 0;
	}

	& br {
		display: none;
	}

	& .inner {
		display: inline-block;
		border: var(--borderWidth-normal) solid var(--color-black);
		border-radius: var(--borderRadius-small-1);
		font-size: min(var(--fontSize-small-2), 3.2vw);
		font-weight: var(--fontWeight-bold-1);
		text-align: center;
		background-color: var(--color-white);
		padding: 0.5em 0.8em;
		translate: -1.2em 0.8em;
		line-height: var(--lineHeight-narrow-1);

		&::before {
			content: '';
			display: block;
			width: 0.7em;
			aspect-ratio: 3 / 2;
			background-color: var(--color-black);
			clip-path: polygon(100% 0%, 0 0, 50% 100%);
			left: 50%;
			top: 100%;
			translate: -50% 1px;
			position: absolute;
		}
	}
}

.block-page-entry {
	display: flex;
	justify-content: center;
	margin-top: 2.0em;

	& a {
		color: var(--color-white) !important;
		font-weight: var(--fontWeight-bold-1);
		font-size: min(var(--fontSize-large-1), 4.0vw);
		text-decoration: none;
		border-radius: 100vh;
		padding: 0.4em 2.0em 0.4em 2.8em;
		overflow: hidden;
		text-shadow: 0 0 4px rgb(0 0 0 / 0.08);

		&::before {
			content: '';
			display: block;
			width: 0.36em;
			aspect-ratio: 2 / 3;
			background-color: var(--color-white);
			clip-path: polygon(0 0, 0% 100%, 100% 50%);
			position: absolute;
			left: 2.0em;
			translate: 0 -50%;
			top: 50%;
			transition: var(--easing-normal);
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 100%;
			width: 100%;
			height: 100%;
			background-color: var(--color-black);
			mix-blend-mode: soft-light;
			transition: var(--easing-slow-2);
			border-radius: 100vh;
		}

		&:hover::after {
			translate: 100%;
		}
	}

	&.purple a {
		background: linear-gradient(90deg, var(--color-purple-gradation));
	}

	&.blue a {
		background: linear-gradient(90deg, var(--color-blue-gradation));
	}

	&.green a {
		background: linear-gradient(90deg, var(--color-green-gradation));
	}

	&.orange a {
		background: linear-gradient(90deg, var(--color-orange-gradation));
	}
}

.block-page-more {
	display: grid;
	align-items: start;
	grid-template-columns: auto 1fr;
	gap: 2.0em 1.6em;

	&>.title {
		color: var(--color-white);
		padding: 0.2em 1.2em;
		letter-spacing: 0.08em;
		font-size: var(--fontSize-small-1);
		text-align: center;
	}

	&.purple>.title {
		background-color: var(--color-purple-light);
	}

	&.blue>.title {
		background-color: var(--color-blue-light);
	}

	&.green>.title {
		background-color: var(--color-green-light);
	}

	&.orange>.title {
		background-color: var(--color-orange-light);
	}

	&>.contents {
		padding-top: 0.2em;

		&.nopadding {
			padding-top: 0;
		}
	}
}

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

@media print,
screen and (max-width: 1024px) {
	.block-page-lead {
		& .icon {
			margin-top: 0;
		}
	}

	.block-page-comment {
		& .inner {
			translate: -0.8em 0.6em;
		}
	}
}

@media screen and (max-width: 560px) {
	.block-page-comment {
		& br {
			display: inline;
		}

		& .inner {
			translate: 0.6em 0.6em;
		}
	}

	.block-page-more {
		grid-template-columns: 1fr;
		gap: 1.2em;
		margin-top: 2.4em;

		&>.title {
			font-size: var(--fontSize-title);
		}

		&>.contents {
			padding-bottom: 1.2em;
		}

		&>.contents:last-child {
			padding-bottom: 0;
		}

		&.blue>.contents {
			padding-left: 00;
		}
	}
}

.table-timetable-expo {
	width: 100%;
	font-size: var(--fontSize-small-1);
	line-height: var(--lineHeight-narrow-1);
	overflow: hidden;

	& tr {
		border-bottom: var(--borderWidth-light-1) solid var(--color-black);

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

	& th,
	& td {
		padding: 0.4em 1.0em 0.3em;
	}

	& th {
		background-color: var(--color-purple-light);
		color: var(--color-white);
		text-align: center;

		&:first-child {
			border-right: var(--borderWidth-normal) dotted var(--color-white);
		}
	}

	& td {
		position: relative;
		vertical-align: top;

		&.purple {
			color: var(--color-purple-text);
			font-weight: var(--fontWeight-bold-2);
		}

		&:first-child {
			text-align: center;
			font-family: "Inter", sans-serif;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
			padding-inline: 0.8em;
		}

		&:first-child::before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			background-color: var(--color-purple-light);
			opacity: 0.15;
		}
	}

	& tr:nth-child(2) {
		& td:first-child::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			border-right: var(--borderWidth-normal) dotted var(--color-purple-light);
			height: 100vh;
		}
	}
}

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

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

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

.list-presentation-presenter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;

	& li {
		font-size: var(--fontSize-large-1);
		text-align: center;
		width: 11em;
		padding-block: 1.6em;
		font-weight: var(--fontWeight-bold-1);

		&::before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			background: linear-gradient(90deg, var(--color-blue-gradation));
			opacity: 0.15;
		}
	}
}

.list-presentation-schedule {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0 1.2em;

	& dt {
		height: 100%;
		text-align: center;
		writing-mode: vertical-rl;
		padding: 0.8em 0.2em;
		font-weight: var(--fontWeight-bold-1);

		&.am {
			background-color: #b2dfff;
			color: var(--color-blue-text);
		}

		&.pm {
			background-color: #73aade;
			color: var(--color-blue-dark);
		}

		&::before {
			content: '';
			display: block;
			top: calc(100% - 1px);
			left: 0;
			width: 100%;
			aspect-ratio: 3 / 1;
			position: absolute;
			clip-path: polygon(100% 0%, 0 0, 50% 100%);
			z-index: 1;
		}

		&.am::before {
			background-color: #b2dfff;
		}

		&.pm::before {
			background-color: #73aade;
		}
	}

	& dd {
		padding-block: 0.4em;

		& .title {
			font-weight: var(--fontWeight-bold-1);
			font-size: var(--fontSize-large-1);
			line-height: var(--lineHeight-narrow-1);

			&.blue {
				color: var(--color-blue-text);
			}
		}

		& .more {
			font-size: var(--fontSize-small-1);
			margin-top: 0.3em;

			&+.title {
				margin-top: 0.8em;
			}
		}
	}
}

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

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

@media screen and (max-width: 560px) {
	.list-presentation-presenter {
		justify-content: center;
	}
}

.block-special-copy {
	font-size: min(var(--fontSize-large-4), 6.0vw);
	font-weight: var(--fontWeight-bold-1);
	letter-spacing: 0.08em;
	display: flex;
	flex-wrap: wrap;
	line-height: var(--lineHeight-narrow-2);
	padding: 0.1em 0.5em;
	margin-bottom: 0.6em;

	& .text {
		&::before {
			content: '';
			display: block;
			position: absolute;
			border: var(--borderWidth-normal) solid var(--color-black);
			width: 0.4em;
			aspect-ratio: 1 / 2;
		}

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

		&.text02 {
			&::before {
				display: none;
			}
		}

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

	& .text03 {
		background: linear-gradient(270deg, var(--color-green-gradation));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.list-special-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(7.6em, 100%), 1fr));
	gap: 0.4em;

	& li {
		border-radius: var(--borderRadius-small-1);
		color: var(--color-white);
		text-align: center;
		line-height: var(--lineHeight-narrow-2);
		font-size: var(--fontSize-small-1);
		font-weight: var(--fontWeight-bold-2);
		overflow: hidden;
		text-shadow: 0 0 4px rgb(0 0 0 / 0.08);

		&>.inner {
			display: block;
			height: 100%;
			padding: 1.0em 0 0.8em;

			& .label {
				z-index: 1;
				white-space: nowrap;
			}

			&::before {
				content: '';
				display: block;
				background-size: contain;
				height: 2.8em;
				z-index: 1;
				position: relative;
				margin-bottom: 0.5em;
				filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.08));
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 700%;
				background: linear-gradient(225deg, var(--color-green-gradation));
			}
		}

		&:nth-child(1)>.inner {
			&::before {
				background-image: url(../images/special-flow-icon01.svg);
			}

			&::after {
				translate: 0%;
			}
		}

		&:nth-child(2)>.inner {
			&::before {
				background-image: url(../images/special-flow-icon02.svg);
			}

			&::after {
				translate: -14.3%;
			}
		}

		&:nth-child(3)>.inner {
			&::before {
				background-image: url(../images/special-flow-icon03.svg);
			}

			&::after {
				translate: -28.6%;
			}
		}

		&:nth-child(4)>.inner {
			&::before {
				background-image: url(../images/special-flow-icon04.svg);
			}

			&::after {
				translate: -42.9%;
			}
		}

		&:nth-child(5)>.inner {
			&::before {
				background-image: url(../images/special-flow-icon05.svg);
			}

			&::after {
				translate: -57.1%;
			}
		}
	}
}

.list-special-schedule {
	display: grid;
	grid-template-columns: auto 1fr;
	line-height: var(--lineHeight-narrow-1);
	gap: 0.4em 0;
	position: relative;
	margin-top: 0.4em;

	&::before {
		content: '';
		display: block;
		left: 0.55em;
		top: 0.7em;
		width: 0.2em;
		background-color: var(--color-gray-bg);
		position: absolute;
		bottom: 0.8em;
	}

	& dt {
		position: relative;
		padding-right: 0.7em;
		padding-left: 1.6em;
		font-weight: var(--fontWeight-bold-1);

		&::before {
			content: '';
			display: block;
			width: 0.5em;
			aspect-ratio: 1;
			background-color: var(--color-black);
			border-radius: 100vh;
			position: absolute;
			left: 0.4em;
			top: 0.5em;
		}

		&::after {
			content: '：';
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	& dd {
		padding-left: 0.2em;
	}
}

.block-special-movie {
	margin-top: 3.2em;
	margin-inline: auto;
	background: linear-gradient(270deg, var(--color-green-gradation-bg));
	max-width: 36em;
	padding: 0 0.8em 0.4em;
	border-radius: var(--borderRadius-normal);
	font-size: min(1em, 3.6vw);

	& .title {
		font-size: var(--fontSize-large-1);
		display: flex;
		justify-content: center;
		font-weight: var(--fontWeight-bold-1);
		gap: 0.6em;
		line-height: var(--lineHeight-narrow-1);
		padding-top: 0.8em;
		padding-bottom: 0.4em;

		&::before,
		&::after {
			content: '';
			border-left: var(--borderWidth-normal) solid var(--color-black);
		}

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

		&::after {
			rotate: 24deg;
		}
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

.title-news {
	text-align: center;
	margin-bottom: 1.6em;
	line-height: var(--lineHeight-narrow-3);
	font-size: min(1em, 3.6vw);

	& .en {
		display: block;
		font-weight: var(--fontWeight-bold-1);
		font-size: var(--fontSize-large-6);
		letter-spacing: 0.04em;
		margin-bottom: 0.04em;
	}

	& .ja {
		display: block;
		font-weight: var(--fontWeight-bold-2);
		font-size: var(--fontSize-small-1);
	}
}

.wrap-news {
	padding-top: 4.8rem;
	padding-bottom: 6.4rem;
	display: grid;
	max-width: 68rem;
}

.block-news {
	background-color: var(--color-white);
	padding-inline: min(3.2em, 4.8vw);
	padding-block: 2.4em;
}

.list-news {
	line-height: var(--lineHeight-narrow-1);

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

		&:first-child {
			border-top: var(--borderWidth-normal) dotted var(--color-black);
		}

		& a {
			text-decoration: none;
			gap: 0.8em;
			display: grid;
			grid-template-columns: auto 1fr;
			padding-block: 0.8em;

			& .date {
				color: var(--color-black) !important;
			}

			& .title {
				font-weight: var(--fontWeight-bold-1);
			}
		}
	}
}

.block-news-date {
	& .inner {
		line-height: var(--lineHeight-narrow-1);
		font-size: var(--fontSize-small-2);
		display: inline-block;
		background-color: var(--color-black);
		color: var(--color-white);
		padding: 0.1em 0.8em;
		margin-bottom: 0.6em;
	}
}

.title-news-entry {
	font-weight: var(--fontWeight-bold-1);
	line-height: var(--lineHeight-narrow-1);
	font-size: min(var(--fontSize-large-4), 5.2vw);
	border-bottom: var(--borderWidth-heavy-1) solid var(--color-black);
	padding-bottom: 0.2em;
}

.wrap-news-entry {
	padding-top: 1.6em;

	& h2 {
		font-size: var(--fontSize-large-3);
		font-weight: var(--fontWeight-bold-1);
		line-height: var(--lineHeight-narrow-1);
		margin-top: 2.0em;
		margin-bottom: 0.3em;
		padding-left: 0.9em;

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

		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 0.3em;
			bottom: 0.2em;
			background: linear-gradient(225deg, var(--color-green-light-gradation));
		}
	}

	& h3 {
		font-size: var(--fontSize-large-2);
		font-weight: var(--fontWeight-bold-1);
		line-height: var(--lineHeight-narrow-1);
		margin-bottom: 0.2em;
		margin-top: 1.6em;
	}

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

	& ul,
	& ol {
		display: grid;
		gap: 0.2em;
	}

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

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

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

		& img {
			width: 40em;
		}

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

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

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

.wp-pagenavi {
	display: flex;
	margin-top: 1.6em;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.2em;

	&>* {
		text-align: center;
		min-width: 2.0em;
		text-decoration: none;
		border: var(--borderWidth-light-1) solid var(--color-black);
		font-size: var(--fontSize-small-1);
		padding: 0.3em 0.6em 0.2em;

		&.current {
			background-color: var(--color-black);
			color: var(--color-white);
		}
	}
}

@media screen and (max-width: 1280px) {
	.wrap-news {
		padding-top: 8.8rem;
	}
}

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

@media screen and (max-width: 560px) {
	.wrap-news {
		padding-top: 7.2rem;
		padding-bottom: 4.8rem;
	}
}