/* ============================================================ 東京くらしねっと - コンポーネントCSS 【テーマの切り替え方】のように data-theme 属性を1つ指定するだけで、そのページ全体のアクセントカラーが変わります。使用可能テーマ: data-theme="library" → 図書資料室 (青) data-theme="info" → 情報ピックアップ (赤) data-theme="notice" → お知らせ (オレンジ) data-theme="lecture" → 講座案内 (紺) data-theme="safety" → 安全シグナル (緑) data-theme="consultation" → 相談の窓口 (紫) ============================================================ */ /* ============================================================ 1. デザイントークン（変数） ============================================================ */ :root { /* ── サイト共通カラー ── */ --color-brand: #4F9A6A; /* プライマリ（ヘッダー等） */ --color-brand-light: #d5efb9; --color-brand-dark: #369156; --color-brand-stripe: #dcf2c4; /* ── テーマカラー（デフォルト = ブランドカラー） ── */ --color-theme: var(--color-brand); /* ── ページ別テーマプリセット ── */ --color-topic: #4A8F1D; --color-library: #4A8F1D; --color-library-text: #005BAB; --color-info: #CD3B65; --color-notice: #D16A2A; --color-lecture: #1848A0; --color-safety: #2E8044; --color-consultation: #7A4B7D; --color-sitemap: #253880; /* ライトカラー（薄い版） */ --color-topic-light: #fcfaeb; --color-library-light: #fcfaeb; --color-info-light: #F9E7EC; --color-notice-light: #FBEDE5; --color-lecture-light: #E0EBF5; --color-safety-light: #E9F1E8; --color-consultation-light: #EFE9EF; /* バックナンバー */ --color-topic-back: #e8f7ed; --color-library-back: #e8f7ed; --color-info-back: #FDEFEF; --color-notice-back: #FFF4EE; --color-lecture-back: #EDF8FB; --color-safety-back: #F6F5EE; --color-consultation-back: #F7F0EF; /* ── グレースケール ── */ --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #EBEBEB; --gray-300: #D5D5D5; --gray-500: #888888; --gray-700: #555555; --color-text: #333333; --color-link: #1468B0; /* ── レイアウト ── */ --max-width: 1000px; --radius-sm: 3px; --radius: 4px; --radius-lg: 8px; } /* ── テーマ切り替え（data-theme 属性1つで全体が変わる） ── */ [data-theme="topic"] { --color-theme: var(--color-topic); --color-theme-light: var(--color-topic-light); --color-theme-back: var(--color-topic-back);} [data-theme="library"] { --color-theme: var(--color-library); --color-theme-light: var(--color-library-light); --color-theme-back: var(--color-library-back);} [data-theme="info"] { --color-theme: var(--color-info); --color-theme-light: var(--color-info-light); --color-theme-back: var(--color-info-back);} [data-theme="notice"] { --color-theme: var(--color-notice); --color-theme-light: var(--color-notice-light); --color-theme-back: var(--color-notice-back);} [data-theme="lecture"] { --color-theme: var(--color-lecture); --color-theme-light: var(--color-lecture-light); --color-theme-back: var(--color-lecture-back);} [data-theme="safety"] { --color-theme: var(--color-safety); --color-theme-light: var(--color-safety-light); --color-theme-back: var(--color-safety-back);} [data-theme="consultation"] { --color-theme: var(--color-consultation); --color-theme-light: var(--color-consultation-light); --color-theme-back: var(--color-consultation-back);} [data-theme="sitemap"] { --color-theme: var(--color-sitemap); } /* ============================================================ 2. リセット & ベース ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Yu Gothic', sans-serif; font-size: 1.5rem; font-weight: 500; line-height: 1.75; color: var(--color-text); background: #fff; } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } /* ============================================================ 3. レイアウト ============================================================ */ .sitemap{ width: fit-content; padding: 2px 10px; color: #fff; background-color: var(--color-brand); border-radius: 50vh; font-size: 1.3rem; margin-top: 12px; display: inline-block; } .sitemap:hover{ opacity: 0.8; } .image_wrap .slick-slide{ overflow: hidden; aspect-ratio: 260 / 367; } /* コンテナ */ .container { max-width: var(--max-width); margin: 0 auto; } /* セクション */ .article-border{ border-bottom: dashed 1px var(--gray-300); } .article-img__center{ text-align: center; margin: 20px auto; } .article + .article{ margin-top: 80px; } .article + .article.article-border-s{ border-top: solid 1px var(--gray-300); margin-top: 40px; padding-top: 40px; } /* 区切り線 */ .divider { border: none; border-top: 1px dashed var(--gray-300); margin: 24px 0; } /* インデント */ .indent10{ text-indent: -1em !important; padding-left: 1em !important; } .indent15{ text-indent: -1.5em !important; padding-left: 1.5em !important; } .indent20{ text-indent: -2em !important; padding-left: 2em !important; } @media (max-width: 1000px) { .container { padding: 0 20px; } } /* ============================================================ 4. ヘッダー ============================================================ */ .site-header { background: var(--color-brand-light); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0,0,0,.15); } .site-header__inner { max-width: var(--max-width); margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* サイト名リンク */ .site-name-link { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: bold; text-decoration: none; white-space: nowrap; } .site-name-link__icon { width: 22px; height: 22px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } /* ヘッダーコントロール群 */ .header-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .header-controls__label { color: #fff; font-size: 12px; white-space: nowrap; } /* ボタン（コントロール用） */ .btn--ctrl { background: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--color-text); white-space: nowrap; transition: background .15s; } .btn--ctrl:hover { background: #e8f8ff; } /* 検索ボックス */ .search-wrap { display: flex; align-items: center; gap: 2px; } .search-wrap__input { border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 3px 8px; font-size: 12px; width: 130px; background: rgba(255,255,255,.9); } .search-wrap__btn { background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 3px 8px; color: #fff; cursor: pointer; font-size: 13px; } /* ============================================================ 5. トップサムネ ============================================================ */ body.index .section{ border: 3px solid var(--color-theme); } body.index .section .title{ background-color: var(--color-theme); } body.index .read_more{ background-color: var(--color-theme); } /* ============================================================ 6. セクション見出し（テーマカラーで自動着色） ============================================================ */ /* フルバー見出し（色帯） */ .section-bar { background: var(--color-theme); color: #fff; padding: 9px 16px; border-radius: var(--radius); font-size: 1.8rem; font-weight: bold; margin: 20px 0 18px; display: flex; align-items: center; gap: 6px; } .section-bar img{ filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(64deg) brightness(109%) contrast(101%); } /* サブバー見出し（左ボーダー） */ .sub-bar { background: var(--color-theme-light); border-left: 5px solid var(--color-theme); color: var(--color-theme); padding: 7px 12px; font-size: 1.6rem; font-weight: bold; margin: 20px 0; } .bgsub-bar{ background: var(--color-theme); color: #fff; padding: 7px 12px; font-size: 1.6rem; font-weight: bold; margin: 20px 0; } .article-title-col2{ display: flex; align-items: center; gap:10px; } /* 記事タイトル（大） */ .article-title { font-size: 3.4rem; font-weight: bold; line-height: 1.4; margin-bottom: 8px; font-feature-settings: "palt"; } .article-title-small{ font-size: 2rem; } /* テーマカラー適用版 */ .article-title--themed { color: var(--color-theme); } .color-themed{ color: var(--color-theme); } .color-text{ color: var(--color-text)} .font-b{ font-weight: 700; } @media (max-width: 768px) { .article-title{ font-size: 2.8rem; } .article-title-small{ font-size: 1.7rem; } } /* ============================================================ 7. 汎用コンポーネント ============================================================ */ .circle-themed::before{ content:'●'; color: var(--color-theme); } .default-2col { display: flex; gap: 20px; align-items: flex-start; margin: 20px 0 0; } .default-2col-aligncenter{ align-items: center; } .default-2col__main { flex: 1; min-width: 0; } .default-2col__img { flex-shrink: 0; width: 160px; } .default-2col__img_large { flex-shrink: 0; width: 320px; } .default-2col__img_fit {flex-shrink: 0; width: fit-content;} @media (max-width: 768px) { .default-2col { flex-direction: column; } .default-2col__img { width: 100%; text-align: center;} } /* ============================================================ 8. 図書アイテム ============================================================ */ .book-list { list-style: none; padding: 0; } .book-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--gray-300); align-items: flex-start; } .book-item:last-child { border-bottom: none; } /* サムネイル枠 */ .book-item__thumb { flex-shrink: 0; width: 110px; } /* テキスト部 */ .book-item__body { flex: 1; } .book-item__title { font-size: 1.8rem; font-weight: bold; color: var(--color-theme); display: block; margin-bottom: 3px; } .book-item__author { font-size: 1.5rem; color: var(--gray-700); font-weight:700; margin-bottom: 3px; } .book-item__publisher { font-size: 1.3rem; font-weight: 500; } .book-item__desc { font-size: 1.5rem; line-height: 1.65; } /* 新着図書スタイル */ .badge--new-book { background: var(--color-theme); color: #fff; font-size: 1.5rem; font-weight: bold; width: 110px; padding: 30px 4px; border-radius: 8px; display: block; white-space: pre-line; text-align: center; line-height: 1.5; } /* ============================================================ 9. 図書館利用案内 ============================================================ */ .library-info { border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; margin: 20px 0; } .library-info__header { background: var(--color-theme); color: #fff; padding: 9px 16px; font-weight: bold; font-size: 14px; } .library-info__branches { display: flex; } .library-branch { flex: 1; padding: 16px; border-right: 1px solid var(--gray-300); } .library-branch:last-child { border-right: none; } .library-branch__name { color: var(--color-theme); font-weight: bold; font-size: 14px; margin-bottom: 8px; } .library-branch__addr { font-size: 13px; color: var(--gray-700); margin-bottom: 12px; line-height: 1.6; } .library-branch__label { color: var(--color-theme); font-weight: bold; font-size: 12px; margin-bottom: 4px; } .library-branch__text { font-size: 13px; margin-bottom: 8px; } .library-info__usage { padding: 16px; border-top: 1px solid var(--gray-300); background: var(--gray-50); font-size: 13px; line-height: 1.8; } .library-info__usage-title { font-weight: bold; margin-bottom: 6px; } /* ============================================================ 10. ヒーローレイアウト（画像＋テキスト） ============================================================ */ .hero { display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; } .hero-wide{ gap: 20px 50px; } .hero-reverse{ flex-direction: row-reverse; } .hero__img { flex-shrink: 0; } .hero__body { flex: 1; } .hero__kicker { font-size: 1.4rem; font-weight: 700;} .hero__lead { font-size: 1.5rem; color: var(--gray-700); line-height: 1.7; } .hero__author { font-size: 1.5rem; text-align: right; margin-top: 10px; margin-bottom: 10px; } .hero__author .large{ font-size: 1.8rem; font-weight: 700; } /* ============================================================ 11. ケースボックス（事例表示） ============================================================ */ .case-box { padding: 14px 16px; font-size: 13px; } .case-box + .case-box{ border-top: solid 1px #fff; } .case-box--theme { background: var(--color-theme-light); } .case-box__main { font-weight: bold; color: var(--color-theme); margin-bottom: 4px; } .case-box__note { font-size: 12px; color: var(--gray-700); } /* ============================================================ 12. ホットラインボックス ============================================================ */ .hotline-box { margin: 16px 0; display: flex; gap: 12px; flex-wrap: wrap; } .hotline-box__label { font-weight: bold; color: var(--color-theme);} .hotline-box__number { font-weight: bold; color: var(--color-theme); } /* ============================================================ 13. お問い合わせボックス ============================================================ */ .contact-box { display: flex; align-items: center; gap: 12px; padding: 20px 0; flex-wrap: wrap; border-top:dashed 1px var(--gray-300); } /* ラベル部分（テーマカラー） */ .contact-box__label { background: var(--color-theme); color: #fff; padding: 3px 12px; border-radius: var(--radius-sm); font-weight: 700; flex-shrink: 0; white-space: nowrap; } .contact-box__name{ color: var(--color-theme); font-size: 1.8rem; font-weight: 700; padding: 3px 12px; } .contact-box__val{ color: var(--color-theme); font-weight: 700; } /* ============================================================ 14. 委員会テーブル ============================================================ */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; } .data-table th, .data-table td { border: 1px solid var(--gray-300); padding: 8px 12px; text-align: left; } .data-table thead th { background: var(--color-theme); color: #fff; font-weight: bold; white-space: nowrap; } .data-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-theme) 5%, white); } /* ============================================================ 15. サマリーボックス（報告概要など） ============================================================ */ .summary-box { border-radius: var(--radius); padding: 16px; margin: 16px 0; background: color-mix(in srgb, var(--color-theme) 6%, white); border: 1px solid color-mix(in srgb, var(--color-theme) 25%, white); } .summary-box__title { font-weight: bold; font-size: 14px; color: var(--color-theme); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-theme) 20%, white); } .summary-box__body { font-size: 13px; line-height: 1.75; } /* 箇条書き（●付き） */ .bullet-list { list-style: none; padding: 0; } .bullet-list li { padding: 7px 0 7px; position: relative; font-size: 1.5rem; line-height: 1.65; } .bullet-list li:last-child { border-bottom: none; } /* QRブロック */ .qr-block { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 12px; } /* ============================================================ 16. 出前講座グループ ============================================================ */ .koza-section + .koza-section{ margin-top: 20px; border-top:dashed 1px var(--gray-300); } .koza-group { margin-bottom: 20px; } .koza-group__header { display: flex; align-items: center; padding: 8px 16px; font-weight: bold; color: #fff; gap: 8px; background: var(--color-theme); } .koza-row { display: flex; gap: 20px; padding: 7px 0; align-items: flex-start; } .koza-row:last-child { border-bottom: none; } .koza-row__key { background-color: var(--color-theme); font-weight: 700; min-width: 100px; flex-shrink: 0; color: #fff; padding: 2px; display: flex; justify-content: center; } .koza-row__key_red{ background-color: #D9001E; } .koza-row__key_w{ color: var(--color-theme); border: solid 1px var(--color-theme); background-color: transparent; } .koza-row__val { flex: 1; padding: 2px; } .koza-row__val .info-link-bar{ margin-top: 0; padding-top: 0; border: none; } .koza-access{ font-weight: 700; } .koza-access + .koza-access{ margin-top: 20px; padding-top: 20px; border-top:dashed 1px var(--gray-300); } .koza-caution{ font-size: 1.3rem; } /* ============================================================ 17. 講座テーブル ============================================================ */ .lecture-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; } .lecture-table th, .lecture-table td { border: 1px solid var(--gray-300); padding: 10px 12px; vertical-align: top; } .lecture-table thead th { background: var(--color-theme); color: #fff; text-align: center; white-space: nowrap; } .lecture-table tbody td:first-child { background: color-mix(in srgb, var(--color-theme) 8%, white); color: var(--color-theme); font-weight: bold; white-space: nowrap; } /* ============================================================ 18. 申込方法バー ============================================================ */ .apply-bar { display: flex; gap: 12px; flex-wrap: wrap; } .apply-bar__method { font-weight: bold; color: #D9001E; font-size: 1.4rem; flex-shrink: 0; } .apply-bar__url { word-break: break-all; } .apply-bar__url a{ color:var(--color-text); } /* 問い合わせ2カラム */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; padding-top: 20px; border-top:dashed 1px var(--gray-300); } .contact-grid-noborder{ padding-top: 0; border-top:none; } .contact-card { padding: 12px 16px; } .contact-card + .contact-card{ border-left:dashed 1px var(--gray-300); } .contact-card__label { font-weight: bold; color: var(--color-theme); margin-bottom: 6px; } .contact-card__org { font-weight: bold; margin-bottom: 4px; } .contact-card__text { font-size: 1.5rem; margin-bottom: 4px; } .contact-card__text + .contact-card__text { margin-top: 1rem; } .contact-card__phone { font-size: 1.5rem; font-weight: bold; color: var(--color-theme); display: flex; align-items: center; gap: 4px; } /* ============================================================ 19. 参考ボックス ============================================================ */ .ref-box { border-top: 1px dashed var(--gray-300); padding: 20px 0; margin: 20px 0; } .ref-box a { color: var(--color-text); word-break: break-all; } /* ============================================================ 20. Q&A ブロック ============================================================ */ .qa-block { display: flex; gap: 14px; padding: 16px; margin-bottom: 16px; align-items: flex-start; } .qa-block--a { background: var(--color-consultation-light); } .qa-block__letter { font-size: 20px; font-weight: bold; line-height: 1; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50vh; display: flex; justify-content: center; align-items: center; } .qa-block--q .qa-block__letter { background-color: var(--color-theme); color: #fff;} .qa-block--a .qa-block__letter { background-color: var(--color-theme); color: #fff; } .qa-block__text { font-size: 1.5rem; line-height: 1.75; flex: 1; } .qa-block__text p { margin-bottom: 1.5rem; } .qa-block__text p:last-child { margin-bottom: 0; } /* ============================================================ 21. バックナンバー（カテゴリー別） ============================================================ */ .backnumber-cat { background-color:var(--color-theme-back); padding: 28px 16px; margin-top: 36px; } .backnumber-cat__inner { max-width: var(--max-width); margin: 0 auto; } .backnumber-cat__title { color: var(--color-theme); font-weight: bold; font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* 「もっと見る」ボタン（テーマカラー） */ .btn--more { background: var(--color-theme); color: #fff; border-radius: 50vh; padding: 5px 16px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-block; flex-shrink: 0; transition: opacity .15s; } .btn--more:hover { opacity: .85; text-decoration: none; } /* バックナンバーリンクリスト */ .bn-link-list { list-style: none; padding: 0; } .bn-link-list li { padding: 10px 0; } .bn-link-list li + li{ border-top:dashed 1px var(--color-theme); } .bn-link-list a { color: var(--color-theme); } body.backnumber #article .layout_1 dd a, body.backnumber #article .layout_2 dd dd a, body.backnumber #article .layout_3 dd dd a, body.backnumber #article .layout_4 dd a{ color: var(--color-topic); } body.backnumber #article .layout_1>dl>dt, body.backnumber #article .layout_2>dl>dt, body.backnumber #article .layout_3>dl>dt, body.backnumber #article .layout_4>dl>dt, body.backnumber #article .layout_1 dd a:hover, body.backnumber #article .layout_2 dd dd a:hover, body.backnumber #article .layout_3 dd dd a:hover, body.backnumber #article .layout_4 dd dd a:hover, body.backnumber #contents .cat_link a, body.backnumber #article #bn_category dt, body.backnumber #article #bn_category dd a:hover{ background-color: var(--color-topic); color: #fff; } body.backnumber #article .wrap dd a:hover, body.backnumber #article .wrap02 dd dd a:hover, body.backnumber #article .wrap03 dd dd a:hover, body.backnumber #article .wrap04 dd dd a:hover { color: #fff; background-color: var(--color-topic); } body.all #article h1, body.backnumber #contents h1{ color: var(--color-topic); } /* ============================================================ 22. バックナンバー（全体・カテゴリ・号から） ============================================================ */ .backnumber-full { padding: 28px 16px; } .backnumber-full__title { color: var(--color-brand); font-weight: bold; font-size: 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; } .backnumber-full__title::before { content: '●'; font-size: 13px; } .backnumber-full__row { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--gray-200); } .backnumber-full__row:last-child { border-bottom: none; } .backnumber-full__row-label { color: var(--color-brand); font-size: 13px; font-weight: bold; width: 120px; flex-shrink: 0; padding-top: 4px; } /* カテゴリータグ群 */ .cat-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cat-tag { background: var(--color-brand); color: #fff; border-radius: 16px; padding: 4px 14px; font-size: 12px; text-decoration: none; transition: opacity .15s; } .cat-tag:hover { opacity: .8; text-decoration: none; } /* 号から探すレイアウト */ .bn-num { display: flex; gap: 16px; align-items: flex-start; } .bn-num__thumb { flex-shrink: 0; width: 90px; } .bn-num__body { flex: 1; } .bn-num__title { color: var(--color-link); font-size: 15px; font-weight: bold; display: block; margin-bottom: 8px; } .bn-num__articles { list-style: none; padding: 0; font-size: 13px; margin-bottom: 10px; } .bn-num__articles li { color: var(--color-link); margin-bottom: 3px; } /* 「さらに過去の号を見る」ボタン */ .btn--more-primary { background: var(--color-brand); color: #fff; border: none; border-radius: var(--radius); padding: 8px 20px; font-size: 13px; font-weight: bold; text-decoration: none; display: inline-block; align-self: center; transition: opacity .15s; } .btn--more-primary:hover { opacity: .85; text-decoration: none; } /* ============================================================ 23. フッターカード（3カラム） ============================================================ */ .footer-cards { padding: 20px 16px; background: #F0F8FF; border-top: 1px solid var(--gray-200); } .footer-cards__inner { max-width: var(--max-width); margin: 0 auto; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .footer-card { background: #fff; border: 2px solid var(--color-brand-light); border-radius: var(--radius-lg); padding: 14px 20px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text); font-size: 13px; font-weight: bold; flex: 1; min-width: 180px; max-width: 280px; transition: background .15s; } .footer-card:hover { background: #E0F4FF; text-decoration: none; } .footer-card__icon { width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--gray-100); } .footer-card__text { line-height: 1.4; } .footer-card__sub { font-size: 11px; font-weight: normal; } /* ============================================================ 24. サイトフッター ============================================================ */ .site-footer { background: #fff; border-top: 2px solid var(--gray-200); padding: 20px 16px; } .site-footer__inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; } .site-footer__org { display: flex; align-items: center; gap: 6px; color: var(--color-brand); font-weight: bold; font-size: 14px; margin-bottom: 6px; } .site-footer__address { font-size: 12px; color: var(--gray-700); line-height: 1.9; } .site-footer__phone { font-size: 16px; font-weight: bold; color: var(--color-text); } .site-footer__right { text-align: right; } .site-footer__copyright { font-size: 11px; color: var(--gray-500); margin-bottom: 8px; line-height: 1.7; } /* ソーシャルボタン */ .social-links { display: flex; gap: 8px; justify-content: flex-end; } .social-btn { width: 40px; height: 40px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; text-decoration: none; transition: opacity .15s; } .social-btn:hover { opacity: .8; text-decoration: none; } .social-btn--twitter { background: #111; } .social-btn--facebook { background: #1877F2; } /* ============================================================ 25. レスポンシブ ============================================================ */ @media (max-width: 768px) { /* ヘッダー */ .header-controls__label { display: none; } .search-wrap__input { width: 90px; } /* ロゴ */ .logo-title { font-size: 32px; } .issue-bubble { width: 56px; height: 56px; } .issue-bubble__month { font-size: 15px; } /* ヒーロー */ .hero { flex-direction: column; } .hero__img { text-align: center; width: 100%;} /* 図書館 */ .library-info__branches { flex-direction: column; } .library-branch { border-right: none; border-bottom: 1px solid var(--gray-300); } .library-branch:last-child { border-bottom: none; } /* 講座 */ .contact-grid { grid-template-columns: 1fr; gap:0;padding-top: 0; } .contact-card{ padding: 20px 0; } .contact-card + .contact-card{ border-left: none; border-top:dashed 1px var(--gray-300); } .lecture-table { font-size: 12px; } .lecture-table th, .lecture-table td { padding: 7px 8px; } .apply-bar { flex-direction: column; align-items: flex-start; } /* テーブル */ .data-table { font-size: 12px; } /* バックナンバー */ .backnumber-cat__title { flex-direction: column; align-items: flex-start; } .backnumber-full__row { flex-direction: column; } .backnumber-full__row-label { width: auto; } .bn-num { flex-direction: column; } /* フッター */ .footer-cards__inner { flex-direction: column; } .footer-card { max-width: 100%; } .site-footer__inner { flex-direction: column; align-items: flex-start; } .site-footer__right { text-align: left; } .social-links { justify-content: flex-start; } } @media (max-width: 480px) { .logo-title { font-size: 26px; } .cat-tag { font-size: 11px; padding: 3px 10px; } /* .hero__title { font-size: 20px; } .article-title--themed { font-size: 1.8rem; } */ .book-item__thumb { display: none; } } /* ============================================================ 26. トップページ専用コンポーネント ============================================================ */ /* メインレイアウト（イラスト左 + カードグリッド右） */ .top-main { display: flex; gap: 14px; padding: 20px 0 24px; align-items: flex-start; } /* 左：イラスト列 */ .top-illust-col { width: 230px; flex-shrink: 0; border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; } .top-illust-header { background: var(--gray-100); border-bottom: 1px solid var(--gray-300); padding: 6px 10px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: bold; } .top-illust-dl { font-size: 11px; background: var(--gray-300); color: var(--gray-700); padding: 2px 8px; border-radius: 10px; margin-left: auto; text-decoration: none; white-space: nowrap; } .top-illust-img { width: 100%; } .top-illust-caption { padding: 10px 12px 14px; } .top-illust-caption__title { font-size: 13px; font-weight: bold; margin-bottom: 6px; } .top-illust-caption__text { font-size: 12px; color: var(--gray-700); line-height: 1.7; } /* 右：カードグリッド */ .top-cards-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* 記事カード（各セクション） */ .article-card { --card-color: var(--color-brand); border: 2px solid var(--card-color); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-height: 160px; } .article-card__header { background: var(--card-color); color: #fff; padding: 7px 10px; font-size: 13px; font-weight: bold; text-align: center; } .article-card__body { padding: 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .article-card__inner { display: flex; gap: 8px; flex: 1; } .article-card__thumb { flex-shrink: 0; width: 58px; } .article-card__text { font-size: 12px; flex: 1; line-height: 1.6; color: var(--color-text); } .article-card__btn { background: var(--card-color); color: #fff; text-align: right; padding: 4px 10px; font-size: 11px; font-weight: bold; text-decoration: none; display: block; border-radius: 0 0 var(--radius) var(--radius); margin: 0 -10px -8px; } .article-card__btn:hover { opacity: .85; text-decoration: none; } /* セクション別カード色 */ .article-card[data-section="topic"] { --card-color: var(--color-brand); } .article-card[data-section="library"] { --card-color: var(--color-library); } .article-card[data-section="notice"] { --card-color: var(--color-notice); } .article-card[data-section="info"] { --card-color: var(--color-info); } .article-card[data-section="lecture"] { --card-color: var(--color-lecture); } .article-card[data-section="safety"] { --card-color: var(--color-safety); } .article-card[data-section="consultation"] { --card-color: var(--color-consultation); } /* カードが横幅2列を占める */ .article-card--wide { grid-column: span 2; } /* 募集中 / ご案内セクション */ .top-info-section { background: var(--gray-50); border-top: 2px solid var(--color-brand-light); border-bottom: 2px solid var(--color-brand-light); padding: 20px 0; margin: 24px 0; } .top-info-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .top-info-group__title { color: var(--color-brand); font-weight: bold; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .top-info-group__title::before { content: '●'; font-size: 12px; } .top-info-link-list { list-style: none; padding: 0; } .top-info-link-list li { padding: 7px 0; border-bottom: 1px dashed var(--gray-300); font-size: 13px; } .top-info-link-list li:last-child { border-bottom: none; } .top-info-link-list a { color: var(--color-link); } /* ============================================================ 27. 今月の話題専用コンポーネント ============================================================ */ /* インフォボックス（統計・数値強調） */ .info-highlight-box { background: color-mix(in srgb, var(--color-theme) 7%, white); border: 1px solid color-mix(in srgb, var(--color-theme) 25%, white); border-radius: var(--radius); padding: 16px 20px; margin: 16px 0; font-size: 13px; line-height: 1.8; } /* 2カラム比較レイアウト */ .compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; } .compare-col { background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 14px; } .compare-col__title { font-weight: bold; font-size: 14px; margin-bottom: 8px; color: var(--color-theme); padding-bottom: 6px; border-bottom: 1px solid var(--gray-300); } .compare-col__body { font-size: 13px; line-height: 1.7; } /* 分類テーブル */ .classify-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; } .classify-table th, .classify-table td { border: 1px solid var(--gray-300); padding: 8px 12px; text-align: left; vertical-align: top; } .classify-table thead th { background: var(--color-theme); color: #fff; font-weight: bold; } .classify-table tbody tr:nth-child(even) td { background: var(--gray-50); } /* チェックリスト */ .check-list { list-style: none; padding: 0; margin: 10px 0; } .check-list li { padding: 5px 0 5px 22px; position: relative; font-size: 13px; } .check-list li::before { content: '●'; position: absolute; left: 0; color: var(--color-theme); font-size: 9px; top: 8px; } /* 品質表示サンプルボックス */ .quality-display-box { background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 16px; margin: 16px 0; font-size: 12px; line-height: 1.9; } .quality-display-box__title { font-weight: bold; font-size: 13px; color: var(--color-theme); margin-bottom: 8px; } /* 記事内バックナンバーリスト */ .article-bn-list { list-style: none; padding: 0; } .article-bn-list li { padding: 7px 0; border-bottom: 1px dashed var(--gray-300); font-size: 13px; } .article-bn-list li:last-child { border-bottom: none; } /* レスポンシブ（追加） */ @media (max-width: 768px) { .top-main { flex-direction: column; } .top-illust-col { width: 100%; } .top-cards-grid { grid-template-columns: 1fr 1fr; } .article-card--wide { grid-column: span 2; } .top-info-inner { grid-template-columns: 1fr; gap: 16px; } .compare-cols { grid-template-columns: 1fr; } .classify-table { font-size: 12px; } .classify-table th, .classify-table td { padding: 6px 8px; } } @media (max-width: 480px) { .top-cards-grid { grid-template-columns: 1fr; } .article-card--wide { grid-column: span 1; } } /* ============================================================ 28. お知らせページ専用コンポーネント ============================================================ */ /* 左コンテンツ＋右画像の2カラムレイアウト */ .oshirase-2col { display: flex; gap: 20px; align-items: flex-start; flex-direction: row-reverse; margin: 20px 0 0; } .oshirase-2col__main { flex: 1; min-width: 0; } .oshirase-2col__img { flex-shrink: 0; width: 160px; } .oshirase-2col__img_large {width: 320px;} /* 演目テーブル（新作・改訂の縦積みリスト） */ .program-table { border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; font-size: 13px; margin-top: 10px; } .program-row { display: flex; gap:20px; } .program-row__key{ font-weight: 700; } /* 新作・改訂バッジ */ .badge-shin { background: #E04040; color: #fff; font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: var(--radius-sm); display: inline-block; white-space: nowrap; } .badge-kai { background: var(--color-notice); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: var(--radius-sm); display: inline-block; white-space: nowrap; } .badge-type { font-size: 11px; background: var(--gray-200); color: var(--gray-700); padding: 1px 8px; border-radius: 2px; display: inline-block; white-space: nowrap; } .badge-yasashii { display: inline-block; background: #2878C0; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 2px; white-space: nowrap; margin-left: 4px; vertical-align: middle; } /* タイトル帯 */ .title-band { background: color-mix(in srgb, var(--color-notice) 10%, white); padding: 10px 16px; font-size: 1.5rem; font-weight: 700; color: var(--color-theme); margin: 12px 0 0; } .title-band .large{ font-size: 2rem; } /* QR・URL付き情報バー */ .info-link-bar { font-size: 13px; margin: 20px 0; padding: 20px 0 0; border-top: dashed 1px var(--gray-300); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .info-link-bar__label { font-weight: bold; font-size: 1.4rem; color: var(--color-theme); } .info-link-bar__label .text-large{ font-size: 1.8rem; } .info-link-bar__label .text-color{ color: var(--color-text); } a.info-link-bar__label{ text-decoration: underline; } .info-link-bar__note { font-size: 12px; color: var(--gray-700); white-space: nowrap; } /* ============================================================ 29. 講座案内ページ専用コンポーネント ============================================================ */ /* 講座タイトル行（大見出し＋定員バッジ） */ .koza-heading-bar { display: flex; align-items:center; gap: 12px; margin: 16px 0 12px; flex-wrap: wrap; } .koza-heading-bar__title { font-size: 3.4rem; font-weight: bold; line-height: 1.4; color:var(--color-theme); } .koza-heading-bar__sub { font-size: 2rem; margin-top: 4px; } .koza-heading-bar__sub .capacity{ margin-left: 4px; } .koza-heading-bar .capacity{ color:#D9001E; border:solid 1px #D9001E; font-weight:700; padding:2px 10px; white-space:nowrap; flex-shrink:0; font-size: 1.6rem; } /* 部番号バッジ */ .part-badge { display: inline-block; background: var(--color-theme); color: #fff; font-size: 12px; font-weight: bold; padding: 3px 14px; border-radius: var(--radius-sm); white-space: nowrap; flex-shrink: 0; } /* 講師ブロック（写真左＋テキスト右） */ .lecturer-block { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--gray-200); } .lecturer-block:last-child { border-bottom: none; } .lecturer-block__img { flex-shrink: 0; width: 110px; } .lecturer-block__body { flex: 1; } .lecturer-block__part-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .lecturer-block__time { font-size: 12px; color: var(--gray-500); } .lecturer-block__title { font-size: 14px; font-weight: bold; margin-bottom: 4px; } .lecturer-block__name { font-size: 13px; color: var(--gray-700); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lecturer-block__kind-tag { font-size: 11px; background: var(--gray-200); color: var(--gray-700); padding: 1px 8px; border-radius: 2px; white-space: nowrap; } .lecturer-block__desc { font-size: 13px; line-height: 1.75; } /* プロフィールボックス */ .profile-box { background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; line-height: 1.8; margin-top: 10px; } .profile-box__label { font-weight: bold; color: var(--color-theme); font-size: 12px; margin-bottom: 4px; } /* 託児・手話バッジ */ .badge-takuji { background: #7B5EA7; color: #fff; font-size: 11px; font-weight: bold; padding: 2px 9px; border-radius: var(--radius-sm); display: inline-block; white-space: nowrap; } .badge-shuwa { background: #2878C0; color: #fff; font-size: 11px; font-weight: bold; padding: 2px 9px; border-radius: var(--radius-sm); display: inline-block; white-space: nowrap; } /* 会場名（テーマカラー太字） */ .venue-name { font-weight: bold; color: var(--color-theme); font-size: 13px; margin-bottom: 3px; } @media (max-width: 768px) { .koza-heading-bar{ align-items: flex-start; gap:0; } .koza-heading-bar__title { font-size: 2.8rem; } .koza-heading-bar__sub{ font-size: 1.8rem; display: flex; flex-direction: column; align-items: flex-start; } .koza-heading-bar .capacity{ display: inline-block; margin-top: 6px; } } /* ============================================================ 30. サイトマップページ専用コンポーネント ============================================================ */ .sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; margin: 28px 0 36px; } .sitemap-col { } .sitemap-list { list-style: none; padding: 0; margin: 0; } .sitemap-list li { padding: 5px 0; } .sitemap-list a { color: var(--color-link); font-size: 13px; display: flex; align-items: baseline; gap: 4px; text-decoration: underline; width: fit-content; } .sitemap-list a:hover { text-decoration: underline; } /* ============================================================ 31. レスポンシブ追加分 ============================================================ */ @media (max-width: 768px) { .oshirase-2col { flex-direction: column; } .oshirase-2col__img { width: 100%; text-align: center;} .program-row{ flex-direction: column; gap:0; } .program-row + .program-row{ margin-top: 20px; } .program-row__label-col { width: 80px; } .lecturer-block { flex-direction: column; } .lecturer-block__img { width: 100%; max-width: 180px; } .koza-heading-bar { flex-direction: column; } .sitemap-grid { grid-template-columns: 1fr 1fr; gap: 20px 32px; } } @media (max-width: 400px) { .sitemap-grid { grid-template-columns: 1fr; } } /* ============================================================ 32. 今月の話題ページ専用コンポーネント ============================================================ */ /* 記事ヒーロー：縦書きタイトル帯＋本文 */ .topic-hero { display: flex; gap: 0; margin: 20px 0 24px; border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; } /* 左：縦書きタイトル帯 */ .topic-hero__title-col { background: var(--color-brand); color: #fff; width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 20px 0; } .topic-hero__title-vert { writing-mode: vertical-rl; text-orientation: mixed; font-size: 18px; font-weight: bold; letter-spacing: 4px; line-height: 1.2; white-space: nowrap; } /* 右：リード文エリア */ .topic-hero__body { flex: 1; padding: 20px 24px; } .topic-hero__lead { font-size: 13px; line-height: 1.85; margin-bottom: 12px; } .topic-hero__author { font-size: 12px; color: var(--gray-700); text-align: right; } /* 目次リスト */ .topic-toc { list-style: none; padding: 0; margin: 0 0 28px; border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; } .topic-toc li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--gray-200); font-size: 13px; font-weight: bold; } .topic-toc li:last-child { border-bottom: none; } .topic-toc__num { background: var(--color-brand); color: #fff; font-size: 11px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold; } /* 2カラム：左本文＋右ビジュアル */ .topic-section { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 28px; } .topic-section__body { flex: 1; min-width: 0; } .topic-section__visual { flex-shrink: 0; width: 220px; } /* 右サイドカード（ビジュアルのラッパー） */ .visual-card { border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; background: var(--gray-50); } .visual-card__header { background: var(--color-brand); color: #fff; font-size: 12px; font-weight: bold; padding: 6px 12px; } .visual-card__body { padding: 12px; font-size: 12px; line-height: 1.8; } /* 数値ハイライトボックス（水分量など） */ .water-stat-box { border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; background: #EFF8FD; } .water-stat-row { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--gray-300); font-size: 13px; } .water-stat-row:last-child { border-bottom: none; } .water-stat-row__label { flex: 1; color: var(--gray-700); } .water-stat-row__val { font-size: 18px; font-weight: bold; color: var(--color-brand); white-space: nowrap; } .water-stat-row__unit { font-size: 12px; color: var(--gray-700); } /* フロー図（水が届くまで） */ .flow-steps { list-style: none; padding: 0; margin: 0; } .flow-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--gray-200); font-size: 12px; line-height: 1.6; } .flow-step:last-child { border-bottom: none; } .flow-step__num { background: var(--color-brand); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; flex-shrink: 0; margin-top: 1px; } .flow-step__arrow { text-align: center; color: var(--color-brand); font-size: 14px; padding: 2px 0 2px 32px; } /* 浄水器タイプ一覧 */ .filter-types { display: flex; flex-direction: column; gap: 8px; } .filter-type-item { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 8px 10px; } .filter-type-item__icon { width: 36px; height: 40px; flex-shrink: 0; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; } .filter-type-item__name { font-size: 11px; font-weight: bold; color: var(--color-brand); } /* 品質表示ボックス */ .quality-box { border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; margin-top: 10px; font-size: 12px; } .quality-box__header { background: var(--gray-200); color: var(--gray-700); padding: 6px 12px; font-weight: bold; font-size: 11px; } .quality-box__body { padding: 10px 12px; line-height: 1.9; background: #fff; } /* ミネラルウォーター分類テーブル */ .mineral-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 0; } .mineral-table th, .mineral-table td { border: 1px solid var(--gray-300); padding: 5px 8px; text-align: left; vertical-align: top; } .mineral-table thead th { background: var(--color-brand); color: #fff; font-weight: bold; } .mineral-table tbody tr:nth-child(even) td { background: var(--gray-50); } /* ラベル図（ミネラルウォーター） */ .label-mock { border: 2px solid var(--gray-300); border-radius: var(--radius); padding: 10px 12px; font-size: 11px; line-height: 1.8; background: #fff; margin-top: 8px; } .label-mock__title { font-weight: bold; font-size: 12px; color: var(--color-brand); margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--gray-300); } /* まとめセクション */ .topic-summary { background: color-mix(in srgb, var(--color-brand) 6%, white); border: 1px solid color-mix(in srgb, var(--color-brand) 22%, white); border-radius: var(--radius); padding: 18px 22px; font-size: 13px; line-height: 1.85; margin-bottom: 28px; } /* ============================================================ 33. レスポンシブ（topic追加分） ============================================================ */ @media (max-width: 768px) { .topic-section { flex-direction: column; } .topic-section__visual { width: 100%; } } @media (max-width: 480px) { .topic-hero { flex-direction: column; } .topic-hero__title-col { width: 100%; height: 48px; writing-mode: horizontal-tb; } .topic-hero__title-vert { writing-mode: horizontal-tb; font-size: 16px; letter-spacing: 2px; } } /* ============================================================ 34. 今月の話題（賃貸住宅）専用コンポーネント ============================================================ */ /* ヒーローブロック：イラスト左＋テキスト右 */ .topic-hero-2col { display: flex; gap: 20px; align-items: flex-start; margin: 20px 0 24px; } .topic-hero-2col__img { flex-shrink: 0; width: 160px; } .topic-hero-2col__body { flex: 1; } .topic-hero-2col__catch { font-size: 13px; font-weight: bold; color: var(--color-theme); margin-bottom: 4px; } .topic-hero-2col__title { font-size: 24px; font-weight: bold; line-height: 1.35; margin-bottom: 10px; color: var(--color-text); } .topic-hero-2col__lead { font-size: 13px; line-height: 1.85; margin-bottom: 10px; } .topic-hero-2col__author { font-size: 12px; color: var(--gray-700); text-align: right; } /* 本文＋右サイドビジュアルの汎用2カラム（topic-sectionと同様だが独立定義） */ .article-2col { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 4px; } .article-2col__body { flex: 1; min-width: 0; } .article-2col__aside { flex-shrink: 0; width: 300px; } /* 負担区分テーブル（どこまでが貸主負担？） */ .burden-table { width: 100%; border-collapse: collapse; font-size: 12px; } .burden-table th, .burden-table td { border: 1px solid var(--gray-300); padding: 7px 10px; vertical-align: top; line-height: 1.65; } .burden-table thead th { text-align: center; font-weight: bold; background: var(--color-theme); color: #fff; } .burden-table td:first-child { background: color-mix(in srgb, var(--color-theme) 8%, white); font-weight: bold; width: 45%; } .burden-table tbody tr:nth-child(even) td:last-child { background: var(--gray-50); } .burden-table__note { font-size: 11px; color: var(--gray-500); margin-top: 6px; line-height: 1.6; } /* 家賃値上げ情報ボックス */ .rent-info-box { border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; } .rent-info-box__header { background: var(--color-theme); color: #fff; padding: 7px 12px; font-size: 12px; font-weight: bold; } .rent-info-box__body { padding: 10px 12px; font-size: 12px; line-height: 1.75; background: color-mix(in srgb, var(--color-theme) 5%, white); } .rent-info-box__body ul { list-style: none; padding: 0; margin: 0; } .rent-info-box__body li { padding: 4px 0 4px 14px; position: relative; border-bottom: 1px dashed var(--gray-200); } .rent-info-box__body li:last-child { border-bottom: none; } .rent-info-box__body li::before { content: '●'; position: absolute; left: 0; top: 7px; font-size: 8px; color: var(--color-theme); } /* 相談告知バッジ */ .soudan-badge { background: var(--color-theme); color: #fff; border-radius: var(--radius); padding: 10px 14px; font-size: 12px; font-weight: bold; text-align: center; margin-top: 10px; line-height: 1.6; } .soudan-badge__num { font-size: 20px; font-weight: bold; display: block; margin-top: 4px; } /* 相談窓口テーブル */ .soudan-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; } .soudan-table th, .soudan-table td { border: 1px solid var(--gray-300); padding: 8px 12px; vertical-align: top; line-height: 1.7; } .soudan-table thead th { background: var(--color-theme); color: #fff; font-weight: bold; white-space: nowrap; } .soudan-table tbody tr:nth-child(even) td { background: var(--gray-50); } .soudan-table__tel { font-weight: bold; font-size: 15px; color: var(--color-theme); white-space: nowrap; } /* 参考リンクバー（QR付き） */ .ref-link-bar { display: flex; align-items: center; gap: 12px; background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; flex-wrap: wrap; } .ref-link-bar__label { font-size: 12px; font-weight: bold; color: var(--color-text); white-space: nowrap; } .ref-link-bar__url { font-size: 11px; word-break: break-all; flex: 1; color: var(--color-link); } /* まとめブロック */ .topic-summary-box { background: color-mix(in srgb, var(--color-theme) 6%, white); border: 1px solid color-mix(in srgb, var(--color-theme) 22%, white); border-radius: var(--radius); padding: 16px 20px; font-size: 13px; line-height: 1.85; margin-bottom: 24px; } /* ============================================================ 35. レスポンシブ追加（賃貸topic） ============================================================ */ @media (max-width: 640px) { .topic-hero-2col { flex-direction: column; } .topic-hero-2col__img { width: 100%; } .article-2col { flex-direction: column; } .article-2col__aside { width: 100%; } } /* ============================================================ 36. news ============================================================ */ .news-table li{ padding: 4px 0; border-bottom: solid 1px #d5d5d5; } .news-table dl{ display: flex; justify-content: space-between; flex-wrap: wrap; } .news-table dl dt{ font-size: 1.4rem; } .news-table dl dd{ font-size: 1.5rem; font-weight: 700; }