@charset "utf-8";
[id] {
  scroll-margin-top: 100px;
}
/* ######Setting##### */
#wrap{
  position: relative;
  width: 100%;
  height: 100%;
}
#wrap2{
  position: relative;
  width: 100%;
  height: 100%;
}
/* ###### Keyview ##### */
#keyview{
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
}
#keyview img{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 100%;
  min-width: 1366px;
  height: auto;
}
#keyview h2{
  position: absolute;
  top:306px;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  margin: 0;
  padding: 0;
  color:#124b63;
  font-family: 'Noto Serif JP';
  font-weight:500;
  font-size:48px;
  line-height: 48px;
  white-space: nowrap;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#keyview p{
  position: absolute;
  top:365px;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  margin: 0;
  padding: 0;
  color:#124b63;
  font-family: 'Lato';
  font-weight:900;
  font-size:32px;
  line-height: 32px;
  white-space: nowrap;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
/* ###### pankuzu ##### */
#pankuzu{
  margin: 20px 12px 0;
  width: calc(100% - 24px);
}
#pankuzu ul{
  background:url(../../images/icon_pankuzu_home.svg) no-repeat top 0px left 0;
  background-size: 14px;
  width: 100%;
  font-size: 0;
}
#pankuzu ul li{
  position: relative;
  display: inline-flex;
  color:#2b2b2b;
  font-weight: 300;
  font-size:14px;
  line-height: 14px;
  vertical-align: top;
}
#pankuzu ul li::after{
  position:absolute;
  top:7px;
  right: -5px;
  content: "";
  background-color: #2b2b2b;
  width: 12px;
  height: 1px;
}
#pankuzu ul li:last-child::after{
  position:absolute;
  top:0;
  right: 0;
  content: "";
  background-color:inherit;
  width:0;
  height: 0;
}
#pankuzu ul li a{
  display: block;
  padding:0 20px;
  color:#2b2b2b;
  font-weight: 300;
  font-size:14px;
  line-height: 14px;
}
#pankuzu ul li a:hover{
  color:#178ecf;
}
#pankuzu ul li.now_page a{
  color:#178ecf;
}
/* ######contents##### */
.contents{
  margin: 0 auto 0;
  width: 1024px;
}
.contents h3{
  clear: both;
  margin: 115px 0 0;
  color:#2b2b2b;
  font-weight: 400;
  font-size:52px;
  line-height: 62px;
  text-align: center;
}
.contents p{
  margin: 1.5em 12px 0;
  color:#2b2b2b;
  font-weight: 300;
  font-size:18px;
  line-height: 28px;
}
.contents p:nth-of-type(1){
  margin: 60px 12px 0 !important;
}
#photo_area{
  position: relative;
  margin: 160px 0;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
