@charset"UTF-8";

/*==============================
	基本　Common
==============================*/
.pdt-guide.spray [id^='menu'] { margin-top:6em; }
.pdt-guide.spray #menu + [id^='menu'] { margin-top:3em; }
.pdt-guide.spray [id^='menu'] .inline-box { max-width:1000px; margin:auto; }
.pdt-guide.spray [id^='menu'] .inline-box > p { margin-left:1em; margin-right:1em; }

.pdt-guide.spray p strong { font-weight:500; background:#f9f6e8; }

.pdt-guide.spray ul li:before { display:none; }


/*img*/
.pdt-guide.spray picture img,
.pdt-guide.spray img { width:100%; height:auto; }
.pdt-guide.spray #main-vs { display:block; max-width:1000px; margin:auto; }


/*h2*/
.pdt-guide.spray h2 { counter-reset:number 0; margin-bottom:1em; padding:1em .6em; text-align:center; font-size:1.26em;letter-spacing:.12em; color:#333; background:#dde9ef; }


/*h3*/
.pdt-guide.spray h3 { margin:3em auto 1.2em; padding:0; text-align:center; font-size:1.1em; font-weight:600; letter-spacing:1px; background:none; border:none; }
.pdt-guide.spray h3:before {
 font-family:'Open Sans Condensed', sans-serif;
 display:block;
 content:counter(number,decimal-leading-zero)'';
 counter-increment:number 1;
 width:2em;
 margin:0 auto .4em;
 padding-bottom:.4em;
 font-size:2em;
 font-weight:500;
 letter-spacing:.1em;
 border-bottom:1px solid;
}


/*h3*/
.pdt-guide.spray h4 { margin:2em auto .6em; padding:0; text-align:center; font-size:1.1em; font-weight:600; background:none; border:none; }


@media screen and (max-width:400px) {
.pdt-guide.spray [id^='menu'] { margin-top:4em; }
}



/*==============================
	Menu List
==============================*/
.pdt-guide.spray #menu { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; max-width:1000px; margin:1em auto 0; text-align:center; font-size:1.06em; }
.pdt-guide.spray #menu li { width:calc(100%/2); }
.pdt-guide.spray #menu li:nth-of-type(2n+2) { border-left:1px solid; }
.pdt-guide.spray #menu li:nth-of-type(n+3) { border-top:1px solid; }

.pdt-guide.spray #menu a { position:relative; display:block; padding:1.6em .2em 2.6em; }
.pdt-guide.spray #menu a:after { position:absolute; right:auto; bottom:1em; left:calc(50% - .2em); display:block; font-size:1.6em; transform:rotate(135deg); }


@media screen and (min-width:1001px) {
.pdt-guide.spray #menu { font-size:1.16em; }
}

@media screen and (max-width:370px) {
.pdt-guide.spray #menu { font-size:4vw; }
}



/*==============================
	Menu1
==============================*/
#menu1 > p { width:calc(100% - 2em); margin:auto; }


/*point*/
#menu1 .point { display:flex; justify-content:center; align-items:center; width:calc(100% - 1.4em); margin:2em auto 1em; }
#menu1 .point img { width:14vw; max-width:60px; margin:0 2em; }
#menu1 .point dl { margin-left:1em; }
#menu1 .point dt { font-size:1.2em; letter-spacing:.1em; }
#menu1 .point dt span { background:#f9f6e8; }
#menu1 .point dt:nth-of-type(n+2) { margin-top:1em; }
#menu1 .point dd { margin-top:.6em; line-height:1.4em; }


/*memo*/
#menu1 dl.memo { width:calc(100% - 2em); max-width:600px; margin:2em auto 0; font-size:.9em; }
#menu1 dl.memo dt { position:relative; top:.4em; left:.6em; display:inline-block; margin:0; padding:.6em; border:1px solid; }
#menu1 dl.memo dd { padding:1em; line-height:1.6em; background:#f5f5f5; }
#menu1 dl.memo + p { margin-top:1.4em; }


/*comparison*/
#menu1 #comparison table { display:block; width:100%; margin:1em auto 0; padding:0 .6em; line-height:1.6em; }
#menu1 #comparison tr > * { padding:1em; }
#menu1 #comparison tr > * { border:2px solid #fff; }
#menu1 #comparison tr:first-of-type > * { border-top:none; }
#menu1 #comparison th { text-align:center; }
#menu1 #comparison tr > th:first-of-type { padding:.6em .2em; vertical-align:middle; }
#menu1 #comparison tr:nth-of-type(1) th:not(:first-of-type) { background:#eee; }
#menu1 #comparison tr:nth-of-type(1) th:nth-of-type(2) { background:#dde9ef; }
#menu1 #comparison tr:nth-of-type(n+2) th,
#menu1 #comparison td { background:#f9f9f9; }
#menu1 #comparison td:nth-of-type(1) { background:#eef3f5; }
#menu1 #comparison td img.icon { display:block; width:6em; margin:0 auto .6em; }
#menu1 #comparison td b { display:block; margin-bottom:.4em; color:#5490a9; }
#menu1 #comparison td span { display:block; margin-top:.2em; padding:.4em .6em; font-size:.9em; line-height:1.4em; background:#fff; }
#menu1 #comparison + p { margin-top:2em; }


/*link*/
#menu1 .column-link { margin:1em auto 4em; }


/*img*/
#menu1 img, #menu1 picture { display:block; }
#menu1 .quality { max-width:800px; margin:1em auto 0; }


@media screen and (min-width:801px) {
#menu1 > p { text-align:center; }
#menu1 #comparison tr > * { width:40%; }
#menu1 #comparison tr > th:first-of-type { width:8em; }
#menu1 #comparison td b { padding-bottom:.2em; text-align:center; border-bottom:1px solid; }
}

@media screen and (max-width:800px) {
#menu1 #comparison { padding-bottom:8px; overflow-x:auto; }
#menu1 #comparison table { width:calc(58em + 1px); }
#menu1 #comparison tr > * { width:26em; }
#menu1 #comparison tr > th:first-of-type { width:6em; }
#menu1 #comparison td img.icon { width:4em; }
}

@media screen and (max-width:600px) {
#menu1 .point { max-width:460px; }
#menu1 #comparison table { width:calc(46em + 1px); }
#menu1 #comparison tr > * { width:20em; }
}

@media screen and (max-width:500px) {
#menu1 #comparison table { width:calc(38em + 1px); }
#menu1 #comparison tr > * { width:16em; }
}

@media screen and (max-width:450px) {
#menu1 .point img { width:12vw; margin:0 1em; }
#menu1 .point dl { margin-left:.6em; font-size:3.4vw; }
#menu1 .point dt { font-size:4.2vw; }
}

@media screen and (max-width:370px) {
#menu1 .point dl { font-size:12px; }
#menu1 #comparison table { width:calc(44em + 1px); }
#menu1 #comparison tr > * { width:20em; }
#menu1 #comparison tr > th:first-of-type { width:4em; padding:.6em; }
}



/*==============================
	Menu2
==============================*/
/*icon*/
#menu2 .use-icon:after { position:relative; top:.4em; content:'\306A\3069'; margin-left:.2em; font-size:.9em; }
#menu2 .use-icon span { display:inline-block; margin-top:.4em; border:1px solid #043c78; border-radius:.2em; }
#menu2 .use-icon span + span { margin-left:.2em; }
#menu2 .use-icon span > a { display:block; margin-right:0; padding:.4em 1em; border:none; }
#menu2 .use-icon span > a:after { display:none; }


/*house*/
#menu2 .use-house { max-width:800px; margin:3em auto 0; }
#menu2 .use-house > p {
 position:relative;
 top:2em;
 width:calc(100% - 2em);
 margin:0 auto 2em;
 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;
 font-weight:600;
}
#menu2 .use-house > p b { padding:0 .4em; background:linear-gradient(transparent 80%, #dcaa83 80%); }
#menu2 .use-house > img { display:block; width:100%; height:auto; margin:auto; }
#menu2 .use-house + dl { margin-top:2em; }
#menu2 .use-house + dl dt { padding:1em; background:#f7f7f7; }
#menu2 .use-house + dl dt:nth-of-type(n+2) { margin-top:.1em; }
#menu2 .use-house + dl dd { padding:1em; }


/*modal*/
body.fixed .pdt-guide.spray [id^='menu'] .inline-box { max-width:none; }
.modal-wrapper .modal-content h3 { margin:0 auto 1em; padding-bottom:.4em; font-size:1.2em; border-bottom:1px solid; }
.modal-wrapper .modal-content h3:before { display:none; }
.modal-wrapper .modal-content .info { display:block; margin-top:.2em; font-size:.9em; line-height:1.4em; }
.modal-wrapper .modal-content dl { margin-top:1em; padding:1em; line-height:1.6em; background:#f7f7f7; }
.modal-wrapper .modal-content dt { font-weight:600; letter-spacing:1px; }
.modal-wrapper .modal-content dd + dt { margin-top:.6em; }
.modal-wrapper .modal-content dt + dd { margin-top:.2em; }
.modal-wrapper .modal-content dd a { display:inline-block; margin:0 .2em .4em; padding:.1em .4em; color:#043c78; border:1px solid; border-radius:.2em; }
.modal-wrapper .modal-content dd a:after { display:none; }


@media screen and (max-width:600px) {
#menu2 .use-house > p { top:0; margin-bottom:0; }
}

@media screen and (max-width:400px) {
.modal-wrapper .modal-content .info { font-size:12px; }
}



/*==============================
	Menu3
==============================*/
/*aroma-link*/
#menu3 #aroma-link { width:calc(100% - 2em); max-width:600px; margin:auto; }
#menu3 #aroma-link p { position:relative; padding:.8em 2.4em .8em .8em; background:#f7f7f7; cursor:pointer; }
#menu3 #aroma-link p:nth-of-type(n+2) { margin-top:.1em; }
#menu3 #aroma-link p:after {
	position:absolute;
	top:calc(50% - 2px);
	right:.8em;
	content:'';
	display:block;
	width:.6em;
	height:.6em;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	transform:translate(-25%,-50%) rotate(43deg);
	transition:.4s;
}
#menu3 #aroma-link p.open:after { transform:rotate(224deg); }

#menu3 #aroma-link ul { display:block; }
#menu3 #aroma-link p:not(.open) + ul { display:none; }
#menu3 #aroma-link li { position:relative; }
#menu3 #aroma-link li:nth-of-type(n+2) { border-top:1px solid #eee; }
#menu3 #aroma-link li a { display:block; padding:1em; }
#menu3 #aroma-link li a:after { position:absolute; top:50%; right:1em; }


/*aroma-chart*/
#menu3 .aroma-chart.inline img { display:block; max-width:900px; margin:auto; padding:0 1em; }
#menu3 .aroma-chart.category { display:flex; flex-wrap:wrap; justify-content:center; width:calc(100% - 2em); max-width:800px; margin:.6em auto 0; font-size:.9em; }
#menu3 .aroma-chart.category li { position:relative; margin:.6em .6em 0 0; padding-left:1em; }
#menu3 .aroma-chart.category li:last-of-type { margin-right:0; }
#menu3 .aroma-chart.category li:before { content:''; position:absolute; top:1px; left:0; display:block; width:.8em; height:.8em; border-radius:.1em; }
#menu3 .aroma-chart.category li:nth-of-type(1):before/*リラックス*/ { background:#f0ac42; }
#menu3 .aroma-chart.category li:nth-of-type(2):before/*リフレッシュ*/ { background:#f1dc52; }
#menu3 .aroma-chart.category li:nth-of-type(3):before/*マスク*/ { background:#cfde00; }
#menu3 .aroma-chart.category li:nth-of-type(4):before/*抗菌・抗ウイルス・除菌*/ { background:#72d3af; }
#menu3 .aroma-chart.category li:nth-of-type(5):before/*快眠*/ { background:#9696d3; }
#menu3 .aroma-chart.category li:nth-of-type(6):before/*眠気すっきり*/ { background:#5488c7; }
#menu3 .aroma-chart.category li:nth-of-type(7):before/*消臭*/ { background:#73cef0; }
#menu3 .aroma-chart.category li:nth-of-type(8):before/*虫除け*/ { background:#e29090; }
#menu3 .aroma-chart.category li:nth-of-type(9):before/*掃除*/ { background:#e79b5f; }
#menu3 .aroma-chart.category li:nth-of-type(10):before/*介護*/ { background:#63ae66; }
#menu3 .aroma-chart.category li:nth-of-type(11):before/*物忘れ対策*/ { background:#a683d2; }
#menu3 .aroma-chart.category li:nth-of-type(12):before/*エレガント*/ { background:#e4a3d6; }
#menu3 .aroma-chart.category li:nth-of-type(13):before/*プレミアムコレクション*/ { background:#b8a174; }


/*size-list*/
#menu3 #size-list { position:relative; width:calc(100% - 6em); max-width:none; margin:auto; }

#menu3 #size-list [class^='swiper-button-'] { width:3em; height:3em; background:rgba(0,0,0,.6); }
#menu3 #size-list .swiper-button-prev { left:-1em; }
#menu3 #size-list .swiper-button-next { right:-1em; }
#menu3 #size-list [class^='swiper-button-']:before { border-color:#fff; }

#menu3 #size-list li { padding:2em 2em 3em; border:1px solid; }
#menu3 #size-list img { display:block; width:100%; max-width:200px; margin:auto; }
#menu3 #size-list p { font-size:.92em; }
#menu3 #size-list img + p { margin-top:1em; }
#menu3 #size-list p b { display:block; margin-bottom:.2em; text-align:center; font-size:1.4em; font-weight:500; }
#menu3 #size-list p b small { margin-left:.1em; font-size:.8em; }


@media screen and (min-width:1821px) {
#menu3 #size-list img + p { text-align:center; }
}

@media screen and (min-width:1001px) {
#menu3 #size-list ul { align-items:stretch; }
#menu3 #size-list li { padding:1em 1em 3em; }
}

@media screen and (max-width:1000px) {
#menu3 #size-list { width:calc(100% - 4em); }
}

@media screen and (max-width:800px) {
#menu3 #size-list li { padding:1em 1em 2em; }
}

@media screen and (max-width:600px) {
#menu3 .aroma-chart.category { justify-content:flex-start; font-size:12px; }
}

@media screen and (max-width:500px) {
#menu3 .aroma-chart.inline { overflow-x:auto; }
#menu3 .aroma-chart img { width:600px; }
#menu3 #size-list { width:calc(100% - 3em); }
}



/*==============================
	Menu4
==============================*/
/*qa-list*/
#menu4 #qa-list { width:calc(100% - 2em); max-width:800px; margin:auto; line-height:1.6em; }
#menu4 #qa-list *:before { font-family:'Open Sans Condensed', sans-serif; letter-spacing:1px; }
#menu4 #qa-list a { color:var(--link); text-decoration:underline; }
#menu4 #qa-list a svg { width:.7em; margin-right:.4em; stroke:var(--link); }
#menu4 #qa-list dt { position:relative; padding:.8em 2.4em .8em 1.2em; text-indent:-1.2em; border-bottom:1px solid #777; cursor:pointer; }
#menu4 #qa-list dt:after {
	position:absolute;
	top:calc(50% - 2px);
	right:.8em;
	content:'';
	display:block;
	width:.6em;
	height:.6em;
	border-right:1px solid #777;
	border-bottom:1px solid #777;
	transform:translate(-25%,-50%) rotate(43deg);
	transition:.4s;
}
#menu4 #qa-list dt.open:after { transform:rotate(224deg); }
#menu4 #qa-list dt:before { position:relative; top:.04em; content:'Q'; width:2em; margin-right:.2em; font-size:1.6em; }
#menu4 #qa-list dd { padding:1em; background:#f7f7f7; }
#menu4 #qa-list dt:not(.open) + dd { display:none; }
#menu4 #qa-list dt.open + dd { margin-bottom:.4em; }
#menu4 #qa-list dd:before { content:'A.'; display:block; margin-bottom:.2em; font-size:1.4em; }


@media screen and (max-width:600px) {
#menu4 #qa-list dd:before { text-align:center; }
}



/*==============================
	Point
==============================*/
#spray-point { font-family:'Sawarabi Gothic', sans-serif; position:relative; max-width:1000px; margin:auto; padding:4em 0; font-size:1.2em; background:#eef3f5; }
#spray-point svg { width:100%; max-width:360px; fill:#fff; }
#spray-point .point { position:absolute; top:2em; right:4em; width:20em; color:#fff; }
#spray-point .point li { padding:1em; background:rgba(84,144,169,.6); }
#spray-point .point li:nth-of-type(n+2) { margin-top:1em; }


@media screen and (max-width:800px) {
}

@media screen and (max-width:600px) {
}

@media screen and (max-width:400px) {
}