@charset "utf-8";

/*
=======================================
	Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
	display:block;
}

html{
	-webkit-text-size-adjust: 100%;
}

body{
	color: #a11715;
	line-height: 1.5;
	font-size: 14px;
	font-family: serif;
}

img{
	border: 0;
	max-width: 100%;
	height: auto;
}

ul,ol{
	list-style-type: none;
}

table {
	border-collapse: collapse; 
	border-spacing: 0;
}

img, input, select, textarea { 
	vertical-align: middle;
}

a{
	color: #000;
	transition: 0.5s;
}

a:hover{
	color: #d53e04;
}

a:hover img{
	opacity: 0.7;
}
/*
=======================================
	Reset CSS 終了
=======================================
*/


/*
=======================================
	基本デザイン
=======================================
*/


/* -------------------------------------
	ウインドウ背景
---------------------------------------- */
body{
	background: url(../image/) #f7c36d;
}

.inner{
	max-width:940px;
	padding-left:10px;
	padding-right:10px;
	margin: 0 auto;
}

.inner:after{
	content:"";
	display:block;
	clear:both;
}

/* -------------------------------------
	ヘッダー・フッダー共通
---------------------------------------- */
header,footer{
	max-width:100%;
	background: url(../image/vintage-4420182_1920.jpg) #313028;
	color:#fff;
}


/* -------------------------------------
	ヘッダー
---------------------------------------- */
#header.inner{
	display: table;
}

h1{
	display: table-cell;
	vertical-aligin: middle;
	width:380px;
}

#header_message{
	display: table-cell;
	vertical-aligin: middle;
	width:350px;
}

/* -------------------------------------
	フッター 
---------------------------------------- */
#footer{
	clear:both;
	padding-top:10px;
}



#footer_shop_info{
	float:left;
	width:350px;
	margin:10px 0;
	margin-left:6.27%;
	padding:10px 0;
	padding-left:10px;
	vertical-aligin: middle;
	background-color:#aaa;
	font-size:0.9em;
}

#footer_shop_info >p{}

#footer_shop_info dt{
	clear:left;
	float:left;
}


#footer_shop_info dl{
	padding:15px;
	border:1px solid #fff;
	width:300px;
}

#footer_shop_info dl a{
	color:#fff;
}

#footer_gaikan{
	float:left;
	margin:10px 0;
	margin-left:6.27%;
	border:6px solid #fff;
	width:350px;
	height:233.3px;
}

#footer_sns{
	clear:left;
}


#footer_sns ul{
	text-align:center;
}

#footer_sns li{
	display:inline-block;
}

.icon-twitter:before{
	content:"\ea96";
}

.icon-facebook:before{
	content:"\ea90";
}

.icon-instagram:before{
	content:"\ea92";
}

#footer_sns a{
	display:block;
	margin:20px 10px;
	padding:10px;
	background:#fff;
	border-radius:10px;
	color:#f7c36d;
	font-size:24px;
	text-decoration: none;
}

#footer_copyright p{
	clear:both;
	text-align: center;
}


/*-------------------------------------- 
	グローバルナビゲーション
---------------------------------------- */

/* メニューバーの装飾 */
ul.nav-list{
	margin: 0;
	padding:0 2px 0 2px;
	background-color: #fff;
}

