/* ===================================
THE GARDEN | YONEYAMA PLANTATION
Style Sheet for CONTACT
First Update  2016-10-19
Last Update   2016-11-21
=================================== */

#contact .content { background: #FFF; border-top: 7px solid #009C70; padding: 40px 5% 60px 5%; }

#contact p { text-align: center; }

#contact p.link { background: #009C70; color: #FFF; font-size: 150%; margin: 30px auto; max-width: 480px; padding: 1em; position: relative; text-align: center; width: 90%; }

#contact h3 { background: url(../images/contact/bg-ttl.png) repeat-x left top; background-size: 18px 73px; color: #009C70; font-size: 110%; height: 73px; line-height: 1.5; margin: 50px 0 30px 0; padding: 1em; }

#contact .step ul:after { clear: both; content: ""; display: table; }

#contact .step li { background: url(../images/contact/steparrow.png) no-repeat right center; background-size: auto 40px; float: left; height: 40px; padding-left: 10px; position: relative; text-align: center; width: 34.5%; }

#contact .step li.active { background: #009C70; }

#contact .step li.active:after { content: ""; position: absolute; left: 100%; top: 0; width: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 10px solid #009C70; }

#contact .step li span { color: #009C70; font-size: 80%; line-height: 40px; padding-left: 10px; padding-right: 10px; }

#contact .step li.active span { color: #FFF; }

#contact .step li.step1 { border-left: 1px solid #009C70; z-index: 3; }

#contact .step li.step2 { margin-left: -2%; z-index: 2; }

#contact .step li.step3 { margin-left: -2%; z-index: 0; }

#contact .step li.step3.active:after { border-bottom: 20px solid #009C70; border-top: 20px solid #009C70; }

#contact .form { color: #009C70; margin-top: 80px; position: relative; z-index: 100; }

#contact .form p { text-align: left; }

#contact .form p:first-child { font-size: 120%; }

#contact .form ul { font-size: 100%; }

#contact .grobal-sign { margin-top:1em;}

/*#contact .grobal-sign img{ float:left; margin-right:1em; margin-bottom:0.1em;}*/
#grobal-sign {float:left; margin-right:1em; margin-bottom:0.1em;}


@media print, screen and (max-width: 768px) {

.pc-appear { display: none; }
}


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

#contact h3 { background: url(../images/contact/bg-ttl@2x.png) repeat-x left top; background-size: 18px 73px; }
}

@media print, screen and (min-width: 480px) {

#contact .step li.step2 { margin-left: -4%; }

#contact .step li.step3 { margin-left: -4%; }
}

@media print, screen and (min-width: 640px) {

#contact h3 { font-size: 150%; }

#contact .step li span { font-size: 110%; }

#contact .step li.step2 { margin-left: -3%; }

#contact .step li.step3 { margin-left: -3%; }
}

/* form ********************************************************/

/* base
----------------------------------------------------------- */
form a { display: inline-block; }

