/* =====================================================
   副業ジャッジ — 判定データベース
   白背景＋紺1色＋グレー罫線の実用系レイアウト
   ===================================================== */
:root{
  --main:#2f4f6f;          /* 低彩度の紺 */
  --main-dark:#243c54;
  --link:#0044cc;
  --ink:#222222;
  --ink-soft:#555555;
  --ink-faint:#888888;
  --line:#cccccc;
  --line-light:#dddddd;
  --bg-soft:#f6f6f6;
  /* 判定3色（低彩度） */
  --shiro:#3c7a4e;
  --shiro-bg:#f2f7f3;
  --gray:#8a6a1f;
  --gray-bg:#faf6e9;
  --kuro:#a23b3b;
  --kuro-bg:#faf1f1;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#fff;
  font-size:15px;
  line-height:1.75;
}
a{color:var(--link);text-decoration:underline;}
a:hover{color:#c00;}
img{max-width:100%;display:block;}

.wrap{max-width:1000px;margin:0 auto;padding:0 16px;}

/* =====================================================
   ヘッダー
   ===================================================== */
.appbar{
  background:#fff;
  border-top:4px solid var(--main);
  border-bottom:1px solid var(--line);
}
.appbar-inner{
  max-width:1000px;margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:12px 16px;
}
.brand{flex:none;text-decoration:none;color:var(--main);}
.brand:hover{color:var(--main);}
.brand .name{font-weight:bold;font-size:1.25rem;letter-spacing:.02em;}

.appbar-search{flex:1;min-width:0;max-width:360px;}
.appbar-search input{
  width:100%;border:1px solid var(--line);border-radius:2px;
  background:#fff;color:var(--ink);
  font-size:.85rem;font-family:var(--font);
  padding:5px 9px;
}
.appbar-search input::placeholder{color:var(--ink-faint);}

.appbar-nav{display:flex;align-items:center;flex:none;margin-left:auto;}
.appbar-nav a{
  color:var(--link);font-size:.85rem;
  padding:0 12px;white-space:nowrap;
  border-left:1px solid var(--line-light);
}
.appbar-nav a:first-child{border-left:none;}
.appbar-nav a.active{color:var(--ink);font-weight:bold;text-decoration:none;}

/* PR表記（ヘッダー直下・極小） */
.pr-note{
  max-width:1000px;margin:0 auto;
  padding:4px 16px 0;
  font-size:10.5px;color:var(--ink-faint);
}

/* =====================================================
   ヒーロー（index：検索＋お知らせ）
   ===================================================== */
.hero{padding:26px 0 8px;}
.hero-grid{
  display:grid;grid-template-columns:1fr;gap:20px;
  margin-bottom:18px;
}
.hero-copy .app-label{
  display:block;font-size:.78rem;color:var(--ink-soft);margin-bottom:8px;
}
.hero-copy .app-label:before{content:"■ ";color:var(--main);}
.hero-copy h1{
  font-size:1.55rem;line-height:1.45;margin:0 0 10px;font-weight:bold;
  color:var(--main-dark);
}
.hero-copy p{margin:0 0 16px;color:var(--ink);font-size:.92rem;max-width:560px;}

.hero-search{max-width:540px;}
.hero-search input{
  width:72%;font-family:var(--font);
  border:1px solid #999;border-radius:2px;
  padding:7px 10px;font-size:.95rem;
  vertical-align:middle;
}
.hero-search .search-btn{
  font-family:var(--font);font-size:.88rem;
  border:1px solid #999;border-radius:2px;
  background:#eee;color:var(--ink);
  padding:7px 16px;cursor:pointer;
  vertical-align:middle;margin-left:4px;
}
.hero-search .search-btn:hover{background:#e2e2e2;}
.hero-search .search-hint{
  margin:7px 2px 0;font-size:.74rem;color:var(--ink-faint);
}

/* お知らせ欄（ヒーロー右） */
.hero-news{
  border:1px solid var(--line);
  padding:12px 14px 10px;align-self:start;background:#fff;
}
.hero-news h2{
  margin:0 0 6px;font-size:.92rem;font-weight:bold;color:var(--main-dark);
  border-bottom:1px solid var(--line-light);padding-bottom:5px;
}
.hero-news ul{list-style:none;margin:0;padding:0;}
.hero-news li{
  font-size:.78rem;color:var(--ink-soft);line-height:1.65;
  padding:6px 0;border-top:1px dotted var(--line-light);
}
.hero-news li:first-child{border-top:none;padding-top:2px;}
.hero-news .d{
  display:inline-block;font-weight:bold;color:var(--ink);
  margin-right:7px;white-space:nowrap;
}

/* 統計（罫線区切りの1行） */
.stats-line{
  display:flex;flex-wrap:wrap;gap:4px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:8px 2px;font-size:.88rem;color:var(--ink-soft);
}
.stats-line span{padding:0 14px;border-left:1px solid var(--line-light);}
.stats-line span:first-child{border-left:none;padding-left:2px;}
.stats-line b{color:var(--main-dark);font-size:1.05rem;margin:0 2px;}
.stats-note{
  margin:7px 2px 0;font-size:.72rem;color:var(--ink-faint);line-height:1.7;
}

/* =====================================================
   セクション共通
   ===================================================== */
.section{padding:20px 0;}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.section-head h2{
  font-size:1.12rem;margin:0;font-weight:bold;color:var(--main-dark);
  border-left:5px solid var(--main);padding:1px 0 1px 10px;
  margin-bottom:6px;
}
.section-head .sub{color:var(--ink-faint);font-size:.78rem;}
.link-more{font-size:.82rem;white-space:nowrap;}

.panel{
  background:#fff;border:1px solid var(--line);
}

/* =====================================================
   判定バッジ
   ===================================================== */
.verdict{
  display:inline-block;text-align:center;
  font-weight:bold;line-height:1;
  font-size:.78rem;padding:5px 0;width:56px;flex:none;
  border:1px solid;border-radius:2px;
}
.v-shiro{color:var(--shiro);background:var(--shiro-bg);border-color:var(--shiro);}
.v-gray{color:var(--gray);background:var(--gray-bg);border-color:var(--gray);}
.v-kuro{color:var(--kuro);background:var(--kuro-bg);border-color:var(--kuro);}

/* 危険度の文字バッジ */
.risk-tag{
  display:inline-block;font-size:.68rem;font-weight:bold;line-height:1;
  border:1px solid;border-radius:2px;padding:2px 5px;
  vertical-align:1px;margin-left:5px;background:#fff;
}
.r-high{color:var(--kuro);border-color:var(--kuro);}
.r-mid{color:var(--gray);border-color:var(--gray);}
.r-low{color:var(--shiro);border-color:var(--shiro);}

/* =====================================================
   判定テーブル（行リスト）
   ===================================================== */
.db-note{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-soft);font-size:.72rem;color:var(--ink-soft);
  flex-wrap:wrap;
}
.db-note .cnt b{color:var(--ink);font-size:.88rem;}

.db-head{
  display:grid;
  grid-template-columns:56px 116px 1fr 80px 90px;
  gap:12px;align-items:center;
  padding:6px 14px;background:#ececec;border-bottom:1px solid var(--line);
  font-size:.7rem;font-weight:bold;color:var(--ink-soft);
}

.db-row{
  display:grid;
  grid-template-columns:56px 116px 1fr 80px 90px;
  gap:12px;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--line-light);
  color:inherit;text-decoration:none;
}
.db-row:last-child{border-bottom:none;}
a.db-row:hover{background:#f4f7fa;}
.db-cat{
  font-size:.72rem;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:2px;
  padding:1px 6px;text-align:center;background:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-title{min-width:0;}
.db-title b{
  display:block;font-size:.9rem;font-weight:bold;line-height:1.55;
}
a.db-row .db-title b{color:var(--link);}
a.db-row:hover .db-title b{text-decoration:underline;}
.db-title small{display:block;font-size:.72rem;color:var(--ink-faint);margin-top:1px;}
.db-date{
  font-size:.74rem;color:var(--ink-soft);white-space:nowrap;
}
.db-date small{display:block;font-size:.62rem;color:var(--ink-faint);}

.db-score{white-space:nowrap;}
.score-num{font-weight:bold;font-size:.95rem;}
.score-num.s-low{color:var(--shiro);}
.score-num.s-mid{color:var(--gray);}
.score-num.s-high{color:var(--kuro);}

/* 記事リンクの無い判定行（準備中・保留など） */
.db-row-plain .db-title b{color:var(--ink-soft);font-weight:normal;}
.db-title .prep{
  display:inline-block;font-size:.64rem;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:2px;
  padding:1px 5px;margin-left:6px;vertical-align:1px;white-space:nowrap;
  background:var(--bg-soft);
}

/* 検索準備中の注記 */
.search-note{
  margin:4px 2px 0;font-size:.72rem;color:var(--ink-faint);
}

/* =====================================================
   カテゴリ絞り込みタブ
   ===================================================== */
.tabs{
  display:flex;gap:5px;flex-wrap:wrap;
  padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg-soft);
}
.tab{
  font-size:.78rem;color:var(--link);
  padding:3px 10px;border:1px solid var(--line);border-radius:2px;
  background:#fff;text-decoration:none;
}
.tab:hover{text-decoration:underline;}
.tab.on{background:var(--main);color:#fff;border-color:var(--main);text-decoration:none;}
.tab .n{font-size:.68rem;opacity:.75;margin-left:3px;}

/* =====================================================
   判定基準：検証フロー（番号付きリスト）
   ===================================================== */
.flow{
  margin:0;padding:14px 16px 14px 40px;
  border:1px solid var(--line);background:#fff;
}
.flow li{margin:7px 0;font-size:.9rem;line-height:1.8;}
.flow li b{color:var(--main-dark);}

/* 判定3色の凡例 */
.legend{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:14px;
  border:1px solid var(--line);
}
.legend-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;border-top:1px solid var(--line-light);
}
.legend-item:first-child{border-top:none;}
.legend-item .verdict{margin-top:2px;}
.legend-item b{display:block;font-size:.88rem;}
.legend-item p{margin:1px 0 0;font-size:.78rem;color:var(--ink-soft);line-height:1.7;}

/* =====================================================
   ページ見出し（一覧・About）
   ===================================================== */
.page-head{padding:22px 0 4px;}
.page-head .crumbs{font-size:.74rem;color:var(--ink-faint);margin-bottom:8px;}
.page-head h1{
  font-size:1.4rem;margin:0 0 8px;font-weight:bold;line-height:1.4;
  color:var(--main-dark);
  border-left:6px solid var(--main);border-bottom:1px solid var(--line);
  padding:2px 0 6px 12px;
}
.page-head p{font-size:.88rem;margin:0;color:var(--ink);max-width:680px;}

/* =====================================================
   記事ページ
   ===================================================== */
.article-head{padding:22px 0 0;}
.crumbs{font-size:.74rem;color:var(--ink-faint);margin-bottom:10px;}
.article-head h1{
  font-size:1.4rem;line-height:1.55;margin:6px 0 10px;font-weight:bold;
  color:var(--main-dark);max-width:780px;
  border-left:6px solid var(--main);border-bottom:1px solid var(--line);
  padding:2px 0 8px 12px;
}
.article-meta{
  display:flex;align-items:center;gap:5px 14px;flex-wrap:wrap;
  font-size:.76rem;color:var(--ink-soft);margin-bottom:16px;
}
.article-meta .db-cat{padding:1px 8px;}
.byline b{color:var(--ink);}

/* 判定サマリーパネル */
.judge-panel{
  border:1px solid var(--line);
  background:#fff;max-width:780px;margin:0 0 26px;
}
.judge-top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.judge-top.jt-shiro{background:var(--shiro-bg);}
.judge-top.jt-gray{background:var(--gray-bg);}
.judge-top.jt-kuro{background:var(--kuro-bg);}
.verdict-xl{
  flex:none;background:#fff;
  border:2px solid;border-radius:2px;
  padding:10px 16px;font-weight:bold;text-align:center;
}
.verdict-xl .v-label{font-size:1.35rem;letter-spacing:.08em;line-height:1.2;}
.vx-shiro{color:var(--shiro);border-color:var(--shiro);}
.vx-gray{color:var(--gray);border-color:var(--gray);}
.vx-kuro{color:var(--kuro);border-color:var(--kuro);}
.judge-info{flex:1;min-width:220px;}
.judge-info .j-title{font-size:.7rem;font-weight:bold;color:var(--ink-soft);margin:0 0 2px;}
.judge-info .j-verdict{font-size:1rem;font-weight:bold;margin:0 0 6px;line-height:1.55;}
.judge-score{display:flex;align-items:baseline;gap:8px;}
.judge-score .lbl{font-size:.72rem;font-weight:bold;color:var(--ink-soft);flex:none;}
.judge-score .score-num{font-size:1.2rem;}
.judge-score .den{font-size:.72rem;color:var(--ink-faint);}

/* チェック項目表 */
.check-table{width:100%;border-collapse:collapse;font-size:.84rem;}
.check-table th,.check-table td{
  text-align:left;padding:8px 16px;border-top:1px solid var(--line-light);
}
.check-table tr:first-child th,.check-table tr:first-child td{border-top:none;}
.check-table th{
  font-weight:normal;color:var(--ink-soft);width:46%;white-space:nowrap;
  background:var(--bg-soft);font-size:.8rem;
}
.check-table td{color:var(--ink);}
.ck{font-weight:bold;margin-right:7px;}
.ck-ok{color:var(--shiro);}
.ck-ng{color:var(--kuro);}

/* 運営者の肉声メモ（判定サマリー下） */
.judge-comment{
  margin:0;padding:9px 16px;font-size:.84rem;line-height:1.8;
  color:var(--ink);border-top:1px dotted var(--line);
  background:#fffdf2;
}
.judge-comment .who{
  font-size:.7rem;font-weight:bold;color:var(--ink-faint);margin-right:8px;
}
.judge-foot{
  padding:7px 16px 9px;font-size:.7rem;color:var(--ink-faint);
  border-top:1px solid var(--line-light);background:var(--bg-soft);margin:0;
}

/* 本文 */
.prose{max-width:780px;margin:0;padding:4px 0 10px;font-size:15px;line-height:1.9;}
.prose .lead{
  font-size:.95rem;color:var(--ink);
  border:1px solid var(--line);border-left:4px solid var(--main);
  padding:12px 16px;line-height:1.85;margin:0 0 24px;background:#fff;
}
.prose h2{
  font-size:1.14rem;font-weight:bold;margin:34px 0 12px;color:var(--main-dark);
  border-left:5px solid var(--main);border-bottom:1px solid var(--line);
  padding:1px 0 6px 10px;
}
.prose h3{
  font-size:1rem;font-weight:bold;margin:24px 0 8px;color:var(--main-dark);
}
.prose p{margin:0 0 16px;}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.4em;}
.prose li{margin:6px 0;}
.prose strong{font-weight:bold;}
.prose .note{
  font-size:.82rem;color:var(--ink-soft);background:var(--bg-soft);
  border:1px dashed var(--line);
  padding:9px 13px;margin:0 0 18px;line-height:1.75;
}

