@charset'utf-8';

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



/*==============================
	layout
==============================*/
.item-tab { max-width:none; }



/*==============================
	Root
==============================*/
:root {
 --fit-cl:#c4a93e;
 --fit-rgb:196,169,92;
 --fit-red:185,44,44;
 --fit-aroma-cle:49,103,163;		
 --fit-aroma-sky:97,182,195;
 --fit-aroma-wrk:63,141,187;
 --fit-aroma-sun:225,154,104;
 --fit-aroma-tim:160,202,34;
 --fit-aroma-slw:154,131,189;
 --fit-aroma-flw:225,150,171;
 --fit-aroma-pst:242,188,73;
 --fit-aroma-kfn:35,152,140;
 --fit-aroma-vrs:100,182,153;
 --fit-aroma-bug:218,226,75;
 --fit-font:'Mohave','游ゴシック体','Yu Gothic','YuGothic','ヒラギノ角ゴシック Pro','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
 --fit-txt-sdw:white 2px 0px, white -2px 0px, white 0px -2px, white 0px 2px, white 2px 2px, white -2px 2px, white 2px -2px, white -2px -2px, white 1px 2px, white -1px 2px, white 1px -2px, white -1px -2px, white 2px 1px, white -2px 1px, white 2px -1px, white -2px -1px;
}



/*==============================
	Common
==============================*/
#item-fit { padding-bottom:4em; background:#fff; }
#item-fit > section { max-width:1400px; margin:auto; }
/*#item-fit > section:nth-of-type(n+2) { margin-top:6em; }*/
#item-fit #main-detail picture img{
  max-width: 1600px;
}
#item-fit #aroma picture img{
  max-width: 800px;text-align: center;margin: auto;
}

/*
#item-fit a { text-decoration:underline; }

#item-fit h3 { margin-bottom:1.6em; text-align:center; font-size:1.2em; font-weight:500; }
#item-fit h3.ttl { position:relative; width:calc(100% - 2em); margin:0 auto 2.6em; padding:3em 0 0 1em; text-align:left; color:var(--fit-cl); }
#item-fit h3:not(.ttl) { font-size:1.26em; letter-spacing:1px; }
#item-fit section:not(#present) h3 em { position:absolute; top:0; left:0; font-family:var(--fit-font); font-size:5em; font-style:normal; letter-spacing:0; color:rgba(var(--fit-rgb),.12); }
#item-fit h3 span { display:inline-block; letter-spacing:0; }
#item-fit h3 b { font-size:1.4em; font-weight:500; letter-spacing:1px; }
#item-fit h3 b > i { font-style:normal; }


@media screen and (min-width:1025px) {
#item-fit > section:nth-of-type(n+2) { margin-top:10em; }
#item-fit h3 { font-size:1.4em; }
}

@media screen and (max-width:768px) {
#item-fit h3.ttl { margin-bottom:2em; }
}

@media screen and (max-width:425px) {
#item-fit { font-size:.9em; }
#item-fit h3.ttl { width:calc(100% - 1em); }
}

*/


/*==============================
	movie
==============================*/
#item-fit .youtube { margin:0 auto 2em; }


@media screen and (max-width:768px) {
#item-fit .youtube { width:calc(100% - 2em); }
#item-fit iframe { height:54vw; }
}



/*==============================
	new aroma
==============================*/
/*
#item-fit .new-aroma { position:relative; margin:auto; background:rgba(var(--fit-aroma-cle),.2); }
#item-fit .new-aroma:before {
 position:absolute;
 top:-.1em;
 left:1em;
 content:'\65B0\767B\5834';
 display:block;
 padding:.1em .4em;
 font-size:.9em;
 color:rgb(var(--txt-red));
 background:#fff;
 border:1px solid;
}
#item-fit .new-aroma > * { display:block; }
#item-fit .new-aroma:after {
 position:absolute;
 top:0;
 right:0;
 content:'';
 width:10em;
 height:100%;
 background:linear-gradient(to right, rgba(var(--fit-aroma-cle),0) 10%, rgba(var(--fit-aroma-cle),.6));
}
#item-fit .new-aroma p b { display:block; margin:.1em 0; font-size:1.7em; font-weight:600; color:rgb(var(--fit-aroma-cle)); }
#item-fit .new-aroma p b span { display:inline-block; margin-left:.4em; font-size:.7em; }
#item-fit .new-aroma picture { position:absolute; top:0; width:6em; z-index:1; }


@media screen and (min-width:769px) {
#item-fit .new-aroma { max-width:32em; padding:2em 2em 1em; }
#item-fit .new-aroma picture { right:1.6em; }
}

@media screen and (max-width:768px) {
#item-fit .new-aroma { max-width:30em; padding:2em 1em 1em; font-size:.9em; }
#item-fit .new-aroma:after { width:9em; }
#item-fit .new-aroma picture { right:1em; }
}

@media screen and (min-width:426px) {
#item-fit .new-aroma { border-top:1em solid #f9f6ef; }
#item-fit .new-aroma picture { }
}

@media screen and (max-width:425px) {
#item-fit .new-aroma:after { width:7em; }
#item-fit .new-aroma p { font-size:13px; }
#item-fit .new-aroma picture { opacity:.8; }
}

@media screen and (max-width:320px) {
#item-fit .new-aroma p { font-size:12px; }
}

*/


/*==============================
	notice
==============================*/
/*
#item-fit .notice { width:calc(100% - 2em); max-width:26em; margin:-.6em auto 0; padding-bottom:1em; text-align:center; font-size:1.4em; letter-spacing:.1em; }
#item-fit .notice span { position:relative; display:block; background:#fff; border:1px solid; transform:rotate(-2deg); }
#item-fit .notice span:before { position:absolute; bottom:-.4em; right:-.4em; content:''; display:block; width:100%; height:100%; background:rgba(var(--fit-red),.1); z-index:-1; }
#item-fit .notice span + span { margin-top:-.6em; }
#item-fit .notice span:first-of-type { width:14em; margin-right:auto; padding:.8em 0; }
#item-fit .notice span:last-of-type { width:18em; margin-left:auto; padding:0 0 1.2em; }
#item-fit .notice b { position:relative; top:.14em; margin-left:.2em; font-size:1.6em; }
#item-fit .notice strong { text-emphasis:dot; -webkit-text-emphasis:dot; color:rgba(var(--fit-red),1); }


@media screen and (max-width:768px) {
#item-fit .notice { font-size:1.2em; }
}

@media screen and (max-width:425px) {
#item-fit .notice { font-size:4.2vw; }
#item-fit .notice span + span { margin-top:-.5em; }
}


*/

