@charset "utf-8";

/* 2012 summer2 プロモーション終了後削除 */
#contents .contentsIn #contentsWrapper { margin-top: 4px; }

.newContents p,
.newContents ul { margin-bottom: 0; }

/* scrollArea */
/*div#content1 { padding-top: 50px; }*/

div#content2,
div#content3,
div#content4 { padding-top: 60px; }

div.arrange {
	margin-bottom: 30px;
	padding-bottom: 1px;
	background: url(/common/images/border-bg.gif) repeat-x left bottom;
}

div.arrange h2 { margin-bottom: 30px; }

div.arrange  div.withImgCol { margin-bottom: 0; }

div.arrange div.withImgCol div.txtR h3 { margin-bottom: 20px; }

div.arrange div.withImgCol div.txtR p.link,
div.more div.withImgCol div.txtR p.link { margin-bottom: 0; }

div.innerNav {
	display: none;
	position: fixed;
	top: 320px;
	right: 0;
	width: 40px;
}

div.innerNav div { margin: 2px 0 0; }

div.innerNav div img { cursor: pointer; }


/* popupArea */
#popupArea{
display:none;
}
.popup{
color:#5b5b5b;
}
.popupElement {color:#5b5b5b; text-decoration:none;}
.popupElement a{font-size:120%;}
.popupElement a:link{color:#5b5b5b; text-decoration:none;}
.popupElement a:visited{color:#5b5b5b; text-decoration:none;}
.popupElement a:hover{color:#5b5b5b; text-decoration:none;}
.popupElement a:active{color:#5b5b5b; text-decoration:none;}

/* popupElement */
.popupElement{
width:700px;
clear:both;
overflow:hidden;
font-size: 1.2em;
}
.popupElement p{ margin: 0; }
/** link **/
.popupElement .linkIcon{
padding-left: 12px;
background: url(/products/images/icon_arrow_02.gif) no-repeat left 0.4em;
}
/** item **/
.popupElement .item{
width:680px;
clear:both;
overflow:hidden;
position:relative;
}
.popupElement .item .btns{
position:absolute;
right:-20px;
bottom:0;
}
.popupElement .item .btns ul{
list-style:none;
clear:both;
margin:0;
padding:0;
text-align:right;
}

*:first-child+html .btns ul li{float:left; display: inline;}

.popupElement .item .btns ul li{ display:inline; }
.popupElement .item .btns ul li.mixiBtn{ margin-left:10px; }
.popupElement .item .btns ul li.facebookBtn{ margin-left:10px; }
.popupElement .productImg{
width:333px;
float:left;
}

.popupElement .productImg{
display:table-cell;
margin-bottom:1px;
vertical-align:middle;
}

.popupElement .productInfo{
width:347px;
float:left;
margin-top:22px;
}
.popupElement .productInfo h3{ margin: 0 0 45px 42px; }

/** withImgCol **/
.popupElement .productInfo .withImgCol{
_zoom:1;
overflow:hidden;
margin-bottom:1em;
width:100%;
}
.popupElement .productInfo .withImgCol p,
.popupElement .productInfo .withImgCol ul,
.popupElement .productInfo .withImgCol ol{ margin-top:0; }

.popupElement .productInfo .withImgCol .imgL{
float:left;
margin:0 20px 0 0;
}
.popupElement .productInfo .withImgCol .txtR,
.popupElement .productInfo .withImgCol .txtL{
overflow:hidden;
_zoom:1;
}

.popupElement .productInfo .withImgCol .imgL { margin-right:8px; }

.popupElement .productInfo .withImgCol .txtR {
width:270px;
color:#000000;
}

.popupElement .productInfo .withImgCol .txtR p { margin-bottom: 0; }

.popupElement .productInfo .withImgCol .txtR ol {
	margin-left: 0;
	margin-bottom: 0;
	padding-left: 0;
}

.popupElement .productInfo .withImgCol .txtR ol li {
	padding-left: 14px;
    text-indent: 0;
	list-style: none;
	line-height: 1.5;
}

.popupElement .productInfo .withImgCol .txtR ul {
	margin-left: 0;
	margin-bottom: 0;
	padding-left: 0;
}

.popupElement .productInfo .withImgCol .txtR ul li {
	display: inline;
	margin-right: 5px;
}

.popupElement .productInfo .withImgCol .txtR ol li.num1 {
	background:url(/coffee/images/img-12summer2-or-howto-num1.gif) no-repeat left 0.25em;
}
.popupElement .productInfo .withImgCol .txtR ol li.num2 {
	background:url(/coffee/images/img-12summer2-or-howto-num2.gif) no-repeat left 0.25em;
}
.popupElement .productInfo .withImgCol .txtR ol li.num3 {
	background:url(/coffee/images/img-12summer2-or-howto-num3.gif) no-repeat left 0.25em;
}
.popupElement .productInfo .withImgCol .txtR ol li.num4 {
	background:url(/coffee/images/img-12summer2-or-howto-num4.gif) no-repeat left 0.25em;
}
.popupElement .productInfo .withImgCol .txtR ol li.num5 {
	background:url(/coffee/images/img-12summer2-or-howto-num5.gif) no-repeat left 0.25em;
}

.popupElement .productInfo .withImgCol { margin-bottom: 15px; }

.popupElement .productInfo .withImgCol.coffee .imgL { padding-top: 12px; }
.popupElement .productInfo .withImgCol.coffee .txtR {
	padding-top: 12px;
	background:url(/common/images/border-bg.gif) repeat-x left top;
}


/* 2012 winter プロモーション */

.winterp1-2012 .section {
	position: relative;
}
.winterp1-2012 .section:after{
content: ""; 
display: block; 
clear: both;
}
.winterp1-2012 .section.giftCoffee {
	margin-top: 45px;
	background : url(/coffee/images/12winterp1-coffee-pict01.jpg) no-repeat left top;
	min-height: 488px;
}
.winterp1-2012 .section.giftCoffee h2 {
	position: absolute;
	top: 62px;
	left: 611px;
}
.winterp1-2012 .section.giftCoffee p {
	width: 255px;
	position: absolute;
	top: 115px;
	left: 611px;
}
.winterp1-2012 .section.giftCoffee li.itemName01 {
	position: absolute;
	top: 0px;
	left: 66px;
}
.winterp1-2012 .section.giftCoffee li.itemName02 {
	position: absolute;
	top: 166px;
	left: 1px;
}
.winterp1-2012 .section.giftCoffee li.itemName03 {
	position: absolute;
	top: 273px;
	right: 320px;
}
.winterp1-2012 .section.giftCoffee li.itemName04 {
	position: absolute;
	top: 344px;
	right: 220px;
}
.winterp1-2012 .section.giftItem {
	margin: -29px 50px 0;
	border-top: 1px #e0e0e0 dotted;
	border-bottom: 1px #e0e0e0 dotted;
	padding: 20px 0 25px 0;
	min-height:100px;
}
.winterp1-2012 .section.giftItem .itemBoxL {
	float: left;
	width: 462px;
}
.winterp1-2012 .section.giftItem .itemBoxL .innerBox {
	min-height: 100px;
	width: 250px;
	margin-left: 182px;
}
.winterp1-2012 .section.giftItem .itemBoxR {
	float: left;
	width: 337px;
	border-left: 1px #e0e0e0 dotted;
}
.winterp1-2012 .section.giftItem .itemBoxR .innerBox {
	min-height: 100px;
	width: 191px;
	margin-left: 146px;
}
.winterp1-2012 .section.giftItem img {
	float: left;
	position: absolute;
	top: -50px;
}
.winterp1-2012 .section.giftItem .itemBoxL a.arrow {
	margin-top:3em;
}
.winterp1-2012 .section.giftItem .itemBoxR a.arrow {
	margin-top:1.2em;
}
.winterp1-2012 .section.giftBox {
	margin: 30px 50px 73px 50px;
}
#contents .winterp1-2012 .section.giftBox h2{
	margin-bottom: 11px;
}
.winterp1-2012 .section.giftBox p {
	margin-top: 11px;
}
.winterp1-2012 .section.giftBox .itemBox {
	width: 400px;
	float: left;
	margin-top: 26px;
}
.winterp1-2012 .section.giftBox .itemBox p {
	margin-top: 28px;
	margin-left: 65px;
}
.winterp1-2012 .section.giftBox .itemBox ul {
	margin-top: 17px;
	margin-left: 65px;
}

/* winterP2 */
#contents .scrollWrapTop{
	overflow:hidden;
	margin:0;
	padding:0 0 15px 0;
}
#contents .scrollWrap{
	overflow:hidden;
	margin:0;
	padding:10px 0;
}
#contents .scrollWrap.recipe{
	padding:0;
}
#contents .section03{
	overflow:hidden;
}
#contents .leftTxt{
	width:560px;
	margin:15px 0 0 0;
	float:left;
}
#contents .inner{
/*
	float:right;
	margin:12px 0 0 0;
*/
}
#contents .inner .photo{
	float:left;
	margin:0 20px 0 0;
}
#contents .inner ul{
	float:right;
	margin:20px 0 0 0;
}
#contents .inner ul a{
	margin:0;
	padding:0;
}
#contents .recipeList{
	display: block;
	overflow:hidden;
	background-color:#efe3c9;
	margin:0;
	padding:10px;
}
#contents .recipeList span{
	margin:0 3px 0 0;
	float:left;
}
#contents .recipeList span.last{
	width:290px;
	margin:0 10px 0 31px;
}
#contents .recipeList span dl{
	margin:28px 0 0 0;
}
#contents .recipeList span dt{
	margin:0;
}
#contents .recipeList span dt p{
	margin:10px 0 0 0;
}
#contents .recipeList span dd{
	margin:9px 0 0 0;
	text-align:right;
	overflow:hidden;
}
#contents .recipeList {
	color:#5F4E44;
	text-decoration:none;
	margin:0 0 39px 0;
}

