@charset "utf-8";

html,body{
height: 100vh;
overflow:hidden !important;
}
/* ローディング中はヘッダー、メイン、フッターボタンを非表示にする */
.header-area,
.top-cotent,
#top-ftrBtn {
opacity: 0; /* 透明にする */
    visibility: hidden; /* 見えなくし、操作もできなくする */
    transition: opacity 0.5s ease; /* 0.5秒かけてじわっと表示 */
}

.rundingArea{
  width: 100%;
  min-height: 100vh;
	position: relative;	
   
}
.rundingArea-logo{
	display: none;
	width: 300px;
	position: absolute;
	left: 20px;
	top: 20px;
}
.rundingArea-logo img{width: 80%;}


.rundingArea-man{
	display: none;
	width: 245px;
	position: absolute;
	top: 38%;
	z-index: 100;
  right: 0;
  left: 0;
  margin: auto;
}
.rundingArea-man img{width: 100%;}

.rundingArea-city{
	display: none;
	position: absolute;
	top: 55%;
  width: 100%;}
.rundingArea-city__in {
  width: 100%;
	min-height:100vh;
  background: url('../img/top/city.png') repeat-x;
  animation: scroll-city 13s linear infinite;
	animation-direction:reverse; 
}

.rundingArea-txt {
    position: absolute;
    top: 20%;
    overflow: hidden; 
    visibility: hidden;
    opacity: 0;
    white-space: nowrap;
    height:180px !important;
}
@media screen and (min-width:751px){
.rundingArea-txt{height:300px !important;}
}

/* アニメーションさせるコンテンツ（テキスト画像）の定義 */
.rundingArea-txt__content {
    display: inline-block;  
    font-size:medium;
    width: 100vw;
    height: 100% !important;
    animation: scroll-double 8s linear infinite;
}
.rundingArea-txt__content img{
height: 100%;
width: 100%;
height:auto;
display: block;
}

/* 要素の移動を定義するキーフレーム */
@keyframes scroll-double {
  /* 0%から-100%へ移動（要素幅の100%分左へ移動） */
  100% {
    transform: translateX(-100%);
  }
}

@keyframes scroll-city {
  100% {
    background-position: -100% 0;
  }
}
@keyframes scroll-txt {
  100% {
    background-position: -100% 0;
  }
}

/* ---movie */
.move-area{
 display:flex;
 justify-content: center;
 align-items: center;
 background-color:#fff;
}

@media screen and (min-width:751px){
.move-area{
width: 100vw;
}
}

/* =========== スマホ表示 */
@media screen and (max-width: 750px){

	.rundingArea-man{
		width: 200px;
	}
	.rundingArea-txt{
	top: 30%;
	}
	.rundingArea-txt__in {
  background-size: 700px;
    animation-direction:reverse;
     
	}
	
	.rundingArea-city {
	top: 60%;}
	.rundingArea-city__in {
  background-size: 1000px;
		animation-direction:normal; 
 }

.rundingArea-txt {
top: 15%;
}
.rundingArea-txt__content { 
width: 950px;
}
.rundingArea-txt__content img{
width: 950px;
}
.move-area{
 height:100vh;
}
.runding-move{
	height: 80%;
	width: auto;
	object-fit:contain;
}

}