@charset "shift_jis";
/* CSS Document */
.settlement {
		padding: 10px;
}
.settlement .campaignTxt {
		padding: 10px;
		margin: 20px auto 40px;
		font-size: 14px;
}
.settlement h2 {
		font-size: 1.8rem;
		font-weight: bold;
		color: #222;
		text-align: center;
		margin: 40px 0 30px;
		padding-bottom: 10px;
		border-bottom: 3px solid red;
		box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.2);
		border-left: none;
}
.settlement .fv {
		text-align: center;
}
/* 装飾用CSS */
.settlement .sale-section {
		background-color: #f9f9ff;
		padding: 2rem;
		border-radius: 8px;
		border: 1px solid #ddd;
		font-family: 'Helvetica Neue', sans-serif;
		line-height: 1.7;
}
.settlement .sale-title {
		font-size: 1.8rem;
		color: #004080;
		margin-bottom: 0.5em;
}
.settlement .sale-lead {
		font-size: 1.2rem;
		color: #333;
		margin-bottom: 1em;
}
.settlement .sale-content p {
		margin-bottom: 1em;
		color: #555;
}
.settlement .highlight {
		color: #d80000;
		font-weight: bold;
}
.settlement .sale-link {
		color: #0066cc;
		text-decoration: underline;
}
.settlement .sale-link:hover {
		text-decoration: none;
}
/* ===== 全体レイアウト ===== */
#reco {
		/*  background-color: #fff5f5;*/
		padding: 40px 20px;
		/*  border-top: 4px solid #cc0000;
  border-bottom: 4px solid #cc0000;
  font-family: 'Helvetica Neue', sans-serif;*/
}
/* ===== 見出しスタイル ===== */
.settlement .reco h2 {
		font-size: 28px;
		text-align: center;
		margin-bottom: 30px;
		position: relative;
		color: #cc0000;
		font-weight: bold;
}
.settlement .reco h2 span {
		display: block;
		font-size: 18px;
		color: #555;
		margin-top: 6px;
}
/* ===== グリッドレイアウト ===== */
.settlement .recoGrid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px;
		/* 追加 */
		max-width: 900px; /* 好きな幅に調整 */
		margin: 0 auto; /* 中央寄せ */
		padding: 0 10px; /* 画面端にくっつかないよう余白 */
}
.settlement .recoGrid2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		/* 追加 */
		margin: 0 auto 80px; /* 中央寄せ */
		padding: 0 10px; /* 画面端にくっつかないよう余白 */
}
/* ===== 商品カード ===== */
.settlement .recoBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between; /* 上下の要素を両端に */
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.settlement .recoBox:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 15px rgba(204, 0, 0, 0.2);
}
/* ===== 商品画像 ===== */
.settlement .recoBox .pic {
		position: relative;
}
.settlement .recoBox .pic img {
		width: 100%;
		height: auto;
		display: block;
		transition: transform 0.3s ease;
}
.settlement .recoBox .pic:hover img {
		transform: scale(1.05);
}
/* ===== OFFバッジ ===== */
.settlement .disRate {
		position: absolute;
		top: 10px;
		left: 10px;
		background-color: #cc0000;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		padding: 6px 10px;
		border-radius: 6px;
}
.settlement .disRate span {
		font-size: 11px;
		margin-left: 4px;
}
/* ===== 商品名 ===== */
.settlement .name {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding: 10px 12px 0;
		line-height: 1.4;
		/* 高さを揃えたい場合 */
		min-height: 3.5em; /* 2行分くらいの高さを確保 */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2; /* 最大2行表示 */
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
}
/* ===== 価格情報 ===== */
/* ==============================
   価格ボックス（.settlement .box_price）
   ============================== */
