@charset "UTF-8";

*{
  box-sizing:border-box;
  max-width:100%;
  margin:0;
  padding:0;
}
html {
  font-family:'Noto Sans JP', "Helvetica Neue", Helvetica, Arial, sans-serif,'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  -webkit-text-size-adjust: 100%;	
  font-display: swap;
  margin:0;
  padding:0;
}
body {
  font-size: 16px;
  line-height:2;
  letter-spacing:.5pt;
  font-weight: 500;
  hanging-punctuation: allow-end;
  margin: 0;
  padding: 0;
  color: #273343;
  word-break: break-all;
}
body.hidden{
  overflow:hidden;
  height:100%;
}

.loading{
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index:100;
}
.loading img{
  width: 30px;
}

#wrapper{overflow:hidden;}

.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}
.fade-in-up {
  transform: translate(0, 50px);
}
.fade-in-left {
  transform: translate(-50px, 0);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

strong{font-weight:900;}
.wht{color:#fff;}
.blue{color:#197EE3;}
.center{text-align:center;}
.indent{
  padding-left:1em;
  text-indent:-1em;
}
.min{font-size:12px;}
ul.dot li{
  position:relative;
  padding-left:1em;
}
ul.dot li::before{
  position:absolute;
  content:"・";
  top:0;
  left:0;
}

header{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  width:100%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  z-index:1;
}
header.add{position:fixed;}
#header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:clamp(100px,5.208vw,150px);
  margin:0 auto;
  padding:15px;
  top:0;
}

a#logo{
  position:relative;
  display:block;
  width:clamp(250px,13.020vw,400px);
  margin-right:auto;
  z-index:2;
}
a#logo svg{
  width:100%;
  height:100%;
}
a#logo a:hover{opacity:0.7;}

header.add a#logo {
  opacity:0;
  animation: animelogo 1s ease .5s forwards;
}
@keyframes animelogo {
  0% { opacity:0; }
  100% { opacity:1; }
}

a#logo path{
  fill:#fff;
  transition:0.3s ease;
}
header.add a#logo path{fill:#273343;}
br.br480{display:none;}
br.br768{display:none;}

@media screen and (max-width:1024px){

br.br1024-non{display:none;}

}

@media screen and (max-width:768px){

#header{
  width:100%;
  padding:0 25px;
}  
a#logo{width:150px;}
br.br768{display:inline;}
br.br768-non{display:none;}

}

@media screen and (max-width:480px){
 
#header{padding:0 15px;}
br.br480{display:inline;}
br.br480-non{display:none;}

}

/********************グローバルメニュー　ここから********************/

/* navigation SP */
#mobile-head{
  display:inline;
  z-index:1;
}
#nav-toggle {
  display: none;
  position: fixed;
  top:30px;
  right:30px;
  width: 30px;
  height: 34px;
  cursor: pointer;
  box-sizing: border-box;
  transition:0.3s ease;
}
#nav-toggle div {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background:#fff;
left: 50%;
transform: translateX(-50%);
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top:calc(50% - 5px);}
#nav-toggle span:nth-child(3) {top:calc(100% - 10px);}

header.is_scroll #nav-toggle span{background:#273343;}

#navigation {
display:block;
margin-top: 0;
z-index:0;
}
#mobile-head {
width: 70px;
height: 70px;
position: relative;
transition:0.3s ease;
}

nav#nav {
  visibility:hidden;
  position: fixed;
  top:0;
  right:0;
  width:100%;
  height:100vh;    
  padding-top:100px;
  transition: 0.5s ease-in-out;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(135deg,rgba(213, 232, 251, 1), rgba(255, 243, 237, 1));
  opacity:0;
}
.open nav#nav {
  visibility:inherit;
  opacity:1;
}
nav#nav ul.menu {
  position:relative;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:0 auto;
  width:78.125vw;
  opacity:0;
}
.open nav#nav ul.menu{opacity:1;}
nav#nav ul.menu li{
  display:block;
  position:relative;
  width:calc(100% / 5);
}
nav#nav ul.menu li a{
  position:relative;
  display:table;
  color:#197EE3;
  font-size:max(2.083vw,24px);
  font-weight:900;
  line-height:1;
  transition:0.3s ease;
  padding-bottom:7px;
}
nav#nav ul.menu > li > a{font-family: 'Roboto';}

nav#nav ul.menu li a::before {
  background: #197EE3;
  content: '';
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
nav#nav ul.menu li a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
nav#nav ul.menu li a.entry{color:#FF1F1F;}
nav#nav ul.menu li a.entry::before{background:#FF1F1F;}

