@charset "UTF-8";
body {
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  min-height: 100vh;
  color: #113675;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

* {
  position: relative;
}

a, img {
  display: block;
}

img {
  width: 100%;
  height: auto;
}

.hbg {
  position: fixed;
  z-index: 100;
  margin-top: -1.4%;
}

.hbg li {
  background: #fff;
}

.hbg.on li {
  background: #113675;
}

.hero-content .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.hero-content .header .logo {
  position: absolute;
  z-index: 10;
}

.hero-content .header .logo span {
  display: block;
}

.hero-content .hero-content-inner .hero-copy {
  position: absolute;
  color: #093585;
  text-align: center;
  letter-spacing: 0.01em;
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN';    
  font-weight: 900;
}

.hero-content .hero-content-inner .hero-copy2 {
  position: absolute;
  color: #093585;
  text-align: center;
  letter-spacing: 0.01em;
  font-weight: 900;
}

.hero-content .hero-content-inner .hero-copy3 {
  position: absolute;
  color: #093585;
  text-align: center;
  letter-spacing: 0.01em;
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN';    
  font-weight: 700;
}

.hero-content .hero-content-inner .btn-rectuit {
  position: fixed;
  color: #fff;
  letter-spacing: 0.08em;
  z-index: 888;
}

.hero-content .cap {
  background-color: #093585;  
  color: #FFFFFF;
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN';      
  text-align: center;
  letter-spacing: 0.08em;
}

.hero-content .hero-content-inner .msg-box {
  position: absolute;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hero-content .hero-content-inner .msg-box.msg-box-1 {
  left: 0;
  background: rgba(18, 20, 32, 0.52);
}

.hero-content .hero-content-inner .msg-box.msg-box-2 {
  right: 0;
  background: rgba(30, 120, 45, 0.83);
}

.hero-content .hero-content-inner .msg-box.msg-box-2 p {
  text-align: right;
}

.hero-content .hero-content-inner .msg-box.msg-box-2 p:nth-child(1) {
  margin-bottom: 1em;
}

.content {
  background-color: #FFFFFF;
}

.content .content-tit {
  color: #113675;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.08em;
}

.content .typo {
  position: absolute;
  left: 0;
  background: #0C388A;
}

.content .typo span {
  margin: 0 auto;
  display: block;
}

.content .content-inner {
  background: rgba(255, 255, 255, 0.69);
}

.content .content-inner .list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 900;
}

.content .content-inner .list li a {
  display: inline-block;
}

.content .content-inner .list li.fukurikosei {
  display: block;
}

.content .content-inner .list li.fukurikosei .list-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.content .content-inner .list li.fukurikosei .pic-box {
  overflow-x: scroll;
}

.content .content-inner .list li.fukurikosei .pic-box .pic-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.content .content-inner .list li .list-text-box p {
  margin-bottom: 1em;
}

.content .content-inner .list li .list-text-box p:last-child {
  margin-bottom: 0;
}

.content .content-inner .btn-to-top {
  margin: 0 auto;
  text-align: center;
  background: url(../imgs/recruit/btn_top.svg) center bottom no-repeat;
}

.content .content-inner .btn-to-top span {
  line-height: 1;
}

.footer {
  background: #043288;
  text-align: center;
  color: #fff;
  letter-spacing: 0.08em;
}

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  visibility: hidden;
  z-index: 1000;
}

#modal .md-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
}

#modal .md-content .md-close {
  background: url(../imgs/construction/btn_close.svg) center center no-repeat;
  background-size: contain;
}

#modal .md-content.md-gallery {
  background: rgba(4, 50, 136, 0.09);
}

#modal .md-content.md-gallery .md-text-box {
  background: #113675;
}

#modal .md-content.md-gallery .md-text-box .md-text {
  position: absolute;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-family: "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: #fff;
  text-align: center;
}

#modal .md-content.md-gallery .md-text-box .md-close {
  position: absolute;
}

#modal .md-content.md-gallery .md-pic {
  z-index: 10;
}

#modal .md-content.md-gallery .md-pic video {
  width: 100%;
  height: auto;
}

#modal .md-content.md-nav .nav li {
  text-align: center;
}

#modal .md-content.md-nav .nav li a {
  color: #113675;
  letter-spacing: 0.08em;
}

#modal .md-content.md-nav .nav li:nth-child(2) {
  border-top: 1px solid #113675;
}

#modal .md-content.md-nav .nav li:nth-child(3) {
  border-top: 1px solid #118129;
}

#modal .md-content.md-nav .nav li:nth-child(4) {
  border-top: 1px solid #DC000C;
}

#modal .md-content.md-nav .nav li:nth-child(5) {
  border-top: 1px solid #FFCC00;
}

