/* 共通スタイル */
/* 色は、id="theme-stylesheet"　で外部定義 */
/* html, body {
  height: 100%;
  overflow: hidden; 
} */

body {
    /* 構築まえのDOMを見せないために隠しておく */
    visibility: hidden;
    
    /* Noto Sans JP	スッキリ、モダン、誰にでも合う*/
    font-family: 'Noto Sans JP', sans-serif;
    
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--normal-text-color);
    display: flex;
    height: auto; /*← 明示しない方が安全 */
    overflow: auto; /* ← スクロール許可 */    

  }
.menu_group a {
    font-size: 16px;
    color: var(--normal-text-color);
    text-decoration: none;
    transition: color 0.3s;
    display: block;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: right;
}

.menu_group a:hover {
    color: var(--hover-background-color);
}

.menu_group a.external {
    position: relative;
}

.menu_group a.external::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

/* 左側メニューのスタイル */
.menu {
    position: relative; /* ロゴの絶対配置の基準 */
    height: 100vh;
    background-color: inherit; /* 親要素の背景色を引き継ぐ */
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.menu h2{
    width: 100%;
    font-size: 16px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 2px;
    /* border-bottom: 2px solid var(--normal-background-color); */
    padding-bottom: 0px;
}

#menu-container {
    background-color: inherit; /* 親要素の背景色を引き継ぐ */
    z-index: 10;            /* スマホモードでメインペインの上に表示するためにz-indexを高くする */
    overflow-y: auto;      /* ← 追加：縦スクロール可能にする */
    flex-grow: 1;          /* ← 追加：縦方向に残りのスペースを埋める */
}

.menu_group {
    margin-bottom: 20px;
    padding-left:10px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: inherit; /* 親要素の背景色を引き継ぐ */
}

.menu_group .menu_item {
    width: 100%;
    display: block;
    background-color: var(--normal-background-color);
    color: var(--button-text-color);
    border: none;
    padding: 3px 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
    text-align: right;
    justify-content: flex-end;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.menu_group .menu_item:active {
    background-color: var(--active-background-color);
    transform: translateY(3px);
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.4);
}

.menu_group .menu_item:hover {
    background-color: var(--hover-background-color);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

/*===== 選択状態 ======*/
.menu_group .active_item {
    background-color: var(--active-background-color);
    border: 2px solid var(--active-background-color);
    transform: translateX(4px); /* 右に移動 */
    transition: transform 0.3s ease; /* スムーズなアニメーションを追加 */
}


/* サイトのタイトル コンテナー*/
.menu .title {
    display: flex; /* Flexboxを有効化 */
    background-color: inherit; /* 親要素の背景色を引き継ぐ */
    justify-content: space-between; /* 子要素を左右に振り分け */
    align-items: center; /* 垂直方向を中央揃え */
    margin: 0;
    padding-left:10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    z-index: 10; /* 会社ロゴに隠されないようにする */
}
/* サイトのタイトルの文字設定 */
.menu .title .site-title {
  font-size: 24px;
  font-weight: bold;            /* 太字にする */
  margin-bottom: 2px;
  margin: 0;
  padding: 0;
  white-space: nowrap; 
}
/* サイトのタイトルの横のロゴ */
.menu .title img {
    height: 24px; /* ロゴ画像の高さを調整 */
    width: auto; /* アスペクト比を維持 */
    margin: 0;
    padding: 0;
}


/* 会社のロゴ画像を一番下に固定 */
.menu .company-logo {
  /* position: absolute; */
  bottom: 0;
  width: 100%;         /* ← 親メニュー幅に合わせてロゴコンテナを広げる */
  text-align: center;
  padding: 0px; /*         ← 余白をなくす*/
  box-sizing: border-box;
}

/* ロゴ画像を中央に寄せる */
.menu .company-logo img {
  height: auto;
  display: block;
  margin: 8px auto;          /* ← 中央寄せのキモ */
  padding: 0;                /* ← 必要なら余白をゼロに */
  box-sizing: border-box;
  width: auto;               /* ← 必要に応じて幅を調整 */
  max-width: 80%;            /* ← 幅制限（お好みで） */
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 中央の領域、サブメニューとメインペイン */
.main_layout {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    width: 100%;
    height: 100vh; /* 高さを画面全体に設定 */
    overflow: hidden; /* スクロールをmain_paneに任せる */
}
/* サブメニューのスタイル */
.submenu {
    display: flex;     /* Flexboxレイアウトを適用 */
    justify-content: space-between; /* 左右に要素を分ける */
    align-items: bottom;  /* 縦方向の中央揃え */
    height: auto;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    }

/* メインペインのコンテンツのタイトル */
#current_view {
    color: var(--normal-text-color);
    font-size: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    border: none;
    white-space: nowrap; /* 改行を防ぐ */
    overflow: hidden; /* 溢れる部分を隠す */
}

.submenu .buttons {
    display: flex;   /* ボタンを横並びにする */
    gap: 5px;       /* ボタン間の隙間 */
}

.submenu button,
#menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  background-color: var(--normal-background-color);
  color: var(--button-text-color);
  border: none;
  border-radius: 5px;
  white-space: nowrap;
}

