@charset "utf-8";

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

	塗るパリジェンヌ　(SP)
	Common Styles

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

/*================================
	Layout
================================*/


body {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	    line-height: 1.8;
	    margin: 0px;
	    padding: 0px;
	    text-align: center;
	    -webkit-text-size-adjust: 100%;
      letter-spacing: 0.02em;
	    width: 100%;
	    font-weight: 400;

}


img {	width: 100%;	height: auto;}
main {overflow: hidden;}


/*================================
	#header
================================*/


#header {
    position: relative;
}
#head_logo {
	max-width: 100px;
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 1;
	    margin: 0;
}



/*================================
#footer
================================*/

#footer .footerTop {
	padding: 12% 8% 13%;

}

#footer .contentLogo {
	max-width: 370px;
	margin: 0 auto 2em;
	color: #F16884;
	font-size: 0.813rem;
	text-align: center;

}
#footer .contentLogo img {
	width: 70%;
margin: 0 auto 1em;
display: block;
}

#footer .footerBtm {
background: #464646;
}
#footer .footerBtm .footerLogo {
      display: none;
}
#footer .footerBtm #pagetop {
	max-width: 76px;
	margin: 0 auto;
	margin-bottom: 1.5em;
	cursor: pointer;
}
#footer .footerBtmInner {
	padding: 6% 5%;
	margin: 0 auto;
}
#footer .footer_right {
    text-align: center;
}
#footer .footerBtm small {
	font-family: 'Lato', sans-serif;
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	color: #fff;
	font-weight: 600;
}
#footer .footerBtm a {
	font-family: 'Lato', sans-serif;
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	color: #fff;
	font-weight: 600;
    margin-right: 20px;
}
#buy_fixed {
	position: fixed;
			width: 110px;
			height: 110px;
			display: none;
			z-index: 9;
			right: 15px!important;
			bottom: 15px!important;
}
#buy_fixed.fixed {
    position: fixed!important;
    display: block!important;
}


/*================================
	class
================================*/

.sp_none {
	display: none;
}
.mincho {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}


/*================================
	#mainImg
================================*/

#mainImg{
	position: relative;
}


div#mainImgInner {
	background-position: top center;
	background-size: cover;
	height: 638vh;
}


/*================================
	#concept
================================*/

#concept {
    padding: 10% 0;
}

#concept .secTitle {
    max-width: 8px;
}
#concept .inner {
	position: relative;
max-width: 1226px;
margin: 0 auto;
}
#concept .inner h2.secTitle {
    position: absolute;
    left: 52%;
}
#concept .sec01 .boxWrap {
	text-align: left;

}
#concept .sec01 .boxWrap .boxImg {
    margin: 0 0 0 10%;
    position: relative;
}
#concept .sec01 .boxWrap .boxImg .bg_img {
	position: relative;
	z-index: -1;
	max-width: 270px;
	margin-left: -15%;
	margin-top: -12%;
}
#concept .sec01 .boxWrap .boxImg .item_img {
    position: absolute;
    z-index: 1;
    left: 65%;
    top: 50%;
    max-width: 350px;
    width: calc(350 / 1266 * 100vw);
}
#concept .sec01 .boxWrap .boxTxt {
	padding: 12% 8% 3%;
	    text-align: center;
}
#concept .sec01 .boxWrap .boxTxt h3 {
  margin-bottom: 1em;
}
#concept .sec01 .boxWrap .boxTxt h3 + p {
	font-size: 0.75rem;
	line-height: 2;
	text-align: center;
}


#concept .sec01 .item_img_Wrap{
	width: 100%;
	position: relative;
	z-index: 1;
	text-align: center;
	}
#concept .sec01 .item_img_Wrap .item_img {
	width: 50%;
	position: relative;
	z-index: 1;
	margin: 0 auto;
}
#concept .slideImg {
	margin: 0 calc(50% - 50vw);
	width: 120vw;
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);

}
#concept .slideImg img {
    white-space: nowrap;
    padding-right: 25px;
    padding-left: 25px;
	    width: auto;
}


