@charset "utf-8";

body {
	margin: 0;
}

img{
	width: 100%;
	vertical-align:top;
}

/*--------------------------------------------------------------
/wrapper/
--------------------------------------------------------------*/



div#wrapper{
	background: #fff;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

div.wrapper_inner{
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding:0;
	text-align: center;
	color: #000000;
	box-sizing: border-box;
}

/* #mv */
div#wrapper #mv{
	position: relative;
	margin-bottom: 45px;
}

div#wrapper #mv .link_btn{
	position: absolute;
	left: 0;
    bottom: -80px;
}

div#wrapper .about_area {
	width: 90%;
    margin: 0 auto;
}

/* #sec01 */
div#wrapper #sec01 .product {
    position: relative;
}

div#wrapper #sec01 .btn_link01 {
    position: absolute;
    bottom: 160px;
}

div#wrapper #sec01 .btn_link01 img.cartBtn {
    position: absolute;
    max-width: 270px;
    top: 45px;
    right: 45px;
}

div#wrapper #sec01 .btn_link02 {
    position: absolute;
	bottom: 40px;
}

div#wrapper #sec01 .btn_link02 img.cartBtn {
    position: absolute;
    max-width: 270px;
    top: 45px;
    right: 45px;
}

/* #sec02 */
div#wrapper #sec02 {

}

div#wrapper #sec02 .product {
    position: relative;
}

div#wrapper #sec02 .btn_link01 {
    position: absolute;
    bottom: 130px;
}

div#wrapper #sec02 .btn_link02 {
    position: absolute;
	bottom: 10px;
}

/* #sec03 */
div#wrapper #sec03 {
	background: #ffff;
	padding-bottom: 20px;
}

div#wrapper #sec03 .product {
    position: relative;
}

div#wrapper #sec03 .btn_link01 {
    position: absolute;
	bottom: 300px;
}

div#wrapper #sec03 .btn_link02 {
    position: absolute;
	bottom: 180px;
}

div#wrapper #sec03 ul{
	position: relative;
    bottom: 20px;
    text-align: left;
    padding: 0 30px;
}

div#wrapper #sec03 ul li{
	text-indent: -1em;
	padding-left: 1em;
}


/* #sec04 */
section#sec04 {
	position: relative;
    padding-bottom: 20px;
    background: #fff;
}

div#wrapper #sec04 .bnr_link01 {
    position: absolute;
    bottom: 210px;
}

div#wrapper #sec04 .bnr_link02 {
    position: absolute;
    bottom: 10px;
}

/* #sec05 */
section#sec05{
	position: relative;
}

div#wrapper #sec05 .bnr_link01 {
    position: absolute;
    bottom: 100px;
}


@media screen and (max-width: 768px) {

/* #mv*/
	div#wrapper #mv{
		margin-bottom: 6vw;
	}
	div#wrapper #mv .link_btn {
		position: absolute;
		left: 0;
		bottom: -50px;
	}

/* #sec01 */
	div#wrapper #sec01 .btn_link01 {
		position: absolute;
		bottom: 20%;
	}

	div#wrapper #sec01 .btn_link02 {
		position: absolute;
		bottom: 5%;
	}

/* #sec02*/
	div#wrapper #sec02 .btn_link01 {
		position: absolute;
		bottom: 16%;
	}

	div#wrapper #sec02 .btn_link02 {
		position: absolute;
		bottom: 1%;
	}

/* #sec03 */
	div#wrapper #sec03 {
		background: #ffff;
		padding-bottom: 30px;
	}

	div#wrapper #sec03 .btn_link01 {
		position: absolute;
		bottom: 37%;
	}

	div#wrapper #sec03 .btn_link02 {
		position: absolute;
		bottom: 26%;
	}

	div#wrapper #sec03 ul {
		position: relative;
		bottom: 0;
		font-size: 75%;
		text-align: left;
		padding: 0 30px;
	}

