@charset "utf-8";
/*////////////////////////////////////
room
////////////////////////////////////*/

@media screen and (min-width: 768px) {
.room_item {
	position: relative;
	width: 90%;
	max-width: 1400px;
	padding: 50px;
	background: #FFF;
	border:1px solid #AAA;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.top_room_img_area {
	position: relative;
	width: 50%;
}
.top_room_img {
	position: relative;
	width: 100%;
	margin-bottom: 30px;
}
.top_room_img img {
	border-radius: 30px;
}
.top_room_img2 {
	position: relative;
	width: 100%;
}

.top_room_word_area {
	position: relative;
	width: 48%;
	margin-left: 2%;
}
.top_room_mark {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
.room_mark1,
.room_mark2,
.room_mark3,
.room_mark4,
.room_mark5 {
	display: inline-block;
	margin-right: 1%;
	font-size: 1.4rem;
	padding: 5px 10px;
	color: #FFF;
	border-radius: 10px;
}
.room_mark1 {
	background: rgba(255,91,0,1.00);
}
.room_mark2 {
	background: rgba(0,79,248,1.00);
}
.room_mark3 {
	background: rgba(12,134,0,1.00);
}
.room_mark4 {
	background: rgba(149,126,0,1.00);
}
.room_mark5 {
	background: rgba(155,0,163,1.00);
}

.room_title {
	position: relative;
	width: 100%;
	font-size: 3.2rem;
	font-weight: 700;
	margin-bottom: 10px;
}
.room_place {
	position: relative;
	display: inline-block;
	background: rgba(16,70,155,1.00);
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 400;
	padding: 5px 10px;
	margin-bottom: 10px;
}
.room_word {
	position: relative;
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: 300;
}
.room_info1 {
	position: relative;
	width: 100%;
	padding: 10px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.room_info_th {
	position: relative;
	font-size: 1.4rem;
	width: 15%;
}
.room_info_td {
	position: relative;
	font-size: 1.4rem;
	width: 84%;
	margin-left: 1%;
}
}

@media screen and (min-width: 0px) and (max-width: 767px) {
.room_item {
	position: relative;
	width: 90%;
	max-width: 1400px;
	padding: 20px;
	background: #FFF;
	border:1px solid #AAA;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.top_room_img_area {
	position: relative;
	width: 100%;
	margin-bottom: 10px;
}
.top_room_img {
	position: relative;
	width: 100%;
	margin-bottom: 30px;
}
.top_room_img img {
	border-radius: 30px;
}
.top_room_img2 {
	position: relative;
	width: 100%;
}

.top_room_word_area {
	position: relative;
	width: 100%;
}
.top_room_mark {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
.room_mark1,
.room_mark2,
.room_mark3,
.room_mark4,
.room_mark5 {
	display: inline-block;
	margin-right: 1%;
	font-size: 1.4rem;
	padding: 5px 10px;
	color: #FFF;
	border-radius: 10px;
}
.room_mark1 {
	background: rgba(255,91,0,1.00);
}
.room_mark2 {
	background: rgba(0,79,248,1.00);
}
.room_mark3 {
	background: rgba(12,134,0,1.00);
}
.room_mark4 {
	background: rgba(149,126,0,1.00);
}
.room_mark5 {
	background: rgba(155,0,163,1.00);
}

.room_title {
	position: relative;
	width: 100%;
	font-size: 3.2rem;
	font-weight: 700;
	margin-bottom: 10px;
}
.room_place {
	position: relative;
	display: inline-block;
	background: rgba(16,70,155,1.00);
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 400;
	padding: 5px 10px;
	margin-bottom: 10px;
}
.room_word {
	position: relative;
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: 300;
}
.room_info1 {
	position: relative;
	width: 100%;
	padding: 10px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.room_info_th {
	position: relative;
	font-size: 1.4rem;
	width: 15%;
}
.room_info_td {
	position: relative;
	font-size: 1.4rem;
	width: 84%;
	margin-left: 1%;
}
}


#room_select_area {
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}
#room_select {
	position: relative;
	margin-right: 20px;
}
#room_select_bt {
	position: relative;
}

.plan_price_atten {
	position: relative;
	margin: 50px 0;
	background: rgba(224,150,151,1.00);
	font-size: 1.6rem;
	text-align: center;
	width: 100%;
	padding: 5px 0;
}



/*////////////////////////////////////
room detail photo
////////////////////////////////////*/
@media screen and (min-width: 768px) {
.room_contact {
	position: relative;
	padding: 20px 0;
	text-align: center;
}
.room_contact a {
	display: inline-block;
	background: #C46E6F;
	color: #FFF;
	font-size: 1.8rem;
	text-decoration: none;
	padding: 10px 40px;
	border-radius: 10px;
	transition : all 0.5s ease 0s;
}
.room_contact a:hover {
	background: #DD9293;
}
.room_contact a img {
	width: 40px;
	vertical-align: middle;
	margin-right: 5px;
}
.room_photo_area {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
#room_photo_main {
	position: relative;
	width: 48%;
	box-sizing: border-box; 
	float: left;
	margin-right: 2%;
}
#room_photo_main .room {
	position: relative;
	width: 100%;
}
#room_photo_main .room::before {
	content: "";
	display: block;
	padding-top: 100%;
}
#room_photo_main .room .room_main {
	position: relative;
	width: 100%;
	height: 100%;
	margin-top: -100%;
}
#room_photo_main .room .room_main img {
	width: 100%;
	height: 100%;
	object-fit:cover;
}
#room_thumbnail {
	position: relative;
	width: 48%;
	box-sizing: border-box; 
	float: right;
	margin-left: 2%;
}
.room_thumb {
	position:relative;
	width: 100px;
	float: left;
	margin: 0 5px 5px 0;
}
.room_thumb:before {
    content:"";
    display: block;
    padding-top: 100%;
}
.inner_thumb {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	z-index: 2;
}
.inner_thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.inner_thumb a img {  
	opacity: 0.5;  
    filter: alpha(opacity=50);  
}  
.inner_thumb a.active img {  
    opacity: 1;  
    filter: alpha(opacity=100);  
}
}


