@charset "utf-8";

/*============================
MV
============================*/
#mv {
	width: 100%;
	margin-left: calc((100% - 14rem) / 2);
	border-radius:0 0 0.40rem 0;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	#mv {
		margin-left: 0.2rem;
		margin-top: 0.6rem;
		height: 2.5rem;
	}
}

#mv img {
	border-radius:0 0 0 0.40rem;
}
@media screen and (max-width: 640px) {
	#mv img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius:0 0 0 0.20rem;
	}
}

#mv video {
    height: auto;
    aspect-ratio: 16 / 9;
    width: 100%;
		border-radius: 0 00.5rem 0;
}

/*============================
マタリビルとは？
============================*/
#about {
	position: relative;
	/* padding: 2rem; */
}
@media screen and (max-width: 640px) {
	#about {
		display: flex;
		flex-flow: column-reverse;
	}
}


#about::after {
	content: '';
	width: 55%;
	height: 100%;
	background: rgba(65, 38, 27, 0.08);
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
}
@media screen and (max-width: 640px) {
	#about::after {
		content: none;
	}
}

/* 画像 */
@media screen and (max-width: 640px) {
	#about .ph_box {
		position: relative;
		padding-bottom: 1.2rem;
	}
}

#about .ph_box .ph_wrap01{
	width: calc(50% + 0.5rem);
	height: 5.5rem;
	position: absolute;
	top: 1.7rem;
	left: 0;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	#about .ph_box .ph_wrap01{
		width: calc(100% - 0.20rem);
		height: 2.5rem;
		position: static;
	}
}

#about .ph_box .ph_wrap01 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 0.4rem 0 0;
}
@media screen and (max-width: 640px) {
	#about .ph_box .ph_wrap01 img {
		border-radius: 0 0.2rem 0 0;
	}
}

#about .ph_box .ph_wrap02{
	width: 2.6rem;
	height: 2.3rem;
	position: absolute;
	bottom: 1rem;
	/* left: calc(50% / 50%); */
	left: 18%;
	z-index: 2;
}
@media screen and (max-width: 640px) {
	#about .ph_box .ph_wrap02{
		width: 1.7rem;
		height: 1.5rem;
		bottom: 0.5rem;
		left: auto;
		right: 0;
		z-index: 2;
	}
}

#about .ph_box .ph_wrap02 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width: 640px) {
}


/* テキスト */
#about .text_box {
	max-width: 4.5rem;
	width: 100%;
	margin-left: auto;
	margin-right: 0;
	padding-top: 2.15rem;
	padding-bottom: 2.7rem;
}
@media screen and (max-width: 640px) {
	#about .text_box {
		padding-top: 0.5rem;
		padding-bottom: 0.3rem;
	}
}

#about .text_box .title {
	text-align: center;
	margin-bottom: 0.7rem;
}
@media screen and (max-width: 640px) {
	#about .text_box .title {
		margin-bottom: 0.3rem;
	}
}

#about .text_box .sec_title {
	font-size: 0.36rem;
	text-align: center;
	margin-bottom: 0.35rem;
}
@media screen and (max-width: 640px) {
	#about .text_box .sec_title {
		font-size: 0.24rem;
		margin-bottom: 0.2rem;
	}
}

#about .text_box .text {
	font-size: 0.16rem;
	line-height: 2;
}
@media screen and (max-width: 640px) {
	#about .text_box .text {
		font-size: 0.14rem;
	}
}


/*============================
フロアマップ
============================*/
#floormap {
	background: #fff;
	padding: 0.65rem 0 0.85rem;
}

#floormap .title {
	text-align: center;
	margin-bottom: 0.52rem;
}

/* タブ */
#floormap .tab_wrap  {
	box-sizing: border-box;
	border-top: 1px solid #707070;
	border-bottom: 1px solid #707070;
}
@media screen and (max-width: 640px) {
	#floormap .tab_wrap  {
		border: none;
		text-align: center;
		margin-bottom: 0.30rem;
	}

	#floormap .tab_wrap  select {
		width: 2.3rem;
		height: 0.4rem;
		font-family: 'Montserrat', sans-serif;
		font-size: 0.2rem;
		font-weight: bold;
		color: #41261B;
		text-align: center;
		margin: auto;
	}

}


