#index.company .main {
  background-color: var(--color-surface-cool);
}

#index.company .c-page-title {
  --page-title-heading-font-size: 0.48rem;
  --page-title-cut: 0.05rem;
  --page-title-heading-margin-left: 0.4rem;
  /* 右「会社概要」の左の余白（＝区切り線と和文の間隔 0.32rem）と
揃える */
  --page-title-heading-padding-inline: 0.35rem 0.32rem;
  --page-title-main-top: -0.03rem;
  --page-title-divider-margin-start: 0.3rem;
  --page-title-divider-margin-end: 0.32rem;
}

#index.company .pill {
  --beveled-cut: 0.03rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-family-brand);
  font-size: 0.35rem;
  line-height: 1;
  letter-spacing: 0; /* SPIKVANSTAR（TEST_V13）は字間がフォントに含まれるため 0 */
  padding-block: 0.17rem;
  margin: 0;
}

#index.company .pill--full {
  margin-top: -0.04rem;
}

#index.company .message-badge .pill-plus {
  margin-right: 0.14rem; /* L150（旧 0.29rem） */
}

#index.company .pill .pill-plus {
  margin-left: -0.17rem;
}

#index.company .pill--full .pill-plus {
  margin-left: -0.43rem;
}

#index.company .pill-plus {
  font-size: 0.343rem; /* 画像のときの字面 0.24rem ÷ 0.7 */
  margin-right: 0.14rem; /* L150（旧 calc(0.14rem - 0.14em)） */
}

#index.company .badge {
  --beveled-cut: 0.03rem;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  background: var(--color-primary);
  color: var(--color-white); /* 青ベタ見出しは 500 */
  font-size: 0.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.2rem;
  margin: 0;
}

#index.company .badge > span {
  position: relative;
  top: 0.06em; /* 見出しの文字を少し下げて上下中央に（他の青ベタ見出しと同じ方式。PC は 0.04em だと約1px 上寄りが残るため 0.06em） */
}

#index.company .message-badge {
  --beveled-cut: 0.03rem;
  display: inline-flex;
  align-items: center;
  gap: 0.31rem;
  width: fit-content;
  max-width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
  /* font-weight は指定しない（本文の 500）。600 だと Regular しかない専用書体の MESSAGE に疑似ボールドがかかる（L149） */
  font-size: 0.26rem;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 0.195rem 0.38rem 0.195rem 0.27rem;
  margin-top: -0.65rem;
}

#index.company .message-badge-main {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-brand);
  font-size: 0.4rem;
  letter-spacing: 0; /* SPIKVANSTAR（TEST_V13）は字間がフォントに含まれるため 0 */
}

#index.company .message-badge-divider {
  display: inline-block;
  width: 0.01rem;
  height: 0.3rem;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

#index.company .message-badge-sub {
  font-size: 0.18rem;
  white-space: nowrap;
}

#index.company .hero {
  --subpage-hero-half-width: 6.79rem;
  --subpage-hero-left-height: 74.2%;
  --subpage-hero-right-height: 100%;
  --subpage-hero-left-background: var(--color-surface-blue);
  --subpage-hero-right-background: var(--color-surface-blue);
  --subpage-hero-image-background: var(--color-surface-blue);
  --subpage-hero-notch-x: calc(var(--fluid-overhang) + 5.968rem); /* ページタイトル右端 + 0.44rem（下 0.44rem と揃える） */
  --subpage-hero-notch-y: 1.28rem;
  --subpage-hero-cut-x: 0.05rem;
  --subpage-hero-cut-y: 0.05rem;
  flex: 1 1 auto;
}

/* FV写真の横スクロール（無限ループ）。
同じ写真を4枚横に並べ、2枚分を1周として左へ流し続ける。反転はしない。
見える枠は差し替え前の 2720×996 のまま（縦を変えない）。中の写真は 6458×997 で、
高さだけ枠に合わせ、横は画像の比率のままはみ出して流す。
枠の形状は共通の .c-subpage-hero__image のまま。
速度はTOPのKV（index.js の speed 0.3px/フレーム ≒ 18px/秒）に合わせる。
1周は画像2枚分。1360px時 996×6458/997 ≒ 6452px ÷ 18 ≒ 355.8秒。
1920pxまで等倍拡大するので、幅が広いほど px/秒は上がる（TOPは常に18px/秒） */
#index.company .hero__pan {
  overflow: hidden;
  aspect-ratio: 2720 / 996;
  container-type: inline-size;
}

#index.company .hero__pan-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: spik-hero-pan 355.8s linear infinite;
  will-change: transform;
}

