@charset "UTF-8";
/* =========================================================

組み合わせ自由カラコンまとめ買いキャンペーン開催中！
※デザイン幅960pxを基準に calc(値 / 960 * var(--contents_width)) で指定

========================================================= */
#ring10freepack {
	--c_text: #6f6c6c;
	--c_text_step: #767676;
	--c_purple: #b77ecc;
	--c_pink_purple: #c790c2;
	--c_btn_lensdata: #8a818f;
	--c_btn_review: #a885b5;
	--c_btn_power: #c77ca8;
	--c_bnr_text: #c278a4;
	--c_bnr_shadow: #d4b2d3;
	--c_product_bg: #dcd4ee;
	--c_coupon_bg: #e9dfef;
	max-width: 960px;
	margin: 0 auto;
	color: var(--c_text);
	font-family: "YakuHanJP_Noto", "Roboto", "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: 100%;
		 -moz-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
					text-size-adjust: 100%;
}

#ring10freepack *,
#ring10freepack *::before,
#ring10freepack *::after {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}

#ring10freepack img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

#ring10freepack a {
	color: inherit;
	text-decoration: none;
}


/* メインビジュアル
--------------------------------------- */
#ring10freepack .sec_mv {
	margin: 0;
}

#ring10freepack .sec_mv_img img {
	width: 100%;
}


/* クーポン
--------------------------------------- */
#ring10freepack .sec_coupon {
	padding-bottom: calc(84 / 960 * var(--contents_width));
	background-color: var(--c_coupon_bg);
	background-image: url(/campaign/ring10freepack/img/coupon_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% auto;
					background-size: 100% auto;
}

/* 購入方法 */
#ring10freepack .sec_coupon_step {
	width: calc(840 / 960 * var(--contents_width));
	margin: 0 auto;
	overflow: hidden;
	border-radius: calc(15 / 960 * var(--contents_width));
	background-color: #fff;
}

#ring10freepack .sec_coupon_step_head {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#c5a3dd), to(#c790c2));
	background-image: -webkit-linear-gradient(top, #c5a3dd 0%, #c790c2 100%);
	background-image:      -o-linear-gradient(top, #c5a3dd 0%, #c790c2 100%);
	background-image:         linear-gradient(180deg, #c5a3dd 0%, #c790c2 100%);
	color: #fff;
	font-weight: 700;
	font-size: calc(38 / 960 * var(--contents_width));
	line-height: calc(98 / 960 * var(--contents_width));
	letter-spacing: 0.1em;
	text-align: center;
}

#ring10freepack .sec_coupon_step_body {
	padding: calc(42 / 960 * var(--contents_width)) calc(50 / 960 * var(--contents_width)) calc(56 / 960 * var(--contents_width));
}

#ring10freepack .sec_coupon_step_ttl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
			-ms-flex-align: center;
					align-items: center;
	-webkit-box-pack: center;
			-ms-flex-pack: center;
					justify-content: center;
	color: var(--c_pink_purple);
	font-weight: 700;
	font-size: calc(38 / 960 * var(--contents_width));
	line-height: calc(53 / 960 * var(--contents_width));
	letter-spacing: 0.1em;
}

#ring10freepack .sec_coupon_step_ttl::before,
#ring10freepack .sec_coupon_step_ttl::after {
	display: block;
	-ms-flex-negative: 0;
			flex-shrink: 0;
	width: calc(4 / 960 * var(--contents_width));
	height: calc(37 / 960 * var(--contents_width));
	background-color: currentColor;
	content: "";
}

#ring10freepack .sec_coupon_step_ttl::before {
	margin-right: calc(17 / 960 * var(--contents_width));
	-webkit-transform: rotate(-21deg);
			-ms-transform: rotate(-21deg);
					transform: rotate(-21deg);
}

#ring10freepack .sec_coupon_step_ttl::after {
	margin-left: calc(17 / 960 * var(--contents_width));
	-webkit-transform: rotate(21deg);
			-ms-transform: rotate(21deg);
					transform: rotate(21deg);
}

#ring10freepack .sec_coupon_step_list {
	margin-top: calc(36 / 960 * var(--contents_width));
}