#photo_area img{
  width: 100%;
}
@media screen and (max-width:1366px){
  #photo_area img{
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 1366px;
  }
}
/* who we are */
#whoweare{
  margin: 0 auto 0;
  padding:0 0 115px;
  width: 1024px;
}
#whoweare h3{
  margin:0 12px;
  font-size:52px;
  line-height: 52px;
  font-weight: 700;
}
#whoweare h3 span{
  display: inline-block;
  position: relative;
  margin-left:18px;
  padding-left:66px;
  font-size:24px;
  line-height: 52px;
  font-weight: 400;
}
#whoweare h3 span::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background-color: #000;
  width: 48px;
  height: 2px;
}
#whoweare ul{
  display: flex;
  margin: 60px 12px 0;
}
#whoweare ul li{
  background-color: #f5f7f9;
  color:#666;
  width: calc(50% - 2px);
  height: 60px;
  font-size:24px;
  line-height: 60px;
  text-align: center;
}
#whoweare ul li.on{
  position: relative;
  background-color: #e0f5fd;
  color:#2aabe4;
  width: calc(50% - 2px);
  height: 60px;
  font-size:24px;
  line-height: 60px;
  text-align: center;
}
#whoweare ul li.on::after{
  content: "";
  position: absolute;
  top:48px;
  left:50%;
  background-color: #2aabe4;
  width: 90px;
  height: 4px;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
}
#whoweare ul li:nth-of-type(1){
  margin-right:4px;
}
#pdf-slider1,
#pdf-slider2 {
  display: none;
}
#pdf-slider1.on,
#pdf-slider2.on {
  display: block;
  background-color: #000;
  margin: 2px 12px 0;
  padding:30px;
  width: 940px;
  height: 540px;
  text-align: center;
}
#pdf-slider1 canvas,
#pdf-slider2 canvas{
  width: auto;
  height: 540px;
}
#whoweare .btn{
  margin:10px 12px 0 auto;
  width: 400px;
  height: 44px;
}
#whoweare .btn a{
  display: block;
  background-color: #2aabe4;
  color:#FFF;
  font-size:18px;
  line-height: 44px;
  text-decoration: none;
  text-align: center;
}
#whoweare .btn a:hover{
  background-color: #000;
}
/* gallery */
#gallery{
  margin: 0 auto 0;
  padding:0 0 115px;
  width: 1024px;
}
#gallery h3{
  margin:0 12px;
  font-size:52px;
  line-height: 52px;
  font-weight: 700;
}
#gallery h3 span{
  display: inline-block;
  position: relative;
  margin-left:18px;
  padding-left:66px;
  font-size:24px;
  line-height: 52px;
  font-weight: 400;
}
#gallery h3 span::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background-color: #000;
  width: 48px;
  height: 2px;
}
#movie_area{
  position: relative;
  margin:60px auto 0;
  padding:30px;
  background-color: #000;
  width: 940px;
  height: auto;
  text-align: center;
}
#movie_area video{
  width: 100%;
  height: auto;
}
#movie_area #icon_movie{
  position: absolute;
  top:50%;
  left:50%;
  width: 48px;
  height: 48px;
  transform:translateX(-50%) translateY(-50%);
  -webkit- transform:translateX(-50%) translateY(-50%);
}
#movie_area #icon_movie img{
  width: 100%;
}
/* environment */
#environment{
  margin: 0 auto 0;
  padding:0 0 115px;
  width: 1024px;
}
#environment h3{
  margin:0 12px;
  font-size:52px;
  line-height: 52px;
  font-weight: 700;
}
#environment h3 span{
  display: inline-block;
  position: relative;
  margin-left:18px;
  padding-left:66px;
  font-size:24px;
  line-height: 52px;
  font-weight: 400;
}
#environment h3 span::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background-color: #000;
  width: 48px;
  height: 2px;
}
.environment_area{
  display: flex;
  margin:30px 12px 0;
  padding:30px;
  border-radius: 30px;
  background-color: #f5f7f9;
}
.environment_area:nth-of-type(1){
  margin: 60px 12px 0;
}
.environment_img{
  position: relative;
  width: 400px;
  height: 300px;
}
.e_img{
  width: 400px;
  height: 300px;
}
.e_img img{
  width: 100%;
  height: auto;
}
.environment_img p{
  position: absolute;
  bottom:20px;
  right:20px;
  padding:0 1em;
  background-color: #e38d29;
  color:#FFF;
  height: 40px;
  font-size:14px;
  line-height: 40px;
  text-align: center;
}
.environment_box{
  margin:0 0 0 30px;
}
.environment_box h4{
  padding:0 0 30px;
  color:#2085b0;
  font-size:24px;
  line-height: 1.2em;
  font-weight: 700;
}
.environment_box p{
  font-size:14px;
  line-height: 1.5em;
}
.environment_box .btn{
  position: relative;
  margin:30px 0 0 auto;
  width: 170px;
  height: 40px;
}
.environment_box .btn::after{
  content: "";
  position: absolute;
  top:50%;
  right:10px;
  background: url(../../images/recruit/icon_link_w.png) no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  transform:translateY(-50%);
  -webkit- transform:translateY(-50%);
}
.environment_box .btn a{
  display: block;
  background-color: #29abe3;
  color:#FFF;
  font-size:14px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
}
.environment_box .btn a:hover{
  background-color: #000;
}
/* tech */
#tech{
  margin: 0 auto 0;
  padding:0 0 115px;
  width: 1024px;
}
#tech h3{
  margin:0 12px;
  font-size:52px;
  line-height: 52px;
  font-weight: 700;
}
#tech h3 span{
  display: inline-block;
  position: relative;
  margin-left:18px;
  padding-left:66px;
  font-size:24px;
  line-height: 52px;
  font-weight: 400;
}
#tech h3 span::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background-color: #000;
  width: 48px;
  height: 2px;
}
#tech_area{
  display: flex;
  flex-wrap: wrap;
  margin:60px 0 0;
}
.tech_box{
  position: relative;
  margin:0 10px 20px;
  padding:30px;
  border-radius: 30px;
  box-shadow: 0px 0px 15px -5px #666666;
  width: 260px;
  height: 392px;
}
.tech_img{
  padding:0 0 30px;
  width: 260px;
  height: 195px;
}
.tech_img a{
  display: block;
}
.tech_img img{
  width: 100%;
}
.tech_box h4{
  color:#2aabe4;
  font-size:16px;
  line-height: 1.2em;
  font-weight: 700;
}
.tech_link{
  position: absolute;
  bottom:30px;
  left:50%;
  width: 254px;
  height: 30px;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
}
.tech_link a{
  display: block;
  background: url(../../images/recruit/btn_tech_off.png) no-repeat;
  background-size: cover;
  width: 254px;
  height: 30px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.tech_link a:hover{
  background: url(../../images/recruit/btn_tech_on.png) no-repeat;
}
/* information */
#information{
  margin: 0 auto 0;
  padding:0 0 115px;
  width: 1024px;
}
#information h3{
  margin:0 12px;
  font-size:52px;
  line-height: 52px;
  font-weight: 700;
}
#information h3 span{
  display: inline-block;
  position: relative;
  margin-left:18px;
  padding-left:66px;
  font-size:24px;
  line-height: 52px;
  font-weight: 400;
}
#information h3 span::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background-color: #000;
  width: 48px;
  height: 2px;
}
#info_area{
  margin:60px 12px 0;
  width: calc(100% - 24px);
}
.info_box{
  border-top:2px solid #2aabe4;
  padding:20px 0;
}
.info_box:nth-last-of-type(1){
  border-bottom: 2px solid #2aabe4;
}
.info_box dl{
  width: 100%;
}
.info_box dl dt{
  position: relative;
  display: flex;
  align-items: center;
  padding:0 50px 0 60px;
  color:#2aabe4;
  width: calc(100% - 110px);
  min-height: 40px;
  font-size:18px;
  line-height: 1.2em;
  font-weight: 700;
  cursor: pointer;
}
.info_box dl dt::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background: url(../../images/recruit/icon_question.png) no-repeat;
  background-size: cover;
  width: 40px;
  height: 40px;
  transform:translateY(-50%);
  -webkit- transform:translateY(-50%);
}
.info_box dl dt::after{
  content: "";
  position: absolute;
  top:50%;
  right:0;
  background: url(../../images/recruit/icon_info.png) no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  transform:translateY(-50%) rotate(0deg);
  -webkit- transform:translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}
