/* ==========================================================================
   Components（共通部品）

   ブレイクポイントは SP（max-width: 768px）の1段階が基本。
   例外：ヘッダー（ナビ5項目＋エントリー）が折り返さないよう、769〜1100px / 769〜960px で
   段階的に縮める調整を入れている。各ページCSSの (max-width: 1100px) and (min-width: 769px)
   も同じ扱い（横並びが収まらない箇所だけを中間幅で組み替える）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header（Figma: Frame 130 / 1:68）
   -------------------------------------------------------------------------- */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: 1.25rem 1.5rem 0; /* ロゴ・メニューの位置は Figma どおり上から 20px */
  pointer-events: none; /* ヘッダー左右の余白で下のコンテンツを触れるように */
}

/* すりガラスの帯（横幅いっぱい）。backdrop-filter を header 本体に付けると
   fixed の子（SPメニュー）の基準が変わるため疑似要素に付ける */
.l-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 87rem; /* 1392px */
  margin-inline: auto;
}

.l-header__logo,
.l-header__menu,
.l-header__toggle {
  pointer-events: auto;
}

/* 30周年マークを外したロゴ（2026-10-28）。高さは Figma の 48px のまま、幅を詰めた */
.l-header__logo img {
  width: 9.0625rem; /* 145px */
  height: auto;
}

.l-header__menu {
  display: flex;
  align-items: center;
}

.l-header__nav {
  display: flex;
  align-items: center;
  height: 5.125rem; /* 82px */
  padding: var(--space-16) var(--space-32);
}

.l-header__entry {
  padding: var(--space-16);
}

.l-header__toggle {
  display: none;
}

/* Global nav */
.c-gnav__list {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.c-gnav__link {
  display: block;
  font-family: var(--font-ja);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}

[data-page="company"] .c-gnav__link[data-nav="company"],
[data-page="work"] .c-gnav__link[data-nav="work"],
[data-page="environment"] .c-gnav__link[data-nav="environment"],
[data-page="people"] .c-gnav__link[data-nav="people"],
[data-page="info"] .c-gnav__link[data-nav="info"] {
  color: var(--color-main);
}

/* エントリーボタン（ヘッダー） */
.c-btn-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-40);
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease);
}

@media (hover: hover) {
  .c-gnav__link:hover {
    color: var(--color-main);
  }

  .c-btn-entry:hover {
    opacity: 0.8;
  }
}

