/*
Theme Name: simple diary
Theme URI:
Author: tokyo site
Description: 日付と題だけが静かに並ぶ、日記のためのテーマ。コメント欄・サイドバー・検索窓は持ちません。書体・文字の大きさ・本文の幅はカスタマイザー（外観 → カスタマイズ → 文字と幅）から変えられます。
Version: 1.13.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simple-diary
Tags: minimal, diary, japanese
*/

/* ==================================================================
   サイトの名前の字だけ、手元に持っておく

   名前「雨宿りノオト」は丸ゴシックで出しています。この書体を Google から
   取りに行っていると、届くまでのあいだ端末のゴシックで出て、届いた瞬間に
   入れ替わります（開いた直後に一瞬、字が変わって見えるのはこれ）。
   名前の六字ぶんだけを抜き出した 1.6KB のファイルをテーマに同梱し、
   それをいちばん先に読ませることで、はじめから丸ゴシックで出しています。

   ・font-display:block ＝「届くまでその字は描かずに待つ」。手元にある
     1.6KB なのですぐ届くので、待ちは目に見えません。入れ替わりを見せない
     ためにあえてこちらにしています（swap だと一瞬ほかの書体で出ます）。
   ・unicode-range ＝ ここに挙げた字だけがこのファイルを使います。
     ほかの字は次の 'Zen Maru Gothic'（Google）へ回るので、名前を変えて
     字が増えても消えることはありません。
   ・ファイルが見つからないときも、待たずに次へ回ります。

   名前を変えたときは make-name-font.py を走らせ直し、できた woff2 と
   下の unicode-range、functions.php の SIMPLE_DIARY_NAME_FONT_CHARS を
   そろえてください。
================================================================== */
@font-face{
	font-family:'Zen Maru Gothic Name';
	src:url('assets/fonts/ZenMaruGothic-name.woff2') format('woff2');
	font-weight:400;
	font-style:normal;
	font-display:block;
	unicode-range:U+96E8, U+5BBF, U+308A, U+30CE, U+30AA, U+30C8;
}

/* ==================================================================
   変数（色・書体・大きさ）

   書体と大きさは、カスタマイザーの値が functions.php から <head> の
   :root に流し込まれて、ここの初期値を上書きします。
   ※ここに書いた変数を @media の中で定義し直さないこと。
     head で差し込む :root があとから効くため、@media 側が打ち消されます。
     画面幅で変えたいときは、変数を使う側（calc など）で調整します。
================================================================== */
:root{
	/* 紙とインク */
	--paper:#fcfcfa;
	--ink:#232019;
	--soft:#6d685e;
	--faint:#a8a29a;
	--line:#e9e5dd;
	--river:#5c7b78;   /* 多摩川の色。いまは操作位置の枠（focus）だけに使う */
	--link-line:#e9e5dd;  /* リンクの下線。--line（罫線）と同じ薄さで、気配だけ引く */

	/* 書体（カスタマイザーが上書き） */
	--font-body:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
	--font-name:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
	--font-site:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif; /* サイトの名前だけ。別に選べる */
	--font-num:'EB Garamond','Shippori Mincho',serif;
	--font-nav:var(--font-body);   /* 名前の下の行き先と、スマホの全画面メニュー（カスタマイザーが上書き） */
	--font-foot:var(--font-body);  /* 足もとの行き先（同上） */
	--font-copy:var(--font-num);   /* いちばん下の「© サイトの名前」（同上） */
	--font-privacy:var(--font-copy); /* 足もとの privacy policy。はじめは「©」と同じ（同上） */
	--w-title:500;     /* 題の太さ。一種類しかない書体では 400 になる */

	/* 大きさ（カスタマイザーが上書き） */
	--fs-body:15.5px;  /* 本文 */
	--lh-body:2.05;    /* 行間 */
	--fs-title:21px;   /* 日記の題 */
	--fs-list:15px;    /* 一覧の題 */
	--fs-name:19px;    /* サイトの名前。トップでも中のページでも同じ大きさ */
	--fs-ptitle:17px;  /* 固定ページの題（404の見出しも） */
	--ptitle-ink:1;    /* 固定ページの題の濃さ。1で本文と同じ、下げるほど紙に溶けて薄くなる */
	--fs-listtitle:15px; /* 一覧の見出し（カテゴリー・月別・検索） */
	--fs-nav:12px;     /* 行き先（メニュー）。足もとは少し小さく出る */
	--fs-sheet:16px;   /* スマホで開く、全画面のメニューの文字 */
	--fs-small:12.5px; /* 日付・書き出しなど、小さな文字 */
	--fs-pager:var(--fs-small); /* 一覧の下のページ送り。はじめは「小さな文字」と同じ */
	--fs-work:12.5px;  /* 一覧の題の「/」のうしろ（作品名） */
	--work-gap-x:10px; /* 題と作品名を同じ行に並べたときの、横の空き */
	--work-gap-y:4px;  /* 作品名を次の行へ出したときの、上下の空き */
	--fs-mokuji:15px;  /* もくじのページに並ぶ題 */
	--fs-work-mokuji:12px; /* もくじの、題に添える作品名 */
	--fs-work-single:12.5px;  /* 記事のページの大見出しの、作品名 */
	--work-gap-single:6.5px;  /* 記事のページの、題と作品名のあいだの空き */
	--gap-nodate:30px;   /* 日付を出さないときの、題と本文のあいだ（カスタマイザーが上書き） */
	--fs-mk-name:12.5px;  /* もくじの、まとまりの名前（「本のこと」など） */
	--fs-foot-nav:12.5px; /* 記事の下の、前の日記・次の日記への行き先 */
	--fs-foot-menu:11.5px; /* 足もとの行き先（HOME・もくじなど） */
	--fs-foot-copy:10.5px; /* いちばん下の「© サイトの名前」 */
	--fs-privacy:var(--fs-foot-copy); /* 足もとの privacy policy。はじめは「©」と同じ大きさ */
	--privacy-lift:-0.119em; /* 欧文の privacy policy を、日本語の「©」とそろえるために持ち上げる量。
	                            カスタマイザーでは px で入れてもらい、文字の大きさで割った比が流れてくる。
	                            ここの初期値は「10.5px のとき 1.25px ぶん上へ」（1.25÷10.5＝0.119） */
	--share-size:13px;    /* 記事の共有ボタン（X・スレッズ・Facebook・コピー）の印の大きさ */
	/* 印と印のあいだの空き。題のそばでも本文の終わりでも同じ空きにするため、
	   ここ（:root）で決める。.a-head の中だけで決めると、本文の終わりに
	   置いたときに枠の外へ出てしまい、空きが 0 になる。 */
	--share-gap:calc( var(--share-size) * .92 );
	--nav-lift:0px;       /* 名前を左に寄せたときの、行き先の高さのずれ。プラスで上へ */

	/* 上下の空き（カスタマイザーが上書き）
	   --head-top … ページの上端から、サイトの名前までの余白
	   --body-top … 名前・行き先から、一覧の最初の記事や、本文までの余白
	   中のページ（記事・固定ページ）と狭い画面ぶんは、この二つに比を掛けて
	   決まる（下の .site-head / .article / @media）。はじめの数のままなら、
	   これまでとまったく同じ寸法になる。 */
	--head-top:76px;
	--body-top:60px;

	/* 柱の幅（カスタマイザーが上書き）
	   本文・一覧・ヘッダー画像が共通で使う、内側の柱の広さ。
	   左右の余白（24px）はこれとは別に外側へ足されます。 */
	--wrap-max:544px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--font-body);
	-webkit-font-smoothing:antialiased;
	overflow-wrap:break-word;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }

