@charset "utf-8";

/*  --HTML--  */

html {
  height: 100%;
}


/*  --BODY--  */
#wrap{
  text-align: center;
  margin: 10px 20px 0;
}
body {
  color: #000;
  height: 100%;
  text-align: left;
  margin: 0;
  padding: 0;
  background: #FFF;
  word-wrap: break-word;
  overflow: visible;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, sans-serif;
/*  font-family: 'Anton', sans-serif; */
  background: #eee;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  position: relative;
  left: 0;
  overflow-x: hidden;
}
#result_parent{
  height: 50px;
  padding-top: 50px;
}
#result{
  display: none;
  text-align: center;
  font-family: 'Patua One', cursive,'arial black','Hiragino Kaku Gothic ProN',"impact";
}
#result a{
  text-decoration: none;
  border-radius: 20px;
  background: #333;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.4em;
  padding: 10px 22px;
}
#result a:hover{
  background: #000;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
a {
  overflow: hidden;
  outline: none;
  color: #333;
}

a img {}

a:hover {
  text-decoration: underline;
}

a:hover img {}

a img,
img {
  border: 0;
}

abbr,
acronym {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal;
}

blockquote,
dd,
div,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
pre,
span,
td,
th,
ul {
  margin: 0;
  padding: 0;
}

caption,
th {
  text-align: left;
}

code,
kbd,
pre,
samp,
tt {
  font-family: monospace;
  line-height: 100%;
}


/*  for IE7  */

*+html code,
kbd,
pre,
samp,
tt {
  font-size: 108%;
}

.for-sp {
  display: none!important;
}

#timerBox {
  height: 100%;
  display: flex;
  /* 2 */
  justify-content: center;
  /* 3 */
  align-items: center;
  /* 4 */
  font-size: 244px;
  background: #fff;
}

input{
  max-width: 3.3em;
  text-align: right;
}

.title{
  text-align: center;
  line-height: 1;
}
.title span{
  display: inline-block;
  padding: 15px;
  margin: 0 6px;
  line-height: 1;
  background: #111;
  color: #fff;
  font-size: 200px;
}
#timer {}

#timerArea {}

#timerSetting {
  margin: 20px 0;
  text-align: center;
}

#timerSetting div {
  display: inline-block;
  border: 2px solid #666;
  color: #666;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  cursor: pointer;
  font-size: 34px;
}

#timerSetting .theme-box {
  display: block;
  width: auto;
  height: auto;
  border: none;
  cursor: default;
}
#timerSetting .theme-box div{
  cursor: pointer;
  width: auto;
  height: auto;
  display: inline-block;
  font-size: 18px;
  line-height: 20px;
  padding: 4px 10px;
}


#timerSetting div:hover {
  color: #000;
  border-color: #000;
}
.scroll_down{
  position: fixed;
  z-index: 9;
  bottom: 40px;
  color: #333;
  font-size: 42px;
  left: 0;
  right: 0;
  text-align: center;
}
.scroll_down i{
  font-size: 82px;
  display: block;
  animation: vertical 1s ease-in-out infinite alternate;
}
@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}

.bg01 #timerBox{
  background-color: #f00;
  animation: bg-color 1s infinite;
  -webkit-animation: bg01 1s infinite;
}

