@charset "utf-8";

/*
Theme Name: CSS3 DarkForce
Author: ONZE - Issei Hara
Author URI: http://on-ze.com
Version: 1.0
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/******************/

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  }

body {
overflow:hidden;
background:#000;
	-webkit-perspective:300;
	-moz-perspective:300;
	-ms-perspective:300;
	-o-perspective:300;
	perspective:300;
}

#d1,
#d1:before,
#d1:after,
#d2,
#d2:before,
#d2:after,
#d3,
#d3:before,
#d3:after {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:block; margin:0; padding:0; width:100%; height:100%;}


#d1,
#d2,
#d3 {
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  z-index: -1;
  transform: translate3d(0,0,0);
}

#d1:before,
#d1:after,
#d2:before,
#d2:after,
#d3:before,
#d3:after {
/*background-image:url(star.png);*/
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0BAMAAAA5+MK5AAAAJFBMVEX////////////////////////////////////////////////Vd7HLAAAADHRSTlMARFVmd4iZqrvM3e7VNOnbAAADp0lEQVR4Xu3dwZGbMBQG4BcTg3EuKYESKMElUIJLoARKoASXmmtmsoeNLUBC33fb0zKDEZLe+1HUB4BHfGiNkl2jIGPsgyEyBjR//XGJzMDFdOYT0HxjHtzHF+jrWYECsBiVP3MzK/ibHVGaINv57hqlm+MkeHqITQSK4LnxDHH1IubdmZoxSiETPxUdYKORK43WTB6wLqvsJWCatSSqg/XHXiB08QFAVwFLwuLeK3aC8uWw+z6PDSnw6kfXLnMub8GLTQxFbZAKKpRcwGjC7atM+2Z0/Kw8QBjvX1Ga/v8vnZ9nutpr5GqOe7lFA1aXQJIhps0pA0ub+4+JNcF6vPm6JIA9yB/19Rn3Slffd8/qXvQGiK/g/rOWUqJpEn0RYNqwnvd8dzlxsW9YBDnsPucis1eYzospsEWu7PkuoT2gO2V+YClnqNLpzqyvaBeAANi82fBlZTPFAeiFquuYCGJSTFfbYhlFWvDgAcBNV4fgP3gGkYE58lxE4H72uMo10rmXWUxGuwlCBgC3AqJxT2kWyDTVbk4CgPMq5DuxJ4il3j0AZ1w0Jc4Ox12vVECVZ7Ev5uXfIL3i43mxBJiCpju+wWYgfZwSXCutFtgpX+3ub8xoMaR4pw4nGaqgVQ1TQQCBZeMzDmBSJiweo0zRe+CVtJoLgPIagAW9kCN0zmevDlPKw8E8IzwSHEUHYMBg2LG5jKsLqaX51E+XJo9XMc/NbzP4Ro3vXtBVl5B/1NVvPtjmKLXUCiBhiJQ3Tif4Xf5eKYLbYEvpVcW2nlx3e/Deye2wTUD6Cr6NKoOulmd93ajAQyZP3WWTiu8aIJVMmoX4sPX/V8r3scQ29VWJPqyG63dBl7jjjN5mGDK6Ok2EDlCTUakQLBGFO3TZz6/tJvbo1WexbvcMUFj3C24r3ki3wGkebFMCYyo3+NuWVqXDyItM1V22LK3nvvN5QA8IGrNoRTbLZODFeD36GBWYvhRTz5iiVgqknsl5gy5kYVMdkrhPNOqO5FMOoznqBsKYbNUK057tINAXWRGjSz5aNF7UZ6NCACDTrgHQvMhaEZzNAIC+wca9PHa6C8L+oOI9BwAWjmCSBNL+INoDIHx7lj7HuZJpI+o+L3EVchrD7IwCQ8pDQkQ6cM6QohA380I/ouxekyAqTRflwBwMxzsNIn9VHAggCyqXgscFLJTX2ADgJIrVV7EUpE3obK3ji4agAOa0ArSzOTsTEozdj4xfDYMEWsb1VYA/KFNOcBXJpxsAAAAASUVORK5CYII=);
content:"";
	-webkit-animation:12s warp linear infinite;
	-moz-animation:12s warp linear infinite;
	-ms-animation:12s warp linear infinite;
	-o-animation:12s warp linear infinite;
	animation:12s warp linear infinite;
visibility:visible;
background-position:50% 50%
}

