@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600&family=Cormorant+Garamond:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

/* =====================================================================
   DICE公式サイト（dice-japan.jp）柱廊（Pillars）版：Stoa・AGORAと同じ部品で、DICEの紺を差し色に
   Cocoon子テーマ dice-official-cocoon-child の dice-official.css の「あと」に読み込む上書き（D-2083）
   外すには、このファイルを読み込まないだけ（元の見た目に戻る）
   ===================================================================== */
:root {
  --dice-navy: #1F3F73;
  --dice-navy-2: #14284A;
  --dice-blue: #1F3F73;
  --dice-accent: #1F3F73;
  --dice-ink: #1E2430;
  --dice-muted: #566070;
  --dice-line: #DCE1E8;
  --dice-bg: #F4F6F9;
  --dice-shadow: none;
  --dp-ivory: #FFFFFF;
  --dp-head: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --dp-label: "Cormorant Garamond", "Shippori Mincho", serif;
}
body.dice-dark {
  --dice-navy: #8FB0E6;
  --dice-accent: #8FB0E6;
  --dice-blue: #8FB0E6;
  --dice-ink: #E6ECF5;
  --dice-muted: #B8B4A8;
  --dice-line: #38362D;
  --dice-bg: #1F1F1C;
  --dp-ivory: #171715;
}

body.dice-official { background: var(--dp-ivory); color: var(--dice-ink); }

/* 見出し：明朝・細め */
.dice-hero h1, .dice-about h2, .dice-agora h2, .dice-contact h2, .dice-page-content h2, .dice-section-heading h2, .dice-service-grid h3,
.dice-doors-col h3, .dice-page-hero h1, .dice-news-title {
  font-family: var(--dp-head); font-weight: 600; letter-spacing: .04em; color: var(--dice-navy);
}
.dice-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.4; }
.dice-about h2, .dice-agora h2, .dice-contact h2, .dice-page-content h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.5; }

/* 英語の小さなラベル＋左に細い線（Stoaの「PRICE」と同じ型） */
.dice-overline, .dice-label {
  font-family: var(--dp-label); font-weight: 600; font-size: .8rem; letter-spacing: .26em; color: var(--dice-accent); gap: .9rem; font-variant-numeric: lining-nums; }
.dice-overline::before, .dice-label::before { width: 28px; height: 1px; }

