@charset "utf-8";

/* Global Elements
------------------------------*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: #EEEBE4;
  font: 13px/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "ＭＳ Ｐゴシック", "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

img {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: top;
  line-height: 1;
}

a:link { color: #452A10;}
a:visited { color: #695C24;}
a:active { color: #F00;}
a:hover { color: #382a00;}

/* Common Section
------------------------------*/

.button {
  background: #FFFFCC;
  border: solid 1px #FF8001;
}
.h20 { height: 20px; }
.h30 { height: 30px; }
.w50 { width: 50px; }
.w75 { width: 75px; }
.w100 { width: 100px; }

/* Basic Layout
------------------------------*/

#container {
  margin: 0 auto;
  width: 916px;
  text-align: left;
}

#header {
  width: 916px;
  height: 93px;
}

#header-inner {
  padding: 0 8px 8px 8px;
}

#content {
  width: 916px;
}

#content-inner {
  padding: 10px 8px 0 8px;
}

#left {
  float: left;
  width: 202px;
}

#left-inner {
  margin: 0 0 0 1px;
}


#left2 {
  float: left;
  width: 202px;
}

#left-inner2 {
  margin: 0 0 0 1px;
}

#center {
  float: left;
  width: 498px;
}

#center-inner {
  position: relative;
  margin: 0 2px;
  padding: 0 8px;
}

#center-inner2 {
width:495px;
  position: relative;
  margin: 0 0 0 2px;
  padding: 0;
}

#right {
  float: left;
  width: 200px;
}

#right-inner {
  margin: 0 1px;
}


#right2 {
  float: left;
  width: 200px;
}

#right-inner2 {
  margin: 0 1px;
}

#alpha {
  clear: both;
  width: 900px;
}

#alpha-inner {
  background: #F9F9EF;
  margin: 10px 10px 0;
  padding: 20px 10px 10px;
  border-top: 1px solid #D2C488;
}

#footer {
  width: 916px;
  height: 54px;
}

#footer-inner {
  padding: 0 8px 8px 8px;
}

/* Container Section
------------------------------*/

#container {
  background: url(../images/container-3column-bg.gif) repeat-y;
}

/* Header Section
------------------------------*/

#header {
  background: url(../images/header-bg.gif) no-repeat top left;
}

#header-inner {
  font-size: 0.8em;
}

#header-inner .logo {
  float: left;
  width: 202px;
  height: 85px;
}
#header-inner .right {
  float: left;
  background: url(../images/navigation-bg2.gif) no-repeat;
  width: 698px;
  height: 85px;
}
#header-inner .right .subnavi {
  width: 698px;
  height: 29px;
}
#header-inner .right .subnavi span {
  float: left;
  text-align: left;
  display: block;
  font-size: 1px;
}
#header-inner .right .subnavi span.text { width: 381px; height: 27px;}
#header-inner .right .subnavi span.usage { width: 150px; margin-left: 2px;}
#header-inner .right .subnavi span.join { width: 81px; margin-left: 2px;}
#header-inner .right .subnavi span.login { width: 80px; margin-left: 2px;}
#header-inner .right .subnavi span.mypage { width: 80px; margin-left: 2px;}

#header-inner .right .subnavi.logon span.text {
  background: url(../images/navigation-bg.gif) no-repeat top left;
  width: 524px;
  height: 27px;
}
#header-inner .right .subnavi.logon span.usage { width: 143px; margin-left: 11px;}
#header-inner .right .subnavi.logon span.usage img {width: 143px;}
#header-inner .right .subnavi.logon span.login { width: 80px; margin-left: 2px;}

#header-inner .right .navigation {
  margin: 0 0 0 2px;
  padding: 0;
  width: 698px;
  height: 56px;
  border: none;
}
#header-inner .right .navigation span {
  float: left;
  margin: 0;
  _margin: 0;
  padding: 0;
  display: block;
}
#header-inner .right .navigation span a {
  height: 50px;
  display: inline;
}

.logonName{
background:#EEEBE4; !importance;
padding-left:20px;
font-size:0.8em;
font-weight:bold;
color:#5A3711;
}


/* Contant Section
------------------------------*/

#content {
  background: url(../images/content-3column-bg.gif) no-repeat top left;
}

div.section {
  padding: 10px 15px;
}
div.section h2 {
  color: #454545;
  font-size: 128.23%;
  border-bottom: 2px solid #D2C488;
}

div.section h3.resultList{
text-align:left;
color:#CC3300;
_margin:0 0 5px 0;
font-size:1.1em;
}

div.section .title {
  background: #F1E6D0;
  margin-bottom: 12px;
  padding: 2px 0;
  font-weight: bold;
  font-size: 1.1em;
  text-align: left;
  text-indent:0.5em;
}
div.section .data {
  padding: 5px 10px;
}

