@charset'utf-8';

/*Fadein*/
.fadein { transition:all 1s!important; }



/*==============================
	Root
==============================*/
:root {
 --routine-m:225,177,47; --routine-n:24,67,100;
 --routine-txt:#633b25;
 --routine-bg:255,249,241;
 --routine-shadow:1px 1px 0 #fff9f1, -1px -1px 0 #fff9f1, -1px 1px 0 #fff9f1, 1px -1px 0 #fff9f1, 0px 1px 0 #fff9f1,  0-1px 0 #fff9f1, -1px 0 0 #fff9f1, 1px 0 0 #fff9f1;
 --routine-shadow2px:#fff9f1 2px 0px, #fff9f1 -2px 0px, #fff9f1 0px -2px, #fff9f1 0px 2px, #fff9f1 2px 2px, #fff9f1 -2px 2px, #fff9f1 2px -2px, #fff9f1 -2px -2px, #fff9f1 1px 2px, #fff9f1 -1px 2px, #fff9f1 1px -2px, #fff9f1 -1px -2px, #fff9f1 2px 1px, #fff9f1 -2px 1px, #fff9f1 2px -1px, #fff9f1 -2px -1px;
}



/*==============================
	Common
==============================*/
#sp-routine { color:var(--routine-txt); overflow:hidden; }
@media screen and (max-width:768px) {
	#sp-routine { padding-bottom:10em;}
}

#sp-routine { background:rgba(var(--routine-bg),1); }
#sp-routine .info { text-align:right; font-size:.8em; line-height:1.6em; }
#sp-routine .info + .info { margin-top:.2em; }


/*title*/
#sp-routine h3 { margin:5em auto 2em; text-align:center; }
#sp-routine h3.ttl { width:calc(100% - 2em); font-size:1.8em; line-height:1.6em; letter-spacing:2px; }
#sp-routine h3.catch { font-size:1.6em; line-height:1.4em; letter-spacing:1px; }
#sp-routine h3.catch span { display:inline-block; margin-top:.5em; padding:.6em 1em 0; font-size:.8em; letter-spacing:0; border-top:1px solid; }

@media screen and (max-width:768px) {
#sp-routine h3.catch { margin-bottom:1.6em; }
}

@media screen and (max-width:600px) {
#sp-routine { font-size:.9em; }
#sp-routine .info { font-size:12px; }
#sp-routine h3.ttl { font-size:1.6em; }
}

@media screen and (max-width:425px) {
#sp-routine h3.catch { font-size:1.4em; }
}

@media screen and (max-width:400px) {
#sp-routine { font-size:.8em; }
}



/*==============================
	memo
==============================*/
#sp-routine .memo { margin:4em auto 0; padding:4em; background:#fff; }

#sp-routine .memo h4 { margin-bottom:1em; font-size:1.3em; line-height:1.6em; }
#sp-routine .memo p { line-height:1.6em; }

#sp-routine .memo dl { display:flex; flex-wrap:wrap; justify-content:center; margin:1.6em auto 0; text-align:center; padding:1.6em 1em; background:rgba(var(--routine-bg),.6); border-radius:1em; }
#sp-routine .memo dt { width:100%; margin-bottom:1.6em; }
#sp-routine .memo dd { display:flex; flex-wrap:wrap; align-items:center; width:calc(100%/3 - .4em); }
#sp-routine .memo dd > * { width:100%; }
#sp-routine .memo dd:nth-of-type(2) { margin:0 .6em; }
#sp-routine .memo dd p { margin-bottom:.6em; line-height:1.4em; }
#sp-routine .memo dd img { display:block; width:5em; margin:auto; }

#sp-routine #use .box dd { width:16.2em; }
#sp-routine #use .box dd p { width:calc(100% - 7em); margin:0 0 0 1em; text-align:left; }
#sp-routine #use .box dd p:after { position:relative; top:.2em; content:'\306A\3069'; margin-left:.4em; text-align:right; font-size:12px; }
#sp-routine #use .box dd p span { display:inline-block; padding:.2em .4em; background:#fff; border-radius:.4em; }
#sp-routine #use .box dd p span + span { margin-top:.4em; }
#sp-routine #use .box dd img { width:6em; opacity:.4; }


