/* /_tpl/base.css — 共通CSS（hero部分を除く） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text); background: var(--bg); line-height: 1.9; font-size: 15px; -webkit-font-smoothing: antialiased; }
/* sticky ヘッダー（header-inner 56px + header-nav 約46px = 約110px）の下にアンカーが隠れないように */
[id] { scroll-margin-top: 120px; }
a { color: var(--accent); }

/* topbar */
.topbar { background: #f8f8f8; border-bottom: 1px solid #eee; padding: 0.3rem 0; text-align: center; font-size: 0.72rem; color: #999; }
/* スマホでは topbar 非表示（SEO用キーワード羅列なので隠して問題なし） */
@media (max-width: 768px) { .topbar { display: none; } }

/* 日本語本文の改行を意味単位で揃える（Budou-X 補完）。最低でも word-break/line-break で字割れ抑制 */
.about-text, .about-catch, .section-title,
.hero-x-sub, .hero-w-text, .hero-w-text p,
[class^="hero-"] h1, [class*=" hero-"] h1,
[class^="hero-"] p,  [class*=" hero-"] p,
.permit-name, .permit-desc, .sub-card-title, .sub-card-desc {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* header */
.header { background: var(--card-bg, #ffffff); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 56px; }
.header-logo { font-size: 1rem; font-weight: 800; color: var(--primary); text-decoration: none; letter-spacing: -0.5px; }
.header-tel { font-size: 0.8rem; color: var(--text-light); }
.header-tel strong { color: var(--primary); font-size: 1rem; margin-left: 0.3rem; }
.header-nav { background: var(--card-bg, #ffffff); border-top: 1px solid var(--border); }
.header-nav ul { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.header-nav li a { display: block; padding: 0.9rem 1.4rem; color: var(--text-light); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: all 0.2s; border-bottom: 2px solid transparent; white-space: nowrap; }
.header-nav li a:hover { color: var(--primary); border-bottom-color: var(--accent); }

/* main */
.main-wrap { max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.5rem 2rem; }
.section { background: var(--card-bg, #ffffff); border-radius: var(--radius, 4px); box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 2rem; overflow: hidden; }
.section-label { padding: 1.5rem 1.8rem 0; font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-light); }
.section-title { padding: 0.3rem 1.8rem 1.2rem; font-size: 1.4rem; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; }
.section-body { padding: 0 1.8rem 1.8rem; }

/* about */
.about-catch { font-size: 1.6rem; font-weight: 900; color: var(--primary); line-height: 1.5; margin-bottom: 1rem; letter-spacing: -0.5px; }
.about-text { font-size: 0.92rem; color: var(--text); line-height: 2; }
.about-text p { margin-bottom: 1rem; }
.about-text p:last-child { margin-bottom: 0; }

/* permits */
.permit-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.permit-list > li { display: flex; }
.permit-card { display: flex; flex-direction: column; flex: 1; padding: 0; background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: var(--radius, 4px); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
a.permit-card { cursor: pointer; }
.permit-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); border-color: var(--accent); }
a.permit-card:hover .permit-name { color: var(--accent); }
.permit-arrow { display: block; padding: 0 1rem 0.9rem; font-size: 0.72rem; font-weight: 700; color: var(--accent); letter-spacing: 1px; margin-top: auto; }
.permit-img { width: 100%; height: 140px; background-size: cover; background-position: center; background-color: var(--bg); position: relative; }
.permit-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18) 100%); }
.permit-info { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem 0.6rem; border-top: 3px solid var(--accent); }
.permit-badge { display: inline-block; width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center; background: var(--accent); color: white; font-weight: 700; font-size: 0.85rem; border-radius: 3px; flex-shrink: 0; }
.permit-name { font-size: 0.9rem; font-weight: 700; color: var(--primary); line-height: 1.4; }
.permit-desc { padding: 0 1rem 1rem; font-size: 0.78rem; color: var(--text-light); line-height: 1.75; flex: 1; }
.permit-meta { font-size: 0.78rem; color: var(--text-light); padding-top: 0.8rem; border-top: 1px solid var(--border); margin-top: 0.4rem; }
@media (max-width: 768px) { .permit-img { height: 110px; } .permit-list { gap: 0.6rem; } }

/* permit-list バリエーション（template_id ベースで配分） */

/* permit-style-2: 横並びコンパクト（画像左、テキスト右） */
.permit-list.permit-style-2 { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.permit-list.permit-style-2 .permit-card { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto 1fr auto; align-items: stretch; }
.permit-list.permit-style-2 .permit-img { grid-column: 1; grid-row: 1 / span 3; height: 100%; min-height: 110px; }
.permit-list.permit-style-2 .permit-info { grid-column: 2; grid-row: 1; border-top: none; border-left: 3px solid var(--accent); padding: 0.7rem 0.9rem 0.4rem; }
.permit-list.permit-style-2 .permit-desc { grid-column: 2; grid-row: 2; padding: 0 0.9rem 0.5rem; font-size: 0.74rem; }
.permit-list.permit-style-2 .permit-arrow { grid-column: 2; grid-row: 3; padding: 0 0.9rem 0.6rem; }
@media (max-width: 768px) { .permit-list.permit-style-2 { grid-template-columns: 1fr; } }

/* permit-style-3: ミニマル一覧（画像なし、罫線区切り） */
.permit-list.permit-style-3 { grid-template-columns: 1fr; gap: 0; background: var(--card-bg, #fff); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.permit-list.permit-style-3 .permit-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.permit-list.permit-style-3 .permit-card:last-child { border-bottom: 0; }
.permit-list.permit-style-3 .permit-card:hover { transform: none; box-shadow: none; background: var(--bg); border-color: var(--border); }
.permit-list.permit-style-3 .permit-img { display: none; }
.permit-list.permit-style-3 .permit-info { border-top: none; padding: 1rem 1.2rem 0.5rem; }
.permit-list.permit-style-3 .permit-desc { padding: 0 1.2rem 0.6rem; }
.permit-list.permit-style-3 .permit-arrow { padding: 0 1.2rem 1rem; margin-top: 0; }

/* permit-style-4: 大型バナー型（画像背景＋オーバーレイ） */
.permit-list.permit-style-4 { grid-template-columns: 1fr; gap: 1rem; }
.permit-list.permit-style-4 .permit-card { position: relative; min-height: 160px; overflow: hidden; border-radius: var(--radius); }
.permit-list.permit-style-4 .permit-img { position: absolute; inset: 0; height: 100%; }
.permit-list.permit-style-4 .permit-img::after { background: linear-gradient(120deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%); }
.permit-list.permit-style-4 .permit-info { position: relative; z-index: 1; height: 100%; min-height: 160px; display: flex; align-items: center; gap: 0.8rem; padding: 1.5rem 1.8rem; border-top: none; background: transparent; color: white; }
.permit-list.permit-style-4 .permit-name { color: white; font-size: 1.3rem; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.permit-list.permit-style-4 .permit-desc { display: none; }
.permit-list.permit-style-4 .permit-arrow { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); padding: 0; color: white; background: rgba(255,255,255,0.15); padding: 0.4rem 0.9rem; border-radius: 4px; backdrop-filter: blur(8px); }

/* permit-style-5: 正方形タイル（画像中心、ホバーで詳細） */
.permit-list.permit-style-5 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; }
.permit-list.permit-style-5 .permit-card { aspect-ratio: 1; position: relative; overflow: hidden; }
.permit-list.permit-style-5 .permit-img { position: absolute; inset: 0; height: 100%; }
.permit-list.permit-style-5 .permit-info { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent 0%, rgba(19,41,75,0.92) 70%); color: white; border-top: none; padding: 1.5rem 1rem 0.8rem; z-index: 1; }
.permit-list.permit-style-5 .permit-badge { background: var(--accent); }
.permit-list.permit-style-5 .permit-name { color: white; font-size: 0.85rem; }
.permit-list.permit-style-5 .permit-desc, .permit-list.permit-style-5 .permit-arrow { display: none; }

/* permit-style-6: 重厚マガジン型（左ボーダー＋背景グラデ） */
.permit-list.permit-style-6 .permit-card { border-radius: 0; border: 1px solid var(--border); border-left: 5px solid var(--primary); border-top: none; }
.permit-list.permit-style-6 .permit-info { background: linear-gradient(180deg, var(--bg) 0%, transparent 100%); border-top: none; padding: 1rem 1.2rem 0.6rem; }
.permit-list.permit-style-6 .permit-name { color: var(--primary); font-size: 1rem; }
.permit-list.permit-style-6 .permit-desc { padding: 0 1.2rem 0.7rem; line-height: 1.7; font-size: 0.82rem; }
.permit-list.permit-style-6 .permit-arrow { padding: 0 1.2rem 1rem; }

/* info table */
.info-table { width: 100%; border-collapse: collapse; }
.info-table tr { border-bottom: 1px solid var(--border); }
.info-table tr:last-child { border-bottom: none; }
.info-table th { width: 130px; padding: 0.8rem 0; text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--primary); vertical-align: top; white-space: nowrap; }
.info-table td { padding: 0.8rem 0; font-size: 0.88rem; word-break: break-word; }

/* access spots（将来拡張） */
.access-sub { font-size: 0.95rem; font-weight: 700; color: var(--primary); margin-top: 1.4rem; margin-bottom: 0.6rem; }
.access-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem; }
.access-list li { padding: 0.5rem 0.8rem; background: var(--bg); border-radius: 3px; font-size: 0.85rem; }

/* エリア・近隣リンク（旧版踏襲） */
.area-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 0 1.8rem 1.5rem; }
.area-col h4 { font-size: 0.88rem; font-weight: 700; color: var(--primary); margin-bottom: 0.6rem; }
.area-col ul { list-style: none; padding: 0; }
.area-col li { font-size: 0.82rem; padding: 0.3rem 0; }
.area-col li a { color: var(--accent); text-decoration: none; }
.area-col li a:hover { text-decoration: underline; }
@media (max-width: 768px) { .area-links { grid-template-columns: 1fr; padding: 0 1.2rem 1.2rem; } }

/* 全国×業種ハブ（クリック展開） */
.nationwide-section { background: var(--card-bg, #fff); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 0.6rem; }
.nationwide-summary { cursor: pointer; padding: 0.9rem 1.5rem; font-size: 0.9rem; font-weight: 700; color: var(--primary); list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; gap: 0.8rem; }
.nationwide-summary::-webkit-details-marker { display: none; }
.nationwide-summary::before { content: "▾"; font-size: 0.7rem; opacity: 0.7; }
.nationwide-section[open] .nationwide-summary::before { content: "▴"; }
.nationwide-summary-text { flex: 1; }
.nationwide-summary-hint { font-size: 0.72rem; color: var(--text-light); font-weight: 400; }
.nationwide-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem 0.7rem; padding: 0.4rem 1.5rem 1.2rem; }
.nationwide-grid a { color: var(--accent); text-decoration: none; font-size: 0.78rem; padding: 0.2rem 0; }
.nationwide-grid a:hover { text-decoration: underline; }
@media (max-width: 768px) { .nationwide-grid { grid-template-columns: repeat(3, 1fr); padding: 0.4rem 1rem 1rem; } }

/* AdSense スロット（タグ未挿入時はスペース確保のみ、挿入後は自動表示） */
.ad-slot { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; min-height: 0; }
.ad-slot:empty { display: none; }
.ad-slot.ad-hero-below { margin-top: 0.4rem; margin-bottom: 0.6rem; }
.ad-slot.ad-content-mid { margin: 0.5rem auto 1.5rem; }
.ad-slot.ad-content-bottom { margin: 0 auto 1.5rem; }
.ad-slot.ad-multiplex { margin: 1.5rem auto; }
@media (max-width: 768px) { .ad-slot { padding: 0 1rem; } }

/* footer */
.footer { background: var(--primary-dark, #0d1f3a); color: white; padding: 2.5rem 1.5rem 1.5rem; margin-top: 2rem; }
.footer-inner { max-width: 1080px; margin: 0 auto; }
.footer-company { font-size: 0.9rem; opacity: 0.9; margin-bottom: 1.2rem; line-height: 1.8; }
.footer-disclaimer { font-size: 0.75rem; opacity: 0.55; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.2rem; line-height: 1.7; margin-bottom: 0.8rem; }
.footer-disclaimer a { color: white; opacity: 0.9; }
.footer-meta { font-size: 0.68rem; opacity: 0.4; letter-spacing: 1px; }

@media (max-width: 768px) {
  .header-tel { display: none; }
  .header-nav li a { padding: 0.7rem 0.8rem; font-size: 0.78rem; }
  .info-table th { width: 100px; font-size: 0.72rem; }
  .info-table td { font-size: 0.82rem; }
  .about-catch { font-size: 1.3rem; }
}

/* ===== 公的データお墨付きバッジ（section-title 左に配置） ===== */
.section-title:has(.title-badge) {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.title-badge {
  width: 80px;
  height: 80px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .title-badge { width: 60px; height: 60px; }
}