/*==============================
	Main
==============================*/
/*
#item-fit #main-vs { position:relative; padding:1em; }
#item-fit #main-vs > * { position:absolute; }
#item-fit #main-vs div { position:relative; width:auto; }
#item-fit #main-vs img[alt='main-img'] { display:block; width:100%; max-width:none; }
#item-fit #main-vs h2 { width:auto; bottom:2em; left:2em; padding:2em 3em; color:#fff; z-index:1; }
#item-fit #main-vs h2 > * { display:block; font-size:1.6em; line-height:1em; letter-spacing:1px; }
#item-fit #main-vs h2 span:first-of-type { font-family:var(--fit-font); }
#item-fit #main-vs h2 img { width:16em; margin:.8em 0; }
#item-fit #main-vs h2 img + span { font-size:1.2em; }
#item-fit #main-vs div p { position:absolute; top:2em; width:17em; font-size:1.3em; line-height:1em; z-index:1; }
#item-fit #main-vs div p span { display:inline-block; padding:1em; background:#fff; box-shadow:.2em .2em .4em rgba(0,0,0,.2); }
#item-fit #main-vs div p span:nth-of-type(n+2) { margin-top:.8em; }

#item-fit #main-vs p.price {
 position:absolute;
 bottom:2em;
 right:8em;
 max-width:13.2em;
 text-align:right;
 margin:auto;
 font-size:1.4em;
 font-weight:500;
 line-height:1.6em;
 letter-spacing:1px;
 color:#e93f3f;
}
#item-fit #main-vs p.price.camp { max-width:15em; }
#item-fit #main-vs p.price:before { content:'\5C02\7528\30AA\30A4\30EB\4ED8'; margin-right:.4em; letter-spacing:0; }
#item-fit #main-vs p.price.camp:before { content:'\5C02\7528\30AA\30A4\30EB\FF12\672C\4ED8'; }
#item-fit #main-vs p.price s { font-size:.9em; color:#fff; }
#item-fit #main-vs p.price:after,
#item-fit #main-vs p.price s:after { margin-left:.1em; content:'\7A0E\8FBC'; font-size:12px; }
#item-fit #main-vs p.price span { position:relative; top:-.1em; margin-right:.4em; padding:.2em .4em 0; color:#fff!important; background:#e93f3f; }
#item-fit #main-vs p.price b { font-size:1.2em; font-weight:500; }
#item-fit #main-vs p.price > b { font-size:1.6em; }
#item-fit #main-vs p.price s b { text-decoration:line-through; }


@media screen and (max-width:1440px) {
#item-fit #main-vs p.price { right:16vw; }
}

@media screen and (min-width:1025px) {
#item-fit #main-vs p.price.camp { right:4em; }
}

@media screen and (max-width:1024px) {
#item-fit #main-vs p.price { bottom:1em; right:4vw; font-size:1.2em; }
}

@media screen and (min-width:769px) {
#item-fit #main-vs { max-height:calc(700px + 1em); height:calc(100vw * .5); font-size:1.2em; }
#item-fit #main-vs div { max-width:calc(100vw - 2em); max-height:700px; }
#item-fit #main-vs img[alt='main-img'] { max-height:700px; }
#item-fit #main-vs h2 { left:-.2em; display:grid; font-size:.8em; background:rgba(var(--fit-rgb),.8); }
#item-fit #main-vs h2 span:first-of-type { font-size:1.8em; font-weight:500; }
#item-fit #main-vs div p { top:3em; left:3em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#item-fit #main-vs h2 { left:-.2em; bottom:1vw; }
#item-fit #main-vs div p { top:2vw; left:2vw; }
}

@media screen and (max-width:768px) {
#item-fit #main-vs { height:calc(120vw + 2em); max-height:calc(800px + 1em); font-size:.9em; }
#item-fit #main-vs div { max-width:96vw; height:120vw; max-height:800px; }
#item-fit #main-vs img[alt='main-img'] { top:1em; width:100%; max-height:800px; }
#item-fit #main-vs h2 { bottom:4em; left:auto; right:2.2em; padding:0; text-align:right; text-shadow:.2em .2em .6em rgba(0,0,0,.4); }
#item-fit #main-vs div p { left:-.2em; }
#item-fit #main-vs p.price { bottom:56vw; right:10vw; }
}

@media screen and (max-width:425px) {
#item-fit #main-vs h2 img { width:14em; }
#item-fit #main-vs p.price { bottom:50vw; right:6vw; font-size:1.1em; font-weight:600; letter-spacing:0; }
}

@media screen and (max-width:375px) {
#item-fit #main-vs h2 { font-size:.9em; }
#item-fit #main-vs h2 img { margin:.6em 0; }
}

@media screen and (max-width:320px) {
#item-fit #main-vs h2 img { width:12em; margin:.4em 0; }
#item-fit #main-vs p.price { right:6vw; }
#item-fit #main-vs p.price:after { text-shadow:2px 2px 4px #aaa; }
}

*/


/*==============================
	present
==============================*/
/*
#item-fit #present { max-width:none; font-family:var(--fit-font); background:linear-gradient(to right, #efdcb3, #fdf1d7, #efdcb3); }
#item-fit #present + #aroma { margin-top:4em; }
#item-fit #present .inline { position:relative; max-width:68em; margin:auto; padding:0 2em; }

#item-fit #present h3 { position:relative; margin-top:1em; padding-top:5.6em; }
#item-fit #present h3 span { display:block; font-size:1.4em;	line-height:2em; }
#item-fit #present h3 .box {
 width:calc(100% - 2em);
 margin:0 auto .6em;
 padding-bottom:.1em;
 font-size:1.1em;
 font-weight:600;
 line-height:1.4em;
 color:#bd9640;
 border-bottom:2px solid;
}
#item-fit #present h3 b { position:relative; top:1px; font-size:1.6em; font-weight:500; letter-spacing:0; }
#item-fit #present h3 strong { font-size:1.26em; color:rgba(var(--fit-red),1); }
#item-fit #present h3 strong > b { margin-left:.1em; }
#item-fit #present h3 em {
 display:block;
 width:calc(100% - 2em);
 margin:0 auto .4em;
 padding:.6em 0 .3em;
 font-size:.9em;
 font-style:normal;
 line-height:1em;
 letter-spacing:.1em;
 color:#fff;
 background:#bd9640;
}
#item-fit #present h3 picture.present-img img { position:absolute; top:0; left:0; right:0; width:auto; height:5em; margin:auto; }

#item-fit #present picture.oil-img { width:29em; margin-left:2em; }
#item-fit #present img { display:block; width:100%; }

#item-fit #present p { position:absolute; }
#item-fit #present .circle {
 position:absolute;
 top:5em;
 right:2.4em;
 display:flex;
 align-items:center;
 width:6em;
 height:6em;
 text-align:center;
 font-size:1.2em;
 line-height:1.4em;
 letter-spacing:1px;
 color:#fff;
 background:rgba(81,100,28,.7);
 border-radius:50%;
}
#item-fit #present .circle b { width:100%; }
#item-fit #present .circle span { display:block; margin:.2em auto .1em; font-size:1.4em; font-weight:500; }

#item-fit #present .info { bottom:2em; width:calc(100% - 4em); max-width:1120px; margin:auto; text-align:right; font-size:.8em; line-height:1.4em; }


@media screen and (min-width:1025px) {
#item-fit #present { font-size:1.1em; }
#item-fit #present h3 { width:28em; }
#item-fit #present picture.oil-img { width:calc(100% - 29em); }
}

@media screen and (max-width:1024px) {
#item-fit #present h3 { width:27em; }
#item-fit #present picture.oil-img { width:calc(100% - 28em); margin-left:1em; }
}

@media screen and (min-width:769px) {
#item-fit #present .inline { display:flex; justify-content:center; align-items:center; }
}

@media screen and (max-width:768px) {
#item-fit #present { width:calc(100% - 4em); max-width:36em;	text-align:center; }
#item-fit #present .inline { padding:1.2em 0 0;	}
#item-fit #present h3 { width:100%; margin:0 auto 2em; text-align:center; }
#item-fit #present h3 span { font-size:1.06em; }
#item-fit #present h3 .box { max-width:20em; font-size:1em; }
#item-fit #present picture.oil-img { width:100%; margin:0; }
#item-fit #present .circle { top:21em; right:4vw; }
#item-fit #present .info { bottom:2vw; width:calc(100% - 4vw); }
}

@media screen and (max-width:425px) {
#item-fit #present { width:calc(100% - 3em); }
#item-fit #present h3 span { font-size:1.06em; }
#item-fit #present h3 .box { max-width:15em; margin:-8em auto 1em; padding:7em 1em .6em; font-size:.9em; background:#fff; }
#item-fit #present h3 picture.present-img img { top:-1em; }
#item-fit #present .circle { top:22em; right:-.6em; }
}

*/


