@charset "UTF-8";

:root {
/* フォント指定
  Generic font family: sans-serif, serif, monospace, cursive, fantasy */
  --font-sans-serif: sans-serif; /* ゴシック体 */
  --font-serif: serif; /* 明朝体 */
  --font-monospace: monospace; /* 等幅フォント */
  --font-cursive: cursive; /* 筆記体 */
  --font-fantasy: fantasy; /* 装飾 */

/* フォントサイズ */
  --dropcap_font_size: 3.5em; /* ドロップキャップ文字 */
  --doubles_font_size: 2em; /* 倍角 */
  --hdg_l_font_size: 1.6em; /* 大見出し */
  --hdg_m_font_size: 1.2em; /* 中見出し */
  --hdg_s_font_size: 1em; /* 小見出し */
  --base_font_size: 1em; /* 基準となる本文のフォントサイズ */
  --bq_cite_font_size: .9em; /* blockquote の cite 属性値 */
  --enttag_font_size: .9em; /* エントリータグ */
  --cpright_font_size: .8em; /* 著作権表示 */
  --ackey_font_size: .7em; /* アクセスキー */
  --ruby_font_size: .55em; /* ルビテキスト */

/* 行間 */
  --heading_line_height: 1.5; /* 見出しの行間 */
  --global_line_height: 1.8; /* 本文の行間 */
  --list_item_line_height: 1.5; /* リスト項目の行間 */

/* 色 */
  --bgcolor: #ffffff; /* 背景 */
  --bgsubcolor1: aliceblue; /* 背景サブカラー 1 */
  --bgsubcolor2: lemonchifon; /* 背景サブカラー 2 */
  --bgsubcolor3: honeydew; /* 背景サブカラー 3 */
  --bgcolor_dark1: #001313; /* 背景1 (ダークテーマ) */
  --bgcolor_dark2: #303030; /* 背景2 (ダークテーマ) */
  --bgcolor_dark3: #262626; /* 背景3 (ダークテーマ) */
  --text: #003333; /* 文字 */
  --text_dark: #cccccc; /* 文字 (ダークテーマ) */
  --link_ulcolor: #6699ff; /* リンク下線 */
  --visited_ulcolor: #eecaff; /* 訪問済み下線 */
  --hover_ulcolor: #ff9600; /* マウスオーバー中下線 */
  --link_dark: #8888ee; /* a:link (ダークテーマ) */
  --visited_dark: #ac66ac; /* a:visited (ダークテーマ) */
  --hover_dark: #cc3355; /* a:hover (ダークテーマ) */
  --heading: #000099; /* 見出し */
  --heading_titlecolor: cornflowerblue; /* サイトタイトル用 */
  --heading_shadow: lightskyblue; /* 見出し影 */
  --heading_dark: #ceceee; /* 見出し (ダークテーマ) */
  --shadow_dark: #8888ac; /* 影全般 (ダークテーマ) */
  --border0: lightskyblue; /* 枠の色 */
  --border1: steelblue; /* 引用の枠など */
  --border2: coral; /* 引用の枠 */
  --border3: orchid; /* 引用の枠 */
  --quote_line: steelblue; /* 引用の下線 */
  --citedescription: seagreen; /* 引用元 */
  --ins_del: #666699; /* 挿入と削除 */
  --ruby_color: #003333; /* ルビテキスト */
  --accesskey_color: #9999aa; /* アクセスキー */
  --keywordbgs_color: #eeeeee; /* コンピュータ用語などの背景 */
  --matchbg_color: #ffee99; /* 検索マッチ文字の背景 */
  --inputtext_color: #333366; /* 入力ボックスの文字 */

  --burgertime: .5s; /* ハンバーガーメニューの開閉速度 */
  --common-box-radius: 10px; /* 共通ボックスの角丸半径 */

  color: var(--text);
  font-family: var(--font-sans-serif);
  font-size: var(--base_font_size);
  line-height: var(--global_line_height);
  margin: 0;
  padding: 0;
  
  scroll-behavior: smooth;
}
body {
  background: var(--bgcolor) url("BackStripeBlue") repeat;
  quotes: "\300c" "\300d" "\300e" "\300f" "\ff1c" "\ff1e" "\226a" "\226b" "\201c" "\201d";
  max-width: 57.9em;
  min-width: 24em;
  margin: 2em auto;
}
pre {
  white-space: pre;
  overflow: auto;
  font-family: var(--font-monospace);
  border-color: var(--border0);
  border-width: 1px;
  border-style: dashed;
  margin: .5em;
  padding: .5em;
}
section { /*
  border: 1px dotted orange; */
}
h1, h2, h3, h4, h5, h6,
caption, th,
nav ul[title]::before, #link-navigation-box[title]::before {
  font-family: var(--font-sans-serif);
  line-height: var(--heading_line_height);
  color: var(--heading);
  font-weight: normal;
  text-shadow: .1em .1em .1em var(--heading_shadow);
  clear: both;
  margin-bottom: .4em;
}
h1 {
  font-size: var(--hdg_l_font_size);
}
h2 {
  font-size: var(--hdg_m_font_size);
  padding-left: 0;
  margin-left: .5em;
}
h3 {
  background: url("h3") left no-repeat;
  padding-left: 1em;
  margin-left: 0;
}
h4 {
  background: url("h4") left no-repeat;
  padding-left: 1em;
  margin-left: 0;
}
h5 {
  font-size: var(--hdg_s_font_size);
  margin-left: 1em;
}
h6 {
  font-size: var(--hdg_s_font_size);
  line-height: inherit;
  margin-left: 1.5em;
}
hr {
  color: var(--border0);
  display: none;
  height: 1px;
  width: 100%;
}
address {
  text-align: end;
  border-color: var(--border0);
  border-width: 1px 0 0 0;
  border-style: none;
}
blockquote, dl * {
  border-color: var(--border1);
}
blockquote blockquote, dl dl * {
  border-color: var(--border2);
}
blockquote blockquote blockquote, dl dl dl * {
  border-color: var(--border3);
}
blockquote {
  background: linear-gradient(to left, var(--bgsubcolor1), 10%, var(--bgcolor));
  border-style: solid;
  border-width: 0 0 0 2px;
  margin: 1em 2em ;
}
blockquote > p {
  margin: 0 1em;
}
blockquote[title]::before, blockquote[cite]::after {
  display: block;
  font-size: var(--bq_cite_font_size);
}
blockquote[title]::before {
  color: var(--citedescription);
  content: attr(title);
  margin: 0 .2em .6em;
  text-align: start;
}
blockquote[cite]::after {
  color: var(--citedescription);
  content: attr(cite);
  margin: .6em .2em 0;
  text-align: end;
}
ol, ul, menu, dir {
  margin: 0 0 .5em 1em;
  padding: 0;
}
ol {
  list-style: outside decimal;
}
ul, menu, dir {
  list-style: outside url("li1") disc;
}
ul ul {
  list-style: outside url("li2") disc;
}
ul ul ul {
  list-style: outside url("li3") disc;
}
ul ul ul ul {
  list-style: outside url("li4") disc;
}
li {
  line-height: var(--list_item_line_height);
}
dl {
  list-style: outside none;
  margin: 0 0 0 1em;
}
dl dl {
  margin: 0 0 0 .5em;
}
dt {
  color: var(--border1);
  text-shadow: .1em .1em .1em var(--border0);
  padding: 0;
  margin: 0 0 0 .5em;
}
dd {
  text-indent: 0;
  padding: 0 .2em;
  margin: 0 0 0 2em;
  border-style: solid; /* dotted; */
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 4px;
}
dd + dt {
  margin-top: .5em;
}
dd dl {
  padding-bottom: .2em;
}
details > summary {
  list-style: none;
  text-decoration: underline 1px var(--link_ulcolor);
  cursor: pointer;
}
em, strong, small, s, cite, q, dfn, abbr, sup, sub, time, data,
code, var, samp, kbd, i, b, u, mark, bdi, bdo, span, ins, del {
  font-style: normal;
}
span {
  border-color: var(--border1);
  border-width: 1px;
  border-style: none;
}
code, kbd, var, samp {
  background: var(--keywordsbg_color);
  color: var(--text);
  font-family: var(--font-monospace);
}
pre code {
  background: inherit;
}
em::before, q::before {
  content: open-quote;
}
em::after, q::after {
  content: close-quote;
}
strong {
  font-weight: bold;
}
em[title], strong[title], dfn[title], abbr[title] {
  border-width: 0 0 1px;
  border-style: none;
}
em[title], strong[title] {
  cursor: help;
  padding-bottom: 1px;
  border-color: var(--border2);
}
dfn[title] {
  cursor: help;
  padding-bottom: 1px;
  border-color: var(--border3);
}
abbr[title], acronym[title] {
  cursor: help;
  padding-bottom: 1px;
  border-color: var(--border1);
}
q, cite {
  border-bottom: 1px none var(--quote_line);
}
ins {
  padding-bottom: 1px;
  border-bottom: 1px solid var(--ins_del);
}
del {
  color: var(--ins_del);
  text-decoration: line-through;
}
kbd:not(:has(kbd)) {
  border-radius: 4px;
  padding: .5em 1em;
  padding: .1em .2em;
  border-width: 1px;
  border-style: outset;
  border-color: var(--border1);
}
img, object {
  position: relative;
}
:is(object, iframe) html * {
  font-size: var(--base_font_size);
}
iframe {
  border-style: none;
}
li p {
  text-indent: 0;
}

