@charset "utf-8";
/* ------------------------------------------------------------ common */

body { height: 100vh; }
body::-webkit-scrollbar { -webkit-appearance: none; width: 0; height: 0; display: none; }
body, html { -ms-overflow-style: none; scrollbar-width: none; }
.loader { position: fixed; z-index: 999; background: #fff; width: 100%; height: 100%; top: 0; left: 0;  }

header { position: fixed; width: 100%; transition: 0.8s; padding: 66px 75px 66px 80px; z-index: 20; box-sizing: border-box; }
.js_header { background-color: none;}
.change_color { background-color: #e50057;  padding: 15px 50px; }

header .hr { display: flex; justify-content: space-between; align-items: center;}

.menu { transition: 0.5s; position: fixed; right: 50px; top: 30px; z-index: 22; cursor: pointer; display: block; width: 60px; height: 17px; z-index: 99; }
.menu.top { top: 80px; }
.menu.close { top: 47px; }
.menu span { transition: transform .3s; display: block; position: absolute; width: 100%; height: 2px; background-color: #fff;}
.menu span:nth-of-type(1) { top:0; }
.menu span:nth-of-type(2) { bottom: 0;}

.menu.close span:nth-of-type(1) { transform: translate(0%,7px) rotate(30deg);  }
.menu.close span:nth-of-type(2) { transform: translate(0%,-8px) rotate(-30deg); }

#footer { padding: 200px 0 0; }
footer { text-align: center; padding-bottom: 77px; }
footer img { margin-bottom: 34px;}
footer p { font-weight: 600; font-size: 12px; font-family: 'neue-haas-grotesk-display',sans-serif;}

.min100 { min-height: 100vh; box-sizing: border-box; padding: 100px 50px; }
.flex { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

.inner { width: 100%; }

/* ------------------------------------------------------------ snap scroll animation */

.snapbox { display: none; }
.snaphide { transition: 0.5s; opacity: 0;}
.snappart { position: relative; }
.snappart.active .snaphide { opacity: 1; }
.snappart.active { z-index: 1; }
.phrase_img.snappart .overlay { box-sizing: border-box; }
.phrase_img.snappart .overlay:before,
.phrase_img.snappart .overlay:after { transition: 0.5s; opacity: 0; }
.phrase_img.snappart .overlay .phrase_inner { color: #282828;  transition: color 0.5s; transition: 0.5s; border: 1px solid #9d9d9d; }
.phrase_img.snappart .overlay .phrase_inner p::after { background: #9d9d9d; width: 0%; }
.phrase_img.snappart .overlay .phrase_inner h4::after { background: #9d9d9d; width: 0%; }

.phrase_img.snappart .overlay.active .phrase_inner { color: #fff;  border: 1px solid #fff; }
.phrase_img.snappart .overlay.active:before,
.phrase_img.snappart .overlay.active:after  { opacity: 1; }
.phrase_img.snappart .overlay.active .phrase_inner p::after { background: #fff; width: calc( 100% - 82px); transition: 1s ease-in-out; }
.phrase_img.snappart .overlay.active .phrase_inner h4::after { background: #fff; width: 100%; transition: 1s ease-in-out; }

/* ------------------------------------------------------------ PC break point ------------------------------------------------------------ */
@media only screen and (max-width: 1400px) { 
	.menu.top { top: 54px; }	
}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 810px) {
	
	.min100 { padding: 100px 6%; }
	
	.change_color { padding: 0 15px 10px;}

	.menu { width: 30px; height: 8.5px; top: 15px; right: 15px; transition: 0.5s; }	
	.menu.top,
	.menu.top.close { top: 42px; right: 25px; }
	.menu.close { top: 25px; right: 20px; }
	.menu.close span:nth-of-type(1) { transform: translate(0%,-1px) rotate(30deg); transition: transform .3s;}
	.menu.close span:nth-of-type(2) { transform: translate(0%,-8px) rotate(-30deg); transition: transform .3s;}
	
	#footer { padding: 100px 0 0; }
	footer { padding-bottom: 150px;}
	footer img { margin-bottom: 19px;}
	footer p { font-size: 10px;}

	.phrase_img.snappart .overlay.active .phrase_inner p::after { width: calc( 100% - 41px); }
	.phrase_img.snappart .overlay.active .phrase_inner h4::after { }
}