@charset "utf-8";

/* Reset

Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.2r1

-------------------------------------------------------------------------------*/

html {
    color: #000;
    background: #FFF;
}

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;
}

/*because legend doesn't inherit in IE */
legend {
    color: #000;
}

input,
button,
textarea,
select,
optgroup,
option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input,
button,
textarea,
select {
    *font-size: 100%;
}
/* Font

YUI 3.5.0pr1 (build 4342)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/

-------------------------------------------------------------------------------*/

body {
    font:14px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.75em;
    letter-spacing: 0.05em;
}

/* basic
-------------------------------------------------------------------------------*/

a {
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:link {
    color: #3333CC;
}

a:visited {
    color: #802080;
}

a:hover {
    text-decoration: underline;
    color: #EB6100;
}

a:active {
    color: #EBC300;
}

a:focus {
    outline: none;
}

a img {
    vertical-align: top;
}

.opc a:hover img {
    opacity: 0.6;
    -moz-opacity: 0.6;
    -ms-filter: "alpha(opacity=60)";
    filter: alpha(opacity=60);
}

.opc .current > a:hover img {
    opacity: 1;
    -moz-opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    filter: alpha(opacity=100);
}

.current > a {
    cursor: default;
}

.sprite {
    position: relative;
    display: block;
    overflow: hidden;
}

.sprite:hover {
    /zoom: 1;
}

.sprite img {
    position: absolute;
}

.normal {
    font-weight: normal!important;
}

.bold {
    font-weight: bold;
}

.fltL {
  float: left!important;
}

.fltR {
  float: right!important;
}

.clrml {
    margin-left: 0!important;
}

.clrmr {
    margin-right: 0!important;
}

.clrmb {
    margin-bottom: 0!important;
}

.clrmt {
    margin-top: 0!important;
}

.clrbt {
    clear: both!important;
}

.clrbd {
    border: none!important;
}

.alnC {
    text-align: center;
}

.alnR {
    text-align: right;
}

.block {
    display:block;
}

.whitespace {
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -hp-pre-wrap;
    word-wrap: break-word;
}

/* clearfix */

.clrfx:before, .clrfx:after {
    content:"";
    display:table;
}

.clrfx:after {
    clear:both;
}

.clrfx {
    zoom:1;
}

/* #layout
-------------------------------------------------------------------------------*/

html, body {
	background: #fffff0;
}

#wrapper {
	margin: 0 auto;
	width: 1000px;
}

#header {
	height: 30px;
	overflow: hidden;
	text-align: center;
}

h1 {
	height: 45px;
	overflow: hidden;
	padding: 2px 0 0 4px;
	position: relative;
	z-index: 2;
}

#slide {
	margin-top: -47px;
	width: 1000px;
	height: 600px;
}

#slide .slideDisp {
	position: relative;
	width: 1000px;
    height: 600px;
}

#slide .slideDisp img {
	position: absolute;
	top: 0;
	left: 0;
}

#slide .slideDisp .foreground {
	z-index: 1;
}

#slide .slideDisp .background {
	z-index: 0;
}

#local {
	padding: 18px 0 8px;
}

#local .fltL li {
	float: left;
	padding-right: 16px;
}

#local .fltR {
	width: 204px;
}

#local .fltR li {
	float: left;
	padding-bottom: 16px;
}

.products {
	width: 1004px;
	margin: 0 -4px 0 -2px;
}

.products div.fltL {
	width: 534px;
}

.products div.fltR {
	width: 414px;
	padding-top: 1px;
}

.products dl {
	display: inline-block;
	/display: inline;
	/zoom: 1;
}

.products div.fltR dl {
	margin-left: 37px;
}

.products div.fltR dt {
	margin-left: -35px;
}

.products dt {
	text-align: center;
	padding: 33px 0 26px
}

.products dt img {
	vertical-align: top;
}

.products dd.detail {
	font-size: 12px;
	line-height: 24px;
	padding-bottom: 28px;
}

.products dd.nocart {
    font-size: 12px;
    padding-bottom: 18px;
}

.products li {
	float: left;
	width: 100px;
	margin-right: 20px;
}

