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

 WAVEからマンスリーカラコン「piffmeeパフミー」が登場！

-------------------------------------------- */
#puffmee {
	font-family: "Zen Maru Gothic";
	font-weight: 500;
	overflow: hidden;
}
#puffmee * {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	box-sizing: border-box;
}
#puffmee a{
	text-decoration: none;
}
#puffmee img {
	vertical-align: top;
	max-width: 100%;
}

/* トップ
------------------------------------ */
#puffmee .sec_main {
	position: relative;
}
#puffmee .main_back {
	position: absolute;
}
#puffmee .main_visual {
	position: relative;
	padding: 0;
	padding-bottom: 0;
	margin-bottom: 16.6%;
}
#puffmee .main_visual::after {
	content: "";
	position: absolute;
	width: 44%;
	height: 15.5%;
	background: url(/campaign/puffmee/img/main_under_text.png) no-repeat;
	background-size: cover;
	bottom: -13.5%;
	right: 5.5%;
}
#puffmee .main_item {
	position: absolute;
	height: -webkit-fit-content;
	height: fit-content;
	margin: auto;
}
#puffmee .main_catch {
	width: 26%;
	top: 13%;
	right: -3.5%;
}
#puffmee .main_title {
	width: 66%;
	left: 0;
	right: 0;
	bottom: 18%;
}
#puffmee .main_lens {
	width: 54%;
	left: 0;
	right: 0;
	bottom: 0;
}
#puffmee .main_round {
	width: 27%;
	top: 4%;
	left: 5.5%;
}
#puffmee .main_inner {
	margin-top: -13%;
	padding: 25% min(6.3vw, 29px) min(14.1vw, 65px);
}
#puffmee .main_lead {
	position: relative;
}
#puffmee .lead_text {
	padding: 0 10.4% 29% 9.4%;
	position: relative;
}
#puffmee .lead_text::before, #puffmee .lead_text::after {
	content: "";
	position: absolute;
}
#puffmee .lead_text::before {
	width: 21%;
	height: 38%;
	background: url(/campaign/puffmee/img/lead_heart.png) no-repeat;
	background-size: cover;
	top: -6%;
	left: 4%;
}
#puffmee .lead_pkg {
	position: absolute;
	width: 26%;
	height: 55%;
	background: url(/campaign/puffmee/img/lead_pkg.png) no-repeat;
	background-size: cover;
	bottom: 9%;
	right: 3%;
}

/* レンズカラー
------------------------------------ */
#puffmee .sec_lineup {
	position: relative;
}
#puffmee .lineup_title {
	position: absolute;
	width: 62.5%;
	left: 4%;
	margin-top: -6.5%;
}
#puffmee .lineup_area {
	padding: 6.5% 0 8.5%;
}
#puffmee .lineup_area:nth-of-type(odd) .lineup_img {
	padding-right: 7.5%;
}
#puffmee .lineup_area:nth-of-type(even) .lineup_img {
	padding-left: 7.5%;
}
#puffmee .lineup_ttl {
	margin: -5.5% auto 3.6%;
}
#puffmee .lineup_date {
	margin-left: 10.4%;
}
#puffmee .lineup_puff {
	background: url(/campaign/puffmee/img/lineup_01.jpg) no-repeat;
	background-size: cover;
}
#puffmee .lineup_puff .lineup_ttl {
	width: 90%;
}
#puffmee .lineup_puff .lineup_date {
	width: 79.9%;
	margin: 0 auto;
}
#puffmee .lineup_canele {
	background: url(/campaign/puffmee/img/lineup_02.jpg) no-repeat;
	background-size: cover;
}
#puffmee .lineup_canele .lineup_ttl {
	width: 90%;
}
#puffmee .lineup_canele .lineup_date {
	width: 83.3%;
	margin: 0 auto;
}
#puffmee .lineup_maron {
	background: url(/campaign/puffmee/img/lineup_03.jpg) no-repeat;
	background-size: cover;
}
#puffmee .lineup_maron .lineup_ttl {
	width: 90%;
}
#puffmee .lineup_maron .lineup_date {
	width: 80.2%;
	margin: 0 auto;
	padding-bottom: 2.6%;
}
#puffmee .lineup_put {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: min(4.5vw, 21px);
}
#puffmee .lineup_put_item {
	width: 48%;
	text-align: center;
}
#puffmee .lineup_ptu_text {
	font-size: min(3.2vw, 15px);
	margin-top: 4%;
	letter-spacing: 0.1em;
}
#puffmee .lineup_text {
	font-size: min(3.8vw, 17px);
	margin-bottom: min(6.3vw, 29px);
}
#puffmee .lineup_lens {
	margin-bottom: min(11.1vw, 52px);
}

