.handline_deco {
	display: inline-block;
	line-height: 1.4;
	text-align: center;
	padding-bottom: .75em;
	position: relative;
}
.handline_deco::before {
	background: url('../img/chura_herb_peeling/handline_deco.svg') no-repeat left top / contain;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		left: 0;
		bottom: 0;
	width: 100%;
	height: .75em;	
}
.balloon {
	background: #009b89;
	color: #fff;
	margin-bottom: min(3.5vw, 30px);
	padding: min(4vw, 40px) min(5vw, 30px);
	position: relative;
}
.balloon::before {
	border: solid #fff;
	border-width: 2px 0;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	pointer-events: none;
	width: calc(100% - min(2.5vw, 20px));
	height: calc(100% - min(2.5vw, 20px));
}
.balloon::after {
	background: #009b89;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: calc(100% - 1px);
		left: 0;
		right: 0;
	width: min(5.5vw, 54px);
	height: min(3vw, 26px);
}
@media screen and (max-width: 769px) {
	.balloon::before {
		border-width: 1px 0;
	}
}

.leaf_deco {
	display: inline-block;
	padding: 0 1.2em;
	position: relative;
}
.leaf_deco::before,
.leaf_deco::after {
	background: url('../img/chura_herb_peeling/head_deco.svg') no-repeat center left;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		bottom: 0;
	width: 1em;
	height: 100%;
}
.leaf_deco::before {
	left: 0;
}
.leaf_deco::after {
	right: 0;
	transform: scale(-1, 1);
}

.markList.checkList li {
	margin: 0;
	padding-left: 1.8em;
}
.markList.checkList li + li {
	margin-top: .5em;
}
.markList.checkList li::before,
.markList.checkList li::after {
	content: '';
	display: block !important;
	margin: auto;
	position: absolute;
}
.markList.checkList li::before {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 29.15 29.15"><path fill="%23b4b4b4" d="M29.16,29.15H0V0h18.19c.65,0,1.18.53,1.18,1.18s-.53,1.18-1.18,1.18H2.36v24.43h24.43V6.9c0-.65.53-1.18,1.18-1.18s1.18.53,1.18,1.18v22.25Z" /></svg>') no-repeat center / contain;
	left: 0;
	top: .2em;
	width: 1.3em;
	height: 1.3em;
}
.markList.checkList li::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22.28 25.83"><path fill="%23fd2f58" d="M7.46,25.83L.55,19.24c-.71-.68-.73-1.8-.06-2.51.68-.71,1.8-.73,2.51-.06l3.77,3.6L19.01.83C19.53,0,20.62-.25,21.45.27c.83.52,1.08,1.62.56,2.44L7.46,25.83Z" /></svg>') no-repeat center / contain;
	left: .3em;
	top: -.1em;
	width: 1.0em;
	height: 1.3em;
}

.dot_line {
	background-image : linear-gradient(to right, #000 6px, transparent 6px);
	background-size: 8px 1px;
	background-repeat: repeat-x; 
	background-position: left bottom;
	padding-bottom: .2em;
}
/*====================================================
////id mv
====================================================*/
#mv {
	background: #3086a6 url('../img/chura_herb_peeling/mv_bg.webp') no-repeat left center / cover;
	color: #fff;
	overflow: hidden;
	position: relative;
}
#mv .imgBox {
	background: url('../img/chura_herb_peeling/mv_photo-1.webp') no-repeat right bottom / contain;
	position: absolute;
		right: -4vw;
		bottom: -1px;
	width: 50%;
	height: 95%;
}
#mv .innerBox {
	max-width: 1540px;
}
#mv .headBox h1 {
	position: relative;
}
#mv .headBox h1::before {
	background: url('../img/chura_herb_peeling/mv_photo-2.webp') no-repeat center / contain;
	border-radius: 100%;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: -.3em;
		right: -6vw;
	width: 4em;
	height: 4em;
}
#mv h1 .handline_deco {
	font-size: .9em;
}
#mv h1 .handline_deco::before {
	filter: brightness(0) invert(10);
}
#mv h1 .sub {
	font-size: .55em;
	font-weight: 500;
}
#mv h1 .main {
	text-shadow: .06em .06em .06em rgba(4, 0, 0, .3);
}
#mv .pointBox ul {
	grid-gap: .7em;
	margin-top: 1em;
	padding-left: 1em;
	text-align: center;
}
#mv .pointBox ul li {
	border: solid 2px;
	padding: .8em .9em;
	position: relative;
}
#mv .pointBox ul li .deco {
	position: absolute;
		top: -.8em;
		left: -3em;
	width: 4em;
}
#mv .linkBox p {
	margin: 1em 0 .6em;
}
#mv .linkBtn {
	background: linear-gradient(to right, #00f2dd, #00b2c6);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
	#mv .imgBox {
		right: -33vw;
		width: 90%;
	}
	#mv h1 {
		font-size: min(8vw, 6rem);
	}
	#mv .pointBox {
		font-size: min(3.8vw, 3.4rem);
	}
	#mv .pointBox ul {
		margin-top: 2.5em;
		padding-left: 1.5em;
	}
	#mv .pointBox ul li .deco {
		top: -2em;
		left: -2em;
	}
	#mv .linkBox p {
		font-size: min(3.6vw, 3.0rem);
	}
	#mv .linkBtn {
		font-size: min(4.5vw, 4.2rem);
		width: min(100%, 800px);
			max-width: none;
	}
}

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

@media screen and (min-width:540px) and (max-width:769px) {
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
	#mv .box-inner {
		display: inline-block;
	}
	#mv h1 {
		font-size: min(6vw, 8.5rem);
	}
	#mv .pointBox {
		font-size: min(2.2vw, 3.4rem);
	}
	#mv .pointBox ul {
		grid-template-columns: repeat(3, minmax(100px, 1fr));
	}	
	#mv .linkBox p {
		font-size: min(2.3vw, 3.0rem);
	}
	#mv .linkBtn {
		font-size: min(3.2vw, 4.2rem);
		width: min(60vw, 800px);
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:960px) and (max-width:1400px) {
	#mv .imgBox {
		right: -20vw;
		width: 75%;
	}
}

@media screen and (min-width:1420px) {
}

@media screen and (min-width:1650px) {
	#mv .imgBox {
		right: 0;
	}
	#mv .headBvox h1::before {
		top: -.3em;
		right: calc(6vw * -1.6);
	}
}

/*====================================================
////id about
====================================================*/
#about {
	margin: auto;
	max-width: 1000px;
}
#about .deco-1 {
	background: url('../img/chura_herb_peeling/about_img-1.webp') no-repeat top left / contain;
	margin: auto;
	position: absolute;
		top: 0;
		left: 0;
}
#about .deco-2 {
	background: url('../img/chura_herb_peeling/about_img-2.webp') no-repeat bottom right / contain;
	margin: auto;
	position: absolute;
		bottom: 0;
		right: .5vw;
    display: none;
}
#about .deco-3 {
	background: url('../img/chura_herb_peeling/about_img-3.webp') no-repeat bottom right / contain;
	margin: auto;
	position: absolute;
		bottom: 0;
		right: .5vw;
}
#about .deco_en {
	font-size: min(3.5vw, 4.6rem);
	position: absolute;
		top: 0;
		left: -1em;
	transform: rotate(-8deg);
}
#about .iconBox {
	display: flex;
		justify-content: flex-end;
	margin-bottom: 1em;
}
#about .iconBox img {
	height: min(10vw, 75px);
}
#about h2 {
    font-weight: 500;
	line-height: 1.4;
}
#about h2 .sub {
	font-size: .6em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 1280px) {
	#about .innerBox {
		padding-bottom: min(16vw, 110px);
	}
	#about .deco-1 {
		top: -20px;
		width: 40%;
		height: min(30vw, 190px);
	}
	#about .deco-2 {
		width: calc(50% - 600px);
			min-width: 180px;
		height: 110px;
	}	
	#about .deco-3 {
		width: min(28.4vw, 300px);
		height: 110px;
	}
	#about .deco_en {
		display: none;
	}
	#about h2 {
		font-size: min(6.7vw, 4.5rem);
	}
}

@media screen and (max-width: 769px) {
	#about .deco-1 {
		top: -40px;
		width: 40%;
		height: min(30vw, 160px);
	}
}

@media screen and (min-width:540px) and (max-width:769px) {
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#about .innerBox {
		display: flex;
			justify-content: flex-end;
	}
	#about h2 {
		font-size: min(5vw, 6.4rem);
	}
	#about .txtBox {
		font-size: 2.0rem;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
	#about {
		margin: auto;
		max-width: 2000px;
	}
	#about .deco-1 {
		top: 10px;
		width: calc(100% - 930px - (50% - 600px));
		height: 70%;
	}
	#about .deco-2 {
		width: calc(50% - 600px);
			min-width: 180px;
		height: 40%;
	}	
	#about .deco-3 {
        bottom: -40px;
		width: min(20vw, 400px);
		height: 40%;
	}
}

