@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap);
@import url(https://use.fontawesome.com/releases/v5.1.0/css/all.css);

@charset "utf-8";
*{ font-family: 'Noto Sans JP', sans-serif;}

/* Reset CSS  */
html { height: 100%;overflow-y:scroll; background-color: #fff;}
body { font-size: 13px; color:#333;font-family: 'Noto Sans JP', sans-serif;;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  }
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#555;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

/************* css ******************/
body:after{content:""; display:block; clear:both;}
body { background: none;}
/* header*/
#header_wrap{z-index: 99;position: relative;}
#header {position: relative;padding:20px 0}
#header #logo {float:left}
#header:after{content:""; display:block; clear:both;}

#header_wrap .top {
  text-align: right;
  line-height: 20px;
  padding-top:5px
}

#header_wrap .langs {
  display: inline-block;
  vertical-align: top;
}

#header_wrap .langs:after {
  content: "";
  display: block;
  clear: both;
}

#header_wrap .langs a {
  float: left;
  font-size: 13px;
  color: #848484;
}

#header_wrap .langs a + a:before {
  content: "";
  background: #bfbfbf;
  height: 10px;
  width: 1px;
  display: inline-block;
  margin: -2px 10px 0;
  vertical-align: middle;
}
.nav_wrap{float:right;width:75%;}
#nav > li{float:left;width:20%;text-align:center;position: relative;}
#nav > li > a{font-size:17px; color:#303030;display:block;line-height:60px;}
#nav:after{content:""; display:block; clear:both;}

#nav_btn{display:none; color:#fff; font-size:18px; background:#26364a; padding:12px 0; font-weight:600; cursor:pointer;
text-align:center}


#nav > li > ul{top: 50px;left: 0;display: none;padding:0 !important; width:100%; background-color: rgba(0,0,0,0.4);
z-index:99;position: absolute;}
#nav > li > ul li{padding:2px 0;margin: 0 5px;}
#nav > li > ul li a{display:block; padding:5px; font-size:14px;color:#fff;text-transform: uppercase;}
#nav > li > ul li a:hover{color:#fff;text-decoration: none;font-weight:bold}
#nav > li:hover > ul {display: block;}
.gnb:after{content:""; display:block; clear:both;}
#nav > li:nth-child(1) > ul,#nav > li:nth-child(2) > ul,#nav > li:nth-child(4) > ul{display:none}

.container{margin:0 auto;max-width: 1200px;}

/* middle */
span.middle {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}

span.middle + * {
  display: inline-block;
  vertical-align: middle;
}

/*slider*/
#m_slider {overflow: hidden; width:100%;background-image:url('/home/img/main_bg.png');background-size: cover;
background-position: center center;height: 600px;}

