@charset "UTF-8";

#main{
	border-bottom: none;
	font-family: var(--font);
}
:root {
	--font: 'Noto Sans JP', sans-serif;
}

/* ▼▼▼ ルクア大阪の看板MENU
======================================================*/

/*---------------------
	全般
-----------------------*/
#kanbanmenu{
	padding-bottom: 140px;
}
#kanbanmenu .pc{
	display: block;
}
#kanbanmenu .sp{
	display: none;
}

/* normalize打ち消し */
#kanbanmenu h1{
	margin:0;
	font-size: 0;
	line-height: 1;
	height: 100%;
}
#kanbanmenu ul{
	list-style: none;
	padding-inline-start:0;
	padding-left: 0px;
}
#kanbanmenu dd{
	margin-inline-start: 0;
}
#kanbanmenu p{
	margin-block-start: 0;
	margin-block-end: 0;
}
/* normalize打ち消しここまで */


/*---------------------
	メインビジュアル
-----------------------*/
#kanbanmenu .mv{
	position: relative;
    z-index: 1;
	height: calc(100vh - 122px);
}
#kanbanmenu .mv img{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}


/*---------------------
	ナビゲーション
-----------------------*/
#kanbanmenu #navlist{
	width: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
	padding: 80px 0 143px 0;
}
#kanbanmenu #navlist .nav_container {
	width: 100%;
	max-width: 1120px;
	padding: 0 20px;
	margin-inline: auto;
}
#kanbanmenu #navlist .read{
	margin-bottom:60px;
	color:#40220F;
	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height: 1.8;
}
#kanbanmenu #navlist .read_text{
	width: 100%;
	max-width: 454px;
	margin-top: 102px;
	margin-inline: auto;
}
#kanbanmenu #navlist .nav_list{
	display: flex;
	justify-content: space-between;
	margin-top: 53px;
}
#kanbanmenu #navlist .nav_item{
	width: 100%;
	max-width: 17.78%;
	transition: transform 0.2s ease-in-out;
}
#kanbanmenu #navlist .nav_item:hover{
	transform: rotate(5deg);
}
#kanbanmenu #navlist .list_btn{
	display: flex;
	justify-content: center;
	margin-top: 102px;
}
#kanbanmenu #navlist .list_btn a{
	display: block;
	width: 100%;
	max-width: 348px;
}


/*---------------------
	shop_wrapper、各エリア共通
-----------------------*/
#kanbanmenu section.shop_wrapper{
	padding-bottom: 182px;
}
#kanbanmenu section.shop_wrapper:last-of-type{
	padding-bottom: 0;
}
#kanbanmenu .container {
	position: relative;
	width: 100%;
	max-width: 1240px;
	padding: 0 20px;
	margin-inline: auto;
}
#kanbanmenu .container::before{
	content: "";
	position: absolute;
	width: 95.2%;
	height: 100%;
	top: -20px;
	right: 40px;
	z-index: -1;
}
#kanbanmenu .shop_bg{
	position: absolute;
	width: 95.2%;
	height: 100%;
	top: 0;
	right: 20px;
	z-index: -1;
}
#kanbanmenu .shop_area{
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
	padding: 41px 40px 125px;
}
#kanbanmenu .shop_group{
	position: relative;
	display: flex;
	margin-bottom: 55px;
}
#kanbanmenu .shop_catch{
	width: 100%;
}
#kanbanmenu .food_main_img{
	position: absolute;
	width: 100%;
}
#kanbanmenu .shop_list{
	display: flex;
	gap: 23px;
	margin: 40px 0 0;
	padding-bottom: 40px;
}
#kanbanmenu .shop_list:first-of-type{
	margin-top: 0;
}
#kanbanmenu .shop_list:last-of-type{
	padding-bottom: 0;
	border-bottom: none !important;
}
#kanbanmenu .shop_list li{
	width: 32%;
	margin-bottom: 50px;
}
#kanbanmenu .shop_list li:nth-last-of-type(-n+3){
	margin-bottom: 0;
}
#kanbanmenu .shop_list li .food_top{
	display: flex;
}
#kanbanmenu .shop_list li .floor_icon{
	width: 100%;
	max-width: 125px;
}
#kanbanmenu .shop_list li .food_group{
	margin-left: 10px;
}
#kanbanmenu .shop_list li .shop_unit{
	display: flex;
	align-items: end;
}
#kanbanmenu .shop_list li .shop_cat{
	display: inline-block;
    padding: 4px 13px;
	margin-top: 10px;
	margin-bottom: 8px;
	color:#070304;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.05em;
	text-align: center;
	border-radius: 10px;
	background-color: #fff;
}
#kanbanmenu .shop_list li .shop_cat--margin{
	margin-top: 0;
}
#kanbanmenu .shop_list li .shop_sub-name{
	color: #FC972E;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: -0.01em;
}
#kanbanmenu .shop_list li .shop_sub-name--fz12{
	font-size: 12px;
}
#kanbanmenu .shop_list li .shop_sub-name-wolf{
	color: #FF779F;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: -0.05em;
}
#kanbanmenu .shop_list li .shop_name{
	color: #FC972E;
	font-weight: bold;
	font-size: 26px;
	letter-spacing: -0.05em;
}
#kanbanmenu .shop_list li .shop_name--pink{
	color: #FF779F;
}
#kanbanmenu .shop_list li .shop_name-wolf{
	color: #FF779F;
	font-weight: bold;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: -0.05em;
}
#kanbanmenu .shop_list li .menu_img{
	width: 100%;
	height: auto;
	margin-top: 16px;
}
#kanbanmenu .shop_list li .menu_img img{
	object-fit: cover;
	object-position: center;
	aspect-ratio: 345 / 220;
	border-radius: 15px;
}
#kanbanmenu .shop_list li .menu_group{
	margin-top: 16px;
	margin-left: 16px;
}
#kanbanmenu .shop_list li .menu_unit{
	display: flex;
}
#kanbanmenu .shop_list li .menu_unit:nth-of-type(2){
	margin-top: 10px;
}
#kanbanmenu .shop_list li .menu_title{
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
}
#kanbanmenu .shop_list li .menu_select{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.625;
}
#kanbanmenu .shop_list li .menu_price{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.25;
	margin-top: 7px;
}
#kanbanmenu .shop_list li .menu_price--margin{
	margin-top: 0;
	margin-left: 10px;
}
#kanbanmenu .shop_list li .menu_price span{
	font-size: 12px;
}
#kanbanmenu .shop_list li .menu_notes{
	font-size: 14px;
	line-height: 1.4;
	margin-top: 7px;
}
#kanbanmenu ul.footnote{
	width: 100%;
	max-width: 1200px;
	padding-inline: 20px;
	margin: 27px auto 0;
	font-size: 14px;
	line-height: 1.75;
}

