/* =========================================================
   Comtri Corporate — phase-map.css
   トップ #phasemap（発信フェーズマップ／診断）
   main.css のトークン（--blue / --navy / --ice / --muted / --line / --r）を継承
   ========================================================= */

.pm{display:grid;gap:clamp(22px,3vw,32px)}

/* ---------- 診断パネル ---------- */
.pm-dx{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(20px,2.8vw,30px);
}
.pm-dx-q{margin:0 0 4px;font-size:1.06rem;font-weight:800;color:var(--text)}
.pm-dx-hint{margin:0 0 16px;font-size:.86rem;color:var(--muted)}
.pm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.pm-chips legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pm-chip{margin:0}
.pm-chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pm-chip span{
  display:inline-block;cursor:pointer;
  background:var(--white);border:1px solid var(--line-2,rgba(11,30,48,.22));border-radius:999px;
  padding:7px 15px;font-size:.86rem;font-weight:700;color:var(--text);line-height:1.7;
  transition:background .22s,border-color .22s,color .22s,transform .22s;
}
.pm-chip span:hover{border-color:var(--blue);color:var(--blue-ink)}
.pm-chip input:checked + span{
  background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;transform:translateY(-1px);
}
.pm-chip input:focus-visible + span{outline:2px solid var(--blue-deep);outline-offset:3px}

.pm-out{
  display:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  align-items:center;gap:14px 20px;flex-wrap:wrap;
}
.pm-out.on{display:flex}
.pm-badge{
  font-family:var(--latin);font-weight:800;font-size:.68rem;letter-spacing:.18em;
  color:#fff;background:var(--blue-deep);border-radius:999px;padding:4px 12px;white-space:nowrap;
}
.pm-out-t{flex:1 1 320px;min-width:0}
.pm-out-t strong{display:block;font-size:1.06rem;font-weight:800;line-height:1.6;color:var(--text)}
.pm-out-t span{display:block;font-size:.86rem;color:var(--muted);line-height:1.75}
.pm-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pm-reset{
  background:transparent;border:1px solid var(--line-2,rgba(11,30,48,.22));border-radius:999px;
  padding:8px 16px;font:inherit;font-size:.82rem;font-weight:700;color:var(--muted);
  cursor:pointer;transition:border-color .22s,color .22s;
}
.pm-reset:hover{border-color:var(--blue);color:var(--blue-ink)}

/* ---------- マップ ---------- */
.pm-board{overflow-x:auto;padding:4px 4px 10px}
.pm-flow{
  display:grid;grid-template-columns:1fr 26px 1fr 26px 1.02fr 26px 1.14fr;
  align-items:start;min-width:1096px;
}
@media(max-width:1180px){
  .pm-flow{grid-template-columns:1fr;min-width:0}
  .pm-board{overflow-x:visible}
}
.pm-link{display:grid;place-items:center;align-self:center;color:rgba(11,30,48,.22);transition:opacity .3s}
.pm-link svg{display:block}
@media(max-width:1180px){
  .pm-link{padding:10px 0}
  .pm-link svg{transform:rotate(90deg)}
}

.pm-phase{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(11,30,48,.05),0 10px 28px rgba(11,30,48,.06);
  padding:clamp(18px,2vw,24px);
  display:flex;flex-direction:column;gap:13px;
  transition:opacity .3s,box-shadow .3s,border-color .3s,transform .3s;
}
.pm-phase.lead{border-color:var(--blue);box-shadow:0 1px 2px rgba(11,30,48,.05),0 14px 34px rgba(30,115,190,.14)}
.pm-no{margin:0;font-family:var(--latin);font-weight:800;font-size:.72rem;letter-spacing:.2em;color:var(--blue-deep)}
.pm-state{
  display:block;margin:0;background:var(--ice-2);color:var(--blue-ink);
  border-radius:10px;padding:10px 13px;font-size:.86rem;font-weight:700;line-height:1.65;
}
.pm-state span{display:block;font-family:var(--latin);font-weight:700;font-size:.68rem;letter-spacing:.14em;opacity:.7}
.pm-h{margin:0;font-size:1.34rem;font-weight:800;letter-spacing:.02em;color:var(--text)}
.pm-h em{font-style:normal;color:var(--muted);font-size:.8rem;font-weight:600;margin-left:.6em;letter-spacing:0}
.pm-flag{
  align-self:flex-start;margin:0;font-size:.68rem;font-weight:800;letter-spacing:.1em;
  color:#fff;background:var(--blue-deep);border-radius:999px;padding:3px 11px;line-height:1.7;
}

