@charset "UTF-8";
.m-black {
  color: black !important;
}

.m-bk-company_color {
  background-color: #171c61;
}

.m-st-company_color {
  color: #171c61;
}

.m-inline-block {
  display: inline-block;
  width: 100%;
}

.m-margin-top {
  margin-top: 5rem;
}

.m-header_nav {
  display: flex;
  width: 100%;
  position: fixed;
  background-color: #171c61;
  z-index: 2;
}

.m-hum_menu {
  height: 0dvh;
  transition: 0.5s ease;
  width: 100%;
  z-index: 1;
  width: 100%;
  position: fixed;
  background-color: white;
  text-align: center;
  overflow: hidden;
  font-size: min(5vw, 30px);
}
.m-hum_menu a {
  display: block;
}
.m-hum_menu a:first-child {
  padding-top: 5rem;
}
.m-hum_menu p {
  line-height: min(11vw, 5rem);
}

.m-open {
  transition: 0.5s ease;
  height: 100vh;
}

#m-menu {
  display: inline-block;
  position: absolute;
  transform: translateY(-50%);
  z-index: 10;
  top: 50%;
  z-index: 10;
  right: 8px;
}
#m-menu span {
  display: block;
  height: 5px;
  background: white;
  position: absolute;
  width: 10vw;
  max-width: 100px;
  right: 0;
  transition: 0.3s ease-in-out;
}
#m-menu span:nth-child(1) {
  top: -5px;
}
#m-menu span:nth-child(2) {
  top: 5px;
}

.open span {
  margin-right: 2vw;
}

.open span:nth-child(1) {
  top: 5px !important;
  transform: rotate(135deg);
}

.open span:nth-child(2) {
  top: 5px !important;
  transform: rotate(-135deg);
}

.m-title-sentence {
  color: white;
  font-size: min(9.5vw, 7rem);
  line-height: min(10vw, 7rem);
  font-family: zen;
}

.m-image_recruit {
  display: flex;
  align-items: center;
  width: 40%;
  color: white;
  margin: auto;
  font-family: zen;
}
.m-image_recruit a {
  display: contents;
  width: 100%;
}
.m-image_recruit p {
  font-size: clamp(15px, 5vw, 45px);
}
.m-image_recruit img {
  width: 60%;
}

.m-position_ab {
  position: absolute;
  bottom: 50%;
  right: 3%;
}

.m-section-title {
  text-align: center;
  color: #1a7bbe;
  font-size: min(7vw, 4rem);
  margin-top: min(7vw, 6rem);
  font-family: zen;
}

.m-section-sb-title {
  text-align: center;
  color: #1a7bbe;
  font-size: min(3vw, 2rem);
  margin-bottom: 1rem;
}

.m-section-sentence {
  font-size: min(2.2vw, 3rem);
  line-height: clamp(1rem, 5vw, 5rem);
  display: inline-block;
  color: white;
}
.m-section-sentence span {
  line-height: min(2vh, 2rem);
  font-size: min(4.2vw, 4rem);
  font-family: "zen";
}
.m-section-sentence:nth-childe(odd) {
  align-items: end;
}

.m-img-center {
  background-size: cover;
  background-position: center;
}

.m-button {
  border: solid #171c61;
  padding: 1%;
}

.m-job_hader_content {
  position: relative;
}

.m-job_header_bk_img {
  width: 80%;
  height: max(30vh, 30vw);
  position: relative;
}

.m-job_vertical_sentence {
  width: 20%;
  height: max(50vh, 50vw);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 72%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 72%);
  background-color: #171c61;
  font-family: "zen";
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}
.m-job_vertical_sentence p {
  writing-mode: vertical-rl;
  margin: auto;
  background-color: #0251a2;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  height: max(55vh, 55vw);
  font-size: min(2.4vw, 60px);
  padding-top: 0.5rem;
}

