@charset "UTF-8";

/******************************
  common
******************************/
.imgbox{
  text-align: center;
}
.link-txtunder,
.singlecontent a{
  color: #004B9E;
  text-decoration: underline;
}
.link-txtunder:hover,
.singlecontent a:hover{
  text-decoration: none;
}
.singlecontent p,
.txtbox p:not(:last-of-type){
  margin-bottom: 1rem;
}
.kome{
  padding-left: 2rem;
  position: relative;
}
.kome::before{
  content:"※";
  position: absolute;
  top: 0;
  left: 0;
}

/******************************
  Popup
******************************/
.popbox{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: .5s;
  height: 100%;
  width: 100%;
  z-index: 1000;
}
.popbox.open{
  /* background: rgba(0,0,0,.8); */
  pointer-events: all;
  opacity: 1;
  z-index: 3;
}
.popbg{
  background: rgba(0,0,0,.8);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
body.popactive{
  overflow: hidden !important;
}
@media only screen and (max-width: 1023px) {
  .popbox{
    position: fixed;
    height: 100lvh;
    width: 100vw;
  }
}

/******************************
  Animation
******************************/
@keyframes arrowAnime {
  0% {
    fill: transparent;
  }
  100% {
    fill: #fff;
  }
}
@keyframes arrowAnime2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: #000;
  }
}
@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes SlideInLeft {
  0% {
    transform: translate3d(-100%,0,0) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(5deg);
  }
  100% {
    transform: translateZ(0);
  }
}

.ttlAnime1.Animeload,
.ttlAnime2.Animeload{
  opacity: 0;
}
.ttlAnime1.Animeload.active{
  animation: SlideInLeft 1s forwards;
  opacity: 1;
}
.ttlAnime2.Animeload.active{
  animation: FadeIn 1.5s forwards;
  opacity: 1;
}

/******************************
  Youtube
******************************/
.youtube .imgbox{
  aspect-ratio: 16/9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
}
.youtube .imgbox::before{
  content: "";
  background: rgba(0, 23, 31, .5);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.youtube .imgbox i{
  color: #FF0000;
  font-size: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}
.youtube .imgbox i::after{
  content: "";
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 20px;
  width: 20px;
  z-index: -1;
}
.youtube iframe{
  aspect-ratio: 16/9;
  display: none;
}
.youtube.active iframe{
  display: block;
}

/******************************
  inner
******************************/

.inner{
  height: 100%;
  width: 100%;
}
.inner2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5rem;
  height: 100%;
  width: 100%;
}
.inner3{
  padding: 0 5rem ;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: auto;
  width: 100%;
}

@media only screen and (max-width: 1180px) {
    
}
@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 820px) {
    
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 767px) {
  .inner2,
  .inner3{
    padding: 0 3rem;
  }
}

/******************************
  flex
******************************/
.flexbox1{
  display: flex;
  flex-wrap: wrap;
}
.flexbox2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flexbox3{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex{
  display: flex;
}
.frr{
  flex-direction: row-reverse;
}
.fac{
  align-items: center;
}
.fast{
  align-items: stretch;
}
.fafe{
  align-items: flex-end;
}
.fafs{
  align-items: flex-start;
}
.fabl{
  align-items: baseline;
}

.fbox,
.ftxtbox,
.fimgbox{
  width: 48%;
}
.fimgbox{
  text-align: center;
}

/******************************
  ttl
******************************/
.content_ttl p{
  font-size: 1.8rem;
  font-weight: bold;
}

/******************************
  btn
******************************/
.arrowbtn{
  margin-top: 2rem;
  text-align: right;
}
.arrowbtn a{
  display: inline-block;
  opacity: 1 !important;
}
.arrowbtn a:hover svg .arrow{
  animation: arrowAnime .3s linear ;
  fill: #fff;
}
.morebtn1{
  text-align: right;
} 
.morebtn1 a{
  background: #fff;
  border: 1px solid #000D13;
  display: inline-block;
  color: #000;
  min-width: 280px;
  padding: 1rem ;
  text-align: center;
  transition: .5s;
}
.morebtn1 a:hover{
  background: #000D13;
  color: #fff;
}

.linebtn{
  text-align: center;
}
.linebtn a{
  background: #fff;
  border: 1px solid #fff;
  color: #06C755;
  display: block;
  opacity: 1 !important;
  padding: 1rem ;
  position: relative;
  text-align: center;
}
.linebtn a:hover{
  background: #06C755;
  color: #fff;
}
.linebtn a::before {
  content: "\f124";
  color: #06C755;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 42%;
  right: 2rem;
  transform: rotate(45deg) translateY(-50%);
}
.linebtn a:hover::before{
  color: #fff;
}


/******************************
  tbl
******************************/
.tblbox1 .tbl{
  border: 1px solid #526D82;
  margin-top: .5rem;
}
.tblbox1 .tblttl{
  background: #526D82;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
}
.tblbox1 .tblcontent{
  padding: 1rem;
  width: calc(100% - 100px);
}
@media only screen and (max-width: 1180px) {
    
}
@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 820px) {
    
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 767px) {
  .tblbox1 .tblttl,
  .tblbox1 .tblcontent{
    width: 100%;
  }
  .tblbox1 .tblttl{
    padding: .5rem 0;
  }
}

