@charset "utf-8";
/*----------------------------------------------------*
 *------------ 検索結果一覧 共通デザイン -------------*
 *----------------------------------------------------*/
/*--------------------*
 * 全体囲み
 *--------------------*/
.search_wrapper {
  width: 100%;
  max-width: 1500px;
  padding: 0;
  margin: 0 auto;
  color: #333;
  background: #ffffff;
}
.search_wrapper * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.search_wrapper ul.container {
  width: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.search_wrapper ul.container > li {
  margin-bottom: 4vh;
  padding: 10px;
  display: inline-block;
  -webkit-flex-basis: calc(25% - 1px);
  flex-basis: calc(25% - 1px);
  border-right: 1px #ccc solid;
}
.search_wrapper ul.container > li:nth-child(4n+1) {
  border-left: 1px #ccc solid;
  -webkit-flex-basis: calc(25% - 2px);
  flex-basis: calc(25% - 2px);
}
/*--------------------*
 * 商品囲み
 *--------------------*/
.search_container {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.search_container_top,
.search_container_middle,
.search_container_bottom {
  word-break: break-all;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
}
.search_container_middle {
  display: -webkit-flex;
  display: flex;
  -webkit-align-content: space-between;
  align-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.search_container_middle .flex_start,
.search_container_middle .flex_end {
  width: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*--------------------*
 * 商品ロゴ バナー
 *--------------------*/
.search_container_logo {
  text-align: left;
}
.search_container_logo .logo_img {
  display: block;
}
.search_container_logo .logo_img80 {
  display: inline-block;
  margin-right: 5px;
  width: 80px;
  font-size: .5em;
  vertical-align: top;
}
/*--------------------*
 * 商品画像
 *--------------------*/
.search_container_img {
  margin: 0 auto 10px;
}
.search_container_img a img:hover {
  opacity: .8;
}
.search_container_img img {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  display: block;
}
/*--------------------*
 * 商品名称
 *--------------------*/
.search_container_name {
}
.search_container_name a:hover {
  color: #f6ae18;
  text-decoration: underline;
}
/*--------------------*
 * 価格
 *--------------------*/
.search_container_price {
}
.search_container_price .construction-price .fsL,
.search_container_price .discount_price_list .fsL,
.search_container_price .special_price_display .fsL,
.search_container_price .price .fsL {
  font-weight: bold;
  font-size: 2.2rem;
  line-height: 1.4;
}
.search_container_price .construction-price .fsS,
.search_container_price .discount_price_list .fsS,
.search_container_price .special_price_display .fsS,
.search_container_price .price .fsS {
  font-size: .9em;
}
/*--------------------*
 * ポイント
 *--------------------*/
.search_container_point {
  color: #000000;
}
/*--------------------*
 * 在庫
 *--------------------*/
.search_container_stock {
  margin: .5em 0;
}
.search_container_stock .soldout {
  color: #000000;
  font-weight: bold;
  font-size: 2.2rem;
  line-height: 1.4;
}
.search_container_stock .yoyaku {
  color: #ff0066;
}
.search_container_stock .zaikoari {
  color: #006600;
}
.search_container_stock .toriyose {
  color: #000000;
}
.search_container_stock .nouki {
  color: #333333;
  font-size: .9em;
}
/*--------------------*
 * レビュー
 *--------------------*/
.search_container_review {
  margin: 10px 0;
}
/*--------------------*
 * 発売日
 *--------------------*/
.search_container_release {
  font-size: .8em;
  text-align: right;
}
/*--------------------*
 * 試用レポート
 *--------------------*/
.search_container_report {
  margin: 5px 0;
}
.search_container_report a {
  background: #f60;
  padding: 5px;
  border-radius: 10px;
  color: #fff;
  font-size: .8em;
}
/*--------------------*
 * お気に入り
 *--------------------*/
.search_container_bookmark {
  width: 30px;
  margin: 0 0 0 auto;
}
.search_container_bookmark img {
  width: 100%;
}
/*--------------------*
 * 商品コメント
 *--------------------*/
.search_container_comment {
  padding: 5px;
  border: solid 1px #ccc;
  border-radius: 5px;
  width: 100%;
  margin: 5px auto;
  position: relative;
}
.search_container_comment img {
  max-width: 100%;
}
.search_container_comment .comment {
  margin: 1px 0;
}
.search_container_comment .comment ul {
  list-style: disc inside;
}
/* 商品コメント トリガー */
.search_container_comment_trigger {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  width: 148px;
  margin: auto;
  padding: 0.5em 0;
  border-radius: 2px;
  background: #666;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.search_container_comment_trigger:hover {
  opacity: .5;
}
.search_container_comment_trigger::after {
  content: "続きを読む";
}
.search_container_comment_trigger.is-show::after {
  content: "閉じる";
}
/* 商品コメント 内容 */
.search_container_comment_inner {
  padding-bottom: 2.5em;
  position: relative;
  overflow: hidden;
}
.search_container_comment_inner.is-hide {
  height: 3.5em;
}
.search_container_comment_inner.is-hide::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 2em;  /* グラデーションで隠す高さ */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.search_container_comment_trigger.is-show + .search_container_comment_inner::before {
  display: none;
}
/*--------------------*
 * 商品コメント アイコン
 *--------------------*/
.serch_container_icon {
}
/*--------------------*
 * 商品コメント キャンペーンバナー
 *--------------------*/
.serch_container_omk_cmp {
  display: flex;
  flex-flow: row wrap;
}
.serch_container_omk_cmp img {
  display: inline-flex;
  width: 150px !important;
  padding: 1%;
}
/*----------------------------------------------------*
 *--------- 検索結果一覧エラー 共通デザイン ----------*
 *----------------------------------------------------*/
#commodity_search .access_restriction,
#commodity_search .parameter_over,
#commodity_search .no_results {
  margin: 5px 3rem;
}
#commodity_search .message {
  padding: 3rem;
  font-weight: bold;
}
/*--------------------*
 * パラメータサイズオーバー時
 *--------------------*/
#commodity_search .parameter_over .message {
  text-align: center;
}
/*--------------------*
 * アクセス制限時
 *--------------------*/
#commodity_search .access_restriction {
  background-color: #efefef;
  border-radius: 5px;
}
#commodity_search .access_restriction .message {
  color: #ff0000;
}
/*--------------------*
 * 該当商品未存在時
 *--------------------*/