/* ルビ */
ruby > rt {
  color: var(--ruby_color);
  font-size: var(--ruby_font_size);
  text-transform: full-size-kana;
  font-weight: 500;
}

/* アンカー関連 */ /*
a + a {
  padding-left: .5em;
} */

/* アンカー画像 */
a :is(img, object) {
  border-style: solid;
  border-width: 2px;
  padding: 2px;
} /*
:is(:focus, :hover) img, :is(:focus, :hover) object {
  border-color: var(--hover_ulcolor);
  border-width: 2px;
  padding: 1px; */
}

/* アンカーの挙動 */
a:link {
  text-decoration: underline 1px var(--link_ulcolor);
}
a:visited {
  text-decoration: underline 1px var(--visited_ulcolor);
}
a:hover, a:focus {
  text-decoration: underline 1px var(--hover_ulcolor);
}
/* accesskey 属性のあるアンカーにアクセスキー表示をつける */
a[accesskey]::after {
  text-transform: uppercase;
  vertical-align: super;
  content: "[" attr(accesskey) "]";
  font-size: var(--ackey_font_size);
  color: var(--accesskey_color);
}
/* H キーに対応するアンカーにはつけない */
a[accesskey="h"]::after {
  content: none;
}
/* すべての http アンカーに矢印をつける */
a[href^="http"] {
  background: url("extlink") right no-repeat;
  padding-right: 14px;
}
/* サイト内リンクのみ矢印を消す */
a[href^="https://4mat.jp/"], a[href^="https://yo-p.info"] {
  background: none;
  padding-right: 0;
}