/* FEATURE
------------------------------------ */
#puffmee .sec_lensdate {
	background-color: #fefdf5;
	padding: 12.5% 0;
}
#puffmee .lensdate_inner {
	padding: min(18.8vw, 87px) 6.25% min(12.5vw, 58px);
}
#puffmee .feature_title {
	width: 55.8%;
	margin: 0 auto 11%;
}
#puffmee .feature_item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 500px;
	margin: 0 auto 5.7%;
	padding: 0 8.3%;
}
#puffmee .feature_item_img {
	width: 33%;
	margin-right: 5%;
}
#puffmee .feature_text {
	width: 62%;
}
#puffmee .feature_text_title {
	font-size: min(4.8vw, 22px);
	margin-bottom: 0.1em;
	color: #9e88d6;
}
#puffmee .feature_text_date {
	font-size: min(3.9vw, 18px);
	color: #534e5b;
	white-space: nowrap;
	overflow: visible;
	font-weight: 500;
}
#puffmee .feature_attend {
	text-align: center;
	margin-bottom: 11.9%;
	font-size: min(3.2vw, 15px);
}
#puffmee .spec_area {
	padding: 0 6.3%;
}

/* SPEC
------------------------------------ */
#puffmee .spec_title {
	width: 47.6%;
	margin: 0 auto min(8.6vw, 40px);
}

#puffmee .lineup_more_btn {
	padding: min(13.8vw, 64px) 6.25%;
	background-color: #fff;
}

#puffmee .c_table {
	width: 100%;
}
#puffmee .c_tr {
	border-bottom: 1px solid #fff;
}
#puffmee .c_table tr:last-child {
	border: none;
}
#puffmee .c_th {
	font-size: min(2.7vw, 13px);
	font-weight: 400;
	width: 40%;
	padding: min(4.2vw, 19px);
	text-align: left;
	vertical-align: middle;
	background-color: #a890d3;
	color: #fff;
}
#puffmee .c_td {
	font-size: min(2.7vw, 13px);
	padding: min(4vw, 18px);
	vertical-align: middle;
	background-color: #f4f0f1;
	color: #9e88d6;
}

/* campaign
-------------------------------- */
#puffmee .sec_campaign {
	color: #fff;
	background: url(/campaign/puffmee/img/campaign_back.jpg) no-repeat;
	background-size: cover;
	padding: 8.8% 6.8% 8.2%;
	text-align: center;
}
#puffmee .campaign_ttl {
	margin-bottom: 6.7073170732%;
}
#puffmee .campaign_item {
	margin-bottom: 6.3%;
}
#puffmee .campaign_item:last-of-type {
	margin-bottom: 0;
}
#puffmee .campaign_item:last-of-type .campaign_img {
	margin-bottom: 0;
}
#puffmee .campaign_pop {
	width: 61.9%;
	margin: 0 auto 2.5%;
}
#puffmee .campaign_img {
	box-shadow: 7px 7px #927dca;
	margin-bottom: 3.7%;
}
#puffmee .coupon_howto_btn {
	display: block;
	color: #fff;
	font-size: min(3.3vw, 15px);
	margin-bottom: 1%;
}
#puffmee .coupon_howto_btn::after {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-left: 5px;
	background-image: url(/campaign/puffmee/img/icon_question.png);
	background-size: contain;
	content: "";
	vertical-align: sub;
}
#puffmee .campaign_attend_text {
	font-size: min(2.7vw, 13px);
	white-space: nowrap;
	overflow: visible;
}
#puffmee .campaign_coupon{
	margin: 0 0 5.12%;
	padding: 0;
}
#puffmee .campaign_coupon_item{
	margin: 3.29% 0 0;
	padding: 0;
	display: block;
}
#puffmee .campaign_coupon_item:first-of-type{
	margin-top: 0;
}
#puffmee .campaign_coupon_btn{
	margin: 0;
	padding: 0;
	border: none;
	display: block;
	background-color: #ebffc0;
	width: 100%;
	box-shadow: calc(13 / 960 * var(--contents_width)) calc(14 / 960 * var(--contents_width)) 0px 0px rgba(0,0,0,0.2);
}
#puffmee .campaign_coupon_btn_in{
	margin: 0;
	padding: 1.82% 0 5%;
	display: block;
}
#puffmee .campaign_coupon_btn_head{
	margin: 0;
	padding: 0 0 0 15.24%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
