@charset 'UTF-8';

:root { --stresscare-txt:#544a48; --stresscare-bg:#eeedec; --shiawase:227,170,194; --iyashi:177,189,153; --yasuragi:230,192,154; --odayaka:125,151,188; --nemuri:165,133,180; }



/*==============================
	common
==============================*/
#stress-care { margin:1em auto; color:var(--stresscare-txt); }
#stress-care a { color:var(--stresscare-txt); }

#stress-care > section:nth-of-type(n+2) { padding:5em 0; }
#stress-care > section.bg-color,
#stress-care > section.bg-color h2 span { background:var(--stresscare-bg); }

#stress-care img { display:block; width:100%; }
#stress-care svg { fill:var(--stresscare-txt); stroke:none; }


/*title*/
#stress-care h2 {	width:calc(100% - 4em);	max-width:18em;	margin:0 auto 1.2em;	text-align:center;	font-size:1.8em; font-weight:500; line-height:1em; }
#stress-care > section:nth-of-type(n+2) h2:nth-of-type(n+2) { margin-top:4em; }
#stress-care h2:before {	position:relative;	top:.5em;	content:'';	display:block;	width:100%;	height:1px;	margin:auto;	background:#35380A; }
#stress-care h2 span {	position:relative;	padding:0 .6em;	letter-spacing:2px;	background:#fff; }


@media screen and (max-width:1024px) {
#stress-care h2 { font-size:1.6em; }
#stress-care > section:nth-of-type(n+2) h2:nth-of-type(n+2) { margin-top:3em; }
}

@media screen and (max-width:768px) {
#stress-care > section:nth-of-type(n+2) { padding:4em 0; }
#stress-care h2 { width:calc(100% - 2em); font-size:1.5em; }
}

@media screen and (max-width:425px) {
#stress-care > section:nth-of-type(n+2) { padding:3em 0; }
#stress-care h2 { font-size:1.4em; }
#stress-care h2 span { letter-spacing:1px; }
}

@media screen and (max-width:320px) {
#stress-care h2 { width:calc(100% - 2em); font-size:1.3em; }
#stress-care h2 span { padding:0 .3em; letter-spacing:0; }
}



/*==============================
	main vs
==============================*/
#stress-care #main-visual {
 position:relative;
 display:flex;
 align-content:center;
 align-items:center;
 width:100%;
 max-width:1440px;
 padding:0 3vw;
 aspect-ratio:5/2;
 margin:auto;
 background:url(/product/stress-care/img/main-img.webp) center / cover no-repeat;
}

#stress-care #main-visual h1 { font-size:2em; font-weight:600; }
#stress-care #main-visual h1 * { display:block; line-height:1.4em; }
#stress-care #main-visual h1 b { margin-top:.6em; font-size:1.4em; font-weight:500; }
#stress-care #main-visual h1 strong { font-size:2em; font-weight:400; }

#stress-care #main-visual .circle {
 position:absolute;
 bottom:2vw;
 right:2vw;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 width:11em;
 height:11em;
 text-align:center;
 font-size:1.4em;
 font-weight:600;
 line-height:1.6em;
 color:#fff;
 background:rgba(160,190,170,.8);
 border-radius:50vh;
}
#stress-care #main-visual .circle > * { display:block; width:100%; }


@media screen and (max-width:1440px) {
#stress-care #main-visual .circle { font-size:1.2em; }
}

@media screen and (max-width:1024px) {
#stress-care #main-visual { font-size:.9em; }
#stress-care #main-visual h1 { font-size:1.6em; }
#stress-care #main-visual .circle { width:10em; height:10em; }
}

@media screen and (max-width:768px) {
#stress-care #main-visual { aspect-ratio:3/2; background-position:center right -20vw; }
#stress-care #main-visual h1 b { text-shadow:#f6f6f6 2px 0px, #f6f6f6 -2px 0px, #f6f6f6 0px -2px, #f6f6f6 0px 2px, #f6f6f6 2px 2px, #f6f6f6 -2px 2px, #f6f6f6 2px -2px, #f6f6f6 -2px -2px, #f6f6f6 1px 2px, #f6f6f6 -1px 2px, #f6f6f6 1px -2px, #f6f6f6 -1px -2px, #f6f6f6 2px 1px, #f6f6f6 -2px 1px, #f6f6f6 2px -1px, #f6f6f6 -2px -1px; font-size:1.2em; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#stress-care #main-visual h1 { position:absolute; top:6vw; left:4vw; }
}

@media screen and (min-width:426px) and (max-width:500px) {
#stress-care #main-visual h1 b { font-size:5vw; }
}

