/* <system section="theme" selected="17179246901369037364"> */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Armata&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap");
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css | Minified by CookieBox26 */
html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:0.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}
/*!
  Theme: Notive
  Author: Chihiro Mihara
  Responsive: yes
  Description:
    Parts of this stylesheet, specifically normalize.css, are licensed under the MIT License.
    This stylesheet is based on boilerplate.scss, which is also licensed under the MIT License.
    The rest of this stylesheet is licensed under the GPLv3.
*/
:root {
  --font-family-text:
    "Armata", "IBM Plex Sans JP",
    "Helvetica Neue", "Helvetica", "Arial", "Hiragino Kaku Gothic Pro",
    "Meiryo", "MS PGothic", sans-serif;
  --font-family-title:
    "M PLUS Rounded 1c",
    "Helvetica Neue", "Helvetica", "Arial", "Hiragino Kaku Gothic Pro",
    "Meiryo", "MS PGothic", sans-serif;
  --font-family-mono:
    "JetBrains Mono", "M PLUS 1 Code",
    "Monaco", "Consolas", "Courier New", "Courier", monospace;
  --font-weight-title: 700;
  --font-weight-header: 700;
  --color-text: #393939;
  --color-accent: #4682b4;
  --color-text-lighter-1: #747474 /* color-mix 非対応ブラウザ用 */;
  --color-text-lighter-1: color-mix(in srgb, var(--color-text), white 30%);
  --color-accent-lighter-1: #7ea8cb /* color-mix 非対応ブラウザ用 */;
  --color-accent-lighter-1: color-mix(in srgb, var(--color-accent), white 30%);
  --container-width: 850px;
  --content-margin: 0 0.75rem;
  --container-width-plus-margin: calc(var(--container-width) + 0.75rem + 0.75rem);
  --bgcolor-console: #454545;
  --bgcolor-program: #f0f0f0;
  --label-content: "目次";
  --label-reference: "参考文献";
  --label-point: "この記事の要点";
}
html {
  background-color: #fff;
}
body {
  background-color: #fff;
  letter-spacing: 0.02em;
  font-family: var(--font-family-text);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.4;
}
a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1 a, h1 a:hover, h1 a:visited,
h2 a, h2 a:hover, h2 a:visited,
h3 a, h3 a:hover, h3 a:visited {
  color: var(--color-text);
  text-decoration: none;
}
h4 a, h4 a:hover, h4 a:visited,
h5 a, h5 a:hover, h5 a:visited,
.entry-footer-time a, .entry-footer-subscribe a {
  color: var(--color-accent);
}
a.keyword {
  text-decoration: none;
  border-bottom: 1px dotted #d2d2d2;
  color: var(--color-text);
}
/* ----- グローバルヘッダ― ----- */
#globalheader-container {
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
  color: var(--color-text);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
}
/* ----- ブログコンテナ ----- */
#container {
  margin: 0 auto;
  padding: 0 25px;
}
#container #content {
  display: block;
  *zoom: 1;
}
#container #content:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
#container-inner {
  width: 100%;
  max-width: var(--container-width-plus-margin);
  margin: 35px auto 0;
  background: #fff;
  padding-bottom: 50px;
}
.globalheader-off #container {
  padding-top: 1px;
}
#main {
  float: none;
  max-width: var(--container-width);
  margin: var(--content-margin);
}
/* ----- ブログタイトル領域 ----- */
#blog-title {
  max-width: var(--container-width);
  margin: var(--content-margin);
  padding: 0.5em 0 1.5rem;
  text-align: left;
}
#title {
  margin: 0;
  padding: 0;
  font-size: 260%;
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
}
#title a:hover {
  color: var(--color-text-lighter-1);
}
#blog-description {
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}
.header-image-enable #blog-title {
  margin: 0 0 70px;
  padding: 0;
}
.header-image-enable #title {
  padding: 55px 20px 0;
}
.header-image-enable #blog-title-inner {
  -moz-border-radius-topright: 3px;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
}
#top-editarea {
  max-width: var(--container-width);
  margin: var(--content-margin);
  font-size: 92%;
}
#top-box {
  max-width: var(--container-width);
  margin: var(--content-margin);
  font-size: 100%;
}
.breadcrumb {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  font-size: 120%;
}
/* 下部マージンがないと記事間が重なる */
.entry {
  position: relative;
  margin-bottom: 135px;
}
.entry.sleeping-ads {
  padding-bottom: 2em;
}
/* ----- 記事ヘッダー ----- */
.entry-header {
  margin-bottom: 1rem;
}
.entry-title {
  font-size: 180%;
  letter-spacing: 0.035em;
  margin: 0;
  padding: 0.4rem 0 0.3rem;
  line-height: 1.25;
  border-bottom: 3px solid var(--color-text);
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-header);
}
.entry-title a {
  color: var(--color-text);
}
.entry-title a:hover {
  color: var(--color-text-lighter-1);
}
.date {
  color: var(--color-accent);
  font-size: 135%;
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-header);
  padding: 0;
}
.date a {
  text-decoration: none;
}
.date a:hover {
  color: var(--color-accent-lighter-1);
}
.date-last-updated {
  color: var(--color-accent);
  font-size: 90%;
}
.date-footer {
  font-size: 105%;
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-header);
}
.categories {
  margin: 1rem 0 1rem;
  padding: 0;
  text-align: left;
  font-size: 90%;
}
.categories a {
  margin: 0 0.2em 0 0;
  padding: 4px 7px;
  color: white;
  background-color: var(--color-accent);
  border-radius: 4px;
}
.categories a:hover {
  text-decoration: none;
  background: var(--color-accent-lighter-1);
}
.categories-header {
  margin: 0 !important;
  float: left;
  font-size: 94%;
  height: 1.8rem;
}
.entry-header-menu {
  position: absolute;
  top: 42px;
  left: -78px;
}
.entry-header-menu a {
  background: #b3b3b3;
  font-size: 88%;
  padding: 9px 14px;
  color: #fff;
}
.entry-header-menu a:hover {
  text-decoration: none;
  background: silver;
}
/* ----- 記事本文 ----- */
.entry-content {
  padding: 0;
}
.entry-content p {
  margin: 0 0 1em;
}
.entry-content img, .entry-content video {
  max-width: 100%;
}
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  margin: 1.3em 0 0.8em;
  line-height: 1.5;
}
.entry-content h1 {
  font-size: 150%;
  padding: 0 0 0.15em 0;
  border-bottom: 2px solid var(--color-text);
}
.entry-content h2 {
  font-size: 140%;
  padding: 0 0 0.15em 0;
  border-bottom: 1px dotted var(--color-text);
}
.entry-content h3 {
  font-size: 130%;
}
.entry-content h4 {
  font-size: 120%;
}
.entry-content h5 {
  font-size: 110%;
}
.entry-content h6 {
  font-size: 100%;
}
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.entry-content .footnote-number {
  scroll-margin-top: 50px;
}
.entry-content ul,
.entry-content ol,
.entry-content dd {
  margin: 0 0 1em 0;
  padding: 0 0 0 1.75em;
}
.entry-content ul li ul,
.entry-content ol li ul,
.entry-content dd li ul,
.entry-content ul li ol,
.entry-content ol li ol,
.entry-content dd li ol {
  margin-bottom: 0;
}
.entry-content table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1.5rem auto;
}
.entry-content table img {
  max-width: none;
}
.entry-content table th, .entry-content table td {
  border: 1px solid #ddd;
  padding: 0.4em 0.8em;
}
.entry-content table th {
  background: #f7f7f7;
}
.entry-content hr {
  border: none;
  width: 100%;
  border-top: 2px solid #ccc;
  margin: 3em 0 2rem;
}
.entry-content blockquote {
  margin: 0 0 10px;
  padding: 5px 15px 5px 5px;
  color: var(--color-text);
}
.entry-content blockquote p {
  margin-top: 0;
  margin-bottom: 0;
}
.entry-content blockquote a.keyword {
  color: var(--color-text);
  text-decoration: none;
}
.entry-content blockquote cite {
  margin: 10px 0 0;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.entry-content .hatena-asin-detail {
  margin: 0.5rem 0;
  border: none;
  padding: 1rem;
  background: #f0f0f0;
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
  background: var(--color-accent);
  color: #fff;
  border-radius: 4px;
}
/* ----- ソースコード ----- */
.entry-content pre {
  font-size: 90%;
  border: 1px solid #e0e0e0;
  background: var(--bgcolor-console);
  color: var(--bgcolor-program);
  font-family: var(--font-family-mono);
  margin: 1rem 0;
  padding: 0.6em 0.9em;
  border-radius: 4px;
  white-space: pre;
  line-height: 1.4;
}
.entry-content pre.code {
  background: var(--bgcolor-program);
  color: var(--color-text);
}
.entry-content code {
  font-size: 90%;
  margin: 0 2px;
  padding: 0 4px;
  word-break: break-all;
  border: 1px solid #e0e0e0;
  background: var(--bgcolor-program);
  border-radius: 3px;
  font-family: var(--font-family-mono);
}
.entry-content pre > a,
.entry-content pre > a.keyword {
  color: var(--bgcolor-program);
}
.entry-content pre > a:hover,
.entry-content pre > a.keyword:hover {
  text-decoration: none;
}
/* シンタクスハイライト */
.synComment {
  color: #47885e;
}
.synIdentifier, .synPreProc, .synSpecial {
  color: #618ea3;
}
.synType, .synStatement {
  color: #006eb0;
}
.synConstant {
  color: #aa8840;
}
/* ----- 記事フッター ----- */
.entry-footer {
  margin: 20px 0 -80px 0;
}
.entry-footer-section {
  margin: 0 0 30px;
  color: #4d4d4d;
  color: #abb4b7;
}
.entry-footer-section .fn {
  margin: 0 2px 0 0;
}
.social-buttons, .entry-footer-html {
  margin: 20px 0 10px;
}
.hatena-star-container {
  margin: 10px 0 20px;
}
.hatena-id-link {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  font-size: 110%;
}
.comment-box ul {
  list-style: none;
  margin: 50px 0 30px;
  padding: 0;
  font-size: 95%;
  line-height: 1.7;
}
.comment-box li {
  padding: 20px 0 20px 70px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.comment-box li:first-child {
  border-top: 1px solid #ccc;
}
.comment-box .read-more-comments {
  padding-left: 0;
  border-bottom: none;
}
.comment-box .hatena-id-icon {
  position: absolute;
  top: 20px;
  left: 0;
  width: 50px!important;
  height: 50px!important;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.comment-user-name {
  margin: 0 0 10px;
  font-weight: 700;
}
.comment-content {
  font-size: 90%;
  margin: 0 0 10px;
  word-wrap: break-word;
}
.comment-content p {
  margin: 0 0 10px;
}
.comment-metadata {
  font-size: 88%;
  color: #abb4b7;
  margin: 20px 0 0;
}
.comment-metadata a {
  color: #999;
}
.comment-delete-button img {
  top: 18px!important;
}
.leave-comment-title, .leave-comment-title:hover {
  border-radius: 6px;
  padding: 0.6em 0.8em;
  font-size: 110%;
  background-color: var(--color-accent);
  color: #fff;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.leave-comment-title:hover {
  text-decoration: underline;
}
#box2 {
  float: none;
  font-size: 94%;
  margin: 0;
  width: 100%;
}
#box2-inner {
  display: block;
  *zoom: 1;
  overflow: hidden;
}
#box2-inner:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
#box2-inner .hatena-module {
  padding: 0;
  margin: 0 0.75rem 1.5rem;
  min-width: calc(50% - 1.5rem);
  max-width: calc(50% - 1.5rem);
  float: left;
}
#box2-inner .hatena-module:nth-child(3n/**/+1) {
  clear: both;
}
.hatena-module {
  text-align: left;
  margin-bottom: 60px;
}
.hatena-module-title {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-header);
  margin: 0 0 0.75rem;
  padding: 0 0 0.25rem;
  font-size: 140%;
  border-bottom: 3px solid var(--color-text);
}
.hatena-module-title a {
  color: var(--color-text);
  text-decoration: none;
}
.hatena-module-title a:hover {
  color: var(--color-text-lighter-1);
}
.hatena-urllist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hatena-urllist li {
  padding: 0;
}
.hatena-urllist li a {
  padding: 0;
}
.hatena-urllist li a:hover {
  text-decoration: underline;
  color: var(--color-accent);
}
.urllist-title-link {
  font-size: 100%;
}
.hatena-module-profile .profile-icon {
  float: left;
  margin: 0 10px 10px 0;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.hatena-module-profile .id {
  display: block;
  font-weight: bold;
  font-size: 110%;
  margin-bottom: 5px;
  margin-top: 15px;
}
.hatena-module-profile .id a {
  padding: 0;
}
.hatena-module-profile .id a:hover {
  text-decoration: none;
  color: var(--color-accent-lighter-1);
}
.hatena-module-profile .profile-description {
  font-size: 90%;
}
.hatena-module-profile .profile-description p {
  margin-top: 0;
}
.hatena-module-search-box .search-form {
  width: 100%;
  background: #f0f0f0;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.hatena-module-search-box .search-module-input {
  padding: 8px 5px;
  background: none;
  border: none;
  outline: none;
  height: 20px;
  width: 90%;
}
.hatena-module-search-box .search-module-button {
  width: 20px;
  height: 20px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat right center;
  border: none;
  outline: none;
  text-indent: -9999px;
  position: absolute;
  top: 8px;
  right: 5px;
  opacity: .5;
  filter: alpha(opacity=50);
}
.hatena-module-search-box .search-module-button:hover {
  opacity: .85;
  filter: alpha(opacity=85);
}
.pager {
  margin: 20px 0 120px;
  padding: 20px 0;
  text-align: center;
  font-size: 80%;
}
.pager a {
  font-size: 150%;
  padding: 0 0 3px;
  color: var(--color-accent);
}
.pager a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.pager .pager-prev {
  margin-right: 40px;
}
#footer {
  padding: 30px 0;
  text-align: center;
  line-height: 1.5;
  font-size: 80%;
  margin: auto 50px;
}
#footer p {
  margin: 0;
}
#bottom-editarea {
  max-width: var(--container-width-plus-margin);
  margin: 0 auto;
}
/* ----- アバウトページ ----- */
.page-about .entry-content {
  padding: 0;
}
.page-about dt {
  font-size: 125%;
  border-bottom: 3px solid var(--color-text);
  margin: 0 0 0.75rem;
  padding: 0 0 0.25rem;
  font-weight: bold;
  color: var(--color-text);
}
.page-about dd {
  margin-left: 0;
  margin-bottom: 40px;
}
.page-about dd:last-child {
  margin-bottom: 0;
}
/* ----- アーカイブページ ----- */
.archive-heading {
  font-size: 1.6rem !important;
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
}
.page-archive #main {
  margin: var(--content-margin);
  padding: 0 0 120px;
}
.page-archive #main section {
  margin: 0 0 40px;
}
.page-archive #main h1 {
  margin: 0.3rem 0;
  padding: 0 0 0.25rem;
  font-size: 128%;
  border-bottom: 3px solid var(--color-text);
}
.page-archive #main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-archive #main ul li {
  border: none;
  padding: 8px 0;
  line-height: 1.5;
}
.page-archive a.entry-title-link {
  font-size: 1.4rem;
  border-bottom: none;
  color: var(--color-text);
  vertical-align: middle;
  padding: 0;
}
.page-archive a.entry-title-link:hover {
  text-decoration: none;
  color: var(--color-text-lighter-1);
}
.page-archive .categories {
  margin: 0.6rem 0;
  padding: 0;
  background: none;
  vertical-align: middle;
  display: block;
  text-align: left;
  *zoom: 1;
}
.page-archive .categories:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
.page-archive .categories a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.page-archive .categories a:after {
  content: "";
  visibility: hidden;
}
.page-archive .entry-thumb {
  margin-top: 0.5rem;
}
.page-archive .entry-description {
  font-size: 94%;
}
@media (min-width: 801px) and (max-width: 1040px) {
  .entry-header-menu {
    left: 0;
    top: -35px;
  }
  #box2 .hatena-module:nth-child(3n/**/+1) {
    clear: none
  }
  #box2 .hatena-module:nth-child(odd) {
    clear: both;
  }
}
@media (max-width: 800px) {
  #globalheader-container {
    position: static;
  }
  #container {
    word-wrap: break-word;
    overflow: hidden;
  }
  #container-inner {
    margin: 5px auto 0;
  }
  #box2 {
    font-size: 96%;
  }
  #box2-inner {
    width: 100%;
  }
  #box2-inner .hatena-module {
    min-width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
    float: none;
    padding: 0;
  }
  .entry-header-menu {
    top: -30px;
    left: 0;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
    background: #fff !important;
  }
  #container {
    padding: 0 5px;
  }
  #container-inner {
    margin: 0;
  }
  .entry-content {
    padding: 0;
  }
  .entry-content blockquote {
    padding: 45px 20px 20px;
    background-position: 20px 17px;
    background-size: 23px 18px;
    line-height: 1.4;
  }
  .header-image-enable #blog-title {
    margin: 0 0 50px;
  }
  #box2 {
    font-size: 100%;
  }
}
/* ----- 目次記法の強調 ----- */
ul.table-of-contents {
  margin: 1.6em 0 1.2em;
  padding: 1.2em 0.8em 1.2em 2.4em;
  border: 2px solid var(--color-text);
  border-radius: 6px;
  position: relative;
  font-size: 94%;
}
ul.table-of-contents:before {
  background-color: #fff;
  font-size: 110%;
  font-weight: bold;
  left: 0.8rem;
  padding: 0 0.5rem;
  position: absolute;
  top: -0.7rem;
  content: var(--label-content);
}
/* ----- 参考文献の強調 ----- */
/* 見出しは画面外へ */
#参考文献 {
  position: absolute;
  left: -9999px;
}
/* 参考文献の強調 (ol) */
#参考文献 + ol {
  margin: 2.6em 0 1.2em;
  padding: 1.2em 0.8em 1em 2.8em;
  border: 2px solid var(--color-text);
  border-radius: 6px;
  position: relative;
  font-size: 94%;
  counter-reset: lii;
}
#参考文献 + ol:before {
  background-color: #fff;
  font-size: 110%;
  font-weight: bold;
  left: 0.8rem;
  padding: 0 0.5rem;
  position: absolute;
  top: -0.7rem;
  content: var(--label-reference);
}
#参考文献 + ol > li {
  position: relative;
  list-style: none;
}
#参考文献 + ol > li:before {
  position: absolute;
  left: -1.9em;
  counter-increment: lii;
  content: "["counter(lii)"]";
}
/* 参考文献の強調 (dl) */
#参考文献 + dl {
  margin: 2.6em 0 1.2em;
  padding: 1.2em 0.8em 1em 1em;
  border: 2px solid var(--color-text);
  border-radius: 6px;
  position: relative;
  font-size: 94%;
  display: grid;
  grid-template-columns: auto 1fr;
}
#参考文献 + dl:before {
  background-color: #fff;
  font-size: 110%;
  font-weight: bold;
  left: 0.8em;
  padding: 0 0.5em;
  position: absolute;
  top: -0.7em;
  content: var(--label-reference);
}
#参考文献 + dl > dt {
  grid-column: 1;
}
#参考文献 + dl > dt:before {
  content: "[";
}
#参考文献 + dl > dt:after {
  content: "]";
}
#参考文献 + dl > dd {
  grid-column: 2;
  margin: 0;
  padding-left: 0.5em;
}
/* ----- 要点ボックス ----- */
ul.table-of-contents li:has(> a[href^="#notive-pointbox"]) {
  display: none;
}
[id^="notive-pointbox"] {
  position: absolute;
  left: -9999px;
}
[id^="notive-pointbox"] + p,
[id^="notive-pointbox"] + ul,
[id^="notive-pointbox"] + ol {
  background: #dedede;
  padding: 2.6em 1.2em 0.9em;
  border-radius: 0.5em;
  position: relative;
  margin-bottom: 2em;
}
[id^="notive-pointbox"] + ul,
[id^="notive-pointbox"] + ol {
  padding-left: 2.6em;
}
[id^="notive-pointbox"] + p:before,
[id^="notive-pointbox"] + ul:before,
[id^="notive-pointbox"] + ol:before {
  font-size: 105%;
  font-weight: bold;
  left: 1.2rem;
  position: absolute;
  top: 0.7rem;
  content: var(--label-point);
}

