@charset "UTF-8";

/*
 * Layout
 */

html {
	background-color: var(--bg-main-color);
}

/* Main content */
main {
	display: flow-root;
	background-color: var(--bg-white);
	padding: 0;
    padding-bottom: 4rem;
}

@media screen and (max-width: 768px) {
	main {
		padding: 2.5rem 0;
	}
}

.separete-line-wave + main {
	padding-block: 4rem;
}

/* Header */
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: 1rem 1.5rem 0;
	z-index: 2;
	color: var(--color-white);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: all 300ms ease-out;
	box-shadow: 0px 3px 15px -7px var(--color-black);
}

body > header .header__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: var(--pc-width);
	margin: auto;
}


/* Footer */
body > footer {
	--bg-color: var(--bg-main-color);
	position: sticky;
	top: 100vh;
	background-color: var(--bg-color);
	color: var(--color-white);
	padding: 4rem 1.5rem 5rem;
}

body > footer .footer__inner {
	display: flex;
	justify-content: space-between;
	max-width: var(--pc-width);
	margin: auto;
}

.footer__inner > div:last-child {
	flex: 1;
}

/* フッターのメニュー */
footer .footer-nav {
	display: flex;
	justify-content: flex-end;
	column-gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

footer .footer-nav > li {
	margin: 0;
	text-align: left;
}

footer .footer-nav > li > a,
footer .footer-nav .footer-nav__top {
	font-weight: bold;
}

footer .footer-nav ul {
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

footer .footer-nav ul > li {
	margin: 0 0 0.35rem;
}

body > footer .footer__logo {
	display: inline-block;
	margin-bottom: 1rem;
}

body > footer .footer__logo img {
	display: block;
	width: 150px;
	max-width: none;
	height: auto;
}

footer .footer-nav a {
	font-size: var(--x-small);
	text-decoration: none;
}

footer .footer-nav a:hover {
	color: var(--sub-color);
	text-decoration: underline;
}

/* プライバシーポリシー（メニューと下揃え） */
body > footer .footer__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body > footer .footer__bottom {
	margin-top: auto;
	padding-top: 2rem;
	margin-bottom: 4px; /* 下端の調整 */
	font-size: var(--xx-small);
	line-height: 1;
}

footer .footer-nav ul > li:last-child {
	margin-bottom: 0;
}

body > footer .footer__bottom a {
	text-decoration: none;
}

body > footer .footer__bottom a:hover {
	color: var(--sub-color);
	text-decoration: underline;
}

@media screen and (max-width: 768px) {
	body > footer {
		padding-top: 2rem;
	}

	body > footer .footer__info {
		align-items: center;
	}
	
	body > footer .footer__inner {
		flex-direction: column-reverse;
		row-gap: 40px;
	}
	
	body > footer .footer__inner > * {
		margin: 0 auto;
		text-align: center;
	}

	footer .footer-nav {
		justify-content: center;
		column-gap: 1.75rem;
	}
}

/* Logo */
a.logo {
	display: block;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5rem;
}

a.logo:hover {
	opacity: 1;
}

/*
 * Navigation
 */
.gnav .gnav__list {
	display: flex;
	justify-content: center;
	column-gap: clamp(0.5rem, -0.227rem + 3.64vw, 2.5rem);
  padding-bottom: 5px;
}

.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 {
	position: relative;
	display: inline-block;
	min-width: 4.5em;
	padding-bottom: calc(1.3em + 1px);
	font-size: clamp(0.875rem, 0.6715rem + 0.7752vw, 1rem);
	cursor: pointer;
}

.gnav .gnav__list > li > a::before {
	display: block;
	width: 100%;
	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::after {
	position: absolute;
	content: '';
	inset: 0;
}

.gnav .gnav__list > li > a.active {
	cursor: default;
	padding-bottom: calc(1.3em + 5px);
}

.gnav .gnav__list > li > a.active::before {
	border-bottom: 4px solid currentColor;
}

.gnav .gnav__list > li > a.active + .bar {
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 2px;
	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 + 5px);
}

.gnav .gnav__list > li > a:hover::before {
	border-bottom: 4px solid currentColor;
}

li a[aria-current="page"].active {
	pointer-events: none;
	cursor: default;
}

/* 配下ページのメニュー */
.gnav-toggle,
.gnav__sub-toggle {
	display: none;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

.gnav__sub-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnav__sub-list > li,
.gnav__anchor-list > li {
	margin: 0;
}

.gnav__anchor-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnav__sub-list a {
	display: block;
	text-decoration: none;
	white-space: nowrap;
}

.gnav__sub-en {
	display: block;
	font-size: 0.75em;
	letter-spacing: 0.02em;
}

/* PC：吹き出し */
@media screen and (min-width: 1025px) {
	.gnav .has-sub > .gnav__sub {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 3;
		padding-top: 22px; /* ホバーの継続 */
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.gnav .has-sub:focus-within > .gnav__sub,
	.gnav .has-sub.is-open > .gnav__sub {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
	}

	/* マウスのみ */
	@media (hover: hover) {
		.gnav .has-sub:hover > .gnav__sub {
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, 0);
			transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
		}
	}

	/* ESC で閉じた状態 */
	.gnav .has-sub.is-closed > .gnav__sub {
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	/* 配下ありの項目の矢印 */
	.gnav .has-sub > a {
		cursor: default;
	}

	.gnav__arrow {
		position: absolute;
		top: 0.45em;
		right: -0.85em;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	.gnav__sub-list {
		position: relative;
		width: max-content;
		padding: 0;
		background-color: rgb(255 255 255 / 0.95);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.45);
		color: var(--main-color);
		text-align: left;
		text-shadow: none;
	}

	/* 吹き出しのしっぽ */
	.gnav__sub-list::before {
		position: absolute;
		top: -8px;
		left: 50%;
		margin-left: -8px;
		content: '';
		border: 8px solid transparent;
		border-top: 0;
		border-bottom-color: rgb(255 255 255 / 0.95);
	}

	.gnav__sub-list a {
		padding: 1rem 1.75rem;
		font-size: var(--small);
		border-left: 3px solid transparent;
		transition: background-color 0.2s ease;
	}

	/* ページとページ内の見出し */
	.gnav__sub-list > li {
		display: grid;
		grid-template-columns: 15em auto;
		align-items: start;
	}

	.gnav__sub-list > li + li {
		border-top: 1px solid rgb(0 0 0 / 0.08);
	}

	/* 研究業績トップ */
	.gnav__sub-list > li.gnav__sub-top > a {
		grid-column: 1 / -1;
		padding-block: 0.9rem;
		font-weight: bold;
	}

	.gnav__sub-list > li > a {
		align-self: stretch;
		display: flex;
		align-items: center;
		column-gap: 0.75rem;
		font-weight: bold;
	}

	.gnav__sub-icon {
		flex-shrink: 0;
		width: 28px;
		height: 28px;
	}

	/* ページ内の見出し */
	.gnav__anchor-list {
		padding: 1rem 2rem 1rem 0.5rem;
		font-size: var(--xx-small);
		white-space: nowrap;
	}

	.gnav__anchor-list > li {
		padding: 0.2rem 0;
	}

	.gnav__anchor-list > li::before {
		display: inline-block;
		width: 0.6em;
		margin-right: 0.5em;
		vertical-align: middle;
		content: '';
		border-top: 1px solid currentColor;
	}

	/* 行全体のホバー */
	.gnav__sub-list > li {
		position: relative;
		transition: background-color 0.2s ease;
	}

	.gnav__sub-list > li > a::after {
		position: absolute;
		inset: 0;
		content: '';
	}

	.gnav__sub-list > li:not(.gnav__sub-top):hover,
	.gnav__sub-list > li:not(.gnav__sub-top):focus-within {
		background-color: var(--color-light-purple);
	}

	/* 研究業績トップのホバー・現在地 */
	.gnav__sub-list > li.gnav__sub-top > a:hover,
	.gnav__sub-list > li.gnav__sub-top > a:focus-visible,
	.gnav__sub-list > li.gnav__sub-top > a[aria-current="page"] {
		border-left-color: transparent;
		color: var(--filter-active-color);
	}

	.gnav__sub-list a:hover,
	.gnav__sub-list a:focus-visible {
		color: inherit;
		text-decoration: none;
	}

	.gnav__sub-list a[aria-current="page"] {
		border-left-color: var(--filter-active-color);
	}

	.gnav__sub-en {
		font-weight: normal;
		color: var(--filter-active-color);
	}
}

/* タブレット以下：ハンバーガーメニュー */
@media screen and (max-width: 1024px) {
	body {
		padding-top: var(--sp-min-h-header);
	}

	/* backdrop-filter なし（position: fixed のため） */
	body > header {
		height: var(--sp-min-h-header);
		padding: 0 1rem;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body > header .header__inner {
		height: 100%;
		align-items: center;
	}

	body > header a.logo {
		position: relative;
		z-index: 2;
		margin: 0;
	}

	body > header a.logo img {
		display: block;
		width: 140px;
		max-width: none;
		height: auto;
	}

	/* ハンバーガー */
	.gnav-toggle {
		display: block;
		position: relative;
		z-index: 2;
		width: 56px;
		height: 56px;
		margin-right: -14px;
		cursor: pointer;
	}

	.gnav-toggle::after {
		position: absolute;
		right: 0;
		bottom: 4px;
		left: 0;
		content: 'MENU';
		font-size: 9px;
		font-weight: 300;
		line-height: 1;
		letter-spacing: 0.1em;
		text-align: center;
		color: var(--sub-color);
	}

	.gnav-toggle[aria-expanded="true"]::after {
		content: 'Close';
	}

	.gnav-toggle__icon {
		position: absolute;
		top: 5px;
		left: 0;
		width: 100%;
		height: 34px;
		transition: transform 0.5s ease;
	}

	.gnav-toggle__bar {
		position: absolute;
		left: 14px;
		width: 28px;
		height: 2px;
		border-radius: 1px;
		background-color: currentColor;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.gnav-toggle__bar:nth-child(1) { top: 8px; }
	.gnav-toggle__bar:nth-child(2) { top: 16px; }
	.gnav-toggle__bar:nth-child(3) { top: 24px; }

	.gnav-toggle[aria-expanded="true"] .gnav-toggle__icon {
		transform: rotate(360deg);
	}

	.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	.gnav-toggle[aria-expanded="true"] .gnav-toggle__bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	/* 全画面のメニュー */
	.gnav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		padding: calc(var(--sp-min-h-header) + 1.5rem) 1.5rem 3rem;
		background-color: var(--bg-main-color);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, visibility 0s linear 0.35s;
	}

	.is-gnav-open .gnav {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.35s ease, visibility 0s;
	}

	html.is-gnav-open,
	html.is-gnav-open body {
		overflow: hidden;
	}

	/* 上下中央 */
	.gnav .gnav__list {
		display: block;
		width: 100%;
		max-width: 22rem;
		margin: auto;
		padding: 0;
	}

	.gnav .gnav__list > li {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		height: auto;
		margin: 0;
		border-bottom: 1px solid rgb(255 255 255 / 0.18);
		text-shadow: none;
	}

	.gnav .gnav__list > li:first-child {
		border-top: 1px solid rgb(255 255 255 / 0.18);
	}

	.gnav .gnav__list > li > a,
	.gnav .gnav__list > li > a.active,
	.gnav .gnav__list > li > a:hover {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		padding: 1rem 0.5rem;
		font-size: var(--medium);
	}

	.gnav .gnav__list > li > a::before,
	.gnav .gnav__list > li > a.active::before,
	.gnav .gnav__list > li > a:hover::before {
		position: static;
		width: auto;
		padding: 0;
		border: 0;
		transform: none;
	}

	.gnav .gnav__list > li > a.active {
		color: var(--sub-color);
	}

	/* 配下のアコーディオン */
	.gnav .has-sub {
		position: relative;
	}

	/* 見出しの真横（--label-width：文字数） */
	.gnav__sub-toggle {
		display: flex;
		position: absolute;
		top: calc(1rem + 0.75em - 22px);
		left: calc(50% + var(--label-width, 4em) / 2 - 4px);
		width: 44px;
		height: 44px;
		font-size: var(--medium);
		cursor: pointer;
	}

	.gnav__sub-toggle::before {
		content: '';
		width: 9px;
		height: 9px;
		margin: auto;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.3s ease;
	}

	.gnav__sub-toggle[aria-expanded="true"]::before {
		transform: translateY(2px) rotate(-135deg);
	}

	.gnav .has-sub > .gnav__sub {
		grid-column: 1 / -1;
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
	}

	.gnav .has-sub.is-sub-open > .gnav__sub {
		grid-template-rows: 1fr;
		transition: grid-template-rows 0.35s ease, visibility 0s;
	}

	/* メニューを閉じている間は非表示 */
	.is-gnav-open .gnav .has-sub.is-sub-open > .gnav__sub {
		visibility: visible;
	}

	.gnav__sub-list {
		min-height: 0;
		overflow: hidden;
		background-color: rgb(255 255 255 / 0.05);
	}

	.gnav__sub-list > li {
		border-top: 1px solid rgb(255 255 255 / 0.1);
	}

	.gnav__sub-list a {
		padding: 0.8rem 0.5rem;
		font-size: var(--small);
		color: rgb(255 255 255 / 0.85);
		text-align: center;
		white-space: normal;
	}

	.gnav__sub-list a[aria-current="page"] {
		color: var(--sub-color);
	}

	.gnav__sub-en {
		color: var(--sub-color);
	}

	.gnav__anchor-list,
	.gnav__sub-icon,
	.gnav__arrow,
	.gnav__sub-top {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gnav,
	.gnav-toggle__icon,
	.gnav-toggle__bar,
	.gnav__sub,
	.gnav__sub-toggle::before {
		transition-duration: 1ms !important;
	}
}

/*
 * Hero section
 */
.hero {
	position: relative;
	overflow: hidden;
}

/* 下端をメインカラーへ溶け込ませるグラデーション */
.hero::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 45%;
	background: linear-gradient(to bottom,
		rgba(12, 8, 6, 0) 0%,
		rgba(12, 8, 6, 0.35) 40%,
		rgba(12, 8, 6, 0.75) 70%,
		var(--bg-main-color) 100%); /* rgba：メインカラー */
	pointer-events: none;
}

/* スクロールに応じた拡大・ぼかし・暗転（--hero-progress） */
.parallax-background {
	--hero-progress: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: min(90vw, 720px);
	width: 100%;
	background-color: var(--bg-main-color);
	overflow: hidden;
	z-index: -1;
}

.parallax-background::before,
.parallax-background::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.parallax-background::before {
	background: url("/assets/images/topvisual.jpg") top center / contain no-repeat;
	transform: scale(calc(1 + var(--hero-progress) * 0.3));
	transform-origin: top center;
	filter: blur(calc(var(--hero-progress) * 8px));
	will-change: transform, filter;
}

.parallax-background::after {
	background-color: var(--color-black);
	opacity: calc(var(--hero-progress) * 0.7);
}

.parallax-content {
	position: relative;
	z-index: 1;
}

.hero + .separete-line-wave {
	filter: none;
}

.parallax-content h1,
.parallax-content p {
	color: var(--color-white);
	line-height: 1.4;
	font-size: clamp(1.125rem, 0.6538rem + 1.7949vw, 2rem);
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1),
	             0px 0px 8px rgba(0, 0, 0, 1),
	             0px 0px 14px rgba(0, 0, 0, 1);
	margin-bottom: 0.5em;
}

/* キャッチコピー（英語は日本語の上） */
.hero-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0.6em;
	padding-inline: 1.5em;
	text-align: center;
}

.hero-copy__line {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 0.6em 0.9em;
}

.hero-copy__unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.3;
}

.hero-copy__en {
	margin-bottom: 0.25em;
	font-size: max(0.42em, 0.625rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--sub-color);
}

.hero-copy__abbr {
	display: none;
	text-decoration: none;
}

@media screen and (max-width: 1024px) {
	.hero-copy__full {
		display: none;
	}

	.hero-copy__abbr {
		display: inline;
	}
}

.separete-line-wave {
	overflow: hidden;
	position: relative;
	padding-top: 8rem;
	background-color: var(--color-white);
	filter: drop-shadow(0px -40px 10px var(--color-black)) 
	        drop-shadow(0px -80px 40px var(--color-black)) 
	        drop-shadow(0px -100px 80px var(--color-black));
	z-index: -1;
}

/* 波の横ループ */
.separete-line-wave::before {
	content: '';
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	width: calc(200% + 2px);
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 60px;
	background-position: 0 0;
	will-change: transform;
	animation: wave-flow 90s linear infinite;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.56 2.17" preserveAspectRatio="none"><path d="M0 .84C.73 .86 1.47 .86 2.21 .84C2.94 .82 3.68 .79 4.41 .75C5.15 .72 5.88 .69 6.62 .68C7.35 .67 8.09 .67 8.82 .69C9.55 .72 10.29 .75 11.03 .78C11.76 .8 12.5 .82 13.23 .82C13.96 .82 14.7 .8 15.44 .76C16.17 .72 16.91 .67 17.64 .62C18.38 .57 19.11 .52 19.84 .48C20.58 .44 21.31 .41 22.05 .39C22.79 .36 23.52 .35 24.26 .34C24.99 .33 25.73 .32 26.46 .33C27.2 .33 27.93 .35 28.66 .38C29.4 .41 30.13 .46 30.87 .52C31.61 .58 32.34 .64 33.08 .7C33.81 .76 34.55 .81 35.28 .84C36.02 .86 36.75 .86 37.48 .84C38.22 .82 38.95 .79 39.69 .75C40.42 .72 41.16 .69 41.89 .68C42.63 .67 43.37 .67 44.1 .69C44.84 .72 45.57 .75 46.3 .78C47.04 .8 47.77 .82 48.51 .82C49.25 .82 49.98 .8 50.72 .76C51.45 .72 52.19 .67 52.92 .62C53.66 .57 54.39 .52 55.12 .48C55.86 .44 56.59 .41 57.33 .39C58.06 .36 58.8 .35 59.53 .34C60.27 .33 61.01 .32 61.74 .33C62.48 .33 63.21 .35 63.95 .38C64.68 .41 65.42 .46 66.15 .52C66.89 .58 67.62 .64 68.36 .7C69.09 .76 69.83 .81 70.56 .84V0H0z" fill="%23000000"/><path d="M0 1.77C.73 1.75 1.47 1.71 2.21 1.64C2.94 1.57 3.68 1.48 4.41 1.39C5.15 1.3 5.88 1.2 6.62 1.1C7.35 1 8.09 .89 8.82 .8C9.55 .71 10.29 .63 11.03 .58C11.76 .52 12.5 .5 13.23 .53C13.96 .56 14.7 .63 15.44 .74C16.17 .85 16.91 .99 17.64 1.12C18.38 1.25 19.11 1.38 19.84 1.46C20.58 1.54 21.31 1.58 22.05 1.57C22.79 1.56 23.52 1.51 24.26 1.45C24.99 1.4 25.73 1.34 26.46 1.31C27.2 1.28 27.93 1.29 28.66 1.33C29.4 1.37 30.13 1.44 30.87 1.51C31.61 1.59 32.34 1.66 33.08 1.71C33.81 1.76 34.55 1.78 35.28 1.77C36.02 1.75 36.75 1.71 37.48 1.64C38.22 1.57 38.95 1.48 39.69 1.39C40.42 1.3 41.16 1.2 41.89 1.1C42.63 1 43.37 .89 44.1 .8C44.84 .71 45.57 .63 46.3 .58C47.04 .52 47.77 .5 48.51 .53C49.25 .56 49.98 .63 50.72 .74C51.45 .85 52.19 .99 52.92 1.12C53.66 1.25 54.39 1.38 55.12 1.46C55.86 1.54 56.59 1.58 57.33 1.57C58.06 1.56 58.8 1.51 59.53 1.45C60.27 1.4 61.01 1.34 61.74 1.31C62.48 1.28 63.21 1.29 63.95 1.33C64.68 1.37 65.42 1.44 66.15 1.51C66.89 1.59 67.62 1.66 68.36 1.71C69.09 1.76 69.83 1.78 70.56 1.77V0H0z" opacity=".5" fill="%23000000"/><path d="M0 .83C.73 .81 1.47 .81 2.21 .82C2.94 .82 3.68 .84 4.41 .87C5.15 .9 5.88 .94 6.62 1.02C7.35 1.09 8.09 1.19 8.82 1.3C9.55 1.41 10.29 1.53 11.03 1.62C11.76 1.72 12.5 1.79 13.23 1.8C13.96 1.82 14.7 1.79 15.44 1.73C16.17 1.67 16.91 1.58 17.64 1.5C18.38 1.43 19.11 1.37 19.84 1.35C20.58 1.33 21.31 1.34 22.05 1.39C22.79 1.43 23.52 1.49 24.26 1.53C24.99 1.57 25.73 1.59 26.46 1.57C27.2 1.55 27.93 1.49 28.66 1.41C29.4 1.33 30.13 1.23 30.87 1.14C31.61 1.06 32.34 .98 33.08 .93C33.81 .87 34.55 .84 35.28 .83C36.02 .81 36.75 .81 37.48 .82C38.22 .82 38.95 .84 39.69 .87C40.42 .9 41.16 .94 41.89 1.02C42.63 1.09 43.37 1.19 44.1 1.3C44.84 1.41 45.57 1.53 46.3 1.62C47.04 1.72 47.77 1.79 48.51 1.8C49.25 1.82 49.98 1.79 50.72 1.73C51.45 1.67 52.19 1.58 52.92 1.5C53.66 1.43 54.39 1.37 55.12 1.35C55.86 1.33 56.59 1.34 57.33 1.39C58.06 1.43 58.8 1.49 59.53 1.53C60.27 1.57 61.01 1.59 61.74 1.57C62.48 1.55 63.21 1.49 63.95 1.41C64.68 1.33 65.42 1.23 66.15 1.14C66.89 1.06 67.62 .98 68.36 .93C69.09 .87 69.83 .84 70.56 .83V0H0z" opacity=".5" fill="%23000000"/></svg>');
}

._reverse {
	transform: scaleY(-1);
}

@keyframes wave-flow {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.separete-line-wave::before {
		animation: none;
	}
}

@media (max-width: 768px) {
	.separete-line-wave {
		padding-top: 4rem;
		filter: drop-shadow(0px -40px 20px var(--color-black)) 
		        drop-shadow(0px -60px 40px var(--color-black));
	}
}

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

@media (min-width: 1025px) {
	.separete-line-wave::before {
		top: -0.1vw;
		bottom: -0.1vw;
		left: -0.1vw;
		width: calc(414% + 0.2vw);
		background-size: 100% 139px;
		animation-duration: 180s;
	}
}

/*
 * Breadcrumb
 */
.breadcrumb {
	--bg-color: var(--bg-white);
	padding-block: 0.4rem;
}

.breadcrumb li {
	display: inline-flex;
	max-width: 100%;
	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;
	min-width: 0;
	max-width: 24em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.breadcrumb li > a {
	text-decoration-line: underline;
}

/*
 * Banners
 */
.banners {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0.5rem;
}

.banners__item {
	position: relative;
	flex: 0 0 calc((100% - 0.5rem * 3) / 4);
	background: var(--color-gray-20);
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	aspect-ratio: 21/9;
}

.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,
.banners__item a[target="_blank"][rel="noopener"]::after {
	content: '';
	position: absolute;
	inset: 0;
}

@media screen and (max-width: 1024px) {
	.banners__item {
		flex: 0 0 calc((100% - 0.5rem * 2) / 3);
	}
}

@media screen and (max-width: 678px) {
	.banners__item {
		padding: 0.4rem 0.8rem;
	}
}

@media screen and (max-width: 576px) {
	.banners__item {
		flex: 0 0 calc((100% - 0.5rem * 1) / 2);
	}
}

/*
 * Link icons
 */
[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: 1em;
	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;
}

/*
 * Headings
 */
main h1 {
	position: relative;
	line-height: 2;
}

/* 英語タイトル（日本語タイトルの上） */
main h1::before {
	display: block;
	font-size: 0.6em;
	font-weight: bold;
	letter-spacing: 0em;
	line-height: 1;
	color: var(--sub-color);
	content: attr(id);
	text-transform: capitalize;
}

h2 [target="_blank"][rel="noopener"]::after {
	font-size: 1em;
}

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

/*
 * Buttons
 */
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: var(--hover-transition);
}

.btn:hover {
	color: var(--color-white);
	background-color: var(--bg-black);
	text-decoration-line: none;
	opacity: 1;
}

.btn[tabindex="-1"] {
	pointer-events: none;
	opacity: .5;
}

.btn[disabled] {
	pointer-events: none;
	background-color: var(--bg-gray);
}

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

/*
 * Pagination
 */
.pagination {
	display: flow-root;
}

.pagination ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	margin-top: 3rem;
}

.pagination li {
	display: flex;
	border: solid 1px var(--main-color);
}

.pagination li > a,
.pagination li > span {
	display: inline-block;
	min-width: 2.1em;
	padding: 0.2em 0.6em;
	font-size: var(--small);
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	transition: var(--hover-transition);
}

/* 前へ・次へ */
.pagination li.pagination__step {
	border: none;
	margin-inline: 0.75rem;
}

.pagination li.pagination__step > a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--xx-small);
}

