@charset "UTF-8";

/*----------------------------
* 
* scrollgimig css
* v1.1
* lastupdate:2025.01.06
* 
-----------------------------*/


:root{
	
	/* size height*/
	--scroll-target-height    :500px;
	--scroll-target-height-pc :400px;
	--scroll-target-height-tab:350px;
	--scroll-target-height-sp :300px;
	
	/* scrollbar */
	--scrollbar-color1:#6cc1c7;
	--scrollbar-color2:#FFF;
}


/*-------------------------------------

base

-------------------------------------*/

.scroll-target{
  overflow-x:visible;
  overflow-y: hidden;
  -webkit-overflow-scrolling:touch;
  position: relative;
	cursor: grab;
	-webkit-scrollbar-width: none;
					scrollbar-width: none;
}
.scroll-target:active{
	cursor: grabbing;
}

.scroll-target img{
  width:auto;
  height: 100%;
	display: block;
}

.scroll-target::-webkit-scrollbar{
  width:0px;
	display: none;
}
.scroll-target::-webkit-scrollbar-track{
  height: 10px;
	background-color: transparent;
}

.view-note{
	font-size:10px;
	position: absolute;
	bottom:10px; right: 10px;
	color:#fff;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.view-note.black {
  color: #000;
}

.scroll-inner{
  width:100%;
  height: 100%;
}

.scroll-container{
  width:100%;
  /*max-width:2500px;*/
  margin: 0 auto 0px;
  position: relative;
}

.scroll-container .view-arrow-cls{
  position: absolute;
  top:50%; transform: translateY(-50%);
  width:40px;
  cursor: pointer;
}
.scroll-container .view-arrow-cls img{width:100%; height: auto; display: block;}

.scroll-container .view-arrow-cls.arrow-left{
  left: 20px;
}
.scroll-container .view-arrow-cls.arrow-right{
  right: 20px;
}

.scroll-container.ios-cls .view-arrow-cls.arrow-right{
	right: 10px;
}

@media screen and (max-width:600px){
  .scroll-container .view-arrow-cls{
    width:30px;
  }
  .scroll-container .view-arrow-cls.arrow-left{
    left: 10px;
  }
  .scroll-container .view-arrow-cls.arrow-right{
    right:10px;
  }
}



.scroll-target .view-img2{
	position: absolute;
	top:0; left: 0;
	opacity: 0;
	transition: 1s ease 0s opacity;
	pointer-events: none;
}
.scroll-target .view-img2.active{
	opacity: 1;
}

/*-------------------------------------

size

-------------------------------------*/

.scroll-target{
	height:var(--scroll-target-height);
}

@media screen and (max-width:960px){
  .scroll-target{
    height:var(--scroll-target-height-pc);
  }
}

@media screen and (max-width:768px){
  .scroll-target{
    height:var(--scroll-target-height-tab);
  }
}

@media screen and (max-width:600px){
  .scroll-target{
   height:var(--scroll-target-height-sp);
  }
}


/*-------------------------------------

scroll bar

-------------------------------------*/

.scrollbarX .scroll-target{
	overflow-x: scroll;
	scrollbar-width: auto;
}

.scrollbarY .scroll-target{
	overflow-y: scroll;
	scrollbar-width: auto;
}
.scrollbarY .scroll-target img{
  width:auto;
  height: 150%;
}

.scrollbarX .view-note{
	bottom:26px;
}
.scrollbarY .view-note{
	right:26px;
}

.scrollbarY .scroll-target::-webkit-scrollbar,
.scrollbarX .scroll-target::-webkit-scrollbar{
	width: 10px;
	display: block;
	background: var(--scrollbar-color1);
}
.scrollbarY .scroll-target::-webkit-scrollbar:horizontal,
.scrollbarX .scroll-target::-webkit-scrollbar:horizontal{
	height: 10px;
	background: var(--scrollbar-color1);
}
.scrollbarY .scroll-target::-webkit-scrollbar-thumb,
.scrollbarX .scroll-target::-webkit-scrollbar-thumb{
	background: var(--scrollbar-color2);
	border-radius: 10px;
	border:3px solid var(--scrollbar-color1);
	box-sizing: border-box;
}
.scrollbarY .scroll-target::-webkit-scrollbar-thumb:horizontal,
.scrollbarX .scroll-target::-webkit-scrollbar-thumb:horizontal{
	background: var(--scrollbar-color2);
	border-radius: 5px;
}

.scroll-container.scrollbarY{
	margin-bottom: 0px;
}

