/* ============================================
   ネット回線ナビ netaccess.infobypass.com
   ============================================ */
:root {
  --color-primary: #1a5276;
  --color-primary-light: #2980b9;
  --color-accent: #e67e22;
  --color-accent-light: #f39c12;
  --color-bg: #f5f7fa;
  --color-white: #ffffff;
  --color-text: #2c3e50;
  --color-text-light: #5d6d7e;
  --color-border: #d5dbdb;
  --color-success: #27ae60;
  --color-danger: #c0392b;
  --color-contracted: #8e44ad;
  --color-hikari: #2980b9;
  --color-mobile: #27ae60;
  --color-home-router: #8e44ad;
  --color-other: #7f8c8d;
  --font-main: "Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",sans-serif;
  --font-accent: "Hiragino Mincho ProN","Noto Serif JP",serif;
  --max-width: 960px;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,.08);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:24px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-main);color:var(--color-text);background:var(--color-bg);line-height:1.8;min-height:100vh}
a{color:var(--color-primary-light);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}

/* ============================================
   ヘッダー（PRバー内蔵・sticky）
   ============================================ */
.site-header{
  background:var(--color-white);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.header-pr{
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  text-align:center;
  padding:3px 16px;
  font-size:.7rem;
  color:var(--color-text-light);
}
.pr-label{
  display:inline-block;
  background:var(--color-danger);
  color:#fff;
  font-weight:700;
  padding:1px 8px;
  border-radius:3px;
  margin-right:6px;
  font-size:.66rem;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
}
.site-title{font-size:1.1rem;font-weight:700}
.site-title a{color:var(--color-primary);text-decoration:none}
.site-title small{display:block;font-size:.66rem;font-weight:400;color:var(--color-text-light)}
.header-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.header-nav a{
  color:var(--color-primary-light);padding:4px 10px;border-radius:4px;
  font-size:.75rem;font-weight:600;transition:background .2s;
}
.header-nav a:hover{background:#eaf2f8;text-decoration:none}
.header-nav .search-link{background:var(--color-primary);color:#fff;border-radius:4px;padding:4px 10px}
.header-nav .search-link:hover{background:var(--color-primary-light);color:#fff}

/* ============================================ コンテナ */
.container{max-width:var(--max-width);margin:0 auto;padding:20px 16px 60px}

/* ============================================ ヒーロー */
.hero{background:var(--color-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;margin-bottom:24px;border-left:5px solid var(--color-accent)}
.hero h1{font-family:var(--font-accent);font-size:1.5rem;color:var(--color-primary);margin-bottom:12px;line-height:1.5}
.hero .lead{font-size:.95rem;color:var(--color-text-light);line-height:1.9}
.hero .lead strong{color:var(--color-accent)}

/* ============================================ 管理人ボックス */
.owner-box{background:linear-gradient(135deg,#fdf2e9 0%,#fef9e7 100%);border:2px solid var(--color-accent);border-radius:var(--radius);padding:20px;margin:20px 0}
.owner-box h2{font-size:1.1rem;color:var(--color-accent);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.owner-box p{font-size:.9rem;line-height:1.8}
.owner-badge{display:inline-block;background:var(--color-contracted);color:#fff;font-size:.7rem;padding:2px 8px;border-radius:10px;font-weight:700}

/* ============================================
   証拠画像エリア
   ============================================ */
.evidence-area{
  background:var(--color-white);
  border:2px dashed var(--color-contracted);
  border-radius:var(--radius);
  padding:12px;margin:16px 0;
  text-align:center;
  overflow:hidden;
}
.evidence-area h3{color:var(--color-contracted);font-size:1rem;margin-bottom:8px;border:none;padding-left:0}
.evidence-area p{font-size:.85rem;color:var(--color-text-light)}
/* ──── 画像：モバイルファースト（はみ出さない） ──── */
.evidence-area img{
  display:block;
  margin:10px auto;
  border:1px solid var(--color-border);
  border-radius:4px;
  width:auto;
  height:auto;
  max-width:100%;       /* 親要素の幅を超えない = はみ出し防止の唯一の鍵 */
  /* max-height は設定しない（モバイルでは自然サイズ） */
}
.evidence-click-hint{
  font-size:.72rem;
  color:var(--color-contracted);
  margin-top:4px;
}
/* ──── PC（マウスあり端末）のみサムネイル化 ──── */
@media(hover:hover) and (min-width:768px){
  .evidence-area img{
    max-height:240px;
    object-fit:contain;
    cursor:pointer;
    transition:opacity .2s, box-shadow .2s;
  }
  .evidence-area img:hover{
    opacity:.9;
    box-shadow:0 2px 12px rgba(142,68,173,.25);
  }
}
/* スマホではクリックヒントを非表示（ピンチズームで十分） */
@media(hover:none){
  .evidence-click-hint{ display:none; }
}

/* ============================================
   ライトボックス（PC専用・＋ボタンは画像直下）
   ============================================ */
#lb{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.92);
  z-index:9999;
  overflow:hidden;
}
#lb-wrap{
  width:100%;height:100%;
  display:flex;justify-content:center;align-items:center;
  flex-direction:column;
  overflow:hidden;
  gap:12px;
}
#lb-wrap.zoomed{
  overflow:auto;
  display:block;
  text-align:center;
  padding:60px 20px 20px;
  -webkit-overflow-scrolling:touch;
}
#lb img{
  border-radius:4px;
  background:var(--color-white);
  padding:4px;
}
#lb-wrap:not(.zoomed) img{
  max-width:94vw;
  max-height:78vh;
  object-fit:contain;
}
#lb-wrap.zoomed img{
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
}
.lb-close{
  position:fixed;top:12px;right:18px;
  background:rgba(0,0,0,.6);border:none;color:#fff;
  font-size:1.6rem;cursor:pointer;line-height:1;z-index:10001;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
/* ＋/－ ボタン：画像直下にインライン配置 */
.lb-zoom{
  display:inline-flex;
  align-items:center;justify-content:center;
  gap:6px;
  background:var(--color-accent);border:none;color:#fff;
  padding:8px 24px;
  border-radius:24px;
  font-size:.9rem;font-weight:700;cursor:pointer;
  z-index:10001;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:background .2s;
  white-space:nowrap;
}
.lb-zoom:hover{background:#d35400}
.lb-zoom-icon{font-size:1.3rem;line-height:1}
/* zoomed時はボタンを上部固定 */
#lb-wrap.zoomed .lb-zoom{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:10001;
}
.lb-hint{
  color:rgba(255,255,255,.5);font-size:.55rem;
  text-align:center;
}
.lb-close{position:absolute;top:12px;right:18px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1;z-index:10000}
.lb-hint{color:rgba(255,255,255,.6);font-size:.75rem;margin-top:8px}

/* ============================================ デュアルレイヤーフィルター */
.filter-section{background:var(--color-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:20px}
.filter-section h3{font-size:.82rem;color:var(--color-text-light);margin-bottom:8px;font-weight:500;border:none;padding:0}
.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.filter-row:last-child{margin-bottom:0}
.filter-btn{
  display:inline-block;padding:6px 14px;border:2px solid var(--color-border);
  border-radius:20px;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:all .2s;background:var(--color-white);color:var(--color-text);
}
.filter-btn:hover{border-color:var(--color-primary-light);color:var(--color-primary)}
.filter-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.filter-btn.active-needs{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.filter-status{font-size:.82rem;padding:8px 12px;border-radius:4px;margin-top:8px;display:none}
.filter-status.showing{display:block;background:#eaf2f8;color:var(--color-primary)}
.filter-status.no-results{display:block;background:#fdedec;color:var(--color-danger)}
.filter-status .suggestion-btn{
  display:inline-block;margin:4px 4px 0 0;padding:2px 10px;
  background:var(--color-white);border:1px solid var(--color-danger);
  border-radius:12px;font-size:.75rem;cursor:pointer;color:var(--color-danger);
}
.filter-status .suggestion-btn:hover{background:var(--color-danger);color:#fff}

/* ============================================ 商品カード */
.product-grid{display:grid;gap:16px}
.product-card{
  background:var(--color-white);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;transition:box-shadow .2s,transform .15s;position:relative;
  border-left:4px solid var(--color-hikari);
}
.product-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.product-card[data-category="mobile"]{border-left-color:var(--color-mobile)}
.product-card[data-category="home-router"]{border-left-color:var(--color-home-router)}
.product-card[data-category="other"]{border-left-color:var(--color-other)}
.product-card .badge{position:absolute;top:-1px;right:16px;background:var(--color-accent);color:#fff;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:0 0 6px 6px}
.product-card .badge.contracted{background:var(--color-contracted)}
.card-header{margin-bottom:10px}
.card-header h3{font-size:1.05rem;color:var(--color-primary);line-height:1.4}
.card-header .company{font-size:.75rem;color:var(--color-text-light);margin-top:2px}
.card-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:.82rem;margin-bottom:10px}
.card-meta dt{color:var(--color-text-light);font-weight:500}
.card-meta dd{font-weight:600}
.card-appeal{font-size:.85rem;margin-bottom:10px;padding:8px 12px;background:#eaf2f8;border-radius:4px;line-height:1.7}
.card-recommend{font-size:.85rem;color:var(--color-accent);font-weight:600;margin-bottom:12px}
.card-actions{display:flex;flex-direction:column;gap:6px}
.card-actions .btn{text-align:center}

/* ============================================ ボタン */
.btn{display:inline-block;padding:8px 20px;border-radius:6px;font-size:.85rem;font-weight:700;text-align:center;transition:all .2s;cursor:pointer;border:none}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary:hover{background:#d35400;text-decoration:none;color:#fff}
.btn-outline{background:transparent;border:2px solid var(--color-primary-light);color:var(--color-primary-light)}
.btn-outline:hover{background:var(--color-primary-light);color:#fff;text-decoration:none}
.btn-small{padding:5px 12px;font-size:.78rem}
.btn-disabled{opacity:.5;cursor:default;pointer-events:none}

/* ============================================ 比較ページ共通 */
.compare-section{background:var(--color-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:24px}
.compare-section h2{font-size:1.2rem;color:var(--color-primary);border-bottom:3px solid var(--color-primary);padding-bottom:8px;margin-bottom:16px}
.compare-section h3{font-size:1.05rem;color:var(--color-primary);margin:16px 0 8px;padding-left:12px;border-left:4px solid var(--color-accent)}
.compare-table{width:100%;border-collapse:collapse;font-size:.85rem;margin:12px 0;overflow-x:auto;display:block}
.compare-table th,.compare-table td{padding:10px 12px;border:1px solid var(--color-border);text-align:left;vertical-align:top}
.compare-table th{background:var(--color-primary);color:#fff;font-weight:600;white-space:nowrap}
.compare-table tr:nth-child(even){background:#f8f9fa}
.compare-table .highlight{background:#fef9e7;font-weight:600}
.advice-box{background:#eaf2f8;border-radius:var(--radius);padding:16px 20px;margin:12px 0;border-left:4px solid var(--color-primary-light)}
.advice-box.for-gamer{border-left-color:#e74c3c;background:#fdedec}
.advice-box.for-remote{border-left-color:#3498db;background:#ebf5fb}
.advice-box.for-light{border-left-color:#27ae60;background:#eafaf1}
.advice-box.for-heavy{border-left-color:#8e44ad;background:#f4ecf7}
.advice-box.for-saving{border-left-color:#f39c12;background:#fef9e7}
.advice-box h4{font-size:.95rem;margin-bottom:6px}
.advice-box p{font-size:.85rem;line-height:1.7}

/* ============================================ 検索ページ */
.search-box{display:flex;gap:8px;margin-bottom:20px}
.search-box input{flex:1;padding:10px 14px;border:2px solid var(--color-border);border-radius:6px;font-size:.95rem;font-family:var(--font-main)}
.search-box input:focus{outline:none;border-color:var(--color-primary-light)}
.search-box button{padding:10px 20px;background:var(--color-primary);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:700;cursor:pointer}
.search-result-count{font-size:.9rem;color:var(--color-text-light);margin-bottom:12px}

/* ============================================ 固定ページ */
.static-page h2{font-size:1.1rem;margin-top:20px}
.static-page h2:first-child{margin-top:0}
.static-page p{font-size:.9rem;line-height:1.9;margin:.8em 0}
.static-page ul{margin:.8em 0 .8em 1.5em;font-size:.9rem;line-height:1.9}
.static-page .updated{font-size:.8rem;color:var(--color-text-light);margin-top:24px;padding-top:12px;border-top:1px solid var(--color-border)}
.static-subtitle{font-size:.85rem;color:var(--color-text-light);margin-bottom:16px!important}
/* contact CTA */
.static-page .cta{
  display:inline-block;padding:14px 32px;
  background:var(--color-accent);color:#fff;
  border-radius:6px;font-size:1rem;font-weight:700;
  transition:background .2s;
}
.static-page .cta:hover{background:#d35400;text-decoration:none;color:#fff}
.static-page .cta .arrow{margin-left:4px}

/* ============================================ ページナビ */
.page-nav{background:var(--color-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:20px}
.page-nav h2{font-size:.9rem;color:var(--color-primary);margin-bottom:8px;border:none;padding:0}
.page-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.page-nav li a{display:inline-block;padding:4px 10px;background:#eaf2f8;border-radius:4px;font-size:.8rem;font-weight:500}

/* ============================================ 詳細ページ */
.detail-hero{background:var(--color-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.detail-hero h1{font-size:1.3rem;color:var(--color-primary);margin-bottom:4px}
.detail-hero .company-name{font-size:.82rem;color:var(--color-text-light);margin-bottom:16px}
.detail-spec{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.spec-item{padding:10px 12px;background:var(--color-bg);border-radius:4px}
.spec-item dt{font-size:.75rem;color:var(--color-text-light);margin-bottom:2px}
.spec-item dd{font-size:.9rem;font-weight:600}
.breadcrumb{font-size:.78rem;color:var(--color-text-light);margin-bottom:16px;padding:8px 0}
.breadcrumb a{color:var(--color-primary-light)}
.breadcrumb span{margin:0 4px}

/* ============================================ フッター */
.site-footer{background:var(--color-primary);color:rgba(255,255,255,.8);text-align:center;padding:20px 16px;font-size:.78rem;line-height:1.8}
.site-footer a{color:rgba(255,255,255,.9)}
.footer-nav{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.scroll-top{position:fixed;bottom:20px;right:20px;width:44px;height:44px;background:var(--color-primary);color:#fff;border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow);display:none;z-index:90}
.scroll-top.visible{display:block}

/* ============================================ レスポンシブ */
@media(max-width:768px){
  .hero h1{font-size:1.2rem}
  .card-meta{grid-template-columns:1fr}
  .detail-spec{grid-template-columns:1fr}
  .header-inner{flex-direction:column;align-items:flex-start}
  .footer-nav{gap:8px}

  /* ──── テーブル→カード変換 ──── */
  .compare-table{display:block;overflow:visible}
  .compare-table thead{display:none}
  .compare-table tbody{display:block}
  .compare-table tr{
    display:block;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    padding:14px 16px;
    margin-bottom:12px;
    box-shadow:var(--shadow);
  }
  .compare-table tr.highlight{
    border-left:4px solid var(--color-accent);
  }
  .compare-table td{
    display:block;
    border:none;
    padding:3px 0;
    font-size:.88rem;
    line-height:1.7;
  }
  .compare-table td::before{
    content:attr(data-label);
    display:block;
    font-size:.72rem;
    font-weight:600;
    color:var(--color-text-light);
    margin-top:4px;
  }
  /* カード先頭のtd（サービス名）を強調 */
  .compare-table td:first-child{
    font-size:.95rem;
    font-weight:700;
    color:var(--color-primary);
    padding-bottom:6px;
    border-bottom:1px solid var(--color-border);
    margin-bottom:4px;
  }
  .compare-table td:first-child::before{
    display:none;
  }
}