@charset "UTF-8";
@charset "UTF-8"; /* 文字エンコーディングをUTF-8に指定 */

/* 全要素にボックスサイズをborder-boxに設定（paddingやborderを含めたサイズになる） */
* {
  box-sizing: border-box;
}

/* 全体の基本スタイル設定 */
body {
  font-family: Arial, sans-serif; /* フォント指定 */
  line-height: 1.6;               /* 行間 */
  margin: 0;                      /* 外側余白をなくす */
  padding: 1em;                   /* 内側余白 */
  background-color: #ffffff;      /* 背景色（淡いグレー） */
}

/* ページタイトルの見た目 */
h1 {
  text-align: center;       /* 中央寄せ */
  font-size: 30px;         /* フォントサイズ*/
  margin-bottom: 1em;       /* 下に余白 */
}

/* .mainの横幅を絞る */
.main {
  margin: 0 auto;
  padding: 0;
  width: 70%;
}

/* .bigbigの画像を中央に */
.bigimg {
  text-align: center;
}


/* お知らせボックス全体のスタイル */
.notice {
  background: #faffec;             /* 背景色：白 */
  border: 1px solid #ddd;       /* 薄いグレーの枠線 */
  padding: 1.2em;               /* 内側余白 */
  margin-bottom: 1.5em;         /* 下に余白をつけて間隔をあける */
  border-radius: 8px;           /* 角を丸くする */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ほんの少し影をつける */
  display: none;                /* 最初は非表示にする */
}

/* JavaScriptで表示対象になったお知らせに適用されるクラス */
.notice.visible {
  display: block;               /* 表示する */
}

/* お知らせのタイトル */
.notice h2 {
  margin: 0 0 0.5em;            /* 下にだけ少し余白をとる */
  font-size: 1.2em;             /* タイトルの文字サイズ */
  color: #333;                  /* やや濃いグレーで可読性UP */
}

/* 日付の表示スタイル */
.notice .date {
  font-size: 0.9em;             /* 少し小さめの文字 */
  color: #666;                  /* グレー文字で控えめに */
  margin-bottom: 0.5em;         /* タイトルとの間に余白 */
}

/* 本文のスタイル */
.notice p {
  font-size: 1em;               /* 通常の文字サイズ */
  color: #444;                  /* 少し薄めの黒で読みやすく */
}

/* 「もっと読む」ボタンのスタイル */
#loadMore {
  display: block;                  /* ブロック表示（中央寄せにするため） */
  width: 100%;                    /* 横幅いっぱい */
  max-width: 300px;              /* 最大幅を制限 */
  margin: 0 auto 2em;            /* 中央寄せ＋下に余白 */
  padding: 0.8em;                /* ボタンの内側余白 */
  font-size: 1em;                /* 文字サイズ */
  background-color: #007BFF;     /* ブルー背景（Bootstrapのプライマリカラー） */
  color: white;                  /* 文字は白に */
  border: none;                  /* 枠線なし */
  border-radius: 5px;            /* 角を少し丸める */
  cursor: pointer;               /* マウスカーソルをポインタに */
}


.big {
  font-size: large;
}


/* スマホなど画面幅が狭いときのスタイル調整 */
@media (max-width: 600px) {
  h1 {
    font-size: 1.5em;            /* タイトルをやや小さく */
  }

  .notice h2 {
    font-size: 1.1em;            /* タイトルも少し小さく */
  }

  .notice p {
    font-size: 0.95em;           /* 本文も調整 */
  }

  .main {
    width: 95%;
  }
}