/******************************
  header
******************************/
.cmnhead{
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  mix-blend-mode: difference;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.cmnhead .logo{
  max-width: 180px;
  margin-right: 1rem;
}
.cmnhead .frontlogo{
  opacity: 0;
  pointer-events: none;
  width: 5px;
}
.cmnhead .logo a{
  display: block;
}
.cmnhead .cmnnav li a{
  margin: 0 1rem;
  padding-top: 1rem;
  position: relative;
}
.cmnhead .cmnnav li a::before{
  content: "";
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #FFFFFF transparent transparent transparent;
  opacity: 0;
  position: absolute;
  top: -.5rem;
  left: 50%;
  transform: translateX(-50%);
  transition: .5s;
  height:0;
  width:0;
}
.cmnhead .cmnnav li a:hover::before,
.cmnhead .cmnnav li a.nowpage::before{
  opacity: 1;
}
.navtoggle,
.splogo{
  display: none;
}
@media only screen and (max-width: 1180px) {
    
}
@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 1023px) {
  .navtoggle,
  .splogo{
    display: block;
  }
  .cmnhead{
    padding: 0;
    position: static;
    mix-blend-mode: normal;
  }
  .cmnhead .logo{
    margin: 0;
    position: absolute;
    top: 0;
    left: 1rem;
    z-index: 5;
  }
  .cmnhead .navbox{
    position: absolute;
    top: 0;
    right: 0;
  }
  .navtoggle {
    background: #fff;
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    height: 50px;
    width: 50px;
    transition: 1s;
    z-index: 999;
  }
  .navtoggle svg {
    height: 50px;
    position: absolute;
    width: 50px;
  }
  .navtoggle .line {
    fill: none;
    stroke: #000;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50%;
    transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms,
      transform 500ms 200ms;
  }
  .navtoggle .x {
    transform: scale(0);
    transition: transform 400ms;
  }
  .navtoggle .x .line {
    stroke: #fff;
    stroke-width: 5.5px;
  }
  .navtoggle .line1 {
    stroke-dasharray: 21 185.62753295898438;
    transition-delay: 0;
  }
  .navtoggle .line2 {
    stroke-dasharray: 21 178.6514129638672;
    transition-delay: 30ms;
  }
  .navtoggle .line3 {
    stroke-dasharray: 21 197.92425537109375;
    transition-delay: 60ms;
  }
  .navtoggle .line4 {
    stroke-dasharray: 21 190.6597137451172;
    transition-delay: 90ms;
  }
  .navtoggle .line5 {
    stroke-dasharray: 21 208.52874755859375;
    transition-delay: 120ms;
  }
  .navtoggle .line6 {
    stroke-dasharray: 21 186.59703063964844;
    transition-delay: 150ms;
  }
  .navtoggle.active{
    background-color: rgba(0,0,0,.8);
  }
  .navtoggle.active .line1 {
    stroke-dasharray: 5 185.62753295898438;
    stroke-dashoffset: -155px;
  }
  .navtoggle.active .line2 {
    stroke-dasharray: 5 178.6514129638672;
    stroke-dashoffset: -150px;
  }
  .navtoggle.active .line3 {
    stroke-dasharray: 5 197.92425537109375;
    stroke-dashoffset: -190px;
  }
  .navtoggle.active .line4 {
    stroke-dasharray: 5 190.6597137451172;
    stroke-dashoffset: -180px;
  }
  .navtoggle.active .line5 {
    stroke-dasharray: 5 208.52874755859375;
    stroke-dashoffset: -160px;
  }
  .navtoggle.active .line6 {
    stroke-dasharray: 5 186.59703063964844;
    stroke-dashoffset: -186px;
  }
  .navtoggle.active .x {
    transform: scale(1);
    transition: transform 400ms 250ms;
  }
  .cmnhead .cmnnav{
    background: rgba(0,0,0,.8);
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    /* transition: 1s; */
    transition: .5s;
    transform: scale(0);
    transform-origin: top right;
    height: 100vh;
    width: 100vw;
    z-index: 99;
  }
  .cmnhead .cmnnav.active{
    pointer-events: all;
    transform: scale(1);
  }
  .cmnhead .cmnnav .navbox{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10rem;
    transition: .5s;
    transform: scale(0);
    height: 100vh;
    width: 100vw;
  }
  .cmnhead .cmnnav.active .navbox{
    transform: scale(1);
    transition: .8s .5s;
    transition: .5s .3s;
  }
  .cmnhead .cmnnav ul{
    display: block;
    margin-top: 2rem;
  }
  .cmnhead .cmnnav li a{
    display: block;
    font-size: 1.8rem;
    margin: 1rem;
    padding-top: 0;
    text-align: center;
  }
  .cmnhead .cmnnav .navbox li a:hover::before,
  .cmnhead .cmnnav .navbox li a.nowpage::before{
    background: #fff;
    border: none;
    top: auto;
    bottom: 0;
    height: 2px;
    width: 100%;
  }
}
@media only screen and (max-width: 820px) {
    
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 767px) {
    
}

