@charset "UTF-8";
/* ---------------------------------------------------------------
	Search.css
--------------------------------------------------------------- */
/* ---------------------------------------------------
	共通
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {

}
@media screen and (max-width:480px) {
}


/* ---------------------------------------------------
	お宿一覧
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	#search_List .item{ margin: 0; padding: 0 1% 100px; width: 33.3%; box-sizing: border-box;}
	#search_List .item:nth-of-type(8n+2){ clear: none;}
	#search_List .item:nth-of-type(6n+2){ clear: both;}
	#search_List .item>img{ display: block; margin: 0 auto 15px;}
}
@media screen and (max-width:768px) {
	#search_List .item{ padding: 0 2% 50px; width: 50%;}
	#search_List .item:nth-of-type(6n+2){ clear: none;}
	#search_List .item:nth-of-type(4n+2){ clear: both;}
}
@media screen and (max-width:640px) {
	#search_List section>h3,
	#search_List section>p{ width: 96%;}
	#search_List section>p{ text-align: left;}
	#search_List section>p br{ display: none;}
	
	#search_List #contents .acc_tit {
		display: table; width: 100%; padding: 8px;
		background: url(../img/arrow_off.png) no-repeat 97% center;
		border-top: 1px dotted #41271b; table-layout: fixed;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;
	}
	#search_List #contents .acc_tit.active { background-image: url(../img/arrow_on.png);}
	#search_List #contents .acc_tit:nth-last-of-type(2) { border-bottom: 1px dotted #41271b;}
	#search_List #contents .acc_tit:nth-last-of-type(2).active { border-bottom: none;}
	#search_List #contents .acc_tit span { display: table-cell; font-size: 16px; vertical-align: middle;}
	#search_List #contents .acc_tit span:first-child { width: 61px; height: 62px; overflow: hidden; position: relative;}
	#search_List #contents .acc_tit span:last-child { padding: 0 6% 0 10px;}
	#search_List #contents .acc_tit img { max-width: 200%; position: absolute; top: -10px; left: -20px;}
	#search_List .item{ width: 100%; float: none; padding-bottom: 35px;}
	#search_List .item:last-of-type { border-bottom: 1px dotted #41271b;}
	#search_List .item>img,
	#search_List .item h4 { display: none;}
	#search_List .item p,
	#search_List .item table { height: auto !important;}
}
@media screen and (max-width:480px) {
}


/* ---------------------------------------------------
	お宿詳細
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	#search #s_nav{ width: 98%;}
	#search section{ padding: 30px 3%; width: 98%;}
	#search #detail_info #data{ width: 55%;}
	#search #detail_info>img{ width: 40%;}
	#search .detail:nth-child(even),
	#search .detail:nth-child(odd){ padding: 0 3% 50px;}
	#search .flex-direction-nav a::before{
		color: #fff; background: #41271b;
	}
	#search .flex-direction-nav .flex-prev,
	#search .flex-direction-nav .flex-next {
		margin-top: -40px;
	}
	#search .inq{ width: 98%;}
}
@media screen and (max-width:768px) {
	#search .inq{ display: block; padding: 14px 10px; text-align: center;}
	#search .inq>img{ display: block; margin: 0 auto 15px;}
	#search .inq .tel-link,
	#search .inq>a { display: inline-block;}
}
@media screen and (max-width:640px) {
	#search #detail_info #data,
	#search #detail_info>img{ clear: both; margin: 0 auto 15px; width: 100%;}
	#search .detail:nth-child(even),
	#search .detail:nth-child(odd){
		clear: both; margin: 0 auto 15px; padding: 0 0 50px; width: 100%;
	}
	#search #detail_info th,
	#search #detail_info td,
	#search .detail th, #search .detail td{ display: block; box-sizing: border-box; border: 0;}
	#search #detail_info th, #search .detail th{ width: 100%;}
	#search #detail_info td, #search .detail td{ padding: 10px 15px;}

	#search .inq h4{ top: auto; left: auto; position: relative; width: 20%; float: left;}
	#search .inq>img{ margin: 0 0 15px; width: 75%; float: left;}
	#search .inq .tel-link,
	#search .inq>a{ clear: both; display: block; margin: 0 auto 15px;}
}
@media screen and (max-width:480px) {
	#search #s_nav{
		margin: 75px auto 0; padding: 0; text-align: center; position: relative;
		background-repeat: repeat; border-radius: 5px 5px 0 0;
	}
	#search #s_nav a { top: -50px; position: absolute; margin: 0 auto; float: none;}
	#search #s_nav>img{ display: block; margin: 15px auto 0;}
	#search .inq h4 { margin: 0 2% 0 0; width: 15%;}
	#search .inq>img{ margin: 5px 0 15px; width: 80%;}
	
}


/* ---------------------------------------------------
	ご予約の流れ
------------------------------------------------------ */
@media screen and (max-width:1100px) {
	#flow #contents{ padding: 0 1%; box-sizing: border-box;}
	#flow section>p{ margin: 0 auto 50px;}
	#flow #sec01{ width: 63%;}
	#flow #sec01 #tit_area h4 { padding: 0 27%;}
	#flow #sec01 #tit_area a { max-width: 20%;}
	
	#flow #sec02{ width: 33%;}
	#flow #sec02 dt{ padding: 15px 0;}
}
@media screen and (max-width:768px) {
	#flow h3{ margin: 25px auto; padding: 0; width: 96%; background: none;}
	#flow section>p{ width: 96%;}
	#flow section p br{ display: none;}
	
	#flow div[id^="sec0"] .acc_tit { display: block !important; background: url(../../search/img/arrow_off.png) no-repeat 15px center, #41271b url(../../search/img/flow/sec_tit_bg.jpg) no-repeat left top !important;}
	#flow div[id^="sec0"] .acc_tit.active { background-image: url(../../search/img/arrow_on.png), url(../../search/img/flow/sec_tit_bg.jpg) !important;}
	#flow #sec01,
	#flow #sec02{
		clear: both; margin: 0 auto 30px; width: 96%; float: none;
	}
	
	#flow #sec01 #tit_area { margin-bottom: 0;}
	
	#flow #sec02 .acc_tit { padding: 25px 40px; text-align: center;}
	#flow #sec02 dl { background: #41271b;}
	#flow #sec02 dt { display: none;}
}
@media screen and (max-width:640px) {
	#flow section>p{ width: 96%; text-align: left;}	
}
@media screen and (max-width:480px) {
	/* #flow #sec01 #tit_area h4{ padding: 0; margin: 0 auto 15px;}
	#flow #sec01 #tit_area a{ margin: 0 auto; float: none;} */
	
	#flow #sec01 #tit_area { font-size: 0; padding: 15px 40px;}
	#flow #sec01 #tit_area h4 { display: inline-block; padding: 0 2% 10px 0;}
	#flow #sec01 #tit_area a { display: inline-block; max-width: 100%; position: static; margin: 0;}
	
	#flow #sec02 .acc_tit { padding: 15px 40px;}
}






/* ---------------------------------------------------
	clear
------------------------------------------------------ */
#flow #sec01 #tit_area:after{ clear: both; content: "."; display: block; height: 0; font-size: 0; visibility: hidden; }