@media screen and (min-width:1025px) {
#sp-routine .memo { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; width:calc(100% - 4em); max-width:1000px; }
#sp-routine .memo h4 { width:100%; }
#sp-routine .memo > p { width:calc(50% - 2em); margin-right:2em; }
#sp-routine .memo dl { width:50%; margin:-5.4em auto 0; border-radius:1em; }
}

@media screen and (max-width:1024px) {
#sp-routine .memo { width:calc(100% - 10vw); max-width:600px; border-radius:2em; }
#sp-routine .memo dl { border-radius:0 0 1em 1em; }
#sp-routine #use .box dd p span { background:#eef8fa; }
}

@media screen and (max-width:600px) {
#sp-routine .memo { padding:4em 2em; }
}

@media screen and (max-width:400px) {
#sp-routine .memo { padding:3em 1.6em; }
}



/*==============================
	main vs
==============================*/
#sp-routine #main-vs { position:relative; display:flex; flex-wrap:wrap; max-width:1920px; margin:auto; text-align:center; color:#fff; background:rgba(0,0,0,.1); }
#sp-routine #main-vs > *:not( picture) { width:100%; }

#sp-routine #main-vs h3 { margin-top:1em; text-align:center; font-size:1.4em; color:#fff; z-index:1; }
#sp-routine #main-vs h3 span { position:absolute; display:flex; flex-wrap:wrap; align-content:center; width:8em; height:8em; margin:auto; border-radius:50%; }
#sp-routine #main-vs h3 span > * { width:100%; }
#sp-routine #main-vs h3 span strong { display:block; margin-bottom:.2em; font-size:2em; }
#sp-routine #main-vs h3 span:first-of-type { background:rgba(var(--routine-n),.7); }
#sp-routine #main-vs h3 span:last-of-type { background:rgba(var(--routine-m),.7); }

#sp-routine #main-vs > picture { position:absolute; width:50%; overflow:hidden; }
#sp-routine #main-vs > picture:first-of-type { left:0; }
#sp-routine #main-vs > picture:last-of-type { right:0; }
#sp-routine #main-vs > picture img[alt*='main'] { width:auto; object-fit:contain; }

#sp-routine #main-vs ol { position:absolute; bottom:0; display:flex; align-items:stretch; width:100%; list-style:none; }
#sp-routine #main-vs li { width:50%; padding:1.6em 0; font-size:1.2em; line-height:1.4em; }
#sp-routine #main-vs li:first-of-type { padding-right:1em; background:rgba(var(--routine-n),.6); }
#sp-routine #main-vs li:last-of-type { padding-left:1em; background:rgba(var(--routine-m),.6); }

#sp-routine #main-vs > img[alt='arrow'] { position:absolute; bottom:1.5em; left:0; right:0; width:4em; margin:auto; opacity:.9; }


@media screen and (min-width:1441px) {
#sp-routine #main-vs h3 { font-size:1.6em; }
}

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

@media screen and (max-width:1024px) {
#sp-routine #main-vs h3 { margin-top:2vw; }
}

@media screen and (min-width:769px) {
#sp-routine #main-vs,
#sp-routine #main-vs > picture,
#sp-routine #main-vs > picture img[alt*='main'] { height:37vw; max-height:720px; }
#sp-routine #main-vs h3 span:first-of-type { left:-10em; right:0; }
#sp-routine #main-vs h3 span:last-of-type { left:0; right:-10em; }
}

@media screen and (max-width:768px) {
#sp-routine #main-vs h3 { font-size:3.4vw; }
#sp-routine #main-vs h3 span { width:7em; height:7em; }
#sp-routine #main-vs h3 span:first-of-type { left:2vw; }
#sp-routine #main-vs h3 span:last-of-type { right:2vw; }
#sp-routine #main-vs,
#sp-routine #main-vs > picture { height:100vw; }
#sp-routine #main-vs > picture img[alt*='main'] { height:100vw; object-fit:cover; object-position:-42vw; }
#sp-routine #main-vs li { padding:1em 0; font-size:1.1em; }
#sp-routine #main-vs > img[alt='arrow'] { width:7vw; }
}

