/*-------------------------------------------------------------*/
/* トップページヘッダー、サイドメニュー*/
/*-------------------------------------------------------------*/

:root{
  --bar-w-top: 26px;   /* 上の長さ */
  --bar-w-mid: 16px;   /* 中央の長さ */
  --bar-w-bot: 20px;   /* 下の長さ */
  --bar-h: 2px;
  --gap: 7px;
  --dur: .25s;
}

/* 横スクロール抑止 */
html { overflow-x: clip; }
@supports not (overflow-x: clip){ body { overflow-x: hidden; } }

/* ===============================
   PC用レイアウト
   =============================== */
@media (min-width:960px){

  /* 縦レール */
  .menu-rail{
    position: fixed;
    top: 0;
    right: 0;
    width: 56px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    border-left:1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    z-index: 1000;
    transition: transform .35s ease-out, opacity .35s linear;
    transform: translateX(0);
    opacity: 1;
  }
  .menu-rail.hidden{
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }

  /* ハンバーガーボタン本体（全体がクリック可能） */
  .menu-rail .menu-btn{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: #111;
  }

  /* --- ハンバーガー3本：非対称デザイン --- */
  .menu-btn .bar,
  .menu-btn .bar::before,
  .menu-btn .bar::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    height: var(--bar-h);
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--dur) ease, opacity var(--dur) ease, width var(--dur) ease, left var(--dur) ease;
    pointer-events: none;
  }

  /* 中央の線（最短・中央寄せ） */
  .menu-btn .bar{
    width: var(--bar-w-mid);
    transform: translate(-50%, -50%);               /* 中央 */
  }

  /* 上の線（最長・左寄せ気味） */
  .menu-btn .bar::before{
    width: var(--bar-w-top);
    transform: translate(calc(-50% - 4px), calc(-50% - var(--gap))); /* 少し左へ */
  }

  /* 下の線（やや短い・右寄せ気味） */
  .menu-btn .bar::after{
    width: var(--bar-w-bot);
    transform: translate(calc(-50% - 1px), calc(-50% + var(--gap)));  /* 少し右へ */
  }

  /* アクティブ時：X化は均一幅で中央に */
  .menu-btn.active .bar{ opacity: 0; }
  .menu-btn.active .bar::before,
  .menu-btn.active .bar::after{
    width: var(--bar-w-top);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .menu-btn.active .bar::after{
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* レール中央の文字（90度回転） */
  .menu-rail-label{
    margin-top: auto;
    margin-bottom: auto;
    transform: rotate(90deg);
    font-size: 12px;
    letter-spacing: 2px;
    white-space: nowrap;
    color: #111;
    user-select: none;
    pointer-events: none;
  }

  /* ヘッダー（右からスライド） */
  .RUHeaderNaviFixed{
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    z-index: 500;
    transform: translateX(100vw);
    opacity: 0;
    pointer-events: none;
    transition: transform .5s ease-out, opacity .5s linear;
  }
  .RUHeaderNaviFixed.active{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===============================
   SP用（非表示）
   =============================== */
@media (max-width:960px){
  .menu-rail{ display:none; }
  .menu-btn{ display:none; }
}


/* ===== レイアウトとカバー（既存維持） ===== */
.bg-video{width:100%;height:100vh;height:100dvh;display:flex;}
.mvLeft,.mvRight{width:50%;height:100%;position:relative;overflow:hidden;}
.mvLeft{container-type:size;}
.mvLeft iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100cqw,calc(100cqh*4/5));height:max(100cqh,calc(100cqw*5/4));
  pointer-events:none;z-index:1;
}

/* ===== 先出しポスター ===== */
.mvPoster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;opacity:1;transition:opacity .35s ease;
}
.mvLeft.is-ready .mvPoster{opacity:0;}

/* ===== オーバーレイ ===== */
.mvLeft::before{
  content:"";position:absolute;inset:0;background:rgba(35,23,22,.1);
  pointer-events:none;opacity:0;z-index:2;
}

/* ===== 中央ロゴ（初期黒→所定時刻で白） ===== */
.mvLeft::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:45%;aspect-ratio:3/1;
  background:url("/client_info/UKAI2022/view/userweb/images/_RESTAURANT/svg/restaurantukaiLOGO.svg") no-repeat center/contain;
  pointer-events:none;opacity:1;z-index:3;
}