@media (max-width: 1240px) and (min-width: 1101px) {
  /* 「エントリー」は「ENTRY」より幅があるため、余白を詰めてロゴとメニューの間をあける */
  .c-btn-entry {
    padding-inline: var(--space-24);
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .c-gnav__list {
    gap: var(--space-20);
  }

  .l-header__nav {
    padding-inline: var(--space-20);
  }

  .c-gnav__link {
    font-size: var(--fs-14);
  }

  .l-header__logo img {
    width: 7rem;
  }
}

@media (max-width: 960px) and (min-width: 769px) {
  .c-gnav__list {
    gap: var(--space-16);
  }

  .l-header__nav {
    padding-inline: var(--space-16);
  }

  .c-gnav__link {
    font-size: 0.8125rem;
  }

  .l-header__logo img {
    width: 6.125rem;
  }

  .l-header__entry {
    padding: var(--space-8);
  }

  /* 「エントリー」は「ENTRY」より幅があるため、文字と余白を詰めてロゴとメニューの間をあける */
  .c-btn-entry {
    padding-inline: var(--space-12);
    font-size: var(--fs-14);
  }
}

@media (max-width: 768px) {
  :root {
    --header-offset: 5rem; /* SPヘッダー高 64px + 余白 16px */
  }

  .l-header {
    padding: 0;
  }

  .l-header__inner {
    position: relative;
    height: 4rem;
    padding-inline: var(--container-gutter);
  }

  .l-header__logo {
    position: relative;
    z-index: 2;
  }

  .l-header__logo img {
    width: 6.0625rem; /* 97px（PC の高さ 48px の 2/3 の高さ） */
  }

  .l-header__toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.625rem;
    color: var(--color-main);
  }

  .l-header__toggle-bar,
  .l-header__toggle-bar::before,
  .l-header__toggle-bar::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    border-radius: var(--radius-xs);
    background-color: currentColor;
    transition: transform var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
  }

  .l-header__toggle-bar {
    position: relative;
  }

  .l-header__toggle-bar::before,
  .l-header__toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .l-header__toggle-bar::before {
    transform: translateY(-0.4375rem);
  }

  .l-header__toggle-bar::after {
    transform: translateY(0.4375rem);
  }

  .l-header__toggle[aria-expanded="true"] .l-header__toggle-bar {
    background-color: transparent;
  }

  .l-header__toggle[aria-expanded="true"] .l-header__toggle-bar::before {
    transform: rotate(45deg);
  }

  .l-header__toggle[aria-expanded="true"] .l-header__toggle-bar::after {
    transform: rotate(-45deg);
  }

  .l-header__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
    padding: 6rem var(--container-gutter) var(--space-48);
    overflow-y: auto;
    background-color: var(--color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease), visibility var(--duration-fast) var(--ease);
  }

  .is-menu-open .l-header__menu {
    opacity: 1;
    visibility: visible;
  }

  .l-header__nav {
    height: auto;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .c-gnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .c-gnav__item {
    border-bottom: 1px solid var(--color-border);
  }

  .c-gnav__link {
    padding-block: var(--space-20);
    font-size: var(--fs-18);
  }

  .l-header__entry {
    padding: 0;
  }

  .c-btn-entry {
    width: 100%;
    padding-block: var(--space-16);
  }
}

/* --------------------------------------------------------------------------
   Section heading（Figma: Frame 25 / 1:693）
   -------------------------------------------------------------------------- */
.c-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-heading__en {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-label);
}

.c-heading--sky .c-heading__en {
  color: var(--color-sky);
}

.c-heading__ja {
  color: var(--color-main);
  font-family: var(--font-ja);
  font-size: var(--fs-64);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

/* 小見出し（Figma: h3 / 1:751） */
.c-title-square {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-main);
  font-family: var(--font-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.c-title-square::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-xs);
  background-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Button（Figma: Frame 40 / 1:715）
   -------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-16) var(--space-20) var(--space-32);
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: var(--color-white);
  transition: opacity var(--duration-fast) var(--ease);
}

.c-btn__label {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  font-family: var(--font-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  white-space: nowrap;
}

.c-btn__label::after {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 1.25rem;
  background-color: var(--color-accent-divider);
}

.c-btn__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

/* 外部リンク（バリアント2） */
.c-btn--external {
  justify-content: flex-end;
  width: 18.125rem; /* 290px */
  padding-left: var(--space-20);
}

.c-btn--external .c-btn__label {
  gap: var(--space-12);
  font-size: var(--fs-16);
}

.c-btn--external .c-btn__text {
  width: 12.5rem; /* 200px */
  text-align: center;
}

@media (hover: hover) {
  .c-btn:hover {
    opacity: 0.8;
  }
}

/* --------------------------------------------------------------------------
   Person card（Figma: Frame 32 / 1:680）
   -------------------------------------------------------------------------- */
.c-person-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-person-card__img {
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 272 / 370;
}

.c-person-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-fade) var(--ease);
}

.c-person-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.c-person-card__catch {
  font-family: var(--font-ja);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.c-person-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.c-person-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-bottom: 0.375rem;
}

.c-person-card__name {
  color: var(--color-main);
  font-family: var(--font-ja);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

/* Figma は「部署 ・ 入社年」の1行だが、実在の部署名（「営業本部第二グループ」など）は
   4列のカード幅に収まらず語の途中で折り返すため、部署と入社年を2行に分ける */
.c-person-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  font-family: var(--font-ja);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
}

