/* ==========================================================================
   style.css — 下層ページ用
   読み込み順: reset.css → common.css → style.css
   ========================================================================== */

/* ==========================================================================
   下層共通レイアウト
   ========================================================================== */

main {
  overflow-x: clip;
  background-color: var(--color-base);
}

/* --------------------------------------------------------------------------
   l-stackSection（積み重なるセクション）
   -------------------------------------------------------------------------- */
.l-stack-section {
  --section-bleed: var(--section-overlap);
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-80) var(--radius-80) 0 0;
}

.l-stack-section + .l-stack-section {
  margin-top: calc(-1 * var(--section-overlap));
}

.l-stack-section--flat {
  border-radius: 0;
}

.l-stack-section > .c-bg-word {
  bottom: calc(1px + var(--section-bleed));
}

/* 白で終わる最終セクション用。CONTACT カードが乗るグレーの頭を、カード上端の --section-overlap ぶん上から
   フッターの白が始まる位置まで敷く。外すと角 R の外側の白が出ない */
.l-stack-section--before-contact {
  --section-bleed: calc(var(--footer-overlap) + var(--section-overlap));
}

.l-stack-section--before-contact::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: var(--section-bleed);
  background-color: var(--color-base);
  border-radius: var(--radius-80) var(--radius-80) 0 0;
}


/* ==========================================================================
   strength（渡辺電気工業所の強み）
   ========================================================================== */
/* --------------------------------------------------------------------------
   strengths（4つの強み）
   -------------------------------------------------------------------------- */

.strength-list {
  padding-top: clamp(80px, 8.333vw, 120px);
  padding-bottom: calc(clamp(80px, 9.444vw, 136px) + var(--section-bleed));
  background-color: var(--color-white);
}

.strength-list__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 3.889vw, 56px);
}

.strength-list__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

.strength-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 240px;
  padding: 27px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

.strength-list__num {
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1;
}

.strength-list__title {
  margin-top: auto;
  color: var(--color-red);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.strength-list__text {
  color: var(--color-text-sub);
  font-size: var(--fs-16);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

@supports (text-box: trim-both cap alphabetic) {
  .strength-list__num,
  .strength-list__title,
  .strength-list__text {
    text-box: trim-both cap alphabetic;
  }
}

/* 非対応ブラウザ */
@supports not (text-box: trim-both cap alphabetic) {
  .strength-list__num {
    margin-top: -0.179em;
    margin-bottom: -0.111em;
  }
  .strength-list__title {
    margin-bottom: -0.064em;
  }
  .strength-list__text {
    margin-top: -0.553em;
    margin-bottom: -0.414em;
  }
}

.strength-list__icon {
  position: absolute;
  top: 40px;
  right: min(36px, 8.451%);
  width: min(156px, 36.62%);
  height: auto;
  aspect-ratio: 1;
}

@media (max-width: 767px) {
  .strength-list__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   details（各強みの詳細）
   -------------------------------------------------------------------------- */
.strength-details {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-base);
}

.strength-details__list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5.556vw, 80px);
}

.strength-details__item {
  --details-icon-size: 283.4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.strength-details__item:first-child {
  --details-icon-size: 325.4px;
}

.strength-details__item:nth-child(even) {
  flex-direction: row-reverse;
}

.strength-details__photo {
  flex: 0 0 47.885%;
  min-width: 0;
  aspect-ratio: 498 / 348;
  object-fit: cover;
  border-radius: var(--radius-6);
}

.strength-details__body {
  display: grid;
  flex: 0 0 43.462%;
  min-width: 0;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "text text";
  align-items: center;
  column-gap: 51px;
  row-gap: 40px;
}

.strength-details__num {
  grid-area: num;
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: clamp(var(--fs-48), 5.278vw, var(--fs-76));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.strength-details__title {
  grid-area: title;
  color: var(--color-sumi);
  font-size: clamp(var(--fs-26), 2.361vw, var(--fs-34));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.strength-details__text {
  grid-area: text;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.strength-details__bg-icon {
  position: absolute;
  top: calc((340px - var(--details-icon-size)) / 2);
  width: var(--details-icon-size);
  height: var(--details-icon-size);
  opacity: 0.1;
  pointer-events: none;
}

.strength-details__item:nth-child(odd) .strength-details__bg-icon {
  right: calc((340px - var(--details-icon-size)) / 2);
}

.strength-details__item:nth-child(even) .strength-details__bg-icon {
  left: calc((340px - var(--details-icon-size)) / 2);
}

@media (max-width: 1024px) {
  .strength-details__bg-icon {
    display: none;
  }
}

@media (max-width: 767px) {
  .strength-details__item,
  .strength-details__item:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .strength-details__bg-icon {
    --details-icon-size: clamp(155px, calc(185px - 3.3vw), 175px);
    display: block;
    top: auto;
    bottom: 0;
  }
  .strength-details__item:nth-child(odd) .strength-details__bg-icon {
    right: 0;
  }
  .strength-details__item:nth-child(even) .strength-details__bg-icon {
    left: 0;
  }
  .strength-details__photo,
  .strength-details__body {
    flex: 0 0 auto;
  }
  .strength-details__body {
    column-gap: 24px;
    row-gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   qualifications（保有資格）
   -------------------------------------------------------------------------- */
.strength-qualifications {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-white);
}

.strength-qualifications__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 3.889vw, 56px);
}

.strength-qualifications__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.strength-qualifications__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 23px;
  color: var(--color-sumi);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

.strength-qualifications__item::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background-color: var(--color-red);
  border-radius: 50%;
}

.strength-qualifications__note {
  color: var(--color-sumi);
  font-size: var(--fs-15);
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (max-width: 767px) {
  .strength-qualifications__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   best（得意なこと）
   -------------------------------------------------------------------------- */
.strength-best {
  --section-bleed: var(--footer-overlap);
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 9.444vw, 136px) + var(--section-bleed));
  background-color: var(--color-base);
}

.strength-best__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.333vw, 48px);
}

.strength-best__lead {
  font-size: var(--fs-16);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
}

.strength-best__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.strength-best__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.strength-best__photo {
  width: 100%;
  aspect-ratio: 424 / 240;
  object-fit: cover;
  border-radius: var(--radius-6);
}

.strength-best__label {
  color: var(--color-red);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
}

.strength-best__title {
  color: var(--color-sumi);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.strength-best__bg-word {
  --bg-word-vw: 9.236vw;
  --bg-word-max: var(--fs-133);
}

@media (max-width: 767px) {
  .strength-best__list {
    grid-template-columns: 1fr;
  }
  .strength-best__item {
    gap: 10px;
  }
}

/* ==========================================================================
   service（事業案内。電気工事 / 水利工事 / 保守・メンテナンスの 3 ページ共通）
   ========================================================================== */
/* --------------------------------------------------------------------------
   serviceAbout（電気工事について）
   -------------------------------------------------------------------------- */
.service-about {
  position: relative;
  isolation: isolate;
  padding-block: clamp(80px, 8.889vw, 128px);
  padding-left: var(--content-pad-m);
}

.service-about__row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5.556vw, 80px);
}

.service-about__text {
  display: flex;
  flex: 0 0 45.455%;
  min-width: 0;
  flex-direction: column;
  gap: clamp(24px, 2.222vw, 32px);
}

.service-about__lead {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.service-about__photo {
  flex: 1 1 auto;
  min-width: 0; /* 既定の min-width: auto だと画像の実寸が下限になり縮まない */
  aspect-ratio: 640 / 340;
  object-fit: cover;
  border-radius: var(--radius-6);
}

@media (max-width: 767px) {
  .service-about__row {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .service-about__text,
  .service-about__photo {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   serviceCan（電気工事でできること）
   -------------------------------------------------------------------------- */
.service-can {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 9.444vw, 136px) + var(--section-bleed));
  background-color: var(--color-white);
}

.service-can__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 3.889vw, 56px);
}

.service-can__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

.service-can__item {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background-color: var(--color-white);
  border-radius: var(--radius-6);
}

.service-can__photo {
  width: 100%;
  aspect-ratio: 508 / 240;
  object-fit: cover;
}

.service-can__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 28px 27px 27px;
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-6) var(--radius-6);
}

.service-can__title {
  color: var(--color-sumi);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.service-can__text {
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.service-can__bg-word {
  --bg-word-vw: 9.514vw;
  --bg-word-max: var(--fs-137);
}

@media (max-width: 767px) {
  .service-can__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   serviceWorks（電気工事の施工実績）
   -------------------------------------------------------------------------- */
.service-works {
  --section-bleed: 0px;
  padding-block: clamp(80px, 8.889vw, 128px);
  background-color: var(--color-base);
}

.service-works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 2.778vw, 40px);
}

.service-works__lead {
  font-size: var(--fs-16);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
}

.service-works__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 767px) {
  .service-works__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   serviceNav（事業案内ナビ）
   -------------------------------------------------------------------------- */
.service-nav {
  display: flex;
  justify-content: center;
  padding-top: 64px;
  padding-bottom: calc(64px + var(--footer-overlap));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.service-nav__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100%, 972px);
  padding: 31px 39px 33px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

.service-nav__title {
  color: var(--color-sumi);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.service-nav__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
}

.service-nav__link {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--color-sumi);
}

