@import url('../common.css');

* {
  --my-color: #E4007E;
  --my-font-color: #b4abd4;
  --rotate-time: 6s;
}

body {
  background-color: #000 !important;
  color: #ccc;
}

a {
  color: var(--my-font-color);
  text-decoration: underline;
}

.text-center {
  text-align: center;
}

.main-text {
  font-size: 18px;
  margin: 0 3%;
}

#certification-table {
  padding: 10px;
  margin: auto;
  border: 2px solid white;
  border-collapse: collapse;
  background-color: white;
}
#certification-table th p {
  padding: 2px 8px;
  margin: 2px;
  font-size: 16px;
  background-color: black;
}
#certification-table td p {
  padding: 8px;
  margin: 2px;
  background-color: black;
}

.hidden-start {
  visibility: hidden;
}

a > span.flex-wrap {
  text-decoration: underline;
}

#email-fixed {
  visibility: hidden;
  position: fixed;
  bottom: 3%;
  right: 3%;
}

#email-challenge {
  visibility: hidden;
  position: fixed;
  bottom: 3%;
  right: 3%;
}

.text-yellow {
  color: yellow;
}

#dennys-was {
  visibility: hidden;
  position: fixed;
  height: auto;
  width: auto;
  bottom: 12%;
  right: 3%;
  z-index: 101;
}
#dennys-was > p {
  text-align: center;
  margin-bottom: 0;
}

#adblock-checker {
  visibility: hidden;
  height: 0;
  width: 0;
}
#adblocker-warning {
  position: fixed;
  visibility: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  z-index: 10000;
  background-color: rgba(200, 200, 200, 0.5);
}
#adblocker-warning div {
  background-color: #541894;
  position: relative;
  height: 50%;
  width: 75%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
}
#adblocker-warning div div {
  position: relative;
  height: auto;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#adblocker-warning div div p {
  font-size: calc(2vw + 10px);
}
#adblocker-warning div div img {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50vh;
}

header {
  position: fixed;
  height: calc(2.5vw + 15px);
  width: 96vw;
  color: #000;
  top: 0;
  margin-top: 2vw;
  overflow: hidden;
  background-color: var(--my-color);
  z-index: 100;
}

#header-black {
  position: fixed;
  height: calc(2vw + 2.5vw + 15px);
  width: 100vw;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 99;
}

#site-name {
  font-family: 'Noto Serif JP', serif, 'Shippori Mincho', serif, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 600;
  white-space: nowrap;
  font-size: calc(3.6vw + 21.6px);
  margin: auto;
  transform: translate(0%, -29%);
  background: linear-gradient(170deg, black 0%, var(--my-color) 60%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

#menu-btn {
  position: absolute;
  height: 40px;
  width: 40px;
  top: 50%;
  translate: 0 -50%;
  right: 3%;
}
#menu {
  display: none;
  position: fixed;
  width: 300px;
  top: 100px;
  translate: 100% 0;
  right: 0%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 101;
}
.menu-visible {
  display: block !important;
  animation: menu-visible 0.4s ease-in-out forwards;
}
@keyframes menu-visible {
  100% {
    translate: -2vw 0;
  }
}
.menu-hidden {
  display: block !important;
  animation: menu-hidden 0.4s ease-in-out forwards;
}
@keyframes menu-hidden {
  0% {
    translate: -2vw 0;
  }
  100% {
    translate: 100% 0;
  }
}

#mail-address {
  white-space: nowrap;
  font-size: calc(1.5vw + 10px);
  margin: 0px auto;
}

#display-top-spacer {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#display-top-obj {
  font-family: 'Noto Serif JP', serif, 'Shippori Mincho', serif, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  position:relative;
  height: auto;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
