@charset'utf-8';

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



/*==============================
	Root
==============================*/
:root { --hang-br:173,146,66; --hang-gr:110,130,1; --hang-dbr:#927a32; }



/*==============================
	Common
==============================*/
.itm-dtl > #item-hang { margin-top:0; }
#item-hang > section { margin:auto; }
#item-hang > section:nth-of-type(n+2) { margin-top:6em; }
#item-hang.bg-color,
#item-hang > section.bg-color { padding:4em 0; background:rgba(var(--hang-br),.1); }


/*title*/
#item-hang h3 { text-align:center; margin-bottom:1.6em; font-size:1.5em; font-weight:600; letter-spacing:2px; color:var(--hang-dbr); }
#item-hang h3 span { display:inline-block; padding:0 .4em .6em; border-bottom:2px solid; }
#item-hang h3 + p { text-align:center; line-height:2em; }


/*text*/
#item-hang > p.attention { margin-bottom:1em; text-align:center; color:red; }
#item-hang > p.attention a { display:inline-block; text-decoration:underline; }


@media screen and (max-width:425px) {
#item-hang { font-size:.9em; }
#item-hang > section:nth-of-type(n+2) { margin-top:4em; }
#item-hang.bg-color,
#item-hang > section.bg-color { padding:3em 0; }
#item-hang h3 { font-size:1.4em; letter-spacing:1px; }
}



/*==============================
	Main-vs
==============================*/
#item-hang #main-vs { position:relative; text-align:center; }

#item-hang #main-vs .bg-img { position:relative; }
#item-hang #main-vs .bg-img img { width:100%; max-width:2000px; min-height:600px; margin:auto; object-fit:cover; font-family:'object-fit:cover;'; }

#item-hang #main-vs h2 {
 position:absolute;
 top:6vw;
 right:12vw;
 width:22em;
 margin:auto;
 padding:2em 0 1.8em;
 text-align:center;
 font-size:2em;
 font-weight:500;
 line-height:2em;
 letter-spacing:.1em;
 background:#fff;
 box-shadow:.2em .2em .6em rgba(0,0,0,.1);
 border-radius:80em 90em 70em 80em;
 z-index:1;
}
#item-hang #main-vs h2 span { display:block; }
#item-hang #main-vs h2 span.name { margin-top:.6em; font-family:var(--font-logo); font-size:.8em; font-weight:400; line-height:1em; }
#item-hang #main-vs h2 em {
 position:relative;
 top:-1px;
 display:inline-block;
 margin-right:.1em;
 font-size:1.2em;
 font-style:normal;
 line-height:1.2em;
 color:rgb(var(--hang-br));
 background:rgba(var(--hang-br),.1);
}
#item-hang #main-vs h2 b { font-weight:500; color:rgb(var(--hang-gr)); background:rgba(var(--hang-gr),.1); }

#item-hang #main-vs p.logo { position:absolute; bottom:1em; left:1em; font-family:var(--font-logo); font-size:.9em; font-weight:400; line-height:1em; letter-spacing:.1em; }

#item-hang #main-vs p.aroma {
 position:absolute;
 right:6vw;
 bottom:4vw;
 width:8em;
 height:8em;
 padding:2.2em 0;
 font-size:1.2em;
 font-weight:600;
 line-height:1.8em;
 color:#fff;
 background:rgba(var(--hang-gr),.8);
 box-shadow:0 0 .6em rgba(0,0,0,.1);
 border:2px solid;
 border-radius:50vh;
}
#item-hang #main-vs p.aroma b { position:relative; top:2px; display:inline-block; margin-right:2px; font-size:2.2em; }

#item-hang #main-vs .text { width:calc(100% - 1.6em); margin:2em auto 0; line-height:2em; z-index:1; }


@media screen and (max-width:1600px) {
#item-hang #main-vs h2 { top:4vw; right:4vw; font-size:1.8em; }
}

@media screen and (max-width:1024px) {
#item-hang #main-vs p.aroma { font-size:1.1em; }
#item-hang #main-vs .bg-img img { min-height:500px; object-position:35% center; }
#item-hang #main-vs h2 { right:3vw; padding:1.6em 0 1.4em; font-size:1.6em; line-height:1.8em; }
}

