@charset 'utf-8';

html {
  font-size: 62.5%;
}

.enq {
  margin: 0 auto;
}

.enq_block {
  text-align: justify;
  padding: 0 0 0;

  &:first-of-type {
    margin-top: 0;
  }

  .anno {
    margin: 0;
    padding-bottom: 0.5em;
  }
}

.enq_outer {
  padding: 0;
}

.enq_head {
  width: 100%;

  h2 {
  }

  p {
    width: 100%;
    margin: 0;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.enq_body {
  background-image: url(../img/q_bg.jpg);
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center top;
  margin: 0 0 4rem;
  padding: 0 0 2.4rem;
}

.enq_inner {
  background-color: var(--ClrWht);
  margin: 0 2.4rem 0 2.4rem;

  .cmnt {
    font-size: 2.4rem;
    line-height: 1.7;
    text-align: justify;
    padding: .5em 0 .5em 2.5em;
    text-indent: -1.5em;
    margin: 0 0 0 0;
  }

  input {
    display: none;
  }

  .choices {
    width: 100%;

    label {
      cursor: pointer;
      display: flex;
      justify-content: left;
      align-items: center;
      background-color: var(--ClrWht);
      width: 100%;
      padding: 1em .75em 1em .75em;

      > .checkbox,
      > .radiobutton {
        position: relative;
        display: block;
        vertical-align: middle;
        width: 10%;

        svg {
          vertical-align: middle;
          width: 100%;
        }
      }

      > .checkbox {
        svg {
          polygon {
            fill: none;
            stroke: var(--Clr11);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
          }

          polyline {
            fill: none;
            stroke: transparent;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 3.6rem;
            stroke-dashoffset: 3.6rem;
            transition: all .3s ease;
          }
        }
      }

      .radiobutton {
        svg {
          circle {
            &:nth-of-type(1) {
              fill: transparent;
              stroke: var(--Clr11);
              stroke-width: 2;
              transition: all 0.3s ease;
            }

            &:nth-of-type(2) {
              fill: transparent;
              stroke: none;
            }
          }
        }
      }

      > span {
        position: relative;
        display: block;
        text-align: justify;
        font-size: 2.8rem;
        line-height: 1.5;
        letter-spacing: -.01em;
        width: 90%;
        padding: 0 0 0 2rem;

        strong {
          font-weight: 400;
          color: var(--ClrRed);
        }
      }
    }

    input + label + .textarea {
      background-color: var(--ClrWht);
      width: 100%;
      padding: 2rem;

      textarea {
        resize: vertical;
        width: 100%;
        height: 40rem;
        border: solid .2rem var(--ClrBlk);
        border-radius: 1rem;
        font-size: 2.4rem;
        line-height: 1.5;
        padding: 1rem;
      }
    }

    input:checked + label {
      background-color: var(--Clr13);

      > .checkbox {
        svg {
          polygon {
            fill: var(--ClrWht);
            stroke: var(--Clr12);
          }

          polyline {
            stroke: var(--Clr12);
            stroke-dashoffset: 0;
          }
        }
      }

      > .radiobutton {
        svg {
          circle {
            &:nth-of-type(1) {
              fill: var(--ClrWht);
              stroke: var(--Clr12);
            }

            &:nth-of-type(2) {
              fill: var(--Clr12);
            }
          }
        }
      }

      > span {
        color: var(--ClrRed);
        font-weight: 700;
        text-shadow: -.2rem -.2rem 0 var(--ClrWht), -.2rem -.2rem 0 var(--ClrWht),
          -.2rem -.2rem 0 var(--ClrWht), .2rem -.2rem 0 var(--ClrWht),
          .2rem -.2rem 0 var(--ClrWht), .2rem -.2rem 0 var(--ClrWht),
          .2rem .2rem 0 var(--ClrWht), .2rem .2rem 0 var(--ClrWht),
          .2rem .2rem 0 var(--ClrWht), -.2rem .2rem 0 var(--ClrWht),
          -.2rem .2rem 0 var(--ClrWht), -.2rem .2rem 0 var(--ClrWht);

        strong {
          font-weight: 700;
        }
      }
    }
  }

  > .choices {
    &:nth-of-type(2n) {
      label {
        background-color: var(--ClrMlg);
      }
    }

    &:nth-of-type(2n) {
      input:checked + label {
        background-color: var(--Clr13);
      }
    }
  }

/*
  > div {
    &:last-of-type {
      label {
        border-radius: 0 0 1rem 1rem;
      }
    }
  }
*/
}

#question02 {
  .enq_inner {
    > .choices {
      &:nth-of-type(2n+1) {
        label {
          background-color: var(--ClrMlg);
        }
      }

      &:nth-of-type(2n) {
        label {
          background-color: var(--ClrWht);
        }
      }
    }

    .choices {
      input:checked + label {
        background-color: var(--Clr13);
      }

      &:nth-of-type(2n) {
        input:checked + label {
          background-color: var(--Clr13);
        }
      }

      &:nth-of-type(2n+1) {
        input:checked + label {
          background-color: var(--Clr13);
        }
      }
    }
  }
}

.enq_bottom {
  width: 100%;
  padding: 0;
  line-height: 0;
}

@media screen and (max-width: 750px) {
  html {
    font-size: 1.3333333333vw;
  }

  .enq_inner {
    .cmnt {
      font-size: 3.2rem;
    }

    .choices {
      label {
        > span {
          font-size: 3.6rem;
        }
      }
    }

    input + label + .textarea {
      textarea {
        height: 40rem;
        border: solid 0.4rem var(--ClrBlk);
        font-size: 3.6rem;
        padding: 2rem;
      }
    }
  }
}