/*サブメニュー*/
nav#nav div.sub{padding-top:30px;}
nav#nav div.sub ul li{width:auto;}
nav#nav div.sub ul li + li{margin-top:15px;}
nav#nav div.sub ul li a{
  position:relative;
  color:#273343;
  font-size:max(1.0416vw,14px);
  font-weight:500;
  text-decoration:none;
  transition:0.3s ease;
}
nav#nav div.sub ul li a::before {
  background: #273343;
  height: 2px;
}
nav#nav div.sub + a{margin-top:50px;}

#nav-toggle {display: block;}	

/* ハンバーガー */
.open #nav-toggle span{
  background:#273343;
  border-radius:0;
}
.open #nav-toggle span:nth-child(1) {
left: 0px;
top: 13px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
left: 0px;
top: 13px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

@media screen and (max-width:1536px){

nav#nav ul.menu {width:96.875vw;}

}

@media screen and (max-width:1280px){

nav#nav ul.menu > li:first-child{
  width:100%;
  margin-bottom:30px;
}  
nav#nav ul.menu li{width:calc(100% / 4);}

}
  
@media screen and (max-width:768px){

#nav-toggle {
  top:30px;
  right:25px;
  width: 25px;
  height: 30px;
}
nav#nav ul.menu {
  display:block;
  width:100%;
  height:90%;
  padding:0 30px 50px;
  overflow-y: scroll;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
}
nav#nav ul.menu li{width:auto;}
nav#nav ul.menu li + li{margin-top:30px;}
nav#nav ul.menu > li:first-child{margin-bottom:0;}
nav#nav ul.menu li a{font-size:30px;}

/*サブメニュー*/
nav#nav div.sub{padding-top:15px;}
nav#nav div.sub + a{margin-top:30px;}

}


/* フッター上　リンク */
div.f-bnr{
  display:flex;
  justify-content: flex-start;
}
a.full-bnr{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  color:#fff;
  padding:2.5%;
  width:50%;
  height:clamp(400px,26.04vw,500px);
  overflow:hidden;
}
a.full-bnr span.jp{
  color:#fff;
  font-size:max(1.0416vw,12px);
  font-weight:600;
  line-height:1;
}
a.full-bnr h2{
  position:relative;
  font-size:clamp(50px,3.645vw,70px);
  font-weight:900;
  padding-bottom:15px;
}
a.full-bnr h2::before {
  background: #fff;
  content: '';
  width: 100%;
  height: clamp(3px,0.2604vw,5px);
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
a.full-bnr:hover h2::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
a.job-list img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:inline-block;
  max-width:initial;
  height:clamp(440px,28.645vw,1000px);
  z-index:-1;
  transition:0.3s ease-in-out;
}
a.job-list:hover img{transform:translate(-50%,-50%) scale(1.1);}
a.full-bnr::after{
  position:absolute;
  content:"";
  right:30px;
  bottom:30px;
  display:inline-block;
  width:30px;
  height:30px;
  background:url('../../img/recruit/icon/arrow-i-wht.svg') center/contain no-repeat;
}
a.entry-form{background: linear-gradient(90deg, rgba(255, 31, 31, 1), rgba(255, 92, 20, 1));}


/* フッター */
footer{padding-bottom:30px;}

div.area.contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(75px,5.208vw,100px) 30px;
  background:linear-gradient(135deg,rgba(213, 232, 251, 1), rgba(255, 243, 237, 1));
}
div.area.contact span.jp,
div.area.contact h2,div.area.contact h2 + p{
  color:#197EE3;
  text-align:center;
}
div.btns-wrap{
  display:flex;
  justify-content:space-between;
  width:max(52.08vw,1000px);
  margin:50px auto 0;
}
div.btns-wrap div{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:calc((100% - 50px)/2);
}

div.btns-wrap div img{height:100px;}
div.btns-wrap div.mail.full{width:100%;}
div.btns-wrap div.mail img{
  position:relative;
  left:15px;
}
div.btns-wrap div span.catch{
  font-weight:500;
  letter-spacing:0.25pt;
  padding-top:15px;
}
div.btns-wrap div a{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:80px;
  color:#273343;
  font-size:20px;
  font-weight:600;
  line-height:1;
  letter-spacing:0.25pt;
  margin-top:10px;
  border-radius:40px;
  background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  transition:0.3s ease;
}
div.btns-wrap div a:hover{
  color:#fff;
  background:#197EE3;
}
div.btns-wrap div a::after{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  right:25px;
  width:30px;
  height:30px;
  background:url('../../img/recruit/icon/arrow-i.svg') center/contain no-repeat;
  transition:0.3s ease;
}
div.btns-wrap div a:hover::after{right:10px;}

