@charset "UTF-8";
/* ============================================================
   mailformpro の「送信前の確認画面」の見た目をサイトに合わせる。
   2026-08-31

   mailformpro に付属のCSS（mfp.statics/mailformpro*.css）は
   紫 #8249f4・影付きの角丸ボタン・36pxの見出しなど、
   サイトのどこにも無い配色と質感でできている。
   付属CSSは書き換えず、そのあとにこのファイルを読み込んで上書きする。
   （フォームは7フォルダに分かれていて、付属CSSも同じ数だけ複製されている。
     1本にまとめておけば、直すときに1箇所で済む）

   色はサイトの他のページと同じものを使う。
     赤 #d70b18 ／ 文字 #1a1a1a ／ 補助 #7d766d ／ 罫 #e3dfd8
   ============================================================ */

#mfp_phase_confirm{--ink:#1a1a1a;--body:#413c36;--muted:#7d766d;
  --rule:#e3dfd8;--accent:#d70b18;--tint:#faf9f7}

/* ---- 進行表示（Step.1 > Step.2 > … > 確認）------------------------- */
ul#mfp_phase_stat{padding:22px 10px 6px;text-align:center;line-height:2.2}
ul#mfp_phase_stat li{display:inline-block;padding:5px 13px;margin:0 2px;
  border-radius:2px;border:none;box-shadow:none;font-size:.82rem;letter-spacing:.02em}
ul#mfp_phase_stat li.mfp_inactive_phase{background:#f1efec;color:#8b857c;
  border:none;box-shadow:none}
ul#mfp_phase_stat li.mfp_active_phase{background:#d70b18;color:#fff;font-weight:700;
  border:none;box-shadow:none}
ul#mfp_phase_stat li.mfp_phase_arrow{background:none;color:#c9c3ba;padding:5px 2px;
  box-shadow:none}

/* ---- 見出し --------------------------------------------------------- */
div#mfp_phase_confirm h4{font-size:1.5rem;font-weight:400;color:#1a1a1a;
  letter-spacing:.03em;text-align:center;padding:14px 0 4px;margin:0}

div#mfp_phase_confirm div#mfp_phase_confirm_inner{max-width:860px;margin:0 auto;
  padding:0 20px 24px}

/* ---- 入力内容の一覧 -------------------------------------------------- */
table#mfp_confirm_table{width:100%;margin:22px auto 0;
  border:none;border-top:var(--rule) solid 1px;border-collapse:collapse}
table#mfp_confirm_table tr{border-bottom:var(--rule) solid 1px}
table#mfp_confirm_table tr.mfp_colored,
table#mfp_confirm_table tr.mfp_achroma{background:none}
table#mfp_confirm_table tr th,
table#mfp_confirm_table tr td{text-align:left;padding:13px 4px;vertical-align:top;
  word-break:break-all;overflow-wrap:break-word}
/* スマホ：項目名を上、内容を下に積む */
table#mfp_confirm_table tr th{display:block;width:100%;font-size:.76rem;
  font-weight:400;color:var(--muted);letter-spacing:.06em;padding-bottom:0}
table#mfp_confirm_table tr td{display:block;width:100%;font-size:.95rem;
  line-height:1.85;color:var(--ink);padding-top:4px}

@media screen and (min-width:800px){
  /* PC：項目名と内容を横に並べる */
  table#mfp_confirm_table{table-layout:fixed}
  table#mfp_confirm_table tr th{display:table-cell;width:30%;font-size:.85rem;
    padding:15px 16px 15px 4px}
  table#mfp_confirm_table tr td{display:table-cell;width:70%;font-size:1rem;
    padding:15px 4px}
}

/* ---- ボタン --------------------------------------------------------- */
div.mfp_buttons{text-align:center;margin-top:30px}
div.mfp_buttons button#mfp_button_send,
div.mfp_buttons button#mfp_button_cancel,
#mfp_phase_confirm .mfp_element_button{
  border-radius:0;text-shadow:none;background:none;background-image:none;
  font-size:1rem;font-weight:600;letter-spacing:.04em;
  padding:.85em 2.2em;margin:6px;min-width:210px;cursor:pointer;
  transition:background-color .15s,color .15s}
div.mfp_buttons button#mfp_button_send{background:#d70b18;border:#d70b18 solid 2px;
  color:#fff}
div.mfp_buttons button#mfp_button_send:hover{background:#fff;color:#d70b18}
div.mfp_buttons button#mfp_button_cancel{background:#fff;border:#bbbbbb solid 2px;
  color:#333}
div.mfp_buttons button#mfp_button_cancel:hover{background:#333;border-color:#333;
  color:#fff}

