@charset "utf-8";

:root {
  --gold01 : #C9A700;
  --gold02 : #CAA73A;
  --blue01 : #00b1a02e;
  --blue02 : #00b1a01a;
  --blue03 : #00b1a0;
  --brown01:#caa73a40;
  --brown02:#caa73a26;
  --brown03: #c9a700;
  --brown04:#7f613a;
  --black01: #212121;
  --black02: #2121211a;
  --red01: #C8632D;
  --red02: #c8632d1a;
  --red03: #c8632d40;
  --white01: #ffffff;
  --white02: #f4f6f2;
  --gray01: #9c9c9c;
}
.hero {
  &.diagnosing {
    height: 140px;
    margin: 0 0 50px;
    & .hero-tit_jp {
      font-size: 2.6rem;
    }
    & .hero-tit_en {
      display: none;
    }
  }
}
.hero-tit_jp {
  & big {
    & .ib {
      display: inline-block;
    }
  }
}




.main {
  background: var(--white02);
  &.diagnosing,&.result {
    background: var(--white01);
  }
}

.chart__start {
  &.diagnosing {
    visibility: hidden;
    pointer-events: none;
    display: none;
  }
  & .flex__box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & .img__box {
      flex-basis: 61%;
    }
    & .text__box {
      flex-basis: 36%;
      & .yes__or__no {
        margin: 0;
      }
      & p {
        font-family: "Noto Serif JP";
        font-size: 1.8rem;
        line-height: 1.88;
        letter-spacing: 0.05em;
        color: var(--black01);
        margin: 20px 0 0 0.66em;
        font-weight: 600;
      }
    }
  }
  & .btn__box {
    margin: 5rem 0 0 0;
    & button {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 35rem;
      max-width: 100%;
      height: 7rem;
      background: var(--red01);
      border-radius: 3.5rem;
      border: var(--red01) solid 5px;
      margin: 0 auto;
      font-size: 2.8rem;
      color: var(--white01);
      font-family: "Cormorant Infant", serif;
      box-shadow: inset 0 0 0 1px #fff;
      position: relative;
      letter-spacing: 0.14em;
      &:after {
        content: '';
        display: block;
        width: 8px;
        height: 17px;
        background: url(../img/chart/icon_arrow_03.svg) center center / 100% 100% no-repeat;
        right: 3.3rem;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
      }
      &:hover,&:focus {
        opacity: 0.7;
      }
    }
  }
  
}

