/* ========= タブレット（～1000px） ========= */
@media (max-width: 1000px){
  :root { 
    --logo-top: calc(env(safe-area-inset-top) + 12px); /* ロゴの上余白 */
    --nav-top:  calc(env(safe-area-inset-top) + 20px); /* ナビの上余白 */
    --nav-h:    44px;                        /* ナビの高さ */
    --gutter: 10px;
  } 

  .t25-vertical{ padding-left: 10px; width:100%; flex-direction:column; gap:14px; }
  .t25-vcol{ writing-mode:horizontal-tb; text-orientation:initial; max-height:unset; overflow:visible; }

  /* ロゴ */
  .site-logo, .site-logo-mini{
    top: var(--logo-top);
    left: calc(env(safe-area-inset-left) + 12px);
    transition: transform .25s ease;
  }
  body.menu-open .site-logo{
    transform: translateY(calc(var(--nav-top) + var(--nav-h) + var(--logo-top)/2));
  }
  .site-logo img, .site-logo img{ width:75px; height:75px; }

  /* グリッド */
  .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  .br-pc { display: none; }
  .br-tb { display: inline; }
  .br-sp { display: none; }
}

/* ========= 小型タブレット～大型スマホ（～520px） ========= */
@media (max-width: 520px){
  /* ナビ：デフォ非表示→右から出現 */
  .top-nav{
    top: var(--nav-top);
    right: calc(env(safe-area-inset-right) + 12px + 44px + 8px);
    height: var(--nav-h);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(50px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .top-nav.active{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
  .top-nav a{ font-size:14px; padding:4px 8px; }

  /* 右上の矢印ボタン */
  .nav-back-btn{
    position: fixed;
    top: calc(env(safe-area-inset-top) + 20px);
    right: calc(env(safe-area-inset-right) + 10px);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 5px; border: none; border-radius: 50%;
    background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2);
    cursor: pointer; z-index: 1200;
  }
  .nav-back-btn svg{ width:20px; height:20px; transition: transform .3s ease; }
  .nav-back-btn.active svg{ transform: rotate(180deg); }
  .t25-vertical{ padding-left: 30px;}
  .site-logo img, .site-logo-mini img{ width:50px; height:50px; }
}

/* ========= タブレット（～480px） ========= */
@media (max-width: 480px){
  :root{ --countdown-lift: 120px; }

  .bottom-nav.lift{
    bottom: calc(env(safe-area-inset-bottom) + 12px + var(--countdown-lift));
  }

  .br-pc { display: none; }
  .br-tb { display: none; }
  .br-sp { display: inline; }

  /* グリッド：1列 */
  .grid-3{ grid-template-columns: 1fr; }
}

@media (max-width: 400px){
  .scroll-down{ bottom: 100px;}
}

@media (max-width: 375px){
  .top-nav a{ font-size:14px; padding:4px 4px; }
}