.wpc_gift
	{
	width: 1240px;
	max-width: 100%;
	margin: 2rem auto 0 auto;
	letter-spacing: 1px;
	}

.wpc_gift img
	{
	width: 100%;
	}

.wpc_gift>div
	{
	margin: 6rem 0;
	text-align: center;
	}

.wpc_gift div h2
	{
	margin-bottom: 1rem;
	font-size: 2em;
	font-weight: normal;
	}

.wpc_gift div p
	{
	font-size: 1.5em;
	}

.wpc_gift .gift_nav
	{
	width: 1000px;
	max-width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}

.wpc_gift .gift_nav li
	{
	width: 48%;
	margin-bottom: 2rem;
	}

.wpc_gift .gift_nav li a
	{
	color: #fff;
	display: flex;
	align-items: stretch;
	justify-content: center;
	background: #9ec1d8;
	padding: 1.5rem 0;
	line-height: 1.2;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	}

.wpc_gift .gift_nav li:first-child a ,.wpc_gift .gift_nav li:last-child a
	{
	padding: 2.3rem 0;
	}

.wpc_gift .gift_nav li a p
	{
	font-size: 1.5em;
	}

.wpc_gift .gift_nav li a small
	{
	font-size: 0.8em;
	line-height: 1.2;
	display: block;
	text-align: center;
	}

