@charset "utf-8";


.m-Part {margin:130px 0}
.m-Part2 {margin:130px auto}
.p-Part {padding:130px 0}

@media all and (max-width:976px) {
    .m-Part {margin:90px 0}
    .m-Part2 {margin:90px auto}
	.p-Part {padding:90px 0}
}




#sTitle {margin-bottom:3em; text-align:center}
#sTitle h3 {font-size:4.0rem; color:#222; font-weight:800;}
#sTitle .t1 {margin-top:1em; font-size:1.8rem; line-height:1.6em}

@media all and (max-width:480px) {
	#sTitle {margin-bottom:5em;}
}



#sBtn {background:#333; padding:1em 2em; font-size:1.8rem; color:#FFF; font-weight:400; display:inline-block;}
#sBtn i {padding-left:1em}
#sBtn:hover {background:#2d5fa5 ;}



#HalfWrap {display:flex}
#HalfWrap #titWrap {width:260px; }
#HalfWrap #titWrap h3 {font-size:4.0rem; font-weight:800; color:#222}
#HalfWrap #contWrap {width:calc(100% - 260px); }

#HalfWrap.ethical1 #titWrap {width:320px; }
#HalfWrap.ethical1 #contWrap {width:calc(100% - 320px); }


@media all and (max-width:1280px) {
	#HalfWrap #titWrap {width:200px; }
	#HalfWrap #contWrap {width:calc(100% - 200px); }

	#HalfWrap.recruit5 #titWrap {width:250px; }
	#HalfWrap.recruit5 #contWrap {width:calc(100% - 250px); }
}
@media all and (max-width:1024px) {
	#HalfWrap.ethical1  {flex-wrap:wrap}
	#HalfWrap.ethical1 #titWrap {width:100%; margin-bottom:2em }
	#HalfWrap.ethical1 #titWrap h3 br {display:none}
	#HalfWrap.ethical1 #contWrap {width:100%;  }

	#HalfWrap.recruit5 {flex-wrap:wrap}
	#HalfWrap.recruit5 #titWrap {width:100%;  margin-bottom:1em}
	#HalfWrap.recruit5 #contWrap {width:100%;  }
}
@media all and (max-width:976px) {
	#HalfWrap {flex-wrap:wrap}
	#HalfWrap #titWrap {width:100%; margin-bottom:2em; }
	#HalfWrap #contWrap {width:100%; }
}
@media all and (max-width:480px) {
	#HalfWrap #titWrap h3 {font-size:3.5rem;}
}






#company1 {padding:0 5% 5em 5%; text-align:center; background:url('/images/sub/company1-bg.png') no-repeat center bottom}
#company1 .eng {margin-bottom:1em; font-size:2.6rem; color:#2d5fa5; font-weight:800}
#company1 h3 {font-size:6.4rem; color:#222; font-weight:800}
#company1 .img {padding:65px 0}
#company1 .img img {width:100%; max-width:341px}
#company1 .t1 {font-size:1.8rem; margin-bottom:0.5em}

#company1-2 { display:flex;}
#company1-2 li {width:33.3333%; height:25vw; color:#FFF; display:flex; align-items: center; justify-content:center; 
					counter-increment: number; position:relative; }
#company1-2 li:before {content: counter(number, decimal-leading-zero); font-size:10.0rem; font-family:'Roboto'; font-weight:900; 
					opacity:.08; position:absolute; left:50%; top:47%; transform:translate(-50%, -100%)}
#company1-2 li.bg1 {background:url('/images/sub/company1-img1.png') no-repeat center center; background-size:cover}
#company1-2 li.bg2 {background:url('/images/sub/company1-img2.png') no-repeat center center; background-size:cover}
#company1-2 li.bg3 {background:url('/images/sub/company1-img3.png') no-repeat center center; background-size:cover}
#company1-2 li dl { text-align:center;}
#company1-2 li dl dt { font-size:4.4rem; font-weight:800} 
#company1-2 li dl dd { margin-top:1em; font-size:1.9rem; line-height:1.7em; word-break: break-word; overflow-wrap: break-word; padding: 0 5%; } 

@media all and (max-width:1180px) {
	#company1-2 li dl dt { font-size:3.8rem;}
	#company1-2 li dl dd { font-size:1.7rem;}
}
@media all and (max-width:976px) {
	#company1-2 { flex-wrap:wrap}
	#company1-2 li {width:100%;  height:300px;}
}
@media all and (max-width:640px) {
	#company1 .img {padding:45px 0}
}
@media all and (max-width:580px) {
	#company1 h3 {font-size:5.5rem;}
	#company1 .img {width:70%}

	#company1-2 li {height:60vw;}
}








#historyTop {width:100%; height:380px;  background:url('/images/sub/company2-bg.png')no-repeat right top; display:table; background-size:cover; overflow:hidden}
#historyTop .in-box {padding-left:5%; display:table-cell; vertical-align:middle; color:#FFF; position:relative}
#historyTop .eng {font-size:8.0rem; font-weight:900; letter-spacing:0.05em;  font-family:'Montserrat'; opacity:.1; position:absolute; left:0; bottom:-20px}
#historyTop h3 {width:100%; max-width: 660px;  font-size:3.8rem; font-weight:500;  line-height:1.3em;}
#historyTop .t1 {font-size:1.8rem; margin-top:1em}
@media all and (max-width:1024px) {
}
@media all and (max-width:976px) {
	#historyTop .eng {font-size:7.0rem;}
}
@media all and (max-width:740px) {	
	#historyTop {height:45vw; }
}
@media all and (max-width:640px) {	
	#historyTop h3 { font-size:3.2rem; }
	#historyTop .t1 {font-size:1.6rem;}
}
@media all and (max-width:480px) {	
	#historyTop {height:50vw; }
	#historyTop .eng {font-size:5.0rem;}
}

