/* Culture＋Commons 本人承認済みWeb基準色 2026-09-10 */
:root {
  --cc-karakurenai: #A92D3E;
  --cc-teikakazura: #31574D;
  --cc-flower: #FAF9F6;
  --cc-ink: #292D30;
  --paper: var(--cc-flower);
  --ink: var(--cc-ink);
  --green: var(--cc-teikakazura);
  --muted: #5c6260;
  --line: color-mix(in srgb, var(--cc-teikakazura) 20%, var(--cc-flower));
  --soft: color-mix(in srgb, var(--cc-teikakazura) 5%, var(--cc-flower));
}
body { background: var(--cc-flower); color: var(--cc-ink); }
.site-header, .nav, .mobile-poem { background: var(--cc-flower); }
.brand, .section h2, .hub-panel h3, .subproject h3, .article h2,
.card h3, .profile-name, .page-head h1, .ui-icon { color: var(--cc-teikakazura); }
.copy, .hub-copy, .subproject p, .card p { color: var(--cc-ink); }
.section h2, .hub-panel, .subproject, .news-empty, .page-head,
.article td, .article th { border-color: var(--line); }
.subprojects { border-left-color: var(--cc-teikakazura); }
.nav a[aria-current="page"] { border-bottom-color: var(--cc-karakurenai); }
.text-link, .footer-links a { color: var(--cc-teikakazura); }
.text-link:hover, .footer-links a:hover, .nav a:hover { color: var(--cc-karakurenai); }
.button, .hub-panel .button {
  color: var(--cc-teikakazura);
  border-color: var(--cc-teikakazura);
  background: transparent;
}
.button.primary {
  background: var(--cc-karakurenai);
  border-color: var(--cc-karakurenai);
  color: var(--cc-flower);
}
.button.primary .ui-icon { color: inherit; }
.button:hover { background: var(--soft); border-color: var(--cc-teikakazura); }
.button.primary:hover {
  background: color-mix(in srgb, var(--cc-karakurenai) 88%, var(--cc-ink));
  color: var(--cc-flower);
  border-color: var(--cc-karakurenai);
}
.contact-band, .article .note { background: var(--soft); }
.article .note { border-left-color: var(--cc-teikakazura); }
.hub-panel .badge, .subproject .badge {
  background: var(--soft);
  border-color: var(--line);
  color: var(--cc-teikakazura);
}
.card > .eyebrow, .mobile-poem { color: var(--cc-teikakazura); }
a:focus-visible, button:focus-visible { outline-color: var(--cc-karakurenai); }
/* 2026-10-05 参考：AMANE・路上博物館。実際の活動と明快な見出しを中心に。 */
.section .eyebrow {display:none}
.hub-panel .eyebrow,.subproject .eyebrow,.card .eyebrow {display:block;letter-spacing:.03em}
.section-head {display:block;margin-bottom:24px}
.section h2 {font-size:24px;background:var(--cc-teikakazura);color:var(--cc-flower);padding:14px 20px;border:0;width:100%;margin-bottom:22px}
.section-head>p {margin:0 20px}
.section-head>.text-link {margin-left:20px}
.intro {display:block;text-align:center;max-width:900px}
.intro h2 {background:none;color:var(--cc-teikakazura);border-top:5px solid var(--cc-teikakazura);padding-top:25px}
.intro .lead {font-size:23px;line-height:1.8}
.intro .copy {max-width:780px;margin-left:auto;margin-right:auto;text-align:left}
.intro .actions {justify-content:center}
.hub-panel {background:transparent;border:1px solid var(--line);border-top:4px solid var(--cc-karakurenai);padding:28px;gap:30px}
.subprojects {display:grid;grid-template-columns:1fr 1fr;border-left:0;gap:22px;margin-top:22px}
.subproject {display:block;border:1px solid var(--line);padding:24px;margin:0;background:var(--cc-flower)}
.subproject h3 {font-size:21px;border-bottom:2px solid var(--cc-teikakazura);padding-bottom:15px;margin-bottom:18px}
.subproject p {margin-bottom:16px}
.card {border:1px solid var(--line);padding:24px;background:var(--cc-flower)}
.card h3 {border-bottom:2px solid var(--cc-teikakazura);padding-bottom:15px}
.work-image {display:block;overflow:hidden;border:1px solid var(--line)}
.work-image img {display:block;width:100%;height:auto}
.button {border-radius:0;padding:12px 23px}
.text-link {text-decoration:underline;text-underline-offset:5px}
.profile-row {display:block}
.profile-row>div+div {max-width:780px;margin:0 auto}
@media(max-width:700px){.subprojects{grid-template-columns:1fr}.hub-panel{padding:22px}.section h2{font-size:21px;padding:12px 16px}.intro .lead{font-size:21px}.card,.subproject{padding:20px}}

