@charset "UTF-8";
/* Scss Document */
:root {
  --min-size: 100px;
  --clamp-vw: 18vw;
}

@media (max-width: 1024px) {
  :root {
    --min-size: 60px;
    --clamp-vw: 10vw;
  }
}
.padding100 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 100px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 100px);
}

.padding110 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 110px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 110px);
}

.padding120 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 120px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 120px);
}

.padding130 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 130px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 130px);
}

.padding140 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 140px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 140px);
}

.padding150 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 150px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 150px);
}

.padding160 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 160px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 160px);
}

.padding170 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 170px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 170px);
}

.padding180 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 180px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 180px);
}

.padding190 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 190px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 190px);
}

.padding200 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 200px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 200px);
}

.padding210 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 210px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 210px);
}

.padding220 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 220px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 220px);
}

.padding230 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 230px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 230px);
}

.padding240 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 240px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 240px);
}

.padding250 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 250px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 250px);
}

.padding260 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 260px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 260px);
}

.padding270 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 270px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 270px);
}

.padding280 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 280px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 280px);
}

.padding290 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 290px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 290px);
}

.padding300 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 300px);
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 300px);
}

.margin100 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 100px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 100px);
}

.margin110 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 110px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 110px);
}

.margin120 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 120px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 120px);
}

.margin130 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 130px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 130px);
}

.margin140 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 140px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 140px);
}

.margin150 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 150px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 150px);
}

.margin160 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 160px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 160px);
}

.margin170 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 170px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 170px);
}

.margin180 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 180px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 180px);
}

.margin190 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 190px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 190px);
}

.margin200 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 200px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 200px);
}

.margin210 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 210px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 210px);
}

.margin220 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 220px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 220px);
}

.margin230 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 230px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 230px);
}

.margin240 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 240px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 240px);
}

.margin250 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 250px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 250px);
}

.margin260 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 260px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 260px);
}

.margin270 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 270px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 270px);
}

.margin280 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 280px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 280px);
}

.margin290 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 290px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 290px);
}

.margin300 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 300px);
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 300px);
}

.pt-100 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 100px);
}

.pt-110 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 110px);
}

.pt-120 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 120px);
}

.pt-130 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 130px);
}

.pt-140 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 140px);
}

.pt-150 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 150px);
}

.pt-160 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 160px);
}

.pt-170 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 170px);
}

.pt-180 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 180px);
}

.pt-190 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 190px);
}

.pt-200 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 200px);
}

.pt-210 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 210px);
}

.pt-220 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 220px);
}

.pt-230 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 230px);
}

.pt-240 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 240px);
}

.pt-250 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 250px);
}

.pt-260 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 260px);
}

.pt-270 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 270px);
}

.pt-280 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 280px);
}

.pt-290 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 290px);
}

.pt-300 {
  padding-top: clamp(var(--min-size), var(--clamp-vw), 300px);
}

.pb-100 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 100px);
}

.pb-110 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 110px);
}

.pb-120 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 120px);
}

.pb-130 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 130px);
}

.pb-140 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 140px);
}

.pb-150 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 150px);
}

.pb-160 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 160px);
}

.pb-170 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 170px);
}

.pb-180 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 180px);
}

.pb-190 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 190px);
}

.pb-200 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 200px);
}

.pb-210 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 210px);
}

.pb-220 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 220px);
}

.pb-230 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 230px);
}

.pb-240 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 240px);
}

.pb-250 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 250px);
}

.pb-260 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 260px);
}

.pb-270 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 270px);
}

.pb-280 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 280px);
}

.pb-290 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 290px);
}

.pb-300 {
  padding-bottom: clamp(var(--min-size), var(--clamp-vw), 300px);
}

.mt-100 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 100px);
}

.mt-110 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 110px);
}

.mt-120 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 120px);
}

.mt-130 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 130px);
}

.mt-140 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 140px);
}

.mt-150 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 150px);
}

.mt-160 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 160px);
}

.mt-170 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 170px);
}

.mt-180 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 180px);
}

.mt-190 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 190px);
}

.mt-200 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 200px);
}

.mt-210 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 210px);
}

.mt-220 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 220px);
}

.mt-230 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 230px);
}

.mt-240 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 240px);
}

.mt-250 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 250px);
}

.mt-260 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 260px);
}

.mt-270 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 270px);
}

.mt-280 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 280px);
}

.mt-290 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 290px);
}

.mt-300 {
  margin-top: clamp(var(--min-size), var(--clamp-vw), 300px);
}

.mb-100 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 100px);
}

.mb-110 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 110px);
}

.mb-120 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 120px);
}

.mb-130 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 130px);
}

.mb-140 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 140px);
}

.mb-150 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 150px);
}

.mb-160 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 160px);
}

.mb-170 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 170px);
}

.mb-180 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 180px);
}

.mb-190 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 190px);
}

.mb-200 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 200px);
}

.mb-210 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 210px);
}

.mb-220 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 220px);
}

.mb-230 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 230px);
}

.mb-240 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 240px);
}

.mb-250 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 250px);
}

.mb-260 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 260px);
}

.mb-270 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 270px);
}

.mb-280 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 280px);
}

.mb-290 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 290px);
}

.mb-300 {
  margin-bottom: clamp(var(--min-size), var(--clamp-vw), 300px);
}

a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
}

a {
  -webkit-tap-highlight-color: transparent;
  transition: opacity 300ms ease-in-out, color 300ms ease-in-out, background-color 300ms ease-in-out, transform 300ms ease-out, box-shadow 300ms ease-out, background-position 300ms ease-out;
}
@media (hover: hover) {
  a:hover {
    opacity: 80%;
  }
}
@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}
a:focus:not(:focus-visible) {
  outline: none;
}

/************************/
/* 共通：文字・ボタン */
.eng_48 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 700;
  letter-spacing: 0em;
}

.eng_56 {
  font-size: clamp(24px, 3vw, 56px);
  font-weight: 400;
  letter-spacing: 0em;
}

.title_96 {
  font-size: clamp(32px, 5vw, 96px);
  font-weight: 600;
  letter-spacing: 0em;
}

