@charset "UTF-8";
div#mf_wrapper {
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    text-align: left;
    margin: 0 auto;
    font-family: sans-serif;
}
div#mf_header h1 {
	font-size: 24px;
	border-bottom: solid 1px #999999;
	margin: 0px;
	padding: 0px;
}
div#mf_header h2 {
	font-size: 16px;
	color: #999999;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}
form#mailform {
	padding: 5px;
}
table.mailform {
	width: 100%;
}
table.mailform tr th,table.mailform tr td {
	text-align: left;
	font-weight: normal;
	font-size: 12px;
	border-bottom: solid 1px #999999;
	padding: 7px 5px 7px 5px;
}
table.mailform tr th {
	width: 150px;
}
table.mailform tr th span {
	color: #CC0000;
	font-size: 10px;
}
table.mailform tr th p {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	color: #999999;
}
table.mailform tr td textarea {
	width: 100%;
	height: 120px;
}
/* スマホ用のフォーム表示調整 */
@media screen and (max-width: 779px) {
  /* テーブル全体を縦並びに */
  table.mailform {
    width: 100%;
    table-layout: fixed;
  }

  /* 各行をブロック表示にして縦に並べる */
  table.mailform tr {
    display: block;
    margin-bottom: 1em;
  }

  /* th（項目名）と td（入力欄）を縦に並べて100%幅に */
  table.mailform tr th,
  table.mailform tr td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 4px;
    font-size: 14px;
  }

  /* thの固定幅を解除 */
  table.mailform tr th {
    width: 100% !important;
  }

  /* 入力欄とテキストエリアを画面幅に合わせる */
  table.mailform tr td input[type="text"],
  table.mailform tr td textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

  /* 入力欄の外側にある、行全体を横切るグレーの線border-bottomなし */
@media screen and (min-width: 780px) {
  table.mailform tr th,
  table.mailform tr td {
    border-bottom: none;
  }
}