@-webkit-keyframes bg01 {
  0% { background-color: #f00; }
  50% { background-color: #333; }
  100% { background-color: #f00; }
}
@keyframes bg01 {
  0% { background-color: #f00; }
  50% { background-color: #333; }
  100% { background-color: #f00; }
}


.acquire_table{
  border-top: 1px solid #ccc;
  width: 100%;
  max-width: 800px;
  margin: 10px auto;
}
.acquire_table tr{
  border-bottom:1px solid #ccc;
}

.acquire_table th,
.acquire_table td{
  padding: 10px 2px;
  text-align: center;
  font-size: 13px;
}


.acquire_table th{
  font-weight: bold;
}
.name{
  text-align: left;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  min-width: 5em;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}
.num{
  display: inline-block;
  cursor: pointer;
  float: left;
  margin-left: 6px;
  margin-right: 2px;
  vertical-align: middle;
}
.tertiary_switch_parent{
  text-align: center;
}
.tertiary_switch{
  max-width: 400px;
  width: 80%;
  width: 45%;
  display: inline-block;
  margin: 40px auto 19px;
  color: #222;
  border-radius: 12px;
  padding: 8px 0;
  cursor: pointer;
  text-align: center;
  border: 1px solid #ccc;
}
.tertiary_flag_off .title_secondary,
.tertiary_flag_off .secondary{
  display: none;
}

.tertiary_flag .tertiary_switch_sinai,
.tertiary_switch_suru{
}
.tertiary_switch_sinai,
.tertiary_flag .tertiary_switch_suru{
}
.btn{
  text-align: center;
}
.btn a,
.btn span{
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  margin: 0 5px;
     padding: 4px 2px;
  background: #222;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 8px;
  border-radius: 33px;
  padding: 8px 30px;
}
.btn a.current{
  text-decoration: none;
  background: #999;
  cursor: default;
     padding: 4px 9px;
  border-radius: 12px;
  background: #111;
  color: #fff;
}
.color_select{
  display: none;
}
.start_clicked .color_select{
}
.tagiron_link{
  text-align: center;
  margin-top: 33px;
}

.tagiron_link p{
  font-size: 13px;
  letter-spacing: 0.1em;
}


.txt01{
  font-size: 14px;
  margin-top: 30px;
  text-align: center;
}

.color_select{
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.color_select p{
  margin-top: 22px;
  margin-bottom: 12px;
}
.color_select span,
.color_select a{
  padding: 24px;
  margin-bottom: 22px;
  text-decoration: none;
  border-radius: 10px;
  border:9px solid #111;
  background: #fff;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  cursor: pointer;
}

.color_select span:hover,
.color_select a:hover{
  opacity: 0.82;
}

.color_select a img{
  width: 57%;
  margin-top: 20px;
}

.players_select{
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: 22px;
  margin-bottom: 12px;
}
.players_select_red,
.players_select_yellow{
  display: none;
}

.players_select p{
  margin-top: 22px;
  margin-bottom: 12px;
}
.players_select a{
padding: 20px 0;
    margin-bottom: 22px;
    text-decoration: none;
    border-radius: 10px;
    border: 9px solid #111;
    background: #fff;
    display: inline-block;
    vertical-align: top;
    width: 24%;
    cursor: pointer;
}

.players_select a:hover{
 background: #eee; 
}

textarea{
  width: 95%;
}
.num6and9{
  text-decoration: underline;
}

.logo {
  text-align: center;
  margin-top: 39px;
} 
.logo img{
  max-width: 800px;
  width: 88%;
}


.reset_txt{
  text-align: center;
}
table .fa-redo{
  float: right;
  margin-right: 6px;
  cursor: pointer;
  margin-top: 4px;
}
.BOLT .name{
  background-color: #FF986A;
}
.ECHO .name{
  background-color: #7EB2B9;
}
.FLEET .name{
  background-color: #E8C26A;
}
.ETCH .name{
  background-color: #446643;
}
.ROVE .name{
  background-color: #984E69;
}
.SPARK .name{
  background-color: #F1564C;
}
.NESTOR .name{
  background-color :darkmagenta;
}



.SACKSON .name{
  background-color: #D44339;
}
.ZETA .name{
  background-color: #F6C41E;
}
.HYDRA .name{
  background-color: #EB8126;
}
.FUSION .name{
  background-color: #3B6F24;
}
.AMERICA .name{
  background-color: #3A62A5;
}
.PHOENIX .name{
  background-color: #57548D;
}
.QUANTUM .name{
  background-color :#0A7168;
}


.worldwide .name{
  background-color: #57548D;
}
.sackson .name{
  background-color: #EB8126;
}
.festival .name{
  background-color: #3B6F24;
}
.imperial .name{
  background-color: #F6C41E;
}
.american .name{
  background-color: #3A62A5;
}
.continental .name{
  background-color: #D44339;
}
.tower .name{
  background-color :#999;
}

.worldwide_1962 .name{
  background-color: #895c3d;
}
.luxor_1962 .name{
  background-color: #fd799a;
}
.festival_1962 .name{
  background-color: #3B6F24;
}
.imperial_1962 .name{
  background-color: #D44339;
}
.american_1962 .name{
  background-color: #3A62A5;
}
.continental_1962 .name{
  background-color: #7EB2B9;
}
.tower_1962 .name{
  background-color :#F6C41E;
}


.tertiary_flag_off .daisan,
.daini{
  display: none;
}

.tertiary_flag_off .daini{
  display: inline;
}

.tertiary_switch_sinai,
.tertiary_switch_suru{
  color: #999;
}

.tertiary_switch_sinai:hover,
.tertiary_switch_suru:hover{
  color: #fff;
  background: #666;
}
.tertiary_switch{
  font-size: 14px;
}
.tertiary_flag_off .tertiary_switch_sinai,
.tertiary_flag_on .tertiary_switch_suru{
  background: #111;
  cursor: default;
  color: #fff;
}




.tiles{
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 10px 1% 10px;
  position: relative;
}
.tile{
  width: 19%;
  margin: 0 0.5%;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  height: 130px;
  line-height: 100px;
  background: #eee;
  cursor: pointer;
  position: relative;
}
.tile_bg{
  border-radius: 8px;
  box-sizing: border-box;
  height: 130px;
  line-height: 100px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tiles .tile input{
  z-index: 9;
  background: #fff;
  position: absolute;
  top: 33px;
  left: 50%;
  width: 44px;
  margin-left: -22px;
}
.red_tiles,
.blue_tiles{
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0 1%;
  color: #fff;
  margin-top: 6px;
}
.red_tiles .tile{
  cursor: pointer;
  border: none;
  background: #D90000;
}
.blue_tiles .tile{
  cursor: pointer;
  border: none;
  background: #006DD9;
}

.red{
  color: #D90000;
}
.blue{
  color: #006DD9;
}
.bg_red{
  background: #D90000;
}
.bg_yellow{
  background: #ffff00;
}
.bg_blue{
  background: #006DD9;
}
.red_tiles .tile.yellow_tile,
.blue_tiles .tile.yellow_tile{
 color:#111;
  background: #ffff00;
}

.red_tiles .tile.tile_switch,
.blue_tiles .tile.tile_switch{
  background: #eee;
  color: #ccc;
}

.left3{
  background: rgba(0,0,0,0.07);
  position: absolute;
  top:77px;
  left: 0.5%;
  width: 59%;
  font-size: 11px;
}

.center3{
  background: rgba(0,0,0,0.07);
  position: absolute;
  top:3px;
  left: 20.5%;
  width: 59%;
  font-size: 11px;
}

.right3{
  background: rgba(0,0,0,0.07);
  position: absolute;
  top:102px;
  right: 0.5%;
  width: 59%;
  font-size: 11px;
}
.right3 input,
.left3 input,
.center3 input{
  padding: 0 3px 0 0;
  max-width: 3.3em;
  width: 3.8em;
}
.red_tiles .tile,
.blue_tiles .tile{
  width: 9%;
  margin: 0 0.5%;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  font-size: 29px;
  font-weight: bold;
}
.info{
  line-height: 1.8;
  margin: 0 1%;
  font-size: 13px;
}
.info input{
  padding: 0px 3px 0 0;
  margin: 0 5px 3px;
}
header{
  margin-bottom: 22px;
}
h1{
  text-align: center;
  font-size: 43px;
  font-family: 'Patua One', cursive,'arial black','Hiragino Kaku Gothic ProN',"impact";
  letter-spacing: 0.1em;
  margin-bottom: 39px;
  margin-top: 33px;
  line-height: 1;
  font-weight: bold;
}
h2{
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 15px;
}
.box1{
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  margin: 20px 28px 20px;
  font-size: 13px;
}

.copyright{
  font-size: 11px;
  margin-top: 21px;
  margin-bottom: 18px;
  text-align: center;
  color: #999;
}

#roulette{
  text-align: center;
  margin-top: 30px;
}
#roulette img{
  max-width: 100%;
}




.demo_div{
	width: 100%;
  max-width: 500px;
	text-align:center;
	position: relative;
	top: 0;
	left: 0;
	margin: 0px auto;
	cursor: pointer;
}
.i1,
.i2{
  box-shadow: 4px 4px 8px rgba(0,0,0,0.12);
}

.demo_div div.i1{
  opacity: 0;
  background: #fff;
  display: table;
}
.demo_div div.i1 p{
  display: table-cell;
  vertical-align: middle;
  font-size: 39px;
  font-weight: bold;
  padding-left: 22px;
  padding-right: 22px;
}
.demo_div div,
.demo_div img{
	width: 100%;
	height: 100%;
	position: absolute;
    left: 0px;
    top: 0px;
    opacity:1.0;
	border-radius: 10px;
}

@keyframes a1_1 {
    0% {
        transform: rotateY(0deg)
    }
    50% {
        transform: rotateY(90deg);
        opacity:1.0;
    }
    51% {
        opacity:0.0;
    }
    100% {
        opacity:0.0;
    }
}
@keyframes a1_2 {
    0% {
        transform: rotateY(0deg)
        opacity:0.0;
    }
    50% {
        transform: rotateY(90deg);
        opacity:0.0;
    }
    51% {
        opacity:1.0;
    }
    100% {
        transform: rotateY(0deg);
        opacity:1.0;
    }
}

.ani1_1{
	animation: a1_1 0.5s forwards;
}
.ani1_2{
	animation: a1_2 0.5s forwards;
}

@keyframes a2_1 {
    0% {
        opacity:0.0;
        transform: rotateY(0deg)
    }
    50% {
        transform: rotateY(90deg);
        opacity:0.0;
    }
    51% {
        opacity:1.0;
    }
    100% {
        transform: rotateY(0deg);
        opacity:1.0;
    }
}
@keyframes a2_2 {
    0% {
        transform: rotateY(0deg)
        opacity:1.0;
    }
    50% {
        transform: rotateY(90deg);
        opacity:1.0;
    }
    51% {
        opacity:0.0;
    }
    100% {
        opacity:0.0;
    }
}



.ani2_1{
	animation: a2_1 0.5s forwards;
}
.ani2_2{
	animation: a2_2 0.5s forwards;
}