/* ブランドサイトのお知らせ一覧（ダイアログを持たないサイト向けの最小限の骨組み）。
   色や書体はサイト側の変数・継承に任せる。静的サイトに .news__list の意匠があるサイトでは読み込まない。 */
.news__list--links { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.news__list--links li { border-bottom: 1px solid currentColor; }
.news__list--links .news__item {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 0.4rem 1rem; align-items: baseline;
  padding: 1.1rem 0.2rem; color: inherit; text-decoration: none; font: inherit; text-align: left;
}
.news__list--links a.news__item:hover .news__title { text-decoration: underline; text-underline-offset: 0.2em; }
.news__list--links .news__date { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; opacity: 0.75; font-size: 0.9em; }
.news__list--links .news__tag { font-size: 0.72em; letter-spacing: 0.12em; border: 1px solid currentColor; padding: 0.1em 0.6em; border-radius: 999px; opacity: 0.85; }
.news__list--links .news__body { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; }
.news__list--links .news__store { font-size: 0.8em; opacity: 0.7; }
.news__list--links .news__summary { margin: -0.5rem 0.2rem 1rem; font-size: 0.92em; opacity: 0.85; }
.news__list--links .btn__arrow { opacity: 0.6; }
/* 前後のページ送り（お知らせページ、30件ずつ）。ボタンの見た目はサイトの .btn に任せる */
.news__pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 2.4rem; }
.news__pager .news__pager-next { justify-self: end; }
.news__pager .news__pager-pos { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; opacity: 0.7; font-size: 0.85em; }
@media (max-width: 40rem) {
  .news__list--links .news__item { grid-template-columns: auto 1fr; }
  .news__list--links .news__tag { grid-column: 2; justify-self: start; }
  .news__list--links .news__body { grid-column: 1 / -1; }
  .news__list--links .btn__arrow { display: none; }
}

/* ── カード型の一覧（アイキャッチ、2026-10-01） ─────────
   行の一覧（日付 / 種別 / 本文 / 矢印）をやめ、横に並ぶカードにする。
   画像のあるカードは上に横いっぱいの写真、無いカードは文字だけ。
   色はサイトの文字色から作る（明るい地・暗い地のどちらでも成り立つ）。
   サイト側の .news__item の指定より強くするため ul.news__list を添える */
ul.news__list, ul.news__list--links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.2rem;
  border: 0; list-style: none; margin: 0; padding: 0; align-items: stretch;
}
ul.news__list > li { border: 0; display: flex; }
ul.news__list .news__item {
  --card-pad: 1.15rem; --card-r: 8px;
  width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "thumb thumb" "date tag" "body body" "arrow arrow"; gap: 0.55rem 0.8rem; align-items: start;
  padding: var(--card-pad); border-radius: var(--card-r); overflow: hidden; text-decoration: none; color: inherit; font: inherit; text-align: left;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
ul.news__list .news__item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 4%, transparent); }
ul.news__list .news__thumb { grid-area: thumb; width: auto; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0.4rem; }
ul.news__list .news__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
ul.news__list .news__date { grid-area: date; }
ul.news__list .news__tag { grid-area: tag; justify-self: start; }
ul.news__list .news__body { grid-area: body; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
ul.news__list .news__title { font-size: 1.05rem; line-height: 1.5; }
ul.news__list .btn__arrow { grid-area: arrow; justify-self: end; display: inline; }
ul.news__list .news__summary { margin: 0.2rem 0 0; }
ul.news__list > li > .news__summary { display: none; }
/* ダイアログ・詳細の写真（見出しの下に大きく） */
.dialog__hero, .entry__hero { margin: 0 0 1.4rem; }
.dialog__hero img, .entry__hero img { display: block; width: 100%; height: auto; max-height: 24rem; object-fit: cover; border-radius: 6px; }
/* 妖狐煙屋本部のカード（news-card）: 横に並べ、写真を上に */
.news-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items: stretch; }
a.news-card, .news-card { display: flex; flex-direction: column; }
.news-card__thumb { order: -1; margin: 0 0 0.9rem; }
.news-card__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.news-card__body { flex: 1 1 auto; }
.news-card:hover { transform: translateY(-3px); }
@media (max-width: 40rem) {
  /* スマホは 1 列の横長カード。左に写真、右に日付・種別・見出しだけ */
  ul.news__list, ul.news__list--links, .news-list { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  ul.news__list .news__item {
    --card-pad: 0.7rem; grid-template-columns: 6.8rem auto minmax(0, 1fr); grid-template-rows: auto auto;
    grid-template-areas: "thumb date tag" "thumb body body"; column-gap: 0.7rem; row-gap: 0.3rem; align-items: center;
  }
  ul.news__list .news__thumb { align-self: stretch; position: relative; margin: calc(-1 * var(--card-pad)) 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); min-height: 5rem; }
  ul.news__list .news__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  ul.news__list .news__date { font-size: 0.7rem; }
  ul.news__list .news__tag { font-size: 0.6rem; }
  ul.news__list .news__title { font-size: 0.9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  ul.news__list .news__store { font-size: 0.68rem; }
  ul.news__list .btn__arrow { display: none; }
  ul.news__list > li > .news__summary { display: none; }
  /* 妖狐煙屋本部のカード */
  a.news-card, .news-card {
    display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); grid-template-areas: "thumb head" "thumb title";
    column-gap: 0.7rem; row-gap: 0.25rem; align-items: center; padding: 0.7rem 0.7rem 0.7rem 0.9rem;
  }
  .news-card__thumb { grid-area: thumb; order: 0; margin: -0.7rem 0; align-self: stretch; position: relative; min-height: 5rem; }
  .news-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 4px; }
  .news-card__head { grid-area: head; margin-bottom: 0; }
  .news-card__title { grid-area: title; font-size: 0.9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .news-card__body, .news-card__more { display: none; }
  .news-card:hover { transform: none; }
}

