* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-style: normal;
	font-size: 65%;
	margin: 0 auto;
	padding: 0;
}
body{
  font-size: 2rem;
  line-height: 2.8rem;
  color: #9C7171;
  font-weight: bolder;
  text-shadow:1px 1px 0 #F4E2E2, -1px -1px 0 #F4E2E2,
              -1px 1px 0 #F4E2E2, 1px -1px 0 #F4E2E2,
              0px 1px 0 #F4E2E2,  0-1px 0 #F4E2E2,
              -1px 0 0 #F4E2E2, 1px 0 0 #F4E2E2,
			  0 1px 5px rgba(0, 0, 0, 0.6);
}

@media (max-width: 720px) {
body {
  font-size: 4vw;
  line-height: 4.4vw;
}
}
body::selection {
  color: white;
  background: #FF276A;
}

a{
  color: #AF0035;
}
a:hover{
  color: #FF3371;
  text-shadow:2px 2px 5px #F4E2E2;
}
br.spOnly {
  display: none;
}
br.pcOnly {
  display: block;
}
@media (max-width: 720px) {
br.spOnly {
  display: block;
}
br.pcOnly {
  display: none;
}
}
#first{
  z-index:9999;
  height: 100%;
  position: relative;
  pointer-events: none;
	-webkit-animation: firstOpa 2s ease 2s forwards;
	animation: firstOpa 2s ease 2s forwards;
}
@-webkit-keyframes firstOpa {
  100% {
    opacity: 0;
  }
}
@keyframes firstOpa {
  100% {
    opacity: 0;
  }
}
#logo{
	text-align: center;
	opacity: 1;
	position: absolute;
  position: fixed;
  background: #fff;
  height: 100%;
  width: 100%;
	-webkit-animation: whiteOpa 1s ease 0s forwards;
	animation: whiteOpa 1s ease 0s forwards;
}
@-webkit-keyframes whiteOpa {
  100% {
    opacity: 1;
  }
}
@keyframes whiteOpa {
  100% {
    opacity: 1;
  }
}
#logo img{
	width: 75%;
	max-width: 1280px;
	opacity: 0;
	  top: 50%;
   position: fixed;
 left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
	-webkit-animation: logoOpa 2s ease 1s forwards;
	animation: logoOpa 2s ease 1s forwards;
}
@-webkit-keyframes logoOpa {
  100% {
    opacity: 1;
  }
}
@keyframes logoOpa {
  100% {
    opacity: 1;
  }
}

#list{
  min-height: 100vh;
  color: #7a5353;
  background-size: 120px, 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
ol {
  list-style: none;
  counter-reset: days-counter;
  position: relative;
  padding: 0px 0px 0px 60px;
}
ol li {
  counter-increment: days-counter;
  /* center the content in the viewport */
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 5;
  padding: 20px 0;
}
ol li::selection {
  color: white;
  background: #FF276A;
}

ol li:before {
  font-family: mayence-premium, sans-serif; 
  content: counter(days-counter);
  z-index: -5;
  position: absolute;
  opacity: 0.5;
  font-size: 1.6em;
  font-weight: bold;
  transform: translate(-70%, 70%);
}


ol li:nth-child(odd):before {
  left: -12%;
}

ol li:nth-child(even):before {
  left: -12%;
}

ol li {
  position: sticky;
}
ol li span {
  color: #F14177;
}

ol li:nth-child(1) {
  top: 0vh;
  height: 100vh;
}
ol li:nth-child(1)::before{
  content: "1";
}
/* -------------------------------------- */

ol li:nth-child(2) {
  top: 12vh;
  height: 88vh;
}
ol li:nth-child(1)::before{
  content: "1";
}
/* -------------------------------------- */

ol li:nth-child(3) {
  top: 24vh;
  height: 76vh;
}
ol li:nth-child(3)::before{
  content: "3";
}
/* -------------------------------------- */

ol li:nth-child(4) {
  top: 36vh;
  height: 64vh;
}
ol li:nth-child(4)::before{
  content: "4";
}
/* -------------------------------------- */

ol li:nth-child(5) {
  top: 44vh;
  height: 56vh;
}
ol li:nth-child(5)::before{
  content: "";
}
/* -------------------------------------- */