#concept .slideImg img:nth-of-type(1)  {
animation: loop 50s -25s linear infinite;
}
#concept .slideImg img:nth-of-type(2)  {
 animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
  }

	#concept .sec02 .boxWrap {
		      padding: 8% 8% 10%;
	}
#concept .sec02 .boxWrap .boxTxt h3 {
		    font-size: 0.813rem;
		    margin-bottom: 0.5em;
				    text-align: center;
		}
		#concept .sec02 .boxWrap .boxTxt h3 span {
		font-size: 0.625rem;
}
		#concept .sec02 .boxWrap .boxTxt h3 + p {
		    	font-size: 0.75rem;
				    text-align: center;
		}
		#concept .sec02 .boxWrap .boxTxt h3 + p span {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 0.1em 0.5em;
    margin-right: 0.5em;
    line-height: 1.5;
}

#concept .sec02 .boxWrap .boxImg {
    width: 70%;
    margin: 0 auto 1em;
}
	#concept .sec02 .boxWrap .boxTxt dl {
    display: flex;
    align-items: center;
		justify-content: center;
		margin-top: 1em;
		line-height: 1;

}
#concept .sec02 .boxWrap .boxTxt dl dt {
font-size:0.625rem;

}
#concept .sec02 .boxWrap .boxTxt dl dd {
    margin-left: 0.6em;
}
#concept .sec02 .boxWrap .boxTxt {
	font-size: 0.75rem;
}
#concept .sec02 .boxWrap .boxTxt dl dd em {
font-size: 0.813rem;
font-weight: bold;
}
#concept .sec02 .boxWrap .boxTxt dl dd span {
font-size: 0.563rem;
display: inline-block;
margin-left: 0.3em;
}


#concept .sec03 .boxWrap {
	max-width: 1006px;
	margin: 0 auto;
	padding: 0 8%;
}
#concept .sec03 .boxWrap .boxImg {
    margin-top: 1em;
}
#concept .sec03 .boxWrap .boxTxt {

}
#concept .sec03 .boxWrap .boxTxt p span {
	display: table;
	background: #fff;
	font-size: 1rem;
	margin: 0.5em;
	padding: 0.2em 0.5em;
	font-weight: bold;
	letter-spacing: 0.05em;
}

/*================================
#point
================================*/
#point {
	position: relative;
	    background: #F16884;
	    padding: 12% 0 5%;
}
#point .secTitle {
    max-width: 8px;
    position: absolute;
    left: 3%;
    top: 3%;
}
#point .inner {
	max-width: 1126px;
	    margin: 0 auto;
	    padding: 0 8%;
}

#point .item_img {
    position: absolute;
    z-index: 1;
    left: 72%;
    top: 3%;
    max-width: 400px;
    width: calc(220 / 1266 * 150vw);
}

#point h2 {
    text-align: center;
    font-size: clamp(1.25rem, 1.013rem + 1.01vw, 1.875rem);
    color: #fff;
    margin-bottom: 2em;
}
#point h2::after {
    content: "";
    display: block;
    width: 2em;
    height: 1px;
    background: #fff;
    margin: 0.8em auto;
}
#point .boxWrap {
}
#point .boxWrap .box {
	position: relative;
	background: #fff;
	border-radius: 20px;
	margin-bottom: 40px;
	padding: 10% 8%;
}
#point .boxWrap .box .no {
	position: absolute;
	left: -2%;
	top: -2%;
	min-width: 30px;
	width: 15%;
}
#point .boxWrap .box h3 {
	display: table;
	    margin-bottom: 1em;
	    width: 100%;
	    line-height: 0;
}
#point .boxWrap .box h3 img {
    width: 75%;
}
#point .boxWrap .box:nth-child(3) h3 img {
    width: 70%;
}

