/* =================== base =================== */



:root {
  --en-font: "Lato", sans-serif;
  --main-color: #9D0C0C;
  --sub-color: #1D1D1D;
  --pink-color: #B981A3;
  --brown-color: #746662;
  --lpurple-color: #965A8B;
  --green-color: #37967C;
  --blue-color: #0C4EA7;
  --lgreen-color: #6FA836;
  --purple-color: #4F4D96;
  --gold-color: #8E8352;
}

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

html { margin: 0; overflow-x: hidden; font-size: 62.5%; box-sizing: border-box; }
body { font-size: 1.6rem; letter-spacing: normal; font-family:  "Noto Sans JP", "Lato","Yu Gothic", "Yu Gothic Medium", Verdana, Meiryo, sans-serif; color: #000; line-height: 1.5; }
*{ box-sizing: border-box; color: #000; }
a{ text-decoration: none; color: #000; cursor: pointer; transition: 0.3s; }
img { vertical-align: bottom; width: 100%; height: auto; }
pre { width: 70%; margin: 1em auto; padding: 1em; border-radius: 5px; background: #25292f; color: #fff; overflow-x: auto; /* ⭐ */ -webkit-overflow-scrolling: touch; /* ⭐ */ }
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
li{ list-style: none; }
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.clear{ clear: both; }
.en{ font-family: var(--en-font); }
.pc { display: block; }
.sp { display: none; }
.ipad { display: none; }
p{ line-height: 1.8em; }
.blue{ color: var(--main-color); }
.lblue{ color: var(--sub-color); }
.btn{ font-weight: 700; position: relative; background: #fff; position: relative; transition: all .5s; white-space: nowrap; padding: 18px 70px; text-align: center; color: #000; font-size: 1.5rem; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.btn2:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/btn-arrow.svg) no-repeat; background-size: contain; height: 15px; width: 15px; right: 15px; top: 0; bottom: 0; margin: auto; }
.btn3{ color: #fff; background: var(--sub-color); }
.btn3:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/btn-arrow03.svg) no-repeat; background-size: contain; height: 15px; width: 15px; right: 15px; top: 0; bottom: 0; margin: auto; }
.btn4{ color: #fff; background: #000; }
.btn4:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/btn-arrow03.svg) no-repeat; background-size: contain; height: 15px; width: 15px; right: 15px; top: 0; bottom: 0; margin: auto; }
.btn5{ background: var(--main-color); }

::placeholder { color: #C5C5C5; }
::-ms-input-placeholder { color: #C5C5C5; }
:-ms-input-placeholder { color: #C5C5C5; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 25px; }

@media screen and (max-width: 1080px) {
.container { max-width: 980px; }
}

@media screen and (max-width: 768px) {
.container { padding: 0 15px; }
}

.pagenavi-box .wp-pagenavi{ text-align: center; margin-top: 90px; }
.wp-pagenavi .pages{ display: none; }
.wp-pagenavi a{ color: #000; }
.wp-pagenavi span{ color: #fff; }
.wp-pagenavi a, .wp-pagenavi span{ transition: all 0.4s; line-height: 22px; font-weight: 700; width: 28px; height: 28px; display: inline-block; margin: 0 5px; overflow: hidden; border: none; position: relative; }
.wp-pagenavi span{ background: #000; }
.wp-pagenavi a:hover{ background: #000; color: #fff; }
.wp-pagenavi .nextpostslink{ color: #fff0; position: relative; }
.wp-pagenavi .nextpostslink:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/nav-icon2.svg) no-repeat; background-size: contain; background-position: center; height: 10px; width: 10px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.wp-pagenavi .nextpostslink:after{ content: none; }
.wp-pagenavi .nextpostslink:hover:before{ background: url(../images/nav-icon3.svg) no-repeat; background-size: contain; height: 10px; width: 10px; background-position: center; }
.wp-pagenavi .nextpostslink:hover{ color: #fff0; }
.wp-pagenavi .previouspostslink{ color: #fff0; position: relative; }
.wp-pagenavi .previouspostslink:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/nav-icon2.svg) no-repeat; background-size: contain; background-position: center; height: 10px; width: 10px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.wp-pagenavi .previouspostslink:after{ content: none; }
.wp-pagenavi .previouspostslink:hover:before{ background: url(../images/nav-icon3.svg) no-repeat; background-size: contain; height: 10px; width: 10px; background-position: center; }
.wp-pagenavi .previouspostslink:hover{ color: #fff0; }

/* =================== header =================== */

header { position: absolute; top: 0; left: 0; width: 100%; z-index: 999; }
header .container{ max-width: 1280px; }
header .box{ margin-bottom: 0!Important; }
header .box .left{ max-width: 369px; }
header .box .left .logo{ width: 60%; }
header .box{ height: 70px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
header .box .right ul{ margin-left: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
header .box .right ul li a{ letter-spacing: .05em; overflow: hidden; display: inline-block; line-height: 1.5em; text-align: center; color: #fff; font-weight: 700; font-size: 1.4rem; white-space: nowrap; }
header .box .right ul li a:hover .en{ margin-top: -1.5em; }
header .box .right ul li a span{ transition: 0.3s; display: block; color: #fff; line-height: 1.5em; }
header .box .right ul li:nth-child(1){ margin-right: 35px; }
header .box .right ul li .head-btn{ font-size: 1.5rem; padding: 11px 60px; display: block; height: auto; border: 2px solid #9D0C0C; }
header .box .right ul li .head-btn1{ border-right: 0; background-color: rgb(255 255 255 / 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--main-color); }
header .box .right ul li .head-btn2{ background-color: var(--main-color); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);  color: #fff;}
header .box .right ul li:nth-child(-n+5){ margin-right: 25px; }
header .modalbtn{ display: none; }

header{ position: fixed; -webkit-transition: 0.3s; transition: 0.3s; background-color: rgba(255,255,255,0.9); }
header .box .right ul li a{ color: #000; }
/* header.head_fixed .box .right ul li .head-btn{ color: #fff; } */
header.head_fixed .box .right ul li .head-btn2{ color: #fff; }
header.head_fixed .box .left .logo1{ display: none; }
header.head_fixed .box .left .logo2{ display: block; }

.wrapper{ position: relative; /*overflow: hidden;*/ }

/* =================== footer =================== */

footer{ padding: 100px 0 30px; background: var(--sub-color); position: relative; overflow: hidden; }
footer .qr{ max-width: 70px; margin-left: 20px; margin-top: -20px; }
footer .box{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 90px; }
footer .box .left{ width: 40%; }
footer .box .left .top{ display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
footer .box .left .logo{ max-width: 240px; margin-bottom: 25px; display: block; }
footer .box .left p{ color: #fff; font-size: 1.4rem; }
footer .box .left p.text2{ margin-top: 15px; font-size: 1.4rem; font-weight: 700; }
footer .box .left p.text2 .big{ color: #fff; padding: 0 15px 0 4px; font-size: 2.6rem; }
footer .box .left p a{ color: #fff; }
footer .box .left p.text2 a{ pointer-events: none; }
footer .box .right{ width: 60%; }
footer .box .right nav{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
footer .box .right nav ul:nth-child(1){ margin-right: 40px; width: 100%; max-width: 200px; }
footer .box .right nav ul li{ margin-bottom: 25px; position: relative; }
footer .box .right nav ul li .accordion-item span{ color: #fff; display: block; position: relative; }
footer .box .right nav ul li .accordion-item span:before{ transition: 0.3s; content: ""; position: absolute; right: 4.5px; top: 2px; height: 10px; width: 1px; background: #fff; }
footer .box .right nav ul li .accordion-item span:after{ content: ""; position: absolute; right: 0; top: 6.5px; height: 1px; width: 10px; background: #fff; }
footer .box .right nav ul li .accordion-item.active span:before{ -webkit-transform: rotate(90deg); transform: rotate(90deg); }
footer .box .right nav ul li .accordion-initem span{ color: #fff; display: block; position: relative; }
footer .box .right nav ul li .accordion-initem span:before{ transition: 0.3s; content: ""; position: absolute; right: 4.5px; top: 2px; height: 10px; width: 1px; background: #fff; }
footer .box .right nav ul li .accordion-initem span:after{ content: ""; position: absolute; right: 0; top: 6.5px; height: 1px; width: 10px; background: #fff; }
footer .box .right nav ul li .accordion-initem.active span:before{ -webkit-transform: rotate(90deg); transform: rotate(90deg); }
footer .box .right nav ul li ul{ padding: 10px 0 0 23px; display: none; margin-right: 0; }
footer .box .right nav ul li ul li:not(:last-child){ margin-bottom: 15px; }
footer .box .right nav ul li ul li a,
footer .box .right nav ul li ul li .accordion-item span,
footer .box .right nav ul li ul li .accordion-initem span{ font-size: 1.2rem; }
footer .box .right nav ul li ul li a,
footer .box .right nav ul li ul li .accordion-item,
footer .box .right nav ul li ul li .accordion-initem{ padding-left: 15px; }
footer .box .right nav ul li .accordion-item,
footer .box .right nav ul li .accordion-initem{ margin-bottom: 5px; }
footer .box .right nav ul li a,
footer .box .right nav ul li .accordion-item,
footer .box .right nav ul li .accordion-initem{ line-height: 1.3em; cursor: pointer; display: block; position: relative; font-size: 1.3rem; color: #fff; font-weight: 700; padding-left: 23px; }
footer .box .right nav ul li a.brank{ padding-right: 25px; }
footer .box .right nav ul li a.brank:before{ content: ""; z-index: 0; position: absolute; background: url(../images/brank.svg) no-repeat; background-size: contain; height: 11px; width: 11px; right: 0; top: 0; bottom: 0; margin: auto; }
footer .box .right nav ul li a:after,
footer .box .right nav ul li .accordion-item:after{ content: ""; z-index: 0; position: absolute; background: url(../images/nav-arrow.svg) no-repeat; background-size: contain; height: 8px; width: 4px; left: 0; top: 0; bottom: 0; margin: auto; }
footer .box .right nav ul li ul li a:after,
footer .box .right nav ul li ul li .accordion-initem:after{ content: ""; z-index: 0; position: absolute; background: none; background-size: contain; height: 1px; width: 4px; left: 0; top: 0; bottom: 0; margin: auto; background-color: #fff; }

footer .box .right nav .banner-box{
  margin-left: 40px;
}
footer .box .right nav .banner-box a{
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .box .right nav .banner-box img{
  max-width: 167px;
}

footer small{ letter-spacing: .05em; font-size: 1.2rem; color: #fff; }
footer .page-top{ position: absolute; bottom: 150px; right: 50px; cursor: pointer; color: #fff; font-weight: 700; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
footer .page-top:before{ content: ""; z-index: 0; position: absolute; background: #fff; height: 115px; width: 1px; left: 0; right: 0; top: -150px; margin: auto; }
/* =================== top =================== */

#top .fv{ background: #e7e7e7; position: relative; }
#top .fv .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 3rem; }
#top .fv .container h2{  }
#top .fv .movie{ position: relative; width: 100%; padding-top: 56.25%; }
#top .fv .movie iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }
#top section{ padding: 150px 0; }
section .top-sectitle{ font-weight: 700; font-size: 2.3rem; margin-bottom: 50px; }
section .top-sectitle span{ display: block; font-weight: 700; font-size: 2.5rem; margin-bottom: 15px; }

#top #sec01 .container{ max-width: 915px; }
#top #sec01 .left{ width: 25%; }
#top #sec01 .left p{ font-size: 1.5rem; color: #959595; font-weight: 700; margin-bottom: 45px; }
#top #sec01 .left .btn-box a{ box-shadow: 0 3px 26px rgb(0 0 0 / 6%); max-width: 185px; width: 100%; }
#top #sec01 .right{ width: 75%; padding-left: 85px; }
#top #sec01 .right ul .item{ position: relative; border-bottom: 1px solid #E5E5E5; }
#top #sec01 .right ul .item:before{ content: ""; transition: all .3s; position: absolute; width: 118px; height: 1px; bottom: -1px; border-bottom: 1px solid var(--main-color); }
#top #sec01 .right ul .item:hover:before{ width: 100%; }
#top #sec01 .right ul .item a{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 20px 15px; }
#top #sec01 .right ul .item a:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/btn-arrow02.svg) no-repeat; background-size: contain; height: 20px; width: 20px; right: 0; top: 0; bottom: 0; margin: auto; }
#top #sec01 .right ul .item .date{ height: 100%; position: relative; font-size: 1.3rem; font-weight: 700; width: 80px; line-height: 1.5em; }
#top #sec01 .right ul .item .text{ width: calc( 100% - 245px ); -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 20px; }
#top #sec01 .right ul .item .text p{ font-size: 1.5rem; line-height: 1.5em; }
#top #sec01 .right ul .item .category{ margin-left: 50px; margin-right: 35px; }
#top #sec01 .right ul .item .category li{ display: inline-block; width: 80px; background: #000; color: #fff; font-weight: 700; font-size: 1.3rem; text-align: center; padding: 10px 0; }
#top #sec01 .right ul .item .category li.other{ background: #F0F0F0; color: #000; }
#top #sec01 .right ul .item .category li.news{ background: #003888; }
#top #sec01 .right ul .item .category li.recruit{ background: var(--main-color); }

#top section.top-news-sec{ padding-bottom: 0; }
#top .top-news-sec .container{ max-width: 915px; }
#top .top-news-sec .left{ width: 25%; }
#top .top-news-sec .left p{ font-size: 1.5rem; color: #959595; font-weight: 700; margin-bottom: 45px; }
#top .top-news-sec .left .btn-box a{ box-shadow: 0 3px 26px rgb(0 0 0 / 6%); max-width: 185px; width: 100%; }
#top .top-news-sec .right{ width: 75%; padding-left: 85px; }
#top .top-news-sec .right ul .item{ position: relative; border-bottom: 1px solid #E5E5E5; }
#top .top-news-sec .right ul .item:before{ content: ""; transition: all .3s; position: absolute; width: 118px; height: 1px; bottom: -1px; border-bottom: 1px solid var(--main-color); }
#top .top-news-sec .right ul .item:hover:before{ width: 100%; }
#top .top-news-sec .right ul .item a{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 20px 15px; }
#top .top-news-sec .right ul .item a:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/btn-arrow02.svg) no-repeat; background-size: contain; height: 20px; width: 20px; right: 0; top: 0; bottom: 0; margin: auto; }
#top .top-news-sec .right ul .item .date{ height: 100%; position: relative; font-size: 1.3rem; font-weight: 700; width: 80px; line-height: 1.5em; }
#top .top-news-sec .right ul .item .text{ width: calc( 100% - 245px ); -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 20px; }
#top .top-news-sec .right ul .item .text p{ font-size: 1.5rem; line-height: 1.5em; }
#top .top-news-sec .right ul .item .category{ margin-left: 50px; margin-right: 35px; }
#top .top-news-sec .right ul .item .category li{ display: inline-block; width: 80px; background: #000; color: #fff; font-weight: 700; font-size: 1.3rem; text-align: center; padding: 10px 0; }
#top .top-news-sec .right ul .item .category li.other{ background: #F0F0F0; color: #000; }
#top .top-news-sec .right ul .item .category li.news{ background: #003888; }
#top .top-news-sec .right ul .item .category li.recruit{ background: var(--main-color); }

#top .count-box-inner{
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
}
#top .count-box{
      border: solid 2px var(--sub-color);
      display: flex;
      justify-content: center;
      width: 48%;
      background: url(../images/top-count01.svg) no-repeat  top left;
      background-size: 15%;
      padding: 2rem 0;
      padding-bottom: 0rem;
      background-position-x: 6px;
      background-position-y: 9px;
}
#top .count-box:nth-child(2){
  background: url(../images/top-count02.svg) no-repeat top left;
  background-size: 25%;
  background-position-x: 6px;
  background-position-y: 9px;

}
#top .count-box > .flex{
  align-items: center;
  flex-direction: column;
}
#top .count-box > .flex .title{
  font-size: 2.6rem;
  font-weight: 500;
}
#top .count-box > .flex .item{
  align-items: baseline;
  font-weight: 500;
  margin-top: -4rem;
}
#top .count-box > .flex .item p{
  font-size: 3rem;
}
#top .count-box > .flex .item .en{
  font-size: 10rem;
  font-weight: 900;
}
#top #sec02{ padding: 0; position: relative; }
#top #sec02:before{ content: ""; position: absolute; width: 100%; margin-left: calc((100vw - 840px) / 2); background: url(../images/top-sec02-bg.jpg) no-repeat; background-position: center; background-size: contain; height: 100%; z-index: -1; }
#top #sec02 .container{ position: relative; }
#top #sec02 .container:before{ content: ""; position: absolute; left: 0; background: url(../images/top-sec02-text.svg) no-repeat; background-size: contain; background-position: left top; height: 100%; width: 100%; z-index: -1; }
#top #sec02 .box{ padding: 120px 0 100px 200px; }
#top #sec02 .box .text{ max-width: 400px; }
#top #sec02 .box .text h2{ line-height: 1.5em; }
#top #sec02 .box .text h2 span{ line-height: 1em; }
#top #sec02 .box .text p{ margin-bottom: 50px; }

#top #sec03{  }
#top #sec03 .flex{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#top #sec03 ul{ -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#top #sec03 ul .item{ width: 50%; }
#top #sec03 ul .item.op0{opacity: 0;}
#top #sec03 ul .item:nth-child(-n+6){ margin-bottom: 0.5%; }
#top #sec03 ul .item.item01 a{background: var(--main-color);}
#top #sec03 ul .item.item01 a h3{color: white;}
#top #sec03 ul .item.item01 a h3:before{background: white;}
#top #sec03 ul .item.item01 a p{color: white;}
#top #sec03 ul .item.item02 a{border: 2px solid var(--sub-color); background: white;}
#top #sec03 ul .item a{ height: 100%; position: relative; display: block; transition: all .3s; text-align: center; background: #F5F5F5; padding: 35px 30px 45px; }
#top #sec03 ul .item a:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/list-arrow.svg) no-repeat; background-size: contain; height: 8px; width: 15px; right: 0; left: 0; bottom: 20px; margin: auto; }
#top #sec03 ul .item a:hover h3,
#top #sec03 ul .item a:hover p{ color: #fff; }
#top #sec03 ul .item a:hover h3:before{ background: #fff!important; }
#top #sec03 ul .item a h3{ transition: all .3s; position: relative; font-size: 1.8rem; color: #000; padding-bottom: 15px; margin-bottom: 15px; font-weight: 700; }
#top #sec03 ul .item a h3:before{ content: ""; left: 0; right: 0; margin: auto; width: 17px; height: 2px; background: #000; position: absolute; bottom: 0; }
#top #sec03 ul .item a h3 span{ padding-top: 10px; margin-left: 30px; font-size: 1.4rem; color: #fff; }
#top #sec03 ul .item a p{ transition: all .3s; color: #959595; font-size: 1.2rem; font-weight: 700; }
#top #sec03 ul .item01 a:hover{ background: var(--sub-color); }
#top #sec03 ul .item01 a h3:before{ background: var(--sub-color); }
#top #sec03 ul .item02 a:hover{ background: var(--sub-color); }
#top #sec03 ul .item02 a h3:before{ background: var(--sub-color); }
#top #sec03 ul .item03 a:hover{ background: var(--brown-color); }
#top #sec03 ul .item03 a h3:before{ background: var(--brown-color); }
#top #sec03 ul .item04 a:hover{ background: var(--lpurple-color); }
#top #sec03 ul .item04 a h3:before{ background: var(--lpurple-color); }
#top #sec03 ul .item05 a:hover{ background: var(--green-color); }
#top #sec03 ul .item05 a h3:before{ background: var(--green-color); }
#top #sec03 ul .item06 a:hover{ background: var(--blue-color); }
#top #sec03 ul .item06 a h3:before{ background: var(--blue-color); }
#top #sec03 ul .item07 a:hover{ background: var(--lgreen-color); }
#top #sec03 ul .item07 a h3:before{ background: var(--lgreen-color); }
#top #sec03 ul .item08 a:hover{ background: var(--purple-color); }
#top #sec03 ul .item08 a h3:before{ background: var(--purple-color); }
#top #sec03 ul .item09 a:hover{ background: var(--gold-color); }
#top #sec03 ul .item09 a h3:before{ background: var(--gold-color); }

.cta-rec{ padding: 0 !important; position: relative; overflow: hidden; margin-top: 12rem;}
.cta-rec .container{ position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; }
.cta-rec .flex{ height: 100%; }
.cta-rec .left{  display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%; }
.cta-rec .left h2{ font-size: 12.2rem; font-weight: 700; color: #fff; }
.cta-rec .right{ position: relative; width: calc( 50% - 50px ); margin-left: 50px; background-color: rgb(7 7 7 / 50%);; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); }
.cta-rec .right .box{ position: absolute; top: 50%; left: 00; transform: translate(0, -50%); padding: 130px 60px 145px; }
.cta-rec .right .box h3{ width: 100%; line-height: 1.5em; font-size: 2.8rem; margin-bottom: 30px; color: #fff; }
.cta-rec .right .box p{ width: 100%; font-size: 1.4rem; margin-bottom: 40px; color: #fff;  }
.sub section.cta-rec{
  padding-top: 0;
  padding-bottom: 0;
}
.sub section.cta-rec:not(:last-child){
  padding-bottom: 0;
}



.contact-cva .top-sectitle{ margin-bottom: 40px; text-align: center; }
.contact-cva .text{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 45px; }
.contact-cva .text .left{ margin-right: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.contact-cva .text .left span{ margin-right: 15px; display: inline-block; padding: 5px 10px; border: 1px solid #707070; color: #000; font-weight: 700; font-size: 1.3rem; text-align: center; }
.contact-cva .text .left a{ font-weight: 900; color: #000; font-size: 4.6rem; }
.contact-cva .text .left p{ line-height: 1.3em; font-size: 1.5rem; }
.contact-cva .btn-box{ margin: auto; max-width: 665px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.contact-cva .btn-box a{ width: 49.5%; color: #fff; }
.contact-cva .btn-box a:nth-child(1){ background: #0087C6; }
.contact-cva .btn-box a:nth-child(2){ background: var(--main-color); }
.contact-cva .btn-box a img{ width: auto; max-height: 18px; margin-right: 15px; }

/* =================== sub =================== */

.sub .title-box{}
.sub .title-box .img-box img{ max-height: 500px; object-fit: cover; object-position: center; }
.sub .title-box .flex{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.sub .title-box .title-flex{ padding-bottom: 60px; padding-top: 20px; background: var(--sub-color); }
.sub .title-box .title-flex h2{ margin-top: -80px; font-weight: 700; font-size: 2.6rem; color: #fff; }
.sub .title-box .title-flex h2 span{ font-weight: 700; margin-bottom: 9px; font-size: 7.9rem; display: block; color: #fff; }
.sub .title-box .title-flex .breadcrumbs{ font-family: var(--en-font); letter-spacing: .05em; margin-top: 15px; color: #fff; font-size: 1.5rem; }
.sub .title-box .title-flex .breadcrumbs a,
.sub .title-box .title-flex .breadcrumbs span{ font-family: var(--en-font); letter-spacing: .05em; color: #fff; font-size: 1.5rem; }
.sub section{ padding-top: 120px; }
.sub section:not(:last-child){ padding-bottom: 120px; }
.sub section .sec-intitle h3{ background: var(--main-color); padding: 20px; font-weight: 700; font-size: 2.2rem; color: #fff; margin-bottom: 55px; }
.sub section .box-intitle h4{ border-left: 2px solid var(--main-color); padding: 10px 20px; font-weight: 700; font-size: 2rem; margin-bottom: 25px; }
.sub .page-nav{ margin-top: -23px;text-align: center; }
.sub .page-nav ul{ display: inline-flex; background: #fff; box-shadow: 0 3px 44px rgb(0 0 0 / 6%); padding: 15px 10px; }
.sub .page-nav ul li{ padding: 0 40px; }
.sub .page-nav ul li:not(:last-child){ border-right: 1px solid #D6DEEB; }
.sub .page-nav ul li a{ position: relative; color: var(--main-color); font-weight: 700; font-size: 1.4rem; padding-right: 15px; }
.sub .page-nav ul li a:before{ content: ""; z-index: 0; position: absolute; background: url(../images/pagenav-arrow.svg) no-repeat; background-size: contain; height: 5px; width: 5px; right: 0; top: 0; bottom: 0; margin: auto; }


/* =================== recruit =================== */
#recruit .box {
  margin-bottom: 70px;
}

#recruit #sec01 .left {
  width: 25%;
}
#recruit #sec01 .left .top-sectitle {
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 50px;
  color: var(--main-color);
}

#recruit #sec01 .left .top-sectitle span {
  color: var(--main-color);
  display: block;
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 15px;
}
#recruit #sec01 .left p {
  font-size: 1.5rem;
  margin-bottom: 45px;
}

#recruit #sec01 .left .btn-box a {
  box-shadow: 0 3px 26px rgb(0 0 0 / 6%);
  max-width: 185px;
  width: 100%;
}

#recruit #sec01 .right {
  width: 75%;
  padding-left: 85px;
}

#recruit #sec01 .right ul .item {
  position: relative;
  border-bottom: 1px solid #E5E5E5;
}

#recruit #sec01 .right ul .item:before {
  content: "";
  transition: all .3s;
  position: absolute;
  width: 118px;
  height: 1px;
  bottom: -1px;
  border-bottom: 1px solid var(--main-color);
}

#recruit #sec01 .right ul .item:hover:before {
  width: 100%;
}

#recruit #sec01 .right ul .item a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  padding: 20px 15px;
}

#recruit #sec01 .right ul .item a:before {
  content: "";
  z-index: 0;
  transition: all 0.4s;
  position: absolute;
  background: url(../images/btn-arrow02.svg) no-repeat;
  background-size: contain;
  height: 20px;
  width: 20px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

#recruit #sec01 .right ul .item .date {
  height: 100%;
  position: relative;
  font-size: 1.3rem;
  font-weight: 700;
  width: 80px;
  line-height: 1.5em;
}

#recruit #sec01 .right ul .item .text {
  padding: 0 35px 0 0;
  width: calc( 100% - 245px );
}

#recruit #sec01 .right ul .item .text p {
  font-size: 1.5rem;
  line-height: 1.5em;
}

#recruit #sec01 .right ul .item .category {
  margin-left: 50px;
  margin-right: 20px;
}

#recruit #sec01 .right ul .item .category li {
  display: inline-block;
  width: 80px;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
  padding: 10px 0;
}

#recruit #sec01 .right ul .item .category li.other {
  background: #F0F0F0;
  color: #000;
}

#recruit #sec01 .right ul .item .category li.news {
  background: #003888;
}

#recruit #sec01 .right ul .item .category li.recruit {
  background: #478D9C;
}

#recruit .r_topmessage{
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
#recruit .r_topmessage .pa{
  position: absolute;
  right: 100px;
  top: 0;
  width: 180px;
  z-index: 0;
}
#recruit .r_topmessage .flex {
  max-width: 100%;
  margin-right: calc((100vw - 1080px) / 2);
  position: relative;
}
#recruit .r_topmessage .flex .left{width: 50%; overflow: hidden; position: relative; z-index: -1;}
#recruit .r_topmessage .flex .left img{ height: 100%; object-fit: cover; object-position: center; }
#recruit .r_topmessage .flex .right{width: 50%;padding-left: 100px;}
#recruit .r_topmessage .flex .right h3{
  font-size: 50px;
  font-weight: bold;
  color: var(--main-color);
  display: flex;
  align-items: center;
  margin-bottom: 57px;
  position: relative;
  padding-left: 35px;
}
#recruit .r_topmessage .flex .right h3 span{
  color: var(--main-color);
  font-size: 19px;
  font-weight: bold;
  margin-left: 30px;
}
#recruit .r_topmessage .flex .right h3:before{
  content: '';
    width: 20px;
    height: 4px;
    display: inline-block;
    background-color: var(--main-color);
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
}

.text:before {
  margin-right: 10px;
}
#recruit .r_topmessage .flex .right h4{
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 25px;
}
#recruit .r_topmessage .flex .right p{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 47px;
}
#recruit .r_topmessage .img-flex{
  display: flex;
  max-width: 100%;
  margin-right: calc((100vw - 1080px) / 2);
  margin-top: 90px;
}
#recruit .r_topmessage .img-flex .left {
  width: 50%;
  position: relative;
}
#recruit .r_topmessage .img-flex .left:before{ content: ""; position: absolute; width: 75%; height: 100%; background: url(../images/recruit-object.svg) no-repeat; background-size: contain; background-position: left bottom; left: -33%; bottom: 9%; z-index: 2; }
#recruit .r_topmessage .flex .left:before{ content: ""; position: absolute; width: 95%; height: 100%; background: url(../images/recruit-object.svg) no-repeat; background-size: contain; background-position: left bottom; left: -60%; bottom: -15%; z-index: 2; }
#recruit .r_topmessage .img-flex .right {
  width: 50%;
  padding-left: 100px;
  position: relative;
}
#recruit .btn2:before{
  display: none;
}
#recruit #sec01 .btn{
  background-color: var(--main-color);
  color: #fff;
}


#recruit_post #sec01 li{
  margin-bottom: 74px;
}
#recruit_post li h3{
  font-size: 24px;
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 62px;
}
#recruit_post li .sub-ttl{
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 40px;
  position: relative;
}
#recruit_post li a{
  display: block;
}

#recruit_post li a:not(:last-child){
  margin-bottom: 40px;
}

#recruit_post li .sub-ttl::after{
  right: 3px;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    position: absolute;
}
#recruit_post #sec01 .btn2:before {
  display: none;
}
#recruit_post #sec01 .btn {
  background-color: var(--main-color);
  color: #fff;
}
/* =================== new-graduate =================== */

.r_message .flex{
  max-width: 100%;
  margin-left: calc((100vw - 1080px) / 2);
  padding-left: 25px;
}
.r_message .flex .left{
  width: 50%;
  padding-right: 100px;
}
.r_message .flex .left h3{
  color: var(--main-color);
  display: flex;
  align-items: center;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 57px;
}
.r_message .flex .left h3 span{
  color: var(--main-color);
  font-size: 19px;
  margin-left: 30px;
}
.r_message .flex .left h4{
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 40px;
  line-height: 1.5;
}
.r_message .flex .left p{
  font-size: 16px;
  line-height: 1.8;
}
.r_message .flex .right{
  width: 50%;
}
.r_message .flex .right img{
  box-shadow: 0 3px 26px rgb(0 0 0 / 6%);
}

.l_message .flex{
  max-width: 100%;
  margin-right: calc((100vw - 1080px) / 2);
  padding-right: 25px;
}
.l_message .flex .right{
  width: 50%;
  padding-left: 100px;
}
.l_message .flex .right h3{
  color: var(--main-color);
  display: flex;
  align-items: center;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 57px;
}
.l_message .flex .right h3 span{
  color: var(--main-color);
  font-size: 19px;
  margin-left: 30px;
}
.l_message .flex .right h4{
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 40px;
  line-height: 1.5;
}
.l_message .flex .right p{
  font-size: 16px;
  line-height: 1.8;
}
.l_message .flex .right{
  width: 50%;
}
.l_message .flex .left{
  width: 50%;
}
.l_message .flex .left img{
  box-shadow: 0 3px 26px rgb(0 0 0 / 6%);
}
#cross_link{
  margin-bottom: 70px;
}
#cross_link img{
  box-shadow: 0 3px 26px rgb(0 0 0 / 6%);
}
#recruit_box{
  background: url(../images/recruit_bg.jpg) no-repeat;
  background-size: cover;
  padding: 120px 0;
}
#recruit_box .top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 96px;
}
#recruit_box .top .ttl{
  font-size: 120px;
  font-weight: 700;
  color: #fff;
}
#recruit_box .top p{
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  text-align: right;
}
#recruit_box .link_box{}
#recruit_box .link_box ul{
  display: flex;
  justify-content: space-between;
}
#recruit_box .link_box ul a{
  width: 33%;
}
#recruit_box .link_box2 ul a{
  width: 49%;
}
#recruit_box .link_box ul a li{
  background-color: #fff;
  padding: 55px 35px;
  position: relative;
  height: 100%;
}
#recruit_box .link_box2 ul a li{
  padding: 55px 35px;
}
#recruit_box .link_box ul a li::after{
  content: "";
  z-index: 0;
  transition: all 0.4s;
  position: absolute;
  background: url(../images/btn_arrow.svg) no-repeat;
  background-size: contain;
  background-position: center;
  height: 8px;
  width: 15px;
  right: 20px;
  bottom: 20px;
  margin: auto;
}
#recruit_box .link_box ul a li h4{
  font-size: 29px;
  font-weight: bold;
  margin-bottom: 27px;
}
#recruit_box .link_box ul a li h4 span{
  font-size: 17px;
  font-weight: bold;
  color: var(--main-color);
  display: block;
  margin-bottom: 12px;
}
#recruit_box .link_box ul a li p{
  font-size: 15px;
  line-height: 1.8;
}