.products li.lastChild {
	margin-right: 0;
}

.products li a.sold {
	cursor: default;
}

.products li span {
	display: block;
	text-align: center;
}

.products li span.price {
	font-size: 12px;
	line-height: 12px;
	padding-top: 12px;
}

.products li span.stock {
	font-size: 10px;
	color: #f00;
	letter-spacing: 0.15em;
    min-height: 28px;
    height: auto !important;
    height: 28px;
}

#recipe {
	width: 1004px;
	margin: 0 -4px 8px -2px;
	padding-bottom: 2px;
	background: url(/store/haramaki/warmer_shop/yutampo/2013/images/bg_recipe.gif) no-repeat bottom left;
}

#recipe h3 {
	padding: 8px 0 46px;
}

#recipe dl {
	width: 480px;
	height: 400px;
	overflow: hidden;
}

#recipe dl.fltL {
	margin-left: 2px;
}

#recipe dl.fltR {
	margin-right: 2px;
}

#recipe dt {
	width: 480px;
	height: 320px;
	overflow: hidden;
	display: block;
	position: relative;
}

#recipe dt img {
	position: absolute;
	top: 320px;
}

#recipe dt .foreground {
	top: 0;
	z-index: 1;
}

#recipe dt .background {
	top: 0;
}

#recipe dd {
	text-align: center;
	padding-top: 16px;
}

#recipe a {
    display: block;
    margin-top: 271px;
}

#talk {
	margin: 31px auto 0;
	width: 784px;
	background: url(/store/haramaki/warmer_shop/yutampo/2013/images/pre_bg_body.gif) repeat-y;
}

#talk h2 {
	width: 784px;
	height: 153px;
	overflow: hidden;
	background: url(/store/haramaki/warmer_shop/yutampo/2013/images/pre_bg_head.gif) no-repeat;
	text-align: center;
}

#talk h2 img {
	margin-top: 22px;
}

#talk table {
	width: 784px;
	background: url(/store/haramaki/warmer_shop/yutampo/2013/images/pre_bg_foot.gif) no-repeat bottom left;
}

#talk th {
	width: 210px;
	padding: 0 21px 25px 0;
	vertical-align: top;
	text-align: right;
}

#talk td {
	vertical-align: middle;
	padding: 0 50px 25px 0;
}

#talk td.lead {
	padding: 0 0 25px 155px;
}

#talk td.lead img {
	vertical-align: middle;
	margin: 7px 0 13px;
}

#talk td.aside {
	text-align: center;
	vertical-align: middle;
	padding-right: 0;
}

#talk .lastChild th,
#talk .lastChild td {
	height: 72px;
	padding-bottom: 0;
}

#talk td span {
	font-size: 21px;
}

#talk td a {
    color: #0082ff;
    text-decoration: none;
}

#talk td a:hover {
    color: #ffe1f5;
}

#notice {
	margin: 0 auto;
	width: 391px;
	padding-top: 28px;
}

#notice table {
	width: 100%;
	border: #000 1px solid;
	margin: 4px 0 17px;
}

#notice th,
#notice td {
	border-top: #000 1px solid;
	border-bottom: #000 1px solid;
	padding: 6px 0 4px;
}

#notice th {
	text-align: right;
	width: 105px;
}

#notice p {
	color: #f00;
}

p#date {
	text-align: center;
	padding-top: 5px;
	color: #404040;
}

#footer {
	width: 756px;
	margin: 0 auto;
	padding-bottom: 30px;
}

#footer ul.upper {
	background: url(/store/haramaki/warmer_shop/yutampo/2013/images/pre_bg_footer.gif) no-repeat bottom left;
	padding: 35px 0 32px;
}

#footer ul.lower {
	padding-top: 24px;
}

#footer li {
	float: left;
}

#footer ul.upper li {
	padding-right: 22px;
}

#footer ul.lower li {
	padding-right: 40px;
}

#footer li.fb {
    padding: 15px 0 0 12px !important;
}

#footer li.fltR {
	padding: 16px 4px 0 0 !important;
}

/* #pre
-------------------------------------------------------------------------------*/

#pre p#date {
	padding-top: 40px;
}