/* --- アルバムページ固有のスタイル --- */

/* テキスト */
.intro-text {
    font-size: 1.2em; /* 少し大きめに */
    margin: 40px auto 50px; /* 上下の余白を増やし、左右中央寄せ */
    text-align: center;
    color: #335359;
    line-height: 1.8; /* 行間を広げて読みやすく */
    max-width: 800px; /* 長文の場合に幅を制限して読みやすさ向上 */
    padding: 0 20px; /* 左右の余白 */
}

/* 各写真セクション */
.photo-section {
    margin-bottom: 60px; /* 各セクション間の余白をさらに増やす */
    padding: 30px; /* パディングを少し増やす */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* 影を少し強調 */
    border-radius: 10px; /* 角丸を少し大きく */
    background-color: #ffffff;
}
.photo-section h2 {
    font-size: 2.2em; /* タイトルをより大きく */
    margin-bottom: 20px; /* 下の余白を増やす */
    color: #2F6699; /* より深い青色に */
    text-align: center;
    font-family: 'Yu Gothic UI Semibold','Yu Gothic UI','メイリオ', Meiryo,sans-serif;
    letter-spacing: 0.15em; /* さらに文字間を広げる */
    position: relative; /* 下線のためにposition設定 */
    padding-bottom: 10px; /* 下線とテキストの間隔 */
}
.photo-section h2::after { /* タイトルの下にアクセントライン */
    content: '';
    display: block;
    width: 60px; /* 下線の幅 */
    height: 3px; /* 下線の太さ */
    background-color: #4682B4; /* ヘッダーの青色に合わせる */
    margin: 10px auto 0; /* 中央寄せ */
    border-radius: 2px;
}
.photo-section .description-text {
    font-size: 1.05em; /* 少し大きめに */
    color: #555; /* 少し濃いめの色に */
    margin-bottom: 35px; /* 画像ギャラリーとの間隔をさらに広げる */
    text-align: center;
    line-height: 1.6;
    max-width: 700px; /* 説明文の幅を制限 */
    margin-left: auto;
    margin-right: auto;
}

/* 画像ギャラリーのレイアウト */
.gallery {
    display: grid; /* FlexboxからGridに変更してより柔軟なレイアウトを可能に */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 画像サイズに合わせて自動調整 */
    gap: 20px; /* 画像間のスペースを増やす */
    justify-items: center; /* グリッドアイテムを中央揃え */
    padding: 15px;
}
/* 画像が多いセクションの調整例 */
.photo-section:nth-of-type(3) .gallery { /* 城山公園（3番目のセクション）のギャラリー */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 画像が多いため少し小さめに表示 */
    gap: 15px;
}

.gallery-img {
    width: 100%; /* グリッドのセル幅に合わせる */
    height: 160px; /* 高さを固定し、`object-fit`で調整 */
    object-fit: cover;
    border: 2px solid #eee; /* 枠線を少し強調 */
    border-radius: 8px; /* 角丸を少し大きく */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 影を強調 */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease;
}
.gallery-img:hover {
    transform: scale(1.08) translateY(-3px); /* ホバーで少し拡大し、わずかに上に移動 */
    border-color: #2F6699; /* ホバー時に枠線の色を強調 */
    box-shadow: 0 8px 18px rgba(0,0,0,0.25); /* ホバー時に影をより強調 */
}

/* 戻るボタン */
.return-link {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}
.return-link a {
    display: inline-block; /* リンク自体をブロック要素にしてパディングを有効に */
    padding: 10px 20px;
    background-color: #4682B4; /* ボタンの色 */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.return-link a:hover {
    background-color: #2F6699; /* ホバー時の色 */
    transform: translateY(-2px); /* ホバーで少し持ち上げる */
}
/* レスポンシブ対応 (アルバム固有の調整) */
@media (max-width: 768px) {
    .photo-section {
        padding: 20px;
        margin-bottom: 40px;
    }
    .photo-section h2 {
        font-size: 1.8em;
    }
    .photo-section .description-text {
        font-size: 0.95em;
        margin-bottom: 25px;
    }
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* モバイルでの画像サイズ調整 */
        gap: 15px;
    }
    .gallery-img {
        height: 110px;
    }
    .photo-section:nth-of-type(3) .gallery {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
}

/* さらに小さな画面（スマートフォン縦向きなど） */
@media (max-width: 480px) {
    .intro-text {
        font-size: 1.1em;
        margin-bottom: 30px;
    }
    .photo-section h2 {
        font-size: 1.4em;
        letter-spacing: 0.1em;
    }
    .photo-section h2::after {
        width: 40px;
    }
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
    .gallery-img {
        height: 80px;
        border-radius: 6px;
    }
    .photo-section:nth-of-type(3) .gallery {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 8px;
    }
}