/* =============================
   Theme / Variables
   ============================= */
:root{
  --brand-bg: #ff9900;
  --brand-fg: #ffffff;

  /* 右下ボタン */
  --to-top-size: 56px;
  --to-top-radius: 999px;
  --to-top-bg: #146c94;
  --to-top-fg: #ffffff;
  --to-top-shadow: 0 10px 24px rgba(0,0,0,0.18);
  --safe: env(safe-area-inset-bottom, 0px);

  /* カード固定設計（PC基準） */
  --card-h: 1180px;         /* ★カード全体固定 */
  --body-lines: 18;         /* ★本文は一定行数で固定（重なり防止） */
  --cap-lines: 3;           /* ★写真説明は常に3行枠で固定 */
  --img-h: 216px;           /* ★写真の高さ固定 */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo",
    sans-serif;
  line-height:1.6;
  color:#222;
  background:#fafafa;
  scroll-behavior:smooth;
}

/* =============================
   Header
   ============================= */
.site-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:56px;
  padding:12px 16px;
  text-align:center;
  background:var(--brand-bg);
  color:var(--brand-fg);
  height:180px;
}

.logo{
  height:180px;
  width:auto;
}

.header-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.2;
}

.header-text h1{
  margin:4px 0;
  font-size:2rem;
  line-height:1.1;
}

.header-text p{
  margin:2px 0;
  font-size:1rem;
  line-height:1.2;
}

p.note{
  font-size:0.85em;
  color:#fff;
}

/* =============================
   Search
   ============================= */
.search-wrapper{
  position:relative;
  display:inline-block;
  align-self:center;
}

#searchBar{
  margin-top:6px;
  padding:6px 36px 6px 10px;
  font-size:14px;
  width:240px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.4);
  background:#fff;
  color:#000;
  outline:none;
  position:relative;
  z-index:1;
}

#searchBar::placeholder{ color:#555; }

.clear-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  color:#777;
  width:28px;
  height:28px;
  border-radius:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:16px;
  z-index:2;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  opacity:0;
  pointer-events:none;
}

.search-wrapper.has-value .clear-btn{
  opacity:1;
  pointer-events:auto;
}

.clear-btn:hover{
  color:#000;
  border-color:rgba(0,0,0,0.2);
}

/* =============================
   Cards grid
   ============================= */
.cards{
  max-width:1200px;
  margin:24px auto 56px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
  align-items:stretch;
}

/* =============================
   Card (安定レイアウトの本体)
   ============================= */

/* ★カード直下の <br/>（写真間など）だけ無効化。見出し内の <br/> までは消さない */
.card > br{ display:none; }

.card{
  background:#fff;
  border-radius:12px;
  padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);

  height:var(--card-h);
  overflow:hidden;

  display:flex;              /* ★必ず flex */
  flex-direction:column;
}

/* ---------- 上部テキスト ---------- */
.card-genre{
  font-size:12px;
  color:#888;
  margin:0;
  text-align:center;
  line-height:1.2;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;
}

.card-store{
  font-size:24px;
  margin:2px 0 2px;          /* ★詰める */
  text-align:center;
  color:#ff4500;
  line-height:1.15;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;

  /* 2行分確保 */
  min-height:calc(24px * 1.15 * 2);
}

/* ★住所は常に2行分のスペース確保（2行住所でもズレない） */
.card-address{
  font-size:13px;
  margin:2px 0 0;
  text-align:left;
  line-height:1.35;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;

  min-height:calc(13px * 1.35 * 2);
}

.card-tel{
  font-size:13px;
  margin:2px 0 8px;
  text-align:left;
  line-height:1.35;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;

  min-height:calc(13px * 1.35 * 1);
}

/* ---------- 見出し（2つのh3をセンタリング＆行間詰め） ---------- */
.card-heading{
  font-size:21px;
  line-height:1.2;
  margin:0;                  /* ★デフォの大きい余白をゼロに */
  padding:0;
  text-align:center;

  /* デザインの良い色（濃い青緑系） */
  color:#0b5a6a;
  font-weight:800;

  /* 長文でも暴れない */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* 2つ目のh3だけ少しだけ間を空ける（広がり過ぎ防止） */
.card-heading + .card-heading{
  margin-top:2px;
}

/* ---------- 本文（写真と重ならないように固定枠） ---------- */
.card-body{
  font-size:16px;
  line-height:1.7;
  margin:10px 0 10px;
  text-align:left;

  /* ★固定枠（本文が写真にかぶらない） */
  height:calc(1.7em * var(--body-lines));
  overflow:hidden;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--body-lines);
}

