/* ========================================================
TABATA Co.,ltd.
Contact Style Sheet
First Update 2018-02-08
Last  Update 2018-02-08
Creat by Basic Plus Design Inc.
========================================================= */
/*=========================================================
# Contact
==========================================================*/
/* ---------------------------------------------------------
   Hero
---------------------------------------------------------- */
#contact .c-hero { background: url(../images/other/hero-contact.jpg) no-repeat center center; background-size: cover; }
/* ---------------------------------------------------------
   Contact Top
---------------------------------------------------------- */
#contact-top h3 { margin-top: 60px; padding-bottom: .5em; box-shadow: 0 1px rgba(70,61,29,.6); }
#contact-top .c-flwrap { margin-top: 40px; }
#contact-top .c-cell { padding: 4em 1.4em 1.5em; text-align: center; margin-bottom: 30px; }
.p-contact-phone .p-contact-item, .p-contact-mail .p-contact-item { width: 100%; height: 50px; margin: 40px auto 0; text-indent: -9999px; background-position: center center; background-repeat: no-repeat; }
.p-contact-phone .p-contact-item a, .p-contact-mail .p-contact-item a { display: block; width: 100%; height: 100%; }
.p-contact-phone .p-contact-item { background-image: url(../images/common/phonenumber.svg); background-size: 80% 80%; }
.p-contact-mail .p-contact-item { background-image: url(../images/common/mailadd.svg); background-size: contain; }

@media screen and (min-width : 640px) {
#contact-top .c-flwrap { flex-direction: column; }
#contact-top .c-cell { width: 100%; }
}

