@charset "utf-8";

/* ページトップ */
#awards_page__top {
	width: 100%;
	height: 57vh;
	padding: 5.3vw 0 0;
	background-color: var(--color--bg_gray);
}
	.awards_page__top__inner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}
		.awards_page__top__image {
			width: 40%;
			height: 100%;
			opacity: 1;
			transition: .8s;
		}
		.awards_page__top__image._left {
			transform: translate(-30px,0%);
			transition-delay: .24s;
			margin-right: auto;
		}
		.run .awards_page__top__image._left {
			transform: translate(0%,0%);
		}
		.awards_page__top__image._right {
			transform: translate(30px,0%);
			transition-delay: .44s;
			margin-left: auto;
		}
		.run .awards_page__top__image._right {
			transform: translate(0%,0%);
		}
		.awards_page__top__image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.awards_page__top__heading {
			width: auto;
			height: auto;
		opacity: 1;
		transform: translate(0%,0px);
		transition: .8s;
		transition-delay: .34s;
		text-align: center;
	}
	.awards_page__top__txt {
		font-family: "Noto Serif JP", serif;
		font-size: var(--12px);
		font-weight: 300;
		line-height: 2.2;
		letter-spacing: .08em;
		color: var(--color--black);
		margin-top: 2.4vw;
	}

