@charset "UTF-8";
/* CSS Document */
	/*共通CSS*/
	/*WordPress対策・全ページ余白なし*/
	* {
		margin: 0;
		padding: 0;
	}

	:root {
	--depth: 500px;
	--turnLeft: 0.06turn;
	--turnRight: -0.06turn;
	--turn: var(--turnRight);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.ds{
	height: 100vh;
	overflow-y: scroll;
  scroll-snap-type: y mandatory;
	background: hsl(0 0% 10%);
	perspective: 1000px;
	perspective-origin: 50% 35%;
}

.building {
	transform-style: preserve-3d;
}

.room {
	position: relative;
	border: 4vh solid hsl(0 0% 10%);
	height: 80vh;
	width: 100vw;
	scroll-snap-align: center;
	transform-style: preserve-3d;
}

.room + .room {
	border-top: 0;
}

.room::before,
.room::after {
	content: '';
	position: absolute;
	height: var(--depth);
	width: 100%;
	backface-visibility: hidden;
}

.room::before {
	background:
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		lightgray;
	/* TODO: Change back to -90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotatex(-89.99999deg) scale(1.001);
	transform-origin: center top;
}

.room::after {
	bottom: 0;
	background:
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		url(https://images.unsplash.com/photo-1555505019-8c3f1c4aba5f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3300&q=80) center top / cover,
		sandybrown;
	/* TODO: Change back to 90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotateX(89.99999deg);
	transform-origin: center bottom;
}

.room-walls {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, hsl(0 0% 90%) 2.5vh, transparent 0),
		radial-gradient(hsl(0 0% 0% / 30%), hsl(0 0% 0% / 50%)),
		url(https://images.unsplash.com/photo-1460501501851-d5946a18e552?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3300&q=80) center / cover,
		darkgray;
	transform: translatez(calc(var(--depth) * -1));
	transform-style: preserve-3d;
}

.room-walls::before,
.room-walls::after {
	content: '';
	position: absolute;
	height: 100%;
	width: var(--depth);
}

.room-walls::before {
	right: 100%;
	background:
		linear-gradient(to top, hsl(0 0% 75%) 2.5vh, transparent 0),
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		url(https://images.unsplash.com/photo-1620153874520-aabdacf78006?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3200&q=80) center / cover,
		gray;
	/* TODO: Change back to 90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotatey(89.99999deg);
	transform-origin: right center;
}

.room-walls::after {
	left: 100%;
	background:
		linear-gradient(to top, hsl(0 0% 75%) 2.5vh, transparent 0),
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		url(https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2560&q=80) center / cover,
		gray;
	/* TODO: Change back to -90deg after Webkit fixes https://bugs.webkit.org/show_bug.cgi?id=265309 */
	transform: rotatey(-89.99999deg);
	transform-origin: left center;
}

.room-content {
	display: grid;
	place-content: center;
	height: 100%;
	width: 100%;
	color: white;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: clamp(1em, 20vmin, 8em);
	font-weight: 200;
	text-align: center;
	text-shadow: 0 5px 10px hsl(0 0% 0% / 20%);
	transform: translatez(calc(var(--depth) / -2)) rotatey(var(--turn));
}

.room:nth-child(odd) > .room-content {
	--turn: var(--turnLeft);
}

	
	body {
		margin: 0;
		padding: 0;
		color: #3C3C3C;
		background: #fff;
		font-family: '小塚ゴシック Pro', 'Kozuka Gothic Pro', sans-serif;
	}
	
	img {
		vertical-align: bottom; /*下に余白を作らない*/
		max-width: 100%;
		width: 100vw;
	}
	
	p,h1,h2,h3,h4,span {
	}
	
    ul li{
		list-style: none;
	}

	a {
		text-decoration: none;
		color:#000;
	}

	a:hover{
		opacity: 0.7;
	}

	.anker{
		margin-top: -50px;
		padding-top: 50px;
	}

	/* input全体に指定する場合は以下 */
input{
    -webkit-appearance: none;
}

input[type="checkbox"] {
    appearance: auto !important;
	width: 13px !important;
    height: 13px !important;
}
	
	.wrap {
		overflow: hidden;
	}
	
	/*floatを解除する*/
	.clear {
		clear: both;
	}

	.all-page {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
	}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*PC*/
@media only screen and (min-width: 769px){	
		.sp { display: none !important; }
	
	.top_page {
		padding-top: 70px;
	}
	
	.main_wrap {
		position: relative;
		width: 900px;
		margin: 0 auto;
	}

	/*ヘッダー＆フッター*/
		/*グローバルメニュー*/
		header {
			position: fixed;
			z-index: 104;
			width: 100%;
			background: #000;
			font-family: '小塚ゴシック Pro', 'Kozuka Gothic Pro', sans-serif;
		}
	
		.cont_wrap{
			position: relative;
			width: 1000px;
			margin:0 auto;
		}
		
		#header-content {
			position: relative;
			display: inline-block;
			z-index: 102;
			width: 600px;
			height:auto;
		}

		.header-box{
			position: relative;
			display: inline-block;
			margin: 20px 0;
			text-align: center;
			font-size: 0;
		}
		
	    .head-menu{
			display: inline-block;
			position: relative;
			width: 134px;
			text-align: center;
			border-left: 1px solid #fff;
		}
		
		.head-menu:last-child {
			border-right: 1px solid #fff;
		}
	
		.header-content01 {
			display: inline-block;
			position: relative;
			font-size: 16px;
			text-align: center;
			font-weight: 600;
			color: #fff;
		}
	    
	    .header-content01 span{
			display: block;
			margin-top: 1px;
			font-size: 10px;
			font-weight: 100;
	    }
	
	    .header-content01:hover {
			cursor: pointer;
	    }
	
		#logo {
			position: relative;
			display: inline-block;
			z-index: 102;
			width: 150px;
			height: auto;
			padding: 12px;
		}
		/*フッター*/
		footer {
			position: relative;
			z-index: 1;
			width: 100%;
			margin: 0 auto;
			height: auto;
			font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
		}
	
		.footer-box{
			position: relative;
			width:100%;
			height: auto;
			text-align: center;
			margin: 0 auto;
			padding: 40px 0;
			color: #fff;
			background: #000;
		}
	
		.footer-credit {
			position: relative;
			padding: 10px 0;
			background: #0075c1;
    		color: #fff;
			font-size: 16px;
			text-align: center;
		}
	
		.logo-foot {
			width: 150px;
        	margin: 20px auto;
		}
	
		.add-area {
			font-size: 16px;
			color: #fff;
			font-weight: bold;
		}
}
	/*トップページ*/
	/*PC*/
@media only screen and (min-width: 769px){
		/*トップページ*/
	#myCanvas{
		width: 900px;
		height: 600px;
	}
}