/* ==========================================================================
   1. 基本設定（リセット・ベース）
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  background-color: #fff;
}

/* 画像の下に謎の隙間ができるのを防ぐ */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* リンク色設定（screen.cssから移植・整理） */
a {
  color: #4376b4;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

/* 全体を包むコンテナ（900px中央寄せ） */
.main-wrapper {
  width: 900px;
  margin: 0 auto;
  text-align: left;
}

.main-container {
  width: 900px; /* サイトの基本幅 */
  margin: 0 auto; /* これで中身が丸ごと中央に寄る */
  text-align: left; /* 中の文字は左寄せに戻す（重要） */
}

.custom-details {
  display: block; /* ブロック要素として明示 */
  width: 100%; /* 親（900px）の幅いっぱいに広がる */
  margin: 20px 0; /* 上下の余白だけ指定 */
  /* その他の枠線・角丸設定はそのまま */
}

/* ついでに hr も 900px に揃える */
.main-container hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

/* ==========================================================================
   リンク・テキストの再定義（screen.css からの救出）
   ========================================================================== */

/* サイト全体の標準的なリンク（screen.cssの #4376B4 を継承） */
a {
  color: #4376b4;
  text-decoration: none;
  transition: color 0.2s;
}

a:visited {
  color: #4376b4; /* 訪問済みでもリンク色変更なし */
}

a:hover {
  color: #f60; /* ホバー時は少しオレンジ */
  text-decoration: none;
}

/* PDFリンクなどの「アイコン＋文字」を綺麗に並べる設定 */
.hou_tab a,
.custom-details a {
  display: inline-flex; /* アイコンと文字を横並びに */
  align-items: center; /* 垂直方向の真ん中で揃える */
  gap: 5px; /* アイコンと文字の間の隙間 */
  text-decoration: underline;
  margin-bottom: 5px;
}

/* PDFアイコン自体の微調整 */
.hou_tab a img,
.custom-details a img {
  display: inline; /* block解除 */
  width: 17px; /* 指定のサイズに固定 */
  height: auto;
  flex-shrink: 0; /* アイコンが潰れないように */
}

/* 箇条書きの中のリンクが縦に伸びるのを防ぐ */
.row dt a {
  display: inline-flex;
  width: auto; /* 幅をコンテンツに合わせる */
}

/* 各コーナー末尾のPDFリンク用 */
.pdf-download-link {
  text-align: center; /* 中央寄せ（左寄せなら left、右寄せなら right） */
  margin: 0px;
  padding: 15px;
  background-color: #f9f9f9; /* 軽く背景色をつけると「ダウンロード場所」だと分かりやすい */
  border-top: 1px dashed #ccc; /* 区切り線を入れる */
}

.pdf-download-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #4376b4;
  text-decoration: underline;
}

.pdf-download-link a:hover {
  color: #f60;
  background-color: #fffbe6; /* ホバー時に少し背景を変える */
}
/* ==========================================================================
   2. ヘッダーエリア
   ========================================================================== */

/* トップバー（事務所名・サイトマップ等） */
.header-top-container {
  background-color: #3e6f6b;
  width: 100%;
}
.header-top-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 900px;
  margin: 0 auto;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
}
.utility-menu a {
  color: #ffffff;
  text-decoration: none;
}
.utility-menu a:hover {
  text-decoration: underline;
}

/* メインヘッダー（ロゴ・検索窓） */
.header-main-container {
  width: 100%;
  background-color: #ffffff;
}
.header-main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 下揃えで安定感を出す */
  width: 900px;
  margin: 0 auto;
  padding: 0;
}

/* ロゴ表示サイズ設定 */
.header-logo img {
  width: 300px; /* 900pxの1/3サイズに設定 */
  margin-top: 1px;
}

/* 右側：バーと検索等の塊 */
.header-right-side {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}
.top-line-bar {
  height: 10.5px;
  background-color: #31aca8;
  width: 100%;
  margin-top: 1px;
  margin-bottom: 5px;
}
.header-utilities {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 8px;
  padding-right: 10px;
}
.text-size-link a {
  font-size: 12px;
  color: #333;
  text-decoration: none;
}
.search-form {
  display: flex;
  gap: 5px;
}
/* ==========================================================================
   3. ナビゲーションメニュー（ガタつき防止・文字間調整版）
   ========================================================================== */
