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

@keyframes write {
  0% {
	  text-shadow: 0 0 0 #fff,0 0 0 #fff;
	  transform: translate(1em,-1em);
	  filter: blur(6px);
	}
  50% {
	  opacity:1;
	  text-shadow: 0 0 0 #777,0 0 0 #777;
	  transform: translate(0,0);
	}
  100% {
	  opacity:1;
	  text-shadow: 0 0 0 #1a1a1a,0 0 0 #1a1a1a;
	  transform: translate(0,0);
	}
}

@media all{
	html{
		text-size-adjust: 100%;
	}
	
	main{
		color: #ccc;
	}
	
	img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	
	*{
		box-sizing: border-box;
	}
	
	.tategaki{
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		letter-spacing: .2em;
	}
	
	/* Animation
==================================*/
.actn {
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
	visibility: visible;
}
.actn.visible {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
}
.delay200 {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
}
.txtactn span{
	display: inline-block;
	opacity: 0;
	}
.txtactn.write span{
	animation:write 1.5s ease-out forwards;
	}
	.txtactn.write span:first-child{
		animation-delay:.3s;
		font-size: 0.5em;
		padding-bottom: 1em;
	}
	.txtactn.write span:nth-child(2){
		animation-delay:.6s;
	}
	.txtactn.write span:nth-child(3){
		animation-delay:1.1s;
	}
	.txtactn.write span:nth-child(4){
		animation-delay:1.4s;
	}
	.txtactn.write span:nth-child(5){
		animation-delay:1.8s;
	}
	
	h1{
		display: block;
		position: absolute;
		top: 0;
		right: 90px;
		width: 90px;
		height: 100%;
		background: rgba(0,0,0,.8);
		padding: 90px 10px;
	}
	h2{
		margin: 0 auto;
		padding: 2em;
	}
	
	#concept{
		padding: 60px 0;
		background: #1a1a1a;
	}
	#concept .box{
		width: 100%;
		margin-bottom: 40px;
		display: flex;
		flex-direction: column;
	}
	#concept .box .title{
		font-size: 2rem;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		letter-spacing: .1em;
		margin: 0 auto 1em;
	}
	#concept .box .imagebox{
		width: 100%;
		max-width: 400px;
		margin: 0 auto 40px;
	}
	#concept .box .textbox{
		width: calc(100% - 40px);
		max-width: fit-content;
		margin: 0 auto;
		font-size: 0.9rem;
		line-height: 2;
		text-align: justify;
	}
	#concept .roomspec{
		width: calc(100% - 40px);
		max-width: 600px;
		margin: 0 auto;
	}
	#concept .roomspec p {
		width: 100%;
		font-size: 0.923rem;
		margin-bottom: 20px;
	}
	#concept .roomspec dl {
		font-size: 1rem;
		width: 9em;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		border-top: solid 1px #ccc;
	}
	#concept .roomspec dt {
		width: 4em;
		padding: 0.5em 1em;
	}
	#concept .roomspec dd {
		width: calc(100% - 4em);
		padding: 0.5em 0;
		position: relative;
	}
	#concept .roomspec dd::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: calc(100% + 4em);
		height: 1px;
		background: #ccc;
	}
	
	#detail{
		background: rgba(26,26,26,1);
		position: relative;
		overflow: hidden;
	}
	#detail #background{
		position: absolute;
		top: 80vw;
		left: 0;
		width: 100%;
		height: 85.5vw;
		padding: 15vw 0;
	}
	#detail #background video {
		width: 100%;
		height: auto;
	}
	#detail #background::after{
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient(rgb(26, 26, 26, 1) 20%, rgba(26, 26, 26, 0.4) 30%, rgba(26, 26, 26, 0.4) 70%, rgba(26, 26, 26, 1) 80%);
	}
	#detail .box{
		width: 100%;
		height: auto;
		padding: 40px 0 80px;
	}
	#detail .box .box1{
		margin-bottom: 160px;
	}
	#detail .box .box1 .image{
		width: 100%;
		margin-bottom: 20px;
	}
	#detail .box .textbox{
		display: flex;
		flex-direction: column;
	}
	#detail .box .box1 .textbox{
		width: fit-content;
		margin: 0 auto;
		text-align: justify;
	}
	#detail .box .box2{
		max-width: 1000px;
		margin: 0 auto 150px;
		padding-bottom: 120px;
		display: flex;
	}
	#detail .box .box3,
	#detail .box .box4{
		max-width: 1000px;
		margin: 0 auto 120px;
		display: flex;
	}
	#detail article.box7{
		max-width: 920px;
		margin: 0 auto 120px;
	}
	#detail .box7 .textbox{
		width: 100%;
	}
	#detail .box7 .images{
		width: 90%;
		margin: 0 auto;
	}
	#detail .reservelink{
		margin-bottom: 80px;
	}
	#detail .reservelink a {
		display: block;
		width: fit-content;
		margin: 0 auto 10px;
		font-size: 0.825rem;
		letter-spacing: 0.3em;
		color: #fff;
		padding: 1.5em;
		text-align: center;
		background: #000;
		border: solid 1px #777;
	}
	#detail .reservelink a:hover {
		opacity: .7;
	}
	
	#ousyukutei #scrltop {
		position: fixed;
		bottom: 10px;
		right: 20px;
		width: 3rem;
		height: 3rem;
		z-index: 1;
		background: rgba(160, 160, 160, .5);
		border-radius: 1.5rem
	}
	#ousyukutei #scrltop img#totop {
		display: none
	}
	#ousyukutei #scrltop img#totop2 {
		display: block;
		width: 75%;
		padding-top: 1em;
		margin: 0 auto
	}
	
}
@media screen and (max-width: 768px) {
	
	h1{
		right: 10px;
		width: 60px;
		padding: 90px 5px;
	}
	
	#firstview {
		position: relative;
		width: 100%;
		height: 72vh;
		overflow: hidden;
	}
	#firstview video {
		position: absolute;
		top: 0;
		width: 100%;
		height: 75vh;
		object-fit: cover;
	}
	#firstview picture {
		position: absolute;
		top: 0;
		width: 100%;
		height: 75vh;
	}
	#firstview picture img {
		width: 100%;
		height: 75vh;
		object-fit: cover;
		object-position: top 0 left 30%;
	}
	
	#detail{
		background-position: right;
	}
	#detail #background{
		top: 50vh;
		height: 300vh;
	}
	#detail #background video {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: center;
		object-position: center;
	}
	#detail .box .box2{
		flex-direction: column;
		position: relative;
		padding-bottom: 70vw;
	}
	#detail .box .box2 .images{
		width: 90%;
		margin: 0 auto;
	}
	#detail .box .box2 .images .image1{
		width: 100%;
	}
	#detail .box .box2 .images .image2{
		position: absolute;
		width: 90%;
		bottom: 0;
		left: 5%;
	}
	#detail .box .box2 .textbox{
		width: 100%;
	}
	#detail .box .box2 .textbox .text{
		width: fit-content;
		margin: 0 auto;
	}
	#detail .box .box3,
	#detail .box .box4{
		flex-direction: column;
	}
	#detail .box .box3 .image,
	#detail .box .box4 .image{
		width: 90%;
		margin: 0 auto;
	}
	#detail .box .box3 .textbox,
	#detail .box .box4 .textbox{
		width: 100%;
	}
	#detail .box .box3 .textbox .text{
		width: calc(100% - 40px);
		max-width: 28em;
		margin: 0 auto;
	}
	#detail .box .box4 .textbox .text{
		width: calc(100% - 40px);
		max-width: 43em;
		margin: 0 auto;
	}
	#detail .reservelink a {
		font-size: 1.015rem;
	}
	#detail .box7{
		position: relative;
		margin-bottom: 80px;
	}
	#detail .box7 .image{
		width: 70%;
		margin: 0 auto 20px;
	}
	#detail .box7 .textbox .text{
		max-width: calc(100% - 80px);
		width: fit-content;
		margin: 0 auto;
	}
	
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
	
	#firstview {
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	#firstview video {
		width: 100%;
		min-height: auto;
		vertical-align: bottom;
	}
	#firstview picture {
		width: 100%;
		min-height: auto;
		vertical-align: bottom;
	}
	
	#detail{
		background-position: right;
	}
	#detail #background{
		top: 110vw;
	}
	#detail .box .box2 .images{
		width: 50%;
		position: relative;
	}
	#detail .box .box2 .images .image1{
		width: 100%;
	}
	#detail .box .box2 .images .image2{
		width: 70%;
		position: absolute;
		right: -65%;
		bottom: -80px;
	}
	#detail .box .box2 .textbox{
		width: 50%;
	}
	#detail .box .box2 .textbox h2{
		margin: 0 2em 0 auto;
		padding: 0 2em 2em;
	}
	#detail .box .box2 .textbox .text{
		padding: 0 0 0 4em;
	}
	#detail .box .box3 .textbox h2{
		padding: 1em 2em 2em;
	}
	#detail .box .box4{
		flex-direction: row-reverse;
	}
	#detail .box .box3 .image,
	#detail .box .box4 .image{
		width: 50%;
	}
	#detail .box .box3 .textbox,
	#detail .box .box4 .textbox{
		width: 50%;
	}
	#detail .box .box3 .textbox .text,
	#detail .box .box4 .textbox .text{
		padding: 0 4em;
	}
	#detail .box7{
		display: flex;
		padding: 0 20px 80px;
	}
	#detail .box7 .image{
		width: 400px;
	}
	#detail .box7 .textbox{
		width: calc(100% - 400px);
	}
	#detail .box7 .textbox .text{
		width: calc(100% - 40px);
		margin: 0 40px 0 20px;
	}
	
}
@media screen and (min-width: 1024px) and (max-width: 1080px) {
	
	#detail #background{
		top: 100vw;
	}
	
}
@media screen and (min-width: 1024px), print {
	
	#firstview {
		position: relative;
		width: 100%;
		height: 72vh;
		overflow: hidden;
	}
	#firstview video {
		position: absolute;
		top: 0;
		width: 100%;
		height: 75vh;
		object-fit: cover;
	}
	#firstview picture {
		position: absolute;
		top: 0;
		width: 100%;
		height: 75vh;
	}
	#firstview picture img {
		width: 100%;
		height: 75vh;
		object-fit: cover;
	}
	
	#detail .box .box2 .images{
		width: 500px;
		position: relative;
	}
	#detail .box .box2 .images .image1{
		width: 100%;
	}
	#detail .box .box2 .images .image2{
		width: 400px;
		position: absolute;
		right: -300px;
		bottom: -150px;
	}
	#detail .box .box2 .textbox{
		width: calc(100% - 500px);
	}
	#detail .box .box2 .textbox h2{
		margin: 0 2em 0 auto;
		padding: 0 2em 2em;
	}
	#detail .box .box2 .textbox .text{
		padding: 0 0 0 4em;
	}
	#detail .box .box3 .textbox h2{
		padding: 1em 2em 2em;
	}
	#detail .box .box4{
		flex-direction: row-reverse;
	}
	#detail .box .box3 .image,
	#detail .box .box4 .image{
		width: 500px;
	}
	#detail .box .box3 .textbox,
	#detail .box .box4 .textbox{
		width: calc(100% - 500px);
	}
	#detail .box .box3 .textbox .text,
	#detail .box .box4 .textbox .text{
		padding: 0 4em;
	}
	#detail .box7{
		display: flex;
	}
	#detail .box7 .image{
		width: 400px;
	}
	#detail .box7 .textbox{
		width: calc(100% - 400px);
	}
	#detail .box7 .textbox .text{
		width: fit-content;
		margin: 0 auto;
	}
	
	
}