/* CSS Document */

:root{
  --main-con1: #009FA8;
  --main-con2: #008CD6;
}

body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
  width: 100%;
  height: 100%;
}
html{
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
  line-height: 1.6;
}
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*******************************
共通CSS
********************************/    
h1{
  width: 100%;
  height: 280px;
  background: url(../images/recruit_h1.svg) center center no-repeat #FFF;
  text-indent: -99999px;
}

#wrapper{
  filter: drop-shadow(rgba(0,0,0,0.4) 0 0 10px);
}
div.bg{
  background: #F2F2F2;
}
div.content{
  padding-top: 48px;
}

ul.con-tab{
  display: flex;
  justify-content: space-between;
  height: 80px;
  margin: -80px auto 0;
  width: 100%;
  max-width: 1280px;
}
ul.con-tab li{
  display: block;
  width: calc(50% - 5px);
}
ul.con-tab li a{
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  line-height: 80px;
  font-size: 28px;
  font-weight: bold;
  transition: all linear 0.15s;
  border-radius: 3px 3px 0 0;
  position: relative;
}
ul.con-tab li:nth-of-type(1) a{
  background: var(--main-con1);
  color: #fff;
}
ul.con-tab li:nth-of-type(1).active a{
  color: var(--main-con1);
  background: #f2f2f2;
}
ul.con-tab li:nth-of-type(2) a{
  background: var(--main-con2);
  color: #fff;
}
ul.con-tab li:nth-of-type(2).active a{
  color: var(--main-con2);
  background: #f2f2f2;
}
ul.con-tab li:not(.active) a::before{
  position: absolute;
  content: "";
  width: 16px;
  height: 8px;
  background: #fff;
  left: 0; right: 0; margin: auto;
  bottom: 8px;
  clip-path: polygon(0 0,100% 0,50% 100%);
}

.point-wrap{
  width: 1100px;
  margin: 0 auto 32px;
  background: #fff;
  padding: 32px 0 32px;
}
.grad-tit{
  display: flex;
  width: fit-content;
  margin: auto;
  align-items: baseline;
  margin-top: -8px;
}
.grad-tit p{
  white-space: nowrap;
  width: auto;
  padding: 0 16px;
}
.grad-tit::before, .grad-tit::after{
  content: "";
  display: inline-block;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--main-con1));
  transform: translateY(-6px);
}
.grad-tit::after{
  background: linear-gradient(-90deg,transparent,var(--main-con1));
}
.point{
  display: flex;
  justify-content: center;
  width: 1000px;
  justify-content: space-between;
  margin: auto;
}
.point li{
  height: 124px;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#trw .point li{
  width: calc(100% / 3 - 5px);
  background: var(--main-con1);
}
#bts .point li{
  width: calc(100% / 4 - 5px);
  background: var(--main-con2);
}