#floormap .tab_wrap .tab_list {
	display: flex;
	justify-content: space-between;
	max-width: 5.7rem;
	margin: auto;
}

#floormap .tab_wrap .tab_list .tab {
	color: #41261B;
	font-size: 0.20rem;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	padding: 0.20rem 0;
	transition: all .3s;
}

#floormap .tab_wrap .tab_list .tab:hover {
	opacity: 0.7;
}

#floormap .tab_wrap .tab_list .tab.active:after {
	content: '';
	width: 1rem;
	height: 0.06rem;
	background: #A00000;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* タブコンテンツ */
#floormap .tab_cont {
	display: none;
}

#floormap .tab_cont.active {
	display: block;
	text-align: center;
	margin-top: 0.50rem;
}


/* 画像サイズ次第で設定 */
/* #floormap .tab_cont .ph_warap {
	
}


#floormap .tab_cont .ph_warap img {
	
} */



/*============================
店舗情報
============================*/
#shop {
	padding: 0.65rem 0 0.85rem;
}
@media screen and (max-width: 640px) {
	#shop {
		padding: 0.65rem 0 0.3rem;
	}
}


#shop .title {
	text-align: center;
	margin-bottom: 0.52rem;
}

/* タブ */
#shop .tab_wrap  {
	box-sizing: border-box;
	/* background: #41261B; */
	border-radius: 0.10rem;
	padding: 0.25rem ;
	margin-bottom: 0.6rem;
}
@media screen and (max-width: 640px) {
	#shop .tab_wrap  {
		padding: 0;
		margin-bottom: 0.2rem;
	}
}

#shop .tab_wrap .tab_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
@media screen and (max-width: 640px) {
	#shop .tab_wrap .tab_list {
		justify-content: space-between;
	}
}

#shop .tab_wrap .tab_list .tab {
	color: #41261B;
	font-size: 0.16rem;
	font-weight: bold;
	box-sizing: border-box;
	border: 1px solid #41261B;
	cursor: pointer;
	transition: all .3s;
	padding: 0.10rem 0 0.11rem;
	width: calc(100% / 8);
	margin: 0 0.10rem;
	border-radius: 0.20rem;
	text-align: center;
}
@media screen and (max-width: 640px) {
	#shop .tab_wrap .tab_list .tab {
		width: 48%;
		margin:0 0 0.15rem;
	}
}

#shop .tab_wrap .tab_list .tab:hover {
	background: #41261B;
	color: #fff;
}

#shop .tab_wrap .tab_list .tab.active {
	background: #41261B;
	color: #fff;
}


/* コンテンツ */
#shop .tab_cont {
	display: none;
}

#shop .tab_cont.active {
	display: block;
}


#shop .tab_cont .shop_wrap {
	display: flex;
	flex-wrap: wrap;
	max-width: 10rem;
	margin: auto;
}

#shop .tab_cont .shop_wrap .shop_box {
	width: calc(50% - 0.2rem);
	margin-bottom: 0.80rem;
}
@media screen and (max-width: 640px) {
	#shop .tab_cont .shop_wrap .shop_box {
		width: 100%;
		margin-bottom: 0.6rem;
	}
}

#shop .tab_cont .shop_wrap .shop_box:nth-child(odd) {
	margin-right: 0.2rem;
}
@media screen and (max-width: 640px) {
	#shop .tab_cont .shop_wrap .shop_box:nth-child(odd) {
		margin-right: 0;
	}
}

#shop .tab_cont .shop_wrap .shop_box:nth-child(even) {
	margin-left: 0.2rem;
}
@media screen and (max-width: 640px) {
	#shop .tab_cont .shop_wrap .shop_box:nth-child(even) {
		margin-left: 0;
	}
}

#shop .tab_cont .shop_wrap .shop_box {
	width: calc(50% - 0.2rem);
}
@media screen and (max-width: 640px) {
	#shop .tab_cont .shop_wrap .shop_box {
		width: 100%;
	}
}

/* 画像 */
#shop .tab_cont a .ph_warp {
	width: 100%;
	height: 3rem;
	margin-bottom: 0.15rem;
	overflow: hidden;
	transition: all .3s;
}
@media screen and (max-width: 640px) {
	#shop .tab_cont a .ph_warp {
		width: 100%;
		height: 2rem;
	}
}