/* #sec04 */
	div#wrapper #sec04 .bnr_link01 {
		position: absolute;
		bottom: 40%;
	}

	div#wrapper #sec04 .bnr_link02 {
		position: absolute;
		bottom: 5%;
	}

/* #sec05 */
	div#wrapper #sec05 .bnr_link01 {
		position: absolute;
		bottom: 20%;
	}



}



/*--------------------------------------------------------------*/



div#wrapperbutton, div#wrapperinput {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background: none;
	outline: none;
	padding: 0;
	margin: 0;

	cursor: pointer;
}

/* common */
div#wrapper.has-bg {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
div#wrapper.has-bg input.link-cv {
	width: 100%;
	font-size: 0;
	background-size: contain;
	background-repeat: no-repeat;
}
div#wrapper.has-bg a.link-detail {
	color: #474747;
	font-size: min(22px, calc(22 / 640 * 100vw));
	font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
	display: inline-block;
	text-decoration: underline;
	margin-top: calc(32 / 750 * 100%);
}

/* 通常CVのボタン部分 */
div#wrapper.has-bg.common {
	padding: 0 calc(75 / 750 * 100%);
	background-image: url(../img/sp/cv_bg.jpg);
	background-size: 100% 3px;
	background-repeat: no-repeat repeat;
	padding-bottom: calc(40 / 750 * 100%);
}
div#wrapper.has-bg.common input.link-cv {
	width: 100%;
	height: min(110px, calc(110 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn.png);
}

/* チェックボックスの部分 */
div#wrappersection.point {
	background-image: url(../img/sp/point_bg.jpg);
	background-size: cover;
	background-position: center top;
}
div#wrapper.has-bg.check {
	padding: 0 calc(118 / 750 * 100%);
	background-image: url(../img/sp/check_bg.png);
	background-size: 100% 3px;
	background-repeat: no-repeat repeat;
	padding-top: calc(16 / 750 * 100%);
}
div#wrapper.has-bg.check .check_btn {
	width: 100%;
}
div#wrapper.has-bg.check .check_btn img {
	width: 100%;
}
div#wrapper.has-bg.checkbox {
	padding: 0;
	background-image: url(../img/sp/check_bg.png);
	background-size: 100% 3px;
	background-repeat: no-repeat repeat;
}
div#wrapper.has-bg.checkbox input {
	display: none;
}

/* checkboxがcheckされたときの隣の要素 */
div#wrapper.has-bg.checkbox input + label::before {
	content: "";
	position: absolute;
	width: min(35px, calc(35 / 640 * 100vw));
	height: min(25px, calc(25 / 640 * 100vw));
	background-image: url(../img/sp/checkbox_check.png);
	background-size: 100% 100%;
	top: 45%;
	transform: translateY(-50%);
	left: calc(72 / 624 * 100%);
	opacity: 0;
	visibility: hidden;
}
div#wrapper.has-bg.checkbox input:checked + label::before {
	opacity: 1;
	visibility: visible;
}
div#wrapper.has-bg.checkbox label {
	width: calc(624 / 750 * 100%);
	margin: 0 auto;
	display: block;
	padding-top: 0px;
	position: relative;
}
div#wrapper.has-bg.checkbox label img {
	width: 100%;
	vertical-align: top;
}

/* cv-blueのボタン部分 */
div#wrapper.has-bg.cv-blue {
	padding: 0 calc(61 / 750 * 100%);
	background: linear-gradient(to right, #93ddfa 0%, #93ddfa calc(30 / 750 * 100%), #ffffff calc(30 / 750 * 100%), #ffffff calc(720 / 750 * 100%), #93ddfa calc(720 / 750 * 100%), #93ddfa 100%);
	padding-bottom: calc(33 / 750 * 100%);
}
div#wrapper.has-bg.cv-blue input.link-cv {
	width: 100%;
	height: min(110px, calc(110 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--blue.png);
}
div#wrapper.has-bg.cv-blue a.link-detail {
	margin-top: calc(0 / 750 * 100%);
}