.pagination li.pagination__step > a:hover {
	color: var(--filter-active-color);
}

.pagination__step svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pagination li:not(.pagination__step) > a:hover,
.pagination li > span[aria-current] {
	background-color: var(--main-color);
	color: var(--color-white);
}

/*
 * Annotations
 */
small.annotation,
ul.annotation {
	display: block;
	text-indent: -1em;
	padding-left: 1em;
}

ul.annotation {
	list-style: none;
}

small.annotation::before,
ul.annotation > li::before {
	content: "※";
	padding-right: 0.1em;
}

/*
 * Fieldset
 */
.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;
}

/*
 * Card component
 */
.card {
	position: relative;
	display: inline-flex;
	width: 100%;
	flex-direction: row-reverse;
	justify-content: space-between;
	column-gap: 2vw;
	margin-bottom: 0.8rem;
	letter-spacing: normal;
}

.card h2,
.card h3 {
	text-align: left;
	font-size: var(--small-plus);
	font-weight: inherit;
	width: 100%;
}

.card img {
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1) inset;
}

@media screen and (max-width: 768px) {
	br.show-tb {
		display: none;
	}
	
	p {
		max-width: 45ch;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* 1列（右に画像） */
	li.card {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"info  thumb"
			"title thumb";
		row-gap: 0.4rem;
		margin-bottom: 1.5rem;
	}

	li.card .card__thumbnail {
		grid-area: thumb;
	}

	li.card .card__title + .infogroup {
		grid-area: info;
		flex-direction: row;
		column-gap: 8px;
		padding-top: 0;
	}

	li.card .card__title {
		grid-area: title;
	}

	li.card .card__title a {
		font-size: var(--small);
	}

	.card-list > .card:last-child {
		margin: 0;
	}
}

/* 400px以下：画像なし */
@media screen and (max-width: 400px) {
	li.card {
		grid-template-columns: 1fr;
		grid-template-areas:
			"info"
			"title";
	}

	li.card .card__thumbnail {
		display: none;
	}
}

@media screen and (max-width: 576px) {
	img {
		width: 100%;
	}
	
	img[src$="main_logo.svg"],
	img[src$="main_logo.png"] {
		max-width: 220px;
	}
	
	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;
	}
}