/* FOAF へのアンカーにアイコンをつける */
a[href$="/foaf"] {
  padding-left: 28px;
  background: url("/images/foaf-icon") left no-repeat;
}
/* フィードへのアンカーにアイコンをつける */
a[href$="/atom"], a[href$="/rss"] {
  padding-left: 18px;
  background: url("/images/feed-icon-16x16") left no-repeat;
}
/* メディアファイルへのアンカーに補足する */
a[href^="/audio/"] {
  background: url("type_audio") left no-repeat;
  padding-left: 18px;
}
a[href^="/videos/"] {
  background: url("type_videos") left no-repeat;
  padding-left: 18px;
} /*
a[href^="/images/"] {
  background: url("type_images") left no-repeat;
  padding-left: 18px;
} */
a[href^="/text/"] {
  background: url("type_text") left no-repeat;
  padding-left: 18px;
}
a[href^="/src/"] {
  background: url("type_src") left no-repeat;
  padding-left: 18px;
}
a[href^="/archive/"] {
  background: url("type_archive") left no-repeat;
  padding-left: 18px;
}

img[src$="_qrcode"] {
  border: 1px solid var(--border0)
}
img[src$="_qrcode"]:hover {
  cursor: none;
  border: 1px solid var(--hover_ulcolor);
}

