body {
	font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	background-image: url(../images/back.png);
	background-repeat: repeat;
}

p, span {
	font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	margin-bottom: 1em;
	font-size: 18px;
	color: #333333;
	font-weight: 300;
	line-height: 1.6em;
}


#fh5co-photos-section, #fh5co-contact-section,
#fh5co-services-section, #fh5co-about-section,
#fh5co-map-section {
  padding-bottom: 1em;
}

#fh5co-photos-section address{
    font-size: 14px;
    color: #92994D;
    text-align: right;
    margin: 0px;
    margin-top: 2px;
}


#fh5co-map-section {
  padding-top: 2em;
  padding-bottom: 4em;
}

#fh5co-map-section p{
    font-size: 14px;
    color: #92994D;
    text-align: right;
    margin: 0px;
    margin-top: 5px;
	padding: 0px;
}


div.message{
	padding-right: 40px;
	padding-left: 40px;
}

/*-----------------------------------------------------------------*/
@media screen and (max-width: 480px) {
div.message{
	padding-right: 10px;
	padding-left: 15px;
}
}
@media screen and (max-width: 768px) {
div.message{
	padding-right: 10px;
	padding-left: 15px;
}
}

@media screen and (max-width: 992px) {
div.message{
	padding-right: 10px;
	padding-left: 15px;
}
}

@media screen and (max-width: 1200px) {
div.message{
	padding-right: 10px;
	padding-left: 15px;
}
}
/*-----------------------------------------------------------------*/


.red{
	color: #ff0000;
}

div#top_bar{
	/*border-top: 20px #f39800 solid;*/
	/*margin-bottom: 20px;	*/
	background-color: #fff;
}

div#top_bar_wrap{
	width: 100%;
	background:url(../images/header_bg_on.png) no-repeat bottom center;
	background-size:contain;
	margin: 0px auto;
}

div#search_bar {
	/*background-color: #fde7c6;*/
}

div#modoru_bar {
	padding: 20px 0px 20px 0px;
	background-color: #fde7c6;
}

div#message_bar {
}

div#message_bar p{
	font-size: 18px;
}

div#message_bar p a{
	color: #337ab7;
}


/*-----------------------------------------------------------------*/
@media screen and (max-width: 480px) {
div#top_bar_wrap{
	background:url(../images/header_bg_on.png) no-repeat bottom center;
	background-size:contain;
}
div#message_bar p{
	font-size: 16px;
}
}
@media screen and (max-width: 768px) {
div#top_bar_wrap{
	background:url(../images/header_bg_on.png) no-repeat bottom center;
	background-size:contain;
}
div#message_bar p{
	font-size: 16px;
}
}

@media screen and (max-width: 992px) {
div#top_bar_wrap{
	background:url(../images/header_bg_on.png) no-repeat bottom center;
	background-size:contain;
}
}

@media screen and (max-width: 1200px) {
div#top_bar_wrap{
	background:url(../images/header_bg_on.png) no-repeat bottom center;
	background-size:contain;
}
}
/*-----------------------------------------------------------------*/

div#top_bar_wrap h1{
	margin-bottom: 20px;	
}

#fh5co-page {
	background: none;
}

.form-group {
	margin-bottom: 30px;
	margin-top: 30px;
	text-align: center;
}

.form-group p.mark{
	background: none;
	margin-bottom: 8px;
}

/*-----------------------------------------------------------------*/
@media screen and (max-width: 480px) {
.form-group {
	margin-top: 20px;
	padding-right: 30px;
	padding-left: 30px;
	margin-bottom: 20px;	
}
div#top_bar_wrap h1{
	margin-bottom: 0px;	
}
.form-group p.mark{
	text-align:left;
}
}
@media screen and (max-width: 768px) {
.form-group {
	margin-top: 20px;
	margin-bottom: 20px;	
}
div#top_bar_wrap h1{
	margin-bottom: 0px;	
}
}

@media screen and (max-width: 992px) {
.form-group {
	margin-top: 20px;
}
div#top_bar_wrap h1{
	margin-bottom: 0px;	
}
}

@media screen and (max-width: 1200px) {
.form-group {
	margin-top: 20px;
}
div#top_bar_wrap h1{
	margin-bottom: 0px;	
}
}
/*-----------------------------------------------------------------*/

.form-group select {
	padding-top: 1px;
	padding-left: 13px;
	padding-bottom: 0px;
}


/*-----------------------------------------------------------------*/
.services {
	position: relative;
	padding: 13px;
	margin-top: 30px;
	margin-bottom: 80px;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px; /* 角を丸くする */
	float: left;
	width: 100%;
}

