@charset "utf-8";
/* CSS Document */

.page_ttl_wrap {
	background: url("../images/topics/page_ttl_back.jpg");
}

section#topics {
	padding: 30px 0px 0px !important;
}

.sec_ttl > span.en {
	text-transform: uppercase;
}

.topics_list {
	justify-content: space-between;
}

.content_area {
	width: 70%;
}

.cate_area {
	width: 25%;
}

.cate_ttl {
	background: #008E80;
	color: #FFF;
	font-size: 2rem;
	font-weight: bold;
	padding: 5px 10px;
}

.cate_list li {
	font-size: 1.6rem;
	border-bottom: 1px solid #CCC;
}

.cate_list li a {
	padding: 15px 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.cate_list li a::before {
	content: '';
	background: url("../images/topics/cate_arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 7px;
	height: 8px;
	padding-right: 5px;
}


.topics_box li {
	border-bottom: 1px solid #808080;
	font-size: 1.6rem;
}

.topics_box li a {
	padding: 20px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.topics_box li:first-child {
	border-top: 1px solid #808080;
}

.topics_box li > div {
	box-sizing: border-box;
}

.topics_thumb {
	width: 20%;
	text-align: center;
}

.topics_thumb img {
	width: auto;
	height: 120px;
}

.topics_post {
	width: 80%;
}

.topics_post > div {
	padding: 5px 0px;
}

.topics_cate {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.topics_ttl {
	font-size: 1.8rem;
	text-align: justify;
}

.topics_date {
	font-size: 1.3rem;
}

.btn_wrap {
	margin-top: 50px;
}

.base_btn {
	margin-left: auto;
}

@media screen and (max-width: 1024px) {
	.cate_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.cate_list li {
		width: 50%;
	}
}


/* -----------------------------------------------
カテゴリー別ページ
----------------------------------------------- */

.category_page {
	margin-top: 50px;
}

.concept_wrap {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: bold;
	max-width: 800px;
	width: 100%;
	margin: 3vw auto 0px;
}

.concept_ttl {
	font-size: clamp(2rem,3vw,3rem);
	text-align: center;
	color: #CC0000;
}

.concept_txt {
	font-size: clamp(1.4rem,1.6vw,1.6rem);
	line-height: 160%;
	text-align: justify;
	margin-top: 2vw;
}



/* -----------------------------------------------
詳細ページ
----------------------------------------------- */
section#topics_single {
	padding: 0px !important;
}

section#topics_single .topics_article {
	padding: 0px;
}

.topics_single_ttl {
	background: #CCC;
	font-size: 2rem;
	padding: 10px 20px;
	line-height: 160%;
	text-align: justify;
}

.info_area {
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0px;
}

.info_area > div {
	margin: 0px 5px;
}

.topics_single_date {
	font-size: 1.4rem;
}

.topics_content {
	font-size: 1.6rem;
	line-height: 200%;
	padding: 20px 0px;
	text-align: justify;
}

.topics_content > p:nth-of-type(n+2) {
	padding: 20px 0px 0px;
}

.topics_img {
	width: 413px;
	height: 413px;
}

.topics_img img {
	width: auto;
	height: 100%;
}

section#topics_single .topics_content a {
	position: relative;
	color: #0095d9;
	text-decoration: underline;
}

section#topics_single .topics_content a::before {
	content: 'LINK';
	background: #000;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: bold;
	display: inline-block;
	padding: 2px 10px;
	margin-right: 10px;
	border-radius: 5px;
}


.topics_content > h2 {
	margin-top: 20px;
	border-bottom: 1px solid #000;
}

.topics_content > h3 {
	margin-top: 20px;
}

.topics_content span.yellow {
	background: linear-gradient(transparent 60%, #ffec47 0%);
	font-weight: bold;
}

.topics_content span.green {
	background: linear-gradient(transparent 60%, #d8e698 0%);
	font-weight: bold;
}

.topics_content span.pink {
	background: linear-gradient(transparent 60%, #eebbcb 0%);
	font-weight: bold;
}