/* ===== AdMoat — mobile optimization (calm redesign) ===== */
/* The DC runtime re-serializes inline styles as "prop: value" and converts
   hex to rgb(), so substring selectors below match that normalized form. */

@media (min-width: 769px) {
  .am-burger { display: none !important; }
}

@media (max-width: 768px) {

  /* --- header / hamburger --- */
  .am-burger { display: flex !important; }
  .am-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: rgba(250, 248, 244, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #E7E1D7;
    padding: 8px 20px 18px !important;
    box-shadow: 0 18px 30px rgba(33, 28, 23, 0.08);
  }
  .am-nav[data-open="false"] { display: none !important; }
  .am-nav a {
    padding: 15px 4px !important;
    font-size: 16px !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid #EFEAE0;
  }
  .am-nav a.am-cta {
    margin-top: 14px !important;
    border-bottom: none !important;
    border: 1px solid #211C17 !important;
    text-align: center !important;
    padding: 14px !important;
    font-size: 14px !important;
  }

  /* --- collapse multi-column layouts to a single column --- */
  .whyrow, .scope, .svcgrid, .casegrid, .postgrid, .panel { grid-template-columns: 1fr !important; }
  .panel { padding: 32px !important; gap: 24px !important; }
  .panel > div:last-child { text-align: left !important; }
  /* hero / two-column layouts (class-based — reliable regardless of how
     the runtime serializes inline style values) */
  .twocol {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  main > section:first-child .twocol {
    position: relative;
    isolation: isolate;
  }
  main > section:first-child .twocol::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 330px;
    height: 256px;
    top: 36px;
    right: 10px;
    background: url("assets/logo.png") center / contain no-repeat;
    filter: grayscale(1);
    opacity: 0.07;
    pointer-events: none;
  }
  .ctform { padding: 24px !important; }

  /* why cards: drop vertical dividers, keep a single horizontal rule */
  .whyc { padding: 32px 0 !important; border-right: none !important; }
  .scopec {
    padding: 30px 0 !important;
    border-right: none !important;
  }

  /* hero image: trim height */
  .heroimg { display: none !important; }

  /* --- horizontal padding on content wrappers --- */
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- vertical section padding --- */
  .sec { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="padding: 104px 0"],
  [style*="padding: 96px 0"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  [style*="padding-top: 84px"], [style*="padding-top: 80px"] {
    padding-top: 48px !important;
  }
  [style*="padding-bottom: 92px"], [style*="padding-bottom: 72px"] {
    padding-bottom: 48px !important;
  }

  /* service rows: tighten left/right padding */
  .srow { gap: 18px !important; padding: 26px 0 !important; }

  /* --- heading / display type scale-down --- */
  [style*="font-size: 46px"] { font-size: 33px !important; }
  [style*="font-size: 40px"] { font-size: 29px !important; }
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }
  [style*="font-size: 30px"] { font-size: 25px !important; }
  [style*="font-size: 28px"] { font-size: 24px !important; }
  [style*="font-size: 27px"] { font-size: 22px !important; }
  [style*="font-size: 26px"] { font-size: 22px !important; }

  /* --- top hero: 3 tag chips ("店舗集客に特化" 等) must stay on one line --- */
  [style*="gap: 24px"][style*="margin-top: 38px"],
  [style*="gap:24px"][style*="margin-top:38px"] {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  [style*="gap: 24px"][style*="margin-top: 38px"] .tag,
  [style*="gap:24px"][style*="margin-top:38px"] .tag {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  [style*="gap: 24px"][style*="margin-top: 38px"] .dot,
  [style*="gap:24px"][style*="margin-top:38px"] .dot {
    margin-right: 3px !important;
  }

  /* --- company page: label/value rows stack instead of a cramped 200px column --- */
  .rowgrid { grid-template-columns: 1fr !important; gap: 6px !important; }
}