.services .menu_photo{
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.services .tag{
	position: absolute;
	top: -25px;
	left: -10px;
    height: 58px;
}

.services .kuwasiku_mark{
	position:absolute;
	bottom:-50;
	left:50%;
	transform:translateX(-50%);
}

.services h3{
	color: #623700;
	font-weight: bold;
	font-size: 18px;
	text-decoration: underline;
	text-align: center;
	margin: 0px;
	margin-top: 10px;
}

.services h3 a{
	color: #623700;
	text-decoration: underline;
	line-height: 1.3em;
}

.services h3 a:hover{
	color: #FA7E0A;
	text-decoration: underline;
}

.services h4{
	color: #623700;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	margin: 0px;
	margin-top: 10px;
}

.services h5{
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	padding: 5px 0px;
	margin: 0px;
	background-color: #f29600;
}

.services p{
	color: #333333;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	margin: 0px;
	margin-top: 10px;
}

.services ul{
	padding: 0px 5px ;
	margin: 0px;
	margin-top: 15px;
}

.services ul li{
	color: #333333;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	padding: 0px;
	margin: 10px 0px;
	list-style-type: none;	
	line-height: 1.3em;
}


/*-----------------------------------------------------------------*/

div.takeout_menu{
	margin-top: 10px;
	background-color: #eae4be;
	padding: 8px;
}

/*-----------------------------------------------------------------*/

.shops {
	position: relative;
	padding: 20px 30px;
	margin-top: 0px;
    margin-bottom: 10px;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px; /* 角を丸くする */
	float: left;
	width: 100%;
}


/*-----------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
.shops {
	padding: 20px 30px;
}
}
@media screen and (max-width: 992px) {
.shops {
	padding: 20px 30px;
}
}
@media screen and (max-width: 768px) {
.shops {
	padding: 20px 30px;
}
}
@media screen and (max-width: 480px) {
.shops {
	padding: 10px 15px;
}
}
/*-----------------------------------------------------------------*/

.shops ul{
	padding: 0px;
	margin: 0px;
}

.shops ul li{
    font-size: 14px;
    color: #623700;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    list-style-type: none;
    display: inline;
    padding: 6px 10px;
    background-color: #fcd7a1;
    margin-right: 8px;
    float: left;
    margin-bottom: 10px;
}

.shops h2{
	color: #FFFFFF;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	padding: 10px 5px 8px 5px;
	margin: 0px;
	margin-top: 10px;
	background-color: #623700;
	line-height: 1.2em;
	clear: both;
}

.shops h3{
	font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 16px;
    padding: 0px 5px;
    margin: 0px;
    margin-top: 15px;
    line-height: 1.5em;
	font-weight: normal;
}


.shops .main_photo{
	margin-top: 15px;
    position: relative;
}

.shops .main_photo img{
}

.shops .main_photo h4{
	color: #FFFFFF;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	padding: 10px 5px 8px 5px;
	margin: 0px;
	background-color: rgba(76, 43, 0, 0.9);
	width: 100%;
	bottom: 0px;
	left: 0px;
    line-height: 1.2em;
	position: absolute;
}

/*-----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
.shops .main_photo h4{
	position: relative;
}
}
@media screen and (max-width: 480px) {
.shops .main_photo h4{
	position: relative;
}
}
/*-----------------------------------------------------------------*/



.shops .message_area{
    background: #f5f29a;
    border: 3px solid #623700;
    padding: 15px 20px;
    position: relative;
    margin-top: 15px;
	border-radius: 8px; /* 角を丸くする */
}

.shops .message_area .hukidasi{
	position: absolute;
    top: -32px;
    right: 20px;
}

.shops .message_area h5{
    color: #623700;
    font-size: 18px;
    text-align: center;
    margin: 0px;
    font-weight: bold;
}

.shops .message_area p{
    color: #623700;
    font-size: 16px;
    line-height: 1.4em;
    margin: 0px;
    margin-top: 5px;
}

.shops .menu_area{
	border: 2px solid #f39800;
    margin-top: 15px;
}

.shops .menu_area table{
	background-color: #fef5e8;
	border-top: 1px solid #f39800;
	border-left: 1px solid #f39800;
	border-right: 1px solid #f39800;
}

.shops .menu_area table th{
	font-size: 16px;
	color: #fff;
	background-color: #f39800;
	border-right: 1px solid #f39800;
	border-bottom: 1px solid #f39800;
    text-align: center;
    padding: 3px 20px;
}
.shops .menu_area table td{
	font-size: 16px;
	color: #623700;
	border-bottom: 1px solid #f39800;
    padding: 3px 20px;
    font-weight: bold;
}


.shops .tel_area{
	text-align: center;
	padding: 10px 5px 8px 5px;
	margin: 0px;
	margin-top: 15px;
	background-color: #623700;
	width: 100%;
}

.shops .tel_area p{
    margin: 0px;
}

.shops .tel_area a{
    color: #eee93a;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2em;
    text-align: center;
}

.shops .tel_area a:hover{
	text-decoration: none;
}

.shops .tel_area p span{
    color: #eee93a;
    font-weight: bold;
    font-size: 22px;
    line-height: 1.2em;
    text-align: center;
    margin: 0px;
    margin-right: 10px;
}


.shops .shop_info{
	border: 2px solid #d4e7a5;	
	margin-top: 15px;
}

.shops .shop_info_inner{
    padding: 15px;
}

.shops .shop_info h5{
	border: 2px solid #d4e7a5; 
    background-color: #d4e7a5;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 6px;
    margin: 0px;
	line-height: 1.3em;
}

.shops .shop_info p{
    font-size: 18px;
    line-height: 1.6em;
}

.shops .shop_info ul {
}

.shops .shop_info ul li{
    font-size: 14px;
    color: #333;
    font-weight: normal;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    list-style-type: none;
    display: inline;
    padding: 6px 10px;
    background-color: #fef5e8;
    margin-right: 8px;
    float: left;
    margin-bottom: 10px;
    line-height: 1.3em;
    word-break: break-all;
}

.shops .shop_info ul li.sns_f{
	background-image: url(../images/f_icon.png);
	background-repeat: no-repeat;
	padding-left: 33px;
	background-position: 5px 3px;
}
.shops .shop_info ul li.sns_f a{
	color: #333;	
}

.shops .shop_info ul li.sns_t{
	background-image: url(../images/t_icon.png);
	background-repeat: no-repeat;
	padding-left: 33px;
	background-position: 5px 3px;
}
.shops .shop_info ul li.sns_t a{
	color: #333;	
}

.shops .shop_info ul li.sns_i{
	background-image: url(../images/i_icon.png);
	background-repeat: no-repeat;
	padding-left: 33px;
	background-position: 5px 3px;
}
.shops .shop_info ul li.sns_i a{
	color: #333;	
}

.shops .shop_info ul li a{
	color: #0066FF;	
}


.shops .shop_info ul li img{
    padding: 0px;
    margin: 0px;
}


.shops .map_area{
	margin-top: 15px;
}

/*-----------------------------------------------------------------*/
.takeoutmenu {
    padding: 0px 0px;
    margin-top: 0px;
    text-align: center;
}

.takeoutmenu img.title{
	width : 70%;
}

/*-----------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
.takeoutmenu img.title{
	width : 70%;
}
}
@media screen and (max-width: 992px) {
.takeoutmenu img.title{
	width : 40%;
}
}
@media screen and (max-width: 768px) {
.takeoutmenu img.title{
	width : 40%;
}
}
@media screen and (max-width: 480px) {
.takeoutmenu img.title{
	width : 70%;
}
}
/*-----------------------------------------------------------------*/



.takeoutmenu .menu_item{
    position: relative;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    float: left;
    width: 100%;
}

.takeoutmenu .menu_item img{
}

.takeoutmenu .menu_item p.name{
    font-size: 16px;
    color: #623700;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 8px;
    padding: 0px 5px;
    line-height: 1.4em;
}

.takeoutmenu .menu_item hr{
	margin: 0px auto;
    padding: 0px;
    width: 80%;
    border-top: 1px solid #000;
    margin-bottom: 2px;
}

.takeoutmenu .menu_item p.price{
	font-size: 16px;
    color: #eee93a;
    font-weight: bold;
    background-color: #623700;
    /* display: inline; */
    padding: 2px 0px;
    margin: 0px auto;
    margin-top: 10px;
    width: 60%;
}


/*-----------------------------------------------------------------*/


#footer{
	background-color: #623700;
	padding: 0.5em 0;
}