#shop .tab_cont a:hover img {
	opacity: 0.7;
}

#shop .tab_cont a .ph_warp img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* カテゴリー */
#shop .tab_cont .cate_box {
	display: flex;
	margin-bottom: 0.15rem;
}

#shop .tab_cont .cate_box .cont {
	font-size: 0.12rem;
	color: #fff;
	background: #41261B;
	border-radius: 0.06rem;
	padding: 0.05rem 0.10rem 0.07rem;
	margin-right: 0.10rem;
	position: relative;
	display: flex;
	align-items: center;
}
@media screen and (max-width: 640px) {
	#shop .tab_cont .cate_box .cont {
		font-size: 0.12rem;
		padding: 0.03rem 0.08rem 0.05rem;
	}	
}

#shop .tab_cont .cate_box .cont.floor::before {
	content: '';
	width: 0.20rem;
	height: 0.20rem;
	background: url(../img/top/icon_floor.svg) no-repeat;
	display: inline-block;
	padding-right: 0.15rem;
}

/* ショップ名 */
#shop .tab_cont .shop_name {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.18rem;
	font-weight: bold;
	color: #41261B;
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 0.30rem;
}
@media screen and (max-width: 640px) {
	#shop .tab_cont .shop_name {
		font-size: 0.16rem;
		padding-left: 0.30rem;
	}
}

#shop .tab_cont a .shop_name::before {
	content: '';
	width: 0.2rem;
	height: 0.2rem;
	background: url(../img/top/icon_btn_brown.svg) no-repeat;
	background-size: contain;
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	transition: all .3s;
}
@media screen and (max-width: 640px) {
	#shop .tab_cont a .shop_name::before {
		content: '';
		width: 0.18rem;
		height: 0.18rem;
	}
}

#shop .tab_cont a:hover .shop_name::before {
	content: '';
	width: 0.28rem;
	height: 0.28rem;
}

/*---------------------------------
モーダル
---------------------------------*/
/**/
#cboxOverlay {
	background: #000;
}

#cboxLoadedContent {
	/*	background: #fff;*/
	/* background: linear-gradient(90deg, #fff 0%, #fff 80%, #f2f2f2 20%, #f2f2f2 100%); */
	background: #fff;
	left: 50%;
	padding: 0;
	overflow: auto;
	box-shadow: 0px 1px 12px rgba(0,0,0,0.6);
}

#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose,
#cboxTitle {
	top: 0.2rem;
	right: 0.2rem;
}

#colorbox,
#cboxOverlay,
#cboxWrapper {
	overflow: visible;
}

#cboxTitle {
	color: #fff;
}

#inline-content {
	/* インラインを使用する時のみ */
	margin: 20px;
}

#ajax-wrap {
	/* ajaxを使用する時のみ */
	margin: 20px;
}

/* 上部の閉じるボタン */
#cboxClose {
	width: 0.30rem;
	height: 0.30rem;
	background-image: url(../img/top/popup_close_btn.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 0;
	z-index: 10;
}

@media screen and (max-width: 699px) {
	#cboxClose {
		width: 0.26rem;
		height: 0.26rem;
	}
}

/* コンテンツボックス */
.about_member_modal {
	display: none;
}

