.top-page{min-height:100vh;background:#fff;color:#213547;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-section{text-align:center;margin-bottom:3rem}.hero-section h1{font-size:3rem;margin-bottom:1rem}.hero-section p{font-size:1.2rem;opacity:.9}.description-section{max-width:600px;text-align:center;margin-bottom:3rem;padding:2rem;background:#f9f9f9;border-radius:16px;border:1px solid #e0e0e0}.description-section h2{font-size:1.5rem;margin-bottom:1rem}.description-section p{font-size:1rem;line-height:1.8}.action-buttons{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.btn{padding:1rem 2rem;border-radius:12px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:all .3s ease;border:none;cursor:pointer}@media (max-width: 768px){.hero-section h1{font-size:2rem}.action-buttons{flex-direction:column;width:100%;max-width:300px}.btn{width:100%}}.question-page{min-height:100vh;background:#fff;padding:2rem 1rem;color:#213547}.progress-bar{width:100%;height:8px;background:#fff3;border-radius:4px;margin-bottom:2rem;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease}.question-container{max-width:800px;margin:0 auto}.page-indicator{text-align:center;font-size:1.2rem;font-weight:600;margin-bottom:2rem;color:#213547}.question-item{background:#fffffff2;color:#333;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 12px #0000001a}.question-number{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.5rem 1rem;border-radius:8px;font-weight:700;font-size:1rem;margin-bottom:1rem}.question-text{font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem;color:#222}.answer-options{display:flex;align-items:center;gap:.5rem;justify-content:center;flex-wrap:wrap}.answer-options .label{font-size:.9rem;color:#666;font-weight:500}.options{display:flex;gap:.8rem;align-items:center}.option-circle{width:48px;height:48px;border-radius:50%;border:3px solid #ddd;background:#fff;cursor:pointer;transition:all .2s ease}.option-circle:hover{transform:scale(1.1);border-color:#999}.option-circle.agree{border-color:#4299e1}.option-circle.disagree{border-color:#f56565}.option-circle.selected.agree{background:linear-gradient(135deg,#4299e1,#667eea);border-color:#4299e1;transform:scale(1.15)}.option-circle.selected.disagree{background:linear-gradient(135deg,#f56565,#fc8181);border-color:#f56565;transform:scale(1.15)}.navigation-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.btn-primary{background:#fff;color:#3b4d91}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.btn-secondary{background:#fff3;color:#fff;border:2px solid white}.btn-secondary:hover{background:#ffffff4d;transform:translateY(-2px)}@media (max-width: 768px){.question-item{padding:1.5rem 1rem}.question-text{font-size:1rem}.option-circle{width:40px;height:40px}.options{gap:.5rem}.navigation-buttons{flex-direction:column;gap:.5rem}.btn{width:100%}}.result-page{min-height:100vh;background:#fff;padding:2rem 1rem;color:#213547}.result-container{max-width:900px;margin:0 auto}.result-container h1{text-align:center;font-size:2.5rem;margin-bottom:2rem;color:#213547}.character-card{background:#f9f9f9;border-radius:20px;padding:3rem 2rem;margin-bottom:2rem;text-align:center;box-shadow:0 4px 12px #0000001a;border:1px solid #e0e0e0}.character-name{font-size:2rem;font-weight:700;color:#333;margin-bottom:1rem}.character-emoji{font-size:6rem;margin-bottom:1rem}.description-sections{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem}.description-item{background:#f9f9f9;border-radius:16px;padding:2rem;box-shadow:0 2px 8px #00000014;border:1px solid #e0e0e0}.description-item h3{color:#667eea;font-size:1.3rem;margin-bottom:1rem;border-left:4px solid #667eea;padding-left:1rem}.description-item p{color:#444;line-height:1.8;font-size:1rem}.serial-code-section{background:#f9f9f9;border-radius:20px;padding:2.5rem 2rem;margin-bottom:2rem;text-align:center;box-shadow:0 4px 12px #0000001a;border:1px solid #e0e0e0}.serial-code-section h2{color:#333;font-size:1.5rem;margin-bottom:1.5rem}.email-input-section{display:flex;flex-direction:column;gap:1rem;max-width:400px;margin:0 auto}.email-input{padding:1rem;border:2px solid #ddd;border-radius:12px;font-size:1rem;outline:none;transition:border-color .3s ease}.email-input:focus{border-color:#667eea}.serial-code-display{padding:2rem}.serial-code-display p{color:#666;font-size:1.1rem;margin-bottom:.5rem}.serial-code-display .code{font-size:2.5rem;font-weight:700;color:#667eea;letter-spacing:.2rem;margin:1rem 0;font-family:Courier New,monospace}.serial-code-display .note{color:#999;font-size:.9rem;margin-top:1rem}.btn{padding:1rem 2rem;border-radius:12px;border:none;font-weight:600;font-size:1.1rem;cursor:pointer;transition:all .3s ease}@media (max-width: 768px){.result-container h1{font-size:1.8rem}.character-name{font-size:1.5rem}.character-emoji{font-size:4rem}.description-item{padding:1.5rem}.serial-code-display .code{font-size:1.8rem;letter-spacing:.1rem}.action-buttons{flex-direction:column;width:100%}.btn{width:100%}}.partner-diagnosis-page{min-height:100vh;background:#fff;padding:2rem 1rem;color:#213547;display:flex;align-items:center;justify-content:center}.partner-diagnosis-container{max-width:600px;width:100%}.partner-diagnosis-container h1{text-align:center;font-size:2.5rem;margin-bottom:1rem;color:#213547}.subtitle{text-align:center;font-size:1.1rem;margin-bottom:2rem;color:#666}.code-input-section{background:#f9f9f9;border-radius:20px;padding:2.5rem 2rem;margin-bottom:2rem;box-shadow:0 4px 12px #0000001a;border:1px solid #e0e0e0}.input-group{margin-bottom:1.5rem}.input-group label{display:block;color:#333;font-weight:600;margin-bottom:.5rem;font-size:1.1rem}.code-input{width:100%;padding:1rem;border:2px solid #ddd;border-radius:12px;font-size:1.2rem;font-weight:700;text-align:center;letter-spacing:.2rem;font-family:Courier New,monospace;text-transform:uppercase;outline:none;transition:border-color .3s ease}.code-input:focus{border-color:#f5576c}.partner-diagnosis-result{min-height:100vh;background:#fff;padding:2rem 1rem;color:#213547}.partner-diagnosis-result h1{text-align:center;font-size:2.5rem;margin-bottom:2rem;color:#213547}.partner-cards{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}.partner-card{background:#f9f9f9;border-radius:20px;padding:2rem;text-align:center;min-width:200px;box-shadow:0 4px 12px #0000001a;border:1px solid #e0e0e0}.character-display{font-size:5rem;margin-bottom:1rem}.partner-card .character-name{color:#333;font-weight:700;font-size:1.2rem;margin-bottom:.5rem}.code-display{color:#f5576c;font-weight:600;font-size:.9rem;font-family:Courier New,monospace}.heart-icon{font-size:3rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.compatibility-result{background:#f9f9f9;border-radius:20px;padding:2.5rem 2rem;margin-bottom:2rem;box-shadow:0 4px 12px #0000001a;border:1px solid #e0e0e0}.compatibility-result h2{color:#f5576c;font-size:1.8rem;margin-bottom:1.5rem;text-align:center}.compatibility-text{color:#444;line-height:1.8;font-size:1.1rem;white-space:pre-wrap}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:1rem 2rem;border-radius:12px;border:none;font-weight:600;font-size:1.1rem;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003;background:#5568d3}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#f9f9f9;color:#213547;border:2px solid #667eea}.btn-secondary:hover{background:#e0e0e0;transform:translateY(-2px)}.btn-tertiary{background:#f0f0f0;color:#213547;border:1px solid #c0c0c0}.btn-tertiary:hover{background:#e0e0e0;transform:translateY(-2px)}@media (max-width: 768px){.partner-diagnosis-container h1,.partner-diagnosis-result h1{font-size:1.8rem}.partner-cards{flex-direction:column;gap:1rem}.character-display{font-size:4rem}.action-buttons{flex-direction:column;width:100%}.btn{width:100%}}.character-list-page{min-height:100vh;background:#fff;padding:2rem 1rem;color:#213547}.character-list-container{max-width:1200px;margin:0 auto}.character-list-container h1{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#213547}.type-explanation{background:#f9f9f9;border-radius:20px;padding:2.5rem 2rem;margin-bottom:3rem;box-shadow:0 4px 12px #0000001a;border:1px solid #e0e0e0}.type-explanation h2{color:#333;font-size:1.8rem;text-align:center;margin-bottom:2rem}.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.type-card{padding:1.5rem;border-radius:16px;box-shadow:0 4px 12px #0000001a}.type-card.drive{background:linear-gradient(135deg,#ffa07a,#ff6b6b);color:#fff}.type-card.harmony{background:linear-gradient(135deg,#98d8c8,#6db9a4);color:#fff}.type-card.creative{background:linear-gradient(135deg,#f9ca24,#f0932b);color:#fff}.type-card h3{font-size:1.3rem;margin-bottom:1rem;font-weight:700}.type-card ul{list-style:none;margin-bottom:1rem}.type-card li{margin-bottom:.5rem;padding-left:1.5rem;position:relative}.type-card li:before{content:"•";position:absolute;left:0;font-size:1.5rem;line-height:1}.type-note{font-size:.9rem;font-style:italic;opacity:.9;margin-top:1rem;border-top:1px solid rgba(255,255,255,.3);padding-top:1rem}.characters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}.character-group{background:#f9f9f9;border-radius:16px;padding:1.5rem;box-shadow:0 2px 8px #00000014;border:1px solid #e0e0e0}.character-id{color:#667eea;font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:1rem;font-family:Courier New,monospace}.character-types{display:flex;flex-direction:column;gap:1rem}.character-type-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:1rem;border-radius:12px;text-align:center;transition:transform .2s ease}.character-type-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px #0000001a}.type-emoji{font-size:2.5rem;margin-bottom:.5rem}.type-name{color:#333;font-weight:600;font-size:.95rem;margin-bottom:.5rem}.type-badge{display:inline-block;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:600;color:#fff}.type-badge:contains("勢い"){background:#ff6b6b}.type-badge:contains("安定"){background:#6db9a4}.type-badge:contains("創造"){background:#f0932b}.btn{padding:1rem 2rem;border-radius:12px;border:none;font-weight:600;font-size:1.1rem;cursor:pointer;transition:all .3s ease;display:block;margin:0 auto;background:#667eea;color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0003;background:#5568d3}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:1.5rem;color:#213547}@media (max-width: 768px){.character-list-container h1{font-size:1.8rem}.types-grid,.characters-grid{grid-template-columns:1fr}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100vh}#root{width:100%;min-height:100vh}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}