@charset "UTF-8";
/* ==========================================================================
   top.css — TOP（01 index.html）ページ固有スタイル（p-）
   参照カンプ：pc/01_top_pc_01〜04.png・sp/01_top_sp_01〜04.png
   指示書02：静的実装（スクロール連動アニメ等の動きは後工程）
   ========================================================================== */

.p-top {
  /* TOP固有カラー（カンプ実測）。サービス3領域の識別色など。
     他ページでも使うことが確定したら正式トークンへ昇格を検討 */
  --top-green: #8AC54B;          /* 実測：3ボックス中央の罫線・下線 */
  --top-teal:  #1DA3A2;          /* 実測：3ボックス右の罫線・下線 */
  --top-contact-blue: #15668C;   /* 実測：CONTACTパネルのグラデ中間色。EXPERTISEカード04の識別色も兼ねる */
  --top-olive: #C5B74B;          /* 実測：EXPERTISEカード05（海外進出）の識別色 */
  --top-news-hover: #D7E7F7;     /* NEWSリンク行のホバー背景（淡い水色） */
}

/* --------------------------------------------------------------------------
   メインビジュアル
   -------------------------------------------------------------------------- */
.p-top-mv { padding-block-start: var(--sp-6); }

/* 英字ブランドコピー（2フレーズ入れ替え・1文字ずつscale）
   ・器 .p-top-mv__title を relative にし、is-anim時は2フレーズを重ねる
   ・JS無効/reduced-motion時はフレーズ1のみ静的表示（フレーズ2は非表示）
   ・アニメ名は画像marquee(p-top-mv-marquee)と衝突しない p-top-mv-title-* */
.p-top-mv__title {
  position: relative;
  font-family: var(--font-en);
  font-size: var(--fs-en-xl);
  font-weight: 600; /* カンプ実測：線幅≒cap高の13.5%＝SemiBold（Bold700は太すぎ） */
  line-height: 1.0;
  letter-spacing: 0;
}

/* 初期・JS無効時：フレーズ1のみ通常フロー表示、フレーズ2は隠す */
.p-top-mv__title-phrase--2 { display: none; }

/* 行組み（カンプ準拠）：1行目=左(STRUCTURING/SHAPING)、2行目=右寄せで THE …隙間… CORE/FUTURE */
.p-top-mv__title-line { display: block; }
.p-top-mv__title-line + .p-top-mv__title-line { margin-top: .16em; }

.p-top-mv__title-line:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: .8em; /* THE と CORE の間 */
}

.p-top-mv__title-word {
  display: inline-block;
  white-space: nowrap; /* 文字span分割後も語の途中で折り返させない */
}
.p-top-mv__title-word--the {
  color: var(--c-gray); /* THEのみグレー（カンプ準拠） */
  font-size: calc(var(--fs-en-xl) - 10px); /* THEだけ10px小さく */
}

/* 各行の最後の語の下に下線（1行目=STRUCTURING/SHAPING・2行目=CORE/FUTURE。THEには付けない） */
.p-top-mv__title-line > .p-top-mv__title-word:last-child {
  padding-bottom: .12em;
  border-bottom: 2px solid var(--c-gray-light);
}

/* JSが1文字ずつspanへ分割して付与 */
.p-top-mv__char {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
}

/* ---- JS有効（is-anim）：2フレーズを重ねてループ入れ替え ---- */
.p-top-mv__title.is-anim .p-top-mv__title-phrase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
/* 1つは通常フローに残して器の高さを確保 */
.p-top-mv__title.is-anim .p-top-mv__title-phrase--1 { position: relative; }
.p-top-mv__title.is-anim .p-top-mv__title-phrase--2 { display: block; }

/* フレーズ全体を opacity フェード（下線を含めて表示/非表示させる。cascadeの包絡線に合わせる） */
.p-top-mv__title.is-anim .p-top-mv__title-phrase--1 { animation: p-top-mv-phrase 10.6s ease infinite both; }
.p-top-mv__title.is-anim .p-top-mv__title-phrase--2 { animation: p-top-mv-phrase 10.6s ease infinite both; animation-delay: -5.3s; }
@keyframes p-top-mv-phrase {
  0%     { opacity: 0; }
  21.7%  { opacity: 1; }   /* 2.3s：全文字そろう */
  50%    { opacity: 1; }   /* 5.3s：退場開始 */
  71.7%  { opacity: 0; }   /* 7.6s：全文字退場完了 */
  100%   { opacity: 0; }
}

/* 文字は per-char で scale＋opacity（1文字ずつ立ち上がる）。フレーズ2だけ半周(-5.3s)ずらす。
   前フレーズの退場(5.3〜7.6s)と次フレーズの出現(同5.3〜7.6s)が同時進行＝オーバーラップして入れ替わる。 */
.p-top-mv__title.is-anim .p-top-mv__title-phrase--1 .p-top-mv__char {
  animation: p-top-mv-title 10.6s ease infinite both;
  animation-delay: calc(.1s * var(--char-index));
}
.p-top-mv__title.is-anim .p-top-mv__title-phrase--2 .p-top-mv__char {
  animation: p-top-mv-title 10.6s ease infinite both;
  animation-delay: calc(-5.3s + .1s * var(--char-index));
}

