@charset "UTF-8";
/*
お問い合わせフォーム
Version: 1.0.2
Update: 2021-03-11
*/
header { background-image: url(../img/contact/topimage-pc.jpg); }

@media screen and (max-width: 767px) { header .topImage { background-image: url(../img/contact/topimage-mb.jpg); } }

.content .topComment { padding-bottom: 2em; }

@media screen and (max-width: 767px) { .content .topComment { font-size: 1.4rem; text-align: left; } }

@media screen and (max-width: 767px) { .content #mailform { padding-top: 0; } }

.content #mailform dl { overflow: hidden; background-color: #eee; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

@media screen and (max-width: 767px) { .content #mailform dl { background-color: #fff; border-left-width: 0; border-right-width: 0; border-bottom: 1px solid #282d6e; } }

.content #mailform dt, .content #mailform dd { padding: 20px; text-align: left; border-top: 1px solid #ccc; }

.content #mailform dt.disabled, .content #mailform dd.disabled { display: none; }

.content #mailform dt { clear: left; float: left; width: 270px; font-weight: bold; }

@media screen and (max-width: 767px) { .content #mailform dt { float: none; width: 100%; padding: 10px 20px 0; border-top: 1px solid #282d6e; } }

.content #mailform dd { margin-left: 270px; background-color: #fff; border-left: 1px solid #ddd; }

@media screen and (max-width: 767px) { .content #mailform dd { margin-left: 0; border-top-width: 0; border-left-width: 0; padding: 5px 20px 10px; } }

.content #mailform dd .contactTypeList { overflow: hidden; font-size: 1.4rem; }

.content #mailform dd .contactTypeList label { display: block; float: left; width: 50%; }

@media screen and (max-width: 767px) { .content #mailform dd .contactTypeList label { float: none; width: 100%; } }

.content #mailform .questionnaireComment { padding: 40px 0 20px; color: #282d6e; font-weight: bold; }

.content #mailform .exp { font-size: 90%; }

.content #mailform .inText, .content #mailform .inNumber, .content #mailform .inSelect { padding: 0.3em; font-size: 110%; border: 1px solid #777; border-radius: 2px; }

@media screen and (max-width: 767px) { .content #mailform .inText, .content #mailform .inNumber, .content #mailform .inSelect { font-size: 16px; } }

.content #mailform .inText.empty, .content #mailform .inNumber.empty, .content #mailform .inSelect.empty { background-color: #f2f2f2; }

.content #mailform .inText.inerror, .content #mailform .inNumber.inerror, .content #mailform .inSelect.inerror { background-color: #ffdddd; }

@media screen and (max-width: 767px) { .content #mailform .inText { width: 100%; } }

.content #mailform .inNumber { text-align: center; }

.content #mailform textarea { width: 100%; height: 12em; font-size: 110%; font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic,
 "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }

@media screen and (max-width: 767px) { .content #mailform textarea { font-size: 16px; } }

.content #mailform .inButton { padding: 0.3em; }

.content #mailform .attention { margin-top: 60px; padding: 40px 120px; text-align: left; background-color: #f0f5f5; }

@media screen and (max-width: 767px) { .content #mailform .attention { margin: 20px 15px 0; padding: 20px 20px; } }

.content #mailform .attention .title { color: #ab1c23; }

.content #mailform .attention a { color: #ab1c23; }

.content #mailform .errorMessage { display: none; }

.content #mailform .errorMessage.active { display: block; }

.content #mailform .agreement { padding: 60px 0; text-align: center; }

@media screen and (max-width: 767px) { .content #mailform .agreement { padding: 20px 20px; } }

.content #mailform .agreement label { display: inline-block; padding: 20px 60px; background-color: #eee; user-select: none; cursor: pointer; }

@media screen and (max-width: 767px) { .content #mailform .agreement label { padding: 10px 20px; } }

.content #mailform .submitButton { padding: 30px 0 60px; text-align: center; }

@media screen and (max-width: 767px) { .content #mailform .submitButton { margin: 0 -20px; padding: 10px 0 20px; } }

.content #mailform .submitButton input { padding: 5px 100px; color: #fff; font-size: 2.4rem; font-weight: bold; background-color: #282d6e; cursor: pointer; -webkit-appearance: none; border-radius: 0; }

@media screen and (max-width: 767px) { .content #mailform .submitButton input { padding: 5px 30px; font-size: 1.6rem; } }

.content #mailform .submitButton input:disabled { background-color: #ccc; }

.content #mailform .submitButton input.back { background-color: #999; }

.content .must { color: #f00; }

.content .error { color: #f00; }

.content .mailformSendMsg, .content .mailformErrorMsg { padding: 0 0 8em; font-size: 2rem; text-align: center; }

.content .contactTypeBox.new input { display: none; }

.content .contactTypeBox.new label { display: inline-block; position: relative; width: 100%; padding: 5px 5px; padding-left: 30px; line-height: 1.2; margin-bottom: 0.5em; cursor: pointer; }

.content .contactTypeBox.new label::before { content: ""; display: block; position: absolute; top: 50%; left: 5px; width: 16px; height: 16px; margin-top: -8px; background: #fff; border: 1px solid #ccc; border-radius: 3px; }

.content .contactTypeBox.new label::after { content: ""; position: absolute; display: block; top: 50%; left: 12px; width: 9px; height: 20px; margin-top: -16px; border-right: 6px solid #282d6e; border-bottom: 3px solid #282d6e; opacity: 0; transform: rotate(45deg) translate3d(0, 2px, 0) scale3d(0.7, 0.7, 1); transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; }

.content .contactTypeBox.new input:checked + label::before { border-color: #666; }

.content .contactTypeBox.new input:checked + label::after { opacity: 1; transform: rotate(45deg) scale3d(1, 1, 1); }

.content .contactTypeBox { display: none; }

.content .contactTypeBox.active { display: block; }