.service-nav__photo {
  flex: 0 0 min(180px, 41.86%);
  min-width: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-6);
}

.service-nav__label {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.service-nav__en {
  color: var(--color-red);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
}

.service-nav__ja {
  font-size: clamp(var(--fs-15), 1.25vw, var(--fs-18));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.service-nav__link::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-red);
  mask: url("../img/common/icon_arrow.svg") no-repeat center / 20px 20px;
  -webkit-mask: url("../img/common/icon_arrow.svg") no-repeat center / 20px 20px;
  transition: translate var(--duration-normal) var(--ease-out);
}

.service-nav__link:hover::after {
  translate: 4px 0;
}

.service-nav__link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
  border-radius: var(--radius-6);
}

@media (max-width: 1024px) {
  .service-nav__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .service-nav__box {
    padding-inline: 23px;
  }
  .service-nav__link {
    gap: 12px;
  }
  .service-nav__photo {
    flex-basis: min(120px, 26%);
  }
}

/* ==========================================================================
   works（施工実績一覧）
   ========================================================================== */
/* --------------------------------------------------------------------------
   worksFilter（絞り込み）
   -------------------------------------------------------------------------- */
.works-filter {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 48px;
  padding-bottom: 64px;
  padding-inline: var(--content-pad-m);
  background-color: var(--color-white);
}

.works-filter__row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.works-filter__label {
  flex-shrink: 0;
  width: 56px;
  color: var(--color-sumi);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.works-filter__select {
  width: 200px;
}

.works-filter__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.works-filter__submit {
  padding: 17px 44px;
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  background-color: var(--color-red);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.works-filter__submit:hover {
  opacity: 0.85;
}

.works-filter__submit:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .works-filter__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  .works-filter__select {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   worksResults（検索結果）
   -------------------------------------------------------------------------- */
.works-results {
  position: relative;
  isolation: isolate;
  padding-top: clamp(64px, 6.667vw, 96px);
  padding-bottom: calc(clamp(80px, 8.333vw, 120px) + var(--footer-overlap));
  background-color: var(--color-base);
}

.works-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.works-results .c-pager {
  margin-top: 40px;
}

.works-results__bg-word {
  bottom: calc(1px + var(--footer-overlap));
}

@media (max-width: 767px) {
  .works-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   works detail（施工実績 詳細）
   ========================================================================== */
/* --------------------------------------------------------------------------
   worksHead（タイトル＋メイン写真）
   -------------------------------------------------------------------------- */
.works-head {
  padding-top: clamp(40px, 3.889vw, 56px);
  padding-bottom: clamp(64px, 6.667vw, 96px);
  padding-inline: var(--content-pad-m);
  background-color: var(--color-white);
}

.works-head__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.778vw, 40px);
  max-width: 1200px;
  margin-inline: auto;
}

.works-head__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.works-head__name {
  font-size: clamp(var(--fs-26), 2.5vw, var(--fs-36));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-sumi);
}

/* --------------------------------------------------------------------------
   worksPhoto（メイン 1 枚 ＋ サムネのスライダー）
   -------------------------------------------------------------------------- */
.works-photo {
  --works-photo-ratio: 0.75;
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 764px);
  margin-inline: auto;
}

.works-photo__main,
.works-photo__thumbs {
  width: 100%;
  min-width: 0;
}

.works-photo__main {
  border-radius: var(--radius-6);
}

.works-photo__main .swiper-slide,
.works-photo__thumbs .swiper-slide {
  height: auto;
}

.works-photo__main .swiper-slide {
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
  aspect-ratio: 1 / var(--works-photo-ratio);
}

.works-photo__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-6);
}

.works-photo__img--tall {
  width: auto;
  height: 100%;
}

.works-photo__nav {
  position: absolute;
  inset-inline: calc(-1 * min(72px, (100vw - 100cqi) / 2 - 16px));
  top: calc(100cqi * var(--works-photo-ratio) / 2);
  z-index: 2;
  justify-content: space-between;
  translate: 0 -50%;
  pointer-events: none;
}

/* SP */
@media (max-width: 767px) {
  .works-photo__nav {
    inset-inline: -20px;
  }
}

.works-photo__nav .c-slider-nav__button {
  pointer-events: auto;
}

.works-photo__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--radius-6);
}

.works-photo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.works-photo__thumb:hover img,
.works-photo__thumb:focus-visible img,
.swiper-slide-thumb-active .works-photo__thumb img {
  opacity: 1;
}

.works-photo__thumb:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   worksData（工事概要）
   -------------------------------------------------------------------------- */

.works-data {
  --works-data-word-height: min(10vw, var(--fs-144));
  position: relative;
  isolation: isolate;
  padding-top: clamp(80px, 7.778vw, 112px);
  padding-bottom: calc(var(--works-data-word-height) + clamp(20px, 2.083vw, 30px));
}

@media (max-width: 767px) {
  .works-data {
    --works-data-word-height: max(var(--fs-66), 10vw);
  }
}

.works-data__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.778vw, 40px);
}

/* --------------------------------------------------------------------------
   worksRelated（関連する施工実績）
   -------------------------------------------------------------------------- */
.works-related {
  padding-top: clamp(80px, 8.333vw, 120px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-white);
}

.works-related__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.333vw, 48px);
}

.works-related__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 767px) {
  .works-related__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   about（私たちについて）
   ========================================================================== */
/* --------------------------------------------------------------------------
   aboutLead（リード）
   -------------------------------------------------------------------------- */

.aboutus-lead {
  position: relative;
  isolation: isolate;
  padding-top: clamp(80px, 7.778vw, 112px);
  padding-bottom: clamp(64px, 6.667vw, 96px);
  padding-left: max(8.333%, calc(50% - 600px));
}

.aboutus-lead__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.333vw, 48px);
}

.aboutus-lead__row {
  display: grid;
  grid-template-columns:
    min(46.97%, 620px)
    min(7.576%, 100px)
    minmax(0, 1fr);
  align-items: start;
}

.aboutus-lead__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aboutus-lead__title {
  color: var(--color-sumi);
  font-size: clamp(var(--fs-28), 3.056vw, var(--fs-44));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.aboutus-lead__text p:not(.aboutus-lead__title) {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.aboutus-lead__photo {
  grid-column: 3;
  width: 100%;
  max-height: 420px;
  aspect-ratio: 600 / 420;
  overflow: clip;
  border-radius: var(--radius-6) 0 0 var(--radius-6);
}

.aboutus-lead__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .aboutus-lead {
    padding-inline: 0;
  }
  .aboutus-lead__inner {
    width: var(--content-width);
    margin-inline: auto;
  }
  .aboutus-lead__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .aboutus-lead__photo {
    grid-column: 1;
    border-radius: var(--radius-6);
  }
}

/* --------------------------------------------------------------------------
   philosophy（経営理念）
   -------------------------------------------------------------------------- */
.aboutus-philosophy {
  padding-top: clamp(96px, 11.667vw, 168px);
  padding-bottom: calc(clamp(96px, 11.667vw, 168px) + var(--section-bleed));
  background-color: var(--color-red);
}

.aboutus-philosophy__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.333vw, 48px);
}

.aboutus-philosophy__text {
  color: var(--color-white);
  font-size: clamp(var(--fs-22), 2.5vw, var(--fs-36));
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-align: center;
}

.aboutus-philosophy__bg-word {
  color: var(--color-bg-word-on-red);
}

/* --------------------------------------------------------------------------
   aboutus-policy（品質環境方針）
   -------------------------------------------------------------------------- */
.aboutus-policy {
  padding-top: clamp(80px, 6.667vw, 96px);
  padding-bottom: calc(clamp(80px, 7.778vw, 112px) + var(--section-bleed));
  background-color: var(--color-base);
}

.aboutus-policy__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.889vw, 56px);
}

.aboutus-policy__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.aboutus-policy-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-red);
  border-radius: var(--radius-6);
}

.aboutus-policy-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 31px;
  padding: 44px 39px 39px;
}

