@charset "utf-8";

:root {
	/*
		各研究分野の色
		学問領域の色はcommonで指定
	*/
	--green: #2eb902;
	--bio: #ff6c00;
	--energy: #00afde;
	--nanomaterials: #ff5284;
}

/* hero */
.hero {
	height: calc(350rem / var(--root-font-size));
}

.hero picture,
.hero img {
	width: 100%;
	height: calc(350rem / var(--root-font-size));
	object-fit: cover;
}

/* KABAIの研究分野 */
.about-research-fields {
	width: calc(944rem / var(--root-font-size));
	height: auto;
	padding: calc(100rem / var(--root-font-size)) calc(50% - calc(944rem / var(--root-font-size) / 2)) 0;
}

.about-kabai {
	display: flex;
	gap: calc(60rem / var(--root-font-size));
	width: 100%;
	height: calc(145rem / var(--root-font-size));
}

.about-kabai picture,
.about-kabai img {
	width: auto;
	height: calc(120rem / var(--root-font-size));
}

.about-kabai .introduction {
	font-family: var(--noto);
	font-size: calc(16rem / var(--root-font-size));
	font-weight: var(--regular);
	display: flex;
	align-items: center;
	line-height: 2;
	width: auto;
	height: calc(145rem / var(--root-font-size));
	margin: 0;
	padding-left: calc(40rem / var(--root-font-size));
	border-left: calc(2rem / var(--root-font-size)) var(--cat-all) solid;
}

.kabai-circle {
	width: 100%;
	height: calc(938rem / var(--root-font-size));
	padding-top: calc(100rem / var(--root-font-size));
	padding-bottom: calc(150rem / var(--root-font-size));
}

.research-fields {
	position: relative;
}

.circle-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: calc(15rem / var(--root-font-size));
	position: absolute;
	top: calc(800rem / var(--root-font-size));
	width: calc(312rem / var(--root-font-size));
	height: calc(312rem / var(--root-font-size));
	background-color: #fff;
	border-radius: calc(156rem / var(--root-font-size));
	text-decoration: none;
	cursor: pointer;
}

.circle-button img,
.circle-button h3,
.circle-button .view-more {
	position: relative;
	z-index: 2;
}

.circle-button img {
	width: calc(100rem / var(--root-font-size));
	height: calc(100rem / var(--root-font-size));
}

.circle-button h3 {
	font-family: var(--noto);
	font-size: calc(28rem / var(--root-font-size));
	font-weight: var(--bold);
	margin: 0;
}

.circle-button .view-more {
	font-weight: var(--demi);
	background-color: #000;
	width: calc(120rem / var(--root-font-size));
}

.circle-button .invert::after {
	background-image: url('/img/common2/icon_arrow_W.webp');
}

.kabai-circle .green {
	top: calc(-930rem / var(--root-font-size));
	border: calc(5rem / var(--root-font-size)) var(--green) solid;
}

.kabai-circle .green h3 {
	color: var(--green);
}

.kabai-circle .green .invert:hover {
	background-color: var(--green);
}

.kabai-circle .bio {
	top: calc(-930rem / var(--root-font-size));
	right: 0;
	border: calc(5rem / var(--root-font-size)) var(--bio) solid;
}

.kabai-circle .bio h3 {
	color: var(--bio);
}

.kabai-circle .bio .invert:hover {
	background-color: var(--bio);
}

.kabai-circle .energy {
	top: calc(-360rem / var(--root-font-size));
	border: calc(5rem / var(--root-font-size)) var(--energy) solid;
}

.kabai-circle .energy h3 {
	color: var(--energy);
}

.kabai-circle .energy .invert:hover {
	background-color: var(--energy);
}

.kabai-circle .nanomaterials {
	top: calc(-360rem / var(--root-font-size));
	right: 0;
	border: calc(5rem / var(--root-font-size)) var(--nanomaterials) solid;
}

.kabai-circle .nanomaterials h3 {
	color: var(--nanomaterials);
}

.kabai-circle .nanomaterials .invert:hover {
	background-color: var(--nanomaterials);
}

.search-from-academic-fields {
	position: relative;
	width: 100%;
	height: calc(170rem / var(--root-font-size));
	padding-bottom: calc(100rem / var(--root-font-size));
}

.search-from-academic-fields > p {
	font-family: var(--noto);
	font-size: calc(27rem / var(--root-font-size));
	font-weight: var(--bold);
	display: flex;
	justify-content: center;
	position: absolute;
	top: calc(-22rem / var(--root-font-size));
	left: calc(50% - calc(250rem / var(--root-font-size) / 2));
	width: calc(250rem / var(--root-font-size));
	background-color: #fff;
	margin: 0;
}

.academic-fields {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: calc(150.4rem / var(--root-font-size));
	border: calc(5rem / var(--root-font-size)) var(--cat-all) solid;
	border-radius: calc(15rem / var(--root-font-size));
}

.academic-fields #applied-chemistry,
.academic-fields #chemical-engineering,
.academic-fields #bioengineering {
	display: none;
}

