@charset "utf-8";
#news {
	width: 100%;
	height: auto;
	background-image: url('../image/page-bg@pc.webp');
	background-position: center;
	background-repeat: repeat;
	background-size: 1280px auto;
}
	.news__inner {
		width: 95%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		.page__heading {
			width: 100%;
			height: auto;
			padding: 120px 0 63px;
		}
			.page__heading__txt {
				width: auto;
				height: auto;
				margin: 0 auto;
				-webkit-writing-mode: vertical-rl;
				-moz-writing-mode: vertical-rl;
				-ms-writing-mode: tb-rl;
				-ms-writing-mode: vertical-rl;
				writing-mode: vertical-rl;
				font-size: var(--30px);
				font-weight: 500;
				line-height: 2;
				letter-spacing: 0.28em;
				color: var(--color--black);
				position: relative;
			}
				.page__heading__txt::before {
					content: 'news';
					font-size: var(--16px);
					font-weight: 400;
					line-height: 1;
					letter-spacing: 0.05em;
					color: var(--color--gray);
					position: absolute;
					top: 0;
					right: calc((26 / 1280) * -100vw);
				}
		.news__list_wrap {
			width: 100%;
			height: auto;
		}
			.news__list {
				width: 100%;
				height: auto;
			}
				.news__list__item {
					width: 100%;
					height: auto;
					border-bottom: solid 1px var(--color--black);
				}
					.news__list__item__wrap {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						height: auto;
						padding: 30px 124px 29px 0;
						font-weight: 400;
						line-height: 1.43;
						position: relative;
					}
						.news__list__item__wrap::before {
							content: '';
							display: block;
							width: 51px;
							height: auto;
							aspect-ratio: 51 / 34.91;
							background-image: url('../image/news/news-arrow.webp');
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
							position: absolute;
							top: 50%;
							right: 0;
							transform: translate(0%,-50%);
						}
				@media (any-hover: hover) {
					.news__list__item__wrap::before {
						transition: .3s;
					}
					.news__list__item__wrap:hover::before {
						right: -8px;
					}
				}
						.news__list__item__date {
							width: 94px;
							height: auto;
							font-size: 16px;
							letter-spacing: 0.05em;
							color: var(--color--black);
						}
						.news__list__item__ttl {
							flex: 1;
							height: auto;
							font-size: 14px;
							letter-spacing: 0.08em;
							color: var(--color--black);
						}
			.news__list_pagination {
				width: 100%;
				height: auto;
				padding: 88px 0 110px;
			}
				.pagination {
					width: 100%;
					height: auto;
				}
					.nav-links {
						display:flex;
						justify-content: center;
						align-items: center;
						column-gap: 20px;
					}
					.pagination .page-numbers {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 34px;
						height: 34px;
						border-radius: 9999px;
						font-size: 16px;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0em;
						color: var(--color--black);
					}
					.pagination .current {
						background-color: var(--color--black);
						color: var(--color--white);
					}
					.pagination .prev.page-numbers,
					.pagination .next.page-numbers {
						width: 51px;
						height: auto;
						aspect-ratio: 51 / 34.91;
						background-image: url('../image/news/news-arrow.webp');
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}
					.pagination .prev.page-numbers.none,
					.pagination .next.page-numbers.none {
						background: initial;
					}
					.pagination .prev {
						transform: scale(-1,1);
					}
				@media (any-hover: hover) {
					.pagination a.page-numbers {
						transition: .3s;
					}
					.pagination a.page-numbers:not(.prev):not(.next):hover {
						background-color: var(--color--black);
						color: var(--color--white);
					}
					.pagination a.page-numbers.prev:hover,
					.pagination a.page-numbers.next:hover {
						opacity: .65;
					}
				}

/* PC ================================================== */
@media all and (min-width: 769px){
#store {
	background-image: initial;
	background-color: var(--color--white);
}
}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#news {
	background-image: url('../image/page-bg@sp.webp');
	background-size: cover;
}
	.news__inner {
		width: 87%;
		max-width: initial;
	}
		.page__heading {
			padding: 80px 0 30px;
		}
			.page__heading__txt {
				margin: 0 auto;
				font-size: var(--24px);
			}
				.page__heading__txt::before {
					font-size: 12px;
					right: calc((10 / 375) * -100vw);
				}
					.news__list__item__wrap {
						display: block;
						padding: 30px 0 29px;
					}
						.news__list__item__wrap::before {
							display: none;
						}
						.news__list__item__date {
							display: block;
							width: 100%;
							font-size: 14px;
							margin: 0 auto 8px;
						}
						.news__list__item__ttl {
							flex: initial;
							width: 100%;
							font-size: 14px;
						}
			.news__list_pagination {
				padding: 60px 0 80px;
			}
					.nav-links {
						column-gap: 12px;
					}
					.pagination .page-numbers {
						width: 28px;
						height: 28px;
						font-size: 14px;
					}
					.pagination .prev.page-numbers,
					.pagination .next.page-numbers {
						width: 45px;
					}
					.pagination .prev.page-numbers {
						margin: 0 auto 0 0;
					}
					.pagination .next.page-numbers {
						margin: 0 0 0 auto;
					}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}