@media screen and (max-width:768px) {
#item-hang #main-vs h2 { top:4vw; right:0; max-width:calc(100% - 1em); font-size:1.4em; border-radius:1em 0 0 1em; }
}

@media screen and (min-width:426px) {
#item-hang #main-vs h2 br:nth-of-type(2) { display:none; }
#item-hang #main-vs p.logo { display:none; }
#item-hang #main-vs .text { word-break:keep-all; word-wrap:break-word; }
}

@media screen and (max-width:425px) {
#item-hang #main-vs .bg-img img { min-height:440px; }
#item-hang #main-vs h2 { width:12em; padding:1.4em 0 1em .4em; font-size:1.36em; background:rgba(255,255,255,.9); }
#item-hang #main-vs h2 span.name { display:none; }
#item-hang #main-vs p.aroma { right:3vw; font-size:1em; }
#item-hang #main-vs .text { margin-top:1em; text-align:left; }
#item-hang #main-vs .text br { display:none; }
}



/*==============================
	Point
==============================*/
#item-hang #point ul { counter-reset:number 0; width:calc(100% - 2em); max-width:1024px; margin:auto; }
#item-hang #point li:nth-of-type(even) { flex-direction:row-reverse; }
#item-hang #point li:nth-of-type(n+2) { margin-top:3em; }
#item-hang #point li div { position:relative; background:#fff; border:1px solid rgb(var(--hang-br)); border-radius:.4em; z-index:1; }
#item-hang #point li div:before,
#item-hang #point li div:after { position:absolute; font-family:var(--font-logo); font-size:1.4em; letter-spacing:1px; }
#item-hang #point li div:before { top:-.6em; left:1.5em; counter-increment:number 1; content:'Point' counter(number); color:var(--hang-dbr); z-index:1; }
#item-hang #point li div:after { top:-1px; left:1em; width:4em; height:.5em; content:''; background:#fff; }
#item-hang #point li div h4 { margin-bottom:.6em; text-align:center; font-size:1.3em; }
#item-hang #point li div p { line-height:1.6em; }
#item-hang #point li picture { display:block; }

#item-hang #point .info { font-size:.9em; line-height:1.4em; }


@media screen and (min-width:769px) {
#item-hang #point li { display:flex; align-items:center; }
#item-hang #point li div { width:50%; padding:2.6em 2em; }
#item-hang #point li:nth-of-type(odd) div { margin-right:-5%; }
#item-hang #point li:nth-of-type(even) div { margin-left:-5%; }
#item-hang #point li picture { width:55%; }
}

@media screen and (max-width:768px) {
#item-hang #point li div { width:80vw; max-width:35em; margin-left:1em; padding:2em; }
#item-hang #point li picture { margin-top:-6em; }
}

@media screen and (max-width:425px) {
#item-hang #point li div { width:calc(100% - 2em); padding:1.6em 1.2em 1em; }
#item-hang #point li div h4 { font-size:1.2em; }
#item-hang #point li picture { margin-top:-3em; }
}



/*==============================
	Aroma
==============================*/
:root { --hang-bug:180,214,131; --hang-mnt:160,210,227; --hang-wod:135,194,180; --hang-flw:255,185,68; --hang-drm:194,177,208; --hang-rlx:203,233,116; }


#item-hang #aroma p { line-height:1.6em; }

#item-hang #aroma ul { width:calc(100% - 2em); margin:2em auto 0; }
#item-hang #aroma li { padding:2em; }
#item-hang #aroma li.bug { background:rgba(var(--hang-bug),.3); }
#item-hang #aroma li.mint { background:rgba(var(--hang-mnt),.3); }
#item-hang #aroma li.wood { background:rgba(var(--hang-wod),.3); }
#item-hang #aroma li.flower { background:rgba(var(--hang-flw),.3); }
#item-hang #aroma li.dream { background:rgba(var(--hang-drm),.3); }
#item-hang #aroma li.relax { background:rgba(var(--hang-rlx),.3); }

