@charset "utf-8";

:root {
	/* Font Family */
	--noto: 'Noto Sans JP', sans-serif;
	--din: 'din-2014', sans-serif;

	/* Font Weight */
	--regular: 400;
	--medium: 500;
	--demi: 600;
	--bold: 700;

	/* Root Font Size */
	--root-font-size: 16;

	/* カテゴリ別の色 */
	--cat-all: #006536;
	--cat-news: #1e3da6;
	--cat-event: #00a89c;
	--cat-research: #8f5d28;
	--cat-lecture: #9ebf13;
	--cat-offering: #e16493;

	/*
		学問領域の色
		研究分野の色はkabai-map.cssで指定
	*/
	--applied-chemistry: #176f93;
	--chemical-engineering: #69bd83;
	--bioengineering: #8d80bb;
}

html {
	--width: 1366;
	--zoom: 1;

	font-size: calc(var(--root-font-size) * 1px);
}

@media screen and (width >= 2200px) {
	html {
		font-size: 26px;
	}
}

@media screen and (width < 1366px) {
	html {
		--zoom: min(1, calc(var(--width) / 1366));

		zoom: var(--zoom);
	}
}

body {
	margin: 0;
}

/* 画面全体の高さからヘッダーとフッターの高さを引いた部分を最小高さにする */
main {
	min-height: calc(calc(100dvh /  var(--zoom)) - calc(90rem / var(--root-font-size)) - calc(460rem / var(--root-font-size)));
}

/* 共通パーツ */

/* view-moreボタン */
.view-more {
	font-family: var(--din);
	font-size: calc(12rem / var(--root-font-size));
	font-weight: var(--regular);
	text-decoration: none;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(130rem / var(--root-font-size));
	height: calc(30rem / var(--root-font-size));
	border-radius: calc(15rem / var(--root-font-size));
}

.view-more::after {
	content: '';
	background-size: calc(12rem / var(--root-font-size));
	background-repeat: no-repeat;
	width: calc(12rem / var(--root-font-size));
	height: calc(13rem / var(--root-font-size));
	margin-left: calc(8rem / var(--root-font-size));
}

