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

/* ===========================
nav
============================*/
#menu { display: none; }
.slicknav_menu { display:block; }

/* ===========================
header
============================*/
.h_box {
	width: 100%;
	margin: 0px auto 5px auto;
}

.h_box .logo {
	width: 96%;
	padding: 0 2% 0px 2%;
	text-align: center;
}

.h_box .h_contents_r {
	width: 100%;
	margin-top: 10px;
	text-align:center
}

.h_box .h_contents_r02 {
	display:none;
}

/* ===========================
group
============================*/
.group_box { margin: auto; width: 100%;	max-width: 1200px; }
.group_box .g_title { font-size: 112%; }
.group_box li { width: 100%; margin-bottom: 20px; }

/* ===========================
footer
============================*/
.f_box {
	width: 100%;
	margin: auto;
	padding: 20px 0;
}

.f_box dt {
	padding: 0 20px;
}

.f_box dt p { text-align: center; }

.f_box dd {
	padding: 0 20px;
	margin-bottom: 20px;
}

.f_box dd div {
	display: inline-block;
    /display: inline;
    /zoom: 1;
	width: 49%;
	vertical-align:top;
}

.f_box dd div p {
	display: inline-block;
    /display: inline;
    /zoom: 1;
	width: 48%;
	margin-left: 1%;
	margin-bottom: 5px;
	font-size: 106%;
}

/* ===========================
box
============================*/
.main_box { padding-left: 10px; padding-right: 10px; }

.c_box_01 {
	float: left;
	width: 100%;
}

.c_box_02 {
	float: right;
	width: 100%;
}

.c_box_03 {
	float: left;
	width: 100%;
}

.c_box_04 {
	float: right;
	width: 100%;
}

.c_box_05 {
	width: 100%;
}

.c_box_07 {
	width: 100%;
}

.c_box_08 {
	width: 100%;
}

.c_box_09 {
	width: 100%;
}

.c_box_10 {
	float: left;
	width: 100%;
}

.c_box_11 {
	float: right;
	width: 100%;
}
	
.image_box { /*Android4.3*/    /*Firefox21*/ /*IE10*/ /*PC-Safari,iOS8.4*/
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  margin:0 0 10px 0;
  padding:0;}
  
 .image_box02 { /*Android4.3*/    /*Firefox21*/ /*IE10*/ /*PC-Safari,iOS8.4*/
  display: flex;
  flex-wrap: wrap;
  margin:0 0 10px 0;
  padding:0;}

.image_2box { 
width:50%;
  padding:0;}
  
.image_3box { 
width:31%;
  padding:0;
  margin:1%;}
  
.image_3box img { 
width:100%;
margin-bottom:10px;}
  
.image_4box { 
width:23%;
  padding:0;
  margin:1%;}
  
.image_5box { 
width:18%;
  padding:0;
  margin:1%;}


/* ===========================
m_images
============================*/
#m_images {
	width: 100%;
	margin: 0;
	padding:0;
}

#m_images img {
	width: 100%;
	margin:0;
}


/* ===========================
banner
============================*/
.bnnr01 table td h2 { font-size: 100%; }

.r_bnnr {
	float: left;
	width: 46.2%;
	margin-left: 1%;
	margin-bottom: 10px;
}

.r_bnnr p { display: none; }
.s_bnnr { width: 98%; }

/* ===========================
display
============================*/
.s_none { display: none; }