@media screen and (min-width : 768px) {
#contact-top .c-flwrap { flex-direction: row; }
#contact-top .c-cell { width: 48%; }
}
/* ---------------------------------------------------------
   Contact Form
---------------------------------------------------------- */
.contact-form .l-container { padding: 15px 3%; width: 100%; }
form::before, form::after { clear: both; content: ""; display: table; }
form { margin-top: 0px; padding: 20px 0; }
form label { margin-right: 1em; white-space: nowrap; }
form input[type="text"], form input[type="email"], form textarea { max-width: 100%; height: 30px; }
form textarea { min-height: 200px; }
form select { height: 2em; min-width: 12em; }
form input[placeholder] { padding-left: 1em; }
::-webkit-input-placeholder {
 color: #CCC;
}
::-moz-placeholder {
 color: #CCC;
opacity: 1;
}
:-ms-input-placeholder {
 color: #CCC;
}
form dl { border-bottom: 1px dotted #999; }
form dt { border-top: 1px dotted #999; line-height: 1.6; padding: 2em 0; }
form dd { line-height: 1.6; padding: 2em 0; }
form dd.f-email input[type="email"] { margin: .5em 0; }
form span.must { display: inline-block; color: red; font-weight: 600; background: none!important; border: none!important; text-shadow: none!important; box-shadow: none!important; border-radius: 0; }
form dt span.must { float: none; }
form dd span.must { font-size: 80%; font-weight: 600; float: none; }
p.c-policy { margin-top: 1em; }
p.c-policy::before { clear: both; content: ""; display: table; }
p.c-policy a { border-bottom: 2px dotted #ffe600; display: inline-block; padding-bottom: .05em; }
p.c-policy a:hover { color: #463d1d; background: #fffded; }
form .c-privacy-checkbox { width: 20em; text-align: center; margin: 60px auto; }

@media only screen and (min-width:900px) {
.contact-form .l-container { padding: 15px 0; }
form { padding: 20px 0; }
form dt { float: left; padding: 2em 0; padding-right: 3em!important; text-align: right; width: 17em!important; }
form dd { border-top: 1px dotted #999; padding: 1.5em 1em 1.5em 3em; }
form dd.f-email input.confirm-email { margin-left: 34px; }
}
/* ---------------------------------------------------------
   for mailformpro
---------------------------------------------------------- */
.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_tel, .mfp_element_password { box-shadow: none; border-radius: 0; }
form#mailformpro label.mfp_checked { background-color: #fffded; box-shadow: none; border-color: rgba(0,0,0,.1); }
form#mailformpro div.mfp_ok { border: #463d1d; background-color: #ffe600; color: #463d1d; }
/* Button */
.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev { width: 160px; margin: 0 20px; height: 3em; font-size: 13px!important; text-shadow: none; border: 0; border-radius: 0; background-image: none; }
.mfp_element_submit { background: #463d1d; color: #fff; }
.mfp_element_reset { background: #ddd; color: #463d1d; padding-bottom: 6px; }
.mfp_element_submit:hover, .mfp_element_reset:hover, .mfp_element_button:hover, button.mfp_next:hover, button.mfp_prev:hover { background-image: none; box-shadow: none; }
.mfp_element_submit:hover { background: #463d1d; }
.mfp_element_reset:hover { background: #ccc; }
form#mailformpro label.mfp_checked, form#mailformpro label.mfp_not_checked { border: none; background-color: #fff; }
form#mailformpro div.mfp_err { background-position: left 4px; background-size: 14px 14px; }
/* Confirm Page*/
table#mfp_confirm_table tr.mfp_colored { background-color: #fffded; }
#mfp_overlay_inner div.mfp_buttons { margin-top: 30px; }
button#mfp_button_send { background: #463d1d; color: #fff; border: 1px solid #463d1d; }
button#mfp_button_cancel { background: #fff; color: #463d1d; border: 1px solid #463d1d; }
button#mfp_button_send:hover, button#mfp_button_cancel:hover { background: #fffded; color: #463d1d; }
/* ---------------------------------------------------------
   thanks.html
---------------------------------------------------------- */
.thanks { background: #FFFDED; border-radius: 10px; box-shadow: 0 10px 8px 0 rgba(70,61,29,.6); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 13px; font-size: 1.3rem; font-weight: 400; height: auto; line-height: 1; margin: 10px auto 0; max-width: 900px; padding: 0; position: relative; width: 90%; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: subpixel-antialiased; }
.thanks, .thanks p, .thankshead p { text-align: center }
.thanks .thankshead { background: #463d1d; -moz-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-top-right-radius: 10px; border-top-right-radius: 10px; height: auto; margin: 0 auto; padding: 60px 0; width: 100%; }
.thankshead p { color: #fff; font-size: 120%; font-weight: 700; letter-spacing: 0.03em; line-height: 1.5em; position: absolute; top: 20px; width: 100%; }
.thanks .clsBT a { background: url(../images/other/close-w.png) no-repeat; background-size: contain; display: block; position: absolute; right: 10px; text-indent: -9999px; top: 10px; width: 21px; }
.thanks .thanksmsg { background: rgba(255,255,255,1); box-shadow: 0 0 0 1px #463d1d inset; color: #333; height: auto; line-height: 1.8em; margin: 0 auto; padding: 30px 0; width: 100%; }
.thanks .thanksfoot { background: #463d1d; -moz-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; font-size: 80%; height: 50px; line-height: 1.5em; margin: 0 auto; padding-bottom: 0; padding-top: 1em; width: 100%; }
.thanks .thanksfoot p { color: #fff }
.thanks span.ssmbr:before { content: "\A"; white-space: pre }

@media only screen and (min-width:480px) {
.thanks span.ssmbr:before { content: ""; white-space: nowrap }
.thanks span.smbr:before { content: "\A"; white-space: pre }
.thanks .thanksfoot { padding-top: 1.8em; }
}

@media only screen and (min-width:640px) {
.thankshead p { font-size: 130%; top: 30px; }
.thanks .thanksmsg { padding: 60px 0; }
.thanks span.smbr:before { content: ""; white-space: nowrap }
.thanks span.mbr:before { content: "\A"; white-space: pre }
}

@media only screen and (min-width:768px) {
.thanks span.mbr:before { content: ""; white-space: nowrap }
.thanks span.tbr:before { content: "\A"; white-space: pre }
}

@media only screen and (min-width:992px) {
.thanks span.tbr:before { content: ""; white-space: nowrap }
.thanks span.break:before { content: "\A"; white-space: pre }
}