.wrap {
	animation: fadein 5s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}


/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  bottom: 7vh;
  right: 0;
  left: 0;
  writing-mode: vertical-rl;
  z-idex: 100;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 3s infinite;
  background-color: #FFF;
  content: "";
  height: 14vh;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 100;
}
/* 線の背景色 */
.scroll::after {
  background-color: #888;
  content: "";
  height: 14vh;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 90;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


.fadeIn_left{
  opacity: 1;
  transform: translate(0, 0);
  transition: 2s;
}
.fadeIn_up{
  opacity: 1;
  transform: translate(0,100px);
  transition: 2s;
}
.is-show{
  transform: translate(0, 0);
	opacity: 1;
}

#h1,h2,h3,p{
	color:white;
}

.contents1{
	height:100vh;
}

.concept{
	width:100%;
	height:100vh;
	z-index:30;
	color:white;
	position: relative;
}
.concept-inner{
	position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contents1{
	max-height:100vh;
	width:100%;
	background-image: url("../img/room-main.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size:cover;
}

.concept h1{
	margin:0 auto 20% auto;
	display:flex;
	justify-content: center;
}

.concept h1 img{
	width:50%;
}
.concept p{
	font-size:15pt;
	writing-mode: vertical-rl;
	margin:0 auto;
	text-shadow:1px 1px 3px #000;
	line-height:25pt;
	text-align: left;
}

.contents2{
	height:100vh;
	max-height:100vh;
	background-image: url("../img/room-title-bg.png");
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	background-size: cover;
}
.concept-inner2{
}
.concept2{
	z-index:30;
	color:white;
	position: relative;top:50%;left:50%;
	transform: translate(-50%, -50%);
}
.concept2 h1{
	font-size:25pt;
	text-align:center;
	letter-spacing: 0.3em;
}
.concept2 h1 span{
	font-size:22pt;
	text-align:center;
	letter-spacing: 0.3em;
}
.concept2 p{
	font-size:0.9em;
	text-align:center;
	margin:50px auto;
	line-height: 2em;
	letter-spacing: 0.3em;
}
.concept2 img{
	width:50px;
	display:block;
	margin:40px auto;
}

.contents4{
	padding:10% 0% 10% 10%;
}
.cntbox{
	display:flex;
}
.cntsub{
	width:40%;
	display: flex;
	flex-direction: column;justify-content: center;align-items: center;padding-right:5%;text-align: center;
}
.cntmain{
	width:60%;
	display: flex;
	flex-direction: column;justify-content: center;align-items: center;
}
.cntmain img{
	width:100%;
}
.cntsub h3{
	font-size:20pt;
	padding-top:20px;
	padding-bottom:20px;
	line-height: 1.5em;
  color: #B6815A;
}
.cntsub img{width:300px;
}
.cntsub p{
	font-size:0.9em;line-height: 2em;
}









.tab-contents{
width:100%;
	padding-bottom:10%;
}
.tab-contents-item {
  display: none;
}
.tab-contents-item.show {
  display: block;
}

.contents-tab{
width:100%;
	padding:5% 0 2.5% 0;
}

.tab-list ul{
  list-style-type: none;
}
.tab-list {
width:auto;
  display: flex;
	justify-content: center;
	margin:0 auto;
}
.tab-list-item {
	height:300px;
	width:200px;
	margin:0 2%;
	position: relative;margin-bottom:100px;
}
.tab-list-item p{
	font-size:15pt;
  writing-mode: vertical-rl;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -20pt);
	text-shadow:1px 1px 3px #000;letter-spacing: 5pt;
}

.triangle01{
	font-size:1.25em;
	color:white;
	text-align: left;
	width:90%;
	position: absolute;
    bottom: -30px;
    left: 0;right:0;
	margin:0 auto;
}

.triangle01::before
.triangle01::after{
	content: '';
	position: absolute;
}

.triangle01::before{
	content: '';
	position: absolute;
	top:20px;
	border-bottom: 1px solid;
   display:block;
	width:100%;
	height:10px;
}

.triangle01::after{
	content: '';
	position: absolute;
	top:20px;
	right:5px;
	border-right: 2px solid;
   display:block;
	width:100%;
	height:10px;
    transform: skew(45deg);
}







.img01{
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;background-image:url("../img/room-tab-tokutou.jpg");
  filter: grayscale(100%);
}
.img01.active{
  filter: grayscale(0%);
}
.img01:hover{
  filter: grayscale(0%);
}
.img02{
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;background-image:url("../img/room-tab-2f2.jpg");
  filter: grayscale(100%);
}
.img02.active{
  filter: grayscale(0%);
}
.img02:hover{
  filter: grayscale(0%);
}
.img03{
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;background-image:url("../img/room-tab-2f1.jpg");
  filter: grayscale(100%);
}
.img03.active{
  filter: grayscale(0%);
}
.img03:hover{
  filter: grayscale(0%);
}
.img04{
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;background-image:url("../img/room-tab-general.jpg");
  filter: grayscale(100%);
}
.img04.active{
  filter: grayscale(0%);
}
.img04:hover{
  filter: grayscale(0%);
}
.img05{
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;background-image:url("../img/room-tab-corner.jpg");
  filter: grayscale(100%);
}
.img05.active{
  filter: grayscale(0%);
}
.img05:hover{
  filter: grayscale(0%);
}















.contents6{
	padding:0 10% 5% 10%;
}
.concept-inner6{
	position:relative;
}

.room-ttl-box{
	padding-bottom:5%;
}
.room-name{
	color:white;
	font-size:50pt;
	margin:0 auto;
	text-align: center;
}



.room-slider {
    width: 100%;
	max-width:1920px;
	margin:0 auto 5% auto;
}

.room-slider__item img {
    height: auto;
    width: 100%;
}
.slick-dots {
	position: absolute;
	right:0;
	bottom:-30px;
	z-index: 3;
	text-align:center;
}

.slick-dots li {
	display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:60px;/*ドットボタンのサイズ*/
    height:5px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:0;
    background:grey;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:white;/*ドットボタンの現在地表示の色*/
}









.room-slider-moji{
}
.room-slider-moji h2{
	font-size:20pt;
	padding-bottom:1%;
	letter-spacing: 4pt;
}
.room-slider-moji p{
	font-size:10pt;
	line-height: 2;
	letter-spacing: 4pt;
}




.contents7{
	height:100vh;
	margin-bottom:5%;
}
.contents7 img{
	width:100%;
  height: 100%;
  object-fit: cover;
}
.contents7 img{
  height: 100%;
  object-fit: cover;
}
.contents7-moji-box{
	width:100%;
	height:100%;
	position: relative;
}
.contents7-moji-position{
	Writing-mode: vertical-rl;position: absolute;right:15%;top:10%;
}
.contents7-moji-position h2{
	height:100%;
	position: relative;
	font-size:20pt;
	letter-spacing: 6pt;
}
.contents7-moji-position p{
	height:100%;
	font-size:12pt;
	line-height: 3;
	letter-spacing: 6pt;margin-top:20%;margin-right:10%;
}

.contents7-moji-position h2::before{
  content: '';
  display: block;
  width: 2px;
  height: 75px;
  background: white;
	position: absolute;
	right:50%;
	left:50%;
	top:-100px;
}




.contents8{padding-bottom:5%;
}
.contents8-box{
	display:flex;justify-content: center;
}
.contents8-01{
	max-width:500px;
	padding-right:5%;
}
.contents8-01 img{
	width:100%;
}
.contents8-02{display: flex;flex-direction: column;justify-content: center;
}


.contents8-02 h3{
  font-size:25pt;
padding-bottom:5%;
	color:goldenrod;
}
.contents8-02 h3::before {
  content: url("../img/onepoint02.png");
  position: relative;padding-right:10px;
}
.table_room {
	color:#fff;
	 border-collapse:separate;
 border-spacing:10px;padding-bottom:5%;
}
 .table_room td {
  border-bottom: 1px dashed #fff;
  padding: 1em;
}
td.table_room02 {
	border: 10px solid #000;background-color: #000;
}
.table_room th {
  border-bottom: 1px dashed #fff;
  text-align: left;
  width:35%;
  min-width: 4em;
}


.contents8-02 p{
  font-size:10pt;line-height:1.5;
}








.contents9{
	width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom:1%;
}
.contents9-chizu{
	width:80%;
	display: flex;
	flex-direction: column;
}
.contents9-chizu img{
	padding-bottom:5%;
}

.contents9-chizu h3{
  font-size:25pt;
padding-bottom:5%;
	color:goldenrod;
}
.contents9-chizu h3::before {
  content: url("../img/onepoint02.png");
  position: relative;padding-right:10px;
}
.contents9-chizu p{
  font-size:10pt;
	line-height: 2;
	letter-spacing: 4pt;
}



.contents10{
	width:80%;
	display: flex;
	flex-direction: column;
	margin:0 auto;
	gap:15px;
	padding-bottom:5%;
}
.contents10 p{
  font-size:10pt;
	line-height: 1.8;
	letter-spacing: 4pt;
}



.infobox{
	width:80%;
	color:white;
	background-color:#202020;
	position: relative;
	padding:5% 10%;
	border: solid 2px #202020;
	margin:0 auto;
}
.infobox::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  border: solid 2px #202020;
  z-index: -1;
}

