@charset "utf-8";
body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color: #fff;
	margin: 0;
	padding: 0;
	color: #000;
	
	min-width:1100px;
	font-size:14px;
	
	position:relative;

}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
/*
	padding-right: 15px;
	padding-left: 15px; *//* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}
/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

/* ~~ この固定幅コンテナが他の div を囲みます。~~ */
#container {
	width: 100%;
	background-color: #fff;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
}

.pc{ display:none; }

.header-wrap{ width:100%;	background-color:#5e3b33; }
.header {
	width:1100px; 
	margin:0 auto;
	
	min-height:280px;
	height:auto;
	text-align:center;
	
	position:relative;
	
}

.logo{ position:absolute; top:18px; left:30px; }
.addr{ position:absolute; top:168px; left:690px; }
.hhome{ position:absolute; top:225px; left:700px; }
.htel{ position:absolute; top:225px; left:700px; }
.hmail{ position:absolute; top:225px; left:760px; }
.haccess{ position:absolute; top:225px; left:820px; }
.hfb{ position:absolute; top:225px; left:880px; }
.hinsta{ position:absolute; top:225px; left:940px; }
.hmovie{ position:absolute; top:225px; left:1000px; }

.content {
	width: 100%;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	
	padding-bottom:50px;
	
}

.menu-wrap{ width:100%;	 display:block; min-width:1100px; text-align:center;
	min-height:700px;
	position:relative;
}

.menu-area{ 
	width:1100px;
	padding: 10px 0;
	margin:0 auto;
	height:700px; position:relative; }
div.menu-area img.m-shop{ position:absolute; top:0; left:55px; }
div.menu-area img.m-owner{ position:absolute; top:15px; left:440px; }
div.menu-area img.m-cafe{ position:absolute; top:0; left:735px; }
div.menu-area img.m-beans{ position:absolute; top:340px; left:25px; }
div.menu-area img.m-taste{ position:absolute; top:255px; left:425px; }
div.menu-area img.m-cake{ position:absolute; top:265px; left:800px; }
div.menu-area img.m-order{ position:absolute; top:505px; left:60px; }
div.menu-area img.m-toriatsukai{ position:absolute; top:485px; left:660px; }
div.menu-area img.m-pot{ position:absolute; top:535px; left:415px; }

div.menu-area a.hover{ top:2px; left:2px; position:relative; }

.mainarea {

	padding: 10px 0;
	margin:0 auto;
	width:900px;
		
	height:auto;
	min-height:500px;

}

.navi{ width:100%; text-align:right; padding:5px 0; }

.imgarea{ width:100%; text-align:center; padding:10px 0;  margin:0; }
.imgarea img{ padding:0 0 10px 0; }
.imgarea div.l-txt{ font-size:1.2em; line-height:2.0em;}

.txt{ width:600px; margin:10px 0 0 150px; text-align:left; }

.imgarea400{ width:400px; margin:0 auto; padding:0; text-align:center; padding:10px 0;   }

.small85{ font-size:85%; }
.large11{ font-size:1.1em; }
.large12{ font-size:1.2em; }
.large14{ font-size:1.4em; }
.strong{ font-weight:bold; }

.red{ color:#C03; }

h2.sub{ width:100%; text-align:center; border-bottom:3px #5e3b33 solid; padding:40px 0 10px 0;
	font-size:1.2em; }

/* about */
dl.sub{ width:550px; margin:40px 0 50px 150px;}
dl.sub dt{ width:80px; float:left;  }
dl.sub dd{ width:400px; float:left; margin:0 0 20px 60px; }

/* tokusyo */
dl.sub02{ width:750px; margin:20px 0 50px 50px;}
dl.sub02 dt{ width:180px; float:left; font-size: 1.0em;  }
dl.sub02 dd{ width:460px; float:left; margin:0 0 20px 10px; font-size:1.0em;}

/* policy */
ul.sub{ width:650px; list-style-type:none; margin:10px 0 0 70px; }
ul.sub li{ margin:0 0 15px 0; text-align:left; }

/* program */
.new{ vertical-align:middle; }
.next{ width:100%; text-align:center; padding:10px 0; margin:20px 0 0 0; }
.tonext:after{
	font-family: FontAwesome;
	content: "\f101 ";
	
	margin:-5px 0 0 5px;
	font-size: 1.4em;
	
	color:#F00;
}
.toprev:before{
	font-family: FontAwesome;
	content: "\f100  ";
	
	margin:-5px 5px 0 0;
	font-size: 1.4em;
	
	color:#F00;
}

.news-area{ width:760px; margin:10px 0 10px 70px ; padding:20px 0; }
.news-ttl{ width:760px; margin:10px 0 10px 0 ; padding:20px 0; border-bottom:1px #666 solid;}

.n-title{ margin:10px 0 10px 0; }
.n-title:before{
	font-family: FontAwesome;
	content: "\f0c8";
	
	margin:-5px 5px 0 0;
	font-size: 1.0em;
}

.n-txt{ width:720px; margin:10px 0 10px 20px; text-align:left; }

/* mail */
table.mail{	width:90%; margin:0 auto; border:none; margin:0 0 0 100px; }
table.mail th{ border:none; width:30%; text-align:left; vertical-align:top; padding:5px; font-weight:normal;
	background:url("./images/list_top.gif") left 9px no-repeat; padding-left:15px;
	font-size:100%; font-size:90%;}
table.mail th:before{
	font-family: FontAwesome;
	content: "\f0c8";
	
	margin:-5px 5px 0 0;
	font-size: 1.0em;
}
table.mail td{ border:none; width:70%; padding:5px; line-height:120%; text-align:left; vertical-align:text-top;
	 font-size:90%; }

table.mail td.conf{ border:none; width:70%; padding:5px; line-height:120%; text-align:left; 
	vertical-align:text-top; border:solid #cccccc 1px; }

.error{ text-align:center; width:100%; margin:30px 0 20px 0;  }
.error_conf{ text-align:center; width:100%; margin:0 0 20px 0;  }

/*******************/
.tolist{ width:95%; text-align:right; }

.tolink:after{
	font-family: FontAwesome;
	content: "\f101 ";
	
	margin:-5px 5px 0 0;
	font-size: 1.4em;
	
	color:#F00;
}

.pdfarea{ width:760px; padding:15px 10px; font-size:0.9em; text-align:left; border:1px #ccc solid; 
	margin-top:20px; }

.pdf:after{
	font-family: FontAwesome;
	content: "\f1c1";
	
	color:#F00;
	
	margin:-5px 0 0 5px;
	font-size: 1.2em;
}

/*
ul.nl-title{ list-style-type:disc; margin:10px 0 0 250px; }
ul.nl-title li{ margin:0 0 10px 0; font-size:1.0em; }
*/
/*/////////////////////////////////////*/
.shadow01{
    /*影を入れる*/
    -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
    -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
     box-shadow: 0 10px 8px -6px #8d8c8c;
}


.kana{ ime-mode:active; }
.rome{ ime-mode:disabled; }


/*****************************************************/
p{ margin:10px 0 0 0; }


/* ~~ フッター ~~ */
.footer-wrap{ width:100%; background-color:#5e3b33;  display:block; }
.footer {
	width:1100px; 
	margin:0 auto;
	
	min-height:600px;
	position:relative;
	
	padding-top:20px;
	
}

.f-img{ float:left; margin:0 0 0 10px; }
ul.f-menu{ list-style-type:none; width:300px; float:right; margin:0 40px 0 0; }
ul.f-menu li{ text-align:right; font-size:0.9em; color:#fff; margin:0 0 10px 0; }

ul.f-menu li a:link {
	color: #fff;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
ul.f-menu li a:visited {
	color: #fff;
	text-decoration: underline;
}

.fcopy-wrap{ width:100%; background-color:#5e3b33; display:block;  }
.fcopy {
	width:1100px;
	margin: 0 auto;
	padding:2px 0; 
	text-align:right;
	font-size:0.85em;	
	
	min-height:20px;
	height:auto;
	color:#fff;
}


/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}