@charset'utf-8';

:root { --fubric-rgb:160,180,60; --fubric-gr:#1b641e; --fubric-txt:#5d706c; }



/*==============================
	common
==============================*/
#fabricmist { max-width:2000px; margin:auto; font-weight:500; color:var(--fubric-txt); }
#fabricmist .bg-box { position:relative; padding:6em 0; overflow:hidden; }
#fabricmist .bg-color { background:rgba(var(--fubric-rgb),.16); }

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


/*title*/
#fabricmist h2.ttl { position:relative; width:calc(100% - 2em); margin:3em auto 2em; font-size:1.8em; line-height:1.8em; letter-spacing:.1em; }
#fabricmist h2.ttl span { background:linear-gradient(transparent 60%, rgba(var(--fubric-rgb),.12) 0%); }
#fabricmist h2.ttl em { padding:0 .1em; }

#fabricmist h3.ttl {
 display:flex;
 justify-content:center;
 align-items:center;
 margin-bottom:.8em;
 text-align:center;
 font-size:1.4em;
 line-height:1.6em;
 text-shadow:1px 1px .14em rgba(var(--fubric-rgb),.4);
}
#fabricmist h3.ttl:nth-of-type(n+2) { margin-top:4em; }
#fabricmist h3.ttl img { width:2em; margin-right:.6em; }
#fabricmist h3.ttl span { display:inline-block; text-align:left; }


/*text*/
#fabricmist p.txt { text-align:center; font-size:1.1em; line-height:2em; }
#fabricmist p.info { width:calc(100% - 1em); max-width:800px; margin:auto; text-align:right; font-size:.8em; line-height:1.6em; }


@media screen and (min-width:1025px) {
#fabricmist h2.ttl { font-size:2em; }
}

@media screen and (min-width:769px) {
#fabricmist h2.ttl { text-align:center; }
}

@media screen and (max-width:768px) {
#fabricmist h2.ttl { font-size:1.5em; letter-spacing:1px; }
#fabricmist h3.ttl { font-size:1.2em; }
#fabricmist h3.ttl:nth-of-type(n+2) { margin-top:3em; }
#fabricmist p.txt { font-size:1em; }
}

@media screen and (max-width:425px) {
#fabricmist h2.ttl { margin-bottom:1.4em; font-size:5.6vw; letter-spacing:0; }
#fabricmist h3.ttl:nth-of-type(n+2) { margin-top:2em; }
#fabricmist p.txt { font-size:.9em; }
#fabricmist p.info { font-size:12px; }
}

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



/*==============================
	main vs
==============================*/
#fabricmist #main-vs { position:relative; max-width:1440px; height:700px; margin:auto; line-height:1em; }
#fabricmist #main-vs > *:not(picture) { position:absolute; }
#fabricmist #main-vs > *:not(picture):not(.bg-color) { z-index:2; }

#fabricmist #main-vs .catch { top:6vw; left:26vw; padding:1.2em 2em; text-align:center; font-size:1.4em; letter-spacing:.1em; color:#fff; background:rgba(var(--fubric-rgb),.9); }
#fabricmist #main-vs .catch:after {
 position:absolute;
 right:2em;
 bottom:-1.4em;
 content:'';
 display:block;
 border:.4em solid transparent;
 border-top:1.2em solid rgba(var(--fubric-rgb),.9);
 transform:rotate(-20deg);
}
#fabricmist #main-vs .catch b { margin-right:2px; font-size:1.4em; letter-spacing:0; }

#fabricmist #main-vs h1 { bottom:6vw; left:4vw; font-size:1.8em; }
#fabricmist #main-vs h1 > * { display:block; }
#fabricmist #main-vs h1 span:first-of-type { padding:.6em 1em; text-align:center; background:#fff; border:1px solid; }
#fabricmist #main-vs h1 span:last-of-type { font-size:.9em; }
#fabricmist #main-vs h1 img { width:auto; height:1.6em; margin:1em 0; }

#fabricmist #main-vs picture { position:relative; display:block; width:92vw; max-width:1320px; margin-left:auto; box-shadow:-.2em -.2em .6em rgba(0,0,0,.06); z-index:1; }
#fabricmist #main-vs .bg-color { bottom:0; left:0; width:100%; background:rgba(var(--fubric-rgb),.16); }


@media screen and (min-width:1441px) {
#fabricmist #main-vs { height:700px; font-size:1.1em; }
#fabricmist #main-vs .catch { font-size:1.6em; }
#fabricmist #main-vs .bg-color { height:600px; }
}

@media screen and (max-width:1440px) {
#fabricmist #main-vs { height:48.6vw; }
#fabricmist #main-vs .bg-color { height:42vw; }
}

@media screen and (max-width:1024px) {
#fabricmist #main-vs { font-size:.9em; }
#fabricmist #main-vs h1 { font-size:1.6em; }
}