.aboutus-policy-card__head {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.aboutus-policy-card__head::before {
  content: attr(data-watermark);
  position: absolute;
  top: 2px;
  left: 50%;
  translate: -50% 0;
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: var(--policy-watermark-size, 13.571cqw);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.1;
  pointer-events: none;
}

@supports (text-box: trim-both cap alphabetic) {
  .aboutus-policy-card__head::before {
    text-box: trim-both cap alphabetic;
  }
}

.aboutus-policy-card__icon {
  width: 120px;
  height: 120px;
  background-color: var(--color-red);
}

.aboutus-policy-card--quality .aboutus-policy-card__icon {
  mask: url("../img/about/icon_verified.svg") no-repeat center / contain;
  -webkit-mask: url("../img/about/icon_verified.svg") no-repeat center / contain;
}

.aboutus-policy-card--environment {
  --policy-watermark-size: 12.143cqw;
}

.aboutus-policy-card--environment .aboutus-policy-card__icon {
  mask: url("../img/about/icon_leaf.svg") no-repeat center / contain;
  -webkit-mask: url("../img/about/icon_leaf.svg") no-repeat center / contain;
}

.aboutus-policy-card__title {
  color: var(--color-sumi);
  font-size: var(--fs-19);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.aboutus-policy-card__lead {
  width: 100%;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.aboutus-policy-card__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.aboutus-policy-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-15);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.aboutus-policy-card__list li::before {
  content: "";
  position: absolute;
  top: calc((1.7em - 6px) / 2);
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--color-red);
  border-radius: 50%;
}

@media (max-width: 767px) {
  .aboutus-policy__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .aboutus-policy-card__body {
    padding-inline: 23px;
  }
}

/* --------------------------------------------------------------------------
   message（代表ご挨拶）
   -------------------------------------------------------------------------- */
.aboutus-message {
  padding-top: clamp(80px, 7.778vw, 112px);
  padding-bottom: calc(clamp(80px, 7.778vw, 112px) + var(--section-bleed));
  background-color: var(--color-white);
}

.aboutus-message__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aboutus-message__inner > p {
  font-size: var(--fs-16);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.aboutus-message__sign {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--color-sumi);
}

.aboutus-message__sign-role {
  font-size: var(--fs-15);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.aboutus-message__sign-name {
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   company（会社概要）
   -------------------------------------------------------------------------- */
.aboutus-company {
  padding-top: clamp(80px, 6.667vw, 96px);
  padding-bottom: calc(clamp(64px, 6.111vw, 88px) + var(--section-bleed));
  background-color: var(--color-base);
}

.aboutus-company__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.889vw, 56px);
}

.aboutus-license {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aboutus-license__title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-sumi);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.aboutus-license__title::before {
  content: "";
  width: 3px;
  height: 20px;
  background-color: var(--color-red);
}

.aboutus-license-table {
  width: 100%;
  background-color: var(--color-white);
  border-collapse: collapse;
  table-layout: fixed;
}

.aboutus-license-table th,
.aboutus-license-table td {
  padding: 14px 16px;
  font-size: var(--fs-15);
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: left;
  vertical-align: top;
}

.aboutus-license-table thead th {
  color: var(--color-sumi);
  font-weight: 700;
  background-color: var(--color-surface);
}

.aboutus-license-table tbody th,
.aboutus-license-table td {
  color: var(--color-text);
  font-weight: 400;
  padding-block: 14px 13px;
  border-bottom: 1px solid var(--color-border);
}

.aboutus-license-table tr > :nth-child(1) {
  width: 240px;
}

.aboutus-license-table tr > :nth-child(2) {
  width: 150px;
}

.aboutus-license-table tr > :nth-child(4) {
  width: 170px;
}

@media (max-width: 767px) {
  .aboutus-license__scroll {
    overflow-x: auto;
  }
  .aboutus-license-table {
    min-width: 720px;
  }
}

/* --------------------------------------------------------------------------
   history（沿革）
   -------------------------------------------------------------------------- */
.aboutus-history {
  padding-top: clamp(80px, 7.222vw, 104px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-white);
}

.aboutus-history__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.889vw, 56px);
}

.aboutus-history__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.aboutus-history__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: var(--color-red);
  opacity: 0.35;
}

.aboutus-history__item {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
}

.aboutus-history__item + .aboutus-history__item {
  margin-top: calc(var(--history-overlap, clamp(24px, 2.778vw, 40px)) * -1);
}

.aboutus-history__item--overlap-50 {
  --history-overlap: clamp(30px, 3.472vw, 50px);
}

.aboutus-history__item--overlap-60 {
  --history-overlap: clamp(36px, 4.167vw, 60px);
}

.aboutus-history__item:nth-child(9) { /* 1986 */
  --history-overlap: clamp(42px, 4.861vw, 70px);
}

.aboutus-history__item:nth-child(12) { /* 2002 */
  --history-overlap: clamp(48px, 5.556vw, 80px);
}

.aboutus-history__item::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 9.9px;
  height: 9.9px;
  margin-top: 25px;
  background-color: var(--color-red);
  rotate: 45deg;
}

.aboutus-history-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 360px;
  padding: 19px 21px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

.aboutus-history__item:nth-child(odd) .aboutus-history-card {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

.aboutus-history__item:nth-child(even) .aboutus-history-card {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: start;
}

.aboutus-history-card--current {
  border-color: var(--color-red);
}

.aboutus-history-card__year {
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1;
}

.aboutus-history-card__date {
  font-size: var(--fs-13);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.aboutus-history-card__title {
  color: var(--color-sumi);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.aboutus-history-card__text {
  font-size: var(--fs-15);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.aboutus-history-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  border: 1px solid var(--color-red);
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .aboutus-history-card {
    width: auto;
  }
  .aboutus-history__item:nth-child(odd) .aboutus-history-card,
  .aboutus-history__item:nth-child(even) .aboutus-history-card {
    justify-self: stretch;
  }
}

@media (max-width: 767px) {
  .aboutus-history__item {
    grid-template-columns: 32px 1fr;
  }
  .aboutus-history__item + .aboutus-history__item {
    margin-top: 0;
  }
  .aboutus-history__list::before {
    left: 16px;
  }
  .aboutus-history__item::before {
    grid-column: 1;
  }
  .aboutus-history__item:nth-child(odd) .aboutus-history-card,
  .aboutus-history__item:nth-child(even) .aboutus-history-card {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
   access（アクセス）
   -------------------------------------------------------------------------- */
.aboutus-access {
  --section-bleed: var(--footer-overlap);
  padding-top: clamp(64px, 6.667vw, 96px);
  padding-bottom: calc(clamp(64px, 6.667vw, 96px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.aboutus-access__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 3.889vw, 56px);
  max-width: 1200px;
  margin-inline: auto;
}

.aboutus-access__row {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.444vw, 64px);
  width: 100%;
}

.aboutus-access__map {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 369;
  border: 0;
  border-radius: var(--radius-6);
}

.aboutus-access__info {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 4.444vw, 64px);
}

.aboutus-access__table {
  --info-table-th-width: 140px;
  flex: 0 1 670px;
  min-width: 0;
}

.aboutus-access__photo {
  flex: 0 1 276px;
  min-width: 0;
  aspect-ratio: 276 / 207;
  object-fit: cover;
}

@media (max-width: 767px) {
  .aboutus-access__map {
    aspect-ratio: 276 / 207;
  }
  .aboutus-access__info {
    flex-direction: column;
    align-items: stretch;
  }
  .aboutus-access__table,
  .aboutus-access__photo {
    flex: 0 0 auto;
  }
  .aboutus-access__photo {
    width: 100%;
  }
}

/* ==========================================================================
   sustainability（サステナビリティ）
   ========================================================================== */
/* --------------------------------------------------------------------------
   approach（考え方）
   -------------------------------------------------------------------------- */
.sustainability-approach {
  position: relative;
  isolation: isolate;
  padding-block: clamp(80px, 8.889vw, 128px);
  padding-inline: var(--content-pad-m);
}

.sustainability-approach__row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5.556vw, 80px);
  max-width: 1200px;
  margin-inline: auto;
}

.sustainability-approach__text {
  display: flex;
  flex: 1 1 620px;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 2.222vw, 32px);
}

.sustainability-approach__lead {
  color: var(--color-sumi);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.sustainability-approach__text p:last-child {
  font-size: var(--fs-16);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.sustainability-approach__photo {
  flex: 1 1 500px;
  min-width: 0;
  aspect-ratio: 500 / 360;
  overflow: clip;
  border-radius: var(--radius-6);
}

.sustainability-approach__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .sustainability-approach__row {
    flex-direction: column;
    align-items: stretch;
  }
  .sustainability-approach__text,
  .sustainability-approach__photo {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   iso（品質環境マネジメント）
   -------------------------------------------------------------------------- */
.sustainability-iso {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 7.778vw, 112px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-white);
}

.sustainability-iso__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 2.778vw, 40px);
  max-width: 1200px;
  margin-inline: auto;
}

.sustainability-iso__lead {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.sustainability-iso__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

.sustainability-iso-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding: 40px;
  background-color: var(--color-base);
  border-radius: var(--radius-6);
}

.sustainability-iso-card__badge {
  padding: 4px 10px;
  color: var(--color-white);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  background-color: var(--color-red);
  border-radius: 3px;
}

.sustainability-iso-card__name {
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: clamp(var(--fs-32), 3.333vw, var(--fs-48));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.sustainability-iso-card__title {
  color: var(--color-sumi);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.sustainability-iso-card__text {
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .sustainability-iso__list {
    grid-template-columns: 1fr;
  }
  .sustainability-iso-card {
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   sdgs（SDGsとは）
   -------------------------------------------------------------------------- */
.sustainability-sdgs {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.sustainability-sdgs__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 2.778vw, 40px);
  max-width: 1200px;
  margin-inline: auto;
}

.sustainability-sdgs__lead {
  max-width: 900px;
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
}

.sustainability-sdgs__list {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: clamp(6px, 1.042vw, 15px);
  width: 100%;
}

.sustainability-sdgs__list img {
  width: 100%;
  border-radius: var(--radius-6);
}

@media (max-width: 767px) {
  .sustainability-sdgs__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   cert（新潟県SDGs推進企業登録制度）
   -------------------------------------------------------------------------- */
.sustainability-cert {
  padding-top: clamp(80px, 8.333vw, 120px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-white);
}

.sustainability-cert__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, 3.056vw, 44px);
}

.sustainability-cert__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.sustainability-cert__catch {
  color: var(--color-sumi);
  font-size: clamp(var(--fs-20), 1.806vw, var(--fs-26));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.sustainability-cert__body p:not(.sustainability-cert__catch) {
  font-size: var(--fs-16);
  line-height: 2;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   targets（2030年に向けた指標）
   -------------------------------------------------------------------------- */
.sustainability-targets {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-base);
}

.sustainability-targets__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.056vw, 44px);
}

.sustainability-targets__lead {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
}

.sustainability-kpi-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  overflow: clip;
  background-color: var(--color-white);
  border-top: 4px solid var(--color-red);
  border-radius: var(--radius-6);
}

.sustainability-kpi-card__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 36px;
}