/*====================================================
////id truble
====================================================*/
#truble .innerBox {
	padding: 10px 0;
}
#truble .balloon {
	background: #386887;
}
#truble .balloon::before {
	border-width: 2px;
}
#truble .balloon::after {
	background: #386887;
}
#truble h2 {
    font-weight: 500;
}
#truble .itemBox {
	display: grid;
		grid-gap: min(4vw, 30px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
	#truble h2 {
		font-size: min(5.5vw, 3.6rem);
	}
	#truble .itemBox {
		font-size: min(3.6vw, 2.2rem);
		grid-template-columns: repeat(3, 1fr);
		margin: auto;
		max-width: 600px;
	}
}

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

@media screen and (min-width:540px) and (max-width:769px) {
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
	#truble h2 {
		font-size: min(4vw, 4.6rem);
	}
	#truble .itemBox {
		font-size: min(2.3vw, 2.6rem);
		grid-template-columns: repeat(6, 1fr);
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id feature
====================================================*/
#feature h2 .sub {
	font-size: .75em;
	font-weight: 500;
	margin-bottom: .15em;
}
#feature h2 .handline_deco {
	letter-spacing: .02em;
}
#feature h2 .f-hand_en {
	display: inline-block;
	font-size: 1.75em;
	line-height: 1;
	margin-bottom: -.3em;
}
#feature .wrapper {
	background: url('../img/chura_herb_peeling/feature_bg.webp') repeat-y top;
	background-size: 100% auto;
}
#feature .imgBox {
	display: flex;
	grid-gap: min(2.5vw, 50px) min(4vw, 50px);
}
#feature .imgBox .img-1 img {
	border-radius: 100%;
}
#feature .itemBox {
	grid-gap: 40px;
}
#feature .item {
	position: relative;
}
#feature .item .noBox {
	background: linear-gradient(to bottom, #00cfe2, #0086c6);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1.2;
	padding: .5em .5em .3em .3em;
	position: absolute;
		top: -20px;
		left: -20px;
	text-align: center;
	width: 3.6em;
	z-index: 10;
}
#feature .item .noBox .no{
	font-size: 2.5em;
}
#feature .item .txtBox {
	border: solid 1px #333;
	background: #fff;
	clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 1em, 100% 100%, 1em 100%, 0 calc(100% - 1em));
	min-height: 8em;
	padding: 1em 1em 1em 70px;
	position: relative;
}
#feature .item .txtBox::before,
#feature .item .txtBox::after {
	border-top: solid 1px #333;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
	width: 2.5em;
	height: 0;
}
#feature .item .txtBox::before {
	top: calc(1em - 1.5px);
	right: 0;
	transform: rotate(45deg);
	transform-origin: right;
}
#feature .item .txtBox::after {
	bottom: calc(1em - 1.5px);
	left: 0;
	transform: rotate(45deg);
	transform-origin: left;
}
#feature .item dt {
	font-size: 1.5em;
	line-height: 1.4;
	margin-bottom: .5em;
}
#feature .video-wrapper {
	margin: auto;
	max-width: 900px;
}
#feature video {
	max-width: 100%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
	#feature h2 {
		font-size: min(7vw, 6.0rem);
	}
	#feature > .innerBox {
		padding-top: 0;
	}
	#feature .imgBox {
		align-items: flex-end;
		margin: 0 auto min(6vw, 30px);
		max-width: 600px;
		padding-left: 3vw;
	}
	#feature .imgBox .img-1 {
		width: 53%;
		margin-top: -15px;
	}
	#feature .imgBox .img-2 {
		flex: 1;
	}
	#feature .itemBox {
		font-size: min(2.6vw, 2.0rem);
		margin: auto;
		max-width: 620px;
	}
}

@media screen and (max-width:769px) {
	#feature .itemBox {
		font-size: 1em;
		grid-gap: 6vw;
	}
	#feature .item .noBox {
		font-size: 2.8vw;
		top: -3vw;
		left: -3vw;
	}
	#feature .item .txtBox {
		padding-left: 10vw;
	}
	#feature .item dt {
		font-size: min(4.2vw, 2.5rem);
	}

}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
	#feature h2 {
		font-size: min(5.5vw, 6.0rem);
	}
	#feature .wrapBox {
		display: flex;
			flex-direction: row-reverse;
			grid-gap: min(3vw, 48px);
	}
	#feature .imgBox {
		flex: 1;
		flex-direction: column;
		justify-content: center;
	}
	#feature .itemBox {
		font-size: min(1.9vw, 2.3rem);
		width: min(65%, 720px);
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id cmn_cta
====================================================*/
.cmn_cta {
	background: url('../img/chura_herb_peeling/cmn_cta_bg.webp') no-repeat center / cover;
	color: #fff;
}
.cmn_cta .squareMark {
	margin-left: .3em;
}
.cmn_cta .txtBox figure {
	margin: .7em auto;
	width: min(90%, 600px);
}
.cmn_cta .linkBox p {
	margin: 1em auto .5em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	.cmn_cta .txtBox {
		font-size: min(4.5vw, 3.8rem);
	}
	.cmn_cta .txtBox p.yellow {
		font-size: 1.15em;
		line-height: 1.6;
	}
	.cmn_cta .linkBox p {
		font-size: min(4vw, 3.0rem);
	}
}

@media screen and (min-width:540px) and (max-width:769px) {
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	.cmn_cta .txtBox {
		font-size: min(2.8vw, 3.8rem);
	}
	.cmn_cta .linkBox p {
		font-size: min(2.4vw, 3.0rem);
	}	
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
	.cmn_cta .txtBox {
		font-size: min(3.2vw, 3.8rem);
	}
	.cmn_cta .linkBox p {
		font-size: min(2.8vw, 3.0rem);
	}
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id difference
====================================================*/
#difference {
	background: #f0ffeb;
	overflow: hidden;
	position: relative;
}
#difference::before {
	background: #fff;
	content: '';
	display: block;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: min(16vw, 140px);
}
#difference .headBox h2 {
	font-size: min(4.5vw, 5.0rem);
	line-height: 1.4;
}
#difference .headBox p {
	font-size: min(2.8vw, 2.8rem);
	margin-top: .5em;
}

#difference .itemBox {
	grid-gap: min(7vw, 40px) min(3vw, 30px);
}
#difference .item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	grid-row-gap: 1em;
	margin-top: 30px;
	padding: min(2.5vw, 35px);
	position: relative;
}
#difference .item::before {
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: -40px;
		left: 0;
		right: 0;
	width: 110px;
	height: calc(40px + min(1.2vw, 25px));
}
#difference .item h3 {
	display: flex;
		align-items: center;
		justify-content: center;
	/* margin: .3em 0;
	height: min(3.5vw, 4.5rem);
	text-align: center; */
}
#difference .item dl {
	margin-top: 1.5em;
	position: relative;
	z-index: 10;
}
#difference .item dt {
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: .8em;
	position: relative;
}
#difference .item dt::before {
	clip-path: polygon(.5em 0, calc(100% - .5em) 0, 100% 50%, calc(100% - .5em) 100%, .5em 100%, 0 50%);
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#difference .item .merit dt::before {
	background: #fd9398;
}
#difference .item .demerit dt::before {
	background: #9ccdf2;
}
#difference .item dt::after {
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: -1em;
		right: calc(50% + 3em);
		bottom: -1em;
}
#difference .item .merit dt::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 77 77"><path fill="%23fd2f58" d="M38.5,77C17.27,77,0,59.73,0,38.5S17.27,0,38.5,0s38.5,17.27,38.5,38.5-17.27,38.5-38.5,38.5ZM38.5,7c-17.37,0-31.5,14.13-31.5,31.5s14.13,31.5,31.5,31.5,31.5-14.13,31.5-31.5S55.87,7,38.5,7Z" /></svg>') no-repeat center / contain;
	width: 2.7em;
	height: 2.7em;
}
#difference .item .demerit dt::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 62 62"><path fill="%2383afdb" d="M35.95,31l26.05,26.05-4.95,4.95-26.05-26.05L4.95,62l-4.95-4.95,26.05-26.05L0,4.95,4.95,0l26.05,26.05L57.05,0l4.95,4.95-26.05,26.05Z" /></svg>') no-repeat center / contain;
	width: 2.2em;
	height: 2.2em;
}
#difference .item .demerit .markList.checkList li::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22.28 25.83"><path fill="%2383afdb" d="M7.46,25.83L.55,19.24c-.71-.68-.73-1.8-.06-2.51.68-.71,1.8-.73,2.51-.06l3.77,3.6L19.01.83C19.53,0,20.62-.25,21.45.27c.83.52,1.08,1.62.56,2.44L7.46,25.83Z" /></svg>') no-repeat center / contain;
}
#difference .item dd {
	padding: 0 .5em;
}

