@charset "shift_jis";
/* CSS Document */

/*202510 アウトレットキャンペーン*/
#contentsArea{
	background-color: #ece4d3;
}


#campaign .sideSearchTop_mobile {
display: none!important;
}


#campaign #contents {}
/* ===== 見出しスタイル ===== */

#campaign .tt-h1 {
    background-repeat: no-repeat;
    border: initial;
    border-radius: 10px;
    font-size: 1.5em;
    padding: 10px;
    color: #555;
}
#campaign .cmp202510 {
		padding: 10px;
}
.cmp202510 .fsxxl{
	font-size: xx-large;
}

.cmp202510 .campaignTxt {
		padding: 10px;
		margin: 20px auto 40px;
		font-size: 14px;
}
.cmp202510 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;
}

.cmp202510 .fv {
		text-align: center;
}
/* 装飾用CSS */
.cmp202510 .sale-section {
		background-color: #f9f9ff;
		padding: 2rem;
		border-radius: 8px;
		border: 1px solid #ddd;
		font-family: 'Helvetica Neue', sans-serif;
		line-height: 1.7;
}
.cmp202510 .sale-title {
		font-size: 1.8rem;
		color: #004080;
		margin-bottom: 0.5em;
}
.cmp202510 .sale-lead {
		font-size: 1.2rem;
		color: #333;
		margin-bottom: 1em;
}
.cmp202510 .sale-content p {
		margin-bottom: 1em;
		color: #555;
}
.cmp202510 .highlight {
		color: #d80000;
		font-weight: bold;
}
.cmp202510 .sale-link {
		color: #0066cc;
		text-decoration: underline;
}
.cmp202510 .sale-link:hover {
		text-decoration: none;
}
/* ===== 全体レイアウト ===== */
#reco {
		width: 100%;
		padding: 40px 20px;
		/*  border-top: 4px solid #cc0000;
  border-bottom: 4px solid #cc0000;
  font-family: 'Helvetica Neue', sans-serif;*/
}
/* ===== 見出しスタイル ===== */
/*.cmp202510 #reco h2 {
		font-size: 28px;
		text-align: center;
		margin-bottom: 30px;
		position: relative;
		color: #cc0000;
		font-weight: bold;
}*/
/*.cmp202510 #reco h2 span {
		display: block;
		font-size: 18px;
		color: #555;
		margin-top: 6px;
}
*/

.cmp202510 .reco-title h2 span {
		font-size: clamp(30px,5vw,60px);
		color: #555;
		margin-top: 6px;
}
.cmp202510 .reco-title h2 span.out {
		color: #cc0000;
}
.cmp202510 #reco{
    background: #555;
    margin-bottom: 5rem;
}
.cmp202510 .recowrap{
         background: #ffffff;
}
.cmp202510 .reco-title{
		margin: 0 auto;
}
.cmp202510 .reco-title p{
    text-align: center;
    line-height: 1.5rem;
    margin: 1rem auto 2rem;
    font-size: clamp(14px, 1.2vw, 20px);
    color: #555;
}
.cmp202510 .reco-title div{
    margin: 3rem auto 2rem;
    text-align: center;
    font-weight: bold;
    color: #555;
}
.cmp202510 .reco-title div span{
    font-size: clamp(20px, 3vw, 40px);
}
.cmp202510 .date_bubble {
    position: relative;
    padding: 10px 5px;
 /*   margin-top: -1rem;*/
    width: 100%;
}

.cmp202510 .date_bubble .date {
    position: absolute;
    top: -5rem;
    right: 20%;
    width: fit-content;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    background: #cc0000;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: clamp(18px, 3vw, 24px);
	    line-height: 3rem;
}

.cmp202510 .date_bubble .date::after {
  content: '';
  border: 8px solid transparent;
  border-top-color:  #cc0000;
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: -8px;
}

.moveb {
  animation: 0.5s move infinite alternate linear;
}

