@charset'utf-8';

:root { --taroma-b:1,167,203; --taroma-g:62,177,52; --taroma-m:229,15,127; --taroma-mini:0,168,148; }
:root { --taroma-bl:0,171,198; --taroma-gr:22,161,132; --taroma-lgr:79,140,33; --taroma-gl:128,111,44; }

body { font-weight:500; }


カテゴリページ用に設定

/*==============================
	common
==============================*/
#taroma { overflow:hidden; }
#taroma > section:nth-of-type(n+2):not(.arrow) { margin-top:6em; }


/*bg-color*/
#taroma > section.bg-color { margin-bottom:6em; padding:6em 0; background:#edf6f8; }
#taroma > section.bg-color.arrow { position:relative; margin-bottom:12em; padding-top:12em; }
#taroma > section.bg-color.arrow:before,
#taroma > section.bg-color.arrow:after { position:absolute; left:0; right:0; content:''; width:100%; border-right:50vw solid transparent; border-left:50vw solid transparent; z-index:1; }
#taroma > section.bg-color.arrow:before { top:0; border-top:6em solid #fff; }
#taroma > section.bg-color.arrow:after { bottom:-6em; border-top:6em solid #edf6f8; }


/*title*/
#taroma h2 {	margin-bottom:1em;	text-align:center;	font-size:2.8em; font-weight:600; letter-spacing:2px;	}
#taroma #main-vs .bg-area>h2.title{
font-weight: 500;
color:var(--txt);
height: auto;
bottom:auto;
margin: 2vh auto;
padding: 2vw;
writing-mode: horizontal-tb;
font-size:3vw; 
text-shadow: none;
line-height:5vw;
background-color:rgba(255,255,255,.92);
}
#taroma h2:not([class]) { line-height:1.6em; }
#taroma h2.ttl {	width:calc(100% - 4em);	max-width:18em; }
/*#taroma h2.ttl:before {	position:relative;	top:.5em;	content:'';	display:block;	width:100%;	height:1px;	margin:auto;	background:#35380A; }*/
#taroma h2 em {
 display:inline-block;
 margin-bottom:1em;
 padding:0 .4em .6em;
 font-size:.7em;
 font-style:normal;
 line-height:1em;
 letter-spacing:.1em;
 color:rgba(var(--taroma-gr),1);
 border-bottom:.2em solid;
}
#taroma h2:not([class]) span { font-size:.9em; }
#taroma h2.ttl span {text-align: center;	position:relative;	padding:0 .6em;	background:#fff; }
#taroma h2 b { color:rgba(var(--taroma-bl),1); }
#taroma h2 strong { font-size:1.4em; }


@media screen and (max-width:1024px) {
#taroma h2 {	font-size:2.4em; }
}

@media screen and (max-width:768px) {
#taroma #main-vs .bg-area>h2.title{
font-size:4vw; 
line-height:6vw;
}
#taroma > section:nth-of-type(n+2):not(.arrow) { margin-top:4em; }
#taroma > section.bg-color { margin-bottom:4em; padding:4em 0; }
#taroma > section.bg-color.arrow { margin-bottom:8em; padding-top:8em; }
#taroma > section.bg-color.arrow:before,
#taroma > section.bg-color.arrow:after { border-top-width:4em; }
#taroma > section.bg-color.arrow:after { bottom:-4em; }
#taroma h2 {	font-size:1.9em; letter-spacing:1px; }
#taroma h2.ttl {	width:calc(100% - 2em); }
}

@media screen and (max-width:425px) {
#taroma > section.bg-color { margin-bottom:2em; padding:2em 0; }
#taroma > section.bg-color.arrow { margin-bottom:4em; padding-top:4em; }
#taroma > section.bg-color.arrow:before,
#taroma > section.bg-color.arrow:after { border-top-width:2em; }
#taroma > section.bg-color.arrow:after { bottom:-2em; }
#taroma h2 {	font-size:1.4em; letter-spacing:0; }
#taroma h2.ttl span { padding:0 .4em; }
}



