@charset "utf-8";
/*===============================
	色の割り当て（#2a2a2a の濃淡。濃さそのものは下の MEMOFOLIO の :root の --mfw-c-〇〇）
	--memo-icon：アイコン・人気の星（30%）
	--memo-accent：線・帯（50%）
	--memo-accent-text：見出しなどの文字（100%）
	・link-card.css・プラグインの CSS も var(--memo-icon, …) などで使うので、名前は変えない
================================*/
:root {
	--fa-width: auto; /* Font Awesome のアイコンの幅を、形に合わせた幅に（7 は全部 1.25em の同じ幅） */
	--memo-icon: var(--mfw-c-faint, #bfbfbf);/*後ろは編集画面用の予備 */
	--memo-accent: var(--mfw-c-sub, #949494);/*後ろは編集画面用の予備 */
	--memo-accent-text: var(--mfw-c-title, #2a2a2a);/*後ろは編集画面用の予備 */
}
/*===============================
	Base（ページの基本）
================================*/
body {
	font-family: "Rounded Mplus 1c", sans-serif, "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size: 12px;
	line-height: 1.7em;
	overflow-x: hidden;
	color: var(--mfw-c-body, #5f5f5f); /* 本文の文字色 */
	background: #ffffff;
	letter-spacing: 0px;
}
/* float の解除 */
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}
a:hover {
color:var(--mfw-c-faint, #bfbfbf);
transition: 0.5s;
}

/*	Type
================================*/
.wf-roundedmplus1c { font-family: "M PLUS Rounded 1c"; }
.up{
text-transform: uppercase;
}
h1.type-TTL {
font-family:'Montserrat', sans-serif;
font-size:216%; /* サイト名 */
font-weight:600; /* サイト名：少し太く */
letter-spacing:-0.1em;
line-height:0.5em;
margin-bottom:3px;
margin-left:-0.1em;
margin-top:0px;
padding:0em;
color:var(--mfw-c-title, #2a2a2a); /* 見出しの色 */
-webkit-appearance:none;
}
/* サイト名は見出しの濃さ */
h1.type-TTL a {
color: var(--memo-accent-text);
}
h1.type-TTL a:hover {
color: var(--mfw-c-faint, #bfbfbf); /* 上の指定のほうが共通の a:hover より強いので、ここで書き直す */
}
h1.type-TTL02 {
font-family: "M PLUS Rounded 1c";
font-size:100%;
font-weight:300;
line-height:2.0em;
margin-bottom:0;
}
h1.type-A, h2.type-A, h3.type-A, h4.type-A, h5.type-A, h6.type-A {
font-family:'Montserrat', sans-serif;
font-size:100%;
font-weight:500;
line-height:1.1em;
letter-spacing:-0.05em;
}
h1.type-B, h2.type-B, h3.type-B, h4.type-B, h5.type-B, h6.type-B {
font-family:'Montserrat', sans-serif;
font-size:120%;
font-weight:500;
letter-spacing:-0.05em;
color:var(--mfw-c-title, #2a2a2a); /* 見出しの色 */
}
h1.type-C, h2.type-C, h3.type-C, h4.type-C, h5.type-C, h6.type-C {
font-family:'Montserrat', sans-serif;
font-size:55%;
font-weight:700;
letter-spacing:-2px;
line-height:1em;
margin-top:5px;
}
h1.type-D {
font-family:'Montserrat', sans-serif;
font-size:100%;
font-weight:500;
letter-spacing:-1px;
line-height:1em;
margin-top:5px;
}
ul.type-J {
font-family:"M PLUS Rounded 1c";
}
h1.type-300 {
font-family:'Montserrat', sans-serif;
font-size:180%; /* ページ見出し。下の小見出し（type-200）と同じ大きさ */
font-weight:500;
letter-spacing:-2px;
line-height:0.8em;
margin-bottom:0px;
margin-left:-0.05em;
margin-top:0px;
padding:0em;
color:var(--memo-accent-text); /* ページ見出し */
-webkit-appearance:none;
}
/* リンクになっている見出しも同じ濃さに。マウスオンはほかのリンクと同じ */
h1.type-300 a {
color: inherit;
}
h1.type-300 a:hover {
color: var(--mfw-c-faint, #bfbfbf);
}
h1.type-200 {
font-family:'Montserrat', sans-serif;
font-size:160%; /* ヘッダーのカテゴリ一覧と同じ大きさ */
font-weight:300; /* ヘッダーのカテゴリ一覧と同じ細さ */
letter-spacing:-2px;
line-height:1.0em;
margin-bottom:20px;
margin-top:0px;
padding:0em;
}

.type-x {
font-family:'Montserrat', sans-serif;
font-weight:500;
letter-spacing: -0.05em;
}
.categories02 {
font-family:'Montserrat', sans-serif;
font-size:100%;
font-weight:500;
line-height:1.1em;
letter-spacing:-0.05em;
}
.categories02 a {
font-weight:300;
}
.org{
color: rgb(247, 170, 25) ;
}
.red{
color: rgb(222, 78, 34) ;
}
.ph-fire{ /* NEW マークの炎：ほかのアイコンと同じ色（HTML の .red より後に書いてあるので、こちらが効く） */
color: var(--memo-icon);
}
/* アイコンの色 */
.type-D i,
.sidemenu i,
.blog-card-sp .type-x :is([class*="fa-"], .ph-bold) { /* <i> と <span>（BACKON LINK CARD）の両方 */
color:var(--memo-icon);
}

/* リンクの中のアイコン：マウスを乗せたら文字と一緒にいちばん薄い色になる
   アイコンには個別に色（--memo-icon）が付いているので、a:hover だけでは変わらない → ここでまとめて指定 */
a i {
transition: color 0.5s; /* 文字（a:hover の 0.5s）と同じ速さで変わる */
}
a:hover i,
.blog-card-sp a:hover :is([class*="fa-"], .ph-bold) { /* カードの REFERENCE のアイコンは指定が強いので個別に。<i> と <span> の両方 */
color:var(--mfw-c-faint, #bfbfbf);
}

/*	Single
================================*/
.description{
margin-top: 30px;
}

/* 日付表示。body_class() で年別・月別アーカイブの body にも .date が付くので、body には当てない */
.date:not(body){
font-family: 'Montserrat', sans-serif;
font-size: 130%;
font-weight: 500;
letter-spacing:-0.05em;
line-height: 1.34;
margin-bottom: 1.34em;
color:var(--mfw-c-body, #5f5f5f);
}

.title2{
font-family: "M PLUS Rounded 1c";
font-size: 120%;
font-weight: normal;
letter-spacing: 0px;
line-height: 1.0em;
padding-bottom: 10px;
margin-bottom: 30px;
margin-top: 5px;
border-bottom:solid 1px var(--mfw-c-body, #5f5f5f);
}
.title3{
font-family: "M PLUS Rounded 1c";
font-size: 110%;
font-weight: normal;
letter-spacing: 0px;
padding-top: 20px;
margin-bottom: 5px;
margin-top: 0px;
border-bottom:solid 1px var(--mfw-c-title, #2a2a2a);
}
h2 .title3{
font-family: "M PLUS Rounded 1c";
font-size: 100%;/* 枠があるので .title3 より小さく */
font-weight: normal;
letter-spacing: 0px;
margin-bottom: 0;/* 見出しの下の間隔は h2 側で取る（下の h2:has(> .title3)） */
margin-top: 20px;/* 見出しの上の間隔 */
padding: .25em .8em;/* 罫線と文字の間（上下 左右） */
border: 1px solid var(--mfw-c-faint, #bfbfbf);/* 角丸の罫線 */
border-radius: 4px;/* 角の丸み（HCB のコードブロック 0.5em と差をつけて控えめに） */
max-width: 100%;
box-sizing: border-box;
position: relative;
display: inline-block;
}
/* 見出しの下の間隔
   次が段落でも表・画像・コードブロックでも同じ間隔にするため、span ではなく h2 の下に間隔を取る。
   段落には上に 5px の余白があるが、h2 の下の余白と重なって大きいほう（10px）だけになるので、どれでも 10px になる */
h2:has(> .title3) {
margin-bottom: 10px;/* ★ 見出しと次の要素の間隔 */
}

.news2 {
padding-bottom: 0;
padding-top: 40px;
font-family: "M PLUS Rounded 1c";
}

.news .content{
font-family: "M PLUS Rounded 1c";
padding-bottom: 10px;
padding-top: 0px;
}
.content p{
	margin-top: 5px;
margin-bottom: 15px;
}
.content a{
border-bottom:solid 1px var(--mfw-c-title, #2a2a2a);
}
/* 記事本文のリスト：番号・黒丸が左にはみ出さないように余白を確保 */
.content ol,
.content ul {
padding-left: 1.8em;
margin-top: 5px;
margin-bottom: 15px;
}
.content li {
margin-bottom: 0.3em;
}
/* 記事本文の箇条書きだけ黒丸を表示する（ナビなどは別のCSSで非表示のまま） */
.content ul {
list-style: disc;
}
/* シェアボタン・関連記事が本文内にある場合、上の余白と黒丸がかからないようにする */
.content .sharebtn ul,
.content .related_post ul {
padding-left: 0;
list-style: none;
}
.news img{
margin-bottom: 10px;
height: auto;
max-width: 100%;
vertical-align: bottom;
}

/*	NOTICES（single.php）
	見出しと説明を1行に。説明は改行せず、間（1.2em）をあけて続ける
	・幅が足りないときは、説明が次の行に回る（flex-wrap）
================================*/
.notice-row {
display: flex;
flex-wrap: wrap;
align-items: baseline; /* 見出しと説明の文字の下をそろえる */
column-gap: 1.2em;
margin-top: 5px; /* h1.type-D と同じ */
}
.notice-row .type-D--notices {
margin: 0;
}
.notice-row .type-J {
margin: 0;
padding: 0;
list-style: none;
}
.notice-row .type-J li {
margin: 0;
padding: 0;
}

/*	SHARE（single.php）
	文字のリンク（backon69.com と同じ形）
	・見出し SHARE のあとに X・FACEBOOK・LINE・PINTEREST を1行に並べる
	・文字はフッターのコピーライトと同じ Montserrat・500・大文字
	・マウスオンはほかのリンクと同じ（共通の a:hover）
================================*/
.share-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 1.2em;
margin-top: 60px; /* NOTICES との間（記事ページのタイトルと本文の間と同じ） */
padding-bottom: 15px; /* 前後リンクとの間 */
}
.share-row .type-D--share {
margin: 0;
}
.sharebtn--text {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 90%;
font-weight: 500;
text-transform: uppercase;
}
.sharebtn--text ul {
display: flex;
flex-wrap: wrap;
gap: 0 1.2em; /* リンクどうしの間（見出しとの間と同じ） */
margin: 0;
padding: 0;
list-style: none;
}
.sharebtn--text ul li {
margin: 0;
letter-spacing: -0.05em;
}
.sharebtn--text a {
color: var(--mfw-c-body, #5f5f5f); /* 本文と同じ */
text-decoration: none;
}
.sharebtn--text a:hover {
color: var(--mfw-c-faint, #bfbfbf); /* ほかのリンクと同じ */
}

.categories {
font-family:'Montserrat', sans-serif;
font-size:110%;
font-weight:500;
margin-top:0px;
margin-bottom: 20px;
line-height: 1.0em;
letter-spacing:-0.05em;
}
.categories a {
font-weight:300;
text-transform: uppercase;
}
.recentcategories {
font-family:'Montserrat', sans-serif;
padding-bottom:0px;
padding-top:0px;
}

/*	PageHeader・Container
================================*/
.page-header {
position:static;
margin-bottom: 0px;
}

.page-header-inner {
margin-bottom:0px;
margin-top:28px; /* サイト名の上の余白（959px以下） */
}

.container01,.page-header,.footer {
margin-left: 2.5em;
margin-right: 2.5em;
}

.headnavi {
width: 100%;
margin-top: 0;
margin-bottom: 0px;
}
.headnavi ul {
padding:0px;
font-family:'Montserrat', sans-serif;
font-size:180%;
font-weight:500;
letter-spacing: -0.05em;
line-height:1em;
margin-top:0px;
}
.headnavi  li {
display: inline-block;
font-weight:300;
margin-top:0px;
text-align: center;
}

/*  Post List01
================================*/
.postlist02 {
font-family: "M PLUS Rounded 1c";
word-wrap:break-word;
max-width:100%;
border-radius:0px;
margin-top: 10px;
margin-bottom: 15px;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 0px;
}
h1.type-A a {
font-weight: 300;
}
.postlist02 a {
text-decoration: none;
}
.postlist02-content {
line-height:120%;
}
.postlist02-title {
display: block;
font-size:110%; /* 下の日付・カテゴリより少し大きく */
line-height: 1.5em;
}
.postlist02-excerpt {
color:var(--mfw-c-title, #2a2a2a);
line-height: 1.5em;
}
/* 一覧：タイトルの下に「DATE 日付　CATEGORIES …」の1行 */
.postlist02-meta {
display: flex;
flex-wrap: wrap; /* カテゴリ・タグが長いときは次の行へ */
align-items: baseline; /* 日付とカテゴリの文字の下端をそろえる */
column-gap: 1em;
}
.postlist02-date {
font-family: 'Montserrat', sans-serif;
font-size: 100%; /* カテゴリ・タグと同じ大きさ */
font-weight: 500; /* 「DATE:」は CATEGORIES: と同じ太さ */
line-height: 1.1em;
letter-spacing: -0.05em;
white-space: nowrap;
}
.postlist02-date a {
font-weight: 300; /* 日付の数字はカテゴリ名と同じ細さ */
}
.postlist02-meta .categories02 {
margin: 0;
}
/* パンくずリスト：ヘッダーの一番下
   フォント・大きさ・色はサイトの説明（LOOKED IT UP. …／h1.type-TTL02）と同じ */
.memo-breadcrumb {
margin-top: 0; /* 上の一覧との間 */
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 24px; /* 説明と同じ行の高さ。文字の上下に 6px ずつ余白ができ、説明の下の余白とそろう */
color: var(--mfw-c-body, #5f5f5f);
}
.memo-breadcrumb a {
color: inherit; /* リンクも同じ色（マウスオンは共通の a:hover） */
}
.memo-breadcrumb_icon {
color: var(--memo-icon); /* ほかのアイコンと同じ */
margin-right: 0.4em;
}
/* 一番右（今のページ）は、ページ名の代わりに全ページ共通で「HERE」と出す
   ページ名は HTML に残したまま、見た目だけ差し替える（検索エンジン向けのパンくずの情報・読み上げはページ名のまま） */
.memo-breadcrumb .current-item {
font-size: 0; /* 元のページ名を見えなくする */
}
.memo-breadcrumb .current-item::after {
content: "HERE";
font-size: 12px; /* 親の font-size: 0 を受け継がないよう px で指定 */
}
/* 一覧の人気順位の星（.rank-stars。inc/ga4-rank-stars.php）
   ・タイトルの右。★＝塗り／☆＝同じ色の白抜き
   ・色はアイコンと同じ var(--memo-icon) */
.postlist02-title .rank-stars {
margin-left: 0.4em;
font-family: sans-serif; /* ★☆ は標準のフォントで（英字用のフォントに無いことがあるため） */
font-size: 80%;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--memo-icon); /* アイコンと同じ */
white-space: nowrap;
cursor: default;
}

/* 記事ページ：タイトル → 日付＋カテゴリの1行 */
body.single .title2 {
border-bottom: none; /* タイトル下の線はなし */
padding-bottom: 0;
margin-bottom: 6px; /* タイトルと日付の隙間（詰める） */
}
body.single .entry01 > .categories {
margin-bottom: 0; /* タイトルを包む箱の下の余白（20px）をなくす */
}
.single-meta {
display: flex;
flex-wrap: wrap; /* 狭い画面ではカテゴリが次の行へ */
align-items: baseline; /* 日付とカテゴリの文字の下端をそろえる */
column-gap: 1em;
margin-bottom: 60px; /* 本文の開始までの余白 */
}
/* 古い記事の注意書き（.memo-outdated。プラグイン MEMORANDUM Outdated Notice）があるとき
   ・注意書きを日付のすぐ下に置き、本文までの 60px は注意書きの下に付ける */
.single-meta:has(+ .memo-outdated) {
margin-bottom: 0;
}
.single-meta + .memo-outdated {
margin-bottom: 60px;
}
.single-meta .date,
.single-meta .categories {
margin: 0; /* 余白だけ消す */
}
.single-meta .date {
font-size: 110%; /* カテゴリと同じ大きさ */
line-height: 1.0em;
color: inherit; /* 本文と同じ色。カテゴリとそろえる */
}
.single-meta-day {
font-weight: 300; /* 日付の数字はカテゴリ名と同じ細さ。「DATE」は 500 のまま */
}
.postlist02 .clear {
clear: both;
}

/*	sidemenu
================================*/
.sidemenu{
margin-top: 30px;
font-family:'Montserrat', sans-serif;
font-size:100%;
font-weight:500;
line-height:1.1em;
letter-spacing:-0.05em;
}
.sidemenu p{
margin-top: 6px;
}

/*	ページ送り（WP-PageNavi）
================================*/
.navigation{
clear: both;
font-size: 80%;
line-height: 20px;
padding-top: 15px;
padding-bottom: 20px;
}
.wp-pagenavi{
clear: both;
font-size: 80%;
font-family:'Montserrat', sans-serif;
}
.wp-pagenavi a, .wp-pagenavi span {
color: var(--mfw-c-body, #5f5f5f); /* 文字は本文と同じ色 */
background-color: var(--mfw-line, #eaeaea); /* MEMOFOLIO では後ろの「ページ送り」で 6%（--mfw-fill）に上書き */
border: solid 1px var(--mfw-line, #eaeaea);
padding: 5px 5px;
margin: 0 2px;
white-space: nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-align: center;
text-decoration:none;
}
.wp-pagenavi a:hover{
color: #fff; /* 黒地に白文字（今のページと同じ） */
background-color: var(--mfw-c-title, #2a2a2a);/* 見出しと同じ濃い色 */
border: solid 1px var(--mfw-c-title, #2a2a2a);
}
.wp-pagenavi span.current{
color: #fff; /* 濃い地に白文字 */
background-color: var(--memo-accent);
border: solid 1px var(--memo-accent);
font-weight: bold;
}

/*	Footer
================================*/
.footer{
padding-bottom: 100px;
padding-top: 0px;
}
.footer-inner{
margin: auto;
margin-top: 50px;
padding-bottom: 60px;
padding-top: 0px;
}
/*  Copyright
================================*/
.copyright{
float: left;
font-family: 'Montserrat', sans-serif;
font-size: 90%;
font-weight: 500;
letter-spacing: 0px;
line-height: 1.2em;
padding-top: 0px;
text-transform: uppercase;
}

/*	Search
================================*/
.searchform{
margin-top: 10px;
margin-bottom: 10px;
}
.search_container{
box-sizing: border-box;
}
.search_container input[type="text"]{
border: none;
border-bottom: 1px solid var(--mfw-c-title, #2a2a2a);
padding: 0px 0px;
background: #ffffff;
overflow: hidden;
}
.search_container input[type="text"]:focus {
outline: 0;
background: #ffffff;
}
.search_container input[type="submit"]{
cursor: pointer;
font-family: "Font Awesome 7 Free"; /* 虫眼鏡 &#xf002。solid（900）のフォント */
font-weight: 900;                   /* 5系の塗りアイコン（fas）は太さ900 */
font-size: 1.3em;
border: none;
background: none;
color: var(--memo-icon); /* 検索のレンズ：ほかのアイコンと同じ */
outline : none;
display: inline-block;
vertical-align: middle;
transition: color 0.5s;
}
.search_container input[type="submit"]:hover {
color: var(--mfw-c-faint, #bfbfbf); /* マウスオンでほかのリンクと同じ薄いグレー */
}
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #ffffff inset;
}

/*	Container 上下
================================*/
.container01{
padding-top: 0px;
}

/*	ContactForm7-2
================================*/
.wpcf7 form input[type="text"],
.wpcf7 form textarea{
width: 400px;
border: 1px solid var(--mfw-c-title, #2a2a2a);
color: var(--mfw-c-body, #5f5f5f);
padding: 10px 0px;
background-color: #ffffff; /* ページの背景と同じ */
height: 15px;
border-radius:5px;
}
.wpcf7 form p {
text-transform: uppercase;
border-bottom: none;           /* 入力欄に枠があるので、項目ごとの下線はなし */
color: var(--mfw-c-body, #5f5f5f);
padding-bottom: 0;
}
.wpcf7 form input[type="email"]{
border: 1px solid var(--mfw-c-title, #2a2a2a);
color: var(--mfw-c-body, #5f5f5f);
background-color: #ffffff; /* ページの背景と同じ */
font-size: 100%;
padding: 10px 0px;
vertical-align: text-bottom;
width: 400px;
height: 15px;
border-radius:5px;
}
.wpcf7{
width: 100%;
font-size: 100%;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}
.wpcf7 form textarea{
line-height: 180%;
height: 150px;       /* 6行くらい見える高さ */
}
.wpcf7 form input[type="submit"]{
background: var(--mfw-c-title, #2a2a2a); /* 黒 */
border: none;
color: #ffffff;
cursor: pointer;
font-family: 'Montserrat', sans-serif; /* NAME などの項目名と同じ文字 */
font-size: 12px;
font-weight: 600;
height: 32px;
padding: 0 16px;
letter-spacing: normal;
margin-top: 20px;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
-webkit-transition: background-color 0.2s linear;
}
.wpcf7 form input[type="submit"]:hover{
background: var(--mfw-c-body, #5f5f5f); /* マウスを乗せると少し明るい黒 */
}

.wpcf7-response-output {
width: 400px;
font-weight: normal;
background: #ffffff;           /* ページの背景と同じ */
border-radius: 0;
border: 1px solid var(--mfw-line, #eaeaea);     /* 送信成功・エラー時は CF7 の色の線が優先 */
box-sizing: border-box;        /* 枠線・余白込みで幅を数える */
max-width: 100%;
margin-left: 0 !important;     /* CF7 の左右 0.5em の余白を消して、入力欄と左端をそろえる */
margin-right: 0 !important;
line-height: 25px;
text-align: center;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
font-weight: normal;
display: block;
position: absolute;
top: 0;
width: 400px;
text-align:right;
}

/*blog-card-sp
================================*/
.blog-card-sp {
display: block;
border-left:2px solid var(--memo-accent); /* 左の罫線 */
word-wrap: break-word;
padding-left: 10px;
margin-bottom: 15px;
color:inherit;
text-decoration:none;
line-height: 1.2em;
}

/* カード（REFERENCE など）のタイトル・URL：本文の濃さ */
.blog-card-sp a {
color: var(--mfw-c-body, #5f5f5f);
}
/* 見出し（REFERENCE ／ RELATED ＞）だけ濃く。見出しと中身で濃淡を分ける */
.blog-card-sp .type-x {
color: var(--memo-accent-text);
}
.blog-card-sp a:hover .type-x {
color: var(--mfw-c-faint, #bfbfbf); /* マウスオンはほかと同じ */
}
/* ＞（ph-caret-right）：REFERENCE と RELATED でそろえる
   ・HTML は REFERENCE ではタイトル側、RELATED では見出し側に ＞ があるので、CSS で色をそろえる（プラグインの HTML は触らない）
   ・＞ のあとに半角スペースくらいの間をあける
   ・マウスオンは .blog-card-sp a:hover のほうが強いので、そのまま効く */
.blog-card-sp .ph-caret-right {
color: var(--memo-accent-text);
margin-right: 0.3em;
}
/* 上の指定は共通の a:hover と同じ強さで、後に書いてあるぶん勝ってしまう → マウスオンの色をここで書き直す */
.blog-card-sp a:hover {
color: var(--mfw-c-faint, #bfbfbf); /* 共通の a:hover と同じ */
}

/*related_post
================================*/
.related_post {
margin-top: 30px; /* 前後リンクとの間 */
padding-top: 10px;
}
.related_title {
line-height: 0.8em;
}
.related_post h3 {
font-family:'Montserrat', sans-serif;
font-size:180%;
font-weight:500;
margin-top:0px;
margin-bottom: 15px;
letter-spacing:-0.05em;
color:var(--memo-accent-text); /* 見出し：ページ見出し（type-300）と同じ */
}
.related_post ul li{
margin-bottom: 8px;
}
.related_post li{
line-height: 1.0em;
position: relative;
padding-left: 0;
}
.related_post li:last-child{
border:none;
margin: 0;
margin-top: 10px; margin-bottom: 10px;
}

/*GoogleAD
================================*/
.googlead{
margin-top: 15px;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 0px;
}

/* 広告（AdSense）の枠：base.css の ins の黄色い背景（#ff9）を付けない
   ・AdSense の ins には style 属性が付くので、ins[style] で広告の枠だけに効く（記事の中の <ins> の黄色はそのまま）
   ・広告が枠いっぱいに出ないとき（ボタン型の広告など）に、黄色が透けて見えるため */
ins[style] {
  background-color: transparent;
}

/* 記事内広告（1つ目のブロックの後）：リンクカードと離して、カードの一部に見えないようにする */
.content .googlead--inarticle {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* ログイン中の広告の代わり：広告と同じくらいの大きさの地色の箱
   ・★ の高さは仮。広告が出たら ins.adsbygoogle の height に合わせる */
.googlead--dummy {
  box-sizing: border-box;   /* 線を幅の内側に（本物の広告の囲みと同じ幅にする） */
  display: flex;
  align-items: center;      /* 文字を上下の中央に */
  justify-content: center;  /* 文字を左右の中央に */
  min-height: 200px;        /* ★ 広告の高さ（PC） */
  background-color: var(--mfw-line, #eaeaea); /* 10%（表の見出しセルと同じ） */
  /* 対角線（×）：枠と同じ色の 1px の線を、右上がり・右下がりの2本引く（箱の大きさが変わっても角から角へ） */
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  border: 1px dashed var(--mfw-c-faint, #bfbfbf);
}
.googlead--dummy .type-x {
  margin: 0;
  padding: 4px 12px;
  background-color: var(--mfw-line, #eaeaea); /* 文字の後ろだけ線を隠して読みやすく */
}

/* スマホ（テーマの切り替え幅 767px に合わせる） */
@media (max-width: 767px) {
  .googlead--dummy {
    min-height: 250px;      /* ★ 広告の高さ（スマホ） */
  }
}

/* =========================================
   記事内の表（WordPress 表ブロック）
   ========================================= */

/* 行（データセル）の背景：白 */
.entry01 .wp-block-table td {
	background: #FFFFFF;
}

/* ヘッダー（見出しセル）：背景 10%、文字は中のセルと同じ */
.entry01 .wp-block-table th,
.entry01 .wp-block-table thead td {
	background: var(--mfw-line, #eaeaea); /* 10%（コードブロックの枠・言語名の帯と同じ） */
	font-weight: normal; /* 文字は中のセルと同じ（背景で見分ける。DM Mono・M PLUS は 700 を読み込んでいないので、太字はブラウザが無理に太くした字になる） */
}

/* =========================================
   記事内の表：中身に合わせた幅＋左寄せ
   ========================================= */

/* 表の幅を中身に合わせる（WPコアの固定幅レイアウト・幅100%を上書き） */
.entry01 .wp-block-table table,
.entry01 .wp-block-table .has-fixed-layout {
	width: auto;
	max-width: 100%;
	table-layout: auto;
}

/* 表全体を左寄せ（中央寄せ・左右寄せの指定があっても左に置く） */
.entry01 .wp-block-table,
.entry01 .wp-block-table.aligncenter,
.entry01 .wp-block-table.alignleft,
.entry01 .wp-block-table.alignright {
	display: block;
	margin-left: 0;
	margin-right: auto;
}

/* 長い文字列（URLやコード）がセルからはみ出さないように折り返す */
.entry01 .wp-block-table td,
.entry01 .wp-block-table th {
	word-break: break-word;
}

/* 表の罫線：外枠・行の下・列の間とも 10% の線（ヘッダーは背景 10% で見分ける）
   ・WordPress 標準は全部のセルに 1px の枠、thead の下と tfoot の上に 3px の線
   ・ヘッダーの列の間は背景と同じ 10% だと見えないので、ウィンドウの地の色（白）の線で区切る */
.entry01 .wp-block-table td,
.entry01 .wp-block-table th {
	border: none;
	border-bottom: 1px solid var(--mfw-line, #eaeaea);
}
.entry01 .wp-block-table :is(td, th) + :is(td, th) {
	border-left: 1px solid var(--mfw-line, #eaeaea); /* 列の間（1列目の左は無し） */
}
.entry01 .wp-block-table thead :is(td, th) + :is(td, th),
.entry01 .wp-block-table tr > th + th {
	border-left-color: var(--mfw-panel, #ffffff); /* ヘッダーの列の間は白 */
}
.entry01 .wp-block-table thead,
.entry01 .wp-block-table tfoot {
	border: none;
}
.entry01 .wp-block-table table {
	border: 1px solid var(--mfw-line, #eaeaea); /* 外枠 */
}

/* =========================================
   ヘッダーの CATEGORIES／ARCHIVES／TAGS：横に3つ並べ、押した1つの一覧を下に開く（js/memofolio.js）
   ========================================= */
/* 3つの見出し（今の見出しと同じ文字・大きさ・太さ） */
.memo-hn-tabs_bar {
font-family: 'Montserrat', sans-serif;
font-size: 150%; /* ページの見出し（LATEST POSTS など 180%）より一段小さく */
font-weight: 500;
letter-spacing: -0.05em;
line-height: 1em;
}
.memo-hn-tabs_btn {
padding: 0;
margin: 0 0.5em 0 0;
border: 0;
background: none;
font: inherit;
letter-spacing: inherit;
color: inherit;
cursor: pointer;
transition: color 0.5s;
}
.memo-hn-tabs_btn:hover {
color: var(--mfw-c-faint, #bfbfbf); /* ほかのリンクと同じマウスオン */
}

/* 開いているメニューは、色はそのままで太く */
.memo-hn-tabs_btn[aria-expanded="true"] {
font-weight: 700;
}
.memo-hn-tabs_btn[aria-expanded="true"]:hover {
color: inherit; /* 開いているメニューは、マウスを乗せても薄くしない */
}
/* 開いた一覧：今と同じ並び。中の見出し（CATEGORIES など）は上に並んでいるので隠す */
.memo-hn-tabs_panel {
margin-top: 0; /* 見出しとの間は中の余白で取る（開閉の高さの動きに含めるため） */
}
.memo-hn-tabs_panel .recentcategories {
padding-top: 6px;
}
.memo-hn-tabs_panel .memo-hn_btn {
display: none;
}
.memo-hn-tabs_panel .memo-hn li {
display: inline-block;
}
/* 開いた一覧の文字も見出しと同じ大きさに（.headnavi ul の 180% を上書き） */
.memo-hn-tabs_panel .memo-hn {
font-size: 150%;
}

/*===============================
  ===============================
	RESPONSIVE 設定
  ===============================
================================*/

/*===============================
	Less than 767
================================*/
@media (max-width: 767px) {

/*　画面サイズが767px以下の場合ここの記述が適用　*/
.container01-1{
margin-top: 30px;
}
.container01,.page-header {
margin-left: 2.0em;
margin-right: 2.0em;
}
h1.type-TTL {
font-size:260%; /* スマホ */
margin-bottom: 0px;
}
h1.type-300 {
font-size:180%; /* スマホ：type-200 と同じ大きさ */
-webkit-appearance:none;
}
h1.type-200 {
font-size:180%;
}

/*	ContactForm7-2
================================*/
.wpcf7-response-output {
width: 100%;
}
.wpcf7 form input[type="email"]{
width: 100%;
}
.wpcf7 form textarea{
width: 100%;
}
.wpcf7 form input[type="text"]{
width: 100%;
}

.searchform{
margin-top: 30px;
}
}

/*===============================
	Over 768px
================================*/
@media (min-width: 768px) {

/*　画面サイズが768px以上の場合ここの記述が適用　*/
.container01:after{
clear: both;
content: "";
display: block;
}
.container01-1{
box-sizing: border-box;
float: left;
margin-top: 90px;
-moz-box-sizing: border-box;
padding-right: 60px;
-webkit-box-sizing: border-box;
width: 70%;
}
.container01-2{
float: left;
padding-left: 0px;
margin-top: 20px;
width: 25%;
}
.container01, .page-header {
margin-left: 2em;
margin-right: 2em;
}
}

/*===============================
	Over 960px
================================*/
@media (min-width: 960px) {
/*　画面サイズが960px以上の場合ここの記述が適用　*/
.page-header-inner{
margin-top: 31px; /* サイト名の上の余白 */
}
.container01,.page-header, .footer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
}

/*===============================
	記事本文の画像：高さで制限して中央に配置
	・高さ最大420px・幅最大640px（縦横比は維持）、本文幅からははみ出さない
	・絵文字・ファビコンなど小さいアイコンは対象外
================================*/
.single .content img:not(.favicon):not(.emoji):not(.wp-smiley) {
	display: block;
	max-height: 420px;
	max-width: min(100%, 640px);    /* スマホでは画面幅 */
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* 背景画像スライダー（.slider）：縦横比 70%（padding-top:70%）で作られているので、
   幅を 300px ÷ 0.7 ≒ 429px までに抑えて高さを最大300pxにし、中央に配置 */
.single .content .slider {
	max-width: calc(300px / 0.7);
	margin-left: auto;
	margin-right: auto;
}

/* float の解除（一覧の .clear） */
.clear {
	clear: both;
}

/*===============================
	記事ページの目次（右サイド）
	・768px以上：本文と右サイドを横並びのまま「同じ高さ」にして、目次をスクロールに付いてこさせる
================================*/
.memo-toc {
	margin-top: 30px;
	font-family: 'Montserrat', sans-serif;
}

.memo-toc[hidden] {
	display: none;
}
/* 見出しが2つ未満の記事：「JUST IDLING」とだけ表示（js/single.js） */
.memo-toc.is-empty .memo-toc_title,
.memo-toc.is-empty .memo-toc_title i {
	color: var(--mfw-c-faint, #bfbfbf);          /* リンクのマウスオン（a:hover）と同じ薄いグレー */
}
.memo-toc.is-empty .memo-toc_title {
	margin-bottom: 0;
}
.memo-toc_title {
	font-size: 100%;
	font-weight: 500;
	letter-spacing: -0.05em;
	color: var(--mfw-c-body, #5f5f5f);          /* CONTENTS の文字：本文と同じ */
	margin-bottom: 8px;
}
.memo-toc_title i {
	color: var(--memo-icon);          /* ほかのアイコンと同じ */
}
.memo-toc_list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--mfw-c-faint, #bfbfbf);  /* 目次の縦線：カードの罫線と同じ */
}
.memo-toc_item a {
	display: block;
	padding: 4px 0 4px 12px;
	margin-left: -1px;               /* 左の線と重ねる */
	border-left: 2px solid transparent;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 95%;
	line-height: 1.5;
	color: var(--mfw-c-sub, #949494);          /* 目次の項目：アイコンと同じ */
	transition: color 0.2s, border-color 0.2s;
}
.memo-toc_h3 a {
	padding-left: 24px;              /* h3 は一段下げる */
	font-size: 90%;
}
.memo-toc_item a:hover {
	color: var(--mfw-c-title, #2a2a2a);          /* マウスオン：見出しと同じ濃い色 */
}
.memo-toc_item a.is-current {    /* 今読んでいる見出し */
	color: var(--mfw-c-title, #2a2a2a);          /* 今読んでいる項目：見出しと同じ濃い色 */
	border-left-color: var(--mfw-c-sub, #949494);      /* 今読んでいる見出しの太い線：アイコンと同じ */
}
@media (min-width: 768px) {
	/* 本文と右サイドを同じ高さに（float → flex）。右サイドが本文の下まで伸びるので、目次が付いてこられる */
	.single .container01 {
		display: flex;
		align-items: stretch;
	}
	.single .container01::after {
		display: none;                 /* float 解除用の疑似要素は不要 */
	}
	.single .container01-1,
	.single .container01-2 {
		float: none;
	}
	.single .container01-2 {
		margin-left: auto;             /* 右端に寄せる */
	}
	.memo-toc {
		position: sticky;              /* スクロールしても画面の上に残る */
		top: 20px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;              /* 目次が長い時は目次の中だけスクロール */
	}
}
/* ページ内リンクで飛んだ時、見出しが画面の端にくっつかないように */
.single .content h2,
.single .content h3 {
	scroll-margin-top: 20px;
}

/*===============================
	検索履歴（RECENT）  js/memofolio.js
================================*/
.search_container {
	position: relative;              /* 履歴リストを検索窓の真下に出すため */
}
.memo-search-history {
	position: absolute;              /* 位置と幅は JS で入力欄＋虫めがねに合わせる */
	z-index: 50;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 8px 0;
	background: #ffffff;
	border: 1px solid var(--mfw-line, #eaeaea);
	box-shadow: 0 2px 6px rgba(var(--mfw-ink), 0.06);
}
.memo-search-history[hidden] {
	display: none;
}
.memo-search-history_title {
	margin: 0 12px 4px;
	font-family: 'Montserrat', sans-serif;
	font-size: 75%;
	letter-spacing: 0.05em;
	color: var(--mfw-c-faint, #bfbfbf);                  /* JUST IDLING と同じ薄いグレー */
}
.memo-search-history ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.memo-search-history li {
	display: flex;
	align-items: center;
}
.memo-search-history button {
	border: none;
	background: none;
	cursor: pointer;
	font-family: "M PLUS Rounded 1c", sans-serif;
	color: var(--mfw-c-sub, #949494);
}
.memo-search-history_word {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 12px;
	text-align: left;
	font-size: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;         /* 長い言葉は … で切る */
}
.memo-search-history_del {
	flex: 0 0 auto;
	padding: 4px 12px;
	font-size: 90%;
	color: var(--mfw-c-faint, #bfbfbf);
}
.memo-search-history_word:hover,
.memo-search-history_del:hover {
	color: var(--mfw-c-title, #2a2a2a);
}

/* =========================================
   右の列（検索・メニュー）を右端にそろえる
   ・検索窓を列の幅いっぱいに伸ばし、レンズが列の右端に来るようにする
   ・RESPONSIVE 設定の .container01-2 の float より後に書く必要があるので、ここに置く
   ========================================= */
@media (min-width: 768px) {
	.container01-2 {
		float: right;
	}
	.container01-2 .search_container {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	.container01-2 .search_container input[type="text"] {
		flex: 1 1 auto; /* 入力欄を伸ばして、レンズを右端へ押し出す */
		min-width: 0;
	}
	.container01-2 .search_container input[type="submit"] {
		flex: 0 0 auto;
		padding-right: 0;
	}
}

/* =========================================
   縦線のアニメーション（js/line-sweep.js）
   ページを開いたとき、1px の縦線5本がばらばらの速さで左から右へ抜ける */
.line-sweep {
  --ls-color: var(--mfw-c-body, #5f5f5f);   /* ★ 線の色（本文色） */
  --ls-width: 1px;       /* ★ 線の太さ */
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;  /* 線の上からでもリンクを押せるように */
}
.line-sweep__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ls-width);
  background: var(--ls-color);
  will-change: transform;
}
/* COLOR CRUSH：タイトルのヨコに更新日（広告の位置を変えないため、同じ行に並べる） */
.memo-colors-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;   /* タイトルと日付の文字の下端を揃える */
  gap: 0 16px;             /* タイトル 〜 日付 */
}
.memo-colors-title .single-meta {
  margin: 0;               /* 日付の行の余白で、タイトルの行が高くならないように */
}
/* 日付の行の高さを、タイトル（h1.type-300 の line-height 0.8em）と同じにする
   → タイトルの行が高くならず、広告の位置が PROFILE などのページと揃う */
.memo-colors-title .single-meta,
.memo-colors-title .single-meta .date {
  line-height: .8em;
}

/* =========================================
   記事内デモのボタンを塗りつぶしにする
   見出し（h2 .title3）を角丸の罫線にしたため、罫線だけのボタンと見分けがつかなくなる。
   ボタンは塗りつぶし（カプセル形）、見出しは罫線だけ、で役割を分ける。
   ・対象は「罫線だけのボタン」だった過去記事のデモ（記事の中の <style> はそのまま。ここで上書きする）
     5066 .demo-fade-btn ／ 7068 .demo-fc-btn ／ 7707 .demo-ls-btn ／ 7727 .demo-lb-btn
   ・これから作るデモのボタンは、class に demo-btn を追加すれば同じデザインになる
   ・対象外：7593 .demo-hn-btn（メニューの文字）／7504 .demo-sh-submit（検索の文字）／7211 .demo-pl-btn（もともと塗りつぶし）
   ・記事の中の指定（.demo-lb-btn など）より強くするため、.single .content を前に記述している
   ========================================= */
.single .content .demo-btn,
.single .content .demo-fade-btn,
.single .content .demo-fc-btn,
.single .content .demo-ls-btn,
.single .content .demo-lb-btn {
	border: 1px solid var(--mfw-line, #eaeaea);
	border-radius: 999px;        /* 両端が半円のカプセル形 */
	background: var(--mfw-line, #eaeaea);         /* 表の見出し行と同じ色 */
	color: var(--mfw-c-title, #2a2a2a);
	transition: background-color .2s ease, border-color .2s ease;
}
.single .content .demo-btn:hover,
.single .content .demo-fade-btn:hover,
.single .content .demo-fc-btn:hover,
.single .content .demo-ls-btn:hover,
.single .content .demo-lb-btn:hover {
	border-color: var(--mfw-c-faint, #bfbfbf);
	background: var(--mfw-c-faint, #bfbfbf);         /* マウスを乗せたときは少し濃く */
	color: var(--mfw-c-title, #2a2a2a);
}
/* 押せないとき（7068 同意チェックボタン：チェックを入れる前） */
.single .content .demo-btn:disabled,
.single .content .demo-fc-btn:disabled {
	border-color: var(--mfw-side-bg, #f9f9f9);
	background: var(--mfw-side-bg, #f9f9f9);         /* 押せるときより薄い塗り（3%。罫線だけにすると見出しと同じ形になるため） */
	color: var(--mfw-c-faint, #bfbfbf);
	cursor: not-allowed;
}

/* =========================================
   HCB：長いコードを途中まで表示（js/single.js が .has-fold／.is-fold を付けたものだけ）
   ・.hcb_wrap を2つ重ねて、HCB（1.x・2.x）・prism.css の pre の指定より強くしている
   ========================================= */
.hcb_wrap.hcb_wrap.has-fold {
	position: relative;
	--hcb-fold-height: 320px;          /* ★ 畳んだときの高さ（js/single.js の FOLD_HEIGHT と同じ値に） */
}
.hcb_wrap.hcb_wrap.has-fold > pre {
	transition: max-height .45s ease;  /* ★ 開閉の速さ */
	overflow-y: hidden;                /* 縦のスクロールバーは出さない（高さは js/single.js が中身に合わせる。横のスクロールはそのまま） */
}
.hcb_wrap.hcb_wrap.is-fold > pre {
	max-height: var(--hcb-fold-height);
	overflow-y: hidden;
}
/* 下のフェード（色はコードブロックの背景 --mfw-code-bg に合わせる） */
.hcb_wrap.hcb_wrap.is-fold::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	height: 80px;
	background: linear-gradient(transparent, var(--mfw-code-bg, #fdfdfd));
	pointer-events: none;
}
/* 枠の外・右下のボタン：アイコン＋SHOW ALL ／ CLOSE（文字の太さ・字間は本文の RELATED カードの見出し .blog-card-sp .type-x と同じ。大きさは 90%） */
button.hcb-fold-btn {
	display: flex;
	align-items: center;
	gap: .4em;
	width: fit-content;
	margin: -18px 0 24px auto;         /* コードブロックの下の余白（24px）に食い込ませて、枠から 6px 下に */
	padding: 0;
	border: 0;
	background: none;
	color: var(--mfw-c-title, #2a2a2a);
	font-family: 'Montserrat', sans-serif;
	font-size: 90%;                    /* 10.8px */
	font-weight: 500;                  /* RELATED カードの見出しと同じ */
	letter-spacing: -0.05em;           /* RELATED カードの見出しと同じ */
	line-height: 1;
	cursor: pointer;
}
button.hcb-fold-btn i {
	color: var(--mfw-c-sub, #949494);
}
button.hcb-fold-btn:hover,
button.hcb-fold-btn:hover i {
	color: var(--mfw-c-faint, #bfbfbf);                    /* ふつうのリンクのマウスオンと同じ（薄くなる） */
}
@media (prefers-reduced-motion: reduce) {
	.hcb_wrap.hcb_wrap.has-fold > pre {
		transition: none;
	}
}

/* =====================================================================
   記事ページの前後リンク（functions.php の memo_post_nav()）
   ・左：← NEWER POST（新しい記事）／右：OLDER POST →（古い記事）
   ・PC（マウスのある端末）：タイトルはマウスオンで表示
   ・スマホ（hover: none）：タイトルを常に表示
   ===================================================================== */
.memo-postnavi {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.memo-postnavi__item {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  color: var(--mfw-c-body, #5f5f5f);
  text-decoration: none;
  border: 0;                 /* テーマのリンクの下線（.content a の border-bottom）を消す */
}
.memo-postnavi__item--older {
  text-align: right;
}

/* ラベル：DATE／CATEGORIES と同じ書式 */
.memo-postnavi__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
.memo-postnavi__label i {
  color: var(--mfw-c-sub, #949494);            /* アイコンの色 */
}
.memo-postnavi__item--newer .memo-postnavi__label i {
  margin-right: .5em;
}
.memo-postnavi__item--older .memo-postnavi__label i {
  margin-left: .5em;
}

/* タイトル：本文の書体のまま細く */
.memo-postnavi__title {
  display: block;
  margin-top: 4px;
  font-size: 90%;
  font-weight: 300;
  line-height: 1.5;
  white-space: nowrap;       /* 1行に収める */
  overflow: hidden;
  text-overflow: ellipsis;   /* はみ出した分は「…」 */
}

/* 記事がない側 */
.memo-postnavi__item.is-none,
.memo-postnavi__item.is-none .memo-postnavi__label i {
  color: var(--mfw-c-faint, #bfbfbf);
}

/* マウスオン：ラベルとアイコンが薄くなる（タイトルは読めるよう濃いまま） */
a.memo-postnavi__item:hover .memo-postnavi__label,
a.memo-postnavi__item:hover .memo-postnavi__label i {
  color: var(--mfw-c-faint, #bfbfbf);
}

/* マウスのある端末だけ、タイトルをマウスオンで表示 */
@media (hover: hover) {
  .memo-postnavi__title {
    opacity: 0;
    transition: opacity .3s;
  }
  a.memo-postnavi__item:hover .memo-postnavi__title,
  a.memo-postnavi__item:focus-visible .memo-postnavi__title {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .memo-postnavi__title {
    transition: none;
  }
}

/*	Phosphor アイコン
	・フォントとクラスは css/phosphor.css。ここは Font Awesome の指定を Phosphor に替える所だけ
================================*/
/* 検索ボタン：虫眼鏡を Phosphor の ph-magnifying-glass に
   ・ボタンの文字は functions.php の memo_search_form() の value="&#xe30c"
   ・上の .search_container input[type="submit"] の Font Awesome の指定を、ここで上書きする */
.search_container input[type="submit"] {
font-family: "Phosphor MEMO";
font-weight: normal; /* Phosphor は太さ 1種類だけ */
}

/* =========================================================================
   MEMOFOLIO：ウィンドウ型
   ・対象は memo_is_folio() のページ（トップ・記事・一覧・検索・固定ページ・404。body.mf-window。header.php で付ける）
   ・上の指定を body.mf-window から書いて上書きしている
   ・3つに分けている
     1. 見た目（文字・色・大きさ・メニューの形）：全部の幅
     2. ウィンドウの枠（768px 以上）：1色の背景に角丸の白いウィンドウ。中は左にナビ・右に中身の2列。ページ全体はスクロールせず列の中だけ
     3. 1025px 以上の記事ページの目次の列／1024px 以下の目次（本文の最後）／767px 以下（スマホ）の枠なし1列
        スマホの並び：ロゴ・メニュー → 検索窓 → パスの帯と中身 → POPULAR POSTS などのリンク → コピーライト
   ・コードブロック（HCB）の色は css/hcb-palette-light.css、リンクカードの文字・ファビコンは css/link-card.css の最後
   ========================================================================= */
:root {
	--mfw-w: 1107px;          /* ★ ウィンドウの最大幅。左の列 200＋本文の列 692（本文 612＋左右 40×2）＋目次 200＋スクロールバー約 15。右に余りが出ないので左寄せのまま真ん中に見える */
	--mfw-side: 200px;        /* ★ 左の列（ナビ）の幅 */
	--mfw-toc: var(--mfw-side); /* ★ 記事ページの目次の列の幅：左の列とそろえる */
	--mfw-mt: 36px;           /* ★ ウィンドウの上の余白 */
	--mfw-mb: 56px;           /* ★ ウィンドウの下の余白（コピーライトを置く） */
	--mfw-mx: 48px;           /* ★ 画面が狭いときの左右の最小の余白 */
	--mfw-radius: 8px;        /* ★ ウィンドウの角丸 */
	--mfw-head-h: 56px;       /* ★ 右の列の上の帯の高さ */
	--mfw-pad: 40px;          /* ★ 右の列の左右の余白 */
	--mfw-ad-max: 600px;      /* ★ 広告の最大幅（記事ページの本文の列と同じくらい。広告は読み込んだときの箱の幅で大きさが決まる） */
	--mfw-panel: #ffffff;     /* ★ ウィンドウの地の色 */
	--mfw-code-bg: color-mix(in srgb, rgb(var(--mfw-ink)) 1%, var(--mfw-panel)); /* ★ コードブロックの地（#2a2a2a の 1% を白に混ぜた #fdfdfd。左の列の地 3% より薄くして分ける。白に戻すなら var(--mfw-panel)。長いコードの下のぼかしもこの色で終わるので、透明にはしない） */
	--mfw-side-bg: rgba(var(--mfw-ink), 0.03); /* ★ 左の列の地の色（3%） */
	--mfw-line: rgba(var(--mfw-ink), 0.1);     /* ★ 区切り線（10%） */
	--mfw-fill: rgba(var(--mfw-ink), 0.06);    /* ★ ボタンなどの薄い塗り（ページ送りの箱。6%） */
	/* 色：1色（#2a2a2a）の濃さだけで段階を作る。濃さを変えるときは下の数字だけ */
	--mfw-ink: 42, 42, 42;    /* ★ ベースの色 #2a2a2a（rgb の3つの数字） */
	--mfw-c-title: rgba(var(--mfw-ink), 1);    /* ★ タイトル（記事名・サイト名・今のパス） */
	--mfw-c-body: rgba(var(--mfw-ink), 0.75);  /* ★ 本文・メニュー・リンク */
	--mfw-c-sub: rgba(var(--mfw-ink), 0.5);    /* ★ 補足（日付・カテゴリ・説明・記事の数） */
	--mfw-c-faint: rgba(var(--mfw-ink), 0.3);  /* ★ いちばん薄い（アイコン・星・区切りの / ・マウスオン） */
	--mfw-en: "DM Mono", "M PLUS Rounded 1c", sans-serif; /* ★【テスト】英字は DM Mono、日本語は M PLUS Rounded 1c（DM Mono に日本語が無いので次のフォントで出る） */
	--mfw-search-y: 3px;      /* ★ 右上の検索窓を下げる量（下線をロゴの文字の下にそろえる） */
	--mfw-path-y: 7px;        /* ★ 上の帯のパスを下げる量（ロゴの文字の下にそろえる） */
	--mfw-logo-x: -1px;       /* ★ ロゴ（MEMORANDUM）の左の微調整。M の左の空き 1.7px と T の 0.8px の差 */
	--mfw-col-pad: 28px;      /* ★ 左の列・目次の列の中の余白（上・左右） */
	--mfw-read: 612px;        /* ★ 記事・固定ページの本文の幅 */
	--mfw-ls: 0;              /* ★【テスト】文字の詰め具合（ウィンドウの中は全部この値。0＝DM Mono の元の間隔。詰めるなら -0.02em など） */
	--mfw-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* ★ 等幅（ナビ・帯・コピーライト） */
}

/* =========================================================
   1. 見た目：全部の幅
   ========================================================= */
	/* サイト名・テーマ名：小さく（看板ではなくウィンドウのタイトルくらい） */
	body.mf-window h1.type-TTL {
		font-family: var(--mfw-mono);
		margin-left: 0;         /* 上の -0.1em を止めて、テーマ名と左をそろえる（下の --mfw-logo-x で調整） */
		font-size: 18px;        /* ★ 左の列のサイト名 */
		font-weight: 600;
		letter-spacing: 0;
	}
	/* テーマ名：1 行に収まるよう 10px・折り返さない */
	body.mf-window .memofolio-theme {
		font-family: var(--mfw-mono);
		font-size: 10px;
		white-space: nowrap;
		font-weight: 400;
		color: var(--mfw-c-sub);
		text-transform: none;
	}

	/* CATEGORIES／ARCHIVES／TAGS と開いた一覧・下のリンク：等幅 12px */
	body.mf-window .headnavi {
		margin-top: 40px;       /* ★ CATEGORIES の1行目を右の列の1行目（一覧・記事のタイトル）と同じ高さに */
	}
	body.mf-window .memo-hn-tabs_bar,
	body.mf-window .memo-hn-tabs_panel .memo-hn,
	body.mf-window .memofolio-side_sub {
		font-family: var(--mfw-mono);
		font-size: 12px;
	}
	body.mf-window .memofolio-side_sub {
		margin-top: 0;          /* ★ CATEGORIES…と POPULAR POSTS…の間をあけず、1つの並びに（項目の間は .sidemenu p の 6px） */
	}
	body.mf-window .memofolio-side_sub .sidemenu {
		margin-top: 0;          /* 上の .sidemenu の 30px を止める */
	}

	/* 右の列の上の帯：パス（functions.php の memo_folio_head()）。スクロールしても上に残る */
	body.mf-window .memofolio-head {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1em;
		height: var(--mfw-head-h);
		margin: 0 calc(var(--mfw-pad) * -1) 24px; /* 一覧の左右の余白の外まで線を引く */
		padding: 0 var(--mfw-pad);
		background: var(--mfw-panel);
		border-bottom: 1px solid var(--mfw-line);
		font-family: var(--mfw-mono);
		font-size: 12px;
		color: var(--mfw-c-title);
	}
	body.mf-window .memofolio-head p {
		margin: 0;
		text-transform: uppercase; /* パスを大文字に */
	}
	/* パスの文字の下の線を、左の列のロゴ（MEMORANDUM）の文字の下の線にそろえる（帯の真ん中のままだと約 7px 上） */
	body.mf-window .memofolio-head_path {
		position: relative;
		top: var(--mfw-path-y);
	}
	/* パスの区切り（旧 Mac OS の「:」）：いちばん薄い色で、前後はつめる */
	body.mf-window .memofolio-head_sep {
		color: var(--mfw-c-faint);
	}
	/* パスのリンク：先頭の家のアイコン＝トップ、記事のカテゴリ、月の一覧の年、2ページ目以降の1つ手前（functions.php の memo_folio_path_parts()）
	   ・見た目はほかの区切りの文字と同じ（下線なし）。マウスオンでいちばん薄く（ほかのリンクと同じ） */
	body.mf-window .memofolio-head_path a {
		text-decoration: none;
		border-bottom: 0;
	}
	/* 家のアイコン：大きさ・位置は phosphor.css の --ph-size・--ph-shift のまま */
	body.mf-window .memofolio-head_home {
		display: inline-block;
	}
	body.mf-window .memofolio-head_path span {
		color: var(--mfw-c-sub);
	}
	body.mf-window .memofolio-search .searchform {
		width: 100%;
		margin: 0;
		position: relative;
		top: var(--mfw-search-y); /* ★ 下線をロゴ・パスの文字の下の線にそろえる */
	}
	body.mf-window .memofolio-search .search_container {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	body.mf-window .memofolio-search .search_container input[type="submit"] {
		flex: 0 0 auto;
		padding: 0;
	}
	body.mf-window .search_container input[type="text"],
	body.mf-window .search_container input[type="text"]:focus {
		flex: 1 1 auto;
		min-width: 0;
		background: transparent;                    /* 上の白をやめる */
		border-bottom: 1px solid var(--mfw-c-faint);
		font-size: 12px;
		color: var(--mfw-c-title);
		text-transform: none;
	}
	body.mf-window .search_container input[type="text"]:focus {
		border-bottom-color: var(--mfw-c-sub);
	}
	body.mf-window input:-webkit-autofill {
		box-shadow: 0 0 0 1000px var(--mfw-panel) inset; /* 自動入力のときの地もウィンドウの色に */
	}
	/* 左の列のリンク（POPULAR POSTS…）：文字の頭を左の列の左（ロゴと同じ線）にそろえる */
	body.mf-window .memofolio-side_sub .sidemenu p {
		padding-left: 0;
	}
	body.mf-window .memofolio-side_sub .sidemenu p a {
		font-size: 12px;        /* ★ .memofolio-side_sub と同じ大きさ */
		line-height: 1.1em;     /* 上の .sidemenu と同じ */
	}
	body.mf-window .memofolio-side_sub .sidemenu a {
		white-space: nowrap;
	}

	/* 一覧：右の列の幅いっぱい（612px の上限は外す。1025px 以上は 3a で点線の左まで） */
	body.mf-window .container01 {
		width: auto;            /* 上の 960〜1024px の幅 960px を止める */
		max-width: none;
		margin: 0;
		padding: 0 var(--mfw-pad) 40px;
	}
	/* 上の 768px 以上の「一覧 70%／右サイド 25%」の横並び・上の余白 90px を止める */
	body.mf-window .container01-1 {
		float: none;
		width: auto;
		margin-top: 0;
		padding-right: 0;
	}
	/* 一覧の記事と記事の間：24px（上の margin-bottom 14px と次の記事の padding-top 10px）
	   ・1件分（タイトル 20＋日付 13＋間 24）が 57px＝左のメニュー3行分（19px×3）になり、左右の行のリズムがそろう */
	body.mf-window .postlist02 {
		margin-bottom: 14px;    /* ★ 上の 15px から 1px 詰める（次の記事の margin-top 10px とは重なるので、大きいほうの 14px が効く） */
	}
	/* 広告：囲みの div（functions.php の memo_ad_html() の .googlead）に最大幅
	   ・AdSense のレスポンシブ・インフィード（fluid）は、読み込んだときの囲みの幅で広告の大きさを決めるので、囲みを絞れば広告も絞れる
	   ・ins（広告そのもの）には指定しない。display: none で隠さない（幅 0 エラーになる） */
	body.mf-window .googlead {
		max-width: var(--mfw-ad-max);
	}
	/* 広告（bannerzone2）の上下の余白を、どのページも「上 25px・下 15px」にそろえる
	   ・上：固定ページのタイトル（h1・COLOR CRUSH の .memo-colors-title）は 30px なので、すぐ下に広告があるときだけ一覧と同じ 25px に
	   ・下：固定ページの本文の囲み .news2 の上の 40px を、すぐ上に広告があるときだけ 5px に（広告の下の 15px＋5px＋本文の1段落目の上の 5px＝25px。一覧の1件目までと同じ）
	   ・page.php（CONTACT など）は article の中なので、.news の直下に限らない
	   ・広告が無いとき（カスタマイザーで OFF・ウィジェットが空）は今のまま */
	body.mf-window .news :is(h1.memofolio-page-title, .memo-colors-title):has(+ .googlead) {
		margin-bottom: 25px;
	}
	body.mf-window .news .googlead + .news2 {
		padding-top: 5px;
	}

	body.mf-window .footer-inner,
	body.mf-window .copyright {
		float: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}
	body.mf-window .copyright p {
		margin: 0;
		line-height: 1.2;
		font-family: var(--mfw-mono);
		font-size: 11px;
	}


	/* ---------------------------------------------------------
	   文字の色：#2a2a2a の濃さの違いだけで組む（タイトル 1／本文 0.75／補足 0.5／いちばん薄い 0.3）
	   ・リンクは基本「まわりの文字と同じ色」、マウスオンでいちばん薄く
	   --------------------------------------------------------- */
	body.mf-window {
		color: var(--mfw-c-body);
	}
	body.mf-window a,
	body.mf-window .postlist02 a,
	body.mf-window .memofolio-side a {
		color: inherit;
	}
	body.mf-window a:hover,
	body.mf-window .postlist02 a:hover,
	body.mf-window .memofolio-side a:hover,
	body.mf-window .memo-hn-tabs_btn:hover {
		color: var(--mfw-c-faint);
	}
	/* タイトル */
	body.mf-window h1.type-TTL,
	body.mf-window .postlist02-title {
		color: var(--mfw-c-title);
	}
	/* 本文・メニュー・リンク */
	body.mf-window .memo-hn-tabs_bar,
	body.mf-window .memo-hn-tabs_panel,
	body.mf-window .memofolio-side_sub {
		color: var(--mfw-c-body);
	}
	/* 補足 */
	body.mf-window .memofolio-theme,
	body.mf-window .postlist02-meta,
	body.mf-window .postlist02-meta h1 {
		color: var(--mfw-c-sub);
	}
	/* いちばん薄い */
	body.mf-window .memofolio-head_path span,
	body.mf-window .search_container input[type="submit"] {
		color: var(--mfw-c-faint);
	}
	body.mf-window .copyright p {
		color: var(--mfw-c-sub);
	}

	/* ページ送り（WP-PageNavi）
	   ・ふつう：薄い塗り（--mfw-fill）に本文の濃さの文字
	   ・今のページ・マウスオン：タイトルの濃さ（#2a2a2a）の塗りに白文字 */
	body.mf-window .wp-pagenavi a,
	body.mf-window .wp-pagenavi span {
		color: var(--mfw-c-body);
		background-color: var(--mfw-fill);
		border-color: transparent;
	}
	body.mf-window .wp-pagenavi a:hover,
	body.mf-window .wp-pagenavi span.current {
		color: #ffffff;
		background-color: var(--mfw-c-title);
		border-color: var(--mfw-c-title);
	}

	/* 【テスト】英字を全部 DM Mono に（Montserrat・等幅・Rounded の英字をまとめて上書き）
	   ・アイコンフォント（Phosphor の ph-・Font Awesome の fa-）と検索ボタン（Phosphor の文字）は除く
	   ・DM Mono の太さは 300・400・500 だけ（css/fonts.css）。600・700 の所は 500 に（ブラウザが太字を作ると崩れるため） */
	body.mf-window,
	body.mf-window *:not([class*="ph-"]):not([class*="fa-"]):not(input[type="submit"]) {
		font-family: var(--mfw-en) !important;
		letter-spacing: var(--mfw-ls) !important; /* 詰め具合を全部そろえる（上の -0.05em などは Montserrat 用） */
	}
	body.mf-window b,
	body.mf-window strong {
		font-weight: 500;
	}
	/* サイト名（ロゴ）だけ Montserrat（DM Mono の上書きより強い指定にしている） */
	body.mf-window .memofolio-side .page-header h1.type-TTL,
	body.mf-window .memofolio-side .page-header h1.type-TTL a {
		font-family: 'Montserrat', sans-serif !important;
		font-weight: 600;
		letter-spacing: -0.05em !important;  /* ★ ロゴの詰め */
	}
	body.mf-window .memofolio-side .page-header h1.type-TTL {
		margin-left: var(--mfw-logo-x); /* ★ ロゴの左の位置の微調整（M の左の空きの分。テーマ名の T とそろえる） */
	}

	/* ---------------------------------------------------------
	   CATEGORIES／ARCHIVES／TAGS：左のリンク（POPULAR POSTS…）と同じ形で縦に並べ、
	   押した見出しのすぐ下に一覧を開く（下のメニューは押し下げられる）
	   ・HTML は「見出し3つ（.memo-hn-tabs_bar）→ 一覧3つ」の順なので、bar を display: contents にして order で
	     「見出し → その一覧」の順に並べ直す
	   --------------------------------------------------------- */
	body.mf-window .memo-hn-tabs {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	body.mf-window .memo-hn-tabs_bar {
		display: contents;
	}
	body.mf-window .memo-hn-tabs_bar,
	body.mf-window .memo-hn-tabs_btn {
		font-size: 12px;
		font-weight: 500;
		line-height: 1.1em;     /* 上の .sidemenu と同じ */
	}
	body.mf-window .memo-hn-tabs_btn {
		margin: 6px 0 0;        /* 上の .sidemenu p と同じ間隔 */
		text-align: left;
	}
	body.mf-window .memo-hn-tabs_btn[aria-controls="memo-hn-categories"] { order: 1; margin-top: 0; }
	body.mf-window #memo-hn-categories                                    { order: 2; }
	body.mf-window .memo-hn-tabs_btn[aria-controls="memo-hn-archives"]   { order: 3; }
	body.mf-window #memo-hn-archives                                      { order: 4; }
	body.mf-window .memo-hn-tabs_btn[aria-controls="memo-hn-tags"]       { order: 5; }
	body.mf-window #memo-hn-tags                                          { order: 6; }
	/* 開いている見出し：濃く（太さは変えない。DM Mono に 700 が無い） */
	body.mf-window .memo-hn-tabs_btn[aria-expanded="true"] {
		font-weight: 500;
		color: var(--mfw-c-title);
	}
	/* 中に一覧があるメニュー（CATEGORIES／ARCHIVES／TAGS）だけ、右上に小さなアスタリスク
	   ・押すと開くものと1枚のページ（POPULAR POSTS…）の見分け。いちばん薄い色で、開いているときは見出しと同じ濃さ */
	body.mf-window .memo-hn-tabs_btn::after {
		content: "*";
		margin-left: 0.25em;      /* ★ 文字 〜 アスタリスク */
		font-size: 9px;           /* ★ アスタリスクの大きさ */
		line-height: 1;
		vertical-align: 0.35em;   /* ★ 上へずらす量（文字の右上） */
		color: var(--mfw-c-faint);
	}
	body.mf-window .memo-hn-tabs_btn[aria-expanded="true"]::after {
		color: var(--mfw-c-title);
	}
	/* 開いた一覧：1行に1つ、見出しと同じ左から */
	body.mf-window .memo-hn-tabs_panel {
		width: 100%;
	}
	body.mf-window .memo-hn-tabs_panel .recentcategories {
		padding-top: 2px;
		padding-bottom: 4px;
	}
	body.mf-window .memo-hn-tabs_panel .memo-hn {
		margin: 0;
		padding-left: 0;        /* ★ 一覧だけ字下げするなら 1em など */
		font-size: 12px;
		line-height: 1.1em;
		color: var(--mfw-c-sub);
	}
	body.mf-window .memo-hn-tabs_panel .memo-hn li {
		display: block;
		margin: 6px 0 0;
		text-align: left;       /* 上の中央寄せを止める */
	}
	/* 記事の数：名前の後ろに半角1つ分あけて、いちばん薄い色で */
	body.mf-window .memo-hn-tabs_panel .post-count {
		margin-left: 0.6em;
		color: var(--mfw-c-faint);
	}

	/* コピーライトと [ADMIN][README]（ログイン中）を1行に横並び（狭いときは折り返す） */
	body.mf-window .copyright {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 2em;        /* ★ コピーライトと [ADMIN] の間 */
	}

	/* 目次（CONTENTS） */
	body.mf-window .memofolio-toc .memo-toc_title {
		margin: 0 0 10px;
		font-size: 12px;
		font-weight: 500;
		color: var(--mfw-c-title);
	}
	body.mf-window .memofolio-toc .memo-toc_title i {
		color: var(--mfw-c-faint);  /* しおりのアイコン：ほかのアイコンと同じ 30% */
	}
	body.mf-window .memofolio-toc .memo-toc.is-empty .memo-toc_title {
		margin: 0;              /* 見出しが2つ未満の記事は JUST IDLING とだけ出す */
		color: var(--mfw-c-faint);
	}
	body.mf-window .memofolio-toc .memo-toc_list {
		border-left: 1px solid var(--mfw-line);
	}
	body.mf-window .memofolio-toc .memo-toc_item a {
		font-size: 12px;
		line-height: 1.4;
		color: var(--mfw-c-sub);
	}
	body.mf-window .memofolio-toc .memo-toc_h3 a {
		font-size: 11px;
	}
	body.mf-window .memofolio-toc .memo-toc_item a:hover,
	body.mf-window .memofolio-toc .memo-toc_item a.is-current {
		color: var(--mfw-c-title);
	}
	body.mf-window .memofolio-toc .memo-toc_item a.is-current {
		border-left-color: var(--mfw-c-title);
	}
	/* 目次で飛んだとき、見出しが上の帯（sticky）に隠れないように */
	body.mf-window.single .content h2,
	body.mf-window.single .content h3 {
		scroll-margin-top: calc(var(--mfw-head-h) + 20px);
	}

	/* 記事ページの本文の列：上の幅・余白を止める */
	body.mf-window.single .container01,
	body.mf-window.single .container01-1 {
		width: auto;
		max-width: none;
		float: none;
		margin: 0;
	}
	body.mf-window.single .container01 {
		padding: 0 var(--mfw-pad) 40px;
	}
	/* 本文の幅を --mfw-read（612px）に。左寄せ（上の帯のパス・一覧の左と同じ線から始める。余りは右に空く）
	   ・上の帯（.memofolio-head）は列の幅いっぱいのまま（線を端から端まで）なので、帯以外の中身だけ絞る
	   ・真ん中に置くときは margin-left も auto に */
		body.mf-window.single .news > :not(.memofolio-head):not(.googlead) {
		max-width: var(--mfw-read);
		margin-left: 0;
		margin-right: auto;
	}

	/* ---------------------------------------------------------
	   記事の本文：文字の色と大きさをウィンドウのトーンに
	   ・色は #2a2a2a の濃淡（タイトル・見出し 100／本文 75／日付・補足 50／アイコン 30）
	   ・大きさ：タイトル 16px／本文 12px（行間 1.9）／日付の行・NOTICES・SHARE 11px
	   --------------------------------------------------------- */
	/* 記事のタイトル */
	body.mf-window.single .title2 {
		margin-top: 0;
		padding-top: 10px;        /* ★ 一覧の1件目のタイトルと同じ高さから始める（margin だと上の帯の下の 24px と重なって効かないので padding） */
		font-size: 16px;          /* ★ 記事のタイトル */
		line-height: 1.4;
		color: var(--mfw-c-title);
	}
	/* 日付・カテゴリの行 */
	body.mf-window.single .single-meta {
		margin-bottom: 40px;      /* ★ 本文までの間 */
		font-size: 11px;
		color: var(--mfw-c-sub);
	}
	body.mf-window.single .single-meta .date {
		font-size: 11px;
	}
	/* 本文 */
	body.mf-window.single .news .content {
		font-size: 12px;          /* ★ 本文の大きさ */
		line-height: 1.9;         /* ★ 本文の行間 */
		color: var(--mfw-c-body);
	}
	body.mf-window.single .content a {
		color: var(--mfw-c-title);
		border-bottom-color: var(--mfw-line);
	}
	body.mf-window.single .content a:hover {
		color: var(--mfw-c-faint);
	}
	body.mf-window.single .content strong,
	body.mf-window.single .content b {
		color: var(--mfw-c-title);
	}
	/* 見出し [tl01]（角丸の枠） */
	body.mf-window.single h2 .title3 {
		font-size: 13px;
		color: var(--mfw-c-title);
		border-color: var(--mfw-line);
	}
	/* NOTICES・SHARE・前後リンク・RELATED POSTS：補足の大きさと色 */
	body.mf-window.single h1.type-D {
		font-size: 11px;
		color: var(--mfw-c-title);
	}
	body.mf-window.single .notice-row .type-J,
	body.mf-window.single .sharebtn--text {
		font-size: 11px;
		color: var(--mfw-c-sub);
	}
	body.mf-window.single .memo-postnavi__item {
		color: var(--mfw-c-body);
		font-size: 12px;
	}
	body.mf-window.single .memo-postnavi__label {
		font-size: 11px;
		color: var(--mfw-c-sub);
	}
	body.mf-window.single .related_post h3 {
		font-size: 12px;
		color: var(--mfw-c-title);
	}
	body.mf-window.single .related_post li {
		font-size: 12px;
		line-height: 1.5;
		color: var(--mfw-c-body);
	}

	/* ---------------------------------------------------------
	   検索結果（loop-main.php の .postlist02--search：一覧と同じ並び＋抜粋）
	   --------------------------------------------------------- */
	body.mf-window .postlist02--search .postlist02-excerpt {
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.7;
		color: var(--mfw-c-sub);
	}
	body.mf-window .postlist02--search .postlist02-excerpt p {
		margin: 0;
	}
	/* 見つからなかったとき */
	body.mf-window h1.type-200 {
		font-size: 12px;
		color: var(--mfw-c-sub);
	}

	/* ---------------------------------------------------------
	   固定ページ（page.php・PRIVACY POLICY・PROFILE・COLOR CRUSH）と 404
	   ・タイトル（.memofolio-page-title）は記事のタイトルと同じ形（16px・一覧の1行目と同じ高さ）
	   ・本文は記事と同じ 612px・12px（COLOR CRUSH のカラーチャートも。色の四角は折り返す）
	   --------------------------------------------------------- */
	body.mf-window h1.memofolio-page-title {
		margin: 0 0 30px;
		padding-top: 10px;        /* 記事のタイトルと同じ（一覧の1行目の高さ） */
		font-family: var(--mfw-en);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--mfw-c-title);
	}
	body.mf-window:is(.page, .error404):not(.home) .news > :not(.memofolio-head):not(.googlead) {
		max-width: var(--mfw-read);
		margin-left: 0;
		margin-right: auto;
	}
	body.mf-window.page :is(.content, .content2) {
		font-size: 12px;
		line-height: 1.9;
		color: var(--mfw-c-body);
	}
	body.mf-window.page :is(.content, .content2) a {
		color: var(--mfw-c-title);
		border-bottom-color: var(--mfw-line);
	}
	body.mf-window.page :is(.content, .content2) strong {
		color: var(--mfw-c-title);
	}
	/* CONTACT（Contact Form 7）：入力欄は検索窓と同じ下線だけ。項目名は日付の行と同じ 11px・50%
	   ・入力欄：地は透明、線は下だけ 30%（--mfw-c-faint）、入力中は 50%（--mfw-c-sub）。幅は本文と同じ 612px いっぱい
	   ・MESSAGE（textarea）は何行も書くので、下線だけだと範囲がわからない → 四辺に同じ 30% の線（角は四角）
	   ・送信ボタン：ページ送りの今のページと同じ（濃い塗りに白い文字）。マウスオンで 75%
	   ・入力の不備・送信の結果のメッセージ：赤や枠線は使わず、ふつうの文字の色（--mfw-c-title）だけ。入力の不備は欄の右上 */
	body.mf-window .wpcf7 {
		font-family: var(--mfw-en);
		font-weight: 400;
	}
	body.mf-window .wpcf7 form ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	body.mf-window .wpcf7 form li {
		position: relative;
		margin: 0;
		padding: 0;
	}
	body.mf-window .wpcf7 form li.left p {
		margin: 22px 0 4px;     /* ★ 項目と項目の間 */
		font-size: 11px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--mfw-c-sub);
		text-transform: uppercase;
	}
	body.mf-window .wpcf7 form ul:first-child li.left p {
		margin-top: 5px;        /* 本文の段落の上と同じ（広告・タイトルからの間をほかの固定ページとそろえる） */
	}
	body.mf-window .wpcf7 form li.right p {
		margin: 0;
	}
	body.mf-window .wpcf7 form :is(input[type="text"], input[type="email"], textarea) {
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 6px 0;         /* ★ 入力欄の上下 */
		border: 0;
		border-bottom: 1px solid var(--mfw-c-faint);
		border-radius: 0;
		background: transparent;
		font-size: 12px;
		line-height: 1.6;
		color: var(--mfw-c-title);
		text-transform: none;
		vertical-align: baseline;
		outline: none;
		transition: border-color 0.2s;
	}
	body.mf-window .wpcf7 form textarea.wpcf7-textarea {
		height: 150px;          /* ★ MESSAGE の高さ（6行くらい） */
		padding: 8px 10px;
		border: 1px solid var(--mfw-c-faint);
		resize: vertical;
	}
	body.mf-window .wpcf7 form :is(input[type="text"], input[type="email"], textarea):focus {
		border-color: var(--mfw-c-sub);
	}
	body.mf-window .wpcf7 form input[type="submit"] {
		height: 28px;
		margin-top: 28px;       /* ★ MESSAGE 〜 ボタン */
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		background: var(--mfw-c-title);
		font-family: var(--mfw-en);
		font-size: 11px;
		font-weight: 400;
		letter-spacing: var(--mfw-ls);
		color: #ffffff;
		text-transform: uppercase;
		transition: background-color 0.2s;
	}
	body.mf-window .wpcf7 form input[type="submit"]:hover {
		background: var(--mfw-c-body);
	}
	body.mf-window .wpcf7 form span.wpcf7-not-valid-tip {
		top: auto;
		bottom: 100%;           /* 欄の上（項目名の行の右） */
		width: 100%;
		margin-bottom: 4px;
		font-size: 11px;
		line-height: 1.4;
		color: var(--mfw-c-title);
	}
	body.mf-window .wpcf7 form .wpcf7-response-output {
		width: 100%;
		margin: 20px 0 0 !important;
		padding: 0;
		border: 0;              /* CF7 の送信成功・エラーの色の枠も出さない */
		font-size: 12px;
		font-weight: 400;
		line-height: 1.6;
		color: var(--mfw-c-title);
		text-align: left;
	}

	/* COLOR CRUSH：タイトルの横の UPDATED（記事の日付の行と同じ） */
	body.mf-window .memo-colors-title {
		display: flex;
		align-items: baseline;
		gap: 1em;
		margin-bottom: 30px;
	}
	/* トップ・一覧・検索結果のタイトル：タイトルと種類を1行に（LATEST POSTS  TOTAL 83POSTS／DESIGN  CATEGORIES など）
	   ・文字の下端をそろえる。大文字（上の帯のパスと同じ） */
	body.mf-window .memofolio-title-row {
		display: flex;
		align-items: baseline;
		gap: 1em;               /* ★ タイトル 〜 種類 */
		margin-bottom: 25px;    /* ★ 一覧の1件目のタイトルが左の POPULAR POSTS と同じ高さに来る値（その後も 57px＝メニュー3行分ずつで左右がそろう） */
		text-transform: uppercase;
	}
	body.mf-window .memofolio-title-row h1.memofolio-page-title {
		margin-bottom: 0;
		min-width: 0;           /* 長いカテゴリ名でも種類を押し出さない */
	}
	body.mf-window .memofolio-title-label {
		flex: 0 0 auto;
		margin: 0;
		font-size: 11px;        /* ★ 記事の日付の行と同じ */
		white-space: nowrap;
		color: var(--mfw-c-sub);
	}
	body.mf-window .memo-colors-title h1.memofolio-page-title {
		margin-bottom: 0;
	}
	body.mf-window .memo-colors-title .single-meta {
		margin: 0;
		font-size: 11px;
		color: var(--mfw-c-sub);
	}
	/* PROFILE の CONTACT：本文のリンクと同じ大きさ */
	body.mf-window.page .news2 > .sidemenu {
		margin-top: 20px;
		font-size: 12px;
	}
	/* POPULAR POSTS の集計期間など */
	body.mf-window .news > p.type-x {
		font-size: 11px;
		color: var(--mfw-c-sub);
	}
	/* 404 */
	body.mf-window .memofolio-404 {
		font-size: 12px;
		color: var(--mfw-c-sub);
	}

	/* テーマ名：ロゴのすぐ下（1025px 以上は 0。下の 3a） */
	body.mf-window .memofolio-theme {
		margin: 4px 0 0;
		line-height: 1.2em;
	}
	/* 記事ページ：上の .single .container01 の flex（本文と右サイドの横並び）を止める */
	body.mf-window.single .container01 {
		display: block;
	}

	/* ---------------------------------------------------------
	   先頭へ戻るボタン（header.php の .memofolio-totop・js/memofolio.js）
	   ・768px 以上：ウィンドウの右下（スクロールバーの左）。記事ページも同じ（目次の列の下に重なる）。右の列を下へスクロールしたら出る（.is-shown）
	   ・767px 以下：画面の右下に固定（下の 3c）。ページ全体を下へスクロールしたら出る
	   --------------------------------------------------------- */
	body.mf-window .memofolio-totop {
		position: absolute;       /* 基準はウィンドウ（.memofolio） */
		right: calc(var(--mfw-sb, 15px) + 20px); /* ★ スクロールバーの左から 20px（--mfw-sb は js/memofolio.js が実際の幅を入れる） */
		bottom: 20px;             /* ★ */
		z-index: 6;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 1px solid var(--mfw-line);
		border-radius: 4px;
		background: var(--mfw-panel);
		color: var(--mfw-c-sub);
		font-size: 14px;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s, color 0.3s;
	}
	body.mf-window .memofolio-totop.is-shown {
		opacity: 1;
		visibility: visible;
	}
	body.mf-window .memofolio-totop:hover {
		color: var(--mfw-c-title);
	}
	@media (prefers-reduced-motion: reduce) {
		body.mf-window .memofolio-totop {
			transition: none;
		}
	}


/* =========================================================
   2. ウィンドウの枠：768px 以上（タブレット・PC）
   ========================================================= */
@media (min-width: 768px) {
	/* ページ全体はスクロールさせない（ウィンドウの中の列だけスクロール） */
	html:has(body.mf-window) {
		height: 100%;
		overflow: hidden;
		scrollbar-gutter: auto;
	}
	body.mf-window {
		height: 100%;
		overflow: hidden;
		/* 【テスト】背景：文字のいちばん薄い段階（#2a2a2a の 30%）を白に重ねた1色（≒ #bfbfbf） */
		background: linear-gradient(var(--mfw-c-faint), var(--mfw-c-faint)), #ffffff;
	}

	/* ウィンドウ（左右2列の外枠） */
	body.mf-window .memofolio {
		position: relative; /* 検索窓・先頭へ戻るの位置の基準 */
		display: grid;
		grid-template-columns: var(--mfw-side) minmax(0, 1fr);
		width: min(var(--mfw-w), 100% - var(--mfw-mx) * 2);
		height: calc(100dvh - var(--mfw-mt) - var(--mfw-mb));
		margin: var(--mfw-mt) auto 0;
		background: var(--mfw-panel);
		border-radius: var(--mfw-radius);
		box-shadow:
			0 1px 2px rgba(var(--mfw-ink), 0.05),
			0 12px 40px rgba(var(--mfw-ink), 0.10),
			0 32px 80px rgba(var(--mfw-ink), 0.08);
		overflow: hidden;
	}

	/* 左の列：上から並べ、はみ出したら列の中だけスクロール */
	body.mf-window .memofolio-side {
		position: static;
		width: auto;
		display: block;
		overflow-y: auto;
		background: var(--mfw-side-bg);
		border-right: 1px solid var(--mfw-line);
	}
	body.mf-window .memofolio-side_inner {
		margin: 0;
		padding: var(--mfw-col-pad) var(--mfw-col-pad) 32px; /* ★ 上・左右の余白（--mfw-col-pad） */
	}


	/* 右の列：ウィンドウの中でスクロール */
	body.mf-window .memofolio-main {
		margin-left: 0;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* 検索窓（header.php の .memofolio-search）：ウィンドウの右上に固定。幅は目次の列と同じ（記事ページでは目次の列の上の帯にちょうど重なる）
	   ・トップ・一覧では右の列の上の帯の右に重なる。どのページも同じ位置 */
	body.mf-window .memofolio-search {
		position: absolute;     /* 基準はウィンドウ（.memofolio の position: relative） */
		top: 0;
		right: var(--mfw-sb, 15px); /* 右の列のスクロールバーの左（記事ページは目次の列の上の帯にちょうど重なる。--mfw-sb は js/memofolio.js が実際の幅を入れる） */
		z-index: 6;             /* 上の帯（5）より上 */
		display: flex;
		align-items: center;
		width: var(--mfw-toc);
		height: var(--mfw-head-h);
		padding: 0 var(--mfw-col-pad); /* 目次の列の中と同じ左右の余白 */
		box-sizing: border-box;
	}


	/* フッター：ウィンドウの下の余白に1行。ウィンドウと同じ幅で左寄せ、文字の左は左の列のロゴにそろえる */
	body.mf-window .footer {
		width: min(var(--mfw-w), 100% - var(--mfw-mx) * 2);
		max-width: none;
		height: var(--mfw-mb);
		margin: 0 auto;
		padding: 0 var(--mfw-col-pad); /* 左の列の中の左の余白と同じ（文字の左をロゴにそろえる） */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	/* 右の列：スクロールバーの場所をいつも取っておく（短い記事・一覧でも列の幅が変わらない。右上の検索窓の位置もずれない） */
	body.mf-window .memofolio-main {
		scrollbar-gutter: stable;
	}


	/* 上の .page-header の左右の余白（2em〜2.5em・幅 960px の中央寄せ）を止める */
	body.mf-window .page-header {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	body.mf-window .page-header-inner {
		margin-top: 0;
	}
}

/* 768〜1024px：ウィンドウのまわりの余白を狭く（右の列の幅を取る） */
@media (min-width: 768px) and (max-width: 1024px) {
	:root {
		--mfw-mx: 24px;           /* ★ 左右の余白（PC は 48px） */
		--mfw-mt: 24px;           /* ★ 上の余白（PC は 36px） */
	}
}

/* 右の空いた列の JUST IDLING：1024px 以下は空いた列が無いので出さない（1025px 以上は 3a で出す） */
.memofolio-idle {
	display: none;
}

/* =========================================================
   3a. 1025px 以上だけ：記事ページの目次の列（右の列の中を「本文｜目次」の2つに）
   ========================================================= */
@media (min-width: 1025px) {
	/* テーマ名：ロゴとの間 0（左の列の 1行目を右の列の 1行目にそろえた高さを変えないため） */
	body.mf-window .memofolio-theme {
		margin-top: 0;
	}

	/* 記事ページ：右の列（.memofolio-main）の中を「本文｜目次」に分ける（目次の aside は single.php で main の中）
	   → 本文と目次がいっしょにスクロールし、スクロールバーはウィンドウの右端に1本。目次は sticky で止まる */
	body.mf-window.single .memofolio-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--mfw-toc); /* 本文の列（612＋40×2）｜目次の列（200px）。スクロールバーはこの右 */
		align-items: stretch;   /* 目次の列を本文と同じ高さに伸ばす（sticky が効く範囲＝目次の列の高さ。縦の線も下まで） */
	}
	/* 目次の列：自分ではスクロールしない（右の列といっしょに動く）。中の目次が sticky で止まる */
	body.mf-window .memofolio-toc {
		display: block;
		overflow: visible;      /* ★ auto にすると sticky が効かなくなる（この列の中が基準になる） */
		position: relative;     /* 下の ::before（点線）の位置の基準 */
		font-size: 12px;
	}
	/* 本文と目次の間の縦線：点線
	   ・border の dotted は、ウィンドウが 0.5px の位置に来る幅（1280px など）でにじんで実線に見えるので、
	     グラデーションで「点 2px・間 2px」を描く。上の帯（白い地・sticky）より上に重ねて、帯の所も点線にする */
	body.mf-window .memofolio-toc::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 3;             /* 上の帯（.memofolio-toc_head の 2）より上 */
		width: 1px;
		background-image: linear-gradient(var(--mfw-c-faint) 50%, transparent 50%); /* ★ 色：30% */
		background-size: 1px 4px;   /* ★ 点 2px＋間 2px */
		pointer-events: none;
	}
	/* 記事ページ以外にも、目次の列と同じ位置（右から --mfw-toc＝検索窓の左の端）に同じ点線を引く
	   ・右の列の背景に描く。background-attachment: local で中身と一緒にスクロールし、下まで続く
	   ・上の帯（白い地・sticky）にも同じ点線を描いて、帯の所も切れないように */
	body.mf-window:not(.single) :is(.memofolio-main, .memofolio-head) {
		background-image: linear-gradient(var(--mfw-c-faint) 50%, transparent 50%); /* ★ 色：30%（上の目次の点線と同じ） */
		background-size: 1px 4px;   /* ★ 点 2px＋間 2px */
		background-repeat: repeat-y;
		background-position: right var(--mfw-toc) top 0;
	}
	body.mf-window:not(.single) .memofolio-main {
		background-attachment: local;
	}
	/* 中身は点線の左だけに（記事ページの本文の列と同じ幅。1280px で 612px）。上の帯だけは点線の右の端まで */
	body.mf-window:not(.single) .container01 {
		padding-right: calc(var(--mfw-toc) + var(--mfw-pad));
	}
	body.mf-window:not(.single) .memofolio-head {
		margin-right: calc((var(--mfw-toc) + var(--mfw-pad)) * -1);
		padding-right: calc(var(--mfw-toc) + var(--mfw-pad));
	}
	/* 右の空いた列の JUST IDLING（functions.php の memo_folio_head()）：目次の無い記事の JUST IDLING（js/single.js）と同じ位置・形
	   ・上の帯（sticky）の中に置いて、帯の下の目次の列の位置へ出す。帯と一緒に止まるので、スクロールしても動かない */
	body.mf-window:not(.single) .memofolio-idle {
		display: block;
		position: absolute;
		top: calc(100% + 1px);  /* 上の帯＋下の線のすぐ下 */
		left: calc(100% - var(--mfw-toc));
		box-sizing: border-box;
		width: var(--mfw-toc);
		margin: 0;
		padding: calc(var(--mfw-col-pad) + 4px) var(--mfw-col-pad) 0; /* 目次の CONTENTS と同じ */
		font-size: 12px;
		font-weight: 500;
		line-height: 1.5;
		color: var(--mfw-c-faint); /* 目次の無い記事と同じ 30% */
		text-transform: uppercase;
		pointer-events: none;
	}
	body.mf-window .memofolio-toc_head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		height: var(--mfw-head-h);
		padding: 0 var(--mfw-col-pad);
		box-sizing: content-box; /* 高さ＋下の線 1px＝右の列の上の帯（.memofolio-head）と同じ。線の高さをそろえる */
		background: var(--mfw-panel);
		border-bottom: 1px solid var(--mfw-line);
		color: var(--mfw-c-title);
	}
	/* 目次：上の帯の下で止める。目次が長いときは、ウィンドウの高さ（上の帯の下）に収めて目次の中だけスクロール */
	body.mf-window .memofolio-toc .memo-toc {
		position: sticky;
		top: calc(var(--mfw-head-h) + 1px);   /* 上の帯（.memofolio-toc_head）＋下の線のすぐ下 */
		max-height: calc(100dvh - var(--mfw-mt) - var(--mfw-mb) - var(--mfw-head-h) - 1px); /* ウィンドウの高さ − 上の帯 */
		overflow-y: auto;
		overscroll-behavior: contain;
		box-sizing: border-box;
		margin: 0;
		padding: var(--mfw-col-pad); /* 上・左右とも左の列と同じ */
		padding-top: calc(var(--mfw-col-pad) + 4px); /* ★ CONTENTS を右の列の1行目と同じ高さに */
	}
}

/* =========================================================
   3b. 1024px 以下：記事ページの目次は本文の最後（前後リンク・RELATED POSTS の下）に
   ・single.php の aside.memofolio-toc は本文の列（.container01）の後ろにあるので、grid にしなければ自然に下に来る
   ・上に止めない（sticky なし）。目次で飛ぶ・今の見出しが光るのは js/single.js のまま（ページ全体／右の列のスクロールの両方に対応している）
   ========================================================= */
@media (max-width: 1024px) {
	body.mf-window .memofolio-toc {
		display: block;
		padding: 0 var(--mfw-pad) 40px;
		font-size: 12px;
	}
	body.mf-window .memofolio-toc_head {
		display: none;            /* 1025px 以上で検索窓が重なる帯。ここでは要らない */
	}
	body.mf-window .memofolio-toc:has(.memo-toc.is-empty) {
		display: none;            /* 目次の無い記事の JUST IDLING は、本文の最後には出さない（記事ページ以外と同じく 1025px 以上だけ） */
	}
	body.mf-window .memofolio-toc .memo-toc {
		position: static;
		max-width: var(--mfw-read);
		margin: 0;
		padding: 24px 0 0;
		border-top: 1px solid var(--mfw-line);
	}
}

/* =========================================================
   3c. 767px 以下（スマホ）：枠なしの1列。ページ全体がスクロール
   ・.memofolio を縦の flex にして、左の列の箱（aside・inner）を display: contents で消し、中身を order で並べ替える
   ・先頭へ戻るは .memofolio-totop（画面の右下に固定）
   ========================================================= */
@media (max-width: 767px) {
	:root {
		--mfw-pad: 20px;          /* ★ 左右の余白（PC の右の列は 40px） */
		--mfw-col-pad: 20px;
		--mfw-head-h: 44px;       /* ★ パスの帯の高さ（PC は 56px） */
		--mfw-sp-search: 150px;   /* ★ 検索窓の幅（パスの帯の右に重ねる） */
	}
	body.mf-window {
		background: var(--mfw-panel);
	}
	/* 縦1列：左の列の箱を消して、ロゴ・メニュー（.page-header）とリンク（.memofolio-side_sub）を外枠の並びに直接入れる */
	body.mf-window .memofolio {
		display: flex;
		flex-direction: column;
	}
	body.mf-window :is(.memofolio-side, .memofolio-side_inner) {
		display: contents;
	}
	/* ロゴ・テーマ名・CATEGORIES… */
	body.mf-window .page-header {
		order: 1;
		margin: 0;
		padding: 24px var(--mfw-pad) 0;
	}
	body.mf-window .page-header-inner {
		margin-top: 0;
	}
	body.mf-window h1.type-TTL {
		font-size: 22px;          /* ★ スマホのロゴ（PC は 18px） */
	}
	body.mf-window .headnavi {
		margin-top: 20px;         /* ★ テーマ名 〜 CATEGORIES */
	}
	/* CATEGORIES／ARCHIVES／TAGS：横に1行で並べ、押した見出しの一覧はその行の下に開く（HTML の順のまま）
	   ・768px 以上の縦並び（display: contents と order）を元に戻す
	   ・開いた一覧の名前も横に並べて折り返す */
	body.mf-window .memo-hn-tabs {
		display: block;
	}
	body.mf-window .memo-hn-tabs_bar {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.4em;        /* ★ 見出しと見出しの間 */
		row-gap: 6px;
	}
	body.mf-window .memo-hn-tabs_bar,
	body.mf-window .memo-hn-tabs_btn {
		font-size: 14px;          /* ★ スマホのメニューの文字（PC は 12px） */
	}
	body.mf-window .memo-hn-tabs_btn {
		order: 0;
		margin: 0;
	}
	body.mf-window .memo-hn-tabs_panel .recentcategories {
		padding-top: 10px;        /* ★ 見出しの行 〜 開いた一覧 */
	}
	body.mf-window .memo-hn-tabs_panel .memo-hn {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.2em;        /* ★ 一覧の名前と名前の間 */
		row-gap: 8px;
		font-size: 12px;
	}
	body.mf-window .memo-hn-tabs_panel .memo-hn li {
		margin: 0;
	}
	body.mf-window .memo-hn-tabs_panel .memo-hn > span:has(> .memo-hn_btn) {
		display: none;            /* 一覧の中の見出し（隠しているボタン）の入れ物。横並びの間（gap）が空かないように */
	}
	/* 検索窓：パスの帯の右（HTML では中身の外にあるので、帯と同じ高さの行を中身の前に置き、中身を帯の高さぶん上へ重ねる） */
	body.mf-window .memofolio-search {
		order: 2;
		position: relative;
		z-index: 6;               /* 重なった帯より上 */
		align-self: flex-end;
		display: flex;
		align-items: center;
		width: var(--mfw-sp-search);
		height: var(--mfw-head-h);
		margin: 20px var(--mfw-pad) 0 0; /* ★ 上：メニュー 〜 パスの帯 */
		padding: 0;
	}
	body.mf-window .memofolio-search .searchform {
		top: 0;
		margin: 0;
	}
	/* 中身：パスの帯は上に止めない（止めると、目次で飛んだ見出しが帯の下に隠れる。js/single.js はページ全体のときは上から 20px に止める） */
	body.mf-window .memofolio-main {
		order: 3;
		margin-top: calc(var(--mfw-head-h) * -1); /* 帯を検索窓の行に重ねる */
	}
	body.mf-window .memofolio-head {
		position: static;
		padding-right: calc(var(--mfw-sp-search) + var(--mfw-pad) + 12px); /* パスの文字が検索窓の下に入らないように */
	}
	body.mf-window .memofolio-head_path {
		top: 0;
	}
	/* POPULAR POSTS などのリンク：中身の下に線を引いて */
	body.mf-window .memofolio-side_sub {
		order: 4;
		margin: 0 var(--mfw-pad);
		padding: 24px 0;
		border-top: 1px solid var(--mfw-line);
	}
	body.mf-window .footer {
		margin: 0;
		padding: 0 var(--mfw-pad) 32px;
	}
	/* 先頭へ戻る：画面の右下に固定 */
	body.mf-window .memofolio-totop {
		position: fixed;
		right: 20px;              /* ★ */
		bottom: 20px;             /* ★ */
	}
}

/* =========================================================================
   プラグインの見た目（自分のファイルを持たないもの）
   ・コードブロック（HCB）→ css/hcb-palette-light.css、リンクカード（BACKON LINK CARD）→ css/link-card.css
   ・COLOR CRUSH（BACKON COLORS）のアイコンの差し替えは css/phosphor.css（編集画面でも要るため）
   ========================================================================= */
/* BACKON OUTDATED NOTICE：プラグインの css/outdated.css の色を #2a2a2a の濃淡に */
body.mf-window .memo-outdated-icon {
	color: var(--mfw-c-title);   /* 一覧の爆弾：あえての濃い色 */
}
body.mf-window .memo-outdated {
	border-color: var(--mfw-c-faint); /* 記事の点線の枠 */
}

/* BACKON COLORS（COLOR CRUSH）：プラグインの css/colors.css の文字・アイコン・線の色を #2a2a2a の濃淡に
   ・カラーチャートの色そのもの（.memo-colors__chip の地）は中身なので触らない */
body.mf-window :is(.memo-colors__note, .memo-colors__ref, .memo-colors__ref-text, .memo-colors__ref-link, .memo-colors__all, .memo-colors__png),
body.mf-window a.memo-colors__ref-link:is(:link, :visited) {
	color: var(--mfw-c-body);
}
body.mf-window .memo-colors__no::before, /* :is() の中に ::before は書けないので分ける */
body.mf-window .memo-colors__chip.is-light {
	color: var(--mfw-c-title);
}
body.mf-window :is(.memo-colors__actions i, .memo-colors__empty) {
	color: var(--mfw-c-faint);   /* アイコン：ほかのアイコンと同じ 30% */
}
body.mf-window :is(a.memo-colors__ref-link:hover, .memo-colors__all:hover, .memo-colors__all:hover i, .memo-colors__png:hover, .memo-colors__png:hover i) {
	color: var(--mfw-c-faint);   /* マウスオン：ほかのリンクと同じ */
}
body.mf-window :is(.memo-colors__chip, .memo-colors__all, .memo-colors__png):focus-visible {
	outline-color: var(--mfw-c-title);
}
body.mf-window .memo-colors-toast {
	background: var(--mfw-c-title);
}
body.mf-window .memo-colors__tools {
	border-color: var(--mfw-c-faint);
}

/* BACKON OUTDATED NOTICE：爆弾のアイコンを Phosphor の ph-bomb に
   ・爆弾の HTML はプラグインが出している（<i class="fa-solid fa-bomb">。一覧のタイトルの左と記事の注意書き）。
     プラグインはほかのテーマと共通なので変えずに、テーマの CSS だけで中身を差し替える
   ・Font Awesome 7 は文字を変数（--fa）・フォント名（--fa-family）・太さ（--fa-style）で決めているので、その3つを上書きする（css/all.css が要る） */
.memo-outdated-icon .fa-bomb, /* 一覧：<span class="memo-outdated-icon"> の中の <i> */
.memo-outdated_head .fa-bomb {
--fa: "\ee0a";                /* ph-bomb の文字コード（css/phosphor.css と同じ） */
--fa-family: "Phosphor MEMO";
--fa-style: normal;           /* Phosphor は太さ 1種類だけ（900 のままだとブラウザが無理に太くしようとする） */
font-size: var(--ph-size);    /* ★ ほかのアイコンと同じ大きさ（一覧は外側の span がプラグインの CSS で 80% なので、その 1.15 倍） */
vertical-align: var(--ph-shift);
}