@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 1150px) {
	#key_vis { top:0;}
	#room #lead { margin:auto 10%; width:80%;}
	#room #lead span:not([class]) { display: block; }
	#room #c_nav { margin:150px auto 60px auto; width:80%;}
	/*#room #c_nav li{  margin-right:2%; width:23%;}*/
	#room #c_nav li a {border-color:#333;}

	#room #c_nav .acc_tit {
		display: block; font-weight: bold; padding:5px 10px; font-size: 12px; border:1px solid #666;
		border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px;
	}
	#room #c_nav .acc_tit::before { content:"â–¼"; font-size:10px; margin-right:15px; }
	#room #c_nav .acc_tit.active::before{ content:"â–²";}
	#room #c_nav .acc_tit::after { top: auto; right: auto; font-size: 14px; position: static; content: "";}

	#room #c_nav li { width: 100%; box-sizing: border-box;}
	#room #c_nav li a{ padding: 15px 5%; border-top: 0; border-left: 0; border-right: 0;}

	#room section { width:96%;}
	#room .slides li { margin-bottom:30px;}
	#room section .note { margin:40px auto 15px 0; padding:10px; width:48%;}
	#room section .note + p { width:48%;}
	#room section figure.item1 {width:63%;}
	#room section figure.item2 { width:35%;}

	#room #sec1 figure { padding-top:30px; width:49%; }
	#room #sec2 figure { padding-top:30px; width:49%; }

	#room section#sec3 .note {width:43%;}
	#room section#sec3 .note + p { width:70%;}
	#room #sec3 figure:not([class]) img.layout { float:right; margin: 30px 2% 30px 1%; width:27%; }
	#room #sec3 figure:not([class]) img:not([class]) { float:left; margin-bottom:10px; width:22%; }

	#room section#sec4 .note { float:left; width:43%;}
	#room section#sec4 .note + p { float:left; width:65%;}
	#room #sec4 figure.item2::after { content:none;}
	#room #sec4 figure:not([class]) img.layout { float:left; margin: 30px 1% 30px 2%; width:27%; }
	#room #sec4 figure:not([class]) img:not([class]) { margin-bottom:10px; margin-left:0; width:22%;}

	#room #sec5 p{ width:90%; float:none; margin:0 auto 0 auto; }
	#room #sec5 h3 { background-image: none; font-size:17px; float:none; height:auto; padding:30px 0 15px 0; margin:0; width:auto; }


	/* 170915 daimon */
	#room	#c_nav div {display: none;}
	#room #c_nav ul{ display: block;}
	#room #c_nav dl{ margin: 15px auto; padding: 10px 10px 15px; background-color: rgba(255,255,255,0.07);}
	#room #c_nav dt{ color: #fff;}
	#room #c_nav dd ul { display: block; width: 100%;}
	#room #c_nav dd li a{
		background-color: rgba(96,51,31,0.5);
		border-top: none; border-right: none; border-left: none;
		border-bottom: 1px solid #774c3b;
	}
	#room #ro_wrap section[id^="ro"] { width: 96%;}

	#room #ro_wrap #ro1 .flex-control-thumbs,
	#room #ro_wrap #ro2 .flex-control-thumbs,
	#room #ro_wrap #ro3 .flex-control-thumbs{
		margin: 10px auto 25px; float: none;
		right: auto; bottom: auto; position: static;
		text-align: center;
	}

	#room #ro_detail img,
	#room #ro_detail dl{ width: 96%;}
	#room #ro_detail dt{ width: 30%; text-align: center;}
	#room #ro_detail dd{ padding-left: 0;}

	#room #ro_guide{ width: 96%;}
	#room #ro_guide dl{ margin-right: 0; width: calc(100%/3);}
	#room #ro_guide dt{ margin: 0 auto 20px; width: 92%; max-width: 363px;}
	#room #ro_guide dd{ margin: 0 auto; width: 92%; max-width: 363px;}

	#room #ro_wrap .flexslider + div p br,
	#room #ro_detail dd br,
	#room #ro_guide dd br { display: none;}
}
@media screen and (max-width: 900px) {
	#room section { padding:30px;}
}
@media screen and (max-width: 768px) {
	#room #c_nav { margin:80px auto 60px auto;}
	#room h3 { margin: -150px auto -40px auto; padding-top:60px;}
  #room .flex-control-thumbs { float: none; display: block; margin: 0 auto;}

	#room section figure.item1 { width:100%;}
	#room section figure.item2 { width:100%;}
	#room section .note { margin:10px auto 15px 0; padding:10px; width:100%;}
	#room section .note + p { margin-bottom:50px; width:100%;}
	#room #sec1 figure,
	#room #sec2 figure { clear:both; float:none; margin:0 auto; padding-top:20px; width:80%; }

	#room #sec3 { padding:30px; }
	#room section#sec3 .note { width:100%; }
	#room section#sec3 .note + p { width:100%; }
	#room #sec3 figure:not([class]) { margin:0 10%; width:80%;}
	#room #sec3 figure:not([class]) img.layout { float:right; margin: 30px 0 30px 0; width:45%;}
	#room #sec3 figure:not([class]) img:not([class]) { margin-top:60px; margin-left:0; width:45%;}

	#room #sec4 { padding:30px; }
	#room section#sec4 .note { width:100%; }
	#room section#sec4 .note + p { width:100%; }
	#room #sec4 figure:not([class]) { margin:0 10%; width:80%;}
	#room #sec4 figure:not([class]) img.layout { float:right; width:40%;}
	#room #sec4 figure:not([class]) img:not([class]) { float:none; margin-top:60px; margin-left:0; width:45%;}


	/* 170915 daimon */
	#room #ro_wrap{ margin-top: 60px;}
	#room #ro_wrap h2{ margin: 0 auto 25px;}
	#room #ro_wrap h3 {
		top: auto; left: auto; position: relative;
		margin: 0 auto -60px; padding-top: 38px;
		background-size: 100% 100%;
	}

	#room #ro_wrap section[id^="ro"] { margin: 0 auto 40px;}
	#room #ro_wrap #ro2 .flexslider+div{ text-align: center;}
	#room #ro_wrap #ro2 .flexslider+div p{ clear: both; margin: 0 auto; padding: 25px 0; text-align: left;}

	#room #ro_wrap #ro2 .flexslider+div ul,
	#room #ro_wrap #ro2 .flexslider+div li{ display: block;}

	#room #ro_wrap #ro2 .flexslider+div ul{ margin: 0 auto; float: none;}
	#room #ro_wrap #ro2 .flexslider+div li{
		margin: 0; padding: 0 2%; width: 50%;
		text-align: center; box-sizing: border-box;
	}

}
@media screen and (max-width: 640px) {
	#room section { padding:10px;}
	#room #sec3 { padding:10px; }
	#room #sec4 { padding:10px; }
	#room #c_nav { margin-top:80px }
	#room .flex-control-thumbs { width:100%;}
	#room .slides li img { margin-bottom:-30px;}
	#room section figure.item1 img,
	#room section figure.item2 img{ margin-bottom:-30px;}

	/* 170915 daimon */
	#room #c_nav dt{ font-size: 22px;}
	#room #c_nav dt span{ display: block; margin: 0; font-size: 18px;}
	#room #ro_wrap h2{ margin: 0 auto 25px; width: 96%; font-size: 24px;}
	#room #ro_wrap h2 span{ font-size: 24px;}
	#room #ro_wrap section[id^="ro"] { margin: 0 auto 25px; width: 94%;}
	#room #ro_wrap #ro1 .flexslider+div img,
	#room #ro_wrap #ro3 .flexslider+div img{ display: block; margin: 0 auto 15px !important; float: none;}
	#room #ro_wrap .flexslider+div p{ padding: 0;}

	#room #ro_detail dl,
	#room #ro_detail dt,
	#room #ro_detail dd{ display: block;}

	#room #ro_detail img,
	#room #ro_detail dl{ width: 94%;}
	#room #ro_detail dt{ width: 100%;}

	#room #ro_guide { padding-bottom: 25px; width: 94%;}
	#room #ro_guide dl{ margin: 0 auto 40px; width: 100%; float: none;}
	#room #ro_guide dt{ width: 100%; max-width: 100%; text-align: center;}
	#room #ro_guide dd{ width: 100%; max-width: 100%;}

}
@media screen and (max-width: 480px) {
	#room #lead .wbr { display: block; }
	#room #c_nav { margin:40px auto 60px auto;}

	#room h3 { margin: -150px auto 10px; padding-top:60px;}
	#room .slides li { margin-bottom:5px;}
	#room .slides li img { margin-bottom:5px;}
	#room .slides li p { background:none; color:#000;}
	#room #sec1 .slides li:nth-of-type(2) p span,
	#room #sec2 .slides li:nth-of-type(4) p span { display: block; }
	#room #sec1 figure,
	#room #sec2 figure {width:100%; }
	#room #sec3 figure:not([class]) { margin:0; width:100%;}
	#room #sec3 figure:not([class]) img.layout { width:50%;}
	#room #sec3 figure:not([class]) img:not([class]) { width:48%;}
	#room #sec4 figure:not([class]) { margin:0; width:100%;}
	#room #sec4 figure:not([class]) img.layout { width:50%;}

	/* 170915 daimon */
	#room #ro_wrap h3 { margin: 0 auto -15px;}
	#room #ro_wrap #ro2 .flexslider+div li{ margin: 0 0 15px; padding: 0; width: 100%; float: none;}
}