/* footer*/
.ft {background:#4e4e4e;padding:25px 0;overflow: hidden;width: 100%;max-width: 100%;}
.ft_cont{width:1200px;margin:0 auto;max-width:100%;position: relative;}
.ft_cont .ft_logo{float:left;}
.ft_cont .copy{float:right;width:85%}
.ft_cont .copy ul{margin-bottom:15px}
.ft_cont .copy ul li{display:inline-block}
.ft_cont .copy ul li:after{content:'|';margin:0 5px;color:#d6d6d6}
.ft_cont .copy ul li:last-child:after{content:'';}
.ft_cont p {color:#d6d6d6;font-size:13px;line-height:21px}
.ft_cont p:last-child{margin-top:5px;color:#9b9b9b}
.ft_cont a{color:#d6d6d6;}
.ft .top_btn{color: #656565;opacity: 0.5;font-size: 35px;position: fixed;bottom: 50px;right: 30px;}

#ft_company {text-align:center}
#ft_copy {background:#5e5b5b}
#ft_copy div {position:relative;margin:0 auto;padding:10px 0;width:970px;color:#bcb5b5}
#ft_copy a {display:inline-block;margin:0 10px 0 0;color:inherit}

.float_wrap:after{clear:both;display:block;content:''}
/*index*/
#main_w section:after{clear:both;display:block;content:''}
#main_w {padding:70px 0}

#main_w h3{font-size:16px;color:#777676;font-weight: inherit;letter-spacing: 3px;}
#main_w h2{font-size:28px;font-weight: inherit;margin-bottom:20px}

#section01{padding-bottom: 50px}
#section01 .ab_left{width:50%;float:left}
#section01 .ab_left p{font-size:18px;color:#696969;margin-top:20px}
#section01 .ab_left .ab_bu{background:#0072bc;padding:7px 50px;color:#fff;display: inline-block;
margin-top: 40px;border-radius: 20px;font-size: 17px;}
#section01 .ab_left .ab_bu:hover{background:#5e95b9}

#section02{text-align:center;border-top:solid 1px #d5d5d5}
#section02 .wedo{margin-top:40px}
#section02 .wedo li{width:50%;float:left;height:240px;}
#section02 .wedo li .wedo_bg{background: rgba(255,255,255,0.5);width: 100%;height: 100%;padding: 30px;box-sizing: border-box;}
#section02 .wedo li:hover .wedo_bg{background:none;transition: 300ms all;}
#section02 .wedo li p{font-size:30px;color:#656565;text-align:left;}
#section02 .wedo li:first-child{background:url('/home/img/wedo01.png') no-repeat center center / cover;}
#section02 .wedo li:nth-child(2){background:url('/home/img/wedo02.png') no-repeat center center / cover;}
#section02 .wedo li:nth-child(3){background:url('/home/img/wedo03.png') no-repeat center center / cover;}
#section02 .wedo li:last-child{background:url('/home/img/wedo04.png') no-repeat center center / cover;}

#section03 {background:#f5f5f5;padding:20px 0;}
#section03 {padding:0;}

#section03 .quick li{float:left;width:calc(99%/5);text-align:center}
#section03 .quick li + li{border-left:solid 1px #d7d7d7;}
#section03 .quick li p{font-size:15px;color:#7e7e7e;margin-top:10px;}

/*sub*/
.sub_bg{text-align:center;background:url('/home/img/sub_bg.png') no-repeat center center / cover;}
.sub_bg .container{padding:120px 15px;}
.sub_bg .sub_bg_text{font-size: 30px;color: #000 !important;font-weight: 300;text-transform: uppercase;
text-align: center;border: solid 2px #000;display: inline-block;padding: 0 45px;letter-spacing: 10px;}


.sub_w{text-align:left;padding:80px 0 120px;box-sizing: border-box;}

.sub_ul {background:#dfdfdf;text-align:center; }
.sub_ul ul{max-width:1200px;margin:0 auto}
.sub_ul  li{float:left;border-right:solid 1px #c8c8c8;min-height: 45px;}
.sub_ul  li:first-child{border-left:solid 1px #c8c8c8;}
.sub_ul  #on{border-right:none}
.sub_ul  li a{color:#7a7a7a;font-size: 15px;padding: 14px 0;box-sizing: border-box;display: block; font-weight:inherit;}
.sub_ul  #on{cursor:pointer;border-right: solid 1px #fff;background:#fff;color:#26364a !important;font-weight:600}
#sub_ul1 li,#sub_ul2 li,#sub_ul4 li{display:none}
#sub_ul3 li{width:calc(99%/4)}
#sub_ul5 li{width:calc(99%/2)}

.sub_title{color:#000 !important;font-size:30px !important;font-weight:bold !important;margin-bottom:10px;padding-left:15px}
.sub_nav{border-bottom:solid 1px #acacac;padding:0 0 15px 15px;}
.sub_nav li{font-size:13px;color:#393939;float:left;text-transform: uppercase;}
.sub_nav li:after{content:'|';margin:0 6px;display: inline-block;}
.sub_nav li:first-child img{margin-right:5px;vertical-align: middle;}
.sub_nav li:last-child:after{content:''}
.sub_nav li a{color:#393939}
.sub_nav li a:hover{text-decoration: underline;}



.sub_con{padding: 0 15px;box-sizing: border-box; margin: 50px auto 0;}
.sub_con p{line-height: 30px;font-size:16px; word-break: initial;}
.top_title{font-size:32px !important;font-weight:bold !important;margin-bottom:15px;text-align:center}
.top_title:after{width:50px;height:2px;background:#393939;margin:20px auto 40px;content:'';display:block}

.history-content {
  position: relative;
  padding-top: 100px;
}

.history-content:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #bebebe;
  color: #fff;
  border: none;
  display: inline-block;
  line-height: 10px;
  text-align: center;
  left: calc(50% - 4px);
  top: 0;
}

.history-content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 1px;
  background: #bebebe;
  display: block;
}

.history-content > li {
  width: 50%;
  padding-bottom: 70px;
  position: relative;
}

.history-content > li:before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 11px;
  background: #fff;
  color: #fff;
  border: 6px solid #0278cb;
  display: inline-block;
  line-height: 11px;
  text-align: center;
  z-index: 10;
  top: 7px;
}

.history-content > li dt {
  font-size: 35px;
  font-weight: 600;
  letter-spacing: -0.5px;
  position: relative;
  padding-bottom: 25px;
}
.history-content > li dt:before {
  content: "";
  position: absolute;
  top: 18px;
  background: #ddd;
  height: 1px;
  width: 50px;
  display: block;
}

.history-content > li dl {
  display: inline-block;
  max-width: 500px;
}
.history-content > li p {
  display: flex;
  line-height: 32px;
}

.history-content > li p .month {
  font-size: 19px;
  color: #0278cb;
  font-weight: 400;
  width: 50px;
}

.history-content > li p .desc {
  width: calc(100% - 50px);
  display: block;
  letter-spacing: -0.5px;
}

/* about */
#sub21 .bg {
  background: url(/home/img/sub21_bg.jpg) no-repeat center/cover;
  position: relative;
  text-align: center;
  background-attachment: fixed;
}

#sub21 .bg:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  opacity: 0.4;
}

#sub21 .bg > div {
  position: relative;
  height: 500px;
  color: #fff;
}

#sub21 .bg .img-wrap:after {
  content: "";
  display: block;
  width: 50px;
  margin: 20px auto;
  height: 1px;
  background: #fff;
}

#sub21 .bg p {
  line-height: 1.8;
  font-size: 17px;
  text-shadow: 0 0 10px #666;
}

#sub21 .bg p.strong {
  font-size: 26px;
}

#sub21 .info {
  margin-top: 50px;
}

#sub21 .info div {
  float: left;
}

#sub21 .info .lbl {
  width: 100px;
  color: #107edb;
}

#sub21 .info .desc {
  border-left: 1px solid #fff;
  padding-left: 10px;
}

#sub21 .info p:after {
  content: "";
  display: block;
  clear: both;
}

#sub21 .info strong {
  float: left;
  width: 150px;
}