/* 図版 */
.pm-viz{display:block;width:100%;height:auto;margin:2px 0 4px}
.pm-viz .fr{fill:none;stroke:var(--navy);stroke-width:1.6;opacity:.28}
.pm-viz .fr.dash{stroke-dasharray:5 4}
.pm-viz .dot{fill:var(--navy);opacity:.28}
.pm-viz .bar{fill:var(--navy);opacity:.16}
.pm-viz .hot{fill:var(--blue)}
.pm-viz .ln{stroke:var(--blue);stroke-width:1.7;fill:none;stroke-linecap:round}
.pm-viz .head{fill:var(--blue)}

/* サービス */
.pm-svc{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:7px;transition:opacity .3s,border-color .3s}
.pm-tag{
  align-self:flex-start;margin:0;font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--blue-ink);
  border:1px solid var(--blue);border-radius:999px;padding:2px 10px;line-height:1.7;
}
.pm-name{margin:0;font-size:1.04rem;font-weight:800;line-height:1.55;color:var(--text)}
.pm-desc{margin:0;font-size:.87rem;color:var(--muted);line-height:1.78}
.pm-meta{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0}
.pm-meta li{
  list-style:none;font-family:var(--latin);font-size:.73rem;font-weight:700;
  color:var(--text);background:var(--ice);border:1px solid var(--line);
  border-radius:7px;padding:3px 9px;
}
.pm-branch{display:grid;grid-template-columns:1fr;gap:12px}
.pm-branch .pm-svc{border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--ice)}

/* アコーディオン */
.pm-more{margin-top:2px}
.pm-more summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:800;color:var(--blue-ink);
}
.pm-more summary::-webkit-details-marker{display:none}
.pm-more summary::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;
}
.pm-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.pm-more ul{margin:10px 0 0;padding:0;display:grid;gap:7px}
.pm-more li{list-style:none;font-size:.81rem;line-height:1.7;color:var(--muted);padding-left:16px;position:relative}
.pm-more li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--blue)}

.pm-note{margin:8px 0 0;font-size:.78rem;color:var(--muted);line-height:1.7;border-top:1px dashed var(--line);padding-top:11px}

