/*------------------------------------------------------------
table・・・テーブルのデザイン
-------------------------------------------------------------*/

.TblArea01 {
    margin: 0 20px;
}

.TblArea01 table {
    border-top: 1px solid #DDDDDD;
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 24px;
    color: #505050;
}

.TblArea01 tr {
    border-bottom: 1px solid #DDDDDD;
}

.TblArea01 th {
    width: 210px;
    padding: 11px 0;
    text-align: left;
    font-weight: bold;
}

.TblArea01 td {
    padding: 11px 6.3%;
    text-align: left;
}

@media screen and (max-width: 479px){

.TblArea01 th{
    display:block;
    width: 100%;
}

}

/*------------------------------------------------------------
dl・・・dlリストののデザイン
-------------------------------------------------------------*/

.sdetail dl {
    display: table;
    table-layout: fixed;
    margin-bottom: 10px;
}

.sdetail dt {
    width: 10em;
    padding: 10px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #bd944d;
    text-align: center;
    color: #FFF;
    font-size: 1.4rem;
}

.sdetail dd {
    display: table-cell;
        width:100%;
    font-size: 1.4rem;
}

.sdetail dd {
    padding-left: 6%;
}

@media (max-width: 767px) {
.sdetail dt {
    width: 7em;
    font-size: 1.3rem;
}

.sdetail dd {
    display: table-cell;
        width:100%;
    font-size: 1.3rem;
}
}

/*------------------------------------------------------------
form・・・フォームのデザイン
-------------------------------------------------------------*/

