@charset'utf-8';

.flexbox { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }



/*==============================
	common
==============================*/
.aromic.product { width:100%; max-width:1000px; margin:2em auto; }
.aromic.product:nth-of-type(n+2),
[id^='product-']:nth-of-type(n+2) { margin-top:4em; }
.aromic.product .flexbox { align-items:flex-start; font-size:1em; }

.aromic.product [id^='product-']:nth-child(n+2) { margin-top:4em; }


.aromic.product .t-right { text-align:right; }


.aromic.product dl { display:flex; flex-wrap:wrap; }
.aromic.product dl dt {	width:100%;	margin-bottom:.6em;	padding-bottom:.6em;	border-bottom:1px solid; }
.aromic.product dl dt.text {
	position:relative;
 top:-.2em;
	margin-bottom:.4em;
	padding:.6em;
	font-size:.8em;
	line-height:1.6em;
	background:#f3f3f3;
	border:none;
	border-radius:3em .5em 2em .5em/.4em 2em .5em 3em;
}
.aromic.product dl dt.text:before {	content:'';	position:absolute;	bottom:100%;	left:1em;	margin-bottom:-1px;	border:.6em solid transparent;	border-bottom:1.2em solid #f3f3f3;	z-index:2; }

.aromic.product dl dd a { line-height:1.2em; }
.aromic.product dl dd a:hover { position:relative; top:.1em; border-bottom:none; }


/*link*/
.aromic.product .link { margin-top:1em; }
.aromic.product dd.link { margin-top:.6em; }
.aromic.product .link a {	position:relative;	padding-right:1em;	line-height:1.6em;	color:var(--link); }
.aromic.product .link a:after { position:relative; right:-.2em; content:''; display:inline-block; }
.aromic.product .link a:not([target='_blank']):not(.modal):after {	width:.4em;	height:.4em;	border-top:1px solid;	border-right:1px solid;	transform:translate(-25%,-50%) rotate(45deg); }
.aromic.product .link a[target='_blank']:after { width:.8em; height:.8em; background:url(/svg/i-link-ext_navy.svg) 100% / contain no-repeat; }
.aromic.product .link a.modal { padding-right:.4em; }
.aromic.product .link a.modal:after { top:1px; width:1em; height:1em; background:url(/svg/i-link-modal_navy.svg) 100% / contain no-repeat; }

.aromic.product .column-link { width:calc(100% - 2em); margin-top:0; }



/*==============================
	products
==============================*/
#products { width:calc(100% - 2em); margin:auto; }
#products h2 { width:100%; font-weight:500; letter-spacing:1px; color:#35380A; }
#index-products #products h2 { width:calc(100% - 1em); margin:0 auto .4em; padding:.8em; border-top:2px solid; }
#index-products #products h2 b { display:none; }

#products .block img { display:block; }

#products h3 { position:relative; display:flex; justify-content:center; align-items:center; width:100%; aspect-ratio:2/1; text-align:center; }
#products h3 span { padding:1em 1.6em; background:#fff; z-index:1; }
#products h3 span b { display:block; font-size:1.4em; }
#products h3 img { position:absolute; top:0; left:0; display:block; }

#products ul { width:calc(100% - 1em); margin:auto; }
#products li { padding:.6em; border-bottom:1px solid #eee; }
footer #products .block:nth-of-type(3) li:nth-of-type(5)/*水素吸入器*/,
footer #products .block:nth-of-type(3) li:nth-of-type(6)/*ディスペンサー*/ { display:none; }
#products li a { position:relative; display:flex; align-items:center; padding-right:2em; }
#products li a:after {
 position:absolute;
 top:calc(50% - 1px);
 right:.4em;
 content:'';
 display:block;
 width:.5em;
 height:.5em;
 border-right:1px solid #aaa;
 border-bottom:1px solid #aaa;
 transform:translate(-25%,-50%) rotate(-45deg);
 transition:.4s;
}
#products li a:hover { text-decoration:underline; }
#products li span { display:inline-block; margin-left:.6em; padding:0 .2em; font-size:.8em; font-weight:500; background:#f5f5f5; }
#products ul:first-of-type li em:before { content:'\30FB'; }


/*button*/
#products button { display:block; width:100%; margin:.2em auto 0; text-align:right; }
header + main #products .block:nth-of-type(3) button { display:none; }
#products button a { display:block; text-decoration:underline; }