.eng_88 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(40px, 5vw, 88px);
  font-weight: 500;
  letter-spacing: 0em;
  text-box: trim-both cap alphabetic;
  padding-top: 14px;
  padding-bottom: 14px;
}

.title_32 {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: 0em;
}

.title_24 {
  font-size: clamp(23px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0em;
}

.title_28 {
  font-size: clamp(26px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
}

.title_48 {
  font-size: clamp(22px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0em;
}

.eng_96 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(32px, 5vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
}

.eng_152 {
  font-family: "din-2014", sans-serif;
  font-size: clamp(54px, 8vw, 152px);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0em;
}

.eng_77 {
  font-family: "din-2014", sans-serif;
  font-size: clamp(48px, 4vw, 77px);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0em;
}

.eng_64 {
  font-family: "din-2014", sans-serif;
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0em;
}

.title_56 {
  font-size: clamp(28px, 3vw, 56px);
  font-weight: 700;
  letter-spacing: 0em;
}

.color_0175c1 {
  color: #0175c1;
}

.eng_125 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(44px, 7vw, 125px);
  font-weight: 500;
  letter-spacing: 0em;
  text-box: trim-both cap alphabetic;
  padding-top: 20px;
  padding-bottom: 20px;
}

.title_40 {
  font-family: "Source Han Serif JP", serif;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: 0em;
  padding-left: 120px;
  background: url("../images/line_blue.webp") left center no-repeat;
}
.title_40.light {
  background-image: url("../images/line_white.webp");
}

.color_172b3f {
  color: #172b3f;
}

.bg_fff {
  background-color: #fff;
}

.more_btn {
  max-width: 511px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  letter-spacing: 0em;
}
.more_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 75px;
  border-radius: 8px;
  color: #fff;
  background: #0175c1 url("../images/arrow_white.webp") right 40px center no-repeat;
}
.more_btn a:hover {
  background-color: #172b3f;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .more_btn a:hover {
    transform: translateY(-3px);
    background-position: right 34px center;
  }
}
.more_btn.light {
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
}
.more_btn.light a {
  padding: 32px 55px;
  color: #0175c1;
  background-color: #fff;
  background-image: url("../images/arrow_blue.webp");
  background-position: right 20px center;
}
.more_btn.light a:hover {
  background-color: #e7f1f8;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .more_btn.light a:hover {
    background-position: right 14px center;
  }
}

/* 共通：フォーム送信ボタン（more_btnの入力要素版） */
.more_btn input[type=submit] {
  display: block;
  width: 100%;
  padding: 32px 75px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  color: #fff;
  background: #0175c1 url("../images/arrow_white.webp") right 40px center no-repeat;
  transition: opacity 300ms ease-in-out, color 300ms ease-in-out, background-color 300ms ease-in-out, transform 300ms ease-out, box-shadow 300ms ease-out, background-position 300ms ease-out;
}
.more_btn input[type=submit]:hover {
  background-color: #172b3f;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .more_btn input[type=submit]:hover {
    transform: translateY(-3px);
    background-position: right 34px center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .more_btn input[type=submit] {
    transition: none;
  }
}

/* 共通：ページネーション（指定HTMLのpagenationを使用） */
.pagenation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, (100vw * 26 / 1920), 26px);
}
.pagenation li {
  display: grid;
  place-items: center;
  width: clamp(48px, (100vw * 95 / 1920), 95px);
  aspect-ratio: 1;
  font-family: "din-2014", sans-serif;
  font-size: clamp(24px, (100vw * 40 / 1920), 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0em;
  color: #0175c1;
  background: #fff;
}
.pagenation li.active {
  color: #fff;
  background: #0175c1;
}
.pagenation a {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  color: inherit;
}
.pagenation a:hover {
  background-color: #d8eaf6;
}
.pagenation .prev a::before {
  content: "";
  width: 40%;
  aspect-ratio: 38/30;
  background: url("../images/pager.webp") center/contain no-repeat;
  transform: rotate(180deg);
}
.pagenation .next a::before {
  content: "";
  width: 40%;
  aspect-ratio: 38/30;
  background: url("../images/pager.webp") center/contain no-repeat;
}

/* 共通：初回表示の動き。JSが動かない場合も本文は最初から表示する。 */
.motion_in {
  animation: motion_rise 700ms ease-out var(--motion-delay, 0ms) both;
}

.motion_photo {
  animation-name: motion_wipe;
  animation-duration: 900ms;
}

@keyframes motion_rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 写真の右端を斜めに開く。画像のサイズ・トリミングは変えない。 */
@keyframes motion_wipe {
  from {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, -18% 100%, 0 100%);
  }
  to {
    opacity: 1;
    clip-path: polygon(0 0, 118% 0, 100% 100%, 0 100%);
  }
}
@media (prefers-reduced-motion: reduce), print {
  .motion_in {
    animation: none;
  }
}
/* 共通：ロゴ（メニュー専用のスタイルは css/spmenu.css） */
.logo {
  width: 36%;
  max-width: 489px;
}
.logo img {
  max-width: 100%;
  height: auto;
}

/* トップ：ファーストビュー（コピーは通常フロー） */
.top_fv {
  display: grid;
  grid-template-columns: 1fr;
  background: url("../images/fv.webp") center top/cover no-repeat;
  color: #fff;
  padding-top: clamp(220px, 24vw, 475px);
  padding-bottom: 76px;
}

.top_fv_copy {
  grid-area: 1/1;
  padding-left: 4%;
  padding-right: 4%;
}

.top_fv_recruit {
  grid-area: 1/1;
  align-self: end;
  justify-self: end;
  width: 28%;
  max-width: 538px;
  margin-right: 3px;
  margin-bottom: -72px;
}
.top_fv_recruit img {
  width: 100%;
  height: auto;
}

