/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/




/*********************
** slick slider
*********************/
.slider {
	margin: 0 auto;
	width: 90%;
	opacity: 0;
	transition: 3s;
}

.slick-initialized {
	opacity: 1
}

.slider img {
	height: auto;
	width: 100%;
}

/*slick setting*/
.slick-prev:before,
.slick-next:before {
	color: #000;
}

@media (max-width: 1199px) {
	.slick-dotted.slick-slider {
		margin-bottom: 50px;
	}
}

/*********************
** コンテンツ content
*********************/

#content {
	background-image: url(../images/bg.png);
}

@media (max-width: 575.98px) {
	.container, #header.full-header .container, .container-fullwidth {
		width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/*********************
** ヘッダービデオ Video
*********************/
#header.transparent-header + #slider{
	top: 0px;
    margin-bottom: 0px;
}
.header-video .video-wrap video {
    height: 100%;
	margin-bottom: -50px;
    margin-top: -4px;
}
/*********************
** ヘッダー header
*********************/
#header.transparent-header {
	background: #F6F6EB;
}
#header, #header.sticky-header #header-wrap {
	background: #F6F6EB;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

#header-wrap {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

#header.full-header #logo {
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}



#logo img {
	padding: 10px 0;
    display: table-cell;
}

@media (max-width: 991.98px) {
	#header-wrap .container {
		padding: 0 !important;
	}
	#logo {
		height: auto;
	}
	#logo a {
		display: block !important;
	}
	#logo img {
		margin-left: -26px;
		padding: 0;
    object-fit: contain;
    max-width: 300px;
	height: 76px;
	}
}

#header.sticky-header:not(.static-sticky) #logo img {
	padding-top: 0;
	max-width: 100%;
}

#header.full-header #primary-menu>ul {
	padding-left: 30px;
	margin-left: 30px;
	border-left: 1px solid #EEE;
}

.slider-caption p {
	font-weight: bold;
}

@media (max-width: 991.98px) {
	body:not(.primary-menu-open) #header.transparent-header-responsive {
		background-color: #F6F6EB;
		z-index: 2;
	}

	body:not(.primary-menu-open) #header.transparent-header-responsive + #slider{
		top: 0;
		margin-bottom: 0;
		height: 90vh;
	}

	.header-video .slider-inner,
	.header-video .video-wrap {
		height: 100%;
	}
	.video-wrap video {
		height: 100% !important;
		margin-bottom: 0;
		margin-top: 21px;
		object-fit: cover;
	}
}

/*　ハンバーガーメニューボタン　*/

@media (max-width: 1300px) {
.hamburger {
	display : block;
	position: fixed;
	z-index : 3;
	right : 20px;
	top   : 20px;
	width : 42px;
	height: 42px;
	cursor: pointer;
	text-align: center;
  }
  .hamburger span {
	display : block;
	position: absolute;
	width   : 30px;
	height  : 2px ;
	left    : 6px;
	background : #BBBBBB;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition   : 0.3s ease-in-out;
	transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
	top: 10px;
  }
  .hamburger span:nth-child(2) {
	top: 20px;
  }
  .hamburger span:nth-child(3) {
	top: 30px;
  }

  /* スマホメニューを開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
	top : 16px;
	left: 6px;
	background :#fff;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
	top: 16px;
	background :#fff;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
  }

  /* メニュー背景　*/
  nav.globalMenuSp {
	position: fixed;
	z-index : 2;
	top  : 0;
	left : 0;
	color: #fff;
	background: rgba( 71,70,73,0.6 );
	text-align: center;
	width: 100%;
	height: 100vh;
	transform: translateX(100%);
	transition: all 0.6s;
  }

  nav.globalMenuSp ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
  }

  nav.globalMenuSp ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	transition: .4s all;
  }
  nav.globalMenuSp ul li:last-child {
	padding-bottom: 0;
  }
  nav.globalMenuSp ul li:hover{
	background :#ddd;
  }

  nav.globalMenuSp ul li a {
	display: block;
	color: #fff;
	padding: 1em 0;
	text-decoration :none;
  }

  /* クリックでjQueryで追加・削除 */
  nav.globalMenuSp.active {
	opacity: 100;
	display: block;
	transform: translateX(0%);
  }

}

