.mface{font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#333;background:#f7f2ea;margin:0}
.mface .mface-container{max-width:960px;margin:0 auto;padding:24px 16px;text-align:left;background:transparent}
.mface .mface-form_wrapper{max-width:900px;margin:0 auto;background:#fff;border:1px solid #e6ded4;border-radius:10px;padding:18px}
.mface .mface-text{max-width:900px;margin:0 auto 14px;padding:12px 14px;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.mface .mface-red{color:#d32f2f;font-weight:600}

#mylist{width:100%;border-collapse:collapse}
#mylist td{border:0;border-bottom:1px solid #e6ded4;background:transparent;vertical-align:top}
#mylist tr:last-child td{border-bottom:0}

.mface-left{width:220px;padding:16px 12px;font-weight:600;line-height:1.6;white-space:normal}
.mface-right{padding:14px 12px}

.mface label.fieldlabel{display:block;font-size:13px;color:#444;margin:0 0 6px}

.mface input[type=text],
.mface input[type=email],
.mface input[type=tel],
.mface select,
.mface textarea{
  width:100%;box-sizing:border-box;padding:12px;
  border:1px solid #d9c9b7;border-radius:6px;background:#fff;
  font-size:16px;color:#333
}
.mface textarea{min-height:220px;resize:vertical}
.mface input:focus,.mface select:focus,.mface textarea:focus{outline:0;border-color:#c98b57;box-shadow:0 0 0 3px rgba(201,139,87,.18)}
.mface select{max-width:320px;cursor:pointer}

.mface input[type=submit],.mface input[type=button]{background:#c98b57;color:#fff;border:0;border-radius:6px;padding:14px 28px;font-size:16px;cursor:pointer}
.mface input[type=reset]{background:#fff;color:#333;border:1px solid #d9c9b7;border-radius:6px;padding:14px 28px;font-size:16px;cursor:pointer}
.mface input[type=submit]:hover,.mface input[type=reset]:hover,.mface input[type=button]:hover{filter:brightness(.98)}

.error{padding:10px 14px;background:#ffdede;border:1px solid #ff0000;font-weight:700;border-radius:6px;margin:10px 0}

/* 姓・名 / せい・めい をPCで「2列」にする */
#item_1 .mface-right,#item_2 .mface-right{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;align-items:start}
#item_1 .mface-right label.fieldlabel:nth-of-type(1),#item_2 .mface-right label.fieldlabel:nth-of-type(1){grid-column:1;grid-row:1}
#item_1 .mface-right label.fieldlabel:nth-of-type(2),#item_2 .mface-right label.fieldlabel:nth-of-type(2){grid-column:2;grid-row:1}
#item_1 .mface-right input[name="name1-1"],#item_2 .mface-right input[name="kana1-1"]{grid-column:1;grid-row:2}
#item_1 .mface-right input[name="name2-1"],#item_2 .mface-right input[name="kana2-1"]{grid-column:2;grid-row:2}

/* スマホは縦積み */
@media (max-width:768px){
  .mface .mface-form_wrapper{padding:14px}
  #mylist td{display:block;width:100%}
  .mface-left{width:100%;padding:14px 12px 6px}
  .mface-right{padding:0 12px 14px}
  #item_1 .mface-right,#item_2 .mface-right{grid-template-columns:1fr;gap:8px}
  .mface select{max-width:100%}
  .mface input[type=submit],.mface input[type=reset],.mface input[type=button]{width:100%}
}

/* =========================================
   左右余白をなくす（追加分）
   ========================================= */

/* 外枠の左右余白をなくす */
.mface .mface-container{
  padding-left:0;
  padding-right:0;
}

/* フォーム全体を左右フルに */
.mface .mface-form_wrapper{
  padding-left:0;
  padding-right:0;
  border-left:0;
  border-right:0;
  border-radius:0;
}

/* 各行の左右余白を最小限に */
.mface-left{
  padding-left:8px;
  padding-right:8px;
}

.mface-right{
  padding-left:8px;
  padding-right:8px;
}

/* =========================================
   FIX: ふりがな（せい・めい）の2列配置を正しいnameに合わせる
   ========================================= */

/* PC：姓/名・せい/めい を2列 */
#item_1 .mface-right,
#item_2 .mface-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px; /* 横の隙間を少しだけ詰める */
  align-items:start;
}

/* ラベル位置 */
#item_1 .mface-right label.fieldlabel:nth-of-type(1),
#item_2 .mface-right label.fieldlabel:nth-of-type(1){grid-column:1;grid-row:1}
#item_1 .mface-right label.fieldlabel:nth-of-type(2),
#item_2 .mface-right label.fieldlabel:nth-of-type(2){grid-column:2;grid-row:1}

/* 入力位置（名前） */
#item_1 .mface-right input[name="name1-1"]{grid-column:1;grid-row:2}
#item_1 .mface-right input[name="name2-1"]{grid-column:2;grid-row:2}

/* 入力位置（ふりがな：←ここが重要） */
#item_2 .mface-right input[name="kana11-2"]{grid-column:1;grid-row:2}
#item_2 .mface-right input[name="kana12-2"]{grid-column:2;grid-row:2}

/* スマホでも「2列」を維持して離れないようにする */
@media (max-width:768px){
  #item_1 .mface-right,
  #item_2 .mface-right{
    grid-template-columns:1fr 1fr; /* 1列に戻さない */
    gap:8px 12px;
  }
  #item_1 .mface-right label.fieldlabel,
  #item_2 .mface-right label.fieldlabel{
    margin:0 0 4px;
    font-size:12px;
  }
}

/* ================================
   スマホ：左の項目名（mface-left）が消える問題を修正
   ※既存CSSの一番下に追記
   ================================ */
@media (max-width:768px){

  /* テーブルをスマホ用に縦積み */
  #mylist, #mylist tbody, #mylist tr, #mylist td{
    display:block !important;
    width:100% !important;
  }

  /* 項目名（左列）を必ず表示（消える/見切れる対策） */
  #mylist .mface-left{
    display:block !important;
    visibility:visible !important;
    position:relative !important;
    left:auto !important;
    transform:none !important;

    width:100% !important;
    box-sizing:border-box !important;

    margin:14px 0 6px !important;
    padding:10px 12px !important;

    background:#f7f2ea !important;
    color:#333 !important;

    border:0 !important;
    border-top:1px solid #e6ded4 !important;
    white-space:normal !important;
    word-break:break-word !important;
  }

  /* 入力欄（右列） */
  #mylist .mface-right{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;

    padding:0 12px 14px !important;
    margin:0 !important;

    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid #e6ded4 !important;
  }
}

/* ================================
   確認画面：リセットボタン調整
   ================================ */

/* 確認画面のリセットボタン */
.mface input[type="button"]{
  background:#FFF !important;   /* 背景：白 */
  color:#000 !important;        /* 文字：黒 */
  border:1px solid #000 !important;
}

/* ホバー時も色を変えない */
.mface input[type="button"]:hover{
  background:#000 !important;
  color:#000 !important;
  filter:none !important;
}