/* 共通：斜め背景（内容に応じて伸長。ノイズは繰り返し、斜め装飾は上下端へ追従） */
.bg_slant {
  display: flow-root;
  position: relative;
  isolation: isolate;
  background-color: #f1f7fa;
  /* 斜め装飾・薄色・ノイズの順に重ね、色の合成モードには依存しない。 */
  background-image: var(--slant-img, none), linear-gradient(rgb(240 248 252 / 94%), rgb(240 248 252 / 94%)), url("../images/bg_noise.webp");
  background-position: var(--slant-position, center var(--slant-y, 0px)), center, center var(--noise-y, 0%);
  background-size: var(--slant-size, 100% auto), auto, calc(100% * 2074 / 1920) auto;
  background-repeat: var(--slant-repeat, no-repeat), no-repeat, repeat-y;
}
.bg_slant::before {
  content: var(--slant-start, "");
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(100% * 1135 / 1920);
  aspect-ratio: 1;
  background: url("../images/bg_corner.webp") center/100% auto no-repeat;
  pointer-events: none;
}
.bg_slant::after {
  content: var(--slant-end, "");
  position: absolute;
  left: calc(100% * 785 / 1920);
  bottom: var(--slant-bottom, 0px);
  z-index: -1;
  width: calc(100% * 1135 / 1920);
  aspect-ratio: 1;
  background: url("../images/bg_corner.webp") center/100% auto no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

/* トップ：お知らせ・会社紹介 */
.top01_bg {
  --noise-y: calc(-100vw * 166 / 1920);
}
.top01_bg::after {
  /* 合成済み画像の写真部分だけを表示し、上下のグレーの帯は含めない。 */
  top: 0;
  left: calc(100% * 752 / 1920);
  bottom: auto;
  width: calc(100% * 1168 / 1920);
  aspect-ratio: 1168/515;
  background: url("../images/_top1_bg.webp") right calc(-100vw * 316 / 1920)/calc(100% * 1920 / 1168) auto no-repeat;
  transform: none;
}

.top01_news {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
  gap: 48px;
  width: calc(100% * 1245 / 1920);
  padding: 55px calc(100% / 12);
  color: #fff;
  background: #172b3f;
}

.top01_news_head {
  padding: 31px 35px 31px 0;
  border-right: 1px solid #8c969f;
}
.top01_news_head h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: 0em;
  text-box: trim-both cap alphabetic;
}
.top01_news_head p {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0em;
}

.top01_news_head a {
  color: inherit;
  text-decoration: underline;
}

.top01_news_list {
  display: grid;
  gap: 21px;
  font-size: 16px;
  font-weight: 400;
}
.top01_news_list a {
  display: grid;
  grid-template-columns: 80px 123px 1fr;
  align-items: center;
  gap: 16px;
  padding-right: 45px;
  color: inherit;
  background: url("../images/arrow_white.webp") right center no-repeat;
}
.top01_news_list span {
  border: 1px solid #fff;
  padding: 1px 5px;
  text-align: center;
}
.top01_news_list p {
  letter-spacing: 0em;
}

.top01_company {
  position: relative;
}

.top01_copy {
  position: relative;
  z-index: 1;
}

.top01_map {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% * 954 / 1920);
  max-width: 954px;
}
.top01_map p > img {
  max-width: 100%;
  height: auto;
}

/* 共通：英字装飾を右へ連続して流す */
.top01_loop {
  display: flex;
  overflow: hidden; /* 英字装飾を画面端で切り抜く */
  padding-top: 8px; /* 大文字の丸い上端が切れないように確保 */
  font-size: clamp(64px, 10vw, 193px);
  font-weight: 700;
  color: #c6d7e6;
  letter-spacing: 0em;
}
.top01_loop span {
  flex-shrink: 0;
  text-box: trim-both cap alphabetic;
  animation: loop_right 60s linear infinite;
}

@keyframes loop_right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce), print {
  .top01_loop span {
    animation: none;
  }
}
/* 共通：保有重機・NEWSの濃色背景（内容の増減に合わせて繰り返す） */
.bg_dark {
  color: #fff;
  background-color: #0e2133;
  background-image: url("../images/dark_burn.webp"), url("../images/dark_screen.webp"), url("../images/eq2.webp");
  background-position: left top, left top, center top;
  background-size: calc(100% * 1135 / 1920) auto, calc(100% * 1135 / 1920) auto, 100% auto;
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-blend-mode: color-burn, screen, normal;
}

/* トップ：共通背景の差分（中央の帯・ノイズ位置・下端の重なり） */
.top_slant {
  --slant-img: url("../images/bg_slant.webp");
  --slant-y: calc(100vw * 861 / 1920);
  --noise-y: calc(-100vw * 169 / 1920);
  --slant-start: none;
  --slant-bottom: calc(-100vw * 112 / 1920);
}

/* トップ：事業内容・施工事例の共通2カラム */
.top02_flex {
  display: flex;
  align-items: center;
  gap: calc(100% * 88 / 1920);
}

.top02_media {
  flex-shrink: 0;
  width: calc(100% * 1080 / 1920);
}

.top02_middle {
  width: calc(100% * 962 / 1080);
}

.top02_last {
  width: calc(100% * 844 / 1080);
}

.top02_copy {
  width: calc(100% * 520 / 1920);
}

/* トップ：保有重機（写真は通常フロー、背景だけ短くする） */
.top03_bg {
  position: relative;
  color: #fff;
}
.top03_bg::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(100vw * 196 / 1920) calc(100% / 12);
  background: #214a6d url("../images/top6_bg.webp") center/cover no-repeat;
}

.top03_flex {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(100vw * 246 / 1920);
  padding-left: calc(100% / 6);
  padding-right: calc(100% / 12);
}

.top03_copy {
  flex: 1;
  padding-bottom: calc(100vw * 316 / 1920);
}

.top03_photo {
  flex-shrink: 0;
  width: calc(100% * 625 / 1440);
}

/* トップ：施工事例（左右構成はtop02_flexを共用） */
.top04_photo {
  width: calc(100% * 1008 / 1080);
}

/* トップ：採用情報 */
.top05_bg {
  position: relative;
  color: #fff;
  background: linear-gradient(110deg, #548bb1, #669bb4 55%, #527ba1);
}
.top05_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/top8_bg.webp") center/cover no-repeat;
  /* 支給PNGに14%相当のalphaが含まれるため、opacityは重ねない */
  pointer-events: none;
}

