@charset "utf-8";


.pdb0{
	padding-bottom: 0;
}

/* ==========================================================================

  question ,answer

  ========================================================================== */

.question{
	margin-top:100px;
}

.question,

.answer .inner{

	position: relative;

}

.contents{
	padding-bottom:0;
}

.tab_block{
	display:none;
}

.cap_room01{
	color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    text-align: right;
    margin-top: 5px;
}

.cap_roomimg{
	color: #000;
    font-size: 11px;
    letter-spacing: 1px;
    text-align: right;
    margin-top: 5px;
}

.roomtype_mv{
	position: relative;
}

.roomtype_mv_h{
	color: #fff;
	position: absolute;
	bottom: 10px;
    right: 20px;
}

.roomtype_mv_h div{
	font-size: 20px;	
}

.roomtype_mv_h p{
	font-size: 12px;
    text-align: center;
    letter-spacing: 2px;
}

.type01_bg{
	background: url(../img/roomtype/room_bk01.jpg);
	background-size: cover;
	background-position: center;
	padding: 100px 0;
}

.roomtype01_p{
	text-align: right;
	margin-top:10px;
	padding-right: 10px;
}

.roomtype01_box{
	display: flex;
    justify-content: space-between;
    margin: 0 auto;
	align-items: center;
    position: relative;
}
.roomtype01_box:not(:last-child){
	margin-bottom: 60px;
}

.roomtype02_box{
	display: flex;
    justify-content: space-between;
    margin: 0 auto;
    background: url(../img/roomtype/room_bk01.jpg);
    padding: 100px 0;
}
.roomtype01_l_out{
	position: relative;
    width: 60%;
}
.roomtype01_l{
	position: relative;
}
.roomtype01_l img{
	width: 100%;
}
.roomtype01_box p.cap{
	/* position: absolute;
	left: 10px;
	bottom: 0px;
	transform: translateY(150%);
	color: #333; */
	margin: 0 20px;
}
.roomtype01_r{
	max-width: 480px;
    margin: 0 auto;
    padding-left: 50px;
}
.roomtype01_r.left{
    padding-right: 50px;
	padding-left: 0;
}

.roomtype02_l{
	width:60%;
	position: relative;
}

.roomtype02_r{
	max-width: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	padding-right: 50px;
}

.roomtype02_text{
		text-align: center;
		background-color: rgba(255,255,255,0.8);
    padding: 50px;
    opacity: 0.9;
}


.roomtype02_text div{
	font-size: 20px;
    
}

.roomtype_h01{
	max-width: 330px;
	margin: 0 auto;
}

.roomtype_h02{
	max-width: 250px;
	margin: 0 auto;
}

.roomtype02_text p{
	font-size: 12px;
    text-align: center;
    letter-spacing: 2px;

}

.roomtype02_text p{
	font-size: 12px;
	display: inline-block;
	text-align: justify;
	letter-spacing: 2px;
	line-height: 2em;
	text-justify: inter-ideograph;
	padding-top: 15px;
	margin-top: 5px;
}

.roomtype02_obi{
	
}

.obi_inner{
	display: flex;
	max-width: 1000px;
	margin: 70px auto;
	justify-content: flex-start;
    padding: 30px 0;

}

.obi_inner2{
	display: flex;
	max-width: 1000px;
	margin: 70px auto;
	justify-content: flex-end;
    padding: 0 0 40px 0;

}