/* ENG 帯 */
.pm-band{
  background:var(--navy);color:#EAF3FA;border-radius:var(--r);
  padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,28px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
  transition:opacity .3s,box-shadow .3s;
}
.pm-band-l{display:flex;align-items:center;gap:16px;flex:1 1 340px;min-width:0}
.pm-band-no{margin:0;font-family:var(--latin);font-weight:800;font-size:.66rem;letter-spacing:.2em;color:var(--blue);white-space:nowrap}
.pm-band h3{margin:0;font-size:1.04rem;font-weight:800;color:#fff}
.pm-band p{margin:3px 0 0;font-size:.85rem;color:#A9C4D8;line-height:1.7}
.pm-band .pm-meta li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#EAF3FA}
.pm-band .pm-viz{width:56px;height:56px;flex:none;margin:0}
.pm-band .pm-viz .fr,.pm-band .pm-viz .dot{stroke:#fff;fill:none}

/* 診断中のハイライト */
.pm-map.filtered .pm-phase:not(.hit),
.pm-map.filtered .pm-band:not(.hit){opacity:.32}
.pm-map.filtered .pm-link{opacity:.32}
.pm-map.filtered .pm-phase.hit{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 14px 34px rgba(30,115,190,.18);transform:translateY(-2px)}
.pm-map.filtered .pm-band.hit{box-shadow:0 0 0 2px var(--blue),0 14px 34px rgba(30,115,190,.18)}
.pm-map.filtered .pm-phase.hit .pm-branch .pm-svc:not(.hit){opacity:.45}
.pm-map.filtered .pm-phase.hit .pm-branch .pm-svc.hit{border-color:var(--blue)}

@keyframes pmFlow{0%,100%{opacity:1}50%{opacity:.4}}
.pm-map.filtered .pm-phase.hit .pm-viz .ln,
.pm-map.filtered .pm-phase.hit .pm-viz .head{animation:pmFlow 1.9s ease-in-out infinite}

.pm-cap{margin:6px 0 0;font-size:.83rem;color:var(--muted);line-height:1.85;max-width:76em}

@media(prefers-reduced-motion:reduce){
  .pm-phase,.pm-band,.pm-link,.pm-svc,.pm-chip span,.pm-more summary::after{transition:none !important}
  .pm-map.filtered .pm-phase.hit .pm-viz .ln,
  .pm-map.filtered .pm-phase.hit .pm-viz .head{animation:none !important}
  .pm-map.filtered .pm-phase.hit{transform:none}
}

/* =========================================================
   #firsthand — 一次情報セクション
   ========================================================= */
.fh{display:grid;gap:clamp(26px,3.4vw,40px)}

/* 対比図 */
.fh-compare{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.fh-compare{grid-template-columns:1fr 1fr;gap:20px}}
.fh-col{
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.2vw,26px);background:var(--white);
  display:flex;flex-direction:column;gap:14px;
}
.fh-col.is-ours{border-color:var(--blue);box-shadow:0 1px 2px rgba(11,30,48,.05),0 14px 34px rgba(30,115,190,.14)}
.fh-cap{
  margin:0;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  color:var(--muted);font-family:var(--latin);
}
.fh-col.is-ours .fh-cap{color:var(--blue-deep)}
.fh-ttl{margin:0;font-size:1.06rem;font-weight:800;color:var(--text);line-height:1.6}
.fh-steps{margin:0;padding:0;display:grid;gap:9px}
.fh-steps li{
  list-style:none;display:flex;align-items:flex-start;gap:11px;
  font-size:.88rem;line-height:1.7;color:var(--muted);
}
.fh-steps li b{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:.18em;
  display:grid;place-items:center;
  font-family:var(--latin);font-size:.68rem;font-weight:800;
  background:var(--ice-2);color:var(--muted);
}
.fh-col.is-ours .fh-steps li{color:var(--text)}
.fh-col.is-ours .fh-steps li b{background:var(--blue-deep);color:#fff}
.fh-out{
  margin:0;border-top:1px dashed var(--line);padding-top:13px;
  font-size:.92rem;font-weight:800;line-height:1.7;color:var(--muted);
}
.fh-col.is-ours .fh-out{color:var(--blue-ink)}

/* 3つの強み */
.fh-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.fh-grid{grid-template-columns:repeat(3,1fr)}}
.fh-card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:clamp(18px,2.1vw,24px);display:flex;flex-direction:column;gap:9px;
}
.fh-n{margin:0;font-family:var(--latin);font-weight:800;font-size:.72rem;letter-spacing:.2em;color:var(--blue-deep)}
.fh-card h3{margin:0;font-size:1.04rem;font-weight:800;color:var(--text);line-height:1.6}
.fh-card p{margin:0;font-size:.87rem;color:var(--muted);line-height:1.8}
.fh-where{
  margin:4px 0 0;padding:11px 13px;border-radius:10px;background:var(--ice);
  font-size:.8rem;line-height:1.75;color:var(--text);
}
.fh-where b{color:var(--blue-ink);font-weight:800}

/* 締め */
.fh-close{
  background:var(--navy);color:#EAF3FA;border-radius:var(--r);
  padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px);
}
.fh-close p{margin:0;font-size:clamp(1rem,1.9vw,1.2rem);font-weight:800;line-height:1.85;color:#fff}
.fh-close span{display:block;margin-top:10px;font-size:.88rem;font-weight:400;color:#A9C4D8;line-height:1.85}

/* =========================================================
   HERO 縦位置の修正
   .hero は justify-content:center だが、マーキー側の margin-top:auto が
   flex の余白を全て吸うため center が無効化され、テキストが上端に張り付く。
   .wrap 側にも auto margin を持たせ、余白を上下で折半させる。
   ========================================================= */
.hero .wrap{margin-top:auto}