@charset "utf-8";

/*-----------------------------------------------------
Calender
-------------------------------------------------------*/
#Calender{
	width:100%;
	height:660px;
	position:relative;
	background:url("../images/calender/pc_bg.gif") repeat 0 0;
}
/* sprite_img */
#Calender p.month_btn a,
#Calender p.detail_btn a,
#Calender div.detail,
#Calender div.detail p.close a,
#Calender div.detail ul.pager li.prev a,
#Calender div.detail ul.pager li.next a,
#Calender div.detail div.info p.ttl{
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background-image:url("../images/calender/pc_detail_sprite.png");
	background-repeat:no-repeat;
	background-position:0 0;
}

/* hidden */
#Calender p.month_btn,
#Calender p.detail_btn,
#Calender div.detail,
#Calender div.month_list{visibility:hidden;}


/*-------------------------------------
photo
---------------------------------------*/
#Calender div.photo{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	z-index:1;
}
/* img01, img02 */
#Calender div.photo p.img01,
#Calender div.photo p.img02{
	height:100%;
	position:absolute;
	top:0;
	left:50%;
	/*
	-webkit-transform:translate(-50%, 0);
	transform:translate(-50%, 0);
	*/
	margin:0 0 0 -500px;
}
#Calender div.photo p.img01{z-index:2;}
#Calender div.photo p.img02{z-index:3;}
#Calender div.photo p.img01 img,
#Calender div.photo p.img02 img{width:auto;height:100%;}

/* mask */
#Calender div.photo div.mask{
	width:100%;
	min-width:1000px;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:url("../common/images/header_pc_bg.png") repeat-x 0 -70px;
	z-index:4;
}


/*-------------------------------------
month_btn
---------------------------------------*/
#Calender p.month_btn{
	width:232px;
	height:42px;
	position:absolute;
	top:0;
	left:50%;
	margin:0 0 0 228px;
	z-index:30;
}
#Calender p.month_btn a{
	width:232px;
	height:42px;
	background-position:0 0;
}
#Calender p.month_btn a:hover{
	background-position:0 -44px;
}


/*-------------------------------------
detail_open
---------------------------------------*/
#Calender p.detail_btn{
	width:212px;
	height:115px;
	position:absolute;
	top:0;
	left:50%;
	margin:0 0 0 238px;
	z-index:20;
}
#Calender p.detail_btn a{
	width:212px;
	height:115px;
	background-position:0 -784px;
}
#Calender p.detail_btn a:hover{
	background-position:0 -899px;
}


/*-------------------------------------
detail
---------------------------------------*/
#Calender div.detail{
	width:232px;
	height:493px;
	overflow:visible;
	position:absolute;
	top:0;
	left:50%;
	margin:0 0 0 228px;
	text-indent:0;
	background-position:0 -88px;
	z-index:10;
}


/* close
---------------------*/
#Calender div.detail p.close{
	width:32px;
	height:26px;
	position:absolute;
	top:127px;
	right:15px;
	z-index:11;
}
#Calender div.detail p.close a{
	width:32px;
	height:26px;
	background-position:0 -583px;
}
#Calender div.detail p.close a:hover{
	background-position:0 -611px;
}

/* date
---------------------*/
#Calender div.detail p.date{
	width:102px;
	height:102px;
	position:absolute;
	top:85px;
	left:-55px;
	background:url("../images/calender/pc_detail_date_bg.png") no-repeat 0 0;
	z-index:12;
	-webkit-transform:scale(0, 0);
	transform:scale(0, 0);
	-webkit-transform-origin:right bottom;
	transform-origin:right bottom;
	-webkit-transition:all 250ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition:all 250ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}
#Calender div.detail.show p.date{
	-webkit-transform:scale(1, 1);
	transform:scale(1, 1);
}
#Calender div.detail p.date span{
	display:block;
	position:absolute;
	overflow:hidden;
	text-indent:-9999px;
	background-image:url("../images/calender/pc_detail_date_img.gif");
	background-repeat:no-repeat;
	background-position:100% 100%;
}
#Calender div.detail p.date span.year{width:36px;height:10px;top:19px;left:25px;}
#Calender div.detail p.date span.month{width:19px;height:9px;top:20px;left:61px;}
#Calender div.detail p.date span.day{width:52px;height:27px;top:36px;left:22px;}
#Calender div.detail p.date span.week{width:34px;height:12px;top:71px;left:34px;}