/*********************
** ショップバナー shop-bnr
*********************/
.shop-bnr {
	margin-bottom: 80px;
}


/*********************
** お知らせ news
*********************/

#news {
	margin-bottom: 4em;
	background: #FFFDB8;
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
}

#news h2 {
	padding: 5px 0 5px 15px;
	background: #FFE975;
	font-size: 1.6em;
}

#news .row>div {
	display: flex;
	align-items: stretch;
}

#news article {
	margin: 0 5px 30px;
	padding: 15px;
	background: #ffffff;
	border-radius: 10px;
}

#news article figure {
	margin: 0;
	padding: 0 0 1rem;
	overflow: hidden;
}


#news article figure img {
	max-height: 170px;
	object-fit: contain;
	border-radius: 10px 10px 0 0;
}

#news .news-body {}

#news .news-body h3 {
	font-size: 1.2em;
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

#news .news-body p {
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	line-height: 1.4;
}

#news .news-body p:last-child {
	margin-bottom: 0;
}

#news .news-body p span {
	margin-bottom: 0.5em;
	margin-right: 15px;
}

#news .news-body .mytime {
	color: #FFBC00;
	font-weight: bold;
}

#news .news-body .post-categories {
	float: right;
	margin-bottom: 10px;
	list-style-type: none;
}

#news .news-body .post-categories a {
	padding: 3px 10px;
	color: #ffffff;
	background-color: #FFC53F;
	border-radius: 20px;
}

#news .news-body span.readmore {
	text-align: center;
	display: block;
	padding: 3px 10px;
	color: #004BB1;
	border: #004BB1 2px solid;
	border-radius: 20px;
}

#news .moreButton {
	text-align: center;
	padding-bottom: 30px;
}

#news .moreButton .btn-primary {
	color: #004BB1;
	background-color: #fff;
	border: 2px solid #004BB1;
	border-radius: 20px;
}

/*********************
** 各店の新着情報 shopnews
*********************/

#shopnews {
	margin-bottom: 4em;
	background: #FFFDB8;
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
}

#shopnews h2 {
	padding: 5px 0 5px 15px;
	margin-bottom: 5px;
	background: #FFE975;
	font-size: 1.6em;
}

#shopnews table {
	color: #008EE4;
	font-weight: bold;
}

#shopnews table tr:first-child th, #shopnews table tr:first-child td {
	border-top: none;
}



/*********************
** マップ map
*********************/

#map figure {
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
}

#map p {
	font-size: 1.3em;
}

/*********************
** 店舗一覧 shoplist
*********************/

/* filter */

.portfolio-filter {
	background-color: #ffffff;
	transition: all .4s ease-in-out;
}

.portfolio-filter .pf-all:hover {
	background-color: #696969;
}

.portfolio-filter li.activeFilter a.pf-all {
	background-color: #696969;
	font-weight: bold;
}

.portfolio-filter .pf-restaurant:hover {
	background-color: #ffb6c1;
}

.portfolio-filter li.activeFilter a.pf-restaurant {
	background-color: #ffb6c1;
	font-weight: bold;
}

.portfolio-filter .pf-food:hover {
	background-color: #ffad7d;
}

.portfolio-filter li.activeFilter a.pf-food {
	background-color: #ffad7d;
	font-weight: bold;
}

.portfolio-filter .pf-fastfood:hover {
	background-color: #ffd700;
}

.portfolio-filter li.activeFilter a.pf-fastfood {
	background-color: #ffd700;
	font-weight: bold;
}

.portfolio-filter .pf-fashion:hover {
	background-color: #79b7ff;
}

.portfolio-filter li.activeFilter a.pf-fashion {
	background-color: #79b7ff;
	font-weight: bold;
}

