@charset "utf-8";
/* CSS Document */

/* ========================================
    リセットcss
========================================= */
*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

/* ========================================
	全体設計(TOPページ、下層ページ共通想定)
========================================= */
body {
	color: #601e00;
	font-size: 16px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	background-color: #fff5df;
	position: relative;		/* headerの起点　*/
}

div#wrapper{ 	/* フッターより前を全て包む　*/
	width: 100%;
}
div.container{		/*　コンテンツ幅　*/
	width: 1092px;
	margin: 0 auto;
}
section.content{		/*　各コンテンツの高さ・間隔を統一　*/
	width: 100%;
	height: 510px;
	padding: 65px 0;
}

/*------- 見出し　基本設計 -------*/
div.title{				/* 個別にid属性を追記して子要素(img)のwidth要調整 */
	width: 100%;
	height: 180px;
	margin-bottom: 50px;
	background: url("images/common/rice.png")15px center repeat-x; /* 教材範囲外? */
}
div.title img{
	display: block;
	margin: 0 auto;
	padding: 0 20px;
	background-color: #fff5df;
}
/* 子要素(img)調整用↓
div#(section名など)_title img{
	width: ___px;
}
*/


/*-------　コンテンツ内のボタンの共通設定 -------*/
.button{
	width: 100%;		/* 個別にid属性を追記して文字幅に合わせて要調整 */
	height: 55px;
	text-align: center;
}
/* 個別調整用↓
div#button_(section名など){
	width: ___px;
	margin: __px auto __px auto;
}
*/
.button a{
	color: #fff;
	line-height: 55px;
	background-color: #b46336;
	border-radius: 20px;
	display: block;
}
.button a:hover{
	background-color: #dab19b;
}

/*-------Google Fonts-------*/
	/* キャッチコピー */
.zen-antique-regular {
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
}
	/* 基本テキスト */
.biz-udpmincho-regular {
  font-family: "BIZ UDPMincho", serif;
  font-weight: 400;
  font-style: normal;
}
	/* 「店舗情報」テキスト */
.biz-udmincho-regular {
  font-family: "BIZ UDMincho", serif;
  font-weight: 400;
  font-style: normal;
}
	/* 小さいコメント */
.kaisei-opti-regular {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}
	/* ボタン用 */
.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*--------------配色--------------*/
/*	全体背景色：#fff5df		rgb(255,245,223)
	フッター：#40b15f
	テキスト：#601e00
	ボタン：#b46336		hover時:#dab19b
	Instagramアイコン hover時：rgba(180,99,54)
*/

/*----- z-index (「コンセプト」bgに伴い使用)------*/
/*		
		header:1000
		常時表示ボタン2つ:1000

		「コンセプト」(section#concept):0 
		「コンセプト」bg:-100
*/

/*=======================
	header
=======================*/
header{
	width: 100%;
	height: 105px;
	display: flex;		/* 画像2つとナビゲーションを横並び */
	justify-content: space-between;
	align-items: center;
	position: fixed;	/* 起点はbody　*/
	top: 0;
	left: 0;
	background: rgba(255,245,223,0.99);
	box-shadow: 0px 0px 10px rgba(255,245,223,0.99);
	z-index: 1000;
}

header img#header_logo{
	width: 192px;	/* heightに対する等倍の横幅 */
	height: 95px;
	margin: 5px 0 5px 10px;
	line-height: 105px;
	margin-right: 125px;/* width+margin-right=img#TELのwidth になるように*/
}

/*------- ナビゲーション -------*/
header nav ul{
	width: 826px;		/* この幅でナビゲーション同士の余白の間隔が決まる */
	margin: 0 auto;		/* li全体を中央寄せにする*/
	display: flex;		/* 個々のliを横並びにする*/
	justify-content: space-between;		/* 個々のliの配置の間隔が決まる */
	align-items: center;
}
/*------- 個々のナビゲーション -------*/
header nav ul li{
	width: 118px;
	text-align: center;
}
header nav ul li a{
	height: 65px;
	padding-top: 40px;
	color: #601e00;
	text-align: center;
	line-height: 22px;		/* 緑色の装飾の配置の微調整 */
	display: block;
}
header nav ul li a:hover{
	color: #b46336;
	background: url("images/common/nav_bg.png")no-repeat center;
}
nav ul li a span{
	font-size: 13px;
}
/*------- 2行になる「商品一覧（アレルゲン情報）」だけ個別調整 -------*/
nav ul li a p#nav_menu{
	margin-top: 3.5px;
	font-size: 13px;
	line-height: 18px;
}