/* ヘッダー：象牙色＋細い線 */
.dice-header { background: color-mix(in srgb, var(--dp-ivory) 94%, transparent); border-bottom: 1px solid var(--dice-line); box-shadow: none !important; }
.dice-brand strong { font-family: var(--dp-head); font-weight: 600; letter-spacing: .12em; font-size: 1.55rem; }
.dice-brand small { font-family: var(--dp-head); letter-spacing: .06em; }
.dice-nav a { font-weight: 600; letter-spacing: .04em; }
.dice-nav .dice-nav-cta { background: var(--dice-navy); color: #fff; border-radius: 0; }

/* 見出し（ヒーロー）：文章は象牙色の地に。写真は、文字と重ねず、右に別に置く */
.dice-hero {
  min-height: 0; display: block; background: var(--dp-ivory) !important; padding: calc(var(--dice-header-h) + 56px) 0 clamp(48px, 7vw, 88px);
  border-bottom: 1px solid var(--dice-line);
}
.dice-hero-grid { align-items: center; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); }
.dice-hero-copy { max-width: none; }
.dice-hero-grid::after {
  /* 写真：みんなで話し合う場（D-2098）。AGORAのトップと同じ、斜めのカット（広い画面＝左上を斜めに／スマホ＝上を斜めに）。枠線は付けない */
  content: ""; display: block; width: 100%; aspect-ratio: 16 / 10; border: 0;
  background: url("https://dice-japan.jp/agora/static/images/hero_slide_about.jpg") 60% 50% / cover no-repeat;
  clip-path: polygon(0% 14%, 100% 0%, 100% 100%, 0% 100%);
}
@media (min-width: 62rem) { .dice-hero-grid::after { clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%); } }
@media (min-width: 62rem) { .dice-hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.dice-lead { color: var(--dice-muted); }

/* ボタン：角なし・黒／細い線 */
.dice-button { border-radius: 0; font-weight: 600; letter-spacing: .08em; }
.dice-button-primary { background: var(--dice-navy); color: #fff; }
.dice-button-outline { background: transparent; border-color: var(--dice-navy); color: var(--dice-navy); }
body.dice-dark .dice-button-primary { background: #DCE6F8; color: #14284A; }
body.dice-dark .dice-button-outline { border-color: #DCE6F8; color: #DCE6F8; }
.dice-text-link { border-radius: 0; border-color: var(--dice-line); font-weight: 600; }

/* 節：左寄せの見出し・細い線で区切る・影と色の面をやめる */
.dice-section { border-top: 1px solid var(--dice-line); }
.dice-section-heading { text-align: left; }
.dice-section-heading h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.dice-projects, .dice-activity { background: var(--dp-ivory); }
.dice-soft { background: var(--dice-bg); }
.dice-about img, .dice-page-image img { box-shadow: none; border: 1px solid var(--dice-line); }

/* 事業のカード：枠・影をやめ、写真と文字を上下に（写真に文字を重ねない） */
.dice-service-grid { gap: 0; }
.dice-service-grid article { background: none; box-shadow: none; border: 0; border-left: 1px solid var(--dice-line); }
.dice-service-grid article:first-child { border-left: 0; }
.dice-service-grid img { aspect-ratio: 16 / 10; filter: saturate(.85); }
.dice-card-body { margin-top: 0; padding: 20px 24px 28px; }
.dice-icon { width: auto; height: auto; margin-bottom: .6rem; padding-bottom: .4rem; border-radius: 0; background: none; color: var(--dice-accent); border-bottom: 1px solid var(--dice-line); font-family: var(--dp-label); letter-spacing: .24em; font-weight: 600; font-variant-numeric: lining-nums; }
.dice-more { font-weight: 600; letter-spacing: .06em; color: var(--dice-accent); }
@media (max-width: 52rem) { .dice-service-grid { grid-template-columns: 1fr; } .dice-service-grid article { border-left: 0; border-top: 1px solid var(--dice-line); } .dice-service-grid article:first-child { border-top: 0; } }

/* 数字の帯・お知らせ・特徴の枠：影をやめ、細い線 */
.dice-stats { background: var(--dp-ivory); }
.dice-stats-grid strong { font-family: var(--dp-head); font-weight: 600; }
.dice-feature-card, .dice-post-card { box-shadow: none; border-radius: 0; background: var(--dp-ivory); border-color: var(--dice-line); }

/* AGORA（つながり）の帯：濃紺のグラデーションの面＋白い文字をやめ、象牙色の面＋細い線に */
.dice-agora { background: var(--dice-bg); color: var(--dice-ink); border-top: 1px solid var(--dice-line); border-bottom: 1px solid var(--dice-line); }
.dice-agora .dice-label { color: var(--dice-accent); }
.dice-agora h2 { color: var(--dice-navy); }
.dice-agora p { color: var(--dice-muted); }
.dice-agora-cards div, .dice-agora-cards a { border: 1px solid var(--dice-line); background: var(--dp-ivory); border-radius: 0; }
.dice-agora-cards strong { color: var(--dice-navy); font-family: var(--dp-head); font-weight: 600; letter-spacing: .06em; }
.dice-agora-cards span { color: var(--dice-muted); }

/* お問い合わせの帯：暗い写真の膜＋白い文字をやめ、象牙色の面に。入力のパネルは細い線 */
.dice-contact { background: var(--dp-ivory); color: var(--dice-ink); border-top: 1px solid var(--dice-line); }
.dice-contact .dice-label { color: var(--dice-accent); }
.dice-contact h2 { color: var(--dice-navy); }
.dice-contact p { color: var(--dice-muted); }
.dice-contact-panel { background: #fff; color: var(--dice-ink); border: 1px solid var(--dice-line); }
body.dice-dark .dice-contact-panel { background: #1F1F1C; }
.dice-contact-panel h3, .dice-contact-form label span { color: var(--dice-navy); font-weight: 600; }
.dice-contact-form input, .dice-contact-form textarea, .dice-contact-form select { border-radius: 0; border-color: var(--dice-line); background: #fff; color: #1E2430; }
.dice-contact-form button { border-radius: 0; background: var(--dice-navy); font-weight: 600; letter-spacing: .08em; }

/* フッター：濃紺の面をやめ、象牙色（柱廊）。文字は、すべて濃い色（白い文字を残さない） */
.dice-footer { background: var(--dice-bg); color: var(--dice-ink); border-top: 1px solid var(--dice-line); }
.dice-footer-brand strong, .dice-footer-brand small { color: var(--dice-navy); }
.dice-footer-brand-block p, .dice-footer-contact p { color: var(--dice-muted); }
.dice-footer h3 { color: var(--dice-navy); font-family: var(--dp-label); letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; font-variant-numeric: lining-nums; }
.dice-footer nav a, .dice-footer-contact a { color: var(--dice-ink); }
.dice-footer nav a:hover, .dice-footer-contact a:hover { color: var(--dice-accent); }
.dice-footer-contact { border: 1px solid var(--dice-line); border-radius: 0; }
.dice-footer-bottom { border-top: 1px solid var(--dice-line); color: var(--dice-muted); }
.dice-footer-bottom a, .dice-footer a { color: var(--dice-ink); }
.dice-footer-bottom a:hover { color: var(--dice-accent); }

/* 書体（D-2087）：本文は、やわらかく読みやすい Zen Kaku Gothic New（なければ Noto Sans JP）。小さな英語のラベル（Cormorant）の数字は、本文と同じ高さに */
body.dice-official { font-family: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.dice-overline, .dice-label, .dice-icon, .dice-footer h3 { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* 見出しの折り返し（D-2087）：言葉の途中で切らず（「つな／ぐ」「つ／くる」を防ぐ）、行の長さをそろえる。対応していないブラウザでは、これまでどおり */
.dice-hero h1, .dice-about h2, .dice-section-heading h2, .dice-agora h2, .dice-contact h2, .dice-page-hero h1 { text-wrap: balance; word-break: auto-phrase; line-break: strict; }

/* 並んだ2つのボタン：片方にだけ左の余白が付いて、ずれていた → 同じ幅・同じ位置で、間をあける */
.dice-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dice-center .dice-button, .dice-center .dice-button + .dice-button { margin: 0; }
@media (max-width: 40rem) { .dice-center .dice-button { flex: 1 1 100%; width: 100%; } }

/* 左メニュー（D-2091。カズ：「サイドメニューの書体が気になる」）：色つきの絵文字をやめ、線画（AGORAと同じ）。書体はやわらかく、小見出しは字間の広い小さな文字 */
.dice-sidenav-label { font-family: var(--dp-label); font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.dice-sidenav-link { font-weight: 500; letter-spacing: .03em; font-size: .95rem; }
.dice-sidenav-link[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--dice-accent); }
.dice-sidenav-icon { font-size: 0; color: var(--dice-muted); width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--sn-i) center / contain no-repeat; mask: var(--sn-i) center / contain no-repeat; }
.dice-sidenav-link:hover .dice-sidenav-icon, .dice-sidenav-link[aria-current="page"] .dice-sidenav-icon { color: var(--dice-accent); }
.dice-sidenav-link[href="https://dice-japan.jp/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/stoa/icons/nav_home.svg"); }
.dice-sidenav-link[href$="/about/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_building.svg"); }
.dice-sidenav-link[href$="/mission/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/stoa/icons/nav_flag.svg"); }
.dice-sidenav-link[href$="/activities/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_pin.svg"); }
.dice-sidenav-link[href$="/news/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/stoa/icons/nav_bell.svg"); }
.dice-sidenav-link[href$="/disclosure/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_doc.svg"); }
.dice-sidenav-link[href$="/mascot/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_heart.svg"); }
.dice-sidenav-link[href$="/community-support/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_users.svg"); }
.dice-sidenav-link[href$="/dx-support/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_monitor.svg"); }
.dice-sidenav-link[href$="/reuse/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_loop.svg"); }
.dice-sidenav-link[href$="/agora/demo"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_play.svg"); }
.dice-sidenav-link[href$="/agora/pricing"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/stoa/icons/nav_coin.svg"); }
.dice-sidenav-link[href$="/support/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_hand.svg"); }
.dice-sidenav-link[href$="/membership/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_contact.svg"); }
.dice-sidenav-link[href$="/donate/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_gift.svg"); }
.dice-sidenav-link[href$="/contact/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_mail.svg"); }
.dice-sidenav-link[href$="/privacy-policy/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_lock.svg"); }
.dice-sidenav-link[href$="/sitemap/"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_map.svg"); }
.dice-sidenav-link[href$="/agora/login"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/icons/nav/nav_key.svg"); }
.dice-sidenav-link[href$="/agora/app#/me"] .dice-sidenav-icon { --sn-i: url("https://dice-japan.jp/agora/static/stoa/icons/nav_user.svg"); }

/* ボタン・入力は、ブラウザ既定（Arial）でなく、本文の書体に（D-2096。ダーク切替・ページの先頭へ戻るボタン） */
button, input, select, textarea, .dice-dark-toggle, .dice-page-top { font-family: inherit; }