/******************************
  footer
******************************/
.fotlinks{
  margin: 4rem 0;
}
.fotlinks div a{
  display: block;
  padding: .5rem;
  margin: .5rem 10rem .5rem 0;
}
.fotsns a{
  background: transparent;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 280px;
  opacity: 1 !important;
  padding: 1rem;
  margin-bottom: 2rem;
  transition: .5s;
}
.fotsns a:hover{
  background-color: rgba(0 13, 19, .5);
}
.fotsns a i{
  display: block;
  font-size: 2.4rem;
  margin-right: 0.5rem;
}
.fotsns a span{
  line-height: 2;
}

.pageToTop{
  position: absolute;
  right: 0;
  bottom: 5rem;
  overflow: hidden;
  z-index: 1;
}
.pageToTop a{
  display: block;
  list-style: 1;
  position: relative;
  padding-right: 10rem;
}
.pageToTop a::before{
  content: "";
  background: #fff;
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
  height: 2px;
  width: 10rem;
}

.page-fotter.pagesec {
  width: 70%;
}
.page-fotter.pagesec .pscontent{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  padding: 0 15rem;
  width: 100%;
}

.recruit-fotter.pagesec {
  width: 130%;
}
.recruit-fotter.pagesec .pslink{
  width: 23.333%;
}
.recruit-fotter.pagesec .pscontent{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  padding: 0 15rem;
  width: 53.333%;
}
.recruit-fotter.pagesec .pslink_l3 li:nth-of-type(1){
  background: url(../images/common/link_staff.webp) no-repeat center / cover;
}
.recruit-fotter.pagesec .pslink_l3 li:nth-of-type(2){
  background: url(../images/common/link_internship.webp) no-repeat center / cover;
}
.recruit-fotter.pagesec .pslink_l3 li:nth-of-type(3){
  background: url(../images/common/link_tasuku_fukushi.webp) no-repeat center / cover;
}
.recruit-fotter.pagesec .pslink_l3_2 li:nth-of-type(1){
  background: url(../images/common/link_system.webp) no-repeat center / cover;
}
.recruit-fotter.pagesec .pslink_l3_2 li:nth-of-type(2){
  background: url(../images/common/link_information_session.webp) no-repeat center / cover;
}
.recruit-fotter.pagesec .pslink_l3_2 li:nth-of-type(3){
  background: url(../images/common/link_recruit.webp) no-repeat center / cover;
}
@media only screen and (max-width: 1180px) {
    
}
@media only screen and (max-width: 1080px) {
  .fotlinks {
    margin: 2rem 0;
  }
  .fotlinks div a{
    margin: .5rem 4rem .5rem 0;
  }
  .pageToTop{
    bottom: 2rem;
  }
}
@media only screen and (max-width: 1024px) {
  .page-fotter .pscontent{
    padding: 0 5rem;
  }
}
@media only screen and (max-width: 1023px) {
  /* .cmnfot.page-fotter{
    height: 800px;
  } */
  .cmnfot.page-fotter .pslink {
    display: flex;
    height: 20%;
    width: 100%;
  }
  .cmnfot.page-fotter .pslink_l3 li {
    width: 33.3333%;
    height: 100%;
  }
  .cmnfot.page-fotter .pscontent {
    margin-left: auto;
    max-width: 480px;
    padding: 0 5rem;
    /* height: 70%; */
    width: 100%;
  }
  .pageToTop {
    right: auto;
    bottom: 0rem;
    left: 0;
    writing-mode: tb-rl;
  }
  .pageToTop a{
    padding-right: 0;
    padding-bottom: 10rem;
  }
  .pageToTop a::before{
    top: auto;
    right: auto;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10rem;
  }

  .recruit-fotter.pagesec{
    height: auto;
  }
  .recruit-fotter.pagesec .pslink{
    display: flex;
    height: auto;
    width: 100%;
  }
  .recruit-fotter.pagesec .pslink_l3 li {
    height: 200px;
  }
  .recruit-fotter.pagesec .pscontent {
    max-width: 480px;
    padding: 0 5rem;
    height: 720px;
    width: 100%;
  }
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 767px) {
  .cmnfot.page-fotter {
    height: 100%;
  }
  .cmnfot.page-fotter .pslink {
    flex-wrap: wrap;
    height: 400px;
    width: 100%;
  }
  .cmnfot.page-fotter .pslink_l3 li {
    height: 33.3333%;
    width: 100%;
  }
  .cmnfot.page-fotter .pscontent {
    height: 100%;
    padding: 7rem 2rem 5rem 7rem;
  }
  .fotlinks div a {
    margin: 0.5rem 1.5rem;
  }

  .recruit-fotter.pagesec .pslink{
    flex-wrap: wrap;
  }
  .recruit-fotter.pagesec .pscontent {
    margin: 0 0 0 auto;
    max-width: 340px;
    height: 800px;
    padding: 0 3rem;
  }
}