/*==============================
	Desc
==============================*/
/*
#item-fit #main-vs + #desc { margin-top:2em!important; }
#item-fit :not(#main-vs) + #desc { margin-top:3em!important; }
#item-fit #desc .box { max-width:30em; padding:3.6em 1em; text-align:center; background:rgba(var(--fit-rgb),.2); }
#item-fit #desc h4,
#item-fit #desc p { text-align:center; line-height:1.6em; }
#item-fit #desc h4 { margin-bottom:.6em; font-size:1.1em; font-weight:500; }
#item-fit #desc h4 b { margin-left:.1em; font-size:1.3em; font-weight:500; }


@media screen and (min-width:1441px) {
#item-fit #desc { font-size:1.1em; }
}

@media screen and (min-width:1025px) {
#item-fit #desc { width:calc(100% - 4em); }
#item-fit #desc .box { width:calc(50% + 1.2em); }
#item-fit #desc .box:first-of-type { margin-right:-1.2em; }
#item-fit #desc .box:last-of-type { margin-left:-1.2em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#item-fit #desc { width:calc(100% - 2em); }
#item-fit #desc .box { width:calc(50% + .8em); }
#item-fit #desc .box:first-of-type { margin-right:-.8em; }
#item-fit #desc .box:last-of-type { margin-left:-.8em; }
}

@media screen and (min-width:769px) {
#item-fit #desc { display:flex; justify-content:center; align-items:center; padding-bottom:4em; }
#item-fit #desc .box:last-of-type { position:relative; top:4em; }
}

@media screen and (max-width:768px) {
#item-fit #desc { position:relative; z-index:1; }
#item-fit #main-vs + #desc { margin-top:-2em!important; }
#item-fit #desc .box { width:calc(100% - 4em); }
#item-fit #desc .box:last-of-type { position:relative; margin:-1.6em 0 0 auto; }
}

*/


/*==============================
	Point
==============================*/
/*
#item-fit #point h4,
#item-fit #point b { font-weight:500; }

#item-fit #point ul { counter-reset:number 0; width:calc(100% - 4em); margin:auto; }
#item-fit #point li:nth-of-type(n+2) { margin-top:4em; }
#item-fit #point li h4 { position:relative; margin-bottom:1em; padding-top:2em; text-align:center; font-size:1.3em; }
#item-fit #point li h4:before {
 position:absolute;
 top:0;
 left:0;
 right:0;
 counter-increment:number 1;
 content:'0' counter(number);
 margin:auto;
 font-family:var(--fit-font);
 font-size:2em;
 letter-spacing:.1em;
 color:rgba(var(--fit-rgb),.2);
}
#item-fit #point li h4 span { position:relative; padding:0 .4em; }
#item-fit #point li h4 span:before { position:absolute; left:0; bottom:0; content:''; width:100%; border-bottom:.6em solid rgba(var(--fit-rgb),.1); }
#item-fit #point li h4 b { font-size:1.2em; }
#item-fit #point li > picture img { display:block; width:100%; max-width:800px; margin:auto; }
#item-fit #point li > picture img[src*='img4'] { max-width:340px; margin-top:1em; }
#item-fit #point li p { line-height:1.8em; }
#item-fit #point li p:nth-of-type(n+2) { margin-top:.4em; }
#item-fit #point li p:nth-of-type(2) { text-shadow:0 0 .2em rgba(var(--fit-rgb),.6); }
#item-fit #point li p b { font-weight:600; }
#item-fit #point li .info,
#item-fit #point li p a { display:block; margin-top:.4em; text-align:right; font-size:.9em; }

#item-fit #point dl { width:100%; margin:1em auto 0; }
#item-fit #point dt { padding:.8em 0 .6em; text-align:center; font-family:var(--fit-font); font-size:1.1em; background:rgba(var(--fit-rgb),.2); }
#item-fit #point dt img { width:auto; height:.8em; margin-right:.2em; }
#item-fit #point dt span { margin-right:.2em; font-size:1.2em; }
#item-fit #point dt b { font-size:1.4em; }
#item-fit #point dd { padding:1.2em 0; font-size:.9em; background:#fff; }
#item-fit #point dd p { width:15.2em; margin:auto; line-height:1.6em; }


@media screen and (min-width:1025px) {
#item-fit #point li:nth-of-type(-n+2) { position:relative; width:100%; height:35vw; max-height:480px; }
#item-fit #point li:nth-of-type(n+3) { width:calc(100%/2 - 3em)!important; }
#item-fit #point li:nth-of-type(-n+2) > div { position:absolute; top:0; bottom:0; width:36%; height:fit-content; margin:auto; }
#item-fit #point li:nth-of-type(-n+2) > picture img { width:calc(64% - 1em); }
#item-fit #point li:nth-of-type(1) > div { right:0; }
#item-fit #point li:nth-of-type(1) img { position:absolute; left:0; margin-right:1em; }
#item-fit #point li:nth-of-type(2) > picture img { position:absolute; top:0; right:0; }
#item-fit #point dl { max-width:26em; }
}

@media screen and (max-width:1024px) {
#item-fit #point li:nth-of-type(-n+2) { margin:auto; }
#item-fit #point li:nth-of-type(n+2) { margin-top:4em; }
#item-fit #point li > picture img { margin-top:1em; }
}

@media screen and (min-width:769px) {
#item-fit #point ul { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; }
#item-fit #point li:nth-of-type(n+3) { align-items:baseline; width:calc(100%/2 - 1em); }
#item-fit #point li h4 { width:100%; margin-bottom:1.6em; }
}

@media screen and (max-width:768px) {
#item-fit #point dl { max-width:26em; }
}

@media screen and (max-width:425px) {
#item-fit #point ul { width:calc(100% - 2em); }
#item-fit #point li > picture img[src*='img4'] { max-width:320px; }
#item-fit #point dl { max-width:21em; }
}

*/


