@charset "utf-8";

#querytable {
font: 16px/20px sans-serif;
/* font-family: lr oSVbN, qMmpS Pro W3, Hiragino Kaku Gothic Pro, Osaka, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック"; */
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
#querytable table {
width: 720px;
border:1px solid #cbcbcb;
margin-left: auto;
margin-right: auto;
margin-top:8px;
margin-bottom:16px;
border-collapse: separate;
border-spacing: 1px;
empty-cells:show;
}
#querytable th {
background-color:#eff7ff;
border-right:1px solid #cbcbcb;
border-bottom:1px solid #cbcbcb;
text-align: center;
white-space: nowrap;
padding: 4px;
}
#querytable th div{display:block;}
#querytable td {
border-bottom:1px solid #cbcbcb;
background-color:#ffffff;
text-align: left;
padding: 12px;
}
#querytable th.b, #querytable td.b {
border-bottom:none;
}

ul.available_times {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.available_times li {
position:relative;
font-size:18px;
margin: 0px;
padding: 0 0 20px 0;
line-height: 1.3;
height: 1.3rem;
}
form#fillIn input[class="seltm_radio"]{
position: relative;
width: 24px;
height: 24px;
border: 2px solid #000;
border-radius: 50%;
vertical-align: -2px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor:pointer;
}
form#fillIn input[class="seltm_radio"]:checked:before {
position: absolute;
top: 10px;
left: 10px;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #0077cc;
content: '';
}
form#fillIn input[class="seltm_radio"]:checked+label .time {
background-color: #C8E6C9;
}
form#fillIn input[class="seltm_radio"]+label{
cursor:pointer;
}
form#fillIn input[class="seltm_radio"]:disabled {
border: 2px solid #777;
background: #ddd;
}
form#fillIn input[class="seltm_radio"]:disabled,form#fillIn input[class="seltm_radio"]:disabled+label {
cursor: default;
}
ul.available_times li .time{
position:absolute;
top:2px;
left:35px;
padding:4px;
display: flex;
align-items: center;
line-height: 1.3;
height: 1.3rem;
}
div.maru2{
display:inline-block;
width:16px;
height:16px;
margin:0 0 0 2px;
border-radius: 50%;
border: 2px solid #009A57;
}
.batsu2 {
display:inline-block;
width: 16px;
height: 16px;
margin:0 0 0 4px;
}
.batsu2::before,.batsu2::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 16px;
background: #c90926;
}
.batsu2::before{
transform: translate(-50%,-50%)rotate(45deg);
}
.batsu2::after{
transform: translate(-50%,-50%)rotate(-45deg);
}

form#fillIn input[class="bb_radio"]+label{
padding: 0 0 0 22px;
margin:0 0 8px;
font: 16px/20px sans-serif;
line-height: 20px;
display: inline-block;
cursor:pointer;
position: relative;
}
form#fillIn input[class="bb_radio"]+label::before{
content: '';
width: 20px;
height: 20px;
position: absolute;
left: -1px;
top: 9px;
margin-top: -10px;
border: 2px solid #1b2538;
border-radius: 50%;
}
form#fillIn input[class="bb_radio"] {
display:none;
}
form#fillIn input[class="bb_radio"]:checked + label:after{
content: '';
width: 12px;
height: 12px;
position: absolute;
top: 3px;
left: 3px;
background-color: #0077cc;
border-radius: 50%;
}

form#fillIn input[type=text],form#fillIn input[type=number],form#fillIn input[type=tel],form#fillIn input[type=email],form#fillIn input[type=url] {
font: 15px/20px sans-serif;
box-sizing: border-box;
margin: 2px 0 8px;
padding: 0.3em;
transition: 0.3s;
border: 2px solid #1b2538;
border-radius: 4px;

}
form#fillIn input[type=text]:focus,form#fillIn input[type=number]:focus,form#fillIn input[type=tel]:focus,form#fillIn input[type=email]:focus,form#fillIn input[type=url]:focus {
border: 2px solid #0077cc;
outline:0;
}

form#fillIn input[type=checkbox] {
display:none;
}
form#fillIn input[type="checkbox"]+label{
display: none;
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
padding-right: 10px;
margin:5px 0 5px;
}
form#fillIn input[type="checkbox"]+label::before{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 20px;
height: 20px;
margin-top: -10px;
left: 0;
top: 50%;
border: 2px solid;
border-color: #1b2538;
background-color: #fff;
border-radius: 4px;
}
form#fillIn input[type="checkbox"]:checked+label::after{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 18px;
height: 9px;
margin-top: -9px;
top: 50%;
left: 3px;
transform: rotate(-45deg);
border-bottom: 3px solid;
border-left: 3px solid;
border-color:#0077cc;
}

form#fillIn .select {
font: 15px/20px sans-serif;
width: 92px;
height: 32px;
border: 2px solid #1b2538;
border-radius: 4px;
margin:12px 0;
background:#fff;
}
form#fillIn .select2 {
font: 15px/20px sans-serif;
width: 56px;
height: 32px;
border: 2px solid #1b2538;
border-radius: 4px;
margin:12px 0;
background:#fff;
}

form#fillIn textarea {
border: 2px solid #1b2538;
border-radius: 4px;
}
form#fillIn  textarea:focus {
/* border-color:#0077cc; */
border: 2px solid #0077cc;
outline:0;
}

form#fillIn input[type=submit] {
display: inline-block;
border-radius: 8px;
font-size: 16px;
text-align: center;
cursor: pointer;
padding: 12px 12px;
background: #0077cc;
color : #ffffff;
line-height: 1em;
transition: .3s;
border: 2px solid #0077cc;
margin:16px;
}
/* 以下コメントアウト：モバイルページ戻りでhover状態が保持されていてわかりにくくなる */
/*
form#fillIn input[type=submit]:hover {
color:#0077cc;
background:#ffffff;
}
*/
form#fillIn input[type=button] {
display: inline-block;
border-radius: 5%;
font-size: 16px;
text-align: center;
cursor: pointer;
padding: 12px 12px;
background: #dedede;
color:#0077cc;
line-height: 1em;
transition: .3s;
border: 2px solid #0077cc;
margin:16px;
}
form#fillIn input[type=button]:hover {
color:#0077cc;
background:#ffffff;
}
.warnings{
display:none;
margin-bottom:0;
padding:5px 10px;
color:#e74340;
background-color:#fde9e8;
border-color:#fcdcda;
border: 1px solid #fbeed5;
border-radius: 4px;
}

div.spbr{display:inline-block;width:8px;}



/* Responsive max-width: 767px
--------------------------------------------------------- */
@media screen and (max-width: 767px){

#querytable {
font: 15px/20px sans-serif;
/* font-family: lr oSVbN, qMmpS Pro W3, Hiragino Kaku Gothic Pro, Osaka, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック"; */
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
#querytable table {
width:100%;
border:none;
}
#querytable th {
box-sizing:border-box;
background-color:#eff7ff;
border-top: 1px solid #c3d9ff;
border-right:none;
border-bottom:none;
width:100%;
text-align:left;
white-space: normal;
margin:0;
padding: 10px;
font-size:16px;
font-weight: bold;
display: block;
}
#querytable th div{display:inline-block;}
#querytable td {
box-sizing:border-box;
border-bottom:none;
background-color:#ffffff;
width:100%;
text-align:left;
margin:0 auto;
padding: 16px;
font-size:16px;
display: block;
}
#querytable th.b, #querytable td.b {
border-bottom:none;
}

div.spbr{display:block;width:0;}


}