@charset "UTF-8";

body{
	width:100%;
	background-color:#ccc;
	background-image:url(../gazou/karakusa3.jpg);
	font-family:serif;
	padding:0;
	margin:0;
	}
	/*画面切替時フェードイン*/
	body {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
	@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
	
#wrap{
	width:85%;
	background-color:#dcd6d9;
	margin:0 auto;
	padding:0;
}
#header{
	position:fixed;
	top:0px;
	z-index:1;
	width:85%;
	height:70px;
	margin:0;
	background-color:#c49dbf;
}
#kamon-logo{
	float:left;
	margin-left:25%;
	margin-right:0;
	width:65px;
	height:65px;
}
#header #head-logo{
	float:left;
	width:30%;
}
.logo span{
	font-size:60%;
}

.header-info{
	float:right;
	left:700px;
	font-size:80%;
	line-height:0.5;
	text-align:left;	
}
/*MENUボタンの設定*/
#gnav{
	position:fixed;	
	z-index:1;
	top:70px;
	width:85%;
	
}

#gnav ul{
	list-style:none;
	margin:0;
	padding:0;
}	
#gnav ul li{
	float:left;
	width:14%;
}
#gnav ul li:first-child{
	width:16%;
}

#gnav ul li a{
	color:#fff;
	display:block;
	height:45px;
	padding-top:10px;
	border:solid 2px #696969;
	background-color:#636;
	font-size:130%;
	text-align:center;
	text-decoration:none;
}
#gnav ul li a:hover{
	background-color:#ccb8c2;
	transition:all 0.8s ease;
}

/*ＴＯＰのスライド写真とイメージ部分の設定*/
.start-waku{
	padding-top:120px;	
	width:100%;
	margin:0 auto;
	overflow:hidden;	
}
/*式部庵ホームイメージ画像*/
#photolist{
	float:left;
	width:540px;
	margin-left:100px;
}
#sikibuan-image-waku{
	float:left;
	width:300px;
	height:340px;
}


/*intro-textの設定*/
#main{
	clear:both;
	padding-top:5px;
	margin:0;
}
#intro{
	background-image:url(../gazou/karakusa2.jpg);
	margin:0;
	padding:0 20px;
}
.intro-text{
	line-height:2em;
	letter-spacing: 0.1em;
	text-align:left;
}

/*商品紹介の設定*/
/* 丸メニューの設定 */
.midasi2{
	border-bottom:solid 5px #594255;
	background-color:#6d5b70;
	background-image:url(../gazou/wani.jpg);	
}
#menu-waku{
	width:85%;
	margin:0 auto;
}
.menu-list{
	margin:0 auto;
}
/* 丸メニューの設定 */
ul.menu-list{
	list-style-type:none;
}
.maru-menu{
	float:left;
}	

/*丸見出しの縦文字設定*/
.maru-midasi{
-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  	width:50px;
  	height:150px;
	border-left:double 5px #cc8f7a; 
	border-right:double 5px #cc8f7a;
	background-color:#e6c7b8;
	font-size:1.5em;
	font-weight:bold;
	color:#000;
	float:right;
	margin-right:3px;
	margin-left:0;
}
.maru-midasi:hover{
	opacity:0.5;
}

/*素材のページ設定*/
#sozai{
	clear:both;
	margin-top:-120px;	/*リンク時のヘッダー分のずれを補正*/
	padding-top:120px;/*リンク時のヘッダー分のずれを補正*/
}
#azuki{
	background-color:#d3ccd6;
	width:882px;
	height:341px;
	margin:0 auto;
}
#azuki-pic{
	float:left;
}
.sozaiwaku-a{
	clear:both;
	width:882px;
	height:225px;
	background-color:#e6cde3;
	margin:0 auto;

}
.sozaiwaku-b{
	clear:both;
	width:882px;
	height:225px;
	background-color:#d3ccd6;
	margin:0 auto;
}
.sozai-pic-a{
	float:right;
}
.sozai-pic-b{
	float:left;
}
.sozaimei{
font-size:150%;
font-weight:bold;
}
.sozaitext{
	text-align:left;
	padding:20px;
}
/*施設紹介部分の設定*/
#shop{
	margin-top:-120px;/*リンク時のヘッダー分のずれを補正*/
	padding-top:120px;/*リンク時のヘッダー分のずれを補正*/
}
#adress{
	width:600px;
	height:200px;
	margin-left: auto;
	margin-right: auto;
	border:solid 2px #636;
}
.shop-info-list dt{
	clear:left;
	float:left;
	width:80px;
	font-size:1.1em;
}
.shop-info-list dd {
	float:left;
	width:350px;
	text-align:left;
	margin-left:50px;
}
#annai{
font-size:1.4em;
text-align:center;
background-color:#9790a4;
margin-top:0;
}
/*google mapの設定*/
#map{
	width:600px;
	border:solid 2px #ccc;
	position:relative;
	padding-bottom:50%;
	margin:0 auto;
}
#map iframe{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

