@charset "UTF-8";
/* ============================================================
   Prime Partners — コーポレート下層ページ共通
   （会社概要 /company/・事業内容 /service/・アクセス /access/）

   style.css（グループ共通トークン・ヘッダー・フッター・.section・
   .sec-head・.btn・.contact・.company-table）の上に重ねて読む。
   ヒーローは「白背景コンパクト型」＝英字ラベル＋明朝見出し＋リード。
   ヘッダーは透過（インク配色）でヒーローの写真面に直接乗せ、帯も境界線も作らない（採用案A）。
   角丸ゼロ / 影なし / 1px罫線 / 控えめモーション。
============================================================ */

/* ---------- JS無効時のフェイルセーフ（.reveal を白紙化させない） ---------- */
html:not(.js-anim) .reveal,
html:not(.js-anim) .reveal-img img {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   HEADER — 白背景ページ用：透過時からインク配色
============================================================ */
/* ヘッダーは透過のままヒーローの写真面に乗せる（帯・境界線を作らない）。
   スクロール後の白帯化は style.css の .pp-header.is-scrolled がそのまま効く。 */
.corporate-page .pp-header .logo-white { opacity: 0; }
.corporate-page .pp-header .logo-color { opacity: 1; }
.corporate-page .global-nav > ul > li > a { color: var(--ink); }
.corporate-page .menu-toggle span { background: var(--ink); }
.corporate-page .header-tel-num { color: var(--ink); }
.corporate-page .header-tel-num:hover { color: var(--accent); }
.corporate-page .header-tel-note { color: var(--text-sub); }
/* 現在地のナビは下線を常時表示 */
.corporate-page .global-nav > ul > li > a[aria-current="page"]::before { transform: scale(1, 1); }
.corporate-page .global-menu a[aria-current="page"] { color: var(--accent); }

/* 管理バー表示中（ログイン時）は固定ヘッダーを下げて重なりを防ぐ。
   WP の管理バーは 600px 以下で position:absolute になり、スクロールすると消える。
   そのままだとヘッダーだけ 46px 下に浮いて見える（2026-09-10 指摘）ので、
   ログイン時に限り管理バーも fixed にして揃える。訪問者（管理バー無し）には無関係。 */
body.admin-bar .pp-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .pp-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar #wpadminbar { position: fixed; } }

/* 親テーマ hello-elementor の style.min.css が button に #c36 の枠を当てるので打ち消す */
.corporate-page button,
.corporate-page [type="button"],
.corporate-page [type="submit"] {
  border: 0; border-radius: 0; background: none; color: inherit;
}

/* ---------- 共通部品 ---------- */
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }
.section-line { border-top: 1px solid var(--line); }
.wrapper-narrow { max-width: 980px; }

/* ============================================================
   PAGE HERO — 白背景コンパクト型
============================================================ */
/* 採用案A（2026-09-10）: 淡い写真面（光と影の壁）に、ヘッダーが透過で乗る。
   ヘッダーとヒーローの間に帯や線は置かない。写真は人・文字のない建築の壁面のみ。 */
.p-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  /* 下層ページなので画面いっぱいにはしない。ヘッダー込みで画面の半分強に収め、
     すぐ本文へ進める（2026-09-10 指示）。 */
  min-height: clamp(400px, 56vh, 560px);
  padding: clamp(120px, 15vh, 150px) 0 clamp(48px, 6vh, 72px);
  background: #eef3f6;
}
.p-hero > .wrapper { position: relative; z-index: 2; width: 100%; }
.p-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
}
/* 左側は文字を置くので、白を重ねてコントラストを確保する（画像より上・文字より下） */
.p-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 75%);
}
.p-hero-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--en); font-weight: 500; font-size: clamp(12px, 1.2vw, 13px);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 20px;
}
.p-hero-label::before { content: ""; width: 40px; height: 1px; background: var(--accent); }
.p-hero-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(32px, 4.2vw, 54px); line-height: 1.35; letter-spacing: 0.1em;
  color: var(--ink);
}
.p-hero-lead {
  margin-top: clamp(24px, 3.5vh, 36px); max-width: 640px;
  font-size: clamp(14px, 1.35vw, 17px); line-height: 2.1; letter-spacing: 0.06em;
  color: var(--text);
}

