/* DICE公式サイト 下層ページの新しいデザイン（dice-next）。
   既存の dice-official.css / dice-sidenav.css / dice-pillars.css の「あと」に読み込む。ヘッダー・左メニュー・ダークモード・「相談」ボタンは、既存のまま。
   このファイルは、本文の部品（.dn-）だけ。外すには、このファイルを読み込まないだけ（元の見た目に戻る）。
   配色：白と紺。行動のボタン（相談する・参加する）だけ、ロゴの中のマゼンタ。虹色は、ヘッダーの下の細い線だけ。 */

body.dice-official {
  --dn-bg: #ffffff;
  --dn-soft: #eff2f8;
  --dn-surface: #ffffff;
  --dn-ink: #1c2438;
  --dn-muted: #566078;
  --dn-line: #dfe3ec;
  --dn-navy: #14264b;
  --dn-band: #14264b;
  --dn-band-ink: #f3f5fa;
  --dn-action: #c81e6b;
  --dn-action-ink: #ffffff;
  --dn-plate-a: #cfd9ea;
  --dn-plate-b: #e4ebf6;
  --dn-serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --dn-sans: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.dice-official.dice-dark {
  --dn-bg: #0b1226;
  --dn-soft: #111a33;
  --dn-surface: #131d38;
  --dn-ink: #ecebe6;
  --dn-muted: #aab2c6;
  --dn-line: #26324f;
  --dn-navy: #cfd9f2;
  --dn-band: #0a1124;
  --dn-band-ink: #f1eee6;
  --dn-action: #ee5f98;
  --dn-action-ink: #1a0a12;
  --dn-plate-a: #22305a;
  --dn-plate-b: #2c3860;
}

/* ヘッダーの下の、ロゴの虹色の細い線（ここだけ） */
.dice-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #e8231c, #ff6a00, #ffd200, #a3c010, #00a8e0, #0a4fbf, #6a35a8, #d9206f); }

main.dn { background: var(--dn-bg); color: var(--dn-ink); font-family: var(--dn-sans); font-size: 17px; line-height: 1.9; padding-top: var(--dice-header-h, 78px); }
.dn *, .dn *::before, .dn *::after { box-sizing: border-box; }
.dn h1, .dn h2, .dn h3 { font-family: var(--dn-serif); font-weight: 700; line-height: 1.45; margin: 0; color: var(--dn-navy); text-wrap: balance; letter-spacing: .02em; }
.dn p { margin: 0; }
.dn a { color: inherit; }
.dn-wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.dn-narrow { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
.dn :focus-visible { outline: 3px solid var(--dn-action); outline-offset: 3px; }
.dn-kicker { font-family: var(--dn-sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--dn-muted); }

/* ボタン */
.dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 4px; border: 2px solid transparent; font-family: var(--dn-sans); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dn-btn-main { background: var(--dn-action); color: var(--dn-action-ink); }
.dn-btn-main:hover { filter: brightness(1.08); }
.dn-btn-line { border-color: var(--dn-navy); color: var(--dn-navy); background: transparent; }
.dn-btn-line:hover { background: var(--dn-navy); color: var(--dn-bg); }
.dn-band .dn-btn-line { border-color: var(--dn-band-ink); color: var(--dn-band-ink); }
.dn-band .dn-btn-line:hover { background: var(--dn-band-ink); color: var(--dn-band); }
.dn-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 画像の枠（Codexの画像が入るまでは、色の板）。比率を固定してあるので、実際の写真への差し替えは、画像だけで済む */
.dn-img { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--dn-plate-a), var(--dn-plate-b)); display: block; width: 100%; }
.dn-img > img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.dn-img > span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 12px; font-size: 12px; color: var(--dn-muted); }
.dn-r-16-10 { aspect-ratio: 16 / 10; } .dn-r-4-3 { aspect-ratio: 4 / 3; } .dn-r-3-2 { aspect-ratio: 3 / 2; } .dn-r-21-8 { aspect-ratio: 21 / 8; } .dn-r-4-1 { aspect-ratio: 4 / 1; }

/* ページの頭：パンくず・見出し・リード */
.dn-hero { padding: 40px 0 56px; border-bottom: 1px solid var(--dn-line); }
.dn-crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--dn-muted); margin-bottom: 28px; padding: 0; list-style: none; }
.dn-crumb li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.dn-crumb a { text-decoration: none; }
.dn-crumb a:hover { text-decoration: underline; }
.dn-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.dn-hero h1 { font-size: clamp(32px, 4.8vw, 54px); margin-top: 10px; }
.dn-lede { margin-top: 20px; font-size: clamp(17px, 1.6vw, 19px); color: var(--dn-muted); max-width: 34em; line-height: 1.95; }
.dn-hero .dn-actions { margin-top: 28px; }
.dn-hero.is-text { padding-bottom: 64px; }
.dn-hero.is-text .dn-lede { max-width: 38em; }

