@charset "utf-8";
/* CSS Document */
/* ------------------------------------------------------------------------ */

/*  Reset

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

html {
	overflow-y	: scroll;
	height		: 100%;
	font-size	: 62.5%;
	-webkit-text-size-adjust: 100%;
}




h1,h2,h3,h4,h5,h6 {
	font-size : 100%;
}

img,abbr,acronym,fieldset {
	border : 0;
}

li {
	list-style-type : none;
}


img {
	border		: 0;
	max-width	: 100%;
}

i {
	padding	: 5px 5px 2px 0;
}

p {
	word-break	: break-all;
font-family: "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Osaka","ＭＳ ゴシック";	
	line-height: 2;
}

/* Flexible Images */
img{
    max-width	: 100%;
    height		: auto;
    width /***/	: auto;
}

@media screen and (min-width: 768px){
	.sp_style{
		display: none;
	}
	
}


@media only screen and (max-width: 767px){
		.sp_style{
		display: block;
	}
		.pc_style{
		display: none;
	}	
}



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

/*  Basic Style

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

body {
	margin		: 0;
	padding		: 0;
	height		: 100%;
	font-family	: "リュウミン R-KL" , "游明朝", YuMincho, serif, Meiryo, MS PGothic, arial, sans-serif;
	font-size	: clamp(17px, 1.3541666667vw, 20px);
	line-height	: 1.7;
	text-align	: left;
	color		: #231815;
	-webkit-text-size-adjust	: 100%;
	font-smoothing	: auto;

}

body *,
body *:before,
body *:after {
    box-sizing: border-box;
}

#wrap{

}

body > #wrap { height : auto;}


/* Link
--------------------------------------------------------------------------- */

.opacity a:hover img{
	opacity: 0.85;
}

a:link	{
	text-decoration	: none;
}

a:visited	{
	text-decoration	: none;
}

a:hover	{
	text-decoration	: none;
}


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

/* Hedaer

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

header {}

h1{
	text-align: center;
}

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

/* Navigation

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

nav {}


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

/* Contents

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

#mainBlock {
	clear : both;
  position: relative;
  overflow: hidden;

}

#mainBlock::before {
  content: "";
  background-image: url("../img/bg.jpg");
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  z-index: -1;
}

.main-visual img {
      width: 100%;
    }





.release {
  background-image: linear-gradient(90deg, #e5d6a9, #f0eecb 50%, #e4d09d);
padding: clamp(1.5em, 5%, 2em);
	text-align: center;
}

.release img{
max-width: clamp(60%, 1035px, 100%);
	margin: 0 auto;
}
.release p{
padding: 0 1em;
}

#contentsBlock{
	max-width: 1500px;
	margin: 5% auto 0;
	padding:5%;
}

h2{
	font-size: clamp(30px, 4vw, 50px);
	color: #867800;
	text-align: center;
	margin: 15% auto 10%;
}



h3{
	font-size: clamp(26px, 3vw, 40px);
	margin-bottom:clamp(20px, 5%, 40px);
	color: #867800;
	line-height: 1.5;
}

h3 .hoshitsu{
	font-size: 50%;
}

h3.h01{
	color: #231815;

}

h3.h01 span{
	font-size: 70%;
}
h3.h01 span.zei{
	font-size: 40%;
}

.kome{
	font-size: 50%;
}


@media only screen and (max-width: 1100px)
{	.release img{
max-width: 100%;
}
	
	#contentsBlock{
	padding:5% 7%;
}
	
}

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

/* 美容化粧水でメイクを落とす新発想*/


.con_01{
	display: flex;
	justify-content: center;
	align-items: center;
}

.wid01{
	/*width: calc(100% / 4);*/
	width: clamp(20%, 275px, 45%);
	margin-right: 7%;
	text-align: center;
}

.wid01 img{
	width:clamp(70%, 236px, 75%);
}

ul.list_seibun{
	margin: 2em 0 1em;
		display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-width: 760px;
}

ul.list_seibun li{

	width:calc(100%/4.3);
	margin-right: 10px;
}

ul.list_seibun li:last-child{
	margin-right: 0;
}


@media (min-width: 768px) and (max-width: 990px) {
  .wid01{
    /*width:calc(100%/2.5);*/
  }
}