/* social */
/*
div.socialBtnBlock{
	position:static;
	width:auto;
	margin:10px 0 0 0;
}
*/

div.socialBtnBlock ul{
	margin:0;
	padding:0;
}
div.socialBtnBlock ul li{
/*	margin-left:6px;*/
}
/* valentineMenu */
#contentsMain .valentineMenu{
	margin:14px 0 68px 0;
	padding:0;
	overflow:hidden;
	zoom:1;
}
#contentsMain .valentineMenu li{
	float:left;
}
#contentsMain .valentineMenu li.mR{
	margin-right:32px;
}

/* listUl */
#contentsMain .listUl{
	margin-bottom: 35px;
	overflow:hidden;
	zoom:1;
}
#contentsMain .listUl li{
	float:left;
}
/* margin */
.mb15{
	margin-bottom:15px!important;
}
.mb20{
	margin-bottom:20px!important;
}

#active13.section02,
#active14.section02,
#active15.section02,
#active16.section02 {
	position: relative;
	cursor: pointer;
}
.newContents #active13.section02.heading2Img,
.newContents #active14.section02.heading2Img,
.newContents #active15.section02.heading2Img,
.newContents #active16.section02.heading2Img {
	margin: 0;
}

#active13.section02 img.txt {
	position: absolute;
	bottom: 30px;
	right: 30px;
}
#active14.section02 img.txt {
	position: absolute;
	top: 140px;
	right: 50px;
}
#active15.section02 img.txt {
	position: absolute;
	top: 130px;
	left: 170px;
}
#active16.section02 img.txt {
	position: absolute;
	top: 130px;
	left: 90px;
}