.c-person-card__arrow {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-main);
  transition: transform var(--duration-fast) var(--ease);
}

@media (hover: hover) {
  .c-person-card:hover .c-person-card__img img {
    transform: scale(1.05);
  }

  .c-person-card:hover .c-person-card__arrow {
    transform: translateX(4px);
  }
}

/* --------------------------------------------------------------------------
   Texture background（Figma: Subtract 1:10 / Group 6 の塗り）
   -------------------------------------------------------------------------- */
.c-bg-texture {
  background-color: var(--color-bg-light);
  background-image: url("../img/common/bg-texture.webp");
  background-position: center top;
  background-size: cover;
}

/* --------------------------------------------------------------------------
   Footer（Figma: Group 6 / 1:902）
   -------------------------------------------------------------------------- */
.l-footer {
  position: relative;
  z-index: var(--z-base);
  padding-top: 8.75rem; /* 140px */
  /* 右上の切り欠き（x570〜1440 / 高さ56px） */
  clip-path: polygon(0 0, 39.583% 0, 39.583% min(3.5rem, 3.889vw), 100% min(3.5rem, 3.889vw), 100% 100%, 0 100%);
}

.l-footer__entry {
  padding-bottom: var(--space-120);
  border-bottom: 1px solid var(--color-line);
  scroll-margin-top: var(--header-offset);
}

.l-footer__entry-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-40);
}

.l-footer__entry-head {
  display: flex;
  flex: 0 1 32rem; /* 512px */
  flex-direction: column;
  gap: var(--space-48);
  min-width: 0;
}

.l-footer__entry-head .c-heading__ja {
  white-space: nowrap;
}

.l-footer__entry-links {
  display: flex;
  flex: 0 1 42.5rem; /* 680px。1101〜1240px では縮める */
  flex-direction: column;
  gap: var(--space-20);
  min-width: 0;
  padding-top: var(--space-48);
}

/* Figma はマイナビのロゴ＋ボタン。ロゴを外し（2026-10-27）、ロゴの位置にリード文を置く */
.c-entry-card {
  display: flex;
  flex-wrap: wrap; /* 横に並ばない幅（1101〜1300px 前後）ではボタンを文言の下に回す */
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: var(--space-16) var(--space-32);
  height: 12.5rem; /* 200px */
  padding-inline: var(--space-24);
  border: 1px solid var(--color-main);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.c-entry-card__text {
  font-family: var(--font-ja);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  white-space: nowrap; /* 行は <br> の位置で決める */
}

.c-entry-card .c-btn--external {
  flex-shrink: 0;
}

.c-line-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  padding: calc(var(--space-32) - 1px) calc(var(--space-48) - 1px); /* Figma は内側線 */
  border: 1px solid var(--color-line-brand);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  transition: opacity var(--duration-fast) var(--ease);
}

.c-line-card__logo {
  flex-shrink: 0;
  width: 14.375rem; /* 230px */
}

.c-line-card__text {
  font-family: var(--font-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  white-space: nowrap;
}

.l-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-40);
  padding-top: var(--space-80);
  padding-bottom: var(--space-64);
}

.l-footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-96);
}

.l-footer__company {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.l-footer__address {
  font-family: var(--font-ja);
  font-size: var(--fs-18);
  font-style: normal;
  line-height: var(--lh-normal);
}

.l-footer__logo {
  width: 12.0625rem; /* 193px（高さは Figma の 64px のまま） */
}

.l-footer__corporate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-main);
  font-family: var(--font-ja);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
}

.l-footer__corporate span {
  text-decoration: underline;
  text-underline-position: from-font;
}

.l-footer__corporate-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.l-footer__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 19.0625rem; /* 305px */
}

.l-footer__nav-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: var(--space-64);
  row-gap: var(--space-48);
}

