@charset "UTF-8";

:root {
  --form-border-color: var(--gray-color-200);
  --form-bg-color: var(--white-color);
  --form-disable-border-color: #ccc;
  --form-disable-bg-color: #ececec;
  --form-disable-txt-color: #afafaf;
  --form-error-color: #ff3a5e;
  --form-error-bg-color: #fdf1f3;
  --form-placeholder-txt-color: #999;
  --form-autofill-txt-color: #3c3c3c;
  --form-readonly-bg-color: #f0f0f0;
}

:-moz-placeholder-shown {
  color: var(--form-placeholder-txt-color);
}

:placeholder-shown {
  color: var(--form-placeholder-txt-color);
}

::-webkit-input-placeholder {
  color: var(--form-placeholder-txt-color);
}

::-moz-placeholder {
  color: var(--form-placeholder-txt-color);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--form-placeholder-txt-color);
}

button {
  padding: 0;
  font-size: calc(16 / var(--font-size, 16) * 1rem);
  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: calc(16 / var(--font-size, 16) * 1rem);
  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: var(--form-autofill-txt-color) !important;
}

input:-internal-autofill-selected {
  background-color: var(--white-color);
  -webkit-text-fill-color: var(--form-autofill-txt-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset;
  transition: background-color 5000s ease-in-out 0s;
}

select:-internal-autofill-selected {
  background-color: transparent;
  -webkit-text-fill-color: var(--form-autofill-txt-color);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
  LAYOUT
========================================================================== */

/* --------------------------------------------------------------------------
  入力画面
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .form {
  }
  .form__in {
  }
  .form__body {
  }
  .form__header {
    margin-bottom: calc(32 / var(--font-size) * 1rem);
  }
  .form__block + .form__header {
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .form__header-in {
    display: flex;
    align-items: center;
  }
  .form__header-title {
  }
  .form__header-lead {
    margin-left: calc(40 / var(--font-size) * 1rem);
  }
  .form__footer {
    margin-top: calc(60 / var(--font-size) * 1rem);
  }
  .form__footer-bottom {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .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: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__item + .form__item {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .form__sub-item {
  }
  .form__sub-item + .form__sub-item {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px), print {
  .form {
  }
  .form__in {
  }
  .form__body {
  }
  .form__header {
    margin-bottom: calc(32 / var(--font-size) * 1rem);
  }
  .form__block + .form__header {
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .form__header-in {
    display: flex;
    align-items: center;
  }
  .form__header-title {
  }
  .form__header-lead {
    margin-left: calc(40 / var(--font-size) * 1rem);
  }
  .form__footer {
    margin-top: calc(60 / var(--font-size) * 1rem);
  }
  .form__footer-bottom {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .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: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__item + .form__item {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .form__sub-item {
  }
  .form__sub-item + .form__sub-item {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  入力画面 ブロック
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-form {
    --header-width: 272;
    display: flex;
    align-items: center;
  }
  .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);
    padding-right: calc(16 / var(--font-size) * 1rem);
  }
  .c-form--header-xl {
    --header-width: 432;
  }
  .c-form--header-l {
    --header-width: 384;
  }
  .c-form--header-m {
    --header-width: 300;
  }
  .c-form--header-s {
    --header-width: 244;
  }
  .c-form--header-xs {
    --header-width: 183;
  }
  .c-form--header-xxs {
    --header-width: 160;
  }
  .c-form--header-xxxs {
    --header-width: 126;
  }
  .c-form--column .c-form__header {
    width: 100%;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .c-form__body {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc(100% - var(--header-width) / var(--font-size) * 1rem);
  }
  .c-form__body--full {
    width: 100%;
  }
  .c-form--column .c-form__body {
    width: 100%;
  }
  .c-form__title {
    position: relative;
    display: inline-block;
    font-weight: 500;
    font-size: calc(16 / var(--font-size) * 1rem);
    line-height: 1.5;
    vertical-align: middle;
  }
  .c-form__center {
    width: 100%;
  }
  .c-form__center-in {
    display: flex;
    justify-content: center;
  }
  .c-form__note {
    margin-top: calc(8 / var(--font-size) * 1rem);
    color: var(--gray-color-400);
  }
  .c-form__footer {
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px), print {
  .c-form {
    --header-width: 272;

  }
  .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);
    padding-bottom: calc(8 / var(--font-size) * 1rem);
  }
  .c-form--header-xl {
    --header-width: 432;
  }
  .c-form--header-l {
    --header-width: 384;
  }
  .c-form--header-m {
    --header-width: 300;
  }
  .c-form--header-s {
    --header-width: 244;
  }
  .c-form--header-xs {
    --header-width: 183;
  }
  .c-form--header-xxs {
    --header-width: 160;
  }
  .c-form--header-xxxs {
    --header-width: 126;
  }
  .c-form--column .c-form__header {
    width: 100%;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .c-form__body {
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
  }
  .c-form__body--full {
    width: 100%;
  }
  .c-form--column .c-form__body {
    width: 100%;
  }
  .c-form__title {
    position: relative;
    display: inline-block;
    font-weight: 500;
    font-size: calc(16 / var(--font-size) * 1rem);
    line-height: 1.5;
    vertical-align: middle;
  }
  .c-form__center {
    width: 100%;
  }
  .c-form__center-in {
    display: flex;
    justify-content: center;
  }
  .c-form__note {
    margin-top: calc(8 / var(--font-size) * 1rem);
    color: var(--gray-color-400);
  }
  .c-form__footer {
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  入力 横並びレイアウト
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .form-row {
    --gap-y: 24;
    --gap-x: 48;
    --col-num: 1;

    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap-y) / var(--font-size) * 1rem) calc(var(--gap-x) / var(--font-size) * 1rem);
  }
  .form-row--center {
    justify-content: center;
  }
  .form-row__col {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc((100% - var(--gap-x) / var(--font-size) * 1rem * (var(--col-num) - 1)) / var(--col-num));
  }
  .form-row--auto .form-row__col {
    width: auto;
  }

  /* コラム数 */
  .form-row--2col {
    --col-num: 2;
  }
  .form-row--3col {
    --col-num: 3;
  }
  .form-row--4col {
    --col-num: 4;
  }
  .form-row--5col {
    --col-num: 5;
  }
  .form-row--wrap .form-row__col.form-row__col--auto {
    width: auto;
  }

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

@media all and (max-width: 767px) {
  .form-row {
    --gap-y: 20;
    --gap-x: 48;
    --col-num: 1;

    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap-y) / var(--font-size) * 1rem) calc(var(--gap-x) / var(--font-size) * 1rem);
  }
  .form-row--center {
    justify-content: center;
  }
  .form-row--auto .form-row__col {
    width: auto;
  }

  /* コラム数 */
  .form-row--2col {
    --col-num: 2;
  }

  .form-row--3col {
    --col-num: 3;
  }

  .form-row--4col {
    --col-num: 4;
  }

  .form-row--5col {
    --col-num: 5;
  }

  .form-row--wrap .form-row__col.form-row__col--auto {
    width: auto;
  }
  
  /* サイズ */
  .form-row__col.form-row__col--s {
    width: calc(98 / var(--font-size) * 1rem);
  }

  .form-row__col.form-row__col--m {
    width: calc(192 / var(--font-size) * 1rem);
  }

  .form-row__col.form-row__col--l {
    width: calc(288 / var(--font-size) * 1rem);
  }

  .form-row__col.form-row__col--xl {
    width: calc(400 / var(--font-size) * 1rem);
  }
}

