/* ---- Hero ---- */
.hero { background: #003770; color: #fff; padding: 80px 40px 80px; text-align: center; position: relative; }
.hero-badge { display: inline-block; font-size: 12px; letter-spacing: .12em; color: #004892; background: #fff; padding: 5px 16px; border-radius: 2px; margin-bottom: 28px; }
.hero h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 700; letter-spacing: .04em; margin-bottom: 20px; color: #fff; }
.hero-sub { font-size: clamp(17px, 2.2vw, 22px); color: #fff; font-weight: 600; margin-bottom: 44px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn { flex: 1; max-width: 220px; text-align: center; white-space: nowrap; }
.btn { display: inline-block; padding: 14px 36px; font-size: 14px; letter-spacing: .06em; border-radius: 2px; font-weight: 500; transition: opacity .2s; text-decoration: none; }
.btn:hover { opacity: .8; }
.btn-primary { background: #E5004F; color: #fff; }
.btn-outline { border: 1px solid #fff; color: #fff; }
.btn-dark { background: #E5004F; color: #fff; }

/* ---- Sections ---- */
section { padding: 80px 40px; }
.section-inner { max-width: 900px; margin: 0 auto; }
.section-label { font-size: 12px; letter-spacing: .14em; color: #E5004F; margin-bottom: 12px; text-transform: uppercase; font-weight: 600; }
.section-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.4; margin-bottom: 20px; }
.section-body { font-size: 16px; color: #444; max-width: 680px; }

/* ---- 概要 ---- */
.s-intro { background: #fff; }
.intro-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; align-items: start; }
.intro-text { font-size: 16px; color: #444; line-height: 1.9; }
.intro-text p + p { margin-top: 16px; }
.intro-img-wrap { background: #f5f5f5; border-radius: 4px; padding: 32px; display: flex; align-items: center; justify-content: center; }
.intro-diagram { width: 100%; max-width: 340px; }

/* ---- 機能 ---- */
.s-features { background: #f8f8f8; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; }
.feature-card { background: #fff; border: 1px solid #e4e4e4; border-radius: 4px; padding: 28px 24px; }
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: #555; line-height: 1.75; }
.feature-card .tag { display: inline-block; font-size: 11px; letter-spacing: .06em; background: #fff0f4; color: #E5004F; border: 1px solid #f9b3c8; padding: 2px 8px; border-radius: 2px; margin-bottom: 12px; }

/* ---- Perl モジュール見出し ---- */
.perl-modules-title { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #888; margin-bottom: 6px; }
.perl-modules-sub { font-size: 12px; color: #aaa; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e8e8e8; }

/* ---- スクリーンショット ---- */
.s-screens { background: #f8f8f8; }
.screens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.screen-item { background: #fff; border: 1px solid #e4e4e4; border-radius: 4px; overflow: hidden; }
.screen-label { font-size: 12px; color: #888; padding: 10px 16px; border-bottom: 1px solid #f0f0f0; letter-spacing: .04em; }
.screen-placeholder { background: #f0f0f0; height: 180px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 13px; }

/* ---- 動作要件 ---- */
.s-requirements { background: #fff; }
.req-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.req-block h3 { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: #666; margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px; }
.req-block-desc { font-size: 14px; color: #555; margin-bottom: 10px; }
.req-list { font-size: 15px; color: #333; }
.req-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; display: flex; gap: 10px; align-items: baseline; }
.req-list li::before { content: '—'; color: #ccc; flex-shrink: 0; }
.req-note { font-size: 13px; color: #999; margin-top: 12px; }

/* ---- ラインナップ ---- */
.s-upcoming { background: #003770; color: #fff; }
.s-upcoming .section-label { color: #7bbfff; }
.s-upcoming .section-title { color: #fff; }
.upcoming-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.upcoming-card { border: 1px solid #1a5a9a; border-radius: 4px; padding: 28px 24px; position: relative; }
.upcoming-card.current { border-color: #E5004F; }
.upcoming-badge { position: absolute; top: -12px; left: 24px; font-size: 11px; letter-spacing: .1em; padding: 3px 12px; border-radius: 2px; font-weight: 600; }
.badge-current { background: #E5004F; color: #fff; }
.badge-soon { background: #1a5a9a; color: #aac8f0; }
.upcoming-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; margin-top: 8px; color: #fff; }
.upcoming-card p { font-size: 14px; color: #aac8f0; line-height: 1.8; }
.upcoming-card.current p { color: #d0e6ff; }

/* ---- CTA ---- */
.s-cta { background: #fff; }
.cta-inner { max-width: 560px; }
.cta-inner .section-title { margin-bottom: 12px; }
.cta-inner .section-body { margin: 0 0 36px; }
.cta-actions { display: flex; flex-direction: row; gap: 16px; }
.cta-actions .btn { flex: 1; text-align: center; }

/* ---- 免責事項 ---- */
.s-disclaimer { background: #f8f8f8; }
.disclaimer-list { margin-top: 24px; font-size: 14px; color: #555; line-height: 2; max-width: 720px; }
.disclaimer-item { display: grid; grid-template-columns: 160px 1fr; gap: 0 24px; padding: 12px 0; border-bottom: 1px solid #e8e8e8; }
.disclaimer-item:last-child { border-bottom: none; }
.disclaimer-item dt { font-weight: 600; color: #333; }

/* ---- Footer 追加スタイル ---- */
.footer__menu li a { font-size: 14px; font-weight: 400; }
.footer-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 0 100px 40px; border-top: 1px solid #e8e8e8; margin-top: 0; }
.office h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #333; }
.office p { font-size: 12px; color: #888; line-height: 1.8; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px 100px 32px; border-top: 1px solid #e8e8e8; }
.footer-bottom p { font-size: 12px; color: #888; }

/* ---- Header 補正（固定ヘッダー分のオフセット） ---- */
body { padding-top: 80px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .footer-offices { padding: 0 20px 32px; }
    .footer-bottom { padding: 24px 20px 32px; }
}

@media (max-width: 768px) {
    section { padding: 56px 20px; }
    .hero { padding: 64px 20px 56px; }
    .intro-cols, .req-cols, .upcoming-cards, .screens-grid { grid-template-columns: 1fr; }
    .intro-img-wrap { padding: 16px; }
    .footer-offices { grid-template-columns: 1fr; }
    .cta-actions { flex-direction: column; align-items: center; }
    .cta-actions .btn { width: 90%; min-width: unset; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .s-disclaimer { padding: 56px 20px; }
    .disclaimer-item { grid-template-columns: 1fr; gap: 4px; }
}