.wpc_gift .gift_nav li a em
	{
	display: inline-block;
	position: absolute;
	padding: 5px 0;
	right: -45px;
	top: 15px;
	width: 150px;
	font-size: 1.2em;
	text-align: center;
	font-style: normal;
	background: #fff10f;
	color: #0f142a;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}

.wpc_gift .about_nav
	{
	width: 1000px;
	max-width: 90%;
	margin: 8rem auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center
	}

.wpc_gift .about_nav li
	{
	width: 30%;
	margin: 0 1.5rem 2rem 1.5rem;
	}

.wpc_gift .about_nav li a
	{
	padding: 2rem 0;
	text-align: center;
	font-size: 1.3em;
	color: #fff;
	display: block;
	background: #0f142a;
	border-radius: 50px;
	}

.wpc_gift .search ,.wpc_gift .cost ,.wpc_gift .brand
	{
	width: 1000px;
	max-width: 90%;
	margin: 15rem auto 5rem auto;
	}

.wpc_gift .search h3 ,.wpc_gift .cost h3 ,.wpc_gift .brand h3
	{
	text-align: center;
	font-size: 2em;
	font-weight: 600;
	}

.wpc_gift .search_scene ul
	{
	margin-top: 5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}

.wpc_gift .search_scene ul:after
	{
	content: "";
	width: 49%;
	}

.wpc_gift .search_scene ul li
	{
	width: 23%;
	margin-bottom: 1.5rem;
	}


.wpc_gift .search h4
	{
	margin-top: 10rem;
	text-align: center;
	font-size: 2.5em;
	}

/*タブ切り替え*/

.wpc_gift .tab_list {
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 2px solid #0f142a;
    border-radius: 100px;
}

.wpc_gift .tab_list li
{
width: 50%;
padding: 0.8rem 0;
text-align: center;
font-size: 1.2em;
}


.wpc_gift .search_ranking .tab_list li {
    width: 20%;
    padding: 1rem 0;
    font-size: 1.5em;
    text-align: center;
    transition: all 0.3s;
}



.tab_list li.active {
    color: #fff;
    background: #0f142a;
    border-radius: 100px;
}

/* --- コンテンツ表示 --- */
.tab_cont > div {

    display: none;
    position: relative;
}

.tab_cont > div.active {
    display: block;
margin: 5rem 0;
}

/* --- 横スクロールリスト --- */
.tab_cont div ul {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0 20px 2rem;
    gap: 30px;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    counter-reset: ranking;
    /* 標準バーを隠す */
    scrollbar-width: none;
    -ms-overflow-style: none;
cursor: grab;
    user-select: none; /* テキスト選択を無効化してドラッグを優先 */
    -webkit-user-drag: none; /* 画像のドラッグを禁止 */
}

.tab_cont div ul.grabbing {
    cursor: grabbing;
}

.tab_cont div ul img {
    pointer-events: none; /* 画像へのマウスイベントを透過させて背景のスクロールを活かす */
}

.tab_cont a {
    display: block;
    pointer-events: auto; /* リンクだけはクリックできるように戻す */
}

.tab_cont div ul::-webkit-scrollbar {
    display: none;
}

.tab_cont div ul li {
    display: block;
    flex: 0 0 250px;
    white-space: normal;
    counter-increment: ranking;
}

/* --- ランキングバッジ --- */
.tab_cont div ul li .item_img { position: relative; }
.tab_cont div ul li .item_img:before {
    color: #fff;
    font-size: 0.8em;
    content: counter(ranking, decimal-leading-zero);
    font-family: "Montserrat", sans-serif;
    position: absolute;
    left: 5px;
    top: 15px;
    z-index: 1;
}
.tab_cont div ul li .item_img:after {
    content: "";
    border: 25px solid transparent;
    position: absolute;
    z-index: 0;
    top: 0; left: 0;
}

.search_category .tab_cont div ul li .item_img:before ,.search_category .tab_cont div ul li .item_img:after
{
display: none;
}
.tab_cont div ul li:nth-child(1) .item_img:after { border-top-color: #968144; border-left-color: #968144; }
.tab_cont div ul li:nth-child(2) .item_img:after { border-top-color: #9fa0a0; border-left-color: #9fa0a0; }
.tab_cont div ul li:nth-child(3) .item_img:after { border-top-color: #6f5301; border-left-color: #6f5301; }

.tab_cont div ul li .item_txt { font-size: 1em; margin: 1rem 0; text-align: left; }
.tab_cont div ul li span { display: block; text-align: left; font-size: 1.5em; color: #6f717f; }

/* --- 自作スクロールバー --- */
.custom_scrollbar {
    width: 100%;
	margin: 0 !important;
    display: flex;
    justify-content: center;
    clear: both;
}

.bar_rail {
    width: 60%;
    height: 4px;
    background: #f1f1f1;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.bar_thumb {
	margin: 0 !important;
    width: 30%; /* レールに対するつまみの幅 */
    min-width: 30px; /* 消えないように最小幅を設定 */
    height: 100%;
    background: #0f142a;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0; /* 必ず0からスタート */
    transform: translateX(0px); /* 初期位置 */
    will-change: transform;

}

.custom_scrollbar+p ,.search_brand ul+p
{
margin: 8rem auto;
text-align: center;
}


.custom_scrollbar+p a ,.search_brand ul+p a
	{
	color: #fff;
	letter-spacing: 1px;
	background: #0f142a;
	padding: 1.5rem 10rem;
	border-radius: 50px;
	position: relative;
	display:inline !important;
	}

.custom_scrollbar+p a:before ,.search_brand ul+p a:before
        {
        content: "";
        position: absolute;
        top: 50%;
        right: 8%;
        width: 11px;
        height: 11px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
        margin-top: -5px;
        }





/* キーワード（タグ）のスタイル */
.search-tags
	{
	width: 1000px;
	max-width: 90%;
	margin: 0 auto !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.tag-item
	{
	width: 23%;
	margin: 0 0.8rem;
	padding: 1rem 0;
	text-align: center;
	color: #0f142a;
	cursor: pointer;
	border-radius: 50px;
	font-size: 1.5em;
	transition: all 0.3s;
	background: #fff;
	border: 1px solid #0f142a;
	}

.tag-item:hover {
    background-color: #0f142a;
    color: #fff;
}
.tag-item.is-active {
    background-color: #0f142a;
    color: #fff;
    border-color: #333;
}

.price-slider-wrapper
	{
	width: 950px;
	max-width: 90%;
	margin: 5rem auto !important;
	}

.price-slider-wrapper div
	{
	margin: 0 !important;
	}

.price-display
	{
	padding: 0 0 3rem 0 !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}


.noUi-connect {
    background: #0f142a !important;
}
.noUi-horizontal {
    height: 8px !important;
}
.noUi-handle {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    right: -12px !important;
    top: -9px !important;
    cursor: pointer !important;
box-shadow: none;
background: #0f142a !important;
border: 0;
}
.noUi-handle::before, .noUi-handle::after {
    display: none !important; /* つまみの縦線を消す */
}

.noUi-target
{
border: 0;
background: #c4c4c6;
box-shadow: none;

}

/* 検索ボタン */
.submit-container {
	margin: 0 !important;
    text-align: center;
}
.custom-submit-btn {
color: #fff;
letter-spacing: 1px;
background: #0f142a;
padding: 1.5rem 8rem;
border-radius: 50px;
position: relative;
border: 0;
	font-size: 1.5em;
}

.custom-submit-btn:before
        {
        content: "";
        position: absolute;
        top: 50%;
        right: 8%;
        width: 11px;
        height: 11px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
        margin-top: -5px;
        }

.custom-submit-btn:hover {
    opacity: 0.8;
}







.search_brand ul
	{
	margin: 0 auto !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.search_brand .women
	{
	max-width: 95%;
	}

.search_brand ul li
	{
	width: 23%;
	margin: 0 1rem 1rem 1rem;
	}

.search_brand ul+p
	{
	margin-top: 5rem;
	text-align: center;
	font-size: 1.5em;
	}


.pagetop_link
{
position: fixed;
bottom: 50px;
right: 50px;
}

.pagetop_link:before {
  content: '';
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -3px;
  margin-top: -9px;
}
.pagetop_link:after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 90%;
  left: 60%;
  transform: rotate(-45deg);
}




@media screen and (max-width:769px) {
.wpc_gift div h2
{
font-size: 1.2em;
}
.wpc_gift div p
{
font-size: 0.9em;
}

.wpc_gift .gift_nav li a p
{
font-size: 1.2em;
}

.wpc_gift .about_nav li
{
width: 49%;
margin: 0 0.5% 1rem 0.5%;
font-size: 0.7em;
}

.wpc_gift .about_nav li a
{
padding: 1.5rem 0;
}

.wpc_gift .search, .wpc_gift .cost, .wpc_gift .brand
{
 margin: 10rem auto 5rem auto;
}

.wpc_gift .search_scene ul li
{
width: 48%;
}

.wpc_gift .search h3, .wpc_gift .cost h3, .wpc_gift .brand h3
{
font-size: 1.3em;
}

.wpc_gift .search h4
{
margin-top: 5rem;
font-size: 1.5em;
}

.wpc_gift .tab_list li
{
font-size: 1em;
}
.tab_cont div ul li span
{
font-size: 1.1em;
}

.tab_cont div
{

}

.tab_cont div ul
{
padding: 0;
gap: 20px;
}

.tab_cont div ul li
{
flex: 0 0 150px;
}
.custom_scrollbar
{
margin-top: 3rem !important;
}

.search-tags
{
width: 100%;
justify-content: space-between;
}

.tag-item
{
width: 24%;
font-size: 1em;
padding: 0.5rem 0;
margin: 0;
}

.price-slider-wrapper
{
max-width: 100%;
}

#price-range-slider
{
width: 95%;
margin: 0 auto !important;
}

.custom-submit-btn
{
font-size: 1em;
}

.search_brand ul
{
max-width: 100% !important;
justify-content: space-between;
}

.search_brand ul li
{
width: 49%;
margin: 0 0 0.5rem 0;
}

.search_brand ul li:last-child
{
margin-left: 26%;
}

.search_brand ul + p
{
font-size: 1em;
}

.wpc_gift .search_ranking .tab_list li
{
font-size: 0.7em;
}


.pagetop_link
{
position: fixed;
bottom: 30px;
right: 30px;
}


}




/*ギフトラッピング*/

.gift_bg
{
padding: 8rem 0 10rem 0 ;
background: #f2eee9;
}

.gift_s
{
text-align: center;
}

.gift_s h2
{
width: 1000px;
max-width: 90%;
margin: 0 auto;
padding: 1rem 0;
background: #fff;
text-align: center;
font-weight: normal;
border-radius: 50px;
}

.gift_s h3
{
color: #e83636;
text-align: center;
font-size: 2.5em;
}

.gift_s img
{
width: 1000px;
max-width: 90%;
margin: 0 auto;
}

.gt_alink
{
margin-top: 5rem;
}

.gt_alink a
{
color: #fff;
letter-spacing: 1px;
background: #0f142a;
font-size: 1.5em;
padding: 1.5rem 10rem;
border-radius: 50px;
position: relative;
}

.gt_alink a:before
{
content: "";
position: absolute;
top: 50%;
right: 8%;
width: 11px;
height: 11px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
margin-top: -5px;
}

.sponly
{
display: none;
}

@media screen and (max-width:769px) {
.sponly
{
display: block;
}

.gift_s h2
{
font-size: 1em;
}

.gift_s h3
{

font-size: 1.5em;
}

.gt_alink a
{
font-size: 1em;
}

}



/*self wrapping*/
.self_w h2
{
width: 1000px;
max-width: 90%;
margin: 0 auto;
padding: 1rem 0;
background: #fff;
text-align: center;
font-weight: normal;
border-radius: 50px;
}

.self_w h3
{
color: #e83636;
text-align: center;
font-size: 2.5em;
}


.self_w ul
{
width: 1000px;
max-width: 90%;
margin: 0 auto 8rem auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.self_w ul li
{
width: 32%;
padding: 2rem;
background: #fff;
text-align: center;
}

.self_w ul li h2
{
margin: 2rem 0;
}

.self_w ul li p
{
font-size: 1.2em;
}

.self_w ul li span
{
display: block;
margin: 1rem 0;
padding: 0.5rem 0;
font-size: 1.2em;
background: #f2eee9;
border-radius: 5px;
}

.self_w ul li small
{
font-size: 1em;
display: block;
text-align: left;
}

.self_w .gt_alink
{
text-align: center;
}

.self_w div
{
width: 1000px;
max-width: 90%;
padding: 5rem;
margin: 10rem auto 8rem auto;
background: #fff;
}

.self_w div strong
{
display: block;
text-align: center;
font-size: 1.5em;
margin-bottom: 2rem;
}

.self_w div p
{
font-size: 1.1em;
margin-bottom: 1rem;
}

.self_w div p:last-child
{
margin-bottom: 0;
}

.self_w div p span
{
color: #e83636;
}



@media screen and (max-width:769px) {
.self_w div
{
padding: 2rem 1rem;
}

.self_w div p
{
font-size: 1em;
}

.self_w h2
{
font-size: 1em;
}


.self_w h3
{
font-size: 1em;
}

.self_w ul
{

flex-wrap: nowrap;     /* 折り返しを禁止 */
overflow-x: auto;      /* 横方向にスクロール可能にする */
justify-content: flex-start; /* 左寄せにする */
max-width: 100%;       /* 画面端まで使えるように調整 */
padding: 0 5% 5% 5%;         /* 両端に少し余白を作る（お好みで） */
gap: 15px;             /* リスト間の隙間 */
-webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
margin-bottom: 2rem;
}

.self_w ul li
{
width: 80%;            /* 1枚のカードを画面の8割くらいの幅に見せる */
flex-shrink: 0;
padding: 1.5rem;
margin-left: 1rem;
}

.self_w ul li h2
{
font-size: 1.2em;
}

.self_w div strong
{
font-size: 1.2em;
}

.self_w div p ,.self_w ul li span
{
font-size: 1em;
}

}



/*eギフト*/
.egift
{
width: 1000px;
max-width: 90%;
padding: 5rem;
margin: 10rem auto 8rem auto;
}

.egift h2
{
font-weight: 600;
text-align: center;
margin-bottom: 3rem;
font-size: 2em;
}

.egift .point ,.egift .link ,.egift .card
{
margin-bottom: 10rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.egift .point li
{
width: 22%;
text-align: center;
}

.egift .point li p
{
line-height: 1.4;
margin-top: 1rem;
}

.egift .point li p small
{
display: block;
}

.egift h2+p
{
font-size: 1.5em;
text-align: center;
}

.egift .card li
{
width: 22%;
margin-top: 3rem;
}

.egift .link li
{
width: 32%;
margin-top: 5rem;
}

.egift .link li a
{
padding: 2rem 0rem;
color: #fff;
display: block;
text-align: center;
position: relative;
background: #0f142a;
border-radius: 50px;
}

.egift .link li a p
{
font-size: 1.3em;
}

.egift .link li a::before
{
content: "";
position: absolute;
top: 45%;
right: 10%;
width: 9px;
height: 9px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(135deg);
}

.egft_bg
{
padding-bottom: 1rem !important;
}

.egft_bg > div
{
width: 1000px;
max-width: 90%;
margin: 0 auto;
}

.egft_bg h3 ,.egift h3
{
text-align: center;
font-size: 2em;
font-weight: 600;
}

.egft_bg h4
{
padding: 1rem 0;
text-align: center;
font-size: 2em;
font-weight: 600;
background: #fff;
}




.egft_bg h4+ul
{
width: 1000px;
max-width: 60%;
margin: 0 auto 5rem auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.egft_bg h4+.send
{
width: 1240px;
max-width: 60%;
}


.egft_bg h4+ul li
{
width: 30%;
text-align: center;
position: relative;
}

.egft_bg h4+.send li
{
width: 22%;
}

.egft_bg h4+ul li:after
        {
        content: "";
        position: absolute;
        top: 50%;
        right: -10%;
        width: 15px;
        height: 15px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(45deg);
        margin-top: -5px;
        }

.egft_bg h4+ul li:last-child:after
{
border: 0;
}


.egft_bg h4+ul p
{
font-weight: 600;
font-size: 1.3em;
text-decoration: underline;
}



.egift h3+p
{
text-align: center;
font-size: 1.5em;

}


.egift .item
{
width: 1000px;
max-width: 90%;
margin: 5rem auto 10rem auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.egift .item li
{
width: 30%;
}

.egift .item+p
{
margin-bottom: 15rem;
text-align: center;
}

.egift h3+div
{
padding: 2rem;
margin: 5rem auto 1rem auto;
border-top: 1px solid #e4e4e4;
}

.egift h3+div strong
{
font-size: 1.2em;
display: block;
margin-bottom: 1rem;
}

.egift dl dt
{
cursor: pointer;
border-top: 1px solid #e4e4e4;
padding: 2rem;
font-size: 1.2em;
font-weight: 600;
position: relative;
}

.egift dl dt:before
{
margin-right: 1rem;
content: "Q.";
}

/* 右側の＋マーク（疑似要素で作成） */
.egift dl dt::after {
    content: '＋';
    position: absolute;
    right: 2rem;
    font-weight: normal;
}

/* 開いている時はーマークにする */
.egift dl dt.is-active::after {
    content: '－';
}

.egift dl dd
{
display: none;
margin: 0rem 2rem 3rem 2rem;
padding: 2rem;
font-size: 1.2em;
background: #f2eee9;
}



.egift dl dt.is-active+dd
{
display: flex !important;
align-items: flex-start;
}

.egift dl dt.is-active+dd:before
{
margin-right: 1rem;
content: "A.";
flex-shrink: 0;         /* A.の部分が横に潰れないように固定 */
width: 2rem;
white-space: nowrap;
font-weight: 600;
}



@media screen and (max-width:769px) {

.egift
{
margin-top: 1rem;
padding: 0 0rem;
}

.egift .point li
{
width: 46%;
margin-bottom: 2rem;
}

.egift h2 + p
{
font-size: 0.9em;
}

.egift .link
{
margin-top: 3rem;
}

.egift .card
{
margin-top: 2rem;
}

.egift .card li
{
width: 22%;
margin-top: 1rem;
}


.egift .link li
{
width: 100%;

margin-top: 1rem;
}

.egift .link li a
{
padding: 1rem 0;
font-size: 0.9em;
}

.egft_bg h3, .egift h3
{
font-size: 1.2em;
}

.egft_bg h4 ,.egift h2
{
font-size: 1.5em;
}

.egft_bg h4 + ul li
{
width: 100%;
padding-bottom: 5rem;
margin-bottom: 5rem;
}

.egft_bg h4+.send li
{
width: 100%;
}

.egft_bg h4 + ul li:after
{

left: 45%;
top: 100%;
transform: rotate(135deg);
}

.egft_bg
{
padding-bottom: 0 !important;
}

.egift h3 + p
{
font-size: 0.9em;
}



.egift .item
{
flex-wrap: nowrap;     /* 折り返しを禁止 */
overflow-x: auto;      /* 横方向にスクロール可能にする */
justify-content: flex-start; /* 左寄せにする */
max-width: 100%;       /* 画面端まで使えるように調整 */
padding: 0 5%;         /* 両端に少し余白を作る（お好みで） */
gap: 10px;             /* リスト間の隙間 */
-webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
}

.egift .item li
{
width: 80%;            /* 1枚のカードを画面の8割くらいの幅に見せる */
flex-shrink: 0;        /* 幅が縮まないように固定 */
}

.egift dl dt
{
font-size: 1em;
display: flex;
padding-right: 4rem;
}

.egift dl dt:before
{
margin-right: 1rem;
flex-shrink: 0;         /* A.の部分が横に潰れないように固定 */
width: 2rem;
white-space: nowrap;
font-weight: 600;
}


.egift dl dd
{
font-size: 1em;
}


.taisyoitem a
{
margin-bottom: 15rem;
text-align: center;
padding: 1.5rem 5rem !important;
}

}