@charset'UTF-8';

/*color*/
:root {
 --course1:#8ca84c; --course1-rgb:140,168,76;
 --course2:#c37e52; --course2-rgb:195,126,82;
 --course3:#b29f35; --course3-rgb:178,159,53;
 --relax:#f2b256; --bg-relax:#fbf8f4;
 --refresh:#70c1a9; --bg-refresh:#f5fbf9;
 --antivirus:#5f9fd6; --bg-antivirus:#f1f5fb;
 --antibug:#7fc269; --bg-antibug:#f5fbf5;
}



/*==============================
	Aroma（共通）
==============================*/
[id*='-aroma'] h2 { margin-bottom:1em; text-align:center; font-size:1.1em; }
[id*='-aroma'] h2 b { font-size:1.4em; }
[id$='-aroma'] h2 span { display:block; font-size:1.4em; }
[id$='-aroma'] h2 + p { text-align:center; }
[id$='-aroma'] h2 + p span { display:block; font-size:12px; }

[id$='-aroma'] h3 { margin:2em auto 1em; text-align:center; font-size:1.4em; letter-spacing:.1em; }

[id$='-aroma'] h4 { margin-bottom:.4em; font-size:1.2em; letter-spacing:1px; }


/*img*/
[id$='-aroma'] img { display:block; margin:auto; }
[id$='-aroma'] img[alt='aroma-chart'] { width:calc(100% - 2em); max-width:500px; }
[id$='-aroma'] img[alt='pop'] { width:100%; max-width:200px; margin:.6em auto; }


/*modal*/
[id*='aroma-list'] .modal-content { width:calc(100% - 1.2em)!important; max-width:800px!important; padding:2em 0!important; }


