@charset "UTF-8";
/*******************************

searchCss

*******************************/

/*-----------------------------
section
-----------------------------*/
section {
    margin-bottom: 100px;
}

section h2 {
    font-size: 165%;
    letter-spacing: .05em;
    text-align: left;
    margin-bottom: 25px;
}

.flex.align-items-center{
    align-items: center;
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    section {
        margin-bottom: 50px;
    }

}

/*-----------------------------
sec01
-----------------------------*/
.sec01 {
    background: #f1f0ee;
    padding: 70px 0;
}

.sec01 ul {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sec01 ul li {
    width: 32%;
    background: #fff;
    font-size: 110%;
}

.sec01 ul li .search-cate {
    width: 100%;
    display: inline-block;
    padding: 10px 15px 5px;
    vertical-align: middle;
    text-align: left;
    cursor: pointer;
    -webkit-transition: all 300ms 0s ease;
    transition: all 300ms 0s ease;
}

/* ラジオボタンを非表示 */
.radio-search-cate{
    display: none;
}
/* ラジオボタンホバーorオンの時 */
.radio-search-cate:hover + .search-cate,
.radio-search-cate:checked + .search-cate{
    background: #1b8cdb;
    color: #fff;
}
.radio-search-cate.cate01:checked ~ .search-cate.ico-01:before{ background-position: left bottom; }
.radio-search-cate.cate02:checked ~ .search-cate.ico-02:before{ background-position: -57px bottom; }
.radio-search-cate.cate03:checked ~ .search-cate.ico-03:before{ background-position: -114px bottom; }

.search-cate:before {
	content: "";
    display: inline-block;
	vertical-align: middle;
	width: 50px;
	height: 52px;
    margin-right: 10px;
	background-image: url("../img/search_sprite@2x.png");
	background-size: 375px auto;
	background-repeat: no-repeat;
}
.search-cate.ico-01:before{ background-position: left top; }
.search-cate.ico-02:before{ background-position: -57px top; }
.search-cate.ico-03:before{ background-position: -114px top; }

.search-cate.ico-01:hover:before{ background-position: left bottom; }
.search-cate.ico-02:hover:before{ background-position: -57px bottom; }
.search-cate.ico-03:hover:before{ background-position: -114px bottom; }


/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
    .sec01 ul li {
        width: 100%;
        margin-bottom: 10px;
    }
    .sec01 ul li a {
        padding: 10px 20px;
        text-align: left;
    }
}

/*-----------------------------
form
-----------------------------*/
/*テキストエリア*/
input[type="seach"],
select {
    color: #333;
    font-size: 100%;
    width: 100%;
    padding: 1em;
    border: 1px solid #dcdcdc;
    border-radius: 0;
    background: #fff;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

ul.type dd,
.selectbox{
    position: relative;
}

ul.type dd:after,
.selectbox:after{
    position: absolute;
    font-size: 16px;
    height: 16px;
    top: 0;
    bottom: 0;
    right: 1em;
    margin: auto 0;
    content: "\f0dc";
    font-family: FontAwesome;
    color: #40577d;
    pointer-events: none;
}

/*送信ボタン*/
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 130%!important;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 15px 0;
    text-align: center;
    border: none;
    background: #1b8cdb;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    cursor: pointer;
}
input[type="submit"]:hover{
    background: #4CB5FF;
}

/*-----------------------------
sec02
-----------------------------*/
.sec02 .flex {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sec02 input[type="seach"] {
    width: 82%;
}

/*送信ボタン*/
.sec02 input[type="submit"] {
    width: 18%;
}

/*-----------------------------
sec03
-----------------------------*/
.sec03 .red {
    font-size: 13px;
    color: #ca0000;
    font-weight: normal!important;
}

.sec03 table {
    width: 100%;
    font-size: 110%;
    margin-bottom: 50px;
}

.sec03 table tr {
    border-bottom: 10px solid #fff;
}

.sec03 table th {
    background: #f3f3f3;
    white-space: nowrap;
    padding: 15px;
    font-weight: bold;
}

.sec03 table .req {
    display: inline-block;
    background: #ca0000;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    font-weight: normal!important;
    margin-left: 10px;
}

.sec03 table td {
    padding: 15px 25px;
    font-weight: bold;
}

.sec03 table td .red {
    display: block;
    margin-top: 10px;
}
.sec03 table td .search-products{
    align-items: center;
}
.sec03 table td .search-products .item{
    margin-right: 20px;
}

.sec03 ul.type {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 40px;
}

.sec03 ul.type li {
    width: 23%;
    position: relative;
}

.sec03 ul.type li:not(:last-child):after {
    position: absolute;
    content: "\f105";
    font-family: FontAwesome;
    display: inline-block;
    font-size: 200%;
    right: -9%;
    top: 50%;
}

.sec03 ul.type dl {
    width: 100%;
    display: inline-block;
}

.sec03 ul.type dt {
    font-weight: bold;
    text-align: left;
    font-size: 110%;
    margin-bottom: 10px;
}

/*送信ボタン*/
.sec03 input[type="submit"] {
    width: 100%;
}

.sec03 p.txt {
    font-size: 13px;
    margin-top: 50px;
    text-align: center;
}

.check{
	background-color: #f3f3f3;
    padding: 40px;
    margin-bottom: 40px;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
    .sec03 table td .search-products .item{
        margin-right: 0;
    }
    .selectbox{
        width: 100%;
        margin: 10px 0;
    }
    
    .sec03 ul.type li {
        width: 48%;
        margin-bottom: 20px;
    }
    .sec03 ul.type li:not(:last-child):after {
        display: none;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .sec03 table,
    .sec03 table tbody,
    .sec03 table tr,
    .sec03 table th,
    .sec03 table td {
        display: block;
    }

    .sec03 table td {
        padding: 15px;
    }

    .sec03 ul.type li {
        width: 100%;
        margin-bottom: 15px;
    }

    .sec03 p.txt {
        text-align: left;
    }
}