#puffmee .campaign_coupon_btn_body{
	margin: 0;
	padding: 0 5%;
	display: block;
}
#puffmee .campaign_coupon_btn_lens{
	margin: 0;
	padding: 0;
	display: block;
	width: 16.21%;
	height: auto;
}
#puffmee .campaign_coupon_btn_name{
	margin: 0;
	padding: 0;
	display: block;
	font-size: calc(44 / 960 * var(--contents_width));
	font-weight: bold;
	text-decoration: none;
	color: #9e88d6;
	line-height: 1.5;
	letter-spacing: 0.04em;
	min-width: 50%;
}
#puffmee .campaign_coupon_btn_code{
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#puffmee .campaign_coupon_btn_code_sub{
	font-family: "Noto Sans JP";
	margin: 0;
	padding: 0;
	display: block;
	line-height: 1;
	font-size: calc(24 / 960 * var(--contents_width));
	letter-spacing: 0.02em;
	font-weight: 500;
	color: #11194c;
}
#puffmee .campaign_coupon_btn_code_main{
	font-family: "Noto Sans JP";
	margin: 0;
	padding: 0;
	display: block;
	line-height: 1;
	font-size: calc(86 / 960 * var(--contents_width));
	letter-spacing: 0.04em;
	font-weight: bold;
	color: #9e88d6;
}
#puffmee .campaign_coupon_btn_code_btn{
	font-family: "Noto Sans JP";
	margin: 0;
	padding: 4.8% 0;
	display: block;
	line-height: 1;
	font-size: calc(24 / 960 * var(--contents_width));
	background-color: #9e88d6;
	letter-spacing: 0.03em;
	font-weight: 500;
	color: #ffffff;
	width: 28%;
	border-radius: calc(10 / 960 * var(--contents_width));
}

/* collection
-------------------------------- */
#puffmee .sec_collect {
	color: #fff;
	background: url(/campaign/puffmee/img/collection_back.jpg) no-repeat;
	background-size: cover;
	padding: 12.5% 8.3% 12.2%;
	text-align: center;
}
#puffmee .collect_ttl {
	width: 76.875%;
	margin: 0 auto 4.4%;
}
#puffmee .collect_ba {
	width: 76.875%;
	margin: 0 auto 6.75%;
}
#puffmee .collect_item_ttl {
	margin: 0 auto 5.625%;
}
#puffmee .collect_img {
	position: relative;
	display: grid;
	grid-template-columns: 47.4% 47.4%;
	place-content: end space-between;
	margin-bottom: 6.4%;
}
#puffmee .collect_img_item {
	box-shadow: 5px 5px #fff;
	border-radius: min(1vw, 5px);
}
#puffmee .collect_img_lens {
	position: absolute;
	right: -9.5%;
	bottom: -50%;
	width: 27.5%;
}
#puffmee .collect_btn {
	margin-bottom: 9.5%;
}
#puffmee .collect_btn a {
	display: block;
	width: 60%;
	background: #fff;
	line-height: 2.8;
	letter-spacing: 0.1em;
	margin: 0 auto;
	font-size: min(3.6vw, 17px);
	border: 1px solid;
	position: relative;
}
#puffmee .collect_btn a:before, #puffmee .collect_btn a::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: #534e5b;
	height: 1px;
	right: 10%;
}
#puffmee .collect_btn a::before {
	width: min(5.9vw, 28px);
}
#puffmee .collect_btn a::after {
	width: min(1.6vw, 7px);
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	-webkit-transform-origin: right;
	        transform-origin: right;
}
#puffmee .collect_puff .collect_item_ttl {
	width: 62.875%;
}
#puffmee .collect_puff .collect_btn a {
	color: #7d91ab;
	box-shadow: min(1vw, 5px) min(1vw, 5px) #c3c9d4;
}
#puffmee .collect_puff .collect_btn a:before, #puffmee .collect_puff .collect_btn a::after {
	background-color: #7d91ab;
}
#puffmee .collect_canele .collect_item_ttl {
	width: 88.625%;
}
#puffmee .collect_canele .collect_btn a {
	color: #b98a88;
	box-shadow: min(1vw, 5px) min(1vw, 5px) #c6c4cd;
}
#puffmee .collect_canele .collect_btn a:before, #puffmee .collect_canele .collect_btn a::after {
	background-color: #b98a88;
}
#puffmee .collect_maron .collect_item_ttl {
	width: 80.375%;
}
#puffmee .collect_maron .collect_btn {
	margin-bottom: 0;
}
#puffmee .collect_maron .collect_btn a {
	color: #b5906d;
	box-shadow: min(1vw, 5px) min(1vw, 5px) #cbc6cf;
}
#puffmee .collect_maron .collect_btn a:before, #puffmee .collect_maron .collect_btn a::after {
	background-color: #b5906d;
}

