.loading-btn, .title-btn img, .select-howto-btn img, .select-shindan-btn img, .select-profile-btn img {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3); }

*,
*:before,
*:after {
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 1.4;
  background: #fff;
  outline: none;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #524142; }

a {
  color: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: top; }

figure {
  margin: 0;
  padding: 0; }

button {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: inherit;
  background: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: inherit;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  vertical-align: top;
  cursor: pointer; }
  button:focus {
    outline: none; }
  button[disabled] {
    pointer-events: none; }

input[disabled] {
  opacity: 1; }

rt {
  font-size: 10px;
  font-size: 0.625rem; }

sub {
  font-size: 60%;
  line-height: 1.2; }

.wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff; }

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1; }

@media print, screen and (min-width: 741px) {
  .sp {
    display: none !important; } }

@media only screen and (max-width: 740px) {
  .pc {
    display: none !important; } }

.loading {
  background: url(../img/bg.png) 50% 50%/cover no-repeat #fff;
  position: relative;
  z-index: 1000; }
  @media only screen and (max-width: 740px) {
    .loading {
      background: url(../img/bg_sp.png) 50% 50%/cover no-repeat #fff; } }

.loading-inr {
  width: 100%;
  text-align: center;
  color: #fff;
  padding-top: 50px; }
  @media only screen and (max-width: 740px) {
    .loading-inr {
      padding-top: 0; } }

.loading-lead {
  margin-bottom: 40px;
  color: #524142;
  font-weight: bold;
  font-size: 50px;
  font-size: 3.125rem; }
  @media only screen and (max-width: 740px) {
    .loading-lead {
      font-size: 36px;
      font-size: 2.25rem;
      margin-bottom: 30px; } }

.loading-box-wrap {
  width: 960px;
  margin: 0 auto;
  position: relative; }
  @media only screen and (max-width: 740px) {
    .loading-box-wrap {
      width: 90%; } }

.loading-box {
  width: 100%;
  height: 30px;
  background: #d6bbf5;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  border: 5px solid #d6bbf5; }

.loading-bar {
  width: 0;
  height: 20px;
  background: #ae6df9;
  transition: 2s; }

.loading-btn {
  position: relative;
  overflow: hidden;
  margin: 50px auto 0;
  border-radius: 100px;
  background: linear-gradient(to top, #ae6df9, rgba(174, 109, 249, 0.1)) #fff;
  border: 2px solid #a064e6;
  display: block;
  width: 320px;
  height: 80px; }
  @media only screen and (max-width: 740px) {
    .loading-btn {
      width: 300px;
      height: 60px;
      margin-top: 30px; } }
  .loading-btn span {
    font-size: 36px;
    font-size: 2.25rem;
    position: relative;
    font-weight: bold;
    z-index: 1;
    text-shadow: #a064e6 0 0 5px; }
    @media only screen and (max-width: 740px) {
      .loading-btn span {
        font-size: 24px;
        font-size: 1.5rem; } }
  .loading-btn:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ccc;
    opacity: 0;
    transition: opacity .5s; }
  .loading-btn[disabled] {
    border: 2px solid #aaa; }
    .loading-btn[disabled] span {
      text-shadow: #aaa 0 0 5px; }
    .loading-btn[disabled]:before {
      opacity: 1; }

.title {
  background: url(../img/bg-start.png) 50% 50%/cover no-repeat #fff; }
  @media only screen and (max-width: 740px) {
    .title {
      background: url(../img/bg-start_sp.png) 50% 50%/cover no-repeat #fff; } }

.title-box {
  text-align: center; }

.title-txt img {
  width: 560px; }
  @media only screen and (max-width: 740px) {
    .title-txt img {
      width: 80%; } }

.title-btn {
  margin-top: 30px; }
  @media only screen and (max-width: 740px) {
    .title-btn {
      margin-top: 10px; } }
  .title-btn img {
    width: 486px;
    border-radius: 100px; }
    @media only screen and (max-width: 740px) {
      .title-btn img {
        width: 75%; } }

.select {
  background: url(../img/bg-select.png) 50% 50%/cover no-repeat #fff; }
  @media only screen and (max-width: 740px) {
    .select {
      background: url(../img/bg-select_sp.png) 50% 50%/cover no-repeat #fff; } }

.select-logo {
  position: absolute;
  top: 20px;
  left: 30px; }
  @media only screen and (max-width: 740px) {
    .select-logo {
      top: 6.6666666667vw;
      left: 2.6666666667vw; } }
  .select-logo img {
    width: 213px; }
    @media only screen and (max-width: 740px) {
      .select-logo img {
        width: 29.3333333333vw; } }

.select-howto-btn {
  position: absolute;
  top: 20px;
  right: 20px; }
  @media only screen and (max-width: 740px) {
    .select-howto-btn {
      top: 4vw;
      right: 4vw; } }
  .select-howto-btn img {
    width: 140px;
    border-radius: 100%; }
    @media only screen and (max-width: 740px) {
      .select-howto-btn img {
        width: 20.2666666667vw; } }

.select-inr {
  text-align: center;
  margin-bottom: 160px; }
  @media only screen and (max-width: 740px) {
    .select-inr {
      margin-bottom: 100px; } }

.select-shindan-btn {
  margin-bottom: 50px; }
  @media only screen and (max-width: 740px) {
    .select-shindan-btn {
      margin-bottom: 25px; } }
  .select-shindan-btn img {
    width: 638px;
    border-radius: 100px; }
    @media only screen and (max-width: 740px) {
      .select-shindan-btn img {
        width: 85.3333333333vw; } }

.select-profile-btn {
  display: block; }
  .select-profile-btn img {
    width: 530px;
    border-radius: 100px; }
    @media only screen and (max-width: 740px) {
      .select-profile-btn img {
        width: 72vw; } }

.howto {
  background: rgba(0, 0, 0, 0.8); }

.howto-inr {
  width: 1140px;
  height: 700px;
  position: relative; }
  @media only screen and (max-width: 740px) {
    .howto-inr {
      width: 90%;
      height: auto; } }

.howto-close-btn {
  position: absolute;
  top: 0;
  right: 0; }
  .howto-close-btn img {
    width: 88px; }
    @media only screen and (max-width: 740px) {
      .howto-close-btn img {
        width: 16vw; } }

.shindan {
  background: url(../img/bg-q.png) 50% 50%/cover no-repeat #fff; }
  @media only screen and (max-width: 740px) {
    .shindan {
      background: url(../img/bg_sp.png) 50% 50%/cover no-repeat #fff; } }

.shindan-body {
  margin-top: 20px; }
  @media only screen and (max-width: 740px) {
    .shindan-body {
      background: url(../img/bg-q_sp.png) 50% 50%/contain no-repeat;
      width: 89.0666666667vw;
      aspect-ratio: 334/608;
      filter: drop-shadow(1.0666666667vw 1.0666666667vw 0.8vw rgba(0, 0, 0, 0.5));
      padding: 13.3333333333vw 6.6666666667vw; } }
  .shindan-body:not(:last-child) {
    display: none; }

.shindan-txt {
  font-size: 32px;
  font-size: 2rem;
  font-weight: 600;
  text-align: center; }
  @media only screen and (max-width: 740px) {
    .shindan-txt {
      font-size: 4.2666666667vw; } }

.shindan-img {
  text-align: center;
  margin-top: 20px; }
  .shindan-img img {
    width: 500px; }

.shindan-btns {
  margin-top: 40px;
  display: flex;
  gap: 20px; }
  @media only screen and (max-width: 740px) {
    .shindan-btns {
      flex-direction: column;
      gap: 8vw; } }

.shindan-btn,
.shindan-result-btn {
  width: 500px;
  height: 72px;
  border-radius: 100px;
  background: url(../img/btn-q.png) 50% 50%/contain no-repeat;
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 600;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.6);
  line-height: 1.2; }
  @media only screen and (max-width: 740px) {
    .shindan-btn,
    .shindan-result-btn {
      background: url(../img/btn-q_sp.png) 50% 50%/contain no-repeat;
      width: 100%;
      height: auto;
      aspect-ratio: 250/60;
      font-size: 4.2666666667vw;
      box-shadow: none;
      filter: drop-shadow(0 0.8vw 1.3333333333vw rgba(0, 0, 0, 0.5)); } }

.result {
  background: #fff; }
  @media only screen and (max-width: 740px) {
    .result {
      background: url(../img/bg_sp.png) 50% 50%/cover no-repeat #fff; } }

.result-detail {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  @media only screen and (max-width: 740px) {
    .result-detail {
      padding-inline: 2.6666666667vw; } }
  .result-detail picture {
    width: 100%;
    height: 100%; }
    .result-detail picture img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
      @media only screen and (max-width: 740px) {
        .result-detail picture img {
          object-fit: contain; } }

.result-btn,
.result-back-btn {
  width: 180px;
  height: 66px;
  border-radius: 100px;
  background: url(../img/btn-q.png) 50% 50%/100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.6);
  position: absolute;
  right: 50px;
  bottom: 30px; }
  @media only screen and (max-width: 740px) {
    .result-btn,
    .result-back-btn {
      width: 34.6666666667vw;
      height: 10.6666666667vw;
      right: 5.3333333333vw;
      bottom: 5.3333333333vw; } }
  .result-btn .-baloon,
  .result-back-btn .-baloon {
    width: 103px;
    position: absolute;
    top: -25px;
    left: 15px; }
    @media only screen and (max-width: 740px) {
      .result-btn .-baloon,
      .result-back-btn .-baloon {
        width: 17.6vw;
        top: -3.2vw;
        left: 2.4vw; } }
  .result-btn .-txt,
  .result-back-btn .-txt {
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2; }
    @media only screen and (max-width: 740px) {
      .result-btn .-txt,
      .result-back-btn .-txt {
        font-size: 4.8vw; } }
    .result-btn .-txt i,
    .result-back-btn .-txt i {
      font-style: normal;
      font-size: 16px;
      font-size: 1rem; }

.result-btn {
  width: 300px;
  height: 80px; }
  @media only screen and (max-width: 740px) {
    .result-btn {
      width: 42.6666666667vw;
      height: 13.3333333333vw; } }
  .result-btn .-txt {
    font-size: 38px;
    font-size: 2.375rem; }
    @media only screen and (max-width: 740px) {
      .result-btn .-txt {
        font-size: 5.8666666667vw; } }

/*# sourceMappingURL=index.css.map */