#sub21 .info span {
  color: #666;
  float: left;
}

#sub21 .info td:first-child {
  font-weight: bold;
}
#sub21 table {
  width: 100%;
  border-top: 2px solid #107edb;
  border-spacing: 0;
  border-collapse: collapse;
  margin-top:50px
}

#sub21 td, #sub21 th {
  border-bottom: 1px solid #bebebe;
  line-height: 30px;
  padding: 15px;
  font-size: 16px;
}
.sub_con .bus_title{text-align:left;font-weight:500;font-size:24px;padding-bottom:10px;margin-top:50px;}
.sub_con .bus_title i{margin-right:5px;color:#0278cb}

#sub31 .bus li{width:calc(48% - 15px);float:left;border:solid 1px #ccc;padding:20px 30px;margin-bottom:50px;border-radius: 50px;box-sizing: border-box;
margin-bottom:20px;min-height:170px;}
#sub31 .bus li h3{font-size:20px;margin-bottom:5px}
#sub31 .bus li h3 i{margin-right:5px}
#sub31 .bus li p{margin-left:15px}
#sub31 .bus li p b{width:50px;display:inline-block}
#sub31 .bus li:nth-child(odd){margin-right:15px}
#sub31 .bus li:last-child p b{width:auto}
#sub32 .sub_con{text-align:center}
#sub33 .sub_con{text-align:center}
#sub33 .sub_con img{margin:50px auto;display:block;}
#sub34 .sub_con{text-align:center}
#sub34 .sub_con img{margin:50px auto;display:block;}