/* 13springP1 */
#contents h1.section02{
	margin:0;
}

#contents .section03 .rightTxtBox{
	width:252px;
	padding-top:4px;
	float:right;
}

#contents .section02 h2{
	margin:0 0 17px 0;
}

#contents .section02 h3{
	margin:0 0 29px 0;
}

#contents .section02 h4{
	margin:0 0 9px 0;
}

#contents .section02 ul.roast{
	overflow:hidden;
}

#contents .section02 ul.roast li{
	float:left;
}

#contents .section02 .col2 dl dt{
	margin-right:25px;
}

#contents .section02 .col2 dl dd a{
/*	margin-top:12px;*/
}

#contents .recipeList span dd {
	margin-top: 20px;
}


/*============================
 130403 add
============================*/
#contents .section02 h3.ttlImg{
	margin:6px 0 25px 0;
}
div.col.custom {
margin-bottom: 40px;
}
div.col.custom div.col2 a {
width: 435px;
/*height: 143px;*/
display: block;
text-decoration: none;
}
div.col.custom div.col2 a img {
float: left;
}
div.col.custom div.col2 a span {
font-size: 1em;
line-height: 1.7;
float: right;
display: block;
width: 261px;
}
div.col.custom div.col2 a span.list_title {
font-size: 100%;
font-weight: bold;
}
div.col.custom div.col2 a span.list_txt {
margin-top: 10px;
}
div.col.custom div.col2 a span.list_link {
line-height: 1;
margin-top: 15px;
margin-right: -14px;
padding-left: 14px;
background: url("/common/images/arrow-normal.gif") no-repeat scroll left center transparent;
}
div.col.custom div.col2 a:hover span.list_title,
div.col.custom div.col2 a:hover span.list_txt {
color: #5F4E44;
}
div.col.custom div.col2 a:hover span.list_link {
line-height: 1;
margin-top: 15px;
margin-right: -14px;
padding-left: 14px;
background: url("/common/images/arrow-normal-on.gif") no-repeat scroll left center transparent;
}