/*==============================
	insurance
==============================*/
/*
#item-fit #insurance { position:relative; width:calc(100% - 1em); max-width:57em; margin:6em auto 0; padding:6.4em 4em 3em; color:#188a76; background:radial-gradient(#f9f7ed, #e0f0e3); }

#item-fit #insurance h4 { display:flex; justify-content:center; align-items:center; margin-bottom:.6em; text-align:center; font-size:1.4em; font-weight:600; letter-spacing:1px; }
#item-fit #insurance h4 picture { display:block; width:2.6em; margin-right:.4em; }
#item-fit #insurance h4 b { font-size:1.2em; }
#item-fit #insurance h4 em { font-style:normal; font-size:1.4em; }

#item-fit #insurance p { line-height:1.6em; }
#item-fit #insurance .border {
 position:absolute;
 top:2em;
 left:0;
 right:0;
 width:16em;
 margin:auto;
 padding:.6em 0;
 text-align:center;
 font-size:1.1em;
 background:rgba(255,255,255,.4);
 border:1px solid;
}

#item-fit #insurance div { color:var(--txt); }
#item-fit #insurance div .balloon { position:relative; width:26em; padding:2em; background:#fff; box-shadow:2px 2px 4px rgba(0,0,0,.1); }
#item-fit #insurance div .balloon:after { position:absolute; top:0; bottom:0; right:-1.3em; content:''; height:.4em; margin:auto; border:.4em solid transparent; border-left:1em solid #fff; }
#item-fit #insurance div picture { display:block; width:calc(100% - 26.6em); min-width:200px; max-width:300px; margin-left:.6em; }
#item-fit #insurance div img { display:block; width:100%; }


@media screen and (max-width:1024px) {
#item-fit #insurance { padding:6.4em 4vw 3em; }
}

@media screen and (min-width:769px) {
#item-fit #insurance p:not([class]) { text-align:center; word-break:keep-all; word-wrap:break-word; }
#item-fit #insurance p:not([class]) br { display:none; }
#item-fit #insurance div { display:flex; justify-content:center; align-items:center; margin-top:2em; }
}

@media screen and (max-width:768px) {
#item-fit #insurance { max-width:40em; margin-top:4em; padding:6.4em 0 0; }
#item-fit #insurance h4 picture { width:2em; margin-right:.2em; }
#item-fit #insurance p:not([class]) { width:calc(100% - 2em); max-width:26em; margin:auto; }
#item-fit #insurance div { margin-top:1em; }
#item-fit #insurance div .balloon { position:absolute; bottom:0; left:0; width:21.4em; padding:1.6em; font-size:.9em; }
#item-fit #insurance div picture { width:60vw; margin-left:auto; }
}

@media screen and (min-width:426px) {
#item-fit #insurance .balloon br:last-of-type { display:none; }
}

@media screen and (max-width:425px) {
#item-fit #insurance h4 { font-size:5vw; }
#item-fit #insurance p:not([class]) br { display:none; }
#item-fit #insurance div .balloon { width:17.4em; }
}


*/

/*==============================
	Aroma
==============================*/
/*
#item-fit #aroma { max-width:none; }
#item-fit.oil #aroma { padding-top:4em; }

#item-fit #aroma > section { margin:auto; }
*/


/*title*/
/*
#item-fit #aroma > section > h3 { margin:3em auto 1em; }
#item-fit #aroma h3.ttl,
#item-fit #aroma h3.ttl + p { max-width:1400px; }
#item-fit #aroma h3.ttl + p { text-align:center; line-height:1.8em; }

#item-fit #aroma h4 { position:relative; text-shadow:var(--fit-txt-sdw); font-weight:500; z-index:1; }
#item-fit #aroma .new h4 { min-height:3em; padding-left:3.6em; }
#item-fit #aroma .new h4:before,
#item-fit #aroma .new h4:after { position:absolute; bottom:0; display:block; text-align:center; text-shadow:none; color:#fff; border-radius:50%; }
#item-fit #aroma .new h4:before { top:.2em; left:.2em; content:'new'; width:2.6em; height:2.6em; line-height:2.4em; letter-spacing:1px; background:rgba(255,0,0,.6); z-index:1; }
#item-fit #aroma .new h4:after { top:0; left:0; content:''; width:3em; height:3em; background:rgba(255,0,0,.2); }
#item-fit #aroma h4 b { font-family:var(--fit-font); font-size:1.8em; font-weight:500; letter-spacing:1px; }
#item-fit #aroma h4 span { font-size:.9em; }

*/

/*attention*/
#item-fit #aroma .attention { position:relative; width:calc(100% - 2em); max-width:42em; margin:3em auto 3em; padding:1.6em 1em 1em; color:var(--txt); border:1px solid rgb(var(--txt-red)); }
#item-fit #aroma .attention dt { position:absolute; top:-.7em; left:0; right:0; width:14em; margin:auto; text-align:center; color:rgb(var(--txt-red)); background:#f9f6ee; }
#item-fit #aroma .attention dd > p { max-width:17em; margin:auto; padding:.3em 0 .1em; text-align:center; font-size:1.2em; background:#f6ece2; }
#item-fit #aroma .attention dd > button { display:block; margin:.6em 0 0 auto; color:rgb(var(--txt-red)); background:none; border:none; cursor:pointer; }
#item-fit #aroma .attention dd > button b { position:relative; margin-left:.2em; padding:0 1.4em 0 .2em; font-weight:500; border-bottom:1px solid; }
#item-fit #aroma .attention dd > button b:after {
 position:absolute;
 top:calc(50% - .3em);
 right:.3em;
 content:'';
 display:block;
 width:.6em;
 height:.6em;
 border-right:1px solid;
 border-bottom:1px solid;
 transform:translate(-25%,-50%) rotate(43deg);
 transition:.4s;
}
#item-fit #aroma .attention dd > button.open b:before { content:'\9589\3058\308B'; }
#item-fit #aroma .attention dd > button.open b:after { top:calc(50% - .2em); transform:rotate(224deg); }
#item-fit #aroma .attention dd > button.open span { display:none; }
#item-fit #aroma .attention dd > div { font-size:.9em; line-height:1.6em; transition:.2s; }
#item-fit #aroma .attention dd > button.open + div { margin-top:.6em; }
#item-fit #aroma .attention dd > button:not(.open) + div { height:0; padding:0; opacity:0; }
#item-fit #aroma .attention dd > div picture { display:block; margin-top:.6em; }
#item-fit #aroma .attention dd > div img[alt*='oil-graph'] { display:block; width:100%; margin:auto; }
#item-fit #aroma .attention dd > div img[alt='oil-graph'] { max-width:300px; }
#item-fit #aroma .attention dd > div img[alt='oil-graph2'] { max-width:500px; }


/*oil-cap*/
/*
#item-fit #aroma .oil-cap { width:calc(100% - 2em); max-width:36em; margin:4em auto 0; padding:2em; background:rgba(var(--fit-rgb),.12); }
#item-fit #aroma .oil-cap dt { margin-bottom:.6em; text-align:center; font-size:1.2em; line-height:1.4em; }
#item-fit #aroma .oil-cap dt img { width:auto; height:.8em; margin-right:.4em; }
#item-fit #aroma .oil-cap dd { display:flex; justify-content:space-between; align-items:center; }
#item-fit #aroma .oil-cap dd p { line-height:1.6em; }
#item-fit #aroma .oil-cap dd img { display:block; width:22%; max-width:100px; margin-left:.4em; }
*/