/*box*/
#products .box { margin:1em auto 0; }
#products .box:nth-of-type(n+2) { margin-top:.2em; }
#products .box a { display:flex; align-items:stretch; background:#f7f7f7; }
#products .box img { width:40%; }
#products .box p { display:flex; align-items:center; width:60%; padding:1em; }


@media screen and (min-width:1441px) {
#products { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; width:calc(100% - 4em); max-width:2000px; }
#products .block { width:calc(100%/3 - 1em); }
#products .box a:nth-of-type(n+2) { margin-top:.6em; }
}

@media screen and (max-width:1440px) {
#products { width:100%; max-width:600px; }
#products .block:nth-of-type(n+2) { margin-top:3em; }
#products .box a:nth-of-type(n+2) { margin-top:.6em; }
#products .box p { padding:1em .6em; font-size:.9em; }
}

@media screen and (max-width:425px) {
#products .block > *:not(h3):not(ul) { width:calc(100% - 1em); }
#products ul { width:calc(100% - .4em)!important; }
#products li span { font-size:13px; line-height:1.2em; }
#products ul:first-of-type li em { display:block; line-height:1em; }
#products ul:first-of-type li em:before { display:none; }
}



/*==============================
	タイトル　h2~
==============================*/
.aromic.product h2.title {	width:96%;	max-width:1000px;	margin:0 auto;	text-align:center;	font-size:1.4em; padding-top:1.4em }
.aromic.product h2.title:before {	position:relative;	top:.6em;	content:'';	display:block;	width:60%;	height:1px;	margin:0 auto;	background:#35380A; }
.aromic.product h2.title span {	position:relative;	padding:0 .6em; line-height:1em;	letter-spacing:2px;	background:#fff; }

.aromic.product h2 + .sub-title,
.aromic.product h2.sub-title {	text-align:center;	font-weight:500; color:#595757;	letter-spacing:2px; }
.aromic.product h2 + .sub-title { margin:.2em auto 2em; font-size:1.1em; }
.aromic.product h2.sub-title { margin-bottom:1em; }


.aromic.product h3.title {	margin-bottom:1em;	padding:.6em;	text-align:center;	font-size:1.1em;	letter-spacing:1px;	background:#f7f7f7;	border-bottom:1px dashed; }
.aromic.product h2.title + h3.title { margin-top:2em; }


@media screen and (max-width:768px) {
.aromic.product h2.title { font-size:1.2em; }
.aromic.product h2 + .sub-title { margin-bottom:1.4em; font-size:1em; }
.aromic.product h2.sub-title { margin-bottom:.4em; }
.aromic.product h2.title:before { width:calc(100% - 3em); }
}

@media screen and (max-width:425px) {
.aromic.product h2.title:before { width:calc(100% - 1em); }
.aromic.product h2.title span {	padding:0 .4em; }
}



/*==============================
	価格
==============================*/
.aromic.product .price { text-align:right; line-height:1em; color:rgb(var(--txt-red)); }
.aromic.product p:not([class]) + .price { margin-top:.4em; }
.aromic.product .price > * { display:inline-block; margin:.1em .2em; }
.aromic.product .price span { color:var(--txt)!important; }
.aromic.product .price em { padding:.3em; text-align:center; font-size:.9em; font-style:normal; border:1px solid rgb(var(--txt-red)); }
.aromic.product .price s { text-decoration:line-through; color:var(--txt); }
.aromic.product .price.sale s:after,
.aromic.product .price b:after { content:'\5186'; font-size:12px; }



/*==============================
	製品概要　Product About
==============================*/
#product-about { width:calc(100% - 1em); max-width:800px; margin:auto; }


#product-about > img { display:block; width:100%; height:auto; margin:auto; }
#product-about > img + p { margin-top:1em; font-size:.9em; line-height:1.6em; }


#product-about .detail { margin-top:2em; }
#product-about .detail h3 { margin:.4em auto 1em; padding:.2em .4em; line-height:1.4em; border-left:4px solid; border-bottom:1px dashed; }
#product-about .detail h3:nth-of-type(n+2) { margin-top:2em; }

#product-about .detail > p { font-size:.92em; line-height:1.8em; }
#product-about .detail > a { letter-spacing:.04em; font-feature-settings:'palt'; }

/*memo*/
#product-about dl.memo { width:100%; max-width:600px; margin:1em auto; font-size:.88em; }
#product-about dl.memo dt { position:relative; top:.4em; left:.4em; width:auto; margin:0; padding:.6em; border:1px solid; }
#product-about dl.memo dd { padding:1em; line-height:1.6em; background:#f5f5f5; }

/*point*/
#product-about .detail dl.point { display:block; width:100%; max-width:600px; margin:1em auto; padding:1.6em 1.2em 1.2em; font-size:.88em; background:#f5f5f5; }
#product-about .detail dl.point dt { position:relative; padding-left:2.2em; }
#product-about .detail dl.point dt:before {
 position:absolute;
 bottom:.5em;
 left:0;
 content:'';
 display:block;
 width:1.8em;
 height:1.8em;
 background:url(/svg/i-idea.svg) center / 100% no-repeat;
}
#product-about .detail dl.point dd { line-height:1.6em; }


@media screen and (max-width:767px) {
#product-about { margin-bottom:3em; }
#product-about .detail { font-size:.9em; }
}

@media screen and (max-width:600px) {
#product-about h2.title + p:not(.sub-title) { margin-top:1.2em; font-size:.96em; }
}

@media screen and (max-width:400px) {
#product-about { margin-bottom:2em; }
}



/*==============================
	アイコン
==============================*/
#product-about .icon span { display:inline-block; font-size:1.1em; }

/*効果・効能*/
#product-about .efficacy.icon { text-align:center; line-height:1.6em; }
#product-about .efficacy.icon span { position:relative; margin:0 .8em .4em 0; padding-left:1.4em; }
#product-about .efficacy.icon span:before,
#product-about .efficacy.icon span:after { position:absolute; content:''; display:inline-block; }
#product-about .efficacy.icon span:before { top:2px; left:0; width:1em; height:1em; background:#f3f3f3; border-radius:.1em; }
#product-about .efficacy.icon span:after { top:-1px; left:.46em; width:.4em; height:.8em; border-right:1px solid #777; border-bottom:1px solid #777; transform:rotate(50deg); }

/*使い方*/
#product-about .use.icon { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:1em auto 0; }
#product-about .use.icon span { margin:0 .4em .4em 0; padding:.2em 1em; text-align:center;	background:#f5f5f5; border-radius:.2em; }
#product-about .use.icon span:last-of-type { margin-right:.8em; }



/*==============================
	ピックアップ
==============================*/
.aromic.product .pickup-item {
 position:relative;
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 align-items:center;
 width:calc(100% - 2em);
 max-width:600px;
 margin:3em auto 5em;
 background:var(--aromic-bg);
}
.aromic.product .pickup-item:after {
 position:absolute;
 bottom:-1em;
 right:1em;
 content:'詳細はこちら';
 display:block;
 width:8em;
 margin:.4em auto 0;
 padding:.1em 0 .2em;
 text-align:center;
 color:#fff;
 background:var(--aromic);
 border:1px solid var(--aromic);
 border-radius:50vh;
}
.aromic.product .pickup-item:hover { background:none; }
.aromic.product .pickup-item:hover:after { color:var(--aromic); background:none; }
.aromic.product .pickup-item img { width:30%; }
.aromic.product .pickup-item p { width:70%; padding:1em; }


@media screen and (max-width:768px) {
.aromic.product .pickup-item { font-size:.9em; }
}

@media screen and (max-width:425px) {
.aromic.product .pickup-item { font-size:.86em; }
.aromic.product .pickup-item:after { bottom:-1.4em; font-size:13px; font-weight:600; border-width:2px; }
}



/*==============================
	ランキング
==============================*/
#product-ranking ol { counter-reset:number 0; display:flex; flex-wrap:wrap; width:calc(100% - 2em); margin:auto; }
#product-ranking li:not(.sp),
#product-ranking li:nth-of-type(n+7):not(.sp) { display:none; }
#product-ranking li:before {
 position:absolute;
 top:.6em;
 left:.6em;
 counter-increment:number 1;
 content:'No.' counter(number);
 display:block;
 width:3.6em;
 height:3.6em;
 text-align:center;
 line-height:3.6em;
 color:#fff;
 background:rgba(var(--aromic-rgb),.8);
 border-radius:50vh;
 z-index:1;
}
#product-ranking li a { display:block; height:100%; background:#fff; }
#product-ranking a > picture { display:block; box-shadow:0 0 .2em rgba(0,0,0,.1); }
#product-ranking a > picture img { display:block; width:100%; }
#product-ranking a > div { padding:.4em 0 1em; }


@media screen and (min-width:769px) {
#product-ranking li { position:relative; width:calc(100%/3 - .8em); }
#product-ranking li { margin:0 .4em; }
}

@media screen and (max-width:768px) {
#product-ranking ol { justify-content:space-between; max-width:600px; }
#product-ranking li { width:calc(100%/2 - .6em); }
}

@media screen and (max-width:425px) {
#product-ranking ol { width:calc(100% - .8em); font-size:.96em; }
#product-ranking li { width:calc(100%/2 - .2em); }
#product-ranking li:before { font-size:13px; font-weight:600; }
#product-ranking li p:not([class]) { font-size:.9em; }
}



/*==============================
	季節のおすすめ（スプレー）
==============================*/
#product-season ul { width:calc(100% - 2em); margin:auto; }


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

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

@media screen and (max-width:425px) {
#product-season li p:not([class]) { font-size:.9em; }
}



/*==============================
	製品一覧　Product List
==============================*/
/*campaign*/
#product-list .campaign {
 position:relative;
 left:-.6em;
 display:block;
 width:22em;
 margin:-1em auto 2em;
 padding:2em;
 font-size:1.02em;
 line-height:1.6em;
 letter-spacing:1px;
 color:rgb(var(--txt-red));
 background:url(/img/item/diff-oil.png) center right / 6em no-repeat;
}
#product-list .campaign + * { margin-top:1.2em; }


@media screen and (max-width:600px) {
#product-list .campaign { font-size:.96em; }
}

@media screen and (max-width:400px) {
#product-list .campaign + * { margin-top:.6em; }
}

@media screen and (max-width:370px) {
#product-list .campaign { width:20em; padding:2em 1em; background-size:5em; }
}



/*==============================
	ラインナップ
==============================*/
.lineup + * { margin-top:3em; }

.lineup ul { justify-content:flex-start; }
.lineup li { width:calc(88%/4); }
.lineup li:nth-of-type(4n+1) { margin-left:0; }
.lineup li a { display:block; }
.lineup li img { display:block; width:auto; max-height:180px; margin:0 auto 1em; }
.lineup li h3 { text-align:center; line-height:1.4em; letter-spacing:1px; }
.lineup li h3 span { display:block; font-size:.9em; letter-spacing:0; }

.lineup li p { margin-top:.6em; font-size:.9em; line-height:1.4em; }
.lineup li p.text { margin-top:.4em; padding-top:.6em; border-top:1px solid; }

.lineup li .button { margin:.8em auto 0; text-align:center; font-feature-settings:'palt'; line-height:1.2em; }
.lineup li .button span {	position:relative;	display:inline-block;	padding:.6em 2em .6em 1em;	background:#9c9c9c;	border-bottom:.24em solid #6e6d6d;	border-radius:.3em; color:#fff; }
.lineup li .button span:after {
	position:absolute;
	top:50%;
	right:1em;
	content:'';
	display:block;
	width:.4em;
	height:.4em;
	border-top:1px solid;
	border-right:1px solid;
	transform:translate(-25%,-50%) rotate(45deg);
}
.lineup li .button a:hover span { top:.1em; border-bottom:none; }


@media screen and (min-width:801px) {
.lineup li:nth-of-type(n+2) { margin-left:4%; }
.lineup li:nth-of-type(4n+1) { margin-left:0; }
}

@media screen and (min-width:768px) {
.lineup li:nth-of-type(n+5) { margin-top:4%; }
}

@media screen and (max-width:800px) {
.lineup li { width:calc(96%/2); }
.lineup li:nth-of-type(2n+2) { margin-left:4%; }
.lineup li:nth-of-type(n+3) { margin-top:4%; }
}

@media screen and (max-width:767px) {
.lineup + * { margin-top:2em; }
.lineup li .button { font-size:.9em; }
.lineup li p.price { text-align:center; }
}

@media screen and (max-width:400px) {
.lineup li h3 span { font-size:.8em; }
.lineup li img { max-height:140px; }
.lineup li p.text { font-size:.8em; }
.lineup li p.price { text-align:right; }
}