/* 節 */
.dn-sec { padding: clamp(56px, 7vw, 96px) 0; }
.dn-sec.is-soft { background: var(--dn-soft); }
.dn-head { max-width: 42em; margin-bottom: 36px; }
.dn-head h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 10px; }
.dn-head p { margin-top: 14px; color: var(--dn-muted); }

/* 読み物（理念・法人情報など） */
.dn-prose { max-width: 40em; }
.dn-prose p + p { margin-top: 1.2em; }
.dn-prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 2.2em 0 .6em; }
.dn-prose h2:first-child { margin-top: 0; }
.dn-statement { font-family: var(--dn-serif); font-weight: 700; font-size: clamp(26px, 3.8vw, 44px); line-height: 1.6; color: var(--dn-navy); max-width: 20em; text-wrap: balance; }
.dn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.dn-two.is-news { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.dn-two.is-form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* 考え方（2×2） */
.dn-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--dn-line); margin: 0; padding: 0; list-style: none; }
.dn-principles li { padding: 26px 0; border-bottom: 1px solid var(--dn-line); min-width: 0; }
.dn-principles h3 { font-size: 20px; }
.dn-principles p { margin-top: 8px; font-size: 16px; color: var(--dn-muted); }

/* 行動指針（3つ・並び） */
.dn-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.dn-trio li { background: var(--dn-surface); border: 1px solid var(--dn-line); padding: 26px 24px; min-width: 0; }
.dn-trio h3 { font-size: 20px; }
.dn-trio p { margin-top: 10px; font-size: 15px; color: var(--dn-muted); line-height: 1.85; }

/* 機能の一覧（アイコン＋見出し＋説明） */
.dn-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dn-line); }
.dn-feats li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--dn-line); }
.dn-ico { width: 40px; height: 40px; color: var(--dn-navy); }
.dn-ico svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dn-feats h3 { font-size: 18px; }
.dn-feats p { margin-top: 6px; font-size: 15px; color: var(--dn-muted); line-height: 1.85; }
.dn-feats small { display: block; margin-top: 6px; font-size: 12px; color: var(--dn-muted); }

/* カード（画像つき） */
.dn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.dn-card { background: var(--dn-surface); border: 1px solid var(--dn-line); display: flex; flex-direction: column; min-width: 0; }
.dn-card .in { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dn-card h3 { font-size: 20px; }
.dn-card p { font-size: 15px; color: var(--dn-muted); line-height: 1.85; }
.dn-card .more { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 14px; color: var(--dn-navy); text-decoration: none; }
.dn-card .more:hover { text-decoration: underline; }
.dn-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dn-cards.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dn-way.is-main { border: 2px solid var(--dn-action); }

/* 定義リスト（法人情報） */
.dn-defs { margin: 0; border: 1px solid var(--dn-line); background: var(--dn-surface); }
.dn-defs div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding: 18px 24px; border-top: 1px solid var(--dn-line); }
.dn-defs div:first-child { border-top: 0; }
.dn-defs dt { font-size: 14px; color: var(--dn-muted); }
.dn-defs dd { margin: 0; font-weight: 500; }

/* 年表（沿革。実際の順序なので、点でつなぐ） */
.dn-time { margin: 0; padding: 0; list-style: none; position: relative; }
.dn-time::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--dn-line); }
.dn-time li { position: relative; padding: 0 0 28px 40px; }
.dn-time li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--dn-bg); border: 3px solid var(--dn-navy); }
.dn-time time { font-family: var(--dn-serif); font-weight: 700; font-size: 20px; color: var(--dn-navy); font-variant-numeric: tabular-nums; }
.dn-time p { margin-top: 2px; color: var(--dn-muted); font-size: 15px; }

/* 手順（実際に順序があるときだけ、番号） */
.dn-steps { counter-reset: step; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--dn-line); }
.dn-steps li { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--dn-line); }
.dn-steps li::before { content: counter(step); font-family: var(--dn-serif); font-weight: 700; font-size: 28px; color: var(--dn-navy); line-height: 1.2; }
.dn-steps h3 { font-size: 18px; }
.dn-steps p { margin-top: 4px; font-size: 15px; color: var(--dn-muted); }

/* 質問 */
.dn-faq { border-top: 1px solid var(--dn-line); }
.dn-faq details { border-bottom: 1px solid var(--dn-line); }
.dn-faq summary { cursor: pointer; padding: 20px 36px 20px 0; position: relative; list-style: none; font-weight: 700; }
.dn-faq summary::-webkit-details-marker { display: none; }
.dn-faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 24px; font-weight: 400; color: var(--dn-navy); }
.dn-faq details[open] summary::after { content: "−"; }
.dn-faq details > div { padding: 0 0 22px; color: var(--dn-muted); font-size: 16px; max-width: 40em; }

