@charset "utf-8";

/* ####################################### */
/* お問い合わせ */
/* ####################################### */
.contact-tbl {
display: table;
margin-top: 0;
padding: 0;
border-collapse: collapse;
width: 100%;
background-color: transparent;
font-size: 100%;
text-align: left;
}
.contact-tbl dl {display: table-row;}
.contact-tbl dt, .contact-tbl dd {
display: table-cell;
padding: 0.5em 0.8em;
border-bottom: 1px dotted #888888;
}
.contact-tbl dt {
width: 13em;
text-align: left;
vertical-align: middle;
white-space: nowrap;
}
.contact-tbl dt:before {content: "● "; font-size: 85%;}
.contact-tbl dt sup {padding-left: 0.5em; color: #ff0000;}
.contact-tbl dd {
text-align: left;
white-space: nowrap;
background-color: #fff;
}

/* メールアドレス入力 */
.contact-tbl input[type="text"], .contact-tbl input[type="tel"], .contact-tbl input[type="email"], .contact-tbl input[type="url"], .contact-tbl input[type="button"], .contact-tbl textarea {-webkit-appearance: none; -webkit-border-radius: 0;}
.contact-tbl input[type="text"], .contact-tbl input[type="tel"], .contact-tbl input[type="email"], .contact-tbl input[type="url"], .contact-tbl select, .contact-tbl textarea {
margin-bottom: 0.5em;
padding: 0.5em 0;
outline: 0;
text-indent: 0.5em;
font-size: 100%;
line-height: 1;
border: 1px solid #888888;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.contact-tbl select {
padding: 0.5em 1em;
width: 50%;
text-indent: 0;
color: #ffffff;
cursor: pointer;
background-color: #888888;
}
.contact-tbl dd input[type="button"] {
color: #ffffff;
background-color: #888888;
padding: 0.5em 1em;
outline: 0;
font-size: 100%;
line-height: 1;
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}
.contact-tbl textarea {min-height: 10em; width: 90%;}
.contact-tbl input[type="text"]:focus, .contact-tbl input[type="tel"]:focus, .contact-tbl input[type="email"]:focus, .contact-tbl input[type="url"]:focus, .contact-tbl textarea:focus {
-webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
-o-box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
-ms-box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
}

/* 送信する */
#submit-area {margin: 1em 0; text-align: center;}
#submit-area div {margin: 1em 0;}
#submit-area input[type="submit"], #submit-area input[type="reset"] {-webkit-appearance: none; -webkit-border-radius: 0; cursor: pointer;}
#submit-area input[type="submit"], #submit-area input[type="reset"] {
margin: 0 1em;
padding: 0.5em 1em;
outline: 0;
font-size: 100%;
font-weight: bold;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}
#submit-area input[type="submit"] {
color: #ffffff;
background: #fcd157;
border: 1px solid #fcd157;
}
#submit-area input[type="submit"]:hover, #submit-area input[type="submit"]:active {
color: #fcd157;
background: #ffffff;
border: 1px solid #fcd157;
}
#submit-area input[type="reset"] {
color: #ffffff;
background: #666666;
border: 1px solid #666666;
}
#submit-area input[type="reset"]:hover, #submit-area input[type="reset"]:active {
color: #666666;
background: #ffffff;
border: 1px solid #666666;
}

.longinput {width: 80%;}
.shortinput {width: 60%;}
.zipinput {width: 30%;}

#howtopay {
margin: 20px auto;
padding: 10px;
width: 90%;
max-width: 800px;
background-color: #ddd;
border: 5px solid #cc9966;
}
#howtopay dt {
margin: 1em0 0.2em 0;
font-weight: bold;
font-size: 120%;
}
#howtopay dd {
margin: 0.5em 0;
padding: 0 0 0 2em;
}

#howtopay h4 {
margin: 0.5em 0;
font-size: 120%;
color: #444444;
}
#howtopay p {
margin: 1em 0;
font-size: 85%;
color: #444444;
}

/* ####################################### */
/* Responsive Tablet Display */
/* ####################################### */
@media screen and (min-width: 768px) and (max-width: 979px) {
.zipinput {width: 30%;}
.contact-tbl dd {white-space: normal;}

} /* End 768px-959px */

/* ####################################### */
/* Responsive SmartPhone Display */
/* ####################################### */
@media only screen and (max-width: 767px) {
.shop-goods {float: none; margin-bottom: 3em; padding: 0.5em 0.2em; width: 100%; border-bottom: 1px dashed #dddddd;}

.contact-tbl {width: 100%;}
.contact-tbl dd {white-space: normal;}
.contact-tbl input[type="text"], .contact-tbl input[type="tel"], .contact-tbl input[type="email"], .contact-tbl input[type="url"], .contact-tbl input[type="button"], .contact-tbl textarea {font-size: 115%;}
.contact-tbl, .contact-tbl dl, .contact-tbl dt, .contact-tbl dd {display: block;}
.contact-tbl dt, .contact-tbl dd {border: none;}
.contact-tbl dt {
width: 100%;
font-weight: bold;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.contact-tbl dd {
margin-bottom: 1em;
border-bottom: 1px dashed #888888;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.contact-tbl select {width: 95%;}
.contact-tbl dd input[type="button"] {display: block;}
#submit-area input[type="submit"], #submit-area input[type="reset"] {margin-bottom: 1em;}
.longinput {width: 95%;}
.shortinput {width: 95%;}
.zipinput {width: 50%;}

} /* End 0px-767px */

/* ####################################### */
/* Ratina Display */
/* ####################################### */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

} /* End Retina */