/* パンくず（ヒーロー右下） */
.p-crumb {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-family: var(--en); font-size: 11px; letter-spacing: 0.12em; color: var(--text-sub);
}
.p-crumb a { color: var(--text-sub); border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.p-crumb a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.p-crumb li + li::before { content: "/"; margin-right: 10px; opacity: 0.6; }
.p-crumb li[aria-current] { color: var(--ink); }

/* 読み込み時の時差フェード。
   JS（body.is-loaded）に頼らず CSS アニメーションだけで完結させる。
   main.js が遅れても・失敗しても見出しが空白のまま残らない。
   reduced-motion は style.css の共通ルールで animation-duration が 0.01ms になる。 */
@keyframes p-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.p-hero-label, .p-hero-title, .p-hero-lead, .p-crumb {
  animation: p-hero-in 0.9s ease both;
}
.p-hero-label { animation-delay: 0.1s; }
.p-hero-title { animation-delay: 0.25s; }
.p-hero-lead  { animation-delay: 0.4s; }
.p-crumb      { animation-delay: 0.55s; }

@media (max-width: 767px) {
  .p-hero { min-height: 360px; padding-top: 112px; }
  .p-hero-bg { object-position: 60% 50%; }
  .p-hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 100%); }
}

/* ============================================================
   本文の汎用パーツ
============================================================ */
/* 明朝の大きめ本文（ミッション等） */
.p-lead-serif {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 2.2; letter-spacing: 0.07em; color: var(--ink);
  max-width: 820px;
}
.p-lead-serif + .p-lead-serif { margin-top: 26px; }
.p-lead-serif em { font-style: normal; color: var(--accent); }

/* 2カラムの理念グリッド（上罫線アクセント） */
.p-two-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 64px); }
.p-two-item { border-top: 2px solid var(--accent); padding-top: 28px; }
.p-two-item .sec-label { margin-bottom: 10px; }
.p-two-item .sec-label::before { display: none; }
.p-two-item h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(19px, 2vw, 22px); letter-spacing: 0.06em; line-height: 1.6; color: var(--ink);
  margin-bottom: 16px;
}
.p-two-item p { font-size: 14.5px; line-height: 2; color: var(--text); }
@media (max-width: 900px) { .p-two-grid { grid-template-columns: 1fr; gap: 40px; } }

/* 代表プロフィール（写真＋本文） */
.p-leader {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.p-leader + .p-leader { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); }
.p-leader-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.p-leader-role { font-size: 12.5px; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px; }
.p-leader-name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px); letter-spacing: 0.1em; line-height: 1.4; color: var(--ink);
}
.p-leader-bio { margin-top: 22px; font-size: 14.5px; line-height: 2.05; color: var(--text); }
.p-leader-bio p + p { margin-top: 14px; }
.p-leader-meta {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--text-sub);
}
@media (max-width: 900px) {
  .p-leader { grid-template-columns: 1fr; gap: 28px; }
  .p-leader-photo { max-width: 320px; }
}

/* 定義リスト表の中のリスト・リンク（style.css の .company-table を拡張） */
.company-row dd ul li { padding-left: 1em; text-indent: -1em; }
.company-row dd ul li::before { content: "・"; }
.company-row dd .text-link { color: var(--accent); }

/* オフィス外観（静かな画像帯） */
.p-office { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.p-office-media { height: clamp(240px, 34vw, 480px); overflow: hidden; }
.p-office-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.p-office-cap {
  position: absolute; right: clamp(24px, 5vw, 60px); bottom: 20px;
  padding: 8px 16px; background: rgba(255, 255, 255, 0.92);
  font-family: var(--en); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}

/* サービス導線カード（3列・1px罫線グリッド） */
.p-card-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.p-card {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.5vw, 40px) clamp(22px, 2.8vw, 32px) clamp(26px, 3vw, 34px);
  background: var(--white);
  transition: background-color var(--dur) var(--ease);
}
.p-card:hover { background: var(--bg-alt); }
.p-card-num { font-family: var(--en); font-weight: 300; font-size: 13px; letter-spacing: 0.2em; color: var(--text-sub); margin-bottom: 18px; }
.p-card h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(18px, 1.9vw, 20px); letter-spacing: 0.06em; line-height: 1.6; color: var(--ink);
  margin-bottom: 12px;
  transition: color var(--dur) var(--ease);
}
.p-card:hover h3 { color: var(--accent); }
.p-card-desc { flex: 1; font-size: 13px; line-height: 1.95; color: var(--text-sub); }
.p-card-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; font-size: 12px; letter-spacing: 0.16em; color: var(--accent);
}
.p-card-more::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.p-card:hover .p-card-more::after { transform: translateX(6px); }
@media (max-width: 900px) { .p-card-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SERVICE — 事業内容の行（番号＋アイコン＋名称＋業務一覧）
============================================================ */
.svc-intro { max-width: 820px; }
.svc-intro h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 2.4vw, 27px); letter-spacing: 0.07em; line-height: 1.6; color: var(--ink);
  margin-bottom: 20px;
}
.svc-intro p { font-size: 15px; line-height: 2.1; color: var(--text); }

