@charset'utf-8';

:root { 
 --taroma:33,34,43; 
 --taroma-tt:/*0,158,191*/0,168,148; 
 --taroma-bg:#f0fafc; 
 --taroma-b:1,167,203; 
 --taroma-g:62,177,52; 
 --taroma-m:229,15,127; 
 --taroma-mini:0,168,148;
 --fit-cl:#c4a93e;
 --fit-rgb:196,169,92;
 --scent-bg:#999999;
 --scent-gray:#666666;
   
}



/*==============================
	common
==============================*/
#nemuri > *:not(.attention):not(#lineup):not(#voice) { font-weight:500; line-height:1em; }
#nemuri > section:not(#main-vs):not(#lineup):not(#trouble):not(#points):not(#resolution) { margin-top:6em; }
#nemuri > section.bg-color { padding-bottom:6em; background:var(--taroma-bg); }

#nemuri > p.attention { width:calc(100% - 1.6em); margin:0 auto .8em; text-align:center; font-weight:500; line-height:1.4em; }
#nemuri > p.attention span { display:inline-block; margin:0 .4em; }
#nemuri > p.attention a { display:inline-block; text-decoration:underline; }
#nemuri picture { display:block; width:100%; }
#nemuri picture img { display:block; width:100%; }


/*title*/
#nemuri h3.ttl { display:inline-block; margin-bottom:2em; padding:1.6em 2em; font-size:1.6em; font-weight:500; line-height:1.8em; color:#fff; background:rgb(var(--taroma-tt)); }
#nemuri #mechanism h3.ttl { background:var(--scent-gray); }


@media screen and (min-width:1601px) {
#nemuri h3.ttl { margin:1em 0 2em 1em; }
}

@media screen and (max-width:1024px) {
#nemuri h3.ttl { font-size:1.4em; }
}

@media screen and (max-width:768px) {
#nemuri > section:not(#main-vs):not(#lineup):not(#mechanism):not(#trouble):not(#points):not(#resolution) { margin-top:4em; }
#nemuri > section.bg-color { padding-bottom:3em; }
#nemuri > p.attention { text-align:left; font-size:.9em; }
#nemuri h3.ttl {	font-size:1.2em; }
}

@media screen and (max-width:425px) {
#nemuri > p.attention { font-size:13px; }
#nemuri h3.ttl { margin-bottom:1em; padding:1.4em 1.2em; font-size:1.1em; }
}

@media screen and (max-width:320px) {
#nemuri h3.ttl { font-size:1em; }
}

#nemuri > picture{
  max-width: 1000px;
  margin: auto;
}
#nemuri > picture:not(#top){
  margin: 1.6em auto;
}

/*==============================
	notice
==============================*/
/*
picture.notice  { display:block; width:100%; max-width:1400px; margin:auto; }
picture.notice img { display:block; width:100%; }
*/



/*==============================
	main
==============================*/
#nemuri #main-vs { position:relative; }
#nemuri #main-vs.new:before {
 position:absolute;
 content:'世界初';
 display:block;
 width:4em;
 height:4em;
 text-align:center;
 font-size:3em;
 font-weight:600;
 line-height:4em;
 letter-spacing:.1em;
 color:#fff;
 background:rgb(237,28,36);
 border-radius:50vh;
 z-index:1;
}

#nemuri #main-vs .balloon { display:block; font-weight:600; letter-spacing:.1em; color:#fff; }

#nemuri #main-vs .bg-area { position:relative; max-width:2000px; aspect-ratio:2/1; margin:auto; }
#nemuri #main-vs .bg-area > *:not(picture) { position:absolute; margin:auto; z-index:1; }
#nemuri #main-vs .bg-area > img { width: 40vw ;top: 2em;left: 3em;}
#nemuri #main-vs h2 { height:10em; writing-mode:vertical-rl; font-weight:600; letter-spacing:.1em; color:rgb(var(--taroma-tt));
text-shadow:#f3f0f1 4px 0,#f3f0f1 -4px 0,#f3f0f1 0 -4px,#f3f0f1 0 4px,#f3f0f1 4px 4px,#f3f0f1 -4px 4px,#f3f0f1 4px -4px,#f3f0f1 -4px -4px,#f3f0f1 2px 4px,#f3f0f1 -2px 4px,#f3f0f1 2px -4px,#f3f0f1 -2px -4px,#f3f0f1 4px 2px,#f3f0f1 -4px 2px,#f3f0f1 4px -2px,#f3f0f1 -4px -2px;}