/* ── 写真の中に文字を重ねる（2026-10-01） ──
   写真のあるカードは写真を全体に敷き、下側の暗い帯の上に日付・種別・見出しを載せる */
ul.news__list .news__item.has-thumb {
  position: relative; isolation: isolate; aspect-ratio: 16 / 10; height: auto; color: #fff;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "date tag" "body body"; align-content: end; align-items: center;
  border-color: rgba(255, 255, 255, 0.12); background: #222;
}
ul.news__list .news__item.has-thumb .news__thumb { position: absolute; inset: 0; margin: 0; width: auto; min-height: 0; z-index: -2; }
ul.news__list .news__item.has-thumb .news__thumb img { position: static; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform 0.6s ease; }
ul.news__list .news__item.has-thumb:hover .news__thumb img { transform: scale(1.04); }
ul.news__list .news__item.has-thumb::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.86) 100%); }
ul.news__list .news__item.has-thumb .news__date { color: rgba(255, 255, 255, 0.82); }
ul.news__list .news__item.has-thumb .news__tag { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
ul.news__list .news__item.has-thumb .news__title { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
ul.news__list .news__item.has-thumb .news__store { color: rgba(255, 255, 255, 0.78); }
ul.news__list .news__item.has-thumb .btn__arrow { display: none; }
/* 妖狐煙屋本部のカード */
a.news-card.has-thumb, .news-card.has-thumb {
  position: relative; isolation: isolate; aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden;
}
.news-card.has-thumb .news-card__thumb { position: absolute; inset: 0; margin: 0; order: 0; z-index: -2; }
.news-card.has-thumb .news-card__thumb img { position: static; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.news-card.has-thumb::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.86) 100%); }
.news-card.has-thumb .news-card__head { margin-bottom: 0.3rem; }
.news-card.has-thumb .news-card__date { color: rgba(255, 255, 255, 0.82); }
.news-card.has-thumb .news-card__title { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card.has-thumb .news-card__body, .news-card.has-thumb .news-card__more { display: none; }
@media (max-width: 40rem) {
  ul.news__list .news__item.has-thumb { aspect-ratio: 2 / 1; grid-template-columns: auto 1fr; grid-template-areas: "date tag" "body body"; --card-pad: 0.85rem; }
  ul.news__list .news__item.has-thumb .news__title { font-size: 0.98rem; }
  a.news-card.has-thumb, .news-card.has-thumb { aspect-ratio: 2 / 1; display: flex; padding: 0.8rem 0.9rem 0.8rem 1.1rem; }
  .news-card.has-thumb .news-card__title { font-size: 0.98rem; }
}
/* 写真の上の種別バッジは塗りつぶす（透明の枠だけだと写真に埋もれる）。種別ごとの色 */
ul.news__list .news__item.has-thumb .news__tag,
.news-card.has-thumb .news-card__cat {
  border-color: transparent; color: #1A1613; background: rgba(255, 255, 255, 0.92); opacity: 1; font-weight: 600;
}
ul.news__list .news__item.has-thumb.is-event .news__tag,   .news-card.has-thumb.is-event .news-card__cat   { background: #E2B85A; color: #1A1613; }
ul.news__list .news__item.has-thumb.is-store .news__tag,   .news-card.has-thumb.is-store .news-card__cat   { background: #4E5B78; color: #fff; }
ul.news__list .news__item.has-thumb.is-brand .news__tag,   .news-card.has-thumb.is-brand .news-card__cat   { background: #4E5B78; color: #fff; }
ul.news__list .news__item.has-thumb.is-recruit .news__tag, .news-card.has-thumb.is-recruit .news-card__cat { background: #2E7D6B; color: #fff; }
ul.news__list .news__item.has-thumb.is-closed .news__tag,  .news-card.has-thumb.is-closed .news-card__cat  { background: #A23A3A; color: #fff; }