@charset "UTF-8";

/* SP：style_logitec_sp.css */

/* --------------------------------------------------------------------
	Common
-------------------------------------------------------------------- */
/* welcomeMessage */
div#welcomeMessage {
	color: #666666;
	padding: 0.6em 0 0.6em;
}
div#welcomeMessage p {
	font-size: 12px;
}
div#welcomeMessage p span {
	font-size: 14px;
	margin: 0 0.2em 0 0.5em;
}

/* もっと見るリンク */
div.morelink_ {
	border-top: 1px solid #c9d4da;
	margin: 2em 0 0 0;
	padding: 1em 0 0 0;
	text-align: right;
}
div.morelink_ a {
	color: #3399cc;
	display: block;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.08em;
}
div.morelink_ span {
	padding-right: 10px;
	position: relative;
}
div.morelink_ a span:after {
	border: 6px solid transparent;
	border-left: 7px solid #3399cc;
	content: '';
	display: inline-block;
	height: 0;
	margin: -6px 0 0 0;
	position: absolute;
	top: 50%; right: -6px;
	width: 0;
}

/* もっと見るボタン */
div.btn_more_ {
	border: 1px solid #c9d4da;
	margin: 2em 0 0 0;
	text-align: center;
}
div.btn_more_ span {
	color: #3399cc;
	display: inline-block;
	font-size: 14px;
	padding: 1.2em 8px 1.2em 0;
	position: relative;
}
div.btn_more_ span:after {
	border: 6px solid transparent;
	border-top: 7px solid #3399cc;
	content: '';
	display: inline-block;
	height: 0;
	margin: -4px 0 0 0;
	position: absolute;
	top: 50%; right: -6px;
	width: 0;
}

/* banner */
div.banner_{
margin-top: 10px;	
}

div.banner_ + div.banner_ {
	margin-top: 1em;
}
div.contents_ > div.banner_ {
	margin: 0.8em 0 0 0;
	padding: 3% 0;
}


/* --------------------------------------------------------------------
	Common Block
-------------------------------------------------------------------- */
/* searchblock */
div.searchblock_ {
	margin: 1.1em auto 0;
	position: relative;
	width: 95%;
}
div.searchblock_ input[type="text"] {
	border: 1px solid #92aab6;
	border-radius: 0;
	height: 30px;
	margin: 0;
	padding: 0 0.5em;
	vertical-align: top;
	width: 90%;
}
div.searchblock_ input[type="submit"] {
	background: #92aab6 url(../img/common/btn_search.png) no-repeat center center;
	background-size: 12px auto;
	border: none;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	color: #ffffff;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	top: 0; right: 0;
	text-align: center;
	text-indent: 100%;
	width: 10%;
	white-space: nowrap;
}

/* snsblock */
div.snsblock_ {
	padding: 3em 0;
}
div.snsblock_ ul {
	display: table;
	margin: 0 auto;
	width: 234px;
}
div.snsblock_ ul li {
	display: table-cell;
	padding: 0 14px;
}

/* bannerblock */
div.bannerblock_ {
}
div.bannerblock_ ul li + li {
	margin-top: 1.2em;
}


/* --------------------------------------------------------------------
	Contents Header
-------------------------------------------------------------------- */
div.contents_header_ {
	padding: 0 3%;
}

div.contents_header_ h1 {
	font-size: 14px;
	font-weight: bold;
	position: relative;
}
div.contents_header_ h1:before {
	content: '\025C6';
}


/* --------------------------------------------------------------------
	Contents Footer
-------------------------------------------------------------------- */
div.contents_footer_ {
	padding: 2.2em 3% 0;
}

/* navitopicpath */
div.navitopicpath_ {
	background: none;
	padding: 0;
}
div.navitopicpath_ ul#bread-crumb-list {
	overflow: hidden;
}
div.navitopicpath_ ul#bread-crumb-list li {
	float: left;
	font-size: 13px;
}
div.navitopicpath_ ul#bread-crumb-list li a {
	color: #329acd;
	margin: 0;
	text-decoration: underline;
}
div.navitopicpath_ ul#bread-crumb-list li a:not(.topicpath_home_) {
	padding: 0 0 0 12px;
	position: relative;
}
div.navitopicpath_ ul#bread-crumb-list li a:not(.topicpath_home_):before {
	border: 5px solid transparent;
	border-left: 7px solid #000000;
	content: '';
	display: inline-block;
	height: 0;
	margin: -4px 0 0 0;
	position: absolute;
	top: 50%; left: 0.3em;
	width: 0;
}


