.page-wrap {
  background: url("../img/identity/bg-identity-inner-sp.svg") no-repeat top center/cover;
}
@media (min-width: 768px) {
  .page-wrap {
    background-image: url("../img/identity/bg-identity-inner.svg");
  }
}

@media (min-width: 768px) {
  .page-hero__lead {
    text-align: center;
  }
}

#quizForm {
  padding: 0 6.4vw;
}
@media (min-width: 768px) {
  #quizForm {
    padding: 0 12.08vw;
  }
}
#quizForm .question--hidden {
  display: none;
}
#quizForm .btn-show-more {
  display: block;
  width: 60vw;
  margin: 4.27vw auto;
  padding: 3.6vw 0;
  background: url("../img/identity/btn-identity-3.svg") no-repeat center/contain;
  color: #00A73C;
  font-size: 4vw;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
  cursor: pointer;
}
@media (min-width: 768px) {
  #quizForm .btn-show-more {
    width: 20vw;
    padding: 1.56vw 0;
    font-size: 1.25vw;
    margin: 3.13vw auto 6.25vw;
  }
}
#quizForm .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vw;
  padding: 6.4vw 0;
}
@media (min-width: 768px) {
  #quizForm .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 2.4vw;
    padding: 0;
    margin: 3.13vw auto 6.25vw;
  }
}
#quizForm .actions button {
  display: block;
  width: 60vw;
  padding: 3.6vw 0;
  background: url("../img/identity/btn-identity-4.svg") no-repeat center/100% 100%;
  color: #fff;
  font-size: 4vw;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  #quizForm .actions button {
    width: 18vw;
    padding: 1.56vw 0;
    font-size: 1.04vw;
  }
}
@media (min-width: 768px) {
  #quizForm .actions #reshuffle {
    justify-self: end;
  }
}
@media (min-width: 768px) {
  #quizForm .actions #resetBtn {
    justify-self: start;
  }
}
#quizForm .actions button[type=submit] {
  display: flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 527/94;
  background: url("../img/identity/btn-identity-sp.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 4.27vw;
  color: #000;
  justify-content: center;
  padding-left: 1.8em;
}
@media (min-width: 768px) {
  #quizForm .actions button[type=submit] {
    width: 80%;
    aspect-ratio: 1072/94;
    background-image: url("../img/identity/btn-identity.svg");
    font-size: 1.67vw;
    grid-column: 1/-1;
  }
}

.question {
  background-color: #fff;
  border-bottom: none;
  margin-bottom: 3.73vw;
  padding: 4.27vw 4.27vw 6.4vw 4.27vw;
  border-radius: 4vw;
}
@media (min-width: 768px) {
  .question {
    display: grid;
    column-gap: 6.85%;
    grid-template-columns: 40% 1fr;
    grid-template-areas: "text choices" ". guide";
  }
  .question .q-text {
    grid-area: text;
  }
  .question .choices {
    grid-area: choices;
  }
  .question .question__guide {
    grid-area: guide;
  }
  .question {
    margin-bottom: 1.67vw;
    border-radius: 1.56vw;
    padding: 2.5vw 1.56vw 1.67vw;
  }
}
.question__guide {
  font-size: 2.27vw;
  color: #00A73C;
  display: flex;
  justify-content: space-between;
  margin: 0.5em 0 0 0;
}
@media (min-width: 768px) {
  .question__guide {
    font-size: 0.78vw;
    margin-top: -0.4em;
  }
}
.question__guide li {
  flex: 1;
}
.question__guide li:nth-child(2) {
  text-align: center;
}
.question__guide li:last-child {
  text-align: right;
}

.q-text {
  display: grid;
  grid-template-columns: 20% 1fr;
  align-items: center;
  color: #00A73C;
  font-weight: 700;
  font-size: 3.47vw;
  margin-bottom: 3.47vw;
}
@media (min-width: 768px) {
  .q-text {
    font-size: 1.3vw;
    margin-bottom: 0;
    line-height: 1.7;
    min-height: 4.27vw;
  }
}
.q-text strong {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 5.6vw;
}
@media (min-width: 768px) {
  .q-text strong {
    font-size: 2.19vw;
  }
}

.choices {
  gap: 1.6vw;
}
@media (min-width: 768px) {
  .choices {
    gap: 0.89vw;
  }
}

.choice {
  flex: 1;
}

