/* /css/pages.css */

/* =========================
   ヒーローエリア
   ========================= */
.hero {
  margin: 8px 0 16px;
  height: 320px;
  overflow: hidden;
  border-radius: 4px;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* 写真がないときの代替ヒーロー */
.hero.hero-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  background: linear-gradient(135deg, var(--theme-color), #ffffff);
  color: #fff;
}

/* hero 内テキスト */
.hero-empty .hero-title {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 4px;
}

.hero-empty .hero-tagline {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .hero {
    height: 220px;
  }

  .hero-empty .hero-title {
    font-size: 18px;
  }

  .hero-empty .hero-tagline {
    font-size: 13px;
  }
}

/* =========================
   フォトギャラリー
   ========================= */
.photo-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-list li {
  flex: 1 1 140px;
}

.photo-list img {
  width: 100%;
  border-radius: 4px;
}

/* =========================
   店舗個別ページ用
   ========================= */

/* 店舗ヘッダー */
.store-header {
  margin-bottom: 8px;
}

.store-header h1 {
  margin-top: 4px;
}

.store-header .tagline {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #555;
}

/* 関連店舗リスト（中身は .card を再利用） */
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* /css/pages.css の一番下あたりに追加 */

/* トップページ：スマホ時はカードを1列・最大幅にする */
/*
@media (max-width: 600px) {
  .page-index .list .card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
*/

/* ================================
   SP用：TOPカードをフル幅にする
   ================================ */
@media (max-width: 600px) {

  /* コンテナ側の制限を外す */
  .container,
  .page-index {
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* セクションは少しだけ余白をつける */
  .page-index .page-hero,
  .page-index .page-search,
  .page-index .category-nav,
  .page-index .section-block {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* リストとカード本体 */
  .page-index .list {
    margin: 0;
    padding: 0 0 8px;
    gap: 8px;
  }

  .page-index .card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 8px;   /* 好みで 0 にしてもOK */
  }
}

/* ================================
   PC用：TOP(index) を 3 列固定にする
   ================================ */
@media (min-width: 900px) {

  /* TOP のカード一覧3種類（人気 / 新着 / すべて）をグリッド化 */
  .page-index .list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
  }

  /* 各カードはグリッドの1セルとして全面を使う */
  .page-index .card {
    width: 100% !important;
    max-width: 100% !important;
    flex: initial !important;   /* flex の幅指定を無効化 */
    box-sizing: border-box;
  }
}

/* ================================
   PC用：店舗ページの「関連するお店」を 3 列にする
   ================================ */
@media (min-width: 900px) {
  .related-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
  }

  .related-list .card {
    width: 100%;
    max-width: 100%;
    flex: initial;  /* ← flex 指定を無効化 */
    box-sizing: border-box;
  }
}

/* =========================
   店舗詳細：基本情報・メモ・リンク
   ========================= */

/* 基本情報ボックス */
.info-box {
  background: #fafafa;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid #e0e0e0;
}

.info-box p {
  margin: 4px 0;
}

.info-box strong {
  display: inline-block;
  min-width: 5em;
  font-weight: 600;
  color: #444;
}

/* メモ／紹介 */
.memo-box {
  background: #fffef5;
  border-radius: 4px;
  padding: 10px 12px;
  border: 1px solid #f0e4b2;
  font-size: 0.9rem;
  line-height: 1.6;
}

.memo-box p {
  margin: 0;
}

/* リンク集 */
.links-box {
  background: #f7f9ff;
  border-radius: 4px;
  padding: 10px 12px;
  border: 1px solid #d0ddff;
  font-size: 0.9rem;
  line-height: 1.5;
}

.links-box p {
  margin: 4px 0;
}

.links-box a {
  word-break: break-all;
}

/* 更新情報（PV 含む） */
.item-updated {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #666;
}

/* PC のとき、基本情報・メモ・リンクを少しだけ締める */
@media (min-width: 900px) {
  .section-block .info-box,
  .section-block .memo-box,
  .section-block .links-box {
    max-width: 720px;
  }
}

/* =========================
   店舗詳細ページ 仕上げ調整
   ========================= */

/* 基本情報・メモ・リンクを少し揃える */
.page-store .info-box,
.page-store .memo-box,
.page-store .links-box {
  margin-bottom: 16px;
}

/* ラベル（住所・電話・アクセス…）の揃え */
.page-store .info-box p {
  margin: 4px 0;
}

.page-store .info-box strong {
  display: inline-block;
  min-width: 5em;    /* ラベル幅をそろえる */
  font-weight: 600;
  color: #444;
}

/* PCでは中央寄せ＆横幅を抑える */
@media (min-width: 900px) {
  .page-store .info-box,
  .page-store .memo-box,
  .page-store .links-box {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }
}

/* 見出し（基本情報／リンク／メモ）の見た目を軽く整理 */
.page-store .section-block > h2 {
  font-size: 1.1rem;
  margin: 0 0 10px;
  border-left: 4px solid var(--theme-color);
  padding-left: 8px;
}

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.section-more{
  font-size:0.9rem;
  text-decoration:none;
  white-space:nowrap;
}
.section-more:hover{
  text-decoration:underline;
}