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

#main
    {
     margin: 0 auto;
	 text-align:left;
     max-width:1200px;
    }
	
/* じわっと画像が表示される */
@keyframes fadeout { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
 
/*古いブラウザ用*/
@-webkit-keyframes fadeIout {
    0% {opacity: 0}
    100% {opacity: 1}
}
 	

/************************/
/*                      */
/*    ヘッダーエリア    */
/*                      */
/************************/

#header_main{margin:0 auto; max-width:1200px; }

#header{ z-index: 100;position: fixed;background-color:#FFF; width:100%;}
section a{ color:rgb(87,133,158);}

.flex{
    display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.header{ margin:0 auto; max-width:1200px;background-color:#FFF;}
.header_left{ float:left; width:40%;}
.header_left_l{
	float:left;
	width:35%;
	text-align: left;
}
.header_left_r{ float:right; width:65%;font-family:"リュウミン R-KL"; line-height: 120%;}
.header_right{ float:right; width:60%;}
.header_right_l{
	float:left;
	width:75%;
}
.header_right_r{
	float:right;
	width:25%;
	text-align: right;
}


.gcse-search{ position:relative; top:10px; left:10px;}
h1{ font-size:12px; margin:35px;}


/************************/
/*                      */
/*    スライドショー    */
/*                      */
/************************/

.slider-pro{ background-color:#FFFFFF;}
.sp-thumbnails{ margin-top:30px; background-color:#FFFFFF;}
.sp-thumbnails img{ }
.slideShow,
.slideShow * {
margin: 0!important;
padding: 0!important;
}

/* .slideShow
------------------------- */
.slideShow {
	margin: 0 auto;
	text-align: left;
	display: none;
}

/* .mainView
------------------------- */
.slideShow .mainView {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.slideShow .mainView ul {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.slideShow .mainView ul li {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
}
.slideShow .mainView ul li img {
	width: 100%;
}

/* .thumbNail
------------------------- */
.slideShow .thumbNail {
	width: 100%;
	overflow: hidden;
}

.slideShow .thumbNail ul {
	width: 110%;
}

.slideShow .thumbNail ul li {
	float: left;
	display: inline;
	overflow: hidden;
	cursor: pointer;
}

.slideShow .thumbNail ul li img {
	width: 100%;
}

.slideShow .thumbNail ul li.active {
	filter: alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}

/* sideNavi
------------------------- */
.slideShow .mainView .btnPrev,
.slideShow .mainView .btnNext {
	top: 0;
	width: 5%;
	height: 100%;
	position: absolute;
	z-index: 100;
}
.slideShow .mainView .btnPrev {
	left: 0;
	background: #ccc url(../img/btnPrev.png) no-repeat center center;
}
.slideShow .mainView .btnNext {
	right: 0;
	background: #ccc url(../img/btnNext.png) no-repeat center center;
}

/* =======================================
	ClearFixElements
======================================= */
.slideShow ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.slideShow ul {
	display: inline-block;
	overflow: hidden;
}


/* ------------------------------------------------
	いちよmediaQueriesの指定を入れておきますが
	スライドショー動作には関連しておりません。
------------------------------------------------ */

/* ===========================================
	デスクトップ系 769 - 1024
=========================================== */
@media screen and (max-width: 1024px) {
	.slideShow {
		width: 800px;
	}
}
/* ===========================================
	タブレット系 749 - 768
=========================================== */
@media screen and (max-width: 768px) {
	.slideShow {
		width: 100%;
	}
}
/* ===========================================
	スマートフォン系 748 - 
=========================================== */
@media screen and (max-width: 748px) {
	.slideShow {
		width: 100%;
	}
}


/************************/
/*                      */
/*    ナビメニュー　    */
/*                      */
/************************/

.pankuzu {
 margin: 0 auto;background-color:rgb(199,101,22); padding:0.5em; text-align:left; color:#FFFFFF;
}
.pankuzu a{ color:#FFFFFF;}

/************************/
/*                      */
/* ハンバーガーメニュー */
/*                      */
/************************/
 
/*ハンバーガーボタン*/
 
.is-fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 81px;
  height: 86px;
  z-index: 20;
  animation: fadeIn 3s ease 0s 1 normal;z-index: 200;
}

@media all and (-ms-high-contrast: none){
.is-fixed {
  position: fixed;
  top: -86px;
  left: 0px;
  z-index: 20;
  width: 81px;
  height: -86px; /* IE10以上 */
  }
}

@supports (-ms-ime-align: auto) {
  .is-fixed {
  position: fixed;
  top: -30px;
  left: 0px;
  z-index: 20;
  width: 81px;
  height: -30px;/* Edge のみ適用される */
  }
}
 
#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  /*vertical-align: middle;*/
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  /*position: absolute;*/
  margin-left:2%;
  /*bottom:0;*/
  /*display: inline-block;*/
  content: url(../img/header/menu.png);
  /*cursor: pointer;max-width: 100%;*/
  /*max-height: 100%;*/
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 250px;/*最大幅（お好みで調整を）*/
  height: 100%;
  /*background: #fff;*/
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  justify-content: space-around;font-family:"じゅん 201";
  font-size:14px;
  text-align:center;
}

@supports (-ms-ime-align: auto) {
  #nav-content {
  overflow: auto;
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 250px;/*最大幅（お好みで調整を）*/
  height: 100%;
  /*background: #fff;*/
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  justify-content: space-around;font-family:"じゅん 201";
  font-size:14px;
  text-align:center;
}
}

#nav-content {
 -ms-overflow-style: none; /* IE対策 */
 overflow: -moz-scrollbars-none; /* Firefox対策 */
}
#nav-content::-webkit-scrollbar { /* Google Chrome対策 */
 display: none;
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
.header-logo-menu{
	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
}

ul.sidenav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #fff;
	position: relative;
	overflow: auto;
}
ul.sidenav li a {
	display: block;
	color: #000000;
	padding: 8px 16px;
	text-decoration: none;
}
ul.sidenav li a.active {
	background-color: rgb(121,41,29);
	color: white;
}
ul.sidenav li a:hover:not(.active) {
	background-color: #fff;
	color: white;
}
div.content {
	margin-left: 25%;
	padding: 1px 16px;
	height: 1000px;
}
@media screen and (max-width: 900px) {
	ul.sidenav {
		width: 100%;
		height: auto;
		position: relative;
	}
	ul.sidenav li a {
		float: left;
		padding: 15px;
	}
	div.content {
		margin-left: 0;
	}
}
@media screen and (max-width: 480px) {
	ul.sidenav li a {
		text-align: center;
		float: none;
	}
}


/*全体*/
.hidden_box {
    margin: 0.3em 0 2em 0;
    padding: 0;
	text-align:center;
}

.hidden_box_f {
    margin: 0.3em 0 2em 0;
    padding: 0;
	text-align: left;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 0px;
    font-weight: bold;
    background: #FFF;
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
}

.hidden_box_f label {
    padding: 0px;
    font-weight: bold;
    background: rgb(121,41,29);
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
	color:#FFFFFF;
}

/*アイコンを表示*/
.hidden_box label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
}

.hidden_box_f label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #FFF;
}

.hidden_box_f label:hover {
    background: rgb(121,41,29);
}

/*アイコンを切り替え*/
.hidden_box input:checked ~ label:before {
     content: '\f00d';
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: rgb(121,41,29);
}

.hidden_box_f input:checked ~ label:before {
     content: '\f00d';
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #FFF;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

.hidden_box_f input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 1.5s;
}

.hidden_box_f .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 1.5s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box_f input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/************************/
/*                      */
/*      フッター        */
/*                      */
/************************/

#footer{margin:0 auto; background-color:rgb(121,41,29);}

.footer{ margin:0 auto; max-width:1200px; font-size:12px; padding-bottom:2%; color:#FFFFFF; text-align:left;}
.footer a{color:#FFFFFF;text-decoration: none;}
.footer a:hover{text-decoration: underline;}


/*サイトマップ*/
.sitemap ul li ul {
  margin-top: .5em;
  margin-bottom: .75em;
  margin-left: 48px;
}
 
.sitemap ul li ul li {
  margin-bottom: .25em;
  position: relative;
}
 
.sitemap ul li ul li::before {
  content: "";
  position: absolute;
  top: -0.5em;
  left: -16px;
  width: 10px;
  height: calc(100% + .75em);
  border-left: 1px solid rgb(121,41,29);
}
 
.sitemap ul li ul li:last-child::before {
  height: calc(1em + .25em);
}
 
.sitemap ul li ul li::after {
  content: "";
  position: absolute;
  top: .75em;
  left: -16px;
  width: 10px;
  border-bottom: 1px solid rgb(121,41,29);
}

#footer .line p {
	color: rgb(121,41,29); /* 文字の色　#336666 */
	text-align:center; font-size:12px;
}
#footer .line a {
	color: rgb(121,41,29); /* 文字の色　#336666 */
}
#footer .line {
	background-color: rgb(199,101,22); /* 背景の色　#00CCCC */
	padding: 5px 0; /* 内側の余白　上下20px　左右0 */
}

