/* ============================================================
   デモサイト案内ページ (demo-page.css)
   アップロード先: /wp-content/themes/wp-theme/assets/css/demo-page.css
   enqueue: functions.phpに追記
============================================================ */

.yl-demo-page { font-family: 'Noto Sans JP', sans-serif; }

/* リード */
.yl-demo-lead { font-size: 22px; font-weight: 700; color: #1a3a5c; margin: 0 0 12px; line-height: 1.6; }
@media (max-width: 600px) { .yl-demo-lead { font-size: 18px; } }
.yl-demo-lead-sub { font-size: 16px; color: #5a7a9a; margin: 0 0 40px; line-height: 1.8; }

/* セクション見出し */
.yl-demo-section-title { font-size: 18px; font-weight: 700; color: #1a3a5c; margin: 0 0 16px; }

/* プラグインカード */
.yl-demo-plugins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
@media (max-width: 600px) { .yl-demo-plugins { grid-template-columns: 1fr; } }
.yl-demo-plugin-card { background: #fff; border: 1.5px solid #d0e4f7; border-radius: 12px; padding: 24px; }
.yl-demo-plugin-card h3 { font-size: 20px; font-weight: 700; color: #1a3a5c; margin: 0 0 10px; line-height: 1.4; }
.yl-demo-plugin-card h3 em { font-style: normal; color: #3b9eff; }
.yl-demo-plugin-card p { font-size: 16px; color: #5a7a9a; margin: 0; line-height: 1.9; }

/* 注意事項 */
.yl-demo-note { background: #fff8e1; border: 1.5px solid #f0c744; border-radius: 12px; padding: 24px 28px; margin-bottom: 40px; }
.yl-demo-note h3 { font-size: 16px; font-weight: 700; color: #1a3a5c; margin: 0 0 12px; }
.yl-demo-note ul { margin: 0; padding-left: 20px; color: #5a7a9a; font-size: 15px; line-height: 2.2; }

/* フォームセクション */
.yl-demo-form-section { background: #f4f8fc; border-radius: 16px; padding: 36px 32px; }
.yl-demo-form-section h2 { font-size: 22px; color: #1a3a5c; text-align: center; margin: 0 0 8px; }
.yl-demo-form-section > p { text-align: center; color: #5a7a9a; font-size: 15px; margin: 0 0 24px; line-height: 1.7; }