@media screen and (max-width:425px) {
#sp-routine #main-vs h3,
#sp-routine #main-vs li { font-size:3.8vw; }
}



/*==============================
	price
==============================*/
#sp-routine #item-price { width:calc(100% - 4em); margin:4em auto  0; }

#sp-routine #item-price dl { position:relative; margin:0 .4em 2.6em; padding:3em 4em 2em; border-radius:1em; }
#sp-routine #item-price dt { position:absolute; top:-1.4em; left:0; right:0; width:8em; margin:auto; padding:.8em; text-align:center; font-size:1.1em; font-weight:600; letter-spacing:1px; }
#sp-routine #item-price dd p { line-height:1.4em; }
#sp-routine #item-price dd.price b,
#sp-routine #item-price dd.price span { color:#b40606; }
#sp-routine #item-price dd.price b { font-size:1.6em; font-weight:500; }
#sp-routine #item-price dd.price span:after { content:'税込'; margin-left:2px; font-size:12px; color:var(--routine-txt); }
#sp-routine #item-price dd.price s > * { color:var(--routine-txt); }
#sp-routine #item-price dd.price s b { font-size:1.2em; }

#sp-routine #item-price dl.normal { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; background:rgba(180,6,6,.1); }
#sp-routine #item-price dl.normal dt { background:rgba(180,6,6,.2); }
#sp-routine #item-price dl.normal dd { display:flex; align-items:center; margin:.4em; }
#sp-routine #item-price dl.normal dd p { margin-left:1em; }
#sp-routine #item-price dl.normal dd img { width:2em; }
#sp-routine #item-price dl.normal dd em { display:block; margin-bottom:.4em; font-style:normal; }

#sp-routine #item-price dl.subsc { font-size:1.1em; background:rgba(var(--item-subsc-rgb),.2); }
#sp-routine #item-price dl.subsc dt { background:rgba(var(--item-subsc-rgb),.4); }
#sp-routine #item-price dl.subsc dd img { width:3em; }
#sp-routine #item-price dl.subsc dd.price { display:flex; justify-content:center; align-items:center; width:16em; margin:auto; }
#sp-routine #item-price dl.subsc dd img + p { margin-left:1.6em; }
#sp-routine #item-price dl.subsc dd.price p { width:calc(100% - 6em); font-size:1.2em; }
#sp-routine #item-price dl.subsc dd.point { display:flex; justify-content:center; align-items:center; margin-top:1em; }
#sp-routine #item-price dl.subsc dd.point p { padding:.8em 1em; background:rgba(255,255,255,.6); border:1px dashed; }
#sp-routine #item-price dl.subsc dd.point p + p { margin-left:1em; }
#sp-routine #item-price dl.subsc dd.price s { display:block; font-size:.9em; }

#sp-routine #item-price button { display:block; width:100%; margin:auto; text-align:center; background:none; border:none; }
#sp-routine #item-price button a { display:block; width:14em; margin:auto; padding:1em; font-size:1.1em; letter-spacing:1px; border:1px solid; border-radius:50vh; }
#sp-routine #item-price button a:hover { color:#fff; background:var(--link); }
#sp-routine #item-price button a b { font-size:1.2em; font-weight:500; }


@media screen and (max-width:1024px) {
#sp-routine #item-price dl.normal { padding:3em 3vw 2em; }
#sp-routine #item-price dl.subsc { padding:3em 6vw 2em; }
#sp-routine #item-price dd:nth-of-type(n+2) { margin-top:.6em; }
}

@media screen and (max-width:768px) {
#sp-routine #item-price dl.subsc { padding:3em 12vw 2em; }
#sp-routine #item-price dl.subsc dd.point p { padding:.6em .8em; }
}

@media screen and (min-width:426px) {
#sp-routine #item-price { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; }
}

@media screen and (max-width:425px) {
#sp-routine #item-price { width:calc(100% - 2em); }
#sp-routine #item-price dl { margin:0 auto 2.6em; }
#sp-routine #item-price dl.normal { max-width:24em; margin-bottom:2em; }
#sp-routine #item-price dl.subsc dd.point p + p { margin-left:.6em; }
}