/* 詳細コンテンツ */
#awards_details {
	width: 100%;
	height: auto;
	padding: 5.625vw 0 7.8125vw;
	background-color: var(--color--white);
}
	.awards_details__inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 78.125%;
		height: auto;
		margin: 0 auto;
		gap: 5.46875vw;
		opacity: 1;
		transform: translate(0%,30px);
		transition: .8s;
		transition-delay: .24s;
	}
	.run .awards_details__inner {
		opacity: 1;
		transform: translate(0%,0%);
	}
		/* スライドショーエリア */
		.awards_details__slideshow {
			width: 50%;
			height: auto;
			opacity: 0;
			transform: translate(0%, 30px);
			transition: opacity .8s, transform .8s;
			transition-delay: .24s;
			position: relative;
		}
		.run.awards_details__slideshow {
			opacity: 1;
			transform: translate(0%, 0%);
		}
			/* メダル */
			.awards_details__medal {
				position: absolute;
				top: -5%;
				left: -5%;
				width: 20%;
				height: auto;
				aspect-ratio: 1 / 1;
				z-index: 10;
			}
			.awards_details__medal img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				display: block;
			}
			.awards-details-swiper {
				width: 100%;
				height: auto;
				aspect-ratio: 4 / 3;
				margin-bottom: 0.3vw;
			}
			.awards-details-swiper .swiper-slide {
				width: 100%;
				height: 100%;
			}
			.awards-details-swiper .swiper-slide img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.awards_details__no_image {
				width: 100%;
				height: auto;
				aspect-ratio: 4 / 3;
				background-color: var(--color--bg_gray);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.awards_details__no_image img {
				width: 50%;
				height: auto;
				opacity: 0.5;
			}
			/* サムネイルカルーセル */
			.awards_details__thumbs {
				width: 100%;
				height: auto;
				overflow: hidden;
			}
			.awards-details-thumbs-swiper {
				width: 100%;
				height: auto;
				overflow: visible;
			}
			.awards-details-thumbs-swiper .swiper-wrapper {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: end;
				-webkit-justify-content: flex-end;
				justify-content: flex-end;
				-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}
			.awards-details-thumbs-swiper .swiper-slide {
				width: auto !important;
				min-width: 0;
				height: 3.90625vw;
				cursor: pointer;
				opacity: 0.5;
				transition: opacity 0.3s;
				margin-left: 5px;
				-webkit-flex-shrink: 0;
				flex-shrink: 0;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}
			.awards-details-thumbs-swiper .swiper-slide:first-child {
				margin-left: 0;
			}
			.awards-details-thumbs-swiper .swiper-slide-thumb-active {
				opacity: 1;
			}
			.awards-details-thumbs-swiper .swiper-slide img {
				width: auto;
				max-width: none;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		/* コンテンツエリア */
		.awards_details__content {
			width: 50%;
			height: auto;
			padding-top: 1.5625vw;
		}
		.awards_details__title {
			font-family: "Noto Serif JP", serif;
			font-size: var(--26px);
			font-weight: 600;
			line-height: 1.6;
				letter-spacing: .08em;
				margin-bottom: 1.5625vw;
				opacity: 0;
				transform: translate(0%, 30px);
				transition: opacity .8s, transform .8s;
				transition-delay: .34s;
			}
			.run.awards_details__title {
				opacity: 1;
				transform: translate(0%, 0%);
			}
			.awards_details__project {
				font-size: var(--18px);
				font-weight: 400;
				line-height: 1.8;
				letter-spacing: .08em;
				color: var(--color--black);
				margin-bottom: 1.5625vw;
				opacity: 0;
				transform: translate(0%, 30px);
				transition: opacity .8s, transform .8s;
				transition-delay: .44s;
			}
			.run.awards_details__project {
				opacity: 1;
				transform: translate(0%, 0%);
			}
		.awards_details__comment {
			font-family: "Noto Serif JP", serif;
			font-size: var(--14px);
			font-weight: 300;
			line-height: 2.2;
			letter-spacing: .08em;
			color: var(--color--black);
		}
		/* 投稿本文コンテンツ */
		.awards_details__article_content {
			font-family: "Noto Serif JP", serif;
			font-size: var(--16px);
			font-weight: 400;
			line-height: 2;
			letter-spacing: 0.06em;
			color: var(--color--black);
			margin-top: 2.34375vw;
			opacity: 0;
			transform: translate(0%, 30px);
			transition: opacity .8s, transform .8s;
			transition-delay: .54s;
		}
		.run.awards_details__article_content {
			opacity: 1;
			transform: translate(0%, 0%);
		}
		.awards_details__article_content p {
			margin-bottom: 1.25vw;
		}
		.awards_details__article_content p:last-child {
			margin-bottom: 0;
		}
		.awards_details__article_content h2,
		.awards_details__article_content h3,
		.awards_details__article_content h4 {
			margin-top: 2.5vw;
			margin-bottom: 1.25vw;
			font-weight: 500;
			line-height: 1.6;
		}
		.awards_details__article_content h2 {
			font-size: var(--28px);
		}
		.awards_details__article_content h3 {
			font-size: var(--24px);
		}
		.awards_details__article_content h4 {
			font-size: var(--20px);
		}
		.awards_details__article_content ul,
		.awards_details__article_content ol {
			margin-left: 1.25vw;
			margin-bottom: 1.25vw;
		}
		.awards_details__article_content li {
			margin-bottom: 0.625vw;
		}
		.awards_details__article_content a {
			color: var(--color--black);
			text-decoration: underline;
			transition: 0.3s;
		}
		@media (any-hover: hover) {
			.awards_details__article_content a:hover {
				opacity: 0.7;
			}
		}
		.awards_details__article_content img {
			max-width: 100%;
			height: auto;
			margin: 1.66667vw 0;
		}
		.awards_details__article_content .wp-block-paragraph {
			margin-bottom: 1.25vw;
		}
		.awards_details__article_content .wp-block-heading {
			margin-top: 2.5vw;
			margin-bottom: 1.25vw;
			font-weight: 500;
			line-height: 1.6;
		}
		.awards_details__article_content .wp-block-image {
			margin: 1.66667vw 0;
		}
		.awards_details__article_content .wp-block-image img {
			max-width: 100%;
			height: auto;
			display: block;
		}
		.awards_details__article_content .wp-block-image.aligncenter {
			text-align: center;
		}
		.awards_details__article_content .wp-block-image.alignleft {
			float: left;
			margin-right: 1.25vw;
			margin-bottom: 1.25vw;
		}
		.awards_details__article_content .wp-block-image.alignright {
			float: right;
			margin-left: 1.25vw;
			margin-bottom: 1.25vw;
		}
		.awards_details__article_content .wp-block-image figcaption {
			font-size: var(--14px);
			color: var(--color--light_gray);
			text-align: center;
			margin-top: 0.41667vw;
		}
		.awards_details__article_content .wp-block-list {
			margin-left: 1.25vw;
			margin-bottom: 1.25vw;
		}
		.awards_details__article_content .wp-block-list li {
			margin-bottom: 0.625vw;
		}
		.awards_details__article_content .wp-block-quote {
			border-left: 4px solid var(--color--light_gray);
			padding-left: 1.25vw;
			margin: 1.66667vw 0;
			font-style: italic;
		}
		.awards_details__article_content .wp-block-quote p {
			margin-bottom: 0.625vw;
		}
		.awards_details__article_content .wp-block-quote cite {
			font-size: var(--14px);
			color: var(--color--light_gray);
			font-style: normal;
		}
		.awards_details__article_content .wp-block-code {
			background-color: #f5f5f5;
			padding: 0.83333vw;
			border-radius: 4px;
			margin: 1.25vw 0;
			overflow-x: auto;
		}
		.awards_details__article_content .wp-block-code code {
			font-family: 'Courier New', Courier, monospace;
			font-size: var(--14px);
		}

/* ページネーション */
.awards_details__pagination {
	width: 100%;
	height: auto;
	padding: 5.46875vw 0 0;
	border-top: 1px solid var(--color--light_gray);
	margin-top: 7.8125vw;
}
	.awards_details__pagination__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 78.125%;
		height: auto;
		margin: 0 auto;
	}
		.awards_details__pagination__prev,
		.awards_details__pagination__next {
			width: 30%;
		}
		.awards_details__pagination__back {
			width: 30%;
			display: flex;
			justify-content: center;
		}
		.awards_details__pagination__link {
			display: flex;
			align-items: center;
			gap: 0.78125vw;
			font-family: "Noto Serif JP", serif;
			font-size: var(--14px);
			color: var(--color--black);
			transition: .3s;
		}
		@media (any-hover: hover) {
			.awards_details__pagination__link:hover {
				opacity: 0.7;
			}
		}
		.awards_details__pagination__link._back {
			padding: 0.78125vw 1.5625vw;
			border: 1px solid var(--color--black);
			justify-content: center;
		}
		.awards_details__pagination__arrow {
			width: 1.5625vw;
			height: auto;
		}
		.awards_details__pagination__arrow svg {
			width: 100%;
			height: 100%;
		}
		.awards_details__pagination__next .awards_details__pagination__link {
			justify-content: flex-end;
		}

/* スマホ対応 */
@media all and (max-width: 768px) {
	#awards_page__top {
		height: 36vh;
		/* iOS Safari/Chrome対応: ヘッダー分 + セーフエリアを考慮 */
		padding-top: 56px;
		padding-top: calc(56px + env(safe-area-inset-top, 0px));
		padding-top: calc(56px + constant(safe-area-inset-top, 0px)); /* iOS 11.0-11.2 */
		box-sizing: border-box;
	}
	.awards_page__top__inner {
		width: 100%;
		height: 100%;
	}
		.awards_page__top__image {
			width: 20%;
			height: 100%;
			overflow: hidden;
		}
		.awards_page__top__image._left {
			margin-right: 0;
			transform: none;
		}
		.awards_page__top__image._left img {
			width: auto;
			height: 100%;
			max-width: none;
			object-fit: cover;
			object-position: right center;
		}
		.awards_page__top__image._right {
			margin-left: 0;
			transform: none;
		}
		.awards_page__top__image._right img {
			width: auto;
			height: 100%;
			max-width: none;
			object-fit: cover;
			object-position: left center;
		}
		.awards_page__top__heading {
			width: 60%;
			text-align: center;
		}
		.awards_page__top__txt {
			text-align: center;
		}	#awards_details {
		padding: 13.333333vw 0 36vw;
	}
		.awards_details__inner {
			display: block;
			width: 84%;
			gap: 0;
		}
			.awards_details__slideshow {
				width: 100%;
				margin-bottom: 6.4vw;
			}
				.awards-details-swiper {
					aspect-ratio: 4 / 3;
					margin-bottom: 2.666667vw;
				}
				.awards_details__no_image {
					aspect-ratio: 4 / 3;
				}
				.awards-details-thumbs-swiper .swiper-slide {
					height: 8vw;
					width: auto !important;
					min-width: 0;
					-webkit-flex-shrink: 0;
					flex-shrink: 0;
				}
			.awards_details__content {
				width: 100%;
				padding-top: 0;
			}
				.awards_details__title {
					font-size: var(--20px);
					margin-bottom: 2.666667vw;
				}
				.awards_details__project {
					font-size: var(--16px);
					margin-bottom: 2.666667vw;
				}
				.awards_details__comment {
					font-size: var(--13px);
				}
				.awards_details__article_content {
					font-size: var(--12px);
					margin-top: 4vw;
				}
				.awards_details__article_content p {
					margin-bottom: 3.2vw;
				}
				.awards_details__article_content h2,
				.awards_details__article_content h3,
				.awards_details__article_content h4 {
					margin-top: 6.4vw;
					margin-bottom: 3.2vw;
				}
				.awards_details__article_content h2 {
					font-size: var(--22px);
				}
				.awards_details__article_content h3 {
					font-size: var(--20px);
				}
				.awards_details__article_content h4 {
					font-size: var(--18px);
				}
				.awards_details__article_content ul,
				.awards_details__article_content ol {
					margin-left: 3.2vw;
					margin-bottom: 3.2vw;
				}
				.awards_details__article_content li {
					margin-bottom: 1.6vw;
				}
				.awards_details__article_content img {
					margin: 4.266667vw 0;
				}
				.awards_details__article_content .wp-block-image.alignleft {
					margin-right: 3.2vw;
					margin-bottom: 3.2vw;
				}
				.awards_details__article_content .wp-block-image.alignright {
					margin-left: 3.2vw;
					margin-bottom: 3.2vw;
				}

	.awards_details__pagination {
		padding: 10.666667vw 0 0;
		margin-top: 13.333333vw;
	}
		.awards_details__pagination__inner {
			display: block;
			width: 80%;
		}
			.awards_details__pagination__prev,
			.awards_details__pagination__next,
			.awards_details__pagination__back {
				width: 100%;
				margin-bottom: 5.333333vw;
			}
			.awards_details__pagination__prev:last-child,
			.awards_details__pagination__next:last-child,
			.awards_details__pagination__back:last-child {
				margin-bottom: 0;
			}
			.awards_details__pagination__link {
				gap: 1.333333vw;
				font-size: var(--13px);
				justify-content: center;
			}
			.awards_details__pagination__link._back {
				padding: 2.666667vw 4vw;
			}
			.awards_details__pagination__arrow {
				width: 2.666667vw;
			}
}