/*
Theme Name: 小学校フェスタ
Description: 小学校フェスタのための専用テーマ
Version: 1.2.0
*/

/*
 * Festa theme: appearance
 * ------------------------------------------------------------
 * このファイルは「色・フォント・角丸・影・アニメーション」など、
 * 見た目だけを管理します。配置・寸法・スマホレイアウトは layout.css です。
 * 配色や装飾を着せ替える場合は、このファイルだけを差し替えてください。
 */

/* ============================================================
 * 1. 共通カラーパレット
 * サイト全体の虹色、文字色、背景色、カードの影が変わります。
 * 個別ルールでは、できるだけこの変数を参照しています。
 * ============================================================ */
:root {
  --red:#ff5d73;
  --orange:#ff9f43;
  --yellow:#ffd93d;
  --green:#44c97a;
  --blue:#3db7e9;
  --indigo:#6474e5;
  --purple:#a35ee8;
  --pink:#f2548b;
  --ink:#35334a;
  --muted:#756f81;
  --cream:#fffaf1;
  --paper:#fffefa;
  --rainbow:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--indigo),var(--purple));
  --shadow:0 14px 36px rgba(75,58,91,.12);
}

/* ============================================================
 * 2. ページ全体
 * 本文フォント、通常の文字色、ページ背景の淡い丸模様が変わります。
 * ============================================================ */
