@charset "utf-8";
/* ==========================================================================
   TOC サポートサイト 共通スタイル
   /support/assets/support.css
   ページ固有の指定はここに書かず、各ページ側で追加すること。
   ========================================================================== */

:root{
  --brand:#F6600A;       /* コーポレートカラー（本体サイト準拠） */
  --brand-tint:#fff3ec;
  --navy:#1f3346;        /* 本文まわりの締め色 */
  --navy-soft:#2e4a63;
  --ink:#1d2329;         /* 本文 */
  --ink-mute:#5f6a75;    /* 補足 */
  --ink-faint:#8b959f;   /* 注記 */
  --line:#d8dde2;
  --line-soft:#e8ecef;
  --surface:#f4f6f8;
  --paper:#fff;
  --ok:#0d6b39;          /* そのまま使用可 */
  --ok-bg:#e6f2ea;
  --cond:#9a5a00;        /* 条件付き */
  --cond-bg:#fbf1e0;
  --no:#9d2f2f;          /* 使用不可 */
  --no-bg:#f9ecec;
  --link:#15558f;
  --focus:#f0a500;
  --w:1120px;
  --shadow:0 1px 2px rgba(31,51,70,.06);
  --r-lg:10px;   /* カード・パネル */
  --r-md:8px;    /* 見出しバー・フォーム部品 */
  --r-sm:4px;    /* タグ・ラベル */
}

*,*::before,*::after{box-sizing:border-box}
/* display を指定した要素にも hidden 属性を効かせる（JSの絞り込みが効かなくなるため必須） */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium",YuGothic,Meiryo,sans-serif;
  font-size:15px; line-height:1.7; color:var(--ink); background:var(--surface);
}
img{max-width:100%; height:auto; border:0}
a{color:var(--link)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
}

/* ---------- ヘッダー / フッター ---------- */
.sp-head{background:var(--paper); border-bottom:1px solid var(--line)}
.sp-head__in,.sp-foot__in,.sp-main,.sp-bar__in{max-width:var(--w); margin:0 auto; padding:0 20px}
.sp-head__in{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px}
.sp-head__logo img{width:230px}
.sp-head__tag{font-size:12px; color:var(--ink-mute); margin:0; line-height:1.5}
.sp-head__back{margin-left:auto; font-size:13px}

