@charset'utf-8';

/*==============================
	aroma-link
==============================*/
#aroma-link { width:calc(100% - 2em); margin:auto; }
#aroma-link p { position:relative; margin-bottom:.3em; padding:.8em; text-align:center; font-size:1.1em; font-weight:500; background:#eee; cursor:pointer; }
#aroma-link p:nth-of-type(n+2) { margin-top:1em; }

#aroma-link ul { display:flex; flex-wrap:wrap; align-items:stretch; }
#aroma-link li { display:flex; align-items:stretch; }
#aroma-link li a { width:100%; padding:1em .5em; background:#f9f9f9; border-radius:.2em; }
#aroma-link li a:hover { background:none; }
#aroma-link li a:after { position:absolute; top:50%; right:1em; }
#aroma-link li a span { line-height:1.2em; }


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

@media screen and (max-width:768px) {
#aroma-link li { width:calc(100%/2 - .2em); }
#aroma-link li:nth-of-type(2n+2) { margin-left:.4em; }
#aroma-link li:nth-of-type(n+3) { margin-top:.4em; }
}

@media screen and (max-width:425px) {
#aroma-link { font-size:.9em; }
#aroma-link li a { padding:.6em .5em; }
}



/*==============================
	リスト
==============================*/
[class$='-list'] { margin-top:4em; }
p + [class$='-list'] { margin-top:2em; }


/*item-list*/
.item-list { display:flex; flex-wrap:wrap; line-height:1.6em; }
.item-list li {
 display:flex;
 flex-wrap:wrap;
 justify-content:flex-end;
 align-items:flex-start;
 width:100%;
 padding:1em 1em 1em 8em;
 background-position:center left -1em;
 background-size:10em;
 background-repeat:no-repeat;
 background-color:#f3f3f3;
}
.item-list li > *:not(a) { width:100%; }
.item-list li.corron { background-image:url(/img/item/corron.webp); background-size:8em; background-position:center left; }
.item-list li.hang { background-image:url(/img/item/hang.webp); }
.item-list li.taroma-mini { background-image:url(/img/item/taroma-mini.webp); }
.item-list li.mini { background-image:url(/img/item/mini.webp); }
.item-list li.reed { background-image:url(/img/item/reed-diffuser.webp); }
.item-list li.fit { background-image:url(/img/item/fit.webp); }
.item-list li.flow { background-image:url(/img/item/flow.webp); }
.item-list li.air { background-image:url(/img/item/air.webp); }
.item-list li.tscent { background-image:url(/img/item/tscent.webp); }
.item-list li h3 img { width:10em; }
.item-list li p:not([class]) { font-size:.92em; line-height:1.6em; }
.item-list li p.point { margin:.6em auto; }
.item-list li p.point span { display:inline-block; padding:.2em .4em; background:rgba(255,255,255,.4); border:1px solid; }
.item-list li p.point span:nth-of-type(n+2) { margin-left:.4em; }
.item-list li p.price { margin:.3em auto; font-size:1.1em; }
.item-list li a {
 display:block;
 width:calc(100%/2 - .4em);
 margin-top:1em;
 padding:.8em .2em;
 text-align:center;
 background:#fff;
 border-radius:6em;
 box-shadow:0 2px 2px 0 rgba(0,0,0,.1);
 transition:all .5s;
}
.item-list li a:hover { box-shadow:none; }
.item-list li a:nth-of-type(2n+2) { margin-left:.4em; }