.text3{
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
section{
  padding: 40px 0;
}

section ul{
  width: 1000px;margin: 0 auto;
  border-top: 1px solid #9B9B9B;
}
section ul li{
  display: flex;
  border-bottom: 1px solid #9B9B9B;
  align-items: center;
  position: relative;
}
.tit{
  text-align: center;
  font-family: "M PLUS 1p", sans-serif;
  text-align: center;
  font-weight: bold;
  color: #005F64;
}

section ul li.single{
  padding: 20px 0;
}
.cate1,
.cate2{
  display: flex;
  align-items:flex-start;
  padding: 20px 0;
}


.photo a{
  display: block;
  width:80px; height: 80px; line-height: 80px; border-radius: 80%; text-align: center;font-weight: bold;  color: #FFF;
  font-size: 20px;
  font-family: "M PLUS 1p", sans-serif;
  position: absolute;
  background: url(../images/arrow_right.svg) right 5px center no-repeat #008CD6;
  top: 18px;
  right: 430px;
  text-indent: -5px;
}
.photo a.map{right:340px;}
.photo a.web{ background: url(../images/arrow_right.svg) right 5px center no-repeat #009FA8;}

.cate1{border-bottom: 1px solid #DADADA;}

.cate1 p,
.cate2 p{color: #FFF; font-weight: bold; text-align: center;
  font-family: "M PLUS 1p", sans-serif;}
.cate1 p{background: #004E93; }
.cate2 p{background: #006130; }


.bold{
  font-weight: bold;
}

.bottom{
  background: #E0EAB7;
  padding:0 0 40px 0;
  position: relative;
  /* margin-top: 50px; */
}

.message{
  color: #004E93;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #004E93;
  width: 660px;
  margin: 0 auto;
  padding: 4px 0 20px;
}
.message.trw{
  text-align: left;
  padding-bottom: 8px;
}

.add{
  width: 660px;
  margin: 0 auto;
}
.add .logo{
  position: relative;
  margin-right: 5px;
  top: -4px;
}

.add .bold{
  display: block;
  margin-top: 10px;}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

footer{
  text-align: center;
  padding: 10px 0 10px 0;
  background: #FFF;
}
footer a{
  margin: 10px;
}
footer a:hover{
  opacity: 0.8;
}

footer address{
  font-size: 0.8em;
  font-style: normal;
}
.tabs {
  width: 100%;
  position: relative;
  margin-bottom: 100px;
  display: inline-block;
}

.bts-tab {
  margin: 0;
  width: 100%;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.bts-tab li {
  margin: 0 5px 0 0;
}

.bts-tab a {
  padding: 9px 15px;
  display: inline-block;
  border-radius: 3px 3px 0 0;
  height: 80px;
  background: #7FB5DA;
  font-size: 16px;
  font-weight: 600;width: 242px;
  color: white;
  transition: all linear 0.15s;
  text-indent: -9999px;
  text-decoration: none;
}
.bts-tab .sumoto a{    background: url(../images/logo_sumoto.svg) center center no-repeat #a7cce5;}
.bts-tab .gose a{    background: url(../images/logo_gose.svg) center center no-repeat #a7cce5;}
.bts-tab .tottori a{    background: url(../images/logo_tottori.svg) center center no-repeat #a7cce5;}
.bts-tab .kyotango a{    background: url(../images/logo_kyotango.svg) center center no-repeat #a7cce5;}



.bts-tab .sumoto.active a{    background: url(../images/logo_sumoto.svg) center center no-repeat #FFF;}
.bts-tab .gose.active a{    background: url(../images/logo_gose.svg) center center no-repeat #FFF;}
.bts-tab .tottori.active a{    background: url(../images/logo_tottori.svg) center center no-repeat #FFF;}
.bts-tab .kyotango.active a{    background: url(../images/logo_kyotango.svg) center center no-repeat #FFF;}

.tab-content-container {
  position: relative;
  overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.bts-tab-content {
  padding: 15px 0;
  border-radius: 3px;
  display: none;
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
}

.bts-tab-content.active {
  display: block;
  position: relative;
}

.tab-content:not(.active) {
  display: none;
}



p.read{
  text-align: center;
  width: 1000px;
  margin: 0 auto 30px;
}
.tit.center{
  text-align: center;
  margin: 0 auto 8px;
}

.works-wrap{
  width: 100%;
  background: #E8E8E8;
  padding: 24px 0 32px;
  margin-bottom: 16px;
}
ul.works{
  display: flex;
  justify-content: space-between;
  width: 1100px;
  margin: 0 auto 8px;
}
ul.works>li{
  display: block;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  width: calc(100% / 3 - 6px);
  padding: 8px 16px;
  overflow: hidden;
  box-sizing: border-box;
}
ul.works .works-tit{
  font-size: 24px;
  color: var(--main-con1);
  font-weight: bold;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid #C7C7C7;
  margin: 4px 0 12px;
  padding-bottom: 4px;
  line-height: 1.2;
  height: 2.8lh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
ul.works .works-tit span{
  font-size: 18px;
  display: block;
  /* margin-right: -0.5em; */
}
ul.works li .tit{
  font-size: 18px;
  color: #000;
  margin-bottom: 12px;
}
ul.works .txt{
  width: 100%;
  text-align: justify;
  margin-top: -8px;
}
ul.works .txt p{
  display: inline-block;
  margin-bottom: 8px;
}

.flow-wrap{
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  padding: 40px 0 32px;
  margin: 0 0 90px;
}
.flow-wrap .grad-tit p{
  font-size: 24px;
  color: var(--main-con1);
}
.grad-tit::before, .grad-tit::after{
  transform: translateY(-8px);
}
.flow-wrap .flow{
  width: fit-content;
  margin: auto;
}
.flow-wrap .flow p.tit{
  font-size: 18px;
  width: auto;
  text-align: left;
  margin: 0.8em 0 0.2em;
  line-height: 1.2;
}
.flow-wrap .flow p.tit span{
  font-size: .8em;
  display: inline-block;
}
.flow-wrap .flow p:not(.tit){
  padding-left: 1em;
}

.flow-wrap .form-btn{
  display: inline-block;
  width: 12em;
  height: .95lh;
  line-height: 3em;
  text-align: center;
  background: url(../images/arrow_right.svg) no-repeat right .6em center / .4em ,var(--main-con1);
  border-radius: 80px;
  margin: .2em 0;
  color: #fff;
  font-weight: bold;
}

.con-tab .active, .bts-tab .active{
  pointer-events: none;
}

a.no{
  pointer-events: none;
  opacity: 0.3;
  filter: saturate(0);
}


/***********************************************************************
    「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
**********************************************************************/
@media all and (min-width: 751px) {

  .pc_no{
    display: none;
  }
  
  a{transition: opacity 0.2s;}
  a:hover{opacity: 0.8;}

  /* .point li{width: 242px; height: 124px;
    background-size: cover !important;
  } */

  .tit{width: 130px; font-size: 20px;}
  .txt{width: 870px;}
  .cate1 p,
  .cate2 p{width: 115px; line-height: 36px; border-radius: 36px; margin-right: 10px;}
  .cate1.center,
  .cate2.center{
    align-items: center;
  }
  .large{
    font-size: 20px;
  }
  .message{font-size: 17px; margin-bottom: 12px; margin-top: -50px; padding-top: 0px;}
  .bottom{
    background: url(../images/bottom_nami_large.svg);
    background-size: 100% auto;
  }
  #trw .bottom{
    background: url(../images/bottom_nami_large.svg) repeat-x top 50px center;
    background-size: 100% auto;
    margin-top: 64px;
  }

  .bottom .add p{margin-bottom: 10px; font-weight: bold; font-size: 14px;}
  .bottom .bold{
    margin-bottom: 5px;
  }
  .add{
    position: relative;
  }
  .eruboshi{
    position: absolute;
    right: 0px;
    bottom: 0px;
  }
  .eruboshi img{
    width: 150px;}

  section.gose::before{
    content: '';
    width: 1100px;
    height: 268px;
    position: absolute;
    left: calc(50% - 100px);
    bottom: 0;
    background: url(../images/gaikan_gose.png) right bottom no-repeat;
  }
  section.sumoto::before{
    content: '';
    width: 817px;
    height: 438px;
    position: absolute;
    left: calc(50% + 380px);
    bottom: 0;
    background: url(../images/gaikan_sumoto.png) right bottom no-repeat;
  }
  section.kyotango::before{
    content: '';
    width: 427px;
    height: 378px;
    position: absolute;
    left: calc(50% + 448px);
    bottom: 0;
    background: url(../images/gaikan_kyotango.png) right bottom no-repeat;
  }
  section.tottori::before{
    content: '';
    width: 1058px;
    height: 332px;
    position: absolute;
    left: calc(50% + 95px);
    bottom: 0;
    background: url(../images/gaikan_tottori.png) right bottom no-repeat;
  }

  section ul li img{
    position: absolute;
    top: 20px;
    right:20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    width: 300px;
  }


}

/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) { 
  .sp_no{
    display: none;
  }

  h1{
    width: 100%;
    height: 320px;
    background: url(../images/recruit_h1_sp.svg) center center no-repeat #FFF;
    box-shadow: none;
    border-top: none;
  }

  .point-wrap{
    width: 100%;
  }
  .grad-tit{
    width: 650px;
  }
  .grad-tit::before, .grad-tit::after{
    transform: translateY(-10px);
  }
  .point {
    width: 650px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .point li{
    width:320px !important;
    height: 165px !important;
    margin-bottom: 10px;
    margin-left: 10px;
  }
  .point li:nth-of-type(odd){
    margin-left: 0;
  }
  .point li img{
    width:  100%;
  }
.point li:nth-child(1){background:url(../images/point1.png) center center no-repeat; background-size: 100% auto;}
  .point li:nth-child(2){background:url(../images/point2.png) center center no-repeat; background-size: 100% auto;}
  .point li:nth-child(3){background:url(../images/point3.png) center center no-repeat; background-size: 100% auto;}
  .point li:nth-child(4){background:url(../images/point4.png) center center no-repeat; background-size: 100% auto;}
  /* 
  .bts-tab .sumoto a{    background: url(../images/logo_sumoto_s.svg) center center no-repeat #a7cce5;}
  .bts-tab .gose a{    background: url(../images/logo_gose_s.svg) center center no-repeat #a7cce5;}
  .bts-tab .tottori a{    background: url(../images/logo_tottori_s.svg) center center no-repeat #a7cce5;}
  .bts-tab .kyotango a{    background: url(../images/logo_kyotango_s.svg) center center no-repeat #a7cce5;}

  
  .bts-tab .sumoto.active a{    background: url(../images/logo_sumoto_s.svg) center center no-repeat #FFF;}
  .bts-tab .gose.active a{    background: url(../images/logo_gose_s.svg) center center no-repeat #FFF;}
  .bts-tab .tottori.active a{    background: url(../images/logo_tottori_s.svg) center center no-repeat #FFF;}
  .bts-tab .kyotango.active a{    background: url(../images/logo_kyotango_s.svg) center center no-repeat #FFF;} */
  .bts-tab{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 10px;
    width: 650px;
  }
  .bts-tab li{margin-bottom: 5px; position: relative;}
  .bts-tab li:nth-of-type(even){margin-right: 0;}
  .bts-tab a {
    width: 290px;
    background-size: auto 40px !important;
}
.bts-tab li::before{
  content: '';
  background: url(../images/arrow_bottom.svg) center no-repeat;
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: 5px;
}.bts-tab li.active::before{display: none;}

  .tit{font-size: 36px;}
  .txt{width: 650px; font-size: 28px;}
  #bts .txt{display: flex;justify-content: space-between;}
  section ul li {  justify-content: center;padding-top: 20px; }
  section ul{width: 650px;}


  .photo a{position: relative; width: 320px; line-height: 80px; height: 80px; border-radius: 80px; top: 0; right: 0; font-size: 30px; background-position: right 20px center !important; background-size: 10px auto !important;}
  .photo a.map{right: 0; margin-bottom: -80px; margin-left: 330px; margin-top: 15px; }

  .cate1,
  .cate2{
    flex-direction: column;
    width: 300px;
    align-items:flex-start;
    padding: 25px 0;
  }
  .cate1 p,
  .cate2 p{
    width: 300px;line-height: 52px; border-radius: 52px; margin-right: 52px; margin-bottom: 15px;}
    .cate1 .center,
    .cate2 .center{
      text-align: center;
      width: 300px;
    }

  .large{
    font-size: 36px;
  }
  .message{font-size: 28px; margin-bottom: 12px;}
  .bottom{font-size: 26px; position: relative; margin-top: 50px;}
  #trw .bottom{margin-top: 120px;}
  .bottom .add p{margin-bottom: 10px; font-weight: bold; font-size: 24px;}
  .bottom .bold{
    margin-bottom: 5px;
    margin-top: 30px;
  }section ul li{flex-wrap: wrap;}

  section ul li.photo .txt{flex-direction: column;}

.txt img{
  /* margin-left: 100px; */
  width: 650px;
  margin-top: 30px;
}
.add{font-size: 24px;}

  .small{
    font-size: 22px;
  }
  .material-symbols-outlined{
    font-size: 40px !important;
    top:9px;
  }
  .eruboshi{
    position: absolute;
    right: 45px;
    bottom: 130px;
  }
  .eruboshi img{
    width: 220px;
  }
  footer {background: #FFF; text-align: left; padding-left: 25px;}
  footer a img{height: 45px; margin-bottom: 15px;}
  footer address{margin-top: 5px; font-size: 20px;}
  address{text-align: center;}
  .bottom::before{
    content: '';
    width: 100%;
    height: 200px;
    background: url(../images/bottom_nami.svg) bottom no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: -196px;
    left: 0;
  }
  .tab-content{padding: 0;}
  .add .logo{width: 340px; display: block; margin-top: 10px;}
  .tab-content-container{padding-top: 0;}



p.read{
  width: 650px;
  margin: 0 auto 30px;
  font-size: 28px;
  text-align: left;
}
.tit.center{
  text-align: center;
}

ul.works{
  display: block;
  width: 100%;
}
ul.works>li{
  display: block;
  width: 100%;
  padding: 16px 50px;
  margin-bottom: 16px;
}
ul.works .works-tit{
  font-size: 32px;
  margin: 8px 0 16px;
  padding: 4px;
  height: auto;
}
ul.works .works-tit span{
  font-size: 24px;
}
ul.works li .tit{
  font-size: 30px;
  margin-bottom: 12px;
}
ul.works .txt{
  width: 100%;
  text-align: justify;
  margin-top: -8px;
}
ul.works .txt p{
  display: inline-block;
  margin-bottom: 8px;
}

.flow-wrap{
  padding: 48px 0;
  margin: 40px 0 180px;
  font-size: 28px;
}
.flow-wrap .grad-tit p{
  font-size: 40px;
  line-height: 1.2;
}
.grad-tit::before, .grad-tit::after{
  transform: translateY(-8px);
}
.flow-wrap .flow{
  width: 650px;
}
.flow-wrap .flow p.tit{
  font-size: 32px;
}
.flow-wrap .flow p.tit span{
  display: inline-block;
  padding-left: .5em;
}
.flow-wrap .flow p:not(.tit){
  padding-left: 1em;
}
.flow-wrap .grad-tit::before, .flow-wrap .grad-tit::after{
  transform: translateY(6px);
}


}

/***********************************************************************
keyframes
**********************************************************************/