#footer{
  display:flex;
  justify-content:space-between;
  width:max(52.08vw,1000px);
  padding:clamp(75px,5.208vw,100px) 30px;
  margin:0 auto;
}
#footer div.nav{width:55%;}
#footer div.address{width:42%;}

#footer div.nav ul li{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
}
#footer div.nav ul li + li{margin-top:max(2.604vw,30px);}
#footer div.nav a{position:relative;}
#footer div.nav a.toplink{
  font-family: 'Roboto';
  color:#197EE3;
  font-size:30px;
  font-weight:900;
}
#footer div.nav a::before {
  background: #273343;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
#footer div.nav a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
#footer div.nav a.toplink::before {
  background: #197EE3;
  height: 3px;
}

#footer div.nav ul li ul{width:50%;}
#footer div.nav ul li ul li{margin-top:10px;}
#footer div.nav ul li ul li a{
  color:#273343;
  font-size:14px;
  font-weight:600;
}

#footer div.address img{height:60px;}
#footer div.address p.name{
  font-weight:600;
  padding-top:15px;
}
#footer div.address p.min{
  font-size:14px;
  letter-spacing:0.25pt;
}
#footer div.address p.min a{
  display:table;
  color:#273343;
  text-decoration:underline;
}
#footer div.address p.min a:hover{text-decoration:none;}
#footer div.address a.btn{margin-top:max(2.604vw,30px);}
#footer div.address a.btn + a.btn{margin-top:15px;}

p#copyright{
  font-family: 'Roboto';
  text-align:center;
}

@media screen and (max-width:1024px){

/* フッター上　リンク */
div.f-bnr{flex-direction:column;}
a.full-bnr{
  width:100%;
  height:350px;
}
a.job-list img{
  max-width:100%;
  height:auto;
}

div.btns-wrap div{width:calc((100% - 30px)/2);}
div.btns-wrap div a{
  height:60px;
  font-size:16px;
  border-radius:30px;
}
div.btns-wrap div a::after{right:15px;}

#footer{
  flex-direction:column;
  width:auto;
}  
#footer div.nav,
#footer div.address{width:auto;}
#footer div.address{
  padding-top:50px;
  margin-top:50px;
  border-top:1px solid #e0e0e0;
}

