/* メイン画像エリア */
.hero {
    background-color: #ddd;
    display: flex;    
    height: auto;  /* 高さを固定せず、写真の大きさに合わせる */
    align-items : center;
    justify-content: center;
    background-image: url('main-image.jpg'); /* ここに園の写真を設定 */
    background-size: cover;/* 背景色を消して透明にする */
    background-color: transparent !important;
    padding: 0px 0; /* 上下に少し余白を作ると綺麗です */
}

/* コンテンツ幅の制限 */
.container {
    padding: 0px;
    max-width: 800px;
    margin: auto;
}

/* お知らせ・セクション */
section {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
    color: #ff6600;
    border-bottom: 2px dotted #ff6600;
    padding-bottom: 5px;
} 

/* タイトルの絵と文字を横並びにする */
.container2 {
    display: flex;
    align-items: center; /* 上下中央に揃える */
    justify-content: center; /* 左右中央に寄せる */
    gap: 40px; /* ロゴと文字の間の隙間 */
    max-width: 900px;
    margin-top: 20px;
} 
        
    /* タイトル絵のサイズ調整 */
    .logo2 {            
        width: 60px;  /* スマホで見やすいサイズ */
        height: auto;
    }

    /* タイトル文字の調整*/
    .container2-h2 {
        margin: 0;
        font-size: 1.5rem; /* スマホでちょうど良い大きさ */
    }

/* メニュー全体の枠組み */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* PCでは6列 */
    gap: 5px; /* ボタン同士の隙間 */
    margin: 20px 0;
}

/* ボタン1つ1つの装飾 */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 20px;
    color: #333;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

    .menu-item:active {
        transform: translateY(3px); /* 押した時に少し凹む演出 */
    }

/* ボタンごとの色（幼稚園らしいパステルカラー） */
    .color1 { background-color: #ffedfa; border: 2px solid #ffc1e3; }
    .color3 { background-color: #e6f7ff; border: 2px solid #91d5ff; }
    .color5 { background-color: #f6ffed; border: 2px solid #b7eb8f; }

    .menu-item .icon {
        width: auto;  /* スマホで見やすいサイズ */
        height: 60px;
    }

    .menu-item .icon {
    font-size: 2rem;
    margin-bottom: 5px;
}

    .menu-item .icon2 {
        width: auto;  /* スマホで見やすいサイズ　インスタ用 */
        height: 40px;
    }

    .menu-item .text {
        font-size: 0.9rem;
    }

/* ★スマホ用の設定（@media の中に書き足してください） */
@media (max-width: 480px) {
    .menu-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホでは2列にする */
    }
}

/* コンテンツ幅の制限 */
.container {
    padding: 0px;
    max-width: 800px;
    margin: auto;
}

/* お知らせ・セクション */
section {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
    color: #ff6600;
    border-bottom: 2px dotted #ff6600;
    padding-bottom: 5px;
} 

/* タイトルの絵と文字を横並びにする */
.container2 {
    display: flex;
    align-items: center; /* 上下中央に揃える */
    justify-content: center; /* 左右中央に寄せる */
    gap: 40px; /* ロゴと文字の間の隙間 */
    max-width: 900px;
    margin: 0 auto;
} 
        
    /* タイトル絵のサイズ調整 */
    .logo2 {            
        width: 60px;  /* スマホで見やすいサイズ */
        height: auto;
    }

    /* タイトル文字の調整*/
    .container2-h2 {
        margin: 0;
        font-size: 1.5rem; /* スマホでちょうど良い大きさ */
    } 

/* 詳細へ移動のボタン */
.btn-link {
    display: block;
    background: #cfedfc;
    color: #333;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    margin: 20px 0;
}

.about{
    margin-left: 170px;
}


.schedule-container {
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    border: 2px dashed #ffcc00; /* 幼稚園らしい点線の枠 */
}

.schedule-item {
    display: flex;
    margin-bottom: 20px;
    border-left: 3px solid #ffcc00; /* 横のライン */
    padding-left: 20px;
    position: relative;
}

/* ラインの上の丸印 */
.schedule-item::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 15px;
    height: 15px;
    background: #ffcc00;
    border-radius: 50%;
}

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

.content h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #333;
}



.content p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

     
/* 和光だよりのサイズ調整 */
.logo3 {            
    width: 120px;  /* スマホで見やすいサイズ */
    height: auto;
}

    /* 和光だよりを横並びにする */
    .container3 {
        display: flex;
        align-items: center; /* 上下中央に揃える */
        justify-content: center; /* 左右中央に寄せる */
        gap: 0px; /* ロゴと文字の間の隙間 */
        max-width: 900px;
        margin: 0 auto;
        }

/* 電話のボタン */
.btn-phone {
    display: block;
    background: #ffcc00;
    color: #333;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    margin: 20px 0;
}