@charset "utf-8";
.u-pb10 {
  padding-bottom: 10px;
}
.u-pb15 {
  padding-bottom: 15px;
}
.u-pb20 {
  padding-bottom: clamp(10px, var(--px-20), 20px);
}
.u-pb30 {
  padding-bottom: clamp(15px, var(--px-30), 30px);
}
.u-pb40 {
  padding-bottom: clamp(20px, var(--px-40), 40px);
}
.u-pb50 {
  padding-bottom: clamp(25px, var(--px-50), 50px);
}
.u-pb60 {
  padding-bottom: clamp(30px, var(--px-60), 60px);
}
.u-pb70 {
  padding-bottom: clamp(30px, var(--px-70), 70px);
}
.u-pb80 {
  padding-bottom: clamp(40px, var(--px-80), 80px);
}
.u-pb90 {
  padding-bottom: clamp(40px, var(--px-90), 90px);
}
.u-pb100 {
  padding-bottom: clamp(50px, var(--px-100), 100px);
}
.u-pb120 {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}
.u-mb10 {
  margin-bottom: 10px;
}
.u-mb15 {
  margin-bottom: 15px;
}
.u-mb20 {
  margin-bottom: clamp(10px, var(--px-20), 20px);
}
.u-mb30 {
  margin-bottom: clamp(15px, var(--px-30), 30px);
}
.u-mb40 {
  margin-bottom: clamp(20px, var(--px-40), 40px);
}
.u-mb50 {
  margin-bottom: clamp(25px, var(--px-50), 50px);
}
.u-mb60 {
  margin-bottom: clamp(30px, var(--px-60), 60px);
}
.u-mb70 {
  margin-bottom: clamp(30px, var(--px-70), 70px);
}
.u-mb80 {
  margin-bottom: clamp(40px, var(--px-80), 80px);
}
.u-mb90 {
  margin-bottom: clamp(40px, var(--px-90), 90px);
}
.u-mb100 {
  margin-bottom: clamp(50px, var(--px-100), 100px);
}
.u-mb120 {
  margin-bottom: clamp(50px, var(--px-120), 120px);
}

/* =====================
  c-slant : 上下を斜めにカットした帯（ABOUT / RECRUIT の紺ベース）
  1440基準で右下がり104pxの落差。下層でも使う。
===================== */
.c-slant {
  clip-path: polygon(
    0 0,
    100% var(--b-slant),
    100% 100%,
    0 calc(100% - var(--b-slant))
  );
}

/* =====================
  c-title : 英字SVG見出し + 罫線 + 日本語サブ
  英字は Century Gothic のアウトラインSVG（img/font/）を使う。
  --en-w に Figma上の実寸(px値の数字だけ)を渡すと 1440基準で可変する。
===================== */
.c-title {
  text-align: center;
  color: var(--b-navy);
  /* 各セクション側で Figma実寸に差し替える */
  --en-w: 300;
}
.c-title__en {
  display: block;
  margin-inline: auto;
  height: auto;
  width: clamp(
    calc(var(--en-w) * 0.62px),
    calc(var(--en-w) / 14.4 * 1vw),
    calc(var(--en-w) * 1px)
  );
}
.c-title__line {
  display: block;
  /* PC 150px / SP 100px */
  width: clamp(100px, 10.42vw, 150px);
  height: 3px;
  background: currentColor;
  margin: clamp(12px, var(--px-20), 20px) auto 0;
}
.c-title__ja {
  display: block;
  color: var(--b-color);
  /* PC・SPとも24px */
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin-top: clamp(6px, 0.69vw, 10px);
}
.c-title--white,
.c-title--white .c-title__ja {
  color: #fff;
}

/* =====================
  c-btn : 緑の「詳しくはこちら」ボタン
===================== */
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 1em;
  /* PC・SPとも 244×61 / 20px */
  min-width: 244px;
  padding: 10px 19px;
  background: var(--b-green);
  color: #fff;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.06em;
}
.c-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--b-green-border);
  pointer-events: none;
}
.c-btn__arrow {
  flex: none;
  width: clamp(28px, 2.64vw, 38px);
  height: auto;
  transition: translate 0.25s ease-in-out;
}
/* ホバー：地色が濃い緑に沈み、矢印が右へ進む。
   common.css の a:hover{opacity:.6} は打ち消す。
   地色が枠線と同色になるので、枠線は白に寄せて残す */