/*============================
 2013springp2
============================*/
div.col div.recipe a {
height: 143px;
}
#contents .section02 h3 {
margin: 0 0 10px;
}
#contents .recipeList {
padding:24px;
}
div.col.custom {
margin-bottom: 60px;
}
#contents .section02 h3.ttlImg {
margin: 35px 0 40px;
}
#contents .scrollWrap {
padding: 25px 0;
}
#contents .leftTxt {
width: 590px;
}
div.col.custom {
margin-bottom: 35px;
}
div.col.custom div.col2 a span {
width: 270px;
}
div.col.custom div.col2 a span.list_txt {
margin-top: 16px;
}
div.col.custom div.col2 a span.list_link {
margin-top: 23px;
}
div.col.custom div.col2 a:hover span.list_link {
margin-top: 23px;
}
#contents .contentsIn #contentsWrapper {
margin-bottom: 18px;
}
.popupElement a:link{
text-decoration:underline;
}
/** popupのリンク設定 **/
.popupElement a:hover{
text-decoration:underline;
color:#64B72F;
}
div.col.custom div.recipeBnr {
margin-top: 26px;
}
.leftTxt .arrow {
margin-top: 10px;
}
/** printボタン追加 **/
.popupElement .item {
clear: both;
overflow: hidden;
position: relative;
width: 700px;
}
.popupElement .item .btns {
bottom: 0;
position: absolute;
right: 5px;
}
.popupElement .item .btns ul li i{
font-size:0;
}
.popupElement .item .btns ul li.mixiBtn {
margin-left: 5px;
vertical-align: bottom;
}
.popupElement .item .btns ul li.facebookBtn2 {
margin-left: 5px;
vertical-align: bottom;
}
.popupElement .item .btns ul li.print-trigger{
margin-left: 5px;
}