#nemuri #main-vs picture { position:absolute; }

#nemuri #main-vs .name { width:calc(100% - 2em); max-width:1440px; margin:auto; padding:1em 0 2em; font-size:1.2em; font-weight:600; line-height:1.6em; color:rgb(var(--taroma)); }


@media screen and (min-width:1441px) {
#nemuri #main-vs.new:before { bottom:2em; right:8vw!important; }
#nemuri #main-vs h2 { font-size:4em; }
#nemuri #main-vs .balloon { position:absolute; top:1.2vw; right:28vw; width:12em; text-align:right; font-size:2em; line-height:1.6em; text-shadow:.1em .1em .4em rgba(0,0,0,.4); z-index:1; }
#nemuri.lp-area #main-vs .balloon { right:16vw; }
#nemuri #main-vs .balloon:after { content:'\3002'; }
#nemuri #main-vs .name { font-size:1.4em; }
}

@media screen and (max-width:1440px) {
#nemuri #main-vs.new:before { top:2em; font-size:2.4em; }
#nemuri #main-vs .balloon { position:relative; width:100%; padding:.6em 0; text-align:center; font-size:1.1em; background:var(--scent-gray); }

#nemuri #main-vs .balloon br { display:none; }
}

@media screen and (min-width:769px) {
#nemuri #main-vs.new:before { right:1em; }
#nemuri #main-vs h2 { top:4vw; bottom:0; left:7vw;font-size:4vw; line-height:2em; }
}

@media screen and (max-width:768px) {
#nemuri #main-vs.new:before { top:18vw; right:.6em; font-size:5vw; }
#nemuri #main-vs .balloon { font-size:1em; line-height: 1.2em;}
#nemuri #main-vs .bg-area { aspect-ratio:8/7; }
#nemuri #main-vs h2 { top:6vw; bottom:auto; left:4vw; font-size:7vw; line-height:1.6em;  }
#nemuri #main-vs .name { padding:.6em 0 2em; font-size:1.1em; }
  #nemuri #main-vs .bg-area > img { width: 50vw ;top: 2em;left: 2em;}
    #nemuri #main-vs .balloon br { display:block; }
}

@media screen and (max-width:425px) {
#nemuri #main-vs .balloon,
#nemuri #main-vs .name { font-size:.9em; }
#nemuri #main-vs .bg-area > img {;top: 1.2em;left: 1.2em;}

}

@media screen and (max-width:320px) {
#nemuri #main-vs .name { font-size:13px; }
}


/*==============================
	trouble
==============================*/

#nemuri #trouble { color:#fff; background:#304257; position: relative;
  border-bottom:1px solid #304257;
z-index: 1}
#nemuri #trouble>h2{
  text-align: center;
  padding: 50px;
  font-size: 3em;
  }
#nemuri #trouble ul { width:calc(100% - 2em); margin:auto; font-size:1.4em; }
#nemuri #trouble li { display:flex; justify-content:space-between; align-items:stretch; }
#nemuri #trouble li:nth-of-type(even) { flex-direction:row-reverse; }
#nemuri #trouble li:nth-of-type(n+2) { margin-top:1em; }
#nemuri #trouble li p { width:calc(100% - 9em); padding:1em; line-height:1.6em; color:#333; background:#eee; }
#nemuri #trouble li p b { display:block; font-size:1.3em; }
#nemuri #trouble li picture { display:block; width:12em; }
#nemuri #trouble li img { display:block; width:100%; }
#nemuri #trouble::after{
    bottom: -6em;
    border-top: 6em solid #304257;
  border-top-color: #304257;
    filter: drop-shadow(0 0.4em 0.2em rgba(0,0,0,.2));
    position: absolute;
    left: 0;
    right: 0;
    content: '';
    width: 100%;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    z-index: 1;
}


@media screen and (min-width:1025px) {
#nemuri #trouble ul { max-width:28em; font-size:1.8em; }
#nemuri #trouble li p { line-height:2em; }
#nemuri #trouble li p br:first-of-type { display:none; }
}

@media screen and (max-width:1024px) {
#nemuri #trouble h2 { font-size:2em; padding: 20px}
#nemuri #trouble ul { max-width:26em; }
#nemuri #trouble li p {font-size:.9em; }
#nemuri #trouble li p b { margin-top:.2em;font-size:1.3em; }
}