/*==============================
	trouble
==============================*/
#sp-routine #trouble { font-size:1.1em; }
#sp-routine #trouble h3 { margin:4em auto; }
#sp-routine #trouble div { position:relative; margin:auto; }
#sp-routine #trouble p { text-align:center; line-height:2em; }
#sp-routine #trouble p b,
#sp-routine #trouble p strong { font-weight:500; }
#sp-routine #trouble p b { font-size:1.2em; }
#sp-routine #trouble p strong { font-size:1.4em; }

#sp-routine #trouble .inline { width:calc(100% - 2em); }
#sp-routine #trouble .inline:first-of-type { max-width:46em; }
#sp-routine #trouble .inline:last-of-type { max-width:54em; }
#sp-routine #trouble .inline p {
 position:absolute;
 top:0;
 bottom:0;
 right:0;
 width:24em;
 height:10em;
 margin:auto;
 padding:3em;
 font-size:1.1em;
 font-weight:600;
 letter-spacing:1px;
 color:#fff;
 background:rgba(var(--routine-m),.96);
}
#sp-routine #trouble .inline p b { font-weight:600; }
#sp-routine #trouble .inline img[alt='image1'] { position:absolute; top:-3em; right:3em; width:400px; }
#sp-routine #trouble .inline img[alt='image2'] { width:560px; }

#sp-routine #trouble ul { padding:3em; background:rgba(var(--routine-n),.12); }
#sp-routine #trouble li { position:relative; line-height:1.8em; }
#sp-routine #trouble li:before,
#sp-routine #trouble li:after { content:''; display:inline-block; color:rgba(var(--routine-n),1); }
#sp-routine #trouble li:before { position:relative; top:.1em; width:1em; height:1em; margin-right:.2em; background:rgba(var(--routine-n),.2); }
#sp-routine #trouble li:after { position:absolute; top:.2em; left:.4em; width:.4em; height:.7em; border-right:1px solid; border-bottom:1px solid; transform:rotate(50deg); }

#sp-routine #trouble .arrow { max-width:22em; margin:3em auto 2.6em; }
#sp-routine #trouble .arrow p { position:relative; text-align:center; text-shadow:var(--routine-shadow2px); z-index:3; }
#sp-routine #trouble .arrow img { position:absolute; top:0; bottom:0; right:0; margin:auto; z-index:2; }
#sp-routine #trouble .arrow img[alt='item'] { width:auto; height:12em; transform:rotate(10deg); }
#sp-routine #trouble .arrow img[alt='arrow'] { left:0; width:14em; transform:rotate(-20deg); opacity:.4; }


@media screen and (min-width:769px) and (max-width:1024px) {
#sp-routine #trouble ul { padding:2em; }
#sp-routine #trouble .inline img[alt='image1'] { top:-3em; right:4em; width:360px; }
}

@media screen and (min-width:601px) and (max-width:768px) {
#sp-routine #trouble ul { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:34.4em; }
#sp-routine #trouble li { width:calc(100%/2 - .2em); }
}

@media screen and (max-width:768px) {
#sp-routine #trouble h3 { margin-bottom:1.6em; }
#sp-routine #trouble ul { margin-bottom:32vw; padding:3em 1.6em; }
#sp-routine #trouble .inline p { width:18em; padding:3em 2em; }
#sp-routine #trouble .inline img[alt='image1'] { top:auto; bottom:-26vw; right:1em; width:50vw; }
#sp-routine #trouble .inline img[alt='image2'] { width:80vw; }
#sp-routine #trouble .arrow { margin-bottom:2em; }
#sp-routine #trouble .arrow img[alt='item'] { height:30vw; }
}

@media screen and (max-width:600px) {
#sp-routine #trouble ul { max-width:20.2em; margin-bottom:38vw; padding:2em 3em 3em; }
#sp-routine #trouble .inline p { top:auto; height:7.2em; padding:1.6em; }
#sp-routine #trouble .inline img[alt='image1'] { bottom:-30vw; right:0; width:60vw; }
#sp-routine #trouble .inline img[alt='image2'] { margin-bottom:4em; }
}

@media screen and (max-width:425px) {
#sp-routine #trouble .arrow { max-width:20em; }
}



