@charset 'UTF-8';

:root { --stresscare-txt:98,79,53; --stresscare-bg:#edeae6; --shiawase:165,89,89; --nemuri:148,103,142; --odayaka:95,108,152; }



/*==============================
	common
==============================*/
#stress-care { font-weight:500; color:rgb(var(--stresscare-txt)); overflow:hidden; }

#stress-care > section.arrow { position:relative; }
#stress-care > section.arrow:after {
 position:absolute;
 bottom:-8em;
 left:0;
 right:0;
 content:'';
 width:100%;
 border-right:50vw solid transparent;
 border-left:50vw solid transparent;
 border-top:8em solid var(--stresscare-bg);
 filter:drop-shadow(0 .4em .2em rgba(var(--stresscare-txt),.4));
 z-index:2;
}

#stress-care p.marker { margin-bottom:2em; padding:.6em 0; text-align:center; font-size:1.3em; line-height:1em; letter-spacing:.1em; color:#fff; background:rgb(var(--stresscare-txt)); }
#stress-care p.marker + h2 { margin-bottom:2em; text-align:center; font-size:2em; line-height:1.8em; letter-spacing:.1em; }
#stress-care p.marker + h2 span { font-size:.8em; }
#stress-care p.marker + h2 strong { display:inline-block; margin:0 .2em; padding:0 .4em; background:rgb(var(--stresscare-txt),.1); }
#stress-care p.marker + h2 b { font-size:1.2em; }


@media screen and (max-width:768px) {
#stress-care > section.arrow:after { bottom:-4em; border-top-width:4em; }
#stress-care p.marker { font-size:1.16em; }
#stress-care p.marker + h2 { font-size:1.8em; }
}

@media screen and (max-width:425px) {
#stress-care > section.arrow:after { bottom:-2.4em; border-top-width:2.4em; }
#stress-care p.marker { font-size:.96em; }
#stress-care p.marker + h2 { font-size:1.6em; letter-spacing:0; }
#stress-care p.marker + h2 span { letter-spacing:1px; }
}

@media screen and (max-width:320px) {
#stress-care p.marker + h2 { font-size:1.4em; }
}



/*==============================
	main
==============================*/
#stress-care #main-vs { position:relative; max-width:2000px; aspect-ratio:100/53; margin:auto; padding-top:1.6vw; text-align:center; }
#stress-care #main-vs > *:not(picture) { position:relative; z-index:2; }

#stress-care #main-vs h2 { text-align:center; font-size:3em; font-weight:500; line-height:2em; filter:drop-shadow(.1em .1em .1em rgba(var(--stresscare-txt),.3)); }
#stress-care #main-vs h2 span { display:block; font-size:.8em; }
#stress-care #main-vs h2 strong { margin-right:.2em; padding:.1em .4em; font-size:1.2em; background:#fff; }

#stress-care #main-vs picture { position:absolute; top:0; left:0; }
#stress-care #main-vs picture img { display:block; width:100%; }

#stress-care #main-vs p { position:absolute; bottom:1em; right:2em; margin:auto; font-size:2em; line-height:2em; color:#fff; filter:drop-shadow(.1em .1em .1em rgba(0,0,0,.4)); }
#stress-care #main-vs p img { display:block; width:auto; height:1em; margin:auto; }
#stress-care #main-vs p b { display:inline-block; margin:0 .1em; font-size:1.4em; }


@media screen and (min-width:2001px) {
#stress-care #main-vs { padding-top:2em; }
}

@media screen and (max-width:1600px) {
#stress-care #main-vs h2 { font-size:3vw; line-height:1.8em; }
#stress-care #main-vs p { font-size:2vw; }
}

@media screen and (max-width:768px) {
#stress-care #main-vs { max-width:800px; aspect-ratio:1/1.25; padding-top:3vw; }
#stress-care #main-vs h2 { font-size:6vw; }
#stress-care #main-vs p { bottom:1.6vw; left:0; right:0; font-size:5vw; }
}



