#searchField, #searchedSearchField, #contSearchField{
font: 500 14px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "Hiragino Kaku Gothic ProN", Arial, 繝｡繧､繝ｪ繧ｪ, Meiryo, sans-serif;
}
#searchField .searchField__heading{
padding: 8px 10px;
margin-bottom: 10px;
background: #9e2730;
}
#searchField .searchField__ttl{
line-height: 1;
color: #fff;
font-size: 14px;
font-weight: bold;
}
#searchField .searchField__item + .searchField__item,
#searchedSearchField .searchField__item + .searchField__item{
margin-top: 8px;
}
#searchField .searchField__item + .searchField__item--opt,
#searchedSearchField .searchField__item + .searchField__item--opt{
margin-top: 12px;
text-align: right;
}
#searchField .searchField__label{
line-height: 1;
font-size: 12px;
}
#searchField .searchField__field,
#searchedSearchField .searchField__field,
#contSearchField .searchField__field{
position: relative;
}
#searchField .searchField__field--lineupPage,
#contSearchField .searchField__field{
width: 256px;
margin-left: auto;
}
#searchField .searchField__field > input,
#searchedSearchField .searchField__field > input,
#contSearchField .searchField__field > input{
padding: 5px 25px 5px 5px;
width: 100%;
border: solid 1px #666;
}
#searchField .searchField__btn,
#searchedSearchField .searchField__btn,
#contSearchField .searchField__btn{
position: absolute;
top: 0;
bottom: 0;
right: 8px;
height: 19px;
margin: auto 0;
}
#searchField .searchField__btn > img,
#searchedSearchField .searchField__btn > img,
#contSearchField .searchField__btn > img{
vertical-align: top !important;
}
#searchField .searchField__reset,
#searchedSearchField .searchField__reset{
position: relative;
display: inline-block;
padding-left: 1.5em;
color: #052674;
text-decoration: underline;
line-height: 1;
font-size: 14px;
}
#searchField .searchField__reset:hover,
#searchedSearchField .searchField__reset:hover{
color: #f79494;
text-decoration: underline;
}
#searchField .searchField__reset::before,
#searchedSearchField .searchField__reset::before{
content: "\f0e2";
display: block;
position: absolute;
top: 50%;
left: 0;
color: #9f2532;
font-family: FontAwesome;
transform: translateY(-50%) rotate(90deg);
}
#searchField .js_isHide,
#searchedSearchField.js_isHide{
display: none;
}
#resultSearch{
position: relative;
}
#resultSearch a{
color: inherit;
}
#resultSearch .resultSearch__body--result{
font: 500 14px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "Hiragino Kaku Gothic ProN", Arial, 繝｡繧､繝ｪ繧ｪ, Meiryo, sans-serif;
}
#resultSearch .resultSearch__heading{
position: relative;
margin-bottom: 20px;
padding-left: 40px;
border-top: 3px solid #9E2730;
border-bottom: 1px solid #ccc;
line-height: 36px;
}
#resultSearch .resultSearch__heading::after{
content: url("/resource/img/middle/middle_lineup.jpg");
position: absolute;
top: 0;
left: 0;
}
#resultSearch .resultSearch__ttl{
font-size: 20px;
font-weight: bold;
}
#resultSearch .resultSearch__num{
margin-bottom: 12px;
text-align: right;
}
#resultSearch .resultSearch__item{
position: relative;
line-height: 1.6;
font-size: 14px;
}
#resultSearch .resultSearch__item + .resultSearch__item{
margin-top: 32px;
}
#resultSearch .resultSearch__target{
display: block;
color: inherit;
text-decoration: none;
letter-spacing: -.5em;
}
#resultSearch .resultSearch__cat{
display: inline;
letter-spacing: 1px;
}
#resultSearch .resultSearch__name{
display: inline;
letter-spacing: 1px;
}
#resultSearch .resultSearch__cat + .resultSearch__name::before{
content: "縲>縲";
display: inline;
}
#resultSearch .resultSearch__target:hover{
text-decoration: underline;
}
#resultSearch .resultSearch__descr{
display: none;
position: absolute;
width: 90%;
top: 0;
right: 0;
margin-right: 4px;
padding: 8px;
background: #fff;
font-size: 12px;
transform: translateY(-100%) translateY(-24px);
}
#resultSearch .resultSearch__descr::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
display: block;
border: 1px solid #919191;
box-shadow: 1px 1px 4px 1px #919191;
background: #fff;
}
#resultSearch .resultSearch__descr::after{
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: -1;
display: block;
width: 12px;
height: 24px;
border-bottom: 1px solid #919191;
border-right: 1px solid #919191;
box-shadow: 2px 2px 2px #919191;
background: #fff;
transform: translateX(-50%) rotate(45deg) skewY(45deg);
transform-origin: left bottom;
}
#resultSearch .resultSearch__target:hover + .resultSearch__descr{
display: block;
}
#resultSearch .resultSearch__tabs{
position: absolute;
top: -2px;
left: 0;
display: flex;
align-items: stretch;
justify-content: flex-start;
margin: 0 -2px;
transform: translateY(-100%);
}
#resultSearch .resultSearch__tabsItem{
display: flex;
padding: 0 2px;
}
#resultSearch .resultSearch__tab{
display: block;
padding: 2px 8px;
font-size: 10px;
line-height: 1;
letter-spacing: 3px;
border-radius: 8px;
}
#resultSearch .resultSearch__tab--classic{
background: #9e2730;
color: #fff;
}
#resultSearch .resultSearch__tab--new{
background: #b59a45;
color: #fff;
}
#resultSearch .resultSearch__body.pageToggle-enter-active{
transition: 1s opacity, 1s transform;
}
#resultSearch .resultSearch__body.pageToggle-leave-active{
position: absolute;
opacity: 0;
}
#resultSearch .resultSearch__body.pageToggle-enter{
transform: translateY(100px);
opacity: 0;
}
#resultSearch .listToggle-leave-active, #resultSearch .listToggle-enter-active{
transition: 1s opacity, 1s transform;
}
/*#resultSearch .listToggle-leave-active{
position: absolute;
}*/
#resultSearch .listToggle-enter, #resultSearch .listToggle-leave-to{
transform: translateY(100px);
opacity: 0;
}
#resultSearch .listToggle-move{
transition: 1s transform;
}
#resultSearch .resultSearch__loader,
#resultSearch .resultSearch__loader:before,
#resultSearch .resultSearch__loader:after {
border-radius: 50%;
}
#resultSearch .resultSearch__loader {
color: #9e2730;
font-size: 10px;
text-indent: -99999em;
margin: 0 auto;
position: relative;
width: 2em;
height: 2em;
box-shadow: inset 0 0 0 4px;
transform: translateZ(0);
}
#resultSearch .resultSearch__loader:before,
#resultSearch .resultSearch__loader:after {
position: absolute;
content: '';
}
#resultSearch .resultSearch__loader:before {
width: 1.2em;
height: 2.2em;
background: #fff;
border-radius: 2.2em 0 0 2.2em;
top: -.1em;
left: -.1em;
transform-origin: 1.2em center;
animation: resultSearchLoading 2s infinite ease 1.5s;
}
#resultSearch .resultSearch__loader:after {
width: 1.2em;
height: 2.2em;
background: #fff;
border-radius: 0 2.2em 2.2em 0;
top: -.1em;
left: 1.1em;
transform-origin: 0 1.1em;
animation: resultSearchLoading 2s infinite ease;
}
@keyframes resultSearchLoading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#resultSearch[v-cloak]{
display: none;
}
@media screen and (max-width: 768px){
#resultSearch .resultSearch__target:hover + .resultSearch__descr{
display: none;
}
}