/*==============================
	method
==============================*/
#sp-routine #method { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; }
#sp-routine #method > *:not(.box) { width:100%; }

#sp-routine #method img { display:block; width:100%; max-width:1400px; margin:auto; }

#sp-routine #method .box { position:relative; width:50%; max-width:30em; padding:3em .5em 4em; text-align:center; }
#sp-routine #method .box:before { position:absolute; content:''; margin:auto; background:rgba(0,0,0,.4); border-radius:50%; z-index:1; }
#sp-routine #method .box.night:before { right:0; background:rgba(var(--routine-n),.2); }
#sp-routine #method .box.morning:before { left:0; background:rgba(var(--routine-m),.2); }
#sp-routine #method .box img[alt='icon'] { position:absolute; }
#sp-routine #method .box.night img[alt='icon'] { right:.6em; }
#sp-routine #method .box.morning img[alt='icon'] { left:.4em; }
#sp-routine #method .box.night { background:rgba(var(--routine-n),.2); }
#sp-routine #method .box.morning { background:rgba(var(--routine-m),.2); }
#sp-routine #method .box h4 { text-align:center; font-size:1.2em; line-height:1.4em; }
#sp-routine #method .box h4 b { margin-right:.1em; font-size:1.26em; }
#sp-routine #method .box h4 + p { margin-top:.4em; line-height:1.4em; }
#sp-routine #method .box li { position:relative; padding:1.4em .2em; background:rgba(255,255,255,.7); border-bottom:1px solid; }
#sp-routine #method .box.night li { padding-right:4em; border-color:rgba(var(--routine-n),1); }
#sp-routine #method .box.morning li { padding-left:4em; border-color:rgba(var(--routine-m),1); }
#sp-routine #method .box li:nth-of-type(n+2) { margin-top:.6em; }
#sp-routine #method .box object { position:absolute; top:.6em; width:2.4em; }
#sp-routine #method .box.night object { right:1em; }
#sp-routine #method .box.morning object { left:1em; }

#sp-routine #method > p { text-align:center; font-size:1.06em; line-height:2em; }
#sp-routine #method .box + p { margin-top:3em; }
#sp-routine #method > p span { display:block; }
#sp-routine #method > p span + span { margin-top:.6em; }


@media screen and (min-width:1025px) {
#sp-routine #method .box { font-size:1.06em; }
#sp-routine #method .box.night ul { max-width:16em; }
#sp-routine #method .box.morning ul { max-width:17em; }
#sp-routine #method .box.night li { padding-right:4.6em; }
#sp-routine #method .box.morning li { padding-left:4.6em; }
#sp-routine #method .box object { width:3.2em; }
#sp-routine #method .box.night object { right:.8em; }
#sp-routine #method .box.morning object { left:.8em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#sp-routine #method .box.night ul { max-width:14em; }
#sp-routine #method .box.morning ul { max-width:15em; }
}

@media screen and (min-width:769px) {
#sp-routine #method .box:before { top:3.6em; bottom:0; width:14em; height:14em; }
#sp-routine #method .box.night:before { width:7em; border-radius:14em 0 0 14em; }
#sp-routine #method .box.morning:before { width:7em; border-radius:0 14em 14em 0; }
#sp-routine #method .box.night img[alt='icon'] { top:16em; right:.6em; width:5em; }
#sp-routine #method .box.morning img[alt='icon'] { top:12em; left:.4em; width:6em; }
#sp-routine #method .box h4 + p br { display:none; }
#sp-routine #method .box.night ul { margin:1.6em 8em 0 auto; }
#sp-routine #method .box.morning ul { margin:1.6em auto 0 8em; }
}

@media screen and (max-width:768px) {
#sp-routine #method .box:before { top:8.4em; height:12em; }
#sp-routine #method .box.night:before { width:6em; border-radius:12em 0 0 12em; }
#sp-routine #method .box.morning:before { width:6em; border-radius:0 12em 12em 0; }
#sp-routine #method .box img[alt='icon'] { opacity:.8; }
#sp-routine #method .box.night img[alt='icon'] { top:11em; right:2em; width:7em; }
#sp-routine #method .box.morning img[alt='icon'] { top:10em; left:1.6em; width:9em; }
#sp-routine #method .box ul { max-width:16em; margin-top:14em; }
#sp-routine #method .box.night ul { margin-left:auto; }
#sp-routine #method .box.morning ul { margin-right:auto; }
#sp-routine #method .box object { top:.4em; }
}