/* 生年月日など */

@media all and (min-width: 768px), print {
  .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: 100%;
  }
  .form-label__title + .form-label__input {
    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;
  }

}

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

/* 日付入力 */

@media all and (min-width: 768px), print {
  .form-date-select {
    display: flex;
    align-items: center;
  }
  .form-date-select__input-col {
    display: flex;
    align-items: center;
  }
  .form-date-select__input-col select {
    text-align: right;
  }
  .form-date-select__input-col--year .c-form-input {
    width: calc(140 / var(--font-size) * 1rem);
  }
  .form-date-select__input-col--mouth .c-form-input {
    width: calc(80 / var(--font-size) * 1rem);
  }
  .form-date-select__input-col--day .c-form-input {
    width: calc(80 / var(--font-size) * 1rem);
  }
  .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 (max-width: 767px) {
}

/* zipcode */

@media all and (min-width: 768px), print {
  .form-zip-code {

  }
  .form-zip-code__col {
    display: flex;
  }
  .form-zip-code__input {
    width: calc(200 / var(--font-size) * 1rem);
  }
  .form-zip-code__btn {
    margin-left: calc(20 / var(--font-size) * 1rem);
  }
  .form-zip-code__btn .c-btn {
    --btn-px: 36;
  }
}

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

/* ==========================================================================
  COMPONENT
========================================================================== */

/* --------------------------------------------------------------------------
  INPUT
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-form-input {
    --form-input-font-size: 16;
    --form-input-fate: var(--form-input-font-size) / 16;
  }
  .c-form-input--l {
    --form-input-font-size: 16;
  }
  .c-form-input--m {
    --form-input-font-size: 16;
  }
  .c-form-input--s {
    --form-input-font-size: 14;
  }

  .c-form-input__note{
    margin-top: calc(8 / var(--font-size) * 1rem);
    margin-bottom: calc(8 / var(--font-size) * 1rem);
  }

  .c-form__error + .c-form-input__note{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }

  .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: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
  }
  .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'] {
    padding: calc(12 * var(--form-input-fate) / var(--font-size) * 1rem) calc(20 * var(--form-input-fate) / var(--font-size) * 1rem);
    font-size: calc(var(--form-input-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
  }

  .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);
  }
}

@media all and (max-width: 767px), print {
  .c-form-input {
    --form-input-font-size: 16;
    --form-input-fate: var(--form-input-font-size) / 16;
  }
  .c-form-input--l {
    --form-input-font-size: 16;
  }
  .c-form-input--m {
    --form-input-font-size: 16;
  }
  .c-form-input--s {
    --form-input-font-size: 14;
  }

  .c-form-input__note{
    margin-top: calc(8 / var(--font-size) * 1rem);
    margin-bottom: calc(8 / var(--font-size) * 1rem);
  }

  .c-form__error + .c-form-input__note{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }

  .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: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
  }
  .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'] {
    padding: calc(12 * var(--form-input-fate) / var(--font-size) * 1rem) calc(20 * var(--form-input-fate) / var(--font-size) * 1rem);
    font-size: calc(var(--form-input-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
  }

  .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);
  }
}

/* textarea */

@media all and (min-width: 768px), print {
  .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: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: calc(260 / var(--font-size) * 1rem);
    padding: calc(12 * var(--form-input-fate) / var(--font-size) * 1rem);
    font-size: calc(var(--form-input-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    word-wrap: break-word;
  }
}

@media all and (max-width: 767px) {
  .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: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: calc(220 / var(--font-size) * 1rem);
    padding: calc(12 * var(--form-input-fate) / var(--font-size) * 1rem);
    font-size: calc(var(--form-input-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    word-wrap: break-word;
  }
}

/* password */

@media all and (min-width: 768px), print {
  .c-form-password {
    position: relative;
  }
  .c-form-password input[type='password'],
  .c-form-password input[type='text'] {
    padding-right: calc(48 / var(--font-size) * 1rem);
  }
  .c-form-password__toggle {
    position: absolute;
    top: 50%;
    right: calc(8 / var(--font-size) * 1rem);
    width: calc(32/ var(--font-size) * 1rem);
    margin-top: calc(-13 / var(--font-size) * 1rem);
    cursor: pointer;
  }
  .c-form-password__hide {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(32/ var(--font-size) * 1rem);
  }
  .c-form-password__show {
    top: 0;
    left: 0;
    display: none;
    width: calc(32/ var(--font-size) * 1rem);
  }
  .c-form-password__ico {
    width: calc(32/ var(--font-size) * 1rem);
  }
  .c-form-password__ico::before {
    padding-top: calc(512 / 640 * 100%);
  }
  .c-form-password__ico svg {
    fill: var(--primary-color-400);
  }
  .is-password-show .c-form-password__show {
    display: block;
  }
  .is-password-show .c-form-password__hide {
    display: none;
  }
}

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

/* disable */

@media all and (min-width: 768px), print {
  .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-disable-txt-color);
    cursor: not-allowed;
  }

  input:disabled:-moz-placeholder-shown {
    color: var(--white-color);
  }

  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[readonly],
  .c-form input.u-readonly {
    background: var(--form-readonly-bg-color) !important;
    border: var(--form-readonly-bg-color) calc(1 / var(--font-size) * 1rem) solid !important;
    box-shadow: none !important;
    cursor: not-allowed;
  }
}

@media all and (max-width: 767px) {
  .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-disable-txt-color);
    cursor: not-allowed;
  }

  input:disabled:-moz-placeholder-shown {
    color: var(--white-color);
  }

  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[readonly],
  .c-form input.u-readonly {
    background: var(--form-readonly-bg-color) !important;
    border: var(--form-readonly-bg-color) calc(1 / var(--font-size) * 1rem) solid !important;
    box-shadow: none !important;
    cursor: not-allowed;
  }
}

