@charset "utf-8";

div.greeting { width:96%; max-width:1000px; margin: 0 auto 0; }
table { width:96%; max-width:1000px;  border-collapse: collapse; border-spacing: 0; margin: 50px auto 50px; }
table th { padding: 10px; background: #cccfaa; border: solid 1px #778ca3; text-align: center; font-size:15px; width:30%;}
table th span { color:red; }
table td { padding: 10px; border: solid 1px #778ca3; font-size:15px; line-height:180%; width:66%; overflow-wrap: normal; }
table td input { padding:8px; border-radius: 4px; border: solid 1px #778ca3; }
table td input.name { width:300px; }
table td input.postcode{ width:140px; }
table td input.address { margin; 0 0 30px 30px; width:400px; }
table td input.tel{ width:200px; }
table td input.mail{ width:400px; }
table td input.golf{ width:400px; }
table td textarea.massage{ width:500px; height:260px;}
table td input.unit { margin:0 8px 0 0; }
table td input.privacy { width:20px; height: 20px; margin:8px 8px 0 0; float:left; }
table td div.privacy { float:left; padding: 6px 0 0 0; }
table td a { text-decoration:underline; }
table td a:hover { color:#3a7898; }
table td select { padding:8px; border-radius: 4px; border: solid 1px #778ca3; margin; 0 0 0 80px; }
table td textarea { margin;10px 0 10px 10px; border-radius: 4px; font-family: "Maru Folk Regular"; }
table.division { margin: 0; }
table.division td { padding: 4px; border: none; }

input:focus, select:focus, textarea:focus { background-color: #edf0d0; outline: solid 1px #778ca3; }

div.nav-button { width:600px; height:160px; margin: 0 auto 0; }
div.nav-button button{ display: block; text-decoration: none; position: relative; margin-top: 0; margin-left: auto; margin-right: auto; width: 230px; height: 44px; line-height: 42px; display: flex; text-align: center; font-size: 14px; cursor: pointer; border:none;  }

div.nav-button button .button-text{ width: 100%; height: 100%; color: #fff; z-index: 10; background: #202020; font-family: "Maru Folk Medium";}
div.nav-button button .button-text:before{ content: ""; position: absolute; top: 0; bottom: 0; width: 0; display: block; z-index: -1; transition: .2s; }
div.nav-button button .button-text:hover{ color: #fff; }
div.nav-button button .button-text:hover:before{ width: 100%; }

div.nav-button div.left { float:left; width: 300px;}
div.nav-button div.right { float:right; width: 300px; }

div.thanks { text-align:center; background:#cccfaa; margin:0 auto 40px; padding: 80px 0; }

@media only screen and (max-width: 760px) {
div.greeting { width:90%; }
table { width:90%; }
table th,td { display: block; width:100%; }
table th { border-top: 1px solid #e0e4b5; }
table th.top { border-top: solid 1px #778ca3; }
table td { width:100%; text-align:center; border-top: 1px solid #fff; }
table td input.name { width:100%; }
table td input.mail{ width:80%; }
table td input.address { width:100%; }
table td input.golf{ width:100%; }
table td textarea.massage { width:100%; }
table td div.privacy {  }
table td.privacy { height:52px; text-align:left; }
div.nav-button { width:60%; text-align: center; }
div.nav-button div.left { float: none; margin:0 auto 20px auto; }
div.nav-button div.right { float: none; margin:0 auto 0; }
table.division { width:100%;  }
table.division td { text-align:center; }
}