#footer div.nav ul li{flex-direction:column;}
#footer div.nav ul li ul{width:auto;}  

}
@media screen and (max-width:768px){

a.full-bnr{
  justify-content:flex-end;
  padding:5% 5% 10%;
  height:clamp(667px,133vw,1024px);
}  
a.full-bnr::after{
  right:15px;
  bottom:15px;
  width:30px;
  height:30px;
}
a.job-list img{
  object-fit: cover;
  max-width:101%;
  min-height:667px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
a.job-list:hover img{transform:translate(-50%,-50%) scale(1.1);}

div.area.contact h2,div.area.contact h2 + p{text-align:left;}
div.btns-wrap{
  flex-direction:column;
  width:320px;
}
div.btns-wrap div{width:auto;}
div.btns-wrap div + div{margin-top:50px;}
div.btns-wrap div img{height:75px;}
div.btns-wrap div.mail img{
  height:50px;
  left:7px;
}
div.btns-wrap div span.catch{font-size:12px;}

}
@media screen and (max-width:480px){

a.full-bnr{padding:75px 30px;}

}

/* スライド */
div.slide-wrap{position:relative;}
div.swiper-wrapper{
display:flex;
justify-content:space-between;
}
div.default img{display:block;}
.swiper-android .swiper-slide, .swiper-wrapper {transform: translate3d(0px, 0, 0)}
.swiper-pointer-events {touch-action: pan-y;}
.swiper-pointer-events.swiper-vertical {touch-action: pan-x;}
.swiper-slide {
flex-shrink: 0;
transition-property: transform;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {transition-timing-function: ease-out;}
.swiper-container-fade .swiper-slide {transition-property: opacity;}
.swiper-button-lock {display: none}
.swiper-pagination {
position: relative;
display:flex;
justify-content:flex-end;
align-items:center;
bottom:0;
text-align: center;
transition: 0.3s opacity;
transform: translate3d(0, 0, 0);
z-index: 1;
margin-top:20px;
}
.swiper-pagination-bullet {
width: 30px;
height: 5px;
display: inline-block;
background: #ccc;
transition: 0.3s ease;
transform:scale(1);
}
.swiper-pagination-bullet + .swiper-pagination-bullet{margin-left:10px;}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {cursor: pointer}
.swiper-pagination-bullet:only-child {display: none !important}
.swiper-pagination-bullet-active {
opacity: 1;
background:#273343;
}

div.main{
  position:relative;
  height:max(41.666vw,800px);
  max-height:100vh;
  background:url('../../img/recruit/front/main.png') center top /cover no-repeat;
}
@supports (background: url('../../img/recruit/front/webp/main.webp')) {
  div.main {
    background: url('../../img/recruit/front/webp/main.webp') center top /cover no-repeat;
  }
}

div.main div.title{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:clamp(1000px,78.125vw,1500px);
  height:100%;
  padding:0 30px;
  margin:0 auto;
}
div.main span.jp{
  color:#fff;
  font-size:max(1.0416vw,12px);
  text-shadow:0 0 3px rgba(0,0,0,0.1);
  font-weight:600;
  line-height:1;
}
div.main h1{
  font-family:"Roboto";
  color:#fff;
  font-size:clamp(70px,5.208vw,100px);
  text-shadow:0 0 6px rgba(0,0,0,0.1);
  line-height:1;
  font-weight:900;
  padding-top:10px;
}
div.main p{
  color:#fff;
  font-size:max(1.0416vw,14px);
  text-shadow:0 0 6px rgba(0,0,0,0.1);
  padding-top:15px;
}
div.scroll-icon{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  display:block;
  margin:0 auto;
  color:#fff;
  line-height:1;
  font-weight:600;
  letter-spacing:0.25pt;
  text-align:center;
  width:auto;
  height:80px;
  z-index:0;
}
div.scroll-icon::after {
  position:relative;
  content: "";
  display: block;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  height: 42px;
  width: 1px;
  background-color: #fff;
  animation: scroll-line 1.5s ease 1s infinite normal;
}
@keyframes scroll-line {
  0% {
        height: 42px;
        margin-top: 4px;
  }
  50% {
        height: 0px;
        margin-top: 53px;
  }
  51% {
        height: 0px;
        margin-top: 4px;
  }
  100% {
        height: 42px;
        margin-top: 4px;
  }
}

@media screen and (max-width:768px){

div.main{
  height:clamp(667px,133vw,1024px);
  padding-bottom:100px;
  max-height:initial;
  background:url('../../img/recruit/front/webp/main-sp.webp') center top /cover no-repeat;
}

div.main div.title{
  flex-direction:column;
  justify-content:flex-end;
  width:100%;
}
div.main span.jp{font-size:max(2.604vw,14px);}
div.main h1{font-size:max(13.02vw,60px);}
div.main p{font-size:max(2.083vw,14px);}

div.scroll-icon{
  bottom:0;
  height:80px;
}

}


div.area{position:relative;}
div.area.col01{background:linear-gradient(135deg,rgba(213, 232, 251, 1), rgba(255, 243, 237, 1));}

h2{
  font-family:"Roboto";
  font-size:70px;
  font-weight:900;
  line-height:1;
  padding-top:10px;
}
h2 + p{margin-top:15px;}
h2 + div,
h2 + img{margin-top:clamp(15px,1.302vw,30px);}

h3{
  font-size:24px;
  font-weight:600;
  line-height:1.5;
}
h3 + p{margin-top:15px;}

span.jp{
  display:block;
  font-size:16px;
  line-height:1.5;
  font-weight:600;
}
p{font-size:16px;}
p + p{margin-top:1em;}
p + p.min{margin-top:0.5em;}

p.large{font-size:20px;}
p.large + p{margin-top:15px;}

div + p{margin-top:1em;}

div.content{
  position:relative;
  width:clamp(1000px,78.125vw,1500px);
  padding:clamp(75px,5.208vw,100px) 30px;
  margin:0 auto;
}
div.content + div.content{padding-top:0;}

div.area a.btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:280px;
  height:50px;
  color:#273343;
  font-size:14px;
  line-height:1;
  font-weight:600;
  letter-spacing:0;
  padding:0 0 0 25px;
  border-radius:25px;
  background:#fff;
  box-shadow:0 0 6px rgba(0,0,0,0.2);
  margin-top:clamp(30px,2.604vw,50px);
  transition:0.3s ease;
}
div.area a.btn::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  right:15px;
  width:30px;
  height:30px;
  background:url('../../img/recruit/icon/arrow-i.svg') center/contain no-repeat;
  transition:0.3s ease;
}
div.area a.btn:hover{
  color:#fff;
  background:#197EE3;
}
div.area a.btn:hover::before{right:10px;}

div.area a.txt-link{
  color:#197EE3;
  text-decoration:underline;
}
div.area a.txt-link:hover{text-decoration:none;}


@media screen and (max-width:768px){

h2{font-size:max(6.835vw,48px);}
h3{font-size:max(2.34vw,18px);}

span.jp{font-size:max(2.343vw,12px);}
p{font-size:max(2.083vw,14px);}
p.large{font-size:max(3.125vw,16px);}

h2.center,
span.jp.center,
p.center{text-align:left;}

}