.portfolio-filter .pf-hobby:hover {
	background-color: #66cdaa;
}

.portfolio-filter li.activeFilter a.pf-hobby {
	background-color: #66cdaa;
	font-weight: bold;
}

.portfolio-filter .pf-goods:hover {
	background-color: #ffdab9;
}

.portfolio-filter li.activeFilter a.pf-goods {
	background-color: #ffdab9;
	font-weight: bold;
}

.portfolio-filter .pf-living:hover {
	background-color: #f8f8ff;
}

.portfolio-filter li.activeFilter a.pf-living {
	color: #333 !important;
	background-color: #f8f8ff;
	font-weight: bold;
}

@media (max-width: 1199px) {}

@media (max-width: 767.98px) {
	.portfolio-filter li {
		margin: 0 !important;
		border: 1px solid #dddddd;
	}
}

/* item */

.portfolio-item {}

@media (max-width: 575.98px) {
	.portfolio .portfolio-item {
		margin: 10px 0;
	}
}

.portfolio-item a {
	display: block;
	color: #666;
	border-radius: 10px;
	transition: all .4s ease-in-out;
}

.portfolio-item a:hover {
	background-color: rgba(0, 0, 0, 0.5);
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
}

.portfolio-header {
	height: 70px;
	background-color: #fff;
	border-radius: 10px 10px 0 0;
}

.portfolio-item .portfolio-image {
	float: left;
	width: 30%;
	height: 100%;
}

.portfolio-item .portfolio-image figure {
	margin: 5px auto;
	width: 60px;
}

.portfolio-title {
	float: right;
	width: 70%;
	height: 100%;
	display: table;
	border-radius: 0 10px 0 0;
}

.pf-restaurant .portfolio-title {
	background-color: #ffb6c1;
}

.pf-food .portfolio-title {
	background-color: #ffad7d;
}

.pf-fastfood .portfolio-title {
	background-color: #ffd700;
}

.pf-fashion .portfolio-title {
	background-color: #79b7ff;
}

.pf-hobby .portfolio-title {
	background-color: #66cdaa;
}

.pf-goods .portfolio-title {
	background-color: #ffdab9;
}

.pf-living .portfolio-title {
	color: #333333;
	background-color: #f8f8ff;
}

.portfolio-title h3 {
	vertical-align: middle;
	display: table-cell;
	padding: 0 15px;
	font-size: 1.3em;
}

.portfolio-desc {
	padding: 15px;
	min-height: 164px;
	background-color: #ffffff;
	border-radius: 0 0 10px 10px;
}

.portfolio-desc p {
	margin-bottom: 10px;
}

.portfolio-desc .tag {
	padding: 6px 10px 5px;
	display: inline-block;
	color: #333;
}

.pf-restaurant .portfolio-desc .tag {
	background-color: #ffb6c1;
}

.pf-food .portfolio-desc .tag {
	background-color: #ffad7d;
}

.pf-fastfood .portfolio-desc .tag {
	background-color: #ffd700;
}

.pf-fashion .portfolio-desc .tag {
	background-color: #79b7ff;
}

.pf-hobby .portfolio-desc .tag {
	background-color: #66cdaa;
}

.pf-goods .portfolio-desc .tag {
	background-color: #ffdab9;
}

.pf-living .portfolio-desc .tag {
	background-color: #f8f8ff;
}

@media (max-width: 1199px) {
	.portfolio-title h3 {
		font-size: 0.9rem;
	}
}


/* modal */
.modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
}

@media (min-width: 576px) {
	.modal-dialog {
		max-width: 90%;
	}
}

.modal-content {
	border-radius: 1rem;
}

.modal-body {
	padding: 2rem 1.3rem;
}

.modal-body .col-md-6 {
	padding-right: 30px;
	padding-left: 30px;
}

.modal-body h3 {
	margin: 0 0 10px;
	font-size: 2rem;
}

.modal-body span {
	padding: 3px 10px;
	margin-bottom: 50px;
	color: #ffffff;
	border-radius: 20px;
}