ul.nav-list li {
   width: 183px;           /* メニュー項目の横幅 */
   display: inline-block;  /* ★1:横並びに配置する */
   list-style-type: none;  /* ★2:リストの先頭記号を消す */
   position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.nav-list a {
   background-color: #cc0000; /* メニュー項目の背景色(濃い赤色) */
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 65px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★4:項目内全域をリンク可能にする */
}
ul.nav-list a:hover {
   background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   color: #dd0000;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.nav-list ul {
   display: none;       /* ★1:標準では非表示にする */
   margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
   position: absolute;  /* ★4:絶対配置にする */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.nav-list li:hover ul {
   display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
}

/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.nav-list ul li {   /* ※A */
   width: 182px;               /* サブメニュー1項目の横幅(135px) */
   border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
}
ul.nav-list ul li a {   /* ※B */
   line-height: 35px;   /* サブメニュー1項目の高さ(35px) */
   text-align: center;    /* 文字列の配置 */
   padding-left: 5px;   /* 文字列前方の余白(5px) */
   font-weight: normal; /* 太字にはしない */
}
ul.nav-list ul li a:hover {   /* ※C */
   background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
   color: #005500;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}

/*--------------------------------------
	ハンバーガーメニュー
----------------------------------------*/

/* ------------------------------
   CHAPTER ELEMENTS
------------------------------ */
#gnav {
	width: 100%;
	height: 45px;
	background: #ebebeb;
	background: linear-gradient(to bottom,  #ebebeb 45%,#d8d8d8 55%);
	border-top: #aaa 1px solid;
	border-bottom: #aaa 1px solid;
	position: relative;
	z-index: 10;
}

#gnav ul {
	margin: 0 auto;
	width: 940px;
	height: 45px;
	text-align: left;
}

#gnav ul li {
	width: 188px;
	height: 45px;
	float: left;
	border-left: #aaa 1px solid;
	box-sizing: border-box;
}

#gnav ul li:last-child {
	border-right: #aaa 1px solid;
}

#gnav ul li a {
	height: 45px;
	font-weight: bold;
	line-height: 45px;
	display: block;
	text-align: center;
	transition: all 0.2s linear;
}

#gnav ul li:hover > a {
	background: #fff;
}

#contents {
	margin: 0 auto;
	padding: 40px 0;
	width: 800px;
	text-align: left;
}

#contents p {
	padding-bottom: 2em;
	font-size: 0.9em;
	line-height: 1.8em;
}

/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (max-width: 800px) {
	#gnav ul {
		width: 100%;
	}

	#gnav ul li {
		width: 20%;
	}
}

/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 768px) {
	#gnav {
		display: none;
	}

	#rwdMenuWrap {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap #switchBtnArea {
		width: 100%;
		height: 60px;
		background: #3c3c3c;
		position: relative;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		background: #a7a7a7 url(../image/btnOpen.png) no-repeat center center;
		border-radius: 5px;
		position: absolute;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose {
		background-image: url(../image/btnClose.png);
	}

	#rwdMenuWrap ul {
		width: 100%;
		display: none;
	}

	#rwdMenuWrap ul li {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap ul li a {
		padding: 15px 20px;
		text-align: left;
		display: block;
		}

	#contents {
		width: 100%;
	}

	#contents p {
		padding: 0 20px 2em 20px;
	}
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#gnav > ul:before,
#gnav > ul:after {
	content: " ";
	display: table;
}
#gnav > ul:after {clear: both;}
#gnav > ul {*zoom: 1;}














/*--------------------------------------
	メインコンテンツ領域
----------------------------------------*/ 


/*  */
h2,p.summary{
	text-align:center;
	padding:15px;
}

h2{
	font-size:25px;
}

p.summary{
	line-height:2.5;
	font-size:15px;
}


#main_image{
	margin:0 auto;
	width:100%;
	background:#a11715;
}

#main_image p{
	padding:30px 0;
	font-size:30px;
	color:#fff;
}

#intro{
	margin:0 auto;
	padding:20px 0;
	width:100%;
	border-top:1px solid #fff;
}


span.bottom{
	display:block;
	margin-top:10px;
	margin-bottom:30px;
}

p.cake_name{
	margin-top:13px;
	margin-bottom:15px;
}


/*-------------------------------------- 
	グリム童話関係
---------------------------------------- */
#grimm_cake{
	margin:0 auto;
	padding: 3% 0;
	border-top:1px solid #fff;
	width:100%;
	text-align: center;
}


#grimm_cake_01,#grimm_cake_02,#grimm_cake_03{
	float:left;
	margin:2.65%/*25px*/;
	padding:2.65%/*25px*/;
	width:210px;
}

p.more{
	clear:both;	/* フロート回り込み解除 */
	display:block;
}

p.more a{
	display:inline-block;
	margin:0 auto;
	padding:15px 20px;
	background:#a11715;
	border:1px solid #a11715;
	border-radius:10px;
	color:#fff;
	text-decoration:none;
}

/* -------------------------------------
	おすすめのケーキ
---------------------------------------- */
#recommend{
	margin: 0 auto;
	padding: 3.19% 0/*30px 0*/;
	border-top:1px solid #fff;
	width: 100%;
	text-align: center;
}


