:root {
	--C00: #006daf; /* すべて */
	--C01: #00a88b; /* 所員の研究 */
	--C02: #41843b; /* 所員の発言 */
	--C03: #89c370; /* 所員の新著 */
	--C04: #b6cc2c; /* Podcast */
	--C05: #2bbbc7; /* 刊行物など */
	--C06: #00a2e3; /* イベント */
	--C07: #7b9ad0; /* SSJDA */
	--C08: #6c5eb1; /* 調査研究 */
	--C09: #e9a224; /* プレスリリース */
	--C10: #e96fa2; /* 受賞 */
	--C11: #cc4e41; /* 公募情報 */
	--C12: #004071; /* お知らせ */
	--C13: #A84A00; /* インタビュー */
	--C14: #009fb4; /*社研セミナー/シンポジウム */
	--C15: #15AD4F; /*所員の活動 */
}
.cms_metadata {
	line-height: 1;
	.date {
		font-size: 16px;
	}
	.category {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: max-content;
		height: 23px;
		padding-inline: 20px;
		padding-bottom: 1px;
		border-radius: 12px;
		font-size: 12px;
		font-weight: var(--bold);
		color: #fff;
		background: #777;
		&.C00 { background: var(--C00); }
		&.research { background: var(--C01); }
		&.media { background: var(--C02); }
		&.books { background: var(--C03); }
		&.podcast { background: var(--C04); }
		&.publications { background: var(--C05); }
		&.events { background: var(--C06); }
		&.event-ss { background: var(--C14); }
		&.seminar { background: var(--C14); }
		&.symposium { background: var(--C14); }
		&.ssjda { background: var(--C07); }
		&.surveys { background: var(--C08); }
		&.press { background: var(--C09); }
		&.awards { background: var(--C10); }
		&.jobs { background: var(--C11); }
		&.notice { background: var(--C12); }
		&.interview { background: var(--C13); }
		&.activities { background: var(--C15); }
	}
}



/* ============================================================
common
============================================================ */

/* .search_filter 
-------------------------------------------------------------*/