#item-hang #aroma h4 { margin-bottom:1em; text-align:center; font-size:1.2em; }
#item-hang #aroma h4 b { display:block; width:7em; margin:0 auto .6em; padding:.4em 0; font-size:.9em; font-weight:400; background:#fff; border-radius:50vh; }
#item-hang #aroma li.bug h4 b { background:rgba(var(--hang-bug),.8); }
#item-hang #aroma li.mint h4 b { background:rgba(var(--hang-mnt),.8); }
#item-hang #aroma li.wood h4 b { background:rgba(var(--hang-wod),.8); }
#item-hang #aroma li.flower h4 b { background:rgba(var(--hang-flw),.8); }
#item-hang #aroma li.dream h4 b { background:rgba(var(--hang-drm),.8); }
#item-hang #aroma li.relax h4 b { background:rgba(var(--hang-rlx),.8); }

#item-hang #aroma .oil { margin-top:1em; padding:1em; font-size:13px; background:#fff; }

#item-hang #aroma .info { width:calc(100% - 2em); margin:1em auto 0; font-size:.9em; }


@media screen and (min-width:1441px) {
#item-hang #aroma ul { max-width:1600px; }
#item-hang #aroma li { width:calc(100%/3 - 1em); }
#item-hang #aroma li:nth-of-type(3n+2) { margin:0 1em; }
#item-hang #aroma li:nth-of-type(n+4) { margin-top:1em; }
}

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

@media screen and (min-width:1025px) {
#item-hang #aroma .info { text-align:center; }
}

@media screen and (max-width:1024px) {
#item-hang #aroma li { padding:1.4em 1em; }
}

@media screen and (min-width:769px) {
#item-hang #aroma ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; }
}

@media screen and (max-width:768px) {
#item-hang #aroma ul { max-width:600px; }
#item-hang #aroma li { width:100%; }
#item-hang #aroma li:nth-of-type(n+2) { margin-top:1em; }
}

@media screen and (min-width:426px) {
#item-hang #aroma > p { word-break:keep-all; word-wrap:break-word; }
}

@media screen and (max-width:425px) {
#item-hang #aroma > p { width:calc(100% - 2em); margin:auto; text-align:left; }
#item-hang #aroma ul { margin-top:1em; }
#item-hang #aroma .info { font-size:13px; }
}



/*==============================
	Scene
==============================*/
#item-hang #scene ul { width:calc(100% - 2em); margin:auto; }
#item-hang #scene li { font-weight:600; }
#item-hang #scene li p { position:relative; left:.4em; display:inline-block; padding:.6em 1.2em; text-align:center; background:#fff; border:1px solid rgb(var(--hang-br)); border-radius:10em; }
#item-hang #scene li p:before,
#item-hang #scene li p:after { content:''; position:absolute; top:100%; margin:auto; }
#item-hang #scene li p:before { left:calc(50% - .4em); width:.4em; border:.4em solid transparent; border-top:.6em solid rgb(var(--hang-br)); }
#item-hang #scene li p:after { right:0; left:0; width:calc(.4em - 1px); border:calc(.4em - 1px) solid transparent; border-top:calc(.6em - 1px) solid #fff; }
#item-hang #scene li img { width:100%; margin-top:-.6em; }


@media screen and (min-width:1025px) {
#item-hang #scene li p { font-size:1.1em; }
}

@media screen and (max-width:1024px) {
#item-hang #scene ul { width:calc(100% - 2em); }
}

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

@media screen and (min-width:426px) and (max-width:768px) {
#item-hang #scene li { width:calc(100%/2 - .4em); }
#item-hang #scene li:nth-of-type(2n+2) { margin-left:.8em; }
#item-hang #scene li:nth-of-type(n+3) { margin-top:1em; }
}

@media screen and (min-width:426px) {
#item-hang #scene ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
}

@media screen and (max-width:425px) {
#item-hang #scene li { width:100%; max-width:400px; margin:auto; }
#item-hang #scene li:nth-of-type(n+2) { margin-top:1em; }
#item-hang #scene li p:before { left:calc(50% - .35em); }
#item-hang #scene li img { width:100%; max-height:48vw; margin-top:-1.2em; object-fit:cover; font-family:'object-fit:cover;'; object-position:top 20% left 0; }
}



