@charset "UTF-8";

/*------------------------------------
MOPM
styles for form
added 2024/05
--------------------------------------*/

/* =============================================
  Custom Properties
============================================= */
:root {
  /* logo colors */
  --logo-gmo-blue: #005bac;
  --logo-gmo-gray: #5a5858;
  --logo-zcom-red: #d62825;

  /* Qplus colors */
  --qplus-orange1: #fdb33e;
  --qplus-orange2: #ff8a00;
  --qplus-green1: #f1f9f9;
  --qplus-green2: #e5f3f3;
  --qplus-green3: #6cd4d3;
  --qplus-green4: #48b9b7;
  --qplus-green5: #35b1bc;
  --qplus-green6: #218888;
  --qplus-green7: #344845;
  --qplus-green8: #d5e0e0;
  --qplus-green9: #839799;

  /* common colors */
  --common-black1: #222222;
  --common-gray1: #333333;
  --common-gray2: #555555;  /* 85, 85, 85 */
  --common-gray3: #888888;
  --common-gray4: #dddddd;

  /* common variables */
  --variables-spacing1: 0.02em;
  --variables-spacing2: 0.04em;
  --variables-transition1: 0.3s;
  --variables-transition2: 0.5s;

  /* form variables */
  --form-contents1: 820px;
  --form-contents2: 612px;
  --form-contents3: 360px;
  --form-disabled1: #babdc8;
  --form-disabled2: #949497;
  --form-disabled3: #f1f1f4;
  --form-support: #5a696f;
  --form-error1: #fdeded;
  --form-error2: #c32d39;
  --form-success1: #f1fce9;
  --form-success2: #347219;
  --form-notice1: #f0f5ff;
  --form-notice2: #0069cc;
  --form-theme1: #f7f9fa;
}

/* ===============================================
  Font Setting
  Noto Sans: 400 (normal) / 700 (bold)
=============================================== */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSansJP-Regular.woff) format("woff");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NotoSansJP-Bold.woff) format("woff");
}


/* ===============================================
  Form: Reset
  override for style2.css
=============================================== */
input[type=text], textarea {
  font-size: 1.6rem !important;
}

input:focus,
textarea:focus {
  outline: auto;
  border: 2px solid transparent !important;
}


/* ===============================================
  Form: Base layout
=============================================== */
.form-contents {
  padding: 0 1.6rem;

  strong {
    font-weight: 700;
  }

  a {
    color: var(--common-pink3);

    /* &:hover {
      color: var(--qplus-green4);
    } */
  }
}


/* ===============================================
  Form: Common styles
=============================================== */
/* ---------------------------
  keyframes setting
--------------------------- */
@keyframes fadeMsg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ---------------------------
  contents
--------------------------- */
.form-contents {
  max-width: var(--form-contents1);
  margin: 3.2rem auto 8rem auto;
  padding: 3.2rem 2.4rem 4.8rem 2.4rem;
  background-color: #ffffff;
  border-top: 8px solid var(--qplus-green5);
  border-bottom: 8px solid var(--qplus-green5);
  border-radius: 10px;
  box-shadow: 0px 3px 2px rgba(85, 85, 85, 0.4);
  text-align: center;
}

@media screen and (max-width: 425px) {
  .form-contents {
    margin-bottom: 6.4rem;
    padding: 2.4rem 1.6rem;
  }
}

.form-contents__inner {
  max-width: var(--form-contents2);
  margin: 0 auto;
}

/* ---------------------------
  main title
--------------------------- */
.form-contents__maintitle {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--common-gray1);
}

/* ---------------------------
  text link
--------------------------- */
.form-link__txt {
  a {
    text-decoration: none;
    border-bottom: 1px solid var(--common-pink3);
    transition: var(--variables-transition1);

    &:hover {
      border-color: transparent;
    }
  }
}

/* ---------------------------
  icon
--------------------------- */
.form-icon {
  display: block;
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--common-gray2);
    mask-size: 100% auto;
  }
}

.form-icon__static {
  display: block;

  &::before {
    content: "";
    display: inline-block;
    background-color: var(--common-gray2);
    mask-size: 100% auto;
  }
}

/* help
--------------------------- */
.form-icon__help {
  --icon-w: 20px;
  --icon-h: 20px;

  &::before {
    width: var(--icon-w);
    height: var(--icon-h);
    mask-image: url(/theme/IQ/static/IQ/images/form/icon_help.svg);
  }
}

