.page-blog { color: #333333; background-color: #FFFFFF; } .page-blog a { color: #017439; } .page-blog a:hover { color: #015c2d; } .page-blog__hero-section { padding-top: 10px; text-align: center; } .page-blog__hero-image-wrapper { width: 100%; } .page-blog__hero-image { width: 100%; height: auto; aspect-ratio: 17 / 5; object-fit: cover; display: block; } .page-blog__hero-content { max-width: 1000px; margin: 20px auto 0; padding: 0 16px; } .page-blog__hero-title { font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #017439; margin: 0 0 12px; } .page-blog__hero-subtitle { font-size: 1rem; line-height: 1.6; margin: 0 0 24px; } .page-blog__hero-cta, .page-blog__register-link { display: inline-block; background-color: #C30808; color: #FFFF00; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1.1rem; } .page-blog__features-section { padding: 30px 16px; } .page-blog__features-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .page-blog__features-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; text-decoration: none; transition: transform 0.3s ease; } .page-blog__features-card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(1, 116, 57, 0.1); } .page-blog__features-image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; } .page-blog__features-body { padding: 16px; } .page-blog__features-title { font-size: 1.2rem; margin: 0 0 8px; color: #017439; } .page-blog__features-excerpt { font-size: 0.95rem; line-height: 1.5; margin: 0 0 12px; color: #333; } .page-blog__features-link { font-weight: 600; color: #017439; } .page-blog__guide-section { padding: 10px 16px 40px; } .page-blog__guide-inner { max-width: 1000px; margin: 0 auto; } .page-blog__guide-title { text-align: center; color: #017439; font-size: 1.8rem; margin-bottom: 20px; } .page-blog__guide-content { font-size: 1rem; line-height: 1.8; margin-bottom: 16px; } .page-blog__guide-figure { margin: 0 0 20px; } .page-blog__guide-figure img { width: 100%; max-width: 800px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; margin: 0 auto; display: block; } .page-blog__guide-figure figcaption { text-align: center; font-size: 0.9rem; color: #666; margin-top: 8px; } .page-blog__guide-inner details { border-bottom: 1px solid #e0e0e0; padding: 12px 0; } .page-blog__guide-inner summary { cursor: pointer; font-weight: 600; color: #017439; } .page-blog__faq-icon, .page-blog__faq-icon-plus { display: inline-block; margin-left: 8px; color: #017439; } .page-blog__guide-more { margin-top: 12px; } .page-blog__articles-section { padding: 30px 16px; background-color: #f8f9fa; } .page-blog__articles-inner { max-width: 1200px; margin: 0 auto; } .page-blog__articles-title { text-align: center; color: #017439; font-size: 1.6rem; margin-bottom: 24px; } .page-blog__articles-list { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .page-blog__articles-item { background: #FFFFFF; padding: 14px 20px; border-radius: 8px; text-decoration: none; font-weight: 500; border: 1px solid #e0e0e0; } .page-blog__articles-item:hover { box-shadow: 0 2px 8px rgba(1, 116, 57, 0.15); } .page-blog__faq-section { padding: 40px 16px; } .page-blog__faq-inner { max-width: 900px; margin: 0 auto; } .page-blog__faq-title { text-align: center; color: #017439; font-size: 1.6rem; margin-bottom: 20px; } .page-blog__faq-item { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 16px; overflow: hidden; background: #fff; } .page-blog__faq-question { padding: 16px; cursor: pointer; font-weight: 600; color: #333; } .page-blog__faq-answer { padding: 0 16px 16px; line-height: 1.6; } .page-blog__register-section { padding: 40px 16px; background-color: #017439; } .page-blog__register-inner { max-width: 800px; margin: 0 auto; text-align: center; } .page-blog__register-title { color: #FFFFFF; font-size: 1.8rem; margin-bottom: 12px; } .page-blog__register-description { color: #E8F5E9; margin-bottom: 24px; } @media (max-width: 768px) { .page-blog__hero-image { aspect-ratio: 2 / 1; } .page-blog__hero-section .page-blog__hero-cta { max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; padding: 12px 20px; font-size: 1rem; } .page-blog__features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .page-blog__features-title { font-size: 1rem; } .page-blog img { max-width: 100%; height: auto; } .page-blog__guide-title { font-size: 1.4rem; } .page-blog__guide-inner .page-blog__guide-figure img { height: auto; } .page-blog__articles-list { flex-direction: column; align-items: stretch; } .page-blog__articles-item { text-align: center; } .page-blog__register-inner .page-blog__register-title { font-size: 1.4rem; } .page-blog__register-link { max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; padding: 12px 20px; } }