@media screen and (max-width:768px) {
#fabricmist #main-vs { height:80.5vw; font-size:2.5vw; }
#fabricmist #main-vs .catch { top:8vw; left:16vw; }
#fabricmist #main-vs h1 { bottom:4vw; left:3vw; font-size:1.5em; }
#fabricmist #main-vs .bg-color { height:74vw; }
}

@media screen and (max-width:425px) {
#fabricmist #main-vs { height:115vw; font-size:3vw; }
#fabricmist #main-vs h1 img { margin:.8em 0; }
#fabricmist #main-vs .bg-color { height:106vw; }
}



/*==============================
	description
==============================*/
#fabricmist #description { max-width:1440px; margin:auto; padding:4em 0; }
#fabricmist #description h2 { margin:1.6em auto 1em; text-align:center; font-size:1.6em; letter-spacing:.1em; }
#fabricmist #description h2 + p { text-align:center; line-height:2em; }
#fabricmist #description h2 + p b { margin:0 .1em; padding:0 .1em; background:rgba(255,255,255,.8); }

#fabricmist #description .circle {
 display:flex;
 justify-content:center;
 align-items:center;
 width:calc(100% - 2em);
 max-width:20em;
 margin:auto;
 text-align:center;
 font-size:1.5em;
 font-weight:400;
}
#fabricmist #description .circle span { display:block; width:4.4em; height:4.4em; line-height:4.4em; letter-spacing:.1em; background:#fff; border:1px solid; border-radius:50vh; }
#fabricmist #description .circle span:nth-of-type(n+2) { margin-left:.6em; }


@media screen and (min-width:1025px) {
#fabricmist #description { font-size:1.1em; }
}

@media screen and (max-width:768px) {
#fabricmist #description h2 { font-size:1.36em; letter-spacing:1px; }
#fabricmist #description .circle { font-size:1.3em; }
}

@media screen and (max-width:425px) {
#fabricmist #description { padding:3em 0; font-size:.9em; }
#fabricmist #description h2 { letter-spacing:0; }
}

@media screen and (max-width:320px) {
#fabricmist #description h2 { font-size:1.2em; }
#fabricmist #description h2 + p { font-size:13px; }
}



/*==============================
	mechanism
==============================*/
#fabricmist #mechanism picture { display:block; width:calc(100% - 2em); max-width:500px; margin:1em auto 0; padding:1em; box-shadow:0 0 .6em rgba(0,0,0,.1); }

#fabricmist #mechanism .acd { width:calc(100% - 2em); max-width:600px; margin:2em auto 0; }
#fabricmist #mechanism .acd > * { background:rgba(var(--fubric-rgb),.16); }
#fabricmist #mechanism .acd h3 { position:relative; padding:1em; cursor:pointer; }
#fabricmist #mechanism .acd h3:after {
 position:absolute;
 top:calc(50% - 3px);
 right:1em;
 content:'';
 display:block;
 width:.8em;
 height:.8em;
 border-right:1px solid;
 border-bottom:1px solid;
 transform:translate(-25%,-50%) rotate(43deg);
 transition:.4s;
}
#fabricmist #mechanism .acd h3.open:after { transform:rotate(-135deg); }
#fabricmist #mechanism .acd h3:nth-of-type(n+2) { margin-top:.4em; }
#fabricmist #mechanism .acd dl { padding:0 1em 1em; transition:padding-top .4s ease-out, padding-bottom .4s ease-out; }
#fabricmist #mechanism .acd h3:not(.open) + dl { height:0; padding:0; visibility:hidden; }
#fabricmist #mechanism .acd dt { margin-bottom:.2em; }
#fabricmist #mechanism .acd dt:nth-of-type(n+2) { margin-top:.8em; }


@media screen and (min-width:1025px) {
#fabricmist #mechanism p.txt br:nth-of-type(1) { display:none; }
}

@media screen and (min-width:769px) {
#fabricmist #mechanism h2.ttl br:nth-of-type(2) { display:none; }
}

@media screen and (max-width:425px) {
#fabricmist #mechanism picture { padding:.6em; }
#fabricmist #mechanism .acd { margin-top:1em; font-size:.9em; }
}



/*==============================
	aroma
==============================*/
:root { --fubric-aroma1:63,152,74; }

#fabricmist #aroma > picture { display:block; width:calc(100% - 2em); max-width:500px; margin:0 auto 1.2em; }

#fabricmist #aroma [class*='aroma'] { padding:2.4em 0 3em; text-align:center; }
#fabricmist #aroma [class*='aroma']:first-of-type { margin-top:2em; }

#fabricmist #aroma h4 { margin-bottom:1em; text-align:center; font-size:1.1em; }
#fabricmist #aroma h4 > * { display:block; }
#fabricmist #aroma h4 b { font-size:1.8em; letter-spacing:.1em; }
#fabricmist #aroma h4 span { margin-top:.2em; }

