/*
Theme Name: Fukuoka Local Premium
Theme URI: https://fukuoka-local.com
Author: 合同会社webデザイン
Author URI: https://fukuoka-local.com
Description: 白×深緑×ゴールドの高級感トーンで作るローカルディレクトリ用テーマ。地図×カード一覧、詳細ページのレビュー枠、SP固定CTAを搭載。
Version: 1.0.0
Text Domain: fukuoka-local-premium
*/

:root{
  --base:#FFFFFF;
  --ivory:#FAFAF5;
  --fg:#0F172A;
  --green:#004D40; /* Fukuoka Green */
  --green-2:#00695C;
  --gold:#D4AF37; /* Luxury Gold */
  --muted:#707070;
  --card:#FFFFFF;
  --border:#E5E5E5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:var(--ivory);
  line-height:1.7;
  font-family:"Noto Serif JP", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
a{color:var(--green-2);text-decoration:none}
a:hover{color:var(--green);text-decoration:underline}

.container{max-width:1280px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand a{color:var(--green)}
.nav-toggle{display:none}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:20px;align-items:center}
@media (max-width: 900px){
  .nav-toggle{display:inline-flex;border:1px solid var(--border);padding:8px 10px;border-radius:10px;background:#fff}
  nav ul{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--border);flex-direction:column;gap:0}
  nav ul.open{display:flex}
  nav ul li{padding:12px 16px;width:100%}
}

.hero{padding:80px 0 50px;background:linear-gradient(180deg, #FFFFFF 0%, #F5FFF8 100%)}
.hero h1{margin:0 0 10px 0;font-size:48px;color:var(--green)}
.hero p{margin:0;color:var(--muted)}

.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.card .thumb{aspect-ratio:16/9;object-fit:cover;width:100%;display:block;background:#eef2ff}
.card .pad{padding:16px}

.searchbox{display:flex;gap:10px;flex-wrap:wrap}
.searchbox select,.searchbox input{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;min-width:180px}
.searchbox button{padding:12px 18px;border-radius:12px;border:0;background:var(--green);color:#fff;font-weight:700}
.searchbox button:hover{background:var(--gold);color:#000}

.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#334155}
.badge.ok{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.badge.gold{background:#FFF7E1;border-color:#F3D98B;color:#7A5A00}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.filters select,.filters input,.filters button{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff}

.sidebar{position:sticky;top:90px}

.cta-bar{position:fixed;bottom:0;left:0;right:0;display:none;gap:8px;padding:10px;background:rgba(0,77,64,.95);border-top:1px solid var(--border);backdrop-filter:saturate(1.2) blur(6px)}
.cta-bar a{flex:1;display:inline-flex;justify-content:center;align-items:center;padding:12px;border-radius:12px;background:#fff;color:var(--green);font-weight:700;text-decoration:none}
@media (max-width:900px){.cta-bar{display:flex}}

.footer{padding:40px 0;color:#64748b;background:#fff;margin-top:40px}

hr.sep{border:0;border-top:1px solid var(--border);margin:28px 0}
blockquote.note{margin:0;padding:14px 16px;background:#FFF7E1;border-left:4px solid var(--gold);border-radius:10px}
small.muted{color:#64748b}
figure{margin:0}

/* ===== Hero / Featured Image の共通トリミング枠 ===== */
.media-hero{
  aspect-ratio: 16/9;          /* 比率固定でトリミング */
  width: 100%;
  max-height: 520px;           /* PC上限 */
  overflow: hidden;
  border-radius: 16px;
  background: #eef2ff;
}
.media-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* はみ出す分はトリミング */
  display: block;
}

/* 店舗詳細ページの大画像を抑制（既存 .thumb を上書き） */
.single-store .thumb{
  width: 100%;
  height: auto;                /* 念のための保険 */
  display: block;
}

/* ヘッダー下のヒーロー帯の余白を適正化 */
.hero{ padding: 48px 0 32px; }
.hero h1{
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.25;
}

/* 店舗詳細の見出し・余白をモバイル最適化 */
@media (max-width: 900px){
  .media-hero{ max-height: 320px; }       /* SP上限を低く */
  .grid-2{ grid-template-columns: 1fr; }  /* 2カラム→1カラム */
  .sidebar{ position: static; }           /* 固定を解除して詰まり防止 */
  .hero{ padding: 32px 0 18px; }
}

/* 下部固定CTAの高さを控えめに & 安全領域を確保 */
.cta-bar{
  gap: 6px;
  padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}
.cta-bar a{
  padding: 10px;               /* ボタン高さを少し薄く */
  font-size: 14px;
}

/* CTAが重ならないよう、本文下にスペースを確保 */
@media (max-width: 900px){
  main.container{ padding-bottom: 74px; } /* CTAバー分の余白 */
}