#Calender div.detail p.date span.y2010{background-position:0 0;}
#Calender div.detail p.date span.y2011{background-position:0 -10px;}
#Calender div.detail p.date span.y2012{background-position:0 -20px;}
#Calender div.detail p.date span.y2013{background-position:0 -30px;}
#Calender div.detail p.date span.y2014{background-position:0 -40px;}
#Calender div.detail p.date span.y2015{background-position:0 -50px;}
#Calender div.detail p.date span.y2016{background-position:0 -60px;}
#Calender div.detail p.date span.y2017{background-position:0 -70px;}
#Calender div.detail p.date span.y2018{background-position:0 -80px;}
#Calender div.detail p.date span.y2019{background-position:0 -90px;}
#Calender div.detail p.date span.y2020{background-position:0 -100px;}

#Calender div.detail p.date span.m01{background-position:-36px 0;}
#Calender div.detail p.date span.m02{background-position:-36px -9px;}
#Calender div.detail p.date span.m03{background-position:-36px -18px;}
#Calender div.detail p.date span.m04{background-position:-36px -27px;}
#Calender div.detail p.date span.m05{background-position:-36px -36px;}
#Calender div.detail p.date span.m06{background-position:-36px -45px;}
#Calender div.detail p.date span.m07{background-position:-36px -54px;}
#Calender div.detail p.date span.m08{background-position:-36px -63px;}
#Calender div.detail p.date span.m09{background-position:-36px -72px;}
#Calender div.detail p.date span.m10{background-position:-36px -81px;}
#Calender div.detail p.date span.m11{background-position:-36px -90px;}
#Calender div.detail p.date span.m12{background-position:-36px -99px;}

#Calender div.detail p.date span.d01{background-position:-55px 0;}
#Calender div.detail p.date span.d02{background-position:-55px -27px;}
#Calender div.detail p.date span.d03{background-position:-55px -54px;}
#Calender div.detail p.date span.d04{background-position:-55px -81px;}
#Calender div.detail p.date span.d05{background-position:-55px -108px;}
#Calender div.detail p.date span.d06{background-position:-55px -135px;}
#Calender div.detail p.date span.d07{background-position:-55px -162px;}
#Calender div.detail p.date span.d08{background-position:-55px -189px;}
#Calender div.detail p.date span.d09{background-position:-55px -216px;}
#Calender div.detail p.date span.d10{background-position:-55px -243px;}
#Calender div.detail p.date span.d11{background-position:-55px -270px;}
#Calender div.detail p.date span.d12{background-position:-55px -297px;}
#Calender div.detail p.date span.d13{background-position:-55px -324px;}
#Calender div.detail p.date span.d14{background-position:-55px -351px;}
#Calender div.detail p.date span.d15{background-position:-55px -378px;}
#Calender div.detail p.date span.d16{background-position:-55px -405px;}
#Calender div.detail p.date span.d17{background-position:-55px -432px;}
#Calender div.detail p.date span.d18{background-position:-55px -459px;}
#Calender div.detail p.date span.d19{background-position:-55px -486px;}
#Calender div.detail p.date span.d20{background-position:-55px -513px;}
#Calender div.detail p.date span.d21{background-position:-55px -540px;}
#Calender div.detail p.date span.d22{background-position:-55px -567px;}
#Calender div.detail p.date span.d23{background-position:-55px -594px;}
#Calender div.detail p.date span.d24{background-position:-55px -621px;}
#Calender div.detail p.date span.d25{background-position:-55px -648px;}
#Calender div.detail p.date span.d26{background-position:-55px -675px;}
#Calender div.detail p.date span.d27{background-position:-55px -702px;}
#Calender div.detail p.date span.d28{background-position:-55px -729px;}
#Calender div.detail p.date span.d29{background-position:-55px -756px;}
#Calender div.detail p.date span.d30{background-position:-55px -783px;}
#Calender div.detail p.date span.d31{background-position:-55px -810px;}