@media screen and (min-width:501px) {
#sp-routine #method > p span:first-of-type br:nth-of-type(2),
#sp-routine #method > p span + span br:first-of-type { display:none; }
}

@media screen and (min-width:426px) {
#sp-routine #method .box.night ul { text-align:right; }
#sp-routine #method .box.morning ul { text-align:left; }
#sp-routine #method .box object { position:absolute; }
}

@media screen and (max-width:425px) {
#sp-routine #method .box ul { max-width:13em; }
#sp-routine #method .box li { padding:5.2em .2em 1.2em!important; }
#sp-routine #method .box object { top:1.2em; right:0!important; left:0!important; display:block; width:4em; margin:auto!important; }
}



/*==============================
	use
==============================*/
#sp-routine #use > p { display:flex; justify-content:center; align-items:center; margin-bottom:2em; font-size:1.1em; line-height:1.6em; }
#sp-routine #use > div + p { margin-top:3em; }
#sp-routine #use > p img[alt='icon'] { width:3em; margin-right:1em; opacity:.7; }
#sp-routine #use > p:nth-of-type(2) img[alt='icon'] { width:3.6em; }

#sp-routine #use > div[class*='swiper'] { max-width:1200px; margin-top:1em; overflow:inherit; }
#sp-routine #use > div[class*='swiper']:nth-of-type(n+2) { margin-top:2em; }

#sp-routine #use > div[class*='swiper'] img[alt='icon'] { position:absolute; top:-1em; left:0; right:-20em; width:6em; margin:auto; opacity:.7; z-index:10; }
#sp-routine #use .night img[alt='icon'] { width:5em; }

#sp-routine #use li { background:#fff; }
#sp-routine #use .morning li { background:rgba(var(--routine-m),.2); }
#sp-routine #use .night li { background:rgba(var(--routine-n),.16); }
#sp-routine #use li img { display:block; }
#sp-routine #use li p { padding:1em; font-size:1.02em; line-height:1.6em; }

#sp-routine #use [class*='disabled'] { opacity:0; }


@media screen and (min-width:1401px) {
#sp-routine #use > div[class*='swiper'] img[alt='icon'] { left:auto; right:1em; }
}

@media screen and (max-width:1000px) {
#sp-routine #use > div[class*='swiper'] img[alt='icon'] { right:-22em; }
}

@media screen and (max-width:700px) {
#sp-routine #use > div[class*='swiper'] img[alt='icon'] { left:auto; right:2em; }
}

@media screen and (max-width:370px) {
#sp-routine #use li p br { display:none; }
}



/*==============================
	aroma
==============================*/
#sp-routine #aroma h4 { display:flex; flex-wrap:wrap; align-items:center; margin:1em auto; font-size:1.2em; }
#sp-routine #aroma h4 span { display:inline-block; margin-left:1em; }
#sp-routine #aroma p { line-height:1.6em; }

#sp-routine #aroma ul { width:calc(100% - 3em); max-width:600px; margin:auto; }
#sp-routine #aroma li,
#sp-routine #aroma img[alt='item'] { height:16em; }
#sp-routine #aroma li { position:relative; }
#sp-routine #aroma li.night { margin-bottom: 8em; }
#sp-routine #aroma li.morning { margin-top:6em; padding-right:8em; }
#sp-routine #aroma li:before {
 position:absolute;
 top:-1em8
 content:'';
 width:50vw;
 height:50vw;
 max-width:20em;
 max-height:20em;
 min-width:16em;
 min-height:16em;
 background:#eee;
 border-radius:50%;
 z-index:0;
}
#sp-routine #aroma li.night:before { left:0; background:rgba(var(--routine-n),.06); }
#sp-routine #aroma li.morning:before { right:0; background:rgba(var(--routine-m),.1); }
#sp-routine #aroma li * { z-index:1; }