/* 1周10.6s。1文字0.1sずつ時間差で cascade-in →【全文字そろって約3秒 静止保持】→ cascade-out → 隠。
   出現0.6s＋最大stagger1.7s ⇒ 全文字そろう=2.3s、char0の退場開始=5.3s ⇒ 全表示≒3.0s。
   隠の期間(5.9〜10.6s)に相手フレーズの保持が来る＝退場と出現が重なる（オーバーラップ） */
@keyframes p-top-mv-title {
  0%      { opacity: 0; transform: scale(.12); }
  5.66%   { opacity: 1; transform: scale(1); }   /* 0.6s：char0 出現完了 */
  50%     { opacity: 1; transform: scale(1); }   /* 5.3s：char0 退場開始（=全表示3秒の終端） */
  55.66%  { opacity: 0; transform: scale(.12); } /* 5.9s：char0 退場完了 */
  100%    { opacity: 0; transform: scale(.12); }
}

/* reduced-motion：アニメを止めフレーズ1を静的表示（フレーズ2は隠す） */
@media (prefers-reduced-motion: reduce) {
  .p-top-mv__title.is-anim .p-top-mv__title-phrase {
    position: static;
    animation: none;
    opacity: 1;
  }
  .p-top-mv__title.is-anim .p-top-mv__title-phrase--2 { display: none; }
  .p-top-mv__title.is-anim .p-top-mv__char {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* EXPERTISEカード：スタック演出を無効化し通常フローで常時表示
     （JS側も is-anim を付けない想定だが二重で担保） */
  .p-top-expertise__cards.is-anim .p-top-expertise__card {
    position: relative;
    top: auto;
    margin-top: var(--sp-6);
    margin-bottom: 0;
    transform: none;
    filter: none;
    opacity: 1;
  }
  .p-top-expertise__cards.is-anim .p-top-expertise__card:first-child { margin-top: 0; }
}

.p-top-mv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(344px, 36%); /* 中間幅はmin()で自然に縮める（css_design §4） */
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-6);
}

/* ヒーロー画像スライダー（4枚を左→右へゆっくり無限ループ）
   画像は角丸を白背景で焼き込み済み＝MV白背景と馴染むためCSS角丸は不要 */
.p-top-mv__slider { overflow: hidden; }

.p-top-mv__slider-track {
  display: flex;
  width: max-content;
  animation: p-top-mv-marquee 40s linear infinite;
}

.p-top-mv__slider-track img {
  width: 420px;
  max-width: none; /* base.cssの img{max-width:100%} を上書き */
  height: 310px;
  margin-right: var(--sp-4); /* 画像間の余白。1セット=4枚×(420+32px)。50%移動＝1セット分でループ */
  object-fit: cover;
  border-radius: 12px; /* 画像に焼き込み済みの微小角丸(約5px)を覆う */
}

/* 右→左方向：トラックを 0 → -1セット幅（=-50%）へ移動。
   後半セットが同一画像なので継ぎ目なく無限ループする */
@keyframes p-top-mv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* マウスホバーで一時停止（閲覧しやすさ） */
.p-top-mv__slider:hover .p-top-mv__slider-track { animation-play-state: paused; }

.p-top-mv__catch {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.6;
}

.p-top-mv__text { margin-top: var(--sp-3); }

/* 最新News帯（右寄せ・左端斜めカット） */
.p-top-mv__newsband {
  position: relative;
  width: min(920px, 92%);
  margin-top: var(--sp-6);
  margin-left: auto;
  background: var(--c-bg-tint);
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
}


.p-top-mv__newsband-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-8);
  transition: opacity var(--dur) var(--ease);
}

.p-top-mv__newsband-link:hover { opacity: .7; }

.p-top-mv__newsband-label {
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック */
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-navy);
}

.p-top-mv__newsband-date,
.p-top-mv__newsband-title { font-size: .875rem; /* 例外：実測14px相当 */ }

/* --------------------------------------------------------------------------
   ブランドメッセージ（3ボックス）
   -------------------------------------------------------------------------- */
.p-top-message {
  position: relative;
  overflow: hidden;
  margin-top: 0; /* NEWS帯と隙間なく接する（境界に1px区切り線） */
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--c-bg-tint);
}

/* NEWS帯との境界に1pxの区切り線（カンプ実測 #707070）。帯幅に合わせ右寄せ。
   NEWS帯はclip-pathで欠けるため、非クリップのメッセージ側上端に引く */
.p-top-message::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: min(920px, 92%);
  height: 1px;
  background: var(--c-line);
}

/* セクション背景の地球儀（ダミー画像）。右側に大きく薄く配置。コンテンツより後ろ */
.p-top-message__deco {
  position: absolute;
  top: 50%;
  right: -4%;
  z-index: 0;
  width: min(48%, 640px);
  transform: translateY(-50%);
  pointer-events: none;
}

.p-top-message__deco img {
  width: 100%;
  height: auto;
  opacity: .55;
}

/* コンテンツは装飾より前面 */
.p-top-message .l-container {
  position: relative;
  z-index: 1;
}

.p-top-message__title {
  text-align: center;
  font-size: clamp(1.875rem, 1rem + 2.6vw, 3.125rem); /* 30→50px（カンプ実測：見出し幅≒コンテンツ73%） */
  font-weight: 700;
  line-height: 1.5;
}

.p-top-message__phrase {
  padding-bottom: 8px; /* 例外：下線との間隔（カンプ実測≒6-8px） */
  border-bottom: 3px solid currentColor;
  margin-inline: .1em;
}