.choice label {
  background: #E6E6E6;
  padding: 0.2em 0;
  border-radius: 1.33vw;
  font-size: 3.73vw;
  display: block;
  text-align: center;
}
@media (min-width: 768px) {
  .choice label {
    font-size: 1.82vw;
  }
}
.choice label input[type=radio] {
  accent-color: #00A73C;
  width: 3.2vw;
  height: 3.2vw;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .choice label input[type=radio] {
    width: 1.56vw;
    height: 1.56vw;
  }
}

.result.type-0 {
  --type-color: #002f7b;
}
.result.type-1 {
  --type-color: #763b25;
}
.result.type-2 {
  --type-color: #f08300;
}
.result.type-3 {
  --type-color: #489f9d;
}
.result.type-4 {
  --type-color: #45b035;
}
.result.type-5 {
  --type-color: #ec6d74;
}
.result.type-6 {
  --type-color: #e83820;
}
.result.type-7 {
  --type-color: #727171;
}

.result {
  width: 81.33vw;
  margin: 6.4vw auto 0;
  padding: 3.73vw 4.27vw;
  border-radius: 4.27vw;
  background: #fff;
  border: 1px solid var(--type-color);
}
@media (min-width: 768px) {
  .result {
    width: 85.94vw;
    margin: 4.17vw auto 0;
    padding: 4.17vw 6.25vw;
    border-radius: 1.67vw;
    position: relative;
  }
}
.result .chart-area {
  position: relative;
}
@media (min-width: 768px) {
  .result .chart-area {
    display: grid !important;
    grid-template-columns: 1fr 46.34%;
    align-items: start;
    gap: 0;
  }
}
.result .chart-area::after {
  width: 100%;
  aspect-ratio: 1;
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/identity/circle.svg");
}
@media (min-width: 768px) {
  .result .chart-area::after {
    width: 29.43vw;
    top: 0.8vw;
    left: 2.1vw;
  }
}
.result .svg-wrapper {
  width: 100%;
  z-index: 2;
  padding: 8vw 0;
}
@media (min-width: 768px) {
  .result .svg-wrapper {
    position: relative;
    padding: 0;
  }
}
.result #radar {
  max-width: none;
  height: 52vw;
  width: 66.93vw;
  margin: 2vw auto 0;
  display: block;
}
@media (min-width: 768px) {
  .result #radar {
    width: 28vw;
    height: 23vw;
    margin: 0;
    position: absolute;
    top: 4vw;
    left: 3vw;
  }
}
.result h2 {
  color: var(--type-color);
  font-size: 3.33vw;
  font-weight: 700;
}
@media (min-width: 768px) {
  .result h2 {
    font-size: 1.3vw;
    position: absolute;
    top: 1.25vw;
    left: 1.25vw;
  }
}
.result h2::before {
  content: "";
  display: inline-block;
  width: 1.36em;
  height: 1.36em;
  background-color: var(--type-color);
  mask: url("../img/common/icon_search.svg") no-repeat center/contain;
  -webkit-mask: url("../img/common/icon_search.svg") no-repeat center/contain;
  vertical-align: middle;
  margin-right: 0.3em;
}
.result .your-type-label {
  color: var(--type-color);
  font-size: 6.67vw;
  text-decoration: underline;
  text-align: center;
  font-family: "EB Garamond", serif;
  letter-spacing: 0.05em;
  margin-bottom: 1.2em;
}
@media (min-width: 768px) {
  .result .your-type-label {
    font-size: 1.35vw;
    text-align: left;
    margin-bottom: 0.5em;
  }
}
.result .type-image {
  width: 29.33vw;
  height: 37vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .result .type-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 7vw;
    height: 10vw;
    margin: 0;
  }
}
.result.type-0 .type-image {
  background-image: url("../img/identity/type0.svg");
}
.result.type-1 .type-image {
  background-image: url("../img/identity/type1.svg");
}
.result.type-2 .type-image {
  background-image: url("../img/identity/type2.svg");
}
.result.type-3 .type-image {
  background-image: url("../img/identity/type3.svg");
}
.result.type-4 .type-image {
  background-image: url("../img/identity/type4.svg");
}
.result.type-5 .type-image {
  background-image: url("../img/identity/type5.svg");
}
.result.type-6 .type-image {
  background-image: url("../img/identity/type6.svg");
}
.result.type-7 .type-image {
  background-image: url("../img/identity/type7.svg");
}
.result .top-type {
  font-weight: 400;
  text-align: center;
  font-size: 6.4vw;
  color: var(--type-color);
  margin-top: 0;
  margin-bottom: 1.2em;
}
.result .top-type span {
  text-decoration: underline;
  text-decoration-color: #FFF100;
  text-decoration-thickness: 4px;
}
@media (min-width: 768px) {
  .result .top-type {
    font-size: 2.4vw;
    text-align: left;
    margin-bottom: 1.5em;
    width: 27vw;
    line-height: 1.5;
  }
  .result .top-type span {
    background-size: 100% 0.15em;
  }
}
.result .type-sub {
  font-size: 4.27vw;
  background: none !important;
  display: block;
}
@media (min-width: 768px) {
  .result .type-sub {
    font-size: 1.25vw;
    padding-top: 0.5em;
  }
}
@media (min-width: 768px) {
  .result.type-2 .type-sub, .result.type-6 .type-sub {
    display: inline-block;
  }
}
.result .type-desc-label,
.result .recommend > strong {
  background-color: color-mix(in srgb, var(--type-color) 20%, white);
  color: var(--type-color);
  font-size: 4vw;
  padding: 0.5em;
  display: block;
  font-weight: 400;
}
@media (min-width: 768px) {
  .result .type-desc-label,
  .result .recommend > strong {
    font-size: 1.15vw;
    padding: 0.2em 0.6em;
  }
}
@media (min-width: 768px) {
  .result .recommend > strong:first-of-type {
    width: 46.34%;
    margin: 0 0 0 auto;
  }
}
.result .recommend {
  padding: 0;
  background-color: #fff;
  border: none;
}
.result .recommend ul {
  font-weight: 300;
  font-size: 3.2vw;
}
.result .recommend ul:first-of-type {
  margin: 1em 0 2em 1.6em;
}
.result .recommend ul:first-of-type li {
  list-style-type: disc;
}
.result .recommend ul:first-of-type li::marker {
  font-size: 0.5em;
}
@media (min-width: 768px) {
  .result .recommend ul:first-of-type {
    font-size: 1.04vw;
    margin: 0.5em 0 2.5em auto;
    width: 45%;
  }
}
.result .recommend ul:last-of-type {
  list-style: none;
  margin: 0 0 11.73vw;
}
.result .recommend ul:last-of-type li {
  padding: 1em 0;
  border-bottom: 1px solid var(--type-color);
}
.result .recommend ul:last-of-type li strong {
  font-size: 3.6vw;
  font-weight: 500;
  display: block;
  color: var(--type-color);
  margin-bottom: 0.4em;
}
@media (min-width: 768px) {
  .result .recommend ul:last-of-type {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: 1.04vw;
    margin: 2.08vw 0 3vw;
  }
  .result .recommend ul:last-of-type li {
    border-bottom: none;
    border-right: 1px solid var(--type-color);
    padding: 0.5em 2vw;
  }
  .result .recommend ul:last-of-type li:first-child {
    padding-left: 0;
  }
  .result .recommend ul:last-of-type li:last-child {
    border-right: none;
  }
  .result .recommend ul:last-of-type li strong {
    font-size: 1.25vw;
  }
}
.result .type-desc {
  font-size: 3.2vw;
  margin: 1em 0 2em;
  color: #000;
  border-left: none;
  padding: 0;
  border-radius: 0;
  font-weight: 300;
}
@media (min-width: 768px) {
  .result .type-desc {
    font-size: 1.04vw;
  }
}
.result .note,
.result #scoreList,
.result #recommendations h3,
.result .recommend h4,
.result .small {
  display: none;
}

.result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vw;
  margin: 8vw auto;
  padding: 0 6.4vw;
}
@media (min-width: 768px) {
  .result-actions {
    flex-direction: row;
    justify-content: center;
    gap: 4vw;
    margin: 6.25vw auto;
    padding: 0;
  }
}
.result-actions button {
  display: block;
  width: 60vw;
  padding: 3.6vw 0;
  background: url("../img/identity/btn-identity-4.svg") no-repeat center/100% 100%;
  color: #fff;
  font-size: 4vw;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .result-actions button {
    width: 18vw;
    padding: 1.56vw 0;
    font-size: 1.04vw;
  }
}/*# sourceMappingURL=identity.css.map */