.academic-fields .course {
	font-family: var(--noto);
	font-size: calc(28rem / var(--root-font-size));
	font-weight: var(--bold);
	color: #fff;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(279rem / var(--root-font-size));
	height: calc(98rem / var(--root-font-size));
	border-radius: calc(20rem / var(--root-font-size));
	transition: 0.3s;
	cursor: pointer;
}

.academic-fields .course h3 {
	display: flex;
}

.academic-fields .applied-chemistry-label {
	background-color: var(--applied-chemistry);
}

.academic-fields .applied-chemistry-label:hover {
	background-color: #176f9380;
}

.academic-fields .chemical-engineering-label {
	background-color: var(--chemical-engineering);
}

.academic-fields .chemical-engineering-label:hover {
	background-color: #69bd8380;
}

.academic-fields .bioengineering-label {
	background-color: var(--bioengineering);
}

.academic-fields .bioengineering-label:hover {
	background-color: #8d80bb80;
}

/* 研究分野サークルのホバー時レイアウト */
.circle-layout {
	position: relative;
	aspect-ratio: 1 / 1;
}

.mask {
	position: absolute;
	width: 100%;
}

.mask img {
	width: 100%;
}

.kabai-circle:has(.green-hamburger:hover) .mask.top-left img,
.kabai-circle:has(.bio-hamburger:hover) .mask.top-right img,
.kabai-circle:has(.energy-hamburger:hover) .mask.bottom-left img,
.kabai-circle:has(.nanomaterials-hamburger:hover) .mask.bottom-right img {
	filter: brightness(1.2);
}

.top-left {
	clip-path: polygon(0 0, 50% 0, 50.1% 49.5%, 0 49.5%);
}

.top-right {
	clip-path: polygon(50% 0, 100% 0, 100% 49.5%, 50% 49.5%);
}

.bottom-left {
	clip-path: polygon(0 49.5%, 50.1% 49.4%, 50% 100%, 0 100%);
}

.bottom-right {
	clip-path: polygon(50% 49.4%, 100% 49.5%, 100% 100%, 50% 100%);
}

/* 以下ハンバーガーに関する設定 */
.overlay {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 900;
}

#research-menu {
	position: fixed;
	top: 8em;
	right: -1%;
	width: 68em;
	height: calc(90vh - 2em);
	background: #fff;
	box-shadow: calc(-4rem / var(--root-font-size)) 0 calc(12rem / var(--root-font-size)) rgb(0 0 0 20%);
	padding: calc(70rem / var(--root-font-size)) calc(20rem / var(--root-font-size)) calc(40rem / var(--root-font-size)) calc(30rem / var(--root-font-size));
	transform: translateX(100%);
	transition: transform 0.35s ease;
	z-index: 1000;
	box-sizing: border-box;
	border-radius: calc(25rem / var(--root-font-size)) 0 0 calc(25rem / var(--root-font-size));
}

.overlay.active {
	opacity: 1;
	pointer-events: auto;
}

#research-menu.active {
	transform: translateX(-1%);
}

/* 非表示部分 */
#research-menu > img,
.tab-list {
	display: none;
}

/* swiper */
#research-menu .swiper {
	height: 100%;
	overflow: hidden;
}

#research-menu .swiper-slide {
	overflow-y: auto;
}

.close {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	position: absolute;
	top: calc(20rem / var(--root-font-size));
	right: calc(40rem / var(--root-font-size));
	width: calc(40rem / var(--root-font-size));
	height: calc(35rem / var(--root-font-size));
	cursor: pointer;
}

.close span {
	display: block;
	background: #000;
	width: calc(40rem / var(--root-font-size));
	height: calc(1rem / var(--root-font-size));
}

.close span:first-child {
	rotate: 45deg;
}

.close span:last-child {
	rotate: -45deg;
}

/* ハンバーガーの中身の見た目 */
.hamburger-details picture,
.hamburger-details img {
	width: calc(220rem / var(--root-font-size));
	height: calc(220rem / var(--root-font-size));
}

.hamburger-details .caption,
.hamburger-details .lab-list {
	padding-left: calc(50rem / var(--root-font-size));
}

.hamburger-details .caption {
	display: flex;
	justify-content: space-between;
	gap: calc(30rem / var(--root-font-size));
	width: calc(945rem / var(--root-font-size));
	padding-top: calc(20rem / var(--root-font-size));
	padding-bottom: calc(30rem / var(--root-font-size));
}

