/* 学生証ページ：用途別カード共通のタブレット向けレスポンシブ設計 */
@import url("point-card-responsive.css?v=20260916d");

@media (min-width: 641px) and (max-width: 900px) {
  .order-process-section { padding: 48px 0 !important; }
  .order-process-section > .container > h2 { margin: 0 0 26px !important; text-align: center !important; font-size: 1.55rem !important; }
  .order-process-section .flow-method-title,
  .order-process-section .mail-order-flow-head { margin: 0 !important; padding: 18px 22px !important; border-radius: 18px 18px 0 0 !important; background: #245fc4 !important; color: #fff !important; text-align: left !important; }
  .order-process-section .flow-method-title { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 16px !important; }
  .order-process-section .flow-method-title small { color: rgba(255,255,255,.9) !important; font-size: .78rem !important; }
  .order-process-section .flow-role-key { margin: 0 !important; padding: 12px 22px !important; justify-content: flex-start !important; gap: 18px !important; border: 1px solid #dce6f5 !important; border-top: 0 !important; background: #f7faff !important; }
  .order-process-section .sugi-flow-scroll { width: 100% !important; max-width: 100% !important; overflow: visible !important; padding: 0 !important; border: 1px solid #dce6f5 !important; border-top: 0 !important; border-radius: 0 0 18px 18px !important; background: #fff !important; }
  .order-process-section .sugi-flow { display: grid !important; grid-template-columns: 1fr !important; grid-auto-rows: max-content !important; align-items: start !important; width: 100% !important; min-width: 0 !important; max-width: none !important; gap: 0 !important; padding: 10px 22px 20px !important; }
  .order-process-section .sugi-flow-step,
  .order-process-section .sugi-flow-company,
  .order-process-section .sugi-flow-final { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex-basis: auto !important; margin: 0 !important; }
  .order-process-section .sugi-flow-step { position: relative !important; display: grid !important; grid-template-columns: 58px minmax(0,1fr) !important; column-gap: 16px !important; padding: 20px 0 !important; border: 0 !important; border-bottom: 1px solid #e7edf6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; }
  .order-process-section .sugi-flow-step-no { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; width: 54px !important; padding: 6px 5px !important; border-radius: 999px !important; background: #eaf2ff !important; color: #245fc4 !important; font-size: .7rem !important; text-align: center !important; }
  .order-process-section .sugi-flow-icon { grid-column: 1 !important; grid-row: 2 / span 3 !important; width: 50px !important; height: 50px !important; margin-top: 8px !important; border-radius: 14px !important; }
  .order-process-section .sugi-flow-step h3,
  .order-process-section .sugi-flow-step p,
  .order-process-section .sugi-flow-choice { grid-column: 2 !important; }
  .order-process-section .sugi-flow-step h3 { margin: 0 0 5px !important; font-size: 1rem !important; line-height: 1.45 !important; }
  .order-process-section .sugi-flow-step p { margin: 0 !important; font-size: .82rem !important; line-height: 1.7 !important; }
  .order-process-section .sugi-flow-choice { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 10px !important; }
  .order-process-section .sugi-flow-choice a { width: auto !important; min-width: 0 !important; padding: 8px 13px !important; border-radius: 7px !important; }
  .order-process-section .sugi-flow-company { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-template-rows: auto !important; align-self: start !important; gap: 10px !important; padding: 14px 0 !important; }
  .order-process-section .sugi-flow-company > div { min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 15px 12px !important; border: 1px solid #e0e5ec !important; border-radius: 12px !important; background: #f4f5f7 !important; color: #4d596a !important; writing-mode: horizontal-tb !important; }
  .order-process-section .sugi-flow-arrow { position: relative !important; display: grid !important; place-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 22px !important; min-height: 0 !important; max-height: 22px !important; flex: 0 0 22px !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
  .order-process-section .sugi-flow-arrow img { display: none !important; }
  .order-process-section .sugi-flow-arrow::before { content: "" !important; width: 2px !important; height: 13px !important; background: #b6c9e8 !important; }
  .order-process-section .sugi-flow-arrow::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 3px !important; width: 7px !important; height: 7px !important; border-right: 2px solid #4f78be !important; border-bottom: 2px solid #4f78be !important; transform: translateX(-50%) rotate(45deg) !important; }
  .order-process-section .sugi-flow-final { display: flex !important; min-height: 58px !important; margin-top: 8px !important; border: 0 !important; border-radius: 12px !important; background: #245fc4 !important; color: #fff !important; align-items: center !important; justify-content: center !important; writing-mode: horizontal-tb !important; }
  .order-process-section .sugi-flow-final small { margin-left: 10px !important; color: rgba(255,255,255,.88) !important; }
  .order-process-section .mail-order-flow { margin-top: 34px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .order-process-section .mail-order-flow-head h3 { margin: 0 !important; color: #fff !important; font-size: 1rem !important; }
  .order-process-section .mail-order-flow .sugi-flow-scroll { border-top: 0 !important; }
  .order-process-section .flow-scroll-note { display: none !important; }

  .student-choice-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; width: 100% !important; max-width: none !important; gap: 18px !important; }
  .student-choice-card,
  .student-choice-body,
  .student-choice-actions { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .student-choice-media { min-height: 230px !important; padding: 34px 12px 14px !important; }
  .student-choice-media img { width: 100% !important; max-width: 310px !important; height: 185px !important; object-fit: contain !important; }
  .student-choice-body { padding: 18px !important; }
  .student-choice-body h3,
  .student-choice-price,
  .student-choice-note { writing-mode: horizontal-tb !important; word-break: normal !important; white-space: normal !important; }
  .student-choice-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  .student-choice-actions > * { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; }
  .member-order-journey-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; width: 100% !important; gap: 12px !important; }
  .member-order-journey-actions a { width: 100% !important; min-width: 0 !important; max-width: none !important; }
}

/* 2026-09-20: .student-choice-section is unique to this page (no .pvc-section
   class), so it fell back to the plain base .container (1480px cap),
   misaligned with the rest of the page's 1280px cap. Unified to the same
   86.49vw-capped-at-1280px formula. */
@media (min-width: 1280px) {
  .student-choice-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;
  }
}