@charset "UTF-8";
/* ===============================
CF7 root
=============================== */
:root {
  --focus_border: #4d90fe;
  --color_parts: #1a2842;
  --color_border: #b0b6bf;
  --color_error: 228 46 62;
  --placeholder: #e5cbca;
  --column_space: -1px;
  --border_radius: 0;
  /* SP調整 ------------------ */
}
@media screen and (max-width: 768.999px) {
  :root {
    --column_space: 0;
  }
}

/* ===============================
CF7 placeholder
=============================== */
.wpcf7 {
  /* プレースホルダーフォーカスで文字列クリア */
}
.wpcf7 ::-webkit-input-placeholder {
  color: var(--placeholder);
}
.wpcf7 ::-moz-placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.wpcf7 :-moz-placeholder-shown {
  color: var(--placeholder);
}
.wpcf7 :placeholder-shown {
  color: var(--placeholder);
}
.wpcf7 :focus::-webkit-input-placeholder {
  color: transparent;
}
.wpcf7 :focus:-moz-placeholder {
  color: transparent;
}
.wpcf7 :focus::-moz-placeholder {
  color: transparent;
}

/* ================================
CF7 Settings
================================ */
.wpcf7-form-control-wrap {
  display: block;
  font-size: 1.6rem;
  line-height: 1.6;
}
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-number,
.wpcf7-date,
.wpcf7-url,
.wpcf7-select,
.wpcf7-textarea {
  width: 100%;
  margin: 0;
  padding: 0.45em 1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border-radius: 0;
  border: 1px solid var(--color_border);
  box-sizing: border-box;
}
.wpcf7-date,
.wpcf7-select {
  width: auto;
}
.wpcf7-textarea {
  display: block;
  min-height: 220px;
  resize: vertical;
}
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-number,
.wpcf7-select,
.wpcf7-textarea {
  border-radius: var(--border_radius);
}

/* SP調整 ------------------ */
@media screen and (max-width: 768.999px) {
  .wpcf7-text,
  .wpcf7-email,
  .wpcf7-tel,
  .wpcf7-number,
  .wpcf7-date,
  .wpcf7-url,
  .wpcf7-select,
  .wpcf7-textarea {
    padding: 0.3em 0.5em;
  }
  .wpcf7-textarea {
    min-height: 170px;
  }
}

/* ================================
wpcf7-list-item
radio / checkbox のフレーム設定
================================ */
.wpcf7-form-control .wpcf7-list-item {
  display: block;
  white-space: nowrap;
  margin: 0;
}
.wpcf7-list-item label {
  display: inline-block;
  cursor: pointer;
  padding-block: 0.7em;
  line-height: 1.4;
}
.wpcf7-radio,
.wpcf7-checkbox {
  margin-top: var(--column_space);
}
.wpcf7-radio label,
.wpcf7-checkbox label {
  border-radius: var(--border_radius);
}

/* SP調整 ------------------ */
@media screen and (max-width: 768.999px) {
  .wpcf7-form-control:has(.wpcf7-list-item ) {
    display: block;
    margin: -0.3em 0;
  }
  .wpcf7-list-item label {
    padding-block: 0.5em;
  }
}

/* ================================
radio
================================ */
.wpcf7-radio input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.wpcf7-radio .wpcf7-list-item-label {
  display: block;
  position: relative;
  padding-inline: 34px 18px;
}
.wpcf7-radio .wpcf7-list-item-label::before,
.wpcf7-radio .wpcf7-list-item-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 1px solid var(--color_parts);
  border-radius: 9999px;
  box-sizing: border-box;
}
.wpcf7-radio .wpcf7-list-item-label::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='black'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='black'/%3E%3C/svg%3E") no-repeat center/contain;
  background-color: var(--color_parts);
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.1s;
}
.wpcf7-radio :has(input:checked) .wpcf7-list-item-label::after {
  opacity: 1;
}
.wpcf7-radio :has(input:focus-visible) label {
  outline: solid 2px var(--focus_border);
  outline-offset: -3px;
}

/* SP調整 ------------------ */
@media screen and (max-width:768.999px) {
  .wpcf7-radio .wpcf7-list-item-label {
    font-size: 1.5rem;
  }
  .wpcf7-radio .wpcf7-list-item-label::before,
  .wpcf7-radio .wpcf7-list-item-label::after {
    top: 2px;
    left: 9px;
    width: 16px;
    height: 16px;
  }
}

/* ===============================
checkbox
=============================== */
.wpcf7-checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.wpcf7-checkbox .wpcf7-list-item-label {
  display: block;
  position: relative;
  padding-inline: 34px 18px;
}
.wpcf7-checkbox .wpcf7-list-item-label::before,
.wpcf7-checkbox .wpcf7-list-item-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color_parts);
  border-radius: 2px;
  background-color: #fff;
}
.wpcf7-checkbox .wpcf7-list-item-label::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;
  background-color: var(--color_parts);
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.1s;
}
.wpcf7-checkbox :has(input:checked) .wpcf7-list-item-label::after {
  opacity: 1;
}
.wpcf7-checkbox :has(input:focus-visible) label {
  outline: solid 2px var(--focus_border);
}