/* cv-blackのボタン部分 */
div#wrapper.has-bg.cv-black {
	padding: 0 calc(61 / 750 * 100%);
	background: linear-gradient(to right, #2e343f 0%, #2e343f calc(30 / 750 * 100%), #ffffff calc(30 / 750 * 100%), #ffffff calc(720 / 750 * 100%), #2e343f calc(720 / 750 * 100%), #2e343f 100%);
	padding-bottom: calc(33 / 750 * 100%);
}
div#wrapper.has-bg.cv-black input.link-cv {
	width: 100%;
	height: min(110px, calc(110 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--blue.png);
}
div#wrapper.has-bg.cv-black a.link-detail {
	margin-top: calc(0 / 750 * 100%);
}

/* とことん毛穴ケアをしたいなら！の上の詳しく見るボタン */
div#wrapper.has-bg a.link-detail.on-black {
	color: #ffffff;
	position: absolute;
	bottom: calc(72 / 750 * 100%);
	left: calc(211 / 750 * 100%);
}
div#wrapper.has-bg.has-margin-bottom {
	margin-bottom: calc(-26 / 750 * 100%);
}

/* こだわりの部分のスライダー */
.kodawari {
	margin-bottom: 46px;
}
.kodawari_slider .slick-dots {
	bottom: -32px;
}
.kodawari_slider .slick-dots li {
	margin: 0;
}
.kodawari_slider .slick-dots li button:before {
	font-size: min(45px, calc(45 / 640 * 100vw));
	color: #e3ecf2;
	opacity: 1;
}
.kodawari_slider .slick-dots li.slick-active button:before {
	color: #93a0ab;
	opacity: 1;
}
.kodawari_slider .slick-prev, .kodawari_slider .slick-next {
	width: min(66px, calc(66 / 640 * 100vw));
	height: min(8px, calc(8 / 640 * 100vw));
	top: auto;
	bottom: max(-33px, calc(-33 / 640 * 100vw));
	left: min(8px, calc(8 / 640 * 100vw));
	color: black;
	z-index: 1;
}
.kodawari_slider .slick-next {
	left: auto;
	right: min(8px, calc(8 / 640 * 100vw));
	transform: scale(-1, 1);
	bottom: max(-28px, calc(-28 / 640 * 100vw));
}
.kodawari_slider .slick-disabled {
	opacity: 0;
	visibility: hidden;
}
.kodawari_slider .slick-prev::before, .kodawari_slider .slick-next::before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../img/sp/kodawari_slider_arrow.png);
	background-size: 100% 100%;
}

/* cv-detail-blueのボタン部分 */
div#wrapper.has-bg.cv-detail-blue {
	padding: 0 calc(73 / 750 * 100%);
	background: linear-gradient(to right, #70aec8 0%, #70aec8 calc(40 / 750 * 100%), #ffffff calc(40 / 750 * 100%), #ffffff calc(710 / 750 * 100%), #70aec8 calc(710 / 750 * 100%), #70aec8 100%);
	padding-bottom: calc(18 / 750 * 100%);
	border-bottom: 21px solid #70aec8;
}
div#wrapper.has-bg.cv-detail-blue input.link-cv {
	width: 100%;
	height: min(110px, calc(110 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--blue.png);
}
div#wrapper.has-bg.cv-detail-blue input.link-cv.linkSubmitMember {
	width: calc(536 / 604 * 100%);
	height: min(110px, calc(110 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--non-member.png);
}
div#wrapper.has-bg.cv-detail-blue a.link-detail {
	margin-top: calc(0 / 750 * 100%);
}
div#wrapper.has-bg.cv-detail-blue a.link-non-member {
	display: block;
	width: calc(536 / 604 * 100%);
	margin: calc(27 / 604 * 100%) auto;
}
div#wrapper.has-bg.cv-detail-blue a.link-non-member img {
	width: 100%;
}
div#wrapper.has-bg.cv-detail-blue a.guide-link {
	color: #484848;
	font-family: YuGothic, Yu Gothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
	font-size: 13px;
	letter-spacing: 0.025em;
	display: inline-block;
	position: relative;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	text-underline-offset: 30%;
	margin-bottom: calc(40 / 750 * 100%);
}