#point .boxWrap .box h3 + p {
	font-size: 0.75rem;
	    font-weight: bold;
	    margin: 0 0 1.5em;
	    text-align: left;
}
#point .box_inner {

}
#point .box_inner .boxImg {
	width: 90%;
	margin: 0 auto 1.5em;
}
#point .box_inner .boxTxt {

}
#point .pointData {
    background: #FBE7E8;

}
#point .pointData h4 {
	position: relative;
    background: #F16884;
    text-align: center;
    padding: 0.5em;
    color: #fff;
    font-size: clamp(0.938rem, 0.819rem + 0.5vw, 1.25rem);
}
#point .pointData h4::before{
	content: '';
	width: 20px;
	height: 20px;
	background: #F16884;
	transform: rotate(45deg);
	position: absolute;
	bottom: -6px;
	left: 50%;
	margin-left: -10px;
}
#point .pointDataIco {
	margin: 1.5em auto 1em;
	    max-width: 100px;
}
#point .pointDataImg {
	margin: 1em 5% 1em;
}
#point .pointDataTxt {
	padding: 0 8% 8%;
	font-size: 0.688rem;
	text-align: left;
}
#point .pointDataTxt h5 {
	text-align: center;
	color: #F16884;
	font-size: 1.25rem;
	margin-bottom: 0.2em;
}
#point .pointDataTxt h5 em {
    display: inline-block;
    position: relative;
    line-height: 1;
    z-index: 1;
}
#point .pointDataTxt h5 em:after {
    content: "";
    width: 102%;
    height: 5px;
    background: #fff;
    display: block;
    transform: rotate(360deg);
    position: absolute;
    bottom: 5px;
    z-index: -1;
}
#point .fukidashi{
	position: relative;
	margin: 0 auto 25px;
	padding: 1em;
	background: #fff;
	text-align: center;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
	border-radius: 50px;
		font-size: 0.75rem;
	font-weight: bold;
	line-height: 1.5;
}
#point .fukidashi::before{
	content: '';
	width: 20px;
	height: 20px;
	background: #fff;
	transform: rotate(45deg);
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -10px;
	box-shadow: 3px 2px 3px rgba(0,0,0,0.1);
}
#point .fukidashi em {
    font-size: clamp(0.875rem, 0.78rem + 0.4vw, 1.125rem);
    color: #F16884;
}

#point .boxWrap .box:nth-child(3) .boxImg{
     margin: 0 auto 0;
}



/*================================
#feature
================================*/

#feature {
	 position: relative;
    background:#FBE7E8;
  padding: 12% 0;
}
#feature .secTitle {
    max-width: 8px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#feature .inner {
	max-width: 1126px;
	margin: 0 auto;
	padding: 0 8%;
}

#feature h2 {
    text-align: center;
    font-size: clamp(1.25rem, 1.013rem + 1.01vw, 1.875rem);
    color: #F16884;
    margin-bottom: 1em;
}
#feature h2::after {
    content: "";
    display: block;
    width: 2em;
    height: 1px;
    background: #F16884;
    margin: 0.8em auto;
}
#feature .feature_head {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
#feature .feature_head .lead {
	font-size: 1rem;
	width: 100%;
	text-align: center;
	margin-bottom: 4.5em;
	font-weight: bold;
}

#feature .feature_head .item_img {
	width: 50%;
	    display: block;
	    position: relative;
	    border-radius: 50%;
}
#feature .feature_head .item_img img {
    width: 50%;
    z-index: 1;
    position: relative;
    margin-left: 35%;
}
#feature .feature_head .circle:after feature {
    z-index: 1;
    position: relative;
}

#feature .feature_head .circle:after {
	content: "";
	display: block;
	position: absolute;
	width: 140%;
	padding-top: 140%;
	border-radius: 50%;
	background-color: #fff;
	bottom: 5%;
	z-index: 0;
}

#feature .feature_head .item_txt {
	width: 50%;
	    position: relative;
}

#feature .feature_head .item_txt h3 {
	background: #F16884;
	    display: table;
	    color: #fff;
	    font-size: 1rem;
	    padding: 0.1em 1em;
	    margin-bottom: 0.6em;
}
#feature .feature_head .item_txt h3 + p {
	      font-size: 0.75rem;

}
#feature .boxWrap {

}
#feature .boxWrap .box {
    border-radius: 10px;
    border: solid 1px #F16884;
    background: #fff;
    padding: 5%;
}
#feature .boxWrap .box h3 {
	display: flex;
	align-items: center;
	font-size: clamp(1.125rem, 0.936rem + 0.81vw, 1.625rem);
	margin-bottom: 0.5em;
}
#feature .boxWrap .box h3 img {
    max-width: 60px;
    margin-right: 0.8em;
}