.roomtype02_obi1{
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.roomtype02_obi1 img{
	width:32%;
}

.roomtype02_obi2{
	width: 17%;
    padding-left: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.roomtype02_obi3{
	width: 34%;
    display: flex;
    align-items: flex-start;
}

.room_flex01,.room_flex02{
	max-width: 1350px;
	margin: 180px auto;
}
.room_flex01_ul{
	display: flex;
	/* max-width: 950px; */
	width: 100%;
	margin: 0 0 0 auto;
	position: relative;
	justify-content: space-between;
}
.room_flex02_ul{
	display: flex;
	/* max-width: 950px; */
	width: 100%;
	margin: 0 auto 0 0;
	position: relative;
	justify-content: space-between;
	align-items: center;
}
.room_flex02_ul > li:first-of-type{
	width: 55.556%;
}
.room_flex02_ul > li:last-of-type{
	width: 40%;
}
.room_flex01_ul .cap,.room_flex02_ul .cap{
	position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(150%);
}
.cap_box{
	max-width: 1350px;
	margin: 0 auto 80px;
	padding: 0 1%;
    box-sizing: content-box;
}

/* .cap{
	margin-left: 20px;
} */

.pc_none{
	display:none;
}

.sp_none{
	display:block;
}

.pc_none01{
	display: none;
}
.sp_none01{
	display: block;
}

.roomtype01_l {
	overflow: hidden;
	position: relative;
}

.roomtype01_l:before {
	animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
	background: #eaeaea;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

@keyframes img-wrap {
	100% {
		transform: translateX(100%);
	}
}

.room_flex01_ul li {
	overflow: hidden;
	position: relative;
  }
  
  .room_flex01_ul li:before,
  .room_flex01_ul li:after {
	background: #fff;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 1;
	animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
}
  .room_flex01_ul.is-show li:before{
	animation-name: img-wrap-before;
  }
  .room_flex01_ul.is-show li:after {
	animation-name: img-wrap-after;
  }
  .room_flex01_ul li:before {
	top: 0;
	bottom: 52%;
  }
  
  .room_flex01_ul li:after {
	animation-delay: 1s;
	top: 48%;
	bottom: 0;
  }
  
  @keyframes img-wrap-before {
	100% {
	  transform: translateX(100%);
	}
  }
  
  @keyframes img-wrap-after {
	100% {
	  transform: translateX(-100%);
	}
  }



.img-wrap1 {
	overflow: hidden;
	position: relative;
}

.img-wrap1:before {
	background: #fff;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.img-wrap1.is-show:before{
	animation: img-wrap1 2s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes img-wrap1 {
	100% {
		transform: translateY(-100%);
	}
}
.img-wrap2 {
	overflow: hidden;
	position: relative;
}

.img-wrap2:before {
	background: #fff;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.img-wrap2.is-show:before{
	animation: img-wrap2 2s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes img-wrap2 {
	100% {
		transform: translateY(100%);
	}
}






@media only screen and (max-width: 1024px) {
.obi_inner,.obi_inner2{
	padding: 30px 20px;
}
}


@media only screen and (max-width: 990px) {
	
	.room_flex01, .room_flex02 {
		padding: 0 1%;
	}
	
}


@media only screen and (max-width: 758px) {

	.contents {
    padding: 80px 0;
}


}




@media only screen and (max-width: 1000px) {


.tab_block{
	display:block;
}


}


@media only screen and (max-width: 900px) {

p{
	font-size: 12px;
}

.pdb0{
	padding-top:30px;
}

.zoom_img{

	float: none;

	width: 100%;

	text-align: center;

	margin-bottom: 20px;

}

.zoom_txt{

	float: none;

	width: 100%;

	margin-left: 0;

}

.zoom_txt_box{

	margin-bottom: 20px;

}

.obi_inner{
	flex-direction: column;
	padding: 10px 20px;
}

.obi_inner2{
	display:none;
}

.type01_bg {
    padding: 50px 0 10px;
}

.roomtype_mv_h p,.roomtype02_text p {
    font-size: 10px;
}



.roomtype_mv_h div,.roomtype02_text div {
    font-size: 17px;
}

.roomtype02_obi1 {
    flex-wrap: wrap;
    width: 100%;
}

.roomtype02_obi1 img {
    width: 47%;
    margin: 5px auto;
}

.roomtype02_obi3 {
    width: 100%;
}

.roomtype02_obi3 img{
	width: 96%;
    margin: 5px auto;
}

.roomtype01_box{
	flex-direction: column;
	margin: 0 auto 30px auto;
}

.roomtype02_box{
	flex-direction: column;
	margin: 60px auto;
	padding: 50px 0;
}

.roomtype01_l_out {
    width: 100%;
}

.roomtype01_r {
    width: 100%;
    margin-top: 50px;
    order:2;
    padding-left: 0;
}
.roomtype01_r.left{
    padding-right: 0;
}


.roomtype02_l {
		width: 100%;
		order: 1;
}

.roomtype02_r {
    width: 100%;
		margin-top: 30px;
		order: 2;
		padding-right: 0;
}

.roomtype02_text {
	padding: 30px;
}



.pc_none{
	display:block;
}

.sp_none{
	display:none;
}



}

@media only screen and (max-width: 640px) {


	.contents {
		padding: 0;
	}

	.pdb0 {
		padding-top: 0;
	}

		.roomtype02_box {
		margin-top: 0;
	}

	.room_flex01, .room_flex02 {
		padding: 0 2%;
	}

	.room_flex01_ul,.room_flex02_ul {
		flex-wrap: wrap;
	}

	.room_flex01_ul li:first-of-type{
		order:2;
		margin: 2% 0 0 0;
	}
	.room_flex02_ul > li:first-of-type {
		margin: 0;
		width: 100%;
	}
	.room_flex02_ul li:last-of-type{
		margin: 20% 0 0 0;
		width: 100%;
	}

	.pc_none01{
		display: block;
	}
	.sp_none01{
		display: none;
	}
	.room_flex01_ul li:before {
		bottom: 31%;
	}
	.room_flex01_ul li:after {
		top: 69%;
	}
	.img-wrap1.is-show:before{
		animation: img-wrap2 2s cubic-bezier(.4, 0, .2, 1) forwards;
	}
}


.roomtype_inner{
    max-width: 1390px;
    padding: 0 20px;
    margin: 0 auto;
}
.roomtype_flex01{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.roomtype_1c{
    width: 100%;
}
.roomtype_2c{
    width: 49%;
}
.roomtype_3c{
    width: 32%;
    max-width: 430px;
}
.roomtype_flex01 > div:not(:last-child){
    margin-bottom: 2%;
}
.roomtype02{
    background: url(../img/roomtype/room_bk01.jpg);
    background-size: cover;
    background-position: center;
}
.roomtype_flex02{
    display: flex;
    justify-content: space-between;
}
.roomtype_flex02_l{
    width: 78.5%;
}
.roomtype_flex02_r{
    width: 18.5%;
}
.roomtype_flex02_r_img{
    margin-top: 10%;
}
.room_image{
    width: 80%;
    margin: 0 auto;
}

.ani_r::before, .ani_l::before, .ani_rl::before, .ani_rl::after{
    top: 0;
}
.ani_r.is-show::before {
    animation-name: img-wrap-before;
    height: 100%;
    transform: translate(0,0%);
}
.ani_l.is-show::before {
    animation-name: img-wrap-after;
    height: 100%;
    transform: translate(0,0%);
}

.roomtype02 .ani_l::before{
    background: #eaeaea;
}

@media only screen and (max-width: 640px) {
    .roomtype_flex02{
        flex-wrap: wrap;
    }
    .roomtype_flex02_l{
        width: 100%;
    }
    .roomtype_flex02_r{
        width: 100%;
        margin-top: 4%;
    }
    .roomtype_flex02_r {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .roomtype_flex02_r > div{
        width: 48%;
        margin: 0;
    }
    .roomtype_flex02_r > div.room_image{
        width: 100%;
        max-width: 200px;
        margin: 0 auto 4%;
    }
}





/* roomtype_a1 */
.roomtype_a1{}
.roomtype_a1_01{
	width: 100%;
	margin-bottom: 1%;
}
.roomtype_a1_flex01{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.roomtype_a1_flex01_l{
    width: 31%;
}
.roomtype_a1_02{}
.roomtype_a1_flex01_r{
    width: 68%;
}
.roomtype_a1_03{
    margin-bottom: 1%;
}
.roomtype_a1_flex01_r_flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.roomtype_a1_0456{
    width: 32.5%;
}
.roomtype_a1 .room_image, .roomtype_b .room_image{
	max-width: 200px;
	margin-bottom: 20px;
	width: 48%;
}
.roomtype02 .ani_r::before{
	background: #eaeaea;
}