/* 読み上げだけに出す文字 */
.screen-reader-text{
	position:absolute; width:1px; height:1px; margin:-1px; padding:0;
	overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
	position:static; width:auto; height:auto; margin:0; padding:8px 14px;
	clip-path:none; background:var(--paper); color:var(--ink);
	font-size:13px; text-decoration:none;
}

.wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 24px; }

/* ------------------------------------------------------------------
   サイトの名前
------------------------------------------------------------------ */
.site-head{ padding:var(--head-top) 0 0; text-align:center; position:relative; }
.site-name,.site-sub,.nav-main{ padding-left:24px; padding-right:24px; }
/* 中のページは、トップより上を締める（本文の題が前に出るように）。
   トップの 0.58 倍 ＝ はじめの 76px なら 44px。 */
.site-head.is-inner{ padding-top:calc( var(--head-top) * .58 ); }

.site-name{
	font-family:var(--font-site); font-weight:400;
	font-size:var(--fs-name); letter-spacing:.42em; text-indent:.42em;
	margin:0; line-height:1.6;
}
/* 中のページでも、名前の大きさはトップと同じ（--fs-name 一つで決まる）。
   ここで小さくしないこと。上下の余白（.site-head.is-inner の padding）だけで
   「いまは中のページ」を出す。 */
.is-inner .site-name{ font-size:var(--fs-name); }
.site-name a{ text-decoration:none; }
.site-sub{ margin:16px 0 0; font-size:calc(var(--fs-small) - .5px); color:var(--soft); letter-spacing:.06em; }
.is-inner .site-sub{ display:none; }

/* ------------------------------------------------------------------
   名前を左、行き先を右（外観 → カスタマイズ → 文字と幅 →
   「サイトの名前の置き方」で「左に一行」「左に二行」を選んだとき）

   一行のときは .head-row head-row-1、二行のときは .head-row head-row-2 が
   付きます。違いは名前の行間（--name-lh）だけで、そろえ方は同じ。

   ・名前と行き先を一本の横並び（.head-row）に入れ、本文と同じ幅の柱
     （--wrap-max ＋ 左右24px）にそろえる。これで名前の左端が下の年・題の頭と、
     行き先の右端が本文の右端と、それぞれそろう。
   ・名前と行き先は「字の上」でそろえる（下の align-items と margin-top）。
     ベースライン（字の足）でそろえると、名前を大きくするほど足はそろった
     まま頭だけが離れ、行き先が下に取り残されて見える。
   ・text-indent は 0 に戻す。まん中にそろえるために入れていた一字ぶんの
     ずらしが残ると、下の年・題と頭がそろわない。
   ・狭い画面では行き先の列が消える（下の @media）。名前だけが左に残り、
     右上の細い二本線がメニューになる。
------------------------------------------------------------------ */
.head-row{
	/* 名前の行間（名前の大きさの何倍か）。下の margin-top でも使う。
	   一行のときは、ふだんの .site-name と同じ 1.6。 */
	--name-lh:1.6;
	max-width:var(--wrap-max); margin:0 auto; padding:0 24px;
	display:flex; align-items:flex-start; justify-content:space-between; gap:28px;
	text-align:left;
}

