/* 提供メニュー：写真がある品をカテゴリの上段に中央揃えで並べる（style4.css の .mn-* を補う） */
.mn-featured { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 36px; margin-bottom: 30px; }
.mn-featured:last-child { margin-bottom: 0; }
.mn-featured .mn-item-photo { flex: 0 1 calc(50% - 18px); max-width: calc(50% - 18px); }
.mn-featured-single { justify-content: center; }

/* メニュー画面ではPC・SPとも、ヘッダーを最初から表示して上部へ常時固定する。 */
.site-header,
.site-header.is-hidden,
.site-header.is-peek {
  position: sticky;
  top: 0;
  right: auto;
  left: auto;
  transform: none !important;
}
.site-header { transition: box-shadow .3s; }

/* 商品名と価格の中央を結ぶ位置に点線を揃える。 */
.mn-item-heading { align-items: center; }

/* SET DRINK のバッジと説明文を横並びにし、説明文の br による改行を保ちます。 */
.mn-page .mn-set-drink-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.mn-page .mn-set-drink-head > .ribbon { flex-shrink: 0; }
.mn-page .mn-set-drink-head > p { margin: 0; }
.mn-page .mn-description { white-space: normal; }

/* 中間幅では商品を１列にし、写真と本文の横並びを保ちます。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .mn-featured .mn-item-photo { flex-basis: 100%; max-width: 100%; }
}

/* 英語と日本語の見出し間の余白と行高を揃えます。 */
.mn-category-ja { display: block; line-height: 1.4; }
.mn-category-script { margin-bottom: 6px; }

/* PCのカテゴリ境界の上下を揃え、冒頭と見出し下の余白を整えます。 */
@media (min-width: 768px) {
  .mn-hero { padding-bottom: 8px; }
  .mn-category { padding-block: 28px; }
  .mn-category .pt-h2 { margin-bottom: 16px; line-height: 1.2; }
  .mn-group-note-intro { line-height: 1.6; margin-bottom: 22px; }
}

@media (max-width: 767px) {
  .mn-page .mn-set-drink-head { flex-direction: column; align-items: flex-start; }
  .mn-category { padding-block: 32px; }
  .mn-category .pt-h2 { margin-bottom: 24px; }
  .mn-featured { gap: 28px; }
  .mn-featured .mn-item-photo, .mn-featured-single .mn-item-photo { flex-basis: 100%; max-width: 100%; }
}

/* 細い背景植物はメニュー本体より後ろのレイヤーへ移し、紙面には重ねない。 */
.plant-growth {
  z-index: -1;
  -webkit-mask-image: none;
  mask-image: none;
}

/* indexヒーローのグラデーションとSVG装飾一式を、画像を使わず固定背景として再現する。 */
.mn-fixed-hero-bg {
  position: fixed;
  z-index: 0;
  inset: 76px 0 0;
  overflow: hidden;
  background: linear-gradient(90deg, #A8D6F0 0%, #BFE0F4 40%, #D6E7EC 62%, #EAEBDF 80%, #F2ECDB 92%, #F2ECDB 100%);
  pointer-events: none;
}
.mn-page { z-index: 1; background: transparent; }
.mn-page::before { display: none; }
.mn-fixed-hero-bg .mn-bg-palm { top: -30px; left: -40px; }
.mn-bg-monstera { width: min(16vw,150px); height: min(16vw,150px); opacity: .6; }
.mn-bg-monstera-l { left: -20px; bottom: 90px; transform: rotate(28deg); }
.mn-bg-monstera-r { right: -20px; bottom: 90px; transform: scaleX(-1) rotate(28deg); }
.mn-bg-hibiscus { filter: drop-shadow(0 4px 6px rgba(0,0,0,.16)); }
.mn-bg-hibiscus-1 { top: 36%; left: 2%; width: 84px; height: 84px; transform: rotate(-16deg); }
.mn-bg-hibiscus-2 { top: 30%; right: 5%; width: 64px; height: 64px; transform: rotate(18deg); }
.mn-bg-hibiscus-3 { top: 52%; left: 12%; width: 54px; height: 54px; transform: rotate(24deg); }
.mn-bg-hibiscus-4 { top: 49%; right: 13%; width: 46px; height: 46px; transform: rotate(-22deg); }
.mn-bg-hibiscus-5 { bottom: 26px; left: 4%; width: 96px; height: 96px; transform: rotate(-12deg); }
.mn-bg-hibiscus-6 { right: 5%; bottom: 40px; width: 72px; height: 72px; transform: rotate(16deg); }
.mn-bg-sparkle { width: 26px; height: 26px; }
.mn-bg-sparkle-1 { top: 22%; left: 24%; }
.mn-bg-sparkle-2 { top: 52%; left: 18%; width: 18px; height: 18px; }
.mn-bg-sparkle-3 { top: 18%; right: 24%; width: 20px; height: 20px; }
.mn-fixed-hero-bg .mn-bg-waves { left: -6%; bottom: 0; width: 62%; height: 46%; }

/* 上部のヤシ葉は固定せず、下部と同じように紙面の左右角へ2枚配置する。 */
@media (min-width: 768px) {
  .mn-sheet > .mn-palm-tl, .mn-sheet > .mn-palm-tr {
    position: absolute;
    top: -28px;
    width: clamp(100px, 20vw, 260px);
    height: clamp(100px, 20vw, 260px);
  }
  .mn-sheet > .mn-palm-tl { left: -28px; }
  .mn-sheet > .mn-palm-tr { right: -28px; }
}

/* 最後の商品と下部操作ボタンの間に、装飾が窮屈にならない余白を取る。 */
.mn-actions { padding-top: 96px; }

/* 「メニュー名 …… 金額」の点線リーダーを紙面上で見える濃さに戻す。 */
.mn-leader { border-bottom: 2px dotted rgba(72,49,27,.34); }

@media (max-width: 767px) {
  .mn-fixed-hero-bg { inset: 0; }
  .mn-fixed-hero-bg .mn-bg-palm { top: -20px; left: -50px; width: 200px; height: 200px; opacity: .8; }
  .mn-actions { padding-top: 64px; }
}

/* 提供メニュー → マラサダドーナツ子ページへの導線（ヒーロー下） */
.mn-malasada-link { margin: 18px 0 0; text-align: center; }
.mn-malasada-link .button { gap: 8px; }
.mn-malasada-link .hibiscus { width: 22px; height: 22px; color: #fff; }