.submenu button:hover,
#menu-toggle:hover {
  background-color: var(--hover-background-color);
}

.submenu button:active,
#menu-toggle:active {
  background-color: var(--active-background-color);
  transform: translateY(2px);
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* タブメニューのスタイルシート */
/* 番号付きクラスの色定義 */
/* タブが選択された場合は、メインペインのボーダーの色を合わせる */
/* 色の定義 */
:root {
    --tab-text:WHITE;         /*  タブメニューの文字色    */
    --tab-0-color: #1F6B43;  /* 濃いエメラルドグリーン */    
    --tab-1-color: #4B3FBF;  /* 改善版ロイヤルパープル*/
    --tab-2-color: #8B4513;  /* Golden Brown */
    --tab-3-color: #2A3F5F;  /* Deep Blue */
    --tab-4-color: #800020;  /* Burgundy */

    --scrollbar-thumb-color: #888;
    --scrollbar-track-color: #eee; /* ← ここで背景色を定義 */
  }

/*===== タブメニュー ======*/
/* タブグループ（初期状態では非表示） */
.tab_group {
  display: none;
}

/* タブを表示するコンテナ */
.tabmenu {
  background-color: inherit;
  display: flex;
  padding-top: 2px;
  justify-content: flex-start;
  align-items: flex-end;  /* 下寄せ */
  position: relative;
  z-index: 0;
  overflow-x: auto;
  white-space: nowrap;

  /*FireFoxのスクロールバー設定*/
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* ChromeやSafariなどのwebkid系のスクロールバー設定 */
.tabmenu::-webkit-scrollbar {
  height: 8px;
}
.tabmenu::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 4px;
}
.tabmenu::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}

/* 非表示状態 */
.tabmenu.hidden {
  display: none;
}

/* タブの通常状態 */
.tabmenu .menu_item {
  top: 6px;
  height: 36px;
  font-size: 16px;
  position: relative;
  margin: 0px; /* 通常は下げておく */
  border: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: auto;   /* 👈 下寄せのキモ */
  margin-bottom: 0px;
  margin-right: 2px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, margin-top 0.3s ease;
  color: var(--tab-text);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* タブのマウスホバー */
.tabmenu .menu_item:hover {
  color: var(--tab-text);
}
/* タブをクリックした瞬間 */
.tabmenu .menu_item:active {
  transform: translateY(3px);
}
/* 選択されている状態のタブ */
.tabmenu .active_item {
  top: 0px; /* 上に移動させる */
  height: 42px;
  padding-bottom: 10px;
}

/* メニューから表示された場合のペイン枠 */
.pane-menu {
  border: 2px solid var(--active-background-color);
}

.tabmenu-0 {
  scrollbar-color: #888 var(--tab-0-color); /*スクロールバーの色*/
}

/* タブ、タブスクロールバーとペインのカラーパターン設定 */
.tab-0 { background-color: var(--tab-0-color); }
.pane-0 {
  border: 2px solid var(--tab-0-color);
  border-top: 6px solid var(--tab-0-color);
}

.tab-1 { background-color: var(--tab-1-color); }
.pane-1 {
  border: 2px solid var(--tab-1-color);
  border-top: 6px solid var(--tab-1-color);
}

.tab-2 { background-color: var(--tab-2-color); }
.pane-2 {
  border: 2px solid var(--tab-2-color);
  border-top: 6px solid var(--tab-2-color);
}

.tab-3 { background-color: var(--tab-3-color); }
.pane-3 {
  border: 2px solid var(--tab-3-color);
  border-top: 6px solid var(--tab-3-color);
}

.tab-4 { background-color: var(--tab-4-color); }
.pane-4 {
  border: 2px solid var(--tab-4-color);
  border-top: 6px solid var(--tab-4-color);
}

/* メインコンテンツ */
.main {
    flex: 1; /* メニューの残り幅に合わせて自動調整 */
    overflow: hidden; /* スクロールをmain_paneに任せる */
    padding: 0;
    background-color: var(--main-pane-background-color);
    overflow: auto; /* コンテンツが多い場合のスクロール対応 */
    border: 2px solid red;  /* 実線のボーダー、動作確認用、通常はnoneで消す*/
    border: none; /* 枠線を消す */
    z-index: 1; /* タブメニューの上に表示してタブがくっついているように見せる */

}
/* main の中身、ここが display:block or none になることで表示を切り替える*/
.main_pane {
    overflow: auto;  /* 表示しきれない場合にスクロールバーを表示 */
    display: block; /* 初期状態は表示にしないと生成できない、
                        生成したあとにJSで非表示にしておく */
    width: 100%;
    height: 100%;
    padding: 0px 0px 0px 0px; /* 上、右、下、左の順 */
    box-sizing: border-box; /* パディングを含めたボックスモデルを適用 */
    resize: none; /* リサイズを無効化 */
    min-width: 0; /* 最小幅を制限しない */
    overflow: auto; /* ← スクロール許可 */    

}

/* main_pane の中にあるコンテンツの設定*/
.content_box {
    margin: 0px 10px 10px 10px; /* 上、右、下、左の順 */
    border: 2px solid red;      /* 実線のボーダー、動作確認用、通常はnoneで消す */
    border: none;               /* 枠線を消す */
    padding: 0px 0px 0px 0px; /* 上、右、下、左の順 */
}
.margin_0 {
    margin: 0;
}
/* preタグの中を自動折り返しするための設定*/
.wrapped {
    white-space: pre-wrap; /* 自動折り返しを有効化 */
    word-wrap: break-word; /* 長い単語を折り返す */
    overflow-wrap: anywhere;   /* どこでも改行可能にする */
}
/* mdファイルを自動折り返しするための設定*/
.wrapped_md {
    white-space: pre-wrap; /* 自動折り返しを有効化 */
    white-space: normal;   /* 折り返しを有効にする */
    word-wrap: break-word; /* 長い単語を折り返し */
    overflow-wrap: anywhere;   /* どこでも改行可能にする */
}

/* 概要のスタイルシート */
.intro h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #001f4d; /* 紺色 */
    text-align: left;
}