@media screen and (min-width:769px) {
#nemuri #trouble li p { padding:1em 1.4em; }
}

@media screen and (max-width:768px) {
#nemuri #trouble h2 { font-size:1.4em; padding: 20px}
#nemuri #trouble ul { max-width:24em; font-size:1em; }
#nemuri #trouble li p { width:calc(100% - 8em); }
}

@media screen and (max-width:425px) {
  #nemuri #trouble h2 { font-size:1.1em; padding: 20px}
#nemuri #trouble ul { max-width:22.4em; }
#nemuri #trouble li p { line-height:1.6em;font-size:3.4vw; }
#nemuri #trouble li p b { font-size:4.4vw; }
#nemuri #trouble li picture { width:10em; }
}

@media screen and (max-width:320px) {
#nemuri #trouble ul { font-size:13px; }
	
}

/*==============================
	resolution
==============================*/
#nemuri #resolution{
 
  background-color: var(--taroma-bg);
  padding-top: 8em;
  padding-bottom: 4em;
text-align: center;
  background-image: linear-gradient(to bottom, #f0fafc 90%, var(--scent-bg));
}

#nemuri #resolution > p{
   position: relative;
  display: inline-block;
  vertical-align: super;
  font-size: 2em;
}
/*#nemuri #resolution > p::before{
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  top: -50%;
  left: -15%;
  content: "";
  background-image: url("/item/t-scent/img/harb-left.png");
  background-size: cover;
  z-index: 10;
}*/

#nemuri #resolution img{
  display: inline-block;
  width: 20vw;
}
@media screen and (max-width:768px) {
#nemuri #resolution p span{
   vertical-align: bottom;
  font-size: 1.3em;
}
#nemuri #resolution img{
  display: inline-block;
  width: 120px;
}
#nemuri #resolution > p{
 font-size: 4.8vw;
}
}
@media screen and (max-width:425px) {
#nemuri #resolution p span{
  font-size: 1em;
}
#nemuri #resolution img{
  display: inline-block;
  width: 80px;
}
}
/*==============================
	points
==============================*/
#nemuri #points{
padding-top: 2em;
  padding-bottom: 2em;
  background-color: #999;
  text-align: center;
}
#nemuri #points img{
max-width: 30%;
}
#nemuri #points > p{
color: #fff;
  font-size: 1.6em;
  line-height:1.6em; 
}
#nemuri #points h2{
  margin: 1em;
text-align: center;
  font-size: 2em;
  color: #fff;
}
#nemuri #points ul{
max-width: 1000px;
margin: 1em auto;
}

#nemuri #points li{
margin: 1em 2em;
padding: 1em;
background-color: #fff;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
#nemuri #points li picture{
display: flex;
max-width: 14em;}
#nemuri #points li picture img{
max-width: 100%;
margin:auto;}
#nemuri #points li .point-text{
text-align: left;
width: 100%;
padding: 1em;}
#nemuri #points li .point-text h3{
  display: inline-block;
  text-align: left;
color:#078075;
  font-size: 1.6em;
  line-height: 1.6em;
  margin: .5em 0;
}
#nemuri #points li .point-text h3 br{
  display: none;
}
#nemuri #points li .point-text b{
display: inline-block;
  vertical-align:top;
  color: #88d1cc;
font-size: 2.4em;
  line-height: 1.6em;
margin: 0 .3em;
}

#nemuri #points li .point-text p{
  text-align: left;
  font-size: 1.4em;
  line-height: 1.4em;
}
#nemuri #points aside p{
  color: #d02929;

}
@media screen and (min-width:1200px) {
  #nemuri #points img{
max-width: 340px;
}
}
@media screen and (max-width:900px) {
  #nemuri #points li .point-text h3 br{
  display: block;
}
}
@media screen and (max-width:700px) {
  #nemuri #points > p{
     font-size: 1.2em
  }
  
#nemuri #points ul li{
display: block;
  }
  #nemuri #points ul li .point-text{
    padding: 0;
text-align: center;
  }
  #nemuri #points ul li .point-text h3{
    font-size: 1.4em;
    line-height: 1.4em;
  margin: 0;
  }
  #nemuri #points ul li .point-text p{
    font-size: 1.2em;
    padding: .5em;
  }

#nemuri #points ul li picture{
max-width:60%;
  margin: 0 auto;}
 #nemuri #points aside p{
  padding: 0 2em;
   font-size: .8em;

}
  }
