@import "./components/modal.css";
@import "./components/member-card.css";
@import "./components/check.css";
@import "./components/accordion.css";
@import "./components/edit-modal.css";
@import "./components/wallpaper-modal.css";
@import "./components/sms-modal.css";
@import "./components/terms.css";

.top {
  margin: 60px auto 42px;
  position: relative;
}
.avatar-wrapper {
  img {
    width: 185px;
    height: 185px;
    margin-bottom: 26px;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
}
.right-buttons {
  position: absolute;
  top: -10px;
  right: 28px;
  button {
    margin-bottom: 10px;
  }
  button,
  a {
    width: 136px;
    --button-radius-px: 30px;
    height: 80px;
  }
}
.bg-present {
  display: flex;
  line-height: 1.8rem;
  flex-direction: column;
  justify-content: center;
  padding: 0 51px 0 43px;
  margin-top: 34px;
  background-image: url("../img/bg-present.png");
  border-radius: 68px;
  width: 702px;
  height: 281px;
  box-shadow: var(--box-shadow) var(--shadow-black);
  font-style: italic;
  .box-top {
    text-shadow: 0px 2px 3px rgba(97, 97, 97, 0.39);
    align-items: center;
    .left {
      font-size: 55px;
      margin: 0 45px 0 31px;
    }
    .right {
      font-size: 27px;
    }
  }
  .text-middle {
    font-size: 21px;
    margin: 12px 0 20px;
    text-shadow: 0px 2px 3px rgba(97, 97, 97, 0.39);
  }
}
.button-bottom {
  a {
    text-align: left;
    justify-content: space-between;
    padding: 0 26px 0 37px;
    font-style: normal;
    border-radius: 48px;
    width: 287px;
    height: 97px;
    &:first-child {
      margin-right: 17px;
    }
    img {
      position: absolute;
      right: 32px;
    }
  }
}
.form-section {
  position: relative;
  border-radius: 45px;
  background: linear-gradient(-45deg, var(--white-gradient));
  box-shadow: var(--box-shadow) var(--shadow-black);
  width: 710px;
  margin-bottom: 28px;
  &.p-l {
    padding: 44px 72px 77px;
  }
  &.p-m {
    padding: 44px 37px 67px;
  }
  &.p-s {
    padding: 37px 37px 32px;
  }
  --range-height: 20px;
  --range-width: 250px;
  &::before {
    filter: drop-shadow(var(--drop-shadow) var(--shadow-black));
    content: "";
    position: absolute;
  }
  &.person::before {
    background-image: url("../img/icon-person-purple.png");
    left: 9px;
    top: -9px;
    background-size: 53px 68px;
    width: 53px;
    height: 68px;
  }
  &.jpn::before {
    background-image: url("../img/icon-jpn-purple.png");
    left: -5px;
    top: -5px;
    background-size: 77px 85px;
    width: 77px;
    height: 85px;
  }
  &.woman::before {
    background-image: url("../img/icon-woman-ai-purple.png");
    left: 7px;
    top: -5px;
    background-size: 104px 66px;
    width: 104px;
    height: 66px;
  }
  h4 {
    font-size: 27px;
    margin-bottom: 18px;
    text-align: center;
    button {
      position: absolute;
      border: none;
      background-color: transparent;
      top: 40px;
      right: 37px;
      img {
        filter: drop-shadow(var(--drop-shadow) var(--shadow-black));
      }
    }
  }
  &.p-s h4 button {
    top: 33px;
  }
  label:not(.check) {
    display: block;
    &.required::after {
      content: "※";
      margin-left: 1rem;
    }
  }
  .d-grid-inline-btn {
    display: grid;
    grid-template-columns: 1fr 150px;
    column-gap: 20px;
  }
  .select-wrapper select {
    width: 100%;
  }
  .item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.medium {
      width: 276px;
    }
    .check-static::before,
    .check::before {
      margin-right: 24px;
    }
    &.d-grid-3 {
      display: grid;
      column-gap: 10px;
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    position: relative;
    &::before {
      position: absolute;
      width: 39px;
      height: 45px;
      background-image: url("../img/icon-info.png");
      background-size: 39px 45px;
      content: "";
      left: 20px;
    }
  }
  .figure-box {
    display: flex;
    width: 570px;
    align-items: center;
    margin: 0 auto 40px;
    justify-content: space-between;
  }
  .sub-label {
    font-weight: normal;
    padding-left: 90px;
    margin-bottom: 48px;
    text-align: center;
  }
  .range-wrapper {
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .bg-scale-mark {
    position: absolute;
    border-radius: 10px;
    width: var(--range-width);
    height: var(--range-height);
    display: flex;
    background-color: var(--color-white);
    span {
      width: calc(var(--range-width) / 5);
      border-right: 1px solid #bccddd;
      position: relative;
      &:last-child {
        border-right: none;
      }
    }
  }
  .range-wrapper:first-of-type .bg-scale-mark {
    span {
      &::before,
      &::after {
        font-size: 16px;
        position: absolute;
        top: -32px;
        left: -8px;
      }
      &:first-child::before {
        content: "⓪";
      }
      &:nth-child(2)::before {
        content: "①";
      }
      &:nth-child(3)::before {
        content: "②";
      }
      &:nth-child(4)::before {
        content: "③";
      }
      &:nth-child(5)::before {
        content: "④";
      }
      &:nth-child(5)::after {
        content: "⑤";
        right: -8px;
        left: auto;
      }
    }
  }
  .item-name {
    margin: 0 auto;
    padding-right: 30px;
  }
  .range-static,
  input[type="range"] {
    position: relative;
    --slider-thumb-right: var(--range-width);
    width: var(--range-width);
    height: var(--range-height);
    -webkit-appearance: none;
    box-shadow: var(--box-shadow) var(--shadow-black);
    appearance: none;
    border-radius: 10px;
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(-90deg, #ff3996 19%, #ffe1a8 100%);
    }
    &.range-static {
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        position: absolute;
        top: 0;
        right: var(--slider-thumb-right);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ff3996;
        border-radius: 50%;
      }
    }
  }
  .item-grid {
    display: grid;
    justify-content: space-between;
    align-items: center;
    &.g-2 {
      grid-template-columns: repeat(2, 300px);
      .check-white-g {
        padding: 0 18px;
      }
    }
    &.g-3 {
      grid-template-columns: repeat(3, 200px);
      &.ws-pre {
        white-space: pre;
      }
      .check-white-g {
        padding: 0 10px;
        text-align: center;
      }
    }
  }
  .brackets-in {
    display: flex;
    font-size: 30px;
    align-items: center;
    input {
      margin-bottom: 0px;
    }
    .input-item {
      margin-bottom: 0;
      margin: 0 10px 0 20px;
      justify-content: center;
    }
    .check-static,
    .check {
      margin: 0 20px;
      &::before {
        margin-right: 20px;
      }
    }
  }
  .static-input-wrapper {
    .item-wrapper {
      padding-left: 20px;
    }
  }
  .label-left {
    width: 256px;
  }
  .middle-h {
    margin: 44px auto 55px;
  }
}