@charset "utf-8";

/* main
----------------------------------------------------------------------------- */
.l-main__news {
	padding-block-start: var(--header-height-pc);
	background-color: var(--cc-back);
	@media (width <= 767px) {
		padding-block-start: var(--header-height-sp);
	}
}

/* news
----------------------------------------------------------------------------- */
.page-news {
	@media (width > 767px) {
		display: grid;
		grid-template-columns: auto 1fr;
		max-width: 160rem;
		margin-inline: auto;
	}
}

/* 一覧サイドナビゲーション
----------------------------------------------------------------------------- */
.archive-news-nav {
	@media (width > 767px) {
		grid-column: 1;
		grid-row: 1;
		border-right: 1px solid var(--cc-line-A);
		width: 40rem;
		margin-inline: auto 0;
		padding-inline: 8rem 4rem;
	}
}

.archive-news-nav-wrap {
	@media (width > 767px) {
		position: sticky;
		top: var(--header-height-pc);
		height: fit-content;
		padding-block: 8rem 12.8rem;
	}
	@media (width <= 767px) {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-inline: 3rem;
		padding-block: 6rem;
	}

	.page-news.-archive & {
		@media (width <= 767px) {
			padding-bottom: 4.8rem;
		}
	}
}

.archive-news-nav-title {
	@media (width > 767px) {
		& span {
			&::before {
				@media (width > 767px) {
					font-size: 3rem;
				}
			}
		}
	}
}

.archive-news-nav-current-term {
	@media (width <= 767px) {
		display: flex;
		align-items: center;
		column-gap: 1.2rem;
		width: 100%;
		font-weight: var(--text-fw-en);
		line-height: var(--text-a-lh);
		color: var(--cc-pinkgold);
		letter-spacing: 0.14em;
		font-size: 2rem;

		&::before {
			content: "";
			display: block;
			width: 1.6rem;
			height: 1px;
			background-color: var(--cc-line-A);
		}

		&.-cat {
			text-transform: uppercase;
			font-family: var(--ff-loniki);
		}
	}
}

.archive-news-nav-categories {
	@media (width > 767px) {
		margin-top: 8rem;
	}
	@media (width <= 767px) {
		padding: 8rem 3rem;
		border-top: 1px solid var(--cc-line-A);
	}
}

.archive-news-nav-category {
	border-top: 1px solid var(--cc-line-B);
	position: relative;

	@media (width > 767px) {
		padding-top: 3.2rem;
	}
	@media (width <= 767px) {
		padding-top: 2.4rem;
	}

	&:not(:first-of-type) {
		@media (width > 767px) {
			margin-top: 6rem;
		}
		@media (width <= 767px) {
			margin-top: 4.8rem;
		}
	}

	&::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 0;
		height: 1px;
		background-color: var(--cc-pinkgold);

		@media (width > 767px) {
			width: 5.6rem;
		}
		@media (width <= 767px) {
			width: 4.5rem;
		}
	}
}

.archive-news-nav-head {
	text-transform: uppercase;
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	line-height: var(--text-a-lh);
	color: var(--cc-pinkgold);
	letter-spacing: 0.2em;

	@media (width > 767px) {
		font-size: 2rem;
	}
	@media (width <= 767px) {
		font-size: 1.8rem;
	}
}

.archive-news-nav-label-box {
	margin-top: 2.4rem;
	display: flex;
	flex-direction: column;

	&:has(.archive-news-nav-label-cat) {
		row-gap: 2.4rem;
	}

	&:has(.archive-news-nav-label-place) {
		row-gap: 0.8rem;
	}
}

.archive-news-nav-label-cat {
	text-transform: uppercase;
	font-family: var(--ff-loniki);
	letter-spacing: 0.12em;
	display: block;
	line-height: 1;
	display: flex;
	align-items: center;
	column-gap: 0.8rem;

	@media (width > 767px) {
		width: fit-content;
		font-size: 1.5rem;
		opacity: 0.5;
	}
	@media (width <= 767px) {
		font-size: 1.4rem;
	}

	&::before {
		content: "";
		display: block;

		@media (width > 767px) {
			border-top: 1px solid var(--cc-line-A);
			width: 1.6rem;
		}
		@media (width <= 767px) {
			border-top: 1px solid var(--cc-icon-A);
			width: 1.4rem;
		}
	}

	&.current {
		opacity: 1;

		&::before {
			@media (width > 767px) {
				border-top: 1px solid var(--cc-icon-A);
			}
		}
	}
}

