/* 郵送買取／店頭買取の切り替え部品（.common-tab-menus）— BRING（kaitorisatei.info/nike の宅配買取タブ）の型に寄せる r7
   ユーザー：「BRING ほぼ一緒で、トンマナはリンクサスくらいの勢いで真似したい」「このページにタブ切り替え参考にしたデザインある」
   型：①左右 2 枚の大きなタブ（選択中＝濃色＋下向きの三角、非選択＝グレー）②暗くした写真の上に「アイコン＋方式名」と白いチェック 3 行
      ③「4STEP」の見出し（数字を大きく下線）④白い丸を灰色の線でつないだ手順（丸の上に番号、中にアイコンと名称）
   色はリンクサスの紺 #14355D・#224995、アクセントはピンク #F41782（BRING の赤の位置）。flow-icons-3d.css の後に読み込む。 */
.common-tab-menus { --lx-navy: #14355D; --lx-navy2: #224995; --lx-acc: #F41782; --lx-gray: #9AA6B6; --lx-line: #C9D2DE; }

/* ① タブ */
.common-tab-menus .common-tab-menu { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.common-tab-menus .common-tab-menu .tab-menu-item,
.common-tab-menus .common-tab-menu .tab-menu-item .menu-content { background: var(--lx-gray) !important; background-image: none !important; opacity: 1 !important; border-radius: 0 !important; }
.common-tab-menus .common-tab-menu .tab-menu-item { position: relative !important; margin: 0 !important; padding: 0 !important; cursor: pointer; }
.common-tab-menus .common-tab-menu .tab-menu-item .menu-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; min-height: 76px !important; padding: 10px 6px !important; box-sizing: border-box !important; }
.common-tab-menus .common-tab-menu .tab-menu-item .tag { order: 2 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0 !important; white-space: nowrap !important; opacity: .95 !important; }
.common-tab-menus .common-tab-menu .tab-menu-item .menu-title { order: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important; color: #fff !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: .04em !important; }
.common-tab-menus .common-tab-menu .menu-title i.iconsending,
.common-tab-menus .common-tab-menu .menu-title i.iconshop { width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 2px !important; box-sizing: border-box !important; background-color: #fff !important; border-radius: 6px !important; }
.common-tab-menus .common-tab-menu .tab-menu-item.current,
.common-tab-menus .common-tab-menu .tab-menu-item.current .menu-content { background: var(--lx-navy) !important; }
.common-tab-menus .common-tab-menu .tab-menu-item::after { content: none !important; display: none !important; }
.common-tab-menus .common-tab-menu .tab-menu-item.current::before {
  content: "" !important; display: block !important; position: absolute !important; left: 50% !important; bottom: -11px !important; top: auto !important; z-index: 3 !important;
  width: 0 !important; height: 0 !important; transform: translateX(-50%) !important; background: none !important;
  border-left: 12px solid transparent !important; border-right: 12px solid transparent !important; border-top: 12px solid var(--lx-navy) !important;
}

/* ② 写真＋方式名＋チェック（暗い面を 1 枚につなげる） */
.common-tab-menus .common-tab-body .tab-body-item { --lx-hero: #16243a; }
.common-tab-menus .common-tab-body .tab-body-item .item-pic {
  position: relative !important; display: block !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  border: 0 !important; border-radius: 0 !important; background: var(--lx-hero) !important; box-shadow: none !important;
}
.common-tab-menus .common-tab-body .tab-body-item .item-pic > img {
  position: static !important; display: block !important; width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 16 / 7 !important; object-fit: cover !important;
  transform: none !important; top: auto !important; left: auto !important; filter: brightness(.55) saturate(.9) !important;
}
.common-tab-menus .common-tab-body .tab-body-item .item-pic::after {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important;
  background: linear-gradient(180deg, rgba(22,36,58,0) 35%, var(--lx-hero) 100%) !important; pointer-events: none !important;
}
.common-tab-menus .common-tab-body .tab-body-item .item-pic .item-pic-ttl {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 14px !important; top: auto !important; z-index: 2 !important; transform: none !important;
  width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important; padding: 0 16px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  color: #fff !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: .06em !important; text-align: center !important; text-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}
.common-tab-menus .common-tab-body .tab-body-item .item-pic .item-pic-ttl::before,
.common-tab-menus .common-tab-body .tab-body-item .item-pic .item-pic-ttl::after { content: none !important; display: none !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-check {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important;
  margin: 0 !important; padding: 6px 20px 24px !important; background: var(--lx-hero) !important; border: 0 !important; border-radius: 0 !important;
}
.common-tab-menus .common-tab-body .tab-body-item .step-check .check {
  position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important;
  width: auto !important; max-width: none !important; min-height: 0 !important; flex: none !important; margin: 0 auto !important; padding: 0 0 0 34px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: #fff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.5 !important; text-align: left !important; letter-spacing: .04em !important;
  min-width: 15.5em !important;
}
.common-tab-menus .common-tab-body .tab-body-item .step-check .check br { display: none !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-check .check::before {
  content: "" !important; position: absolute !important; left: 2px !important; top: 50% !important; right: auto !important; bottom: auto !important;
  width: 20px !important; height: 11px !important; margin: 0 !important; transform: translateY(-70%) rotate(-45deg) !important;
  background: none !important; border: 0 !important; border-left: 4px solid var(--lx-acc) !important; border-bottom: 4px solid var(--lx-acc) !important; border-radius: 1px !important; box-shadow: none !important;
}
.common-tab-menus .common-tab-body .tab-body-item .step-check .check::after { content: none !important; display: none !important; }

/* ③ 4STEP 見出し */
.common-tab-menus .common-tab-body .tab-body-item .step-process { margin: 0 !important; padding: 26px 8px 8px !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl {
  margin: 0 0 18px !important; padding: 0 !important; background: none !important; border: 0 !important; text-align: center !important;
  color: #222 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: .06em !important;
}
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl::before,
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl::after,
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl span::before,
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl span::after { content: none !important; display: none !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl span { display: inline-block !important; margin: 0 4px !important; padding: 0 2px 2px !important; background: none !important; border: 0 !important; border-bottom: 4px solid var(--lx-acc) !important; color: var(--lx-navy) !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.1 !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl em { color: var(--lx-navy) !important; font-style: normal !important; font-size: 38px !important; font-weight: 800 !important; line-height: 1 !important; vertical-align: -3px !important; }

/* ④ 手順：白い丸を灰色の線でつなぐ（SP は 2×2、丸の上に番号、中にアイコンと名称） */
.common-tab-menus .common-tab-body .tab-body-item .process-content {
  position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 0 !important;
  margin: 0 !important; padding: 14px 0 6px !important; background: none !important; border: 0 !important;
}
.common-tab-menus .common-tab-body .tab-body-item .process-content::before,
.common-tab-menus .common-tab-body .tab-body-item .process-content::after { content: none !important; display: none !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block {
  position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
  width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
/* つなぎの線（各丸の右側へ。行の右端は出さない） */
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::after {
  content: "" !important; display: block !important; position: absolute !important; z-index: 0 !important; top: 58px !important; left: 50% !important; right: auto !important; bottom: auto !important;
  width: 100% !important; height: 12px !important; transform: none !important; background: var(--lx-line) !important; border: 0 !important;
}
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:nth-child(2n)::after,
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:last-child::after { display: none !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon {
  position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
  width: 128px !important; height: 128px !important; max-width: none !important; margin: 0 auto !important; padding: 18px 0 0 !important; box-sizing: border-box !important;
  background: #fff !important; border: 4px solid var(--lx-line) !important; border-radius: 50% !important; box-shadow: none !important; transform: none !important;
}
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon img,
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon img[src*="flow-mail-block"],
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon img[src*="flow-store-block"] {
  width: 52px !important; height: 52px !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain !important;
}
/* ISSUES #16 / r12 — 番号だけ2桁1行。丸の上の枠線を白で切って置く。 */
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::before {
  content: attr(data-num) !important; display: block !important; position: absolute !important; z-index: 2 !important; top: -16px !important; left: 50% !important; right: auto !important; bottom: auto !important;
  width: max-content !important; min-width: 34px !important; height: auto !important; margin: 0 !important; padding: 0 4px !important; transform: translateX(-50%) !important; white-space: nowrap;
  background: #fff !important; border: 0 !important; color: var(--lx-navy) !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; letter-spacing: 0 !important;
}
/* 名称：丸の中のアイコンの下 */
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name {
  position: absolute !important; z-index: 2 !important; top: 80px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important;
  width: 108px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important;
  display: block !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: #222 !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: center !important; letter-spacing: 0 !important;
}
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:last-child:nth-child(odd) { grid-column: 1 / -1 !important; width: auto !important; justify-self: center !important; }

/* ボタン */
.common-tab-menus .common-tab-body .tab-body-item .item-btn { margin: 20px 0 0 !important; padding: 0 !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-btn .button { border-radius: 6px !important; background: var(--lx-navy) !important; border-color: var(--lx-navy) !important; }

/* 情報欄（任意。HTML の追加が要る） */
.common-tab-menus .lx-method-facts { margin: 0 !important; padding: 4px 16px 10px !important; background: #f4f7fb !important; border: 0 !important; border-radius: 0 !important; }
.common-tab-menus .lx-method-fact { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px dashed #d3dbe6; }
.common-tab-menus .lx-method-fact:last-child { border-bottom: 0; }
.common-tab-menus .lx-method-fact dt { margin: 0; color: var(--lx-navy); font-size: 13px; font-weight: 700; line-height: 1.6; }
.common-tab-menus .lx-method-fact dd { margin: 0; color: #222; font-size: 13px; line-height: 1.6; word-break: break-word; }

/* PC：2 つの部品が横に並ぶので、手順は 1 行に 4 つ（丸を小さく） */
@media (min-width: 768px) {
  .common-tab-menus .common-tab-body .tab-body-item .process-content { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .common-tab-menus .common-tab-body .tab-body-item.green .process-content { grid-template-columns: repeat(var(--lx-steps, 4), minmax(0, 1fr)) !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:nth-child(2n):not(:last-child)::after { display: block !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:last-child:nth-child(odd) { grid-column: auto !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon { width: 112px !important; height: 112px !important; padding-top: 14px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon img { width: 44px !important; height: 44px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::after { top: 50px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { top: 64px !important; width: 98px !important; font-size: 11.5px !important; }
}
@media (max-width: 359px) {
  .common-tab-menus .common-tab-menu .tab-menu-item .tag { font-size: 10px !important; }
  .common-tab-menus .common-tab-menu .tab-menu-item .menu-title { font-size: 18px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .step-check .check { font-size: 14.5px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon { width: 118px !important; height: 118px !important; }
}

/* r7 調整：タブを左右半分ずつ、方式名を 1 行に。チェックは左端をそろえて中央に置く。手順の名称は丸の下に 1 行で置く（丸の中だと「本／人確認」「お知ら／せ」と落ちるため） */
.common-tab-menus .common-tab-menu .tab-menu-item { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; float: none !important; }
.common-tab-menus .common-tab-menu .tab-menu-item .menu-title { white-space: nowrap !important; }
.common-tab-menus .common-tab-menu .tab-menu-item .tag { white-space: nowrap !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-check { display: grid !important; justify-content: center !important; justify-items: start !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-check .check { margin: 0 !important; min-width: 0 !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon { justify-content: center !important; padding: 0 !important; width: 108px !important; height: 108px !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon img { width: 56px !important; height: 56px !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::after { top: 48px !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name {
  position: static !important; transform: none !important; width: 100% !important; margin: 10px 0 0 !important; padding: 0 4px !important;
  font-size: 13px !important; color: var(--lx-navy) !important;
}
@media (min-width: 768px) {
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon { width: 92px !important; height: 92px !important; padding: 0 !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon img { width: 46px !important; height: 46px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::after { top: 40px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { position: static !important; transform: none !important; width: 100% !important; font-size: 11.5px !important; letter-spacing: -0.02em !important; padding: 0 1px !important; }
  .common-tab-menus .common-tab-menu .tab-menu-item .menu-title { font-size: 22px !important; }
}
@media (max-width: 359px) {
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon { width: 100px !important; height: 100px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { font-size: 12px !important; }
}

/* r7 バランス調整（ユーザー「レイアウト・余白・配置を細かくバランス調整」） */
.common-tab-menus ol, .common-tab-menus ul { list-style: none !important; padding-left: 0 !important; }
.common-tab-menus .common-tab-menu .tab-menu-item::marker { content: none !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-step { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
/* 写真の上：BRING と同じく、方式のアイコンを名前の上に置く */
.common-tab-menus .common-tab-body .tab-body-item .item-pic > img { aspect-ratio: 16 / 9 !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-pic .item-pic-ttl { flex-direction: column !important; gap: 6px !important; bottom: 12px !important; font-size: 21px !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-pic .item-pic-ttl::before {
  content: "" !important; display: block !important; position: static !important; width: 44px !important; height: 44px !important; margin: 0 !important; transform: none !important;
  background: rgba(255,255,255,.95) url("../images/buyshops/icon3d/flow-truck-map.webp") center / 34px no-repeat !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 4px 10px rgba(0,0,0,.25) !important;
}
.common-tab-menus .common-tab-body .tab-body-item.green .item-pic .item-pic-ttl::before { background-image: url("../images/buyshops/icon3d/flow-storefront.webp") !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-pic::after { background: linear-gradient(180deg, rgba(22,36,58,.15) 0%, rgba(22,36,58,.35) 45%, var(--lx-hero) 100%) !important; }
/* チェック：写真と同じ面で続ける。文字は 15px、行間 8px */
.common-tab-menus .common-tab-body .tab-body-item .step-check { gap: 8px !important; padding: 4px 16px 22px !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-check .check { font-size: 15px !important; letter-spacing: .02em !important; padding-left: 30px !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-check .check::before { width: 16px !important; height: 9px !important; border-left-width: 3px !important; border-bottom-width: 3px !important; }
/* 情報欄 → STEP → ボタンの間隔をそろえる */
.common-tab-menus .common-tab-body .tab-body-item .step-process { padding: 28px 8px 4px !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl { margin-bottom: 22px !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content { gap: 24px 0 !important; padding: 10px 0 0 !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-btn { margin: 24px 0 0 !important; }
/* 手順の数に合わせて列を作る（3 つなら 3 列で全幅を使う） */
@media (min-width: 768px) {
  .common-tab-menus .common-tab-body .tab-body-item .process-content,
  .common-tab-menus .common-tab-body .tab-body-item.green .process-content { grid-template-columns: none !important; grid-auto-columns: minmax(0, 1fr) !important; grid-auto-flow: column !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { font-size: 12px !important; letter-spacing: 0 !important; }
  /* 左右の部品でボタンの高さをそろえる */
  .common-tab-menus .common-tab-body { align-items: stretch !important; }
  .common-tab-menus .common-tab-body .tab-body-item { display: flex !important; flex-direction: column !important; }
  .common-tab-menus .common-tab-body .tab-body-item .item-step { flex: 1 1 auto !important; }
  .common-tab-menus .common-tab-body .tab-body-item .item-btn { margin-top: auto !important; padding-top: 24px !important; }
}
@media (max-width: 389px) {
  .common-tab-menus .common-tab-body .tab-body-item .step-check .check { font-size: 14px !important; letter-spacing: 0 !important; padding-left: 28px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .step-check { padding-left: 12px !important; padding-right: 12px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { font-size: 12px !important; letter-spacing: -0.01em !important; padding: 0 2px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { font-size: 11px !important; }
}

/* r9（ユーザー「ここも微妙」：3STEP が 2＋1 段で釣り合わない・丸が大きくアイコンが小さい）
   BRING の宅配タブと同じく、手順は全幅で 1 行に並べる（3 つでも 4 つでも 1 行）。丸は列幅に合わせて縮め、アイコンは丸の 55%。
   つなぎの線は丸の中心の高さで、最初の丸の中心から最後の丸の中心まで 1 本で引く。 */
.common-tab-menus .common-tab-body .tab-body-item .process-content {
  display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important;
  gap: 0 6px !important; padding: 8px 0 0 !important; position: relative !important;
}
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:last-child:nth-child(odd) { grid-column: auto !important; width: auto !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon {
  width: min(88px, 100%) !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-width: 3px !important; margin: 0 auto !important;
}
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon img { width: 55% !important; height: 55% !important; }
/* 線：各丸の右へ、次の丸の中心まで（最後は出さない） */
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::after {
  display: block !important; top: calc(min(88px, 100%) / 2 - 4px) !important; left: 50% !important; width: calc(100% + 6px) !important; height: 8px !important;
}
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:nth-child(2n)::after { display: block !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:last-child::after { display: none !important; }
/* ISSUES #16 / r12 — 320pxの4STEPでも番号の下端と画像の間に空きを保つ。 */
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::before { top: -20px !important; font-size: 22px !important; min-width: 30px !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name {
  margin: 8px 0 0 !important; padding: 0 1px !important; font-size: 12px !important; line-height: 1.45 !important; letter-spacing: -0.01em !important;
}
@media (max-width: 389px) {
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { font-size: 11px !important; }
}
@media (min-width: 768px) {
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon { width: min(84px, 100%) !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::after { top: calc(min(84px, 100%) / 2 - 4px) !important; }
}

/* ===== r10（ユーザー：「頑張って 4 ステップも横並びに」「（写真・メリット・情報欄）ここ微妙」「店頭と郵送で色を変えて区別していたのは踏襲しろ」） ===== */
/* 色：元の部品どおり、郵送＝紫 #6464CE、店頭＝緑 #00B38D。タブ・チェック・STEP の数字と下線・丸の枠・番号に使う。地と文字は紺のまま */
.common-tab-menus { --lx-mail: #6464CE; --lx-mail-bg: #F2F2FC; --lx-store: #00B38D; --lx-store-bg: #EAF8F4; }
.common-tab-menus .common-tab-body .tab-body-item { --lx-acc: var(--lx-mail); --lx-accbg: var(--lx-mail-bg); --lx-line: #D6D6F3; }
.common-tab-menus .common-tab-body .tab-body-item.green { --lx-acc: var(--lx-store); --lx-accbg: var(--lx-store-bg); --lx-line: #BFE9DE; }
.common-tab-menus .common-tab-menu .tab-menu-item:first-child.current,
.common-tab-menus .common-tab-menu .tab-menu-item:first-child.current .menu-content { background: var(--lx-mail) !important; }
.common-tab-menus .common-tab-menu .tab-menu-item:first-child.current::before { border-top-color: var(--lx-mail) !important; }
.common-tab-menus .common-tab-menu .tab-menu-item:last-child.current,
.common-tab-menus .common-tab-menu .tab-menu-item:last-child.current .menu-content { background: var(--lx-store) !important; }
.common-tab-menus .common-tab-menu .tab-menu-item:last-child.current::before { border-top-color: var(--lx-store) !important; }
.common-tab-menus .common-tab-menu .tab-menu-item:not(.current),
.common-tab-menus .common-tab-menu .tab-menu-item:not(.current) .menu-content { background: #E9EDF3 !important; }
.common-tab-menus .common-tab-menu .tab-menu-item:not(.current) .menu-title,
.common-tab-menus .common-tab-menu .tab-menu-item:not(.current) .tag { color: #5b6b80 !important; }

/* 写真＋メリット＋情報欄：暗い面をやめる。写真は明るいまま、下は白い 1 枚の面に「方式名・チェック・情報」を左揃えでまとめる（囲みは面 1 つだけ） */
.common-tab-menus .common-tab-body .tab-body-item .item-pic { background: none !important; border-radius: 0 !important; box-shadow: 0 1px 3px rgba(20,53,93,.08) !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-pic > img { filter: none !important; aspect-ratio: 16 / 8 !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-pic::after { content: none !important; display: none !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-pic .item-pic-ttl {
  position: static !important; flex-direction: row !important; justify-content: flex-start !important; gap: 10px !important;
  margin: 0 !important; padding: 18px 16px 6px !important; background: #fff !important; text-shadow: none !important;
  color: #14355D !important; font-size: 19px !important; letter-spacing: .04em !important; text-align: left !important;
}
.common-tab-menus .common-tab-body .tab-body-item .item-pic .item-pic-ttl::before {
  width: 36px !important; height: 36px !important; flex: none !important; background-size: 28px !important; background-color: var(--lx-accbg) !important;
  border-radius: 8px !important; box-shadow: none !important;
}
.common-tab-menus .common-tab-body .tab-body-item .step-check {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; justify-items: stretch !important;
  gap: 6px !important; margin: 0 !important; padding: 8px 16px 14px !important; background: #fff !important;
}
.common-tab-menus .common-tab-body .tab-body-item .step-check .check { color: #14355D !important; font-size: 15px !important; padding-left: 28px !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-check .check::before { border-left-color: var(--lx-acc) !important; border-bottom-color: var(--lx-acc) !important; left: 3px !important; }
.common-tab-menus .lx-method-facts { margin: 0 !important; padding: 2px 16px 12px !important; background: #fff !important; border-top: 1px solid #EEF1F5 !important; }
.common-tab-menus .lx-method-fact { border-bottom: 0 !important; padding: 8px 0 !important; grid-template-columns: 6em minmax(0,1fr) !important; }
.common-tab-menus .lx-method-fact dt { color: var(--lx-acc) !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-step { background: #fff !important; box-shadow: 0 1px 3px rgba(20,53,93,.08) !important; border-radius: 0 0 8px 8px !important; padding-bottom: 18px !important; }

/* STEP：数字と下線と丸の枠を方式の色に。4 つでも 1 行に並べる（名称は意味の切れ目の <br class="lx-sp"> で 2 行に） */
.common-tab-menus .common-tab-body .tab-body-item .step-process { background: #fff !important; padding: 22px 8px 0 !important; border-top: 1px solid #EEF1F5 !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl span { border-bottom-color: var(--lx-acc) !important; color: var(--lx-acc) !important; }
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl em { color: var(--lx-acc) !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::before { color: var(--lx-acc) !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-icon { border-color: var(--lx-line) !important; width: min(76px, 100%) !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::after { background: var(--lx-line) !important; top: calc(min(76px, 100%) / 2 - 3px) !important; height: 6px !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { font-size: 12px !important; line-height: 1.45 !important; white-space: normal !important; letter-spacing: 0 !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name br.lx-sp { display: inline; }
@media (min-width: 1024px) { .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name br.lx-sp { display: none; } }
.common-tab-menus .common-tab-body .tab-body-item .item-btn { margin: 0 !important; padding: 18px 16px 0 !important; background: #fff !important; }
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block:last-child:nth-child(odd) { justify-self: stretch !important; width: auto !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-btn .button { width: 100% !important; max-width: none !important; box-sizing: border-box !important; }
/* PC は郵送・店頭の両方が並ぶので、タブも両方とも自分の色にする */
@media (min-width: 768px) {
  .common-tab-menus .common-tab-menu .tab-menu-item:first-child, .common-tab-menus .common-tab-menu .tab-menu-item:first-child .menu-content { background: var(--lx-mail) !important; }
  .common-tab-menus .common-tab-menu .tab-menu-item:last-child, .common-tab-menus .common-tab-menu .tab-menu-item:last-child .menu-content { background: var(--lx-store) !important; }
  .common-tab-menus .common-tab-menu .tab-menu-item .menu-title, .common-tab-menus .common-tab-menu .tab-menu-item .tag { color: #fff !important; }
  .common-tab-menus .common-tab-menu .tab-menu-item::before { display: none !important; }
}
/* 320：STEP の見出しが「流／れ」と割れるので詰める */
@media (max-width: 359px) {
  .common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl { font-size: 14px !important; letter-spacing: 0 !important; }
  .common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl em { font-size: 32px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl span { font-size: 17px !important; margin: 0 2px !important; }
  .common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { font-size: 11px !important; }
}
@media (max-width: 359px) { .common-tab-menus .common-tab-body .tab-body-item .step-check .check { font-size: 13.5px !important; letter-spacing: 0 !important; padding-left: 24px !important; } .common-tab-menus .common-tab-body .tab-body-item .step-check { padding-left: 12px !important; padding-right: 8px !important; } }

/* ===== r11（ユーザー：「タブ部分は前のデザイン通りネイビーで切り替え」「アイコンは埋もれるので、コントラスト比を意識して座布団なしの白いリッチなアイコンで」） =====
   タブだけは元の部品どおり紺で切り替える（選択中＝濃い紺＋下向きの三角、非選択＝明るめの紺）。郵送・店頭の色分けは中身（チェック・STEP・丸）に残す。
   アイコンは 3D アイコンの陰影を残した白い版（icon3d/flow-*-white.webp）を、白い座布団なしで置く。 */
.common-tab-menus .common-tab-menu .tab-menu-item,
.common-tab-menus .common-tab-menu .tab-menu-item .menu-content,
.common-tab-menus .common-tab-menu .tab-menu-item:first-child,
.common-tab-menus .common-tab-menu .tab-menu-item:first-child .menu-content,
.common-tab-menus .common-tab-menu .tab-menu-item:last-child,
.common-tab-menus .common-tab-menu .tab-menu-item:last-child .menu-content { background: #4D6A9E !important; }
.common-tab-menus .common-tab-menu .tab-menu-item.current,
.common-tab-menus .common-tab-menu .tab-menu-item.current .menu-content,
.common-tab-menus .common-tab-menu .tab-menu-item:first-child.current,
.common-tab-menus .common-tab-menu .tab-menu-item:first-child.current .menu-content,
.common-tab-menus .common-tab-menu .tab-menu-item:last-child.current,
.common-tab-menus .common-tab-menu .tab-menu-item:last-child.current .menu-content { background: #14355D !important; }
.common-tab-menus .common-tab-menu .tab-menu-item.current::before,
.common-tab-menus .common-tab-menu .tab-menu-item:first-child.current::before,
.common-tab-menus .common-tab-menu .tab-menu-item:last-child.current::before { border-top-color: #14355D !important; }
.common-tab-menus .common-tab-menu .tab-menu-item .menu-title,
.common-tab-menus .common-tab-menu .tab-menu-item:not(.current) .menu-title { color: #fff !important; }
.common-tab-menus .common-tab-menu .tab-menu-item .tag,
.common-tab-menus .common-tab-menu .tab-menu-item:not(.current) .tag { color: rgba(255,255,255,.88) !important; }
.common-tab-menus .common-tab-menu .menu-title i.iconsending,
.common-tab-menus .common-tab-menu .menu-title i.iconshop {
  width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 0 !important;
  background-color: transparent !important; border-radius: 0 !important; background-size: contain !important;
}
.common-tab-menus .common-tab-menu .menu-title i.iconsending { background-image: url("../images/buyshops/icon3d/tab-mail.webp") !important; }
.common-tab-menus .common-tab-menu .menu-title i.iconshop { background-image: url("../images/buyshops/icon3d/tab-store.webp") !important; }
@media (min-width: 768px) {
  /* PC は両方の中身が並ぶので、タブは両方とも濃い紺・三角なし */
  .common-tab-menus .common-tab-menu .tab-menu-item,
  .common-tab-menus .common-tab-menu .tab-menu-item .menu-content { background: #14355D !important; }
}

/* ISSUES #11 / r11 — 面・チェック・線は元の緑。文字だけ白地4.78:1の濃緑へ。 */
.common-tab-menus .common-tab-body .tab-body-item { --lx-acc-text:#6464CE; }
.common-tab-menus .common-tab-body .tab-body-item.green { --lx-acc-text:#008268; }
.common-tab-menus .lx-method-fact dt,
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl span,
.common-tab-menus .common-tab-body .tab-body-item .step-process .process-ttl em,
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block::before { color:var(--lx-acc-text) !important; }
/* 名称は意味単位のspan間だけで改行。狭い端末でも12pxを保つ。 */
.common-tab-menus .common-tab-body .tab-body-item .process-content .content-block .block-name { width:100% !important; max-width:none; font-size:12px !important; letter-spacing:0 !important; padding:0 1px !important; word-break:break-word; }
.common-tab-menus .lx-phrase { display:inline-block; white-space:nowrap; word-break:break-word; }
.common-tab-menus .block-name br.lx-sp { display:block !important; }
.common-tab-menus .lx-method-fact dd { min-width:0; word-break:break-word; }
/* ISSUES #11 — 本番の中間幅にも767/768の境界を明示する。 */
@media (max-width:767px) {
  .common-tab-menus .common-tab-body { display:block !important; }
  .common-tab-menus .common-tab-body .tab-body-item { width:100% !important; }
  .common-tab-menus .common-tab-body .tab-body-item:not(.current) { display:none !important; }
  .common-tab-menus .common-tab-body .tab-body-item.current { display:flex !important; flex-direction:column; }
}

/* ISSUES #5・#11 / r11 — 共通タブの詳細リンク。既存SVG矢印を右端へ、文を中央へ。
   色・高さ・角丸は既存buttonを使用。delivery-purchaseにも同じ補正を当てる。 */
.common-tab-menus { --lx-cta-arrow:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2013%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.87435%200.296771C7.25313%20-0.0779735%207.84893%20-0.0974773%208.24949%200.236345L8.32567%200.307513L12.705%204.77637C13.0983%205.17777%2013.0983%205.8225%2012.705%206.22391L8.32567%2010.6928C7.92794%2011.0982%207.27812%2011.103%206.87435%2010.7035C6.47086%2010.3039%206.46611%209.65093%206.86366%209.24522L9.52307%206.53141H1.02634C0.459509%206.53141%200%206.0697%200%205.50014C0%204.93058%200.459509%204.46886%201.02634%204.46886H9.52307L6.86366%201.75506L6.79417%201.67583C6.46853%201.26837%206.49605%200.671465%206.87435%200.296771Z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E"); }
.common-tab-menus .common-tab-body .tab-body-item .item-btn a.button:has(> .iconarrow) { position:relative; display:flex !important; align-items:center; justify-content:center; padding-right:32px !important; padding-left:32px !important; white-space:nowrap; word-break:break-word; }
.common-tab-menus .common-tab-body .tab-body-item .item-btn a.button > .iconarrow { display:none !important; }
.common-tab-menus .common-tab-body .tab-body-item .item-btn a.button:has(> .iconarrow)::after { content:""; position:absolute; top:50%; right:16px; width:13px; height:11px; background:currentColor; mask:var(--lx-cta-arrow) center / contain no-repeat; transform:translateY(-50%); pointer-events:none; }