#sub41 h3{font-size:26px;}
#sub41 #pro_ul li{font-size:16px;line-height:25px;margin-bottom:15px;margin-left: 30px;}
#sub41 #pro_ul li b{color: #fff;background: #0278cb;width: 25px;font-size:13px;margin-left:-30px;
height: 25px;margin-right: 5px;box-sizing: border-box;border-radius: 50px;
display: block;float: left;text-align: center;}
#sub41 .sub_con img{margin:20px auto;display:block;}

#sub51 .add_icon{margin-top:60px}
#sub51 .add_icon li{float:left; width:48%; padding:0 10px; box-sizing:border-box; text-align:center;}
#sub51 .add_icon li i{font-size:60px;}
#sub51 .add_icon li h2{font-size:17px; padding:7px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin:15px 0 10px;}
#sub51 .add_icon .mail_bu{background: #d5d5d5;padding: 10px 15px;color: #fff;text-align:center;
    display: inline-block;margin: 10px 10px 0 0;border-radius: 20px;font-size:17px}

#sub52 table {width:100%;border-collapse: collapse; border-top:1px solid #ddd;}
#sub52 th {width:20%;border:1px solid #ddd;text-align:center;font-size:13px;}
#sub52 td {border:1px solid #ddd;padding:10px;font-size:13px;color:#666}
#sub52 .btn_submit {border-radius:3px;background:#333;padding:8px 0px;font-size:14px; text-align:center;width:100px;}
#sub52 input , #sub52 textarea{width:100%; background:#f5f5f5; border-radius:5px; padding:7px 5px;}
#sub52 input[type=checkbox]{width: auto;}