#Calender div.detail p.date span.w01{background-position:-107px 0px;}
#Calender div.detail p.date span.w02{background-position:-107px -12px;}
#Calender div.detail p.date span.w03{background-position:-107px -24px;}
#Calender div.detail p.date span.w04{background-position:-107px -36px;}
#Calender div.detail p.date span.w05{background-position:-107px -48px;}
#Calender div.detail p.date span.w06{background-position:-107px -60px;}
#Calender div.detail p.date span.w07{background-position:-107px -72px;}

/* pager
---------------------*/
#Calender div.detail ul.pager{
	width:100%;
	position:absolute;
	top:153px;
	right:0;
}
/* prev */
#Calender div.detail ul.pager li.prev{
	width:108px;
	height:35px;
	position:absolute;
	top:300px;
	right:117px;
}
#Calender div.detail ul.pager li.prev a{
	width:108px;
	height:35px;
	background-position:0 -713px;
	cursor:default;
}
#Calender div.detail ul.pager li.prev a.on{background-position: 0 -639px;cursor:pointer;}
#Calender div.detail ul.pager li.prev a.on:hover{background-position: 0 -676px;}

/* next */
#Calender div.detail ul.pager li.next{
	width:108px;
	height:35px;
	position:absolute;
	top:300px;
	right:9px;
}
#Calender div.detail ul.pager li.next a{
	width:108px;
	height:35px;
	background-position:-108px -713px;
	cursor:default;
}
#Calender div.detail ul.pager li.next a.on{background-position:-108px -639px;cursor:pointer;}
#Calender div.detail ul.pager li.next a.on:hover{background-position:-108px -676px;}

/* info
---------------------*/
#Calender div.detail div.info{
	width:200px;
	position:absolute;
	top:170px;
	right:15px;
}
/* ttl */
#Calender div.detail div.info p.ttl{
	width:203px;
	height:30px;
	margin:0 auto 15px;
	background-position:0 -750px;
}
/* name,sex,type,master */
#Calender div.detail div.info p.name,
#Calender div.detail div.info p.sex,
#Calender div.detail div.info p.type,
#Calender div.detail div.info p.master{
	height:22px;
	overflow:hidden;
	margin:0 0 5px 0;
	white-space:nowrap;
	text-overflow:ellipsis;
	line-height:22px;
	font-size:92%;
	text-indent:50px;
	background-position:0 0;
	background-repeat:no-repeat;
}
#Calender div.detail div.info p.name{background-image:url("../images/calender/detail_info_pc_txt01.gif");}
#Calender div.detail div.info p.sex{background-image:url("../images/calender/detail_info_pc_txt02.gif");}
#Calender div.detail div.info p.type{background-image:url("../images/calender/detail_info_pc_txt03.gif");}
#Calender div.detail div.info p.master{background-image:url("../images/calender/detail_info_pc_txt04.gif");}
/* comment */
#Calender div.detail div.info div.comment{
	width:100%;
	height:112px;
	overflow:auto;
	margin:10px 0 0 0;
}
#Calender div.detail div.info div.comment p{
	padding:0 2px 0 2px;
	line-height:24px;
	background:url("../images/calender/pc_detail_comment_bg.gif") repeat 0 0;
}
#Calender div.detail div.info div.comment p.title{
	font-weight:bold;
	color:#593C27;
}


/*-------------------------------------
month_list
---------------------------------------*/
#Calender div.month_list{
	width:652px;
	position:absolute;
	top:120px;/* 60px */
	left:50%;
	margin:0 0 0 -326px;
	padding:86px 0 0 0;
	background:url("../images/calender/pc_month_bg_top.png") no-repeat 0 0;
	z-index:40;
}
#Calender div.month_list div.inline{
	width:100%;
	padding:0 0 26px 0;
	background:url("../images/calender/pc_month_bg_bottom.png") no-repeat 0 100%;
}
#Calender div.month_list p.close a,
#Calender div.month_list ul.pager li.prev a,
#Calender div.month_list ul.pager li.next a,
#Calender div.month_list div.table ul li span,
#Calender div.month_list div.table div.over span{
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background-image:url("../images/calender/pc_month_btn.png");
	background-repeat:no-repeat;
	background-position:0 0;
}

