@charset "utf-8";
html {
  color: #000;
  background: #FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
fieldset, img {
  border: 0
}
address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal
}
ol, ul {
  list-style: none
}
caption, th {
  text-align: left
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}
q:before, q:after {
  content: ''
}
abbr, acronym {
  border: 0;
  font-variant: normal
}
sup {
  vertical-align: text-top
}
sub {
  vertical-align: text-bottom
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit
}
input, textarea, select {
*font-size:100%
}
legend {
  color: #000
}
#yui3-css-stamp.cssreset {
  display: none
}
/* --- clearfix --- */
.clearFix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearFix {
  min-height: 1px;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-table;
}
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
.small {
  font-size: 60%;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #ffffff;
  background: #222;
  width: 100%;
  -webkit-backface-visibility: hidden;
}
body {
  margin: 0 auto;
  font-size: 14px;
  text-rendering : optimizeLegibility;
  font-feature-settings : "palt";
  -webkit-font-feature-settings : "palt";
  -moz-font-feature-settings : "palt";
}


#wrapper {
  display: table;
  min-height: 700px;
}

.padMainLeft {
  width: 50%;
  display: table-cell;
  min-height: 450px;
}

.userEachBox {
  font-family: 'Cairo', sans-serif;
  display: table;
  width: 100%;
  margin: 10px 0 0 0;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 5px #555;
}

.userEachName {
  width: 40%;
  display: table-cell;
  font-size: 380%;
  line-height: 0.9em;
  padding: 0 0 10px 10px;
  box-sizing: border-box;
  letter-spacing: -3px;
}

.userEachTime {
  width: 60%;
  display: table-cell;
  font-size: 95px;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: -3px;
  text-align: center;
}

.userEachTime span {
  font-size: 80%;
  vertical-align: middle;
}

.bgBlue {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3097ff+0,3097ff+100 */
background: #3097ff; /* Old browsers */
background: -moz-linear-gradient(top, #3097ff 0%, #3097ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #3097ff 0%,#3097ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #3097ff 0%,#3097ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3097ff', endColorstr='#3097ff',GradientType=0 ); /* IE6-9 */
color: #fff;
}

.bgGreen {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c625+0,86c625+100 */
background: #86c625; /* Old browsers */
background: -moz-linear-gradient(top, #86c625 0%, #86c625 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #86c625 0%,#86c625 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #86c625 0%,#86c625 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c625', endColorstr='#86c625',GradientType=0 ); /* IE6-9 */
color: #fff;
}

.bgGreen2 {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e8a62c+0,e8a62c+100 */
background: #e8a62c; /* Old browsers */
background: -moz-linear-gradient(top, #e8a62c 0%, #e8a62c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e8a62c 0%,#e8a62c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e8a62c 0%,#e8a62c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8a62c', endColorstr='#e8a62c',GradientType=0 ); /* IE6-9 */
color: #fff;
}

.bgRed {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7070+0,ff7070+100 */
background: #ff7070; /* Old browsers */
background: -moz-linear-gradient(top, #ff7070 0%, #ff7070 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff7070 0%,#ff7070 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff7070 0%,#ff7070 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7070', endColorstr='#ff7070',GradientType=0 ); /* IE6-9 */
color: #fff;
}

.bgRed2 {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9b70+0,ff9b70+49,ff9b70+49,ff7070+50,ff7070+100 */
background: #ff9b70; /* Old browsers */
background: -moz-linear-gradient(left, #ff9b70 0%, #ff9b70 49%, #ff9b70 49%, #ff7070 50%, #ff7070 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ff9b70 0%,#ff9b70 49%,#ff9b70 49%,#ff7070 50%,#ff7070 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ff9b70 0%,#ff9b70 49%,#ff9b70 49%,#ff7070 50%,#ff7070 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b70', endColorstr='#ff7070',GradientType=1 ); /* IE6-9 */
color: #fff;
}

.padMainRight {
  width: 50%;
  display: table-cell;
  position: relative;
  min-height: 450px;
}

.popBox {
  height: 481px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: 10px 0 0 0;
  display: table;
  vertical-align: middle;
}

.popEach {
  vertical-align: middle;
  width: 100%;
  -webkit-animation:blink 0.5s ease-in-out infinite alternate;
  -moz-animation:blink 0.5s ease-in-out infinite alternate;
  animation:blink 0.5s ease-in-out infinite alternate;
  margin-bottom: 10px;
  background: #ff0;
}
/*
@-webkit-keyframes blink{
    0% {background: #ff0;}
    100% {background: #555;}
}
@-moz-keyframes blink{
    0% {background: #ff0;}
    100% {background: #555;}
}
@keyframes blink{
    0% {background: #ff0;}
    100% {background: #555;}
}
*/
.nameTitle {
  font-family: 'Cairo', sans-serif;
  text-align: center;
  color: #333;
  font-size: 400%;
  line-height: 1em;
}

.lastM {
  font-family: 'Cairo', sans-serif;
  text-align: center;
  color: #333;
  font-size: 500%;
  line-height: 1.2em;
  letter-spacing: -2px;
}
.lastM span {
  font-size: 150%;
}

.dateTimeBox {
  font-family: 'Cairo', sans-serif;
  font-size: 350%;
  text-align: center;
  line-height: 2.5em;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 270px;
  z-index: 100;
  letter-spacing: -3px;
}
.displayTime {
  font-size: 300%;
}
.displayTime span {
  font-size: 80%;
}


.userList {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}

.userList select {
  width: 100%;
  background: #555;
  color: #fff;
  padding: 5px;
  box-sizing: border-box;
  font-size: 150%;
  font-family: 'Cairo', sans-serif;
  text-align: center;
  border: 2px solid #777;
}

.timeBox {
  margin: 20px;
}

.timeBox input {
  width: 100%;
  background: #555;
  color: #fff;
  padding: 5px;
  box-sizing: border-box;
  font-size: 150%;
  font-family: 'Cairo', sans-serif;
  text-align: center;
  border: 2px solid #777;
}

.submitBox {
  margin: 20px;
}

.submitBox input {
  width: 100%;
  background: #555;
  color: #fff;
  padding: 5px;
  box-sizing: border-box;
  font-size: 150%;
  font-family: 'Cairo', sans-serif;
  text-align: center;
  border: 2px solid #777;
}