/* sendmail
--------------------------- */
.form-icon__sendmail {
  --icon-w: 24px;
  --icon-h: 11px;

  &::before {
    width: var(--icon-w);
    height: var(--icon-h);
    mask-image: url(/theme/IQ/static/IQ/images/form/icon_sendmail.svg);
  }
}

/* notice
--------------------------- */
.form-icon__notice {
  --icon-w: 15px;
  --icon-h: 15px;

  &::before {
    width: var(--icon-w);
    height: var(--icon-h);
    mask-image: url(/theme/IQ/static/IQ/images/form/icon_notice.svg);
  }
}

/* success
--------------------------- */
.form-icon__success {
  --icon-w: 15px;
  --icon-h: 15px;

  &::before {
    width: var(--icon-w);
    height: var(--icon-h);
    mask-image: url(/theme/IQ/static/IQ/images/form/icon_success.svg);
  }
}

/* error
--------------------------- */
.form-icon__error {
  --icon-w: 15px;
  --icon-h: 15px;

  &::before {
    width: var(--icon-w);
    height: var(--icon-h);
    mask-image: url(/theme/IQ/static/IQ/images/form/icon_error.svg);
  }
}

/* warning
--------------------------- */
.form-icon__warning {
  --icon-w: 15px;
  --icon-h: 15px;

  &::before {
    width: var(--icon-w);
    height: var(--icon-h);
    mask-image: url(/theme/IQ/static/IQ/images/form/icon_warning.svg);
  }
}

/* chevron
--------------------------- */
.form-icon__chevron-top,
.form-icon__chevron-bottom,
.form-icon__chevron-left,
.form-icon__chevron-right {
  --icon-w: 10px;
  --icon-h: 6px;

  &::before {
    width: var(--icon-w);
    height: var(--icon-h);
    mask-image: url(/theme/IQ/static/IQ/images/form/icon_chevron.svg);
  }
}

/* top */
.form-icon__chevron-top {
  &::before {
    transform: translateY(50%);
    rotate: 180deg;
  }
}

/* left */
.form-icon__chevron-left {
  &::before {
    transform: translateX(-50%) translateY(-50%);
    rotate: 90deg;
    left: calc(var(--icon-w) / -2);
    top: calc((var(--icon-h) / 2) + 50%);
  }
}

/* right */
.form-icon__chevron-right {
  &::before {
    transform: translateX(50%) translateY(-50%);
    rotate: -90deg;
    left: 1px;
    top: calc((var(--icon-h) / 2) + 50%);
  }
}


/* ---------------------------
  list
--------------------------- */
/* dot
--------------------------- */
.form-list__dot {
  --marker: 1.4em;

  li {
    position: relative;
    padding-left: var(--marker);

    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0.6em;
      top: 0.65em;
      width: 0.2em;
      height: 0.2em;
      border-radius: 100%;
      background-color: var(--form-support);
    }
  }
}