#recruit_box .link_box3 ul{
  justify-content: center;
  padding-top: 40px;
}

#recruit_box .link_box3 ul li a img{
  width: auto;
  padding: 5px;
}

#question .link_box ul{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
#question .link_box ul a{
  width: 49%;
}
#question .link_box ul a li{
  background-color: #fff;
  padding: 55px 35px;
  position: relative;
}
#question .link_box ul a li::after{
  content: "";
  z-index: 0;
  transition: all 0.4s;
  position: absolute;
  background: url(../images/btn_arrow.svg) no-repeat;
  background-size: contain;
  background-position: center;
  height: 8px;
  width: 15px;
  right: 20px;
  bottom: 20px;
  margin: auto;
}
#question .link_box ul a li h4{
  font-size: 29px;
  font-weight: bold;
  margin-bottom: 27px;
}
#question .link_box ul a li h4 span{
  font-size: 17px;
  font-weight: bold;
  color: var(--main-color);
  display: block;
  margin-bottom: 12px;
}
#question .link_box ul a li p{
  font-size: 15px;
  line-height: 1.8;
}



#question{
  background-color: #F8F8F8;
}
#question .container {
  max-width: 915px;
}
#question .top-sectitle{
  text-align: center;
}
#question .top-sectitle span{
  color: var(--main-color);
}
#question .top_text{
  text-align: center;
}
#question .tac ul {
  display: inline-flex;
  background: #fff;
  box-shadow: 0 3px 44px rgb(0 0 0 / 6%);
  padding: 15px 10px;
  margin: 0;
  margin-top: 55px;
}

