/*
COYOTE Commerce Suite LP Mobile Safeguard CSS v1.0.0
対象: 固定ページ「COYOTE Commerce Suite」 / .coyote-commerce-suite-v2
目的: スマホ幅での横はみ出し、過密カード、長文ボタン、横長プレースホルダー崩れを抑制
余白管理:
- セクション内余白: padding
- カード間距離: gap
- 個別要素の外側余白: 原則 margin ではなく gap
*/

.coyote-commerce-suite-v2,
.coyote-commerce-suite-v2 * {
  box-sizing: border-box;
}

.coyote-commerce-suite-v2 {
  overflow-x: clip;
}

.coyote-commerce-suite-v2 img,
.coyote-commerce-suite-v2 svg,
.coyote-commerce-suite-v2 video,
.coyote-commerce-suite-v2 iframe {
  max-width: 100%;
  height: auto;
}

.coyote-commerce-suite-v2 a,
.coyote-commerce-suite-v2 strong,
.coyote-commerce-suite-v2 span,
.coyote-commerce-suite-v2 p,
.coyote-commerce-suite-v2 h1,
.coyote-commerce-suite-v2 h2,
.coyote-commerce-suite-v2 h3,
.coyote-commerce-suite-v2 li {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 767px) {
  .coyote-commerce-suite-v2 .coyote-product-anchor {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 10px 14px;
    scroll-snap-type: x proximity;
  }

  .coyote-commerce-suite-v2 .coyote-product-anchor a {
    flex: 0 0 auto;
    min-width: max-content;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .coyote-commerce-suite-v1__hero,
  .coyote-commerce-suite-v1__section,
  .coyote-commerce-suite-v1__section--paper,
  .coyote-commerce-suite-v1__section--dark {
    padding-inline: 16px;
  }

  .coyote-commerce-suite-v1__hero-inner,
  .coyote-commerce-suite-v1__inner {
    width: 100%;
    max-width: 100%;
  }

  .coyote-commerce-suite-v1__hero-inner,
  .coyote-commerce-suite-v1__split,
  .coyote-commerce-suite-v1__position-split,
  .coyote-commerce-suite-v1__billing-layout,
  .coyote-commerce-suite-v1__showcase,
  .coyote-commerce-suite-v1__visual,
  .coyote-commerce-suite-v1__visual-grid,
  .coyote-commerce-suite-v1__feature-visuals,
  .coyote-commerce-suite-v1__compare-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .coyote-commerce-suite-v1__flow-grid,
  .coyote-commerce-suite-v1__card-grid,
  .coyote-commerce-suite-v1__control-grid,
  .coyote-commerce-suite-v1__billing-points,
  .coyote-commerce-suite-v1__screen-list,
  .coyote-commerce-suite-v1__position-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .coyote-commerce-suite-v1__actions,
  .coyote-commerce-suite-v1__actions--center {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .coyote-commerce-suite-v1__button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
  }

  .coyote-commerce-suite-v1__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
  }

  .coyote-commerce-suite-v1__tags li {
    max-width: 100%;
  }

  .coyote-commerce-suite-v1__visual-frame,
  .coyote-commerce-suite-v1__showcase-frame,
  .coyote-commerce-suite-v1__mock-panel,
  .coyote-commerce-suite-v1__billing-board,
  .coyote-commerce-suite-v1__product-map,
  .coyote-commerce-suite-v1__large-visual,
  .coyote-commerce-suite-v1__mini-visual,
  .coyote-commerce-suite-v1__compare-card,
  .coyote-commerce-suite-v1__position-copy,
  .coyote-commerce-suite-v1__position-list,
  .coyote-commerce-suite-v1__screen-list,
  .coyote-commerce-suite-v1__control-grid article,
  .coyote-commerce-suite-v1__card-grid article,
  .coyote-commerce-suite-v1__flow-grid article {
    min-width: 0;
    width: 100%;
  }

  .coyote-commerce-suite-v1__card-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
  }

  .coyote-commerce-suite-v1__card-head h3 {
    min-width: 0;
  }

  .coyote-commerce-suite-v1__screen-list div,
  .coyote-commerce-suite-v1__position-list div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .coyote-commerce-suite-v1__hero,
  .coyote-commerce-suite-v1__section,
  .coyote-commerce-suite-v1__section--paper,
  .coyote-commerce-suite-v1__section--dark {
    padding-inline: 14px;
  }

  .coyote-commerce-suite-v1__lead,
  .coyote-commerce-suite-v1__section-head p,
  .coyote-commerce-suite-v1__card-grid p,
  .coyote-commerce-suite-v1__flow-grid p {
    line-height: 1.85;
  }
}