/**
* 聖十字幼稚園 おたより modal
*
* TOP ページ（id=16）の卵メニュー「おたより」卵をタップした時に開く modal。
* 中身: 「そらのとり」（園長通信、active）と「園庭通信」（Coming Soon, disabled）の 2 択。
*
* 旧 /otayori/ 固定ページ（id=2632）はこの modal 化に伴い廃止。卵メニューからしか
* 到達せず内容も薄かったため、固定ページごと削除して modal に集約した（2026-05-24）。
*
* 命名: seijuji- prefix + BEM (.seijuji-otayori-modal__*)。
* 依存: assets/icons/bird.svg（Phosphor MIT, fill）/ sprout.svg（Lucide ISC, stroke）を
* data URI で内蔵。SVG mask 方式で `background-color` から色を継承。
* バージョン: 1.0.0 (2026-05-24 新規)
*/
/* ===========================================================
ルート dialog 要素
=========================================================== */
.seijuji-otayori-modal {
/* 中央配置 + ボーダー/余白の user-agent デフォルトをリセット */
border: none; /* ブラウザデフォルトの border を消す */
padding: 0; /* デフォルト 16px をリセット */
background: transparent; /* dialog 内の panel で背景を持たせる */
max-width: 100%; /* 小画面で溢れないように */
max-height: 100%; /* iOS で表示が切れないように */
overflow: visible; /* 影 / Coming Soon バッジが見切れないように */
}
/* dialog の半透明 backdrop（外側クリックで閉じる用も兼ねる） */
.seijuji-otayori-modal::backdrop {
background: rgba(50, 40, 30, 0.55); /* ダークウォームで本文を退避させる */
backdrop-filter: blur(2px); /* 弱い blur で focus 集中 */
-webkit-backdrop-filter: blur(2px);
}
/* dialog のフェードイン演出（モダンブラウザのみ） */
.seijuji-otayori-modal[open] {
animation: seijuji-otayori-modal-in 0.18s ease-out;
}
@keyframes seijuji-otayori-modal-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===========================================================
パネル（白いカードボディ）
=========================================================== */
.seijuji-otayori-modal__panel {
background: #FFFEF8; /* サイト既定のクリーム白 */
width: 100%;
max-width: 560px; /* 横並びカード 2 枚が綺麗に収まる幅 */
border-radius: 18px; /* サイト基調の柔らかい角丸 */
padding: 32px 28px 36px; /* 上下のゆとり + 左右の余白 */
box-shadow: 0 20px 60px rgba(50, 40, 30, 0.35);/* 浮遊感のある影 */
position: relative; /* close ボタンの絶対配置の基準 */
}
/* ===========================================================
閉じるボタン（× アイコン、右上）
=========================================================== */
.seijuji-otayori-modal__close {
position: absolute; /* パネル右上に固定 */
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: none;
background: transparent;
cursor: pointer;
color: #6b5a4d; /* 線の色（SVG currentColor 継承） */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.seijuji-otayori-modal__close:hover {
background: #f0e8dc; /* ホバー時に薄ベージュ円 */
}
.seijuji-otayori-modal__close:focus-visible {
outline: 2px solid #6CA8DC; /* キーボードフォーカス時のアウトライン */
outline-offset: 2px;
}
.seijuji-otayori-modal__close svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ===========================================================
リード文（modal 上部の説明）
=========================================================== */
.seijuji-otayori-modal__lead {
text-align: center;
font-size: 13.5px;
color: #6b5a4d;
margin: 0 0 22px;
letter-spacing: 0.04em;
line-height: 1.7;
}
/* ===========================================================
カードグリッド (PC: 2 列 / SP: 1 列)
=========================================================== */
.seijuji-otayori-modal__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* カード共通スタイル */
.seijuji-otayori-modal__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 16px 22px;
border-radius: 14px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative; /* COMING SOON バッジの絶対配置基準 */
}
/* === そらのとり（active） === */
.seijuji-otayori-modal__card--main {
background: linear-gradient(180deg, #EBF4FB 0%, #FFFFFF 100%); /* sky blue → 白の縦グラデ */
border: 1px solid #CCE3F2; /* sky blue 系の薄い枠 */
color: #4a3a2e;
}
.seijuji-otayori-modal__card--main:hover {
transform: translateY(-3px); /* ホバーで微浮上 */
box-shadow: 0 10px 24px rgba(108, 168, 220, 0.25);
}
.seijuji-otayori-modal__card--main:focus-visible {
outline: 2px solid #6CA8DC;
outline-offset: 2px;
}
/* === 園庭通信（disabled, Coming Soon） === */
.seijuji-otayori-modal__card--sub {
background: #faf6ef; /* 淡ベージュ、disabled 感 */
border: 1px dashed #d4c5a8; /* dashed で "未確定" 表現 */
opacity: 0.95;
cursor: not-allowed;
}
/* COMING SOON バッジ */
.seijuji-otayori-modal__coming-badge {
position: absolute;
top: 12px;
right: 12px;
background: #b8a474; /* ベージュ系 deep */
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
padding: 3px 10px;
border-radius: 999px;
}
/* ===========================================================
カード内のアイコン円
=========================================================== */
.seijuji-otayori-modal__card-mark {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
/* そらのとり（active）= sky blue gradient + 鳥アイコン */
.seijuji-otayori-modal__card--main .seijuji-otayori-modal__card-mark {
background: linear-gradient(135deg, #6CA8DC, #A1C9DD);
box-shadow: 0 4px 10px rgba(108, 168, 220, 0.35);
}
/* 園庭通信（disabled）= 淡ベージュ gradient + 双葉アイコン */
.seijuji-otayori-modal__card--sub .seijuji-otayori-modal__card-mark {
background: linear-gradient(135deg, #d4c5a8, #e6dbc4);
box-shadow: 0 2px 6px rgba(180, 160, 120, 0.18);
}
/* SVG mask アイコン本体（共通） */
.seijuji-otayori-modal__card-mark .i-bird,
.seijuji-otayori-modal__card-mark .i-sprout {
display: inline-block;
width: 36px;
height: 36px;
background-color: #fff; /* アイコン色 = 白 */
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* 鳥（Phosphor bird fill, MIT） */
.seijuji-otayori-modal__card-mark .i-bird {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* 双葉（Lucide sprout, ISC, stroke 系） */
.seijuji-otayori-modal__card-mark .i-sprout {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ===========================================================
カード内テキスト
=========================================================== */
.seijuji-otayori-modal__card-media {
font-size: 11px;
color: #6b5a4d;
letter-spacing: 0.14em;
margin: 0;
}
.seijuji-otayori-modal__card-name {
font-size: 20px;
font-weight: 700;
color: #4a3a2e;
margin: 2px 0 8px;
letter-spacing: 0.04em;
}
.seijuji-otayori-modal__card-desc {
font-size: 12.5px;
color: #6b5a4d;
line-height: 1.7;
margin: 0 0 16px;
flex: 1; /* CTA を下端に寄せる */
}
/* CTA ボタン（active 側） */
.seijuji-otayori-modal__card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: #6CA8DC; /* sky blue accent */
color: #fff;
padding: 10px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 3px 10px rgba(108, 168, 220, 0.35);
}
.seijuji-otayori-modal__card-cta::after {
content: "→";
font-size: 14px;
}
/* 「準備中」プレースホルダ（disabled 側） */
.seijuji-otayori-modal__card-cta-placeholder {
display: inline-block;
background: #ebe1cc;
color: #8a7b5a;
padding: 10px 20px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
/* ===========================================================
レスポンシブ（SP: 640px 以下）
=========================================================== */
@media (max-width: 640px) {
.seijuji-otayori-modal__panel {
padding: 28px 18px 32px; /* SP では padding 縮小 */
}
.seijuji-otayori-modal__cards {
grid-template-columns: 1fr; /* 1 列に */
gap: 12px;
}
.seijuji-otayori-modal__card-name {
font-size: 19px; /* SP では少し小さく */
}
}