/* ===== セクション１：top(hero) ===== */
.sec-01 {
  position: relative;
  margin-bottom: var(--space-6);
}

.sec-01 .hero-img {
  width: 100%;
  margin: 0 auto;
}

.sec-01 .hero-img .tb,
.sec-01 .hero-img .pc {
  display: none;
}

.sec-01 .hero-text h2 {
  position: absolute;
  top: 0;
  right: 32px;
  text-align: right;
  color: var(--color-text-white);
  font-weight: 700;
  font-size: clamp(var(--fs-2xl), 7.4vw, var(--fs-4xl));
  text-shadow: 4px 4px 8px rgba(0, 0, 0, .6);
}



@media (min-width: 500px) {
  .sec-01 .hero-img .mb {
    display: none;
  }

  .sec-01 .hero-img .tb {
    display: inline;
  }

  .sec-01 .hero-text h2 {
    top: 50%;
    right: 42px;
    transform: translateY(-50%);
    font-size: 4.8vw;
    text-shadow: -1px -1px 9px rgba(0, 0, 0, .4),
      3px 4px 7px rgba(0, 0, 0, .6);
    margin: 0;
  }
}

@media (min-width: 768px) {
  .sec-01 .hero-img .tb {
    display: none;
  }

  .sec-01 .hero-img .pc {
    display: inline;
  }

  .sec-01 .hero-text h2 {
    font-size: 4vw;
    text-shadow: 3px 4px 7px rgba(0, 0, 0, .6);
  }
}


@media (min-width: 1000px) {
  .sec-01 .hero-text h2 {
    right: 7vw;
    font-size: 3.2vw;

    margin: 0;
    text-align: left;
  }
}


/* ===== セクション２：about-us ===== */
.about-us ul.mb-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 90%;
  margin: 0 auto;
  margin-bottom: var(--space-4);
}

.about-us .pc-grid {
  display: none;
}

.mb-grid p {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-xl);
}

@media (min-width: 768px) {
  .about-us ul.mb-grid {
    display: none;
  }

  .about-us .pc-grid {
    display: block;
    width: 90%;
    margin: 0 auto;
    margin-bottom: var(--space-8);
  }

  .about-us ul .flex-box {
    display: flex;
    text-align: center;
    column-gap: var(--space-4);
  }

  .about-us ul .flex-box:first-child {
    margin-bottom: var(--space-6);
  }

  .about-us ul .flex-box:last-child {
    width: calc(100% - 33% - var(--space-4));
    margin: 0 auto;
  }

  .pc-grid p {
    font-size: clamp(var(--fs-md), 2vw, var(--fs-lg));
    font-weight: 600;
    letter-spacing: var(--ls-2xl);
    margin-top: var(--space-3);
  }
}

@media (min-width: 1280px) {
  .about-us .pc-grid {
    width: 100%;
    margin-top: var(--space-4);
  }

  .about-us ul .flex-box {
    column-gap: var(--space-6);
  }
}

/* ===== セクション３：message ===== */
.message {
  padding-bottom: var(--space-8);
}

.main-ms-box {
  position: relative;
  margin-bottom: var(--space-8);
  width: 100%;
}

.main-ms-box h3 {
  position: absolute;
  bottom: -12px;
  left: 12px;
  margin: 0;
  color: var(--color-text-white);
  line-height: 28px;
  font-weight: 700;
  letter-spacing: var(--ls-3xl);
}

.main-ms-box h3 span {
  display: inline-block;
  background: var(--color-grad-red-yellow);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  border-radius: 1px;
}

.main-ms-box h3 span:first-child {
  margin-bottom: var(--space-2);
}

.sub-ms-box {
  padding-bottom: var(--space-6);
}

.sub-ms-box .img-box,
.ms_accordion-box .img-box {
  width: 90%;
  margin: 0 auto;
}

.sub-ms-box .text-wrap,
.ms_accordion-box .text-wrap {
  width: 90%;
  margin: 0 auto;
}