#question .tac ul li {
  padding: 0 50px;
  width:  auto!important;
}

#question .tac ul li:not(:last-child) {
  border-right: 1px solid #D6DEEB;
}
#question .tac ul li.active:before{ content: none; }
#question .tac ul li a {
  position: relative;
  color: var(--main-color)!Important;
  font-weight: 700!Important;
  font-size: 1.4rem!Important;
  padding: 0 15px 0 0 !Important;
  background: none!important;

}

#question .tac ul li a:before {
  content: "";
  z-index: 0;
  position: absolute;
  background: url(../images/pagenav-arrow.svg) no-repeat;
  background-size: contain;
  height: 5px;
  width: 5px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#question h3{
  color: var(--main-color);
  font-size: 21px;
  margin-bottom: 36px;
  font-weight: bold;
}
#question .accordion-area {
  list-style: none;
  max-width: 900px;
  margin: 0 auto;
  background: none;
  padding: 0;
  display: none;
  padding-top: 70px;
}

#question .accordion-area.is-active{
  display: block;
}


#question .accordion-area li {
  margin: 10px 0;
  border: 2px solid #003581;
  background-color: #fff;
}


#question .title {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 50px 15px 15px;
  transition: all .5s ease;
}
#question .title p{
  color: #003581;
}
#question .title .left{
  color: #003581;
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-right: 15px;
  font-family: var(--en-font);
}

#question .title::before{
  content: "";
    display: block;
    position: absolute;
    top: 45%;
    right: 20px;
    transform: translateY(0%) rotate(-45deg);
    width: 7px;
    height: 7px;
    border-top: 2px solid #003581;
    border-right: 2px solid #003581;
    transition: 0.3s;
}

#question .title.close::before{
    transform: translateY(-45%) rotate(135deg);
}



#question .box {
  display: none;
  background: #fff;
  border-top: 2px solid #003581;
  padding: 15px;
  margin-bottom: 0;
}
#question .box p {
  font-size: 14px;
}

#question .box .left {
  color: #D8540E;
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-right: 15px;
}
.tac{
  text-align: center;
}





/* =================== service =================== */
#service #sec01 .flex{
  justify-content: space-between;
}
#service #sec01 .flex .left{
  width: 40%;
}
#service #sec01 .flex .left h3{
  font-size: 35px;
  color: var(--main-color);
  margin-bottom: 40px;
  font-weight: bold;
}
#service #sec01 .flex .left h4{
  margin-bottom: 55px;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
}
#service #sec01 .flex .right{
  width: 50%;
}
/* #service .right .flex {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
} */

#service main .right ul {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#service main .right ul .item {
  width: 49.5%;
}

#service main .right ul .item:not(:last-child) {
  margin-bottom: 0.5%;
}

#service main .right ul .item a {
  position: relative;
  display: block;
  transition: all .3s;
  text-align: center;
  background: #F5F5F5;
  padding: 35px 30px 45px;
}

#service main .right ul .item a:before {
  content: "";
  z-index: 0;
  transition: all 0.4s;
  position: absolute;
  background: url(../images/list-arrow.svg) no-repeat;
  background-size: contain;
  height: 8px;
  width: 15px;
  right: 0;
  left: 0;
  bottom: 20px;
  margin: auto;
}

#service main .right ul .item a:hover h3,
#service main .right ul .item a:hover p {
  color: #fff;
}

#service main .right ul .item a:hover h3:before {
  background: #fff !important;
}

#service main .right ul .item a h3 {
  transition: all .3s;
  position: relative;
  font-size: 1.8rem;
  color: #000;
  padding-bottom: 15px;
  margin-bottom: 15px;
  font-weight: 700;
}

#service main .right ul .item a h3:before {
  content: "";
  left: 0;
  right: 0;
  margin: auto;
  width: 17px;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: 0;
}

#service main .right ul .item a h3 span {
  padding-top: 10px;
  margin-left: 30px;
  font-size: 1.4rem;
  color: #fff;
}

#service main .right ul .item a p {
  transition: all .3s;
  color: #959595;
  font-size: 1.2rem;
  font-weight: 700;
}

#service main .right ul .item01 a:hover {
  background: var(--sub-color);
}

#service main .right ul .item01 a h3:before {
  background: var(--sub-color);
}

#service main .right ul .item02 a:hover {
  background: var(--pink-color);
}

#service main .right ul .item02 a h3:before {
  background: var(--pink-color);
}

#service main .right ul .item03 a:hover {
  background: var(--brown-color);
}

#service main .right ul .item03 a h3:before {
  background: var(--brown-color);
}

#service main .right ul .item04 a:hover {
  background: var(--lpurple-color);
}

#service main .right ul .item04 a h3:before {
  background: var(--lpurple-color);
}

#service main .right ul .item05 a:hover {
  background: var(--green-color);
}

#service main .right ul .item05 a h3:before {
  background: var(--green-color);
}

#service main .right ul .item06 a:hover {
  background: var(--blue-color);
}

#service main .right ul .item06 a h3:before {
  background: var(--blue-color);
}

#service main .right ul .item07 a:hover {
  background: var(--lgreen-color);
}

#service main .right ul .item07 a h3:before {
  background: var(--lgreen-color);
}

#service main .right ul .item08 a:hover {
  background: var(--purple-color);
}

#service main .right ul .item08 a h3:before {
  background: var(--purple-color);
}

#service main .right ul .item09 a:hover {
  background: var(--gold-color);
}

#service main .right ul .item09 a h3:before {
  background: var(--gold-color);
}

