@charset "UTF-8";

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* **************************************************
  余白共通　マージン
************************************************** */
.mg20 {margin: 20px;}
.mg0 {margin: 0 !important;}
.mgt0 {margin-top: 0px;}
.mgt5 {margin-top: 5px;}
.mgt10 {margin-top: 10px;}
.mgt15 {margin-top: 15px;}
.mgt20 {margin-top: 20px;}
.mgt30 {margin-top: 30px;}
.mgt40 {margin-top: 40px;}
.mgt50 {margin-top: 50px;}
.mgt60 {margin-top: 60px;}
.mgt70 {margin-top: 70px;}
.mgt80 {margin-top: 80px;}
.mgt90 {margin-top: 90px;}
.mgt100 {margin-top: 100px;}
.mgt-5 {margin-top: -5px;}
.mgt-10 {margin-top: -10px;}
.mgt-15 {margin-top: -15px;}
.mgt-20 {margin-top: -20px;}
.mgt-25 {margin-top: -25px;}
.mgt-30 {margin-top: -30px;}
.mgt-35 {margin-top: -35px;}
.mgt-40 {margin-top: -40px;}
.mgl0 {margin-left: 0px;}
.mgl5 {margin-left: 5px;}
.mgl10 {margin-left: 10px;}
.mgl15 {margin-left: 15px;}
.mgl20 {margin-left: 20px;}
.mgl30 {margin-left: 30px;}
.mgl40 {margin-left: 40px;}
.mgl50 {margin-left: 50px;}
.mgl60 {margin-left: 60px;}
.mgl70 {margin-left: 70px;}
.mgl80 {margin-left: 80px;}
.mgl90 {margin-left: 90px;}
.mgl100 {margin-left: 100px;}
.mgl-5 {margin-left: -5px;}
.mgl-10 {margin-left: -10px;}
.mgl-15 {margin-left: -15px;}
.mgl-20 {margin-left: -20px;}
.mgl-25 {margin-left: -25px;}
.mgl-30 {margin-left: -30px;}
.mgl-35 {margin-left: -35px;}
.mgl-40 {margin-left: -40px;}
.mgr0 {margin-right: 0px;}
.mgr5 {margin-right: 5px;}
.mgr10 {margin-right: 10px;}
.mgr15 {margin-right: 15px;}
.mgr20 {margin-right: 20px;}
.mgr30 {margin-right: 30px;}
.mgr40 {margin-right: 40px;}
.mgr50 {margin-right: 50px;}
.mgr60 {margin-right: 60px;}
.mgr70 {margin-right: 70px;}
.mgr80 {margin-right: 80px;}
.mgr90 {margin-right: 90px;}
.mgr100 {margin-right: 100px;}
.mgr-5 {margin-right: -5px;}
.mgr-10 {margin-right: -10px;}
.mgr-15 {margin-right: -15px;}
.mgr-20 {margin-right: -20px;}
.mgr-25 {margin-right: -25px;}
.mgr-30 {margin-right: -30px;}
.mgr-35 {margin-right: -35px;}
.mgr-40 {margin-right: -40px;}
.mgb0 {margin-bottom: 0px;}
.mgb5 {margin-bottom: 5px;}
.mgb10 {margin-bottom: 10px;}
.mgb15 {margin-bottom: 10px;}
.mgb20 {margin-bottom: 20px;}
.mgb30 {margin-bottom: 30px;}
.mgb40 {margin-bottom: 40px;}
.mgb50 {margin-bottom: 50px;}
.mgb60 {margin-bottom: 60px;}
.mgb70 {margin-bottom: 70px;}
.mgb80 {margin-bottom: 80px;}
.mgb90 {margin-bottom: 90px;}
.mgb100 {margin-bottom: 100px;}
.mgb-5 {margin-bottom: -5px;}
.mgb-10 {margin-bottom: -10px;}
.mgb-15 {margin-bottom: -15px;}
.mgb-20 {margin-bottom: -20px;}
/* **************************************************
  余白共通　パッディング
************************************************** */
.pd0 {padding: 0 !important;}
.pdt0 {padding-top: 0px;}
.pdt5 {padding-top: 5px;}
.pdt10 {padding-top: 10px;}
.pdt15 {padding-top: 15px;}
.pdt20 {padding-top: 20px;}
.pdt30 {padding-top: 30px;}
.pdt40 {padding-top: 40px;}
.pdt50 {padding-top: 50px;}
.pdt60 {padding-top: 60px;}
.pdt70 {padding-top: 70px;}
.pdt80 {padding-top: 80px;}
.pdt90 {padding-top: 90px;}
.pdt100 {padding-top: 100px;}
.pdl0 {padding-left: 0px;}
.pdl5 {padding-left: 5px;}
.pdl10 {padding-left: 10px;}
.pdl15 {padding-left: 15px;}
.pdl20 {padding-left: 20px;}
.pdl30 {padding-left: 30px;}
.pdl40 {padding-left: 40px;}
.pdl50 {padding-left: 50px;}
.pdl60 {padding-left: 60px;}
.pdl70 {padding-left: 70px;}
.pdl80 {padding-left: 80px;}
.pdl90 {padding-left: 90px;}
.pdl100 {padding-left: 100px;}
.pdr0 {padding-right: 0px;}
.pdr5 {padding-right: 5px;}
.pdr10 {padding-right: 10px;}
.pdr15 {padding-right: 15px;}
.pdr20 {padding-right: 20px;}
.pdr30 {padding-right: 30px;}
.pdr40 {padding-right: 40px;}
.pdr50 {padding-right: 50px;}
.pdr60 {padding-right: 60px;}
.pdr70 {padding-right: 70px;}
.pdr80 {padding-right: 80px;}
.pdr90 {padding-right: 90px;}
.pdr100 {padding-right: 100px;}
.pdb0 {padding-bottom: 0px;}
.pdb5 {padding-bottom: 5px;}
.pdb10 {padding-bottom: 10px;}
.pdb15 {padding-bottom: 15px;}
.pdb20 {padding-bottom: 20px;}
.pdb30 {padding-bottom: 30px;}
.pdb40 {padding-bottom: 40px;}
.pdb50 {padding-bottom: 50px;}
.pdb60 {padding-bottom: 60px;}
.pdb70 {padding-bottom: 70px;}
.pdb80 {padding-bottom: 80px;}
.pdb90 {padding-bottom: 90px;}
.pdb100 {padding-bottom: 100px;}
/* **************************************************
  改行余白
************************************************** */
.br15em {line-height: 1.5em;}
.br2em {line-height: 2em;}
.br3em {line-height: 3em;}
.br30px {line-height: 30px;}
.br40px {line-height: 40px;}
.br-pc {display: block;}
@media (max-width: 768px) {.br-pc {  display: inline;} }
.br-sp {display: inline;}
@media (max-width: 768px) {.br-sp {  display: block;} }
/* **************************************************
  テキスト段組 文字間
************************************************** */
.t-left {text-align: left;}
.t-right {text-align: right;}
.t-center {text-align: center;}
.ls0 {letter-spacing: 0px;}
.ls1 {letter-spacing: -1px;}
.ls2 {letter-spacing: -2px;}
.ls3 {letter-spacing: -3px;}
.ls4 {letter-spacing: -4px;}
.ls5 {letter-spacing: -5px;}
.lh {line-height: 1.1em;}
.nakaten {display: inline-block;
  margin: 0 -0.2em;}
