/* 「ご注文から発送までの5ステップ」共通スタイル。
   ic-card-detail.html と同じ見た目（灰色地・白いカード5枚・CSSで描いたアイコン）。
   元：css/ic-chip-guide.css の .ic-order-flow / .ic-reference-flow（デスクトップ用）。IC側を直したらここも合わせる。 */
html body .member-order-journey.ic-order-flow{box-sizing:border-box;width:min(86.49vw,1280px);max-width:none;margin:40px auto;padding:44px 40px;background:#fff!important;border:1px solid #e8e8ed!important;border-radius:28px!important;box-shadow:none!important;color:#1d1d1f}html body .ic-order-flow .member-order-journey-head{display:block;text-align:left;margin:0 0 36px;padding:0;border:0;background:none}html body .ic-order-flow #member-order-journey-title{font-size:28px!important;line-height:1.4;letter-spacing:-.025em;margin:0 0 12px;font-weight:600}html body .ic-order-flow .member-order-journey-head p{font-size:14px;line-height:1.8;color:#6e6e73;margin:0}html body .ic-order-flow .member-order-journey-steps{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;list-style:none;margin:0!important;padding:0!important;background:none;border:0}html body .ic-order-flow .member-order-journey-step{position:relative;display:block!important;min-width:0;margin:0!important;padding:0!important;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;text-align:left}html body .ic-order-flow .member-order-journey-step:not(:last-child):after{content:"";position:absolute;left:58px;right:-24px;top:23px;height:1px;width:auto;background:#dce3eb;transform:none;border:0}html body .ic-order-flow .member-order-journey-node{position:relative;display:block;width:48px;height:48px;margin:0 0 23px;padding:0;background:#fff!important;border:0;box-shadow:none;z-index:1}html body .ic-order-flow .member-order-journey-number{position:static;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #ccdced;border-radius:50%;background:#fff!important;color:#1768b4;font-size:16px;font-weight:600;transform:none;box-shadow:none}html body .ic-order-flow .member-order-journey-icon{display:none!important}html body .ic-order-flow .member-order-journey-copy{margin:0;padding:0;text-align:left}html body .ic-order-flow .member-order-journey-copy strong{display:block;font-size:15px;font-weight:600;line-height:1.6;color:#1d1d1f;margin:0 0 10px}html body .ic-order-flow .member-order-journey-copy span{display:block;font-size:13px;line-height:1.85;color:#6e6e73}html body .ic-order-flow .member-order-journey-foot{margin:30px 0 0;padding:22px 0 0;border-top:1px solid #e8e8ed;background:none!important;text-align:left;font-size:13px;color:#6e6e73;line-height:1.8}html body .ic-order-flow .member-order-journey-steps:before,html body .ic-order-flow .member-order-journey-step:before{display:none!important}@media(min-width:701px) and (max-width:1279px){html body .member-order-journey.ic-order-flow{width:calc(100% - 200px);padding:36px 30px}html body .ic-order-flow .member-order-journey-steps{gap:18px}html body .ic-order-flow .member-order-journey-step:not(:last-child):after{right:-18px}}@media(max-width:900px){html body .ic-order-flow .member-order-journey-steps{grid-template-columns:1fr;gap:28px}html body .ic-order-flow .member-order-journey-step{display:grid!important;grid-template-columns:48px minmax(0,1fr);gap:20px}html body .ic-order-flow .member-order-journey-node{margin:0}html body .ic-order-flow .member-order-journey-step:not(:last-child):after{left:23px;right:auto;top:58px;bottom:-18px;height:auto;width:1px}html body .ic-order-flow .member-order-journey-copy{padding-top:3px}html body .ic-order-flow .member-order-journey-copy strong{margin-bottom:5px}}@media(max-width:700px){html body .member-order-journey.ic-order-flow{width:calc(100% - 28px);padding:30px 22px;border-radius:22px!important}html body .ic-order-flow #member-order-journey-title{font-size:23px!important}html body .ic-order-flow .member-order-journey-head{margin-bottom:28px}}
html body .ic-order-flow .member-order-journey-node{min-height:48px!important;max-height:48px!important;height:48px!important}html body .ic-order-flow .member-order-journey-step{min-height:0!important}html body .ic-order-flow .member-order-journey-head,html body .ic-order-flow .member-order-journey-head h2,html body .ic-order-flow .member-order-journey-head p,html body .ic-order-flow .member-order-journey-foot{text-align:left!important}html body .ic-order-flow .member-order-journey-number{font-size:16px!important}#member-order-journey-title{scroll-margin-top:120px}

/* Reference card illustrations, scoped to the IC desktop flow. */
      html body .ic-reference-flow .ic-flow-symbol {
        position: relative !important;
        display: block !important;
        width: 96px !important;
        height: 76px !important;
        margin: 0 0 34px !important;
      }

      html body .ic-reference-flow .ic-flow-symbol::before,
      .ic-flow-symbol::after {
        content: "" !important;
        position: absolute !important;
        display: block !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-card::before {
        width: 86px !important;
        height: 52px !important;
        left: 5px !important;
        top: 12px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #eaf5ff, #8dccff) !important;
        box-shadow: 0 12px 24px rgba(0, 113, 227, 0.16) !important;
        transform: rotate(-8deg) !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-card::after {
        width: 54px !important;
        height: 8px !important;
        left: 20px !important;
        top: 38px !important;
        border-radius: 999px !important;
        background: #0071e3 !important;
        transform: rotate(-8deg) !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-order::before {
        width: 54px !important;
        height: 72px !important;
        left: 21px !important;
        top: 2px !important;
        border-radius: 14px !important;
        border: 4px solid #1d1d1f !important;
        background: #fff !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-order::after {
        width: 42px !important;
        height: 22px !important;
        left: 27px !important;
        top: 36px !important;
        border-radius: 999px !important;
        background: #0071e3 !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-proof::before {
        width: 72px !important;
        height: 52px !important;
        left: 12px !important;
        top: 10px !important;
        border-radius: 14px !important;
        border: 4px solid #8fc5f4 !important;
        background: #fff !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-proof::after {
        width: 28px !important;
        height: 28px !important;
        right: 2px !important;
        bottom: 3px !important;
        border-radius: 50% !important;
        border: 5px solid #0071e3 !important;
        box-shadow: 16px 14px 0 -12px #0071e3 !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-print::before {
        width: 76px !important;
        height: 48px !important;
        left: 10px !important;
        top: 16px !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #f2f7ff, #c9e7ff) !important;
        border: 3px solid #b8d7f5 !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-print::after {
        width: 64px !important;
        height: 18px !important;
        left: 16px !important;
        top: 42px !important;
        border-radius: 8px !important;
        background: linear-gradient(90deg, #13a8e8 0 25%, #ff3b30 25% 50%, #ffcc00 50% 75%, #34c759 75%) !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-ship::before {
        width: 78px !important;
        height: 46px !important;
        left: 9px !important;
        top: 24px !important;
        border-radius: 10px !important;
        background: #d99a43 !important;
      }

      html body .ic-reference-flow .ic-flow-symbol-ship::after {
        width: 50px !important;
        height: 30px !important;
        left: 23px !important;
        top: 8px !important;
        border-radius: 8px !important;
        background: #f6c06f !important;
        transform: skewX(-18deg) !important;
      }

html body .member-order-journey.ic-reference-flow{background:#f5f5f7!important;border:0!important;padding:44px 32px!important}
html body .ic-reference-flow .member-order-journey-steps{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important}
html body .ic-reference-flow .member-order-journey-step{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;background:#fff!important;border-radius:24px!important;padding:30px 16px!important;min-height:260px!important;gap:0!important}
html body .ic-reference-flow .member-order-journey-step:after{display:none!important}
html body .ic-reference-flow .member-order-journey-node{width:96px!important;height:96px!important;min-height:96px!important;max-height:96px!important;display:flex!important;justify-content:center!important;align-items:center!important;margin:0 0 24px!important;background:transparent!important}
html body .ic-reference-flow .member-order-journey-number{display:none!important}
html body .ic-reference-flow .ic-flow-symbol{flex-shrink:0!important;margin:0!important;transform:scale(.78);transform-origin:center}
html body .ic-reference-flow .member-order-journey-copy{text-align:center!important;padding:0!important}
html body .ic-reference-flow .member-order-journey-copy strong{font-size:16px!important;line-height:1.55!important;margin-bottom:10px!important}
html body .ic-reference-flow .member-order-journey-copy span{font-size:13px!important;line-height:1.75!important;font-weight:400!important}
@media(max-width:900px){html body .ic-reference-flow .member-order-journey-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}html body .ic-reference-flow .member-order-journey-step{padding:22px 10px!important;min-height:230px!important}html body .ic-reference-flow .member-order-journey-node{margin-bottom:15px!important}html body .ic-reference-flow .member-order-journey-copy strong{font-size:14px!important}html body .ic-reference-flow .member-order-journey-copy span{font-size:12px!important}}
@media(max-width:700px){html body .member-order-journey.ic-reference-flow{padding:28px 18px!important}html body .ic-reference-flow #member-order-journey-title{font-size:23px!important;line-height:1.5!important}html body .ic-reference-flow .member-order-journey-head{margin-bottom:28px!important}}

/* 平板幅：pvc-detail-responsive.css を読み込まないページでも、流れの枠を他の枠と同じ幅(100%)にそろえる */
@media(min-width:641px) and (max-width:1279px){html body .pvc-specs-grid>.member-order-journey.ic-order-flow{width:100%!important}}