/* close
---------------------*/
#Calender div.month_list p.close{
	width:32px;
	height:27px;
	position:absolute;
	top:2px;
	right:19px;
}
#Calender div.month_list p.close a{
	width:32px;
	height:27px;
	display:block;
	background-position:-33px 0;
}
#Calender div.month_list p.close a:hover{background-position:0 0;}

/* pager
---------------------*/
#Calender div.month_list ul.pager{
	width:176px;
	height:17px;
	overflow:hidden;
	position:absolute;
	top:17px;
	left:241px;
}
/* prev */
#Calender div.month_list ul.pager li.prev{
	width:19px;
	height:17px;
	position:absolute;
	top:0;
	left:0;
}
#Calender div.month_list ul.pager li.prev a{
	width:19px;
	height:17px;
	cursor:default;
	background-position:-20px -46px;
}
#Calender div.month_list ul.pager li.prev a.on{
	background-position:0 -46px;
	cursor:pointer;
}
#Calender div.month_list ul.pager li.prev a.on:hover{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}
/* date */
#Calender div.month_list ul.pager li.date{
	width:100%;
	height:17px;
	text-align:center;
	line-height:17px;
	font-weight:bold;
	color:#7D6756;
}
/* next */
#Calender div.month_list ul.pager li.next{
	width:19px;
	height:17px;
	position:absolute;
	top:0;
	right:0;
}
#Calender div.month_list ul.pager li.next a{
	width:19px;
	height:17px;
	cursor:default;
	background-position:-20px -28px;
}
#Calender div.month_list ul.pager li.next a.on{
	background-position:0 -28px;
	cursor:pointer;
}
#Calender div.month_list ul.pager li.next a.on:hover{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}

/* table
---------------------*/
#Calender div.month_list div.table{
	width:100%;
	background:url("../images/calender/pc_month_bg.png") repeat-y 0 0;
}
#Calender div.month_list div.table ul{
	width:592px;
	overflow:hidden;
	margin:0 0 0 29px;
}
#Calender div.month_list div.table ul li{
	width:82px;
	height:50px;
	position:relative;
	overflow:hidden;
	float:left;
	display:inline;
	margin:0 3px 3px 0;
}
#Calender div.month_list div.table ul li.right{margin:0;}
#Calender div.month_list div.table ul li img{width:82px;height:auto;}
#Calender div.month_list div.table ul li strong,
#Calender div.month_list div.table ul li span{
	width:82px;
	height:50px;
	display:block;
	position:absolute;
	top:0;
	left:0;
	line-height:50px;
	text-align:center;
	font-size:84%;
	color:#7D6756;
}
#Calender div.month_list div.table ul li span{background-position:0 -64px;z-index:46;}
#Calender div.month_list div.table ul li a strong{color:#FFFFFF;z-index:47;}
#Calender div.month_list div.table ul li.not strong{color:#D8D1CC;}
#Calender div.month_list div.table ul li a{text-decoration:none;}

#Calender div.month_list div.table div.over{
	width:105px;
	height:81px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	text-indent:0;
	cursor:pointer;
	z-index:48;
	visibility:hidden;
}
#Calender div.month_list div.table div.over img{
	width:95px;
	height:62px;
	margin:14px 5px 6px 5px;
}
#Calender div.month_list div.table div.over span{
	width:105px;
	height:81px;
	position:absolute;
	top:0;
	left:0;
	background-position:0 -115px;
	z-index:49;
}


/*-------------------------------------
loading
---------------------------------------*/
#Calender div.loading_bg{
	width:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(256,256,256,0.9);
	z-index:9;
}
#Calender div.loading_logo{
	width:400px;
	height:180px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	text-indent:-9999px;
	background-image:url("../images/calender/pc_loading.gif");
	background-repeat:no-repeat;
	background-position:50% 50%;
	-webkit-background-size:400px 180px;
	background-size:400px 180px;
	z-index:100;
}