@charset "UTF-8";
/* typePage */
/*スマホ用*/
#s_search_result_area div.left{
    /**/display: none;/**/
    /*height: 100vh;
    overflow: auto;*/
}
#s_search_result_area div.right{
}
#s_search_result_area div.table{
    /*width: 1200px;*/
    width: 100%;
}


#s_search_header-search {
    position: relative;
    z-index: 10;
    width: 600px;
}
.searchBox_wrap {
    display:flex;
}

#block_of_searchbox.active {
    position: sticky;
}
html[data-browse-mode="S"] #block_of_searchbox {
	transition: unset;
}

#block_of_searchbox input.s_search_q.searchBox ,/*SP*/
input.s_search_q.searchBox /*PC*/ {
    width: 100%;
    /*padding: 10px 75px 10px 15px;/**/
    padding: 10px 15px 10px 15px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 7px 0 0 7px;
    font-size: 12px;
    color: #000;
    background-color: #fff;
}

.searchBox:focus {
    outline: none;
}
.searchBox::placeholder {
    color: #bbb;
}
.searchIcon {
    display: block;
    /*position: absolute;
    top: 0;
    right: 0;
    bottom: 0;*/
    z-index: 10;
    width: 60px;
    border-radius: 0 7px 7px 0;
    border: 1px solid #ddd;
    background-color: #f6f6f6;
    /*background-image: url(data:image/svg+xml;charset=utf8,);*/
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    transition: .3s;
    cursor: pointer;
}

._sc_suggest{
    visibility: hidden;
    height: auto;
    position: absolute;
    border: 1px solid rgb(128, 128, 128);
    background: rgb(255, 255, 255);
    overflow: auto;
    padding: 0px;
    z-index: 100000;
    color: rgb(0, 0, 0);
    text-align: left;
    display: inline;
}
#_sitm {
    overflow: scroll;
    max-height: 640px;
}

#s_search_rank{
    display:flex;
    gap:8px;
    padding:0.3rem;
    font-size: 0.8rem;
}
html[data-browse-mode="P"] #s_search_rank {
    position: absolute;
    top: auto;
    left: 0;
    height: 1.5rem;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 0 8px;
    padding: 0.5em 0.5em 0.7em 6.5em;
    background: #f5f5f5;
    border-radius: 0 0 8px 8px;
}
html[data-browse-mode="P"] #s_search_rank:hover {
    height: max-content;
    overflow: visible;
}
html[data-browse-mode="S"] #s_search_rank{
    flex-wrap: wrap;
    margin-top: 0.8rem;
}
#s_search_rank:empty{ padding: 0; display:none; }
#s_search_rank:empty::before{content:"";}
html[data-browse-mode="P"] #s_search_rank::before{content:"人気ワード：";position: absolute;left: 0;padding-left: 0.5em;}
html[data-browse-mode="P"] #s_search_rank:empty::before{content:"";}


html[data-browse-mode="S"] #s_search_rank_openclose {
    display: none;
}
html[data-browse-mode="S"] #s_search_rank_openclose~#label_s_search_rank_openclose .chk_off {
    display: unset;
}
html[data-browse-mode="S"] #s_search_rank_openclose~#label_s_search_rank_openclose .chk_on {
    display: none;
}
html[data-browse-mode="S"] #s_search_rank_openclose:checked~#label_s_search_rank_openclose .chk_off {
    display: none;
}
html[data-browse-mode="S"] #s_search_rank_openclose:checked~#label_s_search_rank_openclose .chk_on {
    display: unset;
}
html[data-browse-mode="S"] #s_search_rank_openclose~#s_search_rank {
    height: 0px;
    max-height: 0px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
}
html[data-browse-mode="S"] #s_search_rank_openclose:checked~#s_search_rank {
    height: auto;
    max-height: max-content;
    padding-top: unset;
    padding-bottom: unset;
    margin-top: 0.8rem;
    overflow: auto;
}
html[data-browse-mode="S"] #label_s_search_rank_openclose {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.2rem;
    background-color: #eee;
}