.info_box dl dt.open::after {
  transform: translateY(-50%) rotate(45deg);
}
.info_box dl dd{
  display: none;
  padding:30px 50px 30px 60px;
  color:#124b63;
  width: calc(100% - 110px);
  font-size:14px;
  line-height: 1.5em;
}
/* benefit */
#benefit{
  margin: 0 auto 0;
  padding:0 0 115px;
  width: 1024px;
}
#benefit h3{
  margin:0 12px;
  font-size:52px;
  line-height: 52px;
  font-weight: 700;
}
#benefit h3 span{
  display: inline-block;
  position: relative;
  margin-left:18px;
  padding-left:66px;
  font-size:24px;
  line-height: 52px;
  font-weight: 400;
}
#benefit h3 span::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background-color: #000;
  width: 48px;
  height: 2px;
}
#benefit_area{
  display: flex;
  flex-wrap: wrap;
  margin: 40px 2px 0;
  width: calc(100% - 4px);
}
.benefit_box{
  margin:20px 10px 0;
  border-radius: 117.5px;
  background-color: #e0f5fd;
  width: 235px;
  height: 235px;
}
.benefit_img{
  margin:0px auto 0;
  width: auto;
  height: 72px;
  text-align: center;
}
.benefit_img img{
  width: auto;
  height: 72px;
}
.benefit_box h4{
  padding:0 10px;
  color:#1a8dbf;
  font-size:16px;
  line-height: 1.2em;
  font-weight: 700;
  text-align: center;
}
.benefit_box p{
  margin: 15px 37px 0;
  color:#444;
  font-size: 12px;
  line-height: 1.5em;
}
.btn_benefit{
  margin:60px auto 0;
  width: 512px;
  height: 60px;
}
.btn_benefit a{
  display: block;
  border-radius: 30px;
  background-color: #2aabe4;
  color:#FFF;
  width: 512px;
  height: 60px;
  font-size:18px;
  line-height: 60px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.btn_benefit a:hover{
  background-color: #000;
}
/* entry */
#entry{
  margin: 0 auto 0;
  padding:0 0 115px;
  width: 1024px;
}
#entry h3{
  margin:0 12px;
  font-size:52px;
  line-height: 52px;
  font-weight: 700;
}
#entry h3 span{
  display: inline-block;
  position: relative;
  margin-left:18px;
  padding-left:66px;
  font-size:24px;
  line-height: 52px;
  font-weight: 400;
}
#entry h3 span::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  background-color: #000;
  width: 48px;
  height: 2px;
}
.entry_area{
  margin:30px 12px 0px;
  padding:0 30px 60px;
  background-color: #f5f7f9;
  width: calc(100% - 60px);
  overflow: auto;
}
.entry_area:nth-of-type(1){
  margin: 60px 12px 0;
}
.entry_area h4{
  margin:30px auto 0;
  padding:0 0 10px;
  color:#2085b0;
  font-size:28px;
  line-height: 1em;
  font-weight: 700;
  text-align: center;
}
.entry_list{
  display: flex;
  margin:20px auto 0;
  width: 100%;
  height: 80px;
}
.entry_category{
  background-color: #2085b0;
  border-radius: 40px 0 0 40px;
  width: 150px;
  height: 80px;
}
.entry_category h5{
  margin:0 0 0 40px;
  color:#FFF;
  font-size:18px;
  line-height: 80px;
}
.entry_ttl{
  position: relative;
  border:3px solid #2085b0;
  border-radius: 0 37px 37px 0;
  width: calc(100% - 144px);
  height: 74px;
}
.entry_ttl::after{
  content: "";
  position: absolute;
  top:50%;
  right:30px;
  background:url(../../images/recruit/icon_link.png) no-repeat;
  background-size: cover;
  width: 30px;
  height: 30px;
  transform:translateY(-50%);
  -webkit- transform:translateY(-50%);
}
.entry_ttl p{
  width: 100%;
  height: 74px;
}
.entry_ttl p a{
  display: block;
  padding:0 0 0 30px;
  background-color: #FFF;
  border-radius: 0 37px 37px 0;
  color:#333;
  width: calc(100% - 30px);
  font-size:18px;
  line-height: 74px;
  text-decoration: none;
}
.entry_ttl p.not_recruit{
  display: block;
  padding:0 0 0 30px;
  background-color: #E0E0E0;
  border-radius: 0 37px 37px 0;
  color:#333;
  width: calc(100% - 30px);
  height: 74px;
  font-size:18px;
  line-height: 74px;
}
.entry_ttl p a:hover{
  background-color: #e0f5fd;
}
p.present{
  margin:20px 0 0;
  padding: 0 0 20px;
  color:#333;
  font-size:22px;
  line-height: 32px;
  font-weight: 700;
  text-align: center;
}
p.present span{
  display: inline-block;
  position: relative;
  margin:0 0 0 20px;
  padding:0 0 0 42px;
  color:#333;
  font-size:22px;
  line-height: 32px;
  font-weight: 700;
}
p.present span::before{
  content:"";
  position: absolute;
  top:0;
  left:0;
  background: url(../../images/recruit/icon_present.png) no-repeat;
  background-size:cover;
  width: 32px;
  height: 32px;
}