@media screen and (max-width:450px) {
   #nemuri #points ul li .point-text h3{
    font-size: 1em;
    line-height: 1em;
  }
  #nemuri #points li .point-text b{
font-size: 1.5em;
margin: 0;
}
  #nemuri #points ul li .point-text p{
    font-size: .9em;
    padding: .5em;
  }

#nemuri #points ul li picture{
max-width:60%;
  margin: 0 auto;}
  }



/*==============================
	voice
==============================*/

#nemuri #voice h2 {	margin-bottom:1em;	text-align:center;	font-size:3.2vw; font-weight:600; letter-spacing:2px;	}
#nemuri #voice h2 span {font-size:1.5em	}
#nemuri #voice { padding-top:2em;margin-bottom:2em; background:#f2f0ea; }
#nemuri #voice h3{
  font-size:1.6em;
  font-weight:600; 
  text-align: center;
}
#nemuri #voice p{
  font-size:1em; 
  text-align: center;
  margin: 0 auto 2em;
}
#nemuri #voice h3 >img{
  vertical-align: bottom;
  width: 20vw;
}

#nemuri #voice ul { width:calc(100% - 3em); max-width:60em; margin:auto; }
#nemuri #voice li { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:2em; background:#fff; box-shadow:.2em .2em .6em rgba(0,0,0,.1); }
#nemuri #voice li:nth-of-type(n+2) { margin-top:2em; }
#nemuri #voice li:nth-of-type(even) { flex-direction:row-reverse; }
#nemuri #voice li h3 { font-size:1.6em; font-weight:600; color:#806f2c; }
#nemuri #voice li:nth-of-type(odd) h3 { margin-right:1em; }
#nemuri #voice li:nth-of-type(even) h3 { margin-left:1em; }
#nemuri #voice li picture { display:block; width:6em; max-width:100px; height:6em; max-height:100px; padding:.4em; background:#f2f0ea; border-radius:50vh; }
#nemuri #voice li img { display:block; width:100%;height:auto;transition: .4s;max-width: 100%;}
#nemuri #voice li p { width:100%; margin-top:1em; font-size:1.2em; }

@media screen and (min-width:1200px) {
  #nemuri #voice h2 {	font-size: 2.2em	}
  #nemuri #voice h3 >img{
  width: 220px;
}
}
@media screen and (max-width:768px) {
#nemuri #voice h3{font-size:1.2em;}
  
#nemuri #voice ul { font-size:.9em; }
#nemuri #voice li picture { width:6em; height:6em; }
#nemuri #voice p{font-size:.8em;}
  
}

@media screen and (max-width:425px) {
#nemuri #voice h3{font-size:.8em;}
#nemuri #voice ul { font-size:.8em; }
#nemuri #voice li:nth-of-type(n+2) { margin-top:1em; }
#nemuri #voice li:nth-of-type(odd) h3 { margin-right:.6em; }
#nemuri #voice li:nth-of-type(even) h3 { margin-left:.6em; }
#nemuri #voice li picture { width:5em; height:5em; }
  #nemuri #voice p{font-size:.6em;}
}


/*==============================
	main カテゴリページ
==============================*/
@media screen and (min-width:1601px) {
.header_area #nemuri #main-vs .balloon { font-size:2.4em!important; }
}



/*==============================
	main 商品ページ
==============================*/
@media screen and (min-width:1601px) {
.item-tab #nemuri #main-vs .balloon { font-size:1.6em!important; }
}

@media screen and (min-width:1441px) {
.item-tab #nemuri #main-vs.new:before { top:2em; z-index:2; }
.item-tab #nemuri #main-vs .balloon { position:relative; top:0; right:0; width:100%; padding:1em 0; text-align:center; font-size:1.1em; line-height:1em; background:var(--scent-gray); }

.item-tab #nemuri #main-vs .balloon br { display:none; }
}



/*==============================
	lineup
==============================*/
#nemuri #lineup { padding:2em 0 4em; }
#nemuri #lineup h2 { margin-bottom:1em; text-align:center; font-size:1.8em; font-weight:600; }
#nemuri #lineup h3 { display:block; margin-bottom:1em; padding:.6em 0; text-align:center; font-size:1.5em; font-weight:600; letter-spacing:1px; color:#fff; background:rgb(var(--taroma-tt)); }
#nemuri #lineup h3:after { position:relative; top:-.1em; content:'\30BF\30A4\30D7'; margin-left:.3em; font-size:.8em; }
#nemuri #lineup h3:nth-of-type(n+2) { margin-top:1em; }