/*==============================
	lineup
==============================*/
#stress-care #lineup { margin:4em auto; }
#stress-care #lineup h2 { margin-bottom:1em; text-align:center; font-size:1.6em; font-weight:600; letter-spacing:1px; }


.api_product_target.variation .api_product_variation_retail_price_wrap { display:none!important; }


@media screen and (max-width:768px) {
#stress-care #lineup { margin:3em auto; }
#stress-care #lineup h2 { font-size:1.4em; }
}

@media screen and (max-width:425px) {
#stress-care #lineup { margin:2em auto; }
#stress-care #lineup h2 { font-size:1.2em; }
}



/*==============================
	ranking
==============================*/
:root { --stresscare-rank:184,136,72; }

#stress-care #ranking { padding:3em 1em 4em; background:rgba(var(--stresscare-rank),.1); }
#stress-care #ranking h2 {
 position:relative;
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 max-width:24em;
 margin:0 auto 1em;
 padding:0 2em;
 text-align:center;
 font-size:1.6em;
 font-weight:600;
 line-height:2.4em;
 color:rgb(var(--stresscare-rank));
}
#stress-care #ranking h2:before,
#stress-care #ranking h2:after { position:absolute; top:0; bottom:0; content:''; width:2em; margin:auto; background:url(/img/rank/ranking-illust.webp) center / 100% no-repeat; }
#stress-care #ranking h2:before { left:0; }
#stress-care #ranking h2:after { right:0; transform:scale(-1,1); }
#stress-care #ranking h2 em { width:100%; margin-bottom:.4em; font-size:1.4em; border-bottom:1px solid; }
#stress-care #ranking h2 span { margin:.4em 1em 0 0; text-align:left; line-height:1.6em; }
#stress-care #ranking h2 strong { font-size:2.8em; }
#stress-care #ranking h2 b { position:relative; top:2px; margin:0 .1em; font-size:1.4em; }
#stress-care #ranking h2 strong,
#stress-care #ranking h2 b { background:-webkit-linear-gradient(-90deg, #b88848 0%, #c8a879 40%, #e8e8d8 60%, #c8a879 80%, #b88848 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

#stress-care #ranking .capture { max-width:900px; margin:auto; }
#stress-care #ranking picture { position:relative; display:block; width:calc(100% - 2em); max-width:720px; border:1px solid #aaa; box-shadow:.2em .2em .6em rgba(0,0,0,.1); }
#stress-care #ranking picture ~ picture { margin:-2em 0 0 auto; }
#stress-care #ranking picture img { display:block; width:100%; }

#stress-care #ranking > .info { width:calc(100% - 2em); max-width:900px; margin:1em auto 0; text-align:right; font-size:.9em; }
#stress-care #ranking > .info span { display:inline-block; }
#stress-care #ranking > .info span + span { margin-left:.6em; }


@media screen and (max-width:768px) {
#stress-care #ranking h2 { font-size:4vw; }
}

@media screen and (max-width:425px) {
#stress-care #ranking { padding:2em 1em 2.6em; }
#stress-care #ranking picture ~ picture { margin-top:-1em; }
#stress-care #ranking > .info { font-size:12px; }
}



/*==============================
	trouble
==============================*/
#stress-care #trouble { position:relative; padding:8em 0 6em; background:var(--stresscare-bg); }
#stress-care #trouble .wrapper { width:calc(100% - 2em); max-width:20em; margin:auto; padding:2em; background:#fff; }

#stress-care #trouble h2 { margin-bottom:1em; text-align:center; }
#stress-care #trouble h2 em { position:absolute; top:3em; left:0; right:0; width:10em; margin:auto; padding-bottom:.4em; font-size:1.2em; border-bottom:2px solid; }
#stress-care #trouble h2 em:before,
#stress-care #trouble h2 em:after { position:absolute; right:0; content:''; display:block; margin:auto; }
#stress-care #trouble h2 em:before { bottom:-.2em; left:0; width:1.4em; height:.4em; margin:auto; background:var(--stresscare-bg); }
#stress-care #trouble h2 em:after { bottom:-.6em; left:.3em; width:.6em; height:.6em; border-right:2px solid; border-bottom:2px solid; transform:translate(-25%,-50%) rotate(43deg); }
#stress-care #trouble h2 span { font-size:2em; }