#sp-routine #aroma img[alt='item'] { position:absolute; top:0; width:auto; height:16em; }
#sp-routine #aroma li.night img[alt='item'] { left:-.2em; }
#sp-routine #aroma li.morning img[alt='item'] { right:1em; }
#sp-routine #aroma img[alt*='logo'] { width:auto; height:2em; }

#sp-routine #aroma dl { margin-top:1em; padding:1em; text-align:center; border:1px solid; }
#sp-routine #aroma dt { margin-bottom:.4em; letter-spacing:1px; }
#sp-routine #aroma dd { font-size:.9em; line-height:1.4em; }
#sp-routine #aroma dd span { display:inline-block; }
#sp-routine #aroma dd span:not(:last-of-type):after { content:'\3001'; }
.crosslink p {
    margin-top: 5px;
    padding-left: 0 !important;
}

@media screen and (min-width:1441px) {
#sp-routine #aroma ul { display:flex; justify-content:space-between; max-width:1400px; }
#sp-routine #aroma li { width:calc(50% - 1em); padding-left:10em; }
#sp-routine #aroma li.morning { margin-top:0; padding-right:0!important; }
#sp-routine #aroma li.morning:before { left:0; }
#sp-routine #aroma li.morning img[alt='item'] { left:-.2em; }
}

@media screen and (min-width:601px) {
#sp-routine #aroma h4 { padding-top:2em; }
#sp-routine #aroma ul { width:calc(100% - 4em); }
#sp-routine #aroma li,
#sp-routine #aroma img[alt='item'] { height:20em; }
#sp-routine #aroma li.night { padding-left:10em; }
#sp-routine #aroma li.morning { padding-right:10em; }
#sp-routine #aroma li:before { top:0; }
#sp-routine #aroma li.morning:before { right:-1em; }
#sp-routine #aroma img[alt*='logo'] { height:2.6em; }
}

@media screen and (max-width:600px) {
#sp-routine #aroma p br { display:none; }
}

@media screen and (max-width:500px) {
#sp-routine #aroma li,
#sp-routine #aroma img[alt='item'] { height:17em; }
}

@media screen and (max-width:400px) {
#sp-routine #aroma ul { width:calc(100% - 2em); }
#sp-routine #aroma li,
#sp-routine #aroma img[alt='item'] { height:15em; }
#sp-routine #aroma li { padding:0!important; }
#sp-routine #aroma li.night h4,
#sp-routine #aroma li.night p { padding-left:6em; }
#sp-routine #aroma li.morning h4 { padding-right:5em; }
#sp-routine #aroma li.morning p,
#sp-routine #aroma li.morning dl { padding-right:6em; }
#sp-routine #aroma dl { width:100%; text-align:left; }
#sp-routine #aroma li.night dl { padding-left:6em; }
}



/*==============================
	subsc
==============================*/
#sp-routine #subsc-benefit { width:calc(100% - 2em); max-width:56em!important; margin:auto; }

#sp-routine #subsc-benefit h3.ttl { margin-bottom:0; font-size:1.6em; }
#sp-routine #subsc-benefit h3.ttl b { color:var(--item-subsc); }
#sp-routine #subsc-benefit h3 + svg { display:block; width:calc(100% - 4em); max-width:7em; margin:0 auto .6em; fill:var(--routine-txt); }

#sp-routine #subsc-benefit h4 { margin:3em auto 1em; text-align:center; font-size:1.3em; line-height:1.6em; }
#sp-routine #subsc-benefit h4 b { color:var(--item-subsc); }

#sp-routine #subsc-benefit ul { display:flex; flex-wrap:wrap; justify-content:center; max-width:40em; margin:auto; text-align:center; font-weight:600; color:var(--item-subsc); }
#sp-routine #subsc-benefit li { padding:1.4em 0; border:.6em solid rgba(var(--item-subsc-rgb),.16); }
#sp-routine #subsc-benefit li > * { display:block; }
#sp-routine #subsc-benefit li > span:first-child { margin-bottom:.6em; }
#sp-routine #subsc-benefit li > span:last-child { margin-top:.6em; }
#sp-routine #subsc-benefit li.b-font > span { margin-bottom:.4em; }
#sp-routine #subsc-benefit li > b { font-size:1.6em; letter-spacing:1px; }
#sp-routine #subsc-benefit li.b-font > b { font-size:1.86em; letter-spacing:0; }
#sp-routine #subsc-benefit li > b span { font-size:.9em; }
#sp-routine #subsc-benefit ul + p { margin-top:1em; line-height:1.4em; }

