@charset "UTF-8";

/* =========================================================

BLACK FRIDAY SALE（先行セール / セール共通）

========================================================= */
#bk-sale {
	word-wrap: normal;
	color: #171929;
}

#bk-sale *,
#bk-sale *::before,
#bk-sale *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
}

#bk-sale a {
	text-decoration: none;
}

#bk-sale img {
	display: block;
	width: 100%;
	height: auto;
}

#bk-sale [hidden] {
	display: none !important;
}

/* MV
------------------------------------ */
#bk-sale .mv {
	line-height: 1;
}

/* アプリの案内
------------------------------------ */
#bk-sale .app_bnr {
	width: 91.6667%;
	margin: 5.2083% auto 0 auto;
	padding: 0 0 5.4167% 0;
}

/* 冬のQietoミルミラ購入応援キャンペーン
------------------------------------ */
#bk-sale .coupon {
	padding: 0 0 5.9375% 0;
	background: #add9e5;
}

#bk-sale .coupon_list {
	display: flex;
	justify-content: space-between;
	padding: 1.5625% 4.7917% 0 4.7917%;
	list-style: none;
}

#bk-sale .coupon_item {
	width: 48.9631%;
}

#bk-sale .coupon_btn {
	display: block;
	width: 100%;
	margin: 6.8235% 0 0 0;
	padding: 7.5% 0;
	border: .1875rem solid #43659d;
	border-radius: 100vh;
	background: #43659d;
	color: #fff;
	font-size: min(2.9167vw, 14px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	cursor: pointer;
}

#bk-sale .coupon_btn-save {
	margin: 3.7647% 0 0 0;
	background: #fff;
	color: #43659d;
}

#bk-sale .coupon_note {
	margin: 4.375% 0 0 0;
	font-size: min(2.7083vw, 13px);
	line-height: 1.45;
	text-align: center;
}

/* カウントダウン
------------------------------------ */
#bk-sale .countdown {
	padding: 6.9792% 0 6.1458% 0;
	background: #fff;
}

#bk-sale .countdown_ttl {
	font-size: min(4.1667vw, 20px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-align: center;
}

#bk-sale .countdown_ttl_text {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

#bk-sale .countdown_ttl_text::before,
#bk-sale .countdown_ttl_text::after {
	content: "";
	width: .625em;
	height: 1.15em;
	background: url(/special/bk-sale/img/countdown_slash_l.png) no-repeat center / contain;
}

#bk-sale .countdown_ttl_text::after {
	background-image: url(/special/bk-sale/img/countdown_slash_r.png);
}

#bk-sale .countdown_box {
	display: flex;
	justify-content: center;
	width: 75.9375%;
	margin: 2.7083% auto 0 auto;
	padding: 3% 0 2.6% 0;
	border: 2px solid #171929;
	border-radius: .625rem;
	list-style: none;
}

#bk-sale .countdown_unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 22.5%;
}

#bk-sale .countdown_unit + .countdown_unit::before {
	content: ":";
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -6%);
	font-family: "Roboto", sans-serif;
	font-size: min(9.375vw, 45px);
	line-height: 1;
}

#bk-sale .countdown_num {
	font-family: "Roboto", sans-serif;
	font-size: min(10.8333vw, 52px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
}

#bk-sale .countdown_label {
	margin: 6% 0 0 0;
	font-family: "Roboto", sans-serif;
	font-size: min(2.5vw, 12px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .04em;
}

#bk-sale .countdown_end {
	margin: 4% 0 0 0;
	font-size: min(3.3333vw, 16px);
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

/* 対象商品
------------------------------------ */
#bk-sale .item {
	background: #ededee;
}

#bk-sale .item_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 3.5417% 2.0833% 7% 2.0833%;
}

#bk-sale .item_card {
	width: 48.1522%;
	margin: 4.3478% 0 0 0;
}

#bk-sale .item_link {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	height: 100%;
	padding: 15% 6.7720% 6.7720% 6.7720%;
	border-radius: min(3.125vw, 15px);
	background: #fff;
	box-shadow: min(.625vw, 3px) min(.625vw, 3px) 0 #d5e0db;
	color: #171929;
}