@media (max-width: 1700px){#m_slider .pos{display:none}}

@media (max-width: 1199px) { #m_slider .slide { height: 50vw; }
}

@media (min-width:769px) and (max-width:1200px){
	.container{padding:0 15px;box-sizing: border-box;}
	#header{padding:0}
	#header #logo {margin:0 auto;float:none;text-align:center;margin-top:10px}
	
	#header_wrap .lan_w li a{color:#ccc}
	.nav_wrap{float:none;width:100%;margin-top:20px}
	 #nav > li{width: calc(100%/5);}
	 #nav > li > ul{top:40px}
	 .sub_menu{width:100%;left:0 !important}
	#nav > li:last-child .sub_menu{left:50px}
    #header .lan_w { padding-right: 0; position: absolute;top: 10px;right: 10px;z-index:99}
	#header_wrap .lan_w li a b{color:#222}

	#nav{float:none;border-top:solid 1px #ccc;margin:0}
	#m_slider_w{height: 50vw;}
	#m_slider{position: relative;}
	#m_slider .slide ul{height: 50vw;}
	#main_w{margin-top:50px;padding:50px 15px}
	#section01 .ab_left,.ab_right{float:none;width:100%}
	.sub_bg_w{height:auto}
	.sub_bg{position: relative;padding:50px 0;height:auto;}
	  #sub31 .bus li{float:none;width:100%;margin:0 0 15px 0 !important}


}
@media (min-width:768px){
	.history-content > li:nth-child(2n+1) {
    margin-left: calc(50% - 2px);
  }
  .history-content > li:nth-child(2n+1):before {
    margin-left: -9px;
  }
  .history-content > li:nth-child(2n+1) dl {
    padding-left: 65px;
  }
  .history-content > li:nth-child(2n+1) dt:before {
    left: -66px;
  }
  .history-content > li:nth-child(2n) {
    text-align: right;
  }
  .history-content > li:nth-child(2n):before {
    right: -12px;
  }
  .history-content > li:nth-child(2n) dl {
    padding-right: 65px;
    text-align: left;
  }
  .history-content > li:nth-child(2n) dt:before {
    left: 100px;
    width: calc(100% - 35px);
  }
  .history-content > li:nth-child(2n) dd {
    text-align: left;
  }
  	.pro_type02 li + li:before,.pro_type02 li + li:after{display:none}

}
@media (max-width:768px){/*모바일*/
	.container{padding:0 15px;box-sizing: border-box;}
    #header { width:100%;padding:0 }
	#header_wrap{background:none}
    #footer {text-align: center;}
    #header #logo {padding:30px 0;float:none;text-align: center;}

	#nav{margin:0}
	#nav_btn{display:block;}
	.nav_wrap{clear:both;text-align:center;width: 100%;margin-top:0;line-height: 15px;}
	#nav{display:none;float: none;position: absolute;left: 0;width: 100%;z-index:99;background:#fff;margin-left:0;
		border-bottom:solid 3px #26364a;padding:0;border-top: 1px solid #ddd;}
		#nav > li{float: none;text-align: left;border-bottom: 1px solid #ddd;width:100%}
		#nav > li:last-child{border-bottom: none;padding:0}
		#nav > li > a{padding: 10px 15px;font-size:15px;text-decoration: none;margin:0;color:#222;line-height:inherit}
		#nav > li:hover > a{color:#26364a;font-weight:bold}
		#nav > li > a:focus{color:#26364a}
		#nav > li > ul{position: static;padding: 0;width: 100%;border-bottom: 0;background: #fff;border:none;border-top: 1px solid #ddd !important;}
		#nav > li > ul li a{display: block;padding: 7px 15px 7px 15px;font-size: 14px;border-radius: 0;border-bottom: 1px solid #eee;color:#000}
		#nav > li > ul li a:last-child{border-bottom: none;}
		#nav > li > ul li a:hover{color: #26364a;background: #f5f5f5;}
		#nav > li > ul li a::before{content: "- ";}
		#nav > li > ul li{padding:0}
	#m_slider{height:40vw}
	#section01 .ab_left{width:100%;float:none}
	#main_w{padding:50px 15px;}
	#section02 .wedo li{width:100%;float:none}
	#section03 .quick li{width:48%;border-bottom:solid 1px #d7d7d7;padding:20px 0}

	.sub_ul li{width:100% !important;border:none !important;border-bottom:solid 1px #c8c8c8 !important;}
	.ft{text-align: center;}
	.ft_cont{padding: 0 15px;box-sizing: border-box;}
	.ft_cont .ft_logo{float:none}
	.ft_cont .copy ul{margin-top:10px}
	.ft_cont .copy{float:none;width:100%;margin:0}

	.sub_bg{position: relative;height:auto;}
	.sub_bg .container{padding:80px 0}
	.history-content:before {
    left: 7px;
  }
  .history-content:after {
    left: 11px;
    width: 1px;
  }
  .history-content > li {
    width: auto;
    padding-bottom: 70px;
    position: relative;
    margin-left: 0;
  }
  .history-content > li:before {
    top: 3px;
  }
  .history-content > li dt {
    font-size: 29px;
    padding-bottom: 10px;
  }
  .history-content > li dt:before {
    width: 30px;
    top: 14px;
    left: -36px;
  }
  .history-content > li dl {
    padding-left: 35px;
  }
  #sub31 .bus li{float:none;width:100%;margin:0 0 15px 0 !important}
  #sub51 .add_icon li{width:100%;float:none;margin-bottom:20px}
}