.intro p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.6;
    text-align: left;
}
/* ダウンロード画面のスタイルシート */
.download {
    text-align: left;
}

/* swagger-uiのスタイルシート */
.swagger-ui .scheme-container {
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    margin: 0 0 5px;
    padding: 5px 0;
}

/* ここから下はスマホ対応のハンバーガーメニュー */
/* ハンバーガーメニューのボタン */
#menu-toggle {
  display: none; /* デフォルトでは非表示 */
  position: fixed;
  top: 6px;
  left: 6px;
  z-index: 1000;
}

/* 📱 スマホ向けのスタイル */
/* ブレークポイントを変更するときは両方書き換えること */
:root {
    --breakpoint-sm: 768;
}
@media screen and (max-width: 768px) and (pointer: coarse) {
    /* スマホで表示するスタイル */
    /* メニューボタンを表示 */
    #menu-toggle {
        display: block; /* スマホでは表示 */
    }
    #menu-container {
      width: 60vw !important;
      min-width: 60vw !important;
    }
  
    /* サイトタイトルがメニューボタンに隠れないように移動する */
    .menu .title .site-title {
      margin-left: 40px;
      font-size: 24px; /* ← スマホ時にフォントサイズを大きく */
    }
    /* サイトタイトルの横のロゴを大きくす */
    .menu .title img {
      height: 40px;
    }
    /* スマホメニューの時に下に余白を入れる */
    .menu_group {
      margin-bottom: 40px;
    }
    /* 左メニューのボタンの文字サイズ */
    .menu_group .menu_item {
      font-size: 24px; /* ← スマホ用の文字サイズを指定 */
    }
    /* 左メニューのリンクの文字サイズ */
    .menu_group a {
        font-size: 26px;
    }

    /* メインペインのタイトルがメニューボタンに隠れないように移動する */
    #current_view {
        margin-left: 40px;
        font-size: 24px; /* ← スマホ時にフォントサイズを大きく */
    }
    
    /* 印刷ボタンと別ウィンドウボタンはスマホでは非表示 */
    #print_button, #open_new_window{
        display: none;
    }

    /* メニューを隠す */
    .menu {
        transform: translateX(-100%);
        position: fixed;
        transition: transform 0.3s ease-in-out; /* アニメーション表示 */
    }

    /* メニューが開いたとき */
    .menu.open {
      transform: translateX(0);
    }
}

@media screen and (max-width: 768px) and (pointer: fine) {
  /* PCでウィンドウを狭めた場合のフォールバック用 */
  /* メニューボタンを表示 */
  #menu-toggle {
    display: block; /* スマホでは表示 */
  }

  /* サイトタイトルがメニューボタンに隠れないように移動する */
  .menu .title .site-title {
    margin-left: 32px;
  }

  /* メインペインのタイトルがメニューボタンに隠れないように移動する */
  #current_view {
      margin-left: 40px;
  }
  
  /* メニューを隠す */
  .menu {
      transform: translateX(-100%);
      position: fixed;
      transition: transform 0.3s ease-in-out; /* アニメーション表示 */
  }

  /* メニューが開いたとき */
  .menu.open {
    transform: translateX(0);
  }

}