@charset "UTF-8";

/*--------------------------------------------------------------------
company.html
company.css
--------------------------------------------------------------------*/


/*------------title---------------------------------------------------------------*/
#company.title { background: url("../img/t_company.jpg") no-repeat center center / cover; }
#company.title h2 { top: 45%; }
#company #TopNav ul li { width: calc(100% / 6); }

@media (max-width: 979px) {
	#company.title h2 { top: 55%; }
}

/*------------message---------------------------------------------------------------*/
#message section {
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse;
	gap: 20px 40px;
}
#message #mesPho {
	width: 100%;
	max-width: 500px;
}
#message #mesPho img { border-radius: 10px 10px 0 0; }
#message #mesTxt {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
}
#message dl { margin-top: 1.5em; }
#message #idea dl:first-of-type { margin-top: 0; }
#message dl dt {
	display: flex;
	align-items: center;
	margin-bottom: 0.5em;
	font: bold 1.5em / 1 var(--mincho);
	color: var(--co-sky);
}
#message dl dt span {
	display: inline-block;
	margin-left: 1em;
	font-size: 0.67em;
	color: var(--co-black);
}
#message dl dt span::before,
#message dl dt span::after {
	display: inline-block;
	content: "－";
	margin: 0 0.25em;
}
#message #idea dl dd {
	text-align: center;
	font: bold 2em / 1 var(--mincho);
	color: var(--co-red);
}
#message #idea p { margin-top: 1em; }
#message dl#name {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	margin-top: auto;
}
#message dl#name * {
	font-family: var(--mincho);
	font-weight: bold;
}
#message dl#name dt {
	font-size: 1em;
	color: var(--co-black);
}
#message dl#name dd {
	margin-left: 0.4em;
	font-size: 1.5em;
}

@media (max-width: 640px) {
	#message section { flex-direction: column; }
	#message #mesPho,
	#message #mesTxt { margin: 0 auto; }
	#message dl#name { margin-top: 1em; }
}

/*------------overview---------------------------------------------------------------*/
#overview table tr td dl { display: flex; }
#overview table tr td > dl:not(:first-of-type) { margin-top: 1em; }
#overview table tr td > dl > dt {
	min-width: 12em;
	font-weight: bold;
	color: var(--co-red);
}
#overview table tr td > dl > dd > span { display: inline-block; }
#overview table tr td > dl > dd > span:not(:last-of-type) { margin-right: 1em; }
#overview table tr td .number { display: flex; }
#overview table tr td .number dl + dl { margin-left: 3em; }
#overview table tr td .number dl dt::after { content: "："; }
#overview table tr td ul {
	display: flex;
	flex-wrap: wrap;
}
#overview table tr td ul li:not(:last-of-type)::after {
	margin: 0 0.5em;
	content: "／";
}
#overview table tr td #transaction li:nth-last-of-type(2)::after {
	margin: 0;
	content: "";
}

@media (max-width: 979px) {
	#overview table tr th { width: 100%; }
	#overview table tr td > dl { flex-direction: column; }
	#overview table tr td .number { display: block; }
	#overview table tr td .number dl + dl { margin-left: 0; }
}

/*------------history---------------------------------------------------------------*/
#history table tr th span { color: transparent; }
#history ul {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	margin-top: 60px;
}
#history ul li { width: calc((100% - 60px) / 2); }
#history .name {
	height: 1em;
	vertical-align: baseline;
}

@media (max-width: 979px) {
	#history table tr th { width: 100%; }
}

@media (max-width: 490px) {
	#history ul {
		gap: 30px;
		margin-top: 30px;
	}
	#history ul li { width: 100%; }
}


/*------------sustaine---------------------------------------------------------------*/
#sustaine > p {
	width: 90%;
	margin: 0 auto 70px;
	text-align: center;
}
#sustaine section {
	display: flex;
	flex-flow: wrap;
	gap: 60px;
}
#sustaine section div {
	width: calc((100% - 60px) / 2);
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#sustaine section div h4 {
	position: relative;
	margin-bottom: 20px;
	padding-left: 0;
	border-left: 0 none;
	text-align: center;
	font: bold 1em / 1.2 var(--mincho);
}
#sustaine section div h4 span {
	display: block;
	font: bold 2em / 1.2 var(--gothic);
	color: var(--co-sky);
}

@media (max-width: 480px) {
	#sustaine section {
		flex-direction: column;
		gap: 30px;
	}
	#sustaine section div { width: 100%; }
}


/*------------group---------------------------------------------------------------*/
#group section {
	width: 100%;
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#group section .groFle {
	display: flex;
	gap: 0 80px;
	flex-flow: row-reverse;
}
#group section .groPho {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
#group section .groTxt {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}
#group section h5 {
	display: inline-block;
	margin-bottom: 0.5em;
	padding: 0.25em 1em 0.15em;
	background-color: var(--co-sky);
	border-radius: 999px;
	font: bold 1.25em / 1.2 var(--gothic);
	color: var(--co-white);
}
#group section h5:not(:first-of-type) { margin-top: 1em; }
#group section p span { display: inline-block; }
#group section p span:not(:last-of-type) { margin-right: 1em; }
#group section .number,
#group section .number dl { display: flex; }
#group section .number dl dt::after { content: "："; }
#group section .number dl + dl { margin-left: 3em; }
#group section .link a { color: var(--co-black); }
#group section .link a::before {
	display: inline-block;
	content: "";
	width: 13px;
	height: 13px;
	margin-right: 0.25em;
	background: url("../img/link.png") no-repeat left top;
}

@media (max-width: 480px) {
	#group section .groFle {
		flex-direction: column;
		gap: 20px;
	}
	#group section .number { display: block; }
	#group section .number dl + dl { margin-left: 0; }
}


/*------------access---------------------------------------------------------------*/
#access section {
	width: 100%;
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#access section .accFle {
	display: flex;
	gap: 0 80px;
	flex-flow: row;
}
#access section .accMap {
	width: 100%;
	max-width: 630px;
	margin: 0 auto;
}
#access section .accTxt {
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
}
#access section h5 {
	display: inline-block;
	margin: 1em 0 0.5em;
	padding: 0.25em 1em 0.15em;
	background-color: var(--co-sky);
	border-radius: 999px;
	font: bold 1.25em / 1.2 var(--gothic);
	color: var(--co-white);
}
#access section dl { display: flex; }
#access section dl dt::after { content: "："; }

@media (max-width: 480px) {
	#access section .accFle {
		flex-direction: column;
		gap: 20px;
	}
}