.top05_copy {
  position: relative;
}
.top05_copy .more_btn {
  margin-left: auto;
  margin-right: auto;
}

.top05_head {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.top05_head .title_40 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.top05_gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 下層共通：ファーストビュー・ヘッダーロゴ */
.page_head {
  position: relative;
  z-index: 1;
  padding: 30px calc(100% * 62 / 1920);
  background: rgba(8, 26, 41, 0.1);
}
.page_head .logo {
  width: 35%;
  max-width: 297px;
  overflow: hidden; /* ロゴ画像右端のRECRUITを切り抜く */
}
.page_head .logo img {
  max-width: none;
  width: 129%;
}

.page_fv {
  margin-top: -95px;
  padding-top: clamp(240px, 24vw, 460px);
  padding-bottom: 74px;
  color: #fff;
  /* 共通の薄い青はCSSで重ね、ページごとの写真と分離する。 */
  background-image: linear-gradient(to right, rgb(40 105 159 / 35%), rgb(40 105 159 / 15%) 50%, rgb(40 105 159 / 0%)), var(--fv-img);
  background-position: center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
}

.page_fv_copy {
  padding-left: calc(100% * 104 / 1920);
  padding-right: 5%;
}

/* 会社案内：写真・斜め背景 */
.co_fv {
  --fv-img: url("../images/company1.webp");
}

/* 会社案内：共通背景に追加する中央の斜め帯のみ */
.co_slant {
  --slant-img: url("../images/company4.webp");
  --slant-y: calc(100vw * 816 / 1920);
}

/* 会社案内：代表挨拶 */
.co01_flex {
  display: flex;
  align-items: flex-start;
  gap: calc(100% * 101 / 1920);
}

.co01_media {
  flex-shrink: 0;
  width: calc(100% * 923 / 1920);
  margin-left: 0;
  margin-right: 0;
}

.co01_photo {
  width: calc(100% * 889 / 923);
}

.co01_name {
  position: relative;
  width: calc(100% * 514 / 923);
  margin-top: calc(-100vw * 149 / 1920);
  margin-left: auto;
  padding: 62px 4% 62px 21%;
  color: #fff;
  background: url("../images/company5.webp") center/100% 100% no-repeat;
}
.co01_name .title_32 {
  font-weight: 500;
  line-height: 1.2;
}
.co01_name .title_56 {
  font-weight: 500;
  line-height: 1.1;
}

.co01_copy {
  width: calc(100% * 657 / 1920);
  padding-top: clamp(70px, 10vw, 199px);
}

/* 会社案内：会社概要 */
.co02_bg {
  color: #fff;
  background: #284868 url("../images/company_bg.webp") center/cover no-repeat;
}

.co02_table {
  width: 100%;
}
.co02_table th {
  width: 22%;
  padding: 23px 48px;
  border-bottom: 1px solid #fff;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}
.co02_table td {
  padding: 23px 0;
  border-bottom: 1px solid #fff;
  text-align: left;
  vertical-align: top;
}
.co02_table a {
  color: inherit;
}

/* 会社案内：沿革（年・月・出来事を通常フローで対応） */
.co04_list {
  position: relative;
}
.co04_list::before {
  content: "";
  position: absolute;
  top: 59px;
  bottom: 0;
  left: calc(100% * 573 / 1280);
  border-left: 3px solid #0175c1;
  pointer-events: none;
}

.co04_row {
  display: grid;
  grid-template-columns: 28% 72%;
  padding: 32px calc(100% * 99 / 1280);
  border-bottom: 1px solid #c6d7e6;
}

.co04_date {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.co04_date .eng_48 {
  text-box: trim-both cap alphabetic;
  padding-top: 8px;
  padding-bottom: 8px;
}
.co04_date .eng_48 span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
}
.co04_date p {
  letter-spacing: 0em;
}

.co04_event {
  position: relative;
  display: grid;
  grid-template-columns: 9% 1fr;
  column-gap: 26%;
  align-items: first baseline;
  padding-top: 8px;
  padding-bottom: 8px;
}
.co04_event::before {
  content: "";
  position: absolute;
  top: 23px;
  left: calc(22% - 8px);
  width: 18px;
  aspect-ratio: 1;
  background: url("../images/company9.webp") center no-repeat;
  pointer-events: none;
}
.co04_event.start::before {
  top: 12px;
  left: calc(22% - 19px);
  width: 40px;
  background-image: url("../images/company8.webp");
}
.co04_event.anniv::before {
  top: 12px;
  left: calc(22% - 20px);
  width: 41px;
  background-image: url("../images/company10.webp");
}

.co04_month {
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.2;
  letter-spacing: 0em;
  text-align: right;
}

/* 会社案内：採用情報（色・ボタンはトップと共通） */
.co05_banner {
  width: calc(100% * 1760 / 1920);
  padding-left: calc(100% * 218 / 1920);
  padding-right: 5%;
  background: url("../images/recruit_banner_bg.webp") center/cover no-repeat;
}
.co05_banner::before {
  content: none;
}

.co05_copy {
  position: relative;
  max-width: 511px;
}

/* 事業内容：ファーストビュー・共通背景への斜め帯追加 */
.bu_fv {
  --fv-img: url("../images/business1.webp");
}

.bu_slant {
  --slant-img: url("../images/bg_slant.webp"), url("../images/bg_slant.webp");
  --slant-position: center calc(100vw * 2578 / 1920), center calc(100vw * 6085 / 1920);
  --slant-size: 100% auto, 100% auto;
  --slant-repeat: no-repeat, no-repeat;
  /* 本文サイズを保ち、縮小時にも見出しの階層を明確にする。 */
}
.bu_slant .title_40 {
  font-size: clamp(32px, 3vw, 40px);
  padding-left: clamp(44px, (100vw / 16), 120px);
  background-size: clamp(32px, (100vw * 104 / 1920), 104px) auto;
}
.bu_slant .title_32 {
  font-size: clamp(28px, 2vw, 32px);
}

/* 事業内容：4つのページ内リンク */
.bu_nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.bu_nav li {
  container-type: inline-size;
  background: url("../images/business2.webp") center/cover no-repeat;
}
.bu_nav li:nth-child(2) {
  background-image: url("../images/business3.webp");
}
.bu_nav li:nth-child(3) {
  background-image: url("../images/business4.webp");
}
.bu_nav li:nth-child(4) {
  background-image: url("../images/business5.webp");
}
.bu_nav a {
  display: block;
  padding: clamp(40px, 5vw, 79px) 12px;
  color: #fff;
  text-align: center;
}
.bu_nav a:hover {
  background-color: rgba(23, 43, 63, 0.2);
}
.bu_nav .title_48 {
  /* 4列・2列のどちらでも、各バナーの文字領域に合わせて縮小する。 */
  font-size: clamp(16px, ((100cqw - 24px) * 48 / 318), 48px);
}

.bu_nav_more {
  font-family: "Oswald", sans-serif;
  font-size: clamp(14px, ((100cqw - 24px) * 24 / 318), 24px);
  font-weight: 400;
  letter-spacing: 0em;
}
.bu_nav_more::after {
  content: "";
  display: inline-block;
  width: calc(1em * 18 / 24);
  aspect-ratio: 1;
  margin-left: 1em;
  background: url("../images/arrow_white.webp") center/contain no-repeat;
  transform: rotate(90deg);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .bu_nav_more::after {
    transition: transform 300ms ease-out;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bu_nav a:hover .bu_nav_more::after {
    transform: translateY(4px) rotate(90deg);
  }
}
/* 事業内容：4事業共通の番号・写真と本文 */
.bu01_num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-top: 5px;
  padding-left: calc(100% * 28 / 1920);
  color: #c6d7e6;
}
.bu01_num::after {
  content: "";
  flex: 1;
  align-self: center;
  margin-left: 33px;
  border-top: 4px solid currentColor;
}

.bu01_flex {
  display: flex;
  align-items: flex-start;
  gap: calc(100% * 80 / 1920);
}

.bu01_photo {
  flex-shrink: 0;
  width: calc(100% * 1026 / 1920);
}

.bu01_copy {
  width: calc(100% * 654 / 1920);
  container-type: inline-size;
}
.bu01_copy .eng_88 {
  /* 長い2行の英語見出しを、写真と本文の幅比率に合わせて縮小する。 */
  font-size: clamp(28px, (100cqw * 88 / 654), 88px);
  line-height: 1.1;
}
.bu01_copy .title_32 {
  line-height: 1.3;
}

.bu01_text {
  max-width: 574px;
}
.bu01_text p {
  line-height: 1.8;
  letter-spacing: 0em;
}

/* 事業内容：農業土木の図解カード（3列は土の販売にも共用） */
.bu02_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bu02_card {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.bu02_num {
  /* 数字・余白・三角背景をPCの64 : 174の比率で連動させる。 */
  font-size: clamp(28px, (100cqw * 64 / 464), 64px);
  padding: calc(1em * 9 / 64) calc(1em * 18 / 64);
  color: #fff;
}
.bu02_num::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: calc(1em * 174 / 64);
  aspect-ratio: 1;
  background: #0175c1;
  mask: url("../images/bg_corner.webp") left top/contain no-repeat;
  pointer-events: none;
}

.bu02_icon {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 82%;
  max-width: 380px;
  aspect-ratio: 380/200;
  margin-left: auto;
  margin-right: auto;
}
.bu02_icon img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

.bu02_copy {
  padding-left: 9%;
  padding-right: 9%;
  padding-bottom: 70px;
}
.bu02_copy p {
  line-height: 1.6;
  letter-spacing: 0em;
}

/* 事業内容：写真背景付きPOINT欄の共通レイアウト */
.bu_point {
  width: calc(100% * 1760 / 1920);
  padding-left: clamp(24px, (100vw / 8 - 80px), 160px);
  padding-right: clamp(24px, (100vw / 8 - 80px), 160px);
  color: #fff;
  background-color: #031121;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.bu_point_head {
  display: flex;
  align-items: center;
  gap: 24px;
}
.bu_point_head .title_40 {
  font-weight: 900;
}

/* 事業内容：農業土木のPOINT一覧 */
.bu02_point {
  margin-left: auto;
  padding-right: clamp(24px, (100vw / 5 - 144px), 240px);
  background-image: url("../images/business10.webp");
}

.bu02_list {
  display: grid;
  gap: 24px;
}

.bu02_row {
  display: grid;
  grid-template-columns: calc(100% * 196 / 1360) 1fr;
  column-gap: 45px;
  background: #fff;
}

.bu02_mark {
  display: grid;
  place-content: center;
  padding: 24px 10px;
  text-align: center;
  background: #0175c1;
}
.bu02_mark .title_32 {
  line-height: 1.2;
}

.bu02_detail {
  align-self: center;
  padding: 20px clamp(20px, 3vw, 35px) 20px 0;
  color: #345371;
}
.bu02_detail p {
  line-height: 1.6;
  letter-spacing: 0em;
}

/* 事業内容：土の販売のPOINTカード */
.bu03_point {
  background-image: url("../images/business14.webp");
}

.bu03_card {
  background: #fff;
  text-align: center;
}
.bu03_card .title_28 {
  padding-left: 4%;
  padding-right: 4%;
  padding-bottom: 50px;
  font-weight: 900;
  text-wrap: balance;
}

.bu03_mark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background: #0175c1;
}

/* 保有重機：ファーストビュー */
.eq_fv {
  --fv-img: url("../images/eq1.webp");
}

/* 保有重機：段違いの写真と紹介文 */
.eq01_flex {
  display: flex;
  align-items: center;
  gap: calc(100% * 80 / 1440);
}

.eq01_photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: calc(100% * 40 / 718);
  flex-shrink: 0;
  width: calc(100% * 718 / 1440);
}

