@charset "utf-8";
/* ===================================================
	Room CSS
====================================================== */
.en { display: block; margin-top: 10px; letter-spacing: .5em; font-size: 14px; }

.cmn_wrap { display: flex; color: #000; }
.cmn_wrap a { color: #000; }
.cmn_wrap:nth-of-type(odd) { background: url(../img/bg.gif)repeat center; }
.cmn_wrap:nth-of-type(even) { background: #fff; }
.cmn_wrap h2 { text-align: center; }
.cmn_wrap h2+p { margin: 50px 0; text-align: center; line-height: 2; }

.rnav { display: flex; flex-direction: column; align-items: center; }
.rnav li:not(:last-child) { margin-bottom: 30px; }
.rnav a { display: flex; }
.rnav p { overflow: hidden; }
.rnav p img { transition: opacity .75s, transform .75s; }
.rnav .v_rl { padding-left: 5px; font-size: 12px; }
.rnav .v_rl span { margin-bottom: 8px; font-size: 30px; }

@media screen and (hover: hover) {
	.rnav a:hover p img { transform: scale(1.1); opacity: .6; }
}
@media screen and (min-width: 601px) {
	body:not([class]) #lead_col .inner_md p:not(.tit) { max-width: 650px; }

	.cmn_wrap .txt { width: 47.0%; padding: 100px max(4%, 60px) 130px max(8%, 80px); }
	.cmn_wrap .photo { width: 53.0%; }
	.cmn_wrap .photo img { min-height: 1153px; max-height: 1300px; }
}
@media screen and (max-width: 600px) {
	.en { font-size: 12px; }

	.cmn_wrap { flex-direction: column; }
	.cmn_wrap .txt { order: 2; padding: 9vw 4% 14vw; }
	.cmn_wrap h2 img { max-width: 38vw; }
	.cmn_wrap h2+p { margin: 5.5vw 0 8vw; }
	.cmn_wrap .photo { order: 1; }

	.rnav li:not(:last-child) { margin-bottom: 4vw; }
	.rnav p { width: calc(100% - 41px); }
	.rnav .v_rl span { font-size: 22px; }
}
@media screen and (max-width: 359px) {
	.cmn_wrap h2+p { text-align: left; }
	.cmn_wrap h2+p br { display: none; }
}


/* ---------------------------------------------------
	一覧
------------------------------------------------------ */
/* 1_bnr_izutsuro.jpg用CSS */
body:not([class]) #lead_col { padding: 120px 0 100px; }
body:not([class]) #lead_col a { display: block; width: 780px; max-width: 100%; margin: 55px auto 0; }
body:not([class]) #lead_col a img { transition: opacity .75s; }
@media screen and (hover:hover) {
	body:not([class]) #lead_col a:hover img { opacity: .75; }
}
@media screen and (min-width: 601px) {
	body:not([class]) #sec03 .photo img { min-height: 1602px; max-height: 1800px; }
}
@media screen and (max-width: 600px) {
	body:not([class]) #lead_col { padding: 9vw 0 8vw; }
	body:not([class]) #lead_col a { margin: 6vw auto 0; }
	body:not([class]) #sec03 { padding-bottom: 8vw; }
}
@media screen and (max-width: 400px) {
	body:not([class]) #sec03 h2+p br:not(:first-of-type) { display: none; }
}

/* ===================================================
	客室詳細共通
====================================================== */
[class^="ro"] #lead_col { padding: 80px 0 0; }
[class^="ro"] #lead_col .inner_md { flex-direction: column; padding-right: 0; text-align: center; }
[class^="ro"] #lead_col .inner_md>* { width: 100%; max-width: 100%; }
[class^="ro"] #lead_col .inner_md .tit { padding-top: 0; }
[class^="ro"] #lead_col .inner_md p:not(.tit) { width: 100%; margin-top: 25px; }
[class^="ro"] #cnav { padding: 55px 0 70px; background: #fff; }
[class^="ro"] #cnav span { display: block; }
[class^="ro"] #cnav span:not([class]) { letter-spacing: .25em; }
[class^="ro"] #cnav .sm { font-size: 13px; color: #999; }
[class^="ro"] .btn_arrow { display: block; width: 450px; max-width: 92%; line-height: 80px; margin: 55px auto 0; transition: background-color .5s; }
[class^="ro"] section { padding-bottom: 120px; }
[class^="ro"] section:nth-of-type(even) { background: #1c1c1c; }
[class^="ro"] section:nth-of-type(even) .tit_wrap .sq { background: #242424; }
[class^="ro"] section:nth-of-type(even) .box_detail dt { background: #000; }

.box_txt_01 { padding: 40px 0 80px; line-height: 2; }
.block_01 { display: flex; justify-content: space-between; flex-direction: row-reverse;}
.box_txt_02 { width: 40%; }
.box_txt_02 .arrow_l { display: inline-block; text-decoration: underline; margin-top: 1em; }
.box_txt_02 .arrow_l:hover { text-decoration: none; }
.topics { display: flex; align-items: center; margin-top: 35px; padding:15px; border-top: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; line-height: 1.6; }
.topics::before { content: 'Topics'; display: block; width: 60px; line-height: 60px; border-radius: 50%; background: #000; border: 1px solid #545454; letter-spacing: initial; text-align: center; }
.topics p { width: calc(100% - 86px); margin-left: 1.5em; color: #959595; }
.topics a { margin-left: .5em; text-decoration: underline; }
.topics a:hover { text-decoration: none; }
.floor { width: 480px; /*padding: 2vw; box-sizing: border-box; background: rgba(238 238 238/20%);*/ text-align: center; }
.box_detail { display: flex; flex-wrap: wrap; margin-top: 24px; }
.box_detail dt,
.box_detail dd { padding: 14px; border-bottom: 1px solid #999; box-sizing: border-box; font-size: 14px; }
.box_detail dt { width: 140px; background: #222; text-align: center; }
.box_detail dd { width: calc(100% - 140px); }
.box_img { width: 56.6%;}
.box_img p { margin: 0 0 2px;}

@media screen and (hover: hover) {
	[class^="ro"] .btn_arrow:hover { background: #d4d4d4; }
}
@media screen and (min-width: 601px) {
	[class^="ro"] .btn_arrow { font-size: 16px; }
}
@media screen and (max-width: 1500px) {
	[class^="ro"] .tit_wrap .sq { padding-left: calc(50vw - 600px); }
}
@media screen and (max-width: 1304px) {
	[class^="ro"] .tit_wrap .sq { padding-left: 4%; }
}
@media screen and (max-width: 600px) {
	[class^="ro"] #lead_col { padding: max(10vw, 45px) 0 0; }
	[class^="ro"] #lead_col .inner_md .tit img { max-width: 45vw; }
	[class^="ro"] #lead_col .inner_md p:not(.tit) { text-align: left; }
	[class^="ro"] #cnav { padding: 3vw 0 12vw; }
	[class^="ro"] #cnav span { display: inline-block; }
	[class^="ro"] #cnav .sm { margin-left: .25em; }
	[class^="ro"] .btn_arrow { line-height: 60px; margin: 8vw auto 0; }
	[class^="ro"] picture { display: block; transition: opacity 1.3s ease, transform 1.0s ease; }
	[class^="ro"] section { padding-bottom: 14vw; }

	.box_txt_01{ padding: 4vw 0 5vw; }
	.block_01{ flex-direction: column; }
	.box_txt_02{ width: 100%;}
	.topics { flex-direction: column; }
	.topics p { width: 100%; margin: 1em 0 0; }
	.floor { width: 300px; margin: 0 auto 5vw;}
	.box_detail { margin: 0 0 10px; width: 100%; border-top: 1px solid #999;}
	.box_detail dt,
	.box_detail dd { width: 100%; padding: 12px 4%; }
	.box_detail dt { border-bottom: none; text-align: left; }
	.box_img { display: flex; width: 100%; margin-top: 8vw; }
	.box_img p { margin: 0; }
	.box_img p:nth-child(odd) { margin-right: 2px;}
}


/* ---------------------------------------------------
	#cmn_equipment / 客室共通設備
------------------------------------------------------ */
#cmn_equipment { padding: 90px 0 120px; color: #000; background: url(../img/bg.gif)repeat center; }
#cmn_equipment h2 { margin-bottom: 70px; font-size: 38px; text-align: center; }

@media screen and (max-width: 600px) {
	#cmn_equipment { padding: 9vw 0 12vw; }
	#cmn_equipment h2 { margin-bottom: 5vw; font-size: 26px; }
}


/* ---------------------------------------------------
	#cmn_rnav / 客室タイプ
------------------------------------------------------ */
#cmn_rnav { padding: 80px 0 150px; color: #000; background: url(../img/bg_gray.gif)repeat center; }
#cmn_rnav h2 { margin-bottom: 40px; font-size: 38px; text-align: center; }

@media screen and (max-width: 600px) {
	#cmn_rnav { padding: 9vw 0 20vw; }
	#cmn_rnav h2 { margin-bottom: 5vw; font-size: 26px; }
	.cmn_cnav_img li:nth-child(3n) a span img { max-width: 30vw; }
}


/* ---------------------------------------------------
	ro1 / Suijoro
------------------------------------------------------ */


/* ---------------------------------------------------
	ro2 / Unjoro
------------------------------------------------------ */
.ro2 .cmn_cnav { width: 790px; }


/* ---------------------------------------------------
	ro3 / Kakujoro
------------------------------------------------------ */
@media screen and (min-width: 601px) {
	.ro3 .cmn_cnav li:not(:last-child) { margin-right: 20px; }
}
