@charset'utf-8';

:root { --bug-dgr:0,110,96; --bug-gr:218,226,75; --bug-lgr:251,252,237; --review-bg:128,111,44; --bug-gld:225,214,124;--bugp-gld:234,186,74; }



/*==============================
	modal
==============================*/
#aromicstyle.fixed { position:fixed; width:100%; height:100%; left:0; }
#modal-movie { position:fixed; top:0; left:0; width:100%; height:100vh; z-index:20000; }
#modal-movie:not(.is-open) { display:none; opacity:0; }
#modal-movie .modal-bg { position:absolute; width:100%; height:100vh; background:rgba(0,0,0,.8); }

/*content*/
#modal-movie .modal-content {
 position:absolute;
 left:50%;
 width:calc(100% - 3em);
 max-width:800px;
 max-height:100vh;
 max-height:calc(var(--vh,1vh) * 100);
 max-height:84vh;
 background:#fff;
 overflow:scroll;
 transform:translate(-50%,-50%);
}
#modal-movie .modal-content p { line-height:1.6em; }
#modal-movie .modal-content .ttl { margin-bottom:.8em; padding-bottom:.2em; text-align:center; font-size:1.4em; letter-spacing:.1em; border-bottom:1px solid; }
#modal-movie .modal-content p:not([class]) + p:not([class]),
#modal-movie .modal-content p:not([class]) > span + span { display:block; margin-top:.3em; }


/*close*/
#modal-movie .modal-close { cursor:pointer; }
#modal-movie .modal-close.window { width:auto; margin:.2em 0 0 2em; padding:0; border:none; border-bottom:1px solid; border-radius:0; cursor:pointer; }
#modal-movie .modal-close.text { width:6em; margin:2em auto 0; padding:.6em; text-align:center; line-height:1em; color:var(--link); border:1px solid; border-radius:50vh; }


@media screen and (min-width:426px) {
#modal-movie .modal-content { top:50%; padding:2em; }
}

@media screen and (max-width:425px) {
#modal-movie .modal-content { top:44%; padding:2em 1em; font-size:.9em; }
#modal-movie .modal-content .ttl { font-size:1.3em; }
}



/*==============================
	common
==============================*/
#anti-bug { max-width:2000px; margin:auto; }
#anti-bug > section:nth-of-type(n+3) { margin-top:6em; }
#anti-bug > section.bg-color { padding-bottom:6em; background:rgb(var(--bug-lgr)); }
#anti-bug.premium > section.bg-color {background:#efeeea; }

#anti-bug .circle { border-radius:50vh; }


/*title*/
#anti-bug h2.ttl { margin-bottom:1.6em; text-align:center; font-size:2em; font-weight:600; line-height:1em; letter-spacing:.1em; }
#anti-bug > section.bg-color h2.ttl { padding:1.2em 0; background:rgb(var(--bug-gr)); }
#anti-bug.premium > section.bg-color h2.ttl { background:#35380A;color: #fff; }
#anti-bug h2.ttl span { font-size:.8em; }


@media screen and (max-width:768px) {
#anti-bug > section:nth-of-type(n+3) { margin-top:4em; }
#anti-bug > section.bg-color { padding-bottom:4em; }
#anti-bug h2.ttl { font-size:1.6em; }
}

@media screen and (max-width:425px) {
#anti-bug h2.ttl { margin-bottom:1.2em; font-size:1.4em; letter-spacing:1px; }
#anti-bug .column-link { font-size:.9em; }
}



/*==============================
	main
==============================*/
#anti-bug #main-vs { position:relative; width:100%; max-width:2000px; height:calc(100vw * .356); max-height:720px; margin:auto; }
#anti-bug #main-vs > * { position:absolute; }
#anti-bug #main-vs > *:not(picture) { display:grid; align-content:center; z-index:1; }

#anti-bug #main-vs .box { top:0; left:6em; height:100%; padding:0 5em; font-weight:600; background:rgba(255,255,255,.9); }


#anti-bug.premium #main-vs .box{ background:#00472d;}
#anti-bug.premium #main-vs span{ color:#ffffff;}

#anti-bug #main-vs .box > * { width:100%; }