#bk-sale .item_tag {
	position: absolute;
	top: 4.2889%;
	left: 6.5463%;
	padding: 1.6% 2.9%;
	background: #f00;
	color: #fff;
	font-size: min(1.875vw, 9px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
}

#bk-sale .item_off {
	position: absolute;
	top: 1.1287%;
	right: 1.8059%;
	width: 23.7020%;
}

#bk-sale .item_name {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72%;
	min-height: 2.5em;
	font-size: min(2.3958vw, 11.5px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .04em;
	text-align: center;
}

#bk-sale .item_img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70%;
	/* height: min(15.625vw, 75px); */
	margin: 3% 0 0 0;
}

#bk-sale .item_img img {
	width: auto;
	max-width: 100%;
	height: auto;
}

#bk-sale .item_price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .6em;
	margin: auto 0 0 0;
	padding: 4% 0 0 0;
	font-size: min(2.2917vw, 11px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

#bk-sale .item_price_num {
	color: #ff6600;
	font-size: min(3.75vw, 18px);
	font-weight: 900;
	letter-spacing: .02em;
}

#bk-sale .item_btn {
	display: block;
	position: relative;
	width: 100%;
	margin: 5.4% 0 0 0;
	padding: 6.5% 0;
    border-radius: 1vh;
	background: #000;
	color: #fff;
	font-size: min(2.3958vw, 11.5px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .1em;
	text-align: center;
}

#bk-sale .item_btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 11%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: .4em 0 .4em .65em;
	border-color: transparent transparent transparent #fff;
}

/* その他キャンペーン / Qieto紹介
------------------------------------ */
#bk-sale .campaign {
	padding: 0 0 10.4167% 0;
	background: #fff;
}

#bk-sale .catch_ttl {
	margin: 6.4583% 0 0 0;
	font-size: min(4.1667vw, 20px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-align: center;
}

#bk-sale .campaign_bnr + .catch_ttl {
	margin: 6.0417% 0 0 0;
}

#bk-sale .catch_ttl_text {
	display: inline-flex;
	align-items: center;
	gap: .85em;
}

#bk-sale .catch_ttl_text::before,
#bk-sale .catch_ttl_text::after {
	content: "";
	width: 1.3em;
	height: 1.375em;
	background: url(/special/bk-sale/img/slash_l.png) no-repeat center / contain;
}

#bk-sale .catch_ttl_text::after {
	background-image: url(/special/bk-sale/img/slash_r.png);
}

#bk-sale .campaign_bnr {
	width: 91.6667%;
	margin: 3.4375% auto 0 auto;
}

/* 商品モーダル（remodal は body 直下へ移動するので #bk-sale の外でスコープする）
------------------------------------ */
.bk_sale_modal.remodal {
	max-width: min(100%, 400px);
	padding: 2% 2% 3% 2%;
	background: rgba(23, 25, 41, .95);
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
}

.bk_sale_modal .modal_close {
	position: absolute;
	top: 1.5%;
	right: 4%;
	color: #fff;
	font-size: min(8.5333vw, 32px);
	line-height: 1;
	text-decoration: none;
}

.bk_sale_modal .modal_img {
	position: relative;
	width: 50%;
	margin: 6% auto 0 auto;
}