/* ---------------------------
  title / label
--------------------------- */
.form-item__title {
  display: block;

  strong {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

/* error */
.is-error {
  .form-item__title {
    color: var(--form-error2);
  }
}

/* ---------------------------
  required
--------------------------- */
.form-required {
  color: var(--form-error2);
  font-size: 1.4em;
}

/* ---------------------------
  text
--------------------------- */
/* caption
--------------------------- */
.form-item__caption {
  margin-top: 0.2rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* error message
--------------------------- */
.form-item__error {
  margin-top: 0.8rem;
  color: var(--form-error2);
  font-size: 1.4rem;

  .form-link__txt {
    a {
      color: var(--qplus-green6);
      border-color: var(--qplus-green6);

      &:hover {
        border-color: transparent;
      }
    }
  }
}

/* ---------------------------
  input
--------------------------- */
/* text
--------------------------- */
.form-item__input-text {
  width: 100%;
  border: 1px solid #999999;
  border-radius: 8px;
  margin-top: 0.8rem;
  padding: 1.6rem;
  font-size: 1.6rem;

  &:focus,
  &:focus-visible {
    outline: var(--qplus-green3) auto;
    border-color: transparent;
    padding: calc(1.6rem - 1px);
  }
}

/* error */
.is-error {
  .form-item__input-text {
    border-width: 2px;
    border-color: var(--form-error2);
    padding: 1.6rem;
  }
}

/* disabled */
/* .is-disabled {
  .form-item__input-text {
    background-color: var(--form-disabled3);
    border-color: var(--form-disabled2);

    &:focus,
    &:focus-visible {
      outline: none;
    }
  }
} */

/* select
--------------------------- */
.form-item__select {
  width: 100%;
  border: 1px solid #999999;
  border-radius: 8px;
  margin-top: 0.8rem;
  padding: 1.6rem;
  font-size: 1.6rem;
  cursor: pointer;

  &:focus,
  &:focus-visible {
    outline: var(--qplus-green3) auto;
    border-color: transparent;
  }
}

@media screen and (max-width: 425px) {
  .form-item__select {
    padding: 3vw;
  }
}

/* error */
.is-error {
  .form-item__select {
    border-width: 2px;
    border-color: var(--form-error2);
  }
}

/* disabled */
/* .is-disabled {
  .form-item__select {
    background-color: var(--form-disabled3);
    border-color: var(--form-disabled2);

    &:focus,
    &:focus-visible {
      outline: none;
    }
  }
} */

/* ---------------------------
  button
--------------------------- */
/* submit
--------------------------- */
.form-item__btn-submit {
  cursor: pointer;
  transition: var(--variables-transition1);
  border: none;
  text-decoration: none;

  &:focus,
  &:focus-visible {
    outline: -webkit-focus-ring-color auto;
  }

  .form-icon {
    letter-spacing: var(--variables-spacing1);

    &::before {
      transition: var(--variables-transition1);
    }
  }

  &.btnRed {
    border-radius: 100vh;
  }

  &.btnArrow-R {
    text-indent: 0.8em;

    &::after {
      margin-left: 0.8em;
    }
  }
}

/* disabled */
/* .is-disabled {
  .form-item__btn-submit {
    cursor: auto;

    &:focus,
    &:focus-visible {
      outline: none;
    }
  }

  .btnRed {
    opacity: 0.3;

    &:hover {
      box-shadow: none;
      transform: translateY(0);
    }
  }
} */

/* default
--------------------------- */
.form-item__btn-default {
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid var(--common-gray2);
  border-radius: 100vh;
  padding: 1.2rem 3.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--common-gray2);
  cursor: pointer;
  transition: var(--variables-transition2);
  text-decoration: none;

  &:focus,
  &:focus-visible {
    outline: -webkit-focus-ring-color auto;
  }

  &:hover {
    background-color: var(--qplus-green2);
    border-color: var(--qplus-green6);
    color: var(--qplus-green6);

    .form-icon {
      &::before {
        background-color: var(--qplus-green6);
        transition: var(--variables-transition2);
      }
    }
  }
}

/* disabled */
/* .is-disabled {
  .form-item__btn-default {
    background-color: #ffffff;
    border-color: var(--form-disabled1);
    color: var(--form-disabled1);
    cursor: auto;

    &:focus,
    &:focus-visible {
      outline: none;
    }

    .form-icon {
      &::before {
        background-color: var(--form-disabled1);
      }
    }
  }
} */

/* ---------------------------
  error message
--------------------------- */
.form-error {
  margin-top: 0.8rem;
}

.form-error__txt {
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--form-error2);
}

@media screen and (max-width: 425px) {
  .form-error__txt {
    font-size: 1.4rem;
  }
}

/* ---------------------------
  input area
--------------------------- */
.form-area {
  margin: 1.6rem auto 2.4rem auto;
  padding: 3.2rem 1.6rem 4rem 1.6rem;
  background-color: var(--form-theme1);
  border-radius: 10px;

  .form-item__input {
    max-width: var(--form-contents3);
    margin: 0 auto;
    text-align: left;

    &:nth-child(n+2) {
      margin-top: 3.2rem;
    }
  }

  .form-item__title {
    font-size: 1.6rem;
    line-height: 1.5;
    display: flex;

    .form-required {
      padding-left: 0.8rem;
      line-height: 1;
    }
  }

  .form-item__btn {
    margin-top: 4rem;
  }

  .form-item__btn-submit {
    min-width: auto;
    width: 188px;
    max-width: 100%;
  }
}

/* ---------------------------
  notes
--------------------------- */
.form-notes {
  text-align: left;

  .form-list__dot {
    li {
      font-size: 1.4rem;
      line-height: 1.5;
      color: var(--form-support);

      &:nth-child(n+2) {
        margin-top: 0.4rem;
      }
    }
  }
}

@media screen and (max-width: 425px) {
  .form-notes {
    .form-list__dot {
      li {
        font-size: 1.2rem;
      }
    }
  }
}

/* ---------------------------
  message
--------------------------- */
.form-message {
  margin: 2.4rem 0;
}

.form-message__txt {
  padding: 1rem 1.6rem;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: var(--variables-transition2);
  animation: fadeMsg 1s;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--common-black1);

  --icon-w: 15px;

  .form-icon {
    padding-left: calc(var(--icon-w) + 0.8em);

    &::before {
      top: 0.4em;
      transform: translateY(0);
    }
  }
}

