@charset "utf-8";
/* CSS Document */

/*　霞かかる松の和風庭園　*/

#matsu{	
	position:relative;
	display:block;
	width:100%;
	background: url(/image/event/january2018/garden/bg_all.png) repeat #f3c348;
}

#matsu_bg{	
	position:relative;
	display:block;
	width:100%;
	background: url(/image/event/january2018/garden/bg_kumo.png) repeat-x center 16px;
	margin: 0 auto;
	min-width: 1000px;
}

#matsu #title{
	position: relative;
	margin: 16px auto 0;
	width: 1000px;
	height: 235px;
	background: url(/image/event/january2018/garden/bg_title.png) no-repeat center top;
}

#matsu h2{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:1000px;
	height:0;
}

#matsu .menu_gaiyou{
	width:240px;
	height:54px;
	position:absolute;
	display:block;
	left:230px;
    top: 160px;
}

#matsu .menu_item{
	width:240px;
	height:54px;
	position:absolute;
	display:block;
	right: 230px;
    top: 160px;
}

#matsu #event01{
	width:1000px;
	height:558px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_gaiyou01.png) no-repeat center top;
	position:relative;
}

#matsu .event_txt01{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	position: absolute;
	top: -16px;
	background:url(/image/event/january2018/garden/txt_gaiyou01.png) no-repeat 10px top;
	width:1000px;
	height: 98px;
}

#matsu #event01 .goto_exterior{
	width:195px;
	height:18px;
	position:absolute;
	display:block;
	right: 100px;
    top: 146px;
}

#matsu #event02{
	width:1000px;
	height:190px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_gaiyou02.png) no-repeat center;
	position:relative;
}

#matsu .event_avatar01{
	width:231px;
	height:459px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/avatar_event01.png) no-repeat center;
	position:absolute;
	right: 24px;
	top: -272px;
	z-index: 2;
}

#matsu #event03{
	width:1000px;
	height:500px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_gaiyou03.png) no-repeat center;
	position:relative;
}

#matsu #event03 .goto_buy{
	width:467px;
	height:66px;
	position:absolute;
	display:block;
	left: 266px;
    bottom: 48px;
}

#matsu #event04{
	width:1000px;
	height:320px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_gaiyou04.png) no-repeat center top;
	position:relative;
}


#matsu #event04 p{
	position: absolute;
	left: 140px;
	top: 90px;
	color: #ffe6a7;
	line-height: 1.6em;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}

#matsu #item01{
	width:1000px;
	height:597px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_item01.png) no-repeat center top;
	position:relative;
}

#matsu #item01 .item_txt01{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	position: absolute;
	top: -16px;
	background:url(/image/event/january2018/garden/txt_item01.png) no-repeat 30px top;
	width:1000px;
	height: 81px;
}

#matsu #item01 .item_item01{
	width:297px;
	height:201px;
	background:url(/image/event/january2018/garden/img_item01.png) no-repeat left top;
	position:absolute;
	display:block;
	left: 180px;
	top: 180px;
	animation:
	anime_item01 3.1s steps(24) 0s normal infinite;
}

@keyframes anime_item01 {
  to {
    background-position: -7128px 0;
  }
}

#matsu #item01 .goto_buy{
	width:497px;
	height:66px;
	position:absolute;
	display:block;
	left: 80px;
    top: 520px;
}


#matsu #item02{
	width:1000px;
	height:501px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_item02.png) no-repeat center;
	position:relative;
}

#matsu #item02 .item_item02{
	width:238px;
	height:161px;
	background:url(/image/event/january2018/garden/img_item02.png) no-repeat left top;
	position:absolute;
	display:block;
	left: 120px;
	top: 250px;
	animation:
	anime_item02 3.1s steps(24) 0s normal infinite;
}

@keyframes anime_item02 {
  to {
    background-position: -5712px 0;
  }
}

#matsu #item03{
	width:1000px;
	height:226px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_item03.png) no-repeat center;
	position:relative;
}

#matsu #item03 img{
	width:224px;
	height:51px;
	position:absolute;
	display:block;
	left: 260px;
    top: 148px;
}

#matsu #item03 img.recipe_r{
	left: 660px;
}

#matsu #item04{
	width:1000px;
	height:510px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_item04.png) no-repeat;
	position:relative;
	overflow: hidden;
}

#matsu #item04 .item_txt02{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	position: absolute;
	top: 16px;
	background:url(/image/event/january2018/garden/txt_item02.png) no-repeat 14px top;
	width:1000px;
	height: 464px;
}

#matsu #item04 .item_avatar01{
	width:209px;
	height:383px;
	background:url(/image/event/january2018/garden/avatar_item01.png) no-repeat left top;
	position:absolute;
	display:block;
	right: -10px;
    top: 112px;
	animation:
	anime_item 1.4s steps(23) 0s normal infinite;
}

#matsu #item04 .item_avatar02{
	width:209px;
	height:383px;
	background:url(/image/event/january2018/garden/avatar_item02.png) no-repeat left top;
	position:absolute;
	display:block;
	right: 120px;
    top: 52px;
	animation:
	anime_item 1.4s steps(23) 0s normal infinite;
}

@keyframes anime_item {
  to {
    background-position: -4807px 0;
  }
}

#matsu #item05{
	width:1000px;
	height:320px;
	margin:0 auto;
	background:url(/image/event/january2018/garden/bg_gaiyou04.png) no-repeat center top;
	position:relative;
}


#matsu #item05 p{
	position: absolute;
	left: 140px;
	top: 90px;
	color: #ffe6a7;
	line-height: 1.6em;
	font-family: "Meiryo", "メイリオ","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
}

#matsu #item05 p.about_link{
	font-weight: bold;
	left: 680px;
	top: 184px;	
}

#matsu #item05 p.about_link a{
	color: #ffe6a7;
	font-family: "Meiryo", "メイリオ","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
}



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