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

/* base.css, part of YUI's CSS Foundation */
h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;  
}
h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%; 
}
h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;  
}
h1,h2,h3 {
	/* top & bottom margin based on font size */
	margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold; 
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
} 
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}
ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}
th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}
th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
p,fieldset,table {
	/*so things don't run into each other*/
	margin-bottom:1em;
}










#complete .mask {
    margin:0 auto;
    width:280px;
    height:100px;
    position:relative;
    cursor:pointer;
    overflow:hidden;
}
#complete ul{
    list-style:none;
    height:100px;
    width:280px;
    margin: 0;
    padding: 0;
    position:relative;
}
#complete li {
    margin:0;
    padding: 0;
    height:100px;
    width:280px;
    top:0;
    left:100%;
    position:absolute;
    overflow:hidden;
    -moz-animation:slide 12s 0s infinite;
    -webkit-animation:slide 12s 0s infinite;
    animation:slide 12s 0s infinite;
    -moz-animation-play-state:running;
    -webkit-animation-play-state:running;
    animation-play-state:running;
}
#complete li:nth-of-type(1) {
    -moz-animation-delay:0s;
    -webkit-animation-delay:0s;
    animation-delay:0s;
}
#complete li:nth-of-type(2) {
    -moz-animation-delay:4s;
    -webkit-animation-delay:4s;
    animation-delay:4s;
}
#complete li:nth-of-type(3) {
    -moz-animation-delay:8s;
    -webkit-animation-delay:8s;
    animation-delay:8s;
}
#complete a {
    height:100px; /*スライダー？？？*/
    width:100px;
    display:block;
}
#complete h2 {
    position:absolute;
    padding:0.5em 1em;
    background:rgba(0,0,0,0.5);
    color:#fff;
    top:0;
    left:-110%;
    opacity:0;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}
#complete .mask:hover h2 {
    left:0;
    opacity:1;
}
#complete .mask:hover .progress-bar,
#complete .mask:hover li{
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
#complete .progress-bar {
    background:rgba(0,0,0,1);
    height:5px;
    width:100%;
    position:absolute;
    z-index:100;
    bottom:0;
    left:0;
    -moz-animation:bar 12s linear infinite;
    -webkit-animation:bar 12s linear infinite;
    animation:bar 12s linear infinite;
}
/* keyframes for slide */
@-moz-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    33.3% {left:0%;opacity:1;z-index:-10;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
@-webkit-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    33.3% {left:0%;opacity:1;z-index:-10;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
@keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    33.3% {left:0%;opacity:1;z-index:-10;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    43.3% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}
/* keyframes for progress-bar */
@-moz-keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}
    10%,53.3%,86.6% {width:10%;opacity:0.5;}
    30%,63.3%,96.6% {opacity:1;}
    33.3%,66.6%,99.9% {width:100%;opacity:0.1;}
    34%,67%,100% {width:100%;opacity:0;}
}
@-webkit-keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}
    10%,53.3%,86.6% {width:10%;opacity:0.5;}
    30%,63.3%,96.6% {opacity:1;}
    33.3%,66.6%,99.9% {width:100%;opacity:0.1;}
    34%,67%,100% {width:100%;opacity:0;}
}
@keyframes bar {
    0%,43.3%,76.6% {width:0;opacity:0;}    /*スライドのフレームイン中は表示しない */
    10%,53.3%,86.6% {width:10%;opacity:0.5;}/*フレームイン終了。ここからbarがのびる */
    30%,63.3%,96.6% {opacity:1;}        /*barがのびきる前にopacityを1にするとおしゃれ */
    33.3%,66.6%,99.9% {width:100%;opacity:0.1;}/*ここまではbarがのびる */
    34%,67%,100% {width:100%;opacity:0;}    /*barを消す */
}