/* ============================================
   Pages — p-*（ページ固有）
   ============================================ */

/* ---- TOP hero ----
   正本: hero コピー列は 880px、装飾グラフィックは右端に抜ける。
   見出しは 50/1.15、リードは 20/1.8/.04em、統計数値は 64/1.55。 */
.p-top-hero { position: relative; background: var(--grad-hero); overflow: hidden; }
.p-top-hero__inner { position: relative; z-index: 2; padding: 56px 0 72px; max-width: 880px; }
.p-top-hero__en { font: var(--eyebrow); font-family: var(--font-latin); letter-spacing: var(--ls-eyebrow); color: var(--gold-ink); }
.p-top-hero__title { margin-top: 32px; font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-base); }
.p-top-hero__lead { margin-top: 32px; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); }
.p-top-hero__visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* webgl-globe.js はカスタム要素に width/height:100% をインラインで書き込むため、
   サイズは必ず外側のラッパーで与える（CSSでの直接指定は上書きされる） */
.p-top-hero__globe-box { position: absolute; right: 104px; top: 34px; width: 672px; height: 672px; }
.p-top-hero__flow-box { position: absolute; right: 0; top: 60px; width: 300px; height: 640px; opacity: .9; }
.p-top-hero__fields { position: absolute; right: 0; top: 0; width: 470px; height: 680px; }
.p-top-hero__fields > svg { position: absolute; right: 0; top: 60px; }
/* SP用の専門分野ピル（PCでは地球儀周りのSVGマーカーを使うため非表示） */
.p-top-hero__fields-sp { display: none; }
@keyframes dashflow { to { stroke-dashoffset: -64; } }
@keyframes fieldshift { to { background-position: 200% 50%; } }
.field-label {
  background: linear-gradient(100deg, #001038 0%, #123C7A 26%, #1F64AD 48%, #123C7A 70%, #001038 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fieldshift 7s linear infinite;
}
@media (forced-colors: active) { .field-label { color: CanvasText; background: none; } }
.p-top-hero__stats { display: flex; margin-top: 32px; font-family: var(--font-serif); }
.p-top-hero__stat { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0 40px; border-right: 1px solid var(--border-rule); }
.p-top-hero__stat:first-child { padding-left: 0; }
.p-top-hero__stat:last-child { border-right: 0; }
.p-top-hero__stat-label { font-size: 16px; line-height: 1.5; font-weight: var(--fw-semibold); }
.p-top-hero__stat-value { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; margin: -8px 0 -10px; }
.p-top-hero__stat-num { font-weight: var(--fw-semibold); font-size: var(--fs-stat); line-height: var(--lh-stat); }
.p-top-hero__stat-unit { font-size: 20px; font-weight: var(--fw-semibold); }
.p-top-hero__stat-note { margin-top: 12px; max-width: 240px; font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.p-top-hero__badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.p-top-hero__badge {
  padding: 1.5px; height: 88px; max-width: 100%;
  clip-path: var(--clip-notch);
  background: var(--grad-gold-edge);
  filter: var(--shadow-plate);
}
.p-top-hero__badge-inner {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 22px;
  clip-path: var(--clip-notch-inner);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
}
.p-top-hero__badge img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.p-top-hero__badge span { font-family: var(--font-serif); font-size: 16px; font-weight: var(--fw-semibold); line-height: 1.5; white-space: nowrap; }
.p-top-hero__actions { display: flex; gap: 32px; margin-top: 32px; }
@media (max-width: 1100px) {
  .p-top-hero__visual { display: none; }
  .p-top-hero__inner { max-width: none; }
}
/* タブレット帯: 統計は3列グリッドに（縦罫は維持）。数値を1段落として横溢れを防ぐ */
@media (max-width: 1023px) {
  .p-top-hero__inner { padding: 40px 0 56px; }
  .p-top-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
  .p-top-hero__stat { padding: 0 16px; }
  .p-top-hero__stat-num { font-size: 42px; }
  .p-top-hero__stat-unit { font-size: 16px; }
  .p-top-hero__stat-note { max-width: none; }
  .p-top-hero__badge { height: 76px; }
  .p-top-hero__badge-inner { padding: 0 16px; gap: 10px; }
  .p-top-hero__badge img { width: 36px; height: 36px; }
  .p-top-hero__badge span { font-size: var(--fs-body-sm); white-space: normal; }
  .p-top-hero__actions { gap: 16px; }
}
/* ==== SP（sp-top.dc.html / 375px 実測に一致） ====
   hero inner 36px 20px 48px / eyebrow 12px / h1 30-1.4 mt20 / lead 14.5-1.9 mt18
   → 専門分野ピル mt20 → 統計（縦積み・上下に罫線・pad 18px 0・数値46-1.55）
   → バッジ mt24 gap10（ノッチ12/11・pad 12px 16px・アイコン34）→ CTA mt28 gap12 h64
   地球儀は right:-130 top:-60 / 340×340 / opacity .85 で右上に抜ける（tech-flow とSVGは出さない） */
@media (max-width: 767px) {
  .p-top-hero__visual { display: block; }
  .p-top-hero__globe-box { right: -130px; top: -60px; width: 340px; height: 340px; opacity: .85; }
  .p-top-hero__flow-box, .p-top-hero__visual > svg, .p-top-hero__fields { display: none; }

  .p-top-hero__inner { padding: 36px 0 48px; }
  .p-top-hero__title { margin-top: 20px; }
  .p-top-hero__lead { margin-top: 18px; }

  .p-top-hero__fields-sp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .p-top-hero__field {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: var(--radius-pill); background: var(--surface-page);
    border: 1px solid var(--blue-200); box-shadow: 0 0 0 4px rgba(79,121,187,.06);
  }
  .p-top-hero__field-dot { width: 6px; height: 6px; flex: none; border-radius: var(--radius-circle); background: linear-gradient(150deg, #DDB25C, #A97314); }
  .p-top-hero__field .field-label { font-size: var(--fs-micro); font-weight: var(--fw-medium); }

  .p-top-hero__stats { display: flex; flex-direction: column; gap: 0; margin-top: 20px; border-top: 1px solid var(--border-rule); }
  .p-top-hero__stat { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--border-rule); }
  .p-top-hero__stat-label { font-size: var(--fs-body-sm); }
  .p-top-hero__stat-value { margin: -6px 0 -8px; }
  .p-top-hero__stat-unit { font-size: 16px; }
  .p-top-hero__stat-note { margin-top: 8px; max-width: none; font-size: var(--fs-nano); }

  .p-top-hero__badges { flex-direction: column; gap: 10px; margin-top: 24px; }
  .p-top-hero__badge { height: auto; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
  .p-top-hero__badge-inner { padding: 12px 16px; gap: 10px; clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px); }
  .p-top-hero__badge img { width: 34px; height: 34px; }
  .p-top-hero__badge span { font-size: var(--fs-caption); white-space: normal; }
  .p-top-hero__badge-lg { font-size: var(--fs-ui); }

  .p-top-hero__actions { flex-direction: column; gap: 12px; margin-top: 28px; }
}

/* ---- Feature row（WHY ROZETTA / 製品詳細）----
   正本 ReasonCard: 400px 1fr / gap 56 */
.p-feature-row { display: grid; grid-template-columns: 400px 1fr; gap: 56px; align-items: center; }
@media (max-width: 1279px) { .p-feature-row { grid-template-columns: 340px 1fr; gap: 40px; } }
/* 固定幅の1カラム目はタブレット以下では成立しないので縦積みにする
   （HTML 側の inline な grid-template-columns も上書きする） */
@media (max-width: 1023px) {
  .p-feature-row { grid-template-columns: 1fr !important; gap: 28px; }
}
@media (max-width: 767px) { .p-feature-row { gap: 24px; } }

/* 理由カードのメディア（PC正本 262px / SP正本 170px、常に cover・r12・navy影） */
.p-feature__media { width: 100%; height: 262px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-image); }
/* 実績エンブレム（PC 190px / SP 140px） */
.p-feature__emblem { width: 190px; height: 190px; object-fit: contain; }
@media (max-width: 1023px) { .p-feature__media { height: 220px; } }
@media (max-width: 767px) {
  .p-feature__media { height: 170px; }
  .p-feature__emblem { width: 140px; height: 140px; }
}

/* ---- Client logo grid ---- */
.p-clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-card); border: var(--border-width-card) solid var(--border-card); border-radius: var(--radius-lg); overflow: hidden; }
.p-clients__cell { color: var(--text-strong); background: var(--surface-card); height: 76px; display: flex; align-items: center; justify-content: center; padding: 12px 14px; min-width: 0; }
.p-clients__cell img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1023px) { .p-clients { grid-template-columns: repeat(3, 1fr); } }
/* SP正本: 3列・セル高 56px・padding 8px 10px */
@media (max-width: 767px) {
  .p-clients { grid-template-columns: repeat(3, 1fr); }
  .p-clients__cell { height: 56px; padding: 8px 10px; }
}