/* 表 (テーブル) */
table {
  background: linear-gradient(to top left, var(--bgsubcolor1), 20%, var(--bgcolor));
  border-color: var(--border0);
  border-width: 1px;
  border-style: solid;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: var(--base_font_size);
  margin: 0 2em 1em;
}
th, td {
  border-color: var(--border0);
  border-width: 1px;
  border-style: solid;
  border-spacing: 0;
  padding: 0 .1em;
}

/* フォームなど */
form :is(dt, dd) {
  border-style: none;
}
form dt {
  width: 9em;
  clear: left;
  float: left;
  margin: 0;
}
form div {
  clear: left;
  padding: 0 0 0 9em;
}
input[title], select, option, textarea {
  color: var(--inputtext_color);
  font-size: var(--base_font_size);
  padding: 0 .1em;
}
form dd :is(input, textarea) {
  border-width: 1px;
}
input[type="submit"] {
  padding: 0 .5em;
}
textarea {
  background: linear-gradient(to top left, var(--bgsubcolor1), 20%, var(--bgcolor));
  width: 20em;
  height: 10em;
}

/* 構造と role 属性 */
header {
  background: var(--bgcolor) url("/images/logo") top 6px left 6px no-repeat;
  border: 1px outset var(--border0);
  border-radius: var(--common-box-radius) var(--common-box-radius) 0 0;
  border-bottom-style: hidden;
  height: 5em;
  max-width: 43.2em;
  padding: 0 0 0 14em;
  margin: 0;
}
header > h1 {
  position: relative;
  bottom: .5em;
}
#frontpage h1 {
  visibility: hidden;
}
#frontpage header > p {
  position: relative;
  bottom: 1em;
}
header > nav {
  background: none;
  border: none;
  position: relative;
  right: 14em;
  bottom: 4.1em;
  width: 100%;
}
header > nav > ul {
  padding: 0;
  margin: 0;
  display: inline-flex;
  list-style: none;
}
a[accesskey="h"] {
  border: 1px dotted green;
  opacity: 0;
  padding: .5em 4em 2.9em 5.5em;
}

@media screen and (max-width: 59.9em) {
header > h1 {
  font-size: var(--base_font_size);
}
header {
  max-width: 28em;
}
}

#maincontainer {
  display: flex;
  align-items: flex-start;
  justify-content: left; /* center; */
  flex-wrap: wrap;
}
main {
  background: rgb(252 253 255 / .95);
  width: 42.8em;
  min-width: 18em;
  border-color: var(--border0);
  border-width: 1px;
  border-style: outset;
  border-radius: 8px;
}
main p :is(img, audio, video) {
  height: auto;
  max-width: 100%;
}
main + nav {
  background: linear-gradient(to right, var(--bgsubcolor1), 25%, var(--bgcolor));
  opacity: .95;
  max-width: 12em; /* 14em */
}
main, main + nav {
  border-color: var(--border0);
  border-width: 1px;
  border-style: outset;
  border-radius: var(--common-box-radius);
  padding: .5em 1em;
  margin: 0;
}
footer {
  border-color: var(--border0);
  border-width: 1px 0 0;
  border-style: none;
  border-radius: var(--common-box-radius);
  padding: 0;
  margin: .5em;
  text-align: end;
}