#ring10freepack .sec_coupon_step_item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
			-ms-flex-align: start;
					align-items: flex-start;
}

#ring10freepack .sec_coupon_step_item + .sec_coupon_step_item {
	margin-top: calc(63 / 960 * var(--contents_width));
}

#ring10freepack .sec_coupon_step_item_icon {
	-ms-flex-negative: 0;
			flex-shrink: 0;
	width: calc(180 / 960 * var(--contents_width));
}

#ring10freepack .sec_coupon_step_item_body {
	-webkit-box-flex: 1;
			-ms-flex: 1 1 auto;
					flex: 1 1 auto;
	margin-left: calc(51 / 960 * var(--contents_width));
	padding-top: calc(12 / 960 * var(--contents_width));
}

#ring10freepack .sec_coupon_step_item_num {
	display: inline-block;
	padding: 0 calc(27 / 960 * var(--contents_width));
	border-radius: 100px;
	background-color: #8a8a8a;
	color: #fff;
	font-weight: 400;
	font-size: calc(30 / 960 * var(--contents_width));
	line-height: 1.6;
	letter-spacing: 0.06em;
}

#ring10freepack .sec_coupon_step_item_num span{
	vertical-align: text-top;
}

#ring10freepack .sec_coupon_step_item_txt {
	margin-top: calc(16 / 960 * var(--contents_width));
	color: var(--c_text_step);
	font-weight: 500;
	font-size: calc(30 / 960 * var(--contents_width));
	line-height: calc(54 / 960 * var(--contents_width));
	letter-spacing: 0.05em;
}

/* クーポン見出し */
#ring10freepack .sec_coupon_ttl {
	width: calc(840 / 960 * var(--contents_width));
	margin: calc(61 / 960 * var(--contents_width)) auto 0;
}

#ring10freepack .sec_coupon_ttl img {
	width: 100%;
}

/* クーポンカード */
#ring10freepack .sec_coupon_list {
	margin-top: calc(53 / 960 * var(--contents_width));
}

#ring10freepack .sec_coupon_item + .sec_coupon_item {
	margin-top: calc(36 / 960 * var(--contents_width));
}

#ring10freepack .sec_coupon_item_card {
	width: calc(849 / 960 * var(--contents_width));
	margin-left: calc(61 / 960 * var(--contents_width));
	cursor: pointer;
}

#ring10freepack .sec_coupon_item_card img {
	width: 100%;
}


/* 対象商品
--------------------------------------- */
#ring10freepack .sec_product {
	padding: calc(91 / 960 * var(--contents_width)) 0 calc(74 / 960 * var(--contents_width));
	background-color: var(--c_product_bg);
}

#ring10freepack .sec_product_ttl {
	margin-bottom: calc(41 / 960 * var(--contents_width));
	color: var(--c_text);
	font-weight: 700;
	font-size: calc(54 / 960 * var(--contents_width));
	line-height: calc(75 / 960 * var(--contents_width));
	letter-spacing: 0.1em;
	text-align: center;
}

/* サイズ別見出し */
#ring10freepack .sec_product_size + .sec_product_size {
	margin-top: calc(52 / 960 * var(--contents_width));
}

#ring10freepack .sec_product_size_ttl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
			-ms-flex-align: center;
					align-items: center;
	-webkit-box-pack: center;
			-ms-flex-pack: center;
					justify-content: center;
	width: calc(860 / 960 * var(--contents_width));
	min-height: calc(63 / 960 * var(--contents_width));
	margin: 0 auto calc(43 / 960 * var(--contents_width));
	padding: 0 calc(20 / 960 * var(--contents_width));
	border-radius: calc(32 / 960 * var(--contents_width));
	background-color: #fff;
	color: var(--c_purple);
	line-height: 1.2;
	letter-spacing: 0.055em;
	text-align: center;
}

#ring10freepack .sec_product_size_ttl_main {
	font-weight: 700;
	font-size: calc(35 / 960 * var(--contents_width));
}

#ring10freepack .sec_product_size_ttl_sub {
	font-weight: 500;
	font-size: calc(34 / 960 * var(--contents_width));
}