/*==============================
	main
==============================*/
/*
#taroma button {
 position:relative;
 display:block;
 width:11.6em;
 margin:1em auto;
 font-size:2em!important;
 font-weight:600;
 line-height:1em;
 letter-spacing:.1em;
 color:#fff;
 background:#39c42f;
 border-radius:.4em;
 box-shadow:0 .2em 0 #209d16;
 overflow:hidden;
}
#taroma button a { display:block; padding:.6em 0 .6em 1.6em; color:#fff; }

#taroma button:after {
 position:absolute;
 content:'';
 top:calc(50% - .3em);
 right:1em;
 display:block;
 width:.6em;
 height:.6em;
 border-right:4px solid;
 border-bottom:4px solid;
 transform:rotate(-45deg);
 transition:.4s;
}

#taroma button:before {
 position:absolute;
 top:0;
 left:-75%;
 content:'';
 width:50%;
 height:100%;
 background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 transform:skewX(-25deg);
 animation:shine 1.6s infinite;
}


@keyframes shine { 100% { left:125%; } }


@media screen and (min-width:1661px) {
#taroma button { font-size:2.4em!important; }
}

@media screen and (max-width:1024px) {
#taroma button { font-size:1.8em!important; }
}

@media screen and (max-width:768px) {
#taroma button { width:10.6em; letter-spacing:1px; }
#taroma button a { padding:.5em 0 .5em 1.2em; }
}

@media screen and (max-width:320px) {
#taroma button { width:10em; font-size:1.6em!important; }
#taroma button a { padding-left:.8em; }
}
*/



/*==============================
	main
==============================*/
#taroma #main-vs { position:relative;/* max-width:1600px;*/ margin:auto; font-weight:600; overflow:hidden; }
#taroma #main-vs .wrap { position:relative; max-width:1600px; height:60vw; max-height:800px; margin:auto; padding:8em 6vw 0; }
#taroma #main-vs .bg-area h2{text-align: left}
#taroma #main-vs h1 { margin:auto; line-height:1.6em; color:#fff; }

#taroma #main-vs .balloon {
 position:absolute;
 color:rgb(var(--taroma-bl));
 font-size:2em;
 background:url(img/balloon.webp) center bottom / cover no-repeat;
}

#taroma #main-vs .catch {
 max-width:6em;
 text-align:center;
 text-shadow:#fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
 line-height:1.4em;
 letter-spacing:1px;
 color:rgb(var(--taroma-bl));
}
#taroma #main-vs .catch b { font-size:1.6em; }
#taroma #main-vs .catch strong {
 display:block;
 width:6.4em;
 margin:.4em auto 0;
 padding:.3em 0 .3em .6em;
 text-shadow:none;
 font-size:.7em;
 font-weight:700;
 line-height:1em;
 letter-spacing:.1em;
 color:#fff;
 background:rgb(var(--taroma-bl));
 border:2px solid;
 transform:rotate(-8deg);
}

#taroma #main-vs p:not([class]) { position:absolute; bottom:.4em; left:.6em; font-size:1.8em; line-height:1.5em; letter-spacing:1px; text-shadow:#f0eeef 2px 0px, #f0eeef -2px 0px, #f0eeef 0px -2px, #f0eeef 0px 2px, #f0eeef 2px 2px, #f0eeef -2px 2px, #f0eeef 2px -2px, #f0eeef -2px -2px, #f0eeef 1px 2px, #f0eeef -1px 2px, #f0eeef 1px -2px, #f0eeef -1px -2px, #f0eeef 2px 1px, #f0eeef -2px 1px, #f0eeef 2px -1px, #f0eeef -2px -1px; }
#taroma #main-vs p:not([class]) em { color:rgb(var(--txt-red)); }

#taroma #main-vs picture { position:absolute; top:0; left:0; display:block; width:100%; max-height:1000px; aspect-ratio:16/10; z-index:-1; }
#taroma #main-vs img { display:block; }


@media screen and (min-width:1601px) {
#taroma #main-vs .wrap { padding:10em 8vw 0; }
#taroma #main-vs .balloon { top:1.6em; }
}

@media screen and (max-width:1600px) {
#taroma #main-vs .balloon { top:1em; }
}

@media screen and (min-width:1441px) {
#taroma #main-vs .catch { font-size:5.4em; }
/*#taroma #main-vs picture { top:-4vw; }*/
}

@media screen and (max-width:1440px) {
#taroma #main-vs .catch { font-size:6vw; }
#taroma #main-vs picture { top:0; }
}

@media screen and (min-width:1025px) {
#taroma #main-vs h1 { position:absolute; bottom:1em; right:1em; text-align:right; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#taroma #main-vs p:not([class]) br { display:none; }
}