.p-top-message__phrase--blue  { border-color: var(--c-blue); }
.p-top-message__phrase--green { border-color: var(--top-green); }
.p-top-message__phrase--teal  { border-color: var(--top-teal); }

.p-top-message__em {
  font-style: normal;
  color: var(--c-accent);
}

/* 見出し→ボックスを結ぶ折れ線矢印（SVG）。カンプ実測：各句中心→各ボックス中心。高さ≒190px */
.p-top-message__arrows {
  width: 100%;
  height: 190px;
  margin-top: var(--sp-2);
  color: var(--c-text);
}

.p-top-message__arrows svg {
  display: block;
  width: 100%;
  height: 100%;
}

.p-top-message__boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); /* カンプ実測≒16px */
  margin-top: var(--sp-1);
}

.p-top-message__box {
  padding: var(--sp-3); /* カンプ実測≒24px */
  border: 2px solid;
  background: rgba(255, 255, 255, 0.75); /* 白75%（背景の地球儀が薄く透ける） */
  font-size: .9375rem; /* 例外：実測15px相当 */
  line-height: 2;
}

.p-top-message__box--blue  { border-color: var(--c-blue); }
.p-top-message__box--green { border-color: var(--top-green); }
.p-top-message__box--teal  { border-color: var(--top-teal); }

/* --------------------------------------------------------------------------
   FEATURES
   -------------------------------------------------------------------------- */
.p-top-features { padding-block: var(--sp-16) var(--sp-12); }

.p-top-features__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(730px, 60%); /* カンプ実測：図≒763px。左は catch が2行で収まる幅を確保 */
  gap: var(--sp-3);
  align-items: center;
}

.p-top-features__catch {
  margin-top: var(--sp-6);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 1.75rem); /* 24→28px（カンプ実測：字高≒27px・左カラムに2行で収まる） */
  font-weight: 700;
  line-height: 1.9;
}

.p-top-features__text { margin-top: var(--sp-4); }

.p-top-features__diagram img {
  width: 100%;
  height: auto;
}

.p-top-features__more {
  margin-top: var(--sp-6);
  text-align: right;
}

/* --------------------------------------------------------------------------
   EXPERTISE
   -------------------------------------------------------------------------- */
.p-top-expertise {
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--c-bg-tint);
}

.p-top-expertise__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(600px, 52%); /* 中間幅はmin()で自然に縮める */
  gap: var(--sp-8);
  align-items: start;
}

/* 左見出しカラム：右のカード列（5枚ぶん背高）が流れる間、画面内にピン留め
   top はヘッダー実測80px＋余白。sticky は grid の align-items:start と併用で成立 */
.p-top-expertise__body {
  position: sticky;
  top: calc(80px + var(--sp-4));
}

.p-top-expertise__catch {
  margin-top: var(--sp-6);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 1.75rem); /* SP修正04：セクションキャッチはA〜Dで同サイズ（FEATURES基準 24→28px） */
  font-weight: 700;
  line-height: 1.9;
}

.p-top-expertise__text { margin-top: var(--sp-4); }

/* カード列：01〜05をスクロールで重ねるスタック演出の器
   --stack-top … カードがピン留めされる画面上端からの位置（ヘッダー実測80px＋余白）
   --stack-gap … カード1枚が単独で見える「休み」の尺（次のカードが被ってくるまでの距離） */
.p-top-expertise__cards {
  --stack-top: calc(80px + var(--sp-8));
  --stack-gap: 34vh;
  display: block;
}

.p-top-expertise__card {
  --card-accent: var(--c-blue); /* 既定＝カード01。02〜05は個別に上書き */
  /* JSが1フレームごとに書き込む被り具合（0=手前でシャープ／大きいほど奥でボケる） */
  --card-scale: 1;
  --card-blur: 0px;
  --card-opacity: 1;
  --card-shift: 0px;
  position: relative; /* 既定は通常フロー。スタックは .is-anim 付与時のみ（後述） */
  padding: var(--sp-6);
  border: 2px solid var(--card-accent);
  border-radius: 24px;
  background: var(--c-white); /* 不透明＝下のカードを覆う */
}

.p-top-expertise__card + .p-top-expertise__card { margin-top: var(--sp-6); }

/* スタック演出は「JSが .is-anim を付けたとき」だけ有効化。
   → JS無効・失敗・reduced-motion時は is-anim が付かず、通常の縦並びリストにフォールバック
     （既存ヒーロー .p-top-mv__title.is-anim と同じ考え方） */
.p-top-expertise__cards.is-anim .p-top-expertise__card {
  position: sticky;
  top: var(--stack-top);
  margin-top: 0;
  margin-bottom: var(--stack-gap); /* この距離ぶん、前のカードが単独で残ってから次が被る */
  transform-origin: center top;
  transform: translateY(var(--card-shift)) scale(var(--card-scale));
  filter: blur(var(--card-blur));
  opacity: var(--card-opacity);
}

.p-top-expertise__cards.is-anim .p-top-expertise__card:last-child { margin-bottom: 0; }

