* { box-sizing: border-box; }
:root { color-scheme: light; --red:#791b17; --dark-red:#4e100e; --vermilion:#a52a1d; --gold:#c49a43; --cream:#f5efd9; --paper:#eee7d1; --ink:#241b14; }
html { scroll-behavior: auto; }
body { margin:0; color:var(--ink); background:#d2c7a9; font-family:"ＭＳ Ｐゴシック", "MS PGothic", "Yu Gothic", serif; font-size:14px; line-height:1.65; }
a { color:#781b17; text-decoration:underline; } a:hover, a:focus { color:#bd241b; background:#f4e6b5; }
.page-frame { width:min(1040px, calc(100% - 22px)); margin:12px auto; padding:0 15px; background:var(--paper); border:3px double #8f733c; box-shadow:0 0 0 4px #b6a477; }
.skip { position:absolute; left:-10000px; }.skip:focus { left:8px; top:8px; z-index:10; }
.masthead { padding-top:7px; }
.masthead-top { display:flex; justify-content:space-between; gap:12px; padding:2px 5px; color:var(--cream); background:var(--dark-red); font-size:11px; letter-spacing:.08em; }
.identity { display:grid; grid-template-columns:210px 1fr 130px; align-items:center; gap:16px; padding:15px 9px 12px; border-bottom:3px double var(--gold); }
.header-flag { width:100%; height:auto; border:1px solid #5b1a12; }
.header-seal { width:105px; height:105px; object-fit:contain; justify-self:center; }
.title-block { text-align:center; }.small-cap { margin:0; color:#745a30; font:10px/1.4 monospace; letter-spacing:.06em; }
h1 { margin:4px 0 0; color:#641612; font-family:"Yu Mincho", "ＭＳ 明朝", serif; font-size:clamp(27px,4vw,40px); letter-spacing:.12em; line-height:1.35; text-shadow:1px 1px #d2b66d; }
.motto-small { margin:4px 0 0; color:#513c27; font-size:13px; letter-spacing:.06em; }
.main-nav { display:flex; justify-content:center; flex-wrap:wrap; margin:8px 0 0; border:1px solid #6f2019; background:#81201a; }
.main-nav a { padding:6px 12px; color:#f6e7b7; border-right:1px solid #be9650; text-decoration:none; font-weight:bold; font-size:13px; }
.main-nav a:hover,.main-nav a:focus { color:#5a1511; background:#efd68b; }
.ticker { display:flex; gap:10px; margin:7px 0 13px; padding:4px 7px; border:1px solid #987c43; background:#e3d6b1; font-size:12px; }.ticker b { flex:none; color:#781b17; }
.slogan { text-align:center; margin:0 0 14px; padding:15px 8px 13px; color:#f3d576; background:#77140f; border:4px double #d0a743; box-shadow:inset 0 0 0 2px #77140f; }
.slogan .ornament { color:#e3bc5c; font:12px monospace; letter-spacing:.15em; }.slogan h2 { margin:1px 0 0; font-family:"Yu Mincho", "ＭＳ 明朝", serif; font-size:clamp(28px,5vw,44px); letter-spacing:.2em; text-shadow:2px 2px #38100b; }.slogan p { margin:0; font-size:14px; letter-spacing:.14em; }
.columns { display:grid; grid-template-columns:minmax(0, 1fr) 225px; gap:14px; align-items:start; }.main-column,.side-column { min-width:0; }
.panel,.sidebox { margin:0 0 13px; padding:9px 11px 11px; border:1px solid #9c844f; outline:1px solid #d3c294; outline-offset:-4px; background:#f6f0de; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:9px; margin:0 0 10px; padding:4px 8px; color:#f3e4b9; background:#7b1b15; border-bottom:2px solid #c4a04e; font-size:17px; line-height:1.4; }.section-title:before { content:"■"; color:#dbb958; font-size:12px; }.section-title span { margin-right:auto; }.section-title small { color:#e7cc85; font-size:10px; font-weight:normal; }
.statement-body { display:grid; grid-template-columns:120px 1fr; gap:15px; align-items:center; padding:4px 9px; }.statement-body img { width:110px; height:110px; object-fit:contain; }.statement-body p { margin:4px 0; text-indent:1em; }.signature { text-align:right; color:#67502d; font-size:12px; }
table { width:100%; border-collapse:collapse; font-size:13px; } th,td { padding:5px 7px; border:1px solid #ad9b72; text-align:left; } .notice-table thead { color:#f2e3b7; background:#5f1713; }.notice-table th:first-child { width:100px; }.notice-table th:last-child,.notice-table td:last-child { width:58px; text-align:center; }
.notice-details,.song-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:7px; margin-top:9px; }.notice-details article,.song-details article { padding:6px 8px; border:1px dotted #a58d58; background:#f0e8d0; scroll-margin-top:8px; }.notice-details h3,.song-details h3 { margin:0; color:#751b16; font-size:13px; }.notice-details p,.song-details p { margin:3px 0 0; font-size:12px; }
.facts th { width:17%; background:#e7dcc0; color:#62201a; }.facts td { width:33%; }.note { color:#635a48; font-size:11px; }.panel>.note { margin:7px 0 0; }
.symbol-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; align-items:start; }.symbol-grid figure { margin:0; padding:8px; border:1px solid #b39b66; background:#eee5cc; text-align:center; }.symbol-grid img { display:block; max-width:100%; height:260px; margin:0 auto 7px; object-fit:contain; }.symbol-grid .flag-large { width:100%; }.symbol-grid figcaption { padding-top:5px; border-top:1px solid #a88b4b; font-size:12px; }.symbol-grid figcaption b { color:#681914; }
.song-list { display:flex; flex-wrap:wrap; gap:5px 22px; margin:4px 0 8px; padding:7px 8px 7px 25px; border:1px dotted #a58d58; background:#f1e9d5; }.song-list li::marker { color:#9b251b; }
.timeline th { width:120px; color:#651b15; background:#e8ddc2; vertical-align:top; }.timeline td { background:#f5efdf; }
.ideology-lead { margin:4px 5px 10px; padding:7px 9px; border-left:4px double #9c7937; background:#eee4c8; }.ideals-list { list-style:none; margin:0; padding:0; border-top:1px solid #b29a67; }.ideals-list li { display:grid; grid-template-columns:58px 1fr; gap:9px; padding:8px 5px; border-bottom:1px solid #b29a67; }.ideal-number { align-self:start; padding:2px 3px; color:#f4e5b9; background:#761912; text-align:center; font-family:serif; font-size:12px; }.ideals-list h3 { margin:0; color:#711914; font-family:"Yu Mincho", "ＭＳ 明朝", serif; font-size:17px; }.ideals-list p { margin:2px 0 0; }.ideology-seal { margin:10px 0 1px; padding:5px; border:1px double #a98b48; color:#6d1914; text-align:center; font-weight:bold; letter-spacing:.05em; }
.sidebox { padding:0 0 8px; }.sidebox h2 { margin:0 0 7px; padding:5px 9px; color:#f1e1af; background:#681712; border-bottom:2px solid #c6a04e; font-size:15px; }.sidebox p,.sidebox ul { margin:5px 10px; }.sidebox ul { padding-left:20px; }.sidebox .date { color:#7a2419; font-weight:bold; }.sidebox>a { margin-left:10px; font-size:12px; }.seal-box { display:flex; align-items:center; gap:7px; padding:7px; margin-bottom:10px; border:3px double #9b7a37; background:#e4d7b5; color:#691b14; font-family:serif; font-weight:bold; text-align:center; }.seal-box img { width:65px; height:65px; object-fit:contain; }.counter { padding:7px; border:1px solid #a38b5a; color:#553c22; background:#e5dcc5; text-align:center; font-size:11px; }.counter strong { font:16px monospace; color:#7c1b16; }
footer { margin:14px 0 0; padding:10px 5px 12px; border-top:3px double #8b733e; color:#5a4a33; text-align:center; font-size:11px; }footer p { margin:2px; }footer b { color:#6d1914; font-size:13px; }footer small { color:#70654f; }.back-top { margin-top:8px; }
@media (max-width:720px) { .page-frame { width:calc(100% - 12px); margin:6px auto; padding:0 8px; }.identity { grid-template-columns:110px 1fr; gap:8px; padding:10px 3px; }.header-seal { display:none; }.title-block { text-align:left; }.small-cap { font-size:8px; }.motto-small { font-size:11px; }.main-nav { justify-content:stretch; }.main-nav a { flex:1 1 25%; text-align:center; padding:6px 3px; font-size:12px; }.columns { grid-template-columns:1fr; }.side-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.sidebox { margin:0; }.seal-box,.counter { align-self:start; }.slogan { padding:12px 4px; }.slogan h2 { letter-spacing:.1em; }.statement-body { grid-template-columns:76px 1fr; gap:9px; }.statement-body img { width:72px; height:72px; }.symbol-grid img { height:200px; }.facts { font-size:11px; }.facts th,.facts td { padding:4px; }.facts th { width:20%; }.facts td { width:30%; }.ticker { align-items:flex-start; font-size:11px; } }
@media (max-width:420px) { body { font-size:13px; }.masthead-top { flex-direction:column; gap:0; }.identity { grid-template-columns:85px 1fr; }.title-block h1 { font-size:24px; letter-spacing:.05em; }.small-cap { display:none; }.main-nav a { flex-basis:33.333%; }.symbol-grid { grid-template-columns:1fr; }.symbol-grid img { height:auto; max-height:270px; }.facts th { width:22%; }.facts td { width:28%; }.side-column { grid-template-columns:1fr 1fr; }.notice-table { font-size:11px; }.notice-table th:first-child { width:78px; }.notice-table th:last-child,.notice-table td:last-child { width:43px; } }