/* =========================================================
   pages.css … トップページ固有（最小限）
   ========================================================= */
@layer pages {
  /* =========================================================
     MV：16:9の動画＋右の白い面に縦書きのキャッチ
     文字は動画の外に出す（色を重ねずに読ませる）
     ========================================================= */
  .p-mv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: var(--sp-4) var(--edge) 0;
  }
  .p-mv__media {
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-ink);
  }
  .p-mv__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 一時停止・ぜひ音声つきでご覧ください */
  .p-mv__ctrl {
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-4);
    display: flex;
    gap: var(--sp-2);
  }
  .p-mv__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-width: var(--tap);
    height: var(--tap);
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-ink);
    color: var(--c-text-invert);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background var(--dur-md) var(--ease);
  }
  .p-mv__btn:hover {
    background: var(--c-ink-hover);
  }
  .p-mv__time {
    margin-left: var(--sp-1);
    color: var(--c-ink-muted);
  }
  .p-mv__btn .i-play,
  .p-mv__btn.is-paused .i-pause {
    display: none;
  }
  .p-mv__btn.is-paused .i-play {
    display: inline-block;
  }
  /* SPの再生ボタン（PCでは出さない） */
  .p-mv__play {
    display: none;
  }

  /* 右の白い面：縦書きのキャッチ */
  .p-mv__copy {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--sp-6);
    padding: var(--sp-8) max(var(--sp-7), calc((100vw - var(--container-max)) / 2)) var(--sp-8) var(--sp-7);
  }
  .p-mv__label {
    writing-mode: vertical-rl;
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    letter-spacing: 0.3em;
  }
  .p-mv__catch {
    margin: 0;
    writing-mode: vertical-rl;
    font-family: var(--ff-serif);
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    letter-spacing: var(--tr-vertical);
  }
  .p-mv__catch span {
    display: block;
  }
  .p-mv__scroll {
    position: absolute;
    left: var(--sp-7);
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    writing-mode: vertical-rl;
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    letter-spacing: var(--tr-eyebrow);
  }
  .p-mv__scroll i {
    position: relative;
    display: block;
    width: 1px;
    height: var(--sp-8);
    overflow: hidden;
    background: var(--c-line);
  }
  .p-mv__scroll i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-text);
    animation: p-scrolldown 2.2s ease-in-out infinite;
  }
  @keyframes p-scrolldown {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(100%); }
  }

  /* 動画の下のリード文：下のセクションと同じ左端にそろえる
     幅の上限（t-lead の 42em）は文字の部分だけにかける。左の余白まで含めると、広い画面で1文字ずつ縦に並ぶため（2026-10-23） */
  .p-mv__lead {
    box-sizing: content-box;
    grid-column: 1;
    grid-row: 2;
    font-size: var(--fs-body);
    color: var(--c-text-muted);
    padding: var(--sp-6) var(--sp-5) 0 calc(max(var(--container-pad), (100vw - var(--container-max)) / 2 + var(--container-pad)) - var(--edge));
  }

  @media (max-width: 767px) {
    .p-mv {
      display: flex;
      flex-direction: column;
      padding: var(--sp-2) var(--sp-2) 0;
    }
    .p-mv__media {
      border-radius: var(--r-md);
    }
    .p-mv__ctrl {
      display: none;
    }
    .p-mv__play {
      position: absolute;
      left: 50%;
      top: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      border: 0;
      border-radius: 50%;
      background: var(--c-action-primary);
      color: var(--c-text-on-action);
      transform: translate(-50%, -50%);
      cursor: pointer;
      transition: background var(--dur-md) var(--ease);
    }
    .p-mv__play:hover {
      background: var(--c-action-primary-hover);
    }
    .p-mv__copy {
      order: 1;
      flex-direction: column;
      gap: var(--sp-4);
      padding: var(--sp-7) var(--sp-4) var(--sp-4);
    }
    .p-mv__label,
    .p-mv__catch {
      writing-mode: horizontal-tb;
    }
    .p-mv__catch {
      font-size: var(--fs-h3-lg);
      letter-spacing: var(--tr-wide);
    }
    .p-mv__scroll {
      display: none;
    }
    .p-mv__lead {
      order: 2;
      padding: 0 var(--sp-4) var(--sp-8);
      font-size: var(--fs-body);
    }
  }

  /* 主な事業内容：リード文の幅（並べ方は layout.css の l-mosaic） */
  .p-biz__lead {
    max-width: 55rem;
    margin-bottom: var(--sp-6);
  }

  /* 実績紹介：一覧ボタンを中央に */
  .p-works__foot {
    margin-top: var(--sp-8);
    text-align: center;
  }

  /* トップの採用写真は白黒（採用情報ページの中はカラーのまま） */
  .p-recruit-mono img {
    filter: grayscale(1);
  }

  /* トップの採用カード：PCでは「当社が求める人材」を1行ずつに収める（右の列を文字幅に合わせて広げる）
     幅が足りない画面では、文節の切れ目で改行する（index.html の u-ib） */
  @media (min-width: 1081px) {
    .p-recruit-card {
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .p-recruit-card .c-check-list li {
      white-space: nowrap;
    }
  }

  /* 主な事業内容 02：看板の左側「SYSTEMWALL」の文字が写る位置で切り抜く */
  .p-biz__img-sign {
    object-position: 0% 50%;
  }

  /* ナビに載せないページへの入口：下にお問い合わせが続くので下の余白だけ */
  .p-links {
    padding-bottom: var(--section-py);
  }
  /* A案と同じく：画面幅いっぱいに4枚をすき間なく並べ、写真の上に文字を重ねる。角は丸めない */
  .p-links > .l-container {
    max-width: none;
    padding-inline: 0;
  }
  .p-links .l-grid {
    gap: 0;
  }
  .p-links .c-banner {
    border-radius: 0;
  }

  /* 社内の様子 › 社屋：外観（横長）と看板を、高さをそろえて横に並べる */
  .p-building {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-5);
  }
  .p-building > :last-child {
    aspect-ratio: 4 / 3;
  }
  @media (max-width: 767px) {
    .p-building {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-3);
    }
    .p-building > :first-child {
      aspect-ratio: 21 / 9;
    }
  }

  /* =========================================================
     施工実績詳細：メイン写真を520pxまでに抑え、右に物件データ（ワイヤー05）
     小さい写真でも粗く見えないように、あえて大きくしすぎない
     ========================================================= */
  .p-work {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-8);
  }
  .p-work__body .c-sec-head__title {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-h3-lg);
  }
  .p-work__body > * + * {
    margin-top: var(--sp-6);
  }
  @media (max-width: 1080px) {
    .p-work {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-6);
    }
    .p-work__photo {
      max-width: 520px;
    }
  }

  /* =========================================================
     コラム一覧：最新の1件を大きく（日付を大きく出して、更新が続いて見えるように）
     ========================================================= */
  .p-latest {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
  }
  .p-latest .c-card__img {
    height: 100%;
  }
  .p-latest__body {
    padding: var(--sp-7);
  }
  .p-latest__date {
    display: block;
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3-lg);
    letter-spacing: var(--tr-wide);
    color: var(--c-action-primary);
  }
  .p-latest__title {
    margin: var(--sp-3) 0 var(--sp-6);
    font-size: var(--fs-h3);
  }
  @media (max-width: 767px) {
    .p-latest {
      grid-template-columns: minmax(0, 1fr);
    }
    .p-latest__body {
      padding: var(--sp-5);
    }
  }
}