#water .title-box .title-flex{
  background:#21859D;
}
#bridge .title-box .title-flex{
  background: #B981A3;
}
#road .title-box .title-flex{
  background: #746662;
}
#river .title-box .title-flex{
  background: #965A8B;
}
#agricultural .title-box .title-flex{
  background: #37967C;
}
#harbors .title-box .title-flex{
  background: #0C4EA7;
}
#construction .title-box .title-flex{
  background: #6FA836;
}
#surveying .title-box .title-flex{
  background: #4F4D96;
}
#railroad .title-box .title-flex{
  background: #8E8352;
}
.service_list .flex{
  justify-content: space-between;
}
.service_list .flex .left{
  width: 25%;
}
.service_list .flex .left .inner{ height: 100vh; position: sticky; top: 0; }
.service_list .flex .left .inner .side{ height: calc( 100vh - 192px); overflow-y: scroll; }
.service_list .flex .left .inner .side::-webkit-scrollbar { width: 5px; }
.service_list .flex .left .inner .side::-webkit-scrollbar-track { background-color: none; }
.service_list .flex .left .inner .side::-webkit-scrollbar-thumb { background-color: #C8C4C4; border-radius: 10px; }
.service_list{ padding: 0!important; }
.service_list .right{ padding-top: 100px; }
.service_list .left .inner{ padding-top: 100px; }
.service_list .flex .left .s-ttl{
  font-size: 31px;
  color: #21859d;
  font-weight: bold;
  padding-bottom: 18px;
  border-bottom: 3px solid #fff;
  margin-bottom: 40px;
  position: relative;
}
.service_list .flex .left .s-ttl::after{
  content: "";
    display: block;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 30px;
    border-bottom: 3px solid #21859D;
}
.service_list .flex .left .side{}
.service_list .flex .left .side li{
  margin-bottom: 15px;
  position: relative;
}
.service_list .flex .left .side li::after{
  content: "";
  display: block;
  position: absolute;
  top: 45%;
  right: 20px;
  transform: translateY(-45%) rotate(45deg);
  width: 5px;
  height: 5px;
  border-top: 2px solid #21859D;
  border-right: 2px solid #21859D;
}
.service_list .flex .left .side li a{
  display: flex;
  align-items: center;
}
.service_list .flex .left .side li a span{
  width:  54px;
  height: 54px;
  margin-right: 15px;
}
.service_list .flex .left .side li a h3{}
.service_list .flex .right{
  width: 70%;
  overflow-x: hidden;
}
.service_list .flex .right .main-ttl{
  color: #21859D;
  font-size: 68px;
  font-weight: bold;
  margin-bottom: 43px;
}
.service_list .flex .right .main-ttl span{
  font-size: 24px;
  font-weight: bold;
  color: #21859D;
  display: block;
  margin-top: 15px;
}
.service_list .flex .right .area{}
.service_list .flex .right .area .ttl{
  font-size: 28px;
  color: #21859D;
  border-left: 3px solid #21859D;
  padding: 10px 5px;
  padding-left: 20px;
  margin-bottom: 34px;
  font-weight: 700;
}
.service_list .flex .right .area .s_box:not(:last-child){
  margin-bottom: 100px;
}
.service_list .flex .right .area .s_box img{
  margin-bottom: 44px;
}
.service_list .flex .right .area .s_box .sub_ttl{
  font-size: 26px;
  color: #21859D;
  margin-bottom: 20px;
}
.service_list .flex .right .area .s_box p{
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 30px;
}
.service_list .flex .right .area .s_box .key{}
.service_list .flex .right .area .s_box .key .key_ttl{
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}
.service_list .flex .right .area .s_box .key ul{
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  align-items: center;
}
.service_list .flex .right .area .s_box .key ul li{
  min-width: 24.5%;
  margin-right: 0.5%;
  margin-bottom: 0.5%;
  text-align: center;
  padding: 16px 25px;
  background-color: #F7F7F7;
  border-radius: 6px;
  font-size:14px;
  word-break: keep-all;
}






.tab {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.tab li{
  width: 50%;
  position: relative;
}
.tab li a {
  display: block;
  text-align: center;
  background: #F8F8F8;
  margin: 0 2px;
  font-size: 18px;
  font-weight: bold;
  padding: 19px 20px;
}

.tabBox .tabArea .one_tab.select {
  background: #21859D;
  color: #fff;
}
.tabBox .tabArea .one_tab.select:before {
  content: "";
  position: absolute;
  top: calc( 100% - 1px );
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #21859D;
}

.bottom-tab li.active:before {
  content: "";
  position: absolute;
  top: auto;
  bottom: calc( 100% - 1px );
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #21859D;
   -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

/*.area {
  display: none;
  opacity: 0;
  background: #fff;
  padding: 50px 20px;
}*/

.area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
#service_list .contents{ overflow: hidden; }
.tabBox .tabArea { display: flex; flex-wrap: wrap; margin-bottom: 50px; }
.tabBox .tabArea.bottom{ margin: 70px 0 0; }
.tabBox .tabArea .one_tab{ width: 50%; position: relative; text-align: center; background: #F8F8F8; font-size: 18px; font-weight: bold; padding: 19px 20px;   cursor: pointer; }
.tabBox .tabArea .one_tab.select{ background: #21859D; }
.tabBox .tabArea .one_tab.select span{ color: #fff; }
.tabBox .tabArea .one_tab.select:before { content: ""; position: absolute; top: calc( 100% - 1px ); left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #21859D; }

.tabBox .tabArea.bottom .one_tab.select:before { top: auto; bottom: calc( 100% - 1px );  -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.contents .tab_main { display: none; transition-duration: 0.3s; }
.tab_main.is_show { display: block; }

#bridge .tabBox .tabArea .one_tab.select{background: #B981A3;}
#bridge  .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #B981A3;}
#bridge .slick-dots .slick-active button,#bridge #myservice .table th{background-color: #B981A3 !important;}
#bridge .slick-dots li button{border: 2px solid #B981A3 !important;}

#bridge .service_list .flex .left .s-ttl,#bridge #myservice .sub_ttl{color: #B981A3;}
#bridge .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #B981A3;}
#bridge .service_list .flex .left .side li::after{
  border-top: 2px solid #B981A3;
  border-right: 2px solid #B981A3;
}
#bridge .service_list .flex .right .main-ttl,#bridge .service_list .flex .right .main-ttl span{
  color: #B981A3;
}
#bridge .service_list .flex .right .area .ttl{color: #B981A3;border-left: 3px solid #B981A3;}
#bridge .service_list .flex .right .area .s_box .sub_ttl{color: #B981A3;}


#road .tabBox .tabArea .one_tab.select{background: #746662;}
#road .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #746662;}
#road .slick-dots .slick-active button,
#road #myservice .table th {
  background-color: #746662 !important;
}

#road .slick-dots li button {
  border: 2px solid #746662 !important;
}
#road #myservice .sub_ttl{color:#746662 !important}
#road .service_list .flex .left .s-ttl,#road .service_list .flex .right .main-ttl span{color: #746662;}
#road .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #746662;}
#road .service_list .flex .left .side li::after{
  border-top: 2px solid #746662;
  border-right: 2px solid #746662;
}
#road .service_list .flex .right .main-ttl,#road .service_list .flex .right .main-ttl span{
  color: #746662;
}
#road .service_list .flex .right .area .ttl{color: #746662;border-left: 3px solid #746662;}
#road .service_list .flex .right .area .s_box .sub_ttl{color: #746662;}

#river .tabBox .tabArea .one_tab.select{background: #965A8B;}
#river .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #965A8B;}
#river .slick-dots .slick-active button,
#river #myservice .table th {
  background-color: #965A8B !important;
}

#river .slick-dots li button {
  border: 2px solid #965A8B !important;
}

#river #myservice .sub_ttl {
  color: #965A8B !important
}
#river .service_list .flex .left .s-ttl{color: #965A8B;}
#river .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #965A8B;}
#river .service_list .flex .left .side li::after{
  border-top: 2px solid #965A8B;
  border-right: 2px solid #965A8B;
}
#river .service_list .flex .right .main-ttl,#river .service_list .flex .right .main-ttl span{
  color: #965A8B;
}
#river .service_list .flex .right .area .ttl{color: #965A8B;border-left: 3px solid #965A8B;}
#river .service_list .flex .right .area .s_box .sub_ttl{color: #965A8B;}

#agricultural .tabBox .tabArea .one_tab.select{background: #37967C;}
#agricultural .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #37967C;}
#agricultural .slick-dots .slick-active button,
#agricultural #myservice .table th {
  background-color: #37967C !important;
}

#agricultural .slick-dots li button {
  border: 2px solid #37967C !important;
}

#agricultural #myservice .sub_ttl {
  color: #37967C !important
}
#agricultural .service_list .flex .left .s-ttl{color: #37967C;}
#agricultural .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #37967C;}
#agricultural .service_list .flex .left .side li::after{
  border-top: 2px solid #37967C;
  border-right: 2px solid #37967C;
}
#agricultural .service_list .flex .right .main-ttl,#agricultural .service_list .flex .right .main-ttl span{
  color: #37967C;
}
#agricultural .service_list .flex .right .area .ttl{color: #37967C;border-left: 3px solid #37967C;}
#agricultural .service_list .flex .right .area .s_box .sub_ttl{color: #37967C;}

#harbors .tabBox .tabArea .one_tab.select{background: #0C4EA7;}
#harbors .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #0C4EA7;}
#harbors .slick-dots .slick-active button,
#harbors #myservice .table th {
  background-color: #0C4EA7 !important;
}

#harbors .slick-dots li button {
  border: 2px solid #0C4EA7 !important;
}

#harbors #myservice .sub_ttl {
  color: #0C4EA7 !important
}
#harbors .service_list .flex .left .s-ttl{color: #0C4EA7;}
#harbors .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #0C4EA7;}
#harbors .service_list .flex .left .side li::after{
  border-top: 2px solid #0C4EA7;
  border-right: 2px solid #0C4EA7;
}
#harbors .service_list .flex .right .main-ttl,#harbors .service_list .flex .right .main-ttl span{
  color: #0C4EA7;
}
#harbors .service_list .flex .right .area .ttl{color: #0C4EA7;border-left: 3px solid #0C4EA7;}
#harbors .service_list .flex .right .area .s_box .sub_ttl{color: #0C4EA7;}

#construction .tabBox .tabArea .one_tab.select{background: #6FA836;}
#construction .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #6FA836;}
#construction .slick-dots .slick-active button,
#construction #myservice .table th {
  background-color: #6FA836 !important;
}

#construction .slick-dots li button {
  border: 2px solid #6FA836 !important;
}

#construction #myservice .sub_ttl {
  color: #6FA836 !important
}
#construction .service_list .flex .left .s-ttl{color: #6FA836;}
#construction .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #6FA836;}
#construction .service_list .flex .left .side li::after{
  border-top: 2px solid #6FA836;
  border-right: 2px solid #6FA836;
}
#construction .service_list .flex .right .main-ttl,#construction .service_list .flex .right .main-ttl span{
  color: #6FA836;
}
#construction .service_list .flex .right .area .ttl{color: #6FA836;border-left: 3px solid #6FA836;}
#construction .service_list .flex .right .area .s_box .sub_ttl{color: #6FA836;}

#surveying .tabBox .tabArea .one_tab.select{background: #4F4D96;}
#surveying .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #4F4D96;}
#surveying .slick-dots .slick-active button,
#surveying #myservice .table th {
  background-color: #4F4D96 !important;
}

#surveying .slick-dots li button {
  border: 2px solid #4F4D96 !important;
}

#surveying #myservice .sub_ttl {
  color: #4F4D96 !important
}
#surveying .service_list .flex .left .s-ttl{color: #4F4D96;}
#surveying .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #4F4D96;}
#surveying .service_list .flex .left .side li::after{
  border-top: 2px solid #4F4D96;
  border-right: 2px solid #4F4D96;
}
#surveying .service_list .flex .right .main-ttl,#surveying .service_list .flex .right .main-ttl span{
  color: #4F4D96;
}
#surveying .service_list .flex .right .area .ttl{color: #4F4D96;border-left: 3px solid #4F4D96;}
#surveying .service_list .flex .right .area .s_box .sub_ttl{color: #4F4D96;}

#railroad .tabBox .tabArea .one_tab.select{background: #8E8352;}
#railroad .tabBox .tabArea .one_tab.select:before{border-top: 15px solid #8E8352;}
#railroad .slick-dots .slick-active button,
#railroad #myservice .table th {
  background-color: #8E8352 !important;
}

#railroad .slick-dots li button {
  border: 2px solid #8E8352 !important;
}

#railroad #myservice .sub_ttl {
  color: #8E8352 !important
}
#railroad .service_list .flex .left .s-ttl{color: #8E8352;}
#railroad .service_list .flex .left .s-ttl::after{border-bottom: 3px solid #8E8352;}
#railroad .service_list .flex .left .side li::after{
  border-top: 2px solid #8E8352;
  border-right: 2px solid #8E8352;
}
#railroad .service_list .flex .right .main-ttl,#railroad .service_list .flex .right .main-ttl span{
  color: #8E8352;
}
#railroad .service_list .flex .right .area .ttl{color: #8E8352;border-left: 3px solid #8E8352;}
#railroad .service_list .flex .right .area .s_box .sub_ttl{color: #8E8352;}





/* =================== news =================== */
#news #sec01 .container{
  max-width: 915px;
}