#index.company .hero__pan-tile {
  flex: none;
  height: 100%;
  width: calc(100cqw * 996 / 2720 * 6458 / 997);
}

#index.company .hero__pan-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes spik-hero-pan {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #index.company .hero__pan-track {
    animation: none;
  }
}

/* * STATEMENT以降（VMV〜会社概要）をまとめた1ブロック。
* 背景画像をビューポートに固定し、白いセクションがその上を流れる見せ方にする。
* background-attachment: fixed は背景をビューポート基準でサイズ・配置するため、
* background-size: 100% auto は画面幅に対して効き、bottom center は画面下端に付く */
#index.company .parallax {
  /* 配下の白いセクションは少し透かして固定背景を見せる。
（VMVパネルと、下の会社詳細のセクションが対象。
.vmv-panel / .message / .officers / .history / .partners / .overview がこの変数を使う） */
  --parallax-panel-bg: rgba(255, 255, 255, 0.95);
  /* 画像で覆いきれないとき（画面の高さが 24.4rem を超えるとき）だけ出る地色。bg-parallax.jpg 上端の空（実測 #c4d3e6）に合わせる */
  --parallax-bg-color: #c4d3e6;
  /* 会社概要とフッターの間隔。旧 #company-decoration 削除時は */
  padding-bottom: 5.7rem;
  /* 背景は画像（bg-parallax.jpg 2720×4880。webp 化すると荒れるので jpg のまま）。
   画面の高さ分の枠を画面下端に置き、.parallax__video（absolute で .parallax と同じ大きさ）の中で見せる。
z-index: -1 のラッパーを .parallax の中身より下・祖先の白背景より上に描くため、
isolation: isolate で重ね順の基準を作る（これが無いとラッパーは祖先の背景の裏に隠れる）。
役員モーダル（position: fixed）は重ね順が閉じ込められないよう .parallax の外に置いている
（page-company.php）。.parallax に clip-path は付けない */
  position: relative;
  isolation: isolate;
}

/* 画像の帯は position: sticky で画面下端に付ける。
ラッパー（.parallax と同じ大きさ）を縦の flex にして帯を末尾に置き、bottom: 0 で吸着させると、
ブロックが画面内にある間は画面下端に固定され、ブロックの下端（＝フッターの上）が近づくと
そこに留まって一緒にスクロールしていく。fixed のように切り抜く必要がなく、フッターの裏にも回らない */
#index.company .parallax__video {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--parallax-bg-color);
  pointer-events: none;
}

/* 枠は画面の高さ（100vh）。画面下端に吸着させると、ブロックが画面内にある間は画面全体が画像になる。
   画像（24.4rem）は枠より高いので上側（単色の空）が切れる。--parallax-bg-color が見えるのは画面が 24.4rem より高いときだけ。
   ブロックの上端が画面に入ってくる間は枠の上側（空）から見え、ブロック上端が画面上端に達すると人物（画像下端）が画面下端に揃う。 */
#index.company .parallax__video-frame {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#index.company .parallax__video-frame picture {
  display: block;
  width: 100%;
}

/* 支給画像（PC 2720×4880）を画面幅いっぱい・縦横比固定で、枠の下端に合わせる（上側は枠の外で切れる）。 */
#index.company .parallax__video-media {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
}

#index.company .statement {
  padding-top: 0.56rem;
  overflow-x: clip;
  background-color: var(--color-white);
  padding-bottom: 0.6rem;
}

#index.company .statement-frame {
  padding-inline: 0.12rem;
}

#index.company .statement-layout {
  position: relative;
  width: 100%;
  max-width: 10.8rem;
  margin: 0 auto;
}

#index.company .statement-panel {
  --beveled-cut: 0.05rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
  /* 背景は支給画像1枚。
 支給画像 2000×1391（比 1.4378）はこのパネルの比（実測 1.4373）とほぼ同じ */
  background: url("../../images/company/bg-statement.webp") center / cover no-repeat, #001e91;
  clip-path: polygon(var(--beveled-cut) 0,
      calc(100% - var(--beveled-cut)) 0,
      100% var(--beveled-cut),
      100% 57.26%,
      calc(100% - var(--beveled-cut)) 57.79%,
      calc(100% - 0.4rem) 57.79%,
      calc(100% - 0.45rem) 58.32%,
      calc(100% - 0.45rem) calc(100% - var(--beveled-cut)),
      calc(100% - 0.5rem) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)),
      0 var(--beveled-cut));
  padding: 0.72rem 0.7rem 0.84rem 0.98rem;
}

