/* ホームページ全体の設定 */

    /* 使用文字*/
body {
    font-family: 'Zen Maru Gothic', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

    /* 固定ヘッダーの高さ分だけ、ジャンプ位置を下にずらし
        かつ、スクロールを滑らかにする */
html {
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}

/* ホームページ全体の設定 終わり */

/* ヘッダー（カタツムリと和光幼稚園）の設定 */

    /* 画面の一番上に張り付かせる */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ccffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);    
    padding: 10px 0;
    margin: 0;
}

    /* カタツムリと和光幼稚園を横並びにする */
.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
} 
        
    /* カタツムリのサイズ調整 */
.logo {            
    width: 60px;
    height: auto;
}

    /* 文字と文字位置の調整 */
.header-text h1 {
    margin: 0;
    font-size: 1.5rem;
}

.header-text p {
    margin: 0;
    font-size: 0.8rem;
}

/* ヘッダー（カタツムリと和光幼稚園）の設定　終わり */

/* フッター の設定 */    
    /* トップへの ロゴ */
 .animl {  
    position: fixed;
    bottom: 0;
    right: 0;
    width: 60px;
    z-index: 100;
 }

    /* フッター */
footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    background: #eee;
}

/* フッター の設定 の終わり */  

/* 本文での共通アイテム */
    
    /* PCでの最大幅 */
    .container {
        padding: 0px;
        max-width: 400px;
        margin: auto;
    }
    
    /* 項目ごとのパネルの設定 */
    section {
        background: white;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* 項目タイトル設定 */
        /* 絵とタイトルを横並びに */
    .container2 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        max-width: 900px;
        margin: 0 auto;
        }
        /* 絵のサイズ調整 */
        .logo2 {            
            width: auto;
            height: 60px;
        } 
        /* 文字の調整 */
    h2 {
        color: #ff6600;
        border-bottom: 2px dotted #ff6600;
        padding-bottom: 5px;
    } 

    /*メニューボタンの設定 */
        /* ボタンを横並びに設定*/
    .menu-grid{ 
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 画面幅で自動整列 */
        gap: 5px; 
        margin: 20px 0;
    }
        /* ボタンの装飾 */        
    .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);
    }


    /* 電話のボタン */
    .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;
    }
/* 本文での共通アイテム 終わり */



/*index のみ使用 */

/* index で共通*/

    /* 詳細へ移動のボタン */
    .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;
    }

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

/* index で共通 終わり */


    /* シンボル絵（自然の中でゆったりと）の設定*/
.symbol {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;    
}

    /* メニューボタンの設定 */
        /* ボタンごとの色 */
    .color1 {
        background-color: #ffedfa;
        border: 2px solid #ffc1e3;
    }
    .color2 {
        background-color: #e6f7ff;
        border: 2px solid #91d5ff;
    }
    .color3 {
        background-color: #f6ffed;
        border: 2px solid #b7eb8f;
    }
        /* ボタンのイラストと文字サイズ
            イラストのサイズ */
    .icon {
        width: auto;
        height: 60px;
        font-size: 2rem;
        margin-bottom: 5px;
    }
            /* インスタのサイズ */
    .icon2 {
        width: auto;  /* スマホで見やすいサイズ　インスタ用 */
        height: 40px;
    }
        /* メニューボタンをスマホ用に設定 */
    @media (max-width: 480px) {
        .menu-grid {
        grid-template-columns: repeat(2, 1fr); 
        }
    }

    /* メニューボタンの設定　終わり */

    /* index の本文 */
        /* 教育目標・理念 */
    .na1{
        text-align: center; 
        font-weight: bold;
        margin-bottom: -10px;
        color: #095b3e;
        font-size:x-large;
    }
    .na2{
        text-align: center; 
        font-weight: bold;
        color: #bb5ba9;
        font-size:large;
    }
    
    .na3{
        list-style: none;
        padding-left: 0;
        text-align: center; 
        font-size:20px;
        font-weight: bold;
        margin-top: -5px;
        margin-bottom: -10px;
    }
    .na31{
        color: #f18f17;
    }
    .na32{
        color: #f677c5;
    }
    .na33{
        color: #be57b5;
    }
    .na34{
        color: #7081eb;
    }
    .na35{
        color: #3ed940;
    }

        /* 教育目標・理念 終わり */

        /* 園での一日 */
        /* 時刻と内容の調整 */
    .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;
    }
    /* 園での一日 終わり */

    /* 和光だより */
    .news {
        margin-top: 20px;
        width: 120px;
        height: auto;
    }
    /* 和光だよりを横並びにする */
    .container3 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0px;
        max-width: 900px;
        margin: auto;
     }
     /* 和光だより 終わり */

