@charset "UTF-8";

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

	FONT

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

body {
/*    font-family: 'ＭＳ Ｐゴシック',sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color:#1b507c;*/
}

strong{
font-weight: bold;
}

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

	COMMON

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

/**{
outline: none;
}

html{
overflow-x : hidden;
overflow-y : auto;
}*/


li{
list-style: none;
}

.logo{
width:100%;
text-align: center;
}


.gridLeft{
float:left;
display: inline;
}

.gridRight{
float:right;
display: inline;
}




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

	clearfix

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

.clearfix{
width:100%;
}

.clearfix:after{
content: ""; 
display: block; 
clear: both;
}

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

	CONTENTS

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

#wrapper-1year_birthday{
background: url("../img/bg_top.png") no-repeat center top;
width:100%;
    font-family: 'ＭＳ Ｐゴシック',sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color:#1b507c;
}

#wrapper-1year_birthday .bg1{
background: url("../img/bg_mdl.png") no-repeat center bottom;
width:100%;
}

#wrapper-1year_birthday .bg2{
background: url("../img/bg_btm.png") repeat-x center bottom;
width:100%;
}


#container{
width:960px;
margin:0 auto;
}


/* === header === */

#header-1year_birthday{
background: url("../img/bg_header.png") no-repeat center 105px;
width:960px;
position:relative;
height:600px;
}

#header-1year_birthday .logo{
padding:30px 0 0 0;
}

#header-1year_birthday #cakePlate{
background: url("../img/title_header_cake.png") no-repeat 0 0;
width:260px;
height:150px;
position: absolute;
top:100px;
left:-25px;
z-index:10;
}

#header-1year_birthday #cakePhoto{
background: url("../img/img_header_cake.png") no-repeat 0 0;
width:448px;
height:376px;
position: absolute;
top:150px;
left:30px;
z-index:1;
}

#header-1year_birthday a#cakePhoto:hover,
#header-1year_birthday a#cakePhoto:active{
background: url("../img/img_header_cake_on.png");
}

#header-1year_birthday #ribbon{
position: absolute;
top:110px;
right:0;
z-index:1;
}


#header-1year_birthday #mainTitle{
position: absolute;
top:180px;
right:55px;
z-index:1;
}

#header-1year_birthday a#cakeRecipe{
background: url("../img/btn_header_recipe.png") no-repeat 0 0;
width:576px;
height:333px;
position: absolute;
top:260px;
right:-105px;
z-index:2;
display:block;
}

#header-1year_birthday a#cakeRecipe:hover,
#header-1year_birthday a#cakeRecipe:active{
background: url("../img/btn_header_recipe_on.png");
}


#header-1year_birthday #headerProduct{
position: absolute;
bottom:-10px;
left:-20px;
z-index:100;
}


/* === contents === */

#contents{
background: url("../img/bg_contents_mdl.gif") repeat-y center top;
width:960px;
margin:20px auto 0;
padding:0;
}

#contents .bg1{
background: url("../img/bg_contents_top.gif") no-repeat center top;
padding:20px 0 0 0;
width:960px;
}

#contents .bg2{
background: url("../img/bg_contents_btm.gif") no-repeat center bottom;
padding:20px 0 20px 0;
width:960px;
}



/* === content1,content2,content3 === */

#content1,
#content2{
margin: 0 auto 40px;
}

#content3{
position: relative;
margin:0 auto;
height: 440px;
}

#content1 h2,
#content2 h2,
#content3 h2{
width:940px;
margin: 0 auto 20px;
}

#content1 p,
#content2 p,
#content3 p{
margin: 0 0 20px 0;
}

#content1 .inner,
#content2 .inner,
#content3 .inner{
width:820px;
margin: 0 auto;
}

#content1 .gridLeft,
#content2 .gridLeft,
#content3 .gridLeft{
width:520px;
}

#content1 .gridRight,
#content2 .gridRight{
width:280px;
}

#content3 .gridRight{
float: none;
position: absolute;
top:70px;
right:-30px;
}

a#linkProduct1,
a#linkProduct2{
background:url("../img/btn_content2_product.png");
width:362px;
height:78px;
display:block;
}

a#linkProduct1:hover,
a#linkProduct1:active,
a#linkProduct2:hover,
a#linkProduct2:active{
background:url("../img/btn_content2_product_on.png");
}

a#linkProduct3{
background:url("../img/btn_content2_product2.png");
width:362px;
height:78px;
display:block;
}

