/* ===== 全体リセット ===== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* 横スクロール防止 */
  font-family: Arial, sans-serif;
  background-image: url("images/bg-image.png"); /* 背景画像のパス */
  background-repeat: repeat;       /* 繰り返し表示 */
  scroll-behavior: smooth;
}

/* ===== ヘッダー固定 ===== */
header {
  position: fixed;        /* ヘッダーを画面上部に固定してスクロールしても常に表示される */
  top: 0;                 /* 画面の上から 0px に配置 */
  left: 0;                /* 画面の左から 0px に配置 */
  width: 100%;            /* 画面の横幅いっぱいに広げる */
  box-sizing: border-box; /* padding や border を含めて幅を計算（崩れ防止） */
  background: #2fd32f;    /* 背景色（緑系） */
  color: white;           /* 文字色を白に */
  display: flex;          /* フレックスボックスレイアウトを使う */
  justify-content: space-between; /* 子要素を左右に配置（左寄せと右寄せ） */
  align-items: center;    /* 子要素を上下中央に揃える */
  padding: 10px 20px;     /* 内側の余白（上下10px・左右20px） */
  z-index: 1000;          /* 他の要素より前面に表示（大きいほど手前に出る） */
}

header .logo {
  font-size: 1.2em;
  font-weight: bold;
}

header nav {
  display: flex;
}

header nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav ul li {
  margin-left: 20px;
}

header nav ul li a {
  color: white;            /* 通常時は白 */
  text-decoration: none;   /* 下線なし */
  font-weight: bold;       /* 太字 */
}

/* マウスを乗せたときの色 */
header nav ul li a:hover {
  color: yellow;           /* 黄色に変化 */
}

.menu-toggle {
  display: none;
  font-size: 1.8em;
  cursor: pointer;
}

/* ===== メイン部分 ===== */
main {
  padding: 60px 10px 10px; /* ヘッダー分の余白 */
}

section {
  margin-bottom: 20px;
}

h2 {
  color: #2fd32f;
}

/* ===== スライドショー ===== */
.slideshow-container {
  max-width: 100%;
  margin: auto;
  position: relative;
}

.slide {
  display: none;
}

.slide img {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 8px;
}

/* フェードアニメーション */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: 0.4;}
  to {opacity: 1;}
}

/* ===== ロゴ ===== */
.logo a {
  color: white;           /* リンク文字を白にする */
  text-decoration: none;  /* 下線を消したい場合 */
  font-weight: bold;      /* 太字にしたい場合（任意） */
}

/* ホバー時に色を変えたい場合 */
.logo a:hover {
  color: #ffcc00; /* マウスを乗せたら黄色に変化（お好みで変更） */
}

/* ===== フッター ===== */
footer {
  text-align: center;
  padding: 15px;
  background: #2fd32f;
  color: white;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

footer p {
  margin: 0;
  word-break: break-word;
}

/* フッター内のリンクも白にする */
footer a {
  color: white;
  text-decoration: none; /* 下線を消す場合 */
}

/* ホバー時に色を変えたい場合 */
footer a:hover {
  color: #ffcc00; /* 黄色に変化（好みで変更） */
}


/* ===== スマホ用 ===== */
@media (max-width: 768px) {
  header nav {
    display: none;          /* 初期は非表示 */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #b71c1c;
  }
  header nav.active {
    display: flex;          /* .active が付いたら表示 */
  }
  header nav ul {
    flex-direction: column;
    width: 100%;
  }
  header nav ul li {
    margin: 10px 0;
    text-align: center;
  }
  .menu-toggle {
    display: block;
  }
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	position: fixed;
	right: 30px;		/*右からの配置場所指定*/
	bottom: 30px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	background: rgba(0,0,0,0.4);	/*背景色。0,0,0は黒色の指定で0.4は色が40%出た状態。*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒色の指定で0.8は色が80%出た状態。*/
}

.photo1 {
  display: block;
  width: 80%;
  max-width: 100%;
  height: auto;
  border-radius: 32px;           /* ← 丸みを大きく（例: 32px） */
  box-shadow: 0 12px 32px rgba(0,0,0,0.3); /* ← 影を太く・濃く */
  margin: 0 auto;
  object-fit: cover;
}

img, .photo1 {
  max-width: 100%;
  height: auto;
}

.photo2 {
  display: block;
  width: 30%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;           /* ← 丸みを大きく（例: 32px） */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* ← 影を太く・濃く */
  margin: 0 auto;
  object-fit: cover;
}

img, .photo2 {
  max-width: 100%;
  height: auto;
}

/* ★ login-form クラス内だけに適用する */
.login-form {
  max-width: 100%;
  margin: auto;
}

/* ラベル */
.login-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: #444;
  font-size: 0.85rem; /* 少し小さめ */
}