.scroll-container.scrollbarX{
	margin-bottom: 0px;
}

.scrollbarY:not(.scrollbarX) .scroll-target{
	overflow-x: hidden;
	overflow-y: scroll;
}
.scrollbarY:not(.scrollbarX) .scroll-target img{
  width:100%;
  height: auto;
}


/*-------------------------------------

change btn

-------------------------------------*/
.scroll-btn-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 1rem auto 1rem;
	/*background-color: #000;*/
	width:30%;
	min-width:200px;
	max-width:400px;
}

.scroll-btn-container .scroll-btn-cls{
	width:50%;
	max-width:200px;
	text-align: center;
	padding: 1rem 0rem;
	cursor: pointer;
	color:#fff;
	background-color: rgba(45,90,159,1.00);
	opacity: 0.5;
	transition: 0.3s ease 0s opacity;
}
.scroll-btn-container .scroll-btn-cls.active,
.scroll-btn-container .scroll-btn-cls:hover{
	opacity: 1;
}


/*-------------------------------------

#custom

-------------------------------------*/
.view-scroll-wrap .img .scroll-img { text-align: center; height: 480px; }
.view-scroll-wrap .img .scroll-img img { width: 100vw; height: 100%; object-fit: cover; object-position: center bottom; }
.view-scroll-wrap .img .scroll-icon { width: 30%; background-color: #868687; mix-blend-mode: multiply; display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 4px; transition: opacity 1s linear 0s; }
.view-scroll-wrap .img .scroll-icon::before, .view-scroll-wrap .img .scroll-icon::after { content: ""; width: 100%; display: block; padding-bottom: 15%; }
.view-scroll-wrap .img .scroll-icon p { width: calc((82/260)*100%); text-align: center; display: block; margin: 0 auto; opacity: 0; animation: icon-motion 1.5s cubic-bezier(0.3, 0, 0.38, 1) 0s infinite; }
@keyframes icon-motion { 0% { opacity: 0; transform: translateX(-40%); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(40%); } }
@media screen and (min-width: 2600px) { .view-scroll-wrap .img .scroll-icon { display: none; } }
.view-scroll-wrap .img.aos-animate .scroll-icon { transition-delay: 2.5s; opacity: 0; }


.scrollgimicArea #view_1{
}

.scrollgimicArea .view-caption{
	max-width:200px;
	width:40%;
	position: absolute;
	top:50%; left: 50%;
	translate:-50% -50%;
	pointer-events: none;
}

.scrollgimicArea .icon{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
	pointer-events: none;
  z-index: 10;
}
.scrollgimicArea .icon .scroll-icon{
	width:30%;
	max-width:200px;
}
.scrollgimicArea .scroll-img {
  margin-top: 10px;
}
@keyframes viewCaptionFade{
		0%{ opacity:1; }
	100%{ opacity:0; }
}
.scrollgimicArea .view-caption.fadeOut{
	animation: viewCaptionFade 0.5s ease 0s forwards;
	
}
.scrollgimicArea .view-caption img{width:100%; height: auto;}


@media screen and (min-width:769px){ /*---------------- max-width */
	.scrollgimicArea .view-caption{
		display: none;
	}
}

@media screen and (min-width:2600px){ /*---------------- min-width */
  .scrollgimicArea .scroll-target{
    height:auto;
		width:100%;
  }
	.scrollgimicArea .scroll-target img{
		width:100%;
		height: auto;
	}
  .scrollgimicArea .scroll-container .view-arrow-cls.arrow-left{
    display: none;
  }
  .scrollgimicArea .scroll-container .view-arrow-cls.arrow-right{
    display: none;
  }
}


/*各スクロールごとに調整*/

/*access*/
#simulation1 .scroll-target{
  height: 420px;
}
#simulation2 .scroll-target{
  height: 420px;
}
#tx-rosenzu .scroll-target{
  height: 330px;
}
#tx-rosenzu + .scroll-img {
  margin: 20px auto;
}
#taxi_scroll .scroll-target{
  height: 340px;
}
#taxi_scroll + .scroll-img {
  margin: 20px auto;
}


/*position*/
#posi_accessmap .scroll-target{
  height: 720px;
}
#posi_illustmap .scroll-target{
  height: 720px;
}
#posi_flat .scroll-target{
  height: 320px;
}


/*location*/
#loc_illustmap .scroll-target{
  height: 720px;
}
#loc_flat .scroll-target{
  height: 300px;
}