#anti-bug #main-vs .catch { font-size:2em; font-weight:600; line-height:1.6em; letter-spacing:.06em; }

#anti-bug.premium #main-vs .catch { color: #fff; }

#anti-bug #main-vs h1 { font-size:2em; }
#anti-bug #main-vs h1 svg { display:block; width:15em; margin:1.4em 0 .8em; fill:rgb(var(--bug-dgr)); stroke:none; }
#anti-bug.premium #main-vs h1 svg {margin-bottom:0; fill:#fff;}
#anti-bug.premium #main-vs h1 img {max-width: 8em;filter: brightness(0) invert(1)}
#anti-bug.premium #main-vs h1 span {display: block; padding-top:.5em;}




#anti-bug #main-vs h1 span { letter-spacing:.1em; }

#anti-bug #main-vs .circle { top:1.4em; left:23.2em; width:8em; height:8em; text-align:center; font-size:1.4em; line-height:1.6em; color:#fff; background:rgba(var(--bug-dgr),.7); }
#anti-bug.premium #main-vs .circle {background:rgba(var(--bugp-gld),.85);width:9em; height:9em;font-size:1.2em;font-weight: bold;  }


#anti-bug #main-vs > picture:first-of-type { top:-4px; right:8em; width:10em; aspect-ratio:13/32; box-shadow:0 0 8px rgba(0,0,0,.2); z-index:1; }
#anti-bug.premium #main-vs > picture:first-of-type{ display: none}

#anti-bug #main-vs > picture:last-of-type { top:0; left:0; width:100%; aspect-ratio:25/9; margin:auto; }
#anti-bug #main-vs > picture img { display:block; width:100%; }



@media screen and (max-width:1440px) {
#anti-bug #main-vs .box { left:0; padding:0 6vw; font-size:.9em; color:#fff; text-shadow:.2em .2em .6em rgba(0,0,0,.6); background:none; z-index:2; }
#anti-bug #main-vs h1 svg { fill:#fff; }
#anti-bug #main-vs > picture:first-of-type { right:4vw; width:12vw; min-width:100px; }
#anti-bug.premium #main-vs .box {background:none;}
}

@media screen and (min-width:769px) and (max-width:1440px) {
#anti-bug #main-vs .circle { top:2vw; left:42vw; }
}

@media screen and (max-width:1024px) {
#anti-bug #main-vs .box { font-size:1.4vw; }
#anti-bug #main-vs h1 svg { margin:1em 0 .4em; }
#anti-bug #main-vs .circle { font-size:1.2em; }
#anti-bug.premium #main-vs .circle { font-size:1em; }
}

@media screen and (max-width:768px) {
#anti-bug #main-vs { height:calc(100vw * 1.075); max-height:900px; }
#anti-bug #main-vs .box { top:-14vw; left:6vw; display:block; padding:0; font-size:2vw; text-shadow:.2em .2em .6em rgba(0,0,0,.4); }
#anti-bug.premium #main-vs h1 img {filter: none}
#anti-bug #main-vs h1 svg { width:14em; }
#anti-bug #main-vs .circle { top:auto; bottom:20vw; left:6vw; font-size:1.4em; }  
#anti-bug.premium #main-vs .circle { bottom:8vw;font-size:.9em;}
#anti-bug #main-vs > picture:first-of-type { right:2vw; width:36vw; min-width:170px; aspect-ratio:7/3; }
#anti-bug #main-vs > picture:last-of-type { aspect-ratio:40/43; }
#anti-bug.premium #main-vs h1 svg {fill:#00472d}
#anti-bug.premium #main-vs .catch {color:#00472d;text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,-1px 1px 0 #FFF, 1px -1px 0 #FFF,0px 1px 0 #FFF,0-1px 0 #FFF,-1px 0 0 #FFF, 1px 0 0 #FFF;}
#anti-bug.premium #main-vs h1 img {z-index: 1}
#anti-bug.premium #main-vs h1 span{color:#00472d;text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,-1px 1px 0 #FFF, 1px -1px 0 #FFF,0px 1px 0 #FFF,0-1px 0 #FFF,-1px 0 0 #FFF, 1px 0 0 #FFF;}
  
}


@media screen and (max-width:425px) {
#anti-bug #main-vs .catch { font-size:2.4em; }
#anti-bug #main-vs .circle { font-size:4.2vw; }
}