#news #sec01 .container ul li a{
  align-items: center;
}

#news #sec01 .container ul .item {
  position: relative;
  border-bottom: 1px solid #E5E5E5;
}

#news #sec01 .container ul .item:before {
  content: "";
  transition: all .3s;
  position: absolute;
  width: 118px;
  height: 1px;
  bottom: -1px;
  border-bottom: 1px solid #478D9C;
}

#news #sec01 .container ul .item:hover:before {
  width: 100%;
}

#news #sec01 .container ul .item a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  padding: 20px 15px;
}

#news #sec01 .container ul .item a:before {
  content: "";
  z-index: 0;
  transition: all 0.4s;
  position: absolute;
  background: url(../images/btn-arrow04.svg) no-repeat;
  background-size: contain;
  height: 20px;
  width: 20px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

#news #sec01 .container ul .item .date {
  height: 100%;
  position: relative;
  font-size: 1.3rem;
  font-weight: 700;
  width: 6em;
  line-height: 1.5em;
}

#news #sec01 .container ul .item .text {
  padding-right: 35px; }

#news #sec01 .container ul .item .text p {
  font-size: 1.5rem;
  line-height: 1.5em;
}

#news #sec01 .container ul .item .category {
  margin-right: 35px;
  margin-left: 35px;
}

#news #sec01 .container ul .item .category li {
  display: inline-block;
  width: 80px;
  /* background: #000; */
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
  padding: 10px 0;
}

.category li.other {
  background: #F0F0F0;
  color: #000!important;
}

.category li.news {
  background: #003888;
}

.category li.recruit {
  background: var(--main-color);
}


.news_single .container{
  max-width: 915px;
}
.news_single .container .flex{
  align-items: center;
  margin-bottom: 20px;
}
.news_single .container .flex .data{
  font-size: 15px;
  font-weight: bold;
  margin-right: 40px;
}
.news_single .container .flex .category li{
  display: inline-block;
    width: 80px;
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    text-align: center;
    padding: 10px 0;
}
.news_single .container .title{
  font-size: 23px;
  font-weight: bold;
  border-bottom: 1px solid #D8D8D8;
  padding-bottom: 27px;
  margin-bottom: 50px;
}
.news_single .container .contents{
  line-height: 1.8;
  margin-bottom: 90px;
}
.news_single .container .single-pagenation .prev,.news_single .container .single-pagenation .next{
  font-weight: bold;
}
.news_single .container .btn-box a{
  display: inline-block;
    width: 180px;
    background-color: #000;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 20px 40px;
}
.single-pagenation{
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.news_single .container .recruitbtn-box{ justify-content: center; margin-top: 80px; }
.news_single .container .recruitbtn-box a{ width: 50%; margin: 0; }
.news_single .container .recruitbtn-box a.form-btn{ border: 1px solid var(--main-color); background: var(--main-color); color: #fff; }
.news_single .container .recruitbtn-box a.pdf-btn{ background: #fff; border: 1px solid var(--main-color); color: var(--main-color); background: url(../images/pdf.svg) 95% center no-repeat; }

.news_single .contents p{
  margin-bottom: 3rem;
}
.news_single .contents h2{
  font-size: 1.8rem;
  font-weight: bold;
  background:var(--main-color);
  color: #fff;
  padding: 10px 20px;
  margin-top: 6rem;
  margin-bottom: 3rem;
}
.news_single .contents h2 b{
  color: #fff;
}
.news_single .contents h2 strong{
  color: #fff;
}
.news_single .contents h3{
  font-size: 1.8rem;
  font-weight: bold;
  border-bottom: solid 1px #D8D8D8;
  padding-bottom: 0.2rem;
  margin-bottom: 3rem;
  margin-top: 6rem;
}
.news_single .contents h4{
  font-weight: bold;
  margin-bottom: 3rem;
  margin-top: 6rem;
}
.news_single .contents ul{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.news_single .contents ul li{
  margin-bottom: 1rem;
  margin-left: 2rem;
  position: relative;
}
.news_single .contents ul li::before{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--main-color);
  border-radius: 50%;
  left: -2rem;
  top: 0;
  bottom: 0;
  margin: auto;
}
.news_single .contents span{
  margin-bottom: 3rem;
}
.news_single .contents b{
  font-weight: bold;
}
.news_single .contents strong{
  font-weight: bold;
}
.news_single .contents img{
  margin-bottom: 3rem;
}



/* =================== company =================== */
#about #sec01{background: var(--sub-color); padding-top: 0;}
#about .c_ttl{
  font-size: 6.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 40px;
}
#about.sub .page-nav{
  margin-top: 0;
  margin-bottom: 9rem;
}
#about.sub .page-nav ul{
  margin: 0 auto;
} 
#about .c_ttl span{
  font-size: 2.1rem;
  display: block;
  font-weight: bold;
  margin-top: 20px;
  color: #fff;
}
#about .c_ttl2{
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

#about #sec01 .flex{
  justify-content: space-between;
}
#about #sec01 .flex .left{
  width: 51%;
  padding-right: 100px;
}
#about .l_ttl{
  display: flex;
  align-items: center;
  font-size: 50px;
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 32px;
  font-weight: 500;
}
#about .l_ttl span{
  font-size: 16px;
  font-weight: bold;
  color: var(--main-color);
  margin-left: 32px;
  margin-top: 10px;
}
#about #sec01 .flex .left h4{
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 56px;
}
#about #sec01 .flex .left h4 span{
  font-size: 16px;
  font-weight: bold;
}
#about #sec01 .flex .left p{
  font-size: 16px;
  line-height: 1.8;
  text-indent: 1em;
}
#about #sec01 .flex .right{
  width: 49%;
}

#about #sec01 .btn2:before {
  display: none;
}

#about #sec01 .btn {
  background-color: #000;
  color: #fff;
  margin-top: 60px;
}

#about_box{
  padding: 77px 0;
}
#about_box .top{
  text-align: center;
  margin-bottom: 64px;
}
#about_box .top .c_ttl{
  color: #fff;
}
#about_box .top .c_ttl span{
  color: #fff;
}
#about_box .top p{
  color: #fff;
}
#about_box .link_box ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#about_box .link_box ul a {
  width: 23%;
  margin-bottom: 20px;
}

#about_box .link_box ul a li {
  background-color: #fff;
  position: relative;
  height: 100%;
  box-shadow: 0px 3px 56px #1B366921;
}

#about_box .link_box ul a li::after {
  content: "";
  z-index: 0;
  transition: all 0.4s;
  position: absolute;
  background: url(../images/btn-arrow04.svg) no-repeat;
  background-size: contain;
  background-position: right bottom;
  height: 18px;
  width: 25px;
  right: 20px;
  bottom: 20px;
  margin: auto;
}

#about_box .link_box ul a.brank li::after{
  background: url(../images/brank-icon.svg) no-repeat;
  background-size: contain;
  height: 11px;
  width: 11px;
}

#about_box .link_box ul a li h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 2rem 0;
  padding-left: 2rem;
}

#about_box .link_box ul a li h4 span {
  font-size: 17px;
  font-weight: bold;
  color: var(--main-color);
  display: block;
  margin-bottom: 12px;
}

#about_box .link_box ul a li p {
  font-size: 15px;
  line-height: 1.8;
}

#access{ padding-bottom: 0; margin-bottom: 12rem;}
#access .a_box{
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
}
#access .a_box .left{
  width: 52%;
  padding-right: 10px;
  line-height: 1.5;
}
#access .a_box .left .ttl{
  font-size: 22px;
  margin-bottom: 37px;
  color: var(--main-color);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#access .a_box .left .ttl span{
  font-size: 12px;
  font-weight: bold;
  border: 1px solid var(--main-color);
  padding: 8px 27px;
}
#access .a_box .left .ttl span a{
  color: var(--main-color);
}
#access .a_box .left p{ font-size:1.4rem; }
#access .a_box .left .tel{
  margin-top: 25px;
}
#access .a_box .left .tel li{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

#access .a_box .left .tel li .left{
  padding: 6px 30px;
  background-color: var(--main-color);
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-right: 21px;
}
#access .a_box .left .tel li:nth-child(2) .left{
  background-color: var(--sub-color);
}
#access .a_box .left .tel li .right{
  width: 100%;
  font-size: 2.4rem;
}
#access .a_box .right{
  width: 44%;
}
.base-map-btn{
  color: var(--main-color);
  font-size: 1.2rem;
  border: solid 1px;
  padding: 10px 15px;

}

#greeting #sec01{}
#greeting #sec01 .top{
  display: flex;
  justify-content: space-between;
  margin-bottom: 48px;
}
#greeting #sec01 .top .left{
  width: 49%;
}
#greeting #sec01 .top .l_ttl{
  display: flex;
    align-items: center;
    font-size: 50px;
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 32px;
}
#greeting #sec01 .top .l_ttl span{
  font-size: 16px;
    font-weight: bold;
    color: var(--main-color);
    margin-left: 32px;
}
#greeting #sec01 .top p{}
#greeting #sec01 .top .right{
  width: 49%;
}

#greeting #sec01 .bottom{
  display: flex;
  justify-content: space-between;
  margin-bottom: 69px;
}
#greeting #sec01 .bottom .left{
  width: 49%;
}
#greeting #sec01 .bottom .right{
  width: 49%;
}
#greeting #sec01 .btn2:before {
  display: none;
}

#greeting #sec01 .btn {
  background-color: #000;
  color: #fff;
}

#greeting #greeting_box{
  max-width: 100%;
  margin-left: calc((100vw - 1080px) / 2);
}

#greeting #sec02{
  padding-bottom: 0;
}
#greeting #sec02 .flex{
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin-left: calc((100vw - 1080px) / 2);
}
#greeting #sec02 .flex .left{
  width: 50%;
  padding-right: 100px;
}
#greeting #sec02 .flex .left .ttl{
  font-size: 27px;
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 27px;
}
#greeting #sec02 .flex .left p{}
#greeting #sec02 .flex .right{
  width: 50%;
}
#greeting #sec02 .flex:nth-child(2){
  margin-right: calc((100vw - 1080px) / 2);
  margin-left: 0;
  flex-direction: row-reverse;
  margin-bottom: 126px;
}
#greeting #sec02 .flex:nth-child(2) .left{
  padding-right: 0;
  padding-left: 100px;
}
#greeting #sec02 .flex:nth-child(2) .left ul li{
  margin-bottom: 20px;
  font-weight: bold;
}
#greeting #sec02 .container img{
  margin-bottom: 86px;
}
#greeting #sec02 .container{
  text-align: center;
}
#greeting #sec02 .container .btn2:before {
  display: none;
}

#greeting #sec02 .container .btn {
  background-color: #000;
  color: #fff;
}


#rec01{}
#rec01 #sec01{}
#rec01 #sec01 .title{ font-size:3rem; color:#003581; }
#rec01 #sec01 .recboxtitle{ background:#003581; color:#fff; font-size:2rem; font-weight: 700; padding:20px 30px; }
#rec01 #sec01 .recboxall{ padding-bottom:120px; }
#rec01 #sec01 .recboxall1{ padding-bottom:0; }
#rec01 #sec01 .recboxtitle{}
#rec01 #sec01 .recbox{ display:flex; line-height:1.5em; }
#rec01 #sec01 .recboxleft{ width:200px; padding: 30px; border-bottom:1px solid #003581; font-size:16px; color:#003581; font-weight:700; }
#rec01 #sec01 .recboxright{ width: calc( 100% - 200px ); padding:30px 20px 30px 30px; border-bottom:1px solid #B1B1B1; font-size:1.6rem; color:#000000; }
#rec01 #sec01 .mybox{ display:flex; }
#rec01 #sec01 .myboxleft{ width:40%; padding-right:30px; }
#rec01 #sec01 .myboxright{ width:65%; }
#rec01 #sec01 .sec-intitle h3{ margin-bottom:0; }

#newlist .page-nav ul{ display: inline-flex; background: #fff; box-shadow: 0 3px 44px rgb(0 0 0 / 6%); padding: 15px 10px; }
#newlist .tab li{ width:auto; }
#newlist .tab li a{ background:none; padding:0; padding-right:15px; }
#newlist .tabBox .tabArea .one_tab.select:before{ border:none; }
#newlist .page-nav ul li a:before{ content: ""; z-index: 0; position: absolute; background: url(../images/pagenav-arrow.svg) no-repeat; background-size: contain; height: 5px; width: 5px; right: 0; top: 0; bottom: 0; margin: auto; }
#nnews #sec01 .container{ max-width: 915px; }
#nnews section{ padding-top: 60px; }
#nnews #sec01 .container ul li a{ align-items: center; }
#nnews #sec01 .container ul .item { position: relative; border-bottom: 1px solid #E5E5E5; }
#nnews #sec01 .container ul .item:before { content: ""; transition: all .3s; position: absolute; width: 118px; height: 1px; bottom: -1px; border-bottom: 1px solid #478D9C; }
#nnews #sec01 .container ul .item:hover:before { width: 100%; }
#nnews #sec01 .container ul .item a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 20px 15px; }
#nnews #sec01 .container ul .item a:before { content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/btn-arrow04.svg) no-repeat; background-size: contain; height: 20px; width: 20px; right: 0; top: 0; bottom: 0; margin: auto; }
#nnews #sec01 .container ul .item .date { height: 100%; position: relative; font-size: 1.3rem; font-weight: 700; width: 8em; line-height: 1.5em; }
#nnews #sec01 .container ul .item .text { padding-right: 35px; }
#nnews #sec01 .container ul .item .text p { font-size: 1.5rem; line-height: 1.5em; }
#nnews #sec01 .container ul .item .category { margin-left: 35px; margin-right: 35px;}
#nnews #sec01 .container ul .item .category li { display: inline-block; width: 80px; color: #fff; font-weight: 700; font-size: 1.3rem; text-align: center; padding: 10px 0;  background: #F0F0F0; color: #000;}
#nnews #sec01 .container ul .item .category li.other{ background: #F0F0F0; color: #000; }
#nnews #sec01 .container ul .item .category li.news{ background: #003888;  color: #fff;}
#nnews #sec01 .container ul .item .category li.recruit{ background: var(--main-color);  color: #fff;}