header img#header_TEL{
	width: 317px;	/* img#header_TELの基準 */
	height: 95px;
	margin: 5px 10px 5px 0;
	line-height: 105px;
	border-radius: 20px;
}
/*=======================
	常時表示ボタン
=======================*/
/*------- Instagramアイコン -------*/
div#instagram{
	width: 100%;
}
div#instagram_inner001{
	width: 150px;
	height: 150px;
	position: fixed;	/* 起点はheader　*/
	top: 310px;		/* キャッチコピーの高さにInstagramアイコンが来るように */
	right: 0;
	z-index: 1000;
}
div#instagram_inner001 p.kaisei-opti-regular{
	font-size: 14px;
	text-align: center;
	margin-bottom: 30px;	/* Instagramアイコンとの距離（余白） */
	font-weight: bold;
	text-shadow: 0px 0px 10px rgba(255,245,223,0.8);
}
div#instagram_inner001 a{
	width: 60px;
	height: 60px;
	display: block;		/* 画像(子要素)にmarginを適用させるため */
	margin: 0 auto;
}
div#instagram_inner001 a:hover{		/* 疑似的にアイコンの背景を変化させる */
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0px 0px 15px rgba(180,99,54,0.5);
}	
div#instagram_inner001 a img{
	width: 60px;	/* 外周にこの幅の1/2以上余白を取る */
	line-height: 60px;
}

/*------- トップに戻るボタン -------*/
div#pagetop{
	width: 100%;
}
div#pagetop a{
	height: 59px;
	position: fixed;	/* 起点はheader　*/
	bottom: 20px;
	right: 15px;
	z-index: 1000;
}
div#pagetop a:hover{	/* 疑似的にアイコンを動かす */
	bottom: 30px;
}

/*=======================
	ポートフォリオ用追記
=======================*/
#attention{
    background-color: #AE1537;
    margin: 0 0 10px 10px;
    padding: 10px 15px 10px 25px;
    line-height: 1.5;
    border-radius: 10px;
    position: fixed;	/* 起点はheader　*/
	bottom: 0;
	left: 0;
	z-index: 1000; 
}
#attention{
    color: #fff;
}
/*=======================
	メインビジュアル
=======================*/
div#main{
	width: 1092px;
	height: 520px;
	margin: 0 auto;
	margin-top: 115px;	/* headerの　高さ+box-shadowの高さ分　下げる */
	border-radius: 60px;
	background: url("images/page/top/top_image.jpg")no-repeat center;
}

h1{
	padding-top: 241px;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 0px 5px rgba(255,255,255,0.8);
}

/*-------　前面のボタン2つ　-------*/
div#main_inner{
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 122px;
}
div#main_inner div.button_main{
	width: 250px;
	margin: 0 10px;
}
div#main_inner div.button_main a{
	border: solid 1px #fff;
}
/*=======================
	「コンセプト」
=======================*/
section#concept{
	width: 100%;
	height: 730px;
	margin-top: 150px;	/* メインビジュアルとの間隔	*/
	position: relative;		/* bgの起点 */
	z-index: 0;
}

/*-------bg（背景ライン装飾）-------*/
div#bg_top{
	width: 100%;
	height: 20px;
	background: url("images/common/rice.png")15px center repeat-x; /* 教材範囲外? */
	position: absolute;		/* 起点はsection#concept　*/
	top: 81px;		/* 見出しの"CONCEPT"の文字に合わせた高さ */
	z-index: -100;
}
div#bg_bottom{
	width: 100%;
	height: 20px;
	background: url("images/common/rice.png")15px center repeat-x; /* 教材範囲外? */
	position: absolute;		/* 起点はsection#concept　*/
	top: 616px; 	/* ボタンの背面に合わせた高さ */
	z-index: -100;
}

/*-------コンテンツ-------*/
div#concept_inner{
	width: 1092px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}
/*-------レフト-------*/
div#concept_left{
	width: 491px;
	padding: 0 28px;
}
div#concept_left img{
	border-radius: 27px;
}
div#concept_left img:first-child{
	margin-bottom: 30px;
}
/*-------ライト-------*/
div#concept_right{
	width: 545px;
}
div#concept_title{
	width: 239px;	/* 画像ファイルの横幅 */
	margin: 0 auto;
	margin-bottom: 46px;
	padding: 0 15px;
	background-color: #fff5df;	/* 疑似的にbgを隠す */
}
h2{
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 1px;	/* 教材範囲外? */
	text-align: center;
}
/*-------　ボタン微調整　-------*/
div#concept_button{
	width: 260px;
	margin: 50px auto 0px auto;
	padding: 0 10px;
	background-color: #fff5df;	/* 疑似的にbgを隠す */
}
div#concept_button div#button_concept{
	width: 240px;
	margin: 0 auto;
}
/*=======================
	「メニュー」
=======================*/
section#menu{
	margin-top: 150px;
	padding-bottom: 65px;
}

