/* ===========================
   1. リセット / 基本設定
=========================== */
/* 全体 */
body {
  margin: 0;
  font-family: sans-serif;
}

a:link,
a:visited {
  color: inherit;
  /* または同じ色を指定 */
}

/* ===========================
   2. ヘッダー（固定メニュー）
=========================== */
/* ヘッダー */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  /* background: #003366; */
  /* background: rgba(0, 51, 102, 0.7); */
  /* 0.0〜1.0 で透明度を調整 */
  background: linear-gradient(rgba(0, 51, 102, 0.8), rgba(0, 51, 102, 0.5));
  color: #fff;
}

.space-header {
  min-height: 36px;
  /* 最小ヘッダーの高さ(保険) */
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

/* PCメニュー */
.nav .menu {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.header .nav .menu {
  padding-left: 50px;
  /* ← 左に余白を追加 */
  padding-right: 50px;
  /* ← 右にも余白を追加（必要なら） */
}

.menu li {
  position: relative;
}

.menu a {
  color: #fff;
  text-decoration: none;
  padding: 8px 0;
  display: block;
}

.menu a:hover {
  text-decoration: underline;
  /* ホバー時にアンダーライン表示 */
}

.menu li .submenu {
  position: absolute;
  top: 100%;
  right: 0;
  /* ← 右端に揃える */
  left: auto;
  /* ← 左方向に出さない */
}

/* ドロップダウン */
.submenu {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  background: #fff;
  color: #333;
  list-style: none;
  padding: 10px 0;
  width: auto;
  min-width: 120px;
  white-space: nowrap;
  /* ← 折り返し防止（重要） */
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.submenu li a {
  color: #333;
  padding: 8px 15px;
}

.has-sub:hover .submenu {
  display: block;
}

/* ===========================
   3. 本文（画像レスポンシブなど）
=========================== */
h3 {
  text-align: left;
  /* 通常は左寄せ（必要なら） */
}

h3.center {
  text-align: center;
  /* このクラスだけ中央寄せ */
}

body {
  padding-top: 60px;
}

.fullwidth {
  width: 100%;
  height: auto;
}

/*
img {
  width: 100%;
  height: auto;
  display: block;
}
*/
/* ニュースタイトル用 */
.news-heading {
  max-width: 900px;
  /* ニュース一覧と幅を揃える */
  margin: 0 auto 20px;
  /* 中央寄せ + 下に余白 */
  padding: 0 20px;
  /* 画面端にくっつかないように */
  font-size: 1.6rem;
  font-weight: bold;
  color: #003366;
  /* 好きな色に変更してOK */
}

/* ニュース一覧全体を中央に */
.news-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
}

/* 1行を横並びにする */
.news-item {
  display: flex;
  align-items: center;
  gap: 12px;
  /* アイコン・日付・タイトルの間隔 */
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

/* 白文字カテゴリラベル */
.news-category {
  display: inline-flex;
  /* ← 幅固定＋中央寄せに最適 */
  justify-content: center;
  /* ← 文字を中央に */
  align-items: center;
  width: 80px;
  /* ← 好きな幅に固定 */
  padding: 3px 0;
  /* ← 上下だけ余白 */
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 3px;
  white-space: nowrap;
  color: #fff;
}

/* カテゴリ別の色（必要なら） */
.news-info {
  background: #003366;
  /* 背景色 */
}

.news-report {
  background: #008080;
}

.news-obituaries {
  background: #7e8181;
}

/* アイコン */
.news-icon {
  width: 20px;
  height: 20px;
}

/* 日付（動かさない） */
.news-date {
  color: #666;
  font-size: 1rem;
  white-space: nowrap;
}

/* タイトル（ふにゃっと動く部分） */
.news-title {
  font-size: 1.1rem;
  /* ← タイトルは一番大きく */
  display: inline-block;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ホバー時のふにゃっ */
.news-title:hover {
  color: #0070c0;
  transform: translateX(6px);
}

table {
  margin: 0 auto;
  /* 左右中央寄せ */
  border-collapse: collapse;
  /* 任意：見た目を整える */
  font-family: "Meiryo", "メイリオ", sans-serif;
}

tr.with-border td {
  border-bottom: 1px solid #333;
  /* 仕切り線あり */
  border-bottom: 1px solid #333;
}

tr.no-border td {
  border-bottom: none;
  /* 仕切り線なし */
  border-top: none;
}

tr.no-top-border td {
  /* 仕切り線なし */
  border-top: none;
}

tr.no-bottom-border td {
  border-bottom: none;
  /* 仕切り線なし */
}

td {
  padding: 8px 12px;
}

th,
td {
  border: 1px solid #333;
  /* 任意のボーダー */
  padding: 8px 12px;
  /* ← ここで余白を調整 */
  font-family: "Meiryo", "メイリオ", sans-serif;
}

/* <th>の背景をグレー、文字色を白に設定 */
.header-gray {
  background-color: #4b4b4b;
  color: white;
}

/* <th>の背景を栗色、文字色を白に設定 */
.header-maroon {
  background-color: maroon;
  color: white;
}

/* <th>の背景をシアン、文字色を黒に設定 */
.header-cyan {
  background-color: cyan;
  color: black;
}

/* 背景を薄紫、文字色を黒に設定 */
.header-lightpurple {
  background-color: #ffccff;
  color: black;
}

/* 背景を薄クリーム色、文字色を黒に設定 */
.header-lightcream {
  background-color: #fffef2;
  color: black;
}

/* 背景を薄水色、文字色を黒に設定 (photo gallery用)*/
.header-photogallery {
  background-color: #e6ffff;
  color: black;
}

/* 佐藤淳先生を偲ぶ会用背景色 */
.shinobukai {
  background-color: #ebdfff;
}

/* ボーダーなし */
.table-noborder,
.table-noborder th,
.table-noborder td {
  border: 0;
  border-collapse: collapse;
}

/* ボーダーあり */
.table-border,
.table-border th,
.table-border td {
  border: 1px solid #333;
  border-collapse: collapse;
}

/* 左右中央に配置 */
.center-cell {
  text-align: center;
  /* ← これだけでOK */
}

/* スライドショー */
.slider {
  position: relative;
  width: 600px;
  /* 好きなサイズに変更 */
  height: 400px;
  overflow: hidden;
  display: inline-block;
  /* 中央寄せに必須 */
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s;
}

.slide.active {
  opacity: 1;
}

/* 文章を囲う枠 */
.container {
  width: 80%;
  /* 全体の幅を80%に */
  margin: 20px auto;
  /* 中央寄せ */
  display: flex;
  /* 横並びにする */
  gap: 20px;
  /* ボックス間の余白 */
}

.box {
  width: 90%;
  /* 横幅をブラウザの80%に */
  max-width: 800px;
  margin: 20px auto;
  /* 左右中央寄せ（上下20pxの余白） */
  padding: 20px;
  /* 内側の余白 */
  background: #fff;
  /* 背景色 */
  border-radius: 20px;
  /* 角丸 */
  box-shadow: 0 4px 12px rgba(79, 163, 255, 0.3);
  /* 影 */
}

.box-blue {
  border: 1px solid #4fa3ff;
}

.box-red {
  border: 1px solid #ff0000;
}

/* 左右の比率を 3:1 にする */
.left {
  flex: 4;
}

.right {
  flex: 1;
}

/* オプション：スマホでは縦並びにしたい場合 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

/* リストの項目間余白変更 */
.normal-space li {
  margin-bottom: 0.3em;
}

.wide-space li {
  margin-bottom: 1em;
}

p.indent {
  text-indent: 1em;
  margin: 0;
  /* テーブル内で余計な余白を出さない */
  white-space: pre-line;
  /* 改行を反映させる */
}

/* 文字の色 */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.white {
  color: white;
}

.maroon {
  color: maroon;
}

.purple {
  color: purple;
}

.yellow {
  color: yellow;
}

/* 文字背景色の色 */
.bg-yellow {
  background-color: yellow;
}

/* 文字の大きさ・太さ */
.small {
  font-size: 0.8em;
  /* 好きなサイズに調整 */
}

.large {
  font-size: 1.2em;
}

.huge {
  font-size: 1.4em;
}

.bold {
  font-weight: bold;
}

/* 余白関連 */
.para {
  margin: 0 0 2.2em 0;
  /* 下方向にだけ余白を付ける */
}

.tight {
  margin: 0;
  margin-top: -0.2em;
  /* ← 好きなだけ詰められる */
}

/* スクロール位置をずらすしくみ */
.anchor {
  scroll-margin-top: 100px;
}

/* ===========================
   4. フッター
=========================== */
/* フッター全体 */
.footer {
  background: rgba(0, 51, 102, 0.8);
  /* ← 半透明にしている */
  color: #fff;
  padding: 40px 20px;
  margin-top: 40px;
}

/* 中身の横並び */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

/* ロゴ部分 */
.footer-logo h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

/* リンク部分 */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
}

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

/* 会社情報 */
.footer-info p {
  margin: 5px 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ===========================
   5. スマホ対応（メディアクエリ）
=========================== */
/* ハンバーガー（スマホ用） */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* スマホ表示 */
@media (max-width: 768px) {
  .nav {
    display: none;
    width: 100%;
  }

  .nav.active {
    display: block;
    background: #003366;
  }

  .menu {
    flex-direction: column;
    gap: 0;
  }

  .submenu {
    position: static;
    box-shadow: none;
    background: #002244;
  }

  .submenu li a {
    color: #fff;
  }

  .hamburger {
    display: block;
  }
}