/* #### width 768px 以上の場合の設定 (for PC) #### */
@media (min-width: 768px) {
    h3.tTitle {
        margin-bottom: 18px;
        font-size: 18px;
        background-color: #F7F7F7;
        padding: 10px;
        border-bottom: dotted 1px #BABABA;
        border-left: solid 5px #B7E5C7;
    }
    .serchBox {
        width: 100%;
    }
    .serchBox .lBox {
        width: 50%;
        float: left;
        padding-right: 2%;
    }
    .serchBox .rBox {
        width: 50%;
        float: left;
        padding-left: 2%;
    }
    .search-box2 {
        position: relative;
        display: flex;
        width:  100%;;
    }

    .search-box2 input[type="text"] {
        width:  100%;
        font-size: 16px;
        flex-grow: 1;
        padding: 0.7rem 0 0.7rem 0.8rem;
        border: 1px solid #616161;
        border-radius: 1.5rem;
    }

    .search-box2 button {
        position: absolute;
        top: -0.05rem;
        right: 0;
        cursor: pointer;
        padding: .8rem .9rem .8rem .8rem;
        border: none;
        background: none;
        color: #333;
        font-size: 1rem;
        transition: 0.5s;
    }
    .search-box2 input:focus {
        outline: 0;
        box-shadow: 0 0 5px #e1e1e1, 0 0 10px #e1e1e1, 0 0 15px #e1e1e1;
    }
    .search-box2 button:hover {
        color: #4eadb8;
        transform: scale(1.2);
    }
    /*年月で探す*/
    .search-box3 {
        position: relative;
    }

    .search-box3::before,.search-box3::after {
        position: absolute;
        content: '';
        pointer-events: none;
    }

    .search-box3::before {
        margin-top: 4px;
        right: 0;
        display: inline-block;
        width: 44.8px;
        height: 43.1px;
        border-radius: 0 25px 25px 0;
        background-color: #7AB247;
        content: '';
    }

    .search-box3::after {
        position: absolute;
        top: 50.0%;
        right: 1.4em;
        transform: translate(50%, -50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border-bottom: 3px solid #fff;
        border-right: 3px solid #fff;
        content: '';
    }

    .search-box3 select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        height: 44.8px;
        padding: 6px 36px 6px 12px;
        border: 2px solid #7AB247;
        border-radius: 25px;
        color: #333333;
        font-size: 1em;
        cursor: pointer;
    }

    .search-box3 select:focus {
        outline: 1px solid #7AB247;
    }
}
/* ## width 501px～767pxの場合の設定 (for Tub Only) ## */
@media (min-width: 501px) and (max-width: 767px) {
    h3.tTitle {
        margin-bottom: 18px;
        font-size: 16px;
        background-color: #F7F7F7;
        padding: 10px;
        border-bottom: dotted 1px #BABABA;
        border-left: solid 5px #B7E5C7;
    }
    .serchBox {
        width: 100%;
    }
    .serchBox .lBox {
        width: 50%;
        float: left;
        padding-right: 2%;
    }
    .serchBox .rBox {
        width: 50%;
        float: left;
        padding-left: 2%;
    }
    .search-box2 {
        position: relative;
        display: flex;
        width:  100%;;
    }

    .search-box2 input[type="text"] {
        width:  100%;
        font-size: 16px;
        flex-grow: 1;
        padding: 0.7rem 0 0.7rem 0.8rem;
        border: 1px solid #616161;
        border-radius: 1.5rem;
    }

    .search-box2 button {
        position: absolute;
        top: -0.05rem;
        right: 0;
        cursor: pointer;
        padding: .8rem .9rem .8rem .8rem;
        border: none;
        background: none;
        color: #333;
        font-size: 1rem;
        transition: 0.5s;
    }
    .search-box2 input:focus {
        outline: 0;
        box-shadow: 0 0 5px #e1e1e1, 0 0 10px #e1e1e1, 0 0 15px #e1e1e1;
    }
    .search-box2 button:hover {
        color: #4eadb8;
        transform: scale(1.2);
    }
    /*年月で探す*/
    .search-box3 {
        position: relative;
    }

    .search-box3::before,.search-box3::after {
        position: absolute;
        content: '';
        pointer-events: none;
    }

    .search-box3::before {
        margin-top: 4px;
        right: 0;
        display: inline-block;
        width: 44.8px;
        height: 43.1px;
        border-radius: 0 25px 25px 0;
        background-color: #7AB247;
        content: '';
    }

    .search-box3::after {
        position: absolute;
        top: 50.0%;
        right: 1.4em;
        transform: translate(50%, -50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border-bottom: 3px solid #fff;
        border-right: 3px solid #fff;
        content: '';
    }

    .search-box3 select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        height: 44.8px;
        padding: 6px 36px 6px 12px;
        border: 2px solid #7AB247;
        border-radius: 25px;
        color: #333333;
        font-size: 1em;
        cursor: pointer;
    }

    .search-box3 select:focus {
        outline: 1px solid #7AB247;
    }

}
/* #### width 360px～500pxの場合の設定 (for SP Wide Only) #### */
@media (min-width: 360px) and (max-width: 500px) {
    #ribon:before {
        padding-top: 22%;
    }

    h3.tTitle {
        margin-bottom: 16px;
        font-size: 16px;
        padding: 10px;
        background-color: #F7F7F7;
        border-bottom: dotted 1px #BABABA;
        border-left: solid 5px #B7E5C7;
    }
    .serchBox {
        width: 100%;

    }
    .serchBox .lBox {
        width: 100%;
        margin-bottom: 20px;
    }
    .serchBox .rBox {
        width: 100%;
        margin-bottom: 20px;
    }
    .search-box2 {
        position: relative;
        display: flex;
        width:  100%;;
    }

    .search-box2 input[type="text"] {
        width:  100%;
        font-size: 16px;
        flex-grow: 1;
        padding: 0.7rem 0 0.7rem 0.8rem;
        border: 1px solid #616161;
        border-radius: 1.5rem;
    }

    .search-box2 button {
        position: absolute;
        top: -0.05rem;
        right: 0;
        cursor: pointer;
        padding: .8rem .9rem .8rem .8rem;
        border: none;
        background: none;
        color: #333;
        font-size: 1rem;
        transition: 0.5s;
    }
    .search-box2 input:focus {
        outline: 0;
        box-shadow: 0 0 5px #e1e1e1, 0 0 10px #e1e1e1, 0 0 15px #e1e1e1;
    }
    .search-box2 button:hover {
        color: #4eadb8;
        transform: scale(1.2);
    }
    /*年月で探す*/
    .search-box3 {
        position: relative;
    }

    .search-box3::before,.search-box3::after {
        position: absolute;
        content: '';
        pointer-events: none;
    }

    .search-box3::before {
        margin-top: 4px;
        right: 0;
        display: inline-block;
        width: 44.8px;
        height: 43.1px;
        border-radius: 0 25px 25px 0;
        background-color: #7AB247;
        content: '';
    }

    .search-box3::after {
        position: absolute;
        top: 50.0%;
        right: 1.4em;
        transform: translate(50%, -50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border-bottom: 3px solid #fff;
        border-right: 3px solid #fff;
        content: '';
    }

    .search-box3 select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        height: 44.8px;
        padding: 6px 36px 6px 12px;
        border: 2px solid #7AB247;
        border-radius: 25px;
        color: #333333;
        font-size: 1em;
        cursor: pointer;
    }

    .search-box3 select:focus {
        outline: 1px solid #7AB247;
    }
}