table.form{
width:100%;
border-collapse:collapse;
margin:0 0 15px 0;
}
table.form th{
font-weight:bold;
font-size:1.8rem;
line-height:160%;
padding:15px 0 5px 0;
margin:0px 0px 10px;
border-bottom:dashed 1px #666666;
text-align:left;
display:block;
}
table.form th span.org{
color:#dd0000;
}
table.form td{
font-size:100%;
line-height:160%;
padding:10px 0 5px 0;
display:block;
}
.device{
margin:20px 0px 0px;
padding:0 0 60px 0;
text-align:center;
}
.device a:link {color:#ffffff;text-decoration:none;}
.device a:visited {color:#ffffff;text-decoration:none;}
.device a:hover {color:#ffa423;text-decoration:none;}


input[type="text"], textarea, select {
width: 99%;
border:0;
padding:10px;
margin-bottom:10px;
font-size:18px;
letter-spacing:1px;
border:solid 1px #ccc;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}
input[type="text"]:focus,
textarea:focus {
box-shadow: 0 0 7px #999999;
border: 1px solid #ff0072;
}

input[type="email"], textarea, select {
width:98%;
border:0;
padding:10px;
margin:0px 0px 10px;
font-size:18px;
letter-spacing:1px;
border:solid 1px #ccc;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}
input[type="email"]:focus,
textarea:focus {
box-shadow: 0 0 7px #999999;
border: 1px solid #ff0072;
}

input[type="tel"], textarea, select {
width: 99%;
border:0;
padding:10px;
font-size:18px;
letter-spacing:1px;
border:solid 1px #ccc;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}
input[type="tel"]:focus,
textarea:focus {
box-shadow: 0 0 7px #999999;
border: 1px solid #ff0072;
}

/* Chrome, Safari */
::-webkit-input-placeholder{
color:#999;
}
/* Firefox */
::-moz-placeholder{
color:#999;
}
/* Firefox 18以前 */
:-moz-placeholder{
color:#999;
}
/* IE */
:-ms-input-placeholder{
color:#999;
}

input[type="button"],input[type="submit"],.type_02 {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: none;
  appearance:none;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  padding:0;
  background-color: transparent;
  outline:none;
background-color: #ffa423;
border:1px solid #ffa423;
color:#fff;
padding:25px 20px 25px 20px;
}

input[type="button"]:hover,input[type="submit"]:hover,.type_02:hover {
        background:#dd0000;
	filter: alpha(opacity=70);  
	/* 以下、ゆっくりフェードインさせる設定 */
	-webkit-transition: 0.5s ease-in-out;  
       -moz-transition: 0.5s ease-in-out;  
	-o-transition: 0.5s ease-in-out;  
	transition: 0.5s ease-in-out;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


.type_02{
font-size:125%;
line-height:100%;
width:40%;
padding:25px 0 25px 0;
}

.btn_back {
background-color:#fff!important;
border-color:#ffa423!important;
color:#ffa423!important;
}

.btn_back:hover {
background-color:#fff!important;
border-color:#dd0000!important;
color:#dd0000!important;
}




/*------------------------------------------------------------
MW WP Form 画像10枚
-------------------------------------------------------------*/


.imgimport{
         flex-wrap: wrap;
         justify-content: space-between;
}

.imgimport .item{
         padding:15px;
}

.imgimport .item h3{
         font-size:1.5rem;
        line-height:2.0;
        font-weight:bold;
}

.imgimport .item h3:before {
        font-weight:600;
	content: " \f03e";
        padding-left:2px;
        padding-right:5px;
	font-family: "Font Awesome 5 Free";
}


/*------------------------------------------------------------
MW WP Form デザインカスタマイズ
-------------------------------------------------------------*/

span.error{
        display:block;
}

.mw_wp_form{
        padding:0px 15px;
}

 .radio {
        display: none; /* まず、＜input＞タグの表示を消します*/
    }
    label {
        position: relative;/* ＜label＞を位置の指標になる指示を書きます*/
        display: inline-block;
        padding: 3px 3px 3px 20px;
        cursor: pointer;
    }
    .radio+span::before,/* ＜span＞タグの疑似要素を作ります*/
    .radio+span::after {
        position: absolute;
        content: '';
        top: 50%;
        border-radius: 100%;
        -webkit-transition: all .2s;
        transition: all .2s;
    }
    .radio+span::before {
        left: 0;
        width: 14px;
        height: 14px;
        margin-top: -8px;
        background: #f3f3f3;/* ラジオボタンの元の色の指定*/
        border: 1px solid #ccc;
    }
    .radio+span:hover::before {
        background: #fff;/* ラジオボタンのマウスオーバーしたときの色の指定*/
    }
    .radio+span::after {
        opacity: 0;
        left: 3px;
        width: 8px;
        height: 8px;
        margin-top: -5px;
        background: #3498db;/* ラジオボタンのチェックした時の色の指定*/
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    .radio:checked + span::before {/* ラジオボタンがチェックされたときの隣接しているタグへの指示を書きます*/
        background: #fff;
        border: 1px solid #3498db;/* ラジオボタンのチェックした時の枠の線の指定*/
    }
    .radio:checked + span::after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
}


/* チェックボックス */

 .check {
        display: none; /* まず、＜input＞タグの表示を消します*/
    }
    label {
        position: relative;/* ＜label＞を位置の指標になる指示を書きます*/
        display: inline-block;
        padding: 3px 3px 3px 20px;
        cursor: pointer;
    }
    .check +span::before,/* ＜span＞タグの疑似要素を作ります*/
    .check +span::after {
        position: absolute;
        content: '';
        top: 50%;
        -webkit-transition: all .2s;
        transition: all .2s;
    }
    .check +span::before {
        left: 0;
        width: 14px;
        height: 14px;
        margin-top: -8px;
        background: #f3f3f3;/* ラジオボタンの元の色の指定*/
        border: 1px solid #ccc;
    }
    .radio+span:hover::before {
        background: #fff;/* ラジオボタンのマウスオーバーしたときの色の指定*/
    }
    .check +span::after {
        opacity: 0;
        left: 3px;
        width: 10px;
        height: 15px;
        margin-top: -12px;
    }
    .check:checked + span::before {/* ラジオボタンがチェックされたときの隣接しているタグへの指示を書きます*/
        background: #fff;
        border: 1px solid #3498db;/* ラジオボタンのチェックした時の枠の線の指定*/
    }
    .check:checked + span::after {
        opacity: 1;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
border-right: 3px solid #009a9a;
}



.formname,.formadd{
        justify-content: flex-start;
        align-items: center;
        justify-content: space-between;
}
.formname .item,.formadd .item,.zip .item{
        padding:10px;
}
.formname .item2{
        padding:10px;
        width:100%;
}
.zip{
        justify-content: flex-start;
        align-items: center;
         flex-wrap: wrap;
}
.formname input[type="text"],.formname textarea,.formname select {
        width: 100%;
}
.formadd input[type="text"],.formadd textarea,.formadd select {
        width: 100%;
}
input[type="text"].zip,textarea.zip,.select.zip{
        width: 40%;
}
.mwform-tel-field textarea,.mwform-tel-field select {
        width: 100%;
}
.mwform-tel-field input[type="text"] {
        width: 30%;
}
.price input[type="text"],.price textarea,.price select {
        width: 50%;
}

@media screen and (max-width: 479px){
.type_02{
width:90%;
}
.btn_back {
margin-bottom:10px!important;
background-color:#fff!important;
border-color:#ffa423!important;
color:#ffa423!important;
}
input[type="text"].zip,textarea.zip,.select.zip{
        width: 60%;
}
.formadd{
         flex-wrap: wrap;
}
.formadd input[type="text"],.formadd textarea,.formadd select {
        width: 98%;
}
.formadd input[type="text"].zip,.formadd textarea.zip,.formadd select.zip {
        width: 40%;
}
.formname span{
        display:block;
        width:100%;
}
.mw_wp_form .horizontal-item + .horizontal-item {
    margin-left: 0px;
}
.mwform-tel-field input[type="text"] {
        width: 28%;
}
.formname .item,.formadd .item,.zip .item{
        padding:0px;
}
.formname .item2{
        padding:0px;
        width:100%;
}
}