@charset "UTF-8";

/* 可愛い大人は、特別だ。待望のRINGの新色「FlowerCollection」登場 */

#ring-flowercollection {
	-webkit-text-size-adjust: 100%;
	margin: 0 auto;
	max-width: 960px;
	font-family: "Noto Sans JP", "YakuHanJPs_Noto", "Roboto", sans-serif;
	background-color: #f9f8f3;
	color: #453228;
	line-height: 1.6;
}

#ring-flowercollection * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	font-family: "Noto Sans JP", "YakuHanJPs_Noto", "Roboto", sans-serif;
	font-style: normal;
}
#ring-flowercollection a {
	text-decoration: none;
}
#ring-flowercollection .sec_main {
	background: #fbe0dc url(/campaign/ring-flowercollection/img/flower_main_background.jpg);
	background-size: cover;
}
#ring-flowercollection .main_title {
	width: 63.5%;
}

#ring-flowercollection .main_visual {
	position: relative;
	padding-bottom: 10%;
}
#ring-flowercollection .main_title {
	margin: 0 auto;
}
#ring-flowercollection .main_base {
	margin-bottom: 7.6%;
}
#ring-flowercollection .main_inner {
	margin-top: -13%;
	padding: 25% min(6.3vw, 29px) min(14.1vw, 65px);
}

/* レンズカラー
------------------------------------ */
#ring-flowercollection .products_inner {
	padding: min(9.2vw, 43px) 6.25% min(20.2vw, 94px);
}
#ring-flowercollection .products_title {
	margin: 0 auto min(8.9vw, 41px);
}
#ring-flowercollection .products_put {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: min(4.5vw, 21px);
}
#ring-flowercollection .products_put_item {
	width: 48%;
	text-align: center;
}
#ring-flowercollection .products_ptu_text {
	font-size: min(3.2vw, 15px);
	margin-top: 4%;
	letter-spacing: 0.1em;
	color: #453228;
}
#ring-flowercollection .products_text {
	font-size: min(3.8vw, 17px);
	margin-bottom: min(6.3vw, 29px);
}
#ring-flowercollection .products_lens {
	margin-bottom: min(11.1vw, 52px);
}
#ring-flowercollection .products_cart_btn a{
	display: block;
	color: #fff;
	text-align: center;
	font-size: min(3.8vw, 17px);
	padding: 6% 0;
	margin-bottom: 4%;
	border-radius: min(1.8vw, 7px);
	position: relative;
	letter-spacing: 0.08em;
}
#ring-flowercollection .products_cart_btn:last-of-type a{
	margin-bottom:0;
}
#ring-flowercollection .products_cart_btn a::before,
#ring-flowercollection .products_cart_btn a::after{
	content: "";
	width: 0.8em;
	height: 1.8px;
	background-color: #fff;
	border-radius: 2px;
	position: absolute;
	right: 8%;
	top: 0;
	bottom: 0;
	margin: auto;
	transform-origin: right center;
}
#ring-flowercollection .products_cart_btn a::before{transform: rotate(45deg);}
#ring-flowercollection .products_cart_btn a::after{
    transform: rotate(-45deg) translate(0px,-0.5px);
}

/* カラー分け */
#ring-flowercollection .poppy_area {
	color: #df904a;
	background: linear-gradient(#fcf7f5 90%, #fff 100%);
}
#ring-flowercollection .poppy_area .products_cart_btn a {
	background-color: #cb8e50;
}
#ring-flowercollection .mimosa_area {
	color: #b69e38;
	background: linear-gradient(#f7f6f1 90%, #fff 100%);
}
#ring-flowercollection .mimosa_area .products_cart_btn a {
	background-color: #ae9d42;
}
#ring-flowercollection .lily_area {
	color: #e5997c;
	background: linear-gradient(#ffece5 90%, #fff 100%);
}
#ring-flowercollection .lily_area .products_cart_btn a {
	background-color: #e5997c;
}

/* モーダル内 */
.mfp-content{
	font-family: "Noto Sans JP", "YakuHanJPs_Noto", "Roboto", sans-serif;
}
#modal_mimosa_put,
#modal_mimosa_lens,
#modal_poppy_put,
#modal_poppy_lens,
#modal_lily_put,
#modal_lily_lens {
	background: #fff;
}