/*list*/
/*
#item-fit #aroma > ul { width:calc(100% - 3em); margin:5em auto 0; }
#item-fit #aroma > ul li { position:relative; padding:3em 1.6em 2em; background:#fff; }
#item-fit #aroma > ul li h4 { display:flex; flex-wrap:wrap; align-items:center; }
#item-fit #aroma > ul li h4 b { margin-right:.2em; }
#item-fit #aroma > ul li h4 + p { position:absolute; top:-1.2em; left:1em; padding:.8em 1.2em .7em; font-size:1.1em; font-weight:600; letter-spacing:1px; color:#fff; }
#item-fit #aroma > ul li .box { margin-top:1.4em; padding:1em; font-size:.96em; line-height:1.6em; }
#item-fit #aroma > ul li dl { position:relative; margin-top:1.6em; padding:1.2em .4em 1em; text-align:center; font-size:.9em; line-height:1.6em; border:1px solid #aaa; }
#item-fit #aroma > ul li dt { position:absolute; top:-.7em; left:0; right:0; width:6em; margin:auto; text-align:center; background:#fff; }
#item-fit #aroma > ul li dl span { display:inline-block; }
#item-fit #aroma > ul li dl span:not(:last-of-type):after { content:'\3001'; }

#item-fit #aroma > ul li > picture img[alt*='illust'] { position:absolute; top:.6em; right:3vw; width:6em; opacity:.4; }

#item-fit #aroma > .info { width:calc(100% - 1em); max-width:52em; margin:2em auto 0; font-size:.9em; line-height:1.4em; color:rgb(var(--txt-red)); }
*/


/*color*/
/*
#item-fit #aroma #cle h4 b { color:rgba(var(--fit-aroma-cle),1); }
#item-fit #aroma #cle h4 + p { background:rgba(var(--fit-aroma-cle),1); }
#item-fit #aroma #cle .box { background:rgba(var(--fit-aroma-cle),.1); }

#item-fit #aroma #sky h4 b { color:rgba(var(--fit-aroma-sky),1); }
#item-fit #aroma #sky h4 + p { background:rgba(var(--fit-aroma-sky),1); }
#item-fit #aroma #sky .box { background:rgba(var(--fit-aroma-sky),.1); }

#item-fit #aroma #wrk h4 b { color:rgba(var(--fit-aroma-wrk),1); }
#item-fit #aroma #wrk h4 + p { background:rgba(var(--fit-aroma-wrk),1); }
#item-fit #aroma #wrk .box { background:rgba(var(--fit-aroma-wrk),.1); }

#item-fit #aroma #sun h4 b { color:rgba(var(--fit-aroma-sun),1); }
#item-fit #aroma #sun h4 + p { background:rgba(var(--fit-aroma-sun),1); }
#item-fit #aroma #sun .box { background:rgba(var(--fit-aroma-sun),.1); }

#item-fit #aroma #tim h4 b { color:rgba(var(--fit-aroma-tim),1); }
#item-fit #aroma #tim h4 + p { background:rgba(var(--fit-aroma-tim),1); }
#item-fit #aroma #tim .box { background:rgba(var(--fit-aroma-tim),.1); }

#item-fit #aroma #slw h4 b { color:rgba(var(--fit-aroma-slw),1); }
#item-fit #aroma #slw h4 + p { background:rgba(var(--fit-aroma-slw),1); }
#item-fit #aroma #slw .box { background:rgba(var(--fit-aroma-slw),.1); }

#item-fit #aroma #flw h4 b { color:rgba(var(--fit-aroma-flw),1); }
#item-fit #aroma #flw h4 + p { background:rgba(var(--fit-aroma-flw),1); }
#item-fit #aroma #flw .box { background:rgba(var(--fit-aroma-flw),.1); }

#item-fit #aroma #pst h4 b { color:rgba(var(--fit-aroma-pst),1); }
#item-fit #aroma #pst h4 + p { background:rgba(var(--fit-aroma-pst),1); }
#item-fit #aroma #pst .box { background:rgba(var(--fit-aroma-pst),.1); }

#item-fit #aroma #kfn h4 b { color:rgba(var(--fit-aroma-kfn),1); }
#item-fit #aroma #kfn h4 + p { background:rgba(var(--fit-aroma-kfn),1); }
#item-fit #aroma #kfn .box { background:rgba(var(--fit-aroma-kfn),.1); }

#item-fit #aroma #vrs h4 b { color:rgba(var(--fit-aroma-vrs),1); }
#item-fit #aroma #vrs h4 + p { background:rgba(var(--fit-aroma-vrs),1); }
#item-fit #aroma #vrs .box { background:rgba(var(--fit-aroma-vrs),.1); }

#item-fit #aroma #bug h4 b { color:rgba(var(--fit-aroma-bug),1); }
#item-fit #aroma #bug h4 + p { background:rgba(var(--fit-aroma-bug),1); }
#item-fit #aroma #bug .box { background:rgba(var(--fit-aroma-bug),.1); }


@media screen and (min-width:1441px) {
#item-fit.oil #aroma { padding-top:6em; }
#item-fit #aroma > ul { font-size:1.06em; }
#item-fit #aroma > ul li { width:calc(100%/3 - .6em); margin-left:.9em; }
#item-fit #aroma > ul li:nth-of-type(3n+1) { margin-left:0; }
#item-fit #aroma > ul li:nth-of-type(n+4) { margin-top:3em; }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#item-fit #aroma > ul { max-width:89em; }
#item-fit #aroma > ul li { width:calc(100%/2 - .6em); margin-left:1.2em; }
#item-fit #aroma > ul li:nth-of-type(2n+1) { margin-left:0; }
#item-fit #aroma > ul li:nth-of-type(n+3) { margin-top:3em; }
}

@media screen and (min-width:1025px) {
#item-fit #aroma h3.ttl + p { width:calc(100% - 2em); margin:auto; text-align:left; font-size:1.06em; }
#item-fit #aroma h3.ttl + p br { display:none; }
#item-fit #aroma > ul { display:flex; flex-wrap:wrap; justify-content:center; }
}

@media screen and (max-width:1024px) {
#item-fit #aroma .attention { margin-top:2em; }
#item-fit #aroma > ul { width:calc(100% - 2em); max-width:560px; margin-top:4em; }
#item-fit #aroma > ul li:nth-of-type(n+2) { margin-top:3em; }
}

@media screen and (max-width:425px) {
#item-fit #aroma .oil-cap { max-width:34em; padding:2em 1em; font-size:.96em; }
#item-fit #aroma > .info { font-size:13px; }
}

@media screen and (max-width:375px) {
#item-fit #aroma .attention dd > p { font-size:1.1em; }
#item-fit #aroma .oil-cap { font-size:.9em; }
#item-fit #aroma > ul li { padding:3em 1.4em 1.6em; }
}

*/


/*==============================
	Aroma chart
==============================*/
/*
#item-fit #chart a {	text-decoration:none; }
#item-fit #chart .scroll { display:block; }


@media screen and (min-width:769px) {
#item-fit #chart .scroll { width:calc(100% - 2em); max-width:800px; margin:2em auto; }
#item-fit #chart picture { display:block; width:100%; }
}

@media screen and (max-width:768px) {
#item-fit #chart .scroll { position:relative; padding:0 1em 8px; overflow-x:auto; white-space:nowrap; z-index:1; }
#item-fit #chart picture { display:inline-block; width:120vw; max-width:600px; margin:auto; white-space:normal; }
}

*/