/* 商品リスト */
#ring10freepack .sec_product_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	-webkit-box-align: stretch;
			-ms-flex-align: stretch;
					align-items: stretch;
	width: calc(892 / 960 * var(--contents_width));
	margin: 0 auto;
}

#ring10freepack .sec_product_item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
			-ms-flex-direction: column;
					flex-direction: column;
	width: 50%;
	margin-bottom: calc(76 / 960 * var(--contents_width));
}

#ring10freepack .sec_product_item_img {
	position: relative;
}

#ring10freepack .sec_product_item_img img {
	width: 100%;
}

/* NEWアイコン（パフミーワンデーのみ） */
#ring10freepack .sec_product_item_new {
	position: absolute;
	right: calc(7 / 960 * var(--contents_width));
	bottom: calc(-23 / 960 * var(--contents_width));
	width: calc(86 / 960 * var(--contents_width));
}

#ring10freepack .sec_product_item_dia {
	-ms-flex-item-align: center;
			align-self: center;
	margin-top: calc(25 / 960 * var(--contents_width));
	padding: 0 calc(30 / 960 * var(--contents_width));
	border-radius: calc(24 / 960 * var(--contents_width));
	background-color: #fff;
	color: var(--c_purple);
	font-weight: 500;
	font-size: calc(27 / 960 * var(--contents_width));
	line-height: calc(48 / 960 * var(--contents_width));
	letter-spacing: 0.024em;
	white-space: nowrap;
}

#ring10freepack .sec_product_item_name {
	-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
					flex: 1 0 auto;
	width: 87.8924%;
	margin: calc(20 / 960 * var(--contents_width)) auto calc(18 / 960 * var(--contents_width));
	color: var(--c_text);
	font-weight: 700;
	font-size: calc(26 / 960 * var(--contents_width));
	line-height: calc(38 / 960 * var(--contents_width));
	letter-spacing: 0.035em;
}

/* 商品ボタン */
#ring10freepack .sec_product_item_btnlist {
	width: 87.8924%;
	margin: 0 auto;
	display:grid;
	gap: calc(10 / 960 * var(--contents_width));
}

#ring10freepack .sec_product_item_btnlist_item {
	margin: 0;
}

#ring10freepack .sec_product_btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
			-ms-flex-align: center;
					align-items: center;
	-webkit-box-pack: center;
			-ms-flex-pack: center;
					justify-content: center;
	width: 100%;
	padding: 0.2em calc(10 / 960 * var(--contents_width));
	border: 0;
	border-radius: calc(8 / 960 * var(--contents_width));
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
		 -moz-appearance: none;
					appearance: none;
}

#ring10freepack .sec_product_btn_lensdata {
	min-height: calc(76 / 960 * var(--contents_width));
	background-color: var(--c_btn_lensdata);
	font-size: calc(27 / 960 * var(--contents_width));
	letter-spacing: 0.12em;
}

#ring10freepack .sec_product_btn_review {
	min-height: calc(76 / 960 * var(--contents_width));
	background-color: var(--c_btn_review);
	font-size: calc(29 / 960 * var(--contents_width));
	letter-spacing: 0.06em;
}

#ring10freepack .sec_product_btn_power {
	min-height: calc(102 / 960 * var(--contents_width));
	background-color: var(--c_btn_power);
	font-size: calc(29 / 960 * var(--contents_width));
	letter-spacing: 0.06em;
}

/* 30枚入り訴求 */
#ring10freepack .sec_product_item_bnr {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
			-ms-flex-align: center;
					align-items: center;
	-webkit-box-pack: center;
			-ms-flex-pack: center;
					justify-content: center;
	width: 87.8924%;
	min-height: calc(102 / 960 * var(--contents_width));
	margin: calc(10 / 960 * var(--contents_width)) auto 0;
	padding: calc(10 / 960 * var(--contents_width));
	border: calc(4 / 960 * var(--contents_width)) solid var(--c_btn_power);
	border-radius: calc(8 / 960 * var(--contents_width));
	background-color: #fff;
	-webkit-box-shadow: calc(6 / 960 * var(--contents_width)) calc(6 / 960 * var(--contents_width)) 0 var(--c_bnr_shadow);
					box-shadow: calc(6 / 960 * var(--contents_width)) calc(6 / 960 * var(--contents_width)) 0 var(--c_bnr_shadow);
	color: var(--c_bnr_text);
	font-weight: 700;
	font-size: calc(27 / 960 * var(--contents_width));
	line-height: calc(35 / 960 * var(--contents_width));
	letter-spacing: 0.064em;
	text-align: center;
}

