/*
Theme Name: tsurumi form
*/


/* form */
/* input base */
p.conf {
background-color: #f4f6f9;
display: block;
padding: 10px;
min-height: 40px;
}
div.conf {
background-color: #f4f6f9;
display: block;
padding: 10px;
min-height: 40px;
}

.myError{font-size: 13px; margin-top: 5px; color:#a40000;}

input, textarea, select {
padding: 4px 10px;
}
textarea, select {
padding: 10px;
}
input, textarea, select {
text-align: left;
/*border:1px solid #bbb;*/
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
font-size: 16px;
}
input[type="text"], input[type="tel"], input[type="mail"], input[type="email"], input[type="password"], input[type="number"], textarea {
border: solid 1px #fff;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
input:focus, textarea:focus {
/* border:solid 1px #000;*/
background-color: #fff !important;
outline: 0;
}
input {
min-height: 40px;
}
input[type=checkbox], input[type=radio] {
margin-right: 5px;
vertical-align: middle;
min-height: 2em;
}
input[type=checkbox] {
appearance: checkbox;
-webkit-appearance: checkbox;
}
input[type=radio] {
appearance: radio;
-webkit-appearance: radio;
}
input[type=text], input[type=tel], input[type=password], input[type=email], input[type=number] {
width: 100%;
font-size: 16px;
display: block;
background-color: #fff;
vertical-align: middle;
border: 1px solid #ccc;
}
textarea {
width: 100%;
font-size: 16px;
display: block;
resize: vertical;
background-color: #fff;
line-height: 1.8;
border: 1px solid #ccc;
}

textarea.textarea_hsm{height: 300px;}

label, input[type=text], input[type=tel], input[type=email],input[type=number], input[type=password], input[type=checkbox], input[type=radio] {
display: inline;
}

input[type="checkbox"],
input[type="radio"] {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

label {
vertical-align: middle;
}
input[type=text][disabled] {
background: #eee;
cursor: not-allowed; /* 禁止カーソル */
}
.select_label {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
text-align: center;
font-size: 16px;
background-color: #fff;
border: 1px solid #ccc;
}
.select_label select {
padding: 9px 2rem 9px 10px;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
width: 103%;
text-align: center;
z-index: 1;
position: relative;
}
.select_label select::-ms-expand {
display: none;
}
.select_label::before {
position: absolute;
top: 50%;
right: 0.7em;
margin-top: -10px;
font-family: "Font Awesome 5 Free";
content: "\f078";
font-size: 12px;
font-weight: 900;
}

.checkboxlist01 li {
margin-bottom: 5px;
}
.select_ws {
max-width: 90px;
width: 100%;
}
.select_w01 {
max-width: 140px;
width: 100%;
}
.select_w180 {
max-width: 180px;
width: 100%;
}
.select_w02 {
max-width: 200px;
width: 100%;
}
.select_w03 {
max-width: 210px;
width: 100%;
}
.select_w04 {
max-width: 240px;
width: 100%;
}
.select_w05 {
max-width: 250px;
width: 100%;
}
.select_wl {
max-width: 300px;
width: 100%;
}
.select_wll {
max-width: 350px;
width: 100%;
}
.select_name {
max-width: 160px;
width: 100%;
}
@media only screen and (max-width: 1180px), print  {
.select_name {
max-width: 47%;
width: 100%;
}
}

.checkbox {
display: flex;
flex-wrap: wrap;
block-size: fit-content;
}
.checkbox label {
width: 50%;
}

.checkbox input[type="checkbox"] {
opacity:0;
appearance: none;
position: absolute;
}
.checkbox span{ display: inline-block;
position: relative;
padding-left: 16px;
line-height: 2;}
.checkbox span::before {
position: absolute;
top: 9px;
left: 0;
width: 14px;
height: 14px;
border: 1px solid #000;
background: #fff;
content: "";
transition: all 0.3s;
border-radius: 2px;
}

.checkbox input:checked + span::before{
background: #000;
transition: all 0.3s;
}

.radioBox {
display: flex;
flex-wrap: wrap;
block-size: fit-content;
}
.radioBox li{
width: 50%;
}

.radioBox input[type="radio"] {
opacity:0;
appearance: none;
position: absolute;
}
.radioBox span{ display: inline-block;
position: relative;
padding-left: 16px;
}
.radioBox span::before {
position: absolute;
top: 2px;
left: 0;
width: 14px;
height: 14px;
border: 1px solid #000;
background: #fff;
content: "";
transition: all 0.3s;
border-radius: 2px;
border-radius: 50%;
}

.radioBox input:checked + span::before{
background: #000;
transition: all 0.3s;
}

.textareaBox{height: 200px;}

/* formBox */
.FormBox{background-color:#fff; padding: 40px; border-radius: 10px;}


.FormTable th {
width: 100%;
padding: 10px 0 5px;
display: inline-block;
text-align: left;
font-weight:bold;
}

.FormTable td {
width: 100%;
padding: 5px 0 10px;
display: inline-block;
text-align: left;
}

.FormBox form .btn{width:100%; margin-top: 30px;}
.FormBox form .btn .btn01:hover{opacity: 0.6;}
@media only screen and (min-width: 1181px) {
.FormBox form{display:flex; flex-wrap: wrap; align-items: flex-start;}
.FormBox form .FormTable{width: 47%;}
.FormBox form .FormTable:first-of-type{margin-right:auto;}

}
@media only screen and (max-width: 1180px), print  {
.FormTable{
width: 100%;
}
}

.js-upload-file,
.js-upload-file2,
.js-upload-file3,
.js-upload-file4{
opacity: 0;
visibility: hidden;
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
}

.btn_file{
padding: 3px 10px;
border-radius: 4px;
background-color: #2b70b8;
color: #fff;
text-align: center;
font-weight: bold;
display: inline-block;
cursor: pointer;
font-size: 1.4rem;
}

.btn_file:hover{opacity: 0.6;}
.js-upload-filename,
.js-upload-filename2,
.js-upload-filename3,
.js-upload-filename4{margin-bottom: 15px; font-size: 1.2rem; margin-top: 10px; border-radius: 5px;}

.FormBox .btn a{margin-bottom:0 !important;}

.btn button{
margin-bottom: 0; width: 185px; margin-left: auto; margin-right: auto; text-align: center;font-size: 14px; background: #2b70b8; color: #fff; font-weight: bold;  padding: 8px 0 7px; display: block;border-radius: 100px; border: 2px solid #2b70b8;text-decoration: none;}
.btn button span{position: relative;display: inline-block;padding-left: 12px;}
.btn button:hover{background: #fff; color: #2b70b8;}
.btn button span:after{
font-family: "Font Awesome 5 Free";
content: "\f054";
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-size: 9px;
font-weight: 900;
height: 9px;
position: absolute;
left: 0;
margin-top: auto;margin-bottom: auto;
top: 0;bottom: 0;
color: #fff; z-index: 2;}
.btn button:hover span:after{color: #fff;}
.btn button:hover{opacity:1.0;filter:alpha(opacity=100);}