.hamburger-details .caption .introduction {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hamburger-details .caption .introduction .introduce-text {
	display: flex;
}

.hamburger-details .caption .introduction .introduce-text h2 {
	font-family: var(--noto);
	font-size: calc(20rem / var(--root-font-size));
	font-weight: var(--medium);
	width: 100%;
	height: calc(64rem / var(--root-font-size));
	margin: 0;
}

.hamburger-details .caption .introduction .introduce-text h2 span {
	display: block;
}

.hamburger-details .caption .introduction .social-issues h4,
.hamburger-details .caption .introduction .keywords h4 {
	font-family: var(--noto);
	font-size: calc(12rem / var(--root-font-size));
	font-weight: var(--medium);
	color: #fff;
	width: calc(65rem / var(--root-font-size));
}

.hamburger-details .caption .introduction .social-issues {
	display: flex;
	justify-content: space-between;
	height: calc(25rem / var(--root-font-size));
}

.hamburger-details .caption .introduction .social-issues h4 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.hamburger-details .caption .introduction .social-issues p {
	font-family: var(--noto);
	font-size: calc(16rem / var(--root-font-size));
	font-weight: var(--medium);
	width: calc(600rem / var(--root-font-size));
	margin: 0;
}

.hamburger-details .caption .introduction .keywords {
	display: flex;
	justify-content: space-between;
	height: calc(100rem / var(--root-font-size));
}

.hamburger-details .caption .introduction .keywords h4,
.hamburger-details .caption .introduction .keywords ul {
	margin: 0;
}

.hamburger-details .caption .introduction .keywords h4 {
	text-align: center;
}

.hamburger-details .caption .introduction .keywords ul {
	font-size: 0;
	width: calc(600rem / var(--root-font-size));
	padding: 0;
	line-height: 1.6;
}

.hamburger-details .caption .introduction .keywords ul li {
	font-family: var(--noto);
	font-size: calc(14rem / var(--root-font-size));
	font-weight: var(--regular);
	display: inline;
	margin-right: calc(4rem / var(--root-font-size));
}

.hamburger-details .caption .introduction .keywords ul li::before {
	content: '●';
	font-size: 1em;
	margin-right: 0;
}

.hamburger-details .lab-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: calc(945rem / var(--root-font-size));
	margin-top: 0;
	padding-bottom: calc(50rem / var(--root-font-size));
}

.hamburger-details .lab-list > li {
	list-style: none;
}

.hamburger-details .lab-list > li a {
	display: flex;
	align-items: center;
	color: #000;
	text-decoration: none;
}

.hamburger-details .lab-list .lab {
	display: flex;
	align-items: center;
	width: calc(447rem / var(--root-font-size));
	height: calc(115rem / var(--root-font-size));
}

.hamburger-details .lab-list .lab .lab-info {
	width: calc(190rem / var(--root-font-size));
}

.hamburger-details .lab-list .lab .lab-info div {
	height: calc(49rem / var(--root-font-size));
}

.hamburger-details .lab-list .lab .course,
.hamburger-details .lab-list .lab .professor,
.hamburger-details .lab-list .lab .field {
	font-family: var(--noto);
	margin: 0;
}

.hamburger-details .lab-list .lab .course {
	font-size: calc(16rem / var(--root-font-size));
	font-weight: var(--regular);
}

.hamburger-details .lab-list .lab .professor {
	font-size: calc(20rem / var(--root-font-size));
	font-weight: var(--medium);
}

.hamburger-details .lab-list .lab .field {
	font-size: calc(14rem / var(--root-font-size));
	font-weight: var(--regular);
}

.hamburger-details .lab-list .lab .lab-keywords {
	display: flex;
	flex-direction: column;
	width: calc(242rem / var(--root-font-size));
	margin-top: 0;
	margin-bottom: calc(-20rem / var(--root-font-size));
	padding-left: calc(21rem / var(--root-font-size));
	list-style: none;
}

.hamburger-details .lab-list .lab .lab-keywords li {
	font-family: var(--noto);
	font-size: calc(12rem / var(--root-font-size));
	font-weight: var(--regular);
}

.hamburger-details .lab-list .lab .lab-keywords li::before {
	content: '●';
	font-size: 1em;
	margin-right: 0;
}

.hamburger-details .lab-list .lab .applied-chemistry {
	color: var(--applied-chemistry);
}

.hamburger-details .lab-list .lab .chemical-engineering {
	color: var(--chemical-engineering);
}

.hamburger-details .lab-list .lab .bioengineering {
	color: var(--bioengineering);
}

.hamburger-details .lab-list > li a::after {
	content: '';
	background-image: url('/img/common2/icon_arrow.webp');
	background-size: calc(15rem / var(--root-font-size));
	background-repeat: no-repeat;
	width: calc(15rem / var(--root-font-size));
	height: calc(15.5rem / var(--root-font-size));
	margin-left: calc(-15rem / var(--root-font-size));
}

.energy-details .caption .introduction .introduce-text h2 > span,
.nanomaterials-details .caption .introduction .introduce-text h2 > span {
	display: flex;
}

/* kabai-circleのハンバーガー特有の見た目 */
.green-details .caption .introduction,
.bio-details .caption .introduction,
.energy-details .caption .introduction,
.nanomaterials-details .caption .introduction {
	width: calc(690rem / var(--root-font-size));
	height: calc(220rem / var(--root-font-size));
}

.green-details .caption .introduction .introduce-text h2 {
	color: var(--green);
}

.green-details .caption .introduction .social-issues h4,
.green-details .caption .introduction .keywords h4 {
	background-color: var(--green);
}

.green-details .caption .introduction .keywords ul li::before {
	color: var(--green);
}

.green-details .lab-list .lab {
	border-bottom: calc(2rem / var(--root-font-size)) var(--green) solid;
}

.green-details .lab-list .lab .lab-keywords li::before {
	color: var(--green);
}

.bio-details .caption .introduction .introduce-text h2 {
	color: var(--bio);
}

.bio-details .caption .introduction .social-issues h4,
.bio-details .caption .introduction .keywords h4 {
	background-color: var(--bio);
}

