/* 梅の木保育園: 夕暮れの空と木々 */
   body.umenoki-theme {
       background-image: url('images/umenoki-haikei.webp');
       background-size: cover;
       background-position: center center;
       background-repeat: no-repeat;
       background-attachment: fixed;
   }

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

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

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

body.umenoki-theme .info-area {
    flex: 1; /* 情報の領域 */
    min-width: 250px; /* 最小幅 */
    background-color: rgba(255, 243, 224, 0.7); /* 梅の木テーマカラーに合わせた透過背景色 */
    padding: 20px;
    border: 4px solid #CC7A00; /* Thicker, darker orange border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 1px 1px 2px rgba(204, 122, 0, 0.7), -1px -1px 2px rgba(204, 122, 0, 0.7);
}

body.umenoki-theme .info-area h3 {
    margin-top: 0;
    color: #FF9800; /* 梅の木テーマカラー */
    font-size: 1.8em; /* 園の名前を拡大 */
}

body.umenoki-theme .info-area p {
    display: flex;
    margin-bottom: 5px;
}

body.umenoki-theme .info-label {
    min-width: 60px; /* ラベルの最小幅を調整 */
    font-weight: bold;
}

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

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

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

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

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

body.umenoki-theme .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;
}

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

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

body.umenoki-theme .gallery-section h3 {
    text-align: left;
    color: #FF9800; /* 梅の木テーマカラー */
    border-bottom: 2px solid #ffcc80; /* 梅の木テーマカラーに合わせた下線 */
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.8em; /* フォントサイズを大きく */
}

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

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

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

/* Modal Styles */
body.umenoki-theme .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;
}

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

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

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

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

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

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

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

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

h1, h2 {
    color: #FF9800; /* オレンジ系の優しい色 */
    text-align: center;
    margin-bottom: 1em;
    font-weight: normal; /* 太すぎないフォント */
}

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

body.umenoki-theme .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 #CC7A00; /* クレヨン調の枠 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 1px 1px 2px rgba(204, 122, 0, 0.7), -1px -1px 2px rgba(204, 122, 0, 0.7);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #333; /* テキストの色を黒に */
    transition: box-shadow 0.3s ease-in-out; /* シャドウのアニメーションを追加 */
}

body.umenoki-theme .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;
}

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

body.umenoki-theme .class-item:hover {
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.7); /* ホバー時にオレンジ系の光るシャドウ */
}

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

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

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

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

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

/* Add rotation to each term box */
body.umenoki-theme .event-term:nth-of-type(1) {
    transform: rotate(0deg);
}
body.umenoki-theme .event-term:nth-of-type(2) {
    transform: rotate(0deg);
}
body.umenoki-theme .event-term:nth-of-type(3) {
    transform: rotate(0deg);
}