/*==============================
	Aroma ranking
==============================*/
/*
#item-fit #aroma #ranking ol { counter-reset:number 0; width:calc(100% - 1em); max-width:1000px; margin:2em auto 0; }

#item-fit #aroma #ranking a {
 position:relative;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 text-align:center;
 text-decoration:none;
 text-shadow:var(--fit-txt-sdw);
 height:10em;
 background:#fff;
 border:.6em solid;
}
#item-fit #aroma #ranking a:hover { border-color:transparent!important; }
#item-fit #aroma #ranking a:before,
#item-fit #aroma #ranking a:after { position:absolute; }
#item-fit #aroma #ranking a:before { top:-.8em; left:.4em; content:'\4EBA\6C17'; font-size:.9em; font-weight:600; }
#item-fit #aroma #ranking a:after { top:-.7em; left:1.2em; counter-increment:number 1; content:'NO.' counter(number); display:block; font-family:var(--fit-font); font-size:2em; }
#item-fit #aroma #ranking a > *:not(picture) { width:100%; z-index:1; }

#item-fit #aroma #ranking a h4 { justify-content:center; margin-bottom:1em; text-align:center; font-weight:600; }
#item-fit #aroma #ranking a h4 span { display:block; margin-top:.4em; }
#item-fit #aroma #ranking li img { position:absolute; top:0; bottom:0; left:0; right:0; display:block; width:8em; margin:auto; opacity:.2; }
#item-fit #aroma #ranking a > p { word-break:keep-all; word-wrap:break-word; line-height:1.4em; color:var(--txt); }

*/

/*color*/
/*
#item-fit #aroma #ranking [href*='cle'] { color:rgba(var(--fit-aroma-cle),1); border-color:rgba(var(--fit-aroma-cle),.2)!important; }
#item-fit #aroma #ranking [href*='sky'] { color:rgba(var(--fit-aroma-sky),1); border-color:rgba(var(--fit-aroma-sky),.2)!important; }
#item-fit #aroma #ranking [href*='wrk'] { color:rgba(var(--fit-aroma-wrk),1); border-color:rgba(var(--fit-aroma-wrk),.2)!important; }
#item-fit #aroma #ranking [href*='sun'] { color:rgba(var(--fit-aroma-sun),1); border-color:rgba(var(--fit-aroma-sun),.2)!important; }
#item-fit #aroma #ranking [href*='tim'] { color:rgba(var(--fit-aroma-tim),1); border-color:rgba(var(--fit-aroma-tim),.2)!important; }
#item-fit #aroma #ranking [href*='slw'] { color:rgba(var(--fit-aroma-slw),1); border-color:rgba(var(--fit-aroma-slw),.2)!important; }
#item-fit #aroma #ranking [href*='flw'] { color:rgba(var(--fit-aroma-flw),1); border-color:rgba(var(--fit-aroma-flw),.2)!important; }
#item-fit #aroma #ranking [href*='pst'] { color:rgba(var(--fit-aroma-pst),1); border-color:rgba(var(--fit-aroma-pst),.2)!important; }
#item-fit #aroma #ranking [href*='kfn'] { color:rgba(var(--fit-aroma-kfn),1); border-color:rgba(var(--fit-aroma-kfn),.2)!important; }
#item-fit #aroma #ranking [href*='vrs'] { color:rgba(var(--fit-aroma-vrs),1); border-color:rgba(var(--fit-aroma-vrs),.2)!important; }
#item-fit #aroma #ranking [href*='bug'] { color:rgba(var(--fit-aroma-bug),1); border-color:rgba(var(--fit-aroma-bug),.2)!important; }


@media screen and (min-width:1025px) {
#item-fit #aroma #ranking ol li { width:calc(100%/3 - .8em); margin-left:1.2em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#item-fit #aroma #ranking ol li { width:calc(100%/3 - .4em); margin-left:.6em; }
}

@media screen and (min-width:769px) {
#item-fit #aroma #ranking ol li:nth-of-type(-n+3) { font-size:1.1em; }
#item-fit #aroma #ranking ol li:nth-of-type(3n+1) { margin-left:0; }
#item-fit #aroma #ranking ol li:nth-of-type(n+4) { margin-top:2em; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#item-fit #aroma #ranking ol li { width:calc(100%/2 - .6em); margin:0 .3em; }
#item-fit #aroma #ranking ol li:first-of-type { width:60%; font-size:1.1em; }
#item-fit #aroma #ranking ol li:nth-of-type(n+2) { margin-top:1.6em; }
}

@media screen and (min-width:426px) {
#item-fit #aroma #ranking ol { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; }
}

@media screen and (max-width:425px) {
#item-fit #aroma #ranking ol { width:calc(100% - 2em); }
#item-fit #aroma #ranking ol li { max-width:20em; }
#item-fit #aroma #ranking ol li:nth-of-type(even) { margin-left:auto; }
#item-fit #aroma #ranking ol li:nth-of-type(n+2) { margin-top:1.6em; }
}


*/

/*==============================
	Scene
==============================*/
/*
#item-fit #scene li { position:relative; max-width:800px; }
#item-fit #scene li:nth-of-type(odd) { margin-right:auto; }
#item-fit #scene li:nth-of-type(even) { margin-left:auto; }
#item-fit #scene li:last-of-type { width:100%; max-width:900px; margin:auto; }
#item-fit #scene li p {
 position:absolute;
 top:0;
 bottom:0;
 display:inline-block;
 width:14em;
 height:4.4em;
 margin:auto;
 padding:1.6em 1em;
 text-align:center;
 font-weight:600;
	line-height:1em;
 letter-spacing:1px;
 background:#fff;
}
#item-fit #scene li:nth-of-type(odd) p { right:-.4em; }
#item-fit #scene li:nth-of-type(even):not(:last-of-type) p { left:-.4em; }
#item-fit #scene li:nth-of-type(5) p { top:auto; bottom:1em; left:1em; right:auto; }
#item-fit #scene li:last-of-type p {
 top:2em;
 bottom:auto;
 width:calc(100% - 2em);
 max-width:26em;
 height:auto;
 margin-left:2em;
 padding:3em 2.8em;
 text-align:left;
 font-weight:400;
 line-height:1.8em;
 color:#fff;
 background:rgba(40,26,14,.8);
}
#item-fit #scene li p b { margin-right:.1em; font-size:1.2em; font-weight:500; }
#item-fit #scene li img { display:block; width:100%; }


@media screen and (min-width:1025px) {
#item-fit #scene li:last-of-type { max-width:calc(1400px - 2em); }
#item-fit #scene li p { font-size:1.2em; }
#item-fit #scene li:last-of-type p { top:0; bottom:0; height:11.4em; margin-left:0; }
#item-fit #scene li:last-of-type img { max-width:900px; margin-left:auto; }
}

@media screen and (max-width:1024px) {
#item-fit #scene ul { max-width:900px; margin:auto; }
}

@media screen and (min-width:769px) {
#item-fit #scene li:nth-of-type(n+2) { margin-top:3em; }
#item-fit #scene li:last-of-type p { font-size:1.26em; }
#item-fit #scene li:last-of-type p br:first-of-type { display:none; }
}

@media screen and (max-width:768px) {
#item-fit #scene li:nth-of-type(n+2) { margin-top:2em; }
#item-fit #scene li:last-of-type { margin:5em auto 0!important; }
#item-fit #scene li p { height:4em; padding:1.4em 1em; font-size:1.1em; }
#item-fit #scene li:last-of-type p { top:1em; max-width:20em; margin-left:1em; padding:1.4em; font-size:1.1em; }
}

@media screen and (min-width:426px) {
#item-fit #scene li { width:calc(100% - 2em); }
}

@media screen and (max-width:425px) {
#item-fit #scene li { width:calc(100% - 1em); }
#item-fit #scene li:nth-of-type(n+2) { margin-top:1em; }
#item-fit #scene li p { top:1em; bottom:auto; font-size:1em; letter-spacing:0; }
#item-fit #scene li:last-of-type p { top:-3em; max-width:19em; }
}

@media screen and (max-width:375px) {
#item-fit #scene li:last-of-type { width:100%; }
#item-fit #scene li:last-of-type p { max-width:19em; }
}

@media screen and (max-width:320px) {
#item-fit #scene li:last-of-type p { font-size:1em; }
}
*/