.bio-details .caption .introduction .keywords ul li::before {
	color: var(--bio);
}

.bio-details .lab-list .lab {
	border-bottom: calc(2rem / var(--root-font-size)) var(--bio) solid;
}

.bio-details .lab-list .lab .lab-keywords li::before {
	color: var(--bio);
}

.energy-details .caption .introduction .introduce-text h2 {
	color: var(--energy);
}

.energy-details .caption .introduction .social-issues h4,
.energy-details .caption .introduction .keywords h4 {
	background-color: var(--energy);
}

.energy-details .caption .introduction .keywords ul li::before {
	color: var(--energy);
}

.energy-details .lab-list .lab {
	border-bottom: calc(2rem / var(--root-font-size)) var(--energy) solid;
}

.energy-details .lab-list .lab .lab-keywords li::before {
	color: var(--energy);
}

.nanomaterials-details .caption .introduction .introduce-text h2 {
	color: var(--nanomaterials);
}

.nanomaterials-details .caption .introduction .social-issues h4,
.nanomaterials-details .caption .introduction .keywords h4 {
	background-color: var(--nanomaterials);
}

.nanomaterials-details .caption .introduction .keywords ul li::before {
	color: var(--nanomaterials);
}

.nanomaterials-details .lab-list .lab {
	border-bottom: calc(2rem / var(--root-font-size)) var(--nanomaterials) solid;
}

.nanomaterials-details .lab-list .lab .lab-keywords li::before {
	color: var(--nanomaterials);
}

/* academic-fieldsのハンバーガー特有の見た目 */
.applied-chemistry-details .caption .introduction,
.chemical-engineering-details .caption .introduction,
.bioengineering-details .caption .introduction {
	width: 100%;
}

.applied-chemistry-details .caption .introduction .introduce-text,
.chemical-engineering-details .caption .introduction .introduce-text,
.bioengineering-details .caption .introduction .introduce-text {
	gap: calc(20rem / var(--root-font-size));
	padding-bottom: calc(30rem / var(--root-font-size));
}

.applied-chemistry-details .caption .introduction .introduce-text h3,
.chemical-engineering-details .caption .introduction .introduce-text h3,
.bioengineering-details .caption .introduction .introduce-text h3 {
	font-family: var(--noto);
	font-size: calc(28rem / var(--root-font-size));
	font-weight: var(--bold);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: calc(220rem / var(--root-font-size));
	height: calc(100rem / var(--root-font-size));
	margin: 0;
	border-radius: calc(20rem / var(--root-font-size));
}

.applied-chemistry-details .caption .introduction .introduce-text h3 span,
.chemical-engineering-details .caption .introduction .introduce-text h3 span,
.bioengineering-details .caption .introduction .introduce-text h3 span {
	display: block;
	flex-direction: column;
	justify-content: center;
}

.applied-chemistry-details .caption .introduction .introduce-text div,
.chemical-engineering-details .caption .introduction .introduce-text div,
.bioengineering-details .caption .introduction .introduce-text div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(20rem / var(--root-font-size));
	width: calc(650rem / var(--root-font-size));
}

.applied-chemistry-details .caption .introduction .introduce-text div p,
.chemical-engineering-details .caption .introduction .introduce-text div p,
.bioengineering-details .caption .introduction .introduce-text div p {
	font-family: var(--noto);
	font-size: calc(20rem / var(--root-font-size));
	font-weight: var(--medium);
	margin: 0;
}

.applied-chemistry-details .caption .introduction .introduce-text div .course-introduce::after,
.chemical-engineering-details .caption .introduction .introduce-text div .course-introduce::after,
.bioengineering-details .caption .introduction .introduce-text div .course-introduce::after {
	background-image: url('/img/common2/icon_arrow_W.webp');
	margin-top: calc(1rem / var(--root-font-size));
}

.applied-chemistry-details .caption .introduction .keywords,
.chemical-engineering-details .caption .introduction .keywords,
.bioengineering-details .caption .introduction .keywords {
	height: auto;
}

.applied-chemistry-details .caption .introduction .keywords h4,
.chemical-engineering-details .caption .introduction .keywords h4,
.bioengineering-details .caption .introduction .keywords h4 {
	width: calc(65rem / var(--root-font-size));
}

.applied-chemistry-details .caption .introduction .keywords ul,
.chemical-engineering-details .caption .introduction .keywords ul,
.bioengineering-details .caption .introduction .keywords ul {
	font-size: 0;
	width: calc(855rem / var(--root-font-size));
}

.applied-chemistry-details .lab-list,
.chemical-engineering-details .lab-list,
.bioengineering-details .lab-list {
	flex-flow: column nowrap;
	gap: calc(30rem / var(--root-font-size));
	height: calc(177rem / var(--root-font-size));
}

.applied-chemistry-details .lab-list > li,
.chemical-engineering-details .lab-list > li,
.bioengineering-details .lab-list > li {
	display: flex;
	flex-direction: column;
}