.project-image{display:block;margin:18px 0;border:1px solid var(--line)}.project-image img{display:block;width:100%;height:auto}.research-profile{margin:24px 0;line-height:1.8}

/* 語の途中を避け、意味の区切りで折り返す。 */
.phrase{display:inline-block;white-space:nowrap;max-width:100%}p,h2,h3{word-break:auto-phrase;overflow-wrap:normal;text-wrap:pretty}.intro .copy{text-align:center}.intro-line{display:block}.intro-line .phrase{display:inline-block}@media(min-width:701px){.intro-line{white-space:nowrap}}

/* 視覚・読み上げ・キーボード操作への配慮 */
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:3px solid var(--cc-karakurenai);outline-offset:5px;background-color:var(--cc-flower);color:var(--cc-ink)}
.button.primary:focus-visible{color:var(--cc-flower);background:var(--cc-karakurenai)}
.skip{left:12px}.skip:focus{position:fixed;top:12px;border:2px solid var(--cc-karakurenai);color:var(--cc-ink)}
.site-header{height:auto;min-height:58px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.nav{flex-wrap:wrap}
.intro-line{white-space:normal!important}.phrase{display:inline-block;white-space:nowrap;max-width:100%}
.cover-scroll{background:var(--cc-flower);color:var(--cc-teikakazura);padding:8px 14px;text-decoration:underline}
.badge{color:var(--cc-teikakazura)}.footer-links a,.text-link,.nav a{min-height:44px;display:inline-flex;align-items:center}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.button,.badge,.section h2{border:1px solid CanvasText}a:focus-visible,button:focus-visible{outline:3px solid Highlight}}
.request-flow{padding-left:1.8em}.request-flow li{padding:12px 0 18px}.request-flow h3{margin-top:0}.request-details{padding-left:1.5em;line-height:2}.request-details li{margin-bottom:8px}

.analytics-choice{border-block:2px solid var(--cc-teikakazura);background:var(--cc-flower);padding:24px 0}.analytics-choice p{margin-top:12px}.analytics-choice button{font:inherit;cursor:pointer}.footer-links{flex-wrap:wrap}

/* 狭い画面・文字拡大でも内容を隠さず折り返す。 */
.wrap, .article, .hub-panel, .subproject, .card,
.subprojects > *, .grid-two > *, .hub-panel > *,
.site-header > *, .footer-top > * { min-width: 0; }
.subprojects { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; padding-left: 0; }
.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phrase { white-space: normal; word-break: auto-phrase; }
h1, h2, h3 { word-break: auto-phrase; overflow-wrap: normal; }
.button, .text-link { display: inline-block; max-width: 100%; white-space: normal; word-break: auto-phrase; vertical-align: middle; align-content: center; }
.button { text-align: center; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.site-header { flex-wrap: wrap; height: auto; min-height: 58px; }
.site-header .brand { max-width: 100%; white-space: normal; }
.footer .brand { display: inline-block; max-width: 100%; white-space: normal; }
.breadcrumb a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
@media (max-width: 700px) {
  .subprojects, .grid-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .site-header { padding-block: 10px; }
  .nav { top: 100%; }
}
@media (max-width: 360px) {
  .page-head h1 { font-size: 24px; }
}