/* --------------------------------------------------------------------------
  SELECT
-------------------------------------------------------------------------- */

/* config */

@media all and (min-width: 768px), print {
  .c-form select {
    background-color: transparent;
    border: var(--form-border-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
  }
  .c-form select {
    padding: calc(12 / var(--font-size) * 1rem);
    font-size: 1rem;
    line-height: 1.5;
  }
  .c-form select:focus {
    border-color: #4088c8;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(64, 136, 200, 0.25);
  }
}

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

/* deco */

@media all and (min-width: 768px), print {
  .c-form-select {
    --select-deco-arrow-color: var(--black-color);
    --select-deco-bg-color: var(--white-color);
  }
  .c-form-select__box {
    position: relative;
    display: inline-block;
    background-color: var(--form-bg-color);
    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(20 / var(--font-size) * 1rem);
    background-color: transparent;
    cursor: pointer;
    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: calc(12 / var(--font-size) * 1rem);
    height: calc(12 / var(--font-size) * 1rem);
    margin-top: calc(-3.5 / var(--font-size) * 1rem);
    margin-left: calc(-6.5 / var(--font-size) * 1rem);
    -webkit-mask: url("/r07/assets/img/common/ico_arrow_down.svg");
    mask: url("/r07/assets/img/common/ico_arrow_down.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    content: '';
    pointer-events: none;
    background-color: var(--black-color);
  }
}

@media all and (max-width: 767px) {
  .c-form-select {
    --select-deco-arrow-color: var(--black-color);
    --select-deco-bg-color: var(--white-color);
  }
  .c-form-select__box {
    position: relative;
    display: inline-block;
    background-color: var(--form-bg-color);
    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(20 / var(--font-size) * 1rem);
    background-color: transparent;
    cursor: pointer;
    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: calc(12 / var(--font-size) * 1rem);
    height: calc(12 / var(--font-size) * 1rem);
    margin-top: calc(-3.5 / var(--font-size) * 1rem);
    margin-left: calc(-6.5 / var(--font-size) * 1rem);
    -webkit-mask: url("/r07/assets/img/common/ico_arrow_down.svg");
    mask: url("/r07/assets/img/common/ico_arrow_down.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    content: '';
    pointer-events: none;
    background-color: var(--black-color);
  }
}


/* disable */

@media all and (min-width: 768px), print {
  .c-form select[disabled],
  .c-form select:disabled {
    color: var(--white-color);
    background: var(--form-disable-txt-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-disable-border-color) !important;
    opacity: 0;
  }
}

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

/* --------------------------------------------------------------------------
  電話番号
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-form-number {
    display: flex;
    align-items: center;
  }
  .c-form .c-form-number input[type='text'], .c-form input[type='number']{
    width: calc(120 / var(--font-size) * 1rem);
  }
  .c-form-number-label {
    margin: 0 calc(7 / var(--font-size) * 1rem);
    font-weight: 700;
    font-size: calc(16 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .c-form-number {
    display: flex;
    align-items: center;
  }
  .c-form .c-form-number input[type='text'], .c-form input[type='number']{
    width: calc((100% - calc(26 * 2 / var(--font-size) * 1rem)) / 3 );
  }
  .c-form-number-label {
    width: calc(26 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: calc(16 / var(--font-size) * 1rem);
  }
}


/* --------------------------------------------------------------------------
  ファイルアップロード
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  input[type='file']:focus {
    outline: 0;
  }
  .form-file-upload {
    --upload-btn-txt-color: var(--white-color);
    --upload-btn-bg-color: var(--primary-color-100);
    --upload-btn-border-color: var(--primary-color-100);

    position: relative;
    width: 100%;
  }
  .form-file-upload__file {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    cursor: pointer;
    opacity: 0;
  }
  .form-file-upload__view {
    display: flex;
    width: 100%;
  }
  .c-form input[readonly].form-file-upload__txt,
  .c-form input.u-readonly.form-file-upload__txt {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
    padding: calc(12 / var(--font-size) * 1rem);
    font-size: calc(16 / var(--font-size) * 1rem);
    line-height: 1.5;
    background-color: var(--white-color) !important;
    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;
  }
  .form-file-upload__btn {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(200 / var(--font-size) * 1rem);
    height: calc(50 / var(--font-size) * 1rem);
    margin-left: calc(20 / var(--font-size) * 1rem);
    padding: 0 calc(16 / var(--font-size) * 1rem);
    color: var(--upload-btn-txt-color);
    vertical-align: top;
    background-color: var(--upload-btn-bg-color);
    border-color: var(--upload-btn-border-color);
    border-style: solid;
    border-width: calc(2 / var(--font-size) * 1rem);
    border-radius: calc(8 / var(--font-size) * 1rem);
    transition: all 0.15s ease-out;
  }
  .form-file-upload__btn span {
    font-weight: bold;
    font-size: calc(13 / var(--font-size) * 1rem);
    line-height: 1.4;
  }
  .form-file-upload__file:hover + .form-file-upload__view .form-file-upload__btn {
    --upload-btn-txt-color: var(--primary-color-100);
    --upload-btn-bg-color: var(--white-color);
  }
}

@media all and (max-width: 767px) {
  input[type='file']:focus {
    outline: 0;
  }
  .form-file-upload {
    --upload-btn-txt-color: var(--white-color);
    --upload-btn-bg-color: var(--primary-color-100);
    --upload-btn-border-color: var(--primary-color-100);

    position: relative;
    width: 100%;
  }
  .form-file-upload__file {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    cursor: pointer;
    opacity: 0;
  }
  .form-file-upload__view {
    display: flex;
    width: 100%;
  }
  .c-form input[readonly].form-file-upload__txt,
  .c-form input.u-readonly.form-file-upload__txt {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
    padding: calc(12 / var(--font-size) * 1rem);
    font-size: calc(16 / var(--font-size) * 1rem);
    line-height: 1.5;
    background-color: var(--white-color) !important;
    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;
  }
  .form-file-upload__btn {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(200 / var(--font-size) * 1rem);
    height: calc(50 / var(--font-size) * 1rem);
    margin-left: calc(20 / var(--font-size) * 1rem);
    padding: 0 calc(16 / var(--font-size) * 1rem);
    color: var(--upload-btn-txt-color);
    vertical-align: top;
    background-color: var(--upload-btn-bg-color);
    border-color: var(--upload-btn-border-color);
    border-style: solid;
    border-width: calc(2 / var(--font-size) * 1rem);
    border-radius: calc(8 / var(--font-size) * 1rem);
    transition: all 0.15s ease-out;
  }
  .form-file-upload__btn span {
    font-weight: bold;
    font-size: calc(13 / var(--font-size) * 1rem);
    line-height: 1.4;
  }
  .form-file-upload__file:hover + .form-file-upload__view .form-file-upload__btn {
    --upload-btn-txt-color: var(--primary-color-100);
    --upload-btn-bg-color: var(--white-color);
  }
}

/* --------------------------------------------------------------------------
  チェックボックス
-------------------------------------------------------------------------- */

@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-100);
    --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(24 * 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-100);
  }
  .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: 0;
    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(3 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    background: var(--white-color);
    border: var(--check-btn-deco-border-color) calc(1 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid;
    content: '';
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::after {
    position: absolute;
    top: 0;
    left: calc(5.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(4 * 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);
    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-error-bg-color);
    --check-btn-deco-border-color: var(--form-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-disable-txt-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-disable-bg-color);
    --check-btn-deco-border-color: var(--form-disable-border-color) !important;
  }
  .c-form-check__footer {
    margin-top: calc(4 / var(--font-size) * 1rem);
    margin-left: calc(28 / var(--font-size) * 1rem);
  }

  /* サイズ */
  .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 (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-100);
    --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(24 * 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-100);
  }
  .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: 0;
    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(3 * var(--check-btn-ratio) / var(--font-size) * 1rem);
    background: var(--white-color);
    border: var(--check-btn-deco-border-color) calc(1 * var(--check-btn-ratio) / var(--font-size) * 1rem) solid;
    content: '';
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::after {
    position: absolute;
    top: 0;
    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(4 * 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);
    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-error-bg-color);
    --check-btn-deco-border-color: var(--form-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-disable-txt-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-disable-bg-color);
    --check-btn-deco-border-color: var(--form-disable-border-color) !important;
  }
  .c-form-check__footer {
    margin-top: calc(4 / var(--font-size) * 1rem);
    margin-left: calc(28 / var(--font-size) * 1rem);
  }

  /* サイズ */
  .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-form-radio-group {
    padding: calc(12 / var(--font-size) * 1rem) 0;
  }
  .sub-radio-group {
    display: none;
  }
  .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-100);
    --radio-btn-deco-border-color: var(--form-border-color);

    position: relative;
  }
  .sub-radio-title {
    margin-bottom: calc(12 / var(--font-size) * 1rem);
  }
  .c-form-radio + .c-form-radio {
    margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .c-form-radio > .c-form-radio-group {
    padding-left: calc(24 / var(--font-size) * 1rem);
  }
  .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-100);
  }
  .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: 0;
    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(3 * 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: 0;
    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(8 * 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-error-bg-color)!important;
    --radio-btn-deco-border-color: var(--form-error-color)!important;
  }
  .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-disable-txt-color) !important;
    cursor: not-allowed;
  }
  .c-form-radio input[type='radio']:disabled + .c-form-radio__label::before {
    background-color: var(--form-disable-bg-color);
    --radio-btn-deco-border-color: var(--form-disable-border-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 (max-width: 767px) {
  .c-form-radio-group {
    padding: calc(12 / var(--font-size) * 1rem) 0;
  }
  .sub-radio-group {
    display: none;
  }
  .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-100);
    --radio-btn-deco-border-color: var(--form-border-color);

    position: relative;
  }
  .sub-radio-title {
    margin-bottom: calc(12 / var(--font-size) * 1rem);
  }
  .c-form-radio + .c-form-radio {
    margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .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-100);
  }
  .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: 0;
    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(3 * 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: 0;
    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(8 * 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-error-bg-color);
    --radio-btn-deco-border-color: var(--form-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-disable-txt-color) !important;
    cursor: not-allowed;
  }
  .c-form-radio input[type='radio']:disabled + .c-form-radio__label::before {
    background-color: var(--form-disable-bg-color);
    --radio-btn-deco-border-color: var(--form-disable-border-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-search{
  max-width: calc(200 / var(--font-size) * 1rem);
  margin-left: calc(10 / var(--font-size) * 1rem);
}
.c-form-search .c-btn{
  --btn-radius: 0;
  --btn-min-height: 40;
}
}
@media all and (max-width: 767px) {
  .c-form-search{
    max-width: calc(200 / var(--font-size) * 1rem);
    margin-left: calc(10 / var(--font-size) * 1rem);
  }
  .c-form-search .c-btn{
    --btn-radius: 0;
    --btn-min-height: 40;
  }
}

/* --------------------------------------------------------------------------
  必須アイコン
-------------------------------------------------------------------------- */

@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-error-color);
    border-radius: calc(2 / var(--font-size) * 1rem);
  }
  .c-ico-required-label {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1;
    vertical-align: top;
  }
}

