@charset "utf-8";
/*////////////////////////////////////////////////////////////////

	フェンス　トップページ

///////////////////////////////////////////////////////////////*/

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	font-size:0;
}
.clearfix { display: inline-block; }
/* \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */


/* 汎用クラス
------------------------------------------------------------------*/
.rollover:hover {/* ロールオーバー */
	filter: alpha(opacity=70);
	opacity: 0.7;
	zoom: 1;
}

/* ===============================================
	 ヘッダ
 ============================================== */

#cp_nav {
	margin: 10px 0 10px;
	padding-bottom: 5px;
	background: url(/public/img/item/common/nav_bg.png) no-repeat 0 0;
	text-align: left;
}
#cp_nav h2,
#cp_nav h3 {
	float: left;
}
#cp_nav h3 {/* コピー */
	display: inline;
	margin: 0;
	margin-left: 7px;
}
dl#gnav {
	clear: both;
	height: 88px;
	margin-bottom: 7px;
	padding-left: 4px;
	background: url(/public/img/item/fe/menu/nav.png) no-repeat 4px 32px;
}
dl#gnav dt {/* テキスト */
	height: 32px;
}

/* ===============================================
	 ナビゲーション
 ============================================== */
 
dl#gnav dd {
	float: left;
	width: 96px;
	height: 56px;
	text-indent: -9999px;
}
dl#gnav dd a {
	display: block;
	width: 96px;
	height: 56px;
	background: url(/public/img/item/fe/menu/nav2.png) no-repeat;
}
dl#gnav dd.bt_gnav01 a {	background-position: 0 0; }/* アルミ */
dl#gnav dd.bt_gnav02 a {	background-position: -96px 0; }/* スチール */
dl#gnav dd.bt_gnav03 a {	background-position: -192px 0; }/* 鋳物 */
dl#gnav dd.bt_gnav04 a {	background-position: -288px 0; }/* その他素材 */
dl#gnav dd.bt_gnav05 a {	background-position: -384px 0; }/* 目隠しタイプ */
dl#gnav dd.bt_gnav06 a {	background-position: -480px 0; }/* 高尺タイプ */

/* rollover */
dl#gnav dd.bt_gnav01 a:hover,
dl#gnav dd.selected01 a {	background-position: 0 -56px; }/* アルミ */
dl#gnav dd.bt_gnav02 a:hover,
dl#gnav dd.selected02 a {	background-position: -96px -56px; }/*  スチール */
dl#gnav dd.bt_gnav03 a:hover,
dl#gnav dd.selected03 a {	background-position: -192px -56px; }/* 鋳物 */
dl#gnav dd.bt_gnav04 a:hover ,
dl#gnav dd.selected04 a {	background-position: -288px -56px; }/* その他素材 */
dl#gnav dd.bt_gnav05 a:hover,
dl#gnav dd.selected05 a {	background-position: -384px -56px; }/* 目隠しタイプ */
dl#gnav dd.bt_gnav06 a:hover,
dl#gnav dd.selected06 a {	background-position: -480px -56px; }/* 高尺タイプ */

/* 探すボタン３つ */
#cp_nav ul {
	float: left;
	width: 355px;
	margin-bottom: 6px;
	padding-left: 4px;
}
#cp_nav ul li {
	float: left;
	padding-right: 5px;
}



/* ===============================================
	売れ筋商品
 ============================================== */

h2 {/* エンジ色見出し */
	margin: 15px auto 10px;
}
.item h3 {
	margin: 0 auto;
}
.item p.explain {
	text-align: left;
}

#RankingOf3cate ol li {
	text-align: left;
}

#centerColumn {
	margin-bottom: 20px;
	text-align: left;
}

.gardenAlmighty {/* ガーデンプラスのバナー */
	margin: 20px auto;
}

.item_recommend {
	margin: 10px auto !important;
}

#RankingOf3cate li.caption {
	text-align: center !important;
}

/* 商品検索機能
------------------------------------------------------------------*/
#cp_search {
	margin-bottom: 20px;
	padding-bottom: 6px;
	background: url(/public/img/item/cp/menu/bg_cp_search.png) no-repeat 0 0;
}
#cp_search h3 {
	float: left;
	margin: 0;
}
#cp_search p {
	float: right;
}
dl#search_nav {
	clear: both;
	padding-left: 14px;
}
dl#search_nav dt {
	height: 18px;
	margin-bottom: 5px;
	padding-top: 14px;
}
dl#search_nav dt img {
	margin-right: 20px;
}
dl#search_nav dd {
	float: left;
	height: 55px;
	margin-right: 5px;
}
dl#search_nav dd.weather {
	margin-right: 2px;
}

#cp_search ul {
	margin-top: 4px;
	margin-left: 8px;
}
#cp_search ul li {
	float: left;
	margin-right: 5px;
}

/* その他関連商品
---------------------------------------------------------*/
ul#link_item {
	margin: 10px 0;
	margin-left: 3px;
}
ul#link_item li {
	float: left;
	width: 186px;
	margin: 0 4px;
}

/* 個性派商品
---------------------------------------------------------*/
.specialItem h3 {
	margin:  0;
}