.sustainability-kpi-card__col + .sustainability-kpi-card__col {
  border-left: 1px solid var(--color-border);
}

.sustainability-kpi-card__icon {
  width: 56px;
  height: 56px;
  background-color: var(--color-red);
}

.sustainability-kpi-card__col--environment .sustainability-kpi-card__icon {
  mask: url("../img/sustainability/icon_env.svg") no-repeat center / contain;
  -webkit-mask: url("../img/sustainability/icon_env.svg") no-repeat center / contain;
}

.sustainability-kpi-card__col--social .sustainability-kpi-card__icon {
  mask: url("../img/sustainability/icon_soc.svg") no-repeat center / contain;
  -webkit-mask: url("../img/sustainability/icon_soc.svg") no-repeat center / contain;
}

.sustainability-kpi-card__col--economy .sustainability-kpi-card__icon {
  mask: url("../img/sustainability/icon_eco.svg") no-repeat center / contain;
  -webkit-mask: url("../img/sustainability/icon_eco.svg") no-repeat center / contain;
}

.sustainability-kpi-card__en {
  color: var(--color-red);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
}

.sustainability-kpi-card__ja {
  color: var(--color-sumi);
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.sustainability-kpi-card__subject {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.sustainability-kpi-card__metric {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  background-color: var(--color-surface);
  border-radius: var(--radius-6);
}

.sustainability-kpi-card__metric::before {
  content: "";
  order: 1;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: var(--color-red);
  mask: url("../img/common/icon_arrow.svg") no-repeat center / 18px 18px;
  -webkit-mask: url("../img/common/icon_arrow.svg") no-repeat center / 18px 18px;
}

.sustainability-kpi-card__now {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sustainability-kpi-card__target {
  display: flex;
  order: 2;
  flex-direction: column;
  gap: 4px;
  color: var(--color-red);
}

.sustainability-kpi-card__label {
  color: var(--color-text-sub);
  font-size: var(--fs-11);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.sustainability-kpi-card__target .sustainability-kpi-card__label {
  color: inherit;
}

.sustainability-kpi-card__value {
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  word-break: keep-all;
}

.sustainability-kpi-card__target .sustainability-kpi-card__value {
  font-size: var(--fs-22);
}

.sustainability-kpi-card__link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-red);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.sustainability-kpi-card__link::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("../img/common/icon_arrow.svg") no-repeat center / 16px 16px;
  -webkit-mask: url("../img/common/icon_arrow.svg") no-repeat center / 16px 16px;
  rotate: 90deg;
  transition: translate var(--duration-normal) var(--ease-out);
}

.sustainability-kpi-card__link:hover::after {
  translate: 0 4px;
}

.sustainability-kpi-card__link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .sustainability-kpi-card {
    grid-template-columns: 1fr;
  }
  .sustainability-kpi-card__col {
    padding: 28px 23px;
  }
  .sustainability-kpi-card__col + .sustainability-kpi-card__col {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   activities（登録企業としての取り組み）
   -------------------------------------------------------------------------- */
.sustainability-activities {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-white);
}

.sustainability-activities__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.056vw, 44px);
  max-width: 1200px;
  margin-inline: auto;
}

.sustainability-activities__lead {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
}

.sustainability-activities__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.sustainability-act-block {
  overflow: clip;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-red);
  border-radius: var(--radius-6);
  scroll-margin-top: 16px;
}

.sustainability-act-block__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.333vw, 48px);
  padding: 40px 39px 35px;
}

.sustainability-act-block__title {
  color: var(--color-sumi);
  font-size: clamp(var(--fs-18), 1.528vw, var(--fs-22));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.sustainability-act-block__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 11.667vw, 168px);
  padding-bottom: 20px;
}

.sustainability-act-block__item + .sustainability-act-block__item {
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.sustainability-act-block__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.sustainability-act-block__name {
  color: var(--color-red);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.sustainability-act-block__text {
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.sustainability-act-block__sdg {
  flex-shrink: 0;
  width: min(124px, 24vw);
  border-radius: 4px;
}

.sustainability-activities__bg-word {
  --bg-word-vw: 8.264vw;
  --bg-word-max: var(--fs-119);
}

@media (max-width: 767px) {
  .sustainability-act-block__item {
    gap: 16px;
  }
  .sustainability-act-block__inner {
    padding-inline: 23px;
  }
}

/* --------------------------------------------------------------------------
   other（その他の取り組み）
   -------------------------------------------------------------------------- */
.sustainability-other {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.sustainability-other__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.056vw, 44px);
  max-width: 1200px;
  margin-inline: auto;
}

.sustainability-other__lead {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
}

.sustainability-other__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

.sustainability-other-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 4.444vw, 64px);
  height: 100%;
  padding: 27px 29px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

.sustainability-other-card__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.sustainability-other-card__title {
  color: var(--color-red);
  font-size: var(--fs-17);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.sustainability-other-card__text {
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.sustainability-other-card__sdg {
  flex-shrink: 0;
  width: min(124px, 26vw);
  border-radius: 4px;
}

.sustainability-other__bg-word {
  --bg-word-vw: 9.861vw;
  --bg-word-max: var(--fs-142);
}

@media (max-width: 767px) {
  .sustainability-other__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   certs（認証された取り組み）
   -------------------------------------------------------------------------- */
.sustainability-certs {
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-white);
}

.sustainability-certs__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.056vw, 44px);
}

.sustainability-certs__lead {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
}

.sustainability-certs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.sustainability-certs__item {
  display: flex;
  flex: 0 0 302px;
  align-items: center;
  justify-content: center;
  padding: 18px 47px;
  color: var(--color-sumi);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

@media (max-width: 767px) {
  .sustainability-certs__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }
  .sustainability-certs__item {
    padding-inline: 23px;
  }
}

/* ==========================================================================
   news（お知らせ一覧）
   ========================================================================== */
.news-archive {
  --section-bleed: var(--footer-overlap);
  position: relative;
  isolation: isolate;
  padding-top: clamp(64px, 6.667vw, 96px);
  padding-bottom: calc(clamp(80px, 8.333vw, 120px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
}

.news-archive__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.778vw, 40px);
}

.news-archive__bg-word {
  bottom: calc(1px + var(--section-bleed));
}



/* --------------------------------------------------------------------------
   newsDetail（お知らせ詳細の記事）
   -------------------------------------------------------------------------- */
.news-detail {
  padding-top: clamp(40px, 3.889vw, 56px);
  padding-bottom: clamp(64px, 6.667vw, 96px);
  padding-inline: var(--content-pad-m);
  background-color: var(--color-white);
}

.news-detail__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.778vw, 40px);
}

.news-detail__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.news-detail__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.news-detail__date {
  font-family: var(--font-en);
  font-size: var(--fs-13);
  line-height: 1;
  letter-spacing: 0.04em;
}