/* クラスと ID */
.date_box {
  margin: 1em 0 0;
}
.cat_date {
  text-align: right;
  clear: both;
  margin: .3em 1em;
  list-style: none;
  quotes: "〔" "〕";
}
.copyright {
  font-size: var(--cpright_font_size);
}
#entrytag {
  font-size: var(--enttag_font_size);
  margin-bottom: 1em;
}
:is(article, section, blockquote) > p {
  text-indent: 1em;
}
main :is(article, nav, section) > :is(ol, ul) {
  margin: 0 3em;
}
main :is(article, section) > p {
  margin: 0 2em;
}
main :is(article, section) > p:first-child {
  margin-top: 1em;
}
:is(h1, h2, h3, h4, h5, h6) + p {
  margin-top: 0;
}
main p :is(img[src*="/images/"], object) {
  float: left;
  margin: .3em 1em 1em 0;
  border-radius: 4px;
  box-shadow: .2em .2em .8em var(--border0);
}
main p object[data^="http://ext.nicovideo.jp/"] {
  float: none;
  margin: 1em 1em 0 0;
  width: 16.8em;
  min-height: 13.6em;
  visibility: visible;
}
main p + p {
  clear: left;
}
main * pre {
  clear: left;
}
article > footer, #seealso {
  margin: 1em 0;
}
article > footer form p, #seealso form p {
  padding: 0 9.3em;
}
#trackback {
  clear: both;
}
main + nav * img {
  border: none;
  padding: 3px;
}
.pagemove {
  margin: 1em 2em;
}
.pagemove .prev {
  background: url("li-1") left no-repeat;
  padding: 0 .5em 0 8px;
  display: inline;
}
.pagemove .next {
  background: url("li1") right no-repeat;
  padding: 0 8px 0 .5em;
  display: inline;
}
.match {
  background: var(--matchbg_color);
  font-weight: bold;
}
em.match::before {
  content: none;
}
em.patch::after {
  content: none;
}
#link-navigation-box {
  background: url("line1") left repeat-y;
  position: absolute;
  top: 22em;
  right: 4.4em;
  border-color: var(--border0);
  border-width: 0 0 1px 1px;
  border-style: outset;
  margin: 1em;
  padding: 1em;
  text-align: left;
}
main + nav input[title] {
  width: 9em;
}
main + nav ul[title]::before, #link-navigation-box[title]::before {
  content: attr(title);
  margin-left: -0.5em;
}
main + nav ul {
  margin-bottom: .5em;
}
main + nav ul li {
  margin: 0 auto;
}
#search {
  width: 8em;
}
#comments {
  border-color: var(--border0);
  border-width: 1px 0 0;
  border-style: dotted;
}
#comments p {
  text-indent: 0;
}
ul[title="QR コード"] {
  list-style: none;
}

/* チェックボックスを非表示にする */

.drawer_hidden {
  display: none;
}

