:root { /* Color */ --color-bg: #f6f5f2; --color-surface: #ffffff; --color-surface-alt: #eef2f4; --color-text: #16232f; --color-text-muted: #5b6673; --color-text-faint: #656b78; --color-brand: #2a5b82; --color-brand-dark: #1e435f; /* アクセントは肱川の深い青緑。以前の #1fb3ac はCSSフレームワークの既定色そのままの明るいティールで、藍・蜜柑・柿渋といった落ち着いた和色の中で1色だけ浮いていた。タグ8色(--color-tag-*)と同じ彩度・明度帯にそろえている。 */ --color-accent: #2e7f78; --color-accent-dark: #1f5f5a; /* 濃紺の帯(.home-kenkyu)の上で使う明るめのアクセント。 #2e7f78 のままだと濃紺に沈んで読めないための専用色。 */ --color-accent-on-dark: #7fc4b9; --color-accent-btn: #0f7d78; --color-accent-btn-hover: #0c6560; /* メモうの吹き出し用。マスコットの体色にある茶系から取っている。要点ボックス(--color-surface-alt の寒色)と並べても同じ箱に見えないように、わざと暖色側に置いている。 */ --color-memou-bg: #fdf8ef; --color-memou-border: #dfd0b8; --color-memou-ink: #8a5541; --color-border: #e4e2dc; --color-border-strong: #d3d0c7; --color-warn-bg: #fdf1d6; --color-warn-text: #8a6d1d; --color-warn-border: #eddca0; /* タグ・カテゴリの色分け。もとは彩度の高い8色だったが、1画面に8色が同時に出ると「配色が決まっていないサイト」に見えるため、明度をそろえ彩度を落として、8色が1つの色群として読めるようにしている。色そのものは大洲にちなんだ名前を引き継いでいる。 */ --color-tag-indigo: #3d5473; /* 藍色 - 伝統・行政 */ --color-tag-mikan: #9a6238; /* 蜜柑色 - 観光・活気 */ --color-tag-moss: #566b45; /* 若草色 - まちづくり・再生 */ --color-tag-gold: #846f42; /* 山吹金 - 産業・実り */ --color-tag-teal: #3a6a64; /* 肱川の水色 - インフラ・流れ */ --color-tag-slate: #556678; /* 鈍色 - 財政・データ */ --color-tag-kakishibu: #8a5541; /* 柿渋色 - 防災・警戒 */ --color-tag-rose: #7b5060; /* 紅樺色 - 福祉・やさしさ */ /* Typography scale (major third-ish, capped to a small set) */ /* 本文はゴシック、見出しは明朝。Webフォントは各HTMLので読み込んでいる。未読み込み・読み込み失敗時はOS標準のフォントに落ちるようフォールバックを並べる。 */ --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; --font-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 2.75rem; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Elevation (subtle, warm-toned so it doesn't read as pure-black drop shadow) */ --shadow-sm: 0 1px 2px rgba(22, 35, 47, 0.06), 0 1px 1px rgba(22, 35, 47, 0.04); --shadow-md: 0 6px 16px rgba(22, 35, 47, 0.08), 0 2px 4px rgba(22, 35, 47, 0.05); --shadow-lg: 0 16px 40px rgba(22, 35, 47, 0.12), 0 4px 10px rgba(22, 35, 47, 0.06); --max-width: 1160px; --header-h: 76px; /* 角丸は「かすかに面取りしてある」程度に抑える。以前は 8/14/20px で、カードもタグも写真も全部丸く、いかにも生成ツールの既定値という見え方だった。読み物主体のサイトなので、印刷物寄りの硬い角に振る。 */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; /* backward-compat aliases (specialised sections below still reference these) */ --color-accent-dark-legacy: var(--color-accent-dark); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.75; font-size: var(--text-base); -webkit-font-smoothing: antialiased; /* 大洲検定・ジオゲッサー・データなど中身の短いページで、フッターが画面の途中で終わって下に何もない帯ができてしまうのを防ぐ。 bodyを縦フレックスにして、フッターに margin-top:auto を効かせる。 */ min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* キーボード操作時にどこにいるか見えるようにする(マウス操作では出ない) */ :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* ── 日本語の折り返しをきれいにする ──────────────────────────── 日本語は英語と違って「どこでも改行できる」ので、放っておくと「大洲市民の非公式情報サイ／ト」のように最後の1文字だけ次の行に落ちて読みにくくなる。・word-break: auto-phrase … 文節(意味のまとまり)で改行してくれる・text-wrap: pretty … 最後の行が極端に短くならないよう調整するどちらも未対応ブラウザでは無視されるだけなので、害はない。長い本文にかけると重いので、見出しや短い説明文だけに絞ってかける。 */ /* まず全体に text-wrap: pretty。最後の行に1〜2文字だけ残るのを防ぐ */ h1, h2, h3, h4, .hero-text p, .page-hero p, .pick-card h3, .pick-card p, .news-title, .link-card strong, .link-card p, .icon-card, .monthly-headline, .monthly-comment, .featured-article .featured-body p, .fun-corner-card p, .sidebar-latest-list li a, .news-category-card p, .home-kenkyu-lead, figcaption { text-wrap: pretty; } /* メモうの吹き出しだけ、この指定から漏れていた。本人の指摘(2026-09-05):「3つのメモのうちの1つが少し長いから、 1文字だけ次の行に落ちるのが嫌」。段落が3つあること自体は問題ない。はじめ balance にしたが、**段落の途中に
があると balance は
の手前までしか効かない**ことが分かった(2026-09-05に実測)。 sogo3-pabukome-5nin の帯が実例で、前半2行は13字・14字ときれいに揃っているのに、後半だけ25字・2字のまま放置されていた。メモうの段落569のうち18に
が入っている。 pretty は「最後の行が極端に短くならないようにする」ための指定で、まさに本人が嫌がっている形を狙って直してくれる。 63本×5つの画面幅で数え比べた結果: 総行数はどの幅でも balance と完全に同じ(見た目の詰まり方は変わらない) 1〜2文字だけ落ちる段落は balance 1件 → pretty 0件悪くなるところが無いので pretty にする。 */ .memou-intro-bubble p, .memou-aside p { text-wrap: pretty; word-break: auto-phrase; } /* 壊れてはいけない語を、壊れない箱に入れる。tools/kaigyo.py が付ける。 word-break: auto-phrase はChromeにしか無く、iPadのSafariでは効かない。本人の指摘(2026-09-05):「大洲城・臥龍山荘、まさかの来／館者5万人」のように語の途中で切れる。数字と単位(37,931／人)も切れる。これはどのブラウザでも効く。 */ .nb { white-space: nowrap; } /* word-break: auto-phrase は「見出し・短い説明文」だけにかける。長い段落にかけると文節の切れ目でしか折り返せず、右端が大きく余ってかえって行が詰まる(実測: 1行の使用率が91%→84%、行数が12→13に増えた)。 */ h1, h2, h3, h4, .page-hero p, .pick-card h3, .pick-card p, .news-title, .link-card strong, .link-card p, .icon-card, .monthly-headline, .sidebar-latest-list li a, .home-kenkyu-lead, .kenkyu-list a, figcaption { word-break: auto-phrase; } /* ── 見出しは明朝 ──────────────────────────────────────────── 本文と同じゴシックで見出しだけ極太にすると、どうしても「テンプレートで組んだページ」の見え方になる。見出しに明朝を当てると、同じ内容でも「編集された誌面」に見える。 UI(ナビ・ボタン・タブ・数字ラベル)はゴシックのままにして、読み物の部分だけ書体を変えている。 */ .hero h1, .page-hero h1, .article-page h1, .article-page h2, .section-title, .pick-card h3, .news-card .news-title, .lead-story-title, .kenkyu-list a, .featured-article h3, .monthly-headline { font-family: var(--font-serif); font-feature-settings: "palt" 1; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* 共通カード演出: 罫線1本のフラットな箱で統一する。以前は全カードに影+ホバーで2px浮き上がる演出を付けていたが、読み物サイトでカードが浮き沈みするのは広告サイトの動きで、誌面らしさを消していた。ホバーは罫線の色が変わるだけにする。 (影は、本当に手前に重なる部品=ドロップダウンとモーダルだけに残す) */ .news-category-card, .icon-card, .related-list-plain, .monthly-card, .featured-article a.featured-card, .fun-corner-card { transition: border-color 0.18s ease, background 0.18s ease; } .icon-card:hover, .monthly-card:hover, .featured-article a.featured-card:hover, .fun-corner-card:hover { border-color: var(--color-brand); } /* Header */ /* [data-site-header]は、site-chrome.jsがヘッダーHTMLを差し込む前の空のプレースホルダー。高さを指定しないとJS実行までの一瞬ヘッダーが無い状態になり、実際の高さ(--header-h)分レイアウトがガクッとずれる(CLS)ので、あらかじめ同じ高さを確保しておく。 */ [data-site-header] { display: block; /* +3px は .site-header の上端の藍色の線の分 */ min-height: calc(var(--header-h) + 3px); } .site-header { position: sticky; top: 0; z-index: 100; /* すりガラス(backdrop-filter)はやめて、不透明のベタ塗りにする。半透明で本文が透けるヘッダーは流行りのUIの既定演出で、新聞・雑誌的な題字の据わりが出ない(97%でも本文がうっすら透けた)。画面最上部の藍色の線は、紙面の題字罫のつもり。 */ background: var(--color-bg); border-top: 3px solid var(--color-brand-dark); border-bottom: 1px solid var(--color-border); } /* ヘッダーだけは本文の枠(--max-width: 1160px)を使わず画面幅いっぱいに広げる。本文は読みやすさ優先で幅を抑えたいが、ロゴとナビまで同じ幅に押し込めると大きなモニターで「真ん中だけ窮屈」に見えてしまう。中途半端な幅(1400px程度)は本文と微妙にズレて雑に見えるので、・ロゴ+ナビ … 画面左端に寄せる・お問い合わせボタン … 画面右端に寄せる(margin-left:auto) と割り切って、意図的な全幅ヘッダーにしている。 */ .site-header .wrap { display: flex; align-items: center; justify-content: flex-start; gap: 44px; height: var(--header-h); max-width: none; padding: 0 clamp(20px, 3vw, 56px); } .logo { /* A案ロゴ(題字・明朝)に合わせた書体。最上部の藍罫3pxとセットで新聞の題字の意匠 */ font-family: "Shippori Mincho B1", "Yu Mincho", serif; font-weight: 700; font-size: var(--text-md); letter-spacing: 0.02em; color: var(--color-brand-dark); white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; } /* A案ロゴの丸マーク。地色が生成りなので、丸く切り抜いて背景に馴染ませる */ .logo-mark { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: block; } @media (max-width: 480px) { .logo-mark { width: 26px; height: 26px; } } .main-nav { display: flex; align-items: center; gap: 44px; /* flex-shrink: 0 にして、狭い幅でも項目が潰れて重ならないようにする */ flex: 1 0 auto; } /* お問い合わせボタンだけ右端へ追い出す */ .main-nav .cta-btn { margin-left: auto; } .main-nav a { font-size: 0.95rem; color: var(--color-text); white-space: nowrap; } .main-nav a.current, .main-nav a:hover { color: var(--color-brand); } /* ナビのドロップダウン(「読み物」「遊ぶ」)。PC幅ではホバーで子項目を表示する */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: flex; align-items: center; gap: 3px; background: none; border: none; padding: 0; font: inherit; font-size: 0.95rem; color: var(--color-text); cursor: pointer; white-space: nowrap; } .nav-dropdown-trigger:hover, .nav-dropdown-trigger.current, .nav-dropdown.open .nav-dropdown-trigger { color: var(--color-brand); } .nav-caret { /* 親の文字が0.86remまで縮む幅では0.65emで約9pxになり潰れて見えるので下限を置く */ font-size: max(0.72em, 11px); transition: transform 0.15s ease; } .nav-dropdown-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; padding: 8px; min-width: 168px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 200; } /* トリガーとメニューの間の隙間でホバーが切れないよう、透明な橋を張る */ .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu, .nav-dropdown-trigger:focus + .nav-dropdown-menu { display: flex; } .nav-dropdown:hover .nav-caret, .nav-dropdown.open .nav-caret { transform: rotate(180deg); } .nav-dropdown-menu a { padding: 9px 12px; border-radius: 6px; font-size: 0.9rem; } .nav-dropdown-menu a:hover { background: var(--color-bg); } .cta-btn { background: var(--color-accent-btn); color: #fff !important; padding: 11px 24px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.01em; transition: background 0.15s ease; } .cta-btn:hover { background: var(--color-accent-btn-hover); } /* ── ナビの段階的な圧縮 ────────────────────────────── ナビは実寸で約790px、ロゴが約140px。画面が狭くなるにつれて「余白 → 文字サイズ」の順に少しずつ削り、ハンバーガーに逃げるのをできるだけ後(980px未満)まで引き延ばす。縦置きモニター(幅1080px前後)でもメニューが全部見えるようにするための調整。 ※ここは基本スタイルより後ろに置くこと。前に置くと後の宣言に負けて効かない。 */ /* ナビの折り返し点(2026-09-12に測り直した) 1280px・1440px・1100px・980px など、よくある画面幅でナビが右にはみ出し、ページ全体が横スクロールしていた。本物のChromeで17通りの幅を測ったところ、どの折り返し点も 40〜100pxぶん遅すぎた(狭くなってから効いていた)。 1399→1479 / 1199→1329 / 1039→1149 / 979→1019 に前倒しした。 */ @media (max-width: 1479px) { .site-header .wrap { gap: 34px; } .main-nav { gap: 28px; } } @media (max-width: 1329px) { .site-header .wrap { gap: 24px; padding: 0 24px; } .main-nav { gap: 16px; } .main-nav a, .nav-dropdown-trigger { font-size: 0.92rem; } .main-nav .cta-btn { padding: 10px 18px; font-size: 0.84rem; } } @media (max-width: 1149px) { .site-header .wrap { gap: 20px; padding: 0 20px; } .logo { font-size: 1rem; } .main-nav { gap: 12px; } .main-nav a, .nav-dropdown-trigger { font-size: 0.86rem; } .main-nav .cta-btn { padding: 9px 14px; font-size: 0.8rem; } } .nav-toggle { display: none; background: none; border: none; cursor: pointer; /* 指で押す前提なので当たり判定は44×44pxを確保する(見た目のアイコンは22pxのまま) */ width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; /* ヘッダーは左寄せ(flex-start)なので、ハンバーガーは自力で右端へ寄せる */ margin-left: auto; /* 当たり判定を広げた分、アイコンの右端が内側に入るのを打ち消す */ margin-right: -11px; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--color-text); position: relative; transition: 0.2s; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } @media (max-width: 1019px) { .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden; overflow-y: auto; transition: max-height 0.25s ease; } .main-nav.open { max-height: calc(100vh - var(--header-h)); } .main-nav a, .main-nav .cta-btn { width: 100%; padding: 14px 24px; border-bottom: 1px solid var(--color-border); } /* 上の圧縮ルールで小さくした文字を、ドロワーでは読みやすい大きさに戻す */ .main-nav a, .main-nav .cta-btn, .nav-dropdown-trigger { font-size: 0.95rem; } .logo { font-size: var(--text-md); } .main-nav .cta-btn { border-radius: 0; text-align: center; } .nav-toggle { display: flex; } /* スマホのハンバーガーメニューでは、ホバーが使えないので「読み物」「遊ぶ」の中身は常に開いた状態でそのまま縦に並べる */ .nav-dropdown { width: 100%; } .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--color-border); } .nav-dropdown-menu { display: flex; position: static; transform: none; margin: 0; padding: 0; min-width: 0; background: var(--color-bg); border: none; border-radius: 0; box-shadow: none; } .nav-dropdown::after { content: none; } .nav-dropdown-menu a { padding: 12px 24px 12px 40px; border-radius: 0; font-size: 0.95rem; } } /* Hero */ /* 右上からティール色の光がにじむ radial-gradient は、生成ツールが作るLPの定番演出だったので外した。白のベタ塗りにする。 */ .hero { position: relative; padding: var(--space-8) 0 var(--space-7); background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow: hidden; } .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; } /* 見出し上の小さなラベル。丸いバッジ(ピル)をやめて、雑誌の柱のような字間の広い小さな見出しにする */ .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--color-accent-btn); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.14em; margin: 0 0 var(--space-4); } .hero-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--color-accent-btn); flex-shrink: 0; } .hero h1 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--space-4); color: var(--color-text); } .hero p { color: var(--color-text-muted); font-size: var(--text-md); line-height: 1.85; /* 46ch は日本語だと1行24字ほどで、カラム幅(約559px)を大きく余らせていた。日本語の読みやすい行長は30〜40字なので、カラムを使い切る指定にする */ max-width: 34em; margin: 0 0 var(--space-5); } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero-ctas a { display: inline-block; padding: 13px 24px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; text-decoration: none; border: 1px solid var(--color-border-strong); color: var(--color-text); background: var(--color-surface); transition: border-color 0.15s ease, background 0.15s ease; } .hero-ctas a:hover { border-color: var(--color-brand); } .hero-ctas a.primary { background: var(--color-brand); color: #fff; border-color: var(--color-brand); } .hero-ctas a.primary:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); } .hero-photo { position: relative; } /* 写真の背後に斜めグラデーションの色紙をずらして敷く演出は、生成ツール製LPの典型だったので廃止。写真は写真としてそのまま置く。 */ .hero-photo img { border-radius: var(--radius); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow-sm); } @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero-photo { order: -1; } .hero h1 { font-size: var(--text-2xl); } } /* スマホ幅では36pxだと「大洲の「知りたい」を、」が1行に収まらず、意図した2行のキャッチコピーが4行に割れてしまうので一段小さくする */ @media (max-width: 520px) { .hero h1, .page-hero h1 { font-size: 1.8rem; } /* .article-page h1 はここで上書きしない。clamp() が面倒を見ている。上書きすると、狭い画面のほうが広い画面より字が大きくなってしまう */ } /* Home: クロコが選んだ記事のピックアップ */ .home-picks { padding-top: 8px; } /* 4列(1枚あたり約250px)だとタイトルが「〜セレクシ／ョン」のように 1文字だけ次の行に落ちるので、1枚を広くして3列にする */ .pick-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .pick-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); text-decoration: none; transition: border-color 0.18s ease; } .pick-card:hover { border-color: var(--color-brand); } .pick-card .pick-badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; color: var(--color-brand-dark); background: var(--color-surface-alt); padding: 4px 12px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); } .pick-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 700; line-height: 1.5; color: var(--color-text); } .pick-card p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; } /* Carousel */ .carousel-section { padding: 8px 0 56px; } .carousel { position: relative; } .carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 16px; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track img { flex: 0 0 260px; height: 180px; object-fit: cover; border-radius: var(--radius); scroll-snap-align: start; } .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; } .carousel-controls button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: 1rem; } .carousel-caption { text-align: center; color: var(--color-text-muted); font-size: 0.95rem; margin-top: 4px; } /* Section titles */ .section-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--space-5); position: relative; padding-left: var(--space-3); } .section-title::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; background: var(--color-accent); } section { padding: var(--space-7) 0; } /* News category cards */ .news-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .news-category-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; } .news-category-card h2 { margin: 0 0 8px; font-size: 1rem; color: var(--color-brand); } .news-category-card p { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); } @media (max-width: 860px) { .news-categories { grid-template-columns: 1fr; } } /* News tabs + table */ .news-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .news-tab { border: 1px solid var(--color-border); background: var(--color-surface); padding: 8px 18px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: var(--color-text-muted); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .news-tab:hover { border-color: var(--color-brand); color: var(--color-brand-dark); } .news-tab.active { background: var(--color-brand-dark); color: #fff; border-color: var(--color-brand-dark); } .tag-filter-label { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 8px; } .tag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .tag-chip { border: 1px solid var(--color-border); background: transparent; padding: 5px 14px; border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer; color: var(--color-text-muted); } .tag-chip.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); } /* タグクラウド(ホーム・データページ共通) */ .tagcloud-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6) var(--space-5); } .tagcloud-panel .panel-label { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-faint); margin: 0 0 20px; text-transform: uppercase; } .tagcloud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; } /* 記事件数の小さい数字。以前は各ページのHTML側で font-size:.4em を指定していて、小さいタグでは6px程度になり数字が読めなかったので、下限をここで決める */ .tagcloud sup { font-size: 0.72rem; font-weight: 700; opacity: 0.75; margin-left: 1px; top: -0.15em; } .tagcloud a { font-weight: 600; text-decoration: none; color: var(--tag-c, var(--color-text-muted)); display: inline-flex; align-items: baseline; gap: 3px; transition: transform 0.15s ease; } .tagcloud a::after { content: "›"; font-size: 0.6em; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; } .tagcloud a:hover { opacity: 0.8; } .tagcloud a:hover::after { opacity: 0.8; transform: translateX(0); } .tagcloud .sz6 { font-size: 2.8rem; } .tagcloud .sz5 { font-size: 2.2rem; } .tagcloud .sz4 { font-size: 1.7rem; } .tagcloud .sz3 { font-size: 1.35rem; } .tagcloud .sz2 { font-size: 1.05rem; } .tagcloud .sz1 { font-size: 0.92rem; } .tagcloud-hint { font-size: 0.78rem; color: var(--color-text-faint); margin-top: 18px; } .tagcloud-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--space-5); justify-content: center; } .tagcloud-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--color-text-muted); } .tagcloud-legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tag-c); flex: none; } /* News list: 1行に1記事のリスト形式。以前は横に2〜3枚並べていたが、1枚あたりの幅が狭くタイトルが「〜全国京都会議」/「には入っていない」のように細かく折り返して読みづらかった。横1本の行にして、日付 / タイトル+出典 / タグの3列で組む。 */ .news-cards { display: grid; grid-template-columns: 1fr; gap: 10px; } .news-card { background: var(--color-surface); border: 1px solid var(--color-border); /* カテゴリ色は上辺の太線だと横長の行で主張が強すぎるので、左端の線に変えた */ border-left: 4px solid var(--tag-c, var(--color-border-strong)); border-radius: var(--radius); padding: var(--space-3) var(--space-5); display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 2px 22px; transition: border-color 0.15s ease, background 0.15s ease; } .news-card .news-date { grid-column: 1; grid-row: 1 / span 2; } .news-card .news-title { grid-column: 2; grid-row: 1; } .news-card .news-source { grid-column: 2; grid-row: 2; } .news-card .card-tags-row { grid-column: 3; grid-row: 1 / span 2; justify-content: flex-end; margin-top: 0; } /* スマホでは3列に分ける余裕がないので、素直に縦積みへ戻す */ @media (max-width: 680px) { .news-card { grid-template-columns: 1fr; padding: var(--space-4); } .news-card .news-date, .news-card .news-title, .news-card .news-source, .news-card .card-tags-row { grid-column: 1; grid-row: auto; } .news-card .card-tags-row { justify-content: flex-start; margin-top: 6px; } } .card-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .card-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 3px; color: var(--tag-c, var(--color-text-muted)); background: color-mix(in srgb, var(--tag-c, var(--color-text-muted)) 14%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--tag-c, var(--color-text-muted)) 30%, transparent); } .news-card:hover { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 4%, var(--color-surface)); } .news-card .news-date { color: var(--color-text-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; line-height: 1.5; } /* 日付が「出典そのものの日付」なのか「サイトに載せた日」なのかを、数字の上に小さく出す。どちらの時系列を見ているのか分かるように。 */ .news-card .date-kind { display: block; /* 0.66rem(約10px)+透過は読めなかったので、少し大きく・不透過にした */ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-accent-btn); } .news-card .news-title { font-weight: 700; font-size: var(--text-base); line-height: 1.55; } .news-card .news-title:hover { color: var(--color-brand); } .news-card .news-source { color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.5; } /* 大洲ノート専用: 左サイドバー(フィルタ) + 右カラム(表形式一覧) 以前はボタンを1個1列で縦積みにしていたが、それだと高さが約1400pxになり、横長の画面では追従(sticky)したまま画面からはみ出して、下の「情報源」の絞り込みがページ最下部まで見えなかった。チップを折り返しで詰めて高さを半分以下にし、それでも収まらない画面ではサイドバーの中だけでスクロールできるようにする(2026-08-21)。 */ .news-layout { display: flex; align-items: flex-start; gap: 40px; } .news-sidebar { flex: 0 0 230px; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; } .sidebar-filter-group { margin-bottom: 18px; } .news-sidebar .news-tabs, .news-sidebar .tag-filter { flex-wrap: wrap; gap: 6px; margin-bottom: 0; } .news-sidebar .news-tab, .news-sidebar .tag-chip { width: auto; text-align: left; border-radius: var(--radius-sm); padding: 5px 11px; font-size: 0.78rem; } .news-main { flex: 1; min-width: 0; } .news-table { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); } .news-table-head { display: grid; grid-template-columns: 1fr 100px 220px; gap: 16px; padding: 10px 20px; background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 0.78rem; font-weight: 700; } .news-row { display: grid; grid-template-columns: 1fr 100px 220px; gap: 16px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--color-border); transition: background 0.15s ease; } .news-row:hover { background: var(--color-surface-alt); } .news-row .news-title { font-weight: 700; font-size: var(--text-sm); line-height: 1.5; } .news-row .news-title:hover { color: var(--color-brand); } .news-row .news-date { color: var(--color-text-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; } .news-row .news-source { color: var(--color-text-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 860px) { .news-layout { flex-direction: column; } .news-sidebar { position: static; flex: none; width: 100%; max-height: none; overflow-y: visible; padding-right: 0; } .news-table-head { display: none; } .news-row { grid-template-columns: 1fr; gap: 4px; } } /* 記事をnoteにも載せたときの案内(2026-08-21)。本文の邪魔をしないよう、出典欄のあとに1行だけ置く。 */ .note-crosslink { color: var(--color-text-muted); font-size: 0.86rem; margin: var(--space-5) 0 0; } .note-crosslink a { color: var(--color-accent-btn); text-decoration: underline; text-underline-offset: 3px; } /* おすすめ記事10選(/best/)。番号つきの一覧カード(2026-08-21新設) */ .best-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 12px; } .best-item { display: flex; align-items: center; gap: 20px; background: var(--color-surface); border: 1px solid var(--color-border); padding: 18px 22px; } .best-no { flex: 0 0 auto; font-family: "Shippori Mincho B1", serif; font-size: 1.6rem; font-weight: 700; color: var(--color-tag-mikan); font-variant-numeric: tabular-nums; line-height: 1; } .best-body { flex: 1; min-width: 0; } .best-title { display: block; font-weight: 700; line-height: 1.6; } .best-title:hover { color: var(--color-brand); } .best-blurb { display: block; color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.7; margin-top: 4px; } .best-cat { display: inline-block; margin-top: 8px; font-size: 0.72rem; color: var(--color-text-faint); border: 1px solid var(--color-border); padding: 2px 8px; } .best-note-link { color: var(--color-accent-btn); text-decoration: underline; text-underline-offset: 2px; font-size: 0.82rem; } .best-thumb { flex: 0 0 132px; height: 84px; overflow: hidden; } .best-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 680px) { .best-item { gap: 14px; padding: 14px 16px; } .best-thumb { flex-basis: 88px; height: 66px; } } /* 大洲の自由研究: 脚注の出典リンク。サイト全体でリンクの下線を消しているため、ここだけは「押せる」と分かる見た目に戻す(行全体をリンク化した 2026-08-21)。 scroll-margin は本文の脚注番号から飛んできたとき追従ヘッダーに隠れない余白。 */ .jk-footnotes a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; } .jk-footnotes a:hover { color: var(--color-brand-dark); } .jk-footnotes li { scroll-margin-top: 96px; } /* Generic content page */ /* ここもティールの光のグラデーションをやめてベタ塗りに(理由はヒーローと同じ) */ .page-hero { padding: var(--space-8) 0 var(--space-6); text-align: center; background: var(--color-surface); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); } .page-hero h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--space-3); } .page-hero p { color: var(--color-text-muted); font-size: var(--text-md); line-height: 1.8; max-width: 640px; margin: 0 auto; } .content-block { max-width: 760px; margin: 0 auto; } /* 各ページの中見出し。本文の太字(16px)とほぼ同じ大きさで区別がつかなかったので、 .article-page h2 と同じ大きさ・色に揃えて階層をはっきりさせる */ .content-block h2 { color: var(--color-brand-dark); font-size: var(--text-lg); font-weight: 700; line-height: 1.5; margin: var(--space-7) 0 var(--space-3); } /* Source list, boxed like article-chart/article-diagram */ .content-block.source-box { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: 0 auto var(--space-5); } .content-block.source-box h2 { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); } .content-block.source-box .source-link { margin-bottom: var(--space-2); } .content-block.source-box .source-link:last-child { margin-bottom: 0; } /* 出典が10件あると縦に長く、本文を読み始めるまで遠くなってしまう。横幅に余裕がある画面では2列に流して、高さを半分に抑える。ただし出典が4件以下の記事(全体の約7割)で2列にすると右半分が空いて崩れて見えるので、:has() で「5件目がある記事」だけに限定する。 */ @media (min-width: 700px) { .content-block.source-box:has(.source-link:nth-of-type(5)) { columns: 2; column-gap: var(--space-5); } .content-block.source-box:has(.source-link:nth-of-type(5)) h2 { column-span: all; } .content-block.source-box .source-link { break-inside: avoid; } } .content-block p { color: var(--color-text-muted); } /* 大洲の自由研究(jiyu-kenkyu)のタイトル部分は各ページのHTMLに style="max-width:820px" と直接書かれており、本文(.jk-section)と左端がずれて見えていた。記事は今後もテンプレートから増えるので、ファイルを1つずつ直すのではなく、ここで本文幅に揃える。 (インラインstyleに勝つには !important が必要) */ .jk-hero .wrap { max-width: 792px !important; } /* 自由研究も、記事と同じ幅・同じ題の大きさに揃える(2026-09-05)。・幅 … 記事(.article-page)を792pxに広げたので、こちらも合わせる。本文の .jk-section も一緒に広げないと、題だけ横に出てずれる。・題 … 各ページのh1に style="font-size:clamp(1.6rem,4vw,2.1rem)" が直接書いてある。インラインstyleに勝つには !important が要る。大きいままだと題が3行4行に割れるので、記事と同じ clamp にする。自由研究のページは1ページずつHTMLに