/*---------------------------------

  メイン

---------------------------------*/

html,
body {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  font-size: 16px; /* デフォルトのフォントサイズを16pxに設定 */
  display: flex;
  background: #dfdfdf;
  flex-direction: column;
}

/* メインコンテンツの通常レイアウト */
main {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr; /* 幅をfit-contentで調整 */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "main-menu main-menu"
    "sub-menu article";
  gap: 1em; /* サイドメニューと記事の間にスペース */
  justify-content: center; /* 水平方向に中央揃え */
  align-items: start; /* 垂直方向に上揃え */
  width: 100%;
  max-width: 1200px; /* 全体の最大幅を設定 */
  margin: 0 auto; /* 親要素の中央に配置 */
  box-sizing: border-box;
}

/*---------------------------------

  ヘッダー

---------------------------------*/
header {
  width: 100%;
  height: 50px; /* ヘッダーの高さを固定 */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  background: #04162e;
  text-align: left;
  display: flex; /* フレックスボックスで配置 */
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 0 1em; /* パディングで余白を追加 */
  box-sizing: border-box;
  position: sticky; /* スクロールしても固定 */
  top: 0; /* 上端に固定 */
  z-index: 1000; /* 他の要素より手前に表示 */
}

div#site-name-text {
  text-align: left;
  padding-left: 2em;
}

div#site-name-text a {
  font-size: 2em;
  text-decoration: none;
  color: #ffffff;
}

/* ハンバーガーメニューボタン */
.menu-toggle {
  font-size: 2em;
  margin: 0em 1em 0em 0em;
  background: none;
  border: none;
  cursor: pointer;
  color: white; /* ハンバーガーボタンの色を白に設定 */
}

/*---------------------------------

  メインメニュー（目次）

---------------------------------*/
/* main-menuのスタイルを調整 */
nav#main-menu {
  margin: 0em;
  padding: 0em;
  size: 50px; /* メニューの高さを固定 */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); /* 影を追加 */
  background: #ffffff; /* 背景色を設定 */
  justify-self: center; /* グリッド内で中央揃え */
  display: none; /* デフォルトではメニューを非表示 */
  position: sticky; /* スクロールしても固定 */
  top: 50px; /* ヘッダーの下に固定 */
  z-index: 999; /* 他の要素より手前に表示 */
}

.menu-active #main-menu {
  display: block; /* メニューがアクティブの時に表示 */
}

ul.f-container {
  display: flex;
  flex-direction: row; /* 横に並べる */
  justify-content: center; /* 中央揃え */
  flex-wrap: wrap; /* 折り返し */
  list-style-type: none; /* リストのマーカーを消す */
  margin: 0;
  padding: 0;
  align-content: space-around;
  background: #ffffff;
}

ul.f-container a {
  display: block;
  font-size: 1.25em;
  width: 6em;
  height: auto;
  padding: 0.5em;
  text-align: center;
  text-decoration: none;
  color: #000000;
}

ul.f-container a#f-item1 {
  background: #d0e7f5; /* 薄いパステルブルー */
}

ul.f-container a#f-item1:hover {
  background: #c0d8e5; /* ホバー時の色を少し濃くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を追加 */
}

ul.f-container a#f-item2 {
  background: #f8d0e0; /* 薄いパステルピンク */
}

ul.f-container a#f-item2:hover {
  background: #f0c0d5; /* ホバー時の色を少し濃くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を追加 */
}

ul.f-container a#f-item3 {
  background: #c0e8f5; /* 薄いパステルシアン */
}

ul.f-container a#f-item3:hover {
  background: #b0d8e0; /* ホバー時の色を少し濃くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を追加 */
}

ul.f-container a#f-item4 {
  background: #f0f8d0; /* 薄いパステルイエローグリーン */
}

ul.f-container a#f-item4:hover {
  background: #e0f0c0; /* ホバー時の色を少し濃くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を追加 */
}
/*---------------------------------

  サブメニュー（目次）

---------------------------------*/
/* サブメニューのスタイル調整 */
nav#sub-menu {
  grid-area: sub-menu;
  margin: 1em;
  padding: 1em;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  background: #ffffff;
  max-height: calc(100vh - 2em); /* 高さの制限 */
  overflow-y: auto; /* スクロールバーを表示 */
  position: sticky;
  top: calc(
    50px + 50px + 2em
  ); /* ヘッダーとメインメニューの下に固定(ヘッダー＋メインメニュー＋2em) */
  z-index: 998; /* 他の要素より手前に表示 */
}

/*---------------------------------

  コンテンツ

---------------------------------*/
/* articleの最大幅を700pxに設定 */
article {
  grid-area: article;
  margin: 1em;
  padding: 1em;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
  background: #ffffff;
  width: 100%; /* 100%幅を基準に */
  max-width: 700px; /* 最大幅を700pxに制限 */
  justify-self: center; /* グリッド内で中央揃え */
}

/*---------------------------------

  アンカーリンク

---------------------------------*/

:target {
  scroll-margin-top: calc(50px + 50px); /* 固定したものからずれるよう変更 */
}