#index.company .statement-decoration {
  --statement-decoration-cut: 0.05rem;
  position: absolute;
  top: 0;
  bottom: 0;
}

#index.company .statement-decoration--left {
  right: calc(100% + 0.4rem);
  aspect-ratio: 100 / 749;
}

#index.company .statement-decoration--right {
  left: 100%;
  aspect-ratio: 140 / 749;
}

#index.company .statement-decoration--left::after,
#index.company .statement-decoration--right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
}

#index.company .statement-decoration--left::after {
  clip-path: polygon(0 0,
      calc(100% - var(--statement-decoration-cut)) 0,
      100% var(--statement-decoration-cut),
      100% calc(100% - var(--statement-decoration-cut)),
      calc(100% - var(--statement-decoration-cut)) 100%,
      0 100%);
}

#index.company .statement-decoration--right::before {
  clip-path: polygon(100% 100%,
      var(--statement-decoration-cut) 100%,
      0 calc(100% - var(--statement-decoration-cut)),
      0 63.952%,
      var(--statement-decoration-cut) calc(63.952% - var(--statement-decoration-cut)),
      calc(0.4rem - var(--statement-decoration-cut)) calc(63.952% - var(--statement-decoration-cut)),
      0.4rem calc(63.952% - var(--statement-decoration-cut) - var(--statement-decoration-cut)),
      0.4rem var(--statement-decoration-cut),
      calc(0.4rem + var(--statement-decoration-cut)) 0,
      100% 0);
}

#index.company .statement-decoration--left::before,
#index.company .statement-decoration--right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 99.99rem;
  background: var(--color-primary);
}

#index.company .statement-decoration--left::before {
  right: 99%;
}

#index.company .statement-decoration--right::after {
  left: 99%;
}

#index.company .statement-heading {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-family-brand);
  font-size: 0.5rem;
  line-height: 1;
  letter-spacing: 0; /* SPIKVANSTAR（TEST_V13）は字間がフォントに含まれるため 0 */
}

#index.company .statement-plus {
  font-size: 0.457rem; /* 画像のときの字面 0.32rem ÷ 0.7 */
  margin-right: 0.14rem; /* L150（旧 calc(0.17rem - 0.14em)） */
}

#index.company .statement-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 6.4rem;
}

#index.company .statement-text {
  margin: 0;
  color: var(--color-white);
  font-size: 0.16rem;
  line-height: 0.39rem;
  letter-spacing: 0.02em;
  font-weight: 400;
}

#index.company .statement-catch {
  margin: 0.29rem 0 0;
  color: var(--color-white);
  font-size: 0.19rem;
  letter-spacing: 0.04em;
}

#index.company .vmv {
  width: 100%;
  position: relative;
  overflow: clip;
}

#index.company .vmv-inner {
  position: relative;
  z-index: 2;
  /* .message 以降のセクション（l-outer: 13rem）と横幅を揃える。
マークアップは l-inner のまま（SPは l-inner の挙動を維持するため） */
  max-width: 13rem;
  padding-block: 1.3rem 1.1rem;
}

#index.company .vmv-panel {
  --beveled-cut: 0.05rem;
  width: 100%;
  background: var(--parallax-panel-bg);
  padding: 0.64rem 0.5rem 0.35rem 0.5rem;
}

#index.company .vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

#index.company .vm-item {
  min-width: 0;
}

#index.company .vm-text {
  margin: 0.54rem 0 0;
  text-align: center;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.26rem;
  line-height: 1.6;
}

#index.company .values {
  margin-top: 0.64rem;
}

#index.company .values-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.18rem;
}

#index.company .values-label {
  flex: 1;
  margin-top: -0.2rem;
  padding: 0 0.24rem 0 0;
  text-align: center;
  color: var(--color-primary);
  font-size: 0.31rem;
  letter-spacing: 0.01rem;
  line-height: 1.1;
}

#index.company .values-list {
  margin: 0.15rem -0.02rem 0.15rem 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  width: 6.1rem;
}

#index.company .values-item {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  padding-block: 0.28rem;
  border-top: 0.01rem solid var(--color-border-light);
}

#index.company .values-item:first-child {
  border-top: none;
}

#index.company .values-item-head {
  flex: 0 0 2.05rem;
}

#index.company .values-item-title {
  margin: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.23rem;
  line-height: 1.3;
}

#index.company .values-item-sub {
  margin: 0.04rem 0 0;
  color: var(--color-primary);
  font-size: 0.13rem;
}

#index.company .values-item-desc {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--color-primary);
  /* 400 の書体を読み込む前はここも 500 で描画されていた。今回のウエイト調整の対象外なので
見た目を保つため 500 を明示する */
  font-size: 0.15rem;
  line-height: 1.6;
}

