@charset "utf-8";

/*============================
#mainTitleBig
============================*/
.md_mainTitle_Big { background: url(../../imageFile/howto/bg_title_howto.png) no-repeat right center, url(../../imageFile/global/bg_title.gif) repeat left center; }

/*============================
#howToDripArea
============================*/
#howToDripArea{}

/*============================
.mainCopy
============================*/
#howToDripArea .mainCopy { margin-top: 60px; text-align: center; }
#howToDripArea .mainCopy h2 { line-height: 2; }

/*============================
.itemsList
============================*/
#howToDripArea .itemsList { margin:75px 0; border: 1px solid #eee; border-radius: 3px; box-sizing: border-box; text-align: center; }
#howToDripArea .itemsList .thumTitle { position: relative; display: inline-block; top:-8px; padding: 0 60px; background-color: #fff; font-weight: bold;  }
#howToDripArea .itemsList ul { padding: 45px 60px; text-align: center; }
#howToDripArea .itemsList ul li { float: left; margin-left: 20px; width: 105px; }
#howToDripArea .itemsList ul li:first-child { margin-left:0; }
#howToDripArea .itemsList ul li:nth-child(5) { margin-left:0; }
#howToDripArea .itemsList ul li {}
#howToDripArea .itemsList ul li .itemImage{ }
#howToDripArea .itemsList ul li .itemName { color: #4b1f1a; font-size: 0.875em; line-height: 1.5; }

/*============================
.procedureList
============================*/
#howToDripArea .procedure { margin-top: 100px; }
#howToDripArea .procedure ul {}
#howToDripArea .procedure ul li { position: relative; padding: 30px 0; border-top: solid 1px #eee; }
#howToDripArea .procedure ul li .stepImg { float: left; width:106px; }
#howToDripArea .procedure ul li .stepImg img { border-radius: 50%; }
#howToDripArea .procedure ul li .description { float: left; width: 380px; margin-left: 20px; }
#howToDripArea .procedure ul li .description .stepTag { width:100px; border-radius: 3px; text-align: center; }
#howToDripArea .procedure ul li .description .stepTag.no01 { background-color: #c94040; }
#howToDripArea .procedure ul li .description .stepTag.no02 { background-color: #c62c2b; }
#howToDripArea .procedure ul li .description .stepTag.no03 { background-color: #b60613; }
#howToDripArea .procedure ul li .description .stepTag.no04 { background-color: #b60613; }
#howToDripArea .procedure ul li .description .stepTag.no05 { background-color: #ac0f0d; }
#howToDripArea .procedure ul li .description .stepTag.no06 { background-color: #852e2c; }
#howToDripArea .procedure ul li .description .stepTag.no07 { background-color: #691e0f; }
#howToDripArea .procedure ul li .description .stepTag.no08 { background-color: #532f2d; }
#howToDripArea .procedure ul li .description .stepTag span { display: inline-block; padding-top: 10px; padding-bottom: 9px; font-size: 0.95em; color: #fff; letter-spacing: 0.1em; }
#howToDripArea .procedure ul li .description .stepText { position: relative; margin-top: 15px; }
#howToDripArea .procedure ul li .description .stepText span { line-height: 1.5; font-size: 1.125em; color: #a1332c; font-weight: bold; }
#howToDripArea .procedure ul li .description .stepText p { line-height: 1.5; }
#howToDripArea .procedure ul li .description .stepText em { color: #fe0000; }
#howToDripArea .procedure ul li .description .stepText::after { position: absolute; left: 35px; bottom: -50px; content: ""; background : url(../../imageFile/howto/arrow.png) no-repeat center; width: 17px; height: 26px; z-index: 999; }
#howToDripArea .procedure ul li .description .stepText.last::after { display:none; }
#howToDripArea .procedure ul li .advice { float: right; width: 360px; position: relative; padding: 20px 20px 20px 60px; line-height: 1.5; background-color: #f8f7f4; border-radius: 3px; }
#howToDripArea .procedure ul li .advice::before { position: absolute; content: ""; top: 28%; left: -10px; margin-top: -10px;  margin-left: -15px; border: 10px solid transparent; border-right: 15px solid #f8f7f4; }
#howToDripArea .procedure ul li .advice::after { position: absolute; width: 25px; top:20px; left: 15px; content: url(../../imageFile/howto/coffeeBeans.png); }

/*============================
.column
============================*/
#howToDripArea .column { margin-top: 100px; }
#howToDripArea .column .pad { margin-top:55px;  }
#howToDripArea .column .clumnText { float: left; width:630px; line-height: 1.5; } 
#howToDripArea .column .clumnImg { float: left; width:210px; position: relative; top:40px; margin-left: 80px; }