.eq01_copy {
  flex: 1;
  max-width: 576px;
}
.eq01_copy .eng_88 {
  line-height: 1.1;
}
.eq01_copy .title_40 {
  font-size: clamp(28px, 3vw, 40px);
  padding-left: clamp(44px, (100vw / 16), 120px);
  background-size: clamp(32px, (100vw * 104 / 1920), 104px) auto;
}

/* 保有重機：開閉ボタン（文字は自然に折り返し、アイコンだけ絶対配置） */
.eq02_toggle button {
  position: relative;
  display: block;
  width: 100%;
  padding: 36px clamp(65px, 6vw, 106px) 36px clamp(20px, 3vw, 50px);
  border: 0;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0em;
  text-align: left;
  color: #fff;
  background: #0175c1;
  cursor: pointer;
  transition: opacity 300ms ease-in-out, color 300ms ease-in-out, background-color 300ms ease-in-out, transform 300ms ease-out, box-shadow 300ms ease-out, background-position 300ms ease-out;
}
.eq02_toggle button:hover {
  background-color: #005c99;
}
.eq02_toggle button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}
.eq02_toggle button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(20px, 3vw, 48px);
  width: clamp(24px, 3vw, 56px);
  aspect-ratio: 1;
  background: url("../images/minus.webp") center/contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}
