@charset "utf-8";

/*Font*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/*reset*/
*{margin: 0; padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {text-decoration: inherit; color: inherit;}
li {list-style: none;}
img {vertical-align: middle;}
a img {border: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}
img {vertical-align: middle; margin: 0 auto; display: inline-block;}

html{ -webkit-text-size-adjust: 100%; font-size: 62.5%}

/*body font*/
body {font-family: 'Noto Sans JP', sans-serif; font-weight: 600; letter-spacing: 0; word-break: break-all;}

.wrap {width: 100%; margin: 0 auto; overflow: hidden;}

/*inner*/
.inner { max-width: 1200px; margin: 0 auto;}

p { line-height: 1.5;}

h2 { line-height: 1.2;}

/*==================================nav==================================*/

iframe.iFooter {
    display: block;
    width: 100%;
    height: 26rem;
    border: 0;
}

/*Common*/
.inner .title{font-size: 6rem; position: relative; color: #03045E; margin: 3.5rem 5rem 5rem;}
.inner .title::before{content: ''; position: absolute; width: 1rem;height: 80%;left: -2rem; top: 50%; transform: translateY(-45%);background: #259ee4; }
.inner p.caption{font-size: 2.6rem; margin: 50px; display: block; color: #03045E;width: 100%;box-sizing: border-box;}

.separater{height: 50px;width: 100%; background: #DDE8F9; display:block; }



section.header {width: 100%;height: 15rem; }

.header_left{width: 42.5%; height: 100%; float: left; display: flex;}
.header_left .technocreate {width: 100%; font-weight: 900; color: #2A51A3; position: relative; margin: auto 20px; padding-top: 1rem}
.header_left .technocreate .logo {display: inline-block; width: 22%; max-width: 100px; margin-bottom: 1.5rem;}
.header_left .technocreate .companyName{display: inline-block; text-align: right; vertical-align:sub; box-sizing: border-box;}
.header_left .technocreate .companyName li:nth-child(1){font-size: 2rem;}
.header_left .technocreate .companyName li:nth-child(2){font-size: 3.2rem;}

.header_mid{width: 40%; height: 100%; float: left; display: flex;}
.header_mid nav.category{width: 100%; margin: auto;}
.header_mid nav.category ul.main {text-align: center;color: #2A51A3; display: flex;}
.header_mid nav.category ul.main li.list {box-sizing: border-box; width: 100%; padding: 2rem 0; font-size: 2.6rem;}
.header_mid nav.category ul.main li:nth-child(4){font-size: 2.5rem;}
.header_mid nav.category ul.main li > a {position: relative; padding-bottom: 8px;}

.header_mid nav.category ul.main li a:after {content: ''; display: block; height: 0.3rem; width: 0%; background: #fff; position: absolute; bottom: 0; left: 0%; transition: .3s;}
.header_mid nav.category ul.main li a:before {content: ''; width: 0.7rem; height: 0.7rem; display: block; background: #fff; position: absolute; bottom: -0.2rem; left: 0%; border-radius: 50%; opacity: 0; transition: .3s;}
.header_mid nav.category ul.main li.close{display: none;}
.header_mid nav.category ul.main .companyInfo_list{position: relative; overflow: hidden;}
.header_mid nav.category ul.main .companyInfo_list .dropdown_lists {z-index: 100; position: absolute; width: 100%; max-height: 0; top: 100%; background: #259ee4; opacity: 1; text-align: center;}
.header_mid nav.category ul.main .companyInfo_list .dropdown_lists .dropdown_list {width: 100%; border-top: 1px solid rgba(255,255,255,0.0); padding: 2rem 0; box-sizing: border-box; position: relative; display: block; margin: auto;}
.header_mid nav.category ul.main .dropdown_list a {position: relative; font-size: 2.3rem; color:#fff; opacity: 0;}
.header_mid nav.category ul.main .dropdown_list a::after {background:#fff; opacity: 1;}

.header_right{ width: 17.5%; height: 100%; float: left; display: flex;}
.header_right .kanaden{margin: auto; }
.header_right .kanaden .logo {margin: auto;width: 80%;display: block;}

/*メニュークリック時のドロップダウン*/
.header_mid nav.category ul.main .list:hover{transition: all .4s ease-in-out; background-color: #03045E; color: #fff;}
.header_mid nav.category ul.main li a:hover::after {width: 95%;background:#fff;}
.header_mid nav.category ul.main li a:hover::before {left: 95%; opacity: 1;}
.header_mid nav.category ul.main .companyInfo_list:hover{overflow: visible;}
.header_mid nav.category ul.main .companyInfo_list:hover .dropdown_lists {max-height: 300%; transition: all 0.8s;}

.header_mid nav.category ul.main .companyInfo_list:hover .dropdown_list {border-top: 1px solid rgba(255,255,255,1.0); transition: all 0.5s;}
.header_mid nav.category ul.main .companyInfo_list:hover .dropdown_list a{transition: all 1s; opacity: 1;}


/*====================================section.top=================================*/
section.top {background: url(../img/chemical.png) no-repeat center/cover; height: 600px;width: 100%;}
section.top .inner{height: 100%;display: flex;}
section.top .top_label {margin: auto; letter-spacing: 5px; line-height: 1.5; text-align: center; font-size: 6rem; color: #0075C2; }
section.top .top_label span {color: #03045E;}


/*====================================section.briefとsection.business共通=================================*/
.title_label {margin-bottom: 7rem; font-size: 5.6rem; text-align: center; position: relative;}
.title_label:before {content: ''; width: 14rem; height: 0.4rem; display: inline-block; margin: 2.0rem; background-image: linear-gradient(to right, #127FFF, #98DFFD);}
.title_label img {position: absolute; left: 50%; top: 50%; transform: translate(0, -50%); z-index: -1;}
section.brief .inner p, section.business .inner p {margin: auto 11rem; text-align: left; font-size: 3.0rem;margin-bottom: 10rem;}

/*====================================section.brief=================================*/
section.brief {width: 100%;  box-sizing: border-box; padding-top: 10.5rem; position: relative;}
section.brief .round {position: absolute; z-index: -2; top: 10%; left: 50%; height: 75%;}
section.brief .border {margin: 5rem auto; width: 80%; border-bottom: solid 3px; border-bottom-color: #7e7e7e; text-align: center;}

/*================================section.business================================*/
section.business {padding-bottom: 5rem; width: 100%; box-sizing: border-box;}
section.business .bis_pic {width: 100%;max-width: 1050px; margin: 10rem auto; display: block; }

/*================================section.main_recruit================================*/
section.main_recruit {background: url(../img/recruit.png) no-repeat center/cover; height: 650px; position: relative; box-sizing: border-box;}
section.main_recruit h2 {font-size: 6.4rem;color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
section.main_recruit img {width: 65rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%);}
section.main_recruit p {position: absolute; color: #eee; font-size: 1.8rem; top: 56%; left: 50%; transform: translate(-50%, 0);}

/*================================footer================================*/
section.company {width: 100%; background-color: #EEEEEE; height: 26rem; position: relative; overflow: hidden;}
section.company .inner{display: flex; margin: 0 auto; height: 100%; width: 100%; box-sizing: border-box;}
section.company ul {margin: auto; width: 90%; display: flex; border-bottom: 1px solid #000; overflow: hidden;box-sizing: border-box;}
section.company ul li {margin: 1.5rem 0; padding: 0 3rem;  box-sizing: border-box; text-align: center;}
section.company ul p {font-size: 1.7rem; text-align: left; line-height: 1.4;}
section.company ul p span { font-size: 2.0rem;}
section.company ul .lst_1 img {width: 150px; height: 150px;}
section.company ul .lst_3 {position: relative;}
section.company ul .lst_3::before {content: ''; width: 1px; height: 100%; background-color: black; position: absolute; left: 0; top: 0;}


/*========================================================================*/
/*================================business================================*/
/*========================================================================*/

/*================================section.business================================*/

/*========*/
/* common */
/*========*/

.wrap span.bar {position: absolute; width: 5px; height: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #CFDDFF; z-index: 1;}

section.business_contents {position: relative; padding: 5rem 0;}
section.business_contents h2 {padding-bottom: 1rem;}
section.business_contents .inner{max-width: 1280px;}
/*===========*/
/* left_item */
/*===========*/

section.business_contents h2{font-size: 2.0vw;}
section.business_contents p{padding: 0 1vw; font-size: 1.6vw;}
section.business_contents .left_item {margin: auto; height: 75rem; text-align: center;width: 100%; position: relative;}

section.business_contents .left_item .left {box-sizing: border-box; display: inline-block; padding-top: 12vw; width: 50%;height: 100%;float: left;}

section.business_contents .left_item .right {box-sizing: border-box;position: relative; display: inline-block;width: 50%;height: 100%;}
section.business_contents .left_item .left h2 {text-align: left;}
section.business_contents .left_item .left h2:before {content: ''; width: 8vw; height: 0.5vw;    display: inline-block; margin: 0.6vw; margin-right: 1.2vw; background-image: linear-gradient(to right, #127FFF, #98DFFD);}
section.business_contents .left_item .left p {text-align: left; }

section.business_contents .left_item .right .circle {position: absolute; width: 26vw;height: 26vw; border-radius: 50%; background: #CBECFF; left: 0;transform: translateX(-50%);top: 4vw; z-index: -1;}
section.business_contents .left_item .right .rec {position: absolute; width: 40vw; height: 30vw; left: 0; background: #CBECFF;}
section.business_contents .left_item .right img {position: absolute;width: 40vw;height: 30vw; left: 4vw;top: 4vw; display: inline; background: #ADEBFF;}

/*============*/
/* right_item */
/*============*/

section.business_contents .right_item {margin: auto; height: 75rem; width: 100%; text-align: center;position: relative; }
section.business_contents .right_item .left {position: relative; width: 50%; display: inline-block;}
section.business_contents .right_item .right {width: 50%; display: inline-block; float: right; padding-top: 12vw;}
section.business_contents .right_item h2 {text-align: right;}
section.business_contents .right_item p {text-align: right; padding-left: 4rem;}
section.business_contents .right_item h2:after {content: ''; width: 5vw; height: 0.5vw;    display: inline-block; margin: 0.6vw; margin-right: 1.2vw;background-image: linear-gradient(to right, #47E3ED, #D3F2FF);}

section.business_contents .right_item .circle {position: absolute; width: 26vw;height: 26vw; border-radius: 50%; background: #CBF9FF;right: 0;transform: translateX(50%); top: 4vw; z-index: -1;}
section.business_contents .right_item .rec {position: absolute;  width: 40vw; height: 30vw; right: 0; background: #CBF9FF; z-index: -1;}
section.business_contents .right_item img {position: absolute; width: 40vw;height: 30vw; right:4vw; top: 4vw; background-color: #ADEBFF;}




.business_top .top{background: url(../img/bis/factory.png) no-repeat center/cover; height: 55rem;width:100%; overflow: visible;max-width: none;}
.business_top .top .inner{height: 100%;display: flex;}
.business_top .top .title_text{margin: auto;}
.business_top .top .title_text h3{font-size: 5.5rem; color: #fff !important; text-shadow: 0 3px 6px #222222 !important; margin-bottom: 30px;}
.business_top .top .title_text p{font-size: 3.6rem;color: #fff !important;text-shadow: 0 3px 6px #222222 !important;    line-height: 1.5;}
.business_top .inner .top .title{display: block;}

/*============*/
/*section.business_mid*/
/*============*/
.business_mid .inner .title{font-size: 3.6rem;margin-bottom: 40px;}
.business_mid .inner .line{box-sizing: border-box; height: 5px;margin: 00px auto 70px; display: block;width: 98%; background: linear-gradient(45deg, #127FFF, #98DFFD);}
.business_mid .inner .sysList{width: 100%; margin: auto; text-align: center;margin-bottom: 100px;}
.business_mid .inner .sysList li{width: 33%; display: inline-block; margin-bottom: 40px; position: relative; cursor: pointer; }
.business_mid .inner .sysList img{width: 80%;vertical-align: bottom;box-sizing: border-box; border: 4px solid;border-bottom: 0;}
.business_mid .inner .sysList li h3{width: 90%; padding: 10px 0;margin: auto;font-size: 3.0rem;}
.business_mid .inner .sysList li:nth-child(1) img{border-color: #879AFF;}
.business_mid .inner .sysList li:nth-child(1) h3{ background: #879AFF;}
.business_mid .inner .sysList li:nth-child(2) img{border-color: #FF6262;}
.business_mid .inner .sysList li:nth-child(2) h3{ background: #FF6262;}
.business_mid .inner .sysList li:nth-child(3) img{border-color: #B1B1B1;}
.business_mid .inner .sysList li:nth-child(3) h3{ background: #B1B1B1;}
.business_mid .inner .sysList li:nth-child(4) img{border-color: #FFB932;}
.business_mid .inner .sysList li:nth-child(4) h3{ background: #FFB932;}
.business_mid .inner .sysList li:nth-child(5) img{border-color: #9DFFFF;}
.business_mid .inner .sysList li:nth-child(5) h3{ background: #9DFFFF;}
.business_mid .inner .sysList li:nth-child(6) img{border-color: #FBFF23;}
.business_mid .inner .sysList li:nth-child(6) h3{ background: #FBFF23;}

.business_mid .inner .sysList li .sysListContext{cursor:default; height: 0%; text-align: left; z-index: 100; position: absolute; opacity: 0;}

.business_mid .inner .sysList li .sysListContext .topContext{ overflow: hidden; width: 100%; height:  50%}

.business_mid .inner .sysList li:nth-child(1) .sysListContext{top: 0;left: 0;background: url(../img/bis/manufacture.png) no-repeat center/contain #fff; }
.business_mid .inner .sysList li:nth-child(1) .sysListContext .topContext{background: rgba(135, 154,255,0.4);}
.business_mid .inner .sysList li:nth-child(2) .sysListContext{top: 0;left: 50%; transform: translateX(-50%);background: url(../img/bis/quality.png) no-repeat center/contain #fff;}
.business_mid .inner .sysList li:nth-child(2) .sysListContext .topContext{background: rgba(255, 98,98,0.4);}
.business_mid .inner .sysList li:nth-child(3) .sysListContext{top: 0;right: 0;background: url(../img/bis/plant.png) no-repeat center/contain #fff;}
.business_mid .inner .sysList li:nth-child(3) .sysListContext .topContext{background: rgba(177, 177, 177,0.4);}
.business_mid .inner .sysList li:nth-child(4) .sysListContext{bottom: 0;left: 0;background: url(../img/bis/logistics.png) no-repeat center/contain #fff;}
.business_mid .inner .sysList li:nth-child(4) .sysListContext .topContext{background: rgba(255, 185, 50,0.4);}
.business_mid .inner .sysList li:nth-child(5) .sysListContext{bottom: 0;left: 50%; transform: translateX(-50%);background: url(../img/bis/security.png) no-repeat center/contain #fff;}
.business_mid .inner .sysList li:nth-child(5) .sysListContext .topContext{background: rgba(157, 255, 255,0.4);}
.business_mid .inner .sysList li:nth-child(6) .sysListContext{bottom: 0;right: 0;background: url(../img/bis/environment.png) no-repeat center/contain #fff;}
.business_mid .inner .sysList li:nth-child(6) .sysListContext .topContext{background: rgba(251, 255, 35,0.4);}

.business_mid .inner .sysList li .sysListContext .bottomContext{overflow: hidden; background: rgba(68, 68, 68,0.4);width: 100%;height:  50%}

.business_mid .inner .sysList li .sysListContext h3{width: 100%; height: 35%; box-sizing: border-box; font-size: 1.8vw; background: 0; margin: auto 0px; padding: 4% 0px 0 4%; color: #fff !important; text-shadow: 0 3px 6px #222222 !important; overflow: hidden;}

.business_mid .inner .sysList li .sysListContext h3 .close{padding-right: 4%; font-size: 2.0vw; font-weight: 900; cursor:pointer;float: right; display: inline-block;}

.business_mid .inner .sysList li .sysListContext p{width: 100%; height: 65%; box-sizing: border-box; font-size: 1.6vw; margin:auto 0px; padding: 0px 4%;color: #fff !important; text-shadow: 0 3px 6px #222222 !important; }
.business_mid .inner .sysList li .sysListContext .miniExample{ overflow: hidden; width: 100%; height: 65%; display: flex;}

.business_mid .inner .sysList li .sysListContext .miniExample li{ width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #000; border-bottom: 0; text-align: center;}
.business_mid .inner .sysList li .sysListContext .miniExample img{ border: none; width: 95%; height: 80%;}
.business_mid .inner .sysList li .sysListContext h6{width: 100%; height: 20%; display: inline-block;
    font-size: 1.5rem; margin:auto;}

.business_mid .inner .sysList li.on .sysListContext{opacity: 1; transition: all 0.5s 0.1s ease; width: 180%; height: 120%;}



/*===========================================================================*/
/*================================caseStudy================================*/
/*===========================================================================*/
.caseStudy {}
.env{background: #FBFF23;}
.plt{background: #B1B1B1;}
.manu{background: #879AFF;}

.caseStudy .cases{width: 100%;text-align: center;}
.caseStudy .cases_list{display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-direction: row; margin: 20px auto;width: 100%; }
.caseStudy .cases_list .cases_item{display: block;box-sizing: border-box; margin: 20px 5px; width: calc(99.9%/3 - 10px);}
.cases_item>a { height: 100%; display: block; border-radius: 5px; border: 1px solid #e5e5e5; box-shadow: 0 1px 0 #e5e5e5; border-top: 5px solid #0075C2; text-decoration: none; box-sizing: border-box;}
.cases_item>a .cases_img{margin: auto 10px;height: 220px;}
.cases_item>a .cases_img img{width: 90%;max-height: 100%;}
.cases_item>a .cases_text{margin: auto 10px;overflow: hidden;}
.cases_item>a .cases_text h4{display: inline-block;font-size: 2.0rem; padding: 0 10px;}
.cases_item>a .cases_text h3{font-size: 2.2rem;}
.cases_item>a .cases_text p{text-align: left; font-size: 1.6rem;font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

.pager{margin: 40px 0;}
.pager .pagination {text-align: center;　}
.pager .pagination li {display: inline; margin: 0 2px; padding: 0;display: inline-block;  width: 50px;  height: 50px;  text-align: center;  position: relative;  border-radius: 10px;}
.pager .pagination li a{  vertical-align: middle;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  text-align: center;  display:table;  text-decoration: none;  -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;  transition: all  0.3s ease;}
.pager .pagination li a span{  display:table-cell;  vertical-align:middle;}
.pager .pagination li a:hover, .pager .pagination li a.active{color: #fff;  background: #0075C2;}

@media only screen and (max-width: 767px){
  .pager .pagination li{display: none;}
  .pager .pagination li.pre, .pager .pagination li.next{display: inline-block; width: 40%; height: 50px; text-align: center;}
  .pager .pagination li.pre a, .pager .pagination li.next a{ width: 100%; text-align: center;}
  .pager .pagination li.pre span::after{ content: "　前の10件へ";}
  .pager .pagination li.next span::before{ content: "次の10件へ　"; }
}

/*===========================================================================*/
/*================================ModalCase================================*/
/*===========================================================================*/
.modal {width: 100%; max-width: 800px;}
.modalHeader {text-align: center;}
.modalHeader .category{font-size: 3.2rem; margin-top: 60px; display: inline-block;padding: 5px 20px;box-sizing: border-box; }
.modalHeader .title{font-size: 4.8rem;margin-top: 20px;}
.modal .inner{margin: auto 40px ;}
.modal .inner .title{font-size: 3.2rem; margin: 20px;}
.modal .inner .line{box-sizing: border-box; height: 5px; display: block;width: 98%; background: linear-gradient(45deg, #127FFF, #98DFFD);margin-bottom: 20px;margin: auto; opacity: 0.8;}

.inner .modal_system{width: 100%;}
.inner .modal_system img{width: 100%;max-width: 700px; }
.modal .inner p{margin: 20px;}


/*===========================================================================*/
/*================================information================================*/
/*===========================================================================*/

/*============*/
/*section.info*/
/*============*/

.top_sub img{margin: 5rem auto; display: block; width: 99%;}
section.info {text-align: center; position: relative; margin-bottom: 10rem;}
section.info .info_list {margin: auto; text-align: left; width: 90%; height: 100%; display: inline-block;}
section.info .info_list li{box-sizing: border-box; width: 100%; height: 101px;background: url(../img/bg1.png) no-repeat 50%; margin: 2rem auto; position: relative;}
section.info .info_list li:nth-child(1){}
section.info .info_list p {position: absolute;top: 50%; transform: translateY(-50%); margin: auto 0;height: auto; color: #03045E; font-size: 2.2rem;}
section.info .info_list .item_name {padding-left: 8rem; display: inline-block;font-size: 3.5rem;}
section.info .info_list .item_content {padding-left: 30rem;display: inline-block; font-size:  2.5rem;}
section.info .info_list li.customer .item_name{ font-size: 3rem;}
section.info .info_list li.customer .item_content{font-size: 2rem;}

section.info .info_list li .kanadenLink{  background:
    linear-gradient(
      to right,
      rgba(135, 154,255, 1),
      rgba(135, 154,255, 1)
    ),
    linear-gradient(
      to right,
      rgba(37, 158 ,228 , 1),
      rgba(37, 158 ,228 , 1),
      rgba(37, 158 ,228 , 1)
  );
  background-size: 100%  2.4rem, 0 2.4rem;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;}
section.info .info_list li .kanadenLink:hover{  background-size: 0 2.4rem, 100% 2.4rem;}

/*============*/
/*section.access*/
/*============*/

section.access .gmap{overflow: hidden;padding-bottom: 56.25%;position: relative;}
section.access iframe {position: absolute;left: 0;top: 0;height: 100%; width: 100%; border: 0;}
section.access p.caption {padding-left: 1.5rem; margin: 2rem auto 10rem;width: 100%;}

/*================================section.main_recruit================================*/


section.recruit video.introduction{width: 100%;}

section.recruit .link{background: url(../img/recruit.png) no-repeat center/cover; height: 650px; position: relative; box-sizing: border-box; }
section.recruit .link h2 {font-size: 6.4rem;color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
section.recruit .link img {width: 65rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%);}
section.recruit .link p {position: absolute; color: #eee; font-size: 1.8rem; top: 56%; left: 50%; transform: translate(-50%, 0);}




/*=======================================================================*/
/*================================contact================================*/
/*=======================================================================*/

section.contact {height: 70rem; background: url(../img/email.png) no-repeat center/cover; text-align: center; position: relative;}
section.contact p {white-space: nowrap; padding: 20px; background: rgba(173, 235, 255, 0.4); font-size: 4.0rem; color: #03045E; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;}


/*=======================================================================*/
/*================================settlement=============================*/
/*=======================================================================*/

section.settlement .set_frame{width: 100%; height: 100vh; margin-bottom: 3rem;}
embed{width: 100%; height: 85%;}

.set_lst{text-align: center; display: flex; padding: 20px;}
.set_lst li{margin: auto 2rem; cursor: pointer; width: 100%;height: 100%}
.set_lst li h3{color:darkslateblue;font-size: 3.5rem; width: 100%; letter-spacing: 0.5rem; padding:  10px 0;box-sizing: border-box;}
.set_lst li.select h3{color: white; border-radius: 15px;   background-color: #03045E; transition: all 0.5s;}

section.settlement h5{margin: 0 1.2rem; font-size: 1.8rem; }
section.settlement ul {margin: 0 2.5rem; display: flex; font-size: 2.2rem;margin-bottom: 5rem;}
section.settlement ul li{margin-right: 2rem}
section.settlement ul li{  background:
    linear-gradient(
      to right,
      rgba(252, 255, 1, 0.8),
      rgba(252, 255, 1, 0.8),
      rgba(252, 255, 1, 0.8)
    ),
    linear-gradient(
      to right,
      rgba(37, 158 ,228 , 1),
      rgba(37, 158 ,228 , 1),
      rgba(37, 158 ,228 , 1)
  );
  background-size: 100%  2.4rem, 0 2.4rem;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;}
section.settlement ul li:hover{  background-size: 0 2.4rem, 100% 2.4rem;}

/*======================*/
/*====レスポンシブ対応====*/
/*=====================*/
.side-menu {display: none;}

@media screen and (max-width: 1280px) {
    html{font-size: 50%;}
    .header_left{width: auto;}
    .header_right{width: 24%;float: right;}
    
    .header_mid nav.category {z-index: 100; position: fixed; width: 100%; height: 100vh; background: rgba(0, 0, 0, .8); transform: translateY(-100%); transition: all .4s ease-in-out;}
    .header_mid nav.category ul.main {flex-direction: column; height: 100%;margin: 0 auto;justify-content: center;}
    .header_mid nav.category ul.main li.list {margin: 0 auto; width: 20vw; font-size: 4rem; color: #CBF9FF;}
    .header_mid nav.category ul.main li.list:nth-child(4){font-size: 3.4rem;}
    .header_mid nav.category ul.main li.close{padding-left: 1rem; display: block;}
    .header_mid nav.category ul.main li span {cursor: pointer; position: relative; color: #fff;display: block;padding: 2rem 0;}
    .header_mid nav.category ul.main li.list > a{display: inline-block;padding: 2rem 0;}
    
    .header_mid nav.category ul.main .companyInfo_list .dropdown_lists {height: 100%;width: auto; word-break: keep-all;display: flex;max-height: inherit; max-width: 0;top: 0; left: 100%; background: #259ee4; opacity: 1; text-align: center;}
    .header_mid nav.category ul.main .companyInfo_list .dropdown_lists .dropdown_list {width: 20vw; border:0;overflow: hidden;}
    .header_mid nav.category ul.main .companyInfo_list .dropdown_list a {display: inline-block;position: relative; padding: 2rem 0; margin: 0 1rem; font-size: 3.5rem; color:#fff; }
    
    .header_mid nav.category ul.main .companyInfo_list:hover{overflow: visible;transform: translateX(-100%);}
    .header_mid nav.category ul.main .companyInfo_list:hover .dropdown_lists {max-width:250%; transition: all 0.8s;}

    .header_mid nav.category ul.main .companyInfo_list:hover .dropdown_list {border:0; }
    .header_mid nav.category ul.main .companyInfo_list:hover .dropdown_list a{transition: all 1s; opacity: 1;}

    
    .header .hamb {cursor: pointer; float: right; position: relative; display: block; width: 50px; height: 35px; top: 50%; transform: translateY(-50%); margin-right: 10px;}
    .header .hamb span {position: absolute; top: 50%; display: block; width: 100%; height: 5px; background-color: #2A51A3; transform: translateY(-50%); transition: all .2s ease-out; }
    .header .hamb span::before {content: '';display: block; position: absolute; width: 100%; top: -15px; height: 5px; background-color: #2A51A3; transition: all .2s ease-out;}
    .header .hamb span::after {content: ''; display: block; position: absolute; top: 15px; width: 70%; height: 5px; background-color: #2A51A3; transition: all .2s ease-out;}
    .header_mid{width: 0%; position: absolute;}
    
    /*======================*/
    /*ハンバーガーボタン押した時*/
    /*======================*/
    .header .side-menu:checked ~ .header_mid nav.category{transform: translateY(0%);opacity: 1;}
    .header .side-menu:checked ~ .hamb span {transform: rotate(-90deg);transition: all .2s ease-out;}
    .header .side-menu:checked ~ .hamb span::before {transition: all .2s ease-out;}
    .header .side-menu:checked ~ .hamb span::after {width: 100%;transition: all .2s ease-out;}
    
    /*バツ印線1*/
    .header_mid nav.category ul.main li.close span::before {position: absolute; top: 50%; content: ''; display: block; width: 3rem; height: 3px; background: #fff; transform: rotate(45deg);}
    /*バツ印線2*/
    .header_mid nav.category ul.main li.close span::after {position: absolute; top: 50%; content: '';display: block; width: 3rem; height: 3px; background: #fff; transform: rotate(-45deg);}
    
    section.company ul .lst_1 img {width: 110px; height: 110px;}
    section.company ul .lst_2 {margin-right: 2rem;}
    
    section.top .top_label{margin: auto;display: block;}
}



@media screen and (max-width: 959px) {
    html{font-size: 50%;}
    section.company ul li {padding: 0 2rem;}
    section.company ul .lst_1 img {width: 110px; height: 110px;}
    }

@media screen and (max-width: 768px) {
    
    html{font-size: 40%;}
    
    .header_mid nav.category ul.main li.list{width: 25vw;}
    
    .header_left .technocreate{margin: auto 1rem;}
    .header_left .technocreate .companyName li:nth-child(1){font-size: 2rem;}
    .header_left .technocreate .companyName li:nth-child(2){font-size: 3.4rem;}
    .header_mid{width: 0;}
    .header_right{width: 0;}
    .header_right .kanaden .logo{display: none;}

    section.access .gmap{height: 100px;}
    
    section.business_contents .left_item{height: 50rem;}
    section.business_contents .right_item{height: 50rem;}
    .title_label img {width: 25%; position: absolute; left: 50%; top: 50%; transform: translate(0%, -50%); z-index: -1;}
    
/*    footer*/
    
}

@media screen and (max-width: 480px) {
    section.header{position: fixed;top: 0; background: white; z-index: 100;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); }
    html{font-size: 25%;}
    section.top {height: 250px; margin-top: 10rem;}
    section.main_recruit {height: 250px;}
    section.recruit {height: 250px;}

    .header_left .technocreate {padding-top: 0}

    .header_left .technocreate .companyName li:nth-child(1){font-size: 3.0vw;}
    .header_left .technocreate .companyName li:nth-child(2){font-size: 4.0vw;}
    .header_left .technocreate .companyName li{letter-spacing:0px; }
    
    section.info .info_list li{height: 70px;}
    section.info .info_list li:nth-child(9) .item_name{font-size: 2.8rem;}
    section.info .info_list .item_name {padding-left: 1rem; font-size: 3rem;}
    section.info .info_list .item_content {padding-left: 18rem; font-size: 2.8rem;}
    section.info .info_list li.customer .item_name{ font-size: 3rem;}
    section.info .info_list li.customer .item_content{font-size: 2.4rem;}
    
    section.business_contents .left_item h2{padding-left: 8px;font-size: 3rem;}
    section.business_contents .left_item p {padding-left: 8px;font-size: 2.2rem;}
    section.business_contents .right_item h2{padding-right: 8px;font-size: 2.8rem;}
    section.business_contents .right_item p {padding-right: 8px;font-size: 2.2rem;}
    section.company ul img {display: none;}
    section.company ul li:nth-child(1){padding: 0;}
    
    .business_top .top .title_text h3{font-size: 5.5rem;}
    .business_top .top .title_text p{font-size: 2.8rem;}
    .header_left .technocreate .logo{width: 20%;}

}

@media screen and (max-width: 376px) {
    .header_left .technocreate .logo {margin-bottom: 0;}

    section.top .top_label {font-size: 5rem}
    .header_left {width: 71%}
    .header_left .technocreate .companyName{padding-left: 2rem;}

}


/******TEMP*******/
section.forApplicants video.introduction{width: 100%;}
section.forApplicants h3.title{font-size: 5rem}
section.forApplicants ,inner .btn {width: 100%; align-content: center;}
section.forApplicants .inner .btn a.btnToWebSite{margin :3rem auto; display: flex; width: 35%;}
section.forApplicants .inner .btn a.btnToWebSite img{display: inline-block; width: 100%;}

section.forApplicants .inner .btn a.btnToWebSite img:hover{transition: all 0.3s ease; opacity: 0.8}