#footer h4{
	color: #FFFFFF;
	margin-top: 10px;
	text-align: center;
	font-size: 18px;
	line-height: 1.5em;
	margin-bottom: 0px;
    font-weight: bold;
}

#footer address{
	color: #FFFFFF;
	font-size: 14px;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

#footer p{
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
}

#footer .go_top{
	text-align:center;
    margin-bottom: 60px;
}

#footer .tel_toiawase{
	border-bottom: 1px dotted #fff;
	margin: 0px;
    padding: 15px 0px 30px 0px;
	text-align: center;
}

#footer .tel_toiawase_wrapper{
    border: 1px solid #ffde15;
}

#footer  .tel_toiawase h3 {
    margin: 0px 0px;
    padding: 8px 15px;
    color: #ffde15;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    /* display: inline; */
    line-height: 1.4em;
}


/*-----------------------------------------------------------------*/

.floating-banner p.pc {
    font-size: 18px;
    color: #eee93a;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 30px;
    width: 100%;
    margin: 0px;
	border:1px solid #fff;
}

.floating-banner p.tb {
    font-size: 18px;
    color: #eee93a;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    /* width: 100%; */
    margin: 0px;
    text-align: center;
	border-top:1px solid #fff;
}

.floating-banner p.sp {
	font-size: 16px;
	color: #eee93a;
	font-weight: bold;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px 20px;
	/* width: 100%; */
    margin: 0px;
	text-align: center;
	border-top:1px solid #fff;
}