/*==============================
	Step
==============================*/
#item-hang #step ol { counter-reset:number 0; max-width:860px; margin:0 auto 1em; padding-top:2.2em!important; }
#item-hang #step li { position:relative; padding:1.4em 1em 1em; background:#fff; }
#item-hang #step li:before,
#item-hang #step li:after { position:absolute; left:0; right:0; margin:auto; font-size:1.1em; }
#item-hang #step li:before {
 top:-1.2em;
 counter-increment:number 1;
 content:'STEP' counter(number);
 width:3em;
 text-align:center;
 font-family:var(--font-logo);
 color:var(--hang-dbr);
 letter-spacing:1px;
 z-index:1;
}
#item-hang #step li:after { top:-2em; content:''; width:5em; height:3em; background:#fff; border-top-left-radius:5em; border-top-right-radius:5em; }
#item-hang #step li p:first-of-type:not([class]) { text-align:center; font-size:1.1em; font-weight:600; }
#item-hang #step li img { display:block; width:auto; margin:1em auto; max-height:220px; }

#item-hang #step p { line-height:1.4em; }
#item-hang #step p.info { font-size:.9em; }
#item-hang #step ol + p { width:calc(100% - 2em); margin:auto; }


@media screen and (min-width:769px) {
#item-hang #step ol { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; width:calc(100% - 2em); }
#item-hang #step li { width:calc(100%/3 - .2em); }
}

@media screen and (max-width:768px) {
#item-hang #step ol { padding:0 2em; overflow-x:auto; white-space:nowrap; }
#item-hang #step li { display:inline-block; width:16.6em; height:24em; vertical-align:top; white-space:normal; }
}

@media screen and (min-width:426px) {
#item-hang #step ol + p { text-align:right; }
}

@media screen and (max-width:425px) {
#item-hang #step ol { padding:0 1em; }
#item-hang #step li { height:22.6em; }
#item-hang #step li img { max-height:180px; }
}



/*==============================
	Step - oil
==============================*/
#item-hang #step.oil li img { width:100%; max-width:200px; height:auto; max-height:none; }
#item-hang #step.oil li .flex { display:flex; justify-content:center; align-items:center; }
#item-hang #step.oil li .flex img { width:25%; max-width:100px; margin:0 0 0 .4em; }


@media screen and (min-width:769px) {
#item-hang #step.oil li { width:calc(100%/2 - .6em); }
#item-hang #step.oil li:nth-of-type(n+3) { margin-top:3em; }
}

@media screen and (max-width:768px) {
#item-hang #step.oil li { height:26.6em!important; }
}

@media screen and (max-width:375px) {
#item-hang #step.oil li { height:28em!important; }
}



/*==============================
	Spec
==============================*/
#item-hang #spec dl { display:flex; flex-wrap:wrap; align-items:stretch; width:calc(100% - 1em); max-width:600px; margin:auto; font-size:.9em; line-height:1.4em; }
#item-hang #spec dl > * { padding:.8em .6em; }
#item-hang #spec dl > *:nth-of-type(n+2) { margin-top:.2em; }
#item-hang #spec dt { width:9.4em; background:#f5f5f5; }
#item-hang #spec dd { width:calc(100% - 9.4em); background:#fafafa; }
#item-hang #spec dd + dd { position:relative; margin:0 0 0 9.4em!important; padding-top:0; }
#item-hang #spec dd + dd:before { position:absolute; top:0; left: -9.4em; content:''; display:block; width:9.4em; height:100%; background:#f5f5f5; }

#item-hang #spec img { display:block; max-width:190px; margin:0 auto 1em; }

#pdt-spec h2 + img { display:block; width:calc(100% - 2em); max-width:200px; margin:3em auto 1em; }



/*==============================
	Faq
==============================*/
#item-hang #faq { width:calc(100% - 2em); max-width:600px; }
#item-hang #faq dt { position:relative; padding:1em 3em 1em 1em; line-height:1.1em; background:#fafafa; border-bottom:1px solid #eee; cursor:pointer; }
#item-hang #faq dd { padding:.6em 1em 1em; line-height:1.6em; }

/*open*/
#item-hang #faq dt:not(.open) + dd { display:none; }
#item-hang #faq dt:before,
#item-hang #faq dt:after { content:'';	position:absolute;	top:calc(50% - 1px); right:1em;	width:1.2em;	border-bottom:1px solid; transition:.6s; }
#item-hang #faq dt:after {	transform:rotate(90deg); }
#item-hang #faq .open:before { transform:rotate(-45deg); }
#item-hang #faq .open:after {	transform:rotate(45deg); }

/*button*/
#item-hang #faq button { display:block; width:100%; margin-top:1em; text-align:right; background:none; border:none; }
#item-hang #faq button a { border-bottom:1px solid; }