/* #### width 359px以下の場合の設定 (for SP Only) #### */
@media (max-width: 359px) {
    #ribon:before {
        padding-top: 22%;
    }
    h3.tTitle {
        margin-bottom: 16px;
        font-size: 16px;
        padding: 10px;
        background-color: #F7F7F7;
        border-bottom: dotted 1px #BABABA;
        border-left: solid 5px #B7E5C7;
    }
    .serchBox {
        width: 100%;
    }
    .serchBox .lBox {
        width: 100%;
        margin-bottom: 20px;
    }
    .serchBox .rBox {
        width: 100%;
        margin-bottom: 20px;
    }
    .search-box2 {
        position: relative;
        display: flex;
        width:  100%;;
    }

    .search-box2 input[type="text"] {
        width:  100%;
        font-size: 16px;
        flex-grow: 1;
        padding: 0.7rem 0 0.7rem 0.8rem;
        border: 1px solid #616161;
        border-radius: 1.5rem;
    }

    .search-box2 button {
        position: absolute;
        top: -0.05rem;
        right: 0;
        cursor: pointer;
        padding: .8rem .9rem .8rem .8rem;
        border: none;
        background: none;
        color: #333;
        font-size: 1rem;
        transition: 0.5s;
    }
    .search-box2 input:focus {
        outline: 0;
        box-shadow: 0 0 5px #e1e1e1, 0 0 10px #e1e1e1, 0 0 15px #e1e1e1;
    }
    .search-box2 button:hover {
        color: #4eadb8;
        transform: scale(1.2);
    }
    /*年月で探す*/
    .search-box3 {
        position: relative;
    }

    .search-box3::before,.search-box3::after {
        position: absolute;
        content: '';
        pointer-events: none;
    }

    .search-box3::before {
        margin-top: 4px;
        right: 0;
        display: inline-block;
        width: 44.8px;
        height: 43.1px;
        border-radius: 0 25px 25px 0;
        background-color: #7AB247;
        content: '';
    }

    .search-box3::after {
        position: absolute;
        top: 50.0%;
        right: 1.4em;
        transform: translate(50%, -50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border-bottom: 3px solid #fff;
        border-right: 3px solid #fff;
        content: '';
    }

    .search-box3 select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        height: 44.8px;
        padding: 6px 36px 6px 12px;
        border: 2px solid #7AB247;
        border-radius: 25px;
        color: #333333;
        font-size: 1em;
        cursor: pointer;
    }

    .search-box3 select:focus {
        outline: 1px solid #7AB247;
    }
}