/*==============================
	Setting
==============================*/
/*
#item-fit #setting p.info { font-size:.9em; line-height:1.4em!important; }

#item-fit #setting ol { counter-reset:number 0; margin:auto; list-style:none; }
#item-fit #setting li { padding:2em 0; background:#fff; }
#item-fit #setting li:before {
 counter-increment:number 1;
 content:'STEP' counter(number);
 display:block;
 margin-bottom:.4em;
 text-align:center;
 font-family:var(--fit-font);
 font-size:1.6em;
 letter-spacing:.1em;
}
#item-fit #setting li p { width:calc(100% - 2.6em); margin:auto; line-height:1.6em; }
#item-fit #setting li img { display:block; width:100%; max-width:380px; margin:2em auto 0; }
#item-fit #setting ol + p { max-width:1400px; margin-top:1em; }
*/


/*oil-cap*/
/*
#item-fit #setting .oil-cap { width:calc(100% - 2em); max-width:42em; margin:4em auto 0; padding:2em; background:#fff; }
#item-fit #setting .oil-cap dt { margin-bottom:1em; text-align:center; font-size:1.4em; line-height:1.4em; }
#item-fit #setting .oil-cap dt img { width:auto; height:.8em; margin-right:.4em; }
#item-fit #setting .oil-cap dd p { line-height:1.6em; }
#item-fit #setting .oil-cap dd img { display:block; width:80%; max-width:360px; margin:1em auto; }


@media screen and (min-width:1441px) {
#item-fit #setting ol { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:calc(100% - 2em); }
#item-fit #setting li { width:calc(100%/4 - .3em); max-width:21em; margin-left:.4em; }
#item-fit #setting li:nth-of-type(4n+1) { margin-left:0; }
#item-fit #setting li p br { display:none; }
}

@media screen and (max-width:1440px) {
#item-fit #setting ol { padding:0 2em 1em; overflow-x:auto; white-space:nowrap; }
#item-fit #setting li { display:inline-block; width:27em; height:33.4em; vertical-align:top; white-space:normal; }
#item-fit #setting li:nth-of-type(n+2) { margin-left:.2em; }
#item-fit #setting li p { text-align:center; }
}

@media screen and (max-width:1024px) {
#item-fit #setting li { width:21em; height:28.6em; }
#item-fit #setting li:nth-of-type(n+2) { margin-left:.2em; }
}

@media screen and (min-width:769px) {
#item-fit #setting ol + p { text-align:right; }
}

@media screen and (max-width:425px) {
#item-fit #setting ol { padding:0 1em 1em; }
#item-fit #setting li { width:22em; height:29.5em; }
#item-fit #setting li p { font-size:1.02em; }
#item-fit #setting .oil-cap { max-width:40em; margin-top:2em; padding:2em 1em; }
#item-fit #setting .oil-cap dt { font-size:1.2em; }
#item-fit #setting .oil-cap dd br { display:none; }
#item-fit #setting .oil-cap dd img { width:90%; }
}

@media screen and (max-width:320px) {
#item-fit #setting li { width:17em; height:27.1em; }
#item-fit #setting li p { text-align:left; }
}

*/


/*==============================
	Comp
==============================*/
/*
#item-fit #comp h3 { width:100%; padding:0; text-align:center; line-height:1.6em; }
#item-fit #comp h3 span { margin-bottom:0; }

#item-fit #comp div { position:relative; margin:auto; padding-bottom:3em; line-height:1.4em; }

#item-fit #comp button { position:absolute; left:0; right:0; bottom:0; width:100%; max-width:55em; margin:auto; text-align:center; font-size:.9em; background:none; border:none; cursor:pointer; z-index:1; }
#item-fit #comp button span { display:inline-block; padding:.4em 1.6em .4em 1em; border:1px solid; border-radius:10em; }
#item-fit #comp button.active { width:5em; margin:auto; padding:.4em; }
#item-fit #comp button.active:after { content:'\9589\3058\308B'; display:inline-block; width:4em; margin:auto; border-bottom:1px solid; }
#item-fit #comp button.active span { display:none; }
#item-fit #comp button span:after {
 position:relative;
 top:.1em;
 left:.6em;
 content:'';
 display:inline-block;
 width:.6em;
 height:.6em;
 border-top:1px solid;
 border-right:1px solid;
 transform:translate(-25%,-50%) rotate(135deg);
}

#item-fit #comp button:not(.active) ~ dl dt:nth-of-type(n+6),
#item-fit #comp button:not(.active) ~ dl dt:nth-of-type(n+6) ~ dd { height:0; padding:0; opacity:0; }
#item-fit #comp dl { display:flex; flex-wrap:wrap; align-items:stretch; width:55em; margin:auto; }
#item-fit #comp dl > * { width:calc(100%/5 - .4em); margin-left:.5em; }
#item-fit #comp dl > *:nth-child(n+6) { margin-top:.5em; }
#item-fit #comp dt { width:9em; margin-left:0; padding:1em; font-weight:600; background:rgba(var(--fit-rgb),.4); }
#item-fit #comp dd { position:relative; width:11em; padding:1em .2em; text-align:center; background:rgba(255,255,255,.7); }
#item-fit #comp dt:nth-of-type(n+2) + dd { background:#fff; }
#item-fit #comp dd:nth-of-type(-n+4) { background:rgba(var(--fit-rgb),.4); }
#item-fit #comp dd[class*='mark-'] { padding-top:4em; }
#item-fit #comp dd[class*='mark-']:before,
#item-fit #comp dd[class*='mark-']:after { position:absolute; top:.6em; left:0; right:0; display:block; width:3em; height:3em; margin:auto; border:.3em solid; }
#item-fit #comp dd.mark-maru:before { content:''; border-color:#eccd8e; border-radius:50%; }
#item-fit #comp dd.mark-maru2:before,
#item-fit #comp dd.mark-maru2:after { content:''; border-color:#ecb48e; border-radius:50%; }
#item-fit #comp dd.mark-maru2:after { top:1.2em; width:1.8em; height:1.8em; }
#item-fit #comp dd.mark-batu:before,
#item-fit #comp dd.mark-batu:after { content:''; width:.24em; background:#777; border:none; }
#item-fit #comp dd.mark-batu:before { transform:rotate(45deg); }
#item-fit #comp dd.mark-batu:after { transform:rotate(-45deg); }
#item-fit #comp dd.mark-san:before,
#item-fit #comp dd.mark-san:after { top:.3em; content:''; border-width:0 1.6em 2.6em 1.6em; }
#item-fit #comp dd.mark-san:before { border-color:transparent transparent #a0b9d2 transparent; }
#item-fit #comp dd.mark-san:after { top:1.2em; font-size:.72em; border-color:transparent transparent #fff transparent; }
#item-fit #comp dd:nth-of-type(-n+4) p { font-size:1.1em; font-weight:600; letter-spacing:1px; }

#item-fit #comp img { display:block; margin:auto; }
#item-fit #comp img[alt*='aromic'] { width:8em; }
#item-fit #comp img[alt*='product'] { width:6em; margin-top:.6em; }
#item-fit #comp img[src*='comp'] { opacity:.6; }


@media screen and (max-width:1024px) {
#item-fit #comp div { padding:0 1em 3.2em; overflow-x:auto; white-space:nowrap; }
#item-fit #comp dl { white-space:normal; }
#item-fit #comp button { background:none; }
#item-fit #comp button:not(.active) { bottom:1em; }
}

@media screen and (max-width:768px) {
#item-fit #comp dl { width:51.4em; }
#item-fit #comp dd { padding:.6em .2em; font-size:.9em; line-height:1.2em; }
}

*/


