/* ============================================================
   top.css — トップページ専用スタイル（cqw基準）
============================================================ */
/* ---- 加盟店一覧 ---- */
.member-list {
  padding: var(--space-lg) 0;
}

.member-list__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 4%;
}

.member-list__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* ---- カテゴリータブ ---- */
.member-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, 9em);
  gap: 0.25em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);

  /* 768px未満 */
  @media (width < 768px) {
      grid-template-columns: repeat(auto-fit, minmax(16cqw, 1fr));
  }
}

.member-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5em 0.25em 0.3em;
  border-radius: var(--radius-md);
  background: var(--color-bg-warm);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: center;
  word-break: keep-all;
  min-width: 0;
  
  /* 768px未満 */
  @media (width < 768px) {
    border-radius: 2cqw;
  }

  /* タブ自体をコンテナにして内部サイズの基準にする */
  container-type: inline-size;
  container-name: tab;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);

  &:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
  }

  &.is-active,
  &[aria-selected="true"] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}

.member-tab__icon {
  width: 24cqw;
  height: 24cqw;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* インラインSVGはfill="currentColor"で親のcolorを継承 */
  & svg {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
  }
}

.member-tab__label {
  /* タブコンテナ幅基準のフォントサイズ */
  font-size: max(8px, 11cqw); /* タブコンテナ幅基準 */
  font-weight: 500;
  white-space: nowrap;
}

/* ---- すべてタブ ---- */
/* 480px未満 */
@media (width < 480px) {
    /* すべてタブ */
    #tab-all {
        grid-column: 1;
        grid-row: 1;
    }

    /* すべて以外のタブ */
    .member-tab:not(#tab-all) {
        grid-row: 2;
    }
}

/* ---- タブパネル ---- */
.member-panel {
  animation: fadeSlideUp 0.3s ease;

  &[hidden] { display: none; }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 加盟店グリッド ---- */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
  gap: 1.5cqw;
  grid-auto-rows: auto auto auto;

  /* 768px未満 */
  @media (width < 768px) {
    grid-template-columns: repeat(auto-fill, minmax(max(130px, 22cqw), 1fr));
  }
}

.member-empty {
  padding: var(--space-md);
  color: var(--color-text-light);
  text-align: center;
  font-size: var(--text-sm);
  grid-column: 1 / -1;
}

/* ---- 加盟店カード ---- */
.member-card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  gap: 0;
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);

  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
}

.member-card__link {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  color: inherit;
}

.member-card__img-wrap {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-primary-light);
}

.member-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  .member-card:hover & { transform: scale(1.05); }
}

.member-card__img-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-light);
}

.member-card__body {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 0;
  padding: 0.5em;
  /* bodyをコンテナにしてカテゴリー・店舗名のフォントサイズの基準にする */
  container-type: inline-size;
  container-name: card;
}

.member-card__category {
  /* カードコンテナ幅基準 */
  font-size: max(10px, 5cqw); /* カードbodyコンテナ幅基準 */
  color: var(--color-secondary);
  font-weight: 500;
  margin-bottom: 2px;
  line-height: 1.2;
}

.member-card__name {
  /* カードコンテナ幅基準 */
  font-size: max(12px, 7cqw); /* カードbodyコンテナ幅基準 */
  font-weight: 700;
  line-height: 1.4;
}

/* 開閉ボタン */
.member-card.is-hidden {
  display: none;
}

.member-list__expand {
  text-align: center;
  margin-top: var(--space-md);
}

.member-list__expand-btn {
  font-size: 0.8em;
}

/* ============================================================
   商店街マップ
============================================================ */
.top-map {
  padding: var(--space-lg) 0;
  background-color: #ffffff;
  border-top: none;
  border-bottom: none;
}

.top-map__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 4%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2cqw;
  align-items: start;

  @container content (width < 768px) { grid-template-columns: 1fr; }
}

.top-map__lead {
  font-size: 1em;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin: var(--space-sm) 0 var(--space-md);
}

