@charset "UTF-8";
/* ===========================================================
   pages/home.css — TOPページ固有（ヒーロー・採用・強み）
   ここに書くのは「このページでしか使わないもの」だけ
   =========================================================== */
@layer pages {

  /* =========================================================
     ヒーロー：左に明るい面（配管の線画）とコピー、右に写真のスライド
     線画は images/hero-illust.jpg（左半分に敷く。白地に薄い線で描いたもの）
     ========================================================= */
  .p-hero {
    --hero-bg: #F3F0ED; /* 線画の地の色に合わせる */
    --hero-bg-0: rgba(243, 240, 237, 0);
    position: relative;
    overflow: hidden;
    margin-top: var(--header-h);
    height: min(calc(100svh - var(--header-h) - var(--gnav-band-h)), 720px);
    min-height: 560px;
    background: var(--hero-bg);
  }
  .p-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 56%;
    /* 配管は線画の右寄りに描いてあるので、右端で合わせて写真との境目に見せる */
    background: url("../../images/hero-illust.jpg") right center / cover no-repeat;
    /* 写真の始まる位置（この面の約68%）で消えきるよう、右に向かって線画を透かす */
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 70%);
    mask-image: linear-gradient(90deg, #000 30%, transparent 70%);
  }
  .p-hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 62%;
    overflow: hidden; /* ゆっくり拡大する写真が左にはみ出し、グラデーションの外に出ないように */
  }
  .p-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
  }
  .p-hero__media img.is-active { opacity: 1; }

  /* カットごとに動きの向きを変える。
     動きの終点を初期値と揃えてあるので、切り替わる瞬間に跳ねない */
  .p-hero__media img:nth-child(1) { transform: scale(1.10); }
  .p-hero__media img:nth-child(2) { transform: scale(1.08) translateY(2%); }
  .p-hero__media img:nth-child(3) { transform: scale(1.08) translateX(2.4%); }
  .p-hero__media img:nth-child(4) { transform: scale(1); }

  .p-hero__media img.is-active {
    animation-duration: var(--dur-kenburns);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  .p-hero__media img:nth-child(1).is-active { animation-name: kb-zoom-in; }
  .p-hero__media img:nth-child(2).is-active { animation-name: kb-pan-down; }
  .p-hero__media img:nth-child(3).is-active { animation-name: kb-pan-right; }
  .p-hero__media img:nth-child(4).is-active { animation-name: kb-zoom-out; }

  @keyframes kb-zoom-in  { from { transform: scale(1); }                     to { transform: scale(1.10); } }
  @keyframes kb-pan-down { from { transform: scale(1.08) translateY(-2%); }  to { transform: scale(1.08) translateY(2%); } }
  @keyframes kb-pan-right{ from { transform: scale(1.08) translateX(-2.4%);} to { transform: scale(1.08) translateX(2.4%); } }
  @keyframes kb-zoom-out { from { transform: scale(1.10); }                  to { transform: scale(1); } }

  /* 写真の左端を明るい面になじませる。下端は右下の番号が読めるよう少し沈める */
  .p-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, var(--hero-bg) 0%, rgba(243, 240, 237, .7) 9%, var(--hero-bg-0) 26%),
      linear-gradient(to top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 30%);
  }

  .p-hero__body {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    color: var(--c-text);
  }
  .p-hero .c-head__eyebrow--invert { color: var(--c-action-primary); }
  .p-hero__copy {
    margin: 0;
    font-size: var(--fs-display);
    font-weight: var(--fw-black);
    line-height: 1.35;
    letter-spacing: var(--tr-display);
    /* 写真にかかる「に」「！」も読めるよう、明るい面の色でふちどる */
    text-shadow: 0 0 18px var(--hero-bg), 0 0 6px var(--hero-bg);
  }
  .p-hero__copy em { font-style: normal; display: block; }
  .p-hero__copy::after {
    content: "";
    display: block;
    width: 120px;
    height: 1px;
    margin-top: var(--sp-6);
    background: var(--c-line);
  }

  .p-hero__sponsor {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-5);
    width: fit-content;
    max-width: 100%;
    margin-top: var(--sp-7);
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: var(--sh-sm);
  }
  .p-hero__sponsor-title {
    padding-right: var(--sp-5);
    border-right: 1px solid var(--c-line);
    color: var(--c-action-primary);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    white-space: nowrap;
  }
  .p-hero__sponsor-logos { display: flex; gap: var(--sp-5); }
  .p-hero__sponsor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-1);
  }
  .p-hero__sponsor-item img { width: auto; max-width: 100%; max-height: 26px; }
  .p-hero__sponsor-item p {
    font-family: var(--ff-num);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    white-space: nowrap;
  }

  /* 右下：キャプション・進行バー・番号 */
  .p-hero__status {
    position: absolute;
    z-index: 2;
    right: var(--container-pad);
    bottom: var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    color: var(--c-text-invert);
  }
  .p-hero__caption { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tr-wide); }
  /* 線を押すとその写真へ。線は2pxなので、押せる範囲は上下に広げてある */
  .p-hero__dots { display: flex; gap: var(--sp-2); }
  .p-hero__dots button {
    position: relative;
    width: 40px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .p-hero__dots button::before {
    content: "";
    position: absolute;
    inset: 11px 0;
    background: rgba(255, 255, 255, .45);
    transition: background var(--dur) var(--ease);
  }
  .p-hero__dots button:hover::before { background: rgba(255, 255, 255, .85); }
  .p-hero__dots button.is-active::before { background: var(--c-brand-logo); }
  .p-hero__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .p-hero__count { font-family: var(--ff-num); font-size: var(--fs-caption); letter-spacing: var(--tr-wide); }
  .p-hero__count b { font-size: var(--fs-h3); font-weight: 700; }

  @media (max-width: 1100px) {
    .p-hero__media { width: 70%; }
  }
  @media (max-width: 767px) {
    /* スマホは写真を全面に敷き、白い文字を重ねる */
    .p-hero { height: auto; min-height: 0; }
    .p-hero::before { display: none; }
    .p-hero__media { width: 100%; }
    .p-hero__media::after { background: linear-gradient(to top, rgba(27, 30, 33, .75) 0%, rgba(27, 30, 33, .35) 55%, rgba(27, 30, 33, .1) 100%); }
    .p-hero__body { position: relative; padding-block: var(--sp-9) var(--sp-9); color: var(--c-text-invert); }
    .p-hero .c-head__eyebrow--invert { color: var(--c-text-invert); }
    .p-hero__copy { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
    .p-hero__copy::after { background: rgba(255, 255, 255, .5); }
    .p-hero__sponsor { grid-template-columns: 1fr; gap: var(--sp-3); width: 100%; }
    .p-hero__sponsor-title { padding-right: 0; border-right: 0; }
    .p-hero__status { left: var(--container-pad); right: auto; bottom: var(--sp-5); }
    .p-hero__caption { display: none; }
    .p-hero__dots button { width: 24px; }
  }

  /* =========================================================
     お知らせ：左カラムの見出し
     ========================================================= */
  #news .c-head { margin-bottom: var(--sp-6); }
  #news .c-head__wm { left: -.06em; right: auto; top: 0; transform: translateY(-38%); }

  /* =========================================================
     アカギの強み：深い赤の面＋斜めのライン
     ========================================================= */
  .p-strength {
    position: relative;
    overflow: hidden;
    background: var(--c-surface-invert-red);
    color: var(--c-text-invert);
    padding-block: var(--sp-9);
  }
  .p-strength::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pattern-diagonal);
    pointer-events: none;
  }
  .p-strength .l-container { position: relative; }
  .p-strength .c-card { background: var(--c-bg); color: var(--c-text); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
  .p-strength .c-card__body { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  .p-strength .c-card__media::after { display: none; }
  @media (max-width: 767px) {
    .p-strength .c-card__body { padding: var(--sp-5) var(--sp-4); }
  }

  /* =========================================================
     採用情報：写真の右端に赤の斜めライン、右はグレーの面
     ========================================================= */
  .p-recruit {
    display: grid;
    grid-template-columns: 57fr 43fr;
    align-items: stretch;
    margin-block: var(--sp-8) 0;
    background: var(--c-surface-emphasis);
  }
  .p-recruit__media {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: var(--c-bg-alt);
    clip-path: polygon(0 0, 100% 0, calc(100% - 52px) 100%, 0 100%);
  }
  .p-recruit__media::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 64px;
    background: var(--c-action-primary);
    clip-path: polygon(calc(100% - 12px) 0, 100% 0, calc(100% - 52px) 100%, calc(100% - 64px) 100%);
  }
  .p-recruit__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
  }
  .p-recruit__media img.is-active { opacity: 1; }
  .p-recruit__body {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-8) 6vw var(--sp-8) var(--sp-7);
  }
  .p-recruit__body .c-head { position: static; margin-bottom: var(--sp-5); }
  .p-recruit__body .c-head__wm { top: var(--sp-6); right: auto; left: var(--sp-7); transform: none; }
  .p-recruit__body > p { color: var(--c-text-muted); line-height: 2.1; }
  .p-recruit__body .c-btn { margin-top: var(--sp-6); align-self: flex-start; }

  @media (max-width: 1000px) {
    .p-recruit { grid-template-columns: 1fr; }
    .p-recruit__media { min-height: 320px; clip-path: none; }
    .p-recruit__media::after { display: none; }
    .p-recruit__body { padding: var(--sp-7) var(--container-pad); }
    .p-recruit__body .c-head__wm { left: var(--container-pad); }
  }
}