/* colorbox ボックス内 */
.modal__content_box {
	position: relative;
	padding: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media screen and (max-width: 699px) {
	.modal__content_box {
		padding: 0.3rem;
	}
}

/* 写真エリア */
.modal__content_box .left_box {
	width: 4rem;
}

.modal__content_box .left_box .ph_wrap {
	width: 100%;
	height: 3rem;
}
@media screen and (max-width: 599px) {
	.modal__content_box .left_box .ph_wrap {
		width: 100%;
		height: 2.5rem;
		margin-top: 0.30rem;
	}
}


.modal__content_box .left_box .ph_wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.modal__content_box .left_box dl {
	display: flex;
	align-items: center;
	margin-top: 0.20rem;
}
@media screen and (max-width: 599px) {
	.modal__content_box .left_box dl {
		justify-content: center;
	}
}

.modal__content_box .left_box dt {
	font-size: 0.16rem;
	color: #707070;
	transition: all .3s;
	padding-right: 0.20rem;
}
@media screen and (max-width: 599px) {
	.modal__content_box .left_box dt {
		font-size: 0.14rem;
	}
}


.modal__content_box .left_box dd {
	font-size: 0.12rem;
	color: #707070;
	font-weight: bold;
	display: flex;
	align-items: center;
	transition: all .3s;
}

.modal__content_box .left_box dd span {
	font-size: 0.22rem;
	color: #2F475C;
	display: inline-block;
	padding-right: 0.30rem;
	transition: all .3s;
}
@media screen and (max-width: 599px) {
	.modal__content_box .left_box dd span {
		font-size: 0.18rem;
	}
}


/* テキストエリア */
.modal__content_box .right_box {
	width: calc(100% - 4rem);
	box-sizing: border-box;
	padding-left: 0.5rem;
}
@media screen and (max-width: 599px) {
	.modal__content_box .right_box {
		width: 100%;
		padding-left: 0;
	}
}

/* ジャンル */
.modal__content_box .right_box .genre {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.14rem;
    font-weight: bold;
    color: #41261B;
	margin-bottom: 0.10rem;
}
@media screen and (max-width: 599px) {
	.modal__content_box .right_box .genre {
		margin-top: 0.30rem;
	}
}

/* タイトル */
.modal__content_box .right_box .shop_name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.25rem;
    font-weight: bold;
    color: #41261B;
    position: relative;
	margin-bottom: 0.15rem;
}
@media screen and (max-width: 599px) {
	.modal__content_box .right_box .shop_name {
		font-size: 0.2rem;
		margin-top: 0.10rem;
	}
}

/* カテゴリ */
.modal__content_box .right_box .cate_box {
	display: flex;
	margin-bottom: 0.15rem;
}

.modal__content_box .right_box .cate_box .cont {
	font-size: 0.16rem;
	color: #fff;
	background: #41261B;
	border-radius: 0.06rem;
	padding: 0.05rem 0.10rem 0.07rem;
	margin-right: 0.10rem;
	position: relative;
	display: flex;
	align-items: center;
}

.modal__content_box .right_box .cont.floor::before {
	content: '';
	width: 0.20rem;
	height: 0.20rem;
	background: url(../img/top/icon_floor.svg) no-repeat;
	display: inline-block;
	padding-right: 0.15rem;
}

/* 営業時間等 */
.modal__content_box .memo_list {
	margin-bottom: 0.20rem;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	box-sizing: border-box;
	padding: 0.10rem 0;
}

.modal__content_box .memo_list .item {
	font-size: 0.14rem;
	line-height: 1.8;
	width: 100%;
	display: flex;
}

.modal__content_box .memo_list .item strong {
	width: 0.8rem;
}

.modal__content_box .memo_list .item a {
	color: #000;
}

/* SNS */
.modal__content_box .sns_list {
	display: flex;
	margin-top: 0.50rem;
	margin-left: -0.10rem;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	box-sizing: border-box;
	padding: 0.10rem 0;
	justify-content: center;
}

.modal__content_box .sns_list .item {
	box-sizing: border-box;
	padding: 0 0.10rem;

}


/* テキストボックス */
.modal__content_box .right_box p {
	font-size: 0.16rem;
	line-height: 2;
}


/* 閉じるボタン（スマホ時） */
.close_btn {
	width: 2.00rem;
	box-sizing: border-box;
	margin: 0.30rem auto;
}

.close_btn a {
	display: block;
	border: 1px solid #111;
	color: #111;
	text-decoration: none;
	padding: 0.10rem 0 0.13rem;
	font-size: 0.16rem;
	text-align: center;
	line-height: 1;
	cursor: pointer;
}

.close_btn a span {
	display: inline-block;
	background-image: url(../img/top/popoup_close_sp.png);
	background-repeat: no-repeat;
	background-size: auto 70%;
	background-position: left 0.04rem;
	padding-left: 0.20rem;
}


/*---------------------------------
インスタ
---------------------------------*/
#insta {
}

#insta .in {
	background-color: #fff;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}
@media screen and (max-width: 640px) {
	#insta .in {
		width: calc(100% - 0.4rem);
		margin: auto;
		border-radius: 0.20rem;
		padding-top: 0.5rem;
		padding-bottom: 0.40rem;
	}
}

#insta .title {
	text-align: center;
	margin-bottom: 0.4rem;
}

