/* 全体レイアウト */
body {
  max-width: 960px;       /* コンテンツ幅を固定 */
  margin: 0 auto;         /* ブラウザ中央に配置 */
  padding: 20px;          /* 余白を追加 */
  background-color: #f9f9f9; /* 背景に薄いグレー */
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.8;
}

/* セクションごとの余白 */
section {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

section:last-of-type {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: 1px solid #ddd;
}

#container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}


/* 見出しデザイン */
h1, h2, h3 {
  margin: 20px 0 15px;
  font-weight: bold;
  color: #222;
}

/* h1 見出しのスタイル変更 */
h1 {
  font-size: 1.7em;
  margin-bottom: 20px;
  color: #b30000;     /* 深めの赤文字 */
  text-align: left;
  background: none;   /* 背景色を無効化 */
  padding: 0;         /* 余白も調整 */
}

h2 {
  font-size: 1.6em;
  padding-bottom: 5px;
  border-bottom: 3px solid #c62828; /* 赤いアンダーライン */
  display: inline-block;
}

h3 {
  font-size: 1.2em;
  border-left: 4px solid #c62828;
  padding-left: 10px;
}

/* 強調表示 */
.highlight {
  background: #ffebee;
  padding: 2px 6px;
  border-radius: 3px;
  color: #c62828;
  font-weight: bold;
}

/* リスト */
ul {
  margin: 10px 0 20px 20px;
  padding: 0;
}

ul li {
  margin-bottom: 8px;
}

/* 表 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 0.95em;
}

table th, table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

table th {
  background: #ef5350;
  color: #fff;
}

table tr:nth-child(even) {
  background: #f9f9f9;
}

/* 詳細FAQ */
details {
  margin: 10px 0;
  padding: 10px;
  background: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 4px;
}

details summary {
  cursor: pointer;
  font-weight: bold;
  color: #c62828;
}

/* 画像調整 */
img {
  display: block;
  max-width: 100%;   /* 横幅はみ出し防止 */
  height: auto;      /* アスペクト比維持 */
  margin: 20px auto; /* 中央寄せ */
  border-radius: 6px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}

/* スマホ対応 */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }
  h1 {
    font-size: 1.6em;
    padding: 10px 15px;
  }
  h2 {
    font-size: 1.3em;
  }
  h3 {
    font-size: 1.1em;
  }
}

/* テーブルの横スクロール対応 */
.table-wrapper {overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px}
.table-wrapper table{width:100%;border-collapse:collapse;min-width:720px}



/* アイキャッチ画像エリア */
.eyecatch {
  text-align: center;        /* 画像を中央寄せ */
  margin: 20px 0 30px;       /* 上下余白 */
}

.eyecatch img {
  max-width: 100%;           /* 横幅は親要素に合わせる */
  height: auto;              /* 縦横比を維持 */
  border-radius: 12px;       /* 角丸で柔らかい印象に */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* ふわっとした影 */
}



/* ====== ヘッダーナビ（横並び・スラッシュ区切り） ====== */
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  flex-wrap: wrap;
  gap: 0.3em;
  line-height: 1.2; /* 上下感覚を狭く */
}

.nav-menu li {
  display: inline;
  font-size: 0.8em;
  color: #666; /* スラッシュの色 */
}

.nav-menu a {
  text-decoration: none;
  color: #0066cc !important; /* 青色を強制 */
  font-size: 0.8em;
}

.nav-menu a:hover {
  text-decoration: underline;
}

/* ヘッダーナビ用に背景を打ち消す */
.nav-menu a {
  background: none !important;  /* 背景色を無効化 */
  padding: 0;                   /* 背景用の余白を消す */
  border: none;                 /* 枠線が付いていた場合のリセット */
  text-decoration: none;
  color: #333;
  font-size: 0.8em;             /* 小さめ文字 */
}

.nav-menu a:hover {
  text-decoration: underline;   /* ホバー時は下線だけ */
}

/* ====== フッターナビ（文字だけ／PC用は横並び） ====== */
.footer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  line-height: 1.2;
}

.footer-menu li {
  font-size: 0.9em;
}

/* PCではリンクの後ろにスラッシュを入れる */
.footer-menu li::after {
  content: "/";
  margin: 0 0.4em;
  color: #666;
}

/* 最後のリンクにはスラッシュを付けない */
.footer-menu li:last-child::after {
  content: "";
}

.footer-menu a {
  text-decoration: none;
  color: #0066cc !important;
  font-size: 0.9em;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.footer-menu a:hover {
  text-decoration: underline;
}

footer {
  margin-top: 5px;
  padding: 10px 0;
  border-top: none;
  background: none !important;
  text-align: left;
}

/* ====== スマホ用調整 ====== */
@media (max-width: 600px) {
  .footer-menu ul {
    display: block;     /* 横並びを解除 → 縦並び */
    line-height: 1.4;   /* 行間を少し詰める */
  }

  .footer-menu li {
    font-size: 0.95em;
    display: block;
    margin: 4px 0;      /* 縦並びの間隔を調整 */
  }

  /* スマホではスラッシュを消す */
  .footer-menu li::after {
    content: "";
  }

  .footer-menu a {
    font-size: 1.0em;
  }
}


/* 三本線/✖ボタン */
#hamburger-toggle {
  font-size: 1.8em;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}

