@charset "UTF-8";
#summary {
  padding: 160px 20px 85px 20px;
  background-color: var(--bg-color_01);
}
@media screen and (max-width: 768px) {
  #summary {
    padding: 60px 20px 40px 20px;
  }
}
#summary .headline {
  margin: 0 0 70px 0;
}
@media screen and (max-width: 768px) {
  #summary .headline {
    margin: 0 0 20px 0;
  }
}
#summary .headline h2 {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 80px 0;
}
@media screen and (max-width: 768px) {
  #summary .headline h2 {
    margin: 0 0 30px 0;
  }
}
#summary figure {
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin-inline: auto;
  display: flex;
  gap: 100px;
}
@media screen and (max-width: 768px) {
  #summary figure {
    flex-direction: column-reverse;
    gap: 20px;
  }
}
#summary figure img {
  width: 365px;
}
@media screen and (max-width: 768px) {
  #summary figure img {
    width: 100%;
  }
}
#summary figure figcaption ul {
  display: grid;
  gap: 5px;
}
#summary figure figcaption ul li::before {
  content: "・";
}

#detail {
  padding: 70px 20px 90px 20px;
  background-color: var(--bg-color_03);
}
@media screen and (max-width: 768px) {
  #detail {
    padding: 40px 20px;
  }
}
#detail h2 {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 80px 0;
}
@media screen and (max-width: 768px) {
  #detail h2 {
    margin: 0 0 40px 0;
  }
}
#detail figure {
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin-inline: auto;
  display: flex;
  flex-direction: row-reverse;
  gap: 220px;
}
@media screen and (max-width: 768px) {
  #detail figure {
    flex-direction: column-reverse;
    gap: 0;
  }
}
#detail figure img {
  width: 360px;
}
@media screen and (max-width: 768px) {
  #detail figure img {
    width: 100%;
  }
}
#detail figure figcaption {
  display: grid;
  gap: 20px;
}
#detail figure figcaption ul li::before {
  content: "・";
}

#field {
  padding: 70px 20px;
  background-color: var(--bg-color_01);
}
@media screen and (max-width: 768px) {
  #field {
    padding: 50px 20px 40px 20px;
  }
}
#field h2 {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 80px 0;
}
@media screen and (max-width: 768px) {
  #field h2 {
    margin: 0 0 40px 0;
  }
}
#field p {
  text-align: center;
  margin: 0 0 50px 0;
}
@media screen and (max-width: 768px) {
  #field p {
    text-align: justify;
    margin: 0 0 30px 0;
  }
}
#field ul {
  width: min(1040px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 200px;
}
@media screen and (max-width: 768px) {
  #field ul {
    width: 210px;
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;
  }
}

#worker {
  padding: 110px 20px 70px 20px;
  background-color: var(--bg-color_03);
}
@media screen and (max-width: 768px) {
  #worker {
    padding: 30px 20px 35px 20px;
  }
}
#worker h2 {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 70px 0;
}
@media screen and (max-width: 768px) {
  #worker h2 {
    margin: 0 0 20px 0;
  }
}
#worker ul {
  width: min(1200px, 100%);
  margin: 0 auto 120px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media screen and (max-width: 768px) {
  #worker ul {
    width: 250px;
    margin: 0 auto 70px auto;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}

#thanks {
  padding: 60px 0;
  background-color: var(--bg-color_02);
  font-size: 14px;
  text-align: center;
  display: grid;
  gap: 5px;
}
#thanks a {
  color: #2d2d2d;
  padding: 0 15px 0 0;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin-inline: auto;
  background-image: url(../images/recruit/icon_arrow.png);
  background-size: 11px 11px;
  background-position: right, center;
  background-repeat: no-repeat;
}/*# sourceMappingURL=recruit.css.map */