#difference .item-other {
	background: #c8c8c8;
}
#difference .item-other::before {
	background: url('../img/chura_herb_peeling/difference_icon-1.svg') no-repeat center / contain;
}
#difference .item-other h3 {
	font-size: min(2.8vw, 3.6rem);
    font-weight: 500;
}
#difference .item-other .merit dt::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 77 77"><path fill="%23ed858a" d="M38.5,77C17.27,77,0,59.73,0,38.5S17.27,0,38.5,0s38.5,17.27,38.5,38.5-17.27,38.5-38.5,38.5ZM38.5,7c-17.37,0-31.5,14.13-31.5,31.5s14.13,31.5,31.5,31.5,31.5-14.13,31.5-31.5S55.87,7,38.5,7Z" /></svg>') no-repeat center / contain;
}
#difference .item-other .markList.checkList li::before {
	filter: brightness(10);
}
#difference .item-other .merit .markList.checkList li::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22.28 25.83"><path fill="%23ed858a" d="M7.46,25.83L.55,19.24c-.71-.68-.73-1.8-.06-2.51.68-.71,1.8-.73,2.51-.06l3.77,3.6L19.01.83C19.53,0,20.62-.25,21.45.27c.83.52,1.08,1.62.56,2.44L7.46,25.83Z" /></svg>') no-repeat center / contain;
}

#difference .item-chura {
	background: #fff;
	border: solid 8px #ffb200;
    grid-template-rows: unset;
	box-shadow: .4em .4em .4em rgba(0, 0, 0, .25);
}
#difference .item-chura::before {
	background: url('../img/chura_herb_peeling/difference_icon-2.svg') no-repeat center / contain;
}
#difference .item-chura .deco_img .coverImg {
    padding-top: 40%;
}
#difference .item-chura-text {
    color: var(--pink);
    font-weight: 700;
    line-height: 1.7;
    margin-top: 1.5em;
    text-align: center;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
	#difference .itemBox {
		margin: 40px auto 0;
		place-items: center;
		width: min(95%, 600px);
	}
	#difference .item {
		padding: min(4vw, 35px);
	}
	#difference .item .coverImg {
		padding-top: min(34vw, 260px);
	}

	#difference .item-other {
		width: 88%;
	}
	#difference .item-other h3 {
		font-size: min(4.8vw, 3.6rem);
	}
	
	#difference .item-chura {
        border-width: 4px;
		padding-bottom: min(21vw, 160px);
	}
	#difference .item-chura-img .coverImg {
        padding-top: 54%;
    }
	#difference .item-chura h3 {
		font-size: min(5.6vw, 4.2rem);
	}

    #difference .item-chura .deco_img {
        margin: auto;
        position: absolute;
            right: -80px;
            bottom: -50px;
        width: 80%;
    }
    #difference .item-chura-text {
        font-size: min(4vw, 3.0rem);
    }

}
@media screen and (min-width:769px) and (max-width:960px) {
	#difference .item {
		font-size: min(2.2vw, 2.1rem);
	}
}

@media screen and (min-width:540px) and (max-width:769px) {
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
	#difference .itemBox {
		grid-template-columns: 1fr 1fr;
		margin: 60px auto 0;
		width: min(95%, 1100px);
	}
	#difference .item {
		font-size: min(1.8vw, 2.1rem);
	}
	#difference .item.item-chura {
        grid-column: span 2;
    }
	#difference .item .coverImg {
		padding-top: min(25vw, 260px);
	}

    #difference .item-chura {
        display: grid;
            grid-gap: 0 min(5vw, 68px);
            grid-template-columns: 1fr 1fr;            
    }
    #difference .item-chura::before {
        top: 5px;
        height: 40px;
    }
    #difference .item-chura-head-wrapper {
        display: flex;
            justify-content: center;
        grid-column: 1 / 3;
        grid-row: 1;
    }
    #difference .item-chura h3 {
        font-size: min(4vw, 4.6rem);
        margin-top: calc((min(2.5vw, 35px) - 20px) * -1);
        margin-bottom: .3em;
        padding: .6em 1.5em .3em;
        position: relative;
    }
    #difference .item-chura h3::before,
    #difference .item-chura h3::after {
        background: url('../img/chura_herb_peeling/difference-chura-head.svg') no-repeat bottom / contain;
        content: '';
        display: block;
        margin: auto;
        position: absolute;
            bottom: 0;
        width: .95em;
        height: 100%;
    }
    #difference .item-chura h3::before {
        left: 0;
    }
    #difference .item-chura h3::after {
        right: 0;
        transform: scale(-1, 1);
    }
    #difference .item-chura .coverImg {
        padding-top: 75.5%;
    }
    #difference .item-chura .deco_img figure {
        margin: 45px -6% 0 -4%;
        width: 110%;
    }
    #difference .item-chura-text {
        font-size: min(3vw, 3.6rem);
        grid-column: 1 / 3;
    }
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id about_heab
====================================================*/
#about_heab {
	background: #f0ffeb;
}
#about_heab > .innerBox {
	max-width: 1380px;
}
#about_heab h2 {
	line-height: 1.2;
}
#about_heab h2 .sub {
	display: inline-block;
	font-size: .55em;
	line-height: 1.2;
	vertical-align: .5em;
}
#about_heab h2 .main {
	line-height: 1.2;
	margin-top: -.2em;
	margin-left: -.3em;
}
#about_heab h2 .main .small {
	font-size: .75em;
}
#about_heab .wrapBox {
	background: #fff;
	border: solid min(1vw, 10px) #e8e4ce;
	padding: min(6vw, 80px) min(3vw, 60px);
}
#about_heab .main_itemBox .item dt {
	font-size: 1.5em;
	line-height: 1.4;
}
#about_heab .main_itemBox .item .coverImg {
	padding-top: 75.8%;
}
#about_heab .sub_headBox h3 .handline_deco {
	margin-right: .15em;
	margin-bottom: -.3em;
}
#about_heab .sub_headBox h3 .f-hand_en {
	display: inline-block;
	font-size: 1.75em;
	line-height: 1;
	margin-right: .15em;
	margin-bottom: -.2em;
}
#about_heab .sub_itemBox {
	grid-gap: .5em min(2vw, 24px);
	line-height: 1.4;
}
#about_heab .sub_itemBox .item {
	grid-template-rows: subgrid;
	grid-row: span 2;
	grid-gap: .2em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
	#about_heab .headBox h2 {
		font-size: min(7vw, 80px);
	}
	#about_heab .headBox p {
		font-size: min(3.6vw, 2.2rem);
	}
	#about_heab .main_itemBox {
		font-size: min(1.7vw, 2.2rem);
		grid-gap: 1em 0;
	}
	#about_heab .main_itemBox .item {
		grid-gap: 1em;
		grid-template-columns: 45% 1fr;
		padding: 0 min(2vw, 30px);
	}
	#about_heab .txtBox {
		font-size: min(3.3vw, 2.0rem);
	}
	#about_heab .sub_headBox h3 {
		font-size: min(7vw, 4rem);
	}

	#about_heab .sub_itemBox {
		grid-template-columns: repeat(3, 1fr);
		margin: auto;
		max-width: 550px;
	}
}

@media screen and (min-width:769px) and (max-width:960px) {
	#about_heab .main_itemBox {
		font-size: min(1.8vw, 2.2rem);
		grid-template-columns: 1fr 1fr;
		margin: 0 -2vw;
		width: calc(100% + 4vw);
	}
}

@media screen and (max-width: 769px) {
	#about_heab .main_itemBox {
		font-size: min(3.6vw, 2.0rem);
		margin: auto;
		width: min(100%, 500px);
	}
	#about_heab .main_itemBox .item {
		padding: 0 min(3vw, 30px);
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
	#about_heab .headBox h2 {
		font-size: min(6vw, 80px);
	}
	#about_heab .headBox p {
		font-size: min(2.2vw, 2.8rem);
	}
	#about_heab .main_itemBox {
		font-size: min(1.4vw, 2.2rem);
		grid-template-columns: repeat(4, 1fr);
	}
	#about_heab .main_itemBox .item {
		border-right: solid 1px var(--green);
		grid-template-rows: subgrid;
		grid-row: span 2;
		padding: 0 min(2vw, 30px);
	}
	#about_heab .main_itemBox .item:last-child {
		border-right: none;
	}
	#about_heab .main_itemBox .item dt {
		margin: .3em 0 .1em;
		text-align: center;
	}
	#about_heab .txtBox {
		font-size: min(1.6vw, 2.5rem);
	}
	#about_heab .sub_headBox h3 {
		font-size: min(4.0vw, 6.0rem);
	}
	#about_heab .sub_itemBox {
		grid-template-columns: repeat(5, 1fr);
	}

}

@media screen and (min-width:1280px) {
}

/*====================================================
////id solution
====================================================*/
#solution::before {
	background: #f0ffeb;
	content: '';
	display: block;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: min(16vw, 140px);
}
#solution .headBox h2 {
	font-size: min(4.5vw, 5.0rem);
	line-height: 1.4;
}
#solution .headBox p {
	font-size: min(2.8vw, 2.8rem);
	margin-top: .5em;
}

