/* /_tpl/pref_gyoshu.css — 都道府県×業種一覧ページCSS（旧版踏襲） */
:root { --primary: #1a5276; --primary-light: #2980b9; --accent: #e67e22; --bg: #f5f6f8; --white: #fff; --text: #2c3e50; --text-light: #7f8c8d; --border: #e0e3e6; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans JP', 'Yu Gothic', sans-serif; color: var(--text); background: var(--bg); line-height: 1.8; font-size: 15px; }
.header { background: var(--primary); color: white; }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 0.35rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.header-logo { font-size: 0.82rem; font-weight: 700; }
.header-logo a { color: white; text-decoration: none; }
.header-links { display: flex; gap: 1.2rem; list-style: none; }
.header-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.72rem; }
.pref-hero { background: linear-gradient(135deg, var(--primary) 0%, #1a6e9e 100%); color: white; padding: 1.5rem 1rem; }
.pref-hero-inner { max-width: 1100px; margin: 0 auto; }
.pref-hero h1 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.3rem; }
.pref-hero .sub { font-size: 0.82rem; opacity: 0.75; }
.breadcrumb { max-width: 1100px; margin: 0 auto; padding: 0.6rem 1rem; font-size: 0.75rem; color: var(--text-light); }
.breadcrumb a { color: var(--primary-light); text-decoration: none; }
.main-wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.result-count { font-size: 0.85rem; color: var(--text-light); margin-bottom: 1rem; }
.result-count strong { color: var(--text); font-size: 1.05rem; }
.company-card { display: block; text-decoration: none; color: var(--text); background: var(--white); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 0.8rem; overflow: hidden; transition: box-shadow 0.2s, transform 0.15s; }
.company-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-1px); }
.company-card-header { padding: 0.8rem 1.2rem 0.3rem; }
.company-name { font-size: 1rem; font-weight: 700; color: var(--primary); }
.company-card-body { padding: 0.3rem 1.2rem 0.8rem; }
.company-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 1rem; font-size: 0.82rem; }
.info-item { display: flex; gap: 0.4rem; }
.info-label { color: var(--text-light); font-weight: 600; flex-shrink: 0; }
.footer { background: var(--primary); color: white; padding: 1.5rem 1rem; margin-top: 1rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-links { display: flex; gap: 1.5rem; list-style: none; margin-bottom: 0.8rem; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.78rem; }
.footer-copy { font-size: 0.72rem; opacity: 0.5; }
@media (max-width: 768px) { .company-info-grid { grid-template-columns: 1fr; } .header-links { display: none; } }

/* ポータルバンド */
.kp-portal-band { background: #2c3e50; color: #fff; padding: 1.2rem 1rem; border-top: 4px solid #1a5276; }
.kp-portal-band-inner { max-width: 1100px; margin: 0 auto; }
.kp-portal-band-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; }
.kp-portal-band-logo { color: #ffd54f; font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.kp-portal-band-logo:hover { text-decoration: underline; }
.kp-portal-band-tagline { font-size: 0.78rem; opacity: 0.85; }

/* 47都道府県リンク */
.kp-pref-links { background: #233241; color: #fff; border-bottom: 1px solid #1a2530; }
.kp-pref-links-summary { cursor: pointer; max-width: 1100px; margin: 0 auto; padding: 0.85rem 1rem; font-size: 0.85rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; user-select: none; }
.kp-pref-links-summary::-webkit-details-marker { display: none; }
.kp-pref-links-summary::before { content: "▾"; font-size: 0.7rem; opacity: 0.65; margin-right: 0.4rem; }
.kp-pref-links[open] .kp-pref-links-summary::before { content: "▴"; }
.kp-pref-links-summary-text { font-weight: 600; color: #d8e3ee; }
.kp-pref-links-summary-hint { font-size: 0.72rem; opacity: 0.55; }
.kp-pref-links-summary:hover .kp-pref-links-summary-text { color: #fff; }
.kp-pref-links-inner { max-width: 1100px; margin: 0 auto; padding: 0.4rem 1rem 1.2rem; }
.kp-pref-links-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem 0.6rem; }
.kp-pref-links-grid li { font-size: 0.78rem; }
.kp-pref-links-grid a { color: #b8cce0; text-decoration: none; padding: 0.15rem 0.2rem; display: block; }
.kp-pref-links-grid a:hover { color: #fff; text-decoration: underline; }

/* エリア別 */
.kp-area-block { background: linear-gradient(to right, #f8fbfd, #ffffff); border: 1px solid #cfdce8; border-left: 4px solid var(--primary); border-radius: 8px; padding: 1.1rem 1.3rem; margin: 1.4rem 0 2rem; box-shadow: 0 2px 6px rgba(26, 82, 118, 0.07); }
.kp-area-title { font-size: 1.02rem; font-weight: 700; color: var(--primary); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.45rem; }
.kp-area-title::before { content: "📍"; font-size: 1rem; }
.kp-area-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.kp-area-list a, .kp-area-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; background: var(--primary); color: #fff; border-radius: 999px; font-size: 0.82rem; text-decoration: none; font-weight: 600; transition: background 0.15s; }
.kp-area-list a:hover { background: var(--primary-light); }
.kp-area-list .cnt { font-size: 0.7rem; opacity: 0.85; }

/* 折り畳み */
.kp-toggle { margin-top: 0.6rem; }
.kp-toggle > summary { cursor: pointer; font-size: 0.8rem; color: var(--primary-light); padding: 0.3rem 0; list-style: none; display: inline-block; user-select: none; }
.kp-toggle > summary::-webkit-details-marker { display: none; }
.kp-toggle > summary::before { content: "▾  "; font-size: 0.7rem; }
.kp-toggle[open] > summary::before { content: "▴  "; }
.kp-toggle > summary:hover { text-decoration: underline; }
.kp-toggle .kp-area-list, .kp-toggle .kp-other-list { margin-top: 0.55rem; }

/* 他業種 */
.kp-other-block { background: #f6f7f9; border: 1px dashed #c8ced5; border-radius: 6px; padding: 0.85rem 1.05rem; margin: 1.2rem 0 1.5rem; }
.kp-other-title { font-size: 0.82rem; font-weight: 600; color: #5a6571; margin-bottom: 0.5rem; }
.kp-other-list { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; }
.kp-other-list a { display: inline-block; padding: 0.25rem 0.65rem; background: #fff; border: 1px solid #d8dde3; border-radius: 4px; font-size: 0.74rem; color: #4a5560; text-decoration: none; }
.kp-other-list a:hover { background: #eef2f7; border-color: #9aa5b0; }
.kp-other-list .cnt { font-size: 0.65rem; color: #8a93a0; margin-left: 0.2rem; }

@media (max-width: 768px) {
  .kp-pref-links-grid { grid-template-columns: repeat(3, 1fr); }
  .kp-area-list a, .kp-area-tag { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
}

/* ===== 信頼バッジ（経審/5年クリーン/国交省表彰）===== */
.company-card-header { display: flex; flex-direction: column; gap: 0.45rem; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.65rem 0.25rem 0.45rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap; line-height: 1.4;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.badge-ico {
  width: 16px; height: 16px; flex-shrink: 0; display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}
/* 国交省表彰 — 金背景＋濃茶文字 */
.badge-award {
  background: linear-gradient(135deg, #fff9e7 0%, #ffe9b8 100%);
  color: #7c4a03;
  border-color: #f0c460;
}
/* 経審受診 — 薄青グラデ */
.badge-keishin {
  background: linear-gradient(135deg, #eef4ff 0%, #d3e5ff 100%);
  color: #1e3a8a;
  border-color: #93c5fd;
}
/* 5年クリーン — 薄緑グラデ */
.badge-clean {
  background: linear-gradient(135deg, #ecfdf5 0%, #c6f1d6 100%);
  color: #14532d;
  border-color: #86efac;
}
@media (max-width: 600px) {
  .badge { font-size: 0.66rem; padding: 0.2rem 0.55rem 0.2rem 0.4rem; }
  .badge-ico { width: 13px; height: 13px; }
}

/* ===== 許可業種タグ（pref/city/業種ページ統一）===== */
.permit-tags {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-top: 0.45rem;
}
.permit-tag {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #4a5560;
  background: #eef2f7;
  border: 1px solid #d8dde3;
  border-radius: 3px;
  line-height: 1.5;
  white-space: nowrap;
}
.permit-tag-more {
  background: #f6f7f9;
  color: #8a93a0;
  font-style: italic;
}
@media (max-width: 600px) {
  .permit-tag { font-size: 0.62rem; padding: 0.1rem 0.4rem; }
}

/* ===== セクションタイトル ===== */
.section-title {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem; color: var(--text);
}
.section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.section-title strong { color: var(--primary); font-size: 1.1rem; }
.page-info { color: var(--text-light); font-size: 0.78rem; margin-left: 0.5rem; }

/* ===== ページャー ===== */
.pagination {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.25rem; margin: 2rem 0 1rem;
  padding: 1rem 0;
}
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 0.65rem;
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--primary);
  background: white;
  transition: background 0.15s, border-color 0.15s;
}
.page-link:hover { background: var(--bg); border-color: var(--primary-light); }
.page-current {
  background: var(--primary); color: white;
  border-color: var(--primary); cursor: default;
}
.page-current:hover { background: var(--primary); }
.page-prev, .page-next { padding: 0 0.9rem; }
.page-ellipsis {
  display: inline-flex; align-items: center;
  padding: 0 0.35rem; color: var(--text-light);
  font-size: 0.9rem;
}
@media (max-width: 600px) {
  .page-link { min-width: 1.9rem; height: 1.9rem; padding: 0 0.5rem; font-size: 0.78rem; }
  .page-prev, .page-next { padding: 0 0.6rem; }
}

/* === 建設業許可 / 自治体指定 タブ切替 === */
.shitei-tabs {
  display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; flex-wrap: wrap;
}
.shitei-tab {
  flex: 1 1 200px; min-width: 180px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 0.7rem 1rem; border: 2px solid #e5e7eb; border-radius: 10px;
  background: #fff; color: #555; text-decoration: none;
  transition: all 0.15s ease;
}
.shitei-tab:hover { border-color: #93c5fd; background: #f0f7ff; color: #1e40af; }
.shitei-tab.active {
  border-color: #1e40af; background: #1e40af; color: #fff;
  box-shadow: 0 2px 6px rgba(30,64,175,0.18);
}
.shitei-tab-title { font-size: 0.78rem; line-height: 1.3; opacity: 0.85; }
.shitei-tab-title strong { display: block; font-size: 0.98rem; opacity: 1; margin-top: 0.1rem; }
.shitei-tab-cnt { font-size: 0.78rem; margin-top: 0.4rem; font-weight: 500; opacity: 0.85; }
.shitei-tab.active .shitei-tab-cnt { opacity: 1; }
@media (max-width: 600px) {
  .shitei-tab { flex: 1 1 100%; padding: 0.6rem 0.8rem; }
}

/* === /pref/city/gyoshu/ ページ用 (city × 業種) === */
.city-hero { background: linear-gradient(135deg, var(--primary) 0%, #1a6e9e 100%); color: white; padding: 1.5rem 1rem; }
.city-hero-inner { max-width: 1100px; margin: 0 auto; }
.city-hero h1 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.3rem; }
.city-hero .total { font-size: 0.95rem; opacity: 0.9; }
.city-hero .total strong { font-size: 1.45rem; color: #ffd54f; margin: 0 0.2rem; }
.city-hero .sub { font-size: 0.8rem; opacity: 0.75; margin-top: 0.4rem; }

/* 工事種類タグ */
.kouji-tags { background: white; border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; }
.kouji-tag { display: inline-block; padding: 0.25rem 0.7rem; background: var(--bg); color: var(--primary-light); border-radius: 12px; text-decoration: none; transition: background 0.15s; }
.kouji-tag:hover { background: var(--primary-light); color: white; }
.kouji-tag-related { background: #eef1f4; color: var(--text-light); cursor: default; }

/* 0社の場合の文言 */
.empty { background: white; border-radius: 8px; padding: 1.5rem 1.2rem; text-align: center; color: var(--text-light); margin-bottom: 1rem; }

/* キャラ会話セクション (chara入りページ用に温存) */
.content-section { background: white; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.content-section h2 { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--accent); }
.content-section h3 { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0.8rem 0 0.4rem; }
.content-section p { font-size: 0.88rem; line-height: 1.7; margin-bottom: 0.6rem; }

/* キャラ会話バブル */
.chara-bubble { display: flex; gap: 0.8rem; margin-bottom: 1rem; align-items: flex-start; }
.chara-bubble picture, .chara-bubble > img { flex-shrink: 0; width: 60px; height: 60px; }
.chara-bubble img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: var(--bg); }
.chara-content { flex: 1; background: var(--bg); border-radius: 0 12px 12px 12px; padding: 0.6rem 0.9rem; position: relative; }
.chara-content::before { content: ''; position: absolute; left: -8px; top: 8px; border: 8px solid transparent; border-right-color: var(--bg); border-left: 0; }
.chara-name { font-size: 0.82rem; font-weight: 700; color: var(--primary); margin-bottom: 0.3rem; }
.chara-name .chara-role { font-size: 0.7rem; font-weight: 400; color: var(--text-light); margin-left: 0.4rem; }
.chara-content p { font-size: 0.88rem; line-height: 1.7; }

/* キャラ別アクセント色 (任意装飾) */
.chara-bubble.chara-haruka .chara-content { background: #fdf2f8; }
.chara-bubble.chara-haruka .chara-content::before { border-right-color: #fdf2f8; }
.chara-bubble.chara-genki .chara-content { background: #fef3c7; }
.chara-bubble.chara-genki .chara-content::before { border-right-color: #fef3c7; }
.chara-bubble.chara-ayaka .chara-content { background: #ede9fe; }
.chara-bubble.chara-ayaka .chara-content::before { border-right-color: #ede9fe; }
.chara-bubble.chara-takeshi .chara-content, .chara-bubble.chara-oyakata .chara-content { background: #ecfeff; }
.chara-bubble.chara-takeshi .chara-content::before, .chara-bubble.chara-oyakata .chara-content::before { border-right-color: #ecfeff; }
.chara-bubble.chara-takashi .chara-content, .chara-bubble.chara-shinjin .chara-content { background: #ecfdf5; }
.chara-bubble.chara-takashi .chara-content::before, .chara-bubble.chara-shinjin .chara-content::before { border-right-color: #ecfdf5; }
.chara-bubble.chara-masayoshi .chara-content, .chara-bubble.chara-sensei .chara-content { background: #eff6ff; }
.chara-bubble.chara-masayoshi .chara-content::before, .chara-bubble.chara-sensei .chara-content::before { border-right-color: #eff6ff; }
.chara-bubble.chara-eri .chara-content, .chara-bubble.chara-buchou .chara-content { background: #fdf4ff; }
.chara-bubble.chara-eri .chara-content::before, .chara-bubble.chara-buchou .chara-content::before { border-right-color: #fdf4ff; }
.chara-bubble.chara-shigeru .chara-content, .chara-bubble.chara-keieisha .chara-content { background: #f7f7e8; }
.chara-bubble.chara-shigeru .chara-content::before, .chara-bubble.chara-keieisha .chara-content::before { border-right-color: #f7f7e8; }

@media (max-width: 600px) {
  .chara-bubble picture, .chara-bubble > img, .chara-bubble img { width: 44px; height: 44px; }
}