.machi-fig { margin: 8px 0 4px; } .machi-fig svg { width: 100%; height: auto; display: block; } .machi-figcap { font-size: 12px; color: #525252; margin-top: 8px; line-height: 1.6; } .machi-figcap a { color: #19448e; } .machi-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 4px; } .machi-card { border: 1px solid #e5e7eb; border-left: 3px solid #19448e; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .machi-card__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: #525252; } .machi-card__value { font-size: 27px; font-weight: 700; color: #0a0a0a; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .machi-card__unit { font-size: 14px; margin-left: 2px; } .machi-card__year { font-size: 11.5px; color: #525252; } .machi-card__sub { font-size: 14px; font-weight: 700; color: #0a0a0a; font-variant-numeric: tabular-nums; } .machi-card__ranks { font-size: 13px; color: #0a0a0a; line-height: 1.7; font-variant-numeric: tabular-nums; } .machi-badge { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 700; border-radius: 3px; padding: 2px 7px; } .machi-badge--primary { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .machi-badge--secondary { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } .machi-badge--calc { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; } .machi-badge--check { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; } .machi-card__src { font-size: 11px; color: #525252; line-height: 1.6; } .machi-card__src a { color: #19448e; } .machi-card__fnref { text-decoration: underline dotted; text-underline-offset: 2px; } .machi-card__note { font-size: 11px; color: #525252; line-height: 1.6; } .machi-card__refline { font-size: 11.5px; color: #525252; line-height: 1.6; font-variant-numeric: tabular-nums; } /* Q6(工程B・裁S3-2B):参考平均値ブロック=3行改行形式(見出し+全国+県)・全指標統一 */ .machi-card__refline .machi-ref { display: block; } .machi-card__refline .machi-ref__label { display: block; font-weight: 700; } .machi-card__refline .machi-ref__row { display: block; } /* Q6(工程B・裁S3-A):指標名の2段構成(2段目=単位の但し書き)。ラベルはflexのため 折返しを許可し2段目に全幅を与える(凝固CSSアイコン節と同手法)。 字下げ50px=カードアイコン42px+gap8px(1段目の文字列に揃える) */ .machi-card__label { flex-wrap: wrap; } .machi-card__label .machi-card__label-unit { flex: 0 0 100%; width: 100%; box-sizing: border-box; display: block; font-size: 0.78em; font-weight: 400; line-height: 1.35; padding-left: 50px; } .machi-icon { flex: 0 0 auto; } .machi-card__label { display: flex; align-items: center; gap: 8px; } .machi-icon--card { width: 42px; height: 42px; } .machi-icon--legend { width: 28px; height: 28px; } .machi-rankscale { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; } .machi-rankscale__row { display: flex; align-items: flex-start; gap: 8px; } .machi-rankscale__scope { flex: 0 0 26px; font-size: 10px; font-weight: 700; color: #525252; padding-top: 6px; } .machi-rankscale__body { flex: 1 1 auto; min-width: 0; } .machi-rankscale__track { position: relative; display: block; height: 15px; } .machi-rankscale__track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-left: 1.5px solid #9aa3b2; border-right: 1.5px solid #9aa3b2; border-bottom: 1.5px solid #9aa3b2; } .machi-rankscale__arrow { position: absolute; bottom: 4px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #19448e; transform: translateX(-50%); } .machi-rankscale__ends { display: flex; justify-content: space-between; font-size: 10px; color: #525252; margin-top: 2px; font-variant-numeric: tabular-nums; } .machi-dyn { display: block; margin: 4px 0 2px; } .machi-dyn__row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .machi-dyn__label { flex: 0 0 52px; font-size: 10px; font-weight: 700; color: #525252; } .machi-dyn__track { position: relative; flex: 1 1 auto; height: 12px; background: #f3f4f6; } .machi-dyn__track::before { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1.5px; background: #9aa3b2; z-index: 1; } .machi-dyn__bar { position: absolute; top: 2px; bottom: 2px; background: #19448e; } .machi-dyn__bar--plus { left: 50%; } .machi-dyn__bar--minus { right: 50%; } .machi-dyn__val { flex: 0 0 64px; text-align: right; font-size: 11px; color: #0a0a0a; font-variant-numeric: tabular-nums; } .machi-dyn__legend { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #525252; margin-top: 2px; line-height: 1.6; } .machi-dyn__legend-text { display: block; } .machi-ageband { display: block; margin: 2px 0; } .machi-ageband__bar { display: flex; height: 8px; background: #e5e7eb; border-radius: 2px; overflow: hidden; } .machi-ageband__seg { display: block; height: 100%; } .machi-ageband__seg--young { background: #b9c9e4; } .machi-ageband__seg--work { background: #6d89bd; } .machi-ageband__seg--old { background: #19448e; } .machi-ageband__legend { display: block; font-size: 10px; color: #525252; margin-top: 4px; line-height: 1.7; font-variant-numeric: tabular-nums; } .machi-ageband__chip { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: baseline; } .machi-ageband__chip--young { background: #b9c9e4; } .machi-ageband__chip--work { background: #6d89bd; } .machi-ageband__chip--old { background: #19448e; } .machi-fact { border: 1px solid #e5e7eb; margin: 8px 0 4px; } .machi-fact__head { background: #19448e; color: #ffffff; font-weight: 700; letter-spacing: 0.06em; padding: 10px 16px; font-size: 14.5px; } .machi-fact__body { padding: 14px 16px 16px; } .machi-fact__intro { font-size: 13px; color: #0a0a0a; line-height: 1.8; margin: 0 0 12px; } /* Q6(工程B・裁S3-3):参考平均値の算出方式の脚注定義(凡例直後の機械付記) */ .machi-fact__refdef { font-size: 12px; color: #525252; line-height: 1.7; margin: 10px 0 0; } .machi-fact__legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; } .machi-fact__legend-item { font-size: 11.5px; color: #525252; line-height: 1.7; } .machi-fact__cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .machi-fact__card { border: 1px solid #e5e7eb; padding: 10px 12px; } .machi-fact__card-text { font-size: 12.5px; color: #0a0a0a; line-height: 1.8; margin: 6px 0 0; font-variant-numeric: tabular-nums; } .machi-fact__card-src { font-size: 11px; color: #525252; margin: 4px 0 0; } .machi-fact__card-src a { color: #19448e; } .machi-fact__srchead { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #0a0a0a; border-top: 1px solid #e5e7eb; padding-top: 12px; margin-bottom: 8px; } .machi-fact__sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .machi-fact__source { border: 1px solid #e5e7eb; padding: 10px 12px; font-size: 12px; line-height: 1.7; } .machi-fact__source a { color: #19448e; font-weight: 700; } .machi-fact__source-desc { color: #525252; display: block; font-size: 11.5px; } @media (max-width: 600px) { .machi-cards { grid-template-columns: 1fr; } .machi-fact__legend { grid-template-columns: 1fr; } .machi-fact__sources { grid-template-columns: 1fr; } } .machi-nav { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin: 8px 0 4px; } .machi-nav__item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border: 1px solid #e5e7eb; text-decoration: none; } .machi-nav__label { font-size: 10.5px; font-weight: 700; color: #525252; letter-spacing: 0.02em; } .machi-icon--nav { width: 26px; height: 26px; } .machi-pos { display: block; } .machi-pos--sp { display: none; } @media (max-width: 600px) { .machi-nav { grid-template-columns: repeat(5, 1fr); } .machi-pos--pc { display: none; } .machi-pos--sp { display: block; } } .article .entry-content h2.machi-h2 { border: none; border-radius: 0; color: #1e242c; line-height: 1.45; margin: 2.8em 0 1.4em; display: flex; align-items: center; gap: 12px; background: #e9f0ee; border-left: 4px solid #0d6e66; padding: 12px 16px; font-size: 22px; letter-spacing: .06em; } .article .entry-content h2.machi-h2::before { content: ""; flex: 0 0 auto; width: 26px; height: 26px; background: no-repeat center / contain; } @media screen and (max-width: 480px) { .article .entry-content h2.machi-h2 { gap: 10px; padding: 10px 12px; font-size: 19px; } .article .entry-content h2.machi-h2::before { width: 23px; height: 23px; } } .article .entry-content h2.machi-h2--loc::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M12%2020.5%20C12%2020.5%205.8%2014.6%205.8%209.9%20A6.2%206.2%200%200%201%2018.2%209.9%20C18.2%2014.6%2012%2020.5%2012%2020.5%20Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.9%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h2.machi-h2--metrics::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%227%22%20height%3D%227%22%20stroke-width%3D%221.6%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%224%22%20width%3D%227%22%20height%3D%227%22%20stroke-width%3D%221.6%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2213%22%20width%3D%227%22%20height%3D%227%22%20stroke-width%3D%221.6%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%227%22%20height%3D%227%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h2.machi-h2--timeline::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M4.5%204.5%20L4.5%2019.5%20L19.5%2019.5%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M7%2015.5%20L11%2011%20L14%2013%20L19%206.5%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h2.machi-h2--pyramid::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%224%22%20x2%3D%2212%22%20y2%3D%2220%22%20stroke-width%3D%221.4%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%227%22%20x2%3D%2210%22%20y2%3D%227%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%227%22%20x2%3D%2214%22%20y2%3D%227%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2211%22%20x2%3D%228.5%22%20y2%3D%2211%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2211%22%20x2%3D%2215.5%22%20y2%3D%2211%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2215%22%20x2%3D%226.5%22%20y2%3D%2215%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2215%22%20x2%3D%2217.5%22%20y2%3D%2215%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%225%22%20y2%3D%2219%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2219%22%20y2%3D%2219%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h2.machi-h2--neighbors::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2219.5%22%20x2%3D%2220%22%20y2%3D%2219.5%22%20stroke-width%3D%221.4%22%2F%3E%3Cline%20x1%3D%228.5%22%20y1%3D%2219.5%22%20x2%3D%228.5%22%20y2%3D%227.5%22%20stroke-width%3D%222.4%22%2F%3E%3Cline%20x1%3D%2215.5%22%20y1%3D%2219.5%22%20x2%3D%2215.5%22%20y2%3D%2211.5%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h2.machi-h2--industry::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Cline%20x1%3D%224%22%20y1%3D%227%22%20x2%3D%2220%22%20y2%3D%227%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%2212%22%20x2%3D%2214.5%22%20y2%3D%2212%22%20stroke-width%3D%222.2%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%2217%22%20x2%3D%2210%22%20y2%3D%2217%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h2.machi-h2--observe::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M3%2012%20C5.4%207.8%208.5%205.7%2012%205.7%20C15.5%205.7%2018.6%207.8%2021%2012%20C18.6%2016.2%2015.5%2018.3%2012%2018.3%20C8.5%2018.3%205.4%2016.2%203%2012%20Z%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.9%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h2.machi-h2--factcheck::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d6e66%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M12%203.6%20L18.8%206.1%20L18.8%2011.4%20C18.8%2015.9%2016.1%2018.9%2012%2020.4%20C7.9%2018.9%205.2%2015.9%205.2%2011.4%20L5.2%206.1%20Z%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M9%2012.1%20L11.3%2014.4%20L15.4%209.8%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); } .article .entry-content h3 { background: none; border: none; border-left: 4px solid #0d6e66; padding: 2px 0 2px 12px; margin: 2.8em 0 1.4em; font-size: 18.5px; color: #1e242c; letter-spacing: .04em; line-height: 1.4; } @media screen and (max-width: 480px) { .article .entry-content h3 { font-size: 17px; } } /* ── 現在位置図パネル(位置図実装仕様書v1・trex体裁裁定 2026-07-31)── 構造・座標はビルダー側(machi_position_chart.py / build_machi_benchmark.py)。 本節は色・体裁・余白のみを担う(設計C条件=様式のみの変更はこのファイルで閉じる)。 帯色 薄#9fe1cb(県内)/濃#085041(全国)・下敷き#f4f2ec・▼#378ADD は R4(優劣色 不使用)に適合する区分色であり、優劣・良否を示唆しない。 */ .machi-fig.machi-sec-position { background: #0d6e66; border-radius: 10px; padding: 16px; } .machi-pos-head { text-align: center; margin-bottom: 12px; } .machi-pos-pill { display: inline-block; background: #ffffff; color: #0d6e66; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; } .machi-pos-title { display: block; margin-top: 8px; font-size: 24px; font-weight: 700; color: #ffffff; line-height: 1.35; } .machi-pos-sub { display: block; margin-top: 2px; font-size: 13px; color: #cfe8e0; line-height: 1.5; } .machi-pos-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; } /* 基底ルールは**体裁のみ**を持つ(テンプレ改訂WO T1・B(i))。 色を基底と修飾の2箇所に置くのは帯色の二重管理であり(§M0-1)、 色の決定を修飾クラスへ一本化する。border-left の色は修飾側が与える。 【訂正・是正WO 2026-08-09】本節の旧コメントは「修飾クラスに常に上書き されるため**公開面での発現は0件**」と書いていたが、**これは誤りである**。 T0で実測したのは「HTML上の修飾クラスなしチップ=0件」であって、 **公開面のCSSカスケードは測っていなかった**。実測(x1/x2診断)によれば、 サーバ上の machi_style.css は 2026-07-31 版のままで、そこでは `--pref`/`--nat` が `border-left-color` しか持たないため、 **基底の background:#ffffff が実際に効いてチップが白地になっていた**。 すなわち帯色は Q6工程B(2026-08-04)以降ずっと公開面に出ていない。 原因は本ファイルの定義ではなく、**配信正本がサーバへ反映されていないこと**。 反映の検査=**M-G27**(verify_css_delivery_g27.py)を新設した。 */ .machi-pos-chip { display: inline-block; font-size: 11px; line-height: 1.6; padding: 3px 8px; border-radius: 4px; border-left: 3px solid; } /* Q1統合(Q6工程B・裁定6=S4:凡例チップの実色化。薄=帯実色#9fe1cbに黒字/ 濃=帯実色#085041に白字/▼=白地にカテゴリ色。文言案A逐語はビルダー側) */ .machi-pos-chip--marker { background: #ffffff; color: #19448e; border-left-color: #19448e; } .machi-pos-chip--pref { background: #9fe1cb; color: #0a0a0a; border-left-color: #9fe1cb; } .machi-pos-chip--nat { background: #085041; color: #ffffff; border-left-color: #085041; } .machi-pos-cards { display: block; } .machi-pos-card { background: #ffffff; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; } .machi-pos-card:last-child { margin-bottom: 0; } .machi-pos-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .machi-pos-card__icon { flex: 0 0 auto; width: 22px; height: 22px; display: block; } .machi-pos-card__name { font-size: 13px; font-weight: 700; color: #0a0a0a; letter-spacing: .02em; } .machi-pos-card__value { font-size: 15px; font-weight: 700; color: #0c447c; font-variant-numeric: tabular-nums; } .machi-pos-card .machi-pos { margin: 0; } /* Q6(工程B・裁S3-A/裁定6):位置図項目名の2段目(単位の但し書き)+条件付き文言 */ .machi-pos-card__name .machi-pos-card__unitline { display: block; font-size: 0.78em; font-weight: 400; line-height: 1.35; } .machi-pos-card .machi-pos-card__cond { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: #525252; } .machi-pos-underlay { fill: #f4f2ec; } .machi-pos-band-pref { fill: #9fe1cb; } .machi-pos-band-nat { fill: #085041; } .machi-pos-axis { stroke: #9aa3b2; stroke-width: 1; vector-effect: non-scaling-stroke; } .machi-pos-tick { stroke: #9aa3b2; stroke-width: 0.8; vector-effect: non-scaling-stroke; } .machi-pos-drop { stroke: #378ADD; stroke-width: 2; vector-effect: non-scaling-stroke; } .machi-pos-marker { fill: #378ADD; } .machi-sec-position .machi-figcap { color: #e3f0ec; margin-top: 12px; } .machi-sec-position .machi-figcap a { color: #ffffff; } @media (max-width: 600px) { .machi-fig.machi-sec-position { padding: 12px; } .machi-pos-title { font-size: 19px; } .machi-pos-sub { font-size: 12px; } .machi-pos-card { padding: 10px; } .machi-pos-card__icon { width: 20px; height: 20px; } .machi-pos-drop { stroke-width: 1.6; } }