@media screen and (max-width:1024px) {
#taroma #main-vs .wrap { height:78vw; padding-top:6.4em; }
#taroma #main-vs h1 { text-align:center; padding:.4em 0; background:#555; }
#taroma #main-vs .balloon { font-size:1.6em; }
#taroma #main-vs .catch { font-size:7vw; font-weight:900; }
#taroma #main-vs p:not([class]) { position:absolute; bottom:.4em; left:0; right:0; margin:auto; text-align:center; font-size:1.6em; }
#taroma #main-vs picture { aspect-ratio:32/25; }
}

@media screen and (max-width:768px) {
#taroma #main-vs .wrap { height:117vw; max-height:820px; }
#taroma #main-vs h1 { font-size:13px; line-height:1.4em; }
#taroma #main-vs .catch { margin-top:.2em; font-size:10vw; }
#taroma #main-vs p:not([class]) { margin-top:6vw; font-size:1.4em; }
#taroma #main-vs picture { aspect-ratio:64/75; }
}

@media screen and (max-width:425px) {
#taroma #main-vs .wrap { padding-top:4.6em; }
#taroma #main-vs .balloon { font-size:1.2em; }
#taroma #main-vs p:not([class]) { font-size:1.1em; }
}

@media screen and (max-width:320px) {
#taroma #main-vs h1 { line-height:1.2em; }
#taroma #main-vs p:not([class]) { font-size:.9em; }
}



/*==============================
	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; }
}



/*==============================
	cause
==============================*/
#taroma #cause { margin:-2em auto 4em; text-align:center; }
#taroma #cause h2 { line-height:1.8em; }

#taroma #cause p { width:calc(100% - 4em); margin:auto; font-size:1.2em; line-height:1.8em; }

#taroma #cause .arrow { position:relative; width:30em; margin:1em auto 0; padding-top:1em; background:linear-gradient(to bottom, #fff 5%, #f4fae8); }
#taroma #cause .arrow:after {
 position:absolute;
 bottom:-2em;
 left:0;
 right:0;
 content:'';
 width:100%;
 border-top:2em solid #f4fae8;
 border-right:15em solid transparent;
 border-left:15em solid transparent;
 filter:drop-shadow(0 .4em .2em rgba(0,0,0,.2));
 z-index:1;
}

#taroma #cause picture { display:block; width:calc(100% - 2em); max-width:600px; margin:1em auto; border:1px solid #eee; box-shadow:0 .2em .4em rgba(0,0,0,.1); }
#taroma #cause picture img { display:block; width:100%; }

#taroma #cause dl { counter-reset:number 0; }
#taroma #cause dt { margin:2em 0 .6em; padding:.6em 0; font-size:2em; color:#fff; background:#555; }
#taroma #cause dd:last-of-type br:first-of-type { display:block; }


@media screen and (min-width:769px) {
#taroma #cause p { word-break:keep-all; word-wrap:break-word; }
#taroma #cause :not(.arrow) p br { display:none; }
}

@media screen and (max-width:768px) {
#taroma #cause { margin:-1em auto 3em; }
#taroma #cause p { width:calc(100% - 1em); font-size:1em; }
#taroma #cause .arrow { width:100%; }
#taroma #cause .arrow:after { border-right-width:50vw; border-left-width:50vw; }
#taroma #cause dt { font-size:1.6em; }
}

@media screen and (max-width:425px) {
#taroma #cause { margin:0 auto 2em; }
#taroma #cause dt { font-size:1.4em; }
}

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



/*==============================
	aroma
==============================*/
#taroma #aroma { background:#f4fae8; }

#taroma #aroma ul { margin:auto; }
#taroma #aroma ul picture { display:block; margin-bottom:.4em; }
#taroma #aroma ul img { display:block; }
#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; }
#taroma #aroma ul picture { width:calc(100% - 1em); margin:0 auto .4em; }
}



/*==============================
	design
==============================*/
#taroma #design > picture { display:block; 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); max-width:1024px; margin:1em auto 0; text-align:right; font-size:.9em; }

#taroma #design > ul { margin:auto; }
#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:3em 0; 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:2em; font-weight:500; letter-spacing:.1em; }
#taroma #design li p span { margin-top:.2em; }

/*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; }
#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%; }
#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; }
#taroma #design li p b { font-size:1.6em; }
}

@media screen and (max-width:425px) {
#taroma #design li.mini { margin-top:2em; }
#taroma #design li p { padding:2.4em 0; 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 > p.info { font-size:13px; }
}



/*==============================
	howto
==============================*/
#taroma #howto { margin-bottom:0; }
#taroma #howto .howto-mini {max-width: 800px;margin: 10vh auto 0;}
#taroma #howto .howtouse h4{ font-size: 1.5em; }
#taroma #howto .howtouse .container{ padding: 10px; }
#taroma #howto .howtouse .container h5{ font-size: 1.3em; padding: 10px 0;border-bottom: 1px #35380A solid }
#taroma #howto .howtouse .capacity{text-align: right;margin-bottom: 10px;}