body.umenoki-theme .event-term h3 {
    color: #FF9800;
    margin-top: 0;
    border-bottom: 2px solid #ffcc80;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

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

body.umenoki-theme .event-term li {
    font-size: 1.1em;
    padding: 8px 0;
    border-bottom: 1px solid #fff0e1;
}

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

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

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

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

/* Add rotation to each unit */
body.umenoki-theme .mascot-unit:nth-child(1) {
    transform: rotate(0deg);
}
body.umenoki-theme .mascot-unit:nth-child(2) {
    transform: rotate(0deg);
}

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

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

body.umenoki-theme .speech-bubble {
    width: 100%;
    position: relative;
    background: #fff9f0;
    /* Hand-drawn style */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    border: 2px solid #FF9800;
    text-align: center;
}

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

body.umenoki-theme .speech-bubble::after {
    content: '';
    position: absolute;
    background: #fff9f0;
    border: 2px solid #FF9800;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: 0px;
    top: 60%;
    z-index: 0;
}

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

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

body.umenoki-theme .annai-section h3 {
    color: #FF9800; /* Umenoki's theme color */
    font-size: 1.8em;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffcc80; /* Light orange border */
    margin-bottom: 15px;
}

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

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

body.umenoki-theme .annai-column-item {
    border: 2px solid #FF9800; /* Umenoki's theme color */
    border-radius: 8px;
    padding: 15px;
    background-color: #fff9f0; /* Light orange tint */
    text-align: center;
}

/* Umenoki Features Section */
body.umenoki-theme .umenoki-features-container {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    flex-wrap: wrap; /* 折り返し */
}

body.umenoki-theme .umenoki-feature-heading {
    font-size: 1.5em; /* 少し大きめに */
    font-weight: bold;
    color: #333; /* 黒色 */
    margin: 10px 20px; /* 適度な余白 */
    padding-bottom: 5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* 各マーカーの色を薄く調整 */
body.umenoki-theme .umenoki-feature-heading:nth-child(1) {
    background-image: linear-gradient(transparent 60%, rgba(139, 195, 74, 0.4) 60%); /* 緑色 (透明度40%) */
}

body.umenoki-theme .umenoki-feature-heading:nth-child(2) {
    background-image: linear-gradient(transparent 60%, rgba(255, 235, 59, 0.4) 60%); /* 黄色 (透明度40%) */
}

body.umenoki-theme .umenoki-feature-heading:nth-child(3) {
    background-image: linear-gradient(transparent 60%, rgba(244, 67, 54, 0.4) 60%); /* 赤色 (透明度40%) */
}

/* Remove old feature-item styles */
/*
body.umenoki-theme .feature-item {
    border: 2px solid #FF9800;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 15px;
    background-color: #fff9f0;
    text-align: center;
    transform: rotate(0.5deg);
}

body.umenoki-theme .feature-item h4 {
    color: #FF9800;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ffcc80;
    padding-bottom: 5px;
}
*/

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

body.umenoki-theme .overview-item {
    border: 2px solid #FF9800;
    /* 手書き風のいびつな角丸 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 15px;
    background-color: #fff9f0;
}

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

body.umenoki-theme .overview-item h4 {
    color: #FF9800;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ffcc80;
    padding-bottom: 5px;
}

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

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

body.umenoki-theme .overview-item th, .overview-item td {
    border: 1px solid #ffcc80; /* Light orange border */
    padding: 8px;
    text-align: left;
}

body.umenoki-theme .overview-item th {
    background-color: #ffe0b2; /* Very light orange background */
    color: #FF9800;
    font-weight: bold;
}

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

body.umenoki-theme .daily-schedule-column {
    flex: 1;
    border: 2px solid #FF9800;
    /* 手書き風のいびつな角丸 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    background-color: #fff9f0;
}

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


body.umenoki-theme .daily-schedule-column h4 {
    margin-top: 0;
    text-align: center;
    font-size: 1.2em;
    color: #FF9800;
    border-bottom: 2px solid #ffcc80;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

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

body.umenoki-theme .timeline li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #ffcc80; /* 薄いオレンジの点線 */
}

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

body.umenoki-theme .timeline .time {
    font-weight: bold;
    color: #FF9800;
    min-width: 60px;
}

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

body.umenoki-theme .schedule-outer-text {
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color: #333;
    background-color: #ffe0b2; /* 薄いオレンジの背景 */
    border-radius: 5px;
    margin: 10px 0;
}

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

body.umenoki-theme .faq-item {
    margin-bottom: 20px;
    font-size: 1.2em; /* 全体のフォントサイズを大きく */
    padding: 15px;
    background-color: #fff9f0;
    border: 4px solid #CC7A00; /* Thicker, darker orange border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 1px 1px 2px rgba(204, 122, 0, 0.7), -1px -1px 2px rgba(204, 122, 0, 0.7);
}

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

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

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

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

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

body.umenoki-theme .umenoki-two-column-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

body.umenoki-theme .two-column-item {
    border: 2px solid #FF9800;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 15px;
    background-color: #fff9f0;
    text-align: center;
    transform: rotate(0deg);
}

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

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

/* Guide Links Container */
body.umenoki-theme .guide-links-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列に指定 */
    gap: 20px;
    margin-top: 20px;
}

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

body.umenoki-theme .guide-item {
    background-color: rgba(255, 243, 224, 0.7); /* アクセスセクションと同じ色 */
    border: 4px solid #CC7A00; /* Thicker, darker orange border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* 手書き風の角丸 */
    padding: 15px;
    text-align: center;
    box-shadow: 1px 1px 2px rgba(204, 122, 0, 0.7), -1px -1px 2px rgba(204, 122, 0, 0.7); /* Crayon-like shadow */
    transition: transform 0.2s ease-in-out;
    position: relative; /* ::before の基準 */
    overflow: hidden; /* はみ出る部分を隠す */
    color: #333; /* テキストの色を黒に */
}

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



body.umenoki-theme .guide-item p,
body.umenoki-theme .guide-item a,
body.umenoki-theme .guide-item img {
    position: relative;
    z-index: 2;
}

body.umenoki-theme .guide-image-placeholder {
    width: 100%;
    height: 120px; /* 画像の高さ */
    background-color: #ffe0b2; /* 仮の背景色 */
    border-radius: 10px; /* 画像も角丸に */
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #FF9800; /* 梅の木テーマカラー */
    font-size: 1.2em;
}

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

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

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

body.umenoki-theme .guide-button:hover {
    background-color: #ffb74d;
}

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

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

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

body.umenoki-theme .nyuen-guide-button {
    display: inline-block;
    background-color: #FF9800; /* 梅の木テーマカラー */
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

body.umenoki-theme .nyuen-guide-button:hover {
    background-color: #ffb74d;
}

body.umenoki-theme .nyuen-guide-image-placeholder {
    flex: 1;
    height: 200px; /* 画像の高さ */
    background-color: #ffe0b2; /* 仮の背景色 */
    border: 4px solid #CC7A00; /* Thicker, darker orange border */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* 手書き風の角丸 */
    box-shadow: 1px 1px 2px rgba(204, 122, 0, 0.7), -1px -1px 2px rgba(204, 122, 0, 0.7); /* Crayon-like shadow */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #FF9800; /* 梅の木テーマカラー */
    font-size: 1.5em;
}

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

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

body.umenoki-theme .photo-frame-placeholder {
    width: 100%;
    height: 150px;
    background-color: #ffe0b2; /* オレンジ系で可愛らしく */
    border: 5px solid #ffcc80; /* 太めのボーダー */
    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: #FF9800; /* 梅の木テーマカラー */
    font-size: 1.1em;
    position: relative; /* 擬似要素の基準 */
    overflow: hidden; /* 画鋲がはみ出さないように */
}

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

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

/* 画鋲のスタイル */
body.umenoki-theme .photo-frame-placeholder::before,
body.umenoki-theme .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; /* フレームより手前に表示 */
}

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

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

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

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

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

body.umenoki-theme .view-more-button {
    display: inline-block;
    background-color: #FF9800; /* 梅の木テーマカラー */
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    transition: background-color 0.2s;
}

body.umenoki-theme .view-more-button:hover {
    background-color: #ffb74d;
}

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

body.umenoki-theme .saiyo-button {
    display: inline-block;
    background-color: #FF9800; /* オレンジ系の色 */
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.2s;
}

body.umenoki-theme .saiyo-button:hover {
    background-color: #ffb74d;
}

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

body.umenoki-theme .info-label {
    font-weight: bold;
}

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

/* Class Page Styles */
body.umenoki-theme .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 #CC7A00; /* クレヨン調の枠 */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 1px 1px 2px rgba(204, 122, 0, 0.7), -1px -1px 2px rgba(204, 122, 0, 0.7);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.umenoki-theme .class-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明の白いオーバーレイ */
    z-index: 0;
}