/* カード識別色（カンプ実測・ユーザー指定）＋重なり順（後の番号ほど手前） */
.p-top-expertise__card--01 { z-index: 1; }
.p-top-expertise__card--02 { --card-accent: var(--top-green);        z-index: 2; }
.p-top-expertise__card--03 { --card-accent: var(--top-teal);         z-index: 3; }
.p-top-expertise__card--04 { --card-accent: var(--top-contact-blue); z-index: 4; }
.p-top-expertise__card--05 { --card-accent: var(--top-olive);        z-index: 5; }

.p-top-expertise__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.p-top-expertise__card-head img {
  width: 96px;
  height: auto;
}

.p-top-expertise__card-num {
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック */
  font-size: 4rem; /* 例外：番号実測64px相当 */
  font-weight: 700;
  line-height: 1;
  color: var(--card-accent);
}

.p-top-expertise__card-title {
  margin-top: var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.p-top-expertise__card-lead {
  margin-top: var(--sp-2);
  font-size: .875rem; /* 例外：実測14px相当 */
}

.p-top-expertise__card-strong { color: var(--c-accent); }

.p-top-expertise__card-list li {
  position: relative; /* ●の基準 */
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  /* SP修正05（PC版も同様）：折り返し時に「●」で頭出し。
     ●は絶対配置で本文フローから切り離す（負のtext-indent方式だと、折返し位置が見つからない
     文言で●だけが1行目に残る不具合があるため） */
  padding-left: calc(var(--sp-2) + 1.5em);
  background: var(--card-accent);
  color: var(--c-white);
  font-size: .875rem; /* 例外：実測14px相当 */
  font-weight: 700;
}

.p-top-expertise__card-list li::before {
  content: "●";
  position: absolute;
  left: var(--sp-2);
  top: var(--sp-1); /* padding-topと同値＝1行目と縦位置が揃う（line-height継承） */
}

.p-top-expertise__more {
  margin-top: var(--sp-6);
  text-align: right;
}

/* --------------------------------------------------------------------------
   SUPPORT RECORD
   -------------------------------------------------------------------------- */
.p-top-record {
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--c-blue-gray);
  color: var(--c-white);
}

.p-top-record__catch {
  margin-top: var(--sp-4);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 1.75rem); /* SP修正04：A〜Dで同サイズ（FEATURES基準 24→28px） */
  font-weight: 700;
}

.p-top-record__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.p-top-record__card-link {
  display: block;
  color: var(--c-white);
  transition: opacity var(--dur) var(--ease);
}

.p-top-record__card-link:hover { opacity: .7; }

.p-top-record__card-link img {
  width: 100%;
  aspect-ratio: 389 / 280; /* カンプ実測：写真389×280px（縦横比≒1.39）。実写真差し替え時も比率維持 */
  object-fit: cover;
}

.p-top-record__card-name {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
}

.p-top-record__card-text {
  margin-top: var(--sp-1);
  font-size: .9375rem; /* 例外：実測15px相当 */
}

.p-top-record__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.p-top-record__controls {
  display: flex;
  gap: var(--sp-2);
}

.p-top-record__control {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
}

.p-top-record__control:disabled { cursor: default; }

.p-top-record__control img {
  width: 100%;
  height: auto;
}

/* 通常＝白円（::after）／ホバー＝青塗り（ベース<img> v-cmn-06/07）。
   白円画像を::afterに重ねて通常は opacity:1 で表示し、ホバーで opacity:0 にして下の青塗りを見せる。06→04（左）／07→05（右） */
.p-top-record__control::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1; /* 通常時は白円を表示（下の青塗り<img>を覆う） */
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.p-top-record__control:has(img[src*="v-cmn-06"])::after { background-image: url(../../images/v-cmn-04-arw2-w-l.svg); }
.p-top-record__control:has(img[src*="v-cmn-07"])::after { background-image: url(../../images/v-cmn-05-arw2-w-l.svg); }

.p-top-record__control:hover::after { opacity: 0; } /* ホバーで白円を消し、青塗り<img>を見せる */

@media (prefers-reduced-motion: reduce) {
  .p-top-record__control::after { transition: none; }
}

/* スライダー（WP動的化：14_top_works_slider.md §6。動作に必要な最小限のみ＝カード寸法・余白・意匠は既存のまま） */
.p-top-record__slider {
  display: flex;   /* 各スライド（ul）を横一列に並べる */
  overflow: hidden; /* 表示中スライド以外をはみ出しクリップ */
}

/* 各スライド＝既存の3カラムgrid（ul）を幅100%固定で横並びに。translateX は common.js §14 が書く。
   端数スライドもgridの列幅（1fr×3）が保たれるため、カードが横に伸びない（左揃え） */
.p-top-record__slider > .p-top-record__cards {
  flex: 0 0 100%;
  /* 時間は共通 --dur(.3s) だと全幅移動には速いため専用値 .5s（16 §C-1。--dur 自体は変更しない） */
  transition: transform .5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .p-top-record__slider > .p-top-record__cards { transition: none; }
}

/* --------------------------------------------------------------------------
   RECRUIT
   -------------------------------------------------------------------------- */
.p-top-recruit {
  position: relative;
  overflow: hidden;
  /* 背景は左のみ画面端までbleed、右はコンテンツ右端で止める（カンプ準拠） */
  --recruit-inset: max(var(--content-pad), calc(50% - 620px));
  margin-block: var(--sp-12); /* 上下に白余白（カンプ準拠） */
  padding-block: var(--sp-12) 88px; /* 下端は帯・写真が重なる分を確保 */
  color: var(--c-white);
}