#nemuri #lineup > ul > li { background:#fff; }

#nemuri #lineup .label-design { max-width:20em; margin:auto; }
#nemuri #lineup .label-design p { text-align:center; }
#nemuri #lineup .label-design p:first-of-type { text-align:center; font-weight:600; }
#nemuri #lineup .label-design span.info { display:block; margin-top:.2em; text-align:right; font-size:12px; line-height:1.6em; }
#nemuri #lineup .label-design a { display:block; width:60%; max-width:240px; margin:.6em auto; }
#nemuri #lineup .label-design a:after { content:'\30AF\30EA\30C3\30AF\3067\62E1\5927'; display:block; margin:.2em; text-align:center; font-size:12px; }
#nemuri #lineup .label-design picture img { width:12em!important; height:auto!important; }


/*mini-e*/
[class*='minif-e'] .api_product_variation_label,
[class*='minif-e'] .api_product_option_name { width:5em!important; }
[class*='minif-e'] .api_product_variation_label + *,
[class*='minif-e'] .api_product_option_name + * { width:calc(100% - 5.4em)!important; max-width:18em; }


@media screen and (max-width:768px) {
#nemuri #lineup { padding:1em 0 3em; }
#nemuri #lineup h2 { font-size:1.6em; }
#nemuri #lineup h3 { font-size:1.3em; }
#item-detail01 #nemuri #lineup > h2.ttl { font-size:1.2em; }
}

@media screen and (min-width:426px) {
#item-detail01 #nemuri #lineup > ul + .info { text-align:center; }
}

@media screen and (max-width:425px) {
#nemuri #lineup { padding:0 0 2em; }
#nemuri #lineup h2 { font-size:1.4em; }
#nemuri #lineup h3 { font-size:1.1em; }
#nemuri #lineup h3:after { font-size:13px; }
#item-detail01 #nemuri #lineup > h2.ttl { font-size:1.1em; }
}



/*==============================
	mechanism
==============================*/
#nemuri #mechanism { position:relative; }
#nemuri #mechanism:after { position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#999; z-index:1; }
#nemuri #mechanism > * { position:relative; z-index:2; }
#nemuri #mechanism >p{
  color: #FFF}
#nemuri #mechanism p:not([class]) { margin:auto; line-height:1.6em;}

#nemuri #mechanism > p { max-width:54em;}
#nemuri #mechanism picture { display:block; max-width:600px; margin:auto; background:#fff; }
#nemuri #mechanism > picture { margin:1em auto; }

#nemuri #mechanism .box { max-width:52em; margin:4em auto 1em; background:#fff; box-shadow:.2em .2em .6em rgba(0,0,0,.1); }
#nemuri #mechanism .box h4 { position:absolute; top:-1.5em; left:1.2em; display:inline-block; padding:.6em 1.2em; font-size:1.3em; background:#fff; border:1px solid; }
#nemuri #mechanism .box ol { counter-reset:number 0; padding:1em 2em 2em; }
#nemuri #mechanism .box ol li { line-height:1.6em; }
#nemuri #mechanism .box ol li:before { counter-increment:number 1; content:counter(number, decimal-leading-zero); display:block; margin-bottom:.2em; font-size:1.6em; font-weight:300; }
#nemuri #mechanism .box ol li:nth-of-type(n+2) { padding-top:1em; }
#nemuri #mechanism .box > p { padding:2em 1em; }


@media screen and (min-width:769px) {
#nemuri #mechanism p:not([class]) { font-size:1.1em; }
#nemuri #mechanism picture { padding:1.6em; }
#nemuri #mechanism p:not([class]),
#nemuri #mechanism > picture,
#nemuri #mechanism .box { width:calc(100% - 4em); }
#nemuri #mechanism > p > br{ display: none; }
}

@media screen and (max-width:768px) {
#nemuri #mechanism picture { padding:1em; }
#nemuri #mechanism p:not([class]),
#nemuri #mechanism > picture,
#nemuri #mechanism .box { width:calc(100% - 2em); }
#nemuri #mechanism .box h4 { font-size:1.2em; }

}

@media screen and (max-width:425px) {
#nemuri #mechanism > *:not(h3) { font-size:.9em; }
#nemuri #mechanism picture { padding:0; }
#nemuri #mechanism .box ol { padding:1em 1em 2em; }
#nemuri #mechanism .box > picture { padding-top:.6em; }
#nemuri #mechanism .box > p { padding:2em 0; }
}