.smalloffice{ padding: 0 30px!important; }


/* =================== privact policy =================== */

#privacy{}
#privacy #sec01{ font-size:1.6rem; }
#privacy #sec01 .container{ max-width: 915px; }
#privacy #sec01  .sec-intitle{}
#privacy #sec01 h3{ margin-bottom:40px; }
#privacy #sec01  .box:not(:last-child){ padding-bottom:80px; }
#privacy #sec01  .box50{ padding-bottom:50px; }
#privacy #sec01 p{ font-size:1.6rem; }
#privacy #sec01 ul{  }
#privacy #sec01  .listnumber{}
#privacy #sec01 li{ padding-bottom:15px; }
#privacy #sec01  .listtile{ padding-bottom:15px; font-size:1.8rem; line-height:1.5em; font-weight:900; }
#privacy #sec01  .text{ padding-bottom:30px; }
#privacy #sec01  .box-intitle{}
#privacy #sec01 h4{}
#privacy #sec01  .numberbox{ display:flex; align-items:center; padding-bottom:30px; font-size:1.8rem; line-height:1.5rem; font-weight:700; }
#privacy #sec01  .number{ background:#003888; width:25px; height:25px; margin-right:15px;  line-height:25px; font-size:1.8rem; color:#fff; font-weight:700; padding:0px 5px; text-align:center; display:inline-block; }
#privacy #sec01 .tetx1{ font-size:1.7rem; font-weight:700; padding-bottom:30px; }

#privacy #sec01 .tablebox{ line-height:1.5em; }
#privacy #sec01 .table-responsive{}
#privacy #sec01 .table { width: 100%; border-collapse: collapse; }
#privacy #sec01 .table th{  padding: 13px 20px 13px 20px;  border: 1px solid #F3F3F3; text-align: left; color: #000;  font-size:1.4rem; }
#privacy #sec01 .table td{  padding: 10px 20px 10px 20px;  border: 1px solid #F3F3F3; text-align: left; color: #000;  font-size:1.4rem; vertical-align: middle; }
#privacy #sec01 .table th{ background:#4A70A7; color:#fff; font-size:1.5rem; color:#fff; font-weight:600; text-align:center; vertical-align: middle; }
#privacy #sec01 .table .hleft{ background: rgb(0, 53, 129, 0.04);  color: #000;  font-size:1.4rem; text-align: left; vertical-align: middle; font-weight:700;border: 1px solid #fff; }


/* =================== profile =================== */

#profile{}
#profile #sec01{ padding-bottom: 0; }
#profile #sec01 #list1 .area{ display:block; }
#profile section h2{ padding-bottom:30px; font-size:2.6rem; color:#003888; font-weight:900; }
#profile section .recboxall{}
#profile section .recbox{ display:flex; }
#profile section .recboxleft{ width:170px; padding:24px 5px; line-height:1.5em; text-align:center; border-bottom:1px solid var(--main-color); color:var(--main-color); font-size:1.6rem; font-weight:900; }
#profile section .recboxleft small{ font-size: 1.4rem; color: var(--main-color); }
#profile section .recboxright{ width: calc( 100% - 160px ); padding:24px 30px 24px 50px; font-size:1.6rem; line-height:1.8em; border-bottom:1px solid #EFEFEF; }
#profile section .map{ float:right; }
#profile section .map a{ text-decoration:underline; }
#profile section .mybox{ display:flex; }
#profile section .myboxleft{ width:50%; padding-right:30px; }
#profile section .myboxright{ width:50%; padding-right:30px; }
#profile section .myboxright p{ margin-top: 20px; text-align: right; }

#profile section .textbtn{ padding-top:100px; font-size:2.4rem; font-weight:900; text-align:center; }
#profile section .pdfgroupbutton{ padding-top:33px; display:flex; justify-content: space-between; }
#profile section .pdfbutton{ width:49%; }
#profile section .pdfbtn{ position: relative; background: url(../images/pdf.svg) 97% center no-repeat; background-size:15px; font-weight:900; padding:25px 10px; display:block; text-align:center; border:1px solid #003581; font-size:1.8rem; color:#003581; }
#profile section #accordion_btn{ cursor: pointer; position: relative; }
#profile section #accordion_btn:before{ content: ""; transition: 0.3s; position: absolute; background: url(../images/arrow03.svg) no-repeat; background-size: contain; height: 10px; width: 6px; right: 20px; top: 0; bottom: 0; margin: auto; z-index: 2; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
#profile section #accordion_btn.active:before{ -webkit-transform: rotate(270deg); transform: rotate(270deg); }
#profile section .brank2:before{ content: ""; z-index: 2; position: absolute; background: url(../images/brank02.svg) no-repeat; background-size: contain; height: 11px; width: 11px; right: 15px; top: 0; bottom: 0; margin: auto; }

#profile section .timelineallbox{}
.timelinebox{ display:flex;  }
.timelineboxleft{ width:110px; font-size:2.8rem; font-weight:700; color:var(--main-color); display: flex; align-items: center;}
.timelineboxleft-jp { display: block; font-size:1.5rem; padding-top: 10px; }
.timelineboxright{ width: calc( 100% - 110px ); padding:30px 0px 10px; border-left:1px solid var(--main-color); }
.tlbox{ background: url(../images/profile_icn_dot.svg) left 30% no-repeat; background-size:8px; margin-right:5px; padding-left:50px; padding-bottom:20px; display:flex; position:relative; left:-4.5px; align-items: center;}
.tlboxleft{ width:100px; font-size: 2.5rem;
  font-weight: 700;
  color: var(--main-color); 
  margin-right: 3rem;}
.tlboxright{ width: calc( 100% - 100px ); font-size:1.6rem; line-height:1.8em; }


#profile #list4{ background:#F7F9FA; padding:50px 0px; margin: 120px 0 0; }
#profile #list4 h2{ text-align:center; color:#000; }
#profile #list4 .pdfgroupbutton{}
#profile #list4 .btn{ background: #fff; color:#21859D; border: 1px solid #21859D; font-weight:900; padding:26px 10px; display:block; text-align:center; font-size:1.8rem; }
#profile #list4 .recinall{ border-radius: 10px; display: none; margin:50px 0px; background:#fff; padding:30px 55px 60px;}
#profile #list4 .text2{ padding-bottom:45px; font-size:22px; color:#21859D; font-weight:900; }
#profile #list4 .text2p{ padding-top:110px; padding-bottom:45px; }

#profile #list4 .recboxleft{ color: #21859D; border-bottom:1px solid #21859D; }
#profile #list4 .timelineboxleft{ color: #21859D; }
#profile #list4 .recboxleft small{ color: #21859D; }
#profile #list4 .timelineboxright{ border-left:1px solid #21859D; }
#profile #list4 .tlbox{ background: url(../images/profile_icn_dot1.svg) left 8px no-repeat; background-size:10px; left:-6px; }


#profile #sec01 #list1,
#profile #sec01 #list2{ padding-bottom: 120px; }
#profile #sec01 #list1 .area{  }

#profile #list4 #btn-sec { margin-top: 60px; }
#profile #list4 #btn-sec .button{ text-align:center; }
#profile #list4 #btn-sec .btn{ border: none; background-color: #000; color: #fff; font-weight: 700; position: relative; transition: all .5s; white-space: nowrap; padding: 18px 70px; text-align: center; font-size: 1.5rem; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }


/* =================== office =================== */

#office{}
#office section{ padding:30px 0px 0; }
#office #sec01{}
#office #sec01 .container{ max-width: 915px; }

#newlist .pdfbutton1{ padding-top:70px; text-align:center;  padding-bottom:0px; }
#newlist .pdfbtn1{ max-width:400px; width:48%; background: url(../images/pdf.svg) 97% center no-repeat; background-size:15px; font-weight:900; padding:26px 10px; display:inline-block; text-align:center; border:1px solid #003581; font-size:1.8rem; color:#003581; }
#office #sec01 h2{  padding-top:100px; padding-bottom:50px; font-size:2.6rem; color:#003888; font-weight:900; }
#office #sec01 #list1 .area{ display:block; }

#office #sec01 .box{ display:flex; }
#office #sec01 .box:not(:last-child){ padding-bottom:10px; }
#office #sec01 .flex{}
#office #sec01 .left{ width:140px; padding:35px 0px 25px; font-size:1.5rem; font-weight:900; color:#003888; text-align:center; border-bottom:1px solid #003888; }
#office #sec01 .right{ width: calc( 100% - 140px ); padding:30px 20px 20px 30px; position:relative; display:flex; justify-content:space-between; border-bottom:1px solid #EFEFEF; }
#office #sec01 .right1{ display:block; }
#office #sec01 .text{ font-size:1.5rem; line-height:1.8em; padding-bottom:15px; }
#office #sec01 .map{ font-size:1.5rem;  }
#office #sec01 .map1{ float:right; font-size:1.5rem; margin-top:-35px; }
#office #sec01 .map a, #office #sec01 .map1 a{ text-decoration:underline; }
#office #sec01 ul{ display:flex; flex-wrap:wrap; padding-top:10px; }
#office #sec01 .list{}
#office #sec01 li{ width:48%; margin-right:2%; }
#office #sec01 .textbox{ background:#003580; padding:6px 15px; display:inline-block; color:#fff; font-size:1.4rem; font-weight:700; margin-bottom:10px; }
#office #sec01 p{font-size:1.5rem; line-height:1.8em; padding-bottom:15px; }

#office #sec01 .button{ text-align:center;  padding-top:50px; }
#office #sec01 .btn{ background: #000000; font-weight:900; padding:18px 70px; display:inline-block; transition: all .5s; text-align:center; font-size:1.5rem; color:#fff; }

#office .br-sp { display: none; }




/* =================== site-policy =================== */

#site-policy .box:not(:last-child){ margin-bottom: 70px; }
#site-policy section{ padding-bottom: 0; }
/* =================== not-found =================== */

#not-found section p{ margin-bottom: 30px; }


.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 76.25%;
  position: relative;
}

.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.banner-slider{ max-height:400px; display:flex; }
.banner-slider img{ margin-bottom:0!important; }