/* cv-detail-blackのボタン部分 */
div#wrapper.has-bg.cv-detail-black {
	padding: 0 calc(73 / 750 * 100%);
	background: linear-gradient(to right, #31343e 0%, #31343e calc(40 / 750 * 100%), #ffffff calc(40 / 750 * 100%), #ffffff calc(710 / 750 * 100%), #31343e calc(710 / 750 * 100%), #31343e 100%);
	padding-bottom: calc(18 / 750 * 100%);
	border-bottom: 36px solid #31343e;
	margin-bottom: 7px;
}
div#wrapper.has-bg.cv-detail-black input.link-cv {
	width: 100%;
	height: min(110px, calc(110 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--blue.png);
}
div#wrapper.has-bg.cv-detail-black input.link-cv.linkSubmitMember {
	width: calc(536 / 604 * 100%);
	height: min(110px, calc(110 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--non-member.png);
}
div#wrapper.has-bg.cv-detail-black a.link-detail {
	margin-top: calc(0 / 750 * 100%);
}
div#wrapper.has-bg.cv-detail-black a.link-non-member {
	display: block;
	width: calc(536 / 604 * 100%);
	margin: calc(27 / 604 * 100%) auto;
}
div#wrapper.has-bg.cv-detail-black a.link-non-member img {
	width: 100%;
}
div#wrapper.has-bg.cv-detail-black a.guide-link {
	color: #484848;
	font-family: YuGothic, Yu Gothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
	font-size: 13px;
	letter-spacing: 0.025em;
	display: inline-block;
	position: relative;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	text-underline-offset: 30%;
	margin-bottom: calc(40 / 750 * 100%);
}

/* cv-lastのボタン部分 */
div#wrapper.has-bg.cv-last {
	padding: 0;
	background-image: url(../img/sp/cv_bg--last.jpg);
	background-size: 100% 3px;
	background-repeat: no-repeat repeat;
	padding-bottom: calc(28 / 750 * 100%);
	margin-bottom: 0;
	display: flex;
	justify-content: space-around;
}
div#wrapper.has-bg .cv-last-inner {
	width: calc(130 / 320 * 100%);
}
div#wrapper.has-bg.cv-last input.link-cv {
	width: 100%;
	height: min(90px, calc(90 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--small.png);
}
div#wrapper.has-bg.cv-last input.link-cv.linkSubmitMember {
	width: 100%;
	height: min(70px, calc(70 / 640 * 100vw));
	background-image: url(../img/sp/cv_btn--small--non-member.png);
}
div#wrapper.has-bg.cv-last a.link-detail {
	margin-top: calc(0 / 750 * 100%);
}
div#wrapper.has-bg.cv-last a.link-non-member {
	display: block;
	width: 100%;
	margin: calc(0 / 604 * 100%) auto;
}
div#wrapper.has-bg.cv-last a.link-non-member img {
	width: 100%;
}

/* 動画部分 */
div#wrapper.has-bg.movie {
	background-color: #4f5563;
}
div#wrapper.has-bg.movie p {
	position: relative;
	z-index: 1;
}
div#wrapper.has-bg.movie video {
	width: calc(562 / 750 * 100%);
	position: absolute;
	top: calc(347 / 750 * 100%);
	left: calc(148 / 750 * 100%);
}

