@charset "utf-8";

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    overflow: auto;
    text-align: center;
    /* background-color: #ece5da; */
    margin: 0;
    padding: 0;
    font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "SimSun", "Meiryo", "ŸàƒSƒVƒbƒN", "ƒqƒ‰ƒMƒmŠpƒS ProN", "Arial", sans-serif;
}
a { text-decoration: none; }

::selection {
    color:#f00;
}
::-moz-selection {
    color:#f00;
}
::-webkit-selection {
    color:#f00;
}

.main {
    flex: 1;
    width: 90%;
    margin: auto;
}
footer {
    /* visibility: hidden; */
    opacity: 0.01;
    padding: 5px;
    border-top: 1px dashed #ccc;
}
#container {
  left: 50%;
  top: 30%;
  position: absolute;
  transform: translate(-50%, -30%);
}
.gray-text {
    /* font-family:'Dosis'; */
    font-weight: bold;
    color: #888;
    /*
    text-align: center;
    margin-top: 20px; */
}

.path1 {
    opacity:0.974;
}
.path2 {
    opacity:0.985;
}

h3 {
  /* margin: 20px; */
  color: #000;
  text-transform: uppercase;
  letter-spacing: -2px;
}
h3 span {
  display: inline-block;
  font-size: 56px;
  line-height: 56px;
  /* color: #f1ebe5; */
  color: #000;
  text-shadow: 0 13.36px 8.896px #ccc,0 -2px 1px #fff;
  letter-spacing: -4px;
  cursor: pointer;
}
.marker_yellow {
    background: linear-gradient(transparent 80%, #f8e81c 0);
    /*
    font-weight: 700;
    font-family: sans-serif;
    */
}


.arrow {
/*
    position: absolute;
    top: 50%;
    left: 50%;
*/
    display: inline-block;
    position: relative;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
    margin-left: 60px;
}
.arrow span {
    display: block;
/*
    width: 1.5vw;
    height: 1.5vw;
*/
    width: 28px;
    height: 28px;
    border-bottom: 10px dotted #EB984E;
    border-right: 10px dotted #EB984E;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2) {
    animation-delay: -0.2s;
}
.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}
@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}