/* モデル紹介
-------------------------------- */
#puffmee .sec_model {
	margin-top: 0;
	padding-top: 12%;
	color: #fff;
	background: url(/campaign/puffmee/img/model_back.jpg) no-repeat;
	background-size: cover;
}
#puffmee .model_title {
	width: 71.3%;
	margin: 0 auto min(9.4vw, 44px);
}
#puffmee .model_area {
	position: relative;
}
#puffmee .model_img {
	position: relative;
	width: 100%;
	margin-bottom: 0;
}
#puffmee .model_img:before, #puffmee .model_img::after {
	content: "";
	display: block;
	position: absolute;
}
#puffmee .model_img::before {
	width: 22.9%;
	height: 29.2%;
	background: url(/campaign/puffmee/img/model_round.png) no-repeat;
	background-size: cover;
	bottom: auto;
	top: -1%;
	left: 9.5%;
}
#puffmee .model_img::after {
	width: 26%;
	height: 29.2%;
	background: url(/campaign/puffmee/img/model_heart.png) no-repeat;
	background-size: cover;
	bottom: -14%;
	left: auto;
	right: 4.5%;
}
#puffmee .model_prof {
	width: -webkit-fit-content;
	width: fit-content;
	margin: 0 auto;
	padding: 0 13.5% 10.4%;
}
#puffmee .model_prof:before {
	display: none;
}
#puffmee .model_name {
	font-size: min(8.1vw, 38px);
	text-align: left;
	margin-bottom: 0.3em;
	line-height: 1;
	letter-spacing: 0.15em;
}
#puffmee .model_name span {
	display: inline-block;
	font-size: min(9.9vw, 46px);
	margin-right: 0.15em;
}
#puffmee .model_text {
	font-size: min(3.2vw, 15px);
	margin-bottom: 1.8em;
	white-space: nowrap;
	overflow: visible;
	line-height: 1.8;
}
#puffmee .model_prof dd:last-of-type {
	margin-bottom: 0;
}

/* 追従バナー
-------------------------------- */
#puffmee .fixed_bnr {
	box-sizing: border-box;
	width: 87.4%;
	position: fixed;
	bottom: 10px;
	right: 0;
	left: 1.1%;
	margin: 0 auto;
	cursor: pointer;
	transition: 0.3s;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	max-width: 405px;
}
#puffmee .active {
	opacity: 1;
	visibility: visible;
}

/* アニメーション
-------------------------------- */
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.is_animate.fadeIn {
	opacity: 0;
}

.is_animate_on.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;
	}
}
.delay05 {
	-webkit-animation-delay: 0.5s !important;
	        animation-delay: 0.5s !important;
}

/* 共通パーツ
-------------------------------- */
#footer {
	margin-top: 0;
}

#scroll-pagetop {
	bottom: -20%;
}

@media screen and (min-width: 767px) {
	#scroll-pagetop {
		right: 5%;
		bottom: 25px;
	}
}