/**********************************
* File: mobile/style.css
* 2021/04/01 Changed
**********************************/

/*********************
* 一般・共通設定
**********************/
/* リセット */
html,body,header,footer,wrap,mainWrap,sideWrap,h1,h2,h3,h4,p{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	font-weight:bold;			/*normal->bold*/
}

body{
	background-image: url(../../images2/tatami_2.gif);
								/*style.cssからのパス*/
	margin: 0px auto;			/*中央寄せ*/
    font-size: 18px;			/*14px->Mobile用28px*/
	color: black;				/*#382400*/
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    line-height: 1.6;
}
header{
	width: 100%;				/*100%=1080px*/
	float: right;
	margin: 0px auto 10px auto;	/*上:0px,下:10px,中央寄せ*/
	text-align: center;
	color: white;				/*2017/5/17追加*/
	background: black;			/*2017/5/16変更*/
}
footer{
	width: 100%;				/*1080px*/
	position: static;
	margin: 0px auto;			/*中央寄せ*/
	padding: 20px 0;
	text-align: center;
    font-size:16px;				/*copyright用フォント*/
    font-weight:normal;
}
#wrap{
	width: 700px;
	max-width: 700px;			/*1080->480->700px*/
	min-width: 280px;
	margin: 0 auto;
/*	padding: 0px 0 0 0;*/		/*固定プルダウンメニュー分のoffset=80px@@@*/
}
#mainWrap{
	margin: 80px auto 10px auto;/*上:80px=固定メニューの高さ80px分,下:10px,中央寄せ*/
	width: 100%;				/*1080px->100%=700px*/
	float: right;
	border: 1px solid black;	/*黒枠->Mobileでも表示することにした*/
}
/*固定メニューでリンク先がずれるのを補正(成功OK)*/
.hosei > a {
    display: block; padding-top: 80px; margin-top: -80px;
}
/************/
/* 能書き用 */
/************/
h1{
	font-size: 30px;
	color: #0000ee;
	font-weight: 800;
}
h2{							/*メニュー名(Mobile用)*/
	font-size: 30px;
	color: #0000ee;
	font-weight: 800;
}
h3{							/*メニュー説明(Mobile用)*/
	font-size: 26px;
	color: black;
	font-weight: 800;
}
h4{
	font-size: 16px;
	font-color: black;
}
/*ご法要の大項目用*/
h5{
    margin: 0px;
    padding: 0;
    font-size: 28px;			/*14px*/
    font-weight: 900;
    color: #000000;
    border: none;
    font-family: sans-serif;	/*明朝:serif,ゴチック:sans-serif*/
}
/*価格用*/
h6{
    margin: 0px;
    padding: 0;
    font-size: 28px;			/*14px*/
    font-weight: 900;
    color: #000000;
    border: none;
    font-family: "ＭＳ 明朝", serif;	/*明朝:serif,ゴチック:sans-serif*/
}
/*****横並び方法**********************************************************************
基本中の基本、floatで横並びにする方法です。
floatを使うことでボックスを左、または右に寄せ、後続のボックスを横に回りこませます。
デメリットは子要素を全てfloatさせた場合に、囲んでいるdiv要素の高さがなくなることです。
対策としては、囲んでいるdiv要素にoverflow: hidden;を指定するか、
clearfixと呼ばれるCSSを指定します。
 overflowはIE6,7では効きませんので、IEに対応させる場合はclearfixを使う必要があります。
**************************************************************************************/
/****************/
/* お品書き表示 */
/****************/
/******************/
/* style(1列表示) */
/******************/
/*「期間限定」「お年玉・祝い酒」追加(横サイズMOBILE用)(2017/12/23)*/
.wrapper_otoshidama{
	max-width: 100%;			/*max-width:900px;min-width:280px;だとスマホで枠が切れる*/
	min-width: 280px;
	margin: 20px auto;
	padding: 4px;
	border: 2px solid gray;			/*1px solid #CCC*/
	background: #ffffff;
}
/*「期間限定(縦サイズMOBILE用)」追加(2019/03/31)*/
.wrapper_tate{
	max-width: 60%;			/*max-width:500px;min-width:280px;だとスマホで枠が切れる->スマホと分けたので900px*/
	min-width: 200px;
	margin: 20px auto;
	padding: 4px;
	border: 2px solid gray;			/*1px solid #CCC*/
	background: #ffffff;
}
/*お座席,アクセスで使用(枠有り)*/
.wrapper{
	max-width: 100%;			/*max-width:900px;min-width:280px;だとスマホで枠が切れる*/
	min-width: 280px;
	margin: 20px auto;
	padding: 4px;
	border: 2px solid gray;			/*1px solid #CCC*/
}
/*お品書き「女将お勧め料理」(枠無し)*/
.wrapper_non{
	max-width: 100%;			/*max-width:900px;min-width:280px;だとスマホで枠が切れる*/
	min-width: 280px;
	margin: 20px auto;
	padding: 4px;
	border: 0px solid gray;
}
.topNavi{
	width: 100%;				/*このサイズが有効*/
	display: block;				/*blockである必要あり*/
    overflow: hidden;			/*hidden:横並びの為*/
    margin: 20px auto;			/*ここでの中央寄せが有効*/
/*	border: 1px solid #000;*/	/*黒枠*/
}
.topNavi:before,				/*横並びの為必要*/
.topNavi:after{
	content: "";
	display: table;
	clear: both;
}
.topNaviCon{
	width: 100%;
    display: block;				/*block*/
/*	float: left;*/				/*横並びの為必要*/
	margin: 10px 10px 0 0;		/* 0 10px 0 0*/

    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    text-decoration: none;
    color: #000;
    transition: background 0s ease 0s, border 0.5s ease-out 0s;
    background: #f1f1f1;
/*	border: 1px solid #f1f1f1;*/
    border-radius: 4px;
}
.topNaviCon:hover{				/*マウスが載ったとき*/
    color: #000;
    background: #fff9f5 none repeat scroll 0 0;
    border: 1px solid #f19500;
    transition: background 0s ease 0s, border 0.5s ease-out 0s;
}
.topNaviCon h2{					/*白枠メニュー内の文字*/
    margin: 10px;
    padding: 0;
    font-size: 28px;			/*14px->Mobile用20px*/
    font-weight: bold;
    color: #f19500;
    border: none;
}
.topNaviCon h3{					/*価格用*/
    margin: 10px;
    padding: 0;
    font-size: 28px;
    font-weight: bold;
    color: #000000;
/*  border: none;*/
    font-family: "ＭＳ 明朝", serif;	/*明朝:serif,ゴチック:sans-serif*/
}
.topNaviCon:hover h2{
    color: #f19500;				/*橙色*/
}
.topNaviCon p{
    margin: 10px;
}
/****************************/
/* 画像と文字を同一行にする */
/****************************/
.box {
float: left; width:500px;
}
.box2 {
clear: both;
}
/*********************/
/* イベント用        */
/*********************/
.wrap_event{					/*枠無し*/
	width: 100%;				/*このサイズが有効*/
	display: block;				/*blockである必要あり*/
    overflow: hidden;			/*hidden:横並びの為*/
    margin: 0px auto;			/*ここでの中央寄せが有効*/
/*	border: 1px solid #000;*/		/*黒枠*/
}
.wrap_event_waku{				/*黒枠付き*/
	width: 100%;				/*このサイズが有効*/
	display: block;				/*blockである必要あり*/
    overflow: hidden;			/*hidden:横並びの為*/
    margin: 0px auto;			/*ここでの中央寄せが有効*/
    text-decoration: none;
    color: #000;
    background: #f1f1f1;
	border: 1px solid #000;		/*黒枠*/
}
.wrap_event_Con{
	width: 50%;
    display: block;				/*block*/
	float: left;				/*横並びの為必要*/
	margin: 0px 0px 0 0;		/* 0 10px 0 0*/
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: 2px;
    text-decoration: none;
    color: #000;
    background: #f1f1f1;
	border: 1px solid #000;		/*黒枠*/
}
/*********************/
/* 写真用キャビネット*/
/*********************/
.topNaviPhoto{
	display: inline-block;
	width: 100%;				/*440px*/
	text-align: center;			/*写真を中央へOK(写真はtextと同じ扱い)*/
/*	border: 1px solid black;*/	/*@@@*/
}
/************************/
/* ページトップへの戻り */
/************************/
.totop{
    position:fixed;
    bottom:15px;
    right:15px;
}
.totop a{
    display:block;
    text-decoration:none;
}
.totop img{
    background:#f19500;
}
.totop img: hover{
    background:#e78f00;
}