/**
 * おたよりページ専用スタイル
 * 
 * 園長通信と園庭通信のカード型レイアウト
 * 背景は卵型メニューと統一、ドット柄でかわいらしく
 */

/* ページ全体のコンテナ */
.otayori-page {
    max-width: 1200px; /* 最大幅を1200pxに制限 */
    margin: 0 auto; /* 中央揃え */
    padding: 40px 20px; /* 上下40px、左右20pxの余白 */
}

/* ヘッダー部分 */
.otayori-page__header {
    text-align: center; /* テキストを中央揃え */
    margin-bottom: 50px; /* 下に50pxの余白 */
}

/* ページタイトル */
.otayori-page__title {
    font-size: 2.5em; /* フォントサイズ大きめ */
    margin-bottom: 15px; /* 下に15pxの余白 */
    color: #333; /* 濃いグレー */
    font-weight: bold; /* 太字 */
}

/* ページ説明文 */
.otayori-page__description {
    font-size: 1.2em; /* やや大きめのフォント */
    color: #666; /* グレー */
    line-height: 1.8; /* 行間を広めに */
}

/* カードを並べるグリッドコンテナ */
.otayori-cards {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 最小300px、可変カラム */
    gap: 40px; /* カード間の余白40px */
    margin-top: 40px; /* 上に40pxの余白 */
}

/* カード本体 */
.otayori-card {
    background: white; /* 白背景 */
    border-radius: 20px; /* 角丸20px */
    padding: 40px 30px; /* 上下40px、左右30pxの余白 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 柔らかい影 */
    position: relative; /* 子要素の位置指定の基準 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}

/* カードのドット柄背景 */
.otayori-card::before {
    content: ""; /* 疑似要素として表示 */
    position: absolute; /* 絶対位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(248, 187, 208, 0.15) 2px, transparent 2px); /* ピンクのドット */
    background-size: 15px 15px; /* ドットの間隔 */
    border-radius: 20px; /* カードと同じ角丸 */
    pointer-events: none; /* クリックイベントを無効化 */
}

/* カードホバー時のアニメーション */
.otayori-card:hover {
    transform: translateY(-5px); /* 5px上に浮く */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 影を濃く */
}

/* カードの中身（ドット柄より前面に表示） */
.otayori-card__content {
    position: relative; /* 相対位置 */
    z-index: 1; /* ドット柄より前面 */
}

/* アイコン（絵文字） */
.otayori-card__icon {
    font-size: 3.5em; /* 大きめのフォントサイズ */
    text-align: center; /* 中央揃え */
    margin-bottom: 20px; /* 下に20pxの余白 */
}

/* カードのタイトル */
.otayori-card__title {
    font-size: 1.6em; /* やや大きめ */
    font-weight: bold; /* 太字 */
    text-align: center; /* 中央揃え */
    margin-bottom: 10px; /* 下に10pxの余白 */
    color: #333; /* 濃いグレー */
}

/* カードのサブタイトル */
.otayori-card__subtitle {
    font-size: 1.3em; /* 中くらいのサイズ */
    text-align: center; /* 中央揃え */
    margin-bottom: 25px; /* 下に25pxの余白 */
    color: #f06292; /* ピンク系 */
    font-weight: bold; /* 太字 */
}

/* カード内のテキスト */
.otayori-card__text {
    font-size: 1em; /* 通常サイズ */
    color: #555; /* やや薄いグレー */
    margin-bottom: 20px; /* 下に20pxの余白 */
    line-height: 1.8; /* 行間を広めに */
}

/* スケジュール表示部分 */
.otayori-card__schedule {
    font-size: 1em; /* 通常サイズ */
    color: #666; /* グレー */
    margin-bottom: 20px; /* 下に20pxの余白 */
    padding-left: 1.5em; /* 左に余白 */
}

/* 特徴・機能エリア */
.otayori-card__features {
    margin: 20px 0; /* 上下に20pxの余白 */
}

/* ボタン */
.otayori-card__button {
    display: inline-block; /* インラインブロック要素 */
    width: 100%; /* 幅いっぱい */
    padding: 15px 30px; /* 上下15px、左右30pxの余白 */
    background-color: #f8bbd0; /* ピンク背景 */
    color: #333; /* 濃いグレー文字 */
    text-align: center; /* 中央揃え */
    text-decoration: none; /* 下線なし */
    border-radius: 30px; /* 丸いボタン */
    font-weight: bold; /* 太字 */
    font-size: 1.1em; /* やや大きめ */
    transition: background-color 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
    margin-top: 10px; /* 上に10pxの余白 */
}

/* ボタンホバー時 */
.otayori-card__button:hover {
    background-color: #f48fb1; /* 少し濃いピンク */
    transform: scale(1.05); /* 少し拡大 */
}

/* 無効化されたボタン */
.otayori-card__button--disabled {
    background-color: #e0e0e0; /* グレー背景 */
    color: #999; /* 薄いグレー文字 */
    cursor: not-allowed; /* カーソルを禁止マークに */
}

/* 無効化されたボタンのホバー */
.otayori-card__button--disabled:hover {
    background-color: #e0e0e0; /* 色変わらない */
    transform: none; /* 拡大しない */
}

/* 注意書きテキスト */
.otayori-card__notice {
    font-size: 0.95em; /* やや小さめ */
    color: #999; /* 薄いグレー */
    text-align: center; /* 中央揃え */
    margin-top: 15px; /* 上に15pxの余白 */
    line-height: 1.6; /* 行間 */
}

/* レスポンシブ対応：タブレット・スマホ */
@media screen and (max-width: 768px) {
    .otayori-page__title {
        font-size: 2em; /* タイトルを少し小さく */
    }

    .otayori-page__description {
        font-size: 1em; /* 説明文を通常サイズに */
    }

    .otayori-cards {
        grid-template-columns: 1fr; /* 1カラム表示 */
        gap: 30px; /* カード間の余白を30pxに */
    }

    .otayori-card {
        padding: 30px 20px; /* パディングを調整 */
    }
}