/* faqのアコーディオン */
.faq {
	margin-bottom: 39px;
}
.faq .faq-accordion {
	padding: 0 calc(41 / 750 * 100%);
}
.faq .faq-accordion:first-of-type {
	margin-top: calc(50 / 750 * 100%);
}
.faq .faq-accordion dt, .faq .faq-accordion dd {
	width: 100%;
}
.faq .faq-accordion dt img, .faq .faq-accordion dd img {
	vertical-align: top;
	width: 100%;
}
.faq .faq-accordion dt {
	/* アコーディオンのプラスを擬似要素で再現 */
	position: relative;
}
.faq .faq-accordion dt::before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: calc(27 / 670 * 100%);
	height: 1px;
	background-color: #c3c3c3;
}
.faq .faq-accordion dt::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: calc(27 / 670 * 100%);
	height: 1px;
	background-color: #c3c3c3;
	transform: rotate(90deg);
	transition-duration: .3s;
}
.faq .faq-accordion dt.open::after {
	transform: rotate(0deg);
}
.faq .faq-accordion:not(:first-of-type) dd {
	display: none;
}

/* 環境の部分のスライダー */
.env {
	border-bottom: #abb7c1 solid 27px;
	margin-bottom: 0;
}
.env_slider.slick-dotted.slick-slider {
	margin-bottom: 0;
}
.env_slider .slick-dots {
	bottom: -12px;
}
.env_slider .slick-dots li {
	margin: 0;
}
.env_slider .slick-dots li button:before {
	font-size: 45px;
	color: #e3ecf2;
	opacity: 1;
}
.env_slider .slick-dots li.slick-active button:before {
	color: #93a0ab;
	opacity: 1;
}
.env_slider .slick-prev, .env_slider .slick-next {
	width: min(66px, calc(66 / 640 * 100vw));
	height: min(8px, calc(8 / 640 * 100vw));
	top: auto;
	bottom: max(-10px, calc(-10 / 640 * 100vw));
	left: min(16px, calc(16 / 640 * 100vw));
	color: black;
	z-index: 1;
	transform: scale(-1, 1);
}
.env_slider .slick-next {
	left: auto;
	right: min(16px, calc(16 / 640 * 100vw));
	transform: scale(1, 1);
	bottom: max(-10px, calc(-10 / 640 * 100vw));
}
.env_slider .slick-disabled {
	opacity: 0;
	visibility: hidden;
}
.env_slider .slick-prev::before, .env_slider .slick-next::before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../img/sp/env_slider_arrow.png);
	background-size: 100% 100%;
}

/* 「注文時のご注意・ご利用ガイドはこちら」部分 */
div#wrapper.has-bg a.guide-link {
	color: #fff;
	font-family: YuGothic, Yu Gothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
	font-size: 13px;
	letter-spacing: 0.025em;
	display: inline-block;
	width: 100%;
	position: absolute;
	bottom: calc(55 / 320 * 100%);
	left: 50%;
	transform: translateX(-50%);
	text-underline-offset: 30%;
}

/* フッターリンク部分 */
#wrapper.help {
  width: calc(315 / 640 * 100%);
  margin: -80px auto 20px;
  padding-top:110px;
}
#wrapper.help img {
  width: 100%;
}
#wrapper.footer_link {
  font-size: 13px;
	list-style: none;
}
#wrapper.footer_link li {
  margin-bottom: 20px;
}
#wrapper.footer_link li a,
#wrapper#gototop a {
  color: #508dbd;
}
#gototop {
  text-align: right;
  margin-bottom: 13px;
  padding-right: 13px;
}

/* 特定商取引法 位置は適宜調節
-------------------------------------------------------------- */

#tokushou {
	margin: 0 0 10px 0;
	text-align: center;
    font-size: 13px;
}


.js-inCartBtn img {
	width: calc(536 / 604 * 100%);
}

.cv-last .js-inCartBtn img {
	width: 100%;
}


#target-cv-blue,
#target-cv-black{
	margin-top:-100px;
	padding-top:130px;
}