/* .mfp-inline-holder + button.mfp-close::before, .mfp-inline-holder + button.mfp-close::after, .mfp-inline-holder button.mfp-close::before, .mfp-inline-holder button.mfp-close::after {
	background-color: #e3769f;
} */

button.mfp-close::before, button.mfp-close::after {
	height: 2px;
	border-radius: 10px;
}

.mfp-popup-block {
	background: none;
}

.zoom_btn {
	position: relative;
	display: block;
}

.zoom_btn::after {
	content: "";
	position: absolute;
	right: max(-2.2vw, -10px);
	bottom: min(1.3vw, 6px);
	display: block;
	width: calc(59 / 960* var(--contents_width));
    height: calc(78 / 960* var(--contents_width));
	padding: 3px;
	background: url(/campaign/ring-flowercollection/img/modal_zoom.png) no-repeat;
	background-size: contain;
}

.put_modal_item {
	margin: 0 auto;
}

.modal_item {
	max-width: 464px;
	padding: 10% 15px;
}

.put_modal_img {
	text-align: center;
}

.put_modal_text {
	font-size: min(3.75vw, 18px);
	line-height: 2;
	margin-bottom: 10%;
	text-align: center;
}

.put_modal_text:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 767px) {
	.mfp-popup-block {
		max-width: 600px;
	}
}
/* FEATURE
------------------------------------ */
#ring-flowercollection .sec_lensdate {
	background-color: #f7eaed;
}
#ring-flowercollection .lensdate_inner {
	padding: min(18.8vw, 87px) 6.25% min(12.5vw, 58px);
}
#ring-flowercollection .feature_title {
	width: 38.7%;
	margin: 0 auto 9.1%;
}
#ring-flowercollection .feature_whiteback {
	margin-bottom: 17.7%;
	padding: 7.5% 10.25% 10.25%;
	background-color: #fff;
}
#ring-flowercollection .feature_item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 356px;
	margin: 0 auto min(11vw, 51px);
}
#ring-flowercollection .feature_whiteback dl:last-child {
	margin-bottom: 0;
}
#ring-flowercollection .feature_item_img {
	width: 29.7%;
	margin-right: 10.28%;
}
#ring-flowercollection .feature_text {
	width: 61.1%;
}
#ring-flowercollection .feature_text_title {
	font-size: min(4.4vw, 20px);
	font-weight: 500;
	margin-bottom: min(3.6vw, 17px);
	color: #e3769f;
}
#ring-flowercollection .feature_text_date {
	font-size: min(3.3vw, 15px);
}

/* SPEC
------------------------------------ */

#ring-flowercollection .spec_area{
	margin-bottom: 17.7%;
}

#ring-flowercollection .spec_title {
	width: 47.6%;
	margin: 0 auto min(8.6vw, 40px);
}

#ring-flowercollection .products_more_btn {
	padding: min(13.8vw, 64px) 6.25%;
	background-color: #fff;
}
#ring-flowercollection .c_table {
	width: 100%;
}

#ring-flowercollection .c_tr {
	border-bottom: 1px solid #fff;
}

#ring-flowercollection .c_table tr:last-child {
	border: none;
}

#ring-flowercollection .c_th {
	font-size: min(2.7vw, 13px);
	font-weight: 400;
	width: 42%;
	padding: min(4.2vw, 19px);
	text-align: left;
	vertical-align: middle;
	background-color: #edd1db;
}

#ring-flowercollection .c_td {
	font-size: min(2.7vw, 13px);
	padding: min(4vw, 18px);
	vertical-align: middle;
	background-color: #fcf6f7;
}

/* COLOR CHART
--------------------------------------- */
#ring-flowercollection .chart_title{
	width: 65%;
	margin: 0 auto min(8.6vw, 40px);
}

/* アニメーション
--------------------------------------- */
#ring-flowercollection .fadeIn {
	-webkit-animation-name: fadeInAnime;
	        animation-name: fadeInAnime;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
#ring-flowercollection .fadeInTrigger,
#ring-flowercollection .fadeUpTrigger {
	opacity: 0;
}