/* components/menu.css */

.menu-item {
  padding: var(--spacing-m) 0;
}

.menu-row {
  display: flex;
  justify-content: space-between;
}

.menu-name {}

.menu-price {
  white-space: nowrap;
}

/* ==========================================
MENU完全リファクタリング実装↓
========================================== */

/* ==========================================
MENU ITEM
========================================== */

.menu-item{
	position:relative;
	max-width:320px;
}

.menu-item__link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.menu-item__thumb{
  position:relative;
  overflow:hidden;
}

.menu-item__thumb img{
  width:100%;
  display:block;
}

.menu-item__body{
	position:relative;
	padding-top:14px;
}

.menu-item__title{
	margin:0;
  font-size:18px;
  line-height:1.5;
}

.menu-item__desc{
  margin:0;
}

/* ==========================================
CARD VIEW
========================================== */

.menu-item--card{
  position:relative;
}

.menu-item--card .menu-item__link{
  display:block;
}

.menu-item--card .menu-item__thumb{
  margin-bottom:18px;
}

.menu-item--card .menu-item__thumb img{
  transition:
  transform .8s ease,
  opacity .4s ease;
}

.menu-item--card:hover .menu-item__thumb img{
  transform:scale(1.03);
}

.menu-item--card .menu-item__sub{
  display:block;
  margin-bottom:10px;

  font-size:11px;
  letter-spacing:.18em;
  opacity:.5;
  text-transform:uppercase;
}

.menu-item--card .menu-item__title{
  margin:0 0 12px;

  font-size:22px;
  line-height:1.4;
  letter-spacing:.08em;
}

.menu-item--card .menu-item__desc{
  font-size:13px;
  line-height:2;
  opacity:.75;
}

.menu-item__prices{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.menu-item__price{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.menu-item__add{
  flex:1;
}

.menu-item__time{
  white-space:nowrap;
  opacity:.6;
  font-size:12px;
}

.menu-item__value{
  white-space:nowrap;
  font-weight:500;
}

/* ==========================================
MENU IMAGE
========================================== */

.menu-item__thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
}

.menu-item__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ==========================================
GRID
========================================== */

.menu-grid{
  display:grid;
  grid-template-columns:
  repeat(3,minmax(0,1fr));

  gap:48px 32px;
}

@media(max-width:768px){

  .menu-grid{

    grid-template-columns:1fr;

    gap:40px;

  }

}

/* ==========================================
ACCORDION VIEW
========================================== */

.menu-item--accordion{
  border-bottom:
  1px solid rgba(255,255,255,.08);

  padding:18px 0;
}

.menu-item--accordion .menu-item__link{
  display:flex;
  gap:20px;
  align-items:center;
}

.menu-item--accordion .menu-item__thumb{
  width:120px;
  flex:none;
}

.menu-item--accordion .menu-item__body{
  flex:1;
}

.menu-item--accordion .menu-item__title{
  margin-bottom:6px;
  font-size:18px;
}

.menu-item__mini{
  font-size:11px;
  letter-spacing:.12em;
  opacity:.5;
}

/* =========================================
MENU ENTITY SLIDER
========================================= */

.menu-entity__slider{

position:relative;

overflow:hidden;

border-radius:24px;

}


.menu-entity__img{

position:relative;

aspect-ratio:4/5;

overflow:hidden;

background:#f5f5f5;

}


.menu-entity__img img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:
transform .8s ease,
opacity .6s ease;

}


.menu-entity:hover
.menu-entity__img img{

transform:scale(1.03);

}


/* pagination */

.menu-entity
.swiper-pagination{

bottom:16px !important;

}


.menu-entity
.swiper-pagination-bullet{

width:8px;

height:8px;

opacity:.4;

background:#fff;

transition:.3s;

}


.menu-entity
.swiper-pagination-bullet-active{

opacity:1;

transform:scale(1.2);

}

.menu-entity__slider .swiper-wrapper{
	display:flex;
}

.menu-entity__slider .swiper-slide{
	flex-shrink:0;
}


/* ==========================================
PARENT
========================================== */

.menu-parent{

margin-bottom:120px;

}

.menu-parent-image{

margin-bottom:40px;

}

.menu-parent-image img{

width:100%;
display:block;

}

.menu-parent-title{

font-size:clamp(36px,4vw,64px);
margin-bottom:20px;

}

.menu-parent-sub{

font-size:18px;
letter-spacing:.08em;

margin-bottom:24px;

opacity:.8;

}

.menu-parent-desc{

margin-bottom:24px;

line-height:2;

}

.menu-parent-contents{

line-height:2;

max-width:900px;

}

/* ==========================
GROUP
========================== */

.menu-group{
	margin:120px 0 60px;
}

.menu-group-content{
	text-align:center;
}

.menu-group-title{
	font-size:32px;
	letter-spacing:.08em;
	margin-bottom:10px;
}

.menu-group-sub{
	font-size:14px;
	color:#777;
}