/* =========================
   全体
========================= */
*{box-sizing:border-box}

body{
  background:#ffffff;
}

.diagnosis-section{max-width:1200px;margin:auto;padding:60px 20px}
.hero-copy{text-align:center;margin-bottom:50px}
.hero-sub{color:#2e6dd8;font-size:24px;font-weight:bold;margin-bottom:25px}
.hero-copy h1{margin:0 0 30px;font-size:64px;line-height:1.3;color:#16376b}
.hero-info{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.info-item{background:#fff;padding:14px 24px;border-radius:999px;box-shadow:0 5px 15px rgba(0,0,0,.06);font-size:15px;font-weight:600}
.question-card{background:#fff;border-radius:32px;padding:40px;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.progress-area{margin-bottom:40px}
#progressLabel{text-align:center;font-size:22px;font-weight:bold;margin-bottom:15px}
.progress-bar{width:100%;height:12px;background:#e9edf5;border-radius:999px;overflow:hidden}
#progressFill{width:0;height:100%;background:linear-gradient(90deg,#2e6dd8,#5ab2ff);transition:.3s}
.question-layout,.result-layout{display:flex;align-items:center;gap:40px;margin-bottom:40px}
.character-area{flex-shrink:0}
.character-img{width:220px;display:block}
.speech-area{flex:1}
.speech-box{position:relative;background:#f8fbff;border:3px solid #dce9ff;border-radius:25px;padding:35px;display:flex;align-items:flex-start;gap:20px}
.speech-box:before{content:"";position:absolute;left:-24px;top:50%;transform:translateY(-50%);border-top:18px solid transparent;border-bottom:18px solid transparent;border-right:24px solid #dce9ff}
.question-number{width:70px;height:70px;border-radius:50%;background:#2e6dd8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
#questionText{font-size:38px;line-height:1.6;font-weight:bold;flex:1}
.answer-area{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.answer-btn{background:#fff;border-radius:20px;padding:24px;cursor:pointer;transition:.25s;text-align:left}
.answer-btn:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.08)}
.answer-btn.yes{border:3px solid #ffb9cf}
.answer-btn.no{border:3px solid #b8d6ff}
.answer-head{font-size:28px;font-weight:bold;margin-bottom:12px}
.answer-title{font-size:22px;font-weight:bold;margin-bottom:10px}
.answer-sub{font-size:15px;color:#666;line-height:1.6}
.nav-area{text-align:center;margin-top:25px}
#backBtn{border:none;background:none;color:#666;font-size:15px;cursor:pointer}
.hidden{display:none}
.result-title{text-align:center;font-size:34px;font-weight:bold;margin-bottom:40px}
.result-speech{justify-content:flex-start;min-height:auto;display:flex;flex-direction:column;justify-content:center}

#resultTitle{
font-size:34px;
font-weight:bold;
color:#2e6dd8;
margin-bottom:20px
line-height:1.4;

}

#resultMessage{font-size:22px;line-height:1.8}
.result-cta{text-align:center}
.cta-btn{display:inline-block;background:#2e6dd8;color:#fff;text-decoration:none;padding:18px 40px;border-radius:999px;font-size:20px;font-weight:bold;transition:.25s}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.15)}
@media(max-width:768px){
.diagnosis-section{padding:30px 15px}
.hero-sub{font-size:18px}
.hero-copy h1{font-size:36px}
.question-card{padding:25px}
.question-layout,.result-layout{flex-direction:column}
.character-img{width:150px}
#questionText{font-size:24px}
.answer-area{grid-template-columns:1fr}
.answer-head{font-size:22px}
.answer-title{font-size:18px}
#resultTitle{
font-size:24px;
line-height:1.4;}
#resultMessage{font-size:18px}
}