@media screen and (max-width:799px){
  div#mfp_phase_confirm h4{font-size:1.2rem}
  div.mfp_buttons button#mfp_button_send,
  div.mfp_buttons button#mfp_button_cancel{display:block;width:100%;
    max-width:340px;margin:8px auto;min-width:0}
  ul#mfp_phase_stat li{font-size:.74rem;padding:4px 9px}
}

/* ============================================================
   「次へすすむ」「前へもどる」
   付属CSSのままだと、灰色のグラデーション・文字に白い影・角丸5px という
   古い作り。確認画面のボタンと同じ考え方にそろえる。
   進む＝赤、戻る＝白に枠線。押せる範囲を <a> ではなく button 全体に広げる。
   ============================================================ */
button.mfp_next,button.mfp_prev{background:none;border:none;padding:0;margin:5px}
button.mfp_next a,button.mfp_prev a{
  display:inline-block;border-radius:0;text-shadow:none;
  background:none;background-image:none;
  font-size:1rem;font-weight:600;letter-spacing:.04em;
  padding:.85em 2.2em;min-width:210px;text-align:center;margin:0;
  transition:background-color .15s,color .15s,border-color .15s}
button.mfp_next a{background:#d70b18;border:#d70b18 solid 2px;color:#fff}
button.mfp_next a:hover{background:#fff;color:#d70b18;box-shadow:none}
button.mfp_prev a{background:#fff;border:#bbbbbb solid 2px;color:#333}
button.mfp_prev a:hover{background:#333;border-color:#333;color:#fff;box-shadow:none}

@media screen and (max-width:799px){
  button.mfp_next,button.mfp_prev{float:none;display:block;margin:8px auto}
  button.mfp_next a,button.mfp_prev a{display:block;width:100%;max-width:340px;
    margin:0 auto;min-width:0}
}

/* ============================================================
   「内容確認」ボタン
   mailformpro が実行時に作るボタン（.mfp_element_submit）。
   HTMLには書かれていないので、CSSでしか手を入れられない。
   付属CSSでは 1.8rem・灰色グラデ・白い文字影・角丸5px という古い作り。
   「次へすすむ」と同じ赤にそろえる。
   ============================================================ */
form#mailformpro .mfp_element_submit,
form#mailformpro .mfp_element_button{
  border-radius:0;text-shadow:none;background:none;background-image:none;
  background-color:#d70b18;border:#d70b18 solid 2px;color:#fff;
  font-size:1rem;font-weight:600;letter-spacing:.04em;
  padding:.85em 2.2em;min-width:210px;margin:6px;cursor:pointer;
  transition:background-color .15s,color .15s}
form#mailformpro .mfp_element_submit:hover,
form#mailformpro .mfp_element_button:hover{background-color:#fff;color:#d70b18;box-shadow:none}
/* 「次へすすむ／前へもどる」は中の <a> 側で見た目を作っているので、
   button そのものは器に徹する。両方に効かせると二重の箱になる。 */
form#mailformpro button.mfp_next,
form#mailformpro button.mfp_prev{
  background:none;background-color:transparent;border:none;
  padding:0;min-width:0;margin:5px}

/* ファイルの「選択を解除」。目立たせる必要はないので小さく静かに */
form#mailformpro .mfp_attached_reset{
  border-radius:0;text-shadow:none;background:none;background-image:none;
  background-color:#fff;border:#ccc solid 1px;color:#666;
  font-size:.78rem;font-weight:400;letter-spacing:0;
  padding:.35em 1em;min-width:0;margin:0 0 0 8px;cursor:pointer}
form#mailformpro .mfp_attached_reset:hover{background-color:#f2f0ed;color:#333;box-shadow:none}

@media screen and (max-width:799px){
  form#mailformpro .mfp_element_submit,
  form#mailformpro .mfp_element_button{display:block;width:100%;max-width:340px;
    margin:8px auto;min-width:0}
  form#mailformpro .mfp_attached_reset{display:inline-block;width:auto}
}

/* ============================================================
   ラジオの「最初の1つだけ、選んでも丸が塗りつぶされない」問題

   mailformpro は各ラジオ群の先頭の input の直後に、
   <input type="hidden" id="mfp_○○_checkobj"> を実行時に差し込む。
   付属CSSは input:checked + label（隣り合わせ）で見た目を作っているため、
   この隠し input が割り込むと先頭の選択肢だけ効かなくなる。
   隠し input をまたいでも効くようにする。
   ============================================================ */
.cp_ipradio input:checked + input[type="hidden"] + label,
.cp_ipcheck input:checked + input[type="hidden"] + label{color:#8249f4}
.cp_ipradio input:checked + input[type="hidden"] + label:before{
  border-color:#8249f4;background:#8249f4}
.cp_ipcheck input:checked + input[type="hidden"] + label:before{
  border-color:#8249f4;background:#8249f4}