/* 注文ページ：入力しやすさを優先したタブレット・スマートフォン対応 */
@import url("point-card-responsive.css?v=20260916d");

@media (min-width: 641px) and (max-width: 1024px) {
  .order-section {
    padding: 30px 0 54px !important;
  }

  .order-container {
    width: min(100% - 36px, 940px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .order-container > .order-header {
    margin: 0 0 24px !important;
    padding: 22px 24px !important;
  }

  .order-container > .order-header > .order-title {
    font-size: 1.55rem !important;
  }

  .order-form,
  .order-form .form-section {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .order-form .form-section {
    margin: 0 0 22px !important;
    padding: 22px !important;
  }

  .order-form .product-selection-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 34%) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .order-form .product-selection-controls,
  .order-form .product-selection-preview {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .order-form .product-category-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .order-form .product-category-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px 8px !important;
    white-space: normal !important;
  }

  .order-form .compact-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .order-form .compact-usage-grid,
  .order-form .idcard-choice-grid,
  .order-form .idcard-material-grid,
  .order-form .usage-spec-button-grid,
  .order-form .secondary-product-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .order-design-choice {
    padding: 18px !important;
  }

  .order-design-choice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .order-design-choice-item {
    min-width: 0 !important;
    padding: 14px !important;
  }

  .quantity-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .order-form .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #price-summary-flex {
    display: grid !important;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr) !important;
    gap: 20px !important;
    align-items: center !important;
    padding: 0 !important;
  }

  #price-summary-flex > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #price-summary-flex .price-summary-action-box {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  #checkoutBtn {
    width: 100% !important;
    min-height: 52px !important;
  }
}

@media (max-width: 640px) {
  .order-container {
    width: calc(100% - 24px) !important;
    margin-inline: auto !important;
  }

  .order-form .form-section {
    margin: 0 0 18px !important;
    padding: 16px !important;
  }

  .order-form .product-selection-layout,
  #price-summary-flex {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .order-design-choice-list,
  .order-form .option-grid {
    grid-template-columns: 1fr !important;
  }

  #checkoutBtn {
    width: 100% !important;
    min-height: 50px !important;
  }
}

/* 2026-09-19: Apple iphone-duo style fluid-scaling pilot for the desktop range
   (>=1280px), matching the one already deployed on membership-point-card.html.
   Uses vw (not %) so nested elements resolve against the viewport regardless
   of parent nesting, which keeps everything below correctly centered on the
   viewport even though .order-header/.form-section/.product-selection-layout
   sit inside .order-container.
   2026-09-19 (later same day): cap lowered from 1800/1700px to 1280px so
   order.html matches the same content width as the product-detail template
   pages (membership-point-card.html, public-medical-card.html, etc.), which
   were noticeably narrower at large viewports - user explicitly asked for
   order.html to match those rather than the other way around. This makes
   order.html meaningfully narrower than its previous 1700/1800px-capped
   design at wide viewports (e.g. content is ~1280px wide at 1920px instead
   of the previous 1700px), which was the intended visual effect of this
   request.
   .faq-section > .container is shared sitewide (style.css), so it's
   overridden here with !important instead of edited directly, keeping the
   change scoped to order.html only (this file is only loaded there). */
@media (min-width: 1280px) {
  .order-container {
    max-width: none !important;
    /* .order-container keeps its own 20px each-side padding (style.css).
       Adding that 40px back here (calc(86.49vw + 40px), capped at 1280+40)
       makes .order-container's CONTENT area (box minus its own padding)
       come out to exactly the same 86.49vw-capped-at-1280px width used
       below for its direct children (.order-header/.form-section), at
       every viewport, not just at the cap - otherwise those children would
       overflow .order-container's padded content box by 40px throughout
       the whole proportional range, not only once capped. */
    width: min(calc(86.49vw + 40px), 1320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .order-header,
  .form-section,
  .order-form .product-selection-layout {
    max-width: none !important;
    width: min(86.49vw, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .faq-section > .container {
    max-width: none !important;
    width: min(86.49vw, 1280px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The narrower content at 1280px (about 1107px vs the previous fixed
     1240px) makes "会員カード・メンバーズカード" no longer fit on one line
     inside its product-type-card, and it was wrapping mid-word ("カ" / "ード")
     since Japanese has no spaces to break on. keep-all makes it wrap at the
     natural "・" separator instead ("会員カード・" / "メンバーズカード"). */
  .order-form .product-type-card .card-content h6,
  .order-form .product-type-card h6 {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}