/*
Theme Name: PortalMax
Theme URI: https://example.com/
Author: CreativeBank
Description: Web制作会社ポータルサイトテーマ
Version: 1.0
Text Domain: portalmax
*/
<style>
.pm-compare-btn{ border:1px solid #005BAC; color:#005BAC; background:#fff; padding:8px 12px; border-radius:5px; text-decoration:none; margin-right:8px; }
.pm-compare-btn.is-selected{ background:#005BAC; color:#fff; }
</style>

.pm-compare-btn{
  border:1px solid #005BAC; color:#005BAC; background:#fff;
  padding:10px 12px; border-radius:5px; text-decoration:none; margin-right:10px;
  font-size:14px;
}
.pm-compare-btn.is-selected{ background:#005BAC; color:#fff; }

/* ===== PortalMax Design System ===== */
:root{
  --pm-bg:#0b1526;          /* 背景(濃藍) */
  --pm-card:#0f1b33;        /* カード紺 */
  --pm-elev:#122244;        /* カード強調 */
  --pm-line:#1b2b4a;        /* 線 */
  --pm-key:#1f6fff;         /* キー(青) */
  --pm-key-2:#3b82f6;       /* 挿し色 */
  --pm-ok:#10b981;          /* OK */
  --pm-warn:#f59e0b;        /* 注意 */
  --pm-ng:#ef4444;          /* NG */
  --pm-t:#f5f8ff;           /* テキスト */
  --pm-t-2:#cfe0ff;         /* サブ文字 */
  --pm-muted:#90a0c0;       /* 補助 */

  --pm-r:16px;              /* 角丸 */
  --pm-gap:20px;            /* 余白 */
  --pm-shadow:0 10px 30px rgba(0,0,0,.35);
}

html,body{background:var(--pm-bg); color:var(--pm-t); font-family: "Inter", "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;}

/* container */
.pm-container{max-width:1120px; margin-inline:auto; padding:24px 20px;}
.pm-wide{max-width:1280px;}
.pm-narrow{max-width:880px;}

/* hero */
.pm-hero{position:relative; padding:56px 0; background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.25), transparent 60%), radial-gradient(1000px 520px at 110% 0%, rgba(17,24,39,.6), transparent 60%);}
.pm-hero .pm-title{font-size:clamp(28px,4vw,48px); font-weight:800; letter-spacing:.2px; margin:0 0 10px;}
.pm-hero .pm-lead{color:var(--pm-t-2); font-size:clamp(15px,1.8vw,18px);}
.pm-hero .pm-ctaRow{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap;}
.pm-hero .pm-btn{padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid transparent; transition:.2s;}
.pm-hero .pm-btn.primary{background:var(--pm-key); color:#fff; box-shadow:0 8px 20px rgba(31,111,255,.35);}
.pm-hero .pm-btn.outline{border-color:var(--pm-key-2); color:var(--pm-t);}

/* cards */
.pm-card{background:linear-gradient(180deg, var(--pm-card), #0b1933 60%); border:1px solid var(--pm-line); border-radius:var(--pm-r); box-shadow: var(--pm-shadow);}
.pm-card .pm-cardIn{padding:18px;}
.pm-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.pm-h2{font-size:22px; font-weight:800; margin:0;}
.pm-h3{font-size:18px; font-weight:700; margin:0 0 6px;}
.pm-meta{color:var(--pm-muted); font-size:13px;}
.pm-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.pm-tag{font-size:12px; padding:5px 10px; border-radius:999px; background:#0f2547; border:1px solid #1f3761; color:#cfe0ff;}
.pm-kpi{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px;}
.pm-kpi .itm{background:#0d223f; padding:8px 12px; border:1px solid #1a2f55; border-radius:10px; font-weight:700;}
.pm-kpi .ok{color:var(--pm-ok)} .pm-kpi .warn{color:var(--pm-warn)}
.pm-price{font-size:15px; font-weight:800;}

/* grids */
.pm-grid{display:grid; gap:16px;}
.pm-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pm-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1024px){.pm-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.pm-grid.cols-3,.pm-grid.cols-2{grid-template-columns:1fr;}}

/* buttons / pills */
.pm-btn{display:inline-flex; align-items:center; gap:8px; background:#0d2b57; border:1px solid #1d3d73; color:#e8f0ff; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700;}
.pm-btn:hover{opacity:.9}
.pm-btn.primary{background:var(--pm-key); border-color:transparent; color:#fff;}
.pm-pill{display:inline-flex; padding:8px 12px; border-radius:999px; border:1px solid #2a3f6d; background:#0d2142; color:#cfe0ff;}

/* toolbar */
.pm-toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0;}
.pm-toolbar .seg{display:flex; gap:8px; background:#0c1a34; padding:8px; border-radius:999px; border:1px solid #1a2d57;}
.pm-toolbar .seg a{padding:8px 14px; border-radius:999px; text-decoration:none; color:#cfe0ff; border:1px solid transparent;}
.pm-toolbar .seg a.is-active{background:var(--pm-key); color:#fff;}

/* table (compare) */
.pm-table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid #1a2f55;}
.pm-table th,.pm-table td{padding:14px 16px; border-bottom:1px solid #15294d;}
.pm-table th{background:#0e2245; text-align:left; color:#d9e6ff;}
.pm-table tr:nth-child(even) td{background:#0b1b39;}

/* breadcrumbs(簡易) */
.pm-bc{display:flex; gap:8px; color:#98a8c8; font-size:13px; margin:12px 0;}
.pm-bc a{color:#cfe0ff; text-decoration:none}

/* pagination */
.pm-pager{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0;}
.pm-pager a, .pm-pager span{padding:8px 12px; border-radius:8px; border:1px solid #1a2f55; background:#0e2245; color:#d9e6ff; text-decoration:none;}
.pm-pager .current{background:var(--pm-key); border-color:transparent; color:#fff;}

/* ===== Company Card (outer frame bigger) ===== */
.company-card{
  background:#0c2042;                 /* 濃紺 */
  border:2px solid #173a7a;           /* しっかり見える枠線 */
  border-radius:14px;
  box-shadow:0 4px 14px rgba(8,25,56,.18);
  padding:14px;                        /* 外枠の内側に余白 → ボタンが端にくっつかない */
  color:#e9f2ff;
}

/* タイトル＆本体の余白 */
.company-info{ padding:6px 6px 12px; }
.company-title{ margin:0 0 8px; font-size:18px; font-weight:800; line-height:1.3; }
.company-title a{ color:#fff; text-decoration:none; }
.company-title a:hover{ text-decoration:underline; }

/* フッター部：上に仕切り線＋余白 */
.company-footer{
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid #1b3f80;       /* 背景に馴染む仕切り線 */
}

/* ボタン行：左右にゆとりを持たせる */
.btn-wrap{
  display:flex;
  gap:10px;                            /* ボタン間にすき間 */
  align-items:center;
}

/* 2つのボタンを同じ大きさで横並び（スマホは縦並び） */
.btn-wrap a{
  flex:1 1 0;                          /* 均等幅 */
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:44px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid #385da3;
  background:#113264;
  color:#eaf1ff;
}
.btn-wrap a:first-child{                /* 「お気に入りから外す」をやや落ち着いた色に */
  background:#0b1f3f;
  border-color:#193a77;
}
.btn-wrap a:hover{ opacity:.95; }

/* スマホで縦積み */
@media (max-width:640px){
  .btn-wrap{ flex-direction:column; }
  .btn-wrap a{ width:100%; }
}

/* ===== 強制上書き：カード枠・背景・影 ===== */
.pm-wrap .pm-grid { gap: 16px !important; }
.pm-wrap .pm-card{
  background:#0c2042 !important;
  border:1.5px solid #173a7a !important;
  border-radius:14px !important;
  color:#e9f2ff !important;
  box-shadow:0 6px 18px rgba(6,18,36,.18) !important;
  overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(0); transition:.2s ease;
}
.pm-wrap .pm-card:hover{
  border-color:#2a5fb8 !important;
  box-shadow:0 10px 24px rgba(14,42,84,.28) !important;
  transform:translateY(-3px);
}
.pm-wrap .pm-card .thumb{ width:100%; aspect-ratio:16/9; background:#0e2245 !important; display:block; }
.pm-wrap .pm-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); }
.pm-wrap .pm-cardIn{ padding:16px 16px 12px !important; }

/* リンク色が青に戻るのを抑止 */
.pm-wrap .pm-card .pm-title{ margin:2px 0 8px; font-size:18px; line-height:1.35; font-weight:800; }
.pm-wrap .pm-card .pm-title a{
  color:#fff !important;
  text-decoration:none !important;
}
.pm-wrap .pm-card .pm-title a:hover{ text-decoration:underline !important; }

/* ターム(タグ)をくっきり */
.pm-wrap .pm-card .pm-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pm-wrap .pm-card .pm-tag{
  display:inline-flex; align-items:center;
  padding:5px 10px; font-size:12px; line-height:1;
  border-radius:999px; background:#0a1e3f !important; color:#e8f1ff !important;
  border:1.5px solid #3a65b8 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* KPIピルも視認性UP */
.pm-wrap .pm-card .pm-kpi{
  background:#102750 !important; border:1px solid #274c96 !important; color:#cfe0ff !important;
  padding:6px 10px; border-radius:999px; font-size:12px;
}

/* フッターの仕切り・背景を強める */
.pm-wrap .pm-card .pm-foot{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#0a1d3c !important; border-top:1.5px solid #1e4b99 !important;
}

/* ボタンの勝ち負けを固定 */
.pm-wrap .pm-btn{ border:1px solid #385da3 !important; background:#113264 !important; color:#eaf1ff !important; }
.pm-wrap .pm-btn.primary{ background:#1d5ed6 !important; border-color:#1d5ed6 !important; color:#fff !important; }
.pm-wrap .pm-btn.ghost{ background:#0e2245 !important; border-color:#1b3f80 !important; color:#cfe0ff !important; }
.pm-wrap .pm-btn.light{ background:#0b1f3f !important; border-color:#193a77 !important; color:#cfe0ff !important; }

/* アクセシビリティ：フォーカスリング */
.pm-wrap .pm-btn:focus-visible,
.pm-wrap .pm-iconbtn:focus-visible,
.pm-wrap .pm-title a:focus-visible{ outline:2px solid #7aa2ff; outline-offset:2px; }

/* ===== 既存マークアップの保険（.company-card でも箱にする） ===== */
.pm-wrap .company-card{
  background:#0c2042; border:1.5px solid #173a7a; border-radius:14px;
  color:#e9f2ff; padding:16px; box-shadow:0 6px 18px rgba(6,18,36,.18); margin-bottom:16px;
}
.pm-wrap .company-card .company-title a{ color:#fff !important; text-decoration:none !important; }
.pm-wrap .company-card .company-title a:hover{ text-decoration:underline !important; }
.pm-wrap .company-card .btn-wrap a{ display:inline-flex; align-items:center; gap:6px; margin-right:8px; }

/* ===== 見やすさ修正：ヘッダーの文字色を濃紺、背景は白に統一 ===== */
.pmcmp-head .cell{
  background:#fff !important;
  color:#0b3b66 !important; /* 濃紺 */
  border-bottom:1px solid var(--line-strong);
}

/* ヘッダ内のタイトルリンク・タグの色も濃紺系に */
.pmcmp-head .pmcmp-title,
.pmcmp-head .pmcmp-title a{
  color:#0b3b66 !important;
  border-bottom-color:transparent !important;
}
.pmcmp-head .pmcmp-title a:hover{
  border-bottom-color:#0b3b66 !important;
}

/* ===== 濃色ボタン（白文字） ===== */
.pm-btn.dark{
  background:#0e2245;          /* 濃い青 */
  border-color:#1b3f80;
  color:#fff;
}
.pm-btn.dark:hover{ opacity:.95; }