.sub-ms-box .copy {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 35px;
  padding: var(--space-6) 0 var(--space-4);
}

.sub-ms-box .copy span.f-ctrl {
  letter-spacing: var(--ls-4xl);
  padding-left: var(--space-4);
}

.sub-ms-box .inner-text,
.ms_accordion-box .inner-text {
  font-size: var(--fs-sm);
  line-height: 28px;
}

.sub-ms-box .inner-text span:first-child {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.ms_accordion-box .inner-box-01,
.ms_accordion-box .inner-box-02 {
  padding-bottom: var(--space-6);
}

.ms_accordion-box .img-box {
  padding-bottom: var(--space-6);
}

.ms_accordion-box p.und-space {
  margin-bottom: var(--space-4);
}


@media (min-width: 768px) {
  .message {
    padding-bottom: var(--space-12);
  }

  .main-ms-box {
    display: flex;
    margin-bottom: var(--space-12);
  }

  .main-ms-box h3 {
    top: 50%;
    bottom: initial;
    left: 12px;
    transform: translateY(-50%);
    font-size: var(--fs-2xl);
  }

  .main-ms-box h3 span {
    background: var(--color-grad-red-yellow);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border-radius: 3px;
  }

  .main-ms-box h3 span:first-child {
    margin-bottom: var(--space-4);
  }

  .main-ms-box .img-box {
    width: 70%;
    padding-left: 30%;
  }


  .sub-ms-box,
  .ms_accordion-box .inner-box-01,
  .ms_accordion-box .inner-box-02 {
    display: flex;
    column-gap: 3%;
    width: 90%;
    margin: 0 auto;
    padding: var(--space-2) 0 var(--space-8);
  }

  .ms_accordion-box .inner-box-01 {
    flex-direction: row-reverse;
  }

  .ms_accordion-box {
    display: block;
  }

  .sub-ms-box .img-box,
  .ms_accordion-box .img-box {
    width: 48.5%;
  }

  .sub-ms-box .text-wrap,
  .ms_accordion-box .text-wrap {
    width: 48.5%;
  }

  .sub-ms-box .copy {
    font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
    line-height: 35px;
    padding: 0 0 var(--space-4);
  }
}


@media (min-width: 1000px) {
  .main-ms-box h3 {
    font-size: var(--fs-3xl);
  }

  .main-ms-box h3 span {
    background: var(--color-grad-red-yellow);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-radius: 3px;
  }

  .sub-ms-box .copy {
    line-height: 38px;
  }
}

@media (min-width: 1280px) {
  .sub-ms-box .copy {
    font-size: var(--fs-3xl);
    line-height: 52px;
  }

  .sub-ms-box .inner-text,
  .ms_accordion-box .inner-text {
    font-size: var(--fs-md);
    line-height: 32px;
  }
}

@media (min-width: 1500px) {
  .main-ms-box h3 {
    font-size: var(--fs-4xl);
    line-height: 40px;
  }

  .main-ms-box h3 span {
    border-radius: 4px;
  }

  .main-ms-box h3 span:first-child {
    margin-bottom: var(--space-4);
  }

  .sub-ms-box .copy {
    padding-bottom: var(--space-12);
  }

  .sub-ms-box .inner-text,
  .ms_accordion-box .inner-text {
    font-size: var(--fs-md);
    line-height: 32px;
  }
}


/* ===== セクション４：recruit-interview ===== */

.recruit-interview {
  background: var(--color-bg-grad-blue-green);
}

.int-sec .int-title {
  text-align: center;
  width: 70%;
  margin: 0 auto;
}

.recruit-interview .int-sec {
  padding-bottom: var(--space-6);
}


.int-sec h3 {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-lg);
  line-height: 24px;
  margin: 0;
  padding: var(--space-4) 0 var(--space-2);
  position: relative;
  display: inline-block;
}

.int-sec h3::before,
.int-sec h3::after {
  content: "";
  position: absolute;
  bottom: 12px;
  background-color: #333333;
  width: 2px;
  height: 16px;
}