.settlement .box_price {
		padding: 12px 16px 16px;
		margin: 0 12px 16px;
		color: #444;
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 8px; /* 各価格要素の間隔 */
		font-size: 0.95rem;
}
/* 割引率など */
.settlement .box_price .off {
		color: #d10000;
		font-weight: bold;
		font-size: 14px;
}
/* 定価（打ち消し線） */
.settlement .box_price .fixed {
		text-decoration: line-through;
		color: #888;
		font-size: 0.9rem;
		margin: 0;
}
/* セール価格 */
.settlement .box_price .sale {
		font-weight: bold;
		color: #d10000;
		margin: 0;
}
.settlement .box_price .sale span {
		font-size: 0.9rem;
		color: #555;
		margin-left: 6px;
}
/* 詳細ボタン */
.settlement .box_price .more {
	margin-top: 12px;
	display: none;
}
.settlement .box_price .more a {
		display: inline-block;
		padding: 8px 16px;
		background: #cc0000;
		color: #fff;
		border-radius: 6px;
		font-weight: 700;
		font-size: 0.9rem;
		text-decoration: none;
		transition: background 0.3s;
}
.settlement .box_price .more a:hover {
		background: #a00000;
}
.settlement .fv_wrap ul {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0;
		list-style: none;
		margin: 20px 0;
}
.settlement .fv_wrap li {
		background: #f8f8f8;
		border: 1px solid #ddd;
		border-radius: 6px;
		/* text-align: center; 削除して a に移動 */
		/* padding: 16px; 削除 */
		transition: background-color 0.3s ease, transform 0.3s ease;
		background-repeat: no-repeat;
		background-position: right center;
		background-size: contain;
}
.settlement .fv_wrap li:hover {
		background: #e6f7ff;
		background-repeat: no-repeat;
		background-position: right center;
		background-size: contain;
		transform: translateY(-3px);
}
/* aタグをブロックにしてパディングをつける */
.settlement .fv_wrap li a {
		text-decoration: none;
		color: #333;
		display: block;
		font-weight: bold;
		font-size: 0.95rem;
		padding: 16px; /* パディングをここに移動 */
		text-align: left; /* 中央揃えに */
}
/* アイコンのマージンはそのまま */
.settlement .fv_wrap li i {
		margin-right: 6px;
		color: #007acc;
}
/*カテゴリアイコン*/
.settlement .fv_wrap li.desk {
		background-image: url(/ws/images_n/bg_cate_desk.png);
}
.settlement .fv_wrap li.chair {
		background-image: url(/ws/images_n/bg_cate_chair.png);
}
.settlement .fv_wrap li.wagon {
		background-image: url(/ws/images_n/bg_cate_wagon.png);
}
.settlement .fv_wrap li.board {
		background-image: url(/ws/images_n/bg_cate_board.png);
}
.settlement .fv_wrap li.library {
		background-image: url(/ws/images_n/bg_cate_library.png);
}
.settlement .fv_wrap li.table {
		background-image: url(/ws/images_n/bg_cate_table.png);
}
.settlement .fv_wrap li.locker {
		background-image: url(/ws/images_n/bg_cate_locker.png);
}
.settlement .fv_wrap li.rece {
		background-image: url(/ws/images_n/bg_cate_rece.png);
}
.settlement .fv_wrap li.panel {
		background-image: url(/ws/images_n/bg_cate_panel.png);
}
.settlement .fv_wrap li.acc {
		background-image: url(/ws/images_n/bg_cate_acc.png);
}
.settlement .fv_wrap li.office_chair {
		background-image: url(/ws/images_n/bg_cate_office_exe_chair.png);
}
.settlement .fv_wrap li.stacking_chair {
		background-image: url(/ws/images_n/bg_cate_stacking.png);
}
.settlement .fv_wrap li.stacking_lobby_chair {
		background-image: url(/ws/images_n/bg_cate_stacking_lobby.png);
}
.settlement .fv_wrap li.meeting_lobby_chair {
		background-image: url(/ws/images_n/bg_cate_meeting.png);
}
.settlement .fv_wrap li.meeting_chair_etc {
		background-image: url(/ws/images_n/bg_cate_meetingchair.png);
}
.settlement .fv_wrap li.officers_fur {
		background-image: url(/ws/images_n/bg_cate_officers_fur.png);
}
.settlement .fv_wrap li.outlet {
		background-image: url(/ws/images_n/bg_cate_outlet.png);
}
.settlement .fv_wrap li.safe {
		background-image: url(/ws/images_n/bg_cate_safe.png);
}
.settlement .fv_wrap li.monitor {
		background-image: url(/ws/images_n/bg_cate_monitor.png);
}
/*商品リスト*/
/* 商品一覧を囲むwrapperを横並びレイアウトに変更 */
.settlement .wrapper {
		display: flex;
		flex-wrap: wrap; /* 折り返し対応 */
		gap: 20px; /* 商品間の余白 */
		justify-content: flex-start; /* 左寄せ */
}
/* 商品カード（box_product） */
.settlement .box_product {
		width: 47%;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 12px;
		box-sizing: border-box;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* ホバー時の拡大演出 */
.settlement .box_product:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
/* 画像 */
.settlement .box_product .pic {
		position: relative;
}
.settlement .box_product .pic img {
		width: 100%;
		height: auto;
		transition: opacity 0.3s ease;
}
/* 画像ホバー時 */
.settlement .box_product .pic img:hover {
		opacity: 0.5;
}
/* 商品名 */
.settlement .box_product .name {
		font-size: 14px;
		font-weight: bold;
		margin: 10px 0;
}
/* 割引率など */
.settlement .box_product .off {
		color: #d10000;
		font-weight: bold;
		font-size: 14px;
		text-align: center;
}
/* 価格関連 */
.settlement .box_product .box_price {
		margin: 0 auto;
}
.settlement .box_product .fixed {
		font-size: 12px;
		color: #888;
}
.settlement .box_product .sale {
		font-size: 16px;
		color: #d9230f;
		font-weight: bold;
}
/* 在庫表示 */
.settlement .box_product .stockNum {
		margin-top: 6px;
		font-size: 12px;
		color: #d00;
}
/* ==============================
   カテゴリトップリンク（.catetop）
   ============================== */
.catetop {
		text-align: center;
		margin: 2rem 0;
}
.catetop p {
		margin: 0;
}
.catetop a {
		display: inline-block;
		background: #007acc; /* サイトの青系カラー */
		color: #fff;
		padding: 10px 20px;
		border-radius: 6px;
		font-weight: 700;
		font-size: 0.95rem;
		text-decoration: none;
		transition: background 0.3s ease, transform 0.2s ease;
}
.catetop a:hover {
		background: #005f9e;
		transform: translateY(-2px);
}
.catetop a i {
		margin-right: 6px;
		font-size: 1rem;
}
/* 割引ラベルの位置調整（必要に応じて） */
/* タブレット以下：3列 */
@media (min-width: 600px) {
	.settlement .recoGrid2 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		/* 追加 */
		margin: 0 auto 80px; /* 中央寄せ */
		padding: 0 10px; /* 画面端にくっつかないよう余白 */
}
.settlement .wrapper {
	display: grid;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 20px;
}
		.settlement .fv_wrap ul {
				grid-template-columns: repeat(3, 1fr);
		}
.settlement .box_product {
	width: auto;
}
}
@media (min-width: 1024px) {
	.settlement .recoGrid2 {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 20px;
		/* 追加 */
		margin: 0 auto 80px; /* 中央寄せ */
		padding: 0 10px; /* 画面端にくっつかないよう余白 */
}
	.settlement .wrapper {
	display: grid;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	grid-template-columns: repeat(6, 1fr);
			margin-bottom: 20px;
}
		.settlement {
				max-width: 1700px;
				margin: auto;
		}
		.settlement .box_product {
				width: auto;
		}
		.settlement #contents {
				margin: auto;
		}
		.settlement .fv_wrap ul {
				display: grid;
				grid-template-columns: repeat(3, 1fr); /* デフォルトは4列 */
				gap: 16px;
				padding: 0;
				list-style: none;
				margin: 20px 0;
		}
}