/* Left Section & Center Section & Right Section
------------------------------*/
.content {
  margin-bottom: 20px;
}

.content.banner {
  margin-bottom: 10px;
  text-align: center;
}
.content.leftcol,
.content.rightcol {
  float: left;
  width: 230px;
}
.content.leftcol {
  margin: 0 5px 0 7px;
  _margin: 0 3px 0 4px;
}
.content.rightcol {
  margin: 0 5px 0 0;
  _margin: 0 0px 0 0;
}

.recipe-box p.left_btn,
.select-box p.right_btn {
  margin: 0;
  padding: 0;
  text-align: right;
}
.recipe-box p.left_btn img.off,
.select-box p.right_btn img.off {
  float: none;
  margin: 0;
  padding: 0;
}

.content .title {
  background: url(../images/title-bg.gif) no-repeat center;
  height: 31px;
  /*color: #452A10;*/
  color:#CC3300;
  font-weight: bold;
  text-align: center;
  line-height: 31px;
}

.content .title span{
position:absolute;
left:-9999px;
}

.content .title.left {
  background-position: left top;
}
.content .title.right {
  background-position: right top;
}
.content .data {
  margin: 0;
  padding: 0;
}
/* IE対策 BEGIN */
.content .data .ranking-box,
.content .data .side-select-box,
.content .data .mobile-box { width: 182px; }
.content .data .recipe-box,
.content .data .select-box, { width: 210px; }
/* IE対策 END */
.content .data .ranking-box,
.content .data .side-select-box,
.content .data .recipe-box,
.content .data .select-box,
.content .data .mobile-box {
  padding: 8px;
  border-bottom: 1px dashed #e0d7b6;
}

.content .data .ranking-box img.thumb,
.content .data .side-select-box img,
.content .data .recipe-box img,
.content .data .select-box img,
.content .data .mobile-box img {
  float: left;
  margin: 0 10px 10px 0;
}
.content .data .ranking-box p,
.content .data .side-select-box p,
.content .data .recipe-box p,
.content .data .select-box p,
.content .data .mobile-box p {
  margin-top: 0;
  padding-top: 0;
  margin-left: 78px;
}
.content .data div.last {
  border-bottom: none;
}
.content .data ul {
  margin: 0;
  padding: 0;
  line-height: 1;
}
.content .data ul li {
  background: url(../images/list-arrow.gif) no-repeat 4px 10px;
  list-style-type: none;
  padding: 7px 7px 7px 25px;
  line-height: 160%;
  display: block;
  border-bottom: 1px dashed #E0D5B7;
}
.content .banner,
.content .more {
  margin-top: 10px;
  text-align: center;
}
.content .banner a,
.content .more a {
  text-decoration: none;
}

/* Center Section
------------------------------*/
div.section p {
  margin: 1em;
}
div.section dl {
  margin: 10px;
}
div.section dl dt {
  margin: 0 0 10px 0;
  padding-left: 5px;
  color: #93895F;
  font-weight: bold;
  border-left: 20px solid #E0D5B7;
  border-bottom: 1px solid #E0D5B7;
}
div.section dl dd {
  margin: 0 0 1.5em 1em;
}


/* Right Section
------------------------------*/

/* Alpha Section
------------------------------*/
#alpha {
}
#alpha-inner {
}
#alpha-inner div.category,
#content-inner div.category {
  float: left;
  width: 201px;
  margin: 0 7px 15px;
}
#alpha-inner div.category img,
#content-inner div.category img {
  float: left;
  width: 50px;
  margin: 0 10px 10px 0;
  /*border: 1px solid #CCC;*/
  border: 1px solid #C69885;
  padding:1px;
}
#alpha-inner div.category div.title,
#content-inner div.category div.title {
  margin-bottom: .6em;
  font-weight: bold;
}
#alpha-inner div.category div.items,
#content-inner div.category div.items {
  margin-left: 64px;
  font-size:0.85em;
}

/* Footer Section
------------------------------*/

#footer {
  background: #EEEBE4 url(../images/footer-bg.gif) no-repeat top left;
}
#footer-inner {
  font-size: 0.8em;
}
#footer-inner span {
  float: left;
  height: 27px;
  line-height: 27px;
  color: #452A10;
  text-decoration: none;
  display: block;
}
#footer-inner span.item { margin-left: 2px;}
#footer-inner span.right {
  margin: 0 10px 0 0;
  padding: 0;
  width: 328px;
  _width: 320px;
  color: #685324;
  line-height: 27px;
  text-align: right;
  display: inline-block;
}
#footer-inner span a {
  height: 27px;
  color: #452A10;
  text-align: center;
  text-decoration: none;
  display: block;
}
#footer-inner span a.sitemap { margin-left: ; width: 90px;}
#footer-inner span a.contact { width: 58px;}
#footer-inner span a.qanda { width: 78px;}
#footer-inner span a.ads { width: 99px;}
#footer-inner span a.company { width: 102px;}
#footer-inner span a.privacy { width: 123px;}

