@charset "UTF-8";
@-webkit-keyframes 
koyomi_border {
0% {
background-color:#fff;
color:#fff;
border:none;
}
 50% {
background-color:#09f;
color:#FFF;
}
 100% {
background-color:#fff;
color:#333;
border-bottom: 1px solid #09F;
}
}
 @-webkit-keyframes 
white {
0% {
background-color:#fff;
color:#fff;
border:none;
}
 70% {
background-color:#fff;
color:#FFF;
}
 100% {
background-color:#fff;
color:#333;
}
}

.main {
	/*margin-left: 0.5em;
	margin-bottom: 1em;
	margin-top: 1.5em;
	overflow:hidden;
	clear: both;*/
    position:relative;min-width:256px;max-width:600px;margin-left:auto;margin-right:auto;top:0.5em;clear:both;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out;padding-right:0.5em;padding-left:0.5em;padding-bottom:1em;height: 120px;
}

#calen {
	height: 100%;
width: 100%;
min-width: 256px;
max-width: 600px;
	/*height:320px;
	width: 320px;*/
	margin-right: auto;
	margin-left: auto;
}
#calen img{
	width: 100%;
min-width: 256px;
max-width: 600px;
	/*width:320px;*/}

#koyomi {
	float: right;
	width: 140px;
	/*height: 150px;*/
	text-align: right;
	margin-right: 0.5em;
	margin-top: 10px;
	font-size: 0.8rem;
letter-spacing: 0.04rem;
}

.month_k_mov {
	width:60px;
	height:60px;
	position:relative;
	-webkit-animation-name: month_mov;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	float:left;
}
ol{margin-top:.5em;margin-bottom:.5em;}
ol li{
	padding-left:1em;
	text-indent:-1em;
	list-style: inside;
}

#rokuyo {
	border-bottom: 1px solid #09F;
	-webkit-animation-name: koyomi_border;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

.white1 {
	-webkit-animation-name: white;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

.white2 {
	-webkit-animation-name: white;
	-webkit-animation-duration: 2.2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

.white3 {
	-webkit-animation-name: white;
	-webkit-animation-duration: 2.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

.white4 {
	-webkit-animation-name: white;
	-webkit-animation-duration: 2.7s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

#calen ul {
	display: -webkit-flex;
	-webkit-flex-direction:row;
	-webkit-flex-wrap: wrap;
	-webkit-align-items: center;
	font-family: 'Hiragino Mincho ProN', serif;
	height:100%;
}
@-webkit-keyframes 
text-mov {
 0% {
-webkit-transform: rotate(0deg);
}
 25% {
-webkit-transform: rotate(-5deg);
}
 50% {
-webkit-transform: translate(0px, 0px);
}
 55% {
-webkit-transform: translate(0px, -5px);
}
 60% {
-webkit-transform: translate(0px, 0px);
}
 75% {
-webkit-transform: rotate(5deg);
}
 100% {
-webkit-transform: rotate(0deg);
}
}
@-webkit-keyframes 
text-spotlight_2 {
 0% {
-webkit-mask-position: -200px;
}
 100% {
-webkit-mask-position: 70px;
}
}

#calen ul li {
	-webkit-flex:0 0 80px;
	line-height: 70px;
	-webkit-writing-mode: vertical-rl;
	font-size: 70px;
}
#calen ul li:nth-child(1) {
 -webkit-transform-origin: 50% 100%;
 -webkit-animation-timing-function:linear;
 -webkit-animation:text-mov 2.5s infinite;
}

#calen ul .mikuji_go {
	color:rgba(204, 0, 0, 1);
	-webkit-user-select:none;
	-webkit-mask-image:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(0.4, rgba(0, 0, 0, 0.3)), color-stop(0.49, rgba(0, 0, 0, 1)), color-stop(0.51, rgba(0, 0, 0, 1)), color-stop(0.6, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.3)));
	-webkit-mask-size:200px;
	-webkit-mask-repeat:repeat;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation:text-spotlight_2 5s infinite;
}