/* FujiSSL 証明書ユーザーポータル — portal.css
   デザイン言語(確定 2026-10-03): 白基調・余白・細ヘアライン。赤#852428はアクセントのみ(面で塗らない)。
   作業画面に宣伝を出さない。手続き画面は先回り案内＋その場FAQ＋制約はマーカー。FujiSSL専用(NIJIMOロゴ/#852428)。
   既存Bootstrapを土台に、ポータル配下だけを上書き/再構成する。 */

:root{
  --brand:#852428; --brand-weak:#a3474b; --brand-tint:#fdf7f7;
  --ink:#1f1d1c; --muted:#6c6763; --faint:#9a938d;
  --line:#ebe8e5; --line-strong:#d9d4cf; --surface:#faf9f8; --surface-2:#f2f0ee;
  --amber-bg:#fdf6e9; --amber-bd:#f3d9a8; --amber-ink:#7a4a08; --amber-strong:#d08700; --amber-chip:#854f0b;
  --green-bg:#e8f5ec; --green-bd:#b9e2c7; --green-ink:#1f7a44;
  --marker:#ffe58f; --marker-ink:#5a3a00;
  --radius:10px; --radius-lg:12px; --radius-xl:18px;
}

/* ---- base ---- */
.pt-scope{ color:var(--ink); background:#fff;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6; }
.pt-scope *{ box-sizing:border-box; }
.pt-wrap{ max-width:720px; margin:24px auto; padding:0 16px; }
.pt-card{ background:#fff; border:0.5px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.pt-ribbon{ height:3px; background:var(--brand); }
.pt-muted{ color:var(--muted); } .pt-faint{ color:var(--faint); }

/* ---- header ---- */
.pt-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 22px; border-bottom:0.5px solid var(--line); }
.pt-brand{ display:flex; align-items:center; gap:11px; }
.pt-brand img,.pt-brand svg{ width:28px; height:28px; display:block; }
.pt-brand .t1{ font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.pt-brand .t2{ font-size:11px; color:var(--faint); line-height:1.2; }
.pt-acct{ display:flex; align-items:center; gap:12px; }
.pt-acct .em{ font-size:12px; color:var(--ink); text-align:right; line-height:1.3; }
.pt-acct .co{ font-size:10px; color:var(--faint); }
.pt-acct .av{ width:30px; height:30px; border-radius:50%; background:var(--surface-2); color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.pt-logout{ font-size:12px; color:var(--muted); text-decoration:none; border:0.5px solid var(--line-strong);
  border-radius:var(--radius); padding:6px 11px; white-space:nowrap; }

/* ---- subbar (CN + product + status pill) ---- */
.pt-subbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:14px 22px; border-bottom:0.5px solid var(--line); }
.pt-subbar-cn{ font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.2; word-break:break-all; }
.pt-subbar-prod{ font-size:12px; color:var(--faint); margin-top:2px; }

/* ---- body / content ---- */
.pt-body > .pt-hero:first-child{ margin-top:0; }
.pt-content{ margin-top:16px; }

/* ---- tabs ---- */
.pt-tabs{ display:flex; gap:24px; margin:0 22px; border-bottom:0.5px solid var(--line); overflow-x:auto; }
.pt-tabs a{ font-size:13px; color:var(--muted); text-decoration:none; padding:12px 0; white-space:nowrap; border-bottom:2px solid transparent; }
.pt-tabs a:hover{ color:var(--ink); }
.pt-tabs a.active{ color:var(--ink); font-weight:600; border-bottom-color:var(--brand); }

/* ---- body ---- */
.pt-body{ padding:20px 22px; }
.pt-h1row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pt-h1cap{ font-size:12px; color:var(--faint); }
.pt-h1{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin:1px 0 0; }
.pt-section-h{ font-size:13px; font-weight:600; margin:0 0 8px; display:flex; align-items:center; gap:7px; }

/* ---- status pill ---- */
.pt-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 13px; border-radius:999px; border:0.5px solid; }
.pt-pill .dot{ width:6px; height:6px; border-radius:50%; }
.pt-pill.amber{ background:var(--amber-bg); color:var(--amber-chip); border-color:var(--amber-bd); } .pt-pill.amber .dot{ background:var(--amber-strong); }
.pt-pill.green{ background:var(--green-bg); color:var(--green-ink); border-color:var(--green-bd); }
.pt-pill.info{ background:var(--surface); color:var(--muted); border-color:var(--line-strong); }

/* ---- hero (次にやること) ---- */
.pt-hero{ display:flex; gap:15px; align-items:flex-start; border:1px solid var(--line); border-left:3px solid var(--brand);
  background:var(--surface); border-radius:var(--radius-lg); padding:18px; margin-top:14px; }
.pt-hero.warn{ border:1px solid var(--amber-bd); border-left:3px solid var(--amber-strong); background:var(--amber-bg); }
.pt-hero .ic{ flex-shrink:0; width:42px; height:42px; border-radius:11px; background:var(--brand); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:22px; }
.pt-hero.warn .ic{ background:var(--amber-strong); }
.pt-hero .eyebrow{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--brand-weak); }
.pt-hero.warn .eyebrow{ color:#b45309; }
.pt-hero .title{ font-size:19px; font-weight:600; letter-spacing:-.02em; margin:4px 0 0; }
.pt-hero .desc{ font-size:14px; color:var(--muted); margin-top:6px; line-height:1.75; }
.pt-hero .acts{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }

/* ---- buttons/links ---- */
.pt-btn{ background:var(--brand); color:#fff; border:none; border-radius:var(--radius); padding:11px 22px;
  font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.pt-btn:hover{ filter:brightness(.94); }
.pt-link{ font-size:13px; color:var(--muted); text-decoration:none; } .pt-link:hover{ color:var(--ink); }

/* ---- quick actions ---- */
.pt-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.pt-quick a{ border:0.5px solid var(--line); border-radius:11px; padding:13px 11px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:7px; font-size:12px; }
.pt-quick a:hover{ border-color:var(--line-strong); background:var(--surface); }
.pt-quick .qi{ font-size:19px; color:var(--muted); }

/* ---- two-col panels ---- */
.pt-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.pt-panel{ border:0.5px solid var(--line); border-radius:var(--radius-lg); padding:16px; }
.pt-kv{ display:flex; flex-direction:column; gap:9px; font-size:13px; }
.pt-kv .r{ display:flex; justify-content:space-between; gap:8px; }
.pt-kv .k{ color:var(--faint); } .pt-kv .v{ color:var(--ink); text-align:right; }

/* ---- timeline ---- */
.pt-tl{ display:flex; flex-direction:column; }
.pt-tl .step{ display:flex; gap:10px; }
.pt-tl .rail{ display:flex; flex-direction:column; align-items:center; }
.pt-tl .node{ width:15px; height:15px; border-radius:50%; background:var(--surface); border:0.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; }
.pt-tl .node.done{ background:var(--brand); border-color:var(--brand); }
.pt-tl .node.now{ background:#fff; border:2px solid var(--brand); }
.pt-tl .bar{ width:1.5px; flex:1; background:var(--line); min-height:12px; }
.pt-tl .bar.done{ background:var(--brand); }
.pt-tl .lbl{ font-size:13px; } .pt-tl .sub{ font-size:11px; color:var(--faint); }
.pt-tl .sub.now{ color:var(--brand-weak); }

/* ---- marker / warning box ---- */
.pt-warn{ border:1px solid var(--amber-bd); border-left:3px solid var(--amber-strong); background:var(--amber-bg);
  border-radius:var(--radius-lg); padding:15px 16px; margin-top:14px; }
.pt-warn .row{ display:flex; gap:9px; align-items:flex-start; }
.pt-warn .wi{ font-size:19px; color:#b45309; flex-shrink:0; margin-top:1px; }
.pt-warn .wt{ font-size:13px; color:var(--amber-ink); line-height:1.85; }
.pt-mark{ background:var(--marker); color:var(--marker-ink); font-weight:700; padding:2px 5px; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ---- info box (なぜ必要) ---- */
.pt-info{ border:0.5px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  padding:15px 16px; margin-top:14px; display:flex; gap:11px; align-items:flex-start; }
.pt-info .ii{ font-size:19px; color:var(--muted); flex-shrink:0; margin-top:1px; }
.pt-info .it{ font-size:13px; color:var(--muted); line-height:1.75; }
.pt-strong{ color:var(--ink); font-weight:600; }

/* ---- FAQ accordion ---- */
.pt-faq{ margin-top:16px; }
.pt-acc{ border:0.5px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.pt-acc details{ border-bottom:0.5px solid var(--line); }
.pt-acc details:last-child{ border-bottom:0; }
.pt-acc summary{ list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; color:var(--ink); }
.pt-acc summary::-webkit-details-marker{ display:none; }
.pt-acc summary .chev{ font-size:16px; color:var(--faint); transition:transform .15s; }
.pt-acc details[open] summary{ background:var(--surface); font-weight:600; }
.pt-acc details[open] summary .chev{ transform:rotate(180deg); }
.pt-acc .ans{ padding:0 16px 14px; font-size:13px; color:var(--muted); line-height:1.75; background:var(--surface); }
.pt-solve{ font-size:12px; color:var(--faint); margin-top:10px; text-align:center; }
.pt-solve a{ color:var(--muted); }

/* ---- download file rows ---- */
.pt-files{ border:0.5px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:14px; }
.pt-file{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:0.5px solid var(--line); }
.pt-file:last-child{ border-bottom:0; }
.pt-file .fl{ display:flex; align-items:center; gap:11px; }
.pt-file .fi{ font-size:19px; color:var(--muted); }
.pt-file .fn{ font-size:13px; font-weight:600; } .pt-file .fp{ font-size:11px; color:var(--faint); font-family:monospace; }
.pt-badge{ font-size:10px; color:#b45309; background:var(--amber-bg); border:0.5px solid var(--amber-bd); border-radius:4px; padding:1px 5px; margin-left:4px; }
.pt-ghost{ font-size:12px; color:var(--muted); border:0.5px solid var(--line-strong); border-radius:var(--radius); padding:6px 11px; text-decoration:none; }
.pt-code{ background:var(--surface); border:0.5px solid var(--line); border-radius:8px; padding:11px 13px;
  font-family:monospace; font-size:12px; color:var(--ink); line-height:1.9; overflow-x:auto; white-space:nowrap; }
.pt-ta{ width:100%; font-family:monospace; font-size:12px; border:0.5px solid var(--line-strong); border-radius:var(--radius); padding:10px 12px; color:var(--ink); background:#fff; resize:vertical; }

/* ---- download cards (連結/個別) ---- */
.pt-dl{ border:0.5px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px; margin-top:12px; }
.pt-dl-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.pt-dl-ttl{ font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:7px; }
.pt-dl-note{ font-size:12px; color:var(--muted); line-height:1.7; margin-bottom:9px; }
.pt-dl-meta{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--faint); margin-top:7px; word-break:break-all; }
.pt-copy{ font-size:12px; color:var(--muted); background:#fff; border:0.5px solid var(--line-strong); border-radius:var(--radius); padding:6px 13px; cursor:pointer; white-space:nowrap; }
.pt-copy:hover{ background:var(--surface); color:var(--ink); }
.pt-badge-ok{ font-size:10px; color:var(--green-ink); background:var(--green-bg); border:0.5px solid var(--green-bd); border-radius:4px; padding:1px 6px; margin-left:4px; font-weight:500; }
.pt-badge-req{ font-size:10px; color:#b45309; background:var(--amber-bg); border:0.5px solid var(--amber-bd); border-radius:4px; padding:1px 6px; margin-left:4px; font-weight:500; }
.pt-more{ border:0.5px solid var(--line); border-radius:var(--radius-lg); margin-top:12px; overflow:hidden; }
.pt-more > summary{ list-style:none; cursor:pointer; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:var(--ink); }
.pt-more > summary::-webkit-details-marker{ display:none; }
.pt-more > summary .chev{ color:var(--faint); transition:transform .15s; }
.pt-more[open] > summary{ border-bottom:0.5px solid var(--line); background:var(--surface); font-weight:600; }
.pt-more[open] > summary .chev{ transform:rotate(180deg); }
.pt-more-body{ padding:14px 16px; }
.pt-ic{ font-family:monospace; font-size:12px; background:var(--surface-2); border:0.5px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--ink); }

/* ---- footer ---- */
.pt-foot{ background:var(--surface); border-top:0.5px solid var(--line); padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pt-foot .lnks{ display:flex; gap:16px; flex-wrap:wrap; }
.pt-foot a{ font-size:12px; color:var(--muted); text-decoration:none; }
.pt-foot .cp{ font-size:11px; color:var(--faint); }

/* ---- responsive ---- */
@media(max-width:600px){
  .pt-quick{ grid-template-columns:repeat(2,1fr); }
  .pt-grid2{ grid-template-columns:1fr; }
  .pt-acct .em,.pt-acct .co{ display:none; }
  .pt-body{ padding:22px 16px; } .pt-head{ padding:12px 16px; } .pt-tabs{ margin:0 16px; }
}

/* ---- spacing polish（余白ギチギチ回避。カード間/セクション間/本文に息継ぎを追加）---- */
.pt-body{ padding:24px 22px 28px; }
.pt-content{ margin-top:22px; }
.pt-hero{ padding:20px; }
.pt-quick{ margin-top:16px; gap:12px; }
.pt-grid2{ margin-top:16px; gap:14px; }
.pt-panel{ padding:18px; }
.pt-faq{ margin-top:28px; }
.pt-info{ margin-top:18px; padding:16px 18px; }
.pt-warn{ margin-top:20px; padding:16px 18px; }
.pt-dl{ padding:18px; margin-top:18px; }
.pt-dl-head{ margin-bottom:11px; }
.pt-dl-note{ margin-bottom:12px; }
.pt-dl-meta{ margin-top:10px; gap:4px; }
.pt-more{ margin-top:18px; }
.pt-more-body{ padding:16px 18px; }
.pt-acc summary{ padding:15px 18px; }
.pt-acc .ans{ padding:2px 18px 16px; }
.pt-section-h{ margin-bottom:11px; }
@media(max-width:600px){ .pt-body{ padding:22px 16px 26px; } }


/* ---- 2026-10-08 幅拡張＋奥行き（PCで狭く/平板に見えない。720→940・淡い影） ---- */
.pt-wrap{ max-width:1080px; }
.pt-card{ box-shadow:0 1px 2px rgba(31,29,28,.04), 0 12px 32px -16px rgba(31,29,28,.12); }
@media(max-width:600px){ .pt-wrap{ margin:14px auto; padding:0 12px; } }


/* ---- 2026-10-08 ヒーロー装飾/パンくず/イラスト(フェーズ1・layout.phpとセット) ---- */
.pt-herobar{ position:relative; overflow:hidden; border-bottom:0.5px solid var(--line); background:radial-gradient(130% 160% at 88% -35%, #fbeced 0%, rgba(251,236,237,0) 55%), #fff; padding:13px 22px 15px; }
.pt-herobar .pt-subbar{ padding:0; border-bottom:none; position:relative; z-index:1; }
.pt-bc{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--faint); margin-bottom:10px; flex-wrap:wrap; }
.pt-bc a{ color:var(--faint); text-decoration:none; } .pt-bc a:hover{ color:var(--muted); }
.pt-bc .sp{ opacity:.5; } .pt-bc .cur{ color:var(--muted); }
.pt-cnart{ position:absolute; right:14px; top:4px; width:196px; height:120px; z-index:0; opacity:.9; pointer-events:none; }
@media(max-width:640px){ .pt-cnart{ display:none; } }
.pt-hero{ position:relative; overflow:hidden; }
.pt-hero .ic, .pt-hero > div{ position:relative; z-index:1; }
.pt-na-art{ position:absolute; right:16px; bottom:-8px; width:148px; height:108px; z-index:0; opacity:.85; pointer-events:none; }
@media(max-width:780px){ .pt-na-art{ display:none; } }