:root{
  color-scheme: light dark;
  --light:#fff; --lesslight:#efefef;
  --dark:#000000; --moredark:#000; --link:royalblue;
  border-top:5px solid var(--dark);
  line-height:2.0;
  font-family:"Noto Sans JP","Roboto",Arial;
  font-size:18px;
  font-weight: 450;
}

*{ box-sizing:border-box; }

body{
  background:var(--light);
  color:var(--dark);
  max-width:1200px;
  margin:1px auto;
  padding:20px;
}


h1{ line-height:1; }

h2{
  position:relative;
  padding:.4em .8em;
  border-bottom:2px solid #000;
}
h2::before{
  content:"";
  position:absolute;
  top:7px; bottom:-9px; left:7px;
  width:2px; background:#000;
}

h3{ padding:.4em .8em; }

button,input{ font-size:1em; }

input{
  border:1px solid var(--dark);
  background:var(--lesslight);
  border-radius:.25em;
  padding:.5em;
}

p{
  max-width: 95%;
  margin-left: auto;        /* 左右のマージンを自動に */
  margin-right: auto;       /* → 中央寄せ */
}

pre{
  background:var(--lesslight);
  padding:.5em;
  overflow:auto;
  max-width: 90%;
  margin-left: auto;        /* 左右のマージンを自動に */
  margin-right: auto;       /* → 中央寄せ */
}

code{ background:var(--lesslight); }

img{ max-width:100%; height:auto; }

button,.button,input[type=submit]{
  display:inline-block;
  background:var(--dark);
  color:var(--light);
  text-align:center;
  padding:.5em;
  border-radius:.25em;
  text-decoration:none;
  border:0;
  cursor:pointer;
}
button:hover,.button:hover,input[type=submit]:hover{
  color:var(--lesslight);
  background:var(--moredark);
}
button+button,.button+.button,input[type=submit]+input[type=submit]{ margin-left:1em; }

.center{ display:block; margin:0 auto; text-align:center; }
.bordered{ border:3px solid; }

.home{
  display:inline-block;
  background:var(--dark);
  color:var(--light);
  margin-top:20px;
  padding:5px 10px;
  text-decoration:none;
  font-weight:bold;
}

li{ padding:.3em; }

/* Desktop */
@media (min-width:600px){
  ol.twocol{ column-count:2; }

  .row{
    display:flex;
    gap:10px;
    width:100%;
  }
  .row>*{
    flex:1 1 auto;
    min-width:0;
  }
}

/* Print */
@media print{ .home{ display:none; } }

/* Asanoha background */
.asanoha-pattern{
  max-width: 100%;
  /* width:100vw; */
  height:6em;
  background:url("data:image/svg+xml;charset=utf-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='70' height='40' viewBox='0 0 140 80' preserveAspectRatio='none'%3e%3cpath fill='%23ffffff' d='M4 1h42l21 36zM3 3l63 36h-42zM1 4l21 36-21 36zM3 77l21-36h42zM46 79h-42l63-36zM69 44v41h-24zM95 85h-24v-41zM73 43l63 36h-42zM74 41h42l21 36zM118 40l21-36v72zM137 3l-21 36h-42zM94 1h42l-63 36zM71 36v-41h24zM45-5h24v41z'/%3e%3cpath fill='none' stroke='%23000000' stroke-width='.8' d='M47 0h-47v80h47l46-80h47v80h-47zM117 40h-94l-23 40l140-80-23 40 23 40-140-80 23 40M70-5v90'/%3e%3c/svg%3e");
}

/* 横長のdisplay数式用スクロール */
.math-scroll{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.25rem;
}
/* MathJax 本体（display） */
.math-scroll mjx-container[display="true"]{
  display:inline-block;
  vertical-align:middle;
}
/* 親のはみ出しを許可 */
.site-main,article,.page,.post{ overflow:visible; }

/* 通常の改行ルール */
body,p,.md,.typeset{ white-space:normal; }

/* インライン数式に余白 */
mjx-container[jax="SVG"][display="inline"], mjx-container.MathJax{
  margin:0 .4em;
}

blockquote{
  max-width: 90%;
  margin-left: auto;        /* 左右のマージンを自動に */
  margin-right: auto;       /* → 中央寄せ */
  padding: .6em 1em;
  border-left: 4px solid var(--dark, #404040);
  background: var(--lesslight, #efefef);
}

table {
  width: 80%;              /* 表の横幅 */
  border-collapse: collapse;
  table-layout: fixed;
  margin-left: auto;        /* 左右のマージンを自動に */
  margin-right: auto;       /* → 中央寄せ */
}


th, td {
  padding: 10px; /* Add internal spacing for readability */
  text-align: left; /* Align text consistently */
  border: 1px solid #ddd; /* Subtle borders for separation */
}

th {
  background-color: #f2f2f2; /* Highlight header row */
  font-weight: bold;
}



tbody tr:hover {
  background-color: #e0e0e0; /* Hover effect for interactivity */
}

img {
  display: block;
  max-width: 60%;
  height: auto;
  margin: 1.5em auto;
}