/* ========================================================================== 追分幼稚園 公式ホームページ - リニューアル CSS (renewal.css) ========================================================================== */ /* Webフォント「Zen Maru Gothic」は各ページので読み込みしている （このCSSでは@importしない。読み込み元は各HTMLのを参照） */ :root { /* カラーパレット */ --pastel-blue-light: #F0F9FF; --pastel-blue: #E1F5FE; --pastel-blue-mid: #81D4FA; --pastel-blue-dark: #0288D1; --pastel-green-light: #F1F8E9; --pastel-green: #E8F5E9; --pastel-green-mid: #A5D6A7; --pastel-green-dark: #388E3C; --pastel-yellow: #FFF9C4; --pastel-yellow-dark: #FBC02D; --pastel-pink: #FCE4EC; --pastel-orange: #FFE0B2; --text-color: #37474F; --text-light: #607D8B; --bg-color: #FAFDFC; --white: #FFFFFF; /* フォント */ --font-family: 'Zen Maru Gothic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 角丸と影 */ --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --shadow-soft: 0 10px 30px rgba(2, 136, 209, 0.08); --shadow-hover: 0 15px 35px rgba(2, 136, 209, 0.15); /* トランジション */ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* リセット & 基本設定 */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-family); color: var(--text-color); background-color: var(--bg-color); line-height: 1.7; overflow-x: hidden; background-image: radial-gradient(var(--pastel-blue-mid) 1px, transparent 1px), radial-gradient(var(--pastel-green-mid) 1px, transparent 1px); background-size: 40px 40px; background-position: 0 0, 20px 20px; background-attachment: fixed; opacity: 0.98; } a { color: var(--pastel-blue-dark); text-decoration: none; transition: var(--transition); } a:hover { color: #01579B; opacity: 0.85; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* -------------------------------------------------------------------------- ヘッダー & ナビゲーション -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border-bottom: 3px solid var(--pastel-blue-mid); } .header-container { max-width: 1200px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .logo-link { display: flex; align-items: center; gap: 12px; } .logo-badge { background: linear-gradient(135deg, var(--pastel-blue-mid), var(--pastel-green-mid)); color: var(--white); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.05em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .logo-text h1 { font-size: 1.35rem; font-weight: 900; color: var(--pastel-blue-dark); line-height: 1.2; } .logo-text span { font-size: 0.75rem; color: var(--text-light); font-weight: 500; display: block; } /* PCナビゲーション */ .desktop-nav ul { display: flex; gap: 8px; align-items: center; } .desktop-nav a { display: inline-block; padding: 8px 16px; border-radius: 25px; font-weight: 700; font-size: 0.95rem; color: var(--text-color); background: transparent; transition: var(--transition); } .desktop-nav a:hover, .desktop-nav li.active a { background: var(--pastel-blue); color: var(--pastel-blue-dark); transform: translateY(-2px); } .desktop-nav .btn-contact a { background: linear-gradient(135deg, var(--pastel-blue-mid), var(--pastel-green-mid)); color: var(--white); box-shadow: 0 4px 12px rgba(129, 212, 250, 0.4); } .desktop-nav .btn-contact a:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 18px rgba(129, 212, 250, 0.6); } /* ハンバーガーボタン (スマホ) */ .mobile-nav-toggle { display: none; background: linear-gradient(135deg, var(--pastel-blue-mid), var(--pastel-green-mid)); border: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); position: relative; z-index: 1002; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .mobile-nav-toggle span { display: block; width: 22px; height: 3px; background-color: var(--white); border-radius: 3px; transition: var(--transition); } .mobile-nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-nav-toggle.open span:nth-child(2) { opacity: 0; } .mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* スマホドロワーメニュー */ .mobile-nav-drawer { position: fixed; top: 0; right: -100%; width: 85%; max-width: 320px; height: 100vh; background: linear-gradient(180deg, var(--white) 0%, var(--pastel-blue-light) 100%); z-index: 1001; box-shadow: -5px 0 25px rgba(0,0,0,0.15); transition: var(--transition); padding: 80px 24px 30px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; } .mobile-nav-drawer.open { right: 0; } .mobile-nav-drawer ul { display: flex; flex-direction: column; gap: 12px; } .mobile-nav-drawer a { display: block; padding: 14px 20px; border-radius: 15px; background: var(--white); font-weight: 700; color: var(--text-color); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px); z-index: 1000; opacity: 0; visibility: hidden; transition: var(--transition); } .mobile-nav-overlay.open { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- メインビジュアル (ヒーローエリア) -------------------------------------------------------------------------- */ .hero-section { position: relative; padding: 60px 20px 80px; background: linear-gradient(180deg, var(--pastel-blue-light) 0%, var(--pastel-green-light) 100%); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; text-align: center; } /* 装飾背景SVGイラスト */ .hero-decorations { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .cloud { position: absolute; background: var(--white); border-radius: 50px; opacity: 0.85; box-shadow: 0 4px 15px rgba(255,255,255,0.6); } .cloud::before, .cloud::after { content: ''; position: absolute; background: var(--white); border-radius: 50%; } .cloud-1 { width: 120px; height: 40px; top: 30px; left: 8%; animation: floatCloud 12s ease-in-out infinite alternate; } .cloud-1::before { width: 50px; height: 50px; top: -20px; left: 20px; } .cloud-1::after { width: 40px; height: 40px; top: -12px; right: 20px; } .cloud-2 { width: 160px; height: 50px; top: 60px; right: 10%; animation: floatCloud 15s ease-in-out infinite alternate-reverse; } .cloud-2::before { width: 60px; height: 60px; top: -25px; left: 30px; } .cloud-2::after { width: 50px; height: 50px; top: -15px; right: 30px; } @keyframes floatCloud { 0% { transform: translateX(0); } 100% { transform: translateX(25px); } } .hero-container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } .hero-badge { display: inline-block; background: var(--pastel-yellow); color: #D81B60; font-weight: 700; padding: 6px 18px; border-radius: 20px; font-size: 0.9rem; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 2px dashed #F6D55C; } .hero-title { font-size: 2.5rem; font-weight: 900; color: var(--pastel-blue-dark); line-height: 1.35; margin-bottom: 16px; text-shadow: 2px 2px 0px rgba(255,255,255,0.8); } .hero-title span { color: var(--pastel-green-dark); background: linear-gradient(transparent 60%, var(--pastel-yellow) 60%); } .hero-subtitle { font-size: 1.15rem; color: var(--text-color); max-width: 700px; margin: 0 auto 36px; font-weight: 500; } /* hero内 文言＋写真の左右2カラム配置 */ .hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); align-items: center; gap: 40px; text-align: left; } .hero-split .hero-subtitle { max-width: none; margin: 0; } .hero-visual { position: relative; min-width: 260px; min-height: 260px; } .hero-visual-main, .hero-visual-accent { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-hover); border: 6px solid var(--white); aspect-ratio: 4 / 3; } .hero-visual-main img, .hero-visual-accent img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-visual-accent { position: absolute; bottom: -28px; left: -28px; width: 44%; border-radius: var(--radius-md); border-width: 5px; transform: rotate(-4deg); } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; text-align: center; } .hero-split .hero-badge, .hero-split .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-visual { order: -1; max-width: 380px; margin: 0 auto 32px; } } /* -------------------------------------------------------------------------- レイアウト & コンテンツセクション -------------------------------------------------------------------------- */ .main-wrapper { max-width: 1200px; margin: 40px auto; padding: 0 20px; display: grid; grid-template-columns: 280px 1fr; gap: 40px; } /* サイドバー */ .sidebar { display: flex; flex-direction: column; gap: 24px; } .sidebar-widget { background: var(--white); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-soft); border: 2px solid var(--pastel-blue); } .sidebar-widget-title { font-size: 1.1rem; font-weight: 700; color: var(--pastel-blue-dark); padding-bottom: 10px; margin-bottom: 16px; border-bottom: 3px solid var(--pastel-green-mid); display: flex; align-items: center; gap: 8px; } .sidebar-nav-list li { margin-bottom: 10px; } .sidebar-nav-list a { display: block; padding: 10px 16px; background: var(--pastel-blue-light); border-radius: 12px; font-weight: 700; color: var(--text-color); transition: var(--transition); border-left: 4px solid var(--pastel-blue-mid); } .sidebar-nav-list a:hover { background: var(--pastel-green-light); border-left-color: var(--pastel-green-dark); transform: translateX(4px); } .banner-stack { display: flex; flex-direction: column; gap: 16px; } .banner-button { display: block; background: linear-gradient(135deg, #FFF9C4, #FFF176); border: 2px solid #FBC02D; border-radius: var(--radius-md); padding: 16px; text-align: center; box-shadow: 0 4px 12px rgba(251, 192, 45, 0.2); transition: var(--transition); } .banner-button:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(251, 192, 45, 0.35); } .banner-button h4 { font-size: 1.02rem; color: #E65100; font-weight: 900; margin-bottom: 4px; } .banner-button p { font-size: 0.78rem; color: #F57F17; font-weight: 700; } /* 資料ダウンロード：色違いバリエーション（青・緑） */ .banner-button.blue { background: linear-gradient(135deg, #E1F5FE, #81D4FA); border-color: #0288D1; } .banner-button.blue h4 { color: #01579B; } .banner-button.blue p { color: #0288D1; } .banner-button.green { background: linear-gradient(135deg, #E8F5E9, #A5D6A7); border-color: #388E3C; } .banner-button.green h4 { color: #1B5E20; } .banner-button.green p { color: #2E7D32; } /* 資料ダウンロード：トップページの横並びグリッド */ .banner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } /* メインコンテンツエリア */ .content-area { display: flex; flex-direction: column; gap: 36px; } .section-box { background: var(--white); border-radius: var(--radius-md); padding: 32px; box-shadow: var(--shadow-soft); border: 1px solid rgba(129, 212, 250, 0.3); position: relative; overflow: hidden; } .section-title { font-size: 1.4rem; font-weight: 900; color: var(--pastel-blue-dark); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .section-title::before { content: ''; display: inline-block; width: 12px; height: 24px; background: linear-gradient(180deg, var(--pastel-blue-mid), var(--pastel-green-mid)); border-radius: 6px; } /* お知らせリスト */ .news-list { display: flex; flex-direction: column; gap: 16px; } .news-item { display: flex; gap: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--pastel-blue-mid); align-items: flex-start; } .news-date { background: var(--pastel-green-light); color: var(--pastel-green-dark); font-size: 0.85rem; font-weight: 700; padding: 4px 12px; border-radius: 12px; white-space: nowrap; } .news-content { font-size: 0.98rem; font-weight: 500; } .news-content a { font-weight: 700; text-decoration: underline; } /* 追分幼稚園のご案内 カードグリッド（トップページ用） */ .info-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .info-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text-color); background: var(--white); border: 2px solid var(--pastel-blue); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-soft); transition: var(--transition); } .info-card:hover { transform: translateY(-4px); border-color: var(--pastel-blue-mid); box-shadow: var(--shadow-hover); } .info-card .emoji { font-size: 1.5rem; } .info-card strong { font-size: 1.02rem; color: var(--pastel-blue-dark); font-weight: 900; } .info-card span { font-size: 0.82rem; color: var(--text-light); } /* 今月の写真 ギャラリーグリッド */ .photo-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .gallery-item { background: var(--white); border-radius: var(--radius-sm); border: 3px solid var(--pastel-blue-light); overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); cursor: pointer; transition: var(--transition); position: relative; transform: rotate(var(--tilt, 0deg)); } /* スクラップブック風に、カードごとにわずかな傾きを持たせる */ .gallery-item:nth-child(3n+1) { --tilt: -1.6deg; } .gallery-item:nth-child(3n+2) { --tilt: 1.2deg; } .gallery-item:nth-child(3n+3) { --tilt: -0.8deg; } .gallery-item:hover, .gallery-item:focus-within { transform: rotate(0deg) scale(1.04) translateY(-3px); border-color: var(--pastel-blue-mid); box-shadow: var(--shadow-hover); } .gallery-item-img-wrapper { position: relative; aspect-ratio: 4/3; overflow: hidden; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item-zoom-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 44px; height: 44px; background: rgba(2, 136, 209, 0.85); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: var(--transition); } .gallery-item:hover .gallery-item-zoom-icon { transform: translate(-50%, -50%) scale(1); } .gallery-item-caption { padding: 10px; font-size: 0.85rem; font-weight: 700; text-align: center; color: var(--text-color); background: var(--white); } /* トップページ「園の様子」写真グリッド */ .top-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 600px) { .top-photo-grid { grid-template-columns: 1fr; } } /* トップページ「園の様子」スライドショー */ .top-slideshow { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-soft); background: var(--pastel-blue-light); } .top-slideshow-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 3.6s ease; } .top-slideshow-slide.active { opacity: 1; } .top-slideshow-slide img { width: 100%; height: 100%; object-fit: cover; } .top-slideshow-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--pastel-blue-dark); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 2; } .top-slideshow-nav-btn:hover { background: var(--white); box-shadow: var(--shadow-hover); } .top-slideshow-prev-btn { left: 14px; } .top-slideshow-next-btn { right: 14px; } .top-slideshow-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); color: var(--white); } .top-slideshow-caption-text { font-size: 0.95rem; font-weight: 700; } .top-slideshow-dots { display: flex; gap: 8px; flex-shrink: 0; } .top-slideshow-dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.6); cursor: pointer; transition: var(--transition); } .top-slideshow-dot.active { background: var(--white); } @media (max-width: 600px) { .top-slideshow-nav-btn { width: 32px; height: 32px; font-size: 0.95rem; } .top-slideshow-caption-text { font-size: 0.82rem; } } /* hero-visual内にスライドショーを組み込む場合のサイズ調整（index_sample_hero3.html） */ .hero-visual-main.top-slideshow { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); border: 6px solid var(--white); box-shadow: var(--shadow-hover); } /* 今月の写真：月ごとのカテゴリー見出しと月移動ナビ */ .photo-category { margin-bottom: 40px; } .photo-category-title { font-size: 1.3rem; font-weight: 900; color: var(--pastel-blue-dark); background: var(--pastel-blue); padding: 10px 20px; border-radius: 15px; margin-bottom: 20px; display: inline-block; border-left: 5px solid var(--pastel-blue-mid); } .month-nav { display: flex; justify-content: space-between; align-items: center; background: var(--white); padding: 16px 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); margin-bottom: 30px; font-weight: 700; gap: 12px; flex-wrap: wrap; } .month-nav .month-nav-label { font-size: 1.2rem; color: var(--pastel-blue-dark); } /* -------------------------------------------------------------------------- ライトボックスモーダル (写真拡大表示機能) -------------------------------------------------------------------------- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { position: relative; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .modal-overlay.active .modal-content { transform: scale(1); } .modal-img-container { position: relative; z-index: 1; background: var(--white); padding: 10px; border-radius: var(--radius-md); box-shadow: 0 20px 50px rgba(0,0,0,0.5); max-width: 100%; } .modal-img-container img { max-width: 80vw; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); display: block; } .modal-caption { margin-top: 16px; color: var(--white); font-size: 1.05rem; font-weight: 700; text-align: center; background: rgba(0,0,0,0.6); padding: 8px 24px; border-radius: 20px; } .modal-close-btn { position: absolute; z-index: 2; top: -20px; right: -20px; width: 44px; height: 44px; background: var(--pastel-pink); color: #D81B60; border: 3px solid var(--white); border-radius: 50%; font-size: 1.5rem; font-weight: 900; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .modal-close-btn:hover { transform: scale(1.15) rotate(90deg); background: #F48FB1; color: var(--white); } .modal-nav-btn { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.85); color: var(--pastel-blue-dark); border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: var(--transition); } .modal-nav-btn:hover { background: var(--white); transform: translateY(-50%) scale(1.1); color: #01579B; } .modal-prev-btn { left: -60px; } .modal-next-btn { right: -60px; } /* -------------------------------------------------------------------------- フッター -------------------------------------------------------------------------- */ .site-footer { background: linear-gradient(180deg, var(--pastel-green-light) 0%, var(--pastel-blue-light) 100%); border-top: 4px solid var(--pastel-green-mid); padding: 50px 20px 30px; margin-top: 80px; } .footer-container { max-width: 1200px; margin: 0 auto; text-align: center; } .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .footer-nav a { font-weight: 700; color: var(--text-color); padding: 6px 14px; border-radius: 15px; background: rgba(255, 255, 255, 0.7); } .footer-nav a:hover { background: var(--white); color: var(--pastel-blue-dark); } .copyright { font-size: 0.85rem; color: var(--text-light); font-weight: 500; } /* -------------------------------------------------------------------------- レスポンシブメディアクエリ (768px以下) -------------------------------------------------------------------------- */ @media (max-width: 992px) { .main-wrapper { grid-template-columns: 1fr; } .sidebar { order: 2; } } @media (max-width: 768px) { .desktop-nav { display: none; } .mobile-nav-toggle { display: flex; } .hero-title { font-size: 1.8rem; } .hero-subtitle { font-size: 1rem; } .section-box { padding: 20px; } .modal-prev-btn { left: 10px; } .modal-next-btn { right: 10px; } } /* ========================================================================== 下層ページ用追加スタイル (テーブル、リスト、給食カード、PDFボタン等) ========================================================================== */ /* テーブル基本 */ table { width: 100%; border-collapse: collapse; margin: 20px 0; border-radius: var(--radius-sm); overflow: hidden; } th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--pastel-blue-light); font-size: 0.95rem; } /* tableRecruit & tableSchedule */ .tableRecruit, .tableSchedule { background: var(--white); border: 2px solid var(--pastel-blue); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); } .tableRecruit th, .tableSchedule th { background: var(--pastel-blue-light); color: var(--pastel-blue-dark); font-weight: 700; width: 25%; vertical-align: top; } .tableRecruit td, .tableSchedule td { color: var(--text-color); vertical-align: top; } /* tableHistory (沿革テーブル) */ .tableHistory { background: var(--white); border: 2px solid var(--pastel-green-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); } .tableHistory th { background: var(--pastel-green-light); color: var(--pastel-green-dark); font-weight: 700; width: 130px; text-align: center; vertical-align: top; } .tableHistory td { vertical-align: top; color: var(--text-color); } /* nikka (日課・生活・給食テーブル) */ .nikka { background: var(--white); border: 3px solid var(--pastel-blue); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); margin-bottom: 30px; } .nikka th { background: var(--pastel-blue); color: var(--pastel-blue-dark); font-weight: 700; text-align: center; font-size: 0.9rem; } .nikka td { text-align: center; color: var(--text-color); } /* 案内見出しデコレーション */ .titleLine { font-size: 1.15rem; font-weight: 700; color: var(--pastel-blue-dark); border-bottom: 3px solid var(--pastel-blue-mid); padding-bottom: 8px; margin: 30px 0 16px; } .titleList { font-size: 1.05rem; font-weight: 700; color: var(--pastel-green-dark); margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; } .titleList::before { content: '🌸'; } /* パンくずリスト */ .topicpath { font-size: 0.85rem; font-weight: 500; color: var(--text-light); margin-bottom: 24px; } .topicpath a { color: var(--pastel-blue-dark); font-weight: 700; } .topicpath a:hover { text-decoration: underline; } /* 下層見出し */ .titleLeaf { font-size: 1.6rem; font-weight: 900; color: var(--pastel-blue-dark); margin-bottom: 24px; border-left: 6px solid var(--pastel-blue-mid); padding-left: 16px; line-height: 1.3; } /* 教育方針のリスト (Zen Maru Gothicに似合う丸アイコン) */ .policy { margin: 24px 0; padding-left: 0; list-style: none; } .policy li { position: relative; padding-left: 36px; margin-bottom: 16px; font-weight: 500; font-size: 0.98rem; line-height: 1.6; } .policy li::before { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: var(--pastel-green-mid); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; box-shadow: 0 2px 6px rgba(165, 214, 167, 0.4); } /* 番号付き list 用 */ ol.policy { counter-reset: policy-counter; } ol.policy li::before { counter-increment: policy-counter; content: counter(policy-counter); } /* 箇条書き list 用 (チェックマーク) */ ul.policy li::before { content: '✓'; font-size: 0.85rem; } /* 給食紹介カードレイアウト */ .food-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 30px 0; } .food-card { background: var(--white); border-radius: var(--radius-md); border: 3px solid var(--pastel-green); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition); } .food-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--pastel-green-mid); } .food-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .food-card-body { padding: 16px; font-size: 0.88rem; font-weight: 500; color: var(--text-color); line-height: 1.6; } /* PDFリンクボタンカードレイアウト */ .pdf-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 24px 0; } .pdf-button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; background: var(--pastel-blue-light); border: 2px dashed var(--pastel-blue-mid); border-radius: 14px; font-weight: 700; color: var(--pastel-blue-dark); text-align: center; transition: var(--transition); font-size: 0.95rem; } .pdf-button:hover { background: var(--pastel-blue); border-style: solid; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(2, 136, 209, 0.12); } /* お問い合わせカード (toiawase.html) */ .contact-card { background: var(--white); border: 3px solid var(--pastel-pink); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); max-width: 540px; margin: 30px auto; overflow: hidden; } .contact-header { background: linear-gradient(135deg, var(--pastel-pink), #F8BBD0); color: #C2185B; font-weight: 900; padding: 18px 24px; font-size: 1.2rem; text-align: center; border-bottom: 2px solid var(--white); } .contact-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; } .contact-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--pastel-pink); padding-bottom: 12px; } .contact-item:last-child { border-bottom: none; padding-bottom: 0; } .contact-label { font-weight: 700; color: var(--text-light); font-size: 0.95rem; } .contact-value { font-weight: 900; font-size: 1.25rem; color: var(--text-color); } .contact-value a { color: var(--pastel-blue-dark); text-decoration: underline; } /* -------------------------------------------------------------------------- テーブルのスマホ対応 (メディアクエリ 768px以下) -------------------------------------------------------------------------- */ @media (max-width: 768px) { .tableRecruit, .tableHistory, .tableSchedule, .nikka { display: block; width: 100%; border: none; background: transparent; box-shadow: none; margin: 15px 0; } .tableRecruit tbody, .tableHistory tbody, .tableSchedule tbody, .nikka tbody, .tableRecruit tr, .tableHistory tr, .tableSchedule tr, .nikka tr { display: block; width: 100%; } .tableRecruit tr, .tableHistory tr, .tableSchedule tr { background: var(--white); border: 2px solid var(--pastel-blue); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-soft); } .tableHistory tr { border-color: var(--pastel-green-mid); } .tableRecruit th, .tableRecruit td, .tableHistory th, .tableHistory td, .tableSchedule th, .tableSchedule td { display: block; width: 100% !important; text-align: left; padding: 6px 0; border: none; } .tableRecruit th, .tableHistory th, .tableSchedule th { font-weight: 700; color: var(--pastel-blue-dark); border-bottom: 1px dashed var(--pastel-blue-light); padding-bottom: 8px; margin-bottom: 8px; font-size: 0.95rem; } .tableHistory th { color: var(--pastel-green-dark); border-bottom-color: var(--pastel-green-light); } .tableHistory td:first-of-type { font-weight: 700; color: var(--text-color); } /* 生活日課・給食テーブル (nikka) のスマホ対応 */ .nikka tr { background: var(--white); border: 2px solid var(--pastel-blue); border-radius: var(--radius-md); padding: 16px; margin-bottom: 20px; box-shadow: var(--shadow-soft); } .nikka th[scope="col"] { display: none; /* ヘッダー列を隠す */ } .nikka th[scope="row"] { display: block; width: 100%; text-align: center; font-size: 1.1rem; color: var(--pastel-blue-dark); border-bottom: 2px solid var(--pastel-blue-mid); padding-bottom: 8px; margin-bottom: 12px; } .nikka td { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 0; border-bottom: 1px dashed var(--pastel-blue-light); text-align: right; font-size: 0.9rem; } .nikka td:last-child { border-bottom: none; } .nikka td::before { content: attr(data-label); font-weight: 700; color: var(--text-light); margin-right: 12px; text-align: left; } }