/* 背景ブロック：左は画面端まで／右・上・下に余白。
   支給写真 top-10-recruit_bg.jpg の上に、支給グラデーションを70%で乗算オーバーレイ
   （70%＝各カラーストップのアルファに0.7を乗じて表現。支給CSSのベンダープレフィックス／IEフィルタ／
     width・height・border-radius は不要のためカットし、標準 linear-gradient のみ採用） */
.p-top-recruit::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  right: var(--recruit-inset);
  background:
    linear-gradient(-47.08deg,
      rgba(21, 102, 140, .7) 0%,
      rgba(77, 136, 166, .574) 9.2%,
      rgba(109, 145, 175, .7) 26.1%,
      rgba(29, 163, 162, .7) 49.3%,
      rgba(21, 102, 140, .7) 75.4%,
      rgba(29, 163, 162, .7) 100%),
    url(../../images/top/top-10-recruit_bg.jpg) center / cover no-repeat var(--c-blue-gray);
  z-index: 0;
}

/* 下部の暗い帯（太ボーダー）：teal下端から44px上・高さ120px（下に teal が残る）。
   右端は上=full／下部だけ急に右カット（カンプ準拠）。写真とボタンがこの上に乗る */
.p-top-recruit::after {
  content: "";
  position: absolute;
  bottom: 44px; /* カンプ実測：帯下端はteal下端から約44px上 */
  left: 0;
  right: max(0px, calc(var(--recruit-inset) - 45px)); /* 背景右端を約45px超えて右余白へはみ出す */
  height: 120px; /* カンプ実測：帯高≒120px */
  background: color-mix(in srgb, var(--c-text) 58%, transparent); /* 半透明：teal上は濃く／白余白上は淡く */
  clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0 100%); /* 上=full／下=右に80px切れ込む単一斜線 */
  z-index: 0;
}

/* 内容は帯より前面（写真・ボタンが帯の上に乗る） */
.p-top-recruit .l-container { position: relative; z-index: 1; }

.p-top-recruit__catch {
  margin-top: var(--sp-4);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 1.75rem); /* SP修正04：A〜Dで同サイズ（FEATURES基準 24→28px） */
  font-weight: 700;
}

/* 装飾の筆記体「Fellow」。指定：124px・#FFFFFF 40%・Yellowtail */
.p-top-recruit__fellow {
  position: absolute;
  top: 12px;
  right: var(--sp-12);
  font-family: "Yellowtail", cursive;
  font-size: clamp(3.5rem, 8.6vw, 7.75rem); /* 56→124px */
  line-height: 1;
  color: rgba(255, 255, 255, .4); /* #FFFFFF 40% */
  transform: rotate(-11.5deg); /* カンプ実測：右上がり約11.5° */
  transform-origin: center;
}

.p-top-recruit__grid {
  display: grid;
  grid-template-columns: minmax(0, 748px) minmax(0, 352px); /* カンプ実測：写真748px＋本文352px。右側に余白が残る */
  gap: var(--sp-6);
  align-items: stretch; /* aside を写真の高さに合わせ、ボタンを写真下端に揃える */
  justify-content: start;
  margin-top: var(--sp-8);
}

.p-top-recruit__picture { display: block; align-self: start; } /* グリッド子＝picture（SP画像出し分けのため導入） */

.p-top-recruit__photo {
  width: 100%;
  aspect-ratio: 748 / 308; /* カンプ実測：写真747×308px（比率≒2.43） */
  object-fit: cover;
}

/* 右カラム：本文（上）＋ボタン（下・写真下端に揃う） */
.p-top-recruit__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p-top-recruit__text { font-weight: 400; /* カンプ実測：本文はレギュラー（キャッチのみ太字） */ }

.p-top-recruit__more { text-align: right; }

/* --------------------------------------------------------------------------
   NEWS
   -------------------------------------------------------------------------- */
.p-top-news {
  padding-block: var(--sp-12);
  background: var(--c-bg-tint);
}

.p-top-news__grid {
  display: grid;
  grid-template-columns: 280px 1fr; /* 左＝見出し／右＝リスト（date位置がcontent+280pxに来る） */
  align-items: start;
}

/* リスト先頭を見出しの「お知らせ」ラベルの高さに合わせて下げる（カンプ準拠） */
.p-top-news__body { padding-top: 64px; }

/* 行（li）：ホバー背景を左右に少し広げる（bleed）。行全体をリンク化するため
   padding は link 側に持たせ、位置ズレを margin で相殺 */
.p-top-news__item {
  margin-inline: calc(var(--sp-4) * -1);
  transition: background-color var(--dur) var(--ease);
}

/* 区切り線は項目間のみ（最初の項目の上・最後の項目の下には引かない）。カンプ準拠 */
.p-top-news__item:not(:last-child) {
  border-bottom: 1px solid var(--c-gray);
}

/* ホバー：li背景を淡水色に／タイトルを青＋下線に */
.p-top-news__item:hover {
  background: var(--top-news-hover);
}

.p-top-news__item:hover .p-top-news__title {
  color: var(--c-blue);
  text-decoration: underline;
}

.p-top-news__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4); /* 縦間隔＋左右bleedぶんを内側で確保（行全体をクリック可能に） */
}

.p-top-news__date {
  flex-shrink: 0;
  font-size: .875rem; /* 例外：実測14px相当 */
  letter-spacing: 0;
}