/*
 * Table of Contents
 */
.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;
	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) var(--d) var(--d);
	text-align: right;
}

/* TOC hamburger menu */
.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;
	height: 100dvh;
	background-color: var(--bg-white);
	transition: all 500ms ease-out;
	z-index: 9;
	overflow-y: auto;
}

/*
 * Code window
 */
[id^=code] {
	position: relative;
	background: var(--bg-white);
	margin: 0;
	padding: 3rem 1.5rem 1rem;
	border-radius: 0.4rem;
}

.window {
	position: relative;
	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);
}

/*
 * Control panel
 */
.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;
}

/*
 * Publications page
 */
main h1:has(+ .publications) {
	margin-bottom: 2.5rem;
}

#PublicationNav {
	position: sticky;
	margin-bottom: 3rem;
	top: var(--h-header);
	z-index: 1;
	background: linear-gradient(to bottom,
	            rgba(255, 255, 255, 0.92) 70%,
	            rgba(255, 255, 255, 0.78) 78%,
	            rgba(255, 255, 255, 0.6) 86%,
	            rgba(255, 255, 255, 0));
}

#PublicationNav ul {
	display: flex;
	justify-content: center;
	list-style: none;
}

#PublicationNav ul li {
	margin: 0;
	text-align: center;
}

#PublicationNav ul li a {
	display: inline-block;
	font-size: var(--medium);
	font-weight: 700;
	color: black;
	text-decoration: none;
	position: relative;
	padding: 0.5em 1em;
	border-bottom: 2px solid var(--color-pale-purple);
	transition: background-color 500ms ease-out;
}