#no_results_box .no_results,
#commodity_search .no_results {
  background-color: #efefef;
  border-radius: 5px;
}
#no_results_box .no_results {
  text-align: left;
  margin: 0 auto;
  width: 96%;
}
#no_results_box .no_results .message,
#commodity_search .no_results .message {
  color: #ff0000;
}
#no_results_box .no_results .message {
  padding: 3rem;
  font-weight: bold;
}
#no_results_box .no_results .tips,
#commodity_search .no_results .tips {
  padding: 0 1rem 3rem;
}
#no_results_box .no_results .tips_title,
#commodity_search .no_results .tips_title {
  padding: 0 2rem;
  color: #250505;
  font-weight: bold;
}
#no_results_box .no_results .tips_comment,
#commodity_search .no_results .tips_comment {
  padding: 0 1rem;
}
#no_results_box .no_results .tips_search,
#commodity_search .no_results .tips_search {
  padding: 0 3rem;
}
#commodity_list .no_results p {
  font-size: 2.2rem;
  line-height: 1.4;
  text-align: center;
}
/*----------------------------------------------------*
 * PC
 *----------------------------------------------------*/
@media screen and (min-width: 1024px) {
  #no_results_box .message,
  #commodity_search .message,
  #commodity_search .tips_title,
  #commodity_search .tips_search {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  /*--------------------*
   * 全体囲み
   *--------------------*/
  .search_wrapper ul.container > li {
    padding: 10px 20px;
  }
}
/*----------------------------------------------------*
 * SmartPhone
 *----------------------------------------------------*/
@media screen and (max-width: 1023px) {
  /*--------------------*
   * 全体囲み
   *--------------------*/
  .search_wrapper {
    background: #efefef;
  }
  .search_wrapper ul.container {
    width: 96%;
  }
  .search_wrapper ul.container > li,
  .search_wrapper ul.container > li:nth-child(4n+1) {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    border-style: none;
  }
  /*--------------------*
   * 商品囲み
   *--------------------*/
  .search_container_top,
  .search_container_middle,
  .search_container_bottom {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
  }
  /*--------------------*
   * 商品画像
   *--------------------*/
  .search_container_img img {
    width: 90%;
    max-width: 300px;
  }
}
/*--------------------*
 * PR
 *--------------------*/
.zeta_pr {
  padding: 0 5px;
  border: solid 1px #888888;
  border-radius: 5px;
  margin-right: 1px;
  color: #888888;
  box-sizing: border-box;
  display: inline-block;
}