@charset "UTF-8";

/* CSS Document */
@media all and (min-width: 481px) and (max-width: 768px) {
}

@media all and (max-width: 768px) {
}

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

/*===============================================
CONTAINER
===============================================*/
@media all and (max-width: 768px) {
#CONTAINER {
}
.side_bnr {
	display: none;
}
}
/*===============================================
HEADER
===============================================*/
@media all and (max-width: 768px) {
#HEADER_WRAP {
 height: 4px;
}
#HEADER {
 display: none;
}
#HEADER02 {
 padding: 0 0 0 10px;
 height: 60px;
 width: auto;
}
#HEADER02 .leftBox {
 margin: 15px 0 0 0;
}
#HEADER02 .leftBox img {
 width: 100px;
 height: 30px;
}
#HEADER02 .language {
 border: 2px solid #111111;
 margin: 15px 20px 0 0;
}
#HEADER02 .language a {
 color: #000000;
 font-weight: bold;
 font-family: 'Open Sans', sans-serif;
 text-decoration: none;
 padding: 2px 10px;
 display: inline-block;
}
#HEADER02 .language span.this {
 background: #000000;
 color: #ffffff;
 font-weight: bold;
 font-family: 'Open Sans', sans-serif;
 text-decoration: none;
 padding: 2px 10px;
 display: inline-block;
}
/*スマホ時店舗一覧*/
#acMenu {
 display: inherit;
}
/*スマホ時ナビゲーション*/
#acMenu2 {
 display: inherit;
 margin: 0 0 15px 0;
}
/*スマホ時Facebookアイコン*/
#fb_sp {
 float: right;
 width: 28px;
 margin: 15px 10px 0px 0px;	
}
}

/*===============================================
GNAVI
===============================================*/
@media all and (max-width: 768px) {
#GNAVI {
 display: none;
}
#GNAVI02 {
 display: none;
}
}

/*===============================================
KEYVISUAL
===============================================*/
@media all and (max-width: 768px) {
#KEYVISUAL {
 width: auto;
}
.bx-wrapper:first-child{
	display:none;
}
}

/*===============================================
MAIN
===============================================*/
@media all and (max-width:768px) {
.hostel_list {
 width: auto;
 margin: 20px 10px 30px 10px;
}
.hostel_list li {
 width: 48%;
 margin: 0 1% 2% 1%;
 text-align: center;
}
.hostel_list li:nth-child(4n) {
 margin: 0 1% 2% 1%;
}
.hostel_list li img {
 max-width: 100%;
 height: auto;
 width /****/: auto;
}
#MAIN {
 width: auto;
 margin: 30px 10px 0 10px;
}
.MAIN_LEFT {
 width: auto;
 float: none;
}
.MAIN_RIGHT {
 width: auto;
 float: none;
 margin: 30px 0 0 0;
}
.map_box {
 display: none;
}
.news_list li, .topics_list li {
 height: auto;
}
.about_btn {
 text-align: center;
}


.access_left {
	float: none;
	width: auto;
  height:220px;
}
#map {
	height: 220px;
	width: 100%;
}
.access_left iframe{
	width:100%;
	height:220px;
}

.access_right {
	float: none;
	width: auto;
  margin:30px 0 0 0;
 padding:30px 0 0 0;
  background: url(../img/bdr01.png) repeat-x top;
}
.access_right img {margin:0 auto;display:block;}

.facility_box table th {
 width: 20%;
}
.facility_box .first table tr:last-child th, .facility_box .first table tr:last-child td {
 border-bottom: none !important;
}
}

/*===============================================
PAGE
===============================================*/
@media all and (max-width: 768px) {
#PAGE {
}
}

/*===============================================
SIDE
===============================================*/
@media all and (max-width: 768px) {
#SIDE {
}
}

/*===============================================
FOOTER
===============================================*/
@media all and (max-width: 768px) {
#FOOTER01 {
 width: auto;
}
#FOOTER01_WRAP {
 padding: 25px 0 10px 0;
}
.footer_title {
 display: none;
}
.footer01_list {
 display: none;
}
#FOOTER02_WRAP {
 padding: 10px 0;
}
#FOOTER02 {
 width: auto;
}
#FOOTER02 .footer_l {
 float: none;
 text-align: center;
 width: auto;
 padding: 5px 0 0 0;
}
#FOOTER02 .footer_r {
 display: none;
}
#COPYRIGHT {
 text-align: center;
 font-size: 12px;
 margin: 10px 0 0 0;
}
}

/*===============================================
sp , pc
===============================================*/
@media all and (max-width: 768px) {
.pc {
 display: none !important;
}
.sp {
 display: inherit !important;
}
}

/*===============================================
common
===============================================*/
@media all and (max-width: 768px) {
.column2 > div, .column2_37 > div, .column2_73 > div, .column2_46 > div, .column2_64 > div, .column3 > div, .column2_28 > div, .column2_82 > div {
 float: none;
 display: inherit;
 width: 100% !important;
 margin: 15px 0% 0% 0%;
}
.column4 > div > div {
 width: 48% !important;
}
.column4 > div {
 clear: both;
}
.column6 > div > div {
 width: 31.33% !important;
}
.column6 > div {
 clear: both;
}
}