.infobox-ttl{
	font-size:20pt;
	padding-bottom:2.5%;
	text-align: center;
}

.table_info {
	border-collapse: collapse;
	font-size:9pt;
	line-height: 2;
	letter-spacing: 2pt;
}
 .table_info th,td{
	 padding:2% 0;
}
 .table_info td {
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
}
.table_info th {
	font-weight:normal;
	Vertical-align:middle;
	white-space: nowrap;
	 padding-right:30px;
}

	
@media screen and (max-width: 1024px){
	
  .concept p {
    font-size: 12pt;
    writing-mode: horizontal-tb;
    text-align: center;
  }
	
	
.concept2 h1{
	font-size:18pt;
}
.concept2 h1 span{
	font-size:12pt;
}
.concept2 p{
	font-size:9pt;
}
.concept-inner2{
	padding:0 10%;
}
	
	
.contents4{
	padding:5% 5% 30% 5%;
}
.cntbox{
	flex-direction: column;
}
.cntsub{
	width:100%;
}
.cntmain{
	width:100%;
}
.cntmain img{
	width:100%;
}
.cntsub h3{
	font-size:17pt;
}
.cntsub img{
	width:50%;
}
.cntsub p{
	font-size:9pt;
	padding-bottom:5%;
	}
	
	
	
	


.contents-tab{
}

.tab-list ul{
}
.tab-list {flex-wrap: wrap;
}
.tab-list-item {
	max-width:100px;
	max-height:150px;
}
.tab-list-item p{
	font-size:10pt;
}
	
	
.room-slider {
	margin:0 auto 15% auto;
}	
	
	
.contents6{
	padding:0 5% 5% 5%;
}

.room-ttl-box{
	padding-bottom:5%;
}
.room-name{
	font-size:20pt;
}

.room-slider-moji{
}
.room-slider-moji h2{
	font-size:14pt;
	padding-bottom:5%;
}
.room-slider-moji p{
	font-size:9pt;
}
	
	

.contents7-moji-position{right:10%;top:10%;
}
.contents7-moji-position h2{
	font-size:18pt;
}
.contents7-moji-position p{
	font-size:10pt;
	letter-spacing: 6pt;margin-top:5%;margin-right:2%;
}
	

	
	
	
	
	
	
	
.contents8{padding-bottom:20%;
}
.contents8-box{
	display:flex;justify-content: center;flex-direction: column;align-items: center;
}
.contents8-01{width: 100%;padding:0 0 5% 0;
}
.contents8-01 img{
}
.contents8-02{padding-bottom:5%;padding:0 5%;
}


.contents8-02 h3{
  font-size:20pt;
padding-bottom:5%;
	color:goldenrod;
	bottom:10px;
}
.contents8-02 h3::before {
}
.table_room {font-size:10pt;
}
 .table_room td {
}
td.table_room02 {
}
.table_room th {
}


.contents8-02 p{
  font-size:9pt;line-height:1.5;
}








.contents9{
}
.contents9-chizu{
	width:100%;
	display: flex;
	flex-direction: column;
	padding:7.5% 5%;
}
.contents9-chizu img{
	padding-bottom:5%;
}

.contents9-chizu h3{
  font-size:20pt;
	color:goldenrod;
}

.contents9-chizu p{
  font-size:9pt;
padding-bottom:10%;
}

	
	
.contents10{
	width:80%;
	gap:20px;
	padding-bottom:15%;
}
.contents10 p{
  font-size:9pt;
	line-height: 1.75;
	letter-spacing: 4pt;
}	
	
	
	


.infobox{
	width:90%;
}
.infobox::before {
}

.infobox-ttl{
	font-size:15pt;
	padding-bottom:10%;
}




.table_info {
  border-collapse: collapse;font-size:9pt;
}
 .table_info th,td{
	 padding:10% 0;
}
 .table_info td {
}
.table_info th {
  width: 20%;font-weight:normal;
}
.table_info th {
	 padding-right:20px;
}
	
	

}