/*==============================
	summary
==============================*/
#nemuri #summary p {
 position:relative;
 width:calc(100% - 3em);
 max-width:28em;
 padding:2em 0;
 text-align:center;
 font-size:1.16em;
 line-height:2em;
 background:#fff;
 border:1px solid;
 box-shadow:.2em .2em .6em rgba(0,0,0,.1);
 z-index:1;
}


@media screen and (min-width:1441px) {
#nemuri #summary { display:flex; justify-content:center; align-items:center; }
#nemuri #summary picture { width:60%; max-width:1024px;; }
#nemuri #summary p { width:45%; margin-left:-5%; padding:2.4em 0; font-size:1.2em; line-height:2.2em; }
}

@media screen and (max-width:1440px) {
#nemuri #summary picture { max-width:1024px; margin:auto; }
#nemuri #summary p { margin:-1.6em auto 0; }
}

@media screen and (min-width:1025px) {
#nemuri #summary { margin-top:6em; }
}

@media screen and (max-width:1024px) {
#nemuri #summary { margin-top:0; }
#nemuri #summary p { max-width:35em; }
}

@media screen and (max-width:425px) {
#nemuri #summary p { width:calc(100% - 1.6em); max-width:22em; font-size:.9em; }
}



/*==============================
	aroma
==============================*/
#nemuri #aroma ul { margin:auto; }
#nemuri #aroma ul img { margin-bottom:.8em; }
#nemuri #aroma ul h4 { margin-bottom:.2em; font-size:1.2em; font-weight:600; }
#nemuri #aroma ul p { line-height:1.5em; }


@media screen and (min-width:1441px) {
#nemuri #aroma ul { width:calc(100% - 4em); }
#nemuri #aroma li { width:calc(100%/4 - .9em); }
#nemuri #aroma li:not(:nth-of-type(4n+1)) { margin-left:1.2em; }
#nemuri #aroma li:nth-of-type(n+5) { margin-top:1.6em; }
}

@media screen and (max-width:1440px) {
#nemuri #aroma ul { width:calc(100% - 3em); }
}

@media screen and (min-width:769px) and (max-width:1440px) {
#nemuri #aroma li { width:calc(100%/3 - .8em); }
#nemuri #aroma li:not(:nth-of-type(3n+1)) { margin-left:1.2em; }
#nemuri #aroma li:nth-of-type(n+4) { margin-top:1.6em; }
}

@media screen and (min-width:769px) {
#nemuri #aroma ul { justify-content:center; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#nemuri #aroma ul { justify-content:flex-start; }
#nemuri #aroma li { width:calc(100%/2 - .6em); }
#nemuri #aroma li:nth-of-type(2n+2) { margin-left:1.2em; }
#nemuri #aroma li:nth-of-type(n+3) { margin-top:1.6em; }
}

@media screen and (max-width:425px) {
#nemuri #aroma ul { width:calc(100% - 2em); font-size:.9em; }
#nemuri #aroma li p { font-size:.9em; }
}

@media screen and (min-width:321px) and (max-width:425px) {
#nemuri #aroma li { width:calc(100%/2 - .4em); }
#nemuri #aroma li:nth-of-type(2n+2) { margin-left:.8em; }
#nemuri #aroma li:nth-of-type(n+3) { margin-top:1.2em; }
}

@media screen and (min-width:321px) {
#nemuri #aroma ul { display:flex; flex-wrap:wrap; }
}

@media screen and (max-width:320px) {
#nemuri #aroma ul { width:100%; font-size:.9em; }
#nemuri #aroma li { width:100%; margin:0; }
#nemuri #aroma li:nth-of-type(n+2) { margin-top:1em; }
#nemuri #aroma li > *:not(picture) { width:calc(100% - 2em); margin-left:auto; margin-right:auto; }
}



/*==============================
	design
==============================*/
#nemuri #design > *:not(h3) { max-width:1024px; margin:auto; }
#nemuri #design > picture:first-of-type { margin-bottom:4em; }
#nemuri #design > ul + picture { margin-top:4em; }
#nemuri #design > p.info { width:calc(100% - 1em); margin-top:2em; text-align:right; font-size:.9em; }