/* ---- History timeline ---- */
.p-history { max-width: 880px; margin: 0 auto; }
.p-history__item { display: grid; grid-template-columns: 120px 24px 1fr; gap: 20px; }
.p-history__year { font-family: var(--font-latin); font-size: 24px; font-weight: var(--fw-semibold); color: var(--gold-ink); letter-spacing: var(--ls-lead); text-align: right; line-height: 1.2; }
.p-history__line { display: flex; flex-direction: column; align-items: center; }
.p-history__dot { width: 12px; height: 12px; flex: none; border-radius: var(--radius-circle); background: var(--grad-gold-medal); margin-top: 6px; }
.p-history__bar { width: 1.5px; flex: 1; background: var(--gold-tint-line); }
.p-history__body { padding-bottom: 44px; min-width: 0; }
.p-history__title { font-family: var(--font-serif); font-size: 20px; font-weight: var(--fw-semibold); line-height: var(--lh-title); }
.p-history__desc { margin-top: 10px; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-muted); }
@media (max-width: 1023px) {
  .p-history__item { grid-template-columns: 88px 20px 1fr; gap: 16px; }
  .p-history__year { font-size: 20px; }
}
@media (max-width: 767px) {
  .p-history__item { grid-template-columns: 64px 18px 1fr; gap: 12px; }
  .p-history__year { font-size: 17px; }
  .p-history__title { font-size: 16px; }
}