/* 名前と行き先の「字の上」をそろえるための二つ。

   行間（line-height）で足した空きは、字の上と下に半分ずつ付く。そのままだと
   名前を大きくするほど上の空きも増えて、行き先だけが下へずれて見えるので、
     ・名前   … 上に付く半分（(1 − 1.9) ÷ 2 ＝ 0.45文字ぶん）を margin で打ち消す
     ・行き先 … 同じ理由で、行間を 1 にして空きを無くす
   として、どちらも「字の箱の上」を揃え位置にする。これで名前の大きさを
   13px から 40px まで動かしても、一行目の字の上と行き先の字の上は同じ高さに来る。
   名前の上の余白（.site-head の padding）は、字の上までの寸法になる。 */
.head-row .site-name{
	padding:0; text-indent:0; min-width:0;
	line-height:var(--name-lh);
	margin-top:calc( ( 1 - var(--name-lh) ) * .5em );
}
/* 行き先。上の指定で名前の字の上とそろう高さに来る。
   そこからどれだけずらすかは --nav-lift（外観 → カスタマイズ → 文字と幅 →
   「名前と行き先の高さのずれ」）。プラスで上へ、マイナスで下へ。はじめは 0。
   position:relative + top なので、ずらしても周りの寸法は動かない。 */
.head-row .nav-main{
	margin:0; padding:0; flex:none;
	position:relative; top:calc( -1 * var(--nav-lift) );
}
.head-row .nav-main ul{ line-height:1; justify-content:flex-end; }

/* 二行にするとき。行間を二行ぶんに開き、分けた二つ（.ln）を縦に積む。
   上の margin は --name-lh を見ているので、打ち消しの量も一緒に変わる。 */
.head-row-2{ --name-lh:1.9; }
.head-row-2 .site-name .ln{ display:block; }

/* ------------------------------------------------------------------
   ヘッダー画像

   出す場所（トップだけ／トップと日記のページ／すべてのページ）は
   外観 → カスタマイズ → ヘッダー画像 で選ぶ。初めはトップだけ。

   幅は本文とそろえる。.site-head がすでに左右24pxをあけているので、
   ここで --wrap-max と 24px を足すと、日記の本文とぴったり同じ幅の柱になる。
   4：1 に切り抜いて低い帯にするのは、写真が題より前に出ないようにするため。
------------------------------------------------------------------ */
.head-img{ max-width:var(--wrap-max); margin:34px auto 0; padding:0 24px; } /* .wrap と同じ寸法にそろえる */
.head-img img{ display:block; width:100%; height:auto; aspect-ratio:4/1; object-fit:cover; }

/* 中のページに出したとき。トップより上下が締まっているので、名前との間も少し詰める。
   さらに低い帯（7：1）にするかどうかは、カスタマイザーで選ぶ（.head-slim が付く）。 */
.is-inner .head-img{ margin-top:24px; }
.is-inner.head-slim .head-img img{ aspect-ratio:7/1; }

/* 名前の下の行き先（パソコン） */
.nav-main{ margin:30px 0 0; }
.is-inner .nav-main{ margin-top:20px; }
.nav-main ul{
	list-style:none; margin:0; padding:0;
	display:flex; justify-content:center; flex-wrap:wrap; gap:1.6em;
	font-family:var(--font-nav); font-size:var(--fs-nav);
}
.nav-main a{ color:var(--soft); text-decoration:none; }
.nav-main a:hover{
	color:var(--ink); text-decoration:underline; text-underline-offset:.3em;
	text-decoration-thickness:.5px; text-decoration-color:var(--link-line);
}

