@charset "utf-8";

/* ======================================================================
/* root
====================================================================== */
:root {
  --color-brand: #00a9c8;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #f0f0f0;
  --color-navy: #1c3054;
  --color-turquoise-blue: #2eb6aa;
  --color-yellow: #fdd22b;
}

/* ======================================================================
/* dialog
====================================================================== */
.openBtn {
  cursor: pointer;
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.1);
  }
}

dialog {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 620px;
  inline-size: 100%;
  max-block-size: 90vh;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

  &::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
  }

  & .dialog-content-wrapper {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
  }

  .closeBtn {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    inline-size: 32px;
    block-size: 32px;
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 10;
    transition:
      background 0.3s,
      transform 0.2s;

    &:hover {
      transform: scale(1.1);
    }
  }
}

dialog[open]::backdrop {
  animation: backdropFadeIn 0.3s ease-out forwards;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (width <= 768px) {
  dialog {
    inline-size: 95%;

    & .dialog-content-wrapper {
      position: relative;
      max-block-size: 100vh;
      overflow-y: auto;
    }
  }
}

/* ======================================================================
/* 診断コンテンツのスタイル
====================================================================== */
.diagnosis_container {
  inline-size: 100%;
  background: var(--color-white);

  & .ttl {
    color: var(--color-white);
    background: var(--color-turquoise-blue);
    padding: 24px 48px 24px 24px;
    text-align: center;

    & p {
      font-size: 24px;
      font-weight: bold;
    }
  }

  & .diagnosis_content {
    padding: 10px;

    & .propertyBox {
      inline-size: 100%;
      block-size: auto;
      display: flex;
      flex-direction: column;
      margin-block: 0 !important;
      box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.25);
      border-radius: 3px;

      & .imgBox {
        position: relative;
        inline-size: 100%;

        &.Bonus {
          position: relative;

          &::after {
            content: "";
            display: block;
            position: absolute;
            inset-block-start: 0;
            inset-inline-end: 0;
            inline-size: 135px;
            block-size: 50px;
            background: url(../img/property/special_contract_bonus.svg) top center / cover no-repeat;
            z-index: 10;
          }
        }

        & img {
          border-radius: 3px 3px 0 0;
          aspect-ratio: 3 / 2;
        }
      }

      & .infoBox {
        max-inline-size: 100%;
        padding: 15px;

        & .infoHeader {
          margin-block-end: 18px;
          min-block-size: 0 !important;

          & .title {
            font-size: 18px;
            font-weight: bold;
            min-block-size: 0 !important;
          }

          & .address {
            font-size: 15px;
          }

          & .traffic {
            font-size: 11px;
            padding-block-start: 10px;
            min-block-size: 0 !important;
          }

          & .district {
            font-size: 11px;
          }
        }

        & .iconList {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          gap: 20px;
          margin-block-end: 15px;

          & li {
            inline-size: calc(100% / 4 - 15px);
            background: var(--color-green);
            border-radius: 5px;

            & img {
              inline-size: 100%;
              block-size: auto;
            }
          }
        }

        & .infoBody {
          margin-block-end: 20px;

          & .tableList {
            margin-block: 0 20px;

            & .boxTable {
              max-block-size: 100%;
              display: flex;
              flex-wrap: wrap;

              & .tableItem {
                inline-size: 50%;
                border-bottom: solid 1px var(--color-white);
                display: flex;

                &:last-child {
                  border-block-end: none;
                }

                & .tableTit {
                  inline-size: 40px;
                  padding: 10px;
                  font-size: 12px;
                  text-align: center;
                  background: var(--color-black);
                  color: var(--color-white);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  block-size: 30px;
                }

                & .tableTxt {
                  inline-size: calc(100% - 40px);
                  background: var(--color-gray);
                  padding: 10px;
                  block-size: 30px;
                  font-size: 12px;
                  display: flex;
                  align-items: center;
                  line-height: 1.2;

                  & .price {
                    font-size: 20px;
                    font-weight: bold;
                    color: var(--color-red);
                  }

                  & .vertical {
                    display: grid;
                    place-items: center;
                    font-size: 13px;
                    margin-inline-start: 5px;
                  }

                  & .tax {
                    font-size: 10px;
                  }
                }
              }
            }
          }

          & .drawingBox {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            min-block-size: 160px;

            & .drawingImgBox {
              position: relative;
              background: var(--color-gray);
              padding: 10px;

              &::after {
                position: absolute;
                bottom: 5px;
                right: 5px;
                content: "";
                display: block;
                inline-size: 30px;
                block-size: 30px;
                background: url(../img/common/zoom_in.svg) 100% 100% / cover no-repeat;
              }

              & img {
                display: block;
                margin: 0 auto;
                max-inline-size: 100%;
                block-size: auto;
              }
            }

            & p {
              text-align: center;
            }
          }
        }

        & .infoFooter {
          margin: 0;

          & .conversion {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;

            & .reserve a {
              position: relative;
              color: var(--color-white);
              background: var(--color-navy);
              font-weight: bold;
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 10px;
              text-decoration: none;
              transition: 0.3s ease-in-out;
              font-size: 13px;

              &:hover {
                opacity: 0.8;
              }
            }

            & .document a {
              position: relative;
              color: var(--color-white);
              background: var(--color-turquoise-blue);
              font-weight: bold;
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 10px;
              text-decoration: none;
              transition: 0.3s ease-in-out;
              font-size: 13px;

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }

  & .progress-bar {
    block-size: 10px;
    background: var(--color-gray);
    border-radius: 999px;
    margin-block-end: 25px;
    overflow: hidden;
  }

  & .progress-fill {
    block-size: 100%;
    background: var(--color-navy);
    transition: width 0.3s ease;
  }

  & #question-number {
    font-size: 14px;
    margin-block-end: 10px;
    font-weight: bold;
  }

  & .answer-buttons {
    display: flex;
    gap: 16px;
  }

  & .answer-btn {
    inline-size: 100%;
    flex: 1;
    padding: 18px;
    font-size: 18px;

    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s;
    color: var(--color-white);
    background: var(--color-turquoise-blue);

    &:hover {
      opacity: 0.8;
    }
  }

  & .no-btn {
    background: var(--color-gray) !important;
    color: var(--color-black) !important;
  }

  & #result-content {
    padding: 60px;
    background: url(../img/diagnosis/bg_result.svg) top center / contain no-repeat;
  }
}

@media screen and (width <= 768px) {
  .diagnosis_container {
    inline-size: 100%;
    background: var(--color-white);

    & .ttl {
      color: var(--color-white);
      background: var(--color-turquoise-blue);
      padding: 24px 48px 24px 24px;
      text-align: center;

      & p {
        font-size: 24px;
        font-weight: bold;
      }
    }

    & .diagnosis_content {
      padding: 10px;

      .propertyBox {
        position: relative;

        & .iconList {
          flex-direction: row;
          flex-wrap: nowrap;
          overflow-x: scroll;

          & li {
            inline-size: 20%;
            flex-shrink: 0;
          }
        }

        & .infoBox {
          max-inline-size: 100%;
          padding: 0;

          & .infoBody {
            & .tableList {
              & .boxTable {
                inline-size: 100%;
                display: flex;
                flex-direction: column;

                & .tableItem {
                  inline-size: 100%;

                  & .tableTxt {
                    & .vertical {
                      display: flex;
                      flex-direction: row-reverse;
                      align-items: end;
                      margin-inline-start: 0;
                    }

                    & .tax {
                      font-size: 13px;
                    }
                  }
                }
              }
            }

            & .drawingBox {
              grid-template-columns: repeat(2, 1fr);

              & .drawingImgBox {
                position: relative;
                min-block-size: 140px;

                &::after {
                  position: absolute;
                  bottom: 3px;
                  right: 3px;
                  content: "";
                  display: block;
                  inline-size: 20px;
                  block-size: 20px;
                  background: url(../img/common/zoom_in.svg) 100% 100% / cover no-repeat;
                }

                & img {
                  max-inline-size: 100%;
                }
              }
            }
          }

          & .infoFooter {
            margin: 0;

            & .conversion {
              grid-template-columns: repeat(2, 1fr);

              & .reserve a {
                font-size: 12px;
              }

              & .document a {
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    & #result-content {
      padding: 15px;
      background: url(../img/diagnosis/bg_result.svg) top center / cover no-repeat;
      min-block-size: 100vh;
      inline-size: 100%;
    }
  }
}

/* ======================================================================
/* 診断結果のスタイル
====================================================================== */
.resultCard {
  position: relative;
  padding: 10px;

  & .resultTitle {
    font-size: 24px;
    font-weight: bold;
    margin-block: 0 20px;
    text-align: center;
    color: var(--color-turquoise-blue);
    line-height: 1.5;
  }

  .index {
    color: var(--color-white);
    background: var(--color-turquoise-blue);
    border-radius: 9999px;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px;
  }

  & .resultTxt {
    font-size: 14px;
  }
}

@media screen and (width <= 768px) {
  .resultCard {
    position: relative;
    margin-block-start: 20px;

    & .resultTitle {
      font-size: 16px;
    }

    .index {
      font-size: 12px;
    }

    & .resultTxt {
      font-size: 12px;
    }
  }
}