@keyframes move {
  to { transform: transtateY(0); }
  from { transform: translateY(4px); }
}

/* ===== グリッドレイアウト ===== */
.cmp202510 .recoGrid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px;
		/* 追加 */
	/* 	max-width: 900px;*/ /* 好きな幅に調整 */
		margin: 0 auto; /* 中央寄せ */
		padding: 0 10px; /* 画面端にくっつかないよう余白 */
}
.cmp202510 .recoGrid2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		/* 追加 */
		margin: 0 auto 80px; /* 中央寄せ */
		padding: 0 10px; /* 画面端にくっつかないよう余白 */
}
#campaign .cmp202510 .recoGrid .box_product {
    /* width: 47%; */
    background: #fff;
    border: 1px solid #FFEB3B;
    border-radius: 8px;
    box-shadow: 1px 2px 6px 0px #FF9800;
    padding: 12px;
    box-sizing: border-box;
    transition: transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}


/* ===== 商品カード ===== */

#campaign .cmp202510 .wrapper {
    display: grid;
    /*max-width: 1200px;*/
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto 80px;
    padding: 0 10px;

}

#campaign .cmp202510 .pic .disRate {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #cc0000;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 6px;
    width: fit-content;

}

#campaign .pic .disRate span { 
	   display: initial;
    margin: 0;
    font-size: 10px;
    text-align: right;
}

.cmp202510 .pic img {
    vertical-align: bottom;
    border-radius: 10px 10px 0 0;
    border: 5px solid white;
}
.cmp202510 .name {
 color:chocolate;
}

.cmp202510 .box_product {
    border: 1px solid #e9e6e5;
    border-radius: 10px;
    box-shadow: 1px 2px 6px 0px #e9e6e5;
    background: #ffffff;
}

.cmp202510 .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;
}
.cmp202510 .recoBox:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 15px rgba(204, 0, 0, 0.2);
}
/* ===== 商品画像 ===== */
.cmp202510 .recoBox .pic {
		position: relative;
}
.cmp202510 .recoBox .pic img {
		width: 100%;
		height: auto;
		display: block;
		transition: transform 0.3s ease;
}
.cmp202510 .recoBox .pic:hover img {
		transform: scale(1.05);
}
/* ===== OFFバッジ ===== */
.cmp202510 .disRate {
		position: absolute;
		top: 10px;
		left: 10px;
		background-color: #cc0000;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		padding: 6px 10px;
		border-radius: 6px;
}
.cmp202510 .disRate span {
		font-size: 11px;
		margin-left: 4px;
}
/* ===== 商品名 ===== */
.cmp202510 .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;
}
/* ===== 価格情報 ===== */
/* ==============================
   価格ボックス（.cmp202510 .box_price）
   ============================== */
.cmp202510 .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;
}
/* 割引率など */
.cmp202510 .box_price .off {
		color: #d10000;
		font-weight: bold;
		font-size: 14px;
}
/* 定価（打ち消し線） */
.cmp202510 .box_price .fixed {
		text-decoration: line-through;
		color: #888;
		font-size: 0.9rem;
		margin: 0;
}
/* セール価格 */
.cmp202510 .box_price .sale {
		font-weight: bold;
		color: #d10000;
		margin: 0;
}
.cmp202510 .box_price .sale span {
		font-size: 0.9rem;
		color: #555;
		margin-left: 6px;
}
/* 詳細ボタン */
.cmp202510 .box_price .more {
	margin-top: 12px;
	display: none;
}
.cmp202510 .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;
}
.cmp202510 .box_price .more a:hover {
		background: #a00000;
}
.cmp202510 .fv_wrap ul {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0;
		list-style: none;
		margin: 20px 0;
}
.cmp202510 .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;
}
.cmp202510 .fv_wrap li:hover {
		background: #e6f7ff;
		background-repeat: no-repeat;
		background-position: right center;
		background-size: contain;
		transform: translateY(-3px);
}
/* aタグをブロックにしてパディングをつける */
.cmp202510 .fv_wrap li a {
		text-decoration: none;
		color: #333;
		display: block;
		font-weight: bold;
		font-size: 0.95rem;
		padding: 16px; /* パディングをここに移動 */
		text-align: left; /* 中央揃えに */
}
/* アイコンのマージンはそのまま */
.cmp202510 .fv_wrap li i {
		margin-right: 6px;
		color: #007acc;
}