.search_filter {
	background: #f4fbff;
	border-radius: 30px;
	margin-bottom: 56px;
	padding: 40px 32px 40px 40px;
	color: var(--blue);
	font-family: sans-serif;
	box-sizing: border-box;
	& > div {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 28px;
		.filter_label {
			width: auto;
			font-size: 16px;
			font-weight: normal;
			white-space: nowrap;
			margin-right: 32px;
			line-height: 1.6;
		}
		.filter_content {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			min-width: 0;
		}
	}
	.year,
	.category {
		align-items: center;
	}
	.row_tag {
		align-items: flex-start;
	}
	.year {
		select {
			width: 320px;
			max-width: 100%;
			height: 40px;
			padding: 0 15px;
			border: 1px solid #70aacf;
			border-radius: 4px;
			color: #666;
			font-size: 16px;
			background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23006daf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 15px center;
			appearance: none;
			cursor: pointer;
		}
	}
	.category {
		.cat_list {
			flex: 1;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 12px;
			button,a {
				width: 100%;
				box-sizing: border-box;
				height: 40px;
				background: #fff;
				border: 2px solid #ccc;
				border-radius: 20px;
				font-size: 12px;
				line-height: 1.1;
				font-weight: var(--bold);
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
				transition: 0.2s;
				box-sizing: border-box;
				&.C00 { border-color: var(--C00); color: var(--C00); &.selected { background-color: var(--C00); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C00); color: #fff; } } }
				&.research { border-color: var(--C01); color: var(--C01); &.selected { background-color: var(--C01); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C01); color: #fff; } } }
				&.media { border-color: var(--C02); color: var(--C02); &.selected { background-color: var(--C02); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C02); color: #fff; } } }
				&.books { border-color: var(--C03); color: var(--C03); &.selected { background-color: var(--C03); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C03); color: #fff; } } }
				&.podcast { border-color: var(--C04); color: var(--C04); &.selected { background-color: var(--C04); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C04); color: #fff; } } }
				&.publications { border-color: var(--C05); color: var(--C05); &.selected { background-color: var(--C05); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C05); color: #fff; } } }
				&.events { border-color: var(--C06); color: var(--C06); &.selected { background-color: var(--C06); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C06); color: #fff; } } }
				&.ssjda { border-color: var(--C07); color: var(--C07); &.selected { background-color: var(--C07); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C07); color: #fff; } } }
				&.surveys { border-color: var(--C08); color: var(--C08); &.selected { background-color: var(--C08); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C08); color: #fff; } } }
				&.press { border-color: var(--C09); color: var(--C09); &.selected { background-color: var(--C09); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C09); color: #fff; } } }
				&.awards { border-color: var(--C10); color: var(--C10); &.selected { background-color: var(--C10); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C10); color: #fff; } } }
				&.jobs { border-color: var(--C11); color: var(--C11); &.selected { background-color: var(--C11); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C11); color: #fff; } } }
				&.notice { border-color: var(--C12); color: var(--C12); &.selected { background-color: var(--C12); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C12); color: #fff; } } }
				&.interview { border-color: var(--C13); color: var(--C13); &.selected { background-color: var(--C13); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C13); color: #fff; } } }
				&.event-ss { border-color: var(--C14); color: var(--C14);  &.selected { background-color: var(--C14); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C14); color: #fff; } } }
				&.activities { border-color: var(--C15); color: var(--C15);  &.selected { background-color: var(--C15); color: #fff; } @media (hover: hover) { &:hover { background-color: var(--C15); color: #fff; } } }
			}
			}
			@media (width <= 1140px) {
				grid-template-columns: repeat(4, 1fr);
			}
			@media (width <= 1000px) {
				grid-template-columns: repeat(3, 1fr);
			}
		}
	}
	.row_tag {
		margin-bottom: 0;
		.tag_list {
			display: flex;
			flex-wrap: wrap;
			gap: 12px 16px;
			width: 100%;
			li {
				button,a {
					color: var(--blue);
					font-weight: var(--bold);
					font-size: 16px;
					text-decoration: underline;
					text-decoration-thickness: 1px;
					text-underline-offset: 0.1em;
					line-height: 1.6;
					@media (hover: hover) {
						&:hover {
							opacity: 0.6;
						}
					}
				}
			}
		}
		&:not(.is-expanded) {
			.tag_list li:nth-child(n+7) {
				display: none;
			}
		}
		.tag_ctrl {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-top: 25px;
			button,a {
				background: none;
				border: none;
				padding: 0;
				cursor: pointer;
				color: var(--blue);
				font-weight: var(--bold);
				font-size: 16px;
				transition: 0.2s;
				span {
					display: flex;
					align-items: center;
					&::after {
						content: '';
						display: inline-block;
						width: 10px;
						height: 10px;
						border-right: 2.5px solid #1465a5;
						border-bottom: 2.5px solid #1465a5;
						transform: rotate(45deg);
						margin-left: 12px;
						margin-bottom: 5px;
						transition: transform 0.3s;
					}
				}
				@media (hover: hover) {
					&:hover {
						opacity: 0.6;
					}
				}
			}
		}
		&.is-expanded {
			.tag_ctrl a span::after,
			.tag_ctrl button span::after {
				transform: rotate(-135deg);
				margin-bottom: -2px;
			}
		}
	}
}

/* .pagination 
-------------------------------------------------------------*/

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin: 0 auto;
	.btn_prev,
	.btn_next {
		display: block;
		width: 48px;
		height: 48px;
		border: 2px solid #1465a5;
		border-radius: 50%;
		position: relative;
		cursor: pointer;
		transition: 0.2s;
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 14px;
			height: 14px;
			border-top: 2px solid #1465a5;
			border-left: 2px solid #1465a5;
			transition: 0.2s;
		}
		@media (hover: hover) {
			&:hover {
				background: #1465a5;
				&::before {
					border-color: #fff;
				}
			}
		}
	}
	.btn_prev::before {
		transform: translate(-30%, -50%) rotate(-45deg);
	}
	.btn_next::before {
		transform: translate(-70%, -50%) rotate(135deg);
	}
	ul {
		display: flex;
		align-items: center;
		gap: 30px;
		list-style: none;
		padding: 0;
		margin: 0;
		li {
			button {
				background: none;
				border: none;
				width: 34px;
				height: 34px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1465a5;
				font-size: 16px;
				font-weight: var(--medium);
				cursor: pointer;
				border-radius: 50%;
				padding: 0;
				transition: 0.2s;
				&.selected {
					background: #1465a5;
					color: #fff;
				}
				@media (hover: hover) {
					&:hover:not(.selected) {
						background: #f0f7ff;
					}
				}
			}
			&:empty::before {
				content: '...';
				color: #1465a5;
				font-weight: var(--bold);
				letter-spacing: 0.1em;
				margin: 0 5px;
			}
		}
	}
}

/* .article_list 
-------------------------------------------------------------*/

.article_list {
	margin: 40px auto 60px;
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 60px 20px;
		list-style: none;
		padding: 0;
		margin: 0;
		li {
			width: calc((100% - 40px) / 3);
			transition: opacity 0.1s ease-in;
			
			@media (width <= 1100px) {
				width: calc((100% - 20px) / 2);
			}

			@media (hover: hover) {
				figure, .cms_metadata, dt a {
					transition: opacity 0.1s ease-in;
				}
				&:hover {
					figure, .cms_metadata, dt a {
						opacity: 0.6;
					}
				}
			}

			dl {
				display: flex;
				flex-direction: column;
				margin: 0;
				.img {
					order: 1;
					margin: 0 0 16px;
					figure {
						margin: 0;
						background: #f1f1f1;
						aspect-ratio: 16 / 9;
						overflow: hidden;
						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
				.cms_metadata {
					order: 2;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;
				}
				dt {
					order: 3;
					font-size: 16px;
					font-weight: var(--bold);
					line-height: 1.5;
					a {
						display: inline-block;
						opacity: 1;
					}
					button {
						display: block;
						margin-top: 6px;
						padding: 0;
						background: none;
						border: none;
						color: var(--blue);
						font-size: 14px;
						font-weight: var(--bold);
						text-decoration: underline;
						cursor: pointer;
						text-align: left;
						@media (hover: hover) {
							transition: opacity 0.1s ease-in;
							&:hover {
								opacity: 0.6;
							}
						}
					}
				}
			}
		}
	}
}

/* .cms_body
-------------------------------------------------------------*/

.cms_body {

	.cms_metadata {
		margin-bottom: 44px;
		span.date {
			margin-right: 32px;
		}
	}

	.cms_h2_title {
		margin-bottom: 40px;
		h2 {
			margin-bottom: 20px;
			font-weight: var(--bold);
			font-size: 20px;
			line-height: 1.4;
		}
		ul.cms_tag_area {
			display: flex;
			flex-wrap: wrap;
			gap: 6px 20px;
			line-height: 1.4;
			a {
				color: var(--blue);
				font-weight: var(--bold);
				font-size: 16px;
				text-decoration: underline;
				text-decoration-thickness: 1px;
				text-underline-offset: 0.1em;
			}
		}
	}

	.cms_article {
		padding-left: 20px;
		h3,
		.ttl_h3 {
			margin: 40px 0 1.2em;
			margin: 40px 0 0.5em;
			line-height: 1.4;
			font-weight: var(--bold);
			font-size:1.4rem;
		}
		h4,
		.ttl_h4 {
			gap: 8px;
			margin: 25px 0 .8em;
			padding-bottom: 10px;
			border-bottom: 1px solid #ddd;
			line-height: 1.4;
			font-weight: var(--bold);
			font-size:1.2rem;
			color: var(--blue);
		}
		h5,
		.ttl_h5 {
			margin: 24px 0 38px;
			color: var(--blue);
			font-weight: bold;
			font-size:1.1rem;
		}
		h6,
		.ttl_h6 {
			margin: 24px 0 38px;
			color: var(--blue);
			font-weight: normal;
			font-size:1rem;
		}
		p{
			margin: 0 0 38px;
			line-height: 1.75;
			font-size:1rem;
			font-weight: 400;
		}
		p.text {
			margin: 0 0 38px;
			line-height: 1.75;
			font-weight: var(--bold);
			&.indent {
				text-indent: 1em;
			}
		}
		b,strong{
			font-weight: var(--bold);
		}
		em{
			font-style: italic;
		}
		blockquote{
			background-color: #f5f5f5;
			padding: 20px 20px 1px;
			*{
				margin: 0 0 20px !important;
			}
		}
		ul{
			list-style-type: disc;
			margin-left: 1.5em;
			li{
				list-style-type: disc;
				font-size:1rem;
				font-weight: 400;
				margin-bottom: 16px;
			}
		}
		ul.no_disc{
			list-style-type: none;
			margin-left: 0;
			li{
				list-style-type: none;
				font-size:1rem;
				font-weight: 400;
				margin-bottom: 16px;
			}
		}
		ol{
			list-style-type: decimal;
			margin-left: 1.5em;
			li{
				list-style-type: decimal;
				font-size:1rem;
				font-weight: 400;
				margin-bottom: 16px;
			}
		}
		ul.no_decimal{
			list-style-type: none;
			margin-left: 0;
			li{
				list-style-type: none;
				font-size:1rem;
				font-weight: 400;
				margin-bottom: 16px;
			}
		}
		table {
			line-height: 1.75;
			font-size:1rem;
			&+p {
				margin-top: 1.8em;
			}
		}
		th {
			position: relative;
			padding-right: 1em;
			white-space: nowrap;
			text-align: left;
			&::after {
				content: '：';
				position: absolute;
				top: 0;
				right: 0;
			}
		}
		table.type1 {
			margin: 0 0 38px;
			line-height: 1.75;
			font-weight: var(--bold);
			th {
				position: relative;
				padding-right: 1em;
				text-align: left;
				white-space: nowrap;
				text-align-last:justify;
				span {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
		dl.type1 {
			margin: 0 0 38px;
			line-height: 1.75;
			font-weight: var(--bold);
		}
		figure.type1 {
			margin: 55px auto 55px;
			width: min(100%,466px);
		}
		a {
			color: var(--blue);
			text-decoration: underline;
			text-underline-offset: 0.2em;
			text-decoration-thickness: 1px;
		}
		.img{
			margin: 1.6em 0 2em;
			img{
				display: block;
				width: max-content;
				max-width:100%;
				margin-inline: auto;
			}
		}
		line-height: 1.75;
		p.center {
			text-align: center;
			margin: 32px auto 24px;
		}
		p + h3 {
			margin-top: 80px;
		}
		ul.index {
			margin-bottom: 32px;
		}

		ul.program {
			> li {
			margin-bottom: 32px;
			}

			p {
				margin-bottom: 0;
			}
			dl.related {
				margin-top: 16px;
			}
		}
		table.program {
			margin-top: 48px;
			th {
				position: relative;
				padding-right: 1em;
				white-space: nowrap;
				text-align: left;
				font-weight: var(--regular);
				&::before {
					content: '■ ';
				}
				&::after {
					content: '：';
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}

	.cms_back {
		margin-top: 2em;
		ul {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 30px;
	flex-wrap: wrap;
		}
	}

}

/* ============================================================
SP
============================================================ */

/* .search_filter 
-------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	.search_filter {
		padding: 30px 20px;
		border-radius: 20px;
		& > div {
			flex-direction: column;
			align-items: flex-start;
			margin-bottom: 30px;
			.filter_label {
				margin-right: 0;
				margin-bottom: 12px;
				line-height: 1.6;
			}
			.filter_content {
				width: 100%;
			}
		}
		.year,
		.category {
			align-items: flex-start;
			.filter_label {
				line-height: 1.6;
			}
		}
		.year {
			select {
				width: 100%;
			}
		}
		.category {
			.filter_content {
				display: block;
			}
			.btn_all {
				margin-bottom: 15px;
			}
			.cat_list {
				padding-left: 0;
				padding-top: 0;
				border-left: none;
				width: 100%;
				flex-wrap: wrap;
				gap: 8px 4px;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				button {
					margin-right: 0;
					@media (width <= 520px) {
						font-size: 10px;
					}
				}
			}
		}
		.row_tag {
			.tag_list {
				gap: 15px 12px;
				li button {
					font-size: 15px;
				}
			}
			.tag_ctrl {
				margin-top: 20px;
			}
		}
	}

	.pagination {
		gap: 15px;
		.btn_prev,
		.btn_next {
			flex-shrink: 0;
			width: 30px;
			height: 30px;
			&::before {
				width: 6px;
				height: 6px;
			}
		}
		ul {
			gap: 10px;
			li {
				button {
					width: 30px;
					height: 30px;
					font-size: 12px;
				}
				&:empty::before {
					margin: 0 2px;
				}
			}
		}
	}

	.article_list {
		ul {
			gap: 40px 0;
			li {
				width: 100%;
			}
		}
	}


	.cms_body {
		.cms_article {
			padding-left: 0;
		}
	}

	.cms_back {
		ul {
			flex-direction: column;
			gap: 0;
		}
	}



}/* end @media (SP) */