.callout{
  padding:12px 15px;margin:22px 0;border:1px solid;
}
.callout .ttl{font-weight:bold;margin-bottom:4px;font-size:.9rem;}
.callout.warn{background:var(--gray-bg);border-color:#cdb87a;}
.callout.warn .ttl{color:var(--gray);}
.callout.point{background:var(--shiro-bg);border-color:#9dbda6;}
.callout.point .ttl{color:var(--shiro);}
.callout p:last-child{margin-bottom:0;}

.checklist{list-style:none;padding:0;margin:0 0 16px;}
.checklist li{position:relative;padding-left:22px;margin:8px 0;}
.checklist li:before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--shiro);font-weight:bold;
}

.summary-box{
  border:1px solid var(--line);border-top:3px solid var(--main);
  padding:16px 18px;margin:28px 0;background:#fff;
}
.summary-box h2{
  border:none;margin:0 0 10px;padding:0;font-size:1.02rem;color:var(--main-dark);
}

/* 読者続報などの追記ブロック */
.postscript{
  max-width:780px;margin:24px 0 0;
  border:1px solid var(--line);border-left:4px solid var(--gray);
  padding:11px 15px;background:#fffdf2;
}
.postscript b{font-size:.82rem;color:var(--gray);}
.postscript p{margin:5px 0 0;font-size:.86rem;line-height:1.85;}

