@charset "utf-8";
#column_details {
	width: 100%;
	height: auto;
}
	.column_details__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		padding: 50px 0 120px;
		margin: 0 auto;
	}
		.column_details__wrap {
			width: 100%;
			max-width: 600px;
			height: auto;
			margin: 0 auto;
		}
			.column_details__thumbnail {
				width: 100%;
				height: auto;
				margin: 0 auto 20px;
			}
			.column_details__info {
				width: 100%;
				height: auto;
				margin: 0 auto 20px;
			}
				.column_details__info__date {
					width: 100%;
					height: auto;
					margin: 0 auto 10px;
					font-size: 12px;
					font-weight: 400;
					line-height: calc(14 / 12);
					letter-spacing: 0.05em;
					color: var(--color--gray2);
				}
				.column_details__info__ttl {
					width: 100%;
					height: auto;
					font-size: 18px;
					font-weight: 500;
					line-height: calc(27 / 18);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
			.column_details__content {
				width: 100%;
				height: auto;
				padding: 40px 0;
				border-top: 1px solid var(--color--lightgray1);
				border-bottom: 1px solid var(--color--lightgray1);
				font-size: 14px;
				font-weight: 400;
				line-height: calc(24 / 14);
				letter-spacing: 0.05em;
				color: var(--color--black);
			}
				.column_details__content h2 {
					width: 100%;
					height: auto;
					padding: 0 0 5px;
					margin-bottom: 20px;
					border-bottom: solid 2px var(--color--black);
					font-size: 16px;
					font-weight: 700;
					line-height: calc(24 / 16);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.column_details__content h3 {
					width: 100%;
					height: auto;
					padding: 2px 0 2px 8px;
					margin-bottom: 20px;
					border-left: solid 2px var(--color--black);
					font-size: 14px;
					font-weight: 700;
					line-height: calc(21 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.column_details__content h4 {
					width: 100%;
					height: auto;
					margin-bottom: 10px;
					font-size: 14px;
					font-weight: 700;
					line-height: calc(24 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.column_details__content a.btn {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					gap: 10px;
					width: auto;
					height: 44px;
					padding: 0 30px 1px 30px;
					border-radius: 3px;
					background-color: var(--color--black);
					border: solid 1px var(--color--black);
					font-size: 14px;
					font-weight: 400;
					line-height: 1;
					letter-spacing: 0em;
					color: var(--color--white);
					cursor: pointer;
				}
					.column_details__content a.btn::before,
					.column_details__content a.btn::after {
						content: '';
						display: block;
						width: 10px;
						height: 1px;
						margin-top: 2px;
						background-color: var(--color--white);
					}
			@media (any-hover: hover) {
				.column_details__content a.btn {
					transition: .4s;
				}
				.column_details__content a.btn:hover {
					background-color: var(--color--white);
					color: var(--color--black);
				}
					.column_details__content a.btn::before,
					.column_details__content a.btn::after {
						transition: .4s;
					}
					.column_details__content a.btn:hover::before,
					.column_details__content a.btn:hover::after {
						background-color: var(--color--black);
					}
			}
				.column_details__content a:not(.btn) {
					color: var(--color--black);
					text-decoration: underline;
				}
			@media (any-hover: hover) {
				.column_details__content a:not(.btn):hover {
					text-decoration: none;
				}
			}
				.column_details__content ol {
					width: 100%;
					height: auto;
				}
					.column_details__content ol li {
						padding-left: 12px;
						position: relative;
						font-size: 14px;
						font-weight: 700;
						line-height: calc(24 / 14);
						letter-spacing: 0.05em;
						color: var(--color--black);
					}
						.column_details__content ol li::before {
							content: '- ';
							display: block;
							width: auto;
							height: auto;
							position: absolute;
							top: 0;
							left: 0;
						}
				.column_details__content ul {
					width: 100%;
					height: auto;
					counter-reset: number 0;
				}
					.column_details__content ul li {
						padding-left: 30px;
						position: relative;
						font-size: 14px;
						font-weight: 700;
						line-height: calc(24 / 14);
						letter-spacing: 0.05em;
						color: var(--color--black);
					}
						.column_details__content ul li::before {
							counter-increment: number 1;
							content: counter(number,decimal-leading-zero) '.';
							display: block;
							width: auto;
							height: auto;
							font-family: var(--font--roboto);
							position: absolute;
							top: 0;
							left: 0;
						}
			.column_details__back_btn_wrap {
				width: 100%;
				height: auto;
				margin: 40px 0 0;
				text-align: center;
			}
				.column_details__back_btn {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					gap: 20px;
					width: auto;
					height: auto;
					font-size: 16px;
					font-weight: 400;
					line-height: calc(24 / 16);
					letter-spacing: 0.05em;
					color: var(--color--gray2);
				}
					.column_details__back_btn::before,
					.column_details__back_btn::after {
						content: '';
						display: block;
						width: 10px;
						height: 1px;
						margin-top: 2px;
						background-color: var(--color--gray2);
					}
			@media (any-hover: hover) {
				.column_details__back_btn {
					transition: .4s;
				}
				.column_details__back_btn:hover {
					color: var(--color--black);
				}
					.column_details__back_btn::before,
					.column_details__back_btn::after {
						transition: .4s;
						transform: translate(0px, 0px);
					}
					.column_details__back_btn:hover::before,
					.column_details__back_btn:hover::after {
						background-color: var(--color--black);
					}
					.column_details__back_btn:hover::before {
						transform: translate(-2px, 0px);
					}
					.column_details__back_btn:hover::after {
						transform: translate(2px, 0px);
					}
			}

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

}

/* Tablet ================================================== */
@media all and (max-width: 719px){
/* column_details */
	.column_details__inner {
		width: calc((400 / 440) * 100%);
		padding: 50px 0 80px;
	}
		.column_details__wrap {
			max-width: initial;
		}
			.column_details__info {
				margin: 0 auto 40px;
			}
			.column_details__back_btn_wrap {
				margin: 30px 0 0;
			}
}

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

}