#index.company .message {
  --beveled-cut: 0.05rem;
  padding-top: 1.57rem;
  overflow-x: clip;
  margin-top: 0.37rem;
  background: var(--parallax-panel-bg);
  clip-path: polygon(0 var(--beveled-cut),
      var(--beveled-cut) 0,
      calc(58.6154% - var(--beveled-cut)) 0,
      58.6154% var(--beveled-cut),
      58.6154% calc(1.04rem - var(--beveled-cut)),
      calc(58.6154% + var(--beveled-cut)) 1.04rem,
      calc(100% - var(--beveled-cut)) 1.04rem,
      100% calc(1.04rem + var(--beveled-cut)),
      100% calc(100% - var(--beveled-cut)),
      calc(100% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)));
}

#index.company .message-body {
  display: flex;
  align-items: flex-start;
  gap: 0.52rem;
  margin-top: 0.74rem;
  width: 100%;
  max-width: 10.8rem;
  margin-left: auto;
  margin-right: auto;
}

#index.company .message-content {
  min-width: 0;
  padding-left: 0.3rem;
  width: 6.02rem;
  margin-top: -0.5em;
}

#index.company .message-heading {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.40rem;
  line-height: 1.4;
  letter-spacing: 0.025em;
}

#index.company .message-quote {
  --beveled-cut: 0.03rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.09rem;
  margin: 0.29rem 0 0;
  background-color: var(--color-primary);
  color: var(--color-white);
  width: fit-content;
  font-weight: 400;
}

#index.company .message-quote-main {
  display: inline-flex;
  align-items: center;
  border-radius: 0.04rem;
  padding: 0.07rem 0 0.05rem 0.19rem;
  font-weight: 600;
  letter-spacing: 0.005rem;
  font-size: 0.18rem;
}

#index.company .message-quote-sub {
  font-size: 0.1rem;
  letter-spacing: 0.004rem;
  padding-right: 0.2rem;
}

#index.company .message-text {
  margin: 0.28rem 0 0;
  color: var(--color-primary);
  font-size: 0.16rem;
  line-height: 0.3rem;
  letter-spacing: 0.02em;
  font-weight: 400;
}

#index.company .message-name {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  margin: 0.23rem 0 0;
}

#index.company .message-name-role {
  color: var(--color-primary);
  font-size: 0.12rem;
}

#index.company .message-name-person {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.21rem;
}

#index.company .message-photo {
  height: 4.96rem;
  flex: 0 0 4.2rem;
  margin-right: calc((100vw - 10.8rem) / -2);
  aspect-ratio: 570/481;
  background: var(--color-surface-lilac);
  overflow: hidden;
}

#index.company .message-photo img {
  --beveled-cut: 0.04rem;
  display: block;
  width: 4.2rem;
  height: 4.96rem;
  object-fit: cover;
  object-position: top center;
}

#index.company .message-photo-spacer {
  display: none;
}

#index.company .message-photo-float {
  display: none;
}

#index.company .officers {
  padding-top: 1.03rem;
  background-color: var(--parallax-panel-bg);
  margin-top: -0.01rem;
}

#index.company .officers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.16rem 0.24rem;
  margin-top: 0.32rem;
}

#index.company .officer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.16rem;
  background: var(--color-surface-light);
  border-radius: 0.04rem;
  height: 0.8rem;
  padding: 0 0.19rem 0 0.24rem;
  min-width: 0;
}

#index.company .officer-info {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  min-width: 0;
}

#index.company .officer-role {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.11rem;
  line-height: 1.6;
  width: 1.46rem;
}

#index.company .officer-name {
  margin: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.19rem;
}

#index.company .officer-arrow {
  flex-shrink: 0;
  display: block;
  /* 1920px 超で画面に合わせて大きくならないよう 36px で頭打ち（L146）。小さい画面では従来どおり rem で縮む */
  width: min(0.36rem, 36px);
  height: min(0.36rem, 36px);
  border-radius: 0.02rem;
}

#index.company .history {
  padding-top: 0.89rem;
  background-color: var(--parallax-panel-bg);
  margin-top: -0.01rem;
}

#index.company .history-list {
  --beveled-cut: 0.05rem;
  margin-top: 0.32rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#index.company .history-item {
  display: flex;
  gap: 0.32rem;
  padding: 0.26rem 0.32rem;
}

#index.company .history-item:nth-child(odd) {
  background: var(--color-surface-lilac);
}

