@charset "UTF-8";

/*
==================================================

   フォーム（お問い合わせ・フィードバック）

==================================================
*/



/*
==================================================
  コンテンツ
==================================================
*/

/* ----- エラーメッセージ ----- */
#contents #error div.message {
margin: 20px 0;
padding: 35px 20px 30px;
border: 1px #c0c0c0 solid;
}
#contents #error div.message ul {
margin: 0 0 0 1.3em;
}

/* ----- 送信完了 ----- */
#contents #complete {
padding: 0 0 50px;
}

#contents section form {
margin: 0;
}

/* ----- 必須マーク ----- */
#contents section form strong.required,
#contents section form span.any {
position: absolute;
right: 15px;
display: inline-block;
margin: 0;
padding: 6px 6px 5px;
border-radius: 4px;
font-size: 75%;
font-weight: normal;
color: #ffffff;
}
#contents section form strong.required {
background-color: #ff8c00;
}
#contents section form span.any {
background-color: #b4b4b4;
}

/* ----- フォーム内テーブル ----- */
#contents section form table {
width: 100%;
table-layout: fixed;
margin: 0 0 30px;
border: 2px #c0c0c0 solid;
}
#contents section form table th,
#contents section form table td {
padding: 20px 15px;
border: 1px #c0c0c0 solid;
line-height: 160%;
}
#contents section form table th {
position: relative;
background-color: #f9f9f9;
font-weight: normal;
text-align: left;
}
#contents section form.contact table th {
width: 13em;
}
#contents section form.feedback table th {
width: 14em;
}
#contents section form table td abbr {
border: none;
text-decoration: none;
}

/* ----- フォーム部品 ----- */
#contents section form input[type="text"],
#contents section form select,
#contents section form textarea {
box-sizing: border-box;
padding: 3px;
font-size: 95%;
font-family: "メイリオ", Arial, sans-serif;
}
#contents section form input[type="text"] {
width: 30em;
max-width: 100%;
}
#contents section form textarea {
width: 40em;
max-width: 100%;
height: 16em;
line-height: 120%;
}
#contents section form.feedback label {
margin: 0 2px;
}

/* ----- 送信ボタン ----- */
#contents section form div.submit {
text-align: center;
}
#contents section form div.submit input[type="submit"] {
padding: 15px 40px;
background-color: #2b95ff;
border: none;
border-radius: 5px;
font-size: 110%;
font-weight: bold;
color: #ffffff;
cursor: pointer;
}
#contents section form div.submit input[type="submit"]:hover {
background-color: #46a3ff;
}

/* ----- 修正用フォーム ----- */
#main #correction form td.mark,
#main #form form td.mark {
background-color: #fceded;
}



/* ----- ★767 ----- */
@media screen and (max-width: 767px) {

#contents #error div.message {
padding: 25px 3px 20px;
}

#contents #complete {
padding: 0;
}

#contents section form strong.required,
#contents section form span.any {
right: 25px;
}

#contents section form table {
border-bottom: 1px #c0c0c0 solid;
border-collapse: collapse;
}
#contents section form table th,
#contents section form table td {
display: block;
min-height: 1em;
padding: 10px;
border: none;
border-bottom: 1px #c0c0c0 solid;
}
#contents section form table th {
position: static;
}
#contents section form.contact table th,
#contents section form.feedback table th {
width: auto;
}

#contents section form input[type="text"],
#contents section form select,
#contents section form textarea {
font-size: 17px; /* Chromeでは16px以下はズームされてしまう */
}
#contents section form input[type="text"] {
width: 100%;
max-width: none;
}
#contents section form textarea {
width: 100%;
max-width: none;
height: 10em;
}

#contents section form div.submit input[type="submit"] {
padding: 15px 30px;
border-radius: 3px;
font-size: 100%;
}
#contents section form div.submit input[type="submit"]:hover {
background-color: #2b95ff;
}

}
/* ----- 767 ----- */