@charset "UTF-8";
/*-------------------------------------------
共通クラス
-------------------------------------------*/
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: #333a3f;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/*-------------------------------------------
共通のパーツ
-------------------------------------------*/
.u-sectionTitle_en {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 1.5;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #18669e;
  position: relative;
}
.u-sectionTitle_en::before {
  content: "";
  background-image: url(../image/title-image.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 26px;
  height: 27px;
  position: absolute;
  top: 8px;
  left: -36px;
}

.u-sectionTitle_jp {
  font-size: 16px;
  color: #F1C11A;
}

.u-btnLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #5F82B3;
  border-radius: 50px;
  padding: 18px 62px;
  color: #fff;
  font-size: 14px;
  line-height: 1.2857142857;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 821px) {
  .u-btnLink {
    font-size: 16px;
    line-height: 1.4375;
  }
}

.u-btnImg {
  width: 38px;
  height: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 821px) {
  .u-btnImg {
    width: 43px;
    height: 5px;
  }
}

.u-btnLink:hover .u-btnImg {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
/*除算用にmathモジュールをインポート*/
.header {
  width: 100%;
  height: 120px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}
@media screen and (max-width: 821px) {
  .header {
    height: 72px;
    background-color: #fff;
  }
}

.header_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 95.3125%;
  height: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 821px) {
  .header_inner {
    width: 85.7142857143%;
  }
}

.header_logo {
  width: 130px;
  height: auto;
}
@media screen and (max-width: 821px) {
  .header_logo {
    width: 68px;
  }
}

@media screen and (max-width: 821px) {
  .header_nav {
    display: none;
  }
}

.header_items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 36px;
}

.header_itemLink {
  font-weight: 700;
  color: #333a3f;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.header_itemLink:hover {
  opacity: 0.6;
}

.header_hamberger {
  display: none;
}
@media screen and (max-width: 821px) {
  .header_hamberger {
    display: block;
    width: 42px;
    height: 24px;
    position: relative;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    z-index: 20;
  }
}