.l-footer__nav-link {
  display: block;
  font-family: var(--font-ja);
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}

.l-footer__copyright {
  font-family: var(--font-base);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

.l-footer__copyright small {
  font-size: inherit;
}

@media (hover: hover) {
  .c-line-card:hover {
    opacity: 0.8;
  }

  .l-footer__nav-link:hover,
  .l-footer__corporate:hover {
    color: var(--color-main);
  }

  .l-footer__corporate:hover span {
    text-decoration: none;
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .l-footer__entry-inner {
    flex-direction: column;
  }

  /* 縦積みでは PC 用の flex-basis（幅）が高さとして効いて下に空きができるため外す */
  .l-footer__entry-head,
  .l-footer__entry-links {
    flex: none;
    width: 100%;
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .l-footer {
    padding-top: 5.25rem;
    clip-path: polygon(0 0, 39.583% 0, 39.583% 1.5rem, 100% 1.5rem, 100% 100%, 0 100%);
  }

  .l-footer__entry {
    padding-bottom: var(--space-64);
  }

  .l-footer__entry-inner {
    flex-direction: column;
    gap: var(--space-40);
  }

  .l-footer__entry-head {
    flex: none; /* 縦積みでは PC 用の flex-basis が高さとして効くため外す */
    gap: var(--space-32);
    width: 100%;
  }

  .l-footer__entry-head .c-heading__ja {
    white-space: normal;
  }

  .l-footer__entry-links {
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .c-entry-card {
    flex-direction: column;
    gap: var(--space-16);
    height: auto;
    padding: var(--space-24) var(--space-16);
  }

  .c-entry-card__text {
    white-space: normal;
    text-align: center;
  }

  .c-entry-card .c-btn--external {
    width: 100%;
    max-width: 18.125rem;
  }

  .c-line-card {
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-24) var(--space-16);
  }

  .c-line-card__logo {
    width: 11.5rem;
  }

  .c-line-card__text {
    font-size: var(--fs-16);
  }

  .l-footer__bottom {
    flex-direction: column;
    gap: var(--space-48);
    padding-top: var(--space-48);
    padding-bottom: var(--space-40);
  }

  .l-footer__info {
    gap: var(--space-40);
  }

  .l-footer__address {
    font-size: var(--fs-16);
  }

  .l-footer__logo {
    width: 8.75rem;
  }

  .l-footer__side {
    align-items: flex-start;
    gap: var(--space-40);
    min-height: 0;
  }

  .l-footer__nav-list {
    column-gap: var(--space-32);
    row-gap: var(--space-24);
  }
}

/* --------------------------------------------------------------------------
   下層共通CTA（Figma: Group 12 / Frame 127 / 1:233）
   -------------------------------------------------------------------------- */
.c-cta {
  position: relative;
  isolation: isolate;
  padding-top: var(--space-80);
  padding-bottom: var(--space-120);
}

/* 背景写真（高さ706px。下はフッターの下に潜り、フッター右上の切り欠きから見える） */
.c-cta::before {
  /* bg-room.webp は Figma の opacity .2 を焼き込み済みで書き出しているため、CSS 側で透明度はかけない */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-bg);
  height: 44.125rem;
  background-image: url("../img/common/bg-room.webp");
  background-position: center top;
  background-size: cover;
  pointer-events: none;
}

.c-cta__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-32);
}

[data-page="company"] .c-cta__item[data-nav="company"],
[data-page="work"] .c-cta__item[data-nav="work"],
[data-page="environment"] .c-cta__item[data-nav="environment"],
[data-page="info"] .c-cta__item[data-nav="info"],
[data-page="people"] .c-cta__item[data-nav="people"] {
  display: none;
}

