@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;
}

/*=======================================================
				全体設定
========================================================*/

/* レイアウト */
body{
	width:100%;
	height:auto;
	background-color:#e7e7eb;
	background-repeat:repeat-y;
	background:-webkit-linear-gradient(left,#e7e7eb,#fff);
	background:liner-gradient(to right,#e7e7eb,#fff);
	margin:0;
	padding:0;
	font-family: "Sawarabi Mincho",serif,游明朝;
}

#wrap{
	width:100%;
	height:auto;
	margin:0;
	padding:0;

}

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}

/*=========================================
	Base Layout
=========================================*/
/*ALL and Smart Phone*/
#wrap{
	margin:0;
}

#wrap:after{
	content:"";
	display:block;
	clear:both;
}

/*=======================================================
				インデックスページ
========================================================*/

/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (min-width: 769px){
/*トップページのヘッダーのみ背景画像設定*/
	#index_header{
	background-color: rgba(255,255,255,0.6);
}

	.slideShow_index img{
		display:none;
	}
}

/*インデックスページのフルスクリーン設定*/
/*#fullScreen {
	top: 0;
	left: 0;
	width: 100%;
	position: fixed;
	z-index: 0;
	overflow: hidden;
}*/

/*インデックスページのフルスクリーン設定*/
/*#fullScreen img {
	top: 50%;
	left: 50%;
	position: absolute;
	visibility: hidden;
}*/


.index_p p{
	height:auto;
	font-size:1em;
}
h2.text1{
	font-family: serif;
	text-align:center;
	padding:20px;
	font-size:1.25em;

}

#instagram{
	text-align:center;
	}


@media only screen and (max-width: 768px) {
	#left{
		position:relative;
	}
	#index_body{
		background:#fff;
	}
	#main_index{
		position:static;
		margin-right:50px;
	}
	.index_p p{
	font-size:1em;
}

}

/*=======================================================
				ヘッダー
========================================================*/

/*ヘッダー全体*/
header{
	width:150px;
	height:auto;
	float:left;
	
}
header ul{
	list-style-type:none;
}
@media only screen and (max-width: 768px) {
	header{
		width:100%;
		height:100px;
		background-color:#fdeff2;
		float:none;
		position:fixed;
		z-index:120;
	}
	#gnav li{
		font-size:0.9em;
	}
}

/*ヘッダーの式部庵ロゴ*/
#logo{
	width:150px;
	height:200px;
	position:relative;
}
@media only screen and (max-width: 768px) {
	#logo{
		max-width:50%;
		position:static;
		position:fixed;
	}
	
	#logo ul{		
		display:flex;
		li:first-child{
		margin-right:auto;
		}
	}
	#logo ul{
		list-style-type:none;
	}
	
	#logo .active4{
		display:none;
	}
}


#logo .active4{
	position:absolute;
	top:0;
	left:0;
	opacity:0;	
}

#logo:hover .active4/*ホバーした時*/
{
	opacity:1;
}

/*ヘッダーのメニューアイコン*/

#gnav{
	width:150px;
	height:100%;
	margin-left:40px;
	margin-top:100px;
}
#gnav li a{
	text-decoration:none;
	font-size:1em;
	color:#383c3c;
	}
	
#gnav ul{
	list-style:none;
}

.itiran,.kodawari,.access{
	position:relative;
}

.itiran .active,.kodawari .active2,.access .active3 {
	position:absolute;
	top:0;
	left:0;
	opacity:0;	
}

.itiran:hover .active,
.kodawari:hover .active2,
.access:hover .active3
{
	opacity:1;/*ホバーした時*/
}

#gnav li:hover a{
	color:#96514d;
}

@media only screen and (max-width: 768px) {
#gnav ul{
	display:flex;
	li:first-child{
	margin-right:auto;
	}
}

#gnav{
	height:auto;
	margin:0;
	position:absolute;
	top:0;
	right:10%;
	position:fixed;
	
}
#gnav ul br{
	display:none;
}
.itiran,.kodawari,.access{
	position:static;
}
#gnav li a{
	height:auto;
	writing-mode:vertical-rl;
	font-family:"游明朝";
	float:right;
}
#gnav li,
#gnav ul,
#index_header{
	width:100%;
	height:auto;
}
.itiran .active,.kodawari .active2,.access .active3{
	display:none;
}
}


/*=======================================================
				真ん中スライドショー
========================================================*/

/*スライドショー*/
.slideShow{
	width:425px;
	height:auto;
	margin:0;
	margin-left:50px;
	float:left;
}
.slideShow li{
	width:425px;
	position:absolute;
	right:0;
	bottom:0;
}
.slideShow ul{
	list-style:none;
}

@media only screen and (max-width: 768px) {
	.slideShow{
		float:none;
		position:fixed;
		width:100%;
		height:45vh;
		top:100px;
		z-index:1;
		margin-left:0;
		overflow:hidden;
		background:url("../images/higashi/higashi2.jpg");
		max-width:100%;
	}
	.slideShow h2#big_text{
		margin-top:15px;
		font-size:1.2em;
	}	
	.slideShow li{
		position:static;
		}
	.slideShow img#big{
		width:50%;
		height:55%;
		display:block;
		margin:0 auto;
		}

	
}
/*=======================================================
				右側
========================================================*/

/*右側メイン全体の設定*/
#main{
	width:425px;
	padding:0;
	padding-right:0;
	margin:0;
	margin-right:10px;
	float:right;
	position:relative;
	
}
@media only screen and (max-width: 768px) {

	#main{
		max-width:100%;
		height:auto;
		float:none;
		position:absolute;
		top:550px;
		left:0;
		
	}

#contentsu h2.anchor{
    display: block;
    padding-top: 470px;
    margin-top: -470px;
}

}