#recommend_cake_01,#recommend_cake_02,#recommend_cake_03{
	float:left;
	margin:2.65%/*25px*/;
	padding:2.65%/*25px*/;
	width:210px;
}

/* -------------------------------------
	お知らせ
---------------------------------------- */
#notice{
	text-align: center;
	clear:both;
	margin:0 auto;
	padding-top:30px;
	padding-bottom:60px;
	width:100%;
	border-top: 1px solid #fff;
}

span.date{
	display: block;
	margin-top:20px;
	margin-bottom:5px;
}

span.under_line{
	margin-bottom:15px;
	border-bottom:1px solid #fff;
}

/* ---------------------------------------
	モーダルウィンドウの設定
------------------------------------------ */
#mdOverlay {
	top: 0;
	left: 0;
	width: 100%;
	position: fixed;
	z-index: 97;
	background: #000;
	display: none;
}

#mdWindow {
	margin-top: -200px;
	margin-left: -250px;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 400px;
	position: fixed;
	z-index: 98;
	background: #fff;
	display: none;
}

#mdWindow > .mdClose {
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 1.5em;
	background: #757575;
	border-radius: 30px;
	position: absolute;
	z-index: 99;
	cursor: pointer;
	box-shadow: 0 0 3px 0 #000;
}

.modalBtn:hover {
	opacity: 0.7;
}

div[id^="modalInclude"]{
	display: none;
}

#contWrap {
	margin: 30px auto;
	padding: 0 20px;
	width: 100%;
	height: 340px;
	box-sizing: border-box;
	overflow-y: auto;
}

#contWrap h2 {
	margin-bottom: 20px;
	padding: 20px 0;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	border-bottom: #333 1px dotted;
}

#contWrap p {
	margin-top: 2em;
	padding-top: 1em;
}

/* -------------------------------------
	モーダルウィンドウの設定  終了
---------------------------------------- */


/*-------------------------------------- 
	cakes.html
 ---------------------------------------*/
.single{
	float:left;
	margin:25px;
	padding:25px;
	width:210px;
}

#whole,#short,#chou{
	clear:both;
	margin: 0 auto;
	padding: 30px 0;
	border-top:1px solid #fff;
	width: 100%;
	text-align: center;
}

/*-------------------------------------- 
	special.html
 ---------------------------------------*/
.method{
	clear:left;
	width:63.82%;/*600px*/
	margin:10px auto;
	padding:20px;
	border-top:1px solid #fff;
}

.method img{
	float:left;
	margin-bottom:20px;
	width:350px;
}

.method p{
	overflow:hidden;
	padding-left:10px;
}

/* -------------------------------------
	access.html
---------------------------------------- */
#shop_info,#toiawase{
	margin:0 auto;
	padding:20px;
	border-top:1px solid #fff;
	max-width:100%;
}

#staff{
	margin:20px 15%;
}

#shop_info p,dt,dd{
	font-size:1.2em;
}

#shop_info dl{
	border:1px solid #fff;
	background:rgba(255,255,255,0.2);
	width:100%;/*350px*/
}

.map{
	position:relative;
	padding-bottom:50%;
}

.map iframe{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

#shop_info dt{
	clear:left;
	float:left;
}

/* -------------------------------------
	grmms.html
---------------------------------------- */
.book{
	margin-left:70px;
	padding:20px;
	min-width:270px;
	height:150px;
	background: url(../image/book-3057904_1920.png) no-repeat;
	background-size:contain;
}

.book:after{
	display:block;
	clear:both;
}

.book_left{
	padding-left:14px;
	float:left;
	width:43%;
	height:160px;
}

.book_left p{
	font-size:83%;
}

.book_right{
	float:right;
	padding-left:5px;
	width:46%;
	height:160px;
}

p.bookcon{
	padding:5px;
	width:90%;
	overflow:hidden;
}

#other_cake_link{
	clear:both;
}

#other_cake_link li{
	display:inline;
}

#other_cake_link li a{
	display:inline-block;
	margin:20px 10px;
	padding:15px 20px;
	background:#a11715;
	border:1px solid #a11715;
	border-radius:10px;
	color:#fff;
	text-decoration:none;

}