#nemuri #design li.mini { margin:4em auto 0; }
#nemuri #design li picture { box-shadow:.2em .2em .6em rgba(0,0,0,.4); }
#nemuri #design li p { position:relative; padding:3.4em 0 2.6em; text-align:center; font-size:1.1em; color:#fff; background:rgba(0,0,0,.8); z-index:1; }
#nemuri #design li p:before { position:absolute; top:-.8em; left:0; right:0; margin:auto; padding:.4em; font-size:13px; color:var(--txt); background:#fff; border:1px solid; }
#nemuri #design li:nth-of-type(-n+3) p:before { content:'\30A2\30ED\30DE\30B9\30D7\30EC\30FC'; width:9em; }
#nemuri #design li.mini p:before { content:'\30A2\30ED\30DE\30C7\30A3\30D5\30E5\30FC\30B6\30FC'; width:12em; }
#nemuri #design li p > * { display:block; }
#nemuri #design li p b { font-size:1.6em; font-weight:500; letter-spacing:.1em; }
#nemuri #design li p span { margin-top:1em; }

/*color*/
#nemuri #design li:nth-of-type(1) p { background:rgba(var(--taroma-b),.8); }
#nemuri #design li:nth-of-type(2) p { background:rgba(var(--taroma-g),.8); }
#nemuri #design li:nth-of-type(3) p { background:rgba(var(--taroma-m),.8); }
#nemuri #design li.mini p { background:rgba(var(--taroma-mini),.8); }


@media screen and (min-width:1441px) {
#nemuri #design ul { display:flex; flex-wrap:wrap; justify-content:space-between; width:calc(100% - 10em); }
#nemuri #design li { width:calc(100%/3 - 2em); }
#nemuri #design li.mini { display:flex; justify-content:center; align-items:center; width:100%; }
#nemuri #design li.mini picture { width:700px; }
#nemuri #design li:not(.mini) p { width:18em; max-width:calc(100% - 2em); margin:-1em auto 0; padding:2.4em 0 1.6em; }
#nemuri #design li.mini p { width:26em; margin:0 0 0 -1em; }
}

@media screen and (max-width:1440px) {
#nemuri #design ul { max-width:768px; }
#nemuri #design li:not(.mini) { display:flex; justify-content:flex-start; align-items:center; }
#nemuri #design li.mini { max-width:700px; }
#nemuri #design li:nth-of-type(even):not(.mini) { flex-direction:row-reverse; }
#nemuri #design li:nth-of-type(n+2):not(.mini) { margin-top:2em; }
#nemuri #design li:not(.mini) picture { width:60%; }
#nemuri #design li:not(.mini) p { width:40%; padding:3em 0; }
#nemuri #design li:nth-of-type(odd) p { margin-left:-2vw; }
#nemuri #design li:nth-of-type(even):not(.mini) p { margin-right:-2vw; }
#nemuri #design li.mini p { width:calc(100% - 12em); min-width:12em; max-width:20em; margin:-.6em auto 0; }
}

@media screen and (max-width:768px) {
#nemuri #design > picture:first-of-type { margin-bottom:2em; }
#nemuri #design > ul + picture { margin-top:2em; }
}

@media screen and (max-width:425px) {
#nemuri #design li.mini { margin-top:2em; }
#nemuri #design li p { padding:2.4em 0 1.6em; font-size:.9em; }
#nemuri #design li:not(.mini) p { width:calc(40% + 2vw); }
#nemuri #design li:nth-of-type(odd) p { margin-left:-6vw; }
#nemuri #design li:nth-of-type(even):not(.mini) p { margin-right:-6vw; }
#nemuri #design li p span { margin-top:.6em; }
#nemuri #design > p.info { font-size:13px; }
}



/*==============================
	howto
==============================*/
#nemuri #howto ul { margin:auto; }
#nemuri #howto li picture { margin-bottom:1.4em; }
#nemuri #howto li h4 { margin-bottom:.8em; text-align:center; font-size:1.3em; font-weight:600; }
#nemuri #howto li h4 span { display:block; width:12em; margin:0 auto .8em; padding:.4em 0;font-size:.8em; background:rgba(255,255,255,.6); border:1px solid; }
#nemuri #howto li p { line-height:1.6em; }

#nemuri #howto li .box { position:relative; margin:1.6em auto 0; padding:2em 4em 2em 2em; font-size:.9em; background:#fff; }
#nemuri #howto li .box h5 { margin-bottom:.6em; padding-bottom:.6em; font-size:1.2em; font-weight:600; border-bottom:1px solid; }
#nemuri #howto li .box p { padding-right:1em; line-height:1.6em; }
#nemuri #howto li .box picture { position:absolute; top:0; bottom:0; right:2em; width:2em; max-width:36px; aspect-ratio:29/133; margin:auto; transform:rotate(5deg); }