p.gotop{
    position: fixed;
    right: 2%;
    bottom: 0;
}
p.gotop a{
    width: 47px;
    height: 47px;
    display: block;
}

/************************/
/*                      */
/*    新着ブログ        */
/*                      */
/************************/
.blog_inf_img img{  max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;}
 
 .img-container--precedo {
 position: relative;
 width: 200px;
 height: 100px;
 text-align: center;
 &:before {
 content: '';
 display: inline-block;
 vertical-align: middle;
 height: 100%;
 width: 0;
 margin-left: -0.3em;
 }
 img {
 vertical-align: middle;
 }
}

/************************/
/*                      */
/*      タイトル        */
/*                      */
/************************/

.tit_01{ background-color:/*rgb(121,41,29)*/rgb(249,211,145); text-align:center; padding:0.5em; color:#333; font-size:16px;
margin-top:0;}

.tit_02{ text-align:center; padding:0.5em; font-size:20px;font-family: 'リュウミンR-KL'; letter-spacing: 10px;margin-top:20px;}
.tit_03{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #000000;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px rgb(199,101,22);/*左線*/
}

.tit_04{padding: 0.25em 0.5em;/*上下 左右の余白*/
text-align:center;
	color: #000000;/*文字色*/
	background: transparent;/*背景透明に*/
	border-bottom:: solid 2px rgb(199,101,22);}
	