.c-btn:hover {
  opacity: 1;
  background: var(--b-green-border);
}
.c-btn:hover::before {
  border-color: rgba(255, 255, 255, 0.55);
}
.c-btn:hover .c-btn__arrow {
  translate: 6px 0;
}

/* =====================
  c-pagehead : 下層ページの見出し（写真 + 英字 + 日本語 + 飾り楕円）
===================== */
.c-pagehead {
  position: relative;
}
.c-pagehead__img {
  display: block;
  width: 100%;
  height: clamp(240px, 34.79vw, 501px);
  object-fit: cover;
}
/* 写真に乗せる黒50%（画像より上・見出しより下） */
.c-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}
/* 飾りは重ね装飾なので absolute */
.c-pagehead__deco {
  position: absolute;
  z-index: 2;
  top: 63%;
  left: 48.44%;
  translate: -50% -50%;
  width: clamp(300px, 46.04vw, 663px);
  max-width: none;
  height: auto;
}
.c-pagehead__title {
  position: absolute;
  z-index: 2;
  top: 60%;
  left: 50%;
  translate: -50% -50%;
  width: max-content;
  text-align: center;
}
.c-pagehead__en {
  display: block;
  margin-inline: auto;
  height: auto;
  width: clamp(
    calc(var(--en-w) * 0.62px),
    calc(var(--en-w) / 14.4 * 1vw),
    calc(var(--en-w) * 1px)
  );
}
.c-pagehead__ja {
  display: block;
  margin-top: clamp(8px, 1vw, 14px);
  color: #fff;
  font-size: clamp(2rem, 2.22vw, 3.2rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* =====================
  c-headline : 左右に罫線が伸びる見出し（「基礎工事」「べた基礎」など）
===================== */
.c-headline {
  display: flex;
  align-items: center;
  gap: var(--hl-gap, clamp(12px, 1.81vw, 26px));
  color: var(--b-navy);
  font-size: clamp(2.2rem, 2.22vw, 3.2rem);
  line-height: 1.4;
  white-space: nowrap;
}
.c-headline::before,
.c-headline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}

/* =====================
  c-slash-title : ＼テキスト／ の強調見出し
  斜線はmaskなので currentColor で色が変わる
===================== */
.c-slash-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.11vw, 16px);
  font-size: clamp(2.2rem, 2.22vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.c-slash-title::before,
.c-slash-title::after {
  content: "";
  flex: none;
  width: clamp(24px, 2.57vw, 37px);
  aspect-ratio: 37 / 38;
  background: currentColor;
  -webkit-mask: url(../img/bracket.svg) no-repeat center / contain;
  mask: url(../img/bracket.svg) no-repeat center / contain;
}
.c-slash-title::before {
  scale: -1 1;
}

/* =====================
  業務内容（page-business.php）
===================== */
.p-business-lead {
  position: relative;
  color: #fff;
  padding-block: clamp(60px, 8.4vw, 121px) clamp(80px, 13.82vw, 199px);
}
.p-business-lead__base {
  /* 下層の斜めカットは 94.36px / 1440 とトップより浅い */
  --b-slant: 6.553vw;
  position: absolute;
  inset: 0;
  background: var(--b-navy);
}
.p-business-lead__inner {
  position: relative;
}
.p-business-lead .c-title__en {
  --en-w: 182;
}
.p-business-lead .c-title__line {
  margin-top: clamp(20px, 2.99vw, 43px);
}
.p-business-lead__text {
  max-width: clamp(300px, 64.72vw, 932px);
  margin: clamp(30px, 3.96vw, 57px) auto 0;
}

/* べた基礎 / 布基礎 */
.p-business-item {
  margin-top: clamp(50px, 6.6vw, 95px);
}
.p-business-item__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 6.18vw, 89px);
  align-items: start;
  max-width: clamp(300px, 82.64vw, 1190px);
  margin: clamp(36px, 5.14vw, 74px) auto 0;
}
.p-business-item__text {
  line-height: 2.19;
}
.p-business-item__img {
  display: block;
  width: 100%;
  aspect-ratio: 537 / 373;
  object-fit: cover;
}
/* 布基礎は画像が左 */
.p-business-item--rev .p-business-item__text {
  order: 2;
}
.p-business-item:last-of-type {
  padding-bottom: clamp(60px, 8.33vw, 120px);
}

