/* req_sc01 レイアウト */
.obj_inner {
	position: relative;
	max-width: 1300px;
	height: calc(100svh - 80px);
	margin: auto;
}
.obj0 {
	width: 100%;
	height: calc(100svh - 80px);
	position: fixed;
	top: 0;
	left: 0;
	background-color:rgba(255,255,255,0.9);
	z-index: 999999999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.scroll_info {
	width: 50px;
	height:70px;
	animation: scroll_ani 1.5s infinite;
}
@keyframes scroll_ani {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.req_sc01 {
	height: 100vh;
}
.req_sc01 h1, .req_sc02 h1 { /*テキスト位置固定*/
	text-align: center;
	width: 80%;
	max-width: 460px;
	margin:2vh auto 0 auto;
	height:auto;
	position: absolute;
    left: 0;
    right: 0;
	/* padding-top: 2rem; */
	/* font-size: clamp(4em, calc(1.25vw + 1.5rem), 5rem); */
}
.req_sc01 h1 img, .req_sc02 h1 img {
	height:auto;
	width:100%;
}
	@media (max-width: 900px) { 
		.req_sc01 h1, .req_sc02 h1 {
		margin:-1rem auto 0;
			/* font-size: clamp(3em, calc(1.25vw + 1.5rem), 4rem); */
		}
	}
.req_sc01 {
	width: 100%;
    /* min-width:1000px; */
	height: calc(100vh - 80px);
	height: calc(100svh - 80px);
	position: relative;
	z-index: 2;
/*
	background-image:url("../img/top/thum.svg");
*/
	/*background-image:url("../img/top/1-000.svg");*/
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center bottom;
}
	@media (max-width: 900px) { 
		.req_sc01 {
			max-width:100%;
			margin:auto;
			overflow: hidden;
		}
	}
.req_sc01 .def_inner {
	position: relative;
	width:100%;
	max-width:none;
    /* min-width: 1000px; */
	margin:auto;
	z-index: 10;
	height: calc(100vh - 80px);
	height: calc(100svh - 80px);
}
	@media (max-width: 900px) { 
		.req_sc01 .def_inner {
			max-width:100%;
			position: relative;
		}
	}
/* obj 初期位置 */

.objtx {
	height: calc(100vh - 80px);
	height: calc(100svh - 80px);
	background-size:contain;
	background-repeat: no-repeat;
	background-position: top center;
	position: absolute;
}

.obj1,
.obj2,
.obj3,
.obj4,
.obj5,
.obj7,
/*追加*/
.obj7open,
.obj7town01,
.obj8,
.obj9,
.obj10,
.obj11 {
	height: calc(100vh - 80px - 7vh);
	height: calc(100svh - 80px - 7vh);
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
}
.obj1 span img,
.obj2 span img,
.obj3 span img,
.obj4 span img,
.obj5 span img,
.obj7 span img,
/*追加*/
.obj7open span img,
.obj7town01 span img,
.objtx span img,
.obj8 span img,
.obj9 span img,
.obj10 span img,
.obj11 span img {
	display: none;
	width: 22vw;
	max-width: 320px;
}
	@media (max-width: 900px) {
		.obj1 span img,
		.obj2 span img,
		.obj3 span img,
		.obj4 span img,
		.obj5 span img,
		.obj7 span img,
		/*追加*/
		.obj7open span img,
		.obj7town01 span img,
		.objtx span img,
		.obj8 span img,
		.obj9 span img,
		.obj10 span img,
		.obj11 span img {
			display: none;
			width: auto;
			max-width: 320px;
		}
	}
.obj1 {
	width:400px;
	background-image:url("../img/top/1-001.svg");
	background-position: bottom;
	z-index: 50;
	bottom: 12vh;
	left: 12%;
}
	.obj1 span img {
		position: absolute;
		bottom: 45vh;
		right: -5vw;
	}
	@media (max-width: 1200px) {
		.obj1 {
			left: 10%;
		}
	}
	@media (max-width: 900px) {
		.obj1 {
			width:300px;
			left: 15%;
			bottom: 12vh;
		}
	}
	@media (max-width: 767px) {
		.obj1 {
			width:280px;
			left: 15%;
			bottom: 12vh;
		}
	}
.obj2 {
	width:460px;
	background-image:url("../img/top/1-002.svg");
	background-position: bottom;
	z-index: 40;
	bottom: 7vh;
	left: 0;
}
	.obj2 span img {
		position: absolute;
		bottom: 41vh;
		right: 0;
	}
	@media (max-width: 1200px) {
		.obj2 {
			left: 3%;
		}
	}
	@media (max-width: 900px) {
		.obj2 {
			width:50vW;
			left: 0;
			bottom: 4vh;
			top: auto;
		}
		.obj2 span img {
			position: absolute;
			bottom: 38vh;
			right: 0;
		}
	}
	@media (max-width: 767px) {
		.obj2 {
			width:300px;
			left: 0;
			bottom: 4vh;
			top: auto;
		}
		.obj2 span img {
			position: absolute;
			bottom: 38vh;
			right: 0;
		}
	}
.obj3 {
	width:300px;
	background-image:url("../img/top/1-003.svg");
	background-position: bottom;
	z-index: 20;
	right: 26%;
	bottom: 12vh;
}
	.obj3 span img {
		position: absolute;
		bottom: 46vh;
		right: 0;
	}
	@media (max-width: 1200px) {
		.obj3 {
			right: 26%;
		}
	}
	@media (max-width: 900px) {
		.obj3 {
			background-size:220px auto;
			width:300px;
			bottom: 42vh;
			right: 15%;
		}
		.obj3 span img {
			position: absolute;
			bottom: 42vh;
			right: 0;
		}
	}
	@media (max-width: 767px) {
		.obj3 {
			background-size:160px auto;
			width:200px;
			bottom: 38vh;
			right: 15%;
		}
		.obj3 span img {
			position: absolute;
			bottom: 42vh;
			right: 0;
		}
	}
.obj4 {
	width:460px;
	background-image:url("../img/top/1-004.svg");
	background-position: bottom;
	z-index: 20;
	bottom: 12vh;
	left: 25%;
}
	.obj4 span img {
		position: absolute;
		bottom: 36vh;
		right: 0;
	}
	@media (max-width: 1200px) {
		.obj4 {
			left: 15%;
		}
	}
	@media (max-width: 900px) {
		.obj4 {
			
			width:45vw;
			bottom: 30vh;
			left: 0;
		}
	}
	@media (max-width: 767px) {
		.obj4 {
			width:300px;
			bottom: 30vh;
			left: 0;
		}
	}
.obj5 {
	width:400px;
	background-image:url("../img/top/1-005.svg");
	background-position: bottom;
	z-index: 50;
	bottom: 7vh;
	right: 5%;
}
	.obj5 span img {
		position: absolute;
		bottom: 39vh;
		right: 5vw;
	}
	@media (max-width: 1200px) {
		.obj5 {
			right: 5.4vw;
		}
	}
	@media (max-width: 900px) {
		.obj5 {
			width:45vw;
			right: 0;
			bottom: 8vh;
		}
	}
	@media (max-width: 767px) {
		.obj5 {
			width:300px;
			right: 0;
			bottom: 8vh;
		}
	}
.obj6 {
	width: 100%;
	height:14.5vh;
	position: absolute;
	bottom: 0;
	border-top: solid 3px #333;
	background-color: #fff;
	z-index: 11;
}
	@media (max-width: 900px) { 
		.obj6 {
			width:100%;
			height:43vh;
			bottom: 0;
		}
	}
	@media (max-width: 767px) { 
		.obj6 {
			width:100%;
			height:43vh;
			bottom: 0;
		}
	}
.obj7 {
	width:825px;
	background-image:url("../img/top/01-door_825.svg");
	z-index: 10;
	top: 0px;
	left: calc(50% - 412.5px);
}
	@media (max-width: 900px) {
		.obj7 {
			width:auto;
			height: 65%;
			margin: auto;
			top: -6%;
			left: 0;
			right: 0;
		}
	}
/*.openのところの.を削除*/
.obj7open {
	width:825px;
	background-image:url("../img/top/01-door_open_825.svg");
	background-position: center;
	z-index: 10;
	top: 0px;
	left: calc(50% - 412.5px);
}
	@media (max-width: 900px) {
		.obj7open {
			width:auto;
			height: 65%;
			margin: auto;
			top: -6%;
			left: 0;
			right: 0;
		}
	}

/*ドアが開いたところの景色*/
.obj7town01 {
	width:825px;
	background-image:url("../img/top/01-door_town_825.svg");
	z-index: 9;
	top: 0px;
	left: calc(50% - 412.5px);
}
	@media (max-width: 900px) {
		.obj7town01 {
			width:825px;
			margin: auto;
			top: 0;
			left: calc(50vw - 412.5px);
			right: 0;
		}
	}
/*テキストタイトル追加*/
.objtx {
	width:400px;
	background-image:url("../img/top/text_title.svg");
	z-index: 15;
	top: 65px;
	left: 39.5vw;
}

.obj8 {
	width:200px;
	background-image:url("../img/top/1-000_flower.svg");
	background-position: bottom;
	z-index: 12;
	bottom: 13vh;
	right: 0;
}
	@media (max-width: 1200px) {
		.obj8 {
			right: 2vw;
		}
	}
	@media (max-width: 900px) {
		.obj8 {
			width:100px;
			bottom: 42vh;
		}
	}
	@media (max-width: 767px) {
		.obj8 {
			width:100px;
			bottom: 42vh;
		}
	}
.obj9 {
	width:200px;
	background-image:url("../img/top/1-000_flower2.svg");
	background-position: bottom;
	z-index: 12;
	bottom: 13vh;
	left: 0;
}
	@media (max-width: 1200px) {
		.obj9 {
			left: 2vw;
		}
	}
	@media (max-width: 900px) {
		.obj9 {
			width:120px;
			top: auto;
			bottom: 42vh;
		}
	}
	@media (max-width: 767px) {
		.obj9 {
			width:120px;
			bottom: 42vh;
			background-position: center bottom;
		}
	}
.obj10 {
	width:250px;
	background-image:url("../img/top/1-000_flower3.svg");
	z-index: 10;
	top: 0px;
	left: 18%;
}
	@media (max-width: 1200px) {
		.obj10 {
			left: 5vw;
		}
	}
	@media (max-width: 900px) {
		.obj10 {
			display: none !important;
		}
	}
.obj11 {
	width:15vw;
	background-image:url("../img/top/1-000_clock.svg");
	background-position: top;
	z-index: 10;
	top: 0px;
	right: 5%;
}
	@media (max-width: 1200px) {
		.obj11 {
			right: 5%;
		}
	}
	@media (max-width: 900px) { 
		.obj11 {
		}
	}
	@media (max-width: 767px) { 
		.obj11 {
		}
	}
.back_screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #fff;
	opacity: 0;
	z-index: 900;
	transition: all .3s ease-out;
}
[class^="mess"] {
	opacity:0;
	min-width: 250px;
	height: 150px;
	background: #f0f0f0;
	border: 3px solid #888;
	position: relative;
	z-index: 3;
	border-radius: 6px;
	transition: all .3s ease-out;
}

/* req_sc02 レイアウト */
.req_sc02 {
	width: 100%;
    min-width: 1000px;
	height: calc(100vh - 80px);
	height: calc(100svh - 80px);
	position: relative;
	z-index: 2;
	background-image:url("../img/top/2-001.svg");
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
.req_sc02 .def_inner {
	position: relative;
	width:100%;
	max-width:none;
	z-index: 10;
}
	@media (max-width: 900px) { 
		.req_sc02 .def_inner {
			overflow-x: auto !important;
		}
	}
.town1,
.town2,
.town3,
.town4,
.town5 {
	height: calc(100vh - 81px);
	height: calc(100svh - 81px);
	width: 100%;
    min-width: 1600px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 80px;
}

.town1 {
 	background-image:url("../img/top/2-001.svg");
	z-index: 1;
	top: 0px;
}

.town2 {
 	background-image:url("../img/top/2-002.svg");
	z-index: 2;
	top: 0px;
}
.town3 {
	background-image:url("../img/top/2-003.svg");
	z-index: 3;
	top: 0px;
}
.town4 {
 	background-image:url("../img/top/2-004.svg");
	z-index: 4;
	top: 0px;
}
.town5 {
 	background-image:url("../img/top/2-005.svg");
	z-index: 5;
	top: 0px;
}

/*プログレスバー*/
.progress-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: rgba(0,0,0,0.1);
	z-index: 9999;
}

.progress-bar {
	width: 100%;
	height: 100%;
	background: #ef7a00;
	transform-origin: left center;
	transform: scaleX(0);
}

/* モバイル時、半調処理のCSS */
.white_screen{
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index:59;
}
@media (max-width: 1050px) {
  .town_wrap{
    height: calc(100svh - 200px);
	overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    top: 80px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .town_inner{
    position: relative;
    width: 1900px;   /* 必要ならもっと広く */
    height: 100%;
  }

  .town1, .town2, .town3, .town4, .town5{
    width: 1900px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .town_wrap{
    z-index: 100;
    pointer-events: auto;
  }
  .obj7open,
  .obj7town01{
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  .town_inner{
    position: relative;
    width: 1600px;   /* 必要ならもっと広く */
    height: 100%;
  }

  .town1, .town2, .town3, .town4, .town5{
    width: 1600px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}