@media only screen and (max-width: 767px)
{
	.con_01{
	display: block;
	}
	
	.wid01{
	/*width: 50%;*/
	margin: 20px auto
	}

	
	ul.list_seibun li{

	width:calc(100%/3.3);
	margin: 5px;
}

	.kome.txt_r{
		text-align: left !important;
	}
	
}


/* ポイント*/

.point{
 display: flex;
  justify-content: space-between;
  align-items: center;
 	margin-bottom: clamp(50px, 10%, 100px);
	gap:20px;
}

.pnt{
	color: #867800;
	font-size: 240%;
	text-align: center;
	line-height: 1;

}

.pnt::before{
	
	  content: "";
  display: block;
  width: 197px; /* 画像の幅 */
  height: 104px; /* 画像の高さ */
  background-image: url("../img/img_point.png");
  background-size: cover; /* 画像が要素を覆うようにサイズ調整 */
  background-position: center; /* 画像の位置を中央に */
}

/* 各ボックスの比率（PC） */
.pnt-box {
  flex: 0 0 15%; /* 番号部分：10% */
}

.text-box {
  flex: 0 0 45%; /* テキスト部分：50% */
}

.img-box {
  flex: 0 0 32%; /* 画像部分：35% */
}

/* 画像に100%指定 */
.img-box img {
  width: 100%;
  height: auto;
  display: block;
}




@media only screen and (max-width: 767px)
{
	
  .pnt{
	line-height: 0.1;
		margin-bottom: 20px;

}
	
  .point {
    flex-direction: column;
    align-items: flex-start;
  }
	
.pnt-box,
  .text-box,
  .img-box {
    flex: 0 0 100%;
    width: 100%;
  }

	
  .point img {
    width: 100%;
    height: auto;
  }

	
	
	.pnt::before{
  width: 155px; /* 画像の幅 */
  height: 83px; /* 画像の高さ */
}
	

	
}


/* プレミアム成分*/


.box26 {
    margin: 2em 0;
    padding: 2% 5% 5%;
    border: 1px solid #867800;
}


.box26 h3 {
    color: #867800;
	text-align: center;
}

.box26 h3 span {
    font-size: 200%;
}

.premium{
	display: flex;
	justify-content: space-around;
	text-align: center;
	gap: 20px;
	flex-wrap: wrap; /* スマホ対応用 */
}