#stress-care #trouble ul { max-width:10em; margin:auto; font-size:1.4em; }
#stress-care #trouble li:before { content:'・'; }
#stress-care #trouble li:nth-of-type(n+2) { margin-top:.4em; }

#stress-care #trouble p { position:absolute; bottom:-.6em; left:0; right:0; text-align:center; font-size:2.2em; letter-spacing:.1em; z-index:3; }


@media screen and (min-width:769px) {
#stress-care #trouble .wrapper { max-width:36em; padding:4em 2em; }
#stress-care #trouble h2 br { display:none; }
}

@media screen and (max-width:768px) {
#stress-care #trouble { padding:6em 0 5em; }
#stress-care #trouble h2 em { padding-bottom:.6em; font-size:1.1em; }
#stress-care #trouble p { bottom:0; font-size:1.8em; }
}

@media screen and (max-width:425px) {
#stress-care #trouble .wrapper { max-width:18em; }
#stress-care #trouble h2 em { font-size:1em; }
#stress-care #trouble h2 span { font-size:1.6em; }
#stress-care #trouble ul { font-size:1.2em; }
#stress-care #trouble p { bottom:.4em; font-size:1.8em; }
}



/*==============================
	image
==============================*/
#stress-care #image { position:relative; width:100%; max-width:2000px; aspect-ratio:5/3; margin:auto; padding:16vw 6vw 0; font-weight:600; overflow:hidden; }
#stress-care #image > *:not(.bg-img) { position:relative; z-index:2; }

#stress-care #image picture,
#stress-care #image picture img { display:block; width:auto; }

#stress-care #image .bg-img { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:1; }
#stress-care #image .bg-img picture { position:absolute; top:0; left:0; display:block; width:100%; height:100%; transition:4s; opacity:0; }
#stress-care #image .bg-img .current { opacity:1; z-index:1; }

#stress-care #image p { font-size:1.6em; line-height:1.6em; }
#stress-care #image p strong { display:block; width:8em; margin-top:.6em; font-size:2em; }
#stress-care #image p strong span { display:inline-block; padding:.4em .6em; background:#fff; }
#stress-care #image p strong span:nth-of-type(n+2) { margin-top:.4em; }


@media screen and (min-width:1601px) {
#stress-care #image { padding:10vw 12em 0; aspect-ratio:2/1; }
#stress-care #image picture,
#stress-care #image picture img { aspect-ratio:2/1; object-fit:contain; }
#stress-care #image p { font-size:2em; }
}

@media screen and (max-width:1024px) {
#stress-care #image p { font-size:2.6vw; }
}

@media screen and (max-width:768px) {
#stress-care #image { max-width:800px; aspect-ratio:1/.875; }
#stress-care #image p { font-size:3vw; }
}

@media screen and (max-width:425px) {
#stress-care #image p { font-size:1em; }
#stress-care #image p strong { font-size:1.6em; }
}



/*==============================
	overview
==============================*/
#stress-care #overview { position:relative; width:100%; max-width:2000px; aspect-ratio:5/2; margin:auto; text-align:center; }
#stress-care #overview > *:not(picture) { position:relative; z-index:2; }

#stress-care #overview p:not([class]) { font-size:1.4em; line-height:2em; }
#stress-care #overview p em { margin-right:.2em; padding:0 .2em; background:rgba(232,227,182,.8); }
#stress-care #overview p em:before { }

#stress-care #overview picture { position:absolute; bottom:0; display:block; max-width:2000px; }
#stress-care #overview picture img { display:block; width:100%; }


@media screen and (min-width:1441px) {
#stress-care #overview { padding-bottom:6vw; }
}

@media screen and (max-width:1440px) {
#stress-care #overview { padding-bottom:6em; }
}

