@font-face {
    font-family: 'riitegakifude';
    src: url('/fonts/riit_f-webfont.woff2') format('woff2'),
         url('/fonts/riit_f-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
	position: relative;
}
#clock_box {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 100% 0 0;
}
#clock {
	position: relative;
	width: 100%;
	height: 100%;
/*
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
*/
}
#field0, #field1, #window, #frame, #card, #notice {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#field1 {
	opacity: 0.0;
	z-index: 8;
}
#frame {
	z-index: 20;
}
#window {
	z-index: 16;
}
#card {
	opacity: 0.0;
	z-index: 24;
}
#notice {
	z-index: 12;
}
#card_time {
	position: absolute;
	right: 3%;
	top: 1.5%;
	width: 29%;
	height: 9.5%;
	font-size: 9vw;
	text-align: right;
	font-family: Meiryo, arial, "Trebuchet MS", arial, helvetica, Sans-Serif;
	font-weight: bold;
}
#time, #countdown {
	position: absolute;
	top: 80%;
	left: 0px;
	width: 100%;
	height: 15%;
	z-index:32;
	font-family: "riitegakifude", Meiryo, arial, "Trebuchet MS", arial, helvetica, Sans-Serif;
	font-size: 15.5vw;
	font-weight: bold;
	text-align: center;
	vertical-align: bottom;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), -1px -1px 2px rgba(255, 255, 255, 0.5);
}
#countdown {
	opacity: 0.0;
	top: 82%;
	font-size: 9.5vw;
	font-family: Meiryo, arial, "Trebuchet MS", arial, helvetica, Sans-Serif;
}
p { vertical-align: middle; }