*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN',Meiryo,'MS PGothic',sans-serif;color:#1e293b;line-height:1.7;background:#f8fafc}
:root{
  --primary:#2563eb;--primary-dark:#1e40af;--primary-light:#e8f2ff;
  --gold:#f59e0b;--silver:#94a3b8;--bronze:#b45309;
  --accent:#ef4444;--green:#16a34a;
  --text:#1e293b;--muted:#64748b;--border:#e2e8f0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:860px;margin:0 auto;padding:0 10px}

/* ===== HERO (メインビジュアル) ===== */
.hero{background:#2359d9;text-align:center;overflow:hidden}
.hero picture{display:block;width:100%}
.hero-mv{display:block;width:100%;max-width:767px;margin:0 auto}
@media(min-width:768px){
  .hero{background:#1c46c4}
  .hero-mv{max-width:860px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== INTRO BANNER ===== */
.intro-banner{padding:20px 24px;border-radius:0 10px 10px 0;margin:40px 0;}
.intro-banner p{font-size:.95rem;color:#334155}

/* ===== SECTION TITLES ===== */
.sec{padding:64px 0}
.sec-alt{background:#fff}
.sec-title{font-size:clamp(1.2rem,3vw,1.7rem);font-weight:900;text-align:center;margin-bottom:12px}
.sec-title span{color:var(--primary)}
.sec-lead{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:40px}
.divider{width:56px;height:4px;background:linear-gradient(90deg,var(--primary),#06b6d4);border-radius:2px;margin:12px auto 32px}

/* ===== REASON CARDS ===== */
.reason-grid{display:grid;grid-template-columns:1fr;gap:30px}
.reason-card{background:#fff;border-radius:14px;padding:20px;text-align:left;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:transform .2s;display:flex;align-items:center;gap:20px;position:relative}
.reason-num{position:absolute;top:-20px;left:-10px;z-index:3;font-family:'Poppins',sans-serif;font-size:3rem;font-weight:600;line-height:1;color:var(--primary);letter-spacing:-.03em;pointer-events:none}
.reason-card:hover{transform:translateY(-3px)}
.reason-img{width:120px;height:120px;flex-shrink:0;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:3.6rem;overflow:hidden}
.reason-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:768px){.reason-img img{width:80%;height:80%}}
.reason-text{flex:1;min-width:0}
.reason-card h3{font-size:1.2rem;font-weight:800;margin-bottom:8px;text-align: left;}
.reason-card p{font-size:.82rem;color:var(--muted);line-height:1.6;text-align: left;}

/* ===== COMPARISON TABLE ===== */
.tbl-wrap{overflow-x:auto;border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:.83rem;background:#fff}
#ranking table{min-width:1120px}
thead th{background:var(--primary);color:#fff;padding:12px 10px;text-align:center;white-space:nowrap}
thead th:first-child{text-align:left;padding-left:16px}
tbody tr:nth-child(even){background:#f1f5f9}
tbody tr:hover{background:#e8f2ff}
tbody td{padding:10px 10px;text-align:center;border-bottom:1px solid var(--border);vertical-align:middle}
tbody td:first-child{text-align:left;padding-left:16px;font-weight:700;background:#f8fafc;white-space:nowrap}
.best-cell{color:var(--accent);font-weight:800}
/* PC：比較表を860pxコンテナ内に収める（内容を詰めて全列表示・横スクロールなし） */
@media(min-width:768px){
  #ranking .tbl-wrap{overflow-x:visible}
  #ranking table{min-width:0;width:100%}
  #ranking thead th{padding:7px 3px;font-size:12px;white-space:normal;line-height:1.25}
  #ranking thead th:first-child{padding-left:8px}
  #ranking tbody td{padding:6px 3px;font-size:12px;line-height:1.3;word-break:break-word}
  #ranking tbody td:first-child{padding-left:8px;white-space:normal}
  #ranking tbody td:nth-child(2){white-space:nowrap}
  #ranking .rank-name{flex-wrap:wrap;gap:1px 4px}
  #ranking .rank-name .rank-cn{font-size:12px}
  #ranking thead th:last-child,#ranking tbody td:last-child{width:92px}
}
/* 比較表：順位付き業者名リンク＋王冠アイコン */
.rank-name{display:inline-flex;align-items:center;gap:6px;color:inherit;font-weight:700;text-decoration:none}
.rank-cn{text-decoration:underline;text-underline-offset:2px}
.rank-name:hover .rank-cn{color:var(--primary)}
.rank-pos{display:inline-flex;align-items:center;gap:4px}
.rank-pos .crown-ic{width:1.05em;height:1.05em;flex-shrink:0}
.rank-pos.rank-gold{color:var(--gold)}
.rank-pos.rank-silver{color:var(--silver)}
.rank-pos.rank-bronze{color:var(--bronze)}
@media(max-width:767px){
thead th{font-size: 0.7rem;}
}

/* ===== SURVEY BOX ===== */
.survey-box{background:#fff;border-radius:16px;padding:20px 24px;}
.survey-box h3{font-size:1.05rem;font-weight:900;margin-bottom:20px;color:var(--primary-dark);border-bottom:2px solid var(--primary);padding-bottom:8px;text-align: center}
.survey-tbl{width:100%;border-collapse:collapse}
.survey-tbl tr{border-bottom:1px solid var(--border)}
.survey-tbl tr,.survey-tbl tr:nth-child(even),.survey-tbl tr:hover{background:#fff}
.survey-tbl td{background:#fff}
.survey-tbl tr:last-child{border-bottom:none}
.survey-tbl th{width:160px;padding:6px 16px;font-size:.88rem;font-weight:700;color:var(--muted);background:#f8fafc;text-align:left;vertical-align:top;white-space:nowrap}
.survey-tbl td{padding:6px 16px;font-size:.88rem;color:var(--text);vertical-align:top;text-align: left}

/* ===== COMPANY DETAIL ===== */
/* ===== NEW COMPANY DETAIL LAYOUT ===== */
.company-sec{padding:56px 0;border-bottom:2px solid var(--border);scroll-margin-top:20px}
.company-hero-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.rank-no-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-radius:10px;padding:6px 14px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:900;line-height:1.2;flex-shrink:0;min-width:70px;box-shadow:0 4px 12px rgba(245,158,11,.35)}
.rank-no-badge .crown-ic{width:1.15rem;height:1.15rem;flex-shrink:0}
.rank-no-badge.silver{background:linear-gradient(135deg,#94a3b8,#64748b);box-shadow:0 4px 12px rgba(100,116,139,.3)}
.rank-no-badge.bronze{background:linear-gradient(135deg,#b45309,#92400e);box-shadow:0 4px 12px rgba(180,83,9,.3)}
.rank-no-badge.blue{background:linear-gradient(135deg,#3b82f6,#1e40af);box-shadow:0 4px 12px rgba(59,130,246,.3)}
.rank-no-badge .rk-num{font-size:1.5rem}
.rank-no-badge .rk-num span{font-size:.6em;font-weight:800;padding-left: 2px;}
.company-title{font-size:clamp(1.5rem,3.5vw,2rem);font-weight:900}
.company-ss{width:100%;max-height:420px;object-fit:cover;object-position:top;border-radius:14px;margin-bottom:24px}
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.kpi-row-4{grid-template-columns:repeat(4,1fr)}
#conclusion .kpi-box.kpi-gold .kpi-box-val,#conclusion-bottom .kpi-box.kpi-gold .kpi-box-val{color:var(--gold)}
.kpi-box{border:2px solid var(--border);border-radius:12px;padding:16px 20px;text-align:center;background:#fff}
.kpi-box .kpi-box-label{font-size:.82rem;color:var(--muted);font-weight:700;margin-bottom:6px}
.kpi-box .kpi-box-val{font-size:1.6rem;font-weight:900;color:var(--primary);line-height:1.1}
.kpi-box .kpi-box-val span{font-size:.85rem;color:var(--muted);font-weight:600}
.kpi-box.kpi-gold .kpi-box-val{color:var(--text)}
#c-netoff .kpi-box.kpi-gold .kpi-box-val{color:var(--gold)}
#c-mottainai .kpi-box.kpi-gold .kpi-box-val{color:var(--silver)}
#c-valuebooks .kpi-box.kpi-gold .kpi-box-val{color:var(--bronze)}
.company-desc-text{font-size:.92rem;color:#334155;line-height:1.85;margin-bottom:28px}
.strength-sec{margin-bottom:20px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.strength-head{display:flex;align-items:center;gap:8px;padding:12px 18px;background:#f1f5f9;font-weight:900;font-size:.92rem;color:var(--primary-dark)}
.strength-head::before{content:'';flex-shrink:0;width:1.2em;height:1.2em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232563eb'/%3E%3Cpath d='M7 12.4l3.3 3.3L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.strength-body{padding:16px 18px}
.strength-body p{font-size:.87rem;color:#475569;line-height:1.8;margin-bottom:14px}
.strength-pills{display:flex;flex-wrap:wrap;gap:10px}
.s-pill{background:var(--primary-light);color:var(--primary-dark);border:1px solid #bfdbfe;border-radius:8px;padding:7px 16px;font-size:.82rem;font-weight:700;text-align:center}
.company-cta{margin-top:24px}
.site-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:linear-gradient(135deg,var(--accent),#dc2626);color:#fff;font-size:1.02rem;font-weight:900;padding:16px 24px;border-radius:999px;box-shadow:0 6px 18px rgba(239,68,68,.32);transition:transform .35s ease,box-shadow .35s ease,background .35s ease,color .35s ease;text-align:center}
.site-btn:hover{transform:translateY(-2px);background:#fff;color:var(--accent);box-shadow:0 10px 24px rgba(239,68,68,.28),inset 0 0 0 2px var(--accent)}
.site-btn .site-btn-arrow{font-size:1.15rem;line-height:1;transition:transform .35s ease}
.site-btn:hover .site-btn-arrow{transform:translateX(4px)}
.company-ss-link{display:block}
@media(max-width:767px){
.kpi-box{padding: 12px 20px;}
 .kpi-box .kpi-box-label{font-size: .7rem;margin-bottom:4px}
 .kpi-box .kpi-box-val{font-size: 1.2rem;}
 .rank-no-badge .rk-num{font-size: 1.3rem;}
 .kpi-box .kpi-box-val span{font-size: 0.7rem;}
 .company-desc-text{padding: 0 16px;}
 .site-btn{font-size: 0.9rem;}
}

/* ===== FILTER SEARCH ===== */
.filter-box{background:#fff;border:2px solid #4a556f;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(37,99,235,.12)}
.filter-head{background:#4a556f;color:#fff;padding:14px 24px;font-weight:900;font-size:1.05rem;display:flex;align-items:center;justify-content:center;gap:8px}
.filter-body{padding:14px 24px}
.filter-row{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px dashed var(--border)}
.filter-row:last-of-type{border-bottom:none}
.filter-label{flex-shrink:0;width:92px;background:#f1f5f9;color:var(--primary-dark);font-weight:800;font-size:.85rem;text-align:center;padding:8px 4px;border-radius:8px;margin-top:2px}
.filter-opts{display:flex;flex-wrap:wrap;gap:10px}
.filter-opts input{display:none}
.filter-pill{display:inline-block;border:2px solid var(--border);border-radius:999px;padding:4px 18px;font-size:.85rem;font-weight:700;color:#475569;cursor:pointer;transition:all .15s;user-select:none;background:#fff}
.filter-pill:hover{border-color:var(--primary);color:var(--primary)}
.filter-opts input:checked+.filter-pill,.filter-pill.is-on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.3)}
.filter-footer{background:#f8fafc;border-top:1px solid var(--border);padding:18px 24px;text-align:center}
.filter-count{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:14px}
.filter-count strong{color:var(--accent);font-size:1.5rem;margin:0 4px}
.filter-search-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:1rem;font-weight:900;padding:14px 40px;border:none;border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(37,99,235,.35);transition:transform .15s}
.filter-search-btn:hover{transform:translateY(-2px)}
.filter-reset-btn{display:inline-block;background:none;border:none;color:var(--muted);font-size:.82rem;text-decoration:underline;cursor:pointer}
.filter-btns{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
@media(min-width:768px){.filter-btns{flex-direction:row-reverse}}
.filter-result-note{display:none;position:relative;background:var(--primary-light);border:1px solid #bfdbfe;color:var(--primary-dark);font-size:1.2rem;font-weight:700;border-radius:10px;padding:12px 18px;margin-bottom:28px;text-align:center}
.filter-result-note::before,.filter-result-note::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-style:solid;border-color:transparent}
.filter-result-note::before{top:100%;border-width:11px 11px 0 11px;border-top-color:#bfdbfe}
.filter-result-note::after{top:calc(100% - 1px);border-width:10px 10px 0 10px;border-top-color:var(--primary-light)}
.filter-no-match{display:none;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:.9rem;font-weight:700;border-radius:10px;padding:20px;text-align:center}
@media(max-width:767px){
  .filter-body{padding: 2px 24px 10px;}
  .filter-row{flex-direction:column;gap:10px}
  .filter-label{width:100%;padding: 3px 0;border-radius: 4px;}
  .filter-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
  .filter-opts label{display:block}
  .filter-pill{display:block;width:100%;padding:6px 2px;font-size:.72rem;text-align:center}
  .filter-footer{padding: 12px 24px;}
  .filter-count strong{font-size: 1.2rem;}
  .filter-search-btn{font-size: .9rem;}
  .filter-result-note{font-size: 1rem}
  .filter-head{font-size: .9rem;padding: 10px 24px}
}

/* ===== FOOTER ===== */
footer{background:#0f172a;color:#94a3b8;padding:40px 0;text-align:center;font-size:.82rem}
footer a{color:#60a5fa}
.footer-disclaimer{background:#1e293b;padding:20px;margin-bottom:24px;border-radius:8px;font-size:.78rem;line-height:1.8;text-align:left}

/* ===== UTILS ===== */
.mt-24{margin-top:24px}
.highlight-box{background:#fefde1;border:2px solid #ffe500;border-radius:12px;padding:20px 24px;margin:24px 0}
.highlight-box p{font-size:.9rem;color:#713f12}

@media(max-width:767px){
  .kpi-row-4{grid-template-columns:1fr 1fr}
  .intro-banner{padding: 10px;margin: 10px 0;}
   .sec{padding:50px 0}
   .reason-card h3{font-size: 1rem;line-height: 1.5;}
   .reason-grid{gap: 18px;}
  .reason-img{width:70px;height:70px;font-size:2.4rem}
  .reason-num{font-size:2rem;top:-10px;left:8px}
  .survey-box{padding:16px}
  .survey-tbl{min-width:0;width:100%}
  .survey-tbl th{width:36%;white-space:normal;padding:5px 8px;font-size:.8rem}
  .survey-tbl td{padding:5px 8px;font-size:.8rem;word-break:break-word}
  tbody td{padding: 2px;font-size: 12px;}
  /* SP：ランキング1位の上部余白を削除 */
  #c-netoff{padding-top:0}
  /* SP：業者名サイズ */
  .company-title{font-size:20px}
  /* SP：強みタグを2カラム（奇数は左揃え） */
  .strength-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .s-pill{width:100%;line-height: 1.4;padding: 7px 8px;}
}
/* company-sec 上部：業者名・画像・KPIを囲む背景ボックス */
.company-topbox{background:#f1f5f9;border-radius:16px;padding:30px;margin-bottom:28px}
.company-topbox .company-hero-head{margin-bottom:16px}
.company-topbox .company-ss{margin-bottom:16px}
.company-topbox .kpi-row{margin-bottom:0;gap:8px}
.search-ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* 下部固定ナビ */
.fixnav{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--border);padding:10px 14px;box-shadow:0 -4px 18px rgba(0,0,0,.1)}
.fixnav-btn{display:flex;align-items:center;justify-content:center;gap:10px;max-width:520px;margin:0 auto;background:linear-gradient(135deg,var(--accent),#dc2626);color:#fff;font-size:.9rem;font-weight:900;padding:8px 22px;border-radius:999px;box-shadow:0 6px 18px rgba(239,68,68,.35);transition:transform .15s}
.fixnav-btn:hover{transform:translateY(-2px)}
.fixnav-btn .fixnav-arrow{transition:transform .15s}
.fixnav-btn:hover .fixnav-arrow{transform:translateX(4px)}
.fixnav-btn .crown-ic{width:1.25em;height:1.25em;flex-shrink:0}
body{padding-bottom:84px}
/* SP 右下フローティング動線（fixnavの上に配置） */
.sp-fabs{display:none}
@media(max-width:767px){
  .sp-fabs{display:flex;flex-direction:column;gap:7px;position:fixed;right:12px;bottom:74px;z-index:9998}
  .sp-fab{display:flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:12px;background:#fff;border:2px solid var(--primary);color:var(--primary);font-size:.62rem;font-weight:800;line-height:1.25;letter-spacing:-.02em;text-align:center;}
  .sp-fab svg{width:26px;height:26px}
  .sp-fab-text{font-size:.7rem;line-height:1.25;letter-spacing:-.02em}
}
   @media(max-width:767px){
.company-topbox{padding: 13px;}
.company-ss{max-height: 178px;}
}