@media screen and (min-width:1025px) {
#stress-care #overview p:not([class]) { position:relative; right:20vw; }
#stress-care #overview picture { left:0; }
}

@media screen and (max-width:1024px) {
#stress-care #overview { padding-bottom:18em; }
#stress-care #overview h2 { margin-bottom:.6em; }
#stress-care #overview p:not([class]) { font-size:1.2em; }
#stress-care #overview picture { right:0; width:1024px; object-fit:contain; }
}

@media screen and (max-width:425px) {
#stress-care #overview { padding-bottom:11em; }
#stress-care #overview p:not([class]) { font-size:1em; }
#stress-care #overview picture { width:620px; }
}

@media screen and (max-width:320px) {
#stress-care #overview p:not([class]) { font-size:.9em; }
}



/*==============================
	aroma
==============================*/
#stress-care #aroma { padding-bottom:6em; background:var(--stresscare-bg); }

#stress-care #aroma h2 { position:relative; }
#stress-care #aroma h2:after {
 position:absolute;
 bottom:-1em;
 left:.3em;
 right:0;
 content:'';
 display:block;
 margin:auto;
 width:.6em;
 height:.6em;
 border-right:2px solid;
 border-bottom:2px solid;
 transform:translate(-25%,-50%) rotate(43deg);
}

#stress-care #aroma .list { display:flex; justify-content:center; font-size:1.1em; }
#stress-care #aroma .list li { text-align:center; }
#stress-care #aroma .list li:nth-of-type(n+2) { margin-left:.6em; }
#stress-care #aroma .list li a { display:block; padding:.4em 1em; color:#fff; background:#555; }

#stress-care #aroma section {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 width:calc(100% - 2em);
 max-width:40em;
 margin:2em auto 0;
 padding:2em;
 background:#fff;
 border-left:1.6em solid;
 box-shadow:.2em .2em .6em rgba(0,0,0,.1);
}
#stress-care #aroma section > img { display:block; width:auto; height:9em; margin-right:2em; }
#stress-care #aroma section .name h3 { margin-bottom:.6em; padding:.4em; font-size:1.6em; letter-spacing:.1em; border-bottom:2px solid; }
#stress-care #aroma section .name p { font-size:1.1em; line-height:1.6em; }

#stress-care #aroma .oil { display:flex; flex-wrap:wrap; justify-content:center; max-width:28em; margin:2em auto .6em; text-align:center; font-size:.9em; }
#stress-care #aroma .oil li { width:8em; margin:0 .4em 1em; }
#stress-care #aroma .oil img { width:6em; margin:auto; border-radius:50vh; }
#stress-care #aroma .oil p { margin-top:.2em; }

/*color*/
#stress-care #aroma .list a[href*='shiawase'] { background:rgba(var(--shiawase),.7); }
#stress-care #aroma .list a[href*='shiawase']:hover { background:rgb(var(--shiawase)); }
#stress-care #aroma #shiawase { border-left-color:rgba(var(--shiawase),.8); }
#stress-care #aroma #shiawase .name h3 { border-bottom-color:rgb(var(--shiawase)); }

#stress-care #aroma .list a[href*='nemuri'] { background:rgba(var(--nemuri),.7); }
#stress-care #aroma .list a[href*='nemuri']:hover { background:rgb(var(--nemuri)); }
#stress-care #aroma #nemuri { border-left-color:rgba(var(--nemuri),.8); }
#stress-care #aroma #nemuri .name h3 { border-bottom-color:rgb(var(--nemuri)); }

#stress-care #aroma .list a[href*='odayaka'] { background:rgba(var(--odayaka),.7); }
#stress-care #aroma .list a[href*='odayaka']:hover { background:rgb(var(--odayaka)); }
#stress-care #aroma #odayaka { border-left-color:rgba(var(--odayaka),.8); }
#stress-care #aroma #odayaka .name h3 { border-bottom-color:rgb(var(--odayaka)); }


