/* RESET */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
/* RESET HTML5 */
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

/* GENERAL */

body {color: #333; font: 12px/1.8 "Helvetica","Lucida Grande","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6","ＭＳ Ｐゴシック",Osaka,sans-serif; background: #efede2; margin: 20px;}
a:link, a:visited {color:#333;}
a:active, a:hover {color:#7F0019;}
a img {vertical-align: bottom;}

article {width: 700px; margin: 0 auto;}

#ingredient {float: left; margin-right: 20px; width: 280px;}
#ingredient li {border-bottom: 1px solid #999; padding-bottom: 2px; margin-bottom: 2px;}
#ingredient li li:last-child {border: 0; margin: 0; padding: 0;}
#ingredient li:after {content: ''; display: block; clear: both;}
#ingredient dl {margin: 10px 0 0;}
#ingredient dt {font-weight: bold; margin-bottom: 5px;}
#ingredient dd {margin-left: 1em;}
#ingredient .name {margin-right: 10px; float: left;}
#ingredient .quantity {float: right;}

#tool {float: left; width: 220px;}

h1 {font-weight: bold; font-size: 20px; line-height: 1; margin-bottom: 40px;}
h1 span {font-size: 13px;}
section {margin-bottom: 20px;}
section h1 {font-size: 14px; line-height: 1.6; margin-bottom: 10px;}
figure {float: left; margin-right: 20px; margin-bottom: 20px;}
figure img {width: 160px; height: 160px;}
.detail {float: left; font-size: 12px;}
#attention,
#recipe {clear: both;}

#recipe {font-size: 13px;}
ol {padding-left: 80px;}
ol li {list-style-type: decimal; margin-bottom: 10px;}
#attention ul,
#notice ul {padding-left: 20px;}
#attention li,
#notice li {list-style-type: disc; margin-bottom: 10px;}

#preface,
#arrange {clear: both; border: 1px solid #999; padding: 20px; margin-bottom: 20px; border-radius: 5px;}
#preface section:last-child {margin-bottom: 0;}

.point {background: url(/img/store/campaign/C13011102/point.png) no-repeat; font: 0/0 a; text-shadow: none; color: transparent; width: 59px; height: 22px; display: inline-block; vertical-align: middle;}
#recipe .point {margin-left: -59px;}

.info {margin-right: -10px; overflow: hidden;}
.info li {background-image: url(/img/store/campaign/C13011102/cp_130111_icon.png); background-repeat: no-repeat; font: 0/0 a; text-shadow: none; color: transparent; width: 50px; height: 50px; float: left; margin: 0 5px 0 0;}
.info:after {content:""; display:block; clear:both;}

.info li.cold {background-position: 10px 0px;}
.info li.oven {background-position: 0px -50px;}
.info li.microwave {background-position: 0px -100px; width: 55px;}

.info li.time30 {background-position: -100px 0px;}
.info li.time40 {background-position: -100px -50px;}
.info li.time50 {background-position: -100px -100px;}
.info li.time60 {background-position: -100px -150px;}
.info li.time70 {background-position: -100px -200px;}
.info li.time80 {background-position: -100px -250px;}
.info li.time90 {background-position: -100px -300px;}
.info li.time160 {background-position: -100px -350px;}
a.modalOpener, a.modalOpener:visited {background: url(/img/common/imageview.gif) #efede2 5px center no-repeat; padding: 2px 5px 2px 19px; margin-top: 10px; text-decoration: none; color: 333; border-radius: 4px; display: inline-block;}
a.modalOpener:hover {background: url(/img/common/imageview.gif) #E4DACD 5px center no-repeat;}

.item1 .info li.wrapping {background-position: -200px -50px;}
.item2 .info li.wrapping {background-position: -300px -200px;}
.item3 .info li.wrapping {background-position: -200px -50px;}
.item4 .info li.wrapping {background-position: -300px -250px;}
.item5 .info li.wrapping {background-position: -200px -50px;}
.item6 .info li.wrapping {background-position: -300px -50px;}
.item7 .info li.wrapping {background-position: -300px -250px;}
.item8 .info li.wrapping {background-position: -200px -100px;}
.item9 .info li.wrapping {background-position: -300px 0px;}
.item10 .info li.wrapping {background-position: -200px -200px;}
.item11 .info li.wrapping {background-position: -300px -150px;}
.item12 .info li.wrapping {background-position: -300px -100px;}
.item13 .info li.wrapping {background-position: -300px -50px;}
.item14 .info li.wrapping {background-position: -200px -200px;}
.item15 .info li.wrapping {background-position: -200px -200px;}
.item16 .info li.wrapping {background-position: -200px -150px;}
.item17 .info li.wrapping {background-position: -200px 0px;}
.item18 .info li.wrapping {background-position: -200px -250px;}