#profile-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  left: -100vw;
  animation: display-top-img 5s 7s ease-in-out forwards;
}
#profile-wrapper image {
  position: relative;
  height: 100%;
  width: 100%;
}
#profile {
  position: relative;
  width: 100%;
  height: 0;
  animation: width240 1.5s 6s ease-in forwards;
}
@keyframes width240 {
  0% {
    height: 0px;
  }
  100% {
    height: max(20vw, 160px);
  }
}
@keyframes display-top-img {
  0% {
    left: -100%;
  }
  12% {
    left: 13%;
  }
  40% {
    left: -3%;
  }
  50% {
    top: 0;
    left: 200%;
  }
  51% {
    top: -100vh;
    left: 200%;
  }
  52% {
    top: -100vh;
    left: 0;
  }
  53% {
    top: -50vh;
    left: 0;
  }
  76% {
    top: -20vh;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

#h1-3 {
  text-align: center;
  font-size: 3rem;
}

.kk {
  color: aquamarine;
  padding: 10px 10px;
  background-image: url(/_img/yakitori_trans.png);
  background-size: contain;
  background-position: center center;
  background-repeat:  no-repeat;
}

.yakitori-fade-out {
  animation: yakitori-fade-out 2s ease-in forwards;
}

@keyframes yakitori-fade-out {
  50% {
    color: var(--my-color);
    background-position: center 100px;
  }
  100% {
    color: var(--my-color);
    background-position: center 200px;
  }
}

.name-space-start {
  padding: 1rem;
}

.name-space {
  animation: fade-out 1s ease-in-out forwards;
}
@keyframes fade-out {
  0% {
    padding: 1rem;
  }
	100% {
		padding: 0rem;
	}
}

.rotate-text {
  visibility: visible !important;
  animation: rotate-text 1.2s 2 linear, zoom-text 2.4s ease-in;
}
@keyframes rotate-text {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes zoom-text {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}

.fade-in {
  animation-fill-mode:both;
  -webkit-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-name: fade-in;
  -webkit-animation-name: fade-in;
  visibility: visible !important;
}
@-webkit-keyframes fade-in {
  0% { opacity: 0; -webkit-transform: translateY(20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fade-in {
  0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(-20px); transform: translateY(20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.width-max {
  overflow-x: hidden;
  overflow-y: hidden;
}

p > a > svg {
  width: 100px;
  fill: #fff;
  transform: rotate(45);
}

p.svg-rotate-flg {
  width: 100%;
}

.svg-rotate-flg {
  visibility: hidden;
}

.rotate-fade-in {
  -webkit-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: rotate-fade-in;
  animation-name: rotate-fade-in;
  visibility: visible !important;
}
@-webkit-keyframes rotate-fade-in {
  0% { -webkit-transform: translateX(70vw); }
  100% { -webkit-transform: translateX(0); }
}
@keyframes rotate-fade-in {
  0% { -webkit-transform: translateX(70vw); -ms-transform: translateX(-70vw); transform: translateX(70vw); }
  100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}

.svg-rotate {
  -webkit-animation: svg-rotete var(--rotate-time) linear infinite;
  -moz-animation: svg-rotete var(--rotate-time) linear infinite;
  -ms-animation: svg-rotete var(--rotate-time) linear infinite;
  -o-animation: svg-rotete var(--rotate-time) linear infinite;
  animation: svg-rotete var(--rotate-time) linear infinite;
}
@-webkit-keyframes svg-rotete {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes svg-rotete {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes svg-rotete {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes svg-rotete {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes svg-rotete {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/*紙吹雪のスタイル*/
.confetti {
  position: absolute;
  width: 90vw;
  overflow: hidden;
  height: 100%;
}

.confetti span {
  position: absolute;
  top: -100%;/*Display confettties without animation*/
  left: 0;
}

.confetti span:nth-child(2n + 1) {
  animation: confetti1 linear infinite;
}

.confetti span:nth-child(2n + 2) {
  animation: confetti2 ease-in infinite;
}

@keyframes confetti1 {
  0% {
    top: -10%;
    transform: translateX(40px) translateY(0) rotateX(0) rotateY(0);
  }
  100% {
    top: 100%;
    transform: translateX(0px) translateY(0) rotateX(180deg) rotateY(360deg);
  }
}

@keyframes confetti2 {
  0% {
    top: -10%;
    transform: translateX(80vw) translateY(0) rotateX(0) rotateY(0);
  }
  100% {
    top: 100%;
    transform: translateX(0vw) translateY(0) rotateX(180deg) rotateY(360deg);
  }
}

/*Arrangement*/
.confetti span:nth-child(1) {
  left: 0%;
}

.confetti span:nth-child(2) {
  left: 10%;
}

.confetti span:nth-child(3) {
  left: 20%;
}

.confetti span:nth-child(4) {
  left: 30%;
}

.confetti span:nth-child(5) {
  left: 40%;
}

.confetti span:nth-child(6) {
  left: 50%;
}

.confetti span:nth-child(7) {
  left: 60%;
}

.confetti span:nth-child(8) {
  left: 70%;
}

.confetti span:nth-child(9) {
  left: 80%;
}

.confetti span:nth-child(10) {
  left: 90%;
}

.confetti span:nth-child(11) {
  left: 100%;
}

/*紙吹雪の大きさ*/
.confetti span:nth-child(3n + 1) {
  width: calc(3vw + 10px);
  height: calc(3vw + 10px);
}

.confetti span:nth-child(3n + 2) {
  width: calc(2vw + 10px);
  height: calc(2vw + 10px);
}

.confetti span:nth-child(3n + 3) {
  width: calc(1.5vw + 10px);
  height: calc(1.5w + 10px);
}

/*紙吹雪の色*/
.confetti span:nth-child(4n + 1) {
  background: rgb(120, 54, 159);
}

.confetti span:nth-child(4n + 2) {
  background: purple;
}

.confetti span:nth-child(4n + 3) {
  background: rgb(207, 65, 209);
  z-index: 99;
}

.confetti span:nth-child(4n + 4) {
  background: yellow;
  z-index: 99;
}

/*The duration of animation*/
.confetti span:nth-child(4n + 1) {
  animation-duration: 10s;
}

.confetti span:nth-child(4n + 2) {
  animation-duration: 12s;
}

.confetti span:nth-child(4n + 3) {
  animation-duration: 20s;
}

.confetti span:nth-child(4n + 4) {
  animation-duration: 20s;
}

/*The time confetties start to fall*/
.confetti span:nth-child(11n + 1) {
  animation-delay: 0s;
}

.confetti span:nth-child(11n + 2) {
  animation-delay: 4s;
}

.confetti span:nth-child(11n + 3) {
  animation-delay: 6s;
}

.confetti span:nth-child(11n + 4) {
  animation-delay: 7s;
}

.confetti span:nth-child(11n + 5) {
  animation-delay: 8s;
}

.confetti span:nth-child(11n + 6) {
  animation-delay: 10s;
}

.confetti span:nth-child(11n + 7) {
  animation-delay: 2s;
}

.confetti span:nth-child(11n + 8) {
  animation-delay: 3s;
}

.confetti span:nth-child(11n + 9) {
  animation-delay: 11s;
}

.confetti span:nth-child(11n + 10) {
  animation-delay: 1s;
}

.confetti span:nth-child(11n + 11) {
  animation-delay: 5s;
}