#ring10freepack .sec_product_item_note {
	width: 87.8924%;
	margin: calc(18 / 960 * var(--contents_width)) auto 0;
	color: var(--c_text);
	font-weight: 700;
	font-size: calc(22 / 960 * var(--contents_width));
	line-height: calc(30 / 960 * var(--contents_width));
	letter-spacing: 0.1em;
}


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

モーダル
※Magnific Popupでbody直下に移動するため #ring10freepack の外に定義

========================================================= */
/* レンズスペック
--------------------------------------- */
.modal_spec {
	width: 90%;
	max-width: 464px;
	padding: 0;
	background-color: #fef4f5;
}

.modal_spec * {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
	font-family: "YakuHanJP_Noto", "Roboto", "Noto Sans JP", sans-serif;
}

.modal_spec_title {
	padding: 5% 5% 0%;
	font-weight: 700;
	font-size: calc(36 / 960 * var(--contents_width));
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-align: center;
}

.modal_spec_table_wrap {
	padding: 4%;
}

.modal_spec_table {
	width: 100%;
}

.modal_spec_table tr th,
.modal_spec_table tr td {
	padding: 5px 10px;
	border: 1px solid #cccccc;
	font-size: calc(24 / 960 * var(--contents_width));
	line-height: 1.6;
	vertical-align: middle;
}

.modal_spec_table tr th {
	background-color: #eeeeee;
	font-weight: 600;
}

.modal_spec_table tr td {
	background-color: #ffffff;
}

/* シリーズ別 配色 */
.modal_spec_ring {
	background-color: #fdf0f3;
}

.modal_spec_ring .modal_spec_title {
	color: #c06e85;
}

.modal_spec_ring .modal_spec_table tr th {
	border-color: #dfb2be;
	background-color: #fcdde5;
}

.modal_spec_ring .modal_spec_table tr td {
	border-color: #dfb2be;
}

.modal_spec_flower {
	background-color: #fff2f6;
}

.modal_spec_flower .modal_spec_title {
	color: #e498b4;
}

.modal_spec_flower .modal_spec_table tr th {
	border-color: #f7c8d9;
	background-color: #ffe3ec;
}

.modal_spec_flower .modal_spec_table tr td {
	border-color: #f7c8d9;
}

.modal_spec_vivid {
	background-color: #eff6ff;
}

.modal_spec_vivid .modal_spec_title {
	color: #6997ca;
}

.modal_spec_vivid .modal_spec_table tr th {
	border-color: #c3ddfa;
	background-color: #e0edff;
}

.modal_spec_vivid .modal_spec_table tr td {
	border-color: #c3ddfa;
}

.modal_spec_puffmee {
	background-color: #f8f2ff;
}

.modal_spec_puffmee .modal_spec_title {
	color: #9a88c5;
}

.modal_spec_puffmee .modal_spec_table tr th {
	border-color: #c2b5e3;
	background-color: #e4d7e9;
}

.modal_spec_puffmee .modal_spec_table tr td {
	border-color: #c2b5e3;
}


/* レビュー
--------------------------------------- */
.modal_review {
	width: calc(842 / 960 * var(--contents_width));
	max-width: 842px;
	margin: 0 auto;
	padding: 0;
}

.modal_review * {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
	font-family: "YakuHanJP_Noto", "Roboto", "Noto Sans JP", sans-serif;
}

.modal_review_slider {
	position: relative;
}

.modal_review_slide {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
			-ms-flex-direction: column;
					flex-direction: column;
	height: auto;
	background-color: #fff;
}

