@charset "UTF-8";
/* -----------------------------------------------------------
	.p-news
	記事一覧ページ(index)
----------------------------------------------------------- */
.p-news {
	margin-top: 120px;
	@media (max-width: 767px) {
		margin-top: 64px;
	}
	.p-news__list {
		border-top: 1px solid var(--color-border);
		.p-news__item {
			border-bottom: 1px solid var(--color-border);
			a {
				padding: 40px 0;
				display: grid;
				grid-template-columns: auto 140px 1fr 24px;
				grid-template-rows: 1fr;
				align-items: center;
				gap:40px;
				position: relative;
				@media (min-width: 768px) and (max-width: 1024px) {
					gap:24px;
				}
				@media (max-width: 767px) {
					padding: 32px 0;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap:12px 16px;
				}
				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 0;
					height: 1px;
					background-color: var(--color-blue);
					transition: 0.3s;
				}
				.date {
					padding-left: 24px;
					font-family: var(--font-sans);
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0.06em;
					@media (max-width: 767px) {
						padding-left: 0;
					}
				}
				.category {
					background-color: var(--color-blue);
					color: #fff;
					border-radius: 8px;
					padding: 10px;
					min-width: 140px;
					font-size: 93.8%;
					text-align: center;
					@media (max-width: 767px) {
						padding: 2px 10px;
					}
				}
				.heading {
					font-size: 125%;
					font-weight: 500;
					@media (max-width: 767px) {
						width: calc(100% - 48px);
					}
				}
				.icon {
					position: relative;
					width: 24px;
					aspect-ratio: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					img {
						position: relative;
						z-index: 1;
						width: 14px;
						aspect-ratio: 1;
					}
					&::before {
						content: "";
						width: 100%;
						height: 100%;
						border-radius: 50%;
						background: linear-gradient(90deg, #54C3F1 0%, #0885CD 100%);
						background-color: #fff;
						position: absolute;
						inset: 0;
						margin: auto;
						transition: transform .3s ease;
					}
				}
				@media (hover: hover) {
					&:hover {
						&::after {
							width: 100%;
						}
						.icon {
							&::before {
								transform: scale(1.2);
							}
						}
					}
				}
			}
		}
	}
	.page-nav {
		width: 100%;
		margin: 160px auto 0;
		@media (min-width: 768px) and (max-width: 1024px) {
			margin: 120px auto 0;
		}
		@media (max-width: 767px) {
			margin: 64px auto 0;
		}
		.wrp-pagenavi {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 40px;
			@media (max-width: 767px) {
				gap: 2em;
			}
		}
		a,
		span {
			font-size: 18px;
			transition: 0.3s;
			font-family: var(--font-sans);
			font-weight: 500;
			line-height: 1;
			position: relative;
			display: inline-block;
			&:after {
				content: "";
				background-color: var(--color-base);
				width: 0;
				height: 1px;
				position: absolute;
				bottom: -8px;
				left: 0;
			}
			@media (max-width: 767px) {
				font-size: 16px;
			}
		}
		.current {
			color: var(--color-blue);
			&:after {
				width: 100%;
				background-color: var(--color-blue);
			}
		}
		.prev,
		.next {
			position: relative;
			width: 40px;
			aspect-ratio: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			svg {
				position: relative;
				z-index: 1;
				width: 20px;
				aspect-ratio: 1;
			}
			&::before {
				content: "";
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: var(--color-blue);
				position: absolute;
				inset: 0;
				margin: auto;
				transition: transform .3s ease;
			}
			@media (hover: hover) {
				&:hover {
					&::before {
						transform: scale(1.2);
					}
				}
			}
		}
		.prev {
			svg {
				transform: scale(-1, 1);
			}
		}
		.page {
			@media (hover: hover) {
				transition: 0.3s;
				&:hover {
					color: var(--color-blue);
				}
			}
		}
		span.prev,
		span.next {
			display: none;
		}
	}
}
/* -----------------------------------------------------------
	.p-news__article
	詳細一覧ページ(detail)
----------------------------------------------------------- */
.p-news__article-wrap {
	padding-top: 176px;
	position: relative;
	@media (max-width: 767px) {
		padding-top: 80px;
	}
	&::before {
		content: "";
		background: url(../images/common/bg-sky.avif) center 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 1136px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.p-news__article {
	border-radius: 8px;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	background: rgba(255, 255, 255, 0.40);
	backdrop-filter: blur(20px);
	padding: 80px;
	position: relative;
	z-index: 1;
	@media (min-width: 768px) and (max-width: 1024px) {
		padding: 64px;
	}
	@media (max-width: 767px) {
		padding: 40px 24px;
	}
	.p-news__article-outline {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap:40px 24px;
		margin-bottom: 64px;
		@media (max-width: 767px) {
			gap:16px 8px;
			margin-bottom: 24px;
		}
		.date {
			font-family: var(--font-sans);
			font-size: calc(24 * var(--rem));
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.06em;
			@media (max-width: 767px) {
				font-size: calc(16 * var(--rem));
				padding-left: 0;
			}
		}
		.category {
			background-color: var(--color-blue);
			color: #fff;
			border-radius: 8px;
			padding: 10px;
			min-width: 140px;
			font-size: 93.8%;
			text-align: center;
			@media (max-width: 767px) {
				padding: 2px 10px;
				min-width: 90px;
			}
		}
		.heading {
			width: 100%;
			font-size: calc(40 * var(--rem));
			font-weight: 700;
			line-height: 1.5;
			@media (max-width: 767px) {
				font-size: calc(24 * var(--rem));
			}
		}
	}
	.p-news__article-content {
		padding-bottom: 80px;
		border-bottom: 1px solid var(--color-border);
		@media (max-width: 767px) {
			padding-bottom: 40px;
		}
		.wp-block-paragraph {
			margin-top: 24px;
			@media (max-width: 767px) {
				margin-top: 16px;
			}
		}
		.wp-block-image {
			margin-top: 24px;
			&::before {
				opacity: 0;
			}
			@media (max-width: 767px) {
				margin-top: 16px;
			}
			video {
				border-radius: 8px;
			}
			img {
				border-radius: 8px;
			}
			.wp-element-caption {
				display: inline-block;
				padding: 8px 0;
				font-size: 87.5%;
				background: none;
				text-align: left;
				text-shadow: none;
				color: var(--color-base);
				position: static;
				height: auto;
			}
		}
		h2 {
			border-left: 3px solid var(--color-blue);
			font-size: calc(24 * var(--rem));
			font-weight: 500;
			line-height: 1.2;
			padding-left: 16px;
			margin-top: 120px;
			@media (max-width: 767px) {
				margin-top: 64px;
				font-size: calc(18 * var(--rem));
			}
		}
		h3 {
			font-size: calc(22 * var(--rem));
			font-weight: 500;
			line-height: 1.2;
			margin-top: 80px;
			border-bottom: 1px solid var(--color-border);
			padding-bottom: 16px;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-column-gap: 8px;
			&::before {
				content: "";
				width: 8px;
				aspect-ratio: 1;
				border-radius: 50%;
				background-color: var(--color-blue);
				margin-top: 0.5em;
			}
			@media (max-width: 767px) {
				margin-top: 48px;
				font-size: calc(16 * var(--rem));
			}
		}
		h4 {
			font-size: calc(18 * var(--rem));
			font-weight: 500;
			line-height: 1.4;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-column-gap: 8px;
			margin-top: 64px;
			@media (max-width: 767px) {
				margin-top: 40px;
				font-size: calc(15 * var(--rem));
			}
			&::before {
				content: "";
				width: 8px;
				aspect-ratio: 1;
				border-radius: 50%;
				background-color: var(--color-blue);
				margin-top: 0.5em;
			}
		}
		h5 {
			font-size: calc(18 * var(--rem));
			font-weight: 500;
			line-height: 1.4;
			margin-top: 40px;
			color: var(--color-blue);
			@media (max-width: 767px) {
				margin-top: 32px;
				font-size: calc(15 * var(--rem));
			}
		}
		h6 {
			font-weight: 700;
			line-height: 1.4;
			margin-top: 32px;
			@media (max-width: 767px) {
				margin-top: 24px;
			}
		}
		figure {
			margin: 40px 0;
			@media (max-width: 767px) {
				margin: 16px 0;
			}
			video {
				border-radius: 8px;
			}
			img {
				border-radius: 8px;
			}
		}
		.wp-block-list {
			padding-left: 1.5em;
			display: flex;
			flex-direction: column;
			gap: 1em;
			margin-top: 24px;
			@media (max-width: 767px) {
				margin-top: 16px;
			}
			li {
				list-style-type: disc;
				list-style-position: outside;
			}
		}
		.wp-block-columns {
			margin: 40px 0;
			@media (min-width: 768px) and (max-width: 1024px) {
				margin: 32px 0;
			}
			@media (max-width: 767px) {
				margin: 20px 0;
			}
		}
		.wp-block-group {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 1fr;
			grid-column-gap: 40px;
			@media (max-width: 767px) {
				display: flex;
				flex-direction: column;
				gap:0;
			}
			figure {
				width: 100%;
				display: block;
				figcaption {
					line-height: 1.2;
				}
			}
		}
		.wp-block-buttons {
			margin-top: 24px;
			@media (max-width: 767px) {
				margin-top: 8px;
			}
			.wp-block-button {
				margin-top: 40px;
				@media (max-width: 767px) {
					margin-top: 24px;
				}
				a {
					color: var(--color-base);
					background: var(--color-blue);
					text-decoration: none;
					display: inline-block;
					position: relative;
					border-radius: 9999px;
					padding: 26px 64px 26px 40px;
					font-weight: 500;
					letter-spacing: 0.08em;
					color: #fff;
					text-align: left;
					cursor: pointer;
					@media (max-width: 767px) {
						padding: 20px 56px 20px 24px;
					}
					&:before {
						content: "";
						width: 24px;
						aspect-ratio: 1;
						border-radius: 50%;
						background-color: #fff;
						position: absolute;
						right: 24px;
						top: 50%;
						transform: translateY(-50%);
						transition: 0.3s;
					}
					&:after {
						content: "";
						background: url(../images/common/icon-arrow_blue.svg) center center no-repeat;
						background-size: contain;
						width: 14px;
						aspect-ratio: 1/1;
						position: absolute;
						right: 30px;
						top: 50%;
						transform: translateY(-50%);
						transition: 0.3s;
					}
					@media (hover: hover) {
						&:hover {
							&::before {
								transform: translateY(-50%) scale(1.2);
							}
						}
					}
				}
			}
		}
		> *:first-child {
			margin-top: 0;
		}
	}
	.c-button-basic {
		margin: 160px auto 0;
		@media (min-width: 768px) and (max-width: 1024px) {
			margin-top: 80px;
		}
		@media (max-width: 767px) {
			margin-top: 64px;
		}
		a {
			padding: 26px 40px 26px 24px;
			@media (max-width: 767px) {
				padding: 20px 24px 20px 16px;
			}
			.icon {
				transform: scale(-1, 1);
			}
			.txt {
				text-align: center;
				width: calc(100% - 24px);
			}
		}
	}
}