@media only screen and (min-width: 415px) and (max-width: 768px){
#contentsu h2.anchor{
    display: block;
    padding-top: 580px;
    margin-top: -580px;
}

}

#midasi{/*見出しの横と高さ*/
	width:100%;
	height:150px;
}

@media only screen and (max-width: 768px) {

	#midashi{
	width:100%;
	height:auto;
	}
	
	

}




#main h1,p,h2,h1{
	color:#383c3c;/*文字の色*/
}
	
h1{/*文字がゆっくり表示される*/
	font-size:2em;
	text-align:center;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 8s ease 0s 1 normal;
}

@keyframes fadeIn {/*文字がゆっくり表示される*/
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {/*文字がゆっくり表示される*/
    0% {opacity: 0}
    100% {opacity: 1}
}

.index_p,
.slideShow h2,
.slideShow p,
p.gensen,
h2.text1
{/*インデックスページのp 文字がゆっくり表示される*/
	text-align:center;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 8s ease 0s 1 normal;
}

@keyframes fadeIn {/*インデックスページのp文字がゆっくり表示される*/
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {/*インデックスページのp文字がゆっくり表示される*/
    0% {opacity: 0}
    100% {opacity: 1}
}


/*右下*/
#right_bottom{
	width:100%;
	height:auto;
	float:right;
}
@media only screen and (max-width: 768px) {
	#right_bottom{
		width:100%;
		float:none;
			}
}


/*フッター*/

footer{
	clear:both;
	text-align:right;
}
	



/*=======================================================
				プライバシーポリシー
========================================================*/

#privacy a{
	text-decoration:none;
	color:#383c3c;
}

#privacy a:hover{
	color:#96514d;
}


/*=======================================================
				左側固定
========================================================*/

/*レフト*/
#left{
	position:fixed;
}
@media only screen and (max-width: 768px) {
	#left{
			position:absolute;
	}
}

/*=======================================================
				ページトップ
========================================================*/

/* 「ページトップへ」ボタンのスタイル */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*=======================================================
				indexスライドショー
========================================================*/
a:link,a:visited,a:active { text-decoration: underline; color: #000;}
a:hover { text-decoration: none;}

#wrapper {
	margin: 0 auto;
	padding: 20px 0;
	width: 700px;
	text-align: left;
}

.btnArea {
	padding-bottom: 1.5em;
	text-align: center;
}

/*p {
	padding-bottom: 2em;
	font-size: 1em;
	line-height: 1.8em;
	text-align: left;
}*/

/* ------------------------------
   CHAPTER ELEMENTS
------------------------------ */

/* スライドショー全体を囲うブロック要素のスタイル */
.slideShow_ {
	margin: 20px auto 100px auto;
	/* スライドショー全体のブロック要素「.slideShow」の下部(margin-bottom)に、サムネイルを設置するための
	  余白(100px)を設定 */ 
	
	width: 700px;
	text-align: left;
	position: relative;
}

/* 画像リストのスタイル */
.slideShow_ ul {
	width: 100%;
}

.slideShow_ ul li {
	top: 0;
	left: 0;
	width: 100%;
	display: none;
	position: absolute;
}

/* 表示する画像のサイズ調整 */
.slideShow_ ul li img {
	width: 100%;
	margin:0 auto;
	height:auto;
}

/* ウィンドウサイズがスライドショーの幅より小さい場合のスタイル調整 */
@media only screen and (max-width:768px) {
	#wrapper {
		width: 90%;
	}

	.slideShow_ {
		margin: 20px auto 60px auto;
		width: 100%;
	}
}

/* PagiNation
--------------------------- */

/* ページネーションのスタイル */
.pagiNation {
	bottom: -90px;
	/* ページネーション全体のスタイルでは、設定した値に合わせて、bottomプロパティの値を「-」の値で設定 */
	
	left: 0;
	width: 100%;
	height: 80px;
	text-align: center;
	position: absolute;
	z-index: 110;
}

.pagiNation a {
/* リンクボタンの大きさなどを設定 */

	margin: 5px 10px;
	width: 120px;
	height: 80px;
	display: inline-block;
	overflow: hidden;
	background: #aaa;
	transition: all 0.2s ease-in-out;
	opacity: 0.6;
}

/* サムネイル画像の設定 */
.pagiNation a.pn1 {
	background: url(../images/index/youkan_banner.jpg) no-repeat left top;
	background-size: cover;
}

.pagiNation a.pn2 {
	background: url(../images/index/valentine.jpg) no-repeat left top;
	background-size: cover;
}

.pagiNation a.pn3 {
	background: url(../images/index/dorayaki_banner.jpg) no-repeat left top;
	background-size: cover;
}

.pagiNation a.pn4 {
	background: url(../images/index/higashi_banner.jpg) no-repeat left top;
	background-size: cover;
}

.pagiNation a.pn5 {
	background: url(../images/index/kisetsu_banner.jpg) no-repeat left top;
	background-size: cover;
}

.pagiNation a:hover {
	opacity: 1;
}

.pagiNation a.pnActive {
	opacity: 1;
}

@media only screen and (max-width: 768px) {
	.pagiNation a {
		margin: 10px 2px;
		width: 60px;
		height: 34px;
	}
}

/* SideNavi
------------------------- */

/* ナビゲーションボタンのスタイル */
.slideShow_ .btnPrev,
.slideShow_ .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 105;
}

.slideShow_ .btnPrev {
    left: 15px;
    background: transparent url(../images/index/btnPrev.png) no-repeat center center;
}

.slideShow_ .btnNext {
    right: 15px;
    background: transparent url(../images/index/btnNext.png) no-repeat center center;
}



body{
background-repeat:repeat-y;}