/* ===== Section Layout ===== */

.diagnosis {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 16px;
  box-sizing: border-box;
}

.diagnosis-body {
  width: 100%;
  position: relative;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  box-shadow: none;
}

/* ===== PC（641px以上） ===== */
@media (min-width: 641px) {
  .diagnosis-body {
    max-width: 1000px;
  }
}

/* ===== SP（640px以下） ===== */
@media (max-width: 640px) {
  .diagnosis {
    padding: 24px 12px;
  }

  .diagnosis-body {
    max-width: 100%;
  }
}

/* ===== Section Layout ===== */



.diagnosis{
  width:100%;
  display:flex;
  justify-content:center;
  padding:40px 16px;
  box-sizing:border-box;
}

.diagnosis-body{
  width:100%;
  background-size:cover;
  background-position:center;
  background-color:transparent;
  position:relative;

  overflow:hidden;
}

@media (max-width: 640px){
  .diagnosis-body{
    max-width: calc(100% - 2px);
    aspect-ratio: 1356 / 1563;
  }
}

@media (min-width: 641px){
  .diagnosis-body{
    max-width: 890px;
    aspect-ratio: 1778 / 810;
  }
}




@media (max-width: 640px) {
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .overlay.show {
    display: flex;
  }
  .modal {
    background: transparent;
    width: calc(100% - 2px);
    height: fit-content;
    aspect-ratio: 1356 / 1563;
  
    overflow: hidden;
  }
  .modal-header,
  .modal-footer {
    padding: 14px 16px;
  }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }
  .diagnosis-body {
    height: 100%;
    background-size: cover;
    border: none;
    background-color: transparent;
  }
  .close {
    border: 0;
    background: transparent;
    font-size: 1.25em;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
  }
  .actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  .btn-action {
    width: fit-content;
    height: 15vw;
    background-size: cover;
    border: none;
    aspect-ratio: 572 / 202;
    background-color: transparent;
  }
  .btn-result {
    width: fit-content;
    height: 18.4vw;
    background-size: cover;
    border: none;
    background-color: transparent;
    margin-left: auto;
    margin-right: 0;
    transform: translateX(1vw);
    aspect-ratio: 1072 / 239;
    padding: 0;
    margin-top: -5.5vw;
  }
  .btn-action:hover,
  .btn-result:hover {
    cursor: pointer;
  }
  .modal-action {
    position: absolute;
    left: 50%;
    bottom: 12%;
    transform: translateX(calc(-50% - 10px));
    width: 88%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    top: 90%;
    float: none;
    padding: 0;
  }

  .btn-ok {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_yes_sp.png);
  }
  .btn-cancel {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_no_sp.png);
  }

  #diagnosisBody.Q1 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_Q1.png);
  }
  #diagnosisBody.Q2 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_Q2.png);
  }
  #diagnosisBody.Q3 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_Q3.png);
  }
  #diagnosisBody.Q4 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_Q4.png);
  }

  #diagnosisBody.A1 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_A1.png);
  }
  #diagnosisBody.A2 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_A2.png);
  }
  #diagnosisBody.A3 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_A3.png);
  }

  #diagnosisBody.A4 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_A4.png);
  }
  #diagnosisBody.A5 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_sp_A5.png);
  }
  #modal-result-btn-A1 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result1_sp.png);
  }
  #modal-result-btn-A2 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result2_sp.png);
  }
  #modal-result-btn-A3 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result3_sp.png);
  }
  #modal-result-btn-A4 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result4_sp.png);
  }
  #modal-result-btn-A5 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result5_sp.png);
  }
}

@media (min-width: 641px) {
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
  }
  .overlay.show {
    display: flex;
  }

  .modal {
    background: transparent;
    width: 51%;
    height: fit-content;
    aspect-ratio: 1778 / 810;
  
    overflow: hidden;
  }
  .modal-header,
  .modal-footer {
    padding: 14px 16px;
  }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }
  .diagnosis-body {
    width: 100%;
    max-width: 920px;
    aspect-ratio: 1778 / 810;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .close {
    border: 0;
    background: transparent;
    font-size: 1.25em;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
  }
  .actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  .btn-action {
    width: 48%;
    max-width: 260px;              
    aspect-ratio: 504 / 156;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    padding: 0;
  }
  .btn-result {
    width: min(520px, 70%);
    aspect-ratio: 871 / 201;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    padding: 0;
    margin-left: 0;
  }

  .btn-action:hover,
  .btn-result:hover {
    cursor: pointer;
  }

  .modal-action {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(calc(-50% + 80px));
    width: min(560px, 62%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    top: auto;
    margin-left: 0;
    float: none;
  }

  .btn-ok {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_yes_pc.png);
  }
  .btn-cancel {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_no_pc.png);
  }

  #diagnosisBody.Q1 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_Q1.png);
  }
  #diagnosisBody.Q2 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_Q2.png);
  }
  #diagnosisBody.Q3 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_Q3.png);
  }
  #diagnosisBody.Q4 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_Q4.png);
  }

  #diagnosisBody.A1 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_A1.png);
  }
  #diagnosisBody.A2 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_A2.png);
  }
  #diagnosisBody.A3 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_A3.png);
  }

  #diagnosisBody.A4 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_A4.png);
  }
  #diagnosisBody.A5 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/diagnosis_pc_A5.png);
  }
  #modal-result-btn-A1 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result1_pc.png);
  }
  #modal-result-btn-A2 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result2_pc.png);
  }
  #modal-result-btn-A3 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result3_pc.png);
  }
  #modal-result-btn-A4 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result4_pc.png);
  }
  #modal-result-btn-A5 {
    background-image: url(/n/finance/keiei/kaigai_s/pr/images/btn_result5_pc.png);
  }
}


.btn-back {
  position: absolute;
  z-index: 9999;
  border: none;
  border-radius: 999px;
  background: #ffffff;
  color: #02457A;
  border: 1px solid #02457A;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  padding: 8px 9px;
  font-size: 0.68em;
  line-height: 1;
  cursor: pointer;
  top: auto;
}

@media (max-width: 640px) {
  .btn-back {
    left: 3%;
    bottom: 81%;
    top: auto;
  }
}

@media (min-width: 641px) {
  .btn-back {
    left: 2%;
    bottom: 73%;
    top: auto;
  }
}

.btn-back.is-hidden {
  display: none;
}

@media (max-width: 640px) {
  #diagnosisBody.A1 .btn-back,
  #diagnosisBody.A2 .btn-back,
  #diagnosisBody.A3 .btn-back,
  #diagnosisBody.A4 .btn-back,
  #diagnosisBody.A5 .btn-back {
    bottom: 90%;
  }
}

@media (min-width: 641px) {
  #diagnosisBody.A1 .btn-back,
  #diagnosisBody.A2 .btn-back,
  #diagnosisBody.A3 .btn-back,
  #diagnosisBody.A4 .btn-back,
  #diagnosisBody.A5 .btn-back {
    bottom: 87%;
  }
}