@media screen and (max-width:425px) {
#stress-care #main-visual { margin-top:2em; aspect-ratio:9/8; background-position:center right -25vw; }
#stress-care #main-visual h1 { font-size:1.2em; }
#stress-care #main-visual h1 span { position:absolute; top:-2em; left:0; width:100%; padding:.3em 0; text-align:center; color:#fff; background:#df9fad; }
#stress-care #main-visual h1 span br { display:none; }
#stress-care #main-visual h1 b { position:absolute; top:1vw; left:4vw; }
#stress-care #main-visual .circle { font-size:1em; }
}



/*==============================
	lineup
==============================*/
#stress-care #lineup h2 + p {	margin-bottom:2em;	text-align:center;	font-size:1.16em;	line-height:1.8em; }
#stress-care #lineup h2 + p b { margin:0 .1em; font-size:1.3em; font-weight:400; }
#stress-care #lineup h2 + p b:nth-of-type(2) { font-size:1.1em; letter-spacing:1px; }


/*ul*/
#stress-care #lineup li { padding-top:5em!important; }
#stress-care #lineup li h3 {
	position:absolute;
	top:1.6em;
	left:50%;
	padding:.4em 2em;
	font-size:1.4em;
	letter-spacing:.1em;
	background:rgba(255,255,255,1);
	border-left:2px dotted rgba(84,74,72,.1);
	border-right:2px dotted rgba(84,74,72,.1);
	box-shadow:0 0 5px rgba(84,74,72,.2);
	transform:rotate(-3deg)translate(-50%, -50%);
}
#stress-care #lineup li picture + p { margin-top:1.6em; }
#stress-care #lineup li .old { position:absolute; top:4.6em; left:0; right:0; margin:auto; text-align:center; font-size:12px; }


/*price*/
#stress-care #lineup .price { margin-bottom:1em; text-align:center; font-size:1.2em; }
#stress-care #lineup .price em { color:rgb(var(--txt-red)); }
#stress-care #lineup .price b { margin-left:.6em; font-size:1.4em; font-weight:400; }
#stress-care #lineup .price:after { content:'\FF08\7A0E\8FBC\FF09'; font-size:.8em; }


@media screen and (max-width:768px) {
#stress-care #lineup h2 + p { font-size:1em; }
#stress-care #lineup li { padding-top:4.8em!important; }
#stress-care #lineup li h3 { padding:.4em 1em; }
#stress-care #lineup li .old { top:4.4em; }
#stress-care #lineup .price { font-size:1.1em; }
}

@media screen and (max-width:425px) {
#stress-care #lineup ul { font-size:.9em; }
#stress-care #lineup li h3 { padding:.4em .6em; font-size:1.2em; letter-spacing:1px; }
#stress-care #lineup li .old { top:3.6em; left:auto; right:1em; }
}

@media screen and (max-width:320px) {
#stress-care #lineup li picture + p { font-size:12px!important; }
}



/*==============================
	overview
==============================*/
#stress-care #overview p { text-align:center; line-height:1.8em; }
#stress-care #overview p + p { margin-top:1.2em; }
#stress-care #overview h2 + p { font-size:1.2em; }

#stress-care #overview .message { width:calc(100% - 2em); margin:auto; }

#stress-care #overview img {	display:block;	width:calc(100% - 2em);	max-width:1000px;	margin:2em auto; }


@media screen and (min-width:769px) {
#stress-care #overview h2 + p br { display:none; }
#stress-care #overview .message > p { font-size:1.06em; }
}

@media screen and (max-width:500px) {
#stress-care #overview .message > p { text-align:left; }
#stress-care #overview .message > p br { display:none; }
}



/*==============================
	how to use
==============================*/
#stress-care #howtouse ul {	display:flex;	flex-wrap:wrap;	justify-content:center;	align-items:center;	}
#stress-care #howtouse li {
 position:relative;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 align-items:center;
 width:8em;
 height:8em;
 margin:.4em;
 text-align:center;
 background:var(--stresscare-bg);
 border-radius:50vh;
}
#stress-care #howtouse li svg {	width:4em; margin:auto;	fill:var(--stresscare-txt); }
#stress-care #howtouse li:nth-of-type(1) svg,
#stress-care #howtouse li:nth-of-type(4) svg { width:3.4em; }
#stress-care #howtouse li p {	width:100%; margin-top:1em; font-weight:500;	line-height:1.4em;	}


@media screen and (min-width:1441px) {
#stress-care #howtouse li { width:14em; height:14em; }
#stress-care #howtouse li svg { width:5.6em; }
#stress-care #howtouse li:nth-of-type(1) svg,
#stress-care #howtouse li:nth-of-type(4) svg { width:5em; }
}

@media screen and (max-width:1440px) {
#stress-care #howtouse li { width:12em; height:12em; }
}

@media screen and (max-width:1024px) {
#stress-care #howtouse ul {	max-width:40em; margin:auto;	}
#stress-care #howtouse li p {	margin-top:2vw;	}
}