.c-cta__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  height: 100%;
  padding: 7px 1.625rem 6px 7px; /* border込みで Figma の 8 / 27 / 7 / 8 */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.c-cta__thumb {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.c-cta__label {
  font-family: var(--font-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.c-cta__arrow {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-main);
  transition: transform var(--duration-fast) var(--ease);
}

@media (hover: hover) {
  .c-cta__card:hover .c-cta__arrow {
    transform: translateX(4px);
  }

  .c-cta__card:hover .c-cta__label {
    color: var(--color-main);
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .c-cta__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .c-cta {
    padding-top: var(--space-48);
    padding-bottom: var(--space-80);
  }

  .c-cta__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-20);
  }

  .c-cta__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding: 7px 7px 2.5rem;
  }

  .c-cta__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .c-cta__label {
    font-size: var(--fs-16);
  }
}

/* --------------------------------------------------------------------------
   下層共通ヒーロー（Figma: Frame 84 / 1:88 + 背景 1:87）
   -------------------------------------------------------------------------- */
.c-page-hero {
  position: relative;
  isolation: isolate;
  padding-top: 9.375rem;   /* 150px */
  padding-bottom: 3.9375rem; /* 551 - 150 - 337 - border1 */
  border-bottom: 1px solid var(--color-border);
}

.c-page-hero::before {
  /* bg-room.webp は Figma の opacity .2 を焼き込み済みで書き出しているため、CSS 側で透明度はかけない */
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background-image: url("../img/common/bg-room.webp");
  background-position: center top;
  background-size: cover;
  pointer-events: none;
}

.c-page-hero__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-40);
}

.c-page-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-120);
  min-height: 21.0625rem; /* 337px（Figma Frame 85 の固定高） */
}

.c-page-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.c-page-hero__lead {
  font-family: var(--font-ja);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
}

.c-page-hero__img {
  flex-shrink: 0;
  width: 18.75rem; /* 300px */
  overflow: hidden;
  border-radius: var(--radius-md);
}

.c-page-hero__img img {
  width: 100%;
  aspect-ratio: 300 / 200;
  object-fit: cover;
}

@media (max-width: 768px) {
  .c-page-hero {
    padding-top: 6rem;
    padding-bottom: var(--space-40);
  }

  .c-page-hero__inner {
    flex-direction: column;
    gap: var(--space-32);
  }

  .c-page-hero__body {
    gap: var(--space-48);
    min-height: 0;
  }

  .c-page-hero__head {
    gap: var(--space-24);
  }

  .c-page-hero__img {
    width: 100%;
  }

  .c-page-hero__img img {
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumb（Figma: pan / 1:730）
   -------------------------------------------------------------------------- */
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) 0;
  font-family: var(--font-ja);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-label);
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
  min-width: 0;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin-inline: var(--space-16);
  background-color: var(--color-border);
}

.c-breadcrumb__link {
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (hover: hover) {
  .c-breadcrumb__link:hover {
    color: var(--color-main);
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   ページ内リンク（Figma: Frame 90 / Frame 87 1:936）
   -------------------------------------------------------------------------- */
.c-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-16) var(--space-48);
}

.c-anchor-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}

.c-anchor-nav__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background-color: var(--color-white);
  color: var(--color-main);
  transition: transform var(--duration-fast) var(--ease);
}

@media (hover: hover) {
  .c-anchor-nav__link:hover {
    color: var(--color-main);
  }

  .c-anchor-nav__link:hover .c-anchor-nav__icon {
    transform: translateY(2px);
  }
}

@media (max-width: 768px) {
  .c-anchor-nav {
    justify-content: flex-start;
    gap: var(--space-16) var(--space-32);
  }
}

/* --------------------------------------------------------------------------
   セクション見出し（h3ラベル + 48pxキャッチ / Figma: Frame 98 1:770）
   -------------------------------------------------------------------------- */