.chart__box {
  display: none;
  &.active {
    display: block;
  }
  & h3 {
    text-align: center;
    font-size: 2.4rem;
    font-family: "Noto Serif JP";
    font-weight: 600;    
    & span {
      &.icon {
        font-family: "Cormorant Infant", serif;
        font-weight: 400;
        font-size: 4rem;
        color: var(--gold01);
        display: block;
        width: 1.7em;
        margin: 0 auto 2.4rem auto;
        position: relative;
        padding: 0 0 1.2rem 0;
        line-height: 1;
        &:after {
          position: absolute;
          content: '';
          width: 100%;
          height: 2px;
          background: var(--gold01);
          display: block;
          left: 0;
          bottom: 0;
        }
      }
      &.num {
        font-size: 1.5em;
      }
      &.ib {
        display: inline-block;
      }
    }
  }
  & ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 4.6rem;
    & li {
      &.col2 {
        flex-basis: 46%;
      }
      &.col3 {
        flex-basis: 28%;
      }
      & .answer__btn {
        border: none;
        outline: none;
        display: block;
        width: 100%;
        cursor: pointer;
        border-radius: 5px;
        overflow: hidden;
        font-weight: 400;
        font-family: "Noto Sans JP";
        & .title {
          display: flex;
          height: 5.4rem;
          justify-content: center;
          align-items: center;
          font-size: 4.4rem;
          font-family: "Cormorant Infant", serif;
        }
        & .text {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 4rem 0 4rem;
          min-height: 108px;
          position: relative;
          font-size: 1.6rem;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.05em;
          text-indent: 0.05em;
          color: var(--black01);
          font-family: "Noto Sans JP";
          &:after {
            content: '';
            width: 2.4rem;
            height: 2.4rem;
            position: absolute;
            display: block;
            border-radius: 50%;
            background: url(../img/chart/icon_arrow.svg) center center / 100% 100% no-repeat;
            right: 1.6rem;
            top:50%;
            transform: translateY(-50%);
          }
        }
        &:hover {
          transition: background-color 0.5s linear 0s;
          & .title, & .text {
            transition: background-color 0.5s linear 0s;
          }
          & .text {
            &:after {
              background: url(../img/chart/icon_arrow_over.svg) center center / 100% 100% no-repeat;
            }
          }
        }
        
      }
      &:nth-of-type(1) {
        & .answer__btn {
          background: var(--blue02);
          & .title {
            background: var(--blue01);
            color: var(--blue03);
          }
          &:hover,&:focus {
            background: var(--blue03);
            color: var(--white01);
            & .title {
              background: var(--blue02);
              color: var(--white01);
              border-bottom: var(--white01) solid 1px;
            }
          }
        }
      }
      &:nth-of-type(2) {
        & .answer__btn {
          background: var(--brown02);
          & .title {
            background: var(--brown01);
            color: var(--brown03);
          }
          &:hover,&:focus {
            background: var(--brown03);
            color: var(--white01);
            & .title {
              background: var(--brown02);
              color: var(--white01);
              border-bottom: var(--white01) solid 1px;
            }
          }
        }
      }
      &:nth-of-type(3) {
        & .answer__btn {
          background: var(--red02);
          & .title {
            background: var(--red03);
            color: var(--red01);
          }
          &:hover,&:focus {
            background: var(--red01);
            color: var(--white01);
            & .title {
              background: var(--red03);
              color: var(--white01);
              border-bottom: var(--white01) solid 1px;
            }
          }
        }
      }
      
      
    }
  }
  & .link__text {
    margin-top: 6.4rem;
    & button {
      display: flex;
      font-size: 1.4rem;
      background: none;
      border: none;
      border-bottom: var(--gold02) solid 1px;
      width: 9.6em;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 0.8rem;
      cursor: pointer;
      font-family: "Noto Serif JP";
      font-weight: 600;
      color: var(--black01);
      &:before {
        content: '';
        display: block;
        width: 5px;
        height: 10px;
        background: url(../img/chart/icon_arrow_02.svg) center center / 100% 100% no-repeat;
      }
      &:hover {
        opacity: 0.7;
      }
      &:focus {
        opacity: 0.7;
      }
    }
  }
}