/* --------------------------------------------------------------------
	Bottom Block
-------------------------------------------------------------------- */
div.bottomblock_ {
	background: #ffffff;
	padding: 0 0 1.4em 0;
}
/*div.bottomblock_ {
	background: #f3f7f8;
	padding: 0 0 1.4em 0;
}*/
#home div.bottomblock_ {
	padding-bottom: 1em;
}


/* about_security */
div.bottomblock_ div.about_security_ {
	background: #ffffff;
	border-radius: 10px;
	display: table;
	margin: 1em 0 0 0;
	padding: 0.8em 3.6% 0.4em;
}
div.bottomblock_ div.about_security_ img {
	display: table-cell;
	padding: 1em 0 0 0;
}
div.bottomblock_ div.about_security_ dl {
	color: #000000;
	display: table-cell;
	padding: 0 2% 0 0;
	vertical-align: top;
	width: 75%;
}
div.bottomblock_ div.about_security_ dl dt {
	font-size: 13px;
	font-weight: bold;
}
div.bottomblock_ div.about_security_ dl dd {
	font-size: 12px;
	line-height: 1.4;
	margin: 0.5em 0 0 0;
}
div.bottomblock_ div.about_security_ dl dd a {
	color: #000000;
}


/* --------------------------------------------------------------------
	Item Common
-------------------------------------------------------------------- */
/* サムネイル */
.item_thumbnail_ img {
/* 	border: 1px solid #94aab6; */
}

/* アイコン */
.item_icon_ {
	line-height: 1;
}
.item_icon_ li {
	display: inline-block;
	height: 16px;
	margin: 4px 4px 0 0;
	vertical-align: middle;
}
.item_icon_ li img {
	height: 16px;
	width: auto;
}

/* カテゴリ */
.item_cate_ {
	background: #ffffff;
	border-radius: 5px;
	color: #ffffff;
	display: none; /* 閲覧履歴以外では表示させない */
	font-size: 12px;
	letter-spacing: 0.1em;
	margin: 0 0 0.4em 0;
	padding: 0.2em 0.6em 0.1em;
}

/* 製品名 */
.item_name_ {
	font-size: 14px;
	line-height: 1.3;
}

/* 値段 */
.item_price_ {
	color: #ce0000;
	display: inline-block;
	font-weight: bold;
}
.item_price_ span {
	font-size: 1em;
}
.item_price_ small {
	color: #112631;
	font-size: 0.6em;
}


/* 送料無料アイコン */
.icon_free_ {
	display: inline-block;
	line-height: normal;
}
.icon_free_ span {
	background: #ce0000;
	color: #ffffff;
	display: block;
	font-size: 9px;
	padding: 0.2em 0.4em 0.1em;
}

/* ポイント表示 */
.icon_point_ {
	color: #ffff00;
	display: inline-block;
	height: 16px;
	margin: 0.4em 0 0 0;
}
.icon_point_ span {
	background: #000000;
	border-radius: 16px;
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.05em;
	padding: 0.2em 1.2em 0.1em;
}





