@charset "UTF-8";

/*--------------------------------------------------------------------
technology.html
technology.css
--------------------------------------------------------------------*/


/*------------title---------------------------------------------------------------*/
#works.title h2 { top: 45%; }
#works #TopNav ul li { width: calc(100% / 4); }

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

/*------------worklist---------------------------------------------------------------*/
#worklist a { color: var(--co-black); }
#worklist section {
	display: flex;
	flex-flow: wrap;
	gap: 60px;
}
#worklist section div {
	width: calc((100% - 60px) / 2);
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#worklist 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);
}
#worklist section div h4 span {
	display: block;
	font: bold 2em / 1.2 var(--gothic);
	color: var(--co-sky);
}

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


/*------------technology---------------------------------------------------------------*/
/*一覧*/
#technology section ul {
	display: flex;
	flex-flow: wrap;
	gap: 60px 55px;
}
#technology section ul li {
	display: flex;
	flex-direction: column;
	width: calc((100% - 55px * 2) / 3);
}
#technology section ul li p {
	text-align: center;
	font: bold 1.125em / 1.2 var(--gothic);
	color: var(--co-sky);
}
#technology section ul li p span {
	display: block;
	font: bold 1.67em / 1 var(--mincho);
	color: var(--co-black);
}
#technology section ul li p + p { margin-bottom: 1em; }
#technology section ul li div { margin-top: auto; }

@media (max-width: 760px) {
	#technology section ul { gap: 40px 25px; }
	#technology section ul li { width: calc((100% - 25px) / 2); }
}

@media (max-width: 450px) {
	#technology section ul li {
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}
}

/*詳細*/
#technDetail > p {
	margin-bottom: 50px;
	text-align: center;
}
#technDetail section + section { margin-top: 80px; }
#technDetail h4 {
	position: relative;
	margin-bottom: 20px;
	padding-left: 0;
	border-left: 0 none;
	text-align: center;
}
#technDetail h4 em {
	font-weight: bold;
	color: var(--co-sky);
}
#technDetail .list01 {
	display: flex;
	flex-direction: row-reverse;
	gap: 40px;
	margin-top: 20px;
}
#technDetail section:nth-of-type(2n) .list01 { flex-direction: row; }
#technDetail section:nth-of-type(2n) .list01.phoRai { flex-direction: row-reverse; }
#technDetail .list01 .lisPho {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
#technDetail .list01 .lisTxt {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}
#technDetail .list02 {
	display: flex;
	gap: 60px;
	margin-top: 20px;
}
#technDetail .list02 div { width: calc((100% - 60px) / 2); }
#technDetail .list01 div dl dt,
#technDetail .list01 div h5,
#technDetail .list02 div dl dt,
#technDetail .list02 div h5,
#technDetail .list03 div h5 {
	margin: 20px 0 0.5em;
	font: bold 1.25em / 1 var(--gothic);
	color: var(--co-sky);
}
#technDetail .list03 {
	display: flex;
	gap: 20px;
	margin-top: 20px;
	padding: 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#technDetail .list03 div h5 { text-align: center; }

@media (max-width: 979px) {
	#technDetail > p { padding: 0 0.5em; }
	#technDetail .list02 { gap: 30px; }
	#technDetail .list02 div { width: calc((100% - 30px) / 2); }
}

@media (max-width: 590px) {
	#technDetail .list02 { flex-direction: column; }
	#technDetail .list02 div { width: 100%; }
	#technDetail .list01 {
		flex-direction: column;
		gap: 20px;
	}
	#technDetail section:nth-of-type(2n) .list01 { flex-direction: column; }
	#technDetail section:nth-of-type(2n) .list01.phoRai { flex-direction: column; }
}

/*下部ナビ*/
#technNav {
	width: 90%;
	max-width: 1100px;
	margin: 100px auto 0;
}
#technNav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 55px;
}
#technNav ul li { width: calc((100% - 55px * 2) / 3); }
#technNav ul li a {
	display: flex;
	flex-direction: column;
}
#technNav ul li p:last-of-type {
	margin-top: 10px;
	text-align: center;
	font: bold 1.125em / 1.2 var(--gothic);
	color: var(--co-sky);
}
#technNav ul li p:last-of-type span {
	display: block;
	font: bold 1.67em / 1 var(--mincho);
	color: var(--co-black);
}

@media (max-width: 979px) {
	#technNav ul { gap: 10px; }
	#technNav ul li { width: calc((100% - 10px * 2) / 3); }
	#technNav ul li p:last-of-type span { font: bold 1.25em / 1.2 var(--mincho); }
}

@media (max-width: 590px) {
	#technNav ul li { width: calc((100% - 10px) / 2); }
}

@media (max-width: 430px) {
	#technNav ul li p:last-of-type span { font: bold 1em / 1.2 var(--mincho); }
}


/*------------flow---------------------------------------------------------------*/
#flow section {
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#flow section .floList {
	display: flex;
	flex-flow: row-reverse;
	gap: 40px;
}
#flow section .floPho {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
#flow section .floTxt {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
#flow section h5 {
	display: inline-block;
	margin-top: 1em;
	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);
}
#flow section dl { display: flex; }
#flow section dl dt::after { content: "："; }
#flow section .Btn01 {
	width: 100%;
	max-width: 420px;
	margin: 20px auto 0;
}
#flow section .Btn01 a { padding: 0.5em 2em; }

@media (max-width: 680px) {
	#flow section .floList {
		flex-direction: column;
		gap: 20px;
	}
}


