/* ==========================================================================
   ACF農園情報登録フォーム 農家さんデザイン（100%全幅・有料・非表示項目完全版）
   ========================================================================== */

/* 1. フォーム全体：横幅を100%にし、温かみのあるベージュ背景と丸みを設定 */
.acf-form {
    width: 100% !important;
    max-width: none !important;
    margin: 40px auto;
    padding: 40px 35px !important;
    background-color: #fbf9f6; /* WP-Membersと同じ背景色 */
    border: 1px solid #e5ded6;   /* 優しいブラウングレーの枠線 */
    border-radius: 12px;         /* 角の丸みを12pxに統一 */
    box-shadow: 0 4px 20px rgba(74, 60, 49, 0.05); /* ほんのりブラウン寄りの影 */
    box-sizing: border-box;
}

/* 2. 項目ごとの縦のスキマ */
.acf-form .acf-field {
    margin-bottom: 24px !important; /* 縦の余白感を24pxに統一 */
    border: none !important;
}

/* 3. 項目の見出し文字（通常ラベル） */
.acf-form .acf-label label {
    font-weight: 700 !important;   /* 太字 */
    font-size: 14px !important;     /* サイズを14pxに統一 */
    color: #4a3c31 !important;      /* 濃いブラウン */
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* 3-1. 【2026-07-15追加】項目の説明文（ACFの「フィールド指示」欄）
   サイズ指定がなくラベルより大きく表示されていたため、ラベルより一回り小さく統一 */
.acf-form .acf-label .description {
    font-size: 13px !important;
    color: #7a7a7a !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   【新設】フォーム最上段への「注意書きテキスト」の自動追加
   ========================================================================== */
.acf-form::before {
    content: "■オレンジ色で囲まれた項目は有料プラン限定の機能です\A　※無料登録時にも入力可能ですが表示されません（有料に切り替えると表示します）\A\A■赤字項目はマイページでのみ表示（一般ユーザーには見えません）\A■各項目は登録後も修正可能です（農園名の変更はSEO面で非推奨）";
    white-space: pre-line;
    display: block !important;
    margin-bottom: 30px !important;
    padding: 14px 18px !important;
    background-color: #fffaf0;     /* フォームに馴染むごく薄いオレンジ */
    border-left: 4px solid #d89134; /* メインのオレンジ色の左線 */
    border-radius: 4px;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #be7a25 !important;      /* 濃い橙色 */
    font-weight: 700 !important;
    box-sizing: border-box;
}

/* ==========================================================================
   【新設】（HPには表示しません）項目の「赤字」設定（7, 8, 9, 10番フィールド）
   ========================================================================== */
.acf-field[data-name="owner_name"] .acf-label label,
.acf-field[data-name="owner_tel"] .acf-label label,
.acf-field[data-name="owner_zipcode"] .acf-label label,
.acf-field[data-name="owner_address"] .acf-label label {
    color: #de5d26 !important;     /* サイトデザインに合わせた視認性の高い赤（濃いオレンジ系） */
    font-weight: 900 !important;   /* より目立たせるための太字 */
}

/* ==========================================================================
   有料プラン限定項目の目立たせ設定（オレンジ系の太字・背景・左線）
   ========================================================================== */

/* 有料項目のラベル文字色をオレンジ系の太字に変更 */
.acf-field[data-name="shop_url_2"] .acf-label label,
.acf-field[data-name="sns_instagram"] .acf-label label,
.acf-field[data-name="sns_facebook"] .acf-label label,
.acf-field[data-name="sns_x"] .acf-label label,
.acf-field[data-name="farm_field_img"] .acf-label label,
.acf-field[data-name="farm_field_img_2"] .acf-label label,
.acf-field[data-name="farm_field_img_3"] .acf-label label,
.acf-field[data-name="gallery_img_1"] .acf-label label,
.acf-field[data-name="gallery_img__caption_1"] .acf-label label,
.acf-field[data-name="gallery_img_2"] .acf-label label,
.acf-field[data-name="gallery_img__caption_2"] .acf-label label,
.acf-field[data-name="gallery_img_3"] .acf-label label,
.acf-field[data-name="gallery_img__caption_3"] .acf-label label,
.acf-field[data-name="gallery_img_4"] .acf-label label,
.acf-field[data-name="gallery_img__caption_4"] .acf-label label,
.acf-field[data-name="gallery_img_5"] .acf-label label,
.acf-field[data-name="gallery_img__caption_5"] .acf-label label,
.acf-field[data-name="gallery_img_6"] .acf-label label,
.acf-field[data-name="gallery_img__caption_6"] .acf-label label,
.acf-field[data-name="farm_field_pr"] .acf-label label {
    color: #d89134 !important;     /* サイトデザインに合わせたオレンジ */
    font-weight: 900 !important;   /* より強調された太字 */
}

/* 有料項目の背景と左線の装飾（オレンジ系：SNS・ショップURL・農園PR） */
.acf-field[data-name="shop_url_2"],
.acf-field[data-name="sns_instagram"],
.acf-field[data-name="sns_facebook"],
.acf-field[data-name="sns_x"],
.acf-field[data-name="farm_field_pr"] {
    background: rgba(216, 145, 52, 0.03) !important; /* 薄いオレンジ背景 */
    padding: 15px !important;
    border-left: 3px solid #d89134 !important; /* 左側のオレンジ線 */
    border-radius: 4px;
    margin-bottom: 24px !important;
}

/* ==========================================================================
   【2026-07-10追加】農園ページ追加画像（farm_field_img/_2/_3）グループ
   背景をグレー系にして「ギャラリー画像」グループと視覚的に区別する。
   対応する「掲載してよい」チェック（_gallery_ok）も同じ色でまとめて囲む。
   ========================================================================== */
.acf-field[data-name="farm_field_img"],
.acf-field[data-name="farm_field_img_gallery_ok"],
.acf-field[data-name="farm_field_img_2"],
.acf-field[data-name="farm_field_img_2_gallery_ok"],
.acf-field[data-name="farm_field_img_3"],
.acf-field[data-name="farm_field_img_3_gallery_ok"] {
    background: rgba(118, 118, 118, 0.07) !important; /* 薄いグレー背景 */
    padding: 15px !important;
    border-left: 3px solid #767676 !important; /* 左側のグレー線 */
    border-radius: 4px;
    margin-bottom: 24px !important;
}

/* 画像フィールドと「掲載してよい」チェックの継ぎ目を消し、1つの箱に見せる */
.acf-field[data-name="farm_field_img"],
.acf-field[data-name="farm_field_img_2"],
.acf-field[data-name="farm_field_img_3"] {
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
}
.acf-field[data-name="farm_field_img_gallery_ok"],
.acf-field[data-name="farm_field_img_2_gallery_ok"],
.acf-field[data-name="farm_field_img_3_gallery_ok"] {
    border-radius: 0 0 4px 4px !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   【2026-07-10追加】ギャラリー画像（農園ページ内ギャラリー／gallery_img_1〜6）グループ
   背景をブルー系にして「農園ページ追加画像」グループと視覚的に区別する。
   対応する「掲載してよい」チェック・キャプション欄も同じ色でまとめて囲む。
   ========================================================================== */
.acf-field[data-name="gallery_img_1"],
.acf-field[data-name="gallery_img_1_gallery_ok"],
.acf-field[data-name="gallery_img__caption_1"],
.acf-field[data-name="gallery_img_2"],
.acf-field[data-name="gallery_img_2_gallery_ok"],
.acf-field[data-name="gallery_img__caption_2"],
.acf-field[data-name="gallery_img_3"],
.acf-field[data-name="gallery_img_3_gallery_ok"],
.acf-field[data-name="gallery_img__caption_3"],
.acf-field[data-name="gallery_img_4"],
.acf-field[data-name="gallery_img_4_gallery_ok"],
.acf-field[data-name="gallery_img__caption_4"],
.acf-field[data-name="gallery_img_5"],
.acf-field[data-name="gallery_img_5_gallery_ok"],
.acf-field[data-name="gallery_img__caption_5"],
.acf-field[data-name="gallery_img_6"],
.acf-field[data-name="gallery_img_6_gallery_ok"],
.acf-field[data-name="gallery_img__caption_6"] {
    background: rgba(60, 113, 173, 0.06) !important; /* 薄いブルー背景（サイト内リンク色#3c71adと同系統） */
    padding: 15px !important;
    border-left: 3px solid #3c71ad !important; /* 左側のブルー線 */
    border-radius: 4px;
    margin-bottom: 24px !important;
}

/* 画像・チェック・キャプションの3点セットの継ぎ目を消し、1つの箱に見せる */
.acf-field[data-name="gallery_img_1"],
.acf-field[data-name="gallery_img_2"],
.acf-field[data-name="gallery_img_3"],
.acf-field[data-name="gallery_img_4"],
.acf-field[data-name="gallery_img_5"],
.acf-field[data-name="gallery_img_6"] {
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
}
.acf-field[data-name="gallery_img_1_gallery_ok"],
.acf-field[data-name="gallery_img_2_gallery_ok"],
.acf-field[data-name="gallery_img_3_gallery_ok"],
.acf-field[data-name="gallery_img_4_gallery_ok"],
.acf-field[data-name="gallery_img_5_gallery_ok"],
.acf-field[data-name="gallery_img_6_gallery_ok"] {
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.acf-field[data-name="gallery_img__caption_1"],
.acf-field[data-name="gallery_img__caption_2"],
.acf-field[data-name="gallery_img__caption_3"],
.acf-field[data-name="gallery_img__caption_4"],
.acf-field[data-name="gallery_img__caption_5"],
.acf-field[data-name="gallery_img__caption_6"] {
    border-radius: 0 0 4px 4px !important;
    margin-top: 0 !important;
}


/* 4. 入力欄・テキストエリア（通常時） */
.acf-form .acf-input input[type="text"],
.acf-form .acf-input input[type="number"],
.acf-form .acf-input input[type="email"],
.acf-form .acf-input input[type="url"],
.acf-form .acf-input textarea,
.acf-form .acf-input select {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    padding: 12px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* 5. 入力欄をクリックしたとき（フォーカス時） */
.acf-form .acf-input input[type="text"]:focus,
.acf-form .acf-input input[type="number"]:focus,
.acf-form .acf-input input[type="email"]:focus,
.acf-form .acf-input input[type="url"]:focus,
.acf-form .acf-input textarea:focus,
.acf-form .acf-input select:focus {
    border-color: #d89134 !important;
    box-shadow: 0 0 0 4px rgba(216, 145, 52, 0.15) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

/* 6. 必須マーク（*）の色 */
.acf-form .acf-required {
    color: #de5d26 !important;
    margin-left: 4px;
}

/* ==========================================================================
   7. 価格入力欄（番号フィールド）の横幅制限 と 「円」「追加メッセージ」の装飾調整
   ========================================================================== */
.acf-field[data-name="s_5\338f"] .acf-input input[type="number"],
.acf-field[data-name="s_10kg"] .acf-input input[type="number"],
.acf-field[data-name="g_10kg"] .acf-input input[type="number"],
.acf-field[data-name="g_20kg"] .acf-input input[type="number"],
.acf-field[data-name="g_30kg"] .acf-input input[type="number"] {
    max-width: 150px !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* 入力欄の右側に自動挿入される「円」の見た目 */
.custom-yen-text {
    display: inline-block !important;
    margin-left: 8px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #4a3c31 !important; /* 項目の見出しと同じ濃いブラウン */
    vertical-align: middle;
}

/* 精米5kg価格のラベル上に自動挿入される「注意書き」の見た目 */
.custom-form-notice {
    display: block !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #d89134 !important; /* 統一感のあるメインオレンジ色 */
}

/* ==========================================================================
   【2026-07-10追加】画像ブロックの見出し（枠の外・JSでフィールドの直前に挿入）
   ========================================================================== */
.custom-image-block-heading {
    display: block !important;
    margin: 30px 0 14px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #5c5c5c !important; /* グレー枠グループと同系色 */
    letter-spacing: 0.03em;
}
.custom-image-block-heading .custom-image-block-subheading {
    display: block;
    margin-top: 6px;
    font-size: 15px;
}
.custom-image-block-heading-blue {
    color: #2f5d8a !important; /* ブルー枠グループと同系色 */
}

/* ==========================================================================
   8. ACFの投稿・更新ボタンのデザイン調整
   ========================================================================== */
.acf-form .acf-form-submit {
    margin-top: 35px !important;
    text-align: center !important;
}

.acf-form .acf-form-submit input[type="submit"].acf-button {
    width: 220px !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
    background-color: #d89134 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(216, 145, 52, 0.25) !important;
    transition: background-color 0.2s, box-shadow 0.2s !important;
}

.acf-form .acf-form-submit input[type="submit"].acf-button:hover {
    background-color: #be7a25 !important;
    box-shadow: 0 6px 16px rgba(216, 145, 52, 0.35) !important;
}

/* ==========================================================================
   【2026-07-13追加】ACF true/falseスイッチ（「はい」「いいえ」等）の
   日本語ラベルがスマホ幅で折り返され「は」「い」等に文字切れする不具合対策
   ACFは初期表示時にJSでon/off文字幅を計測してpx指定するが、
   スマホ幅・フォント環境によって計測が狭くなり折り返される既知の挙動のため、
   折り返し禁止＋最低幅の確保をCSS側で明示的に固定する。
   ========================================================================== */
.acf-form .acf-switch {
    min-width: 62px !important;
    box-sizing: content-box !important;
}
.acf-form .acf-switch .acf-switch-on,
.acf-form .acf-switch .acf-switch-off {
    white-space: nowrap !important;
    overflow: visible !important;
}

@media (max-width: 600px) {
    .acf-form .acf-switch {
        min-width: 66px !important;
    }
}