body.umenoki-theme .class-item h3,
body.umenoki-theme .class-item h4 {
    position: relative;
    z-index: 1;
    color: #333; /* テキストの色を黒に */
    font-size: 1.5em; /* 年齢と同じ大きさ */
    font-weight: bold; /* 年齢と同じ太さ */
    margin: 5px 0; /* 余白調整 */
}

body.umenoki-theme .class-item h4 {
    font-size: 1.5em; /* 年齢と同じ大きさ */
    font-weight: bold; /* 年齢と同じ太さ */
}

/* 各クラスの背景画像（仮） */
body.umenoki-theme .class-item:nth-child(1) { background-image: url('images/class_0_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(2) { background-image: url('images/class_1_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(3) { background-image: url('images/class_2a_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(4) { background-image: url('images/class_2b_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(5) { background-image: url('images/class_3a_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(6) { background-image: url('images/class_3b_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(7) { background-image: url('images/class_4a_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(8) { background-image: url('images/class_4b_placeholder.png'); }
body.umenoki-theme .class-item:nth-child(9) { background-image: url('images/class_5_placeholder.png'); }

@media (max-width: 768px) {
    body.umenoki-theme .access-container,
    body.umenoki-theme .daily-schedule-container,
    body.umenoki-theme .mascot-comment-section,
    body.umenoki-theme .nyuen-guide-container {
        flex-direction: column;
    }

    body.umenoki-theme .mascot-comment-section {
        display: block;
    }

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

    body.umenoki-theme .mascot-unit {
        margin-bottom: 20px;
    }

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

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

    body.umenoki-theme .umenoki-features-container {
        flex-direction: column;
        align-items: center;
    }
}
body.umenoki-theme .philosophy-text {
    text-align: center;
}

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

/* Guide Section Images */
body.umenoki-theme .guide-item img {
    width: 100%;
    height: 150px; /* Adjust height as needed */
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 15px;
}

/* Nyuen Guide & Saiyo Images */
body.umenoki-theme .nyuen-guide-image {
    flex: 1;
    width: 100%; /* Ensure it takes full width of its flex container */
    height: 250px; /* Adjust height as needed */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

body.umenoki-theme .nyuen-guide-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Photo Gallery Preview Images */
body.umenoki-theme .photo-gallery-preview img {
    width: 100%;
    height: 180px; /* Adjust height as needed */
    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;
}

body.umenoki-theme .photo-gallery-preview img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Class Background Images */
body.umenoki-theme .class-item.mame { background-image: url('../images/umenoki/class/food_endoumame.webp'); }
body.umenoki-theme .class-item.ichigo { background-image: url('../images/umenoki/class/fruit_ichigo_amaou.webp'); }
body.umenoki-theme .class-item.sakuranbo { background-image: url('../images/umenoki/class/fruit_cherry.webp'); }
body.umenoki-theme .class-item.ringo { background-image: url('../images/umenoki/class/fruit_apple.webp'); }
body.umenoki-theme .class-item.mikan { background-image: url('../images/umenoki/class/fruit_orange2.webp'); }
body.umenoki-theme .class-item.budou { background-image: url('../images/umenoki/class/fruit_grape.webp'); }

/* Facility Gallery Styles */
body.umenoki-theme .facility-gallery {
    display: block; /* To stack images vertically */
}

body.umenoki-theme .facility-item {
    text-align: center;
    margin-bottom: 20px; /* Space between images */
}

body.umenoki-theme .facility-item img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: add some border-radius to the image itself */
}