/*topics*/
[id$='-aroma'] a.topics { position:relative; top:-.8em; left:3em; width:calc(100% - 2em); margin:auto; padding:.6em 1em; background:#fff; border:1px solid; border-radius:10em; }


@media screen and (max-width:600px) {
[id$='-aroma'] h2 + p span { width:calc(100% - 2em); margin:auto; text-align:left; }
}

@media screen and (min-width:451px) {
[id$='-aroma'] h2 + p br { display:none; }
}

@media screen and (max-width:400px) {
[id$='-aroma'] a.topics { left:2em; }
}



/*==============================
	Basic aroma
==============================*/
#basic-aroma h2 b { color:var(--course1); }

#basic-aroma > img[alt='aroma-chart'] { max-width:400px; margin-top:1em; }

#basic-aroma > dl.box { position:relative; display:flex; flex-wrap:wrap; width:calc(100% - 2em); margin:2em auto 0; }
#basic-aroma > dl.box > dt { width:100%; margin-bottom:1em; text-align:center; font-size:1.1em; font-weight:600; letter-spacing:1px; }
#basic-aroma > dl.box > dt b { margin-right:.1em; font-size:1.2em; }
#basic-aroma > dl.box > dd { position:relative; padding:1.4em 1em; background:#fff; border-radius:1em; }

#basic-aroma > dl.box p { line-height:1.4em; }
#basic-aroma > dl.box p:nth-of-type(n+2) { margin-top:.2em; }
#basic-aroma > dl.box a { display:block; margin:.6em 0 0 auto; padding:.4em 0; text-align:center; text-decoration:none; border:1px solid; border-radius:10em; }

#basic-aroma > dl.box p.scene:before { content:'\30B7\30FC\30F3\30FB\7528\9014\FF1A'; display:inline-block; font-weight:600; }

#basic-aroma > dl.box p.strength { display:flex; align-items:flex-end; font-weight:600; line-height:2.2em; }
#basic-aroma > dl.box p.strength span { font-feature-settings:'palt'; }
#basic-aroma > dl.box p.strength span:after { content:'\FF1A'; font-feature-settings:normal; }
#basic-aroma > dl.box p.strength img[alt='power'] { width:auto; max-width:calc(100% - 6em); height:2em; margin:0; }

/*icon*/
#basic-aroma [class^='icon-']:before,
#basic-aroma [class^='icon-']:after { position:absolute; display:inline-block; font-size:.9em; font-weight:600; letter-spacing:1px; }
#basic-aroma [class^='icon-']:before { left:1em; content:''; }
#basic-aroma [class^='icon-']:after { top:-.4em; left:2.8em; }
#basic-aroma [class^='icon-no']:before { top:-.9em; width:1.6em; height:1.6em; background:url(/svg/i-crown_yellow.svg) center / 100% no-repeat; }
#basic-aroma [class^='icon-no']:after { width:5em; }
#basic-aroma .icon-no1:after { content:'\4EBA\6C17No.1'; }
#basic-aroma .icon-no2:after { content:'\4EBA\6C17No.2'; }
#basic-aroma .icon-no3:after { content:'\4EBA\6C17No.3'; }
#basic-aroma .icon-recd:before { top:-.8em; width:1.4em; height:1.4em; background:url(/svg/i-star_yellow.svg) center / 100% no-repeat; }
#basic-aroma .icon-recd:after { content:'\5B63\7BC0\306E\304A\3059\3059\3081'; }

/*relax*/
#basic-aroma a[href='#relax']:hover { color:var(--relax); }
#basic-aroma dl#relax dt:after { width:11.6em; }
#basic-aroma dl#relax dd { background:var(--bg-relax); }
#basic-aroma dl#relax p.scene:before { color:var(--relax); }
#basic-aroma dl#relax p.strength span,
#basic-aroma dl#relax p.strength [class^='bar']:after { color:var(--relax); }
#basic-aroma dl#relax p.strength [class^='bar']:before { background:var(--relax); }
/*refresh*/
#basic-aroma a[href='#refresh']:hover { color:var(--refresh); }
#basic-aroma dl#refresh dt:after { width:13em; }
#basic-aroma dl#refresh dd { background:var(--bg-refresh); }
#basic-aroma dl#refresh p.scene:before { color:var(--refresh); }
#basic-aroma dl#refresh p.strength span,
#basic-aroma dl#refresh p.strength [class^='bar']:after { color:var(--refresh); }
#basic-aroma dl#refresh p.strength [class^='bar']:before { background:var(--refresh); }
/*antivirus*/
#basic-aroma a[href='#antivirus']:hover { color:var(--antivirus); }
#basic-aroma dl#antivirus dt:after { width:10.2em; }
#basic-aroma dl#antivirus dd { background:var(--bg-antivirus); }
#basic-aroma dl#antivirus p.scene:before { color:var(--antivirus); }
#basic-aroma dl#antivirus p.strength span,
#basic-aroma dl#antivirus p.strength [class^='bar']:after { color:var(--antivirus); }
#basic-aroma dl#antivirus p.strength [class^='bar']:before { background:var(--antivirus); }
/*antibug*/
#basic-aroma a[href='#antibug']:hover { color:var(--antibug); }
#basic-aroma dl#antibug dt:after { width:9em; }
#basic-aroma dl#antibug dd { background:var(--bg-antibug); }
#basic-aroma dl#antibug p.scene:before { color:var(--antibug); }
#basic-aroma dl#antibug p.strength span,
#basic-aroma dl#antibug p.strength [class^='bar']:after { color:var(--antibug); }
#basic-aroma dl#antibug p.strength [class^='bar']:before { background:var(--antibug); }


/*accordion*/
#basic-aroma .acd-btn { display:block; width:7em; margin:.6em auto 0; padding-bottom:.2em; text-align:center; font-size:.9em; color:var(--link); border-bottom:1px solid; }
#basic-aroma .acd-btn:before { content:'\3082\3063\3068\8A73\3057\304F'; display:block; }
#basic-aroma .acd-btn.open { width:4.4em; margin-bottom:1em; }
#basic-aroma .acd-btn.open:before { content:'\9589\3058\308B'; }
#basic-aroma .acd-btn + .acd-area { height:0; visibility:hidden; overflow:hidden; transition:.6s; opacity:0; }
#basic-aroma .acd-btn.open + .acd-area { height:auto; visibility:visible; opacity:1; }
#basic-aroma dd dl { margin:1em auto; font-size:.96em; }
#basic-aroma dd dl > * { padding:.4em; line-height:1.2em; }
#basic-aroma dd dl dt { font-weight:600; background:#fff; }
#basic-aroma dd dl dd { padding-right:0; }
#basic-aroma dd dl + p { text-align:center; }
#basic-aroma dd .info { max-width:260px; margin:1em auto 0; text-align:right; font-size:.9em; line-height:1.4em; }
#basic-aroma dd a { display:block; width:14.6em; margin:1em auto; padding:1em .2em; border-bottom:1px solid; }


@media screen and (min-width:601px) {
#basic-aroma > dl.box > dd { width:calc(100%/2 - .4em); }
#basic-aroma > dl.box > dd:nth-of-type(2n+2) { margin-left:.8em; }
#basic-aroma > dl.box > dd:nth-of-type(n+3) { margin-top:.8em; }
}

@media screen and (max-width:600px) {
#basic-aroma > dl.box > dt { left:3em; }
#basic-aroma > dl.box > dd { width:100%; }
#basic-aroma > dl.box > dd:nth-of-type(n+2) { margin-top:1.2em; }
#basic-aroma [class^='icon-']:before { left:auto; right:7.2em; }
#basic-aroma .icon-recd:before { right:9.6em; }
#basic-aroma [class^='icon-']:after { left:auto; right:2em; }
#basic-aroma dd .info { font-size:12px; }
}

@media screen and (min-width:401px) {
#basic-aroma dd dl { display:flex; flex-wrap:wrap; align-items:stretch; font-size:.96em; }
#basic-aroma dd dl > * { border-bottom:.2em solid #fff; }
#basic-aroma dd dl > *:nth-of-type(n+2) { margin-top:.4em; }
#basic-aroma dd dl dt { width:8em; }
#basic-aroma dd dl dd { width:calc(100% - 8em); }
}



/*==============================
	Season aroma
==============================*/
/*color*/
:root {
 --season1-rgb:244,233,135;
 --season2-rgb:198,231,228;
 --season3-rgb:249,203,184;
 --season4-rgb:187,207,225;
}


#season-aroma { width:calc(100% - 2em); margin:auto; }

#season-aroma h2 b { display:block; color:var(--course2); }
#season-aroma h3 { margin:1em auto .4em; }

#season-aroma > p { max-width:34em; margin:auto; }

#season-aroma dl { display:flex; flex-wrap:wrap; align-items:stretch; max-width:42.6em; margin:.2em auto 0; }
#season-aroma dl > * { padding:.6em .8em; line-height:1.4em; }
#season-aroma dl > *:nth-of-type(n+2) { margin-top:.2em; }
#season-aroma dt { width:4em; background:rgba(var(--course2-rgb),.16); }
#season-aroma dt b { font-size:1.2em; font-weight:500; }
#season-aroma dd { width:calc(100% - 4em); background:rgba(var(--course2-rgb),.08); }

/*#season-aroma dl:nth-of-type(1) dt { background:rgba(var(--season1-rgb),.2); }
#season-aroma dl:nth-of-type(1) dd { background:rgba(var(--season1-rgb),.1); }
#season-aroma dl:nth-of-type(2) dt { background:rgba(var(--season2-rgb),.2); }
#season-aroma dl:nth-of-type(2) dd { background:rgba(var(--season2-rgb),.1); }
#season-aroma dl:nth-of-type(3) dt { background:rgba(var(--season3-rgb),.2); }
#season-aroma dl:nth-of-type(3) dd { background:rgba(var(--season3-rgb),.1); }
#season-aroma dl:nth-of-type(4) dt { background:rgba(var(--season4-rgb),.2); }
#season-aroma dl:nth-of-type(4) dd { background:rgba(var(--season4-rgb),.1); }*/



/*==============================
	Premium aroma
==============================*/
/*color*/
:root {
 --premium1-rgb:166,0,57;
 --premium2-rgb:0,122,140;
 --premium3-rgb:31,60,1;
 --premium4-rgb:114,45,8;
 --premium5-rgb:119,105,105;
 --premium6-rgb:113,0,86;
 --premium7-rgb:101,115,60;
 --premium8-rgb:104,49,0;
}


#premium-aroma h2 b { color:var(--course3); }

#premium-aroma > ul { width:calc(100% - 2em); margin:1em auto 0; line-height:1.4em; }
#premium-aroma > ul h3 { padding:.6em; font-size:1.1em; font-weight:600; }
#premium-aroma > ul li:first-of-type h3 { color:rgba(var(--premium1-rgb),1); background:rgba(var(--premium1-rgb),.2); }
#premium-aroma > ul li:nth-of-type(2) h3 { color:rgba(var(--premium2-rgb),1); background:rgba(var(--premium2-rgb),.2); }
#premium-aroma > ul li:nth-of-type(3) h3 { color:rgba(var(--premium3-rgb),1); background:rgba(var(--premium3-rgb),.2); }
#premium-aroma > ul li:nth-of-type(4) h3 { color:rgba(var(--premium4-rgb),1); background:rgba(var(--premium4-rgb),.2); }
#premium-aroma > ul li:nth-of-type(5) h3 { color:rgba(var(--premium5-rgb),1); background:rgba(var(--premium5-rgb),.2); }
#premium-aroma > ul li:nth-of-type(6) h3 { color:rgba(var(--premium6-rgb),1); background:rgba(var(--premium6-rgb),.2); }
#premium-aroma > ul li:nth-of-type(7) h3 { color:rgba(var(--premium7-rgb),1); background:rgba(var(--premium7-rgb),.2); }
#premium-aroma > ul li:last-of-type h3 { color:rgba(var(--premium8-rgb),1); background:rgba(var(--premium8-rgb),.2); }
#premium-aroma > ul .cat span { display:inline-block; margin:0 .2em .2em; padding:.2em .4em; border:.3em solid #eee; border-radius:.4em; }


@media screen and (min-width:769px) {
#premium-aroma > ul { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; }
#premium-aroma > ul li { width:calc(100%/2 - .4em); }
#premium-aroma > ul li:nth-of-type(n+3) { margin-top:.6em; }
}

@media screen and (max-width:768px) {
#premium-aroma > ul li:nth-of-type(n+2) { margin-top:.6em; }
}

@media screen and (min-width:426px) {
#premium-aroma > ul { width:calc(100% - 4em); }
}