/* ============================================================================
   news.html 専用スタイル
   v0.9.13j-fix119（2026-06-01）: inline <style> 外部 CSS 化（R4 案 X 先行ページ、堅牢性最優先）
   読込順: cookie-consent → variables → base → style → home → page-hero → news
   ============================================================================ */

/* news.html 固有スタイル — 質素な作り（design-spec §20.9）。Phase 5 まで静的ダミー 5 件 */

html { scroll-snap-type: none !important; }
section { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }

/* 2026-06-17 平田氏指示: hero を about と統一。about は body padding-top 指定なし＝共有 0 のため、旧 desktop/tablet 80px を撤去し全幅で 0 に揃える（hero のヘッダークリアは page-hero.css の padding-top:124px が担う）。mobile は元々 0 で不変 */

/* ==== Section 共通 ==== */
.news-section { padding: 80px 0; }
.news-section .container { max-width: 920px; margin: 0 auto; padding: 0 24px; }
  /* v0.9.13j-fix116: セクション内 eyebrow override 削除（home.css base .eyebrow + body.pd-b10 override 統一規約に移譲） */
.news-section > .container > h2 {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-t6, 28px);
  font-weight: 500;
  text-align: center;
  color: var(--c-sub-deep-ocean, #2F5D62);
  margin: 0 0 16px;
  line-height: 1.5;
}
.news-section > .container > .section-lead {
  text-align: center;
  font-size: var(--fs-t3, 14px);
  color: var(--c-text-gray, #555);
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto 40px;
}
/* 2026-06-12: モバイルのセクション見出し（h2・リード）を about の左揃えに統一。desktop は中央寄せ凍結 */
@media (max-width: 767px) {
  .news-section > .container > h2,
  .news-section > .container > .section-lead { text-align: left; }
}

@media (max-width: 1023px) { .news-section { padding: var(--sec-pad-tablet, 64px) 0; } }
/* 2026-06-11: モバイル上下 30px・左右インセット 40px を TOP に統一（従来 56px / 24px） */
@media (max-width: 767px)  { .news-section { padding: 30px 0; } .news-section .container { padding: 0 calc(5% + 20px); } }

/* ==== お知らせ一覧（縦リスト 5 件、質素） ==== */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-border-color, #DEE2E6);
}
.news-item {
  display: grid;
  grid-template-columns: 120px 110px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 8px;
  border-bottom: 1px solid var(--c-border-color, #DEE2E6);
  transition: background 0.25s;
}
.news-item:hover {
  background: var(--c-bg-mint, #E8F5F5);
}
@media (max-width: 767px) {
  /* 2026-06-12: 共有 home.css の .news-list li{grid 80px 1fr} が本文を 80px 列に潰すため、news 側で高特異度の全幅積み重ねに上書き（1行目=日付+カテゴリ／2行目=タイトル／3行目=本文インデント）。home.css は編集不可 */
  .news-list li.news-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 20px 4px;
  }
  /* 2026-06-12: 1 行目をカプセル（カテゴリ）→ 日付 の順に入れ替え（mobile） */
  .news-list li.news-item .news-category-chip { order: -1; }
  .news-list li.news-item > .news-body {
    flex-basis: 100%;
    margin-top: 2px;
  }
  .news-list li.news-item .news-excerpt {
    padding-left: 1em;
  }
}

.news-date {
  font-size: 13px;
  color: var(--c-text-gray, #555);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* カテゴリチップ */
.news-category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  white-space: nowrap;
  height: 22px;
  width: fit-content;
}
/* カテゴリカラールール（v0.9.13j-fix9）:
   - お知らせ (cat-info): ocean 塗り（中立・基本）
   - キャンペーン (cat-campaign): turquoise-400 塗り（前向き・魅力）
   - メディア掲載 (cat-media): 白背景 + turquoise ボーダー & テキスト（情報、アウトライン型）
   - 休業日情報 (cat-closed): copper-500 塗り（警告系として brand rule 整合）
   Copper は警告系（必須・キャンセル料・遅延・注意喚起・休業）のみ使用、誤用禁止（design-spec line 1456） */
.news-category-chip.cat-info {
  background: var(--c-sub-deep-ocean, #2F5D62);
  color: #fff;
}
.news-category-chip.cat-campaign {
  background: var(--turquoise-400, #57C3C2);
  color: #fff;
}
.news-category-chip.cat-media {
  background: var(--c-brand-white, #FAFAFA);
  color: var(--turquoise-400, #57C3C2);
  border: 1px solid var(--turquoise-400, #57C3C2);
}
.news-category-chip.cat-closed {
  background: var(--copper-500, #C87A56);
  color: #fff;
}

.news-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.news-title {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-t4, 16px);
  font-weight: 600;
  color: var(--c-sub-deep-ocean, #2F5D62);
  line-height: 1.6;
  margin: 0;
}
.news-excerpt {
  font-size: 13px;
  color: var(--c-text-gray, #555);
  line-height: 1.8;
  margin: 0;
}

/* 「もっと見る」CTA（Phase 5 で動的化、現状はプレースホルダー） */
.news-more-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.news-more-cta button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--c-brand-white, #FAFAFA);
  color: var(--ocean-500, #2F5D62);
  border: 1px solid var(--turquoise-400, #57C3C2);
  border-radius: var(--radius-pill, 999px);
  font: inherit;
  font-size: var(--fs-t3, 14px);
  letter-spacing: 0.08em;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ==== A7 アクセシビリティ ==== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==== scroll-reveal ==== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.9s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== 2026-06-17: tablet(768-1023px) 調整。TOP(index.html L708-718) の tablet 基準を再現＝本文セクションを flat 40px ガター＋上下 40px に統一（media と同型）。
   - .news-section .container を flat 40px（news.css:18 の max-width:920/padding:0 24px=詳細度0,2,0 を後勝ち上書き）。
   - .news-section 上下 padding を 40px（news.css:43 の var(--sec-pad-tablet,64px)→64px を後勝ち上書き。mobile(≤767) は min-width:768 で除外＝news.css:45 の 30px が不変）。
   - HERO/breadcrumb の container は page-hero.css 共通＝既完了の about/contact と同じく shared 32px を据え置き。
   - news-list（tablet は home.css:697 base `90px 100px 1fr` が支配）は不変。footer-cta は news に無し（fix10 削除）。
   desktop(≥1024)・mobile(≤767) は一切不変。共有 home.css/style.css/page-hero.css は不変（news.css 内で完結）。 ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .news-section .container { max-width: none; padding: 0 40px; }
  .news-section { padding-top: 40px; padding-bottom: 40px; }
}
/* ===== 2026-07-05: お知らせ全文の details 展開（page-news.php・タイトルタップで開閉） ===== */
.news-body > summary { list-style: none; cursor: pointer; }
.news-body > summary::-webkit-details-marker { display: none; }
.news-expand-hint { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--ocean-500, #2F5D62); text-decoration: underline; }
.news-body[open] .news-expand-hint { display: none; }
.news-content { margin-top: 10px; font-size: 14px; line-height: 1.9; color: var(--text, #333); }
.news-content p { margin: 0 0 10px; }