/* 西谷保育園: 昼の青空と木々 */
   body.nishiya-theme {
       background-image: url('images/nishiya-haikei.webp');
       background-size: cover;
       background-position: center center;
       background-repeat: no-repeat;
       background-attachment: fixed;
   }

.access-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* 小さい画面で折り返す */
}

.map-area {
    flex: 2; /* 地図の領域を広めに */
    min-width: 300px; /* 最小幅 */
}

.map-area iframe {
    width: 100%;
    height: 400px; /* 地図の高さ */
    border-radius: 8px;
}

.info-area {
    flex: 1; /* 情報の領域 */
    min-width: 250px; /* 最小幅 */
    background-color: #e8f5e9; /* 西谷テーマカラーに合わせた薄い背景色 */
    padding: 20px;
    border: 4px solid #388E3C; /* Thicker, darker green border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
}

.info-area h3 {
    margin-top: 0;
    color: #4CAF50;
    font-size: 1.8em; /* 園の名前を拡大 */
}

.info-area p {
    margin-bottom: 5px;
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: auto 1fr; /* ラベルと値の2カラム */
    gap: 5px; /* ラベルと値の間のスペース */
    text-align: left; /* 左寄せ */
}

.info-label {
    font-weight: bold;
}

.info-value {
    /* flex-grow: 1; */ /* 不要になったため削除 */
}

.info-value a {
    color: inherit; /* 親要素の文字色を継承 */
    text-decoration: none; /* 下線をなくす */
}

.info-value a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}

.download-list ul {
    list-style: none;
    padding: 0;
}

.download-list li {
    margin-bottom: 10px;
}