@media all 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-error-color);
    border-radius: calc(2 / var(--font-size) * 1rem);
  }
  .c-ico-required-label {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1;
    vertical-align: top;
  }
}

/* --------------------------------------------------------------------------
  確認画面
-------------------------------------------------------------------------- */

/* テキスト */

@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;
  }
  .c-form__cf-text a {
    color: var(--primary-color-100);
    text-decoration: underline;
  }
  .c-form__cf-text a:hover {
    text-decoration: none;
  }
}

@media all and (max-width: 767px) {
  .c-form__cf-text {
    margin-top: calc(12 / var(--font-size) * 1rem);
    margin-bottom: calc(20 / var(--font-size) * 1rem);
    font-size: calc(18 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
  .c-form__cf-text a {
    color: var(--primary-color-100);
    text-decoration: underline;
  }
  .c-form__cf-text a:hover {
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
  エラー時 INPUT
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .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-error-bg-color);
    border-color: var(--form-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-error-bg-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-error-color);
  }

  .c-form--error .c-form__title {
    color: var(--form-error-color);
  }
  .c-form--error .c-form__title::before {
  }
  .c-form__error p,
  .c-form__error-text {
    display: block;
    margin-top: 0.5rem;
    color: var(--form-error-color);
    font-weight: 700;
    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: var(--form-error-color) !important;
  }

  .c-form__error-target--active + .c-form__error {
    display: block;
  }

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

  .c-top-error-msg {
    margin: calc(64 / var(--font-size) * 1rem) 0 0;
    padding: calc(32 / var(--font-size) * 1rem);
    background-color: var(--form-error-bg-color);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .c-top-error-msg__in {
  }
  .c-top-error-msg p {
    display: block;
    color: var(--form-error-color);
    font-weight: 700;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
}

@media all and (max-width: 767px) {
  .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-error-bg-color);
    border-color: var(--form-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-error-bg-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-error-color);
  }

  .c-form--error .c-form__title {
    color: var(--form-error-color);
  }
  .c-form--error .c-form__title::before {
  }
  .c-form__error p,
  .c-form__error-text {
    display: block;
    margin-top: 0.5rem;
    color: var(--form-error-color);
    font-weight: 700;
    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: var(--form-error-color) !important;
  }

  .c-form__error-target--active + .c-form__error {
    display: block;
  }

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

  .c-top-error-msg {
    margin: calc(64 / var(--font-size) * 1rem) 0 0;
    padding: calc(32 / var(--font-size) * 1rem);
    background-color: var(--form-error-bg-color);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .c-top-error-msg__in {
  }
  .c-top-error-msg p {
    display: block;
    color: var(--form-error-color);
    font-weight: 700;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------------------
  MSG
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-top-error-msg {
    margin: calc(64 / var(--font-size) * 1rem) 0 0;
    padding: calc(32 / var(--font-size) * 1rem);
    background-color: var(--form-error-bg-color);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .c-top-error-msg__in {
  }
  .c-top-error-msg p {
    display: block;
    color: var(--form-error-color);
    font-weight: 700;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
}

@media all and (max-width: 767px) {
  .c-top-error-msg {
    margin: calc(64 / var(--font-size) * 1rem) 0 0;
    padding: calc(32 / var(--font-size) * 1rem);
    background-color: var(--form-error-bg-color);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .c-top-error-msg__in {
  }
  .c-top-error-msg p {
    display: block;
    color: var(--form-error-color);
    font-weight: 700;
    font-size: calc(14 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
}


/* --------------------------------------------------------------------------
  TEXT ICO
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-txt-ico {
    --txt-ico-font-size: 14;
    --txt-ico-ratio: var(--txt-ico-font-size) / 14;
    --txt-ico-bg-color: var(--black-color);
    --txt-ico-border-color: var(--black-color);
    --txt-ico-font-color: var(--white-color);

    display: inline-flex;
    font-size: calc(var(--txt-ico-font-size) * var(--txt-ico-ratio) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) var(--txt-ico-border-color) solid;
    padding: calc(2 * var(--txt-ico-ratio)  / var(--font-size) * 1rem);
    vertical-align: baseline;
    line-height: 1;
    color: var(--txt-ico-font-color);
    background-color: var(--txt-ico-bg-color);
    font-style: normal;
    margin: 0 calc(3 * var(--txt-ico-ratio)  / var(--font-size) * 1rem);
    min-width: calc(22 * var(--txt-ico-ratio) / var(--font-size) * 1rem);
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }

  /* color */
  .c-txt-ico--light-blue {
    --txt-ico-bg-color: #009BB4;
    --txt-ico-border-color: #009BB4;
  }
  .c-txt-ico--green {
    --txt-ico-bg-color: #00B098;
    --txt-ico-border-color: #00B098;
  }
  .c-txt-ico--orange {
    --txt-ico-bg-color: #E87016;
    --txt-ico-border-color: #E87016;
  }
  .c-txt-ico--gray-blue {
    --txt-ico-bg-color: #5797C9;
    --txt-ico-border-color: #5797C9;
  }
  .c-txt-ico--brown {
    --txt-ico-bg-color: #876A52;
    --txt-ico-border-color: #876A52;
  }
  .c-txt-ico--purple {
    --txt-ico-bg-color: #667DF6;
    --txt-ico-border-color: #667DF6;
  }
  .c-txt-ico--pink {
    --txt-ico-bg-color: #DD7CF0;
    --txt-ico-border-color: #DD7CF0;
  }

  .c-txt-ico--stroke {
    --txt-ico-bg-color: var(--white-color);
    --txt-ico-font-color: var(--txt-ico-border-color);
  }
  .c-txt-ico--stroke-none {
    --txt-ico-bg-color: var(--white-color);
    --txt-ico-border-color: var(--white-color);
    --txt-ico-font-color: var(--block-color);
  }
  .c-txt-ico--btn{
    --txt-ico-bg-color: var(--primary-color-100);
    --txt-ico-border-color: var(--primary-color-100);
    padding: calc(8 / var(--font-size)* 1rem) calc(6 / var(--font-size)* 1rem);
    border-radius: 9999px;
    font-size: calc(12 / var(--font-size)* 1rem);
    min-height: calc(28 / var(--font-size)* 1rem);
    min-width: calc(49 / var(--font-size)* 1rem);
  }
  .c-txt-ico--star {
    --txt-ico-font-color: var(--yellow-color-100);
  }

  /* font-size */
  .c-txt-ico--xl {
    --txt-ico-font-size: 16;
  }
  .c-txt-ico--l {
    --txt-ico-font-size: 15;
  }
  .c-txt-ico--m {
    --txt-ico-font-size: 14;
  }
  .c-txt-ico--s {
    --txt-ico-font-size: 13;
  }
  .c-txt-ico--xs {
    --txt-ico-font-size: 12;
  }
  .c-txt-ico--xxs {
    --txt-ico-font-size: 10;
  }
}

@media all and (max-width: 767px) {
  .c-txt-ico {
    --txt-ico-font-size: 14;
    --txt-ico-ratio: var(--txt-ico-font-size) / 14;
    --txt-ico-bg-color: var(--black-color);
    --txt-ico-border-color: var(--black-color);
    --txt-ico-font-color: var(--white-color);

    display: inline-flex;
    font-size: calc(var(--txt-ico-font-size) * var(--txt-ico-ratio) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) var(--txt-ico-border-color) solid;
    padding: calc(2 * var(--txt-ico-ratio)  / var(--font-size) * 1rem);
    vertical-align: baseline;
    line-height: 1;
    color: var(--txt-ico-font-color);
    background-color: var(--txt-ico-bg-color);
    font-style: normal;
    margin: 0 calc(3 * var(--txt-ico-ratio)  / var(--font-size) * 1rem);
    min-width: calc(22 * var(--txt-ico-ratio) / var(--font-size) * 1rem);
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }

  /* color */
  .c-txt-ico--light-blue {
    --txt-ico-bg-color: #009BB4;
    --txt-ico-border-color: #009BB4;
  }
  .c-txt-ico--green {
    --txt-ico-bg-color: #00B098;
    --txt-ico-border-color: #00B098;
  }
  .c-txt-ico--orange {
    --txt-ico-bg-color: #E87016;
    --txt-ico-border-color: #E87016;
  }
  .c-txt-ico--gray-blue {
    --txt-ico-bg-color: #5797C9;
    --txt-ico-border-color: #5797C9;
  }
  .c-txt-ico--brown {
    --txt-ico-bg-color: #876A52;
    --txt-ico-border-color: #876A52;
  }
  .c-txt-ico--purple {
    --txt-ico-bg-color: #667DF6;
    --txt-ico-border-color: #667DF6;
  }
  .c-txt-ico--pink {
    --txt-ico-bg-color: #DD7CF0;
    --txt-ico-border-color: #DD7CF0;
  }

  .c-txt-ico--stroke {
    --txt-ico-bg-color: var(--white-color);
    --txt-ico-font-color: var(--txt-ico-border-color);
  }
  .c-txt-ico--stroke-none {
    --txt-ico-bg-color: var(--white-color);
    --txt-ico-border-color: var(--white-color);
    --txt-ico-font-color: var(--block-color);
  }
  .c-txt-ico--btn{
    --txt-ico-bg-color: var(--primary-color-100);
    --txt-ico-border-color: var(--primary-color-100);
    padding: calc(8 / var(--font-size)* 1rem) calc(6 / var(--font-size)* 1rem);
    border-radius: 9999px;
    font-size: calc(12 / var(--font-size)* 1rem);
    min-height: calc(28 / var(--font-size)* 1rem);
    min-width: calc(49 / var(--font-size)* 1rem);
  }
  .c-txt-ico--star {
    --txt-ico-font-color: var(--yellow-color-100);
  }

  /* font-size */
  .c-txt-ico--xl {
    --txt-ico-font-size: 16;
  }
  .c-txt-ico--l {
    --txt-ico-font-size: 15;
  }
  .c-txt-ico--m {
    --txt-ico-font-size: 14;
  }
  .c-txt-ico--s {
    --txt-ico-font-size: 13;
  }
  .c-txt-ico--xs {
    --txt-ico-font-size: 12;
  }
  .c-txt-ico--xxs {
    --txt-ico-font-size: 10;
  }
}