.chart__result {
  width: 100%;
  max-width: 810px;
  margin: 0 auto;
  & h3 {
    text-align: center;
    font-family: "Noto Serif JP";
    font-weight: 600;
    font-size: 2.2rem;
    margin: 0 auto 3.4rem auto;
    letter-spacing: 0.05em;
    &:after {
      content: '';
      display: block;
      background: url(../img/chart/icon_arrow_04.svg) center center / 100% 100% no-repeat;
      width: 3.8rem;
      height: 3.4rem;
      margin: 1em auto 0 auto;
    }
  }
  & .flex__box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & .img__box {
      flex-basis: 43.2%;
    }
    & .text__box {
      flex-basis: 47%;
      & h4 {
        font-size: 3rem;
        letter-spacing: 0.05em;
        text-align: center;
        border-bottom: var(--gold02) solid 1px;
        padding: 0 0 0.5em 0;
        margin: 0 auto 3rem auto;
        font-family: "Noto Serif JP";
        font-weight: 600;
        font-feature-settings: "palt";
        & .writer {
          display: block;
          text-align: center;
          color: var(--gold02);
          font-size: 80%;
          margin: 0 auto 0.25em auto;
          line-height: 1.1;
        }
      }
      & p {
        font-family: "Noto Serif JP";
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 171%;
        letter-spacing: 0.05em;
      }
      & .share__box {
        width: 20em;
        font-size: 1.2rem;
        margin: 4.6rem auto 0 auto;
        & a {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          border-bottom: var(--gray01) solid 1px;
          padding: 0 0 0.5em 0;
          font-weight: 600;
          font-family: "Noto Serif JP";
          &:before {
            content: '';
            display: block;
            background: url(../img/chart/icon_x_black.svg) center center / 100% 100% no-repeat;
            flex-basis: 1.83em;
            height: 2em;
          }
          &:after {
            content: '';
            display: block;
            background: url(../img/chart/icon_arrow_05.svg) center center / 100% 100% no-repeat;
            flex-basis: 0.41em;
            height: 1em;
          }
          &:hover,&:focus {
            opacity: 0.7;
          }
        }
      }
      & .btn__box {
        width: 100%;
        max-width:300px;
        margin: 2.3rem auto 0 auto;
        & a {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          width: 30rem;
          height: 4.5rem;
          background: var(--red01);
          border-radius: 3.5rem;
          margin: 0 auto;
          font-size: 1.4rem;
          color: var(--white01);
          font-family: "Cormorant Infant", serif;
          font-weight: 600;
          position: relative;
          letter-spacing: 0.05em;
          gap:0 1.5em;
          line-height: 1.1;
          padding: 0.35em 0 0 0;
          &:after {
            content: '';
            display: block;
            width: 5px;
            height: 12px;
            background: url(../img/chart/icon_arrow_03.svg) center center / 100% 100% no-repeat;
            transform: translateY(-0.175em);
          }
          &:hover,&:focus {
            opacity: 0.7;
          }
        }
      }
      & .link__text {
        margin: 3.2rem auto 0 auto;
        text-align: right;
        &:after {
          content: '';
          clear: both;
          display: block;
        }
        & a {
          display: flex;
          font-size: 1.4rem;
          background: none;
          border: none;
          border-bottom: var(--gold02) solid 1px;
          width: 17.2em;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 0.2em;
          cursor: pointer;
          font-family: "Noto Serif JP";
          font-weight: 600;
          margin: 0 auto;
          &:after {
            content: '';
            display: block;
            width: 5px;
            height: 10px;
            background: url(../img/chart/icon_arrow_02.svg) center center / 100% 100% no-repeat;
            transform: rotate(180deg);
          }
          &:hover,&:focus {
            opacity: 0.7;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 769px){

}
@media screen and (max-width: 960px){
  .chart__box {
    & ul {
      & li {
        &.col3 {
          flex-basis: 32%;
        }
      }
    }
  }
}
@media screen and (max-width: 768px){
  .hero {
    &.diagnosing {
      height: 95px;
      margin: 0 0 20px;
      & .hero-tit_jp {
        font-size: 2.2rem;
      }
    }
  }
  .chart__start {
    & .flex__box {
      justify-content: center;
      gap:1.6rem 0;
      & .img__box {
        flex-basis: 100%;
      }
      & .text__box {
        flex-basis: 100%;
        & .yes__or__no {
          width: 100%;
          max-width: 282px;
          margin: 0 auto 0 auto;
          transform: translateX(-2px);
        }
        & p {
          text-align: center;
          margin: 1.6rem auto 0 auto;
        }
      }
    }
  }
  .chart__box {
    & h3 {
      
    }
    & ul {
      gap:20px;
      & li {        
        &.col2 {
          flex-basis: 100%;
        }
        &.col3 {
          flex-basis: 100%;
        }
      }
    }
  }
  .chart__result {
    & h3 {
      font-size: 2.0rem;
      margin: 0 auto 1.8rem auto;
      &:after {
        width: 3.7rem;
        height: 3.2rem;
      }
    }
    & .flex__box {
      justify-content: center;
      gap:1.8rem 0;
      & .text__box {
        flex-basis: 100%;
        & .share__box {
          font-size: 1.4rem;
        }
      }
      & .img__box {
        flex-basis: 76.92%;
      }
    }
  }
}