@charset "utf-8";

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

	塗るパリジェンヌ (PC)
	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;
	    background-color:#FFF;
	    color: #333333;
	    -webkit-text-size-adjust: 100%;
      letter-spacing: 0.02em;
	    width: 100%;
	    font-weight: 400;
			background-size: cover;
			background-attachment: fixed;
			background-position: center center;
		background-image: url('/mg/wp-content/themes/parisienne_191003/mascara/assets/img/main_bg.png');
}
img {	width: 100%;	height: auto;}
main {overflow: hidden;}


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


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



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

#footer {
	width: 450px;
        margin: auto;

}

#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
================================*/

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


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

#mainImg{
	position: relative;
    width: 450px;
    margin: auto;
}

#mainImgInner {
	max-width: 1226px;
	padding: 4% 0 0px;
	margin: 0px auto;
}
#mainImgInner::after {
	content: "";
	display: inline-block;
	background-color: #F16884;
	height: 55%;
	width: 60%;
	left: 0;
	bottom: -8%;
	position: absolute;
	z-index: -1;

}


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

#concept {
    padding: 10% 0;
}

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

}
#concept .sec01 .boxWrap .boxImg {
	width: 50%;
	    margin: 0 10% 0 0;
			position: relative;
}
#concept .sec01 .boxWrap .boxImg .bg_img {
	position: absolute;
	z-index: -1;
	right: 35%;
	bottom: -128%;
	max-width: 480px;
}
#concept .sec01 .item_img_Wrap{
	position: relative;
	}
#concept .sec01 .item_img_Wrap .item_img {
	position: absolute;
	z-index: 1;
	left: 40%;
	top: -70%;
	max-width: 220px;
	width: calc(220 / 1266 * 100vw);
}
#concept .sec01 .boxWrap .boxTxt {
    width: 30%;
      flex: 1;
			padding-bottom: 2em;
			    position: relative;
}
#concept .sec01 .boxWrap .boxTxt h3 {
  margin-bottom: 1.8em;
}
#concept .sec01 .boxWrap .boxTxt h3 + p {
  font-size: clamp(0.688rem, 0.5rem + 0.5vw, 1rem);
}

#concept .sec02 .boxWrap {
	display: flex;
	margin-left: 45%;
	align-items: center;
	margin-bottom: 6%;
}
#concept .sec02 .boxWrap .boxImg {
    width: 20%;
    flex: 1;
    max-width: 260px;
    margin-right: 6%;
}

#concept .slideImg {
    padding: 10vh 0 6vh;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
		display: flex;
    position: inherit;
    z-index: -2;
}
#concept .slideImg img {
    white-space: nowrap;
    padding-right: 25px;
    padding-left: 25px;
}


#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 .boxTxt h3 {
		    font-size: clamp(0.625rem, 0.436rem + 0.81vw, 1.125rem);
		    margin-bottom: 0.5em;
		}

		#concept .sec02 .boxWrap .boxTxt h3 span {
    font-size: clamp(0.625rem, 0.554rem + 0.3vw, 0.813rem);
}
		#concept .sec02 .boxWrap .boxTxt h3 + p {
		    font-size: clamp(0.625rem, 0.554rem + 0.3vw, 0.813rem);
		}
		#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 .boxTxt dl {
		display: flex;
		    align-items: center;
		    margin-top: 1em;
		    line-height: 1;
}
#concept .sec02 .boxWrap .boxTxt dl dt {
font-size: clamp(0.625rem, 0.578rem + 0.2vw, 0.75rem);
}
#concept .sec02 .boxWrap .boxTxt {
font-size: clamp(0.625rem, 0.554rem + 0.3vw, 0.813rem);
}
#concept .sec02 .boxWrap .boxTxt dl dd {
    margin-left: 0.6em;
}
#concept .sec02 .boxWrap .boxTxt dl dd em {
font-size: clamp(0.625rem, 0.436rem + 0.81vw, 1.125rem);
font-weight: bold;
}
#concept .sec02 .boxWrap .boxTxt dl dd span {
font-size: 0.813rem;
display: inline-block;
margin-left: 0.3em;
}

#concept .sec03 .boxWrap {
    max-width: 1006px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
#concept .sec03 .boxWrap .boxImg {
    width: 50%;
}
#concept .sec03 .boxWrap .boxTxt {
    flex: 1;
        margin-top: 50px;
}
#concept .sec03 .boxWrap .boxTxt p span {
    display: table;
    background: #fff;
    font-size: 30px;
    margin: 0.5em;
    padding: 0em 0.4em;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/*================================
#point
================================*/
#point {
	 position: relative;
    background: #F16884;
    padding: 8% 0;
}
#point .secTitle {
    max-width: 10px;
    position: absolute;
    left: 3%;
    top: 3%;
}
#point .item_img {
       position: absolute;
    z-index: 1;
    left: 67%;
    top: 0%;
    max-width: 220px;
    width: calc(220 / 1266 * 100vw);
}


#point .inner {
	max-width: 1126px;
	    margin: 0 auto;
	    padding: 0 50px
}

