@charset "UTF-8";

:root {
  --form-border-color: var(--gray-color);
  --form-bg-color: var(--white-color);
  --form-border-disable-color: #ccc;
  --form-bg-disable-color: #ececec;
  --form-txt-disable-color: #afafaf;
  --form-error-color: var(--red-color);
  --form-bg-error-color: #FFE5E5;
}
/* ==========================================================================
  FORM
========================================================================== */
:placeholder-shown {
  color: var(--secondary-color-400);
}
::-webkit-input-placeholder {
  color: var(--secondary-color-400);
}
::-moz-placeholder {
  color: var(--secondary-color-400);
  opacity: 1;
}
:-ms-input-placeholder {
  color: var(--secondary-color-400);
}
button {
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input,
textarea,
select {
  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: 760px), print {
  .form {
    position: relative;
    margin-top: calc(96 / 1440 * 100vw);
    padding: calc(96 / 1440 * 100vw) calc(80 / 1440 * 100vw)
  }
  .form__inner {
    position: relative;
  }
  .form__body {
  }
  .form__header {
    margin-bottom: calc(32 / 1440 * 100vw);
  }
  .form__block + .form__header {
    margin-top: calc(40 / 1440 * 100vw);
  }
  .form__footer {
    margin-top: calc(34 / 1440 * 100vw);
  }
  .form__footer-txt .c-txt {
    text-align: center;
  }
  .form__footer-btn {
    margin-top: calc(48 / 1440 * 100vw);
  }
  .form__footer-btn__inner {
    display: flex;
    gap: calc(48 / 1440 * 100vw);
    justify-content: center;
  }
  .form__block {
  }
  .form__item {
  }
  .form__item:nth-last-of-type(1) {
    padding-bottom: calc(24 / 1440 * 100vw);
  }
  .form__item + .form__item {
    margin-top: calc(48 / 1440 * 100vw);
  }

  .form-row {
    --gap-y: calc(24 / 1440 * 100vw);
    --gap-x: calc(48 / 1440 * 100vw);
    --col-num: 1;

    display: flex;
    gap: var(--gap-y) var(--gap-x);
  }
  .form-row--wrap {
    flex-wrap: wrap;
  }
  .form-row--center {
    justify-content: center;
  }
  .form-row__col {
    flex-grow: 0;
    flex-shrink: 1;
  }
  .form-row--wrap .form-row__col {
    width: calc((100% - var(--gap-x) * (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--wrap .form-row__col.form-row__col--auto {
    width: auto;
  }

  /* サイズ */
  .form-row__col.form-row__col--s {
    width: calc(96 / 1440 * 100vw);
  }
  .form-row__col.form-row__col--m {
    width: calc(192 / 1440 * 100vw);
  }
  .form-row__col.form-row__col--l {
    width: calc(288 / 1440 * 100vw);
  }
  .form-row__col.form-row__col--xl {
    width: calc(400 / 1440 * 100vw);
  }

  /* 生年月日など */
  .form-label {
    display: flex;
    align-items: center;
  }
  .form-label__title {
    text-align: left;
    flex-shrink: 0;
    font-weight: bold;
  }
  .form-label__title + .form-label__input {
    padding-left: calc(12 / 1440 * 100vw);
  }
  .form-label__input {
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
  }
}
@media all and (max-width: 759px) {
  .form {
    position: relative;
    margin-top: calc(64 / 375 * 100vw);
    padding: calc(34 / 375 * 100vw) calc(20 / 375 * 100vw) calc(48 / 375 * 100vw)
  }
  .form__inner {
    position: relative;
  }
  .form__body {
  }
  .form__header {
    margin-bottom: calc(32 / 375 * 100vw);
  }
  .form__block + .form__header {
    margin-top: calc(40 / 375 * 100vw);
  }
  .form__footer {
    margin-top: calc(24 / 375 * 100vw);
  }
  .form__footer-txt .c-txt {
    text-align: center;
    letter-spacing: -0.04em;
  }
  .form__footer-btn {
    margin-top: calc(32 / 375 * 100vw);
  }
  .form__footer-btn__inner {
    display: flex;
    flex-direction: column;
    gap: calc(32 / 375 * 100vw);
    justify-content: center;
    align-items: center;
  }
  .form__block {
  }
  .form__item {
  }
  .form__item:nth-last-of-type(1) {
    padding-bottom: calc(24 / 375 * 100vw);
  }
  .form__item + .form__item {
    margin-top: calc(32 / 375 * 100vw);
  }

  .form-row {
    --gap-y: calc(24 / 375 * 100vw);
    --gap-x: calc(48 / 375 * 100vw);
    --col-num: 1;

    display: flex;
    gap: var(--gap-y) var(--gap-x);
  }
  .form-row--wrap {
    flex-wrap: wrap;
  }
  .form-row--center {
    justify-content: center;
  }
  .form-row__col {
    flex-grow: 0;
    flex-shrink: 1;
  }
  .form-row--wrap .form-row__col {
    width: calc((100% - var(--gap-x) * (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--wrap .form-row__col.form-row__col--auto {
    width: auto;
  }

  /* サイズ */
  .form-row__col.form-row__col--s {
    width: calc(96 / 375 * 100vw);
  }
  .form-row__col.form-row__col--m {
    width: calc(192 / 375 * 100vw);
  }
  .form-row__col.form-row__col--l {
    width: calc(288 / 375 * 100vw);
  }
  .form-row__col.form-row__col--xl {
    width: calc(400 / 375 * 100vw);
  }

  /* 生年月日など */
  .form-label {
    display: flex;
    align-items: center;
  }
  .form-label__title {
    text-align: left;
    flex-shrink: 0;
    font-weight: bold;
  }
  .form-label__title + .form-label__input {
    padding-left: calc(12 / 375 * 100vw);
  }
  .form-label__input {
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
  入力画面
-------------------------------------------------------------------------- */
@media all and (min-width: 760px), print {
  .c-form {
    --header-width: 304;
    display: flex;
  }
  .c-form__header {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc(var(--header-width) / 1440 * 100vw);
    margin-top: calc(14 / 1440 * 100vw);
    padding-right: calc(64 / 1440 * 100vw);
  }
  .form__item--textarea .c-form__header {
    margin-top: 0;
  }
  [data-page="contact-confilm"] .c-form__cf-text {
    margin-top: calc(14 / 1440 * 100vw);
  }
  .c-form__body {
    flex-grow: 0;
    flex-shrink: 1;
    width: calc(100% - var(--header-width) / 1440 * 100vw);
  }
  .c-form__body--full {
    width: 100%;
  }
  .c-form__body--column {
    width: 100%;
    margin-top: calc(16 / 1440 * 100vw);
  }
  .c-form-input {
    position: relative;
  }
  .c-form__title {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: calc(16 / 1440 * 100vw);
    line-height: 1.5;
    vertical-align: middle;
  }
}
@media all and (max-width: 759px) {
  .c-form {
    --header-width: 304;
  }
  .c-form__header {
    width: calc(var(--header-width) / 375 * 100vw);
    margin-top: calc(14 / 375 * 100vw);
  }
  .form__item--textarea .c-form__header {
    margin-top: 0;
  }
  [data-page="contact-confilm"] .c-form__cf-text {
    margin-top: calc(14 / 375 * 100vw);
  }
  .c-form__body {
    width: 100%;
  }
  .c-form__body--full {
    width: 100%;
  }
  .c-form__body--column {
    width: 100%;
    margin-top: calc(16 / 375 * 100vw);
  }
  .c-form-input {
    position: relative;
  }
  .c-form__title {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: calc(16 / 375 * 100vw);
    line-height: 1.5;
    vertical-align: middle;
  }
}

/* --------------------------------------------------------------------------
  確認画面
-------------------------------------------------------------------------- */
@media all and (min-width: 760px), print {
  .c-form__cf-text {
    margin-top: calc(12 / 1440 * 100vw);
    margin-bottom: calc(11 / 1440 * 100vw);
    font-size: calc(16 / 1440 * 100vw);
    line-height: 1.5;
    word-break: break-all;
  }
  .c-form__cf-text a {
    color: var(--primary-color-500);
    text-decoration: underline;
  }
  .c-form__cf-text a:hover {
    text-decoration: none;
  }
  .c-form__cf-text--sub {
    font-size: calc(12 / 1440 * 100vw);
    line-height: 1.5;
  }
}
@media all and (max-width: 759px) {
  .c-form__cf-text {
    margin-top: calc(12 / 375 * 100vw);
    margin-bottom: calc(11 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
    line-height: 1.5;
    word-break: break-all;
  }
  .c-form__cf-text a {
    color: var(--primary-color-500);
    text-decoration: underline;
  }
  .c-form__cf-text a:hover {
    text-decoration: none;
  }
  .c-form__cf-text--sub {
    font-size: calc(12 / 375 * 100vw);
    line-height: 1.5;
  }
}
/* --------------------------------------------------------------------------
  エラーメッセージ
-------------------------------------------------------------------------- */
@media all and (min-width: 760px), print {
  .c-form--error .c-form__title::before {
  }
  .c-form__error p,
  .c-form__error-text {
    display: block;
    color: var(--form-error-color);
    font-size: calc(12 / 1440 * 100vw);
    line-height: 180%;
    font-weight: 500;
  }
  .c-form__error {
    display: none;
    margin-top: calc(16 / 1440 * 100vw);
  }
  .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;
  }
}
@media all and (max-width: 759px) {
  .c-form--error .c-form__title::before {
  }
  .c-form__error p,
  .c-form__error-text {
    display: block;
    color: var(--form-error-color);
    font-size: calc(12 / 375 * 100vw);
    line-height: 180%;
    font-weight: 500;
    text-indent: -1em;
    padding-left: 1em;
  }
  .c-form__error {
    display: none;
    margin-top: calc(16 / 375 * 100vw);
  }
  .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;
  }
}

/* --------------------------------------------------------------------------
  テキスト入力
-------------------------------------------------------------------------- */
@media all and (min-width: 760px), 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'],
  .c-form select {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;

  }
  .c-form select {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
    color: var(--black-color);
  }
  .c-form textarea {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: calc(240 / 1440 * 100vw);
  }
  .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,
  .c-form select:focus {
    background-color: var(--white-color);
    border-color: var(--black-color);
    outline: 0;
    box-shadow: 0 0 0 calc(4 / var(--form-size) * 1rem) 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 ,
  .c-form.c-form--error .c-form__error-target--active select {
    background-color: var(--form-bg-error-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-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-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 {
    background: var(--form-txt-disable-color);
    cursor: not-allowed;
    color: var(--white-color);
  }
  .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[readonly],
  .c-form input.u-readonly {
    background: #f0f0f0 !important;
    border: #f0f0f0 calc(1 / 1440 * 100vw) 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(16 / 1440 * 100vw) calc(24 / 1440 * 100vw);
    font-size: calc(14 / 1440 * 100vw);
    line-height: 1.8;
    font-weight: 400;
  }
  .c-form input::placeholder,.c-form select::placeholder,.c-form textarea::placeholder {
    font-weight: 400;
  }

  /* セレクトボタン */
  .c-form-select {
    --select-deco-arrow-color: var(--primary-color-500);
    --select-deco-bg-color: var(--white-color);
    position: relative;
  }
  .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(16 / 1440 * 100vw) calc(30 / 1440 * 100vw) calc(16 / 1440 * 100vw) calc(24 / 1440 * 100vw);
    cursor: pointer;
  }
  .c-form-select__ico {
    position: absolute;
    top: calc(8 / 1440 * 100vw);
    right: calc(24 / 1440 * 100vw);
    bottom: calc(8 / 1440 * 100vw);
    width: calc(14 / 1440 * 100vw);
    background-color: var(--select-deco-bg-color);
    border-radius: calc(4 / 1440 * 100vw);
    transition: all 0.2s ease-out;
    pointer-events: none;
  }
  .c-form-select__ico::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: calc(14 / 1440 * 100vw);
    height: calc(8 / 1440 * 100vw);
    margin-top: calc(-3.5 / 1440 * 100vw);
    margin-left: calc(-6.5 / 1440 * 100vw);
    background: url(../images/common/ico_arrow_03.svg) left top no-repeat;
    background-size: 100% 100%;
    content: '';
    pointer-events: none;
  }
  .c-form-select__box:hover .c-form-select__ico {
    --select-deco-bg-color: var(--primary-color-500);
  }
}
@media all and (max-width: 759px) {
  .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: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;

  }
  .c-form select {
    display: block;
    width: 100%;
    background-color: var(--white-color);
    border: none;
    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: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: calc(180 / 375 * 100vw);
  }
  .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,
  .c-form select:focus {
    background-color: var(--white-color);
    border-color: var(--black-color);
    outline: 0;
    box-shadow: 0 0 0 calc(4 / var(--form-size) * 1rem) 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,
  .c-form.c-form--error .c-form__error-target--active select {
    background-color: var(--form-bg-error-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-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-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 {
    background: var(--form-txt-disable-color);
    cursor: not-allowed;
  }
  .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[readonly],
  .c-form input.u-readonly {
    background: #f0f0f0 !important;
    border: #f0f0f0 calc(1 / 375 * 100vw) 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 {
    margin: calc(20 / 375 * 100vw) 0 0 0;
    padding: calc(12 / 375 * 100vw) calc(14 / 375 * 100vw) calc(10 / 375 * 100vw);
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.8;
    font-weight: 400;
  }
  .c-form input::placeholder,.c-form select::placeholder,.c-form textarea::placeholder {
    font-weight: 400;
  }

  /* セレクトボタン */
  .c-form-select {
    --select-deco-arrow-color: var(--secondary-color-500);
    --select-deco-bg-color: var(--white-color);
    position: relative;
  }
  .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 / 375 * 100vw) calc(40 / 375 * 100vw) calc(10 / 375 * 100vw) calc(14 / 375 * 100vw);
    cursor: pointer;
    color: var(--black-color);
  }
  .c-form-select__ico {
    position: absolute;
    top: calc(8 / 375 * 100vw);
    right: calc(8 / 375 * 100vw);
    bottom: calc(8 / 375 * 100vw);
    width: calc(34 / 375 * 100vw);
    background-color: var(--select-deco-bg-color);
    border-radius: calc(4 / 375 * 100vw);
    transition: all 0.2s ease-out;
  }
  .c-form-select__ico::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: calc(14 / 375 * 100vw);
    height: calc(8 / 375 * 100vw);
    margin-top: calc(-3.5 / 375 * 100vw);
    margin-left: calc(-6.5 / 375 * 100vw);
    background: url(../images/common/ico_arrow_03.svg) left top no-repeat;
    background-size: 100% 100%;
    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: 760px), print {
  .c-form-radio-group {
    padding: calc(12 / 1440 * 100vw) 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) / 1440 * 100vw);
    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) / 1440 * 100vw);
    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(22 * var(--radio-btn-ratio) / 1440 * 100vw);
    height: calc(22 * var(--radio-btn-ratio) / 1440 * 100vw);
    margin-top: calc(-10 * var(--radio-btn-ratio) / 1440 * 100vw);
    background-color: var(--white-color);
    border: none;
    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(6 * var(--radio-btn-ratio) / 1440 * 100vw);
    display: block;
    width: calc(10 * var(--radio-btn-ratio) / 1440 * 100vw);
    height: calc(10 * var(--radio-btn-ratio) / 1440 * 100vw);
    margin-top: calc(-4 * var(--radio-btn-ratio) / 1440 * 100vw);
    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-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__footer {
    margin-top: calc(10 / 1440 * 100vw);
    margin-left: calc(28 / 1440 * 100vw);
  }

  /* サイズ */
  .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: 759px) {
  .c-form-radio-group {
    /* padding: calc(12 / 1440 * 100vw) 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) / 1440 * 100vw);
    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(38 * var(--radio-btn-ratio) / 1440 * 100vw);
    transition: color 0.2s linear;
    color: var(--radio-btn-txt-color);
  }
  .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(30 * var(--radio-btn-ratio) / 1440 * 100vw);
    height: calc(30 * var(--radio-btn-ratio) / 1440 * 100vw);
    margin-top: calc(-16 * var(--radio-btn-ratio) / 1440 * 100vw);
    background-color: var(--white-color);
    border: none;
    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(7 * var(--radio-btn-ratio) / 1440 * 100vw);
    display: block;
    width: calc(16 * var(--radio-btn-ratio) / 1440 * 100vw);
    height: calc(16 * var(--radio-btn-ratio) / 1440 * 100vw);
    margin-top: calc(-9 * var(--radio-btn-ratio) / 1440 * 100vw);
    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-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__footer {
    margin-top: calc(12 / 1440 * 100vw);
    margin-left: calc(38 / 1440 * 100vw);
  }

  /* サイズ */
  .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: 760px), print {
  .c-form-check-group {
    padding: calc(10 / 1440 * 100vw) 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) / 1440 * 100vw);
    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) / 1440 * 100vw);
    cursor: pointer;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label {
    padding: 0 0 0 calc(28 * var(--check-btn-ratio) / 1440 * 100vw);
    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']:checked + .c-form-check__label {
    --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) / 1440 * 100vw);
    height: calc(20 * var(--check-btn-ratio) / 1440 * 100vw);
    margin-top: calc(-10 * var(--check-btn-ratio) / 1440 * 100vw);
    background: var(--white-color);
    border: none;
    content: '';
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::after {
    position: absolute;
    top: 50%;
    left: calc(6 * var(--check-btn-ratio) / 1440 * 100vw);
    display: block;
    width: calc(7 * var(--check-btn-ratio) / 1440 * 100vw);
    height: calc(13 * var(--check-btn-ratio) / 1440 * 100vw);
    margin-top: calc(-7 * var(--check-btn-ratio) / 1440 * 100vw);
    border-right: calc(3 * var(--check-btn-ratio) / 1440 * 100vw) solid var(--check-btn-deco-center-color);
    border-bottom: calc(3 * var(--check-btn-ratio) / 1440 * 100vw) 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-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__footer {
    margin-top: calc(10 / 1440 * 100vw);
    margin-left: calc(28 / 1440 * 100vw);
  }

  /* サイズ */
  .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: 759px) {
  .c-form-check-group {
    /* padding: calc(10 / 1440 * 100vw) 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) / 1440 * 100vw);
    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) / 1440 * 100vw);
    cursor: pointer;
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label {
    padding: 0 0 0 calc(38 * var(--check-btn-ratio) / 1440 * 100vw);
    transition: color 0.2s linear;
    color: var(--check-btn-txt-color);
  }
  .c-form-check input[type='checkbox']:checked + .c-form-check__label {
    --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: 0;
    left: 0;
    display: block;
    width: calc(30 * var(--check-btn-ratio) / 1440 * 100vw);
    height: calc(30 * var(--check-btn-ratio) / 1440 * 100vw);
    margin-top: calc(-2 * var(--check-btn-ratio) / 1440 * 100vw);
    background: var(--white-color);
    border: none;
    content: '';
  }
  .c-form-check input[type='checkbox'] + .c-form-check__label::after {
    position: absolute;
    top: 0;
    left: calc(9* var(--check-btn-ratio) / 1440 * 100vw);
    display: block;
    width: calc(12* var(--check-btn-ratio) / 1440 * 100vw);
    height: calc(20* var(--check-btn-ratio) / 1440 * 100vw);
    margin-top: calc(0* var(--check-btn-ratio) / 1440 * 100vw);
    border-right: calc(3* var(--check-btn-ratio) / 1440 * 100vw) solid var(--check-btn-deco-center-color);
    border-bottom: calc(3* var(--check-btn-ratio) / 1440 * 100vw) 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-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__footer {
    margin-top: calc(12 / 1440 * 100vw);
    margin-left: calc(38 / 1440 * 100vw);
  }

  /* サイズ */
  .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: 760px), print {
  .c-ico-required {
    display: inline-block;
    margin-left: calc(24 / 1440 * 100vw);
    line-height: 1;
    vertical-align: text-top;
  }
  .c-ico-required-label {
    display: inline-block;
    color: var(--white-color);
    font-weight: 700;
    line-height: 1;
    vertical-align: top;
    background: var(--red-color);
    padding: calc(4 / 1440 * 100vw) calc(12 / 1440 * 100vw) calc(5 / 1440 * 100vw);
    font-size: calc(12 / 1440 * 100vw);
    border-radius:  calc(100 / 1440 * 100vw);
  }
}
@media all and (max-width: 759px) {
  .c-ico-required {
    display: inline-block;
    margin: calc(2 / 375 * 100vw)  0 0 calc(16 / 375 * 100vw);
    line-height: 1;
    vertical-align: text-top;
  }
  .c-ico-required-label {
    display: inline-block;
    color: var(--white-color);
    font-weight: 700;
    line-height: 1;
    vertical-align: top;
    background: var(--red-color);
    padding: calc(4 / 375 * 100vw) calc(12 / 375 * 100vw) calc(5 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
    border-radius:  calc(100 / 375 * 100vw);
  }
}


/* --------------------------------------------------------------------------
  contact-thanks
-------------------------------------------------------------------------- */
@media all and (min-width: 760px), print {
  [data-page="contact-thanks"] .lower .l-main .c-section--lv1:first-child {
    padding-top: calc(142 / 1440 * 100vw);
  }
  [data-page="contact-thanks"] .c-section--lv2-body > *:first-child {
    margin-top: calc(24 / 1440 * 100vw)!important;
  }
  [data-page="contact-thanks"] .c-section--lv2-body .c-btn {
    margin: calc(96 / 1440 * 100vw) auto 0;
  }
}
@media all and (max-width: 759px) {
  [data-page="contact-thanks"] .lower .l-main .c-section--lv1:first-child {
    padding-top: calc(100 / 375 * 100vw);
  }
  [data-page="contact-thanks"] .c-section--lv2-body > *:first-child {
    margin-top: calc(24 / 375 * 100vw)!important;
  }
  [data-page="contact-thanks"] .c-section--lv2-body .c-btn {
    margin: calc(64 / 375 * 100vw) auto 0;
  }
  [data-page="contact-thanks"] .c-section--lv1 {
    padding-bottom: calc(96 / 375 * 100vw)!important;
  }
}

/* --------------------------------------------------------------------------
  submit ボタン調整
-------------------------------------------------------------------------- */
@media all and (min-width: 760px), print {
  .c-btn-submit{
    background: var(--secondary-color-500);
    border-radius: calc(100 / 1440 * 100vw);
    border: calc(2 / 1440 * 100vw) solid var(--secondary-color-500);
    position: relative;
    padding: calc(14 / 1440 * 100vw) calc(24 / 1440 * 100vw);
    color: #fff;
    font-size: calc(16 / 1440 * 100vw);
    font-weight: 600;
  }
  .bl_c-btn-submit{
    position: relative;
  }
  .bl_c-btn-submit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: var(--secondary-color-500);
    border-radius: calc(100 / 1440 * 100vw);
    border: calc(2 / 1440 * 100vw) solid var(--secondary-color-500);
    height: 100%;
    width: 100%;
    transition: all .4s ease-out;
  }
  .bl_c-btn-submit:hover::before{
    transform: translate(-50%,-50%) scale(1.1);
  }
  input.c-btn-submit{
    cursor: pointer;
  }
  .underline{
    position: relative;
    z-index: 100;
    display: block;
  }
  .underline::after {
    content: "";
    position: absolute;
    top: calc(43 / 1440 * 100vw);
    left: 28%;
    height: 1px;
    width: 45%;
    transition: all .4s ease;
    transform: scale(0, 1);
    transform-origin: left top;
    background-color: #fff;
  }
  .bl_c-btn-submit:hover .underline::after {
    transform: scale(1, 1);
  }
  .c-btn-other{
    background: var(--secondary-color-50);
    border-radius: calc(100 / 1440 * 100vw);
    border: calc(2 / 1440 * 100vw) solid var(--secondary-color-50);
    position: relative;
    padding: calc(14 / 1440 * 100vw) calc(24 / 1440 * 100vw);
    color: #fff;
    font-size: calc(16 / 1440 * 100vw);
    font-weight: 600;
  }
  .bl_c-btn-other{
    position: relative;
  }
  .bl_c-btn-other::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: var(--secondary-color-50);
    border-radius: calc(100 / 1440 * 100vw);
    border: calc(2 / 1440 * 100vw) solid var(--secondary-color-50);
    height: 100%;
    width: 100%;
    transition: all .4s ease-out;
  }
  .bl_c-btn-other:hover::before{
    transform: translate(-50%,-50%) scale(1.1);
  }
  input.c-btn-other{
    cursor: pointer;
  }
  .underline{
    position: relative;
    z-index: 100;
    display: block;
  }
  .underline::after {
    content: "";
    position: absolute;
    top: calc(43 / 1440 * 100vw);
    left: 28%;
    height: 1px;
    width: 45%;
    transition: all .4s ease;
    transform: scale(0, 1);
    transform-origin: left top;
    background-color: #fff;
  }
  .bl_c-btn-other:hover .underline::after {
    transform: scale(1, 1);
  }
}
@media all and (max-width: 759px) {
  .c-btn-submit{
    background: var(--secondary-color-500);
    border-radius: calc(100 / 375 * 100vw);
    border: calc(2 / 375 * 100vw) solid var(--secondary-color-500);
    position: relative;
    padding: calc(14 / 375 * 100vw) calc(24 / 375 * 100vw);
    color: #fff;
    font-weight: 600;
    font-size: calc(16 / 375 * 100vw);
    min-height: calc(52 / 375 * 100vw);
  }
  .c-btn-other{
    background: var(--secondary-color-50);
    border-radius: calc(100 / 375 * 100vw);
    border: calc(2 / 375 * 100vw) solid var(--secondary-color-50);
    position: relative;
    padding: calc(14 / 375 * 100vw) calc(24 / 375 * 100vw);
    color: #fff;
    font-weight: 600;
    font-size: calc(16 / 375 * 100vw);
    min-height: calc(52 / 375 * 100vw);
  }
}


/* --------------------------------------------------------------------------
  Contact Form 7 (WordPress plugin)
-------------------------------------------------------------------------- */
.bl_c-btn-submit .wpcf7-spinner,
.bl_c-btn-other .wpcf7-spinner {
  position: absolute;
}
@media all and (min-width: 760px), print {
  .c-form__body .wpcf7-not-valid-tip {
    margin-top: calc(16 / 1440 * 100vw);
    color: var(--form-error-color);
    font-size: calc(12 / 1440 * 100vw);
    line-height: 180%;
    font-weight: 500;
  }
}
@media all and (max-width: 759px) {
  .c-form__body .wpcf7-not-valid-tip {
    margin-top: calc(16 / 375 * 100vw);
    color: var(--form-error-color);
    font-size: calc(12 / 375 * 100vw);
    line-height: 180%;
    font-weight: 500;
    text-indent: -1em;
    padding-left: 1em;
  }
}