/* 帯（相談・参加へ） */
.dn-band { background: var(--dn-band); color: var(--dn-band-ink); padding: clamp(48px, 6vw, 80px) 0; }
.dn-band h2 { color: var(--dn-band-ink); font-size: clamp(24px, 3vw, 34px); }
.dn-band p { margin-top: 12px; opacity: .88; max-width: 36em; }
.dn-band .dn-actions { margin-top: 26px; }
.dn-band-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }

/* 一覧（お知らせ・活動） */
.dn-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dn-line); }
.dn-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--dn-line); }
.dn-list time { font-size: 14px; color: var(--dn-muted); font-variant-numeric: tabular-nums; }
.dn-list a { text-decoration: none; font-weight: 500; }
.dn-list a:hover { text-decoration: underline; }
.dn-chip { font-size: 12px; border: 1px solid var(--dn-line); border-radius: 3px; padding: 0 8px; color: var(--dn-navy); white-space: nowrap; }
.dn-empty { border: 1px dashed var(--dn-line); padding: 40px 24px; text-align: center; color: var(--dn-muted); }

/* フォーム */
.dn-form { display: grid; gap: 22px; max-width: 640px; }
.dn-field { display: grid; gap: 8px; }
.dn-field label, .dn-field legend { font-weight: 700; font-size: 15px; }
.dn-field input[type=text], .dn-field input[type=email], .dn-field textarea { width: 100%; font: inherit; color: var(--dn-ink); background: var(--dn-surface); border: 1px solid var(--dn-line); border-radius: 4px; padding: 12px 14px; min-height: 48px; }
.dn-field textarea { min-height: 160px; resize: vertical; }
.dn-field input:focus, .dn-field textarea:focus { border-color: var(--dn-navy); }
.dn-field .hint { font-size: 13px; color: var(--dn-muted); }
.dn-kinds { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dn-kinds label { display: block; cursor: pointer; position: relative; }
.dn-kinds input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; left: 0; top: 0; }
.dn-kinds span { display: block; border: 1px solid var(--dn-line); background: var(--dn-surface); border-radius: 4px; padding: 14px 16px; font-weight: 700; min-height: 64px; }
.dn-kinds small { display: block; font-weight: 400; color: var(--dn-muted); font-size: 13px; }
.dn-kinds input:checked + span { border: 2px solid var(--dn-navy); padding: 13px 15px; }
.dn-kinds input:focus-visible + span { outline: 3px solid var(--dn-action); outline-offset: 2px; }
.dn-aside { background: var(--dn-soft); border-radius: 4px; padding: 26px 26px 28px; }
.dn-aside h3 { font-size: 18px; }
.dn-aside p { margin-top: 8px; font-size: 15px; color: var(--dn-muted); }

@media (max-width: 980px) {
  .dn-hero-grid, .dn-two, .dn-two.is-news, .dn-two.is-form, .dn-band-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dn-cards, .dn-cards.is-4, .dn-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  main.dn { font-size: 16px; }
  .dn-hero { padding: 24px 0 40px; }
  .dn-principles, .dn-feats, .dn-cards, .dn-cards.is-2, .dn-cards.is-4, .dn-trio, .dn-kinds { grid-template-columns: minmax(0, 1fr); }
  .dn-defs div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 18px; }
  .dn-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dn-list .dn-chip { justify-self: start; }
  .dn-feats li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
  .dn-ico { width: 32px; height: 32px; }
  .dn-actions .dn-btn { flex: 1 1 100%; }
  .dn-card .dn-img { aspect-ratio: 16 / 9; }
  .dn-sec { padding: 44px 0; }
  .dn-head { margin-bottom: 24px; }
  .dn-feats li { padding: 18px 0; }
}
@media (prefers-reduced-motion: reduce) { .dn *, .dn *::before, .dn *::after { transition: none !important; scroll-behavior: auto !important; } }