@media screen and (min-width:1601px) {
#stress-care #aroma { display:flex; flex-wrap:wrap; justify-content:space-between; }
#stress-care #aroma > *:not(section) { width:100%; }
#stress-care #aroma section { width:calc(100%/3 - 3em); }
}

@media screen and (max-width:768px) {
#stress-care #aroma section .name h3 { padding-top:.6em; font-size:1.4em; letter-spacing:1px; }
#stress-care #aroma .oil li { margin:0 0 1em; }
}

@media screen and (max-width:425px) {
#stress-care #aroma { padding-bottom:3em; }
#stress-care #aroma .list { font-size:1em; }
#stress-care #aroma section { padding:2em 1em; border-left-width:1em; }
#stress-care #aroma section .name { font-size:.9em; }
#stress-care #aroma section .name h3 { padding-top:1em; }
#stress-care #aroma .oil { font-size:13px; }
#stress-care #aroma section > p { font-size:.9em; }
}

@media screen and (max-width:375px) {
#stress-care #aroma section > img { height:8em; margin-right:1em; }
#stress-care #aroma section .name { font-size:.8em; }
#stress-care #aroma .oil { font-size:12px; }
}



/*==============================
	howto
==============================*/
#stress-care #howto h2 { margin-bottom:1.4em; }

#stress-care #howto ul {	display:flex;	flex-wrap:wrap;	justify-content:center;	align-items:center; max-width:40em; margin:auto;	}
#stress-care #howto li {
 position:relative;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 align-items:center;
 width:12em;
 height:12em;
 margin:0 .4em;
 text-align:center;
 background:var(--stresscare-bg);
 border-radius:50vh;
}
#stress-care #howto li svg {	width:5em; margin:auto; stroke-width:0; fill:rgb(var(--stresscare-txt)); }
#stress-care #howto li p {	width:100%; margin-top:.4em; font-weight:500;	line-height:1.4em;	}

#stress-care #howto .scene { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1600px; margin:3em auto 0; }
#stress-care #howto .scene picture { display:block; }
#stress-care #howto .scene picture img { display:block; width:100%; }


@media screen and (min-width:1441px) {
#stress-care #howto ul {	max-width:42em;	}
#stress-care #howto li { margin:0 1em; }
}

@media screen and (min-width:769px) {
#stress-care #howto ul { font-size:1.2em; }
#stress-care #howto .scene { width:calc(100% - .4em); }
#stress-care #howto .scene picture { width:calc(50% - .1em); }
#stress-care #howto .scene picture:nth-of-type(n+3) { margin-top:.2em; }
}

@media screen and (max-width:768px) {
#stress-care #howto .scene { width:100%; }
#stress-care #howto .scene picture { width:100%; }
#stress-care #howto .scene picture:nth-of-type(n+2) { margin-top:.2em; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#stress-care #howto li { width:26vw; min-width:8em; height:26vw; min-height:8em; }
#stress-care #howto li svg {	width:12vw; min-width:3.6em; }
}

@media screen and (max-width:425px) {
#stress-care #howto li { width:31vw; height:31vw; margin:0 .8vw; }
#stress-care #howto li svg {	width:14vw; }
#stress-care #howto li p { margin-top:.2em; }
#stress-care #howto .scene { margin-top:2.4em; }
}



/*==============================
	support
==============================*/
#stress-care #support { margin:4em auto; }

#stress-care #support h2 { max-width:15em; margin:0 auto .4em; padding-bottom:.4em; text-align:center; font-size:1.6em; font-weight:600; border-bottom:1px solid; }
#stress-care #support h2 + p { text-align:center; font-size:1.4em; }

#stress-care #support picture { display:block; width:100%; max-width:600px; margin:1.4em auto; box-shadow:0 0 .6em #ccc; }
#stress-care #support img { display:block; width:100%; }

#stress-care #support picture + p { width:calc(100% - 4em); max-width:26em; margin:auto; font-size:1.1em; }