ol li:nth-child(6) {
  top: 52vh;
  height: 48vh;
}
ol li:nth-child(6)::before{
  content: "1";
}
/* -------------------------------------- */

ol li:nth-child(7) {
  top: 64vh;
  height: 36vh;
}
ol li:nth-child(7)::before{
  content: "2";
}
/* -------------------------------------- */

ol li:nth-child(8) {
  top: 76vh;
  height: 24vh;
}
ol li:nth-child(8)::before{
  content: "3";
}
/* -------------------------------------- */

ol li:nth-child(9) {
  top: 100vh;
  height: 0vh;
  margin-left: -25px;
}
ol li:nth-child(9)::before{
  content: "";
}

/* -------------------------------------- */
.twitter-dm-button{
  text-shadow: none;
}
.ex{
	z-index: 2000;
	background: rgba(255,255,255,0.6);
	padding: 30px;
	line-height: 3.4rem;
}
@media (max-width: 720px) {
.ex{
  line-height: 8vw;
}
}

#logo2{
	width: 100%;
	z-index: 2000;
	margin: 100px 0 0 0;
	text-align: center;
}
#logo2 img{
	width: 50%;
	max-width: 640px;
	min-width: 320px;
	z-index: 2000;
}
#logo2 img:hover{
	filter: brightness(1.1) blur(1px) drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
}

#counter{
	width: 100%;
	z-index: 2000;
	padding: 100px 0;
	text-align: center;
  font-size: 2vh;
  text-shadow:1px 1px 0 #F4E2E2, -1px -1px 0 #F4E2E2,
              -1px 1px 0 #F4E2E2, 1px -1px 0 #F4E2E2,
              0px 1px 0 #F4E2E2,  0-1px 0 #F4E2E2,
              -1px 0 0 #F4E2E2, 1px 0 0 #F4E2E2,
			  0 1px 5px rgba(0, 0, 0, 0.6);
}
@media (max-width: 640px) {
#arrow{
	z-index: 2000;
	position: fixed;
	top: 14vh;
	left: 40%;
	font-size: 6rem;
	color: #FF5F8C;
  -webkit-animation: arrowAnim 1.5s infinite;
  animation: arrowAnim 1.5s infinite;
}
}
@keyframes arrowAnim {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
}


.white {
  width: 100vw;
  height: 120vh;
  position: fixed;
}
.white:before {
  z-index: 1000;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #FFFFFF 15%, rgba(255, 255, 255, 0) 100%);
}
.white:after {
  z-index: 1000;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#FFD4E0), to(rgba(235, 235, 235, 0)));
  background-image: linear-gradient(0deg, #FFD4E0 0%, rgba(235, 235, 235, 0) 100%);
}

.hearts {
  height: 100%;
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  color: #FF8DAD;
}

.heart {
  -webkit-animation: hearts 9.5s linear infinite;
          animation: hearts 9.5s linear infinite;
  align-self: flex-end;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  font-size: 18vw;
}
.heart:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
  -webkit-filter: blur(5px);
  font-size: 10vw;
}
.heart:nth-child(3) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-filter: blur(4px);
  font-size: 17vw;
}
.heart:nth-child(4) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-filter: blur(6px);
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
  font-size: 18vw;
}
.heart:nth-child(5) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-filter: blur(8px);
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
  font-size: 8vw;
}
.heart:nth-child(6) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-filter: blur(8px);
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  font-size: 10vw;
}
.heart:nth-child(7) {
  -webkit-filter: blur(6px);
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
  font-size: 7vw;
}
.heart:nth-child(8) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-filter: blur(5px);
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
  font-size: 10vw;
}
.heart:nth-child(9) {
  -webkit-filter: blur(8px);
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  font-size: 9vw;
}
.heart:nth-child(9) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  -webkit-filter: blur(6px);
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
  font-size: 10vw;
}

@-webkit-keyframes hearts {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(calc(-100vh + -100%));
            transform: translateY(calc(-100vh + -100%));
  }
}

@keyframes hearts {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(calc(-100vh + -100%));
            transform: translateY(calc(-100vh + -100%));
  }
}