.int-sec h3::before {
  left: -20px;
  rotate: -26deg;
}

.int-sec h3::after {
  right: -20px;
  rotate: 26deg;
}

.int-box .text-wrap {
  width: 90%;
  margin: 0 auto;
  padding: var(--space-8) 0 0;
}

.int-box .catch {
  color: var(--color-text-green);
  font-weight: 700;
  font-size: clamp(var(--fs-lg), 5.5vw, var(--fs-2xl));
  line-height: clamp(32px, 9vw, 38px);
  border-bottom: 3px solid var(--color-text-green);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
}

.int-box .profile {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 26px;
  margin-bottom: var(--space-6);
}

.int-box .int-lead {
  font-size: var(--fs-sm);
  line-height: 26px;
}

.qa-container {
  width: 90%;
  margin: 0 auto;
}

.qa-box {
  margin: var(--space-6) 0;
}

.qa-box .qa-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.qa-box .question {
  color: var(--color-text-green);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.qa-box .answer {
  font-size: var(--fs-sm);
  line-height: 26px;
}



@media (min-width: 768px) {
  .int-sec h3 {
    font-size: var(--fs-lg);
    padding: var(--space-8) 0 var(--space-6);
  }

  .int-sec h3 br {
    display: none;
  }

  .int-sec h3::before,
  .int-sec h3::after {
    bottom: 22px;
    width: 2px;
    height: 22px;
  }

  .int-sec h3::before {
    left: -20px;
    rotate: -26deg;
  }

  .int-sec h3::after {
    right: -20px;
    rotate: 26deg;
  }
}


@media (min-width: 1000px) {
  .recruit-interview {
    width: 100%;
    max-width: initial;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
  }

  .recruit-interview .int-sec {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
  }

  .recruit-interview .int-sec:not(:first-child) {
    padding-top: var(--space-8);
  }

  .recruit-interview .int-sec:not(:last-child) {
    padding-bottom: var(--space-8);
  }


  .int-sec h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: var(--ls-xl);
    line-height: 34px;
    padding: var(--space-8) 0 var(--space-6);
  }

  .int-sec h3::before,
  .int-sec h3::after {
    bottom: 24px;
    border-radius: 1px;
    height: 26px;
  }

  .int-sec h3::before {
    left: -22px;
  }

  .int-sec h3::after {
    right: -22px;
  }

  .qa-container {
    width: 100%;
    padding-top: var(--space-2);
  }

  .int-box .flex-box,
  .int-box .qa-wrap {
    display: flex;
    margin: 0 auto var(--space-8);
    column-gap: 3%;
  }

  .qa-box:nth-child(even) .qa-wrap {
    flex-direction: row-reverse;
  }

  .qa-box {
    margin: 0 auto;
  }

  .int-box .qa-wrap {
    width: 100%;
  }

  .int-box .flex-box .img-box,
  .int-box .flex-box .text-wrap,
  .int-box .qa-wrap .qa-list,
  .int-box .qa-wrap .img-box {
    width: 48.5%;
  }

  .int-box .text-wrap {
    padding-top: 0;
  }

}


@media (min-width: 1280px) {
  .int-box .int-lead {
    font-size: var(--fs-md);
    line-height: 32px;
  }

  .qa-box .question {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-3);
  }

  .qa-box .answer {
    font-size: var(--fs-md);
    line-height: 30px;
  }
}


/* ===== セクション５：site-visit ===== */

.video-box {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-2) 0 var(--space-8);
}

@media (min-width: 768px) {
  .site-visit {
    padding-bottom: var(--space-12);
  }

  .video-box {
    padding: var(--space-4) 0 var(--space-12);
  }
}


/* ===== セクション６：job-description ===== */
.job-description {
  background: var(--color-bg-grad-blue-green);
  margin-bottom: var(--space-6);
  padding-bottom: 0;
}

.job-list {
  width: 90%;
  margin: 0 auto;
  padding: var(--space-1) 0 var(--space-12);
}

