/* ==========================================================================
  UPDATE
========================================================================== */
/* list */
@media all and (min-width: 768px), print {
  .c-list.--list-circle li + li{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
}
@media all and (max-width: 767px), print {
  .c-list.--list-circle li + li{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .c-list.--list-size-xs > li > .c-list__text{
    font-size: calc(12 / var(--font-size) * 1rem)!important;
  }
}

@media all and (max-width: 767px), print {
  .c-form-component__select {
    padding-block: calc(3 / var(--font-size) * 1rem);
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
    width: 100%;
    border: none;
    border-radius: calc(5 / var(--font-size) * 1rem);
  }
}

/* ==========================================================================
  COMPONENT
========================================================================== */
@media all and (min-width: 768px), print {
  .category-list {
    display: flex;
    gap: 0 calc(10 / var(--font-size) * 1rem);
  }
  .category-item {
    width: calc(163 / var(--font-size) * 1rem);
    padding-block: calc(5 / var(--font-size) * 1rem);
    background-color: var(--main-color);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .category-item__text {
    line-height: calc(16 / var(--font-size) * 1rem);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.015em;
    display: block;
    color: var(--color-white);
  }
}
@media all and (max-width: 767px), print {
  .category-list {
    display: flex;
    gap: 0 calc(10 / var(--font-size) * 1rem);
  }
  .category-item {
    width: calc(163 / var(--font-size) * 1rem);
    padding-block: calc(5 / var(--font-size) * 1rem);
    background-color: var(--main-color);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .category-item__text {
    line-height: calc(16 / var(--font-size) * 1rem);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.015em;
    display: block;
    color: var(--color-white);
  }
}

/* ==========================================================================
  MODIFIER
========================================================================== */
/* input width */
@media all and (min-width: 768px), print {
  .--input-default-size{
    width: calc(407 / var(--font-size) * 1rem) !important;
    max-width: 100%;
  }
}
@media all and (max-width: 767px), print {
  .--input-default-size{
    width:100%;
  }
}

/* form max width */
@media all and (min-width: 768px), print {
  .c-form--max-width .c-form__row{
    max-width: calc(927 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }
  .c-form--max-width .c-form__row__inner{
    padding-left: calc(200 / var(--font-size) * 1rem);
    padding-right: calc(200 / var(--font-size) * 1rem);
  }
  .c-form--max-width .c-form__row__title{
    width: calc(120 / var(--font-size) * 1rem);
  }
  .c-form--max-width .c-form__row__cell{
    flex-grow: 1;
  }
  .c-form--max-width .c-form__row__cell__inner{
    width: 100%;
  }
}

/* ==========================================================================
  FORM
========================================================================== */
@media all and (min-width: 768px), print {
  .form_container{
  }
}
@media all and (max-width: 767px), print {
  .form_container{
  }
}

/* ==========================================================================
  RESULT
========================================================================== */
@media all and (min-width: 768px), print {
  .result-area{
    margin-top: 5rem;
  }

  /* 見出し */
  .result-area-heading {
    text-align: center;
    color: #333333;
    font-size: calc(34 / var(--font-size) * 1rem);
    letter-spacing: calc(70 / 1000 * 1em);
  }
  .result-area-heading__label {
  }

  /* テーブル */
  .result-area__graph {
    max-width: calc(640 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  /* 0件 */
  .result-empty {
    padding-top: calc(20 / var(--font-size) * 1rem);
    padding-bottom: calc(100 / var(--font-size) * 1rem);
  }
  .result-empty__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .result-empty__ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(62 / var(--font-size) * 1rem);
    height: calc(62 / var(--font-size) * 1rem);
    border-radius: calc(62 / var(--font-size) * 1rem);
    background: var(--color-gray_100);
  }
  .result-empty__ico svg {
    width: calc(24 / var(--font-size) * 1rem);
    height: calc(24 / var(--font-size) * 1rem);
    fill: var(--color-gray_400);
  }
  .result-empty__text {
    margin-top: calc(20 / var(--font-size) * 1rem);
    text-align: center;
    line-height: 1.8;
    font-size: calc(16 / var(--font-size) * 1rem);
    color: var(--color-gray_600);
  }
  .result-empty__text:first-child {
    margin-top: 0;
  }
  .result-empty__text em {
    font-size: calc(20 / 16 * 100%);
    font-weight: bold;
    color: var(--color-gray_600);
  }
}
@media all and (max-width: 767px), print {
  .result-area{
    margin-top: 4rem;
  }

  /* 見出し */
  .result-area-heading {
    text-align: center;
    color: #333333;
    font-size: calc(24 / var(--font-size) * 1rem);
    letter-spacing: calc(70 / 1000 * 1em);
  }
  .result-area-heading__label {
  }

  /* テーブル */
  .result-area__graph {
  }

  /* 0件 */
  .result-empty {
    padding-top: calc(20 / var(--font-size) * 1rem);
    padding-bottom: calc(0 / var(--font-size) * 1rem);
  }
  .result-empty__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .result-empty__ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(62 / var(--font-size) * 1rem);
    height: calc(62 / var(--font-size) * 1rem);
    border-radius: calc(62 / var(--font-size) * 1rem);
    background: var(--color-gray_100);
  }
  .result-empty__ico svg {
    width: calc(24 / var(--font-size) * 1rem);
    height: calc(24 / var(--font-size) * 1rem);
    fill: var(--color-gray_400);
  }
  .result-empty__text {
    margin-top: calc(14 / var(--font-size) * 1rem);
    text-align: center;
    line-height: 1.8;
    font-size: calc(16 / var(--font-size) * 1rem);
    color: var(--color-gray_600);
  }
  .result-empty__text:first-child {
    margin-top: 0;
  }
  .result-empty__text em {
    /* font-size: calc(20 / 16 * 100%); */
    font-weight: bold;
    color: var(--color-gray_600);
  }
}