/* ---- Mission（navy バンド内カード） ---- */
.p-mission { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-xl); padding: 44px; }
.p-mission__en { font-family: var(--font-latin); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); color: var(--gold-250); }
.p-mission__title { margin-top: 18px; font-family: var(--font-serif); font-size: 26px; font-weight: var(--fw-semibold); line-height: var(--lh-title); color: var(--text-on-dark); }
.p-mission__text { margin-top: 22px; font-size: var(--fs-body-sm); line-height: 2.1; color: rgba(255,255,255,.78); }
@media (max-width: 1023px) { .p-mission { padding: 32px 28px; } }
@media (max-width: 767px) { .p-mission { padding: 24px 20px; } .p-mission__title { font-size: 20px; } }

/* ---- Flow steps ---- */
.p-flow { display: flex; gap: 14px; align-items: stretch; }
.p-flow__step { color: var(--text-strong); flex: 1; min-width: 0; background: var(--surface-card); border: var(--border-width-card) solid var(--border-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 26px 26px 24px; }
.p-flow__num { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: 30px; line-height: 1.3; }
.p-flow__title { font-size: 16.5px; font-weight: var(--fw-bold); }
.p-flow__head { display: flex; align-items: baseline; gap: 10px; }
.p-flow__list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.p-flow__list li { display: flex; gap: 8px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-body); }
.p-flow__list li::before { content: "●"; color: var(--gold-550); flex: none; }
.p-flow__arrow { display: flex; align-items: center; color: var(--gold-550); font-size: 22px; flex: none; }
.p-flow__goal { flex: none; display: flex; align-items: center; justify-content: center; width: 120px; background: var(--navy-800); color: var(--text-on-dark); border-radius: var(--radius-lg); font-family: var(--font-serif); font-size: var(--fs-title); font-weight: var(--fw-semibold); text-align: center; line-height: var(--lh-lead); }
.p-flow__phase { display: flex; align-items: center; gap: 14px; margin: 44px 0 20px; }
.p-flow__phase-title { font-family: var(--font-serif); font-size: 19px; font-weight: var(--fw-semibold); }
.p-flow__phase::after { content: ""; flex: 1; height: 1px; background: var(--grad-gold-fade-right); }
/* 横並びのプロセスは 1024px 未満では成立しないので縦フローに切り替え */
@media (max-width: 1023px) {
  .p-flow { flex-direction: column; }
  .p-flow__arrow { transform: rotate(90deg); justify-content: center; }
  .p-flow__goal { width: 100%; padding: 16px 0; }
  .p-flow__goal br { display: none; }
}

/* ---- Steps（パートナー導入フローの丸メダル） ---- */
.p-steps { display: flex; align-items: flex-start; }
.p-steps__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 10px; }
.p-steps__circle { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: none; border-radius: var(--radius-circle); background: var(--grad-gold-medal); box-shadow: var(--shadow-medal); font-family: var(--font-latin); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-on-dark); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.p-steps__item:hover .p-steps__circle { transform: var(--lift-lg); }
.p-steps__title { font-family: var(--font-serif); font-size: 16.5px; font-weight: var(--fw-semibold); }
.p-steps__desc { font-size: var(--fs-micro); line-height: var(--lh-lead); color: var(--text-muted); }
.p-steps__joint { flex: none; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(199,155,55,.15), rgba(199,155,55,.75), rgba(199,155,55,.15)); margin-top: 31px; }
@media (max-width: 1023px) {
  .p-steps { flex-wrap: wrap; justify-content: center; gap: 28px 0; }
  .p-steps__item { flex: 0 0 33.333%; }
  .p-steps__joint { display: none; }
}
@media (max-width: 767px) {
  .p-steps { flex-direction: column; gap: 20px; align-items:center; }
  .p-steps__item { flex: none; }
}