/* </system> */

/* ============================================
   会話吹き出しスタイル（はてなブログ デザインCSS用）
   使い方: はてなブログ管理画面 → デザイン → カスタマイズ →
           {}デザインCSS に本ファイルの中身を貼り付ける
   記事側マークアップ（tools/talk_convert.py が生成）:
     <div class="talk momoka">台詞テキスト</div>
   話者クラス: momoka / alice / lisa（全員左揃え）
   アイコン・名前ラベルはCSS疑似要素で付与する（記事ソースを汚さない）
   ⚠️ 変更時は .crossnote/style.less（MPEプレビュー用）にも同じ変更を反映すること
   ============================================ */

.talk {
  position: relative;
  margin: 18px 0 22px 62px;
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 1.8;
  min-height: 46px;
}

/* アイコン円（白地に透過PNGのモチーフ） */
.talk::before {
  content: "";
  position: absolute;
  left: -62px;
  top: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #ffffff;
  background-size: 76%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
}

/* 名前ラベル（アイコンの下） */
.talk::after {
  position: absolute;
  left: -62px;
  top: 48px;
  width: 46px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #546a7f;
}

/* --- 桃華（薔薇・ローズ薄地） --- */
.talk.momoka {
  background: #fbeef2;
  border: 1px solid #ecccd7;
}
.talk.momoka::before {
  background-image: url(https://natosepia.github.io/hatena/assets/icon_momoka.png);
}
.talk.momoka::after { content: "桃華"; }

/* --- ありす（ダイヤ・青薄地） --- */
.talk.alice {
  background: #edf1fa;
  border: 1px solid #ccd6ee;
}
.talk.alice::before {
  background-image: url(https://natosepia.github.io/hatena/assets/icon_alice.png);
}
.talk.alice::after { content: "ありす"; }

/* --- リサ（リボン・金茶薄地） --- */
.talk.lisa {
  background: #faf2e2;
  border: 1px solid #e8d4a9;
}
.talk.lisa::before {
  background-image: url(https://natosepia.github.io/hatena/assets/icon_lisa.png);
}
.talk.lisa::after { content: "リサ"; }

/* --- 数式ボード（ホワイトボード風） --- */
/* 数式ブロック <div align='left' class='scroll'>[tex:{...}]</div> をホワイトボードに見立てる。
   吹き出しと同じ左位置（margin-left）に揃える */
.scroll {
  margin: 18px 0 22px 62px;
  padding: 14px 18px;
  background: #ffffff;
  border: 2px solid #ccc;
  border-radius: 6px;
  color: #222222;
  overflow-x: auto;
}

/* --- ノート（桃華のノートの書き付け） --- */
/* <div class="note"> を桃華のノート（ローズ系・横罫線入りの紙）に見立てる。
   吹き出しと同じ左位置に揃える。罫線間隔28px＝line-heightに同期 */
.note {
  position: relative;
  margin: 18px 0 22px 62px;
  padding: 8px 16px 8px 48px;
  background:
    repeating-linear-gradient(
      transparent, transparent 27px,
      #dce6ee 27px, #dce6ee 28px
    ),
    #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #222222;
  line-height: 28px;
}
/* ノートのマージン線（左の縦ライン） */
.note::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 34px;
  width: 1px;
  background: #e5b6c6;
}
.note ul { margin: 0; padding: 0; list-style: none; }
.note li::before { content: "❀ "; color: #d98aa8; }
/* 入れ子の2階層目は標準の黒丸に戻す（❀ は最上位の項目だけに使う） */
.note ul ul { margin: 0 0 0 1.1em; padding: 0 0 0 1.1em; list-style: disc; }
.note ul ul li::before { content: none; }

/* --- ありすのメモ（ダイヤ・青系ノート） --- */
/* .note のありす版。ありすが板書するまとめ・持ち帰り事項に使う */
.alice_memo {
  position: relative;
  margin: 18px 0 22px 62px;
  padding: 8px 16px 8px 48px;
  background:
    repeating-linear-gradient(
      transparent, transparent 27px,
      #ccd6ee 27px, #ccd6ee 28px
    ),
    #edf1fa;
  border: 1px solid #ccd6ee;
  border-radius: 6px;
  color: #222222;
  line-height: 28px;
}
/* ノートのマージン線（左の縦ライン） */
.alice_memo::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 34px;
  width: 1px;
  background: #8fa6d9;
}
.alice_memo ul { margin: 0; padding: 0; list-style: none; }
.alice_memo li::before { content: "♦ "; color: #6b82c4; }

/* --- ウィジェット（iframe）の整列 --- */
/* 吹き出し・数式ボードと同じ左位置に揃える。inline の max-width に勝つため !important（上限 720px。4合目から 480→720 に拡大、2026-09-06） */
iframe[src*="/hatena/widget/"] {
  display: block;
  margin-left: 62px;
  max-width: min(720px, calc(100% - 62px)) !important;
}
/* 旧記事（inline max-width:480px で設計した 3合目まで）は 480 のまま。記事側の宣言幅を尊重する */
iframe[src*="/hatena/widget/"][style*="max-width:480px"] {
  max-width: min(480px, calc(100% - 62px)) !important;
}

/* --- レイアウト: 広い画面でサイドバーを記事の右に置く2カラム化 --- */
/* テーマ(1カラム・--container-width:850px)の上書き。実構造を確認済み:
   #content-inner 直下に #wrapper(記事) と aside#box2(サイドバー) が兄弟。
   1100px未満はテーマの1カラムのまま（スマホ・タブレットには一切影響しない）。
   ※この節はブログレイアウト専用のため .crossnote/style.less への同期は不要 */
@media (min-width: 1100px) {
  /* ページ全体の幅上限（テーマ: 850px+余白 ≈ 874px）を広げる。白い帯の本体はここ */
  #container-inner {
    max-width: 1280px;
  }
  #content-inner {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
  }
  #box2 {
    width: 320px;
    flex-shrink: 0;
  }
  /* テーマは下部サイドバー前提でモジュールをfloatで多列に並べるため、縦1列に戻す。
     テーマの左右マージン(0.75rem)を残すと width:100% と足し算で #box2 を超過し、
     #box2-inner の overflow:hidden に右端がクリップされる（検索ボタン切れの原因）ため 0 にする */
  #box2 .hatena-module {
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  #wrapper {
    flex: 1;
    min-width: 0;       /* 数式・図のはみ出しでカラム幅が壊れないための保険 */
  }
  #main {
    max-width: none;    /* テーマの850px上限を解除し、記事カラムいっぱいに使う */
    margin: 0;
  }
}

/* スマホでアイコンを少し小さく */
@media (max-width: 480px) {
  .talk { margin-left: 50px; }
  .talk::before { left: -50px; width: 38px; height: 38px; }
  .talk::after { left: -50px; top: 40px; width: 38px; font-size: 9px; }
  .scroll { margin-left: 50px; }
  iframe[src*="/hatena/widget/"] { margin-left: 50px; max-width: calc(100% - 50px) !important; }
}