/* --------------------------------------------------------------------
	Item Block
-------------------------------------------------------------------- */
div.itemblock_ {
	margin: 1.5em 0 0 0;
}
div.itemblock_ + div.itemblock_ {
	margin-top: 2em;
}
div.itemblock_:after {
	clear: both;
	content: ".";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

/* itemblock_title_sub */
p.itemblock_title_sub_ {
	color: #333333;
	font-size: 13px;
	letter-spacing: 0.05em;
	margin: 0 0 0.4em 0;
}

/* item_frame */
div.item_frame_ {
	background: #ffffff;
	border-radius: 10px;
   /* padding: 1.3em 5.8%;*/
	position: relative;
	/*margin-bottom: 1em;*/
}
div.item_frame_:after {
	clear: both;
	content: ".";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

/* itemblock_title */
div.itemblock_title_ {
	border-bottom: 1px solid #b3b3b3;
	background: #e6e6e6;
	padding: 5px 0 0 8px;
}

div.itemblock_title_01 {
	border-bottom: 1px solid #b3b3b3;
	background: #ffffcc;
	padding: 5px 0 0 8px;
}

div.itemblock_title_02 {
	border-bottom: 1px solid #b3b3b3;
	background: #ffd9ad;
	padding: 5px 0 0 8px;
}

div.itemblock_title_03 {
	border-bottom: 1px solid #b3b3b3;
	background: #ffd8d8;
	padding: 5px 0 0 8px;
}


div.itemblock_title_ .itemblock_title_main_ , .itemblock_title_01 .itemblock_title_main_  , .itemblock_title_02 .itemblock_title_main_ , .itemblock_title_03 .itemblock_title_main_{
	font-size: 16px;
	letter-spacing: 0.05em;
	font-weight: bold;
}

div.itemblock_ .itemblock_title_feature {
	border-bottom: 1px solid #b3b3b3;
	background: #0055bf;
	padding: 5px 0 0 8px;
	margin-bottom: 10px;
	color: #ffffff;
	font-weight: bold;
}


/* item */
div.item_ {
	margin: 1.3em 0 0 0;
	outline: none;
}
div.item_ div.item_thumbnail_ {
	display: table-cell;
	vertical-align: top;
	width: 80px;
}
div.item_ div.item_desc_ {
	display: table-cell;
	padding: 0 0 0 1em;
	vertical-align: top;
}
div.item_ div.item_desc_ p.item_price_ {
	font-size: 14px;
	margin: 0.5em 0.2em 0 0;
	vertical-align: -0.1em;
}
/* スライダーの場合 */
div.item_line_ div.item_thumbnail_ {
	display: block;
	margin: 0 auto 1em;
	width: 200px;
}
div.item_line_ div.item_desc_ {
	display: block;
	padding: 0;
}
div.item_line_ div.item_desc_ p.item_price_ {
	font-size: 18px;
}
/* スライダーの場合 2column */
div.item_line_two_column_ div.item_ {
	padding: 0 0.25%;
}
div.item_line_two_column_ div.item_thumbnail_ {
	display: block;
	margin-bottom: 0.8em;
	width: auto;
}
div.item_line_two_column_ div.item_desc_ {
	display: block;
	padding: 0;
}


/* pickup */
div.itemblock_.pickup_ ul {
	margin: 1.8em 0;
}
div.itemblock_.pickup_ ul li {
	float: left;
	padding: 0 1px;
	text-align: center;
	width: 50%;
}
div.itemblock_.pickup_ ul li:first-child {
/*	border-right: 1px solid #e6e6e6;*/
}

/* houjin */
div.itemblock_.houjin_ ul {
	margin: 1.8em 0;
}
div.itemblock_.houjin_ ul li {
	float: left;
	padding: 0 1%;
	text-align: center;
	width: 50%;
}
/* 最近閲覧した商品 */
div.itemblock_.history_ {
	background: #ffffff;
	margin-top: 0;
	padding: 1em 0;
}
/*div.itemblock_.history_ {
	background: #f3f7f8;
	margin-top: 0;
	padding: 1em 0;
}*/

div.itemblock_.history_ ul li {
	margin: 1em 0 0 0;
}
div.itemblock_.history_ ul li div.item_thumbnail_ {
	display: table-cell;
	margin: 0;
	vertical-align: top;
	width: 75px;
}
div.itemblock_.history_ ul li div.item_desc_ {
	display: table-cell;
	padding: 0 0 0 1em;
	vertical-align: top;
}
div.itemblock_.history_ ul li p.item_cate_ {
	display: inline-block !important;
}
div.itemblock_.history_ ul li p.item_price_ {
	font-size: 16px;
	margin: 0.5em 0.2em 0 0;
	vertical-align: -0.1em;
}

/* ランキング */
div.itemblock_.ranking_ ul li {
	margin: 1em 0 0 0;
}
div.itemblock_.ranking_ ul li div.item_thumbnail_ {
	display: table-cell;
	margin: 0;
	vertical-align: top;
	width: 75px;
}
div.itemblock_.ranking_ ul li div.item_desc_ {
	display: table-cell;
	padding: 0 0 0 1em;
	vertical-align: top;
}
div.itemblock_.ranking_ ul li p.item_price_ {
	font-size: 16px;
	margin: 0.5em 0.2em 0 0;
	vertical-align: -0.1em;
}
div.itemblock_.ranking_ p.rank {
	font-size: 15px;
	font-weight: bold;
}
div.itemblock_.ranking_ p.first,
div.itemblock_.ranking_ p.second,
div.itemblock_.ranking_ p.third {
	padding: 6px 0 0 20px;
}
div.itemblock_.ranking_ p.first {
	background: url(../img/common/rank_01.png) no-repeat left center;
	background-size: 18px 15px;
}
div.itemblock_.ranking_ p.second {
	background: url(../img/common/rank_02.png) no-repeat left center;
	background-size: 18px 15px;
}
div.itemblock_.ranking_ p.third {
	background: url(../img/common/rank_03.png) no-repeat left center;
	background-size: 18px 15px;
}

/* 関連商品 */
div.itemblock_.related_ {
	margin-top: 2em;
}
div.itemblock_.related_ div.item_frame_ {
	padding: 0;
}


/* --------------------------------------------------------------------
	Slick Slider
-------------------------------------------------------------------- */
.slick-slider {
	margin-bottom: 0;
}
div.item_image_ .slick-slider {
	margin-bottom: 3.6em;
}

.slick-next,
.slick-prev {
	top: 43%;
	width: 20px;
}
.item_line_two_column_ .slick-next,
.item_line_two_column_ .slick-prev {
	top: 35%;
}
.subcategory_list_ .slick-next,
.subcategory_list_ .slick-prev {
	top: 37%;
}

.slick-next:before,
.slick-prev:before {
	font-size: 22px;
	width: 20px;
}
.slick-next {
	right: -10px;
}
.slick-next:before {
	content: url(../img/home/arrow_next_sp.png);
}
.slick-prev {
	left: -10px;
}
.slick-prev:before {
	content: url(../img/home/arrow_prev_sp.png);
}
.related_ .slick-next {
	right: 0;
}
.related_ .slick-prev {
	left: 0;
}

.slick-dots {
	bottom: -3.2em;
}
.slick-dots li {
	margin: 0;
}
.slick-dots li button:before {
	background: #e6e6e6;
	border: 1px solid #cccccc;
	border-radius: 8px;
	content: '';
	height: 8px;
	width: 8px;
}
.slick-dots li.slick-active button:before {
	background: #cccccc;
}


/* --------------------------------------------------------------------
	Special Contents 2020.7.22追加
-------------------------------------------------------------------- */
div.spc_area{
	background: #ffffff;
	border-radius: 10px;
	padding: 1.3em 5.8%;
	position: relative;
	margin-bottom: 1em;
}
ul.spc_bn li{
	float: left;
	padding: 1%;
	text-align: center;
	width: 50%;
}

/* --------------------------------------------------------------------
	SeeQVault対応HDD カテゴリ上部SP  2023/06/06追加
-------------------------------------------------------------------- */
#choice .hdmenu{
	width:100%;
	height:34;
	margin:0;
	padding:20px 0 0 0;
	clear:both;
}

#choice .hdmenu img{
	float:left;
	margin:0;
	padding:0;
}

