.banner-main{
  position: relative;
  /* position: absolute; */
  top: 0;
  /* z-index: -10; */
  display: block;
  min-height: 450px;
  height: 60vh;
  width: 100vw;
  /* background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url("../images/waves_shizuoka.jpg"); */
  background-image: linear-gradient(to bottom, rgba(30, 33, 48, 0.2), rgba(30, 33, 48, 0.1)), url("../images/island.jpg");
  background-size:     cover;
  background-repeat:   no-repeat;
	background-attachment:fixed;
  /* background-position: right center; */
  /* background-position: center top; */
  background-position: bottom;
}
svg{
  shape-rendering: crispEdges!important;
}
.banner-main .svg-transition{
  display: inline-block;
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100.1%;
}
.cover-page-content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0%;
  width: 67vw;
	/* height: 90vh; */
  text-align: left;
  /* transform: translateY(-50%); */
  /* font-size: 1em; */
}
.cover-page-content h2{

}
.cover-page-content h3{

}
.cover-page-content p{

}
#tocCoverpageWrapper{
  width: 10em;
  padding: .3em .3em .3em .3em;
  text-align: left;
  /* border-bottom-right-radius: 1em; */
  /* border-top-right-radius: 1em; */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.cover-page-content li{
  /* font-size: .6em; */
  /* font-family: 'Roboto-Light'; */
  /* font-family: 'Source Sans Pro'; */
}

.hey-there{
  font-size: 20px;
}

.tip-left{
  display: block;
}
.tip-top{
  display: none;
}
.arrow-tip{
  display: block;
  position: absolute;
  bottom: 50%;
  left: 0%;
  /* z-index: 13; */
  width: 15px;
  /* filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0.2)); */
  transform: translate(-100%,50%);
  /* min-width: 40px; */
}

.arrow-tip-svg{
  fill: var(--light-transparent);
}

@media (max-width: 700px) {
	body{
		min-width:375px;
	}
	.banner-main{
		height: 90vh;
    background-attachment: unset!important;
	}
  .cover-page-content{
    position: absolute;
    left: 2em;
    top: 20%;
    width: 80vw;
  	/* height: 90vh; */
    text-align: left;
    transform: translateX(0%);
    /* transform: translateY(-50%); */
    /* font-size: 1em; */
  }

  .cover-page-content .about-hinako-col-description{
    padding: 5px!important;
  }
  .cover-page-content .hey-there{
    padding: 5px!important;
    font-size: 19px!important;
  }

  .tip-left{
    display: none;
  }
  .tip-top{
    display: block;
  }
  .arrow-tip{
    display: block;
    position: absolute;
    bottom: 100%;
    left: 5%;
    /* z-index: 13; */
    width: 25px;
    /* filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0.2)); */
    transform: translate(0%,0%);
    /* min-width: 40px; */
  }

  .arrow-tip-svg{
    fill: var(--light-transparent);
    /* fill: lightgreen; */
    /* margin: 0; */
  }



}