#taroma #howto ul { width:calc(100% - 3em); margin:auto; }
#taroma #howto li picture { display:block; }
#taroma #howto li picture img { display:block; width:100%; }
#taroma #howto li dl { padding:2em; background:#fff; box-shadow:.2em .2em .5em rgba(0,0,0,.1); }
#taroma #howto li dt { margin-bottom:.6em; text-align:center; font-size:1.3em; font-weight:600; }
#taroma #howto li dt:nth-of-type(n+2) { margin-top:1em; padding-top:.8em; border-top:1px solid; }
#taroma #howto li dt:before { display:block; width:12em; margin:0 auto .6em; padding:.3em 0;font-size:.9em; border:1px solid; }
#taroma #howto li.spray dt:first-of-type:before { content:'\30B9\30D7\30EC\30FC'; }
#taroma #howto li.diffuser dt:first-of-type:before { content:'\7F6E\304D\578B'; }
#taroma #howto li dd { line-height:1.6em; }

#taroma #howto li dt.sub { font-size:1em; }
#taroma #howto li dt.sub + dd { font-size:.9em; }

#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 - 1em); }
}

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

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

@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 dl { padding:1.6em; }
}

@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 dl { padding:1.2em 1em; }
#taroma #howto li dt.sub + dd { font-size:13px; }
}



/*==============================
	flow
==============================*/
#taroma #flow { padding-top:0; text-align:center; background:#edf6f8; }
#taroma #flow:before { display:none; }
#taroma #flow:after { border-top-color:#edf6f8; filter:drop-shadow(0 .4em .2em rgba(0,0,0,.2)); }

#taroma #flow picture { display:block; max-width:1600px; margin:auto; }
#taroma #flow picture img { display:block; width:100%; }

#taroma #flow h2 { padding:.6em 0; line-height:1.4em; color:#fff; background:rgb(var(--taroma-bl)); }

#taroma #flow ul { width:calc(100% - 2em); max-width:16em; margin:auto; text-align:center; font-size:2em; }
#taroma #flow li { position:relative; padding:.8em 0; background:#fff; box-shadow:0 0 .2em rgba(var(--taroma-bl),.6); }
#taroma #flow li:nth-of-type(n+2) { margin-top:.8em; }
#taroma #flow li:nth-of-type(n+2):before {
 position:absolute;
 top:-.71em;
 left:0;
 right:0;
 content:'\FF0B';
 display:block;
 height:1em;
 margin:auto;
 font-size:2em;
 font-weight:400;
 line-height:1em;
 transform:rotate(45deg);
}

#taroma #flow p { margin:2em auto 0; font-size:1.2em; line-height:1.8em; }
#taroma #flow p strong { display:block; margin-top:.4em; font-size:3em; color:rgb(var(--taroma-bl)); }
#taroma #flow p strong span { display:block; margin-top:.8em; font-size:.4em; color:var(--txt); }


@media screen and (min-width:1601px) {
#taroma #flow picture { box-shadow:.2em .2em .6em rgba(0,0,0,.4); }
}

@media screen and (min-width:769px) {
#taroma #flow h2 br { display:none; }
#taroma #flow p br:first-of-type { display:none; }
}

@media screen and (max-width:768px) {
#taroma #flow h2 span { display:none; }
#taroma #flow ul { font-size:1.6em; }
#taroma #flow p { font-size:1.1em; }
#taroma #flow p strong { font-size:2.8em; }
}

@media screen and (max-width:425px) {
#taroma #flow ul { font-size:6vw; }
#taroma #flow p { margin-top:1.4em; font-size:1em; }
}



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

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


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

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



/*==============================
	support
==============================*/
#taroma #support h2 { margin-bottom:.2em; }
#taroma #support h2 + p { text-align:center; font-size:1.4em; }

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

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

#taroma #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; }
#taroma #support dt { position:absolute; top:-.8em; left:0; right:0; width:8em; margin:auto; background:#fff; }
#taroma #support dd a { display:flex; justify-content:center; align-items:center; font-size:2em; }
#taroma #support dd a > * { display:inline-block; }
#taroma #support dd a svg { width:1.2em; stroke-width:4px; margin-right:.4em; }
#taroma #support dd p { margin-top:.6em; font-size:.9em; }


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

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