.applied-chemistry-details .lab-list h4,
.chemical-engineering-details .lab-list h4,
.bioengineering-details .lab-list h4 {
	font-family: var(--noto);
	font-size: calc(12rem / var(--root-font-size));
	font-weight: var(--medium);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(65rem / var(--root-font-size));
	height: calc(25rem / var(--root-font-size));
	margin: 0;
}

.applied-chemistry-details .lab-list .course-labs,
.chemical-engineering-details .lab-list .course-labs,
.bioengineering-details .lab-list .course-labs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0;
	list-style: none;
}

.applied-chemistry-details .lab-list .course-labs > li a,
.chemical-engineering-details .lab-list .course-labs > li a,
.bioengineering-details .lab-list .course-labs > li a {
	display: flex;
	align-items: center;
	color: #000;
	text-decoration: none;
}

.applied-chemistry-details .lab-list .course-labs > li a::after,
.chemical-engineering-details .lab-list .course-labs > li a::after,
.bioengineering-details .lab-list .course-labs > li a::after {
	content: '';
	background-image: url('/img/common2/icon_arrow.webp');
	background-size: calc(15rem / var(--root-font-size));
	background-repeat: no-repeat;
	width: calc(15rem / var(--root-font-size));
	height: calc(15.5rem / var(--root-font-size));
	margin-left: calc(-15rem / var(--root-font-size));
}

.applied-chemistry-details .caption .introduction .introduce-text h3,
.applied-chemistry-details .caption .introduction .introduce-text a {
	background-color: var(--applied-chemistry);
}

.applied-chemistry-details .caption .introduction .introduce-text p {
	color: var(--applied-chemistry);
}

.applied-chemistry-details .caption .introduction .keywords h4 {
	background-color: var(--applied-chemistry);
}

.applied-chemistry-details .caption .introduction .keywords ul li::before {
	color: var(--applied-chemistry);
}

.applied-chemistry-details .lab-list .core .course-type {
	border-bottom: calc(2rem / var(--root-font-size)) var(--applied-chemistry) solid;
}

.applied-chemistry-details .lab-list .core .course-type h4 {
	background-color: var(--applied-chemistry);
}

.applied-chemistry-details .lab-list .core .lab {
	border-bottom: calc(2rem / var(--root-font-size)) var(--applied-chemistry) solid;
}

.applied-chemistry-details .lab-list .core .lab .lab-keywords li::before {
	color: var(--applied-chemistry);
}

.applied-chemistry-details .lab-list .collaborative .course-type {
	border-bottom: calc(2rem / var(--root-font-size)) #176f9380 solid;
}

.applied-chemistry-details .lab-list .collaborative .course-type h4 {
	background-color: #176f9380;
}

.applied-chemistry-details .lab-list .collaborative .lab {
	border-bottom: calc(2rem / var(--root-font-size)) #176f9380 solid;
}

.applied-chemistry-details .lab-list .collaborative .lab .lab-keywords li::before {
	color: var(--applied-chemistry);
}

.chemical-engineering-details .caption .introduction .introduce-text h3,
.chemical-engineering-details .caption .introduction .introduce-text a {
	background-color: var(--chemical-engineering);
}

.chemical-engineering-details .caption .introduction .introduce-text p {
	color: var(--chemical-engineering);
}

.chemical-engineering-details .caption .introduction .keywords h4 {
	background-color: var(--chemical-engineering);
}

.chemical-engineering-details .caption .introduction .keywords ul li::before {
	color: var(--chemical-engineering);
}

.chemical-engineering-details .lab-list .core .course-type {
	border-bottom: calc(2rem / var(--root-font-size)) var(--chemical-engineering) solid;
}

.chemical-engineering-details .lab-list .core .course-type h4 {
	background-color: var(--chemical-engineering);
}

.chemical-engineering-details .lab-list .core .lab {
	border-bottom: calc(2rem / var(--root-font-size)) var(--chemical-engineering) solid;
}

.chemical-engineering-details .lab-list .core .lab .lab-keywords li::before {
	color: var(--chemical-engineering);
}

.chemical-engineering-details .lab-list .collaborative .course-type {
	border-bottom: calc(2rem / var(--root-font-size)) #69bd8380 solid;
}

.chemical-engineering-details .lab-list .collaborative .course-type h4 {
	background-color: #69bd8380;
}

.chemical-engineering-details .lab-list .collaborative .lab {
	border-bottom: calc(2rem / var(--root-font-size)) #69bd8380 solid;
}

.chemical-engineering-details .lab-list .collaborative .lab .lab-keywords li::before {
	color: var(--chemical-engineering);
}

.bioengineering-details .caption .introduction .introduce-text h3,
.bioengineering-details .caption .introduction .introduce-text a {
	background-color: var(--bioengineering);
}

.bioengineering-details .caption .introduction .introduce-text p {
	color: var(--bioengineering);
}

.bioengineering-details .caption .introduction .keywords h4 {
	background-color: var(--bioengineering);
}

.bioengineering-details .caption .introduction .keywords ul li::before {
	color: var(--bioengineering);
}

.bioengineering-details .lab-list .core .course-type {
	border-bottom: calc(2rem / var(--root-font-size)) var(--bioengineering) solid;
}

.bioengineering-details .lab-list .core .course-type h4 {
	background-color: var(--bioengineering);
}

