/* ページ全体のコンテナ */
#container {
  max-width: 900px;   /* 横幅の最大値を指定 */
  margin: 0 auto;     /* 左右中央寄せ */
  padding: 0 16px;    /* スマホ用にちょっと余白 */
  background: #fff;   /* 背景を白に固定したい場合 */
}


#title {
  background-color: #005781;
  display: flex;
  justify-content: center; /* h1を中央に */
  align-items: center;
  position: relative;      /* h2を絶対配置するため */
  padding: 12px 10px;      /* 少し高さを確保 */
}

/* h1（タイトル） */
#title h1 {
  color: #fff;
  font-size: 1.4em;
  margin: 0;
  text-align: center;
}

/* h2（更新日）を右下に配置 */
#title .update-date {
  color: #fff;
  font-size: 0.8em;
  margin: 0;
  position: absolute;
  right: 12px;
  bottom: 4px;   /* 下に寄せる */
}

/* 本文リンク */
a {
  color: #0066cc;
  text-decoration: underline;
}
a:hover {
  color: #004a99;
}

h5 {
  background-color: #4a86c5; /* 青色 */
  color: #ffffff;           /* 白文字 */
  padding: 4px 8px;         /* 内側の余白 */
  margin: 1.5em 0 0.5em;    /* 上下の余白 */
  font-size: 0.95em;          
  font-weight: bold;
}


h6 {
  font-size: 1em;       
  margin: 0.5em 0;      /* 上下にちょっと余白 */
  font-weight: normal;  
}

p {
  margin: 0;       /* 上下の余白をなくす */
  padding: 0;      /* 内側の余白も不要なら 0 に */
}

/* 表 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

th, td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}

table thead th {
  background-color: #66ccff; /* 水色 */
  text-align: center; 
}

table tbody th {
  background-color: #f9f9f9; 
  text-align: left;
}

/* タブを包む枠：背景はつけない */
.tabs {
  margin: 1em 0;
  display: flex;
  gap: 4px;
}

.tab {
  padding: 6px 16px;
  background: #b0b0b0;   /* 非アクティブ：濃いグレー */
  color: white;
  cursor: pointer;
  border: none;
  border-radius: 4px 4px 0 0;
  font-size: 0.95em;
}

.tab:hover {
  background: #b3b3b3;   /* hover時：さらに少し濃いグレー */
}

.tab.active {
  background: #005781;   /* アクティブ：薄いグレー */
  font-weight: bold;
}

/* コンテンツ部分 */
.tab-content {
  display: none;
  background: #F8F8FF;  /* コンテンツ背景（ゴーストホワイト） */
  padding: 10px;
  border-radius: 0 0 4px 4px;
}

.tab-content.active {
  display: block;
}

.notice {
  color: #000;             
  font-weight: normal;     
  display: flex;           
  align-items: center;     /* アイコンと文字を縦方向で中央揃え */
  gap: 8px;                
  margin: 1em auto;        
  padding: 8px 12px;       
  border: 2px solid red;   
  border-radius: 8px;      
  background: #fff;        
  max-width: 730px;      
}

.notice .icon {
  width: 30px;             
  height: auto;
  flex-shrink: 0;          /* アイコンが縮まないように固定 */
  /* margin-top は不要 */
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;          /* 最初は非表示 */
  background: #005781;    /* 紺色 */
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9em;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 1000;
}

#back-to-top:hover {
  background: #004066;
}


img {
  max-width: 50%;   /* ページ幅の60%までに制限 */
  height: auto;     /* アスペクト比維持 */
  display: block;   /* ブロック要素にして改行扱い */
  margin: 0 0 0 20px; /* 上右下左 → 左だけ20px空ける */
}

.fit-img {
  max-width: 60%;   /* 通常は60% */
  height: auto;
  display: block;
  margin: 0 0 0 20px; /* 左に20px余白 */
}

.small-img {
  max-width: 30%;   /* 特定画像だけさらに小さく */
}

.img-indent {          /* 左に少し寄せる共通クラス */
  display: block;
  margin-left: 2em;    /* or 20px; */
  max-width: calc(100% - 2em);
  height: auto;
}

.arrow {
  width: 28px;
  height: auto;
  display: block;
  margin: 0 0 0 40px;  /* 上右下左 → 左だけ40px余白 */
}