/* 文学史サイト — 紙面寄りのアカデミックな基調。ランキンQ/ミームジーンとは別方向。 */ :root { --bg: #fbfaf7; --surface: #ffffff; --ink: #1c1a17; --ink-2: #55504a; --ink-3: #8b8378; --line: #e3ded4; --line-2: #cec7ba; --accent: #7a2e2e; /* 臙脂 */ --accent-2: #a44a4a; --mark: #f4efe4; --pr: #8a7a52; /* Webフォントで全環境を統一。読み込み失敗時のみシステムフォントに落ちる。 フォント本体は各ページ の Google Fonts link で読み込む（build.py） */ --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 見出し・ロゴ */ --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif; /* 本文 */ } @media (prefers-color-scheme: dark) { :root { --bg: #161513; --surface: #1e1c1a; --ink: #e9e4db; --ink-2: #b3aca1; --ink-3: #7d766c; --line: #322e2a; --line-2: #47423b; --accent: #d98d8d; --accent-2: #e8a9a9; --mark: #2a2521; --pr: #b8a678; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.9; /* 本文はゴシック（とっつきやすさ） */ font-size: 17px; -webkit-text-size-adjust: 100%; } /* 見出しは明朝に残して文学サイトらしさを出す（本文はゴシックのまま） */ h1, h2, h3, h4 { font-family: var(--serif); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- nav ---------- */ .nav { padding: 18px 24px 14px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; } .nav__top { display: flex; margin-bottom: 14px; } .nav__bottom { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .nav__home { display: flex; align-items: center; } .nav__logo { height: 104px; width: auto; display: block; } @media (prefers-color-scheme: dark) { .nav__logo { filter: invert(1); } } .nav__c { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--sans); font-size: 13px; } .nav__c a { color: var(--ink-2); } .nav__c a:hover { color: var(--accent); } .nav__x { margin-left: auto; font-family: var(--sans); font-size: 13px; color: var(--ink-2); } /* 国内ナビ */ .nav__country { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--accent); } .nav--country .nav__c a { color: var(--ink); } .nav--country .nav__c a:hover { color: var(--accent); } /* 通史への誘導（ハブページ） */ .tsushi-cta { display: block; margin: 4px 0 8px; padding: 20px 22px; background: var(--accent); color: #fff; border-radius: 6px; } .tsushi-cta:hover { background: var(--accent-2); text-decoration: none; } .tsushi-cta__k { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; } .tsushi-cta__d { display: block; font-size: 13.5px; margin: 6px 0 10px; opacity: .92; } .tsushi-cta__go { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 600; opacity: .95; } .tsushi-cta--todo { background: var(--mark); color: var(--ink-3); } .tsushi-cta--todo .tsushi-cta__k { color: var(--ink-2); } @media (prefers-color-scheme: dark) { .tsushi-cta { color: #1a1613; } .tsushi-cta__k { color: #1a1613; } } /* ---------- layout ---------- */ .wrap { max-width: 760px; margin: 0 auto; padding: 28px 24px 80px; } .crumbs { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-bottom: 22px; } .crumbs a { color: var(--ink-3); } .crumbs > *::after { content: " / "; color: var(--line-2); } .crumbs > *:last-child::after { content: ""; } /* ---------- doc ---------- */ .doc h1 { font-size: 30px; line-height: 1.45; margin: 0 0 18px; font-weight: 600; letter-spacing: .02em; } .doc--top h1 { font-size: 36px; letter-spacing: .12em; } .lead { color: var(--ink-2); font-size: 16px; line-height: 1.95; padding: 14px 18px; background: var(--mark); border-left: 3px solid var(--line-2); border-radius: 0 3px 3px 0; margin: 0 0 32px; } .doc h2 { font-size: 21px; margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 600; } .doc h3 { font-size: 17px; margin: 32px 0 10px; color: var(--ink); font-weight: 600; } .doc h4 { font-size: 16px; margin: 24px 0 8px; color: var(--ink-2); } .doc p { margin: 0 0 20px; } .doc strong { font-weight: 600; background: linear-gradient(transparent 62%, var(--mark) 62%); } .doc ul { margin: 0 0 20px; padding-left: 1.3em; } .doc li { margin-bottom: 8px; } .todo { color: var(--ink-3); font-style: italic; padding: 20px; border: 1px dashed var(--line-2); border-radius: 4px; } /* 本文中の作家・作品リンク */ .ref { border-bottom: 1px solid var(--line-2); text-decoration: none; } .ref:hover { text-decoration: none; border-bottom-color: var(--accent); background: var(--mark); } .ref--work::before { content: "『"; color: var(--ink-3); } .ref--work::after { content: "』"; color: var(--ink-3); } /* ---------- table ---------- */ .tw { overflow-x: auto; margin: 0 0 24px; } table { border-collapse: collapse; width: 100%; font-size: 15px; font-family: var(--sans); } th, td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; } th { background: var(--mark); font-weight: 600; white-space: nowrap; } /* ---------- 推薦書カード（PR必須） ---------- */ .book { display: flex; gap: 12px; margin: 26px 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 4px; } .book__pr { flex: none; align-self: flex-start; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--pr); border: 1px solid var(--pr); border-radius: 2px; padding: 1px 5px; } .book__main { min-width: 0; } .book__title { margin: 0 0 3px; font-weight: 600; font-size: 16px; } .book__meta { margin: 0 0 8px; font-family: var(--sans); font-size: 12px; color: var(--ink-3); } .book__note { margin: 0 0 10px; font-size: 14px; line-height: 1.75; color: var(--ink-2); } .book__link { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 3px; } .book__link:hover { background: var(--accent); color: var(--surface); text-decoration: none; } .book__todo { font-family: var(--sans); font-size: 11px; color: var(--ink-3); } /* ---------- 事実カード（作家・作品） ---------- */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 30px; border-radius: 4px; overflow: hidden; } .facts > div { background: var(--surface); padding: 10px 14px; } .facts dt { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-bottom: 2px; } .facts dd { margin: 0; font-size: 15px; } /* ---------- 時代リスト ---------- */ .periods { margin-top: 56px; } .periods h2 { font-size: 18px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .pl { list-style: none; padding: 0; margin: 0; } .pl a { display: flex; gap: 14px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); } .pl a:hover { background: var(--mark); text-decoration: none; } .pl__label { flex: none; width: 120px; font-weight: 600; color: var(--accent); } .pl__lead { font-size: 13px; color: var(--ink-3); font-family: var(--sans); } /* ---------- カード ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 40px; } .card { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); color: var(--ink); } .card:hover { border-color: var(--accent); text-decoration: none; } .card b { display: block; font-size: 15px; margin-bottom: 2px; } .card span { font-family: var(--sans); font-size: 12px; color: var(--ink-3); } /* ---------- トップ（国ブロックのハブ） ---------- */ .cbgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 0; } .cb { display: flex; flex-direction: column; padding: 18px 20px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); border-top: 3px solid var(--accent); transition: box-shadow .15s, transform .15s; } .cb:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); } .cb--todo { border-top-color: var(--line-2); opacity: .78; } .cb__head { display: flex; align-items: baseline; justify-content: space-between; color: var(--ink); } .cb__head:hover { text-decoration: none; color: var(--accent); } .cb__name { font-family: var(--serif); font-size: 21px; font-weight: 600; } .cb__arrow { font-family: var(--sans); color: var(--ink-3); font-size: 15px; } .cb__head:hover .cb__arrow { color: var(--accent); } .cb__lead { font-size: 13px; color: var(--ink-2); line-height: 1.75; margin: 8px 0 14px; flex: 1; } .cb__eras { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; } .cb__era { font-family: var(--sans); font-size: 12px; color: var(--accent); } .cb__era:hover { text-decoration: underline; } .cb__era--todo { color: var(--ink-3); } .cb__era--todo:hover { text-decoration: none; } .cb__links { display: flex; flex-wrap: wrap; gap: 8px; } .cb__link { font-family: var(--sans); font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); } .cb__link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .cb__link--main { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .cb__link--main:hover { background: var(--accent-2); color: #fff; } .cb__link--todo { color: var(--ink-3); border-style: dashed; } .cb__meta { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin: 12px 0 0; } @media (prefers-color-scheme: dark) { .cb__link--main { color: #1a1613; } .cb__link--main:hover { color: #1a1613; } } @media (max-width: 600px) { .cbgrid { grid-template-columns: 1fr; } } /* ---------- 一覧 ---------- */ .grp { margin-top: 40px; } .grp h2 { font-size: 17px; border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 4px; } .idx { list-style: none; padding: 0; margin: 0; } .idx a { display: flex; gap: 12px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--line); color: var(--ink); } .idx a:hover { background: var(--mark); text-decoration: none; } .li__n { flex: 1; } .li__y { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); flex: none; } .li__w { font-family: var(--sans); font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; padding: 0 4px; flex: none; } /* ---------- ハブ: 時代サムネカード ---------- */ .eras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; } .era { display: flex; flex-direction: column; color: var(--ink); } .era:hover { text-decoration: none; } .era__thumb { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 2; padding: 12px 14px; border-radius: 6px; overflow: hidden; color: #fff; background-size: cover; background-position: center; /* 将来: style="background-image:url(...)" にPD画像を差し込む枠 */ } .era:hover .era__thumb { filter: brightness(1.06); } .era__thumb::after { /* 画像を入れたとき文字を読めるようにする下部グラデ */ content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.28)); } /* 写真・絵画を敷いた場合は、文字が乗る下half を強めに暗くする */ .era__thumb--img::after { background: linear-gradient(transparent 30%, rgba(0,0,0,.72)); } .era__thumb--img .era__label { text-shadow: 0 1px 3px rgba(0,0,0,.5); } .era__label, .era__years { position: relative; z-index: 1; } .era__label { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.2; } .era__years { font-family: var(--sans); font-size: 11px; opacity: .9; margin-top: 2px; } .era__lead { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; margin-top: 8px; } .era--todo .era__thumb--todo { background: var(--mark); color: var(--ink-3); border: 1px solid var(--line); } .era--todo .era__thumb--todo::after { display: none; } .era--todo .era__lead { color: var(--ink-3); } /* ---------- ハブ: 作者・作品の大パネル ---------- */ .hubsec { margin-top: 52px; } .hubbig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hubbig__p { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 18px 20px; border-radius: 8px; overflow: hidden; color: #fff; background-size: cover; background-position: center; /* 将来: 代表的な肖像画・書影（PDのみ）を background-image に */ } .hubbig__p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.32)); } .hubbig__p--a { background-color: #7a2e2e; background-image: linear-gradient(135deg, #8a3636, #5e2020); } .hubbig__p--w { background-color: #33405c; background-image: linear-gradient(135deg, #3d4c6c, #262f47); } .hubbig__p:hover { filter: brightness(1.07); text-decoration: none; } /* テキストとアイコンを同じ行に置き、flexで縦中央揃えする。 国名の長さ（日本/フランス等）が変わっても、揃えの計算は毎回レイアウトエンジンがやる ので、絶対配置のときのような「国によってズレる」ことが起きない */ .hubbig__row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hubbig__k { font-family: var(--serif); font-weight: 600; line-height: 1.4; } /* 1行目: 国名（小さく、控えめ）/ 2行目: 「作者一覧」（大きく主役） */ .hubbig__country { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; opacity: .8; margin-bottom: 3px; } .hubbig__k { font-size: 22px; } .hubbig__icon { flex: none; width: 74px; height: 74px; fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .4; pointer-events: none; } .hubbig__p:hover .hubbig__icon { opacity: .55; } .hubbig__n { position: relative; z-index: 1; font-family: var(--sans); font-size: 13px; opacity: .92; margin-top: 3px; } .hub-art { margin: 16px 0 0; font-family: var(--sans); font-size: 13px; } /* .wrap の折返し幅(760px)と同じ位置で1カラムに切り替える。 途中の狭い2カラム帯（〜700px前後）でラベルがアイコンと重なるのを避けるため。 */ @media (max-width: 760px) { .hubbig { grid-template-columns: 1fr; } } @media (max-width: 640px) { .eras { grid-template-columns: repeat(2, 1fr); } } /* ---------- 文芸思潮 ---------- */ .movgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; } .mov { display: flex; flex-direction: column; padding: 15px 17px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 5px; background: var(--surface); color: var(--ink); } .mov:hover { border-left-color: var(--accent-2); box-shadow: 0 3px 12px rgba(0,0,0,.06); text-decoration: none; } .mov__y { font-family: var(--sans); font-size: 11px; color: var(--ink-3); } .mov__n { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 2px 0 5px; } .mov__l { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; flex: 1; } .mov__c { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-top: 9px; } .movsec { margin-top: 48px; } .movsec__note { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin: 0 0 8px; } .grp__n { font-family: var(--sans); font-size: 11px; color: var(--ink-3); font-weight: 400; } .nav__x { display: flex; gap: 14px; } @media (max-width: 640px) { .movgrid { grid-template-columns: 1fr; } } /* ---------- 年表 ---------- */ .tl { list-style: none; padding: 0; margin: 0; } .tl li { display: flex; gap: 14px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--line); } .tl__y { flex: none; width: 58px; font-family: var(--sans); font-size: 13px; color: var(--ink-3); } .tl__c { flex: none; margin-left: auto; font-family: var(--sans); font-size: 11px; color: var(--ink-3); background: var(--mark); border-radius: 2px; padding: 1px 7px; } /* ---------- 逆引き・サイド ---------- */ .side { margin-top: 44px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; } .side h2 { font-size: 15px; margin: 0 0 10px; border: none; padding: 0; } .back { border-left: 3px solid var(--accent); } .mini { list-style: none; padding: 0; margin: 0; } .mini li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 14.5px; } .mini span { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-left: auto; } .side__note { margin: 10px 0 0; font-family: var(--sans); font-size: 11px; color: var(--ink-3); } /* ---------- pager ---------- */ .pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 13px; } /* ---------- footer ---------- */ .foot { border-top: 1px solid var(--line); background: var(--surface); padding: 28px 24px; font-family: var(--sans); font-size: 12px; color: var(--ink-3); text-align: center; } .foot p { margin: 0 0 8px; max-width: 700px; margin-inline: auto; } .foot__pr { line-height: 1.8; } @media (max-width: 640px) { body { font-size: 16px; } .doc h1 { font-size: 25px; } .doc--top h1 { font-size: 29px; } .nav { padding: 14px 16px 12px; } .nav__top { margin-bottom: 10px; } .nav__logo { height: 68px; } .nav__bottom { gap: 12px; } .nav__x { margin-left: 0; } .wrap { padding: 20px 18px 60px; } .pl a { flex-direction: column; gap: 3px; } .pl__label { width: auto; } }