#PublicationNav ul li a[aria-current]::after {
	position: absolute;
	right: 0;
	bottom: -2px;
	left: 0;
	height: 4px;
	content: '';
	background-color: var(--color-purple);
}

@media (hover: hover) {
	#PublicationNav ul li a:hover {
		color: var(--color-white);
		font-weight: 400;
		background-color: var(--color-dark-night);
	}
}

#PublicationNav .publication-nav__count {
	display: none;
}

#PublicationNav ul li a > span {
	display: block;
	font-size: 0.7em;
	font-weight: 700;
	color: color-mix(in srgb, var(--color-purple) 45%, var(--color-white));
}

@media (hover: hover) {
	#PublicationNav ul li a:hover > span {
		color: var(--color-pale-purple);
	}

	#PublicationNav ul li a:hover .publication-nav__count {
		color: var(--color-white);
	}

}

.wrapper .researchmap-link {
	position: absolute;
	top: 0.4rem;
	right: 0;
	padding-right: 1rem;
	font-size: 0.875rem;
	text-align: right;
}

.publications section {
	margin-bottom: 2rem;
}

.publications > section {
	margin-bottom: 0;
}

.publications > div > section,
#Paper > div > section {
	margin-bottom: 0;
}

.publications section + section {
	margin: 0;
	padding: 1rem 0;
}