/* =====================
  採用情報（page-recruit.php）
===================== */
.p-recruit-lead {
  position: relative;
  color: #fff;
  padding-top: clamp(30px, 3.47vw, 50px);
}
/* 写真が紺の下にはみ出すので、紺だけ別レイヤーにして切り抜く */
.p-recruit-lead__base {
  --b-slant: 6.553vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: clamp(10px, 1.39vw, 20px);
  background: var(--b-navy);
}
.p-recruit-lead__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(200px, 30.76vw, 443px);
  gap: clamp(20px, 2.85vw, 41px);
  align-items: start;
}
.p-recruit-lead__body {
  padding-top: clamp(30px, 5.42vw, 78px);
}
.p-recruit-lead__text {
  margin-top: clamp(20px, 4.31vw, 62px);
}
.p-recruit-lead__img {
  display: block;
  width: 100%;
  aspect-ratio: 443 / 626;
  object-fit: cover;
}

/* 紹介動画 */
.p-recruit-movie {
  margin-top: clamp(40px, 4.58vw, 66px);
  width: clamp(300px, 53.75vw, 774px);
  margin-inline: auto;
}
.p-recruit-movie img {
  display: block;
  width: clamp(300px, 48.96vw, 705px);
  margin-inline: auto;
  aspect-ratio: 705 / 396;
  object-fit: cover;
}

/* 募集要項 */
.p-recruit-req {
  margin-top: clamp(60px, 9.86vw, 142px);
  padding-block: clamp(50px, 11.46vw, 165px) clamp(60px, 8.33vw, 120px);
  background: url(../img/area-bg.jpg) center / cover no-repeat;
}
.p-recruit-req__head {
  --hl-gap: clamp(20px, 3.68vw, 53px);
}
.p-recruit-req__box {
  width: clamp(300px, 54.79vw, 789px);
  margin: clamp(30px, 5vw, 72px) auto 0;
}
.p-recruit-req__label {
  padding-left: clamp(10px, 2.99vw, 43px);
  font-size: clamp(1.8rem, 1.67vw, 2.4rem);
  line-height: 1.2;
  color: var(--b-green-border);
}
.p-recruit-req__table {
  margin-top: clamp(20px, 3.4vw, 49px);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  line-height: 1.8;
}
/* 会社情報と同じく dt / dd で下線の色が違う（dd は薄い緑） */
.p-recruit-req__table dt,
.p-recruit-req__table dd {
  padding-block: clamp(14px, 1.39vw, 20px);
  border-bottom: 4px solid;
}
.p-recruit-req__table dt {
  flex: none;
  width: clamp(90px, 16.74vw, 241px);
  padding-left: clamp(10px, 3.47vw, 50px);
  border-color: var(--b-green-border);
}
.p-recruit-req__table dd {
  padding-left: clamp(10px, 6.74vw, 97px);
  border-color: #dcf1db;
  flex: 1;
}
.p-recruit-req__note {
  display: block;
  font-size: 0.875em;
}
.p-recruit-req__btn {
  margin-top: clamp(40px, 8.61vw, 124px);
}

/* =====================
  会社情報（page-company.php）
===================== */
.p-company {
  padding-block: clamp(50px, 10.9vw, 157px) clamp(60px, 8.33vw, 120px);
}
.p-company__table {
  width: clamp(300px, 65.14vw, 938px);
  margin: clamp(30px, 7.78vw, 112px) auto 0;
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  line-height: 1.8;
}
/* 下線は dt / dd で色が違うので、row ではなく各セルに付ける。
   dl .row は flex（align-items: stretch）なので dt と dd の下端が揃う */
.p-company__table dt,
.p-company__table dd {
  padding-block: clamp(16px, 1.78vw, 25px);
  border-bottom: 4px solid;
}
.p-company__table dt {
  flex: none;
  width: clamp(90px, 16.94vw, 244px);
  padding-left: clamp(10px, var(--px-40), 40px);
  border-color: var(--b-green-border);
}
.p-company__table dd {
  padding-left: clamp(10px, 10.97vw, 158px);
  border-color: #c6c7c6;
  flex: 1;
}
/* このページ専用のマップ（フッターの l-map とは別枠） */
.p-company__map {
  width: clamp(300px, 60.83vw, 876px);
  height: clamp(220px, 27.01vw, 389px);
  margin: clamp(50px, 12.43vw, 179px) auto 0;
}
.p-company__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =====================
  お問い合わせ（page-contact.php / Contact Form 7）
