@charset "UTF-8";
/*******************************************************************************
lyndbaum - lyndbaumに合わせた、公開画面用のレスポンシブテーマ（共通の部分）
*******************************************************************************/
/* マークアップはtheme/lyndbaum/_skel/のスケルトンで組む（デザインの保存時に生成される）
管理画面はテーマを使わないので、ここでは公開画面だけを扱う
カラムの並べ方と引き出しは、テーマごとのCSSで決める（3カラムはlyndbaum/lyndbaum.css、
2カラムはlyndbaum-2col-left/、lyndbaum-2col-right/）。
このファイルは、テーマごとのCSSの前にskel/_frame.htmlがで読み込む（load_themeが、テンプレートの直下の
<テンプレート名>.cssを見つけて覚える）。テーマごとのCSSから@importすると、表示が遅れるので使わない。
静的なHTMLへのエクスポートでは、テンプレートの直下のファイルも写すので、共通のものはここに置く */
:root {
--text: #222;
--muted: #666;
--link: #0a58ca;
--border: #ddd;
--bg: #fff;
--code-bg: #f6f8fa;
/* 一覧の偶数行の背景。文字の色を少し混ぜる */
--row-alt: color-mix(in srgb, var(--text) 5%, var(--bg));
/* ページの地の色。記事やサイドバーの枠（--bg）と見分けられるよう、少し沈める */
--page-bg: #f0f0f1;
/* 本文の見出しや表の見出しに使う色 */
--accent: #4450c8;
--accent-soft: #e9ebfd;
--strong: #c30;
/* ページの外側の余白。引き出しのボタンも、この分だけ画面の角から離して、ヘッダーの枠の角に重ねる */
--page-pad: 1rem;
}
/*--------------------------------------------------------------------
■全体
--------------------------------------------------------------------*/
body {
margin: 0;
padding: var(--page-pad);
background: var(--page-bg);
color: var(--text);
font-family: "メイリオ", sans-serif;
font-size: 90%;
line-height: 1.4;
}
a { color: var(--link); }
#adiary-body, #adiary-body * { box-sizing: border-box; }
em { font-style: normal; font-weight: bold; }
dt { font-weight: bold; }
strong.warning, strong.error, p.warning, p.error,
div.messages div.warn, div.messages div.message { color: var(--strong); }
/* 枠：ヘッダー、記事、コメント、サイドバーの各モジュールなどを、地の色の上に置く */
.site-header,
.article-main, .backlinks, .comments, .article-summary, .main > article.system, .hatena-module {
background: var(--bg);
border: 1px solid var(--border);
padding: 1rem 1.25rem;
}
@media (max-width: 40rem) {
:root { --page-pad: .5rem; }
.site-header,
.article-main, .backlinks, .comments, .article-summary, .main > article.system, .hatena-module { padding: .75rem 1rem; }
}
.article-main, .backlinks, .comments, .article-summary, .main > article.system, .hatena-module { margin-bottom: 1rem; }
/*--------------------------------------------------------------------
■ヘッダー
--------------------------------------------------------------------*/
.site-header { position: relative; }
/* タイトルとログインのリンク（ログアウト中）を1行に並べ、幅が足りなければログインのリンクを下の行の右端に落とす。
ほかのモジュール（説明文など）は、その下に全幅で置く */
.site-heading { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; }
.site-heading > * { order: 2; flex-basis: 100%; }
.site-heading > #page-title { order: 0; flex: 0 1 auto; min-width: 0; }
.site-heading > #nav-header { order: 1; flex: none; margin-left: auto; }
#page-title {
margin: 0;
padding: 0;
border: 0;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.3;
}
#page-title a { color: inherit; text-decoration: none; }
#nav-header { font-size: .85rem; }
#nav-header a { margin-left: .5em; }
/* 管理バー（ログイン中）は、本体の _sub/admin_bar と base.css。ボタンや引き出しは、その下に置く（--admin-bar-h） */
/*--------------------------------------------------------------------
■カラム（共通）
--------------------------------------------------------------------*/
/* 並べ方と、どの幅で引き出しにするかは、テーマごとのCSS。ここでは、狭い画面の縦の並び（本文、サイドバーの順）だけを決める */
#hatena-body { margin: 0; padding: 0; }
#hatena-body > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 1rem; }
#hatena-body > div > * { min-width: 0; }
/* デバッグ表示などは全幅にする。サイドバーAとBは、包み（#sidebars）の中にある */
#hatena-body > div > :not(.main):not(.site-sidebars) { grid-column: 1 / -1; }
.main { float: none; width: auto; margin: 0; padding: 0; }
.site-sidebar { min-width: 0; font-size: .95rem; }
.site-sidebars:focus, .site-sidebar:focus { outline: none; }
/* サイドバーを引き出しにして開くボタン（_skel/_header.html）。開け閉めはadiary.js（docs/仕様/引き出し.md）。
出すかどうかはテーマごとのCSSが決める（base.cssで、ふだんは出さない）。
ボタンはヘッダーの外にあり、画面の上の角に貼り付ける（ログイン中は管理バーの下）。
角からはページの余白（--page-pad）だけ離し、スクロールしていないときにヘッダーの枠の角に重ねる。
base.cssのbutton + buttonの間隔は、前のボタンが隠れていても（display: none）HTMLで隣り合えば当たるので、margin: 0で消す */
.sidebar-toggle {
position: fixed; top: calc(var(--admin-bar-h, 0px) + var(--page-pad)); z-index: 190; margin: 0;
padding: .35rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 0; cursor: pointer;
box-shadow: 0 1px 4px rgb(0 0 0 / .15);
}
.sidebar-toggle-left { left: var(--page-pad); }
.sidebar-toggle-right { right: var(--page-pad); }
.sidebar-toggle:hover { background: var(--bg); }
.sidebar-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sidebar-toggle[aria-expanded="true"] { color: var(--link); border-color: var(--link); }
/*--------------------------------------------------------------------
■フッター
--------------------------------------------------------------------*/
#footer {
margin: 1rem 0 0;
padding: 0;
border: 0;
color: var(--muted);
font-size: .85rem;
text-align: center;
}
/*--------------------------------------------------------------------
■サイドバーのモジュール
--------------------------------------------------------------------*/
.hatena-moduletitle {
margin: 0 0 .5rem;
padding-bottom: .25rem;
border-bottom: 1px solid var(--border);
font-size: 1rem;
font-weight: bold;
}
.hatena-moduletitle a { color: inherit; }
.hatena-modulebody { overflow-wrap: anywhere; }
.hatena-modulebody > :last-child { margin-bottom: 0; }
.hatena-modulebody img { max-width: 100%; height: auto; }
ul.hatena-section, ul.hatena-section ul { list-style: none; margin: 0; padding: 0; }
ul.hatena-section ul { padding-left: 1rem; }
span.qt { color: var(--muted); font-size: .85rem; }
#side-search form { display: flex; flex-wrap: wrap; gap: .25rem; }
#side-search input.search-box { flex: 1 1 8rem; width: auto; min-width: 0; }
#side-search br { display: none; }
#side-search .search-radio { flex-basis: 100%; font-size: .9rem; }
/* カレンダー */
table.calendar { width: 100%; }
table.calendar td { text-align: center; }
table.calendar td.calendar-prev-month { text-align: left; }
table.calendar td.calendar-next-month { text-align: right; }
table.calendar td.w6, table.calendar th.w6 { color: #00f; }
table.calendar td.w0, table.calendar th.w0, table.calendar td.holiday { color: #d00; }
table.calendar td.day-today { font-weight: bold; }
table.calendar td.day-selected { background: var(--accent-soft); }
/*--------------------------------------------------------------------
■前後のページへのリンク
--------------------------------------------------------------------*/
/* 前は左、親は真ん中、次は右。横に収まらなければ、リンクを丸ごと次の行に送る */
nav.page-nav { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; margin: 0 0 1rem; font-size: .95rem; }
nav.page-nav a { overflow-wrap: anywhere; }
nav.page-nav .prev-page { margin-right: auto; }
nav.page-nav .upnode-page { margin: 0 auto; text-align: center; }
nav.page-nav .next-page { margin-left: auto; text-align: right; }
/* 矢印は base.css のアイコンではなく文字にする。行けない方向の見えない span（base.css）も、リンクと同じ幅にする */
nav.page-nav .prev-page::before, nav.page-nav .upnode-page::before, nav.page-nav .next-page::after {
width: auto; height: auto; vertical-align: baseline; background: none;
}
nav.page-nav .prev-page::before { content: "← "; }
nav.page-nav .upnode-page::before { content: "↑ "; }
nav.page-nav .next-page::after { content: " →"; }
/*--------------------------------------------------------------------
■記事
--------------------------------------------------------------------*/
article { margin: 0; }
.article-title, .summary-title, .main > article.system > h2 {
margin: 0;
padding: 0;
border: 0;
background: none;
line-height: 1.35;
}
.article-title { font-size: 1.6rem; }
.summary-title { font-size: 1.6rem; }
/* 題名の頭の線。本文の h3 と同じ色と太さ */
.article-title, .summary-title { padding-left: .6rem; border-left: 6px solid var(--accent); }
.article-title a, .summary-title a { color: inherit; text-decoration: none; }
.article-title a:hover, .summary-title a:hover { text-decoration: underline; }
.main > article.system > h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.article-main div.body, .article-summary div.body { margin: 0; padding: 0; border: 0; }
/* 投稿日、更新日、タグ（dea_art-info） */
.article-meta { color: var(--muted); font-size: .9rem; margin: .25rem 0 0; }
div.art-info { display: flex; flex-wrap: wrap; gap: 0 1em; margin: 0; padding: 0; border: 0; text-align: left; }
div.art-info > div { display: flex; flex-wrap: wrap; gap: 0 1em; }
div.art-info br { display: none; }
/* 編集のリンク（編集できる人がログインしているとき）は右端に置く。リンクはタグと同じ、後ろの div の中にある */
div.art-info > div:has(> .edit-article) { flex: auto; }
div.art-info .edit-article { margin-left: auto; }
span.tags .tag { margin-right: .5em; }
/* 参照元とコメント欄へのリンク（記事のページだけ）は、投稿日やタグの下の行に置く。間は gap で空ける */
div.art-info > div.art-jump { flex-basis: 100%; }
div.art-info .art-jump a + a { margin-left: 0; }
div.body-footer { margin: 0; }
div.body-footer:empty { display: none; }
div.body-footer h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
div.com-count { margin-top: .75rem; font-size: .9rem; }
/* 追従する目次（toc.js）。本文の枠の先頭に高さ0で置き、枠の中で画面の上端に貼り付ける
ボタンは、本文の目次が画面の上へ抜けたとき（is-shown）だけ出す */
.toc-float { position: sticky; top: calc(var(--admin-bar-h, 0px) + .5rem); z-index: 150; height: 0; display: flex; justify-content: flex-end; }
/* 右の角に引き出しのボタンがある幅では、その下に出す（テーマごとのCSS） */
.toc-float-button {
position: relative; display: none; align-items: center; gap: .3rem; height: 2rem; padding: 0 .6rem;
box-shadow: 0 1px 4px rgb(0 0 0 / .15);
}
.toc-float.is-shown .toc-float-button { display: inline-flex; }
.toc-float-button svg { fill: currentColor; } /* 箇条書きの形（塗り） */
.toc-float-button[aria-expanded="true"] { color: var(--link); border-color: var(--link); }
.toc-float-panel {
position: absolute; top: 2.25rem; right: 0; box-sizing: border-box; width: min(24rem, 100%);
max-height: calc(100vh - 4rem); overflow-y: auto; overscroll-behavior: contain;
padding: .5rem 1rem .5rem 2rem; background: var(--bg); border: 1px solid var(--border);
box-shadow: 0 2px 8px rgb(0 0 0 / .2);
}
.toc-float:not(.is-shown) .toc-float-panel { display: none; }
.toc-float-panel ul.toc { margin: 0; padding-left: 0; }
.toc-float-panel ul ul { padding-left: 1.25rem; }
/* 下書き、非公開の表示 */
div.body-main > div > strong.warning { display: block; border: 1px solid #e0a800; border-left-width: 4px; padding: .5rem 1rem; color: inherit; font-weight: normal; }
/*--------------------------------------------------------------------
■本文
--------------------------------------------------------------------*/
/* 記事の題名が h2 なので、本文の見出しは h3 から始まる */
.article-body { word-wrap: break-word; margin-top: 1rem; }
.article-body > :last-child,
.article-body > section:last-child > :last-child { margin-bottom: 0; }
.article-body h3, .article-body h4, .article-body h5, .article-body h6 { line-height: 1.35; }
.article-body h3 {
margin: 2rem 0 1rem; padding: .4rem .75rem;
font-size: 1.25rem; color: var(--accent);
background: var(--accent-soft); border: 0; border-left: 6px solid var(--accent);
}
.article-body h4 { margin: 1.5rem 0 .75rem; padding: .15rem .6rem; font-size: 1.1rem; border: 0; border-left: 4px solid var(--accent); border-bottom: 1px solid var(--border); }
.article-body h5 { margin: 1.25rem 0 .5rem; padding: 0 0 .1rem; font-size: 1rem; border: 0; border-bottom: 1px dashed var(--border); }
.article-body h6 { margin: 1rem 0 .5rem; padding: 0; font-size: .95rem; color: var(--muted); border: 0; }
/* 見出しは自分へのリンクになっている。見出しの色のまま、下線は指したときだけ出す */
.article-body :is(h3, h4, h5, h6) > a { color: inherit; text-decoration: none; }
.article-body :is(h3, h4, h5, h6) > a:hover { text-decoration: underline; }
/* 画像。[image:...] はMarkdownでは段落の中に出るので、リンクに と同じ余白を付ける。
画像へのテキストリンク（[image:T:...]）は文中に出るので除く */
.article-body img { max-width: 100%; height: auto; margin: 5px 5px 0 0; vertical-align: bottom; }
.article-body p ~ figure { margin-top: 1em; }
.article-body a[class^="tag-image"]:not(.tag-image-T) { display: inline-block; margin-top: 1em; }
.article-body video, .article-body audio, .article-body iframe { max-width: 100%; }
/* コードスパン。コードブロック（pre の中）は Prism の色を使うので除く */
.article-body :not(pre) > code {
padding: .1em .35em; font-size: .9em;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
background: var(--code-bg); border: 1px solid var(--border);
overflow-wrap: anywhere;
/* 行をまたいだときも、行ごとに枠を閉じる */
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* コードブロック。長い行は、ページではなくコードの中で横にスクロールする */
.article-body pre { overflow-x: auto; max-width: 100%; }
/* 表。見出しの行に色を付け、行の間に点線を引く。セルを離して置き、列の境目に隙間を空ける */
.article-body table { border-collapse: separate; border-spacing: 3px 0; margin: 1rem -3px; }
.article-body th, .article-body td { padding: .3rem .6rem; text-align: left; vertical-align: top; border: 0; }
/* 列の多い表で、日本語が1文字ずつ折り返して縦に並ばないよう、句読点と空白のところでだけ折り返す */
.article-body th, .article-body td { word-break: keep-all; overflow-wrap: break-word; }
.article-body th { background: var(--accent-soft); border-bottom: 2px solid var(--accent); }
.article-body td { border-bottom: 1px dashed var(--border); }
.article-body tbody tr:nth-child(even) { background: var(--row-alt); }
/* 入り切らない表は、表の枠の中で横にスクロールする */
.article-body .body_table, .article-body .table-wrap { overflow-x: auto; }
.article-body .body_table th, .article-body .body_table td { white-space: pre; }
.article-body .table-wrap td { white-space: nowrap; }
/* タスクリスト。印の代わりにチェックボックスを、印のあった位置に置く */
.article-body li.task-list-item { list-style: none; }
.article-body li.task-list-item input[type="checkbox"] { margin: 0 .3em 0 -1.4em; vertical-align: middle; }
/* 引用、横線、目次、注釈 */
.article-body blockquote { margin: 1rem 0; padding: .5rem 1rem; color: var(--muted); background: var(--row-alt); border: 0; border-left: 4px solid var(--border); border-radius: 0; font-style: normal; }
.article-body blockquote > :first-child { margin-top: 0; }
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body div.box { margin: 1rem 0; padding: .5rem 1rem; border: 1px solid var(--border); }
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
/* 目次は、普通の箇条書きと見分けられるよう、印の代わりに段の左に縦線を引く（先頭の「目次」の太字はbase.css） */
.article-body .toc-box { display: table; margin: 1rem 0; padding: .5rem 1rem; border: 1px solid var(--border); background: var(--row-alt); }
.article-body .toc-title { margin-bottom: .25rem; }
.article-body ul.toc { margin: 0; padding: 0; list-style: none; }
.article-body ul.toc ul { list-style: none; margin: 0 0 0 .3rem; padding-left: .9rem; border-left: 1px solid color-mix(in srgb, var(--text) 25%, var(--bg)); }
.article-body .footnotes, .article-body section footer { margin-top: 2rem; font-size: .85rem; color: var(--muted); }
.article-body .footnotes hr { margin: 0 0 .5rem; }
.article-body sup { line-height: 0; }
.article-body strong { color: var(--strong); }
/* バナー（[info:…] など）。アイコンと文章を横に並べ、種類で色を変える */
.article-body .notice_banner {
display: flex; align-items: center; gap: .75rem; margin: 1rem 0; padding: .6rem 1rem;
border: 1px solid var(--banner, var(--accent)); border-left-width: 6px;
background: color-mix(in srgb, var(--banner, var(--accent)) 10%, var(--bg));
}
.article-body .notice_banner svg { display: block; fill: var(--banner, var(--accent)); }
.article-body .notice_banner.info { --banner: #0288d1; }
.article-body .notice_banner.warn { --banner: #d09000; }
.article-body .notice_banner.error { --banner: #d33; }
/*--------------------------------------------------------------------
■コメント
--------------------------------------------------------------------*/
#com { margin: 0 0 1rem; }
/* 参照元（_skel/_article.html）。見出しはコメントの見出しに合わせる */
.backlinks-title { margin: 0 0 .5rem; font-size: 1.1rem; }
.backlinks-list { margin: 0; padding-left: 1.5rem; }
#com div.caption { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: bold; }
#com div.caption .com-num { font-weight: normal; color: var(--muted); font-size: .95rem; }
#com div.caption .abbr-msg { font-size: .85rem; font-weight: normal; margin-left: .5em; }
#com div.swiches { margin-bottom: .5rem; font-size: .9rem; }
div.comment-one { border-bottom: 1px solid var(--border); padding: .5rem 0; }
div.commentator { color: var(--muted); font-size: .9rem; }
span.canchor { margin-right: .25em; }
span.commentator.author { color: var(--text); font-weight: bold; margin-right: .5em; }
span.commentator.author.login-user { color: var(--strong); }
.comment-badge { border: 1px solid var(--border); padding: 0 .25em; font-size: .8rem; font-weight: normal; }
div.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: .25rem 0 0; }
.comment-disable { color: var(--muted); }
div.ip-host-agent { display: none; color: var(--muted); font-size: .85rem; }
#com-form-separator { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
#comment-form { margin-top: 1rem; }
#comment-form textarea { width: 100%; font: inherit; }
#comment-form input[type="text"], #comment-form input[type="email"], #comment-form input[type="url"] { max-width: 100%; font: inherit; }
#popup-com { background: var(--bg); border: 1px solid var(--border); padding: .5rem 1rem; box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
/*--------------------------------------------------------------------
■検索
--------------------------------------------------------------------*/
.main > article.system div.body { margin: 0; padding: 0; border: 0; }
.main > article.system input[type="search"] { max-width: 100%; }
/* 検索の対象（タイトル/全文）の切り替え。ボタン（button）と同じ枠と余白にそろえる
検索語の欄は、サイドバーの検索ボックス（#side-search）と同じく、高さをボタンにそろえて横に広げる */
#top-search-form .freeword { display: flex; flex-wrap: wrap; gap: .25rem; }
#top-search-form .freeword input[type="search"] { flex: 0 1 12rem; width: auto; min-width: 0; } /* 狭いときは、欄とボタンが一緒に次の行へ落ちる幅 */
.search-type label { display: flex; }
.search-type span { display: flex; align-items: center; padding: .2rem .75rem; border-color: var(--border); background: var(--bg); color: var(--text); }
.search-type label:hover span { border-color: var(--link); color: var(--link); }
.search-type label:hover + label input:not(:checked) + span { border-left-color: var(--link); }
.search-type input:checked + span,
.search-type label:hover input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.search-type input:focus-visible + span { outline-color: var(--link); }
/*--------------------------------------------------------------------
■部品（ボタン、ポップアップ、ダイアログ）
--------------------------------------------------------------------*/
button {
padding: .2rem .75rem;
color: var(--text);
font: inherit;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 0;
cursor: pointer;
}
button:hover { border-color: var(--link); color: var(--link); }
button:disabled { color: var(--muted); border-color: var(--border); cursor: default; }
#ui-icon-autoload { background-color: #0a58ca; }
.ui-dialog {
background: var(--bg);
border: 1px solid var(--border);
box-shadow: 0 2px 8px rgb(0 0 0 / .2);
font-size: .9rem;
line-height: 1.4;
}
.ui-dialog .ui-widget-header { background: var(--accent-soft); border: 0; border-radius: 0; font-weight: bold; }