.top-map__accent-img {
  margin-top: var(--space-md);
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-primary-light);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity 0.5s ease;

    &.is-loaded { opacity: 1; }
  }

  @container site (width < 768px) { display: none; }
}

.top-map__canvas {
  width: 100%;
  height: max(240px, 30cqw);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.top-map__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.top-map__no-api {
  padding: var(--space-md);
  background: #fff8e5;
  border: 1px solid #f0c060;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: #7a5000;
}

/* ============================================================
   お知らせ
============================================================ */
.top-news {
  padding: var(--space-lg) 0;
}

.top-news__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 4%;
}

.news-cards {
  display: grid;
  /* PC：5列固定 */
  grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
  gap: 1em;
  margin-bottom: var(--space-md);

  /* 768px未満：1列リスト型 */
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* PC版カード */
.news-card {
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  container-type: inline-size;
  container-name: news-card;

  &:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

.news-card__link { display: block; color: inherit; }

.news-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-primary-light);
}

.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);

  .news-card:hover & { transform: scale(1.05); }
}

.news-card__img-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-light);
}

.news-card__badge {
  position: absolute;
  top: 2cqw;
  left: 2cqw;
  padding: 2px 8px;
  background-color: var(--color-primary-dark);
  color: #fff;
  font-size: 6cqw; /* news-cardコンテナ基準 */
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.news-card__body { padding: 4cqw; }

.news-card__date {
  display: block;
  font-size: 5cqw;
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.news-card__title {
  font-size: 6cqw;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-news__more { text-align: center; margin-top: var(--space-md); }

.top-news__more .btn { font-size: 0.8em; }

/* ============================================================
   SP（768px未満）：リスト型レイアウト（C案スタイル）
   サムネイル64px正方形 + 日付/タイトル + 矢印
============================================================ */
@media (width < 768px) {
  .news-card {
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    overflow: visible;

    &:first-child { border-top: 1px solid var(--color-border); }

    &:hover { transform: none; box-shadow: none; }
  }

  .news-card__link {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 0.75em;
    padding: 0.8em 0.2em;
  }

  .news-card__img-wrap {
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }

  .news-card__body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
  }

  .news-card__date {
    font-size: 0.75em;
    margin-bottom: 0;
  }

  .news-card__title {
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }

  /* 矢印 */
  .news-card__link::after {
    content: '→';
    color: var(--color-primary-dark);
    font-size: 1em;
    flex-shrink: 0;
  }

  /* NEWバッジ */
  .news-card__badge {
    font-size: 9px;
    padding: 1px 5px;
    top: 3px;
    left: 3px;
  }
}

/* ============================================================
   セクション背景の交互配置
============================================================ */
.about {
  position: relative;
  background-color: #ffffff;
  padding-top: var(--space-lg);
  overflow: hidden;
}

.about__body {
  position: relative;
  z-index: 1;
  padding-bottom: 4cqw;

  /* 767px→4cqw、648px→0pxにclampで線形変化
     計算：(幅 - 648px) / (767 - 648) × 4cqw
     ≈ clamp(0px, 3.36vw - 21.8px, 4cqw) */
  @media (width < 768px) {
    padding-bottom: clamp(0px, calc(3.36vw - 21.8px), 4cqw);
  }
}

.about__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 8%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4cqw;
  align-items: center;

  @container content (width < 768px) {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.about__text {
  /* font-sizeはbody基準（1em）をそのまま継承 */
  /* line-heightはデフォルト（bodyの1.8）を継承 */
  color: var(--color-text-muted);
}

.about__deco {
  min-height: max(100px, 12cqw);

  /* 中身がなければ高さを0に */
  &:empty {
    min-height: 0;
    height: 0;
  }
}

.about__wave {
  position: relative;
  z-index: 1;
  line-height: 0;
  margin-top: calc(-1 * var(--space-lg));
  margin-bottom: -3px; /* overflow:hiddenのサブピクセル誤差による隙間を消す */

  & svg {
    display: block;
    width: 100%;
    height: max(60px, 8cqw);
  }
}