#fabricmist #aroma ul { display:flex; flex-wrap:wrap; justify-content:center; width:calc(100% - 4em); max-width:800px; margin:1.6em auto 0; }

#fabricmist #aroma p.txt:nth-of-type(2) + p.info { margin-top:1em; text-align:center; font-weight:400; }

#fabricmist #aroma [class*='aroma'] > p.info { max-width:none; margin-top:2em; text-align:left; font-weight:400; }


/*color*/
#fabricmist #aroma .aroma1 { background:rgba(var(--fubric-aroma1),.08); }
#fabricmist #aroma .aroma1 h4 { color:rgb(var(--fubric-aroma1)); }


@media screen and (min-width:1441px) {
#fabricmist #aroma ul { max-width:1400px; }
#fabricmist #aroma li { width:calc(100%/7 - 1.8em); margin-left:2.1em; }
#fabricmist #aroma li:first-of-type { margin-left:0; }
}

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

@media screen and (min-width:1025px) {
#fabricmist #aroma p.txt:nth-of-type(1) br:nth-of-type(2) { display:none; }
}

@media screen and (min-width:769px) {
#fabricmist #aroma h2.ttl br:nth-of-type(1) { display:none; }
#fabricmist #aroma p.txt:nth-of-type(2) br:nth-of-type(3) { display:none; }
#fabricmist #aroma [class*='aroma'] > p.info { text-align:right; }
}

@media screen and (max-width:768px) {
#fabricmist #aroma ul { width:calc(100% - 2.4em); max-width:600px; font-size:.9em; }
}

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

@media screen and (max-width:425px) {
#fabricmist #aroma [class*='aroma'] { font-size:.9em; }
#fabricmist #aroma h4 { font-size:.96em; }
#fabricmist #aroma p.txt:nth-of-type(2) + p.info { text-align:left; }
}

@media screen and (max-width:320px) {
#fabricmist #aroma h4 + p { font-size:13px; }
#fabricmist #aroma ul { max-width:240px; }
#fabricmist #aroma li { width:calc(100%/2 - .6em); margin-left:1.2em; }
#fabricmist #aroma li:nth-of-type(2n+1) { margin-left:0; }
#fabricmist #aroma li:nth-of-type(n+3) { margin-top:1em; }
}



/*==============================
	howto
==============================*/
#fabricmist #howto b { font-size:1.2em; }

#fabricmist #howto picture { display:block; }
#fabricmist #howto > picture { width:100%; max-width:800px; margin:2em auto .4em; }
#fabricmist #howto > picture:first-of-type { margin-top:3em; }
#fabricmist #howto > picture + p { text-align:center; text-shadow:1px 1px .14em rgba(var(--fubric-rgb),.4); font-size:1.1em; }
#fabricmist #howto > picture + p span { text-shadow:none; font-size:.9em; }

#fabricmist #howto ul { width:calc(100% - 4em); max-width:1440px; margin:4em auto 0; }
#fabricmist #howto li { display:flex; flex-wrap:wrap; align-items:center; }
#fabricmist #howto li picture { width:calc(30% - 1em); margin-right:1em; }
#fabricmist #howto li dl { width:70%; }
#fabricmist #howto dt { margin-bottom:.4em; text-shadow:1px 1px .14em rgba(var(--fubric-rgb),.4); }



@media screen and (min-width:1025px) {
#fabricmist #howto > picture + p { font-size:1.2em; }
}

@media screen and (min-width:769px) {
#fabricmist #howto h2.ttl br:nth-of-type(1) { display:none; }
#fabricmist #howto p.txt br:nth-of-type(3) { display:none; }
#fabricmist #howto ul { display:flex; }
#fabricmist #howto li:nth-of-type(2n+2) { margin-left:2em; }
}

@media screen and (max-width:768px) {
#fabricmist #howto > picture:first-of-type { margin-top:2em; }
#fabricmist #howto ul { width:calc(100% - 3em); margin-top:2em; }
#fabricmist #howto li:nth-of-type(n+2) { margin-top:1em; }
#fabricmist #howto li picture { width:calc(35% - 1em); }
#fabricmist #howto li dl { width:65%; }
}

@media screen and (min-width:426px) {
#fabricmist #howto li dt br { display:none; }
}

@media screen and (max-width:425px) {
#fabricmist #howto > picture + p { font-size:1em; }
#fabricmist #howto ul { width:calc(100% - 2em); font-size:.9em; }
#fabricmist #howto li picture { width:calc(40% - 1em); }
#fabricmist #howto li dl { width:60%; }
}

@media screen and (max-width:320px) {
#fabricmist #howto ul { font-size:13px; }
#fabricmist #howto li picture { width:calc(36% - .6em); margin-right:.6em; }
#fabricmist #howto li dl { width:64%; }
}