#sp-routine #subsc-benefit dl { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; margin:0 auto 1em; }
#sp-routine #subsc-benefit dl > * { display:flex; justify-content:center; align-items:center; }
#sp-routine #subsc-benefit dt { width:7em; text-align:center; background:rgba(var(--item-subsc-rgb),.4); }
#sp-routine #subsc-benefit dt b { position:relative; top:-.1em; margin-right:.1em; font-size:1.6em; font-weight:500; }
#sp-routine #subsc-benefit dd { width:16em; padding:1em; background:rgba(var(--item-subsc-rgb),.1); }
#sp-routine #subsc-benefit dd img { width:auto; height:10em; }
#sp-routine #subsc-benefit dd img:nth-of-type(n+2) { margin-left:.6em; }
#sp-routine #subsc-benefit dd img[src*='-e']:nth-of-type(n+2) { margin-left:1em; }


@media screen and (min-width:801px) {
#sp-routine #subsc-benefit ul { max-width:40em; }
#sp-routine #subsc-benefit li { width:calc(100%/3 - .4em); }
#sp-routine #subsc-benefit li:nth-of-type(n+2) { margin-left:.6em; }
#sp-routine #subsc-benefit dd + dt { margin-left:.6em; }
}

@media screen and (max-width:800px) {
#sp-routine #subsc-benefit ul { max-width:32em; }
#sp-routine #subsc-benefit li { width:calc(100%/2 - .4em); }
#sp-routine #subsc-benefit li:nth-of-type(2n+2) { margin-left:.8em; }
#sp-routine #subsc-benefit li:nth-of-type(n+3) { margin-top:.8em; }
#sp-routine #subsc-benefit dl { max-width:23em; }
#sp-routine #subsc-benefit dl > *:nth-of-type(n+2) { margin-top:.4em; }
#sp-routine #subsc-benefit .info { text-align:left; }
}

@media screen and (min-width:501px) {
#sp-routine #subsc-benefit h3.ttl br,
#sp-routine #subsc-benefit h4 br { display:none; }
}

@media screen and (max-width:500px) {
#sp-routine #subsc-benefit h3.ttl { font-size:1.4em; }
}



/*==============================
	ショップサーブ用　item page
==============================*/
#main-column > #itemDetail-wrap { max-width:none!important; }
#itemDetail-cont { max-width:1000px; }

#pi_cart > .icons { display:none; }

#tabcart-area #carttab-subsc .name,
#tabcart-area .benefit { display:none; }

#tabcart-area .free-area > p { margin-bottom:.2em; }
#tabcart-area .free-area > p b { color:var(--item-subsc); }
#tabcart-area .free-area dl { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; }
#tabcart-area .free-area dl > * { display:flex; justify-content:center; align-items:center; }
#tabcart-area .free-area dt { width:5em; text-align:center; background:rgba(var(--item-subsc-rgb),.4); }
#tabcart-area .free-area dd + dt { margin-left:.2em; }
#tabcart-area .free-area dt b { position:relative; top:-1px; margin-right:.1em; font-size:1.2em; font-weight:500; }
#tabcart-area .free-area dd { width:calc(100%/2 - 5.1em); padding:.6em; background:rgba(var(--item-subsc-rgb),.1); }
#tabcart-area .free-area dd img { width:auto; height:6em; }
#tabcart-area .free-area dd img:nth-of-type(n+2) { margin-left:.4em; }
#tabcart-area .free-area dd img[src*='-e']:nth-of-type(n+2) { margin-left:.6em; }


@media screen and (min-width:401px) {
#tabcart-area .free-area > p br { display:none; }
}

@media screen and (max-width:400px) {
#tabcart-area .free-area dl { font-size:.9em; }
#tabcart-area .free-area dt { width:4.6em; }
#tabcart-area .free-area dd { width:calc(100%/2 - 4.7em); }
#tabcart-area .free-area dd img { height:4em; }
}