/* ============================================================
   製品・技術ページ共通（PrivateAI / 金型補正 / 表題欄OCR）
   ヒーロー：写真＋色かぶり＋SVG（同じ枠に敷く）。1024px未満は「写真→文章」に積む
   ============================================================ */

/* ---------- ヒーロー（モバイル・タブレット：積み上げ） ---------- */
.pd-hero { position: relative; overflow: hidden; background: var(--paper); }
.pd-hero__photo { position: relative; aspect-ratio: 1024 / 572; background: #0b1d33; }
.pd-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-hero__wash { position: absolute; inset: 0; background: rgba(13,56,104,.12); mix-blend-mode: multiply; }
.pd-hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.pd-hero__overlay svg, .pd-hero__overlay img { width: 100%; height: 100%; display: block; }
/* 外部SVG(img)は写真用の object-fit/position を受けない。切り取りはSVG側の preserveAspectRatio(slice)に任せる */
.pd-hero__overlay img { position: static; inset: auto; object-fit: fill; object-position: 0 0; }

.pd-hero__content { padding: 34px 20px 42px; background: var(--paper); color: var(--ink); }
.pd-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--steel);
}
.pd-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--correction); display: block; flex-shrink: 0; }
.pd-hero__title { margin: 0 0 16px; font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 6.6vw, 36px); line-height: 1.5; letter-spacing: .02em; color: var(--ink); }
.pd-hero__lead { margin: 0 0 26px; max-width: 38em; font-size: 15px; line-height: 1.9; color: var(--steel); }
.pd-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pd-hero .button--ghost { color: var(--ink); border-color: rgba(20,35,58,.35); }
.pd-hero .button--ghost:hover { border-color: var(--blueprint); color: var(--blueprint); }