/* ---- Article（news / column / case 詳細） ---- */
.p-article__meta { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.p-article__title { margin-top: 22px; font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-h2); }
.p-article h2 { margin-top: 64px; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-title); padding-bottom: 16px; border-bottom: 2px solid var(--navy-800); }
/* 見出しの金の縦線もグラデーション（フラットな色帯にしない） */
.p-article h3 { position: relative; margin-top: 44px; font-size: var(--fs-section-lead); font-weight: var(--fw-bold); line-height: var(--lh-title); padding-left: 14px; }
.p-article h3::before { content: ""; position: absolute; left: 0; top: 0; width: var(--rule-accent-width); height: 100%; background: var(--grad-gold-edge); }
.p-article p { margin-top: 24px; font-size: var(--fs-body); line-height: 2.2; color: var(--navy-600); }
.p-article__hero { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-image); margin-top: 44px; background: var(--surface-alt); }
@media (max-width: 1023px) {
  .p-article h2 { margin-top: 48px; }
  .p-article h3 { margin-top: 36px; }
}
@media (max-width: 767px) {
  .p-article h2 { margin-top: 40px; }
  .p-article p { line-height: 2; margin-top: 16px; }
}
.p-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.p-article-layout__side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--header-height) + 24px); min-width: 0; }
@media (max-width: 1279px) { .p-article-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; } }
@media (max-width: 1023px) {
  .p-article-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .p-article-layout__side { position: static; }
}

/* ---- Sidebar widgets ---- */
.p-widget { background: var(--surface-card); border: var(--border-width-card) solid var(--border-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; min-width: 0; }
.p-widget__title { padding: 18px 24px; border-bottom: 2px solid var(--navy-800); font-family: var(--font-serif); font-size: 16px; font-weight: var(--fw-semibold); }
.p-widget__title--navy { background: var(--navy-800); color: var(--text-on-dark); border-bottom: 0; }
.p-widget__item { display: block; padding: 18px 24px; border-bottom: 1px solid var(--border-inner); color: var(--text-strong); }
.p-widget__item:hover { background: var(--surface-alt); color: var(--text-strong); }

/* ---- Simulation ---- */
.p-sim { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; align-items: center; }
.p-sim__panel { background: var(--surface-card); border-radius: var(--radius-xl); padding: 36px 40px; box-shadow: 0 10px 40px rgba(0,16,56,.30); color: var(--text-strong); }
.p-sim__result { margin-top: 14px; padding: 18px 22px; background: var(--gold-tint); border-radius: var(--radius-md); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.p-sim__result-num { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: 26px; }
@media (max-width: 1279px) { .p-sim { grid-template-columns: 380px minmax(0, 1fr); gap: 40px; } }
@media (max-width: 1023px) { .p-sim { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 767px) { .p-sim__panel { padding: 22px 20px; } }

/* ---- Program cards（パートナー） ---- */
.p-program { color: var(--text-strong); border: var(--border-width-card) solid var(--border-card); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card-quiet); background: var(--surface-card); min-width: 0; }
.p-program__head { padding: 26px 32px; background: var(--navy-800); display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.p-program__type { font-family: var(--font-latin); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow-tight); color: var(--gold-250); }
.p-program__name { font-family: var(--font-serif); font-size: 22px; font-weight: var(--fw-semibold); color: var(--text-on-dark); }
.p-program__body { padding: 10px 32px 26px; }
.p-program__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-inner); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.p-program__row dt { font-weight: var(--fw-bold); }
.p-program__row dd { color: var(--text-body); }
@media (max-width: 1023px) {
  .p-program__head { padding: 22px 24px; }
  .p-program__body { padding: 6px 24px 22px; }
  .p-program__row { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 767px) {
  .p-program__body { padding: 6px 20px 20px; }
  .p-program__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================
   SP 正本（sp-*.dc.html / 375px 実測）に合わせるサイズ補正
   ============================================ */
@media (max-width: 767px) {
  .p-history__title { font-size: var(--fs-ui); }
  .p-mission__en { font-size: var(--fs-nano); }
  .p-flow__num { font-size: 24px; }
  .p-flow__title { font-size: 14.5px; }
  .p-steps__title { font-size: 15.5px; }
  .p-program__name { font-size: 18px; }
  .p-article__title { font-size: 22px; }
}
@media (max-width: 767px) {
  /* パートナー: プログラム表の本文（正本 12.5px） */
  .p-program__row { font-size: var(--fs-i-14); }
}
@media (max-width: 767px) {
  /* 記事詳細（正本 sp-*-detail 実測） */
  .p-article__title { font-size: 22px; }
  .p-article h2 { font-size: 19px; }
  .p-widget__title { font-size: 14.5px; }
}