.banner-slider .slider.slider-for { width: 70%; padding-right: 10px;}
.banner-slider .slider.slider-nav { width: 30%; padding-top:0; height: 300px; overflow: hidden; padding: 20px 0 0;  }
.banner-slider .slider.slider-for .slick-slide p{ position: absolute; margin-top: 10px; font-size: 1.5rem; }
.banner-slider .slider.slider-nav {padding-top:0; height: 360px; overflow: hidden; }
.slider-nav .slick-slide.thumbnail-image .thumbImg{ max-width: 360px; height: 160px; margin: 0 auto; border: 1px solid #EBEBEB; }
.slider-banner-image img, .slider-nav .slick-slide.thumbnail-image .thumbImg img { height: 100%; width:100%; object-fit: cover; border: 1px solid #EBEBEB; }

.slick-next{ right:5px!important; }
.slick-prev{ left:0px!important; }
.slick-prev:before,.slick-next:before{ content:''!important; }
.slick-prev.slick-arrow, .slick-next.slick-arrow { width:30px; height:30px; z-index:9; }
.slick-prev.slick-arrow{ background:url(../images/prev.svg) no-repeat; background-size:cover; }
.slick-next.slick-arrow{ background:url(../images/next.svg) no-repeat; background-size:cover; }

.slick-prev:hover, .slick-prev:focus{ background:url(../images/prev.svg) no-repeat!important; background-size:cover; opacity:.8; }
.slick-next:hover, .slick-next:focus{ background:url(../images/next.svg) no-repeat!important; background-size:cover; opacity:.8; }
.slick-dots{ bottom:25px!important; }
.slick-dots li{ width:10px!important;}
.slick-dots li button{ background-color:#fff!important; width:5px!important; height:5px!important; border:2px solid #21859D!important; }
.slick-dots .slick-active button{ background-color:#21859D!important; border:2px solid #fff!important; }
.slick-slide img{ object-fit: contain; }
/* =================== Service =================== */

#railroad #myservice{ padding-top: 0; }
#myservice{ padding-top:100px; }
#myservice .sub_ttl{ font-size: 27px; color: #21859D; margin-bottom: 20px; }
#myservice .tablebox{ line-height:1.5em; overflow-x: auto; }
#myservice .table-responsive{}
#myservice .table { width: 100%; border-collapse: collapse; }
#myservice .table th{ word-break: keep-all; padding: 13px 10px 13px 10px;  border: 1px solid #F3F3F3; text-align: left; color: #000;  font-size:1.3rem; }
#myservice .table td{  padding: 10px 10px 10px 10px;  border: 1px solid #F3F3F3; text-align: left; color: #000;  font-size:1.3rem; }
#myservice .table td:nth-child(1),
#myservice .table td:nth-child(2),
#myservice .table td:nth-child(4){ word-break: keep-all; }
#myservice .table th{ background:#21859D; color:#fff; font-size:1.5rem; color:#fff; font-weight:600; text-align:left; }
#myservice .table .hleft{ background: #F4F4F4;  color: #000;  font-size:1.3rem; text-align:left; font-weight:700;border: 1px solid #fff; }


#listservice{}
#listservice h2{ font-size: 30px; color: var(--main-color); margin-bottom: 40px; font-weight: bold; text-align:center; }
#listservice h4{ margin-bottom: 55px; font-size: 20px; font-weight: bold; line-height: 1.5; text-align:center; }
#listservice ul{ flex-wrap:wrap; }
#listservice li{}
#listservice ul .item a{ height: 100%; position: relative; display: block; transition: all .3s; text-align: center; background: #F5F5F5; padding: 35px 30px 45px; }
#listservice .item{ width: 33%; margin-right:0.33%; }
#listservice .item:nth-child(-n+6){ margin-bottom:6px; }
#listservice .item:nth-child(3n){ margin-right:0; }
#listservice ul .item a:before{ content: ""; z-index: 0; transition: all 0.4s; position: absolute; background: url(../images/list-arrow.svg) no-repeat; background-size: contain; height: 8px; width: 15px; right: 0; left: 0; bottom: 20px; margin: auto; }
#listservice h3{ transition: all .3s; position: relative; font-size: 1.8rem; color: #000; padding-bottom: 15px; margin-bottom: 15px; font-weight: 700; }
#listservice p{ transition: all .3s; color: #959595; font-size: 1.3rem; font-weight: 700; }
#listservice ul .item a:hover h3,
#listservice ul .item a:hover p { color: #fff; }
#listservice ul .item a:hover h3:before { background: #fff !important; }
#listservice ul .item a h3 { transition: all .3s; position: relative; font-size: 1.8rem; color: #000; padding-bottom: 15px; margin-bottom: 15px; font-weight: 700; }
#listservice ul .item a h3:before{ content: ""; left: 0; right: 0; margin: auto; width: 17px; height: 2px; background: #000; position: absolute; bottom: 0; }
#listservice ul .item01 a:hover { background: var(--sub-color); }
#listservice ul .item01 a h3:before { background: var(--sub-color); }
#listservice ul .item02 a:hover { background: var(--pink-color); }
#listservice ul .item02 a h3:before { background: var(--pink-color); }
#listservice ul .item03 a:hover { background: var(--brown-color); }
#listservice ul .item03 a h3:before { background: var(--brown-color); }
#listservice ul .item04 a:hover { background: var(--lpurple-color); }
#listservice ul .item04 a h3:before { background: var(--lpurple-color); }
#listservice ul .item05 a:hover { background: var(--green-color); }
#listservice ul .item05 a h3:before { background: var(--green-color); }
#listservice ul .item06 a:hover { background: var(--blue-color); }
#service .right ul .item06 a h3:before { background: var(--blue-color); }
#listservice ul .item07 a:hover { background: var(--lgreen-color); }
#listservice ul .item07 a h3:before { background: var(--lgreen-color); }
#listservice ul .item08 a:hover { background: var(--purple-color); }
#listservice ul .item08 a h3:before { background: var(--purple-color); }
#listservice ul .item09 a:hover { background: var(--gold-color); }
#listservice ul .item09 a h3:before { background: var(--gold-color); }
#service #sec01{ padding-bottom: 0; }


#award{}
#award #sec01{ padding-bottom:0; }
#award section .container{ max-width: 915px; }
#award #sec01 h3{}
#award #sec01 .title{ font-size: 3rem; color: var(--main-color); margin-bottom: 40px; font-weight: bold; }
#award #sec01 .tablebox{ line-height:1.5em; }
#award #sec01 .table-responsive{}
#award #sec01 .table { width: 100%; border-collapse: collapse; }
#award #sec01 .table th{ vertical-align: middle; padding: 13px 20px 13px 20px;  border: 1px solid #F3F3F3; text-align: left; color: #000;  font-size:1.4rem; }
#award #sec01 .table td{ vertical-align: middle; padding: 10px 20px 10px 20px;  border: 1px solid #F3F3F3; text-align: left; color: #000;  font-size:1.4rem; }
#award #sec01 .table td:nth-child(3){ border-right: none; text-align: left; }
#award #sec01 .table td:nth-child(4){ border-right: none; text-align: center; }
#award #sec01 .table th{ background:var(--main-color); color:#fff; font-size:1.5rem; color:#fff; font-weight:600; text-align:center; }
#award #sec01 .table .hleft{ word-break: keep-all; background: rgb(0, 53, 129, 0.04); color: var(--main-color); font-size:1.4rem; text-align:left; font-weight:700;border: 1px solid #fff; }

#award #sec02{ padding-bottom: 0; }
#award #sec02 .title{ font-size: 3rem; color: var(--main-color); margin-bottom: 40px; font-weight: bold; }
#award #sec02 h3{}
#award #sec02 ul{ flex-wrap:wrap; ;}
#award #sec02 .list{}
#award #sec02 li{ width:31%; margin-right:3.5%; }
#award #sec02 li:nth-child(3n){ margin-right:0; }
#award #sec02 li:nth-child(-n+12){ margin-bottom:30px; }
#award #sec02 li .block a{ display: block; border: 1px solid #eaeaea; position: relative; width: 100%; padding-top: 75%; }
#award #sec02 li .block img{ object-fit: contain; position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }
#award #sec02 h4{ margin-bottom: 10px; margin-top: 10px; font-size: 1.7rem; font-weight: bold; line-height: 1.3; }
#award #sec02 p{ font-size: 1.4rem; line-height: 1.5em; }
#award #sec02 .click-text{ margin-bottom: 20px; }
.modaal-gallery-control:after, .modaal-gallery-control:before{ border-radius: 0!important; top: 18px!important; width: 1.5px!important; height: 13px!important; }
.modaal-gallery-prev:before,
.modaal-gallery-next:after{ margin: 3px 0 0!Important; }
.modaal-close:after, .modaal-close:before{ border-radius: 0!important; width: 1.5px!important; }
.modaal-gallery-control:focus:after, .modaal-gallery-control:focus:before, .modaal-gallery-control:hover:after, .modaal-gallery-control:hover:before,
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before{ background: var(--main-color)!Important; }
.modaal-close:after, .modaal-close:before{ top: 0!important; left: 0!important; right: 0!important; bottom: 0!important; margin: auto!important; }
.modaal-gallery-control,
.modaal-close{ border: 1px solid #fff!important; }
.modaal-gallery-item img{ max-height: 80vh!important; object-fit: contain!important; }
.modaal-container{ background: none; }
.service_list .lservice{ margin-top:-50px; line-height:2em;  }
.service_list .lnumber{ background: #746662; width:20px; height:20px; margin-right:8px; font-size:12px; line-height:20px; border-radius:10px; color:#fff; text-align:center; display:inline-block; }

#ctalk{}
#ctalk #sec01{}
#ctalk #sec01 .area1:not(:last-child){ padding-bottom:50px; }
#ctalk #sec01 h3{ font-size:24px; color:#000; font-weight:700; text-align:center; }
#ctalk #sec01 p{ padding-top:35px; font-size:16px; color:#000; text-align:center; }
#ctalk #sec01 img{  }
#ctalk #sec01 .sub{}
#ctalk #sec01 .titlebox{ position: relative; background: url(../images/cp-titlebg.png) top center no-repeat; background-size: auto 100% ; margin:70px 25px 40px; padding:20px 0 20px; line-height:1em; color:#003581; font-size:2.3rem; font-weight:700; text-align:center; }
#ctalk #sec01 .imagebox{ padding-bottom:70px; text-align:center; }
#ctalk #sec01 .box:not(:last-child){ margin-bottom:100px; }
#ctalk #sec01 .box .left{ position: relative; overflow: hidden; width:48%; margin-right:2%; }
#ctalk #sec01 .box .right{ position: relative; overflow: hidden; width:48%; margin-left:2%; }
#ctalk #sec01 .box .inleft{ max-width:1000px; float:right; }
#ctalk #sec01 .box .inright{ padding-left: 25px; max-width:600px; }
#ctalk #sec01 .box2 .inright{ padding-left: 0; padding-right: 25px; }
#ctalk #sec01 .box .inleft img{ right: 0; height: 100%; max-width: 700px; width: 100%; object-fit: cover; object-position: center; position: absolute; }

#ctalk #sec01 .box1{ margin-bottom:100px; line-height:1.8em; }
#ctalk #sec01 .box1 .left{ width:48%; margin-right:3%; }
#ctalk #sec01 .box1 .right{ width:48%; margin-left:3%; }
#ctalk #sec01 .box1 .inleft{ padding-left: 25px; max-width:600px; float:right; }
#ctalk #sec01 .box1 .inright{ max-width:1000px; }
#ctalk #sec01 .box1 .inright img{ left: 0; height: 100%; max-width: 700px; width: 100%; object-fit: cover; object-position: center; position: absolute; }

#ctalk #sec01 .question{ line-height: 1em; padding-bottom:10px; font-size:14px; color:#003581; font-weight:700; }
#ctalk #sec01 h4{ line-height: 1.2em; font-size:2.1rem; color:#003581; font-weight:700; }
#ctalk #sec01 .alllistbox{ padding-top:40px;  line-height:1.5em; }
#ctalk #sec01 .boxlist:not(:last-child){ padding-bottom:30px; }
#ctalk #sec01 .boxlist .left1{ width:120px; background: url(../images/threedots.svg) 75% 10px  no-repeat; font-size:14px; color:#003581; font-weight:700; }
#ctalk #sec01 .boxlist .right1{ width: calc( 100% - 120px ); font-size:14px; color:#000; }

#contactus{ margin-bottom: 120px; }
#contactus #sec01{}
#contactus #sec01 .container{ max-width:700px; }
#contactus #sec01 h3{ line-height: 1.5em; padding-bottom:50px; font-size:3rem; color:var(--main-color); font-weight:bold; text-align:center; }
#contactus #sec01 .chbox{ padding:15px 0px; }
#contactus #sec01 .chboxleft{ width:280px; padding-top:15px; padding-right: 15px; font-size:1.7rem; font-weight:bold; }
#contactus #sec01 .chboxleft span{ margin-left: 5px; background:var(--main-color); padding: 4px 10px; font-size:10px; color:#fff; display:inline-block; }
#contactus #sec01 .chboxleft small{ font-size: 1.4rem; }
#contactus #sec01 .chboxright{}
#contactus #sec01 .chboxright span{ font-size: 1.5rem; }
#contactus #sec01 .chboxright .select-box select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#contactus #sec01 .chboxright .select-box{ position: relative; display: inline-block; }
#contactus #sec01 .chboxright .select-box:after { content: ""; position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; width: 7px; height: 7px; border-top: 1px solid #003888; border-left: 1px solid #003888; transform: translateY(-50%) rotate(-135deg); }
#contactus #sec01 .chboxright{ width: calc( 100% - 280px ); font-size:17px; color:#000; font-weight:700; }
#contactus #sec01 .mcontect{ font-size:1.5rem; padding:10px; width:100%; border:1px solid var(--main-color);  }
#contactus #sec01 .mselectcontect{ font-size:1.5rem; padding:13px 10px; width:250px; border:1px solid var(--main-color); }
#contactus #sec01 .mcheckcontect{ font-size:1.5rem; padding: 0; }
#contactus #sec01 .name-box{ width: calc( 100% / 2 - (10px)); }
#contactus #sec01 .name-box:nth-child(1){ margin-right:20px; }
#contactus #sec01 .mcontect1{ font-size:1.5rem; padding:13px 10px; width: 100%; border:1px solid var(--main-color) ; }
#contactus #sec01 .mcontect2{ font-size:1.5rem; padding:13px 10px; width:80px; margin-right:12px; border:1px solid var(--main-color); }
#contactus #sec01 .mcontectarea{ resize: vertical; font-size:1.5rem; padding:13px 10px; width:100%; border:1px solid var(--main-color); }
#contactus #sec01 .mlinecontect{ margin-top: 23px; width: 15px; height: 1px; background: #000; margin-right:12px; }
#contactus #sec01 .chtextbox{ width:100%; margin-top:40px; height:190px; overflow-y:scroll;  }
#contactus #sec01 .chtextbox::-webkit-scrollbar { width: 4px; }
#contactus #sec01 .chtextbox::-webkit-scrollbar-track { background: #BABABA; }
#contactus #sec01 .chtextbox::-webkit-scrollbar-thumb { background: #000; }
#contactus #sec01 .chintext{ background: rgba( 245, 245, 245, 0.3 ); padding:30px; font-size:14px; line-height:1.6em; }
#contactus #sec01 h4{ padding-bottom:25px; font-size:21px; text-align:center; font-weight:700; }
#contactus #sec01 .wpcf7-list-item{ display:block; }
#contactus #sec01 .wpcf7-list-item:not(:last-child){ padding-bottom:15px; }
#contactus #sec01 .submit-box{ margin:80px auto 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#contactus #sec01 .msubmitcontect{ cursor: pointer; width: 100%; max-width:250px; background:var(--main-color); border: none; margin: 0 7.5px; padding:15px; display:block; font-size:1.5rem; font-weight: 700; color:#fff; }
#contactus #sec01 .back{ cursor: pointer; width: 100%; max-width:250px; background:#E5E5E5; border: none; margin: 0 7.5px; padding:15px; display:block; font-size:1.5rem; font-weight: 700; }
#contactus #sec01 .flex-chbox{ display: -webkit-box; display: -ms-flexbox; display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; }
#contactus #sec01 .flex-chbox span{ width: 50%; }
#contactus #sec01 .chboxleft p{ font-weight: 400; font-size: 1.4rem; margin-top: 15px; }

#contactus #sec01 input,
#contactus #sec01 textarea,
#contactus #sec01 select{ font-size: 1.6rem; }

#confirm #contactus #sec01 .name-box,
#mid-career-form_confirm #contactus #sec01 .name-box,
#new-graduate-form_confirm #contactus #sec01 .name-box{ width: auto; }
#confirm #contactus #sec01 .chboxright,
#mid-career-form_confirm #contactus #sec01 .chboxright,
#new-graduate-form_confirm #contactus #sec01 .chboxright{ font-weight: 400; font-size: 1.4rem; }
#confirm #contactus #sec01 .chboxleft,
#mid-career-form_confirm #contactus #sec01 .chboxleft,
#new-graduate-form_confirm #contactus #sec01 .chboxleft{ padding-top: 0; }
#confirm #contactus #sec01 .chbox,
#mid-career-form_confirm #contactus #sec01 .chbox,
#new-graduate-form_confirm #contactus #sec01 .chbox{ padding: 20px 0px; }
#confirm #contactus #sec01 .chboxright .select-box:after,
#mid-career-form_confirm #contactus #sec01 .chboxright .select-box:after,
#new-graduate-form_confirm #contactus #sec01 .chboxright .select-box:after{ content: none; }
#confirm #contactus #sec01 .mlinecontect,
#mid-career-form_confirm #contactus #sec01 .mlinecontect,
#new-graduate-form_confirm #contactus #sec01 .mlinecontect{ margin: 0 10px; }
#confirm #contactus #sec01 .chboxleft span,
#confirm #contactus #sec01 .chboxleft small,
#confirm #contactus #sec01 .chtextbox,
#mid-career-form_confirm #contactus #sec01 .chboxleft p,
#mid-career-form_confirm #contactus #sec01 .chboxleft span,
#mid-career-form_confirm #contactus #sec01 .chboxleft small,
#mid-career-form_confirm #contactus #sec01 .chtextbox,
#new-graduate-form_confirm #contactus #sec01 .chboxleft p,
#new-graduate-form_confirm #contactus #sec01 .chboxleft span,
#new-graduate-form_confirm #contactus #sec01 .chboxleft small,
#new-graduate-form_confirm #contactus #sec01 .chtextbox{ display: none; }
#mid-career-form_confirm #contactus #sec01 .chboxleft small.other,
#new-graduate-form_confirm #contactus #sec01 .chboxleft small.other{ display: inline-block; }

#thanks #contactus #sec01 p,
#mid-career-form_thanks #contactus #sec01 p,
#new-graduate-form_thanks #contactus #sec01 p{ margin-bottom: 70px; text-align: center; }
#thanks #contactus #sec01 .btn-box,
#mid-career-form_thanks #contactus #sec01 .btn-box,
#new-graduate-form_thanks #contactus #sec01 .btn-box{ text-align: center; }
#thanks #contactus #sec01 .btn-box .btn,
#mid-career-form_thanks #contactus #sec01 .btn-box .btn,
#new-graduate-form_thanks #contactus #sec01 .btn-box .btn{ color: #fff; background: #000; max-width: 250px; }

#error #sec01{ padding-bottom: 0; }
#error #sec01 h3{ padding-bottom:50px; font-size:3rem; color:#003888; font-weight:bold; text-align:center; }
#error #sec01 p{ margin-bottom: 70px; text-align: center; }
#error #sec01 .btn-box{ text-align: center; }
#error #sec01 .btn-box .btn{ color: #fff; background: #000; }

.mw_wp_form .error{ font-size: 1.2rem!important; margin-top: 5px; }

#mygreeting{}
#mygreeting #sec01{}
#mygreeting #sec01 .flex{ align-items: center;}
#mygreeting #sec01 .left{ width: 49%; padding-right:50px; }
#mygreeting #sec01 h2{ display: flex; align-items: center; font-size: 45px; font-weight: bold; color: var(--main-color); margin-bottom: 20px; }
#mygreeting #sec01 span{display: inline-block; font-size: 1.6rem; font-weight: bold; color: var(--main-color); margin-bottom: 32px; }
#mygreeting #sec01 p{ font-size:1.5rem; text-indent: 1em; }
#mygreeting #sec01 .right{ width: 51%; }
#mygreeting #sec01 .text1{ padding-top:30px; }
#mygreeting #sec01 .text2,
#mygreeting #sec01 .text3{ padding-top: 1.5em; }
#mygreeting #sec01 .text-4{
  font-size: 2.1rem;
    font-weight: 600;
    margin-top: 3rem;
}


#mygreeting #sec02{}
#mygreeting #sec02 .box{}
#mygreeting #sec02 .left{ width:60%; }
#mygreeting #sec02 .round{}
#mygreeting #sec02 .right{ width:40%; }
#mygreeting #sec02 .subtitle{}
#mygreeting #sec02 h2{}

#mygreeting #greeting_box{ max-width: 100%; margin-left: calc((100vw - 1080px) / 2); padding-top:25px; }

#mygreeting #sec03{}
#mygreeting #sec03 .box{ max-width: 680px; margin: auto; align-items:center; }
#mygreeting #sec03 .left{ width:50%; margin-right:10%; }
#mygreeting #sec03 h4{ font-size:27px; font-weight:bold; color:#003581; padding-bottom:20px; }
#mygreeting #sec03 p{ font-size:16px; }
#mygreeting #sec03 .right{ width:40%; }

#mygreeting #sec04{ position: relative; background: var(--sub-color); padding:70px 0px; }
#mygreeting #sec04 .inbox{  }
#mygreeting #sec04 .inbox .box{display: flex; flex-direction: column; align-items: center;}

#mygreeting #sec04 h4{ padding-bottom:30px; font-size:5rem; color:#fff; font-weight:700; text-align:center; }
#mygreeting #sec04 p{color: #fff;
  margin-top: 5rem;
  margin-bottom: 5rem;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;}
#mygreeting #sec04 span{color: #fff; margin-bottom: 9rem; text-align: center;}
#mygreeting #sec04 ul{ max-width:400px; display:block; margin: 0 auto;}
#mygreeting #sec04 .list{}
#mygreeting #sec04 li{ padding:15px 0px 25px; font-size:2.2rem; color:#003581; font-weight:700; }

#btn-sec .button{ text-align:center; }
#btn-sec .btn{ background-color: #000; color: #fff; font-weight: 700; position: relative; transition: all .5s; white-space: nowrap; padding: 18px 70px; text-align: center; font-size: 1.5rem; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.w-half{width: 50%;}
.surveying .w-half{margin-bottom: 20px;}
.surveying .w-half img{height: 250px;object-fit: cover;}

#footermenu{ display:none; }
header .box .right ul .mmenulist{ display:none; }
.mobilelogo{ display:none; }

#contactus #sec01 .mcontectarea1{ height:100px; resize: vertical; font-size: 16px; padding: 13px 10px; width: 100%; border: 1px solid #003888; }
#contactus #sec01 .mesdet{ padding-top:30px; font-weight:400; line-height:1.4em; font-size:1.3rem; }
#contactus #sec01 .selectqualification{ }
#contactus #sec01 .selectqualification .wpcf7-list-item{ width:46%; display:inline-block; font-size:1.4rem; }


/*-----------------------
20240529　追記 
-----------------------*/

#top-about .flex{
    align-items: center;
}
#top-about .txt-bg{
  width: 50%;
  display: flex;
  justify-content: center;
  background: #1D1D1D;
  height: 70rem;
}
#top-about .txt-block {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
#top-about .txt-block P{
  max-width: 402px;
  color: white;
  margin-bottom: 3rem;
}
#top-about .img{
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#top-about .img img{
  width: 50%;
}
#top-about .top-sectitle , #top-about .top-sectitle span{
  color:white;
}
#top section#top-about{
  padding:0;
}
.motto-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.motto-list ul li{
  width: 174px;
  border: solid 1px #E2E2E2;
  border-radius: 100%;
  min-height: 174px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
.motto-list ul li img{
  max-width: 5rem;
  margin-bottom: 1rem;
}
.motto-list ul li p{
  font-weight: 700;
}
.motto-list ul li p:last-child{
  color: var(--main-color);
}
.motto-area .top-sectitle span{
  color: var(--main-color);
  font-size: 5rem;
}

#history section .title{
  text-align: center;
  font-size: 5rem;
  margin-bottom: 15px;
  font-weight: 700;
}
#history section .subtitle{
  font-size: 2.4rem;
  width: 100%;
  text-align: center;
  display: inline-block;
  color: var(--main-color);
  font-weight: 700;
  margin-bottom: 3rem;
}
.history-area{
	margin-bottom: 12rem;
}
.center-title-box{
  text-align: center;
}
.center-title-box .ttl{
  font-size: 6.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.center-title-box .enttl{
  font-size: 2.4rem;
  margin-bottom: 6rem;
  display: block;
  font-weight: 700;
  color: var(--main-color);
}
.center-title-box p{
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--main-color);
}
#service .l_message .flex .right h3{
  font-size: 7rem;
}
#service .l_message .flex .right h4{
  font-size: 3rem;
}
#service .r_message .flex .left h4{
  font-size: 3rem;
}
#service .r_message .flex .left h3{
  font-size: 7rem;
}
.l_message .flex .right .btn-box{
  margin-top: 3rem;
}
.r_message .flex .left .btn-box{
  margin-top: 3rem;
}
.vehicle-area{background: #F8F8F8;}
.vehicle-box{
  margin-bottom: 6rem;
}
.vehicle-box .left{
  width: 50%;
}
.vehicle-box .right{
  width: 50%;
}
.vehicle-box .flex{
  gap: 6rem;
}
.vehicle-box .right .ttl{
  font-size: 2.7rem;
  color: var(--main-color);
  font-weight: 700;
  padding-bottom: 1rem;
  border-bottom: solid 1px #EDEDED;
  margin-bottom: 2rem;
}
.vehicle-info li{
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 3rem;
}
.vehicle-info li .title{
  padding: 2rem 3rem;
    background: #fff;
    border-radius: 10px;
}
.sdgs-sec_01 .flex{
  gap: 3rem;
}
.sdgs-sec_01 .left .subtitle{
  font-size: 2.4rem;
    color: var(--main-color);
    display: inline-block;
    width: 100%;
    margin-bottom: 3rem;
    position: relative;
}
.sdgs-sec_01 .left .subtitle::before{
  content: '';
  width: 60%;
  height: 1px;
  border-bottom: solid 1px #EDEDED;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.sdgs-sec_01 .left{
  width: 50%;
}
.sdgs-sec_01 .right{
  width: 50%;
}
.sdgs-sec_01 .left .title{
  font-size: 3.4rem;
  color: var(--main-color);
  margin-bottom: 3rem;
}

.sdgs-sec_3 ul li img{
  width: 10rem;
  height: auto;
}

.sdgs-sec_3 h2{
  color: var(--main-color);
  font-weight: bold;
  letter-spacing: 0.3rem;
  font-size: 2.5rem;
}

.sdgs-sec_3 p{
  line-height: 2;
}

.sdgs-sec_3-img {
  margin-top: 4rem;
}

.sdgs-sec_3-img p{
  margin-right: 2.3rem;
}

.sdgs-sec_3-img img{
  width: calc(100% / 2);
}
.sdgs-liner{
  position: relative;
}

.sdgs-liner::after {
  content: '';
  display: block;
  margin-top: 20px; /* 線と要素の間の距離 */
  width: 100%;
  height: 2px; /* 線の太さ */
  background: linear-gradient(to right, #9D0C0C 10%, #DBDDE6 10%); /* 2色の線 */
}
.sdgs-liner .liner-flex{
  justify-content: space-between;
  align-items: flex-end;
}
.sdgs-triangle img{
  width: 10rem;
}
.sdgs-triangle{
  margin-top: 6rem;
  text-align: center;
}
.sdgs-sec_4{
  background-color: #1D1D1D;
  padding-bottom: 12rem;
  margin-top: -6rem;
}
.sdgs-sec_4 .flex{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sdgs-sec_4 .flex img{
  max-width: 87px;
}
.sdgs-sec_4 .flex h4{
  color: white;
  font-size: 3rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-weight: 500;
  line-height: 1.5;
}
.sdgs-sec_4 .flex p{
  color: white;
}
.recruit-sec_1 .left h3{
  font-size: 2.6rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 3rem;
  line-height: 1.5;
}
.recruit-cta .left{
  position: relative;
    width: 50%;
    margin-left: 50px;
    background-color: rgb(7 7 7 / 50%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    justify-content: center;
}
.recruit-cta .left .top-sectitle{color: white; margin-bottom: 3rem; font-size: 3rem;}
.recruit-cta .left p{color: white; margin-bottom: 3rem;}
.recruit-cta .box{margin:0 5rem;}
.recruit-cta .left p{font-size: 2.2rem; font-weight: 500;}
.cta-rec.recruit-cta{max-height: 650px;}

.footer-sns-icon{
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}


#mygreeting #sec01 .text-btm{
  margin-top: 2rem;
}
#top .fv .movie video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}