.c-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.c-section-head__catch {
  font-family: var(--font-ja);
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

/* PC幅では Figma どおりの改行位置で固定（中間幅・SPでは自然折り返し） */
@media (min-width: 1101px) {
  .c-section-head__catch--nowrap {
    white-space: nowrap;
  }
}

/* 見出し横・下に置くリード文（Figma: Frame 133 / 177 / 217 の右側テキスト） */
.c-section-head__lead {
  font-family: var(--font-ja);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
}

@media (max-width: 768px) {
  .c-section-head {
    gap: var(--space-16);
  }

  .c-section-head__lead {
    font-size: var(--fs-16);
  }

  .c-section-head__lead br {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   タグ（Figma: Detail Tag / 1:784）
   -------------------------------------------------------------------------- */
.c-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.c-tag {
  display: inline-block;
  padding: calc(var(--space-8) - 1px) calc(var(--space-12) - 1px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background-color: var(--color-white);
  color: var(--color-main);
  font-family: var(--font-ja);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Person list（Figma: Frame 36 / トップ・人を知る・詳細で共用）
   -------------------------------------------------------------------------- */
.c-person-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.5rem, 4.444vw, 4rem); /* 1440で64px */
}

.c-person-list__item:nth-child(even) {
  padding-top: var(--space-64);
}

@media (max-width: 1024px) and (min-width: 769px) {
  .c-person-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .c-person-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }

  .c-person-list__item:nth-child(even) {
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Accordion（Figma: Frame 1000004756 / 1:945）
   -------------------------------------------------------------------------- */
.c-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-accordion__item {
  padding: calc(var(--space-24) - 1px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.c-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  min-height: 2.5rem; /* 40px */
  text-align: left;
}

.c-accordion__q {
  flex-shrink: 0;
  color: var(--color-main);
  font-family: var(--font-base);
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.c-accordion__question {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-loose);
  word-break: auto-phrase; /* SPで「か？」だけが次の行に落ちるのを避ける */
}

/* ＋ / − アイコン（Figma: 24×4px の線 2本） */
.c-accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.c-accordion__icon::before,
.c-accordion__icon::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--color-main);
  transition: transform var(--duration-fast) var(--ease);
}

.c-accordion__icon::after {
  transform: rotate(90deg);
}

.c-accordion__trigger[aria-expanded="true"] .c-accordion__icon::after {
  transform: rotate(0deg);
}

.c-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-fast) var(--ease), visibility var(--duration-fast) var(--ease);
}

.c-accordion__item.is-open .c-accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.c-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.c-accordion__answer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  margin-top: var(--space-24);
  padding: var(--space-16);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-gray);
  font-weight: var(--fw-medium);
}

.c-accordion__a {
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-base);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}

.c-accordion__answer-text {
  font-family: var(--font-ja);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  /* 「サポー／ト。」のような1文字だけの折り返しを避ける（auto-phrase 非対応ブラウザは通常の折り返し） */
  word-break: auto-phrase;
}

/* 回答に複数項目を並べる場合（福利厚生タブ） */
.c-accordion__answer-list {
  display: grid;
  gap: var(--space-12);
}

.c-accordion__answer-list > li {
  position: relative;
  padding-left: 1em;
}

.c-accordion__answer-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.c-accordion__answer-title {
  font-weight: var(--fw-bold);
}

@media (prefers-reduced-motion: reduce) {
  .c-accordion__panel,
  .c-accordion__icon::after {
    transition: none;
  }
}

@media (max-width: 768px) {
  .c-accordion__item {
    padding: calc(var(--space-16) - 1px);
  }

  .c-accordion__trigger {
    gap: var(--space-12);
  }

  .c-accordion__question {
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
  }

  .c-accordion__icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .c-accordion__icon::before,
  .c-accordion__icon::after {
    top: calc(50% - 1.5px);
    height: 3px;
  }

  .c-accordion__answer {
    gap: var(--space-12);
    margin-top: var(--space-16);
    padding: var(--space-12);
  }

  .c-accordion__answer-text {
    font-size: var(--fs-14);
  }
}

.c-accordion__heading {
  margin: 0;
  font: inherit;
}