@charset "UTF-8";

/**
 * エントリーフォーム（Contact Form 7）
 * テーブル形式レイアウト
 *
 * 使用ページ: /entry-form/
 */

/* ===========================================
   フォームラッパー
   =========================================== */

.entry-form-wrapper .entry-form {
  border: 1px solid #e5e7eb;
}

/* CF7が自動挿入するpタグのリセット */
.entry-form-wrapper p {
  margin: 0;
}

/* ===========================================
   フォームグループ - テーブル行
   =========================================== */

.entry-form-wrapper .form-group {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-group {
    flex-direction: row;
    align-items: stretch;
  }
}

.entry-form-wrapper .form-group:last-of-type {
  border-bottom: 0;
}

/* ===========================================
   同意エリア（フォームテーブル外）
   =========================================== */

.entry-form-wrapper .form-consent {
  margin-top: 2.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-consent {
    margin-top: 3rem;
  }
}

/* ===========================================
   ラベル - 左カラム
   =========================================== */

.entry-form-wrapper .form-label {
  background-color: #f8f8f8;
  padding: 1rem 1.25rem;
  width: 100%;
  flex-shrink: 0;
  font-weight: 700;
  color: #333;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-label {
    padding: 1rem 1.5rem;
    width: 200px;
    border-right: 1px solid #e5e7eb;
    font-size: 15px;
  }
}

/* ラベルを含むpタグ */
.entry-form-wrapper .form-group > p:first-child {
  background-color: #f8f8f8;
  flex-shrink: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-group > p:first-child {
    width: 200px;
    border-right: 1px solid #e5e7eb;
  }
}

/* 必須マーク */
.entry-form-wrapper .form-label.required::after {
  content: "*";
  color: #ef4444;
  margin-left: 0.25rem;
}

/* ===========================================
   入力エリア - 右カラム
   =========================================== */

.entry-form-wrapper .form-row-half,
.entry-form-wrapper .form-row-date,
.entry-form-wrapper .form-radio-group,
.entry-form-wrapper .form-input {
  padding: 1rem 1.25rem;
  flex: 1;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-row-half,
  .entry-form-wrapper .form-row-date,
  .entry-form-wrapper .form-radio-group,
  .entry-form-wrapper .form-input {
    padding: 1rem 1.5rem;
  }
}

/* CF7がpタグで囲む場合 */
.entry-form-wrapper .form-group > .form-label + p,
.entry-form-wrapper .form-group > label + p {
  padding: 1rem 1.25rem;
  flex: 1;
  margin: 0;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-group > .form-label + p,
  .entry-form-wrapper .form-group > label + p {
    padding: 1rem 1.5rem;
  }
}

/* 補足テキスト */
.entry-form-wrapper .form-note {
  font-size: 12px;
  color: #666;
  margin-top: 0.5rem;
  font-family: "Noto Sans JP", sans-serif;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-note {
    font-size: 13px;
  }
}

.entry-form-wrapper .form-group > .form-label + p .form-note,
.entry-form-wrapper .form-group > label + p .form-note {
  padding-left: 0;
  padding-right: 0;
  margin-top: 0.5rem;
}

/* ===========================================
   テキスト入力・セレクト・テキストエリア共通
   =========================================== */

.entry-form-wrapper input[type="text"],
.entry-form-wrapper input[type="email"],
.entry-form-wrapper input[type="tel"],
.entry-form-wrapper select,
.entry-form-wrapper textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0;
  font-size: 14px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #fff;
  transition: border-color 0.2s;
}

@media (min-width: 768px) {
  .entry-form-wrapper input[type="text"],
  .entry-form-wrapper input[type="email"],
  .entry-form-wrapper input[type="tel"],
  .entry-form-wrapper select,
  .entry-form-wrapper textarea {
    font-size: 15px;
  }
}

.entry-form-wrapper input[type="text"]:focus,
.entry-form-wrapper input[type="email"]:focus,
.entry-form-wrapper input[type="tel"]:focus,
.entry-form-wrapper select:focus,
.entry-form-wrapper textarea:focus {
  outline: none;
  border-color: #2d7a3e;
}

/* プレースホルダー */
.entry-form-wrapper input::placeholder,
.entry-form-wrapper textarea::placeholder {
  color: #9ca3af;
}

/* ===========================================
   セレクトボックス
   =========================================== */

.entry-form-wrapper select {
  appearance: none;
  background-repeat: no-repeat;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  padding-right: 40px;
}

/* ===========================================
   2カラム横並び（姓名など）
   =========================================== */

.entry-form-wrapper .form-row-half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.entry-form-wrapper .form-row-half .form-field {
  padding: 0;
}

.entry-form-wrapper .form-row-half .form-field p {
  margin: 0;
}

/* ===========================================
   生年月日用3カラム
   =========================================== */

.entry-form-wrapper .form-row-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-row-date {
    gap: 0.75rem;
  }
}

.entry-form-wrapper .form-row-date > p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-row-date > p {
    gap: 0.75rem;
  }
}

.entry-form-wrapper .form-row-date select {
  width: auto;
  min-width: 80px;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-row-date select {
    min-width: 100px;
  }
}

.entry-form-wrapper .form-row-date .date-sep {
  font-size: 14px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}

/* 生年月日のbrを非表示 */
.entry-form-wrapper .form-row-date br {
  display: none;
}