#solution .wrapper {
	grid-gap: min(8vw, 60px);
	margin: auto;
	width: min(92%, 1100px);
}
#solution .pointBox {
	margin-top: 60px;
}
#solution .pointBox .item {
	padding: 0 .6em 1em;
	position: relative;
}
#solution .pointBox .item::before {
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: -1px;
	width: 1em;
	height: 1em;
}
#solution .pointBox .item .noBox {
	font-size: min(8vw, 10rem);
	line-height: 1;
	letter-spacing: .05em;
	margin: -.3em 0 -.3em;
}
#solution .pointBox .item dt {
	display: flex;
		align-items: center;
		justify-content: center;
	font-size: min(3vw, 4.0rem);
	line-height: 1.4;
	min-height: 4em;
}
#solution .pointBox .item ul {
	grid-gap: min(1.5vw, 5px);
}
#solution .pointBox .item li {
	color: #fff;
	display: flex;
		align-items: center;
		justify-content: center;
	line-height: 1.2;
	position: relative;
	width: 5em;
	height: 5em;
}

#solution .pointBox .item:nth-child(1) {
	background: #d4f1fa;
}
#solution .pointBox .item:nth-child(1)::before {
	left: -1px;
}
#solution .pointBox .item:nth-child(1) .noBox {
	color: #72d1ef;
}
#solution .pointBox .item:nth-child(1) li {
	background: url('../img/chura_herb_peeling/solution_bg-1.webp') no-repeat center / contain;
	text-shadow: .05em .05em .13em rgba(10, 175, 188, .8);
}

#solution .pointBox .item:nth-child(2) {
	background: #d3f0e4;
}
#solution .pointBox .item:nth-child(2)::before {
	right: -1px;
	transform: scale(-1, 1);
}
#solution .pointBox .item:nth-child(2) .noBox {
	color: #6ecca5;
}
#solution .pointBox .item:nth-child(2) li {
	background: url('../img/chura_herb_peeling/solution_bg-2.webp') no-repeat center / contain;
	text-shadow: .05em .05em .13em rgba(5, 114, 54, .8);
}

#solution .detailBox {
	grid-gap: min(6vw, 50px);
}
#solution .detailBox .item .wrapBox {
	grid-gap: .4em;
}
#solution .detailBox .item .coverImg {
	padding-top: 65.8%;
}
#solution .detailBox dt {
	font-size: 1.4em;
}

#solution .about_effect {
	max-width: 1380px;
	padding-top: min(8vw, 60px);
}
#solution .about_effect .whiteBox {
	background: #fff;
	border: solid min(1vw, 10px) #e8e4ce;
	font-size: min(1.8vw, 2.8rem);
	padding: min(6vw, 40px) min(3vw, 70px);
}
#solution .about_effect .wrapBox {
}
#solution .about_effect .imgBox {
	display: flex;
}
#solution .about_effect .img {
	display: flex;
		align-items: center;
	flex: 1;
	position: relative;
}
.triangle_arrow {
	position: relative;
	width: 2em;
	height: 2em;
}
#solution .about_effect .triangle_arrow {
	width: min(3vw, 70px);
	height: 100%;
}
.triangle_arrow::before {
	background: #888;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	width: .85em;
	height: 1.7em;
}
#solution .about_effect .txtBox {
	background: #ffffb6;
	padding: 1em;
}
#solution .about_effect dt {
	font-size: 1.3em;
}
#solution .about_effect .markList.checkList {
	grid-gap: .5em .2em;
	grid-template-columns: auto auto;
}
#solution .about_effect .markList.checkList li {
	margin: 0;
}
#solution .about_effect .markList.checkList li.span-2 {
	grid-column: 1 / 3;
}
#solution .about_effect .markList.checkList li::before {
	filter: brightness(.5);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#solution .headBox h2 {
		font-size: min(5.5vw, 5.0rem);
	}	
	#solution .pointBox {
		grid-gap: 50px;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}
	#solution .pointBox .item {
		font-size: min(6.0vw, 3.5rem);
	}
	#solution .pointBox .item:nth-child(1)::before {
		background: #eef9fd;
		top: 0;
		left: 0;
	}
	#solution .pointBox .item:nth-child(2)::before {
		background: #e8f8f2;
		top: 0;
		right: 0;
	}
	#solution .pointBox .item::after {
		clip-path: polygon(100% 0, 100% 100%, 0 100%);
		content: '';
		display: block;
		margin: auto;
		position: absolute;
			bottom: 0;
		width: 1em;
		height: 1em;
	}
	#solution .pointBox .item:nth-child(1)::after {
		background: #eef9fd;
		right: 0;
	}
	#solution .pointBox .item:nth-child(2)::after {
		background: #e8f8f2;
		left: 0;
		transform: scale(-1, 1);
	}
	#solution .pointBox .item .noBox {
		font-size: min(15vw, 10rem);
	}	
	#solution .pointBox .item dt {
		font-size: min(6vw, 3.0rem);
	}
	#solution .pointBox .item ul {
		margin: auto;
		max-width: 11em;
	}

	#solution .detailBox .item {
		font-size: min(3.4vw, 2.0rem);
	}
	#solution .detailBox h3 {
		font-size: min(5vw, 3.4rem);
	}
	#solution .detailBox .item .img {
		margin: auto;
		width: 80%;
	}
	#solution .detailBox .item dl {
		display: inline-block;
	}

	#solution .about_effect .whiteBox {
		font-size: min(3.6vw, 2.2rem);
	}
	#solution .about_effect h3 {
		font-size: min(4.2vw, 4.4rem);
		line-height: 1.3;
		padding: 0 2em;
	}
	#solution .about_effect h3::before,
	#solution .about_effect h3::after {
		width: 2em;
	}
	#solution .about_effect .wrapBox {
		grid-gap: 1em;
	}
	#solution .about_effect .imgBox .triangle_arrow {
		width: 2em;
	}
}

@media screen and (min-width:540px) and (max-width:769px) {
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#solution .pointBox {
		grid-template-columns: 1fr 1fr;
	}
	#solution .pointBox .item {
		font-size: min(3vw, 4.7rem);
	}

	#solution .detailBox .item {
		font-size: min(1.8vw, 2.4rem);
	}
	#solution .detailBox h3 {
		font-size: min(3.2vw, 3.8rem);
	}
	#solution .detailBox .item .wrapBox {
		grid-template-columns: 1fr 40%;
	}
	#solution .detailBox .item .img {
		grid-column: 2;
		grid-row: 1;
	}

	#solution .about_effect h3 {
		font-size: min(2.7vw, 4.4rem);
	}
	#solution .about_effect .wrapBox {
		grid-template-columns: 1fr 19em;
	}
	#solution .about_effect .imgBox {
		padding: 1em 1em 1em 0;
	}
	#solution .about_effect .img {
		position: relative;
	}
	#solution .about_effect .img.after {
		margin-left: 1em;
	}
	#solution .about_effect .img.after::before {
		background: #ffffb6;
		content: '';
		display: block;
		margin: auto;
		position: absolute;
			top: -1em;
			left: -1em;
		width: calc(100% + 2em);
		height: calc(100% + 2em);
	}
	#solution .about_effect .txtBox {
		padding-left: 0;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
	#solution .detailBox .item {
		font-size: min(2vw, 2.4rem);
	}
	#solution .detailBox .item .wrapBox {
		grid-template-columns: 1fr 32%;
	}
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id micro_coral
====================================================*/
#micro_coral .mainBox h2 {
	line-height: 1.4;
}
#micro_coral .mainBox h2 .sub {
	font-size: .56em;
}
#micro_coral .mainBox h2 .main {
	text-shadow: .04em .04em .075em rgba(51, 51, 51, .8);
}
#micro_coral .mainBox .wrapBox {
	margin-top: min(6vw, 60px);
}
#micro_coral .mainBox .item {
	background: #fff;
	grid-gap: 1em;
	line-height: 1.4;
	padding: 1em;
}
#micro_coral .mainBox .triangle_arrow {
	width: min(5vw, 100px);
	height: 100%;
}
#micro_coral .mainBox .triangle_arrow::before {
	background: #fff;
}
#micro_coral .copyBox .wrapBox {
	color: #ffff00;
	position: relative;
	z-index: 5;
}
#micro_coral .deco_text {
	font-size: 1.8em;
	line-height: 1;
	position: absolute;
		bottom: calc(100% - .6em);
		left: 0;
	transform: rotate(-8deg);
}
#micro_coral .dot_line {
	background-image : linear-gradient(to right, #fff 6px, transparent 6px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#micro_coral .mainBox {
		background: url('../img/chura_herb_peeling/micro_coral_bg.webp') no-repeat center / cover;
	}	
	#micro_coral .mainBox h2 {
		font-size: min(6.5vw, 8rem);
	}
	#micro_coral .mainBox .txtBox {
		font-size: min(3.8vw, 2.2rem);
	}
	#micro_coral .mainBox .wrapBox {
		margin-left: auto;
		margin-right: auto;
		width: min(90%, 500px);
	}
	#micro_coral .mainBox .item .txt {
		font-size: min(3.6vw, 2.0rem);
	}
	#micro_coral .mainBox .triangle_arrow {
		width: 100%;
		height: 2em;
	}
	#micro_coral .mainBox .triangle_arrow::before {
		transform: rotate(90deg);
	}
	#micro_coral .copyBox {
		background: #00385c;
		font-size: min(4.2vw, 2.6rem);
	}
	#micro_coral .copyBox .wrapBox {
		padding: .5em 2em;
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#micro_coral {
		background: url('../img/chura_herb_peeling/micro_coral_bg.webp') no-repeat center / cover;
	}
	#micro_coral .mainBox h2 {
		font-size: min(6vw, 8rem);
	}
	#micro_coral .mainBox .txtBox {
		font-size: min(2.2vw, 2.8rem);
	}
	#micro_coral .mainBox .wrapBox {
		grid-template-columns: 1fr auto 1fr;
	}	
	#micro_coral .mainBox .item .txt {
		font-size: min(2.0vw, 3.0rem);
	}
	#micro_coral .copyBox {
		font-size: min(3.2vw, 4.2rem);
		position: relative;
	}
	#micro_coral .copyBox::before {
		background: #00385c;
		content: '';
		display: block;
		margin: auto;
		mix-blend-mode: multiply;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id method
