/* ==========================================================================
   DAILY Works / Responsive
   全ページの共通ブレイクポイントと読み順の切り替え。
   ========================================================================== */

/* --------------------------------------------------------------------------
   レスポンシブ：縮小ではなく読み順の変換
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --site-gutter: 24px;
  }

  .global-nav {
    gap: 20px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--ag-space-12);
  }

  .hero-copy{
    max-width: 720px;
  }

  .contact-layout {
    gap: var(--ag-space-12);
  }
}

@media (max-width: 820px) {
  body.menu-open {
    overflow: hidden;
  }

  .menu-button {
    display: block;
  }

  .global-nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    display: flex;
    overflow-y: auto;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 0;
    padding: var(--ag-space-6) var(--site-gutter) max(var(--ag-space-8), env(safe-area-inset-bottom));
    background: var(--ag-paper);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    transition:
      clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 160ms ease,
      visibility 0s linear 260ms;
  }

  .global-nav.is-open {
    clip-path: inset(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .global-nav > a:not(.nav-cta) {
    border-bottom: 1px solid var(--ag-line);
    padding-block: var(--ag-space-4);
    font-size: 16px;
  }

  .global-nav > a:not(.nav-cta)::after {
    display: none;
  }

  .ag-body .global-nav .nav-cta {
    min-height: 52px;
    margin-top: auto;
    justify-content: center;
  }

  .home-hero {
    padding-block: var(--ag-space-12) var(--ag-space-16);
  }

  .page-hero {
    padding-block: var(--ag-space-8) var(--ag-space-12);
  }

  .page-hero::before {
    inset: -40px 0;
    background-position: right bottom;
    background-size: auto 46%;
  }

  .breadcrumbs {
    margin-bottom: var(--ag-space-6);
  }

  .section {
    padding-block: var(--ag-space-16) var(--ag-space-20);
  }

  

  .case {
    padding-block: var(--ag-space-16) var(--ag-space-20);
  }

  /* 2列・3列は意味の順序を保ったまま縦積みへ */
  
  .review-steps,
  .agent-about__intro,
  .wild-app-layout,
  .case-gains,
  .contact-layout,
  .feature-row,
  .catalog-item,
  .cta-inner {
    grid-template-columns: 1fr;
  }

  .agent-about__intro {
    gap: var(--ag-space-10);
  }

  .agent-comparison-table thead th {
    padding-inline: var(--ag-space-2);
    font-size: 14px;
  }

  .agent-catalog-group {
    margin-top: var(--ag-space-12);
  }

  .agent-catalog-group--tailored {
    margin-top: var(--ag-space-16);
  }

  .agent-catalog-group__head h3 {
    font-size: 24px;
  }

  .agent-comparison-table .comparison-aspect-col {
    width: 27%;
  }

  .agent-comparison-table tbody th,
  .agent-comparison-table tbody td {
    padding-inline: var(--ag-space-3);
    font-size: 13px;
  }

  .case-process {
    grid-template-columns: 1fr;
  }

  .case-scene-layout,
  .case-workflow,
  .case-impact {
    grid-template-columns: 1fr;
  }

  .case-scene-layout {
    grid-template-areas:
      "copy"
      "visual";
    gap: var(--ag-space-8);
  }

  .case-scene-visual {
    min-height: 280px;
  }

  .case-workflow-node {
    min-height: 0;
  }

  .case-workflow-arrow {
    padding-block: var(--ag-space-3);
  }

  .case-workflow-arrow svg {
    transform: rotate(90deg);
  }

  .case-impact {
    gap: var(--ag-space-6);
    padding-inline: var(--ag-space-6);
  }

  .case-arrow {
    padding-block: var(--ag-space-2);
  }

  .case-arrow svg {
    transform: rotate(90deg);
  }

  /* 縦積みでは左右の内側余白をなくし、site-shell の余白へ揃える */
  
  .review-steps li,
  .case-gains div,
  .case-process section {
    padding-inline: 0;
  }

  /* 面の色が変わるブロックだけ、内側余白を残す */
  
  .case-process section.is-output{
    padding-inline: var(--ag-space-5);
  }

  
  .review-steps li + li,
  .case-gains div + div,
  .case-process section + section {
    border-top: 1px solid var(--ag-line-strong);
    border-left: 0;
  }
  

  /* 縦積みでは順序が罫線とラベルで伝わるため、横向きの矢印は出さない */
  .review-steps li::after {
    content: none;
  }

  
  .case-head {
    grid-template-columns: 1fr;
    gap: var(--ag-space-3);
  }

  
  .case-head > span {
    padding-top: 0;
  }

  .feature-row,
  .catalog-item {
    gap: var(--ag-space-3);
  }

  .catalog-item dd {
    padding-left: 50px;
  }

  .contact-guide {
    position: static;
  }

  .contact-form {
    border-top: 1px solid var(--ag-line-strong);
    padding-top: var(--ag-space-10);
  }

  .cta-inner {
    align-items: start;
    gap: var(--ag-space-8);
  }

  .footer-inner {
    display: grid;
    gap: var(--ag-space-8);
  }

  .footer-copyright {
    text-align: left;
  }
}

@media (max-width: 720px) {
  :root {
    --site-gutter: 20px;               /* Guide: モバイル左右20px */
    --header-height: 60px;
  }

  .hero-copy h1 {
    font-size: 40px;                   /* Guide: Display H1 モバイル40px */
  }

  .page-hero h1,
  .thanks-content h1 {
    font-size: 36px;                   /* Guide: Page H1 モバイル36px */
  }

  .section-head h2 {
    font-size: 32px;
  }

  .diagram .diagram__conclusion {
    margin-top: var(--ag-space-8);
    padding-top: var(--ag-space-6);
    font-size: 18px;
    line-height: var(--ag-leading-heading);
  }

  .case-head h2 {
    font-size: 28px;
  }

  .feature-row dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .hero-actions,
  .form-submit,
  .site-cta .ag-button-row {
    display: grid;
    width: 100%;
  }

  .hero-actions .ag-button,
  .site-cta .ag-button,
  .form-submit .ag-button {
    width: 100%;
    justify-content: center;
  }

  .cta-inner {
    border-left-width: 3px;
    padding-left: var(--ag-space-5);
  }

  .footer-copyright {
    white-space: normal;
  }
  .hidden-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}