/* =========================================================
   components.css
   - 再利用できる“部品”だけを書く
   - セクション / カード / ナビ / バッジ / ページャ / お知らせ etc
   - ページ固有（indexだけ等）は pages.css へ
   ========================================================= */

/* =========================
   Section (共通)
   - max-width 1100 / 左右padding 14px をここで統一
========================= */
.section-block {
  max-width: 1100px;
  margin: var(--pub-section-y, 22px) auto;
  padding: 0 var(--pub-gutter, 14px);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------
   Page title row
   - .section-head が「ページタイトル行」として使われる場合（main.page-index の直下）
   - breadcrumb / meta / actions と同じ “面” に揃える
--------------------------------------------------------- */
.page-index > .page-breadcrumb{ margin-bottom: 8px; }

.page-index > .section-head{
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 0 14px;
}

.page-index > .section-head h1{
  margin: 0;
  font-size: 22px;
  min-width: 0; /* flex item shrink */
  overflow-wrap: break-word;
  word-break: break-word;
}

.section-head h2 {
  font-size: 18px;
  margin: 0;
}

/* section-card 内で使う小見出し（inline style 排除用） */
.section-title{
  margin: 0 0 10px;
  font-size: 16px;
}

.section-note {
  margin: 0 0 10px 0;
  color: var(--pub-muted, #6b7280);
  font-size: var(--pub-font-sm, 13px);
}

.section-more {
  font-size: var(--pub-font-sm, 13px);
  color: var(--pub-accent, #1565c0);
  text-decoration: none;
}

/* “カード枠”の箱（中身を囲いたい時） */
.section-card {
  max-width: 1100px;
  margin: 18px auto;
  padding: var(--pub-card-pad, 14px);
  background: var(--pub-surface, #fff);
  border: 1px solid var(--pub-border, rgba(0,0,0,.08));
  border-radius: var(--pub-radius-lg, 16px);
  box-shadow: var(--pub-shadow, 0 6px 18px rgba(0,0,0,.06));
}

/* 見出し横の小ラベル（任意） */
.section-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--pub-accent, #1565c0);
  background: color-mix(in srgb, var(--pub-accent, #1565c0) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pub-accent, #1565c0) 18%, transparent);
}

/* =========================
   List (カード一覧のUL)
========================= */
.list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: var(--pub-gap, 8px);

  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

/* =========================
   Card（支援所カード）
========================= */

/* 1) 親（li.item.card）で列幅を作る：右余白が出にくい */
.list > li.item.card{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 calc((100% - 16px) / 3); /* gap*2 */
  max-width: calc((100% - 16px) / 3);
}

/* 2) 本体 .card は「箱」として素直に */
.card {
  width: auto;
  min-width: 0;

  background: var(--pub-surface, #fff);
  border-radius: var(--pub-radius-md, 12px);
  border: 1px solid var(--pub-border, rgba(0,0,0,.08));
  overflow: hidden;

  display: flex;
  flex-direction: column;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-sizing: border-box;
}

.card-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* 端末幅で列数を落とす */
@media (max-width: 900px){
  .list > li.item.card{
    flex-basis: calc((100% - 8px) / 2); /* gap*1 */
    max-width:  calc((100% - 8px) / 2);
  }
}
@media (max-width: 520px){
  .list > li.item.card{
    flex-basis: 100%;
    max-width:  100%;
  }
}

.card-thumb-area{
  position: relative;
  overflow: hidden;
  background: var(--pub-soft-hv, #f3f4f6);
}

.card-thumb,
.card-thumb--placeholder{
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-thumb--placeholder{
  background: var(--pub-border, #e5e7eb);
}

.card-title-overlay{
  position:absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 2;
  pointer-events:none;
}

.card-title-overlay-text{
  display:inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.58);
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-body{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: var(--pub-gap, 8px);
}

/* =========================
   Card Details (折り畳み)
   - JS不要: <details>/<summary>
========================= */
.card-details{
  margin: 10px 12px 12px;
  padding: 10px 12px;
  background: var(--pub-card-bg, rgba(255,255,255,.92));
  border: 1px solid var(--pub-border, rgba(0,0,0,.08));
  border-radius: 14px;
}


.card-details-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  font-weight: 800;
  font-size: var(--pub-font-sm, 13px);
  line-height: 1.2;

  /* Safari対策：summary を flex にしない */
  display: block;
  width: 100%;

  padding: 10px 44px 10px 14px; /* 右は矢印分を確保 */
  border: 1px solid var(--pub-border, rgba(0,0,0,.14));
  border-radius: 999px;

  /* 文字が埋もれないよう、背景とコントラストを強める */
  background: rgba(255,255,255,.92);
  color: var(--pub-text, #111827);

  position: relative;
}


/* Chrome等のデフォルト矢印を自前で揃える */
.card-details-summary::-webkit-details-marker{ display:none; }

.card-details-summary::after{
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
}


.card-details[open] .card-details-summary::after{ content: '▴'; }


.card-details-body{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* 初期表示のバッジ群は少し詰める */
.badge-wrap--brief{ margin-top: 2px; }

.card-title-inline{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
}


/* カード内のバッジ群（inline style 排除） */
.card-body .badge-wrap{ margin-top: 2px; }

.card-tagline{
  margin:0;
  color: color-mix(in srgb, var(--pub-text, #111827) 78%, transparent);
  line-height: 1.6;
  font-size: var(--pub-font-sm, 13px);
}

.card-address{
  margin:0;
  color: color-mix(in srgb, var(--pub-text, #111827) 85%, transparent);
  line-height: 1.6;
  font-size: var(--pub-font-sm, 13px);
}

.card-meta{
  font-size: var(--pub-font-xs, 12px);
  color: var(--pub-muted, #666);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

/* chip（更新/今日PV 等） */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--pub-font-xs, 12px);
  font-weight: 800;
  line-height: 1.2;
  background: color-mix(in srgb, var(--pub-accent, #2563eb) 8%, var(--pub-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--pub-accent, #2563eb) 14%, var(--pub-border, #e5e7eb));
  color: color-mix(in srgb, var(--pub-text, #111827) 82%, transparent);
}

.card-meta .chip{ margin: 0; }

.hot-list .chip {
  background: color-mix(in srgb, #ef4444 10%, var(--pub-surface, #fff));
  border-color: color-mix(in srgb, #ef4444 16%, var(--pub-border, #e5e7eb));
  color: #b91c1c;
}

.latest-list .chip:not(:first-child) {
  display: none;
}

/* hover（PCだけ） */
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.12);
  }
}

/* focus（キーボード） */
.card-link:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:3px;
  border-radius:12px;
}

/* カード型：モバイル画像高さ */
@media (max-width: 719px) {
  .card-thumb,
  .card-thumb--placeholder { height: 120px; }
  .card-title-overlay-text{ font-size: 15px; }
}
@media (min-width: 720px) and (max-width: 979px) {
  .card-title-overlay-text{ font-size: 14px; }
}
@media (min-width: 980px) {
  .card-title-overlay-text{ font-size: 13px; }
}

/* =========================
   Breadcrumb
========================= */
.page-breadcrumb {
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 0 14px;
  font-size: 12px;
  color: var(--pub-muted, #6b7280);
}

.page-breadcrumb a {
  color: var(--pub-accent, #2563eb);
  text-decoration: none;
}

/* =========================
   Page Hero (共通見出し)
========================= */
.page-hero {
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 0 14px;
}

.page-hero h1 {
  margin: 0;
  font-size: 22px;
}

.page-hero p {
  margin: 8px 0 0 0;
  color: #6b7280;
  font-size: 13px;
}

@media (max-width: 520px){
  .page-hero h1{ font-size: 20px; }
  .page-hero p{ font-size: 13px; }
}

/* =========================
   Category Nav（カテゴリチップ）
========================= */
.category-nav {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 14px;
}

.category-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* モバイル：カテゴリチップを横スクロールにして“縦に伸びすぎ”を防ぐ */
@media (max-width: 640px) {
  .card-thumb--placeholder{ height: 100px; }

  .category-nav-list{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .category-nav-list > li{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .category-chip{
    padding: 2px 6px;
  }
  .cat-label{
    font-size: 13px;
  }
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration: none;
}

.category-chip:hover {
  background: rgba(21,101,192,.06);
  border-color: rgba(21,101,192,.22);
}

.category-chip:focus-visible {
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 2px;
}

.category-chip.is-active {
  background: rgba(21,101,192,.06);
  border-color: rgba(21,101,192,.22);
}

.cat-icon { font-size: 16px; }
.cat-label { font-size: 13px; font-weight: 700; }

/* =========================
   Pager
========================= */
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 16px 0 0;
  flex-wrap: wrap;
}

.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
  background: #fff;
}

.pager .is-current {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}

/* =========================
   Badge / Links
========================= */
.badge-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background: var(--pub-soft-bg, #f9fafb);
  border: 1px solid color-mix(in srgb, var(--pub-text, #111827) 12%, var(--pub-border, #e5e7eb));
  color: color-mix(in srgb, var(--pub-text, #111827) 92%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.badge:hover{
  border-color: color-mix(in srgb, var(--pub-text, #111827) 20%, var(--pub-border, #e5e7eb));
}

/* v1.8.1: バッジ分類ラベル（公開側：分類→バッジ の順を見せる） */
.badge-group-label{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:800;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background: color-mix(in srgb, var(--pub-text, #111827) 6%, transparent);
  border: 1px dashed color-mix(in srgb, var(--pub-text, #111827) 22%, transparent);
  color: color-mix(in srgb, var(--pub-text, #111827) 78%, transparent);
}

.badge.badge-cat{
  background: color-mix(in srgb, var(--pub-accent, #2563eb) 10%, transparent);
  border-color: color-mix(in srgb, var(--pub-accent, #2563eb) 22%, transparent);
  color: color-mix(in srgb, var(--pub-accent2, #1d4ed8) 70%, var(--pub-text, #111827));
}

.badge.badge-cat::before{
  content:"🏷";
  font-size: 12px;
  line-height:1;
  opacity:.9;
}

.links-box{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.links-box a{
  text-decoration:none;
  display:inline-flex;
}

/* =========================
   Notices（共通）
   - “カード一覧”と “行一覧” を分けて持つ
   - hover/focus を両方に統一
========================= */

/* 共通：リンク見た目 + アニメ */
.notice-item,
.notice-item--row {
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

/* focus（キーボード） */
.notice-item:focus-visible,
.notice-item--row:focus-visible {
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 3px;
  border-radius: 16px;
}

/* hover（PCだけ） */
@media (hover:hover) and (pointer:fine){
  .notice-item:hover,
  .notice-item--row:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.12);
  }
}

/* 1) カード型（画像+本文） */
.notice-list {
  display: grid;
  gap: 14px;
}

.notice-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* cover が無い場合は「左の空き列」を作らない */
.notice-item.no-cover{
  grid-template-columns: 1fr;
}

/* 表示だけ（クリック不可） */
.notice-item--disabled{
  pointer-events: none;
  opacity: .92;
}

.notice-cover {
  width: 140px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.notice-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notice-content { min-width: 0; }

.notice-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #6b7280;
  font-size: 12px;
  flex-wrap: wrap;
}

.notice-title {
  font-weight: 800;
  line-height: 1.35;
  margin-top: 4px;
}

.notice-body {
  margin-top: 6px;
  color: #374151;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;

  /* 長いURL/連続文字で横溢れしない */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* カード型：モバイル */
@media (max-width: 640px) {
  .notice-item { grid-template-columns: 1fr; }
  .notice-cover { width: 100%; height: 160px; }
}

/* 2) 行型（1行：日付/店名/タイトル） */
.notice-list--rows {
  display: grid;
  gap: 2px;
}

.notice-item--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* 親自身も縮められる（ellipsis安定） */
  min-width: 0;
}


/* ---------------------------------------------------------
   Notice row (media variant)
   - cover画像がある「行カード」を TOP などで使う
   - マークアップ： .notice-item.notice-item--row.notice-item--media
     ├ .notice-thumb (optional)
     ├ .notice-body
     └ .notice-row-arrow
--------------------------------------------------------- */
.notice-item--row.notice-item--media{
  justify-content: flex-start;
  align-items: stretch;
}

.notice-item--row.notice-item--media .notice-thumb{
  flex: 0 0 110px;
  width: 110px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.notice-item--row.notice-item--media .notice-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.notice-item--row.notice-item--media .notice-content{
  flex: 1 1 auto;
  min-width: 0;
}

.notice-item--row.notice-item--media.no-cover .notice-content{
  margin-left: 0;
}

/* モバイル：縦積み + 大きめサムネ */
@media (max-width: 640px){
  .notice-item--row.notice-item--media{
    flex-direction: column;
    align-items: stretch;
  }
  .notice-item--row.notice-item--media .notice-thumb{
    width: 100%;
    height: 160px;
  }
  .notice-item--row.notice-item--media .notice-row-arrow{
    align-self: flex-end;
  }
}


/* 行内レイアウト：省略のため “縮み許可” を強制 */
.notice-item--row .notice-row-line {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;

  overflow: hidden;
}

/* 日付（固定） */
.notice-item--row .notice-row-date {
  flex: 0 0 auto;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 店名（長い時は省略） */
.notice-item--row .notice-row-store {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;

  font-weight: 900;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: 0.02em;

  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);

  /* 全テーマ：primary があれば追従 */
  color: var(--color-primary, #111);

  /* Fallback（color-mix 非対応でも破綻しない） */
  background: rgba(0,0,0,.04);

  /* Modern */
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: color-mix(in srgb, currentColor 35%, transparent);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 18em;
}

.notice-row-store::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.95;
}

.notice-row-store:hover,
.notice-row-store:focus-visible {
  background: rgba(0,0,0,.06);
  background: color-mix(in srgb, currentColor 20%, transparent);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  outline: none;
}

/* Dark theme contrast */
[data-public-theme="dark"] .notice-row-store,
[data-admin-theme="dark"] .notice-row-store {
  background: rgba(255,255,255,.06);
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}


/* タイトル：省略の主役 */
.notice-item--row .notice-row-title {
  flex: 1 1 auto;
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* 右端（矢印など） */
.notice-item--row .notice-row-arrow {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* =========================
   Sort Links（並び替え）
========================= */
.sort-links{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sort-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-decoration:none;
  font-size: 13px;
  font-weight: 700;
}

.sort-links a:hover{
  background: rgba(21,101,192,.06);
  border-color: rgba(21,101,192,.22);
}

.sort-links a.is-active{
  background: rgba(21,101,192,.10);
  border-color: rgba(21,101,192,.35);
  box-shadow: 0 0 0 3px rgba(21,101,192,.10);
}

/* =========================
   Result Bar（並び替えバー）
========================= */
.page-result-wrap{
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 14px;
}

.page-result-bar{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;

  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.page-result-meta{
  color: #6b7280;
  font-size: 13px;
  white-space: nowrap;
}

.page-sort{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================
   Badge Search（選択状態の見やすさ / 導線）
========================= */
.badge-selected-summary{
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(21,101,192,.06);
  border: 1px solid rgba(21,101,192,.16);
}

.badge-result-head{
  margin-bottom: 10px;
}

.badge-result-title{
  margin: 0;
}

.badge-result-meta{
  margin: 0;
  white-space: nowrap;
}

/* =========================
   Notice meta & Return links（共通）
   - 上部の「日付/カテゴリ」＝ .notice-meta-bar
   - 下部の「一覧へ/支援所へ」＝ .notice-actions + .back-link
   - “右寄せグレー” を基準に統一
========================= */

/* 上部：日付/カテゴリ（軽いメタ情報） */
.notice-meta-bar{
  max-width:1100px;
  margin:8px auto 0;
  padding:0 14px;

  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;

  color:#6b7280;
  font-size:12px;
}
.notice-meta-bar .notice-date{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.notice-meta-bar .notice-cat{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
  background: rgba(21,101,192,.10);
  border: 1px solid rgba(21,101,192,.18);
  color:#1565c0;
}

/* 下部：戻る系ボタン列（右寄せ） */
.notice-actions{
  max-width:1100px;
  margin:14px auto 0;
  padding:0 14px;

  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* 戻るチップ */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height:34px;
  padding:0 12px;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);

  text-decoration:none;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#374151;

  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.back-link:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.16);
}

/* optional modifiers (used by store_notice.php etc.) */
.back-link--sub{
  background: rgba(255,255,255,.72);
  color:#374151;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: none;
}

.back-link--primary{
  background: var(--pub-accent, #1565c0);
  color: #ffffff;
  border: 1px solid color-mix(in srgb, var(--pub-accent, #1565c0) 92%, #000);
  box-shadow: 0 4px 12px rgba(21,101,192,.22);
}
.back-link--primary:hover{
  background: color-mix(in srgb, var(--pub-accent, #1565c0) 86%, #000);
  border-color: color-mix(in srgb, var(--pub-accent, #1565c0) 78%, #000);
}
.back-link:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:3px;
}

/* dark系（data-public-theme運用）でも破綻しない */
html[data-public-theme]:not([data-public-theme="light"]) .back-link{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
}
html[data-public-theme]:not([data-public-theme="light"]) .back-link:hover{
  background: rgba(255,255,255,.10);
}

/* store_notices の右上戻る（同じ見た目・右寄せ） */
.page-store-notices .notice-actions{
  margin-top: 10px;
}

/* =========================
   Button row（右寄せ）
========================= */
.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-row .btn{
  width:auto;
}

.btn-row.btn-row-right{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-row.btn-row-right .btn{
  width: auto;
}

/* store_notices：右上アクションの btn が横幅100%で潰すのを防ぐ */
.store-notices-actions .btn{
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* =========================
   Card edit button (overlay)
========================= */
.card-shell{
  position: relative;
}

.card-shell .card-edit{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  min-height: 28px;

  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  color: #fff !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);

  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);

  backdrop-filter: none;
  cursor: pointer;
}

.card-shell .card-edit:hover{
  background: rgba(0,0,0,.88);
  border-color: rgba(255,255,255,.75);
}

.card-shell .card-edit:focus-visible{
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 3px;
}

html[data-public-theme]:not([data-public-theme="light"]) .card-shell .card-edit{
  background: rgba(0,0,0,.82);
  border-color: rgba(255,255,255,.65);
}

/* =========================
   Store Hero / Store Photos（支援所ページ）
   - 影響範囲：.page-store のみ（他ページに波及させない）
   - 目的：
     1) 写真は 3列（PC）/ 2列（tablet）/ 1列（mobile）
     2) キャプションは「はみ出さない」+「主張しすぎない」
     3) カバー（store-hero）は下の文字行を無くし、画像内に控えめに重ねる
========================= */

/* ----- Hero（カバー） ----- */
.page-store .store-hero.section-card{
  padding: 0;            /* section-card の内側余白を消す */
  overflow: hidden;      /* 角丸で画像を切る */
  position: relative;
}

.page-store .store-hero-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.page-store .store-hero-img{
  display: block;
  width: 100%;
  height: var(--pub-cover-h, 360px);
  max-width: 100%;
  object-fit: cover;
  background: var(--pub-soft-bg, #f3f4f6);
}

@media (max-width: 640px){
  .page-store .store-hero-img{
    height: var(--pub-cover-h-sp, 240px);
  }
}

/* 画像内に控えめに重ねる（※HTMLに残っている div を活かす） */
.page-store .store-hero-caption{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;

  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 12px;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;

  color: #fff;
  background: rgba(17,24,39,.52);
  border: 1px solid rgba(255,255,255,.28);
  text-shadow: 0 1px 0 rgba(0,0,0,.40);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* ----- Photos（一覧） ----- */
.page-store .store-photos{ overflow: hidden; } /* 横溢れ保険 */

.page-store .store-photos .photo-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

.page-store .store-photos .photo-item{
  display: flex;
  flex-direction: column;
  gap: 6px;

  width: 100%;
  min-width: 0;          /* 省略を効かせる */

  text-decoration: none;
  color: inherit;
}

/* サムネは揃えて見せる（必要なら 1/1 に変更） */
.page-store .store-photos .photo-item img{
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* caption：シンプルに1行省略（“札”はやめる） */
.page-store .store-photos .photo-caption{
  display: block;
  max-width: 100%;
  min-width: 0;

  align-self: flex-start;  /* avoid full-width stretch in flex column */

  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pub-muted, #6b7280);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* dark系テーマでも読みやすく（範囲限定） */
html[data-public-theme]:not([data-public-theme="light"]) .page-store .store-hero-caption{
  background: rgba(0,0,0,.58);
}

/* =========================
   Public Buttons (shared)
   - about / platform / index の CTA 用
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);

  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  background: rgba(255,255,255,.85);
  color: #111827;

  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.18);
}
.btn:focus-visible{
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 3px;
}

.btn-primary{
  background: var(--pub-accent, #1565c0);
  border-color: color-mix(in srgb, var(--pub-accent, #1565c0) 75%, #000 0%);
  color: #fff;
}
.btn-primary:hover{
  background: var(--pub-accent2, #1d4ed8);
  border-color: color-mix(in srgb, var(--pub-accent2, #1d4ed8) 75%, #000 0%);
}

.btn-ghost{
  background: transparent;
  color: var(--pub-accent, #1565c0);
  border-color: rgba(21,101,192,.25);
}
.btn-ghost:hover{
  background: rgba(21,101,192,.08);
  border-color: rgba(21,101,192,.35);
}

html[data-public-theme]:not([data-public-theme="light"]) .btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
html[data-public-theme]:not([data-public-theme="light"]) .btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}
html[data-public-theme]:not([data-public-theme="light"]) .btn-ghost{
  /*
    NOTE:
    一部環境で「data-public-theme が light 以外」なのに背景が白系のままになると、
    .btn-ghost が “白文字＋透明背景” になって見えなくなる。
    → accent色＋薄い背景を付けて常に視認できるようにする。
  */
  background: color-mix(in srgb, var(--pub-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--pub-accent) 35%, transparent);
  color: var(--pub-accent);
}

/* ---------------------------------------------------------
   FIX: primary button must keep accent styling even when
   public theme is not "light".
   - Without this, the generic `.btn` override above wins and
     the primary button can become "white on white".
   --------------------------------------------------------- */
html[data-public-theme]:not([data-public-theme="light"]) .btn-primary{
  background: var(--pub-accent, #1565c0);
  border-color: color-mix(in srgb, var(--pub-accent, #1565c0) 75%, #000 0%);
  color: #fff;
}
html[data-public-theme]:not([data-public-theme="light"]) .btn-primary:hover{
  background: var(--pub-accent2, #1d4ed8);
  border-color: color-mix(in srgb, var(--pub-accent2, #1d4ed8) 75%, #000 0%);
}

/* ---------------------------------------------------------
   FIX: Buttons inside light cards (section-card) should stay
   readable even when public theme is not "light".
   - The global non-light override makes `.btn` white-on-dark.
   - But our cards are light surfaces even in non-light themes.
   - So we re-apply the "light" button styles inside cards.
   --------------------------------------------------------- */
.section-card .btn{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.12);
  color: #111827;
}
.section-card .btn:hover{
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.18);
}
.section-card .btn-ghost{
  background: transparent;
  color: var(--pub-accent, #1565c0);
  border-color: rgba(21,101,192,.25);
}
.section-card .btn-ghost:hover{
  background: rgba(21,101,192,.08);
  border-color: rgba(21,101,192,.35);
}
/* =========================================================
   Site Header (Global Nav)
   - HOME / Platform / System / About / Contact
   ========================================================= */
.site-header{
  margin: 12px 0 18px;
  position: sticky;
  top: 10px;
  z-index: 50;
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--pub-border, #e5e7eb) 70%, transparent);
  border-radius: 16px;
  /* theme friendly (light themes like sakura/ocean/grape are NOT dark) */
  background: color-mix(in srgb, var(--pub-surface, #ffffff) 76%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--pub-shadow, 0 10px 26px rgba(17,24,39,.08));
}
.site-header__brand{
  font-weight: 800;
  text-decoration:none;
  color: inherit;
  white-space: nowrap;
}
.site-header__nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
  min-width: 0;
}

/* mobile: keep the header compact and prevent wrapping */
@media (max-width: 720px){
  .site-header{ top: 6px; }
  .site-header__inner{ gap: 10px; }
  .site-header__nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    max-width: 54vw;
  }
}
.site-header__link{
  text-decoration:none;
  color: inherit;
  opacity: .92;
  padding: 6px 10px;
  border-radius: 10px;
  position: relative;
}
.site-header__link:hover{
  background: color-mix(in srgb, var(--pub-soft-hv, #f3f4f6) 70%, transparent);
}
.site-header__link.is-active{
  opacity: 1;
  font-weight: 800;
  background: color-mix(in srgb, var(--pub-soft-bg, #f9fafb) 70%, transparent);
}
.site-header__link.is-active::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pub-accent, #2563eb) 60%, transparent);
}
.site-header__link--primary{
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--pub-border, #e5e7eb) 75%, transparent);
  background: color-mix(in srgb, var(--pub-soft-bg, #f9fafb) 62%, transparent);
}
.site-header__btn{
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pub-border, #e5e7eb) 75%, transparent);
  background: var(--pub-accent, var(--theme-color, #2563eb));
  color: #fff;
}

/* NOTE:
   fix:  Public themes like sakura/ocean/grape are light themes.
   Do NOT force non-light themes into dark header styling.
   If a truly dark public theme is added later, add an explicit selector for it.
*/



/* =========================================================
   Notice box (contact flash)
   - ok/ng を目立たせる
   ========================================================= */
.notice-box{
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.notice-box--ok{
  border: 2px solid rgba(46,160,67,.35);
  background: rgba(46,160,67,.12);
}
.notice-box--ok::before{ content: "✓ "; }
.notice-box--ng{
  border: 2px solid rgba(220,53,69,.35);
  background: rgba(220,53,69,.12);
}


/* fix:  desktop cards should not be stretched to row height (prevents empty space under badges) */
.list.is-desktop{
  align-items: flex-start;
}

/* =========================
   Mobile density tuning (fix)
   - スマホで“間延び”しやすいカード余白を少し詰める
========================= */
@media (max-width: 640px){
  .section-card{ margin: 14px auto; }
  .notice-item{ padding: 10px; gap: 10px; }
  .notice-item--row{ padding: 12px 14px; }
}

/* ===============================
   Header CTA Buttons
   =============================== */

.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-outline {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #2d3748;
  background: transparent;
  color: #2d3748;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}

.btn-outline:hover {
  background: #f1f5f9;
}

@media (max-width: 768px) {
  .nav-cta {
    gap: 6px;
  }

  .btn-outline,
  .btn-primary {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* ===============================
   Header CTA Buttons (DEMO)
   =============================== */

.site-header__cta{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #2d3748;
  background:transparent;
  color:#2d3748;
  font-weight:600;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

.btn.btn-outline:hover{
  background:#f1f5f9;
}

@media (max-width: 768px){
  .site-header__cta{ gap:6px; }
  .btn.btn-outline,
  .site-header__btn{
    padding:6px 10px;
    font-size:13px;
  }
}

/* ===============================
   Site Header layout fix (DEMO)
   =============================== */

.site-header__inner{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;              /* 押し出し防止 */
}

.site-header__nav{
  display:flex;
  gap:12px;
  flex:1 1 auto;               /* navが伸びすぎても折り返せる */
  min-width: 220px;
}

.site-header__cta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;            /* 右寄せ */
  flex:0 0 auto;
  white-space:nowrap;
}

/* 既存CSSで消されていても“必ず出す” */
.site-header__cta .btn.btn-outline{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #2d3748;
  background:transparent;
  color:#2d3748;
  font-weight:600;
  text-decoration:none;
  line-height:1;
}

.site-header__cta .btn.btn-outline:hover{
  background:#f1f5f9;
}

@media (max-width: 768px){
  .site-header__nav{ min-width: 100%; } /* ナビが折り返し */
  .site-header__cta{ margin-left:0; }   /* スマホは下段でもOK */
  .site-header__cta .btn.btn-outline,
  .site-header__btn{
    padding:6px 10px;
    font-size:13px;
  }
}

/* ===============================
   FORCE: demo login button visible
   =============================== */

.site-header__cta,
.site-header__inner{
  position: relative;
  z-index: 50;
}

.btn.btn-outline{
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  position: relative !important;
  z-index: 9999 !important;

  transform: none !important;
  filter: none !important;

  /* 見えない原因が「同色」でも必ず見えるようにする */
  background: #ffffff !important;
  color: #111827 !important;
  border: 2px solid #111827 !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}