/* --- Font & Global Styles --- */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;900&display=swap');
:root {
    --brand-color: #000041;
    --accent-red: #D93333;
    --light-brand-bg: #f0f4f8;
    --accent-yellow: #fff8e1;
    --text-dark: #333;
    --text-light: #f8f9fa;
}
body {
    font-family: 'M PLUS 1p', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
    background-color: #fff;
    margin: 0;
    color: var(--text-dark);
}
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.lp-section {
    padding: 60px 0;
}
.section-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--brand-color);
    text-align: center;
    margin: 0 0 40px 0;
}

/* --- 1. First View --- */
.first-view {
    background-color: var(--light-brand-bg);
    color: var(--brand-color);
    padding: 60px 0;
    text-align: center;
}
.fv-content { margin-bottom: 40px; }
.fv-category { font-size: 18px; font-weight: 500; letter-spacing: 1.5px; }
.fv-catchphrase { font-size: 52px; font-weight: 900; margin: 10px 0; line-height: 1.3; }
.fv-product-name {
    font-size: 36px;
    font-weight: 700;
    margin: 10px 0;
}
.fv-product-name .marumaru { color: var(--accent-red); }
.fv-product-name rt { font-size: 14px; font-weight: 500; }
.fv-caption {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    background-color: var(--accent-yellow);
    padding: 8px 15px;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid #ffe8a1;
}
.fv-caption .marumaru {
    color: var(--accent-red);
}
.fv-award {
    margin-top: 20px;
    font-weight: 700;
    color: var(--brand-color);
}
.fv-image {
    max-width: 640px;
    margin: 0 auto;
}
.fv-image img { width: 100%; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }

/* --- 2. Problem --- */
.problem-section { background-color: var(--light-brand-bg); }
.problem-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; text-align: center; }
.problem-card { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.problem-card-icon { font-size: 40px; }
.problem-card-title { font-size: 18px; font-weight: 700; margin: 10px 0; }
.problem-card-text { font-size: 15px; line-height: 1.7; }

/* --- 3. Solution --- */
.solution-text { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 40px; }
.solution-text .highlight { color: var(--accent-red); }
.video-wrapper {
    position: relative; width: 100%; max-width: 720px; margin: 0 auto;
    padding-top: 56.25%; background-color: #000; border-radius: 8px; overflow: hidden;
}
.video-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* --- 4. Merits --- */
.merits-section { background-color: var(--light-brand-bg); }
.merit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; text-align: center; }
.merit-card { background-color: #fff; padding: 25px; border: 2px solid var(--brand-color); border-radius: 8px; }
.merit-card-icon { font-size: 40px; }
.merit-card-title { font-size: 18px; font-weight: 700; margin: 10px 0; }
.merit-card-text { font-size: 15px; line-height: 1.7; }

/* --- 5. How it Works --- */
.how-it-works-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-bottom: 40px; }
.how-it-works-image { flex: 1 1 400px; }
.how-it-works-image img { width: 100%; border-radius: 8px; }
.how-it-works-text { flex: 1 1 300px; font-size: 16px; line-height: 1.8; }
.use-cases-tags { text-align: center; }
.use-case-tag { display: inline-block; background-color: var(--light-brand-bg); color: var(--brand-color); font-size: 14px; font-weight: 700; padding: 8px 15px; margin: 5px; border-radius: 20px; border: 1px solid var(--brand-color); }

/* --- 6. Process --- */
.process-section { background-color: var(--light-brand-bg); }
.process-steps { display: flex; flex-wrap: wrap; justify-content: space-around; text-align: center; }
.process-step { width: 100%; max-width: 200px; margin-bottom: 20px; position: relative; }
.process-step:not(:last-child)::after { content: '→'; position: absolute; right: -30px; top: 30px; font-size: 24px; color: var(--brand-color); }
.process-step-icon { font-size: 48px; color: var(--brand-color); }
.process-step-title { font-weight: 700; margin: 10px 0; }
.process-step-text { font-size: 14px; }

/* --- 7. Trust --- */
.trust-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }
.trust-voice { background-color: var(--accent-yellow); padding: 20px; border-radius: 8px; border-left: 5px solid var(--brand-color); }
.trust-voice-text { font-style: italic; line-height: 1.7; }
.trust-voice-source { text-align: right; font-weight: 700; margin-top: 10px; font-size: 14px; }
.profile-section { margin-top: 60px; }
.trust-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; padding: 25px; background-color: var(--light-brand-bg); border-radius: 8px; }
.trust-profile-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.trust-profile-text { flex: 1 1 300px; }
.trust-profile-title { font-weight: 700; color: var(--brand-color); }
.trust-profile-name { font-size: 24px; font-weight: 800; color: var(--brand-color); margin: 5px 0 10px 0; }
.trust-profile-bio { font-size: 15px; line-height: 1.7; }

/* --- 8. Plans --- */
.plans-section { background-color: var(--light-brand-bg); }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.plan-card { background: #fff; border: 1px solid #ccc; border-radius: 8px; text-align: center; display: flex; flex-direction: column; }
.plan-card .plan-header { padding: 15px; font-size: 20px; font-weight: 700; border-bottom: 1px solid #ccc; }
.plan-card.standard { border-color: var(--brand-color); border-width: 3px; }
.plan-card.standard .plan-header { background-color: var(--brand-color); color: #fff; }
.plan-card .plan-target { font-size: 14px; padding: 15px; background: var(--light-brand-bg); }
.plan-card .plan-features { padding: 20px; text-align: left; flex-grow: 1; }
.plan-card .plan-features ul { list-style: none; padding: 0; margin: 0; }
.plan-card .plan-features li { margin-bottom: 10px; }
.plan-card .plan-features li::before { content: '✔'; margin-right: 8px; color: var(--brand-color); }
.plan-card .plan-price { font-size: 18px; font-weight: 700; padding: 20px; }

/* --- 9. FAQ --- */
.faq-item { border-bottom: 1px solid #ccc; }
.faq-item summary { font-size: 18px; font-weight: 700; padding: 20px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; }
.faq-item[open] summary::after { content: '-'; }
.faq-answer { padding: 0 10px 20px 10px; line-height: 1.7; }

/* ★★★ 10. CTA - 修正点 ★★★ */
.cta-section { background-color: var(--light-brand-bg); color: var(--text-light); text-align: center; }
.cta-section .section-title { color: var(--brand-color); border-color: var(--accent-red); }
.cta-section .cta-title { margin-top: 40px; }

/* 試遊版ゲーム埋め込み用のラッパー */
.demo-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px; /* ← ゲームの最大幅を指定 */
    height: 0;
    padding-top: 57.7%; /* ← 新しいアスペクト比 (329/570) */
    margin: 0 auto 0px auto; /* ← 中央寄せと下の余白 */
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid var(--light-brand-bg);
}
.demo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* フォーム埋め込み用のラッパー */
.form-wrapper {
    position: relative; width: 100%; max-width: 1000px; height: 0;
    padding-bottom: 136%; margin: 0 auto; border-radius: 8px; overflow: hidden;
}
.form-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* --- Media Queries --- */
@media (max-width: 768px) {
    .fv-catchphrase { font-size: 40px; }
    .process-step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) {
    .fv-catchphrase { font-size: 32px; }
    .fv-product-name { font-size: 28px; }
}