/* 入力エリア */
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 50%;
  padding: 8px; /* ← 小さく */
  border: 2px solid #666; /* ← 枠を太く & 濃い色 */
  border-radius: 6px;
  box-sizing: border-box;
  margin-bottom: 12px;
  font-size: 0.9rem; /* ← 少し小さめ */
  background: #fff;
}

/* ボタン */
.login-form button {
  width: 30%;
  padding: 10px; /* ← 小さく */
  background: #0078d7;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.9rem; /* ← 小さめ */
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.login-form button:hover {
  background: #005ea8;
}

.menu-tbl {width: 90%;
  background-color: #e6e6fa;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid gray; }

.menu-tbl-td {
  background-color: #e6e6fa;
  text-align    : center;      /* 文字位置   */
  margin-left: auto;
  margin-right: auto;
  border: 1px solid gray; }

/* ★ input-form クラス内だけに適用する */
.input-form {
  max-width: 100%;
  margin: auto;
}

/* ラベル */
.input-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: #444;
  font-size: 0.85rem; /* 少し小さめ */
}

/* 入力エリア */
.input-form input[type="text"],
.input-form input[type="tel"],
.input-form input[type="email"]{
  width: 50%;
  padding: 8px; /* ← 小さく */
  border: 2px solid #666; /* ← 枠を太く & 濃い色 */
  border-radius: 6px;
  box-sizing: border-box;
  margin-bottom: 12px;
  font-size: 1rem;
  background: #fff;
}

/* 入力エリア（複数行） */
.input-form textarea {
  width: 80%;
  padding: 8px; /* ← 小さく */
  border: 2px solid #666; /* ← 枠を太く & 濃い色 */
  border-radius: 6px;
  box-sizing: border-box;
  margin-bottom: 12px;
  font-size: 1rem; 
  background: #fff;
}

/* ボタン */
.input-form button {
  width: 30%;
  padding: 10px; /* ← 小さく */
  background: #0078d7;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.input-form button:hover {
  background: #005ea8;
}

.time-select {
  border: 2px solid #666; /* ← 枠を太く & 濃い色 */
  border-radius: 5px;     /* 角を少し丸める */
  padding: 5px;           /* 内側の余白 */
  font-size: 1em;         /* 文字サイズ調整 */
}

/*list-normal3-parts
---------------------------------------------------------------------------*/
.list-normal3-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-normal3-parts .list-parts {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;		/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin-bottom: 2rem;	/*ボックス同士の余白*/
}

/*ボックス内のfigure画像*/
.list-normal3-parts .list-parts figure {
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のh4見出し*/
.list-normal3-parts .list-parts h4 {
	font-size: 1.3rem;	/*文字サイズ130%*/
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のp要素*/
.list-normal3-parts .list-parts p {
	font-size: 0.9rem;	/*文字サイズを90%*/
	line-height: 1.6;	/*行間を少し狭く*/
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*ボックス１個あたり*/
	.list-normal3-parts .list-parts {
		display: flex;	/*横並びにする*/
		gap: 1.5rem;	/*左の画像と右のテキストとの間のマージン的な余白*/
	}
	
	/*ボックス内のfigure画像*/
	.list-normal3-parts .list-parts figure {
		margin-bottom: 0;	/*見出しの下のマージンをリセット*/
		width: 30%;			/*画像の幅*/
	}

	/*テキストを囲むブロック*/
	.list-normal3-parts .list-parts .text-parts {
		flex: 1;
	}

	}/*追加指定ここまで*/

/* 薄いピンク */
.pink-box {
  width: 99%;
  background: #ffe4ec;       /* 少し濃いピンク */
  border: 1px solid #e57393; /* 枠も濃いピンク */
  border-radius: 0px;
  padding: 0.1em 0.1em;
  margin: 0.1em auto;
  box-sizing: border-box;
}

/* 薄い青 */
.blue-box {
  width: 99%;
  background: #e0f0ff;       /* 少し濃い水色 */
  border: 1px solid #5aa0e0; /* 枠は濃い青 */
  border-radius: 0px;
  padding: 0.1em 0.1em;
  margin: 0.1em auto;
  box-sizing: border-box;
}

/* 薄い黄色 */
.yellow-box {
  width: 99%;
  background: #fff9c4;       /* 少し濃い黄色 */
  border: 1px solid #fbc02d; /* 濃いめの黄土色 */
  border-radius: 0px;
  padding: 0.1em 0.1em;
  margin: 0.1em auto;
  box-sizing: border-box;
}

/* 薄い灰色 */
.gray-box {
  width: 99%;
  background: #e0e0e0;       /* 少し濃い灰色 */
  border: 1px solid #9e9e9e; /* 濃いグレー */
  border-radius: 0px;
  padding: 0.1em 0.1em;
  margin: 0.1em auto;
  box-sizing: border-box;
}

/* 登録ボタン（濃い紫） */
.toroku-btn {
  background: #c5b3f0;       /* 薄紫より濃いめの紫 */
  border: 1px solid #673ab7; /* 濃い紫の枠 */
  color: #311b92;            /* 文字色も濃い紫 */
  padding: 0em 0.5em;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;     /* ← 下線を消す */
}

/* ホバーしたとき */
.toroku-btn:hover {
  background: #9575cd; /* さらに濃い紫に */
  color: #1a0d59;      /* 文字色も濃く */
}

/* 確認ボタン（オレンジ系） */
.kakunin-btn {
  background: #ffd699;       /* 薄めのオレンジ */
  border: 1px solid #ff9800; /* 濃いオレンジの枠 */
  color: #000;               /* 文字色を黒に */
  padding: 0em 0.5em;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;     /* ← 下線を消す */
}

/* ホバーしたとき */
.kakunin-btn:hover {
  background: #ffa726; /* 濃いめのオレンジに */
  color: #bf360c;      /* 文字色も濃く */
}

/* ================================
   年間スケジュール全体
   ================================ */
.activities {
  max-width: 800px;        /* 横幅を最大800pxに制限（読みやすくするため） */
  margin: 2rem auto;       /* 上下に余白、左右は中央寄せ */
  padding: 1rem;           /* 内側に少し余白 */
}

/* ================================
   活動リスト（dl）
   ================================ */
.activity-list {
  margin: 0;    /* デフォルト余白を消す */
  padding: 0;   /* デフォルト余白を消す */
}

/* ================================
   各活動をまとめる箱（div.activity）
   ================================ */
.activity {
  display: flex;                   /* バッジと本文を横並びにする */
  align-items: flex-start;         /* 上揃えにする */
  background: #fff7e6;             /* 薄いオレンジ背景 */
  border: 1px solid #ffd699;       /* 少し濃いオレンジの枠線 */
  border-radius: 12px;             /* 角を丸めてカード風に */
  padding: 1rem;                   /* 内側余白 */
  margin-bottom: 1rem;             /* 下のカードと間隔をあける */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ほんのり影をつける */
}

/* ================================
   dt（日付ラベル部分）
   ================================ */
.activity dt {
  margin: 0;
  margin-right: 1rem;  /* バッジと本文の間に余白 */
  flex-shrink: 0;      /* 狭い画面でも縮まないように固定 */
}

/* ================================
   バッジ（期間ラベル：通年・4月など）
   ================================ */
.badge {
  background: #ff9800;     /* オレンジ背景 */
  color: white;            /* 白文字 */
  font-weight: bold;       /* 太字 */
  padding: 0.4rem 0.8rem;  /* 余白で pill 型に */
  border-radius: 20px;     /* 角を丸くして pill 風に */
  font-size: 0.9rem;       /* やや小さめに調整 */
  white-space: nowrap;     /* 改行しない */
  display: inline-block;   /* インライン要素として扱うが余白調整もしやすい */
}

/* ================================
   dd（活動内容）
   ================================ */
.activity dd {
  margin: 0;              /* デフォルト余白を消す */
  font-size: 1rem;        /* 標準サイズ */
  color: #333;            /* 濃いグレーで読みやすく */
  line-height: 1.5;       /* 行間を広めにして読みやすく */
}

/* ================================
   レスポンシブ（スマホ用）
   ================================ */
@media (max-width: 600px) {
  .activity {
    flex-direction: column;   /* バッジと本文を縦並びに */
    align-items: flex-start;  /* 左寄せ */
  }

  .activity dt {
    margin: 0 0 0.5rem 0; /* 下に少し余白を入れる */
  }
}

.flame09 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  background-color: #ffefd5;
  box-shadow: 0 0 5px 1.5px #a9a9a9;
}

.flame09b {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  background-color: #d5ffe2;
  box-shadow: 0 0 5px 1.5px #a9a9a9;
}

.flame09r {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  background-color: #ffd5d5;
  box-shadow: 0 0 5px 1.5px #a9a9a9;
}