#kanbanmenu ul.footnote li:not(:last-of-type){
	margin-right: 20px;
}

/*---------------------
	お肉が食べたい
-----------------------*/
#kanbanmenu #meat .container::before{
	border: 3px solid #F15A24;
}
#kanbanmenu #meat .shop_bg{
	background-color: rgba(252, 151, 46, 0.1);
}
#kanbanmenu #meat .shop_catch{
	max-width: 541px;
	margin: 0 0 0 60px;
}
#kanbanmenu #meat .food_main_img{
	max-width: 525px;
	top: -70%;
	right: -9%;
}
#kanbanmenu #meat .shop_list{
	border-bottom: 2px dashed #F15A24;
}


/*---------------------
	お魚！海鮮！が食べたい
-----------------------*/
#kanbanmenu #fish .container::before{
	border: 3px solid #1DA8CE;
}
#kanbanmenu #fish .shop_bg{
	background-color: rgba(88, 184, 198, 0.1);
}
#kanbanmenu #fish .shop_catch{
	max-width: 652px;
	margin: 0 0 0 37px;
}
#kanbanmenu #fish .food_main_img{
	max-width: 389px;
	top: -58%;
	right: -3%;
}
#kanbanmenu #fish .shop_list{
	border-bottom: 2px dashed #1DA8CE;
}


/*---------------------
	洋食！イタリアン！フレンチ！が食べたい
-----------------------*/
#kanbanmenu #western .container::before{
	border: 3px solid #E7B030;
}
#kanbanmenu #western .shop_bg{
	background-color: rgba(231, 176, 48, 0.1);
}
#kanbanmenu #western .shop_catch{
	max-width: 847px;
	margin: 0;
}
#kanbanmenu #western .food_main_img{
	max-width: 412px;
	top: -21%;
	right: -14%;
}
#kanbanmenu #western .shop_list{
	border-bottom: 2px dashed #E7B030;
}


/*---------------------
	中華！韓国料理！が食べたい
-----------------------*/
#kanbanmenu #chinese .container::before{
	border: 3px solid #DE251D;
}
#kanbanmenu #chinese .shop_bg{
	background-color: rgba(222, 37, 29, 0.1);
}
#kanbanmenu #chinese .shop_catch{
	max-width: 729px;
	margin: 0;
}
#kanbanmenu #chinese .food_main_img{
	max-width: 569px;
	top: -61%;
	right: -18%;
}
#kanbanmenu #chinese .shop_list{
	border-bottom: 2px dashed #DE251D;
}