/*use-list*/
.use-list { width:calc(100% - 1em); margin:auto; }
section + .use-list { margin-top:2em; }
.use-list dl { width:calc(98%/2); }
.use-list dl:nth-of-type(n+3) { margin-top:2em; }
.use-list dl dd { display:flex; align-items:stretch; width:calc(99%/2); }
.use-list dl dd:nth-of-type(2n+1) { margin-right:1%; }
.use-list dl dd:nth-of-type(n+3) { margin-top:1%; }
.use-list dl dd a { display:block; width:100%; padding:1em .6em; font-size:.9em; background:#f7f7f7; border-bottom:.24em solid #eee; border-radius:.3em; }


/*size-list*/
.size-list { width:calc(100% - 1em); margin:auto; }
.size-list ul { display:flex; flex-wrap:wrap; align-items:flex-start; }
.size-list li a { text-align:center; }
.size-list li img { display:block; width:90%; max-width:120px; height:auto; margin:0 auto 1em; }


@media screen and (min-width:1001px) {
.item-list li { width:calc(100%/2 - .3em); padding:1.6em 1em 1.6em 8em; }
.item-list li:nth-of-type(2n+2) { margin-left:.6em; }
.item-list li:nth-of-type(n+3) { margin-top:.6em; }
.item-list li h3 span { display:block; margin-top:.2em; }
}

@media screen and (max-width:1000px) {
.item-list li { max-width:600px; margin-left:auto; margin-right:auto; padding-left:10em; background-size:12em; }
.item-list li:nth-of-type(n+2) { margin-top:1.6em; }
.item-list li h3 span { position:relative; top:-.16em; display:inline-block; margin-left:.4em; }
}

@media screen and (min-width:401px) and (max-width:1000px) {
.item-list li.corron { background-position:center left 1em; }
}

@media screen and (min-width:768px) {
.size-list li { width:calc(100%/6); }
.size-list li:nth-of-type(n+7) { margin-top:1em; }
}

@media screen and (max-width:767px) {
[class$='-list'] + [class$='-list'] { margin-top:3em; }
.size-list li { width:calc(100%/5); }
.size-list li:nth-of-type(n+6) { margin-top:1em; }
.size-list li a span { display:block; margin-bottom:.2em; font-size:.8em; }
}

@media screen and (max-width:600px) {
.item-list li { position:relative; padding:1em .2em 1em 8em; background-position:bottom 5em left -1.6em; background-size:10em; background-color:#fff; }
.item-list li.corron { background-size:6em; }
.item-list li h3 img { width:8.2em; }
.item-list li h3 span { font-size:.9em; }
.item-list li a { padding:.6em .2em; background:#f3f3f3; }
.item-list li a:nth-of-type(1) { left:0; }
.item-list li a:nth-of-type(2) { right:0; }
.size-list li { width:calc(100%/4); }
.size-list li:nth-of-type(n+5) { margin-top:1em; }
}

@media screen and (min-width:401px) and (max-width:600px) {
.use-list dl dd { width:100%; }
.use-list dl dd:nth-of-type(n+2) { margin-top:2%; }
}

@media screen and (min-width:401px) {
.use-list dl:nth-of-type(2n+2) { margin-left:0; }
}

@media screen and (max-width:500px) {
.item-list li a { width:100%; margin:.4em 0 0!important; padding:.6em 0; border-radius:.2em; box-shadow:none; }
}

@media screen and (max-width:400px) {
.item-list { font-size:.9em; }
.item-list li { padding-left:6.2em; background-size:9em; }
.item-list li h3 img { width:8.8em; }
.item-list li h3 span { margin-left:.6em; font-size:12px; }
.use-list dl { width:100%; }
.use-list dl:nth-of-type(n+2) { margin-top:1em; }
.size-list li img { width:100%; max-width:none; margin-bottom:.4em; }
}

@media screen and (max-width:370px) {
.item-list li h3 span { display:block; margin-left:0; }
.item-list li p.point { font-size:4vw; }
}



/*==============================
	製品リンク　Product Link
==============================*/
#product-link .swiper-container { width:100%; padding-bottom:0!important; }


/*Pagination*/
#product-link .swiper-pagination { position:absolute; top:0; height:3.3em; font-size:.96em; z-index:10; }
#product-link .swiper-pagination-bullet {
	width:auto;
	height:auto;
	margin:0 .1em;
	padding:1em 2em;
 line-height:1em;
	background:#ddd;
	border-radius:0;
	border-top-left-radius:.4em;
	border-top-right-radius:.4em;
 opacity:1;
}
#product-link .swiper-pagination-bullet:before { font-size:1.2em; }
.diffuser #product-link .swiper-pagination-bullet:after { margin-left:.1em; }

#product-link .swiper-pagination-bullet-active { background:#f5f5f5; border:1px solid #ddd; border-bottom:none; }


/*ul*/
#product-link li { padding:2em 4em; background:#f5f5f5; }


@media screen and (min-width:801px) {
#product-link .swiper-pagination { display:none; }
#product-link li { padding:0; background:#fff; }
}

@media screen and (max-width:800px) {
#product-link .swiper-container { padding-top:3em; }
#product-link li.swiper-slide-active { border-top:1px solid #ddd; }
}

@media screen and (max-width:600px) {
#product-link .swiper-pagination-bullet { padding:1.2em 2em; font-size:.9em; }
#product-link li { padding:2em; }
}

@media screen and (max-width:400px) {
#product-link li { padding:1em; }
}

@media screen and (max-width:370px) {
#product-link .swiper-pagination-bullet { padding:1.2em 1em; }
}



/*==============================
	Link - Diffuser
==============================*/
/*Pagination*/
.diffuser #product-link li:before { display:block; text-align:center; margin-bottom:1em; padding:.8em .2em; font-size:1.2em; letter-spacing:1px; background:#f3f3f3; border-bottom:1px dashed; }
.diffuser #product-link .swiper-pagination { top:4.2em; }
.diffuser #product-link .swiper-pagination-bullet:nth-of-type(1):before { content:'\500B\4EBA\5411\3051'; }
.diffuser #product-link .swiper-pagination-bullet:nth-of-type(2):before { content:'\696D\52D9\7528\5411\3051'; }
.diffuser #product-link .swiper-pagination-bullet:after { content:'\30D7\30E9\30F3'; }


/*Comment*/
.diffuser #product-link .comment {
	position:absolute;
 top:-7em;
 right:0;
 left:0;
 width:100%;
 max-width:20em;
 margin:auto;
	padding:.8em .2em;
	text-align:center;
	line-height:1.4em;
 color:#fff;
 background:#555;
 border-radius:6em;
}
.diffuser #product-link .comment:after {	position:absolute;	top:calc(100% - .3em);	right:4em;	content:'';	border:.4em solid transparent;	border-top:1.2em solid #555;	transform:rotate(30deg); }


/*共通*/
.diffuser #product-link li img { display:block; margin:auto; }
.diffuser #product-link li p { line-height:1.6em; }
.diffuser #product-link li p.info { text-align:right; font-size:.9em; }
.diffuser #product-link li p b { margin:0 .1em; font-size:1.4em; font-weight:400; }


/*個人向け*/
.diffuser #product-link li.to-c a { display:block; }
.diffuser #product-link li.to-c a:nth-of-type(n+2) { margin-top:1em; }
.diffuser #product-link li.to-c img { max-width:600px; }


/*業務用向け*/
.diffuser #product-link li.to-b .comment:after { right:auto; left:4em; transform:rotate(-30deg); }
.diffuser #product-link li.to-b > img { max-width:400px; }
.diffuser #product-link li.to-b > h3 { margin:1.2em auto 1em; text-align:center; font-size:1.2em; font-weight:500; }
.diffuser #product-link li.to-b > h3 > * { display:block; }
.diffuser #product-link li.to-b > h3 span { margin-bottom:.8em; font-size:.8em; }
.diffuser #product-link li.to-b > h3 img { width:calc(100% - 1em); max-width:12em; margin:auto; }
.diffuser #product-link li.to-b > p:not(.comment) { margin-top:1em; font-size:.92em; }
.diffuser #product-link li.to-b > div { margin-top:1.2em; text-align:center; }
.diffuser #product-link li.to-b > div:before { content:'\304A\3059\3059\3081'; display:block; width:6em; margin:0 auto .4em; padding:.4em 0; text-align:center; font-size:.9em; border:1px solid; }
.diffuser #product-link li.to-b > div > p { font-size:.9em; }
.diffuser #product-link li.to-b > div > a {
 display:block;
 max-width:20em;
 margin:.8em auto;
 padding:1.2em .2em;
 font-size:1.06em;
 color:#fff;
 background:var(--link);
 border:1px solid;
 border-radius:.4em;
}
.diffuser #product-link li.to-b > div > a:hover { color:var(--link); background:none; border-color:var(--link); }