#stress-care #support dl { position:relative; width:calc(100% - 2em); max-width:26em; margin:1.6em auto 0; padding:1.6em 0; text-align:center; border:1px solid; border-radius:.6em; }
#stress-care #support dt { position:absolute; top:-.8em; left:0; right:0; width:8em; margin:auto; background:#fff; }
#stress-care #support dd a { display:flex; justify-content:center; align-items:center; font-size:2em; }
#stress-care #support dd a > * { display:inline-block; }
#stress-care #support dd a svg { width:1.2em; stroke-width:4px; margin-right:.4em; }
#stress-care #support dd p { margin-top:.6em; font-size:.9em; }


@media screen and (max-width:768px) {
#stress-care #support h2 + p { font-size:1.2em; }
#stress-care #support picture + p { font-size:1em; }
#stress-care #support dd a { font-size:1.6em; }
}

@media screen and (max-width:425px) {
#stress-care #support { margin:3em auto; }
#stress-care #support h2 { font-size:1.4em; }
#stress-care #support h2 + p { font-size:1em; }
#stress-care #support picture { margin-bottom:1em; }
#stress-care #support picture + p { max-width:23em; font-size:.9em; }
#stress-care #support dl { max-width:20em; }
#stress-care #support dd p { font-size:12px; }
}



/*==============================
	wrapup
==============================*/
#stress-care #wrapup { position:relative; background:var(--stresscare-bg); }

#stress-care #wrapup h2.arrow { position:relative; margin-bottom:0; }
#stress-care #wrapup h2.arrow:after {
 position:absolute;
 bottom:-5em;
 left:0;
 right:0;
 content:'';
 width:100%;
 border-right:50vw solid transparent;
 border-left:50vw solid transparent;
 border-top:5em solid var(--stresscare-bg);
 filter:drop-shadow(0 .4em .2em rgba(var(--stresscare-txt),.4));
 z-index:2;
}

#stress-care #wrapup h2 + p { position:absolute; width:6em; height:6em; margin:auto; text-align:center; line-height:6em; border-radius:50vh; background:rgba(255,255,255,.9); }
#stress-care #wrapup h2 + p br { display:none; }

#stress-care #wrapup picture,
#stress-care #wrapup picture img { display:block; width:100%; }



@media screen and (min-width:1441px) {
#stress-care #wrapup h2 + p { top:16em; right:18vw; font-size:2em; }
}

@media screen and (min-width:769px) and (max-width:1440px) {
#stress-care #wrapup h2 + p { top:12em; right:10vw; font-size:3.6vh; }
}

@media screen and (max-width:1024px) {
#stress-care #wrapup h2.arrow:after { bottom:-4em; border-top-width:4em; }
}

@media screen and (max-width:768px) {
#stress-care #wrapup p.marker { margin-bottom:1.2em; }
#stress-care #wrapup h2 { font-size:5vw; }
#stress-care #wrapup h2 + p { bottom:2vw; right:3vw; width:5em; height:5em; padding:1em 0; line-height:1.4em; font-size:4vw; color:#fff; background:none; border:2px solid; }
#stress-care #wrapup h2 + p br { display:block; }
}

@media screen and (max-width:425px) {
#stress-care #wrapup p.marker { margin-bottom:.8em; }
#stress-care #wrapup h2 { padding-bottom:.6em; font-size:5.6vw; }
#stress-care #wrapup h2.arrow:after { bottom:-2.4em; border-top-width:2.4em; }
#stress-care #wrapup h2 + p { bottom:3vw; width:4.4em; height:4.4em; padding:.9em 0; line-height:1.2em; font-size:1.1em; }
}



/*==============================
	contents
==============================*/
.aromic.contents #contents { margin:1em auto 0; font-size:.96em; }
#contents + #pdt-spec { margin-top:2em!important; }

.aromic.contents #contents h2 { margin-bottom:.6em; text-align:center; font-size:1.4em; font-weight:400; line-height:1em; }

.aromic.contents #contents picture { display:block; width:60%; max-width:300px; margin:auto; }
.aromic.contents #contents picture img { display:block; width:100%; }


@media screen and (max-width:768px) {
.aromic.contents #contents { font-size:.86em; }
}