.news-detail__title {
  color: var(--color-sumi);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.news-detail__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* 両端揃えを外す。外すと URL を貼った行の字間が開く。
   :where() を外すとエディタの「中央揃え」などが効かなくなる */
:where(.news-detail__body) p {
  text-align: start;
}

/* 本文（エディタ出力） */
.news-detail__body img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.news-detail__body a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.news-detail__body a:hover {
  text-decoration: none;
}

.news-detail__body ul,
.news-detail__body ol {
  padding-left: 1.5em;
}

.news-detail__body ul {
  list-style: disc;
}

.news-detail__body ol {
  list-style: decimal;
}

.news-detail__body h2,
.news-detail__body h3,
.news-detail__body h4 {
  color: var(--color-sumi);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.news-detail__body h2 {
  font-size: clamp(20px, 1.736vw, 25px);
}

.news-detail__body h3 {
  font-size: var(--fs-20);
}

.news-detail__body h4 {
  font-size: var(--fs-18);
}

.news-detail__body .alignleft {
  float: left;
  margin: 0 24px 16px 0;
}

.news-detail__body .alignright {
  float: right;
  margin: 0 0 16px 24px;
}

.news-detail__body .aligncenter {
  display: block;
  float: none;
  margin-inline: auto;
}

.news-detail__body .wp-caption {
  max-width: 100%;
}

.news-detail__body .wp-caption-text,
.news-detail__body figcaption {
  margin-top: 16px;
  font-size: var(--fs-13);
  line-height: 1;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   本文のブロック（ブロックエディタの出力）
   -------------------------------------------------------------------------- */
.news-detail__body figure {
  margin: 0;
}

/* 画像（1 枚）*/
.news-detail__body .wp-block-image {
  display: block;
  float: none;
  width: min(100%, 764px);
  margin-inline: auto;
  text-align: left;
}

.news-detail__body .wp-block-image a {
  display: block;
}

.news-detail__body .wp-block-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  border-radius: var(--radius-6);
}

.news-detail__body .wp-block-image figcaption {
  display: block;
  margin-bottom: 0;
  color: inherit;
  text-align: left;
}

.news-detail__body .wp-block-gallery.has-nested-images,
.news-detail__body .wp-block-columns:not(:has(> .wp-block-column > :not(.wp-block-image))) {
  --news-photos-row-gap: clamp(24px, 2.778vw, 40px);
  --news-photos-col-gap: clamp(24px, 8.333vw, 120px);
  align-items: flex-start;
  gap: var(--news-photos-row-gap) var(--news-photos-col-gap);
  width: min(100%, 1016px);
  margin-inline: auto;
}

.news-detail__body .wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: var(--news-photos-col-gap);
}

.news-detail__body .wp-block-gallery.has-nested-images:is(.columns-1, .columns-default:has(> .wp-block-image:only-of-type)) {
  width: min(100%, 764px);
}

.news-detail__body .wp-block-gallery.has-nested-images:is(.columns-3, .columns-4, .columns-5, .columns-6, .columns-7, .columns-8),
.news-detail__body .wp-block-gallery.has-nested-images.columns-default:has(> figure.wp-block-image:nth-of-type(3)):not(:has(> figure.wp-block-image:first-of-type:nth-last-of-type(4))),
.news-detail__body .wp-block-columns:not(:has(> .wp-block-column > :not(.wp-block-image))):has(> .wp-block-column:nth-child(3)) {
  --news-photos-col-gap: clamp(16px, 2.778vw, 40px);
}

.news-detail__body .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-of-type:nth-last-of-type(4),
.news-detail__body .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-of-type:nth-last-of-type(4) ~ figure.wp-block-image:not(#individual-image) {
  width: calc(50% - var(--news-photos-col-gap) / 2);
}

.news-detail__body .wp-block-columns:not(:has(> .wp-block-column > :not(.wp-block-image))) > .wp-block-column {
  flex: 1 1 0 !important;
}

.news-detail__body .wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0;
  justify-content: flex-start;
}

.news-detail__body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  flex: none;
}

.news-detail__body .wp-block-gallery.has-nested-images figure.wp-block-image::before {
  content: none;
}

.news-detail__body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static;
  max-height: none;
  margin: 16px 0 0;
  padding: 0;
  overflow: visible;
  background: none;
  color: inherit;
  text-align: left;
  text-shadow: none;
}

.news-detail__body .wp-block-gallery.has-nested-images > figcaption {
  margin-top: calc(16px - var(--news-photos-row-gap));
  text-align: left;
}

@media (max-width: 767px) {
  .news-detail__body .wp-block-gallery.has-nested-images,
  .news-detail__body .wp-block-columns:not(:has(> .wp-block-column > :not(.wp-block-image))) {
    --news-photos-row-gap: 24px;
  }
  .news-detail__body .wp-block-columns:not(:has(> .wp-block-column > :not(.wp-block-image))) > .wp-block-column {
    flex-basis: 100% !important;
  }
  .news-detail__body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: 100% !important;
  }
}

.news-detail__body .wp-block-column > * + * {
  margin-top: 24px;
}

.news-detail__body .wp-block-column .wp-block-image,
.news-detail__body .wp-block-column .wp-block-image a,
.news-detail__body .wp-block-column .wp-block-image img {
  width: 100%;
}

@media (min-width: 768px) and (max-width: 781px) {
  .news-detail__body .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: nowrap !important;
  }
  .news-detail__body .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1;
  }
}

.news-detail__body .wp-block-quote {
  padding-left: 24px;
  border-left: 2px solid var(--color-red);
}

.news-detail__body .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

.news-detail__body .wp-block-table th,
.news-detail__body .wp-block-table td {
  padding: 12px 16px;
  border: 1px solid var(--color-base);
  text-align: left;
}

.news-detail__body .wp-block-table th {
  background-color: var(--color-surface);
  font-weight: 700;
}

.news-detail__body::after {
  content: "";
  display: block;
  clear: both;
}

@supports (text-box: trim-both cap alphabetic) {
  .news-detail__body p:not(:has(img)) {
    text-box: trim-both cap alphabetic;
  }
}

/* 非対応ブラウザ*/
@supports not (text-box: trim-both cap alphabetic) {
  .news-detail__body p:not(:has(img)) {
    margin-block: -0.653em -0.514em;
  }
}


/* --------------------------------------------------------------------------
   newsNav（前後の記事と一覧へ戻る）
   -------------------------------------------------------------------------- */
.news-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 48px;
  padding-inline: var(--content-pad-m);
}

.news-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.news-nav__link::before,
.news-nav__link::after {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: url("../img/common/icon_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("../img/common/icon_arrow.svg") no-repeat center / contain;
}

.news-nav__link--prev::after,
.news-nav__link--next::before {
  content: none;
}

.news-nav__link--prev::before {
  scale: -1 1;
}

.news-nav__link:hover {
  color: var(--color-red);
}

.news-nav__link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.news-nav__link.is-disabled {
  visibility: hidden;
}


/* --------------------------------------------------------------------------
   newsRecent（最近のお知らせ）
   -------------------------------------------------------------------------- */
.news-recent {
  padding-top: clamp(72px, 8.333vw, 120px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-white);
}

.news-recent__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.333vw, 48px);
}

.news-recent__inner .c-news-list {
  width: 100%;
}

@media (max-width: 767px) {
  .news-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .news-nav .c-button {
    order: -1;
    width: 100%;
    justify-content: center;
  }
  .news-nav__link {
    flex: 1 1 0;
  }
  .news-nav__link--next {
    justify-content: flex-end;
  }
}


/* ==========================================================================
   entry（エントリーフォーム）
   ========================================================================== */
/* --------------------------------------------------------------------------
   entryForm（エントリーフォーム）
   -------------------------------------------------------------------------- */
.recruit-entry-form {
  --entry-gap: clamp(32px, 3.889vw, 56px);
  padding-top: clamp(80px, 8.889vw, 128px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--footer-overlap));
  background-color: var(--color-base);
}

.recruit-entry-form__inner,
.recruit-entry-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--entry-gap);
}