.floating-banner a:hover {
	text-decoration: none;	
}

.floating-banner {
    position: fixed; /* 追従 */
    z-index: 99999; /* 他の要素の下に隠れないように */
    bottom: 10px; /* バナーの上下の位置 */
    right: 10px; /* バナーの左右の位置 */
}

.floating-banner p img{
	margin-right: 8px;
}

.pc {
    width: 300px; /* バナーの横幅を指定 */
}
.floating-banner:hover {
    opacity: .8; /* ホバーで少し透過 */
	text-decoration: none;	
}
.tb {
    display: none; /* PCではスマホ用のバナーは非表示に */
}
.sp {
    display: none; /* PCではスマホ用のバナーは非表示に */
}

@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
    .pc {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
    .sp {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
    .tb {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
    .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
        right: 0; /* 左右の隙間が空かないように */
        bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
    }
}

@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
    .tb {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
    .sp {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
    .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
        right: 0; /* 左右の隙間が空かないように */
        bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
    }
}


/*グリッド写真の背景*/
.ri-grid ul li a .desc {
    background: rgba(27, 22, 10, 0.3);
}

.ri-grid ul li a .desc h3 span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

#fh5co-photos-section {
	padding-top: 40px;
	padding-bottom: 0px;
	background-color: #fde7c6;
	background: url(../images/back_alpha.png) top center repeat-x;
}


/*マップ関係*/
#map {
  width: 100%;
  height: 500px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #map {
    height: 300px;
  }
}

#map .map_fukidasi a{
	color: #333333;
	font-size: 14px;
}


/* *********************** */
/*  2021.02.06 佐久のお店対応 デザイン変更CSS */
/* *********************** */

/*  検索まわり  */
.bnr_sakushop {
	margin-top: 30px;
    margin-bottom: 25px;
}
.bnr_sakushop p{
	margin: 0px;
    color: #623704;
	font-size: 18px;
}
.bnr_sakushop img{
	width:80%;
}

div#message_bar p.red {
    margin-bottom: 0px;
    text-indent: -1em;
    padding-left: 2em;
    margin-left: -20px;
}
div#message_bar {
    margin-bottom: 30px;
}

/*  テキストタグ  */
.t_tag_area{
    height: 44px;
    margin-top: -35px;
    position: absolute;
    left: 0px;
    width: 100%;
}
.t_tag_area .t_tag{
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    height: 40px;
    width: 112px;
    position: relative;
	transform:rotate(349deg);    /* 中心を基準点に時計回りに回転する */	
    margin-right: 3px;
}
.t_tag_area .t_tag p{
	color: #ffdf00;
    line-height: 1.0;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin: 0px;
}
.t_tag_area .brown{
    background-color: #623700;
}
.t_tag_area .red{
    background-color: #E61F53;
}
.t_tag_area .green{
    background-color: #93C31E;
}

/*  リンクバナー  */
#linkbaner {
    padding-top: 0px;
    padding-bottom: 40px;
}
#linkbaner img{
    margin-top: 10px;
    margin-bottom: 10px;
}

/*  リンクバナー 詳細ページ */
.shops .sakushop_link {
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: center;
}
.shops .sakushop_link p{
	margin-top: 10px;
    margin-bottom: 10px;
    background-color: #ff3131;
    display: inline-block;
    padding: 5px 15px;
    font-size: 16px;
}
.shops .sakushop_link p a{
	color: #eee93a;
}
.shops .sakushop_link p a:hover{
}


/*------------------------------------*\
	Back to top
\*------------------------------------*/

#back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 40px;
    z-index: 9999;
    cursor: pointer;
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
}
@media screen and (min-width: 768px) and (max-width: 992px) {
}
@media screen and (min-width: 480px) and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
#back-to-top {
	right: -18px;
	bottom: 0px;
}
#back-to-top img{
	width: 75%;
}
}