.m-job_header_title {
  display: flex;
  position: absolute;
  bottom: 6%;
  align-items: end;
  margin-left: 1rem;
  color: white;
  font-family: "zen";
  font-size: clamp(12px, 6.1vw, 80px);
}
.m-job_header_title .m-job_header_sentence {
  display: flex;
  flex-direction: column;
  font-size: clamp(8px, 2.1vw, 40px);
}

.m-main_content {
  background-image: url(../images/job-content_img.jpg);
  display: inline-block;
  width: 100%;
}
.m-main_content img {
  width: min(80%, 1000px);
  margin: auto;
  display: block;
}

.m-job_sentence {
  margin-left: 1rem;
}
.m-job_sentence h3 {
  border-bottom: solid;
  display: inline-block;
  font-size: 5min 5.2vw, 40px;
}
.m-job_sentence p {
  font-size: min(2.6vw, 40px);
}

.m-job_card {
  width: 95%;
  margin: 3rem auto 0 auto;
  color: white;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.m-job_card h2 {
  background-color: #171c61;
  border-radius: 0.5em 0.5em 0em 0em;
}

.m-job_card_flex {
  display: flex;
  width: 100%;
  justify-content: space-around;
  color: white;
  flex-wrap: wrap;
}

.m-job_list {
  display: flex;
  color: white;
  justify-content: end;
  font-size: min(2.5vw, 3rem);
}
.m-job_list a::after {
  content: " / ";
}
.m-job_list .checked {
  color: #036eb7;
}

.m-job_box_transiton {
  transition: all 0.5s;
  opacity: 1;
}

.m-title_details {
  display: flex;
  background-color: #171c61;
  color: white;
  justify-content: space-around;
  font-size: min(3vw, 30px);
  padding: 1% 0 1% 0;
}

.m-main_box {
  width: min(100%, 1000px);
  margin: 2rem auto 3rem auto;
  background-color: #e5eff5;
}
.m-main_box h1 {
  background: radial-gradient(#0054a5, #171c61);
  color: white;
  text-align: center;
  border-bottom: solid #c30d23 3.5px;
  font-size: min(3vw, 50px);
}

.m-details-flex {
  display: flex;
  margin-top: 1rem;
  justify-content: center;
}
.m-details-flex:last-child {
  padding-bottom: 1rem;
}

.m-list-main-modifire .list_flex {
  display: flex;
  flex-wrap: wrap;
}
.m-list-main-modifire .list_flex:last-child {
  padding-bottom: 1rem;
}

.m-fade-out {
  visibility: hidden;
  /*追加*/
  transition: all 1s;
  transform: translateY(150px);
}

.m-fade-in {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.m-submit {
  margin: 1% auto 10% auto;
  display: block;
  padding: 2%;
  border-radius: 1rem;
  width: min(30%, 300px);
  font-size: min(3vw, 25px);
}

.header_nav {
  flex-direction: column;
  align-items: center;
  width: 25%;
  margin-left: 1rem;
  max-width: 200px;
}
.header_nav img {
  width: 100%;
}

header {
  font-size: 0;
}

.header {
  background-image: url(../images/header_bk_img.jpg);
  height: 100vh;
  background-size: cover;
}

.header_title {
  text-align: center;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 100%;
  font-size: min(5.5vw, 4rem);
  line-height: clamp(3rem, 7vw, 5rem);
  color: #3f5aa7;
    text-shadow: 0.2vw 0.1vw #ffffff;
}

.header_icon {
  position: absolute;
  top: 80%;
  right: 50%;
  transform: translate(50%, -50%);
  max-width: 350px;
}

.strong {
  line-height: 5rem;
}

.our_company section {
  padding: 3% 3%;
}

.introduction {
  background-image: url(../images/sp/sp_introduction_bk_img.jpg);
  padding: 3% 3%;
}

.finde {
  background-image: url(../images/sp/sp_finde_bk_img.jpg);
  text-align: end;
}

.chance {
  background-image: url(../images/sp/sp_chance_bk_img.jpg);
}

.carrer {
  background-image: url(../images/sp/sp_carrer_bk_img.jpg);
  text-align: end;
}

.chance-modifire {
  line-height: 1;
}

.our_job {
  text-align: center;
}
.our_job .our_job_sentence {
  color: #171c61;
  font-size: min(2.5vw, 2.5rem);
  line-height: 1.8;
  margin: 1rem;
}
.our_job .our_job_btn {
  font-weight: 900;
  color: #171c61;
  margin-top: 1rem;
  font-size: min(2.5vw, 2rem);
}

.our_job_content {
  position: relative;
  overflow: hidden;
  width: 80%;
  margin: auto;
  background-size: cover;
}

.our_job_string {
  padding: min(10vw, 100px);
  border: solid black;
  position: relative;
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  transition: 0.5s;
}
.our_job_string::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  background: radial-gradient(#0054a5, #171c61);
  z-index: 1;
  width: 100%;
  height: 100%;
}
.our_job_string p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: min(4vw, 3rem);
  z-index: 2;
  color: white;
  text-wrap-mode: nowrap;
  font-family: "zen";
}
.our_job_string:hover {
  transition: 0.5s;
  z-index: 3;
}

.grid_container {
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: min(95%, 1200px);
  margin: auto;
  background-color: black;
}

.creaitve {
  grid-column: 3/5;
  grid-row: 3;
  background-image: url(../images/creaitve.jpg);
}
.creaitve::after {
  background-image: linear-gradient(321deg, rgba(126, 0, 255, 0.54), rgba(252, 166, 255, 0.56));
}
.creaitve:hover {
  grid-row: 2/4;
}

.design {
  grid-column: 1/3;
  grid-row: 1;
  background-image: url(../images/design.jpg);
}
.design::after {
  background-image: linear-gradient(321deg, rgba(93, 47, 108, 0.54), rgba(255, 166, 166, 0.54));
}
.design:hover {
  grid-row: 1/3;
}

.fieldwork {
  grid-column: 2/4;
  grid-row: 2;
  background-image: url(../images/fieldwork.jpg);
  background-position-y: top;
}
.fieldwork::after {
  background-image: linear-gradient(321deg, rgba(29, 80, 61, 0.57), rgba(25, 137, 92, 0.54));
}
.fieldwork:hover {
  grid-row: 4/2;
}

.deskwork {
  grid-column: 4;
  grid-row: 1/3;
  background-image: url(../images/deskwork.jpg);
  background-position-x: left;
}
.deskwork::after {
  background-image: linear-gradient(321deg, rgba(0, 76, 255, 0.54), rgba(166, 228, 255, 0.54));
}
.deskwork:hover {
  grid-column: 5/3;
}

.management {
  grid-column: 1/2;
  grid-row: 2/4;
  background-image: url(../images/management.jpg);
}
.management::after {
  background-image: linear-gradient(321deg, rgba(0, 0, 0, 0.54), rgba(246, 246, 246, 0.54));
}
.management:hover {
  grid-column: 3/1;
}

.company {
  color: black !important;
  text-wrap-mode: nowrap;
}
.company table {
  font-size: min(3.5vw, 2.5rem);
  margin: auto;
  border-collapse: collapse;
}
.company table td {
  border: solid 0.5px;
  padding: 0.5vw;
}
.company table .right {
  border-right: hidden;
}
.company table .left {
  border-left: hidden;
}

.access {
  color: black !important;
}
.access .cotact_block {
  display: flex;
  width: min(98%, 1000px);
  margin: auto;
  justify-content: space-between;
}
.access .cotact_block iframe {
  width: 65%;
}
.access .cotact_block .text_info {
  list-style: none;
  font-size: min(2.6vw, 1.5rem);
  line-height: min(4vw, 4.5rem);
  padding: 0;
}

footer {
  display: block;
  margin-top: 5rem;
}

.contact_icon {
  display: flex;
  width: min(90%, 1000px);
  margin: auto;
  justify-content: space-around;
}
.contact_icon img {
  width: 90%;
}

.fotter_icon {
  background-color: #171c61;
  margin-top: 1rem;
}
.fotter_icon img {
  padding: 5%;
  width: min(40%, 350px);
  margin: auto;
  display: block;
}

.over_strig {
  text-shadow: 2px 2px 1px #171c61;
}

.job_color {
  border: solid #1d2087;
}
.job_color h2 {
  background-color: #1d2087;
}

.job_box {
  background-clip: padding-box;
  border: 10px solid rgba(23, 28, 97, 0.7);
  border-radius: 1rem;
  transition: all 0.5s;
  background-color: #171c61;
  opacity: 0.7;
  width: min(40%, 500px);
}
.job_box .jon_name {
  width: 100%;
  padding-top: 40%;
  padding-bottom: 40%;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: min(5vw, 50px);
  font-family: "zen";
}
.job_box p a {
  background-color: #171c61;
}

.maintenace_img {
  background-image: url(../images/maintenance_img.jpg);
}

.deskwork_img {
  background-image: url(../images/deskwork_img.jpg);
}

.creaitve_img {
  background-image: url(../images/creaitve_img.jpg);
}

.fieldworks_img {
  background-image: url(../images/fieldworks_img.jpg);
}

.cleaning_img:hover {
  background-image: url(../images/cleaning.jpg);
}

.security_img:hover {
  background-image: url(../images/security.jpg);
}

.human_img:hover {
  background-image: url(../images/human.jpg);
}

.account_img:hover {
  background-image: url(../images/account.jpg);
}

.affairs_img:hover {
  background-image: url(../images/affairs.jpg);
}

.signage_design_img:hover {
  background-image: url(../images/signage_design.jpg);
}

.facility_img:hover {
  background-image: url(../images/facility.jpg);
}

.electrical_img:hover {
  background-image: url(../images/electrical.jpg);
}

.signage_installation_img:hover {
  background-image: url(../images/signage_installation.jpg);
}

.plumbing_img:hover {
  background-image: url(../images/plumbing.jpg);
}

.furniture_img:hover {
  background-image: url(../images/furniture.jpg);
}

.exterior_img:hover {
  background-image: url(../images/exterior.jpg);
}

.logistics_img:hover {
  background-image: url(../images/logistics.jpg);
}

.illustrator_img:hover {
  background-image: url(../images/illustrator.jpg);
}

.video_img:hover {
  background-image: url(../images/video.jpg);
}

.audio_img:hover {
  background-image: url(../images/audio.jpg);
}

.sculpture_img:hover {
  background-image: url(../images/sculpture.jpg);
}

.security_img:hover {
  background-image: url(../images/security.jpg);
}

.details_title {
  width: min(40%, 300px);
  margin-left: 0.5rem;
  display: flex;
  font-size: min(5vw, 35px);
}
.details_title::before {
  content: "";
  width: 5px;
  height: 5vh;
  background-color: #171c61;
  display: block;
}

.details_sentence {
  width: min(60%, 400px);
  font-size: min(3.85vw, 30px);
}

.mail_modifire {
  flex-direction: column;
  width: min(80%, 800px);
  text-align: left;
  margin: auto;
  margin-top: min(5vw, 3rem);
}
.mail_modifire :last-child {
  margin-bottom: min(5vw, 3rem);
}
.mail_modifire input[type=text], .mail_modifire select {
  border-radius: 5px;
  padding: 1rem 2rem;
}

.modifire_header {
  height: 100vh;
}

.thanks_modifire {
  text-align: center;
}
.thanks_modifire p {
  line-height: 1.8rem;
}

.footer_modifire {
  flex-direction: column;
  margin: auto;
  color: red;
  font-size: clamp(12px, 5vw, 35px);
  text-align: center;
}/*# sourceMappingURL=layout.css.map */