/*============================
 2013FallP1
============================*/
#contents .scrollWrapTop{
padding: 0;
position: relative;
}
#contents .scrollWrapTop h1{
position: absolute;
top: 58px;
left: 50px;
}
#contents .scrollWrapTop .lead{
position: absolute;
top: 230px;
left: 50px;
}
#contents .scrollWrapTop .kvLink{
position: absolute;
bottom: 55px;
left: 341px;
}
#contents .kvWrap{
cursor: pointer;
}
div.socialBtnBlock{
position: absolute;
bottom: 33px;
margin: 0;
left: 48px;
right: auto;
top: auto;
width: auto;
}
.imgArea{
background: url(/coffee/images/bg_13fallp1-pc-wall.jpg) left top transparent;
margin-bottom: 15px;
position: relative;
}
.imgArea .mermaidImg{
position: absolute;
top: 21px;
right: -29px;
}
.imgArea h2{
padding-bottom: 13px;
padding-left: 50px;
padding-top: 62px;
}
#contents .imgArea .scrollWrap{
padding: 0;
}
#contents .imgArea .sweetsImg{
background: url(/coffee/images/bg-13fallp1-pc-sweetsimg.png) no-repeat left 2px transparent;
overflow: hidden;
padding: 18px 264px 27px 38px;
}
#contents .imgArea .sweetsImg .leftTxt{
color: #3b2026;
font-size: 12px;
margin-left: 27px;
margin-top: 3px;
width: 573px;
}
#contents .imgArea .sweetsImg .leftTxt .txtImgLink{
margin-top: 14px;
}
#contents .imgArea .sweetsImg .leftTxt a,
#contents .imgArea .sweetsImg .leftTxt a:link,
#contents .imgArea .sweetsImg .leftTxt a:visited,
#contents .imgArea .sweetsImg .leftTxt a:hover{
color: #3b2026;
}
#contents .imgArea .pressImg{
background: url(/coffee/images/bg-13fallp1-pc-pressimg.png) no-repeat left 11px transparent;
overflow: hidden;
padding: 25px 33px 10px 180px;
}
#contents .imgArea .pressImg .leftTxt{
color: #3b2026;
font-size: 12px;
margin-left: 28px;
margin-top: 2px;
width: 655px;
float: none;
}
#contents .imgArea .pressImg .leftTxt .txtImgLink{
margin-top: 13px;
}
#contents .imgArea .pressImg .leftTxt a,
#contents .imgArea .pressImg .leftTxt a:link,
#contents .imgArea .pressImg .leftTxt a:visited,
#contents .imgArea .pressImg .leftTxt a:hover{
color: #3b2026;
}
.newContents .pressImg ul.listInline a,
.newContents .pressImg ul.listInline a:link,
.newContents .pressImg ul.listInline a:visited{
color: #3b2026;
}
/*
.newContents .pressImg ul.listInline a:hover{
text-decoration: underline;
}
*/
#contents .imgArea .pressImgLink{
position: relative;
}
#contents .imgArea .pressImgLink .outLink{
position: absolute;
bottom: 0;
left: 13em;
}
#contents .imgArea .mugImg{
background: url(/coffee/images/bg-13fallp1-pc-mugimg.png) no-repeat left 4px transparent;
overflow: hidden;
padding: 46px 38px 45px 50px;
width: auto;
}
#contents .imgArea .mugImg .imgL{
margin-right: 5px;
}
.newContents .imgArea .mugImg .withImgCol{
margin-bottom: 0;
}
#contents .imgArea .mugImg .txtR{
color: #3b2026;
font-size: 12px;
margin-top: 109px;
}
#contents .imgArea .mugImg .txtR p{
margin-bottom: 0;
}
#contents .imgArea .mugImg .txtR .txtImgLink{
margin-bottom: 0;
margin-top: 20px;
}
#contents .imgArea .mugImg a,
#contents .imgArea .mugImg a:link,
#contents .imgArea .mugImg a:visited,
#contents .imgArea .mugImg a:hover{
color: #3b2026;
}
#contentsMain .scrollWrap.recipe{
padding-top: 20px;
}
#contentsMain .scrollWrap.listUl{
padding-top: 20px;
}
.newContents .imgArea  .arrow a{
background: url(/coffee/images/arrow-13fallp1-normal.gif) no-repeat left 0.3em
}
#contents .imgArea .blendAreaLink {
cursor: pointer;
}


