@charset "utf-8";

/******************************************
 * 基本
 *****************************************/
.visible-sm { display: none; }
.visible-sm-block { display: none; }
.visible-sm-inline { display: none; }
.visible-sm-inline-block { display: none; }

/******************************************
 * スマホ専用レイアウト
 *****************************************/
@media screen and (max-width: 768px) {
	
	/******************************************
	 * 基本
	 *****************************************/
	.visible-sm { display: block; }
	.visible-sm-block { display: block; }
	.visible-sm-inline { display: inline; }
	.visible-sm-inline-block { display: inline-block; }
	.hidden-sm { display: none; }

	/******************************************
	 * サイト全体
	 *****************************************/
	 body{
		 text-align:center;
	 }
	 
	#wrapper {
		width: auto;
	}

	img.responsive {
		display: block;
		max-width: 100%;
		height: auto;
	}

	img.responsive-center {
		display: block;
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	
	.fl_left	{
		float: none;
	}
	.fl_right	{
		float: none;
	}
	
	
	/* margin */
	.r_mgt10 { margin-top: 10px; }
	.r_mgt20 { margin-top: 20px; }
	.r_mgt40 { margin-top: 40px; }
	.r_mgt50 { margin-top: 50px !important; }

	.r_mgb10 { margin-bottom: 10px; }
	.r_mgb20 { margin-bottom: 20px; }
	.r_mgb30 { margin-bottom: 30px; }
	.r_mgb40 { margin-bottom: 40px !important; }
		
	.r_mgl0 { margin-left: 0 !important; }
	
	.r_mgr0 { margin-right: 0 !important; }
	
	
	/* width 0設定 */
	.re_370 {
		width: auto !important;
		max-width: 640px !important;
	}
	

	/******************************************
	 * ヘッダ
	 *****************************************/
	header {
		margin: 0 auto;
		width: auto;
		height: auto;
	}
	
	.Hone {
		font-size: 0.6rem;
		text-align: center;
	}
	
	#logo {
		width: auto;
	}
	
	#logo img {
		padding-top: 0;
	}
		
	#top_img_outer{
		display:none;
	}
	
	#top_img_outer02{
		display:inherit;
		margin-top: 100px;
		margin-bottom:100px;
	}
	
	.pagedown{
		display:none;
	}
			
	/******************************************
	 * ナビゲーション
	 *****************************************/
	.sp_text {
		position: fixed;
		top: 42px;
		right: 11px;
		font-size: 0.8rem;
		z-index: 9999999;
		color: #0C0C0C;
		display: block;
	}
	
	#res_nav {
		display: block;
	}
	
	#contents nav {
		display: none;
	}
		
	#Hnav {
		display: none;
	}
	
	
	/******************************************
	 * コンテンツ	
	 *****************************************/	
	#contents {
		width: auto;
		margin: 0 20px;
	}
		

	/******************************************
	 * サイド
	 *****************************************/
	
	
	/******************************************
	 * フッター
	 *****************************************/	
	#Bfooter small {
		width: auto;
		padding: 30px 0 25px;
		margin: 50px auto 0;
	}

	
	/*問い合わせボタン*/
	.res_telBtn {
		display: block;
		margin-top: 20px;
	}
	
	.ReTel {
		display: block;
		margin: 0 auto;
		padding: 1%;
		margin-bottom: 20px;
		text-align: center;
		background: #9DC221;
	}
	
	.HReTel {
		display: block;
		margin: 0 auto;
		padding: 15px;
		text-align: center;
		background: rgba(108, 86, 81, 0.8);
		margin: 40px auto;
	}
	
	.ReTel a,
	.HReTel a {
		color: #fff;
	}
	
	.ReTel .re {
		padding-top: 10px;
		font-size: 14px;
		line-height: 1em;
	}
	
	.HReTel .Hre {
		font-size: 14px;
		line-height: 1em;
	}
	
	.ReTel .te,
	.HReTel .Hte {
		font-size: 20px;
	}
	
	.f_resBtn {
		display: block;
		margin: 40px 20px 0;
		width: auto;
	}
	
	/* page top */
	
	#pageTop{
		bottom:30px;
	}
					

	/* --------------------------------------------------
	　                   index.php
	----------------------------------------------------- */	
	.MMenu {
		margin: 0 0 50px;
	}
	
	.title2 {
		margin: 40px 0 50px;
		letter-spacing: 0;
	}
	
	.title3 {
		width: auto;
		font-size: 1.3rem;
	}
	
	.tittle_course {
		font-size: 20px;
		text-align:center;
	}
	
	.tittle_course span {
		font-size: 20px;
	}
	
	.bn_Cdetails {
		padding: 8px;
		width: auto;
		margin-bottom: 10px;
	}
	
	.box01 {
		width: auto;
		float: none;
		margin-right: 0;
	}
	
	.bn_detail {
		padding: 0;
	}
	
	a.bn_details.bn_font {
		float: none;
		width: auto;
		font-size: 1rem;
		margin-bottom: 10px;
	}
	
	#news {
		margin: 10px auto 30px;
	}
	
	#sns {
		top: 0;
	}
	
	article{
		margin-bottom: 80px;
	}
	
	article.article_last{
		margin-bottom:0;
	}
	
	/* topics */
	
	.topics_img{
		margin-bottom: 40px;
	}
		
	/* images */
	
	.image_box{
		width:600px;
		margin:0 auto;
	}
	
	/* contact */
	
	#contact-form{
		width:498px;
	}
	
	.contact-warning{
		text-align:left;
	}
	
	.mailbox_main td input.mailbox_main-btn-reset{
		height:44px;
	}
	
	.mailbox_main td input.mailbox_main-btn-confirm{
		height:44px;
	}
	
	#contact-submit{
		height:44px !important;
	}
	

	/* --------------------------------------------------
	　                breakfast.php
	----------------------------------------------------- */
	.B_box {
		width: auto;
		margin: 0 auto 30px;
	}
	
	
	/* --------------------------------------------------
	　                lunch.php
	----------------------------------------------------- */
	.lunch p {
		line-height: 1.5;
	}
	
	.lunch_box1 {
		width: auto;
		padding: 30px 10px 0;
		margin: 0 auto 40px;
	}
	
	.lunch_box1 dl {
		padding: 0;
	}
	
	.lunch_box1 dt {
		margin-bottom: 5px;
	}
	
	.lunch_drink {
		margin-left: 0;
		margin-top: 10px;
	}
	
	.lunch_box1 .menu_colum dl {
		padding: 0;
		margin-bottom: 10px;
	}
	
	.menu_colum p {
		margin-bottom: 10px !important;
	}
	
	.lunch_box1 .menu_colum dt {
		margin-bottom: 10px;
	}
	
	.lunch_box2 {
		width: auto;
	}
	
	.lunch_box2 li {
		float: none;
		margin-bottom: 10px;
	}
	
	
	/* --------------------------------------------------
	　                dinner.php
	----------------------------------------------------- */
		
		
	
	
	/* --------------------------------------------------
	　                access.php
	----------------------------------------------------- */
	.acess__metro {
		display: initial;
	}	
		
	.mapCan {
		width: auto;
		height: 300px;
	}
	
	#map-canvas {
		width: auto;
		height: 300px;
	}
	
	.bn_details {
		float: none;
		width: auto;
	}
	
	.access {
		margin-bottom: 100px;
	}
	
}