/*商品リスト*/
/* 商品一覧を囲むwrapperを横並びレイアウトに変更 */
.cmp202510 .wrapper {
		display: flex;
		flex-wrap: wrap; /* 折り返し対応 */
		gap: 20px; /* 商品間の余白 */
		justify-content: flex-start; /* 左寄せ */
}
/* 商品カード（box_product） */
#campaign .cmp202510 .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;
	 position: relative;
}
#campaign .cmp202510 .box_product_addlink {
        text-decoration: none;
}
#campaign .cmp202510 a {
        text-decoration: none;
}
#campaign .cmp202510 .setProducts{
position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #3b3838;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 10px;
  border-top: 1px double #c00;
  border-bottom: 1px double #c00;
}

/* ホバー時の拡大演出 */
.cmp202510 .box_product:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
/* 画像 */
.cmp202510 .box_product .pic {
		position: relative;
}
.cmp202510 .box_product .pic img {
		width: 100%;
		height: auto;
		transition: opacity 0.3s ease;
}
/* 画像ホバー時 */
.cmp202510 .box_product .pic img:hover {
		opacity: 0.5;
}
/* 商品名 */
.cmp202510 .box_product .name {
		font-size: 14px;
		font-weight: bold;
		margin: 10px 0;
}
/* 割引率など */
#campaign .cmp202510 .box_product .off {
		color: #d10000;
		font-weight: bold;
		font-size: 14px;
		text-align: center;
}
/* 価格関連 */
.cmp202510 .box_product .box_price {
		margin: 0 auto;
}
.cmp202510 .box_product .fixed {
		font-size: 12px;
		color: #888;
}
.cmp202510 .box_product .sale {
		font-size: 16px;
		color: #d9230f;
		font-weight: bold;
}
/* 在庫表示 */
.cmp202510 .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) {
.cmp202510 .recoGrid {
	display: grid;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 20px;
		margin: 0 auto; /* 中央寄せ */
		padding: 0 10px; /* 画面端にくっつかないよう余白 */
}
#campaign .cmp202510 .wrapper {
	display: grid;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 20px;
}

.cmp202510 .box_product {
	width: auto;
}
	
}

@media (max-width: 768px) {
	.cmp202510 .recowrap {
     background: initial;
}
	#campaign .cmp202510 .box_product {
     padding: initial; 
}
	.cmp202510 .recoGrid {
     padding: initial; 
}
	.cmp202510 #reco {
    background:initial;
}
	#campaign .cmp202510 .wrapper {
    padding: 0; 
}
	.cmp202510 .date_bubble {
    position: relative;
    padding: 10px 5px;
    margin-top: 3rem;
    width: 100%;
}
	.cmp202510 .date_bubble .date {
     position: relative; 
 /*   top: -8rem;
    right: 0;*/
    top: -5rem;
    left: 0;
		
    width: fit-content;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    background: #cc0000;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: clamp(18px, 3vw, 24px);
    line-height: 3rem;
}
}
@media (min-width: 1280px) {

		.cmp202510 {
				max-width: 1700px;
				margin: auto;
		}
		.cmp202510 .box_product {
				width: auto;
		}
		.cmp202510 #contents {
				margin: auto;
		}
	#campaign .cmp202510 .wrapper {
	display: grid;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	grid-template-columns: repeat(6, 1fr);
	margin-bottom: 20px;
}
}