@media screen and (max-width:768px) {
#stress-care #howtouse li { width:30vw; max-width:10em; height:30vw; max-height:10em; }
#stress-care #howtouse li svg { width:3.2em; }
#stress-care #howtouse li:nth-of-type(1) svg,
#stress-care #howtouse li:nth-of-type(4) svg { width:2.6em; }
}

@media screen and (max-width:425px) {
#stress-care #howtouse li { margin:.2em .3em; }
#stress-care #howtouse li:nth-of-type(2) svg { position:relative; top:2vw; }
#stress-care #howtouse li p {	line-height:1.2em;	}
}



/*==============================
	all item
==============================*/
#stress-care #allitem ul {	display:flex;	flex-wrap:wrap;	justify-content:center;	align-items:stretch;	width:calc(100% - 6em);	max-width:1440px;	margin:auto; }
#stress-care #allitem li { display:block; padding:0 2em 2em; background:#fff; }


/*h3*/
#stress-care #allitem h3 { position:relative; margin-bottom:1em; text-align:center; font-size:1.4em; letter-spacing:.1em; }
#stress-care #allitem h3:before {	content:'';	display:block;	width:8em;	height:.4em;	margin:0 auto 1em; }
#stress-care #allitem h3 b { margin-left:.6em; }
#stress-care #allitem h3 .old { position:absolute; bottom:-1.8em; right:0; text-align:center; font-size:12px; letter-spacing:0; }


/*p*/
#stress-care #allitem a > p { margin-bottom:1.2em; line-height:1.8em; }
#stress-care #allitem p.sub { text-align:center; }
#stress-care #allitem p.sub b { padding:0 1em .6em; font-weight:600; letter-spacing:1px; border-bottom:1px solid; }
#stress-care #allitem p.sub span { display:block; margin-top:1em; line-height:1.5em; }


/*div*/
#stress-care #allitem li > div:not([class]) { display:flex; justify-content:center; align-items:center; margin-top:1em; }
#stress-care #allitem li > div:not([class]) > img { width:80px; }
#stress-care #allitem li > div:not([class]) > p { max-width:13em; margin-left:2em; }
#stress-care #allitem li > div:not([class]) > p span { display:block; font-size:.9em; line-height:1.8em; }
#stress-care #allitem li > div:not([class]) > p span:nth-of-type(n+2) { margin-top:.4em; }
#stress-care #allitem li > div:not([class]) > p span:before {
	position:relative;
	top:.4em;
	content:'';
	display:inline-block;
	width:1.6em;
	height:1.6em;
	margin:-.4em .3em 0 0;
	background-position:center left;
	background-size:100%;
	background-repeat:no-repeat;
	border-radius:50%;
}
#stress-care #allitem li > div:not([class]) > p span.aroma1:before { background-image:url(/img/aroma/grapefruit.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma2:before { background-image:url(/img/aroma/orange.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma3:before { background-image:url(/img/aroma/bergamot.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma4:before { background-image:url(/img/aroma/mandarin.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma5:before { background-image:url(/img/aroma/lime.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma6:before { background-image:url(/img/aroma/lavender.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma7:before { background-image:url(/img/aroma/rose.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma8:before { background-image:url(/img/aroma/neroli.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma9:before { background-image:url(/img/aroma/geranium.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma10:before { background-image:url(/img/aroma/rosemary.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma11:before { background-image:url(/img/aroma/cedarwood.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma12:before { background-image:url(/img/aroma/clarysage.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma13:before { background-image:url(/img/aroma/hinoki.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma14:before { background-image:url(/img/aroma/ilangilang.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma15:before { background-image:url(/img/aroma/sandalwood.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma16:before { background-image:url(/img/aroma/frankincense.webp); }
#stress-care #allitem li > div:not([class]) > p span.aroma17:before { background-image:url(/img/aroma/holeaf.webp); }


/*button*/
#stress-care #allitem button {
	display:block;
	margin:1.4em auto 0;
	padding:.6em 1.2em;
	text-align:center;
	font-size:1.06em;
	line-height:1.6em;
	background:var(--stresscare-bg);
	border:1px solid;
	border-radius:.2em;
	box-shadow:0 2px 2px 0 rgba(0,0,0,.2);
	transition:.4s;
	cursor:pointer;
}
#stress-care #allitem a:hover button { border-radius:50vh; }
#stress-care #allitem a:active button { transform:translateY(4px); -webkit-transform:translateY(4px); border:1px solid; box-shadow:none; }


@media screen and (min-width:1441px) {
#stress-care #allitem li { width:calc(100%/3 - 1.2em); margin-left:1.8em; }
#stress-care #allitem li:nth-of-type(n+4) { margin-top:2em; }
#stress-care #allitem li:nth-of-type(3n+1) { margin-left:0; }
}

