/* =================================================
   共通ベース
================================================= */
body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  background:#ff6b00;           /* 全面オレンジ */
  color:#333;margin:0;padding:0;
  width:100%;min-height:100vh;
}

/* =================================================
   スタートページ（index.html）  … 中央白カード
================================================= */
.index-page{
  display:flex;align-items:center;justify-content:center;
}
.index-page .result-section{
  background:#fff;border-radius:24px;box-shadow:0 10px 24px rgba(0,0,0,.12);
  text-align:center;width:90vw;max-width:420px;padding:2.5rem 1.75rem;
}
.index-page .result-section h1{font-size:1.8rem;font-weight:700;margin:0 0 1rem;}
.index-page .result-section p {font-size:1rem;color:#555;line-height:1.6;margin-bottom:2rem;}
#startButton{
  background:#ff6b00;color:#fff;font-size:1.15rem;padding:.9rem 2rem;
  border:none;border-radius:50px;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:background .25s,transform .1s;
}
#startButton:hover{background:#e55a00;transform:translateY(-2px);}

/* =================================================
   質問ページ（questions.html）
================================================= */
.question-page{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;          /* ←縦方向も中央にしたい場合 */
}
#progressBar{width:100%;height:6px;background:rgba(255,255,255,.35);}
#progress   {height:6px;width:0;background:#fff;transition:width .3s;}

.question-page .result-section{
  width:90vw;max-width:420px;margin:auto;padding:2rem 1rem;
  display:flex;flex-direction:column;align-items:center;
}
#questionBox{
  background:#fff;border-radius:18px;box-shadow:0 6px 16px rgba(0,0,0,.15);
  width:100%;padding:2rem 1.5rem;text-align:center;
}
#questionBox h2{font-size:2rem;margin-bottom:.5rem;}
#questionBox p {font-size:1.05rem;line-height:1.6;margin-bottom:2rem;}

.button-container{display:flex;justify-content:space-around;width:100%;margin-top:2rem;}
.answer-btn{
  width:80px;height:80px;font-size:1.7rem;font-weight:700;
  border-radius:50%;border:2px solid #ccc;background:#fff;color:#333;
  cursor:pointer;transition:transform .2s,background .2s;
}
.answer-btn:hover{transform:scale(1.05);background:#f9f9f9;}
.answer-btn:first-child{border-color:#ff6b00;color:#ff6b00;}
.answer-btn:last-child {border-color:#1e90ff;color:#1e90ff;}

.progress-count,.bottom-progress{font-size:.9rem;color:#555;margin-top:1.5rem;text-align:center;}

#loadingOverlay{
  position:fixed;inset:0;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;z-index:999;
}
.loading-text{font-size:1.2rem;font-weight:700;}

/* =================================================
   結果ページ（result.html）
================================================= */
.result-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.result-wrapper{
  width:90vw;max-width:480px;margin:auto;padding:2rem 1rem;
}
.result-card{
  background:#fff;border-radius:24px;box-shadow:0 8px 20px rgba(0,0,0,.1);
  text-align:center;width:100%;padding:2rem 1.5rem;
}
.result-card h2{font-size:1.45rem;margin-top:1rem;}
.result-card p {font-size:1rem;color:#555;margin:1rem 0 2rem;line-height:1.6;}

.line-button{
  background:#06c755;color:#fff;padding:1rem 1.5rem;border-radius:8px;
  text-decoration:none;font-size:1rem;display:inline-block;margin-bottom:1rem;
  transition:background .25s;
}
.line-button:hover{background:#05a94e;}
.result-illustration{width:200px;margin:0 auto 1rem;}
.note{font-size:.85rem;color:#888;}

/* =================================================
   レスポンシブ調整
================================================= */
@media(max-width:600px){
  #questionBox h2{font-size:1.55rem;}
  #questionBox p {font-size:1rem;}
  .answer-btn{width:70px;height:70px;font-size:1.45rem;}
  .index-page .result-section{padding:2rem 1.25rem;}
  #progressBar{height:5px;}
}