/* ドロップダウン部分 */


.hamburger-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hamburger-links li {
  margin: 5px 0;
}

.hamburger-links a {
  text-decoration: none;
  color: #0066cc;
  font-size: 1.0em;
  padding-left: 16px !important;  /* ← 左に余白を追加 */
}

.hamburger-links a:hover {
  text-decoration: underline;
}

.hamburger-links {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  width: 90vw;
  max-width: 600px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* PCでは複数列 */
@media (min-width: 601px) {
  .hamburger-links ul {
    display: flex;
    flex-wrap: wrap;   /* 横並び折り返し */
    gap: 0.8em 1.5em;  /* 上下・左右間隔 */
  }
  .hamburger-links li {
    margin: 0;
    font-size: 0.9em;
    white-space: nowrap; /* 改行せず横に並べる */
  }
}

/* スマホは縦並び */
@media (max-width: 600px) {
  .hamburger-links {
    position: fixed !important;  /* ← absoluteだと右寄せされやすい */
    top: 50px !important;
    left: 5% !important;         /* 左右に5%余白 */
    right: 5% !important;
    width: 90% !important;       /* 画面幅の90% */
    max-width: none !important;  /* 最大幅制限を解除 */
  }
}

.nav-menu::before { 
    content: "他のページはこちら ▼";
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.page-toc {
  max-width: 240px;
  margin: 10px auto 20px;
  font-size: 0.75em;
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* PC・スマホ共通：headerをflexで横並び */
header {
  display: flex;
  justify-content: space-between; /* h1左・三本線右 */
  align-items: flex-start;        /* 上端で揃える */
  width: 100%;          /* コンテナ内で100% */
  box-sizing: border-box;
}


/* ヘッダー部分 */
.toc-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
}

.toc-icon {
  font-size: 1em;
  margin-right: 6px;
  color: #000; /* 黒いリストマーク */
}

.toc-title {
  font-weight: bold;
  margin-right: auto;
}

.toc-toggle {
  font-size: 0.9em;
  color: #c62828; /* 赤文字 */
  cursor: pointer;
}

/* リスト部分 */
.toc-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.toc-list li {
  position: relative;
  padding-left: 16px;
  margin: 3px 0;
}

.toc-list li::before {
  content: "•";
  position: absolute;
  left: 6px;
  color: #c62828;
  font-size: 1.0em;
  line-height: 1.4;
}

.toc-list a {
  text-decoration: none;
  color: #0066cc; /* 青リンク */
  display: block;
  padding: 3px 4px;
  font-size:1.1em;
  line-height: 1.3;
  transition: color 0.2s;
}

.toc-list a:hover {
  color: #b30000;
}

.intro-title {
  font-size: 1.6em;              /* h2 と同じ大きさ */
  padding-bottom: 5px;
  border-bottom: 3px solid #c62828; /* h2 と同じ赤いアンダーライン */
  display: inline-block;
  font-weight: bold;
  color: #222;
  margin: 20px 0 15px;
}

.menu-label {
  font-weight: bold;
  margin: 8px 0;
  font-size: 0.9em;
  color: #333;
  padding-left: 16px;
}

/* アイキャッチ画像右下にPRテキストを表示 */
.eyecatch {
  position: relative; /* 子要素を絶対配置できるようにする */
}

/* PC・スマホ共通：headerをflexで横並び */
header {
  display: flex;
  justify-content: space-between; /* h1左・三本線右 */
  align-items: flex-start;        /* 上端で揃える */
}

header h1 {
  flex: 1;                        /* 残り幅を全て使う */
  margin: 0;
  font-size: 1.7em;
  line-height: 1.4;
  color: #b30000;
}

.hamburger-menu {
  flex: 0 0 auto;                 /* アイコン分だけ幅を確保 */
  margin: 0;
  padding: 0;
  position: relative;  /* static → relative に変更 */
  z-index: 2000;       /* アイキャッチより前面に */
}

.hamburger-links {
  position: absolute;
  top: 100%;   /* ボタンの下に展開 */
  right: 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 2001; /* アイキャッチよりさらに上 */
}

.hamburger-menu button {
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
}



/* スマホ時h1調整 */
@media screen and (max-width: 600px) {
  header h1 {
    font-size: 1.4em;   /* ← スマホでは小さめ */
  }
}

.koukoku {
    text-align:right; 
    color:red; 
    font-size:12px; 
    text-decoration: underline;
}

/* PC表示時のみハンバーガーメニューに左余白を追加 */
@media (min-width: 769px) {
  #hamburger-toggle {
    margin-left: 20px; /* ← 好きな値に調整。20〜40px程度がおすすめ */
  }
}