html, body, #page{
	overflow: hidden;
}
@keyframes logo_anime {
  0% {
    stroke-dashoffset: 500;
    fill:#1e2f3f;
  }
  50%{
  	fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#ff3695;
  }
}
.sp-menu-btn:not(.is-open){
	border-color: var(--gnav-color);

}
.sp-menu-btn:not(.is-open) .-line{
	background-color: var(--gnav-color);
}
.sp-menu-btn:not(.is-open) .-line:before,
.sp-menu-btn:not(.is-open) .-line:after{
	background-color: var(--gnav-color);
}
.page-about .header .logo svg path {
	stroke-dasharray: 2000;
	stroke-dashoffset: 0;
	stroke-width: .5;
}
.page-about .header .logo:hover svg path {
	stroke:#ff3695;
	animation: logo_anime 0.5s ease-in 0s forwards;
	fill-opacity: 1;
}
.page-about #slideContainer{
	width: calc(100% * 7);
}
.page-about #pinContainer{
	width: 100%;
}
.page-about #pinContainer .sec-title {
	word-break: keep-all;
	white-space: nowrap;
}
.page-about .panel{
	width: calc(100% / 7);
}
.page-about #sec0{
	background: url(../images/about_intro.png) 50% 50%;
	background-size: cover;
}


@media(max-width: 767px){
	html, body, #page{
		overflow: inherit;
	}
	.page-about .box-title img{
		width: 200px;
	}
	.page-about .text-img img{
		width: 250px;
	}
}