/* 診断の配置・状態・操作。非表示画面はhiddenでレイアウトから除外する。 */
.diagnosis { padding: 0 40px 227px; }
.diagnosis-panel {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: auto;
  padding: 48px;
  background: #fff4f7 url('../assets/supplied-20261026/diagnosis/s-background.svg') center / cover no-repeat;
  border-radius: 8px;
  text-align: center;
}
.diagnosis h2 { font-size: 36px; line-height: 61px; color: #835c2a; }
/* 最長の質問・結果を収め、切替時も見出しと虫眼鏡の位置を保つ。 */
.diagnosis-stage { display: grid; min-height: 400px; overflow: clip; margin-top: 28px; }
.diagnosis-stage > div { grid-area: 1 / 1; min-width: 0; padding: 0 4px 8px; }
.diagnosis-stage > :first-child { align-self: center; }
.diagnosis-desc { font-size: 16px; line-height: 37px; color: #666; }
.start-button {
  display: block;
  width: 320px;
  max-width: 100%;
  height: 65px;
  margin: 44px auto 0;
  background: #835c2a;
  border-radius: 100px;
  color: white;
  font-size: 18px;
  font-weight: 500;
}
.start-button:disabled { cursor: default; }
.magnifier { pointer-events: none; position: absolute; left: calc(100% - 160px); bottom: -55px; }
.magnifier { width: 210px; height: auto; max-width: none; }
.diagnosis-wave { left: 0; top: 45px; }
.diagnosis-wave img { width: 1448.784px; height: 784.367px; }
.diagnosis-wave-question, .blue-train-question { display: none; }
.diagnosis.is-question .decoration-canvas { height: 100%; }
.diagnosis-question-title { font-size: 20px; line-height: 34px; color: #835c2a; }
.question-choices { display: flex; flex-direction: column; gap: 20px; max-width: 560px; margin: 31px auto 0; }
.question-choices.has-four-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.question-choices button { min-height: 64px; border-radius: 100px; padding: 8px 12px; background: white; font-size: 18px; font-weight: 500; line-height: 31px; }
.question-choices.has-four-choices button { border-radius: 16px; }
.question-choices button[data-selected] { outline: 2px solid #835c2a; }
.question-choices button:focus-visible { outline: 3px solid #276b79; outline-offset: 4px; }
.back-button { display: flex; flex-direction: column; align-items: center; width: 50px; height: 50px; border-radius: 50%; color: #276b79; background: white; font-size: 10px; line-height: 16px; margin-top: 20px; }
.back-button span { font-size: 20px; line-height: 24px; }
.diagnosis-result-title { font-size: 18px; font-weight: 400; margin-top: 0; color: #835c2a; }
.diagnosis-result-card { max-width: 420px; margin: 0; font-size: 24px; line-height: 1.7; }
@media (min-width: 1001px) and (max-width: 1100px) {
  .diagnosis h2 { font-size: 28px; }
  .magnifier { left: calc(100% - 90px); }
  .magnifier { width: 140px; }
}
@media (max-width: 1000px) {
  .diagnosis { padding: 0 20px 145px; }
  .diagnosis-panel { max-width: 550px; padding: 24px 20px; }
  .diagnosis h2 { font-size: 23px; line-height: 35px; }
  .diagnosis-stage { min-height: 420px; margin-top: 16px; }
  .diagnosis-desc { font-size: 13px; line-height: 22px; }
  .start-button { width: 203px; height: 57px; margin-top: 24px; font-size: 14px; }
  .magnifier { left: calc(100% - 100px); bottom: -35px; }
  .magnifier { width: 110px; }
  .diagnosis-wave { top: 0; left: -37.986px; }
  .diagnosis-wave img { width: 428.649px; height: 604px; }
  .diagnosis-question-title { font-size: 15px; line-height: 26px; }
  .question-choices { gap: 16px; margin-top: 32px; max-width: 309px; }
  .question-choices button { min-height: 56px; font-size: 14px; line-height: 24px; }
  .back-button { margin-top: 8px; width: 34px; height: 34px; font-size: 7px; line-height: 12px; }
  .back-button span { font-size: 15px; line-height: 16px; }
  .diagnosis-result-title { font-size: 14px; }
  .diagnosis-result-card { font-size: 18px; line-height: 1.5; }
}
@media (max-width: 374px) {
  .diagnosis-desc .sp-only br { display: none; }
  .question-choices button { font-size: 12px; }
}

.diagnosis-product { display: flex; align-items: center; justify-content: center; gap: 32px; min-height: 190px; margin: 16px auto 0; }
.diagnosis-card-art { flex: 0 0 246px; }
.diagnosis-card-art img { width: 246px; height: 155px; object-fit: contain; }
.diagnosis.is-result .start-button { margin-top: 20px; }
@media (max-width:1000px) {
 .diagnosis-product { flex-direction: column; gap: 12px; min-height: 0; margin-top: 12px; }
 .diagnosis-card-art { flex: none; }
 .diagnosis-card-art img { width: 176px; height: 111px; }
}
.diagnosis-panel[data-result="emerald"] { background-image: url('../assets/supplied-20261026/diagnosis/eme-background.svg'); }
.diagnosis-panel[data-result="tigers"] { background-image: url('../assets/supplied-20261026/diagnosis/hanshin-background.svg'); }
.diagnosis-panel[data-result="hotel"] { background-image: url('../assets/supplied-20261026/diagnosis/hotel-background.svg'); }
.diagnosis-panel[data-result="takarazuka"] { background-image: url('../assets/supplied-20261026/diagnosis/takara_p-background.svg'); }
.diagnosis-panel[data-result="s"] { background-image: url('../assets/supplied-20261026/diagnosis/s-background.svg'); }
.diagnosis-panel[data-result="saica"] { background-image: url('../assets/supplied-20261026/diagnosis/saica-background.svg'); }
@media (min-width:1001px) {
 .diagnosis-wave { left: 0; top: 45px; }
 .diagnosis-wave img { width: 1440px; height: 825px; }
}
@media (max-width:1000px) {
 .diagnosis-wave { top: 160px; }
 .blue-train { top: 554.7px; }
}