/* Utilities Section (Clearfix)
------------------------------*/

#header-inner:after,
.subnavi:after,
.navigation:after,
#content-inner:after,
#left-inner:after,
#center-inner:after,
#center-inner2:after,
#right-inner:after,
.ranking-box:after,
.side-select-box:after,
.recipe-box:after,
.select-box:after,
.mobile-box:after,
#alpha-inner:after,
div#category:after,
#footer-inner:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
}

#header-inner,
.subnavi,
.navigation,
#content-inner,
#left-inner,
#center-inner,
#center-inner2,
#right-inner,
.ranking-box,
.side-select-box,
.recipe-box,
.select-box,
.mobile-box,
#alpha-inner,
div#category,
#footer-inner { display: inline-block; }

/* no ie mac \*/
* html #header-inner,
* html .subnavi,
* html .navigation,
* html #content-inner,
* html #left-inner,
* html #center-inner,
* html #center-inner2,
* html #right-inner,
* html .ranking-box,
* html .recipe-box,
* html .select-box,
* html .mobile-box,
* html #alpha-inner,
* html div#category,
* html #footer-inner { height:1px; }
/* */

div.clear {
  display: block;
  visibility: hidden;
  clear: both;
  line-height: -1;
  font-size: 0.1em;
}

/* Search Section
------------------------------*/

.search {
  position: absolute;
  top: 0;
  left: 0;
  _left: -8px;
  padding: 10px 0;
  width: 494px;
  height: 170px;
  border-bottom: 1px dashed #e0d7b6;
  text-align: left;
}
.search input.text {
  margin: 0 5px;
  padding: 2px;
  width: 236px;
  height: 32px;
  font-size: 32px;
  line-height: 32px;
  border: 1px solid #5A3711;
  vertical-align: middle;
}
.search input.btn-search {
  vertical-align: middle;
}
.search p {
  text-align: left;
}

.search p.recipe-search {
  margin: 0 0 15px 10px;
}

.search p.line {
  margin: 0 20px;
  height: 42px;
  line-height: 42px;
  border-top: 1px solid #dccc99;
}

.search p.line span {
  width: 9em;
  text-align: center;
  color: #5a3711;
  font-weight: bold;
  display: inline-block;
}

.search-begin {
  padding-top: 205px;
}


/* Shop content
------------------------------*/
body.shop #container {
  background: url(../images/container-1column-bg.gif) repeat-y;
}
body.shop #content {
  background: url(../images/content-1column-bg.gif) no-repeat top left;
}

body.shop #alpha {
  clear: both;
  width: 900px;
}

body.shop #alpha-inner {
  background: none;
  margin: 160px 10px 190px;
  padding: 20px 10px 10px;
  border: none;
  text-align: center;
}
body.shop #alpha-inner p {
  margin: 1em 0;
}
body.shop #alpha-inner div.banner {
  margin-top: 20px;
}

.topBanners{
margin:20px 0;
text-align:center;
}

.topBanners img{
margin:5px 0;
}


/*Shopへ移動ページ-------------------------------*/

.shopMain{
margin:1px 0 0 0;
}

.shopMain .mainImage{
margin:0 0 15px 1px;
}

.shopMain .catch{
background:url(../images/shop_catch.gif) no-repeat 0 0;
width:271px;
height:39px;
margin:0 0 10px 10px;
}

.shopMain .catch span{
position:absolute;
left:-9999px;
}

.shopMain p{
margin:0 0 0 10px;
font-size:0.9em;
line-height:160%;
margin:0 10px 10px 10px;
}

.shopMain .banner{
margin:0 15px 20px 10px;
text-align:right;
}

#shopOsusume{
margin: 0 0 0 -1px;
font-size:0.9em;
}

#shopOsusume .section{
clear:both;
}


#shopOsusume h3{
background:url(../images/shop_title_osusume.gif) no-repeat 0 0;
width:494px;
height:30px;
margin:0 0 10px 1px;
}

#shopOsusume h3 span{
position:absolute;
left:-9999px;
}

#shopOsusume .leftSide{
float:left;
width:212px;
margin:0 0 10px 0;
background:url(../images/shop_osusume_dotline.gif) repeat-y right top;
padding:0 12px 0 10px;
}

#shopOsusume .rightSide{
float:right;
width:212px;
margin:0 0 10px 0;
}

#shopOsusume .thum{
float:left;
border:1px solid #CAAD75;
padding:1px;
margin:0 8px 8px 0;
}

#shopOsusume .price{
margin:5px 0;
}

#shopOsusume .price strong{
color:#CC0000;
}

#shopOsusume p{
margin:0 0 0 0;
}

.breadPass {
font-size:10px;
margin:5px 0;
}