@charset "utf-8";
/* 製品検索の共通部分*/

@import url("/css/formCommon.css");



/*-------------------------------
画像収まるようにして上下左右真ん中寄せ
--------------------------------*/
.imgWrap{
 position: relative;
 margin: 0 auto;
}
.imgWrap img{
 max-width: 100%;
 max-height: 100%;
 height: auto;
 width: auto;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
}



/*-------------
 selectLink 
--------------*/
.selectLink{
 display: flex;
 justify-content: flex-end;
 align-items: center;
}
.selectLink a{
 display: block;
 font-size: 1.2rem;
 line-height: 34px;
}
.selectLink .info{
 padding-left: 38px;
 background: url("/product/images/icon_info.png") no-repeat left center;
 margin-right: 7px;
}
.selectLink .info:hover{ color: #003f7e;}
.selectLink .info span{
 border-bottom: 1px solid rgba(255,255,255,0);
 transition: border-color 0.2s;
 padding-bottom: 2px;
}
.selectLink .info:hover span{ border-color: #003f7e;}
.selectLink a:last-of-type{ margin-right: 0;}

.selectLink .btn{
 width: 130px;
 height: 34px;
 text-align: center;
 font-weight: 500;
 margin-left: 20px;
 color: #fff;
 position: relative;
 z-index: 1;
}
.selectLink .btn::before{
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 border-radius: 17px;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #003f7e;
 transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 2.4);
 outline: 1px solid transparent;/*firefoxカクカク解消*/
 z-index: -1;
}
.selectLink .btn:hover::before{ transform: scale(1.07) rotate(0.01deg);}

/*左右に要素あるときのWrap*/
.selectLinkWrap{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
}

/*resultArea内、selectLinkまわり*/
.selectLinkWrap .allSelect{ display: flex;}
.selectLinkWrap .allSelect .checkWrap:first-of-type{ margin-right: 22px;}
.selectLinkWrap .allSelect .checkBox{ background-color: #f9f9f9;}

/*マイリストと製品比較で出てくる*/
.selectLinkWrap .leftLinks{
 display: flex;
 align-items: center;
}
.selectLinkWrap .leftLinks .backLink{ margin-top: 6px;}
.selectLinkWrap .leftLinks .resetBtn{
 display: block;
 border: 1px solid #003f7e;
 text-align: center;
 width: 110px;
 border-radius: 77px;
 color: #003f7e;
 font-weight: 500;
 font-size: 1.2rem;
 transition: background-color 0.2s, color 0.2s;
 margin-left: 26px;
 padding: 10px 0;
}
.selectLinkWrap .leftLinks .resetBtn:hover{
 background-color: #003f7e;
 color: #fff;
}
/*製品比較のリセットボタン*/
.selectLinkWrap .leftLinks .resetBtn.compareReset{
 display: block;
 border: 1px solid #003f7e;
 text-align: center;
 width: 188px;
 height: 34px;
 border-radius: 17px;
 color: #003f7e;
 font-weight: 500;
 font-size: 1.2rem;
 transition: background-color 0.2s, color 0.2s;
 margin-left: 26px;
}
.selectLinkWrap .leftLinks .resetBtn.compareReset:hover{
 background-color: #003f7e;
 color: #fff;
}



/*-----------------
検索エリア部分
------------------*/
.searchArea{
 padding: 30px 0 50px;
 background-color: #f9f9f9;
}
.searchArea .selectLink{
 width: 1080px;
 margin: 0 auto 30px;
}


/*検索エリア白い範囲*/
.searchBoxInner{
 width: 1080px;
 margin: 0 auto 50px;
 background-color: #fff;
 display: flex;
 align-items: flex-start;
 padding: 69px 0 60px 75px;
}
.searchBoxInner .searchBoxInner-Left{
 width: 400px;
 margin-right: 40px;
}
.searchBoxInner dl{
 display: flex;
 align-items: center;
}
.searchBoxInner div dl:not(:last-of-type){ margin-bottom: 20px;}
.searchBoxInner dt{
 width: 110px;
 margin-right: 10px;
 font-size: 1.6rem;
 font-weight: 500;
 text-align: right;
}
.searchBoxInner dt span{ font-size: 1.2rem;}
.searchBoxInner dd{ font-size: 1.4rem;}



/*テキストボックス*/
.searchBoxInner input[type="text"]{ background-color: #f9f9f9;}



/*幅やマージン調整*/
.searchBoxInner .searchBoxInner-Left .selectBox,
.searchBoxInner .searchBoxInner-Left input[type="text"]{ width: 280px;}
.searchBoxInner .searchBoxInner-Left input[type="text"].w2{ width: 210px;}
.searchBoxInner .searchBoxInner-Right input[type="text"]:not(.num){ width: 104px;}
.searchBoxInner .searchBoxInner-Right input[type="text"].num{ width: 60px;}
.searchBoxInner .searchBoxInner-Right input[type="text"]{ margin: 0 10px;}
.searchBoxInner .searchBoxInner-Right dd input[type="text"]:first-of-type:not(.num){ margin-left: 0;}
.searchBoxInner .searchBoxInner-Right input[type="text"].mB{ margin-bottom: 10px;}
.searchBoxInner .searchBoxInner-Right input[type="text"].mL{ margin-left: 11px;}
.searchBoxInner .searchBoxInner-Right .N-label.mL{ margin-left: 12px;}


/*チェック部分*/
.searchBoxInner .checkWrap{ height: 36px;}
.searchBoxInner .checkBox{ background-color: #f9f9f9;}


/*サイズの部分*/
.searchBoxInner div dl.sizeDl{ align-items: flex-start; margin-bottom: 30px;}
.searchBoxInner .sizeDl dt{ padding-top: 9px;}
.searchBoxInner .sizeDl dd span:not(.N-label){ font-size: 2rem; padding: 0 1px;}
.searchBoxInner .sizeDl dd .N-label{ margin-left: 1px;}


/*タグ対応の部分*/
.searchBoxInner .tagList{
 display: flex;
 align-items: center;
}
.searchBoxInner .tagList label:not(:last-of-type){ margin-right: 16px;}
.searchBoxInner .tagList > span{
 font-size: 1.2rem;
 margin-left: 22px;
}



/*----------------
 検索ボタンまわり 
-----------------*/
.btnWrap .searchBtn input{ display: none;}
.btnWrap .linkBtn.searchBtn{ margin-bottom: 30px;}
.btnWrap .linkBtn.searchBtn::after{
 width: 20px;
 height: 20px;
 top: 20px;
 background: url("/product/images/icon_search.png") no-repeat center;
 background-size: contain;
}

.btnWrap .resetBtn{
 display: block;
 margin: 0 auto;
 border: 1px solid #003f7e;
 text-align: center;
 width: 210px;
 height: 42px;
 line-height: 42px;
 border-radius: 21px;
 color: #003f7e;
 font-weight: 500;
 font-size: 1.2rem;
 transition: background-color 0.2s, color 0.2s;
}
.btnWrap .resetBtn:hover{
 background-color: #003f7e;
 color: #fff;
}



/*-----------------
検索結果部分
------------------*/
/*検索ボタン押したときの飛び先位置調整*/
.resultPosition{
 position: relative;
 top: -60px;
 display: block;
}


.resultArea{
 width: 1080px;
 margin: 0 auto 100px;
}
/*検索結果内チェックのラベルスタイル*/
.resultArea .checkWrap{
 font-size: 1.2rem;
 font-weight: 500;
 color: #003f7e;
 cursor: pointer;
}


/*全〇〇点の製品が見つかりました。*/
.resultNum{
 margin: 90px 0 60px;
 text-align: center;
 font-size: 1.6rem;
 line-height: 2.7rem;
}
/*該当なしテキスト*/
.emptyText{
 margin: 90px 0;
 text-align: center;
 font-size: 1.6rem;
 line-height: 2.7rem;
}


/*-----------------
ソート並び替え部分
------------------*/
.resultArea .sortWrap{
 height: 86px;
 background-color: #f9f9f9;
 display: flex;
 align-items: center;
 padding: 0 0 0 23px;
 font-size: 1.4rem;
}
.resultArea .sortWrap > span{
 display: block;
 font-weight: 500;
 margin: 0 8px 0 5px;
}
.resultArea .sortWrap a{
 display: block;
 color: #8a8a8a;
 height: 36px;
 line-height: 36px;
 border: 1px solid #acacac;
 border-radius: 18px;
 min-width: 86px;
 text-align: center;
 padding: 0 11px 0 19px;
 margin-right: 8px;
}
.resultArea .sortWrap a.ml{ margin-left: 5px;}
.resultArea .sortWrap a img{
 margin-left: 6px;
 vertical-align: middle;
 margin-bottom: 1px;
}
.resultArea .sortWrap a.select{
 background-color: #838383;
 border-color: #838383;
 color: #fff;
}


/*hover色変え*/
.resultArea .sortWrap a,
.pagenationWrap .displayWrap a,
.pagenationWrap .pagenation > a{ transition: background-color 0.2s, border-color 0.2s;}
.resultArea .sortWrap a:not(.select):hover,
.pagenationWrap .displayWrap a:hover,
.pagenationWrap .pagenation > a:hover{ background-color: #dadada;}
.resultArea .sortWrap a:not(.select):hover,
.pagenationWrap .displayWrap a:hover{ border-color: #dadada;}




/*-----------------
表示数とページネーション
------------------*/
.pagenationWrap,
.pagenationWrap .displayWrap,
.pagenationWrap .pagenation{
 display: flex;
 align-items: center;
}
.pagenationWrap{
 justify-content: space-between;
 margin: 30px 0;
}
/*表示数*/
.pagenationWrap .displayWrap strong,
.pagenationWrap .displayWrap a{
 display: inline-block;
 width: 63px;
 height: 30px;
 line-height: 30px;
 border-radius: 15px;
 text-align: center;
 font-size: 1.4rem;
 margin-right: 10px;
}
.pagenationWrap .displayWrap strong{
 font-weight: 300;
 border: 1px solid #838383;
 background-color: #838383;
 color: #fff;
 cursor: default;
}
.pagenationWrap .displayWrap a{
 color: #8a8a8a;
 border: 1px solid #acacac;
}

/*ページネーション*/
.pagenationWrap .pagenation > a,
.pagenationWrap .pagenation > span,
.pagenationWrap .pagenation > b{
 display: block;
 width: 40px;
 text-align: center;
 height: 30px;
 line-height: 30px;
 color: #8a8a8a;
 font-size: 1.4rem;
 margin-left: 2px;
}
.pagenationWrap .pagenation > a{ background-color: #f9f9f9;}
.pagenationWrap .pagenation > span,
.pagenationWrap .pagenation > b{ cursor: default;}
.pagenationWrap .pagenation > b{
 background-color: #838383;
 color: #fff;
 font-weight: 300;
}
.pagenationWrap .pagenation .prev,
.pagenationWrap .pagenation .next{
 display: inline-block;
 width: 6px;
 height: 6px;
 border-right: 1px solid #8a8a8a;
 border-top: 1px solid #8a8a8a;
}
.pagenationWrap .pagenation .prev{
 transform: rotate(-135deg);
 margin-left: 2px;
}
.pagenationWrap .pagenation .next{
 transform: rotate(45deg);
 margin-right: 2px;
}




/*-----------------
商品一覧
------------------*/
.resultList{
 display: flex;
 flex-wrap: wrap;
}
.resultList > li{ width: 216px;}
.resultList > li:nth-of-type(2n+1) > a{ background-color: #f9f9f9;}
.resultList > li > a{
 display: block;
 width: 100%;
 height: 100%;
 padding: 30px 20px;
 transition: color 0.2s, background-color 0.2s;
}
.resultList > li > a:hover{
 color: #fff;
 background-color: #003f7e;
}
.resultList li .imgWrap{
 width: 150px;
 height: 150px;
 margin-bottom: 25px;
}
.resultList li dl{
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-bottom: 8px;
}
.resultList li dl dt{
 width: 60px;
 text-align: right;
 font-weight: 500;
}
.resultList li dl dd{
 width: calc(100% - 67px);
}

/* チェックボックス */
.resultList li .checks{
  margin: 20px 0 0 26px;
  display: flex;
  flex-wrap: wrap;
}

.resultList li .checks label:not(:last-of-type){ margin-bottom: 12px;}
.resultList .checkWrap{ transition: color 0.2s;}
.resultList > li > a:hover .checkWrap{ color: #fff;}



/* / */
.resultList li .checks span {
  font-size: 1.2rem;
  font-weight: 500;
  height: 20px;
  color: #003f7e;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  transition: color 0.2s;
  cursor: default;
}


/* copy */
.resultList .copy {
  transition: color 0.2s;
  font-size: 1.2rem;
  font-weight: 500;
  color: #003f7e;
  display: flex;
  align-items: center;
  cursor: pointer;
}


.resultList > li > a:hover .copy,
.resultList > li > a:hover span { color: #fff;}