.publications > section + section {
	margin-top: var(--section-space);
	padding: 0;
}

#Paper > div > section + section {
	margin-top: 1em;
	padding: 0;
}

#Conference ul.conf-list {
	list-style: none;
	padding: 0;
	margin: 1em 0;
}

#Conference ul.conf-list > li {
	padding: 0 0 0 1.2em;
	border-left: solid 4px var(--sub-color);
}

.publications section[id] {
	scroll-margin-top: calc(var(--h-header) + 4.5rem);
}

.publications section > * {
	text-align: left;
}

.publications section h2 {
	position: relative;
	font-size: var(--midium);
	margin-bottom: 2em;
	border-bottom: solid 1px var(--color-gray-60);
	padding-bottom: 0.5em;
	padding-right: 0.5em;
}

.publications h2::after {
	display: inline-block;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0em;
	color: var(--sub-color);
	content: attr(data-title);
	text-transform: capitalize;
}

.publications section h2 > span {
	position: absolute;
	right: 0;
	top: 50%;
	font-weight: 400;
	font-size: var(--x-small);
	transform: translateY(-50%);
}

.publications section h3 {
	font-size: var(--small-plus);
	margin-bottom: 0.2rem;
}

.publications section hgroup > h3 {
	font-size: 0.92em;
}