.archive-news-nav-label-place {
	text-transform: uppercase;
	font-size: 1.3rem;
	line-height: 1;
	display: flex;
	align-items: center;
	height: 3.2rem;
	column-gap: 0.8rem;
	padding-inline: 1.2rem;
	width: 100%;
	border-radius: 0.2rem;
	background-color: var(--cc-tag-A);

	&.current {
		&::before {
			@media (width > 767px) {
				content: "";
				display: block;
				width: 1.6rem;
				height: 1px;
				background-color: var(--cc-icon-A);
			}
		}
	}
}

.archive-news-nav-label-cat,
.archive-news-nav-label-place {
	&:not(.current) {
		@media (hover) {
			& {
				transition: opacity 0.3s ease-out;
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
}

/* 記事一覧
----------------------------------------------------------------------------- */
.archive-news-articles {
	width: 100%;
	@media (width > 767px) {
		grid-column: 2 / -1;
		grid-row: 1;
		max-width: 120rem;
		padding-inline: 8rem;
		padding-block: 8rem 12.8rem;
	}
	@media (width <= 767px) {
		padding-block: 0 10rem;
		padding-inline: 3rem;
	}
}

.archive-news-articles-list {
	display: grid;

	@media (width > 767px) {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 4rem;
		row-gap: 6.4rem;
	}
	@media (width <= 767px) {
		grid-template-columns: 1fr;
		row-gap: 4.8rem;
	}
}

.archive-news-articles-item {
	width: 100%;

	&:not(:first-of-type) {
		@media (width <= 767px) {
			padding-top: 4.8rem;
			border-top: 1px solid var(--cc-line-A);
		}
	}
}

.archive-news-articles-item-link {
	@media (hover) {
		img {
			transition: transform 0.3s ease-out;
		}

		&:hover img {
			transform: scale(1.05);
		}
	}
}

.archive-news-articles-item-img {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1/1;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.archive-news-articles-item-info {
	margin-top: 1.6rem;
	display: flex;
	flex-direction: column;
}

.archive-news-articles-item-title {
	line-height: 1.8;
	letter-spacing: 0.0556em;
	font-weight: var(--text-fw-ja);

	@media (width > 767px) {
		font-size: 1.5rem;
		min-height: calc((1.5rem * 1.8) * 2);
	}
	@media (width <= 767px) {
		font-size: 1.4rem;
	}
}

.archive-news-articles-item-date {
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	line-height: var(--text-a-lh);
	color: var(--cc-icon-A);
	letter-spacing: 0.2em;
	margin-top: 1rem;

	@media (width > 767px) {
		font-size: 1.2rem;
	}
	@media (width <= 767px) {
		font-size: 1.1rem;
	}
}

.archive-news-articles-item-places {
	margin-top: 1.6rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.2rem;
}

.archive-news-articles-item-places-label {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cc-tag-A);
	border-radius: 0.2rem;

	@media (width > 767px) {
		height: 2.4rem;
		font-size: 1rem;
	}
	@media (width <= 767px) {
		height: 2.2rem;
		font-size: 0.9rem;
	}
}

/* 一覧ページネーション
----------------------------------------------------------------------------- */
.archive-news-articles-pager {
	@media (width > 767px) {
		margin-top: 10rem;
	}
	@media (width <= 767px) {
		margin-top: 8rem;
	}

	.wp-pagenavi {
		display: flex;
		align-items: center;
		justify-content: center;

		@media (width > 767px) {
			column-gap: 2.4rem;
		}
		@media (width <= 767px) {
			column-gap: 1.2rem;
		}

		.previouspostslink,
		.current,
		.page,
		.nextpostslink {
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			aspect-ratio: 1;
			font-family: var(--ff-loniki);
			font-weight: var(--text-fw-en);
			line-height: 1;
			color: var(--cc-pinkgold);
			border-radius: 50%;
			border: 1px solid var(--cc-pinkgold);
			background-color: #FBFAF6;

			@media (width > 767px) {
				width: 5rem;
				font-size: 1.4rem;
			}
			@media (width <= 767px) {
				width: 4.2rem;
				font-size: 1.2rem;
			}
		}

		.previouspostslink,
		.page,
		.nextpostslink {
			@media (hover: hover) {
				transition: all 0.3s ease-out;

				&:hover {
					background-color: var(--cc-pinkgold);
					color: var(--cc-white-A);
				}
			}
		}

		.previouspostslink,
		.nextpostslink {
			@media (hover: hover) {
				&::after {
					transition: background-color 0.3s ease-out;
				}

				&:hover {
					&::after {
						background-color: var(--cc-white-A);
					}
				}
			}
		}

		.current {
			color: var(--cc-white-A);
			background-color: var(--cc-pinkgold);
		}

		.dots {
			font-size: 0;
			color: transparent;
			position: relative;
			display: block;
			border: none;
			padding: 0;
			margin: 0;

			&::before {
				content: "";
				display: block;
				background-image: radial-gradient(circle, var(--cc-icon-A) 1px, transparent 1px);
				background-position: left top;
				background-repeat: repeat-x;
				background-size: 4px 2px;
				height: 2px;

				@media (width > 767px) {
					width: 2.8rem;
				}
				@media (width <= 767px) {
					width: 1.6rem;
				}
			}
		}

		.previouspostslink,
		.nextpostslink {
			@media (width > 767px) {
				font-size: 0;
				color: transparent;
				position: relative;

				&::after {
					content: "";
					display: block;
					mask-position: center center;
					mask-repeat: no-repeat;
					mask-size: contain;
					mask-image: url("/assets/img/icon-arrow-pg.svg");
					background-color: var(--cc-pinkgold);
					width: 0.9rem;
					height: 0.7rem;
				}
			}
			@media (width <= 767px) {
				display: none;
			}
		}

		.previouspostslink {
			@media (width > 767px) {
				transform: scale(-1, 1);
			}
		}
	}
}

/* 詳細追従タイトル
----------------------------------------------------------------------------- */
.single-news-side {
	@media (width > 767px) {
		grid-column: 1;
		grid-row: 1;
		border-right: 1px solid var(--cc-line-A);
		width: 53.4rem;
		margin-inline: auto 0;
		padding-inline: 8rem 4rem;
	}
}

.single-news-side-wrap {
	display: flex;
	flex-direction: column;

	@media (width > 767px) {
		position: sticky;
		top: var(--header-height-pc);
		height: fit-content;
		padding-block: 8rem 12.8rem;
	}
	@media (width <= 767px) {
		padding-inline: 3rem;
		padding-block: 3.2rem 4rem;
	}
}

.single-news-side-back {
	flex-direction: row-reverse;
	justify-content: flex-end;

	span:first-child {
		margin-inline: 0.8rem 0;
		text-transform: uppercase;
		font-family: var(--ff-loniki);
		font-weight: var(--text-fw-en);
		letter-spacing: 0.16em;
	}

	.c-btn-tertiary {
		scale: -1 1;
	}
}

.single-news-side-category {
	@media (width > 767px) {
		padding-top: 8rem;
	}
}

.single-news-side-category-label {
	text-transform: uppercase;
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	line-height: var(--text-a-lh);
	color: var(--cc-pinkgold);
	letter-spacing: 0.12em;
	display: flex;
	align-items: center;
	column-gap: 0.8rem;
	width: fit-content;

	&::before {
		content: "";
		display: block;
		width: 1.6rem;
		height: 1px;
		background-color: var(--cc-line-A);
	}

	@media (width > 767px) {
		font-size: 2rem;
	}
	@media (width <= 767px) {
		font-size: 1.6rem;
	}

	@media (hover) {
		& {
			transition: opacity 0.3s ease-out;
		}
		&:hover {
			opacity: 0.7;
		}
	}
}

.single-news-side-title {
	letter-spacing: 0.1em;
	font-weight: var(--text-fw-ja);

	@media (width > 767px) {
		font-size: 1.8rem;
		line-height: 2.4;
		margin-top: 2rem;
	}
	@media (width <= 767px) {
		font-size: 1.4rem;
		line-height: 2.2;
		margin-top: 1.6rem;
	}
}

.single-news-side-date {
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	line-height: var(--text-a-lh);
	color: var(--cc-icon-A);
	letter-spacing: var(--text-a-ls-pc);
	font-size: 1.2rem;

	@media (width > 767px) {
		margin-top: 1.6rem;
	}
	@media (width <= 767px) {
		margin-top: 1.2rem;
	}
}

.single-news-side-places {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.2rem;

	@media (width > 767px) {
		max-width: 34rem;
		margin-top: 5.6rem;
	}
	@media (width <= 767px) {
		margin-top: 2rem;
	}
}

.single-news-side-places-label {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cc-tag-A);
	border-radius: 0.2rem;

	@media (width > 767px) {
		height: 2.8rem;
		font-size: 1.2rem;
	}
	@media (width <= 767px) {
		height: 2.4rem;
		font-size: 1rem;
	}

	@media (hover) {
		& {
			transition: opacity 0.3s ease-out;
		}
		&:hover {
			opacity: 0.7;
		}
	}
}

/* 詳細記事コンテンツ
----------------------------------------------------------------------------- */
.single-news-article {
	@media (width > 767px) {
		padding-right: 8rem;
	}
	@media (width <= 767px) {
		padding-block: 0 10rem;
	}
}

.single-news-article-inner {
	@media (width > 767px) {
		padding-block: 0 12.8rem;
		border-right: 1px solid var(--cc-line-A);
	}
	@media (width <= 767px) {
	}
}

.single-news-article-eyecatch {
	width: 100%;
	height: auto;
	@media (width <= 767px) {
		padding-bottom: 4rem;
	}

	img {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
	}
}

.single-news-contents {
	@media (width > 767px) {
		padding-top: 6.4rem;
		padding-inline: 4rem;
	}
}

.single-news-pager {
	display: grid;
	align-items: center;

	@media (width > 767px) {
		grid-template-columns: 1fr auto 1fr;
		column-gap: 4rem;
		margin-top: 14rem;
		column-gap: 8rem;
	}
	@media (width <= 767px) {
		margin-top: 8rem;
		grid-template-columns: repeat(3, 1fr);
		padding-inline: 3rem;
	}
}

.single-news-pager-link {
	span {
		text-transform: uppercase;
		font-family: var(--ff-loniki);
		font-weight: var(--text-fw-en);
		letter-spacing: 0.16em;
	}

	&.-prev {
		flex-direction: row-reverse;
		grid-column: 1;
		grid-row: 1;

		@media (width > 767px) {
			justify-self: flex-end;
		}
		@media (width <= 767px) {
			width: fit-content;
			justify-self: flex-start;
		}

		span:first-child {
			margin-inline: 0.8rem 0;
		}
		.c-btn-tertiary {
			scale: -1 1;
		}
	}

	&.-back {
		grid-column: 2;
		grid-row: 1;
		justify-content: center;
		justify-self: center;

		span {
			margin-right: 0;

			span {
				@media (width > 767px) {
					margin-right: 0.5em;
				}
			}
		}
	}

	&.-next {
		grid-column: 3;
		grid-row: 1;

		@media (width <= 767px) {
			justify-self: end;
		}
	}
}

/* よく見られている記事
----------------------------------------------------------------------------- */
.single-news-related {
	border-top: 1px solid var(--cc-line-A);
}

.single-news-related-inner {
	@media (width > 767px) {
		max-width: 112rem;
		margin-inline: auto;
		padding-block: 14rem 16rem;
	}
	@media (width <= 767px) {
		padding-inline: 3rem;
		padding-block: 10rem;
	}
}

.single-news-related-list {
	display: grid;
	border-top: 1px solid var(--cc-line-A);

	@media (width > 767px) {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 4rem;
		padding: 4rem;
		border-bottom: 1px solid var(--cc-line-A);
	}
	@media (width <= 767px) {
		grid-template-columns: 1fr;
		row-gap: 4.8rem;
		padding-top: 4.8rem;
	}
}

.single-news-related-heading {
	display: flex;
	align-items: center;
	color: var(--cc-pinkgold);
	border-top: 1px solid var(--cc-line-A);

	@media (width > 767px) {
		padding: 2rem 4rem;
	}
	@media (width <= 767px) {
		padding-block: 1.6rem;
		flex-direction: column;
	}
}

.single-news-related-heading-en {
	font-family: var(--ff-loniki);
	font-weight: var(--text-fw-en);
	font-size: var(--text-a-fs-sp);
	letter-spacing: var(--text-a-ls-sp);
	line-height: 1.8;
	position: relative;

	@media (width > 767px) {
		padding-right: 2.4rem;
		margin-right: 2.4rem;
	}
	@media (width <= 767px) {
		text-align: center;
	}

	&::after {
		@media (width > 767px) {
			content: "";
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			width: 1px;
			height: 1.2rem;
			background-color: var(--cc-line-A);
		}
	}
}

.single-news-related-heading-ja {
	line-height: 2;
	color: var(--cc-black-B);
	font-weight: var(--text-fw-ja);

	@media (width > 767px) {
		font-size: 1.2rem;
	}
	@media (width <= 767px) {
		font-size: 1.1rem;
		text-align: center;
	}
}