@charset "UTF-8";
/* CSS Document */
/*  HOME メインビジュアル　トリミング　*/
#main-visual, #sub-visual {
  position: relative;
}
.topslider {
  margin: 0;
  padding: 0;
  list-style: none;
}
.topslider li {
  text-align: center;
}
.roundtrim .kv {
  position: relative;
  overflow: hidden;
}
#main-visual .topslider li img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 8; /* ←やや深めに。好みで16/8 でもOK */
}
#sub-visual .topslider li img {
  display: block;
  width: 100%;
  /*  height: 360px;*/
  height: 400px;
  object-fit: cover;
  aspect-ratio: 16 / 8; /* ←やや深めに。好みで16/8 でもOK */
}
.arch-container {
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.arch-svg {
  width: 100%;
  display: block;
}
.roundtrim .kv .img img {
  width: 100%;
}
@media(min-width:768px) and (max-width:1180px) {
  .roundtrim .kv {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
  }
  .roundtrim .kv .text .slogan {
    position: absolute;
    width: calc(330/750 * 100vw);
    top: 40%;
    right: 3vw;
    z-index: 100;
  }
  .roundtrim .kv .in .img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(0%, -1%);
    max-width: none;
    width: 100%;
    height: auto;
  }
  .roundtrim .kv .img img {
    width: 100%;
  }
}
/*
@media(max-width:767px) {
  .roundtrim .kv {
    width: 100%;
    height: auto;
    margin: 0 auto 150px;
    position: relative;
  }
  .roundtrim .kv .in .img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(0%, 0%);
    max-width: none;
    width: auto;
    height: calc(563/750 * 100vw);
  }
  .roundtrim .kv .img img {
    height: 100%;
  }
    #main-visual .topslider li img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
}
*/
/*from HSG 20210922*/
.kv {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /*  overflow: hidden;
*/ z-index: 10;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .kv {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}
.btn-recruit, .btn-ukestukechu {
  z-index: 150;
}
.btn-recruit img {
  margin: 6px 0;
}
@media (min-width: 768px) {
  .heading-decorate .divider {
    display: inline-block;
  }
}
.btn-recruit a:hover {
  opacity: 0.6;
  transition: 0.4s;
}
#main-visual .btn-recruit, #sub-visual .btn-recruit {
  position: absolute;
  right: 20px;
  width: 280px;
}
#main-visual .btn-recruit {
  /*top: calc(470/1400 * 100vw);ボタンが2つの場合*/