#index.company .history-item:nth-child(even) {
  background: #e9ecf7;
}

#index.company .history-year {
  flex: 0 0 1.78rem;
  margin: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.16rem;
  line-height: 1.4;
}

#index.company .history-desc {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--color-primary);
  font-size: 0.15rem;
  line-height: 1.7;
}

#index.company .partners {
  padding-top: 0.8rem;
  background: var(--parallax-panel-bg);
  margin-top: -0.01rem;
}

#index.company .partners-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.16rem;
  margin-top: 0.32rem;
}

#index.company .partner-placeholder {
  --beveled-cut: 0.04rem;
  width: 1.66rem;
  height: 1.6rem;
  aspect-ratio: 4/3;
  background: var(--color-surface-lilac);
}

#index.company .overview {
  --beveled-cut: 0.05rem;
  padding-block: 0.8rem 1.00rem;
  background-color: var(--parallax-panel-bg);
  margin-top: -0.01rem;
  clip-path: polygon(0 0,
      100% 0,
      100% calc(100% - var(--beveled-cut)),
      calc(100% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)));
}

#index.company .table {
  margin-top: 0.32rem;
  padding: 0;
  border-top: 0.01rem solid var(--color-border-muted);
}

#index.company .table-row {
  display: flex;
  gap: 0.4rem;
  padding-block: 0.27rem;
  border-bottom: 0.01rem solid var(--color-border-muted);
  padding-inline: 0.23rem;
}

#index.company .table-label {
  flex: 0 0 2.2rem;
  margin: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.16rem;
  line-height: 1.6;
}

#index.company .table-value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#index.company .table-value p {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.16rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

#index.company .officer-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

#index.company .officer-modal:target {
  display: block;
}

#index.company .officer-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 40, 0.5);
}

#index.company .officer-modal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.4rem;
}

/* スクロールは __body 側で行う（SP側のコメント参照）。低い画面で中身が溢れたときも背景と閉じるボタンは動かない */
#index.company .officer-modal__dialog {
  position: relative;
  width: 100%;
  /* 白背景（.officer-modal__bg）は inset: 0 でこのダイアログいっぱいなので、ここを変える */
  height: 5.84rem;
  max-width: 10.9rem;
  max-height: 100%;
  overflow: hidden;
  padding-right: 0.7rem;
}

#index.company .officer-modal__bg {
  --beveled-cut: 0.05rem;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-white);
  clip-path: polygon(var(--beveled-cut) 0,
      calc(100% - var(--beveled-cut)) 0,
      100% var(--beveled-cut),
      100% calc(12.54% - var(--beveled-cut)),
      calc(100% - var(--beveled-cut)) 12.54%,
      93.58% 12.54%,
      93.21% 13.24%,
      93.21% calc(100% - var(--beveled-cut)),
      calc(93.21% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)),
      0 var(--beveled-cut));
}

#index.company .officer-modal__close {
  position: absolute;
  z-index: 2;
  top: 0.22rem;
  right: 0.2rem;
  width: 0.32rem;
  height: 0.32rem;
}

#index.company .officer-modal__close::before,
#index.company .officer-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.3rem;
  height: 0.04rem;
  background: var(--color-primary);
}

#index.company .officer-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#index.company .officer-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#index.company .officer-modal__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* （役員カードの .officer-arrow と同じ寸法に） */
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 0.04rem;
}

#index.company .officer-modal__nav--prev {
  left: 0.24rem;
}

#index.company .officer-modal__nav--next {
  right: 1rem;
}

#index.company .officer-modal__nav--prev img {
  transform: scaleX(-1);
}

#index.company .officer-modal__nav img {
  width: 100%;
  height: 100%;
  display: block;
}

#index.company .officer-modal__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.64rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#index.company .officer-modal__info {
  order: 1;
  min-width: 0;
  flex: 0 0 3.85rem;
}

#index.company .officer-modal__role {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.15rem;
}

#index.company .officer-modal__name {
  margin: 0.08rem 0 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.32rem;
}

#index.company .officer-modal__bio {
  margin: 0.24rem 0 0;
  color: var(--color-primary);
  font-size: 0.16rem;
  line-height: 1.9;
}

#index.company .officer-modal__photo-row {
  order: 2;
  flex: 0 0 2.8rem;
}

#index.company .officer-modal__photo {
  aspect-ratio: 320/400;
  background: var(--color-surface-lilac);
  border-radius: 0.04rem;
  overflow: hidden;
}

#index.company .officer-modal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

#index.company .officer-modal__photo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-surface-lilac);
}

#index.company .officer-modal__nav-side {
  display: none;
}