@media screen and (max-width: 959px ) { /* タブレット */

body {
  max-width: 42em;
}
a[accesskey="h"] {
  position: relative;
  top: 1.7em;
}
.pageqrcode {
  display: none;
}

@media screen and (max-device-width: 799px) { /* スマートフォン */

/* ハンバーガー メニュー ============================================================================================ */

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100; /* 重なり順を一番上にする */
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span::before,
.drawer_open span::after {
  content: '';
  display: block;
  height: 3px;
  width: 24px;
  border-radius: 3px;
  background: var(--text);
  transition: var(--burgertime);
  position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span::before {
  bottom: 8px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span::after {
  top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgb(255 255 255 / 0);
}
/* アイコンがクリックされたらアイコンが×印になるように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* 暗転用背景 */
#drawer_background {
  background: var(--bgcolor_dark1);
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  transition: all var(--burgertime) linear 0s;
  z-index: -1;
}
/* メニューのデザイン*/
main + nav {
  min-width: calc(100% - 3em);
  margin: .4em auto;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  transition: var(--burgertime);
  opacity: .1;
}
/* アイコンがクリックされたら背景を暗くする */
#drawer_input:checked ~ #drawer_background {
  opacity: .6;
  z-index: 95
}/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ nav {
  left: .4em; /* メニューを画面に入れる */
  position: absolute;
  opacity: 1;
}

/* ハンバーガー メニュー ==================================== 終了 ==================================== */

body {
  margin: .4em auto;
  min-width: initial;
  max-width: calc(100% - .8em);
}
h1, h2, h3, h4, h5, h6 {
  font-size: var(--medium-fonts-size);
  margin-left: initial;
}
header {
  background: var(--bgcolor) url("/images/mlogo") top left no-repeat; 
  background-size: contain;
  padding: 0 2.5em 0 5.5em;
  max-width: 100%;
}
#frontpage > header > h1 {
  color: var(--heading_titlecolor);
  font-family: var(--font-serif);
  font-size: 2.5em;
  font-weight: bold;
  position: relative;
  bottom: .2em;
  left: -.1em;
  visibility: visible;
  text-shadow: .1em 0 .1em var(--heading_shadow);
}
#frontpage > header > h1::first-letter {
  font-size: 0;
}
#frontpage > header > p {
  position: relative;
  bottom: 6.4em;
}
#maincontainer {
  display: block;
}
main :is(article, section, nav) > :is(ol, ul),
main :is(article, section, nav) p {
  margin: 0 .4em;
}
main {
  width: initial;
  max-width: initial;
}
table {
  margin: 0;
}
form > dl dd {
  position: relative;
  left: -1em;
}
form > dl dd textarea {
  max-width: 100%;
}
article > footer, #seealso {
  width: 100%;
  padding: 0;
  margin: 1em 0;
}
blockquote {
  margin: 1em;
}
#search_box {
  margin: .5em 0 0 .5em;
}
a[accesskey]::after {
  content: none;
}
ul[title="QR コード"] {
  display: none;
}
ul li {
  margin-top: .15em;
}

} /* スマートフォン */
} /* タブレット */

@media (prefers-color-scheme: dark) { /* ダークモード */

body {
  background: none var(--bgcolor_dark1);
  color: var(--text_dark);
}
ruby > rt {
  color: var(--text_dark);
}
header {
  background-color: var(--bgcolor_dark3);
  border-color: var(--shadow_dark);
}
main {
  background-color: var(--bgcolor_dark2);
  border-color: var(--shadow_dark);
}
main + nav, table {
  background-color: var(--bgcolor_dark3);
  background-image: none;
  border-color: var(--shadow_dark);
}
blockquote {
  background: linear-gradient(to left, var(--bgcolor_dark1), 5%, var(--bgcolor_dark2));
  border-color: var(--shadow_dark);
}
h1, h2, h3, h4, h5, h6,
caption, th,
nav ul[title]::before, #link-navigation-box[title]::before {
  color: var(--heading_dark);
  text-shadow: .1em .1em .3em var(--shadow_dark);
}
main + nav ul[title]::before, #link-navigation-box[title]::before {
  color: var(--heading_dark);
}
a:link {
  color: var(--link_dark);
}
a:visited {
  color: var(--visited_dark);
}
a:hover {
  color: var(--hover_dark);
}
input[title] {
  background-color: var(--bgcolor_dark2);
  color: var(--text_dark);
}
.drawer_open span,
.drawer_open span::before,
.drawer_open span::after {
  background: var(--text_dark);
}
h3 {
  background: url("h3d") left no-repeat;
  padding-left: 1em;
}
h4 {
  background: url("h4d") left no-repeat;
  padding-left: 1em;
}
ul, menu, dir {
  list-style: outside url("li1d") disc;
  margin: 0 0 0 1em;
  padding: 0;
}
ul ul {
  list-style: outside url("li2d") disc;
}
ul ul ul {
  list-style: outside url("li3d") disc;
}
ul ul ul ul {
  list-style: outside url("li4d") disc;
}
code, kbd, var, samp {
  color: var(--text_dark);
}
.pagemove .prev {
  background: url("li-1d") left no-repeat;
  padding: 0 .5em 0 8px;
  display: inline;
}
.pagemove .next {
  background: url("li1d") right no-repeat;
  padding: 0 8px 0 .5em;
  display: inline;
}
}