/* =========================================================
   pages.css
   - “特定ページだけ”の見た目調整を書く
   - 共通部品化できるものは components.css へ
   ========================================================= */


/* =========================================================
   1) Index Page (TOP) 微調整
   - section-block の縦余白/内側余白を少し詰める
   - 見出し/注釈の間隔を整える
   ========================================================= */

.page-index .section-block{
  margin: 16px auto;
  padding: 7px;
}

@media (max-width: 640px){
  .page-index .section-block{
    margin: 14px auto;
    padding: 5px;
  }
}

.page-index .section-head{
  margin-bottom: 8px;
}

.page-index .section-note{
  margin: 0 0 8px 0;
}

.page-index .page-hero{
  margin-top: 8px;
}

.page-index .category-nav{
  margin-top: 10px;
}

@media (max-width: 640px){
  .page-index .category-nav{
    margin-top: 8px;
  }
}

/* 「店舗からのおしらせ（行）」を “軽いカード” に寄せる（影弱め） */
.page-index .notice-item--row{
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* store_notices.php：上のヘッダー直下の余白を揃える */
.page-store-notices .store-notices-section{
  margin-top: 10px;
}


/* =========================================================
   2) Store Page
   ========================================================= */

.page-store .section-card{
  max-width: 1100px;
}

/* 店舗ヒーローの見た目（padding / object-fit 等）は theme.css 側で統一 */
.store-hero-placeholder{
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pub-soft-hv, #f3f4f6);
  color: var(--pub-muted, #6b7280);
  border-radius: var(--pub-radius-lg, 16px);
  font-weight: 800;
  letter-spacing: .02em;
}

.affiliate-box{ margin: 8px auto; }

/* 店舗ページ：写真グリッド */
.page-store .store-photo-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 900px){
  .page-store .store-photo-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px){
  .page-store .store-photo-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-store .store-photo{
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.page-store .store-photo img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* 店舗名＋カテゴリ横並び */
.page-store .store-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-store .store-title-row h1{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

/* =========================================================
   2.5) 404 Page
   ========================================================= */
.page-404 .nf-head{
  margin: 0 0 10px 0;
  font-size: 16px;
}
.page-404 .nf-list{
  margin: 0;
  padding-left: 18px;
  color: color-mix(in srgb, var(--pub-text, #111827) 82%, transparent);
  line-height: 1.8;
}
.page-404 .nf-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.page-store .store-categories-inline{
  display: flex;
  gap: 6px;
}

@media (max-width: 640px){
  .page-store .store-title-row{
    align-items: flex-start;
  }
}


/* =========================================================
   3) Notice Detail（全体/店舗 共通）
   - 現行HTML：article.section-card.notice-detail を前提
   - レイアウトは section-card 側に任せ、ここは中身だけ整える
   ========================================================= */

/* 本文側の余白（読みやすさ） */
.notice-detail-body{
  padding: 14px;
}

.notice-detail-text{
  margin: 0;
  line-height: 1.9;
  color: var(--text-main, var(--text, #111827));
  white-space: normal;
}

.notice-detail-empty{
  color: var(--text-muted, #6b7280);
}

.notice-photos-section{
  margin-bottom: 16px;
}

/* 付随写真（詳細ページの画像） */
.notice-photos-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 900px){
  .notice-photos-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px){
  .notice-photos-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.notice-photo{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.notice-photo img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* 店舗ページ：写真セクション（別グリッド） */
.store-photos .photo-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px){
  .store-photos .photo-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.store-photos .photo-item{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.store-photos .photo-item img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}


/* =========================================================
   4) About Page
   - どの public テーマでも可読性を落とさない
   - 「light 以外＝ダーク」と決め打ちせず、テーマ変数（--pub-text など）を優先する
   ========================================================= */

/* Aboutカード本文色：テーマ変数を最優先（未定義なら既存変数へフォールバック） */
.page-about .section-card{
  color: var(--pub-text, var(--text-main, var(--text, #111827))) !important;
}

/* About内の本文要素は全部 “継承” に統一 */
.page-about .section-card p,
.page-about .section-card li,
.page-about .section-card ul,
.page-about .section-card ol{
  color: inherit !important;
}

/* リンク：アクセント（未定義なら通常リンク色へ） */
.page-about .section-card a{
  color: var(--pub-accent, var(--link, inherit)) !important;
}

/* リストの体裁 */
.page-about .section-card ul{
  margin: 10px 0 0;
  padding-left: 1.2em;
  line-height: 1.75;
}

.page-about .section-card li{
  margin: 6px 0;
  line-height: 1.75;
}

/* マーカー色（light/非lightで破綻しない） */
.page-about .section-card li::marker{
  color: var(--pub-muted, var(--text-muted, var(--muted, rgba(0,0,0,.55)))) !important;
  font-weight: 600;
}


/* =========================================================
   5) Footer
   - 変数（pub-*）に寄せるため、基本は css/theme.css 側で定義する
   - pages.css では “ページ固有” のみ扱う
   ========================================================= */

.section-meta{
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

.section-meta .section-note{
  font-size: 14px;
  opacity: .8;
}

.meta-links{
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

.meta-link{
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.meta-link:hover{
  opacity: .75;
}

.meta-links {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 0.9rem;
}

.meta-links > li {
  margin: 4px 0;
}

.meta-link {
  color: var(--link-color, #3366cc);
  text-decoration: none;
}

.meta-link:hover {
  text-decoration: none;
}

/* 箇条書きっぽさ */
.meta-links > li::before {
  content: "・";
  margin-right: 4px;
}

/* 兄弟サイトだけ横並び */
.meta-links-siblings::before {
  content: "・";
}

.meta-links-siblings a {
  margin-right: 8px;
  white-space: nowrap;
}

.meta-links {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 0.9rem;
}

.meta-links > li {
  margin: 4px 0;
}

.meta-link {
  color: var(--link-color, #3366cc);
  text-decoration: none;
}

.meta-link:hover {
  text-decoration: none;
}

/* 箇条書きっぽさ */
.meta-links > li::before {
  content: "・";
  margin-right: 4px;
}

/* 兄弟サイトだけ横並び */
.meta-links-siblings::before {
  content: "・";
}

.meta-links-siblings a {
  margin-right: 8px;
  white-space: nowrap;
}

.section-meta .meta-links {
  display: block;   /* ← これが重要 */
}

/* =========================================================
   Store badge groups（V1.9.7：縦ズレ解消）
   - flex + align-items:center だと “分類” と “ピル” の行ボックス差で
     微妙な上下ズレが出るので、Grid 2カラムで揃える
   ========================================================= */

/* 分類＋バッジを2カラムで揃える（縦ズレしない） */
.page-store .store-badge-group{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  align-items: start;
  margin-top: 6px;
}

/* 分類ラベル（左）：バッジと同じ“高さ感”に固定してズレを消す */
.page-store .store-badge-group__title{
  min-width: 3.5em;     /* 「営業 / 設備 / 決済」が揃う */
  font-size: 12px;
  font-weight: 700;
  color: rgba(10,20,30,.65);
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  line-height: 1;
  height: 26px;         /* ← badge（12px + 6+6 + border想定）と合わせる */
}

/* バッジ群（右側） */
.page-store .store-badge-group__items{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

/* =========================
   Global Notices (List)
   ========================= */

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-item--row {
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.notice-item--row .notice-link {
  display: flex;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}

.notice-item--row .notice-thumb {
  flex: 0 0 110px;
}

.notice-item--row .notice-thumb img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.notice-item--row .notice-body {
  flex: 1;
  min-width: 0;
}

.notice-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.notice-title {
  font-size: 15px;
  margin: 0 0 4px;
  line-height: 1.4;
}

.notice-snippet {
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* hover */
.notice-item--row:hover {
  background: #f5f7fb;
}

/* =========================
   store_notice.php 調整
   - タイトルの左はみ出し対策
   - 下部ボタン（一覧へ / 店舗ページへ）を見やすく
   ========================= */

/* ページ全体の左右余白を統一（パンくず〜本文〜ボタンまで） */
.page-store-notice {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 見出し（タイトル） */
.page-store-notice .section-head {
  margin: 10px 0 8px;
}

.page-store-notice .section-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  overflow-wrap: anywhere; /* 長いタイトルでもはみ出さない */
}

/* パンくずが別コンテナで左右ズレる場合の保険 */
.page-store-notice .page-breadcrumb,
.page-store-notice .breadcrumb,
.page-store-notice .breadcrumbs {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

/* 下部ボタン（見づらい問題を解消） */
.page-store-notice .notice-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 16px 0 28px;
}

.page-store-notice .notice-actions .back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  color: #1f2937;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

.page-store-notice .notice-actions .back-link:hover {
  background: rgba(0,0,0,.04);
}

.page-store-notice .notice-actions .back-link:focus-visible {
  outline: 2px solid rgba(21,101,192,.45);
  outline-offset: 2px;
}

/* スマホでボタンを押しやすく（全幅寄り） */
@media (max-width: 520px) {
  .page-store-notice .notice-actions {
    justify-content: stretch;
  }
  .page-store-notice .notice-actions .back-link {
    width: 100%;
  }
}

/* =========================
   store_notice 下部アクション：完全修正版
   ========================= */

.page-store-notice .notice-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px;
  margin: 24px -16px 0;           /* カード幅いっぱいに広げる */
  background: #f1f5f9;            /* ← 背景を敷く（重要） */
  border-top: 1px solid #dbe3ec;
}

/* 共通ボタン */
.page-store-notice .notice-actions .back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* 一覧へ（サブ） */
.page-store-notice .notice-actions .back-link:first-child {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

/* 店舗ページへ（メイン） */
.page-store-notice .notice-actions .back-link:last-child {
  background: #1565c0;
  color: #ffffff;
  border: 1px solid #1565c0;
  box-shadow: 0 4px 12px rgba(21,101,192,.25);
}

/* hover */
.page-store-notice .notice-actions .back-link:first-child:hover {
  background: #f8fafc;
}

.page-store-notice .notice-actions .back-link:last-child:hover {
  background: #0f4aa2;
}

/* スマホ：縦積み・全幅 */
@media (max-width: 520px) {
  .page-store-notice .notice-actions {
    flex-direction: column;
  }
  .page-store-notice .notice-actions .back-link {
    width: 100%;
  }
}

.page-store-notice .notice-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px;
  margin: 24px -16px 0;
  background: #f1f5f9;
  border-top: 1px solid #dbe3ec;
}

.page-store-notice .notice-actions .back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

/* サブ */
.page-store-notice .notice-actions .back-link--sub {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.page-store-notice .notice-actions .back-link--sub:hover {
  background: #f8fafc;
}

/* メイン */
.page-store-notice .notice-actions .back-link--primary {
  background: #1565c0;
  color: #ffffff;
  border: 1px solid #1565c0;
  box-shadow: 0 4px 12px rgba(21,101,192,.25);
}
.page-store-notice .notice-actions .back-link--primary:hover {
  background: #0f4aa2;
}

@media (max-width: 520px) {
  .page-store-notice .notice-actions {
    flex-direction: column;
  }
  .page-store-notice .notice-actions .back-link {
    width: 100%;
  }
}

/* ===== store_notice: actions (FORCE) ===== */
.page-store-notice .notice-actions a.back-link--sub{
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

.page-store-notice .notice-actions a.back-link--primary{
  background: #1565c0 !important;
  color: #ffffff !important;
  border: 1px solid #1565c0 !important;
  box-shadow: 0 4px 12px rgba(21,101,192,.25) !important;
}

.page-store-notice .notice-actions a.back-link--primary:hover{
  background: #0f4aa2 !important;
}