section#menu p{
	font-size: 14px;
	color: #40b15f;
	text-align: right;
	margin-top: 50px;
}
/*-------　ボタン微調整　-------*/
div#button_menu{	/* 「コンテンツ内のボタンの共通設定」の微調整 */
	width: 310px;
	margin: 0 auto;
}
/*=======================
	「FAQ」
=======================*/
section#faq{
	margin-top: 100px;
	display: flex;
	justify-content: space-between;
}
/*-------　レフト　-------*/
div#faq_left{
	width: 545px;
	margin: 0 auto;
}
div#faq_left h3{
	padding-top: 130px;
	line-height: 40px;
	text-align: center;
}
/*-------　ボタン微調整　-------*/
div#faq_button{			/* 「コンテンツ内のボタンの共通設定」の微調整 */
	width: 230px;
	margin: 50px auto 40px auto;
}

div#faq_comment{
	width: 100%;
	height: 103px;
	background: url("images/page/top/image_005.png")center no-repeat;
}
div#faq_left p.kaisei-opti-regular{
	font-size: 18px;
	color: #40b15f;
	padding: 52px 0 0 130px;
}

/*-------　ライト　-------*/
div#faq_right img{
	width: 545px;
	border-radius: 29.94px;
}

/*=======================
	「お問い合わせ」
=======================*/
section#contact{
	width: 100%;
	margin-top: 100px;
	padding-top: 65px;
	padding-bottom: 100px;
	background-color: #fff;
}
/*-------　見出し微調整　-------*/
div#contact_title{
	margin-bottom: 20px;
}
div#contact_title img{
	width: 247px;
	background-color: #fff;
}

/*-------　コンテンツ　-------*/
article#contact_inner{
	width: 1092px;
	margin: 0 auto;
	text-align: center;
	line-height: 30px;
	border-radius: 60px;
	padding: 30px 0;
	background: url("images/page/top/image_006.jpg")no-repeat;
}
/*-------上段-------*/
div#contact_001{
	width: 546px;
	margin: 0 auto;
	padding: 10px 0;
	margin-bottom: 30px;
	border-radius: 30.3px;
	background: rgba(255,255,255,0.6);
}
div#contact_001 h4{
	font-size: 24px;
	padding: 15px 0 10px 0;
}
div#contact_001 p{
	padding: 10px 0;
}
/*-------下段-------*/
div#contact_002{
	width: 546px;
	margin: 0 auto;
	border-radius: 23px;
	background: rgba(255,255,255,0.6);
}
div#contact_002 p{
	padding: 5px 0;
}

/*=======================
	「店舗情報」
=======================*/
section#section_access{
	width: 100%;
	margin-top: 150px;
	margin-bottom: 65px;
}

/*-------　見出し微調整　-------*/
div#access_title{
	margin-bottom: 20px;
}
div#access_title img{
	width: 194px;
}

/*-------　コンテンツ　-------*/
article#article_access{
	width: 1092px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
/*-------レフト-------*/
div#access_left dl dt{
	font-size: 18px;
	line-height: 2.5;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", "sans-serif";
}
div#access_left dl dd{
	line-height: 1.5;
	border-top: 3px solid #f8d7bf;
	padding: 5px 0;
}
div#access_left dl dd:nth-of-type(2),div#access_left dl dd:nth-of-type(4){
	border: none;
}
div#access_left dl dd.biz-udpmincho-regular{
	letter-spacing: 1px;	/* 教材範囲外? */
}
/*-------ライト-------*/
div#access_right img{
	border-radius: 30px;
}
/*=======================
	footer
=======================*/
footer{
	width: 100%;
	margin: 0 auto;
	padding: 65px 0 5px 0;
	background-color: #40b15f;
	color: #fff;
}
/*-------ロゴ-------*/
footer img{
	width: 170px;
	display: block;
	margin: 0 auto;
}

/*-------ナビゲーション-------*/
footer ul.kaisei-opti-regular{
	width: 1092px;
	margin: 0 auto;
	margin-top: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer ul li a{
	color: #FFF;
}
footer ul li a:hover{
	color: #f8d7bf;
}
footer ul li#instagram_inner002 a{
	width: 35.5px;
	display: block; 
}
footer ul li#instagram_inner002 a:hover{
	background-color: #f8d7bf;
	box-shadow: 0px 0px 5px rgba(255,255,255,0.8);
	border-radius: 10px;
}
footer ul li#instagram_inner002 a img{
	width: 35.5px;		/* 外周にこの幅の1/2以上余白を取る */
}

/*-------コピーライト-------*/
footer p{
	margin-top: 50px;
	font-size: 15px;
	text-align: center;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", "sans-serif";
}