#modal .md-content.md-nav .md-close {
  background-image: url(../imgs/construction/btn_close_b.svg);
}

#modal.on {
  visibility: visible;
}

#modal.on .md-content.on {
  visibility: visible;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

@media screen and (min-width: 751px) {
  .sp {
    display: none;
  }
  .hero-content .header {
    position: fixed;
  }    
  .hero-content .header .logo {
    width: 555px;
    height: 150px;
    background: url(../imgs/hero/bg_logo.svg) left top no-repeat;
    background-size: contain;
  }
  .hero-content .header .logo span {
    margin: 20px 0 0 100px;
    width: 290px;
  }   
  .hero-content .header .header-inner {
    padding-top: 37px;
    height: 125px;
    background: rgba(4, 50, 136, 0.95);
  }
  .hero-content .header .header-inner .nav {
    padding-right: 113px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 60px;
    background: #008129;
  }
  .hero-content .header .header-inner .nav li a {
    font-size: 20px;
    line-height: 50px;
    color: #fff;
    letter-spacing: 0.08em;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
  }
  .hero-content .header .header-inner .nav li a:hover {
    opacity: 0.5;
  }
  .hero-content .header .header-inner .tit {
    margin-right: 60px;
    font-size: 51px;
    line-height: 180px;
  }
  .hero-content .hero-content-inner {
    height: 1084px;
    background: url(../imgs/recruit/hero_recruit.jpg) center center no-repeat;
    background-size: cover;
  }
  .hero-content .hero-content-inner .bg {
    display: none;
  }
  .hero-content .hero-content-inner .hero-copy {
    top: clamp(88px, 12vw, 250px);
    width: 100%;
    font-size: clamp(15px, 1.95vw, 70px);
    line-height: 48px;
  }
  .hero-content .hero-content-inner .hero-copy2 {
    top: clamp(88px, 15.5vw, 320px);
    width: 100%;
    font-size: clamp(15px, 1.95vw, 70px);
    line-height: clamp(15px, 2.45vw, 80px);
  }
  .hero-content .hero-content-inner .hero-copy3 {
    top: clamp(88px, 22vw, 435px);
    width: 100%;
    font-size: clamp(10px, 0.88vw, 80px);
    line-height: clamp(15px, 1.2vw, 80px);
  }
    
  .maruwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding-top: 5%;
    height: 100%;
    width: 100%;
  }    

  .maru1 {
    height: clamp(50px, 7.5vw, 180px);
    width: clamp(50px, 7.5vw, 180px);
    border-radius: 50%;
    line-height: clamp(50px, 7.5vw, 170px);
    font-size: clamp(10px, 1.2vw, 50px);
    color: #093585;   
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN';
    font-weight: 900;  
    text-align: center;
    background: #FFFFFF;
    margin-left: 20px;   
  }
    
  .maru2 {
    height: clamp(50px, 7.5vw, 180px);
    width: clamp(50px, 7.5vw, 180px);
    border-radius: 50%;
    line-height: clamp(50px, 7.5vw, 170px);
    font-size: clamp(10px, 1.2vw, 50px);
    color: #093585;        
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN';
    font-weight: 900;  
    text-align: center;
    background: #FFFFFF;
    margin-left: 20px; 
  }    
    
  .hero-content .hero-content-inner .btn-rectuit {
    left: 0;
    bottom: 130px;
    padding-left: 38px;
    width: 231px;
    height: 60px;
    background: url(../imgs/recruit/btn_recruit_k.png) left center no-repeat;
    background-size: contain;
    font-size: 28px;
    line-height: 60px;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    z-index: 888;
  }
  .hero-content .hero-content-inner .btn-rectuit:hover {
    z-index: 888;
    opacity: 0.7;
  }
  .hero-content .cap {
    margin-top: -10%;
    margin-bottom: 6.5%;
    padding-top: -1%;  
    font-size: 22px;
    line-height: 58px;
  }       
  .hero-content .hero-content-inner .msg-box.msg-box-1 {
    top: 540px;
    left: 0;
    padding: 14px 40px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: 45px;
    line-height: 70px;
    border-top-right-radius: 41px;
    border-bottom-right-radius: 41px;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-2 {
    top: 424px;
    padding: 25px 22px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: 30px;
    line-height: 40px;
    border-top-left-radius: 31px;
    border-bottom-left-radius: 31px;
  }
  .content {
    padding: 54px 0 0;
    border-top: 16px solid #093585;
  }
  .content .content-tit {
    margin-bottom: 25px;
    font-size: 35px;
  }
  .content .typo {
    top: 874px;
    padding: 50px 0;
    width: 132px;
    border-top-right-radius: 75px;
    border-bottom-right-radius: 75px;
  }
  .content .typo span {
    width: 38px;
  }
  .content .content-inner {
    margin: 0 auto;
    padding: 40px 0 50px;
    width: 1400px;
  }
  .content .content-inner .list {
    margin: 0 auto 60px;
    width: 1200px;
  }
  .content .content-inner .list > li {
    padding: 7px 0;
    border-bottom: 3px solid #093585;
    font-size: 28px;
    line-height: 41px;
  }
  .content .content-inner .list > li .list-tit {
    padding-left: 60px;
    width: 550px;
  }
  .content .content-inner .list > li .list-text {
    width: 900px;
  }
  .content .content-inner .list > li.fukurikosei .pic-box {
    margin: 35px 0;
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list {
    gap: 0 45px;
    width: calc(505px * 5 + 460px);
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list li {
    width: 460px;
  }
  .content .content-inner .btn-to-top {
    width: 100px;
    height: 90px;
    font-size: 19px;
    background-size: 59px 59px;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
  }
  .content .content-inner .btn-to-top:hover {
    opacity: 0.5;
  }
  .footer {
    font-size: 19px;
    line-height: 103px;
  }
  #modal .md-content.md-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 1825px;
  }
  #modal .md-content.md-gallery .md-text-box {
    width: 380px;
    height: 620px;
    border-top-left-radius: 57px;
    border-bottom-left-radius: 57px;
    -webkit-box-shadow: 15px 6px 2px 2px rgba(0, 0, 0, 0.16);
            box-shadow: 15px 6px 2px 2px rgba(0, 0, 0, 0.16);
  }
  #modal .md-content.md-gallery .md-text-box .md-text {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    margin-top: -40px;
    font-size: 21px;
  }
  #modal .md-content.md-gallery .md-text-box .md-close {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: 80px;
    width: 43px;
    height: 43px;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
  }
  #modal .md-content.md-gallery .md-text-box .md-close:hover {
    opacity: 0.5;
  }
  #modal .md-content.md-gallery .md-pic {
    width: 1445px;
  }
  #modal .md-content.md-gallery.w {
    display: block;
    padding-bottom: 6px;
  }
  #modal .md-content.md-gallery.w .md-text-box {
    margin-top: 27px;
    width: auto;
    height: 135px;
    border-radius: 32px;
    -webkit-box-shadow: 0px 6px 2px 2px rgba(0, 0, 0, 0.16);
            box-shadow: 0px 6px 2px 2px rgba(0, 0, 0, 0.16);
  }
  #modal .md-content.md-gallery.w .md-text-box .md-text {
    margin-top: auto;
  }
  #modal .md-content.md-gallery.w .md-text-box .md-close {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: inherit;
    right: 55px;
  }
  #modal .md-content.md-gallery.w .md-pic {
    width: auto;
  }
  #modal .md-content.md-gallery.kaigyo .md-text-box .md-text {
    text-align: left;
  }        
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

