@charset "utf-8";
/* CSS Document */


/* TOPアニメ ------------------------------------------------------------------------------ */


.gsap_top {
	width:100%;
	margin:0 0 0 0;
	position:relative;
	overflow: hidden;
	background-color: #675b55;
}
.gsap_top img {
	opacity: 0;
	vertical-align:top;
}
.gsap_top img.BG {
	width: 100%;
	height: auto;
}

.gsap_top img.s-img {
	position: absolute;
	bottom:0;left:0;width: 100%;height: auto;
}

/*
.gsap_top .s_white {
	background-color: #fff;
	position: absolute;
	bottom:0;left:0;width: 100%;height: 100%;
	opacity: 0;
}
*/

/*-----*/
.gsap_top img.skipbtn {
	position: absolute;
	left: 0.5%;
	bottom: 0.7%;
	width: 6vw;
	height: auto;
	transition: .3s;
}


.gsap_top img.skipbtn:hover {
	opacity: 1!important;
	filter: drop-shadow(0 0 5px #000);
	-webkit-filter: drop-shadow(0 0 5px #000);
  cursor: pointer;
}
/*-----*/


.gsap_top img.btn_kp {
	position: absolute;
	left: 50%;
	bottom: 0.7%;
	width: 6vw;
	height: auto;
	transition: .3s;
  display:none;opacity: 0;
}


.gsap_top img.btn_kp:hover {
	opacity: 1!important;
	filter: drop-shadow(0 0 5px #000);
	-webkit-filter: drop-shadow(0 0 5px #000);
  cursor: pointer;
}


/*-----*/

.gsap_top .s-txt {
	position: absolute;
	bottom: 1%;
	right: 0.5%;
	font-size: clamp( 9px, 0.73vw,14px);
	opacity: 0;
	color: #fff;
	/*以下黒フチ用*/
	-webkit-text-stroke: 2px #000;
	text-stroke: 2px #000;
	paint-order: stroke;
}
.gsap_top .s-txt.yokohama_cap {
	color: #000;
	/*以下白フチ用*/
	-webkit-text-stroke: 2px #fff;
	text-stroke: 2px #fff;
}

.gsap_top img.yokohama_name {
	position: absolute;
	width: 14.58vw;
	height: auto;
	left:38vw;
	bottom:13vw;
}
.gsap_top img.gaikan_txt {
	position: absolute;
	width: 28.01vw;
	height: auto;
	left:36.05vw;
	top:11.5vw;
}



.gsap_top img.yokohama_F {
	mix-blend-mode: screen;
}
.gsap_top img.yokohama_L {
  transform-origin:center bottom;
}
.gsap_top img.gaikan {
/*
	bottom: inherit;
	top:0;
*/
}

/*---丸ぽっちボタン--*/

.gsap_top .select {
  position: absolute;
  width: 100%;
  bottom: 1%;
  display: none;
  opacity: 0;
  text-align: center;
}
.gsap_top .select span {
  margin: 0 1em;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px #000;
  
}
.gsap_top .select span[class^="select"]:hover {
  cursor: pointer;
}
.gsap_top .select span:not([class^="select"]):hover {
  cursor:;
}

/* ----------------------- */
/* 1100*/
/* ----------------------- */

@media screen and (max-width: 1100px) {

.gsap_top img.skipbtn {
	width: 9vw;
}
.gsap_top img.btn_kp {
	width: 9vw;
}

}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
.gsap_top {
	margin:70px 0 0 0;
}

.gsap_top img.s-img {
	width: auto;height: 100%;max-width: none;
}

.gsap_top img.s-img.park  {left:50%;transform: translateX(-50%);}

/*.gsap_top img.s-img.catch {left: -79vw;}*/
.gsap_top img.s-img.yokohama,
.gsap_top img.s-img.yokohama_B,
.gsap_top img.s-img.yokohama_F,
.gsap_top img.s-img.yokohama_L {left: -63vw;width: 239.41vw !important;}
.gsap_top img.yokohama_name {width: 50vw;left: 24vw;top:114vw;}
.gsap_top img.s-img.gaikan2 {left: -77vw;}
.gsap_top img.s-img.gaikan  {left: -78vw;}
.gsap_top img.gaikan_txt {width: 62vw;left: 20vw;top:35vw;}


.gsap_top img.skipbtn {
	bottom: 1%;
	width: 20vw;
}
.gsap_top img.btn_kp {
	bottom: 3.7%;
	width: 20vw;
}

.gsap_top .s-txt {
	right: 1%;
}

}

/*- video ------------------------------*/

video.park {
  width: 100%;
  opacity: 0;
  position: absolute;
  top:0;
  left: 0;
  display: none;
}

.park_mask {
  background-image: url("../images/top/animation/movie_mask.png");
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
video.park {
  width: auto;
  height: 100%;
  left: -100%;
}
}