/* index のみ使用 終わり */


/* about のみ使用 */

     /* タイトル文字の装飾 */
    .na122{
        text-align: center; 
        color: #1620ed;
        font-size:23px;
        font-weight: bold;
        margin-bottom: 0px;
    }    
    .na121{
        text-align: center; 
        color: #316742;
        font-size:23px;
        font-weight: bold;
        margin-bottom: 0px;
    }
    
/* about のみ使用 終わり */


/* life のみ使用 */

    /* わこうの一年 の設定 */
    .container3 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px; 
        max-width: 900px;
        margin-top: -20px;
    }
    .logo3 {            
        width: 30px;
        height: auto;
    }
    .for {
        margin-top: -10px;
        margin-bottom: -15px;
    }

    /* 月間予定の設定 */
        /* 月カードの設定 */
    .event-card {
        background: #fdfdfd;
        border: 2px solid #e6f7ff;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: transform 0.2s;text-align: center;
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #fdfdfd;
        border: 2px solid #e6f7ff;
        border-radius: 15px;
    }
        /* 月タイトルの設定 */
    .month0{
        color: green;
        text-align: center;
        padding: 5px;
        font-weight: bold;
    }
    .month4 {
        background:#ffecf2;
    }
    .month6 {
        background: #e6f7ff;
    }
    .month8 {
        background: #f0fff0;
    }
    .month10 {
        background: #fff0f0;
    }
    .month12 {
        background: #fffbe6;
    }
    .month2 {
        background:#f0f5ff;
    }
        /* 月間予定 */
    .event-card ul {
        list-style: none;
        padding: 10px;
        margin: 0;
        font-size: 0.85rem;
    }
    .event-card li {
        padding: 3px 0;
        border-bottom: 1px dotted #eee;
        text-align: center;
    }
        /* PCやタブレットなど、画面幅が広い時の設定 */
    @media (min-width: 900px) {
        .event-grid {
            grid-template-columns: repeat(6, 1fr); 
        }
    }

/* life のみ使用 終わり */


/* life_2 のみ使用 */

/* life_2 で共通 */
    /* 絵と文字を並列に設定 */
    .flex-container {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 20px 0;
    }
    .flex-container2 {
        justify-content: center;
    }

    /* 絵の設定 */
    .section-image {
        display: block;
        margin: 20px auto;
        max-width: 80%;
        height: auto;
        border-radius: 15px;
    }    
    .flex-img {
        width: 180px;
        height: auto;
    }
    .flex-img2 {
        width: 120px;
        height: auto;       
        margin-top: 60px;
        margin-left: 220px;
    }
    .flex-img3 {
        width: 120px;
        height: auto;
    }

    /* 文字の設定 */
    .flex-text {
        flex: 1;
    }
    .a{
        font-style : italic;
    }
    .b{
        font-weight : bold;
    }

    /* life_2 で共通 終わり*/

    /* タイトル　風 */
    .wind{
        height: auto;
        min-height: 100px;
    }
    .wind2{
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    /* 夏祭おどり */
    .dance{    
        margin-top: -300px;
        margin-left: 180px;
    }

/* life_2 のみ使用 終わり */

/* guidance のみ使用 */
    /* 入園案内の設定 */
.list2 {
    list-style: none;
    padding: 0px;
    margin-left: -10PX;
}
.list3{
    list-style: none;
    padding: 10px;
    margin: 0;
}
    /* 連絡先の設定 */
.phone1{
    margin-top: -15px;
    margin-left: 50px;
}
.phone2{
    margin-top: -15px;
}

/* guidance のみ使用 終わり */