@media screen and (min-width: 751px) and (max-width: 1920px) {
  html {
    font-size: calc(100vw / 1.920);
  }
  body {
    font-size: 0.015rem;
  }
  .hero-content .header .logo {
    width: 0.555rem;
    height: 0.150rem;
  }
  .hero-content .header .logo span {
    margin: 0.02rem 0 0 0.098rem;
    width: 0.29rem;
  }
  .hero-content .header .header-inner {
    padding-top: 0.039rem;
    height: 0.125rem;
  }
  .hero-content .header .header-inner .nav {
    padding-right: 0.113rem;
    gap: 0.060rem;
  }
  .hero-content .header .header-inner .nav li a {
    font-size: 0.020rem;
    line-height: 0.049rem;
  }
  .hero-content .hero-content-inner {
    height: 1.084rem;
  }
  .hero-content .hero-content-inner .btn-rectuit {
    bottom: 130px;
    padding-left: 0.039rem;
    width: 0.235rem;
    height: 0.068rem;
    font-size: 0.028rem;
    line-height: 0.072rem;
    z-index: 888;
  }
  .hero-content .cap {
    font-size: 0.022rem;
    line-height: 0.057rem;
  }
  .hero-content .header .header-inner .tit {
    margin-right: 0.060rem;
    font-size: 0.051rem;
    line-height: 0.180rem;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-1 {
    top: 0.540rem;
    padding: 0.014rem 0.040rem;
    font-size: 0.045rem;
    line-height: 0.070rem;
    border-top-right-radius: 0.041rem;
    border-bottom-right-radius: 0.041rem;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-2 {
    top: 0.424rem;
    padding: 0.025rem 0.022rem;
    font-size: 0.030rem;
    line-height: 0.040rem;
    border-top-left-radius: 0.031rem;
    border-bottom-left-radius: 0.031rem;
  }
  .content {
    padding: 0.054rem 0 0;
    border-top: 0.016rem solid #093585;
  }
  .content .content-tit {
    margin-bottom: 0.025rem;
    font-size: 35px;
  }
  .content .typo {
    top: 0.874rem;
    padding: 0.050rem 0;
    width: 0.132rem;
    border-top-right-radius: 0.075rem;
    border-bottom-right-radius: 0.075rem;
  }
  .content .typo span {
    width: 0.038rem;
  }
  .content .content-inner {
    padding: 0.040rem 0 0.050rem;
    width: 1400px;
  }
  .content .content-inner .list {
    margin: 0 auto 0.060rem;
    width: 1200px;
  }
  .content .content-inner .list > li {
    padding: 7px 0;
    border-bottom: 0.003rem solid #093585;
    font-size: 28px;
    line-height: 41px;
  }
  .content .content-inner .list > li .list-tit {
    padding-left: 0.060rem;
    width: 0.550rem;
  }
  .content .content-inner .list > li .list-text {
    width: 0.900rem;
  }
  .content .content-inner .list > li.fukurikosei .pic-box {
    margin: 0.035rem 0;
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list {
    gap: 0 0.045rem;
    width: calc(0.505rem * 5 + 0.460rem);
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list li {
    width: 0.460rem;
  }
  .content .content-inner .btn-to-top {
    width: 0.100rem;
    height: 0.090rem;
    font-size: 0.019rem;
    background-size: 0.059rem 0.059rem;
  }
  .footer {
    font-size: 0.019rem;
    line-height: 0.103rem;
  }
  #modal .md-content.md-gallery {
    width: 1.825rem;
  }
  #modal .md-content.md-gallery .md-text-box {
    width: 0.380rem;
    height: 0.620rem;
    border-top-left-radius: 0.057rem;
    border-bottom-left-radius: 0.057rem;
    -webkit-box-shadow: 0.015rem 0.006rem 0.002rem 0.002rem rgba(0, 0, 0, 0.16);
            box-shadow: 0.015rem 0.006rem 0.002rem 0.002rem rgba(0, 0, 0, 0.16);
  }
  #modal .md-content.md-gallery .md-text-box .md-text {
    margin-top: -0.040rem;
    font-size: 0.021rem;
  }
  #modal .md-content.md-gallery .md-text-box .md-close {
    bottom: 0.080rem;
    width: 0.043rem;
    height: 0.043rem;
  }
  #modal .md-content.md-gallery .md-pic {
    width: 1.445rem;
  }
  #modal .md-content.md-gallery.w {
    padding-bottom: 0.006rem;
  }
  #modal .md-content.md-gallery.w .md-text-box {
    margin-top: 0.027rem;
    height: 0.135rem;
    border-radius: 0.032rem;
    -webkit-box-shadow: 0px 0.006rem 0.002rem 0.002rem rgba(0, 0, 0, 0.16);
            box-shadow: 0px 0.006rem 0.002rem 0.002rem rgba(0, 0, 0, 0.16);
  }
  #modal .md-content.md-gallery.w .md-text-box .md-close {
    right: 0.055rem;
  }    
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

