@charset "UTF-8";

/* SP：list_sp.css */

/* --------------------------------------------------------------------
	一覧ページ
-------------------------------------------------------------------- */
/* Headline */
.wrapper_ > h1 {
	font-size: 16px;
	font-weight: bold;
    padding: 0 3%;
	position: relative;
}
.wrapper_ > h1:before {
	content: '\25C6'; /* ◆ マーク */
}

h2.category_name_ {
    line-height: 1.2;
}
h3.category_top_ {
	color: #112631;
    font-weight: bold;
	padding: 0 0 0 9px;
    position: relative;
    font-size: 16px;
}
h3.category_top_:after {
    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: 1px;
    width: 0;
}

/* タイプ別リスト */
div.subcategory_list_ {
    padding: 0.7em 3%;
    font-size: 15px;
}
div.subcategory_list_ ul {
	margin: 0.6em auto 0;
    width: 95%;
}
div.subcategory_list_ ul li {
	outline: none;
	padding: 0 0.5%;
}
div.subcategory_list_ ul li a {
	color: #112631;
    display: block;
}
div.subcategory_list_ ul li img {
	background: #ffffff;
	/* border: 1px solid #94aab6; */
}
div.subcategory_list_ ul li p {
    font-size: 15px;
    line-height: 1.2;
	margin: 0.8em 0 0 0;
}
div.subcategory_list_ table tr th img {
	padding: 5px;
}

div.subcategory_list_ table tr th {
	padding: 2px;
}

div.subcategory_list_ table.lineUp3 tr p {
	font-size: 14px;
	color: #000000;
}

div.subcategory_list_ .capacity_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 3px;
  width: 120px;
  height: 40px;
  transition: 0.3s;
  background-color: #0055bf;
}

div.subcategory_list_ .capacity_btn:hover {
  opacity: .7;
}

div.subcategory_list_ .product_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 3px;
  width: 300px;
  height: 40px;
  transition: 0.3s;
  background-color: #0055bf;
}

div.subcategory_list_ .product_btn:hover {
  opacity: .7;
}

/* ページナビゲーション */
div.navipage_ {
    clear: both;
	margin: 0;
    padding: 0 3%;
    text-align: left;
}
div.navipage_.bottom_ {
    margin: 2.5em 0 0 0;
	text-align: center;
}
div.navipage_ p {
	font-size: 12px;
}
div.navipage_ p span {
	font-size: 12px;
	font-weight: bold;
	padding: 0 0.3em 0 0.5em;
}
div.navipage_ p strong {
	font-size: 12px;
	font-weight: normal;
}

/* 表示切替 */
div.sort_style_ {
	margin-top: -1em;
	position: relative;
	top: 68px;
	left: 67.5%;
	text-align: center;
	vertical-align: middle;
	width:  33.33333%;
	width: -webkit-calc(100% / 3);
	width: calc(100% / 3);
}
div.sort_style_ dl dt {
	display: inline-block;
	font-size: 13px;
	vertical-align: middle;
}
div.sort_style_ dl dd {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 2px;
}
div.sort_style_ dl dd a {
	padding: 0 10px;
}
div.sort_style_ dl dd img {
	vertical-align: -0.3em;
	width: 26px;
}

/* 並び替え */
div.sort_ {
    background: #e9eaec;
	width: 100%;
}
div.sort_ > div {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	width:  33.33333%;
	width: -webkit-calc(100% / 3);
	width: calc(100% / 3);
}
div.sort_ div.sort_select_ {
	height: 42px;
}
div.sort_ div.sort_select_ select {
	background: transparent;
	border: 0;
	display: inline-block;
	font-family: inherit;
	font-size: 13px;
	height: 100%;
	outline: none;
	padding: 0;
}