#choice .hddsqv_txt{
	font-size: 150%;
	background-color: #11927e;
	padding: 10px;
	color: #FFFFFF;
	letter-spacing: 0.05em;
}

#choice .hddsqv_img img{
	border: solid 1px #e6e6e6;
	margin: 5px;
}
#choice .hddsqv_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffe900;
  font-size: 18px;
  border-radius: 3px;
  width: 120px;
  height: 40px;
  transition: 0.3s;
  background-color: #000000;
}

#choice .hddsqv_btn:hover {
  opacity: .7;
}

/* --------------------------------------------------------------------
	ナビプラス表示カルーセル調整
-------------------------------------------------------------------- */
@media (max-width:768px){

  /* カルーセル内（reco11/12）の商品名リンクをブロック化 */
  .js-reco-slider .item_ .product-title{
	display:block;
	margin-top:6px;
	color:inherit;
	text-decoration:none;
  }

  /* 商品名スパンを2行省略 */
  .js-reco-slider .product-title .truncate-zen{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	text-overflow:ellipsis;
	line-height:1.5;
  }

  /* 送料無料は商品名の下の行 */
  .js-reco-slider .item_ .icon_free_{
	display:block;
	margin-top:4px;
	font-size:12px;
  }
  .js-reco-slider .item_ .icon_free_ span{
	display:inline-block;
	/*padding:2px 6px;
	border-radius:3px;
	background:#f44;
	color:#fff; */
  }

  /* 価格はさらにその下の行 */
  .js-reco-slider .item_ .item_price_{
	display:block;
	margin-top:4px;
	font-weight:bold;
	font-size:17px;
  }

  .js-reco-slider .item_price_label {
  font-size: 0.83em; /* 親より小さく */
}

  .js-reco-slider .item_price_value {
  font-size: 1.2em; /* 親より大きく */
}

  .js-reco-slider .item_price_value::before {
  content: "￥";
  font-size: 0.7em;   /* 金額より小さく（お好みで調整） */
  margin-right: 0.15em;
}

  .js-reco-slider .item_price_value::after {
  content: "";/* 旧「円」を無効化 */
  margin-left: 0;
}
}