.job-list table {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-collapse: collapse;
}

.job-list tr:first-child {
  border-top: 1px solid var(--color-line-black);
}

.job-list th,
.job-list td {
  letter-spacing: var(--ls-base);
  border-bottom: 1px solid var(--color-line-black);
  padding-inline-start: 12px;
  padding: var(--space-3);
  text-align: left;
}

.job-list th {
  text-align: center;
  width: clamp(80px, 20vw, 120px);
  background-color: var(--color-bg-mint-green);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.job-list td {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.job-list td p {
  font-weight: 500;
}

.job-description .back-img-box {
  background: url(../images/sec06_bg_construction-site.webp) no-repeat center;
  width: 100%;
  background-size: 140%;
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .job-description {
    width: 100%;
    max-width: initial;
  }

  .job-list {
    padding-top: var(--space-4);
  }

  .job-list table {
    margin-bottom: var(--space-8);
  }

  .job-list th,
  .job-list td {
    font-size: var(--fs-md);
    padding: var(--space-4);
    letter-spacing: var(--ls-lg);
  }

  .job-description .back-img-box {
    width: 100%;
    background-size: 100%;
    aspect-ratio: 2.4 / 1;
  }
}

@media (min-width: 1000px) {
  .job-list th,
  .job-list td {
    padding: var(--space-6);
  }
}


/* ===== セクション７：contact ===== */
.contact {
  padding-bottom: var(--space-12);
}

.contact .com_head-dec-box .copy a {
  display: inline-block;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-base);
  color: var(--color-text-green);
}

.contact .com_head-dec-box .copy span {
  text-decoration: underline;
}


.contact .tel-box {
  text-align: center;
  padding: var(--space-3) 0;
}

.contact .tel-box p {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-lg);
}

.contact .tel-box address {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--ls-2xl);
  line-height: 22px;
}

.form-box {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

.form-item-box {
  width: 100%;
  max-width: 100%;
}

.form-item-box dl {
  margin: var(--space-1) 0;
}

.form-item-box .cell1 {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-xl);
  font-weight: 500;
  background-color: var(--color-bg-gray);
  margin-bottom: var(--space-1);
  padding: var(--space-2) var(--space-4);
}

.form-item-box .cell2 {
  font-size: var(--fs-sm);
  margin-left: 0;
  padding: var(--space-2) var(--space-3);
}

.form-item-box .cell1 .red {
  font-size: var(--fs-xxs);
  color: var(--color-text-red);
}

.radio-list input {
  margin-right: var(--space-1);
}

.radio-list input:nth-of-type(even) {
  margin-left: var(--space-3);
}

.form-item .input-space {
  margin-right: var(--space-3);
  width: 150px;
}

.form-item .form-hint {
  color: var(--color-text-gray);
  font-size: var(--fs-xxs);
  letter-spacing: var(--ls-lg);
}

.form-item textarea {
  width: 100%;
  box-sizing: border-box;
}

.contact .link-box {
  text-align: center;
}

.contact .link-box a {
  display: inline-block;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-base);
  color: var(--color-text-green);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .contact .com_head-dec-box .copy a {
    font-size: var(--fs-md);
  }

  .contact .tel-box {
    text-align: center;
    padding: var(--space-8) 0 var(--space-4);
  }

  .contact .tel-box p {
    font-size: var(--fs-lg);
    letter-spacing: var(--ls-lg);
  }

  .contact .tel-box address {
    font-size: var(--fs-3xl);
    letter-spacing: var(--ls-2xl);
    line-height: 32px;
  }

  .form-item-box .cell1 {
    font-size: var(--fs-ms);
    letter-spacing: var(--ls-2xl);
    margin-bottom: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  .form-item-box .cell2 {
    font-size: var(--fs-md);
    padding: var(--space-3) var(--space-4);
  }

  .form-item textarea {
    margin-top: var(--space-1);
  }
}

@media (min-width: 1280px) {
  .contact{
    padding-bottom: var(--space-15);
  }
}