@charset "UTF-8";
/* ==========================================================================
   麩太 コーポレートサイト トップページ  responsive.css
   ブレイクポイント:
     - 1024px以下 : タブレット（商品グリッド調整・余白縮小）
     - 860px以下  : ハンバーガーメニューに切替（スマホ対応の主要部分）
     - 600px以下  : スマホ最適化（1カラム化・フォントサイズ調整）
   ========================================================================== */

/* ---------------------------------------------------------------------
   〜1024px : タブレット
   ------------------------------------------------------------------- */
@media (max-width: 1024px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .about-grid{ grid-template-columns: 1fr; }
  .about-media img{ aspect-ratio: 16/9; }
  .contact-panel{ grid-template-columns: 1fr; }
  .contact-actions{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    padding-top: 1.6rem;
  }
}

/* ---------------------------------------------------------------------
   〜860px : ハンバーガーメニューへ切替
   ------------------------------------------------------------------- */
@media (max-width: 860px){
  :root{ --header-h: 68px; }

  .nav-toggle{ display: flex; }

  .gnav{
    position: fixed;
    inset: var(--header-h) 0 0 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem clamp(1.25rem, 6vw, 2.5rem);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
  }
  .gnav.is-open{ transform: translateX(0); }

  .gnav a{
    padding: 1.1em 0.2em;
    border-bottom: 1px solid var(--color-line);
    font-size: 1.05rem;
    width: 100%;
  }
  .gnav a::after{ display: none; }

  .gnav .header-cta{
    margin-top: 1.6rem;
    flex-direction: column;
    align-items: stretch;
  }
  .gnav .header-cta .btn{ width: 100%; }

  .commitment{ grid-template-columns: 1fr; text-align: center; }
  .commitment-seal{ margin: 0 auto; }
  .commitment blockquote{ text-align: left; }

  .timeline{ grid-template-columns: 1fr; gap: 0; }
  .timeline::before{ left: 7px; top: 0; bottom: 0; right: auto; width: 1px; height: auto; }
  .timeline-item{ padding: 0 0 2.2rem 2.6rem; }
  .timeline-item::before{ top: 4px; left: 0; }
}

/* ---------------------------------------------------------------------
   〜600px : スマホ
   ------------------------------------------------------------------- */
@media (max-width: 600px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .card__body{ padding: 1rem; }
  .card__title{ font-size: 1rem; }
  .card__desc{ display: none; }

  .about-facts{ grid-template-columns: repeat(3, auto); gap: 1rem 1.2rem; }

  .hero{ min-height: 92vh; align-items: flex-end; }
  .hero__scroll{ display: none; }

  .news-item{ grid-template-columns: 1fr; gap: 0.4rem; }
  .news-item time{ order: 1; }
  .news-item .tag{ order: 2; }
  .news-item .title{ order: 3; }

  .section{ padding: 3rem 0; }
}

@media (max-width: 380px){
  .product-grid{ grid-template-columns: 1fr; }
  .about-facts{ grid-template-columns: repeat(3, 1fr); }
}