.eq02_toggle button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(20px, 3vw, 48px);
  width: clamp(24px, 3vw, 56px);
  aspect-ratio: 1;
  background: url("../images/plus.webp") center/contain no-repeat;
  transform: translateY(-50%);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
  pointer-events: none;
}
.eq02_toggle button[aria-expanded=true]::after {
  opacity: 0;
  transform: translateY(-50%) rotate(90deg);
}
.eq02_toggle small {
  display: inline-block;
  margin-left: clamp(12px, 1vw, 24px);
  padding-left: clamp(40px, (100vw / 16), 126px);
  font-family: "Source Han Serif JP", serif;
  font-size: clamp(20px, (100vw * 28 / 1920), 28px);
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  background: url("../images/line_white.webp") left center/clamp(28px, (100vw * 104 / 1920), 104px) auto no-repeat;
}

/* 保有重機：機種・台数一覧（高さを固定せず、追記に対応） */
.eq02_panel {
  padding: 18px 24px 38px;
  color: #345371;
  background: #fff;
}

.eq02_list > div {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: start;
  column-gap: 24px;
  padding: 22px clamp(12px, 2vw, 36px);
  border-bottom: 1px solid transparent;
  background: url("../images/line_pale.webp") left bottom/100% 1px no-repeat;
  line-height: 1.6;
}
.eq02_list dt {
  font-weight: inherit;
  overflow-wrap: anywhere;
}
.eq02_list dd {
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .eq02_toggle button {
    transition: none;
  }
  .eq02_toggle button::after {
    transition: none;
  }
}
/* 施工事例：ファーストビュー */
.wo_fv {
  --fv-img: url("../images/works1.webp");
}

/* 施工事例：カテゴリー */
.wo01_nav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.wo01_nav li {
  display: grid;
  font-family: "Source Han Serif JP", serif;
  font-size: clamp(18px, (100vw * 32 / 1920), 32px);
  font-weight: 600;
  letter-spacing: 0em;
}
.wo01_nav a {
  display: grid;
  align-content: center;
  padding: 24px 12px;
  border: 2px solid #0175c1;
  color: #0175c1;
  background: #fff;
  text-align: center;
}
.wo01_nav a:hover {
  color: #fff;
  background: #0175c1;
}
.wo01_nav .active a {
  color: #fff;
  background: #0175c1;
}

/* 施工事例：一覧（内容追加時もカード高と背景が追従する） */
.wo01_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 32px;
}

.wo01_card {
  display: block;
  padding: clamp(24px, (100vw * 46 / 1920), 46px) clamp(20px, (100vw * 56 / 1920), 56px);
  border-left: 10px solid #0e2133;
  color: inherit;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  overflow-wrap: anywhere;
}
.wo01_card h2 {
  font-size: clamp(26px, (100vw * 40 / 1920), 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0em;
}

.wo01_meta {
  display: grid;
  /* カテゴリー名が1行に収まる最小幅を確保する。 */
  grid-template-columns: minmax(max-content, calc(100% * 174 / 502)) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(12px, (100vw * 32 / 1920), 32px);
  font-weight: 500;
}
.wo01_meta p {
  letter-spacing: 0em;
}

.wo01_tag {
  padding: 12px;
  font-size: clamp(18px, (100vw * 24 / 1920), 24px);
  font-weight: 700;
  color: #fff;
  background: #0175c1;
  text-align: center;
}

/* お知らせ：ファーストビュー */
.ne_fv {
  --fv-img: url("../images/news1.webp");
}

/* お知らせ：記事一覧（写真・本文・詳細リンクを通常フローで配置） */
.ne01_list {
  display: grid;
  gap: 32px;
}

.ne01_card {
  background: #fff;
}
.ne01_card a {
  display: grid;
  grid-template-columns: calc(100% * 258 / 1168) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(24px, (100vw * 52 / 1920), 52px);
  padding: clamp(24px, (100vw * 56 / 1920), 56px);
  color: #345371;
}
.ne01_card a:hover {
  background-color: #edf5fa;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ne01_card a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
}

.ne01_photo {
  grid-row: 1/3;
}
.ne01_photo img {
  width: 100%;
  height: auto;
}

.ne01_copy {
  padding-top: clamp(0px, ((100vw - 768px) / 30), 38px);
  overflow-wrap: anywhere;
}

.ne01_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  font-size: clamp(18px, (100vw * 28 / 1920), 28px);
}
.ne01_meta p {
  letter-spacing: 0em;
}

.ne01_tag {
  padding: 3px 24px;
  font-weight: 500;
  color: #fff;
  background: #0175c1;
}

.ne01_more {
  grid-column: 2;
  justify-self: end;
  padding-right: 30px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(18px, (100vw * 24 / 1920), 24px);
  font-weight: 400;
  letter-spacing: 0em;
  color: #0181c1;
  background: url("../images/news_arrow.webp") right center no-repeat;
}

/* アクセス：ファーストビュー */
.ac_fv {
  --fv-img: url("../images/access1.webp");
}

/* アクセス：地図・所在地 */
.ac01_map iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440/492;
  border: 0;
}