.p-top-news__title {
  flex: 1;
  transition: color var(--dur) var(--ease);
}

.p-top-news__arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.p-top-contact { padding-block: var(--sp-16) 0; }

/* カンプ01_top_pc_03/04：細線の枠内いっぱいに写真、左に青グラデのパネルを重ね CONTACT見出し＋本文を白抜き、右下にお問い合わせボタン（枠幅≒1040px・高さ≒340px を実測反映） */
.p-top-contact__frame {
  max-width: 1040px;
  margin-inline: auto;
  padding: var(--sp-1);
  border: 1px solid var(--c-text);
  /* 外側線は角丸なし（指定）。内側パネルのみ角丸20px */
}

.p-top-contact__inner {
  position: relative;
  display: block; /* バナー全体を1つのリンク（a）に */
  min-height: 320px;
  padding: 56px 64px;
  border-radius: 20px; /* 外側線の内側＝角丸20px（指定） */
  background: var(--c-gray-light); /* 最下層ベース色（写真・グラデの下） */
  color: var(--c-white);
  text-decoration: none; /* aの既定下線を消す（強調emは個別に下線） */
  overflow: hidden;
}

/* 写真：右側から72%幅（指定）。cover。最背面 */
.p-top-contact__photo {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 72%;
  z-index: 0;
  background: url(../../images/top/top-11-contact.jpg) center / cover no-repeat;
}

/* 青グラデパネル：左から67%幅・右は透明（指定）。写真の上／ホバーオーバーレイの下 */
.p-top-contact__inner::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 67%;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(21, 102, 140, 1) 0%,
    rgba(21, 102, 140, 1) 47.8%,
    rgba(38, 115, 188, .5) 71.9%,
    rgba(231, 231, 231, 0) 100%);
}

/* ホバーオーバーレイ：#1A96FF 40%。グラデ・写真・本文(CONTACT/白文字)の上に全面で重ねる。
   この上に出るのはお問い合わせボタンのみ（指定） */
.p-top-contact__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  transition: background var(--dur) var(--ease);
  pointer-events: none;
}

.p-top-contact__inner:hover::after {
  background: rgba(26, 150, 255, .4);
}

.p-top-contact__body {
  position: relative;
  z-index: 2; /* 写真(0)・グラデ(1)より前面。ホバーオーバーレイ(3)の下＝ホバー時は青が被る */
  max-width: 640px;
}

.p-top-contact__title {
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック */
  font-size: clamp(2.75rem, 1.9rem + 4vw, 4.6875rem); /* PC最大75px（Gill Sans基準）。SPへ縮退 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 5px 12px #4B4B4B; /* 指定：#4B4B4B X0 Y5 B12 */
}

.p-top-contact__text {
  margin-top: var(--sp-4);
  font-weight: 700; /* 本文はBold（指定） */
  font-size: var(--fs-lg); /* その他＝18px（指定） */
  line-height: 2.4;
  text-shadow: 0 5px 10px #4B4B4B; /* 指定：#4B4B4B X0 Y5 B10（emにも継承） */
}

.p-top-contact__em {
  font-style: normal;
  font-weight: 700;
  font-size: 1.375rem; /* 強調「助言で終わらせず、実行まで伴走」＝22px（指定） */
  text-decoration: underline;
  text-underline-offset: 6px;
}

.p-top-contact__btn {
  position: absolute;
  right: var(--sp-8);   /* 矢印(::after)が枠内に収まるだけ右端から離す */
  bottom: var(--sp-5);
  z-index: 4; /* ホバーオーバーレイ(3)より前面＝オーバーレイの上に出るのはボタンのみ */
  min-width: 240px;
}

/* バナー(リンク)全体のホバー/フォーカスで、お問い合わせボタンを左スライド塗りに連動。
   塗り/色/矢印/アイコンは共通 .c-btn--arrow の変数設計に従う（--btn-arrow-w＝塗り白・文字濃色・矢印白・アイコン文字追従）。
   バナーのどこをホバーしてもボタンが反応する。 */
.p-top-contact__inner:hover .p-top-contact__btn,
.p-top-contact__inner:focus-visible .p-top-contact__btn {
  opacity: 1;
  background-size: 100% 100%;
  color: var(--btn-text-hover);
  border-color: var(--btn-fill);
}

.p-top-contact__inner:hover .p-top-contact__btn::after,
.p-top-contact__inner:focus-visible .p-top-contact__btn::after {
  transform: translateY(-50%) translateX(14px);
}

