@charset "UTF-8";

/* ============================================================
   1. 基本レイアウト（共通設定）
   ============================================================ */
body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  line-height: 1.8;
  background-color: #f2f7f4;
  color: #333;
}

/* リンク設定 */
a {
  color: #2f6f64;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #fa474d;
}

/* コンテナ */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   2. 写真スライダー（浮き出る演出用）
   ============================================================ */
.photo-slider {
  max-width: 960px;
  margin: 20px auto;
  padding: 0 10px;
}

.photo-slider .slider {
  position: relative; /* 子要素の絶対配置の基準 */
  width: 100%;
  height: 400px;      /* ★ここが重要：高さがないと表示されません */
  overflow: hidden;
  border-radius: 12px;
  background: #000;   /* 画像読み込み前の下地 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.photo-slider .slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.photo-slider .slides img {
  position: absolute; /* 全画像を同じ位置に重ねる（トランプの山状態） */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 画像を枠いっぱいに綺麗に収める */
  
  /* --- アニメーションの初期状態 --- */
  opacity: 0;         /* 最初は透明 */
  z-index: 0;         /* 下に沈めておく */
  /* JavaScriptで変化させる動きのルール（1.5秒かけてふわっとさせる） */
  transition: opacity 1.5s ease, transform 1.5s ease;
}

/* ============================================================
   3. 共通部品（テーブル・ボタンなど）
   ============================================================ */
/* 行事計画などのテーブル */
.table-wrapper {
  overflow-x: auto;
  margin: 20px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px 8px;
  text-align: center;
}

th {
  background-color: #e8f3f0;
  color: #2f6f64;
}

/* 共通ボタン */
.btn {
  display: inline-block;
  padding: 10px 25px;
  background: #5fb3a2;
  color: #fff !important;
  border-radius: 5px;
  text-decoration: none;
  margin: 10px 5px;
  text-align: center;
}

.btn:hover {
  background: #4a9e8d;
  text-decoration: none;
}

/* ============================================================
   4. スマートフォン対応の基本調整（詳細はresponsive.cssへ）
   ============================================================ */
@media screen and (max-width: 768px) {
  .photo-slider .slider {
    height: 250px; /* スマホではスライダーを少し低くする */
  }
}





/* ============================================================
   2025.08.24 活動記録ページ 見た目調整（他ページ影響なし）
   ============================================================ */

/* 写真は必ず1列表示にする */
.photo-gallery {
    display: block;
}

/* 写真カードを縦並び・安定表示 */
.photo-gallery .photo-item {
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto 30px;
    padding: 15px;
    box-sizing: border-box;
}

/* 写真サイズを自然に */
.photo-gallery .photo-item img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* キャプションを読みやすく */
.photo-gallery .photo-item .caption {
    margin-top: 12px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    text-align: left;
    border-left: 4px solid #5fb3a2;
    padding-left: 10px;
    background: #f9fdfc;
}