.download-list li a {
    font-size: 1.2em; /* 文字を大きく */
    color: #333; /* 文字色 */
    text-decoration: none;
    display: block;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.download-list li a:hover {
    background-color: #f0f0f0;
}

/* Gallery Styles */
.gallery-section {
    margin-bottom: 30px;
}

.gallery-section h3 {
    text-align: left;
    color: #4CAF50;
    border-bottom: 2px solid #e0ffe0;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.8em; /* フォントサイズを大きく */
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.thumbnail-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.thumbnail-grid img:hover {
    transform: scale(1.05);
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content {
    margin: auto;
    display: flex;
    background-color: #fefefe;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
}

.modal-main-image {
    flex: 3; /* Main image takes more space */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-main-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-thumbnails {
    flex: 1; /* Thumbnails take less space */
    padding: 10px;
    overflow-y: auto; /* Scroll for many thumbnails */
    background-color: #f0f0f0;
}

.modal-thumbnails .thumbnail-grid {
    grid-template-columns: 1fr; /* Single column for modal thumbnails */
    gap: 10px;
}

.modal-thumbnails .thumbnail-grid img {
    height: 100px; /* Smaller thumbnails in modal */
}

.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Class Page Styles */
.class-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px; /* カラム間のスペース */
    row-gap: 40px; /* 行間のスペース */
}

.class-item {
    text-align: center;
    padding: 15px;
    height: 200px; /* 高さを設定して背景画像が見えるように */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* 子要素の配置基準 */
    overflow: hidden; /* はみ出る部分を隠す */
    border: 4px solid #388E3C; /* クレヨン調の枠 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #333; /* テキストの色を黒に */
    transition: box-shadow 0.3s ease-in-out; /* シャドウのアニメーションを追加 */
}

.class-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* 初期オーバーレイを少し濃く */
    z-index: 1;
    transition: background-color 0.3s;
}

.class-item:hover::before {
    background-color: rgba(255, 255, 255, 0.6); /* ホバーで薄くする */
}

.class-item:hover {
    box-shadow: 0 0 15px rgba(56, 142, 60, 0.7); /* ホバー時に緑系の光るシャドウ */
}

.class-item h3,
.class-item h4 {
    position: relative;
    z-index: 2;
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.7); */ /* 白文字用の影は削除 */
    margin: 5px 0; /* 余白調整 */
}

.class-item h3 {
    font-size: 1.8em;
}

.class-item h4 {
    font-size: 1.5em;
    font-weight: normal;
}

/* Annual Events Page Styles */
.events-container {
    display: block; /* flexboxの影響をリセット */
    width: 80vw; /* 画面幅の80%の幅にする */
    max-width: 800px; /* ただし最大幅は800pxまで */
    margin: 0 auto;
    padding: 20px;
}

body.nishiya-theme .event-term {
    width: 100%; /* 親要素の幅いっぱいに広がるように明示的に指定 */
    box-sizing: border-box; /* paddingとborderを幅の内側に含めるおまじない */
    border: 4px solid #388E3C; /* Thicker, darker green border */
    /* 手書き風のいびつな角丸 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    background-color: #f9fff9;
    /* Crayon-like shadow */
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
    margin-bottom: 20px;
}

/* 各期のボックスを少し傾ける */
.event-term:nth-of-type(1) {
    transform: rotate(0deg);
}
.event-term:nth-of-type(2) {
    transform: rotate(0deg);
}
.event-term:nth-of-type(3) {
    transform: rotate(0deg);
}

.event-term h3 {
    color: #4CAF50;
    margin-top: 0;
    border-bottom: 2px solid #a5d6a7;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.event-term ul {
    list-style: none;
    padding-left: 0;
}

.event-term li {
    font-size: 1.1em;
    padding: 8px 0;
    border-bottom: 1px dashed #a5d6a7; /* 薄い緑の点線 */
}

.event-term li:last-child {
    border-bottom: none;
}

/* Mascot Comment Section Styles */
.mascot-comment-section {
    display: block; /* スマホ表示と同様に縦並びにする */
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

.mascot-unit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px; /* ユニット間の余白を追加 */
}

.mascot-unit:last-child {
    margin-bottom: 0;
}

/* ユニットごとに少し傾ける */
.mascot-unit:nth-child(1) {
    transform: rotate(0deg);
}
.mascot-unit:nth-child(2) {
    transform: rotate(0deg);
}

.mascot-image {
    width: 120px;
    flex-shrink: 0;
}

.mascot-image img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.speech-bubble {
    width: 100%;
    position: relative;
    background: #e8f5e9;
    /* 手書き風のいびつな角丸 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    border: 4px solid #388E3C; /* Thicker, darker green border */
    text-align: center;
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    background: #e8f5e9;
    border: 2px solid #4CAF50;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    background: #e8f5e9;
    border: 2px solid #4CAF50;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: 0px;
    top: 60%;
    z-index: 0;
}

/* Annai Page Styles */
.annai-section-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

.annai-section {
    margin-bottom: 30px;
}

.annai-section h3 {
    color: #4CAF50; /* Nishiya's theme color */
    font-size: 1.8em;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #a5d6a7;
    margin-bottom: 15px;
}

.annai-section p {
    line-height: 1.6;
}

/* Annai Page - Three Column Section */
.annai-three-column-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.annai-column-item {
    border: 4px solid #388E3C; /* Thicker, darker green border */
    /* 手書き風のいびつな角丸 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 15px;
    background-color: #f9fff9;
    /* Crayon-like shadow */
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
}

/* Annai Page - Overview Section */
.overview-items-container {
    display: flex; /* Flexboxで1カラムにする */
    flex-direction: column; /* 縦に並べる */
    gap: 20px; /* 項目間のスペース */
    margin-top: 20px;
}

.overview-item {
    border: 4px solid #388E3C; /* Thicker, darker green border */
    /* 手書き風のいびつな角丸 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 15px;
    background-color: #f9fff9;
    /* Crayon-like shadow */
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
}

/* 個別の傾きでバリエーションを出す */
.overview-item:nth-of-type(1) {
    transform: rotate(0deg);
}
.overview-item:nth-of-type(2) {
    transform: rotate(0deg);
}
.overview-item:nth-of-type(3) {
    transform: rotate(0deg);
}
.overview-item:nth-of-type(4) {
    transform: rotate(0deg);
}

.overview-item h4 {
    color: #4CAF50;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #a5d6a7;
    padding-bottom: 5px;
}

.overview-item p {
    line-height: 1.5;
}

/* Basic Table Styles for Annai Page */
.overview-item table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.overview-item th, .overview-item td {
    border: 1px solid #a5d6a7; /* Light green border */
    padding: 8px;
    text-align: left;
}

.overview-item th {
    background-color: #e0ffe0; /* Very light green background */
    color: #4CAF50;
    font-weight: bold;
}

/* Daily Schedule Section */
.daily-schedule-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* カラム間の隙間 */
}

.daily-schedule-column {
    flex: 1;
    border: 4px solid #388E3C; /* Thicker, darker green border */
    /* 手書き風のいびつな角丸 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    background-color: #f9fff9;
    /* Crayon-like shadow */
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
}

.daily-schedule-column:last-child {
    /* 逆方向に傾ける */
    transform: rotate(0deg);
}


.daily-schedule-column h4 {
    margin-top: 0;
    text-align: center;
    font-size: 1.2em;
    color: #4CAF50;
    border-bottom: 2px solid #a5d6a7;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Timeline Styles */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #a5d6a7; /* 薄い緑の点線 */
}

.timeline li:last-child {
    border-bottom: none;
}

.timeline .time {
    font-weight: bold;
    color: #4CAF50;
    min-width: 60px;
}

.timeline .activity {
    padding-left: 15px;
}

.schedule-outer-text {
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color: #333;
    background-color: #e8f5e9; /* 薄い緑の背景 */
    border-radius: 5px;
    margin: 10px 0;
}

