/* 全体リセット・基本設定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Helvetica Neue", Arial, "平ギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  color: #2c352e;
  line-height: 1.6;
  background-color: #f2f7f3;
}
/* 通常のリンクの色 */
a {
  color: #9a58f1; /* リンクの張られた文字列の色 */
  text-decoration: none; /* 下線を消したい場合に指定 */
}
/* マウスを乗せた（ホバーした）時のリンク */
a:hover {
  color: #9a58f1;             /* ホバー時の色（さらに濃い緑） */
  font-weight: bold;     /* 文字を太くする */
  text-decoration: underline; /* お好みで下線を出す */
}

/* 全体 */
/* ナビゲーション全体の並び（左寄せ） */
/* 同一カテゴリー内で現在表示されているページから他のページを選択するためのボタン */
.page-nav {
  display: flex;
  flex-wrap: wrap;     /* 入りきらない場合に折り返す（2段になる） */
  justify-content: left;
  gap: 2px; /* ボタン同士のすき間 */
  margin: 10px 0;
}
.nav-btn {					/* 1. すべてのボタンに共通する基本スタイル */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  font-size: 13px;
  box-sizing: border-box;
  padding: 0px 5px;
}
a.nav-btn {						/* 2. 他のページのボタン（アクティブ状態） */
  background-color: #ffffff;
  color: #2e7d32;              /* テーマカラーの青 */
  border: 2px solid #2e7d32;   /* 青い枠線 */
  cursor: pointer;
  transition: all 0.2s ease;
}
a.nav-btn:hover {				/* 他のページのボタンにマウスが乗ったとき（ホバー効果） */
  background-color: #2e7d32;   /* 背景を青に塗りつぶす */
  color: #ffffff;              /* 文字を白にする */
}
.nav-btn.current {				/* 3. 現在表示されているページのボタン（非アクティブ・選択済み状態） */
  background-color: #2e7d32;   /* アクティブ時より濃い青（選択済みのイメージ） */
  color: #ffffff;              /* 文字は白 */
  border: 2px solid #2e7d32;
  pointer-events: none;			  /* 完全に動作を停止し、マウスが乗ってもカーソルを変えない */
  cursor: default;
}
/* 区切り水平線 */
.kugiri {
  border: 1px dashed  #2e7d32;   /* 太さ1pxの破線 */
  margin: 20px 0;   /* 上下に20pxのマージン */
}
.simple_title {
  text-align: center;
  font-weight: bold;
  margin: 40px 10px;
  padding: 0 20px;
  border-left:solid 8px #2e7d32;
  border-right:solid 8px #2e7d32;
  border-top:dashed 1px #2e7d32;
  border-bottom:dashed 1px #2e7d32;
  background-color:#f2f7f3 ;
  color:#2e7d32;
}
/* ヘッダー */
.site-header {
  background-color: #43a047;
  color: #fff;
  position: relative;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
/* サブページ上のカテゴリータイトルのスタイル */
.category-title {
  font-size: 18px;
  color: #2e7d32;
  padding: 4px 10px;
  border-left: 6px solid #2e7d32;   /* 左側の縦線 */
  border-bottom: 1px dashed #2e7d32;
  background: linear-gradient(to right, #f4fff4, transparent); /* 右に向かって消える背景 */
}
/* ぺージタイトルのスタイル */
.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #2e7d32;
  padding: 20px;
  text-align: center;
}

/* ----------- トップページ ------------ */
/* タイトルエリア（校章 ＋ 学校名） */
.site-title {
  display: flex;
  align-items: center;
  gap: 14px; /* 校章とテキストの間の余白を少し拡大 */
  font-size: 2.7rem; /* 従来の 1.8rem から 1.5倍（2.7rem）に拡大 */
  font-weight: bold;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  margin: 0;
  line-height: 1.2;
}

/* ----------- 校章画像スタイル（文字サイズ拡大に合わせて少し調整） ------------- */
.school-logo {
  height: 60px; /* 文字サイズに合わせて校章も存在感のある大きさに調整 */
  width: auto;
  object-fit: contain;
}
.title {
  font-size: 18px;
  font-weight: bold;
  color: #2e7d32;
  padding: 20px;
  text-align: center;
}

/* ----------- お知らせ ------------- */
.date {					/* 日付のタイトル */
  color: #00aa55;             /* 文字を赤にする */
  font-size: 12px;         /* 少し小さく */
}
/* リストの先頭にスマイルマークを表示する */
.smile-list {				/* 1. リスト全体のデフォルトの点（・）を消す */
  list-style: none;
  padding-left: 0; /* 左側の不要な余白をリセット */
}
.smile-list li {			/* 2. 各リスト項目の設定 */
  position: relative;
  padding-left: 1.5em; /* アイコンを置くための左側のすき間 */
  margin-bottom: 8px;  /* 行と行の間のすき間 */
  line-height: 1.5;    /* 行の高さを整える */
}
.smile-list li::before {	/* 3. 文字の先頭にスマイルマークを表示する */
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em; /* 文字の高さに合わせてアイコンの位置を微調整 */
  background-image: url("image/smily.png"); /* 画像のパス */
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.1em;  /* 横幅 */
  height: 1.1em; /* 縦幅 */
}

/* -------------- トピックス ------------- */
.topics_title {
  list-style: none;
}
.topics_date {				/* トピックス日付 */
  color: #00aa55;             /* 文字を赤にする */
  font-size: 14px;         /* 少し小さく */
  border-left: 7px solid #2e7d32;
  margin-left: 20px;
  margin-bottom: 10px;
  padding-left:10px;
}
.topics_pic {				/* トピックス画像 */
  text-align: center;
}
.topics_comment {			/* トピックス説明文（コメント） */
  border-bottom: 1px dashed #2e7d32;
  font-size: 14px;
  padding: 10px;
}

/* ------------- 学校長挨拶 ---------------- */
.greeting {
  color: #000000;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
}
.greeting_date {
  color: #000000;
  font-size: 14px;
  padding-left: 20px;
}
.greeting_title {
  font-size: 14;
  font-weight: bold;
}
.principal_name {
  color: #000000;
  font-size: 14px;
  text-align: right;
  padding-right: 20px;
}

/* ----------- 校歌歌詞 ----------- */
.kouka_kashi {
	padding: 20px;
}
.kouka_title{
	padding: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

/* クラス名「kouka-text」がついた要素だけに適用 */
.kouka_text {
  padding-left:50px;
  padding-top:20px;
  padding-bottom:20px;
  font-size: 18px; /* PCなど広い画面用のサイズ */
}

/* 画面幅が 768px 以下になったら適用 */
@media (max-width: 768px) {
.kouka_text {
    padding: 10px;
    font-size: 12px; /* スマホ用に小さくする */
  }
}


/* クラス名「kouka-sakusha」がついた要素だけに適用 */
.kouka_sakusha {
  text-align:center;
  padding-top:20px;
  padding-bottom:20px;
  font-size: 18px; /* PCなど広い画面用のサイズ */
}

/* 画面幅が 768px 以下になったら適用 */
@media (max-width: 768px) {
.kouka_sakusha {
    text-align:center;
    padding: 10px;
    font-size: 12px; /* スマホ用に小さくする */
  }
}

/* ------------ 沿革 --------------- */
.enkaku_tr {			/* 年表行 */
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
.enkaku_th {			/* 年表左側 */
  text-align: center;
  padding: 8px 8px;
  background: #f2f7f3;
  color: #2e7d32;
  font-size: 12px;
  width: 150px;
}
.enkaku_td {			/* 年表右側 */
  padding: 8px 8px;
}

/* ---------- 各種たより ------------- */
.letter-btn {					/* 各種たよりを表示するボタンスタイル */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  width: 300px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  font-size: 13px;
  box-sizing: border-box;
  padding: 10px 5px;
}
a.letter-btn {						/* 2. 他のページのボタン（アクティブ状態） */
  background-color: #ffffff;
  color: #2e7d32;              /* テーマカラーの青 */
  border: 2px solid #2e7d32;   /* 青い枠線 */
  cursor: pointer;
  transition: all 0.2s ease;
}
a.letter-btn:hover {				/* 他のページのボタンにマウスが乗ったとき（ホバー効果） */
  background-color: #2e7d32;   /* 背景を青に塗りつぶす */
  color: #ffffff;              /* 文字を白にする */
}
.letter-btn.current {				/* 3. 現在表示されているページのボタン（非アクティブ・選択済み状態） */
  background-color: #2e7d32;   /* アクティブ時より濃い青（選択済みのイメージ） */
  color: #ffffff;              /* 文字は白 */
  border: 2px solid #2e7d32;
  pointer-events: none;			  /* 完全に動作を停止し、マウスが乗ってもカーソルを変えない */
  cursor: default;
}
.letter_p{
  text-align: center;
  padding: 10px;
}

/* ---------------- 月別予定表の設定 --------------- */
table {
      width: 100%;
      border-collapse: collapse; /* 二重線を防ぐ設定 */
}
th,td {    /* 全てのセル（見出しとデータ）の枠線色を指定 */
      border: 1px solid #43a047; /* 太さ1px・実線・青色(#3182ce) */
      padding: 5px;
      text-align: center;
}
.cal_holi {   /* 休日の背景色設定 */
  background-color: #ffccff;
}
.sat_blue {   /* 土曜の背景色，日付・曜日文字色設定 */
  background-color: #ffccff;
  color:blue;
}
.sun_red {   /* 日曜の背景色，日付・曜日文字色設定 */
  background-color: #ffccff;
  color:red;
}

/* ------------------ 全体 --------------------- */
/* レスポンシブ対応（画面幅 768px 以下：スマホ・タブレット） */
@media (max-width: 768px) {
  .site-title {
    font-size: 1.95rem; /* スマホ時も従来の 1.3rem から 1.5倍（1.95rem）に拡大 */
    gap: 10px;
  }

  .school-logo {
    height: 45px; /* スマホ時の校章サイズ */
  }
}
/* さらに幅が狭い超小型スマホ（画面幅 480px 以下）での溢れ防止 */
@media (max-width: 480px) {
  .site-title {
    font-size: 1.5rem; /* 画面からはみ出さないよう微調整 */
  }
  
  .school-logo {
    height: 36px;
  }
}

/* 右上メニューボタン（PC時は非表示） */
.menu-toggle {
  display: none;
  background-color: #2e7d32;
  color: #fff;
  border: 1px solid #a5d6a7;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  transition: background-color 0.2s;
  align-items: center;
}
.menu-toggle:hover {
  background-color: #1b5e20;
}
/* アイコン（☰ / ✕）のスタイル調整 */
.menu-toggle .menu-icon {
  font-size: 1.1rem;
  margin-right: 0px;	/* MENUが表示されないことに伴い6を0に変更 */
  display: inline-block;
  width: 1.2em;      /* 文字幅を固定して切り替え時のガタつきを防止 */
  text-align: center;
  line-height: 1;
}

/* トップナビゲーション（PC用） */
.top-nav {
  background-color: #2e7d32;
}
.top-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
}
.top-nav li a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}
.top-nav li a:hover {
  background-color: #66bb6a;
  color: #fff;
}

/* スライドショーコンテナ */
.slideshow-container {
  width: 100%;
  max-width: 1000px;
  height: 350px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* JavaScriptで滑らかにフェード切替 */
}
.slide.active {   /* 表示中のスライド */
  opacity: 1;
}
.slide1 {         /* 各画像背景の設定 */
  background-image: url('image/slide1.jpg');
  background-color: #81c784;
}
.slide2 {
  background-image: url('image/slide2.jpg');
  background-color: #a5d6a7;
}
.slide3 {
  background-image: url('image/slide3.jpg');
  background-color: #c8e6c9;
}
.slide-prev, .slide-next {    /* 左右の矢印ボタン（＜ / ＞） */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
  z-index: 10;
  outline: none;
}
.slide-prev { left: 15px; }
.slide-next { right: 15px; }
.slide-prev:hover, .slide-next:hover {
  background-color: rgba(46, 125, 50, 0.8); /* ホバー時はテーマカラーの緑 */
}
.slide-dots {   /* 下部のドット（...）インジケーター */
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  outline: none;
}
.dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.dot.active {
  background-color: #ffffff;
  width: 28px; /* アクティブなドットは少し横長にして分かりやすく */
  border-radius: 6px;
}
/* スマホ表示時の矢印・ドット調整 */
@media (max-width: 768px) {
  .slide-prev, .slide-next {
    padding: 8px 12px;
    font-size: 1.2rem;
  }
}

/* -------------- メインレイアウト（PC用 2カラム） ---------------- */
.container {
  display: flex;
  max-width: 1000px;
  margin: 24px auto;
  gap: 24px;
  padding: 0 12px;
}

/* サイドバー */
.sidebar {
  width: 200px;
  flex-shrink: 0;
}
.sidebar h2 {
  font-size: 1.05rem;
  background-color: #43a047;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px 6px 0 0;
}
.side-buttons {
  list-style: none;
  border: 1px solid #c8e6c9;
  border-top: none;
  background-color: #fff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.side-buttons li {
  border-bottom: 1px solid #e8f5e9;
}
.side-buttons li:last-child {
  border-bottom: none;
}
.side-buttons a {
  display: block;
  padding: 6px 12px;
  color: #2e7d32;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.side-buttons a:hover {
  background-color: #e8f5e9;
  color: #1b5e20;
  padding-left: 20px;
}
.side-buttons.active {
  background-color: #e8f5e9;
  color: #1b5e20;
  padding-left: 20px;
  border: 0px;
  border-radius: 0 0 0 0;
  box-shadow: 0 0 0;
}

/* メインコンテンツ */
.main-content {
  flex-grow: 1;
  background-color: #fff;
  padding: 24px;
  border: 1px solid #c8e6c9;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.welcome-section h2 {
  border-bottom: 3px solid #43a047;
  padding-bottom: 8px;
  margin-bottom: 16px;
  color: #2e7d32;
  font-size: 1.4rem;
}

/* -------------- フッター ------------- */
.site-footer {
  background-color: #2e7d32;
  color: #e8f5e9;
  margin-top: 40px;
  padding: 30px 15px 20px;
  text-align: center;
  font-size: 0.9rem;
  border-top: 4px solid #43a047;
}
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 学校情報エリア */
.footer-info {
  margin-bottom: 20px;
  line-height: 1.6;
}
.footer-school-name {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.footer-address {
  margin-bottom: 4px;
}
.footer-contact {
  margin-bottom: 4px;
}
.footer-contact span {
  display: inline-block;
  margin: 0 8px;
}
.footer-email {
  margin-bottom: 8px;
}
.footer-email-link{
  color: #ffffff; /* リンクの張られた文字列の色 */
  text-decoration: none; /* 下線を消したい場合に指定 */  
}
 
/* 著作権表記 */
.copyright {
  font-size: 0.8rem;
  color: #a5d6a7;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 15px;
  margin-top: 15px;
}

/* スマホ表示時の微調整 */
@media (max-width: 768px) {
  .site-footer {
    padding: 24px 12px 16px;
    font-size: 0.85rem;
  }
  .footer-school-name {
    font-size: 1.1rem;
  }
  .footer-contact span {
    display: block; /* スマホではTELとFAXを改行して押しやすく見やすくする */
    margin: 2px 0;
  }
}

/* ===================================================
   レスポンシブ設定（画面幅 768px 以下：スマホ・タブレット）
   =================================================== */
@media (max-width: 768px) {

  /* 1. ヘッダー右上ボタンの表示 */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  /* 2. メインメニュー（ドロップダウン） */
  .top-nav {
    display: none;
    position: absolute;
    top: calc(100% - 10px);
    right: 15px;
    left: auto;
    width: 240px;
    max-width: 85vw;
    background-color: #2e7d32;
    border: 1px solid #81c784;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
  }

  .top-nav.is-open {
    display: block;
  }

  .top-nav ul {
    flex-direction: column;
  }

  .top-nav li a {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
    font-size: 0.95rem;
  }

  .top-nav li:last-child a {
    border-bottom: none;
  }

  /* 3. レイアウト制御：メインコンテンツを上（order: 1）、サイドバーを下（order: 2）に配置 */
  .container {
    flex-direction: column;
  }

  .main-content {
    order: 1; /* メインコンテンツを先に表示 */
  }

  .sidebar {
    order: 2; /* サイドバー（サイドボタン）を下に表示 */
    width: 100%;
  }

  /* 4. サイドボタン（2列グリッド配置） */
  .side-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #c8e6c9;
  }

  .side-buttons li {
    border-bottom: none;
    background-color: #fff;
  }

  .side-buttons a {
    text-align: center;
    padding: 8px 10px;
    font-size: 0.88rem;
  }

  .side-buttons a:hover {
    padding-left: 8px;
    background-color: #e8f5e9;
  }

  /* スライドショーの高さ調整 */
  .slideshow-container {
    height: 220px;
  }
}


/* ===================================================
   ページトップへ戻るボタン（全画面サイズ共通・固定表示）
   =================================================== */
.pagetop-btn {
  position: fixed;            /* 画面に常に固定表示 */
  bottom: 25px;
  right: 25px;
  background-color: #43a047;   /* テーマカラーの緑 */
  color: #ffffff;
  border: none;
  border-radius: 50px;         /* 丸みのあるカプセル形状 */
  padding: 12px 18px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 9999;               /* 他の要素より最前面に表示 */
  
  /* 初期状態は非表示（透明＆少し下に隠す） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s ease;

  /* スマホでのタップ時のハイライト背景を消去 */
  -webkit-tap-highlight-color: transparent;
}

/* ホバー時（PC） */
.pagetop-btn:hover {
  background-color: #2e7d32;
  transform: translateY(-2px);
}

/* スクロール時にフワッと表示 */
.pagetop-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 画面幅が狭い場合（スマホ・タブレット 768px 以下）の調整 */
@media (max-width: 768px) {
  .pagetop-btn {
    bottom: 20px;            /* 端に寄りすぎないよう調整 */
    right: 15px;
    padding: 10px 16px;       /* タップしやすい適切なサイズ感 */
    font-size: 0.8rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  }
}