.ac01_info h3 {
  font-size: clamp(28px, (100vw * 40 / 1920), 40px);
  font-weight: 700;
  letter-spacing: 0em;
}

.ac01_details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: clamp(18px, (100vw * 28 / 1920), 28px);
  color: #172b3f;
}
.ac01_details p {
  letter-spacing: 0em;
}
.ac01_details a {
  color: inherit;
  text-decoration: none;
}

/* アクセス：電車・車の案内 */
.ac01_routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.ac01_route {
  background: #fff;
}
.ac01_route > p {
  padding: clamp(24px, (100vw * 50 / 1920), 50px) 6%;
  font-size: clamp(18px, (100vw * 24 / 1920), 24px);
  line-height: 1.7;
  letter-spacing: 0em;
  text-align: center;
}

.ac01_route_head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 24px;
  padding: 26px 4%;
  color: #fff;
  background: #0175c1;
}
.ac01_route_head h3 {
  font-weight: 700;
  line-height: 1.1;
}
.ac01_route_head p {
  font-family: "Source Han Serif JP", serif;
  font-size: clamp(18px, (100vw * 28 / 1920), 28px);
  font-weight: 600;
  letter-spacing: 0em;
}

/* お問い合わせ：共通の濃色背景から斜めの明色装飾だけを外す */
.ac02_bg {
  background-image: url("../images/eq2.webp");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-blend-mode: normal;
  scroll-margin-top: 30px;
}

/* お問い合わせ：電話・フォーム共通の帯見出し */
.ac02_bar {
  padding: 42px 5%;
  color: #fff;
  background: #0175c1;
}
.ac02_bar .title_40 {
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(32px, (100vw / 16), 120px);
  background-size: clamp(24px, (100vw * 104 / 1920), 104px) auto;
  line-height: 1.3;
}

.ac02_phone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 36px;
  padding: 40px 5%;
  color: #345371;
}
.ac02_phone > p {
  letter-spacing: 0em;
  text-align: center;
}

.ac02_tel {
  font-size: clamp(32px, (100vw * 72 / 1920), 72px);
}
.ac02_tel a {
  display: flex;
  align-items: center;
  gap: 16px;
  color: inherit;
}
.ac02_tel img {
  flex-shrink: 0;
  width: clamp(48px, (100vw * 105 / 1920), 105px);
  height: auto;
}

