/* ==========================================================================
   HOME(トップ)ページ固有スタイル
   共通コンポーネントは css/base.css を参照(.container/.section/.kicker/
   .round-link/.arrow-circle/.hover-lift/.js-reveal-group/.split/.svc-list/
   .news-row-list/.hero-scroll-btn/.bg-gray/.bg-gray2 等)。ここでは home
   専用のレイアウト・装飾のみを追加する。
   ========================================================================== */

/* 固定ヘッダー分のオフセット(home のみ) */
body[data-page="home"] main {
  padding-top: var(--header-h);
}

/* --------------------------------------------------------------------------
   HERO(背景装飾+イラスト人物を四隅に散りばめ、中央にコーディング見出し)
   .hero__stage は参照デザイン(pc_img/sp_img)の元画像比率(4522:2251 / 782:673)
   をそのまま aspect-ratio で再現し、その上に人物イラスト(透過PNG、背景は
   img/top/hero-bg*.jpg)を元画像と同じ%座標で絶対配置している。
   -------------------------------------------------------------------------- */
.hero { position: relative; }
.hero__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4522 / 2251;
  background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), url("../img/top/hero-bg.jpg?v=3");
  background-size: cover;
  background-position: center;
}

.hero__fig {
  position: absolute;
  pointer-events: auto;
  opacity: 0;
  animation: heroFigIn 1.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroFigIn {
  from { opacity: 0; transform: translateY(46px) scale(0.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* イラスト本体は疑似要素に分離し、ホバー用 transform を親のエントランス
   アニメーション(fill-mode:both で確定した transform)と競合させない */
.hero__fig::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.hero__fig:hover::before {
  transform: translateY(-10px) scale(1.035);
}
@media (prefers-reduced-motion: reduce) {
  .hero__fig::before { transition: none; }
}
.hero__fig--sp { display: none; }

.hero__text {
  position: absolute;
  z-index: 2;
  animation: heroTextIn 0.9s ease 0.15s both;
}
@keyframes heroTextIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__kicker { display: none; }
.hero__heading {
  font-weight: 900;
  line-height: 1.3;
  color: #1E1E1E;
}
.hero__heading-line { display: block; }
.hero__heading .hl { color: var(--blue); }
.hero__lead {
  margin-top: 20px;
  color: var(--text);
}
.hero__logo { display: block; }

@media (min-width: 901px) {
  .hero__fig--tl {
    left: 7.72%; top: 7.29%; width: 18.80%; aspect-ratio: 851 / 818;
    animation-delay: 0.1s;
  }
  .hero__fig--tl::before { background-image: url("../img/top/hero-fig-tl.png?v=1"); }
  .hero__fig--center {
    left: 47.08%; top: 1%; width: 4.3%; aspect-ratio: 184 / 605;
    animation-delay: 0.4s;
  }
  .hero__fig--center::before { background-image: url("../img/top/hero-fig-center.png?v=2"); }
  .hero__fig--tr {
    left: 69.84%; top: 8.04%; width: 23.57%; aspect-ratio: 1000 / 812;
    animation-delay: 0.6s;
  }
  .hero__fig--tr::before { background-image: url("../img/top/hero-fig-tr.png?v=1"); }
  .hero__fig--bl {
    left: 8.45%; top: 45.27%; width: 19.73%; aspect-ratio: 771 / 1000;
    animation-delay: 0.8s;
  }
  .hero__fig--bl::before { background-image: url("../img/top/hero-fig-bl.png?v=1"); }
  .hero__fig--br {
    left: 71.14%; top: 57.04%; width: 21.85%; aspect-ratio: 1000 / 885;
    animation-delay: 1s;
  }
  .hero__fig--br::before { background-image: url("../img/top/hero-fig-br.png?v=2"); }

  /* テキストは左右のイラストに挟まれた中央の空きスペース(横約41%)に収める */
  .hero__text {
    left: 49%;
    top: 31%;
    width: min(46%, 680px);
    text-align: center;
    transform: translateX(-50%);
  }
  .hero__heading { font-size: clamp(28px, 3.5vw, 54px); letter-spacing: 0.14em; }
  .hero__lead { max-width: 460px; margin-left: auto; margin-right: auto; font-size: 15px; line-height: 1.9; }
  .hero__logo { width: min(230px, 55%); margin: 24px auto 0; }
}

@media (max-width: 900px) {
  .hero__stage {
    aspect-ratio: 782 / 673;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/top/hero-bg-sp.jpg?v=4");
    background-position: top center;
    /* 実機の狭い横幅では見出し/本文が想定より折り返して縦に伸び、
       overflow:hidden のままだとロゴが下端で切れて消えるため、
       このブレークポイントだけ overflow を許可して切れを防ぐ */
    overflow: visible;
  }
  /* 見出しは人物イラストの上に一部重なる形で全幅近くに配置(参照デザイン準拠)。本文はイラストの手前に収める */
  .hero__text {
    left: 6%;
    top: 21%;
    width: 89%;
    text-align: left;
  }
  .hero__heading { font-size: clamp(20px, 7.2vw, 40px); letter-spacing: 0.04em; }
  /* 本文はイラストの手前(左65.7%より左)に収まる幅に制限し、人物イラストと文字が重ならないようにする */
  .hero__lead { max-width: 64%; font-size: 11.5px; line-height: 1.85; }
  .hero__logo { width: 150px; margin-top: 16px; }
  .hero__fig--sp {
    display: block;
    z-index: 1;
    left: 65.7%; top: 22%; width: 31.7%; aspect-ratio: 981 / 1602;
    animation-delay: 0.3s;
  }
  .hero__fig--sp::before { background-image: url("../img/top/hero-fig-sp.png?v=2"); }
}

/* 767px以下(実機スマホ想定。768×672のタブレット表示はこの下の範囲に
   含まれないよう max-width:767px にしている)は、文字とイラストを重ねる
   構成をやめ、上から「文字→イラスト」の縦積みに変更。ファーストビューが
   画面いっぱいに綺麗に収まるよう .hero__stage を画面の残り高さいっぱいの
   flex コンテナにし、内容を中央寄せする。 */
@media (max-width: 767px) {
  .hero__stage {
    box-sizing: border-box;
    aspect-ratio: unset;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 6%;
  }
  .hero__fig--tl, .hero__fig--center, .hero__fig--tr, .hero__fig--bl, .hero__fig--br {
    display: none;
  }
  .hero__text {
    position: static;
    width: 100%;
    order: 1;
  }
  .hero__lead { max-width: none; }
  .hero__fig--sp {
    position: relative;
    left: auto;
    top: auto;
    width: 85%;
    max-width: 320px;
    margin: 32px auto 0;
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__fig, .hero__text { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   SERVICE 見出し・本文(画像はテキスト横に配置 = .split を利用)
   -------------------------------------------------------------------------- */
.service.section {
  position: relative;
  padding-top: 110px;
}
.service__row {
  padding-bottom: 88px;
}
.service__row:last-child { padding-bottom: 0; }
.service__row .split-body { align-self: flex-start; }

.service__media { position: relative; }
.service__media img { border-radius: 24px; }
.service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--blue);
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* 2列目の写真はテキスト量に対して縦長すぎるため、少し短めにトリミング */
.service__row:last-child .service__media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 20%;
}

.service__sub {
  margin-top: 24px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  color: #1E1E1E;
}
.service__sub .hl { color: var(--blue); }

.service__lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-muted);
}

.service__mid h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  color: #1E1E1E;
  margin-bottom: 24px;
}
.service__mid p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .service.section { padding-top: 80px; }
  .service__row { padding-bottom: var(--section-gap-sp); }
  .service__row:last-child { padding-bottom: 0; }
  .service__media img { border-radius: 16px; }
  .service__media::after { border-radius: 16px; }
  /* SPのみ写真をテキストの下に配置(PC表示はそのまま) */
  .service__row .split-body { order: 1; }
  .service__row .split-media { order: 2; }
}

/* --------------------------------------------------------------------------
   SERVICE カードリスト(base.css の .svc-list / .svc-item を利用)
   -------------------------------------------------------------------------- */
.bg-gray2.section { position: relative; }

.svc-item__arrow {
  border-color: var(--blue-dark);
  color: var(--blue-dark);
  margin-left: 16px;
}
.svc-item:hover .svc-item__arrow {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   ABOUT / RECRUIT (base.css の .split / .split-media / .split-body を利用)
   -------------------------------------------------------------------------- */
.split-media img { width: 100%; display: block; object-fit: cover; }
.about .split-media img { border-radius: 16px; }
.recruit .split-media img { border-radius: 16px; }

.about { position: relative; padding-bottom: 60px; }
.recruit { position: relative; padding-top: 60px; }

.about__body .kicker,
.recruit__body .kicker { margin-bottom: 28px; }

.recruit__lead {
  font-size: 16px;
  color: var(--text);
  line-height: 1.9;
  margin-bottom: 28px;
  max-width: 440px;
}

@media (max-width: 900px) {
  .about { padding-bottom: 36px; }
  .recruit { padding-top: 36px; }
  .recruit .split-media { order: 1; }
  .recruit .split-body { order: 2; }
}

/* --------------------------------------------------------------------------
   NEWS(base.css の .news-strip-head / .news-row-list / .news-row を利用)
   -------------------------------------------------------------------------- */
.bg-gray.section { position: relative; }

.news__kicker {
  font-size: clamp(36px, 4vw, 48px);
}

.news-row-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.arrow-circle--sm {
  width: 30px;
  height: 30px;
}
.arrow-circle--sm svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   NEWSセクション〜フッターの間(CTAカード裏)もグレー背景でつなげる
   -------------------------------------------------------------------------- */
.cta-cards-bg { background: var(--bg-gray); }