/* =========================================================
   responsive_v26.css
   Scope: v26 responsive rules for new pages
========================================================= */

/* ---------------------------------------------------------
   Mobile / Tablet
--------------------------------------------------------- */
@media (max-width: 900px) {

  /* Make the 1000px shell fluid */
  .container {
    width: auto;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* Header inner becomes fluid */
  .header_box2 {
    width: auto;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* Header: short title only (avoid wrapping in top bar) */
  .header_pc { display: none; }
  .header_sp { display: inline; }

  /* nav-toggle: visually centered in the logo band (device-stable) */
  header { position: relative; }

  header .nav-toggle {
    position: absolute;
    right: 12px;

    top: 62px;
    transform: translateY(-50%);

    /* visual center tweak */
    padding-top: 7px;
    padding-bottom: 9px;

    margin: 0;
    z-index: 10002;
  }

  /* Off-canvas left nav */
  #left-nav {
    position: fixed;
    top: 0;
    left: 0;

    width: min(86vw, 320px);
    height: 100dvh;

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    transform: translateX(-105%);
    transition: transform 0.2s ease;

    z-index: 10001;
    margin: 0;

    box-sizing: border-box;

    /* Edge breathing + scrollbar safety + end padding */
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 5px;
    padding-bottom: 12px;
  }

  @supports not (height: 100dvh) {
    #left-nav { height: 100vh; }
  }

  /* Keep borders visible and widths predictable on mobile */
  #left-nav .navi_title,
  #left-nav .navi_sns {
    width: 100%;
    box-sizing: border-box;
  }

  /* Backdrop */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10000;
  }

  /* When nav is open (site_v25.js should set aria-expanded=true) */
  .nav-toggle[aria-expanded="true"] + .nav-backdrop {
    display: block;
  }

  /* When nav is open (site_v25.js should toggle .nav-open on body) */
  .nav-open #left-nav {
    transform: translateX(0);
  }

  /* Prevent background scroll while nav is open */
  body.nav-open {
    overflow: hidden;
    height: 100dvh;
  }

  @supports not (height: 100dvh) {
    body.nav-open { height: 100vh; }
  }

  /* Main column full width on mobile */
  main { margin-left: 0; }
}

/* ---------------------------------------------------------
   PC
--------------------------------------------------------- */
@media (min-width: 901px) {
  .nav-toggle { display: none; }
  .nav-backdrop { display: none; }

  body.catalog-page.catalog--embed {
    --gap: 16px;
  }
}

/* ---------------------------------------------------------
   Small screens
--------------------------------------------------------- */
@media (max-width: 768px) {
  .header_box2 {
    min-height: 5em;
    padding: 0 12px;
    align-items: center;
  }

  .header_box2 .box_imageLeft {
    max-width: 240px;
    height: auto;
  }

  .header_box2 .box_Right { display: none; }
}

/* ---------------------------------------------------------
   SNS icons: keep 4 in a row even on small phones
--------------------------------------------------------- */
@media (max-width: 520px) {
  #left-nav .box_sns {
    grid-template-columns: repeat(4, minmax(46px, 1fr));
  }
}