/* ==========================================================================
   グッズ販売ページ専用スタイル（/tokusetu/style3.css）
   -------------------------------------------------------------------------- */

/* ▼ ページ全体（白背景で囲む） */
.goods-page {
  background:#fff;
  padding:40px 0 60px;
}


/* ▼ 全グッズ共通情報：販売期間・販売リンク */
.goods-info {
  max-width:900px;
  margin:0 auto 24px;
  text-align:center;
}

.goods-info__period {
  font-weight:700;
  margin:0 0 8px;
}

.goods-info__link a {
  font-weight:800;
  color:#0ea5e9;
  text-decoration:none;
}

.goods-info__link a:hover,
.goods-info__link a:focus-visible {
  text-decoration:underline;
}



/* ▼ グッズ一覧（カードを縦に並べるだけ） */
.goods-list {
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}



/* ▼ 個別グッズカード（横並びレイアウト） */
.goods-card {
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 6px 20px rgba(15,23,42,.08);
  display:flex;
  align-items:flex-start;
  gap:18px;
}



/* 画像（左側固定） */
.goods-card__image {
  flex:0 0 260px;
  max-width:260px;
}

.goods-card__image img {
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid #e5e7eb;
  display:block;
  background:#fff;
}



/* テキストブロック（右側） */
.goods-card__meta {
  flex:1 1 auto;
  min-width:0;
}



/* グッズ名 */
.goods-card__name {
  margin:0 0 8px;
  font-size:1.05rem;
  font-weight:800;
}



/* 価格 */
.goods-card__price {
  margin:0 0 10px;
  font-size:1rem;
  font-weight:700;
}



/* 備考（← 例の文章） */
.goods-card__note {
  margin:0;
  font-size:0.9rem;
  color:#4b5563;
}


/* ▼ 画像が中央に来るタイミングで、テキストも全部中央寄せ */
@media (max-width: 640px) {

  .goods-card {
    flex-direction: column;
    padding: 14px 14px 16px;
  }

  .goods-card__image {
    margin: 0 auto;   /* 画像を中央に */
  }

  /* テキスト全部を中央寄せにする */
  .goods-card__meta,
  .goods-card__name,
  .goods-card__price,
  .goods-card__note {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}


 /* ▼ 画像が中央に来るタイミングで、テキストも全部中央寄せ 
@media (max-width: 640px) {

  .goods-card {
    flex-direction: column;
    padding: 14px 14px 16px;
    text-align: center;        /* ← 追加（カード内テキストを中央寄せ） 
  }

  .goods-card__image {
    margin: 0 auto;            /* 画像中央 
  }

  .goods-card__meta {
    text-align: center;       /* ← ここで親要素の中央寄せを引き継ぐ 
  }

  .goods-card__note {
    text-align: inherit;       /* ← ← 注釈も中央寄せに揃う 
  }
}
*/