body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    background-color: #FFF0F5; /* 薄いピンク色 */
}

.text-pink-800 {
    color: #ad1457; /* Darker pink for headings */
}

.hover\:text-pink-600:hover {
    color: #d81b60; /* Medium pink on hover */
}

.bg-pink-600 {
    background-color: #d81b60; /* Medium pink for buttons */
}

.hover\:bg-pink-700:hover {
    background-color: #c2185b; /* Slightly darker pink on button hover */
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* フェードアウトアニメーション */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-in-animation {
    animation: fadeIn 2s ease-out forwards;
}

.fade-out-animation {
    animation: fadeOut 2s ease-in forwards;
}

/* ロゴコンテナのスタイル */
.logo-container {
    display: flex;
    align-items: center;
}

/* ロゴ画像のスタイル */
.logo-image {
    height: 50px; /* 高さを調整 */
    width: auto;  /* 幅は自動調整 */
}

/* 活動概要セクションのカード幅を広げる */
.max-w-4xl {
    max-width: 1400px; /* Tailwindのmax-w-4xlのデフォルトは896px */
}

#activity-report .grid {
    grid-template-columns: 1fr;
}

.activity-content {
    max-height: 150px; /* 初期表示の高さ */
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.activity-content.expanded {
    max-height: 9999px; /* 展開時の最大高さ。コンテンツが見切れないように十分な高さを設定 */
}

.text-outline {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 影のみ */
}

.image-gallery {
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem; /* 間隔を詰める */
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.image-gallery img {
    flex: 0 0 auto; /* 画像が伸縮しないように */
    width: 150px; /* 各画像の固定幅を設定 */
    height: 100px; /* 各画像の固定高さを設定 */
    object-fit: cover;
    border-radius: 0.5rem; /* 角を丸くする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
    cursor: pointer; /* クリック可能であることを示す */
}

.divider {
    border-top: 1px solid #e2e8f0; /* Tailwindのgray-200に相当 */
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* SimpleLightboxのカスタムスタイル */
.sl-wrapper .sl-image img {
    max-width: 100% !important; /* Lightbox内の画像が親要素の幅を超えないように */
    width: auto !important; /* 幅を自動調整 */
    height: auto !important; /* 高さを自動調整 */
    object-fit: contain !important; /* 画像全体が表示されるように */
    border-radius: 0 !important; /* Lightbox画像には角丸を適用しない */
    box-shadow: none !important; /* Lightbox画像には影を適用しない */
}

.sl-wrapper .sl-caption {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    font-size: 1rem;
}

.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button {
    color: #fff;
    background-color: transparent; /* 背景を透明に */
    border-radius: 50%;
    font-size: 2rem; /* フォントサイズを調整 */
    width: 50px; /* ボタンの幅を調整 */
    height: 50px; /* ボタンの高さを調整 */
    display: flex; /* 中央揃えのためにflexboxを使用 */
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease; /* ホバー時のトランジションを追加 */
}

.sl-wrapper .sl-close:hover,
.sl-wrapper .sl-navigation button:hover {
    background-color: rgba(0, 0, 0, 0.3); /* ホバー時に薄い背景色を表示 */
}

/* カスタムズームボタンのスタイル */
.sl-wrapper .sl-zoom-btn {
    position: absolute;
    top: 20px;
    right: 60px; /* 閉じるボタンの左に配置 */
    z-index: 1000;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: background-color 0.3s ease;
}

.sl-wrapper .sl-zoom-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.sl-wrapper .sl-zoom-in-btn {
    right: 110px; /* ズームアウトボタンの左に配置 */
}

/* 活動報告セクションのカードとボタンの縦幅を狭くし、間隔をなくす */
#activity-report .activity-item {
    padding: 0.5rem; /* p-2 相当 */
    margin-bottom: 0.25rem; /* mb-1 相当 */
}

#activity-report .toggle-year-button {
    padding-top: 0.25rem; /* py-1 相当 */
    padding-bottom: 0.25rem; /* py-1 相当 */
    margin-bottom: 0; /* mb-0 相当 */
}

#activity-report .year-content .mb-6 {
    margin-bottom: 0.5rem; /* mb-2 相当 */
}

#activity-report .close-year-button {
    margin-top: 0.25rem; /* mt-1 相当 */
}