@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; }



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

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

#taroma picture { display:block; width:100%; }
#taroma picture img { display:block; width:100%; }


/*title*/
#taroma 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:rgba(var(--taroma-tt),.9); }


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

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

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

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

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



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



/*==============================
	main
==============================*/
#taroma #main-vs { position:relative; }
#taroma #main-vs.new:before {
 position:absolute;
 content:'New';
 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;
}

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

#taroma #main-vs .bg-area { position:relative; max-width:2000px; aspect-ratio:2/1; margin:auto; }
#taroma #main-vs .bg-area > *:not(picture) { position:absolute; margin:auto; z-index:1; }

#taroma #main-vs h2 { height:10em; writing-mode:vertical-rl; font-weight:600; letter-spacing:.1em; color:rgb(var(--taroma-tt)); }

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

#taroma #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) {
#taroma #main-vs.new:before { bottom:2em; right:8vw!important; }
#taroma #main-vs h2 { font-size:4em; }
#taroma #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; }
#taroma.lp-area #main-vs .balloon { right:16vw; }
#taroma #main-vs .balloon:after { content:'\3002'; }
#taroma #main-vs .name { font-size:1.4em; }
}

@media screen and (max-width:1440px) {
#taroma #main-vs.new:before { bottom:1.2em; font-size:2.4em; }
#taroma #main-vs .balloon { position:relative; width:100%; padding:1em 0; text-align:center; font-size:1.1em; background:rgb(var(--taroma-tt)); }
#taroma #main-vs .balloon:after {
 position:absolute;
 bottom:-1.6em;
 left:0;
 right:0;
 content:'';
 width:.6em;
 margin:auto;
 border:.6em solid transparent;
 border-top:1.2em solid rgb(var(--taroma-tt));
 z-index:1;
}
#taroma #main-vs .balloon br { display:none; }
}

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

@media screen and (max-width:768px) {
#taroma #main-vs.new:before { bottom:22vw; right:.6em; font-size:5vw; }
#taroma #main-vs .balloon { font-size:1em; }
#taroma #main-vs .bg-area { aspect-ratio:8/7; }
#taroma #main-vs h2 { top:6vw; bottom:auto; left:4vw; font-size:7vw; line-height:1.6em; 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; }
#taroma #main-vs .name { padding:.6em 0 2em; font-size:1.1em; }
}

@media screen and (max-width:425px) {
#taroma #main-vs .balloon,
#taroma #main-vs .name { font-size:.9em; }
}

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



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



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

@media screen and (min-width:1441px) {
.item-tab #taroma #main-vs.new:before { top:.2em; z-index:2; }
.item-tab #taroma #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:rgb(var(--taroma-tt)); }
.item-tab #taroma #main-vs .balloon:after {
 position:absolute;
 bottom:-1.6em;
 left:0;
 right:0;
 content:'';
 width:.6em;
 margin:auto;
 border:.6em solid transparent;
 border-top:1.2em solid rgb(var(--taroma-tt));
 z-index:1;
}
.item-tab #taroma #main-vs .balloon br { display:none; }
}



/*==============================
	lineup
==============================*/
#taroma #lineup { padding:2em 0 4em; }
#taroma #lineup h2 { margin-bottom:1em; text-align:center; font-size:1.8em; font-weight:600; }
#taroma #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)); }
#taroma #lineup h3:after { position:relative; top:-.1em; content:'\30BF\30A4\30D7'; margin-left:.3em; font-size:.8em; }
#taroma #lineup h3:nth-of-type(n+2) { margin-top:1em; }

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

#taroma #lineup .label-design { max-width:20em; margin:auto; }
#taroma #lineup .label-design p { text-align:center; }
#taroma #lineup .label-design p:first-of-type { text-align:center; font-weight:600; }
#taroma #lineup .label-design span.info { display:block; margin-top:.2em; text-align:right; font-size:12px; line-height:1.6em; }
#taroma #lineup .label-design a { display:block; width:60%; max-width:240px; margin:.6em auto; }
#taroma #lineup .label-design a:after { content:'\30AF\30EA\30C3\30AF\3067\62E1\5927'; display:block; margin:.2em; text-align:center; font-size:12px; }
#taroma #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) {
#taroma #lineup { padding:1em 0 3em; }
#taroma #lineup h2 { font-size:1.6em; }
#taroma #lineup h3 { font-size:1.3em; }
#item-detail01 #taroma #lineup > h2.ttl { font-size:1.2em; }
}

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

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



/*==============================
	mechanism
==============================*/
#taroma #mechanism { position:relative; background:url(img/background.webp) 0 6em / contain no-repeat; }
#taroma #mechanism:after { position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:rgba(119,206,227,.1); z-index:1; }
#taroma #mechanism > * { position:relative; z-index:2; }

#taroma #mechanism p:not([class]) { margin:auto; line-height:1.6em; }
#taroma #mechanism > h3 + p { max-width:67em; }
#taroma #mechanism > picture + p { max-width:64em; }

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