/* ------------------------------------------------------------------
   スマホの、静かな印（ハンバーガー）
   線もパネルも動かさず、白がすっと重なるだけ。
------------------------------------------------------------------ */
.menu-mark,.menu-close{
	display:none; position:absolute; top:22px; right:18px;
	width:38px; height:38px; padding:0; border:0; background:none;
	cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.menu-mark{ flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; }
.menu-mark i{ display:block; width:17px; height:1px; background:#8d8880; }
/* メニューを開いているときの、閉じる印。
   二本の線をボタンのまん中に重ねてから回すので、交点がきっちり中心に来る。
   色は本文寄りの --soft（ハンバーガーの線より少し濃い）。押すところが
   すぐ分かるように、ここだけ濃くしている。 */
.menu-close{
	color:var(--soft);
	--x-len:15.5px; /* ×の線の長さ */
	--x-w:1px;      /* ×の線の太さ */
}
.menu-close i{
	position:absolute; top:50%; left:50%; display:block;
	width:var(--x-len); height:var(--x-w); background:currentColor;
	margin:calc(var(--x-w) / -2) 0 0 calc(var(--x-len) / -2);
}
/* 回すのは :first-child / :last-child ではなく :first-of-type / :last-of-type。
   ボタンの最後の子は読み上げ用の <span> なので、:last-child では二本目の i に
   当たらず、線が一本回らないまま（斜めと水平が重なった形）になる。 */
.menu-close i:first-of-type{ transform:rotate(45deg); }
.menu-close i:last-of-type{ transform:rotate(-45deg); }
.menu-mark:focus-visible,.menu-close:focus-visible{ outline:1px solid var(--river); outline-offset:2px; }

.menu-sheet{
	position:fixed; inset:0; z-index:50; background:var(--paper);
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
	opacity:0; visibility:hidden;
	/* 閉じるときは、薄くなりきってから見えなくする。開くときはすぐ見える状態にして、
	   キーボードの操作位置（フォーカス）がちゃんと中へ入れるようにする。 */
	transition:opacity .34s ease, visibility 0s linear .34s;
}
.menu-sheet ul{ list-style:none; margin:0; padding:0;
	display:flex; flex-direction:column; align-items:center; gap:30px; }
.menu-sheet a{
	font-family:var(--font-nav); font-size:var(--fs-sheet); letter-spacing:.16em;
	color:var(--ink); text-decoration:none;
}
.menu-open .menu-sheet{ opacity:1; visibility:visible; transition:opacity .34s ease, visibility 0s; }
.menu-open{ overflow:hidden; }

/* ------------------------------------------------------------------
   日記の一覧
------------------------------------------------------------------ */
.list{ padding:var(--body-top) 0 0; }
.list-title{
	font-family:var(--font-name); font-weight:400; font-size:var(--fs-listtitle);
	letter-spacing:.14em; color:var(--soft); margin:0 0 42px; text-align:center;
}
.year{ display:grid; grid-template-columns:4.5rem 1fr; padding:0 0 34px; }
.year-n{
	font-family:var(--font-num); font-size:calc(var(--fs-small) + .5px); color:var(--faint);
	letter-spacing:.08em; padding-top:.5em;
}

/* 西暦の囲み（外観 → カスタマイズ → 文字と幅 →「一覧の西暦の出し方」）。
   .year-n は grid の升目なので、そのまま枠を付けると列の幅・行の高さいっぱいの
   縦長の箱になる。justify-self / align-self で、数字の大きさまで縮めている。
   線と地の色は数字と同じ（--faint）。 */
.year-box-thin .year-n,
.year-box-soft .year-n,
.year-box-fill .year-n{ justify-self:start; align-self:start; line-height:1; }
.year-box-thin .year-n{
	padding:.32em .55em .26em; border:1px solid currentColor; margin-top:.3em;
}
.year-box-soft .year-n{
	padding:.55em .62em .5em; border:.5px solid currentColor;
	margin-top:.15em; letter-spacing:.12em;
}
.year-box-fill .year-n{
	padding:.38em .6em .32em; background:var(--faint); color:var(--paper);
	margin-top:.3em; letter-spacing:.1em;
}

.entries{ display:flex; flex-direction:column; gap:30px; margin:0; padding:0; list-style:none; }
.entry a{ text-decoration:none; display:flex; gap:.85em; align-items:baseline; }
.entry-body{ display:block; }
.entry .md{
	font-family:var(--font-num); font-size:var(--fs-small); color:var(--faint);
	font-variant-numeric:tabular-nums; flex:none; width:3.1em;
}
.entry .t{ margin:0; font-weight:400; font-size:var(--fs-list); line-height:1.75; }
.entry .ex{ display:block; font-size:var(--fs-small); line-height:1.95; color:var(--soft); margin:.6em 0 0; }

/* 題の「/」のうしろ（作品名）。分け方は body の印で切り替える
   （外観 → カスタマイズ → 題と作品名）。
     title-split-inline … 同じ行のまま、小さく薄く
     title-split-block  … 次の行へ、さらに薄く
   「分けない」を選ぶと印が付かないので、下のどちらも効かず、題は一続きで出る。 */
.entry .t .work{ font-size:var(--fs-work); }
.title-split-inline .entry .t .work{ color:var(--soft); margin-left:var(--work-gap-x); }
.title-split-block .entry .t .work{
	display:block; color:var(--faint); margin-top:var(--work-gap-y); letter-spacing:.02em;
}
/* 一覧の題は、カーソルを合わせても下線を出さない（並びを静かに保つため）。
   押せることは、操作位置の枠（下の focus-visible）で分かるようにしている。 */
.entry a:focus-visible{ outline:1px solid var(--river); outline-offset:4px; }

/* ------------------------------------------------------------------
   ページ送り

   出し方は三通り（外観 → カスタマイズ → 文字と幅 →「ページ送りの出し方」）。
     more    … まん中に「MORE」の枠。次の一枚ぶんが下に続く感じ。
     numbers … まん中に 1 2 3 … の数字（前後の矢印は出さない）。
     text    … まん中に「新しい日記／過去の日記」の文字だけ。
   どれもまん中ぞろえで、上の空きも同じにしてあります。
   文字の大きさは --fs-pager。はじめは「小さな文字」（--fs-small）と同じで、
   外観 → カスタマイズ → 文字と幅 →「ページ送りの文字の大きさ」で別に決められます。
   枠や数字のまわりの空きは em で取っているので、大きさを変えると一緒に広がります。
------------------------------------------------------------------ */
.pager{
	display:flex; flex-direction:column; align-items:center; gap:18px;
	padding:46px 0 0; font-size:var(--fs-pager);
}
.pager a{ color:var(--soft); text-decoration:none; }
.pager a:hover{ color:var(--ink); }

/* MORE のときだけ、「新しい日記」へ戻る細い一行を上に小さく置く。
   文字だけの出し方では二つを対等に並べるので、ここでは薄くしない。 */
.pager-more .newer a{ color:var(--faint); letter-spacing:.08em; }
.pager-more .newer a:hover{ color:var(--soft); }

/* MORE の枠 */
.pager-more .more a{
	display:inline-block; padding:.95em 2.9em;
	border:1px solid var(--line); color:var(--soft);
	font-family:var(--font-num); letter-spacing:.28em; text-indent:.28em;
	transition:border-color .3s ease, color .3s ease;
}
.pager-more .more a:hover{ border-color:var(--faint); color:var(--ink); }

/* 文字だけの出し方。まん中に、中黒ほどの間をあけて並べる。 */
.pager-text{ flex-direction:row; justify-content:center; gap:2.2em; flex-wrap:wrap; }

/* 数字のページ送り（the_posts_pagination が出す形に合わせる） */
.navigation.pagination{ padding:46px 0 0; }
.navigation.pagination .nav-links{
	display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.15em;
	font-family:var(--font-num); font-size:var(--fs-pager);
}
.navigation.pagination .page-numbers{
	display:inline-block; min-width:2.4em; padding:.6em .35em;
	text-align:center; color:var(--soft); text-decoration:none;
	font-variant-numeric:tabular-nums;
}
.navigation.pagination a.page-numbers:hover{ color:var(--ink); }
.navigation.pagination .page-numbers.current{ color:var(--ink); border-bottom:1px solid var(--faint); }
.navigation.pagination .page-numbers.dots{ color:var(--faint); min-width:1.4em; }
.navigation.pagination .page-numbers:focus-visible{ outline:1px solid var(--river); outline-offset:2px; }

.none{ font-size:var(--fs-body); line-height:var(--lh-body); padding:20px 0 0; }

/* ------------------------------------------------------------------
   日記のページ・固定ページ
------------------------------------------------------------------ */
/* 記事・固定ページの上の空き。一覧より少し広い（--body-top の 1.167 倍
   ＝ はじめの 60px なら 70px）。一つのつまみで、一覧も本文も一緒に動く。 */
.article{ padding:calc( var(--body-top) * 1.167 ) 0 0; }
/* 題の折り返し。狭い画面で二行になったとき、変な位置で切れないようにしている。
     ・text-wrap:balance は使わない … 二行の長さをそろえようとするため、日本語だと
       「ボー／ト」のように言葉の途中で折れてしまう。右端まで使ってから折る素の形に戻す。
     ・line-break:strict … 小書き仮名（ゃゅょっ）や長音符「ー」を行頭に置かない（禁則）。
     ・word-break:auto-phrase … 文節の切れ目で折る。いまは Chrome 系だけが対応
       （iPhone の Safari は未対応で、上の二つと同じ動きになる）。対応が広がれば自然に効く。 */
.a-title{
	font-family:var(--font-body); font-weight:var(--w-title);
	font-size:var(--fs-title); line-height:1.75; margin:0;
	line-break:strict; word-break:auto-phrase;
}
/* 大見出しの中の作品名。分け方は body の印で切り替える
   （外観 → カスタマイズ → 題と作品名 →「記事のページ：作品名の出し方」）。
   トップの一覧（.entry .t .work）とは別の設定で動く。
   題は太さ 500 なので、作品名だけ 400 に戻して、さらに引かせている。 */
.a-title .work{ font-size:var(--fs-work-single); font-weight:400; }
.title-split-s-inline .a-title .work{ color:var(--soft); margin-left:var(--work-gap-single); }
.title-split-s-block .a-title .work{
	display:block; color:var(--faint); margin-top:var(--work-gap-single); letter-spacing:.02em;
}

/* ------------------------------------------------------------------
   記事の共有ボタン（X・スレッズ・Facebook・リンクのコピー）

   大見出しを .a-head で包み、ボタンはその右下に置いています。
   作品名を次の行に出している設定では、作品名の行の右端にそろい、
   作品名のない記事では題の行の右端に来ます。

   ・印の大きさ … 外観 → カスタマイズ → 記事の共有ボタン（--share-size）
   ・どれを出すか … 同じ画面のチェック。出す数は PHP が --share-n で渡します。
     題が印に重ならないよう、その数から右の空きを計算しています。
------------------------------------------------------------------ */
.a-head{ position:relative; }
.a-head .a-title{
	padding-right:calc( (var(--share-size) + var(--share-gap)) * var(--share-n,0) + 4px );
}
.a-share{
	position:absolute; right:0; bottom:0;
	display:flex; align-items:center; gap:var(--share-gap); line-height:1;
}
.a-share a,.a-share button{
	color:var(--faint); background:none; border:0; padding:0; margin:0;
	display:inline-flex; align-items:center; justify-content:center;
	cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent;
	transition:color .25s ease;
}
.a-share a:hover,.a-share button:hover,.a-share a:focus-visible,.a-share button:focus-visible{ color:var(--soft); }
.a-share svg{ width:var(--share-size); height:var(--share-size); display:block; }
/* X の印は他より線が太く見えるので、少しだけ小さく */
.a-share .sh-x svg{ width:calc(var(--share-size) * .92); height:calc(var(--share-size) * .92); }
/* コピーが済んだときの、一瞬の合図 */
.a-share .is-done{ color:var(--river); }

/* 本文の終わりに出すとき（外観 → カスタマイズ → 記事の共有ボタン →
   「置きどころ」で「本文の終わりの右下」を選んだとき）。
   浮かせるのをやめて、一行として右端にそろえる。 */
.a-share-foot{
	position:static; justify-content:flex-end;
	margin-top:16px;
}

.a-meta{
	margin:18px 0 0; font-size:calc(var(--fs-small) - 1px); color:var(--faint);
	font-family:var(--font-num); letter-spacing:.06em;
}
.a-meta .cat{ font-family:var(--font-body); margin-left:1em; }
/* 日付を出さないときは、カテゴリーが行の頭に来るので左の空きを取る */
.a-meta .cat:first-child{ margin-left:0; }
.a-meta a{ color:inherit; text-decoration:none; }
.a-meta a:hover{ color:var(--ink); }

.a-body{ margin-top:44px; }
/* 日付を出していない記事は、日付のぶんの空きが残るので、そのぶんだけ詰める。
   詰め方は 外観 → カスタマイズ → 文字と幅 →「日付を出さないときの、題と本文のあいだ」。 */
.article.no-date .a-body{ margin-top:var(--gap-nodate); }
.a-body p,.a-body li{ font-size:var(--fs-body); line-height:var(--lh-body); }
.a-body p{ margin:0 0 1.85em; }
.a-body h2,.a-body h3,.a-body h4{
	font-weight:var(--w-title); line-height:1.8;
	margin:2.6em 0 1.2em; font-size:calc(var(--fs-body) + 1.5px);
}
.a-body ul,.a-body ol{ margin:0 0 1.85em; padding-left:1.4em; }
.a-body li{ margin:0 0 .6em; }
.a-body blockquote{
	margin:0 0 1.85em; padding:0 0 0 1.2em; border-left:1px solid var(--line); color:var(--soft);
}
.a-body a{ color:var(--ink); text-decoration:underline;
	text-underline-offset:.28em; text-decoration-thickness:.5px; text-decoration-color:var(--link-line); }
.a-body img{ display:block; margin:0 auto; }
.a-body figure{ margin:0 0 1.85em; }
.a-body figcaption,.a-body .wp-caption-text{
	font-size:calc(var(--fs-small) - 1px); line-height:1.9; color:var(--faint); margin:.8em 0 0; text-align:left;
}
.a-body .wp-caption{ max-width:100%; margin:0 0 1.85em; }
/* 写真だけの段落は、間隔をつめて縦に並べる */
.a-body p:has(> img:only-child){ margin-bottom:14px; }
.a-body p:has(> a > img:only-child){ margin-bottom:14px; }
.a-body .alignleft{ float:left; margin:0 1.4em 1.2em 0; }
.a-body .alignright{ float:right; margin:0 0 1.2em 1.4em; }
.a-body .aligncenter{ margin-left:auto; margin-right:auto; }
.a-body::after{ content:""; display:block; clear:both; }
.a-body ruby rt{ font-size:.5em; color:var(--soft); }
.a-pages{ font-size:var(--fs-small); color:var(--soft); }
.a-pages a{ color:var(--soft); }

.a-foot{
	margin-top:56px; border-top:1px solid var(--line); padding-top:22px;
	display:flex; justify-content:space-between; gap:20px; font-size:var(--fs-foot-nav);
}
.a-foot a{ color:var(--soft); text-decoration:none; line-height:1.85; }
.a-foot a:hover{ color:var(--ink); }
.a-foot .next{ text-align:right; margin-left:auto; }

.p-title{
	font-family:var(--font-name); font-weight:400; font-size:var(--fs-ptitle);
	letter-spacing:.14em; margin:0 0 40px;
	/* 濃さは --ptitle-ink（カスタマイザー）。紙の色に透かして薄くするので、
	   地の色が変わってもなじみます。1 のときは本文と同じ濃さ。 */
	color:var(--ink); opacity:var(--ptitle-ink);
}

/* ------------------------------------------------------------------
   カテゴリーのもくじ（固定ページ template-mokuji.php）

   まとまりの名前を左肩に小さく置き、細い線を一本引いて、その下に題だけを
   並べます。日付は出しません。名前と並び順は
   外観 → カスタマイズ → カテゴリーのもくじ。

   .mokuji そのものには上の空きを持たせないこと。ページ本文があるときだけ
   （.a-body のすぐ下に来たときだけ）少し離します。本文が無いときは
   .p-title の下の余白（40px）がそのまま効きます。
------------------------------------------------------------------ */
.mokuji{ margin:0; }
.a-body + .mokuji{ margin-top:18px; }

.mk-g{ padding:0 0 44px; }
.mk-g:last-child{ padding-bottom:0; }

.mk-name{
	font-family:var(--font-name); font-weight:400;
	font-size:var(--fs-mk-name); color:var(--faint); letter-spacing:.18em;
	margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--line);
}

.mk-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
/* もくじの題も、一覧と同じで、カーソルを合わせても下線は出さない
   （押せることは、下の操作位置の枠で分かるようにしている） */
.mk-list a{
	display:block; color:inherit; text-decoration:none;
	font-size:var(--fs-mokuji); line-height:1.85;
}
.mk-list a:focus-visible{ outline:1px solid var(--river); outline-offset:4px; }

/* もくじの、題に添える作品名。
   出し方は 外観 → カスタマイズ → カテゴリーのもくじ →「もくじに出す題」。
   .mokuji に付く印（mk-t-…）で切り替えます。
     mk-t-split-block  … 次の行に（はじめはこれ）
     mk-t-split-inline … 同じ行に
     mk-t-work / mk-t-full … 作品名を分けないので、下の指定は効きません
   空きは、一覧や大見出しとは別に、ここで決め打ちにしています。 */
.mk-list .work{ font-size:var(--fs-work-mokuji); font-weight:400; }
.mk-t-split-inline .mk-list .work{ color:var(--soft); margin-left:12px; }
.mk-t-split-block .mk-list .work{
	display:block; color:var(--faint); margin-top:5px; letter-spacing:.02em;
}

/* 「作品名だけ」を選んだときは、並ぶ字そのものが作品名になる。
   トップの一覧で作品名に使っているのと同じ色（--soft）まで引いて、
   もくじとトップで作品名の見え方をそろえる。
   題ごと出す「記事の題ぜんぶ」（mk-t-full）は、これまでどおり地の色のまま。 */
.mk-t-work .mk-list a{ color:var(--soft); }

/* カテゴリーで分けないときは、まとまりの名前が無いぶん、下の空きも要らない */
.mk-nocat .mk-g{ padding-bottom:0; }

/* ------------------------------------------------------------------
   足もと
------------------------------------------------------------------ */
.foot{ margin-top:70px; padding:26px 24px 40px; text-align:center; border-top:1px solid var(--line); }
.foot ul{ list-style:none; margin:0; padding:0;
	display:flex; justify-content:center; flex-wrap:wrap; gap:1.4em;
	font-family:var(--font-foot); font-size:var(--fs-foot-menu); }
.foot a{ color:var(--soft); text-decoration:none; }
.foot a:hover{ color:var(--ink); }
.foot small{
	display:block; margin-top:16px; font-size:var(--fs-foot-copy); color:var(--faint);
	font-family:var(--font-copy); letter-spacing:.08em;
}

/* 足もとの privacy policy

   置きどころは 外観 → カスタマイズ → 行き先（メニュー）で選ぶ。ここが受けるのは
   「©」と同じ行に並べるとき（左隣・右隣）と、「©」の下に置くとき。行き先の列に
   まぜたときは .foot ul の仲間として出るので、ここの指定は通らない。

   同じ行のときは折り返しを許してあるので、「プライバシーポリシー」のような長い字
   でも狭い画面で詰まらず、二行になって収まる（行の空きは gap の縦5px が持つ）。
   align-items:baseline は、字の下端ではなく文字の足をそろえるため。 */
.foot small.has-side{
	display:flex; justify-content:center; align-items:baseline;
	flex-wrap:wrap; gap:5px 18px;
}
.foot small.privacy-under{ margin-top:7px; }

/* 書体と大きさだけ、「©」とは別に持てる（はじめは「©」と同じ値を指している） */
.foot .privacy{
	font-family:var(--font-privacy); font-size:var(--fs-privacy);
	color:var(--faint); letter-spacing:.08em;
}
.foot .privacy a{ color:inherit; text-decoration:none; }
.foot .privacy a:hover{ color:var(--soft); }

/* 欧文と日本語を同じ行に並べたときの、高さのそろえ方

   「privacy policy」のような欧文の小文字は背が低く、「© 雨宿りノオト」のような
   日本語は上下いっぱいに広い。文字の足（ベースライン）をそろえても、欧文のほうが
   沈んで見えるので、そのぶんだけ持ち上げる（はじめは 1.25px ぶん）。
   量は 外観 → カスタマイズ → 文字と幅 →「privacy policy の高さの微調整」で変えられる
   （0 にすると動かさない）。

   位置をずらすだけで場所は取らせない（position:relative）ので、隣の字との
   横の間隔も、行の高さも変わらない。

   印（is-latin）を付けるかどうかは PHP 側で決めている。文言を
   「プライバシーポリシー」にしたときや、サイトの名前が欧文だけのときは、
   どちらも同じ背丈になるので印が付かず、ここは効かない。
   量はカスタマイザーから決まり、--privacy-lift に比として流れてくる。 */
.foot .privacy.is-latin{ position:relative; top:var(--privacy-lift); }

/* ------------------------------------------------------------------
   画面の出方（ページが出てくるとき・ページをうつるとき）

   ページが出てきたとき、中身ぜんたいがそっと濃くなりながら、ほんのわずか
   上へ上がる。リンクを押して次のページへ移るときは、いったん薄くなってから
   移る（そちらは assets/page-fade.js が <html> に is-leaving を付ける）。
   どちらも同じ向きなので、行き来してもひと続きの間合いに見える。

   長さを変えたいときは、下の三つの数字だけ触ればよい。
     --page-in-dur  … 出てくるまでの長さ
     --page-in-rise … 上がる幅。0px にすると「濃くなるだけ」になる
     --page-out-dur … 押してから次のページへ移るまでの長さ
   出方をやめたいときは、長さを 0s にする
   （0s なら page-fade.js も横取りをやめ、リンクはすぐ開く）。

   JavaScript が動かない端末でも、出てくるときのフェードはCSSだけで動く。
   その場合「うつるとき薄くなる」だけが無くなり、リンクはすぐ開く。
   端末側で「動きを減らす」を選んでいる人には、どちらも動かさない。
------------------------------------------------------------------ */
:root{
	--page-in-dur:0.75s;
	--page-in-rise:0px;
	--page-out-dur:0.3s;
}

/* 薄くなっているあいだに地の色が白く抜けないよう、html にも紙の色を敷く
   （body を薄くすると body の背景も一緒に薄くなるため）。 */
html{ background:var(--paper); }

@keyframes simple-diary-page-in{
	from{ opacity:0; transform:translateY(var(--page-in-rise)); }
	to{ opacity:1; transform:none; }
}

/* 【重要】fill は backwards（both にしないこと）。
   both だと動き終わったあとも body に transform が残り続ける。transform の効いた
   要素の中では position:fixed が画面に貼りつかなくなり（その要素の中での位置決めに
   変わる）、スマホのメニュー（.menu-sheet）が画面をおおわず、ページの末尾へ
   落ちてしまう。CSSの仕様で、見た目には現れないので気づきにくい。
   終わったあとの姿は body の通常の指定（opacity 1・transform なし）と同じなので、
   forwards は要らない。 */
body{ animation:simple-diary-page-in var(--page-in-dur) ease-out backwards; }

/* リンクを押したあと、次のページへ移るまでのあいだ。 */
html.is-leaving body{
	opacity:0;
	transition:opacity var(--page-out-dur) ease-in;
}

/* ------------------------------------------------------------------
   画面が狭いとき
------------------------------------------------------------------ */
@media (max-width:620px){
	/* 狭い画面では上を詰める。ここで --head-top を定義し直さないこと
	   （head で差し込む :root があとから効いて、こちらが打ち消される）。
	   トップの 0.74 倍・中のページは 0.53 倍 ＝ はじめの 76px なら 56px と 40px。 */
	.site-head{ padding-top:calc( var(--head-top) * .74 ); }
	.site-head.is-inner{ padding-top:calc( var(--head-top) * .53 ); }
	.wrap{ padding:0 22px; }
	.head-img,
	.site-name,.site-sub,.nav-main{ padding-left:22px; padding-right:22px; }
	.head-row{ padding:0 22px; }
	.year{ grid-template-columns:1fr; gap:12px; }
	.year-n{ padding-top:0; }
	/* 西暦が題の上に一行で出る幅。囲みは上の空きだけ取り消す（形はそのまま） */
	.year-box-thin .year-n,
	.year-box-soft .year-n,
	.year-box-fill .year-n{ margin-top:0; }
	.nav-main{ display:none; }        /* 上の横一列はしまって…… */
	.menu-mark{ display:flex; }        /* …右上の細い線にする */
	.menu-close{ display:block; }
	/* 前後の日記は狭い画面でも横一列のまま、左右の端へ。
	   題が長いと一行に入らないので、片側が半分を超えないようにして折り返す */
	.a-foot{ gap:16px; }
	.a-foot a{ max-width:46%; }
}

@media (prefers-reduced-motion:reduce){
	.menu-sheet{ transition:none; }
	body{ animation:none; }
	html.is-leaving body{ transition:none; opacity:1; }
}