/******************************************
 * スマホ専用レイアウト
 *****************************************/
@media screen and (max-width: 480px) {

/* top img */

#top_img_outer02{
	width:auto;
}

#top_img_outer02 .top_img_box{
	width:85%;
	margin:0 auto;
}

#top_img_outer02 .top_img_inner{
    bottom: -1.2em;
    right: 2.5em;
    font-size: 0.5em;
}

/* about */

.prof_img{
	margin-right:0;
	margin-bottom:30px;
}

/* images */

.image_box{
	width:auto;
	margin:0 auto;
}

.image_box ul.image-set{
/*	width: 400px;*/
    margin: 0 auto;
}

.image_box ul.image-set{
	width:100%;
	margin:0 auto;
}

.image_box ul.image-set li{
	width:50%;
	height: auto;
}

.image_box ul.image-set li img{
	width:100%;
	vertical-align: bottom;
}

.image_box ul.image-set li figure{
	width:auto;
}

/* contact */

#contact-form{
	width:auto;
}

table.mailbox_main{
	width:100%;
}

.mailbox_main th.mailbox_main-title{
	width:auto;
	display:block;
}

table.mailbox_main input{
	width:97%;
}

.mailbox_main-text .inquiry{
	width:100%;
}

.mailbox_main-btn-reset{
	margin-right:0;
	margin-bottom: 30px;
}

#contact-confirm-view{
	left:11px !important;
}

/* footer */

#pageTop{
	right:15px;
}
	
}

/******************************************
 * スマホ専用レイアウト
 *****************************************/
@media screen and (max-width: 320px) {
	
/* common */

.tittle_course{
	font-size:19px;
}
	
/* top_img */

/*#top_img_outer .top_img_inner{
	bottom:-16px;
	font-size:1em;
}

#top_img_outer .top_img_inner img{
	width:70%;
}*/

#top_img_outer02 .top_img_inner{
	right: 1.5em;
}
	
/* images */

.image_box ul.image-set{
	width:auto;
}

/* contact */

.mailbox_main td input.mailbox_main-btn-reset{
	margin-right: 0;
}

#contact-confirm-mask{
	width:100% !important;
}

#contact-confirm-view{
	top:10px !important;
	left:0 !important;
	width:100% !important;
	padding:0 !important;
}

#contact-confirm-view .box{
	height:320px !important;
}

#contact-confirm-view table th{
	font-size:12px !important;
	padding:20px 20px 5px!important;
	width:auto !important;
	display:block !important;
	color: #6c5651 !important;
}

#contact-confirm-view table td{
	width:auto !important;
	display:block !important;
	padding:5px 0 5px 20px!important;
}

/* footer */

#pageTop{
	bottom:22px;
	right:8px;
}

#pageTop img{
	width:80%;
}

}