@charset "UTF-8";
/* -------------------------
    公式トップの二分割（index2.html だけで使う）
    左：SES事業部（エンジニア採用サイトの背景の色と、メンバーのイラスト）
    右：BPO事業部（BPO採用サイトの黒と金、墨絵の3人）
------------------------- */
.p-top2 {
  --ses: #344349;
  --ses-2: #56707b;
  --bpo: #1a1a1a;
  --gold: #efc33b;
  --slant: 7vw;
}

.p-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100svh - 60px);
  min-height: 560px;
  overflow: hidden;
  background: var(--bpo);
  transition: grid-template-columns 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 乗せた側が少し広がる（パソコンのみ） */
@media (hover: hover) and (min-width: 768px) {
  .p-split:has(.is-ses:hover) { grid-template-columns: 1.18fr 0.82fr; }
  .p-split:has(.is-bpo:hover) { grid-template-columns: 0.82fr 1.18fr; }
}

.p-split__side {
  position: relative;
  display: flex;
  align-items: flex-start; /* 文字は上、絵は下 */
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  container-type: inline-size; /* 英字の大きさを、この箱の幅に合わせる */
}
/* 真ん中を斜めに切る：右（BPO）を左へ食い込ませる */
.p-split__side.is-bpo {
  margin-left: calc(var(--slant) * -1);
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}
.p-split__side.is-bpo::before { /* 切り口に金の線 */
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--gold) calc(50% - 1.5px), var(--gold) calc(50% + 1.5px), transparent calc(50% + 1.5px)) 0 0 / var(--slant) 100% no-repeat;
  pointer-events: none;
}

.p-split__bg { position: absolute; inset: 0; z-index: -2; }
.p-split__bg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.p-split__side.is-ses .p-split__bg img { object-position: 50% 0; }
.p-split__side.is-ses .p-split__bg::after { /* 上の文字を読みやすく */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 60, 72, 0.55) 0%, rgba(36, 60, 72, 0.15) 45%, rgba(36, 60, 72, 0) 60%);
}
/* メンバー：右下に4人を並べて立たせる */
.p-split__members { position: absolute; z-index: -1; left: 4%; right: calc(var(--slant) + 3%); bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; height: 54%; pointer-events: none; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } /* 右はBPO側の斜めの切り口に隠れない所まで。5人を均等に */
.p-split__members img { display: block; flex: 0 1 auto; min-width: 0; width: auto; height: calc(var(--h) * 100%); object-fit: contain; object-position: 50% 100%; margin-bottom: calc(var(--y, 0) * 1%); filter: drop-shadow(0 10px 18px rgba(30, 50, 60, 0.25)); } /* --y：足元を少しずつ上げ下げして、デコボコに */
.p-split__members img.is-flip { transform: scaleX(-1); }
.p-split__side.is-ses:hover .p-split__members { transform: translateX(-2%); }
.p-split__side.is-bpo .p-split__bg img { object-position: 60% 50%; }
.p-split__side.is-bpo .p-split__bg::after { /* 文字を読みやすく、左を暗く */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.85) 0%, rgba(26, 26, 26, 0.55) 45%, rgba(26, 26, 26, 0.2) 100%);
}
.p-split__people { position: absolute; z-index: -1; right: -5%; bottom: 0; width: min(92%, 720px, calc((100svh - 60px) * 0.72)); /* 右下に大きく。右の人は少し画面の外へはみ出させる。幅は画面の高さにも合わせ、低い画面で上の文字に頭がかからないように */ pointer-events: none; transform-origin: 100% 100%; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.p-split__people img { display: block; width: 100%; height: auto; }
.p-split__side.is-bpo:hover .p-split__people { transform: translateX(-2%); }
/* SES側の5人は、相手側に乗せると幅が詰まって小さくなる。BPOの3人も同じ動きにそろえる（乗せると大きく、相手側に乗せると小さく） */
@media (hover: hover) and (min-width: 768px) {
  .p-split__side.is-bpo:hover .p-split__people { transform: scale(1.05); } /* 左へ寄せると左の人の頭が文字にかかるので、右下を起点に大きくするだけ */
  .p-split:has(.is-ses:hover) .p-split__people { transform: scale(0.9); }
}
.p-split__side.is-bpo:hover .p-split__bg img { transform: scale(1.04); }

.p-split__in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: min(460px, 82%);
  margin: clamp(40px, 9vh, 100px) 0 0 clamp(28px, 5vw, 80px);
}
.p-split__side.is-bpo .p-split__in { width: min(460px, 78%); margin-left: calc(var(--slant) + clamp(28px, 4vw, 64px)); }
.p-split__tag {
  padding-left: 12px;
  border-left: 3px solid currentColor;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.p-split__side.is-bpo .p-split__tag { border-color: var(--gold); }
.p-split__en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(48px, 13.5cqi, 132px); /* 乗せて相手側が狭くなっても切れない大きさ */
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.p-split__side.is-bpo .p-split__en { color: var(--gold); }
.p-split__ttl { font-size: clamp(22px, 2.2vw, 32px); font-weight: 900; line-height: 1.4; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.p-split__side.is-ses .p-split__en, .p-split__side.is-ses .p-split__read { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); }
.p-split__read { max-width: 26em; font-size: 14px; line-height: 1.9; opacity: 0.85; }
.p-split__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding: 14px 26px;
  border: 1.5px solid #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.p-split__btn i { font-style: normal; transition: transform 0.25s ease; }
.p-split__side.is-bpo .p-split__btn { border-color: var(--gold); background: var(--gold); color: var(--bpo); }
.p-split__side:hover .p-split__btn { transform: translateY(-2px); }
.p-split__side.is-ses:hover .p-split__btn { background: #fff; color: var(--ses); }
.p-split__side.is-bpo:hover .p-split__btn { border-color: #f5d000; background: #f5d000; box-shadow: 0 8px 24px rgba(239, 195, 59, 0.35); } /* 営業採用サイトのボタンと同じ明るい黄色に */
.p-split__side:hover .p-split__btn i { transform: translateX(6px); }

/* 下の会社概要へ：二分割のすぐ下に余白をとる */
.p-top2 .p-top-news { margin-top: 0; }
.p-top2 #company { padding-top: 80px; }

/* スマホ：上下に分ける（上がSES、下がBPO。境目は斜め） */
@media (max-width: 767px) {
  .p-top2 { --slant: 9vw; }
  .p-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: auto; min-height: 0; }
  .p-split__side { min-height: 620px; padding: 40px 0 0; }
  .p-split__side.is-bpo {
    margin-left: 0;
    margin-top: calc(var(--slant) * -1);
    padding-top: calc(48px + var(--slant));
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
  }
  .p-split__side.is-bpo::before {
    background: linear-gradient(to top left, transparent calc(50% - 1.5px), var(--gold) calc(50% - 1.5px), var(--gold) calc(50% + 1.5px), transparent calc(50% + 1.5px)) 0 0 / 100% var(--slant) no-repeat;
  }
  .p-split__in, .p-split__side.is-bpo .p-split__in { width: auto; margin: 0 20px; }
  .p-split__people { right: -6%; width: 90%; }
  .p-split__members { left: 3%; right: 3%; height: 46%; }
  .p-split__en { font-size: 64px; }
  .p-split__read { font-size: 13px; }
}