→ .site-footer * の順で並べるだけでよい（_template.html を複製するのが早い）。 */ :root { /* ブランド5色 */ --main: #96c23d; --main-light: #c9e265; --accent: #ffdc5d; --accent2: #91dbef; --text: #3c3c3c; /* 地と面 */ --cream: #fcf3eb; --surface: #ffffff; --line: #e8ddd1; --text-muted: #7a7268; /* レイアウト */ --page-width: 44rem; --radius: 1.25rem; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--text); font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.8; /* 長い日本語の見出しが端末幅で不自然に割れないようにする */ word-break: normal; overflow-wrap: anywhere; line-break: strict; } /* ---------- ヘッダー ---------- */ .site-header { padding: 2.5rem 1.25rem 0; } .site-header__inner { max-width: var(--page-width); margin: 0 auto; display: flex; align-items: center; gap: 0.875rem; text-decoration: none; color: inherit; } .site-header__icon { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; display: block; flex-shrink: 0; } .site-header__name { font-size: 1.125rem; font-weight: 700; margin: 0; line-height: 1.4; } .site-header__name span { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.04em; } /* ---------- 本文 ---------- */ .page { max-width: var(--page-width); margin: 0 auto; padding: 2.5rem 1.25rem 3rem; } .page > h1 { font-size: 1.625rem; line-height: 1.5; margin: 0 0 0.75rem; } .page > h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; padding-left: 0.75rem; border-left: 4px solid var(--main); } .page p { margin: 0 0 1.25rem; } .lead { font-size: 1.0625rem; } .muted { color: var(--text-muted); font-size: 0.9375rem; } a { color: #5f7d1f; /* クリーム地で 4.5:1 を満たす緑。Main そのままでは薄い */ text-underline-offset: 0.2em; } /* ---------- カード ---------- */ .card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem 1.375rem; margin: 0 0 1.25rem; } .card h2 { font-size: 1rem; margin: 0 0 0.5rem; padding: 0; border: 0; } .card > :last-child { margin-bottom: 0; } .notice { border-left: 4px solid var(--accent); } /* 定義リスト（問い合わせ先・運営者情報など） */ .facts { margin: 0; } .facts dt { font-size: 0.8125rem; color: var(--text-muted); margin-top: 1rem; } .facts dt:first-of-type { margin-top: 0; } .facts dd { margin: 0.125rem 0 0; font-weight: 700; } /* ---------- 長文の法務ページ ---------- */ /* 見出しへジャンプしたとき、見出しが画面最上部に貼り付かないようにする */ .doc h2, .doc h3 { scroll-margin-top: 1rem; } .doc h3 { font-size: 1rem; margin: 2rem 0 0.5rem; } .doc__meta { color: var(--text-muted); font-size: 0.9375rem; margin: 0 0 1.75rem; } /* 目次 */ .toc { background: var(--surface); border-radius: var(--radius); padding: 1.25rem 1.375rem; margin: 0 0 2rem; } .toc h2 { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 0.625rem; padding: 0; border: 0; letter-spacing: 0.04em; } .toc ol { margin: 0; padding-left: 1.375rem; font-size: 0.9375rem; } .toc li { margin-bottom: 0.375rem; } .toc li:last-child { margin-bottom: 0; } /* 本文中のリスト。行頭記号の下に2行目が潜らないようにする */ .doc ul, .doc ol { padding-left: 1.375rem; margin: 0 0 1.25rem; } .doc li { margin-bottom: 0.5rem; } .doc strong { font-weight: 700; } /* 表。狭い画面では横スクロールさせ、本文側は横に溢れさせない */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.25rem; background: var(--surface); border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; line-height: 1.7; } th, td { text-align: left; vertical-align: top; padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); } thead th { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } /* 2列表の左列は項目名。狭い画面でも極端に潰れないようにする */ tbody th { font-weight: 700; min-width: 7.5rem; } /* 3列以上の表は狭い画面で1列あたりが潰れる（「Firebase」が途中で折れる、 * 本文が1〜2文字ずつ改行される）。横スクロールは法務の長文と相性が悪いので、 * .table-stack を付けた表は狭い画面で「1行＝1ブロック」に積み替える。 * 各 td に data-label="列名" が必要。2列の表は素のままで読めるので付けない。 */ @media (max-width: 34rem) { .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .table-stack tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--line); } .table-stack tr:last-child { border-bottom: 0; } .table-stack td { display: block; border: 0; padding: 0.375rem 1rem; } .table-stack td::before { content: attr(data-label); display: block; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; } } /* ページ末尾の「トップへ戻る」 */ .doc__back { margin-top: 2.5rem; font-size: 0.9375rem; } /* ---------- フッター ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 2rem 1.25rem 3rem; } .site-footer__inner { max-width: var(--page-width); margin: 0 auto; } /* 法務ページへのリンク置き場。 * 公開したページは … に * 差し替える。未公開の間はのまま。 */ .site-footer__links { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .site-footer__link { font-size: 0.9375rem; } .site-footer__link.is-pending { color: var(--text-muted); } .site-footer__link.is-pending::after { content: "（準備中）"; font-size: 0.8125rem; } .site-footer__copyright { margin: 0; font-size: 0.8125rem; color: var(--text-muted); } /* ---------- 端末幅 ---------- */ @media (max-width: 30rem) { .site-header { padding-top: 1.75rem; } .page { padding-top: 2rem; } .page > h1 { font-size: 1.4375rem; } }