===================== */
.p-contact {
  padding-block: clamp(50px, 6.32vw, 91px) clamp(60px, 8.33vw, 120px);
}
.p-contact__lead {
  max-width: clamp(300px, 59.24vw, 853px);
  margin-inline: auto;
  line-height: 2.19;
}
.p-contact__tel {
  margin-top: clamp(30px, 4.58vw, 66px);
  text-align: center;
  line-height: 2.19;
}
.p-contact__tel-label {
  display: block;
  color: var(--b-blue);
}
.p-contact__tel a {
  color: inherit;
}
.p-contact__head {
  --hl-gap: clamp(10px, 1.46vw, 21px);
  margin-top: clamp(50px, 11.67vw, 168px);
}

/* フォーム本体（CF7の中身にこのクラスを付ける） */
.c-form {
  width: clamp(300px, 48.19vw, 694px);
  margin: clamp(40px, 7.85vw, 113px) auto 0;
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
}
.c-form .row {
  align-items: flex-start;
  padding-block: clamp(10px, 1.6vw, 23px);
}
.c-form dt {
  flex: none;
  width: clamp(120px, 17.29vw, 249px);
  padding-top: 0.6em;
  line-height: 1.6;
}
.c-form dd {
  flex: 1;
  min-width: 0;
}
.c-form__req {
  margin-left: 0.6em;
  color: red;
  font-size: 0.9375em;
}
/* 入力欄 */
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form textarea {
  width: 100%;
  padding: 0.5em 0.8em;
  border: 1px solid rgba(51, 51, 51, 0.35);
  background: #fff;
  font-family: inherit;
  font-size: max(1.6rem, 1em);
  line-height: 1.6;
  color: var(--b-color);
}
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"] {
  min-height: clamp(38px, 2.99vw, 43px);
  background: #e8e8e8;
}
.c-form textarea {
  min-height: clamp(140px, 13.89vw, 200px);
  resize: vertical;
  background: #e8e8e8;
}
.c-form input:focus-visible,
.c-form textarea:focus-visible {
  outline: 2px solid var(--b-blue);
  outline-offset: 1px;
}
/* ラジオ（CF7は span.wpcf7-list-item で出力される） */
.c-form__radio .wpcf7-list-item {
  display: inline-block;
  margin: 0 clamp(14px, 1.94vw, 28px) 0 0;
}
.c-form__radio .wpcf7-list-item-label {
  margin-left: 0.5em;
}
.c-form__radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--b-navy);
  vertical-align: -3px;
}

/* プライバシーポリシー */
.c-form__privacy {
  width: clamp(300px, 57.43vw, 827px);
  max-height: clamp(240px, 26.6vw, 383px);
  margin: clamp(30px, 7vw, 101px) auto 0;
  padding: clamp(16px, 2.29vw, 33px) clamp(16px, 1.94vw, 28px);
  border: 1px solid rgba(51, 51, 51, 0.35);
  overflow-y: auto;
  font-size: clamp(1.3rem, 1.11vw, 1.6rem);
  line-height: 2;
}
.c-form__privacy dt,
.c-form__privacy h3 {
  font-weight: 700;
}
.c-form__privacy p + h3 {
  margin-top: 1.5em;
}

/* 送信ボタン（inputなので c-btn の擬似要素が使えず、outline と背景で作る） */
.c-form__btn {
  margin-top: clamp(40px, 8.61vw, 124px);
}
.c-form__submit {
  min-width: 244px;
  padding: 10px 60px 10px 20px;
  border: 0;
  outline: 1px solid var(--b-green-border);
  outline-offset: -5px;
  background: var(--b-green) url(../img/arrow.svg) no-repeat right 19px center /
    clamp(28px, 2.64vw, 38px) auto;
  color: #fff;
  font-family: inherit;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  transition: 0.25s ease-in-out;
}
/* c-btn と同じ動き。矢印は background-image なので位置で寄せる */
.c-form__submit:hover {
  background-color: var(--b-green-border);
  background-position: right 13px center;
  outline-color: rgba(255, 255, 255, 0.55);
}