@media screen and (min-width:801px) {
.diffuser #product-link .comment { display:none; }
.diffuser #product-link li.to-c:before { content:'\500B\4EBA\5411\3051\30D7\30E9\30F3'; }
.diffuser #product-link li.to-b:before { content:'\696D\52D9\7528\5411\3051\30D7\30E9\30F3'; }
.diffuser #product-link li.to-b > div { padding:1em; background:#f5f5f5; }
}

@media screen and (max-width:800px) {
.diffuser #product-link .swiper-container { padding-top:7em; }
}

@media screen and (max-width:400px) {
.diffuser #product-link .swiper-container { padding-top:7.5em; }
.diffuser #product-link .swiper-pagination { top:4.7em; }
.diffuser #product-link li,
.diffuser #product-link .comment { font-size:.9em; }
.diffuser #product-link .comment { top:-9.4em; width:13em; border-radius:.6em; }
.diffuser #product-link li.to-c .comment { right:.4em; left:auto; padding:.8em 1.8em; }
.diffuser #product-link li.to-b .comment { right:auto; left:.4em; padding:.8em 2.6em; }
.diffuser #product-link li.to-b > h3 span { font-size:12px; }
}



/*==============================
	商品リンク
==============================*/
.aromic.product a.trial-link {
 position:relative;
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 width:calc(100% - 1em);
 max-width:600px;
 margin:6em auto 0;
 padding:1.6em;
 background:#f5f5f5;
}

