@charset'UTF-8';

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



/*==============================
	基本　Common
==============================*/
.aromic.guide { width:calc(100% - 2em); max-width:1000px; margin:auto; }
.aromic.guide.w-max { width:100%; max-width:none; }


.aromic.guide p { line-height:1.6em; }
.aromic.guide p:nth-of-type(n+2) { margin-top:.6em; }
.aromic.guide p.detail {	margin:1em auto 2em;	padding:1.4em;	font-size:.98em;	background:#f3f3f3; }


.aromic.guide .attention { color:#c44040; }
.aromic.guide .text-left { text-align:left; }
.aromic.guide .dot { padding:.6em; border:dotted 1px #999; }
.aromic.guide .line { padding:0 .2em; background:rgba(38,175,191,.1); }
.aromic.guide .s-text { font-size:.98em; color:#398490; }


/*Table*/
.aromic.guide table {  margin:1em 0; line-height:1.6em; }
.aromic.guide table th,
.aromic.guide table td { text-align:left; padding:.6em; border:1px solid #ccc; }
.aromic.guide table th { min-width:8em; font-weight:normal; background:#eee; }
.aromic.guide table th.t-title { background:#f5f5f5; }
.aromic.guide table th span { padding-left:.2em; font-size:.8em; }
.aromic.guide table[id$='-list'] td { vertical-align:middle; }
.aromic.guide table#pay-list td:last-of-type { text-align:center; }
.aromic.guide picture,
.aromic.guide img { display:block; width:100%; margin-top:.2em; }


@media screen and (max-width:600px) {
.aromic.guide { font-size:.9em; }
.aromic.guide table#pay-list th:first-of-type { width:12em; }
/*.aromic.guide table#pay-list td img { display:none; }*/
}

@media screen and (max-width:420px) {
.aromic.guide table { font-size:.96em; }
}

@media screen and (max-width:400px) {
.aromic.guide { width:calc(100% - 1em); }
.aromic.guide table th,
.aromic.guide table td { padding:.4em; }
.aromic.guide table td { padding:.6em .4em; }
}

@media screen and (max-width:350px) {
.aromic.guide table th { font-size:.92em; }
.aromic.guide table th span { display:block; padding:0; }
}



/*==============================
	商品リンク
==============================*/
.aromic.guide .item-link { width:calc(100% - 2em); max-width:400px; margin:0 auto 2em; }
.aromic.guide .item-link a { display:flex; justify-content:center; align-items:center; background:#f7f7f7; }
.aromic.guide .item-link a:nth-of-type(n+2) { margin-top:1em; }
.aromic.guide .item-link a:hover { background:none; }
.aromic.guide .item-link a:after { right:1em!important; }
.aromic.guide .item-link img { width:120px; }
.aromic.guide .item-link p { width:calc(100% - 120px - 1em);margin-left:1em; }


@media screen and (max-width:400px) {
.aromic.guide .item-link img { width:100px; }
.aromic.guide .item-link p { width:calc(100% - 100px - .6em);margin-left:.6em; }
}



/*==============================
	メニュー　Menu
==============================*/
.aromic.guide .menu { align-items:flex-start; }
.aromic.guide .menu a:after { display:none; }
.aromic.guide .menu dl { width:100%; margin-bottom:2em; }
.aromic.guide .menu:not(.flexbox) dl { width:100%; margin:3em auto; }
.aromic.guide .menu dl a { display:block; line-height:1.4em; }
.aromic.guide .menu dt a {	padding:.6em;	font-size:1.06em;	font-weight:700;	line-height:1.4em;	letter-spacing:1px;	color:#fff;	background:#555; }
.aromic.guide .menu dd a {	display:block;	padding:.8em .2em;	border-bottom:1px dotted; }
.aromic.guide .menu dd a:hover { background:rgba(0,0,0,.05); }


@media screen and (min-width:601px) {
.aromic.guide .menu.flexbox dl { width:calc(98%/2); }
.aromic.guide .menu.flexbox dl:nth-of-type(2n+1) { margin-right:2%; }
}

@media screen and (max-width:600px) {
.aromic.guide .menu dl { margin:0 auto 2em!important; }
}



/*==============================
	タイトル　h2~
==============================*/
/*h2*/
.aromic.guide h2 {	margin:2em auto 1em;	padding:.6em;	font-size:1.06em;	line-height:1.4em;	color:#fff;	background:#555; }

/*h3*/
.aromic.guide h3 {	margin:2em auto .8em;	padding:.6em;	font-weight:500;	line-height:1.4em;	background:#f5f5f5;	border-bottom:1px dotted; }
.aromic.guide h2 + h3 { margin-top:0; }

/*h4*/
.aromic.guide h4 {	margin:1em auto .6em;	padding:.3em .4em;	font-size:1.06em;	font-weight:500;	line-height:1.4em;	background:#fafafa;	border-left:.2em solid #555; }
.aromic.guide td > h4 { margin-top:.2em; }
.aromic.guide td > h4:nth-of-type(n+2) { margin-top:1em; }



/*==============================
	リンク　a
==============================*/
.aromic.guide p a,.aromic.guide li a,
.aromic.guide table a {	color:var(--link); }

:not(.pdt-guide) .aromic.guide p a,:not(.pdt-guide) .aromic.guide li a,
:not(.pdt-guide) .aromic.guide table a {	border-bottom:1px solid; }



/*==============================
	リスト
==============================*/
.aromic.guide ol { margin-left:1em; }
.aromic.guide ul li:before { content:'\30FB'; }



/*==============================
	エアー
==============================*/
.aromic.guide.air h2,
.aromic.guide.air dt a { background:rgba(38,175,191,1); }
.aromic.guide.air dd a:hover { background:rgba(38,175,191,.1); }



/*==============================
	アマゾンペイ
==============================*/
.aromic.guide.amazon h2,
.aromic.guide.amazon dt a { background:rgba(248,152,29,1); }
.aromic.guide.amazon p.detail,
.aromic.guide.amazon dd a:hover { background:rgba(248,152,29,.1); }



/*==============================
	ポイント利用ガイド
==============================*/
.aromic.guide.point img { display:block; width:100%; max-width:350px; margin:1em 0; }
.aromic.guide.point li { line-height:1.6em; }



/*==============================
	定期購入ガイド
==============================*/
.aromic.guide.teiki img { display:block; width:100%; max-width:350px; margin:1em 0; }
.aromic.guide.teiki li { line-height:1.6em; }