@charset "utf-8";

/* mainvisual */
#main-image{position:relative;}

.gate-box{position: relative;display: block;overflow: hidden;}

.gate-img{overflow: hidden;width: 100%;height: 100vh;max-height: 62.5rem;}
	@media only screen and (max-width:991px)	{.gate-img{height: 50vw;}}
	@media only screen and (max-width:575px)	{.gate-img{height: 75vw;}}
	
.gate-img img{opacity:.5;transform:scale(1);transition:opacity .3s,transform .3s;position:absolute;top:0;left:0;right:0;bottom:0;max-width:inherit;max-height:inherit;width:100%;height:100%;margin:auto;font-family:'object-fit:cover;';object-fit:cover;}
	@media only screen and (max-width:575px)	{.gate-img img{}}
	
.gate-box:hover .gate-img img{opacity:.75;transform:scale(1.05);transition:opacity .3s,transform .3s;}
	
.gate-title{position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;flex-flow:column wrap;justify-content:center;align-items:center;}
	
.gate-title h2{font-size:4.5em;line-height: 1;text-align: center;color:#FFF;font-weight: 800;text-shadow:0 0 .5em rgba(0,0,0,.1);}
	@media only screen and (max-width:1999px)	{.gate-title h2{font-size:3.6vw;}}
	@media only screen and (max-width:991px)	{.gate-title h2{font-size:2.25em;}}
	@media only screen and (max-width:767px)	{.gate-title h2{font-size:1.75em;}}


.gate-title h2 small{font-size:.45em;line-height: .75;display: block;margin-top: 1em;text-transform: uppercase;}
	@media only screen and (max-width:991px)	{.gate-title h2 small{font-size:;}}
	@media only screen and (max-width:767px)	{.gate-title h2 small{font-size:;}}
	@media only screen and (max-width:575px)	{.gate-title h2 small{font-size:;}}


.shop-call{position: absolute;right: 0;bottom: 0;font-size: 1.5em;line-height: 1;padding: .5em 1em;background-color: rgba(255,255,255,1);display: block !important;z-index: 9;}




.scroll{position: absolute;right: 2rem;bottom: 2rem;z-index: 99;font-family: 'lato',sans-serif;font-weight: bold;}
	@media only screen and (max-width:991px)	 {.scroll{right: 1rem;bottom: 1rem;}}
	@media only screen and (max-width:767px)	 {.scroll{display: none;}}

.scroll img{width: auto;height: auto;}
	@media only screen and (max-width:991px)	 {.scroll img{width: 3rem;}}
	@media only screen and (max-width:767px)	 {.scroll img{width: 1.5rem;}}

.scroll a{transform:translate(0,0);display: block;}

.scroll a:hover{transform:translate(0,1rem);}