/*---------------------------------

  汎用タグ

---------------------------------*/
/* キャプション */
caption {
  text-align: left;
}

/* 点の無いリスト(コードbox用)*/
ul.list01 {
  list-style-type: none;
  margin: 0;
  padding-left: 10px;
}

/* 点の無いリスト(テーブル説明用：下のmarginが2em) */
ul.list02 {
  list-style-type: none;
  margin: 0 0 2em;
  padding-left: 0px;
}

/* NEW,UPDATE,etc.アイコン */
span.text-icon-red {
  display: inline-block;
  background: #df002c;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  font-size: 0.75em;
  font-weight: bold;
  color: #fff;
  border-radius: 3px;
}

span.text-icon-blue {
  display: inline-block;
  background: #002cdf;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  font-size: 0.75em;
  font-weight: bold;
  color: #fff;
  border-radius: 3px;
}

span.text-icon-green {
  display: inline-block;
  background: #2cdf00;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  font-size: 0.75em;
  font-weight: bold;
  color: #fff;
  border-radius: 3px;
}

/* 赤文字（更新日を書くときに使用）*/
span.text-red {
  font-size: 0.75em;
  color: #df002c;
}

/* 余白追加 */
.mb1 {
  margin-bottom: 1em;
}

.mb2 {
  margin-bottom: 2em;
}

.mb5 {
  margin-bottom: 5em;
}

.mt1 {
  margin-top: 1em;
}

.mt2 {
  margin-top: 2em;
}

.mt5 {
  margin-top: 5em;
}

/*---------------------------------

  トップページ

---------------------------------*/
h1#top-title-text {
  font-size: 2em;
  text-align: center;
}

div#top-image img {
  display: block;
  margin: 0 auto;
  padding: 2em;
  min-width: 50%;
}

/* トップページの更新情報ボックス */
#change_log_box {
  border: 1px solid #c0c0c0;
  width: 60%;
  height: 300px;
  overflow: auto;
  margin: 0 auto;
  white-space: pre-wrap;
  font-family: inherit;
}

table.main-contents {
  border-collapse: separate;
  margin: 1em auto;
  font-size: 1.1em;
}

table.main-contents td {
  padding: 0;
  width: 45%;
  text-align: center;
}

table.main-contents td a {
  display: block;
  background-color: #efefef;
  border: 2px solid #c0c0c0;
  padding: 1em;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  transition: background 0.3s, box-shadow 0.3s;
}

table.main-contents td a:hover {
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 余った枠（リンクなし）。隣の枠と同じ見た目で行の高さに合わせる */
table.main-contents td.blank {
  background-color: #efefef;
  border: 2px solid #c0c0c0;
}

/* カウンター */
div#js-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 1em auto;
  padding: 0.25em;
}

p#top-since {
  text-align: center;
}

/*---------------------------------

  テーブル

---------------------------------*/
/* テーブルの横スクロールを有効にする */
.table-wrap {
  overflow-x: auto; /* 横スクロールを有効にする */
  max-width: 100%; /* 親要素からはみ出さないようにする */
  white-space: nowrap; /* テーブル全体を1行に */
  width: 100%; /* 親要素に合わせて100%幅に */
  box-sizing: border-box; /* パディングやボーダーを含めた幅に */
}

/* テーブルの幅を自動調整 */
table {
  table-layout: auto; /* 各列の幅をコンテンツに合わせて自動調整 */
  width: 100%; /* 親要素に対して幅100%を適用 */
  border-collapse: collapse; /* 枠線を重ねて表示 */
}

/* 固定幅を解除 */
table.type01 {
  table-layout: auto; /* コンテンツに応じて幅が変わるように */
  margin: 0.25em 0;
  text-align: center;
  font-size: 1em;
  border: 1px #000 solid;
}

/* テーブルのセルの幅を内容に応じて自動調整 */
table.type01 th,
table.type01 td {
  white-space: nowrap; /* 長いテキストを折り返さない */
  padding: 5px; /* セルのパディング */
  overflow: visible; /* 内容があふれる場合、セルを広げる */
  border: 1px solid #000; /* セルの枠線 */
}

/* ヘッダーも内容に応じて広がるようにする */
table.type01 th {
  background: #04162e;
  color: #fff;
  position: sticky;
  top: 0;
  text-align: center;
}

table.type01 td {
  white-space: pre-line;
  border: 1px #000 solid;
  padding: 5px;
}

table.type01 colgroup col.cell {
  background-color: #ffffff;
}

table.type01 colgroup col.header1 {
  background-color: #dfdfdf;
}

/*Tablesorter*/
.tablesorter-default .tablesorter-header {
  background-image: url("img/white-unsorted.gif");
  background-position: top 50% right 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  white-space: normal;
  padding-right: 20px;
}
.tablesorter-default thead .tablesorter-headerAsc {
  background-image: url("img/white-asc.gif");
  background-color: #506886;
}
.tablesorter-default thead .tablesorter-headerDesc {
  background-image: url("img/white-desc.gif");
  background-color: #506886;
}

