@charset "utf-8";
/*
  NEWS（news＝お知らせ）専用CSS
  読み込み：mu-plugin auen-news-style.php が個別ページと一覧ページで読む
  置き場  ：themes/webmagazine/css/news.css（ローカル正本 .claude/theme-www/news.css）
  設計    ：土台は auen-cmp.css と post-style-re.css。ここはお知らせの差分だけを持つ。
            他ページに漏れないよう、必ず .news_single / .news-body の中に閉じる。
  2026-09-18 新設 v1.0
*/

.news_single {
  --nw-ink: #1a1a1a;
  --nw-sub: #6b6b6b;
  --nw-line: #e2e2e2;
  --nw-bg-soft: #f6f5f3;
  --nw-accent: #1a1a1a;
  --nw-alert: #8a1f1f;
  --nw-measure: 42em;
}

/* ── 日付（タイトルの上） ─────────────────────────── */
.news_single .news-date {
  margin: 0 0 .6em;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: clamp(11px, 2.6vw, 13px);
  letter-spacing: .12em;
  color: var(--nw-sub);
}

.news_single .dc-headline-title {
  line-height: 1.45;
  letter-spacing: .01em;
}

/* ── 本文 ─────────────────────────────────────── */
.news-body {
  max-width: var(--nw-measure);
  color: var(--nw-ink);
  font-size: clamp(15px, 3.6vw, 17px);
  line-height: 1.95;
}

.news-body p { margin: 0 0 1.6em; }

.news-body > *:first-child { margin-top: 0; }

/* リード文（本文冒頭の要約）＝<p class="lead"> を想定 */
.news-body .lead {
  padding: 1.2em 1.4em;
  background: var(--nw-bg-soft);
  font-size: 1.02em;
  line-height: 1.9;
}

.news-body h2 {
  margin: 3em 0 1.1em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--nw-line);
  font-size: clamp(19px, 4.6vw, 23px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
}

.news-body h3 {
  margin: 2.4em 0 .9em;
  font-size: clamp(16px, 4vw, 19px);
  font-weight: 600;
  line-height: 1.6;
}

.news-body ul,
.news-body ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.news-body li { margin-bottom: .6em; }

.news-body a {
  color: var(--nw-accent);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.news-body a:hover { opacity: .6; }

.news-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
}

.news-body figure { margin: 2em 0; }
.news-body figcaption {
  margin-top: .7em;
  font-size: .85em;
  line-height: 1.7;
  color: var(--nw-sub);
  text-align: center;
}

.news-body blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 2px solid var(--nw-line);
  color: var(--nw-sub);
}

.news-body hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--nw-line);
}

/* ── 大事な一文（出荷停止・締切など）＝<p class="nw-note"> ───── */
.news-body .nw-note {
  margin: 2em 0;
  padding: 1.1em 1.3em;
  border: 1px solid var(--nw-line);
  border-left: 3px solid var(--nw-alert);
  background: #fff;
  font-size: .98em;
  line-height: 1.85;
}

/* ── 表（出荷・配送のスケジュールを想定） ───────────────── */
.news-body .nw-table-wrap { overflow-x: auto; margin: 2em 0; }
.news-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92em;
}
.news-body th,
.news-body td {
  padding: .8em .9em;
  border-bottom: 1px solid var(--nw-line);
  text-align: left;
  vertical-align: top;
}
.news-body th { font-weight: 600; white-space: nowrap; }

/* ── 導線（お問い合わせ・商品ページなど） ───────────────── */
.news-body .nw-cta {
  display: block;
  max-width: 22em;
  margin: 2.4em auto;
  padding: 1.05em 1.4em;
  border: 1px solid var(--nw-accent);
  background: #fff;
  color: var(--nw-accent);
  font-size: clamp(13px, 3.4vw, 15px);
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.news-body .nw-cta:hover {
  background: var(--nw-accent);
  color: #fff;
  opacity: 1;
}

.news-body .nw-cta--fill {
  background: var(--nw-accent);
  color: #fff;
}
.news-body .nw-cta--fill:hover { background: #000; }

/* ── 狭い画面 ─────────────────────────────── */
@media screen and (max-width: 767px) {
  .news-body { line-height: 1.85; }
  .news-body h2 { margin-top: 2.4em; }
}