@media screen and (min-width: 0px) and (max-width: 767px) {
.room_contact {
	position: relative;
	padding: 0;
	margin-bottom: 50px;
	text-align: center;
}
.room_contact a {
	display: inline-block;
	background: #C46E6F;
	color: #FFF;
	font-size: 1.8rem;
	text-decoration: none;
	padding: 10px 40px;
	border-radius: 10px;
	transition : all 0.5s ease 0s;
}
.room_contact a:hover {
	background: #DD9293;
}
.room_contact a img {
	width: 40px;
	vertical-align: middle;
	margin-right: 5px;
}
.room_photo_area {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
#room_photo_main {
	position: relative;
	width: 100%;
	box-sizing: border-box; 
}
#room_photo_main .room {
	position: relative;
	width: 100%;
}
#room_photo_main .room::before {
	content: "";
	display: block;
	padding-top: 100%;
}
#room_photo_main .room .room_main {
	position: relative;
	width: 100%;
	height: 100%;
	margin-top: -100%;
}
#room_photo_main .room .room_main img {
	width: 100%;
	height: 100%;
	object-fit:cover;
}
#room_thumbnail {
	position: relative;
	width: 100%;
	box-sizing: border-box; 
}
.room_thumb {
	position:relative;
}
.room_thumb:before {
    content:"";
    display: block;
    padding-top: 100%;
}
.inner_thumb {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	z-index: 2;
}
.inner_thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.inner_thumb a img {  
	opacity: 0.5;  
    filter: alpha(opacity=50);  
}  
.inner_thumb a.active img {  
    opacity: 1;  
    filter: alpha(opacity=100);  
}
}

/*////////////////////////////////////
room detail
////////////////////////////////////*/
@media screen and (min-width: 768px) {
.room_introduction_area {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin-bottom: 100px;
}
.room_introduction {
	position: relative;
	width: 48%;
	margin-right: 2%;
	font-size: 1.8rem;
	line-height: 2.4;
	font-weight: 400;
}
.room_price {
	position: relative;
	width: 48%;
	margin-left: 2%;
}
.room_detail_info {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}
.room_detail_title {
	position: relative;
	width: 100%;
	background: #EE00FF;
	font-size: 1.6rem;
	font-weight: 400;
	padding: 5px 20px;
	color: #FFF;
	margin-bottom: 50px;
}
.room_detail_table {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
.room_detail_th1 {
	position: relative;
	width: 25%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 700;
	background: #EEE;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.room_detail_td1 {
	position: relative;
	width: 75%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 300;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
.room_detail_td2 {
	position: relative;
	width: 25%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 300;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.room_detail_td3 {
	position: relative;
	width: 25%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 300;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
.brder_bb {
	border-bottom: 1px solid #CCC;
}
.room_detail_mark_area {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.room_detail_mark {
	position: relative;
	font-size: 1.2rem;
	font-weight: 400;
	color: #FFF;
	background: #E9E9E9;
	width: 18%;
	margin: 1%;
	padding: 3px 5px;
	text-align: center;
}
.markon {
	background: #FF5E00 !important;
}
.room_map {
	position: relative;
	width: 100%;
	aspect-ratio:4/2;
	padding: 10px;
	border:1px solid #CCC;
	background: #FFF;
	margin-bottom: 50px;
}
.room_map iframe {
	position: relative;
	width: 100%;
	aspect-ratio:4/2;
}
}
@media screen and (min-width: 0px) and (max-width: 767px) {
.room_introduction_area {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}
.room_introduction {
	position: relative;
	width: 100%;
	font-size: 1.6rem;
	line-height: 2;
	font-weight: 400;
	margin-bottom: 50px;
}
.room_price {
	position: relative;
	width: 100%;
}
.room_detail_info {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}
.room_detail_title {
	position: relative;
	width: 100%;
	background: #FC7500;
	font-size: 1.6rem;
	font-weight: 400;
	padding: 5px 20px;
	color: #FFF;
	margin-bottom: 50px;
}
.room_detail_table {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}
.room_detail_th1 {
	position: relative;
	width: 100%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 700;
	background: #EEE;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.room_detail_td1 {
	position: relative;
	width: 100%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 300;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
.room_detail_td2 {
	position: relative;
	width: 100%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 300;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
.room_detail_td3 {
	position: relative;
	width: 100%;
	padding: 10px;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 300;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
.room_detail_td1.brder_bb,
.room_detail_td2.brder_bb,
.room_detail_td3.brder_bb {
	border-bottom: 1px solid #CCC;
}
.room_detail_mark_area {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.room_detail_mark {
	position: relative;
	font-size: 1.2rem;
	font-weight: 400;
	color: #FFF;
	background: #E9E9E9;
	width: 45%;
	margin: 2.5%;
	padding: 3px 5px;
	text-align: center;
}
.markon {
	background: #FF5E00 !important;
}
.room_map {
	position: relative;
	width: 100%;
	aspect-ratio:4/2;
	padding: 10px;
	border:1px solid #CCC;
	background: #FFF;
	margin-bottom: 50px;
}
.room_map iframe {
	position: relative;
	width: 100%;
	aspect-ratio:4/2;
}
}