/* ================================
   メインレイアウト調整
        2025.5.15
        2025.6.24 スマホ対応
   ================================ */

/* サイドバーの幅を狭くする */
.md-sidebar {
  width: 200px; /* 必要に応じて調整 */
}

/* 本体部分の調整 */
.md-main {
  margin-left: 0px; /* サイドバーの幅に合わせて調整 */
  margin-top: -20px; /* 上にあげる。必要に応じて値を調整 */
}

/* ================================
   カラーとロゴ設定
   ================================ */

/* ヘッダの色 */
:root > * {
  --md-primary-fg-color: #007f7f;
  --md-primary-fg-color--light: #007f7f;
  --md-primary-fg-color--dark: #007f7f;
}

/* ロゴのサイズ */
.md-logo img {
  width: 30px !important;
  height: auto !important;
}

/* 見出しを強調 */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700 !important; /* より太く */
}

/* ================================
   ヘッダメニューのレスポンシブ対応
   ================================ */

/* 共通スタイル（スマホ・PC両対応） */
.header-nav {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
  position: relative;
  background-color: #007f7f;
  padding: 0.2rem 0;
}

.header-nav ul {
  display: inline-flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.header-nav ul li {
  margin-right: 20px;
  flex-shrink: 0;
}

.header-nav ul li a {
  font-size: 18px;
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
}

.header-nav ul li a:hover {
  color: #00cccc;
}

/* PC（画面が広いとき）は中央揃え */
@media screen and (min-width: 960px) {
  .header-nav {
    display: flex;
    justify-content: center;
  }

  .header-nav ul {
    display: flex;
  }
}