====================================================*/
#method {
	background: #f0ffeb;
	overflow: hidden;
	position: relative;
}
#method::before {
	background: #fff;
	content: '';
	display: block;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: min(16vw, 140px);
}

#method .headBox h2 {
	font-size: min(4.0vw, 5.0rem);
	line-height: 1.4;
}
#method .headBox p {
	font-size: min(2.8vw, 2.8rem);
	margin-top: .5em;
}

#method .innerBox:nth-child(2) {
	max-width: 1380px;
	padding-top: min(5vw, 40px);
}
#method .whiteBox {
	background: #fff;
	border: solid min(1vw, 10px) #e8e4ce;
	font-size: min(1.8vw, 2.8rem);
	padding: min(6vw, 40px) min(3vw, 70px);
	position: relative;
}
#method .whiteBox::before {
	background: url('../img/chura_herb_peeling/pores_bg.webp') no-repeat top right / contain;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		right: 0;
	width: 50%;
	height: 80%;
}
#method .whiteBox .wrapBox figure {
	margin: 1em auto;
	width: 50%;
}
#method .whiteBox .sub_headBox h4 {
	background: linear-gradient(to bottom, #00cfe2, #0086c6);
	color: #fff;
	clip-path: polygon(.7em 0, calc(100% - .7em) 0, 100% 50%, calc(100% - .7em) 100%, .7em 100%, 0 50%);
	padding: .3em 1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#method .whiteBox::before {
		width: 80%;
	}
	#method .headBox h2 {
		font-size: min(5.5vw, 5.0rem);
	}
	#method .whiteBox {
		font-size: min(3.6vw, 2.4rem);
	}
	#method .whiteBox .wrapBox h3 {
		font-size: min(4.4vw, 3.2rem);
	}
	#method .whiteBox .wrapBox .img-1 {
		margin: 1em auto;
		width: 80%;
	}
	#method .whiteBox .wrapBox .img-2 {
		margin: 1em auto;
		width: 90%;
	}
	#method .whiteBox .sub_headBox h4 {
		width: min(100%, 500px);
	}
	#method .whiteBox .imgBox {
		grid-gap: min(4vw, 20px);
		margin: auto;
		width: min(80%, 350px);
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#method .whiteBox .wrapBox {
		width: 70%;
	}
	#method .whiteBox h3 {
		font-size: min(3vw, 4.2rem);
	}
	#method .whiteBox .txtBox p {
		font-size: min(2.0vw, 3.1rem);
	}
	#method .whiteBox .listBox {
		margin-top: 2em;
	}
	#method .whiteBox .sub_headBox h4 {
		font-size: min(2.4vw, 3.5rem);
		min-width: 600px;
	}
	#method .whiteBox .imgBox {
		grid-gap: min(8vw, 100px);
		grid-template-columns: 1fr 1fr;
		margin: auto;
		width: min(90%, 1000px);
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id result
====================================================*/
#result {
	background: #f0ffeb;
}
#result h2 {
	line-height: 1.2;
}
#result h2 .sub {
	display: inline-block;
	font-size: .55em;
	line-height: 1.2;
	vertical-align: .5em;
}
#result .itemBox {
	grid-gap: min(6vw, 60px);
}
#result .item {
	border: solid 1px #e0e0e0;
	padding: min(5vw, 50px) min(4vw, 50px);
}
#result .item .txtBox {
	grid-gap: min(3vw, 50px);
	grid-template-columns: auto 1fr;
}
#result .item .txtBox .detailBox ul {
	grid-gap: .4em;
}
#result .item .txtBox .detailBox ul li {
	margin: 0;
}
#result .item .txtBox .detailBox .title {
	display: inline-block;
	width: 6.5em;
}
#result .item .noBox {
	color: #72d1ef;
	font-size: min(5vw, 5.8rem);
	line-height: 1;
	transform: rotate(-8deg);
}
#result .item .noBox > span {
	display: block;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 142.13 16.47"><path fill="%2372d1ef" d="M55.53,1.58c.07.62-.21.89-.67,1.21-.15-.65.24-.91.67-1.21ZM54.85,1c-.6-.26-1.02-.39-1.59-.07.53.34.96.32,1.59.07ZM54.45,2.05c.1-.03.22-.24.19-.3-.18-.28-.49-.2-.84-.17.14.33.27.59.65.47ZM50.92.82c.23-.04.47-.08.7-.12,0,0,.01,0,.01,0,.02,0,.04,0,.06-.01-.08-.06-.16-.11-.24-.17-.25-.02-.49-.04-.7.11h0c-.27-.02-.54-.04-.82-.05.19.55.61.3.98.24ZM45.06,1.33c-.28-.18-.55-.2-.81,0h0v.21c.27-.03.57-.02.81-.21ZM51.65.72s0,0-.01-.01c0,0-.01,0-.01,0,0,0,.02,0,.03.01ZM97.6,7.98c-2.1.6-4.22.46-6.32.04-.53-.11-.95-.59-1.47-.83-1.73-.8-3.45-.11-5.13.13-2.34.34-4.62.94-6.95,1.35-1.17.21-2.37.19-3.35-.63-.52-.44-.62-1.09-1.14-1.57-.64-.59-1.29-.97-2.17-1.01-1.47-.07-2.91.09-4.35.4-3.82.81-7.59,1.77-11.3,2.91-1.29.4-2.54.81-3.93.63-1.09-.14-1.33-.62-.97-1.59.31-.85,1.16-1.3,1.65-2.01.44-.64.92-1.25,1.22-1.96.15-.42.67-.74.45-1.27-.4-.43-.73-.94-1.39-1.1.32-.72-.02-1.04-1.01-.96-.25-.02-.49-.04-.7.11h0c-.27-.02-.54-.04-.82-.05-.37.1-.73.19-1.1.29-.66.17.06.36,0,.54-1.31.17-2.61.42-3.95.44-.24-.07-.52-.06-.65-.31.29-.03.58-.02.82-.21-.28-.18-.55-.2-.81,0h0c-1.71.04-3.17.88-4.8,1.19-.58.11-.11.38-.05.58-2.07.51-4.14,1.01-6.19,1.55-4.67,1.23-9.26,2.67-13.75,4.34-4.34,1.62-8.66,3.25-12.98,4.91-1.85.71-3.66,1.52-5.49,2.26-.29.12-.71.56-.95.12-.21-.38.33-.66.68-.81,1.18-.52,2.4-.98,3.59-1.48,2.11-.89,4.18-1.85,6.32-2.68,3.68-1.43,7.36-2.87,11.09-4.16,2.87-1,5.85-1.73,8.75-2.67,2.9-.95,5.75-2.04,8.74-2.73C43.79.67,48.41-.26,53.19.07c1.05.07,2.5-.22,3,1.18-.04.54.02,1.1-.37,1.57-1.16,1.27-2.18,2.64-3.18,4.01-.18.25-.46.42-.14.76.24.26.41.37.82.34,2-.18,3.88-.74,5.77-1.27,2.14-.59,4.25-1.28,6.43-1.74,2.11-.44,4.27-.81,6.46-.36.46-.04.9.04,1.33.19.74.22,1.19.67,1.33,1.36.1.52.39.9.95,1.08.74.27,1.5.37,2.29.34,1.8.01,3.58-.26,5.32-.59,1.85-.36,3.69-.79,5.58-.98.79-.08,1.46,0,1.96.62-.26.81.58.8,1,.93.37.11-.11-.28.08-.39,1.45.03,2.9.29,4.34,0,.38-.08.61-.05.87.17-.05.12-.62.21-.04.37.23.07.51.04.62.31ZM54.86,2.79c.45-.32.73-.59.67-1.21-.43.31-.82.56-.67,1.21ZM54.85,1c-.6-.26-1.02-.39-1.59-.07.53.34.96.32,1.59.07ZM54.45,2.05c.1-.03.22-.24.19-.3-.18-.28-.49-.2-.84-.17.14.33.27.59.65.47ZM138.07,4.76c-2.06.22-4.13.33-6.19.62-4.57.64-9.19.97-13.8,1.3-1.22.09-2.4.49-3.65.31-.04.19-.09.39-.13.58h0c-.49.42-1.05.24-1.6.16-.58-.2-1.21-.27-1.72-.62.03-.03.07-.05.1-.07,0,0-.02,0-.03-.02-.23-.12-.53-.07-.74-.25-.31-.08-.73,0-.9-.32-.35-.66-1.01-.64-1.62-.62-.91.04-1.8.18-2.7.35-2.03.4-4.07.73-6.16.78-.07.47-.65.45-.92.78.19.06.36.12.52.17,2.41-.35,4.82-.69,7.23-1.04,1.06-.15,2.31-.18,3.01.38,1.23.97,2.65.91,3.96.97,2.96.14,5.87-.51,8.79-.89,3.83-.5,7.68-.81,11.5-1.33,2.03-.28,4.09-.37,6.09-.79-.23-.37-.81-.08-1.04-.45ZM44.24,1.54v-.21h.01c-1.71.04-3.17.88-4.8,1.19-.58.11-.11.38-.05.58,1.78-.4,3.56-.81,5.34-1.21.05-.01.1-.02.14-.03-.24-.07-.52-.06-.65-.31ZM51.46.52c.08.06.16.11.24.17-.02,0-.04,0-.06.01,0,0,0,0,.01.01,0,0-.02,0-.03-.01-.23.04-.47.08-.7.12-.37.06-.79.31-.98-.24-.37.1-.73.19-1.1.29-.66.17.06.36,0,.54.5.06.99-.22,1.49-.03.64-.1,1.25.2,1.88.14.09-.02.17-.03.26-.05.32-.72-.02-1.04-1.01-.96ZM138.07,4.76c.24.36.81.08,1.04.45.72.02,1.42-.08,2.09-.32-.04-.18-.08-.36-.13-.53-.97.32-1.97.5-3.01.41ZM112.69,7.72c.49-.41,1.07-.12,1.6-.16.04-.19.09-.39.13-.58-.53.21-1.09.07-1.63.13-.37.19-.76-.13-1.13.02-.08-.01-.15-.02-.23-.03-.12-.09-.24-.13-.36-.07-.03.02-.07.04-.1.07.51.35,1.14.42,1.72.62ZM98.92,6.96c-.63.14-1.31.05-1.9.34-.05.12-.62.21-.04.37.23.07.51.04.62.31.31,0,.64.15.93-.07-.17-.05-.33-.11-.52-.17.27-.33.85-.31.92-.78ZM91.74,7.52c.37.11-.11-.28.08-.39l-1.08-.54c-.26.81.58.8,1,.93ZM141.19,4.35s-.07,0-.11,0c.04.18.08.36.13.53.31-.16.98.1.92-.38-.05-.42-.63,0-.94-.15ZM112.69,7.72c.55.08,1.12.26,1.6-.16h0c-.54.04-1.11-.25-1.6.16Z" /></svg>') no-repeat center bottom;
	background-size: 90% auto;
	text-align: center;
	transform: translateX(-.3em);
	width: 2.5em;
}
#result .item figcaption {
	color: #fff;
	position: absolute;
		bottom: 0;
		left: 1em;
}
#result .itemBox .triangle_arrow::before {
	background: var(--orange);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#result .headBox h2 {
		font-size: min(7vw, 80px);
	}
	#result .headBox p {
		font-size: min(3.6vw, 2.2rem);
	}
	#result .itemBox {
		margin: auto;
		max-width: 600px;
	}
	#result .item {
		font-size: min(3.5vw, 1.8rem);
	}
	#result .item .noBox {
		font-size: min(6.5vw, 4rem);
	}	
	#result .item .imgBox {
		margin: 1em auto 0;
		max-width: 500px;
		place-items: center;
	}
	#result .item .img.before {
		width: 88%;
	}
	#result .item .triangle_arrow::before {
		transform: rotate(90deg);
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#result .headBox h2 {
		font-size: min(6vw, 80px);
	}
	#result .headBox p {
		font-size: min(2.2vw, 2.8rem);
	}
	#result .item {
		font-size: min(2.0vw, 2.8rem);
	}
	#result .item .txtBox .detailBox ul {
		grid-template-columns: 1fr 1fr;
	}
	#result .item .txtBox .detailBox li.span-2 {
		grid-column: span 2;
	}
	#result .item .imgBox {
		align-items: flex-end;
		grid-template-columns: 43% 1fr 50%;
		margin-top: .5em;
	}
	#result .itemBox .triangle_arrow {
		width: auto;
		height: 80%;
	}	
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id flow
====================================================*/
#flow .headBox {
	border: solid var(--green);
	border-width: 2px 0;
}
#flow .headBox .deco {
	background: #fff;
	margin: auto;
	padding: .3em 1em;
	position: absolute;
		top: -1.5em;
		left: 0;
		right: 0;
	width: 10em;
}
#flow .headBox .deco > span {
	display: inline-block;
}
#flow .headBox .deco > span.ensp {
	width: .6em;
}
#flow .headBox .deco > span:nth-child(1) { transform: rotate(-20deg); }
#flow .headBox .deco > span:nth-child(2) { transform: rotate(-10deg) translateY(-.2em); }
#flow .headBox .deco > span:nth-child(3) { transform: rotate(-7deg) translateY(-.3em); }
#flow .headBox .deco > span:nth-child(4) { transform: rotate(-2deg) translateY(-.37em); }
#flow .headBox .deco > span:nth-child(5) { transform: rotate(-1deg) translateY(-.4em); }
#flow .headBox .deco > span:nth-child(6) { transform: rotate(1deg) translateY(-.4em); }
#flow .headBox .deco > span:nth-child(7) { transform: rotate(2deg) translateY(-.37em); }
#flow .headBox .deco > span:nth-child(8) { transform: rotate(7deg) translateY(-.3em); }
#flow .headBox .deco > span:nth-child(9) { transform: rotate(10deg) translateY(-.2em); }
#flow .headBox .deco > span:nth-child(10) { transform: rotate(20deg); }
#flow .headBox h2 {
	line-height: 1.3;
	padding: .6em 1em;
}