/*==============================
	desc
==============================*/
#anti-bug #desc { position:relative; margin-bottom:9em; padding:3em 0 10em; background:rgb(var(--bug-gr)); }
#anti-bug.premium #desc {background:#35380A;} 
#anti-bug.premium #desc > p{color: #fff}
#anti-bug #desc picture { display:block; }
#anti-bug #desc picture img { display:block; width:100%; }
#anti-bug #desc > p { text-align:center; font-size:1.5em; line-height:2em; letter-spacing:1px; }


/*record*/
#anti-bug #desc .record {
 position:absolute;
 bottom:-9em;
 left:0;
 right:0;
 width:23em;
 margin:2em auto 0;
 padding:2.2em 0 1.2em;
 background:#fdf8ed;
 box-shadow:.2em .2em .4em rgba(0,0,0,.1);
 border-radius:1em;
 z-index:10;
}
#anti-bug.premium #desc .record{
 bottom:-11em;
 }
#anti-bug.premium #desc .record span{
font-size: .6em;  
}
#anti-bug #desc .record:before {
 position:absolute;
 top:-2em;
 left:0;
 right:0;
 display:block;
 content:'';
 width:6em;
 height:6em;
 margin:auto;
 background:url(img/record-icon.webp) top .4em center / 50% no-repeat #fdf8ed;
 border-radius:50vh;
}
#anti-bug #desc .record > * { position:relative; z-index:1; }
#anti-bug #desc .record dt { max-width:12.6em; margin:0 auto .8em; padding-bottom:.4em; text-align:center; font-size:1.4em; letter-spacing:1px; background:#fff; border:1px solid #eaba4a; }
#anti-bug #desc .record dt b { position:relative; top:2px; font-size:1.6em; font-weight:500; }
#anti-bug #desc .record dd { display:flex; justify-content:center; align-items:center; }
#anti-bug #desc .record dd p { line-height:1.8em; }
#anti-bug #desc .record dd p em { margin:0 .1em; text-shadow:0 0 #eaba4a; font-size:1.16em; font-style:normal; }
#anti-bug #desc .record dd picture { width:11em; aspect-ratio:3/2; margin-left:1em; }
#anti-bug #desc .record dd picture img { border-radius:1em; }


@media screen and (max-width:1440px) {
#anti-bug #desc > p {font-size:1.4em; }
}

@media screen and (max-width:1024px) {
#anti-bug #desc { padding:1.6em 0 9em; }
#anti-bug #desc > p { font-size:1.3em; letter-spacing:0; }
}

@media screen and (min-width:769px) {
#anti-bug #desc .record { width:31em; }
#anti-bug #desc .record dd p br:first-of-type { display:none; }
}

@media screen and (max-width:425px) {
#anti-bug #desc { margin-bottom:8em; padding-bottom:6em; }
#anti-bug #desc > p { font-size:1.1em; }
#anti-bug #desc .record { width:21em; padding:1.6em 0 1.2em; font-size:.9em; }
#anti-bug #desc .record:before { width:5em; height:5em; }
#anti-bug #desc .record dt { font-size:1.2em; }
#anti-bug #desc .record dd picture { width:9em; }
}



/*==============================
	lineup
==============================*/
#anti-bug #lineup { margin-top:14em; }
#anti-bug.premium #lineup .lineup {text-align: center;color:#d02929}


/*--------------一時的に中央寄せ*---23/4/25まで-----------*/

#contents #main-column #anti-bug.premium #lineup>ul{
  justify-content: center;
}

@media screen and (max-width:768px) {
#anti-bug #lineup { margin-top:13em; }
}

@media screen and (max-width:425px) {
#anti-bug #lineup { margin-top:11em; }
}




/*==============================
	point
==============================*/
#anti-bug #point ul { width:calc(100% - 4em); margin:auto; }

#anti-bug #point picture { display:block; max-width:600px; aspect-ratio:40/23; margin:auto; }
#anti-bug #point picture img { display:block; width:100%; border-radius:1em; }

