@charset "UTF-8";

/* =====================
	CSSリセット
======================= */
* {
	margin:0;
	padding:0;
}

ul {
	list-style:none;
}

br {
	letter-spacing:0;
}

/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE Mac \*/
* html .clearfix {height: 1%;}
.clearfix{display:block;}
/* End Hack */


/* 画像の最大幅を100%に */
img {
	max-width:100%;
	height:auto;
}

img.yohaku1 {
margin: 8px 4px 0px 8px;
}

/* 文字サイズを自動調整する機能を無効化 */
body {
	-webkit-text-size-adjust: 100%;
}


/* =====================
	レイアウト
======================= */
/* 幅指定 */
header, nav, #contents, footer {
	width:92%;
	max-width:960px;
	margin:0 auto;
}

/* マージン */
#nav_wrap,
#contents,
#footer_wrap {
	margin-top:15px;
}

/* 画像を中央寄せ */
.img {
	text-align:center;
}



/*==========================================
 ページトップへボタンのスタイル
===========================================*/
a#pagetopBtn img {
  position: fixed;
  bottom: 10px;
  right: 1px;
}



/*==========================================
 ヘッダーのスタイル
===========================================*/
#header_wrap {
	padding:3px 0;
	background-color:#FFFFFF;
}

header h1 {
  margin:3px ;
  padding:15px 5px 7px 0px;
  width:90%;
}
header h1 img {
  width:auto;
}

header {
  position:relative;
  overflow:hidden;
}



/* ナビゲーション */
nav li {
	display:inline;
}
nav a {
	display:block;
	float:left;
	padding:10px 0;
	width:10%;
	color:#ffffff;
	text-align:center;
	text-decoration:none;
	background-color:#00BB96;
}
nav a:hover {
	background-color:#49F2D1;
}

/* パンくず */
#breadcrumbs_wrap {
	padding:10px 0;
	background-color:#f5f5f5;
	border-top:1px solid #cccccc;
}





/*  メインコンテンツ*/
#main {
	float:left;
	width:100%;
	background-color:#FFFFFF;
}





.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


#rinnku ul li{
    list-style:none; /* 先頭記号を消す */
    background: #F3DBB0; /* 背景色 */
    float:left; /* リスト項目を横方向に並べる */
    padding:1px 1px;
    width:auto;
    border-width:2px;
    border-color:#FFEEDB;
    border-style:ridge;
}
/* リストのリンクを装飾 */
#rinnku ul li a {
   text-decoration: none; /* 下線を消す */
   display: block; /* ブロックレベルに */
   padding: 0.3em; /* 内部の余白 */
}
#rinnku ul li a:hover {
   background-color: #96BEF4; /* 背景色 */
}




/* フッター */
#footer_wrap {
	padding:10px 0;
	background-color:#D9F8D5;
	border-top:1px solid #cccccc;
}

#footer {
	text-align:center;
}


.social-button li {
    display: inline-block;
    vertical-align: top;
}



/* =====================
	スマホ向け
======================= */
@media screen and (max-width: 800px) {

/* CSS再リセット */
nav a, #main, #photo, #ingredient, #sidebar {
	float:none;
	width:100%;
}


#rinnku li{
	width: 50%; /* 2カラム */
}



/* スマホ向けここまで */ }




/* =====================
	タブレット向け
======================= */
@media screen and (min-width: 800px) and (max-width: 1024px) {

/* CSS再リセット */
#main, #sidebar {
	float:none;
	width:auto;
}

/* ナビゲーション */
nav a {
	width:50%;
}

#rinnku li{
	width: 33.33333%;
}


/* タブレット向けここまで */ }



/* =====================
	PC向け
======================= */

@media screen and (min-width:1024px){/*1024px 以上の画面幅て適用する CSS*/

header{
	width:100%;/* 6カラム */
}

#photo {
	float:none;/
	width:100%;
}


#rinnku li{
	width: 25%; /
}

aside{
	width:33.33333%;/* 2カラム */
}



footer{
	width:100%;/* 6カラム すでに適用されているため省略可 */
	
}