/* ── カルーセル本体 ── */
    .embla {
      overflow: hidden;
      width: 100%;
      max-width: 720px;
      border-radius: 6px;
    }

    .embla__container {
      display: flex;
      gap: 16px;
    }

    .embla__slide {
      flex: 0 0 100%;
      min-width: 0;
      position: relative;
    }

    .slide-inner {
      height: 360px;
      /*border-radius: 16px;*/
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      font-size: 1.1rem;
      font-weight: 600;
      position: relative;
      overflow: hidden;
    }

    .slide-inner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: inherit;
      filter: brightness(0.6);
      z-index: 0;
    }

    .slide-inner > * { position: relative; z-index: 1; }

    .slide-num {
      font-size: 5rem;
      font-weight: 600;
      opacity: 0.15;
      position: absolute;
      bottom: -0.5rem;
      right: 1rem;
      line-height: 1;
      z-index: 1;
    }

    .slide-1 { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
    .slide-2 { background: linear-gradient(135deg, #1a0a2e, #2d1b69, #11998e); }
    .slide-3 { background: linear-gradient(135deg, #0a1628, #1e3a5f, #c0392b); }
    .slide-4 { background: linear-gradient(135deg, #0d1b2a, #1b4332, #40916c); }
    .slide-5 { background: linear-gradient(135deg, #1a1a1a, #3d2645, #e91e63); }

    /* ── コントロール ── */
    .controls {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-top: 1.5rem;
      flex-wrap: wrap;

    }

    #foodMenu .btn {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      border: 1px solid #333;
      background: #1a1a1a;
      color: #fff;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }

    #foodMenu .btn:hover { background: #2a2a2a; border-color: #555; }
    #foodMenu .btn:active { transform: scale(0.92); }
    #foodMenu .btn:disabled { opacity: 0.3; cursor: default; }

    /* ── ドット ── */
    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
width: 29px;
    height: 48px;
    border-radius: 8%;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.25s, transform 0.25s;
    }

    .dot.is-selected {
      background: red;
      transform: scale(1.3);
    }

    /* ── スライド内テキスト ── */
    .slide-label {
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }

    .slide-title {
      font-size: 1.8rem;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    
    
/*==== flip =============================================*/
.flip-scene {
    perspective: 1000px;
    width: 100%;
}

.flip-card {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4,0.2,0.2,1);
}

.flip-card.flipped {
    transform: rotateY(180deg);
}

.flip-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 100%;
}

.flip-face.back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.flip-face.front {
    position: relative; /* frontは通常フローで高さを決める */
}

.flip-btn.flipped .noFilp{ display: none; }
.flip-btn:not(.flipped) .flippedSw{ display: none; }
.flip-btn{
    position: absolute;
    right: 1rem;
    top: 2.5rem;
    width: 7rem;
    z-index: 80;
    background: transparent;
    border: none;
}
/*==== //flip =============================================*/