@charset "UTF-8";

.global-contents{
  background-color: #E0F1F4;
}

.global-contents__inner > .c-breadcrumb{
  display: none !important;
}

.form__section--item{
  background-color: var(--color-white);
}

.content__container .balloon-image{
  margin: 1.5rem auto 2rem;
  width: calc(100% - 3rem);
}

.user-question__container{
  padding-inline: 1.5rem;
  display: grid;
  gap: 4rem;
}

.c-form__item--notice{
  margin-top: 0.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  line-height: 1.75;
}

.user-question__heading{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.user-question__heading :where(strong){
  color: #EB604B;
}

.user-question__heading--text{
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.5;
}

.user-question__heading .user-question__heading--index{
  font-size: 2rem;
  line-height: 1;
  color: #EB604B;
}

.user-question__heading--example{
  margin-top: 1rem;
  display: block;
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: #868687;
}

.user-question__container [class*="c-form__input--"]{
  margin-top: 1.5rem;
}

.user-question__container :where(textarea.c-form__input--text){
  height: 11em;
}

.user-question__container .c-form__input--check input{
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 0.2rem;
  border: 1px solid #767676;
}

.checkbox-list{
  display: grid;
  gap: 1rem;
  position: relative;
}

.checkbox-list::before{
  content: '';
  width: 12.4rem;
  height: 10.3rem;
  background-image: url(../../Contents/ThemeImage/uservoice/lp/products_sp.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 10rem;
  right: 1rem;
  z-index: 0;
}

.user-form{
  margin: 6rem auto 0;
  width: calc(100% - 4rem);
  border: 1px solid #EE5648;
  border-radius: 3rem;
  overflow: hidden;
}

.user-form .form__section--heading{
  padding-block: 1.95rem;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  line-height: 1.1875;
  background-color: #EE5648;
  color: var(--color-white);
}

.user-form .form__section--content{
  padding: 3rem 2rem 5rem;
}

.user-form .required,
.user-form .optional{
  margin-left: 1rem;
  padding: 0.4rem 0.8rem;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.03em;
  line-height: 1;
  border-radius: 100vh;
  color: var(--color-white);
}

.user-form .required{
  background-color: #FF0301;
}

.user-form .optional{
  background-color: #0600FF;
}

.privacy-and-terms{
  margin: 6rem auto;
  width: calc(100% - 3rem);
}

.privacy-and-terms__heading{
  font-size: 1.6rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
}

.terms-check{
  margin: 3rem auto 1.5rem;
  justify-content: center;
}

.terms-check:has(input:disabled){
  opacity: 0.5;
  pointer-events: none;
}

.terms-check :where(label){
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  line-height: 1.3125;
}

.privacy-and-terms .c-button{
  padding-block: 1.35rem;
  margin-inline: auto;
  width: 88.1542%;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  line-height: 1;
  border-radius: 0;
}

.privacy-and-terms .c-button.disabled{
  background-color: #A7ACAD;
  border-color: #A7ACAD;
  pointer-events: none;
}

.terms-content__list{
  margin-top: 1.5rem;
  display: grid;
  gap: 3rem;
}

.terms-content__item{
  padding: 2.45rem 2rem;
  width: 100%;
  display: block;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  line-height: 1;
  background-color: #FFDDDD;
  border-radius: 0.5rem;
  color: #0A3066;
}

.c-accordion:has(.terms-content__item){
  background-color: #FFDDDD;
  border-radius: 0.5rem;
}

.c-accordion .terms-content__item{
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.414%22%20height%3D%228.206%22%20viewBox%3D%220%200%2012.414%208.206%22%3E%20%3Cpath%20d%3D%22M10.293%2C11.76l4.208%2C4.2%2C4.208-4.2L20%2C13.052l-5.5%2C5.5L9%2C13.052Z%22%20transform%3D%22translate(-8.293%20-11.053)%22%20fill%3D%22%23ee5648%22%20stroke%3D%22%23ee5648%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 1.1rem 0.8rem;
  background-position: center right 2rem;
}

.terms-content__link{
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228.206%22%20height%3D%2212.414%22%20viewBox%3D%220%200%208.206%2012.414%22%3E%20%3Cpath%20d%3D%22M10.293%2C11.76l4.208%2C4.2%2C4.208-4.2L20%2C13.052l-5.5%2C5.5L9%2C13.052Z%22%20transform%3D%22translate(-11.053%2020.707)%20rotate(-90)%22%20fill%3D%22%23ee5648%22%20stroke%3D%22%23ee5648%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 0.8rem 1.1rem;
  background-position: center right 2rem;
}

.c-accordion:has(.terms-content__item) .c-accordion__content{
  padding: 0 2rem 2rem;
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: #0A3066;
}

.c-accordion:has(.terms-content__item) .c-accordion__content :where(dl){
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.c-accordion:has(.terms-content__item) .c-accordion__content :where(dl:nth-of-type(n+2)){
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .global-contents__inner{
    width: min(90%, 88rem);
  }

  .content__container .intro-image{
    margin-inline: auto;
    width: 84.5rem;
  }

  .content__container .balloon-image{
    margin: 4.2rem 0 3.8rem;
    width: 100%;
  }

  .user-question__container{
    padding-inline: 0;
    margin-inline: auto;
    width: min(86rem, 97.7272%);
    gap: 6rem;
  }

  .user-form{
    margin: 8rem auto 0;
    width: 100%;
    gap: 0;
  }

  .user-form .form__section--heading{
    padding-block: 3.7rem;
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .user-form .form__section--content{
    padding: 3rem 4rem 5rem;
    width: 100%;
  }

  .user-form .c-form__item{
    display: grid;
    grid-template-columns: 22% 1fr;
    align-items: baseline;
  }

  .user-form .c-form__item :where(dd){
    margin-top: 0;
  }

  .c-form__item--notice{
    margin-top: 0.4rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .user-question__heading{
    gap: 1rem;
  }

  .user-question__heading .user-question__heading--index{
    font-size: 2.6rem;
  }

  .user-question__heading .user-question__heading--text{
    font-size: 2.5rem;
  }

  .user-question__heading--example{
    margin-top: 1rem;
    font-size: 1.6rem;
  }

  .user-question__container .c-form__input--check input{
    width: 1.5rem;
    height: 1.5rem;
  }

  .user-question__item .c-form__input--check label{
    font-size: 1.7rem;
  }

  .user-question__container :where(textarea.c-form__input--text){
    margin-top: 3rem;
    height: 14em;
  }

  .checkbox-list{
    padding-right: 16.8604%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }

  .checkbox-list::before{
    width: 20.5rem;
    height: 38rem;
    background-image: url(../../Contents/ThemeImage/uservoice/lp/products_pc.png);
    top: -8rem;
    right: -7rem;
  }

  .user-question__item:has(.checkbox-list) .c-form__input--text{
    width: min(76.7441%, 66rem);
  }

  .privacy-and-terms{
    margin: 8rem auto;
    width: min(77.8409%, 68.5rem);
  }

  .terms-content__list{
    margin-top: 1rem;
  }

  .terms-check{
    gap: 0.5rem;
  }

  .terms-check .c-form__input--check input{
    width: 1.8rem;
    height: 1.8rem;
  }

  .terms-check .c-form__input--check label{
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
  }

  .privacy-and-terms .c-button{
    width: 41.6058%;
  }
}