/*
	背景グラデーションのview-more
	ホバー時色反転のview-more(invert)は各cssファイルで指定
*/
.gradient {
	background: linear-gradient(90deg, #66a386, #29aae1, #66a386);
	background-size: 200% 100%;
	transition: background-position 0.5s ease;
	color: #fff !important;
}

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

.gradient:hover {
	background-position: -100% 0;
}

/* ニュース関連 */
.news-list {
	width: calc(944rem / var(--root-font-size));
	padding: calc(100rem / var(--root-font-size)) calc(50% - calc(944rem / var(--root-font-size) / 2));
}

.news-list a {
	color: #000;
	text-decoration: none;
}

.news-list .news-icons,
.news-list .news-items {
	width: calc(800rem / var(--root-font-size));
	margin: auto;
}

.news-list .news-icons {
	padding-bottom: calc(30rem / var(--root-font-size));
}

.news-icons {
	display: flex;
	align-items: center;
	gap: calc(20rem / var(--root-font-size));
	padding-left: 0;
}

.news-icons input[type='radio'] {
	display: none;
}

.news-icons label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.news-icon,
.news_category {
	font-family: var(--noto);
	font-size: calc(12rem / var(--root-font-size));
	font-weight: var(--regular);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	width: calc(92rem / var(--root-font-size));
	height: calc(30rem / var(--root-font-size));
	border-radius: calc(15rem / var(--root-font-size));
}

.news-icon:has(input:checked) {
	color: #fff;
}

/* ニュースカテゴリーボタンの色 */
.all {
	box-shadow: inset 0 0 0 calc(1rem / var(--root-font-size)) var(--cat-all);
}

.all:has(input:checked) {
	background-color: var(--cat-all);
}

.news,
.news_category.news_cat_news {
	box-shadow: inset 0 0 0 calc(1rem / var(--root-font-size)) var(--cat-news);
}

.news:has(input:checked) {
	background-color: var(--cat-news);
}

.event,
.news_category.news_cat_event {
	box-shadow: inset 0 0 0 calc(1rem / var(--root-font-size)) var(--cat-event);
}

.event:has(input:checked) {
	background-color: var(--cat-event);
}

.research,
.news_category.news_cat_research {
	box-shadow: inset 0 0 0 calc(1rem / var(--root-font-size)) var(--cat-research);
}

.research:has(input:checked) {
	background-color: var(--cat-research);
}

.lecture,
.news_category.news_cat_lecture {
	box-shadow: inset 0 0 0 calc(1rem / var(--root-font-size)) var(--cat-lecture);
}

.lecture:has(input:checked) {
	background-color: var(--cat-lecture);
}

.offering,
.news_category.news_cat_offering {
	box-shadow: inset 0 0 0 calc(1rem / var(--root-font-size)) var(--cat-offering);
}

.offering:has(input:checked) {
	background-color: var(--cat-offering);
}

/* ニュースカテゴリーボタンの背景色 */
.colored-news,
.news_category.news_cat_news {
	background-color: #d2d8ed;
}

.colored-event,
.news_category.news_cat_event {
	background-color: #00a89c20;
}

.colored-research,
.news_category.news_cat_research {
	background-color: #8f5d2820;
}

.colored-lecture,
.news_category.news_cat_lecture {
	background-color: #9ebf1320;
}

.colored-offering,
.news_category.news_cat_offering {
	background-color: #e1649320;
}

/* ニュース記事一覧 */

/* リスト全体 */
.news-items ul {
	margin: 0;
	padding: 0;
}

.news-items ul li {
	list-style: none;
}

.news-items > ul li:last-child {
	border-bottom: calc(1rem / var(--root-font-size)) solid var(--cat-all);
	margin-bottom: calc(25rem / var(--root-font-size));
}

.news-items > ul li:hover {
	background-color: #ffffef;
}

.news_contents::after {
	content: '';
	background-image: url('/img/common2/icon_arrow.webp');
	background-size: calc(14rem / var(--root-font-size));
	background-repeat: no-repeat;
	width: calc(14rem / var(--root-font-size));
	height: calc(15rem / var(--root-font-size));
	margin-left: calc(50rem / var(--root-font-size));
}

/* 各行レイアウト */

/* .news-item */
.news-items .news_contents {
	display: flex;
	align-items: center;
	height: calc(80rem / var(--root-font-size));
	gap: calc(25rem / var(--root-font-size));
	border-top: calc(1rem / var(--root-font-size)) solid var(--cat-all);
}

span.news_img {
	display: none;
}

/* .news-item */
.news-items .news_date {
	font-family: var(--noto);
	font-size: calc(12rem / var(--root-font-size));
	font-weight: var(--regular);
	padding-left: calc(30rem / var(--root-font-size));
}

/* .news-item .subject */
.news-items .news_title {
	font-family: var(--noto);
	font-size: calc(14rem / var(--root-font-size));
	font-weight: var(--regular);
	width: calc(448rem / var(--root-font-size));
}

/* 外部リンクマーク */
.link::after {
	content: '';
	background-image: url('/img/common2/icon_link.webp');
	background-size: calc(13rem / var(--root-font-size));
	background-repeat: no-repeat;
	display: inline-block;
	width: calc(13rem / var(--root-font-size));
	height: calc(13rem / var(--root-font-size));
	margin-bottom: calc(-1.5rem / var(--root-font-size));
	margin-left: calc(7rem / var(--root-font-size));
	transition: 0.3s;
}

/* Media Queries */
@media screen and (width <= 991px) {
	html {
		zoom: 1;
		/* stylelint-disable-next-line property-no-vendor-prefix */
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}


	/* view-moreボタン */
	.view-more {
		font-size: calc(24rem / var(--root-font-size));
		font-weight: var(--regular);
		width: calc(264rem / var(--root-font-size));
	}

	.view-more::after {
		background-size: calc(24rem / var(--root-font-size));
		width: calc(24rem / var(--root-font-size));
		height: calc(26rem / var(--root-font-size));
		margin-left: calc(16rem / var(--root-font-size));
	}

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

	.gradient::after {
		margin-left: calc(50rem / var(--root-font-size));
	}

	/* ニュースリスト */
	.news-list {
		width: calc(648rem / var(--root-font-size));
		padding: calc(100rem / var(--root-font-size)) calc(50% - calc(648rem / var(--root-font-size) / 2));
	}

	.news-list .news-icons,
	.news-list .news-items {
		width: calc(650rem / var(--root-font-size));
		padding-bottom: calc(50rem / var(--root-font-size));
	}

	.news-list .news-icons {
		flex-wrap: wrap;
		justify-content: center;
	}

	.news-list .news-icon,
	.news-list .news_category {
		font-size: calc(24rem / var(--root-font-size));
		min-width: calc(200rem / var(--root-font-size)) !important;
		height: calc(46rem / var(--root-font-size));
		border-radius: calc(23rem / var(--root-font-size));
	}

	.news_contents {
		flex-wrap: wrap;
		align-content: center;
		height: calc(240rem / var(--root-font-size)) !important;
	}

	.news_contents .news_date {
		font-size: calc(22rem / var(--root-font-size)) !important;
		padding-left: 0;
	}

	.news_contents .news_title {
		font-size: calc(28rem / var(--root-font-size)) !important;
		margin: 0;
		width: calc(530rem / var(--root-font-size));
	}

	.news_contents::after {
		background-size: calc(28rem / var(--root-font-size));
		width: calc(28rem / var(--root-font-size));
		height: calc(30rem / var(--root-font-size));
		margin-top: calc(-60rem / var(--root-font-size));
	}

	/* 外部リンクマーク */
	.link::after {
		background-size: calc(26rem / var(--root-font-size));
		width: calc(26rem / var(--root-font-size));
		height: calc(26rem / var(--root-font-size));
		margin-bottom: calc(-4rem / var(--root-font-size));
		margin-left: calc(10rem / var(--root-font-size));
	}
}