/* 検索結果一覧 */
div.search_result_ {
}
div.search_result_:after {
	clear: both;
	content: "";
	display: block;
}
div.search_result_ div.sr_item_ {
	display: table;
	padding: 1.36em 3%;
	width: 100%;
}
div.search_result_ div.item_thumbnail_ {
	display: table-cell;
	vertical-align: top;
	width: 100px;
}
div.search_result_ div.btn_var_ {
	margin: 1.1em 0 0 0;
	text-align: center;
}
div.search_result_ div.btn_var_ a {
	background: #94aab6;
	border-radius: 4px;
	color: #ffffff;
	display: block;
	font-size: 13px;
    line-height: 1.2;
    padding: 0.6em 2%;
}
div.search_result_ div.item_desc_ {
	display: table-cell;
	padding: 0 0 0 1em;
	vertical-align: top;
}
div.search_result_ ul.item_icon_ {
	margin: -4px 0 0.2em 0;
}
div.search_result_ p.item_cord_ {
	font-size: 12px;
    margin: 0.6em 0 0 0;
}
div.search_result_ p.item_name_ {
	font-size: 14px;
    line-height: 1.3;
    margin: 0.2em 0 0 0;
}
div.search_result_ p.item_name_ a {
	color: #3399cc;
}
div.search_result_ div.item_spec_ p {
	display: inline-block;
	font-size: 13px;
	margin: 0.4em 2em 0 0;
	vertical-align: baseline;
}
div.search_result_ div.item_spec_ p.stock_ span {
	color: #f15a24;
	font-size: 13px;
}
div.search_result_ div.pricebox_ {
    display: block;
    margin: 0.35em 0 0 0;
}
div.search_result_ div.pricebox_ p.item_price_ {
    font-size: 16px;
    line-height: 1.4;
}
div.search_result_ div.pricebox_ p.item_price_ small {
	display: block;
}

/* サムネイル表示対応 */
div.search_result_ div.sr_item_line_ {
    clear: both;
    display: table;
    width: 100%;
}
div.search_result_ div.sr_item_line_ div.sr_item_ {
    display: table-cell;
	width: 50%;
}
div.search_result_ div.sr_item_line_ div.item_thumbnail_ {
    display: block;
	margin: 0 auto 1.1em;
	width: 98%;
}
div.search_result_ div.sr_item_line_ div.item_desc_ {
	display: block;
	padding-left: 0;
}
div.search_result_ div.sr_item_line_ div.btn_var_ {
	margin-top: 1em;
}
div.search_result_ div.sr_item_line_ div.btn_var_ a {
    padding: 0.4em 2%;
}

/* もっと見るボタン */
div.btn_more_#goods_list_load_button {
	background: none;
    margin: 1.4em auto 1.2em;
    width: 83%;
}
div.btn_more_#goods_list_load_button span {
    color: #3399cc;
    display: inline-block;
    font-size: 14px;
	font-weight: normal;
	line-height: 1;
    padding: 1.2em 8px 1.2em 0;
    position: relative;
}

/* アイコン画像調整 */
ul.item_icon_ img,
ul.item_icon_ span > img {
	width: auto;
}

div.search_result_ a {
	text-decoration: none;
}

/* カテゴリ改善20251009追加(SP)
---------------------------------------------------- */
#category_sp {
  font-family: "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif;
  margin: 40px auto;
  width: 100%;
  background-color: #fff;
  color: #333;
  padding: 0 10px;
}

#category_sp .category_tit {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 6px;
  margin-bottom: 20px;
}

/* ▼ カテゴリ一覧（2列） */
#category_sp .lineUp2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 20px;
  margin: 10px 0 20px 0;
  width: 100%;
}

#category_sp .lineUp2 .item {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  padding: 10px;
  transition: 0.2s;
}

#category_sp .lineUp2 .item img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 8px;
}

#category_sp .lineUp2 .item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  display: block;
}

#category_sp .lineUp2 .item:hover {
  background: #0078d4;
  border-color: #0078d4;
  transform: translateY(-2px);
}

#category_sp .lineUp2 .item:hover a {
  color: #fff;
}

/* ▼ 利用シーン別（2列） */
#category_sp .use-choice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 10px 0 20px 0;
}

