
/*========================================================== お問い合わせフォーム補助 ========================================================= */
.form-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.form-error{margin:0 0 24px;padding:16px;border:1px solid #b00020;color:#b00020;background:#fff5f5;}
.form-error ul{margin:0;padding-left:1.5em;}
/*========================================================== 日本語の折り返し（巡 m1 束6） ========================================================= */
/* 英語の確認・完了・エラー画面の見出しの帯が、幅 100% に左右の余白が足されてはみ出していた（B1-52・M1-033） */
.contact header.c-header.p_header{box-sizing:border-box;}
/* 日本語は <wbr>（文節の切れ目）でだけ折り返す。入らない長さのときだけ、どこででも折る（M1-031・M1-032・M1-065） */
.contact #first h2,.contact .contact_intro,.contact .form_box > p,.contact .form-note,.contact .mf-sending,.form-status p,.form-error li{word-break:keep-all;overflow-wrap:anywhere;}
.mf-nowrap{white-space:nowrap;}
/*========================================================== 確認画面の「送信しています」（巡 m3 B3-04） ========================================================= */
/* 送信を押したら出す。文字の大きさ・色は周りの説明文のまま（大きくしない）。回る印は文字の色で描く */
.mf-sending{margin:12px 0 0;text-align:center;}
.mf-sending[hidden]{display:none!important;}
.mf-spinner{display:inline-block;box-sizing:border-box;width:1em;height:1em;margin-right:.5em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mf-spin .8s linear infinite;}
@keyframes mf-spin{to{transform:rotate(360deg);}}
/* 動きを減らす設定のときは回さない（印は止まった形で、文は出す） */
@media (prefers-reduced-motion:reduce){.mf-spinner{animation:none;border-right-color:currentColor;opacity:.5;}}
/*========================================================== エラーメッセージ画面 ========================================================= */
.form-status-error #first .form_box{width:100%;max-width:none;}
.form-status{text-align:center;padding:14px 0 100px;}
.form-status-error .form-status .form-status__message{margin:0;color:#c51c32;font-size:14px;font-weight:700;line-height:1.9;letter-spacing:.04em;overflow-wrap:anywhere;}
.form-status-error .form-status .form-status__actions{margin:56px 0 0;}
.form-status-error .form-status .form-status__back{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:280px;max-width:100%;padding:18px 24px;border:1px solid #b62328;border-radius:12px;background:#b62328;color:#fff;font-size:16px;font-weight:400;line-height:1.5;text-decoration:none;transition:background-color .25s ease,color .25s ease;}
.form-status-error .form-status .form-status__back:hover{background:#fff;color:#b62328;}
.form-status-error .form-status .form-status__back:focus-visible{outline:3px solid #333;outline-offset:4px;}
.form-status-error .form-status .form-status__contact{margin:20px 0 0;color:#333;font-size:14px;line-height:1.9;letter-spacing:.04em;overflow-wrap:anywhere;}
@media(max-width:767px){
.form-status-error .form-status .form-status__contact{font-size:15px;letter-spacing:.02em;}
.form-status{padding:8px 0 60px;}
.form-status-error .form-status .form-status__message{font-size:17px;letter-spacing:.02em;}
.form-status-error .form-status .form-status__actions{margin-top:36px;}
.form-status-error .form-status .form-status__back{width:260px;min-height:68px;font-size:20px;}
}
/*========================================================== 日本語のフォームの選ぶ欄（巡 m6） ========================================================= */
/* 事業形態・ご相談の内容（選ぶ欄）、ご興味のある商品（チェック）、お取引の形（ラジオ）。文字の大きさは隣の入力欄と同じ 14px（大きくしない） */
.contact .contact_td select.mf-select{width:100%;max-width:100%;box-sizing:border-box;padding:5px;font-size:14px;line-height:1.5;color:#333;background:#fff;border:1px solid #767676;border-radius:2px;}
.contact .contact_th{word-break:keep-all;overflow-wrap:anywhere;}
.contact .mf-opts{display:flex;flex-wrap:wrap;gap:6px 20px;padding:5px 0;}
.contact .mf-opt{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:400;line-height:1.5;cursor:pointer;white-space:nowrap;}
/* style.css の .contact_td input{width:100%;padding:5px} がチェック・ラジオにも効くので戻す */
.contact .contact_td .mf-opt input[type=checkbox],.contact .contact_td .mf-opt input[type=radio]{width:auto;margin:0;padding:0;flex:none;}
.contact .contact_td input::placeholder,.contact .contact_td textarea::placeholder{color:#888;}
@media(max-width:767px){.contact .mf-opts{gap:8px 16px;}.contact .mf-opt{white-space:normal;}}
/* 入力欄の上の案内のリンク（オンラインショップ・カタログ）は下線で分かるように（巡 m6） */
.contact .contact_intro a{text-decoration:underline;text-underline-offset:3px;}
/*========================================================== 日本語の確認画面（巡 m6 束4） ========================================================= */
/* 「営業」の印の件だけ出す、返信しない旨の一文（B6-02）。文字の大きさは周りの説明文のまま、色と太さで目立たせる */
.contact .form-note.mf-noreply{margin:24px 0 12px;color:#c51c32;font-weight:700;text-align:center;}
/* 確認画面の入力の値：空白の無い長い英数字（URL など）がはみ出さないよう、入らないときだけどこででも折る（M6-040）。日本語の折り返しは今のまま */
.contact .contact_tb.check .contact_td{overflow-wrap:anywhere;min-width:0;}
/*========================================================== 日本語の入力画面のいちばん上のチェック（巡 m6 束11・所有者 2026-10-25） ========================================================= */
/* 就活生の方・工場見学をご希望の方のチェック。見落とされないよう、送信ボタンと同じ赤の枠と淡い地で囲み、箱の全体を押せる（指でも押しやすい高さ）。
   文字は隣の欄の名前と同じ 14px（大きくしない）で、太さだけ変える。JavaScript が無いときは hidden のまま出ない */
.contact .mf-student{margin:0 0 30px;}
.contact .mf-student[hidden]{display:none!important;}
.contact .mf-student__label{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:52px;margin:0;padding:12px 18px;border:1px solid #b02628;border-radius:10px;background:#fdf5f5;color:#333;font-size:14px;font-weight:700;line-height:1.7;text-align:left;cursor:pointer;word-break:keep-all;overflow-wrap:anywhere;}
.contact .mf-student__label input[type=checkbox]{flex:none;width:20px;height:20px;margin:0;padding:0;accent-color:#b02628;cursor:pointer;}
.contact .mf-student__label:has(input:checked){background:#f9e4e4;}
.contact .mf-student__label:has(input:focus-visible){outline:2px solid #333;outline-offset:2px;}
@media(max-width:767px){.contact .mf-student{margin-bottom:24px;}.contact .mf-student__label{padding:12px 14px;gap:10px;}}
/*========================================================== 日本語の入力画面の欄の名前の（必須）（巡 m6 束12・所有者 2026-10-25） ========================================================= */
/* 「（必須）」は括弧ごと太字。（任意）（任意・複数選択可）は太字にしない。文字の大きさ・色は欄の名前のまま（太さだけ変える）。
   想定数量・希望時期・お取引の形は contact.php の JavaScript（mark）が、（必須）のときだけこのクラスを付ける */
.contact .contact_th .mf-req{font-weight:700;}