#d1:before {
background-position:-190px 80px
}
#d1:after {
background-position:90px -180px;
	-webkit-animation-delay:-2s;
	-moz-animation-delay:-2s;
	-ms-animation-delay:-2s;
	-o-animation-delay:-2s;
	animation-delay:-2s;
}
#d2:before {
background-position:210px 180px;
	-webkit-animation-delay:-4s;
	-moz-animation-delay:-4s;
	-ms-animation-delay:-4s;
	-o-animation-delay:-4s;
	animation-delay:-4s;
}
#d2:after   {
background-position:-120px 40px;
	-webkit-animation-delay:-6s;
	-moz-animation-delay:-6s;
	-ms-animation-delay:-6s;
	-o-animation-delay:-6s;
	animation-delay:-6s;
}
#d3:before {
background-position:130px 140px;
	-webkit-animation-delay:-8s;
	-moz-animation-delay:-8s;
	-ms-animation-delay:-8s;
	-o-animation-delay:-8s;
	animation-delay:-8s;
}
#d3:after {
background-position:-150px -90px;
	-webkit-animation-delay:-10s;
	-moz-animation-delay:-10s;
	-ms-animation-delay:-10s;
	-o-animation-delay:-10s;
	animation-delay:-10s;
}

/******************/

@-webkit-keyframes warp {
	from {opacity:0; -webkit-transform:rotate(-60deg) translateZ(-300px)}
	to {opacity:1; -webkit-transform:rotate(60deg) translateZ(300px)}
}
@-moz-keyframes warp {
	from {opacity:0; -moz-transform:rotate(-60deg) translateZ(-300px)}
	to {opacity:1; -moz-transform:rotate(60deg) translateZ(300px)}
}
@-ms-keyframes warp {
	from {opacity:0; -ms-transform:rotate(-60deg) translateZ(-300px)}
	to {opacity:1; -ms-transform:rotate(60deg) translateZ(300px)}
}
@-o-keyframes warp {
	from {opacity:0; -o-transform:rotate(-60deg) translateZ(-300px)}
	to {opacity:1; -o-transform:rotate(60deg) translateZ(300px)}
}
@keyframes warp{
	from {opacity:0; transform:rotate(-60deg) translateZ(-300px);}
	to {opacity:1; transform:rotate(60deg) translateZ(300px);}
}

/******************/
/******************/


/*基本設定*/
body {
}