/* --- ナビゲーションメニュー：ガタつき防止・文字間調整版 --- */
.n_menu {
  display: flex; /* Flexboxで均等配置 */
  width: 900px; /* 900pxに固定 */
  height: 30px; /* 高さを50pxに固定 */
  margin: 1px auto;
  padding: 0;
  list-style: none;
  background: #0e9e97;
  overflow: hidden; /* はみ出し防止 */
}

.n_menu li {
  flex: 1; /* 5項目を180pxずつに均等割 */
  margin: 0;
  padding: 0;
}

.n_menu li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  text-align: center;
  text-decoration: none;

  /* 【重要】上下中央揃えは line-height で行う。paddingは使いません */
  line-height: 30px; /* heightと同じ数値にすると中央に来ます */

  /* 文字のバランス調整 */
  font-size: 16px; /* 視認性の良いサイズ */
  font-weight: normal; /* 力強い印象に */
  letter-spacing: 0.2em; /* 文字の間隔をゆったり広げる（0.3〜0.5emがおすすめ） */
  padding-left: 0em; /* letter-spacingを入れると右に寄るため、左にも同量足して中央補正 */

  transition: background 0.5s; /* 色の変化だけをスムーズに */
}

.n_menu li a:hover {
  background: #006964; /* マウスホバー時の色変更のみ */
  padding: 0; /* 【重要】paddingを追加しないことでサイズを固定 */
  margin: 0;
}

/* ==========================================================================
   4. メインコンテンツ（事業タイトル・詳細ボックス等）
   ========================================================================== */
hr {
  width: 900px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 20px auto;
}

.assess_title {
  width: 900px;
  background-color: #27aa27;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #c9c9c9;
  margin: 30px auto;
  display: flex;
  justify-content: center;
}

/* アコーディオン（details/summary） */
.custom-details {
  display: block;
  width: 900px;
  margin: 20px auto;
  border: 1px solid #005aa0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.custom-summary {
  padding: 20px 25px;
  background-color: #f0f8ff;
  color: #005aa0;
  font-weight: bold;
  cursor: pointer;
  border-bottom: 1px solid #e0eaf3;
}

/* 情報ボックス（hou_tab） */
.hou_tab {
  width: 90%; /* 中身なので少し余裕を持たせる */
  margin: 0 auto 20px;
  overflow: hidden;
}
.hou_tab > p {
  border-style: solid;
  border-color: #005aa0;
  border-width: 0 0 0 5px;
  padding-left: 15px;
  background-color: #f6f6f6;
  margin: 0;
  padding: 8px 15px;
  font-weight: bold;
}

/* 説明リスト形式のレイアウト */
.description-list {
  padding: 15px;
  margin: 0;
}

.description-list a {
  text-decoration: none;
}

.row {
  display: flex;
  margin-bottom: 10px;
}
.row dt {
  width: 220px;
  flex-shrink: 0;
  font-weight: bold;
}
.row dd {
  margin: 0;
  flex-grow: 1;
}

/* 記者発表リンク等 */
.web_q_press {
  width: 800px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  font-size: 15px;
}

/* --- 公告（リード文）全体のスタイル --- */
.notice-body {
  width: 800px; /* 900pxの枠内で少し余裕を持たせる */
  margin: 0 auto;
  text-align: left;
  font-size: 16px; /* 読みやすいサイズにアップ */
  line-height: 1.8; /* 行間をゆったりさせて公文書らしく */
  color: #333;
}

/* 「公告」という見出し */
.notice-title {
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  margin: 20px 0;
}

.notice-read {
  text-indent: 1em;
}

/* 日付 */
.notice-date {
  margin-top: 20px;
}

/* 局長名（右寄せ） */
.notice-signature {
  text-align: right; /* text-indent ではなく右寄せが安全 */
  margin-top: 5px;
  margin-bottom: 30px;
}
/* ==========================================================================
   5. フッターエリア（モダン版）
   ========================================================================== */
.footer-container {
  width: 900px;
  margin: 40px auto 20px;
  text-align: center;
  font-size: 14px; /* 少しだけ大きくして読みやすく */
  border-top: 1px solid #ccc;
  padding-top: 30px;
  color: #444;
}

.footer-info {
  margin-bottom: 15px;
  line-height: 1.8;
}

.copyright {
  font-size: 12px;
  color: #888;
}