@media screen and (max-width:1440px) {
#stress-care #allitem li:nth-of-type(2) > a > div > p { max-width:14em; }
#stress-care #allitem li:nth-of-type(3) > a > div > p { max-width:15em; }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#stress-care #allitem ul {	max-width:1000px;	}
#stress-care #allitem li { width:calc(100%/2 - 1em); margin-left:2em; }
#stress-care #allitem li:nth-of-type(n+3) { margin-top:2em; }
#stress-care #allitem li:nth-of-type(2n+1) { margin-left:0; }
}

@media screen and (max-width:1024px) {
#stress-care #allitem ul {	width:calc(100% - 2em);	max-width:500px;	}
#stress-care #allitem li { width:100%; }
#stress-care #allitem li:nth-of-type(n+2) { margin-top:2em; }
}

@media screen and (min-width:426px) {
#stress-care #allitem p.sub br { display:none; }
}

@media screen and (max-width:425px) {
#stress-care #allitem { font-size:.9em; }
#stress-care #allitem .api_product_target { font-size:1.1em; }
#stress-care #allitem ul {	max-width:340px;	}
#stress-care #allitem li:nth-of-type(1) > a > div > p,
#stress-care #allitem li:nth-of-type(2) > a > div > p { max-width:10em; }
#stress-care #allitem li:nth-of-type(3) > a > div > p { max-width:8em; }
#stress-care #allitem li > div:not([class]) > img { width:60px; }
}

@media screen and (max-width:375px) {
#stress-care #allitem li { padding:0 1em 1.6em; }
#stress-care #allitem li > div:not([class]) > img { width:50px; }
#stress-care #allitem li > div:not([class]) > p { margin-left:1.6em; }
}


/*==============================
	Relateditem
==============================*/
/*ul*/
#stress-care #relateditem ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	width:calc(100% - 4em);
	margin:auto;
}
#stress-care #relateditem li { width:calc(100%/2 - 1.6em); max-width:400px; margin:0 .8em .8em; }
#stress-care #relateditem li > a,
#stress-care #relateditem li > a > * { display:block; }
#stress-care #relateditem li > a { box-shadow:4px 4px 4px 0 rgba(0,0,0,.1); transition:.4s; }
#stress-care #relateditem li > a:hover { box-shadow:none; }
#stress-care #relateditem li img { width:100%; }


@media screen and (max-width:500px) {
#stress-care #relateditem li { width:100%; max-width:none; margin:0; }
#stress-care #relateditem li:nth-of-type(n+2) { margin-top:1.4em; }
}



/*==============================
	color
==============================*/
/*lineup*/
#stress-care #lineup li:nth-of-type(1) h3 { background:rgba(var(--shiawase),.2); }
#stress-care #lineup li:nth-of-type(2) h3 { background:rgba(var(--iyashi),.2); }
#stress-care #lineup li:nth-of-type(3) h3 { background:rgba(var(--yasuragi),.2); }
#stress-care #lineup li:nth-of-type(4) h3 { background:rgba(var(--odayaka),.2); }
#stress-care #lineup li:nth-of-type(5) h3 { background:rgba(var(--nemuri),.2); }


/*allitem*/
#stress-care #allitem li:nth-of-type(1) { border:1px solid rgb(var(--shiawase)); }
#stress-care #allitem li:nth-of-type(2) { border:1px solid rgb(var(--iyashi)); }
#stress-care #allitem li:nth-of-type(3) { border:1px solid rgb(var(--yasuragi)); }
#stress-care #allitem li:nth-of-type(4) { border:1px solid rgb(var(--odayaka)); }
#stress-care #allitem li:nth-of-type(5) { border:1px solid rgb(var(--nemuri)); }

#stress-care #allitem li:nth-of-type(1) h3:before { background:rgb(var(--shiawase)); }
#stress-care #allitem li:nth-of-type(2) h3:before { background:rgb(var(--iyashi)); }
#stress-care #allitem li:nth-of-type(3) h3:before { background:rgb(var(--yasuragi)); }
#stress-care #allitem li:nth-of-type(4) h3:before { background:rgb(var(--odayaka)); }
#stress-care #allitem li:nth-of-type(5) h3:before { background:rgb(var(--nemuri)); }

#stress-care #allitem li:nth-of-type(1) button { background:rgba(var(--shiawase),.4); }
#stress-care #allitem li:nth-of-type(2) button { background:rgba(var(--iyashi),.4); }
#stress-care #allitem li:nth-of-type(3) button { background:rgba(var(--yasuragi),.4); }
#stress-care #allitem li:nth-of-type(4) button { background:rgba(var(--odayaka),.4); }
#stress-care #allitem li:nth-of-type(5) button { background:rgba(var(--nemuri),.4); }