span.pf-restaurant {
	background-color: #ffb6c1;
}

span.pf-food {
	background-color: #ffad7d;
}

span.pf-fastfood {
	background-color: #ffd700;
}

span.pf-fashion {
	background-color: #79b7ff;
}

span.pf-hobby {
	background-color: #66cdaa;
}

span.pf-goods {
	background-color: #ffdab9;
}

span.pf-living {
	color: #333333;
	background-color: #f8f8ff;
}

.modal-image {
	/* display: contents;
	height: 503px; */
	width: 100%;
	margin: 0 auto;
}

@media (max-width: 1199px) {
	.modal-image figure {
		margin-bottom: 50px;
	}
}

.modal-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-width: 700px;
	max-height: 500px;
	border-radius: 1rem;
}

.modal-desc {
	margin-bottom: 30px;
}

.modal-desc p {
	margin-bottom: 10px;
}

.modal-service {
	margin-bottom: 30px;
}

.modal-service h4 {
	display: inline-block;
	margin: 0 0 0.7rem 0;
	padding: 0.5em 1em;
	color: #494949;
	font-size: 1rem;
	font-weight: 100;
	background: #FFF4E7;
	border-left: solid 5px #FFD8AC;
}

.modal-info table {
	word-break: break-all;
}

.modal-info p {
	margin: 0;
}

.modal-info .table tr:last-child th, .modal-info .table tr:last-child td {
	border-bottom: 1px solid #dee2e6;
}

/*********************
** 海野町商店街について about-unno
*********************/

#about-unno {
	margin: 0 0 80px;
}

#about-unno .jumbotron {
	position: relative;
	background: url(../images/about-unno.png) center no-repeat;
	background-size: cover;
}

#about-unno .jumbotron .container {
	padding: 30px;
	position: absolute;
	top: 30px;
	left: 0;
	max-width: 970px;
	background-color: rgba(0, 0, 0, 0.5);
}

#about-unno .jumbotron h2, #about-unno .jumbotron p {
	color: #fff;
}

#about-unno .col-lg-4 {
	padding-top: 100px;
	text-align: center;
}

#about-unno .fa-utensils {
	color: #FFBC00;
}

#about-unno .fa-tshirt {
	color: #008EE4;
}

#about-unno .fa-users {
	color: #F783AC;
}

#about-unno h3 {
	margin: 20px 0;
}

#about-unno p {
	font-size: 1rem;
	font-weight: bold;
}

#about-unno .jumbotron {
	margin: 4rem 0 6rem;
	padding: 15rem 2rem;
}

/*********************
** SNS sns
*********************/

#facebook .fab, #twitter .fab {
	padding-right: 15px;
}

#facebook {
	margin-bottom: 4em;
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
}

#facebook h2 {
	padding: 5px 0 5px 15px;
	margin-bottom: 0;
	color: #ffffff;
	font-size: 1.6em;
	background: #6C94D0;
}

#twitter {
	margin-bottom: 4em;
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
}

#twitter h2 {
	padding: 5px 0 5px 15px;
	margin-bottom: 0;
	color: #555555;
	font-size: 1.6em;
	background: #B1E6FD;
}

#twitter .sns-body .twitter-timeline {
	width: 500px;
}

.sns-body {
	display: flex;
	justify-content: center;
	background-color: #ffffff;
	overflow-x: hidden;
	overflow-y: scroll;
	max-height: 500px;
}

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

.dark #copyrights {
	color: #DDD;
}

#footer.dark .social-icon.si-borderless {
	color: #DDD !important;
}





/*********************
** ブログページ
*********************/
.post-body figure {
	text-align: center;
}

.ugb-card.ugb-card--v2 .ugb-card__image {
	height: 500px;
	width: 100%;
	background-size: cover;
	background-position: 50%;
}

.ugb-card.ugb-card--v2 .ugb-card__content {
	padding: 10px 35px 60px;
}



/*********************
** bootstrap ハック
*********************/