#flow .item {
	background-image : linear-gradient(to right, #333 6px, transparent 6px);
	background-size: 8px 1px;
	background-repeat: repeat-x; 
	background-position: left bottom;
	grid-gap: min(8vw, 60px);
}
#flow .item:last-child {
	background: none;
}
#flow .item .noBox {
	background: linear-gradient(to bottom, transparent, #bae5d1);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - .5em), 50% 100%, 0  calc(100% - .5em));
	line-height: 1.3;
}
#flow .item .noBox .text {
	font-size: .38em;
}
#flow .item .noBox .text > span {
	display: inline-block;
}
#flow .item .noBox .text > span:nth-child(1) { transform: rotate(-7deg) translateY(-.3em); }
#flow .item .noBox .text > span:nth-child(2) { transform: rotate(-1deg) translateY(-.4em); }
#flow .item .noBox .text > span:nth-child(3) { transform: rotate(1deg) translateY(-.4em); }
#flow .item .noBox .text > span:nth-child(4) { transform: rotate(7deg) translateY(-.3em); }

#flow .item .product {
	align-items: center;
	grid-gap: 0 1em;
	grid-template-columns: min(13vw, 180px) 1fr;
	line-height: 1.3;
}
#flow .item .product dt {
	clip-path: polygon(0 0, calc(100% - .6em) 0, 100% 100%, 0 100%);
	display: inline-block;
	margin-bottom: .3em;
	padding: 0 1.5em 0 1em;
}

/* #flow .item:nth-child(3) .listBox li:nth-child(2) ,
#flow .item:nth-child(3) .listBox li:nth-child(3) {
	display: inline-block;
	width: 47%;
} */
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#flow .headBox h2 {
		font-size: min(6vw, 4rem);
	}
	#flow .itemBox {
		margin: min(6vw, 40px) auto 0;
		max-width: 600px;
	}
	#flow .item {
		grid-gap: min(5vw, 60px);
		grid-template-columns: min(12vw, 80px) 1fr;
	}
	#flow .item .noBox {
		font-size: min(7vw, 4rem);
		height: min(75vw, 550px);
	}
	#flow .item h3 {
		font-size: min(6vw, 3.5rem);
	}
	#flow .item .wrapBox {
		padding: min(5vw, 60px) 0;
	}
	#flow .item .noBox {
		font-size: min(7vw, 4rem);
		height: calc(100% - .5em);
	}
	#flow .item .listBox {
		font-size: min(3.8vw, 2.2rem);
		margin-bottom: 1em;
	}
	#flow .item .productBox {
		font-size: min(4.6vw, 2.8rem);
		grid-gap: 1em;
		margin-top: 1em;
	}
	#flow .item .product {
		grid-template-columns: min(22vw, 180px) 1fr;
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#flow .headBox h2 {
		font-size: min(4.3vw, 5.4rem);
	}
	#flow .itemBox {
		margin-top: min(6vw, 40px);
	}
	#flow .item {
		grid-gap: min(5vw, 60px);
		grid-template-columns: min(8vw, 80px) 1fr;
	}
	#flow .item h3 {
		font-size: min(3.6vw, 4.5rem);
	}
	#flow .item .wrapBox {
		align-items: center;
		grid-gap: min(3vw, 70px);
		grid-template-columns: 1fr 1fr;
		padding: min(5vw, 60px) 0;
	}
	#flow .item .noBox {
		font-size: min(3.6vw, 5.2rem);
		height: calc(100% - .5em);
	}
	#flow .item .listBox {
		font-size: min(2.2vw, 2.8rem);
		margin-bottom: 1em;
	}
	#flow .item .productBox {
		grid-gap: 1em;
	}
	#flow .item .product {
		font-size: min(2vw, 3rem);
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id product
====================================================*/
#product .main_title {
	background: url('../img/chura_herb_peeling/product_head_bg.webp') no-repeat center / cover;
}
#product .main_title .innerBox {
	display: flex;
		justify-content: flex-end;
	max-width: 1600px;
	padding: min(17vw, 200px) 0;
}
#product .main_title .txtBox {
	background: rgba(255, 255, 255, .8);
	padding: min(6vw, 100px) min(3vw, 70px);
	min-width: 50%;
}