html[data-browse-mode="S"] .keyRanking {
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    max-width: 100%;
}
html[data-browse-mode="P"] .keyRanking a{
    text-decoration:underline;
}
html[data-browse-mode="S"] .keyRanking a{
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 7px;
    padding: 0.4rem 0.3rem;
    min-width: 3rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}


#s_search_relatedKeyword{
    display:flex;
    gap:8px;
    padding:0.3rem;
    font-size: 0.8rem;
    margin-bottom:0.8rem;
}
html[data-browse-mode="P"] #s_search_relatedKeyword {
    flex-wrap: wrap;
    overflow: hidden;
    gap: 0 8px;
    padding: 0.5em;
    background: #f5f5f5;
    border-radius: 0 0 8px 8px;
}
html[data-browse-mode="S"] #s_search_relatedKeyword{
    flex-wrap: wrap;
    margin-top: 0.8rem;
}
#s_search_relatedKeyword:empty{ padding: 0; display:none; }
#s_search_relatedKeyword:empty::before{content:"";}
html[data-browse-mode="P"] #s_search_relatedKeyword::before{content:"関連ワード：";padding-left: 0.5em;}
html[data-browse-mode="P"] #s_search_relatedKeyword:empty::before{content:"";}

html[data-browse-mode="S"] .keyWord {
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
}
html[data-browse-mode="S"] .keyWord a{
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 7px;
    padding: 0.2rem 0.3rem;
    min-width: 3rem;
}


#s_search_result_area {
    /*
    position: fixed;
    top: 0;
    left: 0;
    background: #eeeeee77;
    min-height: 100%;
    min-width: 100%;
    z-index:999;
    overflow-y: scroll;
    display: none;
    */
    /*position: sticky;
    top: 98px;/**/
    /*left: 0;*/
    /*background: #eeeeee77;*/
    /*min-height: 300px;*/
    min-width: 100%;
    /*z-index:190;*/
    /*overflow-y: scroll;*/
    /*display: none;/**/
}

#s_search_0hit_area {
    /*min-height: 300px;*/
    min-width: 100%;
    padding: 0.5rem;
    display: none;
}

html[data-browse-mode="S"] #s_search_0hit_area ,
html[data-browse-mode="S"] #s_search_result_area {
    /*margin-top: 70px;*/
}
#s_search_0hit_area ,
#s_search_result_area .right {
  container: s_right / inline-size;
}

#often_search_title {
    margin-top: 1.5rem;
}

#often_search_list,
#s_search_result{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 12px 8px;
    margin-left: auto;
    margin-right: auto;
}

#often_search_list .record,
#s_search_result .record{
    border: 1px solid #ccc;
    padding: 0.5rem;
    font-size: 1rem;
    width: calc((100% - 8px) /2);
    /*width: 100%;*/
}
@container s_right (inline-size >= 1300px) {
  #often_search_list .record,
  #s_search_result .record{
    width: calc((100% - 16px) /3);
  }
}
/*@media only screen and (min-width:1350px) {
  #often_search_list .record,
  #s_search_result .record{
    width: calc((100% - 16px) /3);
  }
}*/
html[data-browse-mode="P"] #often_search_list .record,
html[data-browse-mode="P"] #s_search_result .record{
    display: flex;
    min-width: 300px;
}

#often_search_list .record .record-data,
#s_search_result .record .record-data {
    display:flex;
}
html[data-browse-mode="S"] #often_search_list .record .record-data,
html[data-browse-mode="S"] #s_search_result .record .record-data{
    flex-wrap: wrap;
}

html[data-browse-mode="P"] #often_search_list .record .record-left,
html[data-browse-mode="P"] #s_search_result .record .record-left{
    min-width: fit-content;
}
html[data-browse-mode="P"] #often_search_list .record .record-left,
html[data-browse-mode="P"] #s_search_result .record .record-left{
    width: 33%;
}
#often_search_list .record .record-left img,
#s_search_result .record .record-left img{
    width: 100%;
    max-width: 200px;
}
html[data-browse-mode="P"] #often_search_list .record .record-right,
html[data-browse-mode="P"] #s_search_result .record .record-right{
    padding:0 1rem;
    padding-left:2rem;
}
html[data-browse-mode="S"]  #often_search_list .record .record-right,
html[data-browse-mode="S"]  #s_search_result .record .record-right{
    margin-top:0.5rem;
    font-size: 0.9em;
}

