/* =====================================================
  News Detail (news/ 配下)
  - 既存 styles.css の雰囲気は残しつつ
  - 余白/線/タイポ中心の“現代フラット寄り”に調整
  - 影は最小限（立体感を出しすぎない）
===================================================== */

/* news ページだけトーンを軽く整える */
body.news-page{
  --nd-accent: var(--nav-purple, #5d2aa6);
  --nd-accent2: var(--brand-deep, #bfa5ff);
  --nd-line: rgba(60, 40, 110, 0.14);
  --nd-soft: rgba(93, 42, 166, 0.07);
  --nd-soft2: rgba(191, 165, 255, 0.18);
  --nd-surface: rgba(255,255,255,0.92);
}

/* fixed header の下に潜らないように */
.news-page main{ padding-top: 92px; }
@media (max-width: 720px){
  .news-page main{ padding-top: 12px; }
}

/* 記事全体 */
.nd-wrap{ max-width: 980px; margin: 0 auto; padding: 18px 16px 36px; }

.nd-breadcrumb{
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0 10px;
}
.nd-breadcrumb a{ color: inherit; text-decoration: none; }
.nd-breadcrumb a:hover{ text-decoration: underline; }
.nd-breadcrumb .sep{ opacity: .7; }

/* ヒーロー（タイトル + メタ） */
.nd-hero{
  background: linear-gradient(180deg, var(--nd-soft2), rgba(255,255,255,0.0));
  border: 1px solid var(--nd-line);
  border-radius: 18px;
  padding: 18px 18px 16px;
}

.nd-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: space-between;
}

.nd-meta-left{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.nd-date{ color: var(--muted); font-size: 13px; }

.nd-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--nd-line);
  background: rgba(255,255,255,0.75);
  color: var(--nd-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}

.nd-title{
  margin: 12px 0 10px;
  font-family: 'Poppins','Zen Maru Gothic',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.18;
  font-size: 30px;
  color: #2f2348;
}

@media (max-width: 720px){
  .nd-hero{ padding: 14px 14px 12px; border-radius: 16px; }
  .nd-title{ font-size: 24px; }
}

.nd-lead{
  margin: 0;
  color: #4a3f5e;
  font-size: 15.5px;
  line-height: 1.85;
}

/* シェア/アクション */
.nd-actions{ display:flex; gap: 8px; align-items:center; }
.nd-btn{
  appearance: none;
  border: 1px solid var(--nd-line);
  background: rgba(255,255,255,0.72);
  color: #2f2348;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nd-btn:hover{ background: rgba(255,255,255,0.9); }
.nd-btn:active{ transform: translateY(1px); }

.nd-btn--primary{
  border-color: rgba(93,42,166,0.25);
  background: linear-gradient(90deg, rgba(93,42,166,0.14), rgba(191,165,255,0.24));
  color: var(--nd-accent);
}

/* 記事本文の土台 */
.nd-article{
  margin-top: 16px;
  background: var(--nd-surface);
  border: 1px solid var(--nd-line);
  border-radius: 18px;
  padding: 18px;
}
@media (max-width: 720px){
  .nd-article{ padding: 14px; border-radius: 16px; }
}

/* メイン画像 */
.nd-heroimg{
  width: 100%;
  margin: 16px 0 0;   /* 左右auto禁止 */
  display: block;
}

.nd-heroimg img{
  width: 100%;
  height: auto;
  display: block;     /* 画像の謎の余白/ズレ対策 */
}

.nd-heroimg{ align-self: stretch; }

.nd-caption{
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--nd-line);
  background: rgba(255,255,255,0.7);
}

/* 目次 */
.nd-toc{
  margin: 16px 0 0;
  border: 1px dashed rgba(60, 40, 110, 0.22);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,0.65);
}
.nd-toc-title{ font-weight: 800; color: #2f2348; font-size: 13px; margin: 0 0 6px; }
.nd-toc ul{ margin: 0; padding: 0 0 0 18px; }
.nd-toc li{ margin: 6px 0; }
.nd-toc a{ color: var(--nd-accent); text-decoration: none; }
.nd-toc a:hover{ text-decoration: underline; }

/* 見出し */
.nd-article h2{
  margin: 22px 0 10px;
  font-size: 18px;
  line-height: 1.35;
  color: #2f2348;
  font-weight: 800;
  letter-spacing: .02em;
  padding-left: 10px;
  border-left: 4px solid rgba(93,42,166,0.35);
}
.nd-article h3{
  margin: 18px 0 8px;
  font-size: 16px;
  color: #2f2348;
  font-weight: 800;
}

.nd-article p{ margin: 0 0 14px; line-height: 1.9; }
.nd-article a{ color: var(--nd-accent); }

/* 画像ブロック */
.nd-figure{ margin: 16px 0; }
.nd-figure .nd-heroimg{ margin-top: 0; }

/* 引用ブロック */
.nd-quote{
  margin: 16px 0;
  padding: 14px 14px 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--nd-line);
  position: relative;
}
.nd-quote:before{
  content: "“";
  position: absolute;
  top: -8px;
  left: 10px;
  font-size: 36px;
  color: rgba(93,42,166,0.25);
  font-family: 'Poppins', system-ui;
  font-weight: 800;
}
.nd-quote p{ margin: 0; }
.nd-quote .nd-quote-by{ margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* コールアウト（注意/重要/案内） */
.nd-callout{
  margin: 16px 0;
  border-radius: 16px;
  border: 1px solid var(--nd-line);
  background: rgba(255,255,255,0.78);
  padding: 12px 14px;
}
.nd-callout strong{ color: #2f2348; }
.nd-callout--info{ background: rgba(191,165,255,0.16); }
.nd-callout--warn{ background: rgba(255, 210, 90, 0.16); border-color: rgba(160,110,0,0.22); }
.nd-callout--important{ background: rgba(255, 120, 190, 0.10); border-color: rgba(160, 50, 110, 0.20); }

/* 情報テーブル */
.nd-table{
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 18px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--nd-line);
  background: rgba(255,255,255,0.75);
}
.nd-table th,
.nd-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(60,40,110,0.10);
  vertical-align: top;
  font-size: 14px;
}
.nd-table th{
  width: 160px;
  color: #2f2348;
  text-align: left;
  font-weight: 800;
  background: rgba(93,42,166,0.06);
}
@media (max-width: 720px){
  .nd-table th{ width: 120px; }
}

