/* 知育おもちゃラボ フロントページCSS（v3 パフォーマンス最適化版） ヒーローのATF CSSはfunctions.phpのCritical CSSとしてに出力済み。 このファイルはBTF（Below the fold）セクションのスタイルを管理。 */ /* ── 共通 ── */ .chiiku-container{max-width:1200px;margin:0 auto;padding:0 24px} .chiiku-sec{padding:56px 0} .chiiku-bg-warm{background:#FFF8F0} .chiiku-bg-green{background:#E8F5ED} .chiiku-sec-head{text-align:center;margin-bottom:36px} .chiiku-sec-head h2{font-family:'Zen Maru Gothic',sans-serif;font-size:24px;font-weight:900;color:#2D6148} .chiiku-sec-head p{font-size:14px;color:#777;margin-top:8px} .chiiku-more{text-align:center;margin-top:28px} /* ── ヒーロー補足（Critical CSSにないもの） ── */ .chiiku-h1{font-size:14px;font-weight:500;color:#777;margin-bottom:12px;font-family:'Noto Sans JP',sans-serif} .chiiku-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #E8E8E4;border-radius:20px;padding:5px 14px 5px 8px;font-size:12px;color:#777;margin-bottom:20px} .chiiku-badge-dot{width:8px;height:8px;background:#3A7D5C;border-radius:50%;display:inline-block} .chiiku-hero-visual{position:relative;display:flex;justify-content:center;align-items:center} .chiiku-hero-img{width:100%;border-radius:20px;box-shadow:0 8px 40px rgba(58,125,92,.08)} .chiiku-hero-ph{width:100%;aspect-ratio:4/3;background:#fff;border-radius:20px;border:2px dashed #E8E8E4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#777;font-size:13px;box-shadow:0 8px 40px rgba(58,125,92,.08)} .chiiku-float{position:absolute;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 4px 20px rgba(0,0,0,.08);font-size:12px} .chiiku-fl{font-weight:700;color:#3A7D5C} .chiiku-btn:hover{transform:translateY(-2px)} .chiiku-btn-p:hover{background:#D4612E;box-shadow:0 6px 24px rgba(232,115,74,.35)} .chiiku-btn-o:hover{background:#3A7D5C;color:#fff} .chiiku-btn-line{background:#06C755;color:#fff} .chiiku-btn-line:hover{background:#05B34C;color:#fff} /* ── 年齢カード ── */ .chiiku-age-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px} .chiiku-age-card{background:#fff;border-radius:12px;padding:20px 12px;text-align:center;border:1px solid #E8E8E4;display:block;color:#333;text-decoration:none;transition:transform .3s,box-shadow .3s} .chiiku-age-card:hover{border-color:#3A7D5C;transform:translateY(-4px);box-shadow:0 8px 24px rgba(58,125,92,.08);color:#333} .chiiku-age-emoji{font-size:32px;margin-bottom:8px} .chiiku-age-label{font-family:'Zen Maru Gothic',sans-serif;font-size:15px;font-weight:700;color:#2D6148;margin-bottom:4px} .chiiku-age-desc{font-size:11px;color:#777} .chiiku-age-count{font-size:10px;color:#aaa;margin-top:6px} /* ── ランキング ── */ .chiiku-rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .chiiku-rank-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #E8E8E4;display:block;color:#333;text-decoration:none;transition:transform .3s,box-shadow .3s} .chiiku-rank-card:hover{box-shadow:0 8px 32px rgba(58,125,92,.08);transform:translateY(-4px);color:#333} .chiiku-rank-thumb{height:180px;background:#FAFBF9;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:13px;position:relative;overflow:hidden} .chiiku-rank-thumb img{width:100%;height:100%;object-fit:cover} .chiiku-rank-badge{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;z-index:1} .chiiku-rank-1{background:linear-gradient(135deg,#FFD700,#FFA500)} .chiiku-rank-2{background:linear-gradient(135deg,#C0C0C0,#A0A0A0)} .chiiku-rank-3{background:linear-gradient(135deg,#CD7F32,#A0522D)} .chiiku-rank-body{padding:16px} .chiiku-rank-age{font-size:11px;color:#E8734A;font-weight:700;margin-bottom:4px} .chiiku-rank-title{font-family:'Zen Maru Gothic',sans-serif;font-size:15px;font-weight:700;margin-bottom:8px;line-height:1.5} .chiiku-rank-stars{color:#FFA500;font-size:14px;margin-bottom:6px} .chiiku-rank-desc{font-size:12px;color:#777} /* ── タイプ別 ── */ .chiiku-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .chiiku-type-card{background:#fff;border-radius:8px;padding:16px;border:1px solid #E8E8E4;display:flex;align-items:center;gap:12px;color:#333;text-decoration:none;transition:background .2s,border-color .2s} .chiiku-type-card:hover{border-color:#3A7D5C;background:#E8F5ED;color:#333} .chiiku-type-icon{font-size:28px;flex-shrink:0} .chiiku-type-name{font-size:13px;font-weight:700;color:#2D6148} .chiiku-type-count{font-size:11px;color:#777} /* ── 絵本 ── */ .chiiku-book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .chiiku-book-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #E8E8E4;display:block;color:#333;text-decoration:none;transition:transform .3s,box-shadow .3s} .chiiku-book-card:hover{box-shadow:0 6px 24px rgba(58,125,92,.08);transform:translateY(-3px);color:#333} .chiiku-book-thumb{height:160px;background:#FFF3CD;display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden} .chiiku-book-thumb img{width:100%;height:100%;object-fit:cover} .chiiku-book-body{padding:14px} .chiiku-book-cat{font-size:11px;color:#3A7D5C;font-weight:700;margin-bottom:4px} .chiiku-book-title{font-size:14px;font-weight:700;line-height:1.5} /* ── 新着記事 ── */ .chiiku-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .chiiku-post-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #E8E8E4;display:block;color:#333;text-decoration:none;transition:transform .3s,box-shadow .3s} .chiiku-post-card:hover{box-shadow:0 6px 24px rgba(58,125,92,.08);transform:translateY(-3px);color:#333} .chiiku-post-thumb{height:150px;background:linear-gradient(135deg,#E8F5ED,#FFF8F0);display:flex;align-items:center;justify-content:center;font-size:13px;color:#aaa;overflow:hidden} .chiiku-post-thumb img{width:100%;height:100%;object-fit:cover} .chiiku-post-body{padding:14px} .chiiku-new-badge{display:inline-block;background:#E8734A;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;margin-bottom:6px;margin-right:4px} .chiiku-post-cat{display:inline-block;font-size:10px;background:#E8F5ED;color:#3A7D5C;padding:2px 8px;border-radius:4px;font-weight:700;margin-bottom:6px} .chiiku-post-title{font-size:14px;font-weight:700;line-height:1.5;margin-bottom:6px} .chiiku-post-date{font-size:11px;color:#aaa} /* ── 基礎知識 ── */ .chiiku-knowledge-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start} .chiiku-knowledge-list{display:flex;flex-direction:column;gap:12px} .chiiku-knowledge-item{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-radius:8px;border:1px solid #E8E8E4;color:#333;text-decoration:none;transition:background .2s,border-color .2s} .chiiku-knowledge-item:hover{border-color:#3A7D5C;background:#E8F5ED;color:#333} .chiiku-ki-icon{font-size:24px;flex-shrink:0} .chiiku-ki-text{font-size:14px;font-weight:500} /* ── 監修者 ── */ .chiiku-supervisor-card{background:#fff;border-radius:12px;padding:24px;border:1px solid #E8E8E4;text-align:center} .chiiku-sup-avatar{width:72px;height:72px;border-radius:50%;background:#E8F5ED;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:32px;border:3px solid #3A7D5C} .chiiku-sup-name{font-family:'Zen Maru Gothic',sans-serif;font-size:16px;font-weight:700;color:#2D6148} .chiiku-sup-title{font-size:12px;color:#777;margin-bottom:8px} .chiiku-sup-badge{display:inline-block;background:#3A7D5C;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px} .chiiku-sup-desc{font-size:12px;color:#777;margin-top:10px;line-height:1.7} /* ── サイトB導線 ── */ .chiiku-siteb-banner{background:linear-gradient(135deg,#2E5A88,#3A6FA0);border-radius:12px;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;flex-wrap:wrap} .chiiku-siteb-banner h3{font-size:18px;font-weight:700;margin-bottom:6px} .chiiku-siteb-banner p{font-size:13px;opacity:.85} /* ── LINE CTA ── */ .chiiku-line-cta{background:#fff;border:2px solid #06C755;border-radius:12px;padding:28px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .chiiku-line-icon{font-size:48px;flex-shrink:0} .chiiku-line-text{flex:1} .chiiku-line-text h3{font-size:16px;font-weight:700;margin-bottom:4px} .chiiku-line-text p{font-size:13px;color:#777} /* ── タグ ── */ .chiiku-tag-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .chiiku-tag{display:inline-block;padding:6px 16px;border-radius:20px;background:#fff;border:1px solid #E8E8E4;font-size:13px;color:#333;text-decoration:none;font-weight:500;transition:background .2s,border-color .2s} .chiiku-tag:hover{border-color:#3A7D5C;background:#E8F5ED;color:#2D6148} /* ══ レスポンシブ ══ */ @media(max-width:768px){ .chiiku-sec{padding:40px 0} .chiiku-sec-head h2{font-size:20px} .chiiku-age-grid{grid-template-columns:repeat(4,1fr);gap:8px} .chiiku-age-card{padding:14px 8px} .chiiku-age-emoji{font-size:24px} .chiiku-age-label{font-size:12px} .chiiku-age-desc{display:none} .chiiku-rank-grid{grid-template-columns:1fr} .chiiku-type-grid{grid-template-columns:1fr 1fr} .chiiku-book-grid,.chiiku-post-grid{grid-template-columns:1fr} .chiiku-knowledge-grid{grid-template-columns:1fr} .chiiku-siteb-banner{flex-direction:column;text-align:center;padding:24px} .chiiku-line-cta{flex-direction:column;text-align:center} } @media(max-width:480px){ .chiiku-age-grid{grid-template-columns:repeat(3,1fr)} .chiiku-type-grid{grid-template-columns:1fr} }