/* /_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; }

/* 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: 2.5rem 1.5rem; }
.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; } }

/* 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; }

/* 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; }
}