/* ボタン/CTA */
.nd-cta{
  margin: 18px 0;
  border-radius: 16px;
  border: 1px solid rgba(93,42,166,0.22);
  background: linear-gradient(180deg, rgba(191,165,255,0.18), rgba(255,255,255,0.7));
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: space-between;
}
.nd-cta-title{ font-weight: 800; color: #2f2348; }
.nd-cta-desc{ color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.nd-cta .nd-cta-left{ min-width: 220px; }
.nd-cta a.nd-cta-btn{
  text-decoration: none;
  background: var(--nd-accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nd-cta a.nd-cta-btn:hover{ filter: brightness(0.98); }

/* 2カラム */
.nd-cols{ display: grid; gap: 12px; margin: 16px 0; }
.nd-cols--2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 860px){
  .nd-cols--2{ grid-template-columns: 1fr; }
}

.nd-card{
  border-radius: 16px;
  border: 1px solid var(--nd-line);
  background: rgba(255,255,255,0.78);
  padding: 12px 14px;
}
.nd-card-title{ font-weight: 800; color: #2f2348; margin: 0 0 6px; }
.nd-card p{ margin: 0; color: #4a3f5e; }

/* ギャラリー */
.nd-gallery{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
@media (max-width: 860px){ .nd-gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .nd-gallery{ grid-template-columns: 1fr; } }

.nd-gallery a,
.nd-gallery img{ display:block; width:100%; }
.nd-gallery img{ border-radius: 14px; border: 1px solid var(--nd-line); aspect-ratio: 16/9; object-fit: cover; background:#fff; }

/* タイムライン */
.nd-timeline{ list-style: none; margin: 16px 0; padding: 0; }
.nd-timeline li{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(60,40,110,0.10);
}
.nd-timeline .time{ color: var(--muted); font-weight: 800; font-size: 13px; }
.nd-timeline .body{ color: #4a3f5e; }
.nd-timeline .body b{ color: #2f2348; }
@media (max-width: 560px){
  .nd-timeline li{ grid-template-columns: 1fr; gap: 6px; }
}

/* FAQ（details） */
.nd-faq{ margin: 16px 0; }
.nd-faq details{
  border: 1px solid var(--nd-line);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  padding: 10px 12px;
  margin: 10px 0;
}
.nd-faq summary{
  cursor: pointer;
  font-weight: 800;
  color: #2f2348;
  list-style: none;
}
.nd-faq summary::-webkit-details-marker{ display:none; }
.nd-faq summary:after{
  content: "＋";
  float: right;
  color: rgba(47,35,72,0.55);
}
.nd-faq details[open] summary:after{ content: "－"; }
.nd-faq .answer{ margin-top: 8px; color: #4a3f5e; line-height: 1.85; }

/* 埋め込み */
.nd-embed{
  border: 1px solid var(--nd-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  margin: 16px 0;
}
.nd-embed iframe{ width: 100%; aspect-ratio: 16/9; border: 0; display:block; }

/* ダウンロード/リンク一覧 */
.nd-links{ margin: 14px 0 18px; padding: 0; list-style: none; }
.nd-links li{
  border: 1px solid var(--nd-line);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  padding: 10px 12px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.nd-links a{ text-decoration: none; font-weight: 800; }
.nd-links .note{ color: var(--muted); font-size: 12.5px; }

/* フッター操作 */
.nd-footer-nav{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.nd-back{
  text-decoration:none;
  color: #2f2348;
  font-weight: 800;
  border: 1px solid var(--nd-line);
  background: rgba(255,255,255,0.78);
  padding: 10px 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nd-back:hover{ background: rgba(255,255,255,0.92); }

/* 小さなトースト */
.nd-toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(47, 35, 72, 0.92);
  color: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.nd-toast.is-show{ opacity: 1; }


/* 画像は必ず枠内に収める（全ブロック共通） */
.nd-section img,
.nd-figure img,
.nd-img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 2カラム内で“はみ出し”を防ぐ（重要） */
.nd-cols,
.nd-col{
  min-width: 0;
}

/* もし nd-cols--2 が flex の場合の保険 */
.nd-cols--2{
  flex-wrap: wrap;
}