@charset "utf-8";
/* /engineering/about/special/sdgs/research/
indexの工学で挑むSDGsの表示を作り直し  */
.p-message-link {
	padding-top: 50px;
}
.p-message-link__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 横2列 */
	justify-items: center;
	align-items: center;
	gap: 0 30px;
	grid-template-areas:
	"li15 li16"
	"li13 li14"
	"li11 li12"
	"li09 li10"
	"title title"
	"li07 li08"
	"li06 li05"
	"li03 li04"
	"li01 li02";

	/* タブレットサイズは横3列 */
	@media (min-width: 640px) {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		grid-template-areas:
		"li14 li15 li16"
		"li11 li12 li13"
		"li08 li09 li10 "
		"li06 title li07"
		"li03 li04 li05 "
		"li01 li02 .";
	}
	/* PCサイズは横4列 */
	@media (min-width: 1025px) {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		grid-template-areas:
		"li14 li15 li15 li16"
		"li10 li11 li12 li13"
		"li08 title title li09"
		"li04 li05 li06 li07"
		"li01 li02 li02 li03";
	}
	list-style: none;
	padding: 0;
	margin: 0;

	.p-message-link__title { grid-area: title; }
	.li16 { grid-area: li16; }
	.li15 { grid-area: li15; }
	.li14 { grid-area: li14; }
	.li13 { grid-area: li13; }
	.li12 { grid-area: li12; }
	.li11 { grid-area: li11; }
	.li10 { grid-area: li10; }
	.li09 { grid-area: li09; }
	.li08 { grid-area: li08; }
	.li07 { grid-area: li07; }
	.li06 { grid-area: li06; }
	.li05 { grid-area: li05; }
	.li04 { grid-area: li04; }
	.li03 { grid-area: li03; }
	.li02 { grid-area: li02; }
	.li01 { grid-area: li01; }
}
.p-message-link__grid li:not(.p-message-link__title) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	&.new {
		position: relative;
		&:before {
			content:"NEW";
			background-color: rgba(145,13,20,.8);
			border-radius:50%;
			padding: 5px;
			color: white;
			position: absolute;
			top:25%;
			right: 5%;
			z-index:2;
			font-size: 80%;
			aspect-ratio: 1/1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		img {
			height: initial;
			min-height: initial;
			max-height: initial;
			width: initial;
			max-width: 100%;
			min-width: initial;
			aspect-ratio: 100/95;
			object-fit: cover;
			object-position: top;
		}
	}
}

/* タイトル画像は横２枠分  */
.p-message-link__title {
	grid-column: 1 / -1;
	grid-row: 5;
	@media (min-width: 640px) {
		grid-column: 2;
		grid-row: 3;
	}
	@media (min-width: 1025px) {
		grid-column: 2 / 4;
		grid-row: 3;
	}
	a {
		img {
			object-fit: contain;
			aspect-ratio: initial;
			@media (min-width: 1025px) {
				width: 85%;
				margin: auto;
			}
		}
	}
}

.p-message-link__grid li {
	a {
		opacity:.8;
		&:hover{
			opacity: 1;
		}
	}
}

@media (min-width: 1025px) {
	.p-message-link__grid li {
		position: relative;
		z-index:1;
		&.row2 {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			a {
				transform: translateX(50%);
			}
			&:before {
				right: 28%!important;
			}
		}
		&.li12 {
			transform: translateX(5%);
		}
		/* 以下は１行3列なので左右の位置を調整する */
		&.li01, 
		&.li14 {
			position: relative;
			z-index:2;
			transform: translateX(40%);
		}
		&.li03, 
		&.li16 {
			position: relative;
			z-index:2;
			transform: translateX(-40%);
		}
	}
}


/* 詳細ページ用  */
body {
	/* 共用ナビ  */
	.p-mess-nav {
		.swiper-slide {
			a {
				opacity: 0.5;
				transition: opacity 1s ease;
				&:hover {
					opacity: 1;
				}
				img {
					-webkit-user-drag: none;
					user-select: none;
					-webkit-user-select: none;
					pointer-events: none;
				}
			}
			&.is-current a {
				opacity: 1;
			}
		}
	}
	picture,img {
		user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
	}
	/* Vol.14  */
	&.mess14 {
		--main-color: #4c8a3e;
	}
	/* Vol.15  */
	&.mess15 {
		--main-color: #b0436f;
	}
	/* Vol.16  */
	&.mess16 {
		--main-color: #b79200;
	}
}

/* Vol.14 以降の詳細ページ共用部  */
/* 大見出し部分  */
body {
	&.mess14, &.mess15 , &.mess16 {
		.p-hero--wrapper {
			@media (max-width: 640px) {
				margin-bottom:0;
			}
			.p-hero--new__circle {
				background-color: var(--main-color);
			}
			.p-hero--new {
				@media (min-width: 1025px) {
					max-width: 1148px;
					grid-template-columns: 56% 44%;
				}

				@media (max-width: 1024px) {
					grid-template-columns: 50% 50%;
				}

				@media (max-width: 640px) {
					grid-template-columns: 100%;
				}
				.p-hero--new__title {
					@media (max-width: 640px) {
						margin-bottom: 110px;
					}
				}
				.p-hero--new__text {
					color: white;
					font-size: 1.8em;
				}
				.p-hero--new__photo {
					@media (min-width: 1025px) {
						picture, img {
							width: 100%;
						}
					}

					@media (max-width: 1024px) {
						padding-right: 40px;
					}

					@media (max-width: 640px) {
						padding-right: 0;
						width: 85%;
						margin: 0 auto;
					}
				}
				.p-hero--new__circle {
					@media (max-width: 640px) {
						top: -100vw;
					}
				}
			}
		}

		/* コンテンツ部分  */
		.l-contents {
			/* テキスト部分  */
			.p-mess-box {
				background-color: white;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				padding:0;
				h2 {
					min-height: initial;
					color: var(--main-color);
					position: relative;
					display: flex;
					align-items: center;
					gap: 20px;
					margin-bottom: 30px;
					&:before {
						content: "";
						width: 50px;
						height: 100px;
						background-color: var(--main-color);
						border-radius: 0 100px 100px 0;
					}
				}
			}
			/* 写真部分  */
			.p-mess-photo {
				padding-bottom: 50px;
				img {
					margin-bottom: 10px;
				}
			}

			.c-card-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 30px;
				margin-bottom: 50px;
				@media (max-width: 768px) {
					grid-template-columns: 1fr;
				}
				.c-card {
					margin: 0;
					display: grid;
					grid-template-rows: subgrid;
					grid-row: span 2;
					gap: 10px;

					.c-card__img-wrapper {
						width: 100%;
						overflow: hidden;
						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							display: block;
						}
					}
				}
			}
		}
	}
	&.mess15 {
		.p-hero--new {
			.p-hero--new__title {
				h2 {
					@media (max-width: 640px) {
						font-size: 180%;
					}
				}
				.p-hero--new__text {
					@media (max-width: 640px) {
						font-size: 150%;
					}
				}
			}
		}
	}
	&.mess16 {
		--main-color: #b79200;
		.p-hero--new {
			.p-hero--new__title {
				h2 {
					font-size: 180%;
					@media (min-width: 1025px) {
						font-size: 240%;
					}
					@media (max-width: 640px) {
						br:nth-of-type(2){
							/*display: none;*/
						}
					}
				}
			}
		}
		.p-hero--new__photo {
			@media (min-width: 1025px) {
				width: 100%;
			}
		}
	}
}