#product .headBox {
	border: solid var(--green);
	border-width: 2px 0;
	position: relative;
}
#product .headBox .deco {
	background: #fff;
	font-size: min(3.6vw, 2.8rem);
	margin: auto;
	padding: 0 2.5em 0 .4em;
	position: absolute;
		top: -.7em;
		left: 0;
		right: 0;
	text-align: center;
	width: 9em;
}
#product .headBox .deco::after {
	background: url('../img/chura_herb_peeling/price_title_deco.svg') no-repeat center / contain;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		right: 0;
		bottom: .3em;
	width: 2.5em;
	height: 100%;
}
#product .headBox h3 {
	padding: .5em .5em;
}

#product .comparison {
	grid-gap: 4px;
	grid-template-columns: 22% 1fr 24% 24%;
	margin: min(9vw, 110px) auto 0;
	max-width: 1100px;
}
#product .comparison_item {
	grid-template-rows: subgrid;
	grid-row: span 2;
	grid-row-gap: 4px;
	line-height: 1.4;
}
#product .comparison_item > div {
	display: flex;
		align-items: center;
		justify-content: center;
	padding: .5em .2em;
}

#product .comparison_item.body_title .body {
	background: var(--green);
	color: #fff;
	font-size: min(2.8vw, 3.6rem);
}
#product .comparison_item.dr_esthe {
	position: relative;
	z-index: 10;
}
#product .comparison_item.dr_esthe::before {
	background: linear-gradient(to right, #a48227 10%, #d7b74a, #f5e173, #d7b74a, #a48227 90%);
	border-radius: 3px;
	box-shadow: 3px 3px 6px rgba(51, 51, 51, .5);
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		bottom: -6px;
		left: -6px;
	width: calc(100% + 12px);
	height: calc(100% + 12px + min(3vw, 40px));
	z-index: -1;
}
#product .comparison_item.dr_esthe .title {
	position: relative;
}
#product .comparison_item.dr_esthe .title .title-inner {
	color: #fff;
	display: flex;
		align-items: center;
		justify-content: center;
	font-size: min(3.6vw, 4.2rem);
	position: absolute;
		left: 0;
		bottom: 0;
	text-shadow: .07em .07em .14em rgba(51, 51, 51, .5);
	width: 100%;
	height: calc(100% + min(3vw, 40px));
}
#product .comparison_item.dr_esthe .body {
	background-color: #fff;
	font-size: min(4.8vw, 5.4rem);
}
#product .comparison_item.dr_esthe .body .big {
	display: inline-block;
	font-size: 1.56em;
	line-height: 1;
}
#product .comparison_item.other .title {
	background: #e8e4ce;
	font-size: min(2.0vw, 2.7rem);
}
#product .comparison_item.other .body {
	background: #e0e0e0;
	font-family: var(--f_sans);
	font-size: min(2.4vw, 3.0rem);
}

#product .itemBox {
	grid-gap: min(6vw, 50px);
	margin-top: min(8vw, 80px);
}
#product .item h3 {
	background: #d3f0e4;
	line-height: 1.3;
	padding: .3em 1em;
	position: relative;
}
#product .item h3::before {
	background: #fff;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		right: -1px;
		bottom: -1px;
	width: 1em;
	height: 1em;
}
#product .item h3 .small {
	font-size: .53em;
}
#product .item .main_copy {
	font-weight: 500;
	margin-top: .6em;
	padding-left: 1em;
}
#product .item .productBox {
	grid-gap: 1em;
	margin: min(4vw, 30px) auto 0;
	width: min(95%, 700px);
}
#product .item .product_item {
	align-items: center;
	grid-gap: 1em;
	grid-template-columns: min(22vw, 170px) 1fr;
}
#product .item .product_item .accent_text {
	margin-bottom: .3em;
	padding: .2em 1em;
}
#product .item .product_item dd {
	font-size: .95em;
}

#product .item:nth-child(2) .imgBox {
	margin: min(4vw, 30px) auto 0;
	max-width: 1000px;
}
#product .item:nth-child(3) .imgBox {
	margin: min(4vw, 30px) auto 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#product .main_title .txtBox {
		font-size: min(4.2vw, 2.4rem);
		width: 100%;
	}

	#product .headBox h3 {
		font-size: min(7vw, 4.5rem);
	}
	#product .item h3 .small {
		font-size: min(2.4vw, 1.4rem);
	}
	#product .comparison {
		grid-gap: 2px;
	}
	#product .comparison_item {
		grid-row-gap: 2px;
	}
	#product .comparison_item.dr_esthe::before {
		box-shadow: 2px 2px 4px rgba(51, 51, 51, .5);
		bottom: -3px;
		left: -3px;
		width: calc(100% + 6px);
		height: calc(100% + 6px + min(3vw, 40px));
	}

	#product .headBox h3 {
		font-size: min(7vw, 4rem);
	}
	#product .item h3 {
		font-size: min(5vw, 3.2rem);
	}
	#product .item h3 .small {
		display: inline-block;
		vertical-align: .5em;
	}
	#product .item .main_copy {
		font-size: min(4.4vw, 2.4rem);
	}
	#product .item .product_item dl {
		font-size: min(4vw, 2.2rem);
	}

	#product .item:nth-child(3) .imgBox {
		grid-gap: min(4vw, 30px);
		place-items: center;
	}
	#product .item:nth-child(3) .imgBox .point {
		width: min(50%, 260px);
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#product .main_title .txtBox {
		font-size: min(2.6vw, 3.4rem);
	}

	#product .headBox h3 {
		font-size: min(4.5vw, 5.2rem);
	}
	#product .item h3 {
		font-size: min(2.8vw, 3.8rem);
	}
	#product .item .product_item .accent_text {
		font-size: min(2.0vw, 3.0rem);
	}	
	#product .item .main_copy {
		font-size: min(2.4vw, 3.5rem);
	}
	#product .item .product_item dl {
		font-size: min(2.6vw, 3.6rem);
	}

	#product .item:nth-child(3) .imgBox {
		align-items: center;
		grid-gap: min(3vw, 30px);
		grid-template-columns: 30% 1fr;
		margin: 30px auto 0;
		max-width: 1100px;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

/*====================================================
////id contact
====================================================*/
#contact .formBox {
	max-width: 1000px;
}
#contact .formBox .formItem {
	margin: auto;
	max-width: 700px;
}
#contact .btn-outer .btn_wrap {
	margin: auto;
	max-width: 800px;
	position: relative;
}
#contact .btn-outer .btn_wrap::before {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 50 50"><path fill="%23ffffff" d="M25,50C11.22,50,0,38.78,0,25S11.22,0,25,0s25,11.22,25,25-11.22,25-25,25ZM25,2.35C12.55,2.35,2.42,12.51,2.42,25s10.13,22.65,22.58,22.65,22.58-10.16,22.58-22.65S37.45,2.35,25,2.35ZM33.27,25l-12.03-12.05-1.74,1.63,10.4,10.42-10.4,10.42,1.74,1.63,12.03-12.05Z" /></svg>') no-repeat center / contain;
	content: '';
	display: block;
	margin: auto;
	pointer-events: none;
	position: absolute;
		top: 0;
		right: 2em;
		bottom: 0;
	transition: .3s ease-in-out;
	width: 1.1em;
	height: 1.1em;
	z-index: 10;
}
#contact .btn-outer .btn_wrap::after {
	border-left: solid 1px #fff;
	content: '';
	display: block;
	margin: auto;
	position: absolute;
		top: 0;
		right: 4em;
		bottom: 0;
	width: 0;
	height: calc(100% - .8em);
	z-index: 10;
}
#contact .backBtn input[type="submit"] {
	font-size: 1.2em;
	margin-top: 1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
	#contact h2 {
		font-size: min(6.4vw, 4rem);
	}
	#contact .btn-outer .btn_wrap {
		font-size: min(5vw, 4.2rem);
	}
}

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

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#contact h2 {
		font-size: min(4vw, 5.0rem);
	}
	#contact .input p {
		font-size: min(1.8vw, 2.2rem);
	}
	#contact .btn-outer .btn_wrap {
		font-size: min(4vw, 4.2rem);
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media screen and (min-width:1280px) {
}

