@charset "utf-8"; 
/* MOBILE */
   
/* search bar */
.search__bar { display:block ; font-size:0 ; margin-bottom:5rem } 
.search__select , .search__input , .search__btn { 
    font-size:1.8rem ; line-height:2.8rem ; padding:1rem 2rem 1.2rem ;
    border-radius:0.6rem ; width:100% 
}
.search__select , .search__input {
    border:solid 1px rgba(0,0,0,0.1) ; 
    margin-bottom:0.7rem ;
}
.search__btn {
    background-color:#313131 ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    transition:0.3s all ;
}
.search__btn:hover , .search__btn:focus { background-color:#ff9828 ; color:#111111 ; text-shadow:none }



/* search list */
.search__total , .search__txt { font-size:1.8rem ; line-height:3rem  }
.search__total > b { font-weight:600 ; color:#111111 }
.search__total { margin-bottom:1rem }

.search__list { 
    padding:2rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ; margin-bottom:1.5rem }
.search__link , .search__link::after , .search__tag { transition:0.3s all }    
.search__link { 
    display:block ; padding:1.5rem 0.2rem 0.5rem ; position:relative ;
    border-bottom:solid 0.1rem rgba(0,0,0,0.1) ; text-align:left }
.search__link::after {
    display:block ; content:"" ; width:0 ; height:1px ;
    background-color:#ff9828 ;
    position:absolute ; left:0 ; bottom:-1px ;
}
.search__link:hover , .search__link:focus { background-color:rgba(0,0,0,0.05) }
.search__link:hover::after , .search__link:focus::after { width:100% }
.search__img , .search__img::after { border-radius:0.4rem }
.search__img {
    display:block ; float:left ; width:8rem ; height:7rem ; overflow:hidden ;  
    position:relative ; margin:0 1rem 0.5rem 0 ; background-color:#eeeeee ;
}
.search__img > span , .search__img::after { 
    width:100% ; height:100% ; display:block ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.search__img > span { background:url(../img_sub/search_img.png) no-repeat center ; background-size:cover ; transform:translate(-50%,-50%) scale(1.02) }
.search__img::after { border:solid 1px rgba(0,0,0,0.1) }
.search__col { display:inline-block ; margin-bottom:1rem ; margin-right:2rem }
.search__col:last-child { display:block }
.search__tag { 
    display:inline-block ; border:solid 1px rgba(0,0,0,0.1) ; margin-right:0.3rem ;
    font-size:1.4rem ; line-height:2.8rem ; padding:0 1rem ; border-radius:0.4rem ;
} 
.search__link:hover .search__col:last-child .search__tag , 
.search__link:focus .search__col:last-child .search__tag { background-color:#ff9828 ; color:#111111 }

.search__col:last-child .search__tag { border:none ; background-color:#313131 ; color:#ffffff }
.search__col:last-child .search__txt { font-weight:500 } 
 
.search__btn__more , .search__btn__more b , .search__btn__more span , .search__top { transition:0.3s all }
.search__btn__more , .search__top {
    border:solid 1px rgba(0,0,0,0.1) ; margin:0 auto 0.5rem  ;
    display:block ; overflow:hidden ; border-radius:0.4rem ; 
    text-align:center ;
}
.search__btn__more { width:18rem }
.search__btn__more b , .search__top { font-size:1.4rem ; line-height:3rem }
.search__btn__more b { 
    display:inline-block ;  
    padding:0.5rem 0 0.5rem 2.2rem ; position:relative ;
}
.search__btn__more span {
    display:block ; width:1.4rem ; height:1.4rem ; opacity:0.2 ;
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
}
.search__btn__more span::before , .search__btn__more span::after {
    display:block ; content:"" ; width:100% ; height:0.2rem ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background-color:#111111 ;
}
.search__btn__more span::after { transform:translate(-50%,-50%) rotate(90deg) } 

.search__btn__more:hover , .search__btn__more:focus { border-color:rgba(0,0,0,0.2) ; background-color:#ffffff ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) }
.search__btn__more:hover b  , .search__btn__more:focus b { color:#111111 }
.search__btn__more:hover span  , .search__btn__more:focus span { transform:translateY(-50%) rotate(90deg) ; opacity:0.6 }

.search__top { 
    width:12rem ; background-color:#ffffff ;
    padding:0.7rem 2rem 0.7rem ; border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4 ;}
.search__top:hover , .search__top:focus {
    background-color:#313131 ; border-color:#313131 ;
    color:#ffffff
} 

.noData { 
    padding:2rem 0 ; 
    font-size:2.2rem ; line-height:3rem ; font-weight:600 ; text-align:center ;
}





/* PC */
@media screen and (min-width:1024px){ 
  
    /* search bar */
    .search__bar {text-align:center }
    .search__select , .search__input , .search__btn { margin:0 ; width:auto }
    .search__select , .search__input { margin-right:0.5rem }
    .search__input { line-height:2.6rem } 
}   
 




/* PRINT */
@media print {   }