@charset "UTF-8";

/*
 * Custom properties(variables):
 *
 */ 
:root {
	--main-color: #0c0806;
	--sub-color: #b0a3d4;
	--accent-color: #12adb3;
	--accent-color-red: #f3342c;
	--color-white: #fff;
	--color-gray: #65655e;
	--color-gray-10: #f8f8f8;
	--color-gray-20: #eee;
	--color-gray-30: #ccc;
	--color-gray-40: #aaa;
	--color-gray-50: #999;
	--color-gray-60: #777;
	--color-gray-70: #555;
	--color-gray-80: #333;
	--color-gray-90: #111;
	--color-black: #000;
	--color-red: #e30500;
	--color-blue: #1f449e;
	--color-yellow: #efee0e;
	--color-beige: #e7c3b2;
	--color-light-purple: #f2effc;
	--color-light-blue: DarkTurquoise;
	--color-dark-night: #2c233a;

	--bg-light-theme: #f6f5f5;
	--bg-dark-theme: #f6f5f5;
	--bg-main-color: var(--main-color);
	--bg-accent-color: var(--accent-color);
	--bg-white: var(--color-white);
	--bg-black: var(--color-black);
	--bg-gray: var(--color-gray);
	--bg-color: var(--color-gray-10);
	--bg-color-red: var(--color-red);
	--bg-color-blue: var(--color-blue);
	--bg-color-beige: var(--color-beige);
	--bg-color-light-pink: MistyRose;
	--bg-color-dark-night: var(--color-dark-night);

	--sp-width: 576px; /* smart phone size */
	--tb-width: 768px; /* tablet size */
	--pc-width: 1040px; /* pc size */
	--small-width: 
	--wrapper-width: 768px;
	--h-header: 100px;

	--xx-small: 0.75rem; /* 12px */
	--x-small: 0.8125rem; /* 13px */
	--small: 0.875rem; /* 14px */
	--medium: 1rem; /* 16px */
	--large: 1.125rem; /* 18px */
	--x-large: 1.25rem; /* 20px */
	--xx-large: 1.5rem; /* 24px */
	--xxx-large: 2rem; /* 32px */

	--anime-duration: 1s;
	--anime-delay: 1s;
	--anime-repeat: 1;

	--d: " . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}

/*
 * Fonts:
 *
 */
@font-face {
	font-family: "icons";
	src: url("/assets/font/icon_font.ttf") format("truetype");
}

[class^=icons] { font-family: "icons" }
.icons__light::before { content: "\e902" }
.icons__moon::before { content: "\e903"; }
.icons__arrow-before::before { content: "\e904"; }
.icons__arrow-upper::before { content: "\e905"; }
.icons__arrow-lower::before { content: "\e906"; }
.icons__arrow-next::before { content: "\e907"; }
.icons__send-email::before { content: "\e908"; }
.icons__external-link::before { content: "\e900"; }
.icons__pdf-icon::before { content: "\e901"; }
.icons__images::before { content: "\e90e"; }
.icons__camera::before { content: "\e90f"; }
.icons__music::before { content: "\e911"; }
.icons__play::before { content: "\e912"; }
.icons__spades::before { content: "\e917"; }
.icons__clubs::before { content: "\e918"; }
.icons__diamonds::before { content: "\e919"; }
.icons__mic::before { content: "\e91e"; }
.icons__file-empty::before { content: "\e925"; }
.icons__file-picture::before { content: "\e927"; }
.icons__file-music::before { content: "\e928"; }
.icons__folder::before { content: "\e92f"; }
.icons__creditcard::before { content: "\e93f"; }
.icons__phone::before { content: "\e942"; }
.icons__map-filled::before { content: "\e94b"; }
.icons__map::before { content: "\e94c"; }
.icons__calendar::before { content: "\e953"; }
.icons__keyboard::before { content: "\e955"; }
.icons__display::before { content: "\e956"; }
.icons__mobile::before { content: "\e958"; }
.icons__tablet::before { content: "\e959"; }
.icons__undo::before { content: "\e965"; }
.icons__redo::before { content: "\e966"; }
.icons__pubble::before { content: "\e96b"; }
.icons__search::before { content: "\e986"; }
.icons__zoom-in::before { content: "\e987"; }
.icons__zoom-out::before { content: "\e988"; }
.icons__lock::before { content: "\e98f"; }
.icons__unlocked::before { content: "\e990"; }
.icons__lab::before { content: "\e9aa"; }
.icons__switch::before { content: "\e9b6"; }
.icons__sphere::before { content: "\e9c9"; }
.icons__eye::before { content: "\e9ce"; }
.icons__eye-blocked::before { content: "\e9d1"; }
.icons__bookmark::before { content: "\e9d2"; }
.icons__star-empty::before { content: "\e9d7"; }
.icons__star-half::before { content: "\e9d8"; }
.icons__star-full::before { content: "\e9d9"; }
.icons__heart::before { content: "\e9da"; }
.icons__smile::before { content: "\e9e1"; }
.icons__smile_filled::before { content: "\e9e2"; }
.icons__plus::before { content: "\ea0a"; }
.icons__minus::before { content: "\ea0b"; }
.icons__cross::before { content: "\ea0f"; }
.icons__checkmark::before { content: "\ea10"; }
.icons__play::before { content: "\ea15"; }
.icons__pause::before { content: "\ea16"; }
.icons__stop::before { content: "\ea17"; }
.icons__volume-medium::before { content: "\ea27"; }
.icons__volume-mute::before { content: "\ea29"; }
.icons__volume-blocked::before { content: "\ea2a"; }
.icons__volume-increase::before { content: "\ea2b"; }
.icons__volume-decrease::before { content: "\ea2c"; }
.icons__arrow-up-left::before { content: "\ea39"; }
.icons__arrow-up::before { content: "\ea3a"; }
.icons__arrow-up-right::before { content: "\ea3d"; }
.icons__arrow-right::before { content: "\ea3c"; }
.icons__arrow-down-right::before { content: "\ea3d"; }
.icons__arrow-down::before { content: "\ea40"; }
.icons__arrow-down-left::before { content: "\ea3f"; }
.icons__arrow-left::before { content: "\ea40"; }
.icons__circle-up::before { content: "\ea41"; }
.icons__circle-right::before { content: "\ea42"; }
.icons__circle-down::before { content: "\ea43"; }
.icons__circle-left::before { content: "\ea44"; }
.icons__command::before { content: "\ea4e"; }
.icons__shift::before { content: "\ea4f"; }
.icons__ctrl::before { content: "\ea50"; }
.icons__option::before { content: "\ea51"; }
.icons__bold::before { content: "\ea62"; }
.icons__underline::before { content: "\ea63"; }
.icons__italic::before { content: "\ea64"; }
.icons__paragraph-left::before { content: "\ea77"; }
.icons__paragraph-center::before { content: "\ea78"; }
.icons__paragraph-right::before { content: "\ea79"; }
.icons__google-drive::before { content: "\ea8f"; }
.icons__facebook::before { content: "\ea90"; }
.icons__facebook-squire::before { content: "\ea91"; }
.icons__instagram::before { content: "\ea92"; }
.icons__youtube::before { content: "\ea9d"; }
.icons__youtube-long::before { content: "\ea9e"; }
.icons__apple::before { content: "\eabe"; }
.icons__finder::before { content: "\eabf"; }
.icons__android::before { content: "\eac0"; }
.icons__windows::before { content: "\eac1"; }
.icons__windows8::before { content: "\eac2"; }
.icons__wikipedia::before { content: "\eac8"; }
.icons__linkdin-filled::before { content: "\eac9"; }
.icons__linkdin::before { content: "\eaca"; }
.icons__chrome::before { content: "\ead9"; }
.icons__file-pdf::before { content: "\eadf"; }

/*
 * Basics elements style:
 *
 */
*,*::before,*::after { box-sizing: border-box; }
html {
  min-height: 100vh;
  width: 100%;
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
section + section{ margin-top: 4rem; padding: 4rem 0; }
b,strong { font-weight: bolder; }
small,time { font-size: var(--x-small); }
time { display: inline-block; white-space: nowrap; }
sub,sup {
	position: relative;
	font-size: var(--xx-small);
	vertical-align: baseline;
	line-height: 0;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }
em:lang(ja) { font-style: inherit; }
em:lang(ja)::before { content: '\201c'; padding-inline-start: 0.4em; }
em:lang(ja)::after { content: '\201d'; padding-inline-end: 0.3em; }
em.dot { text-emphasis: filled dot; }
q:lang(ja) { quotes: '「' '」' '『' '』'; }
nav > ul,ol { margin: 0; padding: 0; list-style: none; }
ul > li, ol > li { margin-bottom: 0.5em; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
h1 > span,
h2 > span,
h3 > span,
h4 > span {
	font-size: 0.875em;
}
h1, h2 { text-align: center; }
h1 { font-size: 1.476rem; margin-bottom: 3.75rem; letter-spacing: 0.24em; }
h2 { font-size: 1.383em; }
h3 { font-size: 1.296em; }
h4 { font-size: 1.215rem; }
h5 { font-size: 1.138rem; font-weight: bold; }
h6 { font-size: 1.067rem; font-weight: bold; }
h1 > span, h2 > span, h3 > span { font-size: 0.8em; }
p {
	font-size: 1rem;
	max-width: 75ch;
	margin: 0;
	line-height: 1.8;
}
p + p { margin-top: 1rem; text-indent: 1em; }
figure { margin: 0; text-align: center; }
figure img { display: block; margin: 0 auto; }
figure figcaption { padding-block-start: 0.5rem; font-size: var(--xx-small); }
pre, table, figure, img, svg { break-inside: avoid; }
hr { border: 0; height: 1px; background: var(--accent-color); }
a { color: currentColor; text-underline-offset: 0.3em; }
a:hover {
	text-decoration-line: underline;
	color: var(--color-blue);
	opacity: .7;
}
nav a { text-decoration-line: none; }
nav a:hover { opacity: 1; }
p a { color: var(--color-light-blue); }
address { font-style: normal; font-size: var(--small); }
dl { margin: 0; }
dl + dl { margin-top: 0.5rem; }
dl > dd { margin: 0; }
dl > dt, dl > dd { display: inline; }
dl > dt::after { content: '\3A'; padding: 0 1em 0 0.2em; font-weight: bold; }
dl > div { display: flex; gap: 1rem 3rem ; margin-bottom: 1rem; }
dl > div > dd { margin-left: 0; }
@media screen and (max-width: 678px) {
	dl > div { flex-direction: column; }
}
dl > div > dt { font-weight: 700; white-space: nowrap; }
button { cursor: pointer; }
input, select, textarea { display: block; width: 100%; margin: 0 0 0.5em; }
.scroll-table {
	overflow-x: auto;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1em;
	max-width: 100%;
	width: 100%;
	white-space: nowrap;
}
td,
th {
	border: 1px solid var(--main-color);
	text-align: start;
	padding: 0.5rem;
	font-size: 0.875rem;
}
th {
	background-color: var(--sub-color);
	font-weight: bold;
}
tr:nth-child(even) {
	background-color: var(--color-light-purple);
}

table caption {
	font-weight: bold;
	margin-bottom: 0.5rem;
}
small.copy-right {
	vertical-align: middle;
	line-height: 1.4em;
}
small.copy-right::before {
	content: '\00a9';
	color: currentColor;
	font-size: 1.4em;
	vertical-align: middle;
}
small.licence {
	vertical-align: middle;
	line-height: 1.4em;
}
small.licence::before {
	content: '\00ae';
	color: currentColor;
	font-size: 1.2em;
	vertical-align: middle;
}


/*
 * Common style
 *
 */
html { background-color: var(--bg-main-color); } 
main { background-color: var(--bg-white); padding: 6rem 0; }
.separete-line-wave + main { padding-block: 10rem; }
body { padding-top: 90px; }
body > header {
	position: fixed;
	top: 0;
	width: 100%;
	background-image: linear-gradient(to right, var(--bg-main-color),#000000d1,var(--bg-main-color));
	padding-top: 2rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	z-index: 2;
	color: var(--color-white);
	backdrop-filter: blur(3px);
	transition: all 500ms ease-out;
	box-shadow: 0px 3px 15px -7px var(--color-black);
}
@media screen and (max-width: 768px) {
	[data-scrolled="true"] body > header {
		transform: translateY(calc(0px - 2rem - 48px));
	}
}
body > header .header__inner {
	display: flex;
	justify-content: space-between;
	max-width: var(--pc-width);
	margin: auto;
}
@media screen and (max-width: 768px) {
	body { padding-top: 130px; }
	body > header .header__inner {
		display: block;
	}
}
a.logo {
	display: block;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5rem;
}
a.logo:hover {
	opacity: 1;
}
.gnav .gnav__list {
	display: flex;
	justify-content: center;
	column-gap: clamp(0.5rem, -0.227rem + 3.64vw, 2.5rem);
}
.gnav .gnav__list > li {
	position: relative;
	text-align: center;
	height: 2.8em;
	text-shadow: 0px 0px 10px rgb(9 9 9), 0px 0px 15px rgb(20 20 20);
	margin-bottom: 0;
}
.gnav .gnav__list > li a {
	font-size: clamp(0.875rem, 0.6715rem + 0.7752vw, 1rem);
}
.gnav .gnav__list > li a.active {
	pointer-events: none;
	cursor: default;
	padding-bottom: calc(1.3em + 3px);
}
.gnav .gnav__list > li a.active + .bar {
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 3px;
	background-color: var(--bg-color-blue);
	left: 0;
	bottom: 0;
}
.gnav .gnav__list > li > a:hover {
	text-decoration-line: none;
	color: var(--color-white);
	padding-bottom: calc(1.3em + 3px);
}
.gnav .gnav__list > li > a:hover::before {
	border-bottom: 3px ridge currentColor;
}
.gnav .gnav__list > li > a {
	position: relative;
	padding-bottom: 1.3em;
}
.gnav .gnav__list > li > a::before {
	display: inline-block;
	content: attr(data-title-en);
	font-size: 0.75em;
	text-transform: capitalize;
	color: var(--sub-color);
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50%;
	padding-bottom: 0.3em;
	transform: translateX(-50%);
}
.gnav .gnav__list > li > a.active::before {
	border-bottom: 3px ridge currentColor;
}
.gnav .gnav__list > li > a::after {
	position: absolute;
	content: '';
	inset: 0;
}
.toc-list ol { padding-inline-start: 2ch; }
.toc-list li > a {
	text-decoration: none;
	display: grid;
	grid-template-columns: auto max-content;
	align-items: end;
	font-weight: bold;
	margin-block-start: 1em;
}
.toc-list li > a > .page {
	min-width: 2ch;
	font-variant-numeric: tabular-nums;
	text-align: right;
	padding-left: 1ch;
}
.toc-list li > a > .title {
	position: relative;
	overflow: hidden;
}
.toc-list li > a .leaders::after {
	position: absolute;
	padding-left: .25ch;
	content: var(--d) var(--d) var(--d) var(--d) var(--d) var(--d) var(--d);
	text-align: right;
}
.hero { overflow: hidden; }
.parallax-background {
	position: relative;
	display: flex;
	flex-direction: column;
	background-image: url("/assets/images/topvisual.jpg");
	height: min(66.666vw, 720px);
	width: 100%;
	align-self: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	background-color: var(--bg-main-color); 
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	z-index: -1;
	will-change: transform;
}
.separete-line-wave{
	overflow:hidden;
	position:relative;
	padding-top:8rem;
	background-color:var(--color-white);
	filter: drop-shadow(0px -50px 13px var(--color-black));
}
.separete-line-wave::before{
	content:'';
	position: absolute;
	bottom: -1px;
	left: -1px;
	right: -1px;
	top: -1px;
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 90px;
	background-position: 50% 0%;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23000000"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23000000"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23000000"/></svg>');
}

@media (min-width:768px){
	.separete-line-wave::before{
		background-size: 100% 90px;
		background-position: 50% 0%;
	}
}

@media (min-width:1025px){
	.separete-line-wave::before{
		bottom: -0.1vw;
		left: -0.1vw;
		right: -0.1vw;
		top: -0.1vw;
		background-size: 207% 139px;
		background-position: 50% 0%;
	}
}
._reverse { transform: scaleY(-1); }
body > footer {
	--bg-color: var(--bg-main-color);
	position: -webkit-sticky;
	position: sticky;
	top: 100vh;
	background-color: var(--bg-color);
	color: var(--color-white);
	padding-top: 4rem;
	padding-bottom: 5rem;
}
.breadcrumb { --bg-color: var(--bg-white); padding-block: 0.4rem; }
.breadcrumb li {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--color-gray-80);
}
.breadcrumb li + li::before {
	content: '\e907';
	font-family: 'icons';
	font-weight: bold;
	font-size: 1em;
	padding: 0 0.6rem;
}
.breadcrumb li > span {
	display: inline-block;
	max-width: 24em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.breadcrumb li > a { text-decoration-line: underline; }
.banners {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.banners__item {
	position: relative;
	flex: 0 0 calc((100% - 0.5rem * 2) / 3);
	background: var(--color-gray-20);
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
}
.banners__item img { object-fit: contain; width: 100%; }
.banners__item img[src$='.jpg'],
.banners__item img[src$='.png'],
.banners__item img[src$='.webp'] { mix-blend-mode: multiply; }
.banners__item a {
	text-decoration: none;
	font-size: clamp(0.6785rem, 0.491rem + 0.7144vw, 1rem);
	font-weight: 700;
	white-space: nowrap;
}
.banners__item a::after { content: '' !important; position: absolute; inset: 0; }
[id] { scroll-margin-top: calc(var(--h-header) + 2.5em); }
[hidden], .hidden { display: none !important; }
[href$=".pdf"]::after {
	content: '\2009\eadf';
	font-family: 'icons';
	font-size: 1.2em;
}
[target="_blank"][rel="noopener"]::after {
	content: "\2009\e900";
	font-family: 'icons';
	font-size: 1.2em;
	vertical-align: -0.1rem;
}
[data-domain][data-user]::before {
	content: attr(data-domain) "\0040" attr(data-user);
	unicode-bidi: bidi-override;
	direction: rtl;
}
[href^=tel]::after {
	content: " \e942";
	font-family: "icons";
}
.e-mail::after {
	content: " \e908";
	font-family: "icons";
	vertical-align: bottom;
	font-size: 1.4em;
}
main h1 { position: relative; line-height: 2; }
main h1::after {
	position: absolute;
	display: inline-block;
	font-size: 0.6em;
	font-weight: bold;
	letter-spacing: 0em;
	color: var(--sub-color);
	content: attr(id);
	text-transform: capitalize;
	bottom: -1.2em;
	left: 50%;
	transform: translateX(-50%);
}
h2 [target="_blank"][rel="noopener"]::after { font-size: 1em; }
.pagination {
	display: flow-root;
}
.pagination li {
	display: inline-block;
	border: solid 1px var(--main-color);
}
.pagination li + li { border-width: 1px 1px 1px 0; }
.pagination li > a { padding: 0.5em; }

/*
 * Utility class:
 *
 */
.wrapper {
	max-width: var(--wrapper-width, 768px);
	margin: 0 auto;
	padding: 0 2rem;
}
.flex-container {
	display: flex;
	row-gap: 1rem;
}
@media (max-width: 576px) {
	.flex-container {
		justify-content: center;
		flex-wrap: wrap;
	}
	.flex-container figure {
		max-width: 340px;
	}
}
.frame {
	background-color: var(--color-light-purple);
	border-radius: 1rem;
	margin: 2rem auto;
	width: fit-content;
	padding: 3em;
}
.video > iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-left: auto;
	margin-right: auto;
}
.wide {
	background-color: var(--bg-color);
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
.heading1 { position: relative;text-align: center; }
.heading1::after {
	content: "";
	position: absolute;
	width: 3em;
	height: 3px;
	left: 50%;
	bottom: -0.6em;
	background-color: var(--sub-color);
	transform: translateX(-50%);
}
.heading2 {
	font-size: var(--large);
	font-weight: bold;
}
.heading3 {
	padding-left: 1em;
	border-left: solid 5px var(--sub-color);
}
small.annotation,
ul.annotation {
	display: block;
	text-indent: -1em;
	padding-left: 1em;
}
ul.annotation { list-style: none;  }
small.annotation::before { content: "※";padding-right: 0.1em; }
ul.annotation > li::before { content: "※";padding-right: 0.1em; }
.center { display: grid; place-content: center; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-indent { text-indent: 1em; }
.font-xx-small { font-size: var(--xx-small); }
.font-x-small { font-size: var(--x-small); }
.font-small { font-size: var(--small); }
.font-medium { font-size: var(--medium); }
.font-large { font-size: var(--large); }
.font-x-large { font-size: var(--x-large); }
.font-xx-large { font-size: var(--xx-large); }
.font-xxx-large { font-size: var(--xxx-large); }
.font-normal { font-weight: normal !important; }
.font-thin { font-weight: lighter; }
.font-bold { font-weight: bold; }
.letter-wide { letter-spacing: 0.12em; }
.text-black { color: var(--color-black); }
.text-white { color: var(--color-white); }
.text-gray { color: var(--color-gray); }
.text-dark-gray { color: var(--color-gray-70); }
.text-red { color: var(--color-red); }
.visually-hidden {
	position: fixed !important;
	top: 0px !important;
	left: 0px !important;
	width: 4px !important;
	height: 4px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	visibility: visible !important;
}
.char2:first-letter { letter-spacing: 2em; }
.char3 {
	width: 4em;
	letter-spacing: 0.5em;
	white-space: nowrap;
}
a.btn, button.btn, div.btn {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.3rem 3rem;
	-webkit-appearance: none;
	margin: 0;
	border: solid 1px var(--bg-black);
	background-color: var(--bg-white);
	font-size: var(--x-small);
	font-weight: bold;
	color: var(--bg-color-black);
	text-decoration: none;
	cursor: pointer;
	transition: 0.5s ease-in-out;
}
.btn:hover {
	color: var(--color-white);
	background-color: var(--bg-black);
	text-decoration-line: none;
}
.btn[tabindex="-1"] {
	pointer-events: none;
	opacity: .5;
}
a.btn::before,
a.btn::after,
a[rel="noopener"].btn::before,
a[rel="noopener"].btn::after,
button.btn::before,
button.btn::after,
div.btn::before,
div.btn::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 2px;
	top: calc(50% - 1px);
	right: 1.2rem;
	border-radius: 9999px;
	background-color: currentColor;
	transform-origin: calc(100% - 1.5px) 50%;
}
.btn::before { transform: rotate(45deg); }
.btn::after { transform: rotate(-45deg); }
.btn[disabled] {
	pointer-events: none;
	background-color: var(--bg-gray);
}
.fieldset { 
	border: 1px solid var(--color-gray-70); 
	border-top: none; 
	margin: 2rem auto; 
	padding: 0.5rem; 
} 
.fieldset h2,
.fieldset h3,
.fieldset h4 {
	display: flow-root;
	margin: -1rem -0.6rem; 
	padding-bottom: 1.5rem;
} 
.fieldset h2 span,
.fieldset h3 span,
.fieldset h4 span { 
	font-size: var(--large); 
	font-weight: bold;
	float: left; 
	transform: translateY(-0.2em);
} 
.fieldset h2:before,
.fieldset h3:before,
.fieldset h4:before { 
	border-top: 1px solid var(--color-gray-70); 
	content: ''; 
	float: left; 
	margin: 0.5rem 0rem 0 1px; 
	width: 2rem; 
} 
.fieldset h2:after,
.fieldset h3:after,
.fieldset h4:after { 
	border-top: 1px solid var(--color-gray-70); 
	content: ' '; 
	display: block; 
	height: 1.5rem; 
	top: 0.5rem; 
	left: 2px; 
	margin: 0 3px 0 0; 
	overflow: hidden; 
	position: relative; 
} 
.important-notification {
	width: 100%;
	margin-block-end: 2rem;
	padding: 1rem 2rem;
	background-color: var(--bg-color-light-pink);
	border-radius: 8px;
	color: var(--color-red);
	font-size: var(--small);
}
.important-notification a { color: currentColor; text-decoration: underline; }
.card {
	position: relative;
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	column-gap: 2vw;
	margin-bottom: 0.8rem;
	letter-spacing: normal;
}
@media screen and (max-width: 768px) {
	.card {
		justify-content: flex-start;
	}
}
.card h2, .card h3 {
	text-align: left;
	font-size: 1rem;
	font-weight: inherit;
	width: 100%;
}
.card img { box-shadow: 0 0 3px 1px rgba(0,0,0,0.1) inset; }
.column-2 { list-style: none; margin: 0; padding: 0; columns: 2; }
.column-2 > li { margin-bottom: 0.4rem; }
.columns-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.2rem;
}
.inline { display: inline; }
.inline-blk { display: inline-block; }
.block { display: block; }
.contents { display: contents; }
.m0 { margin: 0em !important; }
.m1 { margin: 1em; }
.m2 { margin: 2em; }
.m3 { margin: 3em; }
.m4 { margin: 4em; }
.m5 { margin: 5em; }
.mt0 { margin-top: 0em !important; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt3 { margin-top: 3em; }
.mt4 { margin-top: 4em; }
.mt5 { margin-top: 5em; }
.mr0 { margin-right: 0em !important; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mr3 { margin-right: 3em; }
.mr4 { margin-right: 4em; }
.mr5 { margin-right: 5em; }
.mb0 { margin-bottom: 0em !important; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.mb3 { margin-bottom: 3em; }
.mb4 { margin-bottom: 4em; }
.mb5 { margin-bottom: 5em; }
.ml0 { margin-left: 0em !important; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.ml3 { margin-left: 3em; }
.ml4 { margin-left: 4em; }
.ml5 { margin-left: 5em; }
.mx0 { margin-left: 0em !important;margin-bottom: 0em !important; }
.mx1 { margin-left: 1em;margin-right: 1em; }                      
.mx2 { margin-left: 2em;margin-right: 2em; }                      
.mx3 { margin-left: 3em;margin-right: 3em; }                      
.mx4 { margin-left: 4em;margin-right: 4em; }                      
.mx5 { margin-left: 5em;margin-right: 5em; }                      
.my0 { margin-top: 0em !important;margin-bottom: 0em !important; }
.my1 { margin-top: 1em;margin-bottom: 1em; }                      
.my2 { margin-top: 2em;margin-bottom: 2em; }                      
.my3 { margin-top: 3em;margin-bottom: 3em; }                      
.my4 { margin-top: 4em;margin-bottom: 4em; }                      
.my5 { margin-top: 5em;margin-bottom: 5em; }                      
.mx-auto { margin-left: auto;margin-right: auto; }
.p0 { padding: 0em !important; }
.p1 { padding: 1em; }
.p2 { padding: 2em; }
.p3 { padding: 3em; }
.p4 { padding: 4em; }
.p5 { padding: 5em; }
.pt0 { padding-top: 0em !important; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pt3 { padding-top: 3em; }
.pt4 { padding-top: 4em; }
.pt5 { padding-top: 5em; }
.pr0 { padding-right: 0em !important; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pr3 { padding-right: 3em; }
.pr4 { padding-right: 4em; }
.pr5 { padding-right: 5em; }
.pb0 { padding-bottom: 0em !important; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pb3 { padding-bottom: 3em; }
.pb4 { padding-bottom: 4em; }
.pb5 { padding-bottom: 5em; }
.pl0 { padding-left: 0em; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.pl3 { padding-left: 3em; }
.pl4 { padding-left: 4em; }
.pl5 { padding-left: 5em; }
.px0 { padding-inline: 0em; }
.px1 { padding-inline: 1em; }
.px2 { padding-inline: 2em; }
.px3 { padding-inline: 3em; }
.px4 { padding-inline: 4em; }
.px5 { padding-inline: 5em; }
.py0 { padding-block: 0em; }
.py1 { padding-block: 1em; }
.py2 { padding-block: 2em; }
.py3 { padding-block: 3em; }
.py4 { padding-block: 4em; }
.py5 { padding-block: 5em; }

.show-pc { display: block; }
.show-sp { display: none; } 

/*
 * Doc page:
 *
 */

.toc-hamburger {
	display: none;
	appearance: none;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 9;
	width: 3rem;
	height: 1.4rem;
	border: none;
	background-color: transparent;
	border-radius: 4px;
	cursor: pointer;
	padding: 0 0.5rem;
	line-height: 0.5;
}

.toc-hamburger > div {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--color-gray-70);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toc-hamburger > div:before,
.toc-hamburger > div:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc((2px / 2) + (2px / 2) - (1.4rem / 2));
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.4s ease;
}
.toc-hamburger > div:after {
  top: calc((1.4rem - 2px - 2px) / 2);
}

.toc-hamburger[aria-expanded="true"] > div {
	transform: rotate(135deg);
}
.toc-hamburger[aria-expanded="true"] > div::before,
.toc-hamburger[aria-expanded="true"] > div::after {
	top: 0;
  transform: rotate(90deg);
}
.toc-hamburger[aria-expanded="true"] > div::after {
	opacity: 0;
}
  
  .toc-nav__inner {
	padding: 4rem 1.5rem 2rem;
  }
  
  .toc-nav__title {
	font-size: var(--large);
	margin-bottom: 1.5rem;
	text-align: left;
  }
  
  [data-show-toc="true"] .toc-hamburger {
	display: block;
  }
	[data-toc-opened="true"] > body {
		overflow: hidden;
	}
  [data-toc-opened="true"] .toc-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--bg-white);
	transition: all 500ms ease-out;
	z-index: 9;
	overflow-y: auto;
  }

[id^=code] {
	position: relative;              
	background: var(--bg-white);
	margin: 0;
	padding: 3rem 1.5rem 1rem 1.5rem;                 
	border-radius: 0.4rem;
}
.window {
	background-color: var(--bg-white);
	padding: 2rem 0.2rem 0.2rem;
	border-radius: 0.4rem;
	box-shadow: 0 0 8px 5px #00000020;
}
.window__header {
	position: absolute;
	width: 100%;
	height: 2.4rem;
	top: 0;
	left: 0;
	background-color: var(--bg-light-theme);
	border-radius: 0.4rem 0.4rem 0 0;
}
.window__buttons {
	height: 2.4rem;
	display: inline-flex;
	align-items: center;
	margin: 0 0.4rem;
}
.window__buttons > span {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	margin: 0 0.2rem;
	cursor: pointer;
}
.window__buttons > .close,
.window__buttons > .hide,
.window__buttons > .full { position: relative; }
.window__buttons > .close {
	background: #ff5f57;
	border: 1px solid #e45952;
}
.window__buttons > .hide {
	background: #ffbd2d;
	border: 1px solid #e1a73e;
}
.window__buttons > .full {
	background: #27c93f;
	border: 1px solid #2bac2d;
}
.close > i, .hide > i, .full > i {
	position: absolute;
	inset: 0;
	left: 0.5px;
	bottom: 0.5px;
	line-height: 1;
	font-size: 0.6rem;
	font-style: normal;
	vertical-align: top;
	font-weight: bold;
	text-align: center;
	opacity: 0;
}
.close:hover > i, .hide:hover > i, .full:hover > i { opacity: 1; }
.window__title {
	display: inline-block;
	margin: 0 auto;
	line-height: 2.4rem;
	font-weight: bold;
	font-size: 0.875rem;
	color: var(--color-gray-70);
}
.copy__button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	vertical-align: middle;
	position: absolute;
	font-weight: bold;
	color: var(--color-gray);
	top: 0.6rem;
	right: 0.2rem;
}
.copy__button::after {
	content: "\e925";
	font-family: "icons";
	font-size: 1.2rem;
	vertical-align: middle;
}
.copy__button > span {
	padding-inline-end: 0.4em;
}
.window .code { padding: 1.5rem 2rem; }
.window code {
	display: inline-block;
	word-break: break-all;
	counter-increment: line-number;
	font-size: 1rem;
	text-indent: -1em;
}
.window code::before {
	content: counter(line-number)" ";
	font-family: initial;
	font-size: 0.9em;
	color: var(--color-gray);
}
.controle-panel {
	display: inline-flex;
	align-items: center;
	column-gap: 0.4rem;
	padding: 1rem;
}
.controle-panel img {
	vertical-align: bottom;
	width: 1.5em;
	height: auto;
}
.toggle-button {
	margin-right: 2rem;
	display: inline-block;
	position: relative;
	width: 50px;
	height: 25px;
	border-radius: 12.5px;
	background-color: #dddddd;
	cursor: pointer;
	transition: background-color .4s;
}
.toggle-button:has(:checked) { background-color: var(--color-gray-60); }
.toggle-button::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	box-shadow: 0 0 5px rgb(0 0 0 / 20%);
	background-color: var(--color-white);
	transition: left .36s;
}
.toggle-button:has(:checked)::after { left: 25px; }
.toggle-button input { display: none; }
.darkmode-label { line-height: 1.6em; color: var(--color-gray-70); }
.darkmode-label::after {
	content: "\e903";
	font-family: "icons";
	padding-left: 0.3em;
	font-size: 1.6em;
	vertical-align: middle;
}


/*
 * Information:
 *
 */
#information + ol,
.important-notification + ol {
	letter-spacing: -1em;
	display: flex;
	gap: 2vw;
	flex-wrap: wrap;
}
#information + article > div:first-child {
	display: flex;
	flex-direction: column-reverse;
	row-gap: 0.6em;
}
#information + article h2,
#information + article h3,
#information + article h4,
#information + article p {
	text-align: left;
}
#information + article figure {
	padding: 1rem;
}
#information + article figure > img {
	display: inline-block;
	width: 100%;
	max-width: 600px;
	margin-bottom: 2rem;
}
#information + article .detail {
	word-break: break-all;
}
[class^=tag] {
	display: inline-block;
	width: 8em;
	height: calc(1em + 0.6em);
	font-size: 0.8125rem;
	text-align: center;
	color: var(--color-white);
}
.tag__news { background-color: #f07a54; }
.tag__media { background-color: #dd61ce; }
.tag__recruitment { background-color: #ed436c; }
.tag__event { background-color: #4378d5; }
.tag__other { background-color: var(--bg-gray); }
.tag__free { background-color: #65be61; }
.tag__news::before { content: 'ニュース';vertical-align: middle; }
.tag__media::before { content: 'メディア';vertical-align: middle; }
.tag__recruitment::before { content: '募集';vertical-align: middle; }
.tag__event::before { content: 'イベント';vertical-align: middle; }
.tag__other::before { content: 'その他';vertical-align: middle; }
.card .card__thumbnail { min-width: 200px;aspect-ratio: 5/3; }
.card .card__thumbnail img {
	object-fit: cover;
	width: 100%;
	aspect-ratio: 5/3;
	max-width: 200px;
	min-height: 120px;
}

/*
 * Publication:
 *
 */
.year-navigation {
	display: flex;
	justify-content: center;
	gap: 1em;
	margin-bottom: 2rem;
}

.year-navigation > a {
	position: relative;
}

.year-navigation > a + a::before {
	content: '｜';
	position: absolute;
	left: -1em;
}

.publications section {
	margin-bottom: 2rem;
}
.publications section + section {
	margin: 0;
	padding: 2rem 0;
	border-top: solid 1px var(--color-gray-20);
}
.publications section > * { text-align: left; }
.publications section h2 { font-size: var(--midium);margin-bottom: 0.4rem; }
.publications section p {
	font-size: var(--small);
	color: var(--color-gray-70);
	margin-left: 0;
}
.publications section span { font-size: var(--xx-small);font-weight: bold; }
.year > span, .year > a { font-size: var(--x-small); }
.publications [id^="2"] { position: relative;margin-left: 6em;margin-bottom: 6rem; }
.publications [id^="2"]::before {
	content: attr(id);
	position: absolute;
	top: 0;
	left: -6em;
	font-weight: bold;
	font-size: 1rem;
}
.publications .publication-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.publication-tags .publication-tags__status {
	color: var(--accent-color-red);
}

.publication-tags .publication-tags__date {
	font-weight: 300;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.fadeIn { animation-name: fadeIn; }
.fadeOut { animation-name: fadeOut; }

.animated.slower {
	animation-duration: calc(var(--anime-duration) * 3);
	animation-delay: var(--anime-delay);
}

/*
 * Tablet and DesktopPC size:
 * 577 <= width
 */
@media (min-width: 577px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
		color: inherit;
	}
}

/*
 * Tablet(sideways) size:
 * width <= 1024px 
 */
@media (max-width: 1024px) {
	.banners__item { flex: 0 0 calc((100% - 0.5rem * 2) / 3); }
}

/*
 * Tablet size:
 * width <= 768px 
 */
@media (max-width: 768px) {
	p { max-width: 45ch; margin-left: auto; margin-right: auto; }
	[data-scrolled="true"] body > header .header__inner {
		display: block;
	}
	.card-list {
		display: flex;
		flex-wrap: wrap;
		gap: 2vw;
	}
	li.card {
		flex-direction: column;
		align-items: center;
		row-gap: 0.4rem;
		max-width: calc((100% - 2vw * 2) / 3);
	}
	li.card .card__thumbnail { order: 1; width: 100%; }
	li.card .card__thumbnail > img { width: 100%; max-width: 100% !important; }
	li.card .card__title + div { order: 2; width: 100%; }
	li.card .card__title a { font-size: var(--small); }
	li.card .card__title { order: 3; }
	#information + ol .card__thumbnail { min-width: auto; }
}

/*
 * SmartPhone size:
 * width <= 576px
 */
@media (max-width: 576px) {
	img { width: 100%; }
	img[src$="main_logo.svg"] { max-width: 300px; }
	br.show-pc { display: none; }
	br.show-sp { display: block; } 
	.separete-line-wave + main { padding: 0; }
	.wrapper { padding-left: 1rem;padding-right: 1rem; }
	.frame {
		padding: 1.5em;
		border-radius: 0.5rem;
	}
	li.card { max-width: calc((100% - 2vw * 1) / 2); margin-bottom: 1.5rem; }
	.banners__item { flex: 0 0 calc((100% - 0.5rem * 1) / 2); }
	.publications [id^="2"] { position: relative;margin-left: 4em; }
	.publications [id^="2"]::before {
		left: -4em;
	}
}

@media print, (prefers-reduced-motion: reduce) {
	.animated {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
	.animated[class*='Out'] {
		opacity: 0;
	}
}

@media print {
	tr, td, th { page-break-inside: avoid }
	thead { display: table-header-group }
	.NoPrint { visibility: hidden; display: none }
	a { color:#000000}
	a[href^="http"]:after{ content: " (" attr(href) ") "; }
}

/*
 * Members:
 *
 */
#members + div {
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	gap: 2rem;
	flex-wrap: wrap;
}

#members + div h2 {
	text-align: left;
	margin-bottom: 4rem;
}

@media screen and (max-width: 576px) {
	#members + div {
		flex-direction: column-reverse;
	}
	#members + div h2 {
		text-align: center;
		margin-bottom: 1rem;
	}
}	

#members + div img[src$="yuji.jpg"] {
	max-width: 160px;
}