.svc-list { border-top: 1px solid var(--line-strong); }
.svc-row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding: clamp(40px, 5.5vw, 72px) clamp(4px, 1vw, 16px);
  border-bottom: 1px solid var(--line);
}
.svc-row:last-child { border-bottom-color: var(--line-strong); }
.svc-head { display: flex; flex-direction: column; gap: 18px; }
.svc-num {
  font-family: var(--en); font-weight: 400; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.svc-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.svc-icon img { width: 100%; height: auto; }
.svc-name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0.06em; line-height: 1.5; color: var(--ink);
  margin-bottom: 22px;
}
.svc-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.svc-items li {
  position: relative; padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; letter-spacing: 0.04em; line-height: 1.7; color: var(--text);
}
.svc-items li::before {
  content: ""; position: absolute; left: 0; top: 1.5em; width: 10px; height: 1px; background: var(--accent);
}
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 18px; }
  .svc-head { flex-direction: row; align-items: center; gap: 16px; }
  .svc-icon { width: 56px; height: 56px; }
  .svc-items { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCESS — 地図＋所在地／最寄駅／動画／ルート手順
============================================================ */
.access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.access-map { aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--bg-alt); }
.access-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.access-name { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.06em; color: var(--ink); margin-bottom: 18px; }
.access-addr { font-size: 15px; line-height: 2; color: var(--ink); }
.access-addr .postal { display: block; font-size: 13px; letter-spacing: 0.08em; color: var(--text-sub); }
.access-btn { margin-top: 24px; min-width: 0; }

.station-list { margin-top: 32px; border-top: 1px solid var(--line-strong); }
.station-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px; align-items: center;
  padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.station-row:last-child { border-bottom-color: var(--line-strong); }
.station-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.station-lines li {
  padding: 3px 10px; border: 1px solid var(--line-strong);
  font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-sub); white-space: nowrap;
}
.station-name { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); }
.station-walk { font-family: var(--en); font-size: 13px; letter-spacing: 0.06em; color: var(--text-sub); white-space: nowrap; text-align: right; }
@media (max-width: 900px) {
  .access-grid { grid-template-columns: 1fr; }
  .access-map { aspect-ratio: 16 / 10; }
}

/* ルート案内：動画 */
.route-video { max-width: 980px; margin: 0 auto; }
.route-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--dark); border: 1px solid var(--line); }
.route-video-cap { margin-top: 12px; font-size: 12px; letter-spacing: 0.06em; color: var(--text-sub); text-align: right; }

/* ルート案内：手順（写真＋番号＋文のカード。元ページの各ステップ写真を引き継ぐ） */
.route-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 44px) clamp(20px, 2.4vw, 32px);
  margin-top: clamp(48px, 6vw, 72px);
}
.route-step { display: flex; flex-direction: column; }
.route-step-photo { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--bg-alt); }
.route-step-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.route-step:hover .route-step-photo img { transform: scale(1.03); }
.route-step-body { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 16px 4px 0; align-items: start; }
.route-step-num {
  font-family: var(--en); font-weight: 300; font-size: 26px; letter-spacing: 0.08em; line-height: 1; color: var(--accent);
  padding-top: 3px;
}
.route-step-body p { font-size: 14px; line-height: 1.95; letter-spacing: 0.03em; color: var(--text); }
.route-step.is-goal .route-step-photo { border-color: var(--accent); }
.route-step.is-goal .route-step-num { color: var(--ink); }
@media (max-width: 900px) { .route-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .route-steps { grid-template-columns: 1fr; gap: 28px; }
  .route-step { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 14px; align-items: start; }
  .route-step-body { padding-top: 0; grid-template-columns: 40px minmax(0, 1fr); }
  .route-step-num { font-size: 22px; }
}

/* アクセスのヒーローは自社エントランス写真。
   白は文字が乗る左側だけに寄せ、右側は写真をそのまま見せる（2026-09-10 指摘）。 */
.access-page .p-hero-bg { object-position: 70% 55%; }
.access-page .p-hero::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.86) 34%, rgba(255, 255, 255, 0.4) 58%, rgba(255, 255, 255, 0) 78%);
}
/* ヘッダー帯（電話番号・ナビ）が写真に重なる分だけ、上端に薄い白を足す */
.access-page .p-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 767px) {
  .access-page .p-hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0.25) 100%); }
  .access-page .p-hero::after { display: none; }
}

/* ============================================================
   CTA（style.css の .contact を継承）
============================================================ */
.p-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 0 auto; }
.p-cta-box {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 36px 32px; border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white); text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.p-cta-box:hover { background: var(--white); border-color: var(--white); color: var(--accent-dark); }
.p-cta-tel { font-family: var(--en); font-weight: 400; font-size: clamp(26px, 3vw, 34px); letter-spacing: 0.05em; line-height: 1.2; }
.p-cta-box .contact-box-title { font-size: clamp(17px, 2vw, 21px); }
@media (max-width: 767px) { .p-cta-grid { grid-template-columns: 1fr; } }