@charset "utf-8";

.ways-hero img {
	width: 100%;
}

/** next-ways */
.kabai-ways {
	padding: calc(100rem / var(--root-font-size)) 0;
	width: calc(800rem / var(--root-font-size));
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.kabai-ways h3 {
	font-family: var(--din);
	font-size: calc(28rem / var(--root-font-size));
	color: #22aadb;
	padding-bottom: calc(50rem / var(--root-font-size));
}

.kabai-ways h3 span {
	color: #2c673f;
}

/* 掲出記事準備中の画面表示 */
.kabai-ways article:has(.coming-soon) {
	margin: auto;
	padding: calc(172rem / var(--root-font-size)) 0;
}

.kabai-ways .coming-soon {
	display: flex;
	flex-direction: column;
	place-content: center center;
	align-items: center;
	width: calc(272rem / var(--root-font-size));
	height: calc(272rem / var(--root-font-size));
	margin: auto;
	border-radius: 50%;
	border: calc(10rem / var(--root-font-size)) solid #00d8c0;
}

.kabai-ways .coming-soon span {
	font-family: var(--din);
	font-size: calc(56rem / var(--root-font-size));
	font-weight: var(--demi);
	color: #00d8c0;
}

.kabai-ways article {
	width: calc(312rem / var(--root-font-size));
	margin: 2em 0;
}

.kabai-ways article > a {
	text-decoration: none;
	color: black;
	display: block;
	transition: transform 0.3s ease, filter 0.3s ease;
	will-change: transform, filter;
}

.kabai-ways article > a:hover {
	filter: brightness(1.08);
	transform: scale(1.02);
}

.kabai-ways .image-wrapper {
	position: relative;
}

.kabai-ways .image-wrapper .interview-index {
	position: absolute;
	background-color: #5bc2ab;
	font-family: var(--din);
	font-weight: var(--demi);
	font-size: calc(18rem / var(--root-font-size));
	padding: 0.2em 0.4em;
}

.kabai-ways .image-wrapper .interview-index > span {
	font-size: calc(30rem / var(--root-font-size));
	margin-left: 0.5em;
}

.kabai-ways .image-wrapper .image-container {
	padding-top: calc(23rem / var(--root-font-size));
}

.kabai-ways .image-container img {
	width: 100%;
	border-radius: calc(30rem / var(--root-font-size));
}

.kabai-ways .image-wrapper .image-container,
.person-info,
.kabai-ways .title-wrapper h4 {
	padding-left: calc(15rem / var(--root-font-size));
}

.person-info .department.applied-chemistry {
	color: var(--applied-chemistry);
}

.person-info .department.chemical-engineering {
	color: var(--chemical-engineering);
}

.person-info .department.bioengineering {
	color: var(--bioengineering);
}

.kabai-ways .title-wrapper {
	display: flex;
	align-items: center;
	height: calc(100rem / var(--root-font-size));
}

.kabai-ways .title-wrapper h4 {
	font-family: var(--noto);
	font-weight: var(--bold);
	font-size: calc(18rem / var(--root-font-size));
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	max-height: calc(50rem / var(--root-font-size));
}

.person-info > div {
	font-family: var(--noto);
	font-weight: var(--regular);
	font-size: calc(14rem / var(--root-font-size));
}

.view-more {
	display: none;
}

/* SP */
@media screen and (width <= 991px) {
	/** next-ways */
	.kabai-ways {
		width: auto;
		flex-direction: column;
		align-items: center;
		gap: calc(100rem / var(--root-font-size));
	}

	.kabai-ways h3 {
		text-align: center;
		font-size: calc(60rem / var(--root-font-size));
	}

	/* 掲出記事準備中の画面表示 */
	.kabai-ways article:has(.coming-soon) {
		padding: calc(300rem / var(--root-font-size)) 0;
	}

	.kabai-ways .coming-soon {
		width: calc(400rem / var(--root-font-size));
		height: calc(400rem / var(--root-font-size));
	}

	.kabai-ways article {
		width: calc(600rem / var(--root-font-size));
	}

	.kabai-ways .image-wrapper .interview-index {
		font-size: calc(26rem / var(--root-font-size));
	}

	.kabai-ways .image-wrapper .interview-index > span {
		font-size: calc(46rem / var(--root-font-size));
	}

	.kabai-ways .image-wrapper {
		padding-top: calc(35rem / var(--root-font-size));
	}

	.kabai-ways .title-wrapper {
		height: calc(150rem / var(--root-font-size));
	}

	.kabai-ways .title-wrapper h4 {
		font-size: calc(28rem / var(--root-font-size));
		max-height: calc(80rem / var(--root-font-size));
	}

	.person-info > div {
		font-size: calc(24rem / var(--root-font-size));
	}

	.person-info > div.name {
		font-size: calc(28rem / var(--root-font-size));
	}

	div:has(.view-more) {
		display: flex;
		justify-content: center;
	}

	.view-more {
		display: flex;
		margin-top: calc(20rem / var(--root-font-size));
		height: calc(50rem / var(--root-font-size));
		border-radius: calc(25rem / var(--root-font-size));
	}
	
	.view-more::after {
		margin-left: calc(10rem / var(--root-font-size));
	}

	.gradient {
		margin-top: calc(50rem / var(--root-font-size));
		padding: 0;
	}
}