.bk_sale_modal .modal_img img {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

.bk_sale_modal .modal_badge {
	position: absolute;
	top: 0;
	left: -18%;
	width: 40%;
}

.bk_sale_modal .modal_badge img {
	width: 100%;
}

.bk_sale_modal .modal_ttl {
	margin: 3% 0 0 0;
	font-size: min(4.8vw, 20px);
	font-weight: 700;
	line-height: 1.5;
}

.bk_sale_modal .js_set_panel {
	display: none;
}

.bk_sale_modal .js_set_panel.is_active {
	display: block;
}

.bk_sale_modal .modal_price {
	margin: 3% 0 0 0;
	font-weight: 700;
	line-height: 1.2;
}

.bk_sale_modal .modal_price_main {
	font-size: min(7.2vw, 32px);
	letter-spacing: .04em;
}

.bk_sale_modal .modal_price_divide {
	margin: 0 0 0 .3em;
	font-size: min(3.7333vw, 16px);
	font-weight: 400;
}

.bk_sale_modal .modal_price_gold {
	color: #e4b84b;
	font-weight: 700;
}

.bk_sale_modal .modal_price_sub {
	margin: 2% 0 0 0;
	font-size: min(4.2667vw, 18px);
}

.bk_sale_modal .modal_form_area {
	margin: 5% 0 0 0;
	padding: 6% 0 2% 0;
	background: #fff;
	color: #171929;
}

.bk_sale_modal .set_select {
	position: relative;
	width: 80%;
	margin: 0 auto;
}

.bk_sale_modal .set_select_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 4% 5%;
	border: none;
	border-radius: .3em;
	background: #000;
	color: #fff;
	font-size: min(3.7333vw, 15px);
	line-height: 1;
	cursor: pointer;
}

.bk_sale_modal .set_select_btn::after {
	content: "";
	border-style: solid;
	border-width: .35em .3em 0 .3em;
	border-color: #fff transparent transparent transparent;
}

.bk_sale_modal .set_select_list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	border: .0625rem solid #ccc;
	border-radius: .3em;
	background: #fff;
	list-style: none;
	text-align: left;
}

.bk_sale_modal .set_select.is_open .set_select_list {
	display: block;
}

.bk_sale_modal .set_select_item {
	padding: 3% 5%;
	color: #171929;
	font-size: min(3.7333vw, 15px);
	cursor: pointer;
}

.bk_sale_modal .set_select_item:hover {
	background: #f0f0f0;
}

.bk_sale_modal .set_select_item.is_active {
	background: #e4b84b;
	color: #000;
}

/* goodsPulldown の出力（クラス名はヘルパー側のもの） */
.bk_sale_modal .goods_inner_wrap {
	display: flex;
	justify-content: space-between;
	margin: 4% auto 0 auto;
}

.bk_sale_modal .goods_inner {
	width: 95%;
	margin: 0 auto;
}

.bk_sale_modal .goods_flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

.bk_sale_modal .goods_data_title_blank {
	display: none;
}

.bk_sale_modal .goods_data_title {
	width: 50%;
	padding: 2% 0 4% 0;
	border-bottom: .0625rem solid #d5d5d5;
	background: none;
	color: #000;
	font-size: min(4.2667vw, 16px);
	font-weight: 500;
}

.bk_sale_modal .goods_flex .th {
	width: 100%;
	padding: 2% 0;
	font-size: min(4.2667vw, 16px);
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
}

.bk_sale_modal .goods_flex .td_wrap {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
}

.bk_sale_modal .goods_flex .td {
	width: 43%;
	font-size: min(4.2667vw, 16px);
	text-align: center;
}

.bk_sale_modal .goods_select_wrap {
	position: relative;
	width: 100%;
	margin: 0 0 4% 0;
	border-radius: .3em;
	background: #f4f4f4;
}

.bk_sale_modal .goods_select_wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8%;
	width: .4em;
	height: .4em;
	transform: translateY(-70%) rotate(45deg);
	border-right: .0625rem solid #000;
	border-bottom: .0625rem solid #000;
	pointer-events: none;
}

.bk_sale_modal .goods_flex select {
	width: 100%;
	height: min(9.3333vw, 35px);
	padding: 0 15% 0 8%;
	color: #222;
	font-size: min(3.7333vw, 14px);
}

.bk_sale_modal .goods_data_value {
	display: block;
	padding: 2% 0;
	font-size: min(3.7333vw, 14px);
	text-align: center;
}

.bk_sale_modal .goods_btn_wrap {
	width: 80%;
	margin: 5% auto;
}

.bk_sale_modal .org-btn {
	display: block;
	width: 100%;
	padding: 1.2em 1em;
	border: none;
	border-radius: 100vh;
	background: #ff6600 !important;
	color: #fff;
	font-size: min(4vw, 16px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-align: center;
	text-indent: 0;
}

@media screen and (min-width:767px) {
	.bk_sale_modal.remodal {
		max-width: min(100%, 500px);
	}
}