/* 関連判定（行リスト型） */
.related{max-width:780px;margin:30px 0 0;}
.related h2{
  font-size:1rem;font-weight:bold;margin:0 0 10px;color:var(--main-dark);
  border-left:5px solid var(--main);padding-left:10px;
}
.related .db-row{grid-template-columns:56px 1fr 90px;}

/* =====================================================
   About：運営とデータポリシー
   ===================================================== */
.svc-grid{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 22px;border:1px solid var(--line);}
.svc{
  padding:14px 16px;border-top:1px solid var(--line-light);
}
.svc:first-child{border-top:none;}
.svc .svc-no{
  display:inline-block;font-weight:bold;color:var(--main);
  margin-right:6px;
}
.svc .svc-no:after{content:".";}
.svc b{font-size:.94rem;}
.svc p{margin:4px 0 0;font-size:.82rem;color:var(--ink-soft);line-height:1.8;}

.operator-mini{
  border:1px solid var(--line);
  padding:16px 18px;margin:0 0 22px;background:#fff;
}
.operator-mini .op-label{
  display:block;font-size:.7rem;color:var(--ink-faint);margin-bottom:4px;
}
.operator-mini h3{margin:0 0 2px;font-size:1.05rem;font-weight:bold;color:var(--main-dark);}
.operator-mini .op-title{margin:0 0 10px;font-size:.78rem;color:var(--ink-soft);border-bottom:1px solid var(--line-light);padding-bottom:8px;}
.operator-mini p{margin:0 0 8px;font-size:.86rem;color:var(--ink);line-height:1.85;}
.operator-mini p:last-of-type{margin-bottom:0;}
.operator-mini .op-note{font-size:.7rem;color:var(--ink-faint);}

