@charset "UTF-8";
.file_title {
  vertical-align: top;
}
.file_title > p {
  margin-top: 20px;
}

.file_list li:not(:first-child) {
  margin-top: 30px;
}

.file-label {
  display: inline-block;
  padding: 0 20px;
  background-color: #002846;
  font-size: 16px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
  width: 240px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.file-label input {
  display: none;
}

.kome_text {
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 1.4;
}

/* ドラッグ＆ドロップ */
.form_files {
  max-width: 518px;
}

.codedropz-upload-inner h3 {
  font-size: 22px !important;
}

@media all and (max-width: 767px) {
  .form_files {
    max-width: 350px;
    margin: 0 auto;
  }
  .codedropz-upload-inner h3 {
    font-size: 16px !important;
  }
}
.c-form_btn {
  cursor: pointer;
}

/* 標準スピナーを非表示 */
.wpcf7-spinner {
  display: none !important;
}

/* カスタムスピナー　*/
.custom-spinner {
  display: none; /* 最初は非表示。送信中のみ表示される */
  width: 24px; /* スピナーの幅 */
  height: 24px; /* スピナーの高さ */
  border: 3px solid #ccc; /* 外枠の色（グレー） */
  border-top: 3px solid #3498db; /* 上部分だけ青色にして回転時にアクセントをつける */
  border-radius: 50%; /* 円形にする */
  -webkit-animation: spin 0.8s linear infinite;
          animation: spin 0.8s linear infinite; /* spinアニメーションを0.8秒で繰り返す */
  vertical-align: middle; /* ボタンと縦位置を揃える */
  margin-left: 8px; /* ボタンとの間に余白をつける */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  } /* 開始時は0度 */
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  } /* 終了時は1回転（360度） */
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  } /* 開始時は0度 */
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  } /* 終了時は1回転（360度） */
}
@media all and (max-width: 767px) {
  .file_title {
    vertical-align: top;
  }
  .file_title > p {
    margin-top: 0;
  }
  .file-label {
    display: inline-block;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 6px;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
  .file-label input {
    display: none;
  }
  .kome_text {
    font-size: 13px;
  }
}
.file-name-display {
  padding: 5px 10px;
  background: #f5f5f5;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.file-name-display > span {
  width: calc(100% - 60px);
}

.delete-file-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 3px 0;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  width: 50px;
  text-align: center;
}

.delete-file-btn:hover {
  background: #c82333;
}

/* Contact Form 7のエラーメッセージスタイル */
.wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 0.9em;
  margin-top: 5px;
  display: block;
  /* animation: fadeOut 3s forwards; */
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.wpcf7 form .wpcf7-response-output {
  margin: 1em 0;
  padding: 1em;
  border-radius: 3px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #dc3545;
  background-color: #fff;
  color: #dc3545;
}

/* ファイル入力フィールドのスタイル */
input[type=file] {
  -webkit-transition: display 0.3s ease;
  transition: display 0.3s ease;
}/*# sourceMappingURL=form.css.map */