.publications section hgroup > h4 {
	font-size: 0.85em;
}

.publications section p {
	font-size: var(--small);
	color: var(--color-gray-70);
	margin-left: 0;
	margin-bottom: 0.2rem;
}

.publications section span {
	font-size: var(--x-small);
	font-weight: bold;
}

.year > span,
.year > a {
	font-size: var(--x-small);
}

.publications [id^="2"],
.publications .section-container {
	position: relative;
	margin-left: 6em;
}

.publications #Conference .section-container,
.publications #Fund .section-container,
.publications #OtherActivities .section-container {
	margin-left: 1em;
}

.publications [id^="2"]::before {
	content: attr(id);
	position: absolute;
	top: 0;
	left: -6em;
	font-weight: bold;
	font-size: var(--small);
}

.publications .publication-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

.publications .publication-tags._full {
	gap: 0.1em;
	margin-top: 0.5em;
}

.publications .publication-tags._full > [class^="publication-tags"] {
	flex-basis: 100%;
	font-weight: 400;
}

.publications .publication-tags._full > [class^="publication-tags"] span {
	font-weight: 400;
}

.publications .publication-tags > ._full {
	flex-basis: 100%;
}

.publications h3 + .publication-tags {
	margin-top: 0.5em;
}

.publication-tags__type::after {
	content: attr(data-type);
	display: inline-block;
	font-weight: 400;
	line-height: calc(1em + .2em);
	padding: 2px 5px 1px;
	background-color: var(--color-gray-70);
	color: var(--color-white);
	border: solid 1px var(--color-gray-70);
	margin-bottom: 0.2em;
}