/* お問い合わせ：CF7が生成するクラスへスタイルを指定 */
.ac02_form {
  padding: 56px clamp(20px, (100vw * 128 / 1920), 128px) 80px;
  color: #345371;
}
.ac02_form .wpcf7-form-control-wrap {
  display: block;
}
.ac02_form .wpcf7-text,
.ac02_form .wpcf7-textarea {
  width: 100%;
  padding: clamp(4px, 16px - 1vw, 12px) 12px;
  border: 1px solid #345371;
  border-radius: 0;
  font: inherit;
  line-height: 1.2;
  color: inherit;
  background: #fff;
}
.ac02_form .wpcf7-textarea {
  vertical-align: top;
  resize: vertical;
}
.ac02_form .wpcf7-text {
  box-sizing: border-box;
  height: 50px;
  padding: 8px 12px;
}
.ac02_form .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}
.ac02_form .wpcf7-list-item {
  display: inline-block;
  margin: 0;
}
.ac02_form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ac02_form .wpcf7-list-item input {
  flex-shrink: 0;
  width: 24px;
  aspect-ratio: 1;
  margin: 0 18px 0 0;
  accent-color: #0175c1;
}
.ac02_form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 10px;
  color: #c50119;
}
.ac02_form .wpcf7-spinner {
  position: absolute;
  bottom: -36px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
.ac02_form .wpcf7-response-output:empty {
  display: none;
}

.ac02_intro {
  font-size: clamp(18px, (100vw * 24 / 1920), 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0em;
  text-align: center;
}

.ac02_field {
  padding: 32px 24px;
  background: url("../images/line_pale.webp") left top/100% 1px no-repeat;
}

.ac02_label {
  font-size: clamp(20px, (100vw * 24 / 1920), 24px);
  letter-spacing: 0em;
}

.ac02_submit {
  position: relative;
  max-width: none;
  margin-left: 24px;
  margin-right: 24px;
  font-family: inherit;
  font-size: clamp(20px, (100vw * 24 / 1920), 24px);
  font-weight: 700;
}

/* 共通：フッター */
.footer {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #172b3f;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/footer_bg.webp") center/cover no-repeat;
  mix-blend-mode: soft-light;
  /* 支給PNGに67%相当のalphaが含まれるため、opacityは重ねない */
}
.footer a {
  color: inherit;
}
.footer a:hover {
  text-decoration: none;
}

.footer_in {
  padding-left: calc(100% / 24);
  padding-right: calc(100% / 24);
}

.footer_flex {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  font-size: 24px;
}

.footer_info {
  flex: 1;
}
.footer_info .logo {
  width: 100%;
  max-width: 395px;
}
.footer_info p:not(.logo) a:not(.event_none) {
  text-decoration: underline;
}

.footer_nav {
  text-align: right;
}
.footer_nav ul {
  display: grid;
  gap: 16px;
}

.copyright {
  font-size: 16px;
}

@media only screen and (max-width: 1024px) {
  /* 共通：中央配置の英語・日本語見出し */
  .top05_head {
    text-align: center;
  }
  /* トップ：ファーストビュー */
  .top_fv_recruit {
    grid-area: auto;
    width: 40%;
    margin-top: 30px;
    margin-bottom: -60px;
  }
  /* トップ：お知らせ・会社紹介 */
  .top01_news {
    width: 100%;
    padding: 40px 5%;
    grid-template-columns: 220px 1fr;
    gap: 30px;
  }
  .top01_news_head {
    padding-right: 30px;
  }
  .top01_map {
    width: 46%;
  }
  /* トップ：事業内容・施工事例 */
  .top02_flex {
    gap: 6%;
  }
  .top02_media {
    width: 48%;
  }
  .top02_copy {
    width: 41%;
  }
  /* トップ：保有重機 */
  .top03_flex {
    gap: 6%;
    padding-left: 10%;
    padding-right: 5%;
  }
  /* 会社案内：代表挨拶 */
  .co01_flex {
    gap: 4%;
  }
  .co01_media {
    width: 46%;
  }
  .co01_copy {
    width: 45%;
  }
  .co01_name {
    width: 85%;
    padding: 44px 6% 44px 25%;
  }
  /* 会社案内：会社概要 */
  .co02_table th {
    padding-left: 15px;
    padding-right: 15px;
  }
  /* 会社案内：沿革 */
  .co04_row {
    padding-left: 2%;
    padding-right: 2%;
  }
  .co04_date {
    display: block;
  }
  .co04_event {
    grid-template-columns: 16% 1fr;
    column-gap: 19%;
  }
  .co04_month {
    text-align: left;
  }
  .co04_list::before {
    left: calc(100% * 442 / 1000);
  }
  /* 施工事例：カテゴリーと発注者・工期を縦に配置 */
  .wo01_meta {
    display: block;
  }
  .wo01_tag {
    display: table;
  }
}
@media only screen and (max-width: 768px) {
  /* 共通：スマートフォンの文字・ボタン */
  .more_btn a {
    padding: 20px 55px;
    background-position: right 20px center;
  }
  .more_btn.light {
    font-size: 20px;
  }
  .more_btn.light a {
    padding: 26px 55px 26px 25px;
  }
  /* 下層共通：ファーストビュー */
  .page_head {
    padding: 25px 5%;
  }
  .page_head .logo {
    width: 60%;
    max-width: 240px;
  }
  .page_fv {
    margin-top: -78px;
  }
  .page_fv_copy .title_40 {
    padding-left: 60px;
    background-size: 45px auto;
  }
  /* トップ：ファーストビュー */
  .top_fv {
    background-position: 56% top;
  }
  .top_fv_recruit {
    width: 60%;
  }
  /* トップ：お知らせ・会社紹介 */
  .top01_bg {
    --slant-start: none;
    --slant-end: none;
  }
  .top01_news {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 35px 5%;
  }
  .top01_news_head {
    /* 見出し枠内のリンクを複製せず、スマホ時だけ記事の下へ並べる。 */
    display: contents;
    border-right: 0;
    padding: 0;
  }
  .top01_news_all {
    order: 1;
  }
  .top01_news_list {
    margin-top: 30px;
    gap: 25px;
  }
  .top01_news_list a {
    grid-template-columns: 100px 110px 1fr;
    column-gap: 15px;
    row-gap: 8px;
  }
  .top01_news_list a > p:last-child {
    grid-column: 1/-1;
  }
  .top01_map {
    position: relative;
    width: 75%;
    margin-left: auto;
    margin-top: 40px;
  }
  /* トップ：事業内容・施工事例 */
  .top02_flex {
    flex-wrap: wrap;
    row-gap: 40px;
  }
  .top02_media {
    width: 100%;
  }
  .top02_copy {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  /* トップ：保有重機 */
  .top03_bg::before {
    left: 0;
  }
  .top03_flex {
    display: block;
    padding-left: 5%;
    padding-right: 5%;
  }
  .top03_copy {
    padding-bottom: 0;
  }
  .top03_photo {
    width: 100%;
    margin-left: auto;
    margin-top: 40px;
  }
  /* トップ：採用情報 */
  .top05_gallery {
    gap: 10px;
  }
  /* 会社案内：代表挨拶 */
  .co01_flex {
    display: block;
  }
  .co01_media {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .co01_photo {
    width: calc(100% + 5vw);
    margin-left: -5vw;
  }
  .co01_name {
    width: 80%;
    margin-top: -60px;
    text-align: center;
  }
  .co01_copy {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  /* 会社案内：会社概要 */
  .co02_table th {
    width: 29%;
    padding-left: 0;
  }
  /* 会社案内：沿革 */
  .co04_list::before {
    left: 19px;
    top: 32px;
  }
  .co04_row {
    display: block;
    padding: 25px 0 25px 50px;
  }
  .co04_date {
    display: flex;
  }
  .co04_event {
    grid-template-columns: 55px 1fr;
    column-gap: 15px;
  }
  .co04_event::before {
    left: -38px;
    top: 16px;
  }
  .co04_event.start::before {
    left: -49px;
    top: 5px;
  }
  .co04_event.anniv::before {
    left: -50px;
    top: 5px;
  }
  /* 会社案内：採用情報 */
  .co05_banner {
    width: 95%;
    padding-left: 5%;
  }
  /* 事業内容：案内リンク・事業紹介 */
  .bu_nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .bu01_flex {
    display: block;
  }
  .bu01_photo {
    width: 100%;
  }
  .bu01_copy {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
  }
  /* 事業内容：図解カードとPOINT欄 */
  .bu02_grid {
    grid-template-columns: 1fr;
  }
  .bu_point {
    width: 95%;
  }
  .bu_point_head {
    display: block;
    text-align: center;
  }
  .bu_point_head .title_40 {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  .bu02_row {
    grid-template-columns: 25% 1fr;
    column-gap: 20px;
  }
  /* 保有重機：主要保有機械 */
  .eq01_flex {
    display: block;
  }
  .eq01_photos {
    width: 100%;
  }
  .eq01_copy {
    max-width: none;
    margin-top: 40px;
  }
  .eq01_copy .eng_88 {
    text-align: center;
  }
  .eq01_copy .title_40 {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  /* 保有重機：開閉ボタンの英語と日本語 */
  .eq02_toggle small {
    display: block;
    margin-left: 0;
    margin-top: 12px;
  }
  /* 施工事例：カテゴリー */
  .wo01_nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* 施工事例：一覧 */
  .wo01_grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
  }
  /* アクセス：見出し・地図・交通案内 */
  .ac01_head {
    text-align: center;
  }
  .ac01_head .title_40 {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  .ac01_map iframe {
    aspect-ratio: 4/3;
  }
  .ac01_routes {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 共通：スマートフォンのフッター */
  .footer_flex {
    display: block;
    font-size: 20px;
  }
  .footer_nav {
    margin-top: 40px;
    text-align: left;
  }
  .footer_nav ul {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
  }
}