@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	一覧
--------------------------------------------------------------------------------------- */

.column-key-top {
	display: block;
	padding-bottom: 64px;
	padding-top: 150px;
}

.column-key-top .breadcrumb a { color: #fff; }

.column-key-top .breadcrumb li:nth-of-type(n+2):before { border-color: #fff; }

.column-slider {
	margin-top: 64px;
	width: 100%;
}

.column-slider .swiper-container { margin-top: 24px; }

.column-slider .swiper-slide {
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 2px 2px 4px rgba(179, 179, 179, .2);
	color: var(--color-text);
	display: block;
	max-width: 356px;
	padding: 20px;
	text-align: left;
	width: 100%;
}

.column-slider .swiper-slide figure {
	aspect-ratio: 2/1;
	display: block;
	overflow: hidden;
	position: relative;
}

.column-slider .swiper-slide figure img {
	height: 100%;
	object-fit: cover;
	transition: all .3s ease-in-out;
	width: 100%;
}

.column-slider .swiper-slide figure figcaption {
	background: #00dd63;
	border-radius: 4px 0;
	color: #fff;
	font-size: 13px;
	font-weight: var(--Bold);
	left: 0;
	padding: 1px 7px;
	position: absolute;
	top: 0;
}

.column-slider .swiper-slide .post-text { margin-top: 12px; }

.column-slider .swiper-slide .post-text dd {
	font-size: 85%;
	margin-top: 20px;
}

.column-slider .swiper-slide .date-section {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 24px;
}

.column-slider .swiper-slide .date-section dt {
	color: #9d9d9d;
	font-size: 12px;
}

.column-slider .swiper-slide .date-section dd {
	align-items: center;
	color: var(--color-text);
	display: inline-flex;
	font-size: 12px;
	font-weight: var(--Bold);
	position: relative;
}

.column-slider .swiper-slide .date-section dd::after {
	border-bottom: 2px solid var(--color-magenta);
	border-right: 2px solid var(--color-magenta);
	content: '';
	display: block;
	height: 8px;
	margin-left: 5px;
	transform: rotate(-45deg);
	transition: all .3s ease-in-out;
	width: 8px;
}

.column-slider .swiper-pagination { margin-top: 40px; }

.column-slider .swiper-pagination-bullet-active { background-color: #fff; }

@media (any-hover: hover) {

	.column-slider .swiper-slide:hover { text-decoration: none; }

	.column-slider .swiper-slide:hover figure img { transform: scale(1.1); }
}

.column-category-wrap {
	background-color: var(--color-light-blue);
	padding-bottom: 64px;
	padding-top: 64px;
}

.category-list .sub-title,
.hashtag-list .sub-title { text-align: center; }

.category-list .anchor-navi,
.hashtag-list .hashtag-navi { margin-top: 32px; }

.column-list-wrap {
	padding-bottom: 64px;
	padding-top: 64px;
}

.column-list {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 0;
	justify-content: space-between;
}

.column-list .column-item { width: 49%; }

.column-item .sub-title + a { margin-top: 24px; }

.column-item > a {
	color: var(--color-text);
	display: flex;
	justify-content: space-between;
	max-width: 100%;
	padding: 14px;
}

.column-item > a:nth-of-type(n+2) { margin-top: 12px; }

.column-item > a .thumbnail {
	height: 80px;
	width: 80px;
}

.column-item > a .thumbnail img {
	height: 100%;
	object-fit: cover;
	transition: all .3s ease-in-out;
	width: 100%;
}

@media (any-hover: hover) {

	.column-item > a:hover .thumbnail img { transform: scale(1.1); }

}

.column-item > a dl {
	display: flex;
	flex-direction: column;
	width: 80%;
}

.column-item > a dt {
	align-items: center;
	display: flex;
	flex-grow: 1;
	font-size: 14px;
	font-weight: var(--Bold);
}

.column-item > a dt strong {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.column-item > a dd {
	color: #9d9d9d;
	font-size: 12px;
}

.column-item .text-arrow-link {
	font-size: 12px;
	margin-top: 12px;
	text-align: right;
}

.hashtag-list .hashtag-navi {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.hashtag-list .hashtag-navi li a {
	background-color: #fff;
	border: 1px solid var(--color-blue);
	border-radius: 4px;
	color: var(--color-blue);
	display: block;
	font-size: 14px;
	font-weight: var(--Bold);
	line-height: 1;
	padding: 8px 10px;
}

@media (any-hover: hover) {

	.hashtag-list .hashtag-navi li a:hover {
		background-color: var(--color-blue);
		color: #fff;
		text-decoration: none;
	}
}

.category-column-wrap { padding-bottom: 64px; }

.category-column-wrap .column-list { margin-top: 64px; }

.category-column-wrap .column-list .column-item {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 0;
	justify-content: space-between;
	width: 100%;
}

.category-column-wrap .column-list .column-item > .sub-title {
	margin-bottom: 18px;
	width: 100%;
}

.category-column-wrap .column-list .column-item  .sub-title + a,
.category-column-wrap .column-list .column-item > a:nth-of-type(n+2),
.related-column-wrap .column-list .column-item  .sub-title + a,
.related-column-wrap .column-list .column-item > a:nth-of-type(n+2) { margin-top: 0; }

.category-column-wrap .column-list .column-item > a { max-width: 49%; }

.banner-area.more {
	margin-top: 42px;
	text-align: center;
}

.banner-area.more .more-btn {
	border: none;
	min-height: 0;
}

.column-slider-wrap {
	background-color: var(--color-blue);
	padding: 64px 0;
}

.column-slider-wrap .column-slider { margin-top: 0; }

.column-slider-wrap .column-slider .sub-title { color: #fff; }

.related-column-wrap {
	padding-bottom: 64px;
	padding-top: 64px;
}

.related-column-wrap li {
	list-style: none;
	margin-bottom: 1.5em;
}

.related-column-wrap li a {
	color: inherit;
}

.related-column-wrap .sub-title {
	margin-bottom: 18px;
	text-align: center;
	width: 100%;
}

.related-column-wrap .column-list .column-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.related-column-wrap .column-list .column-item > a { width: 32.5%; }
.related-column-wrap .column-list .column-item  .sub-title + a { margin-top: 0; }

.related-column-wrap .column-list .column-item > a dl { width: 69%; }

@media (max-width: 1099px) {

	.column-key-top {
		padding-bottom: 9.95vw;
		padding-top: 24.876vw;
	}

	.column-key-top .breadcrumb {
		margin: 14.333vw 4.975vw 0;
		padding-top: 0;
	}

	.column-slider {
		margin: 9.95vw 4.975vw 0;
		width: auto;
	}

	.column-slider .swiper-container { margin-top: 5.97vw; }

	.column-slider .swiper-slide { padding: 4.975vw; }

	.column-slider .swiper-slide .post-text { margin-top: 3.98vw; }

	.column-slider .swiper-slide .post-text dd { margin-top: 1.99vw; }

	.column-slider .swiper-slide .date-section { margin-top: 4.975vw; }

	.column-slider .swiper-slide .date-section dt { font-size: 2.985vw; }

	.column-slider .swiper-slide .date-section dd { font-size: 2.985vw; }

	.column-slider .swiper-slide .date-section dd::after {
		height: 6px;
		width: 6px;
	}

	.column-slider .swiper-pagination { margin-top: 5.97vw; }

	.column-category-wrap { padding: 7.96vw 4.975vw; }

	.category-list .anchor-navi,
	.hashtag-list .hashtag-navi { margin-top: 5.97vw; }

	.column-list-wrap { padding: 11.94vw 4.975vw; }

	.column-list {
		flex-direction: column;
		gap: 6.965vw 0;
	}

	.column-list .column-item { width: 100%; }

	.column-item .sub-title + a { margin-top: 4.97vw; }
	.column-item > a:nth-of-type(n+2) { margin-top: 1.99vw; }

	.column-item > a { padding: 3.98vw 4.975vw; }

	.column-item > a .thumbnail {
		height: 19.9vw;
		width: 19.9vw;
	}

	.column-item > a dl { width: 55.224vw; }

	.column-item > a dt { font-size: 3.483vw; }

	.column-item > a dd { font-size: 2.985vw; }

	.column-item .text-arrow-link {
		font-size: 2.985vw;
		margin-top: 2.985vw;
	}

	.hashtag-list .hashtag-navi {
		gap: 2.239vw;
		justify-content: flex-start;
	}

	.hashtag-list .hashtag-navi li a {
		font-size: 2.985vw;
		padding: 1.29vw 2.088vw;
	}

	.category-column-wrap { padding: 0 4.975vw 7.96vw; }

	.category-column-wrap .column-list { margin-top: 11.94vw; }

	.category-column-wrap .column-list .column-item { gap: 1.99vw 0; }

	.category-column-wrap .column-list .column-item > .sub-title { margin-bottom: 4.478vw; }

	.category-column-wrap .column-list .column-item > a { max-width: 100%; }

	.banner-area.more { margin-top: 0; }

	.column-slider-wrap { padding: 7.96vw 0; }
}

/* --------------------------------------------------------------------------------------
  記事の中身のスタイルをデフォルトに戻す
--------------------------------------------------------------------------------------- */

.post-content {
	line-height: 1.8;
	margin-top: 64px;
	word-break: break-word;
}

.post-content :where(
	blockquote, dd, dl, dt, fieldset, figure, figcaption, form, hr,
	h1, h2, h3, h4, h5, h6, ol, ul, li, p, pre,
	table, caption, thead, tbody, tfoot, tr, td, th, col, colgroup,
	b, strong, i, em, cite, var, abbr, code, kbd, samp,
	big, small, sub, sup, s, del, ins, u, mark, q,
	button, input, select, textarea
) {
	all: revert;
}

.post-content :where(*) { box-sizing: border-box; }

.post-content :where(h1, h2, h3, h4, h5, h6, p, li, dd, blockquote, td, th) {
	line-height: 1.8;
}

.post-content :where(img) {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

.post-content :where(a) {
	color: var(--color-blue);
	text-decoration: underline;
}

.post-content :where(a:hover) { text-decoration: none; }

/* --------------------------------------------------------------------------------------
	詳細
--------------------------------------------------------------------------------------- */

.column-detail-wrap { padding-bottom: 64px; }

.column-detail-wrap .hashtag-navi { justify-content: flex-start; }

.column-detail-wrap .head-title { margin-top: 6px; }

.column-detail-wrap .time {
	color: #9d9d9d;
	font-size: 12px;
}

.column-detail-wrap .main-image { margin-top: 42px; }

.column-detail-wrap .main-image img {
	height: auto;
	max-width: inherit;
	width: 100%;
}

.column-detail-wrap .toc {
	background-color: var(--color-pale-gray);
	margin-top: 42px;
	padding: 32px;
}

.column-detail-wrap .toc::before {
	content: '目次';
	display: block;
	font-weight: var(--Bold);
	margin-bottom: 12px;
}


.column-detail-wrap .toc li {
	list-style-type: decimal;
	margin-left: 20px;
}

.column-detail-wrap .toc li::marker { color: var(--color-blue); }

.column-detail-wrap .toc li:nth-of-type(n+2) { margin-top: 4px; }

.column-detail-wrap .toc li a {
	color: var(--color-text);
	font-weight: var(--Bold);
}

.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
	background: var(--color-light-blue);
	border-left: 10px solid var(--color-blue);
	border-radius: 4px;
	font-weight: var(--Bold);
	padding: 10px 0 10px 16px;
}

.column-detail-wrap .banner-area {
	margin-top: 42px;
	text-align: center;
}

.cta_area a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 1099px) {

	.column-detail-wrap { padding: 4.975vw 4.975vw 15.92vw; }

	.column-detail-wrap .head-title { margin-top: 4.478vw; }

	.column-detail-wrap .time {
		display: inline-block;
		font-size: 2.985vw;
		margin-top: 3.98vw;
	}

	.column-detail-wrap .main-image { margin-top: 3.98vw; }

	.column-detail-wrap .toc {
		margin-top: 3.98vw;
		padding: 3.98vw 4.975vw;
	}

	.column-detail-wrap .toc::before {
		margin-bottom: 3.234vw;
		text-align: center;
	}

	.column-detail-wrap .toc li { margin-left: 4.333vw; }

	.post-content { margin-top: 9.95vw; }

	.post-content h2,
	.post-content h3,
	.post-content h4,
	.post-content h5 {
		border-radius: .995vw;
		border-width: 2.488vw;
		font-size: 3.483vw;
		padding: 1.99vw 0 1.99vw 3.98vw;
	}

	.post-content h3 { font-size: 3.283vw; }
	.post-content h4 { font-size: 3.083vw; }
	.post-content h5 { font-size: 2.883vw; }

	.column-detail-wrap .banner-area { margin-top: 10.448vw; }

	.related-column-wrap { padding: 7.96vw 4.975vw; }

	.related-column-wrap .sub-title { margin-bottom: 4.478vw; }

	.related-column-wrap .column-list .column-item { gap: 1.99vw 0; }

	.related-column-wrap .column-list .column-item > a { width: 100%; }
}