.sp-title{background:var(--brand); color:#fff; padding:20px 0 18px}
.sp-title__in{max-width:var(--w); margin:0 auto; padding:0 20px}
.sp-title__in{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.sp-title h1{margin:0; font-size:26px; font-weight:700; line-height:1.3; letter-spacing:.01em; flex:1 1 auto}
/* 帯の中は大きな白文字のみ。小さい文字はコントラストが足りないので帯の外に出す */
.sp-lead{max-width:var(--w); margin:0 auto; padding:12px 20px 0; font-size:13px; color:var(--ink-mute)}
.sp-help{
  flex:0 0 auto; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  color:#fff; background:transparent; border:2px solid #fff; border-radius:var(--r-md);
  padding:7px 16px;
}
.sp-help:hover{background:#fff; color:var(--brand)}
.sp-help::before{content:"?"; display:inline-block; width:17px; height:17px; line-height:17px;
  border-radius:50%; background:#fff; color:var(--brand); margin-right:7px; font-size:12px; text-align:center}
.sp-help:hover::before{background:var(--brand); color:#fff}

.sp-crumb{max-width:var(--w); margin:0 auto; padding:10px 20px; font-size:12px; color:var(--ink-mute)}
.sp-crumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.sp-crumb li::after{content:"›"; margin-left:6px; color:var(--ink-faint)}
.sp-crumb li:last-child::after{content:""}

.sp-main{padding:8px 20px 64px}
/* JSが効かない場合のアンカー移動用フォールバック */
.sp-panel{scroll-margin-top:96px}

.sp-foot{background:var(--paper); border-top:1px solid var(--line); padding:26px 0 34px}
.sp-foot__in{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.sp-foot__logo img{width:190px}
.sp-foot__links{margin:0; font-size:13px; display:flex; gap:16px; flex-wrap:wrap; list-style:none; padding:0}
.sp-foot__copy{width:100%; margin:0; font-size:11px; color:var(--ink-faint)}

/* ---------- 操作バー ---------- */
.sp-bar{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(31,51,70,.04)}
.sp-bar__in{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; padding-top:12px; padding-bottom:12px}
.sp-field{display:flex; flex-direction:column; gap:4px}
.sp-field label{font-size:11px; color:var(--ink-mute)}
.sp-field select,.sp-field input{
  font:inherit; font-size:14px; padding:7px 12px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); border-radius:var(--r-md); min-height:38px;
}
.sp-field--light select{min-width:270px; font-weight:600}
.sp-field--find input{min-width:220px}
.sp-toggle{display:flex; align-items:center; gap:7px; font-size:13px; padding-bottom:8px; cursor:pointer}
.sp-toggle input{width:17px; height:17px; accent-color:var(--navy)}
.sp-bar__count{margin:0 0 8px auto; font-size:12px; color:var(--ink-mute); text-align:right; line-height:1.5}
.sp-bar__count b{font-weight:700; color:var(--ink)}
.sp-bar__hidden{display:block; color:var(--cond)}

/* ---------- 灯体ヘッダ ---------- */
.sp-light{display:flex; gap:18px; align-items:center; flex-wrap:wrap; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; margin:20px 0 0}
.sp-light__ph{flex:0 0 108px; height:84px; background:var(--surface); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; overflow:hidden}
.sp-light__ph img{max-height:84px; object-fit:contain}
.sp-light__body{flex:1 1 300px}
.sp-light__name{margin:0; font-size:20px; line-height:1.35}
.sp-light__maker{font-size:13px; color:var(--ink-mute); font-weight:400; display:block}
.sp-light__meta{margin:6px 0 0; font-size:13px; color:var(--ink-mute)}
.sp-light__meta strong{color:var(--ink)}
.sp-light__link{margin:8px 0 0; font-size:14px}

/* ---------- 凡例 ---------- */
.sp-modal{width:min(680px,92vw); border:0; border-radius:var(--r-lg); padding:0; color:var(--ink); box-shadow:0 18px 50px rgba(20,30,40,.28)}
.sp-modal::backdrop{background:rgba(24,32,40,.55)}
.sp-modal__head{display:flex; align-items:center; gap:12px; background:var(--brand); color:#fff; padding:14px 20px}
.sp-modal__head h2{margin:0; font-size:19px; font-weight:700}
.sp-modal__close{margin-left:auto; font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  color:#fff; background:transparent; border:2px solid #fff; border-radius:var(--r-md); padding:4px 14px}
.sp-modal__close:hover{background:#fff; color:var(--brand)}
.sp-modal__body{padding:18px 20px 22px; max-height:min(66vh,560px); overflow:auto}
.sp-modal__body p{margin:0 0 12px; font-size:13.5px; line-height:1.8}
.sp-modal__body p:last-child{margin-bottom:0}
.sp-modal__body strong{color:var(--ink)}
.sp-legend{background:var(--brand-tint); border:1px solid #f6d5c2; border-radius:var(--r-lg); padding:12px 16px; margin:0 0 4px; font-size:13px}
.sp-legend h2{margin:0 0 8px; font-size:14px}
.sp-legend p{margin:0 0 6px; font-size:13px; color:var(--ink-mute)}
.sp-legend p:last-child{margin-bottom:0}

/* ---------- 種別見出し ---------- */
/* 種別見出し：白背景のカード群に対して反転バーで区切る */
.sp-group{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:34px 0 14px; padding:10px 16px; font-size:19px; font-weight:700;
  letter-spacing:.02em; color:#fff; background:var(--brand); border-radius:var(--r-md);
}
.sp-group span{margin-left:auto; font-size:13px; font-weight:700; color:#ffe2d2}

/* ---------- カード ---------- */
.sp-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:14px; margin:0; padding:0; list-style:none}
.sp-card{overflow-wrap:anywhere; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; position:relative}
.sp-card--ok{box-shadow:inset 0 3px 0 var(--ok)}
.sp-card--cond{box-shadow:inset 0 3px 0 var(--cond)}
.sp-card{transition:border-color .12s, box-shadow .12s}
.sp-card a.sp-card__hit{color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%}
.sp-card--ok:has(a.sp-card__hit):hover{border-color:var(--navy-soft); box-shadow:inset 0 3px 0 var(--ok), var(--shadow)}
.sp-card--cond:has(a.sp-card__hit):hover{border-color:var(--navy-soft); box-shadow:inset 0 3px 0 var(--cond), var(--shadow)}
.sp-card a.sp-card__hit:hover .sp-card__name,
.sp-card a.sp-card__hit:hover .sp-card__go{text-decoration:underline}
.sp-card a.sp-card__hit:hover .sp-card__go{color:var(--navy)}
/* カード下端の共通アクション行：押せることを必ず明示する */
.sp-card__go,.sp-card__angles{
  margin:10px 0 0; padding:8px 0 0; border-top:1px dotted var(--line);
  font-size:12px; color:var(--link); display:block;
}
.sp-card__go::before,.sp-card__angles::before{content:"›"; margin-right:6px; color:var(--ink-faint)}
.sp-card__angles{color:var(--ink-mute)}
.sp-card__angles a{margin-right:8px; white-space:nowrap}
.sp-card__ph{margin-top:3px; height:133px; background:var(--surface); border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; overflow:hidden}
.sp-card__ph img{max-height:136px; object-fit:contain}
.sp-card__ph--none svg,.sp-light__ph--none svg{width:56%; max-width:96px; height:auto; color:#c6ced6}
.sp-light__ph--none svg{width:52px}
.sp-card__body{padding:11px 12px 13px; flex:1 1 auto}
.sp-card__maker{font-size:10px; color:#fff; background:#7c8792; padding:1px 6px; border-radius:var(--r-sm); margin-right:5px; vertical-align:2px; display:inline-block}
.sp-card__name{overflow-wrap:anywhere; font-size:13.5px; font-weight:700; line-height:1.5; margin:0 0 8px}
.sp-card__size{font-size:11px; color:var(--ink-faint); font-weight:400; margin-left:4px}
.sp-card__note{margin:8px 0 0; font-size:11.5px; color:var(--ink-mute); line-height:1.6}
.sp-card__note span{display:inline-block; font-size:10px; padding:0 5px; margin-right:5px;
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-faint); vertical-align:1px}
.sp-card__note--cond{color:var(--cond)}
.sp-card__note--cond span{border-color:#ecd6ae; background:var(--cond-bg); color:var(--cond)}

.sp-tag{display:inline-block; font-size:11px; line-height:1.6; padding:2px 8px; border:1px solid;
  border-radius:var(--r-sm); margin:0 5px 5px 0; max-width:100%; white-space:normal; overflow-wrap:anywhere}
.sp-tag--ok{color:var(--ok); background:var(--ok-bg); border-color:#bfdccb}
.sp-tag--cond{color:var(--cond); background:var(--cond-bg); border-color:#ecd6ae}
.sp-tag--no{color:var(--no); background:var(--no-bg); border-color:#e9c8c8}
.sp-tag--na{color:var(--ink-faint); background:var(--surface); border-color:var(--line)}

/* ---------- 使用不可リスト ---------- */
.sp-ng{margin:30px 0 0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.sp-ng>summary{cursor:pointer; padding:13px 18px; font-size:14px; color:var(--ink-mute)}
.sp-ng[open]>summary{border-bottom:1px solid var(--line-soft)}
.sp-ng__list{margin:0; padding:14px 18px 18px; columns:2; column-gap:32px; list-style:none; font-size:12.5px; color:var(--ink-mute)}
.sp-ng__list li{margin-bottom:6px; break-inside:avoid; padding-left:1em; text-indent:-1em}
.sp-ng__list li::before{content:"×"; color:var(--no); margin-right:6px; font-size:11px}
.sp-ng__list em{font-style:normal; color:var(--ink-faint); font-size:11px}

.sp-empty{background:var(--paper); border:1px dashed var(--line); border-radius:var(--r-lg); padding:34px 20px; text-align:center; color:var(--ink-mute); font-size:14px}
.sp-updated{margin:26px 0 0; font-size:12px; color:var(--ink-faint)}

/* ---------- 画面幅対応 ---------- */
@media (max-width:820px){
  .sp-title h1{font-size:20px}
  .sp-bar__in{gap:10px}
  .sp-field--light select,.sp-field--find input{min-width:0; width:100%}
  .sp-field{flex:1 1 100%}
  .sp-bar__count{margin:0; flex:1 1 100%}
  .sp-ng__list{columns:1}
  .sp-group{font-size:19px; padding:9px 13px; margin:26px 0 12px}
  .sp-title h1{font-size:21px}
  .sp-bar__count{text-align:left}
  .sp-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
  .sp-card__ph{height:110px}
  .sp-card__ph img{max-height:110px}
  .sp-light__ph{flex:0 0 84px; height:64px}
  .sp-light__ph img{max-height:64px}
  .sp-light__name{font-size:17px}
  .sp-head__logo img{width:180px}
  .sp-head__tag{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

@media print{
  .sp-bar,.sp-head__back,.sp-crumb{display:none}
  body{background:#fff; font-size:11pt}
  .sp-card,.sp-light,.sp-legend,.sp-ng{break-inside:avoid; border-color:#999}
  .sp-ng[open] .sp-ng__list{columns:2}
  .sp-cards{grid-template-columns:repeat(3,1fr)}
  .sp-group{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}