/* =====================
  下層のSP
  ※下層はSPカンプが無いので、トップのSPに合わせて調整している
  ※sub.css は main.css より後に読まれるため、下層のSP上書きはここに置く
===================== */
@media screen and (max-width: 680px) {
  /* 長い見出しがあるので SP は折り返しを許可する */
  .c-headline {
    font-size: 2rem;
    white-space: normal;
    text-align: center;
  }
  .c-slash-title {
    font-size: 2rem;
  }
  .c-pagehead__img {
    height: clamp(200px, 66.67vw, 300px);
  }
  .c-pagehead__deco {
    width: 92vw;
  }
  .c-pagehead__ja {
    font-size: 2.4rem;
  }
  .p-business-lead {
    padding-block: 16vw 20vw;
  }
  .p-business-lead__base {
    --b-slant: 12vw;
  }
  .p-business-lead .c-title__line {
    margin-top: 8vw;
  }
  .p-business-lead__text {
    max-width: none;
    margin-top: 10.67vw;
  }
  .p-business-item {
    margin-top: 16vw;
  }
  .p-business-item__body {
    grid-template-columns: 1fr;
    gap: 8vw;
    max-width: 89.33vw;
    margin-top: 10.67vw;
  }
  /* SPは画像を先に見せる（並び順は2ブロックとも同じ） */
  .p-business-item__img,
  .p-business-item--rev .p-business-item__img {
    order: -1;
  }
  .p-business-item--rev .p-business-item__text {
    order: 0;
  }
  .p-business-item:last-of-type {
    padding-bottom: 16vw;
  }

  /* 採用情報 */
  .p-recruit-lead {
    padding-block: 8vw 12vw;
  }
  .p-recruit-lead__base {
    --b-slant: 12vw;
    bottom: 0;
    height: 85%;
  }
  .p-recruit-lead__inner {
    grid-template-columns: 1fr;
    gap: 8vw;
  }
  .p-recruit-lead__body {
    padding-top: 8vw;
  }
  .p-recruit-lead__text {
    margin-top: 8vw;
  }
  .p-recruit-lead__img {
    aspect-ratio: 4 / 3;
  }
  .p-recruit-movie {
    margin-top: 12vw;
  }
  .p-recruit-movie img {
    width: 89.33vw;
  }
  .p-recruit-req {
    margin-top: 14vw;
    padding-block: 14vw;
  }
  .p-recruit-req__box {
    width: 89.33vw;
  }
  .p-recruit-req__label {
    padding-left: 0;
  }
  /* dl .row は common.css で縦積みになるので、ラベル幅とインデントを解除。
     dt/dd が縦に並ぶぶん、上下の余白も詰める（下線の色分けはそのまま） */
  .p-recruit-req__table dt {
    width: auto;
    padding: 0.8em 0 0.4em;
    font-weight: 700;
  }
  .p-recruit-req__table dd {
    padding: 0.4em 0 0.8em;
  }
  .p-recruit-req__btn {
    margin-top: 14vw;
  }

  /* 会社情報 */
  .p-company {
    padding-block: 14vw;
  }
  .p-company__table {
    width: 89.33vw;
    margin-top: 10.67vw;
  }
  /* dl .row は common.css で縦積みになるので、ラベル幅とインデントを解除。
     dt/dd が縦に並ぶぶん、上下の余白も詰める（下線の色分けはそのまま） */
  .p-company__table dt {
    width: auto;
    padding: 0.8em 0 0.4em;
    font-weight: 700;
  }
  .p-company__table dd {
    padding: 0.4em 0 0.8em;
  }
  .p-company__table a {
    color: inherit;
  }
  .p-company__map {
    width: 89.33vw;
    height: 60vw;
    margin-top: 14vw;
  }

  /* お問い合わせ */
  .p-contact {
    padding-block: 12vw 14vw;
  }
  .p-contact__lead {
    max-width: none;
  }
  .p-contact__tel {
    margin-top: 10vw;
  }
  .p-contact__head {
    margin-top: 16vw;
  }
  .c-form {
    width: 100%;
    margin-top: 10.67vw;
  }
  /* dl .row は common.css で縦積みになるので、ラベル幅を解除 */
  .c-form dt {
    width: auto;
    padding-top: 0;
    margin-bottom: 0.5em;
    font-weight: 700;
  }
  .c-form__radio .wpcf7-list-item {
    display: block;
    margin: 0 0 0.6em;
  }
  .c-form__privacy {
    width: 100%;
    max-height: 60vh;
    margin-top: 10.67vw;
  }
  .c-form__btn {
    margin-top: 12vw;
  }
  .c-form__submit {
    min-width: 0;
    width: 100%;
    max-width: 244px;
    text-align: center;
  }
}