.modal_review_label {
	/* .modal_review_slide が縦flexのため、伸びないよう align-self で左寄せする */
	-ms-flex-item-align: start;
			align-self: flex-start;
	width: calc(242 / 960 * var(--contents_width));
	padding: 0 calc(28 / 960 * var(--contents_width));
	white-space: nowrap;
	color: #fff;
	font-weight: 700;
	font-size: calc(30 / 960 * var(--contents_width));
	line-height: calc(74 / 960 * var(--contents_width));
	letter-spacing: 0.05em;
}

.modal_review_label_staff {
	background-color: #b099d0;
}

.modal_review_label_customer {
	background-color: #d995b5;
}

/* flex:1 は1枚目・2枚目で白パネルの高さを揃えるための指定 */
.modal_review_body {
	-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
					flex: 1 0 auto;
	padding: calc(41 / 960 * var(--contents_width)) calc(51 / 960 * var(--contents_width)) calc(71 / 960 * var(--contents_width));
}

.modal_review_img img {
	width: 100%;
}

.modal_review_txt {
	color: #6f6c6c;
	font-weight: 500;
	font-size: calc(30 / 960 * var(--contents_width));
	line-height: calc(52 / 960 * var(--contents_width));
	letter-spacing: 0.05em;
}

.modal_review_img + .modal_review_txt {
	margin-top: calc(36 / 960 * var(--contents_width));
}

.modal_review_star {
	color: #edba0a;
	font-size: calc(30 / 960 * var(--contents_width));
	line-height: 1;
	letter-spacing: 0.07em;
}

.modal_review_star + .modal_review_txt {
	margin-top: calc(12 / 960 * var(--contents_width));
}

.modal_review_list_item + .modal_review_list_item {
	margin-top: calc(38 / 960 * var(--contents_width));
	padding-top: calc(40 / 960 * var(--contents_width));
	border-top: calc(2 / 960 * var(--contents_width)) dashed #d7d7d7;
}

/* 前へ／次へボタン */
.modal_review_prev,
.modal_review_next {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: calc(86 / 960 * var(--contents_width));
	height: calc(86 / 960 * var(--contents_width));
	border-radius: calc(14 / 960 * var(--contents_width));
	background-color: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
					transform: translateY(-50%);
}

.modal_review_prev {
	left: calc(15 / 960 * var(--contents_width));
}

.modal_review_next {
	right: calc(15 / 960 * var(--contents_width));
}

.modal_review_prev::before,
.modal_review_next::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(22 / 960 * var(--contents_width));
	height: calc(22 / 960 * var(--contents_width));
	border-top: calc(5 / 960 * var(--contents_width)) solid #fff;
	border-right: calc(5 / 960 * var(--contents_width)) solid #fff;
	content: "";
}

.modal_review_prev::before {
	-webkit-transform: translate(-35%, -50%) rotate(-135deg);
			-ms-transform: translate(-35%, -50%) rotate(-135deg);
					transform: translate(-35%, -50%) rotate(-135deg);
}

.modal_review_next::before {
	-webkit-transform: translate(-65%, -50%) rotate(45deg);
			-ms-transform: translate(-65%, -50%) rotate(45deg);
					transform: translate(-65%, -50%) rotate(45deg);
}

/* 先頭／末尾のスライドでは非表示 */
.modal_review_prev.is_disabled,
.modal_review_next.is_disabled {
	display: none;
}

/* ページャー */
.modal_review_pager {
	margin-top: calc(33 / 960 * var(--contents_width));
	font-size: 0;
	line-height: 1;
	text-align: center;
}

.modal_review_pager_bullet {
	display: inline-block;
	width: calc(28 / 960 * var(--contents_width));
	height: calc(28 / 960 * var(--contents_width));
	margin: 0 calc(16 / 960 * var(--contents_width));
	border: calc(3 / 960 * var(--contents_width)) solid #fff;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
}

.modal_review_pager_bullet.is_active {
	background-color: #fff;
}

/* スライドが1枚のみの場合 */
.modal_review_single .modal_review_prev,
.modal_review_single .modal_review_next,
.modal_review_single .modal_review_pager {
	display: none;
}