form dl { background: #FFF; border-bottom: 1px solid #009C70; margin-bottom: 10px; }

form dt, form dd { font-size: 110%; padding: 5px 0; position: relative; width: 100%; }

form dt { border-top: 1px solid #009C70; padding: 1.8em 1em 0 1em; }

form dd { background: #FFF; padding: 1.8em 1em 0 1em; }

form dt span { vertical-align: super; }

form dd span { margin-right: 20px; }

form dd:after { content: ""; clear: both; display: table; height: 20px; }

form p.note { font-size: 90%!important; }

form input, form button, form textarea, form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }

form input[type="text"], form input[type="email"], form select, form textarea { background: #F5FAF8; border: 1px solid #F5FAF8; color: #000; margin-bottom: 5px; outline: none; padding: 5px; -webkit-transition: all .3s; transition: all .3s; }

form input:focus, form input[type="email"]:focus, form select:focus, form textarea:focus { border: 1px solid #009C70; box-shadow: 0 0 3px #009C70; }

form input, form textarea { padding: 3px; vertical-align: middle; }

form input { height: 50px; line-height: 50px; }

form textarea { max-width: 100%; min-height: 200px; }

form textarea, form input.area1 { width: 100%; }

form input.area2 { width: 60%; }

@media only screen and (min-width: 768px) {

form dt { float: left; width: 25%; }

form dd { border-top: 1px solid #009C70; margin-left: 25%; width: 75%; }

form dd p.note1 { display: block; position: absolute; right: 0; top: 0; }
}

/*---------------------------------------------------------*/
input[type=radio], input[type=checkbox] { display: inline-block; margin-right: 6px; }

input[type=radio] + label, input[type=checkbox] + label { cursor: pointer; display: inline-block; line-height: 1.5px; margin-right: 12px; position: relative; }

@media (min-width: 1px) {

input[type=radio], input[type=checkbox] { display: none; margin: 0; }

input[type=radio] + label, input[type=checkbox] + label { padding: 0 0 0 24px; }

input[type=radio] + label::before, input[type=checkbox] + label::before { background-color: white; content: ""; display: block; height: 18px; left: 0; margin-top: -9px; position: absolute; top: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 18px; }

input[type=radio] + label::before { border: 2px solid #009C70; border-radius: 30px; }

input[type=checkbox] + label::before { border: 1px solid #009C70; }

input[type=radio]:checked + label::after, input[type=checkbox]:checked + label::after { border-radius: 8px; content: ""; display: block; height: 8px; left: 5px; margin-top: -4px; position: absolute; top: 50%; -moz-box-sizing: border-box; box-sizing: border-box; width: 8px; }

input[type=radio]:checked + label::after { left: 5px; width: 8px; height: 8px; margin-top: -4px; background: #009C70; border-radius: 8px; }

input[type=checkbox]:checked + label::after { left: 2px; width: 16px; height: 8px; margin-top: -5px; border-left: 3px solid #009C70; border-bottom: 3px solid #009C70; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}

/* confirm
----------------------------------------------------------- */
#mfp_phase_stat, #mfp_phase_confirm_label.mfp_inactive_phase, #mfp_hidden { display: none; }

table#mfp_confirm_table { border-bottom: 1px solid #009C70; border-spacing: 0px; border-collapse: collapse; width: 100%; }

table#mfp_confirm_table tr.mfp_colored, table#mfp_confirm_table tr.mfp_achroma { background-color: #FFF; height: 50px; }

table#mfp_confirm_table tr th, table#mfp_confirm_table tr td { border-top: solid 1px #009C70; padding: 5px 10px; text-align: left; }

table#mfp_confirm_table tr th { white-space: nowrap; width: 20%; }

table#mfp_confirm_table tr td { background: #F5FAF8; word-break: break-all; }

div#mfp_phase_confirm { border-bottom: none; border-top: none; clear: both; position: relative; }

div#mfp_phase_confirm_inner { padding-bottom: 60px; position: relative; }

div#mfp_phase_confirm h4 { font-size: 180%; padding: 10px 0px; text-align: center; }

/* loading
----------------------------------------------------------- */

div#mfp_loading_screen { background-color: #000; display: none; opacity: 0.8; position: absolute; z-index: 20000; }

div#mfp_loading { background-image: url(images/mfp_loading.gif); display: none; height: 40px; position: absolute; width: 40px; z-index: 20001; }

/* error
----------------------------------------------------------- */
div.mfp_err { background-image: url(images/mfp_error.gif); background-position: 0px 1px; background-repeat: no-repeat; clear: both; color: #F00; display: none; font-size: 12px; line-height: normal; margin: 5px 0px 0px 0px; padding: 3px 0px 5px 17px; text-align: left; }

.mfp_parent_error { border: solid 2px #C00; }

.problem { background-color: #FCC; }

div#mfp_error { background-color: #FEE; border: solid 1px #C00; display: none; padding: 10px; }

div#mfp_error p { font-size: 14px; margin: 0px; padding: 0px; text-align: center; }

div#mfp_error p strong { color: #C00; font-size: 18px; }

/* warning
----------------------------------------------------------- */
div#mfp_warning { background-color: #FEE; border: solid 1px #C00; display: none; padding: 10px; }

div#mfp_warning p { font-size: 14px; margin: 0px; padding: 0px; text-align: center; }

div#mfp_warning p strong { color: #C00; font-size: 18px; }

/* button
----------------------------------------------------------- */
div.form_buttons { clear: both; font-size: 90%; margin-top: 50px; padding: 10px 0px; position: relative; text-align: center; width: 100%; }

div.form_buttons button.btn_reset { background: #FFF; border: 3px solid #009C70; color: #009C70; cursor: pointer; height: 40px; left: 50%; line-height: 18px; margin-left: -120px; position: absolute; top: 0; width: 80px; }

div.form_buttons button.btn_submit { background: #009C70; border: 3px solid #009C70; color: #FFF; cursor: pointer; height: 40px; left: 50%; line-height: 18px; margin-left: -30px; position: absolute; top: 0; width: 150px; }

div.form_buttons button.btn_submit:before, #mfp_button_send:before { content: "\f125"; color: #FFF; font-family: "ionicons"; margin-right: 1em; }

#mfp_button_cancel:before { content: "\f125"; color: #FFF; font-family: "ionicons"; margin-right: 1em; }

div.form_buttons:after { clear: both; content: ""; display: table; height: 40px; }

#mfp_button_cancel { background: #888; border: 3px solid #888; bottom: -30px; color: #FFF; cursor: pointer; height: 40px; left: 50%; line-height: 18px; margin-left: -120px; position: absolute; width: 80px; }

#mfp_button_send { background: #009C70; border: 3px solid #009C70; bottom: -30px; color: #FFF; cursor: pointer; height: 40px; left: 50%; line-height: 18px; margin-left: -30px; position: absolute; width: 150px; }

@media only screen and (min-width: 640px) {

div.form_buttons { font-size: 120%; }

div.form_buttons button.btn_reset, #mfp_button_cancel { margin-left: -170px; width: 120px; }

div.form_buttons button.btn_submit, #mfp_button_send { marign-left: 30px; width: 220px; }
}

/* thanks.html *************************************************/
#thanks .box { background: #F5FAF8; font-size: 110%; margin-top: 120px; padding: 20px 2%; text-align: center; }

#thanks .box h3 { background: none; font-size: 200%; margin-bottom: 50px; }

#thanks .box p.backtop { border: 3px solid #009C70; height: 60px; margin: 50px auto; text-align: center; width: 200px; }

#thanks .box p.backtop a { display: block; line-height: 55px; }

#thanks .box p.backtop a:before { content: "\f125"; color: #009C70; font-family: "ionicons"; margin-right: 1em; }

@media only screen and (min-width: 640px) {

#thanks .box { font-size: 130%; padding: 20px 60px 60px; }
}