/* ===========================================
   ラジオボタングループ
   =========================================== */

.entry-form-wrapper .form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-radio-group {
    gap: 1.5rem;
  }
}

.entry-form-wrapper .form-radio-group > p {
  margin: 0;
}

.entry-form-wrapper .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-width: 768px) {
  .entry-form-wrapper .wpcf7-radio {
    gap: 1.5rem;
  }
}

.entry-form-wrapper .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.entry-form-wrapper .wpcf7-list-item input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #2d7a3e;
  cursor: pointer;
}

.entry-form-wrapper .wpcf7-list-item-label {
  font-size: 14px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
}

@media (min-width: 768px) {
  .entry-form-wrapper .wpcf7-list-item-label {
    font-size: 15px;
  }
}

/* ===========================================
   チェックボックス（同意など）
   =========================================== */

.entry-form-wrapper .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.entry-form-wrapper .wpcf7-acceptance input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  accent-color: #2d7a3e;
  cursor: pointer;
  flex-shrink: 0;
}

.entry-form-wrapper .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 14px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}

@media (min-width: 768px) {
  .entry-form-wrapper .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 15px;
  }
}

/* ===========================================
   同意エリア（テキスト）
   =========================================== */

.entry-form-wrapper .consent-text {
  font-size: 14px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 1rem;
  line-height: 1.625;
}

@media (min-width: 768px) {
  .entry-form-wrapper .consent-text {
    font-size: 15px;
  }
}

.entry-form-wrapper .consent-link {
  color: #2d7a3e;
  text-decoration: underline;
}

.entry-form-wrapper .consent-link:hover {
  text-decoration: none;
}

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

.entry-form-wrapper input[type="file"] {
  font-size: 13px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}

@media (min-width: 768px) {
  .entry-form-wrapper input[type="file"] {
    font-size: 14px;
  }
}

.entry-form-wrapper .wpcf7-file {
  width: 100%;
}

/* ===========================================
   テキストエリア
   =========================================== */

.entry-form-wrapper textarea {
  resize: vertical;
  height: 100px;
  min-height: 60px;
}

/* ===========================================
   送信ボタン
   =========================================== */

.entry-form-wrapper .form-submit {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CF7がpタグで囲む場合も中央寄せ */
.entry-form-wrapper .form-submit p {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .entry-form-wrapper .form-submit {
    margin-top: 3rem;
  }
}

.entry-form-wrapper .btn-submit,
.entry-form-wrapper input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #e67635;
  color: #fff;
  padding: 1rem 3.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  transition: all 0.3s;
  cursor: pointer;
  border: 0;
  font-family: "Noto Sans JP", sans-serif;
  min-width: 200px;
}

@media (min-width: 768px) {
  .entry-form-wrapper .btn-submit,
  .entry-form-wrapper input[type="submit"] {
    padding: 1.25rem 5rem;
    font-size: 20px;
    min-width: 280px;
  }
}

@media (min-width: 1024px) {
  .entry-form-wrapper .btn-submit,
  .entry-form-wrapper input[type="submit"] {
    padding: 1.25rem 6rem;
    min-width: 320px;
  }
}

.entry-form-wrapper .btn-submit:hover,
.entry-form-wrapper input[type="submit"]:hover {
  background-color: #d46a2d;
}

/* ===========================================
   エラーメッセージ
   =========================================== */

.entry-form-wrapper .wpcf7-not-valid-tip {
  color: #ef4444;
  font-size: 12px;
  margin-top: 0.5rem;
  font-family: "Noto Sans JP", sans-serif;
}

@media (min-width: 768px) {
  .entry-form-wrapper .wpcf7-not-valid-tip {
    font-size: 13px;
  }
}

/* 送信中スピナー */
.entry-form-wrapper .wpcf7-spinner {
  margin-left: 0.75rem;
}

/* ===========================================
   送信結果メッセージ（共通）
   =========================================== */

.entry-form-wrapper .wpcf7-response-output {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  font-size: 13px;
  font-family: "Noto Sans JP", sans-serif;
  border: none;
  border-radius: 8px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .entry-form-wrapper .wpcf7-response-output {
    padding: 1.125rem 1.75rem;
    font-size: 14px;
  }
}

/* ===========================================
   バリデーションエラー
   =========================================== */

.entry-form-wrapper .wpcf7-response-output.wpcf7-validation-errors,
.entry-form-wrapper .wpcf7-response-output.wpcf7-acceptance-missing {
  background-color: #fef2f2;
  color: #dc2626;
  border: none;
}

/* アイコン（⚠） */
.entry-form-wrapper .wpcf7-response-output.wpcf7-validation-errors::before,
.entry-form-wrapper .wpcf7-response-output.wpcf7-acceptance-missing::before {
  content: "";
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* CF7デフォルトの黄色枠線を上書き */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border: none;
  background-color: #fef2f2;
  color: #dc2626;
}

/* ===========================================
   送信成功
   =========================================== */

.entry-form-wrapper .wpcf7-response-output.wpcf7-mail-sent-ok {
  background-color: #f0fdf4;
  color: #166534;
}

/* アイコン（✓） */
.entry-form-wrapper .wpcf7-response-output.wpcf7-mail-sent-ok::before {
  content: "";
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23166534'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: none;
  background-color: #f0fdf4;
  color: #166534;
}