.hero-lead {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.75;
  text-shadow: 1px 2px 0 #e60012;
}

/* 目次。4項目・パネル幅1200pxで左右156pxの均等ガター */

.toc {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
}

/* セクション骨格（中央寄せ型・装飾リングは左右63pxはみ出す）
   見出しを持たないセクションなのでパネルは section 側の padding-top で下げる */

.content-section {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
  margin: 40px auto 0;
  padding-top: 88px;
}

/* パネルをコンテナ化し、中身の折り返し判定を画面幅ではなくパネル自身の幅で行う */
.content-section .section-panel {
  container: panel / inline-size;
  width: 100%;
  margin-top: 0;
}

/* リングは assets/images/ring-*.svg（企業情報ページと共通）を240pxで使う。
   Figmaでは4つとも回転がないので、共通CSSが青・緑に持たせている
   回転ぶんの外接矩形は使わず、実寸の240pxに戻して位置を揃える */
.section-ring.red,
.section-ring.blue {
  top: 0;
  right: -63px;
}

.section-ring.orange {
  top: 0;
  left: -63px;
}

.section-ring.green {
  top: 0;
  right: auto;
  left: -63px;
}

.section-ring.blue,
.section-ring.green {
  width: 240px;
  height: 240px;
}

/* パネル見出しの下に置くリード文 */

.section-lead {
  margin: 28px 0 0;
  color: #4a4f57;
  font-size: 14px;
  line-height: 1.9;
}

/* 01 採用にあたって：紹介動画（左・可変）＋採用パンフレット（右・259px固定）。
   2カラムは下端を揃える */