/* FAQ Section */
.faq-container {
    margin-top: 20px;
}

.faq-item {
    margin-bottom: 20px;
    font-size: 1.2em; /* 全体のフォントサイズを大きく */
    border: 4px solid #388E3C; /* Thicker, darker green border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7);
}

.faq-question {
    margin-bottom: 5px;
}

.faq-answer {
    padding-left: 1.5em; /* Aを少しインデント */
}

.faq-q-prefix {
    font-weight: bold;
    color: #D32F2F; /* 赤色 */
}

.faq-a-prefix {
    font-weight: bold;
    color: #1976D2; /* 青色 */
}

.faq-q-text,
.faq-a-text {
    color: #333; /* 黒色 */
}

/* Home Page Sections */
.home-section-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    /* 縦に並べるように変更 */
    display: block;
}

#hoiku-rinen-section {
    /* background-color: rgba(197, 225, 197, 0.7); */ /* 緑系の色で少し透過 */
}

/* Guide Links Container */
    /* スマホ表示用のスタイル (デフォルト) */
    body.nishiya-theme main .home-section-container .guide-links-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* ← 2列に指定 */
        gap: 20px;
        margin-top: 20px;
    }

    /* PC表示用のスタイル (画面幅が769px以上の場合) */
    @media (min-width: 769px) {
        body.nishiya-theme main .home-section-container .guide-links-container {
            grid-template-columns: repeat(4, 1fr); /* ← 4列に指定 */
        }
    }

.guide-item {
    background-color: #e8f5e9; /* 薄い緑 */
    border: 4px solid #388E3C; /* Thicker, darker green border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* 手書き風の角丸 */
    padding: 15px;
    text-align: center;
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7); /* Crayon-like shadow */
    transition: transform 0.2s ease-in-out;
}

.guide-item:hover {
    transform: translateY(-3px);
}

.guide-image-placeholder {
    width: 100%;
    height: 120px; /* 画像の高さ */
    background-color: #c8e6c9; /* 仮の背景色 */
    border-radius: 10px; /* 画像も角丸に */
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #4CAF50;
    font-size: 1.2em;
}