#anti-bug #point li h3 { margin:1em auto; padding-bottom:.6em; text-align:center; font-size:1.26em; line-height:1.6em; border-bottom:1px solid rgb(var(--bug-gr)); }
#anti-bug.premium #point li h3 {border-bottom:1px solid #00472d; }
#anti-bug #point li p { line-height:1.6em; }

#anti-bug #point .movie { max-width:23em; margin:1.2em 0 0 auto; padding:1em; background:#fff; border:1px solid rgb(var(--bug-gr)); }
#anti-bug #point .movie > * { line-height:1.6em; }
#anti-bug #point .movie dt { margin-bottom:.6em; padding-bottom:.4em; border-bottom:1px solid; }
#anti-bug #point .movie button {
 position:relative;
 display:block;
 width:9em;
 margin:.6em 0 0 auto;
 padding:.8em 0 .8em 3em;
 line-height:1em;
 color:var(--txt);
 background:rgb(var(--bug-gr));
 border:none;
 border-radius:50vh;
 cursor:pointer;
}
#anti-bug #point .movie button svg { position:absolute; top:0; bottom:0; left:1.2em; width:1.4em; margin:auto; fill:none; stroke:var(--txt); stroke-width:3px; }


/*design*/
#anti-bug #point .design { position:relative; max-width:800px; margin:4em auto 0; padding:2em; background:rgb(var(--bug-gr)); }
#anti-bug #point .design p { position:absolute; }
#anti-bug #point .design picture { aspect-ratio:1/1; }


@media screen and (min-width:1441px) {
#anti-bug #point ul { display:flex; justify-content:space-between; max-width:1440px; }
#anti-bug #point li { width:calc(100%/2 - 2em); }
}

@media screen and (max-width:1440px) {
#anti-bug #point li { margin:auto; }
#anti-bug #point li:nth-of-type(n+2) { margin-top:3em; }
#anti-bug #point li:first-of-type { max-width:67em; }
#anti-bug #point li:last-of-type { max-width:70em; }
}

@media screen and (max-width:425px) {
#anti-bug #point ul,
#anti-bug #point picture { width:calc(100% - 1.6em); }
#anti-bug #point li { font-size:.96em; }
#anti-bug #point li h3 { font-size:1.2em; font-weight:400; }
#anti-bug #point .movie { margin:1.2em auto 0; }
#anti-bug #point .movie button { padding-bottom:.9em; }
}



/*==============================
	design
==============================*/
#anti-bug #design { position:relative; margin:auto; }

#anti-bug #design p { position:absolute; display:flex; flex-wrap:wrap; align-content:center; margin:auto; z-index:2; }
#anti-bug #design p span { display:inline-block; line-height:1em; }

#anti-bug #design p.txt span { display:block; background:#fff; }

#anti-bug #design p.eng { top:0; width:100%; max-width:768px; height:100%; }
#anti-bug #design p.eng span { position:absolute; font-size:1.6em; letter-spacing:1px; }
#anti-bug #design p.eng span:first-of-type { top:.4em; left:1em; color:rgb(var(--bug-lgr)); }
#anti-bug #design p.eng span:last-of-type { bottom:.6em; right:1em; color:rgb(var(--bug-gr)); }

#anti-bug #design picture { position:relative; display:block; width:100%; max-width:768px; margin:auto; padding:3em; background:rgb(var(--bug-gr)); overflow:hidden; }
#anti-bug #design picture:before { position:absolute; right:0; content:''; width:100%; background:rgb(var(--bug-lgr)); }
#anti-bug #design picture > * { position:relative; display:block; width:100%; z-index:1; }


@media screen and (min-width:1025px) {
#anti-bug #design { width:1000px; }
#anti-bug #design p.txt { top:0; bottom:0; left:0; font-size:1.5em; }
#anti-bug #design p.txt span { margin-top:.8em; padding:1em 2em; border:1px solid; }
#anti-bug #design p.eng { right:1em; }
#anti-bug #design picture { margin-right:1em; }
}

@media screen and (max-width:1024px) {
#anti-bug #design { max-width:768px; }
#anti-bug #design p.txt { bottom:3em; left:3em; font-size:1.4em; }
#anti-bug #design p.txt span { margin-top:.4em; padding:.6em 1em; }
#anti-bug #design p.eng { left:0; right:0; }
#anti-bug #design picture { margin:auto; }
}