/*==============================
	Story
==============================*/
/*
#item-fit #story { position:relative; width:calc(100% - 5vw); max-width:48em; margin-top:6em!important; padding:4em 4vw 3em; background:#fff; border:1px solid #eee; }
#item-fit #story h3 { position:absolute; top:calc(-2.3em + 1px); left:0; display:flex; align-items:center; height:3em; padding-right:3.6em; }
#item-fit #story h3 img { position:absolute; bottom:0; right:0; display:block; width:3em; margin:-1em .6em 0 0; }
#item-fit #story h3 span { margin:0; padding:0 1em .8em; font-size:.9em; letter-spacing:1px; border-bottom:1px solid #777; }
#item-fit #story h4 { margin-bottom:1.6em; text-align:center; font-size:1.3em; letter-spacing:1px; }
#item-fit #story h4 em { position:relative; display:block; margin:.6em auto; padding:.4em; line-height:1.4em; color:rgb(208,137,89); background:rgba(208,137,89,.1); border-radius:.2em; }
#item-fit #story h4 em:before,
#item-fit #story h4 em:after { font-weight:500; }
#item-fit #story h4 em:before { content:'\300E'; margin-right:.1em; }
#item-fit #story h4 em:after { content:'\300F'; margin-left:.3em; }

#item-fit #story div p { line-height:2em; }
#item-fit #story div p:nth-of-type(n+2) { margin-top:2em; }
#item-fit #story div p span {
 display:block;
 padding-bottom:1px;
 line-height:calc(2.5em + 1px);
 background-image:linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), linear-gradient(180deg, #ccc 1px, transparent 1px);
 background-size:8px 100%, 100% 2.5em;
}
#item-fit #story div p b,
#item-fit #story div p strong { font-weight:500; background:rgba(var(--fit-rgb),.1); }
#item-fit #story div p strong { font-size:1.2em; }

#item-fit #story div img { position:relative; float:right; display:block; max-width:6.4em; margin:.6em 0 0 .6em; }
#item-fit #story div img:after {
 position:absolute;
 bottom:-1.8em;
 right:0;
 content:'\4EE3\8868\a0\795E\7530\79C0\662D';
 width:100%;
 padding:.2em;
 text-align:right;
 font-size:12px;
 background:#fff;
}
#item-fit #story div img { display:block; width:100%; border-radius:.4em; }


@media screen and (min-width:769px) {
#item-fit #story { width:calc(100% - 4em); padding:4em; }
#item-fit #story h4 em { max-width:29em; }
}

@media screen and (max-width:768px) {
#item-fit #story h4 em { max-width:18em; padding:.4em 1em; }
#item-fit #story h4 em:before,
#item-fit #story h4 em:after { position:absolute; }
#item-fit #story h4 em:before { top:.1em; left:0; }
#item-fit #story h4 em:after { bottom:.1em; right:0; }
}

@media screen and (min-width:426px) {
#item-fit #story div img { max-width:8em; margin-left:1em; }
}

@media screen and (max-width:425px) {
#item-fit #story h4 em { max-width:calc(16em + .4vw); padding:.4em .2vw; }
#item-fit #story h4 em:before,
#item-fit #story h4 em:after { display:none; }
}

@media screen and (max-width:320px) {
#item-fit #story h4 { font-size:5.2vw; }
}


*/

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



/*==============================
	Ps mark
==============================*/
#item-fit #ps-mark { border-color:#fff; }



/*==============================
	Light
==============================*/
#fit-lamp { max-width:31.2em; margin:auto; line-height:1.6em; }
.guide #fit-lamp { margin-top:1em; }

#fit-lamp h3 { margin-bottom:.2em; text-align:center; font-size:1.1em; letter-spacing:.1em; }
.guide #fit-lamp h3 { margin-top:0; background:rgba(var(--fit-rgb),.1); border:none; }

#fit-lamp picture { width:auto; margin:0; }
#fit-lamp picture img { display:block; margin:auto; }
.guide img[src*='lamp'] { max-width:420px; padding:0 .4em; border:1px solid #aaa; }

#fit-lamp ul.icon { display:flex; flex-wrap:wrap; justify-content:center; max-width:15em; margin:.6em auto; }
#fit-lamp ul.icon li { display:flex; justify-content:center; align-items:center; width:6em; }
#fit-lamp ul.icon li:nth-of-type(n+2) { margin-left:1em; }
#fit-lamp ul.icon img { width:3em; margin-bottom:.4em; }
#fit-lamp ul.icon p { display:inline-block; text-align:center; }

#fit-lamp ul.ttl { display:flex; margin-bottom:2px; text-align:center; }
#fit-lamp ul.ttl li { padding:.6em .2em; font-weight:600; letter-spacing:1px; background:#eee; }
.guide #fit-lamp li:before { display:none; }
#fit-lamp ul.ttl li:nth-of-type(1) { width:9em; }
#fit-lamp ul.ttl li:nth-of-type(2) { width:calc(100% - 9em); border-left:2px solid #fff; }

#fit-lamp dl { display:flex; flex-wrap:wrap; justify-content:space-between; }
#fit-lamp dl > * { padding:.8em 1em; background:#f7f7f7; }
#fit-lamp dl > *:nth-of-type(n+2) { border-top:2px solid #fff; }
#fit-lamp dt { display:flex; justify-content:center; width:9em; text-align:center; }
#fit-lamp dt div + div { margin-left:1em; }
#fit-lamp dt p { font-size:.9em; }
#fit-lamp dt picture img { width:2.4em; }
#fit-lamp dd { width:calc(100% - 9em); }
#fit-lamp dt + dd { border-left:2px solid #fff; }

#fit-lamp dl + p { margin-top:1em; }
#fit-lamp p.info { font-size:.9em; }


@media screen and (max-width:425px) {
#fit-lamp dl > * { padding:.8em 2vw; }
#fit-lamp ul.ttl li:nth-of-type(1),
#fit-lamp dt { width:8.2em; }
#fit-lamp dt div + div { margin-left:.6em; }
#fit-lamp ul.ttl li:nth-of-type(2),
#fit-lamp dd { width:calc(100% - 8.2em); font-feature-settings:'palt'; }
}

@media screen and (max-width:320px) {
#fit-lamp { width:calc(100% - 1em); }
}



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



/*==============================
	ショップサーブ用　item page
==============================*/
#main-column > #itemDetail-wrap { max-width:none!important; }
#itemDetail-cont { max-width:1000px; }
#itemDetail-wrap:nth-of-type(n+2) #item-fit { margin-bottom:4em; padding:4em 0; }
#itemDetail-wrap:nth-of-type(n+2) #item-fit > section:nth-of-type(n+2) { margin-top:4em; }