#category_sp .use-choice .box2 {
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden; /* ← 枠内に収める */
}

#category_sp .use-choice .box2 a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 12px;
  text-decoration: none;
  color: #333;
  box-sizing: border-box;
}

#category_sp .use-choice .box2 img {
  width: 100%;
  height: auto;
  max-width: 100%; /* ← 横はみ出し防止 */
  border-radius: 4px;
  object-fit: contain; /* ← 枠内に収める */
}

#category_sp .use-choice .box2 p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 10px 0 0 0;
  padding: 0 4px;
  text-align: center;
  word-break: keep-all;
}

#category_sp .use-choice .box2:hover {
  background-color: #0078d4;
  border-color: #0078d4;
  transform: translateY(-3px);
}

#category_sp .use-choice .box2:hover a,
#category_sp .use-choice .box2:hover p {
  color: #fff;
}

/* ▼ 容量別（3列） */
#category_sp .capacity-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 16px;
  margin: 10px 0 20px 0;
}

#category_sp .capacity-buttons .button {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#category_sp .capacity-buttons .button a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 1rem;
}

#category_sp .capacity-buttons .button:hover {
  background-color: #0078d4;
  border-color: #0078d4;
  transform: translateY(-2px);
}

#category_sp .capacity-buttons .button:hover a {
  color: #fff;
}

#Select_from_category_sp {
  font-family: "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif;
  margin: 40px auto;
  width: 100%;
  background-color: #fff;
  color: #333;
  padding: 0 10px;
}

#Select_from_category_sp .category_tit {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 6px;
  margin-bottom: 20px;
}

/* ▼ カテゴリ一覧（2列） */
#Select_from_category_sp .lineUp2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 20px;
  margin: 10px 0 20px 0;
  width: 100%;
}

#Select_from_category_sp .lineUp2 .item {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  padding: 10px;
  transition: 0.2s;
}

#Select_from_category_sp .lineUp2 .item img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 8px;
}

#Select_from_category_sp .lineUp2 .item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  display: block;
}

#Select_from_category_sp .lineUp2 .item:hover {
  background: #0078d4;
  border-color: #0078d4;
  transform: translateY(-2px);
}

#Select_from_category_sp .lineUp2 .item:hover a {
  color: #fff;
}

/* ▼ 利用シーン別（2列） */
#Select_from_category_sp .use-choice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 10px 0 20px 0;
}

#Select_from_category_sp .use-choice .box2 {
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden; /* ← 枠内に収める */
}

#Select_from_category_sp .use-choice .box2 a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 12px;
  text-decoration: none;
  color: #333;
  box-sizing: border-box;
}

#Select_from_category_sp .use-choice .box2 img {
  width: 100%;
  height: auto;
  max-width: 100%; /* ← 横はみ出し防止 */
  border-radius: 4px;
  object-fit: contain; /* ← 枠内に収める */
}

#Select_from_category_sp .use-choice .box2 p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 10px 0 0 0;
  padding: 0 4px;
  text-align: center;
  word-break: keep-all;
}

#Select_from_category_sp .use-choice .box2:hover {
  background-color: #0078d4;
  border-color: #0078d4;
  transform: translateY(-3px);
}

#Select_from_category_sp .use-choice .box2:hover a,
#Select_from_category_sp .use-choice .box2:hover p {
  color: #fff;
}

/* ▼ 容量別（3列） */
#Select_from_category_sp .capacity-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 16px;
  margin: 10px 0 20px 0;
}

#Select_from_category_sp .capacity-buttons .button {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#Select_from_category_sp .capacity-buttons .button a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 1rem;
}

#Select_from_category_sp .capacity-buttons .button:hover {
  background-color: #0078d4;
  border-color: #0078d4;
  transform: translateY(-2px);
}

#Select_from_category_sp .capacity-buttons .button:hover a {
  color: #fff;
}

#Select_from_category_sp a:hover img {
  opacity: 1 !important;
}