/*------------------------------------------------------------
検索フォーム
-------------------------------------------------------------*/

.cat-select{
    text-align: right;
}

select#sortbox{
    width: 200px;
}


.tarent_search_inner{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.megabox .tarent_search{
    display: flex; /*最新のブラウザ*/
    display: -webkit-box;  /*レガシーCC*/
    display: -webkit-flex; /*Android2.3*/
    display: -ms-flexbox; /*IE9~用*/
    justify-content: flex-end;
}

.megabox .tarent_search .tarent_search_inner{
    width: 200px;
}

.megabox input[type="search"]{
    margin-bottom: 0px;
}

#searchform {
    padding: 0px 1.0em;
}

.searchfield {
    width: 100%;
    position: absolute;
    right:0;
    font-size: 1rem;
    display: block;
    box-sizing: border-box;
    padding: .5rem;
    letter-spacing: 1px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fff;
    -webkit-appearance: none;
}

#searchsubmit {
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.8rem;
    font-weight: 900;
    position: absolute;
    top: 1.3em;
    right: 1.0rem;
    padding: 0;
    transform: translateY(-50%);
    color: #a7853e;
    border: none;
    background-color: transparent;
}


@media screen and (max-width: 479px){
    #text-1 .panel-body{
        padding:12px 0px;
        margin:0px 10px;
    }
    .searchfield {
        margin:0 auto;
        width:90%;
        padding: 1.0rem;
    }
}



/*------------------------------------------------------------
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{
    color: #8A715B;
font-weight:bold;
    font-size:1.8rem;-webkit-appearance
line-height:160%;
    padding:15px;
    margin:20px 0px 10px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left:7px solid #8A715B;
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="search"],input[type="text"],input[type="number"], textarea, select {
width: 100%;
    box-sizing: border-box;
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;
}

.cat-select p{
    display: inline-block;
    font-size: 1.4rem;
    color: #886F57;
    line-height: 1.8;
    margin-bottom: 1.0em;
}

select.selectcat{
    font-size: 1.4rem;
}

select.selectcat{
    color: #846A51;
}



/* 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 {
    text-align: center;
    margin: 0 auto;
  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:0.8em 1.5em;
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
}

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="file"]{
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
input[type="file"]::-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;
    background: #ffcdd2;
    padding: 0.2em 0.5em;
    border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 3px;   /* Firefox用 */
}

.mw_wp_form{
        padding:0px 0px;
}

/* 確認画面補正 */
.mw_wp_form_confirm .formadd,.mw_wp_form_confirm .formname,.mw_wp_form_error .formname,.mw_wp_form_error .formadd{
    justify-content: flex-start;
}

.mw_wp_form_confirm table.form td.confirmform,.mw_wp_form_error table.form td.confirmform{
    text-align: left;
    padding: 0px;
}

 .radio {
        display: none; /* まず、＜input＞タグの表示を消します*/
    }

    label {
        /* ＜label＞を位置の指標になる指示を書きます*/
/*
        position: relative;
        display: inline-block;
        padding: 3px 3px 3px 20px;
        cursor: pointer;
*/
    }

    span.mwform-radio-field-text::before,/* ＜span＞タグの疑似要素を作ります*/
    span.mwform-radio-field-text::after {
        position: absolute;
        content: '';
        top: 50%;
        border-radius: 100%;
        -webkit-transition: all .2s;
        transition: all .2s;
    }

    span.mwform-radio-field-text::before {
        /* ラジオボタンの元の色の指定*/
/*
        left: 0;
        width: 14px;
        height: 14px;
        margin-top: -5px;
        background: #f3f3f3;
        border: 1px solid #ccc;
*/
    }

    span.mwform-radio-field-text:hover::before {
        background: #fff;/* ラジオボタンのマウスオーバーしたときの色の指定*/
    }
    span.mwform-radio-field-text::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 {
        /* ＜label＞を位置の指標になる指示を書きます*/
/*
        position: relative;
        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;
    }
    span.mwform-radio-field-text: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;
}



input[type="number"].age{
    width: 20%;
    display: inline-block;
}


.formname,.formadd{
        justify-content: flex-start;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
}

.formname .item,.formadd .item,.zip .item{
        padding:0px;
        text-align: left;
}


/*  サポーター登録*/

.formname .item{
    flex-basis: 50%;
}

.formname .item:only-child{
    flex-basis: 100%;
}


.formname .item2{
        padding:0px;
        width:100%;
    text-align: left;
}
.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: 599px){
.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%;
}

}


/*------------------------------------------------------------
sort-chenge・・・アーカイブページのソート機能とレイアウト変更機能
-------------------------------------------------------------*/

section.cl_sort-chenge .contents{
    padding: 0px 1.0em 0px;
}

.cl_sort-chenge form{
    margin: 0 1.0em;
    color: #5bbe98;
}

.cl_sort-chenge select {
    color: #222222;
    width: 100px;
    border: 0;
    padding: 10px;
    margin: 0px 0px 0px;
    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);
}

.cl_sort-chenge .flex{
    justify-content: flex-start; 
    align-items: center; 
}

.cl_sort-chenge div.button{
    color: #5bbe98;
    position: relative;
    display: inline-block;
    text-align: left;
    border: 1px solid #5bbe98;
    padding: 0.5em;
    width: 150px;
    font-size: 1.4rem;
    text-decoration: none;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
}

.cl_sort-chenge div.button:hover{
    color: #ffffff;
    background: #5bbe98;
    border: 1px solid #5bbe98;
    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;
}

.cl_sort-chenge div.button::before {
    font-weight:600;
    font-size: 2.0rem;
    content: " \f022";
    padding-left:10px;
    padding-right:0px;
    font-family: "Font Awesome 5 Pro";
}
.cl_sort-chenge div.button::after {
    font-weight:300;
    content: " リスト表示";
    position: absolute;
    top: 13px;
    padding-left: 0.3em;
}

.cl_sort-chenge div.button.column::before {
    font-weight:600;
    font-size: 2.0rem;
    content: " \f009";
    padding-left:10px;
    padding-right:0px;
    font-family: "Font Awesome 5 Pro";
}
.cl_sort-chenge div.button.column::after {
    font-weight:300;
    content: " グリッド表示";
    position: absolute;
    top: 13px;
    padding-left: 0.3em;
}