@charset "UTF-8";
/***********************************************
サブ共通
***********************************************/
@-webkit-keyframes stamp {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: translate(-2px, 1px);
            transform: translate(-2px, 1px);
  }
  80% {
    -webkit-transform: translate(2px, -1px);
            transform: translate(2px, -1px);
  }
  85% {
    -webkit-transform: translate(-1px, 2px);
            transform: translate(-1px, 2px);
  }
  90% {
    -webkit-transform: translate(1px, -2px);
            transform: translate(1px, -2px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes stamp {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: translate(-2px, 1px);
            transform: translate(-2px, 1px);
  }
  80% {
    -webkit-transform: translate(2px, -1px);
            transform: translate(2px, -1px);
  }
  85% {
    -webkit-transform: translate(-1px, 2px);
            transform: translate(-1px, 2px);
  }
  90% {
    -webkit-transform: translate(1px, -2px);
            transform: translate(1px, -2px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
main .head {
  background-image: url(../img/common/sub_head.jpg);
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
main .head .img.position-absolute {
  right: 10%;
  bottom: 0;
  mix-blend-mode: soft-light;
}
main .head .img.position-absolute img {
  -webkit-animation: stamp 0.4s ease-out forwards;
          animation: stamp 0.4s ease-out forwards;
}
main .head .head_inner h2 .img {
  mix-blend-mode: screen;
}
main .line_on img {
  max-width: unset !important;
  min-width: unset !important;
  mix-blend-mode: unset !important;
}
main .line_on img.line01 {
  bottom: 99.5% !important;
  left: 0 !important;
  top: unset !important;
}
main .line_on img.line02 {
  top: 99.5% !important;
  left: 0 !important;
  bottom: unset !important;
}
main .btn_wrap .btn_wrap_row a {
  width: 49%;
}
main .btn_wrap .btn_wrap_row a img.position-absolute {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
main .btn_wrap .btn_wrap_row a span.material-symbols-outlined {
  font-weight: 600;
}
main .btn_wrap .btn_wrap_row a span.f_30 {
  font-size: clamp(20px, 1.56vw, 30px);
}
main .btn_wrap .btn_wrap_row a:hover span.material-symbols-outlined {
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}
main .sub_link img.stamp {
  left: 0;
  bottom: 0;
  opacity: 0.1;
  width: 41vw;
  max-width: 800px;
  min-width: 380px;
}
main .sub_link .sub_link_inner a {
  z-index: 1;
  -webkit-filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.5));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
main .sub_link .sub_link_inner a .img_absolute {
  width: 320px;
  right: 0;
  top: -30px;
}
main .sub_link .sub_link_inner a img.position-absolute.bg01, main .sub_link .sub_link_inner a img.position-absolute.bg02 {
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
main .sub_link .sub_link_inner a p.d-flex img {
  width: 60px;
}
main .sub_link .sub_link_inner a:hover {
  -webkit-transform: translateY(-20px) translateZ(0);
          transform: translateY(-20px) translateZ(0);
}
main .sub_link .sub_link_inner a:hover * {
  color: #FFFFFF;
}
main .sub_link .sub_link_inner a:hover .text_wrap02 p {
  color: #3C3333;
}
main .sub_link .sub_link_inner a:hover .text_wrap02 p span {
  color: #3C3333;
}

/***********************************************
お問い合わせ
***********************************************/
main .contact01 .contact01_inner .form_wrap {
  max-width: 860px;
}
main .contact01 .contact01_inner .form_wrap table {
  width: 100%;
}
main .contact01 .contact01_inner .form_wrap table tr th, main .contact01 .contact01_inner .form_wrap table tr td {
  padding-top: 20px;
  padding-bottom: 20px;
}
main .contact01 .contact01_inner .form_wrap table tr th {
  padding-right: 30px;
  width: 250px;
}
main .contact01 .contact01_inner .form_wrap table tr th span.bg_red {
  border-radius: 5px;
}
main .contact01 .contact01_inner .form_wrap table tr td {
  padding-left: 30px;
  width: calc(100% - 250px);
}
main .contact01 .contact01_inner .form_wrap table tr td input, main .contact01 .contact01_inner .form_wrap table tr td textarea {
  width: 100%;
  background-color: #FFFFFF;
  padding: 10px 15px;
  border-radius: 10px;
}
main .contact01 .contact01_inner .form_wrap table tr td input[type=radio] {
  margin-right: 10px;
  width: auto !important;
  padding: 0;
}
main .contact01 .contact01_inner .form_wrap table tr td input[type=file] {
  background-color: transparent;
  border-radius: 0px;
  color: #3C3333;
}
main .contact01 .contact01_inner .form_wrap .box label span.bg_red {
  border-radius: 5px;
}
main .contact01 .contact01_inner .pp_wrap .pp_box {
  max-width: 860px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #3C3333;
}
main .contact01 .contact01_inner .submit_wrap input {
  height: 80px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
main .contact01 .contact01_inner .submit_wrap input:hover {
  color: #f9e32a;
}
main .contact02 .contact02_inner .contact02_item a {
  max-width: 700px;
}
main .contact02 .contact02_inner .contact02_item a .material-symbols-outlined {
  font-weight: bold;
}
main .contact02 .contact02_inner .contact02_item a img.position-absolute {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}

/***********************************************
採用情報
***********************************************/
main .recruit01 {
  background-image: url(../img/recruit/recruit01.jpg);
  background-size: cover;
  background-position: left center;
  background-attachment: fixed;
}
main .recruit01 .recruit01_inner .recruit01_item {
  max-width: 860px;
  z-index: 1;
}
main .recruit01 .recruit01_inner .recruit01_item img.position-absolute {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -1;
}
main .recruit02 .recruit02_inner .recruit02_item {
  max-width: 700px;
}
main .recruit02 .recruit02_inner .recruit02_item.company_profile {
  max-width: 860px;
}
main .recruit02 .recruit02_inner .recruit02_item table {
  width: 100%;
}
main .recruit02 .recruit02_inner .recruit02_item table tr th, main .recruit02 .recruit02_inner .recruit02_item table tr td {
  padding-top: 20px;
  padding-bottom: 20px;
}
main .recruit02 .recruit02_inner .recruit02_item table tr th {
  width: 200px;
  padding-right: 30px;
  border-right: 2px dashed #FFFFFF;
}
main .recruit02 .recruit02_inner .recruit02_item table tr td {
  width: calc(100% - 200px);
  padding-left: 60px;
  font-weight: 400;
}

/***********************************************
会社概要
***********************************************/
main .company01 {
  height: 1100px;
  background-image: url(../img/company/company01.png);
  background-size: cover;
  background-position: top center;
  margin-top: -100px;
}
main .company01 .company01_inner h3 img.position-absolute {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
main .company03 .company03_inner .company03_row .company03_row_item {
  width: 47%;
}

/***********************************************
喜瀬工業について
***********************************************/
main .about01 .img_absolute {
  left: 0;
  top: -10%;
  width: 15vw;
  max-width: 300px;
  min-width: 180px;
}
main .about01 .about01_inner .about01_row .about01_row_item.about01_row_left {
  width: 53%;
}
main .about01 .about01_inner .about01_row .about01_row_item.about01_row_right {
  width: 45%;
}
main .about01 .about01_inner .about01_row .about01_row_item.about01_row_right .about01_slider .about01_slider_item .position-absolute {
  left: 48%;
  bottom: 7.7%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: clamp(18px, 1.4vw, 28px);
  width: 100%;
}
main .about01 .about01_inner .about01_row .about01_row_item.about01_row_right .about01_slider .about01_slider_item:nth-of-type(2) .position-absolute {
  left: 65%;
  bottom: 8%;
}
main .about01 .about01_inner .about01_row .about01_row_item.about01_row_right .about01_slider .about01_slider_item:nth-of-type(3) .position-absolute {
  left: 62%;
  bottom: 8.1%;
}
main .about02 {
  overflow: hidden;
}
main .about02 .about02_inner.mr_auto .about02_item::after {
  left: -20px;
}
main .about02 .about02_inner.ml_auto .about02_item img.position-absolute.bg01 {
  left: 52%;
}
main .about02 .about02_inner .about02_item {
  position: relative;
  z-index: 1;
}
main .about02 .about02_inner .about02_item img.position-absolute.bg01 {
  top: 50%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -1;
}
main .about02 .about02_inner .about02_item .img01 {
  height: 480px;
  width: 100%;
}
main .about02 .about02_inner .about02_item .img01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
main .about02 .about02_inner .about02_item .about02_row .about02_row_item.about02_row_left {
  width: 57%;
}
main .about02 .about02_inner .about02_item .about02_row .about02_row_item.about02_row_left .row_img01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
main .about02 .about02_inner .about02_item .about02_row .about02_row_item.about02_row_right {
  width: 40%;
}
main .about02 .about02_inner .about02_item .about02_row .about02_row_item.about02_row_right h3 {
  z-index: 1;
  margin-top: -28%;
}
main .about02 .about02_inner .about02_item .about02_row .about02_row_item.about02_row_right h3 img.position-absolute {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 103%;
  height: 100%;
  z-index: -1;
  max-width: unset;
}
main .about02 .about02_inner .about02_item .about02_row .about02_row_item.about02_row_right h4 {
  z-index: 1;
}
main .about02 .about02_inner .about02_item .about02_row .about02_row_item.about02_row_right h4 .position-absolute {
  opacity: 0.07;
  bottom: 0;
  left: -4%;
  width: 50vw;
  font-size: clamp(40px, 4.4vw, 86px);
}
main .about03 {
  background-color: #F5F5F5;
}
main .about03 img.position-absolute.item04 {
  top: 30px;
  right: 5vw;
  max-width: 420px;
  width: 21vw;
  min-width: 220px;
}
main .about03 .about03_inner .about03_row img.position-absolute {
  right: 83%;
  top: 61%;
}
main .about03 .about03_inner .about03_row img.position-absolute.item01 {
  max-width: 360px;
  width: 18vw;
  min-width: 200px;
}
main .about03 .about03_inner .about03_row img.position-absolute.item02 {
  max-width: 420px;
  width: 21vw;
  min-width: 220px;
  right: -16%;
  top: 55%;
}
main .about03 .about03_inner .about03_row img.position-absolute.item03 {
  max-width: 480px;
  width: 25vw;
  min-width: 220px;
}
main .about03 .about03_inner .about03_row .about03_row_item.about03_row_left {
  width: 50%;
}
main .about03 .about03_inner .about03_row .about03_row_item.about03_row_right {
  width: 45%;
}

/***********************************************
事業紹介
***********************************************/
main .business01 .business01_inner .business01_item h3 {
  border-bottom: 1px solid #3C3333;
}
main .business01 .business01_inner .business01_item .business01_row a {
  width: 31%;
  background-size: 100% 100%;
}
main .business01 .business01_inner .business01_item .business01_row a .material-symbols-outlined {
  transform: rotate(90deg);
}
main .business01 .business01_inner .business01_item.business01_item01 .img_absolute {
  right: 30px;
  top: -130px;
  width: 23vw;
  max-width: 450px;
  min-width: 220px;
}
main .business01 .business01_inner .business01_item.business01_item02 .img_absolute {
  left: 30px;
  top: -150px;
  width: 18vw;
  max-width: 350px;
  min-width: 200px;
}
main .business01 .business01_inner .business01_item.business01_item02 h3 {
  border-color: #FFFFFF;
}
main .business02 .business02_inner .business02_item01 {
  background-image: url(../img/business/business03.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
main .business02 .business02_inner .business02_item01.business02_item01_2 {
  background-image: url(../img/business/business08.jpg);
}
main .business02 .business02_inner .business02_item01 .business02_row01 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
main .business02 .business02_inner .business02_item01 .business02_row01 .business02_row01_item {
  width: 280px;
  height: 280px;
  padding: 25px 40px 10px;
  background-image: url(../img/business/star_white.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
main .business02 .business02_inner .business02_item01 .business02_row01 .business02_row01_item:last-child {
  background-image: url(../img/business/star_red.png);
}
main .business02 .business02_inner .business02_item01 .business02_row01 .business02_row01_item.yl {
  background-image: url(../img/business/star_yellow.png);
}
main .business02 .business02_inner .business02_item01 .business02_row01 .business02_row01_item:nth-child(4) p.f_18 {
  margin-top: 26px;
}
main .business02 .business02_inner .business02_item01 .business02_row01 .business02_row01_item p.position-absolute {
  top: 42px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
main .business02 .business02_inner .business02_item01 .business02_item01_box {
  z-index: 1;
  max-width: 1100px;
}
main .business02 .business02_inner .business02_item01 .business02_item01_box img.position-absolute.bg01 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
main .business02 .business02_inner .business02_item01 .business02_item01_box img.position-absolute.img01 {
  top: 20px;
  left: 40px;
}
main .business02 .business02_inner .business02_item02 .business02_row02_item.business02_row02_left {
  width: 40%;
}
main .business02 .business02_inner .business02_item02 .business02_row02_item.business02_row02_right {
  width: 50%;
}
main .business02 .business02_inner .box img.position-absolute {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***********************************************
費用について
***********************************************/
main .fees01 {
  background-image: url(../img/fees/fees01.jpg);
  background-size: cover;
  background-position: center center;
}
main .fees01 img.position-absolute {
  width: 33vw;
  max-width: 650px;
  min-width: 300px;
  mix-blend-mode: soft-light;
  top: 80px;
  left: 5px;
}
main .fees01 .fees01_inner .fees01_item02 .fees01_item02_row .fees01_item02_row_item {
  background-size: cover;
  background-position: center center;
  padding-top: 280px;
  width: 45%;
  max-width: 500px;
}
main .fees01 .fees01_inner .fees01_item02 .fees01_item02_row .fees01_item02_row_item p.position-absolute {
  width: 100px;
  height: 100px;
  background-image: url(../img/fees/icon_bg.svg);
  background-size: contain;
  background-position: center center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 50%;
  top: -50px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
main .fees01 .fees01_inner .fees01_item02 .fees01_item02_row .fees01_item02_row_item .text_wrap {
  background-color: #3C3333;
  mix-blend-mode: hard-light;
}
main .fees01 .fees01_inner .fees01_item02 .fees01_item02_row .fees01_item02_row_item .text_wrap .col-10 {
  height: 100%;
}
main .fees01 .fees01_inner .fees01_item02 .fees01_item02_row .fees01_item02_row_item.fees01_item02_row_left {
  background-image: url(../img/fees/fees03.jpg);
}
main .fees01 .fees01_inner .fees01_item02 .fees01_item02_row .fees01_item02_row_item.fees01_item02_row_right {
  background-image: url(../img/fees/fees04.jpg);
}
main .fees02 {
  background-image: none;
}
main .fees02 .fees02_box {
  max-width: 800px;
}
main .fees02 .fees02_box p span {
  border-bottom: 2px solid #EF3F30;
}
main .fees02 .fees02_box img.position-absolute {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
main .fees03 img.position-absolute {
  mix-blend-mode: multiply;
  z-index: -1;
}
main .fees03 img.position-absolute.item01 {
  top: 0;
  left: 0;
  opacity: 0.4;
  width: 40vw;
  max-width: 800px;
  min-width: 300px;
}
main .fees03 img.position-absolute.item02 {
  bottom: 0;
  right: 0;
  opacity: 0.6;
  width: 60vw;
  max-width: 1190px;
  min-width: 300px;
}
main .fees03.bg_gray {
  z-index: 1;
}
main .fees03.bg_gray img.position-absolute.item01 {
  opacity: 0.05;
  left: unset;
  right: 0;
}
main .fees03.bg_gray img.position-absolute.item02 {
  opacity: 0.2;
  right: unset;
  left: 0;
}
main .fees03.bg_gray .fees03_inner {
  background-position: top left;
}
main .fees03 .fees03_inner {
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 70vw;
}
main .fees03 .fees03_inner.bg01 {
  background-image: url(../img/fees/fees05.jpg);
}
main .fees03 .fees03_inner.bg02 {
  background-image: url(../img/fees/fees06.jpg);
}
main .fees03 .fees03_inner.bg03 {
  background-image: url(../img/fees/fees07.jpg);
}
main .fees03 .fees03_inner .fees03_item {
  width: 45%;
  z-index: 1;
}
main .fees03 .fees03_inner .fees03_item .box img.position-absolute {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
main .fees03 .fees03_inner .fees03_item .box .title_wrap {
  border-bottom: 1px solid #3C3333;
}
main .fees03 .fees03_inner .fees03_item .box .title_wrap img {
  width: 80px;
}
main .fees03 .fees03_inner .fees03_item .box .fees03_row .fees03_row_item {
  width: 47%;
}

/***********************************************
実績紹介
***********************************************/
.works01 .works01_inner .top01_row::after {
  content: "";
  width: 33.3333333333%;
}
.works01 .works01_inner .top01_row .works_row_item:nth-child(3n)::after {
  content: none;
}

.works02 .works02_inner .bg_gray h3 img {
  mix-blend-mode: difference;
  opacity: 0.7;
}
.works02 .works02_inner .bg_gray .works02_row .works02_row_item.works02_row_left, .works02 .works02_inner .bg_gray .works02_row .works02_row_item.works02_row_right {
  width: 45%;
}
.works02 .works02_inner .bg_gray .works02_row .works02_row_item.works02_row_left .img, .works02 .works02_inner .bg_gray .works02_row .works02_row_item.works02_row_right .img {
  border: 5px solid;
}
.works02 .works02_inner .bg_gray .works02_row .works02_row_item.works02_row_left .img {
  border-color: #132e5f;
}
.works02 .works02_inner .bg_gray .works02_row .works02_row_item.works02_row_right .img {
  border-color: #f9e32a;
}
.works02 .works02_inner .bg_gray .works02_item02 table {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.works02 .works02_inner .bg_gray .works02_item02 table tr th, .works02 .works02_inner .bg_gray .works02_item02 table tr td {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #3C3333;
  vertical-align: middle;
}
.works02 .works02_inner .bg_gray .works02_item02 table tr th {
  width: 200px;
}
.works02 .works02_inner .bg_gray .works02_item02 table tr td {
  width: calc(100% - 200px);
  padding-left: 40px;
}
.works02 .works02_inner .bg_gray .works02_item02 p {
  max-width: 800px;
  width: 100%;
}

.intro_works p img {
  mix-blend-mode: difference;
  opacity: 0.7;
}
.intro_works .img_absolute {
  right: 0;
  top: 0%;
  width: 25vw;
  min-width: 200px;
  max-width: 490px;
}
.intro_works .img_absolute.img_absolute02 {
  right: unset;
  top: unset;
  left: 0;
  bottom: 0;
  width: 20vw;
}