#feature .boxWrap .box h3 + p {
    font-size: clamp(0.813rem, 0.765rem + 0.2vw, 0.938rem);
}
/*================================
.ingredient
================================*/

.ingredient h3 {
	background: #000;
	    color: #fff;
	    text-align: center;
	    padding: 1em;
	    font-size: clamp(1rem, 0.905rem + 0.4vw, 1.25rem);
	    letter-spacing: 0.1em;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    cursor: pointer;
}
.ingredient .data {
    background: #fff;
font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
}
.ingredient .data .inner {
    max-width: 1006px;
    margin: 0 auto;
  padding: 4% 7% 4%;
        font-weight: bold;
        font-size: 10px;
        background-color: #eaeaea;
}
.ingredient h3:after {
	content: "";
	display: inline-block;
	background: url(/mg/wp-content/themes/parisienne_191003/mascara/assets/img/acc_ico.svg);
	width: 27px;
	height: 27px;
	background-size: contain;
	margin-left: 0.3em;
	transform: rotate(180deg);
}
.ingredient h3.opened:after {
  transform: rotate(0deg);
}

/*================================
.ingredient02
================================*/

.ingredient02 h3 {
	background: #000;
	    color: #fff;
	    text-align: center;
	    padding: 1em;
	    font-size: clamp(1rem, 0.905rem + 0.4vw, 1.25rem);
	    letter-spacing: 0.1em;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    cursor: pointer;
}
.ingredient02 .data {
    background: #fff;
font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
}
.ingredient02 .data .inner {
    max-width: 1006px;
    margin: 0 auto;
  padding: 4% 7% 4%;
        font-weight: bold;
        font-size: 10px;
                background-color: #eaeaea;
}
.ingredient02 h3:after {
	content: "";
	display: inline-block;
	background: url(/mg/wp-content/themes/parisienne_191003/mascara/assets/img/acc_ico.svg);
	width: 27px;
	height: 27px;
	background-size: contain;
	margin-left: 0.3em;
	transform: rotate(180deg);
}
.ingredient02 h3.opened:after {
  transform: rotate(0deg);
}
/*================================
.ingredient03
================================*/

.ingredient03 h3 {
	background: #000;
	    color: #fff;
	    text-align: center;
	    padding: 1em;
	    font-size: clamp(1rem, 0.905rem + 0.4vw, 1.25rem);
	    letter-spacing: 0.1em;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    cursor: pointer;
}
.ingredient03 .data {
    background: #fff;
font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
}
.ingredient03 .data .inner {
    max-width: 1006px;
    margin: 0 auto;
  padding: 4% 7% 4%;
        font-weight: bold;
        font-size: 10px;
                background-color: #eaeaea;
}
.ingredient03 h3:after {
	content: "";
	display: inline-block;
	background: url(/mg/wp-content/themes/parisienne_191003/mascara/assets/img/acc_ico.svg);
	width: 27px;
	height: 27px;
	background-size: contain;
	margin-left: 0.3em;
	transform: rotate(180deg);
}
.ingredient03 h3.opened:after {
  transform: rotate(0deg);
}


/*================================
#how_to
================================*/

#how_to {
	position: relative;
background-color: #faebeb;
	padding: 15% 0 15%;
}
#how_to .secTitle {
    max-width: 8px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#how_to .inner {
	max-width: 1126px;
	margin: 0 auto;
	padding: 0 8%;

}

#how_to .inner p {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    line-height: 1.8;
    font-size: 0.75rem;
 margin-bottom: 2em;
}

#how_to h2 {
    text-align: center;
    font-size: clamp(1.25rem, 1.013rem + 1.01vw, 1.875rem);
    margin-bottom: 1em;
}
#how_to h2::after {
    content: "";
    display: block;
    width: 2em;
    height: 1px;
    background: #B5B5B5;
    margin: 0.8em auto;
}

#how_to .inner p:first-of-type {
	text-align: center;
        margin-bottom: 2em;
}