.publication-tags__type[data-type="国内"]::after {
	background-color: var(--color-white);
	color: var(--color-gray-70);
}

.publication-tags .publication-tags__style {
	font-weight: 400;
	padding-inline: 4px;
	background-color: var(--color-gray-20);
}

.publication-tags .publication-tags__style.highlight {
	background-color: #f6ebdf;
	text-decoration: none;
}

.publication-tags .publication-tags__style.lt {
	background-color: var(--color-pale-purple);
	text-decoration: none;
}

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

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

/* SP：縦積み */
@media (max-width: 768px) {
	#PublicationNav {
		position: static;
		margin-bottom: 2.5rem;
		background: none;
	}

	#PublicationNav ul {
		flex-direction: column;
		border-top: 1px solid var(--color-pale-purple);
	}

	#PublicationNav ul li {
		text-align: left;
	}

	#PublicationNav ul li a {
		display: flex;
		align-items: baseline;
		column-gap: 0.75em;
		padding: 0.9rem 1rem;
		border-bottom: 1px solid var(--color-pale-purple);
		-webkit-tap-highlight-color: transparent;
	}

	#PublicationNav ul li a {
		white-space: nowrap;
	}

	#PublicationNav ul li a > span {
		order: 1;
		font-size: 0.75em;
	}

	/* 件数 */
	#PublicationNav .publication-nav__count {
		display: inline;
		order: 2;
		margin-left: auto;
		font-size: 0.75em;
		font-weight: 400;
		color: var(--main-color);
	}

	#PublicationNav .publication-nav__count:empty {
		display: none;
	}

	/* 見出しの件数 */
	.publications section h2 > .count-list {
		display: none;
	}

	/* 下向きの矢印 */
	#PublicationNav ul li a::before {
		align-self: center;
		width: 8px;
		height: 8px;
		content: '';
		border-right: 2px solid var(--color-gray-50);
		border-bottom: 2px solid var(--color-gray-50);
		transform: translateY(-2px) rotate(45deg);
		order: 3;
	}

	/* 現在地の線なし */
	#PublicationNav ul li a[aria-current]::after {
		display: none;
	}

	.publications section[id] {
		scroll-margin-top: calc(var(--sp-min-h-header) + 1.5rem);
	}
}