/*リンクの色*/
a:link{color: #ff3333}
a:visited{color: #ff0099}
a:hover{color: #ff3366}
a:active{color: #ff6699}

p {
  color: #004400;
}
b, .b, strong .strong {
  color: #000099;
}

.main {
  width: 100%;
  margin: 0;
  padding: 0;
}
.cont {
  margin-left: auto;
  margin-right: auto;
}

h1 {
  font-size: 10.0rem;
  width: 480px;
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
}
@media screen and (max-width: 720px) {
  h1 {
  font-size: 7.0rem;
  }
}
@media screen and (max-width: 480px) {
  h1 {
  font-size: 4.0rem;
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
  }
}
.title_img {
  width: 80%;
  max-width: 480px;
  text-align: center;
}

.box {
	width: 700px;
	height: 450px;
	margin: auto;
	padding: 10px 20px;
  background-color: rgba(255,255,255,0.25);
  border-radius: 15px;
  position: relative;
}
@media screen and (max-width: 720px) {
  .box {
    width: 85%;
    height: auto;
    padding: 2%;
    border-radius: 10px;
  }
}

.wrapper{
    margin: 30px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 720px) {
  .wrapper {
    margin: 1.0rem 0;
  }
}

@-webkit-keyframes clft-color {
  0% { color: #ff4444; }
  7.14% { color: #ff7122; }
  14.29% { color: #ffc300; }
  21.43% { color: #d8ff00; }
  28.57% { color: #a6ff00; }
  35.71% { color: #15ff00; }
  42.86% { color: #00ffae; }
  50% { color: #00eeff; }
  57.14% { color: #00b7ff; }
  64.29% { color: #3083ff; }
  71.43% { color: #6933ff; }
  78.57% { color: #9900ff; }
  85.71% { color: #fa00ff; }
  92.86% { color: #ff00a1; }
  100% { color: #ff4444; }
}
@keyframes clft-color {
  0% { color: #ff4444; }
  7.14% { color: #ff7122; }
  14.29% { color: #ffc300; }
  21.43% { color: #d8ff00; }
  28.57% { color: #a6ff00; }
  35.71% { color: #15ff00; }
  42.86% { color: #00ffae; }
  50% { color: #00eeff; }
  57.14% { color: #00b7ff; }
  64.29% { color: #3083ff; }
  71.43% { color: #6933ff; }
  78.57% { color: #9900ff; }
  85.71% { color: #fa00ff; }
  92.86% { color: #ff00a1; }
  100% { color: #ff4444; }
}
.clear {
  width: 700px;
  height: 100%;
  top: 0;
  left: 0;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 300;
}
.clear p {
  font-size: 130px;
  font-family: 'arial black';
  background-color: rgba(0, 0, 0, 0);
  animation: clft-color 4s infinite;
  -webkit-animation: clft-color 4s infinite;
  margin: 0;
  -webkit-text-stroke: 3px #ffffff;
  text-stroke: 3px #ffffff;
}
@media screen and (max-width: 720px) {
  .clear{
    width: 100%;
    margin: -2%;
  }
  .clear p {
    font-size: 70px;
    -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff;
  }
}

/*ボタン系*/
div.btn {
    background: #ff55dd;
    width: 120px;
    height: 120px;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0 0 7px 3px rgba(255, 85, 221, 0.8);
    border-bottom: solid 4px #cc22bb;
    transition: .3s;
    margin: 20px 20px;
}
@media screen and (max-width: 720px) {
  div.btn {
    width: 24%;
    height: auto;
    margin: 3% 1.5%;
  }
  div.btn::before {
    content: "";
    padding-top: 100%;
    display: block;
  }
}
.btn:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

div.tokuten {
  width: 40px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0);
  border: solid 2px #cccccc;
  box-shadow: none;
  margin: 15px 2px;
}
@media screen and (max-width: 720px) {
  div.tokuten {
    width: 7%;
    height: auto;
    border: solid 1px #cccccc;
    margin: 5px 0.3%;
  }
  div.tokuten::before {
    content: "";
    padding-top: 300%;
    display: block;
  }
}
@-webkit-keyframes bg-color {
  0% { background-color: #ff4444; }
  7.14% { background-color: #ff7122; }
  14.29% { background-color: #ffc300; }
  21.43% { background-color: #d8ff00; }
  28.57% { background-color: #a6ff00; }
  35.71% { background-color: #15ff00; }
  42.86% { background-color: #00ffae; }
  50% { background-color: #00eeff; }
  57.14% { background-color: #00b7ff; }
  64.29% { background-color: #3083ff; }
  71.43% { background-color: #6933ff; }
  78.57% { background-color: #9900ff; }
  85.71% { background-color: #fa00ff; }
  92.86% { background-color: #ff00a1; }
  100% { background-color: #ff4444; }
}
@keyframes bg-color {
  0% { background-color: #ff4444; }
  7.14% { background-color: #ff7122; }
  14.29% { background-color: #ffc300; }
  21.43% { background-color: #d8ff00; }
  28.57% { background-color: #a6ff00; }
  35.71% { background-color: #15ff00; }
  42.86% { background-color: #00ffae; }
  50% { background-color: #00eeff; }
  57.14% { background-color: #00b7ff; }
  64.29% { background-color: #3083ff; }
  71.43% { background-color: #6933ff; }
  78.57% { background-color: #9900ff; }
  85.71% { background-color: #fa00ff; }
  92.86% { background-color: #ff00a1; }
  100% { background-color: #ff4444; }
}
div.cleartokuten {
  background-color: #ff4444;
  animation: bg-color 2.5s infinite;
  -webkit-animation: bg-color 2.5s infinite;
}

div.resetbtn {
  width: 120px;
  font-size: 2.4rem;
  font-weight: bold;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-top: 1.0rem;
  padding: 0.8rem 0 1.0rem;
  border: solid 1px #ffffff;
  background-color: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
}
@media screen and (max-width: 720px) {
  div.resetbtn {
    width: 60px;
    font-size: 1.4rem;
    padding: 0.5rem;
  }
}
.resetbtn:active {
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  /* border-bottom: none; */
}

#cTweet{
	visibility : hidden;
}

#tkt0 {
  background-color: #ffffff;
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.8);
}
#tkt1{animation-delay: 0.1s;}
#tkt2{animation-delay: 0.2s;}
#tkt3{animation-delay: 0.3s;}
#tkt4{animation-delay: 0.4s;}
#tkt5{animation-delay: 0.5s;}
#tkt6{animation-delay: 0.6s;}
#tkt7{animation-delay: 0.7s;}
#tkt8{animation-delay: 0.8s;}
#tkt9{animation-delay: 0.9s;}
#tkt10{animation-delay: 1.0s;}
#tkt11{animation-delay: 1.1s;}
#tkt12{animation-delay: 1.2s;}
#tkt13{animation-delay: 1.3s;}
#tkt14{animation-delay: 1.4s;}