.aromic.product a.trial-link p { line-height:1.4em; }
.aromic.product a.trial-link p.ttl { position:absolute; top:-1.2em; width:100%; margin-bottom:.8em; text-align:center; }
.aromic.product a.trial-link p.ttl span { padding:.6em 1em; text-align:center; background:rgba(255,255,255,.6); border:1px solid; }

.aromic.product a.trial-link img { display:block; width:200px; margin:auto; border:1px solid #f5f5f5; }
.aromic.product a.trial-link img + p { width:calc(100% - 200px - 1em); margin-left:1em; }
.aromic.product a.trial-link img + p span { display:block; }
.aromic.product a.trial-link img + p span:nth-of-type(n+2) { margin-top:.2em; }

.aromic.product a.trial-link p:last-of-type { position:absolute; bottom:1.6em; right:1.6em; padding:.6em; text-align:right; background:#fff; border-radius:.3em; }
.aromic.product a.trial-link p:last-of-type span { padding-right:.4em; }
.aromic.product a.trial-link p:last-of-type span:last-of-type:after {
	position:relative;
	top:.04em;
	right:-.3em;
	content:'';
	display:inline-block;
	width:.4em;
	height:.4em;
	border-top:1px solid;
	border-right:1px solid;
	transform:translate(-25%,-50%) rotate(45deg);
}


@media screen and (max-width:600px) {
.aromic.product a.trial-link { padding:1em; }
.aromic.product a.trial-link p.ttl span { padding:.4em 1em; }
.aromic.product a.trial-link img { width:40%; }
.aromic.product a.trial-link img + p { width:calc(100% - 40% - .6em); margin-left:.6em; }
.aromic.product a.trial-link img + p span,
.aromic.product a.trial-link p:last-of-type { font-size:.9em; }
.aromic.product a.trial-link p:last-of-type { bottom:1em; right:1em; }
}

@media screen and (max-width:400px) {
.aromic.product a.trial-link p:last-of-type { position:relative; bottom:0; right:0; width:100%; margin:.8em auto 0; text-align:center; }
}

@media screen and (max-width:370px) {
.aromic.product a.trial-link { display:block; }
.aromic.product a.trial-link p.ttl { width:auto; }
.aromic.product a.trial-link img { width:calc(100% - 4em); }
.aromic.product a.trial-link img + p { width:100%; margin:.4em auto; }
}


/*==============================
	ラインナップ(スプレー) 
==============================*/
#lineup.sp>ul{
  width: calc(100% - 0.4em);
      max-width: 66em;
  flex-wrap: wrap;
    align-items: stretch;
    margin: auto;
}
#lineup.sp>ul>li{list-style: none;
      margin: 0 1em 2em;
    padding: 1.6em 1em;
      width: calc(100%/3 - 2em);
    max-width: 20em;
  position: relative;
    box-shadow: 0 0 0.4em rgba(0, 0, 0, .12);
    border-radius: 0.6em;
}

#lineup.sp .item-box h3{
  text-align: center;
  padding-bottom: 1em;
  font-size: 1.2em;
  font-weight: 500;
}
#lineup.sp .item-box h3 br{
  display: none}
#lineup.sp .item-box a.button{
  margin: 2em 3em 0;
  padding: .2em 0;
  background-color: #D02929;
  border-radius: .4em;
  color:#fff;
  display: block;
  text-align: center;
  font-size: 1.2em;
  font-weight: 500;
}
@media screen and (max-width: 768px){
  #contents #main-column #lineup.sp>ul>li {
    padding: 1.6em 1em;
  }
    #lineup.sp .item-box h3 br{
  display: block}
  #lineup.sp .item-box a.button{
    line-height:1.2em;
    margin: 1em 1.5em 0;
  }
}
@media screen and (max-width: 500px){
  #contents #main-column #lineup.sp>ul>li>h3 {
    padding-bottom: .6em;
    font-size: 1em;
    line-height:1em;
  }

  #contents #main-column #lineup.sp>ul>li {
    padding: .4em .6em;
  }
  #lineup.sp .item-box a.button{
    font-size: .8em;
    margin: .8em 1.0em ;
  }
}
@media screen and (max-width: 350px){
  #contents #main-column #lineup.sp>ul>li>h3 {
    font-size: 1em;
  }

  #contents #main-column #lineup.sp>ul>li {
    padding: .4em .6em;
  }
  #lineup.sp .item-box a.button{
    margin: .4em .6em;
    
  }
}