@media screen and (min-width:769px) {
#anti-bug #design { margin-top:4em; }
#anti-bug #design p.txt { width:17em; }
#anti-bug #design picture { aspect-ratio:1/1; }
#anti-bug #design picture:before { bottom:-384px; height:768px; transform:skew(0deg, -45deg); }
}

@media screen and (max-width:768px) {
#anti-bug #design p.txt { bottom:3.1em; left:2.2em; width:14em; font-size:1.2em; }
#anti-bug #design picture { padding:3em 2em; }
#anti-bug #design picture:before { bottom:0; height:50%; }
}

@media screen and (max-width:425px) {
#anti-bug #design { font-size:.9em; }
#anti-bug #design p.txt { left:1.4em; }
#anti-bug #design p.eng span:first-of-type { left:.5em; }
#anti-bug #design p.eng span:last-of-type { right:.5em; }
#anti-bug #design picture { padding:3em 1em; }
}



/*==============================
	aroma
==============================*/
#anti-bug #aroma picture { display:block; width:8em; margin:0 auto 1em; aspect-ratio:1/1; }
#anti-bug #aroma picture img { display:block; width:100%; border-radius:50vh; }
#anti-bug.premium #aroma li{position: relative}
#anti-bug.premium #aroma picture img.rare {border: 5px solid rgba(241,205,54,1.00); }
/*#anti-bug.premium #aroma picture img.rare::after{
  position: absolute;
  content: "希少精油";
  top:0;
  left:0;
color:rgba(241,205,54,1.00);}*/

#anti-bug #aroma p { text-align:center; }
#anti-bug #aroma > p { font-size:1.2em; line-height:1.8em; }

#anti-bug #aroma ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:calc(100% - 1em); margin:.4em auto 0; }
#anti-bug #aroma li { width:10em; margin-top:1.6em; }
#anti-bug #aroma li p { line-height:1em; }


@media screen and (max-width:768px) {
#anti-bug #aroma picture { width:7em; }
#anti-bug #aroma > p { font-size:1.1em; }
#anti-bug #aroma ul { font-size:.9em; }
#anti-bug #aroma li { width:9em; }
}

@media screen and (max-width:425px) {
#anti-bug #aroma > p { font-size:1em; }
#anti-bug #aroma li { width:8em; }
}

@media screen and (max-width:320px) {
#anti-bug #aroma ul { font-size:.8em; }
}



/*==============================
	howto
==============================*/
#anti-bug #howto picture { display:block; margin:auto; }
#anti-bug #howto picture img { display:block; width:100%; }

#anti-bug #howto ul { width:calc(100% - 4em); margin:auto; }

#anti-bug #howto li div h3 { margin:1.2em auto 1em; padding-bottom:.8em; text-align:center; font-size:1.2em; font-weight:600; letter-spacing:.1em; border-bottom:1px solid; }
#anti-bug #howto li div h3 b { margin-right:.1em; font-size:1.2em; }
#anti-bug #howto li div p { line-height:1.6em; }
#anti-bug #howto li div picture { width:calc(100% - 2em); max-width:400px; aspect-ratio:5/3; margin-top:1em; }
#anti-bug #howto li div picture img { border-radius:1em; }


@media screen and (min-width:1025px) {
#anti-bug #howto ul { display:flex; justify-content:space-between; max-width:1440px; }
#anti-bug #howto li { width:calc(100%/2 - 1em); }
}

@media screen and (max-width:1024px) {
#anti-bug #howto ul { max-width:800px; }
#anti-bug #howto li { margin:auto; }
#anti-bug #howto li:nth-of-type(n+2) { margin-top:3em; }
}

@media screen and (max-width:768px) {
#anti-bug #howto h2.ttl { margin-bottom:0!important; }
#anti-bug #howto ul { width:100%; }
#anti-bug #howto li div { padding:0 2em; }
}

@media screen and (max-width:425px) {
#anti-bug #howto li div { padding:0 1em; font-size:.9em; }
#anti-bug #howto li div h3 { font-size:1.1em; }
}



/*==============================
	ショップサーブ用
==============================*/
#main-column > #itemDetail-wrap { max-width:none!important; }
#itemDetail-cont { max-width:1000px; }