/*---------------------------------

  コードBOX

---------------------------------*/
.info_box {
  background-color: #efefef;
  border: 1px #000000 solid;
  margin: 10px 0px;
  padding-bottom: 10px;
}

.info_box pre {
  background-color: #ffffff;
  border: 1px #000000 solid;
  font-size: 1em;
  margin: 0px 10px;
  padding: 10px;
  white-space: pre-wrap;
  /* 改行処理 */
  word-break: break-all;
  word-wrap: break-all;
}

.info_box h2 {
  background: #04162e;
  border-bottom: 1px #000000 solid;
  color: #fff;
  margin-top: 0px;
  padding: 0px 10px;
}

.info_box p {
  white-space: pre-wrap;
  margin: 0;
  padding: 0px 10px;
}

/*---------------------------------

　  フッター(ボタン)

---------------------------------*/
#scroll-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden; /* 非表示状態でクリックも無効に */
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

#scroll-top-btn.show {
  opacity: 1;
  visibility: visible; /* 表示状態に切り替え */
  transform: translateY(0);
}

#scroll-top-btn img {
  display: block;
  width: auto;
  height: auto;
}

#scroll-top-btn:hover img {
  opacity: 0.8; /* ホバー時に若干の透明度を付与 */
}
/*---------------------------------

  古い要素

---------------------------------*/
span.span1 {
  color: red;
}

span.new {
  color: red;
  font-weight: bold;
}

div.div01 {
  border: 2px #dfdfdf solid;
  padding: 5px;
}

p.p1 {
  font-size: 1em;
}

/*---------------------------------

  レスポンシブ

---------------------------------*/
@media (min-width: 1000px) {
  #main-menu {
    display: block !important; /* 強制的に表示させる */
  }

  .menu-toggle {
    display: none; /* 大画面ではハンバーガーメニューを非表示 */
  }
}
@media (max-width: 1000px) {
  main {
    grid-template-rows: auto auto;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-areas:
      "main-menu"
      "sub-menu"
      "article"; /* main-menuとsub-menuを縦に積む */
    padding: 0 1em; /* 左右の余白を1emに減らす */
    margin: 0; /* 不要なマージンを取り除く */
    width: 100%; /* 画面幅全体を使う */
  }

  nav#sub-menu {
    position: static;
    overflow-y: auto;
    margin: 0 0 1em 0; /* サブメニューの上下余白のみ設定 */
    padding: 0.5em; /* 内側の余白を調整 */
  }

  ul.f-container {
    flex-direction: row; /* 横に並べる */
  }

  article {
    margin: 0; /* マージンをなくして中央寄せを防ぐ */
    padding: 0.5em; /* 内部余白だけを設定 */
    max-width: 98.5%; /* 最大幅を100%から1.5%減らす */
  }
}

/* タッチデバイスの場合のフォントサイズ調整 */
@media (hover: none) and (pointer: coarse) {
  html,
  body {
    font-size: 22px;
  }
  /* ボタン自体の位置やサイズの微調整 */
  #scroll-top-btn {
    bottom: 30px; /* 少し下方向に余裕を持たせる */
    right: 30px; /* 同様に右側も余裕を持たせる */
    /* 必要であればpaddingも追加してタップしやすくする */
    padding: 10px;
  }

  /* ボタン内の画像サイズを大きく設定 */
  #scroll-top-btn img {
    width: 64px; /* 例: 幅64pxに設定 */
    height: 64px; /* 高さも64pxに（比率が崩れないように調整） */
  }
}

@media (max-width: 600px) {
  body {
    font-size: 18px;
  }

  header {
    padding: 0 12px;
  }

  div#site-name-text {
    min-width: 0;
    padding-left: 0;
  }

  div#site-name-text a {
    font-size: clamp(18px, 5vw, 24px);
    white-space: nowrap;
  }

  .menu-toggle {
    box-sizing: border-box;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    line-height: 1;
  }

  ul.f-container li {
    flex: 1 1 50%;
    min-width: 0;
  }

  ul.f-container a {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0.65em 0.3em;
    font-size: 1em;
  }

  main {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 12px;
  }

  nav#sub-menu,
  article {
    box-sizing: border-box;
    line-height: 1.6;
  }

  article {
    width: 100%;
    max-width: 100%;
    padding: 1em;
  }

  div#top-image img {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: 0;
  }

  h1#top-title-text {
    font-size: clamp(24px, 7vw, 30px);
  }

  #change_log_box {
    box-sizing: border-box;
    width: 100%;
  }

  div#js-counter {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  table.main-contents {
    table-layout: fixed;
    font-size: 1em;
  }

  table.main-contents td a {
    box-sizing: border-box;
    min-height: 48px;
    padding: 0.75em 0.35em;
  }

  #scroll-top-btn {
    box-sizing: border-box;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    padding: 4px;
  }

  #scroll-top-btn img {
    width: 48px;
    height: 48px;
  }
}

/*---------------------------------

  JavaScript

---------------------------------*/

/* JavaScriptでクラスを追加してメニューを表示 */
.menu-active #main-menu {
  display: block;
}