/*------------quality---------------------------------------------------------------*/
#quality section {
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#quality section .quaList {
	display: flex;
	flex-flow: row-reverse;
	gap: 40px;
}
#quality section .quaList:nth-of-type(2n) {
	flex-flow: row;
	margin-top: 30px;
}
#quality section .quaPho {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
#quality section .quaTxt {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
#quality 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);
}
#quality section h5:not(:first-of-type) { margin-top: 1em; }

@media (max-width: 680px) {
	#quality section .quaList {
		flex-direction: column;
		gap: 20px;
	}
	#quality section .quaList:nth-of-type(2n) { flex-flow: column; }
}


/*------------facility---------------------------------------------------------------*/
#facility section {
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#facility section ul {
	display: flex;
	flex-flow: wrap;
	gap: 60px 20px;
}
#facility section ul li { width: calc((100% - 20px * 2) / 3); }
#facility section ul li p + p {
	margin-top: 0.25em;
	text-align: center;
}
#facility table tr th { text-align: center; }
#facility table tr th:not(:last-of-type) { border-right: 1px solid var(--co-sky); }
#facility table tr td:not(:last-of-type) { border-right: 1px solid var(--co-gray30); }
#facility table tr td:not(:first-of-type) { text-align: center; }

@media (max-width: 979px) {
	#facility table tr th,
	#facility table tr td { display: table-cell; }
	.scroll p { display: none; }
}

@media (max-width: 760px) {
	#facility section ul { gap: 40px 25px; }
	#facility section ul li { width: calc((100% - 25px) / 2); }
}

@media (max-width: 540px) {
	.scroll p { display: block; }
}

@media (max-width: 450px) {
	#facility section ul li {
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
	}
	.scroll p { display: block; }
}


/*------------movie---------------------------------------------------------------*/
#movie section ul {
	display: flex;
	flex-flow: wrap;
	gap: 60px;
	counter-reset: item;
}
#movie section ul li { width: calc((100% - 60px) / 2); }
#movie section ul li h4 { margin-top: 0.5em; }
#movie section ul li h4 em {
	font-size: 0.625em;
	font-weight: bold;
}

@media (max-width: 760px) {
	#movie section ul { gap: 40px 25px; }
	#movie section ul li { width: calc((100% - 25px) / 2); }
}

@media (max-width: 450px) {
	#movie section ul li {
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}
}


/*------------specialist---------------------------------------------------------------*/
/*一覧*/
#specialist section ul {
	display: flex;
	flex-flow: wrap;
	gap: 60px 55px;
	counter-reset: item;
}
#specialist section ul li { width: calc((100% - 55px * 2) / 3); }
#specialist section ul li p {
	text-align: center;
	font: bold 1.125em / 1.2 var(--gothic);
	color: var(--co-sky);
}
#specialist section ul li p span::before {
	display: block;
  counter-increment: item;
  content: "SPECIALIST." counter(item, decimal-leading-zero);
	font: bold 1.67em / 1 var(--mincho);
	color: var(--co-black);
}

@media (max-width: 760px) {
	#specialist section ul { gap: 40px 25px; }
	#specialist section ul li { width: calc((100% - 25px) / 2); }
}

@media (max-width: 450px) {
	#specialist section ul li {
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}
}

/*詳細*/
#specialDetail #first .speTxt { max-width: 560px; }
#specialDetail #first h4 {
	position: relative;
	margin-bottom: 20px;
	padding-left: 0;
	border-left: 0 none;
	text-align: left;
	font: bold 1em / 1.2 var(--mincho);
}
#specialDetail #first h4 span {
	display: block;
	margin-top: 0.5em;
	font: bold 2em / 1.2 var(--gothic);
	color: var(--co-sky);
}
#specialDetail #first dl dt {
	margin-top: 20px;
	font: normal 0.9375em / 1.2 var(--gothic);
}
#specialDetail #first dl dd {
	margin-top: 0.15em;
	font: bold 1.625em / 1.2 var(--gothic);
}
#specialDetail #first dl dd span {
	display: inline-block;
	margin-left: 0.5em;
	font-size: 0.57em;
}
#specialDetail section:not(#first) {
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
#specialDetail #first,
#specialDetail .speBox {
	display: flex;
	gap: 40px;
}
#specialDetail section:nth-of-type(2n) .speBox { flex-flow: row-reverse; }
#specialDetail .spePho {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
#specialDetail .spePho img {
	width: 520px;
	height: 100%;
	min-height: 390px;
}
#specialDetail .spePho img.trans {
	width: 100%;
	height: auto;
	min-height: inherit;
}
#specialDetail .speTxt {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

@media (max-width: 680px) {
	#specialDetail #first,
	#specialDetail .speBox {
		flex-direction: column;
		gap: 20px;
	}
	#specialDetail section:nth-of-type(2n) .speBox { flex-flow: column; }
	#specialDetail .spePho img {
		width: 100%;
		height: auto;
		min-height: inherit;
	}
}

/*下部ナビ*/
#specialNav {
	width: 90%;
	max-width: 1100px;
	margin: 100px auto 0;
}
#specialNav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#specialNav ul li { width: calc((100% - 10px * 4) / 5); }
#specialNav ul li a {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	background-color: var(--co-black);
}
#specialNav ul li p:first-of-type { background-color: var(--co-white); }
#specialNav ul li p:last-of-type {
	padding: 5px;
	font: bold 0.875em / 1.2 var(--gothic);
	color: var(--co-white);
}

@media (max-width: 680px) {
	#specialNav ul li { width: calc((100% - 10px * 2) / 3); }
}

@media (max-width: 380px) {
	#specialNav ul li { width: calc((100% - 10px) / 2); }
}