.premium > div{
	flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.premium h4{
	color: #867800;
	margin: 7% auto 4%;
	font-size: 140%;
	line-height: 1.5;
}



@media only screen and (max-width: 767px)
{
	
	.box26 {
    padding: 10%;
}

	.box26 h3 {
font-size: 30px;
  }
	
.premium{
	display: block;
	
}
.premium > div {
  margin-top:15%;
}

	
}
/* ------------------------------------------------------------------------ */

/* クレンジングウォーターを選ぶ理由*/

.con_02{
		display: flex;
	justify-content: space-around;
	align-items: center;
	
}

.con_02 > p{
	width: calc(100% / 2);
	margin-right: 2em;
}

.con_02 > p:last-child{
	margin-right: 0;
	
}


.pnk{
	color: #df004f;
	font-weight: bold;
	font-size: 120%;
	
}

.graph{
	margin: 10% auto;
}

.graph img{
  width: 100%;  /* スマホより大きい幅にしてみる */
  height: auto;	
	
}


@media only screen and (max-width: 767px)
{
.con_02{
		display: block;
	}
	
	
	
	.con_02 > p{
		width: 100%;
		margin-bottom: 5%;
	}	
	

	

}


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

/* 黒木瞳さんプロデュース*/

.h02{
	color: #333;
	text-decoration: none;
	 background-image: linear-gradient(90deg, #e5d6a9, #f0eecb 50%, #e4d09d);
	padding: 0.5em;
	text-align: center;
	font-size: 200%;
	width: 100%;
}

.h03{
	color: #df7d91;
	margin-top:clamp(50px, 5%, 70px);
}

.con_03{
		display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 70px;
	flex-direction: row;
}

.con_03 > div{
	width: calc(100% / 2);
	margin-right: 2em;
}

.con_03 .h03{
	margin-top: 0;
}

.con_03 > div:last-child{
	margin-right: 0;
	
}


@media only screen and (max-width: 767px)
{
	
	h2.h02{
font-size: 160%;
}

	
.con_03 {
 flex-direction: column;
	}

	.smt10 {
		margin-top: 10%;
	}


.con_03 > div {
  width: 100%;
  margin-right: 0;

}
	.item1 {
  order: 1;
}
.item2 {
  order: 2;
}
	
}

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

/* エステ肌クレンジングウォーターの使い方*/


.used{
	background: #fff;
	padding: 7%;
	margin: 70px 0;
}



.used h2{
	color: #59a3b6;
	text-decoration: none;
		margin: 0 auto;
	font-size: clamp(30px, 2.5vw, 50px);
	line-height: 1.2;
}



.howto{
	display: flex;
align-items: center;
	letter-spacing: 5%;
	justify-content: center;
	margin-right: 5%;
	text-align: center;
	margin-bottom: 3%;
}

.howto_img{
width:clamp(100px, 43vw, 200px);
	margin-right: 20px;
}

.howto p{
   color: #59a3b6;
	font-family	: "リュウミン R-KL" , "游明朝", YuMincho, serif, Meiryo, MS PGothic, arial, sans-serif;
	font-weight: bold;
}




@media only screen and (max-width: 767px)
{
.howto{
	display: block;
	margin-right:0;
}
	
.howto_img{
	margin: 0 auto;
}
	
	
.howto p{
margin-bottom: 7%;
}

	
}


/* ステップ*/


p.step {
	color: #59a3b6;
	font-family	: "リュウミン R-KL" , "游明朝", YuMincho, serif, Meiryo, MS PGothic, arial, sans-serif;
	font-size: clamp(10%, 50px, 200%);
	font-weight: bold;	
	vertical-align: middle;
	line-height: 1.2;

}

p.step img{
width:clamp(10%, 104px, 100%);
}

p.h04{
	font-weight: bold;
	font-size:clamp(10%, 30px, 150%);
	font-family	: "リュウミン R-KL" , "游明朝", YuMincho, serif, Meiryo, MS PGothic, arial, sans-serif;
	margin-top: 10px;
}


.con_04{
		display: flex;
	align-items: center;
	border-top: 1px solid #dedede;
  padding: 7% 0;
	gap:30px;
}

.con_04 > div{
	width: calc(100% / 2);
}


.con_04 .h03{
	margin-top: 0;
}




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

	.con_04{
		display: block;
		 padding: 15% 0;

}
	
	.con_04 > div{
	width: calc(100% / 1);

}

		.mtsp{
	margin-top:30px;

}

			.mtsp img{
				width: 100%;

}
	
}


/* コットン*/

.cotton{
	background: #f7f5f5;
	padding: 5%;
	margin: 1em auto 0;
}

.cotton h3{
	text-align: center;
}

.con_05{
		display: flex;
	align-items: center;
    gap:30px;
}



.con_05 div:first-child{
	width: calc(100%/2.5);
}

.fnt01{
	font-size:80%;
	margin-top: 20px;
}


@media screen and (max-width: 959px) {
	.con_05{
		display: block;

}
	
	.con_05 div:first-child{
	width: 100%;
		margin-bottom: 10px;
}
	
	.cotton h3{
	margin-top:20px;
}
	
}




/* 価格*/

.c_price{
		display: flex;
	align-items: center;
	background: #fff;
	padding: 2em;
	margin-top: 2em;	
	justify-content: center;
}

	.c_price p{
font-family	: "リュウミン R-KL" , "游明朝", YuMincho, serif, Meiryo, MS PGothic, arial, sans-serif;
		text-align: center;
		margin: 10px auto;
}

.c_price img{
	
	 width: clamp(80%, 300px, 100%);
}


.price > p{
	font-size: 120%;
}

p.kakaku{
	font-size: clamp(44px, 6vw, 55px);
	font-weight: bold;
		color: #bf0100;
	line-height: 1.3;
}

p.kakaku span.zei{
	font-size: 30%;
}


  .price .button {
    border-color: #7b6e14;
  background: #7b6e14;
    color: #fff;
    font-size: clamp(16px, 1.09375vw, 21px);
z-index: 1;}


.price .button::after {
     border-color: #7b6e14;
color: #7b6e14 ;
background: #fff;
	z-index: -1;
}

.price a.button:hover {
  color: #7b6e14;
}



@media screen and (max-width: 959px) {
	.c_price{
		display: block;

}
}
@media only screen and (max-width: 767px)
{
	.c_price{
		
	padding: 1em;
	
}


	
	p.kakaku{

	font-weight: bold;
		color: #bf0100;
	line-height: 1.3;
}


}

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

/* Footer

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

footer {
	clear : both;
}