@charset "UTF-8";

@font-face {

  font-family: "Yu Gothic";

  src: local("Yu Gothic Medium");

  font-weight: 400;

}

body {

  color: #4D4D4D;

  margin: 0;

  font-family: "Yu Gothic","ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif";

}



p {

  margin: 0;

}



img {

  border: none;

  vertical-align: bottom;

}



a {

  color: #595757;

  text-decoration: none;

}

a:hover, a:active, a:focus {

  color: #8c8a8a;

}

a:hover img {

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

  opacity: 0.8;

}



.cf:after {

  content: " ";

  display: block;

  clear: both;

}



ul, li {

  margin: 0;

  padding: 0;

  list-style-type: none;

}



h1, h2, h3 {

  margin: 0;

  padding: 0;

}



/*header*/

#hdrWrap {

  width: 100%;

}



#logoArea {

  height: 115px;

}

#logoArea a {

  display: block;

  width: 100%;

  height: 100%;

  background: url(../img/header/logo.png) center center no-repeat;

}



#gNav {

  background: #8e7729;

  font-size: 13px;

  line-height: 28px;

  padding: 6px 0;

}

#gNav a {

  color: #FFF;

  display: block;

  padding: 0 56px;

}

#gNav a:hover {

  color: #ccc;

}

#gNav ul {

  width: 1000px;

  margin: 0 auto;

  letter-spacing: -.40em;

  text-align: center;

}

#gNav li {

  letter-spacing: normal;

  display: inline-block;

}

#gNav li:first-child a {

  padding-left: 0;

}

#gNav li:last-child a {

  padding-right: 0;

}



/*top*/

#mainWrap {

  width: 100%;

}



#info {

  text-align: center;

  padding: 40px 0 0px;
  
}

#category {

  padding: 63px 0 67px;

}

#category ul {

  text-align: center;

  letter-spacing: -.40em;

  width: 1080px;

  margin: 0 auto;

}

#category li {

  display: inline-block;

  margin: 0 23px 50px;

}



#category li:nth-child(3) {

  margin: 0 6px 50px;

}



#caramel {

  background: url(../img/top/bg01.png) center 0 repeat-x;

  border-top: 3px solid #8e7729;

  border-bottom: 3px solid #8e7729;

  padding: 40px 0 55px;

}

#caramel h3 {

  text-align: center;

}



#jerry {

  background: url(../img/top/bg02.png) center 0 repeat-x;

  border-bottom: 3px solid #8e7729;

  padding: 40px 0 55px;

}

#jerry h3 {

  text-align: center;

}



.itemList {

  font-size: 15px;

  line-height: 20px;

}

.itemList ul {

  text-align: center;

  letter-spacing: -.40em;

  margin: 37px 0 40px;

}

.itemList li {

  display: inline-block;

  width: 204px;

  text-align: left;

  letter-spacing: normal;

  margin: 0 20px;

	vertical-align: top;

}

.itemList .image {

  width: 204px;

  height: 204px;

  display: table-cell;

}

.itemList p.name {

  margin: 15px 0 0;

}

.itemList p.price {

  text-align: right;

}

.itemList .btn {

  text-align: center;

}



#ranking {

  padding: 40px 0 55px;

}

#ranking h3 {

  text-align: center;

}

#ranking li {

  padding-top: 70px;

}

#ranking li:nth-child(1) {

  background: url(../img/top/no1.png) center 0 no-repeat;

}

#ranking li:nth-child(2) {

  background: url(../img/top/no2.png) center 0 no-repeat;

}

#ranking li:nth-child(3) {

  background: url(../img/top/no3.png) center 0 no-repeat;

}

#ranking li:nth-child(4) {

  background: url(../img/top/no4.png) center 33px no-repeat;

}



/*footer*/

#ftWrap {

  background: #8e7729 url(../img/footer/ft_ttl.png) center 30px no-repeat;

  padding: 120px 0 0;

  text-align: center;

  letter-spacing: -.40em;

}

#ftWrap .block {

  background: #FFF;

  color: #727171;

  vertical-align: top;

  text-align: left;

  width: 310px;

  height: 625px;

  display: inline-block;

  letter-spacing: normal;

  font-size: 12px;

  line-height: 18px;

  padding: 0 15px;

  margin: 0 17px 20px 18px;

}

#ftWrap .block h3 {

  margin: 15px 0 18px;

}

#ftWrap .block p {

  margin-bottom: 18px;

}

#ftWrap .block p img {

  margin: 5px 0 0;

}

.item-detail-text {
    float: right;
    width: 48%;
    background: #F6F3EE;
    box-sizing: border-box;
    padding: 3rem;
    max-width: 390px;
}

.item-detail-text p > span {
    font-weight: bold;
    display: block;
}


#ftCopy {
	background-color: #8e7729;
	padding: 10px 50px ;
	border-top: 1px solid #FFF;
	color: #FFFFFF;
	letter-spacing: normal;
}

#ftCopy .ftNavi {
	text-align: left;
	color: #FFFFFF;
	font-size: 14px;
}

#ftCopy a {
	color: #FFFFFF;
}

#ftCopy small {

  text-align: right;

  display: block;

  color: #FFF;

  font-size: 12px;

  letter-spacing: normal;

  padding: 0 0 30px;

}


.fixLower-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 0;
    z-index: 300;
}