/*======================================
 2013FallP2  FallP2終了時に削除
======================================*/
#contents .fallp2-2013 .section {
margin-bottom: 70px;
position:relative;
zoom: 1;
}
#contents .fallp2-2013 .section:after {
content: "";
display: block;
clear: both;
}
#contents .fallp2-2013 .section .inner {
float: none;
overflow: hidden;
position:relative;
zoom: 1;
}
#contents .fallp2-2013 .section .inner:after {
content: "";
display: block;
clear: both;
}
#contents .fallp2-2013 .section div.socialBtnBlock {
position: absolute;
top: 388px;
left: 28px;
right: auto;
bottom: auto;
}
#contents .fallp2-2013 .section div.socialBtnBlock ul {
font-size: 0;
line-height: 0;
}
#contents .fallp2-2013 .section div.socialBtnBlock ul li {
margin-left: 0;
margin-right: 6px;
}
#contents .fallp2-2013 .section h1 {
margin-bottom: 27px;
}
#contents .fallp2-2013 .section .inner.origami {
margin-left: -20px;
margin-bottom: 50px;
}
#contents .fallp2-2013 .section .inner.origami p {
margin-left: 20px;
float: left;
}
#contents .fallp2-2013 .section .inner.coffee {
width: 823px;
margin: auto;
padding-left: 26px;
}
#contents .fallp2-2013 .section .inner.coffee ul {
margin-top: 40px;
float: none;
}
#contents .fallp2-2013 .section .inner.coffee ul li {
float: left;
margin-left: 1px;
}
#contents .fallp2-2013 .section .inner.coffee ul li:first-child{
margin-left: 0;
}
#contents .fallp2-2013 .section h2 {
}
#contents .fallp2-2013 .section h2 img {
}
#contents .fallp2-2013 .section .inner.irekata {
width: 450px;
background: url(/coffee/images/bdr-13fallp2-pc-01.gif) repeat-y right transparent;
margin-top: 40px;
float: left;
}
#contents .fallp2-2013 .section .inner.irekata ul {
width: 376px;
margin-top: 23px;
margin-left: 22px;
float: none;
}
#contents .fallp2-2013 .section .inner.irekata ul li {
margin-top: 15px;
}
#contents .fallp2-2013 .section .inner.irekata ul li dl {
position: relative;
zoom: 1;
}
#contents .fallp2-2013 .section .inner.irekata ul li dl:after {
content: "";
display: block;
clear: both;
}
#contents .fallp2-2013 .section .inner.irekata ul li dl dt {
margin-left: 20px;
float: right;
}
#contents .fallp2-2013 .section .inner.irekata ul li dl dd {
width: 270px;
padding-left: 20px;
float: left;
}
#contents .fallp2-2013 .section .inner.irekata ul li dl dd.no1 {
margin-top: 10px;
background: url(/coffee/images/no-13fallp2-pc-01.gif) no-repeat left 0.25em transparent;
}
#contents .fallp2-2013 .section .inner.irekata ul li dl dd.no2 {
background: url(/coffee/images/no-13fallp2-pc-02.gif) no-repeat left 0.25em transparent;
}
#contents .fallp2-2013 .section .inner.irekata ul li dl dd.no3 {
margin-top: 8px;
background: url(/coffee/images/no-13fallp2-pc-03.gif) no-repeat left 0.25em transparent;
}
#contents .fallp2-2013 .section .inner.gift {
width: 413px;
margin-top: 40px;
padding-left: 37px;
background: url(/coffee/images/img-13fallp2-pc-gift01.png) no-repeat right top transparent;
float: right;
}
#contents .fallp2-2013 .section .inner.gift .inner {
min-height: 206px;
margin-top: 34px;
padding-left: 10px;
padding-right: 10px;
}
#contents .fallp2-2013 .section .inner.gift .assortBox {
margin-top: 70px;
position: relative;
zoom: 1;
}
#contents .fallp2-2013 .section .inner.gift .assortBox:after {
content: "";
display: block;
clear: both;
}
#contents .fallp2-2013 .section .inner.gift .assortBox p.img {
float: left;
}
#contents .fallp2-2013 .section .inner.gift .assortBox .assortTxt {
position: absolute;
right: 0;
bottom: 0;
}
#contents .fallp2-2013 .section .inner.gift .assortBox .assortTxt p a {
font-size: 84%;
margin-top: 5px;
padding-top: 1px;
}
#contents .fallp2-2013 .section .inner.bnr {
margin-left: -29px;
}
#contents .fallp2-2013 .section .inner.bnr p {
float: left;
margin-top: 40px;
margin-left: 29px;
}
#contents .fallp2-2013 .section .inner.bnr p:first-child {
margin-top: 0px;
}