.recruit-entry-form .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.recruit-entry-form__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recruit-entry-form__lead {
  color: var(--color-sumi);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.recruit-entry-form__require-note {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--fs-15);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.recruit-entry-form__badge {
  flex-shrink: 0;
  padding: 4px 8px;
  color: var(--color-white);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  background-color: var(--color-red);
  border-radius: 3px;
}

.recruit-entry-form__badge--optional {
  padding: 3px 7px;
  color: var(--color-text-sub);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.recruit-entry-form__card {
  padding: 16px clamp(24px, 5vw, 72px);
  background-color: var(--color-white);
  border-radius: var(--radius-6);
}

.recruit-entry-form__row {
  display: flex;
  gap: clamp(24px, 2.778vw, 40px);
  align-items: flex-start;
  padding-block: 28px;
}

.recruit-entry-form__row + .recruit-entry-form__row {
  padding-top: 27px;
  border-top: 1px solid var(--color-border);
}

.recruit-entry-form__label {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
  width: 200px;
  padding-top: 14px;
  color: var(--color-sumi);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.recruit-entry-form__field {
  --select-height: 56px;
  flex: 1 1 0;
  min-width: 0;
}

.recruit-entry-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.recruit-entry-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: var(--color-red);
  font-size: var(--fs-13);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.recruit-entry-form .wpcf7-not-valid {
  border-color: var(--color-red);
}

.recruit-entry-form .message-text-count {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-13);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.recruit-entry-form__control {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 15px;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-15);
  letter-spacing: 0.02em;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

.recruit-entry-form__control--area {
  height: 160px;
  padding: 15px;
  line-height: 1.7;
  resize: vertical;
}

.recruit-entry-form__control::placeholder {
  color: var(--color-text-sub);
  opacity: 1;
}

.recruit-entry-form__control:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.recruit-entry-form .c-select {
  width: 100%;
}

.recruit-entry-form .c-select__input {
  height: var(--select-height);
  padding-right: 42px;
  padding-left: 15px;
  background-color: var(--color-surface);
}

.recruit-entry-form .c-select__input:has(option[value=""]:checked) {
  color: var(--color-text-sub);
}

.recruit-entry-form .c-select::after {
  top: calc(var(--select-height) / 2);
}

.recruit-entry-form__dob {
  display: flex;
  gap: 12px;
}

.recruit-entry-form__dob-group {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.recruit-entry-form__dob-group .c-select {
  flex: 0 1 100px;
  min-width: 0;
}

.recruit-entry-form__dob-group:first-child .c-select {
  flex-basis: 132px;
}

.recruit-entry-form__dob-unit {
  flex-shrink: 0;
  font-size: var(--fs-15);
  line-height: var(--select-height);
  letter-spacing: 0.02em;
}

.recruit-entry-form__dob .wpcf7-not-valid-tip {
  white-space: nowrap;
}

.recruit-entry-form__job-select {
  max-width: 280px;
}

.recruit-entry-form__field--consent {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.recruit-entry-form__privacy-note {
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.recruit-entry-form__privacy-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.recruit-entry-form__privacy-link:hover,
.recruit-entry-form__privacy-link:focus-visible {
  color: var(--color-red);
}

.recruit-entry-form__consent label {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--color-surface);
  border-radius: var(--radius-6);
  cursor: pointer;
}

.recruit-entry-form__consent input {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.recruit-entry-form__consent input:checked {
  position: relative;
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.recruit-entry-form__consent input:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.recruit-entry-form__consent input:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.recruit-entry-form__consent .wpcf7-list-item-label {
  color: var(--color-sumi);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.recruit-entry-form__submit {
  position: relative;
  display: flex;
  justify-content: center;
}

.recruit-entry-form__submit-button {
  justify-content: space-between;
  width: 280px;
}

/* 場所を取るとボタンが中央からずれる */
.recruit-entry-form__submit .wpcf7-spinner {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.recruit-entry-form .wpcf7-response-output:empty {
  display: none;
}

.recruit-entry-form .wpcf7 .wpcf7-form .wpcf7-response-output {
  margin: 0;
  padding: 0.2em 1em;
  color: var(--color-sumi);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
  background-color: var(--color-white);
  border-radius: var(--radius-6);
}

.recruit-entry-form .wpcf7-form.sent .recruit-entry-form__body {
  display: none;
}

.recruit-entry-form:has(.wpcf7-form.sent) .recruit-entry-form__intro {
  display: none;
}

.recruit-entry-form .wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.recruit-entry-form .wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.recruit-entry-form .wpcf7 .wpcf7-form.failed .wpcf7-response-output {
  margin-top: 16px;
  color: var(--color-text);
  border: 2px solid var(--color-warning);
}

.recruit-entry-form .wpcf7 .wpcf7-form.failed .wpcf7-response-output {
  border-color: var(--color-error);
}

@media (max-width: 1024px) {
  .recruit-entry-form__label {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .recruit-entry-form__row {
    flex-direction: column;
    gap: 12px;
  }
  .recruit-entry-form__label {
    width: auto;
    padding-top: 0;
  }
  .recruit-entry-form__dob {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }
  .recruit-entry-form__dob-group:first-child {
    grid-column: 1 / -1;
  }
  .recruit-entry-form__job-select {
    max-width: none;
  }
  .recruit-entry-form__consent,
  .recruit-entry-form__consent label {
    width: 100%;
  }
  .recruit-entry-form__consent label {
    align-items: flex-start;
    padding: 14px 16px;
  }
  .recruit-entry-form__consent input {
    margin-top: 2px;
  }
  .recruit-entry-form__submit-button {
    width: min(280px, 100%);
  }
}

/* ==========================================================================
   recruit（採用情報）
   ========================================================================== */
/* --------------------------------------------------------------------------
   recruitMv（メインビジュアル）
   -------------------------------------------------------------------------- */
.recruit-mv {
  position: relative;
  isolation: isolate;
  padding-top: clamp(96px, 10.243vw, 148px);
  padding-bottom: clamp(140px, 16.424vw, 236px);
  padding-inline: var(--content-pad-m);
  background-color: var(--color-white);
}

.recruit-mv__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.944vw, 28px);
}

.recruit-mv__clip {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.recruit-mv__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  clip-path: url(#recruit-mv-arch);
}

.recruit-mv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.recruit-mv__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.28));
}

.recruit-mv__label {
  color: var(--color-white);
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.15em;
}

.recruit-mv__catch {
  color: var(--color-white);
  font-size: clamp(30px, 4.167vw, 60px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.recruit-mv__sub {
  color: var(--color-white);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.recruit-mv__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 767px) {
  .recruit-mv__sub {
    font-size: var(--fs-16);
  }
  .recruit-mv__btns {
    width: 100%;
  }
  .recruit-mv__btns .c-button {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   recruitMessage（私たちの想い）
   -------------------------------------------------------------------------- */
.recruit-message {
  padding-top: clamp(88px, 11.111vw, 160px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-white);
}

.recruit-message__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 2.778vw, 40px);
  width: min(88.889vw, 896px);
}

.recruit-message__catch {
  color: var(--color-sumi);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.recruit-message__body {
  font-size: var(--fs-17);
  line-height: 2;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .recruit-message__body {
    font-size: var(--fs-15);
  }
}

/* --------------------------------------------------------------------------
   recruitPeople（求める人物像）
   -------------------------------------------------------------------------- */
.recruit-people {
  padding-top: clamp(64px, 7.778vw, 112px);
  padding-bottom: calc(clamp(72px, 8.333vw, 120px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.recruit-people__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6.667vw, 96px);
}

.recruit-people__lead {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 28px;
  width: min(424px, 35.333%);
}

.recruit-people__catch {
  color: var(--color-sumi);
  font-size: clamp(22px, 2.222vw, 32px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.recruit-people__text {
  font-size: var(--fs-16);
  line-height: 2;
  letter-spacing: 0.02em;
}

.recruit-people__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: clamp(24px, 3.056vw, 44px);
  min-width: 0;
  counter-reset: persona;
}

.recruit-people__item {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.222vw, 32px);
  color: var(--color-sumi);
  font-size: clamp(16px, 1.458vw, 21px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.recruit-people__item::before {
  counter-increment: persona;
  content: counter(persona, decimal-leading-zero);
  flex: 0 0 auto;
  width: min(92px, 13.529%);
  color: transparent;
  font-family: var(--font-en);
  font-size: clamp(38px, 4.167vw, 60px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1px var(--color-red);
}

@media (max-width: 767px) {
  .recruit-people__inner {
    flex-direction: column;
  }
  .recruit-people__lead {
    width: 100%;
  }
  .recruit-people__list {
    width: 100%;
  }
  .recruit-people__item::before {
    width: 62px;
  }
}

/* --------------------------------------------------------------------------
   recruitWork（仕事紹介）
   -------------------------------------------------------------------------- */
.recruit-work {
  padding-top: clamp(80px, 9.444vw, 136px);
  padding-bottom: calc(clamp(88px, 10vw, 144px) + var(--section-bleed));
  padding-inline: clamp(24px, 4.167vw, 60px);
  background-color: var(--color-white);
}

.recruit-work__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.889vw, 56px);
}

.recruit-work__row {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 2.778vw, 40px);
  width: 100%;
}

.recruit-work__main {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 24px;
  width: min(560px, 42.424%);
}

.recruit-work__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: clamp(24px, 2.778vw, 40px);
  min-width: 0;
}

.recruit-work__sub {
  display: flex;
  flex: 1 1 0;
  gap: clamp(16px, 1.944vw, 28px);
  min-height: 0;
}

.recruit-work__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-6);
}

.recruit-work__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit-work__main .recruit-work__photo {
  width: 100%;
  aspect-ratio: 7 / 6;
}

.recruit-work__sub .recruit-work__photo {
  flex: 0 0 auto;
  width: min(300px, 41.667%);
}

.recruit-work__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.recruit-work__title {
  color: var(--color-sumi);
  font-size: clamp(20px, 1.944vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.recruit-work__title--sub {
  font-size: clamp(18px, 1.528vw, 22px);
}

.recruit-work__text {
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.02em;
}

@media (max-width: 979px) {
  .recruit-work__row {
    flex-direction: column;
  }
  .recruit-work__main {
    width: 100%;
  }

  .recruit-work__col,
  .recruit-work__sub {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .recruit-work__sub {
    flex-direction: column;
    gap: 20px;
  }
  .recruit-work__sub .recruit-work__photo {
    width: 100%;
    aspect-ratio: 7 / 6;
  }
}

/* --------------------------------------------------------------------------
   recruitNumbers（数字で見る）
   -------------------------------------------------------------------------- */
.recruit-numbers {
  padding-top: clamp(88px, 10vw, 144px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.recruit-numbers__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.333vw, 48px);
}

.recruit-numbers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.recruit-numbers__lead {
  max-width: 423px;
  font-size: var(--fs-16);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.recruit-numbers__bento {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recruit-numbers__row {
  display: flex;
  gap: 20px;
}

.recruit-numbers__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 20px;
  min-width: 0;
}

.recruit-numbers__pair {
  display: flex;
  gap: 20px;
}

.recruit-numbers__date {
  color: var(--color-text-sub);
  font-size: var(--fs-14);
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: right;
}

.recruit-numbers__note {
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.recruit-dash {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 14px;
  min-width: 0;
  min-height: 160px;
  padding: 32px 28px;
  background-color: var(--color-white);
  border-radius: var(--radius-6);
}

.recruit-dash--hero,
.recruit-numbers__row--b .recruit-dash--chart,
.recruit-numbers__row--c .recruit-dash--split {
  flex: 0 0 calc(50% - 10px);
}

.recruit-dash--hero {
  gap: 0;
  min-height: 340px;
  justify-content: space-between;
}

.recruit-dash__title {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.recruit-dash__title--center {
  width: 100%;
  text-align: center;
}

.recruit-dash__val {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}

.recruit-dash__num {
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: clamp(32px, 3.333vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.recruit-dash--hero .recruit-dash__num {
  font-size: clamp(64px, 8.333vw, 120px);
}

.recruit-dash__unit {
  color: var(--color-sumi);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.recruit-dash--hero .recruit-dash__unit {
  font-size: var(--fs-20);
}

.recruit-dash__note {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.recruit-dash__caption {
  color: var(--color-text-sub);
  font-size: var(--fs-14);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.recruit-dash__donut {
  position: relative;
  flex-shrink: 0;
  width: 180px;
  max-width: 100%;
  aspect-ratio: 1;
}

.recruit-dash__donut::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(var(--donut-stops));
  border-radius: 50%;
  mask: radial-gradient(circle closest-side, transparent 0 66%, #000 66.4%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 66%, #000 66.4%);
}

.recruit-dash__donut--sm {
  width: 140px;
}

.recruit-dash__donut-num {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: var(--color-sumi);
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.recruit-dash__donut--sm .recruit-dash__donut-num {
  font-size: 31px;
}

.recruit-dash--chart {
  flex-direction: row;
  gap: 36px;
  align-items: center;
}

.recruit-dash__chart-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 12px;
  min-width: 0;
}

.recruit-dash__legend {
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.02em;
}

.recruit-dash--pie {
  align-items: center;
  gap: 18px;
}

.recruit-dash--split {
  flex-direction: row;
  gap: 40px;
  align-items: center;
}

.recruit-dash__split-main {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 14px;
}

.recruit-dash__split-text {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-left: 40px;
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.02em;
}

.recruit-dash__split-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 84px;
  translate: 0 -50%;
  background-color: var(--color-border);
}

.recruit-numbers__row--b .recruit-dash {
  min-height: 300px;
}

.recruit-numbers__row--c .recruit-dash {
  min-height: 180px;
}

@media (max-width: 1024px) {
  .recruit-dash__donut {
    width: min(180px, 42vw);
  }
  .recruit-dash__donut--sm {
    width: min(140px, 18vw);
  }
  .recruit-dash--chart {
    gap: 24px;
  }
  .recruit-dash--split {
    gap: 24px;
  }
  .recruit-dash__split-text {
    padding-left: 24px;
  }
}

@media (max-width: 979px) {
  .recruit-numbers__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .recruit-numbers__lead {
    max-width: none;
  }
  .recruit-numbers__row {
    flex-direction: column;
  }
  .recruit-numbers__row--c {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .recruit-dash,
  .recruit-dash--hero,
  .recruit-numbers__row--b .recruit-dash,
  .recruit-numbers__row--b .recruit-dash--chart,
  .recruit-numbers__row--c .recruit-dash--split {
    flex: 0 0 auto;
    min-height: 0;
  }

  .recruit-numbers__pair .recruit-dash,
  .recruit-numbers__row--c .recruit-dash:not(.recruit-dash--split) {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
  }
  .recruit-numbers__row--c .recruit-dash--split {
    flex: 1 1 100%;
  }
  .recruit-dash {
    gap: 10px;
    padding: 24px 20px;
  }
  .recruit-dash--hero {
    gap: 16px;
  }
  .recruit-dash--chart,
  .recruit-dash--split {
    flex-direction: column;
    align-items: flex-start;
  }
  .recruit-dash__donut {
    width: min(180px, 52vw);
    align-self: center;
  }
  .recruit-dash__donut--sm {
    width: min(140px, 40vw);
  }
  .recruit-dash__split-text {
    padding-top: 20px;
    padding-left: 0;
  }
  .recruit-dash__split-text::before {
    top: 0;
    width: 100%;
    height: 1px;
    translate: none;
  }
}

@media (max-width: 767px) {
  .recruit-numbers__note {
    font-size: var(--fs-14);
  }
}

/* --------------------------------------------------------------------------
   recruitBenefits（福利厚生）
   -------------------------------------------------------------------------- */
.recruit-benefits {
  padding-top: clamp(64px, 7.778vw, 112px);
  padding-bottom: calc(clamp(64px, 7.778vw, 112px) + var(--section-bleed));
  background-color: var(--color-white);
}

.recruit-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.889vw, 56px);
}

.recruit-benefits__list {
  --bf-column-gap: clamp(32px, 5.556vw, 80px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.recruit-benefits__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 27px 28px;
  border-top: 1px solid var(--color-border);
}

.recruit-benefits__item:nth-child(odd):not(.recruit-benefits__item--wide) {
  padding-right: calc(var(--bf-column-gap) / 2);
}

.recruit-benefits__item:nth-child(even) {
  padding-left: calc(var(--bf-column-gap) / 2);
}

.recruit-benefits__item--wide {
  grid-column: 1 / -1;
  padding-bottom: 27px;
  border-bottom: 1px solid var(--color-border);
}

.recruit-benefits__term {
  color: var(--color-sumi);
  font-size: var(--fs-17);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.recruit-benefits__desc {
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .recruit-benefits__list {
    --bf-column-gap: 0px;
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   recruitInterview（社員インタビュー）
   -------------------------------------------------------------------------- */
.recruit-interview {
  padding-top: clamp(88px, 11.111vw, 160px);
  padding-bottom: calc(clamp(80px, 9.444vw, 136px) + var(--section-bleed));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.recruit-interview__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.778vw, 40px);
}

.recruit-interview__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.recruit-interview-card {
  --iv-photo-w: min(300px, 30%);
  --iv-photo-ratio: 3 / 4;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.333vw, 48px);
  padding: clamp(28px, 3.333vw, 48px) clamp(24px, 3.889vw, 56px);
  background-color: var(--color-white);
  border-radius: var(--radius-6);
}

.recruit-interview-card:has(.recruit-interview-card__details:not([open])) {
  --iv-photo-w: 84px;
  --iv-photo-ratio: 1;
  align-items: center;
  gap: 28px;
  padding: 28px;
}

.recruit-interview-card:has(.recruit-interview-card__details:not([open])) .recruit-interview-card__body {
  flex-direction: row;
  align-items: center;
  gap: 28px;
}

.recruit-interview-card:has(.recruit-interview-card__details:not([open])) .recruit-interview-card__head {
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
}

.recruit-interview-card:has(.recruit-interview-card__details:not([open])) .recruit-interview-card__details {
  flex: 0 0 auto;
  width: auto;
}

.recruit-interview-card__photo {
  flex: 0 0 auto;
  width: var(--iv-photo-w);
  aspect-ratio: var(--iv-photo-ratio);
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--radius-6);
}

.recruit-interview-card__photo--full,
.recruit-interview-card:has(.recruit-interview-card__details[open]) .recruit-interview-card__photo--thumb {
  display: none;
}

.recruit-interview-card:has(.recruit-interview-card__details[open]) .recruit-interview-card__photo--full {
  display: block;
}

.recruit-interview-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.recruit-interview-card__head {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 20px;
}

.recruit-interview-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-sub);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.recruit-interview-card__age {
  padding: 4px 10px;
  color: var(--color-text);
  font-size: var(--fs-12);
  line-height: 1.4;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background-color: var(--color-surface);
  border-radius: 3px;
}

.recruit-interview-card__catch {
  color: var(--color-sumi);
  font-size: clamp(18px, 1.528vw, 22px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.recruit-interview-card__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.recruit-interview-card__qa {
  order: 1;
  min-height: 0;
}

.recruit-interview-card__details::details-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: clip;
}

.recruit-interview-card__details[open]::details-content {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-normal) var(--ease-out);
}

.recruit-interview-card__q {
  color: var(--color-red);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.recruit-interview-card__a {
  margin-top: 6px;
  margin-left: 0;
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.recruit-interview-card__q + .recruit-interview-card__q,
.recruit-interview-card__a + .recruit-interview-card__q {
  margin-top: 20px;
}

.recruit-interview-card__toggle {
  position: relative;
  order: 2;
  align-self: flex-start;
  padding: 15px 44px 15px 18px;
  color: var(--color-red);
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  list-style: none;
  cursor: pointer;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-red);
  border-radius: 4px;
}

.recruit-interview-card__toggle::-webkit-details-marker {
  display: none;
}

.recruit-interview-card__toggle:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.recruit-interview-card__toggle::before,
.recruit-interview-card__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 14px;
  height: 2px;
  translate: 0 -50%;
  background-color: currentColor;
}

.recruit-interview-card__toggle::after {
  rotate: 90deg;
  transition: scale var(--duration-normal) var(--ease-out);
}

.recruit-interview-card__details[open] .recruit-interview-card__toggle::after {
  scale: 0 1;
}

.recruit-interview-card__toggle-close {
  display: none;
}

.recruit-interview-card__details[open] .recruit-interview-card__toggle-open {
  display: none;
}

.recruit-interview-card__details[open] .recruit-interview-card__toggle-close {
  display: inline;
}

@media (max-width: 767px) {
  .recruit-interview-card {
    --iv-photo-w: 100%;
    flex-direction: column;
  }
  .recruit-interview-card:has(.recruit-interview-card__details:not([open])) {
    --iv-photo-w: 134px;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }
  .recruit-interview-card:has(.recruit-interview-card__details:not([open])) .recruit-interview-card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .recruit-interview-card:has(.recruit-interview-card__details:not([open])) .recruit-interview-card__head {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   recruitDay（ある社員の一日）
   -------------------------------------------------------------------------- */
.recruit-day {
  padding-top: clamp(72px, 8.889vw, 128px);
  padding-bottom: calc(clamp(88px, 10.556vw, 152px) + var(--section-bleed));
  background-color: var(--color-white);
}

.recruit-day__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 2.778vw, 40px);
}

.recruit-day__timeline {
  width: 100%;
}

.recruit-day__step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 16px 1fr;
  gap: 24px;
}

.recruit-day__time {
  grid-column: 1;
  grid-row: 1;
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: right;
}

.recruit-day__step::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  background-color: var(--color-red);
  border-radius: 50%;
}

.recruit-day__step::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: calc(72px + 24px + 7px);
  width: 2px;
  background-color: var(--color-border);
}

.recruit-day__step:last-child::after {
  content: none;
}

.recruit-day__cont {
  display: flex;
  flex-direction: column;
  grid-column: 3;
  grid-row: 1;
  gap: 8px;
  min-width: 0;
  padding-bottom: 32px;
}

.recruit-day__step:last-child .recruit-day__cont {
  padding-bottom: 0;
}

.recruit-day__title {
  color: var(--color-sumi);
  font-size: var(--fs-17);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.recruit-day__text {
  font-size: var(--fs-15);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .recruit-day__step {
    grid-template-columns: 56px 16px 1fr;
    gap: 12px;
  }
  .recruit-day__step::after {
    left: calc(56px + 12px + 7px);
  }
  .recruit-day__time {
    font-size: var(--fs-16);
  }
}

/* --------------------------------------------------------------------------
   recruitRequirements（募集要項）
   -------------------------------------------------------------------------- */
.recruit-requirements {
  padding-top: clamp(72px, 8.333vw, 120px);
  padding-bottom: calc(clamp(80px, 8.889vw, 128px) + var(--section-bleed));
  background-color: var(--color-base);
}

.recruit-requirements__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, 3.889vw, 56px);
}

/* --------------------------------------------------------------------------
   recruitEntry（エントリー）
   -------------------------------------------------------------------------- */
.recruit-entry {
  --section-bleed: 0;
  position: relative;
  isolation: isolate;
  padding-top: clamp(72px, 8.333vw, 120px);
  padding-bottom: calc(clamp(72px, 8.333vw, 120px) + var(--footer-overlap));
  padding-inline: clamp(24px, 5.556vw, 80px);
}

.recruit-entry__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.recruit-entry__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: var(--radius-80) var(--radius-80) 0 0;
}

.recruit-entry__photo picture {
  display: block;
  height: 100%;
}

.recruit-entry__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit-entry__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.5));
}

.recruit-entry__label {
  color: var(--color-white);
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.15em;
}

.recruit-entry__catch {
  color: var(--color-white);
  font-size: clamp(26px, 3.056vw, 44px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}

.recruit-entry__copy {
  max-width: 720px;
  color: var(--color-white);
  font-size: var(--fs-17);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
}

.recruit-entry__button {
  width: min(320px, 100%);
}

.recruit-entry__tel {
  color: var(--color-white);
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
}

.recruit-entry__tel a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media screen and (min-width: 768px) {
  .recruit-entry__tel a {
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .recruit-entry__copy {
    font-size: var(--fs-15);
  }
}


/* ==========================================================================
   policy-body（プライバシーポリシー）
   ========================================================================== */
.policy-body {
  position: relative;
  isolation: isolate;
  padding-top: clamp(48px, 6.667vw, 96px);
  padding-bottom: calc(clamp(64px, 8.333vw, 120px) + var(--footer-overlap));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.policy-body > .c-bg-word {
  bottom: calc(1px + var(--footer-overlap));
}

.policy-body__doc {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.889vw, 56px);
  padding: clamp(48px, 6.667vw, 96px) clamp(24px, 13.889vw, 200px) clamp(48px, 7.222vw, 104px);
  background-color: var(--color-white);
  border-radius: var(--radius-24);
}

.policy-body__lead {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.policy-body__sections {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.333vw, 48px);
}

.policy-section {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.222vw, 32px);
  padding-top: clamp(32px, 3.333vw, 48px);
  border-top: 1px solid var(--color-border);
}

.policy-section__title {
  color: var(--color-sumi);
  font-size: clamp(20px, 1.736vw, 25px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.policy-section__body {
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.policy-section__body > * + * {
  margin-top: 12px;
}

@supports (text-box: trim-both cap alphabetic) {
  .policy-body__lead,
  .policy-section__title,
  .policy-section__body {
    text-box: trim-both cap alphabetic;
  }
}

@supports not (text-box: trim-both cap alphabetic) {
  .policy-body__lead,
  .policy-section__body {
    margin-block: -0.62em -0.547em;
  }
  .policy-section__title {
    margin-block: -0.507em -0.36em;
  }
}

.policy-section__body ul {
  padding-left: 1.5em;
  list-style: disc;
}

.policy-section__body li + li {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .policy-body__doc {
    padding-inline: clamp(32px, calc(18.9vw - 39px), 200px);
  }
  .policy-body__lead,
  .policy-section__body {
    font-size: var(--fs-15);
  }
}

/* ---------------------------------------
   notfound（404）
   ------------------------------------------ */
.notfound {
  position: relative;
  isolation: isolate;
  padding-top: clamp(64px, 8.333vw, 120px);
  padding-bottom: calc(clamp(64px, 8.333vw, 120px) + var(--footer-overlap));
  padding-inline: var(--content-pad-m);
  background-color: var(--color-base);
}

.notfound__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.333vw, 48px);
}

.notfound__text {
  max-width: 34em;
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .notfound__text {
    font-size: var(--fs-15);
  }
}

/* ==========================================================================
   SP の左右余白の統一
   ========================================================================== */
@media (max-width: 767px) {
  .service-about,
  .service-nav,
  .works-filter,
  .works-head,
  .aboutus-access,
  .news-archive,
  .news-detail,
  .news-nav,
  .news-recent,
  .sustainability-approach,
  .sustainability-iso,
  .sustainability-sdgs,
  .sustainability-activities,
  .sustainability-other,
  .recruit-mv,
  .recruit-people,
  .recruit-work,
  .recruit-numbers,
  .recruit-interview,
  .recruit-entry,
  .policy-body,
  .notfound {
    padding-inline: calc((100% - var(--content-width)) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruit-interview-card__details::details-content,
  .recruit-interview-card__toggle::after {
    transition: none;
  }
}