@charset "UTF-8";

:root {
	--color-body-1: #333;
	--color-theme-1: #004694;
	--color-theme-2: #006052;
	--color-theme-3: #FBF9DD;
	--color-theme-4: #DD434B;
	--color-gray-1: #F3F3F3;
	--font-family: "Noto Sans JP", sans-serif;
	--padding: 20px;
	--container: 1000px;
	--stack: 100px;
	--section: 70px;
	--h2: 36;
	--p: 16;

	--bs-border-radius: 10px;
}

::after,
::before,
* {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: var(--font-size);
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--color-body-1);
	font-family: var(--font-family);
	letter-spacing: 0;
	line-height: calc(28 / 16);
}

body.noscroll {
	overflow: hidden;
    touch-action: pinch-zoom;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: 0.2s;
}

a img {
	transition: 0.2s;
}

a:hover {
	opacity: 0.6;
}

[id] {
	scroll-margin-top: 30px;
}

.scroll-hint-text {
	white-space: nowrap;
}

.is-scrollable {
	margin-right: calc(var(--padding) * -1);
	padding-right: var(--padding);
	table {
		margin-right: 0;
		margin-left: 0;
	}
}

.container {
	padding-right: var(--padding);
	padding-left: var(--padding);
	max-width: calc(var(--container) + var(--padding) + var(--padding));
}

.container-sm {
	--container: 880px;
}

.stack {
	padding-top: var(--stack);
	padding-bottom: var(--stack);
}

.icon {
	aspect-ratio: 1;
	background-color: currentColor;
	-webkit-mask: no-repeat center center/contain;
	mask: no-repeat center center/contain;
	display: inline-block;
	height: auto;
	width: 1em;
}

.text-theme-1 {
	color: var(--color-theme-1) !important;
}

.text-theme-1-1 {
	color: var(--color-theme-1-1) !important;
}

.text-theme-2 {
	color: var(--color-theme-2) !important;
}

.text-theme-3 {
	color: var(--color-theme-3) !important;
}

.text-theme-4 {
	color: var(--color-theme-4) !important;
}

.text-theme-5 {
	color: var(--color-theme-5) !important
}

.bg-theme-1 {
	background-color: var(--color-theme-1) !important;
}

.bg-theme-1-1 {
	background-color: var(--color-theme-1-1) !important;
}

.bg-theme-1-2 {
	background-color: var(--color-theme-1-2) !important;
}

.bg-theme-1-3 {
	background-color: var(--color-theme-1-3) !important;
}

.bg-theme-2 {
	background-color: var(--color-theme-2) !important;
}

.bg-theme-2-1 {
	background-color: var(--color-theme-2-1) !important;
}

.bg-theme-3 {
	background-color: var(--color-theme-3) !important;
}

.bg-theme-4 {
	background-color: var(--color-theme-4) !important;
}

.bg-theme-5 {
	background-color: var(--color-theme-5) !important
}

.link-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 40px 20px;
	padding: 0;
	margin-bottom: 0;
}

.link-item {
	position: relative;
}

.link-item:hover {
	opacity: 0.6;
}

.link-item img {
	width: 100%;
	border-radius: 30px;
	margin-bottom: 10px;
}

.link-item a {
	display: block;
	font-weight: 600;
	padding: 0 5px;
}

.link-item a:hover { 
	opacity: 1;
}

.link-item a::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.link-item a::after {
	content: "";
	display: inline-block;
	width: 22px;
	aspect-ratio: 22 / 21;
	background: url(./img/link-arrow.svg) center / cover;
	vertical-align: middle;
	margin-left: 15px;
}

@media(max-width: 767px) {
	.link-list {
		grid-template-columns: 1fr;
		gap: 50px;
	}
}

/*		ヘッダー		*/

.header {
	position: relative;
	--container: 1050px;
}

body.noscroll .header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 900;
}

.header-inner {
	display: grid;
	grid-template-columns: auto auto;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	height: 80px;
}

.header-logo {
	position: relative;
	z-index: 999;
}

.header-nav-list {
	display: flex;
	align-items: center;
	list-style: none;
	gap: 10px;
	padding: 0;
	margin-bottom: 0;
}

.header-nav-list > li {
	position: relative;
}

.header-nav-list :where(a,span) {
	--fs: 15;
	font-weight: 500;
	padding: 5px;
}

.header-nav-list > li > :where(a,span) {
	font-weight: 700;
}

.header-nav-list > li:has( .header-nav-sub-list ) > :where(a,span) {
	position: relative;
	padding-right: 20px;
}