#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: 4% 4% 3.5%;
}
#point .boxWrap .box .no {
    position: absolute;
    left: -2%;
    top: -5%;
    max-width: 65px;
    width: calc(65 / 1266 * 100vw);
}
#point .boxWrap .box h3 {
    display: table;
}
#point .boxWrap .box h3 img {
    max-height: 26px;
}
#point .boxWrap .box h3 + p {
	font-size: clamp(0.625rem, 0.507rem + 0.5vw, 0.938rem);
	    font-weight: bold;
	    margin: 0.5em 0 1.5em;
}
#point .box_inner {
    display: flex;
    align-items: center;
}
#point .box_inner .boxImg {
    max-width: 280px;
    margin-right: 5%;
    width: 30%;
}
#point .box_inner .boxTxt {
    flex: 1;
}
#point .pointData {
    background: #FBE7E8;
    display: flex;
    flex-wrap: wrap;
}
#point .pointData h4 {
	position: relative;
	width: 100%;
    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: 4%;
    max-width: 100px;
}
#point .pointDataImg {
	max-width: 255px;
	    margin: 4%;
}
#point .pointDataTxt {
    flex: 1;
    padding: 3% 4% 3% 0;
    font-size: clamp(0.688rem, 0.5rem + 0.5vw, 1rem);
}
#point .pointDataTxt h5 {
    color: #F16884;
    font-size: clamp(1.25rem, 1.037rem + 0.91vw, 1.813rem);
}
#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;
	width: 100%;
	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: clamp(0.625rem, 0.554rem + 0.3vw, 0.813rem);
	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;
}


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

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

#feature h2 {
    text-align: center;
    font-size: clamp(1.25rem, 1.013rem + 1.01vw, 1.875rem);
    color: #F16884;
    margin-bottom: 1.3em;
}
#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;
}
#feature .feature_head .lead {
    font-size: clamp(0.938rem, 0.819rem + 0.5vw, 1.25rem);
}

#feature .feature_head .item_img {
	max-width: 312px;
	display: block;
	background: #fff;
	border-radius: 50%;
	width: 30%;
	margin: 0 1em;
}



#feature .feature_head .circle{
	position: relative;
	padding-top: 100%;
	height: 0;
}


#feature .feature_head .circle feature img {
	position: absolute;
	right: 0;
	bottom: -20px;
	max-width: 110px;
	left: 45%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: calc(110 / 1266 * 100vw);
}

#feature .feature_head .item_txt {
    margin-left: -4%;
}

#feature .feature_head .item_txt h3 {
	background: #F16884;
	    display: table;
	    color: #fff;
	    font-size: clamp(1.438rem, 1.201rem + 1.01vw, 2.063rem);
	    padding: 0.1em 1em;
	    margin-bottom: 0.6em;
}
#feature .feature_head .item_txt h3 + p {
	    font-size: clamp(0.813rem, 0.765rem + 0.2vw, 0.938rem);

}
#feature .boxWrap {
	display: flex;
	    flex-wrap: wrap;
	    position: relative;
}
#feature .boxWrap .box {
    width: 50%;
    border-radius: 10px;
    border: solid 1px #F16884;
    background: #fff;
    padding: 3%;
}
#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 {
    width: 450px;
        margin: auto;
	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 {
    width: 450px;
        margin: auto;
    background: #fff;
font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
}
.ingredient .data .inner {
    max-width: 1006px;
    margin: 0 auto;
    padding: 6% 8%;
        font-weight: bold;
        font-size: 11px;
        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 {
    width: 450px;
        margin: auto;
	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 {
    width: 450px;
        margin: auto;
    background: #fff;
font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
}
.ingredient02 .data .inner {
    max-width: 1006px;
    margin: 0 auto;
    padding: 6% 8%;
        font-weight: bold;
        font-size: 11px;
                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 {
    width: 450px;
        margin: auto;
	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 {
    width: 450px;
        margin: auto;
    background: #fff;
font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
}
.ingredient03 .data .inner {
    max-width: 1006px;
    margin: 0 auto;
    padding: 6% 8%;
        font-weight: bold;
        font-size: 11px;
                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 {
    width: 450px;
        margin: auto;
	 position: relative;
    padding: 8% 0;
    background-color: #faebeb;
}
#how_to .secTitle {
    max-width: 10px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#how_to .inner {
	max-width: 1126px;
	    margin: 0 auto;
	    padding: 0 50px
}
#how_to .inner p {
	text-align: center;
        margin-bottom: 3em;
}
#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 .item_img {
   width: 280px;
        margin: auto;
        display: block;
        margin-bottom: 2em;
}
#how_to .mov {
	width: 100%;
	    max-width: 690px;
	    margin: 0 auto 5%;
}
#how_to .mov video {
    width: 100%;

}

.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
================================*/
#image02 {
    width: 450px;
        margin: auto;
}
#image03 {
    width: 450px;
        margin: auto;
}
#image {
    width: 450px;
        margin: auto;
	 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: 8% 0;
		color: #fff;
}
#what_is .secTitle {
    max-width: 10px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#what_is .inner {
	max-width: 1126px;
	margin: 0 auto;
}

#what_is h2 {
    text-align: center;
    font-size: clamp(1.25rem, 1.013rem + 1.01vw, 1.875rem);
    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: clamp(0.625rem, 0.507rem + 0.5vw, 0.938rem);
    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;
}
#what_is p.text_img02 {
    max-width: 233px;
    margin: 0 auto 0.5em;
}
#what_is p.text_img03 {
    max-width: 536px;
    margin: 0 auto 2em;
}
#what_is p.hash {
    font-size: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
    text-align: center;
    font-weight: bold;
		margin-bottom: 1.5em;
}