/*---------------------
	甘いものが食べたい
-----------------------*/
#kanbanmenu #sweet .container::before{
	border: 3px solid #E95A9D;
}
#kanbanmenu #sweet .shop_bg{
	background-color: rgba(233, 90, 157, 0.1);
}
#kanbanmenu #sweet .shop_catch{
	max-width: 605px;
	margin: 0;
}
#kanbanmenu #sweet .food_main_img{
	max-width: 344px;
	top: -79%;
	right: -1%;
}
#kanbanmenu #sweet .shop_list{
	border-bottom: 2px dashed #E95A9D;
}


/*---------------------
	めん類が食べたい
-----------------------*/
#kanbanmenu #noodles .container::before{
	border: 3px solid #E7B030;
}
#kanbanmenu #noodles .shop_bg{
	background-color: rgba(231, 176, 48, 0.1);
}
#kanbanmenu #noodles .shop_catch{
	max-width: 567px;
	margin: 0 0 0 30px;
}
#kanbanmenu #noodles .food_main_img{
	max-width: 523px;
	top: -63%;
	right: -7%;
}
#kanbanmenu #noodles .shop_list{
	border-bottom: 2px dashed #E7B030;
}


/*---------------------
	揚げ物が食べたい
-----------------------*/
#kanbanmenu #fry .container::before{
	border: 3px solid #C97B3B;
}
#kanbanmenu #fry .shop_bg{
	background-color: rgba(201, 123, 59, 0.1);
}
#kanbanmenu #fry .shop_catch{
	max-width: 565px;
	margin: 0 0 0 30px;
}
#kanbanmenu #fry .food_main_img{
	max-width: 520px;
	top: -63%;
	right: -10%;
}
#kanbanmenu #fry .shop_list{
	border-bottom: 2px dashed #C97B3B;
}


/*---------------------
	スパイスきいたものが食べたい
-----------------------*/
#kanbanmenu #spicy .container::before{
	border: 3px solid #BAA72C;
}
#kanbanmenu #spicy .shop_bg{
	background-color: rgba(186, 167, 44, 0.1);
}
#kanbanmenu #spicy .shop_catch{
	max-width: 777px;
	margin: 0;
}
#kanbanmenu #spicy .food_main_img{
	max-width: 542px;
	top: -38%;
	right: -15%;
}
#kanbanmenu #spicy .shop_list{
	border-bottom: 2px dashed #BAA72C;
}


/*---------------------
	粉もんが食べたい
-----------------------*/
#kanbanmenu #ramen .container::before{
	border: 3px solid #E7B030;
}
#kanbanmenu #ramen .shop_bg{
	background-color: rgba(231, 176, 48, 0.1);
}
#kanbanmenu #ramen .shop_catch{
	max-width: 566px;
	margin: 0 0 0 40px;
}
#kanbanmenu #ramen .food_main_img{
	max-width: 470px;
	top: -64%;
	right: -2%;
}
#kanbanmenu #ramen .shop_list{
	border-bottom: 2px dashed #E7B030;
}


/*---------------------
	お酒を楽しみたい
-----------------------*/
#kanbanmenu #alcohol .container::before{
	border: 3px solid #4A3B88;
}
#kanbanmenu #alcohol .shop_bg{
	background-color: rgba(74, 59, 136, 0.1);
}
#kanbanmenu #alcohol .shop_catch{
	max-width: 578px;
	margin: 0 0 0 30px;
}
#kanbanmenu #alcohol .food_main_img{
	max-width: 444px;
	top: -31%;
	right: -3%;
}
#kanbanmenu #alcohol .shop_list{
	border-bottom: 2px dashed #4A3B88;
}

#kanbanmenu .shop_list li .shop_fz10{
	font-size: 10px;
}
#kanbanmenu .shop_list li .shop_fz11{
	font-size: 11px;
}
#kanbanmenu .shop_list li .shop_fz12{
	font-size: 12px;
}
#kanbanmenu .shop_list li .shop_fz17{
	font-size: 17px;
}
#kanbanmenu .shop_list li .shop_fz18{
	font-size: 18px;
}
#kanbanmenu .shop_list li .shop_fz20{
	font-size: 20px;
}
#kanbanmenu .shop_list li .shop_fz22{
	font-size: 22px;
}
#kanbanmenu .shop_list li .shop_fz24{
	font-size: 24px;
}
#kanbanmenu .shop_list li .shop_unit .shop_sub-name{
	margin-bottom: 3px;
	margin-right: 3px;
	margin-left: 3px;
}


/* ▼ ページ上部へ戻る
--------------------------------------- */
.pagetop {
	width: 83px;
	height: 80px;
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 2000;
	cursor: pointer;
}