/* ---------- 写真ブロック ---------- */
.card-photo{
  margin:6px 0 0;            /* ★詰める */
  flex:0 0 auto;
}

.card-photo + .card-photo{
  margin-top:10px;           /* 写真1→写真2の間 */
}

.card-photo img{
  display:block;
  width:100%;
  max-width:396px;
  height:var(--img-h);
  margin:0 auto;
  object-fit:cover;
  border-radius:8px;
}

/* ★写真説明は常に3行分確保（写真1も写真2も同条件） */
.card-photo figcaption{
  font-size:12px;
  line-height:1.5;
  margin-top:4px;
  margin-bottom:0;
  text-align:left;
  color:#555;

  height:calc(1.5em * var(--cap-lines));
  overflow:hidden;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--cap-lines);
}

/* ---------- ボタン（写真2説明の下／カード内センタリング固定） ---------- */
.card-button{
  margin-top:auto;           /* ★常に最下部へ押し下げ */
  align-self:center;         /* ★カード内センタリング */
  display:inline-block;

  padding:10px 22px;
  border-radius:10px;
  text-decoration:none;

  background:#146c94;
  color:#fff;
  font-size:14px;
  font-weight:700;

  white-space:nowrap;
}

.card-button:hover{ opacity:0.85; }

/* =============================
   Footer
   ============================= */
.site-footer{
  margin-top:40px;
  background:var(--brand-bg);
  color:var(--brand-fg);
  text-align:center;
  padding:18px 12px 22px;
}

.site-footer p{
  margin:4px 0;
  line-height:1.4;
  font-size:14px;
}

/* =============================
   右下固定「戻る」ボタン
   ============================= */
.to-top-btn{
  position:fixed;
  right:16px;
  bottom:calc(16px + var(--safe));
  z-index:9999;
  width:var(--to-top-size);
  height:var(--to-top-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 14px;
  border:none;
  border-radius:var(--to-top-radius);
  background:var(--to-top-bg);
  color:var(--to-top-fg);
  font-size:14px;
  font-weight:600;
  box-shadow:var(--to-top-shadow);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.to-top-btn .to-top-icon{ flex:0 0 auto; }

.to-top-btn:hover,
.to-top-btn:focus-visible{
  box-shadow:0 12px 28px rgba(0,0,0,0.22);
  transform:translateY(-1px);
  outline:none;
}

@keyframes toTopBob{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}

.to-top-btn.is-scrolling{
  animation:toTopBob 220ms ease-out;
}

@media (prefers-reduced-motion: reduce){
  .to-top-btn{ transition:none; }
  .to-top-btn.is-scrolling{ animation:none; }
}

/* =============================
   Responsive
   ============================= */
@media (max-width: 640px){
  :root{
    --to-top-size:60px;

    /* モバイルは改行増えるので少し高く */
    --card-h: 1280px;
    --body-lines: 20;
    --cap-lines: 3;
    --img-h: 216px;
  }

  .site-header{
    flex-direction:column;
    height:auto;
    padding:16px 12px;
    gap:12px;
  }

  .logo{ height:80px; }

  .header-text h1{ font-size:1.6rem; }
  .header-text p{ font-size:0.95rem; }

  .search-wrapper{
    width:100%;
    max-width:520px;
  }

  #searchBar{
    width:100%;
    font-size:16px;
    padding:12px 44px 12px 12px;
    border-radius:10px;
  }

  .clear-btn{
    right:10px;
    width:32px;
    height:32px;
    border-radius:16px;
    font-size:18px;
  }

  .cards{
    grid-template-columns:1fr;
    gap:14px;
    margin:16px auto 64px;
    padding:0 12px;
  }

  .card{
    border-radius:14px;
    padding:16px;
  }

  .to-top-btn{
    right:12px;
    bottom:calc(12px + var(--safe));
    padding:0;
    gap:0;
    font-size:0; /* 文字を隠してアイコンだけ */
  }

  .to-top-btn svg{
    width:22px;
    height:22px;
  }

  .to-top-btn .to-top-icon{ margin:0; }
}

/* タブレット（2カラム） */
@media (min-width: 641px) and (max-width: 960px){
  :root{
    --card-h: 1220px;
    --body-lines: 19;
    --cap-lines: 3;
  }

  .cards{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }

  .to-top-btn{
    right:14px;
    bottom:calc(14px + var(--safe));
  }
}

/* ===== 見出し（h3.card-heading）重なり防止・最終上書き ===== */

.card-heading{
  font-size:21px;
  line-height:1.35;
  margin:0;
  padding:0;
  height:auto;
  overflow:visible;
  text-align:center;
  font-weight:700;
  color:#0b5a6a;
}

.card-heading + .card-heading{
  margin-top:6px;
}