/* **************************************************
  テキスト
************************************************** */
.fw-normal {font-weight: normal !important;}
.fw-bold {font-weight: bold !important;}
.fs70 {font-size: 70% !important;}
.fs80 {font-size: 80% !important;}
.fs90 {font-size: 90% !important;}
.fs110 {font-size: 110% !important;}
.fs120 {font-size: 120% !important;}
.fs130 {font-size: 130% !important;}
.fs140 {font-size: 140% !important;}
.fs150 {font-size: 150% !important;}
.fs12px {font-size: 12px !important;}
.fs13px {font-size: 13px !important;}
.fs14px {font-size: 14px !important;}
.fs15px {font-size: 15px !important;}
.fs16px {font-size: 16px !important;}
.fs17px {font-size: 17px !important;}
.fs18px {font-size: 18px !important;}
.fs19px {font-size: 19px !important;}
.fs20px {font-size: 20px !important;}
.fs21px {font-size: 21px !important;}
.fs22px {font-size: 22px !important;}
.fs23px {font-size: 23px !important;}
.fs24px {font-size: 24px !important;}
.fs25px {font-size: 25px !important;}
.fs26px {font-size: 26px !important;}
.fs27px {font-size: 27px !important;}
.fs28px {font-size: 28px !important;}
.fs29px {font-size: 29px !important;}
.fs30px {font-size: 30px !important;}
.fs31px {font-size: 31px !important;}
.fs32px {font-size: 32px !important;}
.fs33px {font-size: 33px !important;}
.fs34px {font-size: 34px !important;}
.fs35px {font-size: 35px !important;}
.fs36px {font-size: 36px !important;}
.fs37px {font-size: 37px !important;}
.fs38px {font-size: 38px !important;}
.fs39px {font-size: 39px !important;}
.fs40px {font-size: 40px !important;}
/* **************************************************
  テキスト色
************************************************** */
.color-black {color: #000;}
.color-red {color: #ee0000;}
.color-green {color: #00993b;}
.color-white {color: #fff;}
.color-gray {color: #555;}
.color-blue {color: #1D90CA;}
.color-pink{color:#FF6699;}
.color-base_color {color: #60ac45;}
.color-opposite_color {color: #40ae3c;}

.osya{
color:white;
padding:10px;
}


.orange-gra{
background: #ff7400; /* Old browsers */
background: -moz-linear-gradient(left,  #ff7400 0%, #dd0072 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ff7400 0%,#dd0072 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ff7400 0%,#dd0072 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#dd0072',GradientType=1 ); /* IE6-9 */
}

.pink-gra{
background: #ff0084; /* Old browsers */
background: -moz-linear-gradient(left,  #ff0084 0%, #ad0025 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ff0084 0%,#ad0025 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ff0084 0%,#ad0025 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ad0025',GradientType=1 ); /* IE6-9 */
}

.purple-gra{
background: #4e66ed; /* Old browsers */
background: -moz-linear-gradient(left,  #4e66ed 0%, #a141c6 51%, #9c18ad 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #4e66ed 0%,#a141c6 51%,#9c18ad 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #4e66ed 0%,#a141c6 51%,#9c18ad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e66ed', endColorstr='#9c18ad',GradientType=1 ); /* IE6-9 */
}

.water-gra{
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(left,  #4096ee 0%, #43d5f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #4096ee 0%,#43d5f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #4096ee 0%,#43d5f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#43d5f9',GradientType=1 ); /* IE6-9 */
}

.silver-gra{
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.mint-gra{
background: #ecffc1; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ecffc1 0%, #b7df2d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ecffc1 0%,#b7df2d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ecffc1 0%,#b7df2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecffc1', endColorstr='#b7df2d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.yellow-gra{
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #fefcea 0%, #f1da36 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #fefcea 0%,#f1da36 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #fefcea 0%,#f1da36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.enter-gra{
background: #ff5db1; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ff5db1 0%, #ef017c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ff5db1 0%,#ef017c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ff5db1 0%,#ef017c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


body {
  min-height: 450px;
  margin: 0;
  background: radial-gradient(circle, darken(dodgerblue, 10%), #1f4f96, #1b2949, #000);
}

.stage {
  height: 50vh;
  width: 100%;
  margin: auto;
  position: absolute;
  top: 0;
/*  right: 0;*/
/*  bottom: 0;*/
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
}

.layer {
  width: 16em;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;
  animation-fill-mode: forwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer:after {
  font: 3em/0.90 "Permanent Marker";
  content: "RINO\a   LATINAII";
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 40px;
  color: whitesmoke;
  letter-spacing: 1px;
  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
}

.layer:nth-child(1):after {
  transform: translateZ(0px);
}

.layer:nth-child(2):after {
  transform: translateZ(-1.5px);
}
.layer:nth-child(3):after {
  transform: translateZ(-3px);
}
.layer:nth-child(4):after {
  transform: translateZ(-4.5px);
}
.layer:nth-child(5):after {
  transform: translateZ(-6px);
}
.layer:nth-child(6):after {
  transform: translateZ(-7.5px);
}
.layer:nth-child(7):after {
  transform: translateZ(-9px);
}
.layer:nth-child(8):after {
  transform: translateZ(-10.5px);
}
.layer:nth-child(9):after {
  transform: translateZ(-12px);
}
.layer:nth-child(10):after {
  transform: translateZ(-13.5px);
}
.layer:nth-child(11):after {
  transform: translateZ(-15px);
}
.layer:nth-child(12):after {
  transform: translateZ(-16.5px);
}
.layer:nth-child(13):after {
  transform: translateZ(-18px);
}
.layer:nth-child(14):after {
  transform: translateZ(-19.5px);
}
.layer:nth-child(15):after {
  transform: translateZ(-21px);
}
.layer:nth-child(16):after {
  transform: translateZ(-22.5px);
}
.layer:nth-child(17):after {
  transform: translateZ(-24px);
}
.layer:nth-child(18):after {
  transform: translateZ(-25.5px);
}

.layer:nth-child(19):after {
  transform: translateZ(-27px);
}

.layer:nth-child(20):after {
  transform: translateZ(-28.5px);
}

.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
  -webkit-text-stroke: 15px #00366b;
/*  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;*/
}

.layer:nth-child(n+12):after {
  -webkit-text-stroke: 15px #082440;
}

.layer:last-child:after {
  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
  color: #fff;
  text-shadow: none;
}

@keyframes ಠ_ಠ {
  100% {
    transform: rotateY(-40deg) rotateX(-43deg);
  }
}

div.logo{
  text-shadow: 4px 0 4px #00366b, 2px 2px 2px #000000, 0 4px 4px #000000;
}
body .textcontainer {
  padding: 40px 0;
  text-align: center;
}

body .particletext {
  text-align: center;
  font-size: 48px;
  position: relative;
}

body .particletext.bubbles > .particle {
  opacity: 0;
  position: absolute;
  background-color: rgba(33, 150, 243, 0.5);
  animation: bubbles 3s ease-in infinite;
  border-radius: 100%;
}

body .particletext.hearts > .particle {
  opacity: 0;
  position: absolute;
  background-color: #cc2a5d;
  animation: hearts 3s ease-in infinite;
}

body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after {
  position: absolute;
  content: "";
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #cc2a5d;
}

body .particletext.hearts > .particle:before {
  transform: translateX(-50%);
}

body .particletext.hearts > .particle:after {
  transform: translateY(-50%);
}

body .particletext.lines > .particle {
  position: absolute;
  background-color: rgba(244, 67, 54, 0.5);
  animation: lines 3s linear infinite;
}

body .particletext.confetti > .particle {
  opacity: 0;
  position: absolute;
  animation: confetti 3s ease-in infinite;
}

body .particletext.confetti > .particle.c1 {
  background-color: rgba(76, 175, 80, 0.5);
}

body .particletext.confetti > .particle.c2 {
  background-color: rgba(156, 39, 176, 0.5);
}

body .particletext.fire > .particle {
  position: absolute;
  background-color: rgba(255, 193, 7, 0.5);
  border-radius: 40px;
  border-top-right-radius: 0px;
  animation: fires 0.8s linear infinite;
  transform: rotate(-45deg);
  opacity: 0;
}

body .particletext.fire > .particle:before {
  position: absolute;
  content: "";
  top: 60%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 40px;
  border-top-right-radius: 0px;
  background-color: rgba(251, 140, 0, 0.5);
}

body .particletext.sunbeams > .particle {
  position: absolute;
  background-color: rgba(253, 216, 53, 0.5);
  animation: sunbeams 3s linear infinite;
}

@keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000%);
  }
}
@keyframes hearts {
  0% {
    opacity: 0;
    transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000%) rotate(45deg);
  }
}
@keyframes lines {
  0%, 50%, 100% {
    transform: translateY(0%);
  }
  25% {
    transform: translateY(100%);
  }
  75% {
    transform: translateY(-100%);
  }
}
@keyframes confetti {
  0% {
    opacity: 0;
    transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(2000%) rotate(1440deg);
  }
}
@keyframes fires {
  0% {
    transform: rotate(-70deg) translateY(0%);
  }
  25% {
    transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}
@keyframes sunbeams {
  0% {
    transform: translateY(40%) rotate(0deg);
  }
  50% {
    transform: translateY(-40%) rotate(180deg);
  }
  100% {
    transform: translateY(40%) rotate(360deg);
  }
  0%, 14%, 17%, 43%, 53%, 71%, 80%, 94%, 100% {
    opacity: 0;
  }
  6%, 15%, 24%, 28%, 48%, 55%, 78%, 82%, 99% {
    opacity: 1;
  }
}
.particletext{font-size:1.2em!important;}


canvas {
  display:block;
  margin:auto;
  background:#888888;
}



h1,.particletext{font: 3em/0.90 "Permanent Marker"; }

h1.text-js{width:100%;}

/*背景文字*/
article {
  width: 100%;
  margin: 1.5em auto;
  overflow: hidden;
  position: relative;
  min-height: 4em;
    z-index: 3;
}

.example-left {
  white-space: nowrap;
  position: absolute;
  text-transform: uppercase;
    z-index: 3;
}

.example-left {
  -webkit-animation: mymove 8s linear infinite;
  /* Safari 4.0 - 8.0 */
  white-space: nowrap;
  animation: mymove 8s linear infinite alternate;
    z-index: 3;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {
    left: 0;
  }
  to {
    left: -140px;
  }
}
@keyframes mymove {
  from {
    left: 0;
  }
  to {
    left: -140px;
  }
}

.example-right {
color:red;
  white-space: nowrap;
  position: absolute;
  top: 2em;
  opacity: 0.4;
  text-transform: uppercase;
    z-index: 3;
}

.example-right {
color:red;
  -webkit-animation: urmove 8s linear infinite;
  /* Safari 4.0 - 8.0 */
  white-space: nowrap;
  animation: urmove 8s linear infinite alternate;
    z-index: 3;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -140px;
  }
}
@keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -140px;
  }
}
@keyframes early {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.early {
  animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  animation-duration: 1s;
  animation-delay: 1.5s;
    z-index: 15;
}


/*typeing*/

.text-js {
  opacity: 0.5;
  position: fixed;
  left:0;
  right:0;
  z-index: 10;
}

.cursor {
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  right: -5px;
  width: 2px;
  /* Change colour of Cursor Here */
  background-color: white;
  z-index: 20;
  animation: flash 0.5s none infinite alternate;
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.headline {
  position: absolute;
  margin: 20px;
  color: white;
  font-size: 32px;
  text-align: center;
  z-index: 3;
}

.headline h1 {
  position: absolute;
  letter-spacing: 1.6px;
  font-weight: 300;
  z-index: 20;
}

.twitterLink {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 10px 15px;
  z-index: 3;
}

.twitterLink svg {
  width: 25px;
}

.credit {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  z-index: 3;
  text-decoration: none;
}

.main,.sidebar{
    animation-name:fadein;
    animation-duration: 2s;

}
@keyframes fadein{
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){/*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){/*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){/*必要ならばここにコードを書く*/
}

.entry-content pre{
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
}

canvas.particles-js-canvas-el{
  position:fixed;
  z-index:-2;
  top:0;
  left:0;
  right:0;
}


/* ---- particles.js container ---- */

#particles-js{

  background-color: #000000;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: repeat;
}

.item-label{
  font-size: 0.6em;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.logo-insta{ position: fixed; bottom:210px; right:10px; width:50px;height:50px;}
.logo-tk{ position: fixed; bottom:150px; right:10px; width:50px;height:50px;}
.logo-x{ position: fixed; bottom:90px; right:10px; width:50px;height:50px;}

.top_name a{
 text-decoration: none;
 color: #000000;
}