/**
 * 卵型メニュースタイル
 * 
 * パターン3（暖寒バランス型）の配色
 * 8個の卵型メニューを4×2で配置
 * ドット柄背景、ホバーアニメーション付き
 * 
 * 更新日: 2025-10-12
 * バージョン: 1.0.0
 */

/* ===========================================
   メインコンテナ
   =========================================== */
.egg-menu {
    max-width: 1000px; /* メニュー全体の最大幅 */
    margin: 0 auto; /* 中央揃え */
    padding: 40px 20px; /* 上下40px、左右20pxの余白 */
}

.egg-menu__grid {
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(4, 140px); /* 4列、各列140px幅 */
    gap: 30px; /* 卵と卵の間隔30px */
    justify-content: center; /* グリッド全体を中央揃え */
}

/* ===========================================
   卵型ボタン（共通スタイル）
   =========================================== */
.egg-menu__item {
    width: 140px; /* 卵の幅 */
    height: 170px; /* 卵の高さ */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* 卵型の形状（上が丸く、下が細い） */
    display: flex; /* フレックスボックスで中身を配置 */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: center; /* 水平方向中央揃え */
    cursor: pointer; /* マウスカーソルをポインター（手の形）に */
    transition: all 0.3s ease; /* すべてのプロパティを0.3秒かけて滑らかに変化 */
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1); /* 影：下に2px、ぼかし8px、黒10%透明 */
    border: 3px solid rgba(255,255,255,0.6); /* 白色の枠線、3px幅、60%透明 */
    text-decoration: none; /* リンクの下線を消す */
    position: relative; /* 擬似要素の基準位置 */
    overflow: hidden; /* はみ出た部分を隠す */
}

/* ドット柄背景（擬似要素で実装） */
.egg-menu__item::before {
    content: ''; /* 空のコンテンツ（擬似要素を表示するために必要） */
    position: absolute; /* 絶対配置 */
    top: 0; /* 上端から0px */
    left: 0; /* 左端から0px */
    right: 0; /* 右端から0px */
    bottom: 0; /* 下端から0px */
    /* 3種類のドット柄を重ねて表示 */
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 2px, transparent 2px), /* 左上寄りのドット */
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.5) 2px, transparent 2px), /* 右下寄りのドット */
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 2px, transparent 2px); /* 中央のドット */
    background-size: 30px 30px, 25px 25px, 35px 35px; /* 各ドット柄のサイズ */
    pointer-events: none; /* マウスイベントを無効化（クリックを下の要素に通す） */
}

.egg-menu__text {
    font-size: 16px; /* 文字サイズ16px */
    font-weight: 600; /* 文字の太さ（やや太い） */
    text-align: center; /* 文字を中央揃え */
    color: #333; /* 文字色（濃いグレー） */
    white-space: pre-line; /* 改行を反映（brタグが使える） */
    position: relative; /* z-indexを有効にするため */
    z-index: 1; /* ドット柄より前面に表示 */
}

/* ホバー時の共通アニメーション */
.egg-menu__item:hover {
    transform: translateY(-3px) rotate(1deg); /* 上に3px移動 + 1度回転 */
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15); /* 影を濃く大きく */
}

/* ===========================================
   各メニューの個別色設定
   =========================================== */

/* 園の生活（オレンジ系） */
.egg-menu__item--life {
    background-color: #ffd180; /* 通常時の背景色 */
}
.egg-menu__item--life:hover {
    background-color: #ff9800; /* ホバー時の背景色（より濃い） */
}

/* 進化し続ける保育環境（青紫系） */
.egg-menu__item--environment {
    background-color: #c5cae9; /* 通常時の背景色 */
}
.egg-menu__item--environment:hover {
    background-color: #7986cb; /* ホバー時の背景色（より濃い） */
}

/* お知らせ（緑系） */
.egg-menu__item--info {
    background-color: #c8f7c5; /* 通常時の背景色 */
}
.egg-menu__item--info:hover {
    background-color: #66d963; /* ホバー時の背景色（より濃い） */
}

/* おたより（ピンク系） */
.egg-menu__item--letters {
    background-color: #f8bbd0; /* 通常時の背景色 */
}
.egg-menu__item--letters:hover {
    background-color: #ec407a; /* ホバー時の背景色（より濃い） */
}

/* 子育て支援（青系） */
.egg-menu__item--supports {
    background-color: #b3e5fc; /* 通常時の背景色 */
}
.egg-menu__item--supports:hover {
    background-color: #29b6f6; /* ホバー時の背景色（より濃い） */
}

/* 保護者の活動（黄色系） */
.egg-menu__item--activities {
    background-color: #fff59d; /* 通常時の背景色 */
}
.egg-menu__item--activities:hover {
    background-color: #ffd54f; /* ホバー時の背景色（より濃い） */
}

/* 保護者の声（オレンジ系） */
.egg-menu__item--voices {
    background-color: #ffccbc; /* 通常時の背景色 */
}
.egg-menu__item--voices:hover {
    background-color: #ff7043; /* ホバー時の背景色（より濃い） */
}

/* 入園案内（紫系） */
.egg-menu__item--admission {
    background-color: #e1bee7; /* 通常時の背景色 */
}
.egg-menu__item--admission:hover {
    background-color: #ab47bc; /* ホバー時の背景色（より濃い） */
}

/* ===========================================
   レスポンシブ対応
   =========================================== */

/* タブレット表示（画面幅768px以下） */
@media screen and (max-width: 768px) {
    .egg-menu__grid {
        grid-template-columns: repeat(3, 140px); /* 3列表示に変更 */
        gap: 25px; /* 間隔を少し狭く */
    }
}

/* スマホ表示（画面幅520px以下） */
@media screen and (max-width: 520px) {
    .egg-menu__grid {
        grid-template-columns: repeat(2, 120px); /* 2列表示に変更、幅120px */
        gap: 20px; /* 間隔をさらに狭く */
    }
    
    .egg-menu__item {
        width: 120px; /* 卵の幅を小さく */
        height: 150px; /* 卵の高さを小さく */
    }
    
    .egg-menu__text {
        font-size: 14px; /* 文字サイズを小さく */
    }
}

/* 極小スマホ表示（画面幅320px以下） */
@media screen and (max-width: 320px) {
    .egg-menu__grid {
        grid-template-columns: 140px; /* 1列表示に変更 */
    }
    
    .egg-menu__item {
        width: 140px; /* 卵の幅を元に戻す */
        height: 170px; /* 卵の高さを元に戻す */
    }
}