@charset "utf-8";

/*==============================
	Common
==============================*/
.Content { padding:0; }
.Content__entry { color:#35380A; }
.Content *:focus { outline:none; }

.Content__entry [id^='Entry__section--'] a { display:block; padding:.4em; line-height:1.6em; }
.Content__entry [id^='Entry__section--'] a:nth-of-type(n+2) { border-top:1px dashed #777; }
.Content__entry [id^='Entry__section--'] a.none { color:#35380A; pointer-events:none; cursor:auto; }

.Content__entry .saboxplugin-wrap/*投稿者*/,
.Content__entry .Content__paging/*前/次のページ*/ { display:none; }

/*更新日・SNS*/
.Entry__head__inner { width:100%; text-align:right; }
.sns_link { display:none; }

/*余白*/
.Entry__head,
.Section__catch,
.Entry__contents,
#Entry__section--1,
#Entry__section--2,
#Entry__section--4 { width:calc(100% - 2em); margin-right:auto; margin-left:auto; }

/*大カテゴリ*/
.Content__section { margin-top:4em; }
.Content__section .Section__text { margin-top:0; }

/*小カテゴリ*/
.Content__section .Section__block { margin-top:0; }

/*タイトル*/
.Content__entry h1.Entry__ttl,
.Content__section h2.Section__ttl { font-family:'Sawarabi Mincho', sans-serif; font-weight:200; }
.Content__entry h1.Entry__ttl { text-align:center; letter-spacing:.1em; }
.Content__section h2.Section__ttl { display:block; margin-bottom:1em; padding:0; text-align:center; font-size:1.2em; line-height:1.4em; border:none; }
.Content__section h2.Section__ttl span { display:inline-block; padding:.6em 1.6em 0; border-top:1px solid; }
.Content__section h2.Section__ttl b { margin-right:.1em; font-size:1.2em; }
.Content__section h3.Block__ttl { margin-top:0; }

/*メイン画像*/
.Content__entry .Entry__mv { display:none; }

/*リード文*/
.Content__entry p.Section__catch { margin-top:1.6em; }
.Content__entry p.Section__catch > * { display:block; }
.Content__entry p.Section__catch img { width:20%; max-width:6em; height:auto; margin:0 auto 1.2em; }
.Content__entry p.Section__catch span { line-height:1.8em; }


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



/*==============================
	精油名で検索
==============================*/
/*h3*/
#Entry__section--1.Content__section h3.Block__ttl { width:0; height:0; margin:0; padding:0; visibility:hidden; }

/*form*/
#Entry__section--1 .Section__block form { position:relative; width:calc(100% - 1.2em); max-width:20em; height:48px; margin:auto; }
#Entry__section--1 .Section__block form input { font-size:16px; line-height:1.4em; }
#Entry__section--1 .Section__block form input[type='text'] { width:100%; height:100%; padding:8px 48px 8px 8px; border:1px solid; border-radius:0; }
#Entry__section--1 .Section__block form button { position:absolute; top:0; right:0; padding:10px 16px 10px 8px; background:none; }
#Entry__section--1 .Section__block form button svg { width:28px; height:28px; fill:#35380A; }



/*==============================
	精油名から選ぶ
==============================*/
/*h3*/
#Entry__section--2.Content__section h3.Block__ttl { position:relative; padding:.4em 2em .4em .6em; font-size:.9em; font-weight:500; background:#f5f5f5; }
#Entry__section--2.Content__section h3.Block__ttl:nth-of-type(n+2) { margin-top:.6em; }
#Entry__section--2.Content__section h3.Block__ttl:after {
	position:absolute;
	top:calc(50% - .3em);
	right:.8em;
	content:'';
	display:block;
	width:.6em;
	height:.6em;
	border-right:1px solid;
	border-bottom:1px solid;
	transform:translate(-25%,-50%) rotate(43deg);
	transition:.4s;
}
#Entry__section--2.Content__section h3.Block__ttl.open:after { transform:rotate(224deg); }
#Entry__section--2.Content__section h3.Block__ttl span { margin-right:.2em; font-size:1.16em; }

/*accordion*/
#Entry__section--2 .Section__block .Block__text { margin-top:.2em; }


@media screen and (max-width:500px) {
#Entry__section--2.Content__section h3.Block__ttl:nth-of-type(n+2) { margin-top:.2em; }
#Entry__section--2.Content__section h3.Block__ttl:not(.open) + .Block__text { display:none; }
}



/*==============================
	香りの系統から選ぶ
==============================*/
/*h3*/
#Entry__section--3.Content__section h3.Block__ttl { width:0; height:0; margin:0; padding:0; visibility:hidden; }

/*slide*/
#Entry__section--3 .list-clm { padding:3.7em 0 0!important; }
#Entry__section--3 .list-clm li { padding:2em; background:#f5f5f5; }
#Entry__section--3 .list-clm li h3 { text-align:center; font-weight:600; letter-spacing:.1em; }
#Entry__section--3 .list-clm .swiper-pagination { position:absolute; top:0; height:3.7em; }
#Entry__section--3 .list-clm .swiper-pagination-bullet {
	width:auto;
 min-width:6em;
	height:auto;
	margin:0 .1em;
	padding:.8em 0;
 font-size:.9em;
 font-weight:600;
	background:#1e9cb3;
	border-radius:0;
	border-top-left-radius:.6em;
	border-top-right-radius:.6em;
}
#Entry__section--3 .list-clm .swiper-pagination-bullet:not([class$='active']) { opacity:.6; }

#Entry__section--3 .list-clm .swiper-pagination-bullet:before { content:''; display:block; width:2.6em; height:2.6em; margin:auto; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(1):before { background:url(https://aromic.jp/img/blog/dictionary/citrus.svg) center / 100% no-repeat; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(2):before { background:url(https://aromic.jp/img/blog/dictionary/herb.svg) center / 100% no-repeat; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(3):before { background:url(https://aromic.jp/img/blog/dictionary/floral.png) center / 100% no-repeat; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(4):before { background:url(https://aromic.jp/img/blog/dictionary/tree.png) center / 100% no-repeat; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(5):before { background:url(https://aromic.jp/img/blog/dictionary/oriental.png) center / 100% no-repeat; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(6):before { background:url(https://aromic.jp/img/blog/dictionary/woody.svg) center / 100% no-repeat; }
/*#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(1):after { content:'\67D1\6A58'; color:#d69860; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(2):after { content:'\30CF\30FC\30D6'; color:#759641; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(3):after { content:'\30D5\30ED\30FC\30E9\30EB'; color:#b76a95; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(4):after { content:'\6A39\6728'; color:#047823; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(5):after { content:'\30AA\30EA\30A8\30F3\30BF\30EB'; color:#a872da; }
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(6):after { content:'\6A39\8102'; color:#8c6e56; }*/
#Entry__section--3 .list-clm li.aroma01 h3 { color:#d69860; }
#Entry__section--3 .list-clm li.aroma02 h3 { color:#759641; }
#Entry__section--3 .list-clm li.aroma03 h3 { color:#b76a95; }
#Entry__section--3 .list-clm li.aroma04 h3 { color:#047823; }
#Entry__section--3 .list-clm li.aroma05 h3 { color:#a872da; }
#Entry__section--3 .list-clm li.aroma06 h3 { color:#8c6e56; }
#Entry__section--3 .list-clm li.aroma01,
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(1) { background:#f9f2eb; }
#Entry__section--3 .list-clm li.aroma02,
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(2) { background:#f3f6ed; }
#Entry__section--3 .list-clm li.aroma03,
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(3) { background:#f6edf2; }
#Entry__section--3 .list-clm li.aroma04,
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(4) { background:#f4f7f5; }
#Entry__section--3 .list-clm li.aroma05,
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(5) { background:#f8f4fc; }
#Entry__section--3 .list-clm li.aroma06,
#Entry__section--3 .list-clm .swiper-pagination-bullet:nth-of-type(6) { background:#eeeae7; }


@media screen and (max-width:600px) {
#Entry__section--3 .list-clm .swiper-pagination { padding:0 .4em; }
#Entry__section--3 .list-clm .swiper-pagination-bullet { width:calc(100%/6 - .2em); min-width:auto; }
}

@media screen and (max-width:500px) {
#Entry__section--3 .list-clm li { padding:1.2em 2em; }
}

@media screen and (max-width:400px) {
#Entry__section--3 .list-clm { padding-top:3.4em!important; }
#Entry__section--3 .list-clm .swiper-pagination { height:3.4em; }
#Entry__section--3 .list-clm .swiper-pagination { font-size:.9em; }
}



/*==============================
	商品から選ぶ
==============================*/
/*h3*/
#Entry__section--4.Content__section h3.Block__ttl { width:0; height:0; margin:0; padding:0; visibility:hidden; }

#Entry__section--4 .list-pdt .swiper-slide { padding:2em; background:#f5f5f5; border-radius:1em; }
#Entry__section--4 .list-pdt .swiper-pagination { bottom:0; }
#Entry__section--4 .list-pdt .swiper-pagination-bullet { width:2.2em; height:2.2em; padding:.6em; line-height:1em; background:none; border:1px solid; border-radius:50%; }

/*a*/
#Entry__section--4 .list-pdt a { text-align:center; font-size:.9em; background:#fff; border:none; border-radius:6em; }

/*h3*/
#Entry__section--4 .list-pdt h4 { text-align:center; }
#Entry__section--4 .list-pdt h4 > * { display:block; }
#Entry__section--4 .list-pdt h4 span { font-weight:500; }
#Entry__section--4 .list-pdt h4 b { font-family:'Montserrat', sans-serif; margin:.2em auto .3em; font-size:1.6em; }

/*img*/
#Entry__section--4 .list-pdt img { display:block; max-width:200px; margin:.6em auto 0; }
#Entry__section--4 .list-pdt .swiper-slide > a { display:block; width:6em; margin:1em auto 0; padding:.4em .2em; }

/*ul*/
#Entry__section--4 .list-pdt dl { margin-top:1em; }
#Entry__section--4 .list-pdt dl.none > * { display:none; }
#Entry__section--4 .list-pdt dl.none:before { content:'準備中'; display:block; padding:1em 0; text-align:center; }
#Entry__section--4 .list-pdt dt { position:relative; margin-bottom:.6em; padding:0 2em .4em 0; line-height:1.4em; border-bottom:1px solid #aaa; }
#Entry__section--4 .list-pdt dt:nth-of-type(n+2) { margin-top:.6em; }
#Entry__section--4 .list-pdt dt:after {
	position:absolute;
	top:.5em;
	right:.4em;
	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;
}
#Entry__section--4 .list-pdt dt.open:after { transform:rotate(224deg); }
#Entry__section--4 .list-pdt dd a { display:inline-block; margin:0 .1em .5em; padding:.4em 1em; }


@media screen and (max-width:667px) {
#Entry__section--4 .list-pdt .swiper-slide { padding:1em; }
#Entry__section--4 .list-pdt dt:not(.open) + dd { display:none; }
}