/* --------------------------------------------------------------------------
   SP（〜767px）：01_top_sp_01〜04準拠
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* MV英字：SPは長語 STRUCTURING が393pxでわずかに溢れるため、vw上限で頭打ちに（横スクロール防止） */
  .p-top-mv__title { font-size: min(var(--fs-en-xl), 13.4vw); }

  /* MV英字：SPは2行組（SP修正02・指示確定）＝1行目「SHAPING／STRUCTURING」、
     2行目「THE FUTURE／THE CORE」を横並びのまま左寄せ（PCの縦積み3行をやめる） */
  .p-top-mv__title-line:last-child { justify-content: flex-start; }

  /* リード文→写真の順（sp_01準拠） */
  .p-top-mv__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .p-top-mv__lead { order: -1; }

  /* SPは画像を縮小（420:310比率を維持）。50%移動＝1セットは変わらずループ継続 */
  .p-top-mv__slider-track img {
    width: 260px;
    height: 192px;
    margin-right: var(--sp-2);
  }

  .p-top-mv__newsband { width: 100%; clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }

  /* SPはNEWS帯が全幅なので区切り線も全幅に合わせる */
  .p-top-message::before { width: 100%; }

  .p-top-mv__newsband-link {
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  }

  /* sp_01準拠：1行目=NEWS（単独）、2行目=日付＋タイトル */
  .p-top-mv__newsband-label { width: 100%; }

  /* メッセージ：SPカンプ(sp_01)準拠＝「フレーズ→ボックス」の交互配置。
     h2(title)とul(boxes)を display:contents で分解し、l-container のflex順(order)で交互に並べる */
  .p-top-message { padding-block: var(--sp-8); }

  .p-top-message .l-container {
    display: flex;
    flex-direction: column;
  }

  .p-top-message__title,
  .p-top-message__boxes { display: contents; }

  .p-top-message__phrase {
    align-self: flex-start; /* 下線＝テキスト幅 */
    margin-inline: 0;
    margin-top: var(--sp-5);
    padding-bottom: 6px;
    border-bottom: 4px solid; /* 下線色はPCと同じ識別色（SP修正03：赤下線→青/緑/青緑へ） */
    font-size: 1.875rem; /* 30px（sp_01実測） */
    font-weight: 700;
    line-height: 1.4;
  }

  .p-top-message__phrase--blue  { order: 1; margin-top: 0; border-color: var(--c-blue); }
  .p-top-message__box--blue     { order: 2; }
  .p-top-message__phrase--green { order: 3; border-color: var(--top-green); }
  .p-top-message__box--green    { order: 4; }
  .p-top-message__phrase--teal  { order: 5; border-color: var(--top-teal); }
  .p-top-message__box--teal     { order: 6; }

  /* SPは折れ線矢印を出さない（交互配置のため） */
  .p-top-message__arrows { display: none; }

  /* ボックス：囲みラインもPCと同じ識別色で表示（SP修正03） */
  .p-top-message__box {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-2);
  }

  /* セクションキャッチ：SPカンプ実測≒20px（コンサルティングは、もういらない。が1行に収まる）。
     見出しラベルとの間隔もカンプ準拠でタイトに */
  .p-top-features__catch,
  .p-top-expertise__catch,
  .p-top-record__catch,
  .p-top-recruit__catch {
    font-size: 1.25rem;
    margin-top: var(--sp-2);
  }

  /* 2カラム系はすべて1カラムへ */
  .p-top-features { padding-block: var(--sp-12) var(--sp-8); }

  .p-top-features__grid,
  .p-top-expertise__grid,
  .p-top-news__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* SP修正05：セクション上パディングを前セクション下余白（sp-8）と揃える */
  .p-top-expertise { padding-block: var(--sp-8); }

  /* SP：見出しのピン留め・カードのスタック演出はいずれも無効化し、素直に上→下へ縦積み */
  .p-top-expertise__body { position: static; top: auto; }

  .p-top-expertise__cards.is-anim .p-top-expertise__card {
    position: relative;
    top: auto;
    margin-top: var(--sp-5);
    margin-bottom: 0;
    transform: none;
    filter: none;
    opacity: 1;
  }
  .p-top-expertise__cards.is-anim .p-top-expertise__card:first-child { margin-top: 0; }

  .p-top-expertise__card { padding: var(--sp-4); }

  /* SP修正05（01〜05共通）：アイコンを80%に縮小（96px→77px） */
  .p-top-expertise__card-head img { width: 77px; }

  /* SP修正05（01〜05共通）：アイコン→サービス名の間隔30px（ユーザー指示で確定）＋サービス名は2px下げ（24→22px） */
  .p-top-expertise__card-title {
    margin-top: 30px;
    font-size: 1.375rem;
  }

  /* SP修正05（01〜05共通）：サービス内容ごとのパディングを16pxに */
  .p-top-expertise__card-list li {
    padding: var(--sp-2);
    padding-left: calc(var(--sp-2) + 1.5em);
  }

  .p-top-expertise__card-list li::before { top: var(--sp-2); } /* SPのpadding-top(16px)に追従 */

  /* SP修正07：セクション上パディングを前セクション下余白（sp-8）と揃える */
  .p-top-record { padding-block: var(--sp-8); }
  /* 42 §4（FN 9/2）：支援実績カードの社名・キャッチを各 +2px（SPのみ。行間は倍率継承のため据え置き） */
  .p-top-record__card-name { font-size: 1.125rem; }  /* 16 → 18px */
  .p-top-record__card-text { font-size: 1.0625rem; } /* 15 → 17px */

  .p-top-record__cards {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* SP修正07：事例写真を90%に縮小（中央寄せ） */
  .p-top-record__card-link img {
    width: 90%;
    margin-inline: auto;
  }

  /* カルーセル送りはSPカンプに無いため非表示 */
  .p-top-record__controls { display: none; }

  /* SPはスライダー化せず最新3件のみ＝2スライド目以降を非表示（16 §A。JSはSPで transform/属性を全除去） */
  .p-top-record__slider > .p-top-record__cards:nth-child(n+2) { display: none; }

  /* SPカンプ準拠：詳しく見る系ボタンは中央寄せ（右外に出る矢印の見切れも防ぐ） */
  .p-top-features__more,
  .p-top-expertise__more,
  .p-top-recruit__more { text-align: center; }

  .p-top-record__footer { justify-content: center; }

  /* SPは背景を全幅に（左右bleed）。上下の白余白はSP修正08で半分（sp-8→sp-4） */
  .p-top-recruit { --recruit-inset: 0px; margin-block: var(--sp-4); padding-block: var(--sp-8); }

  /* SP専用画像 top-09-rectuit-sp（650×415）を130:83で表示（指示確定・差替え済み画像の実寸比） */
  .p-top-recruit__photo { aspect-ratio: 130 / 83; }

  /* sp_03準拠の並び：見出し→キャッチ→本文→Fellow→写真→ボタン。
     grid/asideを display:contents で分解し、l-container のflex順(order)で制御 */
  .p-top-recruit .l-container {
    display: flex;
    flex-direction: column;
  }

  .p-top-recruit__grid,
  .p-top-recruit__aside { display: contents; }

  .p-top-recruit .c-heading   { order: 1; }
  .p-top-recruit__catch  { order: 2; }
  .p-top-recruit__text   { order: 3; margin-top: var(--sp-5); }
  .p-top-recruit__fellow { order: 4; }
  .p-top-recruit__picture { order: 5; margin-top: var(--sp-3); }
  .p-top-recruit__more   { order: 6; margin-top: var(--sp-5); }

  .p-top-recruit__fellow {
    position: static;
    align-self: flex-end;
    margin-top: var(--sp-2);
  }

  .p-top-news { padding-block: var(--sp-8); }

  /* SPは見出し→リストの縦積み。見出しのmargin-bottom(48px)で間隔を取るため
     グリッドのrow-gapは殺す（二重の余白を防ぐ）。列間gapは縦積みで無効なので影響なし */
  .p-top-news__grid { row-gap: 0; }
  .p-top-news__body { padding-top: 0; }

  /* SPは行の左右bleedをやめる（PC用の負マージンが横スクロールの原因になるため）。
     日付/タイトルを縦積みし、矢印は右端で2行にまたがって上下センター（sp_03準拠） */
  .p-top-news__item { margin-inline: 0; }

  .p-top-news__link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date  arrow"
      "title arrow";
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    padding: var(--sp-3) 0;
  }

  .p-top-news__date  { grid-area: date; }
  .p-top-news__title { grid-area: title; }
  .p-top-news__arrow { grid-area: arrow; }

  .p-top-contact { padding-block: var(--sp-8) 0; }

  /* SP修正09：CONTACT下（フッターまで）の余白を半分（l-mainの下パディング128px→64px。TOPのみ） */
  .l-main:has(.p-top) { padding-block-end: var(--sp-8); }

  /* CONTACTパネル（40a）：共通 c-contact の8/27カンプ確定値（40 §3）をそのまま適用。
     値の正は common.css の c-contact SPブロック＝再計測・再解釈しない */
  .p-top-contact__inner {
    min-height: 382px;   /* カンプ実測H（40） */
    padding: 28px 16px 16px;
    border-radius: 8px;  /* 旧 20px 20px 0 0 */
  }

  .p-top-contact__title { font-size: 40px; } /* 40確定値（旧48px） */

  .p-top-contact__text {
    margin-top: 17px;
    font-size: .9375rem; /* 15px（40確定値） */
    font-weight: 700;
    line-height: 28px;   /* 行送り28px（40確定値） */
  }

  .p-top-contact__em {
    display: inline-block;   /* 行2→行3の間隔+13px（40確定値） */
    padding-bottom: 13px;
    font-size: 1.125rem;     /* 18px（40確定値） */
    line-height: 28px;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }

  /* 写真：SP専用画像 common-01-contact-sp（679×452）。位置＝c-contact と同値（40） */
  .p-top-contact__photo {
    width: 100%;
    background-image: url(../../images/top/common-01-contact-sp.jpg);
    background-size: calc(100% + 24px) auto;
    background-position: left calc(100% + 10px);
    background-repeat: no-repeat;
  }

  /* グラデ（40）：斜め境界＝165deg・ベタ49%・中間54.5%・60%透明（色は現行維持）・高さ100% */
  .p-top-contact__inner::before {
    top: 0;
    bottom: auto;
    height: 100%;
    width: 100%; /* PCは左67% */
    background: linear-gradient(165deg,
      rgba(21, 102, 140, 1) 0%,
      rgba(21, 102, 140, 1) 49%,
      rgba(38, 115, 188, .5) 54.5%,
      rgba(231, 231, 231, 0) 60%);
  }

  .p-top-contact__body { max-width: none; }

  /* ボタン：通常フローで下部中央。写真(z0)・グラデ(z1)より前面に出す
     （staticのままだと描画順で写真の背後に隠れる＝旧SPで消えていた不具合の原因）。
     40a：寸法・間隔は40確定値（261×54・margin-top 72px） */
  .p-top-contact__btn {
    position: relative;
    right: auto;  /* PCのabsolute用オフセットを解除（relativeだと左へズレる） */
    bottom: auto;
    z-index: 4;
    display: flex;
    width: 261px;
    min-width: 0;
    min-height: 54px;
    margin-top: 72px;
    margin-inline: auto;
    border: 0; /* 指示：白線をトル（塗りボタンの白枠を出さない） */
  }
}