.header-nav-list > li:has( .header-nav-sub-list ) > :where(a,span)::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--color-body-1);
	border-right: 1px solid var(--color-body-1);
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%) rotate(135deg);
	transition: 0.2s;
}

/* .header-nav-list > li:has( .header-nav-sub-list ):hover > a::after {
	transform: translateY(-10%) rotate(-45deg);
} */

.header-nav-sub-list {
	background: #FFF;
	border: 1px solid var(--color-body-1);
	border-radius: 5px;
	white-space: nowrap;
	list-style: none;
	padding: 10px 0;
	margin-bottom: 0;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translate(-50%,100%);
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
	z-index: 10;
}

.header-nav-sub-list::before {
	content: "";
	display: block;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

.header-nav-list > li:has( .header-nav-sub-list ):hover .header-nav-sub-list {
	opacity: 1;
	visibility: visible;
}

.header-nav-sub-list li a {
	display: block;
	padding: 4px 20px;
}


@media(max-width: 991px) {
	.header-inner {
		height: 70px;
	}
	.header-nav {
		background: #FFF;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
		z-index: -50;
	}
	body.noscroll .header-nav {
		padding-top: 100px;
		padding-bottom: 50px;
		opacity: 1;
		visibility: visible;
		overflow: scroll;
		z-index: 900;
	}
	body.noscroll .header-nav::before {
		content: "";
		width: 100vw;
		height: 70px;
		background: #FFF;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 900;
	}
	.header-nav-list {
		flex-direction: column;
		gap: 0;
		padding: 0 15px;
		margin-inline: auto;
	}
	.header-nav-list > li {
		width: 100%;
		border-bottom: 1px solid var(--color-body-1);
	}
	.header-nav-list > li > :where(a,span) {
		--fs: 16;
		display: block;
		width: 100%;
		padding: 10px 5px;
	}
	.header-nav-list > li:has( .header-nav-sub-list ) > :where(a,span)::after {
		content: none;
	}
	.header-nav-sub-list {
		border: none;
		border-radius: 0;
		position: initial;
		opacity: 1;
		visibility: visible;
		padding-top: 0;
		padding-bottom: 10px;
		transform: none;
	}
	.header-nav-sub-list li a {
		padding: 2px 15px;
	}
	.header-nav-list > li:has( .header-nav-sub-list ) > a {
		padding-bottom: 5px;		
	}
	.header-nav-sub-list li :where(a,span)::before {
		content: "・";
	}
	.global-nav-button {
		position: relative;
		width: 70px;
		height: 70px;
		background: var(--color-theme-1);
		border: none;
		outline: none;
		padding: 0;
		margin-right: calc(var(--padding) * -1);
		z-index: 999;
	}
	.global-nav-button::before {
		content: "MENU";
		--fs: 10;
		font-size: var(--font-size);
		color: #FFF;
		position: absolute;
		left: 50%;
		bottom: 10px;
		transform: translateX(-50%);
	}
	.global-nav-button span {
		width: 30px;
		height: 1px;
		background: #FFF;
		position: absolute;
		top: 28px;
		left: 50%;
		transition: 0.3s;
	}
	.global-nav-button span:nth-child(1) {
		transform: translate(-50%,calc(-50% - 8px));
	}
	.global-nav-button span:nth-child(2) {
		transform: translate(-50%,-50%);
	}
	.global-nav-button span:nth-child(3) {
		width: 13px;
		transform: translate(calc(-50% - 8px),calc(-50% + 8px));
	}
	body.noscroll .global-nav-button span:nth-child(1) {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	body.noscroll .global-nav-button span:nth-child(2) {
		opacity: 0;
	}
	body.noscroll .global-nav-button span:nth-child(3) {
		width: 30px;
		transform: translate(-50%,-50%) rotate(-45deg);
	}
}

/*		フッター		*/
.footer {
	background: var(--color-gray-1);
	border-radius: 30px 30px 0 0;
	padding-top: 90px;
}

.footer-content {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	margin-bottom: 80px;
}

.footer-logo {
	margin-bottom: 20px;
}

.footer address {
	--fs: 14;
	line-height: calc(26 / 14);
	letter-spacing: 0.05em;
	margin-bottom: 0;
}

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

.footer-list > li > :where(a,span)::before {
	content: "";
	display: inline-block;
	width: 9px;
	aspect-ratio: 1 / 1;
	background: #000;
	border-radius: 50%;
	margin-right: 3px;
}

.footer-list :where(a,span) {
	--fs: 14;
	letter-spacing: 0.05em;
}

.footer-sub-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.footer-sub-list > li {
	line-height: 1.5;
}

.footer-sub-list > li > :where(a,span)::before {
	content: "・"; 
}

.copyright {
	--fs: 10;
	letter-spacing: 0.05em;
	color: #FFF;
	text-align: center;
	background: var(--color-theme-1);
	padding: 10px var(--padding);
	margin-bottom: 0;
}

@media(max-width: 991px) {
	.footer-content {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.footer-address {
		max-inline-size: max-content;
		margin-inline: auto;
	}
	.footer-menu {
		border-bottom: 0.3px solid #333333;
		order: -1;
		padding-bottom: 30px;
		margin-bottom: 50px;
	}
	.footer-list {
		margin-bottom: 20px;
	}
}

@media(max-width: 767px) {
	.footer-menu {
		max-width: 450px;
		margin-inline: auto;
	}
	.footer-list {
		margin-bottom: 0;
	}
	.footer-list :where(a,span) {
		--fs: 12;
		letter-spacing: 0;
	}
	.footer-sub-list li a {
		letter-spacing: -0.05em;
	}
	.footer address {
		--fs: 13;
	}
}

.section-title {
	display: grid;
	margin-bottom: 30px;
}

.section-title-ja {
	--fs: 32;
	font-size: var(--font-size);
	line-height: calc(56 / 32);
	font-weight: 600;
	margin-bottom: 0;
}

.section-title-en {
	--fs: 16;
	font-weight: 600;
	color: var(--color-theme-1);
	order: -1;
}

@media(max-width: 767px) {
	.section-title {
		margin-bottom: 15px;
	}
	.section-title-ja {
		--fs: 22;
		line-height: calc(35 / 22);
	}
}

/*		トップページ		*/
main {
	position: relative;
	overflow: clip;
}
/*		fv		*/
.fv {
	overflow: hidden;
}

.fv-content {
	position: relative;
	/* max-width: 1280px; */
	margin-inline: auto;
	display: grid;
	grid-template-columns: 23.4% 1fr;
	grid-template-rows: 66% 1fr;
	gap: 15px 25px;
}

.fv-blue {
	position: relative;
	width: calc(100% + 35px);
	background: var(--color-theme-1);
	border-radius: 30px;
	overflow: hidden;
	margin-left: -35px;
}

.fv-blue::before {
	content: "";
	width: 100%;
	aspect-ratio: 333 / 244;
	background: url(img/page-header-item01.png) no-repeat center / contain;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translate(-25%,15%);
}

.fv-green {
	position: relative;
	width: calc(100% + 35px);
	background: var(--color-theme-2);
	border-radius: 30px;
	margin-left: -35px;
}

.fv-green::before {
	content: "";
	width: 80%;
	aspect-ratio: 247 / 178;
	background: url(img/page-header-item02.png) no-repeat center / contain;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(10%,40%);
}

.fv-splide {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	margin-right: -25px;
}

.fv-splide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

.fv-title {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	--fs: 37;
	font-size: var(--font-size);
	letter-spacing: 0.13em;
	font-weight: 700;
	top: 45%;
	left: 30%;
	transform: translateX(-50%);
}

.fv-title span {
	background: #FFF;
	padding: 10px 15px;
}

@media(min-width: 1279px) {
	.fv-title {
		--fs: none;
		font-size: 2.89vw;
	}
}

@media(max-width: 991px) {
	.fv {
		padding: 15px 10px 0;
	}
	.fv-content {
		grid-template-columns: 60% 1fr;
		grid-template-rows: auto auto;
		gap: 15px 10px;
	}
	.fv-splide {
		width: calc(100% + 10px);
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		margin-right: -10px;
	}
	.fv-splide img {
		width: 100%;
		max-height: 600px;
		aspect-ratio: 410 / 465;
		object-fit: cover;
		border-radius: 20px 0 0 20px;
	}
	.fv-blue {
		width: 100%;
		grid-column: 1 / 2;
		aspect-ratio: 220 / 165;
		border-radius: 20px;
		margin-left: 0;
	}
	.fv-green {
		width: calc(100% + 10px);
		border-radius: 20px 0 0 20px;
		margin-left: 0;
		margin-right: -10px;
	}
	.fv-title {
		top: auto;
		bottom: 30%;
		left: 0;
		transform: none;
	}
}

@media(max-width: 767px) {
	.fv-title {
		--fs: 22;
		gap: 7px;
		bottom: 25%;
		margin-bottom: 0;
	}
	.fv-title span {
		padding: 6px 10px;
	}
}

.top-section {
	padding-top: 150px;
	padding-bottom: 150px;
}

@media(max-width: 767px) {
	.top-section {
		padding-top: 120px;
		padding-bottom: 120px;
	} 
}

.top-about {
	padding-top: 100px;
}

.top-about .section-title {
	text-align: center;
	justify-content: center;
	gap: 10px;
}

.top-department,
.about-department {
	position: relative;
	background: var(--color-gray-1);
	border-radius: 30px;
	z-index: 1;
}

:where(.top-department,.about-department ) .section-title {
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	gap: 0 50px;
	margin-bottom: 40px;
}

:where(.top-department,.about-department ) .section-title-ja {
	grid-column: 1 / 2;
}

:where(.top-department,.about-department ) .section-title p {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}

@media(max-width: 767px) {
	.top-about {
		padding-top: 50px;
	}
}

@media(max-width: 575px) {
	:where(.top-department,.about-department ) .section-title {
		grid-template-columns: 1fr;
	}
	:where(.top-department,.about-department ) .section-title-ja {
		grid-column: auto;
	}
	:where(.top-department,.about-department ) .section-title p {
		grid-column: auto;
		grid-row: auto;
	}
}

.top-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: -30px;
}

.top-images img {
	width: 100%;
}

@media(max-width: 767px) {
	.top-images {
		grid-template-columns: 1fr;
	}
	.top-images img:nth-child(2) {
		order: -1;
	}
}

.top-project-content {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 30px;
	position: relative;
	background: url(img/top-project-bg@2x.jpg) top 15% center / cover;
	border-radius: 30px;
	padding: 50px 65px;
}

.top-project-content::before {
	content: "";
	background: #808080;
	border-radius: 30px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	mix-blend-mode: multiply;
}

.top-project-content > * {
	position: relative;
	z-index: 1;
}

.top-project-content span {
	display: inline-block;
	--fs: 16;
	font-weight: 600;
	color: #FFF;
	margin-bottom: 10px;
}

.top-project-content h2 {
	--fs: 32;
	font-weight: 600;
	color: #FFF;
	margin-bottom: 15px;
}

.top-project-content p {
	--fs: 16;
	color: #FFF;
}

.top-project-link a {
	position: relative;
	display: grid;
	place-items: center;
	--fs: 14;
	min-width: 240px;
	min-height: 37px;
	background: #FFF;
	border-radius: 40px;
}

.top-project-link a::after {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

@media(max-width: 767px) {
	.top-project {
		padding-bottom: 35px;
	}
	.top-project-content {
		background: url(img/top-project-bg@2x.jpg) top 15% right 30% / cover;
		grid-template-columns: 1fr;
		border-radius: 15px;
		padding: 30px 15px 35px;
	}
	.top-project-content::before {
		border-radius: 15px;
	}
	.top-project-content h2 {
		--fs: 24;
	}
	.top-project-link a {
		max-width: 240px;
		width: 100%;
		min-width: 0;
		margin-inline: auto;
	}
}

.top-link-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.top-link-item {
	position: relative;
	padding: 35px 20px;
	border-radius: 30px;
	overflow: hidden;
}

.top-link-item:nth-child(1)::before {
	content: "";
	width: 235px;
	aspect-ratio: 235 / 271;
	background: url(img/top-link-item01@2x.png) center / cover;
	position: absolute;
	top: 15px;
	right: 10px;
}

.top-link-item:nth-child(2)::before {
	content: "";
	width: 269px;
	aspect-ratio: 269 / 197;
	background: url(img/top-link-item02@2x.png) center / cover;
	position: absolute;
	top: 75px;
	right: 20px;
}

.top-link-item-text {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	max-width: 420px;
	height: 100%;
	margin-inline: auto;
}

.top-link-item-text span {
	display: inline-block;
	font-weight: 600;
	color: #FFF;
	margin-bottom: 10px;
}

.top-link-item-text h2 {
	--fs: 32;
	font-size: var(--font-size);
	font-weight: 600;
	color: #FFF;
	margin-bottom: 20px;
}

.top-link-item-text p {
	color: #FFF;
	margin-bottom: 15px;
}

.top-link-item-text a {
	position: relative;
	display: grid;
	place-items: center;
	max-width: 240px;
	width: 100%;
	min-height: 37px;
	background: #FFF;
	border-radius: 40px;
}

.top-link-item-text a::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 1px solid var(--color-theme-1);
	border-right: 1px solid var(--color-theme-1);
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.top-link-item:nth-child(2) .top-link-item-text a::before {
	border-color: var(--color-theme-2);
}

@media(max-width: 767px) {
	.top-link-content {
		grid-template-columns: 1fr;
		gap: 35px;
	}
	.top-link-item {
		display: grid;
		align-items: center;
		min-height: 230px;
		border-radius: 20px;
		padding: 15px;
	}
	.top-link-item-text {
		height: auto;
		max-width: 100%;
	}
	.top-link-item-text h2 {
		--fs: 24;
		margin-bottom: 10px;
	}
	.top-link-item-text a {
		margin-inline: auto;
	}
}

@media(max-width: 575px) {
	.top-link-item:nth-child(1)::before {
		width: 158px;
		top: auto;
		right: 10px;
		bottom: -15px;
	}
	.top-link-item:nth-child(2)::before {
		width: 200px;
		top: auto;
		right: 10px;
		bottom: -20px;
	}
}

.top-deco01,
.top-deco03 {
	content: "";
    background-image: url(./img/bg-page-item02.svg);
    background-repeat: repeat-y;
    min-height: 3070px;
    height: 100%;
    display: block;
    width: 175px;
    position: absolute;
    right: calc((100vw - 1000px) / 2 - 225px);
    top: 1120px;
    background-size: contain;
    z-index: 1;
}

.top-deco02 {
	content: "";
    background-image: url(./img/bg-page-item02.svg);
    background-repeat: repeat-y;
    min-height: 3000px;
    height: 100%;
    display: block;
    width: 200px;
    position: absolute;
    left: calc((100vw - 1000px) / 2 - 250px);
    top: 1960px;
    z-index: 1;
}

.top-deco03 {
	top: 3300px;
}

.common-parts {
	padding-top: 100px;
	padding-bottom: 100px;
}

.common-parts-content {
	display: flex;
	justify-content: center;
	gap: 60px;
}

@media(min-width: 1279px) {
	.top-deco01,
	.top-deco03 {
		right: -75px;
	}
	.top-deco02 {
		left: -110px;
	}
}

@media(max-width: 767px) {
	.common-parts {
		padding-top: 140px;
		padding-bottom: 70px;
	}
}

@media(max-width: 575px) {
	.common-parts-content {
		flex-direction: column;
		align-items: center;
	}
	.common-parts a:first-child img {
		width: 200px;
	}
}

/*		下層パーツ		*/

.page-header {
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 100%;
}

.page-header-inner {
    width: 100%;
	width: calc(100% + 140px);
	position: relative;
    display: flex;
    gap: 35px;
    margin-right: auto;
    margin-left: auto;
    flex-shrink: 0;
}

@media(max-width:991px) {
    .page-header {
        margin-top: 15px;
    }
    .page-header-inner{
        width: 100%;
    }
}

.page-header-blue {
    background-color: var(--color-theme-1);
    border-radius: 30px;
    padding-top: 65px;
    padding-bottom: 65px;
    position: relative;
    display: flex;
    width: 90%;
    width: calc(100% - 205px);
    flex-shrink: 0;
}

@media(max-width:991px) {
    .page-header-blue{
        padding-top: 26px;
        padding-bottom: 26px;
        width: calc(100% - 15px);
        border-radius: 0 30px 30px 0;
    }
}

.page-header-inner:after {
    content: "";
    display: block;
    width: 170px;
    background-color: var(--color-theme-2);
    border-radius: 30px;
    flex-shrink: 0;
}

@media(max-width:991px) {
    .page-header-inner::after{
        content: none;
    }
}

.page-header-item-1 {
    position: absolute;
    width: 191px;
    height: 130px;
    bottom: 0;
    left: 75px;
}

@media(max-width:991px) {
    .page-header-item-1{
        display: none;
    }
}

.page-header-item-2 {
    position: absolute;
    width: 250px;
    height: 167px;
    bottom: 0;
    right: 90px;
}

@media(max-width:991px) {
    .page-header-item-2{
        width: 135px;
        height: 90px;
        right: 20px;
        bottom: -10px;
    }
}

.page-title {
    color: #fff;
    --fs: 34;
    font-size: var(--font-size);
    /* padding-left: 290px; */
    font-weight: bold;
    letter-spacing: 0.08em;
	max-width: 700px;
	width: 100%;
	margin-inline: auto;
}

@media(max-width:991px) {
    .page-title{
        --fs: 25;
        padding-left: var(--padding);
        padding-right: var(--padding);
    }
}

.page-title span {
    display: block;
    --fs: 16;
    font-size: var(--font-size);
    margin-bottom: 20px;
    padding-left: 5px;
}

@media(max-width:991px) {
    .page-title span{
        --fs: 10;
        margin-bottom: 15px;
    }
}

.page-content {
    padding: 75px 0;
    position: relative;
    overflow: clip;
}

.page-content::before{
    content: "";
    background-image: url(./img/bg-page-item02.svg);
    background-repeat: repeat-y;
    min-height: 3000px;
    height: 100%;
    display: block;
    width: 200px;
    position: absolute;
    left: calc((100vw - 1000px) / 2 - 250px);
    top: 1600px;
    z-index: 1;
}

.page-content::after{
    content: "";
    background-image: url(./img/bg-page-item02.svg);
    background-repeat: repeat-y;
    min-height: 3070px;
    height: 100%;
    display: block;
    width: 175px;
    position: absolute;
    right: calc((100vw - 1000px) / 2 - 225px);
    top: 800px;
    background-size: contain;
    z-index: 1;
}

@media(min-width: 1279px) {
	.page-content::before {
		left: -110px;
	}
	.page-content::after{
		right: -75px;
	}
}

@media(max-width: 767px) {
     .page-content {
        padding: 50px 0;
     }
}

.page-section-title {
    margin-bottom: 20px;
    --fs: 26;
    font-size: var(--font-size);
    line-height: calc(45 / 26);
    font-weight: bold;
}

.page-section-en {
	display: block;
	font-weight: 600;
	color: var(--color-theme-1);
	margin-bottom: 10px;
}

.page-section-h-3 {
	display: flex;
	align-items: center;
	gap: 15px;
	--fs: 22;
	font-size: var(--font-size);
	color: #FFF;
	width: 100%;
	min-height: 53px;
	padding: 5px 15px;
	margin-bottom: 20px;
}

.researcher-item {
	display: grid;
	grid-template-columns: 230px 1fr;
	align-items: flex-start;
	gap: 20px;
	border-bottom: 1.5px dotted var(--color-body-1);
	padding-top: 80px;
	padding-bottom: 80px;
}

.researcher-item:last-child {
	border-bottom: none;
}

.researcher-image {
	display: grid;
	gap: 20px;
}

.researcher-image a {
	position: relative;
	display: grid;
	place-items: center;
	--fs: 14;
	letter-spacing: 0.05em;
	color: #FFF;
	width: 100%;
	min-height: 38px;
	background: var(--color-theme-1);
	border-radius: 40px;
}

.researcher-image a::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.researcher-position {
	display: block;
	color: var(--color-theme-1);
	margin-bottom: 10px;
}

.researcher-name {
	--fs: 22;
	font-size: var(--font-size);
	font-weight: 600;
	margin-bottom: 20px;
}

.researcher-name span {
	--fs: 16;
	font-weight: 400;
	margin-left: 15px;
}

.researcher-theme {
	--fs: 16;
	line-height: 1.5;
	font-size: var(--font-size);
	font-weight: 400;
	color: var(--color-theme-1);
	margin-bottom: 5px;
}

.researcher-theme::before {
	content: "●";
	display: inline;
}

.researcher-text {
	word-break: break-all;
}

@media(max-width: 767px) {
	.page-section-title {
		--fs: 22;
	}
	.page-section-h-3 {
		--fs: 
		margin-bottom: 15px;
	}
	.researcher-item {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.researcher-image {
		display: contents;
	}
	.researcher-image img {
		max-width: 250px;
		margin-inline: auto;
		margin-bottom: 35px;
	}
	.researcher-image a {
		max-width: 270px;
		margin-inline: auto;
		order: 1;
	}
	.researcher-text {
		margin-bottom: 20px;
	}
	.researcher-button {
		cursor: pointer;
		position: relative;
		display: grid;
		place-items: center;
		--fs: 14;
		font-size: var(--font-size);
		letter-spacing: 0.05em;
		color: var(--color-theme-1);
		max-width: 270px;
		width: 100%;
		min-height: 38px;
		background: #FFF;
		border: 1px solid var(--color-theme-1);
		border-radius: 40px;
		margin-top: 35px;
		margin-inline: auto;
	}
	.researcher-button::before {
		content: "";
		width: 8px;
		height: 8px;
		border-top: 1px solid var(--color-theme-1);
		border-right: 1px solid var(--color-theme-1);
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(calc(-50% - 1px)) rotate(135deg);
	}
	.researcher-button:hover {
		opacity: 0.6;
	}
	.researcher-button + p {
		height: 0;
		opacity: 0;
		visibility: hidden;
	}
	.researcher-button + p.show {
		height: auto;
		opacity: 1;
		visibility: visible;
		padding-top: 10px;
	}
}

/*		センターについて		*/
.about-mission {
	position: relative;
	margin-bottom: 80px;
	overflow-x: clip;
}

.about-mission-content {
	display: grid;
	align-items: center;
	grid-template-columns: 55% 1fr;
	gap: 30px;
}

.about-mission-image {
	margin-right: calc((1280px - var(--container)) / -2 - 35px);
}

.about-mission-image img {
	width: 100%;
	border-radius: 30px;
}

.about-social {
	position: relative;
	margin-bottom: 80px;
	overflow-x: clip;
}

.about-social-content {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 65%;
	gap: 30px;
}

.about-social-image {
	margin-left: calc((1280px - var(--container)) / -2 - 65px);
	order: -1;
}

.about-social-image img {
	width: 100%;
	border-radius: 30px;
}

.about-department {
	position: relative;
	background: var(--color-gray-1);
	border-radius: 30px;
	padding-top: 100px;
	padding-bottom: 150px;
	margin-bottom: 125px;
	z-index: 1;
}

.about-organization {
	margin-bottom: 150px;
}

.about-organization-chart {
	display: grid;
	grid-template-columns: 190px 1fr;
	align-items: flex-start;
	gap: 130px;
}

.chart-title {
	position: relative;
	--fs: 18;
	font-size: var(--font-size);
	font-weight: 400;
	color: #FFF;
	display: grid;
	place-items: center;
	min-width: 190px;
	max-inline-size: max-content;
	width: 100%;
	min-height: 50px;
	background: var(--color-theme-1);
	border-radius: 50px;
	padding: 5px 15px;
	margin-bottom: 15px;
}

h3.chart-title::before {
	content: "";
	width: calc(130px / 2);
	height: 1px;
	background: var(--color-theme-1);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(100%,-50%);
}

h4.chart-title {
	min-width: 270px;
}

h4.chart-title::before {
	content: "";
	width: calc(130px / 2);
	height: 1px;
	background: var(--color-theme-1);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-100%,-50%);
}

.about-organization-item {
	position: relative;
}

.about-organization-item:not(:last-child)::before {
	content: "";
	width: 1px;
	height: 100%;
	background: var(--color-theme-1);
	position: absolute;
	top: calc(50px / 2);
	left: calc(130px / -2);
	transform: translateX(-50%);
}

.about-organization-item:not(:last-child) {
	padding-bottom: 50px;
}

.about-organization-chart ul {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.about-organization-chart ul li {
	text-indent: -0.5em;
    margin-left: 1em;
}

.about-organization-chart ul li::before {
	content: "・";
	display: inline-block;
}

@media(max-width: 1279px) {
	.about-mission-image {
		margin-right: calc((100vw - var(--container)) / -2 - 35px);
	}
	.about-results-image {
		margin-left: calc((100vw - var(--container)) / -2 - 65px);
	}
}

@media(max-width: 999px) {
	.about-mission-image {
		margin-right: calc((var(--padding) * -1) - 30px);
	}
	.about-social-image {
		margin-left: calc((var(--padding) * -1) - 30px);
	}
}

@media(max-width: 767px) {
	.about-mission {
		margin-bottom: 70px;
	}
	.about-mission-content {
		grid-template-columns: 1fr;
	}
	.about-mission-image {
		order: -1;
	}
	.about-mission-image img {
		border-radius: 15px;
	}
	.about-social {
		margin-bottom: 70px;
	}
	.about-social-content {
		grid-template-columns: 1fr;
	}
	.about-social-image {
		margin-left: calc((var(--padding) * -1) - 10px);
	}
	.about-social-image img {
		border-radius: 0 15px 15px 0;
	}
	.about-organization-chart {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	h3.chart-title::before {
		width: 1px;
		height: calc(50% + 50%);
		top: auto;
		bottom: 0;
		left: calc(65px / 2);
		transform: translate(-50%,100%);
	}
	h4.chart-title::before {
		width: calc(65px / 2);
	}
	.about-organization-section {
		padding-left: 65px;
	}
	.about-organization-item:first-child::before {
		height: calc(100% + 25px);
		top: 0;
	}
	.about-organization-item:not(:last-child) {
		padding-bottom: 40px;
	}
	.about-organization-item:not(:last-child)::before {
		left: calc(65px / -2);
	}
}

/*		研究部門		*/
.section-intro {
	margin-bottom: 100px;
}

.section-intro-content {
	display: grid;
	grid-template-columns: 60% 1fr;
	gap: 30px;
	margin-bottom: 60px;
}

.section-intro-image img {
	border-radius: 30px;
}

.section-intro-other h3 {
	--fs: 26;
	font-size: var(--font-size);
	font-weight: 600;
	line-height: calc(45 / 26);
	color: var(--color-theme-2);
	margin-bottom: 20px;
}

.section-intro-other .box {
	border: 1px solid var(--color-theme-2);
	border-radius: 20px;
	padding: 20px 35px;
}

.section-intro-other ul {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.section-intro-other ul li {
	--fs: 21;
	font-size: var(--font-size);
	font-weight: 600;
	color: var(--color-theme-2);
	line-height: 1.3;
	text-indent: -1em;
	margin-left: 1em;
}

.section-intro-other ul li:not(:last-child) {
	margin-bottom: 8px;
}

.section-intro-other ul li::before {
	content: "・";
	display: inline;
}

@media(max-width: 767px) {
	.section-intro {
		margin-bottom: 80px;
	}
	.section-intro-content {
		grid-template-columns: 1fr;
	}
	.section-intro-image {
		order: -1;
	}
	.section-intro-image img {
		border-radius: 15px;
	}
	.section-intro-other h3 {
		--fs: 22;
		margin-bottom: 10px;
	}
	.section-intro-other .box {
		padding: 20px 10px;
	}
	.section-intro-other ul li {
		--fs: 16;
	}
}

/*		研究交流・産官学連携		*/
.pertnership-intro {
	margin-bottom: 100px;
}

.pertnership-intro-content {
	display: grid;
}

.pertnership-intro-text {
	margin-bottom: 60px;
}

.pertnership-intro-image {
	text-align: center;
}

.pertnership-address-content {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 60px 45px;
}

.pertnership-address-item ul {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.pertnership-address-item ul li {
	text-indent: -1em;
	line-height: 1.5;
	margin-bottom: 5px;
	margin-left: 1em;
}

.pertnership-address-item ul li::before {
	content: "・";
	display: inline;
}

@media(max-width: 767px) {
	.pertnership-intro {
		margin-bottom: 50px;
	}
	.pertnership-intro-content {
		grid-template-columns: 1fr;
	}
	.pertnership-intro-text {
		display: contents;
	}
	.pertnership-intro-text .page-section-title {
		order: -2;
	}
	.pertnership-intro-image {
		order: -1;
		margin-bottom: 55px;
	}
	.pertnership-intro-image img {
		max-width: 350px;
		width: 100%;
	}
	.pertnership-address-content {
		grid-template-columns: 1fr;
		gap: 50px;
	}
}

/*		交通アクセス		*/
.access-route {
	margin-top: 70px;
	margin-bottom: 130px;
}

.access-route table {
	width: 100%;
	margin-bottom: 50px;
}

.access-route table tr td {
	border-bottom: 0.5px solid #333333;
	padding: 10px 0;
}

.access-route table tr td:first-child {
	font-weight: 600;
	width: 150px;
}

.google-map iframe {
	width: 100%;
	max-height: 500px;
	height: 100%;
	min-height: 330px;
	aspect-ratio: 1280 / 500;
	object-fit: cover;
}

@media(max-width: 767px) {
	.access-route {
		margin-bottom: 100px;
	}
	.access-route table {
		margin-bottom: 30px;
	}
}

/*		プロジェクトについて		*/
.project-intro {
	margin-bottom: 90px;
}

.project-item {
	display: grid;
	grid-template-columns: 60% 1fr;
	gap: 30px;
}

.project-item-text h2 {
	--fs: 20;
	font-size: var(--font-size);
	font-weight: bold;
	color: var(--color-theme-1);
}

.project-item:not(:last-child) {
	margin-bottom: 120px;
}

.project-item-image img {
	border-radius: 20px;
}

@media(max-width: 767px) {
	.project-item {
		grid-template-columns: 1fr;
		gap: 30px;
		margin-bottom: 100px;
	}
	.project-item:last-child {
		margin-bottom: 50px;
	}
	.project-item-text h2 {
		--fs: 16;
		margin-bottom: 15px;
	}
	.project-item-image {
		order: -1;
	}
}

/*		関連リンク		*/
.page-link-list {
	list-style: none;
	padding: 0;
	margin-bottom: 70px;
}

.page-link-item {
	position: relative;
	border-top: 1px solid #333333;
	padding: 22px 0;
}

.page-link-item:last-child {
	border-bottom: 1px solid #333333;
}

.page-link-item a {
	display: block;
	text-decoration: underline;
	line-height: 1.5;
	color: var(--color-theme-1);
}

.page-link-item a::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

@media(max-width: 767px) {
	.page-link-list {
		margin-bottom: 60px;
	}
}


.wow[class*="animate__"]:not(.animate__animated) {
	animation-name: none;
	visibility: hidden;
}

.animate__fadeIn {
	animation-duration: 2s;
}