/* =====================
MENU PAGE
===================== */


.menu-page{
background:#181818;
padding:120px 40px;
}

/* タイトル */

.menu-title{
color:#c9a46a;
font-size:32px;
letter-spacing:4px;
text-align:center;
margin-bottom:80px;
}


/*ヒーロー*/
.menu-hero {
  position: relative;
  height: 35vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:#000;
}

.menu-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display:block;
}

.menu-hero__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.menu-hero__inner{
  position:relative;
  z-index:2;
  color:#fff;
  text-align: center;
}

.menu-hero__sub{
  letter-spacing:6px;
  font-size:clamp(16px,2vw,20px);
  color:#c9a46a;
  margin-bottom:10px;
}

.menu-hero__title{
  margin: 0 0 25px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.4;
}

.menu-hero__text{
  margin: 0 0 30px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 2.2;
}

@media (max-width: 768px) {
  .menu-hero {
    min-height: 75svh;  /* ←これ重要 */
    background-position: center center;
  }
}

.menu-hero-title{
  margin: 0 0 25px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.4;
}

.menu-hero-text{
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 2.2;
}



/* カテゴリ */

.menu-category-block{
max-width:960px;
margin:0 auto 120px;
}

.menu-category-title{
color:#c9a46a;
font-size:26px;
letter-spacing:4px;
margin-bottom:2.5em;
text-align:center;
}

@media (max-width:1024px){
.menu-category-title{
font-size:22px;
}
}

@media (max-width:768px){
.menu-category-title{
font-size:20px;
letter-spacing:2px;
margin-bottom:2em;
}
}

/* グリッド */

.menu-page-grid{
max-width:960px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
}

/* タブレット */
@media (max-width:1024px){
.menu-page-grid{
grid-template-columns:repeat(2,1fr);
gap:50px;
}
}

/* スマホ */
@media (max-width:768px){
.menu-page-grid{
grid-template-columns:1fr;
gap:40px;
}
}

/* カード */

.menu-card{
text-align:center;
}

.menu-card-name{
color:#c9a46a;
margin-top:8px;
font-size:18px;
margin-bottom:10px;
}



/*4_28_足したやつ(テスト)*/
.menu-card-title-wrap {
    position: relative;
}

.menu-page-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  height: 28px;
  padding: 0 10px;

  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.menu-card-image {
  width: 100%;
  max-width: 230px;
  height: 230px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.menu-page-label-limited {
  background: #3f3552f2;
}

.menu-page-label-recommend {
  background: #2b3833;
}

.menu-page-label-new {
  background: #b08a4a;
}
/*4_28_足したやつ(テスト)*/
.sp-only {
  display: none;
}

/*英語のmenuページのカードのタイトル部分の調整*/
.menu-page-en .menu-card-name {
  color: #c9a46a;
  margin-top: 8px;
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  padding-top: 10px;
}

/* タブレット */
@media (max-width:1024px){
.menu-card-name{
font-size:1rem; /* 16px */
}
}

/* スマホ */
@media (max-width:768px){
.menu-card-name{
font-size:17px;
}
.menu-page {
padding: 80px 40px!important;
}
.menu-card-description {
padding: 0 20px!important;
}
.menu-title{
margin-top: 0!important;
}
p.menu-sub-title {
margin-bottom: 0;
}
.menu-card-image {
max-width: 220px;
}
.sp-only {
display: inline;
}
.menu-category-block {
margin: 0 auto 80px;
}
}


.menu-card-price{
margin-top:6px;
font-size:16px;
color:#ddd;
}

.menu-card-description{
font-size:13px;
color:#aaa;
line-height:1.6;
margin-top:8px;
}

p.menu-sub-title {
text-align: center;
color: #c9a46a;
}

.menu-category-en {
  display: block;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #c8a86b;
  margin-bottom: 6px;
}

.menu-category-ja {
    display: block;
    font-size: 24px;
}

.footer {
    background: linear-gradient(
        180deg,
        #101010 0%,
        #181818 100%
    );
}