.pagetop::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(../img/nav_arrow.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.pagetop::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(../img/nav_arrow_hover.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.pagetop:hover::before {
	opacity: 0;
}

.pagetop:hover::after {
	opacity: 1;
}


/* ▼▼▼ 769px以下
======================================================*/
@media screen and (max-width: 768px) {
	/*---------------------
		全般
	-----------------------*/
	#kanbanmenu{
		padding-bottom: 50px;
	}
	#kanbanmenu .pc {
		display: none;
	}
	#kanbanmenu .sp {
		display: block;
	}

	#kanbanmenu .mv{
		height: auto;
	}

	/*---------------------
		ナビゲーション
	-----------------------*/
	#kanbanmenu #navlist {
		padding: 40px 0 108px 0;
	}
	#kanbanmenu #navlist .container::after {
		width: 160px;
		height: 160px;
		position: absolute;
		top: -70px;
		right: 10px;
		bottom: unset;
	}
	#kanbanmenu #navlist .read {
		margin-bottom: 40px;
		font-size: 15px;
		line-height: 2.2;
	}
	#kanbanmenu #navlist .read_text {
		max-width: 300px;
		margin-top: 37px;
	}
	#kanbanmenu #navlist .nav_wrapper {
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 600px;
		margin: 40px auto 0;
	}
	#kanbanmenu #navlist .nav_list {
		flex-direction: column;
		width: 100%;
		max-width: 47%;
		margin-top: 0;
	}
	#kanbanmenu #navlist .nav_list .nav_item {
		max-width: none;
	}
	#kanbanmenu #navlist .list_btn {
		margin-top: 40px;
	}
	#kanbanmenu #navlist .list_btn a {
		max-width: 320px;
		height: 65px;
	}

	/*---------------------
		shop_wrapper、各エリア共通
	-----------------------*/
	#kanbanmenu section.shop_wrapper{
		padding-bottom: 70px;
	}
	#kanbanmenu .container {
		max-width: 625px;
		padding: 0 12.5px;
	}
	#kanbanmenu .container::before {
		width: 90.7%;
		top: -10px;
		right: 22.5px;
	}
	#kanbanmenu .shop_bg {
		width: 90.7%;
		right: 12.5px;
		background-color: rgba(241, 90, 36, 0.1);
	}
	#kanbanmenu .shop_area {
		max-width: 84.3%;
		padding-right: 0;
		padding-left: 0;
	}
	#kanbanmenu .shop_catch {
		max-width: none !important;
		margin: 0 !important;
	}
	#kanbanmenu .food_main_img {
		display: none;
	}
	#kanbanmenu .shop_list {
		display: block;
		border-bottom: none !important;
	}
	#kanbanmenu .shop_list::after {
		display: none;
	}
	#kanbanmenu .shop_list li {
		width: 100%;
		margin-bottom: 40px;
	}
	#kanbanmenu .shop_list li:nth-last-of-type(2),
	#kanbanmenu .shop_list li:nth-last-of-type(3) {
		margin-bottom: 60px;
	}
	#kanbanmenu .shop_list li:last-of-type {
		margin-bottom: 0;
	}
	#kanbanmenu .shop_list li .floor_icon {
		max-width: 76px;
	}
	#kanbanmenu .shop_list li .food_group {
		margin-left: 5px;
	}
	#kanbanmenu .shop_list li .shop_cat{
		font-size: 12px;
		padding: 4px 10px;
		margin-top: 0;
	}
	#kanbanmenu .shop_list li .shop_unit{
		display: block;
	}
	#kanbanmenu .shop_list li .shop_name {
		font-size: 18px;
	}
	#kanbanmenu .shop_list li .shop_name-wolf{
		font-size: 16px;
	}
	#kanbanmenu .shop_list li .shop_sub-name-wolf{
		font-size: 10px;
	}
	#kanbanmenu .shop_list li .menu_group{
		margin-left: 0;
	}
	#kanbanmenu .shop_list li .menu_notes {
		font-size: 14px;
	}
	#kanbanmenu ul.footnote {
		display: revert;
		max-width: 640px;
		padding-inline: 40px;
		margin-top: 24px;
		line-height: 1.2;
	}
	#kanbanmenu ul.footnote li:not(:last-of-type) {
		margin-right: 0;
		margin-bottom: 10px;
	}

	/* ▼ ページ上部へ戻る
	--------------------------------------- */
	.pagetop {
		right: 15px;
		bottom: 85px;
		width: 50px;
		height: 49px;
	}

	#kanbanmenu .shop_list li .shop_fz10_sp{
		font-size: 10px;
	}
	#kanbanmenu .shop_list li .shop_fz12_sp{
		font-size: 12px;
	}
	#kanbanmenu .shop_list li .shop_fz14_sp{
		font-size: 14px;
	}
	#kanbanmenu .shop_list li .shop_fz17_sp{
		font-size: 17px;
	}
	#kanbanmenu .shop_list li .shop_fz18_sp{
		font-size: 18px;
	}
}