#insta .insta_wrap {
	padding: 0 0.7rem;
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
	#insta .insta_wrap {
		padding: 0;
	}
}


#insta .insta_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}

#insta .insta_wrap ul li {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1%;
}
@media screen and (max-width: 640px) {
	#insta .insta_wrap ul li {
		width: 48%;
		height: 1.5rem;
		margin-bottom: 0.1rem;
	}
}

#insta .insta_wrap ul li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#insta .btn {
	text-align: center;
	margin-top: 0.4rem;
}
@media screen and (max-width: 640px) {
	#insta .btn {
		margin-top: 0.2rem;
	}
}

#insta .btn a {
	font-family: 'Montserrat', sans-serif;
	display: inline-block;
	font-size: 0.16rem;
	font-weight: bold;
	color: #fff;
	max-width: 2.5rem;
	width: 100%;
	background: #41261B;
	text-align: center;
	padding: 0.23rem 0;
	box-sizing: border-box;
	border: 1px solid #41261B;
}
@media screen and (max-width: 640px) {
	#insta .btn a {
		font-size: 0.16rem;
		padding: 0.16rem 0;
	}
}


#insta .btn a:hover {
	background: #fff;
	color: #000;
}
/*---------------------------------
インスタ
---------------------------------*/
#access {
	padding: 0.7rem 0;
	position: relative;
}
@media screen and (max-width: 640px) {
	#access {
		padding: 0.5rem 0 0.3rem;
	}
}

#access::after {
	content: '';
	width: 100%;
	height: 3.5rem;
	background: rgba(65, 38, 27, 0.08);
	position: absolute;
	bottom: 0;
	right: calc((100% - 14rem) / 2);
	z-index: 0;
	border-radius: 0 0.40rem 0 0;
}
@media screen and (max-width: 640px) {
	#access::after {
		height: 2rem;
		left: 0;
		right: auto;
		border-radius: 0;
	}
}


#access .title {
	text-align: center;
	margin-bottom: 0.4rem;
}

#access .access_wrap {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0.55rem;
}
@media screen and (max-width: 640px) {
	#access .access_wrap {
		margin-bottom: 0.3rem;
	}
}

/* 画像 */
#access .access_wrap .ph_wrap {
	width: 50%;
	height: 4rem;
	padding-right: 0.20rem;
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .ph_wrap {
		width: 100%;
		height: 2.2rem;
		padding-right: 0;
		margin-bottom: 0.15rem;
	}
}

#access .access_wrap .ph_wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* テキスト */
#access .access_wrap .text_wrap {
	width: 50%;
	padding-left: 0.20rem;
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .text_wrap {
		width: 100%;
		padding-left: 0;
	}
}

#access .access_wrap .text_wrap .flex_cont  {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#access .access_wrap .text_wrap dl {
	/* width: 50%; */
	box-sizing: border-box;
	margin-bottom: 0.30rem;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .text_wrap dl {
		display: flex;
		margin-bottom: 0.20rem;
	}
}


#access .access_wrap .text_wrap dl:nth-child(odd) {
	width: 40%;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .text_wrap dl:nth-child(odd) {
		width: 100%;
	}
}

#access .access_wrap .text_wrap dl:nth-child(even) {
	width: 60%;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .text_wrap dl:nth-child(even) {
		width: 100%;
	}
}
#access .access_wrap .text_wrap dt {
	font-size: 0.16rem;
	font-weight: bold;
	margin-bottom: 0.10rem;
	line-height: 1.4;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .text_wrap dt {
		font-size: 0.14rem;
		margin-bottom: 0;
		padding-top: 0.02rem;
		width: 25%;
	}
}

#access .access_wrap .text_wrap dd {
	font-size: 0.16rem;
	padding-left: 0.12rem;
	line-height: 1.4;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .text_wrap dd {
		font-size: 0.14rem;
	}
}

#access .access_wrap .text_wrap dd a {
	text-decoration: none;
	color: #000;
}


#access .access_wrap .text_wrap p {
	font-size: 0.16rem;
	line-height: 1.65;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 640px) {
	#access .access_wrap .text_wrap p {
		font-size: 0.14rem;
	}
}

/* google map */
#access .map iframe {
	width: 100%;
	height: 4.5rem;
	position: relative;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	#access .map iframe {
		height: 2.2rem;
	}
}