.policy-block{
  border:1px solid var(--line);
  padding:14px 18px;margin-bottom:14px;background:#fff;
}
.policy-block h2{
  margin:0 0 10px;font-size:1.02rem;font-weight:bold;color:var(--main-dark);
  border-left:5px solid var(--main);padding-left:10px;
}
.policy-block p{margin:0 0 12px;font-size:.9rem;}
.policy-block p:last-child{margin-bottom:0;}

/* =====================================================
   フッター
   ===================================================== */
.site-footer{
  background:var(--bg-soft);color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding:26px 0 20px;margin-top:44px;font-size:.8rem;
}
.footer-top{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px;}
.footer-brand{font-weight:bold;color:var(--main-dark);font-size:.95rem;}
.site-footer p{margin:8px 0 0;font-size:.78rem;line-height:1.75;}
.footer-nav{display:flex;flex-direction:column;gap:4px;}
.footer-nav strong{color:var(--ink);font-size:.8rem;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:3px;}
.footer-nav a{font-size:.78rem;}
.footer-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.footer-legend .verdict{width:auto;padding:3px 10px;font-size:.7rem;}
.footnote-hand{
  border-top:1px dotted var(--line);
  padding-top:10px;font-size:.76rem;color:var(--ink-soft);
}
.disclaimer{border-top:1px solid var(--line);padding-top:12px;margin-top:10px;font-size:.72rem;color:var(--ink-faint);line-height:1.7;}
.copyright{margin-top:10px;font-size:.72rem;color:var(--ink-faint);}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media (min-width:768px){
  .hero-grid{grid-template-columns:1.2fr .8fr;gap:28px;}
  .legend{grid-template-columns:repeat(3,1fr);}
  .legend-item{border-top:none;border-left:1px solid var(--line-light);}
  .legend-item:first-child{border-left:none;}
  .svc-grid{grid-template-columns:repeat(3,1fr);}
  .svc{border-top:none;border-left:1px solid var(--line-light);}
  .svc:first-child{border-left:none;}
  .footer-top{grid-template-columns:2fr 1fr 1fr 1fr;}
  .article-head h1{font-size:1.55rem;}
}

@media (max-width:840px){
  .db-head{display:none;}
  .db-row{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "badge title"
      "badge meta"
      "badge score";
    row-gap:6px;
  }
  .db-row .verdict{grid-area:badge;align-self:start;margin-top:2px;}
  .db-row .db-title{grid-area:title;}
  .db-row .db-cat{grid-area:meta;justify-self:start;}
  .db-row .db-date{display:none;}
  .db-row .db-score{grid-area:score;}
  .related .db-row{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "badge title"
      "badge score";
  }
}

@media (max-width:680px){
  .appbar-inner{flex-wrap:wrap;gap:8px 10px;padding:10px 14px;}
  .appbar-search{order:3;flex-basis:100%;max-width:none;}
  .hero{padding-top:18px;}
  .hero-copy h1{font-size:1.28rem;}
  .hero-search input{width:100%;}
  .hero-search .search-btn{margin:6px 0 0;}
  .check-table th{white-space:normal;width:42%;}
  .check-table th,.check-table td{padding:8px 12px;}
  .judge-top{padding:12px;gap:12px;}
}