@charset "utf-8";

/******************************************************
 SP・PC共通
******************************************************/
/**/

/******************************************************
 SP
******************************************************/
@media only screen and (max-width: 768px) {	
	/* roomTtl */
	#roomTtl {
		background-color: rgba(255,255,255,0.3);
		padding: 50px 20px;
	}
	#roomTtl .hn {
		font-size: 2.8rem;
		text-align: center;
	}
	
	/* roomNormal */
	.roomNormal {
		padding: 5% 5% 2.5%;
	}
	.roomNormal-info {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		margin-bottom: 2%;
	}
	.roomNormal-info .hn {
		font-size: 3.0rem;
		text-align: center;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		padding: 30px 0;
	}
	.roomNormal-info .textWrap {
		width: 100%;
		margin-bottom: 30px;
	}
	.roomNormal-info .textWrap p {
		font-size: 1.8rem;
		line-height: 1.8;
	}
	.roomNormal-info .thumbImg {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		width: 100%;
	}
	.roomNormal-info .thumbImg p {
		width: 49%;
	}
	.roomNormal-info .thumbImg p img {
		width: 100%;
	}
	.roomNormal-photo .mainImg img {
		width: 100%;
	}
	
	/* roomSpecial */
	.roomSpecial {
		padding: 5% 5% 2.5%;
	}
	.roomSpecial-ttl {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
	}
	.roomSpecial-ttl .hn {
		font-size: 3.0rem;
		text-align: center;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		padding: 30px 0;
	}
	.roomSpecial-ttl .hn span {
		font-size: 2.4rem;
	}
	.roomSpecial-info {
		margin-bottom: 2%;
	}
	.roomSpecial-info .textWrap {
		width: 100%;
		margin-bottom: 30px;
	}
	.roomSpecial-info .textWrap p {
		font-size: 1.8rem;
		line-height: 1.8;
	}
	.roomSpecial-info .thumbImg {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		width: 100%;
	}
	.roomSpecial-info .thumbImg p {
		width: 49%;
	}
	.roomSpecial-info .thumbImg p img {
		width: 100%;
	}
	.roomSpecial-photo .mainImg img {
		width: 100%;
	}
	.roomLook {text-align: center;margin-top: 15px;}
	.roomLook span{cursor: pointer;display: inline-block;border: 1px solid #555;padding: 3px 30px;font-size: 1.3rem;-webkit-transition: 0.8s;-moz-transition: 0.8s;-o-transition: 0.8s;-ms-transition: 0.8s;transition: 0.8s;}
	.roomLook span:hover{background-color: #555;color: #fff;}	
}

/******************************************************
 PC
******************************************************/
@media print,
screen and (min-width: 769px) {
	/* roomTtl */
	#roomTtl {
		background-color: rgba(255,255,255,0.3);
		padding: 80px 10%;
	}
	#roomTtl .hn {
		font-size: 3.6rem;
		text-align: center;
	}
	
	/* roomNormal */
	.roomNormal {
		display: flex;
		padding: 2.5% 0;
	}
	.roomNormal:nth-of-type(odd) {
		flex-flow: row nowrap;
		padding-left: 6%
	}
	.roomNormal:nth-of-type(even) {
		flex-flow: row-reverse nowrap;
		padding-right: 6%
	}
	.roomNormal-info {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
		width: 45%;
		z-index: 2;
	}
	.roomNormal-info .hn {
		font-size: 4.0rem;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		padding: 70px 0;
	}
	.roomNormal-info .textWrap {
		width: 100%;
		padding: 0 50px 70px;
		word-wrap: break-word;
	}
	.roomNormal-info .textWrap p {
		font-size: 1.8rem;
		line-height: 1.8;
	}
	.roomNormal-info .thumbImg {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		width: 110%;
		z-index: 2;
	}
	.roomNormal-info .thumbImg p {
		width: 49%;
	}
	.roomNormal-info .thumbImg p img {
		width: 100%;
	}
	.roomNormal-photo {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		width: 55%;
	}
	.roomNormal-photo .mainImg {
		position: relative;
		z-index: 1;
	}
	.roomNormal-photo .mainImg img {
		width: 100%;
	}
	
	/* roomSpecial */
	.roomSpecial {
		padding: 4% 0;
	}
	.roomSpecial-ttl {
		position: relative;
		background-image: url(/img/room/img_room_04.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	.roomSpecial-ttl {
		content: '';
		display: block;
		padding-top: 38.333333333%;
	}
	.roomSpecial-ttl .hn {
		position: absolute;
		top: 0;
		right: 15%;
		height: 100%;
		background-color: rgba(0,0,0,0.8);
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		font-size: 4.0rem;
		color: #fff;
		text-align: center;
		padding: 20px 60px;
	}
	.roomSpecial-ttl .hn span {
		font-size: 2.8rem;
	}
	.roomSpecial-info {
		display: table;
		width: 100%;
		padding: 0 6%;
	}
	.roomSpecial-info > div {
		display: table-cell;
		vertical-align: middle;
	}
	.roomSpecial-info .textWrap {
		width: 45%;
		padding: 15px 50px 0 50px;
	}	
	.roomSpecial-info .textWrap p {
		font-size: 1.8rem;
		line-height: 1.8;
	}
	.roomSpecial-info .thumbImg {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		width: 105%;
		margin-top: -20px;
		z-index: 2;
	}
	.roomSpecial-info .thumbImg p {
		width: 49%;
	}
	.roomSpecial-info .thumbImg p img {
		width: 100%;
	}
	
	.roomLook {text-align: right;margin-top: 15px;}
	.roomLook span{cursor: pointer;display: inline-block;border: 1px solid #555;padding: 3px 30px;font-size: 1.3rem;-webkit-transition: 0.8s;-moz-transition: 0.8s;-o-transition: 0.8s;-ms-transition: 0.8s;transition: 0.8s;}
	.roomLook span:hover{background-color: #555;color: #fff;}
}