/*
Theme Name: bento
*/



@charset "UTF-8";

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}


/* =========================================
   CF7 Form Base (PC only)
   依頼：mailformpro → CF7 置換用
   対象HTML：.cf7_form 以下（今回作った構造）
========================================= */

.cf7_form{
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 20px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.7;
}

/* 1行（項目） */
.cf7_form .f_row{
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #efefef;
}

.cf7_form .f_row:last-of-type{
  border-bottom: none;
}

/* 左：ラベル */
.cf7_form .f_head{
  width: 240px;
  flex: 0 0 240px;
  padding-top: 6px;
  box-sizing: border-box;
}

.cf7_form .f_label{
  display: inline-block;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.02em;
}

/* 必須バッジ */
.cf7_form .f_req{
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  background: #d9363e;
  border-radius: 999px;
}

/* 右：入力 */
.cf7_form .f_body{
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

/* 2分割（姓/名、セイ/メイ） */
.cf7_form .f_body--split{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cf7_form .f_col{
  flex: 0 0 280px; /* PC固定：ここで幅感を作る */
  box-sizing: border-box;
}

/* サブラベル（姓/名、都道府県 等） */
.cf7_form .f_sub{
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  color: #555;
}

/* ブロック（住所の各要素） */
.cf7_form .f_block{
  margin-bottom: 14px;
}
.cf7_form .f_block:last-child{
  margin-bottom: 0;
}

/* 入力系 */
.cf7_form .f_input,
.cf7_form .f_textarea,
.cf7_form .f_select{
  width: 100%;
  max-width: 620px;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  background: #fff;
  color: #111;
  box-sizing: border-box;
  outline: none;
  font-size: 16px;
}

.cf7_form .f_select{
  padding: 9px 10px;
  max-width: 360px;
}

.cf7_form .f_input--zip{
  max-width: 220px;
}

.cf7_form .f_textarea{
  max-width: 720px;
  min-height: 220px;
  resize: vertical;
}

/* フォーカス */
.cf7_form .f_input:focus,
.cf7_form .f_textarea:focus,
.cf7_form .f_select:focus{
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* プレースホルダー */
.cf7_form .f_input::placeholder,
.cf7_form .f_textarea::placeholder{
  color: #aaa;
}

/* 送信確認（acceptance） */
.cf7_form .f_acceptance{
  display: inline-block;
  margin: 0;
}

.cf7_form .f_acceptance input[type="checkbox"]{
  transform: translateY(2px);
  margin-right: 8px;
}

/* ボタンエリア */
.cf7_form .f_actions{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #efefef;
  text-align: center;
}

.cf7_form .f_submit{
  display: inline-block;
  min-width: 260px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: #111;
  border: 1px solid #111;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cf7_form .f_submit:hover{
  opacity: 0.85;
}

/* CF7 バリデーション表示 */
.cf7_form .wpcf7-not-valid-tip{
  margin-top: 6px;
  font-size: 13px;
  color: #d9363e;
}

.cf7_form .wpcf7-response-output{
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
}

/* 成功 */
.cf7_form .wpcf7-mail-sent-ok,
.cf7_form .wpcf7 form.sent .wpcf7-response-output{
  border: 1px solid #2e8b57;
  background: #eef8f1;
  color: #1f6b3f;
}

/* エラー */
.cf7_form .wpcf7-validation-errors,
.cf7_form .wpcf7 form.invalid .wpcf7-response-output,
.cf7_form .wpcf7 form.failed .wpcf7-response-output{
  border: 1px solid #d9363e;
  background: #fff1f2;
  color: #9b1c24;
}

/* スピナー位置調整（必要なら） */
.cf7_form .wpcf7-spinner{
  display: block;
  margin: 10px auto 0;
}