top: calc(555/1400 * 100vw);
}
#sub-visual .btn-recruit {
  top: 250px;
}
#main-visual .btn-ukestukechu, #sub-visual .btn-ukestukechu {
  position: absolute;
  left: 20px;
  width: 222px;
}
#main-visual .btn-ukestukechu {
  top: calc(460/1400 * 100vw);
}
#sub-visual .btn-ukestukechu {
  top: 220px;
}
@media (max-width: 1199px) {
  #main-visual .btn-recruit {
    top: calc(555/1400 * 100vw);
    width: 290px;
  }
  #sub-visual .btn-recruit {
    top: calc(200/1400 * 100vw);
    width: 290px;
  }
}
@media (max-width: 979px) {
  #main-visual .btn-recruit {
    top: 320px;
    right: 10px;
    width: 220px;
  }
  #sub-visual .btn-recruit {
    top: 280px;
    right: 10px;
    width: 220px;
  }
  #main-visual .btn-ukestukechu {
    position: absolute;
    top: 260px;
    left: 10px;
    width: 200px;
  }
}
@media (max-width: 767px) {
  .kv {
    position: relative;
    width: calc(750/750 * 100vw);
    height: auto;
    margin: 0 auto;
  }
  .roundtrim .kv {
    width: 100%;
    height: auto;
    margin: 0 auto 150px;
    position: relative;
  }
  .roundtrim .kv .in .img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(0%, 0%);
    max-width: none;
    width: auto;
    height: calc(563/750 * 100vw);
  }
  .roundtrim .kv .img img {
    height: 100%;
  }
  #main-visual .topslider li img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 10;
  }
  #main-visual .btn-recruit {
    top: calc(450/750 * 100vw);
    right: 10px;
    width: calc(330/750 * 100vw);
  }
  #main-visual .btn-ukestukechu {
    top: calc(360/750 * 100vw);
    left: 10px;
    width: calc(330/750 * 100vw);
  }
}
.btn-recruit a:last-child {
    display: none;
}
#sub-visual .kv {
  position: relative;
  overflow: hidden;
  /*  height: 240px;*/
  height: 400px;
  width: 100%;
}
.kv .ttl-opaque {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 330px;
  height: 90px;
  background-color: hsla(0, 0%, 100%, 0.50);
  mix-blend-mode: normal;
  margin: 0px auto;
  z-index: 2;
}
#sub-visual .kv .white-opaque {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 136px;
  background-color: hsla(0, 0%, 100%, 0.85);
  mix-blend-mode: normal;
  margin: 0 auto;
  z-index: 2;
}
.parallax-container.kv-narrow-middle .white-opaque {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 136px;
  background-color: hsla(0, 0%, 100%, 0.85);
  mix-blend-mode: normal;
  margin: 0 auto;
  z-index: 2;
}
.kv .white-opaque p.text-center, .parallax-container.kv-narrow-middle .white-opaque p.text-center {
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
}
.kv .ttl-pink, .kv .ttl-plate, .kv .ttl-purple, .kv .ttl-sky, .kv .ttl-forest {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 330px;
  height: 90px;
  mix-blend-mode: multiply;
  margin: 0px auto;
  z-index: 10;
}
.kv .ttl-pink {
  background-color: hsla(8, 94%, 74%, 1.00);
}
.kv .ttl-plate {
  background-color: hsla(33, 99%, 65%, 1.00);
}
.kv .ttl-purple {
  background-color: hsla(258, 75%, 69%, 1.00);
}
.kv .ttl-sky {
  background-color: hsla(199, 67%, 53%, 1.00);
}
.kv .ttl-forest {
  background-color: hsla(148, 42%, 53%, 1.00);
}
.kv h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.4;
  color: #fff;
  margin: 0px auto;
  mix-blend-mode: normal;
  z-index: 15;
}
#sub-visual .kv .ttl-form, #sub-visual .kv .ttl-form_pink, #sub-visual .kv .ttl-form_green {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  font-size: 26px;
  letter-spacing: 0;
  text-align: center;
  color: #151515;
  line-height: 1.4;
  font-weight: 300;
  background-color: hsla(0, 0%, 100%, 0.70);
  padding: 20px;
  margin: 0px auto;
  z-index: 2;
}
#sub-visual .kv .ttl-form_pink {
  color: #fff;
  background-color: hsla(0, 78%, 73%, 0.80);
}
#sub-visual .kv .ttl-form_green {
  color: #fff;
  background-color: hsla(146, 45%, 58%, 0.80);
}
.lead_copy {
  text-align: center;
}
@media (max-width: 979px) {
  #sub-visual .kv .ttl-form {
    /*    width: calc(360/1000 * 100vw);
*/ font-size: 22px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.4;
    font-weight: 300;
    background-color: hsla(0, 0%, 100%, 0.70);
    padding: 20px 5vw;
    margin: 0px auto;
    z-index: 2;
  }
  #sub-visual .kv p.text-center {
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .parallax-container .col-lg-6.white-opaque {
    width: calc(760/1000 * 100vw);
    height: auto;
    margin: 0 auto;
    z-index: 2;
  }
}
@media (max-width: 767px) {
  .parallax-container {
    width: 100%;
  }
  #sub-visual .kv .ttl-form {
    width: calc(600/750 * 100vw);
    font-size: 22px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.4;
    font-weight: 300;
    background-color: hsla(0, 0%, 100%, 0.70);
    padding: 20px;
    margin: 0px auto;
    z-index: 2;
  }
  .kv .ttl-opaque {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(550/1100 * 100vw);
    height: calc(150/1100 * 100vw);
    background-color: hsla(0, 0%, 100%, 0.50);
    mix-blend-mode: normal;
    margin: 0px auto;
    z-index: 2;
  }
  .kv .ttl-pink, .kv .ttl-plate, .kv .ttl-purple, .kv .ttl-sky, .kv .ttl-forest {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(550/1100 * 100vw);
    height: calc(150/1100 * 100vw);
    /*background-color: hsla(340, 77%, 76%, 1.00);
    mix-blend-mode: multiply;*/
    margin: 0px auto;
    z-index: 10;
  }
  .kv h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(660/900 * 100vw);
    font-size: 22px;
  }
  #sub-visual .kv .ttl-form {
    font-size: calc(22/450 * 100vw);
  }
  #sub-visual .kv .white-opaque {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 26%);
    width: calc(660/750 * 100vw);
    height: calc(280/750 * 100vw);
    background-color: hsla(0, 0%, 100%, 0.85);
    mix-blend-mode: normal;
    margin: 0 auto;
    z-index: 2;
  }
  .parallax-container.kv-narrow-middle .white-opaque {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(560/750 * 100vw);
    height: calc(220/750 * 100vw);
    background-color: hsla(0, 0%, 100%, 0.85);
    mix-blend-mode: normal;
    margin: 0 auto;
    z-index: 2;
  }
}

.scroll-arrow {
  width: 200px;
  height: auto;
  position: relative;
  margin: 0 auto;
  z-index: 1110;
}
/*アニメーション用CSS*/
.updown {
  /* アニメーションの名前 */
  animation-name: UpDown;
  /* アニメーションの１回分の長さ */
  animation-duration: 1.5s;
  /* アニメーションの回数 */
  animation-iteration-count: infinite;
  /* アニメーションの進行具合 */
  animation-timing-function: ease-in-out;
  /* アニメーション再生の向き */
  animation-direction: alternate;
}
.scroll-arrow img {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  max-width: none;
  width: 50px;
  height: auto;
  z-index: 1500;
}