@media (hover: hover) {
	#contact .btn-outer .btn_wrap:hover::before {
		transform: translateX(.3em);
	}
}

/*====================================================
//// video
====================================================*/
#video .video-wrapper {
	margin: auto;
	max-width: 900px;
}
#video video {
	max-width: 100%;
}


:root {
    --green: #235843;
}
/*====================================================
////id |  main
====================================================*/
#main {
    overflow: hidden;
}
#main::before {
    background: url('../img/chura_herb_peeling/main-img.webp') no-repeat center / cover;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
    height: 100%;
}
#main::after {
    background: linear-gradient(to right, rgb(35, 88, 67, 1), rgb(35, 88, 67, 0));
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 0;
        left: 0;
    width: 32%;
    height: 100%;
}
.main-inner {
    max-width: none;
}
.main-head-wrapper {
    display: flex;
        justify-content: flex-start;
    padding-left: min(5vw, 30px);
}
.main-head {
    color: #fff;
    display: flex;
        flex-direction: column;
    /* font-weight: 200; */
    letter-spacing: .05em;
    line-height: 1; /* iOSのズレを軽減 */
    text-orientation: upright;
    writing-mode: vertical-rl;
}
.main-head-2 {
    margin-right: .5em;
    text-shadow: .06em .06em .06em rgba(0, 0, 0, .3);
}
.main-head-3 {
    display: grid;
        gap: .4em;
        place-items: flex-start;
    margin-top: -.35em;
    margin-right: .4em;
}
.main-head-3 > span {
    background-color: rgba(255, 255, 255, .8);
    color: var(--green);
    padding: .35em;
}
.main-head-3 > span:first-child {
    position: relative;
    z-index: 2;
}
.main-head-3 > span:first-child::after {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60"><path fill="%23235843" d="M32.08,30l27.92,27.92-2.08,2.08-27.92-27.92L2.08,60l-2.08-2.08,27.92-27.92L0,2.08,2.08,0l27.92,27.92L57.92,0l2.08,2.08-27.92,27.92Z" /></svg>') no-repeat center / contain;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: 0;
        right: calc(100% - .235em);
        bottom: 0;
    width: .87em;
    height: .87em;
}

.main-text {
    color: var(--green);
    line-height: 1.5;
    margin-bottom: 1em;
    text-align: center;
    text-shadow: 0 0 .3em #fff, 0 0 .3em #fff, 0 0 .5em #fff, 0 0 .5em #fff;
}
.main-point-wrapper {
    display: flex;
        align-items: center;
        justify-content: center;
        gap: .5em;
    text-align: center;
}
.main-point {
    color: #fff;
    display: flex;
        align-items: center;
        justify-content: center;
    position: relative;
    width: 10em;
    height: 10em;
}
.main-point::before {
    background-color: #004e23;
    border-radius: 100%;
    content: '';
    display: block;
    filter: blur(.6em);
    margin: auto;
    opacity: .7;
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.main-point dt {
    font-size: 1.375em;
}
.main-point dd {
    font-weight: 200;
    line-height: 1.35;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
    .main-inner {
        padding: min(10vw, 110px) 0 min(9.5vw, 100px);
    }
    .main-head-1 {
        font-size: min(4.9vw, 4.6rem);
        position: absolute;
            top: min(10vw, 110px);
            right: 0;
    }
    .main-head-2 {
        font-size: min(9vw, 8.5rem);
    }
    .main-head-3 {
        font-size: min(7.4vw, 7rem);
    }
    .main-content-wrapper {
        margin-top: min(16.5vw, 150px);
    }
    .main-text {
        font-size: min(3.6vw, 4.2rem);
    }
    .main-point-wrapper {
        font-size: min(3vw, 3.2rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960.1px) {
    #main::before {
        width: 120%;
    }
    .main-inner {
        padding: min(9vw, 110px) 0 min(12vw, 160px);
    }
    .main-head-1 {
        display: flex;
            flex-direction: column;
            gap: .5em;
        font-size: min(3.5vw, 4.6rem);
    }
    .main-head-2 {
        font-size: min(9.16vw, 8.5rem);
    }
    .main-head-3 {
        font-size: min(6vw, 7rem);
    }
    .main-content-wrapper {
        display: flex;
        margin-top: 64px;
    }
    .main-text {
        font-size: min(3vw, 4.2rem);
    }
    .main-point-wrapper {
        font-size: min(2vw, 3.2rem);
    }
}
@media screen and (min-width: 1600px) {
    #main::before {
        top: -5%;
        width: 100%;
        height: 110%;
    }
}

@media (hover: hover) {}

/*====================================================
////id |  point
====================================================*/
#point {
    background: url('../img/chura_herb_peeling/point_bg.webp') no-repeat center / cover;
}
.point-inner {
    padding: min(16vw, 150px) 0 min(10vw, 130px);
}
.point-wrapper {
    background-color: #fff;
    border-radius: min(1.3vw, 14px);
    box-shadow: 4px 4px 7px rgba(0, 0, 0, .2);
    padding: min(8vw, 65px) min(6.4vw, 55px);
}
.point-head-wrapper {
    position: relative;
}
.point-head-wrapper::before {
    background: url('../img/chura_herb_peeling/point-deco.svg') no-repeat center / contain;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
}
.point-head {
    font-weight: 500;
}
.point-item-wrapper {
    display: flex;
        gap: min(5.3vw, 26px);
        justify-content: center;
    font-weight: 600;
    text-align: center;
}
.point-item-img .coverImg {
    border-radius: 100%;
    padding-top: 100%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
    .point-head-wrapper::before {
        background-position: top left;
        top: calc((min(11.5vw, 86px) + min(8vw, 65px)) * -1);
        left: calc((min(6.4vw, 55px) + 3.5vw) * -1);
        height: min(27vw, 204px);
        width: 45%;
    }
    .point-head {
        font-size: min(4.9vw, 3.6rem);
        margin-bottom: .8em;
        text-align: center;
    }
    .point-item-wrapper {
        flex-wrap: wrap;
        margin: auto;
        max-width: 600px;
    }
    .point-item {
        font-size: min(3.466vw, 2.6rem);
        width: calc(50% - (min(5.3vw, 26px) / 2));
    }
    .point-item-text {
        margin-top: .3em;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960.1px) {
    .point-head-wrapper {
        display: flex;
            justify-content: flex-end;
    }
    .point-head-wrapper::before {
        top: 0;
        left: calc((min(6.4vw, 55px) + 4.5vw) * -1);
        bottom: 0;
        height: 100%;
        width: 33%;
    }
    .point-head {
        font-size: min(3.8vw, 5.4rem);
        margin-bottom: 1em;
    }
    .point-item {
        flex: 1;
        font-size: min(2.5vw, 36px);
    }
    .point-item-text {
        margin-top: .5em;
    }
}

@media (hover: hover) {}

/*====================================================
////id |  process
====================================================*/
#process {
    background-color: #f0ffeb;
}
.process-inner {
    max-width: 1100px;
}
.process-item-wrapper {
    display: grid;
}
.process-item-head-wrapper {
    background-color: #fff;
    border-top: solid 2px #ffb200;
    color: #ffb200;
    position: relative;
}
.process-item-no {
    background: url('../img/chura_herb_peeling/process-no.svg') no-repeat top center / contain;
    color: #fff;
    display: flex;
        align-items: center;
        justify-content: center;
    font-size: .88em;
    letter-spacing: .1em;
    padding-top: .3em;
    padding-right: .5em;
    position: absolute;
        top: -.27em;
        left: min(3vw, 45px);
    width: 2.27em;
    height: 2.583em;
}
.process-item-head {
    font-size: inherit;
    padding: .4em 0;
}
.process-item-img .coverImg {
    padding-top: 65.78%;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
    .process-item-wrapper {
        grid-gap: min(7vw, 80px);
    }
    .process-item-head-wrapper {
        font-size: min(5vw, 3.6rem);
        padding-left: 2.8em;
    }
    .process-item-content {
        font-size: min(3.2vw, 2.0rem);
        margin-top: min(4.8vw, 35px);
    }
    .process-item-img {
        margin: 0 auto;
        width: min(67%, 550px);
    }
    .process-item-text {
        margin: 1em auto 0;
        width: 82%;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960.1px) {
    .process-item-wrapper {
        grid-gap: min(7vw, 100px);
    }
    .process-item-head-wrapper {
        font-size: min(4.0vw, 5.4rem);
        text-align: center;
    }
    .process-item-img {
        padding-left: min(4vw, 47px);
    }
    .process-item-content {
        display: grid;
            grid-gap: min(4vw, 43px);
            grid-template-columns: 1fr 50%;
        font-size: min(2.2vw, 2.4rem);
        margin-top: 50px;
    }
}

@media (hover: hover) {}