/* ===== 右側 ===== */
.RU_logo{position:absolute;top:5%;left:7%;height:30%;z-index:4;display:flex;align-items:flex-start;}
.RU_logo img{height:100%;width:auto;display:block;max-width:70%;}
.RU_mvIMG{position:absolute;left:56px;right:56px;bottom:0;height:63%;display:flex;flex-direction:column;gap:0;z-index:3;}
.imgBox{flex:1 1 0;width:48%;min-height:140px;background-size:cover;background-position:center;background-repeat:no-repeat;}
.img1{margin:0 auto 0 0;}
.img2{margin:0 0 0 auto;}

/* ===== アニメーション ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeUpIframe{from{opacity:0;transform:translate(-50%,-50%) translateY(24px);}to{opacity:1;transform:translate(-50%,-50%) translateY(0);}}
@keyframes fadeUpOverlay{from{opacity:0;}to{opacity:1;}}
@keyframes logoSwap{to{background-image:url("/client_info/UKAI2022/view/userweb/images/_RESTAURANT/svg/restaurantukaiLOGOwh.svg");}}

/* ===== PC：開始時刻調整（0.5s前倒し） ===== */
@media (min-width:960px){
  .bg-video{--leftStart:2.9s;}
  .RU_logo,.RU_mvIMG .imgBox:first-child,.RU_mvIMG .imgBox:last-child,.mvLeft iframe{opacity:0;will-change:opacity,transform;}
  .RU_logo{animation:fadeUp .8s ease forwards .9s;}
  .RU_mvIMG .imgBox:first-child{animation:fadeUp .8s ease forwards 1.3s;}
  .RU_mvIMG .imgBox:last-child{animation:fadeUp .8s ease forwards 1.9s;}
  .RU_mvIMG .img2{margin-top:-30%;}
  .mvLeft iframe{animation:fadeUpIframe .8s ease forwards var(--leftStart);}
  .mvLeft::before{animation:fadeUpOverlay .8s ease forwards var(--leftStart);}
  .mvLeft::after{animation:logoSwap 0s linear var(--leftStart) forwards;}
}

/* ===== SP：動画・オーバーレイ・ロゴ切替 同期（1秒後） ===== */
@media (max-width:960px){
  .bg-video{display:block;width:100%;height:auto;--startDelay:1.5s;}
  .mvLeft,.mvRight{position:relative;width:100%;height:auto;overflow:hidden;}
  .mvLeft{margin-top:90px;height:calc(100vw*7/6);container-type:size;}
  .mvLeft iframe{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:max(100cqw,calc(100cqh*4/5));height:max(100cqh,calc(100cqw*5/4));
    pointer-events:none;z-index:1;opacity:0;will-change:opacity,transform;
    animation:fadeUpIframe .8s ease forwards var(--startDelay);
  }
  .mvLeft::before{opacity:0;animation:fadeUpOverlay .8s ease forwards var(--startDelay);}
  .mvLeft::after{
    width:60%;max-width:420px;aspect-ratio:3/1;
    background:url("/client_info/UKAI2022/view/userweb/images/_RESTAURANT/svg/restaurantukaiLOGO.svg") no-repeat center/contain;
    animation:logoSwap 0s linear var(--startDelay) forwards;
  }
  .RU_logo{position:relative;top:auto;left:auto;display:flex;justify-content:center;height:auto;max-width:90%;margin:30px auto 40px 0;}
  .RU_logo img{width:90%;height:auto;display:block;}
  .RU_mvIMG{position:relative;left:auto;right:auto;bottom:auto;margin-top:0;padding:0 10px;display:flex;flex-direction:column;gap:0;}
  .RU_mvIMG .imgBox{position:relative;width:48%;height:auto;min-height:0;flex:0 0 auto;}
  .RU_mvIMG .imgBox::before{content:"";display:block;padding-top:125%;}
  .RU_mvIMG .img1{margin:0 auto 0 0;}
  .RU_mvIMG .img2{margin:-40% 0 0 auto;}
}