#nemuri #howto a { margin:0 .2em; text-decoration:underline; }


@media screen and (min-width:1441px) {
#nemuri #howto ul { width:calc(100% - 6em); }
#nemuri #howto li { width:calc(100%/2 - 2em); }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#nemuri #howto ul { width:calc(100% - 2em); }
#nemuri #howto li { width:calc(100%/2 - .4em); }
}

@media screen and (min-width:1025px) {
#nemuri #howto ul { display:flex; flex-wrap:wrap; justify-content:space-between; }
#nemuri #howto li:nth-of-type(n+3) { margin-top:4em; }
#nemuri #howto li .box { padding:2em 6em 2em 4em; }
#nemuri #howto li .box picture { right:3em; width:3em; }
}

@media screen and (max-width:1024px) {
#nemuri #howto ul { max-width:800px; }
#nemuri #howto li:nth-of-type(n+2) { margin-top:4em; }
#nemuri #howto li > *:not(picture) { width:calc(100% - 2em); margin-left:auto; margin-right:auto; }
}

@media screen and (max-width:425px) {
#nemuri #howto li { font-size:.9em; }
#nemuri #howto li:nth-of-type(n+2) { margin-top:2em; }
#nemuri #howto li .box { padding:2em 3.6em 2em 1em; font-size:13px; }
#nemuri #howto li .box picture { right:1.6em; }
}

/*==============================
	Spec
==============================*/
[id*='item-detail'] #spec h3 { margin-bottom:.6em; text-align:center; font-size:1.2em; }

[id*='item-detail'] #spec .img { display:flex; justify-content:center; align-items:center; margin-bottom:1.6em; }
[id*='item-detail'] #spec .img img { width:10em; }

[id*='item-detail'] #spec dl { display:flex; flex-wrap:wrap; align-items:stretch; width:calc(100% - 2em); max-width:42em; margin:auto; line-height:1.5em; }
[id*='item-detail'] #spec dl > * { padding:.8em .6em; }
[id*='item-detail'] #spec dl > *:nth-of-type(n+2) { margin-top:.2em; }
[id*='item-detail'] #spec dt { width:8.4em; background:rgba(var(--fit-rgb),.3); }
[id*='item-detail'] #spec dd { width:calc(100% - 8.4em); word-wrap:break-word; background:rgba(var(--fit-rgb),.1); }

[id*='item-detail'] #spec a { text-decoration:underline; }


@media screen and (max-width:768px) {
[id*='item-detail'] #spec .img img { width:8em; }
[id*='item-detail'] #spec dl { font-size:.9em; }
}


/*==============================
	Faq
==============================*/
[id*='item-detail'] #faq h3 { margin-bottom:.6em; text-align:center; font-size:1.2em; }

[id*='item-detail'] #faq dl { width:calc(100% - 2em); max-width:30em; margin:auto; }
[id*='item-detail'] #faq dt {
 position:relative;
 padding:1em 3em 1em 1em;
 line-height:1.2em;
 background:rgba(var(--fit-rgb),.1);
 border-bottom:1px solid rgba(var(--fit-rgb),.4);
 cursor:pointer;
}
[id*='item-detail'] #faq dd { padding:.6em 1em 1em; line-height:1.6em; }

/*active*/
[id*='item-detail'] #faq dt:not(.active) + dd { display:none; }
[id*='item-detail'] #faq dt:before,
[id*='item-detail'] #faq dt:after { content:'';	position:absolute;	top:calc(50% - 1px); right:1em;	width:1.2em;	border-bottom:1px solid var(--fit-cl); transition:.6s; }
[id*='item-detail'] #faq dt:after {	transform:rotate(90deg); }
[id*='item-detail'] #faq .active:before { transform:rotate(-45deg); }
[id*='item-detail'] #faq .active:after {	transform:rotate(45deg); }

/*button*/
[id*='item-detail'] #faq button { display:block; width:calc(100% - 2em); max-width:30em; margin:1em auto 0; text-align:right; background:none; border:none; }

[id*='item-detail'] #faq a { text-decoration:underline; }

/*guide*/
#aromicstyle #aromic-wrapper .guide p span{
  font-weight: bold;
}