/* ===========================
title
============================*/
.title01 { font-size:136%; }
.title02 { font-size:124%; }
.title03 { font-size:136%; text-align: center; background: #EEE; margin-bottom: 20px; }
#main_title .title03 span { font-size:54%; font-weight:normal; color:#000000; margin-left:20px;}

/* ===========================
parts
============================*/
.vgscript {
	width: 100%;
	overflow: auto;
}

.no_style li {
	display: inline-block;
    /display: inline;
    /zoom: 1;
	width: 47%;
	margin: 0 1% 20px 1%;
	text-align: center;
	vertical-align: top;
}

.no_style li div { margin-top: 10px; padding: 0px 10px; }
.no_style li div p { text-align: center; }

.top_stay li {
	display: inline-block;
    /display: inline;
    /zoom: 1;
	width: 100%;
	vertical-align: top;
}

.top_stay li h2 { text-align: center; margin-top: 10px; }

.top_restaurant ul li {
	display: inline-block;
    /display: inline;
    /zoom: 1;
	width: 49%;
	vertical-align: top;
	margin-right: 0.2%;
	margin-bottom: 0.5%;
}

.top_restaurant ul .none_2 {
	display: none;
}

.top_restaurant h2 span {
	float: right;
}

.about img {
	width: 50%;
}

/* ===========================
house
============================*/

.house_image {
	float: left;
	margin-right:5px;
	width: 100%;
	border-bottom:0px dotted #CCCCCC;
	margin-bottom:10px;
	display: block;
}


.house_image img {
	width: 100%;
}

.house_image p {
	font-size: 110%;
	color: #333333;
	padding-top: 5px;
	text-align: center;
	font-weight:bold;
}

.house_image .comment {
	color: #333333;
	font-weight:normal;
	text-align:left;
}

.image_left { margin-right:0px;}
.image_right { margin-left:0px;}
	

.line_list li {
	float: left;
	width: 100%;
	border-bottom: 1px #CCCCCC dotted;
	padding: 3px 0;
	margin-bottom: 5px;
	font-size: 112%;
}

.line_list .list_title {
	float:right;
	text-align:left;
}

.line_list .list_date {
	white-space:nowrap;
	float:left;
	width:30%;
}

.line_list span {
	float:right;
}

.line_list02 li {
	float: left;
	width: 100%;
	border-bottom: 1px #CCCCCC dotted;
	padding: 3px 0;
	margin-bottom: 5px;
	font-size: 112%;
}

.line_list02 span {
	float:right;
}


/* ===========================
restaurant
============================*/
.restaurant_image li {
	width: 100%;
	border-bottom:0px dotted #CCCCCC;
	margin-bottom:5px;
	overflow:auto;
	height:100%;
}

.restaurant_image img {
	width: 100%;
}

.restaurant_image p {
	font-size: 110%;
	color: #333333;
	padding-top: 5px;
	text-align: center;
	font-weight:bold;
}

.restaurant_image .comment {
	color: #333333;
	overflow:auto;
}

.restaurant_logo img {
	width:100%;
	max-width:300px;
	text-align:center;
}

/* ===========================
course
============================*/
.h_image p { margin-bottom: 15px; }

.c_image p { margin-bottom: 15px; }

.course_list li {
	border-bottom: 1px #CCCCCC dotted;
	padding: 5px 0;
	margin: 10px 0;
	float: left;
	width: 49%;
}

.course_list li a {
	background: url(../images/common/arrow01.gif) left no-repeat;
	padding-left:22px;
	font-size: 120%;
	display: block;
}


/* ===========================
access
============================*/
.google-maps {
	position: relative;
  padding-bottom: 80%;
	overflow: hidden;
	max-height:500px;
	margin-top:20px;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/* ===========================
kako event
============================*/
.img_tate_01 {
	width: 100%;
	margin-bottom: 5px;
}
.img_yoko_01 {
	width:100%;
	margin-bottom: 5px;
}

.photo_name {
	position:relative;
	top: 10px;
	left:15px;
	font-weight:bold;
	height: 0px;
	font-size: 18px;
}




}

@media screen and (max-width: 480px){
.no_style li {
	display: inline-block;
    /display: inline;
    /zoom: 1;
	width: 100%;
}

.no_style li div { padding: 0px 20px; }

.f_box dd div p { width: 100%; margin: 0 0 5px 0; }
}