/*footerの設定*/
#footer{
	clear:both;
	width:100%;
	height:140px;
	background-color:#c49dbf;
}
#footer .logo{
	float:left;
	width:300px;
	height:100px;
	margin:15px 50px;
}
.footer-info{
	float:left;
	margin-bottom:0;
	margin-top:10px;
	font-size:85%;
	line-height:0.7;
	text-align:left;
}
#kojin-jyouhou{
float:right;
margin:10px;
}
.pagetop{
	display:block;
	width:60px;
	height:60px;
	background-color:#99ab4e;
	border:solid 10px #7a4171;
	border-radius:10%;
	position: fixed;
	bottom: 1%;
	right: 1%;

}
.pagetop a{
	text-decoration:none;
	display: block;
	color:#180614;
	font-weight:bold;
	font-size:1.1em;
	}
.pagetop:hover{
	opacity:0.85;
	background-color:#dccb18;
}
.copyright{
	clear:both;
	text-align: center;
	line-height:0;
	margin:0;
}
/* 素材ページの設定 */
#sozai{
	clear:both;
}
/* 商品紹介共通設定 */
.syouhin{
	width:900px;
	margin:20px auto;
	display:block;
	overflow:visible;
}
.syouhin-text{
	margin:0 100px;
}
ul.tanpin-list{
	width:846px;
	margin:0 auto;
	padding:30px 20px;
	overflow:visible;
	z-index:2;
}
p.tanpin{
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
}
h3{
	font-size:1.5em;
}
/*どら焼き/ようかん枠の設定 */

li.tanpin-waku{
	width:260px;
	height:555px;
	list-style-type: none;
	margin:10px;
	margin-bottom:50px;
	padding:5px 0;
	background-color:#A9A9A9;
	float:left;
		z-index:1;
		overflow:visible;
}
/* hover時テキストの拡大 */
li.tanpin-waku{
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
}
li.tanpin-waku:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

/*ようかんページの設定 */
#takemizu-text{
	font-size:0.9em;
}
/*干菓子の設定 */
#dewanokuzu-waku{
	height:260px;
	margin:0 auto;
		background-color:#e6cde3;
	}
#kuzuyu{
	background-color:#fcf5cf;
	overflow:hidden;
	margin:0 auto;
	margin-bottom:10px;
}
#kuzuyu-waku{
	float:right;
}
#kuzuyu-pic{
	float:left;
	width:200px;
	padding-left:30px;
	padding-top:60px;
}
#tukurikata-midasi{
	font-size:1.2em;
	font-weight:bold;
	float:left:
	width:500px;
	text-align:center;
	border-bottom:solid 5px #ffcecc;
}
#tukurikata{
	float:left;
	width:500px;
	margin-right:30px;
}
#aruheito-waku{
	width:900px;
	height:340px;
	background-color:#e6cde3;
	margin:0 auto;
	margin-bottom:10px;
	
}
#tai-waku{
	width:900px;
	height:260px;
	margin:0 auto;
	margin-bottom:10px;
	background-color:#ffe3fc;
	}
#higasi-pic-hidari{
	float:left;
	width:260px;
}
#tanpin-text-waku{
	float:right;
	margin-right:30px;
	width:600px;
}
#tai-text-waku{
	float:right;
	width:430px;
	margin-right:30px;
}
.waku-b{
	background-color:#ccc;
}
ul#tukurikata{
	list-style:none;
}
/*季節のお菓子設定 */
#wrap-kisetu{
	background-color:#fce3e7;
	width:85%;
	margin:0 auto;
	padding:0;
}
#valentine{
	background-color:#fdeff2;
	background-image:url(../gazou/pink.jpg);
	overflow:hidden;
	padding-bottom:20px;
}
#valentine-text-waku{
	background-color:#fce3e7;
	padding:0 100px;
}
#valentine-text{
	text-align:left;

}
#osusume{
	font-size:1.5em;
	font-weight:bold;
	margin-bottom:10px;
	color:#b44c97;
	padding:0 12%;
}
.kisetu-list{
	overflow:hidden;
}
li.kisetu-waku-a{
	width:260px;
	height:280px;
	list-style-type: none;
	margin:10px;
	padding:5px 0;
	background-color:#c099a0;
	float:left;
	}
li.kisetu-waku-b{
	width:260px;
	height:280px;
	list-style-type: none;
	margin:10px;
	padding:5px 0;
	background-color:#d69090;
	float:left;
	}
#jyounama-waku{
	width:100%;
	height:250px;
	background-color:#000;
	margin-top:20px;
	overflow:hidden;
}
#jyounama-pic{
	float:left;
	width:420px;
}
p#jyounama-p{
	width:600px;
	height:30px;
	font-size:1.2em;
	font-weight:bold;
	padding-right:20px;
	color:#fff;
}
p#jyounama-text{
	color:#fff;
	padding-left:10px;
}
.mini-maru{
	float-left;
		border:8px solid #000;
	
}
/*個人情報設定 */
#kojinjyouhou{
	text-align:left;
	padding:20px;
}
h5{
	font-size:1.2em;
}
/*丸メニューの枠設定*/
li.maru-menu{
	float:left;
	width:400px;
	height:410px;
}

/*丸画像の配置*/
	img.maru-pic{
	margin-right:0;
	border-radius:50%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

/*丸メニューhoverエフェクト設定 */
figure.hover-parent {
	width: 300px;
	height: 300px;
	position: relative;
	margin-bottom: 30px;
	overflow: hidden;
}
figcaption.hover-mask {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	color: #fff;
	display: flex;
	align-items: center;
	text-align: center;
	border-radius:50%;
}
figcaption p{
	text-align: center;
	width:100%;
}
figcaption.hover-mask:hover {
	opacity: 1;
	transition:all 0.8s ease;
}