body {
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 12%,rgba(255,217,61,.12) 0 80px,transparent 82px),
    radial-gradient(circle at 92% 42%,rgba(61,183,233,.1) 0 110px,transparent 112px),
    var(--cream);
  font-family:"Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;
  letter-spacing:.025em;
}
a { color:inherit; }
::selection { color:var(--ink); background:#ffe172; }

/* ============================================================
 * 3. ヘッダーとナビゲーション
 * 上端の虹ライン、サイト名、メニュー、スマホの三本線が変わります。
 * ============================================================ */
.site-header {
  background:rgba(255,254,250,.94);
  border-color:transparent;
  border-image:var(--rainbow) 1;
  box-shadow:0 5px 20px rgba(75,58,91,.09);
  backdrop-filter:blur(10px);
}
.logo { color:var(--ink); font-weight:900; letter-spacing:.08em; text-decoration:none; }
.logo::before { content:"●"; color:var(--pink); text-shadow:7px 0 var(--yellow),14px 0 var(--blue); }
.nav { font-weight:800; }
.nav a { border-radius:999px; text-decoration:none; transition:background .2s,color .2s,transform .2s; }
.nav a:hover { color:var(--pink); background:#fff0f5; transform:translateY(-2px); }
.menu-toggle { border:0; background:transparent; cursor:pointer; }
.menu-toggle span:not(.screen-reader-text) { background:var(--pink); border-radius:2px; transition:transform .2s,opacity .2s; }

/* ============================================================
 * 4. トップページのヒーロー
 * 虹色の大きな背景、白い円飾り、タイトル文字、ロゴ画像の影、
 * キャッチコピーの白いバッジが変わります。
 * ============================================================ */
.hero {
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.85) 0 4px,transparent 5px),
    radial-gradient(circle at 82% 24%,rgba(255,255,255,.7) 0 7px,transparent 8px),
    radial-gradient(circle at 74% 82%,rgba(255,255,255,.75) 0 5px,transparent 6px),
    linear-gradient(145deg,#ff7787 0%,#ffad4a 22%,#ffe26a 42%,#66d58e 61%,#55c7eb 78%,#9b72e8 100%);
}
.hero::before,.hero::after { content:""; border-radius:50%; }
.hero::before { border-color:rgba(255,255,255,.2); }
.hero::after { box-shadow:inset 0 0 0 24px rgba(255,255,255,.16); }
.hero-copy h1 { font-family:"Mochiy Pop One","Hiragino Maru Gothic ProN","BIZ UDPGothic",sans-serif; font-weight:400; }
.hero-art { filter:drop-shadow(0 18px 20px rgba(79,48,86,.2)); }
.hero-art img { transform:rotate(2deg); }
.hero-badge { color:#7d4160; background:rgba(255,255,255,.92); border:2px solid #fff; border-radius:999px; box-shadow:0 7px 18px rgba(93,52,82,.14); font-weight:900; transform:rotate(-2deg); }
h1 { color:#fff; font-weight:900; letter-spacing:.08em; text-shadow:0 5px 0 rgba(159,73,107,.35),0 10px 26px rgba(88,50,80,.2); }
.hero p { color:#4e4051; font-weight:900; text-shadow:0 1px 0 rgba(255,255,255,.5); }

/* ============================================================
 * 5. 共通ボタン
 * 「イベントを見る」「確認する」「送信する」などの色、丸み、影、
 * ホバー時の動きが変わります。
 * ============================================================ */
.button {
  color:#6d413d;
  background:linear-gradient(135deg,#ffe3a8,#ffb8ae);
  border-radius:999px;
  box-shadow:0 0 18px rgba(35,31,42,.22);
  font:inherit;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,box-shadow .15s,opacity .15s;
}
.button::after { content:" →"; }
.button:hover { background:linear-gradient(135deg,#ffedbd,#ffc8bd); box-shadow:0 0 24px rgba(35,31,42,.3); opacity:.9; }
.button-secondary { color:#655d69; background:#f4eef5; box-shadow:0 0 16px rgba(35,31,42,.18); }
.button-secondary::after { content:""; }
.button-secondary:hover { background:#faf5fb; box-shadow:0 0 22px rgba(35,31,42,.26); }

/* ============================================================
 * 6. セクション見出しと本文
 * 各ページの中央見出し、見出し下の虹ライン、本文内の小見出しが
 * 変わります。
 * ============================================================ */
.section-title,.editable-home-content > h2 { color:var(--ink); font-weight:900; letter-spacing:.09em; }
.section-title::after,.editable-home-content > h2::after { content:""; background:var(--rainbow); border-radius:999px; }
.entry-content h2 { border-left-color:var(--blue); }

/* ============================================================
 * 7. お知らせ一覧
 * 白い一覧カード、行ごとの虹色ライン、日付とリンクの色、
 * マウスを重ねたときの背景が変わります。
 * ============================================================ */
.news-list { background:var(--paper); border-color:#fff; border-radius:24px; box-shadow:var(--shadow); }
.news-list article { border-bottom-color:#e7daca; transition:background .2s,padding-left .2s; }
.news-list article:nth-child(5n+1) { border-left-color:var(--red); }
.news-list article:nth-child(5n+2) { border-left-color:var(--orange); }
.news-list article:nth-child(5n+3) { border-left-color:var(--yellow); }
.news-list article:nth-child(5n+4) { border-left-color:var(--green); }
.news-list article:nth-child(5n) { border-left-color:var(--blue); }
.news-list article:hover { background:#fffafc; }
.news-list time,.post-detail time { color:var(--muted); font-weight:700; }
.news-list a { font-weight:800; text-decoration:none; }
.news-list a:hover { color:var(--pink); }

/* ============================================================
 * 8. お知らせ詳細・通常の記事
 * 記事を囲む白いカード、上端の虹ライン、戻るリンクが変わります。
 * ============================================================ */
.post-detail article { background:var(--paper); border-color:#fff; border-radius:26px; box-shadow:var(--shadow); }
.post-detail article::before,.event-card::before { content:""; background:var(--rainbow); border-radius:26px 26px 0 0; }
.post-detail h1 { color:var(--ink); text-shadow:none; }
.back-link a { color:var(--muted); border-bottom-color:#d8c7b8; text-decoration:none; }
.back-link a:hover { color:var(--pink); }

/* ============================================================
 * 9. イベントカードとスケジュール表
 * イベントカードの白地・虹ライン、画像の丸み、表の見出し色、
 * 各行左側の虹色アクセントが変わります。
 * ============================================================ */
.event-card { background:var(--paper); border-color:#fff; border-radius:24px; box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; }
.event-card:hover { transform:translateY(-5px) rotate(-.3deg); box-shadow:0 20px 38px rgba(75,58,91,.16); }
.event-card img { border-radius:15px; }
.event-card h3 { color:var(--pink); }
.schedule th { color:#fff; background:#665d79; }
.event-list .reservation-required { color:#c6283d; }
.event-sort { color:inherit; background:transparent; border:0; border-radius:inherit; font:inherit; font-weight:700; }
.event-sort:hover { background:rgba(255,255,255,.12); }
.event-sort:focus-visible { outline:2px solid var(--yellow); outline-offset:-3px; }
.schedule td { background:#fff; box-shadow:0 5px 14px rgba(75,58,91,.07); }
.schedule tr > :first-child { border-radius:13px 0 0 13px; }
.schedule tr > :last-child { border-radius:0 13px 13px 0; }
.schedule tbody tr:nth-child(7n+1) td:first-child { border-left-color:var(--red); }
.schedule tbody tr:nth-child(7n+2) td:first-child { border-left-color:var(--orange); }
.schedule tbody tr:nth-child(7n+3) td:first-child { border-left-color:var(--yellow); }
.schedule tbody tr:nth-child(7n+4) td:first-child { border-left-color:var(--green); }
.schedule tbody tr:nth-child(7n+5) td:first-child { border-left-color:var(--blue); }
.schedule tbody tr:nth-child(7n+6) td:first-child { border-left-color:var(--indigo); }
.schedule tbody tr:nth-child(7n) td:first-child { border-left-color:var(--purple); }
.color-block { background:#e6f8ff; border-color:#fff; border-radius:26px; box-shadow:var(--shadow); }
.event-notice { border-radius:8px; }
.event-notice-reservation { background:#ffe6e9; }
.event-notice-walk-in { background:#e8f8df; }
.event-notice-reservation,.event-notice-walk-in { font-weight:700; }
.event-notice-fee { background:#e6f8ff; }
.event-draft-label { color:var(--ink); background:#fff2bf; border-radius:4px; }
.volunteer { background:#fff2bf; border-color:#fff; border-radius:26px; box-shadow:var(--shadow); }

/* ============================================================
 * 10. お問い合わせ入力・確認画面
 * フォームカード、入力欄、フォーカス色、成功・エラー通知、
 * 確認内容の区切り線が変わります。
 * ============================================================ */
.contact { background:var(--paper); border-color:#fff; border-radius:26px; box-shadow:var(--shadow); }
.contact label,.contact-confirm-lead,.contact-confirm-list dt { font-weight:800; }
.contact input,.contact textarea { color:var(--ink); background:#fff; border-color:#e4d9eb; border-radius:12px; font:inherit; transition:border-color .2s,box-shadow .2s; }
.contact input:focus,.contact textarea:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(61,183,233,.16); }
.notice { background:#e8f8df; border-left-color:var(--green); border-radius:10px; }
.notice-error { background:#fff1eb; border-left-color:var(--orange); }
.contact-confirm-list > div { border-bottom-color:#dfd3e4; }

/* ============================================================
 * 11. フッター
 * ページ最下部の濃い背景、白文字、上端の虹ラインが変わります。
 * ============================================================ */
.site-footer { color:#fff; background:#3b374b; }
.site-footer::before { content:""; background:var(--rainbow); }

/* ============================================================
 * 12. スマホ時だけの見た目
 * 開いたメニューの区切り線、ハンバーガーから×への変形、
 * ヒーロータイトルの文字間隔が変わります。
 * ============================================================ */
@media (max-width:768px) {
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform:translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(4) { transform:translateY(-8px) rotate(-45deg); }
  .nav,.nav a { border-color:#eee2ea; }
  .nav a { border-radius:0; }
  .hero h1 { letter-spacing:.04em; }
}

/* 動きを減らすOS設定では、装飾アニメーションをほぼ停止します。 */
@media (max-width:768px) {
  .event-list tbody tr { background:#fff; border-radius:13px; box-shadow:0 5px 14px rgba(75,58,91,.07); }
  .event-list tbody td { background:transparent; box-shadow:none; border-radius:0; }
  .event-list tbody td:first-child { border-radius:13px 13px 0 0; font-weight:700; }
  .event-list tbody td:last-child { border-radius:0; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; }
}