@charset "UTF-8";

/*--------------------------------------------------------------------
product.html
works.css
--------------------------------------------------------------------*/

/*------------sdgs---------------------------------------------------------------*/

/*------------topTxt------------------------------------*/
#topTxt section > p { text-align: center; }
#topTxt #data {
	margin-top: var(--parag-bet);
	text-align: right;
}
#topTxt #data p:not(:first-of-type) { margin-top: 0; }
#topTxt #data dl {
	display: flex;
	justify-content: flex-end;
}
#topTxt #data dl dt { margin-right: 1em; }

/*------------sdgs------------------------------------*/
#sdgs section:not(:first-of-type) { margin-top: 65px; }
#sdgs h4 {
	padding-bottom: 0;
	border-bottom: 0 none;
}
#sdgs h4::before,
#sdgs h4::after { display: none; }
#sdgs dl {
	display: flex;
	margin-top: var(--parag-bet);
}
#sdgs dl dt { color: var(--co-sub); }
#sdgs dl dt::after {
	content: "：";
	color: var(--co-black);
}
#sdgs dl dd { flex: 1; }
#sdgs ul {
	display: flex;
	gap: 60px;
	width: 90%;
	max-width: 860px;
	margin: 25px auto 0;
}
#sdgs ul li { width: calc((100% - 60px * 4) / 5); }

/*------------sdgsBtn------------*/
#sdgs #sdgsBtn { margin-top: 65px; }
#sdgs #sdgsBtn a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	height: 100%;
	margin: 0 auto;
	padding: 0.5em 4em;
	background-color: var(--co-main);
	border: 1px solid var(--co-main);
	border-radius: 10px;
	text-align: center;
/*	font: bold 1rem / 1.2 var(--mincho);
	font-feature-settings: "palt" 1;*/
	color: var(--co-white);
}
#sdgs #sdgsBtn a::before {
	position: absolute;
	content: "";
	display: block;
	width: 8px;
	height: 9px;
	background-color: var(--co-white);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	top: 48%;
	right: 0.5em;
	transform: var(--transformY);
	transition: 0.5s;
}
#sdgs #sdgsBtn a:hover {
	background-color: var(--co-white);
	color: var(--co-main);
}
#sdgs #sdgsBtn a:hover::before { background-color: var(--co-main); }

/*------------sdgsLogo------------*/
#sdgs #sdgsLogo > div {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px 40px;
}
#sdgs #sdgsLogo > div p:not(:first-of-type) { margin-top: 0; }
#sdgs #sdgsLogo > p {
	margin-top: 45px;
	text-align: center;
}
#sdgs #sdgsLogo > p a {
	display: inline-block;
	padding: 0.25em 0.5em;
	background-color: transparent;
	border-bottom: 2px solid var(--co-darkbrown);
	color: var(--co-darkbrown);
}
#sdgs #sdgsLogo > p a:hover {
	background-color: var(--co-darkbrown);
	border-bottom: 2px solid transparent;
	color: var(--co-white);
}

@media (max-width: 860px) {
	#sdgs ul { gap: 20px; }
	#sdgs ul li { width: calc((100% - 20px * 4) / 5); }
}

@media (max-width: 580px) {
	#sdgs ul { flex-wrap: wrap; }
	#sdgs ul li { width: calc((100% - 20px * 2) / 3); }
	#sdgs #sdgsLogo > div {
		flex-direction: column;
	}
}