:root {
	--main_c: #fac98b;
	--sub_c: #f08337;
	--txt_c: #3e3800;
	--white: #fff;
	--gray: #eaeae3;
}

html {
	scroll-padding-top: 80px;

	@media screen and (max-width: 768px) {
		scroll-padding-top: 40px;
	}
}

.news {
	padding: 60px 16px;

	.news_list_area {
		width: min(800px, 100%);
		margin: 0 auto;

		.newsList {
			display: flex;
			flex-direction: column;
			gap: 16px;

			.news_item {
				font-size: 18px;
				line-height: 1.8;
				list-style: none;
				border-bottom: 1px solid var(--gray);
				padding-bottom: 14px;

				dl {
					display: flex;
					gap: 24px;

					dt {
						font-weight: 300;
					}

					dd {
						a {
							text-decoration: underline;
							color: var(--txt_c);

							&:hover {
								color: var(--sub_c);
							}
						}
					}
				}

				.date {
					display: inline-block;
					min-width: 100px;
				}

				@media screen and (max-width: 768px) {
					font-size: 15px;

					.date {
						min-width: 80px;
					}
				}
			}
		}
	}
}


/*ページャー周り*/

.pager {
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	margin-top: 32px;
	margin-bottom: 24px;
	align-items: center;

	li {
		position: relative;
		width: 40px;
		height: 40px;
		margin: 0 4px;
		padding: 3px;
		border-radius: 25px;
		cursor: pointer;
		font-size: 16px;
		line-height: 32px;
		text-align: center;
		background: var(--white);
		color: var(--txt_c);
		font-weight: normal;
		border: 1px solid var(--main_c);

		&.prev {
			width: 50px;
			height: 50px;
			margin-right: 14px;
			transform: rotateZ(180deg);
			background: url(../image/common/arrow_right.png) no-repeat center center;
			background-size: 10px;
			border: none;
		}

		&.next {
			width: 50px;
			height: 50px;
			margin-left: 14px;
			background: url(../image/common/arrow_right.png) no-repeat center center;
			background-size: 10px;
			border: none;
		}

		&.disable {
			cursor: auto;
			background: none;
			border: none;
		}

		&.current {
			color: var(--txt_c);
			background: var(--main_c);
		}

		&.ellipsis {
			border: none;
			pointer-events: none;
		}
	}

	@media screen and (max-width: 909px) {
		justify-content: center;

		li {
			&.prev {
				margin-right: 10px;
			}

			&.next {
				margin-left: 10px;
			}
		}
	}

	@media screen and (max-width: 768px) {
		li {
			width: 32px;
			height: 32px;
			font-size: 14px;
			line-height: 24px;

			&.next,
			&.prev {
				width: 40px;
				height: 40px;
			}
		}
	}
}