#taroma #mechanism .box { max-width:52em; margin:4em auto 0; background:#fff; box-shadow:.2em .2em .6em rgba(0,0,0,.1); }
#taroma #mechanism .box h4 { position:absolute; top:-1.4em; left:1.2em; display:inline-block; padding:.6em 1.2em; font-size:1.3em; background:#fff; border:1px solid; }
#taroma #mechanism .box ol { counter-reset:number 0; padding:1em 2em 2em; }
#taroma #mechanism .box ol li { line-height:1.6em; }
#taroma #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; }
#taroma #mechanism .box ol li:nth-of-type(n+2) { padding-top:1em; }
#taroma #mechanism .box > p { padding:2em 1em; }


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

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

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



/*==============================
	summary
==============================*/
#taroma #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) {
#taroma #summary { display:flex; justify-content:center; align-items:center; }
#taroma #summary picture { width:60%; max-width:1024px;; }
#taroma #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) {
#taroma #summary picture { max-width:1024px; margin:auto; }
#taroma #summary p { margin:-1.6em auto 0; }
}

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

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

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



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


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

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

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

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

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

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

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

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

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



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

#taroma #design li.mini { margin:4em auto 0; }
#taroma #design li picture { box-shadow:.2em .2em .6em rgba(0,0,0,.4); }
#taroma #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; }
#taroma #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; }
#taroma #design li:nth-of-type(-n+3) p:before { content:'\30A2\30ED\30DE\30B9\30D7\30EC\30FC'; width:9em; }
#taroma #design li.mini p:before { content:'\30A2\30ED\30DE\30C7\30A3\30D5\30E5\30FC\30B6\30FC'; width:12em; }
#taroma #design li p > * { display:block; }
#taroma #design li p b { font-size:1.6em; font-weight:500; letter-spacing:.1em; }
#taroma #design li p span { margin-top:1em; }

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


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

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

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

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



/*==============================
	howto
==============================*/
#taroma #howto ul { margin:auto; }
#taroma #howto li picture { margin-bottom:1.4em; }
#taroma #howto li h4 { margin-bottom:.8em; text-align:center; font-size:1.3em; font-weight:600; }
#taroma #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; }
#taroma #howto li p { line-height:1.6em; }

#taroma #howto li .box { position:relative; margin:1.6em auto 0; padding:2em 4em 2em 2em; font-size:.9em; background:#fff; }
#taroma #howto li .box h5 { margin-bottom:.6em; padding-bottom:.6em; font-size:1.2em; font-weight:600; border-bottom:1px solid; }
#taroma #howto li .box p { padding-right:1em; line-height:1.6em; }
#taroma #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); }

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


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

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

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

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

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

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

#taroma #trouble { color:#fff; background:#999; }
#taroma #trouble:after { border-top-color:#999; filter:drop-shadow(0 .4em .2em rgba(0,0,0,.2)); }
#taroma #trouble ul { width:calc(100% - 2em); margin:auto; font-size:1.4em; }
#taroma #trouble li { display:flex; justify-content:space-between; align-items:stretch; }
#taroma #trouble li:nth-of-type(even) { flex-direction:row-reverse; }
#taroma #trouble li:nth-of-type(n+2) { margin-top:1em; }
#taroma #trouble li p { width:calc(100% - 9em); padding:1em; line-height:1.6em; color:#35380A; background:#eee; }
#taroma #trouble li p b { display:block; font-size:1.4em; }
#taroma #trouble li picture { display:block; width:12em; }
#taroma #trouble li img { display:block; width:100%; }


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

@media screen and (max-width:1024px) {
#taroma #trouble ul { max-width:26em; }
#taroma #trouble li p b { margin-top:.2em; }
}

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

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

@media screen and (max-width:425px) {
#taroma #trouble ul { max-width:22.4em; }
#taroma #trouble li p { line-height:1.6em; }
#taroma #trouble li p b { font-size:5.4vw; }
#taroma #trouble li picture { width:10em; }
}

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


/*==============================
	voice
==============================*/
#t-aroma #voice { margin-bottom:2em; background:#f2f0ea; }

#t-aroma #voice ul { width:calc(100% - 3em); max-width:60em; margin:auto; }
#t-aroma #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); }
#t-aroma #voice li:nth-of-type(n+2) { margin-top:2em; }
#t-aroma #voice li:nth-of-type(even) { flex-direction:row-reverse; }
#t-aroma #voice li h3 { font-size:1.6em; font-weight:600; color:#806f2c; }
#t-aroma #voice li:nth-of-type(odd) h3 { margin-right:1em; }
#t-aroma #voice li:nth-of-type(even) h3 { margin-left:1em; }
#t-aroma #voice li picture { display:block; width:8em; max-width:100px; height:8em; max-height:100px; padding:.4em; background:#f2f0ea; border-radius:50vh; }
#t-aroma #voice li img { display:block; width:100%;height:auto;transition: .4s;max-width: 100%;}
#t-aroma #voice li p { width:100%; margin-top:1em; font-size:1.2em; }


@media screen and (max-width:768px) {
#t-aroma #voice ul { font-size:.9em; }
#t-aroma #voice li picture { width:6em; height:6em; }
}

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