div#related_search_links h4.search_type {
    background: url("/public/img/item/cp/menu/related_search_links_h4_joken.jpg") no-repeat scroll left top transparent;
}
.search_type {
	
}

/* フェンスの選び方はこちらボタン
------------------------------------------------------------------------*/
p.howto {
  float: right;
  margin-top: -1px;
  padding-right: 4px;
}

/* 見出し変更 2013/10/10
------------------------------------------------------------------------*/
#cp_nav h1 {
	float: left;
}

/* css/sp/cp.cssから必要箇所のみ抽出 #241
------------------------------------------------------------------------*/
div.item_recommend{
	margin:12px auto;
	text-align:center;
}
div.item_recommend h3{
  overflow: hidden;
  height:46px;
  margin:0px;
  margin-bottom:11px;
  padding:0px;
  background: url(/public/img/item/fe/menu/sprite_fe_recoms.png) no-repeat 0 0 #fff;
  text-indent: 100%;
  white-space: nowrap;
  *text-indent: -9999px;/* IE7 */
}

div.item_recommend h3.ttl_rcm01{  background-position: 0px 0px;}
div.item_recommend h3.ttl_rcm02{  background-position: 0px -46px;}

ul.item_recommend_list{
  width:562px;
  margin:0px auto;
  padding: 9px 11px;
  background-image:url(/public/img/sp/cp/gridBg04.png);
  line-height:0;
}
ul.item_recommend_list li{
  float:left;
  width:187px;
  overflow:hidden;
}
ul.item_recommend_list li.list03,
ul.item_recommend_list li.list06{
  width:186px;
}
ul.item_recommend_list li {
  background:#fff;
  border: 1px solid #ccc;
}
ul.item_recommend_list li.list01 { border-right: none;}
ul.item_recommend_list li.list02 { border-right: none; border-left: none;}
ul.item_recommend_list li.list03 { border-left: none;}
ul.item_recommend_list li.list04 { border-right: none;}
ul.item_recommend_list li.list05 { border-right: none; border-left: none;}
ul.item_recommend_list li.list06 { border-left: none;}

ul.item_recommend_list li a {
  overflow: hidden;
  display: block;
  height: 235px;
  background: url(/public/img/item/fe/menu/sprite_fe_recoms.png) no-repeat 0 0;
  text-indent: 100%;
  white-space: nowrap;
  *text-indent: -9999px;/* IE7 */
}
ul.item_recommend_list li.list01 a {  background-position: 0px -92px;}
ul.item_recommend_list li.list02 a {  background-position: -187px -92px;}
ul.item_recommend_list li.list03 a {  background-position: -374px -92px;}
ul.item_recommend_list li.list04 a {  background-position: 0px -327px;}
ul.item_recommend_list li.list05 a {  background-position: -187px -327px;}
ul.item_recommend_list li.list06 a {  background-position: -374px -327px;}

/* 絞り込み検索 #241
------------------------------------------------------------------------*/
#item_filter_search {
	margin-bottom: 19px;
}

/* ランキング部分スプライト化 #1977
------------------------------------------------------------------------*/
#cate_ranking_top5 h3,
#cate_ranking_top5 .menu_ranking_top5 ol li dl dt {
  background: url(/public/img/img_top/ranking/fe/sprite_fe_ranking.png?2025101000) no-repeat 0 0;
}

/* 大バナー説明文
------------------------------------------------------------------------*/
div#recommend_on_top .bnr_item p.explain strong.red {
  color: #f00;
}
/* ランキング部  strong
------------------------------------------------------------------------*/
#cate_ranking_top5 .menu_ranking_top5 ol li dl dd p.item_name a strong.top-mg {
	top: 119px;
}

/* ヘッダに注釈追加
------------------------------------------------------------------------*/
.fence-note {
  margin-top: 7px;
  color: #f00;
  font-weight: bold;
}

/* #31359: [横]EXHP＞フェンス＞カテゴリトップ_FAQ下バナーの更新
------------------------------------------------------------------------*/
.related-othercategory {
  margin: 40px 0;
  position: relative;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif ;
}
.othercategory-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
	margin: 0 0 16px 0;
}
.othercategory-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 0;
  scrollbar-width: none; /* Firefox */
}
.othercategory-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.othercategory-card {
	position: relative;
  flex: 0 0 148px;
}
.othercategory-image img {
  display: block;
  width: 148px;
  height: 120px;
  border: 1px solid #ddd;
  object-fit: cover;
}
.label-category {
	position: absolute;
	top: 0;
	left: 0;
}
.label-discount {
  background: #fef2f2;
	border: #ffb0b3 1px solid;
  color: #ff0000;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 4px;
	float: left;
}
.othercategory-name {
  height: 30px;
  margin: 8px 0;
  font-size: 12px;
	font-weight: bold;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.othercategory-price {
  font-size: 14px;
  color: #ff0000;
	text-align: right;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
	display: none;
}

.othercategory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; 
}

.othercategory-nav {
  display: flex;      
  gap: 8px;           
}

.custom-prev, .custom-next {
  position: static;           
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: url(/public/img/global/icon_next-darkgray.svg) center center no-repeat #fff;
  background-size: 10px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.custom-prev {
  transform: scaleX(-1); 
}

.custom-prev:hover,
.custom-next:hover {
  opacity: 0.7;
}