/* ── ページ送り・フォームの結果 ── */
.dn-pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 28px; font-size: 15px; }
.dn-pager a { color: var(--dn-navy); font-weight: 700; }
.dn .dice-form-status { max-width: 640px; padding: 14px 18px; margin: 0 0 22px; border-radius: 4px; font-weight: 700; }
.dn .dice-form-status.is-success { background: #e8f5ee; color: #14573a; }
.dn .dice-form-status.is-error { background: #fbeaea; color: #8f1d1d; }
body.dice-dark .dn .dice-form-status.is-success { background: #123324; color: #bfe8d0; }
body.dice-dark .dn .dice-form-status.is-error { background: #3a1a1a; color: #f3c3c3; }

/* ── まだ作り直していないページ（情報公開・寄付・会員・DICE INFO・AGENT・マスコット・個別の記事など）も、同じ見た目に ──
   いまのテンプレートの部品（.dice-page-hero / .dice-page-content など）に、新しい配色・文字・余白を当てる。 */
body.dice-official .dice-page-hero { background: var(--dn-bg); color: var(--dn-ink); padding: calc(var(--dice-header-h, 78px) + 44px) 0 56px; border-bottom: 1px solid var(--dn-line); }
body.dice-official .dice-page-hero .dice-overline, body.dice-official .dice-page-hero .dice-label { font-family: var(--dn-sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--dn-muted); }
body.dice-official .dice-page-hero h1 { font-family: var(--dn-serif); font-weight: 700; font-size: clamp(32px, 4.8vw, 54px); line-height: 1.4; color: var(--dn-navy); margin-top: 10px; text-wrap: balance; }
body.dice-official .dice-page-hero p:not(.dice-overline):not(.dice-label) { color: var(--dn-muted); max-width: 38em; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.95; margin-top: 20px; }
body.dice-official .dice-section { background: var(--dn-bg); color: var(--dn-ink); }
body.dice-official .dice-page-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
body.dice-official .dice-page-content, body.dice-official .dice-page-content-wide { max-width: 40em; font-family: var(--dn-sans); font-size: 17px; line-height: 1.9; color: var(--dn-ink); }
body.dice-official .dice-page-content h2, body.dice-official .dice-page-content-wide h2 { font-family: var(--dn-serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; color: var(--dn-navy); margin: 2em 0 .6em; }
body.dice-official .dice-page-content h2:first-child, body.dice-official .dice-page-content-wide h2:first-child { margin-top: 0; }
body.dice-official .dice-page-content h3, body.dice-official .dice-page-content-wide h3 { font-family: var(--dn-serif); font-size: 20px; color: var(--dn-navy); margin: 1.8em 0 .5em; }
body.dice-official .dice-page-content p, body.dice-official .dice-page-content-wide p { margin: 0 0 1.2em; }
body.dice-official .dice-page-content ul, body.dice-official .dice-page-content-wide ul { padding-left: 1.2em; }
body.dice-official .dice-page-content li { margin-bottom: .7em; }
body.dice-official .dice-page-content a, body.dice-official .dice-page-content-wide a { color: var(--dn-navy); text-decoration: underline; text-underline-offset: 3px; }
body.dice-official .dice-info-table { width: 100%; border-collapse: collapse; border: 1px solid var(--dn-line); background: var(--dn-surface); }
body.dice-official .dice-info-table th, body.dice-official .dice-info-table td { padding: 16px 20px; border-top: 1px solid var(--dn-line); text-align: left; vertical-align: top; }
body.dice-official .dice-info-table th { width: 9em; font-weight: 500; color: var(--dn-muted); font-size: 14px; }
body.dice-official .dice-page-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block; }
@media (max-width: 980px) { body.dice-official .dice-page-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 680px) { body.dice-official .dice-page-hero { padding-bottom: 40px; } body.dice-official .dice-page-content, body.dice-official .dice-page-content-wide { font-size: 16px; } }

/* フッターの下の段：画像の注記 */
.dice-footer-bottom .dice-shell { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }
.dice-footer-note { opacity: .75; font-size: 12px; }

/* ── スマホで、ページを短く（トップの活動カードは、画像を左に置く横並び・フッターは2列） ── */
@media (max-width: 680px) {
  .dn-sec { padding: 36px 0; }
  .dn-principles li { padding: 16px 0; }
  .dn-principles h3 { font-size: 18px; }
  .dn-principles p, .dn-feats p, .dn-card p, .dn-trio p { font-size: 14px; line-height: 1.8; }
  .dn-feats li { padding: 14px 0; }
  .dn-cards-rows { gap: 12px; }
  .dn-cards-rows .dn-card { flex-direction: row; }
  .dn-cards-rows .dn-card .dn-img { width: 36%; flex: none; aspect-ratio: auto; min-height: 120px; }
  .dn-cards-rows .dn-card .in { padding: 14px 16px; gap: 6px; }
  .dn-cards-rows .dn-card h3 { font-size: 17px; }
  .dn-cards-tight { gap: 12px; }
  .dn-cards-tight .dn-card .in { padding: 16px 18px; gap: 8px; }
  .dn-cards-tight .dn-card h3 { font-size: 18px; }
  .dn-band { padding: 36px 0; }
  body.dice-official .dice-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 32px 0; }
  body.dice-official .dice-footer-brand-block, body.dice-official .dice-footer-contact { grid-column: 1 / -1; }
  body.dice-official .dice-footer h3 { margin-bottom: .4rem; font-size: .9rem; }
  body.dice-official .dice-footer nav { gap: .2rem; }
  body.dice-official .dice-footer nav a { font-size: .85rem; line-height: 1.6; }
}