.header_hamberger span {
  display: block;
  position: absolute;
  width: 42px;
  height: 3px;
  background-color: #18669e;
  border-radius: 3px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.header_hamberger span:nth-child(1) {
  top: -3px;
}
.header_hamberger span:nth-child(2) {
  top: 9px;
}
.header_hamberger span:nth-child(3) {
  top: 21px;
}

.js_active.header_hamberger span:nth-child(1) {
  -webkit-transform: translateY(12px) rotate(-45deg);
          transform: translateY(12px) rotate(-45deg);
}
.js_active.header_hamberger span:nth-child(2) {
  opacity: 0;
}
.js_active.header_hamberger span:nth-child(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
          transform: translateY(-12px) rotate(45deg);
}

.header_mask {
  display: block;
  position: fixed;
  opacity: 1;
  background-image: url(../image/overlay.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: transparent;
  width: 100%;
  height: 100vh;
  top: 72px;
  right: -100%;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.header_maskNav {
  margin-top: 80px;
  margin-left: 48px;
}

.header_maskItems {
  margin-top: 80px;
  color: #18669e;
  font-weight: 700;
}

.header_maskLink {
  display: block;
  margin-bottom: 42px;
}
.header_maskLink:last-of-type {
  margin-bottom: 48px;
}

.header_maskItem_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.header_maskLink-sns:first-of-type {
  width: 33px;
  height: 30px;
}

.header_maskLink-sns:last-of-type {
  width: 33.25px;
  height: 33.25px;
}

.js_active.header_mask {
  right: 0%;
  z-index: 10;
}

/*除算用にmathモジュールをインポート*/
/* ここから記述します。 */
/*-------------------------------------------
スライドレイアウト
-------------------------------------------*/
.slide {
  position: relative;
  width: 100vw;
  height: 720px;
}

@media screen and (min-width: 1390px) {
  .slide {
    height: 900px;
  }
}
/*スライド横のイラスト配置*/
.slide::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -46%;
  left: 0;
  background-image: url(../image/bubble.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: transparent;

  width: 352px;
  height: 559px;
}
@media screen and (max-width: 821px) {
  .slide::before {
    width: 198px;
    height: 320px;
    bottom: -217px;
    background-image:url(../image/bubble-sp.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: transparent;
  }
}

.slide_items {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}
@media screen and (max-width: 821px) {
  .slide_items {
    height: 100vh;
    top: 72px;
  }
}

.slide_item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: slider 15s infinite;
          animation: slider 15s infinite;
}
@media screen and (max-width: 821px) {
  .slide_item {
    height: 100vh;
  }
}

.slide_item:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.slide_item:nth-child(2) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.slide_item:nth-child(3) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}

.slide_img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

/*スライドのアニメーション*/
@-webkit-keyframes slider {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slider {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.slide_titleWrap {
  display: inline-block;
  position: absolute;
  top: 348px;
  left: 100px;
}
@media screen and (max-width: 821px) {
  .slide_titleWrap {
    top: inherit;
    bottom: 86px;
    left: 21px;
  }
}

.slide_title {
  display: inline-block;
  font-size: 40px;
  font-weight: bold;
  color: #18669e;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 821px) {
  .slide_title {
    font-size: 32px;
    letter-spacing: 0.14em;
    line-height: 1.65;
  }
}
.slide_title:first-of-type {
  position: relative;
}
.slide_title:first-of-type::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -35px;
  width: 26px;
  height: 27px;
  background-image: url(../image/title-image.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*-------------------------------------------
「信頼の技術とサポート」レイアウト
-------------------------------------------*/
.support_inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 110px auto 220px;
  width: 84.375%;
  max-width: 1080px;
  height: 670px;
}
@media screen and (max-width: 821px) {
  .support_inner {
    margin: 54px auto 116px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 92.8571428571%;
    height: auto;
  }
}

.support_leftInner {
  width: 46%;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 821px) {
  .support_leftInner {
    width: 100%;
  }
}

.support_leftTopImg {
  max-width: 500px;
  margin: 0 auto;
}
@media screen and (max-width: 821px) {
  .support_leftTopImg {
    width: 100%;
    aspect-ratio: 1.5;
  }
}

.support_leftTopImg img {
  border-radius: 10px;
}
@media screen and (max-width: 821px) {
  .support_leftTopImg img {
    width: 100%;
    border-radius: 6px;
  }
}

.support_leftImgInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
@media screen and (max-width: 821px) {
  .support_leftImgInner {
    height: 301px;
  }
}

.support_leftBottomImg01 {
  width: 225px;
  height: auto;
  position: absolute;
  top: 96px;
  left: -74px;
}
@media screen and (max-width: 821px) {
  .support_leftBottomImg01 {
    width: 180px;
    top: 44px;
    left: 0;
  }
}

.support_leftBottomImg02 {
  width: 330px;
  height: auto;
  position: absolute;
  top: 52px;
  right: 0;
}
@media screen and (max-width: 821px) {
  .support_leftBottomImg02 {
    width: 200px;
    top: 13px;
    right: 0;
  }
}

.support_rightInner {
  width: 43%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 821px) {
  .support_rightInner {
    width: 100%;
    margin-top: -10px;
  }
}

@media screen and (max-width: 821px) {
  .support_textWrpper {
    margin-left: 8px;
  }
}

.support_title {
  font-size: 36px;
  font-weight: bold;
  color: #18669e;
  margin-bottom: 26px;
}

.support_text {
  margin-top: 12px;
  margin-bottom: 24px;
}

.rightImgInner {
  max-width: 500px;
  margin: 0 auto;
}
@media screen and (max-width: 821px) {
  .rightImgInner {
    width: 100%;
    aspect-ratio: 1.5;
  }
}

.rightImgInner img {
  border-radius: 10px;
}
@media screen and (max-width: 821px) {
  .rightImgInner img {
    width: 100%;
    border-radius: 6px;
  }
}

/*-------------------------------------------
「SERVICE」レイアウト
-------------------------------------------*/
.service {
  position: relative;
  background-color: #F6F8FA;
  padding-top: 64px;
}
@media screen and (max-width: 821px) {
  .service {
    padding: 80px 0 61px;
  }
}

.service_layout {
  width: 85%;
  max-width: 1080px;
  margin: 0 auto;
}
.service_layout::before {
  content: "";
  position: absolute;
  top: -110px;
  left: 0;
  width: 100%;
  height: 110px;
  background-image: url(../image/service-bg01.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media screen and (max-width: 821px) {
  .service_layout::before {
    height: 36px;
    top: -36px;
  }
}
.service_layout::after {
  content: "";
  position: absolute;
  bottom: -110px;
  left: 0;
  width: 100%;
  height: 110px;
  background-image: url(../image/service-bg02.png) 
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media screen and (max-width: 821px) {
  .service_layout::after {
    bottom: -36px;
  }
}

.service_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 75px;
  margin-top: 48px;
  padding-bottom: 68px;
}
@media screen and (max-width: 821px) {
  .service_inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 48px;
  }
}

.service_conteiner {
  position: relative;
  height: 614px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (max-width: 821px) {
  .service_conteiner {
    height: auto;
    margin-bottom: 47px;
  }
}
.service_conteiner:nth-of-type(2) {
  margin-top: 47px;
}
@media screen and (max-width: 821px) {
  .service_conteiner:nth-of-type(2) {
    margin-top: 0;
  }
}

@media screen and (max-width: 821px) {
  .service_conteiner:last-of-type {
    margin-bottom: 0;
  }
}

.service_img {
  max-width: 354px;
}
@media screen and (max-width: 821px) {
  .service_img {
    margin: 0 auto;
  }
}

.service_img img {
  -webkit-box-shadow: 5px 5px 10px rgba(78, 78, 78, 0.3);
          box-shadow: 5px 5px 10px rgba(78, 78, 78, 0.3);
  border-radius: 5px;
  margin-bottom: 20px;
}

.service_title {
  font-size: 24px;
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 36px;
  color: #18669e;
  text-align: center;
  margin-bottom: 8px;
}

.service_text {
  margin-bottom: 20px;
}
@media screen and (max-width: 821px) {
  .service_text {
    text-align: center;
  }
}

.service_btn {
  width: 258px;
  position: absolute;
  bottom: 46px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 821px) {
  .service_btn {
    width: 274px;
    position: inherit;
    left: inherit;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    bottom: 0;
    margin: 20px auto 0;
  }
}

/*-------------------------------------------
「ABOUT」レイアウト
-------------------------------------------*/
.about_layout {
  position: relative;
  margin: 110px auto 120px;
  padding-top: 110px;
}
@media screen and (max-width: 821px) {
  .about_layout {
    margin: 36px auto 60px;
    padding-top: 80px;
  }
}
.about_layout::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -100px;
  left: 4.140625%;
  background-image: url(../image/about-img.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: transparent;
  width: 237px;
  height: 185px;
}
@media screen and (max-width: 821px) {
  .about_layout::before {
    width: 135px;
    height: 105px;
    left: 12px;
    top: -80px;
  }
}
.about_layout::after {
  content: "";
  position: absolute;
  top: -180px;
  right: 0;
  background: url(../image/about-bubble.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: transparent;
  width: 253px;
  height: 475px;
}
@media screen and (max-width: 821px) {
  .about_layout::after {
    width: 110px;
    height: 185px;
    top: -75px;
    background: url(../image/about-bubble-sp.png) ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: transparent;
  }
}

.about_inner {
  width: 84.375%;
  max-width: 1080px;
  margin: 0 auto;
}

.aboutTitle {
  margin: 0 0 25px 600px;
}
@media screen and (max-width: 821px) {
  .aboutTitle {
    margin: 0 auto;
  }
}

.about_conteiner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 821px) {
  .about_conteiner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.about_img {
  width: 59.2592592593%;
  height: 433px;
  z-index: -1;
  top: 11px;
}
@media screen and (max-width: 821px) {
  .about_img {
    width: 100%;
    height: 254px;
    top: 0;
    margin-bottom: 20px;
  }
}

.about_img img {
  aspect-ratio: 1.5;
  border-radius: 10px;
  height: 100%
}

.about_content {
  width: 38.1481481481%;
  height: auto;
  margin-left: -40px;
}
@media screen and (max-width: 821px) {
  .about_content {
    width: 100%;
    margin-left: 0;
  }
}

.about_subTitle {
  color: #18669e;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

.about_text {
  margin-bottom: 64px;
}
@media screen and (max-width: 821px) {
  .about_text {
    margin-bottom: 30px;
  }
}

.about_btn {
  width: 258px;
}

/*-------------------------------------------
「会社理念・会社概要」レイアウト
-------------------------------------------*/
.company_inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 821px) {
  .company_inner {
    grid-template-columns: 1fr;
  }
}

.company_item {
  padding: 51px 0 52px 100px;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}

.company_item:first-of-type {
  background-image: url(../image/philosophy.png) ;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: transparent;

}

.company_item:last-of-type {
  background-image: url(../image/company.png) ;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: transparent;

}

.company_item:hover,
.company_item:focus {
  cursor: pointer;
  -webkit-filter: grayscale(60%);
          filter: grayscale(60%);
}

.companyTitle_jp {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 821px) {
  .companyTitle_jp {
    font-size: 24px;
  }
}

.companyTitle_en {
  color: #fff;
  font-size: 12px;
  letter-spacing: 3px;
  line-height: 1.9;
}
@media screen and (max-width: 821px) {
  .companyTitle_en {
    letter-spacing: 0.08em;
    line-height: 1.6;
  }
}

.companyBtn {
  margin-top: 32px;
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 821px) {
  .companyBtn {
    width: 20px;
    height: 20px;
    margin-top: 9px;
  }
}

.companyBtn img {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.company_item:hover .companyBtn img {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}

/*-------------------------------------------
「STAFF」レイアウト
-------------------------------------------*/
.staff_layout {
  padding: 121px 0 121px;
  background-image: url(../image/staff-bg.png) ;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 821px) {
  .staff_layout {
    padding: 80px 15px;
    background-image: url(../image/staff-bg-sp.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }
}

.staff_layout::after {
  content: "";
  background-image: url(../image/staff-bubble.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 216px;
  height: 432px;
  position: absolute;
  top: 81px;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 821px) {
  .staff_layout::after {
    width: 100px;
    height: 142px;
    background-image: url(../image/service-bg01.png);
    background-repeat: no-repeat; 
    background-position: top center;
    background-size: cover;
    background-color: transparent;
    top: inherit;
    left: inherit;
    bottom: -5px;
    right: 0;
    z-index: 2;
  }
}

.staff_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 4.6875%;
}
@media screen and (max-width: 821px) {
  .staff_inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.staff_rightItem {
  width: 32.03125%;
  position: relative;
}
@media screen and (max-width: 821px) {
  .staff_rightItem {
    width: 100%;
    margin-top: 110px;
  }
}
.staff_rightItem::after {
  content: "";
  background-image: url(../image/staff-art.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 347px;
  height: 155px;
  position: absolute;
  left: 0;
  bottom: -150px;
}
@media screen and (max-width: 821px) {
  .staff_rightItem::after {
    left: inherit;
    bottom: inherit;
    width: 186px;
    height: 83px;
    top: -72px;
    right: 0;
  }
}

.staffText {
  margin: 35px 0 35px;
}

.staff_btn {
  width: 276px;
}

.staff_leftItem {
  width: 45.9375%;
  height: 36.71875%;
  margin-top: 38px;
}
@media screen and (max-width: 821px) {
  .staff_leftItem {
    width: 100%;
    margin-top: 0;
  }
}

.staff_leftItem img {
  width: 100%;
  border-radius: 10px;
}

/*-------------------------------------------
「RECRUIT」レイアウト
-------------------------------------------*/
.recruit_layout {
  padding: 120px 0;
  background-image: url(../image/recruit-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 821px) {
  .recruit_layout {
    padding: 81px 0;
    background-image: url(../image/recruit-bg-sp.png) ;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-color: transparent;
  }
}

.recruit_layout::after {
  content: "";
  background-image: url(../image/recruit-bubble.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: transparent;
  width: 239px;
  height: 388px;
  position: absolute;
  right: 0;
  bottom: -150px;
}
@media screen and (max-width: 821px) {
  .recruit_layout::after {
    background-image: url(../image/recruit-bubble-sp.png) ;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-color: transparent;
    width: 76px;
    height: 127px;
    bottom: -7px;
  }
}

.recruit_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 4.6875%;
}
@media screen and (max-width: 821px) {
  .recruit_inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.recruit_img {
  max-width: 640px;
}
@media screen and (max-width: 821px) {
  .recruit_img {
    width: 100%;
    margin: 0 auto;
  }
}

.recruit_content {
  width: 32.03125%;
  position: relative;
  padding-right: 16px
}
@media screen and (max-width: 821px) {
  .recruit_content {
    width: 92.8571428571%;
    margin: 112px auto 0;
    padding-right: 0px
  }
}

.recruit_content::after {
  content: "";
  background-image: url(../image/recruit-art.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 254px;
  height: 149px;
  position: absolute;
  left: 0;
  bottom: -100px;
  z-index: 1;
}
@media screen and (max-width: 821px) {
  .recruit_content::after {
    width: 141px;
    height: 82px;
    left: inherit;
    bottom: inherit;
    top: -78px;
    right: 0;
  }
}

.recruit_contentText {
  margin: 35px 0 35px;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
@media screen and (max-width: 821px) {
  .recruit_contentText {
    margin: 24px 0;
  }
}

.recruit_btn {
  width: 272px;
}
@media screen and (max-width: 821px) {
  .recruit_btn {
    width: 290px;
  }
}

.js-fadeIn {
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(150px);
          transform: translateY(150px);
  -webkit-transition: opacity 2s, -webkit-transform 0.5s ease-in-out;
  transition: opacity 2s, -webkit-transform 0.5s ease-in-out;
  transition: opacity 2s, transform 0.5s ease-in-out;
  transition: opacity 2s, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}

.js-fadeIn.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

/*-------------------------------------------
「お問い合わせ」レイアウト
-------------------------------------------*/
.contact_layout {
  background-image: url(../image/contact-bg.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 356px;
  margin-bottom: 184px;
  position: relative;
}
@media screen and (max-width: 821px) {
  .contact_layout {
    height: 272px;
    background: url(../image/contact-bg-sp.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: transparent;

    margin-bottom: 208px;
  }
}

.contact_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 77.65625%;
  max-width: 995px;
  position: absolute;
  top: 90px;
  left: 50%;
  border-radius: 10px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  overflow: hidden;
  -webkit-box-shadow: 4px 4px 10px 0px hsla(207, 12%, 14%, 0.18);
          box-shadow: 4px 4px 10px 0px hsla(207, 12%, 14%, 0.18);
}
@media screen and (max-width: 821px) {
  .contact_inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    width: 88.5714285714%;
    top: 48px;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 3px 0px rgba(32, 37, 41, 0.18);
            box-shadow: 2px 2px 3px 0px rgba(32, 37, 41, 0.18);
  }
}

.contact_content {
  width: 47.6861167002%;
  background-color: #fff;
  padding: 93px 43px;
}
@media screen and (max-width: 821px) {
  .contact_content {
    width: 100%;
    padding: 24px 15px;
    border-radius: 0 0 4px 4px;
  }
}

.contact_text {
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin-bottom: 48px;
}
@media screen and (max-width: 821px) {
  .contact_text {
    margin-bottom: 20px;
  }
}

.contact_img {
  width: 52.3138832998%;
}

@media screen and (max-width: 821px) {
  .contact_img {
    width: 100%;
    height: 182px;
  }
}

.contact_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact_btn {
  width: 273px;
}
@media screen and (max-width: 821px) {
  .contact_btn {
    width: 290px;
  }
}

.contact_inner.js-fadeIn {
  -webkit-transform: translate(-50%, 150px);
          transform: translate(-50%, 150px);
  -webkit-transition: transform 0.6s ease;
          transition: transform 0.6s ease;
}

.contact_inner.js-fadeIn.is-scrollIn {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

/*-------------------------------------------
「トップアイコン」レイアウト
-------------------------------------------*/
.topBtn_link {
  position: fixed;
  right: 15px;
  bottom: 40px;
  z-index: 100;
}

.topBtn_img {
  width: 68px;
  height: 68px;
}

/*-------------------------------------------
footer
-------------------------------------------*/
/*除算用にmathモジュールをインポート*/
.footer_layout {
  width: 100vw;
  background-image: url(../image/footer-bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding-bottom: 24px;
}
@media screen and (max-width: 821px) {
  .footer_layout {
    background-image: url(../image/footer-bg-sp.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }
}

.footer_inner {
  width: 69.453125%;
  max-width: 889px;
  padding-top: 166px;
  margin: 0 auto;
}
@media screen and (max-width: 821px) {
  .footer_inner {
    width: 90%;
    padding: 73px 0 24px;
  }
}

.footer_topContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 57px;
}
@media screen and (max-width: 821px) {
  .footer_topContent {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 8px;
  }
}

.footer_iconLogo {
  width: 93px;
  height: auto;
}
@media screen and (max-width: 821px) {
  .footer_iconLogo {
    width: 106px;
    height: 97px;
  }
}

.footer_lits {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 28px;
}
@media screen and (max-width: 821px) {
  .footer_lits {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    margin-top: 24px;
  }
}

.footer_bottomContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 821px) {
  .footer_bottomContent {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.footer_items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 36px;
}
@media screen and (max-width: 821px) {
  .footer_items {
    gap: 32px;
    margin-bottom: 32px;
  }
}