@media screen and (min-width: 751px) and (max-width: 1280px) {
  .hbg {
    top: calc(50/1280 * 100vw);
    right: calc(50/1280 * 100vw);
    width: calc(30/1280 * 100vw);
    height: calc(22/1280 * 100vw);
    cursor: pointer;
    -webkit-transition: opacity 0.5s ease-out , -webkit-transform 0.3s ease-out;
    transition: opacity 0.5s ease-out , -webkit-transform 0.3s ease-out;
    transition: opacity 0.5s ease-out , transform 0.3s ease-out;
    transition: opacity 0.5s ease-out , transform 0.3s ease-out , -webkit-transform 0.3s ease-out;
  }
  .hbg:hover {
    opacity: 0.7;
  }
  .hbg li {
    margin-bottom: calc(6/1280 * 100vw);
    width: 100%;
    height: calc(3/1280 * 100vw);
    border-radius: calc(1.5/1280 * 100vw);
  }
  .hbg.on {
    top: calc(30/1280 * 100vw);
  }    
  .hero-content {
    z-index: 10;
  }
  .hero-content .header .logo span {
    margin: calc(14/1280 * 100vw) 0 0 calc(65/1280 * 100vw);
    width: calc(195/1280 * 100vw);
  }
  .hero-content .header .header-inner::after {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: calc(38/1280 * 100vw);
    background: #008129;
  }
  .hero-content .header .header-inner .nav {
    display: none;
  }
  .hero-content .hero-content-inner {
    height: calc(757/1280 * 100vw);
    background-image: url(../imgs/recruit/hero_recruit.jpg);
  }

  .hero-content .hero-content-inner .btn-rectuit {  
    bottom: calc(109/1280 * 100vw);
    z-index: 888;  
  }
  
  .hero-content .hero-content-inner .msg-box.msg-box-1 {
    top: calc(378/1280 * 100vw);
    left: 0;
    padding: calc(14/1280 * 100vw) calc(36/1280 * 100vw);
    font-size: calc(25/1280 * 100vw);
    line-height: calc(40/1280 * 100vw);
    border-top-right-radius: calc(32/1280 * 100vw);
    border-bottom-right-radius: calc(32/1280 * 100vw);
  }
  .hero-content .hero-content-inner .msg-box.msg-box-2 {
    top: calc(277/1280 * 100vw);
    padding: calc(20/1280 * 100vw) calc(20/1280 * 100vw) calc(20/1280 * 100vw) calc(30/1280 * 100vw);
    font-size: calc(20/1280 * 100vw);
    line-height: calc(30/1280 * 100vw);
    border-top-left-radius: calc(41/1280 * 100vw);
    border-bottom-left-radius: calc(41/1280 * 100vw);
  }
  .content {
    padding: calc(59/1280 * 100vw) 0 0;
    border-top: calc(11/1280 * 100vw) solid #093585;
  }
  .content .content-tit {
    margin-bottom: calc(24/1280 * 100vw);
    font-size: 30px;
  }
  .content .typo {
    top: calc(547/1280 * 100vw);
    padding: calc(50/1280 * 100vw) 0;
    width: calc(87/1280 * 100vw);
    border-top-right-radius: calc(75/1280 * 100vw);
    border-bottom-right-radius: calc(75/1280 * 100vw);
  }
  .content .typo span {
    width: calc(26/1280 * 100vw);
  }
  .content .content-inner {
    margin: 0 auto;
    padding: calc(43/1280 * 100vw) 0 calc(58/1280 * 100vw);
    width: 1000px;
  }
  .content .content-inner .list {
    margin: 0 auto calc(72/1280 * 100vw);
    width: 850px;
  }
  .content .content-inner .list > li {
    padding: 6px 0;
    border-bottom: calc(2/1280 * 100vw) solid #093585;
    font-size: 25px;
    line-height: calc(41/1280 * 100vw);
  }
  .content .content-inner .list > li .list-tit {
    padding-left: calc(40/1280 * 100vw);
    width: calc(385/1280 * 100vw);
  }
  .content .content-inner .list > li .list-text {
    width: calc(610/1280 * 100vw);
  }
  .content .content-inner .list > li.fukurikosei .pic-box {
    margin: calc(35/1280 * 100vw) 0;
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list {
    gap: 0 calc(40/1280 * 100vw);
    width: calc(490/1280 * 100vw * 5 + 450/1280 * 100vw);
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list li {
    width: calc(450/1280 * 100vw);
  }
  .content .content-inner .btn-to-top {
    width: calc(90/1280 * 100vw);
    height: calc(60/1280 * 100vw);
    font-size: calc(13/1280 * 100vw);
    background-size: calc(40/1280 * 100vw) calc(40/1280 * 100vw);
  }
  #modal .md-content.md-nav .logo {
    margin: 0 auto calc(117/1280 * 100vw);
    width: calc(192/1280 * 100vw);
  }
  #modal .md-content.md-nav .nav {
    margin-bottom: calc(107/1280 * 100vw);
  }
  #modal .md-content.md-nav .nav li a { 
    font-size: calc(30/1280 * 100vw);
    line-height: calc(64/1280 * 100vw);
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
  }
  #modal .md-content.md-nav .nav li a:hover {
    opacity: 0.5;
  }
  #modal .md-content.md-nav .md-close {
    margin: 0 auto;
    width: calc(49/1280 * 100vw);
    height: calc(49/1280 * 100vw);
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
  }
  #modal .md-content.md-nav .md-close:hover {
    opacity: 0.5;
  }       
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*
@media screen and (max-width: 844px) and (orientation: landscape) {
  html {
    font-size: calc(100vw / 0.844);
  }
  body {
    font-size: 0.015rem;
  }
  .sp {
    display: none;
  }
  .hero-content .header {
    width: 100%;
    height: 0.160rem;
    background: url(../imgs/recruit/bg_recruit_header_sp_landscape.png) left top no-repeat;
    background-size: contain;
  }
  .hero-content .header .logo {
    position: absolute;
    top: 0.044rem;
    left: 0.044rem;
    width: 0.172rem;
  }
  .hero-content .header .header-inner .tit {
    position: absolute;
    top: 0.079rem;
    right: 0.035rem;
    font-size: 0.021rem;
    line-height: 1;
  }
  .hero-content .hero-content-inner {
    height: 100vh;
    background: url(../imgs/recruit/hero_recruit_sp_landscape.jpg) center center no-repeat;
    background-size: cover;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-1 {
    top: 0.184rem;
    padding: 0.015rem 0.020rem;
    font-size: 0.012rem;
    line-height: 0.020rem;
    border-top-right-radius: 0.014rem;
    border-bottom-right-radius: 0.014rem;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-2 {
    top: 0.147rem;
    padding: 0.023rem 0.022rem;
    font-size: 0.015rem;
    line-height: 0.020rem;
    border-top-left-radius: 0.041rem;
    border-bottom-left-radius: 0.041rem;
  }
  .hero-content .hero-content-inner .btn-gyoumu {
    bottom: 0.011rem;
    padding-left: 0.019rem;
    width: 0.176rem;
    height: 0.050rem;
    font-size: 0.020rem;
    line-height: 0.050rem;
  }
  .content {
    padding: 0.039rem 0 0;
    border-top: 0.007rem solid #093585;
  }
  .content .content-tit {
    margin-bottom: 0.016rem;
    font-size: 0.024rem;
  }
  .content .typo {
    top: 0.440rem;
    padding: 0.050rem 0;
    width: 0.053rem;
    border-top-right-radius: 0.075rem;
    border-bottom-right-radius: 0.075rem;
  }
  .content .typo span {
    width: 0.015rem;
  }
  .content .content-inner {
    margin: 0 auto;
    padding: 0.014rem 0 0.057rem;
    width: 0.794rem;
    border-top-left-radius: 0.041rem;
    border-top-right-radius: 0.041rem;
  }
  .content .content-inner .list {
    margin: 0 auto 0.060rem;
    width: 0.660rem;
  }
  .content .content-inner .list > li {
    padding: 0.008rem 0;
    border-bottom: 1px solid #093585;
    font-size: 0.017rem;
    line-height: 0.026rem;
  }
  .content .content-inner .list > li .list-tit {
    padding-left: 0.028rem;
    width: 0.254rem;
  }
  .content .content-inner .list > li .list-text {
    width: 0.406rem;
  }
  .content .content-inner .list > li.fukurikosei .pic-box {
    margin: 0.035rem 0;
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list {
    gap: 0 0.045rem;
    width: calc(0.505rem * 5 + 0.460rem);
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list li {
    width: 0.460rem;
  }
  .content .content-inner .btn-to-top {
    width: 0.100rem;
    height: 0.045rem;
    font-size: 0.010rem;
    background-size: 0.027rem 0.027rem;
  }
  .footer {
    font-size: 0.012rem;
    line-height: 0.070rem;
  }
}

@media screen and (min-width: 751px) and (max-width: 844px) and (orientation: portrait) {
  html {
    font-size: calc(100vw / 0.800);
  }
  body {
    font-size: 0.015rem;
  }
  .sp {
    display: none;
  }
  .hero-content .header {
    width: 100%;
  }
  .hero-content .header .logo {
    top: -0.007rem;
    width: 0.560rem;
    height: 0.148rem;
    background: url(../imgs/hero/bg_logo.svg) left top no-repeat;
    background-size: contain;
  }
  .hero-content .header .logo span {
    margin: 0.032rem 0 0 0.087rem;
    width: 0.222rem;
  }
  .hero-content .header .header-inner {
    height: 0.118rem;
    background: rgba(4, 50, 136, 0.95);
  }
  .hero-content .header .header-inner .tit {
    margin-right: 0.029rem;
    font-size: 0.035rem;
    line-height: 0.118rem;
  }
  .hero-content .hero-content-inner .bg {
    width: 100vw;
    height: 100%;
    overflow-x: scroll;
  }
  .hero-content .hero-content-inner .bg p {
    width: 1.710rem;
    height: 100vh;
    background: url(../imgs/recruit/hero_recruit_sp.jpg) center center no-repeat;
    background-size: cover;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-1 {
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin-top: -0.210rem;
    padding: 0.020rem 0.045rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: 0.025rem;
    line-height: 0.040rem;
    border-radius: 0.019rem;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-2 {
    margin-top: 0.020rem;
    top: 50%;
    padding: 0.020rem 0.035rem;
    font-size: 0.020rem;
    line-height: 0.030rem;
    border-top-left-radius: 0.041rem;
    border-bottom-left-radius: 0.041rem;
  }
  .hero-content .hero-content-inner .btn-gyoumu {
    bottom: 0.116rem;
    padding-left: 0.050rem;
    width: 0.244rem;
    height: 0.076rem;
    font-size: 0.024rem;
    line-height: 0.076rem;
  }
  .content {
    padding: 0.043rem 0 0;
    border-top: 0.004rem solid #093585;
  }
  .content .content-tit {
    margin-bottom: 0.011rem;
    font-size: 0.022rem;
  }
  .content .typo {
    top: 0.667rem;
    padding: 0.050rem 0;
    width: 0.070rem;
    border-top-right-radius: 0.075rem;
    border-bottom-right-radius: 0.075rem;
  }
  .content .typo span {
    width: 0.015rem;
  }
  .content .content-inner {
    margin: 0 auto;
    padding: 0.018rem 0 0.053rem;
    width: 0.736rem;
    border-top-left-radius: 0.041rem;
    border-top-right-radius: 0.041rem;
  }
  .content .content-inner .list {
    margin: 0 auto 0.045rem;
    width: 0.610rem;
  }
  .content .content-inner .list > li {
    padding: 0.007rem 0;
    border-bottom: 1px solid #093585;
    font-size: 0.016rem;
    line-height: 0.024rem;
  }
  .content .content-inner .list > li .list-tit {
    padding-left: 0.028rem;
    width: 0.238rem;
  }
  .content .content-inner .list > li .list-text {
    width: 0.372rem;
  }
  .content .content-inner .list > li.fukurikosei .pic-box {
    margin: 0.035rem 0;
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list {
    gap: 0 0.045rem;
    width: calc(0.505rem * 5 + 0.460rem);
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list li {
    width: 0.460rem;
  }
  .content .content-inner .btn-to-top {
    width: 0.100rem;
    height: 0.042rem;
    font-size: 0.010rem;
    background-size: 0.025rem 0.025rem;
  }
  .footer {
    padding: 0.020rem 0;
    font-size: 0.010rem;
    line-height: 0.012rem;
  }
}
*/
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/

@media screen and (max-width: 750px) and (orientation: portrait) {
  html {
    font-size: calc(100vw / 0.390);
  }
  body {
    font-size: 0.015rem;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .hbg {
    margin-top: -0.15%; 
    top: 0.022rem;
    right: 0.037rem;
    width: 0.021rem;
    height: 0.015rem;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  }
  .hbg li {
    margin-bottom: 0.003rem;
    width: 100%;
    height: 0.003rem;
    border-radius: 0.0015rem;
  }
  .hbg.on {
    top: 0.018rem;
  }    
  .hero-content .header {
    width: 100%;
    height: 0.125rem;
    background: url(../imgs/hero/bg_top_header_sp.png) left top no-repeat;
    background-size: contain;
  }
  .hero-content .header .logo {
    position: absolute;
    top: 0.015rem;
    left: 0.015rem;
    width: 0.130rem;
  }
  .hero-content .header .header-inner {
    display: none;
  }
    
  .hero-content .hero-content-inner .hero-copy {
    margin-top: clamp(-232px, 12vw, -700px);
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 0.003rem 0.005rem;
    width: 98%;
    font-size: clamp(12px, 4.7vw, 80px);
    line-height: 0.025rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0.014rem;
  }
  .hero-content .hero-content-inner .hero-copy2 {
    margin-top: clamp(-170px, 12vw, -900px);
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 0.003rem 0.005rem;
    width: 98%;
    font-size: clamp(12px, 5vw, 80px);
    font-weight: 800;  
    line-height: 0.0230rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0.014rem;
  }
  .hero-content .hero-content-inner .hero-copy3 {
    margin-top: clamp(-90px, 12vw, -500px);
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 0.003rem 0.005rem;
    width: 98%;
    font-size: clamp(8px, 3.5vw, 80px);
    line-height: 0.0200rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0.014rem;
  }     
    
  .maruwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -240px;  
    padding-top: 650px;
    height: 100%;
    width: 100%;
  }    

  .maru1 {
    height: clamp(140px, 25vw, 350px);
    width: clamp(140px, 25vw, 350px);
    border-radius: 50%;
    line-height: clamp(148px, 23vw, 320px);
    font-size: clamp(26px, 1.5vw, 200px);
    color: #093585;   
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN';
    font-weight: 900; 
    text-align: center;
    background: #FFFFFF;
    margin-left: 10px;   
  }
    
  .maru2 {
    height: clamp(140px, 25vw, 350px);
    width: clamp(140px, 25vw, 350px);
    border-radius: 50%;
    line-height: clamp(148px, 23vw, 320px);
    font-size: clamp(26px, 1.5vw, 200px);
    color: #093585;        
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN';
    font-weight: 900;  
    text-align: center;
    background: #FFFFFF;
    margin-left: 15px; 
  }    
    
  .hero-content .hero-content-inner .btn-rectuit {
    left: -3%;
    bottom: 0.13rem;
    padding-left: 0.03rem;
    width: 0.15rem;
    height: 0.03rem;
    background: url(../imgs/recruit/btn_recruit_sp_k.png) right center no-repeat;
    background-size: cover;
    font-size: 0.018rem;
    line-height: 0.032rem;
    z-index: 888;
  }    
  .hero-content .cap {
    position: absolute;
    width: 100%;
    padding: 2% 2%;  
    margin-top: -236px;  
    font-size: 0.014rem;
    line-height: 0.020rem;
  }
  .hero-content .header .header-inner .tit {
    position: absolute;
    top: 0.065rem;
    right: 0.013rem;
    font-size: 0.011rem;
  }
  .hero-content .hero-content-inner .bg {
    width: 100vw;
    height: 100%;
    overflow-x: scroll;
  }
  .hero-content .hero-content-inner .bg p {
    width: 0.5rem;
    height: 100vh;
    background: url(../imgs/recruit/hero_recruit_sp.jpg) center center no-repeat;
    background-size: cover;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-1 {
    top: 0.161rem;
    padding: 0.016rem 0.020rem 0.016rem 0.030rem;
    font-size: 0.015rem;
    line-height: 0.020rem;
    border-top-right-radius: 0.019rem;
    border-bottom-right-radius: 0.019rem;
  }
  .hero-content .hero-content-inner .msg-box.msg-box-2 {
    top: 50%;
    padding: 0.023rem 0.022rem;
    font-size: 0.015rem;
    line-height: 0.020rem;
    border-top-left-radius: 0.041rem;
    border-bottom-left-radius: 0.041rem;
  }
  .content {
    padding: 0.022rem 0 0;
    border-top: 0.005rem solid #093585;
  }
  .content .content-tit {
    margin-bottom: 0.007rem;
    font-size: 20px;
  }
  .content .typo {
    top: 0.534rem;
    padding: 0.050rem 0;
    width: 0.040rem;
    border-top-right-radius: 0.075rem;
    border-bottom-right-radius: 0.075rem;
  }
  .content .typo span {
    width: 0.008rem;
  }
  .content .wrap {
    overflow-x: scroll;
  }
  .content .content-inner {
    margin: 0 0.0;
    padding: 0 0 0;
    width: 100%;
  }
  .content .content-inner .list {
    margin: 0 auto 0.020rem;
    width: 0.358rem;
  }
  .content .content-inner .list > li {
    padding: 8px 0 5px;
    border-bottom: 1px solid #093585;
    font-size: 15px;
    line-height: 16px;
  }
  .content .content-inner .list > li .list-tit {
    padding-left: 0.014rem;
    width: 0.138rem;
  }
  .content .content-inner .list > li .list-text {
    width: 0.220rem;
  }
  .content .content-inner .list > li.fukurikosei .pic-box {
    margin: 0.015rem 0;
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list {
    gap: 0 0.045rem;
    width: calc(0.505rem * 5 + 0.460rem);
  }
  .content .content-inner .list > li.fukurikosei .pic-box .pic-list li {
    width: 0.460rem;
  }
  .content .content-inner .btn-to-top {
    width: 0.100rem;
    height: 0.040rem;
    font-size: 0.010rem;
    background-size: 0.023rem 0.023rem;
  }
  .footer {
    padding: 0.020rem 0;
    font-size: 0.010rem;
    line-height: 0.012rem;
  }
  #modal .md-content.md-gallery {
    width: calc(100% - 0.010rem);
    height: calc(100% - 0.010rem);
  }
  #modal .md-content.md-gallery .md-text-box {
    margin: 0 auto;
    width: 0.335rem;
    height: 0.145rem;
    border-bottom-left-radius: 0.057rem;
    border-bottom-right-radius: 0.057rem;
    -webkit-box-shadow: 0px 6px 2px 2px rgba(0, 0, 0, 0.16);
            box-shadow: 0px 6px 2px 2px rgba(0, 0, 0, 0.16);
  }
  #modal .md-content.md-gallery .md-text-box .md-text {
    margin-top: -0.024rem;
    top: 50%;
    width: 100%;
    font-size: 0.012rem;
  }
  #modal .md-content.md-gallery .md-text-box .md-close {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: 0.022rem;
    width: 0.020rem;
    height: 0.020rem;
  }
  #modal .md-content.md-gallery .md-pic {
    height: calc(100% - 0.010rem - 0.165rem);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #modal .md-content.md-gallery .md-pic.md-video {
    height: auto;
  }
  #modal .md-content.md-nav .logo {
    margin: 0 auto;
    width: 0.192rem;
  }
  #modal .md-content.md-nav .nav {
    margin: 0.090rem auto 0.070rem;
  }
  #modal .md-content.md-nav .nav li {
    width: 0.244rem;
  }
  #modal .md-content.md-nav .nav li a {
    font-size: 0.030rem;
    line-height: 0.065rem;
  }
  #modal .md-content.md-nav .md-close {
    margin: 0 auto;
    width: 0.049rem;
    height: 0.049rem;
  }        
}
/*# sourceMappingURL=kyouei_recruit.css.map */