#how_to .mov {
	width: 100%;
	    max-width: 690px;
	    margin: 0 auto 5%;
}
#how_to .mov video {
    width: 100%;

}
#how_to .sp_none {
display: none!important;
}
#how_to .item_img {
    width: 280px;
    margin: auto;
    display: block;
    margin-bottom: 2em;
}

.buy_now_b {
    max-width: 410px;
    margin: 0 auto;
    text-align: center;
}
.buy_now_b a {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	background: #F16884;
	    font-size: clamp(0.938rem, 0.843rem + 0.4vw, 1.188rem);
	    padding: 1.2em 2em;
	    display: block;
	    color: #FFF;
	    border-radius: 50px;
	    box-shadow: 2px 6px 10px rgba(0,0,0,0.2);

}
.buy_now_b a img {
    height: 10px;
    width: auto;
    display: block;
    margin: 0 auto 0.3em;
}


/*================================
#image
================================*/

#image {
	 position: relative;
        background-color: #FAEBEB;
        padding: 80px 0;
}

#image .buy_now_b {
max-width: 320px;
        margin: 40px auto;
        text-align: center;
    }

#image .secTitle {
    max-width: 8px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#image .inner {
	max-width: 1126px;
	margin: 0 auto 5%;

}

#image h2 {
    text-align: center;
    font-size: clamp(1.25rem, 1.013rem + 1.01vw, 1.875rem);
    color: #F16884;
    margin-bottom: 2em;
}
#image h2::after {
    content: "";
    display: block;
    width: 2em;
    height: 1px;
    background: #F16884;
    margin: 0.8em auto;
}
#image .boxWrap {
margin-left: 5vh;
	margin-bottom: 0;
}
.slick-list.draggable {

}
#image .boxWrap .box {
margin: 0 10px;
	text-align: center;

}
#image .slick-prev:before {
    content: "";
    background: url(/mg/wp-content/themes/parisienne_191003/mascara/assets/img/image/prev.svg);
    width: 27px;
    height: 27px;
    background-size: cover;
    display: block;
}
#image .slick-next {
    right: 25px;
}
#image .slick-next:before {
    content: "";
    background: url(/mg/wp-content/themes/parisienne_191003/mascara/assets/img/image/next.svg);
    width: 27px;
    height: 27px;
    background-size: cover;
    display: block;
}
#image .slick-list {
  padding: 0 15% 0 0!important;
}
#image .boxWrap .box p {
    	font-size: 0.75rem;
    text-align: center;
    font-weight: bold;
    margin-top: 1em;
}
#image p.note {
	font-size: 0.75rem;
	width: 85%;
	margin: 2.5em auto 0;
	text-align: left;
}

/*================================
#what_is
================================*/

#what_is {
	position: relative;
	    background: #F16884;
	    padding: 12% 0;
	    color: #fff;
}
#what_is .secTitle {
  max-width: 8px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#what_is .inner {
	max-width: 1126px;
	margin: 0 auto;
	padding: 0 8%;
}

#what_is h2 {
	text-align: center;
	font-size: 1.25rem;
	color: #FFFFFF;
	margin-bottom: 1em;
}
#what_is h2::after {
    content: "";
    display: block;
    width: 2em;
    height: 1px;
    background: #FFFFFF;
    margin: 0.8em auto;
}


#what_is p.logo_title {
    max-width: 166px;
    margin: 0 auto 1em;
}
#what_is h2 + p {
	font-size: 0.813rem;
	    margin: 0 auto;
	    text-align: center;
	    margin-bottom: 1.5em;
	    font-weight: bold;
}
#what_is p.text_img01 {
	max-width: 660px;
    margin: 0 auto 2.5em;
    width: 75%;
}
#what_is p.text_img02 {
	max-width: 233px;
margin: 0 auto 0.5em;
width: 50%;
}
#what_is p.text_img03 {
    max-width: 536px;
    margin: 0 auto 1.3em;
}
#what_is p.hash {
	font-size: 0.813rem;
	text-align: center;
	font-weight: bold;
	margin-bottom: 1.5em;
}