/* 金型補正：色の凡例（写真の右下） */
.mc-legend {
  position: absolute; right: 3%; bottom: 6%; z-index: 2;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 10px; font-size: 10px; color: #dce9f7; background: rgba(8,35,71,.66); border-radius: 3px;
}
.mc-legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mc-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------- ヒーロー（PC） ---------- */
@media screen and (min-width: 1024px) {
  .pd-hero { display: flex; min-height: clamp(540px, 56vw, 780px); }
  .pd-hero__photo { position: absolute; inset: 0; aspect-ratio: auto; }
  .pd-hero__wash {
    background: linear-gradient(100deg, rgba(8,35,71,.93) 0%, rgba(8,35,71,.80) 30%, rgba(13,56,104,.46) 46%, rgba(13,56,104,.12) 62%, rgba(13,56,104,0) 74%);
    mix-blend-mode: normal;
  }
  .pd-hero__content {
    position: relative; z-index: 3; background: transparent; color: #fff;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 38vw; padding: 56px 0 56px 6vw;
  }
  .pd-eyebrow { color: var(--line); font-weight: 500; }
  .pd-hero__title { color: #fff; font-size: clamp(24px, 2.7vw, 36px); }
  .pd-hero__lead { color: #cfe0f2; font-size: 14px; }
  .pd-hero .button--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
  .pd-hero .button--ghost:hover { border-color: #fff; color: #fff; }
  .mc-legend { font-size: 11px; gap: 14px; padding: 8px 14px; }
}

/* ---------- ヒーロー上のSVG（共通の動き） ---------- */
.pd-glow { filter: url(#pdHalo); }
@keyframes pdDraw { to { stroke-dashoffset: 0; } }
@keyframes pdPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes pdFlow { to { stroke-dashoffset: -20; } }
@keyframes pdBreathe { 0%,100% { opacity: .5; } 50% { opacity: .78; } }
@keyframes pdPing { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes pdPlaneIn { to { opacity: 1; } }

/* PrivateAI：鍵つきの雲（隔離環境）と稼働状況 */
.pa-line { fill: none; stroke: var(--cyan); stroke-width: 1.6; }
.pa-line--sub { stroke-width: 1; opacity: .6; }
.pa-draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: pdDraw 1.4s ease-out forwards; }
.pa-draw--2 { animation-delay: .3s; }
.pa-dark { fill: var(--blueprint-deep); }
.pa-fill { fill: var(--cyan); }
.pa-pulse { animation: pdPulse 2.6s ease-in-out infinite; }
.pa-status { fill: var(--cyan); font-size: 11px; font-family: var(--sans); }

/* 金型補正：ズレのカラーマップ・測定点・座標表示 */
.mc-heat { animation: pdBreathe 4s ease-in-out infinite; }
.mc-heat--b { animation-duration: 4.6s; }
.mc-heat--r { animation-duration: 3.2s; animation-delay: .6s; }
.mc-contour { fill: none; stroke: #fff; stroke-width: 1; opacity: .3; }
.mc-mesh { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .9; stroke-dasharray: 900; stroke-dashoffset: 900; animation: pdDraw 1.3s ease-out .3s forwards; }
.mc-mesh--v { animation-delay: .7s; }
.mc-outline { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: .9; stroke-dasharray: 900; stroke-dashoffset: 900; animation: pdDraw 1s ease-out .2s forwards; }
.mc-ping { fill: none; stroke: var(--cyan); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: pdPing 2.4s ease-out infinite; }
.mc-ping--2 { animation-delay: .8s; }
.mc-ping--3 { animation-delay: 1.6s; }
.mc-probe { fill: #e14fb8; }
.mc-readout-box { fill: rgba(8,35,71,.78); stroke: rgba(94,234,255,.35); stroke-width: 1; }
.mc-readout { fill: var(--cyan); font: 11px "SFMono-Regular", Consolas, "Courier New", monospace; }

/* 表題欄OCR：紙の面に乗るブラケットと、構造化カード */
.tb-plane { fill: rgba(73,211,239,.07); stroke: rgba(73,211,239,.4); stroke-width: 1; opacity: 0; animation: pdPlaneIn .6s ease-out .9s forwards; }
.tb-bracket { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: pdDraw 1s ease-out forwards; }
.tb-dot { fill: var(--cyan); animation: pdPulse 2.2s ease-in-out infinite; }
.tb-link { fill: none; stroke: var(--cyan); stroke-width: 1.3; stroke-dasharray: 4 6; opacity: .75; animation: pdFlow 1s linear infinite; }
.tb-card { fill: rgba(8,35,71,.84); stroke: rgba(94,234,255,.4); stroke-width: 1; }
.tb-bar { fill: var(--cyan); opacity: .85; }
.tb-label { fill: #dce9f7; font-size: 9px; font-family: var(--sans); }

@media (prefers-reduced-motion: reduce) {
  .pa-draw, .mc-mesh, .mc-outline, .tb-bracket { animation: none !important; stroke-dashoffset: 0 !important; }
  .pa-pulse, .mc-heat, .mc-ping, .tb-dot, .tb-link { animation: none !important; }
  .mc-ping { opacity: 0; }
  .tb-plane { animation: none !important; opacity: 1 !important; }
}

/* タブレット・スマホ：写真が縮むため、ヒーロー上のブラケットを太くして見やすくする（座標系は写真基準） */
@media screen and (min-width: 461px) and (max-width: 1023px) {
  .pd-hero__overlay .tb-bracket { stroke-width: 4; }
}
@media screen and (max-width: 460px) {
  .pd-hero__overlay .tb-bracket { stroke-width: 7; }
}

/* ============================================================
   本文
   ============================================================ */
.pd-section { padding: 52px 0; background: var(--paper); }
.pd-section--tint { background: #e9eef3; }
.pd-h2 { margin: 0 0 22px; font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 5vw, 30px); line-height: 1.55; letter-spacing: .03em; color: var(--ink); }
.pd-h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.pd-lead { max-width: 42em; margin: 0 0 24px; font-size: 16px; line-height: 1.95; }
.pd-prose p { max-width: 44em; margin: 0 0 14px; font-size: 15.5px; line-height: 2; }
.pd-note { margin: 14px 0 0; font-size: 13px; line-height: 1.8; color: var(--steel); }
.pd-quiet { color: var(--steel); }
.pd-strong { font-weight: 700; }

/* 横に並べる項目（モバイルは縦） */
.pd-cols { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.pd-col { padding: 22px 0; border-top: 1px solid #c7d2dd; }
.pd-col:last-child { border-bottom: 1px solid #c7d2dd; }
.pd-col p { margin: 0; font-size: 15px; line-height: 1.9; }

/* 見出し＋説明の行 */
.pd-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid #c7d2dd; }
.pd-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 18px 0; border-bottom: 1px solid #c7d2dd; }
.pd-row__name { font-size: 16px; font-weight: 700; }
.pd-row__body { margin: 0; font-size: 15px; line-height: 1.9; }
.pd-row a { color: var(--blueprint); }

/* 料金 */
.pd-price { display: grid; grid-template-columns: 1fr; gap: 32px; }
.pd-price__item { padding-top: 20px; border-top: 1px solid #c7d2dd; }
.pd-price__name { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.pd-price__value { margin: 0 0 14px; font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 6vw, 34px); color: var(--blueprint); line-height: 1.3; }
.pd-price__value small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--steel); }
.pd-price ul { margin: 0; padding: 0; list-style: none; }
.pd-price li { padding: 9px 0; border-top: 1px solid var(--paper-line); font-size: 14.5px; }

/* 手順（順序があるものだけ番号） */
.pd-steps { margin: 0; padding: 0; list-style: none; counter-reset: pdstep; border-top: 1px solid #c7d2dd; }
.pd-steps li { counter-increment: pdstep; display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid #c7d2dd; }
.pd-steps li::before { content: counter(pdstep, decimal-leading-zero); font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.3; color: var(--blueprint); }
.pd-steps strong { display: block; margin-bottom: 2px; font-size: 16px; }
.pd-steps span { font-size: 14.5px; color: var(--steel); line-height: 1.85; }

/* 図 */
.pd-figure { margin: 0 0 28px; }
.pd-figure img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--paper-line); }
.pd-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--steel); }
.pd-fig-ph { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 200px; padding: 20px; font-size: 13px; color: var(--steel); background: #fff; border: 1px dashed #b9c6d3; }

/* 検証データ（大きな数字） */
.pd-stats { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 22px; }
.pd-stat { padding: 20px 0; border-top: 1px solid #c7d2dd; }
.pd-stat:last-child { border-bottom: 1px solid #c7d2dd; }
.pd-stat__label { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--steel); }
.pd-stat__num { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(38px, 11vw, 56px); line-height: 1.15; color: var(--blueprint); }
.pd-stat__num small { font-family: var(--sans); font-size: .34em; font-weight: 500; color: var(--steel); margin-left: 6px; }

/* 流れの小さな図（表題欄OCR） */
.pd-flow { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 0 8px; }

/* 注記つきの脚注・外部リンク */
.pd-links { margin: 18px 0 0; font-size: 14px; }
.pd-links a { color: var(--blueprint); font-weight: 700; }

/* 相談への導線 */
.pd-cta { text-align: center; padding: 56px 0; background: var(--blueprint-deep); color: #fff; }
.pd-cta h2 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(20px, 4.4vw, 26px); line-height: 1.6; }
.pd-cta p { margin: 0 0 22px; color: #cfe0f2; font-size: 14.5px; }
.pd-cta p.pd-cta__sub { margin: 18px 0 0; font-size: 13px; }

/* ============================================================
   タブレット（461px〜1023px）
   ============================================================ */
@media screen and (min-width: 461px) and (max-width: 1023px) {
  .pd-hero__content { padding: 40px max(32px, 8vw) 48px; }
  .pd-row { grid-template-columns: 14em 1fr; gap: 24px; }
  .pd-price { grid-template-columns: 1fr 1fr; gap: 40px; }
  .pd-stats { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .pd-stat:last-child { border-bottom: 0; }
  .pd-stats .pd-stat { border-bottom: 1px solid #c7d2dd; }
}

/* ============================================================
   PC（1024px〜）
   ============================================================ */
@media screen and (min-width: 1024px) {
  .pd-section { padding: 80px 0; }
  .pd-cols--3 { grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
  .pd-cols--3 .pd-col { border-bottom: 1px solid #c7d2dd; }
  .pd-row { grid-template-columns: 17em 1fr; gap: 36px; padding: 20px 0; }
  .pd-price { grid-template-columns: 1fr 1fr; gap: 56px; }
  .pd-stats { grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 760px; }
  .pd-stats .pd-stat { border-bottom: 1px solid #c7d2dd; }
  .pd-fig-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  .pd-cta { padding: 80px 0; }
}

/* 表題欄OCR：流れの図の配色 */
.pf-box { fill: #fff; stroke: #b9c6d3; stroke-width: 1.2; }
.pf-line { fill: none; stroke: #b9c6d3; stroke-width: 1; }
.pf-hl { fill: rgba(13,56,104,.13); }
.pf-arrow { fill: none; stroke: var(--steel); stroke-width: 1.4; stroke-dasharray: 4 5; stroke-linecap: round; }
.pf-key { fill: #b9c6d3; }
.pf-val { fill: var(--blueprint); }
.pf-text { fill: var(--steel); font-size: 12px; font-family: var(--sans); }