/* ===============================
Acceptance
=============================== */
.wpcf7-acceptance .wpcf7-list-item {
  margin-right: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label {
  display: block;
  position: relative;
  padding-inline: 34px 10px;
}
.wpcf7-acceptance input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label::before,
.wpcf7-acceptance .wpcf7-list-item-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color_parts);
  background-color: #fff;
}
.wpcf7-acceptance .wpcf7-list-item-label::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;
  background-color: var(--color_parts);
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.1s;
}
.wpcf7-acceptance :has(input:checked) .wpcf7-list-item-label::after {
  opacity: 1;
}
.wpcf7-acceptance :has(input:focus-visible) label {
  outline: solid 2px var(--focus_border);
}

/* SP調整 ------------------ */
@media screen and (max-width: 768.999px) {
  .wpcf7-acceptance label::before {
    top: 5px;
    left: 7px;
    width: 16px;
    height: 16px;
  }
  .wpcf7-acceptance label::after {
    top: 1px;
    left: 14px;
    width: 6px;
    height: 14px;
  }
}

/* ===============================
Select
=============================== */
select:not([data-has-value=true]) {
  color: #888;
}
.js_select_wrap {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--color_border);
  border-radius: var(--border_radius);
}
.js_select_wrap::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  width: 14px;
  height: 12px;
  margin: auto;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: #fff;
}
.js_select_wrap::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background-color: var(--color_parts);
}
.wpcf7-select {
  position: relative;
  width: 100%;
  border: none;
  z-index: 2;
  background-color: transparent;
  cursor: pointer;
}
.js_select_wrap:has(.wpcf7-not-valid) {
  border-color: rgb(var(--color_error));
}
.js_select_wrap:has(.wpcf7-not-valid)::before {
  background-color: rgb(var(--color_error));
}

/* ===============================
File
=============================== */
.wpcf7-file {
  display: block;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  color: #333;
  cursor: pointer;
}

/* ::file-selector-buttonでブラウザ対応できる範囲の見た目調整 */
.wpcf7-file::file-selector-button {
  padding: 0.5em 1em;
  background-color: #444;
  color: #fff;
  border: none;
  margin-right: 1em;
  cursor: pointer;
}

/* Firefoxなど未対応ブラウザ向けのフォールバック */
.wpcf7-file::-webkit-file-upload-button {
  padding: 0.5em 1em;
  background-color: #444;
  color: #fff;
  border: none;
  margin-right: 1em;
  cursor: pointer;
}

/* 無効化・ホバーなどの状態変化 */
.wpcf7-file:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.6;
}
.wpcf7-file:hover::file-selector-button,
.wpcf7-file:hover::-webkit-file-upload-button {
  background-color: #222;
}

/* ===============================
エラー表示
=============================== */
/* エラー枠のカラー変更 */
.wpcf7-not-valid {
  border-color: rgb(var(--color_error));
  border-radius: var(--border_radius);
}
.wpcf7-checkbox.wpcf7-not-valid,
.wpcf7-radio.wpcf7-not-valid {
  outline: 1px solid rgb(var(--color_error));
  border-radius: var(--border_radius);
  background-color: rgb(var(--color_error)/0.05);
}

/* エラー ツールチップ */
.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 5px;
  color: rgb(var(--color_error));
  font-size: 1.5rem;
}
.wpcf7-form-control-wrap .wpcf7-not-valid-tip.animate_in {
  opacity: 0;
  animation: validTip 0.2s forwards;
}
.wpcf7-form-control-wrap .wpcf7-not-valid-tip + .wpcf7-not-valid-tip {
  margin-top: 10px;
}
.wpcf7-form-control-wrap .wpcf7 form.invalid .wpcf7-response-output {
  display: block;
  margin-top: 50px;
  border: 2px solid rgb(var(--color_error));
  color: rgb(var(--color_error));
  font-size: 2.2rem;
  font-weight: var(--font_weight_bold);
  text-align: center;
  line-height: 1.8;
}

@keyframes validTip {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 送信ボタン投下後のエラーメッセージ */
.wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
  display: block;
  margin: 80px auto 0;
  padding: 1em;
  border: 1px solid rgb(var(--color_error));
  color: rgb(var(--color_error));
  font-size: 2rem;
  text-align: center;
  line-height: 1.8;
}

/* SP調整 ------------------ */
@media screen and (max-width: 768.999px) {
  .wpcf7-form-control-wrap .wpcf7 form.invalid .wpcf7-response-output {
    margin-top: 20px;
    font-size: 1.8rem;
  }
  .wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
    margin-top: 50px;
    font-size: 1.8rem;
  }
}