.his_wrap {overflow:hidden; box-sizing:border-box; position:relative; }
.his_wrap:before{content:""; position:absolute; top:0; left:50%; margin-left:-0.5px; width:1px; height:100%; background:#ddd; z-index:1;}

.his_wrap .his_bx{box-sizing:border-box; padding-top:5em; position:relative; overflow:hidden;}
.his_wrap .his_bx .in{clip: rect(auto, auto, auto, auto); top:0; left:0; width:100%; height:100%; position:absolute; z-index:0; overflow:hidden;}
.his_wrap .his_bx .in .bg{position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-repeat:no-repeat; background-position:center center; transform: translateZ(0); will-change: transform; }
.his_wrap .his_bt{padding-bottom:8em}

.his_wrap li {position:relative; z-index:2;  width:50%; float:right; text-align:left; padding:0 0 3em 50px; box-sizing:Border-box;}
.his_wrap li+li{clear:both;}

.his_wrap li .t { position:relative; font-size:5.0rem; margin-bottom:1em; color:#2d5fa5  ; font-weight:800;  font-family:'Roboto'}
.his_wrap li .t:before {content:""; position:absolute; top:0.45em; left:-60px; width:20px; height:20px; border-radius:100%; background:#118cce; border:6px solid #dff4ff;}
.his_wrap li .c .stit {font-size:2.2rem; color:#222; padding-bottom:2em; font-weight:600}
.his_wrap li .c dt{ width:60px; display:inline-block; vertical-align:top; margin-bottom:20px; color:#212121; font-weight: 700; line-height: 1.5em;  font-size:2.0rem; font-family:'Roboto'}
.his_wrap li .c dd{width:calc(100% - 60px); display:inline-block; vertical-align:top; margin-bottom:20px; line-height: 1.5em; font-size:1.7rem }
.his_wrap li .c p { margin-bottom:0.5em;}

.his_wrap li:nth-of-type(2n) {float:left; text-align:right;  padding:0 50px 3em 0;}
.his_wrap li:nth-of-type(2n) .t:before{left:unset; right:-60px;}
.his_wrap li:nth-of-type(2n) dt{float:right; }
.his_wrap li:nth-of-type(2n) .c p::before { left: unset; right:0; }


@media all and (max-width:767px) {
	.his_wrap .his_bx{ padding-left:10px;}
	.his_wrap:before{ margin-left:0; left:10px;  }
	.his_wrap li{ width:100%; padding:0 0 3em 20px;}
	.his_wrap li .t { font-size: 4.0rem; }
	.his_wrap li .t:before { top:0.35em;   left:-30px; }
	.his_wrap li .c dt{ width:50px; }
	.his_wrap li .c dd{width:calc(100% - 50px); }

	.his_wrap li:nth-of-type(2n){float:right; text-align:left; padding:0 0 3em 20px;}
	.his_wrap li:nth-of-type(2n) .t:before{left:-30px; right:inherit;}
	.his_wrap li:nth-of-type(2n) dt{float:left; }
	.his_wrap li:nth-of-type(2n) .c p::before { right:unset; left: 0;  }
}

@media all and (max-width:568px) {
	.history-top { padding: 12% 0; }
	.history-top h4 { font-size: 3.5rem; }
}






#company3 {display:flex}
#company3 #titWrap {width:260px; }
#company3 #titWrap h3 {font-size:4.0rem; font-weight:800; color:#222}
#company3 #contWrap {width:calc(100% - 260px); }

@media all and (max-width:1280px) {
	#company3 #titWrap {width:200px; }
	#company3 #contWrap {width:calc(100% - 200px); }
}
@media all and (max-width:976px) {
	#company3 {flex-wrap:wrap}
	#company3 #titWrap {width:100%; margin-bottom:2em; }
	#company3 #contWrap {width:100%; }
}




#company3 #contWrap .part1 {display:flex; flex-wrap:wrap; gap:5px}
#company3 #contWrap .part1 li {height:180px; width:32%; padding:3%;  background-size:cover; background-repeat:no-repeat;
										display:flex;align-items: end; counter-increment: number; position:relative; overflow:hidden }
#company3 #contWrap .part1 li:before {content: counter(number, decimal-leading-zero); font-size:10.0rem; font-family:'Roboto'; 
												font-weight:800; color:#FFF; opacity:.2; position:absolute; left:-26px; top:50%;
												transform:translateY(-30%)}
#company3 #contWrap .part1 li p {font-size:2.0rem; color:#FFF;  }
#company3 #contWrap .part1 li.bg1 {background-image:url('/images/sub/company3-bg1.png'); background-position:right top}
#company3 #contWrap .part1 li.bg2 {background-image:url('/images/sub/company3-bg2.png')}
#company3 #contWrap .part1 li.bg3 {background-image:url('/images/sub/company3-bg3.png')}
#company3 #contWrap .part1 li.bg4 {background-image:url('/images/sub/company3-bg4.png')}
#company3 #contWrap .part1 li.bg5 {background-image:url('/images/sub/company5-bg1.jpg')}
#company3 #contWrap .part1 li.bg6 {background-image:url('/images/sub/company5-bg2.jpg')}
#company3 #contWrap .part1 li.bg7 {background-image:url('/images/sub/company5-bg3.jpg')}

@media all and (max-width:1024px) {
	#company3 #contWrap .part1 { gap:0}
	#company3 #contWrap .part1 li { height:150px; width:100%; margin-bottom:5px; padding:5%;}
}
@media all and (max-width:480px) {
	#company3 #contWrap .part1 li:before { left:-5%; }
}



#company3 #contWrap .part2 {display:flex;}
#company3 #contWrap .part2 li {margin-left:-20px; width:230px; height:230px; border-radius:50%; 
										display:flex; justify-content:center; align-items: center;  }
#company3 #contWrap .part2 li p {font-size:2.2rem; font-weight:600}
#company3 #contWrap .part2 li.bg5 p {font-size:2.4rem; font-weight:700}
#company3 #contWrap .part2 li.bg1 { border:1px solid #2d5fa5; color:#2d5fa5}
#company3 #contWrap .part2 li.bg2 { border:1px solid #2d8aa5; color:#2d8aa5}
#company3 #contWrap .part2 li.bg3 { border:1px solid #2da587; color:#2da587}
#company3 #contWrap .part2 li.bg5 { background: #2d5fa5; color:#FFF}

@media all and (max-width:1399px) {
	#company3 #contWrap .part2 li { width:200px; height:200px; }
}
@media all and (max-width:1280px) {
	#company3 #contWrap .part2 li { width:16vw; height:16vw; }
}
@media all and (max-width:976px) {
	#company3 #contWrap .part2 li { width:20vw; height:20vw; margin-left:-10px}
	#company3 #contWrap .part2 li img {width:50%; margin:0 auto}
}



#company3 #bgWrap {width:50%; text-align:center; color:#FFF; height:440px;
							display:flex; justify-content:center; align-items: center; }
#company3 #bgWrap.bg1 {background:url('/images/sub/company3-bg5.png') no-repeat center center; background-size:cover}
#company3 #bgWrap.bg2 {background:url('/images/sub/company3-bg6.png') no-repeat center center; background-size:cover}
#company3 #bgWrap dl dt {font-size:4.0rem; font-weight:800}
#company3 #bgWrap dl dd {margin-top:1em; font-size:1.8rem; line-height:1.6em}

@media all and (max-width:1280px) {
	#company3 #bgWrap { height:380px;}
}
@media all and (max-width:976px) {
	#company3 #bgWrap { width:100% }
}
@media all and (max-width:480px) {
	#company3 #bgWrap { height:70vw; }
}




#company3 #contWrap .part4 {display:flex; flex-wrap:wrap; gap:5px}
#company3 #contWrap .part4 li {width:270px; line-height:80px; border-radius:40px; text-align:center  }
#company3 #contWrap .part4 li p {font-size:2.0rem; font-weight:500; color:#FFF}
#company3 #contWrap .part4 li.bg1 { background: #2d5fa5; }
#company3 #contWrap .part4 li.bg2 { background: #2d8aa5; }
#company3 #contWrap .part4 li.bg3 { background: #2da587; }
#company3 #contWrap .part4 li.bg4 { background: #63a52d; }

@media all and (max-width:976px) {
	#company3 #contWrap .part4 li {width:49%;  line-height:60px;}
}











.company4 dl {margin-bottom:3em}
.company4 dl dt {font-size:2.2rem; color:#222; font-weight:600}
.company4 dl dd {margin-top:1em; line-height:1.3em}
.company4 .imgcont {display:flex; gap:5px}
.company4 .imgcont  li { width:49%; }
.company4 .imgcont  li .img { padding:10% 8%; border:1px solid #DDD}
.company4 .imgcont  li .img p {color:#222; font-size:1.8rem; font-weight:600; margin-bottom:1.2em;}
.company4 .imgcont  li .img img {width:100%; max-width:460px}
.company4 .imgcont  li:nth-child(2) .img img {padding:55px 0;}
.company4 .imgcont  li .downBtn {display:inline-block; margin:20px 5px 0 0; background:#555; color:#FFF; 
											padding:1em 2em; font-weight:500 }
.company4 .imgcont  li .downBtn:hover {background:#2d5fa5}

@media all and (max-width:1399px) {
	.company4 .imgcont  li:nth-child(2) .img img {padding:3.48vw 0;}
}
@media all and (max-width:1280px) {
	.company4 .imgcont  li .downBtn { font-size:1.5rem; padding:0.7em 1em;  margin:10px 3px 0 0; }
}
@media all and (max-width:976px) {
	.company4 .imgcont {flex-wrap:wrap}
	.company4 .imgcont  li { width:100%; margin-bottom:20px }
}


.company4 .colorcont {display:flex; gap:5px; color:#FFF}
.company4 .colorcont li {width:32%; padding:8% 0 3% 3%}
.company4 .colorcont li p span {padding-right:20px}
.company4 .colorcont li.bg1 {background-color:#2b3990}
.company4 .colorcont li.bg2 {background-color:#ed1c29}
.company4 .colorcont li.bg3 {background-color:rgba(0,0,0,100)}

@media all and (max-width:767px) {
	.company4 .colorcont { flex-wrap:wrap; gap:0; }
	.company4 .colorcont li {width:100%; margin-bottom:5px; }
}







#company5 {background:url('/images/main/msumitomo-bg.png')no-repeat right top; background-size:cover}
#company5 .contWrap {width:100%; max-width:700px; text-align:center}
#company5 .contWrap .t1 {margin-bottom:1em; font-size:2.0rem;color:#FFF}
#company5 .contWrap img {width:100%; max-width:550px; padding-bottom:10%}

@media all and (max-width:1399px) {
	#company5 {background-position:70% top}
}


#tbStyle {width: 100%; color:#FFF; border-top:2px solid #FFF}
#tbStyle th, 
#tbStyle td {padding:1em; border-bottom: 1px solid rgba(255,255,255,0.3); font-size:1.8rem}
#tbStyle tbody th {border-right: 1px solid rgba(255,255,255,0.3);}
#tbStyle tbody td {padding-left:2em; text-align:left}
#tbStyle tbody td span {display:inline-block; padding-right:30px}

@media all and (max-width:880px) {
	#tbStyle {background:rgba(0,0,0,0.03);  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px)}
	#tbStyle tbody td {padding-left:1em;}
}





#compnay6 { text-align:center}
#compnay6 h3 {font-size:4.5rem; color:#222; font-weight:800}
#compnay6 .t1 {margin-top:1em; font-size:2.0rem; line-height:1.2em}
#compnay6 ul {margin-top:3%; display:flex; justify-content:center;}
#compnay6 ul li {padding:2em;  border-radius:100px; color:#FFF; font-size:2.0rem; font-weight:700; text-align:center; margin:0 -10px}
#compnay6 ul li.bg1 {background:rgba(45,95,165,0.9)}
#compnay6 ul li.bg2 {background:rgba(45,138,165,0.9)}
#compnay6 ul li.bg3 {background:rgba(45,165,135,0.9)}

@media all and (max-width:1160px) {
	#compnay6 ul  { width:90%; max-width:1040px; margin:3% auto 0}
}
@media all and (max-width:767px) {
	#compnay6 ul { flex-wrap:wrap; }
	#compnay6 ul li {padding:1.5em; width:90%; margin:3px }
}


#halfImg55 section { display:flex; align-items: center;}
#halfImg55 section .imgWrap {width:55%;}
#halfImg55 section .imgWrap img { width:100%}
#halfImg55 section .txtWrap {width:45%; padding:0 0 0 8%}
#halfImg55 section .txtWrap h3 {font-size:3.6rem; color:#2d5fa5; font-weight:800}
#halfImg55 section .txtWrap .t1 {margin-top:1em; line-height:1.6em}

#halfImg55 section:nth-child(even) {margin:10% 0}
#halfImg55 section:nth-child(even) .imgWrap {order:2}
#halfImg55 section:nth-child(even) .txtWrap {order:1; padding:0 8% 0 0}

@media all and (max-width:976px) {
	#halfImg55 section { flex-wrap:wrap}
	#halfImg55 section .imgWrap {width:100%;}
	#halfImg55 section .txtWrap {width:100%; padding:0; margin-top:5%}

	#halfImg55 section:nth-child(even) .imgWrap {order:1}
	#halfImg55 section:nth-child(even) .txtWrap {order:2}
}



#dotList li { position:relative; margin-bottom:0.5em;}
#dotList li:before {content:''; width:5px; height:5px; border-radius:100%; background:#2d5fa5; position:absolute; left:0; top:0.6em}
#dotList li p { padding-left:13px; font-size:1.8rem; color:#222}

#dotList.pro1 li:before {top:0.85em}
#dotList.recruit5 li:before {width:3px; height:3px; background:#888; top:0.5em }
#dotList.recruit5 li p {color:#686868}


#company7 {text-align:center}
#company7 h3 {font-size:4.5rem; color:#222; font-weight:800}
#company7 h3 .point {color:#008357}
#company7 .t1 {margin-top:1em; font-size:2.0rem; line-height:1.2em}


#company7-bg {margin:5% auto; padding:5%; height:510px; background:url('/images/sub/company7-bg.png')no-repeat left top; background-size:cover; display:flex; align-items: center; }
#company7-bg .contWrap {width:800px; margin-left:auto; text-align:Center }
#company7-bg .contWrap > dl {color:#FFF}
#company7-bg .contWrap > dl dt {font-size:3.2rem; font-weight:600; margin:1em 0 0.5em }
#company7-bg .contWrap > dl dd {font-size:1.8rem; line-height:1.6em; opacity:.8}

@media all and (max-width:1280px) {
	#company7-bg { padding:0; height:450px; }
}
@media all and (max-width:978px) {
	#company7-bg .contWrap {width:100%}
	#company7-bg .contWrap img {width:150px}
	#company7-bg .contWrap > dl dt { margin:0.8em 0 0.5em }
	#company7-bg .contWrap > dl dd { line-height:1.4em; }
}
@media all and (max-width:580px) {
	#company7-bg { padding:0 3%;}
	#company7-bg .contWrap > dl dd br {display:none}
}
@media all and (max-width:480px) {
	#company7-bg {height:90vw }
	#company7-bg .contWrap img {width:100px}
}




#company7-cont {text-align:center}
#company7-cont dt {font-size:4.0rem; font-weight:900; color:#018458}
#company7-cont dd {margin-top:1.3em; width:100%; border-radius:100px; border:1px solid #ededed; box-shadow:0 0 10px rgba(0,0,0,0.05); padding:2em}
#company7-cont dd p {font-size:1.8rem; line-height:1.4em;}


#company7-img img {width:100%; max-width:1181px}





#sMap .root_daum_roughmap .wrap_controllers {display:none }
#sMap .root_daum_roughmap .wrap_map { height:580px}



#company8 { padding:4%;  background:#2d5fa5 url('/images/sub/company8-bg.png') no-repeat right center; background-size:auto 100%;color:#FFF }
#company8 h3 {margin-bottom:0.7em; font-size:3.2rem; font-weight:700}
#company8 h3 .eng { font-size:2.0rem;}
#company8 ul {display:flex; gap:40px;}
#company8 ul li {font-size:2.0rem; font-weight:600}
#company8 ul li i {padding-right:7px;}
#company8 ul li span {padding-left:1em; opacity:0.7; font-size:1.8rem; font-weight:400}

@media all and (max-width:976px) {
	#sMap .root_daum_roughmap .wrap_map { height:480px}
	#company8 ul { flex-wrap:wrap; gap:20px;}
	#company8 ul li span {padding-left:0.5em; }
}
@media all and (max-width:580px) {
	#sMap .root_daum_roughmap .wrap_map { height:400px}

	#company8 { padding:8%; }
	#company8 h3 {margin-bottom:1em; }
	#company8 h3 .eng {display:block}
	#company8 ul { flex-wrap:wrap; gap:0;}
	#company8 ul li {padding:0 20px 10px 0; }
    #company8 ul li span{word-break: break-all;}
}


#product1 {text-align:center}
#product1 h3 {font-size:5.0rem; font-weight:800}
#product1 .t1 {font-size:2.6rem; color:#222}
#product1 #dot-dl {padding:2em 1% 0; border-top:2px solid #222; text-align:left; width:fit-content; margin:3% auto 0}
#product1 #dot-dl dl {display:flex; margin-bottom:1em}
#product1 #dot-dl dl dt {width:130px; padding-left:15px; font-size:2.0rem; font-weight:500; color:#222; position:relative}
#product1 #dot-dl dl dt:before {content:''; width:5px; height:5px; border-radius:100%; background:#2d5fa5; position:absolute; left:0; top:0.55em;}
#product1 #dot-dl dl dd {width:calc(100% - 130px); font-size:1.8rem; line-height:1.6em}

#product1-img { display:flex; justify-content:center; align-items: center;}
#product1-img > div.arrow {padding: 0 1.5%}
#product1-img div ul li {position:relative}
#product1-img div ul li.t2 {margin-top:10px}
#product1-img div ul li:before {content:''; font-size:1.8rem; color:#FFF; font-weight:600; padding:0.5em 1.0em; 
											position:absolute; left:0; top:0; background:#222}
#product1-img div ul li.t1:before {content:'円筒型'}
#product1-img div ul li.t2:before {content:'角型'}

@media all and (max-width:1350px) {
	#product1-img div img {width:100%}
}
@media all and (max-width:976px) {
	#product1-img {flex-wrap:wrap}
	#product1-img div {width:100%}
	#product1-img div.arrow {padding: 1.5% 0; text-align:center}
	#product1-img div.arrow img { width:100%; max-width:100px; transform:rotate(90deg)}
	#product1-img div ul {display:flex}
	#product1-img div ul li {width:calc(50% - 5px)}
	#product1-img div ul li.t2 {margin-top:0; margin-left:10px}

	#product1 #dot-dl dl dt {width:100px; }
	#product1 #dot-dl dl dd {width:calc(100% - 100px);}
}
@media all and (max-width:580px) {
	#product1-img div ul {flex-wrap:wrap}
	#product1-img div ul li {width:100%}
	#product1-img div ul li.t2 {margin-left:0; margin-top:10px}

	#product1-img div.arrow img { width:15%; }
}
@media all and (max-width:480px) {
	#product1 #dot-dl dl {flex-wrap:wrap}
	#product1 #dot-dl dl dt {width:100%; padding-left:10px;}
	#product1 #dot-dl dl dd {width:100%; line-height:1.4em; margin-top:0.5em;  }
}






#product1-circle ul {display:flex; justify-content:center;}
#product1-circle ul li {text-align:center}
#product1-circle ul li .circle {margin-bottom:20px; width:200px; height:200px; padding: 5%; font-size:2.0rem; font-weight:800; border-radius:100%; color:#FFF;
						display:flex; align-items: center;  justify-content:center; word-break: break-all;}
#product1-circle ul li .circle.bg1 {background:#2d5fa5}
#product1-circle ul li .circle.bg2 {background:#b61919}
#product1-circle ul li.icon,
#product1-circle ul li.arrow {padding:0 2%; line-height:200px; font-size:3.6rem;  color:#222}
#product1-circle ul li p.t1 { font-size:1.8rem; line-height:1.6em}
#product1-circle ul li .img {height:200px; display:flex; align-items: center; margin-bottom:20px; }
#product1-circle ul li .img img {margin:0 auto}
#product1-circle ul li p.t2 { font-size:2.4rem; line-height:1.6em; font-weight:800; color:#222}

@media all and (max-width:976px) {
	#product1-circle ul {flex-wrap:wrap }
	#product1-circle ul li:last-child {width:100%; margin-top:30px}
	#product1-circle ul li.arrow {display:none}
	#product1-circle ul li .img {height:auto; margin-bottom:0; }
}
@media all and (max-width:580px) {
	#product1-circle ul li .circle { margin-bottom:10px; width:160px; height:160px; }
	#product1-circle ul li.icon { line-height:160px; }	
	#product1-circle ul li .img img {width:100%; max-width:346px }
}
@media all and (max-width:480px) {
	#product1-circle ul li .circle {  width:34vw; height:34vw; }
	#product1-circle ul li.icon { line-height:33vw}
}




#ethical1-bg {padding:5%;  margin-top:5%; height:430px; background:url('/images/sub/ethical1-bg.png') no-repeat center center; 
				background-size:auto 100%; display:flex; justify-content:center; align-items: center;}
#ethical1-bg dl {color:#FFF; display:flex; justify-content:center; align-items: center;}
#ethical1-bg dl dt {width:200px; height:200px; font-size:3.2rem; font-weight:500; display:flex; justify-content:center; align-items: center;
						border:1px solid rgba(255,255,255,0.2); border-radius:100%; margin:0 auto}
#ethical1-bg dl dd { width:calc(100% - 200px); padding-left:1.5em;   font-size:2.2rem; line-height:1.8em; }

@media all and (max-width:767px) {
	#ethical1-bg { height:350px; }
	#ethical1-bg dl { display:block }
	#ethical1-bg dl dt {width:280px; height:70px; border-radius:35px}
	#ethical1-bg dl dt br {display:none}
	#ethical1-bg dl dd { width:100%; padding:1em 0 0 0 ; text-align:center}
}
@media all and (max-width:480px) {
	#ethical1-bg { height:auto; padding:4em 1em }
	#ethical1-bg dl dt {font-size:2.4rem; width:200px;  height:auto; padding:0.5em 0}
	#ethical1-bg dl dd { font-size:1.8rem; line-height:1.6em}
}
	



.ethical1 {margin-top:10%;}
.ethical1 #contWrap h4 {font-size:2.0rem; color:#222; font-weight:normal}
.ethical1 #contWrap .t1 {font-size:1.8rem; line-height:1.8em;}
.ethical1 #contWrap .t2 {font-size:1.8rem; line-height:1.8em; position: relative; padding-left: 10px; word-break: break-all; overflow-wrap: break-word;}
.ethical1 #contWrap .t2::before{content: ''; position: absolute; width: 100%; height: 2px; left: 0; top: -30px; background: #222;}
.ethical1 #contWrap .t2::after {content: ''; position: absolute; width: 100%; height: 2px; left: 0; bottom: -30px; background: #222;}
.ethical1 #contWrap .img1 {margin-top:3%;  text-align:center }
.ethical1 #contWrap .img1 img {width:100%; max-width:756px}
.ethical1 #contWrap .img2 img {width:100%; max-width:921px}
#contWrap .img1 {margin-top:3%;  text-align:center }
#contWrap .img1 img {width:100%; max-width:756px}
#contWrap .img2 img {width:100%; max-width:921px}

.ethical1 .dl-cont dl {margin-top:3em; border-top:2px solid #222; display:flex}
.ethical1 .dl-cont dl dt { padding:20px; width:260px; font-size:2.2rem; color:#222; font-weight:600}
.ethical1 .dl-cont dl dd { padding:20px; width:calc(100% - 260px); font-size:1.8rem; line-height:1.6em;}

@media all and (max-width:1280px) {
	.ethical1 .dl-cont dl {margin-top:1.5em; display:block}
	.ethical1 .dl-cont dl dt { padding:20px 0 10px;  width:100%; }
	.ethical1 .dl-cont dl dd { padding:0; width:100% }
}
@media all and (max-width:1024px) {
	.ethical1 {margin-top:100px}
    .ethical1 #contWrap .t2::before{top: -20px;}
    .ethical1 #contWrap .t2::after {bottom: -20px;}
}
@media all and (max-width:480px) {
    .ethical1 {margin-top:6em}
	.ethical1 #contWrap .t1 { line-height:1.6em}
    .ethical1 #contWrap .t2::before{top: -10px;}
    .ethical1 #contWrap .t2::after {bottom: -10px;}
}



.ethical2 {margin-top:5%}
.ethical2 #contWrap .t1 {font-size:1.8rem; line-height:1.8em}

#ethical2-1 { margin-top:3em; display:flex; justify-content:center; gap:50px}
#ethical2-1 .circle-t {width:300px; height:300px;  border:50px solid; border-radius:100%; text-align:center; color:#FFF; 
						display:flex; justify-content:center; align-items: center; position:relative}
#ethical2-1 .circle-t:before {content:''; width:19px; height:32px; background:url('/images/sub/ethical2-arrow.png') no-repeat center center;
								background-size:100% auto; position:absolute; left:-85px; top:50%; transform:translateY(-50%); z-index:3}
#ethical2-1 .circle-t.bg1:before {display:none}
#ethical2-1 .circle-t.bg1 {background:#2da59e; border-color: #eaf6f5;}
#ethical2-1 .circle-t.bg2 {background:#2d7fa5; border-color: #eaf2f6;}
#ethical2-1 .circle-t.bg3 {background:#2d5fa5; border-color: #eaeff6;}

#ethical2-1 .circle-t h3 {font-size:2.6rem;}
#ethical2-1 .txtcont {padding-top:70px; text-align:center; position:relative;}
#ethical2-1 .txtcont:before {content:''; width:1px; height:100px; background:#555; position:absolute; left:50%; top:-50px;}
#ethical2-1 .txtcont li {border-bottom:1px dashed #DDD; font-size:1.8rem; padding-bottom:10px; margin-bottom:10px; color:#222}

@media all and (max-width:1399px) {
	#ethical2-1 .circle-t {width:20vw; height:20vw; border:30px solid;  }
	#ethical2-1 .circle-t:before { left:-64px;}	
	#ethical2-1 .txtcont {padding-top:50px}
	#ethical2-1 .txtcont:before { height:70px; top:-30px;}
}
@media all and (max-width:976px) {
	#ethical2-1 .circle-t {width:25vw; height:25vw;  }
}
@media all and (max-width:767px) {
	#ethical2-1 { margin-top:2em; gap:30px}
	#ethical2-1 .circle-t {width:25vw; height:25vw; border:20px solid;  }
	#ethical2-1 .circle-t:before { left:-44px;}	
	#ethical2-1 .txtcont {padding-top:40px}
	#ethical2-1 .txtcont:before { height:50px; top:-20px;}
	#ethical2-1 .circle-t h3 {font-size:2.2rem;}
}
@media all and (max-width:480px) {
	#ethical2-1 { margin-top:2em; gap:20px}
	#ethical2-1 .circle-t {width:27vw; height:27vw; border:10px solid;  }
	#ethical2-1 .circle-t:before { width:10px; left:-26px}
	#ethical2-1 .txtcont {padding-top:20px}
	#ethical2-1 .txtcont:before { display:none}
	#ethical2-1 .txtcont li { font-size:1.6rem; }
}



#numList {display:flex; flex-wrap:wrap}
#numList li {width:49%; margin:0 1% 1% 0; border:8px solid #eaeff6; padding:1em 2em; border-radius:50px;
				 counter-increment: number; position:relative;}
#numList li:before {content: counter(number, decimal-leading-zero); font-size:2.0rem; font-weight:700; color:#2d5fa5; 
					position:absolute; left:1em;top:0.7em; padding-right:10px;  border-right:1px solid #e9e9e9; }
#numList li p {font-size:1.8rem; padding-left:30px}

@media all and (max-width:767px) {
	#numList li {width:100%; margin:0 0 1% 0; }
}
@media all and (max-width:480px) {
	#numList li {border:5px solid #eaeff6; }
}





.ethical3 #contWrap h4 {margin:2em 0 0.8em; font-size:2.8rem; font-weight:700}
.ethical3 #contWrap .img1 {margin-top:0; text-align:center}
.ethical3 #contWrap .img1 img {width:100%; max-width:780px}





#iconList {display:flex; flex-wrap:wrap; gap:15px}
#iconList li {padding:50px 30px; width:23%; background:#f9f9f9;}
#iconList li.impact {background:#2d5fa5;}
#iconList li .icon { margin-bottom:30px; text-align:right}
#iconList li .icon img {width:70px; height:70px; border-radius:80px; background:#FFF}
#iconList li p.num {font-size:1.5rem; margin-bottom:1em; display:inline-block;  color:#2d5fa5 ;  font-weight:900;	border-bottom:1px solid #2d5fa5}
#iconList li.impact p.num {color:#fff ; border-bottom:1px solid #fff}
#iconList li p.t1 {font-size:2.0rem; color:#222; line-height:1.4em !important }
#iconList li.impact p.t1 {color:#fff;}

@media all and (max-width:1280px) {
	#iconList li {padding:30px; width:31%;}
}
@media all and (max-width:640px) {
	#iconList li { width:48%;}
}
@media all and (max-width:480px) {
	#iconList {gap:0}
	#iconList li {padding:2em; width:48%; margin:1%;}
	#iconList li .icon { margin-bottom:1em; }
}





#contList.ethical3 {margin:0 auto;width:fit-content; } 
#contList li {border:8px solid #f3f3f3; padding:1em 2em; margin-top:10px; border-radius:50px;}
#contList li p {font-size:1.8rem; }
#contList li p span {font-size:2.2rem; color:#222; padding-right:10px; font-weight:600 }

@media all and (max-width:640px) {
	#iconList li {padding:2em; width:48%; margin:1%;}
	#iconList li .icon { margin-bottom:1em; }
}
@media all and (max-width:480px) {
	#contList li {border:5px solid #f3f3f3;}
}



.recruit5 {margin-top:10%}
.recruit5 #contWrap  dl {padding:20px 0; border-top:1px solid #e3e3e3; display:flex; }
.recruit5 #contWrap  dl.center-1 {align-items: center;}
.recruit5 #contWrap  dl dt {width:180px; padding: 20px; font-size:1.8rem; color:#222; font-weight:600}
.recruit5 #contWrap  dl dt i {padding-right:10px}
.recruit5 #contWrap  dl dd {width:calc(100% - 180px); padding:20px; font-size:1.8rem;}
.recruit5 #contWrap  dl dd.tel {display: flex; align-items: center;}
.recruit5 #contWrap  dl dd.tel p{margin:0 10px;}

@media all and (max-width:976px) {
	.recruit5 #contWrap  dl {padding:10px 0; }
	.recruit5 #contWrap  dl dt {width:150px; padding: 10px; }
	.recruit5 #contWrap  dl dd {width:calc(100% - 150px); padding:10px;}
}
@media all and (max-width:640px) {
	.recruit5 #contWrap  dl {flex-wrap:wrap}
	.recruit5 #contWrap  dl dt {width:100%}
	.recruit5 #contWrap  dl dd {width:100%; padding-top:0}
}


#recruit5-icon {display:flex; justify-content:center; align-items: center;}
#recruit5-icon li.circle {width:190px; height:190px; border-radius:100%; text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-content: center;}
#recruit5-icon li.circle.bg1 {background-color:#f4f8fb; color:#595e66}
#recruit5-icon li.circle.bg2 {background-color:#2d5fa5; color:#FFF}
#recruit5-icon li.circle p {padding-top:0.7em; width:100%; font-size:2.2rem; font-weight:700}
#recruit5-icon li.circle2 {width:230px; height:230px; border-radius:100%; text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-content: center;}
#recruit5-icon li.circle2.bg1 {background-color:#f4f8fb; color:#595e66}
#recruit5-icon li.circle2.bg2 {background-color:#2d5fa5; color:#FFF}
#recruit5-icon li.circle2 p {padding-top:0.7em; width:100%; font-size:2.2rem; font-weight:700}
#recruit5-icon li.arrow {margin:0 15px}
#recruit5-icon li.arrow i {font-size:2.0rem; opacity:.5; }

@media all and (max-width:1399px) {
	#recruit5-icon li.circle {width:180px; height:180px; }
	#recruit5-icon li.circle img { width:50px; }
	#recruit5-icon2 li.circle2 {width:180px; height:180px; }
	#recruit5-icon2 li.circle2 img { width:50px; }
}
@media all and (max-width:1280px) {
	#recruit5-icon li.circle {width:150px; height:150px; }
	#recruit5-icon li.circle2 {width:150px; height:150px; }
	#recruit5-icon li.arrow {margin:0 5px}
}
@media all and (max-width:767px) {
	#recruit5-icon li.circle {width:150px; height:150px; border-radius:15px; }
	#recruit5-icon li.circle2 {width:150px; height:150px; border-radius:15px; }
	#recruit5-icon li.arrow {margin:0 5px}
}
@media all and (max-width:640px) {
	#recruit5-icon { flex-wrap:wrap; gap:15px}
	#recruit5-icon li.circle {width:150px; height:150px; border-radius:15px; }
	#recruit5-icon li.circle2 {width:150px; height:150px; border-radius:15px; }
	#recruit5-icon li.arrow {display:none}
}
@media all and (max-width:480px) {
	#recruit5-icon li.circle {width:28vw; height:28vw; }
	#recruit5-icon li.circle2 {width:28vw; height:28vw; }
}


.apply{width: 100%; text-align: center; margin-top: 50px; transition: 0.3s;}
#HalfWrap .contWrap2 {width:100% !important;}
#HalfWrap .contWrap2 input {width: 100%;height: 40px; font-size: 15px; border: 1px solid #ddd; outline: none; padding-left: 10px;}
#HalfWrap .contWrap2 select {width: 100%;height: 40px; font-size: 15px; border: 1px solid #ddd; outline: none; padding-left: 10px;}
#HalfWrap .contWrap2 input.tel {width: 80px; height: 40px; font-size: 15px; border: 1px solid #ddd; outline: none;}
@media all and (max-width:480px) {
    #HalfWrap .contWrap2 input {width: 100%; height: 30px; font-size: 14px;}
    #HalfWrap .contWrap2 select {width: 100%; height: 30px; font-size: 14px;}
    #HalfWrap .contWrap2 input.tel { width: 100%; height: 30px;}
}


.img-slide{width: 100%; margin-top: 100px;}

@media all and (max-width:767px){
    
    .img-slide ul li{height: 200px;}
    .img-slide ul li img{height: 100%;}
}



.out_notice{width:100%; display:flex; justify-content: center; margin-bottom: 25px; gap: 20px; flex-wrap: wrap;}
.out_notice li{width:200px;}
.out_notice li a{text-align:center; color:#fff; width:100%; padding:15px 20px; border-radius:10px; background:#0e5acd; display: inline-block;}

.banner{width: 100%; margin-bottom: 10%; text-align: center; color: #000;}
.banner h1 span{font-weight: 400;}
.banner img{width: 100%;}


.smi{width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 50px;}
.smi li{width: 100%; display: flex; justify-content: space-between; border: 1px solid #eee; flex-wrap: wrap;}
.smi li .img{width: 28%;}
.smi li .img img{width: 100%;}
.smi li .txt{width: 70%; display: flex; flex-wrap: wrap;align-content: center; padding: 30px;}
.smi li .txt h3{font-size: 2.5rem; color: #000;margin-bottom: 10px; display: inline-block; position: relative;}
.smi li .txt h3::before{content: ''; width: 105%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 50%; background-color: hsl(215deg 57.14% 41.18% / 10%); z-index: -1;}
.smi li .txt p{width: 100%;}

@media all and (max-width:1380px){
    .smi li .img{width: 50%;}
    .smi li .txt{width: 50%;}
}
@media all and (max-width:940px){
    .smi li .img{width: 100%;}
    .smi li .txt{width: 100%;}
}

#contWrap .img3 {margin-top:3%;  text-align:center; position: relative;transition: 0.5s;}
#contWrap .img3 img {width:100%; max-width:874px;}
#contWrap .img3 .txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 874px; height: 100%;display: flex; align-content: center; justify-content: center; background: #00000070; display: none;transition: 0.5s; }
#contWrap .img3 .txt h3{color: #fff;display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap;}
#contWrap .img3 .txt h3 span{width: 30px;height: 30px; border: 1px solid #fff; border-radius: 50%;display: flex; justify-content: center; align-items: center; margin-left: 10px;}
#contWrap .img3:hover .txt {display: flex; transition: 0.5s;}

@media all and (max-width:1200px){
    #contWrap .img3 .txt{width: 100%;}
}