#often_search_list .record .record-right .title,
#s_search_result .record .record-right .title{
    font-weight: bold;
}
#often_search_list .record .record-right .record-price ,
#s_search_result .record .record-right .record-price {
    text-align: right;
    font-size: 1.2em;
    font-weight: bold;
}
#often_search_list .record .record-right .record-price-unit ,
#s_search_result .record .record-right .record-price-unit {
    font-size: 0.8em;
}

html[data-browse-mode="S"] #s_search_page_area .pageNavi {
    padding: 1rem 0;
}

#s_search_page_area{
    position: sticky;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #ccc;
}
/*html[data-browse-mode="P"] #s_search_page_area  {
    padding: 0.75rem 0;
}*/

.top2>* {
    margin-bottom: 0.3rem;
}
.s_totalCount_wrap {
    
}
.s_sort_wrap {
    display: inline-block;
}
.s_sort_wrap>ul {
    display: flex;
}
.s_sort_wrap>ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.s_sort_wrap>ul li:not(:last-of-type)::after {
    display: inline-block;
    content: "|";
    margin: 0;
    padding: 0;
    margin: 0 0.2rem;
}
.s-link {
    text-decoration: underline;
    cursor: pointer;
}

.s_price_wrap {
    display: inline-block;
}
html[data-browse-mode="P"] .s_price_wrap {
    margin-left: 1.5rem;
}
#priceGo2 {
    cursor: pointer;
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
}

ul.pageNavi {
    display: flex;
    list-style:none;
    /*width: 800px;*/
    flex-wrap: nowrap;
    margin: auto;
    justify-content: center;
    gap: 0.2rem;
}
html[data-browse-mode="P"] ul.pageNavi {
    padding: 0.75rem 0;
}
ul.pageNavi .nav_item{
    display:block;
    min-width: 2.5rem;
    text-align:center;
    border: 1px solid #ccc;
    border-radius: 50px;
}
ul.pageNavi .nav_item a{
    text-decoration:none;
    display:block;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background-color: #ddd;/* #adf;/*#47f;*/
}
ul.pageNavi .nav_item a:hover{
    border-radius: 50px;
    background-color: #adf;/*#5df;*/
}


/* 検索結果に出てくる「キーワードマッチ」設定アイテムは、別途専用の画像を用意する */
#s_search_keyMatch {
    display:flex;
    /* text-align:center; */
    margin: 1rem auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
#s_search_keyMatch .keymatchItem {
    width:100%;
    max-width:800px;
}
#s_search_keyMatch .keymatchItem a{
    display:block;
}
#s_search_keyMatch .keymatchItem a img{
    vertical-align:middle;
}
#s_search_keyMatch .content:empty {display:none;}
#s_search_keyMatch .content {
    
}


/***********/
html[data-browse-mode="P"] #s_search_result_area div.right{
    padding:0.5rem;
}

html[data-browse-mode="P"] .record-left a:hover img {
    transform: scale(1.05);
    opacity: .7;
}
html[data-browse-mode="S"] .record-right {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 6px;
}
html[data-browse-mode="P"] .ecis--goods-name {
    text-decoration: underline;
}
html[data-browse-mode="S"] .ecis--block-icon {
    order: -1;
}
html[data-browse-mode="S"] .ecis--goods-name {
    font-weight: bold;
}
.ecis--variation {
    font-size: 0.9em;
    color: #888;
}
html[data-browse-mode="S"] .ecis--variation {
    font-size: 0.75em;
}
.ecis--comment {
    font-size: 0.8em;
}
.ecis--block-icon img {
    width: auto;
    height: 20px;
    vertical-align: top;
}
.ecis--price-items {
    font-weight: bold;
}
.ecis--price .price {
    font-size: 20px;
    color: #f00;
}
html[data-browse-mode="P"] .ecis--price-items {
    text-align: right;
}
.ecis--price-items .price_tax {
    font-size: 0.8em;
}