@media screen and (max-width: 425px) {
  .form-message__txt {
    font-size: 1.4rem;
    line-height: 1.5;

    .form-icon {
      &::before {
        top: 0.2em;
      }
    }
  }
}

/* message in contents */
.form-contents {
  .form-message__txt {
    max-width: var(--form-contents2);
    margin: 0 auto;
  }
}

/* notice */
.is-notice.form-message__txt {
  background-color: var(--form-notice1);
  border-color: var(--form-notice2);

  .form-icon__notice {
    &::before {
      background-color: var(--form-notice2);
    }
  }
}

/* success */
.is-success.form-message__txt {
  background-color: var(--form-success1);
  border-color: var(--form-success2);

  .form-icon__success {
    &::before {
      background-color: var(--form-success2);
    }
  }
}

/* error */
.is-error.form-message__txt {
  background-color: var(--form-error1);
  border-color: var(--form-error2);

  .form-icon__error {
    &::before {
      background-color: var(--form-error2);
    }
  }
}


/* ===============================================
  Form: Accordion
=============================================== */
.form-accordion {
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}

/* title
--------------------------- */
.form-accordion__title {
  display: block;
  list-style: none;
  width: 100%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  text-align: left;
  transition: var(--variables-transition2);

  &::-webkit-details-marker {
    display: none;
  }

  &:focus,
  &:focus-visible {
    background-color: var(--qplus-green3);
  }

  .form-icon {
    display: inline-block;
    margin-left: calc(var(--icon-w) + 1.2rem);
    border-bottom: 1px solid var(--qplus-green6);
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--qplus-green6);
    transition: var(--variables-transition1);

    &::before {
      left: calc((var(--icon-w) + 1.2rem) * -1);
      background-color: var(--qplus-green6);
      transition: var(--variables-transition1);
    }
  }

  &:hover {
    .form-icon {
      border-color: transparent;
      color: var(--qplus-green6);

      &::before {
        background-color: var(--qplus-green6);
      }
    }
  }
}

/* detail
--------------------------- */
.form-accordion__detail {
  background-color: #ffffff;
  overflow: hidden;
  transition: var(--variables-transition2);
  opacity: 0;
}

.form-accordion__inner {
  padding: 1.6rem 2.4rem 2.4rem 2.4rem;
}

.form-accordion__heading {
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--common-gray2);

  .form-icon__static {
    &::before {
      display: block;
      margin: 0 auto;
    }
  }
}

.form-accordion__reasons {
  display: table;
  margin: 0 auto;

  li {
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: left;

    &:nth-child(n+2) {
      margin-top: 0.4rem;
    }
  }
}

.form-accordion__link {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.5;

  &.form-link__txt {
    a {
      border-color: var(--zcom-color2);
      color: var(--zcom-color2);

      &:hover {
        border-color: transparent;
      }
    }
  }
}

.form-accordion__warning {
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--common-gray2);
}

/* button
--------------------------- */
.form-accordion {
  .form-item__btn {
    margin-top: 2.4rem;
  }
}

.form-accordion__btn {
  padding-top: 1.6rem;
  border-top: 1px solid var(--common-gray4);

  .form-item__btn-default {
    padding: 0.6rem 1.6rem;
    font-size: 1.4rem;
  }

  .form-icon {
    padding-left: calc(var(--icon-w) + 0.8rem);
  }
}

/* open
--------------------------- */
.form-accordion.is-open {
  .form-accordion__title {
    background-color: var(--qplus-green3);

    .form-icon {
      color: var(--qplus-green7);

      &::before {
        transform: translateY(-50%) rotate(180deg);
        background-color: var(--qplus-green7);
      }
    }
  }

  .form-accordion__detail {
    opacity: 1;
  }
}