.tit_05{ background-color:/*rgb(121,41,29)*/rgb(249,211,145); text-align:center; padding:0.5em; color:#333; font-size:16px; width:40%;margin-left: auto;margin-right: auto;margin-top:0;}
.tit_06{ background-color:/*rgb(121,41,29)*/rgb(226,240,217); text-align:center; padding:0.5em; color:rgb(56,87,35); font-size:16px; width:40%;margin-left: auto;margin-right: auto;margin-top:0;}	

/************************/
/*                      */
/*        TOP           */
/*                      */
/************************/

.flex_top{
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;font-family:"じゅん 201";
}
.flex_top > *{
  min-width: 8%;
}
.flex_top,
.flex_top > *{
}

.flex_start{
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;font-family:"じゅん 201";
}
.flex_start > *{
  min-width: 8%;
}
.flex_start,
.flex_start > *{
}


/************************/
/*                      */
/*      新着情報        */
/*                      */
/************************/


/************************/
/*                      */
/*   商品メニュー       */
/*                      */
/************************/

.flex_test-box {
    background-color: #fff;     /* 背景色指定 */
    padding:  10px;
	display: flex; justify-content:center;
	margin-top: 20px;
}

.flex_test-box_left {
    background-color: #fff;     /* 背景色指定 */
    padding:  10px;
	display: flex; justify-content:left;
}
 
.flex_test-item {
}

.flex_test-item a{color:rgb(121,41,29);
    padding: 10px;             /* 文字色 */
    margin:  10px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
	border: 1px solid rgb(121,41,29);}
.flex_test-item a:hover {
  background-color: rgb(121,41,29);
  color: #FFFFFF;
}

.container{
  padding:10px;
  display : flex;
  flex-wrap : wrap;
  justify-content:space-between;
}
.item{
  padding:10px;
  margin-bottom:10px;
  box-sizing:border-box;
  width:18%;
}
.empty_item{
  width:18%;
}

/************************/
/*                      */
/*      　俵　屋　      */
/*                      */
/************************/

.flex_tawaraya-box {
    background-color: #fff;     /* 背景色指定 */
    padding:  10px;
	display: flex; justify-content:center;
}
 
.flex_tawaraya-item {
    padding: 10px;             /* 文字色 */
    margin:  10px;              /* 外側の余白 */
}

.flex_tawaraya-item a{color:rgb(121,41,29);}

ul {
 list-style:none;
 }

li.first {
 max-width: 1000px;
 background-color: rgb(199,101,22);
 margin-bottom:5px; color:#FFFFFF; padding-left:10px;
 }

li.next {
 max-width: 1000px;
 background-color: rgb(199,101,22);
 margin-bottom:5px; color:#FFFFFF; padding-left:10px;
 }

span.dan {
 float: left;
 padding: 5px;
 }

span.dan2 {
 display: block;
 margin-left: 150px;
  background-color: #fff; 
 padding: 5px 5px 5px 15px; color:#000000;
 }

span.dan2-r {
 display: block;
 margin-left: 150px;
 padding: 5px 5px 5px 15px;
 background-color: #fff; color:#000000;
 }


/************************/
/*                      */
/*   　京菓子資料館　   */
/*                      */
/************************/

ul {
 list-style:none;
 }

li.first_02 {
 max-width: 1000px;
 margin-bottom:5px; color:#000000; padding-left:10px;
 }

li.next_02 {
 max-width: 1000px;
 margin-bottom:5px; color:#000000; padding-left:10px;
 }

span.dan {
 float: left;
 padding: 10px;
 }

span.dan2 {
 display: block;
 margin-left: 150px;
  background-color: #f4f4f4; 
 padding: 10px 10px 10px 15px; color:#000000;
 }

span.dan2-r {
 display: block;
 margin-left: 150px;
 padding: 10px 10px 10px 15px;
 background-color: #f4f4f4; color:#000000;
 }
 
/************************/
/*                      */
/*   　　店舗案内　　   */
/*                      */
/************************/ 
.fa-chevron-right:before {
  content: "\f054";
}

/************************/
/*                      */
/*   　リクルート　　   */
/*                      */
/************************/ 

.recruit {
margin: 10px 0 0; font-size:14px;
}
.recruit dl {
padding: 15px 0;
border-bottom: 1px solid rgb(199,101,22);
}
.recruit dt {
padding-bottom: 5px; float:left;
}
.recruit dd{margin-left:150px;}


.recruit_02 {
margin: 10px 0 0; font-size:14px;
border-bottom: 1px solid rgb(199,101,22);
}
.recruit_02 dl {
padding: 15px 0;
}
.recruit_02 dt {
padding-bottom: 5px; float:left; padding-left:20px;
}
.recruit_02 dd{margin-left:150px;}

.recruit {
margin: 10px 0 0; font-size:14px;
}

.recruit_03 dl {
padding: 15px 0;
border-bottom: 1px solid rgb(199,101,22);
}

.recruit_03 dt {
padding-bottom: 5px; float:left;
}

.recruit_03 dd{margin-left:300px;}


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

/************************/
/*                      */
/*    ヘッダーエリア    */
/*                      */
/************************/

#header_main{margin:0 auto; width:100%; }

#header{ z-index: 100;position: fixed;background-color:#FFF; width:100%;}
section a{ color:rgb(87,133,158);}

.flex{
    display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.header{ margin:0 auto; max-width:100%;background-color:#FFF;}
.header_left{ float:left; width:50%;}
.header_left_l{
	float:left;
	width:35%;
	text-align: left;
}
.header_left_r{ float:right; width:65%;font-family:"リュウミン R-KL"; line-height: 120%;}
.header_right{ float:right; width:50%;}


.gcse-search{ position:relative; top:10px; left:10px;}
h1{ font-size:12px; margin:35px;}

.footer_sm{ margin:0 auto; max-width:100%; font-size:12px; padding-bottom:2%; color:#FFFFFF; text-align:left;}

/* Slider */
.slider{
    margin: 0px auto;
    width: 100%;
}
.slider img{
    height: auto;
    width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
	}