.bioengineering-details .lab-list .core .lab {
	border-bottom: calc(2rem / var(--root-font-size)) var(--bioengineering) solid;
}

.bioengineering-details .lab-list .core .lab .lab-keywords li::before {
	color: var(--bioengineering);
}

.bioengineering-details .lab-list .collaborative .course-type {
	border-bottom: calc(2rem / var(--root-font-size)) #8d80bb80 solid;
}

.bioengineering-details .lab-list .collaborative .course-type h4 {
	background-color: #8d80bb80;
}

.bioengineering-details .lab-list .collaborative .lab {
	border-bottom: calc(2rem / var(--root-font-size)) #8d80bb80 solid;
}

.bioengineering-details .lab-list .collaborative .lab .lab-keywords li::before {
	color: var(--bioengineering);
}

/* SP */
@media screen and (width <= 991px) {
	/* hero */
	.hero {
		height: calc(500rem / var(--root-font-size));
	}

	.hero picture,
	.hero img {
		width: 100%;
		height: calc(500rem / var(--root-font-size));
		object-fit: cover;
	}

	/* KABAIの研究分野 */
	.about-research-fields {
		width: calc(650rem / var(--root-font-size));
		padding: calc(100rem / var(--root-font-size)) calc(50% - calc(650rem / var(--root-font-size) / 2)) 0;
	}

	.about-kabai {
		flex-direction: column;
		align-items: center;
		gap: calc(50rem / var(--root-font-size));
		height: auto;
	}

	.about-kabai picture,
	.about-kabai img {
		height: calc(50rem / var(--root-font-size));
	}

	.about-kabai .introduction {
		font-size: calc(28rem / var(--root-font-size));
		display: block;
		width: 100%;
		height: calc(406rem / var(--root-font-size));
		padding-left: 0;
		border-left: none;
	}

	.kabai-circle {
		height: calc(822rem / var(--root-font-size));
		padding-top: calc(130rem / var(--root-font-size));
		padding-bottom: calc(100rem / var(--root-font-size));
	}

	.circle-button .view-more {
		width: calc(200rem / var(--root-font-size));
		height: calc(60rem / var(--root-font-size));
		border-radius: calc(30rem / var(--root-font-size));
	}

	.circle-button .invert::after {
		background-image: url('/img/common2/icon_arrow_W.webp');
		background-size: calc(20rem / var(--root-font-size));
		width: calc(20rem / var(--root-font-size));
		height: calc(22rem / var(--root-font-size));
		margin-top: calc(2rem / var(--root-font-size));
	}

	.kabai-circle .green {
		top: calc(-720rem / var(--root-font-size));
		left: calc(-25rem / var(--root-font-size));
	}

	.kabai-circle .bio {
		top: calc(-720rem / var(--root-font-size));
		right: calc(-25rem / var(--root-font-size));
	}

	.kabai-circle .energy {
		top: calc(-250rem / var(--root-font-size));
		left: calc(-25rem / var(--root-font-size));
	}

	.kabai-circle .nanomaterials {
		top: calc(-250rem / var(--root-font-size));
		right: calc(-25rem / var(--root-font-size));
	}

	.search-from-academic-fields {
		height: calc(244rem / var(--root-font-size));
	}

	.search-from-academic-fields > p {
		font-size: calc(28rem / var(--root-font-size));
	}

	.academic-fields {
		height: calc(244rem / var(--root-font-size));
		border-radius: calc(25rem / var(--root-font-size));
	}

	.academic-fields .course {
		width: calc(180rem / var(--root-font-size));
		height: calc(160rem / var(--root-font-size));
	}

	.academic-fields .course h3 {
		flex-direction: column;
		align-items: center;
	}

	.academic-fields .course h3 span {
		display: block;
	}

	.mask img {
		width: calc(640rem / var(--root-font-size));
		height: calc(640rem / var(--root-font-size));
		margin-left: calc(2rem / var(--root-font-size));
	}

	.close span {
		position: absolute;
		top: 50%;
		width: calc(50rem / var(--root-font-size));
		height: calc(3rem / var(--root-font-size));
	}

	/* 以下ハンバーガーに関する設定 */
	#research-menu {
		top: calc(120rem / var(--root-font-size));
		width: 100%;
		height: calc(100% - calc(120rem / var(--root-font-size)));
		padding: 0;
		border-radius: 0;
	}

	/* pc非表示部分を表示する */
	#research-menu > img {
		display: block;
		width: 100%;
		height: calc(200rem / var(--root-font-size));
		object-fit: cover;
	}

	#research-menu .swiper {
		height: calc(100% - calc(200rem / var(--root-font-size)));
		overflow: hidden scroll;
	}

	/* タブ部分の設定 */
	.tab-list {
		font-family: var(--noto);
		font-size: calc(22rem / var(--root-font-size));
		font-weight: var(--medium);
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		white-space: nowrap;
		background: #000;
		padding: 0 1rem;
		margin: 0;
		height: calc(80rem / var(--root-font-size));
		list-style: none;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.tab-list::-webkit-scrollbar {
		display: none;
		height: calc(6rem / var(--root-font-size));
	}

	.tab-list::-webkit-scrollbar-thumb {
		background: #555;
		border-radius: calc(3rem / var(--root-font-size));
	}

	.tab-list li {
		height: 100%;
	}

	.tab-list li button {
		flex: 0 0 auto;
		height: 100%;
		background: transparent;
		color: #fff;
		border: none;
		padding: 0.5rem 1rem;
		cursor: pointer;
		transition: background 0.3s;
		font-size: calc(22rem / var(--root-font-size));
	}

	.tab-list li button.active {
		font-weight: bold;
	}

	.tab-list li .green.active {
		background-color: var(--green);
	}

	.tab-list li .bio.active {
		background-color: var(--bio);
	}

	.tab-list li .energy.active {
		background-color: var(--energy);
	}

	.tab-list li .nanomaterials.active {
		background-color: var(--nanomaterials);
	}

	.tab-list li .applied-chemistry,
	.tab-list li .chemical-engineering,
	.tab-list li .bioengineering {
		background-color: #333;
	}

	.tab-list li .applied-chemistry.active {
		background-color: var(--applied-chemistry);
	}

	.tab-list li .chemical-engineering.active {
		background-color: var(--chemical-engineering);
	}

	.tab-list li .bioengineering.active {
		background-color: var(--bioengineering);
	}

	/* ハンバーガーの中身 共通部分 */
	.hamburger-details {
		width: 100%;
		border-radius: unset;
		transition: 0s;
	}

	.hamburger-details picture,
	.hamburger-details img {
		width: 100%;
		height: calc(350rem / var(--root-font-size));
		object-fit: cover;
	}

	.hamburger-details .caption {
		display: block;
		width: auto;
		padding-top: 0;
		padding-bottom: calc(100rem / var(--root-font-size));
		padding-left: 0;
	}

	.hamburger-details .caption .introduction {
		justify-content: normal;
		gap: calc(50rem / var(--root-font-size));
		width: calc(550rem / var(--root-font-size));
		height: auto;
		padding: calc(50rem / var(--root-font-size)) calc(50% - calc(550rem / var(--root-font-size) / 2)) 0;
	}

	.hamburger-details .caption .introduction .introduce-text {
		width: calc(590rem / var(--root-font-size));
	}

	.hamburger-details .caption .introduction .introduce-text h2 {
		font-size: calc(38rem / var(--root-font-size));
		width: calc(550rem / var(--root-font-size));
		height: auto;
	}

	.hamburger-details .caption .introduction .social-issues h4,
	.hamburger-details .caption .introduction .keywords h4 {
		font-size: calc(24rem / var(--root-font-size));
		width: calc(126rem / var(--root-font-size));
		height: calc(50rem / var(--root-font-size));
	}

	.hamburger-details .caption .introduction .social-issues {
		flex-direction: column;
		gap: calc(26rem / var(--root-font-size));
		height: auto;
	}

	.hamburger-details .caption .introduction .social-issues p {
		display: flex;
		align-items: center;
		font-size: calc(28rem / var(--root-font-size));
		width: calc(550rem / var(--root-font-size));
		height: calc(32rem / var(--root-font-size));
	}

	.hamburger-details .caption .introduction .keywords {
		flex-direction: column;
		gap: calc(26rem / var(--root-font-size));
		height: auto;
	}

	.hamburger-details .caption .introduction .keywords h4 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hamburger-details .caption .introduction .keywords ul {
		width: calc(550rem / var(--root-font-size));
		height: auto;
		line-height: 1.9;
	}

	.hamburger-details .caption .introduction .keywords ul li {
		font-size: calc(26rem / var(--root-font-size));
		margin-right: calc(6rem / var(--root-font-size));
	}

	.hamburger-details .lab-list {
		width: calc(550rem / var(--root-font-size));
		height: auto;
		padding: 0 calc(50% - calc(550rem / var(--root-font-size) / 2)) calc(100rem / var(--root-font-size));
		overflow-y: unset;
	}

	.hamburger-details .lab-list > li a {
		justify-content: space-between;
	}

	.hamburger-details .lab-list .lab {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: calc(550rem / var(--root-font-size));
		height: calc(310rem / var(--root-font-size));
		gap: calc(15rem / var(--root-font-size));
	}

	.hamburger-details .lab-list .lab .lab-info {
		width: 100%;
	}

	.hamburger-details .lab-list .lab .lab-info div {
		height: auto;
	}

	.hamburger-details .lab-list .lab .course {
		font-size: calc(32rem / var(--root-font-size));
	}

	.hamburger-details .lab-list .lab .professor {
		font-size: calc(40rem / var(--root-font-size));
	}

	.hamburger-details .lab-list .lab .field {
		font-size: calc(28rem / var(--root-font-size));
	}

	.hamburger-details .lab-list .lab .lab-keywords {
		width: 100%;
		margin-bottom: 0;
		padding-left: 0;
	}

	.hamburger-details .lab-list .lab .lab-keywords li {
		font-size: calc(24rem / var(--root-font-size));
	}

	.hamburger-details .lab-list > li a::after {
		background-size: calc(25rem / var(--root-font-size));
		width: calc(25rem / var(--root-font-size));
		height: calc(26.5rem / var(--root-font-size));
		margin-left: calc(-25rem / var(--root-font-size));
	}

	.energy-details .caption .introduction .introduce-text h2 > span,
	.nanomaterials-details .caption .introduction .introduce-text h2 > span {
		flex-direction: column;
	}

	/* kabai-circleのハンバーガー特有の見た目 */
	.green-details .caption .introduction,
	.bio-details .caption .introduction,
	.energy-details .caption .introduction,
	.nanomaterials-details .caption .introduction {
		width: auto;
		height: auto;
	}

	.green-details .lab-list > a:first-child .lab {
		border-top: calc(2rem / var(--root-font-size)) var(--green) solid;
	}

	.bio-details .lab-list > a:first-child .lab {
		border-top: calc(2rem / var(--root-font-size)) var(--bio) solid;
	}

	.energy-details .lab-list > a:first-child .lab {
		border-top: calc(2rem / var(--root-font-size)) var(--energy) solid;
	}

	.nanomaterials-details .social-issues p {
		letter-spacing: calc(-1rem / var(--root-font-size));
	}

	.nanomaterials-details .lab-list > a:first-child .lab {
		border-top: calc(2rem / var(--root-font-size)) var(--nanomaterials) solid;
	}

	/* academic-fieldsのハンバーガー特有の見た目 */
	.applied-chemistry-details,
	.chemical-engineering-details,
	.bioengineering-details {
		width: calc(750rem / var(--root-font-size));
	}

	.applied-chemistry-details .caption .introduction,
	.chemical-engineering-details .caption .introduction,
	.bioengineering-details .caption .introduction {
		padding: 0;
		width: 100%;
	}

	.applied-chemistry-details .caption .introduction .introduce-text,
	.chemical-engineering-details .caption .introduction .introduce-text,
	.bioengineering-details .caption .introduction .introduce-text {
		flex-direction: column;
		gap: calc(50rem / var(--root-font-size));
		width: 100%;
		padding-bottom: 0;
	}

	.applied-chemistry-details .caption .introduction .introduce-text h3,
	.chemical-engineering-details .caption .introduction .introduce-text h3,
	.bioengineering-details .caption .introduction .introduce-text h3 {
		font-size: calc(56rem / var(--root-font-size));
		flex-direction: row;
		width: calc(750rem / var(--root-font-size));
		height: calc(350rem / var(--root-font-size));
		border-radius: 0;
	}

	.applied-chemistry-details .caption .introduction .introduce-text div,
	.chemical-engineering-details .caption .introduction .introduce-text div,
	.bioengineering-details .caption .introduction .introduce-text div {
		align-items: center;
		gap: calc(26rem / var(--root-font-size));
		width: calc(550rem / var(--root-font-size));
		padding: 0 calc(50% - calc(550rem / var(--root-font-size) / 2));
	}

	.applied-chemistry-details .caption .introduction .introduce-text div p,
	.chemical-engineering-details .caption .introduction .introduce-text div p,
	.bioengineering-details .caption .introduction .introduce-text div p {
		font-size: calc(40rem / var(--root-font-size));
	}

	.applied-chemistry-details .caption .introduction .introduce-text div .view-more,
	.chemical-engineering-details .caption .introduction .introduce-text div .view-more,
	.bioengineering-details .caption .introduction .introduce-text div .view-more {
		height: calc(60rem / var(--root-font-size));
		border-radius: calc(30rem / var(--root-font-size));
	}

	.applied-chemistry-details .caption .introduction .keywords,
	.chemical-engineering-details .caption .introduction .keywords,
	.bioengineering-details .caption .introduction .keywords {
		padding: 0 calc(50% - calc(550rem / var(--root-font-size) / 2));
	}

	.applied-chemistry-details .caption .introduction .keywords h4,
	.chemical-engineering-details .caption .introduction .keywords h4,
	.bioengineering-details .caption .introduction .keywords h4 {
		width: calc(126rem / var(--root-font-size));
		height: calc(50rem / var(--root-font-size));
	}

	.applied-chemistry-details .caption .introduction .keywords ul,
	.chemical-engineering-details .caption .introduction .keywords ul,
	.bioengineering-details .caption .introduction .keywords ul {
		width: calc(550rem / var(--root-font-size));
		height: auto;
	}

	.applied-chemistry-details .lab-list,
	.chemical-engineering-details .lab-list,
	.bioengineering-details .lab-list {
		gap: calc(50rem / var(--root-font-size));
	}

	.applied-chemistry-details .lab-list .course-type h4,
	.chemical-engineering-details .lab-list .course-type h4,
	.bioengineering-details .lab-list .course-type h4 {
		font-size: calc(24rem / var(--root-font-size));
		width: calc(126rem / var(--root-font-size));
		height: calc(50rem / var(--root-font-size));
	}

	.applied-chemistry-details .lab-list .course-labs > li a::after,
	.chemical-engineering-details .lab-list .course-labs > li a::after,
	.bioengineering-details .lab-list .course-labs > li a::after {
		background-size: calc(25rem / var(--root-font-size));
		width: calc(25rem / var(--root-font-size));
		height: calc(26.5rem / var(--root-font-size));
		margin-left: calc(-25rem / var(--root-font-size));
	}
}