.hiring-row {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

/* 動画の枠。「採用にあたって」のYouTube埋め込みと「社員対談」のmp4で共通。
   16:9より縦横比のずれた動画・ポスターは黒帯で収める（object-fit は video の既定の contain） */
.movie-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.movie-embed iframe,
.movie-embed video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hiring-movie {
  flex: 1 1 auto;
  min-width: 0;
}

.hiring-pamphlet {
  flex: 0 0 auto;
  width: 259px;
}

.pamphlet-label {
  margin: 0 0 8px;
}

/* 表紙画像そのものがPDFのダウンロードボタン。
   ホバー（とキーボードフォーカス）で黒60%を敷いて文言を出す */
.pamphlet-link {
  position: relative;
  display: block;
  width: 100%;
}

.pamphlet-link img {
  width: 100%;
  height: auto;
}

.pamphlet-overlay {
  position: absolute;
  inset: 0;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* タッチ環境ではタップ後にホバーが残るため、ホバーを持つ環境だけに限定する */
@media (hover: hover) {
  .pamphlet-link:hover .pamphlet-overlay {
    opacity: 1;
  }
}

.pamphlet-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.pamphlet-link:focus-visible .pamphlet-overlay {
  opacity: 1;
}

/* 動画を444px以上確保して横並びできる幅 = 444px + gap16px + パンフレット259px = 719px。
   パネルの内寸がこれを下回ったら縦積みにして、パンフレットは中央に置く */
@container panel (max-width: 719px) {
  .hiring-row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .hiring-pamphlet {
    width: 100%;
  }

  .pamphlet-link {
    width: 259px;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* 02 先輩社員の声：写真＋コメントのカードを3列で並べる */

.voice-cards {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.voice-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-card-image {
  width: 100%;
  height: 176px;
  object-fit: cover;
}

/* コメントの長さがカードごとに違うため、行の高さに合わせて下地を伸ばす */
.voice-card-body {
  flex: 1 1 auto;
  padding: 16px 32px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-card-meta {
  margin: 0;
  color: var(--footer-muted);
  font-size: 12px;
  line-height: 16px;
}

.voice-card-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* 改行位置はFigmaの原稿どおり。段落間も行送りぶんだけ空ける */
.voice-card-text p {
  margin: 0;
}

/* カード1枚あたり本文270px＋左右padding64px を確保できる幅で列数を落とす */
@container panel (max-width: 767px) {
  .voice-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container panel (max-width: 519px) {
  .voice-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 社員対談（先輩社員の声セクションの下段） */

.interview {
  margin-top: 28px;
}

.interview-title {
  margin: 0;
  color: #4a4f57;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.33;
}

.interview-movie {
  margin-top: 8px;
}

/* 03 社員教育：ギャラリーは見出しの24px下（うち16pxは矢印ぶんの余白） */

.gallery {
  margin-top: 24px;
}

/* コマの上に重ねるSP用の操作UI（バー＋送りボタン）。
   PCはパネルの外に出る左右の矢印を使うので隠す */
.gallery-controls {
  display: none;
}

/* 04 募集区分：カードは2枚だが、Figmaでは3列グリッドの1・2列目に置く */

.category-cards {
  margin-top: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.category-cards .related-card {
  min-height: 94px;
  padding: 16px 24px;
}

.category-cards .related-card-title {
  color: #4a4f57;
  font-weight: 500;
  line-height: 2;
}

.category-cards .related-card-sub {
  margin: 0;
  color: #4a4f57;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  white-space: normal;
}

@container panel (max-width: 767px) {
  .category-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-footer {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .toc {
    width: 100%;
    padding: 40px 20px;
  }

  .content-section {
    width: 100%;
    margin-top: 32px;
    padding-top: 80px;
  }

  .content-section .section-panel {
    padding: 32px 20px;
  }

  /* 見出しはSPでも「和文＋英字＋罫線」を1行に並べる。Figma（810:3249 ほか）は
     SPでもH2コンポーネントの desktop バリアントをそのまま置いており、実測も
     26px＝1行。common.css のSPは和文と英字を2段グリッドに組み替えるため戻す。
     display:flex に戻せば子要素の grid-area / grid-row 指定は無効化される */
  .panel-heading {
    display: flex;
    gap: 12px;
  }

  .panel-heading-en {
    padding-top: 2px;
  }

  /* リングは他の下層ページと同じ 184px / 左右 -64px。Figmaは社員教育・募集区分だけ
     回転した状態で置かれているが、PC版が無回転なのでここも無回転に揃える */
  .section-ring,
  .section-ring.red,
  .section-ring.orange,
  .section-ring.blue,
  .section-ring.green {
    width: 184px;
    height: 184px;
  }

  .section-ring.red,
  .section-ring.blue {
    top: 0;
    right: -64px;
  }

  .section-ring.orange,
  .section-ring.green {
    top: 0;
    left: -64px;
  }

  .section-lead {
    line-height: 1.9;
  }

  .hiring-row {
    margin-top: 8px;
  }

  .voice-cards {
    gap: 20px;
  }

  .interview-title {
    font-size: 20px;
    line-height: 1.35;
  }

  .category-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .category-cards .related-card {
    padding: 17px 25px;
  }

  /* SPのギャラリーは中央のコマがアクティブで、前後のコマが両側にのぞく。
     Figmaは左右20px内側で切るので、共通CSSの全幅化（左右-20px）は打ち消す */
  .gallery {
    margin: 24px 0 0;
  }

  /* 左右に (335-240)/2 = 47.5px の余白を取ると、1枚目と3枚目もぴったり中央に来る。
     共通CSSの左詰めスナップ用の scroll-padding は不要なので戻す */
  .gallery-scroller {
    padding: 0;
    scroll-padding-left: 0;
  }

  .gallery-item:first-child {
    margin-left: 47.5px;
  }

  /* 末尾側は padding も margin もスクロール量に含まれない（Chrome）ため、
     実体のあるダミーのフレックスアイテムで余白を作る。
     直前に gap の8pxが入るので 47.5 - 8 = 39.5px にすると、
     右端まで送った位置＝最後のコマが中央に来る位置になり、矢印の出し分けも合う */
  .gallery-track::after {
    content: "";
    flex: 0 0 39.5px;
  }

  .gallery-item {
    scroll-snap-align: center;
  }

  /* 画像の下端に敷く黒。固定の操作UIとは違い、画像と一緒に流れるようコマ側に持たせる */
  .gallery-item::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  }

  /* 中央にないコマは白をかぶせて落とす（黒のグラデーションの上に重なる） */
  .gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
    transition: opacity 0.2s ease;
  }

  .gallery-item.is-active::after {
    opacity: 0;
  }

  /* Figmaではアクティブなコマにキャプションを出さず、操作UIに置き換えている */
  .gallery-caption {
    display: none;
  }

  /* バー（左）と送りボタン（右）は中央のコマの上に固定で重ね、画像だけが下を流れる。
     ボタン以外はスワイプを通すため pointer-events を切っておく */
  .gallery-controls {
    position: absolute;
    right: 47.5px;
    bottom: 8px;
    left: 47.5px;
    z-index: 1;
    height: 24px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    pointer-events: none;
  }

  /* スクロール量のバー。1pxのトラックに2pxのつまみが1pxだけ上に出る */
  .gallery-progress {
    position: relative;
    flex: 0 0 120px;
    height: 2px;
  }

  .gallery-progress::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
  }

  /* つまみの幅＝表示中の割合、位置＝スクロール済みの割合（値はJSが入れる） */
  .gallery-progress-bar {
    position: absolute;
    bottom: 0;
    left: calc(
      var(--gallery-progress-position, 0) *
        (100% - var(--gallery-progress-size, 1) * 100%)
    );
    width: calc(var(--gallery-progress-size, 1) * 100%);
    height: 2px;
    background: #fff;
  }

  /* 端まで送ると片方の矢印が hidden になる。残った側がずれないよう、
     3つとも列を固定したグリッドに置く */
  .gallery-nav {
    position: relative;
    flex: 0 0 68px;
    display: grid;
    grid-template-columns: 24px 20px 24px;
    align-items: center;
    justify-items: center;
  }

  .gallery-nav-button {
    grid-column: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
  }

  .gallery-nav-button.next {
    grid-column: 3;
  }

  .gallery-nav-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* 「次へ」は書き出した左矢印を左右反転して使う */
  .gallery-nav-button img {
    width: 24px;
    height: 24px;
  }

  .gallery-nav-button.next img {
    transform: scaleX(-1);
  }

  .gallery-nav-divider {
    grid-column: 2;
    width: 1px;
    height: 8px;
    background: #fff;
  }

  /* 端まで送ると片方の矢印が hidden になる。区切り線だけが残らないよう一緒に消す */
  .gallery-nav:has([hidden]) .gallery-nav-divider {
    display: none;
  }

  .site-footer {
    margin-top: 48px;
  }
}