/* 再掲：キーフレーム（SP内で再定義しない場合） */
@keyframes fadeUpIframe{from{opacity:0;transform:translate(-50%,-50%) translateY(24px);}to{opacity:1;transform:translate(-50%,-50%) translateY(0);}}
@keyframes fadeUpOverlay{from{opacity:0;}to{opacity:1;}}
@keyframes logoSwap{to{background-image:url("/client_info/UKAI2022/view/userweb/images/_RESTAURANT/svg/restaurantukaiLOGOwh.svg");}}

@media (max-width:960px){.RUbrown.-cat{margin-top:50px;}}


/* 新商品 */
/*-------------------------------------------------------------*/
.na-carousel {
  --na-gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px;
}

.na-carousel .na-carousel__head { text-align: center; margin-bottom: 28px; }
.na-carousel .na-carousel__lead { max-width: 920px; margin: 0 auto; color: #333; }

/* PCではグリッド表示 */
.na-carousel .na-carousel__viewport {
  overflow: visible;
}
.na-carousel .na-carousel__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--na-gap);
}

/* カード */
.na-carousel .na-carousel__card {
  position: relative;
}
.na-carousel .na-carousel__fig { position: relative; overflow: hidden; }
.na-carousel .na-carousel__img {
  width: 90%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 0 0 auto;
}

.na-carousel .na-carousel__badge {
  position: absolute;
  left: 0;
  bottom: 30px;
  font-size: 12px;
  background: #fff;
  padding: 6px 10px;
}

.na-carousel .na-carousel__body {
  padding: 5px 10px 5px 0;
  margin-top: -25px;
  background: #fff;
  position: relative;
  z-index: 5;
  width: 80%;
}
.na-carousel .na-carousel__name { font-size: 16px; margin: 0 0 6px; }
.na-carousel .na-carousel__price { font-size: 14px; margin: 8px 0 0; }

/* スマホでは横スクロール */
@media (max-width: 960px) {
  .na-carousel { --na-peek: 48px; --na-gap: 16px; }
  .na-carousel .na-carousel__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: var(--na-peek);
    scrollbar-width: none;
  }
  .na-carousel .na-carousel__viewport::-webkit-scrollbar { display: none; }
  .na-carousel .na-carousel__track {
    display: flex;
    gap: var(--na-gap);
  }
  .na-carousel .na-carousel__card {
    flex: 0 0 calc(100% - var(--na-peek));
  }
}

/* リードコピー */
/*-------------------------------------------------------------*/
.RU_leadcopyZone {
  position: relative;
  height: 100%;
  overflow: hidden;
}
@media screen and (max-width: 960px){
	.RU_leadcopyZone {
	  height: 100%;
	}
}

/* 背景画像 */
.RU_leadcopyZone .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -2;
  transition: background-image 0.8s ease;
}

/* SP（背景ぼけ対策） */
@media screen and (max-width: 960px){
  .RU_leadcopyZone .background {
    background-attachment: scroll;   /* 固定を解除 */
    background-size: cover;          /* 必要に応じて contain も可 */
    background-position: center;
    transform: translateZ(0);        /* レンダリングぼけ防止 */
    image-rendering: -webkit-optimize-contrast; /* iOS対策 */
  }
}

/* 半透明のレイヤー */
.RU_leadcopyZone .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(35, 23, 22, 0.7);
  z-index: -1;
}

/* テキストボックス */
.RU_leadcopyZone .text-box {
  position: relative;
  height: 100%;
  overflow-y: auto;
  color: #fff;
  line-height: 2;
  margin: 0 0 0 auto;
  padding: 10vh 0;
  padding: 10dvh 0;

  /* スクロールバー共通（Firefox対応） */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
@media screen and (max-width: 960px){
	.RU_leadcopyZone .text-box {
		margin: 0 3vw;
		padding: 10vh 5vw;
		padding: 10dvh 5vw;
	}
}



/* スクロールバー（Chrome / Safari用） */
.RU_leadcopyZone .text-box::-webkit-scrollbar {
  width: 6px;
}

.RU_leadcopyZone .text-box::-webkit-scrollbar-track {
  background: transparent;
}

.RU_leadcopyZone .text-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  transition: background 0.3s;
}

.RU_leadcopyZone .text-box::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.8);
}