/* 幅が小さい端末 */
@media (max-width: 374px) {
	#PublicationNav ul li a {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		column-gap: 0.6rem;
		line-height: 1.4;
	}

	#PublicationNav ul li a > span {
		grid-area: 1 / 1;
		font-size: 0.65em;
		line-height: 1.2;
	}

	#PublicationNav .publication-nav__count {
		grid-column: 2;
		grid-row: 1 / 3;
		margin-left: 0;
	}

	#PublicationNav ul li a::before {
		grid-column: 3;
		grid-row: 1 / 3;
		margin-left: 0;
	}

	#PublicationNav ul li a::after,
	#PublicationNav ul li a[aria-current]::after {
		display: none;
	}
}

@media screen and (max-width: 576px) {
	.publications [id^="2"] {
		margin-left: 4em;
	}
	
	.publications [id^="2"]::before {
		left: -4em;
	}
	
	.publications .section-container {
		margin-left: 2em;
	}
}

/*
 * Member table
 */
table.member-table {
	border: none;
	white-space: normal;
	word-break: break-all;
}

table.member-table :is(th, td) {
	position: relative;
	border: none;
	padding: 0.75rem;
	background: none;
	word-break: break-all;
}

table.member-table th {
	width: 140px;
}

table.member-table tr {
	position: relative;
	background: none;
	overflow: hidden;
}

table.member-table tr + tr:not(.noborder) > :is(th, td)::after {
	content: "";
	display: block;
	width: calc(100% - 1px);
	height: 1px;
	position: absolute;
	top: 0;
	right: 1px;
	border-top: dotted 1px var(--color-gray-60);
}

table.member-table td > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

table.member-table td > ul > li:last-child {
	margin-bottom: 0;
}

/* アバター */
.member-avatar {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 96px;
	aspect-ratio: 1;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background-color: var(--color-light-purple);
	overflow: hidden;
}

.member-avatar svg {
	width: 80%;
	fill: var(--color-pale-purple);
}

table.member-table th > h2 {
	text-align: left;
	margin-top: -0.4em;
}

@media screen and (max-width: 768px) {
	table.member-table thead {
		display: none;
	}
	
	table.member-table th {
		width: 100%;
	}
	
	table.member-table,
	table.member-table tbody,
	table.member-table tr,
	table.member-table td {
		display: block;
		width: 100%;
	}
	
	table.member-table tr {
		margin-bottom: 1em;
		border: 1px solid #ddd;
		border-radius: 6px;
		padding: 8px;
	}
	
	table.member-table tr + tr:not(.noborder) :is(th, td)::after {
		content: none;
	}
	
	table.member-table td {
		border: none;
		position: relative;
	}
	
	table.member-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		width: 45%;
		font-weight: bold;
		white-space: nowrap;
	}
}

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

/*
 * Print styles
 */
@media print {
	header,
	footer,
	.separete-line-wave {
		display: none;
	}
	
	main {
		padding: 0;
	}
	
	main::before {
		display: block;
		content: 'SyncMEMS Lab. 髙田グループ';
		text-align: center;
		color: var(--color-black);
		font-size: 0.875em;
		font-weight: 700;
		margin-bottom: 1em;
	}
	
	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) ") ";
	}
}

/*
 * Publications index
 */
main h1[data-title]::before {
	content: attr(data-title);
}

.publication-lead {
	max-width: 50em;
	margin: 0 auto 3rem;
	text-align: left;
}

.publication-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 0 0 var(--section-space);
	padding: 0;
	list-style: none;
}

.category-card {
	margin: 0;
	border: 1px solid var(--color-black);
}

.category-card > a {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	padding: 1rem 0.75rem;
	color: var(--color-black);
	text-align: center;
	text-decoration: none;
	transition: background-color 300ms ease-out;
}

.category-card > a:hover {
	background-color: var(--color-gray-20);
	opacity: 1;
}

.category-card > a:hover .category-card__link {
	background-color: var(--filter-active-color);
	color: #fff;
}

.category-card__icon {
	width: 64px;
	height: 64px;
	margin-bottom: 1.5rem;
}

.category-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.category-card__title {
	margin: 0 0 0.75rem;
	font-size: var(--medium);
}

.category-card__title > span {
	display: block;
	font-size: 0.8em;
	color: var(--sub-color);
}

.category-card__items {
	margin: 0;
	font-size: var(--small);
	text-align: center;
}

.category-card__link {
	margin: 1rem 0 0;
	padding: 0.4em 1.2em;
	border-radius: 999px;
	background-color: var(--color-light-purple);
	font-size: var(--small);
	text-align: center;
	transition: background-color 300ms ease-out, color 300ms ease-out;
}

.category-card__link::after {
	content: '\e907';
	font-family: 'icons';
	margin-left: 0.4em;
}

@media (max-width: 768px) {
	.publication-categories {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* タブレット：アイコン 3割・テキスト 7割 */
@media (min-width: 577px) and (max-width: 768px) {
	.category-card > a {
		display: grid;
		grid-template-columns: 3fr 7fr;
		align-items: center;
		text-align: center;
	}

	.category-card__icon {
		grid-column: 1;
		grid-row: 1 / -1;
		justify-self: center;
		margin-bottom: 0;
	}

	.category-card__title,
	.category-card__items,
	.category-card__link {
		grid-column: 2;
		justify-self: center;
	}
}