header {
    font-size: 130%;
    margin-left:8em;
    margin-right: 8em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

#hr-header{
    margin-left:8em;
    margin-right: 8em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    /*padding-top: 0.25em;
    padding-bottom: 0.25em;*/
   clear:left;
    }
footer{
    margin-left:8em;
    margin-right: 8em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
   }
#hr-footer{
    margin-left:8em;
    margin-right: 8em;
    }

main{
    font-size: 120%;
    margin-left:10em;
    margin-right: 10em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    
    h2{
        border-left: 10px solid #103e63; /* 左に表示される | の色や太さを定義*/
        padding: 4px;
    }
    h3{
        border-left: 7px solid #2384d3;
        padding: 4px;
    }
    blockquote {
        /*background-color: #DDDDDD;*/
        display: inline-block; /* 1つの塊として扱う */
        margin-left: 3em;
        width: 80%;
        padding-left: 0.5em;
        border-left: 4px solid #584b4b; /* 左に表示される | の色や太さを定義*/
    }
    pre  { line-height: 120%; /*ここは一つ一つのコード*/
        background-color: #f5f6f0; 
        white-space: pre-wrap; /* 自動折り返しを有効化 */
        word-wrap: break-word; /* 長い単語の途中で改行 */
        overflow-wrap: break-word; /* 最新のブラウザ用 */

        /*margin-left:3em;*/
        border:2px;/*変化なし*/
        padding-left:0.5em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        width:80%;
        .codehilite .hll { background-color: #ffffcc; margin-left: 3em; margin-right: 3em; margin-top:0.5em; padding-left:1em; padding-right: 1em;padding-top: 0.2em;padding-bottom: 0.2em;} /*コード領域の全体（外枠）*/
        .codehilite { background: #f8f8f8; margin-left: 3em; margin-right: 3em; margin-top:0.5em; padding-left:1em; padding-right: 1em;padding-top: 0.2em;padding-bottom: 0.2em;}
        .codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */
        .codehilite .err { border: 1px solid #F00 } /* Error */
        .codehilite .k { color: #008000; font-weight: bold } /* Keyword */
        .codehilite .o { color: #666 } /* Operator */
        .codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
        .codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
        .codehilite .cp { color: #9C6500 } /* Comment.Preproc */
        .codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
        .codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
        .codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
        .codehilite .gd { color: #A00000 } /* Generic.Deleted */
        .codehilite .ge { font-style: italic } /* Generic.Emph */
        .codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
        .codehilite .gr { color: #E40000 } /* Generic.Error */
        .codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
        .codehilite .gi { color: #008400 } /* Generic.Inserted */
        .codehilite .go { color: #717171 } /* Generic.Output */
        .codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
        .codehilite .gs { font-weight: bold } /* Generic.Strong */
        .codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
        .codehilite .gt { color: #04D } /* Generic.Traceback */
        .codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
        .codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
        .codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
        .codehilite .kp { color: #008000 } /* Keyword.Pseudo */
        .codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
        .codehilite .kt { color: #B00040 } /* Keyword.Type */
        .codehilite .m { color: #666 } /* Literal.Number */
        .codehilite .s { color: #BA2121 } /* Literal.String */
        .codehilite .na { color: #687822 } /* Name.Attribute */
        .codehilite .nb { color: #008000 } /* Name.Builtin */
        .codehilite .nc { color: #00F; font-weight: bold } /* Name.Class */
        .codehilite .no { color: #800 } /* Name.Constant */
        .codehilite .nd { color: #A2F } /* Name.Decorator */
        .codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
        .codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
        .codehilite .nf { color: #00F } /* Name.Function */
        .codehilite .nl { color: #767600 } /* Name.Label */
        .codehilite .nn { color: #00F; font-weight: bold } /* Name.Namespace */
        .codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
        .codehilite .nv { color: #19177C } /* Name.Variable */
        .codehilite .ow { color: #A2F; font-weight: bold } /* Operator.Word */
        .codehilite .w { color: #BBB } /* Text.Whitespace */
        .codehilite .mb { color: #666 } /* Literal.Number.Bin */
        .codehilite .mf { color: #666 } /* Literal.Number.Float */
        .codehilite .mh { color: #666 } /* Literal.Number.Hex */
        .codehilite .mi { color: #666 } /* Literal.Number.Integer */
        .codehilite .mo { color: #666 } /* Literal.Number.Oct */
        .codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
        .codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
        .codehilite .sc { color: #BA2121 } /* Literal.String.Char */
        .codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
        .codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
        .codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
        .codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
        .codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
        .codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
        .codehilite .sx { color: #008000 } /* Literal.String.Other */
        .codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
        .codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
        .codehilite .ss { color: #19177C } /* Literal.String.Symbol */
        .codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
        .codehilite .fm { color: #00F } /* Name.Function.Magic */
        .codehilite .vc { color: #19177C } /* Name.Variable.Class */
        .codehilite .vg { color: #19177C } /* Name.Variable.Global */
        .codehilite .vi { color: #19177C } /* Name.Variable.Instance */
        .codehilite .vm { color: #19177C } /* Name.Variable.Magic */
        .codehilite .il { color: #666 } /* Literal.Number.Integer.Long */   
    }
        
   footnote{
        margin-left: 4em;
    }

    
}

table { 
        margin: 3em;
        border-collapse: collapse;
        /*width: 80%;*/
    }
table th,
    table td {
        border: solid 1px;
    
    }

#p-warning{
        border: dashed 0.2rem  red;
        /*padding-top: 0.5em; 地が大きくなる分だけ不要*/
        margin-left: 4em;
        margin-right: 4em;
        padding-bottom: 0.5em;
        padding-left: 1em;/* titleと本文を分離して見せるため.有効にならず、１行目に揃う*/
        padding-right: 11em;
        }
#p-warning::first-letter {
        font-size: 1.5em;
        font-weight: bold;
        color: brown;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        }

#p-note{
        border: dashed 0.2rem aqua;
        margin-left: 4em;
        margin-right: 4em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 1em;/* titleと本文を分離して見せるため*/
        padding-right: 0.5em;
        }
#p-note::first-letter {
        color: blue;
        font-size: 1.2em;
        font-weight: bold;
        text-decoration: underline;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        }


/* nav ボックスのスタイル設定*/
header nav{
    /*背景色*/
    background-color: rgb(46, 82, 114);
    /*内余白*/
    padding: 15px;
    /*外余白*/
    margin:0px;
}
/* ナビゲーションのilボックスのスタイル*/
header nav ul {
    /*上下外余白ボックスセンタリング*/
    margin:0px auto;
     /*内余白*/
    padding:0px;
     /*ボックスサイズをボーダー基準に設定*/
    box-sizing: border-box;
    /*ボックス幅を100%*/
    width: 100%;
}
/*ナビゲーションのliボックスのスタイル*/
header nav li{
    /*liの装飾なし*/
    list-style: none;
    /*背景色*/
    background-color: turquoise;
     /*中の文字列をセンタリング*/
    text-align: center;
     /*内余白*/
    padding: 5px;
     /*ボックスサイズをボーダー基準に設定*/
    box-sizing: border-box;
    /*フロートを左に*/
    float: left;
    /*上下余白を0px 左右余白を2px*/
    margin: 0px 2px;
    /*ボックス幅を16%*/
    width: 14%;
}
/*liボックスの中のリンクのスタイル設定*/
header nav li a{
    /*文字色を白*/
    color:rgb(46,82, 114);
    /*リンクのアンダーライン装飾なし*/
    text-decoration-line:none; 
}
/*クリアーフィックス*/
.clearfix::after{
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
}
/*メディアクエリの利用*/

/*画面の最小が960px以上の場合ーPCを想定*/
@media screen and (min-width:960px) {
    nav li{
        margin:0px 2px;
        width:16%;
    }
  }
/*画面が480px以上960px未満ータブレットを想定*/
@media screen and (min-width:480px) and (max-width:960px){
    nav li{
        margin: 0px 2px 2px;
        width:49%;
    }
  }
/*画面が480px未満--スマフォを想定*/
@media scree  and (max-width:480px){
    nav li{
        margin:0px 0px 2px;
        width:100%;
    }
  }

#lastmodified{
    text-align:right;
}
#counter{
    text-align:right;
}

#back_page{
     text-align:right;
}

#p-syntax {
        border: dashed 0.2rem  rgb(76, 59, 59);
        /*padding-top: 0.5em; 地が大きくなる分だけ不要*/
        margin-left: 4em;
        margin-right: 4em;
        padding-bottom: 0.5em;
        padding-left: 1em;/* titleと本文を分離して見せるため.有効にならず、１行目に揃う*/
        padding-right: 11em;
         }
#p-syntax::first-letter{
        font-size: 1.5em;
        font-weight: bold;
        color: rgb(245, 130, 130);
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    
}
#p-ex{
        border: dashed 0.2rem rgb(71, 96, 96);
        margin-left: 4em;
        margin-right: 4em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 1em;/* titleと本文を分離して見せるため*/
        padding-right: 0.5em;
        white-space: pre-wrap;
        line-height: 1.2;
        }
#p-ex::first-letter {
        color: rgb(97, 97, 161);
        font-size: 1.2em;
        font-weight: bold;
        text-decoration: underline;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        }

/* 1. 基本設定（スマホ用：デフォルトは縦並び） */
#box {
  display: flex;
  flex-direction: column; /* 縦一列に並べる */
  gap: 20px;              /* リスト間の上下のすきま */
}

/* 💡 [追加] 左右の各ブロックを指す記述 */
#box .column-block {
  width: 100%;
}

/* 💡 [修正] 子要素指定(>)を外してメンテナンスしやすく */
#box ul {
  list-style: none;
  padding-right: 20px;
  padding-left: 20px;
  margin: 0;
}

/* 💡 [追加] 各行をフレックスボックスにして横並びを固定 */
#box ul li {
  display: flex;       /* 行の中身を横並びにする */
  align-items: center;
  padding: 4px 20px;    /* 上下左右の余白を少し調整 */
  font-family: IPAGothic; /* 綺麗に揃えるため等幅フォントを推奨 */
  font-size: 16px;
}

#box ul li:nth-child(even) {
  background-color: #e6f4ea; /* 偶数行の背景色 */
}

/* 💡 [追加] 見出し行の背景を少し濃くして区別する */
#box .header-list li {
  background-color: #d0e7d2 !important;
  font-weight: bold;
}

/* 💡 [追加] 各項目の横幅をパーセントやピクセルで完全固定（ここがタブの代わりになります） */
.date { width: 95px;  flex-shrink: 0; } /* 日付の幅を固定 */
.cat  {
  display: inline-block; /* 幅（width）を指定できるようにする */
  width: 90px;           /* 画面の見た目に応じて 80px〜100px 等に調整してください */
}
.ttl  { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 余った幅すべて。長いと...で省略 */

.ttl-long { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count    { width: 80px;  text-align: right; flex-shrink: 0; } /* 右寄せ */

/* 2. パソコン・タブレット用（画面の横幅が 768px 以上のとき） */
@media (min-width: 768px) {
  #box {
    flex-direction: row;  /* 横並びに切り替える */
  }
  
  /* 💡 [修正] widthを等倍にする対象をdivに変更 */
  #box .column-block {
    flex: 1;              /* 2つのリストの幅を均等（50%ずつ）にする */
  }
}