#wrapper .bdline {
	position: relative;
	height: 70px;
	width: 80%;
    margin: 0 auto;
}
#wrapper .bdline:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom:1px solid #e3e3e3;
}

/* リンクボタン */
#link_area .link_btn{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3vw 1.2vw;
	margin: 1vw auto 1.4vw auto;
	width: 85%;
}
@media (min-width: 640px) {
#link_area .link_btn{
	gap: 25px 15px;
	margin: 7px auto 9px auto;
}
}

#link_area .link_btn img{
	border-radius: 3%;
	box-shadow: 2px 2px 5px 1px rgba(234, 234, 234, 0.9);
}

#link_area .link_area_block {
	margin-bottom: 45px;
}
#link_area .link_area_block:last-child {
	margin-bottom: 100px;
}

#link_area .link_area_ttl {
	margin-bottom: 3vw;
}

.sec01,.sec02,.sec03,.sec04,.sec05,.sec06,.sec07,.sec08{
	position: relative;
}

#sec01,#sec02,#sec03,#sec04,#sec05,#sec06,#sec07,#sec08{
	position: absolute;
	top: 8.7rem;
}

/* 注釈 */
.product_attention{
	border-top: 1px solid #d6d6d6;
	padding-top: 7vw;
	text-align: left;
	font-family: "Yu Mincho", "游明朝", "YuMincho", serif;
	font-feature-settings: "palt";
	color: #595757;
	padding-left: 1em;
	margin:1.2vw auto 2vw;
	width: 79%;
	font-size: 2.7vw;
	line-height: 1.8;
}
@media (min-width: 590px) {
	.product_attention{
		margin: 0 auto 70px;
        padding-top: 50px;
        font-size: 16px;
	}
}
@media (max-width: 500px) {
	.product_attention{
		font-size: 13px;
	}
}

.product_attention li{
	display: block;
	text-indent: -1em;
}

/* セット内容 */
.product_contents{
	text-align: left;
	font-family: "Yu Mincho", "游明朝", "YuMincho", serif;
	font-feature-settings: "palt";
	color: #2f2725;
	padding-left: 0.5em;
	margin:0.5vw auto 6vw;
	width: 78%;
	font-size: 2.7vw;
	line-height: 1.8;
	letter-spacing: 2px;
	font-weight: bold;
}

.product_contents_btm{
	margin-bottom:10vw;
}

.product_contents_btm.end {
	margin-bottom:4vw;
}

@media (min-width: 590px) {
.product_contents{
	margin:5px auto 48px;
	font-size: 16px;
}
.product_contents_btm{
	margin-bottom:90px;
}
.product_contents_btm2{
	margin-bottom:30px;
}
}
@media (max-width: 500px) {
.product_contents{
	font-size: 13px;
}
}

.product_contents li{
	display: block;
	text-indent: -0.5em;
	padding-bottom:5px
}
.product_contents li:first-child{
font-size: 120%;
}

@media (max-width: 450px) {
.product_contents_pc{
	display:none;
}
}

.set_link{
	text-decoration:underline;
}
.set_link:hover{
	text-decoration:none;
	opacity:0.7;
}

#pc_cartreco,#sp_cartreco,.m-pageInCart_subBlock,.cartRecommendWrapper{
	display:none !important;
}
@media (max-width: 500px) {
	#link_area .link_area_ttl {
		margin-bottom: 7vw;
	}
	#link_area .link_btn {
		gap: 3vw 2vw;
	}
	#link_area .link_area_block {
		margin-bottom: 8vw;
	}
	#link_area .link_area_block:last-child {
		margin-bottom: 12vw;
	}
	#wrapper .bdline {
		height: 13vw;
	}
	.product_contents_btm.end {
		margin-bottom: 10vw;
	}
	.product_attention {
		padding-top: 10vw;
		margin: 1.2vw auto 15vw;
	}
}