a#linkProduct3:hover,
a#linkProduct3:active{
background:url("../img/btn_content2_product2_on.png");
}

/* === recipe === */

#recipe{
background:url("../img/bg_recipe_mdl.png") repeat-y center top;
margin:0 0 40px 0;
}
#recipe .bg1{
background:url("../img/bg_recipe_top.png") no-repeat center top;
}
#recipe .bg2{
background:url("../img/bg_recipe_btm.png") no-repeat center bottom;
}
#recipe .inner{
width:820px;
margin:-40px auto 0;
padding:60px 0 0 0;
background:url("../img/bg_recipe_texture.gif") repeat 0 0;
position: relative;
}
#recipe #recipeDecoration{
position: absolute;
top:-10px;
left:-5px;
}
#recipe h2{
text-align: center;
margin:0 0 40px 0;
}
#recipeMaterials,
#recipeCooking{
width:740px;
margin:0 auto 20px;
}
#recipeMaterials .gridLeft{
float:left;
display: inline;
width:360px;
}
#recipeMaterials .gridLeft .picture{
margin:0 0 20px 0;
}
#recipeMaterials .gridRight{
float:right;
display: inline;
width:360px;
}

#recipeMaterials .gridRight li{
background: url("../img/bg_recipe_dotted.gif") repeat-x left bottom;
padding:2px 0 2px 20px;
display: block;
}

#recipeMaterials .gridRight dt.underLine{
border-bottom:2px solid #80c5ff;
margin:0 0 10px 0;
}

#recipeMaterials .gridRight dd{
margin:0 0 20px 0;
}

#recipeCooking h3{
margin:0 0 20px 0;
}

#recipeCooking h4{
margin:0 0 10px 0;
}

#recipeCooking li{
width:740px;
background: url("../img/bg_recipe_dotted.gif") repeat-x left bottom;
padding:0 0 20px 0;
margin:0 0 20px 0;
}

#recipeCooking .gridLeft{
float:left;
display: inline;
width:480px;
}

#recipeCooking .gridRight{
float:right;
display: inline;
width:240px;
}

#recipeCooking li.lastChild{
border-bottom:none;
position: relative;
background: none;
}

#recipeCooking li.lastChild .gridLeft{
float:left;
display: inline;
width:360px;
}

#shareBlock{
margin:20px 0 0 0;
/*background: url("../img/bg_recipe_share.png") no-repeat 0 65px;*/
display: block;
position: relative;
height:150px;
}

#shareBlock li{
margin: 0;
padding:0;
background: none;
border: none;
display: block;
}

#shareBlock li#twBtn{
position: absolute;
top:60px;
left:30px;
}

#shareBlock li#fbBtn{
position: absolute;
top:60px;
left:160px;
}

#shareBlock li#mixiBtn{
position: absolute;
top:90px;
left:30px;
}

#shareBlock li#mailBtn{
position: absolute;
top:90px;
left:130px;
}

#recipeCooking li.lastChild .gridRight{
position: absolute;
top:-40px;
left:380px;
}

#recipeCooking span{
vertical-align: middle;
line-height: 1;
padding:0 3px 0 0;
}
#recipeCooking span.notice,
span.notice {
    vertical-align: baseline;
    padding-right:0.5em;
}
#recipeLink{
background: url("../img/bg_recipe_link.png") no-repeat center top;
width:740px;
height:120px;
margin: 0 auto;
padding:0 30px 0;
position: relative;
}

#recipeLink h3{
position:absolute;
top:-10px;
left:20px;
}

#recipeLink p{
position:absolute;
top:20px;
right:20px;
}

a#recipeLinkBtn{
background:url("../img/btn_recipe_link.png");
width:327px;
height:75px;
display:block;
}

a#recipeLinkBtn:hover,
a#recipeLinkBtn:active{
background:url("../img/btn_recipe_link_on.png");
}


#footer{
width:900px;
height:340px;
margin: 0 auto;
}

#footer #katarina{
margin:20px 0;
}

#footer #katarina a:hover{
opacity:0.8;
}

#footer ul{
text-align: right;
display: block;
padding:0 0 20px 0;
}

#footer li{
float:right;
padding:0 0 0 20px;
}

#footer li a{
color:#80c5ff;
background: url("../img/icon_footer_arrow.png") no-repeat left center;
text-decoration: underline;
padding:0 0 0 18px;
font-size: 12px;
}

#footer li a:hover{
text-decoration: none;
}

#footer .logo p{
font-size: 10px;
}