@charset "utf-8";
@import url("/ssi/css/detail.css");

/* SDGsインデックスページ */
#sdgs_index_list .box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	margin-top: 50px;
}
#sdgs_index_list .box .img {
	width: 100px;
}
#sdgs_index_list .box .img img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
#sdgs_index_list .box .txt {
	width: calc(100% - 140px);
}
#sdgs_index_list .box .txt p {
	margin: 1em 0px 0px;
}
#main_body #sdgs_index_list .box .txt h2 {
	margin: 0px;
	padding: 0px;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-box-shadow: none;
	        box-shadow: none;
	font-size: 2.4rem;
	color: inherit;
}
#main_body #sdgs_index_list .box .txt h2::before,
#main_body #sdgs_index_list .box .txt h2::after {
	display: none;
}

/* SDGs一覧ページ */
.content_header_wrap {
	margin-bottom: 20px;
}

#sdgs_details_wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 30px;
}

.sdgs_details {
	width: calc(50% - 15px);
}
.sdgs_details.nodata {
	width: 100%;
}
#main_body .sdgs_details h2 {
	margin-top: 0px;
}

.sdgs_details .info_list.info_list_date ul li {
	display: block;
}
.sdgs_details .info_list.info_list_date ul li > span {
	display: block;
}
.sdgs_details .info_list.info_list_date ul li > span.article_date {
	width: auto;
	padding-top: 0px;
}

.expand,
.collapse {
	display: none; /* 初期状態は非表示 */
	margin-top: 20px;
	text-align: center;
}
.expand a,
.collapse a {
	display: inline-block;
	background: var(--btn-background, #e6e6e6);
	border: var(--btn-border, 1px solid transparent);
	border-radius: var(--btn-borderradius, 0);
	-webkit-box-shadow: var(--btn-boxshadow, none);
	        box-shadow: var(--btn-boxshadow, none);
	color: var(--btn-color, #333333);
	text-decoration: var(--btn-textdecoration, none);
	font-size: var(--fontsize-main-small, 1.5rem);
	line-height: 1.8rem;
	padding: 10px 20px;
	text-align: center;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-transition: var(--btn-transition, none);
	-o-transition: var(--btn-transition, none);
	transition: var(--btn-transition, none);
	min-width: 260px;
}
.expand a:hover,
.expand a:focus,
.collapse a:hover,
.collapse a:focus {
	background: var(--btn-hover-background, #e6e6e6);
	border: var(--btn-hover-border, 1px solid transparent);
	border-radius: var(--btn-hover-borderradius, 0);
	-webkit-box-shadow: var(--btn-hover-boxshadow, none);
	        box-shadow: var(--btn-hover-boxshadow, none);
	color: var(--btn-hover-color, #333333);
	text-decoration: var(--btn-hover-textdecoration, underline);
}

/* 背景色変更時 */
.color_change .expand a,
.color_change .collapse a {
	background: rgba(255, 255, 255, 0.2) !important;
	-webkit-box-shadow: none;
	        box-shadow: none;
}


/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 670px) {

	#sdgs_index_list .box {
		margin-top: 30px;
	}
	#sdgs_index_list .box .img {
		width: 60px;
	}
	#sdgs_index_list .box .txt {
		width: calc(100% - 80px);
	}
	#main_body #sdgs_index_list .box .txt h2 {
		font-size: 1.8rem;
	}

	#sdgs_details_wrap {
		margin-top: 40px;
		gap: 20px;
	}
	.sdgs_details {
		width: 100%;
	}

	.expand a,
	.collapse a {
		width: 50%;
		min-width: auto;
		padding: 10px;
		font-size: var(--fontsize-main-small, 1.3rem);
	}

}
/* ==================================================
スマートフォン ここまで
================================================== */