/* 各画像プレースホルダーの色を調整 */
.guide-image-placeholder.shisetsu { background-color: #ffe0b2; } /* オレンジ系 */
.guide-image-placeholder.annai { background-color: #bbdefb; } /* 青系 */
.guide-image-placeholder.gyoji { background-color: #ffcdd2; } /* 赤系 */
.guide-image-placeholder.class { background-color: #d1c4e9; } /* 紫系 */

.guide-comment {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 10px;
}

.guide-button {
    display: inline-block;
    background-color: #4CAF50; /* 西谷テーマカラー */
    color: white;
    padding: 8px 15px;
    border-radius: 20px; /* ボタンも丸く可愛らしく */
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

.guide-button:hover {
    background-color: #66bb6a;
}

/* Nyuen Guide Section */
.nyuen-guide-container {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

.nyuen-guide-text {
    flex: 1;
    text-align: left;
}

.nyuen-guide-text p {
    font-size: 1.1em;
    margin-bottom: 15px;
}

.nyuen-guide-button {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

.nyuen-guide-button:hover {
    background-color: #66bb6a;
}

.nyuen-guide-image-placeholder {
    flex: 1;
    height: 200px; /* 画像の高さ */
    background-color: #c8e6c9; /* 仮の背景色 */
    border: 4px solid #388E3C; /* Thicker, darker green border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* 手書き風の角丸 */
    box-shadow: 1px 1px 2px rgba(56, 142, 60, 0.7), -1px -1px 2px rgba(56, 142, 60, 0.7); /* Crayon-like shadow */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #4CAF50;
    font-size: 1.5em;
}

/* Photo Gallery Section */
.photo-gallery-preview {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2カラムに設定 */
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.photo-gallery-preview .photo-frame:nth-child(3) {
    grid-column: 1 / -1; /* 2カラムをまたぐように設定 */
    justify-self: center; /* 中央に配置 */
    width: 50%; /* 幅を調整して他の画像サイズと合わせる */
}

.photo-frame-placeholder {
    width: 100%;
    height: 150px;
    background-color: #e0f2f7; /* 水色系で可愛らしく */
    border: 5px solid #bbdefb; /* 太めのボーダー */
    border-radius: 20px; /* 大きな角丸 */
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1); /* 影 */
    transform: rotate(0deg); /* 少し傾ける */
    transition: transform 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #42a5f5;
    font-size: 1.1em;
    position: relative; /* 擬似要素の基準 */
    overflow: hidden; /* 画鋲がはみ出さないように */
}

.photo-frame-placeholder:nth-child(1) { --rotation: 0; }
.photo-frame-placeholder:nth-child(2) { --rotation: 0; }
.photo-frame-placeholder:nth-child(3) { --rotation: 0; }

.photo-frame-placeholder:hover {
    transform: scale(1.05) rotate(0deg); /* ホバーで少し拡大し、傾きを戻す */
}

/* 画鋲のスタイル */
.photo-frame-placeholder::before,
.photo-frame-placeholder::after {
    content: '';
    position: absolute;
    width: 15px; /* 画鋲の頭のサイズ */
    height: 15px;
    border-radius: 50%;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* 影で立体感を出す */
    z-index: 10; /* フレームより手前に表示 */
}

.photo-frame-placeholder::before {
    top: 5px; /* 位置調整 */
    left: 5px; /* 位置調整 */
    transform: rotate(0deg); /* 少し傾ける */
}

.photo-frame-placeholder::after {
    top: 5px; /* 位置調整 */
    right: 5px; /* 位置調整 */
    transform: rotate(0deg); /* 少し傾ける */
}

/* 各画鋲の色 */
.photo-frame-placeholder:nth-child(1)::before { background-color: #FFEB3B; } /* 黄色 */
.photo-frame-placeholder:nth-child(1)::after { background-color: #F44336; } /* 赤色 */

.photo-frame-placeholder:nth-child(2)::before { background-color: #8BC34A; } /* 緑色 */
.photo-frame-placeholder:nth-child(2)::after { background-color: #FFEB3B; } /* 黄色 */

.photo-frame-placeholder:nth-child(3)::before { background-color: #F44336; } /* 赤色 */
.photo-frame-placeholder:nth-child(3)::after { background-color: #8BC34A; } /* 緑色 */

.view-more-button {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    transition: background-color 0.2s;
}

.view-more-button:hover {
    background-color: #66bb6a;
}

/* Saiyo Info Section */
#saiyo-info-section {
    /* background-color: rgba(255, 243, 224, 0.7); */ /* オレンジ系の色で少し透過 */
}

.saiyo-button {
    display: inline-block;
    background-color: #4CAF50; /* 西谷テーマカラー */
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.2s;
}

.saiyo-button:hover {
    background-color: #66bb6a;
}

.philosophy-text {
    text-align: center;
}

@media (max-width: 768px) {
    .philosophy-text {
        text-align: left;
    }

    .access-container,
    .daily-schedule-container,
    .nyuen-guide-container { /* ★ nyuen-guide-container を追加 */
        flex-direction: column;
    }

    .nyuen-guide-container {
        align-items: center; /* 中央揃えを追加 */
    }

    /* ★ 入園案内の画像サイズを調整 */
    .nyuen-guide-image {
        width: 100%;
        height: auto;
        margin-bottom: 20px; /* 画像とテキストの間に余白を追加 */
    }

    /* ★ 入園案内のテキストとボタンを中央揃えに */
    .nyuen-guide-text {
        text-align: left;
    }

    .mascot-comment-section {
        display: block; /* グリッドレイアウトを解除 */
    }

    .class-grid,
    .annai-three-column-container {
        grid-template-columns: 1fr;
    }

    .mascot-unit {
        margin-bottom: 20px; /* 各ユニットの下に余白を追加 */
    }

    .mascot-unit:last-child {
        margin-bottom: 0;
    }

    .speech-bubble::before,
    .speech-bubble::after {
        display: none;
    }
}

/* Guide Section Images */
.guide-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 15px;
}

/* Nyuen Guide & Saiyo Images */
.nyuen-guide-image {
    flex: 1;
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Photo Gallery Preview Images */
.photo-frame {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border: 8px solid white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

.photo-frame:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Class Background Images */
.class-item.tsukushi { background-image: url('../images/nishiya/class/tsukushi.webp'); }
.class-item.tanpopo { background-image: url('../images/nishiya/class/flower_tanpopo.webp'); }
.class-item.himawari { background-image: url('../images/nishiya/class/flower_himawari_leaf_mark.webp'); }
.class-item.sumire { background-image: url('../images/nishiya/class/flower_sumire.webp'); }
.class-item.tulip { background-image: url('../images/nishiya/class/flower_tulip.webp'); }
.class-item.momo { background-image: url('../images/nishiya/class/fruit_momo.webp'); }
.class-item.suzuran { background-image: url('../images/nishiya/class/flower_suzuran.webp'); }
.class-item.yuri { background-image: url('../images/nishiya/class/flower_lily.webp'); }
.class-item.fuji { background-image: url('../images/nishiya/class/flower_fuji.webp'); }

/* Facility Gallery Styles */
.facility-gallery {
    display: block;
}

.facility-item {
    text-align: center;
    margin-bottom: 20px; /* Add margin between items */
}

.facility-item img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
    border-radius: 10px;
}

.facility-caption {
    display: none;
}