@charset "utf-8";
#article {
	width: 100%;
	height: auto;
	background-image: url('../image/page-bg@pc.webp');
	background-position: center;
	background-repeat: repeat;
	background-size: 1280px auto;
}
	.article__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);
				}
		.article__body {
			width: 100%;
			height: auto;
			padding: 0 0 120px;
		}
			.article__heading {
				width: 100%;
				height: auto;
				border-bottom: solid 1px #C4C4C4;
				padding: 0 0 0;
				margin: 0 auto 40px;
				position: relative;
			}
				.article__heading::before {
					content: '';
					display: block;
					width: 45px;
					height: 1px;
					background-color: #B5AF64;
					position: absolute;
					bottom: -1px;
					left: 0;
				}
				.article__heading__info {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 100%;
					height: auto;
					margin: 0 auto 30px;
				}
					.article__heading__info__category {
						margin-right: 14px;
						font-size: 12px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0em;
						color: var(--color--white);
					}
						.article__heading__info__category span {
							display: inline-flex;
							justify-content: center;
							align-items: center;
							width: auto;
							height: 24px;
							padding: 0px 20px;
							background-color: var(--color--black);
						}
					.article__heading__info__date {
						font-size: 12px;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0.06em;
						color: var(--color--gray);
					}
				.article__ttl {
					width: 100%;
					height: auto;
					margin-bottom: 17px;
					font-size: 26px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.article__share {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					width: 100%;
					height: auto;
					padding-bottom: 10px;
				}
					.article__share__list {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						column-gap: 18px;
						width: auto;
						height: auto;
					}
						.article__share__list__item {
							width: 20px;
							height: 20px;
						}
							.article__share__list__item a {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 100%;
								height: 100%;
							}
			.article__contents {
				width: 90%;
				height: auto;
				margin: 0 auto;
			}
				.article__contents img {
					display: block;
				}
				.article__contents h2 {
					width: 100%;
					height: auto;
					padding: 9.5px 14px;
					margin-bottom: 20px;
					background-color: #E5E5DE;
					font-size: 22px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.06em;
					color: var(--color--black);
					position: relative;
				}
					.article__contents h2::before {
						content: '';
						display: block;
						width: 3px;
						height: calc((19 / 52) * 100%);
						background-color: #B5AF64;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0%,-50%);
					}
				.article__contents h3 {
					width: 100%;
					height: auto;
					padding: 7px 14px;
					margin-bottom: 15px;
					background-color: #F0F0ED;
					font-size: 20px;
					font-weight: 700;
					line-height: 1.4;
					letter-spacing: 0.06em;
					position: relative;
				}
					.article__contents h3::before {
						content: '';
						display: block;
						width: 3px;
						height: calc((15 / 36) * 100%);
						background-color: #838282;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0%,-50%);
					}
				.article__contents h4 {
					width: 100%;
					height: auto;
					padding: 0 14px;
					margin-bottom: 15px;
					font-size: 18px;
					font-weight: 700;
					line-height: 1.4;
					letter-spacing: 0.06em;
					position: relative;
				}
					.article__contents h4::before {
						content: '';
						display: block;
						width: 3px;
						height: 90%;
						background-color: #1E9EB2;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0%,-50%);
					}
				.article__contents h5 {
					width: 100%;
					height: auto;
					padding: 0 14px;
					margin-bottom: 15px;
					font-size: 18px;
					font-weight: 700;
					line-height: 1.4;
					letter-spacing: 0.06em;
					position: relative;
				}
					.article__contents h5::before {
						content: '';
						display: block;
						width: 3px;
						height: calc((16 / 25) * 100%);
						background-color: #838282;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0%,-50%);
					}
				.article__contents h6 {
					width: 100%;
					height: auto;
					padding: 0 14px;
					font-size: 16px;
					font-weight: 700;
					line-height: 1.4;
					letter-spacing: 0.06em;
					position: relative;
				}
					.article__contents h6::before {
						content: '';
						display: block;
						width: 10px;
						height: 1px;
						background-color: var(--color--black);
						position: absolute;
						top: 12px;
						left: -4px;
						transform: translate(0%,-50%);
					}
				.article__contents p {
					width: 100%;
					height: auto;
					font-size: 14px;
					font-weight: 500;
					line-height: 2;
					letter-spacing: 0.04em;
					color: var(--color--black);
				}
				.article__contents a {
					text-decoration: underline;
					color: var(--color--black);
				}
			@media (any-hover: hover) {
				.article__contents a:hover {
					text-decoration: none;
				}
			}
			.article__btn_area {
				width: 100%;
				height: auto;
				padding: 80px 0 0;
			}
				.article__btn_wrap {
					width: 273px;
					height: 56px;
					margin: 0 auto;
				}
					.article__btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						border-radius: 9999px;
						background-color: #B9B3B0;
						font-size: 16px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						color: var(--color--white);
						position: relative;
					}
						.article__btn::before {
							content: '';
							display: block;
							width: 15px;
							height: 8px;
							background-image: url('../image/icon-arrow.svg');
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
							position: absolute;
							top: 50%;
							left: 20px;
							transform: translate(0%,-50%);
						}
				@media (any-hover: hover) {
					.article__btn {
						transition: .4s;
					}
					.article__btn:hover {
						background-color: #CCC5C2;
					}
						.article__btn::before {
							transition: .4s;
						}
						.article__btn:hover::before {
							left: 15px;
						}
				}

/* PC ================================================== */
@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#article {
	background-image: url('../image/page-bg@sp.webp');
	background-size: cover;
}
	.article__inner {
		width: 87%;
		max-width: initial;
	}
		.page__heading {
			padding: 80px 0 45px;
		}
			.page__heading__txt {
				margin: 0 auto;
				font-size: var(--24px);
			}
				.page__heading__txt::before {
					font-size: var(--12px);
					right: calc((10 / 375) * -100vw);
				}
		.article__body {
			padding: 0 0 100px;
		}
			.article__heading {
				padding: 0 0 15px;
				margin: 0 auto 30px;
			}
				.article__heading::before {
					width: 40px;
				}
				.article__heading__info {
					margin: 0 auto 20px;
				}
					.article__heading__info__category {
						margin-right: 14px;
					}
						.article__heading__info__category span {
							height: 22px;
							padding: 0px 16px;
						}
				.article__ttl {
					font-size: 20px;
				}
				.article__share {
					top: 1px;
					bottom: auto;
				}
					.article__share__list {
						column-gap: 8px;
					}
			.article__contents {
				width: 100%;
			}
				.article__contents h2 {
					padding: 9.5px 14px;
					margin-bottom: 15px;
					font-size: 20px;
				}
				.article__contents h3 {
					margin-bottom: 10px;
					font-size: 18px;
				}
				.article__contents h4 {
					margin-bottom: 10px;
					font-size: 16px;
				}
				.article__contents h5 {
					margin-bottom: 10px;
					font-size: 16px;
				}
				.article__contents h6 {
					font-size: 14px;
				}
				.article__contents p {
					font-size: 14px;
				}
			.article__btn_area {
				padding: 60px 0 0;
			}
				.article__btn_wrap {
					width: 273px;
					height: 56px;
				}
					.article__btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						border-radius: 9999px;
						background-color: #B9B3B0;
						font-size: 16px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						color: var(--color--white);
						position: relative;
					}
						.article__btn::before {
							content: '';
							display: block;
							width: 15px;
							height: 8px;
							background-image: url('../image/icon-arrow.svg');
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
							position: absolute;
							top: 50%;
							left: 20px;
							transform: translate(0%,-50%);
						}
}

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

}