/*==============================
	wrapup
==============================*/
#taroma #wrapup { margin:6em auto 0; padding:0; background:#fff; }
#taroma #wrapup:before { display:none; }
#taroma #wrapup:after { border-top-color:#fff; filter:drop-shadow(0 .6em .4em rgba(0,171,198,.2)); }

#taroma #wrapup .box { display:flex; justify-content:center; align-items:center; padding:1em 0; font-size:1.4em; background:#eee; }
#taroma #wrapup .box p span { position:relative; display:block; padding-left:1.6em; text-indent:-1em; }
#taroma #wrapup .box p span:nth-of-type(n+2) { margin-top:.4em; }
#taroma #wrapup .box p span:before {
 position:absolute;
 top:.5em;
 left:0;
 content:'';
 display:block;
 width:.5em;
 height:.9em;
 border-right:2px solid;
 border-bottom:2px solid;
 transform:translate(-25%,-50%) rotate(45deg);
}

#taroma #wrapup .balloon { position:relative; padding:.6em 0; text-align:center; font-size:1.8em; color:#fff; background:rgb(var(--taroma-tt)); }
#taroma #wrapup .balloon:after {
 position:absolute;
 bottom:-1.3em;
 left:0;
 right:0;
 content:'';
 width:.6em;
 margin:auto;
 border:.6em solid transparent;
 border-top:.8em solid rgb(var(--taroma-tt));
 z-index:1;
}

#taroma #wrapup .img { position:relative; max-width:1600px; margin:auto; font-weight:600; }
#taroma #wrapup .img > *:not(picture) { position:absolute; }
#taroma #wrapup .img p:not([class]) { top:1em; left:1em; font-size:2.6em; line-height:1.8em; text-shadow:#f1eff0 2px 0px, #f1eff0 -2px 0px, #f1eff0 0px -2px, #f1eff0 0px 2px, #f1eff0 2px 2px, #f1eff0 -2px 2px, #f1eff0 2px -2px, #f1eff0 -2px -2px, #f1eff0 1px 2px, #f1eff0 -1px 2px, #f1eff0 1px -2px, #f1eff0 -1px -2px, #f1eff0 2px 1px, #f1eff0 -2px 1px, #f1eff0 2px -1px, #f1eff0 -2px -1px; }
#taroma #wrapup .img p.name { bottom:2vw; right:3vw; text-align:center; text-shadow:.06em .06em .1em rgba(0,0,0,.6); font-size:6em; color:#fff; }
#taroma #wrapup .img p.name strong { font-weight:300; }
#taroma #wrapup .img p.name span { display:inline-block; margin-left:.6em; font-size:.4em; }
#taroma #wrapup .img picture { display:block; width:100%; max-width:1600px; margin:auto; }

#taroma #wrapup .img + p { margin-top:1em; text-align:center; font-size:2em; font-weight:600; line-height:1.8em; }
#taroma #wrapup .img + p b { color:#39c42f; }


@media screen and (max-width:1440px) {
#taroma #wrapup .img p:not([class]) { font-size:3vw; }
#taroma #wrapup .img p.name { font-size:6vw; }
}

@media screen and (max-width:1024px) {
#taroma #wrapup .img p:not([class]) { top:4vw; left:4vw; font-size:4.6vw; line-height:1.6em; }
#taroma #wrapup .img p.name { font-size:10vw; }
}

@media screen and (max-width:768px) {
#taroma #wrapup { margin-top:4em; }
#taroma #wrapup .box { font-size:1.2em; }
#taroma #wrapup .balloon { font-size:4vw; }
#taroma #wrapup .img p.name { bottom:3vw; }
#taroma #wrapup .img + p { font-size:1.5em; }
}

@media screen and (max-width:425px) {
#taroma #wrapup .box { font-size:1em; }
#taroma #wrapup .box p { margin-left:1em; }
#taroma #wrapup .balloon { font-size:5vw; }
#taroma #wrapup .img p.name { font-size:12vw; }
#taroma #wrapup .img + p { margin-top:.2em; font-size:5.6vw; line-height:1.6em; }
}



/*==============================
	item list
==============================*/
#taroma #item-list { margin-top:0; padding-top:11em; }
#taroma #item-list li { background:#fff; }


@media screen and (max-width:768px) {
#taroma #item-list { padding-top:7em; }
}

@media screen and (max-width:425px) {
#taroma #item-list { padding-top:4em; }
}