@charset "UTF-8";

:root {
  --form-border-color: #a0a0a0;
  --form-bg-color: var(--white-color);
  --form-border-disable-color: #ccc;
  --form-bg-disable-color: #ececec;
  --form-txt-disable-color: #afafaf;
  --form-border-error-color: #ff3a5e;
  --form-bg-error-color: #fdf1f3;
}
/* ==========================================================================
  FORM
========================================================================== */
:placeholder-shown {
  color: #999;
}
::-webkit-input-placeholder {
  color: #999;
}
::-moz-placeholder {
  color: #999;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #999;
}
button {
  padding: 0;
  font-size: 16px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input,
textarea,
select {
  font-size: 16px;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {
  display: none;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  -webkit-text-fill-color: #3c3c3c !important;
}
input:-internal-autofill-selected {
  background-color: #fff;
  -webkit-text-fill-color: #3c3c3c;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}
select:-internal-autofill-selected {
  background-color: transparent;
  -webkit-text-fill-color: #3c3c3c;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* --------------------------------------------------------------------------
  レイアウト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .form {
  }
  .form__in {
  }
  .form__body {
  }
  .form__footer {
  }
  .form__block {
  }
  .form__item {
    padding-top: calc(32 / var(--font-size) * 1rem);
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-200);
  }
  .form__item + .form__item{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .form__item:nth-last-of-type(1) {
    padding-bottom: calc(32 / var(--font-size) * 1rem);
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-200);
  }
  .form__sub-item {
  }
  .form__sub-item + .form__sub-item {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }

  .form-row {
    --gap-x: calc(24 / var(--font-size) * 1rem);
    --gap-y: calc(48 / var(--font-size) * 1rem);
    --col-num: 1;

    display: flex;
    gap: var(--gap-x) var(--gap-y);
    flex-wrap: wrap;
  }
  .form-row__col {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc((100% - var(--gap-y) * (var(--col-num) - 1)) / var(--col-num));
  }
  /* コラム数 */
  .form-row__col--2 {
    --col-num: 2;
  }
  .form-row__col--3 {
    --col-num: 3;
  }
  .form-row__col--4 {
    --col-num: 4;
  }
  .form-row__col--5 {
    --col-num: 5;
  }

  /* サイズ */
  .form-row__col--s {
    width: calc(96 / var(--font-size) * 1rem);
  }
  .form-row__col--m {
    width: calc(192 / var(--font-size) * 1rem);
  }
  .form-row__col--l {
    width: calc(288 / var(--font-size) * 1rem);
  }

  /* 生年月日など */
  .form-label {
    display: flex;
    align-items: center;
  }
  .form-label__title {
    width: calc(48 / var(--font-size) * 1rem);
    padding-right: calc(12 / var(--font-size) * 1rem);
    text-align: right;
  }
  .form-label__header {
    width: auto;
    flex-shrink: 0;
    padding-right: calc(12 / var(--font-size) * 1rem);
    text-align: right;
  }
  .form-label__input {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc(100% - (48 / var(--font-size) * 1rem));
  }
  .form-label__unit {
    width: calc(48 / var(--font-size) * 1rem);
    padding-left: calc(12 / var(--font-size) * 1rem);
    text-align: left;
  }
  .form-note-row {
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .form-note-row__in {
    display: flex;
    align-items: center;
  }
  .form-note-row__in--right {
    justify-content: flex-end;
  }

  .form-note-row__note {
    width: calc(272 / var(--font-size) * 1rem);
    margin-top: 0;
  }
  .form-note-row__note--m {
    width: calc(244 / var(--font-size) * 1rem);
  }
  .form-note-row__note--s {
    width: calc(210 / var(--font-size) * 1rem);
  }
  .form-note-row__note--block {
    display: inline-block;
    margin-top: 0;
  }

  /* 日付入力 */
  .form-date-select {
    display: flex;
    align-items: center;
  }
  .form-date-select__input-col {
    display: flex;
    align-items: center;
  }
  .form-date-select__input-col--year {
  }
  .form-date-select__unit {
    margin-left: calc(8 / var(--font-size) * 1rem);
  }
  .form-date-select__input-col + .form-date-select__input-col {
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px) {
  .form {
  }
  .form__in {
  }
  .form__body {
  }
  .form__footer {
  }
  .form__block {
  }
  .form__item {
    padding-top: calc(32 / var(--font-size) * 1rem);
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-200);
  }
  .form__item + .form__item{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .form__item:nth-last-of-type(1) {
    padding-bottom: calc(32 / var(--font-size) * 1rem);
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-200);
  }
  .form__sub-item {
  }
  .form__sub-item + .form__sub-item {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }

  .form-row {
    --gap-x: calc(16 / var(--font-size) * 1rem);
    --gap-y: calc(10 / var(--font-size) * 1rem);
    --col-num: 1;

    display: flex;
    gap: var(--gap-x) var(--gap-y);
  }
  .form-row--wrap {
    flex-wrap: wrap;
  }
  .form-row__col {
    flex-grow: 0;
    flex-shrink: 1;
  }
  .form-row--wrap .form-row__col {
    width: calc((100% - var(--gap-y) * (var(--col-num) - 1)) / var(--col-num));
  }
  /* コラム数 */
  .form-row__col--2 {
    --col-num: 2;
  }
  .form-row__col--3 {
    --col-num: 3;
  }
  .form-row__col--4 {
    --col-num: 4;
  }
  .form-row__col--5 {
    --col-num: 5;
  }

  /* サイズ */
  .form-row__col--s {
    width: calc(96 / var(--font-size) * 1rem);
  }
  .form-row__col--m {
    width: calc(192 / var(--font-size) * 1rem);
  }
  .form-row__col--l {
    width: calc(288 / var(--font-size) * 1rem);
  }

  /* 生年月日など */
  .form-label {
    display: flex;
    align-items: center;
  }
  .form-label__title {
    width: calc(48 / var(--font-size) * 1rem);
    padding-right: calc(12 / var(--font-size) * 1rem);
    text-align: right;
  }
  .form-label__input {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc(100% - (48 / var(--font-size) * 1rem));
  }
  .form-label__unit {
    width: calc(48 / var(--font-size) * 1rem);
    padding-left: calc(12 / var(--font-size) * 1rem);
    text-align: left;
  }
  .form-note-row {
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .form-note-row__in {
    display: flex;
    align-items: center;
  }
  .form-note-row__in--right {
    justify-content: flex-end;
  }

  .form-note-row__note {
    width: calc(272 / var(--font-size) * 1rem);
    margin-top: 0;
  }
  .form-note-row__note--m {
    width: calc(244 / var(--font-size) * 1rem);
  }
  .form-note-row__note--s {
    width: calc(210 / var(--font-size) * 1rem);
  }
  .form-note-row__note--block {
    display: inline-block;
    margin-top: 0;
  }

  /* 日付入力 */
  .form-date-select {
    display: flex;
    align-items: center;
  }
  .form-date-select__input-col {
    display: flex;
    align-items: center;
  }
  .form-date-select__input-col--year {
  }
  .form-date-select__unit {
    margin-left: calc(8 / var(--font-size) * 1rem);
  }
  .form-date-select__input-col + .form-date-select__input-col {
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
}
/* --------------------------------------------------------------------------
  入力画面
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-form {
    --header-width: 272;
    display: flex;
  }
  .c-form--block {
    display: block;
  }
  .c-form--column {
    flex-direction: column;
  }
  .c-form__header {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc(var(--header-width) / var(--font-size) * 1rem);
    margin-top: calc(14 / var(--font-size) * 1rem);
    padding-right: calc(20 / var(--font-size) * 1rem);
  }
  .c-form__header--xl {
    --header-width: 432;
  }
  .c-form__header--l {
    --header-width: 384;
  }
  .c-form__header--m {
    --header-width: 320;
  }
  .c-form__header--s {
    --header-width: 224;
  }
  .c-form__header--xs {
    --header-width: 144;
  }
  .c-form__header--column {
    width: 100%;
    margin-top: 0;
  }
  .c-form__body {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc(100% - var(--header-width) / var(--font-size) * 1rem);
  }
  .c-form__body--column {
    width: 100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .c-form__title {
    position: relative;
    display: inline-block;
    padding: 0 0 0 calc(16 / var(--font-size) * 1rem);
    font-weight: bold;
    font-size: calc(16 / var(--font-size) * 1rem);
    line-height: 1.5;
    vertical-align: middle;
  }
  .c-form__title::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(6 / var(--font-size) * 1rem);
    background-color: var(--primary-color-500);
    content: '';
    border-radius: 9999px;
  }
  .c-form__center {
    width: 100%;
  }
  .c-form__center-in {
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .c-form {
  }
  .c-form--block {
    display: block;
  }
  .c-form--column {
    flex-direction: column;
  }
  .c-form__header {
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .c-form__header--column {
    width: 100%;
    margin-top: 0;
  }
  .c-form__body {
  }
  .c-form__body--column {
    width: 100%;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .c-form__title {
    position: relative;
    display: inline-block;
    padding: 0 0 0 calc(16 / var(--font-size) * 1rem);
    font-weight: bold;
    font-size: calc(16 / var(--font-size) * 1rem);
    line-height: 1.5;
    vertical-align: middle;
  }
  .c-form__title::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(6 / var(--font-size) * 1rem);
    background-color: var(--primary-color-500);
    content: '';
    border-radius: 9999px;
  }
  .c-form__center {
    width: 100%;
  }
  .c-form__center-in {
    display: flex;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
  確認画面
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-form__cf-text {
    margin-top: calc(12 / var(--font-size) * 1rem);
    margin-bottom: calc(11 / var(--font-size) * 1rem);
    font-size: calc(18 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
}
@media screen and (max-width: 767px) {
  .c-form__cf-text {
    font-size: calc(18 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------------------
  エラーメッセージ
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-form--error .c-form__title {
    color: #fc345f;
  }
  .c-form--error .c-form__title::before {
  }
  .c-form__error p,
  .c-form__error-text {
    display: block;
    margin-top: 0.5rem;
    color: #fc345f;
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .c-form__error {
    display: none;
    margin-top: 0.75rem;
  }
  .c-form--error .c-form__error {
    display: block;
  }

  .c-form__error-target--active .c-form__error-label {
    color: #fc345f !important;
  }

  .c-form--error .c-form__center .c-form__error {
    display: block;
    text-align: center;
  }

  .c-top-error-msg {
    margin: 2rem 0;
    padding: 2rem;
    background-color: #ffebeb;
    border-radius: 0.25rem;
  }
  .c-top-error-msg__in {
  }
  .c-top-error-msg p {
    display: block;
    color: #fc345f;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.5;
  }
}
@media screen and (max-width: 767px) {
  .c-form--error .c-form__title {
    color: #fc345f;
  }
  .c-form--error .c-form__title::before {
  }
  .c-form__error p,
  .c-form__error-text {
    display: block;
    margin-top: 0.5rem;
    color: #fc345f;
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .c-form__error {
    display: none;
    margin-top: 0.75rem;
  }
  .c-form--error .c-form__error {
    display: block;
  }

  .c-form__error-target--active .c-form__error-label {
    color: #fc345f !important;
  }

  .c-form--error .c-form__center .c-form__error {
    display: block;
    text-align: center;
  }

  .c-top-error-msg {
    margin: 2rem 0;
    padding: 2rem;
    background-color: #ffebeb;
    border-radius: 0.25rem;
  }
  .c-top-error-msg__in {
  }
  .c-top-error-msg p {
    display: block;
    color: #fc345f;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------------------
  テキスト入力
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-form input[type='text'],
  .c-form input[type='number'],
  .c-form input[type='email'],
  .c-form input[type='tel'],
  .c-form input[type='url'],
  .c-form input[type='password'] {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: var(--form-border-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
  }
  .c-form select {
    background-color: transparent;
    border: var(--form-border-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
  }
  .c-form textarea {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: var(--form-border-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .c-form input[type='text']:focus,
  .c-form input[type='number']:focus,
  .c-form input[type='email']:focus,
  .c-form input[type='tel']:focus,
  .c-form input[type='url']:focus,
  .c-form input[type='password']:focus,
  .c-form textarea:focus {
    background-color: var(--form-bg-color);
    border-color: #4088c8;
    outline: 0;
    box-shadow: 0 0 0 calc(4 / var(--form-size) * 1rem) rgba(64, 136, 200, 0.25);
  }
  .c-form select:focus {
    border-color: #4088c8;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(64, 136, 200, 0.25);
  }

  /* エラー */
  .c-form.c-form--error .c-form__error-target--active input[type='text'],
  .c-form.c-form--error .c-form__error-target--active input[type='number'],
  .c-form.c-form--error .c-form__error-target--active input[type='email'],
  .c-form.c-form--error .c-form__error-target--active input[type='tel'],
  .c-form.c-form--error .c-form__error-target--active input[type='url'],
  .c-form.c-form--error .c-form__error-target--active input[type='password'],
  .c-form.c-form--error .c-form__error-target--active textarea {
    background-color: var(--form-bg-error-color);
    border-color: var(--form-border-error-color);
  }
  .c-form.c-form--error .c-form__error-target--active .c-form-select__box,
  .c-form.c-form--error .c-form-select__box.c-form__error-target--active {
    background-color: var(--form-bg-error-color);
  }
  .c-form.c-form--error .c-form__error-target--active .c-form-select__box select,
  .c-form.c-form--error .c-form-select__box.c-form__error-target--active select {
    border-color: var(--form-border-error-color);
  }

  /* disable */
  .c-form input[type='text'][disabled],
  .c-form input[type='text']:disabled,
  .c-form input[type='number'][disabled],
  .c-form input[type='number']:disabled,
  .c-form input[type='email'][disabled],
  .c-form input[type='email']:disabled,
  .c-form input[type='tel'][disabled],
  .c-form input[type='tel']:disabled,
  .c-form input[type='url'][disabled],
  .c-form input[type='url']:disabled,
  .c-form input[type='password'][disabled],
  .c-form input[type='password']:disabled {
    background: var(--form-txt-disable-color);
    cursor: not-allowed;
  }
  .c-form select[disabled],
  .c-form select:disabled {
    color: var(--white-color);
    background: var(--form-txt-disable-color);
    cursor: not-allowed;
    opacity: 1;
  }
  .c-form select[disabled] + .c-form-select__ico,
  .c-form select:disabled + .c-form-select__ico {
    background: var(--form-border-disable-color) !important;
    opacity: 0;
  }
  input:disabled:placeholder-shown {
    color: var(--white-color);
  }
  input:disabled::-webkit-input-placeholder {
    color: var(--white-color);
  }
  input:disabled:-moz-placeholder {
    color: var(--white-color);
  }
  input:disabled:-ms-input-placeholder {
    color: var(--white-color);
  }

  .c-form input.u-readonly {
    background: #f0f0f0 !important;
    border: #f0f0f0 1px solid !important;
    box-shadow: none !important;
    cursor: not-allowed;
  }

  .c-form input[type='text'],
  .c-form input[type='number'],
  .c-form input[type='email'],
  .c-form input[type='tel'],
  .c-form input[type='url'],
  .c-form input[type='password'],
  .c-form select {
    padding: calc(12 / var(--font-size) * 1rem);
    font-size: 1rem;
    line-height: 1.5;
  }

  .c-form textarea {
    padding: calc(12 / var(--font-size) * 1rem);
    font-size: 1rem;
    line-height: 1.5;
    min-height: calc(300 / var(--font-size) * 1rem);
  }

  /* セレクトボタン */
  .c-form-select {
    --select-deco-arrow-color: var(--white-color);
    --select-deco-bg-color: var(--primary-color-400);
  }
  .c-form-select__box {
    position: relative;
    display: inline-block;
    background-color: var(--form-bg-color);
  }
  .c-form-select select {
    position: relative;
    z-index: 1;
    padding: calc(12 / var(--font-size) * 1rem) calc(60 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
    background-color: transparent;
    cursor: pointer;
    border-radius: calc(4 / var(--font-size) * 1rem);
    border-color: var(--form-border-color);
  }
  .c-form-select__ico {
    position: absolute;
    top: calc(8 / var(--font-size) * 1rem);
    right: calc(8 / var(--font-size) * 1rem);
    bottom: calc(8 / var(--font-size) * 1rem);
    width: calc(34 / var(--font-size) * 1rem);
    background-color: var(--select-deco-bg-color);
    border-radius: calc(4 / var(--font-size) * 1rem);
    transition: all 0.2s ease-out;
  }
  .c-form-select__ico::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 0;
    height: 0;
    margin-top: calc(-3.5 / var(--font-size) * 1rem);
    margin-left: calc(-6.5 / var(--font-size) * 1rem);
    border-color: var(--select-deco-arrow-color) transparent transparent transparent;
    border-style: solid;
    border-width: calc(9 / var(--font-size) * 1rem) calc(6.5 / var(--font-size) * 1rem) 0 calc(6.5 / var(--font-size) * 1rem);
    content: '';
    pointer-events: none;
  }
  .c-form-select__box:hover .c-form-select__ico {
    --select-deco-bg-color: var(--primary-color-500);
  }
}
@media screen and (max-width: 767px) {
  .c-form input[type='text'],
  .c-form input[type='number'],
  .c-form input[type='email'],
  .c-form input[type='tel'],
  .c-form input[type='url'],
  .c-form input[type='password'] {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: var(--form-border-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
  }
  .c-form select {
    background-color: transparent;
    border: var(--form-border-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
  }
  .c-form textarea {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: var(--form-border-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .c-form input[type='text']:focus,
  .c-form input[type='number']:focus,
  .c-form input[type='email']:focus,
  .c-form input[type='tel']:focus,
  .c-form input[type='url']:focus,
  .c-form input[type='password']:focus,
  .c-form textarea:focus {
    background-color: var(--form-bg-color);
    border-color: #4088c8;
    outline: 0;
    box-shadow: 0 0 0 calc(4 / var(--form-size) * 1rem) rgba(64, 136, 200, 0.25);
  }
  .c-form select:focus {
    border-color: #4088c8;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(64, 136, 200, 0.25);
  }

  /* エラー */
  .c-form.c-form--error .c-form__error-target--active input[type='text'],
  .c-form.c-form--error .c-form__error-target--active input[type='number'],
  .c-form.c-form--error .c-form__error-target--active input[type='email'],
  .c-form.c-form--error .c-form__error-target--active input[type='tel'],
  .c-form.c-form--error .c-form__error-target--active input[type='url'],
  .c-form.c-form--error .c-form__error-target--active input[type='password'],
  .c-form.c-form--error .c-form__error-target--active textarea {
    background-color: var(--form-bg-error-color);
    border-color: var(--form-border-error-color);
  }
  .c-form.c-form--error .c-form__error-target--active .c-form-select__box,
  .c-form.c-form--error .c-form-select__box.c-form__error-target--active {
    background-color: var(--form-bg-error-color);
  }
  .c-form.c-form--error .c-form__error-target--active .c-form-select__box select,
  .c-form.c-form--error .c-form-select__box.c-form__error-target--active select {
    border-color: var(--form-border-error-color);
  }

  /* disable */
  .c-form input[type='text'][disabled],
  .c-form input[type='text']:disabled,
  .c-form input[type='number'][disabled],
  .c-form input[type='number']:disabled,
  .c-form input[type='email'][disabled],
  .c-form input[type='email']:disabled,
  .c-form input[type='tel'][disabled],
  .c-form input[type='tel']:disabled,
  .c-form input[type='url'][disabled],
  .c-form input[type='url']:disabled,
  .c-form input[type='password'][disabled],
  .c-form input[type='password']:disabled {
    background: var(--form-txt-disable-color);
    cursor: not-allowed;
  }
  .c-form select[disabled],
  .c-form select:disabled {
    color: var(--white-color);
    background: var(--form-txt-disable-color);
    cursor: not-allowed;
    opacity: 1;
  }
  .c-form select[disabled] + .c-form-select__ico,
  .c-form select:disabled + .c-form-select__ico {
    background: var(--form-border-disable-color) !important;
    opacity: 0;
  }
  input:disabled:placeholder-shown {
    color: var(--white-color);
  }
  input:disabled::-webkit-input-placeholder {
    color: var(--white-color);
  }
  input:disabled:-moz-placeholder {
    color: var(--white-color);
  }
  input:disabled:-ms-input-placeholder {
    color: var(--white-color);
  }

  .c-form input.u-readonly {
    background: #f0f0f0 !important;
    border: #f0f0f0 1px solid !important;
    box-shadow: none !important;
    cursor: not-allowed;
  }

  .c-form input[type='text'],
  .c-form input[type='number'],
  .c-form input[type='email'],
  .c-form input[type='tel'],
  .c-form input[type='url'],
  .c-form input[type='password'],
  .c-form select,
  .c-form textarea {
    padding: calc(12 / var(--font-size) * 1rem);
    font-size: 1rem;
    line-height: 1.5;
  }

  /* セレクトボタン */
  .c-form-select {
    --select-deco-arrow-color: var(--white-color);
    --select-deco-bg-color: var(--primary-color-400);
    max-width: 100%;
  }
  .c-form-select__box {
    position: relative;
    display: inline-block;
    background-color: var(--form-bg-color);
    max-width: 100%;
  }
  .c-form-select select {
    position: relative;
    z-index: 1;
    padding: calc(12 / var(--font-size) * 1rem) calc(60 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
    background-color: transparent;
    cursor: pointer;
    border-radius: calc(4 / var(--font-size) * 1rem);
    border-color: var(--form-border-color);
    max-width: 100%;
  }
  .c-form-select__ico {
    position: absolute;
    top: calc(8 / var(--font-size) * 1rem);
    right: calc(8 / var(--font-size) * 1rem);
    bottom: calc(8 / var(--font-size) * 1rem);
    width: calc(34 / var(--font-size) * 1rem);
    background-color: var(--select-deco-bg-color);
    border-radius: calc(4 / var(--font-size) * 1rem);
    transition: all 0.2s ease-out;
  }
  .c-form-select__ico::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 0;
    height: 0;
    margin-top: calc(-3.5 / var(--font-size) * 1rem);
    margin-left: calc(-6.5 / var(--font-size) * 1rem);
    border-color: var(--select-deco-arrow-color) transparent transparent transparent;
    border-style: solid;
    border-width: calc(9 / var(--font-size) * 1rem) calc(6.5 / var(--font-size) * 1rem) 0 calc(6.5 / var(--font-size) * 1rem);
    content: '';
    pointer-events: none;
  }
  .c-form-select__box:hover .c-form-select__ico {
    --select-deco-bg-color: var(--primary-color-500);
  }
}


/* --------------------------------------------------------------------------
  ラジオボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-form-radio-group {
    padding: calc(12 / var(--font-size) * 1rem) 0;
  }
  .c-form-radio {
    --radio-btn-ratio: var(--radio-btn-font-size) / 16;
    --radio-btn-font-size: 16;
    --radio-btn-txt-color: var(--black-color);
    --radio-btn-deco-center-color: var(--primary-color-500);
    --radio-btn-deco-border-color: var(--form-border-color);

    position: relative;
  }
  .c-form-radio__label {
    font-size: calc(var(--radio-btn-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    cursor: pointer;
  }
  .c-form-radio input[type='radio'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
    padding: 0 0 0 calc(28 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    transition: color 0.2s linear;
    color: var(--radio-btn-txt-color);
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label:hover,
  .c-form-radio input[type='radio']:checked + .c-form-radio__label {
    --radio-btn-txt-color: var(--primary-color-500);
  }
  .c-form-radio input[type='radio'].u-readonly + .c-form-radio__label {
    --radio-btn-txt-color: var(--black-color) !important;
    cursor: default;
    transition: none;
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: calc(20 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    height: calc(20 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-10 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    background-color: var(--white-color);
    border: var(--radio-btn-deco-border-color) calc(2 / var(--font-size) * 1rem) solid;
    border-radius: 50%;
    transition: color 0.2s linear;
    content: '';
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label::after {
    position: absolute;
    top: 50%;
    left: calc(5 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    display: block;
    width: calc(10 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    height: calc(10 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-5 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    background: var(--radio-btn-deco-center-color);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s linear;
    content: '';
  }
  .c-form-radio input[type='radio']:checked + .c-form-radio__label::after {
    opacity: 1;
  }
  .c-form__error-target--active .c-form-radio input[type='radio'] + .c-form-radio__label::before {
    background-color: var(--form-bg-error-color);
    --radio-btn-deco-border-color: var(--form-border-error-color);
  }
  .c-form-radio input[type='radio'][disabled] + .c-form-radio__label,
  .c-form-radio input[type='radio']:disabled + .c-form-radio__label {
    --radio-btn-txt-color: var(--form-txt-disable-color) !important;
    cursor: not-allowed;
  }
  .c-form-radio input[type='radio']:disabled + .c-form-radio__label::before {
    background-color: var(--form-bg-disable-color);
    --radio-btn-deco-border-color: var(--form-border-disable-color);
  }

  /* サイズ */
  .c-form-radio--xl {
    --radio-btn-font-size: 20;
  }
  .c-form-radio--l {
    --radio-btn-font-size: 18;
  }
  .c-form-radio--m {
    --radio-btn-font-size: 16;
  }
  .c-form-radio--s {
    --radio-btn-font-size: 14;
  }
  .c-form-radio--xs {
    --radio-btn-font-size: 12;
  }

}
@media screen and (max-width: 767px) {
  .c-form-radio-group {
    padding: calc(12 / var(--font-size) * 1rem) 0;
  }
  .c-form-radio {
    --radio-btn-ratio: var(--radio-btn-font-size) / 16;
    --radio-btn-font-size: 16;
    --radio-btn-txt-color: var(--black-color);
    --radio-btn-deco-center-color: var(--primary-color-500);
    --radio-btn-deco-border-color: var(--form-border-color);

    position: relative;
  }
  .c-form-radio__label {
    font-size: calc(var(--radio-btn-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    cursor: pointer;
  }
  .c-form-radio input[type='radio'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
    padding: 0 0 0 calc(28 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    transition: color 0.2s linear;
    color: var(--radio-btn-txt-color);
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label:hover,
  .c-form-radio input[type='radio']:checked + .c-form-radio__label {
    --radio-btn-txt-color: var(--primary-color-500);
  }
  .c-form-radio input[type='radio'].u-readonly + .c-form-radio__label {
    --radio-btn-txt-color: var(--black-color) !important;
    cursor: default;
    transition: none;
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: calc(20 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    height: calc(20 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-10 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    background-color: var(--white-color);
    border: var(--radio-btn-deco-border-color) calc(2 / var(--font-size) * 1rem) solid;
    border-radius: 50%;
    transition: color 0.2s linear;
    content: '';
  }
  .c-form-radio input[type='radio'] + .c-form-radio__label::after {
    position: absolute;
    top: 50%;
    left: calc(5 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    display: block;
    width: calc(10 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    height: calc(10 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-5 * var(--radio-btn-ratio) / var(--font-size) * 1rem);
    background: var(--radio-btn-deco-center-color);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s linear;
    content: '';
  }
  .c-form-radio input[type='radio']:checked + .c-form-radio__label::after {
    opacity: 1;
  }
  .c-form__error-target--active .c-form-radio input[type='radio'] + .c-form-radio__label::before {
    background-color: var(--form-bg-error-color);
    --radio-btn-deco-border-color: var(--form-border-error-color);
  }
  .c-form-radio input[type='radio'][disabled] + .c-form-radio__label,
  .c-form-radio input[type='radio']:disabled + .c-form-radio__label {
    --radio-btn-txt-color: var(--form-txt-disable-color) !important;
    cursor: not-allowed;
  }
  .c-form-radio input[type='radio']:disabled + .c-form-radio__label::before {
    background-color: var(--form-bg-disable-color);
    --radio-btn-deco-border-color: var(--form-border-disable-color);
  }

  /* サイズ */
  .c-form-radio--xl {
    --radio-btn-font-size: 20;
  }
  .c-form-radio--l {
    --radio-btn-font-size: 18;
  }
  .c-form-radio--m {
    --radio-btn-font-size: 16;
  }
  .c-form-radio--s {
    --radio-btn-font-size: 14;
  }
  .c-form-radio--xs {
    --radio-btn-font-size: 12;
  }
}

/* --------------------------------------------------------------------------
  チェックボックス
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-form-check-group {
    padding: calc(10 / var(--font-size) * 1rem) 0;
  }
  .c-form-check {
    --check-btn-ratio: var(--check-btn-font-size) / 16;
    --check-btn-font-size: 16;
    --check-btn-txt-color: var(--black-color);
    --check-btn-deco-center-color: var(--primary-color-500);
    --check-btn-deco-border-color: var(--form-border-color);
    position: relative;
  }
  .c-form-check__label {
    font-size: calc(var(--check-btn-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    cursor: pointer;
  }
  .c-form-check input[type='checkbox'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius: calc(4 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    cursor: pointer;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label {
    padding: 0 0 0 calc(28 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    transition: color 0.2s linear;
    color: var(--check-btn-txt-color);
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label:hover {
    --check-btn-txt-color: var(--primary-color-500);
  }
  .c-form-check input[type='checkbox'].u-readonly + .c-form-check__label {
    --check-btn-txt-color: var(--black-color) !important;
    cursor: default;
    transition: none;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: calc(20 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    height: calc(20 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-10 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    background: var(--white-color);
    border: var(--check-btn-deco-border-color) calc(2 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    content: '';
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::after {
    position: absolute;
    top: 50%;
    left: calc(5 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    display: block;
    width: calc(9 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    height: calc(15 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-9 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    border-right: calc(3 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid var(--check-btn-deco-center-color);
    border-bottom: calc(3 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid var(--check-btn-deco-center-color);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s linear;
    content: '';
  }
  .c-form-check input[type='checkbox']:checked + .c-form-check__label::after {
    opacity: 1;
  }
  .c-form__error-target--active .c-form-check input[type='checkbox'] + .c-form-check__label::before {
    background-color: var(--form-bg-error-color);
    --check-btn-deco-border-color: var(--form-border-error-color);
  }
  .c-form-check input[type='checkbox'][disabled] + .c-form-check__label,
  .c-form-check input[type='checkbox']:disabled + .c-form-check__label {
    --check-btn-txt-color: var(--form-txt-disable-color) !important;
    cursor: not-allowed;
  }
  .c-form-check input[type='checkbox'][disabled] + .c-form-check__label::before,
  .c-form-check input[type='checkbox']:disabled + .c-form-check__label::before {
    background-color: var(--form-bg-disable-color);
    --check-btn-deco-border-color: var(--form-border-disable-color) !important;
  }

  /* サイズ */
  .c-form-check--xl {
    --check-btn-font-size: 20;
  }
  .c-form-check--l {
    --check-btn-font-size: 18;
  }
  .c-form-check--m {
    --check-btn-font-size: 16;
  }
  .c-form-check--s {
    --check-btn-font-size: 14;
  }
  .c-form-check--xs {
    --check-btn-font-size: 12;
  }
}
@media screen and (max-width: 767px) {
  .c-form-check-group {
    padding: calc(10 / var(--font-size) * 1rem) 0;
  }
  .c-form-check {
    --check-btn-ratio: var(--check-btn-font-size) / 16;
    --check-btn-font-size: 16;
    --check-btn-txt-color: var(--black-color);
    --check-btn-deco-center-color: var(--primary-color-500);
    --check-btn-deco-border-color: var(--form-border-color);
    position: relative;
  }
  .c-form-check__label {
    font-size: calc(var(--check-btn-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    cursor: pointer;
  }
  .c-form-check input[type='checkbox'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius: calc(4 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    cursor: pointer;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label {
    padding: 0 0 0 calc(28 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    transition: color 0.2s linear;
    color: var(--check-btn-txt-color);
  }
  .c-form-check input[type='checkbox'].u-readonly + .c-form-check__label {
    --check-btn-txt-color: var(--black-color) !important;
    cursor: default;
    transition: none;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: calc(20 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    height: calc(20 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-10 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    background: var(--white-color);
    border: var(--check-btn-deco-border-color) calc(2 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid;
    border-radius: calc(4 / var(--font-size) * 1rem);
    content: '';
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::after {
    position: absolute;
    top: 50%;
    left: calc(5 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    display: block;
    width: calc(9 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    height: calc(15 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    margin-top: calc(-9 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    border-right: calc(3 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid var(--check-btn-deco-center-color);
    border-bottom: calc(3 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid var(--check-btn-deco-center-color);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s linear;
    content: '';
  }
  .c-form-check input[type='checkbox']:checked + .c-form-check__label::after {
    opacity: 1;
  }
  .c-form__error-target--active .c-form-check input[type='checkbox'] + .c-form-check__label::before {
    background-color: var(--form-bg-error-color);
    --check-btn-deco-border-color: var(--form-border-error-color);
  }
  .c-form-check input[type='checkbox'][disabled] + .c-form-check__label,
  .c-form-check input[type='checkbox']:disabled + .c-form-check__label {
    --check-btn-txt-color: var(--form-txt-disable-color) !important;
    cursor: not-allowed;
  }
  .c-form-check input[type='checkbox'][disabled] + .c-form-check__label::before,
  .c-form-check input[type='checkbox']:disabled + .c-form-check__label::before {
    background-color: var(--form-bg-disable-color);
    --check-btn-deco-border-color: var(--form-border-disable-color) !important;
  }

  /* サイズ */
  .c-form-check--xl {
    --check-btn-font-size: 20;
  }
  .c-form-check--l {
    --check-btn-font-size: 18;
  }
  .c-form-check--m {
    --check-btn-font-size: 16;
  }
  .c-form-check--s {
    --check-btn-font-size: 14;
  }
  .c-form-check--xs {
    --check-btn-font-size: 12;
  }
}

/* --------------------------------------------------------------------------
  アイコン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-ico-required {
    display: inline-block;
    margin-left: calc(8 / var(--font-size) * 1rem);
    margin-right: calc(8 / var(--font-size) * 1rem);
    padding: calc(4 / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem) calc(2 / var(--font-size) * 1rem);
    line-height: 1;
    vertical-align: middle;
    background-color: var(--form-border-error-color);
    border-radius: calc(2 / var(--font-size) * 1rem);
  }
  .c-ico-required-label {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1;
    vertical-align: top;
  }
}
@media screen and (max-width: 767px) {
  .c-ico-required {
    display: inline-block;
    margin-left: calc(8 / var(--font-size) * 1rem);
    margin-right: calc(8 / var(--font-size) * 1rem);
    padding: calc(4 / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem) calc(2 / var(--font-size) * 1rem);
    line-height: 1;
    vertical-align: middle;
    background-color: var(--form-border-error-color);
    border-radius: calc(2 / var(--font-size) * 1rem);
  }
  .c-ico-required-label {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1;
    vertical-align: top;
  }
}

/* --------------------------------------------------------------------------
  ボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .form-btns {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-btns__btn {
    width: calc(320 / var(--font-size) * 1rem);
  }
  .form-btns__btn + .form-btns__btn {
    margin-left: calc(40 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px) {
  .form-btns {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }
  .form-btns__btn {
    width: calc(280 / var(--font-size) * 1rem);
  }
  .form-btns__btn + .form-btns__btn {
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
}
/* --------------------------------------------------------------------------
  パスワード
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {

}
@media screen and (max-width: 767px) {
}

/* --------------------------------------------------------------------------
  ファイル アップロード
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {

}
@media screen and (max-width: 767px) {
}